@charset "UTF-8";

#philosophy {
    padding-bottom:10vw;
}
.philosophy-header {
    position:relative;
}

#philosophy h5 {
    font-size:22px;
    font-weight: bold;
    color:#7D7D7D;
    letter-spacing: 0.1em;
}
#philosophy h5 + p {
    color:#7D7D7D;
}

#philosophy dl > div {
    margin-top:74px;
    border-left: solid 3px #004DA8;
    padding-left:40px;
    color:#595757;
}
#philosophy dl > div dt {
    font-size:26px;
    font-weight:bold;
    color:#004DA8;
    margin-bottom:20px;
    line-height: 1;
}

.container-wrapper section {
    position:relative;
}
.container-wrapper#concept {
    background:#F0F0F0;
}
.container-wrapper#greeting {
    background:#004DA8 url(/assets/about/images/greeting-bg.webp) center / cover no-repeat;
}
.container-wrapper#logo {
    background:url(/assets/about/images/logo-concept-bg-pc.svg) center / cover no-repeat;
}
.container-wrapper#history {
    background:#004DA8 url(/assets/about/images/history-bg-pc.webp) center / cover no-repeat;
}
:is(#greeting, #logo, #info, #history) .l-container {
    padding-top:95px;
}


#concept {
    padding-top:25vw;
    position:relative;
}
#concept::before {
    content:'';
    position:absolute;
    height:110vw;
    aspect-ratio: 5000 / 3152;
    background:url(/assets/about/images/mv.webp) center / contain no-repeat;
    top:-40vw;
    left:0;
}
#concept .lead h5 {
    font-size:20px;
    font-weight:bold;
}
#concept .concept-txt {
    padding-top:130px;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:80px;
}
#concept .concept-txt p strong {
    font-size:1.2em;
    color:#004DA8;
}
#concept .concept-txt article:first-of-type {
    border-right:solid 1px #595757;
    padding-right:80px;
}

#greeting {
    color:#fff;
    padding-bottom:158px;
}
#greeting .inner-container {
    padding-bottom:0;
}
#greeting .heading-line:has(> span) {
    color:#fff;
}
#greeting .heading-line span {
    color:#fff;
    border-bottom:solid 10px #fff;
}
#greeting .lead h4 {
    color:#fff;
    padding-bottom:66px;
    letter-spacing: 0.4em;
}
#greeting .greeting-txt {
    position: relative;
    padding-right:40%;
}
#greeting .greeting-txt div {
    padding-top:66px;
    font-size:1.1em;
    letter-spacing: 0.2em;
}
#greeting .greeting-txt div strong {
    font-size:2em;
    display:block;
    font-weight:normal;
    letter-spacing: 0.2em;
}
#greeting .greeting-txt figure {
    position:absolute;
    bottom:-158px;
    left:60%;
    width:40%;
    margin:0;
}
#greeting .greeting-txt figure img {
    max-height:720px;
    width:auto;
}

#logo {
    padding-bottom:200px;
}
#logo h5 {
    font-size:28px;
    font-weight:bold;
    margin-top:66px;
    letter-spacing: 0.2em;
    display:flex;
    align-items: center;
    gap:20px;
}
#logo h5::before ,
#logo h5::after {
    content:'';
    height:80px;
    width:20px;
    background:url(/assets/about/images/logo-concept-brackets.svg) center / contain no-repeat;
}
#logo h5::after {
    rotate: 180deg;
}
#logo .logo-txt > div {
    position:relative;
    width:45%;
}
#logo .logo {
    position:absolute;
    bottom:-120px;
    left:45%;
    width:60%;
    margin:0;
}


#info {
    padding-bottom:110px;
}
#info .info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:80px;
}
#info dl {
    color:#595757;
    padding:40px 0;
    border-top:solid 1px #595757;
    border-bottom:solid 1px #595757;
}
#info dl > div {
    display:flex;
    align-items: flex-start;
    justify-content: space-between;
    gap:10px 40px;
}
#info dl > div + div {
    padding-top:30px;
}
#info dl > div dt {
    width:9em;
    text-align-last: justify;
    color:#004DA8;
    font-weight: bold;
}
#info dl > div dd {
    flex:1;
}
#info dl > div dd ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:10px;
}
#info dl > div dd ul li + li {
    padding-top:30px;
}
#info dl > div dd ul li div:first-of-type {
    flex:1;
}
#info dl .btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap:10px;
    padding:2px;
    min-width:135px;
    color:#fff;
    font-size:1.4rem;
    background:var(--color);
}
#info dl .btn a img {
    width:12px;
}


#history .heading-line:has(> span) {
    color:#fff;
    text-align:center;
}
#history .heading-line span {
    color:#fff;
    margin-inline:auto;
    border-bottom:solid 10px #fff;
}
#history .lead h4 {
    color:#fff;
    text-align:center;
    padding-bottom:66px;
    letter-spacing: 0.4em;
}
#history .history-txt {
    color:#fff;
    text-align: center;
}
#history #tab-area {
    background:#fff;
    margin-top:154px;
}
#history #tab-area .tab-menu {
    gap:40px;
    justify-content: center;
    padding:6vw;
}
#history #tab-area .tab-menu li {
    margin:0;
    max-width:245px;
    flex:1;
}
#history #tab-area .tab-menu li a {
    border:none;
    border-radius: 0;
    padding:10px;
    font-size:1.4em;
    margin:0;
    text-align:center;
    background:#F0F0F0;
    color:var(--color);
    bottom:0;
}
#history #tab-area .tab-menu li a[aria-selected=true] {
    background:var(--color);
    color:#fff;
}

#history #tab-area .tab-contents {
    border:none;
    padding-bottom:0;
}


@media screen and (max-width: 1198.98px) {
    #logo {
        padding-bottom:80vw;
    }
    #logo .logo-txt > div {
        width:100%;
        z-index:2;
    }
    #logo .logo {
        position:absolute;
        bottom:-70vw;
        left:50%;
        width:120vw;
        max-width: 800px;
        translate: -50% 0;
    }


    #info {
        padding-bottom:0;
    }
    #info dl {
        padding:0;
        border:none;
    }
    #info dl + dl {
        padding-top:30px;
    }
    #info dl > div {
        display:flex;
        flex-direction: column;
    }
    #info dl > div dt {
        text-align-last: left;
        font-weight:bold;
    }
    #info dl > div dd {
        width:100%;
    }
    #info dl .btn a {
        min-width: 100px;
        font-size:1.2rem;
    }
}

@media screen and (max-width: 820px) {
    #concept .concept-txt {
        gap:40px;
    }
    #concept .concept-txt article:first-of-type {
        padding-right:40px;
    }

    #history #tab-area {
        margin-top:66px;
        margin-inline:-6vw;
    }
    #history #tab-area .tab-menu {
        gap:10px;
        padding:20px;
    }
    #history #tab-area .tab-menu li a {
        padding:10px 5px;
        font-size:1em;
    }
}
@media screen and (min-width: 600px) {
    .c-keyvisual__scroll-down{
        position: absolute;
    }
}
@media screen and (min-width: 768px) {
    .c-keyvisual__scroll-down{
        bottom: 0;
        right: -4px;
    }
}
@media screen and (min-width: 600px) and (max-width: 767.98px) {
    .c-keyvisual__scroll-down{
        bottom: 5.997vw;
        right: -0.522vw;
        width: 5.085vw;
    }
}

@media screen and (max-width: 599.98px) {
    .c-keyvisual__scroll-down{
        display: none;
    }

    .container-wrapper#logo {
        background:url(/assets/about/images/logo-concept-bg-sp.svg) center / cover no-repeat;
    }
    .container-wrapper#history {
        background:#004DA8 url(/assets/about/images/history-bg-sp.webp) center / cover no-repeat;
    }

    :is(#greeting, #logo, #info, #history) .l-container {
        padding-top:40px;
    }

    #philosophy {
        padding-bottom:200px;
    }
    #philosophy dl > div {
        padding-left:20px;
    }
    #philosophy dl > div dt {
        font-size:22px;
    }

    #concept::before {
        height:160vw;
        top:-90vw;
        left:-30vw;
    }
    #concept .concept-txt {
        padding-top:66px;
        display:block;
    }
    #concept .concept-txt article:first-of-type {
        border-right:none;
        padding-right:0;
        padding-bottom:40px;
    }

    #logo h5 {
        font-size:18px;
        letter-spacing: 0;
        justify-content: space-between;
    }
    #logo h5::before ,
    #logo h5::after {
        height:60px;
        width:15px;
    }

    #greeting {
        padding-bottom:200px;
    }
    #greeting .greeting-txt {
        padding-right:0;
    }
    #greeting .greeting-txt div {
        font-size:1em;
        letter-spacing: 0;
    }
    #greeting .greeting-txt div strong {
        font-size:2em;
        letter-spacing: 0;
    }
    #greeting .greeting-txt figure {
        bottom:-200px;
        left:50%;
        width:60%;
    }
    #greeting .greeting-txt figure img {
        max-height:360px;
    }
    

    #info .info {
        padding:40px 0;
        border-top:solid 1px #595757;
        border-bottom:solid 1px #595757;
        display:block;
    }

}
@container ( width < 500px ){

}