header {
    transition: all 1s ease-in-out;
}

a:hover {
    text-decoration: none;
    opacity: .8;
}

section {
    position: relative;
}

section:not(.key) {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.key {
    width: 100vw;
    height: 100vh;
    overflow: visible;
}

.key::before{
    content: '';
    width: 100vw;
    height: 85.69vw;
    background: url(../img/top/key.webp) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 16vw;
    z-index: -10;
}

.key img{ width: 64.133vw; position: absolute; top: 0; bottom: 0; left: 36vw; margin: auto 0; }

.key .copy {
    position: absolute;
    top: 9.8vw;
    left: 9vw;
    animation: key-copy 3s ease-in-out;
}

.key .copy p,.key .copy span{
    font-size: 6.4vw;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.3;
    color: #312221;
}

.key .copy span{ font-size: 5.6vw; }

h2 {
    margin-bottom: 32px;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 6px #fff, -4px -4px 6px #fff, 4px -4px 6px #fff, -2px 2px 6px #fff;
}

section.news {
    padding-top: 120px;
    margin: 186px auto 280px;
}

section.news ul {
    width: 800px;
    margin: 72px auto 64px;
}

section.news ul li { text-align: left; }

section.news ul li + li { margin: 32px 0; }

section.news ul li a {
    display: flex; gap: 40px;
}

section.news ul li .img {
    width: 100%;
    height: 268px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

section.news ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.news ul li h3 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
}

section.news ul li p {
    font-size: 16px;
}

section.news ul li .comingsoon {
    font-size: 20px;
    text-align: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

section.news ul li .comingsoon::before,
.comingsoon::after {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 0;
    width: 40px;
    height: 1px;
    background: #000;
    margin: auto 0;
}

section.news ul li .comingsoon::before {
    right: -48px;
}

section.news ul li .comingsoon::after {
    left: -48px;
}

section.news ul li:only-child {
    margin: 0 auto;
    min-height: 104px;
}

section.news .en-ttl-l,
section.news .en-ttl-r {
    position: absolute;
    top: 0;
    right: -160px;
    font-size: 144px;
    font-weight: bold;
    writing-mode: vertical-lr;
    color: #fff;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--main-color);
}

section.news .en-ttl-r {
    right: unset;
    top: 0;
    left: -160px;
    color: #f8f8f8;
    filter: blur(2px);
    writing-mode: horizontal-tb;
    -webkit-text-stroke-width: 0;
    z-index: -10;
}

section.about {
    overflow: visible;
}

section.about>div {
    position: relative;
    width: 688px;
    margin: 480px 0 0 auto;
    text-align: left;
    z-index: 10;
}

section.about .en-ttl {
    position: absolute;
    top: -152px;
    left: -448px;
    z-index: 0;
    font-size: 212px;
    font-weight: 600;
    line-height: 1;
    color: var(--main-color);
}

section.about h2 {
    padding-top: 8px;
    position: relative;
    z-index: 10;
    font-size: 48px;
}

section.about p {
    font-size: 20px;
    line-height: 2.4;
}

section.about .en-ttl-r,
section.about .en-ttl-b {
    font-family: 'Arial';
    font-weight: bold;
    line-height: 1;
    color: #f8f8f8;
    position: absolute;
    filter: blur(2px);
    z-index: -10;
}

section.about .en-ttl-r {
    font-size: 244px;
    top: -323px;
    right: -156px;
}

section.about .en-ttl-b {
    font-size: 132px;
    top: -127px;
    left: -360px;
    writing-mode: vertical-rl;
}

section.mvv{ margin: 80px auto 200px; }

section.mvv::before{ content: ''; width: 56vw; height: 85.333vw; margin-left: calc(50% - 50vw); background: url(../img/top/bg01.webp) no-repeat; background-position: right; background-size: cover; position: absolute; bottom: -720px; left: -50%; }

section.mvv h3{ margin-top: 72px; font-size: 80px; font-weight: 600; color: var(--main-color); }

section.mvv h4{ font-size: 18px; margin: 16px auto 32px; }

section.mvv p{ margin-top: 24px; font-size: 20px; font-weight: 600; line-height: 2.2; }

section.mvv a{ margin-top: 104px; }

.works{ padding-top: 80px; position: relative; }

.works h2{ width: fit-content; padding-right: 0px; margin: 40px auto 0; position: relative; z-index: 10; }

.works .en-ttl-r{
    font-size: 186px;
    font-weight: 600;
    color: #fff;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--main-color);
    position: absolute;
    top: 0;
    left: 58%;
    z-index: 0;
}

.top-carousel {
    width: 100vw;
    margin: 128px calc(50% - 50vw) 200px;
}

.top-carousel .slick-list { margin-right: 48px; }

.top-carousel .card { padding: 0 24px; }

.top-carousel .card .img {
    width: 464px;
    height: 280px;
    position: relative;
}

.top-carousel .card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 0;
    border-top-right-radius: 2em;
}

.top-carousel .card h4 {
    font-size: 16px;
    font-weight: 400;
    padding: 12px 12px 12px 20px;
    border-bottom: 2px solid var(--main-color);
    border-left: 2px solid var(--main-color);
    border-bottom-left-radius: 2em;
    width: fit-content;
    margin-right: auto;
    background: #fff;
}

.top-carousel .card:nth-child(odd) { padding-top: 120px; }

.top-carousel .slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    margin-top: 24px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 24px;
    margin: auto 0;
}

.top-carousel .slick-dots li { width: fit-content; }

.top-carousel .slick-dots li button {
    font-size: 0;
    border: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.top-carousel .slick-dots .slick-active button { background: var(--main-color); }

section.thinkact{ margin: 160px auto 320px; }

section.thinkact h2{ margin-bottom: 56px; }

section.thinkact .en-ttl img{ width: 1280px; margin: 0 calc(50% - 50vw) 64px; }

section.thinkact .flex{ display: flex; justify-content: center; gap: 104px; margin-top: 80px; }

section.thinkact .flex > li{ position: relative; 
}

section.thinkact .flex ul li{ display: grid; grid-template-columns: auto 320px; margin-bottom: 16px; text-align: left;}

section.thinkact .think li h4{ width: 144px; }
section.thinkact .act li h4{ width: 132px; }

section.thinkact li h3{ margin-bottom: 24px; font-size: 40px; font-weight: 600; }

section.thinkact .flex > li > p{ margin-bottom: 32px; font-size: 18px; }

section.thinkact .flex ul li p{ font-size: 14px; }

section.thinkact .flex li p.en{ 
    font-size: 160px;
    font-weight: 600;
    color: #ececec;
    filter: blur(2px);
    z-index: -10;
    position: absolute;
}

section.thinkact .flex li.think p.en{
    top: -104px;
    left: -280px;
    writing-mode: sideways-lr;
} 
section.thinkact .flex li.act p.en{
    top: 168px;
    right: -256px;
    writing-mode: vertical-lr;
} 

section.person{ margin-bottom: 264px; }

section.person::before{ content: ''; width: 22vw; height: 64vw; margin-right: calc(50% - 50vw); background: url(../img/top/bg03.webp) no-repeat; background-size: contain; position: absolute; top: -6vw; right: 0; }

section.person .en-ttl { 
    font-size: 144px;
    font-weight: bold;
    color: #dadada;
    position: absolute;
    top: -120px;
    left: -160px;
    z-index: 0;
}

section.person h2{ position: relative; z-index: 10; }

section.person .txt p{ margin-bottom: 40px; }

section.person ul{ display: flex; justify-content: space-between; }

section.person li{ width: 296px; }

section.person li a{ pointer-events: none; }

section.person li p{ margin: 16px auto 4px; font-size: 14px; line-height: 2; }

section.person li .position{ font-size: 16px; }

section.person li h3{ margin-bottom: 16px; font-size: 20px; }

section.report {
    margin: 0 auto 288px;
}

section.report > ul { display: flex; justify-content: center; }

section.report .slick-list .card:only-child{
    margin: 0 auto;
}

section.report .slick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: var(--main-color);
}

section.report .slick-arrow span {
    position: relative;
    display: block;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

section.report .slick-arrow span::before,
section.report .slick-arrow span::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    left: 4px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(-135deg);
}

section.report .slick-prev {
    left: -24px;
}

section.report .slick-next {
    right: -24px;
}

section.report .slick-next span::before,
section.report .slick-next span::after {
    transform: rotate(45deg);
    right: 4px;
    left: 0;
}

section.report .card {
    width: 320px;
    padding: 20px;
    text-align: left;
}

section.report .card a {
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    background: #fff;
}

section.report .card a .ttl {
    padding: 12px 20px 0;
}

section.report .card a .txt {
    padding: 0 20px 18px;
    margin-top: 16px;
}

section.report .card a .txt p {
    font-size: 14px;
    line-height: 1.77;
}

section.report .card h3 {
    font-size: 18px;
    line-height: 1.44;
    margin-bottom: 6px;
}

section.report .card .cat {
    display: flex;
}

section.report .card .cat li {
    width: 100%;
    min-width: 96px;
    padding: 4px 0;
    font-size: 16px;
    line-height: 1;
    background: var(--main-color);
    color: #fff;
    text-align: center;
}

section.report .card .tag {
    display: flex;
    flex-wrap: wrap;
    margin: 12px 0;
}

section.report .card .tag li {
    width: fit-content;
    font-size: 12px;
}

section.report .wp-block-buttons {
    margin-top: 40px;
}

section.report .en-ttl-r {
    color: #dadada;
    font-size: 144px;
    font-weight: bold;
    z-index: -10;
    position: absolute;
    top: -112px;
    right: -120px;
}

section.contact::before{ content: ''; width: 36vw; height: 36vw; margin-left: calc(50vw - 50%); background: url(../img/top/bg02.webp) no-repeat; background-size: contain; position: absolute; top: -36vw; right: 90%; z-index: -10; } 

section.contact h2 {
    position: relative;
}

section.contact .en-ttl {
    font-size: 168px;
    font-weight: bold;
    position: absolute;
    top: -88px;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: var(--main-color);
    z-index: -10;
}

section.contact .wp-block-buttons {
    margin: 40px auto 88px;
}

section.contact h3 {
    margin-top: 120px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
}

section.contact .mail {
    display: inline-block;
    margin: 48px auto 0;
}

section.contact .mail a {
    font-size: 18px;
    line-height: 1;
    text-decoration: underline;
}

section.contact h4 {
    margin-top: 56px;
    font-size: 20px;
    font-weight: 500;
}

section.contact .address ul {
    display: inline-block;
    margin: 16px auto 0;
}

section.contact .address ul li {
    display: flex;
}

section.contact .address ul li p {
    margin-right: 32px;
    font-size: 18px;
}

@media (max-width: 979px) {

    p {
        font-size: 4.267vw;
        line-height: 1.6;
    }

    section:not(.key) {
        width: 92%;
        margin: 0 auto;
    }

    h2,section.about h2 { font-size: 7.467vw; }

    section.key { height: 100vh; }

    .key::before{ width: 120vw; height: 118vh; background: url(../img/top/key_sp.webp) no-repeat; background-size: cover; left: -20vw; }

    .key .copy{ top: 30.933vw; }

    .key .copy p{ font-size: 15vw; }

    .key .copy span{ font-size: 12vw; }

    .key img{ width: 100vw; margin: 0; top: 46vh; left: 14vw; }

    section.news {
        padding-top: 6.4vw;
        margin: 16vw auto 41.6vw;
    }

    section.news .en-ttl-l { display: none; }

    section.news .en-ttl-r {
        color: #f3f3f3;
        left: unset;
        right: -4.8vw;
        top: -4.267vw;
        font-size: 16.933vw;
    }

    section.news ul { width: 100%; margin-top: 0; }

    section.news ul li { flex-direction: column; width: 100%; }

    section.news ul li a{ flex-direction: column; gap: 0; }

    section.news ul li .img { height: 52.267vw; }

    section.news ul li h3 {
        margin: 2.133vw auto 1.067vw;
        font-size: 4.267vw;
    }

    section.news ul li .comingsoon { font-size: 5.333vw; }

    section.about>div {
        width: 100%;
        margin-top: 38.4vw;
    }

    section.about .en-ttl {
        font-size: 19.2vw;
        top: -12.8vw;
        left: 0;
    }

    section.about .en-ttl-r {
        font-size: 19.2vw;
        top: -19.2vw;
        right: 0;
    }

    section.about h2 { text-align: right; }

    section.about p {
        font-size: 4.2vw;
        line-height: 2;
        letter-spacing: 0.04em;
    }

    section.about p br { display: none; }

    section.mvv::before{ width: 56vw; height: 85.333vw; bottom: -83.2vw; left: -30vw; }

    section.mvv h3{ margin-top: 9.6vw; font-size: 12.8vw; }

    section.mvv h4{ margin: 2.133vw auto 4.267vw; font-size: 4.267vw; }

    section.mvv p{ margin-top: 4.267vw; font-size: 4.267vw; }

    section.mvv a{ margin-top: 16vw; }

    .top-carousel { margin: 10.667vw calc(50% - 50vw) 24vw; }

    .works{ padding-top: 23.467vw; }

    .works .en-ttl-r{ font-size: 12.8vw; -webkit-text-stroke-width: 1px; top: 23.467vw; left: 55.467vw; }

    .top-carousel .card {
        width: 90vw;
        padding: 0 2vw 0 8vw;
        text-align: left;
    }

    .top-carousel .card .img { width: 100%; height: 64vw; }

    .top-carousel .card h4 { font-size: 4.267vw; padding: 3.2vw 3.2vw 3.2vw 5.333vw; }

    .top-carousel .card:nth-child(odd) { padding-top: 0; }

    .top-carousel .slick-list { margin-right: 10.667vw; }

    .top-carousel .slick-dots {
        margin-top: 0;
        right: 4.8vw;
    }

    section.thinkact{ margin: 21.333vw auto; }

    section.thinkact .en-ttl img{ margin: 7.467vw auto; }

    section.thinkact h2{ margin-bottom: 8.533vw; }

    section.thinkact .flex,section.person ul,section.report > ul{ flex-direction: column; }

    section.thinkact .flex{ gap: 13.867vw; margin-top: 10.667vw; }

    section.thinkact .flex > li > p{ font-size: 4.267vw; }

    section.thinkact li h3{ margin: 0 auto 4.8vw; font-size: 6.4vw; }

    section.thinkact .flex ul li{ width: 100%; grid-template-columns: 30% 70%; }

    section.thinkact .flex ul li p{ font-size: 2.933vw; }

    section.thinkact .think li h4,section.thinkact .act li h4{ font-size: 3.467vw; }

    section.person{ margin-bottom: 35.2vw; }

    section.report .en-ttl-r{ font-size: 13.867vw; top: -9.6vw; right: -6.4vw; }

    section.report .card{ padding: 0 0 10.667vw; z-index: 10; }

    section.report .card a .ttl{ padding: 4.267vw 5.333vw 0; }

    section.person .en-ttl{ font-size: 13.333vw; top: -9.6vw; left: -1.067vw; }

    section.person li,section.report .card{ width: 100%; }

    section.person ul{ gap: 12.8vw; }

    section.person .txt p{ margin-bottom: 5.333vw; }

    section.report{ margin-bottom: 38.4vw; z-index: 10; }

    section.report .slick-list { margin: 0 auto; }

    section.report .slick-list .card {
        width: 92vw;
        padding: 0 5.333vw 4px;
    }

    section.report .en-ttl-l {
        font-size: 15.2vw;
        top: -10.8vw;
        left: -3.2vw;
        filter: blur(2px);
    }

    section.contact::before{ top: -57vw; right: 76%; }

    section.contact .en-ttl {
        font-size: 17.067vw;
        top: -12vw;
        left: -1.067vw;
        margin: 0 calc(50% - 50vw);
        padding-right: 1.067vw;
    }

    section.contact h4 { font-size: 5.333vw; }

    section.contact .wp-block-buttons { margin: 8.533vw auto 19.2vw;
    }

    section.contact h3 {
        margin-top: 18.133vw;
        font-size: 5.867vw;
    }

    section.contact .mail { margin-top: 4.267vw; }

    section.contact .mail a { font-size: 4.8vw; line-height: 1.3; }

    section.contact .address ul { margin-top: 5.333vw; }

    section.contact .address ul li { flex-direction: column; }

    section.contact .address ul li p {
        margin: 0 0 1.067vw 0;
        font-size: 4.8vw;
    }

    section.contact .address ul span { font-size: 3.467vw; }

    section.contact li:last-child { margin-top: 6.4vw; }

}