/* ======================
FAQ
====================== */

/* FAQ */
body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  line-height: 2;
  letter-spacing: 0.04em;
}

.faq-page{
background:#181818;
padding:120px 40px;
}

.faq h2{
text-align:center;
color:#c9a46a;
letter-spacing:4px;
margin-bottom:60px;
}

h2.faq-title {
font-size: 32px;
}

/* 各項目 */

.faq-item{
border-bottom:1px solid rgba(255,255,255,.15);
}

/* 質問 */

.faq-q{
width:100%;
background:none;
border:none;
color:#fff;
font-size:18px;
text-align:left;
padding:22px 0;
cursor:pointer;

position:relative;
padding-left:30px;
}
/* + アイコン */



/* + */

.faq-q::before{
content:"Q";
position:absolute;
left:0;
color:#c9a46a;
font-weight:bold;
}

/* + */

.faq-q::after{
content:"+";
position:absolute;
right:0;
color:#c9a46a;
font-size:20px;
}

/* 開いたとき */
/* + */

.faq-q::after{
content:"+";
position:absolute;
right:6px;
color:#c9a46a;
font-size:20px;
transition:transform .3s ease;
}

/* 開いたとき */

.faq-item.active .faq-q::after{
transform:rotate(45deg);
}


/* 回答 */

.faq-a{
max-height:0;
overflow:hidden;
transition:max-height .4s ease;
}

.faq-a p{
color:#ddd;
line-height:1.9;
padding-bottom:20px;
text-align: left;
}

.faq-a-text {
font-size: 16px;
padding-bottom: 0!important;
line-height: 1.9;
margin-bottom: 0;
}

section.faq .container {
  max-width: 730px;
}

.faq-more {
  margin-top: 2em;
  text-align: center;
}

.faq .container.narrow{
text-align:left;
}

.faq-en-title {
  margin: 0 0 18px;
  color: #c8a86b;
  font-size: 16px;
  letter-spacing: 0.18em;
}


.faq-hero {
  position: relative;
  height: 35vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:#000;
}

.faq-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display:block;
}

@media (max-width: 768px) {
.faq-hero {
  min-height: 75svh;
  background-position: center center;
}
.faq-page {
  padding: 60px 40px!important;
}
.faq-container{
  padding:0;
}
.faq-text{
 font-size: 14px;
 margin-bottom: 22px;
 line-height: 2.2;
}
h1.page-title {
font-size: 24px;
 margin-bottom: 1em;
}
h2.faq-title {
font-size: 24px;
}
button.faq-q {
font-size: 16px;
}
.faq-answer-guide {
display: block;
margin-top: 0.4em;
}
.faq-answer-note {
display: block;
margin-top: 0.5em;
}
}

/* 黒オーバーレイ */

.faq-hero__overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
}

/* テキスト */

.faq-hero__inner{
position:relative;
z-index:2;
color:#fff;
text-align: center;
margin-top: 4em;
}

/* 小タイトル */

.faq-hero__sub{
letter-spacing:6px;
font-size:clamp(16px,2vw,20px);
color:#c9a46a;
margin-bottom:10px;
}

/* タイトル */

.faq-hero__title{
  margin: 0 0 25px;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.4;
}

/* 説明 */

.faq-hero__text{
  margin: 0 0 80px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 2.2;
}

.faq-contact .container {
  position: relative;
  z-index: 2;
}


/* 問い合わせ */

.faq-contact{
background:#07070a;
padding:120px 20px;
text-align:center;
}

.faq-contact h2{
color:#c9a46a;
margin-bottom:20px;
}

.faq-section--gray{
position:relative;
background:url("../img/dairiseki_03.webp") center/cover no-repeat;
padding:120px 20px;

}

/* 黒オーバーレイ */

.faq-section--gray::before{
content:"";
position:absolute;
background:rgba(0,0,0,0.30);
top:0;
left:0;
width:100%;
height:100%;
}

/* ========================================
   Button
======================================== */
.faq-btn-wrap {
  margin-top: 35px;
}

.faq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0 30px;
  border: 1px solid #c8a86b;
  color: #c8a86b;
  font-size: 16px;
  letter-spacing: 0.08em;
  background: transparent;
  transition: 
  background 0.3s ease,
  color 0.3s ease,
  border-color 0.3s ease,
  transform 0.3s ease;
}

.faq-btn:hover {
  background: #c8a86b;
  color: #111;
}

.faq-tel {
  margin-top: 28px;
  font-size: 16px;
  color: #fff;
}

.sp-only {
  display: none;
}

@media(max-width:768px){
 .sp-only{
  display: block;
 }
.faq-contact {
 padding:60px 20px;
}
.faq-hero__text {
margin: 0 0 60px;
font-size:16px;
}
.faq-hero__inner{
margin-top: 2em;
}
.faq-hero__title{
 margin: 0 0 18px;
}
.faq-a p {
    font-size: 15px;
}
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;

  border: 1px solid #c8a86b;
  color: #c8a86b;
  background: transparent;

  font-size: 14px;
  letter-spacing: 0.08em;
  text-decoration: none;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.faq-a-text-last {
  margin-bottom: 36px!important;
}

.sp-br{
  display:none;
}

@media(max-width:599px){
  .sp-br{
  display:block;
}  
}