@charset "utf-8";
/* ------------------------------------------------------------------------------
japan-izm.com
------------------------------------------------------------------------------ */

/* FontStyle */
strong {
font-weight: bold;
}
em {
font-style: italic;
}
/* LinkColor */
a, a:visited {
color: #3b6ab3;
}
/* TableStyle */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
* {
box-sizing: border-box;
}
*/

/* フォント */

/* ホバー */

/* ドラッグ選択時色 */

/* デフォルトのスタイルリセット */

/* 入力フィールドの長さ */
/* ------------------------------------------------------------------------------
Template
------------------------------------------------------------------------------ */
/* ---------- PC ---------- */
body{
color:#1a1b25;
}
img{
max-width:100%;
height:auto;
}

.headWrap{
width:100%;
background:url(../img_common/bg_header.jpg) no-repeat 50% 0;
background-size:cover;
box-shadow:0 0 5px rgba(0,0,0,0.2);
position:relative;
z-index:100;
}
.headWrap header{
max-width:1000px;
margin:0 auto;
position:relative;
}
.headWrap header h1{
width:240px;
height:100px;
float:left;
overflow:visible;
position:relative;
z-index:120;
}
.headWrap header h1 a{
display:block;
padding: 15px;
border-bottom: solid 1px #eef3f8;
background-color: #eef3f8;
background-image: url("../img_common/bg_logo.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.headWrap header #gNav{
box-sizing:content-box;
max-width:750px;
padding-top:50px;
float:right;
position:relative;
z-index:110;
}
#gNav .gNavList01 li{
float:left;
}
#gNav .gNavList01 li + li{
margin-left:60px;
}
#gNav .gNavList01 li a{
box-sizing:content-box;
display:flex;
height:46px;
align-items:center;
color:#fff;
font-size:140%;
font-weight:bold;
line-height:1.1;
text-align:center;
text-decoration:none;
padding:0 10px;
}
#gNav .gNavList01 li.on a, #gNav .gNavList01 li a:hover{
border-bottom:solid 4px #eb6506;
}
#gNav .gNavList02{
position:absolute;
top:20px;
right:0;
}
#gNav .gNavList02 li{
float:left;
padding: 0 10px;
}
#gNav .gNavList02 li + li{
margin-left:10px;
}
#gNav .gNavList02 li a{
display:block;
color:#fff;
font-size:140%;
font-weight:bold;
line-height:15px;
padding-left:16px;
text-decoration:none;
position:relative;
}
#gNav .gNavList02 li a:hover{
text-decoration:underline;
}
.gNavList02_a::before{
content:"";
display:block;
width:5px;
height:5px;
border-top:solid 2px #fff;
border-right:solid 2px #fff;
position:absolute;
top:calc(50% - 3px);
left:0;
transform:rotate(45deg);
}
.gNavList02_a2::before{
content:"";
display:block;
width:16px;
height:16px;
position:absolute;
top:calc(50% - 8px);
left:-2px;
background: url(../img_common/icon.png) 50% 50% no-repeat;
background-size: contain;
}

#gNavToggle{
display:none;
}

.breadCrumbs{
padding:8px 10px;
background:#132134;
}
.breadCrumbs ul{
max-width:1000px;
margin:0 auto;
}
.breadCrumbs li{
float:left;
font-size:140%;
color:#fff;
}
.breadCrumbs li + li{
margin-left:0.5em;
}
.breadCrumbs li a{
color:#ff9505;
}
.breadCrumbs li a:hover{
text-decoration:none;
}

.mainTit{
display:flex;
align-items:center;
justify-content:center;
background: url(../img_common/bg_title.jpg) no-repeat 50% 50%;
background-size: cover;
height:180px;
}
.mainTit h2{
font-size:360%;
font-weight:bold;
text-align:center;
color:#1f1f1f;
letter-spacing:0.05em;
}
.mainTit h2 span{
display:block;
padding-top:5px;
font-family: 'Open Sans', sans-serif;
font-size:44.4%;
color:#ff9505;
letter-spacing:0.4em;
}

.contWrap{
max-width:1000px;
margin:0 auto;
padding:85px 10px 0;
}
.contWrap > p{
font-size:160%;
line-height:1.8;
margin-bottom:25px;
}

.contWrap a{
transition:0.3s;
}
.contWrap a:hover{
opacity:0.75;
}

.txtCenter{
text-align:center;
}

.fntLarge{
font-size:240% !important;
}

footer{
margin-top:120px;
position:relative;
}
.fooOuter{
width:100%;
background:url(../img_common/bg_footer.jpg) no-repeat 50% 0;
background-size:cover;
}
.fooInner{
max-width:1000px;
margin:0 auto;
padding:66px 10px 23px;
}
.fooInnBanner{
max-width:748px;
margin:0 auto 0;
}
.fooInnBanner li{
float:left;
width:33%;
margin-bottom:0.8%;
}
.fooInnBanner li + li{
margin-left:0.5%;
}
.fooInnBanner li:nth-child(4){
margin-left:0px !important;
}
.fooInnBanner02{
max-width:494px;
margin:0 auto 110px;
}
.fooInnBanner02 li{
float:left;
width:49.5%;
margin-bottom:0.8%;
}
.fooInnBanner02 li + li{
margin-left:1%;
}
.fooInnLink{
display:flex;
justify-content: center;
flex-wrap: wrap;
}
.fooInnLink li {
margin-bottom: 1.2em;
}
.fooInnLink li a {
padding: 0 1em;
color:#fff;
font-size:140%;
text-decoration:none;
}
.fooInnLink li a:hover{
text-decoration:underline;
}
.fooCopy{
text-align:center;
font-size:100%;
font-weight:bold;
font-style:italic;
color:#ff9505;
letter-spacing:0.4em;
padding:23px 0;
background:#132134;
}
.pagetop{
position:absolute;
bottom: 66px;
right: 20px;
}
.pagetop a{
display:block;
width:70px;
height:70px;
text-indent:-9999px;
background:url(../img_common/pagetop.png) no-repeat;
background-size:contain;
}

/* ------------------------------------------------------------- */
@media screen and (max-width: 820px) {
/* SP ---------------------------------------------------------- */

.headWrap header h1{
width:70px;
height:50px;
}
.headWrap header h1 a{
width: 85px;
padding: 10px 30px;
}
.headWrap header h1 a img {
width: 100%;
}

.headWrap header #gNav{
max-width:inherit;
width:100%;
max-height:0;
padding-top:0;
float:none;
background:linear-gradient(90deg, #0c21c3, #0874dc);
overflow:hidden;
position:absolute;
top:49px;
left:0;
transition:0.4s;
}
#gNav .gNavList01{
padding:15px 0 0;
}
#gNav .gNavList01 li{
float:none;
text-align:center;
}
#gNav .gNavList01 li + li{
margin:10px 0 0;
}
#gNav .gNavList01 li a{
display:inline;
font-size:150%;
line-height:25px;
padding:0;
}
#gNav .gNavList01 li.on a, #gNav .gNavList01 li a:hover{
border-bottom:0;
}
#gNav .gNavList02{
position:static;
padding:10px 0 15px;
}
#gNav .gNavList02 li{
float:none;
text-align:center;
}
#gNav .gNavList02 li + li{
margin:10px 0 0;
}
#gNav .gNavList02 li a{
display:inline;
color:#fff;
font-size:150%;
line-height:25px;
padding-left:0;
text-decoration:none;
position:relative;
}
#gNav .gNavList02 li a:hover{
text-decoration:none;
}
.gNavList02_a::before{
display:none;
}
.gNavList02_a2::before{
left:-20px;
}
#gNavToggle{
display:block;
width:40px;
height:40px;
background:transparent;
border:0;
position:absolute;
top:5px;
right:10px;
}
#gNavToggle span{
display:block;
width:25px;
height:2px;
background:#fff;
position:absolute;
left:7px;
}
#gNavToggle span:nth-child(1){
top:11px;
transition:0.3s
}
#gNavToggle span:nth-child(2){
top:calc(50% - 1px);
transition:0.2s
}
#gNavToggle span:nth-child(3){
bottom:11px;
transition:0.3s
}

.headWrap header #gNav.js-open{
max-height:350px;
transition:0.45s;
}

#gNavToggle.js-active span:nth-child(1){
top:calc(50% - 1px);
transform:rotate(-45deg);
}
#gNavToggle.js-active span:nth-child(2){
opacity:0;
}
#gNavToggle.js-active span:nth-child(3){
bottom:calc(50% - 1px);
transform:rotate(45deg);
}

.pagetop{
bottom: 30px;
}

}

/* ------------------------------------------------------------- */
@media screen and (max-width: 750px) {
/* SP ---------------------------------------------------------- */

.breadCrumbs{
padding:5px 10px;
}
.breadCrumbs li{
font-size:130%;
}

.mainTit{
height:120px;
}
.mainTit h2{
font-size:220%;
}
.mainTit h2 span{
font-size:63.6%;
}

.contWrap{
padding-top:40px;
}

.contWrap a:hover{
opacity:1;
}

.fntLarge{
font-size:180% !important;
}

footer{
margin-top:60px;
}
.fooInner{
padding:30px 10px 0;
}
.fooInnBanner{
max-width:722px;
margin:0 auto;
}
.fooInnBanner li{
float:none;
width:auto;
text-align:center;
}
.fooInnBanner li + li{
margin:10px 0 0;
}

.fooInnBanner02{
max-width:722px;
margin:0 auto;
}
.fooInnBanner02 li{
float:none;
width:auto;
text-align:center;
margin:10px 0 0;
}
.fooInnLink{
display:none;
}
.fooCopy{
padding:10px 0;
}
.pagetop{
padding:20px 0;
position:static;
}
.pagetop a{
width:40px;
height:40px;
margin:0 auto;
}

}
