@charset "utf-8";
html {
font-size: 62.5%;
line-height: 1.8;
}
html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input, html[lang="ja"] select, html[lang="ja"] textarea {
font-family: YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight:500;
}
body{
color:#333;
font-size: 1.4rem;
background:#fff;
-webkit-text-size-adjust: 100%;
}
.mincho{
font-family:YakuHanMP, "游明朝 Medium","YuMincho Medium","游明朝","YuMincho","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",Meiryo,"Times New Roman",serif;
}
.lato {
  font-family: "Lato", YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  font-weight: 400;
}
.lato-thin {
  font-family: "Lato", YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  font-weight: 100;
}
/*header*/
#header{
width: 100%;
    height: 80px;
    top: 0 ;
    left: 0;
    z-index: 999;
}
@media screen and (max-width:767px){
#header{
    height: 60px;
}
}
#header .logo{
top: 50%;
left: 5%;
transform: translate(0,-50%);
}
#header .logo img{
width: 70px;
}
@media screen and (max-width:767px){
#header .logo img{
width: 45px;
margin-bottom: 5px;
}
}
#header .hLink{
top: 10px;
right:calc(5% - 25px);
}
#header .hLink .navi{
margin-right: 25px;
}
#header .hLink .navi img{
width: 16px;
display: block;
margin: 0 auto 5px;
}
#header .hNavi{
top: 50px;
right:calc(5% - 25px);
}
#header .hNavi .navi{
margin-right: 25px;
}
#header .accordionLogo{
width: 90px;
} 
/* spNavi */
a.c_nav-bt{
position:absolute;
width:70px;
height:70px;
right:0;
top:0;
z-index:10000;
cursor:pointer;
background:#435f77;
}
@media screen and (max-width:767px){
a.c_nav-bt{
width:60px;
height:60px;
}
}
#panel-btn-icon{
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top:-5px;
margin-left:-13px;
width:20px;
height:2px;
background: #fff;
transition: .2s;
border-radius:2px;
}
@media screen and (max-width:767px){
#panel-btn-icon{
width:12px;
margin-left:-8px;
}
}
#panel-btn-icon.close{
border-bottom:none;
}
#panel-btn-icon:before,
#panel-btn-icon:after{
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
height:2px;
background: #fff;
transition: .3s;
border-radius:2px;
}
#panel-btn-icon:before{
margin-top: -10px;
width:14px;
}
@media screen and (max-width:767px){
#panel-btn-icon:before{
width:6px;
margin-top: -8px;
}
}
#panel-btn-icon.close:before{
width:26px;
background: #fff;
}
@media screen and (max-width:767px){
#panel-btn-icon.close:before{
width:18px;
}
}
#panel-btn-icon:after{
margin-top:8px;
width:26px;
}
@media screen and (max-width:767px){
#panel-btn-icon:after{
width:18px;
margin-top:6px;
}
}
#panel-btn-icon.close:after{
width:26px;
background: #fff;
}
@media screen and (max-width:767px){
#panel-btn-icon.close:after{
width:18px;
}
}
#panel-btn-icon.close{
background: transparent;
}
#panel-btn-icon.close:before,
#panel-btn-icon.close:after{
margin-top: 0;
}
#panel-btn-icon.close:before{
transform: rotate(-45deg);
background: #fff !important;
}
#panel-btn-icon.close:after{
transform: rotate(-135deg);
background: #fff !important;
}
.panel-btn-txt{
position: absolute;
bottom:5px;
left: 0;
width: 100%;
font-size:1.0rem;
color:#fff;
}
div.accordion{
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom:0;
z-index: 9999;
padding: 0 0 0 10px;
}
.accordionInbox{
background:rgba(255,255,255,0.9);
width:100vw;
padding:80px 10% 20px;
height:auto;
min-height:100vh;
overflow:hidden;
position: relative;
box-sizing: border-box;
}
@media screen and (max-width:374px){
.accordionInbox{
padding:80px 5% 20px;
}
}
.accordionMenu li{
line-height: 1.2;
letter-spacing:0.1em;
cursor:pointer;
}
@media screen and (max-width:767px){
.accordionMenu li{
font-size: 4vw;
}
}

/*footerLinksArea*/
.footerLinksArea .l-row .linkOuter{
width: 50%;
}
.footerLinksArea a{
width: 100%;
height: 400px;
}
@media screen and (max-width:767px){
.footerLinksArea .u-bgBlue01{
height: 200px;
}
.footerLinksArea .u-bgBlue02,
.footerLinksArea .u-bgBlue03{
height: 100px;
}
}
.footerLinksArea .icon{
width: 34px;
}
@media screen and (max-width:767px){
.footerLinksArea .icon{
width: 25px;
}
}
.footerLinksArea .icon .on{
top: 1px;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.footerLinksArea .u-bgBlue01:hover .icon .on{
opacity: 1;
}
.footerLinksArea .icon .off{
opacity: 1;
transition: opacity 0.3s ease;
}
.footerLinksArea .u-bgBlue01:hover .icon .off{
opacity: 0;
}
.footerLinksArea .txtBox{
width: 100%;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
@media screen and (max-width:767px){
.footerLinksArea .txtBox .areaTtl{
font-size: 1.7rem;
margin-bottom: 5px;
}
.footerLinksArea .txtBox .note{
font-size: 1.1rem;
margin-bottom: 5px;
}
.footerLinksArea .txtBox .more{
font-size: 1.1rem;
}
}
.footerLinksArea .txtBox .more .txt{
padding-right: 30px;
}
@media screen and (max-width:767px){
.footerLinksArea .txtBox .more .txt{
padding-right: 15px;
}
}
.footerLinksArea .txtBox .more .txt .icon-arrow{
position: absolute;
top: 8px;
right: 0;
transform:  rotate(45deg);
width: 5px;
height: 5px;
border-top:1px solid #fff;
border-right:1px solid #fff;
transition: border 0.3s ease;
}
@media screen and (max-width:767px){
.footerLinksArea .txtBox .more .txt .icon-arrow{
top: 7px;
width: 4px;
height: 4px;
}
}
.footerLinksArea .u-bgBlue01:hover .txtBox .more .txt .icon-arrow{
border-top:1px solid #728799;
border-right:1px solid #728799;
}
.footerLinksArea .u-bgBlue02:hover .txtBox .more .txt .icon-arrow{
border-top:1px solid #728799;
border-right:1px solid #728799;
}
.footerLinksArea .u-bgBlue03 .txtBox .more .txt .icon-arrow{
border-top:1px solid #728799;
border-right:1px solid #728799;
}
.footerLinksArea a.u-bgBlue01:hover,
.footerLinksArea a.u-bgBlue02:hover,
.footerLinksArea a.u-bgBlue03:hover{
background:#edeff1;
}
#footer{
padding: 65px 0 30px;
}
@media screen and (max-width:767px){
#footer{
padding:30px 0 15px;
}
}
#footer .logo{
width: 70px;
}
@media screen and (max-width:767px){
#footer .logo{
margin-bottom: 20px;
width: 50px;
}
}
#footer .hNavi .navi{
margin: 0 2vw;
}
#footer .fLink{
bottom: 50px;
right:-25px;
}
#footer  .fLink .navi{
margin-right: 25px;
}
#footer .fLink .navi img{
width: 16px;
display: block;
margin: 0 auto 5px;
}
#footer .copy{
bottom: 20px;
right: 0;
}
@media screen and (max-width:767px){
#footer .copy{
position: static;
text-align: center;
margin-top: 8px;
}
}