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


/*********************************************
 
	         　共通
 
*********************************************/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.contents_wrapper{
	max-width: 990px;
	width: 100%;
	margin: 0 auto;
  /*padding-top: 30px;*/
	line-height: 1.8;	
}
.contents_inner{
	padding: 5%;
}


/* 整列部分 */
ul.list{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

ul.list img{width: 100%}

ul.list li{margin-bottom: 2%;text-align: center;}




/* hover image
--------------------------------*/
a:hover img {
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}

/* font
--------------------------------*/
.bold { font-weight:bold; }
.red {  color:#af0000; }
.white{color: #fff;}


/* bg
--------------------------------*/
.bg2{
	/*background-image: url("../images/bg2.jpg");
	background-repeat: repeat;*/
	background-color: #ededed;
	padding:0 0 50px;
}
	
div.more{
	text-align: center;
	margin-bottom: 50px;
}

div.more img{
	max-width: 668px;
	width: 100%;
}



/*共通パーツ*/
#summeritem *{
	line-height: 1.7;
	font-family: "Noto Sans JP", sans-serif;
}
#summeritem a{
	text-decoration: none;
}
#summeritem .summeritem_wrap img{
	width: 100%;
}
.content-wrap{
	max-width: 1145px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
h2.content_ttl{
	max-width: 660px;
	width: 100%;
	margin: 0 auto 60px;
	border: 0px;
	background-color: #dcdcdc00;
}
.comment_img{
	max-width: 860px;
	width: 100%;
	margin: 0 auto 60px;
}

/*波*/
#waterwave-canvas_blue {
	width: 100%;
	height: 160px;
	display: block;
	background-color: #93E5EE;
}
#waterwave-canvas_blue2 {
	width: 100%;
	height: 160px;
	display: block;
	background-color: #93E5EE;
}
#waterwave-canvas_blue3 {
	width: 100%;
	height: 160px;
	display: block;
	background-color: #93E5EE;
}
#waterwave-canvas_yellow {
	width: 100%;
	height: 160px;
	display: block;
	background-color: #f5ef7f;
}
#waterwave-canvas_yellow2 {
	width: 100%;
	height: 160px;
	display: block;
	background-color: #f5ef7f;
}
#waterwave-canvas_white{
	width: 100%;
	height: 160px;
	display: block;
	background-color: #FFF;
}
#summeritem .sp_only{
	display: none;
}
#summeritem .pc_only{
	display: block;
}

@media screen and (max-width:1200px){
	.content-wrap{
		padding: 0 20px;
	}
}
@media screen and (max-width:768px){
	#summeritem .sp_only{
		display: block;
	}
	#summeritem .pc_only{
		display: none;
	}
	#waterwave-canvas_blue {
		width: 100%;
		height: 100px;
		display: block;
		background-color: #93E5EE;
	}
	#waterwave-canvas_blue2 {
		width: 100%;
		height: 100px;
		display: block;
		background-color: #93E5EE;
	}
	#waterwave-canvas_blue3 {
		width: 100%;
		height: 100px;
		display: block;
		background-color: #93E5EE;
	}
	#waterwave-canvas_yellow {
		width: 100%;
		height: 100px;
		display: block;
		background-color: #f5ef7f;
	}
	#waterwave-canvas_yellow2 {
		width: 100%;
		height: 100px;
		display: block;
		background-color: #f5ef7f;
	}
	#waterwave-canvas_white{
		width: 100%;
		height: 100px;
		display: block;
		background-color: #FFF;
	}
}

/*メインコンテンツ*/
.mv{
	background-color: #95E6EE;
}


.navigation{
	background-color: #95E6EE;
	padding: 60px 0;
}
.navigation_ttl{
	max-width: 803px;
	width: 100%;
	margin: 0 auto 60px;
}
.navgation_list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap:40px;
}
.navgation_list li{
	max-width: 315px;
	width: 100%;
}
@media screen and (max-width:768px){
	.navigation{
		background-color: #95E6EE;
		padding: 40px 0;
	}
	.navgation_list{
		gap:20px;
	}
	.navgation_list li{
		max-width: 315px;
		width: calc(100% / 2 - 20px);
	}
}

/*コンテンツ*/
.content01{
	padding: 60px 0;
}
.content01_box{
	background-color: #FEF99D;
	padding: 50px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	border-radius: 50px;
}
.content01_img{
	width: 40%;
}
.content01_info{
	width: 60%;
}
.content01_ttl{
	font-size: 36px;
	font-weight: bold;
	color: #383838;
	margin-bottom: 30px;
	border-bottom: 1px solid #383838;
	text-align: center;
}
.content01_text{
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: #383838;
	margin-bottom: 30px;
}
.content01_btn{
	background-color: #1DB8DD;
	padding: 15px 0;
	font-size: 18px;
	color: #FFF;
	text-align: center;
	max-width: 173px;
	width: 100%;
	border-radius: 999px;
	margin-left: auto;
	margin-bottom: 30px;
}
@media screen and (max-width:768px){
	.content01{
		padding: 40px 0;
	}
	.content01_box{
		display: block;
		padding: 30px;
	}
	.content01_img{
		width: 80%;
		margin: 0 auto;
	}
	.content01_info{
		width: 100%;
	}
	.content01_ttl{
		font-size: 30px;
	}
	.content01_text{
		font-size: 16px;
	}
	.content01_btn{
		margin: 0 auto;
	}
}
@media screen and (max-width:520px){
	.content01_ttl{
		font-size: 26px;
	}
}


/*カラーアイテム*/
.beige,
.purple,
.pink{
	margin-bottom: 100px;
}
.coloritem{
	background-color: #93E5EE;
	padding-bottom: 100px;
}
.color_ttl{
	max-width: 350px;
	width: 100%;
	margin: 0 auto 40px;
}
.color_list,
.plusitem_list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap:30px;
	margin-bottom: 60px;
}
.plusitem_list{
	margin-bottom: 0;
}
.color_list li,
.plusitem_list li{
	width: calc(100% / 3 - 30px);
	background-color: #FFF;
	border-radius: 30px;
	padding: 20px;
}
#summeritem .color_list li{
	text-align: center;
}
#summeritem .color_list li img{
	max-width: 240px;
	margin: 0 auto;
}
.color_btn,
.plusitem_btn{
	max-width: 240px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 24px;
	color: #383838;
	padding: 10px 0;
	border-radius: 999px;
}
.beige .color_btn{
	background-color: #FFE493;
}
.purple .color_btn{
	background-color: #E1D8FF;
}
.pink .color_btn{
	background-color: #FFD4E5;
}
.plusitem_btn{
	background-color: #B4EFFF;
}
.color_otherbtn{
	background-color: #00B1B9;
	max-width: 400px;
	width: 100%;
	margin-left: auto;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	padding: 10px 0;
	border-radius: 999px;
}

.plusitem_ttl{
	max-width: 627px;
	width: 100%;
	margin: 0 auto 60px;
}

@media screen and (max-width:1200px){
	
}
@media screen and (max-width:1024px){
	
}
@media screen and (max-width:768px){
	.beige,
	.purple,
	.pink{
		margin-bottom: 60px;
	}
	.coloritem{
		background-color: #93E5EE;
		padding-bottom: 60px;
	}
	.color_list, .plusitem_list{
		justify-content: center;
		gap:15px;
		margin-bottom: 40px;
	}
	.color_list li, .plusitem_list li {
		width: calc(100% / 2 - 15px);
		background-color: #FFF;
		border-radius: 30px;
		padding: 20px;
	}
	.color_btn, .plusitem_btn{
		font-size: 20px;
	}
	.color_otherbtn{
		margin: 0 auto;
		font-size: 20px;
	}
	.color_ttl{
		max-width: 350px;
		width: 50%;
		margin: 0 auto 40px;
	}
	
}
@media screen and (max-width:520px){
	.color_btn, .plusitem_btn{
		font-size: 16px;
	}
	.coloritem{
		padding-bottom: 30px;
	}
}

/*コンテンツ02~*/
.content02,
.content03,
.content04,
.content05{
	padding: 60px 0;
}
.bg_blue{
	background-color: #93E5EE;
}
.bg_yellow{
	background-color: #f5ef7f;
}



.product_box{
	max-width: 1150px;
	width: 100%;
	background-color: #FFF;
	border-radius: 25px;
	margin: 0 auto 80px;
	padding: 60px;
	text-align: center;
}
.product_box img{
	max-width: 700px;
	width: 100%;
	margin: 0 auto 30px;
}
.product_text{
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #383838;
	margin-bottom: 30px;
}
.product_btn{
	max-width: 245px;
	width: 100%;
	background-color: #1DB8DD;
	border-radius: 999px;
	font-size: 20px;
	text-align: center;
	color: #FFF;
	margin: 0 auto;
	padding: 10px 0;
}
.moreitem{
	font-size: 40px;
	color: #FFF;
	text-align: center;
	margin-bottom: 60px;
}
.product_list{
	max-width: 1150px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap:40px;
}
.product_list .product_listitem{
	width: calc(100% / 3);
	background-color: #FFF;
	border-radius: 25px;
	padding: 25px;
}
.product_list .product_listitem img{
	margin-bottom: 20px;
}
@media screen and (max-width:768px){
	.content02, .content03, .content04, .content05{
		padding: 40px 0;
	}
	.product_box{
		padding: 40px;
	}
	.product_list{
		flex-wrap: wrap;
		justify-content: center;
		gap:20px;
	}
	.product_list .product_listitem{
		width: calc(100% / 2 - 20px);
		padding: 20px;
		
	}
	.product_text{
		font-size: 18px;
	}
	.product_btn{
		font-size: 18px;
	}
}
@media screen and (max-width:520px){
	.content02, .content03, .content04, .content05{
		padding: 20px 0;	
	}
	.product_text{
		font-size: 16px;
	}
	.product_btn{
		font-size: 16px;
	}
}