@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Noto+Sans+JP:wght@100..900&family=Wendy+One&display=swap');

body{
	margin: 0;
	padding: 0;
	background: #f7c3ca;
	}

main{font-family: "Kiwi Maru", serif;}
footer{font-family: "Noto Sans JP", sans-serif;}

.menu-trigger p, nav, h2{font-family: "Wendy One", sans-serif;}
p, li{font-size: 1em; align-items: 1.4em; color: #8c8c8c;}
a{display: block; outline: none; text-decoration: none;}

img{max-width: 100%;}

#NEWS, #STORE {padding-top: 100px; margin-top: -100px;}
.small{font-size: 0.8em;}
.bold{font-weight: bold;}
.red{color: #e00016;}


/*animation*/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 0.5s;
	
	&.fadein-left{transform: translate(-30px,0);}
	&.fadein-right{transform: translate(30px,0);}
	&.fadein-up{transform: translate(0,-30px);}
	&.fadein-bottom{transform: translate(0,30px);}
	&.scrollin{opacity: 1 !important; transform: translate(0, 0) !important;}
	}

a:hover{
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all  0.8s ease;
    }


/*---------- NAVI ----------*/
header {height: 100%; overflow-x: hidden; position: relative;}

.overlay {
	width: 0;
	height: 0;
	content: "";
	display: block;
	background-color: #ffffff;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;
	opacity: 0;
	transition: opacity .5s;
	}

	.overlay.open {
		width: 100%;
		height: 100%;
		opacity: 1;
		}

.menu-trigger {
	display: inline-block;
	width: 100px;
	height: 100px;
	vertical-align: middle;
	cursor: pointer;
	position: fixed;
	top: 5px;
	right: 5px;
	z-index: 100;
	transform: translateX(0);
	transition: transform .5s;
	border-radius: 50%;
	-webkit-border-radius: 50%;
    background-color: #ffffff;
	}

	.menu-trigger.active {transform: translateX(-250px);}

 .menu-trigger span {
	 width: 50px;
	 height: 4px;
	 display: inline-block;
	 box-sizing: border-box;
	 position: absolute;
	 left: 25px;
	 background-color: #9bc5c3;
	 }

.menu-trigger.active span {background-color: #9bc5c3;}
	.menu-trigger span:nth-of-type(1) {top: 25px;}
	.menu-trigger.active span:nth-of-type(1) {transform: translateY(15px) rotate(-45deg);}

	.menu-trigger span:nth-of-type(2) {top: 40px;}
	.menu-trigger.active span:nth-of-type(2) {opacity: 0;}
	
	.menu-trigger span:nth-of-type(3) {top: 55px;}
	.menu-trigger.active span:nth-of-type(3) {transform: translateY(-15px) rotate(45deg);}

.menu-trigger p{bottom: 0; left: 25px; position: absolute; color: #9bc5c3;}


@media only screen and (max-width: 860px){
	.menu-trigger {width: 80px;	height: 80px;}
	.menu-trigger span {width: 40px; left: 20px;}
	.menu-trigger span:nth-of-type(1) {top: 20px;}
	.menu-trigger span:nth-of-type(2) {top: 33px;}
	.menu-trigger span:nth-of-type(3) {top: 46px;}
	.menu-trigger.active span:nth-of-type(3) {transform: translateY(-11px) rotate(45deg);}
	.menu-trigger p{bottom: 2px; left: 23px; font-size: 0.7em;}
	}

nav {
	width: 250px;
	height: 100%;
	padding-top: 30px;
	background-color: #ffffff;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	transform: translateX(250px);
	transition: all .5s;
	}

	nav.open {transform: translateZ(0);}

	nav ul {margin: 20vh 0; padding: 0 1em; list-style: none;}
	nav li {text-align: center; border-bottom: dotted 3px #9bc5c3;}
    nav li:last-child{border-bottom: none;}
	nav a{
		padding: 25px 0;
		font-size: 1.4em;
		color: #9bc5c3;
		text-shadow:
			2px 2px 0 #FFF, -2px -2px 0 #FFF,
			-2px 2px 0 #FFF, 2px -2px 0 #FFF,
			0px 2px 0 #FFF,  0 -2px 0 #FFF,
			-2px 0 0 #FFF, 2px 0 0 #FFF;
		}
	nav a:hover{background: rgba(155,197,195,0.5);}
	header > * {box-sizing: border-box;}



/*---main---*/
main{padding: 1em 0; overflow: hidden;}

main::before {
	animation: 60s 0s rotate linear infinite;
	background: url("../images/brooming/bg_flower.webp") center center / contain no-repeat;
	content: '';
	height: 100%;
	left: -20%;
	position: fixed;
	top: -20%;
	width: 60%;
	z-index: -10;
	}


main::after {
	animation: 80s 0s rotate linear infinite;
	background: url("../images/brooming/bg_flower.webp") center center / contain no-repeat;
	content: '';
	height: 100%;
	right: -20%;
	position: fixed;
	top: 0;
	width: 60%;
	z-index: -10;
	}


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


@media only screen and (max-width: 860px){
	main::before {width: 70%; top: -35%;}
	main::after {width: 70%; top: -15%;}
	}


/*mainVisual*/
#mainVisual{width: 100%; max-width: 1280px; margin: auto; padding: 20% 0; position: relative;}

h1{
	width: 100%;
	margin: 0 0 1em 0;
	height: 0;
	padding-top: 18%;
	background-repeat: no-repeat;
	background-size: contain !important;
	overflow: hidden;
	display: block;
	background-image: url("../images/brooming/logo.webp");
	background-position: center;
	}


.flower_L{
	width: 200px;
	height: 200px;
	position: absolute;
	top: 20%;
	left: 0;
	display: block;
	}

.flower_R{
	width: 200px;
	height: 200px;
	position: absolute;
	bottom: 15%;
	right: 0;
	display: block;
	}


.rotate-box{animation: rotate 30s linear infinite; position: absolute;}

	.rotate-box:first-child {width: 100px; height: auto; left: 100px;}
	.rotate-box:nth-child(2) {width: 100px; height: auto; top: 70px; animation-delay: 0.5s;}
	.rotate-box:nth-child(3) {width: 50px; height: auto; top: 200px; left: 50px; animation-delay: 1s;}

	.flower_R .rotate-box:first-child {width: 75px; height: auto; top: -40px;}
	.flower_R .rotate-box:nth-child(2) {width: 75px; height: auto; top: 35px; left: -10px; animation-delay: 0.5s;}
	.flower_R .rotate-box:nth-child(3) {width: 100px; height: auto; top: 0; animation-delay: 1s;}


@media only screen and (max-width: 1380px){
	.flower_L{top: min(100 / 860 * 100vw, 100px);}
	.flower_R{bottom: min(50 / 860 * 100vw, 50px);}
	}

@media only screen and (max-width: 860px){
	#mainVisual{padding: 40% 1em;}
	h1{padding-top: 21.5%;}

	.flower_L{top: 0; left: -10px;}
	.flower_R{right: -40px; bottom: -8%;}
	
	.rotate-box:first-child {width: 60px; height: auto; top: 40px; left: 75px;}
	.rotate-box:nth-child(2) {width: 70px; height: auto; top: 80px;}
	.rotate-box:nth-child(3) {width: 30px; top: 160px; left: 5px;}
	
	.flower_R .rotate-box:first-child {width: 65px; top: -40px;}
	.flower_R .rotate-box:nth-child(2) {width: 65px; top: 35px; left: -10px;}
	.flower_R .rotate-box:nth-child(3) {width: 90px; top: 0; left: 40px;}
	}

@media only screen and (max-width: 380px){
	.flower_R{right: 0; bottom: -10%;}
	
	.rotate-box:first-child {left: 65px;}
	.rotate-box:nth-child(2) {width: 55px; height: auto; top: 80px;}
	.rotate-box:nth-child(3) {width: 30px; top: 150px; left: 5px;}

	.flower_R .rotate-box:first-child {width: 50px; top: -30px; left: 90px;}
	.flower_R .rotate-box:nth-child(2) {width: 50px; top: 25px; left: 10px;}
	.flower_R .rotate-box:nth-child(3) {width: 70px; top: 0; left: 50px;}
	}


/*NEWS*/
#NEWS{max-width: 1280px; margin: 0 auto 20vh; padding: 0 1em;}
#NEWS > div{margin: 1em 1em 1em 0.5em; padding: 1em; border-radius: 20px; background: #fdf9f2; box-shadow: 4px 4px 0px 0px rgba(247,195,202,1), 8px 8px 0px 0px rgba(253,249,242,1);}

h2{margin: 0; padding: 0.35em 0.35em 0; font-size: 3em; letter-spacing: 2px; color: #92c5c3;}
h2 p{margin: 0; font-size: 18px; font-weight: 500; letter-spacing: 2px; color: #92c5c3; font-family: "Kiwi Maru", serif;}

#NEWS ul{margin: 1.5em; padding: 0; height: 300px; overflow-x: scroll;}
#NEWS ul > li{list-style: none; border-bottom: dotted 2px rgba(146,197,195,0.8);}
#NEWS li > a{padding: 0.25em 1em;}
#NEWS li > a:hover{background: rgba(146,197,195,0.1);}

time{color: #92c5c3; font-weight: bold;}


/*STORE*/
#STORE{background: #fdf9f2; position: relative;}
#STORE > div:nth-child(2){max-width: 1380px; margin: 1em auto; padding: 120px 1em 1em;}

.curve {
	position: absolute;
	top: 0;
	left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
	}

.curve svg {
	position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 240px;
	}

.curve .shape-fill {fill: #f7c3ca;}


.store_tab {padding-top: 3em; display: flex; flex-wrap: wrap;}

.store_tab > label {
	flex: 1 1;
    order: -1;
    position: relative;
    min-width: 70px;
    padding: .7em 1em;
    color: #999;
    font-weight: 600;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
	border-bottom: solid 3px #dcdcdc;
	}

.store_tab > label:hover, .store_tab label:has(:checked) {border-bottom: solid 3px #92c5c3; color: #92c5c3;}

.store_tab label:has(:checked)::before {
	position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background-color: #92c5c3;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
	}

.store_tab input {display: none;}

.store_tab > div {
	display: none;
    width: 100%;
    padding: 1.5em 1em;
	}

.store_tab label:has(:checked) + div {display: block;}


@media only screen and (max-width: 860px){
	#STORE > div:nth-child(2){padding: 0 1em 1em;}
	.curve svg {height: 120px;}
	.store_tab > label {flex: 1 10%; font-size: .75em; margin-bottom: 1.5em;}
	}


/*str_detail*/
.str_list{margin: 2em 0;}

.str_info {
	max-width: 1000px;
    padding: 2.5em 1.5em;
	margin: 0 auto 8em;
	
	--x-gradient: linear-gradient(90deg, #92c5c3 0 40px, transparent 0 calc(100% - 40px), #92c5c3 calc(100% - 40px));
    --y-gradient: linear-gradient(#92c5c3 0 40px, transparent 0 calc(100% - 40px), #92c5c3 calc(100% - 40px));
    background-image:
        var(--x-gradient),
        var(--y-gradient),
        var(--x-gradient),
        var(--y-gradient);
    background-repeat: no-repeat;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    background-position: top, right, bottom, left;
	}

.str_info > div:first-child{display: flex; flex-wrap: wrap;}
.str_info > div:first-child div{flex: 0 1 46%; margin: 0 2%;}
.str_info > div:last-child{margin-top: 2em;}

h3{color: #8c8c8c;}
h3 br{display: none;}
h3 + ul.list{font-size: 0.9em; margin: 1em 0.5em 1.5em;}

.photo{text-align: center;}
.photo img{border-top-left-radius: 20px; border-bottom-right-radius: 20px;}

ul.list{margin: 1em 0.5em; padding: 0; list-style: none;}
ul.list li{margin: 0; padding: 0.35em 0.5em 0.35em 1em;}
ul.list li:before{color:#92c5c3; content:"●"; font-size: 0.75em; margin-left: -1em; margin-right: 0.5em;}

ul.list li > ul{margin: 0.5em; padding: 0; list-style: none;}
ul.list li > ul li:before{color:#92c5c3; content:"○"; font-size: 0.75em; margin-right: 0.5em; font-weight: bold;}

.MAP{display: flex; flex-wrap: wrap; padding-bottom: 1.5em;}
.MAP p{flex: 0 1 32%; margin: 0 2%;}

.btn {
	display: block;
	position: relative;
	color: #92c5c3;
	padding: 0.75em 0.75em 0.75em 3em;
	transition: all .3s;
	font-size: 0.9em;
	
	&:before,
	&:after {
		content: "";
		position: absolute;
		display: block;
		top: 50%;
		}

  &:before {
	  width: 0.3em;
	  height: 0.3em;
	  left: 0.85em;
	  border-top: solid 2px #fff;
	  border-right: solid 2px #fff;
	  z-index: 2;
	  transform: translateY(-50%) rotate(45deg);
	  transition: all .3s;
	  }

  &:after {
	  left: 0;
	  background: #92c5c3;
	  z-index: 1;
	  width: 2.5em;
	  height: 2.5em;
	  border-radius: 4em;
	  transform: translateY(-50%);
	  transition: all .5s;
	}
	
	a{display: block; color: #92c5c3; font-weight: bold;}

  	span {
		position: relative;
		transition: all .3s;
		z-index: 3;
		}

	&:hover {
		padding: 0.75em 0.75em 0.75em 3em;
		span {
			color: #fff;
			}
		
		&:before{left: 1.75em;}
		&:after {right: 0; width: 100%;}
		}
	}

.str_sns{
	padding-top: 3em;	
	background-image: url("../images/brooming/follow_me.png");
	background-repeat: no-repeat;
	background-position: right 80px bottom 40px;
	background-size: 40%;
	}

	.instagram a {
		display: block;
		width: 80px!important;
		height: 80px!important;
        margin: 0 0 0 auto;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url("../images/brooming/instagram_icon.webp");
		}

	.instagram a:hover {opacity: 0.8;}

@media only screen and (max-width: 860px){.str_info > div:first-child{display: block;} .str_sns{background-size: 30%;}}
@media only screen and (max-width: 480px){.str_sns{background-size: 50%;} h3 br{display: block;} .MAP p{flex: 1 1;} .btn {font-size: 0.8em;}}


/*accordion*/
.accordion-area{
    width: 100%;
    margin:0;
    padding: 0;
    list-style: none;
    }

.accordion-area li{margin: 10px 0;}
.accordion-area article {border: 1px solid #92c5c3; border-radius: 10px; background: #92c5c3;}

.gameList{margin-top: 1.5em;}

.title {
    position: relative;
    cursor: pointer;
    font-weight: normal;
    padding: 0 1em 0 0.75em;
    margin-left: 1em;
    transition: all .5s ease;
	color: #fdf9f2;
	font-weight: bold;
    }

.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #fdf9f2;
    }

.title::before{
    top:48%;
    right: 20px;
    transform: rotate(0deg);
    }

.title::after{    
    top:48%;
    right: 20px;
    transform: rotate(90deg);
    }

.title.close::before{transform: rotate(45deg);}
.title.close::after{transform: rotate(-45deg);}

.box {display: none; border-top: dotted 4px #fdf9f2; padding-top: 1em;}

.box > article{
	background: #fdf9f2;
	margin:0 1em 1em;
    padding: 1em;
    border-radius: 10px;
	}

	.box p a, .box li a{color: #f76074; display: inline-block;}
	.box p a:hover, .box li a:hover{color: #f68f9d;}


h5{
	margin: 0 0 0.5em;
	padding: 0.5em;
	font-size: 1em;
	color: #8c8c8c;
	border-bottom: solid 2px #92c5c3;
	}


h6{
	margin: 1em 0 0;
	padding: 0.15em 0.65em;
	font-size: 1em;
	border-left: solid 8px #92c5c3;
	color: #92c5c3;
	}


.cos{margin-bottom: 2em; border: solid 2px #92c5c3; border-radius: 10px;}

.cos h6{
	margin: 0;
	padding: 0.5em;
	font-size: 1em;
	text-align: center;
	color: #fdf9f2;
	border-radius: 8px 8px 0 0;
	background: #92c5c3;
	}

.cos h6 + div{padding: 1em;}
.cos p{text-align: center;}

.pri h6{margin: 0; font-size: 0.8em;}

.FlexBox, .tag{display: flex; flex-wrap: wrap;}
.FlexBox{padding: 1em;}

.tag p{
	flex: 0 1 44%;
	margin: 0.5em 2%;
	padding: 0.5em 0;
	text-align: center;
	border: solid 2px #92c5c3;
	color: #92c5c3;
	background: #FFF;
	font-size: 0.9em;
	font-weight: bold;
	border-radius: 20px;
	}

.block02 > p, .block02 > div{flex: 0 1 46%; margin: 1em 1%;}
.block03 > p, .block03 > div{flex: 0 1 31%; margin: 1em 1%;}

@media only screen and (max-width: 860px){
	.block02 > p, .block02 > div{flex: 0 1 96%; margin: 1em auto;}
	.block03 > p, .block03 > div{flex: 0 1 46%; margin: 1em auto;}
	}

.About{max-width: 860px; margin: auto; padding: 3em 1em 6em;}
.About article{padding: 1em; border-radius: 10px; background: #92c5c3;}
.About h3 img{max-width: 200px;}
.About h3{margin: 0; padding: 0.25em 0.5em; color: #fdf9f2; border-bottom: dotted 4px #fdf9f2;}
.About p{padding: 0.5em 0.5em 0; font-size: 0.8em; color: #fdf9f2;}


/*---footer---*/
footer{
    padding: 10em 1.5em 6em;
	color: #FFF;
	display: block;
    }

footer > div{
	width: 100%;
	max-width: 1480px;
	margin: auto;
	}

   
    ul.taitoLink{margin: 1em 0 0; padding: 0 0 2em; border-bottom: solid 1px #FFF;}
	
	ul.taitoLink li{
		font-size: 1.0em;
		margin-right: 1.0em;
		display: inline-block;
		}
	
	ul.taitoLink a{color: #FFF;}
	ul.taitoLink a:hover{color: #1a8fd5;}

footer p:first-child{
	margin-bottom: 0.5em;
	font-size: 0.8em;
	color: #727171;
	}

footer p:last-child{
	margin-top: 2em;
	font-size: 0.8em;
	color: #FFF;
	text-align: center;
	}

@media only screen and (max-width: 480px) {
    footer{padding: 10% 1.5em 25%;}
    ul.taitoLink li{font-size: 0.9em;}
    }


/*SNS*/
#shareBox {
	width: 100%!important;
	max-width: 100%!important;
    margin: 0!important;
    padding-bottom: 10%;
	text-align: center;
	position: relative;
	}

	.shareButtons {
		position: absolute;
        top: 0;
		bottom: 0;
		left: calc(47% - 75px);
		display: flex;
		justify-content: space-between;
		width: 240px!important;
		height: auto;
		margin: 0px auto!important;
		padding: 0 0 35px!important;
		clear: none;
		z-index: 88;
		}

    .mainVisual #shareBox {margin-top: 3em;}
    .mainVisual .shareButtons{left: calc(43% - 75px);}

	.shareButtons > div > a {
		display: block;
		width: 60px!important;
		height: 60px!important;
        margin: 0 1em;
		background-size: contain!important;
		background: no-repeat top center;
		}

	.shareButtons>div.instBtn a {background-image: url("../images/brooming/sns_Instagram.webp");}
	.shareButtons>div.xBtn a {background-image: url("../images/brooming/sns_x.webp");}
	.shareButtons>div.lineBtn a {background-image: url("../images/brooming/sns_LINE.webp");}


@media only screen and (max-width: 860px) {#shareBox {margin: 15% 0 30%;} .mainVisual #shareBox{display: none;} .shareButtons {left: calc(44% - 75px);}}
@media only screen and (max-width: 480px) {#shareBox {margin: 30% 0 50%;} .shareButtons {left: calc(40% - 75px);}}

@media only screen and (max-width: 860px) {#shareBox {padding-bottom: 8em;} .shareButtons {left: calc(37.5% - 40px);}}
@media only screen and (max-width: 480px) {.shareButtons {left: calc(30% - 40px);}}