@charset "UTF-8";



body {overflow-x: hidden;}
/*===============================================
画面の横幅が641px以上
===============================================*/
@media  print, screen and (min-width: 641px){

body {
text-align: center;
margin: 0px;
padding: 0px;
}

#wrap{
min-width:1200px;}

a:hover img {opacity: 0.5;}


.re_top { display:none; position: fixed; bottom: 20px; right: 20px;z-index: 999;}
.re_top a { width:50px; height:50px; display: block;}
.re_top a img{ width:100%; height:auto;}
.re_top a:hover { filter:alpha(opacity=60);opacity:0.6;}

#slider_wrap{
display:none;}


#container {
width: 100%;
height:620px;
text-align: center;}

/*=========================ヘッダー============================*/

#header_box{
position:relative;}

#header{
z-index:100;
position:absolute;
top:0;
width:100%;
height:110px;}

.logo{
float:left;
width:300px;
margin:15px 30px 0 0;}

.logo img{
width:100%;}

.navi{
width:80%;
height:80px;
margin:0 auto;
min-width:1060px;}

.navi h1{
width:1000px;
text-align:left;
padding-top:5px;}

.navi ul{
margin:0;}

.navi .rogo{
float:left;}

.navi .menu{
float:left;
margin:51px 0 0 0;}

.navi ul li{
float:left;
list-style:none;}

.navi ul li a{
font-size:13px;
font-weight:bold;
color:#fff;
text-decoration:none;
margin: 0 15px 0 0;}

.navi ul li a:hover{
opacity:0.5;
filter:alpha(opacity=60);
-ms-filter: “alpha( opacity=60 )”;}

.pc_none{
display:none;}

.contact{
margin-top:25px;
height:47px;
float:right;}

.contact a:hover img{
margin:-40px 0 0 20px;}

.contact ul {display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
.contact ul li {margin: 0 0 0 10px;}
.contact ul li:first-child {margin: 0;}
.contact ul li a {margin: 0;} 



#navi{
float:left;
margin:45px 0 0 0;}

#toggle{ display:none;}

.button {
font-size:14px;line-height: 47px;
font-weight:bold;
display:inline-block;
width: auto;
height: 47px;
text-align: center;
text-decoration: none;
outline: none;
background-color: #e5002d;
border: 2px solid #e5002d;
border-radius:3px;
color: #fff;
padding: 0 20px;}
.button:hover {
font-size:14px;line-height: 40px;
font-weight:bold;
cursor:pointer;
background-color: #fff;
border: 2px solid #e5002d;
color: #e5002d;}

.button::before,
.button::after {
position: absolute;
z-index: -1;
display: block;
content: '';}
.button,
.button::before,
.button::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;}

.button2 {
font-size:14px;
font-weight:bold;
display:inline-block;
width: auto;
height: 47px;
text-align: center;
text-decoration: none;
outline: none;
background-color: #0068B6;
border: 2px solid #0068B6;
border-radius:3px;
color: #fff;
line-height: 45px;padding: 0 10px;}
.button2:hover {
cursor:pointer;
background-color: #fff;
border-color: #0068B6;
color: #0068B6;}

.button2::before,
.button2::after {
position: absolute;
z-index: -1;
display: block;
content: '';}
.button2,
.button2::before,
.button2::after {
color: #ffffff!important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;}




/*---------------フッターここから---------------*/


#footer{
float:none;
clear:both;
background-color:#e0e9f3;}
#footer a {color: #000000;}
#footer a:hover {color: #0085CD;}

#footer ul{
width:1000px;
margin:0 auto;
padding:30px 0;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}

#footer ul li{
list-style-type:none;
float:left;
font-size:13px;
line-height:20px;
}


#footer ul li img {width: 304px;height: auto;}
#footer ul li:nth-child(1){margin:0;}

#footer ul li:nth-child(2){
margin:0 0 0 20px;
font-size:13px;
text-align:left;position: relative;}
#footer ul li:nth-child(2) p {width: 500px; position: absolute;
top: 50%;
-webkit-transform : translateY(-50%);
transform : translateY(-50%);}

.copylight{
background: #0068b6;
color:#ffffff;
font-size:12px;
font-weight: 700;
margin:0;
padding: 15px 0;}


/*---------------白いヘッダーここから---------------*/

#header2{
background-image:url(../images/header_back.png);
background-repeat:repeat-x;
width:100%;
height:110px;
display:none;
z-index:9999!important;}

.logo2{
float:left;
width:300px;
margin:15px 30px 0 0;}

.logo2 img{
width:100%;}

.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;}

#header2 .navi{
width:80%;
height:80px;
margin:0 auto;
min-width:1050px;}

#header2 .navi .rogo{}

#header2 .navi .menu{
float:left;
margin:45px 0 0 0!important;}
#header2 .navi .menu li:last-child {display: none;}

#header2 .navi ul{}

#header2 .navi ul li{
float:left;
margin: 0 15px 0 0;
list-style:none;}
#header2 .navi ul li:last-child {}
#header2 .navi ul li a{
font-size:13px;
color:#333;
text-decoration:none;
margin: 0;}

#header2 .navi ul li a:hover{
opacity:0.5;
filter:alpha(opacity=60);
-ms-filter: “alpha( opacity=60 )”;}

#header2 .navi .contact ul li {margin: 0 0 0 10px;}
#header2 .navi .contact ul li:first-child {margin: 0;}
#header2 .navi .contact ul li a{color:#fff;}
#header2 .navi .contact ul li .button:hover {
cursor:pointer;
background-color: #fff;
border-color: #e5002d;
color: #e5002d;}
#header2 .navi .contact ul li .button2:hover {
cursor:pointer;
background-color: #fff;
border-color: #0068B6;
color: #0068B6;}



#header2 .contact{
height:45px;
float:right;
margin:25px 0 0 0;}

/*---------------コンテンツページ用ヘッダーここから---------------*/

#header3{
background:#ffffff;
width:100%;
height:120px;
padding-top:0;
box-shadow: 0 3px 6px rgba(0,0,0,0.2);}

.logo2{
float:left;
width:300px;height: 90px;
margin:15px 30px 0 0;}

.logo2 img{
width:300px;height: auto;}

.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;}

#header3 .navi{
width:80%;
height:80px;
margin:0 auto;
min-width:1050px;}

#header3 .navi .rogo{}

#header3 .navi .menu{
float:left;
margin:51px 0 0 0!important;}

#header3 .navi ul{}

#header3 .navi ul li{
float:left;
margin-right:25px;
list-style:none;}

#header3 .navi ul li a{
font-size:13px;
color:#333333!important;
text-decoration:none;}

#header3 .navi ul li a:hover{
opacity:0.5;
filter:alpha(opacity=60);
-ms-filter: “alpha( opacity=60 )”;}

#header3 .contact{
width:220px;
height:45px;
float:right;
margin:25px 0 0 0;}




}



/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){

body {
text-align: center;
margin: 0px;
padding: 0px;
}

#wrap{
width:100%;
overflow:hidden;}


.re_top { display:none; position: fixed; bottom: 10px; right: 10px;z-index: 999;}
.re_top a { width:60px; height:60px; display:block;}
.re_top a img{ width:100%; height:auto;}
.re_top a:hover img { filter:alpha(opacity=60);opacity:0.6;}

/*#pc {
width:100%;
height:4980px;
margin:0 auto;
min-width:1200px;
_display: inline;
_zoom:1;}

#pc ul{ margin:0; padding:0!important;}
#pc ul li{list-style-type:none;}
#pc ul li img{vertical-align:bottom;}*/


#container {
width: 100%;
height:150px;
text-align: center;}

/*=========================ヘッダー============================*/

#header{}

.logo{
width:70%;
margin:20px 15%;}

.logo img{
width:100%;
height:auto;}

/*gmここから*/

#menu{
width: 100%;
margin: 0 auto;
padding: 0;
display: none;}

#menu li{
position:relative;
display: block;
width: 100%;
margin: 0;
padding: 0; }

#menu li a{
font-size:15px;
font-weight:bold;
display: block;
padding: 5% 0 4%;
background: #f6dcd6;
color: #444;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #fff;}

#menu li a:hover{
background: #fff;}

#toggle{
display: block;
position: relative;
width: 100%;
background: #e5002d;
font-size:17px;
font-weight:bold;}

#toggle a{
display: block;
position: relative;
padding: 5% 0 4%;
border-bottom: 3px solid #fff;
color: #fff;
text-align: center;
text-decoration: none;}

#toggle:before{
display: block;
content: "";
position: absolute;
top: 49%;
left: 10px;
width: 20px;
height: 19px;
margin-top: -10px;
background: #fff;}

#toggle a:before, #toggle a:after{
display: block;
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 20px;
height: 5px;
background: #e5002d;}

#toggle a:before{
margin-top: -6px;}

#toggle a:after{
margin-top: 2px;}

#toggle ul#menu{}

/*ドロップダウンメニュー表示*/

.slide_toggle dd {
background-color: #FFF;
display: none;
filter: alpha(opacity=0);
opacity: 0;}

#navi{
margin:0!important;}

#header .contact,
#header3 .contact{
display:none;}

.button {
font-size:14px;
font-weight:bold;
display:inline-block;
width: 220px;
height: 47px;
text-align: center;
text-decoration: none;
outline: none;
background-color: #e5002d;
border: 2px solid #e5002d;
border-radius:3px;
color: #fff;
line-height: 45px;}

/*---------------フッターここから---------------*/


#footer{
float:none;
clear:both;
background-color:#e0e9f3;}
#footer a {color: #000000;}
#footer a:hover {color: #0085CD;}
#footer ul{
width:94%;
margin:0 3%;
padding:20px 0 20px 0;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;

}

#footer ul li{
list-style-type:none;
float:inherit;
font-size:13px;
line-height:20px;

display: inline-block;
vertical-align: middle;
}
#footer ul li p {display: block;
vertical-align: middle;}

#footer ul li:nth-child(1){
width:100%;
margin:0 0 5% 0;}

#footer ul li img{
width:70%;
height:auto;}

#footer ul li:nth-child(2){
width: 100%;
margin:0;
font-size:11px;
line-height:16px;
text-align:center;}

.copylight{
background: #0068b6;
color:#ffffff;
font-size:10px;font-weight: 700;
margin:0;
padding: 4% 0;}

/*---------------白いヘッダーここから---------------*/

#header2{display:none;}

}

.topic_path {display:block;padding-bottom: 5px;padding-top: 5px;clear:both;}
.topic_path ul {text-align: left;}
.topic_path li {font-size: 13px;line-height: 1.7;font-weight: 700;display: inline-block;vertical-align: top;*display: inline; /* IE7 and below */*zoom: 1; /* IE7 and below */}
.topic_path li:after {content: ">";font-weight: 400;margin-left: 5px;margin-right: 5px;}
.topic_path li:last-child:after {content:"";}
.topic_path .bottom {position:relative;}
.topic_path .bottom li:last-child:after {content:" > ";}
.topic_path li:last-child:before {content: "";margin-left: 0px;}








/*
.btn {color: #ffffff;font-size: 14px;font-weight: 700; line-height: 40px;height: 40px;background-color: #e5002d;padding:0 40px 0 20px;text-decoration: none;-webkit-border-radius:24px;-moz-border-radius: 24px;border-radius: 24px;}
.btn:hover {background-color: #0068b6; text-decoration: none;}
.btn{position: relative;display: inline-block;color: #ffffff;}
.btn::before{content: '';width: 8px;height: 8px;border: 0px;border-top: solid 2px #ffffff;border-right: solid 2px #ffffff;-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);position: absolute;top: 50%;right: 20px;margin-top: -6px;}

@media screen and (max-width: 767px) {
.btn {color: #ffffff;font-size: 12px;font-weight: 100; line-height: 32px;height: 32px;background-color: #e5002d;padding:0 25% 0 10%;text-decoration: none;-webkit-border-radius:24px;-moz-border-radius: 24px;border-radius: 24px;}
.btn:hover {background-color: #0068b6; text-decoration: none;}
.btn{position: relative;display: inline-block;color: #ffffff;}
.btn::before{content: '';width: 6px;height: 6px;border: 0px;border-top: solid 1px #ffffff;border-right: solid 1px #ffffff;-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);position: absolute;top: 50%;right: 15%;margin-top: -4px;}
}
*/





.lower_page {width: 1060px;margin: 0 auto;padding: 50px 0;}
.pc {display: block;}

.contents_title {text-align: center;margin: 0 0 50px;}
.contents_title dl {}
.contents_title dl dt {font-size:23px;font-weight:bold;margin-bottom:25px;}
.contents_title dl dd {font-size:13px;}


@media screen and (max-width: 767px) {
.lower_page {width: 90%;margin: 0 auto;padding: 10% 0;}
.pc {display: none;}


.contents_title{text-align: center;margin: 0 0 10%;}
.contents_title dl {}
.contents_title dl dt {font-size:17px;font-weight:bold;margin-bottom:10px;}
.contents_title dl dd {font-size:10px;}

}






#navi01 {margin-top: -100px;padding-top: 100px;}
@media screen and (max-width: 767px) {
#navi01 {margin-top: -50px;padding-top: 50px;}
}










/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
border-radius: 0;
-webkit-box-sizing: content-box;
-webkit-appearance: button;
appearance: button;
border: none;
box-sizing: border-box;
cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
outline-offset: -2px;
}








/*-------------------------
__header
-------------------------*/


#header_back {width: 100%;height: 120px; text-align: center;position: fixed; z-index: 100;}
#header {text-align: center;margin: 0;height: 120px;}
.header {background: #ffffff; transition: all 0.5s ease;height: 67px;}
.header a {color: #000000!important;}
.header a.button,
.header a.button2{color: #ffffff!important;}


.header a.button:hover {
color: #e5002d!important;}
.header a.button2:hover {
color: #0068B6!important;}


.hidden {background:inherit;color: inherit;transition: all 0.5s ease;}
.hidden a {color: #ffffff!important;}


#header_logo {height: 4vw; 
position: absolute;
top: 50%;
left: 30px;
transform: translateY(-50%) ;
-webkit- transform: translateY(-50%) ;
}
#header_logo img {height: 4vw;width: auto;}

#header_block {position: relative;height: 120px;}
#header_block #header_jan {position: absolute;top: 28px;right: 20px;}
.header_btn {
color: #ffffff;
font-size: 14px;
line-height: 60px;font-weight: 700;
height: 60px;
width:200px;
background-color: #e5002d;
padding:0;
text-decoration: none;display: inline-block;vertical-align: bottom;
border-radius: 100vh;
-webkit-border-radius: 100vh;
-moz-border-radius: 100vh;
border: 2px solid #ffffff;
}
.header_btn:hover {opacity: 0.7; text-decoration: none;}



#header nav {position: absolute;right: 0;top: 49px;}
#header nav {padding:0;}
#header nav ul {display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
#header nav ul li {width: auto; display: inline-block;font-size: 1vw;line-height: 1.6;font-weight: 700; margin: 0 30px 0 0;}
#header nav ul li a{
color: #ffffff;
text-decoration: none;
display: block;
position: relative; /* .enと.jaの絶対配置の基準 */
transition: .5s; /* 0.5秒で値をなめらかに変化させる */
}
/*
#header nav ul li:nth-child(n + 4) {margin: -15px 30px 0 0;}
*/

#header nav ul li .en,.ja {
display: block; /* position指定がある時は無くても可 */
width: 100%;
position: absolute; /* .enと.jaを重ねて表示 */
transition: .5s; /* 0.5秒で値をなめらかに変化させる */
}
#header nav ul li .en {font-style: italic;font-size: 20px;line-height: 40px;
opacity: 1; /* 普段は英語表記を表示 */
}
#header nav ul li .ja {font-size: 16px;line-height: 40px;opacity: 0; /* 普段は日本語表記を透明に */}
#header nav ul li a:hover .en { /* aにホバーしたとき英語表記は透明に */opacity: 0;}
#header nav ul li a:hover .ja { /* aにホバーしたとき日本語表記を表示 */opacity: 1;}
#header3 nav ul li a{
color: #000000!important;
}
#header3 nav ul li a:hover {opacity:0.5;}

#header_sph {display: none;}


@media screen and (max-width: 1059px) {




#header_back {width: 100%;height: 100px; text-align: center;position: fixed; z-index: 100;}
#header {text-align: center;margin: 0;height: 100px;}
#header_block {margin:0 auto;width:90%;height: 100px;position: relative;} 
.header {background: #ffffff; transition: all 0.5s ease;height: 67px;}
.hidden {background:inherit;transition: all 0.5s ease;}
#header_logo {width: 234px; position: absolute;left: 0;top: 23px;}
#header_logo img {width: 100%;height: auto;}


#header_block #header_jan {position: absolute;top: 30px;right: 0;}
.header_btn {
color: #000000;
font-size: 14px;
line-height: 40px;font-weight: 700;
height: 40px;
width: 140px;
background-color: #ffffff;
padding:0;
text-decoration: none;display: inline-block;vertical-align: bottom;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.header_btn:hover {opacity: 0.7; text-decoration: none;}



#header nav {position: absolute;right: 140px;top: 42px;}
#header nav {padding:0;}
#header nav ul {display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;}
#header nav ul li {width: auto; display: inline-block;font-size: 14px;line-height: 1.2;font-weight: 700; margin: 0 30px 0 0;}
#header nav ul li a{
color: #ffffff;
text-decoration: none;
display: block;
position: relative; /* .enと.jaの絶対配置の基準 */
transition: .5s; /* 0.5秒で値をなめらかに変化させる */
}
#header nav ul li a:hover{opacity: 0.5;
}
#header nav ul li .en,.ja {
display: block; /* position指定がある時は無くても可 */
width: 100%;
position: absolute; /* .enと.jaを重ねて表示 */
transition: .5s; /* 0.5秒で値をなめらかに変化させる */
}
#header nav ul li .en {font-style: italic;font-size: 20px;line-height: 40px;
opacity: 1; /* 普段は英語表記を表示 */
}
#header nav ul li .ja {font-size: 16px;line-height: 40px;opacity: 0; /* 普段は日本語表記を透明に */}
#header nav ul li a:hover .en { /* aにホバーしたとき英語表記は透明に */opacity: 0;}
#header nav ul li a:hover .ja { /* aにホバーしたとき日本語表記を表示 */opacity: 1;}

#header_sph {display: none;}




}
@media screen and (max-width: 767px) {
header {}
#header {text-align: center;height:60px;margin: 0 auto;}
#header_back {width: 100%;height: 60px; text-align: center;position: fixed;top: 0;left: 0;z-index: 100;}
#header_block {margin:0 auto;width:100%;height: 60px;position:inherit;} 
.header {background: #ffffff; transition: all 0.5s ease;height:inherit;padding: 0!important;}
.hidden {background:inherit;transition: all 0.5s ease;height:inherit;padding:0!important;}
#header_logo { width: auto;height: 40px;
display: block;
padding: 10px 0 0 10px;
position: relative;
top: inherit;
left: inherit;
transform: inherit;
-webkit- transform:inherit;
text-align: left;

}
#header_logo img {height: 40px;width: auto;}



#header_sph {width: 100%;height: 60px; display:block; margin:0;padding:0;position: relative;}

#header nav {position:absolute;right:10px;top: 10px;}
/*---------------------ナビ部分------------------------*/

#navi{width:100%;max-width:inherit;margin:0 auto;position:relative;z-index:9999;}
#navi ul{position: relative;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
#navi ul li{width:151px;height:62px;position: relative;}
#navi ul li a{color: #ffffff; display:block;vertical-align:middle;box-sizing:border-box;width:100%;height:100%;padding:1.5em 0 0 0;text-decoration:none;font-size:1.5em;line-height:1.2em;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}
#navi ul li a:hover{color: #ffffff;background: rgba(255,255,255,0.2);}


#navi ul:before {content: '';
position: absolute;
left: 0;
top: 21px;
display: block;
width: 1px;/*線の長さ*/
height: 20px;/*線の太さ*/
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);/*位置調整*/
background-color: #ffffff;/*線の色*/
}
#navi ul li:after {
content: '';
position: absolute;
right: 0;
top: 21px;
display: block;
width: 1px;/*線の長さ*/
height: 20px;/*線の太さ*/
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);/*位置調整*/
background-color: #ffffff;/*線の色*/
}
#navi ul li:nth-child(2),#navi ul li:nth-child(3),#navi ul li:nth-child(4),#navi ul li:nth-child(5) {background: url("../header/gn.png")no-repeat center 40px;}
#navi ul li ul:befor {display: none;}
#navi ul li ul li:after {display: none;}
#navi ul li ul {display:none;text-align:left;position:absolute;top:62px;z-index:9999;background-color:#fff;border:1px solid #ddd;padding:20px 20px 10px 20px;}
#navi ul li ul#navi02{ width:420px;}
#navi ul li ul#navi03{ width:420px;}
#navi ul li ul#navi04{ width:210px;}
#navi ul li ul#navi05{ width:210px;}
#navi ul li:hover ul {display:block;}
#navi ul li ul li {font-size:1.2em;line-height:2em;color:#333;display:inline-block;vertical-align:top;background:url("/header/icon.png") no-repeat!important;width:200px;height:30px;*display:block;*zoom:1;}
#navi ul li ul li a {color:#000000;text-decoration:none;margin-left:30px;border-right:none;padding:0;}
#navi ul li ul li a:hover {color:#cc8f4c;opacity: 1!important;}
@media screen and (max-width: 767px) {
#navi_back {display: none;}
#navi {display: none;}

.quickly  {position: absolute;right: 60px;top: 10px;}
.quickly .quickly_btn {position: relative;width: 100px;height: 30px;}
.quickly .quickly_btn p {text-align: center;vertical-align: middle;}
.quickly .quickly_btn p a {background-color: #004080;
-webkit-border-radius: 6px!important;
-moz-border-radius: 6px!important;
border-radius: 6px!important;
color: #ffffff;
font-size: 11px;
line-height: 15px;
text-decoration: none;
display: block;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
padding: 5px 0;
}
.quickly .quickly_btn p a:hover {
background-color: #884621;
text-decoration: none;-webkit-border-radius: 6px!important;
-moz-border-radius: 6px!important;
border-radius: 6px!important;
}

}




.nav_sph {display: none;}
@media screen and (max-width: 767px) {
.nav_sph {display: block;}
ul.header_nav {width: 90%;margin: 0 auto;display: table-cell;padding: 0;font-size: 0;vertical-align: middle; border: 1px solid #e5e5e5;}
ul.header_nav li {display:inline-block;margin: 0;font-size: 12px!important; line-height: 80px;text-align: left;}

ul.header_nav li:nth-child(1) {border-bottom: 2px solid #ff6d63;}
ul.header_nav li:nth-child(2) {border-bottom: 2px solid #01afed;}
ul.header_nav li:nth-child(3) {border-bottom: 2px solid #faa630;}
ul.header_nav li:nth-child(4) {border-bottom: 2px solid #1bd89e;}
ul.header_nav li:nth-child(5) {border-bottom: 2px solid #ff99ca;}

ul.header_nav li a {padding:0;color: #ffffff;font-weight: 700;display: block; vertical-align: middle;text-decoration: none;}
ul.header_nav li a:hover {}
.header_nav {position: absolute;display: block;left: 5%;top:54px;display: block;width: 100%;background: rgba(255, 255, 255, 1);transition: all .4s ease;visibility: hidden;opacity: 0;}
.menu-open .header_nav {visibility: visible;opacity: 1; }
.menu-open .header_nav li {display: block;width: auto;min-width: initial; margin: 0;padding: 0 0 0 5%; font-size: 16px!important;line-height: 50px;text-align: left;}
.menu-open .header_nav li a {display: block;width: 100%;height: 50px;margin: 0;padding: 0; box-sizing: border-box;background: none;color: #fff;font-weight: normal;text-decoration: none;color: #333;}
.menu-open .header_nav li span {font-size: 10px; float: right;margin: 0 5% 0 0;}
ul.header_nav li ul {margin: 0 0 5%;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
ul.header_nav li ul li {padding: 0!important;}
ul.header_nav li ul li a {display: block;width: 100%;height: 40px!important;margin: 0;padding: 0;font-size: 12px!important;line-height: 40px!important;text-align: center;}
ul.header_nav li ul li.navi_store {width: 30%; border: 1px solid #f7891c;background: #ffffff!important;margin: 0 1% 0 0;}
ul.header_nav li ul li.navi_store:nth-child(3n) {margin: 0;}
ul.header_nav li ul li.navi_company {width: 46%; border: 1px solid #0fc780;background: #ffffff!important;margin: 0 2% 2% 0;}
ul.header_nav li ul li.navi_company:nth-child(2n) {margin: 0 0 2%;}

#menu_btn {display: block;position: absolute;top: 3px;right: 3px;z-index: 101;width: 54px;height: 54px;transition: all .4s ease;}
#menu_btn span {position: absolute;left: 10px;display: block;width: 34px;height: 1px;background: #000;transition: all .4s; }
#menu_btn span:nth-child(1) {top: 16px; }
#menu_btn span:nth-child(2) {top: 26px; }
#menu_btn span:nth-child(3) {top: 36px; }
.menu-open #menu_btn {position: fixed;transition: all .4s ease; }
.menu-open #menu_btn span {transition: all .4s ease; }
.menu-open #menu_btn span:nth-child(1) {transform: translateY(10px) rotate(-45deg);}
.menu-open #menu_btn span:nth-child(2) {opacity: 0; }
.menu-open #menu_btn span:nth-child(3) {transform: translateY(-10px) rotate(45deg);}
}

/*---------------------ナビ部分------------------------*/

#navi{width:100%;max-width:inherit;margin:0 auto;position:relative;z-index:9999;}
#navi ul{position: relative;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
#navi ul li{width:151px;height:62px;position: relative;}
#navi ul li a{color: #ffffff; display:block;vertical-align:middle;box-sizing:border-box;width:100%;height:100%;padding:1.5em 0 0 0;text-decoration:none;font-size:1.5em;line-height:1.2em;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}
#navi ul li a:hover{color: #ffffff;background: rgba(255,255,255,0.2);}


#navi ul:before {content: '';
position: absolute;
left: 0;
top: 21px;
display: block;
width: 1px;/*線の長さ*/
height: 20px;/*線の太さ*/
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);/*位置調整*/
background-color: #ffffff;/*線の色*/
}
#navi ul li:after {
content: '';
position: absolute;
right: 0;
top: 21px;
display: block;
width: 1px;/*線の長さ*/
height: 20px;/*線の太さ*/
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);/*位置調整*/
background-color: #ffffff;/*線の色*/
}
#navi ul li:nth-child(2),#navi ul li:nth-child(3),#navi ul li:nth-child(4),#navi ul li:nth-child(5) {background: url("../header/gn.png")no-repeat center 40px;}
#navi ul li ul:befor {display: none;}
#navi ul li ul li:after {display: none;}
#navi ul li ul {display:none;text-align:left;position:absolute;top:62px;z-index:9999;background-color:#fff;border:1px solid #ddd;padding:20px 20px 10px 20px;}
#navi ul li ul#navi02{ width:420px;}
#navi ul li ul#navi03{ width:420px;}
#navi ul li ul#navi04{ width:210px;}
#navi ul li ul#navi05{ width:210px;}
#navi ul li:hover ul {display:block;}
#navi ul li ul li {font-size:1.2em;line-height:2em;color:#333;display:inline-block;vertical-align:top;background:url("/header/icon.png") no-repeat!important;width:200px;height:30px;*display:block;*zoom:1;}
#navi ul li ul li a {color:#000000;text-decoration:none;margin-left:30px;border-right:none;padding:0;}
#navi ul li ul li a:hover {color:#cc8f4c;opacity: 1!important;}
}


.sph_menu {display:inline-block;}


#menu {display: none;}
@media screen and (max-width: 767px) {

#menu{
display: block;
position:fixed;
top:0;
text-align:left;
right:-260px;
width:260px;
height:100%;
background-color:none;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
font-size:15px;
line-height:35px;z-index: 999999;
background: rgba(98, 45, 24, 0.7);
}
#menu a {text-decoration:none;color:#000;}
#menu p{font-size:14px;padding:0 7px;background-color:#e5002d;color:#fff;margin:10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#menu p a{color:#fff!important;display: block;}
#menu dl{padding: 0 10px 10px;}
#menu dt{font-size:16px;padding:0 7px;background-color:#004080;color:#fff;}
#menu dt a{color:#fff;}
#menu dd{border-bottom:#ddd dotted 1px;padding: 0 7px;}

/*-------------------------
__drawer開閉動作
-------------------------*/
#wrap,
#menu{-webkit-transition:ease 0.5s;transition:ease .5s;}
#wrap.open,
#menu.open{
-webkit-transform:translate3d(-260px, 0, 0);
transform:translate3d(-260px, 0, 0);}
#overlay{
background: rgba(0, 0, 0, 0.2);
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:9999;
}
#wrap.open {overflow:hidden;}
/*hambarg*/
.menu_btn {
position:absolute;
top:-60px; 
right:0;
z-index:1000;
background:#e5002d;
width:40px; 
height:40px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transition:ease 0.5s;
transition:ease .5s;
}
.menu_btn.open {-webkit-transform:translate3d(-260px, 0, 0);transform:translate3d(-260px, 0, 0);}

.hambarg:nth-child(1) {
position:absolute;
top:30%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:#ffffff;
-webkit-transition:ease 0.5s;
transition:ease 0.5s;
height:2px;
width:20px;
}
.hambarg:nth-child(2) {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:#ffffff;
-webkit-transition:ease 0.5s;
transition:ease 0.5s;
height:2px;
width:20px;
}
.hambarg:nth-child(3) {
position:absolute;
top:70%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:#ffffff;
-webkit-transition:ease 0.5s;
transition:ease 0.5s;
height:2px;
width:20px;
}
.open .hambarg:nth-child(1) { top:50%;-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);}
.open .hambarg:nth-child(2) {top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;}
.open .hambarg:nth-child(3) {top:50%;-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg);}
#menu dl dt a{display:block;}
#menu dl dd a{display:block;}
}










.js-image {
margin-left: 0;
margin-top: 0;
z-index: 1;
}
.git-image {
z-index: 0;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}

@media screen and (max-width: 767px) {
.js-image {
margin-left: 0;
margin-top: 0;
z-index: 1;
}
.git-image {
z-index: 0;
position: absolute;
top: 10px;
left: 10px;
opacity: 0;
}

}






.flex{
display:flex;
flex-wrap: wrap;
}

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
opacity: 0;
}

.fadeUp {
animation-name: fadeUpAnime;/*アニメーションの定義名*/
animation-duration:2s;/*アニメーション変化時間 ※デフォルト*/
animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
opacity:0;
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(0);
}

to {
opacity: 1;
transform: translateY(0);
}
}










.topic_path{clear:both;padding:20px;}
.topic_path ul{width:100%;text-align:left;}
.topic_path li{font-size:1em;line-height:1.4;font-weight:700;color:#000;vertical-align:top;display:inline-block;}
.topic_path li:before{content:">";color:#000;font-weight:400;margin-left:5px;margin-right:5px;}
.topic_path li:first-child:before{content:"";margin:0;}
.topic_path li a{font-weight:400;color: #000000; text-decoration:underline;}
.topic_path li a:hover{color: #0085CD; text-decoration:none;}

@media screen and (max-width: 1060px) {

}
@media screen and (max-width: 767px) {
.topic_path{clear:both;padding:5%;}
.topic_path ul{width:100%;text-align:left;

overflow-x: auto;  /* 横スクロールの指定 */
white-space: nowrap;  /* 横スクロールの指定 */
overflow-scrolling: touch;  /* スクロールを滑らかにする */
-webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
-ms-overflow-style: none;
scrollbar-width: none;
}

.topic_path ul::-webkit-scrollbar {display:none;}


.topic_path li{font-size:1.2em;line-height:1.4;font-weight:700;color:#000;vertical-align:top;display:inline-block;}
.topic_path li:before{content:">";color:#000;font-weight:400;margin-left:5px;margin-right:5px;}
.topic_path li:first-child:before{content:"";margin:0;}
.topic_path li a{font-weight:400;color: #000000; text-decoration:underline;}
.topic_path li a:hover{color: #0085CD; text-decoration:none;}
}





.submit_btn {
font-size:14px;line-height: 47px;
font-weight:bold;
display:inline-block;
width: 400px;
height: 47px;
text-align: center;
text-decoration: none;
outline: none;
background-color: #e5002d;
border: 2px solid #e5002d;
border-radius:3px;
color: #fff;
padding: 0 20px;}
.submit_btn:hover {
font-size:14px;line-height: 40px;
font-weight:bold;
cursor:pointer;
background-color: #fff;
border: 2px solid #e5002d;
color: #e5002d;}



@media screen and (max-width: 1060px) {

}
@media screen and (max-width: 767px) {

.submit_btn {
font-size:14px;
font-weight:bold;
display:inline-block;
width: 220px;
height: 47px;
text-align: center;
text-decoration: none;
outline: none;
background-color: #e5002d;
border: 2px solid #e5002d;
border-radius:3px;
color: #fff;
line-height: 45px;}
}




.pc {display: block;}
.sph {display: none;}
@media screen and (max-width: 1060px) {

}
@media screen and (max-width: 767px) {
.pc {display: none;}
.sph {display: block;}

}




.footer_sitemap {width: 1000px;padding: 30px 0 20px; margin: 0 auto;text-align: left;border-bottom: 1px solid #0068b6;}
.footer_sitemap dl {width:20%;display: inline-block;vertical-align: top;}
.footer_sitemap dl:nth-of-type(4){width:24%;}
.footer_sitemap dl:last-child {width:16%;}
.footer_sitemap dl dt {
font-size: 1.2vw;
line-height: 2;
position: relative;
display: inline-block;
padding: 0 0 0 25px;
margin: 0 0 20px;
}
.footer_sitemap dl dt:before {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 20px;
height: 1px;
background-color: black;
}
.footer_sitemap dl dt:before {left:0;}
.footer_sitemap dl dd {}
.footer_sitemap dl dd ul.sitemap_list {margin: 0 0 0 25px!important;padding: 0!important;}
.footer_sitemap dl dd ul.sitemap_list li {
width: 100%;
font-size: 1vw;
position: relative;
padding-left: 12px;
text-decoration: none;
margin: 0 0 10px;
}
.footer_sitemap dl dd ul.sitemap_list li:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #333;
position: absolute;
top: 48%;
left: 0;
margin-top: -6px;
}
.footer_sitemap dl dd ul li:first-child,
.footer_sitemap dl dd ul li:nth-child(2) {margin: 0 0 10px!important;}
.footer_sitemap a {color: #000000;}
.footer_sitemap a:hover {color: #0085CD;}


@media screen and (max-width: 1060px) {

}
@media screen and (max-width: 767px) {

.footer_sitemap {width: 90%;padding: 20px 0 0;margin: 0 auto;text-align: left;}
.footer_sitemap dl,
.footer_sitemap dl:nth-of-type(4),
.footer_sitemap dl:last-child {width: 100%;display: inline-block;vertical-align: top;margin: 0 0 5%;
}
.footer_sitemap dl dt {
font-size: 4vw;
line-height: 2;
position: relative;
display: inline-block;
padding: 0 0 0 25px;
margin: 0 0 2%;
}
.footer_sitemap dl dt:before {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 20px;
height: 1px;
background-color: black;
}
.footer_sitemap dl dt:before {left:0;}
.footer_sitemap dl dd {}
.footer_sitemap dl dd ul.sitemap_list {margin: 0 0 0 25px;}
.footer_sitemap dl dd ul.sitemap_list li {
font-size: 3vw!important;
line-height: 1.6!important;
position: relative;
padding-left: 12px;
text-decoration: none;
margin: 0 0 2%;
}
.footer_sitemap dl dd ul.sitemap_list li:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #333;
position: absolute;
top: 50%;
left: 0;
margin-top: -6px;
}
.footer_sitemap dl dd ul li:first-child,
.footer_sitemap dl dd ul li:nth-child(2) {font-size: 3vw!important;line-height: 1.6!important;margin: 0 0 2%!important;text-align: left!important;}
.footer_sitemap a {color: #000000;}
.footer_sitemap a:hover {color: #0085CD;}
}