@charset "utf-8";
/* ===================================================
	Base CSS
====================================================== */
/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v15-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-800 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat-v15-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v15-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v15-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v15-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v15-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v15-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */
}

body {
	min-width: 1200px; min-height: 100vh; background: #fff; color: #1a1312;
	font-size: 15px; font-weight: normal; line-height: 1.7;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif;
	-webkit-text-size-adjust: 100%; font-feature-settings: "palt"; letter-spacing: 0.08em;
}

/* IE表示用のCSS　*/
_:-ms-input-placeholder, body {
   font-family: "ＭＳ Ｐゴシック", sans-serif;
}


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

div { -webkit-box-sizing: border-box; box-sizing: border-box;}

img { -webkit-backface-visibility: hidden;}
a { color: #1a1312; text-decoration: none;}
.btn { transition: background-color .6s, color .6s; box-sizing: border-box;}
a:hover { color: #1a1312;}
a img { transition: opacity .3s;}
a:hover img { opacity: 0.75;}

#lineup-font-size-sampler { bottom: 0; left: 0;}
.fixed { width: 100%; position: fixed; top:0; left: 0; z-index: 999;}
.pos_fix { overflow: hidden!important;}
iframe[name="google_conversion_frame"] { position: absolute; bottom: 0; left: 0;}

.en_font { font-family: 'Montserrat', sans-serif;}
.ofi { object-fit: cover; font-family: 'object-fit: cover;';}
.inner { width: 92%; max-width: 1360px; margin: 0 auto;}

.tit_border { position: relative; padding-top: 25px; font-size: 36px; line-height: 1; font-family: 'Montserrat', sans-serif; text-align: center;}
.tit_border::before { content: ''; display: block; width: 30px; height: 5px; background: #ffae00; position: absolute; top: 0; left: calc(50% - 15px);}
.tit_border span { display: block; font-size: 15px; margin-top: 15px;}

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

	body { min-width: 0; line-height: 1.5;}

	.tit_border { font-size: 24px; padding-top: 15px;}

	.br_sp { display: inline;}
	.br_pc { display: none;}
}


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

#footer {
	width: 92%; max-width: 1360px; padding: 0; margin: 0 auto;
	-webkit-box-sizing: border-box; box-sizing: border-box;
}

/*
	大枠のレイアウトにflexboxを使用しているので、
	orderを使用してheaderと見出しの位置を入れ替えたりもできます。

	例）#main_imgをheaderの上に持って来るように設定
	#main_img { order: -1;}
*/


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


/* ---------------------------------------------------
	Header
------------------------------------------------------ */
#header_wrap { width: 100%; min-width: 1200px; background: #fff; position: fixed; top: 0; left: 0; z-index: 999;}
#header { display: flex; justify-content: space-between;}

#logo { width: 19%; max-width: 250px; display: flex; justify-content: center; align-items: center; background: #fff;}
#header .h_logo { display: flex; justify-content: center; align-items: center; transition: opacity .3s;}
#header .h_logo .logo img { width: 27px; margin-right: 15px;}
#header .h_logo:hover { opacity: 0.75;}
#header .h_logo:hover img { opacity: 1;}
#header .h_logo .text img { width: 117px;}
#header .h_logo .text span { display: block; margin-top: 7px; line-height: 1;}

#h_nav_wrap { width: 81%;}
#h_nav_wrap .h_logo { display: none;}

#h_nav { display: flex; justify-content: flex-end;}
#h_nav > li { width: 15%; max-width: 180px; text-align: center; position: relative; background: #fff;}
#h_nav .link_btn { color: #7b7979; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 13px 0; height: 100%; position: relative; cursor: pointer; box-sizing: border-box;}
#h_nav .link_btn::before { content: ''; width: 100%; height: 5px; transform: scale(0,1); background: #ffae00; position: absolute; top: 0; left: 0; transition: transform .6s; transform-origin: right;}
#h_nav .link_btn:hover::before { transform: scale(1,1); transform-origin: left;}
#h_nav .link_btn ul { position: absolute; width: 100%; bottom: 0; left: 0; transition: transform .3s; z-index: -1; border-top: 1px solid #e2e2e2;}
#h_nav .link_btn li { background: #fff; }
#h_nav .link_btn li a { display: block; padding: 15px 0; border-bottom: 1px solid #e2e2e2;}
#h_nav .link_btn li a span { padding-bottom: 3px; position: relative;}
#h_nav .link_btn li a span::before {
	content: ''; display: block; width: 100%; height: 1px; background: #1a1312; position: absolute; bottom: 0; left: 0;
	transform: scale(0,1); transition: transform .3s; transform-origin: right;
}
#h_nav .link_btn li a:hover span::before { transform: scale(1,1); transform-origin: left;}
#h_nav .link_btn:hover ul { transform: translateY(100%);}
#h_nav .en_font { display: block; font-size: 22px; color: #1a1312;}

#h_nav #h_tel { width: 22%; max-width: 250px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#h_nav #h_tel p { font-size: 13px; font-weight: bold; text-align: right; line-height: 1.3;}
#h_nav #h_tel .tel-link { font-size: 24px; margin-left: 5px;}
#h_nav #h_tel span:not([class]) { font-size: 13px; font-weight: normal;}
#h_nav #h_contact { width: 18%; max-width: 250px;}
#h_nav #h_contact a { color: #fff; background: #ffae00; border-top: none; transition: opacity .5s; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;}
#h_nav #h_contact .en_font { color: #fff;}
#h_nav #h_contact a:hover { opacity: 0.75;}

#h_nav_wrap .close,
#sp_nav { display: none;}

#contact_wrap {
	position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 1000; overflow: auto;
	display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity .6s;
}
#contact_wrap.active { opacity: 1; pointer-events: auto;}
#contact_wrap a { transition: opacity .3s;}
#contact_wrap a:hover { opacity: 0.75;}
#contact_wrap > div { max-width: 94%; background: #fff; padding: 80px 5%; position: relative;}
#contact_wrap dd > p { margin: 15px 0 60px;}
#contact_wrap li { margin-top: 30px;}
#contact_wrap li a { display: block; width: 80%; padding: 20px 0; margin: 0 auto; border-radius: 50px; text-align: center; color: #fff; font-size: 22px; font-weight: bold; line-height: 1.5;}
#contact_wrap li a p span { font-size: 16px; margin-left: 5px;}
#contact_wrap li a .en_font { color: rgba(0, 0, 0, 0.5); font-size: 11px; display: block;}
#contact_wrap li:first-of-type a { background: #ffae00;}
#contact_wrap li:nth-of-type(2) a { background: #ff9833;}
#contact_wrap li:nth-of-type(3) a { background: #c89c3e;}
#contact_wrap .close { background: #000; color: #fff; width: 90px; height: 90px; position: absolute; top: 0; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#contact_wrap .close span { font-size: 53px; line-height: 0.7;}

@media screen and (max-width: 600px) {
	#header_wrap { min-width: 0;}

	#logo { width: 56%; font-size: 12px; padding: 10px;}
	#header #logo { justify-content: flex-start;}
	#header #logo .h_logo .logo img { width: 20px; margin-right: 7px;}
	#header #logo .h_logo .text img { width: 80px;}
	#header #logo .h_logo .text span { margin-top: 5px;}

	#menuOuter { width: 100%; height: 100vh; position: fixed; top: 0; right: 0; z-index: 1000; overflow: auto; pointer-events: none;}
	#menuOuter.active { display: block; pointer-events: all;}
	#h_nav_wrap { display: none; width: 100%; padding: 65px 10px env(safe-area-inset-bottom); margin: 0 auto; min-height: 100vh; box-sizing: border-box; position: relative; overflow: hidden;}
	#menuOuter #h_nav_wrap::before {
		content: ''; display: block; background: #fff; position: absolute; top: -10px; right: -10px; z-index: -1; width: 10px; height: 10px;
		transform: scale(1); border-radius: 50%; transition: transform .8s .5s;
	}
	#menuOuter.active #h_nav_wrap::before {
		transform: translate(50%,-50%) scale(250); transition: transform 1s;
	}
	#h_nav_wrap .h_logo { opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1s;}
	#h_nav_wrap #h_nav { opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1s;}
	#h_nav_wrap .close { opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1s;}

	#menuOuter.active .h_logo {
		opacity: 1;
		transform: translateY(0);
		transition: opacity 1s .5s, transform 1s .5s;
	}
	#menuOuter.active #h_nav {
		opacity: 1;
		transform: translateY(0);
		 transition: opacity 1s 1.2s, transform 1s 1.2s;
	}
	#menuOuter.active .close {
		opacity: 1;
		transform: translateY(0);
		transition: opacity 1s .8s, transform 1s .8s;
	}

	#h_nav_wrap .h_logo { display: flex;}
	#h_nav { flex-direction: column; width: 88%; margin: 5px auto 0; box-sizing: border-box;}
	#h_nav li { width: 100%; max-width: none; text-align: left;}
	#h_nav .link_btn { display: block; font-size: 13px; padding: 20px 0 5px; }
	#h_nav .link_btn::after { content: '>'; position: absolute; top: calc(50% - 5px); right: 10px; color: #1a1312;}
	#h_nav .link_btn:hover::before { transform: none;}
	#h_nav li.link_btn { border-bottom: none;}
	#h_nav li.link_btn::after { content: none;}
	#h_nav .en_font { font-size: 18px; display: inline-block; margin-right: 10px;}
	#h_nav .link_btn ul { position: static; margin-top: 5px; position: relative; z-index: 1; border-top: none;}
	#h_nav .link_btn:hover ul { transform: none;}
	#h_nav .link_btn li a { border-bottom: none; padding: 8px 0 8px 20px; font-size: 15px; position: relative; }
	#h_nav .link_btn li a span::before { content: none;}
	#h_nav #h_tel { order: 1; width: 100%; max-width: none; margin-top: 10px; padding-bottom: 30px;}
	#h_nav #h_contact { width: 100%; max-width: none; margin-top: 20px; line-height: 1.3;}
	#h_nav #h_contact a { padding: 10px 0;}
	#h_nav_wrap .close { color: #c59d47; font-size: 16px; display: flex; align-items: center; position: absolute; top: 10px; right: 5px; font-size: 12px; letter-spacing: 0;}
	#h_nav_wrap .close span { font-size: 53px; line-height: 0.7;}

	#contact_wrap { display: block;}
	#contact_wrap > div { padding: 60px 5%; margin: 5% auto;}
	#contact_wrap .close { width: 60px; height: 60px; font-size: 13px;}
	#contact_wrap .close span { font-size: 40px;}
	#contact_wrap dd > p { margin: 15px 0 30px;}
	#contact_wrap li a { padding: 10px 0; font-size: 18px; width: 100%;}

	#sp_nav { display: flex; }
	#sp_nav a { display: flex; justify-content: center; align-items: center; width: 50px; height: 100%; padding: 0 10px; box-sizing: border-box;}
	#sp_contact { margin-right: 1px;}
	#sp_contact a { background: #ffae00;}
	#sp_menu a { background: #c1963a;}

	#h_nav .link_btn::before { height: 1px; background: rgba(0,0,0,0.4); top: auto; bottom: 0; transform: none;}
	#h_nav .link_btn ul::before { content: ''; display: block; width: 100%; height: 1px; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4);}
	#h_nav .link_btn li a::before {
		content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0;
		background-image: linear-gradient(to right, rgba(0,0,0,0.4), rgba(0,0,0,0.4) 3px, transparent 3px, transparent 8px); background-repeat: repeat-x; background-size: 8px 1px;
	}
	#h_nav .link_btn li a::after { content: '>'; position: absolute; top: 28%; right: 10px; color: #1a1312; font-size: 13px;}

	#h_nav li.link_btn::before { content: none;}

	#menuOuter.active #h_nav .link_btn::before,
	#menuOuter.active #h_nav .link_btn ul::before { -webkit-animation: appearLine 1s 1.8s both;	animation: appearLine 1s 1.8s both;}
	#menuOuter.active #h_nav .link_btn li a::before { -webkit-animation: appearLine2 1s 1.8s both;	animation: appearLine2 1s 1.8s both;}
	@supports (-webkit-touch-callout: none) {
		#menuOuter {
			/* Safari用のハック */
			min-height: -webkit-fill-available;
		}
	}

}

@-webkit-keyframes appearLine {
	0% { background: rgba(0,0,0,0.8); transform: scale(0,1); transform-origin: left;}
	50% { background: rgba(0,0,0,0.8); transform: scale(1,1); transform-origin: left;}
	100% { background: rgba(0,0,0,0.4);}
}
@keyframes appearLine {
	0% { background: rgba(0,0,0,0.8); transform: scale(0,1); transform-origin: left;}
	50% { background: rgba(0,0,0,0.8); transform: scale(1,1); transform-origin: left;}
	100% { background: rgba(0,0,0,0.4);}
}

@-webkit-keyframes appearLine2 {
	0% { background: rgba(0,0,0,0.8); transform: scale(0,1); transform-origin: left;}
	50% { background: rgba(0,0,0,0.8); transform: scale(1,1); transform-origin: left;}
	100% { background-image: linear-gradient(to right, rgba(0,0,0,0.4), rgba(0,0,0,0.4) 2px, transparent 2px, transparent 4px); background-repeat: repeat-x; background-size: 4px 1px;}
}
@keyframes appearLine2 {
	0% { background: rgba(0,0,0,0.8); transform: scale(0,1); transform-origin: left;}
	50% { background: rgba(0,0,0,0.8); transform: scale(1,1); transform-origin: left;}
	100% { background-image: linear-gradient(to right, rgba(0,0,0,0.4), rgba(0,0,0,0.4) 2px, transparent 2px, transparent 4px); background-repeat: repeat-x; background-size: 4px 1px;}
}

/* ---------------------------------------------------
	G-nav
------------------------------------------------------ */



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

}


/* ---------------------------------------------------
	main_tit
------------------------------------------------------ */
#main_tit { width: 100%; background: #dccaba; padding: 50px 0; margin-top: 88px;}
#main_tit h1 { color: #fff; width: 94%; max-width: 1360px; margin: 0 auto; font-weight: bold;}
#main_tit h1 span { font-size: 40px; padding-right: 45px; font-family: 'Montserrat', sans-serif; font-weight: normal;}


@media screen and (max-width: 600px) {
	#main_tit { margin-top: 55px; padding: 5vw 0;}
	#main_tit h1 span { font-size: 26px;}
}

/* ---------------------------------------------------
	Contents
------------------------------------------------------ */



/* breadcrumb */
#contents_wrap #breadcrumb { padding: 5px 25px 25px; width: 100%; font-size: 14px; text-align: right; box-sizing: border-box; color: #a99584;}
#contents_wrap #breadcrumb li { display: inline-block; line-height: 1.6;}
#contents_wrap #breadcrumb li:before { content: '>'; margin: 0 5px;}
#contents_wrap #breadcrumb li:first-child:before { display: none;}
#contents_wrap #breadcrumb li a { color: #a99584;}
#contents_wrap #breadcrumb li a:hover { text-decoration: underline;}


@media screen and (max-width: 600px) {
	#contents_wrap #breadcrumb { display: none;}
}


/* section */
/* #contents_wrap section { margin: 0 auto 25px;} */


/* ---------------------------------------------------
	Footer
------------------------------------------------------ */
#footer_wrap { background: #fff;}
#footer_wrap a { transition: opacity .5s;}
#footer_wrap a:hover { opacity: 0.75;}
#footer_wrap a:hover img { opacity: 1;}
#footer { padding: 80px 0 40px;}
#footer:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}
#footer .disp_sp { display: none;}


#f_nav { padding-bottom: 45px; border-bottom: 1px solid #d0d0ce;}
#f_nav > ul { display: flex; justify-content: center;}
#f_nav > ul > li { margin-right: 100px;}
#f_nav > ul > li:last-of-type { margin-right: 0;}
#f_nav > ul > li:nth-of-type(3) { margin-right: 80px;}
#f_nav > ul > li p { margin-bottom: 5px;}
#f_nav > ul > li li { padding-left: 20px; position: relative; margin-bottom: 5px;}
#f_nav > ul > li li::before { content: ''; display: block; width: 13px; height: 2px; background: #d0d0ce; position: absolute; top: calc(50% - 1px); left: 0;}

#f_contact { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 45px 0 0;}

#f_tel { width: 45%; display: flex; flex-wrap: wrap; justify-content: space-between;}
#f_tel li { width: calc(50% - 20px); text-align: center;}
#f_tel li + li { margin-left: 40px;}
#f_tel li > span { padding: 0 10px; border: 1px solid #cfcfcf; display: block;}
#f_tel li > p img { vertical-align: baseline; margin-right: 7px;}
#f_tel li .tel-link { font-size: 27px; font-weight: bold;}
#f_tel li > p span:not([class]) { display: block; line-height: 1; font-size: 13px;}

#f_inquiry { width: 48%; display: flex; justify-content: space-between;}
#f_inquiry > a { width: 80%; display: flex; align-items: center; justify-content: center; background: #ffae00; color: #fff; font-size: 16px; font-weight: bold; transition: opacity .3s;}
#f_inquiry > a:hover { opacity: 0.75;}

#f_address { display: flex; padding: 50px 0 40px;}
#f_address li { margin-right: 8%; }
#f_address li:last-of-type { margin-right: 0;}
#f_address li span,
#f_address li .tel-link { display: inline-block;}
#f_address li .tel-link { margin-right: 15px;}

#f_bnr { display: flex; justify-content: center;}
#f_bnr li + li { margin: 0 0 0 50px;}

#f_link ul { display: flex; border-top: 1px solid #dcdcdc;}
#f_link li { width: 33.3%; flex-grow: 1; border-right: 1px solid #dcdcdc; box-sizing: border-box;}
#f_link li:last-of-type { border-right: none;}
#f_link li a { display: flex; align-items: center; justify-content: center; padding: 90px 0; font-size: 18px; font-weight: bold; transition: none;}
#f_link li a:hover { opacity: 1;}
#f_link li p { display: inline-block; position: relative; transition: transform 1s; -webkit-font-smoothing: antialiased;}
#f_link li a:hover p { transform: translateX(10px) translate3d(0,0,0);}
#f_link li p::before { content: ''; display: inline-block; width: 17px; height: 2px; background: #fab800; position: absolute; top: calc(1.5 * 10px); left: -30px;}
#f_link li p span { font-size: 14px; margin-right: 10px;}
#f_link li p span.en { display: block; color: #a7a6a6; font-size: 12px; margin-right: 0; font-weight: normal;}

#copyright { background: #000; color: #fff; padding: 5px 0; text-align: center; font-size: 12px;}

@media screen and (max-width: 600px) {
	#footer { position: relative; padding: 10vw 0;}
	#footer .disp_pc { display: none;}
	#footer .disp_sp { display: block;}

  #f_nav { padding-bottom: 20px;}
  #f_nav > ul { display: block; position: relative;}
  #f_nav > ul > li { margin-right: 0; width: 52%; margin-bottom: 10px;}
  #f_nav > ul > li:nth-of-type(3) { margin-right: 0; position: absolute; width: 40%; top: 0; right: 0;}
  #f_nav > ul > li p { margin-bottom: 10px;}
  #f_nav > ul > li li { margin-bottom: 10px;}

  #f_contact_wrap { position: relative;}
	#f_tel { width: 100%; display: block;}
	#f_tel li { width: 240px; text-align: center; margin: 15px auto;}
  #f_tel li + li { margin-left: auto;}
	#f_tel li > span { padding: 3px 3px; margin-bottom: 5px; font-size: 13px; display: block;}
	#f_tel li .tel-link { font-size: 18px;}
	#f_tel li > p span:not([class]) { line-height: 1.7;}
	#f_contact { width: 100%; padding: 5vw 0 0;}
  #f_inquiry { display: block; width: 100%;}
	#f_inquiry > a { width: 100%; padding: 12px 0;}
  #f_inquiry > p { position: absolute; bottom: 20px; right: 0;}
  #f_inquiry > p img { width: 60px;}

  #f_address { display: block; padding: 20px 0;}
  #f_address li { margin-right: 0; margin-top: 20px;}
  #f_address li:last-of-type { padding-right: 70px;}

	#f_bnr { display: block;}
  #f_bnr li + li {  margin: 20px 0 0;}

	#f_link li a { padding: 7vw 5%; font-size: 14px;}
	#f_link li p { line-height: 1.3; padding-top: 10px;}
	#f_link li a:hover p { transform: none;}
	#f_link li p::before { left: 0; top: 0;}
	#f_link li p span { display: block; margin-right: 0; font-size: 11px;}
	#f_link li p span.en { margin-top: 3px; font-size: 11px;}
	#f_link li a:hover p span.en { transform: none;}
}


/* ---------------------------------------------------
	sp_nav
------------------------------------------------------ */

/* #sp_nav { display: none;}

@media screen and (max-width: 600px) {
	#sp_nav { display: block; position: fixed; bottom: 0; left: 0; background: #000; border-top: 3px solid #555;}
	#sp_nav ul { display: table; width: 100%; table-layout: fixed;}
	#sp_nav li { display: table-cell; -webkit-box-sizing: border-box; box-sizing: border-box;}
	#sp_nav li + li { border-left: 1px solid #555;}
	#sp_nav a { display: block; padding: 10px; text-align: center;}
	#sp_nav img { width: 50px;}
} */



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

180205_kamiguchi_更新履歴コメントひな形追加
200828_akimoto_IEで游ゴシック体を使用すると謎の余白ができるバグがあるため、IEでのみfont-familyを変更する記述を追記
180228_〇〇_cssを更新したらここに更新履歴を追加していきます。多くなったら上の方は削除。

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