@charset "UTF-8";

/* =================================================
ベース
================================================= */

:root {
    --red: #F24965;
    --yellow: #F2BE55;
    --green: #26BFA6;
    --blue: #6699FF;
    --bg_primary: #221F33;
    --bg_secondary: #2A2A4D;
    --bg_tertiary: #2A304D;
    --bg_dark: #130F26; 
    --bg_warmgray_primary: #D9D5CE;
    --bg_warmgray_secondary: #EDE9E1;
    --gray95: #F2F2F2;
    --gray90: #E6E6E6;
    --gray70: #B3B3B3;
    --gray50: #808080;
    --gray30: #4D4D4D;
    /* フォントサイズ */
    --fs-xs: 1.2rem;
    --fs-sm: clamp(1.2rem, 1.2vw, 1.4rem);
    --fs-md: clamp(1.4rem, 1.4vw, 1.6rem);
    --fs-lg: clamp(2.4rem, 2.6vw, 3.2rem);
    --fs-xl: clamp(2.4rem, 3.3vw, 4.8rem);
}

html {
    font-size: 62.5%;
}

body {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: var(--fs-md);
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    color: var(--gray95);
    background-color: var(--bg_primary);
    background-image: url(../assets/image/common/star-cloud-pattern.svg);
    background-position: center;
    background-repeat: repeat-y;
    background-size: max(80.0rem, 112vw) auto;
}

section {
    scroll-margin-top: 8rem;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =================================================
ヘルパー・ユーティリティ
================================================= */

/* フォント */
.fredoka {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    letter-spacing: 0.15em;
}

/* マージン */
.mt-8 { margin-top: 0.8rem; }
.ml-8 { margin-left: 0.8rem; }

/* レイアウト */
.layout-outer {
    padding: 0 clamp(1.2rem, 3.5vw, 6.4rem);
}

.layout-inner {
    max-width: 1128px;
    margin: 0 auto;
}

/* =================================================
CTAボタン
================================================= */

.button {
    display: inline-block;
    padding: 1.6rem 3.2rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.1em;
    background-color: var(--red);
    transition: background-color 0.4s ease;
}

.button--sm {
    padding: 0.8rem 1.6rem;
}

.button:hover {
    background-color: #D92B48;
}

/* =================================================
メインビジュアル
================================================= */

.header {
    background-color: var(--bg_dark);
}

.mv {
    width: 100%;
    height: clamp(48rem, 75vw, 112rem);
    background-image: url(../assets/image/main-visual/main-visual.webp);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: var(--bg_dark);
    box-shadow: inset 0 0 2rem 2rem var(--bg_dark);
    border-radius: 12vw;
}

.mv__topic {
    display: flex;
    align-items: center;
    width: 100%;
    height: clamp(320px, 41vw, 560px);
    margin-top: 3.2rem;
    background-image:
        url(../assets/image/common/star-pattern.svg),
        url(../assets/image/common/firework-pattern.svg);
    background-position: center;
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.mv__topic-inner {
    width: clamp(320px, 52vw, 800px);
    margin: 0 auto;
    padding: 0 1rem;
    border-radius: 50%;
    background-color: var(--bg_dark);
    box-shadow: 0 0 1.6rem 1.6rem var(--bg_dark);
}

.mv__copy {
    text-align: center;
    letter-spacing: 0.1em;
    color: var(--yellow);
}

.mv__logo img {
    margin: 1.2rem auto 0;
}

.mv__date {
    margin-top: 1.2rem;
    text-align: center;
    color: var(--yellow);
}

.mv__date span {
    font-size: var(--fs-xl);
}

/* =================================================
ヘッダーバー / ナビゲーション
================================================= */

.header-bar {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 6.0rem;
    padding: 1.2rem 1.6rem;
    background-color: var(--bg_dark);
    z-index: 1000;
}

.header-bar__logo {
    width: 9.6rem;
    height: auto;
}

.nav {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100vh;
    background-color: var(--bg_primary);
}

.nav.is-open {
    display: block;
}

.nav__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 6.0rem;
    padding: 1.2rem 1.6rem;
}

.nav__list {
    margin-top: 6.4rem;
    text-align: center;
}

.nav__item {
    margin-top: 1.6rem;
    letter-spacing: 0.1em;
}

.nav__item a {
    transition: color 0.4s ease;
}

.nav__item a:hover {
    color: var(--blue);
}

.nav__button {
    margin-top: 6.4rem;
    text-align: center;
}

/* Menu Close ボタン */

.nav__menu-button span,
.nav__close-button span {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
    font-family: "Fredoka", sans-serif;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--yellow);
}

.nav__menu-button span::before,
.nav__close-button span::before {
    display: block;
    content: "";
    width: 2.4rem;
    height: 2.4rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.nav__menu-button span::before {
    background-image: url(../assets/image/common/icon_menu.svg);
}

.nav__close-button span::before {
    background-image: url(../assets/image/common/icon_close.svg);
}

@media screen and (min-width: 768px) {
    .nav__menu-button {
        display: none;
    }
    .nav {
        position: relative;
        display: flex;
        gap: 2.4rem;
        width: auto;
        height: auto;
        background-color: transparent;
    }
    .nav__header {
        display: none;
    }
    .nav__list {
        display: flex;
        align-items: center;
        gap: 2.4rem;
        margin-top: 0;
    }
    .nav__item {
        margin-top: 0;
    }
    .nav__button {
        margin-top: 0;
    }
}

/* =================================================
コンセプト セクション
================================================= */

/* 
z-index
写真：200
山：100 / 300
波線：300
*/

.concept {
    margin-top: clamp(-22.0rem, -15.0vw, -10.0rem);
    overflow: hidden;
}

.concept__wrapper {
    text-align: center;
    padding: 6.4rem 0 11.2rem;
    color: var(--gray30);
    background-color: var(--bg_warmgray_primary);
    overflow: hidden;
}

/* 見出し */
.concept__topic {
    position: relative;
    display: inline-block;
    font-size: clamp(1.6rem, 2.2vw, 3.2rem);
    font-weight: 800;
    letter-spacing: 0.15em;
}

.concept__water,
.concept__green {
    font-size: clamp(3.2rem, 4.5vw, 6.4rem);
}

.concept__water {
    color: var(--blue);
}

.concept__green {
    color: var(--green);
}

.concept__subtopic {
    display: block;
    font-size: var(--fs-xs);
    color: var(--blue);
}

/* 本文 */
.concept__description {
    margin-top: 3.2rem;
    padding: 0 clamp(1.2rem, 3.5vw, 6.4rem);
    line-height: 2.0;
}

.concept__description p {
    margin-top: 1.6rem;
}

/* 写真 */
.concept__image {
    position: relative;
    left: 50%;
    transform: translate(-50%);
    margin-top: 6.4rem;
    width: clamp(480px, 80vw, 1128px);
    max-width: none;
    height: auto;
    aspect-ratio: 1128 / 480;
    object-fit: cover;
    border-radius: 50%;
    z-index: 200;
}

/* 装飾 波線 */
.concept::before,
.concept::after {
    content: "";
    display: block;
    position: relative;
    left: 50%;
    width: 100%;
    min-width: 640px;
    height: auto;
    aspect-ratio: 1440 / 200;
    background-image: url(../assets/image/concept-wave.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 300;
}

.concept::before {
    transform: translateX(-50%);
    aspect-ratio: 1440 / 280;
    background-image: url(../assets/image/concept/wave-top.svg);
}

.concept::after {
    transform: translateX(-50%);
    aspect-ratio: 1440 / 248;
    background-image: url(../assets/image/concept/wave-bottom.svg);
}

/* 装飾 山 見出し */
.concept__topic::before,
.concept__topic::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    width: clamp(4.0rem, 7.5vw, 12rem);
    aspect-ratio: 2 / 1;
    background-image: url(../assets/image/concept/mountain-md.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.concept__topic::before {
    left: clamp(-15.0rem, -9.3vw, -5.0rem);
}

.concept__topic::after {
    right: clamp(-15.0rem, -9.3vw, -5.0rem);
}

/* 装飾 山 写真 */
.concept__image-wrapper {
    position: relative;
}

.concept__image-wrapper::before,
.concept__image-wrapper::after {
    content: "";
    display: block;
    position: absolute;
    aspect-ratio: 2 / 1;
    background-image: url(../assets/image/concept/mountain-lg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.concept__image-wrapper::before {
    top: clamp(-12.0rem, -8.0vw, -2.0rem);
    right: 0;
    width: clamp(24.0rem, 40vw, 48.0rem);
    opacity: 0.75;
    z-index: 100;
}

.concept__image-wrapper::after {
    bottom: clamp(-12.0rem, -9.0vw, -6.4rem);
    left: -4%;
    transform: scaleX(-1);
    width: clamp(24.0rem, 50vw, 64.0rem);
    z-index: 300;
}

/* =================================================
コンテンツ セクション
================================================= */

/* z-index
コンセプト波線：300
コンテンツセクション：100
雲・星：-1
*/

.content {
    position: relative;
    margin-top: 6.4rem;
    z-index: 100;
}

/* レイアウト */

.content > .layout-outer {
    padding: 0;
}

.content__list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 6.4rem;
    margin-top: 6.4rem;
}

/* 見出し */
.content__topic {
    text-align: center;
}

/* 小見出し */
.content__subtopic {
    line-height: 1;
    letter-spacing: 0.1em;
}

.content__subtopic span {
    margin: 0 0.8rem 0 0;
    font-size: clamp(2.4rem, 3vw, 4.0rem);
    line-height: 1;
    color: var(--yellow);
}

.content__item:nth-of-type(odd) .content__subtopic {
    padding-left: 2.4rem;
}

.content__item:nth-of-type(even) .content__subtopic {
    padding-right: 2.4rem;
    text-align: right;
}

/* 写真 */
.content__image {
    width: 100%;
    height: auto;
    aspect-ratio: 360 / 180;
    margin-top: clamp(1.2rem, 1.6vw, 2.4rem);
    object-fit: cover;
}

.content__item:nth-of-type(odd) .content__image {
    padding-right: 2.4rem;
    border-radius: 0 33% 33% 0 / 0 50% 50% 0;
}

.content__item:nth-of-type(even) .content__image {
    padding-left: 2.4rem;
    border-radius: 33% 0 0 33% / 50% 0 0 50%
}

/* テキスト */
.content__description {
    margin-top: clamp(1.2rem, 1.6vw, 2.4rem);
    font-size: var(--fs-sm);
}

.content__item:nth-of-type(odd) .content__description {
    padding-left: 2.4rem;
    padding-right: 9.6rem;
}

.content__item:nth-of-type(even) .content__description {
    padding-left: 9.6rem;
    padding-right: 2.4rem;
}

/* 装飾 雲 */
.content::before,
.content::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 640;
    background-image: url(../assets/image/content/star.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

.content::before {
    top: clamp(-72.0rem, -22.0vw, -12.0rem);
}

.content::after {
    bottom: 0;
    bottom: clamp(-56.0rem, -24.0vw, -12.0rem);
    transform: scale(-1 ,-1);
}

/* レスポンシブ タブレット */
@media screen and (min-width: 640px) {
    .content > .layout-outer {
        padding: 0 clamp(1.2rem, 3.5vw, 6.4rem);
    }
    .content__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 4.8rem 4.8rem;
    }
    .content__item:nth-of-type(even) {
        padding-top: 4.8rem;
    }
    .content__item:nth-of-type(odd) .content__subtopic,
    .content__item:nth-of-type(even) .content__subtopic {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        padding: 0;
        text-align: center;
    }
    .content__subtopic span {
        margin: 0.8rem 0 0 0;
    }
    .content__item:nth-of-type(odd) .content__image,
    .content__item:nth-of-type(even) .content__image {
        padding: 0;
        aspect-ratio: 360 / 240;
        border-radius: 33% / 50%;
    }
    .content__item:nth-of-type(odd) .content__description,
    .content__item:nth-of-type(even) .content__description {
        padding: 0 4.0rem;
        padding: 0 20%;
    }
}

/* レスポンシブ PC */
@media screen and (min-width: 1024px) {
    .content__list {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1128px;
        margin: 6.4rem auto 0;
    }
    .content__item:nth-of-type(3n-2) {
        padding-top: 0;
    }
    .content__item:nth-of-type(3n-1) {
        padding-top: 4.8rem;
    }
    .content__item:nth-of-type(3n) {
        padding-top: 9.6rem;
    }
}

/* =================================================
チケット セクション
================================================= */

/* 
z-index
星・雲：200
セクション区切り：300
花火：-1
チケットリスト：400
見出し・ボタン：500
*/

.ticket {
    overflow: hidden;
}

.ticket__wrapper {
    background-color: var(--bg_primary);
}

/* グリッドレイアウト */
.ticket__grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6.4rem 0;
    align-items: center;
}

/* 見出し */
.ticket__topic {
    margin-top: 1.6rem;
    font-size: clamp(6.4rem, 6.7vw, 8.0rem);
    line-height: 1.0;
    text-align: center;
    z-index: 500;
}

.ticket__subtopic {
    font-size: clamp(1.6rem, 2.2vw ,3.2rem);
    letter-spacing: 0.1em;
}

/* ボタン */
.ticket__button {
    text-align: center;
    z-index: 500;
}

/* 本文 */
.ticket__attention {
    text-align: center;
    font-size: var(--fs-lg);
    letter-spacing: 0.1em;
    color: var(--red);
}

.ticket__description {
    padding: 0 3.2rem;
    color: var(--gray70);
}

/* チケット */
.ticket__list {
    position: relative;
    container-type: inline-size;
    z-index: 400;
}

.ticket__item {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.ticket__item:nth-of-type(2) {
    margin-top: 3.2rem;
}

/* チケット 左半券 */
.ticket__type {
    position: relative;
    padding: 1.6rem;
    border-radius: 0.8rem;
    background-color: var(--red);
}

.ticket__subtopic {
    font-weight: 800;
}

.ticket__price {
    margin-top: 1.6rem;
}

.ticket__tax {
    font-size: var(--fs-xs);
}

/* チケット 右半券 */
.ticket-content {
    display: grid;
    row-gap: 0.8rem;
    position: relative;
    flex: 1;
    padding: 1.6rem;
    font-weight: 800;
    border-radius: 0.8rem;
    background-color: var(--gray90);
    color: var(--red);
}

.ticket-content__text {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.8rem;
}

/* チケット 右半券 アイコン */
.ticket-content__text::before {
    content: "";
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    vertical-align: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ticket-content__text--food::before {
    background-image: url(../assets/image/ticket/icon_food.svg);
}

.ticket-content__text--drink::before {
    background-image: url(../assets/image/ticket/icon_drink.svg);
}

.ticket-content__text--present::before {
    background-image: url(../assets/image/ticket/icon_present.svg);
}

/* チケット 右半券 改行 */
.ticket-br {
    display: none;
}

/* チケット 装飾 セクション区切り */
.ticket::before,
.ticket::after {
    content: "";
    display: block;
    position: relative;
    left: 50%;
    width: 100%;
    min-width: 640px;
    height: auto;
    aspect-ratio: 1440 / 320;
    background-image: url(../assets/image/ticket/border.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 300;
}

.ticket::before {
    transform: translateX(-50%);
    margin-top: 12.8rem;
}

.ticket::after {
    transform: translateX(-50%) scale(-1, -1);
}

/* チケット 装飾 花火 */
.ticket__list::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: max(44.0rem, 80%);
    aspect-ratio: 1 / 1;
    background-image: url(../assets/image/common/firework-pattern.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

/* チケット 装飾 点線 */
.ticket-content::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: -2px;
    width: 0;
    height: 100%;
    border-left: 4px dotted var(--bg_primary);
}

/* チケット 装飾 切り込み円 */
.dec-ticket-circle {
    position: absolute;
    height: 100%;
}

.dec-ticket-circle--inner {
    position: relative;
}

.dec-ticket-circle::before,
.dec-ticket-circle::after {
    content: "";
    position: absolute;
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--bg_primary);
    z-index: 100;
}

.dec-ticket-circle::before {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

.dec-ticket-circle::after {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
}

.dec-ticket-circle--main {
    display: block;
}

.dec-ticket-circle--sub {
    display: none;
}

/* チケット レスポンシブ レイアウト */
@media screen and (min-width: 768px) {
    .ticket__grid-container {
        grid-template-columns: 1fr 2fr;
        grid-template-areas: 
            "item1 item2"
            "item3 item2"
            "item4 item2";
        gap: 6.4rem 4.0rem;
    }
    .ticket__grid-item1 {
        grid-area: item1;
    }
    .ticket__grid-item2 {
        grid-area: item2;
    }
    .ticket__grid-item3 {
        grid-area: item3;
    }
    .ticket__grid-item4 {
        grid-area: item4;
    }
    .ticket__topic {
        text-align: left;
    }
    .ticket__description {
        padding: 0;
    }
}

/* チケット レスポンシブ デザイン */
@container (min-width: 560px) {
    /* チケット 右半券 */
    .ticket-content {
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
    }
    .ticket-content__text {
        grid-template-columns: 1fr;
        row-gap: 1.6rem;
        justify-items: center;
        margin-top: 0;
        padding: 1.6rem;
        text-align: center;
    }
    .ticket-content__text::before {
        width: 6.0rem;
        height: 6.0rem;
    }
    .ticket-br {
        display: block;
    }
    /* チケット 装飾 点線 */
    .ticket-content::before {
        display: none;
    }
    .ticket-content__item {
        position: relative;
    }
    .ticket-content__item::before {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: -2px;
        width: 0;
        height: 100%;
        border-left: 4px dotted var(--bg_primary);
    }
    /* チケット 装飾 切り込み円 */
    .dec-ticket-circle--main {
        display: none;
    }
    .dec-ticket-circle--sub {
        display: block;
    }
}

/* =================================================
開催概要 よくある質問 ギャラリー
================================================= */

.info-faq {
    margin-top: 6.4rem;
}

/* グリッド レイアウト */
.info-faq__grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "item1"
        "item3"
        "item2";
    row-gap: 6.4rem;
}
.info-faq__grid-item1 {
    grid-area: item1;
}
.info-faq__grid-item2 {
    grid-area: item2;
}
.info-faq__grid-item3 {
    grid-area: item3;
}

/* レスポンシブ レイアウト */
@media screen and (min-width: 768px) {
    .info-faq__grid-container {
        grid-template-columns: 3fr 2fr;
        column-gap: 6.4rem;
        grid-template-areas:
            "item1 item3"
            "item2 item3";
    }
}

/* =================================================
開催概要 セクション
================================================= */

.information__topic,
.faq__topic {
    text-align: center;
    font-size: var(--fs-sm);
    line-height: 1;
    font-weight: 800;
}

.information__topic span,
.faq__topic span {
    display: block;
    margin-bottom: 0.8rem;
    font-size: var(--fs-xl);
    line-height: 1;
    color: var(--blue);
}

.information__list {
    margin-top: 3.2rem;
}

.information__item {
    display: flex;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--gray50);
}

.information__subtopic {
    flex: 1 0 80px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--blue);
}

.information__description {
    flex: 1 1 100%;
}

.information__description span {
    display: block;
    font-size: var(--fs-sm);
    letter-spacing: 0.1em;
    color: var(--gray70);
}

@media screen and (min-width: 768px) {
    .information__topic,
    .faq__topic {
        display: flex;
        gap: 1.6rem;
        align-items: center;
    }
}

/* =================================================
よくある質問 セクション
================================================= */

.faq__list {
    margin-top: 3.2rem;
}

.faq__item {
    margin-top: 1.6rem;
    padding: 2.4rem;
    background-color: var(--bg_tertiary);
    border-radius: 1.6rem;
}

.faq__question,
.faq__answer {
    display: flex;
    gap: 0.8rem
}

.faq__answer {
    margin-top: 1.6rem;
}

.faq__question span {
    color: var(--blue);
}

.faq__answer span {
    color: var(--red);
}

/* =================================================
ギャラリー セクション
================================================= */

.gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, auto);
    gap: 1.6rem;
    width: 100%;
    overflow: hidden;
}

.gallery__image--1 {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}

.gallery__image--2 {
    grid-column: 4 / 7;
    grid-row: 2 / 4;
}

.gallery__image--3 {
    grid-column: 1 / 4;
    grid-row: 3 / 5;
}
.gallery__image--4 {
    grid-column: 4 / 7;
    grid-row: 4 / 6;
}

.gallery__image--5 {
    grid-column: 1 / 4;
    grid-row: 5 / 7;
}

.gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.6rem;
}

/* レスポンシブ レイアウト */
@media screen and (min-width: 768px) {
    .gallery {
        grid-template-columns: 1fr;
        row-gap: 3.2rem;
        padding: 0;
    }
    .gallery__image {
        grid-column: auto;
        grid-row: auto;
    }
    .gallery img {
        border-radius: 1.6rem;
    }
    .gallery__image:nth-of-type(odd) {
        padding-left: 3.2rem;
    }

    .gallery__image:nth-of-type(even) {
        padding-right: 3.2rem;
    }
}

/* =================================================
CTA セクション
================================================= */

.cta {
    margin-top: 6.4rem;
    text-align: center;
}

/* =================================================
お問い合わせ セクション
================================================= */

.contact {
    margin-top: 6.4rem;
}

.contact__wrapper {
    container-type: inline-size;
    max-width: 744px;
    margin: 0 auto;
    padding: 3.2rem 1.6rem;
    text-align: center;
    border-radius: 1.6rem;
    background-color: var(--bg_tertiary);
}

.contact__topic {
    color: var(--green);
}

.contact__list {
    margin-top: 4.8rem;
}

.contact__item {
    line-height: 1;
}

.contact__item:first-of-type {
    padding-bottom: 3.6rem;
    border-bottom: 2px dotted var(--gray70);
}

.contact__subtopic {
    font-weight: 800;
    letter-spacing: 0.1em;
}

.contact__company {
    margin-top: 3.2rem;
    letter-spacing: 0.1em;
}

.contact__telephone {
    margin-top: 1.2rem;
    color: var(--green);
}

.contact__telephone span {
    margin-left: 0.4rem;
    font-size: var(--fs-lg);
}

.contact__time {
    margin-top: 0.8rem;
    font-size: var(--fs-xs);
    color: var(--gray70);
}

.contact__grid-container {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 3.6rem;
}

@container (min-width: 560px) {
    .contact__grid-container {
        grid-template-columns: 1fr 1fr;
    }
    .contact__item:first-of-type {
        padding-bottom: 0;
        border-bottom: none;
        border-right: 2px dotted var(--gray70);
    }
}

/* =================================================
フッター セクション
================================================= */

.footer {
    margin-top: 6.4rem;
    padding: 3.2rem 0;
    text-align: center;
}