@charset "utf-8";
/*
<uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 900
.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/
@font-face {
font-family: "irohamaru";
src: url("../font/irohamaru-Light.ttf") format("truetype");
}
@font-face {
font-family: "irohamaru_m";
src: url("../font/irohamaru-Medium.ttf") format("truetype");
}
/*--------------------------------------------------------
	reset 
---------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; }
ul,ol { list-style-type: none; }
em,strong,th,address { font-style: normal; font-weight: normal; text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
img,
object,
embed { border: 0; vertical-align: top; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a{ outline: none; text-decoration: none; color: #000;}
a:hover{ color: #666;}
hr { border: none;}
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; }
li { list-style-type: none; }
strong { font-weight: bold; }
/*-------------------------------------------------
	base
--------------------------------------------------*/
body {position: relative; background: #fff; color: #000; font-family: "Noto Sans JP", sans-serif;font-weight: normal; font-size: 18px; line-height: 1.6; -webkit-text-size-adjust: 100%;overflow-x: hidden }
.wrapper{ position: relative; overflow: hidden;}
/*-------------------------------------------------
	txt
--------------------------------------------------*/
.txt_l { font-size: 30px; letter-spacing: 4px; line-height: 1.3; font-weight: 500;}
.txt_m { font-size: 19px;letter-spacing: 2.1px; line-height: 1.65; font-weight: 500;}
.txt_s { font-size: 18px; letter-spacing: 2px; line-height: 1.5; font-weight: 500;}
header .link_box a{ font-size: 18.55px; font-weight: 100; letter-spacing: 2px; line-height: 2.2;}
.txt_lb { font-size: 30px; letter-spacing: 4px; line-height: 1.3; font-weight: 500;}
@media screen and (max-width: 1600px) {
.txt_s { font-size: 16px; letter-spacing: 1px; line-height: 1;}
}/*END*/
@media screen and (max-width: 1450px) {
.txt_s { font-size: 16px; letter-spacing: 1px; line-height: 1;}
}/*END*/
@media screen and (max-width: 1400px) {
.txt_l { font-size: 28px; letter-spacing: 4px; line-height: 1.1;}
.txt_m { font-size: 18px;letter-spacing: 1.7px; line-height: 1.6;}
.txt_lb { font-size: 28px; }
}/*END*/

@media screen and (max-width: 1250px) {
header .link_box a{ font-size: 14px; line-height: 2.5;}
}/*END*/
@media screen and (max-width: 1130px) {
.txt_s { font-size: 15px; letter-spacing: 1.2px; line-height: 1;}
.txt_m { font-size: 16px;letter-spacing: 1.7px; line-height: 1.6;}
}/*END*/
@media screen and (max-width: 1024px) {
.txt_l { font-size: 26px; letter-spacing: 4px;}
.txt_m { font-size: 18px;letter-spacing: 1.7px;}
.txt_s { font-size: 16px; letter-spacing: 1.7px;}
}/*END*/
@media screen and (max-width: 600px) {
.txt_lb { font-size: 24px; }
}/*END*/
@media screen and (max-width: 460px) {
.txt_l { font-size: 22px; letter-spacing: 2px;}
}/*END*/
/*-------------------------------------------------
	header
--------------------------------------------------*/
header{z-index: 100; width: 100%; height: 100px;display: flex; align-items: center;position: relative; position: fixed; background: #fff;}
header .header_wrap{ display: flex; align-items: center;}
header .header_wrap .logo{ left: 21px; width: 400px;position: absolute; }
header .header_wrap .mene_box{ position: absolute; right: 19px;display: flex;align-items: center;}
header ul {display: flex; }
header ul li{ margin-right: 28px;}
header .link_box { width: 210px; height: 48px; background: #1e3b8d;  border-radius: 15px; display: flex; align-items: center;}
header .link_box:hover { opacity: 0.9;}
header .link_box a{ color: #fff;  display: flex; align-items: center;}
header .link_box a img{ width: 23px; height: 25px; margin-left: 19px;}
header .link_box a p{ margin-left: 15px; font-weight: 400;}
header .header_wrap .header_1350{ display: none;}
/*-------- hum --------*/
.openbtn{margin-right: 31px;cursor: pointer;width: 37px;height:13px;z-index: 9999;display: inline-block;position: relative;}
/*×に変化*/	
.openbtn span{display: inline-block;transition: all .4s;position: absolute;left: -1px;height: 1px;width: 37px;background: #000;background-blend-mode: difference;}
.openbtn span:nth-of-type(2) {top:10px;width: 26px;}
.openbtn.active {height:30px; margin-top: -7px;}
.openbtn.active span{background: #000;z-index: 9999;}
.openbtn.active span:nth-of-type(1) {top: 13px;left: -1px;transform: translateY(6px) rotate(-45deg);}
.openbtn.active span:nth-of-type(2) {top: 25px;left: -1px;transform: translateY(-6px) rotate(45deg);width: 37px;}
@media screen and (max-width: 1600px) {
header ul li{ margin-right: 20px;}
header .link_box { width: 190px; height: 48px;}
}/*END*/
@media screen and (max-width: 1440px) {
header ul li{ margin-right: 15px;}
header .header_wrap .logo{ left: 21px; width: 350px;}
header .link_box { width: 180px; height: 48px;}
header .link_box a img{ width: 20px; height: 22px; margin-left: 15px;}
header .link_box a p{ margin-left: 12px;}
}/*END*/
@media screen and (max-width: 1350px) {
header .header_wrap .header_pc{ display: none;}
header .header_wrap .header_1350{ display: block;}
}/*END*/
@media screen and (max-width: 1024px) {
header{ height: 80px;}
header .header_wrap .logo{  width: 330px;}
header .header_wrap .mene_box{ right: 5px;}
}/*END*/
@media screen and (max-width: 640px) {
header{ height: 80px;}
header .header_wrap .logo{ left: 15px; width: 300px;}
header .header_wrap .mene_box{ right: -10px;}
}/*END*/
@media screen and (max-width: 420px) {
header{ height: 80px;}
header .header_wrap .logo{ left: 15px; width: 280px;}
header .header_wrap .mene_box{ right: -12px;}
}/*END*/
@media screen and (max-width: 380px) {
header{ height: 80px;}
header .header_wrap .logo{ left: 13px; width: 250px;}
header .header_wrap .mene_box{ right: -12px;}
}/*END*/
@media screen and (max-width: 350px) {
header{ height: 80px;}
header .header_wrap .logo{ left: 10px; width: 230px;}
header .header_wrap .mene_box{ right: -12px;}
}/*END*/
.sp{display: none; }
@media screen and (max-width: 1220px) {
.pc{display: none; }
.sp{display: block; }
header .link_box { display: none;}
}/*END*/
/*-------------------------------------------------
	nav
--------------------------------------------------*/
#g-nav a{text-decoration: none;}
#g-nav a:hover{ opacity: 1; }
#g-nav{position:fixed;z-index: 999;top:-300%;left:0;width:100%;height: 100vh;/*ナビの高さ*/background-color: #fff; transition: all 0.6s;}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{top: 0;}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive .g_nav_inner{/*ナビの数が増えた場合縦スクロール*/ position: fixed;z-index: 999; width: 100%;height: 100vh;/*表示する高さ*/overflow-y: hidden; -webkit-overflow-scrolling: touch;overflow-x: hidden;}
.g_nav_inner{ width: 100%; height: 100vh;}
.g_nav_inner .inner p, 
.g_nav_inner .inner a{color: #000; font-size: 24px; }
.g_nav_inner .inner ul{ display: block;}
.g_nav_inner .inner li{ margin-top: 30px;}
.g_nav_inner .inner li:nth-child(1){ margin-top: 0px;}
header .link_box_sp { width: 230px; height: 48px; background: #1e3b8d;  border-radius: 15px; display: flex; align-items: center;}
header .link_box_sp:hover { opacity: 0.9;}
header .link_box_sp a{ color: #fff;  display: flex; align-items: center;}
header .link_box_sp a img{ width: 23px; height: 25px; margin-left: 19px;}
header .link_box_sp a p{ margin-left: 15px;font-weight: 400;}
.g_nav_inner .link_box_sp p{color: #fff; font-size: 20px; }
.g_nav_inner .nav_wrap{display: flex; align-items: center; justify-content: center; height: 100vh; position: relative; overflow-y: hidden;}
.g_nav_inner .inner{ width: 100%; max-width: 1600px; z-index: 999;display: flex; align-items: center; justify-content: center;margin: 0 auto;}
/*ここについてなぜ必要か必ずチャック！！！！！！
@media (max-width: 400px) {
#g-nav,
#g-nav.panelactive .g_nav_inner,
.g_nav_inner,
.g_nav_inner .nav_wrap,
#main .inner{ height: -webkit-fill-available; }
}/*END*/ 
@media screen and (max-width: 500px) {
.g_nav_inner .inner a{ font-size: 20px; }
.g_nav_inner .inner li{ margin-top: 20px;}
}
.nav_bar { margin-right: 10px;}
/*-------------------------------------------------
	banner
--------------------------------------------------*/
#banner { margin-top: 100px; width: 100%; height: 300px; overflow: hidden; position: relative; background: #777;}
#banner .banner_wrap img{ position: absolute; width: 100%; }
#banner .banner_wrap h2{ position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; white-space: nowrap;}
@media screen and (max-width: 1300px) {
#banner { height: 23vw;}
}
@media screen and (max-width: 1024px) {
#banner { margin-top: 80px; height:29vw;}
}
@media screen and (max-width: 800px) {
#banner img{ height: 35vw;}
}
.banner_pc{ display: block;}
.banner_sp{ display: none;}
@media screen and (max-width: 1024px) {
.banner_pc{ display: none;}
.banner_sp{ display: block;}
}
/*-------------------------------------------------
	footer
--------------------------------------------------*/
footer{ width: 100%; height: 350px; background: #f2f2f2;}
footer .logo{ width: 400px; height: auto; margin: 0 auto; padding-top: 58px;}
footer .mene_box{ margin: 0 auto; padding-top: 45px; }
footer .mene_box ul{ display: flex; align-items: center; justify-content: center; margin: 0 auto; }
footer ul li{ margin-right: 28px;}
footer ul li:nth-last-child(1) { margin-right: 0px;}
footer .link_box { width: 200px; height: 48px; background: #1e3b8d;  border-radius: 15px; display: flex; align-items: center; margin: 55px auto 0;}
footer .link_box:hover { opacity: 0.9;}
footer .link_box a{ color: #fff;  display: flex; align-items: center;}
footer .link_box a img{ width: 23px; height: 25px; margin-left: 19px;}
footer .link_box a p{ margin-left: 15px;font-weight: 400;}
@media screen and (max-width: 1100px) {
footer ul li{ margin-right: 18px;}
footer ul li:nth-last-child(1) { margin-right: 0px;}
}/*END*/
@media screen and (max-width: 850px) {
footer{ height: 590px;}
footer .mene_box{ margin: 0 auto; padding-top: 35px;display: flex; align-items: center; justify-content: center;}
footer .mene_box ul{ display: block;}
footer .mene_box ul li{ margin-top: 20px;}
}/*END*/
@media screen and (max-width: 440px) {
footer .logo{ width: 79vw; }
}/*END*/