/* Base */
#base {
    width: auto;
}

div#cont {
    margin: 0 auto;
    font-family: helvetica neue, noto sans jp, yu gothic, YuGothic, ヒラギノ角ゴ pron w3, hiragino kaku gothic pron, Arial, メイリオ, Meiryo, sans-serif;
    line-height: unset;
    color: #333;
}

#askOuter {
    max-width: 1280px;
    margin: auto;
}

#commonInquiry {
    width: 980px
}

/* Layout */
.l_main {
    font-size: 16px;
    line-height: 1.7;    
}

.l_section {}

.l_section__item {
    margin-top: 14px;
}

.l_section--primary {}

.l_section--secondary {}

.l_section--tertiary {
    margin-top: 24px;
}

.l_section--primary>.l_section__item+.l_section__item {
    margin-top: 96px;
}

.l_section--secondary>.l_section__item+.l_section__item {
    margin-top: 48px;
}

.l_section--tertiary>.l_section__item+.l_section__item {
    margin-top: 24px;
}

.l_grid {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.l_grid__item {
    display: flex;
}

.l_grid__inner {
    display: block;
    width: 100%;
}

.l_grid--hasGutter {
    margin: -12px;
}

.l_grid--hasGutter>.l_grid__item {
    padding: 12px;
}

.l_btn {}

/* Module */

/* ヒーローエリア */
.m_vision_herosAreaWrap {
    margin-top: 0;
}

.m_vision_herosArea {}

.m_vision_herosArea__keyvisual {}

.m_vision_herosArea__keyvisual>img {
    width: 100%;
}

/* ナビゲーション */
.m_vision_nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: auto;
    background-color: #fff;
    box-shadow: 0 4px 4px #aaa;
    margin-top: -8px;
}

.m_vision_navWrap {
    display: flex;
    justify-content: center;
    width: 980px;
}

.m_vision_nav__list {
    display: flex;
    border-right: 1px solid #000;
    width: 80%;
}

.m_vision_nav__item {
    display: flex;
    align-items: center;
    list-style: none;
    border-left: 1px solid #000;
    text-align: center;
    width: 100%;
    height: 60px;
    padding: 10px 0;

}

.m_vision_nav__item:hover {
    background-color: #f9c600;
}

.m_vision_nav__link {
    font-size: 16px;
    text-decoration: none;
    color: #000;
    width: 100%;
    display: inline-block;
    font-weight: bold;
    padding: 5px;
}

.m_vision_nav__btn {
    padding-left: 20px;
}

.m_vision_nav__btnItem {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
    list-style: none;
}

.m_vision_nav__btnLink {
    background-color: #df002d;
    border-radius: 5px;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.m_vision_nav__btnLink:hover {
    opacity: .6;

}

/* キャッチコピー */
.m_vision_salescopy {}

.m_vision_salescopy__inner {
    display: flex;
    justify-content: center;
    text-align: center;
}

.m_vision_salescopy__text {
    font-size: 20px;
}

.m_vision_salescopy__strength {
    font-size: 30px;
}


/* メリット */
.m_vision_merit {
    background-color: #fff0be;
    padding: 30px;
}

.m_vision_merit__heading {
    margin-bottom: 48px;
}

.m_vision_merit__headingTxt {
    font-size: 40px;
    text-align: center;
}

.m_vision_merit__body {}


.m_vision_merit__box {
    padding: 15px;
}

.m_vision_merit__inner {
    display: block;
    width: 100%;
}

.m_vision_merit__boxImg {
    float: left;
    margin-right: 20px;
}

.m_vision_merit__boxImg>img {}

.m_vision_merit__boxHeading {
    font-size: 24px;
    height: 80px;
}

.m_vision_merit__boxTtl {
    letter-spacing: -1px;
    line-height: 1.3;
}

.m_vision_merit__boxBodyWrap {
    text-align: left;
}

.m_vision_merit__boxBody {
    font-size: 16px;
    font-weight: 500;
}

.m_vision_merit__boxCopy {}

/* 理念浸透の壁 */
.m_vision_barrier {}

/* 壁を突破する方法 */
.m_vision_overcome {}

/* ご支援内容 */
.m_vision_service {}

.m_vision_service__case {
    padding-left: 10px;
}

.m_vision_service__case+.m_vision_service__case {
    margin-top: 72px;
}

.m_vision_service__heading {
    text-align: left;
    margin-bottom: 24px;
    position: relative;
}

.m_vision_service__heading::before {
    display: inline-block;
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    vertical-align: top;
    border-radius: 15px;
    background-color: #f9c600;
    margin-right: -20px;
    margin-left: -15px;
    top: 12px;
}

.m_vision_service__ttl {
    font-size: 22px;
    padding-left: 10px;
}

.m_vision__serviceBody {}

.m_vision_service__sectionInner {}

.m_vision_service__sectionWrap {
    position: relative;
    text-align: left;
    padding-left: 10px;
}

.m_vision_service__sectionWrap::before {
    content: "";
    background-image: linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px),
        linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px),
        linear-gradient(to bottom, #000, #000 3px, transparent 3px, transparent 8px),
        linear-gradient(to bottom, #000, #000 3px, transparent 3px, transparent 8px);
    background-size: 0px 0px, 0px 0px, 3px 8px, 0px 0px;
    background-position: left top, left bottom, left top, right top;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    position: absolute;
    top: 5px;
    bottom: 0;
    left: 6px;
    right: 0;
    pointer-events: none;
    height: calc(100% + 64px);
}

.m_vision_service__sectionWrap--noborder {}

.m_vision_service__sectionWrap--noborder::before {
    background-image: none;
    /* background-size: unset; */
    /* background-position: unset; */
    /* background-repeat: unset; */
}




.m_vision_service__sectionWrap+.m_vision_service__sectionWrap {
    margin-top: 64px;
}

.m_vision_service__section {
    padding: 0px 35px;
}

.m_vision_service__inner {}

.m_vision_service__middleHeading {
    margin-bottom: 20px;
}

.m_vision_service__middleHeading::before {
    display: inline-block;
    position: absolute;
    content: "";
    width: 25px;
    height: 25px;
    vertical-align: top;
    border-radius: 25px;
    background-color: #f9c600;
    margin-right: -20px;
    margin-left: -50px;
}

.m_vision_service__middleTtl {
    font-size: 20px;
    font-weight: bold;
}

.m_vision_service__tagWrap {
    display: flex;
    margin-bottom: 24px;
}

.m_vision_service__tag {
    display: inline-block;
    position: relative;
    padding: 5px 20px 5px 10px;
    background-color: #fff0be;
    font-size: 16px;
    font-weight: 700;
}


.m_vision_service__tag::after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
    top: 0;
    right: 0;
    border-width: 18px 15px 18px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
}

.m_vision_service__tag+.m_vision_service__tag {
    margin-left: 20px;
}

.m_vision_service__txt {}

.m_vision_service__msg {
    margin-bottom: 12px;
    font-weight: 500;
}

.m_vision_service__hashTag {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.m_vision_service__hashTagItem {
    color: #c9c9c9;
}

.m_vision_service__hashTagItem+.m_vision_service__hashTagItem {
    margin-left: 20px;
}

.m_vision_service__hashTagItem--active {
    color: #000;
    font-weight: bold;
}

/* お客さまの声 */
.m_vision_voice {}

.m_vision_voice__caseWrap {
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: unset;
}

.m_vision_voice__caseWrap+.m_vision_voice__caseWrap {
    margin-top: 48px;
}

.m_vision_voice__caseWrap+.m_vision_voice__caseWrap::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #c7c7c7;
    top: -25px;
    text-align: center;
}

.m_vision_voice__case {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    float: left;
}

.m_vision_voice__caseTag {
    display: flex;
    margin-bottom: 20px;
}

.m_vision_voice__caseTagItem {
    font-size: 16px;
    font-weight: bold;
    background-color: #ededed;
    padding: 5px 10px;
}

.m_vision_voice__caseTagItem+.m_vision_voice__caseTagItem {
    margin-left: 20px;
}

.m_vision_voice__img {
    margin-bottom: 20px;
}

.m_vision_voice__img>img {}

.m_vision_voice__profile {
    display: flex;
    flex-direction: column;
    letter-spacing: 1.2px;
    align-items: center;
}

.m_vision_voice__industry {}

.m_vision_voice__employees {}

.m_vision_voice__msgWrap {
    padding-left: 25px;
}

.m_vision_voice__msg {
    font-size: 16px;
    font-weight: 500;
}

.m_vision_voice__msg::after {
    content: "\A\A";
    white-space: pre;
}




/* 共通要素 */

.m_vision_wrap {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.m_vision_inner {}

.m_vision__heading {
    margin-bottom: 48px;
}

.m_vision__ttl {
    position: relative;
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    text-indent: -20px;
    padding-left: 20px;

}

.m_vision__ttl::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 100%;
    background-color: #f9c600;
}

.m_vision__ttl>span {
    margin-left: 20px;
}

.m_vision__body {}

.m_vision__inner {
    text-align: left;
}

.m_vision__section {}

.m_vision__section+.m_vision__section {
    margin-top: 64px;
}

.m_vision__sectionTtlWrap {
    margin-bottom: 28px;
}

.m_vision__icon {
    position: relative;
    display: flex;
}

.m_vision__icon::before {
    position: absolute;
    content: url('/resource/img/penetration-of-philosophy/icon_01.png')
}

.m_vision__sectionTtlInner {
    padding-left: 70px;
}

.m_vision__sectionTtl {
    font-size: 22px;
    font-weight: bold;
}

.m_vision__sectionMsgWrap {
    display: flex;
    justify-content: space-between;
}

.m_vision__sectionMsg {
    font-weight: 500;
}

.m_vision__sectionMsg>span {
    font-size: 16px;
    font-weight: 500;
}

.m_vision__img {
    display: flex;
    justify-content: center;
}

.m_vision__img>img {
    height: 90%;
}

.m_vision_btn {}

.m_vision_btnItem {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
}

.m_vision_btnLink {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #df002d;
    border-radius: 5px;
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.m_vision_btnLink::before {
    content: url('/resource/img/penetration-of-philosophy/icon_contact.png');
    margin-right: 20px;
    top: 5px;
}

.m_vision_btnLink:hover {
    opacity: .6;
}

.m_vision_nav__toggle {
    position: relative;
    display: block;
    background: #fff;
    width: 50px;
    height: 50px;
}

.m_vision_nav__toggleLine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    width: 50%;
    height: 2px;
    margin: auto;
    transition: .3s transform;
    background: #000;
}

.m_vision_nav__toggle--first {
    transform: translateY(-8px);
}

.m_vision_nav__toggle--second {}

.m_vision_nav__toggle--third {
    transform: translateY(8px);
}

/* Utility */
.u_col1 {
    width: 8.333%
}

.u_col2 {
    width: 16.667%
}

.u_col3 {
    width: 24.5%
}

.u_col4 {
    width: 33.333%
}

.u_col5 {
    width: 41.666%
}

.u_col6 {
    width: 50%
}

.u_col7 {
    width: 58.333%
}

.u_col8 {
    width: 66.666%
}

.u_col9 {
    width: 75%
}

.u_col10 {
    width: 83.33%
}

.u_col11 {
    width: 91.666%
}

.u_col12 {
    width: 100%
}

.u_hide {
    display: none
}

.u_fl {
    float: left
}

.u_fr {
    float: right
}

.u_bt {
    border-top: none
}

.u_bb {
    border-bottom: none
}

.u_bl {
    border-left: none
}

.u_br {
    border-right: none
}

.u_hgt10 {
    height: 10px
}

.u_hgt20 {
    height: 20px
}

@media screen and (max-width: 768px) {
    .container {
        float: none;
        width: auto;
        margin-left: auto;
        margin-right: auto
    }

    .wrapper {
        width: 100%
    }

    .u_resMdcol1 {
        width: 8.333%
    }

    .u_resMdcol2 {
        width: 16.667%
    }

    .u_resMdcol3 {
        width: 25%
    }

    .u_resMdcol4 {
        width: 33.333%
    }

    .u_resMdcol5 {
        width: 41.666%
    }

    .u_resMdcol6 {
        width: 50%
    }

    .u_resMdcol7 {
        width: 58.333%
    }

    .u_resMdcol8 {
        width: 66.666%
    }

    .u_resMdcol9 {
        width: 75%
    }

    .u_resMdcol10 {
        width: 83.33%
    }

    .u_resMdcol11 {
        width: 91.666%
    }

    .u_resMdcol12 {
        width: 100%
    }

    .u_resMdfs1 {
        font-size: 11px
    }

    .u_resMdfs2 {
        font-size: 12px
    }

    .u_resMdfs3 {
        font-size: 13px
    }

    .u_resMdfs4 {
        font-size: 14px
    }

    .u_resMdfs5 {
        font-size: 15px
    }

    .u_resMdfs6 {
        font-size: 16px
    }

    .u_resMdfs7 {
        font-size: 17px
    }

    .u_resMdfs8 {
        font-size: 18px
    }

    .u_resMdfs9 {
        font-size: 19px
    }

    .u_resMdfs10 {
        font-size: 20px
    }

    .u_resMdHide {
        display: none
    }

    .u_resMdInline {
        display: inline;
    }

    .u_widthMdHide {
        width: unset;
    }

    body {
        width:100%!important;
    }

    #askOuter {
        width: 95%;
    }

    #commonInquiry{
        width: 100%;
    }

    .m_vision__img>img {
        height: 60%;
    }

    .m_vision_service__case {
        padding-left: 5px;
    }

    .m_vision_service__tag {
        letter-spacing: -1.0px;
    }

    .m_vision_service__tagWrap {
        flex-direction: column;
    }

    .m_vision_service__tag+.m_vision_service__tag {
        margin-left: 0px;
        margin-top: 20px;
    }

    .m_vision_voice__caseWrap {
        flex-direction: column;
    }

    .m_vision_voice__msgWrap {
        padding-left: unset;
    }

    .m_vision_voice__profile {
        margin-bottom: 20px;
    }

    .m_vision__sectionMsgWrap {
        flex-direction: column;
    }

    .m_vision_wrap {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .m_vision_merit__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .m_vision_merit__boxHeading {
        height: unset;
        margin-bottom: 20px;
    }


    .m_vision_service__section {
        padding: 0px 15px;
    }

    .m_vision_nav__item {
        border-left: unset;
    }

    .m_vision_nav__item:hover {
        background-color: #fff;
    }

    .m_vision_nav__list {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
        opacity: 1;
        transform: translate(-100%, 100%);
        transition: .3s all;
        flex-direction: column;
        box-shadow: 0 4px 4px #aaa;
        background-color: #fff;
        border-right: unset;
    }

    .m_vision_nav__list.is_show {
        opacity: 1;
        transform: translate(0, 100%);
    }

    .m_vision_nav__link {
        justify-content: flex-start;
        width: 280px;
        max-width: 100%;
        height: 3.5em;
        padding-left: 16px;
        background-color: #fff;
        color: #000;
    }

    .m_vision_navWrap {
        justify-content: space-between;
        width: 95%;
    }

    .is_fixed>.m_vision_navWrap {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 95%;
        background-color: #fff;
        width: 100%;
        padding: 0px 30px 0px 30px;
        box-shadow: 0 4px 4px #aaa;
    }

    .is_active .m_vision_nav__toggle--first {
        transform: rotate(45deg);
    }

    .is_active .m_vision_nav__toggle--second {
        transform: rotate(45deg);
    }

    .is_active .m_vision_nav__toggle--third {
        transform: rotate(-45deg);
    }

    .m_vision_service__middleHeading::before {
        margin-left: -30px;
    }

    .m_vision_merit__headingTxt {
        font-size: 24px;
    }

    .m_vision_merit__boxHeading {
        font-size: 18px;
    }

    .m_vision__ttl {
        font-size: 24px;
    }

    .m_vision__sectionTtl{
        font-size: 18px;
    }

    .m_vision_service__ttl{
        font-size: 22px;
    }

    .m_vision_service__middleTtl {
        font-size: 18px;
    }

    .m_vision_service__hashTag{
        justify-content: space-between;
    }

    .m_vision_service__hashTagItem+.m_vision_service__hashTagItem{
        margin-left: unset;
    }

    #header {
        margin: auto;
        width: 95%;
    }

    #footer {
       width: 95%;
    }

}

@media screen and (max-width: 599px) {
    .u_widthSmHide {
        width: unset;
    }
}