@charset "UTF-8";
/***********************************************
								共 通 項 目
***********************************************/
.bg-db { background-color: #052130; color: #EFEFEF; }

.bg-wht { background-color: #EFEFEF; }

.bg-lb { background-color: #FDF7ED; }

.bg-brown { background-color: #382C1E; color: #EFEFEF; }

.bg-orange { background-color: #F7931E; }

.button { line-height: 1.8; font-weight: 500; font-size: 1em; background-color: #F7931E; color: #FFFFFF; /*border-radius: 1em;*/ position: relative; text-align: center; border: solid 2px #FFFFFF; transition: .4s; border-radius: 10px; }
.button a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; text-indent: -9999px; }
.button:hover { background-color: transparent; border-color: #F7931E; color: #F7931E; border-radius: 1.8em; }

.youtube { position: relative; background-color: #000; }
.youtube .start { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15%; max-width: 213px; height: auto; }
.youtube a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.youtube:hover .tbn { opacity: .6; }

.headline, hr { font-size: 3em; border: none; border-bottom: dashed 3px #EFEFEF; color: #EFEFEF; }
.bg-wht .headline, .bg-lb .headline, .bg-wht hr, .bg-lb hr { color: #052130; border-color: #052130; }

.subheading { font-size: 2.4em; }

.tbn { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/***********************************************
						メ イ ン コ ン テ ン ツ
***********************************************/
.hero-area { width: 100%; max-width: 1920px; background: linear-gradient(90deg, rgba(253, 247, 237, 0) 0%, rgba(56, 44, 30, 0.75) 100%), url("../img/bg.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; background-blend-mode: multiply; color: #EFEFEF; }

.intro { font-size: 1.4rem; font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.48rem) * 0.5063)), 1.6rem); line-height: 1.6; }

.reason { border: solid 2px #052130; border-radius: 10px; width: 100%; max-width: 800px; }
.reason h2 { transform: translateY(-50%); }
.reason ol li { font-size: initial; font-weight: 500; }

.model .spec { width: 100%; border-top: 3px solid #F7931E; border-bottom: 3px solid #F7931E; }
.model .spec tr { border-bottom: 1px solid #F7931E; }
.model .spec th { width: 40%; background-color: #382C1E; text-indent: -1.95rem; /* 1.8+0.15rem */ position: relative; color: #EFEFEF; padding-left: 2.55rem; /* 0.6+1.8+0.15rem */ }
.model .spec th::before { content: ""; display: inline-block; background: url("../img/check.svg") no-repeat; background-size: contain; width: 1.8rem; height: 1.7rem; vertical-align: middle; margin-right: 0.15rem; }
.model .spec th::after { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-left-color: #382C1E; border-width: 0.8rem; margin-top: -0.8rem; }
.model .spec td { width: 60%; padding-top: 0.6rem; padding-bottom: 0.6rem; padding-left: 1.5rem; padding-right: 0.6rem; font-weight: 700; color: #EFEFEF; }
.bg-wht .model .spec td { color: #052130; }

/***********************************************
								フ ッ タ ー
***********************************************/
.shopinfo { position: relative; }
.shopinfo a { color: #333; }
.shopinfo a:hover { text-decoration: underline; }
.shopinfo::before { position: absolute; top: 0; left: 0; height: 100%; width: 6px; border-radius: 6px; content: ""; display: block; background-color: #052130; }
.shopinfo .shopname { font-size: 1.4em; }

.footer { background-color: #000; width: 100%; margin: 0; padding: 0; text-align: center; }
.footer img { width: 60%; max-width: 300px; }

.fnav { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: auto; color: #FFFFFF; }
.fnav li { font-size: 0.8em; line-height: 2.0; width: 100%; position: relative; text-align: left; border-bottom: solid 1px #333; transition: .4s; }
.fnav li:last-child { border-bottom: none; }
.fnav li:hover { background-color: #333; }
.fnav li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -9999px; }
@media (min-width: 992px) { .fnav { justify-content: space-around; max-width: 1000px; }
  .fnav li { width: auto; text-align: center; border-bottom: none; border-bottom: solid 1px #000; }
  .fnav li:hover { background-color: #000; border-bottom: solid 1px #FFFFFF; } }

.copy { font-size: 1rem; text-align: center; color: #FFFFFF; }