@charset "utf-8";

:root {
  --brand-color01: #1C1C1C;
  --brand-color02: #B0B2AF;
  --brand-color03: #EEF0F2;
  --brand-color04: #ECEBE4;

  --letter-spacing_exwide: 0.15em;
  --letter-spacing_wide: 0.1em;
  --letter-spacing_text: 0.02em;

}

.serif {
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

h3 {
    /* 23-32 */
    font-size: clamp(1.438rem, 1.233rem + 1.02vw, 2rem);
    letter-spacing: var(--letter-spacing_wide);
    line-height: 1.6;
    text-align: center;
}


.navigator-info{
    width: 100%;
    position: relative;

    &::before {
        content: "";
        background: var(--brand-color03);
        width: 82%;
        position: absolute;
        right: 0;
        top: 50px;
        height: 105%;
        display: block;
        z-index: -1;
    }

    & > div {
        display: flex;
        max-width: 985px;
        justify-content: space-between;
        align-items: end;
        margin: 0 auto;
    }
    .navigator-img {
        max-width: 370px;
        width: 100%;
        aspect-ratio: 370 / 523;
        object-fit: cover;
    }
    .text-area{
        width: 53%;
        .fm-icon {
            max-width: 108px;
            width: 100%;
            aspect-ratio: 108 / 42;
            object-fit: cover;
            display: block;
            margin-bottom: 30px;
        }
        & > span {
            /* 11-13px */
            font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
        }
        .name {
            display: flex;
            flex-direction: column;
            margin-top: 15px;

            span:first-of-type {
                /* 18-23px */
                font-size: clamp(1.125rem, 1.011rem + 0.57vw, 1.438rem);
                display: inline-block;
                margin-bottom: 10px;
                line-height: 1;
            }
            span:last-of-type {
                font-size: 12px;
                display: inline-block;
                line-height: 1;
                letter-spacing: 0.2em;
            }
        }
        p {
            /* 13-15px */
            font-size: clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);
            letter-spacing: var(--letter-spacing_text);
            line-height: 1.6;
            text-align: justify;

            &:first-of-type {
                margin: 30px 0;
            }
        }
    }
}
@media (max-width: 768px) {
    .navigator-info {
        &::before {
            width: 100%;
            bottom: -10px;
            height: 65%;
            top: auto;
        }
        & > div {
            flex-direction: column;
            gap: 35px;
        }
        .navigator-img {
            width: 80%;
            margin: 0 auto;
        }
        .text-area {
            width: 90%;
            margin: 0 auto;

            .fm-icon {
                margin-bottom: 10px;
            }
            .name {
                flex-direction: row;
                align-items: center;
                gap: 15px;
                margin: 0;

                span:first-of-type {
                    margin-bottom: 0;
                }
            }
            & p {
                &:first-of-type {
                    margin: 20px 0;
                }
            }
        }

    }
}

.award {
    background: var(--brand-color03);
    padding: 120px 0 !important;

    & > p {
        text-align: center;
        /* 13-15px */
        font-size: clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);
        margin-top: 45px;
    }
    .award-works {
        max-width: 1100px;
        width: 100%;
        margin: 80px auto 0;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        li {
            background: #ffffff;
            width: 32%;
            max-width: 353px;
            border-radius: 10px;
            padding: 40px 0 0;
            min-height: 540px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            position: relative;
            
            &:nth-child(1) { order: 2; }
            &:nth-child(2) { order: 1; }
            &:nth-child(3) { order: 3; }

            &:first-of-type:before {
                content: "";
                position: absolute;
                background: url(../images/award/award_grandprix.png) center / cover no-repeat;
                top: -50px;
                left: 50%;
                transform: translate(-50%, 0);
                display: block;
                width: 80px;
                height: auto;
                aspect-ratio: 94/114;
            }
            &:before {
                content: "";
                position: absolute;
                background: url(../images/award/award_zip.png) center / cover no-repeat;
                top: -50px;
                left: 50%;
                transform: translate(-50%, 0);
                display: block;
                width: 80px;
                height: auto;
                aspect-ratio: 94/114;
            }
            .picture {
                width: 100%;
                flex-shrink: 0;

                &:first-of-type {
                    width: 90%;
                    margin: 25px auto 0;
                }

                img {
                    aspect-ratio: 540 / 382;
                    object-fit: cover;
                }
            }
            .title_author {
                margin: 40px auto 0;
                width: 90%;
                display: flex;
                flex-direction: column;
                /* justify-content: center; */
                /* flex-grow: 1; */
                .title {
                    /* 20-23 */
                    font-size: clamp(1.25rem, 1.182rem + 0.34vw, 1.438rem);
                    letter-spacing: var(--letter-spacing_wide);
                    display: flex;
                    flex-direction: column;
                    min-height: 3em;
                }
                .author {
                    font-size: 18px;

                    span:first-of-type {
                        display: inline-block;
                        margin-right: 10px;
                        position: relative;

                        &:before {
                            content: "あわれほ";
                            position: absolute;
                            bottom: -15px;
                            left: 50%;
                            transform: translate(-50%, 0);
                            font-size: 11px;
                            white-space: nowrap;
                            display: inline-block;
                        }
                    }
                    span:nth-of-type(2) {
                        display: inline-block;
                        margin-right: 15px;
                        position: relative;

                        &:before {
                            content: "えんや";
                            position: absolute;
                            bottom: -15px;
                            left: 50%;
                            transform: translate(-50%, 0);
                            font-size: 11px;
                            white-space: nowrap;
                            display: inline-block;
                        }
                    }
                }
            }
            .comment-btn {
                font-size: 15px;
                padding: 15px 20px;
                display: flex;
                justify-content: center; /* 塊を中央寄せ */
                align-items: center;
                gap: 10px; /* テキストとアイコンの間隔 */
                cursor: pointer;
                width: fit-content;
                margin: 40px auto 0;

                .accordion-icon {
                    position: relative;
                    width: 12px;
                    height: 12px;
                    display: inline-block;

                    /* 横棒 */
                    &::before {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 0;
                        width: 100%;
                        height: 1px;
                        background: #333;
                        transform: translateY(-50%);
                    }

                    /* 縦棒 */
                    &::after {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 50%;
                        width: 1px;
                        height: 100%;
                        background: #333;
                        transform: translateX(-50%);
                        transition: all 0.3s ease;
                    }

                    /* 🌟 アイコンに active クラスがついた時の変化 */
                    &.active {
                        &::after {
                            transform: translateX(-50%) rotate(90deg);
                            opacity: 0; /* 縦棒を消してマイナスにする */
                        }
                    }
                }

            }

            &:first-child .comment-btn {
                padding: 5px 20px;
            }

            .comment {
                display: none; /* 初期状態は非表示 */
                max-width: 684px;
                width: 90%;
                text-align: justify;
                margin: 0 auto 30px;
                flex-grow: 1;

                span {
                    display: inline-block;
                    margin-bottom: 20px;
                    /* 15-16px */
                    font-size: clamp(0.938rem, 0.915rem + 0.11vw, 1rem);
                    letter-spacing: var(--letter-spacing_wide);
                }

                p {
                    /* 13-15px */
                    font-size: clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);
                    letter-spacing: var(--letter-spacing_text);
                    line-height: 1.6;

                    &:first-of-type {
                        margin-bottom: 20px;
                    }
                }
            }
        }
    }
    .award-caution {
        max-width: 1100px;
        margin: 0 auto;
        p:first-of-type {
            font-size: 13px;
            letter-spacing: var(--letter-spacing_text);
            text-align: justify;
            margin: 20px 0 30px;
            line-height: 1.6;
        }
        p:last-of-type {
            /* 13-15 */
            font-size: clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);
            letter-spacing: var(--letter-spacing_text);
            text-align: center;
            border-top: solid 1px #ffffff;
            padding-top: 30px;
            line-height: 1.6;
        }
    }
}
@media (max-width: 768px) {
    .award {
        padding: 100px 0 60px !important;

        & > p {
            margin-top: 30px;
        }

        .award-works {
            flex-direction: column;

            li {
                width: 90%;
                margin: 0 auto 80px;
                max-width: 500px;
                min-height: unset;

                &:last-of-type {
                    margin-bottom: 0;
                }

                &:nth-child(1) { order: 1; }
                &:nth-child(2) { order: 2; }
                &:nth-child(3) { order: 3; }

                .title_author {
                    margin: 35px auto 0;

                    .title {
                        min-height: auto;
                    }

                    .author {
                        margin-top: 10px;
                    }
                }

                .comment-btn {
                    margin: 20px auto 0;
                }
            }
        }


        .comment {
            span {
                margin-bottom: 20px;
            }
            p:first-of-type {
                margin-bottom: 25px;
            }
        }

        .award-caution {
            width: 90%;

            p:last-of-type {
                text-align: justify;
            }
        }
    }
}

.jazzlive {
    > p {
        text-align: justify;
        font-size: clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);
        line-height: 1.7;
        letter-spacing: var(--letter-spacing_text);
        max-width: 800px;
        margin: 60px auto 80px;
    }
    .guest-list {
        li {
            display: flex;
            max-width: 1100px;
            margin: 0 auto;
            gap: 9%;

            img {
                max-width: 370px;
                aspect-ratio: 370 / 523;
                object-fit: cover;
                width: 34%;
            }

            .text-area {
                max-width: 530px;
                width: auto;
                margin: 50px 0 0;

                span:nth-of-type(1) {
                    /* 11-13px */
                    font-size: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
                    display: block;
                    margin-bottom: 15px;
                    line-height: 1;
                }
                span:nth-of-type(2) {
                    /* 18-23px */
                    font-size: clamp(1.125rem, 1.011rem + 0.57vw, 1.438rem);
                    display: block;
                    margin-bottom: 30px;
                    line-height: 1.5;
                }
                p {
                    /* 13-15px */
                    font-size: clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);
                    line-height: 1.6;
                    text-align: justify;

                    &:not(:last-of-type) {
                        margin-bottom: 20px;
                    }
                }
            }

            &:last-of-type {
                flex-direction: row-reverse;
                margin: 60px auto;
            }

        }
    }
    .scene-photo {
        width: 100%;

        img {
            aspect-ratio: 683 / 275;
            object-fit: cover;
        }
    }
}
@media (max-width: 768px) {
    .jazzlive {
        width: 100%;
        margin: 60px auto;

        > p {
            margin: 35px auto 45px;
            width: 90%;
        }

        .guest-list {
            width: 90%;
            margin: 0 auto;
            li {
                flex-direction: column;
                align-items: center;

                &:last-of-type {
                    flex-direction: column;
                    margin: 45px auto 80px;
                }

                img {
                    width: 62%;
                }

                .text-area {
                    margin: 35px 0 0;
                    max-width: unset;

                    span:nth-of-type(2) {
                        margin-bottom: 20px;
                    }

                    p:not(:last-of-type) {
                        margin-bottom: 15px;
                    }
                }
            }
        }
    }
}

/* ============================== */
.wrapper {
    h1 {
        letter-spacing: var(--letter-spacing_exwide);
        font-size: clamp(1.563rem, 1.313rem + 1.25vw, 2.25rem);
    }
    .introArea {
        p {
            /* 13-15 */
            font-size: clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);
            line-height: 1.7;
            letter-spacing: var(--letter-spacing_text);
            text-align: justify;

            &:not(:last-of-type) {
                margin-bottom: 25px;
            }
        }
    }
    section:first-of-type {
        margin-bottom: 100px;
    }
}
@media (max-width: 768px) {
    .wrapper {
        .introArea {
            width: 90%;
            margin: 0 auto;
            p {
                text-align: justify;

                &:not(:last-of-type) {
                    margin-bottom: 20px;
                }
            }
        }
        section {
            margin-bottom: 0;
        }
        section:first-of-type {
            margin-bottom: 60px;
        }
    }
}

/* overview */
.wrapper h4 {
  color: var(--brand-color02);
  text-align: center;
}
@media screen and (max-width: 768px) {
  .wrapper .overview {
    width: 90%;
    margin: 80px auto 0;
  }
}
.wrapper .overview .title span {
    /* 13-14px */
    font-size: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
}
@media screen and (max-width: 768px) {
  .wrapper .overview .title {
    margin-bottom: 35px;
  }
}
.wrapper .overview .table_box {
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;

  &::before {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .wrapper .overview .table_box {
    flex-direction: column;
    padding: 0;
    margin-bottom: var(--list_margin);
  }
}
.wrapper .overview .table_box > table {
  width: calc((100% - 50px) / 2);
  margin-right: 50px;
}
.wrapper .overview .table_box>table tr:last-child {
    border-bottom: #ecebe4 solid 1px;   
}
@media screen and (max-width: 768px) {
    .wrapper .overview .table_box>table tr:last-child {
        border-bottom: transparent;   
    }
    .wrapper .overview .table_box>table:last-of-type tr:last-child {
        border-bottom: #ecebe4 solid 1px;   
    }
}
@media screen and (max-width: 768px) {
  .wrapper .overview .table_box > table {
    width: 100%;
    margin-right: 0;
  }
  .wrapper .overview .table_box > table:first-child {
    /* border-bottom: #ecebe4 solid 1px; */
    margin-bottom: var(--list_margin);
  }
}
.wrapper .overview .table_box > table:last-child {
  margin-right: 0;
}
.wrapper .overview .table_box > table p,
.wrapper .overview .table_box > table a {
  font-size: clamp(12px, 1.4vw, 13px);
  margin-bottom: clamp(13px, 1.6vw, 15px);
}
.wrapper .overview .table_box > table p {
    line-height: 1.6;
}
.wrapper .overview .table_box > table p:last-child {
  margin-bottom: 0;
}
.wrapper .overview .table_box > table th {
  width: auto;
  white-space: nowrap;
  padding: var(--list_margin) var(--list_margin) var(--list_margin) 0;
  vertical-align: top;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .wrapper .overview .table_box > table th {
    width: 5em;
  }
}
.wrapper .overview .table_box > table td {
  width: 100%;
  padding: var(--list_margin) 0;
}
.wrapper .overview .table_box > table td .tag {
  display: flex;
  align-items: baseline;
  margin-bottom: clamp(13px, 1.6vw, 15px);
}
.wrapper .overview .table_box > table td .tag span {
  font-size: clamp(10px, 1.4vw, 11px);
  line-height: 1;
  padding: 5px 7px;
  background-color: #EEF0F2;
  border-radius: 3px;
  margin-right: 5px;
}
.wrapper .overview .table_box > table td small {
  display: block;
  font-size: clamp(11px, 1.4vw, 12px);
  line-height: 1.5;
}
.wrapper .overview .table_box > table td a {
  text-decoration: underline;
  transition: color 0.35s;
}
.wrapper .overview .table_box > table td a:hover {
  color: #b0b2af;
}
.wrapper .overview .table_box > table td table {
  width: 100%;
  margin-bottom: clamp(13px, 1.6vw, 15px);
}
.wrapper .overview .table_box > table td table tr {
  border-bottom: transparent;
}
.wrapper .overview .table_box > table td table th,
.wrapper .overview .table_box > table td table td {
  padding: 0;
  padding-bottom: 1px;
}
.wrapper .overview .table_box > table td table th p,
.wrapper .overview .table_box > table td table td p {
  margin-bottom: 0;
}
.wrapper .overview .table_box > table td table th {
  padding-right: 15px;
}
.wrapper .overview .table_box > table tr {
    border-bottom: #ecebe4 solid 1px;
    display: flex;
    width: 100%;
}
.wrapper .overview .table_box > table tr:first-child td,
.wrapper .overview .table_box > table tr:first-child th {
  padding-top: 0;
}
.wrapper .overview .precautions {
  width: 100%;
  max-width: 800px;
  height: auto;
  background-color: #eef0f2;
  margin: 0 auto;
  padding: var(--list_margin) 50px;
  margin-bottom: var(--block_margin);
}
@media screen and (max-width: 768px) {
  .wrapper .overview .precautions {
    padding: 15px 15px;
  }
}
.wrapper .overview .precautions p {
  font-size: clamp(12px, 1.4vw, 13px);
}
.wrapper .overview .precautions a {
  font-size: clamp(12px, 1.4vw, 13px);
  text-decoration: underline;
  transition: color 0.35s;
}
.wrapper .overview .precautions a:hover {
  color: #b0b2af;
}

/* ============================== */
.wrapper {
    h1 {
        letter-spacing: var(--letter-spacing_exwide);
        font-size: clamp(1.563rem, 1.313rem + 1.25vw, 2.25rem);
    }
    .introArea {
        p {
            /* 13-15 */
            font-size: clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);
            line-height: 1.7;
            letter-spacing: var(--letter-spacing_text);

            &:not(:last-of-type) {
                margin-bottom: 25px;
            }
        }
    }
    section:first-of-type {
        margin-bottom: 100px;
    }
    .title2 {
        text-align: left;
        h4 {
            text-align: left;
        }
        span {
            text-align: left;
        }
    }
}
@media (max-width: 768px) {
    .wrapper {
        .introArea {
            width: 90%;
            margin: 0 auto;
            p {
                text-align: justify;

                &:not(:last-of-type) {
                    margin-bottom: 20px;
                }
            }
        }
        section:first-of-type {
            margin-bottom: 60px;
        }
    }
}