/* ======================================================================
 common
====================================================================== */
.p-guide-common {
  margin-bottom: 60px;
}
@media screen and (min-width: 769px) {
  .p-guide-common {
    margin-bottom: 80px;
  }
}

.p-guide-common.gray {
  background-color: #f0f0f0;
}

/* ---------------- pタグ --------------- */
.p_guide__content p {
 font-size: 15px;
 line-height: 1.77;
}
@media screen and (min-width: 769px) {
  .p_guide__content p { 
    font-size: 16px;
    line-height: 2;
  }
}

/* h2見出し */
.p-guide__heading {
  font-size: 18px;
  line-height: 1.77;
  letter-spacing: .03em;
  margin-bottom: 40px;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .p-guide__heading { 
    font-size: 20px;
    margin-bottom: 60px;
  }
}

.p-guide__heading .small {
  font-size: 14px;
}
@media screen and (min-width: 769px) {
  .p-guide__heading .small {
    font-size: 16px;
  }
}

.p-guide__heading::after {
  display: block;
  content: '';
  width: 50px;
  height: 1px;
  background: #141414;
  margin: 16px auto 0;
}

/* h3見出し */
.p-guide__heading-h3 {
  font-size: 17px;
  line-height: 1.77;
  letter-spacing: .03em;
  color: #062052;
  font-weight: bold;
}
@media screen and (min-width: 769px) {
  .p-guide__heading-h3 {
    font-size: 18px;
  }
}

.p-guide-wrapper {
  max-width: 1200px;
  width: 90%;
  margin: auto;
}

.p-guide-wrapper-s {
  max-width: 1000px;
  width: 90%;
  margin: auto;
}

.p-guide-wrapper-min {
  max-width: 600px;
  width: 90%;
  margin: auto;
}

.p_guide .l_main_visual {
  background: url(../img/products/sp/kv.jpg) no-repeat;
  background-size: cover;
}
@media screen and (min-width: 769px) {
  .p_guide .l_main_visual {
    background: url(../img/products/kv.jpg) no-repeat;
    background-size: cover;
  }
}

/* ======================================================================
  .p-guide-intro
====================================================================== */
.p-guide-intro {
  margin-top: 40px;
}
@media screen and (min-width: 769px) {
  .p-guide-intro {
    margin-top: 80px;
  } 
}

.p-guide-intro__heading {
  text-align: left;
}

.p-guide-intro__heading::after {
  margin: 16px 0 0;
}

.p-guide-intro__slitters {
  display: flex;
  flex-direction: column;
  gap: 40px 0;
}

@media screen and (min-width: 769px) {
  .p-guide-intro__slitter {
    display: flex;
    gap: 0 40px;
  }
}

.p-guide-intro__slitter.first {
  display: flex;
  flex-direction: column-reverse;
}
@media screen and (min-width: 769px) {
  .p-guide-intro__slitter.first {
    flex-direction: row;
  }
}

.p-guide-intro__heading-h3 {
  margin-bottom: 20px;
}

@media screen and (min-width: 769px) {
  .p-guide-intro__text {
    width: 50%;
  }
}

@media screen and (min-width: 769px) {
  .p-guide-intro__image {
    width: 50%;
    height: 300px;
  }
}
.p-guide-intro__image img {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .p-guide-intro__image img {
    height: 100%;
    object-fit: cover;
  }
}

/* ======================================================================
  .p-guide-worries
====================================================================== */
.p-guide-worries {
  padding: 60px 0;
}

.p-guide-worries__contents {
  display: flex;
  flex-direction: column;
  gap: 40px 0;
}
@media screen and (min-width: 769px) {
  .p-guide-worries__contents {
    flex-direction: row;
    justify-content: space-evenly;
    gap: 40px;
  }
}

.p-guide-worries__content {
  background: #fff;
  padding: 20px;
}
@media screen and (min-width: 769px) {
  .p-guide-worries__content {
    padding: 40px;
  }
}

.p-guide-worries__heading-sub {
  font-size: 17px !important;
  margin-bottom: 8px;
}
@media screen and (min-width: 769px) {
  .p-guide-worries__heading-sub {
    font-size: 18px !important;
  }
}

.p-guide-worries__lists {
  font-size: 15px;
  line-height: 1.77;
}
@media screen and (min-width: 769px) {
  .p-guide-worries__lists {
    font-size: 16px;
    line-height: 2;
  }
}

.p-guide-worries__list {
  position: relative;
  padding-left: 20px;
}

.p-guide-worries__list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg); /* 中央揃え＆45度回転 */
  width: 8px;
  height: 8px;
  background-color: #001F4D;
}

/* ======================================================================
  tabs
====================================================================== */
:root{
  --base-line:#b4b4b4; /* タブ下のベースライン */
  --active:#062052;       /* アクティブ文字色＋下線色 */
  --inactive:#b4b4b4;  /* 非アクティブ文字色 */
}
/* body{ margin:0; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif; } */

.tabs{ 
  max-width: 1200px; 
  margin: 48px auto; 
  padding: 0 16px; 
}

/* ===== タブ見出し ===== */
.tablist{
  display:flex;
  justify-content:center;     /* 中央寄せ */
  gap: 32px;                  /* タブ間隔 */
  border-bottom: 2px solid var(--base-line); /* 全体のベースライン */
  padding: 12px 0;
  padding: 0;
}
@media screen and (min-width: 769px) {
  .tablist{
    gap: 64px;
  }
}

.tab{
  position:relative;
  appearance:none;
  background:transparent;     /* 背景色なし */
  border:0;
  padding: 6px 20px;
  font-size:16px;
  line-height:1;
  color:var(--inactive);      /* 非アクティブ色 */
  cursor:pointer;
  outline:none;
  padding: 16px 0;
}
.tab:hover{ color:#8a8a8a; }

/* アクティブ：文字色 #333、タブ幅いっぱいの下線 */
.tab[aria-selected="true"]{
  color:var(--active);
}
.tab[aria-selected="true"]::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-2px;
  height:3px;                 /* 下線の太さ（調整可） */
  background:var(--active);
}

/* ===== コンテンツ ===== */
.tabpanel-wrap{ 
  background:#fff;
  padding: 28px 0 40px;
}
@media screen and (min-width: 769px) {
  .tabpanel-wrap {
    padding-top: 40px;
  }
}
.tabpanel{ display:none; }
.tabpanel[aria-hidden="false"]{ display:block; }
.lead{ margin:0; font-size:16px; color:#333; line-height:1.8; }

/* キーボードフォーカス可視化 */
.tab:focus-visible{
  outline:2px solid #7aa7ff;
  outline-offset:4px;
  border-radius:4px;
}

/* ======================================================================
  .p-guide-merit
====================================================================== */
.p-guide-merit__br {
  display: block;
}
@media screen and (min-width: 769px) {
  .p-guide-merit__br {
    display: none;
  }
}

.p-guide-merit__lists {
  display: flex;
  flex-direction: column;
  gap: 40px 0;
}
@media screen and (min-width: 769px) {
  .p-guide-merit__lists {
    flex-direction: row;
    gap: 0 40px;
    justify-content: space-between;
  }
}

@media screen and (min-width: 769px) {
  .p-guide-merit__list {
    width: 30%;
  }
}

.p-guide-merit__image {
  margin-bottom: 16px;
  height: 180px;
}
@media screen and (min-width: 769px) {
  .p-guide-merit__image {
    height: 220px;
  }
}

.p-guide-merit__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-guide-merit__heading {
  text-align: center;
  margin-bottom: 16px;
}

.p-guide-merit__heading::after {
  display: block;
  content: '';
  width: 50px;
  height: 1px;
  background: #141414;
  margin: 16px auto 0;
}

/* ======================================================================
  .p-guide-reason
====================================================================== */
.p-guide-reason__lists {
  display: flex;
  flex-direction: column;
  gap: 60px 0;
}

@media screen and (min-width: 769px) {
  .p-guide-reason__list {
    display: flex;
    gap: 0 40px;
  }
}

@media screen and (min-width: 769px) {
  .p-guide-reason__list.reverse {
    flex-direction: row-reverse;
  }
}

.p-guide-reason__image {
  height: 280px;
}
@media screen and (min-width: 769px) {
  .p-guide-reason__image {
    width: 50%;
    height: auto;
  }
}

.p-guide-reason__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
}
@media screen and (min-width: 769px) {
  .p-guide-reason__image img {
    aspect-ratio: unset;
  }
}

@media screen and (min-width: 769px) {
  .p-guide-reason__content {
    width: 50%;
    margin-top: 20px;
  }
}

.p-guide-reason__point {
  color: #062052;
  font-size: 16px !important;
  margin-bottom: 4px;
}

.p-guide-reason__heading-h3 {
  font-size: 18px;
  color: #323232;
}
@media screen and (min-width: 769px) {
  .p-guide-reason__heading-h3 {
    font-size: 18px;
  }
}

.p-guide-reason__heading-h3::after {
  display: block;
  content: '';
  width: 50px;
  height: 1px;
  background: #141414;
  margin: 20px 0;
}

.p-guide-reason__text {
  margin-bottom: 16px;
}

.p-guide-reason__btn {
  margin-top: 20px;
  text-align: center;
}

/* ======================================================================
  .p-guide-reco
====================================================================== */
.p-guide-reco__lists {
  display: flex;
  flex-direction: column;
  gap: 40px 0;
}
@media screen and (min-width: 769px) {
  .p-guide-reco__lists {
    flex-direction: row;
    gap: 0 100px;
    justify-content: space-between;
  }
}

.p-guide-reco__list {
  text-align: center;
}
@media screen and (min-width: 769px) {
  .p-guide-reco__list {
    width: 33%;
  }
}

.p-guide-reco__catch {
  background-color: #f0f0f0;
  margin-bottom: 20px;
  padding: 4px 0;
  font-size: 13px !important;
}

.p-guide-reco__image {
  margin-bottom: 20px;
}
@media screen and (min-width: 769px) {
  .p-guide-reco__image {
    height: 200px;
  }
}

.p-guide-reco__image img {
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 769px) {
  .p-guide-reco__image img {
    object-fit: contain;
  }
}

.p-guide-reco__heading {
  font-size: 18px;
  margin-bottom: 16px;
}
/* @media screen and (min-width: 769px) {
  .p-guide-reco__heading {
    font-size: 20px;
  } */
/* } */

.p-guide-reco__text {
  text-align: left;
  font-size: 15px !important;
}

/* ======================================================================
  .p-guide-movie
====================================================================== */
.p-guide-movie__layout {
  height: 197px;
}
@media screen and (min-width: 769px) {
  .p-guide-movie__layout {
    width: 800px;
    height: 450px;
    margin: 0 auto;
  }
}

.p-guide-movie__layout iframe {
  width: 100%;
  height: 100%;
}

/* ======================================================================
  .p-guide-flow
====================================================================== */
.p-guide-flow  {
  padding: 60px 0;
}

.p-guide-flow__lists {
  display: flex;
  flex-direction: column;
  gap: 12px 0;
} 

.p-guide-flow__list {
  background: #fff;
  padding: 4px 16px;
}

.p-guide-flow__btn {
  margin-top: 40px;
  text-align: center;
}

.p-guide-flow__yohaku {
  display: inline-block;
  margin: 0 8px;
}

/* ======================================================================
  .p-guide-jirei
====================================================================== */
.p-guide-jirei__lists {
  display: flex;
  flex-direction: column;
  gap: 40px 0;
}
@media screen and (min-width: 769px) {
  .p-guide-jirei__lists {
    flex-direction: row;
    justify-content: space-around;
    gap: 0 60px;
  }
}

@media screen and (min-width: 769px) {
  .p-guide-jirei__list {
    width: 40%;
  }
}

.p-guide-jirei__image {
  height: 200px;
  margin-bottom: 16px;
}
@media screen and (min-width: 769px) {
  .p-guide-jirei__image {
    height: 180px;
  }
}

.p-guide-jirei__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-guide-jirei__heading {
  font-size: 16px !important;
  margin-bottom: 16px;
}
@media screen and (min-width: 769px) {
  .p-guide-jirei__heading {
    font-size: 18px !important;
  }
}

.p-guide-jirei__text.mb {
  margin-bottom: 16px;
  border-bottom: 1px solid #b1b1b1;
  padding-bottom: 16px;
}