@charset "UTF-8";
/*sanitize1 reset
===============================================*/
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:0}a:active,a:hover{outline:0}h1{font-size:2em}strong{font-weight:bold}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}
*,::before,::after{background-repeat:no-repeat;box-sizing:inherit}::before,::after{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;cursor:default;}h1,h2,h3,h4,h5,h6 {font-weight: 700;-webkit-margin-before: 0;-webkit-margin-after: 0;margin-top: 0;margin-bottom: 0;}hr{height:0;overflow:visible}ol,ul{margin-left: 0;margin-top: 0;-webkit-padding-start: 0;padding-left: 0;list-style-position: inside;}nav ol,nav ul{list-style:none}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}iframe,img,svg{vertical-align:middle}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}a{background-color:transparent;-webkit-text-decoration-skip:objects}:hover{outline-width:0}
.spin{display:none;}

@media screen and (max-width:640px){
.spnone{display:none;}
.spin{display:inline;}
}

/*document common setting
77%/10px,85%/11px,93%/12px,100%/13px,108%/14px,116%/15px,123.1%/16px,131%/17px,138.5%/18px,146.5%/19px,153.9%/20px
background:#333;background:-moz-linear-gradient(top,#666 0%,#333);background:-webkit-gradient(linear,left top,left bottom,from(#666),to(#333))

===============================================*/
body{
font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;line-height:1;
font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO","メイリオ", Meiryo,"Helvetica","Arial","Osaka",sans-serif;
min-width:1100px;
width:100%;
}
p,li,dt,dd,th,td{font-size:100%;line-height:1.8;}
ul li{list-style:none;}
dt,th{font-weight:700;}
dd{margin-left:0;}
h1,h2,h3{line-height:1.6;}
h1{font-size:153.9%;}
h2{font-size:138.5%;}
h3{font-size:131%;}
ul,ol{list-style-position:inside;}
a{color:#1296D5;text-decoration:none;}
a:hover{color:#E3287F;text-decoration:underline;}
hr {clear:both;size:1;color:#ccc;border-style:solid;margin:1em auto;width:80%;}
table{border-collapse:collapse;border-spacing:0}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.center{text-align:center;}
.textRight{text-align:right;}
.pink{color:#E3287F;}
a img{-webkit-transition: all 0.1s;transition: all 0.1s;opacity: 1;}
a:hover img{opacity: 0.75;}


@media screen and (max-width:1024px){
body{min-width:100% !important;width:100%;}
hr {margin:0.5em auto;width:94%;}
}


/*header
===============================================*/
#header{
	background: #fff;
	width: 100%;
	z-index: 999;
	position: fixed;
	height:75px;
	padding-top:10px;
	border-bottom:1px solid #ddd;
	z-index:9999;
}

.hwrap{
	width:1100px;
	margin:0 auto;
	height:75px;
	overflow:hidden;
}
#siteTitle{
	float:left;
	padding-top:7px;
	padding-right:30px;
}
#brand{
	float:right;
	padding-top:10px;
}

@media screen and (max-width: 1024px){
#header{
	height:65px;
	padding-top:10px;
}
.hwrap{
	width:100%;
	height:auto;
	overflow:auto;
}
#siteTitle{
	float:left;
	padding:0 0 0 7px;
}
#brand{
	float:none;
}
.logo0{
	position:absolute;
	top:15px;
	right:280px;
}
.logo1{
	position:absolute;
	top:15px;
	right:80px;
}
}

@media screen and (max-width: 640px) {
#siteTitle img{
	width:175px;
	padding-top:5px;
}
.logo0{
	position:absolute;
	top:22px;
	right:80px;
}
.logo0 img{
	width:50px;
}

.logo1{
	display:none;
}
}


/*navigation
===============================================*/
#header .mobileBtn {
	display: none;
	cursor: pointer;
}

#gNav ul {
	display: block;
	margin:0;
	padding:0;
	float:left;
}
#gNav li {
	display:inline;
}
#gNav li.mode_sp {
	display:none;
}

#gNav li a {
	float: left;
	display: block;
	text-align:center;
	text-decoration: none;
	color:#565656;
	text-decoration:none;
	font-size:100%;
	overflow:hidden;
	background:#fff;
	border:1px solid #fff;
	padding:1em;
	margin:4px 0.5em 0px 0.5em;
	border-radius:5px;
}

#gNav li a:hover,
#gNav li a.active {
	border:1px solid #ddd;
	-webkit-transition: background-color 0.1s linear;
    transition: background-color 0.1s linear;
	color:#E3287F;
}


@media screen and (max-width:1024px) {
#header .mobileBtn {
	display: block;
	padding: 9px 15px;
	height:64px;
	overflow:hidden;
	position: absolute;
	top: 0px;
	right: 0px;
	background:-moz-linear-gradient(top,#fff 0%,#eee);
	background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#eee));
	-webkit-transition: background-color 0.1s linear;
    transition: background-color 0.1s linear;
	border-left:1px solid #ddd;
}
#header .mobileBtn.on{
	background: #f3f3f3 url(../images/icon_close.svg) no-repeat 45% 5px;
	background-size:50%;
}

#header .mobileBtn .icon-bar {
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 1px;
	background-color:#006FBA;
	margin-top: 6px;
}
#header .mobileBtn.on .icon-bar{
	background-color:transparent;
}

#header .mobileBtn .icon-text{
	display:block;
	color:#006FBA;
	text-align:center;
	font-size:93%;
	padding-top:1.25em;
}

#header .mobileBtn .icon-bar:first-child {
	margin-top: 0;
}
#gNav {
	clear: both;
	margin-top:55px;
}
#gNav ul {
	display: none;
	background:rgba(255,255,255,0.9);
	width:100%;
	float:none;
}
#gNav ul.open {
	display: block;
	height:120px;
}

#gNav li{
	display:block;
	height:40px;
	line-height:40px;
	width:50%;
	float:left;
}
#gNav li.mode_sp {
	display:block;
}

#gNav li a {
	display:block;
	float:none;
	height:39px;
	line-height:39px;
	margin:0;
	padding:0;
	box-sizing:border-box;
	border-radius:0;
	font-size:100%;
	background:none;
	text-align:center;
	border-bottom:1px solid #ddd;
	font-weight:bold;
}
#gNav li:nth-child(odd) a,
#gNav li:nth-child(odd) a:hover,
#gNav li:nth-child(odd) a.active{
	border-right:1px solid #ddd;
}

#gNav li a:hover,
#gNav li a.active {
	border:0px;
	border-bottom:1px solid #ddd;
}

}


/*chapter wrapper
===============================================*/
.chapter{
	width:100%;
	margin:0 auto;
}
.chapter h2{
	text-align:center;
}

.wrapCommon{
	width:1040px;
	margin:0 auto;
	position:relative;
}

@media screen and (max-width: 1024px){
.wrapCommon{
	width:100%;
}
}


/*chapter 0
===============================================*/
.chapter.c0{
	background:#fef7eb;
	padding:95px 0 25px 0;
	text-align:center;
}
.ill1{
	position:absolute;
	top:10px;
	left:75px;
}
.titleMain h2{
	padding-top:2em;
}

.titleMain p{
	color:#D18E6C;
	font-weight:bold;
	font-size:123.1%;
}
.ill2{
	position:absolute;
	top:15px;
	right:15px;
}
.markerNext{
	text-align:center;
	margin-top:-30px;
}

@media screen and (max-width:1024px) {
.chapter.c0{
	padding:85px 0 25px 0;
	background:#fef7eb url(../images/head_img01.png) no-repeat 1% 95%;
	background-size: 110px;
}
.ill1,
.ill2{
	display:none;
}
.titleMain p{
	font-size:108%;
}
}


@media screen and (max-width:640px) {
.chapter.c0{
	background-position:5% 85%;
	background-size: 90px;
}
.titleMain h2{
	padding-top:0;
}
.titleMain h2 img{
	width:96%;
}

.titleMain p{
	font-size:116%;
	padding:0 0.75em 0 120px;
	text-align:left;
	text-align:justify;
	line-height:1.5;
}
.markerNext{
	margin-bottom:20px;
	background:#FEF7EB;
}
.markerNext img{
	width:80px;
}
}

/*chapter 1
===============================================*/
.chapter.c1{
	background:#fff44a;
	margin-top:-70px;
	padding-top:50px;
	padding-bottom:15px;
}

.chapter.c1 h2{
	padding-bottom:20px;
	width:100%;
}
.chapter.c1 h2 img{
	width:98%;
}

.grid-style{
	float:left;
	box-sizing:border-box;
	position:relative;
	background:#fff;
	margin:1%;
	border-radius:10px;
}
.grid-style.col1{width:98%;}
.grid-style.col2{width:48%;}
.grid-style.col3{width:33.333333%;}

h3.products{
	float:left;
	padding:1em;
}
p.prd_read,
p.prd_middle{
	padding-top:1em;
	padding-right:1.5em;
}

.prdGrid1,.prdGrid2,.prdGrid3,.prdGrid4{
	text-align:center;
	box-sizing:border-box;
}

@media screen and (max-width:640px) {
.chapter.c1{
	padding-bottom:5px;
}
.chapter.c1 h2{
	margin-top:-20px;
	padding-bottom:10px;
}
.chapter.c1 h2 img{
	width:98%
}
h3.products{
	float:none;
	text-align:center;
	padding-bottom:0;
}
.grid-style{
	float:none;
	margin:2%;
}
.grid-style.col1,
.grid-style.col2,
.grid-style.col3{
	width:96%;
}

.grid-style.col1{padding-bottom:15px;}

p.prd_read,
p.prd_middle{
	padding:0 1em;
}
.prdGrid1,.prdGrid2,.prdGrid3,.prdGrid4{
	font-size:85%;
	margin-top:0px;
}

}

.prdGrid3{
	float:left;
	width:33.333333%;
}
.prdGrid3:nth-child(even){
	border-right:1px solid #ddd;
	border-left:1px solid #ddd;
}
.prdGrid3 img,.prdGrid2 img{
	padding-bottom:10px;
	
}

.prdGrid2{
	float:left;
	width:50%;
}
.prdGrid2:nth-child(odd){
	border-right:1px solid #ddd;
}

.prdGrid1{
	float:left;
	width:25%;
	padding:15px 0;
}

.grid-style.col1 h3{
	float:left;
	width:30%;
	text-align:center;
}

.grid-style.col1 h3 img{
	width:100%;
	padding:1em 0;
}
.grid-style.col1 h3.ss img{
	width:85%;
	padding:1.5em 0 1em 0;
}

.grid-style.col1 h3.ks img{
	width:85%;
	padding:0;
}

.sub_right{
	float:left;
	width:65%;
	padding-top:1em;
}
.img_left{
	float:left;
	width:35%;
	text-align:right;
}
.img_left img.h150{
	height:150px;
}
.img_left img.w100p{
	width:100%;
}

.prdGrid4{
	float:left;
	width:22%;
	margin:15px 0px;
}
.prdGrid4:nth-child(even){
	border-right:1px solid #ddd;
}

p.prd_wide{
	float:left;
	width:35%;
	padding-top:3em;
}
p.prd_middle{
	float:left;
	width:20%;
	padding-top:1.5em;
}

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

.prdGrid1{
	float:none;
	width:100%;
	padding:0;
}

.grid-style.col1 h3{
	float:none;
	width:100%;
}

.grid-style.col1 h3 img,
.grid-style.col1 h3.ss img,
.grid-style.col1 h3.ks img{
	width:auto;
	padding:0;
}

.sub_right{
	width:45%;
}
.img_left{
	width:45%;
}
.img_left img.h150{
	padding-bottom:10px;
}
.img_left img.w100p{
	width:100%;
}

.prdGrid4{
	float:left;
	width:50%;
	margin:0px;
}
.prdGrid4:nth-child(even){
	border-right:1px solid #ddd;
}

p.prd_wide{
	float:none;
	width:100%;
	padding:0 1em;
}
p.prd_middle{
	float:none;
	width:100%;
	padding:0 1em;
}

}



/*chapter 2
===============================================*/
.chapter.c2{
	background:#fef7eb;
	padding-top:25px;
	padding-bottom:25px;
}

.chapter.c2 h2{
	font-size:200%;
	color:#fff;
	background:#00A5E8;
	border-radius:10px;
}
.img_full{
	width:100%;
	margin:1em auto 0px auto;
	text-align:center;
}
.img_full img{
	width:98%;
}

@media screen and (max-width:1024px) {
.chapter.c2 h2{
	margin:0 3%;
}
}

@media screen and (max-width:640px) {
.chapter.c2{
	padding-top:10px;
	padding-bottom:5px;
}
.chapter.c2 h2{
	font-size:116%;
	border-radius:10px;
	margin:0 3%;
	padding:2%;
	line-height:1.5;
}
}

/*chapter 3
===============================================*/
.chapter.c3{
	background:#fef7eb;
	position:relative;
	padding-bottom:25px;
}

.chapter.c3 h2{
	background:#fff44a;
	border-radius:10px;
	padding:3px;
}

.illst0{
	position:absolute;
	top:-15px;
	left:50px;
	width:160px;
}
.nss7{
	width:520px;
	height:366px;
	margin:2em auto 0px auto;
	background:url(../images/chapter3-bg.jpg) no-repeat center left;
}
.nss7 dl{
	padding-top:35px;
	padding-left:45px;
	font-size:108%;
}
.nss7 dl dd{
	background:url(../images/arrow_pink.png) no-repeat 1% center;
	padding-left:1em;
}

@media screen and (max-width:1024px) {
.chapter.c3 h2{
	margin:0 3%;
}
.chapter.c3 h2 img{
	width:400px;
}
.illst0{
	position:absolute;
	top:-15px;
	left:auto;
	right:20px;
}
}

@media screen and (max-width:640px) {
.chapter.c3{
	padding-bottom:1px;
}
.chapter.c3 h2{
	background:#fff44a;
	border-radius:10px;
	margin:0 3%;
}
.chapter.c3 h2 img{
	width:80%;
}
.illst0{
	display:none;
}
.nss7{
	width:92%;
	height:auto;
	margin:1em auto 0px auto;
	background:#F3EAB1 url(../images/chapter3-2.png) no-repeat 95% -40px;
	background-size:80px;
	border-radius:10px;
}
.nss7 dl{
	padding:0.75em;
	font-size:100%;
}
}


/*chapter 4
===============================================*/
.chapter.c4{
	padding-top:25px;
	padding-bottom:25px;
}

.chapter.c4 h2{
	font-size:200%;
	color:#fff;
	background:#00A5E8;
	border-radius:10px;
}
.illst1{
	position:absolute;
	top:-15px;
	left:50px;
	width:190px;
}
.c4-p1,.c4-p2{
	width:825px;
	padding-left:275px;
}
.c4-p1 p{
	padding-top:2em;
}
.c4-p2 p{
	padding-top:1em;
}
.img_right{
	float:right;
	padding-top:5px;
}

@media screen and (max-width:1024px) {
.chapter.c4 h2{
	margin:0 3%;
}
.illst1{
	position:absolute;
	top:-10px;
	left:20px;
	width:180px;
}
.c4-p1,.c4-p2{
	width:740px;
	padding-left:220px;
}
.img_right{
	float:right;
	padding-top:5px;
}
}


@media screen and (max-width:640px) {
.chapter.c4{
	padding-top:10px;
	padding-bottom:5px;
}
.chapter.c4 h2{
	font-size:116%;
	border-radius:10px;
	margin:0 3%;
	padding:2%;
	line-height:1.5;
}
.illst1{
	display:none;
}
.c4-p1,.c4-p2{
	width:92%;
	padding:0.5em 4%;
	margin:0 auto;
}
.c4-p1 p,
.c4-p2 p{
	padding:0;
}
.img_right{
	width:90px;
	text-align:right;
}
}



/*footer
===============================================*/
.ptop{
	position:fixed;
	bottom:60px;
	right:40px;
	display:none;
}
.ptop a{
	display:block;
	width:40px;
	height:40px;
	border-radius:20px;
	background:#00A5E8 url(../images/item_totop.png) no-repeat center center;
	text-decoration:none;
	opacity:0.9;
}
.ptop a:hover{
	opacity:0.75;
}

#footer {
	border-top:1px solid #ddd;
	background-color:#e7f7fc;
	margin-top:20px;
	padding:15px;
}
.fwrap{
	width:600px;
	margin:0 auto;
}
.logo_f{
	float:left;
	width:200px;
	padding-top:25px;
}

.address{
	float:right;
}

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

.ptop{
	bottom:30px;
	right:20px;
}

#footer {
	margin-top:10px;
	padding:0px;
}
.fwrap{
	width:100%;
	margin:0 auto;
}
.logo_f{
	float:none;
	width:200px;
	padding-top:10px;
	margin:0 auto;
}

.address{
	float:none;
	font-size:85%;
	padding:0 1em;
}
}



@media print {
#header{
	position:relative;
}
}