@chareset "UTF-8";

/* * 共通部分 */
*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

html {
    font-size: 100%;
    height: 100%;
    scroll-behavior: smooth;
    /* ブラウザの高さに合わせる */
}

body {
    font-family: "メイリオ", Meiryo, sans-serif, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    line-height: 1.7;
    width: 100%;
    text-align: center;
    -webkit-text-size-adjust: 100%;
}

nav {
    border-top: 1px solid #d6d6d6;
    /* border-bottom: 1px solid #c1c1c1; */
    background: -moz-linear-gradient(top, #f1f1f1, #fff);
    background: -webkit-linear-gradient(top, #f1f1f1, #fff);
    background: linear-gradient(to top, #f1f1f1, #fff);
}

nav .inner {
    margin-right: auto;
    margin-left: auto;
    max-width: 1050px;
    width: 98%;
}

nav #navi {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

nav #navi li {
    line-height: 100%;
    border-right: 1px solid #e7e7e7;
    flex: 1;
    white-space: nowrap;
}

nav li:hover{
    color: #AD946B;
}


main {
    margin: 0 auto;
    text-align: left;
}

a {
    text-decoration: none;
}

ul {
    padding-left: 0;
}

li {
    list-style: none;
}

img {
    max-width: 100%;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    vertical-align: top;
    /* 上記3列を追加するだけで、表記づれがなくなる */
}

.logo-title {
    font-family: Baskerville, ＭＳ 明朝／ＭＳ Ｐ明朝;
}

.fee-sp {
    display: none;
}
/* フォントサイズ */
h1 {}

.footer-logo-title,
.footer-box-menu li,
.card-text span{
    font-size: 0.8rem;
}

/* 18px */
.custeomer-text,
.difference-text,
.cando-text,
.card-text,
.reasons-item-number,
.reasons-item-text,
.formflow-text,
.formflow-item-title,
.formflow-item-text,
.greeting-card-text,.floating-time {
    font-size: 1rem;
}

.logo-title-sub,.form-baner-link {
    font-size: 1rem;
}

.logo-phon-time{
    text-align: left;
}

/* 24px */
.logo-form-sub,
.form-baner-text,.demerit-lead{
    font-size: 1.5rem;
}

.custeomer-card-title{
    font-size: 1.5rem;
}

.logo-phon-number,.pobo-title{
    font-size: 1.7rem;
}

/* 34px */
.fee-text,
.reasons-item span {
    font-size: 2rem;
}

/* 36px */
.difference-card-title,
.cando-title-text{
    font-size: 2rem;
}

.logo-title {
    font-size: 3.5rem;
}

.greeting-box-text span{
    font-size: 1.5rem;
    font-weight: bold;
    color: #D6A747;
}
/* 50px */
.custeomer-title,
.difference-title,
.cando-title,
.flow-title,
.fee-title,
.reasons-title,
.formflow-title,
.pa-title,
.greeting-title,.fee-box,.demerit-titile,.info-title{
    font-size: 2.2rem;
    text-align: center;
}

.form-baner-title {
    font-size: 3rem;
}

/* テキスト高さ */
.cando-title {
    line-height: 0;
    margin-bottom: 30px;
}

.logo-title {
    line-height: 1;
}

.cando-text{
    line-height: 20px;
}

.logo-phon-time{
    line-height: 24px;
}
.logo-phon-number {
    line-height: 30px;
}

.form-baner-item{
    font-weight: bold;
}

/* カラー */

p ,.greeting-card-text,.custeomer-name{
    color: #333333;
}

.custeomer-title,
.difference-title,
.flow-title {
    background-color: #B0976B;
    text-align: center;
}

.footer-logo-title,
.footer-box-menu a,
.custeomer-title,
.difference-title,
.flow-title,
.logo-phon-title,
.logo-phon-time span,
.logo-form-text,
.logo-form-sub {
    color: #ffffff;
}

.cando-title,
.fee-title,
.reasons-title,
.formflow-title,
.pa-title,
.greeting-title,
.reasons-item span,.demerit-titile,.info-title{
    color: #B0976B;
}

.logo-phon-number,
.logo-title-sub {
    color: #AD946B;
}

.card-title,.card-text span,.custeomer-card-title{
    color: #D6A747;
}

.logo-phon-time{
    color: #00B900;
}

.logo-phon-title,
.logo-phon-time span{
    background-color: #00B900;
}

.logo-phon-title{
    font-size: 0.9rem;
}

.difference-group {
    background-color: #F4F4F4;
}

.cando-title-text {
    color: #D6A747;
    text-align: center;
    border-bottom: 1px solid #efb044;
    width: 800px;
}

.reasons-item-number {
    border-bottom: 2px solid #968061;
}

.footer-box {
    background-color: #606060;
}

.greeting-box{
    background-color: #E7E5E0;
}

.reasons-item,
.formflow-item {
    border: 1px solid #333333;
}

/* 位置調整・装飾*/
.fee-text,
.formflow-text,
.form-btn,
.difference-sub-text,
.reasons-item-number,
.pobo-title,.fee-table-repair,.fee-table-remake,.cando-title-lead,.demerit-titile-lead {
    text-align: center;
}

.cando-title-text,
.custeomer-card,
.difference-group,
.cando-box,
.flow-card,
.formflow-box,
.reasons-box,
.footer-box-menu,
.greeting-box,
.footer-box-logo,.demerit-titile-box{
    margin: auto;
}

.difference-group,
.cando-box,
.flow-card,
.cando-text,
.greeting-box,.demerit-titile-box{
    width: 800px;
}

.formflow-box,
.faq-wrap,
.reasons-box,
.custeomer-card {
    width: 1000px;
}

.footer-box-menu {
    justify-content: center;
}

.custeomer-card,
.difference-card,
.flow-card,
.footer-box-menu,
.logo-left,
.logo-right,
.logo-phon-line,
.logo-form-mail {
    display: flex;
}

.logo-form-mail{
    justify-content: center;
}
.reasons-box,
.greeting-card,
.logo {
    display: flex;
    justify-content: space-between;
}

.logo-left,
.logo-right {
    align-items: center;
}

.custeomer-card,
.fee-text,
.fee-box {
    border-bottom: 1px solid #c4c4c4;
    max-width: 100%;
}

.footer-box-menu li {
    border-left: 1px solid #D2D2D2;
    max-width: 100%;
}

.custeomer-card-box {
    margin-left: 20px;
}

.logo-form {
    background-color:#B0976B ;
}

.reasons-item {
    width: 300px;
}

.formflow-item {
    width: 150px;
}

.difference-card-box {
    width: 400px;
}

.logo-phon-line img{
    width: 150px;
    height: 80px;
}
.form-baner{
    position: relative;
    background-image: url("https://mjt-jewelry.com/remake/img/banner_form_haikei.webp");
    background-size: cover;
}

.form-baner-column{
    margin-right: auto;
    margin-left: auto;
    max-width: 1050px;
    width: 98%;
}

.greeting-box,.logo-form{
    border-radius: 20px;
}

.logo-form{
    border-radius: 10px;
    padding: 10px;
}

.cando-title,
.flow-title,
.reasons-title,
.formflow-title,
.footer-box,
.form-btn,
.difference,
.fee,
.form-baner{
    margin-top: 80px;
}

.greeting-box,
.faq-wrap,
.qa,.info-title{
    margin-top: 60px;
}

.cando-box,
.difference-group,
.flow-group,
.form-baner img,
.reasons-box,
.formflow-box,.fee-table-repair{
    margin-top: 40px;
}

.form-baner-item{
    margin-left: 10%;
    padding-top: 5%;
    height: 350px;
}

.difference-card,
.flow-card,
.formflow-box,
.fee-cancel ,
.copyright,.demerit-titile{
    margin-top: 20px;
}

.formflow-text{
    margin-top: 10px;
}

.logo-box,
.logo-form {
    margin-left: 20px;
}

.form-baner-title{
    margin-bottom: 60px;
    line-height: 80px;
}
.formflow-text,.info-title{
    margin-bottom: 10px;
}

.logo-phon-time span {
    padding: 3px;
}
.logo{
    padding: 10px;
}

.logo-phon-line,.logo-phon-time{
    padding-top: 5px;
}

.greeting-card {
    padding-top: 60px;
}
.formflow-item-text,.floating-number-title{
    padding-top: 10px;
}

.greeting-title,.info-title{
    padding-top: 20px;
}

.greeting-card{
    padding: 40px;
}

.greeting-card{
    padding:10px 40px;
}

.greeting-box-text{
    padding:10px 40px 40px ;
}

.logo-phon-line img,.logo-form-sub{
    padding-left: 5px;
}

.question {
    padding-left: 40px;
}

.difference-card-box,.card-title {
    padding-left: 20px;
}

.footer-box,
.custeomer-card,
.fee-text,
.difference-sub-text,
.cando-text,
.reasons-item-number,
.reasons-item-text,
.formflow-item,
.formflow-item-title,
.difference-group,
.card-text {
    padding: 20px;
}

.footer-box-menu a {
    padding: 0 1em;
}

.demerit{
    padding-bottom: 40px;
}
/* 画像サイズ */
.logo {
    max-width: 1140px;
    margin-right: auto;
    margin-left: auto;
}

.logo-img {
    width: 110px;
    height: 80px;
}

.top img {
    height: 530px;
}

.footer-box-logo {
    width: 100px;
    height: 70px;
}

.custeomer-card-box {
    width: 600px;
}

.custeomer-card img,
.difference-card img{
    width: 350px;
    height: 280px;
}
.flow-card img {
    width: 350px;
}

.cando-box img {
    width: 1000px;
    height: 200px;
}

.greeting-card img {
    padding-top: 60px;
    padding-left: 20px;
    width: 200px;
    height: 200;
}

.form-baner img {
    height: 350px;
}

.footer-box{
    height: 300px;
}

.card-text{
    width: 450px;
    height: auto;
}

.logo-form-text img{
    width: 24px;
}

.logo-form-mail img{
    width: 40px;
}
/* よくある質問 */


.question:hover {
    cursor: pointer;
}

.question::before {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center center;
    transition: all 0.2s linear 0s;
    font-size: 24px;
    font-weight: 400;
    color: #B0976B;
}

.question.on::before {
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center center;

}

.question.on::after {
    content: "";
    position: absolute;
    width: calc(100% - 32px);
    height: 1px;
    background: #ccc;
    bottom: 0;
    left: 50%;
    transform: translatex(-50%);
}

.answer {
    padding: 20px 40px;
}

.circle2,
.circle2-sub {
    display: inline-block;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    line-height: 1.8rem;
    margin-right: 20px;
}

.circle2 {
    background: #B08436;
}

.circle2-sub {
    background: #55C9C5;
}

.form-btn a {
    font-size: 28px;
    margin: 10px;
    padding: 15px 10px;
    border-radius: 5px;
    background-color: #417E38;
    box-shadow: 0 0 0 4px #49953e;
    color: #fff;
    font-weight: bold;
}

.accordion-container {
    margin: 20px auto 0;
    max-width: 800px;
    width: 100%;
    border: solid 2px #B0976B;
    margin-bottom: 20px;
}

.accordion-list:not(:first-child) {
    margin-top: 10px;
}

.accordion-title {
    cursor: pointer;
    font-size: 16px;
    padding: 20px 40px;
    position: relative;
    font-weight: 100;
}

.accordion-title:after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center center;
    transition: all 0.2s linear 0s;
    font-size: 24px;
    font-weight: 400;
    color: #B0976B;
}

.accordion-title.open:after {
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center center;
}

.accordion-text {
    border-left: 1px solid #DDD;
    border-right: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    display: none;
    padding: 20px 40px;
}

/* フローティングバナー */
/****** フローティングバナー **********/
.floatingWrap {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 100;
}

.floating {
    backface-visibility: hidden;
    background-color: #B0976B;
    color: #fff;
    height: 140px;
    position: relative;
    text-align: center;
    width: 100%;
    overflow: hidden;
    line-height: 40px;
}

.floating p {
    color: white;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
}

.floating .floating-box {
    display: flex;
    width: 100%;
    margin: 0 auto;
}

.floating .floating-form {
    width: 40%;
    height: 80px;
    margin-top: 10px;
    overflow: auto;
    background-color: #417E38;
    border-radius: 0.5rem;
    margin-left: 5%;
}

.floating .floating-form:hover {
    background-color: #519347;
}

.floating-form a {
    font-size: 25px;
    font-weight: bold;
    line-height: 80px;
}

.floating .floating-line {
    height: 80px;
    margin-top: 10px;
}

.floating .floating-number {
    width: 28%;
    height: 80px;
    margin-top: 8px;
    line-height: 30px;
}

.floating-number p .floating-ttl {
    font-size: 18px;
    background-color: #AD946B;
}

.floating-number p .floating-phon {
    font-size: 34px;
}

.spfloating{
    display: none;
}

.spfloat-text {
    display: none;
}
.formflow-title-box{
    width: 600px;
    margin: auto;
}
.formflow-item{
    margin: 0 auto 10px;
    border: #989898 1px solid;
    padding: 15px 0 15px 0;
    width: 640px;
}
.formflow-item-number{
    border-bottom: #999 1px solid;
    padding: 0 0 10px;
    color: #D6A747;
    padding-left: 20px;
}
.formflow-item-text{
    padding-left: 20px;
}

hr{
    border: none;
    border-bottom: 1px solid #333;
    margin: 0;
}

/* プライバシーポリシー */
.pobo {
    max-width: 700px;
    height: auto;
    margin: 20px auto;
    padding: 1em 1em;
    border: solid 2px #B0976B;
    border-radius: 30px;
}

#law h1 {
    color: #B0976B;
    font-size: 2rem;
}

#law h3 {
    font-size: 1.5rem;
    margin-top: 40px;
}

.potex {
    padding-bottom: 20px;
}

.form-baner-link{
    background-color: #417E38;
    box-shadow: 0 0 0 4px #49953e;
    padding: 10px 25px 10px 15px;
    color: #fff;
    font-size: 1.5rem;
    margin-left: 1%;
}

.top-sp{
    display: none;
}

/* 料金表テーブル */
.fee-table table{
    width: 700px;
    max-width: 90%;
    margin:0 auto 10px;
  }
  
  .fee-table th,.fee-table td{
    text-align: center;
    padding: 10px;
  }
  
  .fee-table th{
    background-color: #F0EBDD;
    color: #B0976B;
    border:solid 1px #B0976B;
    width: 400px;
    max-width: 70%;
    font-size: 1.2rem;
  }
  
  .fee-table td{
    border:solid 1px #B0976B;
    color: #818181;
  }
  .table-repair-title,.table-remake-title{
        background-color: #B0976B;
        width: 700px;
        max-width: 90%;
        margin: auto;
        color: #fff;
        font-size: 1.5rem;
  }
  .fee-cancel-title{
    background-color: #B0976B;
    width: 700px;
    max-width: 90%;
    margin: auto;
    color: #fff;
    font-size: 1.5rem;
    border:solid 1px #B0976B;
  }

  .fee-cancel-text{
    margin: 0 auto 40px;
    font-size: 1rem;
    width: 700px;
    max-width: 90%;
    border:solid 1px #B0976B;
    background-color: #F0EBDD;
    color: #7a7171;
  }
  .floating-line{
    width: 230px
    ;
  }
  .demerit{
    background-color:#fbfbfb;
    padding-top: 20px;
    margin-top: 40px;
  }

  .demerit-titile-com{
    border: 3px dotted #B0976B;
    border-radius: 10px;
    padding: 4%;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 30px;
    margin-top: 20px;
  }

  .demerit-titile-com li{
    font-size: 1.3rem;
    list-style: disc;
  }
  .demerit-titile-com span{
    font-size: 1.2rem;
  }
  .demerit-titile-box{
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .demerit-lead{
    padding-left: 10px;
    border-left: 10px solid #B0976B;
  }
  .demerit-text-sub{
    padding-left: 20px;
    padding-right: 20px;
  }

  /* リンク集 */
  .custeomer{
    margin-top: 20px;
  }
  .customer-wrapper {
    width: 800px;
    margin: 40px auto;
}

.link_ttl {
    color: #0A477E;
    margin: auto;
    padding-top: 20px;
    font-size: 24px;
    color: #A28333;
    border-bottom: 2px solid #16508D;
}

.tbl_column {
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    border-collapse: collapse;
}

.custeomer tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

.custeomer .tbl_column tbody th {
    border: 1px solid #c2c2c2;
    background: #f3f5f4;
    color: #172125;
    text-align: center;
}

.custeomer  .tbl_column td, .custeomer .tbl_column th {
    padding: 15px 8px;
    word-break: break-all;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.2;
}

.custeomer .link_item {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    align-items: center;
}

.custeomer .link_item a{
    margin-left: 20px;
    font-size: 18px;
}
.custeomer.link_comp{
    padding-left: 40px;
}
.sdgs-title{
    font-size: 1.5rem;
    text-align: center;
    color: #fff;
    background-color: #B0976B;
}

/* 会社情報 */
.info-module {
    width: 100%;
    margin: 0 auto 60px;
    max-width: calc(800px + 30px);
    padding: 0 15px;
}

.info-module.info-text table {
    width: 100%;
    table-layout: fixed;
}

.table-bordered {
    border-collapse: collapse;
}

.table-bordered a{
    text-decoration: underline;
}

.info-module.info-text td.info-label, .info-module.info-text td.row-label, .info-module.info-text th {
    background: #FFF;
    font-size: inherit;
    font-weight: normal;
    vertical-align: top;
}

.info-module.info-text td, .info-module.info-text th {
    height: auto;
    padding: 15px 20px 11px;
    border: 1px solid #EAE8DF;
    background: #F4F4F4;
    text-align: left;
    vertical-align: top;
}

.troubles {
  padding: 64px 0;
  background: #FAF7F2;
}
.troubles .container {
  width: min(1100px, 92%);
  margin: 0 auto;
}
.troubles-title {
  text-align: center;
  font-size: clamp(22px, 2.6vw, 30px);
  margin-bottom: 40px;
  letter-spacing: .04em;
  color: #5a4635;
}

/* カード：横並び */
.trouble-cards {
  display: grid;
  grid-template-columns: 1fr 1fr; /* PCは2列並び */
  gap: 28px;
}
.trouble-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.trouble-content {
  flex: 1;
  padding-right: 16px;
  text-align: left; /* ←中央寄せを解除 */
}
.trouble-heading {
  font-size: 18px;
  margin: 0 0 10px;
  color: #333;
}
.trouble-text {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}

/* 丸画像 */
.trouble-icon {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #eee;
}
.trouble-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cases {
  padding: 64px 0;
  background: #fff;
}
.cases .container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* 見出し */
.cases-title {
  text-align: center;
  font-size: clamp(22px, 2.6vw, 30px);
  margin-bottom: 16px;
  letter-spacing: .04em;
  color: #B0976B;
  font-weight: bold;
}

/* リード文 */
.cases-lead {
  text-align: center;
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 40px;
}

/* カードレイアウト */
.case-cards {
  display: grid;
  grid-template-columns: 1fr 1fr; /* PCは2列 */
  gap: 32px;
}
.case-card {
  background: #FAF7F2; /* 淡ベージュ背景 */
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform .2s;
}
.case-card:hover {
  transform: translateY(-4px);
}

/* 画像エリア */
.case-images {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.case-images figure {
  flex: 1;
  text-align: center;
}
.case-images img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}
.case-images figcaption {
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}

/* テキストエリア */
.case-heading {
  font-size: 18px;
  margin: 0 0 6px;
  color: #2F3E46;
  font-weight: bold;
}
.case-price {
  font-size: 15px;
  color: #BFA76F;
  font-weight: bold;
  margin: 0 0 10px;
}
.case-text {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  margin: 0;
}
.price-simple { padding: 56px 0; background: #fff; }
.price-simple .container { width: min(1100px, 94%); margin: 0 auto; }

/* タイトル */
.price-title { text-align: center; font-size: clamp(22px, 2.6vw, 32px); color:#5a4635; margin:0 0 8px; }
.price-lead { text-align: center; color:#666; font-size:14px; line-height:1.8; margin:0 0 28px; }

/* PC：カテゴリブロック2カラム */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.price-heading {
  background:#c8b18b; color:#fff; font-weight:700; font-size:18px;
  padding:10px 14px; border-radius:8px; margin:0 0 10px;
}

/* テーブル（左＝説明／右＝金額） */
.price-table {
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid #e6dcca; border-radius:10px; overflow:hidden; background:#fff;
}
.price-table td {
  padding:12px 14px; font-size:14px; color:#333; border-bottom:1px solid #f0e8d9;
  vertical-align: top;
}
.price-table tr:nth-child(2n) td { background:#faf8f4; }
.price-table tr:hover td { background:#fff7e8; }
.price-cell { width:1%; white-space:nowrap; text-align:right; font-weight:700; color:#3b342e; }

/* まとめ表示用パーツ */
.price-label { font-weight:700; margin:0 0 6px; color:#2f2a24; display:flex; align-items:center; gap:8px; }
.price-items { margin:0; padding-left: 1.1em; line-height:1.7; color:#555; }
.price-items li { list-style: disc; }
.price-items-inline { color:#555; line-height:1.6; }

/* バッジ（系統分離） */
.badge {
  display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; line-height:1.7;
  border:1px solid #d5c5a6; color:#6a5a47; background:#fffdf8; /* デフォ：ベージュ系 */
}
.badge-popular {
  background:#fff7e0; border-color:#f0cf88; color:#7a5b1e; font-weight:600; /* 人気：金色系 */
}
.badge-quote {
  background:#f2f4f7; border-color:#cbd5e1; color:#334155; font-weight:600; /* 要見積もり：グレー系 */
}

/* 注釈・キャンセル */
/* ===== Footer band ===== */
.price-footer{
  margin-top: 24px;
  border: 1px solid #e6dcca;
  background: #faf7f2;
  border-radius: 12px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* PCは2カラム */
  gap: 16px 24px;
}

/* セクション見出し（小） */
.pf-title{
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; font-size: 15px; font-weight: 700; color:#5a4635;
  position: relative; padding-left: 26px;
}
.pf-title::before{
  content:""; width: 16px; height: 16px;
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  border-radius: 4px; background: #c8b18b; /* 見出しアイコンの色 */
}

/* 本文 */
.pf-list{ margin:0; padding-left: 1.2em; color:#444; line-height:1.8; font-size:14px; }
.pf-list li{ list-style: disc; }
.pf-para{ margin: 2px 0; color:#444; font-size:14px; }

/* 既存の注意書き/キャンセル枠は不使用に */
.price-legend, .cancel-box{ display: none !important; }

/* ▼お客様の声個別ページ */
/* ===============================
   お客様の声（最新版）
   仕様まとめ：
   ・全体幅：最大880px（中央寄せ）
   ・タイトル：赤帯＋白文字／角丸なし
   ・画像：角丸なし・影あり・見切れなし（全体表示）
   ・黒帯：画像下辺に重なる白文字見出し
   ・本文：白背景＋薄い影（カード風）／丸み・外側余白なし
=============================== */

/* TOP */
.read-more a {
  display: inline-block;
  color: #c49a6c;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px solid #c49a6c;
  transition: 0.3s;
}
.read-more a:hover {
  color: #8b6b45;
  border-bottom-color: transparent;
}

/* ベースセクション設定 */
.voice-section {
  --max: 880px;                          /* ← 全体最大幅 */
  --gap: 22px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  --ink: #222;
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px);
  box-sizing: border-box;
}

/* タイトル帯（ページ内見出し） */
.voice-title {
  margin: 0 0 18px;
  padding: 12px 16px;
  color: #fff;
  text-align: center;
  font-weight: 800;
  border-radius: 0; /* 丸みなし */
  background: linear-gradient(90deg, #B0976B, #B0976B);
  text-shadow: none; /* 文字くっきり */
  font-size: clamp(18px, 2vw + 8px, 26px);
  letter-spacing: 0.02em;
}

/* 画像＋黒帯グループ */
.voice-group {
  position: relative;
  overflow: hidden;
}

/* 画像設定（全体表示＋影あり） */
.voice-image {
  display: block;
  width: 100%;
  height: auto;                    /* 高さは自動調整 */
  object-fit: contain;             /* 見切れ防止・全体表示 */
  border-radius: 0;                /* 丸みなし */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* 影あり */
  background: #000;                /* 透過画像でも違和感なし */
}

/* 黒帯オーバーレイ（白文字） */
.voice-overlay {
  position: absolute;
  inset: auto 0 0 0;              /* 画像下辺に固定 */
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.voice-overlay-box {
  width: 100%;
  padding: 14px 20px;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.8));
  box-shadow: none;
  border-radius: 0; /* 丸みなし */
}

.voice-heading {
  margin: 0;
  font-weight: 800;
  line-height: 1.4;
  font-size: clamp(18px, 1.6vw + 12px, 28px);
  letter-spacing: 0.03em;
  color: #fff;
}

/* 本文ブロック（カード風・影あり） */
.voice-body {
  margin-top: 0; /* 画像と密着 */
}

.voice-text {
  background: #fff;
  padding: 28px 28px 30px;
  border-radius: 0; /* 丸みなし */
  margin: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); /* カード風の影 */
  line-height: 1.9;
  color: var(--ink);
  font-size: clamp(15px, 0.9vw + 11px, 17px);
}

/* 連続brの余白を詰める */
.voice-text br + br {
  line-height: 0;
}

/* ===== スマホ対応 ===== */
@media (max-width: 767.98px) {
  .voice-title {
    font-size: clamp(16px, 4vw, 22px);
    padding: 10px 14px;
  }
  .voice-overlay-box {
    padding: 10px 14px;
  }
  .voice-heading {
    font-size: clamp(18px, 5.5vw, 24px);
  }
  .voice-text {
    padding: 20px 18px 24px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  }
}

/* ===== 大画面向け微調整 ===== */
@media (min-width: 1280px) {
  .voice-section {
    --max: 840px;  /* よりコンパクトにしたい場合 */
  }
}

@media (max-width: 900px){
  .price-footer{ grid-template-columns: 1fr; padding: 14px; border-radius: 10px; }
  .pf-title{ font-size: 14px; }
  .pf-list, .pf-para{ font-size: 13.5px; }
}

.cancel-box {
  background:#f3eee6; border:1px solid #d5c5a6; border-radius:8px;
  padding:20px; text-align:center; margin-top:18px;
}
.cancel-title { margin:0 0 10px; font-size:16px; color:#5a4635; }

/* SP：アコーディオンに切替 */
.price-acc { display:none; }   /* PCでは非表示 */
.pc-only { display: table; }   /* PCではテーブル表示 */

@media (max-width: 900px){
  .price-grid { grid-template-columns: 1fr; }
  .price-heading { display:none; } /* SPはsummaryが見出しになる */
  .price-acc { display:block; margin-bottom:14px; border:1px solid #e6dcca; border-radius:10px; overflow:hidden; }
  .acc-head{
    list-style:none; margin:0; padding:12px 14px; font-weight:700;
    background:#c8b18b; color:#fff; position:relative; cursor:pointer;
  }
  .acc-head::after{
    content:""; position:absolute; right:14px; top:50%; width:10px; height:10px;
    border-right:2px solid #fff; border-bottom:2px solid #fff;
    transform:translateY(-50%) rotate(45deg); transition:.2s;
  }
  .price-acc[open] .acc-head::after{ transform:translateY(-50%) rotate(-135deg); }
  .pc-only { display:none; } /* SPではPC表を非表示 */
  .price-table td { padding:12px; font-size:15px; }
  .price-cell { font-size:15px; }
  .price-items { padding-left: 1em; }
}


/* SP対応 */
@media (max-width: 820px) {
  .case-cards {
    grid-template-columns: 1fr; /* スマホは1列 */
  }
}

/* SP対応 */
@media (max-width: 768px) {
  .trouble-cards {
    grid-template-columns: 1fr; /* 1列 */
  }
  .trouble-card {
    flex-direction: column-reverse; /* SPは画像が下に */
    text-align: center;
  }
  .trouble-content { padding-right: 0; }
}


  @media screen and (min-width:481px) {
    .hamburger-menu,.pc-difference-card {
        display: none;
    } 
}

/* SP */
@media screen and (max-width:480px) {

    main {
        overflow: hidden;
    }
    nav{
        display: none;
    }

.floating .ttl{
    line-height: 20px;
}
.floating .floating-line{
    height: 60px;
    margin-top: 2px;
}
    /* ハンバーガーメニュー */
    .menu-btn {
        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 35px;
        width: 35px;
        justify-content: center;
        align-items: center;
        z-index: 170;
    }
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #333;
        position: absolute;
    }
    .menu-btn span:before {
        bottom: 8px;
    }
    .menu-btn span:after {
        top: 8px;
    }
    
    menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }
    
    #menu-btn-check:checked ~ .menu-content {
        left: 0;/*メニューを画面内へ*/
    }
    
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;/*leftの値を変更してメニューを画面外へ*/
        z-index: 160;
        background-color: #B0976B;
        transition: all 0.5s;/*アニメーション設定*/
    }
    .menu-content ul {
        padding: 70px 10px 0;
    }
    .menu-content ul li {
        border-bottom: solid 1px #ffffff;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        width: 100%;
        font-size: 18px;
        box-sizing: border-box;
        color:#ffffff;
        text-decoration: none;
        padding: 9px 15px 10px 0;
        position: relative;
    }
    .menu-content ul li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 16px;
    }

    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;/*leftの値を変更してメニューを画面外へ*/
        z-index: 80;
        background-color: #B0976B;
        transition: all 0.5s;/*アニメーション設定*/
    }

    #menu-btn-check:checked ~ .menu-content {
        left: 0;/*メニューを画面内へ*/
    }

    #menu-btn-check {
        display: none;
    }

    .logo-right{
        display: none;
    }

    /* フロートの尿時内容決まったら消す */
    .floating-box{
        justify-content: center;
    }
    .floating-number,.floating-form{
        display: none;
    }
    /* ここまで */

    .custeomer-card{
        display: grid;
        width: 350px;
        padding: 10px;
        position: relative
    }

    .custeomer-card-box{
        max-width: 350px;
        position: absolute;
        bottom: 10px;
        left: -10px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.6);
        padding: 8px 0px 0px;
    }
    .custeomer-name{
        display: none;
    }
    .custeomer-card-title{
        color: #fff;
        font-size: 1rem;
    }

    .custeomer-text{
        display: none;
    }
    .fee-sp {
        display: block;
    }
    .difference-card,.greeting-card,.formflow-box,.reasons-box,.flow-card{
        display: grid;
    }
    .reasons-box,.formflow-box{
        justify-content: center;
    }
    .logo-left{
        align-items: baseline;
    }

    .difference-card img,.greeting-card img{
        order: 1;
    }
    .difference-group,.cando-title-text,.cando-text,.greeting-box,.reasons-box,.demerit-titile-box{
        max-width: 350px;
    }

    .cando-text,.difference-card-box,.difference-group,.greeting-card-text,.greeting-box,.formflow-item{
        padding: 10px;
    }
    .difference-card-box{
        width: 98%;
    }
    .logo-img{
        width: 50px;
        height: 50px;
    }
    .cando-box,.cando-box img,.formflow-item,.formflow-box,.flow-card,.logo-left{
        width: 350px;
    }

    .flow-card img{
        height:auto;
    }

    .cando-title{
        line-height: 40px;
    }

    .cando-title-text,.difference-title,.flow-title{
        font-size: 1.6rem;
    }
    .greeting-card img{
        margin: auto;
    }
    .info-title{
        margin-top: 40px;
    }
    .greeting-title,.formflow-item,.reasons-title,.reasons-box,.formflow-title,.info-title{
        margin-top: 20px;
    }
    .reasons-item{
        margin-top: 10px;
    }
    .reasons-item-number, .greeting-card{
        padding: 0;
    }
    .greeting-card img{
        padding: 20px;
    }
    .reasons-title{
        padding: 10px;
    }
    .logo-title-sub{
        font-size: 0.6rem;
    }
    .logo-title,.fee-title{
        font-size: 2rem;
    }
    
    .floating p{
        font-size: 0.7rem;
    }
    .form-baner-text{
        font-size: 1rem;
    }
    .formflow-title{
        margin-top: 40px;
    }
    .formflow-title-box {
        max-width: 350px;
        margin: auto;
    }
    .pobo {
        max-width: 88%;
        height: auto;
        margin: 20px auto 40px;
        padding: 1em 1em;
        border: solid 2px #B0976B;
        border-radius: 30px;
    }
    .footer-box-menu li{
        font-size: 0.4rem;
    }
    .card-text{
        width: 350px;
        height: auto;
        padding: 5px;
    }
    .card-title{
        padding-left: 5px;
        padding-top: 5px;
    }
    .greeting-box-text{
        padding: 10px 10px 40px;
    }
    .accordion-container{
        width: 98%;
    }
    .accordion-title{
        padding: 10px;
    }
    .accordion-container{
        margin:5px auto 0 ;
    }
    .form-baner{
        margin-top: 20px;
    }
    .form-baner-column{
        display: contents;
    }
    .form-baner{
        padding: 10px 10px 0 10px;
    }
    .form-baner-item{
        text-align: center;
        padding: 5px;
        margin: 0;
        height: auto;
    }
    .form-baner-link{
        display: block;
        text-align: center;
        margin-bottom: 5px;
    }
    .form-baner img{
        width: 200px;
        height: 240px;
        margin-top: 20px;
    }
    .form-baner-title{
        margin-bottom: 20px;
        line-height: 60px;
        font-size: 2rem;
        line-height: 50px;
    }
    .fee{
        margin-top: 20px;
    }
    .formflow-item{
        margin-top: 0;
    }
    .greeting-box{
        margin-top: 40px;
    }
    .greeting-title{
        margin-top: 0;
        padding: 5px;
    }
    .greeting-card img{
        width: 300px;
        height: 300px;
        padding-top: 10px;
    }
    .greeting-box-text {
        padding: 10px 10px 20px;
    }
    .form-btn{
        margin-top: 60px;
    }
    .footer-box{
        margin-top: 60px;
    }
    .difference-card-title{
        font-size: 1.6rem;
    }
    .difference-group,.cando-text{
        padding: 5px;
    }
    .difference-title{
        padding: 10px;
    }
    .cando-title,.flow-title{
        margin-top: 40px;
    }
    .cando-box{
        margin-top: 20px;
    }
    .cando-box img{
        height: auto;
        padding-top: 5px;
    }

    .floating{
        height: 120px;
        line-height: 30px;
    }
    .top{
        display: none;
    }
    .top-sp{
        display: block;
    }
    .fee-text{
        padding: 0;
    }
    .fee-table table{
        width: 350px;
    }
    .fee-table th{
        width: 230px;
    }
    .fee-table td{
        width: 100px;
    }
    .footer-box{
        height: 250px;
    }
    .sp-difference-card{
        display: none;
    }
    .demerit-titile-com li{
        font-size: 1.2rem;
        margin-left: 10px;
    }
    .demerit-titile-com span{
        font-size: 1rem;
    }
    .cando-title-lead{
        padding-left: 20px;
        padding-right: 20px;
    }
    .cando-title{
        font-size: 2rem;
    }
    .demerit{
        margin-bottom: 0;
        padding-bottom: 10px;
    }
    .demerit-titile{
        font-size: 2rem;
        margin-top: 0;
    }
    .demerit-titile-lead{
        padding-left: 20px;
        padding-right: 20px;
    }

    .flow-group{
        margin-top: 0;
    }
    /* リンク集 */
    .custeomer .customer-wrapper {
        width: 90% !important;
        padding: 7px 0 !important;
        box-sizing: border-box !important;
        margin: 1.5% !important;
    }
    .custeomer.tbl_column {
        margin-top: 20px;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
        border-collapse: collapse;
    }
    .link_ban img{
        width: 180px;
    }
    /* 会社情報 */
.info-module.info-text table{
    table-layout: auto;
}
    .info-module.info-text td, .info-module.info-text th {
        padding: 11px 10px 8px;
        font-size: 0.8rem;
    }
    .info-module.info-text td.info-label, .info-module.info-text td.row-label, .info-module.info-text th {
        font-size: 0.8rem;
    }
    .info-module{
        padding: 0 15px;
    }
    .info-module {
        max-width: calc(300px + 30px);
    }
    .info-label{
        width: 80px;
    }
}