/* CSS Document */

/*
	青色	#0071b8
	濃青	#005285

	Roboto
		Regular		font-family: roboto, sans-serif; font-weight: 400; font-style: normal;
		Bold		font-family: roboto, sans-serif; font-weight: 700; font-style: normal;
		Black		font-family: roboto, sans-serif; font-weight: 900; font-style: normal;

	 Noto Sans CJK JP
		Light		font-family: noto-sans-cjk-jp, sans-serif; font-weight: 300; font-style: normal;
		Medium 500
		Regular		font-family: noto-sans-cjk-jp, sans-serif; font-weight: 400; font-style: normal;
		Bold		font-family: noto-sans-cjk-jp, sans-serif; font-weight: 700; font-style: normal;
		Black 900

	Montserrat
		Regular		font-family: montserrat, sans-serif; font-weight: 400; font-style: normal;
		Bold		font-family: montserrat, sans-serif; font-weight: 700; font-style: normal;
*/

.spOnly{display: none;}

.mbTitle{margin-bottom: 20px !important;}

/*====== Container Box =====*/
/*====== 背景が画面全体になるコンテンツエリアのコンテナ =====*/
/** デザインの最小中央横幅に合わせてmin-widthを変更  **/
#wrapper{min-width: 1600px;}
.main_wrapper{position: relative; width: 100%; min-width:1600px; margin:0px auto; overflow: hidden; height: fit-content;} /* 基本最小幅だけ決める */
.main_visible{overflow: visible !important;}
/*====== デザインの最小中央横幅に合わせたコンテンツエリアのコンテナ =====*/
/** デザインの最小中央横幅に合わせてwidth/min-widthと余白に合わせてpaddingを変更  **/
.inner_box{position: relative; width:1200px; margin:0px auto; overflow: hidden; height: fit-content;} /* 基本最小幅だけ決める */
.inner_fix{width:100% !important; min-width: 1600px !important; height: fit-content;} /* 全幅の場合 */

/*====== 共通項目 =====*/
/* 縦向きタイトル */
.vtitle{position: absolute; text-orientation: upright; writing-mode: vertical-rl;}

/* 縦向きコンテンツ */
.vcontent{position: absolute; text-orientation: upright; writing-mode: vertical-rl;}

/* 横向きコンテンツ */
.hcontent{}



/* ボタン */
.btn_container{
	float: left;
    width: 100% !important;
    height: fit-content;
    margin: 75px auto 0px !important;
    text-align: center !important;
}

a.btn_blue, a.btn_darkblue{
	display: inline-block; position: relative; width: 260px; height: 56px; margin: 0 15px; border-radius: 26px; 
}

a.btn_blue{background-color: #0071b8;}
a.btn_darkblue{background-color: #005285;}

a.btn_blue span, a.btn_darkblue span{
	position:absolute; width:fit-content; height: fit-content; top:0; bottom:0; left:0; right: 0; margin: auto;
	font-size: 18px !important; color: #fff !important; font-weight: 700 !important;
}

/**** 矢印とアニメーション ****/
a.btn_blue path, a.btn_darkblue path{
	position: absolute; right: 25px;
    border-right: 3px solid #fff; height: 8px;
	transition: all .3s ease-in;
}

a.btn_blue path.top, a.btn_darkblue path.top{
	top: 20px; transform: skew(45deg) translate(0,0);
}
a.btn_blue path.bottom, a.btn_darkblue path.bottom{
	bottom: 20px; transform: skew(-45deg) translate(0,0);
}

a.btn_blue:hover path.top, a.btn_darkblue:hover path.top{
	transform: skew(45deg) translate(10px,0);
}

a.btn_blue:hover path.bottom, a.btn_darkblue:hover path.bottom{
	transform: skew(-45deg) translate(10px,0);
}


/* タイトル */
h2.ptitle{float: left;}

h2.ptitle .ptitle_eng{
	font-family: 'Montserrat Alternates', sans-serif !important; font-weight: 600; color: #95445a; font-size:90px;
}

h2.ptitle .ptitle_jpn{
	color: #95445a; font-size:20px; letter-spacing: .1em; margin-top: 0px;
}

h3.areatitle{
	float: left; clear: both; border-left: 4px #95445a solid; padding-left:24px;
	font-size: 30px; letter-spacing: .1em; line-height: 40px;
}

/* 本文やコメント */
.normal_msg{
	font-size: 20px; line-height: 40px; letter-spacing: .1em; font-weight: normal;
}

/*====== ヘッダ =====*/
/** 高さをデザインに合わせて追加する **/
header{
	position: fixed; width: 94%; height: fit-content; background-color: #fff;  z-index: 20; top: 0; right: 0; 
	margin: 0; border-bottom-left-radius: 60px; border: 1px rgba(0,0,0,0.3) solid;
	
	-webkit-opacity:0; opacity:0;
	-webkit-transform:translate(0, -300px); transform: translate(0, -300px);
	-webkit-transition: all .6s ease-in; transition: all .6s ease-in;
}
/** デザインの最小中央横幅に合わせてwidthを変更 **/
#header{position: relative; width: 100%; min-height: 118px; height: fit-content; overflow: visible;}

.header_change{
	-webkit-opacity:1; opacity:1;
	-webkit-transform:translate(0, 0) !important; transform: translate(0, 0) !important;
}

/*====== ロゴ =====*/
/* ロゴ 392px 66px; */

#logo, #footer_logo{display: block; float: left; width: 392px; height: 66px; overflow: hidden; margin: 25px 0px 0px 95px;} 
#logo img, #footer_logo img{width: 100%;}

/** ヘッダーにグロナビ以外の情報がある場合　サイズと配置位置(float)などをデザインに合わせて追加する **/
#info, #footer_info{float:right; width: 260px; height: fit-content; margin: 22px 105px 20px 0px;}

a.btn_tell, a.footer_btn_tell{
	display: block; position: relative; width: 260px; height: 56px; margin: 0 auto;
	border-radius: 26px; background-color: #0071b8;	
}

a.btn_tell div, a.footer_btn_tell div{
	position:absolute; width:190px; height: 26px; top:0; bottom:0; left:0; right: 0; margin: auto;
	background-image: url("/_common/img/common/ico_tel.png"); background-position: top left; background-size: 26px; background-repeat: no-repeat;
}

a.btn_tell span, a.footer_btn_tell span{
	display: block; position: absolute; height: fit-content; width: fit-content; top:0; bottom:0; right: 0; margin: auto;
	font-family: roboto, sans-serif !important; font-weight: 700 !important; color: #fff; font-size: 24px;
}

div#businesshour, #footer_businesshour{width: fit-content; height: fit-content; margin: 0px auto;}
div#businesshour span, #footer_businesshour span{display: inline-block; font-size: 12px !important; color: #0071b8;}
div#businesshour span.hours, #footer_businesshour span.hours{font-family: roboto, sans-serif !important; font-weight: 900 !important; margin-right: 5px;}

#btn_menu{display: none;}

/*====== グローバルナビゲーション =====*/
/** 高さと配置位置(float)をデザインに合わせて追加する **/

nav#glonav{
	float: left; position: relative; width:fit-content; height:60px; margin: 29px 0px 29px 75px; padding-left: 30px;
	overflow: visible; border-left: 1px rgba(0,0,0,0.2) solid;
}

nav#glonav a:not(.navlink){
	display: flex; float: left; height: 60px; padding: 0px 30px;
	justify-content: center; align-items: center; font-size: 18px !important;
}

nav#glonav a span{font-weight: 300 !important; color: #0071b8 !important; padding-left: 10px;}

/* ドロップダウンメニュー */
nav#glonav ul{display: block; position: absolute; background-color: rgba(17,17,17,.9); 
	width: 200px; height: fit-content; top: 90px; padding: 15px 0px 20px; 
	-webkit-opacity: 0; -webkit-transform-origin: top; -webkit-transition: all .3s ease-in; -webkit-transform: scale(1, 0);
	opacity: 0; transform-origin: top; transition: all .3s ease-in; transform: scale(1, 0);
}
nav#glonav ul.nav_about{left: 132px;}
nav#glonav ul.nav_outline{right: -10px;}

nav#glonav ul li{
	-webkit-opacity:0; opacity: 0; -webkit-transition: all .6s ease-in; transition: all .6s ease-in;
    -webkit-transform:scale(0, 1); transform: scale(0, 1); -webkit-transform-origin:left; transform-origin: left; 
	width: 128px; height: fit-content; padding: 15px 0px; margin: 0px auto; border-bottom: 1px rgba(255,255,255,.2) solid; overflow: hidden;
}
nav#glonav ul li a{display: block; width: 100%; height: fit-content; margin: 0 auto; padding: 0 !important; 
	font-size: 16px !important; color: #fff !important;}
nav#glonav ul li:last-of-type{border:none !important;}

.nav_dropdown, .nav_list{
	-webkit-opacity:1 !important;
	-webkit-transform:scale(1, 1) !important;
	opacity: 1 !important;
    transform: scale(1, 1) !important;
}

/*====== アニメーション =====*/
.anmt_l2r{ /* 左から右に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateX(-200px);
	transform:translateX(-200px);	
	transition: all .0s ease-in;
}

.anmt_r2l{ /* 右から左に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateX(200px);
	transform:translateX(200px);	
	transition: all .0s ease-in;
}

.anmt_l2r2l_trsfrm{ /* 左右に動くアニメーション */
	-webkit-opacity: 1; opacity: 1;
	-webkit-transform:translateX(0) !important;
	transform:translateX(0) !important;
	transition: all .8s ease-in !important;
}

.anmt_t2b{ /* 上から下に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateY(-150px);
	transform:translateY(-150px);	
	transition: all .0s ease-in;
}

.anmt_b2t{ /* 下から上に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateY(150px);
	transform:translateY(150px);	
	transition: all .0s ease-in;
}

.anmt_t2b2t_trsfrm{ /* 上下に動くアニメーション */
	-webkit-opacity: 1; opacity: 1;
	-webkit-transform:translateY(0) !important;
	transform:translateY(0) !important;
	transition: all .8s ease-in !important;
}

.anmt_lb2rt{ /* 左下から右上に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translate(-200px,150px);
	transform:translate(-200px,150px);	
	transition: all .0s ease-in;
}

.anmt_rb2lt{ /* 右下から左上に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translate(200px,150px);
	transform:translate(200px,150px);	
	transition: all .0s ease-in;
}

.anmt_lt2rb{ /* 左上から右下に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translate(-200px,-150px);
	transform:translate(-200px,-150px);	
	transition: all .0s ease-in;
}

.anmt_rt2lb{ /* 右上から左下に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translate(200px,-150px);
	transform:translate(-200px,150px);	
	transition: all .0s ease-in;
}

.anmt_angle_trnsfrm, .logo_trnsfrm{ /* 上下左右に動くアニメーション */ /* ロゴを動かさない場合は.logo_trnsfrmを外す */
	-webkit-opacity: 1; opacity: 1;
	-webkit-transform:translate(0px,0px) !important;
	transform:translate(0px,0px) !important;
	transition: all .8s ease-in !important;
}

/*====== 各項目のタイトル =====*/






/*====== フッター =====*/
footer{position: relative; width: 100%; height: fit-content; overflow: hidden;}

.footer_box{
	float: left; width: calc(100% - 105px); height: fit-content; padding: 40px 95px 40px 105px; margin-top: 100px;
	background-color:#0071b8; border-top-right-radius: 60px; overflow: hidden;
}

#footer_logo{margin: 0px !important;}

#footer_businesshour span{color: #fff !important;}
a.footer_btn_tell{background-color: #005285 !important;}
#footer_info{margin: 0px !important;}

#footer_address{
	float: left; margin-left: 70px; padding-left: 80px;
    color: #fff;
    border-left: 1px rgba(0,0,0,0.2) solid;
    font-size: 18px; font-weight: 600; line-height: 30px;
}


/*====== コピーライト =====*/
#copyright{
	position: absolute; right: 40px; bottom: 150px;
	-ms-writing-mode: bt-rl;
  	writing-mode: vertical-rl;
    -webkit-text-orientation: sideways;
    text-orientation: sideways;
    transform: rotate(180deg);
	font-size:12px; font-weight: 600; 
}


/*====== ↓↓↓↓↓↓ その他共通項目をこちらに記載 ↓↓↓↓↓↓ =====*/