@charset "utf-8";

/* reset style
-------------------------------------- */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,address,form,fieldset,input,textarea,p,blockquote { margin: 0;padding: 0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style: normal;}
caption,th {text-align: left;}
img {border: 0; vertical-align: top;}
ul,dl,ol {text-indent: 0;}
li {list-style: none;}
dt,th {font-weight: normal;}
* html body {font-size: small;}
*:first-child+html body {font-size: small;}
pre,code,kbd,samp,tt {font-family: monospace;}
* html pre,* html code,* html kbd,* html samp,* html tt {font-size: 100%; line-height: 100%;}
*:first-child+html pre,*:first-child html+code,*:first-child html+kbd,*:first-child+html+samp,*:first-child+html tt {font-size: 108%; line-height: 100%;}
input,select,textarea {font-size: 100%; font-family: Verdana, Helvetica, sans-serif;}
a:hover {cursor: pointer; opacity: 0.5;}
a:focus {outline: none;}
li p,li li,th p,th li,td p,td li,li dt,li dd,td select,td input,td textarea,td option,dd p,dd li,dd select,dd input,dd textarea,dd option {font-size:100%;}

/* common style
-------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; letter-spacing: 0.2em;}
p,td,th,li,dt,dd,pre { font-size: 93%; line-height:1.5;}
.clear { clear: both; }

/* Global Styles */
body { margin: 0 auto 0; width: 100%; min-height:850px; background: url(../images/main-bg1.jpg) center center /cover no-repeat fixed, linear-gradient(-90deg, rgba(61, 140, 213, 0.9) 20%, rgba(187, 94, 179, 0.9) 60%, rgba(255, 137, 84, 0.9) ), linear-gradient(45deg, rgba( 0, 0, 0, 0.3) 25%, transparent 25%, transparent 75%, rgba( 0, 0, 0, 0.3) 75%, rgba( 0, 0, 0, 0.3)) 0 0 / 25px 25px, linear-gradient(-45deg, rgba( 0, 0, 0, 0.3) 25%, transparent 25%, transparent 75%, rgba( 0, 0, 0, 0.3) 75%, rgba( 0, 0, 0, 0.3))0 0 / 25px 25px;　animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal; font:14px/1 "メイリオ", "ヒラギノ角ゴ Pro W3", "Osaka", "ＭＳ Ｐゴシック", Arial, sans-serif; color: #724e26; }
/*.wrap { overflow: hidden;}*/

@keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1}}
@-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1}}

@media only screen and (min-width : 768px) {
.pc-none { display: none;}
html, body { min-width:980px;}	
}

@media only screen and (max-width : 767px) {
.sp-none { display: none;}
.sub-sp { background: url(../images/main-bg-sp.jpg) repeat-y center 0 100% auto / contain, linear-gradient(-90deg, rgba(61, 140, 213, 0.9) 20%, rgba(187, 94, 179, 0.9) 60%, rgba(255, 137, 84, 0.9) ), linear-gradient(45deg, rgba( 0, 0, 0, 0.3) 25%, transparent 25%, transparent 75%, rgba( 0, 0, 0, 0.3) 75%, rgba( 0, 0, 0, 0.3)) 0 0 / 25px 25px, linear-gradient(-45deg, rgba( 0, 0, 0, 0.3) 25%, transparent 25%, transparent 75%, rgba( 0, 0, 0, 0.3) 75%, rgba( 0, 0, 0, 0.3))0 0 / 25px 25px; }	
}

/* Header */
header {text-align: center; display: block; max-width: 980px; margin: 0 auto; }
header .head { display: flex; margin-top: 10px;}
header .head .top-logo { width:37%; text-align: left; z-index: 1; }
header .head .top-tv { width: 63%; text-align: right; }

@media only screen and (max-width : 767px) {
header .head {display:inherit;}
header .head .top-logo { width:100%; text-align: center;}
header .head .top-logo img { width: 45%; height: auto;}	
header .head .top-tv { width: 0%;}	
}

/* sub-Header */
header {text-align: center; display: block;}
header .sub-head { display: flex; min-height: 180px;}
header .sub-head .sub-logo { width:23%; text-align: left; z-index: 1; margin-top: 10px;}
header .sub-head .sub-logo img { width: 100%; height: auto;}
header .sub-head .sub-navi { width:77%;}

@media only screen and (max-width : 767px) {
header .sub-head { display:inherit; min-height: 130px;}
header .sub-head .sub-logo { width:100%; text-align: center;}
header .sub-head .sub-logo img { width: 45%; height: auto;}	
}


/* navi */
@media only screen and (min-width : 768px) {
input, label { display: none;}
.top-menu { display: flex;}	
/* top-navi-------------------------------------- */	
#pc_box li img { width: auto; height: 180px;}
.bt-01 { position: absolute; top: 645px; left: 20px;}
.bt-02 { position: absolute; top: 600px; left: 155px;}
.bt-03 { position: absolute; top: 740px; left: 220px;}
.bt-04 { position: absolute; top: 685px; left: 355px;}
.bt-05 { position: absolute; top: 790px; left: 460px;}
.bt-06 { position: absolute; top: 710px; left: 600px;}
.bt-07 { position: absolute; top: 765px; left: 720px;}
.bt-08 { position: absolute; top: 640px; left: 838px;}
.bt-09 { display: none;}
/*.bt-haishin { position: absolute; top: 440px; left: 690px;}	*/
.bt-haishin { position: absolute; top: 420px; left: 690px;}		
.sp_box_btn { display: none;}
	
/* sub-navi-------------------------------------- */
.sub-head { position: relative; background: url(../images/score-top.png) no-repeat 50px -200px;}
/*.sub-logo { margin-top: 0px; padding-top: 5px; z-index: 2; text-align: left;}*/
.sub-menu { display: flex;}		
#pc_box_s { width: 940px; margin: 0 auto;}
#pc_box_s li img { width: auto; height: 120px;}
.bts-01 { position: absolute; top: 45px; left: 220px;}
.bts-02 { position: absolute; top: 5px; left: 320px;}
.bts-03 { position: absolute; top: 70px; left: 395px;}
.bts-04 { position: absolute; top: 15px; left: 490px;}
.bts-05 { position: absolute; top: 80px; left: 565px;}
.bts-06 { position: absolute; top: 15px; left: 660px;}
.bts-07 { position: absolute; top: 65px; left: 740px;}
.bts-08 { position: absolute; top: 5px; left: 835px;}
.bts-09 { position: absolute; top: 110px; left: 880px;}
}

@media only screen and (max-width : 767px) {
#sp_box { display: none;}
label.open, label.close { cursor: pointer; position: fixed; top: 0px; left: 0px; padding-top: 10px; padding-left: 5px;}
.open { z-index: 3; width: 60px; height: 60px;
-webkit-transition: background-color .6s, -webkit-transform .6s; transition: background-color .6s, transform .6s;
} 
#sp_box:checked + .open { -webkit-transform: translateX(220px); transform: translateX(220px);}
.close { pointer-events: none; z-index: 2; width: 100%; height: 100%; transition: background-color .6s;}
#sp_box:checked ~ .close { pointer-events: auto; background-color: rgba(0,0,0,.3);}

/* sp-menu */
.sp-menu { z-index: 2; position: fixed; top: 0; left: 0; width: 300px; height: 100%; background: linear-gradient(-90deg, rgba(61, 140, 213, 0.8) 20%, rgba(187, 94, 179, 0.8) 60%, rgba(255, 137, 84, 0.8) ), linear-gradient(45deg, rgba( 255, 255, 255, 0.7) 25%, transparent 25%, transparent 75%, rgba( 255, 255, 255, 0.7) 75%, rgba( 255, 255, 255, 0.7)) 0 0 / 25px 25px, linear-gradient(-45deg, rgba( 255, 255, 255, 0.7) 25%, transparent 25%, transparent 75%, rgba( 255, 255, 255, 0.7) 75%, rgba( 255, 255, 255, 0.7))0 0 / 25px 25px; border-right: solid 5px rgba(174,132,0,1.0);
-webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform .6s; transition: transform .6s;} 
#sp_box:checked ~ .sp-menu { -webkit-transform: translateX(0); transform: translateX(0);}
.sp-menu-list { display: flex; flex-wrap: wrap; align-items: flex-end; margin-top: 80px; background: url(../images/navi-score2.png) repeat 0px 20px; }	
.sp-menu-list li { width: 33.33%; margin-bottom: 5px;}
#pc_box li img { width: 87% !important;}
#pc_box_s li img { width: 85% !important;}	
.sp-pl { padding-left: 10px;}
	
.bt-haishin { position: inherit; top: -20px; left: 0px; z-index: 1; padding-top: 100%; text-align: center;}
.top-main-sec .bt-haishin img { width: 60%; height: auto;}	
}	

/* sub Main Content sections */
.sub-title{ width: 100%; height: 28px; margin: 30px auto 0px; background:url(../images/navi-score.png) repeat-x top;}
.sub-category { width: 980px; margin: -70px auto 0;}
.sub-main { width: 100%; min-width: 980px; min-height: 900px; background-color: rgba( 255, 255, 255, 0.4);
/*background-image: linear-gradient(45deg, rgba( 255, 255, 255, 0.1) 25%, transparent 25%, transparent 75%, rgba( 255, 255, 255, 0.1) 75%, rgba( 255, 255, 255, 0.1)), linear-gradient(-45deg, rgba( 255, 255, 255, 0.1) 25%, transparent 25%, transparent 75%, rgba( 255, 255, 255, 0.1) 75%, rgba( 255, 255, 255, 0.1));
background-size: 25px 25px;*/ margin-top: 0px; padding: 10px 0 50px;}
.sub-b-line { width: 100%; height: 63px; margin: 0px auto; background: url(../images/note-sub.png) repeat-x center top, url(../images/navi-score.png) repeat-x center top;  }


@media only screen and (max-width : 767px) {
.sub-title{ width: 100%; height: 28px; margin: 0px auto 0px;}	
.sub-category { width: 100%; margin:-70px auto 0; text-align: center;}
.sub-category img { width: 90%; margin: 0 auto;}
.sub-main { width: 100%; min-width: 100%; min-height: auto; margin-top: 0px; padding: 20px 0 50px;}	
}

	
/* footer style 
-------------------------------------- */
.footer { width:100%; min-height:200px; text-align:center; margin:50px auto 0; color: #fff; line-height: 20px;}
.footer a { color: #fff; text-decoration: none;}
.footer a:hover { color: #fff;}
.bnp { margin:20px 0px;}

@media screen and (max-width: 767px) {
.footer { width:90%; height:auto;}
.bnp { margin:20px 0px;}	
}