@charset "UTF-8";
/* CSS Document */

@import url("reset.css");
/*notoフォント*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap&subset=japanese');
/*Gotham代替フォント - Montserrat*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:700&display=swap');
/*condencedフォント*/
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@700&display=swap');
/*Futura代替フォント*/
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@700&display=swap');


/*===== fonts start =====*/
/*@importより前にスタイルを書かないこと*/
.font-Montserrat {
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
}
.font_condenced {
	font-family: "Antonio", sans-serif;
}
.font_hind {
	font-family: 'Hind', sans-serif;
}
/*===== /fonts end =====*/


body {
    font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", "YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*=====ユーティリティ=====*/
.align-right {text-align: right;}
.align-left {text-align: left;}
.align-center {text-align: center;}
.bold {font-weight: bold;}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.clearfix:before {
　　　　content: "";
	display: block;
	clear: both;
} 
.clearfix {
	display: block;
}
ol {
	display: block;
	list-style-position: outside;
	list-style-type: decimal;
	padding-left: 2em;
	margin-bottom: 2em;
}
ol li {margin-bottom:1em;line-height: 1.5;}
.red {color:#FF0004;}
.indent {padding-left:2em;}

/*
テーマカラー
緑：#8fc322　青：#00a0e9
*/
.themeColor {}

@media screen and (min-width: 480.001px){
	.pc_only {
		display: inherit;
	}
	.sp_only {
		display: none;
	}
}
@media screen and (max-width: 480px){
	.pc_only {
		display: none;
	}
	.sp_only {
		display: inherit;
	}
}

/*
pc/スマホ/中間幅での改行
<br class="br-wide" /><br class="br-narrow" />
*/
/*wide画面*/
.br-wide { display:none; }
@media screen and (min-width: 900.001px){	
	.br-wide { display:block; }
}
/*narrow*/
.br-narrow { display:none; }
@media screen and (max-width: 900px){
	.br-narrow { display:block; }
}
/*under* */
.br-under600 { display:none; }
@media screen and (max-width: 600px){
	.br-under600 { display:block; }
}


/* page-top-btn　ページトップへ戻るボタン */
.page-top-btn {
    position: fixed;
    bottom: -50px;/*最初は画面の外に追い出す scrfade.jsで操作*/
    right: 10px;
    font-size: 1rem;
	z-index:102;
	transition:transform 0.5s;
	text-indent: 110%;
	white-space: nowrap;
	overflow: hidden;
}
.page-top-btn a {
    background-color: #999999;
    text-decoration: none;
    color: #fff;
    width: 35px;
	height: 35px;
    padding: 5px;
    text-align: center;
    display: block;
    border-radius: 5px;
	opacity:0.7;
	position:relative;
}
.page-top-btn a::before {
	content: "";
	width: 23px;
	border-top: solid #FFF 2px;
	position: absolute;
	top:12px;left:12px;
}
.page-top-btn a::after {
	content: "";
	width: 15px;
	height: 15px;
	border-top: solid #FFF 2px;
	border-left: solid #FFF 2px;
	position: absolute;
	top:23px;left:15px;
	transform: rotate(45deg);
}
.page-top-btn a:hover {
	text-decoration: none;
	opacity:1;
}


/*==========
header
==========*/
.ly_header {
	display: block;
	width: 100%;
	background-color: rgb(0,0,0,0);
	color:#FFF;
	height: 66px;
	font-size: 13px;
	position: fixed;
	z-index: 99;
	padding: 0;
	margin: 0;
	transition: all 0.5s;
}
/* --header active */
.js_firstLoaded .ly_header {
	position: fixed;
	background-color: rgb(255,255,255,1);
	color:#000;
	box-shadow: 0px 5px 10px 1px rgba(65,65,65,0.15);
}
/**/
.bl_headerLogo_s {
	display: block;
	height: 66px;
	width: 232px;
	position: absolute;
	top:-66px;
	left:5vw;
	transition: all 1s;
	opacity: 0;
}
.bl_headerLogo_s img {
	display: block;
	position: absolute;
	top:calc(50% - 3px);
	transform: translateY(-50%);
	max-width: 232px;
	width: 70vw;
	max-height: 23px;
}
/* --header active */
.js_firstLoaded .ly_header .bl_headerLogo {
	top:-160px;
	background-color:transparent;
}
.js_firstLoaded .ly_header .bl_headerLogo_s {
	top:0;
	opacity: 1;
}


/*メニューの出現 参考：.bl_headerLogo_s*/
.zdo_drawer_menu {
	position:absolute;
	display: block;
	height: 66px;
	top:-66px;
	right:0;
	transition: all 1s;
	opacity: 0;
}
.js_firstLoaded .zdo_drawer_menu {
	top:0;
	opacity: 1;
}


/*nav*/
.bl_headerNav {
	display: block;
	margin-right: 5vw;
	height: 66px;
}
.bl_headerNav ul {
	list-style: none;
	padding: 0;
	margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
	height: 66px;
	transition:height 0.s;
}
.bl_headerNav li {
	padding: 0 21px 0 21px;
	position: relative;
	letter-spacing: 0.1em;
}
.bl_headerNav li::before {
	position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #000;
    border-radius: 3px;
    transform: rotate(25deg);
	transition: background-color 0.5s;
}
.bl_headerNav li:first-child::before {
	display: none;
}
.bl_headerNav li a {
	color:#000;
	font-style: normal;
	text-decoration: none;
	transition: color 0.5s;
}
.bl_headerNav li a::after {
	content: "";
	display: block;
	width: 0%;
	height: 1px;
	background-color: #000;
	transition: width 0.2s ease-in;
}
.bl_headerNav li a:hover::after {
	width: 100%;
}
/* --scrolled */
.bl_headerNav.js_scrolled li::before {
	background-color: #000;
}
.bl_headerNav.js_scrolled li a {
	color:#000;
}
.bl_headerNav.js_scrolled li a::after {
	background-color: #000;
}

/*contactBtn*/
.bl_headerNav li.el_contactBtn {
	display: table-cell;
	line-height: 1;
	font-weight: bold;
	border: solid #000 1px;
	border-radius: 3px;
	padding: 9px 20px 9px 50px;
	transition: border-color 0.5s;
}
.bl_headerNav li.el_contactBtn a {
	line-height: 1.1;
}
.bl_headerNav li.el_contactBtn:hover {
	background: rgb(255,255,255,0.3);
}
/*メールアイコン*/
.bl_headerNav li.el_contactBtn span {
	display: inline-block;
	position: absolute;
	top:12px;
	left: 20px;
	width: 21px;
	height: 13px;
	margin-top: -2px;
	background-image: url("../images/ico_mail-black.svg");
	background-repeat: no-repeat;
	opacity: 1;
	transition: all 0.5s;
}
.bl_headerNav li.el_contactBtn::before {
	display: none;
}
.bl_headerNav li.el_contactBtn a::after {
	content: none;
}




/*==========
footer
==========*/
.ly_footer {
	display: block;
	position: static;
	background-color: #8f8f8f;
	color: #FFF;
	font-size: 1.1rem;
	text-align: center;
	padding: 120px 0 90px;
	overflow: hidden;
}
.bl_footerLogo {
	display: block;
	width: 297px;
	height: 29px;
	margin: 0 auto 35px;
}
.bl_footerText p {
	line-height: 2;
}