@charset "UTF-8";

/*-------------------------
__base_style
-------------------------*/

:root {
    --navy: #143250;
}

#wrap { color: var(--navy); margin: 0; padding: 0;}
h1,h2,h3,h4,h5 { font-size: 14.4px;}
a{ color: var(--navy); text-decoration: none; display: block;}
img{ width: 100%; height: auto; /*max-width: 100%; max-height: 100%;*/ vertical-align: bottom;}
@media screen and (min-width:768px){
.pc_none{ display: none;}
}
@media screen and (max-width:1260px) and (min-width:767px){
.tab_none{ display: none;}
}
@media screen and (max-width:767px){
body::after{ content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.50); opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; transition: all .3s;}
body.fixed{ overflow: hidden;}
body.fixed::after{ opacity: 1; visibility: visible;}
.sp_none{ display: none;}
}


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


header{ width: 100%; z-index: 1; position: absolute;}
#header{ box-sizing: border-box; border-bottom: 1px solid var(--navy); background-color: #fff;}
#header .inner{ display: flex; justify-content: space-between; align-items: center; padding: 25px; box-sizing: border-box;}
#header .inner .header_logo{ width: 270px; height: auto;}
#header .inner .header_logo a{ display: block; transition: all .3s;}
#header .inner .header_logo a img{}
#header #toggle_btn { width: 40px; height: 40px; background-color: var(--navy); padding: 15px; box-sizing: border-box; position: absolute; top: 10px; right: 10px; display: none; border-radius: 50vh;}
#header #toggle_btn span { width: 15px; height: 2px; background-color: #fff; border-radius: 1px; transform: translate(-50%, -50%); transition: all .3s; position: absolute; top: 50%; left: 50%; display: block;}
#header #toggle_btn span:nth-child(1) { top: calc(50% - 6px);}
#header #toggle_btn span:nth-child(3) { top: calc(50% + 6px);}

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

@media screen and (min-width:768px){
#header .inner #navi{ width: calc(100% - 270px);}
#header .inner #navi ul{ display: flex; justify-content: flex-end;}
#header .inner #navi ul li{ margin-left: 20px;}
#header .inner #navi ul li a{ display: flex; align-items: center; font-size: 1.2em; font-weight: 700; position: relative; transition: all .3s;}
#header .inner #navi ul li a p.text{ margin-left: 8px;}
#header .inner #navi ul li a p.arrow{ display: block; width: 30px; height: 30px; border-radius: 50vh; border: 1px solid var(--navy); box-sizing: border-box; position: relative;}
#header .inner #navi ul li a p.arrow > span{ display: block; width: 100%; height: 75%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#header .inner #navi ul li a p.arrow > span > span{ display: inline-block; vertical-align: middle; color: var(--navy); line-height: 1; position: relative; width: 0.1em; height: 0.6em; background: currentColor;}
#header .inner #navi ul li a p.arrow > span > span::before{content: ''; width: 0.5em; height: 0.5em; border: 0.1em solid currentColor; border-top: 0; border-right: 0; transform: rotate(-45deg); transform-origin: bottom left; position: absolute; left: 50%; bottom: -0.05em; box-sizing: border-box;}
#header .header_logo a:hover,
#header #navi ul li a:hover{ opacity: .5;}
}

@media screen and (max-width:999px) and (min-width:767px){
#header .inner{ padding: 20px;}
#header .inner .header_logo{ width: 200px;}
#header .inner #navi{ width: calc(100% - 200px);}
#header .inner #navi ul li{ margin-left: 10px;}
#header .inner #navi ul li a{ font-size: 1em;}
#header .inner #navi ul li a > span{ margin-right: 5px;}
#header .inner #navi ul li a span.arrow{ width: 24px; height: 24px;}
#header .inner #navi ul li a p.arrow > span{ height: 55%;}
}

@media screen and (max-width:767px){
#header .inner{ padding: 12px; }
#header .inner .header_logo{ width: 200px;}
#header .inner #navi{ width: 100%;}
#header #navi{ width: 100%; transform: translateY(-100%); opacity: 0; z-index: -1; position: fixed; top: 0; left: 0; transition: all .3s;}
#header #navi.open{ transform: translateY(0%); opacity: 1;}
#header #navi nav{ width: 100%; height: 100%; background-color: #fff; box-sizing: border-box; margin-top: 60px;}
#header #navi ul{ display: block; position: static; padding-top: 2px;}
#header #navi ul li{ padding-bottom: 2px;}
#header #navi ul li a{ font-size: 1.3em; text-align: left; background-color: #f7f7f7; margin: 0!important; padding: 1em 1em;}
#header #navi ul li a::before{ left: 1em;}
#header #toggle_btn { display: block;}
#header #toggle_btn.active span:nth-child(1),
#header #toggle_btn.active span:nth-child(3) { top: 50%;}
#header #toggle_btn.active span:nth-child(1){ transform: translate(-50%, -50%) rotate(225deg);}
#header #toggle_btn.active span:nth-child(3){ transform: translate(-50%, -50%) rotate(-225deg);}
#header #toggle_btn.active span:nth-child(2){ opacity: 0;}
}

/*-------------------------
__content
-------------------------*/

@media screen and (min-width:768px){

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

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

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

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

}


/*-------------------------
_modal
-------------------------*/
.modaal-inline .modaal-inner-wrapper{ padding: 100px;}
.modaal-inline .modaal-close{ /*background-color: transparent;*/ position: absolute; top: 0; right: 0; z-index: 10;}
.modaal-inline .modaal-close:before, 
.modaal-inline .modaal-close:after{ width: 3px;}
.modaal-inline .modaal-close:focus,
.modaal-inline .modaal-close:hover{ /*background: transparent; opacity: .5;*/}
.modaal-inline .modaal-close:focus:before, 
.modaal-inline .modaal-close:focus:after, 
.modaal-inline .modaal-close:hover:before, 
.modaal-inline .modaal-close:hover:after{ background-color: #143250;}
.modaal-inline .modaal-content-container{ padding: 0;}
@media screen and (max-width:1260px){
.modaal-inline .modaal-close{ position: absolute; top: 0; right: 0;}
.modaal-inline .modaal-inner-wrapper{ padding: 60px;}
}
@media screen and (max-width:999px){
.modaal-inline .modaal-inner-wrapper{ padding: 30px!important;}
}
@media screen and (max-width:767px){
.modaal-inline .modaal-inner-wrapper{ padding: 15px!important;}
}

/*-------------------------
__footer
-------------------------*/

#footer{ border-top: 1px solid var(--navy); padding: 0 100px; box-sizing: border-box;}
#footer .footer_info{ max-width: 1020px; margin: 0 auto; padding: 80px 0; box-sizing: border-box;}
#footer .footer_info dl{ text-align: left; display: flex; font-size: 1em; line-height: 1.6; margin-bottom: 20px;}
#footer .footer_info dl dt{ width: 60px;}
#footer .footer_info dl dd{ width: calc(100% - 60px);}
#footer .footer_info dl dd a{ width: 160px; height: auto;}
#copyright{ border-top: 1px solid var(--navy); padding: 30px 0; box-sizing: border-box;}

@media screen and (max-width:1260px){
#footer{ padding: 0 50px;}
#footer .footer_info{ padding: 50px 0;}
}

@media screen and (max-width:767px){
#footer{ padding: 0 30px;}
#footer .footer_info{ padding: 30px 0;}
}