/* 

Add CSS

*/

/*
2026/01/10 リニューアル追加
*/
/* 共通設定：最初は透明、0.8秒かけて動く */
.scroll-fade-left,
.scroll-fade-right {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 左から右へ：最初は左に50pxずらす */
.scroll-fade-left {
  transform: translateX(-200px);
}

/* 右から左へ：最初は右に50pxずらす */
.scroll-fade-right {
  transform: translateX(200px);
}

/* 【アクション実行後】元の位置に戻って不透明に */
.scroll-fade-left.is-show,
.scroll-fade-right.is-show {
  opacity: 1;
  transform: translateX(0);
}


.header {
    background-color: #fff;
}
.header .header-wrap .header-wrap-logo .header-wrap-logo-sub {
    margin-bottom: 0px;
}

.header .header-wrap .header-wrap-menu .header-wrap-menu-bottom ul li a span {
    color: #000;
}
.header .header-wrap .header-wrap-menu .header-wrap-menu-bottom ul li a {
   color: #000;
}
.header .header-wrap .header-wrap-logo .header-wrap-logo-sub h1 {
    width: 140px;
}
.header .header-wrap .header-wrap-menu .header-wrap-menu-bottom ul {
    justify-content: space-between;
    padding-right: 20px;
}
.header .header-wrap .header-wrap-menu .header-wrap-menu-top ul {
    justify-content: center;
}
.top .top-visual:before {
    background-color: #fff;
}
.top .sec-nevent-archive_item_content_heading h2{
    font-size: 1.4rem;
    font-weight: 600;
}
.header .header-wrap .header-wrap-logo .header-wrap-logo-container h2 {
    width: 150px;
}
@media screen and (max-width: 980px) {
    .header .header-wrap .header-wrap-logo .header-wrap-logo-container h2 {
        width: 120px;
    }
}
@media screen and (max-width: 450px) {
    .header .header-wrap .header-wrap-logo .header-wrap-logo-container h2 {
        width: 100px;
    }
}
@media screen and (max-width: 980px) {
    .header {
        padding: 8px 0px 10px;
    }
}
.header .header-wrap .header-wrap-logo .header-wrap-logo-sub p {
    color: #000;
    font-size: 1.1rem;
}

.top .sec-nevent {
    background-color: #fff;
}
.top .sec-nevent-heading span {
    color: #000;
}
.top .sec-nevent-heading::before {
    background-color: #000;
}
.top .sec-nevent-heading::after {
    background-color: #000;
}
.top .sec-nevent-archive_item_content_heading h2 {
    color: #000;
}
.top .top-visual .top-visual-title h2 img {
    display: none;
}
.top .top-visual .top-visual-news {
    background-color: #f7f0db;
}
.top .sec02 {
    background-color: #f7f0db;
}
.top .sec05 {
    background-color: #f7f0db;
}
.top .example-item {
    background-color: #BE8157;
}
.top .sec07 .sec07-wrap {
    background-color: #f7f0db;
}
.top .sec03 .sec03-wrap:before {
    background-color: #f7f0db;
}
.top .com-title-left.i-s h1 {
    font-size: 3.5rem;
    font-family: YakuHanJP, "DIN", sans-serif;
    line-height: 1.08;
    letter-spacing: .02em;
    margin-bottom: 15px;
}
.top .sec07 .sec07-wrap .sec07-wrap-txt p {
font-size: 1.3rem;
    line-height: 1.7;
    letter-spacing: .02em;
    font-weight: bold;
    margin: 20px 30px 30px 0px;
}
.top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt .lineup-01 {
    margin-top: -7px;
    width: 130px;
}
.top .sec07 .sec07-wrap.i-s {
    background-color: #fff !important;
    margin-top: 50px;
}
.top .sec09 {
    background-color: #f7f0db;
}
.top .sec11 {
    background-color: #f7f0db;
}
.top .aside-bottom:before {
    background-color: #f7f0db;
}
/* Hero Section */
.top .sec03 .hero {
    padding: 54px 0 28px;
    position: relative;
    overflow: hidden;
}

/* 背景画像 */
.top .sec03 .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* 半透明グレー */
.top .sec03 .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
}
.com-btn-gray a, .com-btn-gray input {
    background: #E4892A;
    color: #fff;
    border: 1px solid #f7f0db;
}
.com-title--white span {
    color: #333;
    -webkit-text-stroke-color: transparent;
    font-weight: 700;
    font-family: "Caveat", cursive;
}
.com-title--white h2 {
    color: #333;
    white-space: nowrap;
}
.com-title--white h2:before {
    background-color: #333;
}
.com-title--white h2:after {
    background-color: #333;
}
.com-title-left span {
    color: #333;
    -webkit-text-stroke-color: transparent;
    font-weight: 700;
    font-family: "Caveat", cursive;
}
.top .sec11 .sec11-wrap ul li a .sec11-wrap-txt {
    background-color: #f7f0db;
}
.aside-bottom .aside-bottom-wrap .aside-bottom-wrap-link ul li a {
    background: #E4892A;
}
.aside-bottom .aside-bottom-wrap .aside-bottom-wrap-link ul li.reserve a {
    background: #CDAC92;
    color: #000;
}
.aside-bottom .aside-bottom-wrap .aside-bottom-wrap-link ul li.dl a {
    background: #BE8157;
}
.aside-bottom .aside-bottom-wrap .aside-bottom-wrap-link ul li.event a {
    background: #703300;
}
.footer .footer-cooy {
    background-color: #BE8157;
}
.calendar .container-calendar .container-calendar_left .table-calendar th {
    color: #333 !important;
}
.calendar .container-calendar .container-calendar_left .container-calendar_left_txt {
    color: #333;
}
.calendar .container-calendar .container-calendar_left .table-calendar td {
    border: 2px solid #333;
}
.calendar .container-calendar_right .container-calendar_right_container #event-ajax .event-ajax a .event-ajax_right ul .cat span {
    background-color: #703300;
}
.calendar .container-calendar_right .container-calendar_right_container #event-ajax .event-ajax a .event-ajax_right ul .house span {
    display: inline-block;
    color: #666 !important;
    background-color: #fff !important; 
    font-size: 1.2rem;
    font-weight: bold;
    padding: 1px 10px;
    border: 1px solid #666;
}
.calendar .container-calendar_right .container-calendar_right_container #event-ajax .event-ajax a {
    padding: 10px 0px !important;
}
.top .sec-nevent-archive_item_content ol li {
    background-color: #CDAC92;
}
.top .sec08 .sec08-news .sec08-news-wrap .sec08-news-wrap-col ul li .sec08-news-wrap-col-main-txt .cat_columns {
    background-color: #CDAC92;
}
.top .sec08 .sec08-news .sec08-news-wrap .sec08-news-wrap-col ul li .sec08-news-wrap-col-main-txt .cat {
    background-color: #BE8157;
}
.header .header-wrap .header-wrap-menu .header-wrap-menu-top ul .event a,
.footer-fixed ul .event a {
    background-color: #703300;
}
.header .header-wrap .header-wrap-menu .header-wrap-menu-top ul li a {
    background-color: #E4892A;
}
.header .header-wrap .header-wrap-menu .header-wrap-menu-top ul .reserve.dl a,
.footer-fixed ul .reserve.dl a {
    background-color: #BE8157;
    color: #fff;
}
.header-wrap-menu-top ul li a::before {
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    content: "";
}
.header-wrap-menu-top ul .reserve a::before {
    width: 13px;
    height: 9px;
    margin-right: 5px;
    background-image: url(../assets/img/icon/icon-footer-mail.png);
}
.header-wrap-menu-top ul .dl a::before {
    width: 16px;
    height: 11px;
    margin-right: 5px;
    background-image: url(../assets/img/icon/icon-footer-dl.png);
}
.header-wrap-menu-top ul .documment a::before {
    width: 11px;
    height: 15px;
    margin-right: 5px;
    background-image: url(../assets/img/icon/icon-footer-documment.png);
}
.header-wrap-menu-top ul .event a::before {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background-image: url(../assets/img/icon/icon-footer-event.png);
}

.aside-bottom .aside-bottom-wrap .aside-bottom-wrap-link ul li a::before {
    content: "";
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
}

.aside-bottom .aside-bottom-wrap .aside-bottom-wrap-link ul li.reserve a::before {
    width: 13px;
    height: 9px;
    margin-right: 5px;
    background-image: url(../assets/img/icon/icon-footer-mail.png);
}
.aside-bottom .aside-bottom-wrap .aside-bottom-wrap-link ul li.dl a::before {
    width: 16px;
    height: 11px;
    margin-right: 5px;
    background-image: url(../assets/img/icon/icon-footer-dl.png);
}
.aside-bottom .aside-bottom-wrap .aside-bottom-wrap-link ul li.documment a::before {
    width: 11px;
    height: 15px;
    margin-right: 5px;
    background-image: url(../assets/img/icon/icon-footer-documment.png);
}
.aside-bottom .aside-bottom-wrap .aside-bottom-wrap-link ul li.event a::before {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background-image: url(../assets/img/icon/icon-footer-event.png);
}


.footer-fixed ul .dl a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 11px;
    background-image: url(../assets/img/icon/icon-footer-dl.png);
}
.contact-form .contact-policy label {
    margin-bottom: 40px;
}
.contact-policy-txt a b {
    font-size: 1.5rem;
    text-decoration: underline;
}
.contact-form .contact-policy-txt {
    margin: 40px 0 !important;
    font-size: 1.2rem !important;
}
.contact-form .contact-btn input {
    background-color: #d8873d !important;
}
.bgc {
    background-color: #d2b48c !important;
}
.mb0>div {
    margin-bottom: 0 !important;
}
.top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt .lineup-04{
        width: 120px;
        margin-bottom: 6px;
        margin-top: -5px;
    }
@media screen and (max-width: 980px) {
    .top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt .lineup-06 {
        width: 160px;
    }
    .lineup .lineup-wrap .lineup-wrap-title h2 .favo {
    width: 200px !important;
}
}
@media screen and (max-width: 599px){
.footer-fixed ul .dl a::before  {
    width: 25px;
    height: 60px;
}
.top .com-title-left.i-s h1 {
    font-size: 3rem;
}
    .top .sec07-wrap-img.i-s {
    display: none;
}
    .top .sec07 .sec07-wrap .sec07-wrap-txt p {
    font-size: 1.2rem;
    margin: 20px 30px 30px 30px;
}
    .calendar .container-calendar_right {
        max-height: 350px;
    }
.calendar .container-calendar_right .container-calendar_right_container #event-ajax .event-ajax a .event-ajax_right .event-ajax_time {
        display: none;
    }
.top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt .lineup-01 {
    width: 100px;
}
.top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt .lineup-06{
        width: 140px;
    }
.top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt .lineup-04{
        width: 90px;
    }
}

.header .header-wrap .header-wrap-menu .header-wrap-menu-top ul .reserve a,
.footer-fixed ul .reserve a {
    background-color: #CDAC92;
    color: #000;
}
.com-btn-gray--small a {
    background: #703300;
}
.top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt ul li {
    color: #f7f0db;
    display: none;
}
.top .sec04 .sec04-wrap {
    justify-content: space-between;
}
.lineup .lineup-wrap .lineup-wrap-title h2 .favo {
    width: 260px !important;
}
.lineup .sec01 {
    padding: 30px 0px !important;
}
.lineup .lineup-wrap .lineup-wrap-col {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}
@media screen and (min-width: 600px) {
.top .sec04 .sec04-wrap .sec04-wrap-col {
    width: 47%;
    margin-bottom: 0px;
}
}
@media screen and (min-width: 600px) {
.top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt {
background-color: #6d5440;
        height: 170px;
        top: -60px;
        padding: 15px 10px;
}
.top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt .lineup-01.favo-pre {
    width: 230px;
}
}
@media screen and (max-width: 599px) {
.top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt {
    background-color: #6d5440;
    height: 150px;
    top: -20px;
    padding: 20px 10px;
}
}
.top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt p {
    font-size: 1.6rem;
}
.sec04-wrap-col-img {
    position: relative; /* 親を基準に絶対配置できるように */
}
.sec04-wrap-col-tag {
    position: absolute; /* 絶対配置 */
    top: 0;             /* 上端にぴったり */
    left: 0;            /* 左端にぴったり */
    background-color: #6d5440; /* 背景色（任意） */
    color: #fff;        /* 文字色 */
    padding: 5px 10px;  /* タグ内余白 */
    font-size: 14px;    /* フォントサイズ */
    font-weight: bold;  /* 太字 */
    border-radius: 0 0 5px 0; /* 任意で角丸 */
    z-index: 10;        /* 画像より前面に表示 */
}
.sec04-wrap-col-tag.semi {
    background-color: #d8873d; 
}
.sec04-wrap-col-tag.select {
    background-color: #BE8157; 
}

.header .header-wrap .header-wrap-menu .header-wrap-menu-top ul li a {
    font-size: 1.2rem;
}
.housing .housing-sec03_wall_content_box {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    border-bottom: 2px solid #f4f4f4;
}
@media screen and (max-width: 599px) {
    .housing .housing-sec03_wall_content_box {
        flex-direction: column;
    }
}
.housing .housing-sec03_wall_content_box .text02{
    font-size: 1rem;
}
.housing .housing-sec03_wall_content_box .item {
    max-width: 700px;
    width: 100%;
    margin-inline: auto;
    margin-top: 0;
    margin-bottom: 30px;
}

@media screen and (max-width: 599px) {
    .top .sec03 .sec03-wrap .sec03-wrap-col .sec03-wrap-col-img img {
        max-width: 260px;
    }
}
.top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt .lineup-01.favo-pre {
    width: 300px;
}
@media screen and (max-width: 900px) {
.top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt .lineup-01.favo-pre {
    width: 230px;
}
}
@media screen and (max-width: 599px) {
    .top .sec04 .sec04-wrap {
        width: calc(1200px);
        padding-right: 5%;
    }
    .top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt p {
    font-size: 1.2rem;
}
    .top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt .lineup-01.favo-pre {
        width: 178px;
    }
}
.event-single .event-single-wrap .event-single-wrap-cat ul li.top {
    display: none;
}
.event-wrap-col-txt-cat ul li.top {
    display: none;
}


.top #modelhouse_fudosan_slick .slick-slide {
    margin: 10px 10px 30px 0;
}

.top .fudosan-item-txt {
    padding: 10px 0;
}

.top .fudosan-item-txt h3 {
    font-weight: bold;
    font-size: 1.8rem;
}

.top .fudosan-price {
    font-weight: bold;
    color: #E4892A;
}

.top .fudosan-address {
    font-size: 1.2rem;
    color: #3f3f3f;
}

@media screen and (max-width: 768px) {
.top .fudosan-item-txt h3 {
    font-size: 1.2rem;
}
.top .fudosan-address, 
.top .fudosan-price {
    font-size: 1.1rem;
}
}
/*
sec-standard
*/
.sec-standard {
    padding: 0 0 120px 0;
    background-color: #fff; /* 清潔感のある白 */
}

/* 2カラムレイアウト */
.standard-map-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* 地図の土台 */
.map-visual-wrap {
    flex: 1.2;
    position: relative;
}

.map-base {
    position: relative;
    width: 100%;
}

.map-base img {
    width: 100%;
    height: auto;
    opacity: 0.7;
}

/* ピンの装飾 */
.map-pin {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #E4892A; /* 最初からオレンジ色 */
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 波紋の土台（平時から動かす） */
.map-pin::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(228, 137, 42, 1) 0%, rgba(228, 137, 42, 0) 70%);
    opacity: 0;
    transform: scale(1);
    z-index: -1;
    /* 平時から無限ループ */
    animation: pin-ripple 2.5s ease-out infinite; 
}
/* --- 2. アニメーションの定義 --- */
@keyframes pin-ripple {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}
/* --- 1. 店名の基本設定（通常は非表示） --- */
.map-pin::before {
    content: attr(data-name);
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 10px;
    font-size: 11px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0; /* 平時は隠す */
    transition: 0.3s;
    pointer-events: none;
    z-index: 30;
}

/* --- 2. リストホバー時の個別表示設定 --- */

/* 共通：いずれかの店舗リストをホバーしたら、全ピンを半透明にする（背景化） */
.standard-map-container:has([id^="link-"]:hover) .map-pin {
    opacity: 0.3;
}

/* 個別：特定のリストをホバーした時、その店舗のピンだけを「再表示 + 店名表示」 */

/* 浜田店 */
.standard-map-container:has(#link-hamada:hover) .p-hamada {
    opacity: 1; /* これでこのピンだけハッキリ見える */
}
.standard-map-container:has(#link-hamada:hover) .p-hamada::before {
    opacity: 1; /* これで浜田店の名前だけが出る */
    bottom: 30px;
}

/* 益田店 */
.standard-map-container:has(#link-masuda:hover) .p-masuda {
    opacity: 1;
}
.standard-map-container:has(#link-masuda:hover) .p-masuda::before {
    opacity: 1;
    bottom: 30px;
}

/* 岩国店 */
.standard-map-container:has(#link-iwakuni:hover) .p-iwakuni {
    opacity: 1;
}
.standard-map-container:has(#link-iwakuni:hover) .p-iwakuni::before {
    opacity: 1;
    bottom: 30px;
}

/* 柳井店 */
.standard-map-container:has(#link-yanai:hover) .p-yanai {
    opacity: 1;
}
.standard-map-container:has(#link-yanai:hover) .p-yanai::before {
    opacity: 1;
    bottom: 30px;
}

/* --- 3. ピン自体を直接マウスオーバーした時も同様に動かす --- */
.map-pin:hover {
    opacity: 1 !important; /* 強制的に表示 */
}
.map-pin:hover::before {
    opacity: 1;
    bottom: 30px;
}
.map-pin:hover {
    transform: scale(1.4);
    background: #E4892A; /* ホバー時に目立たせる */
}

.map-pin:hover::before {
    opacity: 1;
}
/* --- 【重要】アニメーションの定義 --- */
@keyframes pin-ripple {
    0% {
        transform: scale(1);
        opacity: 1; /* 鮮明に開始 */
    }
    100% {
        transform: scale(3.5); /* 大きく広がる */
        opacity: 0; /* 広がりながら消える */
    }
}


/* --- 1. 左のマッチ（ピン）自体をホバーした時の動作 --- */
.map-pin:hover {
    transform: scale(1.4);
    background: #E4892A; /* 指定色に変更 */
    z-index: 15; /* ホバーしたピンを最前面へ */
}

/* ホバー時にアニメーションを開始 */
.map-pin:hover::after {
    animation: pin-ripple 1.5s ease-out infinite; /* 1.5秒周期で繰り返す */
}

/* 直接ピンをホバー、または右側リストをホバーした時 */
.map-pin:hover,
.standard-map-container:has(#link-hamada:hover) .p-hamada,
.standard-map-container:has(#link-masuda:hover) .p-masuda,
.standard-map-container:has(#link-iwakuni:hover) .p-iwakuni,
.standard-map-container:has(#link-yanai:hover) .p-yanai {
    background: #c30; /* より濃い赤茶色に変化 */
    transform: scale(1.6); /* さらに大きく */
    z-index: 20;
}

/* ホバー時に波紋を激しくする */
.map-pin:hover::after,
.standard-map-container:has(#link-hamada:hover) .p-hamada::after,
.standard-map-container:has(#link-masuda:hover) .p-masuda::after,
.standard-map-container:has(#link-iwakuni:hover) .p-iwakuni::after,
.standard-map-container:has(#link-yanai:hover) .p-yanai::after {
    /* 周期を短く(1s)して、波紋の広がりを速くする */
    animation: pin-ripple 1s ease-out infinite; 
    background: radial-gradient(circle, rgba(204, 51, 0, 1) 0%, rgba(204, 51, 0, 0) 70%);
}

/* 店名表示のタイミングも調整 */
.map-pin:hover::before,
.standard-map-container:has([id^="link-"]:hover) .map-pin::before {
    opacity: 1;
    bottom: 30px;
}
/* ピンの位置例（実際の地図画像に合わせて調整してください） */
.p-hamada { top: 35%; left: 50%; }
.p-masuda { top: 45%; left: 41%; }
.p-yanai { top: 85%; left: 46%; }
.p-iwakuni { top: 75%; left: 51%; }

/* リスト部分 */
.map-info-wrap {
    flex: 1;
}

.info-block {
    margin-bottom: 40px;
}

.pref-label {
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding-left: 15px;
    border-left: 4px solid #333;
    margin-bottom: 20px;
}

.shop-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.shop-nav li a {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid #bfbebe;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
}

.shop-nav li a span {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    margin-top: 4px;
}

.shop-nav li a:hover {
    background: #f9f9f9;
    transform: translateY(-3px);
}
/* 右側リストホバー時に左側ピンを強調する設定 */

/* 浜田店 */
.standard-map-container:has(#link-hamada:hover) .p-hamada,
/* 益田店 */
.standard-map-container:has(#link-masuda:hover) .p-masuda,
/* 岩国店 */
.standard-map-container:has(#link-iwakuni:hover) .p-iwakuni,
/* 柳井店 */
.standard-map-container:has(#link-yanai:hover) .p-yanai {
    background: #E4892A; /* ホバー時の強調色 */
    transform: scale(1.6); /* 少し大きくして目立たせる */
    z-index: 20; /* 他のピンより前面へ */
}

/* ホバー時にピンのツールチップ（店名）も自動で表示させる場合 */
.standard-map-container:has(#link-hamada:hover) .p-hamada::before,
.standard-map-container:has(#link-masuda:hover) .p-masuda::before,
.standard-map-container:has(#link-iwakuni:hover) .p-iwakuni::before,
.standard-map-container:has(#link-yanai:hover) .p-yanai::before {
    opacity: 1;
    bottom: 30px;
}

/* スマホ対応 */
@media (max-width: 900px) {
    .sec-standard {
        padding: 0 30px;
        margin-bottom: 50px;
    }
    .standard-map-container {
        flex-direction: column;
        gap: 40px;
    }
    .map-visual-wrap {
        width: 70%;
        margin: 0 auto;
        flex: none;
    }
    .map-base {
        width: 100%;
        position: relative;
    }

    .map-info-wrap {
        width: 100%;
        flex: none;
    }

    .info-block {
        margin-bottom: 30px;
    }

    .shop-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
    }

    .shop-nav li a {
        padding: 12px 10px;
        text-align: center;
        align-items: center;
    }

    .shop-nav li a strong {
        font-size: 0.9rem;
    }

    .shop-nav li a span {
        font-size: 8px;
    }
}
@media (max-width: 500px) {
    .map-visual-wrap {
        width: 100%;
    }
}

    /*
menu
*/

.parent-menu {
    position: relative;
}

/* 非表示状態 */
.sub-thumb-menu {
    position: absolute;
    top: 100%;
    left: -100px;
    display: flex;  
    gap: 20px;
    padding: 20px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
    z-index: 100;
    width: max-content;
    border-radius: 8px;
}
.sub-thumb-menu.reform {
    left: -400px;
}

/* ホバーで表示 */
.parent-menu:hover .sub-thumb-menu {
    opacity: 1;
    visibility: visible;
}

/* サムネ */
.sub-thumb-menu img {
    width: 120px;
    margin-bottom: 10px;
    object-fit: cover;
}
.sub-thumb-menu li a:hover img {
  filter: brightness(0.7);
  transform: scale(1.05);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.aside-bottom .aside-bottom-wrap .aside-bottom-wrap-txt .aside-bottom-wrap-txt-btn {
    margin: 15px auto;
}

/*
下層ページ
*/
.aside-bottom .aside-bottom-wrap .aside-bottom-wrap-img {
    display: none;
}
@media screen and (max-width: 980px) {
    .aside-bottom .aside-bottom-wrap .aside-bottom-wrap-txt {
        padding-left: 0;
    }
}
.com-link-bottom {
    padding: 50px 0px;
    background-color: #fff;
}
.com-link-bottom .button__visit.consult a {
    background-color: #703300;
}
.button__visit.button__visit--orange a
 {
    background-color: #d8873d !important;
}

.com-link-bottom .titleblock h2 {
    color: #333;
}
.concept .sec02_v2 {
    background-color: #fff;
}
.concept .sec04 {
    background-color: #fff;
}
.concept .sec02_v2 .sec02_v2_title h2 {
    color: #333;
}
.concept .sec02_v2 .sec02_v2-wrap::after {
    content: "";
    display: block;
    background-image: url(../assets/img/icon/icon-close-black.png);
}
.sec02-wrap-img {
    width: 420px;
    margin: 0 auto;
    padding-top: 50px;
}
.sec01_icon-img {
    width: 180px;
    margin: 0 auto;
    padding-bottom: 50px;
}
@media screen and (max-width: 599px) {
.sec02-wrap-img {
    width: 380px;
}
}
.housing .housing-sec03-primary_content_navbox ul li a .icon {
    right: 50px;
    top: 30%;
}
.event .modelhouse_list_tab .page_tab_search {
    background-color: #f9f8f4;
}
.event .modelhouse_list_tab .page_tab_search .page_tab_search-wrap__title p {
    color: #333;
}
.com-btn-orange a {
    background-color: #E4892A;
}
.event .modelhouse_list_tab .page_tab a.active {
    background-color: #E4892A;
}
.voice .modelhouse_list_tab .page_tab_search {
    background-color: #f4f4f4;
    padding: 30px 0px 0pc;
}
.voice .modelhouse_list_tab .page_tab_search .page_tab_search-wrap__title p {
    color: #333;
}
.page_tab button.active, .page_tab a.active {
    background: #E4892A;
}
.housing .housing-section-primaryblock {
    background-color: #6d5440;
}
.housing.page .page-bg .page-bg-wrap-col {
    background-color: #6d5440;
}
.housing .housing-sec01-grade .housing-sec-secondary-contentblock .titleblock {
    background-color: #6d5440;
}
.after.page .page-bg .page-bg-wrap-col {
    background-color: #6d5440;
}
.after .after-wrap .after-wrap-title {
    background-color: #6d5440;
}
.lineup .lineup-wrap .lineup-wrap-col .lineup-btn-orange a {
    background: #E4892A;
}
.lineup .lineup-wrap .lineup-wrap-col .lineup-btn-gray a {
    background: #6d5440;
}
.modelhouse_list .modelhouse_list-list .modelhouse_list-list-wrap .modelhouse_list-list-wrap-txt__btn ul li .button__visit a {
    background-color: #6d5440;
}
.favo-pre img{
    width: 500px;
}

@media screen and (max-width: 599px) {
.favo-pre img{
    width: 300px;
}
}
/*
FAVO premium renew
*/
.favonew-img {
    margin: 50px 0;
}
section.sec03.favo-new.bg{
    background-color: #f9f8f4 !important;
}
.modal .close-btn {
    z-index: 10000;
}
.modal {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* スマホで中身が溢れたとき用の対策 */
    max-height: 80vh; /* 画面の高さの8割までに制限 */
}

.is-modal {
    cursor: pointer;
    transition: opacity 0.3s ease; 
}
.is-modal:hover {
    opacity: 0.7; 
}
h2.favo-new-heading {
    font-family: "Caveat", cursive;
    font-size: 5rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: .06em;
}
h3.favo-new.text-center
 {
    margin-bottom: 70px;
    margin-top: 20px;
}
.favo .sec03 ul.favo-new {
    justify-content: space-between; 
}
.favo .sec03 ul.favo-new li:nth-child(2n)
 {
    margin-right: 0px;
}
.favo .sec03 ul.favo-new li {
    width: 47.5%;
    margin-right: 5%;
    margin-bottom: 80px;
}
.favo-box {
   padding-bottom: 50px;
}
.titleblock.favo-pre {
    top: 40% !important;
}

img.lazyload.favo-logo {
    width: 70%;
    margin-top: 30px;
}
img.lazyload.favo-logo-new {
    width: 380px;
    margin-top: 20px;
}
.titleblock.favo-new img {
    width: 300px;
}

@media (max-width: 768px) {
    .titleblock.favo-new img {
    width: 250px;
}
img.lazyload.favo-logo-new {
    width: 300px;
}
}
@media screen and (max-width: 599px) {
img.lazyload.favo-logo {
    width: 100%;
}
.titleblock.favo-new img {
    margin-left: 20px;

}
img.lazyload.favo-logo-new {
    width: 240px;
}
h2.favo-new-heading {
    font-size: 3.6rem;
}
.favo .sec03 ul.favo-new li {
    width: 100%;
    margin-right: 0;
}
.favonew-img {
    margin: 0 0 30px 0;
}
}
.isme .sec04 .titleblock {
    margin-bottom: 60px;
}
.iconblock {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
}
.iconblock span {
    font-size: 1.4rem;
    font-weight: bold;
}
.iconblock p {
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 0em;
}
.iconblock .text2 {
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 10px;
    text-align: left;
}
@media screen and (max-width: 599px) {
.iconblock .text2 {
    font-size: .8rem;
    margin-top: 10px;
}
.isme .sec04 .titleblock {
    margin-bottom: 30px;
}
}
p.text-left-read {
    font-weight: bold;
    margin-bottom: 30px;
}
.isme .titleblock {
  display: flex;
  justify-content: center;
}
.isme .titleblock.ttl {
  display: inline-block;
  justify-content: center;
}
.isme .titleblock h2 {
  font-size: 3rem;
  letter-spacing: 0em;
  font-weight: bold;
  margin-bottom: 34px;
  position: relative;
  line-height: 1.4;
  padding: 0.25em 1em;
  text-align: center;
}
.favopre-img {
    width: 80%;
    margin: 0 auto;
}
.favopre-new-img {
    width: 100%;
    margin: 0 auto;
}
p.favopre-text {
    font-size: 2.2rem;
    font-weight: bold;
}
p.favopre-text2 {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 30px;
}
.isme .titleblock h3 {
    font-size: 3rem;
    letter-spacing: 0em;
    font-weight: bold;
    margin-bottom: 34px;
    position: relative;
    line-height: 1.4;
    padding:0.25em 1em;
    display: inline-block;
    top:0;   
}
.isme .titleblock h3::before, .isme .titleblock h3::after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.isme .titleblock h3::before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
.isme .titleblock h3::after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}
.isme .sec05 .sec05__pointcontent ul li .title span {
    font-size: 2.2rem;
    font-weight: inherit;
    letter-spacing: 0em;
    position: relative;
    padding-left: 1em; /* ▲分の余白 */
}

.isme .sec05 .sec05__pointcontent ul li .title span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 0.35em solid transparent;
    border-bottom: 0.35em solid transparent;
    border-left: 0.45em solid #333; /* 色はお好みで */
}
.isme .sec05 .sec05__pointcontent ul li .title {
    margin-bottom: 15px;
}
@media screen and (max-width: 980px) {
    .isme .titleblock h2 {
        font-size: 2rem;
    }
    .iconblock p {
    font-size: 1.8rem;
    margin-bottom: 10px;
}
.isme .sec05 .sec05__pointcontent ul li .title span {
    font-size: 1.8rem;
}
.isme .sec04 .titleblock {
    margin-bottom: 30px;
}
.favopre-img {
    width: 100%;
}
p.favopre-text {
    font-size: 1.8rem;
}
p.favopre-text2 {
    font-size: 1.2rem;
    font-weight: 400;
}
.iconblock {
    padding: 10px;
}
.iconblock span {
    font-size: 1.3rem;
}
}
.isme .sec06.dl {
    padding-top: 70px;
    background-color: #fff;
}
.isme .sec06 .catalog-dl {
    padding: 20px 40px;
    border: 4px solid #BE8157; /* オレンジの枠線 */
    border-radius: 12px;       /* 角丸 */
    background-color: #fff;    /* 背景色 */
    box-shadow: 0 6px 15px rgba(0,0,0,0.08); /* 軽い影 */
    transition: all 0.3s ease;
    cursor: pointer;           /* クリック感 */
}

.isme .sec06 .catalog-dl:hover {
    background-color: #fdf4ec;  /* ホバーで背景色変化 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* ホバーで影を強く */
    transform: translateY(-3px); /* 軽く浮かせる */
}
.isme .sec06 .catalog-dl h3 {
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: 0em;
}

.isme .sec06 .catalog-dl-inner {
    display: flex;
    align-items: center;
    gap: 48px;
}

.isme .sec06 .catalog-dl-text {
    width: 55%;
}


.isme .sec06 .catalog-title {
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center;    /* 中央揃え */
    gap: 8px;               /* 画像と文字の間隔 */
    margin-bottom: 16px;
}

.isme .sec06 .catalog-title .favo-logo {
    height: 100px;
    width: auto;
    margin-top: 0px;
}

.isme .sec06 .catalog-title span {
    font-size: 2.2rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0em;
}


.isme .sec06 .catalog-desc {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
    font-weight: bold;
}

.isme .sec06 .catalog-dl-image {
    width: 45%;
    text-align: right;
}

.isme .sec06 .catalog-dl-image img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 10px 30px rgba
}
@media screen and (max-width: 980px) {
.isme .sec06 .catalog-dl-text {
    width: 80%;
}
.isme .sec06 .catalog-dl h3 {
    font-size: 1.8rem;
    text-align: center;
}
.isme .sec06 .catalog-dl {
    padding: 20px 20px;
}
}
 .isme.favo .sec03 {
    padding: 60px 0px 40px 0px;
    background-color: #fff;
}
@media screen and (max-width: 500px) {
    .isme .sec06 .catalog-dl-inner {
        flex-direction: column;  /* 縦並び */
        align-items: center;     /* 中央揃え */
        gap: 0px;
    }

    .isme .sec06 .catalog-dl-text,
    .isme .sec06 .catalog-dl-image {
        width: 100%;
        text-align: center;
    }

    .isme .sec06 .catalog-dl-image {
        margin-top: 24px;
    }
    .isme .sec06 .catalog-title span {
    font-size: 1.8rem;
}
}
section.top.sec-nevent {
    margin: 20px 0;
}
/*
Heder Area追加
*/

  .header .header-wrap .header-wrap-menu .header-wrap-menu-bottom ul li.parent-menu {
        font-weight: normal;
        font-size: 1rem;
        position: relative;
        display: block;
        text-align: center;
        letter-spacing: 0em;
        font-feature-settings: "palt";
        color: #000;
        letter-spacing: 0em;
    }
/*
   .header .header-wrap .header-wrap-menu .header-wrap-menu-bottom ul li.parent-menu span {
        display: block;
        font-size: 1.4rem;
        font-family: YakuHanJP, "DIN", sans-serif;
        color: #000;
        letter-spacing: 0em;
        line-height: 1.2;
    }

    .header .header-wrap .header-wrap-menu .header-wrap-menu-bottom ul li.parent-menu ul {
        left: -55px;
        display: none;
        position: absolute;
        background-color: #fff;
        opacity: 0.9;
    }
*/
    .header .header-wrap .header-wrap-menu .header-wrap-menu-bottom ul li.parent-menu ul li {
        margin-right: 0;
    }

    .header .header-wrap .header-wrap-menu .header-wrap-menu-bottom ul li.parent-menu ul li a {
        font-size: 1.2rem;
    }

    .header .header-wrap .header-wrap-menu .header-wrap-menu-bottom ul li.parent-menu ul li a:after {
        background-color: unset;
    }

    .header .header-wrap .header-wrap-menu .header-wrap-menu-bottom ul li.parent-menu a:after {
        display: none !important;
}
.header {
    transition: .3s;
}
/*
2024/09/17 YUIE追加
*/
@media screen and (min-width: 981px) {
  .header-yuie {
    display: none;
  }
}

.anchor_yuie {
  padding-top: 150px;
  margin-top:-150px;
}

.yuie_style {
    font-weight: bold;
    text-align: left;
    font-size: 1.5rem;
}
@media screen and (max-width: 599px){
.yuie_style {
    text-align: center;
    font-size: 1.2rem;
}
}
/*
2024/09/17 YUIE追加
*/
.slick-dots {
    bottom: 10px !important;
}
@media screen and (max-width: 980px) {
    .top .sec04 .sec04-wrap .sec04-wrap-col .sec04-wrap-col-txt p {
        white-space: nowrap;
    }
    .com-title--black h2 {
        white-space: nowrap;
    }
}
/*
media print
*/
@media print {
  .header, .footer-fixed, .event-single-wrap-btn {display:none;}
}

/*
2024/09/17 スマホ表示調整
*/

html {scroll-behavior: smooth;}
/*
スムーススクロール
*/
.sec02.voice-archive.event  {
    background-color: #f4f4f4;
    padding: 20px 0px;
}

.single .single-wrap .single-wrap-img {
    display: none;
}

.voice .sec01 .voice-bg-wrap .voice-wrap {
    background-color: #f9f8f4 !important;
    border-radius: 14px;
}

.voice .sec01 .voice-bg-wrap .voice-wrap h3 {
    color: #eb6d00 !important;
}

.voice iframe {
    height: calc(200*(100vw / 375));
    max-height: 500px;
}

.event-single .event-single-wrap .title {
    display: none !important;
}

.event .event-wrap .event-wrap-col .event-wrap-col-img img {
    max-height: 220px;
    object-fit: cover;
}
.page.event .swiper.sample-thumb.swiper-initialized.swiper-horizontal.swiper-free-mode.swiper-watch-progress.swiper-backface-hidden.swiper-thumbs {
    display: none !important;
}
.footer .footer-border span {
    height: 3px !important;
}
@media screen and (max-width: 980px){
.event .event-wrap .event-wrap-col .event-wrap-col-img img {
    height: calc(118*(100vw / 600)) !important;
}
.event .sec {
        padding: 5px 0;
    }
}
@media screen and (max-width: 599px){
.event .event-wrap .event-wrap-col .event-wrap-col-img img {
    height: calc(118*(100vw / 375)) !important;
}
}
.archive .page-visual {
    background-image: url(http://iwanamiweb.xsrv.jp/wp-content/uploads/2024/03/company-top-visual.jpg);
    background-size: cover;
}

.event .page-visual {
    display: none;
}

.works .page-visual {
    background-image: url(http://iwanamiweb.xsrv.jp/wp-content/uploads/2024/03/archive-visual8.png);
    background-size: cover;
}

.fudosan .page-visual {
    background-image: url(http://iwanamiweb.xsrv.jp/wp-content/uploads/2024/03/archive-visual3.png);
    background-size: cover;
}

.voice .page-visual {
    background-image: url(http://iwanamiweb.xsrv.jp/wp-content/uploads/2024/03/archive-visual7.png);
    background-size: cover;
}

.aside-bottom .aside-bottom-wrap {
    border: 1px solid #bfbfbf3b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.favo .sec03 {
    padding: 40px 0px 40px 0px;
    background-color: #fff !important;
}

.deco_highlight {
  text-decoration: underline;
  text-underline-offset: -0.2em;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgba(255, 228, 0, 0.4);
  text-decoration-skip-ink: none;
}

/*
トップページ　改訂調整
*/

.top .sec-nevent {
    padding: 50px 0 !important;
}
.top .sec02 {
    padding: 20px 0px 50px !important;
}
.top .sec05 {
    padding: 0px 0px 50px !important;
}
.top .sec04 {
    margin: 50px 0px 0px;
}
.top .sec08 {
    padding: 0px 0px 50px !important;
}
/*
イベントページのみフッターリンク等　非表示
*/
@media screen and (max-width: 599px) {
    body.page-template-page-favo-new .footer-fixed,
  body.page-template-page-reform-renew .footer-fixed,
　body.page-id-11559 .footer-fixed,
  body.page-id-6762 .footer-fixed,
  body.page-template-page-favo-pre .footer-fixed,
  body.single-events .footer-fixed,
  body.page-template-page-conceptpage-flow-php .footer-fixed,
  body.single-events .com-link-bottom,
  body.single-events .aside-bottom,
  body.single-events .voice-archive,
　body.single-events .event-archive {
    display: none !important;
  }
}
@media screen and (max-width: 599px) {
body.wp-singular.page-template.page-template-page-contact-event-entry-masuda .footer-fixed {
    display: none;
}
}
/*
フッター reCAPTCHA
*/

.footer_recaptcha {
    font-size: 1.2rem;
    padding: 20px 0 0;
    text-align: center;
    color: #CCC;
    width: 100%;
    }
.footer_recaptcha a {
    font-size: 1.2rem;
    }
.grecaptcha-badge { visibility: hidden; }

/*
エリアページ
*/

.area .sec03-wrap {
    padding: 50px 0;
    position: relative;
}

.area .sec03-wrap:before {
    width: 98%;
    height: 100%;
    position: absolute;
    left: 2%;
    top: 0px;
    border-radius: 40px 0px 0px 40px;
    content: "";
    display: block;
}

.area .sec03-wrap .content-width .sec03-wrap-col {
    display: flex;
    align-items: center;

}

.area .sec03-wrap .content-width .sec03-wrap-col .sec03-wrap-col-txt {
    width: 50%;
    padding-right: 5%;
    font-size: 1.6rem;
    margin-bottom: 20px;

}

.area .sec03-wrap .content-width .sec03-wrap-col .sec03-wrap-col-txt h2 {
    font-size: 3rem;
    margin-bottom: 20px;

}

.area .sec03-wrap .content-width .sec03-wrap-col .sec03-wrap-col-txt h3 {
    margin-bottom: 40px;

}

.area .sec03-wrap .content-width .sec03-wrap-col .sec03-wrap-col-txt h2 span {
    display: inline-block;
    font-size: 2.5rem;
    font-weight: bold;
    font-family: YakuHanJP, "DIN", sans-serif;
    border: 2px solid #333;
    padding: 4px 25px;
    margin-bottom: 25px;

}

.area .sec03-wrap .content-width .sec03-wrap-col .sec03-wrap-col-txt p {
    margin-bottom: 40px;

}

.area .sec03-wrap .content-width .sec03-wrap-col .sec03-wrap-col-img {
    width: 50%;

}

.area .message {
    padding-top: 100px;
    padding-bottom: 100px;
}

.area .message h1 {
    font-size: 3rem;
}

.area .message .message__contents {
    padding: 0 20px;
}

@media screen and (max-width: 599px) {
    .area .message {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .area .sec03-wrap .content-width .sec03-wrap-col {
        flex-direction: column;
    }

    .area .sec03-wrap .content-width .sec03-wrap-col .sec03-wrap-col-txt {
        width: 100%;
    }

    .area .sec03-wrap .content-width .sec03-wrap-col .sec03-wrap-col-img {
        width: 80%;
        margin-bottom: 30px;
    }

    .area .message .message__contents {
        padding: 20px 0;
    }
}

.area .page-visual {
    background: url("https://www.iwanami-web.com/wp-content/themes/iwanami/assets/img/page/flow/bg-flow.jpg") no-repeat;
    background-size: cover;
}

.a_reform .page-visual {
    background: url("https://www.iwanami-web.com/wp-content/themes/iwanami/assets/img/page/flow/bg-reform.png") no-repeat;
    background-size: cover;
}

.area .sec08 {
    background: #fff;
}

.modelhouse.area .sec08 .sec08-container .sec08-wrap:after {
    content: none;
}

.modelhouse.area .sec08 .sec08-container .sec08-wrap ul li h2,
.modelhouse.area  .sec08 .sec08-container .sec08-wrap ul li h2 {
    margin-top: 20px;
    font-size: 1.8rem;
    line-height: 1.66;
    letter-spacing: 0em;
}

.area .voice-wrap-col-img {
    position: relative;
}

.area .voice-area {
    background-color: #154797;
    color: #fff;
    width: 80px;
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    text-align: center;
    font-size: 1.2rem;
    padding: 2px 0px;
}

.area .modelhouse_list-list-wrap-txt__btn ul li .button__visit a {
    background-color: #333;
}

.area .modelhouse_list-list-wrap-txt__btn ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.area .modelhouse_list-list-wrap-txt__btn ul li {
    margin-bottom: 10px;
    width: 100%;
}

/*
お問い合わせページ
*/
.contact .contact-top-bg {
    padding: 40px 0 !important;
}
/*
フッターお問い合わせ
*/
.aside-bottom-wrap-link img {
    width: 27px;
    height: 20px;
    margin: 0px 17px 3px 24px;
}

.br-sp {
    display: none;
}

@media (max-width: 600px) {
    .br-sp {
        display: block;
    }
}
/*
住宅性能
*/
.housing .housing-sec01-primary_content .a-01 {
    height: 35px !important;
}

.housing .housing-sec01-primary_content .a-01-1 {
    position: absolute;
    width: 80%;
    max-width: 300px;
    height: 35px;
    z-index: 2;
    right: 10px;
    top: 35px;
}

.housing .housing-sec01-grade .titleblock .titlebox .title2 {
    font-size: 2.6rem;
    color: #000;
    flex: 0 0 450px;
    text-align: center;
    font-weight: bold;
}
@media screen and (max-width: 980px) {
    .housing .housing-sec01-grade .titleblock .titlebox .title2 {
        font-size: 1.8rem;
        flex: 0 0 300px;
    }
}
.housing .housing-sec01-grade .housing-sec-secondary-contentblock .secondary_01_contentblock .item01 {
    text-align: center;
}

.housing-gray_bac {
    margin: 10px 0 5px;
    padding: 20px 30px;
    background: #efefef;
    text-align: center;
}
.housing-gray_bac p {
    font-size: 1.2rem;
}

.UA-textBox {
    width: 500px;
    background: #efefef;
    margin: 0 auto;
    padding-left: 80px;
    border-radius: 10px;
}

.UA-text {
    font-size: 3rem;
    color: #685b8b;
    font-weight: 600;
    font-family: 'DIN';
}

.housing-map {
    width: 70%;
    text-align: center;
    margin: 0 auto;
}

.housing-map p {
    font-size: 1rem;
    text-align: right;
}
@media (max-width: 760px) {
.housing-map {
    width: 100%;
}
.housing-gray_bac p {
    text-align: left;
}
}
.housing .housing-sec01-grade .housing-sec-secondary-contentblock .secondary_02_contentblock {
    padding-bottom: 0 !important;
}

.madobox {
    text-align: center;
    margin: 30px 0 0;
}

.madobox img {
    width: 80%;
}
@media (max-width: 760px) {
.madobox img {
    width: 100%;
}
}
.housing-gray_bac .c_text p {
    font-size: 1.6rem;
}
.housing-gray_bac .c_text span {
    font-weight: 600;
}
.ua_text p {
    font-size: 1.4rem;
    line-height: 1.786;
    margin: 30px 200px;
}
@media (max-width: 980px) {
.housing-gray_bac .c_text p {
    font-size: 1.2rem;
    text-align: left;
}
.ua_text p {
    font-size: 1.2rem;
    margin: 30px;
}
}
.grade_box_ttl {
    margin-top: 70px;
}
.grade_box_ttl .num {
    font-family: YakuHanJP, "DIN", sans-serif;
    font-size: 7rem;
    color: fff;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    display: inline-block;
    position: relative;
    line-height: 1;
    left: 3px;
}
.grade_text {
    font-size: 2.8rem;
    text-align: center;
    font-weight: 600;
}
.grade_box {
    display: flex;
    margin: 10px 50px;
}
.housing .housing-sec01-grade {
    padding-top: 20px !important;
}
.grade_block {
    margin: 3;
}
.grade_block p {
    font-size: 1.5rem;
    text-align: center;
    font-weight: 600;
}
@media (max-width: 980px) {
.grade_box {
    margin: 10px 10px;
}
}
@media (max-width: 760px) {
.grade_box {
    display: block;
    margin: 10px 130px;
}
.grade_box_ttl {
    margin-top: 40px;
}
.grade_block p {
    font-size: 1.2rem;
    margin-bottom: 3px;
}
}
@media (max-width: 500px) {
.grade_box {
    display: block;
    margin: 10px 50px;
}
}
/*
header リフォーム
*/
.topimg-wrap-col-txt {
 margin-top: 20px;
}
.topimg-wrap-col-txt h2 {
    font-size: 1.2rem;
}
@media screen and (max-width: 980px) {
    .reform.content-width-large {
        width: 93% !important;
    }
}
@media screen and (max-width: 500px) {
.a_reform .sec03-wrap {
    padding: 10px 0;
}
}

.reform_orange {
    margin-bottom: 10px !important;
    color: #ed6d00;
}
.com-btn-gray a.btn-orange{
    background: #ed6d00 !important;
}
.reform-title h2 .num {
    font-family: YakuHanJP, "DIN", sans-serif;
    font-size: 7rem;
    color: #fff;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    display: inline-block;
    position: relative;
    line-height: 1;
    left: 3px;
}
.reform-txt-nayami {   
    width: 50%;
    margin: 0 auto;
    padding: 15px 0 30px;
}
.reform-txt-nayami ul li p {   
    font-weight: 600;
}
.reform-txt {
    width: 80%;
    margin: 0 auto;
}
@media screen and (max-width: 500px) {
.reform-txt-nayami {   
    width: 70%;
}
.reform-txt {
    width: 100%;
}
}
.step-box-txt h4 {
    margin-bottom: 30px;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: revert-layer;
}
.step-box-txt h3 {
    font-family: YakuHanJP, "DIN", sans-serif;
    font-size: 4rem;
    color: #fff;
    -webkit-text-stroke: 2px #000;
    text-stroke: 2px #000;
    text-align: center;
    text-shadow: none;
    margin-bottom: 30px;
}
.step-box-txt {
    position: relative;
    display: inline-block;
    width: 23%;
    font-size: 1.6rem;
    background-image: linear-gradient(180deg, rgba(254, 159, 149, 1), rgba(255, 226, 196, 1));
    padding: 15px;
    margin-right: 2%;
    border-radius: 15px;
    margin-bottom: 20px;
}
.step-box-txt::after {
  content: "";
  position: absolute;
  top: 11%;
  right: -15px;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.2em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateX(-25%) rotate(45deg);
}
.step-box-txt::before {
  content: "";
  position: absolute;
  top: 11%;
  right: -5px;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.2em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateX(-25%) rotate(45deg);
}
ul li.step-box-txt:last-child:after{
    color: transparent;
}
ul li.step-box-txt:last-child::before{
    color: transparent;
}
@media (max-width: 815px) {
    .step-box-txt h3 {
    font-size: 3.5rem;
}
}    
@media (max-width: 599px) {
    .step-box-txt {
    width: 90%;
    height: unset;
}
.step-box-txt h3 {
    margin-bottom: 10px;
}
.step-box-txt h4 {
    margin-bottom: 10px;
}
.step-box-txt::after {
    top: 95%;
    right: 50%;
    transform: translateX(-25%) rotate(135deg);
}
.step-box-txt::before {
    top: 100%;
    right: 50%;
    transform: translateX(-25%) rotate(135deg);
}
}
/*
来場予
*/
.visitor .sec03 {
    margin-top: 30px;
    padding: 30px 0px 30px;
    background-color: #f4f4f4;
}
.visitor-wrap-col-img {
    max-width: 1200px;
    margin: 0 auto;
}
.content-visitor {
    margin-top: 30px;
}
.content-visitor-btn {
    margin: 0 auto;
    width: 320px;
}
.button__visit.button__visit--gradi a
 {
    background: linear-gradient(90deg, #ff4500, #ff8c00);
    border-radius: 50px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    animation: float-bob 2s ease-in-out infinite;
}
/* アニメーションの定義 */
@keyframes float-bob {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-px); /* 上に10px移動 */
  }
  100% {
    transform: translateY(0);
  }
}

.button__visit.button__visit--gradi a:hover {
  transform: translateY(-2px); 
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.content-visitor-btn .button__visit a .text {
    font-size: 2rem;
    margin: 0 auto;
    padding-left: 0;
}
.content-visitor-btn .button__visit a .text.favo {
    color: #fff;
    text-shadow: rgb(255, 96, 0) 3px 0px 0px, rgb(255, 96, 0) 2.83487px 0.981584px 0px, rgb(255, 96, 0) 2.35766px 1.85511px 0px, rgb(255, 96, 0) 1.62091px 2.52441px 0px, rgb(255, 96, 0) 0.705713px 2.91581px 0px, rgb(255, 96, 0) -0.287171px 2.98622px 0px, rgb(255, 96, 0) -1.24844px 2.72789px 0px, rgb(255, 96, 0) -2.07227px 2.16926px 0px, rgb(255, 96, 0) -2.66798px 1.37182px 0px, rgb(255, 96, 0) -2.96998px 0.42336px 0px, rgb(255, 96, 0) -2.94502px -0.571704px 0px, rgb(255, 96, 0) -2.59586px -1.50383px 0px, rgb(255, 96, 0) -1.96093px -2.27041px 0px, rgb(255, 96, 0) -1.11013px -2.78704px 0px, rgb(255, 96, 0) -0.137119px -2.99686px 0px, rgb(255, 96, 0) 0.850987px -2.87677px 0px, rgb(255, 96, 0) 1.74541px -2.43999px 0px, rgb(255, 96, 0) 2.44769px -1.73459px 0px, rgb(255, 96, 0) 2.88051px -0.838247px 0px;
}
.content-visitor-btn .text span{
    display:block;
    font-size:2rem;
    font-weight:bold;  
    color:#fff;
}
#menu.fixed-bottom {
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    padding: 10px 0;
}


/* 内部テキストやリンク調整 */
#menu.fixed-bottom a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
}
.fixed {
    position: fixed;
    top: 0;
    width: 320px;
    z-index: 50;
}

.plr5 {
    padding: 5px;
}

@media (min-width: 576px) {
    .d-sm-flex {
        display: flex;
    }
}
/*
イベントテンプレート
*/

.events-template-default .add-single-hl_flex {
    display: unset;
    align-items: center;
    margin-bottom: 50px;
}
.events-template-default .add-single-hl_flex:nth-of-type(2n+1) .add-single-hl_flex_img {
    padding-right: 0;
}

.events-template-default .add-single-hl_flex:nth-of-type(2n) .add-single-hl_flex_img {
    padding-left: 0;
}
.event .modelhouse_list_tab .page_tab_search .page_tab_search-wrap ul.store-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}
.event .modelhouse_list_tab .page_tab_search .page_tab_search-wrap li.store-tab-item
 {
    flex: 1;
}
/*
投稿用マーカー
*/

.pink-1 {
background: linear-gradient(transparent 80%, #ffb6c1 80%);
}
.pink {
background: linear-gradient(transparent 60%, #ffb6c1 60%);
}
.blue-1 {
background: linear-gradient(transparent 80%, #87cefa 80%);
}
.blue {
background: linear-gradient(transparent 60%, #87cefa 60%);
}
.yellow-1 {
background: linear-gradient(transparent 80%, #ffd700 80%);
}
.yellow {
background: linear-gradient(transparent 60%, #ffd700 60%);
}
/*
contact-form7
*/
@media screen and (max-width: 770px) {
.contact-col {
    padding: 50px 8px;
}
}
.contact-form {
    padding: 50px 0px;
}
.contact-form_td_catalog {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 5px;
}
.dl.contact-form_td_catalog {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1px;
}
.dl.contact-form_td_catalog .catalog-box {
    margin-left: 8px;
    cursor: auto;
}
@media screen and (max-width: 770px) {
    .dl.contact-form_td_catalog .catalog-box {
        margin-left: 2px;
    }
}

.contact-form_th p {
    text-align: left;
}
.contact-form_num {
    font-size: 2rem;
    font-family: YakuHanJP, "DIN", sans-serif;
    color: #b2adad;
}
.content-width2 {
    margin: 0 15px;
}
.contact-txt-box {
    margin: 0 15px 40px !important;
}
.contact-ttl {
    font-size: 2rem;
    text-align: center;
    color: #ed6d00;
}
.contact-txt {
    font-size: 1.7rem;
    text-align: left;
}
.contact-txt2 {
    font-size: 1.4rem;
}
.contact-txt3 {
    font-size: 1.2rem;
    text-align: left;
    color: #7b7b7b;
}
textarea {
    font-size: 1.4rem;
}
.enquete .contact-form_td .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1em; /* 選択肢間の余白を調整 */
  margin: 0 0 0 1em;
}

.enquete .contact-form_td .wpcf7-checkbox label {
  display: inline-flex;
  align-items: center;
  margin: 0;
}


@media screen and (max-width: 599px) {
    .enquete .contact-form_td .wpcf7-checkbox .wpcf7-list-item {
        width: 100%;
    }
    input, select, textarea {
        font-size: 1.2rem;
    }
}

.request-intro-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
  }
  
  .request-intro-button {
    flex: 1 1 200px;
    max-width: 300px;
    text-align: center;
  }
  
  .request-btn {
    display: inline-block;
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
  }
    .contact-form_tr {
        margin-bottom: 20px !important;
    }
/* 必須バッジのデザイン */
.hissu-wrap {
    display: flex;
    align-items: center;
    gap: 6px; /* バッジと入力の間隔 */
}

.hissu-wrap p {
    display: flex;
    align-items: center;
    margin: 0;
    width: 100%; /* pタグも100%に */
}

.hissu-wrap .wpcf7-form-control-wrap {
    flex: 1; /* 横幅いっぱいに広がる */
}

.hissu-wrap input.wpcf7-form-control {
    width: 100%; /* 入力欄も横幅100% */
    box-sizing: border-box; /* パディング込みで100% */
}

.hissu-badge {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 500;
    background-color: #ed6d00;
    border-radius: 3px;
    color: #fff;
    width: 50px;
    text-align: center;
    line-height: 1;
    padding: 4px 0;
    margin-right: 20px;
}

@media screen and (max-width: 599px) {
    .hissu-badge {
        margin-right: 10px;
        font-size: 1rem;
        width: 45px;
    }
}
@media screen and (max-width: 599px) {
    .contact-form_tr {
        margin-bottom: 10px !important;
    }
    .contact-form {
    padding: 30px 0px;
}
}

/* アイコンの調整 */
.request-btn i {
    margin-right: 10px;
    font-size: 1.2em;
    color: #fff; /* 常に白 */
    vertical-align: middle;
  }
  
  
  /* 色のカスタマイズ */
  .request-btn-color1 {
    background-color: #ea6d00;
    color: #fff;
  }
  
  .request-btn-color1:hover {
    background-color: #904400;
    color: #fff;
  }
  
  .request-btn-color2 {
    background-color: #003e9e;
    color: #fff;
  }
  
  .request-btn-color2:hover {
    background-color: #022b68;
    color: #fff;
  }
  
  .catalog-box {
    border: 2px solid #ccc;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .catalog-box.selected {
    background-color: #faeee0; /* 選択時の背景色 */
    border-color: #ed6d00;
  }
  .catalog-checkbox {
    display: none; /* チェックボックスは非表示に */
  }

  .steps {
    list-style: none;
    max-width: 900px;
    margin: auto;
    padding: 20px 0;
  }

  .steps .catalog {
    text-align: center;
    margin-bottom: 30px;
  }

  .steps .catalog h2 {
    font-size: 2rem;
    color: #000;
    margin-bottom: 10px;
    letter-spacing: 0em;
  }
  .steps h2 .num {
    font-family: YakuHanJP, "DIN", sans-serif;
    font-size: 5rem;
    color: #fff;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    display: inline-block;
    position: relative;
    line-height: 1;
    left: 3px;
}
  .steps-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
  }

  .steps li {
    flex: 1 1 100px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
    padding: 15px;
    position: relative;
  }

  .steps li h3 {
    font-family: YakuHanJP, "DIN", sans-serif;
    font-size: 3rem;
    color: #000;
    text-align: center;
    text-shadow: none;  
  }

  .steps li p {
    font-size: 1.5rem;
    color: #333;
  }

  .step-icon {
    font-size: 36px;
    color: #333;
  }

  .steps li::after {
    content: "\f061"; /* Font Awesome arrow-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 20px;
    color: #ed6d00;
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
  }

  .steps li:last-child::after {
    content: "";
  }
  @media screen and (max-width: 599px) {
    .steps li h3 {
        font-size: 2.4rem;
      }
    .steps li p {
        font-size: 1.2rem;

      }
}

/*  */
.pc {
    display: block;
}
.sp {
    display: none;
}
@media screen and (max-width: 560px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
}

  /* NEWアイコン */
.new-icon {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #e60023;
    border-radius: 15px;
    vertical-align: middle;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 60px;
  }
  
  .icon-labels-wrapper {
    position: relative;
  }
  
  .icon-label {
    display: inline-block;
    padding: 3px 10px 1px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
  }
  
  .icon-label.icon-new {
    position: absolute;
    background-color: #e60023;
    border-radius: 15px;
    margin: 10px;
  }
  
  .icon-label.icon-sale {
    --f: .5em; /* control the folded part */  
    position: absolute;
    top: 0;
    right: 0;
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
    clip-path: polygon(
      100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
    transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
    transform-origin: 0% 100%;
    background-color: #ec6d00; /* the main color  */
  }

  .icon-label-single {
    display: inline-block;
    padding: 3px 10px 1px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
  }

  .icon-label-single.icon-new-single {
    position: absolute;
    background-color: #e60023;
    border-radius: 15px;
    bottom: 0;
    right: 0;
  }
  
  .icon-label-single.icon-sale-single {
    position: absolute;
    background-color: #ec6d00;
    top: 0;
    right: 0;
  }

    /* アンケート追加 */
.contact-survey-toggle{
    text-align: center;
}

.survey-btn {
    background: #1565c0;
    border: 1px solid #ccc;
    padding: 15px 20px;
    cursor: pointer;
    margin: 20px 0;
    border-radius: 5px;
    font-size: 16px;
    width: 330px;
  }
  .contact-survey-box {
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #fafafa;
    margin-bottom: 20px;
  }
  .contact-survey-intro {
    background-color: #e7e4d8;
    padding: 20px;
    margin-bottom: 20px;
  }
  .contact-survey-lead {
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
  }
  .survey-points {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .survey-points .point {
    flex: 1;
    min-width: 200px;
    background: #fff;
    border: 1px dashed #ddd;
    border-radius: 6px;
    padding: 15px;
  }
  .point-tag {
    display: inline-block;
    background-color: #ffcc80;
    color: #000;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    margin-bottom: 8px;
  }
  .campaign-conditions {
    font-size: 14px;
    background: #f3efe0;
    padding: 15px;
    border-radius: 5px;
  }
  .campaign-conditions h4 {
    margin-top: 0;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
  .campaign-conditions .small {
    font-size: 1.2rem;
    font-weight: normal;
  }
  .campaign-conditions ul {
    list-style-type: disc;
    padding-left: 20px;
  }
  .campaign-conditions .note {
    margin-top: 10px;
    font-size: 1.2rem;
    color: #666;
  }

/* 来場予約 */

.note_text {
    font-size: 1.2rem;
    line-height: 1.2rem;
}
.blockbg {
    background: #fff4ea;
    padding: 30px 40px;
    border-radius: 10px;
    margin-top: 30px;
}

ol.fs14 {
    margin: 10px 0px;
}
ol.fs14 li {
    list-style: none;
    font-size: 1.4rem;
    letter-spacing: .01em;
    line-height: 1.8;
    margin: 5px 15px;
    font-weight: 700;
}
@media screen and (max-width: 599px) {

.blockbg {
    padding: 10px;
    margin-top: 20px;
}

 .note_text {
    font-size: 1rem;
}
ol.fs14 li {
    font-size: 1.2rem;
    margin: 5px;
}
}

/* ブログ吹き出し */
.balloon5 {
  width: 100%;
  display: flex;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border-radius: 50%;
  margin: 0 auto;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.says p {
  margin: 0;
  padding: 0;
}


.iwanami-connect-wrapper {
    line-height: 1.6;
    color: #333;
}
.inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
}
.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}
.section-title::after {
    content: '';
    width: 60px;
    height: 3px;
    background: #0073aa; /* テーマカラーに合わせて調整 */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* ヒーローエリア */
.connect-hero {
    background: #f8f8f8; /* 背景画像を入れるとより良くなります */
    text-align: center;
}
.connect-hero h1 { font-size: 3rem; margin: 10px 0; }
.notice-box { border: 2px solid #d93025; padding: 15px; display: inline-block; margin-top: 20px; border-radius: 5px; color: #d93025; }

/* ボタン */
.hero-cta { margin-top: 30px; }
.btn-login, .btn-register {
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    margin: 10px;
    font-weight: bold;
    transition: 0.3s;
}
.btn-login { background: #333; color: #fff; }
.btn-register { background: #0073aa; color: #fff; }

/* クーポンカード */
.coupon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.coupon-card { border: 1px dashed #ccc; padding: 20px; text-align: center; background: #fff; }
.coupon-card.highlight { border: 2px solid #ffcc00; background: #fffdf0; }
.coupon-card .price { font-size: 2.5rem; font-weight: bold; color: #d93025; }
.coupon-card .price span { font-size: 1rem; }

/* お問い合わせ */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 20px; }
.shop-item { display: block; padding: 10px; background: #eee; text-decoration: none; color: #333; text-align: center; }

@media (max-width: 768px) {
    .connect-hero h1 { font-size: 2rem; }
}

/* connect-container 内限定スタイル */
.connect-container {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.8;
    scroll-behavior: smooth;
}
.connect-container .hero-section {
    position: relative;
    padding: 80px 20px;
    text-align: center;
    overflow: hidden;
}

/* PHPで指定した背景画像をモノクロ化 */
.connect-container .hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit; /* ← ここがポイント */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    z-index: 1;
}

/* 白の半透明オーバーレイ */
.connect-container .hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(255 229 206 / 80%);
    z-index: 2;
}

/* 中身を前面に */
.connect-container .hero-section > * {
    position: relative;
    z-index: 3;
}

.connect-container .connect-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

.connect-container .text-center {
    text-align: center;
}

.connect-container .c-red {
    color: #f14f0f;
    font-weight: bold;
}

/* ヒーローエリア */
.connect-container .hero-section {
    padding: 60px 20px;
}

.connect-container .hero-title {
    font-size: 2.5rem;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}

.connect-container .hero-logo {
    width: 300px;
    height: auto;
    margin-bottom: 30px;
}

.connect-container .hero-subtitle {
    font-size: 1.8rem;
    font-weight: bold;
}

.connect-container .important-notice {
    background: #fff;
    border: 2px solid #f14f0f;
    padding: 20px;
    display: inline-block;
    border-radius: 8px;
    margin-bottom: 50px;
}

/* ボタンデザイン */
.connect-container .btn-wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.connect-container .c-btn {
    display: inline-block;
    padding: 18px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    min-width: 280px;
    text-align: center;
}
/* .connect-container 内のボタンに矢印画像を追加 */
.connect-container .c-btn {
    position: relative; /* 擬似要素を絶対位置で配置するため必要 */
}

.connect-container .c-btn::after {
    position: absolute;
    right: 20px;      /* ボタン右端からの余白 */
    top: 50%;         /* 垂直中央 */
    transform: translateY(-50%); /* 垂直中央に調整 */
    content: "";
    display: block;
    background-image: url(../assets/img/icon/icon-arrow-right.png); /* 矢印画像 */
    width: 10px;      /* 画像の幅 */
    height: 9px;      /* 画像の高さ */
    background-size: contain;
    background-repeat: no-repeat;
}
.connect-container p.text-center.shop-list-txt {
    font-size: 1.5rem;
    font-weight: bold;
}
.connect-container .btn-main {
    background: #d8873d;
    color: #fff !important;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.3);
}

.connect-container .btn-main:hover {
    opacity: 0.8;
}

.connect-container .btn-sub {
    background: #703300;
    color: #fff !important;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.3);
}

.connect-container .btn-sub:hover {
    opacity: 0.8;
}

/* セクションタイトル */
.connect-inner .feature-list {
    display: flex;
    flex-wrap: wrap; /* 折り返しを許可 */
    gap: 10px;
    background-color: #f7f0db;
    border-radius: 15px;
    padding: 30px;
    justify-content: space-between;
}

.connect-inner .feature-list p.feature-note {
    width: 100%;
    text-align: right;
    font-size: 1.2rem;
    grid-column: 1 / -1;
    margin-top: 10px;
}

.connect-inner .feature-item {
    flex: 1 1 calc(25% - 30px); /* 4列表示、隙間を引く */
    box-sizing: border-box;
    text-align: center;
}
/* タブレットサイズ（例：768px以下）で2列に */
@media screen and (max-width: 768px) {
    .connect-inner .feature-item {
        flex: 1 1 calc(50% - 15px); /* 2列表示、隙間を半分に */
    }
}

/* スマホサイズ（例：480px以下）で1列に */
@media screen and (max-width: 480px) {
    .connect-inner .feature-item {
        flex: 1 1 100%; /* 1列表示 */
    }
}
.connect-inner .feature-item h3 {
    color: #f14f0f;
    margin-bottom: 10px;
    white-space: nowrap;
}

.connect-inner .feature-icon {
    display: block;
    width: 90px;
    height: auto;
    margin: 15px auto;
}

.connect-inner .feature-item p {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: bold;
}


.connect-container .section-title {
    font-size: 2rem;
    text-align: center;
    margin: 60px 0 40px;
    position: relative;
    padding-bottom: 15px;
}

.connect-container .section-title::after {
    content: '';
    width: 50px;
    height: 4px;
    background: #f14f0f;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* クーポンエリア */
.connect-container .coupon-info {
    background: #fffdee;
    padding: 50px;
    border-radius: 15px;
    font-weight: bold;
    box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 480px) {
.connect-container .coupon-info {
    padding: 30px;
}
}
.connect-container .coupon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.connect-container .coupon-list li {
    border-bottom: 1px dashed #f14f0f;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.connect-container .coupon-value {
    color: #f14f0f;
    font-size: 2rem;
    font-weight: bold;
    white-space: nowrap;
}
@media screen and (max-width: 480px) {
.connect-container .coupon-value {
    font-size: 1.8rem;
}
}
/* 会員登録ステップ分岐 */
.connect-container .registration-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}
.connect-container .reg-card1 {
    background: #fff;
    border: 2px solid #703300;
    border-radius: 15px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.connect-container .reg-card1 h3 {
    background: #703300;
    color: #fff;
    margin: -30px -30px 20px;
    padding: 15px;
    text-align: center;
    border-radius: 12px 12px 0 0;
    font-size: 1.8rem;
}
.connect-container .reg-card {
    background: #fff;
    border: 2px solid #d8873d;
    border-radius: 15px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.connect-container .reg-card h3 {
    background: #d8873d;
    color: #fff;
    margin: -30px -30px 20px;
    padding: 15px;
    text-align: center;
    border-radius: 12px 12px 0 0;
    font-size: 1.8rem;
}

.connect-container .reg-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.connect-container .reg-steps li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.connect-container .reg-steps li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: #d8873d;
}

.connect-container .reg-card .btn-sub {
    min-width: auto;
    width: 100%;
    margin-top: 20px;
}

.connect-container .mail-warning {
    border-left: 5px solid #ffcc00;
    padding: 20px;
    margin: 40px 20px;
    font-size: 1.2rem;
}
p.form-i-connect {
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
}
/* 店舗連絡先 */
.connect-container .shop-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.connect-container .shop-list a span {
    font-family: YakuHanJP, "DIN", sans-serif;
    font-size: 2.3rem;
    margin-left: 5px;
}
.connect-container .shop-btn {
background: #fff;
    border: 3px solid #ddd;
    padding: 15px;
    text-decoration: none;
    color: #333;
    text-align: center;
    border-radius: 50px;
    font-weight: bold;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .connect-container .registration-box {
        grid-template-columns: 1fr;
    }

    .connect-container .hero-title {
        font-size: 1.8rem;
    }
}


/* 全体コンテナ */
.flow .timeline-container {
    padding: 60px 0;
    overflow: hidden;
}

/* 垂直ラインのベース */
.flow .timeline-list {
    position: relative;
    padding: 0;
    list-style: none;
}

/* 中央の線（PC・スマホ共通で左側に配置） */
.flow .timeline-list::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    background: #eb6d00; /* ブランドカラー */
}

/* 各ステップのラップ */
.flow .timeline-item {
    position: relative;
    margin-bottom: 80px;
}

.flow .timeline-item:last-child {
    margin-bottom: 0;
}
.flow .step{
    position: absolute !important;
    left: 47.4%;
    top: -48px;
    width: 65px !important;
    height: 65px !important;
}

/* コンテンツ部分（イラスト＋テキスト） */
.flow .timeline-content {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 25px;
display: flex;
    flex-wrap: wrap; /* 子要素を折り返せるようにする */
    align-items: flex-start; /* 横並び要素の頭を揃える */
    gap: 30px; /* 画像とテキストの間隔 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 以前のイラストを活用する枠 */
.flow .timeline-img {
flex: 0 0 40%; /* 画像の幅（お好みで調整） */
    max-width: 300px;
}

.flow .timeline-img img {
width: 100%;
    height: auto;
    border-radius: 4px;
}
/* タイトルを最上部に配置 */
/* timeline-txtに包まれているh3をターゲットにします */
.flow .timeline-content > .timeline-txt:first-child {
    flex: 0 0 100%; /* 幅100%を占有させて強制改行 */
    margin-bottom: 10px; /* 画像・本文との余白 */
}
/* テキストエリア */

.flow .timeline-txt h3 {
    color: #333;
    margin: 15px;
    padding-bottom: 10px;
    text-align: center;
}
.flow .timeline-txt h3 span.line {
    border-bottom: 1px solid #ec6d00; /* 線の太さと色 */
    padding-bottom: 8px;
    font-size: 2.3rem;  
}
.flow .timeline-txt p {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.8;
    color: #555;
}
/* サブテキスト */
.flow .sub-txt {
    margin-bottom: 15px;
    border: 1px solid #ed6d00;
    border-radius: 24px;
    padding: 10px 15px;
    display: inline-block;
    color: #ed6d00 !important;
}

/* 強調文字 */
.flow .timeline-txt strong {
    font-weight: bold;
    background: linear-gradient(transparent 70%, #ffceaa 70%);
}
/* POINTボックス */
/* 全体のコンテナ */
.flow .flow-point {
    background-color: #f9faf7; /* 非常に薄い緑（目に優しい背景色） */
    border-left: 6px solid #4a6741; /* 左端の太いアクセントライン */
    padding: 24px 30px;
    margin: 25px 0;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04); /* 柔らかな影 */
}

/* タイトル部分：POINT — この場で分かること */
.flow .flow-point .point-title {
    color: #333;
    font-weight: bold;
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    letter-spacing: 0.02em;
}

/* 「POINT」という文字だけを緑のバッジ風にする */
.flow .flow-point .point-title::before {
    content: "POINT";
    font-size: 1.3rem;
    font-family: YakuHanJP, "DIN", sans-serif;
    background: #4a6741;
    color: #fff;
    padding: 2px 8px;
    border-radius: 2px;
    margin-right: 12px;
    vertical-align: middle;
}

/* リスト(ul)の余白リセット */
.flow .flow-point ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* リスト項目(li)ごとの装飾 */
.flow .flow-point ul li {
    position: relative;
    padding: 12px 0 12px 28px;
    border-top: 1px solid #e0e4dc; /* 項目間の区切り線 */
    line-height: 1.7rem;
}
/* 最初の項目の上線は不要なので消去 */
.flow .flow-point ul li:first-child {
    border-top: none;
    padding-top: 5px;
}

/* リスト左側のチェックマーク */
.flow .flow-point ul li::before {
    content: '✓';
    position: absolute;
    left: 2px;
    top: 12px; /* paddingと同じ位置に調整 */
    color: #4a6741;
    font-weight: bold;
    font-size: 1.5rem;
}

/* 最後の項目の下余白を調整 */
.flow .flow-point ul li:last-child {
    padding-bottom: 0;
}



/* 注釈メッセージ */
.flow .flow-note {
    background-color: #e8f0e5;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* STEP 03：比較ボックス（フレックス） */
.flow .flow-flex-box {
    display: flex;
    gap: 20px;
    margin: 25px 0;
}

.flow .flex-item {
    flex: 1;
    background-color: #f9f8f4;
    padding: 20px;
    border-radius: 8px;
}
.flow .flex-item ul li {
    font-size: 1.2rem;
    position: relative;
    padding-left: 1.5em; /* アイコン分の余白 */
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.flow .flex-item ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background-color: rgb(58 96 36);
    border-radius: 50%; 
}
.flow .box-title {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #3a6024;
    display: block;
}

@media (min-width: 768px) {

    .flow .timeline-content {
        gap: 20px;
    }

    .flow .timeline-txt {
        flex: 1;
    }
}

/* フロー */


.flow .flow-intro {
    /* 背景画像の設定 */
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    background-attachment: fixed;

    /* コンテンツの調整 */
    padding: 80px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
    }
.flow .flow-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(225 225 225 / 90%);
    z-index: 2;
}

.flow .flow-intro__title {
    font-size: 3rem;
    font-weight: bold;
    color: #2e4b21;
    line-height: 1.4;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.flow .flow-intro__text {
    font-size: 1.8rem;
    color: #2e4b21;
    letter-spacing: 0em;
    font-weight: bold;
    line-height: 1.77;
}

/* 不安カードのグリッド */
.flow .flow-worry-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 50px 0;
}

.flow .worry-card {
    background: #fdfaf5;
    border: 1px solid #628c4a; /* 画像のグリーン */
    border-radius: 8px;
    padding: 30px 20px;
    flex: 1;
    max-width: 340px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.flow .worry-icon {
    font-size: 5rem;
    margin-bottom: 15px;
}

.flow .worry-card p {
    font-size: 1.7rem;
    line-height: 1.5;
    color: #2e4b21;
    font-weight: bold;
    white-space: nowrap;
}


.flow .flow-message-banner strong {
    font-size: 1.2rem;
    color: #fff;
    text-decoration: underline;
}

/* セクションタイトル */
.flow .flow-main-title {
    font-size: 2.4rem !important;
    color: #2e4b21;
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.flow .flow-main-sub {
    font-size: 1.5rem;
    font-weight: bold;
    color: #666;
    text-align: center;
    margin-bottom: 60px;
}
.flow .sp-br{
    display: none;
}

/* スマホ対応 */
@media (max-width: 1024px) {
.flow .timeline-list::before {
    left: 50.7%
}
}
@media (max-width: 970px) {
.flow .timeline-list::before {
    left: 51.1%
}
}
@media (max-width: 767px) {
.flow .sub-txt {
    text-align: center;
    width: 100%;
}
    .flow .flow-worry-grid {
        flex-direction: column;
        align-items: center;
    }
    .flow .worry-card {
        width: 100%;
        max-width: none;
    }
    .flow .flow-intro-header {
        font-size: 1.5rem;
    }
    .flow .timeline-img {
    flex: auto;
    max-width: 80%;
    margin: 0 auto;
}
.flow .timeline-list::before {
    left: 51.9%
}
.flow .flow-point ul li {
    font-size: 1.4rem;
}
}
@media (max-width: 600px) {
.flow .timeline-list::before {
    left: 52.5%
}
}
@media (max-width: 425px) {
.flow .timeline-content {
    padding: 25px 10px;
}
    .flow .timeline-img {
    max-width: 100%;
}
.flow .timeline-txt h3 span.line {
    font-size: 1.8rem;
}
.flow .timeline-content {
    gap: 10px;
}
.flow .timeline-list::before {
    left: 53.5%;
}
.flow .step {
    left: 46%;
}
.flow .flow-point ul li {
    font-size: 1.2rem;
}
.flow .flow-intro__text {
    font-size: 1.6rem;
}
.flow .flow-intro__title {
    font-size: 2.2rem;
}
.flow .sp-br {
        display: inline;
    }
}
/* --- 全体・共通設定 --- */

.flow .dib {
    display: inline-block;
    font-weight: inherit;
    font-style: inherit;
    font-size: inherit;
    text-align: inherit;
    line-height: 3;
}
.flow .flow-overview {
    background: #fdfaf5;
    padding: 60px 0;
    overflow: hidden;
    font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS P明朝", serif;
}
.flow .flow-main-note {
    font-size: 1.2rem;
    display: block;
    text-align: center;
    letter-spacing: .5em;
    font-family: YakuHanJP, "DIN", sans-serif;
    margin-bottom: 30px;
    color: #eb6d00;
}
.flow .content-width {
    margin: 0 auto;
    width: 95%;
    position: relative; /* z-indexを有効にするために必須 */
    z-index: 3;        /* ::afterの「2」よりも大きい値を指定 */
    
    /* 必要であれば横幅の制限を追加 */
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 上部：パターンABエリア（横並び） --- */
.flow .flow-top-patterns {
    width: 100%;
    max-width: 700px;
    margin: 0 auto 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flow .flow-patterns-list {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
}

.flow .flow-pattern-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    flex: 1;
    max-width: 320px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    padding: 10px;
}

.flow .pattern-header {
    background: #628c4a;
    color: #fff;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}

.flow .pattern-txt { padding: 15px; }
.flow .pattern-txt h3 { font-size: 1.6rem; color: #2e4b21; margin-bottom: 10px; font-weight: bold; text-align: center; }
.flow .pattern-txt ul { font-size: 11px; color: #666; list-style: none; padding: 0; }
.flow .pattern-txt ul li { position: relative; padding-left: 12px; margin-bottom: 4px; line-height: 1.4; }
.flow .pattern-txt ul li::before { content: '●'; position: absolute; left: 0; color: #628c4a; font-size: 8px; top: 1px; }

/* 合流の▼矢印 */
.flow .flow-join-arrow-v {
    color: #eb6d00;
    font-size: 24px;
    margin-top: 15px;
}

/* --- 下部：共通フローエリア --- */
/* --- 共通フローエリア設定 --- */
.flow .flow-common-section {
    background: #fff;
    border-radius: 12px;
    padding: 40px 15px;
    width: 100%;
    border: 1px solid #efeae0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.flow .common-label {
    background: #703300;
    color: #fff;
    padding: 5px 25px;
    border-radius: 20px;
    font-size: 12px;
    text-align: center;
    margin: 0 auto 40px;
    display: table;
}

.flow .common-steps-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative; /* ラインの基準 */
    left: -10px;
}

.flow .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
}

/* ステップをつなぐオレンジのライン */
.flow .step-line {
    position: absolute;
    top: 25px; /* 42pxのSTEP円のちょうど真ん中 */
    left: 50%; /* 自要素の真ん中から */
    width: 100%; /* 次の要素の真ん中まで伸ばす */
    height: 2px;
    background: #eb6d00; /* ブランドカラーのオレンジ */
    z-index: 1;
}

/* ステップ番号（オレンジの丸） */
.flow .timeline-step {
    width: 50px;
    height: 50px;
    background: #eb6d00;
    color: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2; /* ラインより上に表示 */
    margin-bottom: 15px;
    box-shadow: 0 3px 6px rgb(70 64 59 / 30%);
}

.flow .step-label {
    font-family: YakuHanJP, "DIN", sans-serif;
    font-size: 1rem;
    line-height: 1;
    margin-bottom: 2px;
    color: #fff;
}

.flow .step-num {
    font-family: YakuHanJP, "DIN", sans-serif;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    color: #fff;
}

/* 縦書きテキスト */
.flow .step-text-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    height: 150px;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: #2e4b21;
}

/* 右向き矢印（▼）の配置調整 */
.flow .step-next-v {
    color: #eb6d00;
    font-size: 14px;
    position: absolute;
    right: -10px;
    top: 65px;
    transform: rotate(-90deg); /* 右に向ける */
    font-weight: bold;
    z-index: 2;
}

/* --- PC/スマホ 共通スクロール設定 --- */
.flow .flow-scroll-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 900px;
}

@media (min-width: 1000px) {
    .flow .flow-scroll-container {
        min-width: 100%;
    }
}
@media (min-width: 1000px) {
    .flow .flow-scroll-wrapper { overflow: visible; }
    .flow .flow-scroll-container { min-width: 100%; }
}

/* --- 家づくりの流れ（.flow）セクション全体のスタイル --- */

/* 1. イントロダクション（不安解消エリア） */
.flow .flow-intro-section {
    padding: 80px 0 40px;
    text-align: center;
    background-color: #fff;
}

.flow .flow-intro-header {
    font-size: 2rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 20px;
}

.flow .flow-intro-lead {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 40px;
}

.flow .flow-worry-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}


.flow .flow-message-banner {
    background: linear-gradient(90deg, #4a6d36, #628c4a);
    color: #fff;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    line-height: 1.8;
    text-align: center;
    font-weight: bold;
}

/* 2. 各ステップ内の共通パーツ（POINT/NOTE/BOX） */

/* ポイントリスト（チェックマーク付き） */
.flow .flow-point {
    background: #fdfaf5;
    padding: 25px;
    border-radius: 8px;
    margin: 20px 0;
}

.flow .point-title {
    color: #628c4a;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 15px;
    border-bottom: 1px solid #efeae0;
    padding-bottom: 10px;
}

.flow .flow-point ul {
    list-style: none;
    padding: 0;
}


/* 補足メッセージ（電球アイコン） */
.flow .flow-note {
    background: #e6eee0;
    padding: 15px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    color: #2e4b21;
    display: inline-block;
    margin-top: 15px;
}

/* 比較用フレックスボックス（STEP 03/05） */
.flow .flow-flex-box {
    display: flex;
    gap: 15px;
    margin: 20px 0;
}

.flow .flex-item {
    flex: 1;
    background: #fff;
    border: 1px solid #efeae0;
    border-radius: 8px;
    padding: 20px;
}

.flow .box-title {
    font-weight: bold;
    color: #2e4b21;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

/* 3. FAQセクション */

.flow .flow-faq {
    padding: 80px 0;
}

.flow .faq-main-title {
    text-align: center;
    font-size: 2.4rem;
    color: #2e4b21;
    margin-bottom: 40px;
}

.flow .faq-container {
    max-width: 850px;
    margin: 0 auto;
}

.flow .faq-item {
    background: #fff;
    margin-bottom: 15px;
    border: 1px solid #efeae0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.flow .faq-question {
    width: 100%;
    padding: 20px 25px;
    text-align: left;
    background: none;
    border: none;
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s;
}

.flow .faq-icon-q {
    background: #2e4b21;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.flow .faq-answer {
    padding: 0 25px 25px 68px;
    line-height: 1.8;
    color: #555;
    font-size: 0.95rem;
}

.flow .faq-icon-a {
    color: #628c4a;
    font-weight: bold;
    margin-right: 10px;
}

/* 4. レスポンシブ対応 */

@media (max-width: 767px) {
    .flow .flow-worry-grid,
    .flow .flow-flex-box {
        flex-direction: column;
    }
    
    .flow .worry-card,
    .flow .flex-item {
        max-width: none;
        width: 100%;
    }

    .flow .faq-answer {
        padding: 0 15px 15px 15px;
    }
    .flow .flow-faq {
    padding: 0;
}
.flow .faq-question {
    font-size: 1.4rem;
}

}

/* 全体共通：フッター固定のベース */
.flow #menu.content-visitor.sticky-footer.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 15px 10px; /* PC向けに少し余白を広げました */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/* ボタンを並べるコンテナ */
.flow #menu.content-visitor-btn-wrapper {
    width: 600px;
    display: flex;
    gap: 15px;      /* ボタン同士の距離 */
    margin: 0 auto;  /* 中央寄せ */
    justify-content: center;
}

/* ボタン共通設定 */
.flow .button__visit {
    flex: 1;
    text-align: center;
    border-radius: 50px; /* PCでは角丸を強めにするとボタンらしく見えます */
    transition: transform 0.2s ease;
}

.flow .button__visit:hover {
    transform: translateY(-3px); /* ホバー時に少し浮く演出 */
}

.flow .button__visit a {
    text-decoration: none;
    padding: 15px 10px;
    color: #fff;
    text-shadow: 
        1px  1px 2px rgba(0, 0, 0, 0.3), /* 右下 */
       -1px  1px 2px rgba(0, 0, 0, 0.3), /* 左下 */
        1px -1px 2px rgba(0, 0, 0, 0.3), /* 右上 */
       -1px -1px 2px rgba(0, 0, 0, 0.3); /* 左上 */
}

/* テキスト装飾 */
.flow .button__visit .text {
    margin: 0;
    font-weight: bold;
    font-size: 18px; /* PC向けに少し大きく */
    line-height: 1.2;
    color: #fff;
}

.flow .button__visit .text span {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 3px;
    opacity: 0.9;
    color: #fff;
}

/* 色の設定 */

.flow .button__visit.button__visit--event a {
    width: 100%;
    background: linear-gradient(90deg, #c17cc8, #676bb0);
    border-radius: 50px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    animation: float-bob 2s ease-in-out infinite;
}
.flow .button__visit.button__visit--visit a {
    width: 100%;
    background: linear-gradient(90deg, #ff4500, #ff8c00);
    border-radius: 50px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    animation: float-bob 2s ease-in-out infinite;
}
/* スマホ用の微調整 (991px以下) */
@media (max-width: 991px) {
    .flow .content-visitor.sticky-footer {
        padding: 10px;
    }
    .flow .content-visitor-btn-wrapper {
        gap: 8px;
    }
    .flow .button__visit .text {
        font-size: 14px;
    }
    .flow .button__visit .text span {
        font-size: 10px;
    }
}
.add-single-wh {
    background-color: #fff;
    border-radius: 14px;
    padding: 20px;
    margin: 0 auto;
}
.mxw {
    max-width: 600px;
}

.page-visual__title.i-times {
    width: 400px;
    margin-top: 30px;
}
@media screen and (max-width: 599px){
.page-visual__title.i-times {
    width: 300px;
    margin-top: 10px;
}
}

/* キッズデザイン */
.planning .sec01_v2 .sec01_v2-container .sec01_v2-figure .sec01_v2-figure-txt dl:nth-child(1) dt {
    background-color: #52b98d;
}
.planning .sec01_v2 .sec01_v2-container .sec01_v2-figure .sec01_v2-figure-txt dl:nth-child(1) dd h3 {
    color: #52b98d;
}
.planning .sec01_v2 .sec01_v2-container .sec01_v2-figure .sec01_v2-figure-txt dl:nth-child(2) dt {
    background-color: #52b98d;
}
.planning .sec01_v2 .sec01_v2-container .sec01_v2-figure .sec01_v2-figure-txt dl:nth-child(2) dd h3 {
    color: #52b98d;
}
.planning .sec01_v2 .sec01_v2-container .sec01_v2-figure .sec01_v2-figure-txt dl:nth-child(3) dt {
    background-color: #52b98d;
}
.planning .sec01_v2 .sec01_v2-container .sec01_v2-figure .sec01_v2-figure-txt dl:nth-child(3) dd h3 {
    color: #52b98d;
}

/* リフォーム　リニューアル renew*/
.renew .sp-br{
    display: none;
}
/* 全体共通：フッター固定のベース */
.renew #menu.content-visitor.sticky-footer.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 15px 10px; 
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/* ボタンを並べるコンテナ */
.renew #menu.content-visitor-btn-wrapper {
    width: 800px;
    display: flex;
    gap: 15px;  
    margin: 0 auto; 
    justify-content: center;
}

/* ボタンを並べるコンテナ */
.renew #menu.content-visitor-btn-wrapper {
    width: 800px;
    display: flex;
    gap: 15px;  
    margin: 0 auto; 
    justify-content: center;
}

/* ボタン共通設定 */
.renew .button__visit {
    flex: 1;
    text-align: center;
    border-radius: 50px; 
    transition: transform 0.2s ease;
}

.renew .button__visit:hover {
    transform: translateY(-3px); 
}

.renew .button__visit a {
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    padding: 15px 10px;
    color: #fff;
    text-shadow: 
        1px  1px 2px rgba(0, 0, 0, 0.3), /* 右下 */
       -1px  1px 2px rgba(0, 0, 0, 0.3), /* 左下 */
        1px -1px 2px rgba(0, 0, 0, 0.3), /* 右上 */
       -1px -1px 2px rgba(0, 0, 0, 0.3); /* 左上 */
}

/* テキスト装飾 */
.renew .button__visit .text {
    margin: 0;
    font-weight: bold;
    font-size: 18px; /* PC向けに少し大きく */
    line-height: 1.2;
    color: #fff;
}

.renew .button__visit .text span {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 3px;
    opacity: 0.9;
    color: #fff;
}

/* 色の設定 */
.renew .button__visit.button__visit--event a {
    width: 100%;
    background: linear-gradient(90deg, #3ba4c2, #1754c7);
    border-radius: 50px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    animation: float-bob 2s ease-in-out infinite;
}
.renew .button__visit.button__visit--visit a {
    width: 100%;
    background: linear-gradient(90deg, #1754c7, #d546a6);
    border-radius: 50px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    animation: float-bob 2s ease-in-out infinite;
}
.renew .button__visit.button__visit--consult a {
    width: 100%;
    background: linear-gradient(90deg, #d546a6, #3ba4c2);
    border-radius: 50px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    animation: float-bob 2s ease-in-out infinite;
}

/* スマホ用の微調整 (991px以下) */
@media (max-width: 991px) {
    .renew .content-visitor.sticky-footer {
        padding: 10px;
    }
    /* 991px以下でのコンテナの幅固定を解除し、画面幅に合わせる */
    .renew #menu.content-visitor-btn-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0 15px; /* 左右に少し余白を作る */
        box-sizing: border-box;
    }
    .renew .content-visitor-btn-wrapper {
        gap: 8px;
    }
    .renew .button__visit .text {
        font-size: 14px;
    }
    .renew .button__visit .text span {
        font-size: 10px;
    }
}

/* 【修正箇所】スマホ用2段構成設定 (767px以下) */
@media screen and (max-width: 767px) {
    .renew #menu.content-visitor-btn-wrapper {
        display: flex;
        flex-wrap: wrap; /* 折り返しを許可 */
        justify-content: space-between;
        gap: 10px;
    }

    /* 1段目に並べる2つのボタン（補助金・リフォーム） */
    .renew .button__visit.button__visit--visit,
    .renew .button__visit.button__visit--consult {
        flex: none; /* PC用の flex: 1 をリセット */
        width: calc(50% - 5px); /* 横幅を半分に */
        order: 1; /* 1段目に配置 */
    }

    /* 2段目の下に配置する1つのボタン（外壁・防蟻） */
    .renew .button__visit.button__visit--event {
        flex: none; /* PC用の flex: 1 をリセット */
        width: 100%; /* 横幅いっぱいに */
        order: 2; /* 2段目（下）に配置 */
    }
}
.renew .sec04 .example-item a {
    display: block;
    background-color: #6c6c6c;
}
.renew .sec02 h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 30px;
}
.renew .reform-title span {
    font-size: 1.4rem;
    display: block;
    text-align: center;
    color: #eb6d00;
    font-family: YakuHanJP, "DIN", sans-serif;
    letter-spacing: .5em;
    margin-bottom: 15px;
}
.renew .reform-intro {
    /* 背景画像の設定 */
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    background-attachment: fixed;

    /* コンテンツの調整 */
    padding: 120px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
    }
.renew .reform-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(253 253 253 / 62%);
    z-index: -1;
}

.renew .reform-intro__title {
    font-size: 3rem;
    font-weight: bold;
    color: #000;
    line-height: 2;
    margin-bottom: 70px;
    letter-spacing: -0.02em;
}

.renew .reform-intro__text {
    font-size: 1.8rem;
    color: #000;
    letter-spacing: 0em;
    font-weight: bold;
    line-height: 1.77;
    margin-bottom: 50px;
    text-shadow: 
        3px  3px 0 #fff,
       -3px  3px 0 #fff,
        3px -3px 0 #fff,
       -3px -3px 0 #fff,
        0px  3px 0 #fff,
        0px -3px 0 #fff,
        3px  0px 0 #fff,
       -3px  0px 0 #fff;
}
.renew h1 span.yellow.ttlsp {
    font-size: 1.8rem;
}
/* 3カラムのレイアウト調整 */

.renew .sec01-columns {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 40px;
}
.renew .sec01-column-item {
    flex: 1;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
}
.renew .sec01-column-item p {
    font-size: 1.6rem;
    line-height: 1.77;
    margin: 20px;
   } 
.renew .sec01-column-img h3 {
    color: #eb6d00;
    line-height: 1.77;
    margin: 20px 0 10px;
}


.renew .sec01-column-img img {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 980px) {

    .renew .reform-intro__title {
    font-size: 2.8rem;
    margin-bottom: 20px;
    line-height: 1.6;
}
    .renew .reform-intro__text {
    font-size: 1.3rem;
}
.renew .reform-intro {
    padding: 80px 20px;
}
.renew .sec02 h2 {
    font-size: 2rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.renew .sec01-column-img h3{
    font-size: 1.6rem;

}
.renew .sec01-column-item p{
    font-size: 1.2rem;
    margin: 10px;
}
.renew h1 span.yellow.ttlsp {
    font-size: 1.5rem;
}

   }
/* モバイル対応（スマホの時は1カラムにする） */
@media (max-width: 767px) {
    .renew .sp-br{
    display: inline;
}
    .renew .sec01-columns {
        flex-direction: column;
        gap: 40px;
    }
    .renew .reform-intro__title {
    font-size: 2rem;
}
    .renew #menu.content-visitor-btn-wrapper{
    width: 100%;
}
.renew .reform-intro {
    padding: 50px 10px;
}
.renew .sec03 .reform-title p {
    font-size: 1.6rem !important;
}
}

/* 初期状態：すべて透明で、左に20pxズレた状態（表示されるまで隠す） */
.sec01-fade {
    opacity: 0;
    transform: translateX(-20px);
}

/* 
  JavaScriptによる「opacity: 1」の強制上書きに対し、
  アニメーション（transition）が完了するまでは遅延（delay）を絶対優先させます。
*/

/* 1つ目：遅延なしで即座に0.6秒かけてフェードイン */
.scroll-fade.delay-1 {
    transition: opacity 0.6s ease 0s, transform 0.6s ease 0s !important;
}

/* 2つ目：0.3秒待ってから、0.6秒かけてフェードイン */
.scroll-fade.delay-2 {
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s !important;
}

/* 3つ目：0.6秒待ってから、0.6秒かけてフェードイン */
.scroll-fade.delay-3 {
    transition: opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s !important;
}


/* --- 【お好みで】左からスライドインさせる動きも加える場合 --- */
/* 初期状態（まだスクロールが到達していない時）に左に少しずらしておきます */
.sec01-column-item.scroll-fade {
    transform: translateX(-20px);
}
/* JSが反応して動き出したら、本来の位置（0）に戻るようにします */
.sec01-column-item.scroll-fade[style*="opacity: 1"] {
    transform: translateX(0) !important;
}

.renew .sec04 .sec04-container
 {
    padding-left: unset !important;
    width: 80%;
    margin: 0 auto;
}
@media (max-width: 1024px) {
.renew .sec04 .sec04-container
 {
    width: 100%;
}
}

.renew .example-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2カラム */
    gap: 20px; /* アイテム間の隙間（スライダーの spaceBetween: 20 に相当） */
    width: 100%;
}

/* 各アイテムのスタイル（必要に応じて調整してください） */
.renew .example-grid-item {
    width: 100%;
    box-sizing: border-box;
}

/* レスポンシブ：画面幅が狭い時（例: 600px未満）に1カラムにしたい場合 */
@media (max-width: 980px) {
    .renew .example-grid {
        gap: 15px;
        padding: 0 15px 50px;
    }
}
/* --- セクション全体の調整 --- */
.renew .sec02 {
    padding: 60px 0;
    text-align: center;
}

.renew .sec02-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #333;
}

/* --- 白い背景とグレーの角丸枠線 --- */
.renew .sec02-box {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 40px 50px;
    max-width: 800px;
    margin: 0 auto;
    text-align: left; /* 枠内のテキストは左寄せ */
}

/* --- リストのスタイル --- */
.renew .sec02-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.renew .sec02-list li {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    font-size: 18px;
    color: #333;
    line-height: 1.6;
}

.renew .sec02-list li:last-child {
    margin-bottom: 0;
}

/* --- 青いチェックマークアイコンの再現（CSS疑似要素） --- */
.renew .sec02-list .check-icon {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    background: #005bac; /* 画像の青色 */
    border-radius: 50%;
    margin-right: 20px;
    flex-shrink: 0;
}

/* 白いチェック線の部分 */
.renew .sec02-list .check-icon::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 5px;
    width: 7px;
    height: 13px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}


/* ==========================================================================
   sec03: 2つの無料診断（2カラムボックス）
   ========================================================================== */
/* 2カラムのレイアウト */
.renew .sec03 .reform-title p {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 20px;
}
.renew .sec03-columns {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 40px;
}
.renew .sec03-column-item {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}
/* 画像エリア */
.renew .sec03-column-img img {
    width: 100%;
    height: auto;
    display: block;
}
/* テキストエリア */
.renew .sec03-column-txt {
    padding: 30px;
    text-align: left;
}
.renew .sec03-column-txt h3 {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}
.renew .sec03-column-txt p {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

/* アニメーション順次表示用のディレイ（JavaScript強制上書き対策） */
.renew .sec03 .scroll-fade.delay-1 {
    transition: opacity 0.6s ease 0s, transform 0.6s ease 0s !important;
}
.renew .sec03 .scroll-fade.delay-2 {
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s !important;
}

/* ==========================================================================
   sec05: その他の注目のリフォームメニュー
   ========================================================================== */
.renew .sec05-menu-container {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* ボックス同士の縦の隙間 */
}

/* 薄いグレーの角丸ボックス（PC用） */
.renew .sec05-menu-box {
    background: #fff; /* 画像を再現した薄いグレー背景 */
    border-radius: 12px; /* 角丸 */
    padding: 35px 40px;
    text-align: center;
}

.renew .sec05-menu-box h3 {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.renew .sec05-menu-box p {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

/* アニメーション順次表示用のディレイ（JavaScript強制上書き対策） */
.renew .sec05 .scroll-fade.delay-1 {
    transition: opacity 0.6s ease 0s, transform 0.6s ease 0s !important;
}
.renew .sec05 .scroll-fade.delay-2 {
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s !important;
}

/* 全体のセクション背景 */
.renew.sec07 {
    background-color: #f9f9f9;
    padding: 60px 0;
    overflow: hidden; /* はみ出しによる画面全体の横揺れ防止 */
}

/* 横スクロールさせるための外枠（コンテナ） */
.renew .flow-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 30px 20px; /* バッジの影や余白が切れないように調整 */
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかに */
}

/* スクロールバーのデザイン */
.renew .flow-scroll-container::-webkit-scrollbar {
    height: 8px;
}
.renew .flow-scroll-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.renew .flow-scroll-container::-webkit-scrollbar-track {
    background: #eaeaea;
    border-radius: 4px;
}

/* 一列に並べるためのFlexコンテナ */
.renew .flow-wrapper {
    display: flex;
    gap: 15px;
    width: max-content;
    padding-right: 40px;
    position: relative;
}

/* 各ステップのアイテム */
.renew .flow-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    position: relative;
}

/* つなぎの横線（最後のアイテム以外に適用） */
.renew .flow-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 35px;
    left: calc(50% + 35px);
    width: calc(100% + 40px - 70px);
    height: 2px;
    background-color: #eb6d00; /* 青い線の色 */
    z-index: 1;
}

/* ●のバッジデザイン */
.renew .flow-step-badge {
    width: 70px;
    height: 70px;
    background-color: #eb6d00; /* 青背景 */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 軽い浮遊感 */
    z-index: 2; /* つなぎ線より上に配置 */
    margin-bottom: 20px;
}

.renew .flow-step-badge span {
    font-family: YakuHanJP, "DIN", sans-serif;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.2;
    color: #fff;
}

.renew .flow-step-badge strong {
    font-family: YakuHanJP, "DIN", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

/* 白背景のテキストカード */
.renew .flow-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 18px 10px 10px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    flex-grow: 1; /* 高さの統一用 */
    display: flex;
    flex-direction: column;
}
.renew .flow-card img {
    margin-bottom: 15px;
}

/* カード内のタイトル */
.renew .flow-card h3 {
    font-size: 1.8rem;
    color: #eb6d00;
    margin: 0 0 12px 0;
    font-weight: bold;
    text-align: center;
}

/* カード内の文章 */
.renew .flow-card p {
    font-size: 14px;
    color: #333333;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}
/* --- レスポンシブ対応（スマホ用：1カラム化） --- */
@media (max-width: 767px) {
        .renew .sec02-title {
        font-size: 22px;
        margin-bottom: 30px;
    }
    .renew .sec02-box {
        padding: 30px 20px;
        margin: 0 15px;
    }
    .renew .sec02-list li {
        font-size: 15px;
        align-items: flex-start; /* 長文になってもアイコンが上に固定されるように */
        margin-bottom: 20px;
    }
    .renew .sec02-list .check-icon {
        margin-top: 2px;
        width: 22px;
        height: 22px;
        margin-right: 12px;
    }
    .renew .sec02-list .check-icon::after {
        left: 8px;
        top: 4px;
        width: 5px;
        height: 10px;
        border-width: 0 2px 2px 0;
    }
    .renew .sec03-columns {
        gap: 15px;
        margin-top: 30px;
    }
    .renew .sec03-column-txt {
        padding: 20px;
    }
    .renew .sec03-column-txt h3 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }
    .renew .sec03-column-txt p {
        font-size: 14px;
    }
        .renew .sec05-menu-container {
        margin-top: 30px;
        gap: 15px;
        padding: 0 15px; /* スマホ時の左右の余白詰め */
    }
    
    .renew .sec05-menu-box {
        padding: 25px 20px; /* スマホ時は少しタイトに */
        text-align: left; /* スマホで見やすいよう左寄せに切り替え可能（お好みで中央寄せに） */
    }

    .renew .sec05-menu-box h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .renew .sec05-menu-box p {
        font-size: 14px;
        line-height: 1.6;
    }
    
    /* スマホ時に適切な位置で改行を無効化するためのクラス */
    .renew .d-none-sm {
        display: none;
    }
}
/* トップ・カレンダー表示 */
/* 開催期間・時間のコンテナ */
.top .event-ajax_time {
    display: flex;
    flex-direction: column; /* 横並びにしたい場合は row に変更 */
    gap: 1px;               /* 期間と時間の間の隙間 */
}
.top .event-ajax_time span {
    font-size: 1.2rem !important; 
    color: #666 !important;
}
/* 期間と時間それぞれの行の設定 */
.top .event-ajax_time .time-date,
.top .event-ajax_time .time-hour {
    display: inline-flex;
    align-items: center;
    gap: 6px;               /* アイコンとテキストの間の隙間 */
}

/* マテリアルアイコン（SVG）の共通スタイル */
.top .event-ajax_time .material-icon {
    width: 14px;            /* アイコンのサイズ（文字の大きさに合わせて調整） */
    height: 14px;
    fill: currentColor;     /* 上のcolorで指定した色（#666）が自動で適用されます */
    flex-shrink: 0;
}
/* アイコン用のフォント指定を強制する */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   リスト全体のコンテナ (ol.info) への指定
   ========================================================================== */

/* リスト全体のコンテナ */
.event ol.info {
    display: flex;
    flex-wrap: wrap;        /* 横並び時に溢れたら折り返す設定 */
    gap: 6px 15px;          /* 縦の隙間は6px、横の隙間は15px */
    padding: 0;
    margin: 0;
    list-style: none;       
    font-size: 13px;        
    color: #444;            
}
/* 各行（リスト項目）のレイアウト */
.event ol.info li {
    display: flex;
    align-items: flex-start; 
    gap: 6px;                
    line-height: 1.4;
}

/* 開催場所（info-place）だけは常に必ず改行して下の行にする */
.event ol.info li.info-place {
    flex-basis: 100%;       
}

/* マテリアルアイコン（SVG）の共通設定 */
.event ol.info .material-icon {
    width: 15px;             
    height: 15px;
    margin-top: 2px;         
    fill: currentColor;      
    flex-shrink: 0;          
}

/* テキスト部分の折り返し対応 */
.event ol.info li span {
    flex-grow: 1;
}
.archive .event ol.info li span {
    font-size: 1.2rem !important;
    flex-grow: 1;
}

/* ==========================================================================
   スマホ用の設定（画面幅 767px 以下）
   ========================================================================== */
@media screen and (max-width: 767px) {
    .event ol.info {
        flex-direction: column; /* スマホでは一列（縦並び）にする */
        gap: 6px;               /* 隙間を均一に */
    }
    .archive .event ol.info li span {
    font-size: 1rem !important;
}
}

/* ==========================================================================
   新ソートシステム：アンカーリンク対応版（.event接頭辞 / !importantなし）
   ========================================================================== */


/* 1. 外側のベースコンテナ（過去のガタつき余白を上書きして固定） */
.event .modelhouse_list_tab .page_tab_search {
    padding: 20px 0px !important;
}
.event .modelhouse_list_tab .page_tab_search .page_tab_search-wrap
 {
    width: 100% !important;
}

.event .custom-sort-container {
    position: relative;
    padding-top: 10px;       /* 上下の余白を44pxに完全固定 */
    padding-bottom: 20px;
    background-color: #f9f8f4; /* サイトを上品に彩るナチュラルベージュ */
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;      /* 一体感を出すためのマイルドな角丸 */
}

/* 2. 1段目：店舗タブエリア */
.event .custom-sort-container .page_tab_search {
    margin-bottom: 28px;
}

.event .custom-sort-container .store-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.event .custom-sort-container .store-tab-item {
    margin: 0;
    list-style: none;
}

/* 店舗ボタン（リンク）の初期状態 */
.event .custom-sort-container .store-tab-item a {
    display: block;
    padding: 10px 24px;
    background-color: #ffffff;
    color: #4a4a4a;
    text-decoration: none;
    border-radius: 30px;
    border: 1px solid #e0dddb;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    min-width: 110px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* 店舗ボタン：ホバー・アクティブ（選択中） */
.event .custom-sort-container .store-tab-item a:hover,
.event .custom-sort-container .store-tab-item a.active {
    background-color: #333333;
    color: #ffffff;
    border-color: #333333;
}


/* 3. 2段目：カテゴリーボタンエリア */
/* 親コンテナ */
.event .custom-sort-container .button__block.type-filter-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; 
    margin-top: 0;
}

.event .custom-sort-container .button__block.type-filter-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 0;
}

/* 1行目：カテゴリー群 */
.event .custom-sort-container .button__block.type-filter-text .category-filter-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    order: 1;
}

/* 2行目：カレンダー（常に下の行） */
.event .custom-sort-container .button__block.type-filter-text .calendar-anchor-block {
    width: 100%;
    display: flex;
    justify-content: center;
    order: 2;
}

/* カテゴリーボタンの初期状態 */
.event .custom-sort-container .page_tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background-color: #ffffff;
    color: #666666;
    text-decoration: none;
    border: 1px solid #e0dddb;
    border-radius: 4px; 
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* カテゴリーボタン：ホバー・アクティブ（選択中） */
.event .custom-sort-container .page_tab-button:hover,
.event .custom-sort-container .page_tab-button.active {
    background-color: #c5a880; 
    color: #ffffff;
    border-color: #c5a880;
}
/* ★ カレンダーボタンのみオレンジ背景にする設定 */
.event .custom-sort-container .button__block.type-filter-text .calendar-anchor-block .button-calendar {
    background-color: #E4892A !important; 
    color: #ffffff !important;
    border-radius: 30px;  
    border: none;
    margin: 18px 0;
    transition: background-color 0.3s;
}

/* カレンダーボタンのホバー（マウスを乗せたとき）の設定 */
.event .custom-sort-container .button__block.type-filter-text .calendar-anchor-block .button-calendar:hover {
    background-color: #E4892A !important; 
    color: #ffffff !important;
}
.calendar .container-calendar .container-calendar_left h3 {
    background-color: #E4892A !important;
}

@media (max-width: 768px) {
    .event .custom-sort-container {
        padding: 24px 12px;
        margin: 20px auto;
    }
    .event .custom-sort-container {
    padding-bottom: 10px;
}
    .event .custom-sort-container .page_tab_search {
    margin-bottom: 10px;
    padding: 10px 0px !important;
    }
    .event .custom-sort-container .store-tabs {
        gap: 8px;
    }
    .event .custom-sort-container .store-tab-item {
        flex: 1 1 calc(50% - 4px); 
    }
    .event .custom-sort-container .store-tab-item a {
        padding: 8px 8px;
        font-size: 13px;
        min-width: 100%;
    }
    .event .custom-sort-container .button__block.type-filter-text {
        padding: 20px 0 0 0;
        gap: 8px;
    }
    .event .custom-sort-container .page_tab-button {
        padding: 10px 15px;
        font-size: 13px;
    }
    .event .modelhouse_list_tab .page_tab_search .page_tab_search-wrap ul.store-tabs {
    gap: 3px;
}
    .event .custom-sort-container .button__block.type-filter-text .category-filter-block {
        width: 100%;
        flex-wrap: nowrap;
        gap: 8px;  
    }

    .event .custom-sort-container .button__block.type-filter-text .category-filter-block .page_tab-button {
        flex: 1; 
        text-align: center;
        white-space: nowrap;
        padding-left: 4px; 
        padding-right: 4px;
        font-size: 13px;  
    }

}
@media (max-width: 425px) {
    .event .modelhouse_list_tab .page_tab a:after {
        display: none;
    }
    }