@charset "utf-8";
/*-----------------------------------------------------
@@ Reset
------------------------------------------------------*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
http://code.google.com/p/html5resetcss/downloads/list
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1.5;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}
th,td{
	text-align: left;
	vertical-align: top;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}




article, aside, dialog, figure, footer, header,hgroup, menu, nav, section { display: block; }

img{border: 0; vertical-align: bottom;-ms-interpolation-mode: bicubic; }


/* For modern browsers */
.clearfix:before,.clearfix:after,.cf:before,.cf:after{
	content:"";
	display:table;
}
.clearfix:after,.cf:after{clear:both;}
.clearfix,.cf{zoom:1;}/* For IE 6/7 (trigger hasLayout) */

*{box-sizing: border-box;}

/*-----------------------------------------------------
@@ 基本
------------------------------------------------------*/
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

a{color: #0066cc;text-decoration: underline;}
a:hover{color: #ff6600;}

html{
	color: #333333;
	background: white;
	overflow-y: scroll;	/*ここでスクロールバーを常に表示*/
}
body{
	text-align: center;
	font-size: 16px;
	/*font-family: "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;*/
  font-family: 'Noto Sans JP', sans-serif;
	/*font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', "メイリオ", Meiryo, 'ＭＳ Ｐゴシック', sans-serif;*/
	/*font-family: 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', "メイリオ", Meiryo, 'ＭＳ Ｐゴシック', sans-serif;*/
	/*font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;*/
	font-weight:500;/*游ゴシック体用*/
	background-color: white;
	word-wrap: break-word;
	overflow-wrap : break-word;
}
/* IE10以上 */
@media all and (-ms-high-contrast: none) {
  body {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

@media all and (-ms-high-contrast:none){
	/* IE10以降ハック*/
	/*body{font-family: "メイリオ", "Meiryo", sans-serif;}*/
}







/*-----------------------------------------------------
@@ 段落
------------------------------------------------------*/
p{
	line-height: 1.5;
	margin-bottom: 1em;
	color: #404040;
}
p.indent1{
	text-indent: -1em;
	margin-left: 1em;
}


/*-----------------------------------------------------
@@ IME制御（WinIEのみ）等
------------------------------------------------------*/
.imeon{ime-mode:active;}
.imeoff{ime-mode:disabled;}

.right{text-align: right;}
.center{text-align: center;}
.left{text-align: left;}

.nowrap{white-space: nowrap;}


@media screen and (max-width: 767px) {/* スマホ */
	.pc{display: none !important;}
}/* スマホ */

@media (min-width: 768px)  {/* PC */
	.sp, .smp{display: none;}

  a:hover img{
  	opacity: 0.7;
  }

}/* PC */





/*-----------------------------------------------------
@@ フォーム
------------------------------------------------------*/
form{vertical-align:baseline;}
input,textarea{outline:0;}

textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
	border: 1px solid #737373;
	padding: 4px;
	font-size: 15px;
}
select{
	border: 1px solid #737373;
	font-size: 15px;
	height: 2em;
}

textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus {
	border: 1px solid #737373;
	background-color: #ffc;
}
select, input, textarea, button { 
	vertical-align:middle;
	font-family: inherit;
}

textarea{overflow: auto;}/* 内容が少ないのに薄くスクロールバーが出る事への対策。IEのみ  */

input,textarea,select,button{
	margin: 2px 4px 2px 0;
}
input[type="submit"], button {
	border: 1px solid #737373;
	border-radius: 3px;
	padding: 6px 12px;
	font-size: 15px;
	line-height: 1.2;
	overflow:visible;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,cccccc+100;Gren+3D */
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

}
input[type="submit"]:hover,
button:hover {
	cursor: pointer;
}

label{
	font-size: 15px;
	margin-right: 1em;
}

/* placeholder属性 */
:placeholder-shown {
	color: #737373; }
::-webkit-input-placeholder {/* Google Chrome, Safari, Opera 15+, Android, iOS */
	color: #737373; }
:-moz-placeholder {/* Firefox 18- */
	color: #737373; opacity: 1; }
::-moz-placeholder {/* Firefox 19+ */
	color: #737373; opacity: 1; }
:-ms-input-placeholder {/* IE 10+ */
	color: #737373; }











	
	
	
	
@media (min-width: 768px)  {/* PC */

/*-----------------------------------------------------
@@ メイン
------------------------------------------------------*/
	.main{	
		max-width: 1310px;
		margin: 0 auto;
		padding: 0;
		border-top : 12px solid #003559;
	}
	.main img{
		width : 100%;
	}	

	.menu{
		padding : 10px 0 0 0;
		text-align : center;
	}
	.menu img{
		width : 220px;
		border-right : 1px solid #003559;
	}	
	.menu .firstimg {
		border-left : 1px solid #003559;
	}	

	.ttl{
		width : 760px;
		margin : 180px auto 150px;
	}
	.ttl2{
		width : 760px;
		margin : 0 auto 100px;
	}
	.ttl3{
		width : 760px;
		margin : 180px auto 40px;
	}

	.kaitorirule{
		width : 752px;
		margin : 70px auto 0;
	}

	


	.item{
		width:1000px;
		margin : 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		font-size : 110%;
		text-align: left;
		color : #003559;
	}
	.item-last{
		width:1000px;
		margin : 0 auto;
		text-align: left;
		color : #003559;
	}
	
	.box-wrap-item span{
		display: inline-block;
		font-size : 12px;
		line-height : 1.4;
	}

	.rule-ttl{
		margin-top : 60px;
		color : #ed6d46;
		font-size: 120%;
		font-weight : bold;
	}
	.rule-box{
		margin : 10px 0;
		padding : 10px 20px;
		border: 2px solid #003559;
	}
	.rule-txt{
		width:100%;
		margin : 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
	}
	.rule-txt-left{
		width : 30%;
	}
	.rule-txt-right{
		width : 70%;
	}
	.rule-txt-last{
		text-align: right;
	}


	.area{
		width:800px;
		margin : 0 auto;
		color : #003559;
	}
	.area-ttl{
		font-size: 220%;
		font-weight: bold;
		margin-top : 50px;
	}
	.area-ttl2{
		font-size: 115%;
		margin-top : 20px;
		line-height: 2;
	}
	.area-txt1{
		font-size: 115%;
		background:#003559;
		color :#ffffff;
		width : 13em;
		margin-top : 30px;
		padding : 5px 0;
		border-radius: 12px 12px 0 0;
	}
	.area-txt2{
		border : 1px solid #003559;
		padding : 25px;
		text-align: left;
		line-height: 2;
		margin-bottom: 70px;
	}
	.area-sub{
		width:100%;
		margin : 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.area-red , .area-blue{
		width : 345px;
		margin : 0 16px 30px 16px;
	}

	.area-red img , .area-blue img{
		width : 330px;
	}
	.area-other{
		width : 724px;
		margin : 0 auto 250px auto;
	}





	#page_top{
		width: 88px;
		height: 88px;
		position: fixed;
		right: 54px;
		bottom: 50px;/* 高さ分、画面の外へ。jQueryで画面内に移送させる。 */
    transition-duration:0.9s;
	  }
	  #page_top a{
		display: block;
		width: 88px;
		height: 88px;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
		background: url(../images/top_back.png) no-repeat 0 0;
		background-size: contain;
	  }
	

  #page_top.show1,
  #page_top.show2{
    bottom: 150px;
  }








}/* PC */
	
	














img , picture{
	vertical-align:top;
	margin : 0;
	padding: 0;
}



@media screen and (max-width: 767px) {/* スマホ */


/*-----------------------------------------------------
@@ メイン
------------------------------------------------------*/
.main , .topscroll{	
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	border-top : 12px solid #003559;

}

.main img{
	width : 100%;
}	

.mainimg{margin :  0;}

.ttl{
	width : 80%;
	margin : 80px auto 50px;
}

.ttl2{
	width : 80%;
	margin : 0 auto 30px;
}
.ttl3{
	width : 80%;
	margin : 80px auto 20px;
}

.item{
	width : 70%;
	margin : 0 auto;
	text-align: left;
	color : #003559;
}
.item-last{
	width : 80%;
	margin : 0 auto;
	text-align: left;
	color : #003559;
}

.box-wrap-item span{
	display: inline-block;
	font-size : 12px;
	line-height : 1.4;
}

.rule-ttl{
	margin-top : 40px;
	color : #ed6d46;
	font-size: 120%;
	font-weight : bold;
}

.rule-box{
	margin : 10px 0;
	padding : 8px;
	border: 2px solid #003559;
}
.rule-txt-last{
	text-align: right;
}

.kaitorirule{
	width : 80%;
	margin : 70px auto 0;
}

.area{
	width : 80%;
	margin : 0 auto;
	color : #003559;
}

.area-ttl{
	font-size: 150%;
	font-weight: bold;
	margin-top : 20px;
}
.area-ttl2{
	font-size: 100%;
	margin : 20px 0 30px;
	line-height: 1.5;
}

.area-txt1{
	font-size: 115%;
	background:#003559;
	color :#ffffff;
	width : 13em;
	margin-top : 30px;
	padding : 5px 0;
	border-radius: 12px 12px 0 0;
}

.area-txt2{
	border : 1px solid #003559;
	padding : 20px;
	text-align: left;
	line-height: 2;
	margin-bottom: 70px;
}
.area-red , .area-blue{
	margin : 0 0 30px 0;
}


.area-other{
	margin : 0 0 180px 0;
}










	#page_top{
		width: 41px;
		height: 41px;
		position: fixed;
		right: 10px;
		bottom: 75px;
    transition-duration:0.3s;
	  }
	  #page_top a{
		display: block;
		width: 41px;
		height: 41px;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
		background: url(../images/top_back.png) no-repeat 0 0;
		background-size: contain;
	  }
	
  #page_top.show1{/* フッタありのとき */
    bottom: 75px;
  }
  #page_top.show2{/* フッタなしのとき */
    bottom: 75px;
  }

}/* スマホ */









.area-red{
	border-top : 2px solid #f03264;
	border-right : 2px solid #f03264;
	border-left : 2px solid #f03264;
	border-bottom : 8px solid #f03264;
	border-radius: 12px;
}
.area-blue{
	border-top : 2px solid #417dd9;
	border-right : 2px solid #417dd9;
	border-left : 2px solid #417dd9;
	border-bottom : 8px solid #417dd9;
	border-radius: 12px;
}.area-other{
	border-top : 2px solid #003c83;
	border-right : 2px solid #003c83;
	border-left : 2px solid #003c83;
	border-bottom : 8px solid #003c83;
	border-radius: 12px;
}











	

/*-----------------------------------------------------
@@ 取り扱い品目
------------------------------------------------------*/
@media (min-width: 768px)  {/* PC */

	.box-wrap-item{
		max-width: 454px;
		margin-bottom : 70px;
	}
	.box-wrap-rule{
		max-width: 752px;
		margin-bottom : 70px;
	}

}

@media screen and (max-width: 767px) {/* スマホ */

	.box-wrap-item{
		margin-bottom : 30px;
	}
	.box-wrap-rule{
		margin-bottom : 70px;
	}

}


.box-item-01 , .box-item-02 {
	max-width: 100%;
	margin: 0 auto 5px;
	border-radius: 10px;
	overflow: hidden;
  }
  .box-item-01{
	border: 4px solid #000000;
  }
  .box-item-02{
	border: 4px solid #003559;
	background:#003559;
  }


  .box-item-title {
	position: relative;
  }

  .btn-item-01 , .btn-item-02 {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background-size: contain;
  }

  @media (min-width: 768px)  {/* PC */
	.btn-item-01 , .btn-item-02{
		width: 50px;
	}

}

@media screen and (max-width: 767px) {/* スマホ */
	.btn-item-01{
		width: 50px;
	}
	.btn-item-02{
		width: 40px;
	}

}



.btn-item-01 {
	right: 1%;
	background: url(../images/arrow-01d.png) no-repeat 50% 50%;
 }
 .btn-item-02 {
	right: 5%;
	background: url(../images/arrow-02d.png) no-repeat 50% 50%;
 }


  .btn-item-01:hover , .btn-item-02:hover {/* hoverで指*/
	cursor: pointer;
  }

  .btn-item-01.item-open {/* コンテンツを開いた時、ボタンは閉じるボタンに */
	background: url(../images/arrow-01u.png) no-repeat 50% 50%;
	background-size: contain;
  }

  .btn-item-02.item-open {/* コンテンツを開いた時、ボタンは閉じるボタンに */
	background: url(../images/arrow-02u.png) no-repeat 50% 50%;
	background-size: contain;
  }




  .box-item-content {/* コンテンツはあらかじめ非表示に */
	display: none;
	background:#bfcee0;
	padding : 25px;
  }
  


@media (min-width: 768px)  {/* PC */

  .box-rule-content {/* コンテンツはあらかじめ非表示に */
	display: none;
	padding : 40px 25px 25px 25px;
	text-align: left;
	color : #003559;
	font-size : 110%;
	background:#ffffff;
  }
  
}

@media screen and (max-width: 767px) {/* スマホ */

	.box-rule-content {/* コンテンツはあらかじめ非表示に */
		display: none;
		padding : 20px 15px 20px 15px;
		text-align: left;
		color : #003559;
		font-size : 110%;
		background:#ffffff;
	}
	  
	}
	


/*-----------------------------------------------------
@@ バーガーメニュー
------------------------------------------------------*/
@media (min-width: 768px) {

  .wrap-headermenu{
    display: none;
  }

}/* PC ここまで================================ */
@media screen and (max-width: 767.9px) {

  .wrap-headermenu{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
  }
    #headermenu-btn{
    display: block;
    width: 40px;/*★*/
    height: 40px;/*★*/
    position: absolute;
    top: 12px;
    right: 10px;
    background-color: white;
    border: 2px solid #023557;
    cursor: pointer;
    margin-bottom: 20px;
  }
    #headermenu-btn span {
    position: absolute;
    display: block;
    width: 70%;
    height: 2px;
    border-radius: 3px;
    background-color: #00183d;
    left: 0;
    right: 0;
    margin: auto;
    transition: all .3s;
  }
    #headermenu-btn span:first-child {
    top: 22%;
  }
    #headermenu-btn span:nth-child(2) {
    top: 0;
    bottom: 0;
    opacity: 1;
  }
    #headermenu-btn span:nth-child(3) {
    bottom: 22%;
  }
  #headermenu-btn.clicked span:first-child {
    transform: translateY(9px) rotate(45deg);/*★*/
  }
    #headermenu-btn.clicked span:nth-child(2) {
    opacity: 0;
  }
  #headermenu-btn.clicked span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);/*★*/
  }

  #headermenu{
    display: none;
    position: absolute;
    top: 50px;
    right: 20px;
    margin: auto;
    width: calc(100vw - 40px);
    background-color: white;
    border: 2px solid #023557;
    padding: 16px;
  }
  .headermenu-list{
    font-size: 0;
    list-style-type: none;
    border-top: 1px dotted #023557;
  }
  .headermenu-list > li{
    font-size: 24px;
    line-height: 1.25;
    border-bottom: 1px dotted #023557;
  }
  .headermenu-list > li > a{
    display: block;
    padding: 0.8em 0.5em;
    text-decoration: none;
  }

}/* スマホ ここまで============================ */


/*-----------------------------------------------------
@@ フッターバナーバーガーメニュー
------------------------------------------------------*/
@media (min-width: 768px) {


	#footer-banner{
		position: fixed;
		bottom: 0;
		left: -8px;
		width: 100vw;
		background-color: #ffffff;
		transition-duration:0.3s;

	  }
	  #footer-banner .inner img{
		width : 100%;
	  }
	  #footer-banner .inner{
		width : 1310px;
		margin : 0 auto;
	  }



	  .slider2{
		width : 200px;
	  }


	  .mainslider{
		width:100%;
		margin : 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	  }
	  .slidercenter{
		width : 910px;
	  }
	  .slidercenter img{
		width : 100%;
	  }

}/* PC ここまで================================ */
@media screen and (max-width: 767.9px) {

  #footer-banner{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    background-color: #ffffff;
    transition-duration:0.3s;
  }

  #footer-banner  img{
    max-width: 100%;
    max-height: 100%;
  }




  .slider2{
	width : 15%;
  }


  .mainslider{
	width:100%;
	margin : 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
  }
  .slidercenter{
	width : 70%;
  }
  .slidercenter img{
	width : 100%;
  }

}/* スマホ ここまで============================ */


.slick-vertical .slick-slide{
	border : none !important;
}