@charset "utf-8";
/* @group reset */

:root{
    --maincolor:#E73278;
    --mainopacolor:rgba(231,50,120,0.5);
    --subcolor:#ffeef2;
    --highright:rgba(255,245,184,0.9);
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    max-width: 100%;
}
html,body {
    font-size:100%;
    line-height:1.5;
	scroll-behavior: smooth;
}
a{ text-decoration:none;}
ul,ol{ list-style:none;}
li{ list-style:none;}
img{ vertical-align:top; padding: 0; margin: 0;line-height: 0; max-width: 100%;}
table { width:100%;border-collapse: collapse; border-spacing: 0;}


/* @link */
a {text-decoration: none; transition: 0.3s;color: #717071;}
a:hover,a:active{color: var(--maincolor); text-decoration: none;}
a img{border: none;}

a:hover img {
	opacity: 0.8;
}
a img {
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;}


/* @css base block */
.sp{ display:none;}
.tb{ display:none;}
.pc{ display:block;}

.clear{clear: both;}
.f-left{float: left;}
.f-right{float: right;}
.f-left-pc{float: left;}
.f-right-pc{float: right;}

.oh{overflow: hidden;}

.wid100{width: 100%;}
.wid80{width: 80%;}
.wid50{width: 50%;}
.wid45{width: 45%;}
.wid30{width: 30%;}
.wid25{width: 25%;}
.wid20{width: 20%;}

.f-min{font-family: 'Shippori Mincho', serif;}
/*.f-min{font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;}*/

.cen{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}

.bold{font-weight: bold;}

/* @group Heading */
hr {border-style: none;}

/* @css original block */

body{
    width: 100%;
    color: #231815;
    font-family: 'Shippori Mincho', serif;
    font-size: 18px;
}


/*アクセス時演出*/

/*モーダル*/
.modaal-image .modaal-container img{
    max-height: 90vh;
}
.modaal-inner-wrapper .modaal-video-wrap{
    margin:auto 0;
    pointer-events: none;
}
.modaal-video-container{
    pointer-events: auto;
}
.youtube{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	max-width: 100%;
}
.youtube iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*アニメーション設定関連*/
@keyframes jiwa{
	0%{
		transform: scale(0.8);
		opacity: 0;
	}
	30%{
		transform: scale(0.9);
		opacity: 0;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes slide-up{
    from{opacity: 0;transform: translateY(20%);}
    to{opacity: 1; transform: translateY(0);}
}
@keyframes slide-down{
    from{opacity: 0;transform: translateY(-20%);}
    to{transform: translateY(0);}
}
@keyframes slide-l{
    from{transform: translateX(90%);}
    to{transform: translateX(0);}
}
@keyframes slide-cat{
    from{transform: rotate(-60deg);}
    to{transform: rotate(0);}
}

@keyframes show-to-right{
    from{clip-path: inset(0 100% 0 0)}
    50%{clip-path: inset(0 50% 0 0)}
    to{clip-path: inset(0)}
}
@keyframes show-to-bottom{
    from{clip-path: inset(0 0 100% 0)}
    to{clip-path: inset(0)}
}

/*------header------*/
header{
	background: #fff;
    overflow: hidden;
    position: relative;
	width: 100%;
    height: calc(100vh - var(--navh));
    max-height: var(--topimgh);
}
header.sub{
    height: auto;
}
.topimg{
    width: 100%;
    height: 100%;
	position: relative;
    text-align: center;
    background: var(--maincolor)
}
.topimg picture{
    display: block;
    width: 100%;
    position: relative;
    pointer-events: none;
    height: 100%;
}

.top01{
    position: absolute;
    top: 5em;
    left: 100px;
    animation: jiwa 2s forwards;
    z-index: 5;
    text-align: center;
}
.top02{
    position: absolute;
    top: 80px;
    right: 150px;
    max-height: 90vh;
    font-size: 28px;
    letter-spacing: 0.3em;
    color: #fff;
    writing-mode:vertical-rl;
    z-index: 1;
    font-family: 'Hina Mincho', serif;
    line-height: 2.3;
}
.top_copy{
    clip-path: inset(100%);
    animation: show-to-bottom 2s cubic-bezier(.17,.51,.5,.8) forwards;
    height: fit-content;
}
.top_copy:first-child{
    animation-delay: 0.3s;
}
.top_copy:last-child{
    animation-delay: 2.5s;
}
.top03{
    position: absolute;
    bottom: 20px;
    left: 150px;
    max-width: 80%;
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.1em;
    opacity: 0;
    animation: slide-up 2s 2s forwards;
    filter: 
        drop-shadow(1px 1px 0px var(--mainopacolor))
        drop-shadow(-1px 1px 0px var(--mainopacolor))
        drop-shadow(1px -1px 0px var(--mainopacolor))
        drop-shadow(-1px -1px 0px var(--mainopacolor));
}
.staff01{font-size: 25px;margin-bottom: 0.2em;}
.staff02{font-size: 14px;margin-bottom: 0.6em;}
.top03 span{display: block;}
.top02 span{
    margin-bottom: 0.25em;
    text-combine-upright:all;
    -webkit-text-combine:horizontal; /*Chrome9～47、Safari5.1以降) */
    -ms-text-combine-horizontal: all;       /* (InternetExplorer、Edge) */
    -moz-text-combine-upright: all;
}

.toppartsbox{
    height: 100%;
    width: 100%;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.toppartsbox img{
    position: absolute;
}
.parts01{
    position: relative;
    animation: show-to-bottom 3s linear forwards;
}
.parts02{
    top: calc(5em + 220px + 5em);
    left: 34%;
    width: 140px;
}
.parts03{
    top: calc(600px - 2em);
    right: 15%;
    width: 100px;
}

/*------main------*/

/*メニュー*/
nav{
    background: var(--maincolor);
    position: relative;
    z-index: 1;
}
nav ul{
    width: 70%;
    margin: 0 auto;
    display: flex;
}
nav ul li{
    width: 100%;
    text-align: center;
}
nav ul li a{
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 1.5em 0;
    background: linear-gradient(27deg,rgba(255,245,224,0.9) 70%,transparent) no-repeat bottom left/0%;
    transition: 0.6s;
    position: relative;
}
nav ul li a:hover{
    color: var(--maincolor);
}
nav ul li a.grad{
    background-size: 180%;
}
nav ul li a::after{
    content: url("../img/glasses.svg");
    position: absolute;
    bottom: 0.5em;
    right: 1em;
    transform: rotate(30deg);
    display: block;
    height: auto;
    width: 25%;
    opacity: 0;
    transition: 0.6s;
    filter: brightness(105%);
}
nav ul li:nth-child(odd) a::after{
    top: 1em;
    bottom: auto;
    right: auto;
    left: 2em;
    transform: rotate(-10deg);
}
nav ul li a.grad::after{
    opacity: 0.6;
}


/*見出し*/
h2{
    font-size: 42px;
    padding: 0.3em 0 0;
    font-weight: normal;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: #fff;
    overflow: hidden;
    position: relative;
    width: 100%;
    text-align: center;
}

h2 span{
    font-size: 26px;
}

h3{
    margin: 1.2em auto;
    padding: 0 1em 0.5em;
    font-size: 58px;
    color:rgba(255,182,222,0.70);
    text-align: center;
    position: relative;
    width: fit-content;
}
h3 > span{
    position: relative;
    font-family: 'Charmonman', cursive;
    line-height: 1;
}
h3::before{
    content:url("../img/glasses.svg");
    display: block;
    width: 3em;
    position: absolute;
    top:-0.5em;
    left: -0.5em;
    opacity: 0.8;
}
h3 > span > span{
    display: inline-block;
    transform: translateY(-20%);
    opacity: 0;
}
h3.animation > span > span{
    animation: slide-down 1.3s forwards;
    opacity: 1;
}
h3 span::after{
    content: attr(data-ja);
    font-size: 1.3rem;
    cursor: text;
    color: var(--maincolor);
    position: absolute;
    display: block;
    right: -1em;
    bottom: 1.1em;
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 0.1em;
}




/*本文*/
main{
    position: relative;
}
.container{
    display: flex;
    flex-direction: column;
    gap:4em;
    position: relative;
}
.container > section{
    width: 80%;
    margin: 2em auto 4em;
    position: relative;
    padding: 3em 2em;
}

/*追加バナーエリア*/
.container > .banner-area{
    max-width: 1080px;
    display: flex;

    justify-content: center;
    gap:3em;
    margin-bottom: 0;
    padding-bottom: 0;
}
.banner-area span{
    display: block;
    margin-top: 0.5em;
    color: var(--maincolor);
}

/*news*/
.news-flex{
    width: 100%;
    display: flex;
    gap:3em;
    margin-bottom: 2em;
}

.news-flex .news-left{
    width: 730px;
    flex-shrink: 0;
}
.newslist{
    display: flex;
    flex-direction: column;
    gap:0.5em;
    padding: 1em;
    max-height: 200px;
    overflow-y: scroll;
}
.newslist::-webkit-scrollbar{
    width: 20px;
}
.newslist::-webkit-scrollbar-track{
    background-color: var(--maincolor);
}
.newslist::-webkit-scrollbar-thumb{
    background: linear-gradient(var(--maincolor),var(--subcolor));
    border: 3px solid var(--maincolor);
    border-radius: 10px;
}
.newslist li{
    border-bottom: 1px dashed var(--maincolor);
    display: block;
    padding: 0.5em;
}

.twiwrap{
    display: flex;
    align-items: flex-start;
    gap:1em;
}
.twibox{
	text-align: center;
    border-radius: 20px;
    position: relative;
    width: 500px;
    max-width: 100%;
    margin: 0;
    padding: 0.5em;
    background: var(--maincolor);
}
.twibox::before{
    content: '';
    display: block;
    position: absolute;
    height: 1.5em;
    width: 2em;
    background: var(--maincolor);
    right: 0;
    bottom: 5%;
    transform: translateX(99%);
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.twiwrap > img{
    width: 150px;
    align-self: flex-end;
    margin-bottom: 20px;
}


.colorbtn{
    display: flex;
    width: 100%;
    padding: 1.5em 0;
    border-radius: 0.5em;
    border: 2px solid var(--maincolor);
    position: relative;
    margin: 2em 0;
    color: var(--maincolor);
    justify-content: center;
}
.colorbtn.yellow{
    background: var(--highright);
}
.colorbtn.yellow:hover{
    background: transparent;
}
.colorbtn.short_btn{
    max-width: 900px;
    margin: 2em auto;
}
.colorbtn::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--maincolor);
    z-index: -1;
    transform: scale(0,1);
    transform-origin: left top;
    transition: 0.5s;
}
.colorbtn::after{
    content: '';
    position: absolute;
    width: calc(100% - 1em);
    height: calc(100% - 1em);
    border-radius: 0.3em;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1px dashed var(--maincolor);
    transition: 0.5s;
}
.colorbtn:hover::after{
    border-color: #fff;
}
.colorbtn:hover{
    color: #fff;
}
.colorbtn:hover::before{
    transform: scale(1,1);
}

.sns-btns{
    display: flex;
    gap:1em;
}

/*introduction*/
#intro::before,#intro::after{
    content: '';
    z-index: -1;
    display: block;
    position: absolute;
    height: 70vh;
    width: 70%;
    background: rgba(255,245,224,0.4);
    border-radius:  76% 53% 59% 54% / 90% 86% 68% 74%;
}

#intro::before{
    top:3%;
    right: 5%;
}
#intro::after{
    bottom:3%;
    left: 5%;
}
.text{
    position: relative;
    z-index: 1;
}
.text p,.text h4{
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    line-height: 1.8;
    text-align: justify;
}
.text h4{
    font-size: 115%;
    letter-spacing: 0.1em;
    color: var(--maincolor);
}
.text h4.animate,
.text p.animate{
    opacity: 0;
}
.text h4.animation,
.text p.animation{
    opacity: 1;
    animation: slide-up 2s forwards;
}
.text p.animation{
    opacity: 0;
    animation-delay: 0.5s;
}

.intro_list{
    display: flex;
    flex-direction: column;
    gap:5em;
    font-size: 85%;
    margin-top: 5em;
}

.intro_list > div{
    width: 80%;
    position: relative;
}
.intro_list > div:nth-child(odd){
    align-self: flex-end;
}
.intro_list div img{
    position: absolute;
    z-index: -1;
    opacity:0;
    transition: 1.2s;
    max-width: 30%;
}
.intro_list div img.animation{
    opacity: .4;
}

#story .intro_list{font-size: 100%;}
#story .back_powa{position: relative;}
#story .back_powa::before,#story .back_powa::after{
    content: '';
    z-index: -1;
    display: block;
    position: absolute;
    border-radius:  76% 53% 59% 54% / 90% 86% 68% 74%;
    transform: translate(-50%,-30%);
}
#story .back_powa::before{
    max-width: 90%;
    height: 300px;
    width: 420px;
    top:50%;
    left: 50%;
    background: rgba(255,245,224,0.4);
}
#story .back_powa::after{
    max-width: 90%;
    height: 430px;
    width: 550px;
    top:30%;
    left: 60%;
    background: rgba(255,182,222,0.2);
}
#story .back_powa.powa1::before{
    left: 65%;
    top: 114%;
}
#story .back_powa.powa2::before{
    width: 310px;
    left: 38%;
    top: 20%;
}
.intro_parts01{
    top:0;
    left: 0;
    transform: translate(0,-90%);
}
.intro_parts02{
    top: 0;
    right: 0;
    transform: translate(10%,-70%);
}


/*------劇場情報・ムビチケ------*/
.ticket{
    position: relative;
}

.linkbtn{
	text-align: center;
    margin: 2em;
}
.linkbtn a{
	display: inline-block;
	margin: 0 auto;
	padding: 1em 7em;
	color: #fff;
	border: 2px solid var(--maincolor);
    position: relative;
    background: rgba(255,255,255,0.2);
    transition: 0.3s;
}
.linkbtn a::before{
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 100%;
    height: 100%;
    background: var(--maincolor);
    z-index: -1;
	transition: 0.4s;
}
.linkbtn a:hover{
    background: rgba(255,255,255,0.1);
}
.linkbtn a:active{
    background: rgba(255,255,255,0);
}
.linkbtn a:hover::before{
    top: 0;
    left: 0;
}
.linkbtn span{
	font-size: 230%;
    line-height: 1.7em;
    letter-spacing: 0.15em;
}
.ticket .container{
    margin-bottom: 60px;
}


/*ムビチケ*/
.mvtk_box{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap:0.5em;
    align-items: center;
    justify-content: center;
}
#mvtk-widgets-container{
    margin: 0.5em auto;
    max-width: 100%;
}

/*------予告------*/
.tabarea{
    max-width: 1080px;
    margin: 2em auto;
}
.tabcontent{
    background: var(--maincolor);
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    border-radius: 0.3em;
}
.tabcontent.show{
    display: flex;
}
.youtube{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    max-width: 100%;
}
.youtube iframe{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% - 1em);
    height: calc(100% - 1em);
}

.tabbtn_area{
    margin-top: 2em;
    display: flex;
    gap:0.5em 1em;
    flex-wrap: wrap;
}
.tabbtn_area:has(li:nth-child(-n+3):last-child){
    justify-content: center;
}
.tabbtn{
    border: 2px solid var(--maincolor);
    background: #fff;
    color: var(--maincolor);
    width: calc((100% - 1em * 2) / 3);
    padding: 1em 2em;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tabbtn.show{
    background: var(--maincolor);
    color: #fff;
}
.tabbtn:hover{
    background: var(--highright);
    color: var(--maincolor);
}

/*------コメント------*/

.comment_list{
    width: 50vw;
    margin: 7em auto 0;
    display: flex;
    flex-direction: column;
    gap:10vw;
}
.comment_list li{
    width: 100%;
    position: relative;
    min-height: 600px;
}
.comment_list li::before{
    content: '';
    z-index: -1;
    display: block;
    position: absolute;
    height: 70%;
    width: 100%;
    top:-10%;
    right: 5%;
    background: rgba(255,245,224,0.4);
    border-radius:  76% 53% 59% 54% / 90% 86% 68% 74%;
}
.comment_list li:nth-child(even)::before{
    right: auto;
    left: 5%;
}


.come_top{
    display: flex;
    gap:3em;
    align-items: center;
    margin-bottom: 3em;
    letter-spacing: 0.2em;
    padding: 0 2em;
    justify-content: center;
}
.come_top :only-child{margin-right: auto;}
.come_top figure.animate,.come_top p.animate{
    opacity: 0;
}
.come_top figure.animation,.come_top p.animation{
    opacity: 1;
    animation: slide-up 2s forwards;
}

.come_top figure{
    flex-shrink: 0;
    clip-path: polygon(0 0, 75% 0%, 100% 30%, 100% 100%, 25% 100%, 0 70%);
    width: 300px;
}

.comment_list li:nth-child(even) .come_top figure{
    order: 1;
}
.come_top p span{
    display: block;
    width: 100%;
}
.name{
    font-size: 210%;
    margin-bottom: 0.5em;
}
.come{
    padding:0 2em 3em;
    line-height: 1.8;
}
.prof{
    padding: 2em;
    font-size: 90%;
    position: relative;
    color: #5B5255;
}
.prof::before{
    content: '';
    position: absolute;
    width: 100%;
    background: repeating-linear-gradient(to right,var(--maincolor),var(--maincolor) 15px,transparent 15px,transparent 20px);
    top:0;
    left: 0;
    height: 1.5px;
    clip-path: inset(100%);
}
.prof.animation::before{
    animation: show-to-right 1.5s linear forwards;
}

.sns_list{
    display: flex;
    justify-content: center;
    gap:2em;
    position: relative;
    z-index: 2;
}
.sns_list li a{
    background: var(--maincolor);
    border: 2px solid var(--maincolor);
    border-radius: 50%;
    height: 3em;
    width: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.7em;
    transition: 0.5s;
}
.sns_list li a:hover{
    background: var(--highright);
}

/*------footer------*/

.fotimg{
    width: 100%;
    text-align: center;
    position: relative;
    min-height: 250px;
    background: var(--maincolor);
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.fotimg img{
    width: auto;
    max-height: 150px;
}
.wave{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}


.copy{
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: var(--maincolor);
    padding: 1em;
}

.topbtn{
    display: block;
    width: fit-content;
    position: sticky;
    bottom: 20px;
    right: 20px;
    transition: 0.2s;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    margin-left: auto;

}
.topbtn img{
    width: 130px;
    transform-origin: top center;
}
.topbtn:hover img{
    transform: rotate(15deg);
    opacity: 1;
}

.topbtn.show{
    opacity: 1;
    pointer-events: auto;
}


/*サブページ*/
.newspage_list{
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto 5em;
}
.news_block{
    background: rgba(231,50,120,0.1);
}
.news_block:not(:last-child) details{
    border-bottom: 1px dashed var(--mainopacolor);
}
.news_block:not(:last-child) details[open]{
    border-bottom: none;
}
.news_block summary{
    display: block;
    color: #fff;
    background: var(--maincolor);
    padding: 0.7em 1em;
    font-size: 130%;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 0.1em;
}
.news_block summary:hover{
    background: var(--mainopacolor);
}

.news_block div{
    padding: 3em;
}
.news_block p{
    margin-bottom: 1.5em;
}
.news_block h4{
    margin: 2em 0 0.5em;
    font-size: 120%;
    color:var(--maincolor);
}
.news_block ul.disclist,.news_block ul.disclist li{
    list-style: disc;
}
.news_block ul li{
    margin-bottom: 0.3em;
    font-size: 0.9rem;
}
.news_block dd{
    text-indent: 1em;
    margin-bottom: 0.5em;
}
.news_block a{
    color: var(--maincolor);
    text-decoration: underline;
    word-break: break-all;
}
.news_block a:hover{
    color: #999;
}
.news_block .news_block_flex{
    display: flex;
    gap:2em;
    padding: 0;
    margin-bottom: 2em;
}
.news_block_flex > div{
    padding: 0;
}
.flex_text{
    width: calc((100% - 2em) / 2);    
}
.flex_img{
    max-width: 40%;
}
.news_block_flex h4{
    margin-top: 0;
}
.photo_dl dt{
    font-weight: bold;
    margin-bottom: 0.7em;
}
.small{display: block;font-size: 0.9em;line-height: 1.4;}

/*コメントページ*/
.comment_page h3 span{
    color: rgba(255,255,255,0.7);
}

.comment_page section::before{
    content: '';
    background:url("../img/comment_back.jpg") no-repeat center / cover;
    height: 100vh;
    width: 100%;
    position: fixed;
    opacity: 0.3;
    top: 0;
    left: 0;
    z-index: -1;
}
.comment_page .colorbtn{margin-top: 2em; z-index: 1;}
.comment_page .sub_button{
    background: #fff;
    position: relative;
    padding: 2em 0 3em;
}
.comment_page .sub_button::before{
    content: '';
    width: 100%;
    height: 10vh;
    background: linear-gradient(to bottom,transparent,#fff 90%,#fff);
    position: absolute;
    transform: translateY(-99%);
    opacity: 1;
}

.comment_page_list{
    display: flex;
    gap:2em;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    max-width: 1500px;
    margin: 5em auto;
}
.comment_page_list li{
    width: calc((80% - 4em) / 2);
    padding: 1em 2em;
    background: rgba(255,255,255,0.4);
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.comment_text{
    padding: 1.5em 0.3em;
    font-size: 105%;
}

.comment_page_list .prof{
    font-size: 115%;
    color: var(--maincolor);
    text-align: right;
    padding: 1em;
    border-top: 1px solid var(--maincolor);
}
.comment_page_list .prof span{
    font-size: 80%;
}
.comment_pick{
    font-size: 2em;
    letter-spacing: 0.05em;
    color: var(--maincolor);
    font-weight: bold;
    text-shadow: 1px 1px 5px rgba(255,245,184,0.5),-1px 1px 5px rgba(255,245,184,0.5),1px -1px 5px rgba(255,245,184,0.5),-1px -1px 5px rgba(255,245,184,0.5);
}
.comment_pick span{
    font-size: 70%;
    font-weight: normal;
}

.comment_btn{
    position: absolute;
    bottom: 2em;
    right: 3em;
    font-family: 'Hina Mincho', serif;
}
.comment_btn a{
    background: var(--highright);
    display: flex;
    height: 180px;
    width: 180px;
    padding: 15px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    border: 2px solid var(--maincolor);
    text-align: center;
    font-size: 28px;
    color: var(--maincolor);
    font-weight: bold;
}
.comment_btn a:hover{
    background: var(--maincolor);
    color: #fff;
    border-color: var(--subcolor);
}



@media(max-height:800px){
    .top02{font-size: 20px;}
}

@media(max-width: 1600px){
	
    body{font-size: 16px;}    
    nav ul{
        width: 100%;
        max-width: 980px;
    }
    .top01{width: 45vw;top:3em;left: 70px;}
    .top03{left: 100px;}
    .parts03{top: 40px;right: 20%;width: 90px;}

    .container > section{
        width: 100%;
    }
    
    .comment_list{
        width: 90%;
        max-width: 980px;
    }
    
    .topbtn{
        width: 100px;
        max-width: 20vw;
    }
        
    .comment_btn{right: 1.5em;bottom: 1em;}
    .comment_btn a{height: 130px;width: 130px;font-size: 21px;}


}

@media(max-width:1400px){
    .top02{
        top: 40px;
        right: 100px;
    }
    .top01{top: 1em;}
    .parts02{
        top: calc(3em + 220px);
    }
    h2{font-size: 36px;padding: 0;}
    .staff01{font-size: 21px;}
    .staff02{font-size: 12px;}
    .staff03{font-size: 8px;}
    nav ul li a{padding: 1em 0;}
}

/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
レスポンシブ設定（タブレット）
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
@media(max-width:1140px){
    .tb{display: block;}
    
    .top02{font-size: 18px;max-height: 90%;right: 3em;top:3em;}
    .top03{left:100px;}
    
    h2{font-size: 21px;}
    h2 span{font-size: 16px;}
    
    .parts02{
        width: 100px;
        top:calc(5em + 220px);
    }

    .news-flex{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .news-flex > div{
        width: 100%;
    }
    .newslist,.right{
        max-width: 70%;
        margin: 0 auto;
    }
    .sns-btns{
        width: 70%;
        margin: 0 auto;
    }
    .short_btn{
        max-width: 70%;
        margin: 1em auto 0;
    }
    .twiwrap{
        justify-content: center;
        align-items: flex-end;
    }
    .twibox::before{bottom: 10%;}
    .twiwrap > img{
        margin-bottom: 0;
    }
    
    .text p,.text h4{
        width: 75%;
    }
    .wave{
        transform: translateY(-30%);
    }
    
    .flex_text{
        width: auto;
    }
    
    .comment_page_list li{
        width: calc((100% - 4em) / 2);
        padding: 1em;
    }

}
@media(max-width:768px){
    /*上の方*/
    .topimg picture{height: calc(100vh - var(--navh) - var(--parts01h));}
    .top01{
        width: 100%;
        top: 120px;
        left: 0;
        text-align: center;
    }
    .top01 img{
        width: 70vw;
    }
    .toppartsbox{display: none;}
    h2.parts01{font-size: 28px;}
    
    .top02,.top03{
        writing-mode:horizontal-tb;
        padding: 0;
        max-width: 100%;
    }
    .top02 .top_copy{
        clip-path: inset(0);
        animation: none;
    }
    .top02{
        top: auto;
        bottom: 180px;
        right: auto;
        left: 2rem;
        font-size: 21px;
        letter-spacing: 0.1em;
        line-height: 2;
        animation: show-to-bottom 2s cubic-bezier(.17,.51,.5,.8) forwards;
    }
    .top03{
        filter: none;
        left: 2rem;
    }
    .top02 p,.top03 p{
        width: 100%;
    }
    
    .container > .banner-area{max-width: 90%; flex-direction: column;gap:1.5em;}
    
    .intro_list > div{
        width: 90%;
    }
    
    .mvtk_box{max-width: 90%;margin: 0.5em auto;}
    
    .comment_list{width: 100%;}
    .come_top{flex-direction: column;gap:1.5em;margin-bottom: 1em;}
    .come_top figure{width: 200px;}
    .come_top div p:first-child{
        display: flex;
        gap:1em;
        align-items: center;
        margin-bottom: 1em;
        justify-content: center;
    }
    .come_top div p>span{width: fit-content;margin: 0;}
    .comment_list li:nth-child(even) .come_top figure{order: 0;}
    
    .comment_list li::before{
        top:40%;
        transform: translateY(-50%);
        max-height: 600px;
    }
    .come{padding: 0 2em 2em;line-height: 1.6;font-size: 13px;}
    .prof{font-size: 12px;}
    
}

/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
レスポンシブ設定（スマホ）
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
@media(max-width: 599px){
    
    body{font-size: 14px;}
    .sp{display: block;}
    
    /*上の方*/
    header{max-height: none;background: #fff;height: auto;}
    .container > section{padding: 3em 1em;}
    .top01{top:40px;}
    .top01 img{width: 80vw;}
    .top02{font-size: 14px; line-height: 1.8;bottom: calc(100% - var(--topimgh) + 5em);}
    .top03{
        position: static;
        color:var(--maincolor);
        padding:1em;
        text-align: center;
    }
    
    .staff01{font-size: 15px;}
    .staff02{font-size: 12px;}

    h2.parts01{font-size: 21px;}
    
    nav ul{flex-wrap: wrap;}
    nav ul li{width: 50%;}
    nav ul li:nth-child(2n+1):last-child{width:100%;}
    nav ul li a{padding: 1em 0;font-size: 12px;}
    nav ul li a:is(:hover,:active){background: var(--highright);}
    nav ul li a::after{width:40px;}
    
    h3{margin: 0.5em auto;font-size: 36px;}
    h3::before{width: 2em;}
    h3 span::after{bottom: 0.5em;}
    

    
    .newslist{max-width: 90%;}
    .sns-btns{flex-direction: column;margin-top: 1em;width:90%;}
    .colorbtn{margin: 0;}
    .short_btn{max-width: 90%; margin: 1em auto 0;}
    .twiwrap{flex-direction: column;}
    .twibox{align-self: center;}
    .twibox::before{
        left: 70%;
        bottom: 0;
        transform: translateY(100%)rotate(90deg)scaleY(-1);
    }
    
    .tabarea{max-width: 90%;}
    .tabbtn_area{gap:0.3em;}
    .tabbtn{padding: 0.3em 1em;width: 100%;}
    .youtube iframe{font-size: 16px;border-radius: 0.5em;}

    #intro::before,#intro::after{width: 90%;height: 350px;}
    #story .back_powa::before,#story .back_powa::after{height: 70%;}
    .text p,.text h4{width: 100%;}
    .text h4 br{display: none;}
    .intro_list div img.animation{opacity: 0.3;}
    .intro_parts02{right:0;transform: translate(0,-95%);}
    
    .comment_list{margin: 3em auto;}
    .comment_list li{min-height: 350px;}
    .comment_list li::before{max-height: 350px;max-width: 90%;}
    .come_top div p:first-child{
        flex-direction: column;
        align-items: flex-start;
        gap:0;
    }
    .come{font-size: 12px;}
    .prof{font-size: 10px;}

    .fotimg{min-height: 170px;}
    .fotimg img{max-width: 80%;}
    

/*----------------------サブページ----------------------*/
    .newspage_list{
        width: 85%;
    }
    .news_block > div{
        padding: 2em;
    }
    .news_block dl dd{
        text-indent: 0;
    }
    .news_block ul li br{
        display: none;
    }
    .news_block .news_block_flex{
        flex-direction: column;    
    }
    .flex_img{max-width: 60%;}
    .comment_page_list{
        flex-direction: column;
        align-items: center;
        gap:1.5em;
    }
    .comment_page_list li{
        width: 90%;
    }
    .comment_text,.comment_page_list .prof{
        padding: 1em;
    }
    .comment_text{
        font-size: 12px;
    }

}
@media(max-width:599px),(min-width:768px) and (max-width:900px){
    .comment_btn{
        position: static;
        background: var(--subcolor);
        padding: 3em 2em;
        width: 100%;
    }
    .comment_btn a{
        margin: 0 auto;
        width: 200px;
        height: 200px;
        font-size: 28px;
    }
}