@charset "UTF-8";
* {box-sizing: border-box;}
html {font-size: 62.5%;}
body {
	font-size: 1.6em;
	line-height: 1.6;
	transition: .5s;
	display: block;
	height: 100vh;
	background-image: url(../images/bgpc.jpg) ;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	min-width: 320px;
}
.bg::before{
	content: '';
	display: block;
}
body.after_load {
	opacity: 1;
}
body * {
	color: #3c433f;
	letter-spacing: 0.05em;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: 400;
}
.bold {font-weight: 700;}
.hidden1 {overflow: hidden!important;}

a, a:hover, a::after, a:hover::after, a img, a:hover img, a::before, a:hover::before {transition: 0.3s;}
a, a:focus {outline:none;}
img {width: 100%;}
.relative{
	position: relative;
}
.absolute{
	position: absolute;
}
.scrolldown {
	position: fixed;
	bottom: 5%;
	right: 3%;
	width: 150px;
	height: 150px;
	transition: .5s;
}
.scrolldown  img{
	width: 100%;
}
.scrolldown .asirai {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 125px;
    height: 127px;
	animation: infinite-rotate 20s linear infinite;
  }
  .scrolldown.sp{
	display: none;
  }
  
  @keyframes infinite-rotate {
	0% {
	  transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
	  transform: translate(-50%, -50%) rotate(360deg);
	}
  }

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

h2 {
	font-size: 2.5rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 5%;
	padding-top: 50px;
}
h2::before {
	content: "";
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 20px;
    background-image: linear-gradient(90deg, rgba(153, 211, 209, 1), rgba(194, 199, 159, 1) 50%, rgba(243, 212, 161, 1));
}

/* header */
header{display: none;}
/* .inner section {
	padding: 3% 20px 20% 20px;
} */
.txt-center{
	text-align: center;
}
.bg-beige{
	background: #fffaf0;
}
.bg-green{
	background: #EBFCEA;
}
.pd{padding:0 30px 15% 30px;}
.wave{
	width: 100%;
	font-size: 0;
}
.line-txt{color: #04C755;}
.insta-txt{color: #FF7BAB;}
.aikotoba-txt{color: #EA5E6A;}
.mb{margin-bottom: 5%;}

/* menu -----------------------------------------------------------------------------------*/
.menu {
   top: 50%;
  left: 8vw;
  position: fixed;
  width: 30%;
  /* transform: translate(-60% , -55%); */
  transform: translateY(-60%);
}
.menu a:hover {
	opacity: 0.6;
}
#page-top {
	margin-bottom: 15%;
}
.nav_list li a{
	display: block;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: solid 1px #fff;
}
.nav_list li a::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	line-height: 1;
	width: 10px;
	height: 10px;
	border: 1px solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-50%) rotate(45deg);
}
.nav_list li span {
	font-size: 1.6rem;
	color: #fff;
}
.nav_list a::after {
	content:"";
	background: url(../images/nav_icon.svg) no-repeat;
	display: inline-block;
	position: relative;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin: 0 8px 0 0;
}
.sp_menu_btn button {
	display: none;
}
.button{
	display: flex;
	justify-content: center;
}
.button a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 320px;
	height: 60px;
	background: #fff;
	border: solid 2px #005e66;
	border-radius: 30px;
	line-height: 1;
	color: #005e66;
	font-size: 1.6rem;
	font-weight: bold;
	transition: 0.45s;
}
.button a::after{
	content: "";
	position: absolute;
	display: inline-block;
	color: #005e66;
	width: 10px;
	height: 10px;
	border: 2px solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) rotate(45deg);
	transition: .3s;
}
.button a::before{
	content: "";
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 22px;
	height: 22px;
	position: absolute;
	top: 50%;
	left: 30px;
	transform: translateY(-50%);
}
.button.b-line a{
	background: #04C755;
	border: solid 2px #04C755;
	color: #fff;
}
.button.b-line a::before{
	width: 30px;
	height: 30px;
	left: 25px;
	background-image: url(../images/sns_icon_line.png);
}
.button.b-line a::after{
	color: #fff;
	border: 2px solid currentColor;
	border-left: 0;
	border-bottom: 0;
}
.button.b-insta  a{
	background: #FF7BAB;
	border: solid 2px #FF7BAB;
	color: #fff;
}
.button.b-insta  a::before{
	background-image: url(../images/sns_icon_insta.png);
}
.button.b-insta a::after{
	color: #fff;
	border: 2px solid currentColor;
	border-left: 0;
	border-bottom: 0;
}
.button.b-aikotoba a{
	background: #EA5E6A;
	border: solid 2px #EA5E6A;
	color: #fff;
}
.button.b-aikotoba a::before{
	background-image: url(../images/sns_icon_aikotoba.png);
}
.button.b-aikotoba a::after{
	color: #fff;
	border: 2px solid currentColor;
	border-left: 0;
	border-bottom: 0;
}


.contents {
	/* position: fixed; */
	background-color: #fff;
	width: 450px;
	margin-left: auto;
	margin-right: 0;
	/* transform: translate(160%, 0%); */
	position: relative;
	right: 17%;
	overflow-y: auto;
	-ms-overflow-style: none;
	 scrollbar-width: none;
	scroll-behavior: smooth;
}
.contents::-webkit-scrollbar {
	display: none;
}

/* ヘッダー -------------------------------------------------------------------------------*/
header .sp-block{display: none;}

/* FV -----------------------------------------------------------------------------------*/
.FV {
	padding: 0;
}
.FV .fifth{
	width: 35%;
	top: 3%;
	left: 5%;
	z-index: 2;
}
.FV .f_txt{
	width: 80%;
	top: -2vw;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}
.fv-area{
	width: 100%;
}

/* message -----------------------------------------------------------------------------------*/
.message .pd{
	padding-top: 5%;
}

/* about -----------------------------------------------------------------------------------*/
.about .pd{
	padding-bottom: 5%;
}
.about h2{
	width: 280px;
	margin-inline: auto;
}
.about h3{
	font-weight: bold;
	color: #005e66;
	font-size: 1.8rem;
	margin-bottom: 5%;
}
.about .wave{
	bottom: 0;
}
.ticket{margin: 8% 0;}
.loop {
    display: flex;
    overflow: hidden;
}
.loop ul {
	display: flex;
	width: 100vw;
}
.loop li {
	width: 25vw;
	padding: 0 10px;
}
.loop ul:first-child {animation: loop 100s -50s linear infinite;}
.loop ul:last-child {animation: loop2 100s linear infinite;}

@keyframes loop {
	0% {transform: translateX(100%);}
	to {transform: translateX(-100%);}
}
@keyframes loop2 {
	0% {transform: translateX(0);}
	to {transform: translateX(-200%);}
}

/* campaign */
.ca_btn-area ul{
	justify-content: space-between;
}
.ca_btn-area ul li{
	width: 49%;
}
.ca_btn-area ul li a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	background: #fff;
	border: solid 2px #005e66;
	border-radius: 30px;
	font-size: 1.6rem;
	color: #005e66;
	font-weight: bold;
	transition: .3s;
}
.ca_btn-area ul li a::after{
	content: "";
    position: absolute;
    top: 45%;
    right: 15px;
    display: inline-block;
    vertical-align: middle;
    color: #005e66;
    line-height: 1;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-50%) rotate(135deg);
	transition: .3s;
}
.campaign h3{
	font-size: 2rem;
	padding-top: 50px;
	font-weight: bold;
	margin-bottom: 10px;
}
.campaign .item{
	background: #fff;
	border-radius: 30px 0 30px 0;
	padding: 20px;
}
.campaign .item .img{
	font-size: 0;
	margin-bottom: 30px;
	border-radius: 10px;
	overflow: hidden;
}
.campaign .item.line{border: solid 1px #04C755;}
.campaign .item.insta{border: solid 1px #FF7BAB;}
.campaign .item.aikotoba{border: solid 1px #EA5E6A;}
.campaign .item h4{
	font-weight: bold;
	font-size: 2.2rem;
	margin-bottom: 20px;
}
.campaign .item p{
	margin-bottom: 10px;
	background-image: url();
}
.campaign .item .step{
	display: block;
	font-size: 1.6rem;
	font-weight: bold;
}
.campaign .item.line .step{
	color: #04C755;
}
.campaign .item.insta .step{
	color: #FF7BAB;
}
.campaign .hosoku{
	display: block;
	font-size: 1.4rem;
	line-height: 1.4;
	padding-left: 14px;
	text-indent: -14px;
	margin: 10px 0 15px 0;
}
.hosoku_area .hosoku{
	display: block;
	font-size: 1.4rem;
	line-height: 1.4;
	padding-left: 14px;
	text-indent: -14px;
	margin: 5px 0 5px 0;
}
.hosoku_area .hosoku:first-of-type{
	margin-top: 10%;
}
.campaign .button.apply{
	margin-top: 15%;
}

/* class */
.class  .bg-grade{
	background-image: linear-gradient(-45deg, rgba(153, 211, 209, 1), rgba(194, 199, 159, 1) 50%, rgba(243, 212, 161, 1));
	padding: 20px;
	border-radius: 20px;
}
/* swiper */
.class .swiper-slide{
	overflow: hidden;
	background: #fff;
	border-radius: 40px 0 40px 0;
	margin-bottom: 120px;
}
.class .swiper-slide .txt-area{
	padding: 20px;
}
.class .swiper-slide .txt-area h3{
	font-size: 2rem;
	font-weight: bold;
	color: #005e66;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: solid 2px #005e66;
}
.class .swiper-slide .txt-area p{
	color: #005e66;
}
.class .slide-area span{
	display: block;
	font-size: 1.6rem;
	margin-bottom: 10px;
	color: #005e66;
}
.class .swiper-button-next{
	width: 40px;
    height: 40px;
    border: solid 2px #005e66;
    border-radius: 30px;
    transition: .2s;
}
.class .swiper-button-next:after, .swiper-button-prev:after{
	content: "" !important;
    display: inline-block;
    vertical-align: middle;
    color: #005e66;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    transition: .2s;
}
.class .swiper-button-next:after{
    transform: translate(-50%, -50%) rotate(45deg);
	left: 45%;
}
.class .swiper-button-prev:after{
    transform: translate(-50%, -50%) rotate(-135deg);
	left: 55%;
}
.class .swiper-button-next, .swiper-button-prev {
	content: "";
    position: absolute;
    top:inherit!important;
	bottom: 6%!important;
    width: 50px!important;
	height: 50px!important;
    margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
	background: #fff;
}
.class .swiper-button-prev {
	left: inherit!important;
	right: 100px!important;
	width: 40px;
    height: 40px;
    border: solid 2px #005e66;
    border-radius: 30px;
    transition: .2s;
}
.class .swiper-button-prev {
	left: inherit!important;
	right: 80px!important;
	width: 40px;
    height: 40px;
    border: solid 2px #005e66;
    border-radius: 30px;
    transition: .2s;
}
.class .swiper-pagination{
	display: flex;
	top: inherit;
	top: inherit!important;
	bottom: 8.5%!important;
}
.class .swiper-pagination-bullet{
	display: block!important;
	width: 10px!important;
	height: 10px!important;
	background: #fff!important;
	opacity: 1!important;
}
.class .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background: #005e66!important;
}
.class span.txt-center.fukidasi{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
}
.class span.txt-center.fukidasi::before{
	content: "";
	display: block;
	width: 1px;
	height: 45px;
	background: #005e66;
	transform: rotate(-25deg);
	position: absolute;
	bottom: 0;
	left: -10%;
}
.class span.txt-center.fukidasi::after{
	content: "";
	display: block;
	width: 1px;
	height: 45px;
	background: #005e66;
	transform: rotate(25deg);
	position: absolute;
	bottom: 0;
	right: -10%;
}

/* footer -----------------------------------------------------------------------------------*/
.footer-area .button{
	margin-bottom: 20px;
}
.footer-area .button:last-of-type{
	margin-bottom: 0px;
}
.footer-area .fifth{
	width: 280px;
	margin-inline: auto;
}
.footer-area .btn-area p{
	margin-bottom: 20px;
}
.footer-area p.insta-txt{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	margin-top: 30px;
	margin-bottom: 5px;
	color: #3c433f;
}
.footer-area p.insta-txt::before{
	content: "";
	width: 1px;
	height: 20px;
	background: #3c433f;
	position: absolute;
	left: -12px;
	top: 2px;
	transform: rotate(-20deg);
}
.footer-area p.insta-txt::after{
	content: "";
	width: 1px;
	height: 20px;
	background: #3c433f;
	position: absolute;
	right: -8px;
	top: 2px;
	transform: rotate(20deg);
}
footer {
  padding-top: 10px;
  padding-bottom: 10px;
  background: #005e66;
}
.copy {
	display: block;
	color: #fff;
	font-size: 1.1rem;
}

.btn_block {
	width: 100%;
	margin: auto;
  display: block;
  background-color: #c74947;
  font-weight: bold;
  padding: 14px 10px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 0 rgb(0 0 0 / 20%);
  transition: .3s;
  cursor: pointer;
	position: relative;
}
.btn_block:hover {
	box-shadow: none;
	transform: translate(0, 5px);
}
.btn_block span {
	color: #fff;
	font-weight: bold;
	line-height: 1;
}
.btn_block::after {
	content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 8px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  right: 6%;
  margin-top: -7px;
}


.anm {
	opacity: 0;
	transform: translateY(10px);
	transition: 0.3s cubic-bezier(0.5, 1, 0.89, 1);
}
.anm.show {
	opacity: 1;
	transition-delay: .1s;
	transform: translateY(0px);
}



/* --------------------- */
@media screen and (min-width: 751px) {
	.button a:hover{background: #005e66; color: #fff;}
	.button a:hover::after{right: 15px; color: #fff;}
	.ca_btn-area ul li a:hover{background: #005e66; color: #fff;}
	.ca_btn-area ul li a:hover::after{top: 55%; color: #fff;}
	.class .swiper-button-prev:hover{transform: scale(1.1);}
	.class .swiper-button-next:hover{transform: scale(1.1);}

	.button.b-line a:hover{background: #04C755;}
	.button.b-insta a:hover{background: #FF7BAB;}
	.button.b-aikotoba a:hover{background: #EA5E6A;}
	.scrolldown:hover{transform: scale(1.2);}
}

/* --------------------- */
@media screen and (min-width: 1300px) {
}
@media screen and (max-width: 1200px) {
	.scrolldown{right: 2%;}
}/* 1200px */

@media screen and (max-width: 1100px) {
	.contents{right: 0;}
	.menu {left: 5vw; width: 35%;}
	.pd{padding:0 15px 20% 15px;}
	.scrolldown.pc{display: none;}
	.scrolldown.sp{display: block; position: absolute; width: 120px; height: 120px; top: -12%; right: inherit; bottom: inherit; left: 50%; transform: translateX(-50%); z-index: 2;}
	.scrolldown.sp .asirai{width: 100px; height: 103px;}

	.FV{padding-bottom: 18%;}
	.FV .wave{position: absolute; bottom: 0;}
	.message .pd{padding-top: 12%;}
}
@media screen and (max-width: 1000px) {
	.contents{width: 380px;}
}/* 1000px */

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


}/* 750px */

@media screen and (max-width: 680px) {
	body { display: block; background-image: none;}
	p{font-size: 1.4rem;}
	.contents {position: static; background-color: #fff; width: 100%; height: auto; transform: translate(0, 0);}
	.pd {padding: 0 15px 12% 15px;}

	header{display: block; width: 100%; height: 50px; background: #fff; position: fixed; top: 0; z-index: 100;}
	header .sp-block{display: block; width: 200px; top: 60%; transform: translateY(-50%); left: 20px;}

	.FV .f_txt{top: -5vw;}

	.nav_list li {width: 100%; height: 100%; margin: 0 0 2rem 0;}
	.sp_menu_btn {position: fixed; top: 0; right: 0; z-index: 9997;}
	.sp_menu_btn button {display: block; cursor: pointer; width: 50px; height: 50px; border: none; outline: none; border-radius: 0 0 0 10px; background-color: #005e66; padding: 0; transition: .3s;}
	.sp_menu_btn button span.bar { display: block; height: 3px; width: 25px; background-color: #fff; margin: 7px auto; transition: all 0.2s; transform-origin: 0 0;}
	.sp_menu_btn button.active span.bar {width: 35px; transform-origin: center left;}
	.sp_menu_btn .active .bar1 {transform: rotate(45deg) translate(0px, -6px);}
	.sp_menu_btn .active .bar2 {opacity: 0;}
	.sp_menu_btn button.active .bar3 {transform: rotate(-45deg) translate(0px, 7px); margin-top: 12px;}
	.menu {width: 50vw; position: fixed; top: 0; left: inherit; right: -50vw; z-index: 101; transform: translate(0, 0); transition: 1s cubic-bezier(0.16, 1, 0.3, 1);}
	#page-top {width: 90%; padding-top: 60px;}
	.menu nav {
		position: static;
		/* background-image: url(../images/bgpc.jpg) ;
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat; */
		background-image: linear-gradient(-45deg, rgba(153, 211, 209, 1), rgba(194, 199, 159, 1) 50%, rgba(243, 212, 161, 1));
		background-attachment: fixed;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
	}
	.menu.open {right: 0;}
	.menu nav > ul li {transition: 1s cubic-bezier(0.16, 1, 0.3, 1); margin-bottom: 24px;}
	.menu nav > ul li:last-child {margin-bottom: 0;}
	.menu nav li a {color: #fff;}
	.menu.open > ul li a {
		transform: translateX(0px);
		opacity: 1;
		transition-delay: .2s;
	}
	.menu.open > ul li a:hover{opacity: 0.6;}
	.menu.open > ul li:nth-child(2) a {transition-delay: .35s;}
	.menu.open > ul li:nth-child(3) a {transition-delay: .4s;}
	.menu.open > ul li:nth-child(4) a {transition-delay: .45s;}
	.menu.open > ul li:nth-child(5) a {transition-delay: .5s;}

	.loop ul{width: 300vw;}
	.loop li{width: 100vw;}

	.class .swiper-slide .txt-area{padding: 15px;}
	.class .swiper-slide .txt-area h3{font-size: 1.8rem;}

	.campaign .hosoku{font-size: 1.2rem; padding-left: 12px; text-indent: -12px;}
	.hosoku_area{font-size: 1.2rem; padding-left: 12px; text-indent: -12px;}
}/* 650px */

@media screen and (max-width: 520px) {
	.menu { width: 100%; right: -100%;}
}/* 520px */

@media screen and (max-width: 480px) {
}/* 480px */

@media screen and (max-width: 400px) {
	.menu { width: 100vw; right: -100vw;}
	.nav_list li span{font-size: 1.4rem;}
	.FV{padding-bottom: 90px;}
	.message .pd{padding-top: 70px;}
	
}/* 400px */


@media screen and (max-width: 350px) {
	.ca_btn-area ul li a{font-size: 1.4rem;}
	.ca_btn-area ul li a::after{right: 8px;}
}/* 370px */