@charset "utf-8";
#header { 
	position: fixed;
	width: 100%;
	background-color: rgba(255,255,255,0.00); 
	box-sizing: border-box;
	z-index: 999;
}
#header h1 a {
	background: url("../image/logo_w.svg") no-repeat center center;
}
#header.sticky_head h1 a {
	background: url(../image/logo.svg) no-repeat center center;
}

/*==============================================================
  TOPPAG
==============================================================*/
#toppage .mainimg {
	padding-top: 150px;
	background: url("../../image/top/mainimg.jpg") no-repeat center center;
	background-size: cover;
	transition: all .5s;
}
#toppage .mainimg .catch { text-align: center;}
#toppage .mainimg .catch img { width: 80%; height: auto; max-width:739px;}
#toppage .mainimg .organic { position: relative; margin: auto; max-width: 1030px;}
#toppage .mainimg .organic img {
	position: absolute; bottom:-100px; right: 0;
	width:24%; height:auto;
}
#toppage h3 {
	position: relative;
	margin: auto; padding-top:20px; height: 69px;
	font-size: 218.8%;
	color: #fff;
	text-align: center;
	background: url("../../image/top/ribbon_c.png");
}
#toppage h3::before,
#toppage h3::after {
	display: block; clear: both; content:"";
	width: 96px; height: 69px;
	position: absolute; top: 0;
}
#toppage h3::before {
	left: -70px;
	background: url("../../image/top/ribbon_l.png") no-repeat;
}
#toppage h3::after {
	right: -70px;
	background: url("../../image/top/ribbon_r.png") no-repeat;
}
#toppage .btn {
	margin:25px auto;
	width: 80%;
	max-width: 455px;
	background:#59C3E1;
	border-radius:8px;
	overflow: hidden;
}
#toppage .btn a {
	display: block;
	padding:10px 20px;
	font-family: 'Kosugi Maru', sans-serif;
	font-weight:bold;
	text-align: center;
	color: #fff;
	font-size:156.3%;
	text-decoration: none;
	background: url("../image/arrow.svg") no-repeat 95% center;
	background-size: auto 60%;
	transition: all .5s;
}
#toppage .btn a:hover { background-color: #ED798F;}

/* ABOUT ******************************************************/
#toppage .about { padding: 65px 0 30px; background:#fff;}
#toppage .about .main_come {
	position: relative;
	margin:0 auto;
	width: 780px;
	font-size: 131.3%;
	text-align: center;
	line-height: 260%;
}
#toppage .about .main_come::after {
	display: block; clear: both; content:"";
	position: absolute; top:-30px; left:-100px;
	width: 215px; height:133px;
	background: url("../../image/top/ornament_01.png") no-repeat;
}
#toppage .about ul.tokucyo { position: relative; margin:50px auto; width: 780px;}
#toppage .about ul.tokucyo::after { display: block; clear: both; content:"";}
#toppage .about ul.tokucyo::before {
	display: block; clear: both; content:"";
	position: absolute; bottom:-153px; left:-160px;
	width: 248px; height: 420px;
	background:url("../../image/top/ike.png");
}
#toppage .about ul.tokucyo li { float: left;}
#toppage .about ul.tokucyo li+li { margin-left: 1%;}



/* SET fEE ****************************************************/
#toppage .set_fee { padding: 65px 0 30px; background:#EFF6FA;}
#toppage .set_fee h2 { position: relative; max-width: 1000px; margin: auto;  padding-bottom:50px;}
#toppage .set_fee h2 b {
	display: block;
	font-family: 'Kosugi Maru', sans-serif;
	font-size: 337.5%;
	text-align: center;
	color: #ED798F;
	line-height:130%;
}
#toppage .set_fee h2 span {
	display: block;
	padding: 20px 0;
	font-size: 143.8%;
	color: #fff;
	text-align: center;
	background: url("../../image/top/ribbon.png") no-repeat center center;
}
#toppage .set_fee h2::before {
	display: block; clear: both; content:"";
	position: absolute; top:-135px; right:45px;
	width: 147px; height: 161px;
	background:url("../../image/top/ornament_02.png");
}
#toppage .set_fee .come { clear: both; padding: 30px 0 70px;}


/* MARUAEAI ***************************************************/
#toppage .maruarai { padding: 65px 0 40px; background: #fff;}
#toppage .maruarai h2 {
	font-family: 'Kosugi Maru', sans-serif;
	font-size: 337.5%;
	text-align: center;
	color: #54C3F1;
	line-height:130%;
}
#toppage .maruarai h2 span { position: relative;}
#toppage .maruarai h2 span::before,
#toppage .maruarai h2 span::after {
	display: block; clear: both; content:"";
	position: absolute;
}
#toppage .maruarai h2 span::before {
	top:-130px; left:-200px;
	width:220px; height:179px;
	background: url("../../image/top/ornament_03.png");
}
#toppage .maruarai h2 span::after {
	bottom:-80px; right: -40px;
	width: 71px; height: 67px;
	background: url("../../image/top/ornament_04.png");
}
#toppage .maruarai .come {
	padding: 40px 0;
	font-size: 131.3%;
	text-align: center;
	line-height: 260%;
}


/* OBI ********************************************************/
#toppage .obi { background:#ED798F;}
#toppage .obi b { 
	position: relative; display: block;
	margin: auto; padding: 30px 0 30px 300px; max-width:1000px;
	font-family: 'Kosugi Maru', sans-serif;
	font-size: 337.5%;
	line-height:130%;
	color: #fff;
	box-sizing: border-box;
}
#toppage .obi b::before,
#toppage .obi b::after {
	display: block; clear: both; content:"";
	position: absolute;
}
#toppage .obi b::before {
	left:-120px; top: 0; bottom: 0;
	margin: auto; width: 370px; height: 230px;
	border-radius: 100px;
	background:url("../../image/top/point_tit.jpg");
}
#toppage .obi b::after {
	right:40px; bottom:-70px;
	width: 87px; height: 145px;
	background:url("../../image/top/ornament_05.png");
}


/* POINT ******************************************************/
#toppage .point { margin: auto; max-width: 1000px; padding: 65px 0 130px; }
#toppage .point h3 { margin-bottom:80px; width:600px;}
#toppage .point ul { 
	position: relative;
	float: left;
	margin: 1%;
	padding-top: 60px;
	width:31.3%;
	font-family: 'Kosugi Maru', sans-serif;
	font-size: 156.3%;
	font-weight: bold;
	color: #ED798F;
	line-height: 150%;
	text-align: center;
	background: #FFF;
	border-radius: 15px;
	border: 5px dotted #59C3E1;
}
#toppage .point ul::before {
	display: block; clear: both; content:"";
	position: absolute; top:-40px; left: 0; right: 0;
	margin: auto; width: 76px; height: 76px;
}
#toppage .point ul.p01::before {
	background: url("../../image/top/point_01n.png") no-repeat;
}
#toppage .point ul.p02::before {
	background: url("../../image/top/point_02n.png") no-repeat;
}
#toppage .point ul.p03::before {
	background: url("../../image/top/point_03n.png") no-repeat;
}
#toppage .point .come { 
	clear: both;
	padding: 40px 0;
	font-size: 131.3%;
	line-height: 260%;
	text-align: center;
}
#toppage .point .before_after { text-align: center;}


/* HAPPY ******************************************************/
#toppage .happy { position: relative; padding:100px 0 65px; background:#EFF6FA;}
#toppage .happy h3 {
	position: absolute; top: -30px; left: 0; right: 0;
	width:500px;
}
#toppage .happy .happy_list { margin: auto; max-width: 1110px; overflow: hidden;}
#toppage .happy dl { float:left; margin:0 2%; width:16%;}
#toppage .happy dt {}
#toppage .happy dt img { width: 100%; height: auto; border-radius: 100%;}
#toppage .happy dd { text-align: center;}


/* FLOW *******************************************************/
#toppage .flow { padding:50px 2%; background: #fff; overflow: hidden;}
#toppage .flow .come { position: relative; margin: auto; max-width: 1123px; z-index: 0;}
#toppage .flow .come::before,
#toppage .flow .come::after {
	display: block; clear: both; content:"";
	position: absolute;
}
#toppage .flow .come::before {
	top: 0; right: -400px;
	width: 905px; height: 606px;
	background: url("../../image/top/flow_photo.jpg");
	border-radius:255px;
	z-index: -1;
 }
#toppage .flow .come::after {
	position: absolute; bottom: -50px; right:50px;
	width: 74px; height: 97px;
	background: url("../../image/top/ornament_06.png");
	border-radius:255px;
	z-index: 1;
 }
#toppage .flow h4 {
	margin: 40px 0;
	font-family: 'Kosugi Maru', sans-serif;
	font-size: 337.5%;
	font-weight: bold;
	color: #54C3F1;
    text-shadow:
           2px 2px 0px #fff, -2px -2px 0px #fff,
          -2px 2px 0px #fff,  2px -2px 0px #fff,
           2px 0px 0px #fff, -2px  0px 0px #fff,
           0px 2px 0px #fff,  0px -2px 0px #fff;
	line-height: 170%;
}
#toppage .flow .comment { font-size: 131.3%; line-height: 260%;}
#toppage .flow .btn { margin:40px 0 60px; background:#54C3F1; }
#toppage .flow .flow_img { clear: both; margin: auto; max-width: 1123px; height:auto;}
#toppage .flow .flow_img img { width: 100%; height: auto;}


/* VOICE ******************************************************/
#toppage .voice { padding:65px 2%;}
#toppage .voice h4 {
	position: relative;
	margin: auto;
	padding: 20px 0 0;
	max-width: 800px;
	font-size: 175%;
	text-align: center;
	font-weight: 900;
	letter-spacing: 4px;
	color: #ED798F;
}
#toppage .voice h4::after,
#toppage .voice h4::before {
	display: block; clear: both; content:"";
	position: absolute;
	background-repeat: no-repeat !important;
}
#toppage .voice h4::after {
	width: 76px; height:79px;
	top:-20px; left: 0;
	background: url("../../image/top/ornament_07.png");
}
#toppage .voice h4::before {
	width: 125px; height:98px;
	top:-30px; right: 0;
	background: url("../../image/top/ornament_08.png");
}
#toppage .voice ul { margin:40px auto; max-width: 1000px; overflow: hidden;}
#toppage .voice ul li { float: left; width: 24.25%;}
#toppage .voice ul li+li { margin-left: 1%;}
#toppage .voice ul li img { 
	width: 100%; height:200px;
	object-fit: cover;
}