@charset "utf-8";

/* =============================================================
    common 共通
============================================*/
:root {
    --color_BLK: #252525;
    --color_YLW: #eeff2c;
    --color_RED: #e60012;
    --color_BLU: #0d6fb8;
    /* --color_BEG : #ffefce; */
    --fontS: clamp(18px, 2.4vw, 24px);
    --fontM: clamp(18px, 2.8vw, 28px);
    --fontL: clamp(20px, 4vw, 38px);
    --gap_96px: clamp(32px, 12vw, 96px);
    --gap_80px: clamp(27px, 10vw, 80px);
    --gap_64px: clamp(21px, 8vw, 64px);
    --gap_48px: clamp(16px, 6vw, 48px);
    --gap_32px: clamp(11px, 4vw, 32px);
    --gap_24px: clamp(8px, 3vw, 24px);
    --gap_16px: clamp(5px, 2vw, 16px);
    --gap_8px: clamp(3px, 1vw, 8px);
}

body {
    width: 100%;
}

body,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
li,
ol,
p,
ul,
dl,
dt,
dd {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: normal;
}

li,
ol,
ul {
    list-style-type: none;
}

#page {
    font-size: clamp(16px, 2.2vw, 20px);
    margin: 0 auto;
    max-width: 1920px;
    color: var(--color_BLK);
    font-family: "Noto Sans CJK JP", Lato, "Noto Sans JP", "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: 1.4;
    font-feature-settings: "palt" 1;
    -webkit-text-size-adjust: 100%;
    position: relative;
    /* 背景fixed　safari対応 ←　これ使う場合は必要*/
}

#page * {
    box-sizing: border-box;
}

#page img {
    width: 100%;
    border: 0;
    vertical-align: top;
}

#page a {
    transition: all 0.3s;
    text-decoration: none;
}

#page a:hover {
    opacity: 0.7;
}

#page a[tabindex*="-1"] {
    pointer-events: none;
}

#page a[tabindex*="-1"]:hover {
    opacity: 1;
}

#page em {
    font-style: normal;
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}

@media screen and (max-width: 767px) {
    #page {
        font-size: clamp(14px, 3.2vw, 16px);
    }
}

.serif {
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
}

.arial {
    font-family: Arial;
}

.font_yusei-magic {
    font-family: "Yusei Magic", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.dela {
    font-family: 'Dela Gothic One', cursive;
    font-weight: 100;
}

.dotgothic {
    font-family: "DotGothic16", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
}

.dela em,
.dotgothic em {
    font-weight: normal !important;
}

.font_awe::before,
.font_awe::after {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
    font-weight: 900;
}

.red {
    color: var(--color_RED) !important;
}

.blue {
    color: var(--color_BLU) !important;
}

.ylw {
    color: var(--color_YLW) !important;
}

.lgry {
    color: #999;
}

.line_ylw {
    background: linear-gradient(180deg, transparent 70%, #ffea00 70%, #ffea00 100%);
}

.inner_wrap {
    padding: var(--gap_32px) var(--gap_32px);
    margin: 0 auto;
    /* max-width: 1500px; */
}

.pd_tb {
    padding-top: var(--gap_80px);
    padding-bottom: var(--gap_80px);
}

.pd_t {
    padding-top: var(--gap_80px);
}

.pd_b {
    padding-bottom: var(--gap_80px);
}

.flex {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex.col2 {
    column-gap: 4%;
}

.flex.col2 .flex_item {
    width: calc(96% / 2);
}

.flex.col3 {
    column-gap: 3%;
    justify-content: center;
}

.flex.col3 .flex_item {
    width: calc(94% / 3);
}

.flex.col4 {
    column-gap: 2%;
    justify-content: unset;
}

.flex.col4 .flex_item {
    width: calc(90% / 6);
}

.flex.col4 .flex_item:nth-child(n + 7) {
    margin-top: var(--gap_48px);
}

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

    .flex.col2,
    .flex.col3 {
        justify-content: center;
    }

    .flex.col2 .flex_item {
        width: min(80%, 480px);
    }

    .flex.col3 .flex_item {
        width: min(100%, 480px);
    }

    .flex.col2 .flex_item:not(:first-of-type),
    .flex.col3 .flex_item:not(:first-of-type) {
        margin-top: var(--gap_48px);
    }

    .flex.col4 .flex_item {
        width: calc(94% / 4);
    }

    .flex.col4 .flex_item:nth-child(n + 5) {
        margin-top: var(--gap_48px);
    }
}

@media screen and (max-width:479px) {
    .flex.col4 .flex_item {
        width: calc(96% / 3);
    }

    .flex.col4 .flex_item:nth-child(n + 4) {
        margin-top: var(--gap_48px);
    }
}

.ib {
    font-size: inherit !important;
    display: inline-block;
}

.btn_wrap {
    text-align: center;
}

.btn {
    font-weight: bold;
    padding: var(--gap_8px) var(--gap_16px);
    margin: 0 auto;
    line-height: 1.2;
    border-radius: clamp(4px, 1vw, 10px);
    transition: all 0.3s;
    display: inline-block;
}

#btn_pagetop,
#btn_pagetop2 {
    bottom: clamp(8px, 2vw, 16px);
    position: fixed;
    z-index: 1010;
}

#btn_pagetop {
    right: clamp(8px, 2vw, 16px);
}

#btn_pagetop2 {
    left: clamp(8px, 2vw, 16px);
}

#btn_pagetop a,
#btn_pagetop2 a {
    /* font-size: clamp(20px,3.8vw,38px);
	color: var(--color_YLW);
	text-align: center;
	border-radius: var(--gap_16px) 0 0 0;
	background-color: var(--color_BLU); */
    display: block;
}

/* #btn_pagetop a i {
	padding: var(--gap_16px) var(--gap_24px);
} */
#btn_pagetop a img {
    width: clamp(50px, 9vw, 80px);
}

#btn_pagetop2 a img {
    width: clamp(100px, 12vw, 160px);
    left: clamp(8px, 2vw, 16px);
    bottom: clamp(8px, 2vw, 16px);
}

#btn_pagetop2 i {
    font-size: 1.4em;
    color: #fff;
    text-shadow: 0 0 0.2em #000, 0 0 0.3em #000;
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 999;
}

.hidden {
    display: none !important;
}

.mob {
    display: none;
}

@media screen and (max-width: 899px) {
    .mob {
        display: block;
    }

    .pc {
        display: none;
    }
}


.sp_only {
    display: none;
}
#page {
    background: url(../images/pc_back.jpg) center center /cover fixed no-repeat;
    overflow: hidden;
}
@media (max-width: 800px) {
    .sp_only {
        display: block;
    }
    #page {
        background: url(../images/sp_back.jpg) top center/100% fixed repeat-y;
    }
}

.nkpresent {
    max-width: 814px;
    margin-inline: auto;
}
#cyarikisha_top {
    padding-top: var(--gap_48px);
    margin-bottom: var(--gap_48px);
}
#cyarikisha_top div {
    max-width: 1152px;
    width: 60%;
    margin: 0 auto;
}
#cyarikisha_top a {
    display: block;
    margin-bottom: var(--gap_64px);
    transition: all .3s;
}
#cyarikisha_top a:hover {
    transform: translateY(-5%);
    opacity: 1;
}
@media (max-width: 800px) {
    #cyarikisha_top div {
        width: 95%;
    }
}

#page section {
    width: 80%;
    padding-top: var(--gap_80px);
    display: flex;
    position: relative;
    box-shadow: var(--gap_32px) var(--gap_32px) 0 rgba(0, 0, 0, .25);
}
#page section>div {
    width: 75%;
}
#page section h2 {
    text-align: center;
    margin-bottom: var(--gap_32px);
}
#page section picture {
    display: block;
    width: 100%;
}
#page .left {
    justify-content: flex-end;
    float: left;
}
#page .right {
    justify-content: flex-start;
    float: right;
}
.clearboth {
    clear: both;
}
@media (max-width: 1200px) {
    #page section>div {
        width: 85%;
    }
}
@media (max-width: 800px) {
    #page section {
        width: 100%;
    }
    #page section>div {
        width: 95%;
    }
    #page .left,
    #page .right {
        justify-content: center;
    }
}

#concept {
    background: url(../images/concept_deco_top_pc.png) no-repeat top / 100%,
    url(../images/concept_deco_btm_pc.png) no-repeat bottom / 100%, var(--color_BLU);
    padding-bottom: 25%;
    padding-right: 5%;
    margin-bottom: 25%;
}
#concept h2 img {
    width: clamp(100px, 28vw, 320px);
}
#concept .concept_img {
    position: absolute;
    width: 65%;
    right: -10%;
}
#concept p {
    font-size: clamp(20px, 3.4vw, 38px);
    font-weight: 700;
    text-align: center;
    color: #fff;
    width: 100%;
    margin-block: var(--gap_64px);
}
#concept em {
    font-size: 1.25em;
    color: var(--color_YLW);
}
#concept .movie {
    position: relative;
    width: min(90%,850px);
    aspect-ratio: 16/9;
    margin: 0 auto;
    overflow: hidden;
}
#concept .tvo-video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}
@media screen and (max-width:800px) {
    #concept {
        background: url(../images/concept_deco_top_sp.png) no-repeat top / 100%,
            url(../images/concept_deco_btm_sp.png) no-repeat bottom / 100%, var(--color_BLU);
        padding-right: 0;
        padding-bottom: 65%;
    }
    #concept .concept_img {
        width: 100%;
        right: -5%;
    }
}

#cast {
    background: url(../images/cast_deco_top_pc.png) no-repeat top left / 80%,
        url(../images/cast_deco_btm_pc.png) no-repeat bottom right / 70%, var(--color_RED);
    padding-bottom: var(--gap_80px);
    margin-bottom: 15%;
}
#cast ul {
    padding-inline: var(--gap_48px);
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2,1fr);
    gap: var(--gap_32px) var(--gap_32px);
}
#cast ul li {
    text-align: center;
}
#cast ul li img {
    width: min(100%,400px);
}
#cast .cast_img {
    position: absolute;
    width: 75%;
    bottom: -25%;
    left: -5%;
}
#cast .cast_two_shot {
    width: 75%;
    margin: 0 auto;
}
#cast .cast_two_shot img {
    width: 100%;
}
#cast h2 img {
    width: clamp(76px, 22vw, 240px);
}
@media screen and (max-width:800px) {
    #cast {
        margin-bottom: 20%;
    }
    #cast .cast_img {
        width: 100%;
        bottom: -5%;
        left: 3%;
    }
}
@media (max-width: 600px) {
    #cast ul {
        grid-template-columns: repeat(1,1fr);
    }
    #cast ul li img {
        width: min(90%,300px);
    }
    #cast .cast_two_shot {
        width: 95%;
    }
}

#location {
    background: url(../images/place_deco.png) repeat-y top left / 30%, #fff;
}
#location h2 img {
    width: clamp(250px,48vw,550px);
}

.sec_title_wrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--gap_32px);
}
.hd_place_ico {
    width: clamp(50px,10vw,120px) !important;
    display: block;
}
.place .sec_title {
    font-size: clamp(22px,4.8vw,48px);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 0;
    margin: 0 var(--gap_16px) !important;
}
.place .sec_title small {
    font-size: clamp(12px,2.2vw,22px);
    display: block;
}
#location .place {
    margin-bottom: var(--gap_96px);
    padding-inline: 8%;
}
#location .place>img {
    display: block;
    margin: 0 auto var(--gap_48px);
}
#location .location_intro {
    text-align: center;
    margin-bottom: var(--gap_96px);
}
#location .location_intro p {
    font-size: var(--fontS);
    font-weight: 700;
}
#location .location_intro p:not(:first-of-type) {
    margin-top: var(--gap_32px);
}
#location .location_intro em {
    font-size: 1.2em;
}

#location h3 {
    text-align: center;
    margin: 0 auto var(--gap_32px);
}
#location h3:first-of-type {
    display: flex;
    justify-content: center;
    align-items: center;
}
#location h3 img {
    width: clamp(100px, 18vw, 190px);
}
#location h3:first-of-type img {
    margin-right: var(--gap_8px);
}
#location h3 p {
    font-size: clamp(20px, 3.8vw, 38px);
    font-weight: 900;
    line-height: 1.2;
}
@media (max-width: 1200px) {
    #location {
        background-size: 17%;
    }
}
@media (max-width: 800px) {
    #location {
        background-image: none;
    }
    #location h3 {
        width: 100%;
    }
    #location .place {
        padding-inline: 0;
    }
}

#location .place_list {
    margin: 0 auto var(--gap_96px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap_32px) var(--gap_32px);
}
#location .place_list li {
    text-align: center;
    width: calc(50% - var(--gap_32px) / 2);
}
#location .place_list li:last-child {
    margin-right: 0;
    margin-bottom: 0;
}
#location .place_list li h4 {
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--gap_8px);
}
#location .one_row {
    line-height: 2.3;
}
#location .place_list li h4 span {
    background: var(--color_YLW);
    background: linear-gradient(180deg, transparent 0%, transparent 70%, var(--color_YLW) 70%, var(--color_YLW) 100%);
}
#location .place_list li img {
    width: 100%;
    margin-bottom: var(--gap_8px);
}
#location .place_list li p {
    line-height: 1.3;
}
#location .place_list li p:not(:first-of-type) {
    margin-top: var(--gap_8px);
}

#location .map {
    margin: 0 auto;
    position: relative;
}
#location .map>img {
    width: 100%;
}
@media (max-width: 800px) {
    #location {
        background-image: none;
    }
    #location .place>img {
        width: 100%;
    }
}

#location .point a {
    display: block;
    width: 5%;
    aspect-ratio: 1 / 1;
    background: url(../images/star.png) no-repeat center / 100%;
    position: absolute;
    transition: all .3s;
}
#location .point a:hover {
    transform: translateY(-12%);
    opacity: 1;
}
#location .point .star01 {
    top: 30%;
    left: 17.5%;
}
#location .point .star02 {
    top: 20%;
    left: 22%;
}
#location .point .star03 {
    top: 26%;
    left: 41%;
}
#location .point .star04 {
    top: 36.5%;
    left: 25.5%;
}
#location .point .star05 {
    top: 58.5%;
    left: 81.5%;
}
#location .point .star06 {
    top: 73.5%;
    left: 74.5%;
}
#location .point .star07 {
    top: 23.5%;
    left: 84%;
}
.modaal-gallery-prev-inner,
.modaal-gallery-next-inner {
    display: none !important;
}

.notice_map {
    margin-top: var(--gap_8px);
}
.star {
    display: inline-block;
    width: clamp(20px,3.2vw,28px) !important;
    margin-right: calc(var(--gap_8px) / 2);
}


#page-top {
    font-family: "Noto Sans CJK JP", Lato, "Noto Sans JP", "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: clamp(12px,2.2vw,22px);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    writing-mode: vertical-rl;
    color: #fff;
    text-decoration: none;
    padding: var(--gap_16px) var(--gap_24px);
    position: fixed;
    right: 0;
    bottom: 3%;
    background-color: var(--color_BLU);
    border: solid 1px #fff;
    border-right: 0;
    z-index: 100;
}



html {
    overflow-y: scroll !important;
}