@charset "utf-8";
/* loading */
#loading{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #c6e7f9;
	background-image: url("../img/bg01.png");
	background-repeat: repeat;
	background-size: min(200%, 1200px) auto;
	background-position: 50% 0;
	z-index: 10000;
}
#loading .load{
	position: absolute;
	top:50%;
	left: calc(50% + 10px);
	transform: translate(-50%, -50%) rotate(5deg);
	transform-origin: 38% 50%;
	width:50%;
	max-width: 120px;
	animation: icon_Move 0.5s infinite linear;
}
@keyframes icon_Move {
    0% {transform: translate(-50%, -50%) rotate(5deg); }
	45% {transform: translate(-50%, -50%) rotate(-5deg); }
	50% {transform: translate(-50%, -50%) rotate(-5deg); }
    95% {transform: translate(-50%, -50%) rotate(5deg);}
    100% {transform: translate(-50%, -50%) rotate(5deg);}
}

/* h2*/
h2{
	position: relative;
	margin: 0 auto 15px auto;
	padding: 5px 0;
	width: calc(100% - 70px);
	max-width: 520px;
	z-index: 2001;
}
h2 img{
	position: relative;
	margin: 0 auto;
}

/* contents*/
.contents{opacity: 0;transform: translateY(5px);}
.contents.contDisp{animation: dispAnimation 0.6s  ease-in 0s 1 normal forwards;}
#btn_oubo.contents.contDisp{animation: dispAnimation 0.6s  ease-in 1s 1 normal forwards;}
@keyframes dispAnimation {
	0% {
		opacity: 0;
		transform: translateY(5px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
/* chara*/
.chara{opacity: 0;filter: blur(20px);}
.chara.contDisp{animation: dispAnimationC 0.8s  ease-in 0.2s 1 normal forwards;}
@keyframes dispAnimationC {
	0% {
		opacity: 0;
		filter: blur(20px);
	}
	100% {
		opacity: 1;
		filter: blur(0);
	}
}

/* cautionWrap */
.cautionWrap{
	position: relative;
	margin: 0 auto;
}
.cautionWrap .text{
	position: relative;
	margin: 3px auto 0 auto;
	padding-left: 1.1em;
	font-size: 85%;
	line-height: 1.4em;
}
.cautionWrap .text::before, .listWrap.dot .text .cautionWrap .text::before{
	position: absolute;
	top:0;
	left: 0;
	content: '※';
}

.listWrap, .shapesWrap{
	position: relative;
	margin: 0 auto;
}
.listWrap .text, .shapesWrap .text{
	position: relative;
	margin: 8px auto 0 auto;
	padding-left: 1.1em;
	line-height: 1.4em;
}
.listWrap .text::before, .shapesWrap .text::before{
	position: absolute;
	top:0;
	left: 0;
}
.listWrap.dot .text::before, .listWrap.dot .text .shapesWrap .text .listWrap.dot .text::before{content: '・';}
.listWrap.dot .text .shapesWrap .text::before{content: '\025c7';}
.listWrap.nums .text:nth-child(1)::before{content: '\02460';}
.listWrap.nums .text:nth-child(2)::before{content: '\02461';}
.listWrap.nums .text:nth-child(3)::before{content: '\02462';}
.listWrap.nums .text:nth-child(4)::before{content: '\02463';}
.listWrap.nums .text:nth-child(5)::before{content: '\02464';}

.bg01, .bg02, .bg03, .bg04{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}
.bg01, .bg03{
	background-size: auto auto;
	background-color: #fffce2;
	background-image: repeating-linear-gradient(135deg, transparent, transparent 9px, #fff9c9 9px, #fff9c9 16px );
}
.bg02, .bg04{
	background-repeat: repeat;
	background-size: min(120%, 1200px) auto;
	background-position: 50% 0;
}
.bg02, .bg04{
	background-color: #c6e7f9;
	background-image: url("../img/bg01.png");
}
.bg04{
	background-color: #f6c1d1;
	background-size: min(120%, 1169px) auto;
	background-image: url("../img/bg02.png");
}
.bg02, .bg03, .bg04, footer{
	clip-path: shape(
    from 0 25px,
    curve to 35% 20px with 12% -5px,
    curve to 70% 10px with 54% 35px,
    curve to 100% 8px with 85% -5px,
    line to 100% 100%,
    line to 0 100%,
    close
  );
}

header{
	position: relative;
	margin: 0 auto;
	display: block;
}
#keyvisualWrap{position: relative;width: 100%;margin: 0 auto;}
#keyvisual{
	position: relative;
	margin: 0 auto;
	height: 0;
	width: 100%;
	background-image: url("../img/main.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 0;
	padding-top: 170.78125%;
}

/* kikan */
#kikan{
	position: relative;
	margin:0 auto;
	background-color: #008bc8;
	padding: 5px 0 
}
#kikan .kikanTxt, #kikan .copyright{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}
#kikan .kikanTxt img{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
	max-width: 629px;
	transform: translateY(-8px);
}
#kikan .copyright img{
	position: relative;
	margin: 0 auto 1px auto;
	width: 45%;
	max-width: 240px;
}

/* product */
#product{
	position: relative;
	margin: 0 auto;
	padding:20px 0 50px 0;
	text-align: center;
}
#product .lead{
	position: relative;
	margin: 0 auto;
}
#product .lead span{
	font-weight: 900;
	color: #008bc8;
	background-color: #fff000;
	display: inline-block;
	padding: 0 0 0 5px;
	font-size: 140%;
}
#product .article{
	position: relative;
	margin: 45px auto 0 auto;
	width: calc(100% - 80px);
	padding: 35px 20px 25px 20px;
	background-color: #ffffff;
	box-shadow: -4px 4px 0px 0px #008bc8;
	border-radius: 20px;
	z-index: 3000;
}
#product .article .Img{
	position: relative;
	margin: 0 auto 15px auto;
	width: calc(100% - 20px);
}
#product .article p{line-height: 1.2em;}
#product .article p span{font-size: 80%;}
#product .button{
	position: relative;
	margin: 20px auto 0 auto;
	padding: 10px 0;
	line-height: 1em;
	display: block;
	width: calc(100% - 20px);
	max-width: 490px;
	border-radius: 100px;
	background-color: #008bc8;
	color: #ffffff;
	background-image: url("../img/arrow.png");
	background-repeat: no-repeat;
	background-size: auto calc(100% - 10px);
	background-position: calc(100% - 6px) 50%;
	transition: all .4s ease-out;
}
#product .button:hover{background-color: #00853e;color: #ffffff;}
#product #icon01{
	position: absolute;
	top: -35px;
	left: -10px;
	width: 34%;
	max-width: 83px;
}
#product #icon02{
	position: absolute;
	top: calc(100% - 12px);
	right: -19px;
	width: 49%;
	max-width: 230px;
}
#product #icon03{display: none;}

/* present */
#present{
	position: relative;
	margin: -30px auto 0 auto;
	padding: 50px 0 0 0;
}
#present .preWrap{
	position: relative;
	margin: 0 auto;
	padding-bottom: 70px;
	z-index: 4000;
}
#present ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	gap: 10px 0;
}
#present ul li{
	position: relative;
	margin: 0;
	width: 100%;
}
#present ul li .Img{
	position: relative;
	margin: 0 auto;
}
#present #icon01-1{
	position: absolute;
	bottom:0;
	left: 15px;
	width: 34%;
	max-width: 83px;
}

/* howto */
#howto{
	position: relative;
	margin: -40px auto 0 auto;
	padding:50px 0 60px 0;
}
#howto #icon03-1{
	position: absolute;
	top:-20px;
	right: -12px;
	width: 50%;
	max-width: 140px;
}
#howto #icon04{
	position: absolute;
	top:calc(100% - 20px);
	right: 3px;
	width: 35%;
	max-width: 120px;
}
#howto ul{
	position: relative;
	margin: -20px auto 0 auto;
	width: calc(100% - 30px);
	gap: 10px 0;
	z-index: 2007;
}
#howto ul li{
	position: relative;
	margin: 0;
	width: 100%;
}
#howto ul li .no{
	position: relative;
	margin: 0;
	width: 25%;
	max-width: 120px;
	z-index: 10;
}
#howto ul li .contWrap{
	position: relative;
	margin: 0 auto;
	background-color: #ffffff;
	box-shadow: -4px 4px 0px 0px #008bc8;
	border-radius: 10px;
	padding: 20px;
	gap:0 10px;
}
#howto ul li:nth-child(2) .contWrap{padding: 10px 20px;}
#howto ul li .contWrap .Img{
	position: relative;
	margin: 0;
	width: 30%;
}
#howto ul li .contWrap .Txt{
	position: relative;
	margin: 0;
	width: calc(70% - 10px);
	line-height: 1.7em;
	text-align:justify;
}
#howto ul li .cautionWrap{
	position: relative;
	margin: 8px auto 0 auto;
	color: #e84f4a;
}

/* collab */
#collab{
	position: relative;
	margin: -30px auto 0 auto;
	padding: 50px 0 70px 0;
}
#collab h2{
	width: 100%;
	max-width: 600px;
	z-index: 1002;
}
#collab .collabWrap{
	position: relative;
	margin: -50px auto 0 auto;
	width: calc(100% - 60px);
	padding: 55px 10px 30px 10px;
	background-color: #ffffff;
	box-shadow: -4px 4px 0px 0px #e84f4a;
	border-radius: 20px;
	text-align: center;
	z-index: 1001;
}
#collab .collabWrap ul{
	position: relative;
	margin: 20px auto 0 auto;
	width: 65%;
	max-width: 280px;
	gap: 15px 100px;
}
#collab .collabWrap ul li{
	position: relative;
	margin: 0;
	width: 100%;
	font-size: 90%;
}
#collab .card{
	position: relative;
	margin: 20px auto 0 auto;
	border: dotted 3px #e84f4a;
	border-radius: 10px;
	padding: 30px 15px;
}
#collab #icon01-2{display: none;}
#collab #icon05{
	position: absolute;
	top:80%;
	right: -30px;
	width: 40%;
	max-width: 140px;
	z-index: 2008;
}

/* terms */
#terms{
	position: relative;
	margin: -30px auto 0 auto;
	padding: 50px 0 70px 0;
}
#terms #icon06{
	position: absolute;
	top: -50px;
	left: 3px;
	width: 45%;
	max-width: 140px;
	z-index: 2009;
}
#terms .termsWrap{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 60px);
	padding: 35px 0 25px 20px;
	background-color: #ffffff;
	box-shadow: -4px 4px 0px 0px #008bc8;
	border-radius: 20px;
	z-index: 2010;
}
#terms .termsWrap .scrollArea{
	position: relative;
	margin: 0;
	padding-right: 15px;
	width: calc(100% - 10px);
	height: 500px;
	overflow: hidden;
	transform: translateX(-5px);
}
#terms h3{
	position: relative;
	margin: 0 auto;
	color: #69a83e;
	font-size: 120%;
	text-align: center;
	font-weight: 700;
}
#terms h4{
	position: relative;
	width:calc(100% - 30px);
	margin: 20px auto 10px auto;
	padding: 3px 15px;
	font-weight: 700;
	background-color: #69a83e;
	border-radius: 5px;
	font-size: 110%;
	color: #ffffff;
}
#terms .termsWrap .lead{
	position: relative;
	margin:15px auto 0 auto;
}
#terms .termsWrap .cautionWrap .text{margin: 8px auto 0 auto;line-height: 1.4em;font-size: 92%;}
#terms .prelist{
	position: relative;
	margin: 15px auto 0 auto;
	gap: 0 1em;
}
#terms .prelist dt{
	position: relative;
	margin: 0;
	width: 2em;
}
#terms .prelist dd{
	position: relative;
	margin: 0;
	width: calc(100% - 3em);
}

/* footer */
footer{
	position: relative;
	margin:-30px auto 0 auto;
	padding: 50px 0 30px 0;
	background-color: #ffffff;
}
footer .Img{
	position: relative;
	margin: 0 auto;
	width: 40%;
	max-width: 104px;
}

#btn_oubo{
	position: fixed;
	width: 30%;
	max-width: 180px;
	bottom: 90px;
	right: -190px;
	z-index: 10000;
}
#btn_oubo img:hover{transform: scale(1.05, 1.05);transition: all .6s ease-out;}
#btn_oubo.disp{animation: btnIn .4s ease-in .4s 1 normal forwards;}
@keyframes btnIn {
	0%{right: -190px;}
	100% { right: 0;}
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* h2*/
	h2{
		margin: 0 auto 40px auto;
		padding: 12px 0;
		width: 500px
	}

	#keyvisualWrap{max-width: 1200px;}
	#keyvisual{
		background-image: url("../img/main_pc.jpg");
		padding-top: 50%;
		background-size: cover;
	}

	.listWrap .text, .shapesWrap .text{margin: 10px auto 0 auto;}
	
	.bg01, .bg03{background-image: repeating-linear-gradient(135deg, transparent, transparent 12px, #fff9c9 12px, #fff9c9 24px );}
	.bg02, .bg03, .bg04, footer{
		clip-path: shape(
		from 0 55px,
		curve to 35% 40px with 12% -15px,
		curve to 60% 50px with 54% 85px,
		curve to 100% 35px with 85% -25px,
		line to 100% 100%,
		line to 0 100%,
		close
	  );
	}

	/* kikan */
	#kikan{padding: 10px 0;}
	#kikan::after{
		position: absolute;
		top: -15px;
		left: 0;
		width: 100%;
		height: 15px;
		content: '';
		background-image: url("../img/bg_kikan.png");
		background-position: 0 0;
		background-repeat: repeat-x;
		background-size: auto auto;
	}
	#kikan .kikanTxt img{transform: translateY(0);}
	#kikan .copyright img{
		margin: -10px 0 0 auto;
	}

	/* product */
	#product{padding:60px 0 120px 0;}
	#product .lead{font-size: min(2.7vw, .24rem);line-height: 1.6em;}
	#product .lead span{font-size: 120%;}
	#product .article{
		margin: 40px auto 0 auto;
		max-width: 920px;
		padding: 40px 20px 30px 20px;
		border-radius: 20px;
		box-shadow: -5px 5px 0px 0px #008bc8;
	}
	#product .article .Img{
		margin: 0 auto 25px auto;
		max-width: 500px;
		width: 70%;
	}
	#product .article p{font-size: .24rem; line-height: 1.2em;}
	#product .article p span{font-size: 76%;}
	#product .button{
		margin: 25px auto 0 auto;
		padding: 13px 0;
		line-height: 1em;
		font-size: .18rem;
		background-size: auto calc(100% - 13px);
		background-position: calc(100% - 10px) 50%;
	}
	#product #icon01{
		top: calc(100% - 50px);
		left: calc(100% - 60px);
		width: 20%;
		max-width: 100px;
	}
	#product #icon02{
		top: calc(100% + 50px);
		right: calc(50% + 20px);
		width: 40%;
		max-width: 260px;
	}
	#product #icon03{
		position: absolute;
		top: -50px;
		left: -50px;
		width: 34%;
		max-width: 165px;
		display: block;
	}

	/* present */
	#present{
		margin: -80px auto 0 auto;
		padding: 90px 0 50px 0;
	}
	#present ul{
		max-width: 960px;
		margin: -20px auto 0 auto;
		gap: 0 50px;
	}
	#present ul li{width: calc(50% - 25px);}

	#present ul li .caution{
		font-size: 68%;
		padding-left: 50px;
	}
	#present #icon01-1{
		bottom:-20px;
		left: calc(50% - 580px);
		width: 34%;
		max-width: 156px;
	}

	/* howto */
	#howto{
		margin: -80px auto 0 auto;
		padding: 90px 0 100px 0;
	}
	#howto #icon03-1{display: none;}
	#howto #icon04{
		top:calc(100% - 7.5em);
		right: -45px;
		width: 100%;
		max-width: 130px;
		transform: rotate(8deg);
	}
	#howto ul{
		margin: -25px auto 0 auto;
		max-width: 960px;
		gap: 0 20px;
	}
	#howto ul li{width: calc(25% - 15px);}
	#howto ul li .no{
		width: 45%;
		max-width: 120px;
	}
	#howto ul li .contWrap{
		box-shadow: -5px 5px 0px 0px #008bc8;
		border-radius: 10px;
		padding: 0 10px 30px 10px;
		gap:0;
	}
	#howto ul li:nth-child(2) .contWrap{padding: 0 10px 30px 10px;}
	#howto ul li .contWrap .Img{
		width: 80%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 220px;
	}
	#howto ul li .contWrap .Img img{max-height: 100%;}
	#howto ul li:nth-child(1) .contWrap .Img img{width: 80%;}
	#howto ul li:nth-child(2) .contWrap .Img img{width: 80%;}
	#howto ul li:nth-child(3) .contWrap .Img img{width: 90%;}
	#howto ul li:nth-child(4) .contWrap .Img img{width: 80%;}
	#howto ul li .contWrap .Txt{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align:center;
		font-size: 76%;
		height: 10em;
	}
	#howto ul li .cautionWrap{
		margin: 10px auto 0 auto;
		font-size: 74%;
	}
	
	/* collab */
	#collab{
		margin: -80px auto 0 auto;
		padding: 90px 0 120px 0;
	}
	#collab h2{max-width: 700px;}
	#collab .collabWrap{
		margin: -100px auto 0 auto;
		max-width: 940px;
		padding: 80px 10px 60px 10px;
		box-shadow: -5px 5px 0px 0px #e84f4a;
	}
	#collab .collabWrap ul{
		width: calc(100% - 100px);
		max-width: 760px;
		gap: 0 100px;
	}
	#collab .collabWrap ul li{
		width: calc(50% - 50px);
		font-size: 90%;
	}
	#collab .card{
		margin: 30px auto 0 auto;
		border: dotted 4px #e84f4a;
		width: calc(100% - 180px);
		max-width: 715px;
		border-radius: 20px;
		padding: 40px 50px;
	}
	#collab .card .Img{
		position: relative;
		margin: 0 auto;
		width: calc(100% - 50px);
		max-width: 672px;
	}
	#collab #icon01-2{
		position: absolute;
		top:-35px;
		left: -70px;
		width: 40%;
		max-width: 160px;
		display: block;
	}
	#collab #icon05{
		top:42%;
		right: -50px;
		width: 40%;
		max-width: 190px;
	}

	/* terms */
	#terms{
		margin: -80px auto 0 auto;
		padding: 100px 0 80px 0;
	}
	#terms h2{margin: 0 auto 30px auto;}
	#terms #icon06{
	top: 0;
	left: calc(50% - 230px);
	max-width: 190px;
}
	#terms .termsWrap{
		width: calc(100% - 140px);
		max-width: 860px;
		border-radius: 20px;
		padding: 50px 40px 30px 60px;
		box-shadow: -5px 5px 0px 0px #008bc8;
	}
	#terms .termsWrap .scrollArea{height: 600px;padding-right: 55px;}
	#terms h3{font-size: .24rem;line-height: 1.4em;}
	#terms h4{
		margin: 35px auto 20px auto;
		font-size: 115%;
	}
	#terms .termsWrap .lead{margin:40px auto 0 auto;}
	#terms .termsWrap .cautionWrap{margin: 5px auto 10px auto;}
	#terms .termsWrap .cautionWrap .text{margin: 3px auto;}

	/* footer */
	footer{padding: 80px 0 20px 0;}

	#btn_oubo{
		max-width: 140px;
		bottom: 80px;
		right: -150px;
	}
}

/* ----- pc ----- */
@media screen and (min-width: 1201px) {
	header::before, header::after{
		position: absolute;
		top:0;
		width: calc((100% - 1200px) / 2);
		height: 100%;
		background-repeat: repeat-x;
		background-size: auto 100%;
		content: '';
		display: block;
	}
	header::before{
		left: 0;
		background-image: url("../img/bg_left.png");
		background-position: 0 0;
	}
	header::after{
		left: calc(50% + 600px);
		background-image: url("../img/bg_right.png");
		background-position: 100% 0;
	}
	#keyvisual{background-size: auto 100%;}
}
@media screen and (min-width: 641px) and  (max-width: 1201px) {
	#kikan .copyright img{
		margin: 5px 0 0 auto;
		transform: translateX(-5px);
	}
}
@media screen and (min-width: 641px) and  (max-width: 1060px) {
	#collab #icon05{
		top:45%;
		right: -20px;
	}
}
@media screen and (min-width: 641px) and  (max-width: 800px) {
	#collab #icon05{
		top:47%;
		right: -20px;
		max-width: 150px;
	}
	#collab #icon01-2{display: none;}
	#howto #icon04{
		top:calc(100% - 9.5em);
		right: -10px;
		max-width: 120px;
	}
}