@charset "utf-8";
html {
overflow-y: scroll;
}
body {
color: #222222;
margin: 0px;
padding: 0px;
font-size: 19px;
line-height: 2; 
font-family:'Barlow', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3",  sans-serif;
-webkit-text-size-adjust:100% !important
}
::selection {
background: #ff9d00;
color: #fff;
}

img {
max-width: 70%;
margin: 0 auto 3em auto;
display:block;
}
a{
color: #0B0BFF;	
text-decoration: none;
}
a:hover {
color: #7EA3E8;
text-decoration: none;
}
header {
width: 100%;
background-color: #ffffff;
z-index: 9999;
height:4em;
position: fixed;
left: 0;
top: 0;
box-shadow: 0px 0px 4px 3px rgba(72,42,0,.3);
-webkit-box-shadow: 0px 0px 4px 3px rgba(72,42,0,.3);
-moz-box-shadow: 0px 0px 4px 3px rgba(72,42,0,.3);
}
.sp_title{
display: inline;
height: 2em;
margin:1em 1.5em 1em 1.5em;
}
#menusp ul{
text-align: right;
margin: 0.5em 1em 1em 0;
list-style: none;
width: 100%;
display: block;
position: absolute;
bottom: 0;
right: 0;
}
#menusp li{
display:inline-block;
vertical-align: middle;
margin: 0;
width:auto;
padding-left:1em;
}
#menusp li a{
display: block; 
text-decoration: none;
font-weight: 700;
color: #a0a0a0;
margin: 0;
text-align: center;
text-decoration: none;
letter-spacing: -0.07em;
position: relative;
}
.menuspsp {
letter-spacing: 0;
}
.nownow{
color:#222222;
}
#menusp li a::after {
position: absolute;
bottom: -8px;
left: 0;
content: '';
width: 100%;
height: 3px;
background: #ff9d00;
opacity: 0;
visibility: hidden;
transition: .3s;
}
#menusp li a:hover::after {
bottom: -4px;
opacity: 1;
visibility: visible;
}
main {
margin: 5.5em auto 0 auto ;
text-align: left;
max-width: 55em;
z-index: 99;
}

.index{
margin: 0 auto;
text-align: left;
max-width: 100%;
}
.center{
text-align: center;
display: block;
}
.nav-unshown {
display:none;
}
.pc_unshown{
display: none;
}
/*下部メニュー*/
.bottomnavi{
position: relative;
display: flex;
justify-content: space-between;
padding: 1em 3em;
}
.prev{
position: relative;
display: inline-block;
padding: 0 0.2em 0 1.8em;
font-size: 1.5em;
border-bottom:#222222 2px solid;
color: #222222;
cursor: pointer;
transition: all .5s;
font-family: 'Pathway Gothic One', sans-serif;
font-weight: 600;
letter-spacing: 0.1em;
}
.prev::before{
content: '';
position: absolute;
top: 43%;
display: inline-block;
left: 0.5em;
width: 1.3em;
height: 1.2em;
border-left: 3px solid #222222;
transform: skewX(-45deg);
transition: all .5s;
}
.prev:hover{
color: #a5a5a5;
border-bottom:#a5a5a5 2px solid;
}
.prev:hover::before{
border-left: 3px solid #a5a5a5;
}
.back{
position: relative;
display: inline-block;
padding: 0.1em 1.6em 0.1em 1.6em;
font-size: 1.5em;
color: #ffffff;
background: #222222;
transition: all 1s;
font-family: 'Pathway Gothic One', sans-serif;
font-weight: 500;
letter-spacing: 0.1em;
}
.back:hover{
color: #ffffff;
background: #a5a5a5;
}
.next{
position: relative;
display: inline-block;
padding: 0 1.9em 0 0.3em;
font-size: 1.5em;
border-bottom:#222222 2px solid;
color: #222222;
cursor: pointer;
transition: all .5s;
font-family: 'Pathway Gothic One', sans-serif;
font-weight: 600;
letter-spacing: 0.1em;
}
.next::after{
content: '';
position: absolute;
top: 43%;
display: inline-flex;
width: 1.3em;
height: 1.2em;
border-right: 3px solid #222222;
transform: skewX(45deg);
right:0.5em;
color: #222222;
transition: all .5s;
}
.next:hover{
color: #a5a5a5;
border-bottom:#a5a5a5 2px solid;
}
.next:hover::after{
border-right: 3px solid #a5a5a5;
}
/*フッター*/
footer{
margin-top:2em;
margin-bottom: 0;
bottom:0;
text-align: center;
font-size:80%;
background-color: #222222;
color: #eeeeee;
padding: 2em;
}
footer a{
color: #ff9d00;
}
footer a:hover{
color: #ffd27f;
}
/*見出し*/
h1{
font-size:1.4em;
background: #ff9d00;
color:#ffffff;
padding: 0.35em 0 0.35em 0.75em;
}
h2{
font-size: 1.2em;
border-left: solid 4px #ff9d00;
padding-left: 0.5em;
}
h3{
font-size:1.2em;
border-bottom: solid 1.3px #cccccc;
padding-left:0.5em; 
}
/*段落*/
p{
margin: 0.5em 1em 2.5em 1em;
line-height: 1.9;
}

/*パンくずリスト*/
.bread {
margin-left:0;
padding: 0.3em 0.5em;
overflow: hidden;
vertical-align: middle;
}
.bread li {
display:inline;
list-style: none;
font-weight: 700;
}
.bread li:after {
content: '>';
padding: 0 0.2em;
color: #888888;
font-size:0.8em;
}
.bread li:last-child:after {
content: '';
}
.bread li a {
text-decoration: none;
color: #ff9d00;
font-size: 0.8em;
}
.bread li a:hover {
text-decoration: underline;
}
blockquote {
margin: 2.5em;
position: relative;
padding: 2em 1em 0.5em 1em;
box-sizing: border-box;
background: #fff6bf;
border-left: #ff9d00 0.5em solid;
}
blockquote::before{
display: inline-block;
position: absolute;
top: 0.5em;
left: 0.5em;
vertical-align: middle;
content: "\f10d";
font-family: FontAwesome;
color: #ff9d00;
font-size: 2em;
line-height: 1;
font-weight: 900;
}
blockquote p{
margin: 1em;
color: #555;
}
.psource{
text-align: right;
}
.source{
font-size:0.75em;
color: #555;
}
.summary {
position: relative;
margin: 6em 0.5em;
padding: 0.8em 1.2em;
border: solid 0.17em #ff9d00;
background: #fff6bf;
}
.summary .summary-title {
position: absolute;
display: inline-block;
top: -1.5em;
left: -0.12em;
padding: 0 0.4em;
height: 1.45em;
line-height: 1.6em;
vertical-align: middle;
font-size: 1.4em;
background: #ff9d00;
color: #ffffff;
font-weight: 700;
border-radius: 0.3em 0.3em 0 0;
letter-spacing: 0.05em;
}
.summary .summary-title::before {
padding-right:0.2em; 
content: "\f024";
font-family: FontAwesome;
font-weight: 400;
}
.summary p {
margin: 0; 
padding: 0;
}
.check::before {
font-family: FontAwesome;
content: '\f046';
padding-right : 0.3em;
}
.highlight {
background: linear-gradient(transparent 60%, #ffff00 60%);
font-weight: 700; 
}
.js {
background: linear-gradient(transparent 60%, #fae698 60%);
font-weight: 700;
padding:0 0.3em;
}
.tr {
background: linear-gradient(transparent 60%, #98fb98 60%);
font-weight: 700;
padding:0 0.3em;
}
.hk {
background: linear-gradient(transparent 60%, #bf98fa 60%);
font-weight: 700; 
padding:0 0.3em;
}
.km {
background: linear-gradient(transparent 60%, #fa98bf 60%);
font-weight: 700; 
padding:0 0.3em;
}
.jr {
background: linear-gradient(transparent 60%, #98e6fa 60%);
font-weight: 700; 
padding:0 0.15em;}
.box {
margin: 1.5em;
position: relative;
padding: 1em 0.7em;
background: #fff6bf;
}
.box p {
margin: 0; 
padding: 0.5em 2em;
}
.gazo{
text-align: center;
}
.six{
max-width: 28em;
display: block;
margin:auto;
padding: 0.5em 0.7em 2.7em 0.7em;
}

.menu_btn{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-content: space-around;
}
.btn_o{
display: flex;
flex-direction: column;
align-content:flex-start;
text-align: center;
width:300px;
height:auto;
line-height: 0.7;
box-shadow: 0 6px 4px -4px rgba(72,42,0,.3);
margin: 2em .5em;    
}
.btn_o:hover{
box-shadow: 0 12px 8px -4px rgba(72,42,0,.3);
transform: translateY(-.3em);
transition: all 0.3s ease 0s;
}
.btn_bg_orange{
padding:0.9em;
margin:0;
background-color: #ffc966;
font-size:1.05em;
font-weight: 700;
color:#666666;
letter-spacing: 0em;
border-right: solid 1.5px #ffc966;
border-left: solid 1.5px #ffc966;
}
.btn_i{
border-top: solid 1.5px #ffc966;
border-right: solid 1.5px #ffc966;
border-left: solid 1.5px #ffc966;
}
.btn_i img{
margin:0;
}
.btn_o img{
max-width:100%;
}
.ie::before {
font-family: FontAwesome;
content: '\f26b';
padding-right : 0.3em;
}
.gc::before {
font-family: FontAwesome;
content: '\f268';
padding-right : 0.3em;
}
#top_image{
z-index: 99;
margin-top: 4em;
}
.st0{
fill:#6CB8FF;
}
.st1{fill:#FFB769;}
.st2{fill:#fafa87;}
.st2-1{fill:#FFA500;}
.st3{fill:#724B11;}
.st4{fill:#21C614;}
.st5{fill:#141413;}
.bcrz{
margin-bottom: 0;
}
.big{
font-size:2em;
font-weight:700;
background: linear-gradient(transparent 60%, #ffba00 60%);
padding-left:0.2em;
}
.hksn{
background: #ffda96;
padding:1.5em 1.8em;
}
#videoindex{
border: solid 1px #666666;
}
.bullets::before {
font-family: FontAwesome;
content: '\f0c8';
padding:0.25em;
color:#ffa500;
font-size:0.95em;
vertical-align:inherit;
}
.bullets{
padding-left:1em;
}
.urlsss{
margin:0 2em 1em 2em;
}
/*tablets=----------tablets=----------tablets=----------tablets=----------*/
@media screen and (max-width: 1300px) {
.sp_title{
max-width:275px;
margin-top:1em;
}
#menusp li a{
font-size:0.85em;
}
.small{
font-size: 0.9em;
}
.yohaku333{
margin-left:3em; 
}
/*smartphones-------smartphones-------smartphones-------smartphones-------*/
@media screen and (max-width: 1000px) {
body {	
max-width: 100% ;
font-size: 15px;
line-height: 1.8; 
margin-bottom: 0.5em;
overflow-x: hidden;
}
header {
height:4em;
position: fixed;
box-shadow: 0px 0px 3px 3px rgba(72,42,0,.3);
-webkit-box-shadow: 0px 0px 3px 3px rgba(72,42,0,.3);
-moz-box-shadow: 0px 0px 3px 3px rgba(72,42,0,.3);
}
#top_image{
margin-top: 3.75em;
display: inline;
}
h1{
padding: 0.2em 0.3em;
}
h2{
padding: 0.05em 0.1em;
}
iframe {
width:100%;
}
img{
max-width:95%;
height:auto;
}
.humberger {
color: #888888;
}
.sp_title{
width:60%;
margin-top: 0.8em;
margin-left:0;
}
.container{
display: block;
}
#nav-drawer {
display: block;
position: relative;
}
#nav-open {
padding:15px;
display: inline-block;
width: 25px;
height: 20px;
vertical-align: middle;
}	
.nav-closed{
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;   
}  
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 997;
width: 70%;
height: 100%;
background: #fff;
transition: .3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
#nav-input:checked ~ #nav-close {
display: block;
opacity: 0.3;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,0.15);
}
.pc_unshown{
display: block;
}
.sp_button{
float:left;
}
#menusp ul{
top: 0;
bottom: auto;
margin: 0; 
padding:0; 
width:100%;
}
#menusp li{ 
padding:0.5em;
margin: 0;
width:100%;
clear: left;
}
.now{
background: #ffdb99;
}
.nownow{
color: #222222;
}
#menusp li a{
letter-spacing: 0;
display: block; 
padding: 0.3em 0.6em;
text-decoration: none;
color: #333;
margin: 0px;
text-align: left;
font-size:15px;
}
#menusp li a::after {
display: none;
}
#menusp li a:hover::after {
display: none;
}
.menu_close{
font-weight: 700;
padding: 0.8em 0;
position: fixed;
bottom: 0;
text-align: center;
color: #ffffff;
background-color: #ff9d00;
width: 100%;
letter-spacing: 0.3em;
}
.menu_moji_sp{
font-size:1.4em;
color: #ff9d00;
font-weight: 700;
padding: 0.6em 0 0.2em 0.6em;
text-align: left;
}
main{
margin: 5em 0.8em 0.5em 0.8em;
}
blockquote {
margin: 1em 0.5em;
}
.smartphone_unshown{
display: none;
}
.bottomnavi{
position: relative;
display: flex;
justify-content: space-between;
padding: 1em 0.5em;
}
.prev{
position: relative;
display: inline-block;
padding: 0 0.2em 0 1.8em;
font-size: 1.5em;
border-bottom:#222222 1.5px solid;
color: #222222;
cursor: pointer;
transition: all .5s;
}
.prev::before{
content: '';
position: absolute;
top: 28%;
display: inline-block;
left: 0.5em;
width: 1.3em;
height: 1.2em;
border-left: 1.9px solid #222222;
transform: skewX(-45deg);
transition: all .5s;
}
.prev:hover{
color: #a5a5a5;
border-bottom:#a5a5a5 1.5px solid;
}
.prev:hover::before{
border-left: 1.9px solid #a5a5a5;
}
.back{
display: none;
}
.next{
position: relative;
display: inline-block;
padding: 0 1.9em 0 0.3em;
font-size: 1.5em;
border-bottom:#222222 1.5px solid;
color: #222222;
cursor: pointer;
transition: all .5s;
}
.next::after{
content: '';
position: absolute;
top: 28%;
display: inline-flex;
width: 1.3em;
height: 1.2em;
border-right: 1.9px solid #222222;
transform: skewX(45deg);
right:0.5em;
color: #222222;
transition: all .5s;
}
.next:hover{
color: #a5a5a5;
border-bottom:#a5a5a5 1.5px solid;
}
.next:hover::after{
border-right: 1.9px solid #a5a5a5;
}
.six{
width:88%;
}

}