@charset "UTF-8";
/* ==================================================
対応可能エリア 2階層目以降のページ用CSS
2025/06/16 追加
================================================== */

/* ==================================================
Adobe Fonts
================================================== */

main#area .adb-font{
    font-family: "corporate-logo-ver2", sans-serif;
    font-weight: 500;
    font-style: normal;
}
main#area .adb-font-bold{
    font-family: "corporate-logo-ver2", sans-serif;
    font-weight: 700;
    font-style: normal;
}


/* ==================================================
MVエリア
================================================== */
main#area{
    padding-top: 10px;
}
@media (max-width: 767px) {
    main#area{
        padding-top: 0px;
    }
}


.fv {
  position: relative;
}
@media (max-width: 767px) {
  .fv {
    overflow: hidden;
  }
}

.fv__text {
  font-family: "M PLUS 2", sans-serif;
  color: #535353;
  position: absolute;
  font-weight: bold;
  font-size: 2.6vw;
  background-color: #FDEF01;
  border-radius: 0.469vw;
  line-height: 1.2;
  padding: 0.5vw 1.5vw;
  top: 7.5vw;
  left: 7vw;
}
@media (max-width: 767px) {
  .fv__text {
    font-size: 6rem;
    padding: 0.7rem 2rem;
    border-radius: 1rem;
    top: 20.2rem;
    left: 2.3rem;
  }
}
.fv__text span {
  font-size: 2.3vw;
  display: inline-block;
  margin-left: 0.156vw;
  font-family: "M PLUS 2", sans-serif;
}
@media (max-width: 767px) {
  .fv__text span {
    font-size: 5.2rem;
  }
}

.fv-box {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1.354vw;
  top: 0.156vw;
  left: 7vw;
}
@media (max-width: 767px) {
  .fv-box {
    left: 2.4rem;
    top: 1.8rem;
    gap: 1rem;
    align-items: flex-end;
  }
}
.fv-box__img {
  width: 4.74vw;
}
.fv-box__img img{
  vertical-align: middle;
}
@media (max-width: 767px) {
  .fv-box__img {
    width: 13.4rem;
  }
}
.fv-box__text {
  font-weight: bold;
  font-size: 1.667vw;
  color: #3c3c3c;
  font-family: "M PLUS 2", sans-serif;
  letter-spacing: -0.156vw;
}
@media (max-width: 767px) {
  .fv-box__text {
    font-size: 3rem;
  }
}
.fv-box__text span {
  font-size: 1.979vw;
  font-family: "M PLUS 2", sans-serif;
  display: inline-block;
  margin-left: -0.156vw;
  margin-right: -0.156vw;
}
@media (max-width: 767px) {
  .fv-box__text span {
    font-size: 3.6rem;
    margin-left: -0.4rem;
    margin-right: -0.4rem;
  }
}

.fv-head {
  position: absolute;
  top: 3.3vw;
  background: url(../img/triangle-img.png) no-repeat center center/cover;
  width: 55.625vw;
  height: 4.219vw;
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .fv-head {
    top: 9.7rem;
    width: 67.6rem;
    height: 7.5rem;
    background: url(../img/triangle-img_sp.png) no-repeat center center/cover;
  }
}
.fv-box__head {
  font-size: 1.719vw;
  color: #fdef01;
  font-weight: bold;
  font-family: "M PLUS 2", sans-serif;
  padding-left: 7vw;
  letter-spacing: -0.104vw;
}
@media (max-width: 767px) {
  .fv-box__head {
    font-size: 2.9rem;
    padding-left: 2.7rem;
  }
}




.fv-title {
  font-size: 5.26vw;
  font-family: "M PLUS 2", sans-serif;
  color: #3C3C3C;
  font-weight: bold;
  position: absolute;
  top: 10vw;
  left: 7vw;
  letter-spacing: -0.469vw;
  font-style: italic;
}

@media (max-width: 767px) {
  .fv-title {
    font-size: 4.26vw;
    top: 29rem;
    left: 2.3rem;
  }
}
.fv-title span {
  display: inline-block;
  margin-left: -0.677vw;
  margin-right: -1.094vw;
}







/* ==================================================
   メインタイトルセクション
   ================================================== */

/* メインタイトルセクション */
.main-title-section {
    padding: 30px 20px;
    text-align: center;
    margin: 20px auto;
    max-width: 1000px;
}

/* メインタイトルテキスト */
.main-title-text {
    font-size: 40px;
    font-weight: bold;
    color: #333;
    line-height: 1.8;
    margin: 0;
}
.main-title-text span{
    font-size: 48px;
}

/* ひらがな部分を小さくするスタイル */
.main-title-text .small-text {
    font-size: 0.8em;
    background: none;
}

/* 黄色下線 */
.main-title-text .highlight {
    background: linear-gradient(transparent 60%, #ffff00 60%);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .main-title-section {
        padding: 20px 15px;
        margin: 15px;
    }
    
    .main-title-text {
        font-size: 18px;
        line-height: 1.5;
    }
    .main-title-text span{
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .main-title-section {
        padding: 10px 15px;
        margin: 15px;
    }
    .main-title-text {
        font-size: 16px;
    }
}

/* ==================================================
対応エリアセクション
================================================== */

/* ヘッダー部分 */
.all-area-header {
    margin-bottom: 0;
    background: none;
    padding: 0;
}

/* タイトル行（アイコン+タイトル+エリア名を横並び） */
.all-area-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    background: none;
    padding: 15px 0;
}
@media (max-width: 480px) {
    .all-area-title-row {
        gap: 0px;
    }
}


/* タイトルとアイコンのコンテナ */
.all-area-title-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
}

/* ピンアイコン */
.all-area-pin-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: inline-block;
}

/* エリアタイトル */
.all-area-title {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

/* メインエリア名のリスト（薄い緑背景） */
.all-area-main-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background-color: #E6F4F1;
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
}
@media (max-width: 480px) {
    .all-area-main-list {
        gap: 0px;
        padding: 5px 10px;
    }
}

.all-area-region {
    color: #999;
    font-size: 16px;
    font-weight: normal;
    background: none;
    margin: 0;
    padding: 0;
}
.all-area-region a{
    color: #006da0;
    text-decoration: none;
    transition: color 0.3s ease;
}
.all-area-region a:hover{
    color: #00A3EC;
    text-decoration: underline;
}

.all-area-divider {
    color: #666666;
    font-size: 16px;
    background: none;
    margin: 0;
    padding: 0;
}

/* 【新規】全エリア表示セクション用CSS */
.all-areas-section {
    margin: 30px auto;
    max-width: 1200px;
}

.all-areas-container {
    margin: 10px auto 20px;
    width: 100%;
    text-align: center;
}
.area-detail-header{
    background-color: #2dbfae;
    background: #2dbfae;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 20px;
    text-align: center;
    margin: 0;
    border: none;
    border-radius: 8px 8px 0 0;
}
@media (max-width: 480px) {
    .all-areas-container {
        margin: 10px auto;
    }
}


.all-areas-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.5;
}

.areas-syllable-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (max-width: 480px) {
    .areas-syllable-list {
        gap: 10px;
    }
}

.syllable-group {
    margin: 0px 20px;
    background-color: #E6F4F1;
    text-align: left;
    border-radius: 8px;
}
@media (max-width: 480px) {
    .syllable-group {
        margin: 0px 10px;
    }
}


.syllable-header {
    font-size: 16px;
    margin: 10px 20px 0px 20px;
    font-weight: bold;
    display: inline-block;
}

.syllable-areas {
    margin: 10px 20px;
    line-height: 1.8;
    font-size: 14px;
    color: #999;
}

.syllable-areas a {
    color: #006da0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.syllable-areas a:hover {
    color: #00A3EC;
    text-decoration: underline;
}

/* エラーメッセージのスタイル */
.no-areas-message {
    background-color: white;
    padding: 30px;
    border-radius: 4px;
    text-align: center;
}

.no-areas-message p {
    color: #666;
    font-size: 16px;
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .all-areas-section {
        padding: 20px 15px;
        margin: 10px auto;
    }
    
    .all-areas-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .syllable-header {
        font-size: 14px;
        padding: 6px 12px;
        min-width: 40px;
    }
    
    .syllable-areas {
        padding: 12px 15px;
        font-size: 13px;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .all-areas-section {
        padding: 0 10px;
        margin: 0 auto;
    }
    .all-areas-title {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 10px;
    }
    .syllable-header {
        font-size: 14px;
        padding: 10px 20px 0;
        margin: 0;
        min-width: 40px;
    }
    .syllable-areas {
        padding: 0 20px 10px;
        margin: 0;
        font-size: 14px;
    }
}

/* ==================================================
   認証情報セクション
   ================================================== */

.certification-wrapper {
    width: 100%;
}

.certification-section {
    text-align: center;
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    box-sizing: border-box;
}

.certification-section * {
    box-sizing: border-box;
}

.certification-section h2,
.certification-section h3,
.certification-section p {
    margin: 0;
    padding: 0;
}

/* タイトル */
.certification-section h2{
    font-size: 28px;
}
.certification-section h2.highlight{
    font-size: 48px;
}
@media (max-width: 768px) {
    .certification-section h2{
        font-size: 22px;
    }
    .certification-section h2.highlight{
        font-size: 48px;
    }
}
@media (max-width: 480px) {
    .certification-section h2{
        font-size: 16px;
    }
    .certification-section h2.highlight{
        font-size: 48px;
    }
}




.certification-boxes {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 40px 0;
    flex-wrap: wrap;
}
.certification-box {
    flex: 1;
    min-width: 200px;
    padding: 30px 20px;
    position: relative;
}
.certification-box img{
    max-width: 320px;
}
@media (max-width: 768px) {
    .certification-boxes {
        flex-direction: column;
        gap:0;
        margin: 20px 0 0;
    }
    .certification-box {
        min-width: auto;
        padding: 10px 20px;
    }
}

@media (max-width: 480px) {
    .certification-box img{
        max-width: 90%;
    }
}


.certification-content h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
}
@media (max-width: 480px) {
    .certification-content h3 {
        font-size: 16px;
        margin: 0;
    }
}


.certification-note {
    margin: 30px 0;
    color: #666;
    font-size: 14px;
    text-align: center;
}
@media (max-width: 480px) {
    .certification-note {
        margin: 10px 0;
        font-size: 12px;
    }
}

.caution-box {
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 30px;
    margin-top: 40px;
    position: relative;
    text-align: left;
}

.caution-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 200px;
    justify-content: center;
}

.caution-title::before {
    content: '\f071';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 10px;
    font-size: 24px;
    color: #ffa500;
}

.certification-section .caution-title,
.caution-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
    justify-content: center;
}
@media (max-width: 480px) {
    .certification-section .caution-title {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
}

.caution-content {
    color: #333;
    line-height: 1.8;
    font-size: 15px;
    text-align: center;
}

.caution-content p {
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .main-content {
        padding: 20px 15px;
    }
    
    .caution-box {
        padding: 20px;
    }
}
@media (max-width: 480px) {
    .caution-box {
        margin: 0 -10px;
        padding: 10px;
    }
    .caution-content {
        line-height: 1.5;
        font-size: 13px;
        text-align: left;
    }
    
}

/* ==================================================
   CTAセクション
   ================================================== */

/* 全体コンテナ */
.cta-section-container {
    max-width: 900px;
    margin: 0 auto;
}

/* 上部：全幅背景 */
.cta-header-fullwidth {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: linear-gradient(to bottom, transparent 25%, #00A3EC 25%);
}

/* 上部：コンテンツ部分 */
.cta-header-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    height: 160px;
}

/* 画像用の上層レイヤー（飛び出し部分含む） */
.cta-image-layer {
    position: absolute;
    left: 20px;
    top: -4px; /* 青帯から飛び出す */
    width: 240px;
    height: 164px;
    z-index: 10;
    display: flex;
    align-items: flex-end; /* 画像を下寄せ */
    justify-content: flex-start;
}

.cta-image-layer img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom; /* 画像を下寄せ */
}

/* テキスト用の下層レイヤー（青帯内） */
.cta-text-layer {
    position: absolute;
    left: 0;
    top: 50px; /* 青帯内に配置 */
    width: 100%;
    height: 90px; /* 青帯の高さ(120px) - 上部余白(30px) */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5; /* 画像より後面 */
}

/* メッセージテキスト */
.cta-message-text {
    color: white;
    font-size: 28px;
    text-align: center;
    padding-left: 100px; /* 画像分の余白 */
}

/* 下部：お問い合わせ情報とボタン */
.cta-contact-section {
    display: flex;
    align-items: stretch;
    min-height: 120px;
    gap: 20px;
    padding: 0 20px;
}

/* 左側：電話番号情報 */
.cta-phone-info {
    flex: 1;
    min-width: 300px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: white;
}

/* 営業時間ラベル */
.cta-business-hours {
    margin-bottom: 10px;
    color: #333;
}

/* バッジ共通スタイル */
.cta-badge {
    color: white;
    padding: 3px 8px;
    font-size: 18px;
    margin-right: 5px;
    border-radius: 3px;
    display: inline-block;
}

/* 赤バッジ（年中無休） */
.cta-badge-red {
    background-color: #e74c3c;
}

/* オレンジバッジ（即日対応） */
.cta-badge-orange {
    background-color: #f39c12;
}

/* 営業時間テキスト */
.cta-hours-text {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}

/* 電話番号セクション */
.cta-phone-number-section {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* 電話アイコン */
.cta-phone-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

/* 電話番号 */
.cta-phone-number {
    font-size: 54px;
    font-weight: bold;
    color: #333;
}

/* 電話注意書き */
.cta-phone-note {
    font-size: 11px;
    color: #666;
    margin: 0;
    line-height: 1.3;
}

/* 右側：Font Awesomeボタン領域 */
.cta-buttons-wrapper {
    display: flex;
    flex-direction: column;
    width: 250px;
    min-width: 250px;
    padding: 15px 0;
    gap: 12px;
    box-sizing: border-box;
}

/* Font Awesomeボタン共通スタイル */
.cta-button-web,
.cta-button-line {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    transition: opacity 0.2s ease;
    gap: 10px;
    min-height: 60px;
    box-sizing: border-box;
    border: none;
    width: 100%;
}

/* リンク状態での文字色強制 */
.cta-button-web:link,
.cta-button-web:visited,
.cta-button-web:hover,
.cta-button-web:active {
    color: white;
    text-decoration: none;
}

.cta-button-line:link,
.cta-button-line:visited,
.cta-button-line:hover,
.cta-button-line:active {
    color: white;
    text-decoration: none;
}

/* WEBボタンスタイル */
.cta-button-web {
    background-color: #F0A62D;
    background: #F0A62D;
    box-shadow: 3px 3px 0px #EE9C15;
}

.cta-button-web:hover {
    opacity: 0.9;
    transform: none;
}

/* LINEボタンスタイル */
.cta-button-line {
    background-color: #00B69C;
    background: #00B69C;
    box-shadow: 3px 3px 0px #009D86;
}

.cta-button-line:hover {
    opacity: 0.9;
    transform: none;
}

/* アイコンスタイル */
.cta-button-web i,
.cta-button-line i {
    font-size: 22px;
    min-width: 22px;
    color: white;
}

/* ボタンテキスト */
.button-text {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    color: white;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .cta-section-container {
        margin: 0 10px;
    }
    
    /* スマホ版での上部コンテンツ高さ調整 */
    .cta-header-content {
        height: 100px; /* PCより少し低く */
        margin: 0 10px;
    }
    
    /* スマホ版では画像を青帯の高さに強制的に合わせる */
    .cta-image-layer img {
        width: 100%; /* 幅は100%に戻す */
        height: auto; /* 高さは自動でアスペクト比保持 */
        min-height: 130px; /* 最小高さを設定 */
        max-height: none; /* max-heightを無効化 */
        object-fit: contain; /* containに戻してアスペクト比保持 */
        object-position: bottom center; /* 下端中央基準 */
    }
    
    /* コンテナ自体をより大きくして画像を大きく表示 */
    .cta-image-layer {
        width: 140px; /* コンテナをさらに拡大 */
        height: 130px; /* 青帯全体+飛び出し分をカバー */
        top: -30px; /* 大きく飛び出させる */
        left: 15px; /* 左端からの距離を調整 */
    }
    
    /* スマホ版でのテキスト配置 */
    .cta-text-layer {
        top: 20px; /* 青帯内の位置調整 */
        height: 80px; /* 高さ調整 */
    }
    
    /* スマホ版でのメッセージテキスト */
    .cta-message-text {
        font-size: 16px; /* 文字サイズを小さく */
        padding-left: 40px; /* 画像分の余白を調整 */
        line-height: 1.3;
    }
    .cta-phone-number-section {
        justify-content: center;
    }
    
    .cta-contact-section {
        flex-direction: column;
        gap: 15px;
        padding: 0 15px;
    }
    
    .cta-phone-info {
        min-width: auto;
        padding: 15px;
    }
    
    .cta-phone-note{
        text-align: center;
    }
    .cta-buttons-wrapper {
        flex-direction: row;
        width: 100%;
        min-width: auto;
        gap: 10px;
    }
    
    .cta-button-web,
    .cta-button-line {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        min-height: 45px;
    }
    
    .cta-button-web i,
    .cta-button-line i {
        font-size: 18px;
    }
    
    .button-text {
        font-size: 13px;
    }
    
    /* 営業時間を改行して表示 */
    .cta-business-hours {
        display: block;
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }
    
	.cta-phone-number {
        font-size: 32px;
    }
}

/* より小さなスマホ画面用の追加調整 */
@media (max-width: 480px) {
    .cta-header-content {
        height: 90px;
    }
    
    .cta-image-layer {
        width: 120px; /* コンテナ幅 */
        height: 120px; /* コンテナ高さ */
        top: -30px; /* 大きく飛び出し */
        left: 10px;
    }
    
    /* 小さい画面でも画像全体を表示しつつ大きく */
    .cta-image-layer img {
        width: 100%;
        height: auto;
        min-height: 120px; /* 最小高さで下端確保 */
        max-height: none;
        object-fit: contain;
        object-position: bottom center;
    }
    
    .cta-message-text {
        font-size: 14px;
        padding-left: 60px;
    }
    
    .cta-text-layer {
        top: 18px;
        height: 75px;
    }
    .cta-contact-section {
        flex-direction: column;
        gap: 0;
        padding: 0 0;
    }
    .cta-phone-info {
        padding: 0;
    }
    .cta-business-hours {
        margin-bottom: 0px;
    }
    .cta-badge {
        padding: 0px 5px;
        font-size: 13px;
    }
    .cta-hours-text {
        font-size: 15px;
    }
    .cta-phone-icon {
        width: 40px;
        height: 40px;
        margin-right: 5px;
    }
    .cta-phone-note{
        margin-top: -15px;
    }
    
    .cta-buttons-wrapper {
        flex-direction: column;
        gap: 8px;
    }
    
    .cta-button-web,
    .cta-button-line {
        width: 100%;
    }
}

/* 最小画面サイズ対応（320px以下） */
@media (max-width: 375px) {
    .cta-header-content {
        height: 85px;
    }
    
    .cta-image-layer {
        width: 110px; /* コンテナ幅 */
        height: 115px;
        top: -30px;
        left: 8px;
    }
    
    /* 最小画面でも画像全体を表示 */
    .cta-image-layer img {
        width: 100%;
        height: auto;
        min-height: 115px;
        max-height: none;
        object-fit: contain;
        object-position: bottom center;
    }
    
    .cta-message-text {
        font-size: 13px;
        padding-left: 60px;
        line-height: 1.2;
    }
    
    .cta-text-layer {
        top: 12px;
        height: 73px;
    }
}

/* ==================================================
   共通タイトルスタイル
   ================================================== */

/* img要素で集中線配置 */
.pricing-section {
    text-align: center; /* セクション全体を中央寄せ */
}

/* 汎用的なタイトルコンテナ - 外枠divを中央寄せ */
.section-title-container {
    display: inline-block;
    margin: 20px auto 10px auto;
    /* 文字列divの幅を最大値として自然に持つ */
}

/* 上段：集中線画像エリア - paddingなしで画像を左端に */
.title-top-section {
    text-align: left; /* 画像を左端に配置するため */
    height: auto; /* img要素の高さに合わせる */
}

/* 集中線画像 - img要素 */
.concentration-line-img {
    width: 50px;
    height: 50px;
    display: block;
}
@media (max-width: 768px) {
    .concentration-line-img {
        width: 30px;
        height: 30px;
    }
}

/* 下段：文字列エリア - 左右にpadding */
 .section-title {
    color: #000000;
    font-size: 48px;
    font-weight: bold;
    margin: 0;
    line-height: 1;
    padding: 0 50px; /* 集中線画像幅(50px)の半分 */
    text-align: center;
}
@media (max-width: 768px) {
    .section-title {
        font-size: 32px;
        padding: 0 30px;
    }
}

/* ==================================================
   料金プランセクション
   ================================================== */

/* 背景色を白に変更 */
.pricing-section {
    background: #ffffff;
    padding: 40px 20px;
    margin: 30px auto;
    max-width: 1200px;
}
@media (max-width: 480px) {
    .pricing-section {
        padding: 20px 0;
        margin: 0;
    }
}

.plans-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
}

/* すべての要素のホバーエフェクトを強制的に無効化 */
.plans-container *,
.plans-container *:hover,
.plans-container *:focus,
.plans-container *:active {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.plan-card {
    background: white;
    border: 2px solid #00A3EC;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: none;
    transform: none;
}

.plan-card:hover {
    transform: none;
    box-shadow: none;
    transition: none;
}

.plan-header {
    background: #00A3EC;
    color: white;
    padding: 15px;
    text-align: center;
    position: relative;
}
.plan-header h3 {
    margin: 0;
    font-size: 28.8px; /* 大きなサイズに変更 */
    font-weight: bold;
    color: white; /* 白文字に変更 */
}


.plan-content {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* プラン説明文を黒太字に変更 */
.plan-description {
    font-size: 20px;
    color: #000000; /* 黒色に変更 */
    font-weight: bold; /* 太字に変更 */
    margin-bottom: 5px;
    line-height: 1.6;
}

/* Web限定割引画像のサイズを縮小 */
.plan-price-tag {
    display: flex;
    justify-content: center;
    max-width: 120px; /* サイズを縮小（160px → 120px） */
    margin-left: auto;
    margin-right: auto;
}

.plan-price-tag img {
    max-width: 100%;
    max-height: 24px; /* 高さも縮小（32px → 24px） */
    height: auto;
    object-fit: contain;
}

.plan-price {
    margin-bottom: 0;
}

/* 価格表示を大きく変更 */
.price-amount {
    font-size: 35.2px;
    font-weight: bold;
    color: #ff4444;
}

.price-unit {
    font-size: 19.2px; /* 単位も少し大きく */
    color: #666;
    margin-left: 4px;
}

.regular-price {
    font-size: 13.6px;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 5px;
}

/* 商品画像を大きく変更 */
.plan-image {
    margin: 0 0 10px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px; /* 高さを拡大（80px → 100px） */
}

.plan-image img {
    max-width: 100%;
    max-height: 150px; /* 画像サイズを拡大（80px → 100px） */
    object-fit: contain;
}

.plan-actions {
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-top: auto;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
}
.plan-actions a.btn{
    padding: 12px 0;
}

.btn {
    padding: 16px 20px;
    border: none;
    text-decoration: none;
    font-size: 16px; /* ボタンの文字を大きく */
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: white; /* ボタンの文字を白色に変更 */
}

/* ボタンの角丸を外側接触部のみに変更 */
.btn-web {
    background: #F35B6C;
    color: white;
    border-radius: 0 0 0 12px; /* 左下のみ角丸 */
}

.btn-web:hover {
    background: #ff5252;
    transform: translateY(-2px);
}

.btn-tel {
    background: #F0A62D;
    color: white;
    border-radius: 0 0 12px 0; /* 右下のみ角丸 */
}

.btn-tel:hover {
    background: #ff9800;
    transform: translateY(-2px);
}

/* レスポンシブ対応 */
@media (max-width: 992px) {
    .plans-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .plans-container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
    }
    
    .plan-content {
        padding: 15px;
    }
    
    /* レスポンシブ時の価格表示調整 */
    .price-amount {
        font-size: 44.8px; /* スマホ時は少し小さく */
    }
    
    .plan-header h3 {
        font-size: 24px; /* スマホ時のプラン名サイズ */
    }
}
@media (max-width: 480px) {
    .plan-content{
        position: relative;
    }
    .plan-header {
        padding: 0 15px;
    }
    .plan-header h3 {
        font-size: 20px;
    }
    .plan-description {
        font-size: 14px;
        line-height: 1.4;
    }
    .regular-price, .plan-price-tag, .plan-price{
        line-height: 1;
        text-align: left;
    }
    .plan-price-tag{
        display: block;
        text-align: left;
        margin: 0;
    }
    .plan-price{
        font-size: 30px;
        padding: 5px 0 15px;
    }
    .plan-price .price-amount{
        font-size: 1em;
    }
    .plan-price .price-unit{
        font-size: 0.6em;
    }
    .plan-image{
        position: absolute;
        right: 5px;
        bottom: 35px;
        width: 40%;
    }
    
}

/* ==================================================
   単品料金リスト
   ================================================== */

/* 単品料金リスト */
.single-item-section {
    background-color: #ffffff;
    padding: 30px 20px;
    text-align: center;
    max-width: 1200px;
    margin: 30px auto;
}

.single-item-header {
    background-color: #20B270;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 30px;
}

.single-item-title {
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.item-price-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 40px;
    max-width: 900px;
    margin: 0 auto 30px auto;
}

.item-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;
    color: #333;
}

.item-name {
    font-weight: bold;
    color: #333;
    min-width: 120px;
    text-align: left;
}

.item-dots {
    flex: 1;
    color: #999;
    text-align: center;
    font-size: 14px;
    letter-spacing: 1px;
}

.item-price {
    font-weight: bold;
    color: #e74c3c;
    min-width: 80px;
    text-align: right;
}

.consultation-message {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin: 30px 0 20px 0;
    text-align: center;
}

.slash-large {
    font-size: 1.3em;
    font-weight: bold;
    color: #333;
}

.consultation-image {
    margin: 20px 0;
    text-align: center;
}

.consultation-image img {
    max-width: 420px;
    height: auto;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .item-price-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .item-name {
        min-width: 100px;
    }
    
    .item-price {
        min-width: 70px;
    }
    
    .consultation-message {
        font-size: 18px;
        line-height: 1.4;
    }
    
    .consultation-image img {
        max-width: 250px;
    }
    
    .single-item-title {
        font-size: 16px;
    }
}
@media (max-width: 480px) {
    .single-item-section {
        padding: 0 20px;
        margin: 30px auto;
    }
    
    .item-price-list {
        gap: 0px;
    }
    .item-price-row{
        font-size: 18px;
    }
    .consultation-message{
        font-size: 15px;
        margin: 10px 0 0;
    }
    .consultation-image{
        margin: 10px 0;
    }
}

/* ==================================================
   作業事例セクション
   ================================================== */

/* セクション全体の背景色を #E6F4F1 に変更 */
.work-case-section {
    background-color: #E6F4F1;
    margin: 0px auto;
    padding: 60px 20px 40px 20px;
    display: flex;
    flex-direction: column;  /* 縦方向に配置 */
    align-items: center;     /* 横方向の中央寄せ */
}

/* 説明文の中央寄せとスタイル改善 */
.work-case-description {
    text-align: center;
    margin: 30px auto;
    padding: 0 20px;
}

.work-case-description p {
    color: #333;
    font-size: 18px;
    line-height: 1.8;
    margin: 0;
}

/* カード全体のスタイル - ドロップシャドウと境界線を削除 */
.work-case-card {
    background: white;
    border-radius: 12px;
    margin: 0px 20px; /* 左右に20pxのマージンを確保 */
    max-width: 1000px; /* 最大幅を1000pxに制限 */
    padding: 30px;
    margin: 30px 0;
    box-shadow: none; /* ドロップシャドウを削除 */
    border: none; /* 境界線を削除 */
}

/* 顧客情報セクション - タグを右端に配置、境界線を削除 */
.case-client-info {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 0; /* パディングを削除 */
    border-bottom: none; /* 境界線を削除 */
}

/* 顧客詳細情報とタグのコンテナ */
.case-client-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 顧客詳細情報の上段レイアウト - タグを右端に配置 */
.case-client-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.case-client-details h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

/* タグ表示を右端に配置 */
.case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start; /* 上寄せ */
}

.case-client-details p {
    font-size: 14px;
    color: #666;
    margin: 0 0 15px 0;
}

.case-tag {
    background-color: #00B69C;
    color: white;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: bold;
}

/* 事例タイトルの文字色を黒に変更 */
.case-description h3 {
    font-size: 20px;
    font-weight: bold;
    color: #333; /* 黒色に変更 */
    margin: 0 0 15px 0;
}

/* Before/After画像のスタイルとレイアウト修正 */
.case-before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 25px 0;
}

.case-before,
.case-after {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.case-before img,
.case-after img {
    width: 100%;
    max-width: none; /* 最大幅制限を削除 */
    height: 250px; /* 高さを大きく */
    object-fit: cover;
    border-radius: 8px;
    border: none; /* 境界線を削除 */
    box-shadow: none; /* シャドウを削除 */
}

.case-before h4,
.case-after h4 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0;
    padding: 0 16px;
    background-color: transparent; /* 背景色を削除 */
    border-radius: 6px;
    display: inline-block;
    align-self: center; /* 中央寄せ */
}

/* 料金詳細セクション - 2行3列のテーブル構造に変更 */
.case-details-section {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    align-items: flex-start; /* 上寄せに変更 */
}

.case-details-left {
    flex: 1;
    background-color: transparent; /* 背景色を削除 */
    border-radius: 8px;
    overflow: hidden;
}

/* 料金詳細テーブルを2行3列構造に変更 */
.case-detail-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.case-detail-header-row {
    display: table-row;
}

.case-detail-data-row {
    display: table-row;
}

.case-detail-header-cell {
    display: table-cell;
    background-color: #00A3EC;
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 12px 20px;
    border-right: 1px solid white;
    text-align: center;
}

.case-detail-header-cell:last-child {
    border-right: none;
}

.case-detail-data-cell {
    display: table-cell;
    background-color: #52C3F1;
    color: white; /* 文字色を白に変更 */
    font-weight: bold;
    font-size: 16px;
    padding: 12px 20px;
    border-right: 1px solid white;
    text-align: center;
}

.case-detail-data-cell:last-child {
    border-right: none;
}

/* ＝記号をデータ行の高さに配置、色をグレーに変更 */
.case-equals-sign {
    font-size: 24px;
    font-weight: bold;
    color: #666; /* グレーに変更 */
    margin: 0 15px;
    align-self: flex-end; /* データ行の高さに合わせる */
    line-height: 48px; /* データ行の高さに合わせる */
}

.case-details-right {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 合計費用テーブルも左側と同じ構造に */
.case-total-amount {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
}

.total-label-row {
    display: table-row;
}

.total-price-row {
    display: table-row;
}

.total-label {
    display: table-cell;
    background-color: #00A3EC;
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 12px 20px;
    text-align: center;
}

.total-price {
    display: table-cell;
    background-color: #52C3F1;
    color: white;
    font-weight: bold;
    font-size: 16px;
    padding: 12px 20px;
    text-align: center;
}

/* 回収した不用品セクション - 背景色を指定通りに変更 */
.case-collected-items {
    background-color: #E6F4F1; /* 指定された背景色 */
    padding: 20px;
    border-radius: 8px;
}

.case-collected-items h4 {
    font-size: 16px;
    font-weight: bold;
    color: #333; /* 黒色に変更 */
    margin: 0 0 10px 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
	.work-case-section {
        padding: 20px 15px;
        margin: 15px;
    }
    
	.work-case-card {
        padding: 20px;
        margin: 20px 15px; /* スマホでは左右15px */
        width: calc(100% - 30px); /* マージン分を調整 */
    }
    
	.case-client-info {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        margin: 0;
    }
    
	.case-client-photo {
        float: left;
        align-self: center;
    }
    
	.case-before-after {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin: 10px 0;
    }
    
    .case-client-details {
        margin: auto;
    }
	.case-client-header {
        flex-direction: column;
        gap: 0;
    }
    .case-client-basic{
        width: 100%;
    }
    
	.case-tags {
        justify-content: flex-start; /* スマホでは左寄せ */
    }
    

    .case-detail-header-cell,
    .case-detail-data-cell,
    .total-label {
        padding: 0px 20px;
    }

	.case-before img,
	.case-after img {
        height: auto;
    }
    
	.case-details-section {
        flex-direction: column;
        gap: 15px;
    }
    
	.case-equals-sign {
        display: none;
    }
    
	.case-details-right {
        width: 100%;
    }
}

@media (max-width: 480px) {
	.work-case-section {
        padding: 10px 15px;
        margin: 15px -10px;
    }
    .work-case-description {
        text-align: left;
        margin: 10px 0 0;
        padding: 0;
    }
    .work-case-description p {
        font-size: 14px;
        line-height: 1.5;
    }
	.case-tags {
        justify-content: center;
    }
    
	.case-tag {
        font-size: 11px;
        padding: 3px 8px;
    }
    
	.case-description h3 {
        font-size: 18px;
    }

	.work-case-card {
        margin: 20px 10px; /* より小さい画面では左右10px */
        width: calc(100% - 20px); /* マージン分を調整 */
        padding: 15px;
    }

	.detail-label-text,
	.detail-value-text {
        font-size: 13px;
    }
    
	.case-total .detail-label-text,
	.case-total .detail-value-text {
        font-size: 16px;
    }
}

/* ==================================================
   選ばれる理由セクション
   ================================================== */

/* セクション全体を中央寄せのflex縦配置に変更 */
.reasons-section {
    display: flex;
    flex-direction: column;  /* 縦方向に配置 */
    align-items: center;     /* 横方向の中央寄せ */
    background-color: #ffffff;
    padding: 40px 20px;
    margin: 0px auto;
    max-width: 1200px;
}

/* タイトルの下線を削除 */
.reasons-title {
    text-decoration: none;
    color: #000000;
    font-size: 32px;
    font-weight: bold;
    margin: 0;
    line-height: 1;
    padding: 0 50px;
    text-align: center;
}

/* サブタイトルコンテナ - 左右に＼／を配置 */
.reasons-subtitle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 30px 0;
}

/* 左右のスラッシュを大きめフォントで */
.slash-left,
.slash-right {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
}

/* サブタイトルテキスト */
.reasons-subtitle {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
    text-align: center;
}

/* 画像表示部分 */
.reasons-image {
    margin: 20px 0 30px 0;
    text-align: center;
}

.reasons-image img {
    max-width: 380px;
    height: auto;
}

/* 既存のコンテナスタイルを維持 */
.reasons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .reasons-subtitle-container {
        flex-direction: column;
        gap: 5px;
        margin: 10px 0;
    }
    
    .slash-left,
    .slash-right {
        display: none; /* スマホでは非表示 */
    }
    
    .reasons-subtitle {
        font-size: 16px;
        line-height: 1.4;
    }
    
    .reasons-image {
        margin: 0px;
    }
    .reasons-image img {
        max-width: 240px;
    }
}

/* 比較テーブル */
.reasons-section .reasons-container .comparison-table-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border: none;
    box-shadow: none;
}

.comparison-table-container .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    background-color: white;
    border: none;
    box-shadow: none;
}

.comparison-table-container .comparison-table th {
    padding: 15px 20px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: white;
    border-radius: 8px 8px 0 0;
    position: relative;
}

.comparison-table-container .comparison-table .header-left {
    background-color: transparent;
    width: 25%;
    color: transparent;
}

.comparison-table-container .comparison-table .header-center {
    background-color: #00A3EC;
    width: 37.5%;
}

.comparison-table-container .comparison-table .header-right {
    background-color: #4a4a4a;
    width: 37.5%;
}

.comparison-table-container .comparison-table td {
    padding: 25px 15px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 3px solid white;
    font-size: 14px;
    line-height: 1.6;
    background-color: white;
}

.comparison-table-container .comparison-table .category-cell {
    background-color: #00A3EC;
    color: white;
    font-weight: bold;
    font-size: 15px;
}

.comparison-table-container .comparison-table tr:first-child .category-cell {
    border-radius: 8px 0 0 0;
}

.comparison-table-container .comparison-table tr:last-child .category-cell {
    border-radius: 0 0 0 8px;
}

.comparison-table-container .comparison-table .our-service {
    background-color: #E6F4F1;
    font-weight: bold;
}

.comparison-table-container .comparison-table .competitor {
    background-color: #E6F4F1;
}

.comparison-table-container .comparison-table tr:last-child .competitor {
    border-radius: 0 0 8px 0;
}

.comparison-table-container .comparison-table .icon-img {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.comparison-table-container .comparison-table tr:last-child td {
    border-bottom: none;
}

/* ==================================================
   メリット説明セクション
   ================================================== */

/* 親要素のスタイル */
.benefits-section {
    display: flex;
    flex-direction: column;  /* 縦方向に配置 */
    align-items: center;     /* 横方向の中央寄せ */
    padding: 40px 20px;
    background-color: white;
}

/* benefits-containerの設定 */
.benefits-container {
    max-width: 1000px;
    margin: 20px auto;
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: stretch;
}

/* benefit-cardの全体スタイル */
.benefit-card {
    flex: 1;
    background: white;
    padding: 30px 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* タイトルのスタイル */
.benefit-card h3 {
    color: #000;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 20px 0;
    line-height: 1.4;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 画像のスタイル */
.benefit-card img {
    width: 100%;
    max-width: 350px;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 20px;
}

/* テキストのスタイル */
.benefit-card p {
    color: #555;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    text-align: left;
    padding: 0;
    max-width: 350px;
    width: 100%;
}

/* レスポンシブデザイン（スマホ対応） */
@media (max-width: 768px) {
    .benefits-section {
        padding: 30px 15px;
    }

    .benefits-container {
        flex-direction: column;
        gap: 0;
        align-items: center;
    }

    .benefit-card {
        width: 100%;
        max-width: 400px;
        padding: 15px 20px;
    }

    .benefit-card h3 {
        min-height: auto;
        margin-bottom: 15px;
    }

    .benefit-card img {
        max-width: 100%;
        height: 220px;
        margin-bottom: 15px;
    }

    .benefit-card p {
        font-size: 13px;
        padding: 0;
        text-align: center;
        max-width: 100%;
    }
}

/* より小さな画面での調整 */
@media (max-width: 480px) {
    .benefits-section {
        padding: 20px 10px;
    }

    .benefit-card {
        padding: 15px 15px;
    }

    .benefit-card img {
        height: 200px;
    }

    .benefit-card p {
        font-size: 12px;
        max-width: 100%;
    }
}

/* ==================================================
   不用品買取実績
   ================================================== */

/* 親要素のスタイル */
.buyback-section {
    display: flex;
    flex-direction: column;  /* 縦方向に配置 */
    align-items: center;     /* 横方向の中央寄せ */
    background-color: #ffffff;
}

/* カードグリッドレイアウト */
.purchase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 30px auto;
}

/* カードスタイル（ドロップシャドウ削除） */
.purchase-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
}

.purchase-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

/* 商品情報部分 */
.purchase-info {
    padding: 15px;
    background-color: #E6F4F1;
    text-align: center;
}

.purchase-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* 価格表示部分 */
.purchase-price {
    padding: 0 8px 4px;
    line-height: 1.2;
    display: inline-block;
}

/* ==== 【改修箇所1】レスポンシブ対応を追加・強化 ==== */
/* タブレット表示（768px以下）で2列に変更 */
@media (max-width: 768px) {
    .purchase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin: 20px auto;
        max-width: 100%;
        padding: 0 15px;
    }
    
    .purchase-card img {
        height: 160px;
    }
    
    .purchase-info {
        padding: 12px;
    }
    
    .purchase-name {
        font-size: 15px;
        margin-bottom: 5px;
    }
    
    /* 【改修箇所2】価格表示の調整 */
    .purchase-price {
        padding: 3px 6px;
        width: 100%;
        box-sizing: border-box;
        display: block;
    }
    
    .price-amount {
        font-size: 18px;
        font-weight: bold;
    }
    
    .price-unit {
        font-size: 12px;
    }
}

/* ==== 【改修箇所3】スマホ表示（480px以下）で1列に変更し、価格表示を最適化 ==== */
@media (max-width: 480px) {
    .purchase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 10px auto;
        padding: 0 10px;
    }
    
    .purchase-card {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .purchase-card img {
        height: 150px;
    }
    
    .purchase-info {
        padding: 10px 8px;
    }
    
    .purchase-name {
        font-size: 14px;
        margin-bottom: 4px;
        line-height: 1.3;
    }
    
    /* 【改修箇所4】価格表示のスマホ最適化 */
    .purchase-price {
        padding: 2px 4px;
        width: 100%;
        box-sizing: border-box;
        display: block;
        text-align: center;
    }
    
    .price-amount {
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
    }
    
    .price-unit {
        font-size: 11px;
        display: inline-block;
        margin-left: 2px;
    }
}

/* カテゴリセクション */
.buyback-categories {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 1000px;
    margin: 10px auto 30px auto;
}

/* 各カテゴリのスタイル */
.buyback-category {
    text-align: center;
}

/* カテゴリタイトルのスタイル */
.buyback-category h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/* カテゴリ説明文のスタイル */
.buyback-category p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* 全体の中央寄せとパディング */
.buyback-section {
    text-align: center;
    padding: 20px;
}

/* ==== 【改修箇所6】カテゴリセクションのレスポンシブ対応強化 ==== */
@media (max-width: 768px) {
    .buyback-categories {
        gap: 20px;
        margin: 10px 15px 25px 15px;
    }
    
    .buyback-category h3 {
        font-size: 18px;
    }
    
    .buyback-category p {
        font-size: 15px;
    }
    
    .buyback-section {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .buyback-categories {
        gap: 15px;
        margin: 10px 10px 20px 10px;
    }
    
    .buyback-category h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .buyback-category p {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .buyback-section {
        padding: 10px;
    }
}

/* ==================================================
   不用品回収の流れセクション
   ================================================== */

.howto-section {
    display: flex;
    flex-direction: column;  /* 縦方向に配置 */
    align-items: center;     /* 横方向の中央寄せ */
    background-color: #E6F4F1;
    padding: 60px 20px 40px 20px;
}

.howto-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    max-width: 1200px;
    margin: 40px auto;
    flex-wrap: wrap;
}

.howto-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 200px;
    flex: 1;
    position: relative;
}
@media (max-width: 480px) {
    .howto-box {
        display: block;
        margin-bottom: 24px;
    }
}

/* 矢印の追加 */
.howto-box:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 90px;
    right: -7px; /* -20px → -7pxに変更して矢印位置を調整 */
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #ccc;
    z-index: 1;
}
@media (max-width: 480px) {
    .howto-box:not(:last-child)::after {
        top: auto;
        bottom: -32px;
        right: calc(50% - 8px);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 12px solid #ccc;
    }
}

.howto-circle {
    width: 180px; /* 220px → 180pxに調整 */
    height: 180px; /* 220px → 180pxに調整 */
    background-color: #52C3F1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}
.step-number-img {
    width: auto;
    height: 30px; /* 36px → 30pxに調整 */
    margin-bottom: 12px; /* 15px → 12pxに調整 */
}
.step-icon-img {
    width: 60px; /* 72px → 60pxに調整 */
    height: 60px; /* 72px → 60pxに調整 */
    filter: brightness(0) invert(1); /* 白色にする */
}
@media (max-width: 480px) {
    .howto-circle {
        width: 80px;
        height: 80px;
        display: flex;
        margin-bottom: 0;
        float: left;
    }
    .step-number-img {
        width: auto;
        height: 12px;
        margin: 8px 0 5px;
    }
    .step-icon-img {
        width: 35px;
        height: 35px;
    }
}

.howto-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
}
.howto-description {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}
@media (max-width: 480px) {
    .howto-title {
        float: left;
        margin-left: 10px;
        margin-bottom: 0;
        padding-left: 10px;
    }
    .howto-description {
        font-size: 13px;
        text-align: left;
        float: left;
        margin-left: 10px;
        width:  calc(100% - 100px);
        padding-left: 10px;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .process-steps-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .process-step-box::after {
        display: none;
    }
    
    .process-step-box {
        min-width: auto;
    }
}

/* ==================================================
   よくある質問セクション
   ================================================== */

.custom-qa-section {
    display: flex;
    flex-direction: column;  /* 縦方向に配置 */
    align-items: center;     /* 横方向の中央寄せ */
    max-width: 1000px;
    margin: 0 auto 40px auto;
    padding: 0 20px; /* 左右にパディング追加 */
    box-sizing: border-box; /* ボックスサイジング追加 */
}

.custom-qa-wrapper {
    width: 100%;
    max-width: 1000px; /* 最大幅を制限 */
    box-sizing: border-box; /* ボックスサイジング追加 */
}

.custom-qa-container {
    width: 100%;
    margin-top: 40px;
}

/* カスタムアコーディオンアイテム */
.custom-qa-item {
    background-color: #E6F4F1;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: visible;
    padding-bottom: 15px;
    box-sizing: border-box; /* ボックスサイジング追加 */
}

/* カスタム質問部分 */
.custom-qa-question {
    background-color: #E6F4F1;
    color: #333;
    padding: 15px 20px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.4;
    border: none;
    outline: none;
    border-radius: 8px 8px 0 0;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word; /* テキスト折り返し追加 */
    overflow-wrap: break-word; /* テキスト折り返し追加 */
}

/* Qラベル */
.custom-q-label {
    background-color: #00A3EC;
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
    font-size: 18px;
}

/* 質問テキスト */
.custom-question-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.4;
    word-wrap: break-word; /* テキスト折り返し追加 */
    overflow-wrap: break-word; /* テキスト折り返し追加 */
    min-width: 0; /* flexアイテムの縮小を許可 */
}

/* カスタム矢印アイコン */
.custom-arrow-icon {
    margin-left: 15px;
    transition: transform 0.3s ease;
    font-size: 16px;
    flex-shrink: 0;
    color: #555;
}

/* 開いた状態の矢印 - page.jsのopenクラスを使用 */
.custom-qa-question.open .custom-arrow-icon {
    transform: rotate(90deg);
}

/* カスタム回答部分 */
.custom-qa-answer {
    background-color: white;
    display: none;
    margin: 0 20px 0 40px;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    word-wrap: break-word; /* テキスト折り返し追加 */
    overflow-wrap: break-word; /* テキスト折り返し追加 */
}

.custom-qa-answer p {
    margin: 0;
    color: #333;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    font-size: 16px;
    padding: 0;
    word-wrap: break-word; /* テキスト折り返し追加 */
    overflow-wrap: break-word; /* テキスト折り返し追加 */
}

/* Aラベル */
.custom-a-label {
    background-color: #F35B6C;
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
    font-size: 18px;
    margin-top: 2px;
}

/* 回答テキスト */
.custom-answer-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.6;
    word-wrap: break-word; /* テキスト折り返し追加 */
    overflow-wrap: break-word; /* テキスト折り返し追加 */
    min-width: 0; /* flexアイテムの縮小を許可 */
}

/* レスポンシブ対応 - より強力な対応 */
@media (max-width: 768px) {
    .custom-qa-section {
        padding: 0 15px; /* 左右パディングを調整 */
        margin: 0 auto 30px auto; /* マージン調整 */
    }
    
    .custom-qa-wrapper {
        width: 100%; /* 幅を100%に強制 */
        max-width: none; /* 最大幅制限を削除 */
    }
    
    .custom-qa-question {
        padding: 12px 15px; /* パディング調整 */
        font-size: 14px;
    }
    
    .custom-qa-answer {
        padding: 15px;
        margin: 0 15px 0 20px; /* マージン調整 */
    }

    .custom-q-label,
    .custom-a-label {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    /* 質問テキストのフォントサイズ調整 */
    .custom-question-text {
        font-size: 14px;
        line-height: 1.3;
    }
    
    /* 回答テキストのフォントサイズ調整 */
    .custom-answer-text {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* より小さなスマホ画面対応 */
@media (max-width: 480px) {
    .custom-qa-section {
        padding: 0 10px; /* さらに狭いパディング */
    }
    
    .custom-qa-question {
        padding: 10px 12px; /* より狭いパディング */
        font-size: 13px;
    }
    
    .custom-qa-answer {
        padding: 12px;
        margin: 0 12px 0 18px; /* より狭いマージン */
    }

    .custom-q-label,
    .custom-a-label {
        width: 32px;
        height: 32px;
        font-size: 14px;
        margin-right: 8px; /* マージン調整 */
    }
    
    .custom-question-text {
        font-size: 13px;
        line-height: 1.2;
    }
    
    .custom-answer-text {
        font-size: 13px;
        line-height: 1.4;
    }
    
    /* 矢印アイコンのマージン調整 */
    .custom-arrow-icon {
        margin-left: 8px;
        font-size: 14px;
    }
}

/* ==================================================
   お客様の声セクション
   ================================================== */
.customer-voice-section {
    background-color: #E6F4F1;
    width: 100%;
    margin-top: 0px;
    padding: 60px 20px 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}
.customer-voice-inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.voice-description {
    margin-top: 40px;
    margin-bottom: 40px;
}
.voice-description p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.voice-cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 0 auto;
    max-width: 100%;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .customer-voice-section {
        padding: 30px 15px;
        margin-top: 15px;
    }
    .customer-voice-inner {
        max-width: 100%;
    }
    .voice-cards-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
@media (max-width: 480px) {
    .customer-voice-section {
        padding: 20px 10px;
    }
}

/* お客様の声カード */
.voice-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: none;
    text-align: left;
    border: 1px solid rgba(255,255,255,0.8);
}
.voice-reviewer-photo {
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 15px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.voice-reviewer-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.voice-reviewer-details h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0;
}
.voice-review-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.4;
}
.voice-review-date {
    font-size: 12px;
    color: #999;
    margin-top: -12px;
    margin-bottom: 10px;
    text-align: right;
}
.voice-review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    justify-content: center;
}
.voice-tag {
    background-color: #00B69C;
    color: white;
    padding: 1px 15px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: bold;
}
.voice-review-text {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {    
    .voice-card {
        padding: 20px;
    }
    .voice-reviewer-details h3 {
        font-size: 14px;
    }
    .voice-review-title {
        font-size: 16px;
    }
}
@media (max-width: 480px) {
    .voice-card {
        padding: 15px;
    }
    .voice-reviewer-photo {
        width: 50px;
        height: 50px;
    }
    .voice-review-tags {
        margin-top: -10px;
        margin-bottom: 10px;
    }
    .voice-tag {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* ==================================================
   スタッフメッセージセクション
   ================================================== */

/* セクション全体のスタイル - 上部マージン60px、全幅、中央寄せ */
.staff-message-section {
    width: 100%;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* スタッフプロフィールコンテナ - 最大幅1000px */
.staff-profiles-container {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 1000px;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* スタッフ1人の時の中央寄せ対応 */
.staff-profiles-container:has(.staff-profile-card:only-child) {
    justify-content: center;
}

/* 個別スタッフカード */
.staff-profile-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
    max-width: 450px;
    min-width: 300px;
}

/* スタッフ写真 - 大きくし、青いボーダーを削除 */
.staff-profile-photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: none; /* 青いボーダーを削除 */
}

.staff-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

/* スタッフ情報 */
.staff-profile-info {
    flex: 1;
}

/* 名前の文字色を黒に変更 */
.staff-profile-info h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333; /* 青から黒に変更 */
    margin: 0 0 10px 0;
}

/* プロフィールテキスト */
.staff-profile-text {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* メッセージコンテンツ */
.staff-message-content {
    background-color: #E6F4F1;
    padding: 30px;
    border-radius: 8px;
    max-width: 1000px;
    width: 100%;
    text-align: left;
}

.staff-message-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin: 0;
}

/* レスポンシブ対応 - スマホ時はスタッフカードを縦並び */
@media (max-width: 768px) {
    .staff-message-main-section {
        padding: 30px 15px;
        margin-top: 40px;
    }
    
    /* スタッフカード全体を縦並びに（画像と名前の横並びは維持） */
    .staff-profiles-container {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    
    .staff-profile-card {
        max-width: 100%;
        min-width: auto;
        width: 100%;
    }
    
    .staff-profile-photo {
        width: 180px;
        height: 180px;
    }
    
    .staff-message-content {
        padding: 20px;
    }
    
    .staff-message-content p {
        font-size: 14px;
    }
    
    .staff-message-title {
        font-size: 20px;
        margin-bottom: 30px;
    }
}

/* より小さなスマホ画面対応 */
@media (max-width: 480px) {
    .staff-message-main-section {
        padding: 20px 10px;
    }
    
    .staff-profiles-container {
        gap: 25px;
    }
    
    .staff-profile-photo {
        width: 120px;
        height: 120px;
    }
    
    .staff-profile-info h3 {
        font-size: 16px;
    }
    
    .staff-message-content {
        padding: 15px;
    }
    
    .staff-message-title {
        font-size: 18px;
    }
}

/* ==================================================
   エリア情報セクション
   ================================================== */

.area-info-section {
    width: 100%;
    margin-top: 40px;
    padding-bottom:40px;
    background-color: #E6F4F1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.area-info-subtitle {
    text-align: center;
    font-size: 32px;
}
@media (max-width: 480px) {
    .area-info-subtitle {
        font-size: 24px;
    }
}


.disposal-methods-main-section {
    padding: 20px 0;
    margin: 30px auto;
    width: 90%;
    max-width: 1200px;
    text-align: center;
    box-sizing: border-box;
}

.disposal-methods-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}

/* テーブルコンテナ */
.disposal-methods-table-container {
    display: table;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
}

/* ヘッダー行 */
.disposal-table-header-row {
    display: table-row;
}

/* ヘッダーセル */
.disposal-table-header-cell {
    display: table-cell;
    background-color: #00A3EC;
    color: white;
    font-weight: bold;
    font-size: 16px;
    padding: 15px 20px;
    text-align: center;
    border-right: 1px solid white;
}

.disposal-table-header-cell:last-child {
    border-right: none;
}

/* データ行 */
.disposal-table-data-row {
    display: table-row;
}

/* データセル */
.disposal-table-data-cell {
    display: table-cell;
    background-color: #ffffff;
    color: #333;
    font-size: 14px;
    padding: 15px 20px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    vertical-align: middle;
}

.disposal-table-data-cell:last-child {
    border-right: none;
}

.disposal-table-data-row:last-child .disposal-table-data-cell {
    border-bottom: none;
}

/* 処分方法セル（左列）のスタイル */
.disposal-method-cell {
    font-weight: bold;
}

/* 対応セル（右列）のスタイル */
.disposal-response-cell {
    text-align: left;
    line-height: 1.6;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .disposal-methods-main-section {
        padding: 0;
    }
    
    .disposal-methods-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .disposal-table-header-cell,
    .disposal-table-data-cell {
        padding: 12px 15px;
        font-size: 13px;
    }
    
    .disposal-table-header-cell {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .disposal-methods-main-section {
        padding: 0;
        width: 95%;
    }
    
    .disposal-methods-title {
        font-size: 18px;
    }
    
    .disposal-table-header-cell,
    .disposal-table-data-cell {
        padding: 10px 8px;
        font-size: 12px;
    }
    
    .disposal-response-cell {
        line-height: 1.5;
    }
}

/* ==================================================
   回収できないものセクション
   ================================================== */

.non-collectable-main-section {
    padding: 20px 0px;
    margin: 30px auto;
    width: 90%;
    max-width: 1200px;
    text-align: center;
    box-sizing: border-box;
}

.non-collectable-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.4;
}

.non-collectable-subtitle {
    font-size: 18px;
    color: #666;
    display: block;
    margin-top: 5px;
}

.non-collectable-description {
    margin: 20px auto 30px auto;
    max-width: 800px;
}

.non-collectable-description p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* テーブルコンテナ */
.non-collectable-table-container {
    display: table;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
}

/* ヘッダー行 */
.non-collectable-table-header-row {
    display: table-row;
}

/* ヘッダーセル */
.non-collectable-table-header-cell {
    display: table-cell;
    background-color: #00A3EC;
    color: white;
    font-weight: bold;
    font-size: 16px;
    padding: 15px 20px;
    text-align: center;
    border-right: 1px solid white;
}

.non-collectable-table-header-cell:last-child {
    border-right: none;
}

/* データ行 */
.non-collectable-table-data-row {
    display: table-row;
}

/* データセル */
.non-collectable-table-data-cell {
    display: table-cell;
    background-color: #ffffff;
    color: #333;
    font-size: 14px;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    vertical-align: middle;
}

.non-collectable-table-data-cell:last-child {
    border-right: none;
}

.non-collectable-table-data-row:last-child .non-collectable-table-data-cell {
    border-bottom: none;
}

/* カテゴリセル（左列）のスタイル */
.non-collectable-category-cell {
    font-weight: bold;
}

/* 項目セル（右列）のスタイル */
.non-collectable-items-cell {
    text-align: left;
    line-height: 1.8;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .non-collectable-main-section {
        padding: 0;
    }
    
    .non-collectable-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .non-collectable-subtitle {
        font-size: 16px;
    }
    
    .non-collectable-table-header-cell,
    .non-collectable-table-data-cell {
        padding: 15px 12px;
        font-size: 13px;
    }
    
    .non-collectable-table-header-cell {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .non-collectable-main-section {
        padding: 0;
        width: 95%;
    }
    
    .non-collectable-title {
        font-size: 18px;
    }
    
    .non-collectable-subtitle {
        font-size: 14px;
    }
    
    .non-collectable-table-header-cell,
    .non-collectable-table-data-cell {
        padding: 12px 8px;
        font-size: 12px;
    }
    
    .non-collectable-items-cell {
        line-height: 1.6;
    }
}

/* ==================================================
   粗大ごみ回収料金の目安セクション
   ================================================== */

.fee-guide-main-section {
    padding: 20px 0px;
    margin: 30px auto;
    width: 90%;
    max-width: 1200px;
    text-align: center;
    box-sizing: border-box;
}

.fee-guide-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}

/* テーブルコンテナ */
.fee-guide-table-container {
    display: table;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 30px auto;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
}

/* ヘッダー行 */
.fee-guide-table-header-row {
    display: table-row;
}

/* ヘッダーセル */
.fee-guide-table-header-cell {
    display: table-cell;
    background-color: #00A3EC;
    color: white;
    font-weight: bold;
    font-size: 16px;
    padding: 15px 20px;
    text-align: center;
    border-right: 1px solid white;
    width: 80%;
}

.fee-guide-table-header-cell:last-child {
    border-right: none;
    width: 20%;
}

/* データ行 */
.fee-guide-table-data-row {
    display: table-row;
}

/* データセル */
.fee-guide-table-data-cell {
    display: table-cell;
    background-color: #ffffff;
    color: #333;
    font-size: 14px;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    vertical-align: middle;
}

.fee-guide-table-data-cell:last-child {
    border-right: none;
}

.fee-guide-table-data-row:last-child .fee-guide-table-data-cell {
    border-bottom: none;
}

/* 品目セル（左列）のスタイル */
.fee-guide-items-cell {
    text-align: left;
    line-height: 1.6;
    width: 80%;
}

/* 料金セル（右列）のスタイル */
.fee-guide-price-cell {
    font-weight: bold;
    color: #e74c3c;
    width: 20%;
    font-size: 16px;
}

/* 処理方法ガイド */
.fee-disposal-guide {
    background-color: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

.fee-disposal-guide h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
    text-align: center;
}

.fee-disposal-guide p {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .fee-guide-main-section {
        padding: 0;
    }
    
    .fee-guide-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .fee-guide-table-header-cell,
    .fee-guide-table-data-cell {
        padding: 15px 12px;
        font-size: 13px;
    }
    
    .fee-guide-table-header-cell {
        font-size: 14px;
    }
    
    .fee-guide-price-cell {
        font-size: 14px;
    }
    
    .fee-disposal-guide {
        padding: 20px;
    }
    
    .fee-disposal-guide h3 {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .fee-guide-main-section {
        padding: 0;
        width: 95%;
    }
    
    .fee-guide-title {
        font-size: 18px;
    }
    
    .fee-guide-table-header-cell,
    .fee-guide-table-data-cell {
        padding: 12px 8px;
        font-size: 12px;
    }
    
    .fee-guide-price-cell {
        font-size: 13px;
    }
    
    .fee-disposal-guide {
        padding: 15px;
    }
    
    .fee-disposal-guide h3 {
        font-size: 15px;
    }
    
    .fee-disposal-guide p {
        font-size: 13px;
    }
}


/* =====================================================================
コラム セクション
=====================================================================*/
/* Column List Page
-------------------------------------- */
#area section.column{
    max-width: var(--contents_width);
    margin:auto;
}

#area section.column .section-title {
    margin-bottom: 30px;
}

#area section.column .column__text{
    font-size: 24px;
}

#area .column__button{
    text-align: center;
    margin: 30px 0;
}