@charset"UTF-8"  ;

/*PCとスマホの設定*/
/*ヘッダー・フッターの設定*/
/*スマホ画面の最大は560pxで設定する、画像も560px*/



/*●PC●*/@media screen and (min-width:560px){.sph{display:none;}}
/*●ｽﾏﾎ●*/@media screen and (max-width:560px){
/* スマフォ基本設定
###################################################################################### */
/*PC不要項目の削除*/
.pc{display:none;}
/*フォントサイズの調整【重要】*/
html,body{-webkit-text-size-adjust:none ;}
/*画像サイズ・iframe調整*/
img,iframe{max-width:100% ; height:auto ; box-sizing:border-box ;}
/*Safari用ボタン初期化・装飾*/
input[type="submit"]{-webkit-appearance:none ;
background:#cccccc ;
background:linear-gradient(to bottom,#eeeeee,#cccccc);
box-shadow:1px 1px 2px #E7E7E7;  
}
/*アルファベット長い場合は折り返す*/
*{word-wrap:break-word ; overflow-wrap: break-word ;}
}







/*●PC●*/@media screen and (min-width:560px){
/*ヘッダー
###################################################################################### */
header{;}
/*-----*/
#he1{background:linear-gradient(180deg, #000000 0%, #000000 40%, #000000 40%, #00094a 100%); padding-bottom:5px ;}
#he1>div{height:185px ; background:url("img/co/bk01.jpg") no-repeat top center ; border-bottom:1px #4d527e solid ;}
#he1>div>div{width:1200px ; margin:0 auto ;}
#he1>div>div>div:nth-of-type(1){width:750px ; float:left ;}
#he1>div>div>div:nth-of-type(1) p{text-align:right ;}
#he1>div>div>div:nth-of-type(2){width:260px ; float:right ;}
#he1>div>div>div:nth-of-type(2) p{margin-top:57px ;}
/*-----*/
#bt2{background:linear-gradient(0deg,#333333,#111111) ; padding:2px 0 ; text-align:center ;}
#bt2>div{display:inline-block ; width:18em ; border:1px #666666 solid ; margin:0 1px ; vertical-align: middle ;}
#bt2>div:nth-of-type(1){width:auto ; border:none ;}
#bt2>div:nth-of-type(2){width:22em ; background:linear-gradient(0deg,#205257,#10292b) ;}
#bt2>div:nth-of-type(3){background:linear-gradient(0deg,#575320,#2b2910) ;}
#bt2>div:nth-of-type(4){background:linear-gradient(0deg,#561f38,#2b0f1c) ;}
#bt2>div:nth-of-type(5){background:linear-gradient(0deg,#282057,#14102b) ;}
#bt2>div:nth-of-type(6){width:auto ; border:none ;}
#bt2>div:nth-of-type(7){background:linear-gradient(0deg,#512158,#28102c) ;}
#bt2 p{font-size:1.3em ; line-height:1.2 ; text-shadow:0 0 1px #000000,0 0 2px #000000,0 0 3px #000000 ; padding:0 1em ;text-align:right ;}
#bt2 p a{display:block ; color:#ffffff ; text-decoration:none ; padding:0.5em ; text-align:center ;}
#bt2 p a:hover{font-size:1.1em ; padding:0.2em ; transition-duration:0.5s ;}
#bt2 p span{font-size:1.5em ;}
/*-----*/
#bt3{padding:5px 0 ; text-align:center ;}
#bt3 p{display:inline-block ; width:auto ; min-width:8em ; font-size:1.4em ; line-height:1.2 ; border-left:1px #666666 solid ; border-right:1px #666666 solid ; margin:0 1px ; vertical-align: middle ;}
#bt3 p a{display:block ; color:#ffffff ; text-decoration:none ; padding:0.2em 0.8em ; text-align:center ;}
#bt3 p a:hover{background:#333333 ; transition-duration:1.0s ;}
}


/*●ｽﾏﾎ●*/@media screen and (max-width:560px){
#he1,#bt2,#bt3,#he7{display:none ;}
/* ヘッダー
###################################################################################### */
header{background:linear-gradient(180deg, #000000 0%, #000000 40%, #000000 40%, #00094a 100%); border-bottom:1px #4d527e solid ; padding-bottom:5px ;}
/*ボタン1,1段目ホームカートメニュー*/
#sphbt1{width:560px ; max-width:100% ; background:#000000 ; margin:0 auto ;}
#sphbt1 p{font-size:0 ;}
#sphbt1 .i11{width:55% ; max-width:308px ; vertical-align:top ;}/*560px設定10%で56px/50%は280px、55%は308px*/
#sphbt1 .i12{width:15% ; max-width:84px ; vertical-align:top ;}/*560px設定/15%で84px*/
#sphbt1me	{cursor:pointer ;}
/*ボタン2,ボタン1のメニューの展開*/
#sphbt2{position:relative ;}
#sphbt2>div{width:100% ; position:absolute ; top:0 ; left:0 ; z-index:9999 ; background:rgba(0,0,38,0.5) ;}
#sphbt2>div>div{margin-right:10px ; margin-left:10px ;}
#sphbt2>div>div p a{display:block ; color:#ffffff ; text-decoration:none ; background:#000026 ; border:1px #4d527e solid ; padding:1.0em 0.7em ; padding-right:20px ; margin-bottom:1px ;}
#sphbt2>div>div:nth-of-type(1) p a{font-size:1.2em ; line-height:1.2 ;}
#sphbt2>div>div:nth-of-type(1) p:nth-of-type(1) a{background:linear-gradient(0deg,#205257,#10292b) ;}
#sphbt2>div>div:nth-of-type(1) p:nth-of-type(2) a{background:linear-gradient(0deg,#575320,#2b2910) ;}
#sphbt2>div>div:nth-of-type(1) p:nth-of-type(3) a{background:linear-gradient(0deg,#561f38,#2b0f1c) ;}
#sphbt2>div>div:nth-of-type(1) p:nth-of-type(4) a{background:linear-gradient(0deg,#282057,#14102b) ;}
#sphbt2>div>div:nth-of-type(1) p:nth-of-type(5) a{background:linear-gradient(0deg,#512158,#28102c) ;}
#sphbt2>div>div p a span{font-size:1.3em ; margin-right:0.3em ;}
#sphbt2>div>div p a span:before{content:'» ' ; color:#808093 ;}
#sphbt2>div>div:nth-of-type(2) p a{font-size:1.3em ; line-height:1.2 ;}
#sphbt2	.p11{text-align:right ; padding:5px ;}
#sphbt2	.p11 img{width:12% ; max-width:40px ; cursor:pointer ;}
#sphbt2d{display:none ;}
}











/*フッター
###################################################################################### */
/*●PC●*/@media screen and (min-width:560px){#sphfo1{display:none;}}
footer{background:#000026 ; padding:5px 0 ;}
/*--------*/
#fo1{border-top:1px #4d527e solid ; padding:10px 0 ;}
#fo1>div{width:1200px ; margin:0 auto ; text-align:center ;}
#fo1>div>div{text-align:center ;}
#fo1>div>div p{display:inline-block ; font-size:2.0em ; line-height:1.1 ; color:#ffffff ;}
#fo1>div>div p:nth-of-type(1){width:450px ; text-align:right ;}
#fo1>div>div p:nth-of-type(2){width:200px ; margin:0 20px ; vertical-align:middle ;}
#fo1>div>div p:nth-of-type(2) img{width:200px ;}
#fo1>div>div p:nth-of-type(3){width:450px ; text-align:left ;}
/*--------*/
#fo2{padding:10px 0 ;}
#fo2>div{margin-bottom:1em ; text-align:center ;}
#fo2>div p{display:inline-block ; font-size:1.3em ; line-height:1.1 ; color:#ffffff ; border-left:1px #4d527e solid ; border-right:1px #4d527e solid ; padding:0.2em 0.5em ; margin:0 0.3em ;}
#fo2>div a{text-decoration:none ;}
#fo2>div a:hover{text-decoration:underline ;}
/*フッターガイド*/
#fo3{color:#ffffff ; border-bottom:1px #4d527e solid ; padding:20px 0 ;}
#fo3>div{width:1200px ; margin:0 auto ;}
#fo3>div>div:nth-of-type(1){width:400px ; float:left ;}
#fo3>div>div:nth-of-type(1) p:nth-of-type(1){font-size:2.0em ; line-height:1.1 ; margin-bottom:0.4em ;}
#fo3>div>div:nth-of-type(1) p:nth-of-type(2){font-size:1.4em ; line-height:1.1 ; margin-bottom:0.4em ;}
#fo3>div>div:nth-of-type(1) p:nth-of-type(3){font-size:3.5em ; line-height:1.2 ; color:#ffffff  ; margin-bottom:0.2em ;}
#fo3>div>div:nth-of-type(1) p:nth-of-type(3) a{text-decoration:none ; color:#ffffff ;}
#fo3>div>div:nth-of-type(1) p:nth-of-type(3) span{font-size:0.8em ;}
#fo3>div>div:nth-of-type(1) p:nth-of-type(4){font-size:1.4em ; line-height:1.1 ; margin-bottom:0.5em ;}
#fo3>div>div:nth-of-type(1) p:nth-of-type(4) span{font-size:0.85em ; font-weight:normal ; color:#ffffff ;  background:#000000 ; border:1px #666666 solid ; padding:0 0.5em ; margin-right:0.2em ;}
#fo3>div>div:nth-of-type(1) p:nth-of-type(5){font-size:1.4em ; line-height:1.1 ;}
#fo3>div>div:nth-of-type(1) p:nth-of-type(5) span{font-size:0.85em ; font-weight:normal ; color:#ffffff ; background:#000000 ; border:1px #666666 solid ; padding:0 0.5em ; margin-right:0.2em ;}
#fo3>div>div:nth-of-type(2){width:800px ; float:right ;}
#fo3>div>div:nth-of-type(2) p:nth-of-type(1){font-size:1.8em ; line-height:1.2 ; color:#000000 ; margin-bottom:0.5em ;}
#fo3>div>div:nth-of-type(2) p img{width:180px ; border:1px #4d527e solid ; box-sizing:border-box ; box-shadow:0 0 5px 5px #000000 ; margin:0 5px ;}
/*コピーライト*/
#fo8{background:#000000 ; padding-bottom:50px ;}
#fo8 div{width:1200px ; margin:0 auto ;}
#fo8 p{font-size:1.1em ; line-height:1.1 ; font-weight:bold ; color:#ffffff ; padding:20px 0 ; text-align:center ;}
#fo8 p span{font-size:1.5em ; font-style: italic ;}
#fo8 a{color:#ffffff ;}
/*トップへボダン*/
#fo9{position:fixed; bottom:2px ; right:2px ; background:#000026 ; border:1px #4d527e solid ;  padding:8px 12px ; opacity:0.8 ;
font-size:1.3em ; line-height:1.0 ; color:#ffffff ; font-family: 'Noto Serif JP', sans-serif; font-weight:700 ; text-decoration:none ; text-shadow:0 0 3px #000000 ; text-align:center ;}
#fo9 span{font-size:0.7em ;}
#fo9:hover{background:#4d4d68 ;}


/*●ｽﾏﾎ●*/@media screen and (max-width:560px){
/*--------*/
#fo1>div{width:auto ;}
/*--------*/
#fo1>div>div p{display:block ; font-size:1.5em ;}
#fo1>div>div p:nth-of-type(1){width:auto ; text-align:center ;}
#fo1>div>div p:nth-of-type(2){width:auto ; text-align:center ;}
#fo1>div>div p:nth-of-type(3){width:auto ; text-align:center ;}
/*--------*/
#fo2{display:none ;}
/*--------*/
#fo3{padding:20px 15px ;}
#fo3>div{width:auto ; margin:0 auto ;}
#fo3>div>div:nth-of-type(1){width:auto ; float:none ; margin-bottom:0.5em ;}
#fo3>div>div:nth-of-type(2){width:auto ; float:none ;}
#fo3>div>div:nth-of-type(2) p img{width:24% ; margin:0 0.5% ;}
/*--------*/
#fo8{width:auto ; padding-bottom:30px ; margin:0 ;}
#fo8 div{width:auto ; margin:0 ;}
#fo8 p{padding:1em ; padding-right:8em ; text-align:left ;}
/*トップへボダン*/
#fo9{font-size:1.5em ;}
/*ボタン1*/
#sphfbt1{margin:5px auto ;}
#sphfbt1 p{border-top:1px #bd8080 solid ;}
#sphfbt1 p a{display:block ; font-size:1.7em ; line-height:1.2 ; color:#ffffff ; text-decoration:none ; background:#7b0000 url("img/sph/mk02.png") no-repeat right center ; padding:0.5em 1em ; border-bottom:1px #bd8080 solid ;}
#sphfbt1 p a img{height:40px ; margin-right:7px ; vertical-align:middle ;}
/*ボタン2*/
#sphfbt2{margin:10px auto ;}
#sphfbt2 p{border:1px #4d527e solid ;}
#sphfbt2 p a{display:block ; font-size:1.2em ; line-height:1.2 ; color:#ffffff ; text-decoration:none ; border-bottom:1px #4d527e solid ;  padding:1em ;}
#sphfbt2 p a span{font-size:1.3em ; margin-right:0.5em ;}
#sphfbt2 p a:nth-of-type(1){background:linear-gradient(0deg,#205257,#10292b) ;}
#sphfbt2 p a:nth-of-type(2){background:linear-gradient(0deg,#575320,#2b2910) ;}
#sphfbt2 p a:nth-of-type(3){background:linear-gradient(0deg,#561f38,#2b0f1c) ;}
#sphfbt2 p a:nth-of-type(4){background:linear-gradient(0deg,#282057,#14102b) ;}
#sphfbt2 p a:nth-of-type(5){background:linear-gradient(0deg,#512158,#28102c) ;}
/*ボタン4*/
#sphfbt4	{padding:10px ;}
#sphfbt4>div{border:1px rgba(255,255,255,0.3) solid ; border-radius:4px ; padding:5px ;}
#sphfbt4 p a{display:block ; font-size:1.3em ; color:#ffffff ; text-decoration:none ; padding:0.7em 1em ; border-bottom:1px rgba(255,255,255,0.3) solid ;}
#sphfbt4 p a:before{content:'»' ; margin-right:10px ; color:#ffffff ;}
#sphfbt4 p:nth-last-of-type(1) a{border:none ;}
}



