@charset "utf-8";

/* -----------------------------------------------
 * sougyousai2026.css
 * LastUpdate : 26/03/10
----------------------------------------------- */

:root {
    /* font-weight */
    --fontweight_regular: 400;
    --fontweight_midium: 500;
    --fontweight_semibold: 600;
    --fontweight_bold: 700;
    --fontweight_black: 900;

    --fontsize_12: 0.75rem;
    --fontsize_14: 0.875rem;
    --fontsize_16: 1rem;
    --fontsize_20: 1.25rem;
    --fontsize_21: 1.313rem;
    --fontsize_24: 1.5rem;
    --fontsize_26: 1.625rem;
    --fontsize_28: 1.75rem;
    --fontsize_32: 2rem;
    --fontsize_35: 2.188rem;
    --fontsize_36: 2.25rem;
    --fontsize_40: 2.5rem;
    --fontsize_44: 2.75rem;
    --fontsize_47: 2.938rem;
    --fontsize_64: 4rem;

}



/* スマホ時に非表示になるヘッダをスマホでも表示させるための記述 */
.headTop {
  background: #181414;
  text-align: right;
  padding: 5px 10px;
    }
    .headTop a {
        color: #fff;
        position: relative;
        font-size: 11px;
    }
    .headTop a::before {
        content: "";
        width: 1em;
        height: 1em;
        background: url(../img/arrow_white.png) no-repeat center;
        background-size: auto;
        background-size: auto 80%;
        display: block;
        position: absolute;
        left: -1.2em;
        top: 2px;
    }

/* ---------------------------------------------------------------------------------------------

　   全般

--------------------------------------------------------------------------------------------- */

body {
    font-family: "Zen Old Mincho", 'Noto Serif', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
	color: #fff;
	background: #251E2D;
}

#sougyousai main * {
	box-sizing: border-box;
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

main {
}

/* tablet */
@media not all and (min-width : 1024px) {
    .container1024 {
        width: 100%;
        margin: auto;
        padding: 0 1rem;
    }
}
/* sp */
@media not all and (min-width : 412px) {
    .container1024 {
        width: 89.8%;
        margin: auto;
        padding: 0;
    }
}
/* パソコン */
@media print,
screen and (min-width : 1024px) {
    .container1024 {
        width: 100%;
        max-width: 1024px;
        margin: auto;
    }
}


.note {
    padding-left: 1em;
    font-size: var(--fontsize_16);
    text-align: left;
    text-indent: -1em;
}


/* flex */
/* パソコン tablet */
@media print,
screen and (min-width : 769px) {
    .flex_pc {
        display: flex;
    }
}

.gap16 {
    gap: 16px;
}
.gap20 {
    gap: 20px;
}
.gap40 {
    gap: 40px;
}



/* ---------------------------------------------------------------------------------------------

　   MV

--------------------------------------------------------------------------------------------- */
#mv {
}

/* ---------------------------------------------------------------------------------------------

　   page lead

--------------------------------------------------------------------------------------------- */

#page_lead p {
    font-size: var(--fontsize_24);
    font-weight: var(--fontweight_midium);
    font-feature-settings: "palt";
    line-height: 1.8;
}
    #page_lead p span {
        display: inline-block;
    }
    #page_lead p span.emph {
        padding: 0 0.25em;
        color: #BC7F4F;
        font-size: var(--fontsize_28);
        font-weight: var(--fontweight_semibold);
    }
    #page_lead p.em {
        margin: 1.5em 0;
        
    }

/* tablet */
@media not all and (min-width : 769px) {
    #page_lead {
        padding: 60px 0 0;
    }
    #page_lead p.em {
        font-size: var(--fontsize_36);
    }
}

/* sp */
@media not all and (min-width : 412px) {
    #page_lead p {
        font-size: var(--fontsize_21);
    }
    #page_lead p span.emph {
        font-size: var(--fontsize_26);
    }
    #page_lead p.em {
        font-size: var(--fontsize_32);
    }
}

/* パソコン tablet */
@media print,
screen and (min-width : 769px) {
    #page_lead {
        padding: 120px 0 0;
    }
    #page_lead p.em {
        font-size: var(--fontsize_40);
    }
}

/* ---------------------------------------------------------------------------------------------

　   CM

--------------------------------------------------------------------------------------------- */
/* 見出し */
#cm .borders {
    position: relative;
    margin-bottom: 20px;
    padding: 0 65px;
}

#cm .borders::before,
#cm .borders::after {
    position: absolute;
    top: calc(50% - 3px);
    width: 50px;
    height: 6px;
    content: '';
    border-top: solid 1px #BC7F4F;
    border-bottom: solid 1px #BC7F4F;
}

#cm .borders::before {
    left: 0;
}

#cm .borders::after {
    right: 0;
}

/* sp tablet */
@media not all and (min-width : 769px) {
    #cm .borders {
        font-size: var(--fontsize_24);
    }

    #cm .borders::before,
    #cm .borders::after {
        width: 40%;
    }
}

/* パソコン tablet */
@media print,
screen and (min-width : 769px) {
    #cm .borders {
        font-size: var(--fontsize_32);
    }

    #cm .borders::before,
    #cm .borders::after {
        width: 45%;
    }
}

/* iframeのレスポンシブ対応 */
.movie {
	position: relative;
	max-width: 1024px;
	margin: auto;
	aspect-ratio: 16/9;
}
.movie iframe {
	width: 100%;
	height: 100%;
}

@media only screen and ( max-width : 768px ) {
	#cm {
		padding: 0 0 4rem;
	}
}
@media print, screen and ( min-width : 769px ) {
	#cm {
		padding-bottom: clamp(4rem, 11.1vw, 6.5rem);
	}
}


/* ---------------------------------------------------------------------------------------------

　   accent_image01

--------------------------------------------------------------------------------------------- */

.accent_image01 {
    width: 100%;
}

/* ---------------------------------------------------------------------------------------------

　   campaign

--------------------------------------------------------------------------------------------- */

#campaign {
}

    #campaign .presents {
        padding: 3.5rem 0;
    }

    #campaign .text p {
        text-align: left;
        font-feature-settings: "palt";
    }
        #campaign .text p span {
            display: inline-block;
        }
        #campaign .text p span.underline {
            text-decoration: underline;
        }
        #campaign .text p span.brown_line {
            color: #BC7F4F;
        }
        #campaign .text p:first-child {
            margin-bottom: 1rem;
        }
    #campaign .text p.note {
        line-height: 1.2;
        font-size: var(--fontsize_16);
    }

/* sp tablet */
@media not all and (min-width : 769px) {
    #campaign {
        margin-top: 64px;
        margin-bottom: 62px;
    }
    #campaign .presents {
        padding: 2rem 0;
    }

    #campaign .text p {
        font-size: var(--fontsize_32);
    }

    #campaign .images ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin: 32px 0;
    }
    #campaign .images li {
        width: 80%;
    }
}

/* sp */
@media not all and (min-width : 412px) {
    #campaign .text p {
        font-size: var(--fontsize_28);
    }
}

/* パソコン tablet */
@media print,
screen and (min-width : 769px) {
    #campaign {
        padding: 6.5rem 0;
    }

    .presents .images {
        order: -1;
    }


    #campaign div.flex_pc {
    }
        #campaign .flex_pc .text {
            width: 58.4%;
        }
            #campaign .text p {
                font-size: var(--fontsize_32);
            }

        #campaign .flex_pc .images {
            width: 40%;
        }

}


/* ---------------------------------------------------------------------------------------------

　   各店

--------------------------------------------------------------------------------------------- */

/* 額縁風フレーム */
.shops_outer_outer {
  padding: 4px;
  background-color: #4f485a;
  clip-path: shape(
    from 36px 0,
    line to calc(100% - 36px) 0,
    arc to 100% 36px of 36px,
    line to 100% calc(100% - 36px),
    arc to calc(100% - 36px) 100% of 36px,
    line to 36px 100%,
    arc to 0 calc(100% - 36px) of 36px,
    line to 0 36px,
    arc to 36px 0 of 36px,
    close
  );
}
.shops_outer {
  padding: 4px;
  width: auto;
  height: auto;
  background-color: #251e2d;
  clip-path: shape(
    from 36px 0,
    line to calc(100% - 36px) 0,
    arc to 100% 36px of 36px,
    line to 100% calc(100% - 36px),
    arc to calc(100% - 36px) 100% of 36px,
    line to 36px 100%,
    arc to 0 calc(100% - 36px) of 36px,
    line to 0 36px,
    arc to 36px 0 of 36px,
    close
  );
}
.shops {
  width: auto;
  height: auto;
  background-color: #4f485a;
  clip-path: shape(
    from 36px 0,
    line to calc(100% - 36px) 0,
    arc to 100% 36px of 36px,
    line to 100% calc(100% - 36px),
    arc to calc(100% - 36px) 100% of 36px,
    line to 36px 100%,
    arc to 0 calc(100% - 36px) of 36px,
    line to 0 36px,
    arc to 36px 0 of 36px,
    close
  );
}


.shops h3#shop-1-name img {
    width: 100%;
    max-width: 254px;
}
.shops h3#shop-2-name img {
    width: 100%;
    max-width: 289px;
}

#kitanotamayura {
    margin-bottom: 2.5rem;
    border-bottom: 8px dotted #251E2D;
}
#tamayuranomori .ticket_price {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #251E2D;
}

/* sp tablet */
@media not all and (min-width : 769px) {
    .shops {
      padding: 48px 16px;
    }

    #kitanotamayura h3,
    #tamayuranomori h3 {
        margin-bottom: 1rem;
    }

    #kitanotamayura {
        padding-bottom: 1.5rem;
    }

    #tamayuranomori .ticket_price {
        padding-bottom: 0.5rem;
    }

    .ticket_price .ticket {
        margin-bottom: 1rem;
        text-align: center;
    }
    .ticket_price .ticket img {
        max-width: 50%;
    }

    .shop .price2 p,
    .shop .price p {
        margin-bottom: 1em;
        line-height: 1.6;
    }

}

/* sp */
@media not all and (min-width : 412px) {
    .shops {
      padding: 48px 10px;
    }
    .shop .price2 p img {
        max-height: 100px;
    }
}

/* パソコン tablet */
@media print,
screen and (min-width : 769px) {
    .shops {
      padding: 32px;
    }
    .shop {
        align-items: center;
        font-size: 1rem;
    }
    .shop h3 {
        width: 35%;
    }
    .shop .detail {
        width: 65%;
    }
    .ticket_price .ticket img {
        max-height: 120px;
    }
    .ticket_price2 .price2,
    .ticket_price {
        align-items: center;
    }
    .ticket_price .ticket {
        width: 30%;
    }
    .ticket_price .price {
        width: 70%;
    }
    .ticket_price2 .price2 img,
    .ticket_price .price img {
        max-height: 116px;
    }
    .ticket_price .price img {
        margin-bottom: 1rem;
    }
    .ticket_price2 .price2 {
        gap: 1rem;
    }

    /* 北のたまゆら */
    #kitanotamayura {
        gap: 1rem;
    }
    #kitanotamayura {
        padding-bottom: 2.5rem;
    }

    /* たまゆらの杜 */
    #tamayuranomori {
        gap: 1rem;
    }
    #tamayuranomori .ticket_price {
        padding-bottom: 1.5rem;
    }
}



/* ---------------------------------------------------------------------------------------------

　   期間

--------------------------------------------------------------------------------------------- */
.period {
    position: relative;
    display: flex;
    background: url("../img/sougyou2026/background_period.png") no-repeat center/cover;
    background-color: rgba(255, 255, 255, 0.85); /* 上に白の半透明レイヤーを重ねる */
    background-blend-mode: lighten;
    z-index: 1;
}
    .period .border {
        margin: auto;
        color: #BC7F4F;
        font-size: var(--fontsize_20);
        text-align: center;
        border: 1px solid #BC7F4F;
        border-radius: 4px;
        background-color: #fff;
    }
        .period .border span {
            display: inline-block;
        }
        .period .border .em {
            color: #BC7F4F;
        }

/* sp tablet */
@media not all and (min-width : 1024px) {
    .period {
        padding: 69px 0;
    }
        .period .border {
            width: 89.8%;
            margin: auto;
            padding: 27px 6px;
        }
            .period .border .em {
                margin-bottom: 0.5rem;
                font-size: var(--fontsize_24);
            }
                .period .border .em span.time {
                    font-size: var(--fontsize_36);
                }
}

/* パソコン */
@media print,
screen and (min-width : 1024px) {
    .period {
        padding: 112px 0;
    }
        .period .border {
            width: 56%;
            padding: 40px 10px;
        }
            .period .border .em {
                font-size: var(--fontsize_32);
            }
                .period .border .em span.time {
                    font-size: var(--fontsize_64);
                    letter-spacing: -0.03em;
                }
}