@charset "UTF-8" ;
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	font-size: 20px;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-: hidden;
	color: #000;
	background: #fff;
	width:98%;
	margin: 0 ;
	padding: 0 ;
	width:100%;
	height:100%;
	min-width:1024px;
}

a{
	color: #0066ff;
	text-decoration: none;
}
a:hover, .active{
  text-decoration: underline;
}

a:active, a:focus,input:active, input:focus{outline:0;}

#wrap {
	width:100%;
	overflow:hidden;
}

/* ヘッダー
------------------------------------------------------------*/
header{
	position: relative;
    overflow:hidden;
    width:100%;
	margin: 0 auto;
}

header h1{
	margin: 30px 10px 30px;
}

header h1 img{
    width:30%;
}

#slideshow img{
	width: 100%;
}

.illust{
	text-align: center;
	margin: 50px 0 0;
}

.illust p img{
	width: 100%;
}

/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 50px 10px 50px 0;
	text-align: center;
	font-size: 12px;
}

/* 共通
------------------------------------------------------------*/
h1, h2{
	font-family: 'Josefin Sans', 'Noto Sans JP',serif;
}

section{
	clear:both;
}

/* セクション
------------------------------------------------------------*/
section h2{
	font-size: 22px;
	color: #ff80ba;
	font-weight:normal;
	text-align: center;
}

section .copy{
	font-size: 20px;
	color: #797979;
	text-align: center;
	line-height: 3em;
}

#left{
	float: left;
	width:40%;
	margin-left: 6%;
}
#right{
	float: right;
	width:40%;
	margin-right: 6%;
}

#left p{
	font-size: 20px;
	color: #797979;
	line-height: 2em;
	margin: 6% 0;
}

/* col01 
------------------------------------------------------------*/
#col01{
	height: 360px;
	width: 94%;
	background: #fffaec;
	padding: 30px;
	margin: 25px auto;
	border: 2px #ffc116 solid;
	border-radius:20px;
}

#col01 h3{
	font-size: 22px;
	color: #ffbb00;
	border-bottom: 2px solid #ffbb00;
	display: inline-block;
	padding-bottom: 5px;
	letter-spacing: 6px;
 	margin-top: 10px;
}

/* col02
------------------------------------------------------------*/
#col02{
	height: 360px;
	width: 94%;
	background: #e9f9ff;
	padding: 30px;
	margin: 25px auto;
	border: 2px #1bbeff solid;
	border-radius:20px;
}

#col02 h3{
	font-size: 22px;
	color: #1bbeff;
	border-bottom: 2px solid #1bbeff;
	display: inline-block;
	padding-bottom: 5px;
	letter-spacing: 6px;
 	margin-top: 15px;
}

/* col03
------------------------------------------------------------*/
#col03{
	height: 360px;
	width: 94%;
	background: #fff5fa;
	padding: 30px;
	margin: 25px auto;
	border: 2px #ff80ba solid;
	border-radius:20px;
}

#col03 h3{
	font-size: 22px;
	color: #ff80ba;
	border-bottom: 2px solid #ff80ba;
	display: inline-block;
	padding-bottom: 5px;
	letter-spacing: 6px;
 	margin-top: 10px;
}

/* col04
------------------------------------------------------------*/
#col04{
	height: 360px;
	width: 94%;
	background: #f6ffe2;
	padding: 30px;
	margin: 25px auto;
	border: 2px #a2de11 solid;
	border-radius:20px;
}

#col04 h3{
	font-size: 22px;
	color: #a2de11;
	border-bottom: 2px solid #a2de11;
	display: inline-block;
	padding-bottom: 5px;
	letter-spacing: 6px;
 	margin-top: 10px;
}


/* PRODUCT
------------------------------------------------------------*/
#product {
	margin: 25px auto;
	width: 98%;
}

section h4{
	font-size: 22px;
	color: #ff80ba;
	font-weight:normal;
	text-align: center;
	margin: 30px 0;
	width: 80%;
}

.next {
  position: relative;
  }

.next img{
	width: 100%;
  }

.next a{
	position: absolute;
	top: 82%;
	left: 78%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	font-size: 22px;
	border: 1px #ff5d8b solid;
    padding: 28px 37px;
	color: #fff;
	text-decoration: none;
    background-image:-moz-linear-gradient(top,#ff91c3 0%,#ff66ac);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#ff91c3),to(#ff66ac);
	border-radius: 15px;
	letter-spacing: 0.5em;
	width: 19%;
}
  
.next a:hover{
	opacity: 0.5 ;
  }
  
.next img {
  width: 100%;
  }
  
  /* レスポンシブル設定
------------------------------------------------------------*/

@media screen and (max-width: 480px) {
img { float : none ; }
img {
max-width : 100% ;
height : auto ;
}
} 
@media only screen and (min-width: 1200px){
	
section h2{
	padding: 12px 0 ;
	margin: 55px 0;	
}

section img{
	width:100%
}
}

@media only screen and (min-width: 800px){
body{
	width:98%;
	margin: 0 ;
	padding: 0 ;
}

body{
	font-size:16px;
	font-weight: normal;
}

section h2{
	font-size: 18px;
	text-align: center;
	letter-spacing: 0.4em;
	color: #fff;
}
	
	
/* SEC03 -----------------*/
.col3{
	text-align: center;
}

.col3 li{
	display: inline-block;
	width: 30%;
	padding: 0 1.5%;
	margin-bottom: 0;
	vertical-align: top;
	text-align: left;
}
}

@media only screen and (min-width: 641px){
body{
	width:98%;
	margin: 0 ;
	padding: 0 ;
}

.col2 li{
	width: 100%;
	padding: 0 3%;
	vertical-align: top;
}
}


@media only screen and (max-width: 799px){
body{
	width:98%;
	margin: 0 ;
	padding: 0 ;
}

section h2{
	font-size: 18px;
	text-align: center;
	letter-spacing: 0.3em;
	color: #fff;
}
	
.col3 li{
	margin: 0 auto;
	display: block;
	max-width: 288px;
}
}