@charset "UTF-8";

/* ////////////// 基本 ////////////// */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
}

:root {
    --white: #ffffff;
    --bg-navy: #4b6a91;
    --kma-blue: #a6d3e7;
    --water-blue: #5AC0D2;
    --water-lightblue: #82C4DF;
    --water-green: #8FD2CE;
    --zarazara-blue: #C2E1F0;
    --zarazara-green: #C0E9E1;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--kma-blue);
}

ul {
    list-style: none;
}

h2,
h3,
h4 {
    font-family: 'Zen Maru Gothic', sans-serif;
}


/* ////////////// メディアクエリ ////////////// */

@media (max-width: 1024px) {
    .pc {
        display: none;
    }
}

.sp {
    display: none;
}

@media (max-width: 1024px) {
    .sp {
        display: block;
    }
}



@media screen and (max-width: 1024px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

}

/* /////////////////////// header //////////////////// */

header.header {
    color: var(--bg-navy);
}

header::before {
    content: "";
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, var(--zarazara-blue), var(--water-lightblue), var(--zarazara-green));
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

@media screen and (max-width: 1024px) {
    header::before {
        display: none;
    }
}



header .sp_base {
    display: flex;
    background: linear-gradient(135deg, var(--zarazara-blue), var(--water-lightblue), var(--zarazara-green));
}

@media screen and (min-width: 1023px) {
    .sp_base {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .sp_base {
        display: block;
        height: 60px;
        width: 100%;
        background-color: var(--white);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .header {
        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }

    .header.nav-up {
        transform: translateY(-100%);
        opacity: 0;
    }

    .header.nav-down {
        transform: translateY(0);
        opacity: 1;
    }

    .left,
    .right {
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

    .hidden {
        opacity: 0;
        transform: translateY(-100px);
        /* 上にスライド */
    }

}

/* タイトルとかマイページ　右側 ---------------------------- */

.right {
    width: calc((100vw - 400px) / 2);
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media screen and (max-width: 1024px) {
    .right {
        display: none;
    }
}


.logo-wrapper {
    position: relative;
    width: 360px;
    height: 360px;
    margin: 0 auto;
    top: 30%;
}

.logo-wrapper .logo-img {
    position: relative;
    width: 80%;
    z-index: 2;
    left: 9%;
    top: 34%;
    display: block;
}

.logo-wrapper .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 98%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

/*  -----うにょうにょ波pc----- */
.rotating-image {
    animation: rotate360 20s linear infinite;
    transform-origin: center center;
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@media screen and (max-width: 1024px) {
    .right h1 {
        width: 110px;
        top: 1%;
        right: 240px;
        background-color: rgba(255, 255, 255, 0.5);
        padding: 5px 10px;
        border-radius: 8px;
    }

    .logo-wrapper {
        height: unset;
    }

    .logo-wrapper .logo-img {
        top: 0;
    }

    .logo-wrapper .bg-img {
        display: none;
    }
}

/* おしらせボックス */
.notice-box {
    position: absolute;
    bottom: 1rem;
    width: 300px;
    height: 100px;
    border: 2px solid var(--water-blue);
    border-radius: 12px;
    padding: 1em;
    box-sizing: border-box;
    background-color: #fff;
    color: var(--bg-navy);
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    z-index: 1000;
}

@media screen and (max-width: 1024px) {
    .notice-box {
        right: 50px;
    }
}


/* ラベル & マスクアイコン */
.notice-label {
    position: absolute;
    top: -0.8em;
    left: 1em;
    background-color: var(--bg-navy);
    color: var(--white);
    font-weight: bold;
    font-size: 13px;
    padding: 0 0.8em 0 1.8em;
    border: 1px solid var(--bg-navy);
    border-radius: 8px;
    line-height: 1.8;
}

.notice-label::before {
    content: "";
    position: absolute;
    left: 0.4em;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: var(--white);
    /* アイコン色 */
    mask: url('../images/icon-notice.png') center/contain no-repeat;
    -webkit-mask: url('../images/icon-notice.png') center/contain no-repeat;
}

.notice-content {
    font-weight: bold;
    line-height: 1.2;
}

.notice-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: #4B6A91;
    cursor: pointer;
    padding: 4px;
}

.notice-close:hover {
    color: #a00;
    /* ホバーで赤く */
}

.hidden {
    display: none !important;
}

/* グローバルナビ 左 ---------------------------- */

.left {
    width: calc((100vw - 400px) / 2);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) {
    .left {
        width: 80%;
        background-color: transparent;
        height: auto;
        height: 60px;
    }
}

/* ---------グローバルナビゲーション-*/


.c-nav {
    position: relative;
    top: 10%;
    left: 28%;
    max-width: 300px;
}


.c-nav__list {
    display: flex;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    margin-top: 2rem;
    padding-left: 2.5rem;
    font-family: 'Zen Maru Gothic', sans-serif;
}

.c-nav__list li {
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
    margin-right: 1rem;
    line-height: 2.25;
    font-weight: bold;
    white-space: nowrap
}


.c-nav__list li a {
    letter-spacing: 0;
    padding: 3px 20px;
    display: block;
    color: var(--white);
    text-decoration: none;
    display: inline-block;
}

.c-nav__list li a span {
    display: inline-block;
    transition: .5s;
}

.c-nav__list li a:hover span {
    transform: rotateX(360deg);
}

.c-nav__list li.active a {
    color: var(--kma-blue);
}

@media screen and (min-width: 1023px) {
    .c-toggle {
        display: none;
    }
}

/* ■ スマホ：ハンバーガー表示＆ナビは隠す */
@media screen and (max-width: 1024px) {
    .c-toggle {
        display: block;
        cursor: pointer;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1100;
        width: 30px;
        height: 25px;
    }

    .c-toggle span {
        display: block;
        height: 3px;
        background: #333;
        margin-bottom: 5px;
        border-radius: 2px;
        transition: 0.3s;
    }

    /* ナビは左から隠れている */
    .c-nav {
        position: fixed;
        top: 0;
        left: -80%;
        width: 75%;
        height: 100vh;
        background-color: var(--water-blue);
        padding-top: 60px;
        box-sizing: border-box;
        transition: left 0.3s ease;
        z-index: 1050;
    }

    /* ナビ開いたとき */
    .c-nav.act {
        left: 0;
    }

    .c-nav__list {
        flex-direction: column;
        padding-left: 1.5rem;
        margin-top: 0;
    }

    .c-nav__list li {
        margin: 1rem 0;
        line-height: 1;
    }
}

/* ボタン共通 */
.btn {
    color: var(--black);
    font-weight: bold;
    text-decoration: none;
    display: block;
    padding: 0.8rem;
    max-width: 280px;
    border-radius: 30px;
    text-align: center;
    font-size: 1rem;
    transition: .3s;
}

@media screen and (max-width: 1024px) {
    .btn {
        font-size: 0.9rem;
    }
}

/* ボタンの上の文字 */
.btn_set {
    text-align: center;
    margin: 1.5rem 0;
    position: fixed;
    z-index: 2;
    /*bottom: 15%;*/
    bottom: 0;
    left: 10%;
    max-width: 270px;
    gap: 1rem;
}

/*@media screen and (max-width: 1024px) {*/
/*    .btn_set{*/
/*        display: none;*/
/*    }*/
/*}*/

.btn_set a:last-child span {
    color: var(--white);
    font-size: 0.8rem;
    margin: 5px;
    display: block;
}


/* 右側ナビ下　説明会・体験講座に参加するボタン */
.btn_entry {
    background-color: var(--kma-blue);
    display: inline-block;
    width: 270px;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    font-family: 'Zen Maru Gothic', sans-serif;
}

.btn_entry::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%);
    /* 【変更部分】inifiniteによりずっと続ける */
    -webkit-animation: shine 2s infinite;
    animation: shine 2s infinite;
}

/* エントリーボタン（白地ネイビー文字） */
.btn_entry.entry {
    background-color: #ffffff;
    color: var(--bg-navy);
    /* ネイビー */
    border: 2px solid var(--bg-navy);
    width: 270px;
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    margin-bottom: 1rem;
}

.btn_entry.entry::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient(130deg, rgba(8, 31, 62, 0) 25%, rgba(8, 31, 62, 0.3) 50%, rgba(8, 31, 62, 0) 75%);
    animation: shine 2s infinite;
}

/* 応募ボタン（ネイビー地白文字） */
.btn_entry.apply {
    background-color: var(--bg-navy);
    /* ネイビー */
    color: #ffffff;
    border: 2px solid var(--bg-navy);
    width: 270px;
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    margin-bottom: 1rem;
}

.btn_entry.apply::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 75%);
    animation: shine 2s infinite;
}

@-webkit-keyframes shine {
    100% {
        left: 100%;
    }
}

@keyframes shine {
    100% {
        left: 100%;
    }
}

@media screen and (max-width: 1024px) {

    .entry-btn-wrapper {
        text-align: center;
        margin-top: 0!important;
    }

    .btn_entry {
        width: 200px;
        font-size: 1.1rem;
    }

    .btn_set {
        display: block;
        position: fixed;
        margin: 0;
        top: 10px;
        bottom: unset;
        left: unset;
        right: 10px;
    }

    .btn_set .apply {
        display: none;
    }

    .btn_entry.entry {
        width: 240px;
        background-color: transparent;
        padding: 0.4rem;
    }

    .header-mymenu-content {
        top: 350%;
        left: -15%;
    }

    .btn_entry.entry::before {
        display: none;
    }
    .header-mymenu-content::before,
    .header-mymenu-content::after {
        display: none;
    }
}

.btn_entry:hover,
.btn_line:hover {
    transform: scale(1.07);
}

/* SP表示の縦ボタン */
@media screen and (max-width: 1024px) {
    .btn_entry_sp {
        position: fixed;
        bottom: 20px;
        right: 0pc;
        width: 40px;
        height: 200px;
        background: linear-gradient(135deg, var(--water-blue), var(--water-lightblue), var(--water-green));
        font-weight: bold;
        font-size: 16px;
        line-height: 1.2;
        writing-mode: vertical-rl;
        text-orientation: upright;
        border-radius: 8px 0 0 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        z-index: 9999;
        user-select: none;
        transition: background-color 0.3s ease;
        opacity: 0;
        pointer-events: none;
        transition: opacity .5s ease, transform .5s ease;
        transform: translateY(40px);
        /* ← ちょい下からスッと上がる演出 */
    }

    .btn_entry_sp a {
        color: var(--bg-navy);
        text-decoration: none;
    }


    /* ===== スクロール後に付くクラス ===== */
    .btn_entry_sp.show {
        opacity: 0.9;
        pointer-events: auto;
        transform: translateY(0);
    }
}


@media screen and (max-width: 1024px) {
    #noticeBox {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(40px);
        transition: opacity .5s ease, transform .5s ease;
    }

    #noticeBox.show {
        opacity: 0.9;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}

/* /////////////////////main///////////////////////*/




main {
    max-width: 400px;
    width: 100%;
    margin: 30px auto;
    z-index: 0;
    overflow: hidden;
    border-radius: 30px;
    border: solid 4px var(--kma-blue);
    letter-spacing: 2px;
}

@media screen and (max-width: 1024px) {
    main {
        margin: 0 auto;
    }
}

main section {
    background-image: url(../images/bg_zarazara_gradation.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 60px 6% 0px;
    text-align: center;
}

section.svg_bg {
    position: relative;
    /* z-index: 0; */
}

main section svg {
    width: 100%;
    position: absolute;
    bottom: -25px;
    right: 0;
    z-index: 20;
}

main section img {
    width: 100%;
    display: block;
}

h2 {
    display: inline-block;
    width: fit-content;
    padding: .2rem 1rem;
    margin: 0 auto 1rem;
    text-align: center;
    background: var(--bg-navy);
    color: var(--white);
    border-radius: 9999px;
    font-weight: 700;
    line-height: 1.2;
    font-size: 1.3rem;
}


/* ///////////////////////mainの中身/////////////////////// */

/* -------------------------------
　　sec00 キービジュアル
------------------------------- */
.kv {
    position: relative;
    width: 100%;
    height: 680px;
    overflow: hidden;
    z-index: 0;
}

.kv__video {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* iframe は親の大きさに合わせてトリミング */
.kv__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vw;
    height: 120vh;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.kv__video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        /* まずほんのり白 */
        linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .kv {
        height: 100vh;
    }

    .kv__video iframe {
        position: absolute;
        top: 40%;
        background-color: var(--white);
        left: 50%;
        width: 410vw;
        height: 140vh;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }
}


.bg-kumo.kumo2 {
    bottom: -28%;
    right: -49%;
    width: 90%;
}

.kv_contents {
    margin-top: 0;
    text-align: center;
    position: relative;
    z-index: 100;
}

.copy-kv01 {
    margin: 30px 0 10px;
}

.copy-kv02 {
    margin: 0 auto;
    width: 90%;
}

.copy-kv03 {
    max-width: 380px;
    width: 100%;
    margin-top: -15px;
}

/* -------------------------------
　　sec01 about
------------------------------- */

.about {
    background-color: var(--white);
    background-image: none;
}

ul.zarazara-list {
    background-image: url(../images/bg_zarazara_blue.png);
    width: 100%;
    background-size: cover;
    padding: 1rem;
    margin: 0 auto;
    border-radius: 20px;
    font-weight: bold;
    color: var(--bg-navy);
}

ul.zarazara-list.green {
    background-image: url(../images/bg_zarazara_green.png);
}

ul.zarazara-list li:first-child {
    font-size: 1.2rem;
    border-bottom: solid 2px var(--bg-navy);
    display: inline-block;
    padding: 3px 10px;
}

ul.zarazara-list li:last-child {
    font-size: 1.8em;
    font-weight: bold;
    line-height: 1.6;
}

ul.zarazara-list li:last-child span.year {
    font-size: 0.6em;
    padding-right: 5px;
}

ul.zarazara-list li:last-child span.dow {
    background-color: var(--white);
    padding: 0px 2px 2px 4px;
    border-radius: 23px;
    font-size: 1rem;
}

ul.zarazara-list li:last-child span.days {
    font-size: 1rem;
}

.messeage {
    padding: 2.4em 0 0.5em;
}

.about .messeage p:first-child {
    color: var(--bg-navy);
    font-size: 1.2rem;
    font-weight: bold;
    border-bottom: var(--kma-blue) 2px solid;
    display: inline-block;
    padding: 0 10px;
    position: relative
}

.about .messeage p:first-child::after {
    content: "";
    background-image: url(../images/about_pen.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
}

.about .messeage p:last-child {
    color: var(--bg-navy);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    line-height: 1.8;
    text-align: left;
}

.about.svg_bg svg {
    bottom: -75px;
}

/* -------------------------------
　　sec02 賞品 prize
------------------------------- */

.prize.svg_bg {
    padding-bottom: 80px;
}

.prize.svg_bg svg {
    bottom: 0;
}

/* -------------------------------
　　sec03 応募方法
------------------------------- */

.howto-entry {
    background-color: var(--white);
    background-image: none;
    padding-bottom: 50px;
    padding-top: 20px !important;
}

.slider {
    position: relative;
    width: 300px;
    overflow: hidden;
    margin: 20px auto;
    border: 1px solid #ccc;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
    width: 200%;
    /* 2枚分 */
}

.slide {
    flex: 0 0 50%;
    /* 2枚なら50%ずつ */
    max-width: 300px;
    /* 親と同じ幅 */
    background-color: #9ad;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.slide img {
    width: 100%;
    height: auto;
}

.howto-entry.svg_bg svg {
    bottom: -77px;
}

/* -------------------------------
　　sec04 審査員
------------------------------- */

.judges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
}

.judge_profile {
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.judge_profile:hover {
    transform: scale(1.02);
}

.judge-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background-color: var(--bg-navy);
    opacity: 0.7;
    border-radius: 50%;
    mask: url('../images/icon-search.png') center/60% no-repeat;
    -webkit-mask: url('../images/icon-search.png') center/60% no-repeat;
    pointer-events: none;
    transition: background-color .3s ease;
}

.judge_profile img {
    width: 100%;
    max-width: 250px;
    object-fit: cover;
    margin-bottom: 1em;
}

.judge_profile .name {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 0.3em;
    color: var(--bg-navy);
}

.judge_profile hr {
    border: var(--bg-navy) 1px solid;
    margin: 0 6%;
}

.judge_profile .title {
    font-size: 0.6em;
    color: var(--bg-navy);
    padding: 10px;
    letter-spacing: 0.6px;
}

.judge_profile[data-judge="takasaki"] img,
.judge_profile[data-judge="ogura"] img {
    background-color: var(--white)
}

.judge_profile[data-judge="iwasaki"] img,
.judge_profile[data-judge="hanada"] img {
    background-image: url(../images/bg_zarazara_blue.png);
    background-size: cover;
}

/* ------モーダル */


.judge-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.judge-modal .modal-content {
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid #82c4df;
    backdrop-filter: blur(1px);
    padding: 2em 1em;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 330px;
    width: 90%;
    position: relative;
}

.judge-modal .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    text-align: center;
    font-size: 0.95em;
    color: var(--bg-navy);
}

.judge-modal .modal-body img {
    max-width: 200px;
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.judge-modal .modal-name {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--water-blue);
}

.judge-modal .modal-title {
    font-size: 0.85em;
    color: var(--water-lightblue);
    margin-bottom: 1em;
}

.judge-modal .modal-profile {
    font-size: 0.9em;
    line-height: 1.6;
    text-align: left;
}

.judge-modal .modal-close {
    position: absolute;
    top: 0.5em;
    right: 0.7em;
    background: none;
    border: none;
    font-size: 1.5em;
    color: #999;
    cursor: pointer;
}


.judge_intro.svg_bg {
    padding: 60px 3% 60px;
}

.judge_intro.svg_bg svg {
    bottom: -20px;
}

/* -------------------------------
　　sec05 応募要項 guidelines
------------------------------- */

.guidelines {
    background-color: var(--white);
    background-image: none;
}

.guidelines01 {
    margin: 2em 0;
}

.guidelines-list {
    max-width: 760px;
    margin: 1em auto;
    padding: 0;
}

.guidelines.svg_bg {
    padding-bottom: 50px;
}

.guidelines.svg_bg svg {
    bottom: -50px;
}

/* --- タイトル行〈dt〉 ---------------------------------------- */
.guidelines-list dt {
    display: inline-block;
    width: fit-content;
    margin: 0.5rem auto 0.2rem;
    padding: .4rem 1.2rem;
    background: var(--bg-navy);
    color: #fff;
    border-radius: 9999px;
    font-weight: 700;
    text-align: center;
}

/* --- 内容行〈dd〉 ------------------------------------------- */
.guidelines-list dd {
    margin: 0 0 1.2rem;
    color: var(--bg-navy);
    line-height: 1.6;
    font-size: 0.9em;
}

.guidelines-list dt:nth-of-type(2)~dd {
    text-align: left;
}

.guidelines-list dd small {
    font-size: 80%;
}

.guidelines-detail section {
    padding: 80px 6% 60px;
}

p.guidelines-detail a {
    color: var(--bg-navy);
    margin: 1.5rem auto;
    font-size: 0.85em;
}

.message-entry {
    max-width: 600px;
    margin: 40px auto;
    text-align: center;
}

.toggle-form {
    border: none;
    cursor: pointer;
}

.entry-form {
    /* display: none; */
    text-align: left;
    background-color: #ffffffb3;
    background-image: none;
    border-radius: 0 0 15px 15px;
}

/* .entry-form label {
	display: block;
	margin-bottom: 20px;
	font-weight: bold;
	color: var(--bg-navy);
} */

/* .entry-form textarea {
	width: 100%;
	height: 100px;
	padding: 10px;
	font-size: 1rem;
	margin: 17px 0;
	border: 1px solid #ccc;
	border-radius: 8px;
	resize: vertical;
} */

.submit-btn {
    background-color: #82c4df;
    color: white;
    border: none;
    padding: 10px 30px;
    font-size: 1rem;
    border-radius: 30px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

.submit-btn:hover {
    background-color: #6ab6d8;
}

/* -------------------------------
　　応募画面 entry
------------------------------- */
.entry_body {
    padding-left: 2%;
    padding-right: 2%;
}

/* ----------------show.phpの中身 */

article.show {
    padding: 1em 0;
    color: var(--bg-navy);
}

.entry-btn-wrapper {
    font-size: 0.9em;
    letter-spacing: 1px;
}

.entry-btn-wrapper {
    text-align: center;
    margin-top: 1rem;
}

.entry-btn {
    border: solid 2px var(--bg-navy);
    color: var(--bg-navy);
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-block;
    width: 80%;
    margin-top: 1rem;
    text-decoration: none;
}

.entry-btn:hover {
    background: var(--zarazara-blue);
    color: var(--bg-navy);
}


/* ----------------show.phpの中のform.phpの中身 */
/* 基本はmain.cssに記載しています。上書きするもののみ以下に記入 */
.theme-entry {
    padding: 0;
}


.cv-btn {
    background: linear-gradient(135deg, var(--water-blue), var(--bg-navy));
    color: #fff;
    padding: 0.8em 2em;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.2);
}

/* キラッとするアニメーション */
.cv-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.1) 100%);
    transform: skewX(-20deg);
    animation: shine 3s infinite;
}

/* ホバー時のふわっと効果 */
.cv-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* 光の移動アニメーション */
@keyframes shine {
    0% {
        left: -75%;
    }

    100% {
        left: 125%;
    }
}

.cv-btn:hover {
    background: linear-gradient(135deg, var(--water-blue), var(--bg-navy)) !important;
    color: var(--white) !important;
}

/* ----------------show.phpの中のedit_form.phpの中身 */
.theme-review {
    background-color: #ffffffb3;
    background-image: none;
    color: var(--bg-navy);
    border-radius: 0 0 15px 15px;
}


/* 重ねて表示するスクロールヒント */
.scroll-hint-overlay {
    display: block;
    position: absolute;
    top: 3em;
    left: 1em;
    right: 0;
    padding: 40px 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7);
    color: #444;
    text-align: center;
    font-size: 14px;
    pointer-events: auto;
    z-index: 10;
    transition: opacity 0.3s ease;
}


.scroll-hint-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ───────── 横スクロール領域 ───────── */
.table-wrapper {
    position: relative;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}


.entry_body.svg_bg {
    padding-bottom: 50px;
}

.entry_body.svg_bg svg {
    bottom: -20px;
}

/* -------------------------------
　　sec06 よくある質問 faq
------------------------------- */

.faq {
    background-image: none;
    background-color: var(--white);
}



.qa-accordion {
    border-radius: 6px;
    margin: 20px auto;
    padding: 0;
}

.qa-accordion a {
    color: var(--bg-navy);
}

.accordion-label {
    display: block;
    width: 100%;
    text-align: left;
    font-weight: bold;
    font-size: 1rem;
    padding: 12px 20px;
    background: var(--zarazara-blue);
    color: var(--bg-navy);
    border: none;
    cursor: pointer;
    border-radius: 6px;
    user-select: none;
    transition: background-color 0.3s ease;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

.accordion-label:hover,
.accordion-label:focus {
    background-color: var(--kma-blue);
    outline: none;
}

.accordion-label[aria-expanded="true"]::after {
    content: "▲";
    float: right;
    font-size: 1rem;
}

.accordion-label[aria-expanded="false"]::after {
    content: "▼";
    float: right;
    font-size: 1rem;
}

.accordion-content {
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    transition: transform .4s ease, opacity .4s ease;
    padding: 16px 0px;
    border-radius: 0 0 6px 6px;
    text-align: left;
    font-size: .93rem;
}

.accordion-content.open {
    transform: scaleY(1);
    opacity: 1;
}

.qa-list {
    line-height: 1.8;
}

.qa-list dt {
    font-weight: bold;
    margin: 16px auto 10px;
    color: var(--bg-navy)
}


.qa-list dd {
    margin-top: 6px;
    color: var(--bg-navy);
    padding-left: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.qa-list dt::before {
    content: "Ｑ";
    color: var(--white);
    background-color: var(--water-blue);
    border-radius: 100px;
    font-weight: bold;
    margin-right: 0.3rem;
    padding: 0px 5px 3.5px;
}

.qa-list dd::before {
    content: "Ａ";
    color: var(--bg-navy);
    background-color: var(--kma-blue);
    border-radius: 100px;
    font-weight: bold;
    margin-right: 0.3rem;
    padding: 0px 5px 3.5px;
}

.faq.svg_bg {
    padding-bottom: 50px;
}

.faq.svg_bg svg {
    bottom: -80px;
}

/* -------------------------------
　　sec07 お問い合せ
------------------------------- */
.info {
    color: var(--bg-navy);
    letter-spacing: 0;
}

.info ul {
    text-align: center;
    font-size: 13px;
    margin-bottom: 2em;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 2em 1em;
    line-height: 1.8;
    border-radius: 15px;
}

.info ul li:first-child,
.info ul li:nth-child(2) {
    font-size: 18px;
}

.info ul li a {
    color: var(--bg-navy);
    text-decoration: none;
}

.info ul li a:hover {
    color: var(--water-lightblue);
}

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: var(--bg-navy);
    margin-right: 0.4em;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    transition: background-color 0.3s ease;
}

.icon.tel {
    mask: url('../images/icon-tel.png') center/contain no-repeat;
    -webkit-mask: url('../images/icon-tel.png') center/contain no-repeat;
}

.icon.mail {
    mask: url('../images/icon-mail.png') center/contain no-repeat;
    -webkit-mask: url('../images/icon-mail.png') center/contain no-repeat;
}

.info.svg_bg {
    padding-bottom: 50px;
}

.info.svg_bg svg {
    bottom: -5px
}

/* -------------------------------
　　sec08 SNSリンク
------------------------------- */

section.sns {
    background-color: var(--white);
    background-image: none;
}

section.sns {
    padding-bottom: 40px;
}

.sns-box {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    width: 80%;
    margin: 0 auto;
}

.sns-box img {
    width: 100%;
}

.sns-icon {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: var(--bg-navy);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transition: background-color 0.3s ease;
}

.sns-icon:hover {
    background-color: var(--water-lightblue);
}

/* 各SNSアイコンごとにマスク画像指定 */
.sns-icon.instagram {
    mask-image: url('../images/sns-instagram.png');
    -webkit-mask-image: url('../images/sns-instagram.png');
}

.sns-icon.x {
    mask-image: url('../images/sns-x.png');
    -webkit-mask-image: url('../images/sns-x.png');
}

.sns-icon.youtube {
    mask-image: url('../images/sns-youtube.png');
    -webkit-mask-image: url('../images/sns-youtube.png');
}


/* ///////////////////////fotter/////////////////////// */
footer {
    background-color: transparent;
    color: var(--white);
    text-align: center;
    padding: 10px;
    z-index: 500;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    footer {
        background: linear-gradient(135deg, var(--zarazara-blue), var(--water-lightblue), var(--zarazara-green));
    }
}

.footer-logo {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-around;
    margin: 2rem;
}

footer a {
    color: var(--bg-navy);
}

footer a img {
    max-height: 55px;
    height: auto;
    width: auto;
    border-radius: 10px;
}

footer a img:hover {
    opacity: 0.8;
}

footer small {
    margin: 1em auto;
    color: var(--bg-navy);
    display: block;
}




/* ///////////////////////動きのためのCSS/////////////////////// */
/* ふわふわ動く CSSのみ------------ */
.fluffy {
    color: var(--white);
    font-size: 3rem;


    animation: 4s 0s fluffy ease-in-out infinite;
}

@keyframes fluffy {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(20px);
    }
}



/* fadein jsあり------------ */
/* --スクロール時にふわっとの動き-------------- */

.fadein {
    opacity: 0;
    transform: translate(0, 0);
    transition: all 1.5s;
    z-index: auto;
}

.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
    z-index: auto;
    /* .fadeinとセットで使用するものなので消さない */
}

.fadein-left {
    transform: translate(-30px, 0);
}

.fadein-right {
    transform: translate(30px, 0);
}

.fadein-up {
    transform: translate(0, -30px);
}

.fadein-bottom {
    transform: translate(0, 30px);
}

/*時差.fadein-bottom_b {
  transform: translate(0, 30px);
  transition: all 4s;
}

.fadein-bottom_c {
  transform: translate(0, 60px);
} */




/* .bgLRextend jsあり ------------ */
/*背景色が伸びて出現------------------------ */
.bgextend {
    animation-name: bgextendAnimeBase;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    position: relative;
    overflow: hidden;
    /*　はみ出た色要素を隠す　*/
    opacity: 0;
}

@keyframes bgextendAnimeBase {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*中の要素*/
.bgappear {
    animation-name: bgextendAnimeSecond;
    animation-duration: 1s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes bgextendAnimeSecond {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*左から右*/
.bgLRextend::before {
    animation-name: bgLRextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    background-color: var(--kma-blue);
    /*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime {
    0% {
        transform-origin: left;
        transform: scaleX(0);
    }

    50% {
        transform-origin: left;
        transform: scaleX(1);
    }

    50.001% {
        transform-origin: right;
    }

    100% {
        transform-origin: right;
        transform: scaleX(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger {
    opacity: 0;
}

/* ーーーーーーーーー */



.circle11 {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 50px;
    opacity: 0.2;
    border-radius: 100%;
    box-sizing: border-box;
    border: 10px dotted var(--lightgray);
    animation: 20s linear infinite rotation;
    transform-origin: right center;
    animation: 20s linear infinite alternate rotation;
    position: absolute;
    top: 30%;
    left: 0%;
    z-index: auto;
}

@keyframes rotation {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 1024px) {
    .circle11 {
        display: none;
    }
}


/* 動くボタン */
/* 左右に揺れるボタン */
.yureru-s {
    animation: yureru-s 2s infinite;
}

@keyframes yureru-s {
    0% {
        transform: translate(2px, 0px);
    }

    5% {
        transform: translate(-2px, 0px);
    }

    10% {
        transform: translate(2px, 0px);
    }

    15% {
        transform: translate(-2px, 0px);
    }

    20% {
        transform: translate(2px, 0px);
    }

    25% {
        transform: translate(-2px, 0px);
    }

    30% {
        transform: translate(0px, 0px);
    }
}


/* ------------うよーん */


.btn_entry03 {
    transform: translate(0%, 0%);
    width: 100%;
    margin: 0;
    background-color: var(--bg-navy);
    padding: 1rem 0;
}

.btn_entry03 .btn {
    color: var(--white);
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 3px;
    width: 280px;
    height: 43px;
    background: var(--bg-navy);
    margin: auto;
    cursor: pointer;
    border-radius: 100px;
    position: relative;
}

.btn_entry03 .btn:before,
.btn_entry03 .btn:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border: inherit;
    top: 0;
    left: 0;
    z-index: -10;
    background: var(--white);
    border-radius: inherit;
    animation: uyon 2s linear infinite;
}

.btn_entry03 .btn:after {
    animation: uyon 2s linear infinite 1s;
}

.animation {
    animation: 0.2s ease-in-out;
}

@keyframes uyon {
    0% {
        opacity: 1;
        transform: scaleY(1) scaleX(1);
    }

    20% {
        opacity: 0.8;
    }

    70% {
        opacity: 0.2;
        transform: scaleY(1.6) scaleX(1.2);
    }

    80% {
        opacity: 0;
        transform: scaleY(1.6) scaleX(1.2);
    }

    90% {
        opacity: 0;
        transform: scaleY(1) scaleX(1);
    }
}

/* -----うにょうにょ波sp----- */

.svg_sp {
    display: none;
}

@media screen and (max-width: 1024px) {
    .svg_sp {
        display: block;
        transform: scale(1, -1);
        position: relative;
        top: 45px;
        z-index: -1;
    }
}


/* -------------------------------
　　応募規約 ページ
------------------------------- */
main.guidelines-detail{
    border:none;
    margin:0 auto;
}


main.guidelines-detail h2 {
    font-size: 1.1em;
    padding: 0.3rem 1rem;
}

main.guidelines-detail dl {
    text-align: left;
    font-size: 0.85em;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--bg-navy)
}

main.guidelines-detail dl dt {
    font-weight: bold;
    font-size: 1.1em;
    border-bottom: solid 1px var(--bg-navy);
    display: inline-block;
}

main.guidelines-detail dl dd {
    margin-bottom: 1.4em;
}

/* -------------------------------
　　アンケート回答 ページ
------------------------------- */

.survey-box .btn {
    color: var(--white);
}