@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */

:root {
	/* 色指定 */
	--cl-point: #325892;
	/* --cl-grad : #8aab83 35%, #c0d19b 100%;
	--cl-grad2 : #8aab83 35%, #99b46e 100%;
	--cl-grad3 : #709a67 55%, #99b46e 100%;
	--cl-01: #e4e8db; */
}

body {
	min-width: 1200px; min-height: 100vh; background: #fff; color: #181818;
	font-size: 15px; font-weight: normal; line-height: 2;
	font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
	-webkit-text-size-adjust: 100%; position: relative;
	font-feature-settings: "palt"; letter-spacing: 0.1em;
	visibility: hidden;

}


input,
select,
textarea { font-size: 13px;}

div { box-sizing: border-box;}

a { color: #000; text-decoration: none; transition: opacity 0.5s ease;}

#lineup-font-size-sampler { bottom: 0; left: 0;}
.fixed { width: 100%; min-width: 1100px; position: fixed; top:0; left: 0; z-index: 999;}
iframe[name="google_conversion_frame"] { position: absolute; bottom: 0; left: 0;}

.ofi { object-fit: cover; width: 100%; height: 100%;}
.view_sp { display: none;}

.inner_md { width: 1200px; max-width: 92%; margin: 0 auto;}
.inner_sm { width: 1100px; max-width: 90%; margin: 0 auto;}

a.btn1 { display: flex; padding: 32px 0; justify-content: center; align-items: center; font-size: 18px; background: rgba(255,255,255,0.2); color: #fff;}
a.btn1 span { padding: 0 0 0 25px; font-size: 9px; opacity: .2;}


a.btn2 { display: flex; justify-content: center; align-items: center; width: 220px; height: 45px; background: #fff; position: relative; transition: color .8s .3s; max-width: 100%; border: 1px solid #A99963;}
a.btn2 span { position: relative; z-index: 1;}
a.btn2 span::after { margin: 0 0 0 10px; content: ">";}
a.btn2::after { content: ''; display: block; width: 12px; height: 100%; background: #a99963; position: absolute; top: 0; left: 0; transition: width .5s cubic-bezier(0.77, 0, 0.175, 1);}

.flex_col { display: flex; justify-content: space-between;}

@media screen and (hover: hover) and (min-width: 769px) {
	a:hover { opacity: 0.7; }

	a.btn2:hover { color: #fff; opacity: 1;}
	a.btn2:hover::after { width: 100%;}
}

@media screen and (max-width: 600px) {
	body,
	input,
	select,
	textarea { font-size: 16px;}

	body { min-width: 0;}
	.view_sp { display: block;}
	.view_pc { display: none !important;}

	.inner_md,
	.inner_sm { max-width: 90%;}

	a.btn1 { font-size: 16px; padding: 15px 0;}

	.flex_col { display: block;}
}


/* ---------------------------------------------------
	Base Layout
------------------------------------------------------ */
/* #nav_wrap,
#contents_wrap,
#footer_wrap {
	padding: 0; margin: 0;
}

#gnav ul,
#contents_wrap,
#footer { width: 1100px; max-width: 96%; padding: 0; margin: 0 auto; box-sizing: border-box;} */

@media screen and (max-width: 600px) {
	/* #gnav ul,
	#contents_wrap,
	#footer { width: auto; max-width: none;} */
}


/* ---------------------------------------------------
	Header
------------------------------------------------------ */

#header_wrap { position: relative;}
#g_header {
	position: absolute;
	width: 100%;
	min-width: 1200px;
	animation: h-show 0.5s;
	z-index: 10;
}
#g_header:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 160px; background: linear-gradient(to top, rgba(0,0,0,0), #000000a8 100%); z-index: 1;}
#g_header.fixed:after { display: none;}
#g_header .hd_inner { position: relative; display: flex; justify-content: space-between; z-index: 2;}
#g_header .hd_logo_wrap { padding: 15px 0 0 20px; color: #fff;}
#g_header .hd_logo_wrap p { font-size: 13px; line-height: 1.5;}
#g_header .hd_logo_wrap p .tel-link { display: table; font-size: 25px; padding: 0 0 0 20px; background: url(../img/icon_tel_w.svg)no-repeat left center; background-size: 12px auto; color: #fff;}
#g_header.fixed .hd_logo_wrap p .tel-link { background: url(../img/icon_tel_b.svg) no-repeat left center; background-size: 12px auto;}
#g_header .hd_h1 { display: none;}

#g_header #gnav,
#g_header #gnav ul { display: flex;}
#g_header #gnav ul { font-size: 16px; padding: 10px 0 20px;}
#g_header #gnav ul li { padding: 0 30px 0 0;}
#g_header #gnav ul a { display: inline-block; padding: 10px 0 0; color: #fff; position: relative;}
#g_header #gnav ul a::before {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	content: '';
	display: block;
	width: 5px;
	height: auto;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background-color: var(--cl-point);
	opacity: 0;
	transition: width 0.5s, opacity 0.5s;
}
#g_header #gnav ul a.active::before {
	width: 8px;
	opacity: 1;
}
#g_header #gnav ul a::after { content: ''; width: 0; height: 1px; background: #fff; position: absolute; left: 0; bottom: 0; transition: width .5s; }
#g_header.fixed #gnav ul a::after { background-color: #181818;}

#g_header.fixed { animation: h-fixed 1s; position: fixed; padding: 0 135px 0 0; background: #fff;}
#g_header.top { animation: h-top 1s; left: 0 !important; background: transparent;  transition: left 0s 0.5s, background 0s 0.7s; }

#g_header.fixed .hd_logo_wrap,
#g_header.fixed .hd_logo_wrap p .tel-link,
#g_header.fixed #gnav ul a,
.cont #g_header .hd_logo_wrap,
.cont #g_header .hd_logo_wrap p .tel-link,
.cont #g_header #gnav ul a { color: #181818;}
#g_header.fixed .hd_h1,
.cont #g_header .hd_h1 { display: block;}
#g_header.fixed .hd_h1 a,
.cont #g_header .hd_h1 a { display: block; margin: 0 20px 0 0; padding: 0 20px 0 0; border-right: 1px solid #b4b4b4;}
#g_header.fixed .hd_logo_wrap,
.cont #g_header .hd_logo_wrap { display: flex;}
#g_header.fixed .hd_logo_wrap p > span:not(.tel-link),
.cont #g_header .hd_logo_wrap p > span:not(.tel-link) { display: none;}


.cont #g_header { position: fixed; background-color: #fff;}
.cont #g_header:after { display: none;}
.cont #g_header .hd_logo_wrap p .tel-link { display: table; font-size: 25px; padding: 0 0 0 20px; background: url(../img/icon_tel_b.svg)no-repeat left center; background-size: 12px auto; color: #181818;}

@keyframes h-top {
	0% { position: fixed; transform: translateY(0); }
	80% { transform: translateY(-100%); }
}
@keyframes h-fixed {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(0); }
}

@media screen and (hover: hover) and (min-width: 769px) {
	#g_header #gnav ul a:hover {
		opacity: 1;
	}
	#g_header #gnav ul a:hover::before {
		width: 8px;
		opacity: 1;
	}
	#g_header #gnav ul a:hover::after { width: 100%; background-color: #fff;}
	.cont #g_header #gnav ul a:hover::after,
	#g_header.fixed #gnav ul a:hover::after { width: 100%; background-color: #181818;}
}

#g_header #gnav > .btn_reserve { display: flex; align-items: center; justify-content: center; border: 1px solid #b1b0af; font-size: 17px; color: #fff; width: 190px; background: url(../img/bg.jpg); border: none;}

@media screen and (max-width: 1360px) {
#g_header.fixed #gnav ul li,
.cont #g_header #gnav ul li { padding: 0 8px 0 0;}
}

@media screen and (max-width: 600px) {
	#g_header { width: 100%; min-width: inherit;}
	#g_header .hd_logo_wrap { padding: 20px 0 0 3%;}
	#g_header .hd_logo_wrap p .tel-link { font-size: 20px;}
	#g_header.fixed .hd_logo_wrap { padding: 0 0 0 3%; align-items: center; width: 45%;}
	#g_header.fixed .hd_logo_wrap p { display: none;}
	#g_header.fixed .hd_h1 a { margin: 0; padding: 0; border-right: 0;}
	#g_header .h_sp_btn { display: flex; justify-content: center; align-items: center; width: 25%; margin: 0 0 0 auto; background-color: #263f63; color: #fff; font-size: 14px;}
	#g_header .hd_logo_wrap p > span { display: none;}
	.cont #g_header #gnav ul a { color: #fff;}

	#g_header #gnav > ul { display: flex; width: 5em; margin: 0 auto;}
	#g_header #gnav > ul li { padding: 0;}
	#g_header #gnav ul+div.view_sp { padding: 20px 0 0; border-top: 1px solid #626d7c;}
	#g_header #gnav .tel .tel-link { display: block; color: #fff; font-size: 12px; text-align: center;}
	#g_header #gnav .tel .tel-link span { display: table; margin: 0 auto; padding: 20px 0 0; padding: 0 0 0 20px; background: url(../img/icon_tel_w.svg)no-repeat left center; background-size: 12px; font-size: 23px;}
	#g_header #gnav .tel+ul { display: flex; justify-content: center;}
	#g_header #gnav .tel+ul li { margin: 0 10px 0 0; padding: 0; display: flex; width: 25px;}
	#g_header.fixed #gnav ul a { color: #fff;}

	.cont #g_header .hd_h1 { display: flex; align-items: center;}
	.cont #g_header .hd_logo_wrap { padding: 0 0 0 3%; width: 45%;}
	.cont #g_header .hd_logo_wrap p { display: none;}
	.cont #g_header .hd_h1 a { padding: 0; border-right: none; margin: 0;}
	
}




/* ---------------------------------------------------
	G-nav
------------------------------------------------------ */
/* .close_menu { display: none;} */

/* #gnav { background: #000;}
#gnav ul,
#gnav li a { display: flex;}
#gnav li { width: 100%; height: 50px; box-sizing: border-box; border-right: 1px solid #555;}
#gnav li:last-child { border-right: none;}
#gnav li a { height: 100%; align-items: center; justify-content: center; color: #fff; font-size: 20px; box-sizing: border-box;} */

/* #gn_home { display: none;} */

/* #gnav a:hover { background-color: rgba( 255,255,255,0.25); text-decoration: none;} */


@media screen and (max-width: 600px) {
	/* ▼ jquery-dropdown 用のcss設定です ▼
		#menuOuter,#menuInner,.pos_fix はjsで自動的に追加される要素です。
		別にgnavを囲むwrapper等を使用する場合はid名が被らないようにしてください。
	*/
	/* html,body 固定用クラス ※iphoneでは効きません。 */
	.pos_fix { overflow: hidden; /* メニューボタンがfixedじゃない場合は右記を追記 position: fixed; top: 0; width: 100%; */}
	/* gnav外側に追加する要素 画面全体を覆います。 */
	#menuOuter {
		width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10;
		background: url(../img/bg.jpg); overflow: auto; pointer-events: none;
		transition: 0.75s; opacity: 0;
	}
	#menuOuter.active {
		pointer-events: auto; opacity: 1;
	}
	/* gnav外の領域用要素 この部分をタップするとメニューが閉じます。 */
	#menuInner { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 0; cursor: pointer;}
	
	#open_menu {
	position: relative;
	top: 0;
	right: 0;
	z-index: 100;
	display: flex;
    justify-content: center;
    align-items: center;
	flex-direction: column;
	width: 75px;
	height: 60px;
	background: linear-gradient(to top, var(--cl-grad));
	transition: width 0.4s, opacity 0.5s, background 0.3s;
	background: #071932;
	}
	#open_menu .bar {
		font-size: 0;
	}
	#open_menu::before,
	#open_menu .bar::before,
	#open_menu .bar::after {
		content: '';
		display: block;
		height: 1px;
		background-color: #fff;
		transition: opacity 0.5s, width 0.5s, transform 0.3s;
	}
	
	#open_menu.active {
		background: #fff;
	}
	#open_menu.active .bar::before {
		transform: scaleX(0);
	}
	#open_menu.active .bar::after {
		width: 100%;
	}
	#open_menu .bar::after {
		width: 51%;
		margin-left: auto !important;
	}
	#open_menu.active::before {
		transform: rotate(30deg) translate(6px, 6px);
	}
	#open_menu.active .bar::after {
		transform: rotate(-30deg) translate(6px, -6px);
	}

	#open_menu::before,
	#open_menu .bar::before {
		width: 32px;
		margin: 4px 0;
	}
	#open_menu .bar::after {
		margin: 5px 0 5px auto;
	}
	#open_menu.active::before {
		transform: rotate(30deg) translate(4px, 7px);
	}
	#open_menu.active .bar::after {
		transform: rotate(-30deg) translate(6px, -10px);
	}

	#open_menu.active::before,
	#open_menu.active .bar::before,
	#open_menu.active .bar::after { background-color: #233b5a;}

	#open_menu .menu_txt_close { display: none; font-size: 10px;}
	#open_menu .menu_txt { color: #fff; font-size: 10px;}
	#open_menu.active .menu_txt { display: none;}
	#open_menu.active .menu_txt_close { display: block;}

	#g_header #gnav, #g_header #gnav ul { display: block;}

	#g_header #gnav { width: 80%; margin: 0 auto; padding: 80px 0;}
	#g_header #gnav a.btn1 { padding: ;}
}

@media screen and (max-width: 400px) {
	#open_menu { width: 60px;}
}


/* ---------------------------------------------------
	cont_main
------------------------------------------------------ */
.cont #main_img { padding: 70px 0 0; background: url(../img/cont_main_bg.png)no-repeat top 70px left, url(../img/bg.jpg); color: #fff;}
.cont #main_img div { display: flex; justify-content: space-between;}
.cont #main_img h1 { width: 400px; font-size: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2;}
.cont #main_img h1 span { display: block; font-size: 18px; line-height: 2.5;}
.cont #main_img div > img,
.cont #main_img div > picture { width: calc(100% - 400px); height: 530px;}
.cont #main_img .tel-link { display: none;}

@media screen and (max-width: 600px) {
	.cont #main_img { padding: 60px 0 0;}
	.cont #main_img h1 { background: url(../img/cont_main_bg.png) no-repeat top left, url(../img/bg.jpg); background-size: 200px,auto;}
	.cont #main_img .tel-link { display: table; margin: 0 0 0 auto; color: #fff; font-size: 18px; position: absolute; right: 10px; top: 6px; padding: 0 0 0 20px; background: url(../img/icon_tel_w.svg) no-repeat left center; background-size: 12px auto; z-index: 1;}
	.cont #main_img div { position: relative; flex-direction: column-reverse;}
	.cont #main_img div img,
	.cont #main_img div picture { width: 100%; height: 300px;}
	.cont #main_img div::before{    content: "";
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 70px;
									background: linear-gradient(to top, rgba(0, 0, 0, 0), #000000a8 100%);
									z-index: 1;}
									
	.cont #main_img h1 { width: 100%; padding: 0 0 30px; line-height: 1.2; font-size: 30px}
	.cont #main_img h1 span { padding: 30px 0 0; font-size: 16px;}
}

/* ---------------------------------------------------
	Contents
------------------------------------------------------ */
/* #contents_wrap { clear: both; padding: 5px 0 55px; flex-grow: 1;}

@media screen and (max-width: 600px) {
	#contents_wrap { width: 92%; padding: 25px 0 55px;}
} */


/* breadcrumb */
#breadcrumb { display: table; margin: 0 0 0 auto; padding: 10px 4%; background-color: #fff;}
#breadcrumb li { display: inline-block; line-height: 1.6; font-size: 14px;}
#breadcrumb li:before { content: '>'; margin: 0 5px; color: #181818;}
#breadcrumb li:first-child:before { display: none;}
#breadcrumb li:last-of-type a { border-bottom: 1px solid #181818;}


@media screen and (max-width: 600px) {
	#breadcrumb { position: absolute; right: 0;}
}

/* section */


/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
/* #pagetop { display:block; position: fixed; bottom: 20px; right: 20px; z-index: 9999;}
#pagetop a {
	display: block; width: 48px; height: 0; padding: 48px 0 0;
	position: relative; background: #fff; border: 1px solid #ccc;
	font-size: 0; opacity: 0.8; overflow: hidden; transition: opacity 0.5s;
}
#pagetop a::before {
	content: ''; width: 18px; height: 18px;
	position: absolute; top: 22px; left: 15px;
	border-top: 1px solid #ccc; border-left: 1px solid #ccc;
	transform: rotate(45deg);
}
#pagetop a:hover { opacity: 1;}

#footer_wrap { background: #000;}
#footer {
	display: flex; flex-wrap: wrap; justify-content: space-between;
	padding: 25px 0; color: #f3f3f3; line-height: 1.6;
}
#footer a { color: #f3f3f3;}

#f_logo { width: 300px; font-style: normal;}
#f_logo img { display: block; margin: 0 0 10px;}
#f_logo address span { display: block;}

#f_nav .acc_tit { display: none;}
#f_nav { padding: 15px 0 0; width: calc( 100% - 320px); max-width: 600px;}
#f_nav ul { text-align: right;}
#f_nav li { display: inline-block; padding: 0 0 0 15px; margin: 0 10px 10px 0; position: relative;}
#f_nav li::before {
	content: ''; width: 6px; height: 6px;
	position: absolute; left: 0; top: 0.8em;
	border-top: 1px solid #fff; border-right: 1px solid #fff;
	box-sizing: border-box; transform: rotate(45deg) translateY(-50%);
}

#copyright { width: 100%; padding: 15px 55px 0; text-align: center;} */

#footer { padding: 90px 0 0; background: url(../img/bg.jpg); color: #fff;}
#footer .f_wrap { display: flex; justify-content: space-between; padding: 0 0 30px;}
#footer #f_logo { width: 45%;}
#footer #f_logo >img { margin: 0 0 30px;}
#footer address { margin: 0 0 30px; font-size: 15px;}
#footer address span { display: block; text-decoration: none;}
#footer #copyright { padding: 20px 0 0; font-size: 12px; opacity: .5;}

#footer .f_stit { margin: 0 0 30px; font-size: 15px;}
#footer .f_stit::before { content: "- ";}
#footer #fnav_wrap { width: 17%;}
#footer #fnav li { margin: 0 0 15px;}
#footer #fnav a { color: #fff;}
#footer #fnav a span:nth-of-type(1) { display: inline-block; width: 5em; padding: 0 1em 0 0;}
#footer #fnav a span:nth-of-type(2) { opacity: .2; font-size: 9px;}

#footer #f_info { }
#footer #f_info dd p span { display: block; opacity: .2; font-size: 9px;}
#footer #f_info dd p { padding: 0 0 25px;}
#footer #f_info dd .tel-link { padding: 0 0 0 20px; font-size: 28px; background: url(../img/icon_tel_w.svg)no-repeat left center; background-size: 12px auto; color: #fff;}
#footer #f_info dd .tel-link+p { font-size: 14px;}
#footer #f_info dl:nth-of-type(2) { margin: 30px 0 0;}
#footer #f_info dl:nth-of-type(2) .f_stit { margin: 0 0 10px;}
#footer #f_info dl:nth-of-type(2) dd { line-height: 1.5;}
#footer .f_wrap:nth-of-type(2) { padding: 30px 0 90px; border-top: 1px solid #626e7f;}
#footer .f_wrap:nth-of-type(2) p { opacity: .5;}
#footer .f_wrap:nth-of-type(2) ul { display: flex;}
#footer .f_wrap:nth-of-type(2) ul li { margin: 0 15px 0 0;}
#footer .f_wrap:nth-of-type(2) ul li:last-of-type { margin: 0;}
#footer .f_wrap:nth-of-type(2) ul img { width: 30px;}
#footer+.f_link { padding: 30px 0;}
#footer+.f_link a { display: flex; justify-content: space-between; align-items: center;}
#footer+.f_link p { border-bottom: 1px solid #000;}

@media screen and (hover: hover) and (min-width: 769px) {
	/* #footer+.f_link p:hover { border-bottom: 1px solid #fff; } */
}

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

	#footer .f_wrap { display: block; padding: 0 0 20px;}
	#footer .f_wrap:nth-of-type(2) { padding: 20px 0 50px;}
	#footer .f_wrap:nth-of-type(2) ul { margin: 20px 0 0;}
	#footer #f_logo { width: 100%;}
	#footer #f_logo >img { width: 70%; margin: 0 auto 20px; display: block;}
	#footer address { text-align: center;}
	#footer #copyright { text-align: center; padding: 10px 0 30px; border-bottom: 1px solid #627081;}
	#footer #fnav_wrap { width: 100%;}
	#footer #fnav { display: flex; flex-wrap: wrap;}
	#footer #fnav li { width: 50%;}
	#footer #fnav a { line-height: 1.2;}
	#footer #fnav a span:nth-of-type(2) { display: block;}

	#footer+.f_link a { display: block; text-align: center;}
	#footer+.f_link p { font-size: 14px; line-height: 1.5; border-bottom: none; text-decoration: underline;}
	#footer+.f_link a img { width: 213px; margin: 0 0 10px;}
	#footer .f_stit,
	#footer #f_info dl:nth-of-type(2) { margin: 20px 0 0;}
	#footer #f_info dd p { padding: 0 0 10px; line-height: 1.6;}
	#footer #f_info dl:nth-of-type(2) .f_stit { margin: 0;}
	#footer #f_info dl:nth-of-type(2) .f_stit+dd { line-height: 1.2;}
	#footer .f_wrap:nth-of-type(2) p { font-size: 14px; line-height: 1.5;}

}
@media screen and (max-width: 480px) {
	/* #f_nav li { width: 100%; margin-right: 0;} */
}


/* ---------------------------------------------------
	clear
------------------------------------------------------ */


/* ---------------------------------------------------
	更新履歴
------------------------------------------------------

180228_〇〇_cssを更新したらここに更新履歴を追加していきます。多くなったら上の方は削除。
180205_kamiguchi_更新履歴コメントひな形追加
200828_akimoto_IEで游ゴシック体を使用すると謎の余白ができるバグがあるため、IEでのみfont-familyを変更する記述を追記
201029_maehata_bodyタグにfont-feature-settings: "palt";追加
201223_akimito_下記内容の修正
　・bodyのdisplay:flex;の削除。
　・iPhoneセーフエリアの対応記述。
　・object-fitのIE対応の記述およびjs追加。

------------------------------------------------------ */