@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/*===================================
下層共通設定
===================================*/

/*　メインビュー　*/
.mv-lowerlayer {
    margin-top: 72px;
    height: 160px;
    color: #fff;
    line-height: 160px;
}

.mv-company {
    background: url(../img/mv/mv-company.jpg)no-repeat top center / cover;
}

.mv-search {
    background: url(../img/mv/mv-search.jpg)no-repeat bottom center / cover;
}

.mv-interview {
    background: url(../img/mv/mv-interview.jpg)no-repeat top center / cover;
}

.mv-achievement {
    background: url(../img/mv/mv-achievement.jpg)no-repeat bottom center / cover;
}

.mv-tips {
    background: url(../img/mv/mv-tips.jpg)no-repeat top left / cover;
}

.mv-contact {
    background: url(../img/mv/mv-contact.jpg)no-repeat top center / cover;
}

/*　パンくずリスト　*/

.breadcrumbs {
    padding: 16px 0;
    font-size: .875rem;
    line-height: 2;
    background-color: #F8F8F8;
}

.breadcrumbs-link {
    width: min(1200px, 90%);
    margin: 0 auto;
}

.breadcrumbs a:hover {
    opacity: .7;
}

/*　2カラム　*/

.column-container {
    background-color: #fff;
    padding: 96px 0;
}

.column-left,
.column-right {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    width: 1096px;
    margin: 0 auto;
    text-align: left;
}

.column-left {
    justify-content: flex-start;
}

.column-right {
    justify-content: center;
}

.column-sidebar {
    flex: 0 0 330px;
    position: sticky;
    top: 120px;
    height: max-content;
}

.column-company {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    width: 1096px;
    margin: 0 auto;
    text-align: left;
}

/*　新着情報　*/
.info-nav {
    flex: 0 0 330px;
    background-color: #F8F8F8;
    padding: 40px 24px;
    margin: 0 auto;
    line-height: 1.5;

    &:not(:first-child) {
        margin-top: 24px;
    }

    p {
        color: #659B00;
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    ul {
        list-style: none;

        &:not(:first-child) {
            margin-top: 24px;
        }
    }

    li {
        cursor: pointer;
        padding: 8px;
    }
}

.column-menu {
    color: #659B00;
    font-weight: 600;
    border-bottom: solid 1px #ccc;
    width: 100%;
}

.line-menu li:not(.column-menu) {
    position: relative;
    border-bottom: solid 1px #ccc;
}

.line-menu li:not(.column-menu):before {
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    margin: auto;
    content: '';
    width: 8px;
    height: 8px;
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    transform: rotate(45deg);
}

/*　サイドバー　*/

.sidebar {
    width: 100%;
    max-width: 256px;
}

.sidebar ul {
    list-style: none;
}

.sidebar li {
    cursor: pointer;
}

/*サイドバー（最新記事一覧）*/

#latest-achievement {
    width: 256px;
    background-color: #F8F8F8;
    padding: 40px 24px;

    ul {
        list-style: none;
    }

    li {
        margin-top: 16px;

        &:not(:last-child) {
            border-bottom: 1px solid #c0c0c0;
            padding-bottom: 16px;
        }

        div {
            position: relative;
        }
    }

    .mv-visible {
        width: 100%;
        height: 140px;
    }

    .mv-visible img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .point {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 112px;
        height: 28px;
        font-size: .75rem;
        font-weight: 400;
        text-align: center;
        line-height: 26px;
        color: #fff;
        background-color: #659B00;
    }

    h3 {
        font-size: .875rem;
        text-align: left;
        width: 100%;
        margin-top: 8px;
    }

    .latest-achievement div {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        margin: 8px auto 0 0;
    }

    .latest-achievement .tag {
        display: inline-block;
        font-size: .75rem;
        line-height: 1.2;
        padding: 4px;
        border: solid 1px #000;
        text-align: left;
    }

    /*物件一覧リンク*/
    .achievement-link {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .achievement-link:hover {
        opacity: 0.7;
    }
}

/*　絞り込み検索トグル　*/

.info-nav .toggle-button {
    background: none;
    border: none;
    color: #659B00;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 16px;
}

.info-nav .toggle-button .toggle-arrow {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-right: 2px solid #659B00;
    border-bottom: 2px solid #659B00;
    transform: rotate(45deg);
    /* ▼ */
    transition: transform .3s ease;
}

.info-nav.open .toggle-button .toggle-arrow {
    transform: rotate(225deg);
    /* ▲ */
}

.info-nav .toggle-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s ease;
}

.info-nav.open .toggle-content {
    max-height: 1500px;
}

/*　絞り込み検索　*/

.search-filter {
    background-color: #F8F8F8;
    padding: 40px 24px;
}

.search-filter>p {
    color: #659B00;
    font-size: 1.125rem;
    font-weight: 600;
}

.search-menu {
    margin-top: 24px;
}

.search-category {
    color: #659B00;
    font-weight: 600;
}

/* 項目リスト（checkbox付き） */

.search-menu li:nth-child(n+2) {
    margin-top: 1rem;
}

.search-menu li:not(.search-category, .bold) {
    margin-left: 1rem;
}

.search-menu .bold {
    margin-left: .5rem;
}

/* チェックボックスのスタイル */
.search-menu input[type="checkbox"] {
    margin-right: 8px;
}

/* 検索ボタン */
.search-filter>.button,
.info-nav .button {
    width: 100%;
    margin: 24px auto 0;
}

/* フリーワード検索 */

.freeword-search {
    margin: 24px auto 0;
}

.freeword-search div {
    display: flex;
    width: 100%;
    margin: 24px auto 0;
}

.freeword-search p {
    color: #659B00;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.freeword-search input[type="text"] {
    height: 40px;
    width: 100%;
    border: 2px solid #659B00;
    padding: 0 12px;
}

.search-button {
    width: 40px;
    height: 40px;
    background-color: #659B00;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: none;
}

/* YouTubeバナー */
.youtube_banner {
    display: block;
    margin: 40px auto 0;
    width: 100%;
}

.youtube_banner img {
    width: 100%;
}

.youtube_banner2 {
    display: none;
}

.column-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

@media screen and (max-width:1224px) {

    .column-left,
    .column-right {
        width: 100%;
        padding: 0 64px 0 40px;
    }
}

@media screen and (max-width:1100px) {
    .mv-lowerlayer {
        margin-top: 56px;
    }
}

@media (max-width: 1024px) {

    .column-company {
        flex-wrap: wrap;
        gap: 48px;
        padding: 0 64px;
        width: 100%;
    }
}

@media (max-width: 768px) {

    .column-container {
        padding: 48px 0;
    }

    .column-left,
    .column-right {
        justify-content: center;
        flex-wrap: wrap;
        padding: 0;
        width: 100%;
    }

    .info-nav {
        padding: 24px;
    }

    .column-sidebar {
        position: static;
        top: auto;
        width: 100%;
    }

    .column-wrapper {
        width: 100%;
        padding-right: 0;
    }

    .column-company {
        padding: 0;
        width: 90%;
    }

}

.search-filter {
    width: min(480px, 90%);
    margin: 0 auto;
}

.search-filter ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 4%;
}

.search-filter li:not(.column-menu, .search-category, .bold) {
    width: 48%;
}

.youtube_banner {
    display: block;
    margin: 40px auto 0;
}

@media (max-width: 768px) {
    .search-filter {
        width: 100%;
        margin: 0;
    }

    .youtube_banner {
        margin: 24px auto 0;
    }
}

@media (max-width: 428px) {
    .youtube_banner {
        display: none;
    }

    .youtube_banner2 {
        display: block;
        margin: 40px auto 0;
        width: 90%;
    }

    .youtube_banner2 img {
        width: 100%;
    }
}

/*　ページネーション　*/

.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pagination .page-numbers {
    display: block;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    line-height: 36px;
    text-align: center;
    border: 2px solid #659B00;
    border-radius: 4px;
    color: #659B00;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination .page-numbers:hover {
    background-color: #e6f2d9;
}

.pagination .current {
    color: #fff !important;
    background-color: #659B00 !important;
}

.pagination .page-numbers.dots {
    border: none;
    background: none;
    cursor: default;
    width: auto;
    height: auto;
    padding: 0 4px;
}

@media (max-width: 428px) {

    .pagination {
        gap: 8px;
    }

    .pagination .page-numbers {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        line-height: 28px;
    }
}

/*===================================
404 NOT FOUND
===================================*/

#notfound {
    background-color: #fff;
    padding: 96px 0;
    text-align: center;

    p {
        width: min(1200px, 90%);
        margin: 40px auto;
        line-height: 1.5;
    }
}

/*===================================
会社概要
===================================*/

/*　企業理念　*/
#philosophy {
    margin-bottom: 96px;
}

#philosophy ul {
    display: flex;
    justify-content: center;
    gap: 24px;
    list-style: none;
    height: 400px;
    margin-bottom: 40px;
}

#philosophy ul div {
    width: 34%;
}

#philosophy ul li {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.philosophy1 {
    width: 64%;
    background-image: url(../img/philosophy/philosophy1.jpg);
}

.philosophy2 {
    height: 188px;
    background-image: url(../img/philosophy/philosophy2.jpg);
    margin-bottom: 24px
}

.philosophy3 {
    height: 188px;
    background-image: url(../img/philosophy/philosophy3.jpg);
}

#philosophy h3 {
    color: #659B00;
    font-size: 1.5rem;
}

.philosophy {
    margin-top: 40px;
    line-height: 1.5;

    p:nth-child(n+2) {
        margin-top: 1rem;
    }
}

@media (max-width: 1024px) {
    #philosophy {
        margin-bottom: 48px;
    }

    #philosophy ul {
        flex-wrap: wrap;
        height: 480px;
    }

    #philosophy ul div {
        display: flex;
        gap: 24px;
        width: 100%;
        height: 34%;
    }

    .philosophy1 {
        width: 100%;
        height: 64%;
    }

    .philosophy2 {
        width: 50%;
        height: 100%;
    }

    .philosophy3 {
        width: 50%;
        height: 100%;
    }

    #philosophy h3 {
        font-size: 1.25rem;
    }
}

/*　スタッフ紹介　*/
#staff {
    margin-bottom: 96px;
}

.staff {
    display: flex;
    justify-content: center;
    align-self: flex-start;
    gap: 24px;

    &:not(:first-of-type) {
        margin-top: 40px;
    }
}

.staff-left {
    width: min(296px, 100%);
    min-width: 240px;
}

.staff-left *:nth-child(n+2) {
    margin-top: 16px;
}

.staff-left img {
    max-width: 100%;
    margin-bottom: 8px;
}

.profile {
    width: min(504px, 100%);
}

.profile p {
    vertical-align: bottom;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 16px;
}

.profile p span {
    font-size: 1rem;
    margin-right: 8px;
}

.profile dt {
    width: 156px;
    color: #659B00;
    font-weight: 600;
    border: solid 1px #659B00;
    text-align: center;
    margin-top: 16px;
    padding: 6px 8px;
}

.profile dd {
    margin-top: 16px;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    #staff {
        margin-bottom: 48px;
    }

    .staff {
        flex-wrap: wrap;
    }
}

/* 豆知識 */

#trivia {
    background-color: #ECF5DB;
    padding: 40px 0;
    margin-bottom: 96px;
}

#trivia h2 {
    width: 90%;
}

#trivia .trivia {
    width: 90%;
    margin: 0 auto;
    padding: 24px;
    background-color: #fff;
    line-height: 1.5;

    &:last-of-type {
        margin-top: 40px;
    }

    *:not(h3, li, img) {
        margin-top: 16px;
    }

    h3 {
        color: #FF8629;
        font-size: 1.5rem;
        width: fit-content;
        padding: 8px 16px;
        border: 1px dashed #333;
    }

    h4 {
        font-size: 1.25rem;
        text-align: left;
        width: fit-content;
    }

    ol {
        list-style: none;
        font-weight: 600;
    }

    img {
        width: min(280px, 100%);
    }

    div {
        display: flex;
        align-items: center;
        column-gap: 24px;
    }
}

@media (max-width: 1024px) {

    #trivia .trivia div {
        flex-wrap: wrap;
    }

    #trivia {
        padding: 40px 0;
        margin-bottom: 48px;
    }
}

@media (max-width: 428px) {

    #trivia .trivia {
        h3 {
            font-size: 1.25rem;
        }

        h4 {
            font-size: 1.125rem;
        }
    }
}

/* 会社概要 */

#overview dl div {
    display: flex;
}

#overview dt {
    font-weight: 600;
    width: 240px;
    max-width: 33%;
    padding: 24px;
    background-color: #F8F8F8;

    &:not(last-of-type) {
        border-top: 1px solid #fff;
    }
}

#overview dd {
    width: calc(100% - 240px);
    padding: 24px;
    line-height: 1.5;
    border-right: 1px solid #F8F8F8;

    &:not(last-of-type) {
        border-top: 1px solid #F8F8F8;
    }

    &:last-of-type {
        border-bottom: 1px solid #F8F8F8;
    }
}

@media (max-width: 768px) {
    #overview dd {
        width: 100%;
    }
}

@media (max-width: 375px) {

    #overview dl {
        border: 1px solid #F8F8F8;
    }

    #overview dl div {
        flex-wrap: wrap;
    }

    #overview dt {
        width: 100%;
        max-width: 100%;

        &:not(last-of-type) {
            border-top: none;
        }
    }

    #overview dd {
        border-right: none;

        &:not(last-of-type) {
            border-top: none;
        }

        &:last-of-type {
            border-bottom: none;
        }
    }
}

/*===================================
カテゴリーから検索する（トグル付き）
===================================*/

#category-search {
    background: #F8F8F8;
    padding: 40px 0;
    margin-bottom: 96px;
}

#category-search>div {
    width: 90%;
    margin: 0 auto;
}

#category-search .toggle-button {
    background: none;
    border: none;
    color: #659B00;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

#category-search .toggle-button .toggle-arrow {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-right: 2px solid #659B00;
    border-bottom: 2px solid #659B00;
    transform: rotate(45deg);
    transition: transform .3s ease;
}

#category-search.open .toggle-button .toggle-arrow {
    transform: rotate(225deg);
}

#category-search .toggle-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s ease;
}

#category-search.open .toggle-content {
    max-height: 1000px;
}

/* カテゴリー内カード */
#category-search ul {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
    align-items: flex-start;
}

#category-search li {
    position: relative;
    width: calc(50% - 12px);
    height: 136px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
}

#category-search li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
    text-decoration: none;
    padding: 0 16px;
}

#category-search li:nth-of-type(1) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../img/search/category-search1.jpg");
}

#category-search li:nth-of-type(1):hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url("../img/search/category-search1.jpg");
}

#category-search li:nth-of-type(2) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../img/search/category-search2.jpg");
}

#category-search li:nth-of-type(2):hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url("../img/search/category-search2.jpg");
}

#category-search li:nth-of-type(3) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../img/search/category-search3.jpg");
}

#category-search li:nth-of-type(3):hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url("../img/search/category-search3.jpg");
}

#category-search li:nth-of-type(4) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../img/search/category-search4.jpg");
}

#category-search li:nth-of-type(4):hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url("../img/search/category-search4.jpg");
}

#category-search li:nth-of-type(5) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../img/search/category-search5.jpg");
}

#category-search li:nth-of-type(5):hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url("../img/search/category-search5.jpg");
}

#category-search li:nth-of-type(6) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../img/search/category-search6.jpg");
}

#category-search li:nth-of-type(6):hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url("../img/search/category-search6.jpg");
}

@media (max-width: 1024px) {
    #category-search li {
        width: 100%;
    }
}

@media (max-width: 768px) {

    #category-search {
        width: 90%;
        margin: 0 auto;
        padding: 24px 0;
        margin-bottom: 48px;
    }
}

/*===================================
売買物件一覧
===================================*/

/* 昇順降順切り替え */
.sort-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 40px;
}

/* リンク：文字＋矢印を同一行で中央揃え */
.sort-item {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap;
    line-height: 1.2;
    text-decoration: none;
}

/* 矢印：縦2段を“文字の横”に固定 */
.sort-arrows {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 4px;
    line-height: 1;
    vertical-align: middle;
}

/* 矢印文字の行高を潰してズレを防ぐ */
.sort-arrows .arrow {
    display: block;
    font-size: 9px;
    line-height: 0.9;
    height: 9px;
    /* 上下が詰まりすぎる/空きすぎる時はここ調整 */
    color: #bbb;
}

/* 選択中 */
.sort-item.is-active {
    font-weight: 700;
}

/* 昇順：▲だけ色 */
.sort-item.is-active.asc .arrow.up {
    color: #DFAC20;
}

.sort-item.is-active.asc .arrow.down {
    color: #bbb;
}

/* 降順：▼だけ色 */
.sort-item.is-active.desc .arrow.down {
    color: #DFAC20;
}

.sort-item.is-active.desc .arrow.up {
    color: #bbb;
}

@media (max-width: 768px) {
    .sort-bar {
        width: 90%;
        margin: 40px auto 0;
    }
}

#property-list ul {
    list-style: none;
}

.property-list {
    margin: 40px 0;
}

.property-list-item {
    border-bottom: 1px solid #c0c0c0;
    padding-bottom: 24px;
}

.property-list li a {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    line-height: 1.5;
    margin-top: 24px;
}

.property-images {
    position: relative;
    display: flex;
    flex: 0 0 360px;
    width: 360px;
    height: 240px;
    gap: 4px;
    overflow: hidden;
}

.property-images-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 50%;
    height: 100%;
}

.property-images-right {
    width: 50%;
    height: 100%;
}

.property-images-left img {
    width: 100%;
    height: 50%;
    object-fit: cover;
    display: block;
}

.property-images-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.badge-group {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    gap: 6px;
}

/* バッジ共通（NEW/商談中/値下げ） */
.badge-group .badge {
    display: inline-block;
    padding: 4px 10px;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    border: 1px solid #fff;
}

/* 既存の .badge-new の absolute を“グループ内だけ”無効化 */
.badge-group .badge-new {
    position: static;
    left: auto;
    background: #659B00;
}

.badge-group .badge-new {
    background: #659B00;
}

.badge-group .badge-shoudan {
    background: #777;
}

.badge-group .badge-price-down {
    background: #FF8629;
}

.badge-group .badge-youtube {
    background: #FF0000;
}

.property-list-item ul {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.property-list ul li {
    column-gap: 0;
    margin-top: 0;
}

.property-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;

    span {
        display: inline-block;
        border: solid 1px #000;
        padding: 4px 8px;
        font-size: .875rem;
        font-weight: 500;
    }
}

.property-list-price {
    color: #FF8629;
    font-size: 1.25rem;
}

.property-list-map {
    background: url(../img/property-list/map.png)no-repeat left center;
    background-size: 16px auto;
    padding-left: 32px;
}

.property-list-house {
    background: url(../img/property-list/house.png)no-repeat left center;
    background-size: 16px auto;
    padding-left: 32px;
}

.property-list-train {
    background: url(../img/property-list/train.png)no-repeat left center;
    background-size: 16px auto;
    padding-left: 32px;
}

@media (max-width: 1024px) {
    .property-list li a {
        flex-direction: column;
        align-items: flex-start;
    }

    .property-images {
        width: max(360px, 100%);
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .property-list {
        width: 90%;
        margin: 40px auto;
    }
}

@media (max-width: 428px) {
    .property-images {
        flex: 0 0 200px;
    }
}

/*===================================
売買物件詳細
===================================*/

/*　印刷設定　*/
@media print {
    body {
        background: none !important;
        color: #000;
    }

    header,
    footer,
    nav,
    .no-print {
        display: none !important;
    }

    #property-container {
        display: block;
    }

    button.print-button,
    .property-contact,
    .button-before,
    .button-before-gray {
        display: none !important;
        visibility: hidden !important;
    }
}

.print-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button.print-button {
    background-color: #FF8629;
    color: #fff;
    font-weight: 600;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

#property-container {
    background-color: #fff;
    padding: 96px 64px;

    section:nth-child(n+2) {
        margin-top: 64px;
    }
}

@media screen {
    .print-images {
        display: none;
    }
}

/*　物件情報　*/

#property-info {
    width: min(1200px, 100%);
    margin: 0 auto;
}

.property-tag {
    display: flex;
    gap: 8px;
    list-style: none;
}

#property-info h2 {
    text-align: left;
    width: 100%;
    margin: 8px;
}

.property-wrapper {
    display: flex;
    justify-content: left;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
}

.property-img {
    width: min(720px, 100%);
    overflow: hidden;
}

#property-mv {
    width: 100%;
    height: 480px;
    position: relative;
}

/* ナビ */
.thumb-nav {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    /* 下の画像クリックを邪魔しない */
}

.thumb-nav .thumb-prev,
.thumb-nav .thumb-next {
    position: relative;
    pointer-events: auto;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
}

.thumb-nav .thumb-prev:disabled,
.thumb-nav .thumb-next:disabled {
    opacity: .45;
    cursor: default;
}

.thumb-nav .thumb-prev:after {
    position: absolute;
    content: '';
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-top: solid 2px #777;
    border-right: solid 2px #777;
    transform: rotate(-135deg);
}

.thumb-nav .thumb-next:after {
    position: absolute;
    content: '';
    top: 0;
    left: 10px;
    bottom: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-top: solid 2px #777;
    border-right: solid 2px #777;
    transform: rotate(45deg);
}

/* ★重要：メイン画像は「常に」レイアウト固定（hidden時も同条件） */
#property-mv-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;

    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;

    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: opacity;
}

#property-mv-img.mv-visible {
    opacity: 1;
    visibility: visible;
}

/* 既存スライダーの「現在以外は非表示」系の巻き込み保険 */
#property-mv .slick-slide #property-mv-img,
#property-mv .swiper-slide #property-mv-img {
    opacity: 1;
    visibility: visible;
}

/* サムネ */
#thumb {
    display: flex;
    gap: 8px;
    list-style: none;
    margin-top: 8px;
    padding-bottom: 8px;
    overflow-x: auto;
    white-space: nowrap;
    cursor: grab;

    /* ★ここは外す：メインがブレる要因になりがち */
    scroll-behavior: auto;
}

#thumb li {
    flex: 0 0 auto;
    width: 150px;
    height: 112px;
}

#thumb li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
}

.property-content {
    width: 360px;
}

.property-contact {
    :nth-child(n+2) {
        margin-top: 8px;
    }

    p {
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.5;
        text-align: center;
    }

    .button {
        width: 100%;
        height: 56px;
        font-size: 1.25rem;
        line-height: 52px;

        &:first-of-type {
            background-color: #FF8629;
            border: solid 2px #FF8629;

            &:hover {
                color: #FF8629 !important;
                background-color: #fff;
            }
        }

        span {
            font-size: 1.5rem;
            background: url(../img/icon/tel2.png);
            background-repeat: no-repeat;
            background-size: 20px auto;
            background-position: left bottom 3px;
            padding-left: 24px;
            margin: 16px;
        }

        &:hover span {
            background-image: url(../img/icon/tel3.png);
            transition: all .5s;
        }
    }
}

.memo {
    font-size: 1rem;
    text-align: left;
    background: url(../img/icon/memo.png);
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-position: left center;
    padding-left: 24px;
}

.property-overview {
    margin: 40px 0;

    dl {
        display: flex;
        justify-content: left;
        align-items: first baseline;
        flex-wrap: wrap;
        gap: 8px;
        font-weight: 600;
        margin-top: 8px;
    }

    dt {
        border: solid 1px #333;
        padding: 4px 0;
        width: fit-content;
        width: 80px;
        text-align: center;
    }

    dd {
        width: 248px;
        line-height: 1.5;
    }

    .youtube_link {
        text-decoration: underline;

        &:hover {
            color: #FF8629;
        }
    }
}

.button-before-gray {
    display: block;
    width: 100%;
    height: 56px;
    font-size: 1.25rem;
    line-height: 52px;
    font-weight: 600;
    color: #fff !important;
    background-color: #777;
    border: solid 2px #777;
    border-radius: 2px;
    text-align: center;

    &:hover {
        color: #777 !important;
        background-color: #fff;

        .button-before-gray.arrow-left:after {
            border-top: solid 2px #777;
            border-right: solid 2px #777;
            transition: all .5s;
        }
    }
}

.button-before-gray .arrow-left {
    position: relative;
    display: inline-block;
    width: 1rem;
    height: 1rem;
}

.button-before-gray .arrow-left:after {
    position: absolute;
    top: 4px;
    right: 8px;
    bottom: 0;
    margin: auto;
    content: '';
    width: .375rem;
    height: .375rem;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(-135deg);
}

@media (max-width: 768px) {
    #property-container {
        padding: 96px 0px;
    }

    #property-container section:nth-child(n+2) {
        margin-top: 48px;
    }

    #property-info {
        width: 90%;
    }

    #property-mv {
        height: clamp(23.438rem, 22.451rem + 4.21vw, 27.5rem);
    }
}

@media (max-width: 428px) {
    #property-container {
        padding: 48px 0px;
    }

    .print-flex {
        display: block;
    }
}

/*　物件説明　*/

#property-description {
    width: min(1200px, 100%);
    margin: 0 auto;
}

.property-description {
    background-color: #ECF5DB;
    width: min(720px, 100%);
    padding: 40px 32px;

    * {
        margin-bottom: 16px;
    }

    p {
        line-height: 1.5;
        text-align: left;
    }
}

@media (max-width: 768px) {
    #property-description {
        width: 90%;
    }
}

@media (max-width: 428px) {
    #property-description {
        width: 100%;
    }

    .property-description {
        padding: 32px 16px;
    }
}

/*　価格・お支払い例　*/

.memo2 {
    font-size: 1rem;
    text-align: left;
    background: url(../img/icon/memo2.png);
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-position: left center;
    padding-left: 24px;
    margin-bottom: 24px;
}

#property-payment {
    width: min(1200px, 100%);
    margin: 0 auto;

    dl {
        display: flex;
        flex-wrap: wrap;
        line-height: 1.5;
        width: min(720px, 100%);
    }

    dt {
        font-weight: 600;
        width: 240px;
        padding: 24px;
        background-color: #F8F8F8;

        &:not(last-of-type) {
            border-top: 1px solid #fff;
        }
    }

    dd {
        width: calc(100% - 240px);
        padding: 24px;
        border-right: 1px solid #F8F8F8;

        &:not(last-of-type) {
            border-top: 1px solid #F8F8F8;
        }

        &:last-of-type {
            border-bottom: 1px solid #F8F8F8;
        }
    }
}

@media (max-width: 768px) {

    #property-payment {
        width: 90%;
    }
}

@media screen and (max-width: 536px) {

    #property-payment {
        dl {
            display: block;
        }

        dt {
            width: 100%;
            border-top: none;
        }

        dd {
            width: 100%;
            border-left: 1px solid #F8F8F8;
            border-top: none;
        }
    }
}

@media (max-width: 428px) {

    #property-payment {
        div {
            flex-wrap: wrap;
        }

        dt {
            width: 100%;

            &:not(last-of-type) {
                border-top: none;
            }
        }

        dd {
            border-left: 1px solid #F8F8F8;

            &:not(last-of-type) {
                border-top: none;
            }
        }
    }
}

/*　物件詳細　*/

#property-detail {
    width: min(1200px, 100%);
    margin: 0 auto;
}

.property-detail {

    .kv-pairs {
        display: grid;
        grid-template-columns: 240px 1fr 240px 1fr;
        line-height: 1.5;
    }

    dt,
    dd {
        padding: 12px;
        margin: 0;
        border-bottom: 1px solid #F0F0F0;
    }

    dt {
        background-color: #F8F8F8;
        font-weight: 600;

        &:not(:last-of-type) {
            border-top: 1px solid #fff;
        }

        &:nth-of-type(odd) {
            grid-column: 1;
        }

        &:nth-of-type(even) {
            grid-column: 3;
        }
    }

    dd {
        border-right: 1px solid #F8F8F8;

        &:not(:last-of-type) {
            border-top: 1px solid #F8F8F8;
        }

        &:last-of-type {
            border-bottom: 1px solid #F8F8F8;
        }

        &:nth-of-type(odd) {
            grid-column: 2;
        }

        &:nth-of-type(even) {
            grid-column: 4;
        }
    }
}

@media screen and (max-width: 1024px) {
    .property-detail {
        .kv-pairs {
            grid-template-columns: 240px 1fr;
        }

        .kv-pairs dt,
        .kv-pairs dd {
            grid-column: auto !important;
        }
    }
}

@media screen and (max-width: 768px) {

    #property-detail {
        width: 90%;
    }
}

@media screen and (max-width: 536px) {

    .property-detail {
        .kv-pairs {
            grid-template-columns: 33% 1fr;
        }
    }
}


@media screen and (max-width: 375px) {

    #property-detail {
        .kv-pairs {
            grid-template-columns: 1fr;
        }

        dt,
        dd {
            padding: 8px;
        }

        dt {
            width: 100%;
            max-width: 100%;

            &:not(last-of-type) {
                border-top: none;
            }
        }

        dd {
            width: 100%;
            border-left: 1px solid #F8F8F8;
            border-top: none;
        }
    }
}

/*　設備・条件・周辺施設　*/

#property-tags {
    width: min(1200px, 100%);
    margin: 0 auto;
}

.setsubi-sonota {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.setsubi-sonota span {
    line-height: 1.2;
}

@media screen and (max-width: 768px) {
    #property-tags {
        width: 90%;
    }
}

/*　周辺施設　*/

#property-access {
    width: min(1200px, 100%);
    margin: 0 auto;

    div {
        display: flex;
        align-items: stretch;

        p {
            font-weight: 600;
            background-color: #F8F8F8;
            width: 240px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    ul {
        list-style: none;
        width: 100%;
    }

    li {
        padding: 24px;
        border: 1px solid #F8F8F8;
    }
}

@media screen and (max-width: 768px) {

    #property-access {
        width: 90%;
    }
}

@media screen and (max-width: 536px) {

    #property-access {

        div {
            display: block;

            p {
                width: 100%;
                padding: 24px;
            }
        }
    }
}

#property-container .button-before {
    margin: 64px auto 0;
}

#property-tags .no-tags,
#property-map-canvas.is-empty {
    text-align: center;
}

/*　こちらの物件もおすすめです　*/
#recommended-properties {
    background-color: #ECF5DB;
    padding: 96px 64px;
}

#recommended-properties #property-list {
    width: min(800px, 100%);
    margin: 0 auto;
}

@media screen and (max-width: 768px) {

    #recommended-properties {
        padding: 96px 0;
    }
}

@media screen and (max-width: 428px) {
    #recommended-properties {
        padding: 48px 0;
    }
}

/*===================================
代表インタビュー
===================================*/

#interview {
    padding: 96px 0;
    background-color: #fff;
}

.interview .staff {
    margin-top: 0;
}

.interview {
    width: min(1024px, 100%);
    margin: 0 auto 96px;
}

.interview p:not(.staff p) {
    text-align: center;
    line-height: 1.5;
    margin-bottom: 96px;
}

.interview img {
    width: min(504px, 100%);
    object-fit: contain;
}

/*　Q&A　*/

#interview-faq {
    border-top: solid 1px #333;
    width: min(1200px, 100%);
    margin: 0 auto;
}

#interview-faq ul {
    width: min(1096px, 100%);
    margin: 0 auto;
}

#interview-faq li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 96px;
}

#interview-faq img {
    width: min(400px, 100%);
}

.interview-faq {
    background-color: #F8F8F8;
    padding: 24px;
}

.interview-faq div {
    display: flex;
    justify-content: left;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
    gap: 16px;
}

.interview-faq span {
    color: #fff;
    background-color: #659B00;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 36px;
    border-radius: 4px;
}

.interview-faq h2 {
    color: #659B00;
    font-size: 1.5rem;
    text-align: left;
    margin: 0 auto 0 0;
}

.interview-faq p {
    line-height: 1.7;
}

@media (max-width: 1200px) {

    #interview {
        padding: 96px 64px;
    }
}

@media (max-width: 1024px) {

    #interview-faq li {
        flex-wrap: wrap;

        &:nth-of-type(2) {
            flex-wrap: wrap-reverse;
        }
    }
}

@media (max-width: 768px) {

    #interview {
        padding: 96px 0px;
    }

    .interview,
    #interview-faq {
        width: 90%;
        padding: 0;
    }

    .interview img {
        height: auto;
    }
}

/*===================================
お知らせ
===================================*/

#information {
    background-color: #fff;
    text-align: center;
}

#information dl {
    width: min(720px, 100%);
    margin: 40px auto 0;
}

.information-wrapper {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    text-align: left;
    border-bottom: solid 1px #777;
}

#information dt {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 16px;
    font-size: .875rem;
    line-height: 1.5;
    font-weight: 600;
}

#information dd {
    line-height: 1.5;
}

#information .point,
#information .point2 {
    display: inline-block;
    color: #fff;
    padding: 4px 0;
    width: 88px;
    line-height: 1;
    text-align: center;
}

#information .point {
    background-color: #659B00;
}

#information .point2 {
    background-color: #DFAC20;
}

@media (max-width: 1200px) {

    #information dt {
        display: block;
    }
}

@media (max-width: 768px) {

    #information dl {
        width: 90%;
    }

    .information-wrapper {
        display: block;
    }

    #information dd {
        width: 100%;
    }
}

/* 記事詳細表示エリア */

#information-detail .category {
    margin-bottom: 16px;
}

#information-detail .point,
#information-detail .point2 {
    display: inline-block;
    color: #fff;
    margin-left: 16px;
    padding: 4px 0;
    width: 88px;
    text-align: center;
}

#information-detail .point {
    background-color: #659B00;
}

#information-detail .point2 {
    background-color: #DFAC20;
}

#information-detail h1,
#information-detail h2,
#information-detail h3,
#information-detail h4 {
    text-align: left;
    width: fit-content;
    margin: 0;
}

.information-detail {
    line-height: 1.5;
    text-align: left;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #000;
}

.information-detail ol,
.information-detail ul {
    list-style-position: inside;
    padding-left: 1rem;
    text-indent: -1rem;
}

.information-detail img {
    width: 100%;
    height: auto;
    margin: 48px 0;
}

#information-detail .button-before {
    margin: 64px auto 0;
}

@media (max-width: 768px) {

    #information-detail {
        width: 90%;
        margin: 0 auto;
    }

}

/*===================================
成約実績
===================================*/

#achievement {
    padding: 96px 0;
    background-color: #fff;
    text-align: center;
}

#achievement ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    width: min(1200px, 100%);
    margin: 0 auto 40px;
    list-style: none;
}

#achievement li {
    width: 320px;
    background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

#achievement li *:first-child {
    position: relative;
}

#achievement .point {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 152px;
    height: 32px;
    font-size: .875rem;
    line-height: 30px;
    color: #fff;
    background-color: #659B00;
}

#achievement h3 {
    font-size: 1rem;
    text-align: left;
}

.achievement {
    padding: 16px;
}

.achievement div {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px auto 16px 0;
}

.achievement .tag {
    display: inline-block;
    font-size: .875rem;
    line-height: 1.2;
    font-weight: 600;
    padding: 4px 8px;
    border: solid 1px #000;
    text-align: left;
}

/*物件一覧リンク*/
.achievement-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.achievement-link:hover {
    opacity: 0.7;
}

.achievement-link .mv-visible {
    width: 100%;
    height: 212px;
}

.achievement-link .mv-visible img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 1200px) {

    #achievement {
        padding: 96px 64px;
    }
}

@media (max-width: 768px) {

    #achievement {
        padding: 96px 0px;
    }
}

/*　詳細ページ　*/

#fudo-achievement .point {
    padding: 4px 8px;
    font-size: .875rem;
    color: #fff;
    background-color: #659B00;
    border: none !important;
}

#fudo-achievement h2 {
    text-align: left;
    width: 100%;
    margin: 24px 0;
}

#fudo-achievement h3 {
    margin-top: 64px;
}

#fudo-achievement .property-img{
    margin: 24px auto 0;
}

#fudo-achievement p {
    line-height: 1.5;
    margin-top: 24px;
}

#fudo-achievement .button-before {
    margin: 64px auto 0 0;
}

@media (max-width: 768px) {

    #fudo-achievement {
        width: 90%;
        margin: 0 auto;
    }

}

/*===================================
不動産売却の豆知識
===================================*/

#tips {
    background-color: #fff;
    text-align: center;
}

#sale-tips {
    background-color: #ECF5DB;
    text-align: center;
    padding: 96px 0;

    h2 {
        margin-bottom: 24px;
    }
}

#tips ul,
#sale-tips ul {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    gap: 40px;
    width: min(1200px, 100%);
    margin: 0 auto 40px;
    list-style: none;
}

/*　売却法下CTA　*/
.sale-tips {
    justify-content: center !important;
}

#tips li,
#sale-tips li {
    width: min(320px, 100%);
    background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

#tips li *:first-child,
#sale-tips li *:first-child {
    position: relative;
}

#tips img,
#sale-tips img {
    width: min(320px, 100%);
    height: 216px;
}

#tips .point,
#sale-tips .point {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 104px;
    height: 32px;
    font-size: .875rem;
    line-height: 30px;
    color: #fff;
    background-color: #659B00;
}

#tips h3,
#sale-tips h3 {
    font-size: 1rem;
    text-align: left;
}

.tips {
    padding: 16px;
}

.tips div {
    margin: 16px auto 16px 0;
    width: fit-content;
}

.tips p {
    color: #999;
    font-size: .785rem;
    line-height: 1.5;
    text-align: left;
    margin: 8px 0;
}

.tips .tag {
    font-size: .875rem;
    font-weight: 700;
    padding: 2px 8px;
    border: solid 1px #000;
    width: fit-content;
}

#tips .button {
    position: relative;
}

/*お知らせ一覧リンク*/
.tips-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.tips-link:hover {
    opacity: 0.7;
}

/*　お役立ち情報　*/

#useful-information {
    background-color: #ECF5DB;
    padding: 96px 0;
}

#useful-information a {
    display: block;
    width: min(1024px, 100%);
    margin: 40px auto 0;
}

#useful-information img {
    width: min(1024px, 100%);
}

@media (max-width: 768px) {

    #useful-information {
        padding: 48px 0;
    }

    #tips ul,
    #sale-tips ul {
        width: 90%;
    }

    #sale-tips {
        padding: 48px 0;
    }

}

@media (max-width: 755px) {

    #tips li,
    #sale-tips li {
        margin: 0 auto;
    }
}

/*　詳細ページ　*/

#tips-achievement .property-tag {
    align-items: center;
    margin-bottom: 24px;
}

#tips-achievement h1,
#tips-achievement h2,
#tips-achievement h3,
#tips-achievement h4 {
    text-align: left;
    width: fit-content;
    margin: 0;
}

.tips-achievement {
    line-height: 1.5;
    text-align: left;
}

.tips-achievement ol,
.tips-achievement ul {
    list-style-position: inside;
    padding-left: 1rem;
    text-indent: -1rem;
}

#tips-achievement img {
    width: 100%;
    height: auto;
    margin: 24px 0;
}

#tips-achievement .button-before {
    margin: 64px auto 0 0;
}

@media (max-width: 768px) {

    #tips-achievement {
        width: 90%;
        margin: 0 auto;
    }

}

/*===================================
無料査定・問い合わせ
===================================*/

#contact {
    background-color: #fff;
    padding: 96px 0;
}

/*　LINEで無料査定・お問い合わせ　*/

#contact-line {
    width: min(1096px, 100%);
    background-color: #F8F8F8;
    padding: 64px 40px;
    margin: 0 auto;
    text-align: center;

    *:nth-child(n+2) {
        margin-top: 40px;
    }
}

#contact-line h2 {
    color: #01A906;
    font-size: 1.5rem;
}

#contact-line p {
    line-height: 1.5;
}

#contact-line a {
    max-width: 100%;
    margin: 0 auto;
}

/*　メールフォームからお問い合わせ　*/

#contact-mail {
    width: min(1096px, 100%);
    background-color: #F8F8F8;
    padding: 64px 40px;
    margin: 64px auto 0;
}

#contact-mail h2 {
    color: #FF8629;
    font-size: 1.5rem;
}

#contact-mail ul {
    width: fit-content;
    margin: 40px auto;
    list-style-position: inside;
}

#contact-mail li {
    line-height: 1.5;
    padding-left: 1.2rem;
    text-indent: -1.4rem;
}

#contact-mail .guide {
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

/* メールフォーム */

#contact-mail .wpcf7-form {
    width: 856px;
    max-width: 100%;
    margin: 40px auto 0;
}

/*レイアウト*/

#contact-mail .wpcf7-form .flex:not(:last-child),
#contact-mail .wpcf7-form .flex-top:not(:last-child) {
    margin-bottom: 24px;
}

/*　項目　*/
#contact-mail .wpcf7-form label {
    display: flex;
    align-items: center;
    font-weight: 600;
    line-height: 1.5;
    gap: 8px;
}

/*　必須　*/
#contact-mail .wpcf7-form .required {
    display: block;
    color: #fff;
    background-color: #FF8629;
    font-size: 14px;
    font-weight: 400;
    padding: 4px;
    border-radius: 1px;
    white-space: nowrap;
}

#contact-mail .wpcf7-list-item-label {
    font-weight: 400;
    line-height: 1.5;
}

/* 入力エリア */
#contact-mail .wpcf7 input[type="text"],
#contact-mail .wpcf7 input[type="email"],
#contact-mail .wpcf7 input[type="tel"],
#contact-mail .wpcf7 textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
    letter-spacing: .05;
}

#contact-mail .wpcf7 textarea {
    resize: none;
}

/* プライバシーポリシー */
#contact-mail .check .wpcf7-list-item {
    margin: 0 1em 0 0;
}

.check a {
    text-decoration: underline;
}

/* 送信ボタン */
#contact-mail .wpcf7-submit {
    background: #FF8629 !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    padding: 24px 0;
    width: min(304px, 100%);
    border: 2px solid #FF8629;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    margin: 24px auto 0;
    transition: all 0.3s ease;
}

#contact-mail .wpcf7-submit:hover {
    background: #fff !important;
    color: #FF8629 !important;
}

@media (max-width: 1224px) {

    #contact {
        padding: 96px 64px;
    }
}

@media (max-width: 768px) {

    #contact {
        padding: 96px 0px;
    }

    #contact-mail {
        padding: 32px 24px;
    }
}

/*===================================
退去連絡（解約通知フォーム）
===================================*/

/* 全体レイアウト */
#moveout {
    background-color: #fff;
    padding: 96px 0;
}

#moveout .wpcf7 {
    width: min(1096px, 100%);
    margin: 0 auto;
    padding: 64px 40px;
    background: #F8F8F8;
}

/* フォーム */
#moveout .wpcf7-form {
    width: 856px;
    max-width: 100%;
    margin: 0 auto;
}

/*　案内文　*/
#moveout .wpcf7-form .guid {
    text-align: center;
    margin-bottom: 64px;
}

/*レイアウト*/
#moveout .wpcf7-form .block:not(:last-child) {
    margin-bottom: 24px;
}

#moveout .wpcf7-form .radio p {
    display: flex;
    align-items: center;
    gap: 4px;
}

/*　項目　*/
#moveout .wpcf7-form label {
    display: flex;
    align-items: center;
    font-weight: 600;
    white-space: nowrap;
    gap: 8px;
}

/* チェック・ラジオ */
#moveout .wpcf7-form .radio {
    display: flex;
    align-items: center;
    gap: 16px;
}

#moveout .wpcf7-radio {
    display: flex;
    align-items: center;
    gap: 16px;
}

#moveout .radio .wpcf7-list-item {
    margin: 0px;
}

#moveout .choice .wpcf7-list-item {
    margin: 0 16px 0 0;
}

#moveout .wpcf7-list-item-label {
    margin-left: 4px;
}

/*　必須　*/
#moveout .wpcf7-form .required {
    display: block;
    color: #fff;
    background-color: #FF8629;
    font-size: 14px;
    font-weight: 400;
    padding: 4px;
    border-radius: 1px;
}

/* 入力エリア */
#moveout .wpcf7 input[type="text"],
#moveout .wpcf7 input[type="email"],
#moveout .wpcf7 input[type="tel"],
#moveout .wpcf7 input[type="number"],
#moveout .wpcf7 select,
#moveout .wpcf7 textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
    letter-spacing: .05;
}

#moveout .wpcf7 #property-name,
#moveout .wpcf7 #parking-number,
#moveout .wpcf7 #room-number,
#moveout .wpcf7 #key-hour,
#moveout .wpcf7 #account-type,
#moveout .wpcf7 #account-number {
    width: 50%;
}

#moveout .wpcf7 #taikyo-year,
#moveout .wpcf7 #key-year {
    width: 80px;
}

#moveout .wpcf7 #taikyo-month,
#moveout .wpcf7 #key-month,
#moveout .wpcf7 #taikyo-day,
#moveout .wpcf7 #key-day {
    width: 56px;
}

#moveout .wpcf7 textarea {
    resize: none;
}

/* 横並びブロック（電話番号・日付など） */
#moveout .flex p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

/* 注意事項 */
#moveout .precautions,
#moveout .check {
    font-weight: 600;
    line-height: 2;
}

#moveout ul {
    margin-left: 32px;
    line-height: 2;
}

#moveout ul,
#moveout small,
#moveout .note,
#moveout .check {
    margin-bottom: 32px;
}

#moveout .note {
    margin-bottom: 16px;
}

/* セクション見出し */
#moveout .bank-title {
    font-size: 1.5rem;
    color: #FF8629;
    margin-bottom: 0;
}

#moveout p {
    line-height: 1.5;
}

#moveout .red {
    color: red;
}

/* 送信ボタン */
#moveout .wpcf7-submit {
    background: #FF8629 !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    padding: 24px 0;
    width: 304px;
    border: 2px solid #FF8629;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    transition: all 0.3s ease;
}

#moveout .wpcf7-submit:hover {
    background: #fff !important;
    color: #FF8629 !important;

}

@media screen and (max-width: 768px) {

    #moveout .wpcf7 {
        padding: 32px 24px;
    }

    #moveout .radio,
    #moveout .wpcf7-radio {
        flex-wrap: wrap;
    }

    #moveout .wpcf7-submit {
        width: 100%;
        font-size: 18px;
        padding: 18px 0;
    }

    #moveout ul {
        margin-left: 1em;
    }
}

/*===================================
無料相談
===================================*/

#breadcrumbs {
    background-color: #fff;
    padding: 96px 0 0;
}

#breadcrumbs h2 {
    font-size: 2rem;
}

.underline-green {
    text-decoration: underline 16px #ECF5DB;
    text-underline-offset: 0;
}

#breadcrumbs div {
    background: url(../img/bg/bg-breadcrumbs.jpg)no-repeat center center / cover;
    padding: 40px 64px 0;
    margin: 64px 0 0;
    overflow: hidden;
}

#breadcrumbs ul {
    display: flex;
    justify-content: center;
    gap: 24px;
    list-style: none;
    width: min(1096px, 100%);
    margin: 0 auto;
}

#breadcrumbs ul li {
    background-color: #fff;
    width: 344px;
    padding: 24px 0;
    text-align: center;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 4px;
}

#breadcrumbs div img {
    display: block;
    width: 320px;
    margin: 40px auto 0;
}

#contact p:not(#contact-line p, #contact-mail p) {
    font-size: clamp(1.25rem, 1.068rem + 0.78vw, 2rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: 40px;
}

@media (max-width: 1224px) {

    #breadcrumbs ul {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    #breadcrumbs div {
        padding: 40px 0 0;
    }
}

/*===================================
よくある質問
===================================*/

#faq {
    background-color: #fff;
    padding: 96px 0;
}

#faq p:not(.faq-accordion p) {
    text-align: center;
}

/*アコーディオン1*/

.faq-accordion {
    list-style: none;
    width: min(960px, 100%);
    margin: 40px auto 0;

    &:not(:first-of-type) {
        margin: 2px auto 0;
    }
}

.faq-accordion li {
    background-color: #659B00;
}

.faq-category {
    position: relative;
    /*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    color: #fff;
    font-size: 1.25rem;
    height: 64px;
    line-height: 64px;
    padding: 0 16px;
    text-align: left;
    transition: all .5s ease;
}

.faq-category img {
    margin: 0 16px 4px 0;
}

/*アイコンの＋と×*/
.faq-category:before,
.faq-category:after {
    position: absolute;
    top: 50%;
    right: 24px;
    content: '';
    width: 2px;
    height: 12px;
    border-radius: 9999px;
    background-color: #fff;
    transform-origin: 50% calc(100% - 1px);
}

.faq-category:before {
    transform: translateY(-50%) rotate(45deg);
}

.faq-category:after {
    transform: translateY(-50%) rotate(-45deg);
}

/*　closeというクラスがついたら形状変化　*/

.faq-category.close::before {
    top: 30%;
    transform: rotate(135deg);
}

.faq-category.close::after {
    top: 30%;
    transform: rotate(-135deg);
}

/*アコーディオンで現れるエリア*/
.faq-label {
    display: none;
    /*はじめは非表示*/
    background: #F8F8F8;
    padding: 24px 24px;
}

/*アコーディオン2*/

.faq-accordion2 {
    list-style: none;
}

.faq-accordion2 li {
    background-color: #fff;
    margin-bottom: 24px;
}

.question {
    position: relative;
    /*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    color: #333;
    font-size: 1rem;
    text-indent: -1.8rem;
    padding: 16px 40px 16px 48px;
    text-align: left;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.question:before,
.question:after {
    position: absolute;
    top: 50%;
    right: 24px;
    content: '';
    width: 2px;
    height: 12px;
    border-radius: 9999px;
    background-color: #333;
    transform-origin: 50% calc(100% - 1px);
}

.question:before {
    transform: translateY(-50%) rotate(45deg);
}

.question:after {
    transform: translateY(-50%) rotate(-45deg);
}

/*　closeというクラスがついたら形状変化　*/

.question.close::before {
    top: 30%;
    transform: rotate(135deg);
}

.question.close::after {
    top: 30%;
    transform: rotate(-135deg);
}

/*アコーディオンで現れるエリア*/
.answer {
    display: none;
    /*はじめは非表示*/
    color: #333;
    padding: 16px 24px 24px;
    line-height: 1.5;
}

.answer p {
    text-indent: -1.7rem;
    padding-left: 1.7rem;
}

@media (max-width: 1224px) {

    #faq {
        padding: 96px 64px;
    }
}

@media (max-width: 768px) {

    #faq {
        padding: 96px 0px;
    }

    #faq p:not(.faq-accordion p) {
        width: 90%;
        margin: 0 auto;
    }

    .faq-accordion {
        width: 90%;
    }
}

/*===================================
必見!失敗しない不動産売却法!!
===================================*/

/*　不動産売却法メインビュー　*/

.sale-mv {
    background: url(../img/bg/bg-sale.jpg)no-repeat center center / cover;
    padding: 64px 0 0;
}

.sale-content {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 24px;
    width: min(1200px, 100%);
    margin: 0 auto;
    padding: 0 64px;
}

.sale-mv-text {
    width: fit-content;
}

.sale-mv-text h2 {
    text-align: left;
    margin: 0 auto 0 0;
}

.sale-mv-text h2 span {
    display: block;
    color: #fff;
    font-size: clamp(1.75rem, 1.325rem + 1.81vw, 3.5rem);
    line-height: 1.5;
    font-weight: 600;
    background-color: #659B00;
    padding: 0px 16px 4px;
    width: fit-content;
    white-space: nowrap;

    &:nth-of-type(2) {
        margin-top: 16px;
        padding: 0px 0px 4px 24px;
    }
}

.sale-option {
    display: flex;
    list-style: none;
    gap: clamp(0.25rem, 0.068rem + 0.78vw, 1rem);
    margin: 24px 0;
}

.sale-option li {
    position: relative;
    width: clamp(6.5rem, 5.286rem + 5.18vw, 11.5rem);
    height: clamp(6.5rem, 5.286rem + 5.18vw, 11.5rem);
    background-color: #FFF;
    border: 2px solid #659B00;
    border-radius: 50%;
}

.sale-option p {
    position: absolute;
    top: 48%;
    left: 52%;
    transform: translate(-50%, -50%);
    color: #659B00;
    font-size: clamp(0.75rem, 0.629rem + 0.52vw, 1.25rem);
    line-height: 1.5;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.sale-content img {
    width: 460px;
}

.request {
    color: #fff;
    font-size: clamp(1.25rem, 1.068rem + 0.78vw, 2rem);
    font-weight: 600;
    line-height: 1.5;
    background-color: #ff9800;
    padding: 16px 0;
    text-align: center;
}

@media (max-width: 1200px) {

    .sale-content {
        flex-wrap: wrap;
    }

    .sale-option {
        justify-content: center;
    }
}

@media (max-width: 768px) {

    .sale-content {
        padding: 0;
    }

    .sale-content img {
        width: min(460px, 60%);
        min-width: 280px;
    }

}

/*　3つの売却方法　*/

#solution {
    padding: 96px 0;
    text-align: center;
    background-color: #fff;
}

.solution {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: min(1096px, 100%);
    margin: 40px auto 0;
}

.solution li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    height: 376px;
    padding: 32px 24px;
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.solution-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.solution-row li {
    flex: 1 1 calc(33.333% - 16px);
    /* 3列時の1つあたりの幅 */
    background: #F8F8F8;

    &:first-of-type h3 {
        line-height: 1.3;
    }
}

.solution li p {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 2rem;
    border-bottom: 1px solid #333;
    width: fit-content;
    margin: 0 auto;
    padding: 0 8px;
}

@media (max-width: 1224px) {

    .solution {
        padding: 0px 64px;
    }
}

@media (max-width: 768px) {

    .solution {
        padding: 0;
        width: 90%;
    }

    .solution li {
        height: fit-content;
        gap: 16px;
    }

    .solution-row li {
        flex: 1 1 100%;
    }
}

@media (max-width: 428px) {

    #solution {
        padding: 48px 0;
    }
}

/*　売却方法3つ　*/

#method1,
#method3 {
    background-color: #ECF5DB;
    padding: 96px 0 0;
}

#method2 {
    background-color: #FFF0E5;
    padding: 96px 0 0;
}

.method1,
.method2,
.method3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    background-color: #fff;
    width: min(1096px, 100%);
    padding: 40px 0;
    margin: 0 auto;
}

.method1 div,
.method2 div,
.method3 div {
    width: min(580px, 90%);
}

.method1 div div,
.method2 div div,
.method3 div div {
    display: flex;
    align-items: center;
    column-gap: 16px;
    row-gap: 8px;
    text-align: left;
    width: 100%;
}

.method1 div span,
.method3 div span {
    color: #FF8629;
    font-size: 3.5rem;
    font-weight: 600;
}

.method2 div span {
    color: #659B00;
    font-size: 3.5rem;
    font-weight: 600;
}

.method1 h2,
.method3 h2 {
    color: #FF8629;
    font-size: 2rem;
    text-align: left;
}

.method2 h2 {
    color: #659B00;
    font-size: 2rem;
    text-align: left;
}

.method1 div p,
.method2 div p,
.method3 div p {
    margin: 40px 0 0;
    line-height: 1.5;
    text-align: justify;
}

.method1 img,
.method2 img,
.method3 img {
    width: min(400px, 90%);
}

@media (max-width: 1224px) {

    .method1,
    .method2,
    .method3 {
        flex-wrap: wrap;
        padding: 40px 64px;
    }
}

@media (max-width: 768px) {

    .method1,
    .method2,
    .method3 {
        padding: 40px 0;
    }

    .method1 div div,
    .method2 div div,
    .method3 div div {
        justify-content: center;
        flex-wrap: wrap;
    }

    .method1 div span,
    .method2 div span,
    .method3 div span {
        font-size: 2.5rem;
    }

    .method1 h2,
    .method2 h2,
    .method3 h2 {
        font-size: 1.5rem;
        text-align: center;
    }
}

@media (max-width: 428px) {

    #method1,
    #method2,
    #method3 {
        padding: 48px 0 0;
    }
}

/*　こんな人方におすすめ　*/

.recommendation {
    background-color: #fff;
    margin: 64px 0;
    padding: 40px 64px;
}

.recommendation ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    width: min(90%, 1096px);
    margin: 24px auto 0;
    list-style: none;
}

.recommendation li {
    position: relative;
    width: min(100%, 352px);
    height: 88px;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid #777;
    border-radius: 4px;
    background-image: url(../img/icon/check.png);
    background-repeat: no-repeat;
    background-position: left 16px top 50%;
    background-size: 24px auto;
}

#method1 .recommendation li,
#method3 .recommendation li {
    color: #FF8629;
}

#method2 .recommendation li {
    color: #659B00;
}

.recommendation p {
    position: absolute;
    top: 50%;
    left: 48px;
    transform: translateY(-50%);
}

@media (max-width: 768px) {

    .recommendation {
        padding: 40px 0;
    }
}

/*　プライムオリジナル買取システムの一例　*/

.example {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 0 auto;
    padding: 0 64px;
}

.example div {
    width: min(664px, 100%);
}

.example h4 {
    font-size: 1.5rem;
    background-color: #fff;
    padding: 8px 16px;
    width: fit-content;
}

.example div p {
    margin-top: 40px;
    line-height: 1.5;
    text-align: justify;
}

.example img {
    width: min(400px, 100%);
}

@media (max-width: 1224px) {

    .example {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .example {
        width: 90%;
        padding: 0;
    }
}

@media (max-width: 428px) {
    .example h4 {
        font-size: 1.25rem;
    }
}

/*　メリット　*/

#merit {
    position: relative;
    padding: 96px 64px;
    margin-top: 96px;
    background-color: #fff;
}

#merit:before {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
}

#method1 #merit:before {
    background: url(../img/bg/bg-merit1.jpg)no-repeat center center /cover;
}

#method2 #merit:before {
    background: url(../img/bg/bg-merit2.jpg)no-repeat bottom center /cover;
}

#method3 #merit:before {
    background: url(../img/bg/bg-merit3.jpg)no-repeat center center /cover;
}

#merit h2 {
    font-size: 2rem;
    max-width: 90%;
}

#merit h3 {
    color: #FF8629;
    font-size: 1.5rem;
    width: fit-content;
    max-width: 90%;
    padding: 8px 16px;
    border: 1px dashed #659B00;
    margin: 24px auto 0;
}

#merit .lead {
    line-height: 1.5;
    text-align: center;
    width: min(800px, 100%);
    margin: 24px auto 0;
}

#merit ol {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 64px;
    list-style: none;
    margin: 96px auto 0;
    width: min(1096px, 100%);
}

#merit li {
    position: relative;
    padding: 64px 16px 40px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

#method1 #merit li,
#method3 #merit li {
    background-color: #ECF5DB;
}

#method2 #merit li {
    background-color: #FFF0E5;
}

#method1 #merit li {
    width: 344px;
    height: 344px;
}

#method2 #merit li {
    width: 536px;
    height: 328px;
}

#method3 #merit li {
    width: 344px;
    height: 264px;
}

#merit li .number {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    font-size: 1.75rem;
    line-height: 60px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    border-radius: 50%;
}

#method1 #merit .number,
#method3 #merit .number {
    background-color: #659B00;
}

#method2 #merit .number {
    background-color: #FF8629;
}

#merit h4 {
    font-size: 1.25rem;
    color: #fff;
    padding: 8px;
}

#method1 #merit h4,
#method3 #merit h4 {
    background-color: #659B00;
}

#method2 #merit h4 {
    background-color: #FF8629;
}

#merit ol p {
    text-align: justify;
    margin-top: 16px;
    line-height: 1.5;
}

@media (max-width: 768px) {

    #merit {
        margin-top: 48px;
        padding: 96px 0px;
    }

    #merit h2 {
        font-size: 1.5rem;
    }

    #merit h3 {
        font-size: 1.25rem;
    }

    #merit h4 {
        font-size: 1.125rem;
    }

    #merit .lead {
        width: 90%;
    }
}

@media (max-width: 428px) {

    #merit {
        padding: 48px 0px;
    }

    #merit ol {
        margin: 48px auto 0;
    }

    #method1 #merit li,
    #method2 #merit li,
    #method3 #merit li {
        width: 90%;
        height: fit-content;
    }

    #merit .lead {
        text-align: justify;
    }
}

/*　デメリット　*/

#disadvantages {
    padding: 96px 64px;
    background-color: #fff;
}

#disadvantages h2:not(.quick-reference h2) {
    font-size: 2rem;
    max-width: 90%;
}

#disadvantages p:not(#disadvantages ol p) {
    width: min(800px, 90%);
    background-color: #F8F8F8;
    padding: 24px;
    margin: 24px auto 0;
    line-height: 1.5;
    text-align: center;
}

#disadvantages ol {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 64px;
    list-style: none;
    margin: 96px auto 0;
    width: min(1096px, 100%);
}

#disadvantages li {
    position: relative;
    padding: 64px 16px 40px;
    background-color: #F8F8F8;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    width: 344px;
    height: 360px;
}

#disadvantages li .number {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    font-size: 1.75rem;
    line-height: 60px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background-color: #777777;
    border-radius: 50%;
}

#disadvantages h4 {
    font-size: 1.25rem;
    color: #fff;
    background-color: #777777;
    padding: 8px 0;
}

#disadvantages ol p {
    text-align: justify;
    margin-top: 16px;
    line-height: 1.5;
}

@media (max-width: 768px) {

    #disadvantages {
        padding: 96px 0px;
    }

    #disadvantages h2:not(.quick-reference h2) {
        font-size: 1.5rem;
    }
}

@media (max-width: 428px) {

    #disadvantages {
        padding: 48px 0px;
    }

    #disadvantages ol {
        margin: 48px auto 0;
    }

    #disadvantages li {
        width: 90%;
        height: fit-content;
    }

    #disadvantages p:not(#disadvantages ol p) {
        text-align: justify;
    }

    #disadvantages h4 {
        font-size: 1.125rem;
    }
}

/*　早見表　*/

.horizontal-scrolling {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.quick-reference {
    background-color: #fff;
    padding: 96px 0 0;
    margin: 96px auto 0;
    border-top: solid 1px #333;
    width: min(1096px, 100%);
}

.quick-reference-table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #c4dc7f;
    line-height: 1.7;
    text-align: center;
    margin-top: 40px;
    width: 100%;
    min-width: 600px;
}

.quick-reference table th,
.quick-reference table td {
    word-break: break-word;
}

.quick-reference table th {
    background-color: #ECF5DB;
    border: 1px solid #c4dc7f;
    padding: 24px;
}

.quick-reference table td {
    border: 1px solid #c4dc7f;
    padding: 24px;
}

.quick-reference th:first-child,
.quick-reference td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: #ECF5DB;
    background-clip: padding-box;
    width: 184px;
    min-width: 184px;
}

.quick-reference th:nth-child(2) {
    width: 45%;
}

.quick-reference th:nth-child(3) {
    width: 55%;
}

@media (max-width: 768px) {
    .quick-reference {
        padding: 48px 0 0;
        margin: 48px auto 0;
    }

    .horizontal-scrolling {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .quick-reference th:first-child,
    .quick-reference td:first-child {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        white-space: normal !important;
        width: 72px;
        min-width: 72px;
        max-width: 72px;
    }
}

/*===================================
プライバシーポリシー
===================================*/

#privacy {
    background-color: #fff;
    padding: 96px 64px;
}

.privacy {
    width: min(1200px, 100%);
    margin: 0 auto;

    h2 {
        font-size: 1.5rem;
        text-align: left;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
        text-align: left;
        width: 100%;
        margin-bottom: 1rem;
    }

    h4 {
        font-size: 1.125rem;
        text-align: left;
        width: 100%;
        margin-bottom: .5rem;
    }

    div {
        margin-left: 1.5rem;
    }

    ul {
        list-style-position: inside;
        list-style: disc;
        margin: 0 0 1.5rem 1.5rem;
    }

    ol {
        list-style: none;
        margin-bottom: 1.5rem;
    }

    li {
        line-height: 1.5;
    }

    p {
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    a,
    a:hover,
    a:visited {
        color: #FF8629;
        display: inline;
        text-decoration: underline;
        word-break: break-all;
    }

    a:hover {
        opacity: .7;
    }
}

@media (max-width: 768px) {
    #privacy {
        padding: 96px 0px;
    }

    .privacy {
        width: 90%;

        h2 {
            font-size: 1.25rem;
        }

        h3 {
            font-size: 1.125rem;
        }

        h4 {
            font-size: 1rem;
        }
    }
}