@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@400;700;800&family=Noto+Sans+JP:wght@100..900&display=swap');
:root {
  --vw: 1vw;
}
:root {
  --vh: 1vh;
}
:root {
  --inmw: calc(100% - min(80px,12vw));
}
:root {
  --smw: min(40px,6vw);
}
.aaaa{
	margin-bottom:  calc(var(--vw) * -10);
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
    overflow-y: scroll;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

input, textarea{
	margin: 0;
	padding: 0;
}

ol, ul{
    list-style:none;
}

table{
    border-collapse: collapse; 
    border-spacing:0;
}

caption, th{
    text-align: left;
}

a:focus {
	outline:none;
}

.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}

.both{
	clear:both;
}
p {
    display: block;
    -webkit-margin-before:0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}
.inline_block {  
	display: inline-block;  
	*display: inline;  
	*zoom: 1;  
}
html{
	
font-family: "LINE Seed JP",'Noto Sans JP', sans-serif,"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
font-size:10px;
line-height:1.6;
	word-break: break-all;
	font-weight: 400;
	color: #212121;
}
body{
	font-size: 1.6rem;
	max-width: 1400px;
	margin: auto;
}

img{
	display:block;
	width: 100%;
}
a,
a:hover,
a:active,
a:visited,
a:link{
	text-decoration:none;
	color:inherit;
}
.main{
	position: relative;
	z-index: 10;
}
p{
	margin-bottom: 1.6em;
}
p:last-child{
	margin-bottom: 0;
}
.kome{
	margin-bottom: 0;
	display: flex;
	
}
.item_image{
	width: 100%;
	margin-bottom: 4rem;
}
.item_image:last-child{
	margin-bottom: 0rem;
}
span{
	font-weight: inherit;
	font-size: inherit;
}
.f_bold{
	font-weight: 700;
}
.color1 {
	color: #d663c7;
}
#kv{
	display: flex;
	gap:30px;
	max-width: 1060px;
	width: var(--inmw);
	margin: auto;
	align-items: stretch;
	padding-top: 120px;
	padding-top: 40px;
	margin-bottom: 100px;
    margin-bottom: min(100px, 25vw);
}
#kv .right{
    width: 370px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap:4rem;
	flex-shrink: 0;
	
}
.spmenu{
	position: fixed;
	top: 40px;
	right: min(40px, 6vw);
	width: 44px;
	z-index: 30;
}
h1{
    display: block;
    width: 100%;
}
.kv_btn_area{
	display: flex;
	gap:20px;
	flex-wrap: wrap;
}
.kv_btn_area a{
	position: relative;
	display: block;
	width: calc(50% - 10px);
}
.kv_btn_area a img{
	width: 100%;
}
.kv_btn_area a img.kv_btn_icon{
	position: absolute;
	width: 30px;
	left: -10px;
	top: -10px;
}
.kv_btn_area a img.kv_btn_hukidasi{
	position: absolute;
	width: 15%;
    width: 70%;
    right: 5%;
    top: -30%;
}
.kv_btn_area a.kv_btn3{
	width: calc(100%);
}
#movie{
	max-width: 800px;
	margin: auto;
	position: relative;
	margin-bottom: 50px;
	width: var(--inmw);
}
#movie h2{
	position: absolute;
    width: min(160px, 30vw);
    top: calc(-1 * min(80px, 15vw));
    left: calc(-1 * min(80px, 3.5vw));
	z-index: 4;
}

#release{
	padding-bottom: 100px;
}
.genteiban_box{
	border-radius: 20px;
	border: solid 5px#fff;
	max-width: 1060px;
	width: var(--inmw);
	margin: auto;
	padding: 40px var(--smw);
	margin-bottom: 60px;
	background-image: url("../images/bg3.svg");
	background-repeat: repeat-y;
	background-size: 200px;
	background-position: right;
box-shadow: 20px 20px 0px 0px rgba(255,255,255,0.30);
	box-sizing: border-box;
}
.genteiban_box > .inner{
	display: flex;
	gap:20px;
}
#genteiban_animate{
	background-color: #ffe3ff;
}
#genteiban_a{
	background-color: #d3ebfd;
}
#genteiban_b{
	background-color: #e3d4fd;
}
#tsujoban{
	background-color: #ffe3ff;
	margin-bottom: 0px;
}
.genteiban_box .inner .left{
	width: 100%;
}
.genteiban_box .inner .right{
	width: 380px;
	flex-shrink: 0;
}

.genteiban_box h3{
	margin-bottom: 3rem;
}
.genteiban_box h4{
	margin-top: 3rem;
	margin-bottom: 2rem;
	font-size: 1.8rem;
	width:240px;
	text-align: center;
	max-width: 100%;
	display: block;
	padding: 0.25em 1em;
    box-sizing: border-box;
	border-radius: 100px;
	background-color: #6663c7;
	color: #fff;
    font-family: "LINE Seed JP", sans-serif;
	font-weight: 700;
}
.genteiban_box h4.pink{
background-color:#d663c7;
}
.genteiban_box h4:first-child{
	margin-top: 0rem;
}
.genteiban_box h5{
	margin-bottom: 1rem;
	font-weight: 700;
	font-size: 2rem;
	color: #6663c7;
	
}
.genteiban_box .price{
	margin-bottom: 1rem;
	font-weight: 700;
	font-size: 2rem;
	color: #6663c7;
	
}
h5.good{
	font-size:18px;
	text-align: center;
	font-weight: 600;
}
h5.good span{
	display: inline-block;
}
#campaign{
	padding-bottom: 100px;
}
.campaign_box{
box-shadow: 20px 20px 0px 0px rgba(255,255,255,0.30);
	border-radius: 20px;
	background-color: #fff;
	max-width: 1060px;
	width: var(--inmw);
	margin: auto;
	margin-bottom: 60px;
	overflow: hidden;
}
.campaign_box .inner{
	padding: 40px  var(--smw);
}
#campaign_souki .inner{
	display: flex;
	align-items: center;
	flex-direction: column;
	
}

.campaign_box h4{
	margin-top: 3rem;
	margin-bottom: 2rem;
	font-size: 1.8rem;
	width:240px;
	text-align: center;
	max-width: 100%;
	display: block;
	padding: 0.25em 1em;
	border-radius: 100px;
    box-sizing: border-box;
	background-color: #6663c7;
	color: #fff;
    font-family: "LINE Seed JP", sans-serif;
	font-weight: 700;
}
.campaign_box h4:first-child{
	margin-top: 0rem;
	
}
.twocol{
	display: flex;
	gap: 40px;
	width: 100%;
	margin-top: 6rem;
	margin-bottom: 6rem;
}
.twocol > div{
	width: calc(50% - 20px);
}

.campaign_box .twocol p strong{
 font-weight: 700;
	font-size:1.2em;
	    color: #62a4f8;
	display: inline-block;
	margin-top: 10px;
}
p.abc strong{
 font-weight: 700;
	font-size:1.2em;
	    color: #62a4f8;
	display: inline-block;
	margin-top: 10px;
}
#campaign_store{
	margin-bottom: 0;
}

#tour{
	padding: 6rem min(40px, 6vw);;	
}
#tour h2{
	display: block;
	max-width: 620px;
	margin-bottom: 4rem;
}
#tour h3{
	background-color: #f8ebf3;
	border-radius:20px 20px 0 0;
	padding: 1rem 2rem;
    font-size: 1.9rem;
	display: block;
	color: #d663c7;
    font-family: "LINE Seed JP", sans-serif;
    font-weight: 700;
}
#tour .inner{
	margin: auto;
	max-width: 1060px;
}
#tour .inner p{
	font-size: 1.6rem;
}
#tour p.kome{
	font-size: 1.4rem;
}

.tour_twocol{
	display: flex;
	gap: 40px;
	width: 100%;
}
.tour_twocol > div{
    border-radius: 20px;
	background-color: #fff;
	width: calc(50% - 20px);
}
.tour_twocol > div .tour_text{
	padding: 1rem 2rem;
}

#profile{
	padding-bottom: 100px;
}
.profile_box{
	display: flex;
	gap:20px;
	border-radius: 20px;
	border: solid 5px#fff;
	max-width: 1060px;
	width: var(--inmw);
	margin: auto;
	padding: 40px  var(--smw);
	margin-bottom: 60px;
	background-image: url("../images/bg3.svg");
	background-repeat: repeat-y;
	background-size: 300px;
	background-position: right;
box-shadow: 20px 20px 0px 0px rgba(255,255,255,0.30);
	box-sizing: border-box;
}
#profile h3{
	margin-bottom: 3rem;
}
#profile1{
	background-color: #d3ebfd;
}
#profile2{
	background-color: #e3d4fd;
	margin-bottom: 0px;
}
.arrow_btn1{
	border: solid 1px #d663c7;
	background-color: #fff;
	display: block;
	color: #d663c7;
	padding: 0.25em 1.5em;
	background-image: url("../images/arrow1.svg");
	background-size: 1em;
	background-position: center left 0.25em;
	background-repeat: no-repeat;
	margin-bottom: 1rem;
	text-align: center;
}
.arrow_btn1:active,
.arrow_btn1:visited,
.arrow_btn1:link{
	color: #d663c7;
}
.profile_box .right h4{
	color: #fff;
	border-radius: 50px;
	text-align: center;
	padding:0.25em 1em;
    box-sizing: border-box;
	margin-top: 6rem;
	margin-bottom: 2rem;
    font-family: "LINE Seed JP", sans-serif;
	font-weight: 700;
}
#profile2 h4{
	background-color: #d663c7;
}
.profile_box > .left{
	width: 100%;
}
.profile_box > .left p{
	font-weight: 300;
}
.profile_box > .right{
	width: 450px;
	flex-shrink: 0;
}

.shoplist1,
.shoplist2{
	gap:20px;
	column-gap: 40px;
	display: flex;
	flex-wrap: wrap;
}
.shoplist1 li,
.shoplist2 li{
	width: calc(50% - 20px);
}
.shoplist1 li a{
	border-radius: 100px;
	border: solid 4px #8163f6;
	background-color: #cce8fc;
	display: flex;
	align-items: center;
	justify-content:center;
	position: relative;
	color: 	#8163f6;
	text-align: center;
	min-height: 7rem;
	font-size: 2rem;
	line-height: 1.4;
	padding: 0.25em 2.5em;
	box-sizing: border-box;
	background-image: url("../images/arrow2.svg");
	background-size: 1.5em;
	background-position: center left 1em;
	background-repeat: no-repeat;
	margin-bottom: 1rem;
    font-family: "LINE Seed JP", sans-serif;
	font-weight: 700;
}
.shoplist1 li a:link,
.shoplist1 li a:active,
.shoplist1 li a:visited,
.shoplist1 li a:hover{
	color: 	#8163f6;
}
.shoplist1 li a:hover{
	background-color: #fff;
}
.shoplist2{
	margin-bottom: 4rem;
}
.shoplist2 li{
	box-sizing: border-box;
	border: solid 4px #cbaffb;
	border-radius: 20px;
	padding: 20px;
	gap:20px;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.shoplist2 li:nth-child(2n){
	border-color: #82c7f8;
}

.shoplist2 li h5{
	color: #666666;
	font-size: 2rem;
	font-weight: 600;
}

.shoplist2 li p{
	color: #6663c7;
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 0;
}
.shoplist2 li a{
    border-radius: 100px;
    border: solid 4px #cbaffb;
    background-color: #f4eefe;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color:#6663c7;
    text-align: center;
    min-height: 5rem;
    font-size: 2rem;
    line-height: 1.4;
    padding: 0.25em 2.5em;
    box-sizing: border-box;
    background-image: url(../images/arrow2.svg);
    background-size: 1.25em;
    background-position: center left 0.75em;
    background-repeat: no-repeat;
    margin-bottom: 1rem;
    font-family: "LINE Seed JP", sans-serif;
    font-weight: 700;
}

.shoplist2 li:nth-child(2n) a{
    border-color: #82c7f8;
    background-color: #cce8fc;
}
.sns{
	display: flex;
	justify-content: center;
	gap:min(6vw,20px);
	
}
.sns a{
max-width:min( 10vw,50px);
}

.bottom_ribbon{
	position: relative;
	margin-bottom: 60px;
}
.bottom_ribbon:after{
	content: "";
	height: 26px;
    height: min(26px, 4vw);
	width: 100%;
	margin: auto;
    top: 34%;
	display: block;
	background-color: #fff;
	position: absolute;
	z-index: 1;
}
.bottom_ribbon img{
	width: 180px;
    width: min(180px, 25vw);
	margin: auto;
	display: block;
	z-index: 2;
	position: relative;
}
.banner_10th{
	width: var(--inmw);
	max-width: 800px;
	margin: auto;
	margin-bottom: 60px;
	display: block;
}
.topbtn{
	position: fixed;
	bottom: 40px;
	right: min(40px, 6vw);
	width: 44px;
	z-index: 30;
}
.copyright{
	max-width: 220px;
	margin: auto;
	padding-bottom: 100px;
}


.spmenu--close,
.spmenu{
	cursor: pointer
}
.spmenu-contents{
	width: 100%;
    height: 100vh;
	max-width: 1400px;
    box-sizing: border-box;
    position: fixed;
    /* border-left: solid 2px var(--colory); */
    /* border-right: solid 2px var(--colorg); */
    background-color: rgb(132 225 233 / 50%);
    padding: 3rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.25);
	z-index: 101;
	color: #ffffff;
	display: none;
	flex-direction: column;
	align-items: center;
	top: 0;
}
.spmenulogo{
	margin-top: 10vw;
	margin-bottom: 10vw;
}
.spmenulogo{
	width: 80vw;
	height: fit-content;
}
.spmenu-contents a{
	display: block;
	margin-bottom: 3vw;
	font-family: "LINE Seed JP", sans-serif;
	font-weight: 700;
	font-size:5vw;
}
@media screen and (min-width: 600px){
	.spmenulogo{
	margin-top: 50px;
	margin-bottom: 50px;
}

	.spmenulogo{
		width: 500px;
		height: 120px;
	}
	.spmenu-contents a{
		display: block;
		margin-bottom: 3vw;
		font-family: "LINE Seed JP", sans-serif;
		font-weight: 700;
		font-size:24px;
	}
}

.spmenu_head{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.headerlogo{
	    height: 20vh;
    width: auto;
    margin: auto;
    margin-bottom: 10vh;
	margin-top: 10vh;
	height:calc(var(--vh) *20);
    margin-bottom:calc(var(--vh) *8);
	margin-top: calc(var(--vh) *6);
	display: block;
}
.spmenu--close{
	width: auto;
	position: absolute;
	top: min(20px, 5vw);
    right: min(20px, 3vw);
    width: min(44px, 10vw);
}


.bgarea{
	margin-bottom: 10px;
}
.bgarea.bg3{
	margin-bottom: 0;
}
.bgimg_area{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 1400px;
	width: 100%;
	z-index: 1;
}
.bgarea{
}
.bgimg{
	z-index: 1;
	position: relative;
	margin-bottom: 10px;
}
.bgimg1{
	height: 200vh;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ddbff6+0,8fa4f8+100 */
background: linear-gradient(to right,  #ddbff6 0%,#8fa4f8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bgimg4{
	height: 200vh;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ddbff6+0,8fa4f8+100 */
background: linear-gradient(to right,  #e69aca 0%,#ffcccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.bgimg2,
.bgimg3{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#82c7f8+0,c0c2f7+100 */
background: linear-gradient(to right,  #82c7f8 0%,#c0c2f7 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bgimg3{
	margin-bottom: 0;
}
.bgimg_hishi{
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 1600px;
    height: 100%;
    z-index: 10;
    background-image: url(../images/bg_hishi.svg);
    background-size: 100% auto;
}


@media screen and (min-width: 1401px){
	.topbtn{
	left: calc(50vw + 630px);
	right: auto;
	}
.spmenu{
	left: calc(50vw + 630px);
	right: auto;
	}
}
@media screen and (max-width: 1000px){
.spmenu{
	position: fixed;
        top: min(20px, 5vw);
        right: min(20px, 3vw);
	width: min(44px, 10vw);
}
	.topbtn{
	position: fixed;
        bottom: min(20px, 5vw);
        right: min(20px, 3vw);
	width: min(44px, 10vw);
	}
	#kv{
    padding-top: min(120px, 28vw);
    padding-top: 40px;
		
	}
	#kv,
	.profile_box,
	.genteiban_box .inner{
		flex-direction: column;
		gap:6rem;
		align-items: center;
	}
	#kv > .left,
	#kv > .right,
	.profile_box > div.left,
	.profile_box > div.right,
	.genteiban_box .inner > div.left,
	.genteiban_box .inner > div.right{
		width: 100%;
	}
	.twocol,
	.shoplist1,
	.shoplist2,
	.tour_twocol{
		flex-direction: column;
		
	}
	.tour_twocol > div,
	.twocol > div,
	.shoplist1 li,
	.shoplist2 li{
		width: 100%; 
	}
	.shoplist1 li a {
		font-size: 1.6rem;
	}
}

@media screen and (max-width: 1000px){
	h2{
		padding:  min(40px, 6vw) 0;
	}
	#tour h2{
		padding: 0;
	}
	.campaign_box h4{
		width: 100%;
	}
	.genteiban_box h4{
		width: 100%;
	}
}
@media screen and (max-width: 1000px){	
	
	#kv .right {
    gap: 17vw;
}
	}
@media screen and (max-width: 600px){
	html{
		font-size: 8px;
	}
}

.campaign_comingsoon{
	max-width: 600px;
	margin: auto;
}



.modalbtn{
	cursor: pointer;
}
.modalouter {
	position: fixed;
	width: 100%;
	z-index: 100001;
	display: none;
	left: 0;
	bottom: 0;
	margin: auto;
	top: 0;
	bottom: 0;
	box-sizing: border-box;
	align-items: center;
	height:  calc(var(--vh) * 100);;
	padding: 30px;
	background-color: rgba(0,0,0,0.40);
	flex-direction: column;
	justify-content: flex-start;
}
.modalbox {
	display: none;
	max-width: 1400px;
	width: 100%;
	background-color:#FFFFFF;
	border-radius: 15px;
	padding: 20px;
	max-height:  calc(var(--vh) * 100 - 140px);
	box-sizing: border-box;
	flex-direction: column;
}
.modalinner{
	overflow: auto;
	width: 100%;
}
.modalinner img{
	display: block;
	max-width: 100%;
	margin-bottom: 20px;
	
}
.modal_close {
	width: 100%;
	background-position: right center;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 20px;
	max-width: 1400px;
}
.modal_close img{
	width:40px;
	cursor: pointer;
}
.modaltitle{
	font-size: 24px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: solid 2px #00b6ac;
}
.youtubearea {
  padding: 0 !important;
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 56.25% !important;
  overflow: hidden;
	z-index: 1;
}
.youtubearea iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -20%;
  right: -20%;
  left: -20%;
  bottom: -20%;
  margin: auto;
}