@charset "utf-8";

/*
Theme Name:TENJIKU child
Theme URI:
Template: tenjiku_tcd091
Version:2.3
*/



/* ----------------------------------------

- ベース

---------------------------------------- */

:root {
    --colors-white: #fff;
    --colors-gray: #ccc;
    --colors-gray-2: #555;
    --colors-gray-4: #f7f7f7;
    --colors-gray-5: #c1c1c1;
    --colors-gray-8: #b5b5b6;
    --colors-gray-9: #dcdddd;
    --colors-gray-01: #666666;
    --colors-gold: #ad926a;
    --colors-beige: #EAE5DA;
    --colors-beige4: #e9e4dd;
    --colors-beige05: #f0ece8;
    --colors-black: #000000;
    --colors-black02: #272727;
    --colors-brown-01: #7a4e0c;
    --colors-navy-01: #040732;


    /* ohori theme */
    --colors-main-oh-01: #333;
    --colors-main-oh-02: #e8e8e8;
    /* sub は main-oh-01 (#333) と同系統で明度を一段上げたグレー (2026-05-28
       hakata7 equipment 移植時に旧 #223b48 青系から変更)。
       命名は ohori 色 (oh) から汎用 (theme) へ変更 — equipment 等で再利用可能。
       --colors-main-oh-01 / --colors-main-oh-02 は影響範囲広いため次回まとめてリネーム予定 */
    --colors-sub-theme-01: #4a4a4a;

    --colors-main-green: #496249;
    --colors-main-green2: #325a26;
    --colors-main-beige: #d4cab4;
    --colors-main-beige-text: #746d60;
	
    /*--colors-main-gray: #4b4949;*/
    --colors-main-gray: var(--c-gray); /* 集約: colors.css --c-gray (#4c4948) */
    --colors-main-gray2: #0E202A;
    --colors-sub-gray: #898989;
    --colors-sub-gray2: #727171;
    --colors-sub-gray3e: #3e3a39;
    --colors-main-landic: #030336;

    --colors-sub-bright-green: #8bae64;
    --colors-sub-brown: #778c66;
    --colors-sub-smoky-red: #b0462e;
    --colors-sub-blue: #0F366A;

    --colors-button-yellow: #FFC107;
    --colors-button-yellow-active: #dda637;

    --colors-plan: #346782;

}

html {
   /*scroll-behavior: smooth;*/
    scroll-behavior: auto !important;
}

body {
    letter-spacing: 0.08em;
}

p {
    line-height: 1.5;
}

@media screen and (max-width:750px) {
    #container {
        padding-bottom: 50px;
    }
}

/* アイコン
---------------------------------------- */
.icon-yazirusi {
    content: "";
    font-family: 'design_plus';
    color: #4C4948;
    font-size: 12px;
}

/* ----------------------------------------

- tenjiku thema color

---------------------------------------- */

#drawer_menu {
    background-color: var(--colors-main-oh-01) !important;
}

#container .owl-carousel .owl-nav {
    top: 200px;
}

#container .owl-carousel .owl-nav .owl-prev,
#container .owl-carousel .owl-nav .owl-next {
      background-color: var(--colors-main-oh-01) !important;
}

#container .owl-carousel .owl-nav .owl-prev:hover,
#container .owl-carousel .owl-nav .owl-next:hover {
    /*background-color: var(--colors-sub-blue) !important;*/
    background-color: var(--colors-main-oh-02) !important;
}

#return_top a {
    background-color: var(--colors-main-oh-01) !important;
}

#return_top a:hover {
    background-color: var(--colors-main-oh-02) !important;
}

.design_button.animation_type1:hover {
    background: var(--colors-main-beige) !important;
}

#header,
#header_circle.animate {
    background-color: var(--colors-main-oh-01);
}

#header_logo a {
    color: #fff;
}

#drawer_menu_button span {
    background: #fff;
}

body.home.header_fix #header {
    background-color: var(--colors-main-oh-01) !important;
}

body.home.header_fix #header_logo a .logo_text {
    color: #fff;
}

body.home.header_fix #drawer_menu_button span {
    background: #fff;
}

#header_logo .logo_text {
    font-weight: 500;
}

.cb_carousel.num4 .button.animation_type2:hover {
    color: var(--colors-main-beige-text) !important;
    background: none;
    background-color: var(--colors-main-oh-01) !important;
}

.cb_carousel.num4 .button:before {
    background: var(--colors-main-beige) !important;
    ;
}

/* ----------------------------------------

- underline

---------------------------------------- */

.under01 {
    background: linear-gradient(transparent 95%, var(--colors-main-landic) 0%) !important;
    display: inline !important;
    padding-bottom: 12px !important;
    line-height: 2 !important;
}


/* ----------------------------------------

- 共通のスタイル

---------------------------------------- */


/* 検索窓非表示
---------------------------------------- */
#drawer_menu_search {
    display: none !important;
}

#drawer_menu .logo_text {
    font-weight: 500;
}

.cb_box_content.num2 .title {
    font-size: 30px !important;
}

@media screen and (max-width:750px) {
    .cb_box_content.num2 .title {
        font-size: 20px !important;
    }
}

#bread_crumb ul {
    width: auto !important;
}

/* cvArea
---------------------------------------- */
.cvArea.active {
    right: 62px;
}

.cvArea {
    display: flex;
    position: fixed;
    bottom: 0px;
    right: 0px;
    gap: 2px;
    z-index: 10;
    transition: right .5s, width .5s;
}

.cvArea .cvArea_item {
    display: block;
    padding: 22px 0;
    background-color: var(--colors-button-yellow);
    text-align: center;
    box-sizing: border-box;
    letter-spacing: 0.08em;
    min-width: 170px;
    color: #000;
}

.cvArea .cvArea_item:hover {
    display: block;
    background-color: var(--colors-button-yellow-active);
    text-align: center;
    box-sizing: border-box;
    letter-spacing: 0.08em;
    color: #000;
}


@media screen and (max-width:750px) {
    .cvArea {
        display: none;
    }

    .cvArea.active {
        /* right: 62px; */
        right: 52px;
        width: calc(100% - 50px);
    }

    .cvArea {
        width: 100%;
    }

    .cvArea .cvArea_item {
        min-width: inherit;
        width: 100%;
        padding: 18px 0;
    }

}


/* .dp-footer-bar
---------------------------------------- */
.dp-footer-bar a .label {
    bottom: -15px !important;
}

.dp-footer-bar .footer_bar_icon:before {
    top: -8px !important;
}


/* ----------------------------------------

- header

---------------------------------------- */
body.home #header {
	background-color: var(--colors-main-oh-01);
}

body.home #header_logo {
  /*left: 70px;
  -webkit-transform: translate(0%, 50%);
  transform: translate(0%, 50%);*/
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}

body.home #header_logo.animate {
  opacity: 1;
  -webkit-animation: none !important;
  animation: none !important;
}


#header_slider .item2 .catch,
#header_slider .item2 .desc p {
    /* 管理画面の設定だけで有効になっている */
    /* font-family: "游ゴシック", YuGothic!important; */
}


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

    /* top */
    body #header_logo {
        padding-left: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    body.home #header_logo {
        padding-left: 16px;
        width: 100%;
        box-sizing: border-box;
        left: 50% !important;
        transform: translate(-50%, -50%);
    }

    body #header_logo a .logo_text {
        font-size: 18px !important;
    }

    body.header_fix #header_logo {
        padding-left: 16px;
        width: 100%;
    }

    /*#header_slider .caption {
        top: 90%;
    }*/

    #header_slider .caption a {
        position: relative;
    }

    #header_slider .caption a::after {
        content: "";
        font-family: 'design_plus';
        color: #fff;
        font-size: 10px;
        position: absolute;
        right: 16px;
    }

    #header_slider .button {
        min-width: 320px !important;
    }
}


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

/* drawer_menu */

/*body.home #drawer_menu_button {
  right: 40px;
  bottom: -30px;
}*/

body.home.header_fix #drawer_menu_button {
  right: 0px;
  bottom: 0px;
}

#drawer_menu_button {
    z-index: 10;
}

@media screen and (max-width:750px) {
    body.home #drawer_menu_button {
      right: 0px;
      bottom: 0px;
    }

    #drawer_menu .logo {
        font-size: 20px;
    }
}


/* ----------------------------------------

- footerPrBanner

---------------------------------------- */
.footerPrBanner {
  background-color: var(--colors-main-oh-02) !important;
}

.footerPrBanner a:hover {
	opacity: 0.8;
  }



/* ----------------------------------------

- footer

---------------------------------------- */

body.home #footer {
    margin-top: 0;
}

#footer {
    margin-top: 80px;
}

/* layout詳細のみマージン削除 */
body.single-news #footer {
    margin-top: 0;
}

/* drawer_menu
---------------------------------------- */

#drawer_menu .dButtonArea {
    display: grid;
    /*grid-template-columns: 1fr 1fr; 来場予約公開時*/
    grid-template-columns: 1fr;
    gap: 40px;
    justify-items: center;
    margin-bottom: 48px;
}

#drawer_menu .dButtonArea a:first-child {
  margin-left: auto;
}

#drawer_menu .dButtonArea a:last-child {
  margin-right: auto;
}

@media screen and (max-width:750px) {
  #drawer_menu .dButtonArea {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 20px;
  }

  #drawer_menu .dButtonArea a {
    margin-left: auto;
    margin-right: auto;
  }
}

/* footer_top_inner
---------------------------------------- */
#footer_top {
    height: 840px; /* default */
    /*height: 900px; /* single line 用 */
    /*height: 930px; /* two lines 用 yokoku on */
    /*height: 820px; /* two lines 用 yokoku off */
    background-color: var(--colors-main-oh-01);
}


#footer_logo .logo a {
    width: 280px;
    margin-left: auto;
    margin-right: auto;
}

#footer_logo .logo a img {
    width: 280px;
    margin-top: 30px;
}

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

    #footer_logo .logo a {
        width: 224px;
    }

    #footer_logo .logo a img {
        width: 224px;
    }
}



/* footer_top_inner
---------------------------------------- */
#footer_top_inner {
    /*top: calc(50% - 200px);*/
    /*top: calc(50% - 230px); /* single line 用 */
    top: calc(50% - 240px); /* two lines 用 yokoku on off */
}

/* footer_info
---------------------------------------- */
#footer_info {
  /*background-color: inherit !important;*/
  background: rgba(0,0,0,0.2);
}
#footer_info p {
    font-size: 14px !important;
}

#footer_info .widget_custom_html {
    display: block;
}

/* yokoku */
#footer_top_inner .widget_custom_html .footer_yokoku {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: -40px;
}

#footer_top_inner .widget_custom_html .footer_yokoku .footer_yokoku_inner {
    color: #fff;
    padding: 16px 32px;
    border: 1px solid #fff;
    font-size: 12px;
}

#footer_top_inner .widget_custom_html .footer_yokoku .footer_yokoku_inner .footer_yokoku_inner_head {
    margin-bottom: 8px;
}

/* footer_menu_contents */










/* footer_menu_above */
#footer_top_inner #footer_menu_above {
    /*bottom: -125px; /* single line 用 */
    bottom: -115px; /* two lines 用 yokoku on */
}

/* footer_menu_bottom */
#footer_top_inner #footer_menu_bottom {
    bottom: -155px;
    /* two lines 用 yokoku on */
}

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

    #footer_top_inner .widget_custom_html .footer_yokoku {
        margin-top: 24px;
        margin-bottom: 0;
    }

    #footer_top_inner .widget_custom_html .footer_yokoku .footer_yokoku_inner {
        padding: 12px 16px;
        font-size: 12px;
        margin: 0 16px;
    }

    

}

/* companyLogo */









/* tel */
#footer_info .widget_custom_html .footer_tel {
    color: #fff;
    margin-top: 32px;
}

#footer_info .widget_custom_html .footer_tel .footer_tel_head {
    color: #fff;
}

#footer_info .widget_custom_html .footer_tel .footer_tel_num a {
    text-decoration: none !important;
    font-size: 32px;
    font-weight: 700;
}

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

    #footer_info .widget_custom_html .footer_tel {
        display: none;
        margin-top: 24px;
    }

    #footer_info .widget_custom_html .footer_tel .footer_tel_num a {
        text-decoration: none;
        font-size: 18px;
    }

}


/* premium footer
---------------------------------------- */
/*
  yokoku koukou open のときコメントアウト。
.pg-premium #footer_top {
  height: 680px;
}

.pg-premium .footer_yokoku_inner_head,
.pg-premium .footer_yokoku_inner_txt {
  display: none;
}*/


@media screen and (max-width: 750px) {
  .pg-premium #footer_top {
    height: auto;
  }
	/*.pg-premium #footer_top_inner {*/
  #footer_top_inner {
    padding: 16px 0 44px !important;
  }
}

/* footer_carousel
---------------------------------------- */
#footer_carousel_wrap {
    width: 100vw;
    overflow: hidden;
}


/* button
---------------------------------------- */



/* remarks
---------------------------------------- */
.remarks {
    color: #AAA;
    font-size: 14px;
    line-height: 1.7;
}

@media screen and (max-width:750px) {
    .remarks {
        font-size: 12px;
    }
}


/* postContentRow
---------------------------------------- */
.postContentRow {
    display: flex;
    justify-content: center;
    padding: 0;
    background-color: var(--colors-white);
}

.postContentRow.postContentRow-img {
    background-size: cover;
}

.postContentRow.postContentRow-white {
    background-color: var(--colors-white);
}

.postContentRow.postContentRow-ivory {
    background-color: #f4efe7;
}



.postContentRow.postContentRow-gold {
    background-color: var(--colors-gold);
}

















.postContentRow.postContentRow-beige4 {
    background-color: var(--colors-beige4);
}

.postContentRow.postContentRow-premium {
  /*background-color: #3a3a3a;*/
  background-color: var(--colors-main-oh-01);
}






.postContentRow.postContentRow-premiumLayout,
.postContentRow #news_archive,
.postContentRow.postContentRow-premium-banner {
  background-color: var(--colors-main-oh-02);
}



.postContentRow .postContentRow_inner {
    min-width: 1160px;
    width: 1160px;
    padding: 60px 16px;
    box-sizing: border-box;
}

















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

    .postContentRow .postContentRow_inner {
        min-width: inherit;
        width: 100%;
        padding: 40px 16px 40px 16px;
    }

    

    
}


/* ----------------------------------------

- post_content components

---------------------------------------- */

/* common
---------------------------------------- */
.post_content img {
    max-width: 100%;
    /*margin-top: 20px;*/
}

/* imgBlock
---------------------------------------- */
.imgBlock {
    display: flex;
    justify-content: center;
}

.imgBlock.imgBlock-s {
    margin-bottom: 40px;
}

.imgBlock.imgBlock-s img {
    width: 400px;
}

.imgBlock.imgBlock-m {
    margin-bottom: 60px;
}

.imgBlock.imgBlock-m img {
    width: 600px;
}

.imgBlock.imgBlock-l {
    margin-bottom: 80px;
}

.imgBlock.imgBlock-l img {
    width: 800px;
}



@media screen and (max-width:750px) {
    .imgBlock.imgBlock-s {
        margin-bottom: 20px;
    }

    .imgBlock.imgBlock-m {
        margin-bottom: 30px;
    }

    .imgBlock.imgBlock-l {
        margin-bottom: 40px;
    }

    
}

/* colBlock
---------------------------------------- */
.colBlock {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
}

.colBlock.colBlock-2 {
    grid-template-columns: 1fr 1fr;
}







.colBlock.colBlock-2e {
    grid-template-columns: 1fr 2fr;
}

.colBlock.colBlock-2f {
    grid-template-columns: 1fr 5fr;
}

.colBlock.colBlock-2g {
    grid-template-columns: 1fr 4fr;
}

.colBlock.colBlock-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.colBlock.colBlock-3b {
    grid-template-columns: 2fr 1fr 1fr;
}

.colBlock.colBlock-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}





/* PC (768+) のときだけ HTML の 2カラムを左右反転 (互い違いレイアウト用)
   SP は HTML 順 (画像→文章) のまま */
@media screen and (min-width: 768px) {
    .colBlock.colBlock-pc-reverse > div:nth-child(1) {
        order: 2;
    }
    .colBlock.colBlock-pc-reverse > div:nth-child(2) {
        order: 1;
    }
    /* PC で画像側を一段広げる非対称グリッド (1.4fr : 1fr)
       SP は colBlock-1-sp で 1fr に戻る */
    .colBlock.colBlock-asym-img-wide {
        grid-template-columns: 1.4fr 1fr;
    }
    /* PC で画像側をより広げる非対称グリッド (1.7fr : 1fr) */
    .colBlock.colBlock-asym-img-wider {
        grid-template-columns: 1.7fr 1fr;
    }
}


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

    .colBlock {
        gap: 16px;
    }

    .colBlock.gap50 {
        gap: 24px;
    }

    .colBlock.colBlock-1-sp {
        grid-template-columns: 1fr;
    }

    .colBlock.colBlock-2-sp {
        grid-template-columns: 1fr 1fr;
    }

    .colBlock.colBlock-3-sp {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .colBlock.colBlock-4-sp {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .colBlock.colBlock-5-sp {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

}


/* TB (768-1024px): -tb 用 colBlock variants
   colBlock-1-tb / -2-tb 等で TB 専用カラム数を上書き */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    .colBlock.colBlock-1-tb {
        grid-template-columns: 1fr;
    }

    .colBlock.colBlock-2-tb {
        grid-template-columns: 1fr 1fr;
    }

    .colBlock.colBlock-3-tb {
        grid-template-columns: 1fr 1fr 1fr;
    }

}

/* スタック時(TB+SP)に 2要素の縦並び順序を反転 (画像を上に・colBlock-1-tb/-1-sp と併用) */
@media screen and (max-width: 1024px) {
    .colBlock.colBlock-stack-reverse > *:nth-child(1) {
        order: 2;
    }
    .colBlock.colBlock-stack-reverse > *:nth-child(2) {
        order: 1;
    }
}



/* flexBox
---------------------------------------- */
.flexBox {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
}

.flexBox.nowrap {
    flex-wrap: nowrap;
}

.flexBox.flexBox-c2>div {
    width: calc(100%/2 - 12px);
    box-sizing: border-box;
}

.flexBox.flexBox-c2.gap50>div {
    width: calc(100%/2 - 25px);
    box-sizing: border-box;
}

.flexBox.flexBox-c3>div {
    width: calc(100%/3 - 16px);
    box-sizing: border-box;
}

.flexBox.flexBox-c3.gap50>div {
    width: calc(100%/3 - 34px);
    box-sizing: border-box;
}



.flexBox.flexBox-gc-central.gap50>div:nth-child(1) {
  width: calc(62.5% - 25px);
}

.flexBox.flexBox-gc-central.gap50>div:nth-child(2) {
  width: calc(37.5% - 25px);
}

.flexBox.reverse {
    flex-direction: row-reverse;
}

.justifyCenter {
    justify-content: center;
}

.justifyRight {
    justify-content: right;
}

.justifySpaceBetween {
    justify-content: space-between;
}

.flexBox .flexItemMain {
    width: calc(60% - 12px) !important;
}

.flexBox.gap50 .flexItemMain {
    width: calc(60% - 25px) !important;
}



.flexBox .flexItemMain2 {
    width: calc(70% - 12px) !important;
}

.flexBox.gap50 .flexItemMain2 {
    width: calc(70% - 25px) !important;
}

.flexBox .flexItemMain3 {
    width: calc(75% - 12px) !important;
}

.flexBox.gap50 .flexItemMain3 {
    width: calc(75% - 25px) !important;
}

.flexBox.gap24 .flexItemMain2 {
    width: calc(70% - 12px) !important;
}

.flexBox .flexItemSub {
    width: calc(40% - 12px) !important;
}

.flexBox.gap50 .flexItemSub {
    width: calc(40% - 25px) !important;
}



.flexBox .flexItemSub2 {
    width: calc(30% - 12px) !important;
}

.flexBox.gap50 .flexItemSub2 {
    width: calc(30% - 25px) !important;
}

.flexBox .flexItemSub3 {
    width: calc(25% - 12px) !important;
}

.flexBox.gap50 .flexItemSub3 {
    width: calc(25% - 25px) !important;
}

.flexBox.gap24 .flexItemSub2 {
    width: calc(30% - 12px) !important;
}

.flexBox.landic {
    align-items: center;
}

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

    .flexBox {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .flexBox.flexBox-c2>div {
        width: 100%;
    }

    .flexBox.flexBox-c2.gap50>div {
        width: 100%;
    }

    .flexBox.flexBox-c3>div {
        width: 100%;
    }

    .flexBox.flexBox-c3.gap50>div {
        width: 100%;
    }

    

    .flexBox.reverse {
        flex-direction: column;
    }

    .flexBox.reverse-sp {
        flex-direction: column-reverse;
    }

    .flexBox .flexItemMain {
        width: 100% !important;
    }

    .flexBox.gap50 .flexItemMain {
        width: 100% !important;
    }

    .flexBox.flexDirRow-sp .flexItemMain {
        width: calc(60% - 12px) !important;
    }

    

    .flexBox .flexItemMain2,
    .flexBox .flexItemMain3 {
        width: 100% !important;
    }

    .flexBox.gap24 .flexItemMain2,
    .flexBox.gap50 .flexItemMain2,
    .flexBox.gap50 .flexItemMain3  {
        width: 100% !important;
    }

    .flexBox .flexItemSub {
        width: 100% !important;
    }

    .flexBox.flexDirRow-sp .flexItemSub {
        width: calc(40% - 12px) !important;
    }

    .flexBox.gap50 .flexItemSub {
        width: 100% !important;
    }

    

    .flexBox .flexItemSub2,
    .flexBox.gap50 .flexItemSub2,
    .flexBox .flexItemSub3 {
        width: 100% !important;
    }

    .flexBox.gap24 .flexItemSub2,
    .flexBox.gap50 .flexItemSub3, {
        width: 100% !important;
    }

    /*.flexBox.flexBox-gc-central.gap50>div:nth-child(1) {
      width: 100% !important;
    }

    .flexBox.flexBox-gc-central.gap50>div:nth-child(2) {
      width: 100% !important;
    }*/

}



/* ----------------------------------------

- head

---------------------------------------- */


/* head01
---------------------------------------- */

.post_content .head01 {
    text-align: center;
    position: relative;
    padding-bottom: 24px;
    font-weight: bold;
    font-size: 40px;
    line-height: 1.5;
    margin-bottom: 40px;
}

.post_content .head01:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 120px;
    height: 2px;
    margin: 0 auto;
    background: #000;
}

@media screen and (max-width: 767px) {
    .post_content .head01 {
        font-size: 24px;
        padding-bottom: 20px;
    }

    .post_content .head01:after {
        width: 80px;
        height: 1px;
    }

}


/* head02
---------------------------------------- */

.post_content .head02 {
    text-align: center;
    position: relative;
    padding-bottom: 16px;
    font-weight: bold;
    font-size: 28px;
    line-height: 1.5;
    margin-bottom: 40px;
}

.post_content .head02:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 120px;
    height: 1px;
    margin: 0 auto;
    background: #000;
}

@media screen and (max-width: 767px) {
    .post_content .head02 {
        font-size: 20px;
        padding-bottom: 20px;
    }

    .post_content .head02:after {
        width: 80px;
        height: 1px;
    }

}

/* head03
---------------------------------------- */

.post_content .head03 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 32px;
}

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

    .post_content .head03 {
        font-size: 20px;
    }

}

/* head04
---------------------------------------- */

.post_content .head04 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 32px;
}

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

    .post_content .head04 {
        font-size: 18px;
    }

}

/* head05
---------------------------------------- */

.post_content .head05 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 24px;
}

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

    .post_content .head05 {
        font-size: 16px;
    }

}


/* head06
---------------------------------------- */

.post_content .head06 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--colors-black);
    border-left: 1px solid var(--colors-black);
    color: var(--colors-gray-01);
    padding: 8px 16px;
}

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

    .post_content .head06 {
        font-size: 16px;
    }

}


/* head07
---------------------------------------- */

.post_content .head07 {
    text-align: center;
    position: relative;
    font-weight: bold;
    font-size: 32px;
    margin-bottom: 40px;
    padding-bottom: 8px;
}

.post_content .head07:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    margin: 0 auto;
    background: #4C4948;
}

@media screen and (max-width: 767px) {
    .post_content .head07 {
        font-size: 20px;
    }

    .post_content .head07:after {
        width: 100%;
        height: 2px;
    }

}



/* ----------------------------------------

- buttons

---------------------------------------- */

/* button01
---------------------------------------- */

.button01 {
    display: inline-block;
    padding: 16px 32px;
    background-color: var(--colors-button-yellow);
    transition: .3s;
    color: #000 !important;
    text-align: center;
}

.button01:hover {
    color: #000 !important;
    background-color: var(--colors-button-yellow-active);
}





/* floorPlanButton
---------------------------------------- */

.floorPlanButton {
    display: inline-block;
    border: solid 1px #ccc !important;
    padding: 24px 0;
    /*color: #4C4948;*/
    color: #413e3c;
    text-align: center;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    line-height: 1.4;
    font-size: 20px;
}

.floorPlanButton.isTerrace {
    /*background-color: var(--colors-bg-terrace);*/
    background-color: #aba099;
    order: 100;
}

.floorPlanButton.isHills {
    /*background-color: var(--colors-bg-hills);*/
    background-color: #d8c597;
    order: 100;
}


.floorPlanButton .icon-yazirusi {
    position: absolute;
    right: 8px;
    top: calc(50% - 6px);
    transform: translate(-50%, 0);
    color: #000;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}

.floorPlanButton:before {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% + 2px);
    position: absolute;
    top: -1px;
    left: -100%;
    z-index: -1;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    background: #231815 !important;
}

/* hover */
.floorPlanButton:hover .icon-yazirusi {
    color: #fff;
}

.floorPlanButton:hover {
    color: var(--colors-white) !important;
    background: none;
    border-color: #231815 !important;
}

.floorPlanButton:hover:before {
    left: 0;
}


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

    .floorPlanButton {
        padding: 8px 0;
        font-size: 12px;
    }

    .floorPlanButton .icon-yazirusi {
        right: 0;
        font-size: 10px;
        transform: scale(0.6, 0.6);
    }


}

.widget_floorplan_title {
    color: #413e3c !important;
}

.sideMenufloorPlanList {
    margin-top: -8px !important;
}

/* sideMenufloorPlanButton
---------------------------------------- */

.sideMenufloorPlanButton {
    display: inline-block;
    border-bottom: solid 1px #ddd !important;
    /*padding: 12px 40px 12px 16px !important;*/
    padding: 12px 6px 12px 6px !important;
    position: relative;
    overflow: hidden;
    line-height: 1.4;
    font-size: 12px;
}

.sideMenufloorPlanButton.isTerrace {
    /*background-color: var(--colors-bg-terrace);*/
    order: 100;
}

.sideMenufloorPlanButton.isHills {
    /*background-color: var(--colors-bg-hills);*/
    order: 100;
}


.sideMenufloorPlanButton .icon-yazirusi {
    position: absolute;
    right: 16px;
    top: calc(50% - 6px);
    transform: translate(-50%, 0);
    color: #000;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    transform: scale(0.6, 0.6);
}

.sideMenufloorPlanButton:before {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% + 2px);
    position: absolute;
    top: -1px;
    left: -100%;
    z-index: -1;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    background: #d1d1d2 !important;
}

/* hover */

.sideMenufloorPlanButton:hover {
    color: #000 !important;
    background: none;
}

.sideMenufloorPlanButton:hover:before {
    left: 0;
}

/* 2colums */
.sideMenufloorPlanList .sideMenuLayoutType {
    float: left;
}

.sideMenufloorPlanButton-btNone {
  border: none !important;
}

.sideMenufloorPlanList .sideMenuLayoutType:nth-of-type(1),
.sideMenufloorPlanList .sideMenuLayoutType:nth-of-type(2) {
    margin-top: 12px;
    border-top: 1px solid #ddd !important;
}

.sideMenufloorPlanList .sideMenuLayoutType:nth-of-type(2n+1) {
    width: calc(50% - 1px) !important;
    border-right: 1px solid #ddd !important;
}

.sideMenufloorPlanList .sideMenuLayoutType:nth-of-type(2n) {
    width: 50% !important;
}

.sideMenufloorPlanList .sideMenuLayoutType:last-child {
    margin-bottom: 18px;
}

.sideMenufloorPlanList .sideMenuLayoutType.sideMenuLayoutType-btNone .sideMenufloorPlanButton {
    border: none !important;
}

.sideMenufloorPlanList .sideMenuSolodout {
    font-size: 14px;
    padding: 24px 6px !important;
    border-top: 1px solid #ddd !important;
    margin-top: 12px;
}


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

    .sideMenufloorPlanButton {
        padding: 8px 0;
        font-size: 12px;
    }

    .sideMenufloorPlanButton .icon-yazirusi {
        font-size: 10px;
        transform: scale(0.6, 0.6);
    }


}



/* sideMenufloorPlanBorder
---------------------------------------- */






/* sideMenufloorPlanOtherButton
---------------------------------------- */

.sideMenufloorPlanOtherButton {
    display: inline-block;
    border: solid 1px #ddd !important;
    padding: 24px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    line-height: 1.4;
    font-size: 14px;
}

.sideMenufloorPlanOtherButton.isTerrace {
    /*background-color: var(--colors-bg-terrace);*/
    order: 100;
}

.sideMenufloorPlanOtherButton.isHills {
    /*background-color: var(--colors-bg-hills);*/
    order: 100;
}


.sideMenufloorPlanOtherButton .icon-yazirusi {
    position: absolute;
    right: 6px;
    top: calc(50% - 6px);
    transform: translate(-50%, 0);
    color: #000;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    transform: scale(0.6, 0.6);
}

.sideMenufloorPlanOtherButton:before {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% + 2px);
    position: absolute;
    top: -1px;
    left: -100%;
    z-index: -1;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    background: #231815 !important;
}

/* hover */
.sideMenufloorPlanOtherButton:hover .icon-yazirusi {
    color: #fff;
}

.sideMenufloorPlanOtherButton:hover {
    color: var(--colors-white) !important;
    background: none;
    border-color: #231815 !important;
}

.sideMenufloorPlanOtherButton:hover:before {
    left: 0;
}


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

    .sideMenufloorPlanOtherButton {
        padding: 8px 0;
        font-size: 12px;
    }

    .sideMenufloorPlanOtherButton .icon-yazirusi {
        right: 0;
        font-size: 10px;
        transform: scale(0.6, 0.6);
    }


}


/* ----------------------------------------

- tabs

---------------------------------------- */

.post_content .resp-tab-content {
    border-color: var(--colors-gray) !important;
}

.post_content .resp-tabs-list li {
    margin: 0 !important;
    background-color: var(--colors-white) !important;
    border: 1px solid var(--colors-gray) !important;
    border-bottom: none !important;
    padding: 13px 15px !important;
}

.post_content .resp-tabs-list li:hover {
    background-color: var(--colors-gray-4) !important;
}

.post_content .resp-tabs-list li:not(:first-child) {
    border-left: none !important;
}

.post_content .resp-tabs-list li.resp-tab-active {
    margin-bottom: -1px !important;
    /* position: relative !important;
    top: 1px !important; */
    padding-bottom: 14px !important;
}

.post_content .resp-tab-content {
    padding: 32px !important;
    ;
}


.post_content h2.resp-accordion {
    border-top-width: 1px !important;
}

.post_content h2.resp-accordion.resp-tab-active {
    border-color: var(--colors-gray-5) !important;
}

@media only screen and (max-width: 750px) {
    .post_content .resp-tab-content {
        padding: 16px !important;
    }

}



/* ----------------------------------------

- slider

---------------------------------------- */

.pb-widget-slider * {
    outline: none;
}

.pb_slider_wrap {
    width: 100%;
    position: relative;
    margin: 0;
}

.pb_slider {
    width: 100%;
    height: auto;
    min-height: 60px;
    margin: 0;
    text-align: center;
}

.pb_slider .pb_slider_item img {
    text-align: center;
    width: 100%;
    height: auto;
    display: block;
}

.pb_slider_nav {
    width: calc(100% + 10px);
    margin: 10px 0 0 0;
}

.pb_slider_nav .pb_slider_nav_item {
    margin: 0;
    cursor: pointer;
    display: block;
    position: relative;
    height: 120px;
    margin-right: 10px;
    box-sizing: border-box;
}


.pb_slider_nav .pb_slider_nav_item:after {
    content: "";
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.pb_slider_nav .pb_slider_nav_item.slick-current:after {
    box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.5);
}

.pb_slider_nav .pb_slider_nav_item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.pb_slider_caption {
    padding: 40px;
}

.pb_slider_caption-show_border {
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.pb_slider_caption_item> :last-child {
    margin-bottom: 0;
}

.pb_slider .slick-arrow {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
    font-family: 'design_plus';
    color: #fff;
    font-size: 18px;
    line-height: 60px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    cursor: pointer;
    background: #000;
    border: none;
    opacity: 0.6;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.pb_slider .slick-prev {
    top: 50%;
    left: -70px;
}

.pb_slider .slick-next {
    top: 50%;
    right: -70px;
}

.pb_slider .slick-arrow {
    background-color: var(--colors-main-oh-02);
    opacity: 0;
    border-radius: 50%;
    transition: all .3s ease-in-out;
}

/* hover */
.slick-slider.pb_slider:hover .slick-arrow {
    opacity: 1;
}

.slick-slider.pb_slider:hover .slick-arrow:hover {
    background-color: var(--colors-main-oh-01);
}

.slick-slider.pb_slider:hover .slick-prev {
    left: -30px;
}

.slick-slider.pb_slider:hover .slick-next {
    right: -30px;
}

.pb_slider .slick-arrow.slick-disabled {
    opacity: 0 !important;
}

@media only screen and (max-width: 750px) {
    .pb_slider .slick-arrow {
        opacity: 1;
        /* width: 24px;
        height: 24px;
        margin: -20px 0 0 0;
        font-size: 14px;
        line-height: 24px; */
        transform: scale(0.5);
    }

    .pb_slider .slick-arrow.slick-prev {
        top: inherit;
        bottom: -110px;
        left: -20px;
    }

    .pb_slider .slick-arrow.slick-next {
        top: inherit;
        bottom: -110px;
        right: -20px;
    }

    .slick-slider.pb_slider:hover .slick-prev {
        left: -20px;
    }

    .slick-slider.pb_slider:hover .slick-next {
        right: -20px;
    }


    .pb_slider_nav {
        width: 100%;
        width: calc(100% + 3px);
        margin-top: 8px;
    }

    .pb_slider_nav .pb_slider_nav_item {
        margin: 0 8px 0 0;
        height: 40px;
    }


    .pb_slider_nav .pb_slider_nav_item img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .pb_slider_caption {
        padding: 20px;
    }
}

/* ----------------------------------------

- page navlink

---------------------------------------- */
#next_prev_post .title {
    font-size: 16px !important;
}



/* --------------------------------------------------------------------------------

- 以下ページごとのスタイル

-------------------------------------------------------------------------------- */

/* ----------------------------------------

- front.php(トップページ)

---------------------------------------- */
/*#header_slider {
  border: 40px solid  var(--colors-white);
}*/
#cb_content_1.cb_design_content {
  color: var(--colors-main-oh-02);
  background-color: var(--colors-main-oh-01);
}

#cb_content_1 .content img {
  cursor: pointer;
}

#cb_content_1 .content img:hover {
  opacity: 0.8;
}

#cb_content_3.cb_carousel {
  background-color: var(--colors-main-oh-01);
  /*background-color: #B7B2AD;*/
}

#cb_content_3.cb_carousel.num3 .button.animation_type2:hover {
  color: var(--colors-main-gray) !important;
}

#cb_content_3.cb_design_content,
#cb_content_5.cb_gallery,
#cb_content_5.cb_gallery h4.title {
    color: #555;
}

#cb_content_1.cb_design_content .catch {
    margin-top: 0;
}

.postContentRow.topFullsizeContent {
    height: 600px;
    position: relative;
    gap: 0px;
    border-top: 1px solid #ffffff !important;
}

/*.postContentRow.topFullsizeContent.last {
    border-bottom: 1px solid #ffffff !important;
}*/

.postContentRow.topFullsizeContent.reverse {
    flex-direction: row-reverse;
}

.postContentRow.topFullsizeContent>div {
    width: 50%;
}

.postContentRow.topFullsizeContent>div:nth-child(1) {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.postContentRow.topFullsizeContent.lightType .content {
  background-color: var(--colors-main-oh-02) !important;
  color: var(--colors-main-oh-01) !important;
}

.postContentRow.topFullsizeContent.darkType .content {
  background-color: var(--colors-main-oh-01) !important;
  color: var(--colors-main-oh-02) !important;
}

.postContentRow.topFullsizeContent>div:nth-child(2) {
    height: 100%;
    position: relative;
    z-index: 99999;

}

.postContentRow.topFullsizeContent .content_inner {
    position: absolute;
    display: block;
    padding: 0 130px;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.postContentRow.topFullsizeContent .content_inner .catch {
   font-weight: bold;
   font-size: 28px;
   line-height: 1.5;
   letter-spacing: 0.1em;
}

.postContentRow.topFullsizeContent .content_inner .desc {
    font-size: 16px;
    letter-spacing: 0.05em;
}

.postContentRow.topFullsizeContent .content_inner .design_button:hover {
    color: #ffffff !important;
    background: none;
    border-color: var(--colors-main-landic) !important;
}

.postContentRow.topFullsizeContent .content_inner .design_button:before {
    background: var(--colors-main-landic) !important;
}

.postContentRow.topFullsizeContent.lightType .content_inner .design_button,
.postContentRow.bgColorBeige .design_button {
  color: var(--colors-main-oh-01) !important;
  border-color: var(--colors-main-oh-01) !important;
}

.postContentRow.topFullsizeContent.lightType .content_inner .design_button:hover,
.postContentRow.bgColorBeige .design_button:hover {
    color: var(--colors-main-oh-02) !important;
    border-color: var(--colors-main-oh-01) !important;
}

.postContentRow.topFullsizeContent.lightType .content_inner .design_button:before,
.postContentRow.bgColorBeige .design_button:before {
    background: var(--colors-main-oh-01) !important;
}

.postContentRow.topFullsizeContent.darkType .content_inner .design_button {
  color: var(--colors-main-oh-02) !important;
  border-color: var(--colors-main-oh-02) !important;
}

.postContentRow.topFullsizeContent.darkType .content_inner .design_button:hover {
    color: var(--colors-main-gray) !important;
    border-color: var(--colors-main-oh-02) !important;
}

.postContentRow.topFullsizeContent.darkType .content_inner .design_button:before {
    background: var(--colors-main-oh-02) !important;
}

.postContentRow.topFullsizeContent{
    -webkit-animation: opacityAnimation 2.0s ease forwards 0s;
    animation: opacityAnimation 2.0s ease forwards 0s;
}

/*
  top 間取り一覧
*/
.layout_slider_wrap {
  position: relative;
  margin-top: 600px;
}

.layout_slider_wrap .layout_slider {
  position:absolute;
  bottom:40px;
  left:0px;
  width:100%;
  height:120px;
  z-index:2;
}

.layout_slider_wrap .layout_slider_item {
  margin:0 130px;
}
.layout_slider_wrap .layout_slider_item .item {
  position:relative;
  height:120px;
  width::100%;
}
.layout_slider_wrap .layout_slider_item .title_area {
  position:absolute;
  left:140px;
  top:50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%); transform:
  translateY(-50%);
}
.layout_slider_wrap .layout_slider_item .title {
  font-weight:600;
  font-size:18px;
  line-height:1.8;
  max-height:5.4em;
  visibility:visible;
  overflow:hidden;
  margin-bottom: 0px;
}
.layout_slider_wrap .layout_slider_item .title span {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.layout_slider_wrap .layout_slider_item .image_wrap {
  display:block;
  width:120px;
  height:120px;
  position:relative;
  z-index:1;
  overflow:hidden;
  background:#fff;
  border:10px solid #fff;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}
.layout_slider_wrap .layout_slider_item .image {
  width:100%;
  height:100% !important;
  display:block;
  overflow:hidden;
  position:relative;
  z-index:2;
}
.layout_slider_wrap .layout_slider_item a { color:#fff; }
.layout_slider_wrap .next_item { position:absolute; right:80px; top:42px; }
.layout_slider_wrap .prev_item { position:absolute; left:80px; top:42px; }
.layout_slider_wrap .carousel_arrow:before { color:#fff; }
.layout_slider_wrap .overlay { width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:1; }
.topLayoutList>div:nth-child(1):before {
  content:''; display:block; width:50%; height:50%; position:absolute; bottom:0px; left:0px; z-index:2;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
}

/* カルーセルの矢印 */
.carousel_arrow { width:50px; height:50px; line-height:50px; text-align:center; position:absolute; cursor:pointer; z-index:10; overflow:hidden; }
.carousel_arrow:before {
  font-family:'design_plus'; color:#000; font-size:18px; display:block; height:50px; line-height:50px; width:100%; text-align:center;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.carousel_arrow.prev_item:before { content:'\e90f'; }
.carousel_arrow.next_item:before { content:'\e910'; left:0; right:0; }
.carousel_arrow:hover:before { color:#ccc !important; }


@media only screen and (max-width: 750px) {
  #header_slider {
    border: none;
  }

  .postContentRow.topFullsizeContent {
      height: auto;
      flex-direction: column;
      flex-wrap: nowrap;
  }

  .postContentRow.topFullsizeContent.reverse {
      flex-direction: column;
  }

  .postContentRow.topFullsizeContent>div {
    width: 100%;
  }

  .postContentRow.topFullsizeContent>div:nth-child(1) {
    height: calc(0.66 * 100vw);
  }

  .postContentRow.topFullsizeContent>div:nth-child(2) {
    width: auto;
    height: auto;
  }

  .postContentRow.topFullsizeContent .content_inner {
    position: relative;
    padding: 80px 50px 75px;
    top: auto;
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  .postContentRow.topFullsizeContent .content_inner .catch {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
  }

  .postContentRow.topFullsizeContent .content_inner .desc {
      font-size: 14px;
      text-align: center;
  }

  .postContentRow.topFullsizeContent .content_inner .item.link_button {
    text-align: center;
  }

  .postContentRow.topFullsizeContent .content_inner .design_button {
      min-width: 240px;
      padding-left: 30px;
      padding-right: 30px;
  }

  .topLayoutList>div:nth-child(1):before {
    display: none;
  }

  .topLayoutList .image_area:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 66vw;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
  }

  .layout_slider_wrap .carousel_arrow { display:none !important;}
  .layout_slider_wrap { width:100%; height:auto; position:relative; margin-top: 250px; }
  .layout_slider_wrap .layout_slider { bottom:25px; height:100px; }
  .layout_slider_wrap .layout_slider_item { margin:0 25px; }
  .layout_slider_wrap .layout_slider_item .item { height:100px; }
  .layout_slider_wrap .layout_slider_item .image_wrap { width:100px; height:100px; border:10px solid #fff; }
  .layout_slider_wrap .layout_slider_item .title_area { left:120px; }
  .layout_slider_wrap .layout_slider_item .title { font-weight:500; font-size: 16px;}

}

/* ----------------------------------------

- indedx.php(投稿一覧)

---------------------------------------- */

#blog_archive {
    padding: 0 16px 60px;
}

.blogListWrap {
    padding: 60px 16px 60px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

#blog_archive #blog_list {
    margin-top: 0;
    min-width: 1160px;
    padding: 0 16px;
    width: 1160px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#blog_archive #blog_list .item {
    /* min-width: 800px;
    max-width: 800px; */
    width: 100%;
    border: 1px solid #ddd;
    padding: 0 80px;
}

#blog_list .date_area {
    width: 165px;
}

#blog_list .content {
    width: calc(100% - 445px);
    padding: 0 0 0 80px;
}

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

    #blog_archive {
        padding: 40px 16px 40px;
    }

    .blogListWrap {
        padding: 0 0;
        display: flex;
        justify-content: center;
    }

    #blog_archive #blog_list {
        min-width: inherit;
        width: 100%;
        padding: 0;
    }

    #blog_archive #blog_list .item {
        padding: 0;
    }

}

/* #blog_list
---------------------------------------- */

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

    .blogListWrap {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #blog_archive #blog_list {
        gap: 24px;
        margin: 0;
    }

    #blog_archive #blog_list .item {
        width: 100%;
        min-width: inherit;
        max-width: inherit;
        border: 1px solid #ddd;
    }

}


/* ----------------------------------------

- single.php

---------------------------------------- */
#blog_single {
    padding: 20px 16px 60px;
    display: flex;
    justify-content: center;
}

#single_main {
    padding: 40px 16px;
    min-width: 1160px;
    width: 1160px;
    box-sizing: border-box;
}

#post_image_wrap .entry-title {
    text-align: left;
    margin-bottom: 20px;
}

@media only screen and (max-width: 750px) {
    #blog_single {
        padding-bottom: 0;
        display: flex;
        justify-content: center;
    }

    #single_main {
        min-width: 100%;
        padding: 40px 0;
        max-width: inherit;
    }

}

/* #blog_list
---------------------------------------- */

#blog_single #blog_list .item {
    min-width: 800px;
    max-width: 800px;
}

@media only screen and (max-width: 750px) {
    #blog_single #blog_list .item {
        width: 100%;
        min-width: inherit;
        max-width: inherit;
    }

}

/* タブレット (768-1024px): お知らせ一覧(index.php) / 記事(single.php) の固定幅
   (#blog_list 1160px / #single_main 1160px / #blog_single .item 800px) がビューポートを
   超えてはみ出す (SP 上書きは ≤750 のみで TB に効かない) ため流動化する。
   レイアウトは PC 同様の横並び(日付|画像|本文)のまま幅だけ TB に合わせる。PC(>1024)/SP(≤750)は不変。 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* お知らせ一覧: コンパクト一覧 (左に小サムネ100px / 右上に件名 / その下に小さく日付)。
       grid で 画像=左1列(件名+日付の2行ぶんを縦中央) / 右=件名(上)+日付(下) に配置。 */
    #blog_archive #blog_list {
        min-width: inherit;
        width: 100%;
        padding: 0 16px;
    }
    #blog_archive #blog_list .item {
        display: grid;
        grid-template-columns: 100px 1fr;
        column-gap: 20px;
        align-items: center;
        height: auto;
        padding: 18px 12px;
        border: none;
        border-bottom: 1px solid #ddd;
    }
    #blog_archive #blog_list .image_wrap {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        width: 100px;
        height: 100px;
        margin-bottom: 0;
    }
    #blog_archive #blog_list .content {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        padding: 0;
    }
    #blog_archive #blog_list .title {
        font-size: 16px;
    }
    /* 日付を「2026.05.26」のドット区切り1行に。区切りバー(.line)を消し ::after で「.」を挿入。
       font-size:0 で span 間の改行空白を詰め、各 span に明示サイズを与える。 */
    #blog_archive #blog_list .date_area {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        margin-top: 6px;
        font-size: 0;
        color: #999;
    }
    #blog_archive #blog_list .date_area .year {
        display: inline;
        font-size: 13px;
        margin: 0;
        color: #999;
    }
    #blog_archive #blog_list .date_area .year::after {
        content: ".";
        font-size: 13px;
    }
    #blog_archive #blog_list .date_area .month,
    #blog_archive #blog_list .date_area .date {
        font-size: 13px;
        color: #999;
        font-weight: 500; /* 年(.year)と同じ太さ。bold(600)解除 */
    }
    #blog_archive #blog_list .date_area .month::after {
        content: ".";
        font-size: 13px;
    }
    #blog_archive #blog_list .date_area .line {
        display: none;
    }

    /* 記事ページ (詳細はOK、幅の流動化のみ維持) */
    #single_main {
        min-width: inherit;
        width: 100%;
        max-width: 100%;
    }
    #blog_single #blog_list .item {
        min-width: inherit;
        max-width: 100%;
    }
}



/* ----------------------------------------

- 固定ページ(page.php)のスタイル

---------------------------------------- */

/* singlePageMainContents
---------------------------------------- */

#main_contents.singlePageMainContents {
    width: auto;
}


#main_contents.singlePageMainContents #main_col {
    width: 100%;
    padding: 0;
    margin: 0;
}

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

/* ----------------------------------------

- 固定ページ(page-news.php)のスタイル

---------------------------------------- */

body.single-news #container {
    overflow: visible;
}

#main_contents.singleLayoutPageMainContents {
    width: 1200px;
}

#main_contents.singleLayoutPageMainContents #main_col {
    width: calc(100% - 320px);
    margin-bottom: 60px;
}

#main_contents.singleLayoutPageMainContentsFull #main_col {
    width: 1160px;
    margin-left: auto;
    margin-right: auto;
}

#main_contents.singleLayoutPageMainContentsFull #main_col #article {
    width: 820px;
    margin-left: auto;
    margin-right: auto;
}

#main_contents.singleLayoutPageMainContentsFull.no-entry #main_col,
#main_contents.singleLayoutPageMainContentsFull.no-entry #main_col #article {
  width: 100%;
}

#main_contents.singleLayoutPageMainContents #side_col {
    width: 320px;
}

#main_contents.singleLayoutPageMainContents #side_col .widget_content {
    position: sticky;
    top: 140px;
}

#main_contents.singleLayoutPageMainContents #side_col:after {
    width: calc(50vw - 280px);
}


@media screen and (max-width:750px) {
  #main_contents.singleLayoutPageMainContents #main_col {
    margin-bottom: 12px !important;
  }
}


@media screen and (max-width:1201px) {
    #main_contents.singleLayoutPageMainContents #side_col .widget_content {
        margin-left: auto;
        margin-right: auto;
    }

    #main_contents.singleLayoutPageMainContents,
    #main_contents.singleLayoutPageMainContentsFull {
        width: auto;
    }

    #main_contents.singleLayoutPageMainContents #main_col {
        width: auto;
    }
}

/* TB (768-1024px): #main_col / #side_col が viewport 端まで pin されるのを防ぐ
   - 左右 padding 16px で最小限の余白 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #main_contents.singleLayoutPageMainContents,
    #main_contents.singleLayoutPageMainContentsFull {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
}

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

    #main_contents.singleLayoutPageMainContentsFull #main_col {
        width: auto;
        margin: 0px 20px;
    }

    #main_contents.singleLayoutPageMainContentsFull.no-entry #main_col {
      margin: 0px;
    }

    #main_contents.singleLayoutPageMainContentsFull #main_col #article {
      width: auto;
    }

    #main_contents.singleLayoutPageMainContents #side_col {
        width: auto;
        margin: 0;
        padding-left: 20px;
        padding-right: 20px;
    }

    #main_contents.singleLayoutPageMainContents #side_col:after {
        width: 100%;
    }


}

.singleLayoutPageMainContentsFull .nav_layout_premium {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  width: 1130px;
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
}

.singleLayoutPageMainContentsFull .nav_layout_premium a {
  display: block;
  box-sizing: border-box;
  text-align: center;
  padding: 16px 0px;
  font-weight: bold;
  font-size: 20px;
}

.singleLayoutPageMainContentsFull .nav_layout_premium>a:nth-child(1) {
  border-left: 1px solid #dddddd;
}

.singleLayoutPageMainContentsFull .nav_layout_premium>a:nth-child(2n+1) {
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

.singleLayoutPageMainContentsFull .nav_layout_premium>a:nth-child(2n) {
  border: 1px solid #dddddd;
}

.singleLayoutPageMainContentsFull .nav_layout_premium_bottom {
  padding-top: 40px;
  padding-bottom: 60px;
}

.singleLayoutPageMainContentsFull .nav_layout_premium_bottom a {
    display: block;
    width: 360px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    padding: 24px 0px;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.08em;
    border: 1px solid var(--colors-main-oh-01);
    background: none;
    color: var(--colors-main-oh-01);
    position: relative;
    overflow: hidden;
    /*background-color: var(--colors-main-landic);
    color: var(--colors-white);*/
}

.singleLayoutPageMainContentsFull .nav_layout_premium_bottom a:before {
  content: '';
  display: block;
  width: 100%;
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  left: -100%;
  z-index: -1;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  background-color: var(--colors-main-oh-01);
}
.singleLayoutPageMainContentsFull .nav_layout_premium_bottom a:hover {
    color: var(--colors-main-oh-02) !important;
    background: none;
}

.singleLayoutPageMainContentsFull .nav_layout_premium_bottom a:hover:before {
    left: 0;
}
/*.singleLayoutPageMainContentsFull .nav_layout_premium_bottom a:hover {
  opacity: 0.8;
}*/

/* headBlock
---------------------------------------- */
.singleLayoutPageMainContents .headBlock,
.singleLayoutPageMainContentsFull .headBlock {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    margin-bottom: 40px;
}

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

  .singleLayoutPageMainContentsFull .nav_layout_premium {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .singleLayoutPageMainContentsFull .nav_layout_premium a {
      font-size: 16px;
      padding: 12px 0px;
    }

    .singleLayoutPageMainContentsFull .nav_layout_premium>a:nth-child(1) {
      border-top: 1px solid #dddddd;
      border-left: 1px solid #dddddd;
      border-right: 1px solid #dddddd;
      border-bottom: none;
    }

    .singleLayoutPageMainContentsFull .nav_layout_premium>a:nth-child(2) {
      border-top: 1px solid #dddddd;
      border-left: none;
      border-right: 1px solid #dddddd;
      border-bottom: none;
    }

    .singleLayoutPageMainContentsFull .nav_layout_premium>a:nth-child(3) {
      border: 1px solid #dddddd;
    }

    .singleLayoutPageMainContentsFull .nav_layout_premium>a:nth-child(4) {
      border-top: 1px solid #dddddd;
      border-left: none;
      border-right: 1px solid #dddddd;
      border-bottom: 1px solid #dddddd;
    }

    .singleLayoutPageMainContents .headBlock,
    .singleLayoutPageMainContentsFull .headBlock {
        /* display: grid; */
        grid-template-columns: 1fr;
        margin-bottom: 0px;
        gap: 32px; /* 面積項目と鳥かご画像の縦間隔。元は 12px */
        /* gap: 40px;
        margin-bottom: 40px; */
    }

    /* SP の鳥かご画像: 横幅を85%に絞り中央揃え (縦長を抑え PC 表示と近い印象に) */
    .singleLayoutPageMainContents .headBlockImage,
    .singleLayoutPageMainContentsFull .headBlockImage {
        text-align: center;
    }
    .singleLayoutPageMainContents .headBlockImage img,
    .singleLayoutPageMainContentsFull .headBlockImage img {
        max-width: 85%;
    }

    /* SP の間取り画像: タイプによって左右余白広いため中央クロップで拡大表示
       オプトインは PHP 側 $sp_zoom_types で管理 */
    .madoriBlock--sp-zoom {
        overflow: hidden;
        text-align: center;
    }
    .madoriBlock--sp-zoom > div {
        text-align: center;
    }
    .madoriBlock--sp-zoom img {
        max-width: none;
        width: 120%;
    }

    .singleLayoutPageMainContentsFull .nav_layout_premium_bottom a {
      width: 240px;
      font-size: 16px;
      padding: 16px 0;
    }

    .singleLayoutPageMainContentsFull .nav_layout_premium_bottom {
      padding-top: 0px;
      padding-bottom: 40px;
    }

}


/* headBlockInfo
---------------------------------------- */
.singleLayoutPageMainContents .headBlockInfo,
.singleLayoutPageMainContentsFull .headBlockInfo {
    display: flex;
    flex-direction: column;
    gap: 40px;
    color: #413e3c;
}

/* headBlockInfo_icon */
.singleLayoutPageMainContents .headBlockInfo_icon,
.singleLayoutPageMainContentsFull .headBlockInfo_icon {
    display: flex;
    gap: 16px;
    align-items: center;
}

.singleLayoutPageMainContents .headBlockInfo_icon .headBlockInfo_icon_menu {
    width: 100%;
    background-color: var(--colors-main-oh-02);
    color: var(--colors-main-oh-01);
    font-size: 16px;
    padding: 12px 16px;
    text-align: center;
    font-weight: bold;
}

.premium_layout .headBlockInfo_icon_maisonette,
.premium_layout .headBlockInfo_icon_premium,
.singleLayoutPageMainContentsFull .headBlockInfo_icon_maisonette,
.singleLayoutPageMainContentsFull .headBlockInfo_icon_premium {
    font-size: 16px;
    padding: 12px 16px;
    text-align: center;
    font-weight: bold;
}

.premium_layout .headBlockInfo_icon_maisonette,
.singleLayoutPageMainContentsFull .headBlockInfo_icon_maisonette {
  background: -webkit-gradient(45deg, #4d4d4d 35%, #333333);
  background: linear-gradient(45deg, #4d4d4d 35%, #333333);
  color: #ffffff;
}



/* headBlockInfo_title */
.singleLayoutPageMainContents .headBlockInfo_title,
.singleLayoutPageMainContentsFull .headBlockInfo_title {
    display: flex;
    gap: 16px;
    font-weight: 700;
    font-size: 24px;
    align-items: center;
}

.singleLayoutPageMainContents .headBlockInfo_title_type,
.singleLayoutPageMainContentsFull .headBlockInfo_title_type {
    font-size: 40px;
}

.singleLayoutPageMainContents .headBlockInfo_title_spacer,
.singleLayoutPageMainContentsFull .headBlockInfo_title_spacer {
    font-size: 24px;
    color: var(--colors-gray-2);
    font-weight: 400;
    /* transform: rotate(30deg); */
}

.singleLayoutPageMainContents .headBlockInfo_title_madori,
.singleLayoutPageMainContentsFull .headBlockInfo_title_madori {
    font-size: 32px;
}

/* headBlockInfo_subtext */
.singleLayoutPageMainContents .headBlockInfo_subtext,
.singleLayoutPageMainContentsFull .headBlockInfo_subtext {
    display: block;
    font-size: 12px;
    text-align: right;
    margin-top: -44px;
    padding-right: 10px;
}

/* headBlockInfo_content */
.singleLayoutPageMainContents .headBlockInfo_content,
.singleLayoutPageMainContentsFull .headBlockInfo_content {
    display: grid;
    border-top: 1px solid var(--colors-gray);
}

.singleLayoutPageMainContents .headBlockInfo_content_row,
.singleLayoutPageMainContentsFull .headBlockInfo_content_row {
    display: grid;
    /*grid-template-columns: 160px 1fr;*/
    grid-template-columns: 172px 1fr;
    gap: 32px;
    padding: 16px 0;
    border-bottom: 1px solid var(--colors-gray);
}

.singleLayoutPageMainContents .headBlockInfo_content_row_head,
.singleLayoutPageMainContentsFull .headBlockInfo_content_row_head {
    display: grid;
    place-content: center;
    grid-template-columns: 1fr;
    position: relative;
    text-align: justify;
    text-align-last: justify;
    font-size: 14px;
}

.singleLayoutPageMainContents .headBlockInfo_content_row_head:after,
.singleLayoutPageMainContentsFull .headBlockInfo_content_row_head:after {
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background-color: var(--colors-gray);
    transform: rotate(30deg) translate(0, -50%);
    position: absolute;
    right: -12px;
    top: 50%;
}

.singleLayoutPageMainContents .headBlockInfo_content_row_body,
.singleLayoutPageMainContentsFull .headBlockInfo_content_row_body {
    display: grid;
    gap: 8px;
}

.singleLayoutPageMainContents .headBlockImage img,
.singleLayoutPageMainContentsFull .headBlockImage img {
    max-width: 100%;
    max-height: 480px; /* 縦長鳥かご画像のとき、面積項目少ないタイプ (b/c/f/g/h) で右余白が大きくなるのを抑制 */
}


/* madoriBlock
---------------------------------------- */

.singleLayoutPageMainContents .madoriBlock img,
.singleLayoutPageMainContentsFull .madoriBlock img {
    max-width: 100%;
}

/* M/N 間取り SP横スクロール: 上の max-width:100% が w600-sp(600px) を container幅にクランプして
   横スクロールが効かないため、js-scrollable 内の w600-sp 画像だけ max-width 解除 (2026-07-01) */
.js-scrollable img.w600-sp {
    max-width: none !important;
}

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


    /* headBlockInfo
---------------------------------------- */
    .singleLayoutPageMainContents .headBlockInfo,
    .singleLayoutPageMainContentsFull .headBlockInfo {
        gap: 24px;
    }


    /* headBlockInfo_icon */
    .premium_layout .headBlockInfo_icon div {
      width: calc(50% - 8px) !important;
      max-width: 180px;
    }

    .premium_layout .headBlockInfo_icon_maisonette,
    .premium_layout .headBlockInfo_icon_premium,
    .singleLayoutPageMainContentsFull .headBlockInfo_icon_maisonette,
    .singleLayoutPageMainContentsFull .headBlockInfo_icon_premium {
        font-size: 14px;
        padding: 8px 16px;
        text-align: center;
    }

    body.single-news .singleLayoutPageMainContentsFull #main_col {
      padding-bottom: 0px !important;
    }

    /* headBlockInfo_title */

    .singleLayoutPageMainContents .headBlockInfo_title_type,
    .singleLayoutPageMainContentsFull .headBlockInfo_title_type {
        font-size: 32px;
    }

    .singleLayoutPageMainContents .headBlockInfo_title_spacer,
    .singleLayoutPageMainContentsFull .headBlockInfo_title_spacer {
        font-size: 20px;
    }

    .singleLayoutPageMainContents .headBlockInfo_title_madori,
    .singleLayoutPageMainContentsFull .headBlockInfo_title_madori {
        font-size: 24px;
    }

    /* headBlockInfo_subtext */
    .singleLayoutPageMainContents .headBlockInfo_subtext,
    .singleLayoutPageMainContentsFull .headBlockInfo_subtext {
        font-size: 12px;
        margin-top: -28px;
        padding-right: 0px;
    }

    /* headBlockInfo_content */
    .singleLayoutPageMainContents .headBlockInfo_content,
    .singleLayoutPageMainContentsFull .headBlockInfo_content {
        font-size: 13px;
    }

    .singleLayoutPageMainContents .headBlockInfo_content_row,
    .singleLayoutPageMainContentsFull .headBlockInfo_content_row {
        /*grid-template-columns: 134px 1fr;*/
        grid-template-columns: 152px 1fr;
        gap: 24px;
    }

    .singleLayoutPageMainContents .headBlockInfo_content_row_head,
    .singleLayoutPageMainContentsFull .headBlockInfo_content_row_head {
        font-size: 12px;
    }

    .singleLayoutPageMainContents .headBlockInfo_content_row_head:after,
    .singleLayoutPageMainContentsFull .headBlockInfo_content_row_head:after {
        height: 12px;
        right: -10px;
    }

}

/* TB (768-1024px): plan 詳細
   - #main_contents を block 縦並びにして #side_col を #main_col の下へ
   - .headBlock 内側は 2 カラム維持、右画像列を 240px に縮小して
     左 (面積表) の幅を確保し面積数値が 1 行で収まるようにする
   (PC default rule の後ろに配置して source order で勝つ) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #main_contents.singleLayoutPageMainContents,
    #main_contents.singleLayoutPageMainContentsFull {
        display: block !important;
    }
    #main_contents.singleLayoutPageMainContents #main_col,
    #main_contents.singleLayoutPageMainContentsFull #main_col {
        width: auto !important;
    }
    #main_contents.singleLayoutPageMainContents #side_col,
    #main_contents.singleLayoutPageMainContentsFull #side_col {
        width: auto !important;
        margin-top: 60px;
    }
    .singleLayoutPageMainContents .headBlock,
    .singleLayoutPageMainContentsFull .headBlock {
        grid-template-columns: 1fr 264px;
        gap: 32px;
    }
}

/* remarksBlock
---------------------------------------- */

.singleLayoutPageMainContents #eqTabs_01 #floor_below:checked ~ #floor_below_content #floor_above_remarks {
  display: none;
}

.singleLayoutPageMainContents #eqTabs_01 #floor_above:checked ~ #floor_above_content #floor_below_remarks {
  display: none;
}

/* featuresBlock — getlayoutFeatures() のラッパー。X TYPE 行と左端揃えのため padding 0 上書き */
.featuresBlock .layoutItemFeatures {
    padding: 0;
}

/* single-news ページの features は一覧より一回り大きく（ohori3 と統一） */
.featuresBlock .layoutItemFeatures .featureParts {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
}

/* /plan/floor-plan/ ページの bgColorXxx セクションをブラウザ全幅まで擬似拡張 (full-bleed)
   .normal_floor_plan は #main_col のクラス、post_content > section.bgColor* に対して
   box-shadow + clip-path で左右ブラウザ端まで背景色を引く */
.normal_floor_plan .post_content > section.bgColorGray {
    box-shadow: 0 0 0 100vmax var(--colors-main-gray);
    clip-path: inset(0 -100vmax);
}
.normal_floor_plan .post_content > section.bgColorBeige {
    box-shadow: 0 0 0 100vmax var(--colors-beige);
    clip-path: inset(0 -100vmax);
}
.normal_floor_plan .post_content > section.bgColorBlack {
    box-shadow: 0 0 0 100vmax var(--colors-black);
    clip-path: inset(0 -100vmax);
}

/* personaDataBlock — CUSTOMIZE PLAN タブ内の persona 説明ブロック (E/H/I-type) */
.singleLayoutPageMainContents .personaDataBlock {
    display: grid;
    grid-template-columns: 1fr 120px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 768px) {
    .singleLayoutPageMainContents .personaDataBlock {
        grid-template-columns: 1fr 80px;
        width: 100%;
    }
}


/* ----------------------------------------

- ROOM PLAN一覧 /layoutのリスト

---------------------------------------- */

#news_archive {
    padding-top: 0;
    padding-bottom: 0;
}

.postContentRow #news_archive {
  width: 100%;
}

/* page_header-layout
---------------------------------------- */

/*#page_header.page_header-layout {
    height: 80px;
}

@media only screen and (max-width: 750px) {
    #page_header.page_header-layout {
        display: none;
    }
}*/


/* layoutList
---------------------------------------- */

.layoutListWrap {
    padding: 60px 16px;
    max-width: 1440px;
    margin: 0 auto;
}

.layoutList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    /*min-height: 1000px;*/
}

.layoutList_inner {
    position: relative;
    margin-left: -12px;
    /* .layoutItem ネガティブ */
    margin-right: -12px;
    /* .layoutItem ネガティブ */
}

/* layoutItemの配置は親がで設定する */
/* shuffle.jsの都合でlayoutItemをinline-blockとして横並びにしている。 */
.layoutList .layoutList_inner .layoutItem {
    max-width: 50%;
    min-width: 50%;
}

.layoutList_noRoom {
    border: 1px solid #ccc;
    text-align: center;
    max-width: 708px;
    width: auto;
    width: calc(100% - 24px);
    margin: 12px auto 0px;
    border: 1px solid #CCCC;
    padding: 24px 0;
}

/* layoutList-oneCol layout/a, layout/bの場合 */
.layoutList.layoutList-oneCol {
    grid-template-columns: 1fr;
}

.layoutList.layoutList-oneCol .layoutList_inner .layoutItem {
    max-width: 24%;
    min-width: 24%;
}

.layoutList_remarks {
    max-width: 1440px;
    margin: 0 auto;
}

.postContentRow #news_archive .layoutList_remarks .remarks {
  color: var(--colors-main-oh-01) !important;
  padding-bottom: 60px;
}

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

    #news_archive {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .layoutListWrap {
        padding-top: 40px;
        padding-bottom: 40px;
        min-width: inherit;
        max-width: inherit;
    }

    .layoutList {
        grid-template-columns: 1fr;
        gap: 12px;
        min-width: inherit;
        max-width: inherit;
        min-height: 500px;
    }

    .layoutList_inner {
        margin-left: -8px;
        /* .layoutItem ネガティブ */
        margin-right: -8px;
        /* .layoutItem ネガティブ */
    }

    .layoutList .layoutList_inner .layoutItem {
        min-width: 49% !important;
        max-width: 49% !important;
    }

    /* layoutList-oneCol layout/a, layout/bの場合 */
    .layoutList.layoutList-oneCol {
        grid-template-columns: 1fr;
    }

    .layoutList_noRoom {
        margin: 0px auto;
    }

    .layoutList_remarks {
        min-width: inherit;
        max-width: inherit;
        padding-left: 12px;
        padding-right: 12px;
    }


}

/* TB (768-1024px): plan 一覧 左右余白 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .layoutListWrap {
        padding-left: 30px;
        padding-right: 30px;
    }
    .layoutList_remarks {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media only screen and (max-width: 320px) {
    .layoutList .layoutList_inner .layoutItem {
        min-width: 49% !important;
        max-width: 49% !important;
    }
}

/* layoutHeadArea
---------------------------------------- */

.layoutHeadArea {
    position: relative;
    display: grid;
    grid-template-columns: 60% 40%;
    margin-bottom: 60px;
}

.layoutTitle {
    text-align: center;
    font-size: 34px !important;
    font-weight: 600;
    margin-bottom: 60px;
    color: #413e3c;
}


/* layoutSort */

.layoutSort {
    display: flex;
    width: 100%;
}

.layoutSortLabel {
    min-width: 56px;
    background-color: var(--colors-main-landic);
    color: #fff;
    padding: 24px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 20px;
    min-width: 80px;
    width: 100%;
}

.layoutSortButtonWrap {
    display: flex;
    gap: 24px 24px;
    flex-wrap: wrap;
    background-color: #e6e6e6;
    padding: 24px 32px;
    min-width: 560px;
}

.layoutSortButton {
    position: relative;
    font-size: 16px;
    border: 1px solid #d4cab4;
    border-radius: 50px;
    text-align: center;
    background: #fff;
    position: relative;
    padding: 18px 20px;
    min-width: 80px;
    max-width: 80px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}

.layoutSortButton.layoutSortButton-clear {
    margin-left: auto;
    position: relative;
    background-color: #ccc;
    border-color: #aaa;
}

.layoutSortButton:hover {
    background: #d4cab4;
    color: #fff;
}

.layoutSortButton.layoutSortButton-clear:hover {
    background: #aaa;
    color: inherit;
}


/* clear */
.layoutSortButton.layoutSortButton-clear span {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 0;
}

.layoutSortButton.layoutSortButton-clear span:before,
.layoutSortButton.layoutSortButton-clear span::after {
    content: "";
    display: block;
    width: 1px;
    height: 14px;
    background-color: #222;
    position: absolute;
    left: 4px;
    top: -12px;
}

.layoutSortButton.layoutSortButton-clear span:before {
    transform: rotate(45deg);
}

.layoutSortButton.layoutSortButton-clear span:after {
    transform: rotate(-45deg);
}



.layoutSortButton.active {
    color: #fff !important;
    border-color: #d4cab4 !important;
    background: #d4cab4 !important;
}

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

    .layoutHeadArea {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 24px;
        gap: 16px;
    }

    .layoutTitle {
        font-size: 22px !important;
        margin-bottom: 30px;
    }

    .layoutSort {
        min-width: inherit;
        max-width: inherit;
        flex-direction: column;
        display: flex;
    }

    .layoutSortLabel {
        max-width: 120px;
        padding: 8px 0;
        min-width: inherit;
        font-size: 12px;
    }

    .layoutSortButtonWrap {
        display: flex;
        gap: 8px;
        padding: 12px;
        flex-wrap: wrap;
        max-width: inherit;
        min-width: inherit;
    }

    .layoutSortButton {
        font-size: 12px;
        padding: 8px 0;
        min-width: calc(25% - 8px);
    }

    .layoutSortButton:hover {
        background: #fff;
        color: inherit;
    }

    /* clear */
    .layoutSortButton.layoutSortButton-clear {
        display: none;
    }

}


/* layoutTypeHead */











/* layoutSortClear */
.layoutSortClear {
    /* display: flex; */
    text-align: center;
    padding: 0 12px;
}

.layoutSortClear_button {
    position: relative;
    cursor: pointer;
    border-radius: 100px;
    background-color: #ccc;
    padding: 10px 0;
    font-size: 12px;
}

.layoutSortClear_button span {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 0;
}

.layoutSortClear_button span:before,
.layoutSortClear_button span::after {
    content: "";
    display: block;
    width: 1px;
    height: 10px;
    background-color: #222;
    position: absolute;
    left: 0px;
    top: -9px;
}

.layoutSortClear_button span:before {
    transform: rotate(45deg);
}

.layoutSortClear_button span:after {
    transform: rotate(-45deg);
}

.layoutSortClear_button:hover {
    text-decoration: none;
}

@media only screen and (max-width: 750px) {
    .layoutSortClear {
        justify-content: center;
    }
}

/* floorPlanButtonWrap */
.floorPlanButtonWrap {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding-left: 24px;
    box-sizing: border-box;
}



@media only screen and (max-width: 750px) {
    .floorPlanButtonWrap {
        width: 100%;
        flex-direction: row;
        gap: 16px;
        padding-left: 0;
    }

    .floorPlanButtonWrap .floorPlanButton {
        width: 100%;
    }
}



/* layoutItem
---------------------------------------- */
.layoutItem {
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    padding: 12px;
    /* ネガティブマージンの対象 */
}

.layoutItemInner {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 32px 24px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--colors-white);
}

/* layoutItem_hoverContent */
.layoutItem .layoutItem_hoverContent {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .5s;
    color: #fff;
}

.layoutItem:hover .layoutItem_hoverContent {
    opacity: 1;
}

.layoutItem_hoverContent_senyu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 18px;
}

.layoutItem_hoverContent_senyu .layoutItem_hoverContent_senyu_info {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.layoutItem_hoverContent_senyu .layoutItem_hoverContent_senyu_other {}


.layoutItem_hoverContent_senyu .layoutItem_hoverContent_senyu_info .layoutItem_hoverContent_senyu_info_seisu {
    font-size: 24px;
}

.layoutItem_hoverContent_senyu .layoutItem_hoverContent_senyu_info .layoutItem_hoverContent_senyu_info_syosu {}

.layoutItem_hoverContent_senyu .layoutItem_hoverContent_senyu_info .layoutItem_hoverContent_senyu_info_other {}

/* layoutItem_Icon */
.layoutItem .layoutItem_Icon {
    display: flex;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
}

.layoutItem .layoutItem_Icon div {
    padding: 8px;
    text-align: center;
    width: calc(100% / 2);
    height: 20px;
    line-height: 20px;
    font-size: 13px;
}

.layoutItem .layoutItem_Icon .layoutItem_Icon_maisonette {
    background: -webkit-gradient(45deg, #4d4d4d 35%, #333333);
    background: linear-gradient(45deg, #4d4d4d 35%, #333333);
    color: #ffffff;
}

.layoutItem .layoutItem_Icon .layoutItem_Icon_premium {
    background: -webkit-gradient(45deg, #d5be95 35%, #c19e51);
    background: linear-gradient(45deg, #d5be95 35%, #c19e51);
    color: #ffffff;
}

.layoutItem .layoutItem_Icon .layoutItem_Icon_menu {
    width: 100%;
    background-color: var(--colors-main-oh-02);
    color: var(--colors-main-oh-01);
}

.layoutItem:hover .layoutItem_Icon {
    /*display: none;*/
}

/* layoutItem_special_type */
.layoutItem .layoutItem_special_type {
    opacity: 0;
    text-align: center;
    color: var(--colors-white);
    font-size: 20px;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    z-index: 20;
    width: 100%;
}

.layoutItem:hover .layoutItem_special_type {
    opacity: 1;
}

.layoutItem .layoutItem_special_type div {
    display: block;
}

.layoutItem .layoutItem_special_type div:nth-child(2) {
    width: 10%;
    height: 2px;
    background-color: #ffffff;
    margin: 20px auto 16px;
}


/* layoutItem_soldoutContent */
.layoutItem.isSoldout {
    pointer-events: none;
}

.layoutItem .layoutItem_soldoutContent {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .5s;
    color: #000;
    font-weight: 700;
    font-size: 20px;
}

.layoutItem.isSoldout .layoutItem_soldoutContent {
    opacity: 0.8;
    background-color: rgba(0, 0, 0, 1);
}

.layoutItem.isSoldout .layoutItem_soldoutContent div {
    opacity: 1 !important;
    color: #FFF;
}

.layoutItem.isSoldout .layoutItem_hoverContent {
    display: none !important;
}



.layoutItem_title {
    font-weight: 700;
    margin-bottom: 24px;
    font-size: 20px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    /*color: #000 !important;*/
    color: #413e3c !important;
}

.layoutItem_title .layoutItem_title_type {
    font-size: 26px;
}

.layoutItem_title .layoutItem_title_spacer {
    font-weight: 400;
    font-size: 14px;
}

.layoutItem_title .layoutItem_title_madori {
    font-size: 26px;
}

.layoutItem_img {
    width: 100%;
    position: relative;
    max-width: 100%;
    height: 0;
    padding-top: 120%;
}

.layoutItem_img img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: scale-down;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.layoutItem_btn {
    opacity: 0;
    transition: opacity .5s;
    text-align: center;
    border: 1px solid #fff;
    color: var(--colors-white);
    padding: 16px 0;
    margin-top: 8px;
    font-size: 14px;
    position: absolute;
    bottom: 24px;
    width: calc(100% - 48px);
    z-index: 10;
}

.layoutItem_btn .icon-yazirusi {
    position: absolute;
    right: 8px;
    color: #fff;
    transform: translate(-50%, 0);
    top: calc(50% - 5px);
}

/* hover */
.layoutItem:hover .layoutItem_btn {
    opacity: 1;
}

.layoutItem.isSoldout .layoutItem_btn {
    opacity: 0;
}

@media only screen and (max-width: 1462px) {
  .w_full_sp.txt,
  .w_half_sp.txt {
      display: none;
  }
}

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

    .layoutItem {
        padding: 16px 8px !important;
        /* ネガティブマージンの対象 */
    }

    .layoutItemInner {
        padding: 12px 8px;
    }

    /* layoutItem_Icon */
    .layoutItem .layoutItem_Icon {
        display: block;
        left: auto;
        right: auto;
        bottom: 48px;
        width: calc(100% - 16px) !important;
        padding: 0;
    }

    .layoutItem .layoutItem_Icon .w_half_sp {
        width: 50%;
    }

    .layoutItem .layoutItem_Icon .w_full_sp {
        width: 100%;
    }

    .layoutItem .layoutItem_Icon div {
        padding: 4px 0px;
        font-size: 8px;
        text-align: center;
        line-height: 11px;
        height: auto;
        display: inline-block;
        margin: 0;
    }

    /* layoutItem_special_type */
    .layoutItem .layoutItem_special_type {
        font-size: 14px;
        top: 78px;
    }

    /* layoutItem_hoverContent */
    .layoutItem .layoutItem_hoverContent {
        display: none !important;
    }

    .layoutItem_title {
        font-weight: 700;
        margin-bottom: 8px;
        font-size: 10px;
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: center;
        /*color: #000 !important;*/
        color: #413e3c !important;
    }

    

    

    


    .layoutItem_title .layoutItem_title_type {
        /*font-size: 14px;*/
        font-size: 3vw;
    }

    .layoutItem_title .layoutItem_title_spacer {
        font-weight: 400;
        font-size: 10px;
    }

    .layoutItem_title .layoutItem_title_madori {
        /*font-size: 14px;*/
        font-size: 3vw;
    }

    .layoutItem_img {}

    .layoutItem .layoutItem_soldoutContent {
        font-size: 16px;
    }

    .layoutItem_btn {
        opacity: 1;
        padding: 10px 0;
        position: relative;
        margin-top: 8px;
        font-size: 10px;
        width: auto;
        border: 1px solid #ccc;
        color: #000;
        bottom: inherit;
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    }

    .layoutItem_btn .icon-yazirusi {
        position: absolute;
        color: #000;
        font-size: 10px;
        right: 0;
        font-size: 10px;
        transform: scale(0.6, 0.6);
    }

    /* hover */
    .layoutItemInner:hover .layoutItem_btn {
        background-color: #4e4f50;
        color: #fff;
    }

    .layoutItemInner:hover .layoutItem_btn .icon-yazirusi {
        color: #fff;
    }

}

/* ohashi4: /plan/ に検索機能は無いため、SPで #return_top.isFloorPlan の
   アイコンを search.svg に差し替える処理は撤去。通常の「上へ」矢印(\e94b)を表示する (2026-07-01)
@media only screen and (max-width: 750px) {
    #return_top.isFloorPlan a:before {
        background-image: url('../wp-content/themes/tenjiku_tcd091-child/files/images/common/search.svg');
        background-size: contain;
        font-size: 0;
        width: 24px;
        height: 24px;
        left: 15px;
        top: 14px;
        margin: auto;
        transform: none;
    }
}
*/




/* fpLinks
---------------------------------------- */

.fpLinks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.fpLinksItem {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}



.fpLinksItem .fpLinksItem_btns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px;
}



.fpLinksItem .fpLinksItem_btns a {
    display: block;
    box-sizing: border-box;
    padding: 16px 0;
    text-align: center;
    background-color: var(--colors-main-gray);
    color: var(--colors-white);
    font-size: 14px;
}

.fpLinksItem .fpLinksItem_btns a:hover {
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.8);
}

.fpLinksItem .fpLinksItem_btns a.isSoldout {
    cursor: default;
    position: relative;
}

.fpLinksItem .fpLinksItem_btns a.isSoldout:hover {
    /*background-color: var(--colors-main-beige);*/
}

.fpLinksItem .fpLinksItem_btns a.isSoldout:active {
    pointer-events: none;
}

.fpLinksItem .fpLinksItem_btns a.isSoldout:after {
    content: "SOLDOUT";
    display: block;
    padding: 16px 0;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transition: opacity .3s;
    opacity: 0;
    z-index: 10;
    color: var(--colors-white);
}

.fpLinks .fpLinksItem_btns a.isSoldout:after {
    background-color: var(--colors-main-gray);
}


.fpLinksItem .fpLinksItem_btns a.isSoldout:hover:after {
    opacity: 1 !important;
}

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

    .fpLinks {
        gap: 24px;
    }

    .fpLinksItem {
        gap: 16px;
    }

    

    .fpLinksItem .fpLinksItem_btns, .fpLinksItem .fpLinksItem_btns.fpLinksItem_btns_half {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .fpLinksItem .fpLinksItem_btns a {
        display: block;
        box-sizing: border-box;
        padding: 16px 0;
        text-align: center;
        font-size: 13px;
    }

    .fpLinksItem .fpLinksItem_btns a:hover {
        background-color: var(--colors-main-gray);
        color: var(--colors-white);
    }

    .fpLinksItem .fpLinksItem_btns a.isSoldout {
        cursor: default;
        position: relative;
    }

    .fpLinksItem .fpLinksItem_btns a.isSoldout:hover {
        pointer-events: none;
    }

    .fpLinksItem .fpLinksItem_btns a.isSoldout:after {
        pointer-events: none;
        content: "SOLDOUT";
        display: block;
        padding: 16px 0;
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        background-color: var(--colors-main-gray);
        transition: opacity .3s;
        opacity: 0;
        z-index: 10;
        color: var(--colors-white);
    }

    .fpLinksItem .fpLinksItem_btns a.isSoldout:hover:after {
        opacity: 1 !important;
    }

}

.pc-no {
    display: none;
}

.sp-no {
    display: block;
}

@media only screen and (max-width: 750px) {
    .sp-no {
        display: none;
    }

    .pc-no {
        display: block;
    }
}



/* ----------------------------------------

 - TOP ボタンリンク

---------------------------------------- */
.cb_design_content.num1 .design_button,
.cb_design_content.num3 .design_button {
    border: solid 1px var(--colors-main-oh-02) !important;
    color: var(--colors-main-oh-02) !important;
}

.cb_design_content.num1 .design_button:hover,
.cb_design_content.num3 .design_button:hover {
    border: solid 1px var(--colors-main-oh-02) !important;
    color: var(--colors-main-gray) !important;
    background: none;
    /*border-color: #231815 !important*/
}

.cb_design_content.num1 .design_button:before,
.cb_design_content.num3 .design_button:before {
    background: var(--colors-main-oh-02) !important;
    /*background: #231815 !important;*/
}





/* ----------------------------------------

- CONCEPT

---------------------------------------- */

.gap24 {
    column-gap: 24px !important;
}

.gap50 {
    column-gap: 50px !important;
}





.conceptFontColor {
    color: #4C4948;
}













.alignItemCenter {
    align-items: center;
}

.alignItemStart {
    align-items: start;
}

.alignItemEnd {
    align-items: end;
}

.creatorsBtn {
    border: solid 1px #231815 !important;
    border-radius: 4px;
}

.cb_carousel.num4 .button.animation_type2.creatorsBtn:hover {
    color: var(--colors-white) !important;
    background: none;
    border-color: #231815 !important;
}

.cb_carousel.num4 .button.creatorsBtn:before {
    background: #231815 !important;
}

.footerBtn {
    border: solid 1px #231815 !important;
}

.cb_carousel.num4 .button.animation_type2.footerBtn:hover {
    color: #FFF !important;
    background: none;
    border-color: #231815 !important;
}


.cb_carousel.num4 .button.footerBtn:before {
    background: #231815 !important;
}






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

    

    

    .alignItemStart-sp {
        align-items: start;
    }

    .alignItemEnd-sp {
        align-items: end;
    }

    .alignSelfEnd-sp {
        align-self: flex-end;
    }

    .alignItemCenter-sp {
        align-items: center;
    }

}




/* ----------------------------------------

- CONCEPT2

---------------------------------------- */

.page-id-427 #page_header {
    display: none;
}



















.flexBox.concept2 {
    position: relative;
    padding-top: 64px;
}















.ci-tab {
    margin-top: 32px;
}

.ci-tab_menu {
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    margin: 0 !important;
}

.ci-tab_menu-item {
    position: relative;
    /*background-color: #f7f4ed;*/
    background-color: rgba(255, 255, 255, 0.6);
    list-style: none;
    text-align: center;
    cursor: pointer;
    transition: all .3s;
}

.ci-tab_menu-item.is-active {
    cursor: default;
}

.ci-tab_menu-item.disabled {
    cursor: default;
    pointer-events: none;
    filter: brightness(0.9);
    opacity: 0.9;
}

.ci-tab_menu-item.is-active>.creators_icon .ci-tab_btn {
    display: none;
}

.ci-tab_menu-item.is-active {
    background-color: #FFF;
}

.ci-tab_menu-item.is-active::before {
    content: "";
    display: block;
    background-color: #FFF;
    width: 100%;
    height: 24px;
}

.ci-tab_menu-item .creators_icon {
    padding: 24px;
}

.ci-btn_area {
    margin-top: 16px;
    height: 38px;
}

.creators_label {
    background-color: #807d7a;
    /*color: #EAE4D1;*/
    color: #ffffff;
}

.ci-tab_menu-item.is-active>.creators_label {
    background-color: #4d4948;
}

.ci-tab_panel-box001 {
    display: none;
}

.ci-tab_panel-box002 {
    display: none;
}

.ci-tab_panel-box003 {
    display: none;
}

.ci-tab_panel-box.is-show {
    display: block;
}

.product_imgs {
    align-self: flex-end;
}

.ci-tab_btn {
    border: 1px solid #d3cab3 !important;
    border-radius: 0;
    font-weight: 700;
    position: relative;
    background: transparent;
    transition: all 0.2s ease;
    z-index: 1;
}

.ci-tab_btn::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: #4d4948;
    transform-origin: 0% 50%;
    transform: scaleX(0);
    transition: transform ease 0.2s;
}

.ci-tab_menu-item:hover .creators_icon .ci-tab_btn {
    color: #FFF;
}

.ci-tab_menu-item:hover .creators_icon .ci-tab_btn::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
}


.ci-arrow.icon-yazirusi {
    position: absolute;
    right: 6px;
    top: calc(50% - 6px);
    transform: translate(-50%, 0);
    color: #4C4948;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    transform: scale(0.6, 0.6);
    font-weight: 700;
}

.ci-tab_menu-item:hover .creators_icon .ci-tab_btn .ci-arrow.icon-yazirusi {
    color: #FFF;
}

.ci-tab_menu-item.is-active .ci-content_line {
    position: absolute;
    background-color: #4C4948;
    width: 2px;
    height: 60px;
    left: 50%;
}

.ci_button_ara {
    margin-bottom: -80px;
}

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

    

    

    

    .flexBox.concept2 {
        position: static;
        padding-top: 0;
    }

    

    

    

    

    

    

    

    .ci-tab_menu-item .creators_icon {
        padding: 8px;
    }

    .ci-tab_menu-item.is-active::before {
        height: 16px;
    }

    .creators_label {
        display: flex;
        font-size: 10px;
        min-height: 82px;
        padding: 0 8px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .ci-btn_area {
        margin-top: 8px;
        height: 30px;
    }

    .ci-tab_btn {
        font-size: 12px;
    }

    .ci-tab_btn_arrow::after {
        display: none;
    }

    .ci-arrow.icon-yazirusi {
        display: none;
    }

    .ci-tab_menu-item.is-active .ci-content_line {
        height: 40px;
    }

}

/* 03 */


































/*  hirao-ichizaki  */


















/* ----------------------------------------

- LIFE INFORMATION

---------------------------------------- */



.lifeItems .lifeItem {
    border-bottom: 1px solid #efefef;
    color: var(--colors-black02);
}

.lifeItems .lifeItem:not(:nth-child(2)) {
    margin-top: 8px;
    line-height: 1.5 !important;
}

.lifeItems .lifeItem:last-child {
    border-bottom: none;
}

.lifeItems .lifeItem>div:first-child {
    font-weight: 600;
}

.lifeItems .lifeItem>div:nth-child(2) {
    text-align: right;
    line-height: 1.5 !important;
    /*color: #888;*/
    padding: 4px 0 8px;
}

.lifeItems .lifeItem>div:nth-child(2)>span {
    font-size: 90%;
    letter-spacing: 0.02em;
}

.lifeItems .lifeItem>div:first-child {
    font-weight: 600;
}

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

    /*.lifeDistance {
        flex-direction: column;
        row-gap: 16px;
        padding: 8px 16px;
    }*/

    .fs-vw {
        font-size: 3.5vw;
    }
}




/* ----------------------------------------

- OUTLINE

---------------------------------------- */

.outline-table th {
    width: 25%;
}

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

    .outline-table th,
    .outline-table td {
        display: block;
        width: 100%;
    }
}




/* ----------------------------------------

- News

---------------------------------------- */
.post_content .pseudo_ele_p {
    line-height: 2.4;
    margin: 0 0 2em 0;
}

.post_content .pseudo_ele_p:last-child {
    margin: 0;
}

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

    .post_content .pseudo_ele_p {
        line-height: 2;
    }
}





/* ----------------------------------------

- Location

---------------------------------------- */

/* ----------------------------------------

- New Concept

---------------------------------------- */

/* ----------------------------------------

- Residence

---------------------------------------- */

.flex {
    display: flex;
}

.flexWrap {
    flex-wrap: wrap;
}


/* ----------------------------------------

- New Landscape

---------------------------------------- */

/* ----------------------------------------

- Galleries Tour

---------------------------------------- */
.makingGalleryListHead {
  position: relative;
  height: 150px;
}

.makingGalleryListHead img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.makingGalleryListHead .makingGalleryList_l_hirao {
  width: 28%;
}

.makingGalleryListHead .makingGalleryList_hirao_mg {
  width: 70%;
}

.makingGalleryListHead .makingGalleryList_l_plus {
  width: 30%;
}

.galleriesFloor {
  height: 42px !important;
}

@media screen and (max-width: 767px) {
	.makingGalleryListHead {
    position: static;
    height: auto;
    width: auto;
    text-align: center;
	}

  .makingGalleryListHead img {
    display: inline;
    position: static;
    transform:none;
  }

  .galleriesFloor {
      height: 36px !important;
  }

}

.ancTargetWrap {
    padding-top: 60px;
}

.ancTarget {
    padding-top: 60px;
    margin-top:-60px;
}

.makingAncLinkWrap {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.makingAncLink {
	display: block;
	width: calc(25% - 9px);
}
.makingAncLink img {
	max-width: 100%;
  margin-top: 0px !important;
}
.makingAncLink .makingAncLink_off {
	display: inline-block!important;
}
.makingAncLink .makingAncLink_on {
	display: none!important;
}
.makingAncLink:hover .makingAncLink_off {
	display: none!important;
}
.makingAncLink:hover .makingAncLink_on {
	display: inline-block!important;
}
@media screen and (max-width: 767px) {

	.makingAncLink {
		width: calc(50% - 12px);
	}
}


/* ----------------------------------------

- House Making

---------------------------------------- */

/* ----------------------------------------

- HOUSING METHOD

---------------------------------------- */







/*  madorzau add 25/9/5  */
.flexBox.hm04_flexBox>div:nth-child(1),
.flexBox.hm04_flexBox>div:nth-child(3),
.flexBox.hm04_flexBox>div:nth-child(4),
.flexBox.hm04_flexBox>div:nth-child(5) {
   width: calc(22.5% - 12px);
}

.flexBox.hm04_flexBox>div:nth-child(2) {
  width: calc(10% - 48px);
}

@media only screen and (max-width: 767px) {
  .flexBox.hm04_flexBox>div:nth-child(1),
  .flexBox.hm04_flexBox>div:nth-child(2),
  .flexBox.hm04_flexBox>div:nth-child(3),
  .flexBox.hm04_flexBox>div:nth-child(4),
  .flexBox.hm04_flexBox>div:nth-child(5) {
    width: 100%;
  }
}

/* method contents MENU
---------------------------------------*/
.methodAncLinkWrap, .methodButtonArea {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.methodButtonArea {
    flex-direction: row;
}

.methodAncLink {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #4C4948;
    color: #4C4948 !important;
    line-height: 1.4;
    font-weight: 700;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 3;
    transition: 0.3s;
}

.methodAncLinkWrap .methodAncLink {
  width: calc(20% - 24px);
  padding: 12px 0px;
}

.methodButtonArea .methodAncLink {
    min-width: 200px;
    padding: 12px 32px;
}

.methodAncLink:before {
    content: '';
    display: block;
    width: 0;
    height: calc(100% + 2px);
    position: absolute;
    top: -1px;
    left: -100%;
    z-index: -1;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    background: #4C4948 !important;
}

.methodAncLinkWrap .methodAncLink .en, .methodButtonArea .methodAncLink .ja {
    font-size: 12px;
}

.methodAncLinkWrap .methodAncLink .ja, .methodButtonArea .methodAncLink .en {
    font-size: 20px;
    line-height: 1.8;
}

/* hover */
.methodAncLink:hover {
  color: var(--colors-white) !important;
  background: none;
  border-color: #4C4948 !important;
}

.methodAncLink:hover:before {
    left: 0;
    width: 100%;
}


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


    

    .methodAncLinkWrap {
        justify-content: left;
    }

  	.methodAncLinkWrap .methodAncLink {
  		  width: calc(50% - 16px);
  	}

    .methodAncLinkWrap .methodAncLink .en {
        font-size: 11px;
    }

    .methodButtonArea {
        flex-direction: column;
        gap: 24px;
    }

    .methodButtonArea .methodAncLink {
        min-width: inherit;
        padding: 12px 32px;
        font-size: 14px;
    }


}



/* ----------------------------------------

- HOUSING METHOD 2

---------------------------------------- */


/* /brand タブ */
.js-brand-tab {
    display: flex;
    gap: 16px;
    white-space: nowrap;
    overflow: auto;
        scroll-snap-type: x mandatory;
}
.js-brand-tab button {
}

/* アクティブなタブボタン */
.js-brand-tab button.active {
    background-color: var(--colors-gray-8);
    color: var(--colors-black);
}

/* タブコンテンツ */
.js-brand-tabcontent {
    display: none;
    padding: 16px 0 0;
}

/* アクティブなタブコンテンツ */
#js-brand-tab1, #js-etype-tab1, #js-gtype-tab3 {
    display: block;
}

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

    .js-brand-tabcontent {
        padding: 30px 0 0;
    }

    .js-brand-tab {
        margin-right: -16px;
        padding-right: 16px;
    }

}


.brandTabButton {
    z-index: 3;
    position: relative;
    width: 100%;
}

.brandTabButton_inner {
    display: inline-block;
    padding: 16px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    line-height: 1.2;
    font-size: 16px;
    width: 100%;
    cursor: pointer;
}

.brandTabButton_inner {
    background-color: none;
    border: solid 1px var(--colors-gray-8) !important;
    color: var(--colors-gray-8) !important;
    order: 100;
    box-sizing: border-box;
}

.brandTabButton_inner .icon-yazirusi {
    position: absolute;
    right: 8px;
    top: calc(50% - 6px);
    transform: translate(-50%, 0);
    color: #808080;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}

.brandTabButton_inner:before {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% + 2px);
    position: absolute;
    top: -1px;
    left: -100%;
    z-index: -1;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}

.brandTabButton_inner:before {
    background: var(--colors-gray-8) !important;
}

/* active */
.brandTabButton.active .brandTabButton_inner {
    background: var(--colors-gray-8) !important;
    color: #000!important;
    cursor: default;
}
.brandTabButton.active .brandTabButton_inner .icon-yazirusi {
    color: #000!important;
    display: none;
}
.brandTabButton.active .brandTabButton_inner:hover .icon-yazirusi {
    color: #000!important;
}

/* hover */
.brandTabButton_inner:hover .icon-yazirusi {
    color: var(--colors-black) !important;
}

.brandTabButton_inner:hover {
    color: var(--colors-black) !important;
    background: none;
}

.brandTabButton_inner:hover:before {
    left: 0;
}


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

    .brandTabButton_inner {
        padding-left: 48px;
        padding-right: 48px;
    }

    .brandTabButton_inner .icon-yazirusi {
        right: -4px;
    }

}

.p-type .design_button {
    border: solid 1px var(--colors-main-oh-02) !important;
    color: var(--colors-main-oh-02) !important;
}

.p-type .design_button:hover {
    border: solid 1px var(--colors-main-oh-02) !important;
    color: var(--colors-main-oh-01) !important;
    background: none;
    /*border-color: #231815 !important*/
}

.p-type .design_button:before {
    background: var(--colors-main-oh-02) !important;
    /*background: #231815 !important;*/
}


/* ----------------------------------------

- EQUIPMENT

---------------------------------------- */

/* eqPageList */

/* eqTabs */
.eqTabs {

}

.eqTab_item {
  width: calc(50% - 11px);
  height: 50px;
  border: 1px solid #413e3c;
  line-height: 50px;
  font-size: 16px;
  color: #413e3c;
  text-align: center;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 10;
}



.eqTab_item .icon-yazirusi {
    position: absolute;
    right: 8px;
    top: calc(50% - 6px);
    transform: translate(-50%, 0);
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    color: #413e3c;
}

.eqTab_item .icon-yazirusi:before {
    content: '\2192'; /* → RIGHTWARDS ARROW (Unicode) — design_plus フォントは細chevronのみで線付き矢印が無い */
    font-family: inherit;
}

.eqTab_item:before {
    content: '';
    display: block;
    width: 0;
    height: calc(100% + 2px);
    position: absolute;
    top: -1px;
    left: 0%;
    z-index: -1;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    background: #413e3c !important;
}

.eqTab_item.terrace {
  margin-right: 11px;
}

.eqTab_item.hills {
  margin-left: 11px;
}

input[name="eqTab_item_01"], input[name="eqTab_item_02"] {
  display: none;
}

/* hover */
.eqTab_item:hover .icon-yazirusi {
    color: #fff;
}

.eqTab_item:hover {
    color: var(--colors-white) !important;
    background: none;
}

.eqTab_item:hover:before {
    left: 0;
    width: 100%;
}

/* checked */
.eqTabs input:checked {
  pointer-events: none;
}

.eqTabs input:checked + .eqTab_item .icon-yazirusi {
  display: none !important;
}

.eqTab_content {
  /*height: 0;
  opacity: 0;*/
  transition: .3s;
  padding: 0;
  clear: both;
  overflow: hidden;
  display: none;
}

.eqTabs input:checked .eqTab_content {
}

#eqTabs_01 #floor_below:checked ~ #floor_below_content,
#eqTabs_01 #floor_above:checked ~  #floor_above_content,
#eqTabs_01 #floor_customize:checked ~  #floor_customize,
#eqTabs_01 #terrace_01:checked ~ #terrace_01_content,
#eqTabs_02 #terrace_02:checked ~ #terrace_02_content,
#eqTabs_01 #hills_01:checked ~  #hills_01_content,
#eqTabs_02 #hills_02:checked ~  #hills_02_content {
  padding-top: 24px;
  display: block;
  /*height: 100%;
  opacity: 1;*/
}

.eqTabs input:checked + .eqTab_item {
  pointer-events: none;
  background-color: #413e3c;
  color: #ffffff;
}

.eqTabs input:checked + .eqTab_item.terrace {
}

.eqTabs input:checked + .eqTab_item.hills {
}

@media screen and (max-width: 750px) {
  .eqTab_item {
      font-size: 14px;
      height: 40px;
      line-height: 40px;
  }
  
  .eqTab_item .icon-yazirusi {
    /*right: 4px;
    font-size: 8px;
    top:calc(50% - 2px);*/
    display: none;
  }


}

/* pet
--------------------------------------   */

/* スクロールアイコン */
.scroll-hint-icon {
    width: 128px !important;
}

/* ----------------------------------------

- PREMIUM FLOOR

---------------------------------------- */
.postContentRow.postContentRow-premium .postContentRow_inner {
    padding-top: 100px;
    padding-bottom: 80px;
}

.postContentRow.postContentRow-premium .postContentRow_inner .ttl-logo,
.postContentRow.postContentRow-premiumLayout .postContentRow_inner .ttl-logo {
    height: 100px;
}

.postContentRow.postContentRow-premium .postContentRow_inner .ttl-top {
    margin-top: 48px;
    font-weight: 500;
    font-size: 36px;
    line-height: 1.7;
    letter-spacing: 0.25em;
}

.postContentRow.postContentRow-premium .postContentRow_inner .lead-txt {
    margin-top: 48px;
    font-size: 20px;
    line-height: 1.7;
    letter-spacing: 0.1em;
}

.postContentRow.postContentRow-premium .postContentRow_inner.passwordBox .c-pw__des {
    display: none;
}

.postContentRow.postContentRow-premium .postContentRow_inner.passwordBox .c-pw__box {
    background-color: var(--colors-main-oh-01);
    border: none;
    margin-bottom: 0px;
}

.postContentRow.postContentRow-premium .postContentRow_inner.passwordBox .c-pw__box .c-pw__box-input {
    margin-right: 0px;
    border: none;
    width: 480px;
    font-size: 18px;
    padding: 16px;
    height: 56px;
}

.postContentRow.postContentRow-premium .postContentRow_inner.passwordBox .c-pw__box .c-pw__btn--submit {
  background: -webkit-gradient(45deg, #d5be95 35%, #c19e51);
  background: linear-gradient(45deg, #d5be95 35%, #c19e51);
  height: 56px;
  border: none;
  font-size: 18px;
  letter-spacing: 0.05em;
  top: 0.5px;
}

.postContentRow.postContentRow-premium .buttonAreaRequest {
  margin-top: 16px;
}
.postContentRow.postContentRow-premium .buttonAreaRequest .buttonRequest {
    display: inline-block;
    border: solid 1px var(--colors-main-oh-02) !important;
    color: var(--colors-main-oh-02) !important;
    width: 270px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-size: 16px;
    z-index: 1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.postContentRow.postContentRow-premium .buttonAreaRequest .buttonRequest:before {
  content:''; display:block; width:100%; height:calc(100% + 2px);
  position:absolute; top:-1px; left:-100%; z-index:-1;
  -webkit-transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}

.postContentRow.postContentRow-premium .buttonAreaRequest .buttonRequest:before {
    background: var(--colors-main-oh-02) !important;
}

.postContentRow.postContentRow-premium .buttonAreaRequest .buttonRequest:hover {
    border: solid 1px var(--colors-main-oh-02) !important;
    color: var(--colors-main-gray) !important;
    background: none;
    /* border-color: #231815 !important; */
}

.postContentRow.postContentRow-premium .buttonAreaRequest .buttonRequest:hover:before {
  left: 0;
}

.postContentRow.postContentRow-premium .buttonAreaRequest .linkRequest {
  text-decoration: underline;
  color: var(--colors-main-oh-02) !important;
}

.postContentRow.postContentRow-premium .buttonAreaRequest .linkRequest:hover {
  text-decoration: none;
}

/* ===== "View more" button (general scope) — 2026-04-28 ====================
   .postContentRow-premium 以外の暗色セクションでも buttonRequest を使えるよう
   一般スコープ版を追加。premium 側の既存ルールはそのまま維持（specificity で優先される）。
   将来 Phase B で button 系を整理する際に統合候補。
=========================================================================== */
.buttonAreaRequest .buttonRequest {
  display: inline-block;
  border: solid 1px var(--colors-main-oh-02);
  color: var(--colors-main-oh-02);
  width: 270px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-size: 16px;
  z-index: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
}
.buttonAreaRequest .buttonRequest:before {
  content: '';
  display: block;
  width: 100%;
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  left: -100%;
  z-index: -1;
  background: var(--colors-main-oh-02);
  -webkit-transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
}
.buttonAreaRequest .buttonRequest:hover {
  color: var(--colors-main-gray);
  background: none;
}
.buttonAreaRequest .buttonRequest:hover:before {
  left: 0;
}



.postContentRow.postContentRow-premium-banner a:hover,
.postContentRow.postContentRow-premium-nologin02 a:hover {
  opacity: 0.8;
}

.nav_form_area {
    margin-top: -24px;
}

.nav_form_area .c-pw__box-input {
  margin-right: 0px;
  border: none;
  width: 216px;
  font-size: 18px;
  padding: 12px;
  height: 48px;
}

.nav_form_area .bt_nav_form {
  display: inline-block;
  position: relative;
  background: -webkit-gradient(45deg, #d5be95 35%, #c19e51);
  background: linear-gradient(45deg, #d5be95 35%, #c19e51);
  height: 48px;
  width: 49px;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  top: 18.5px;
  left: -1px;
}

.nav_form_area .bt_nav_form:hover {
    opacity: 0.8;
}

.nav_form_area .bt_nav_form .stickarrow {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 12px;
  width: 20px;
  height: 6px;
  border-bottom: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  transform: skew(45deg);
}

.postContentRow .prText01 {
  /*border-top: 1px solid var(--colors-white);
  border-bottom: 1px solid var(--colors-white);*/
  color: var(--colors-white);
  padding: 36px 8px;
  font-size: 28px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
}

.postContentRow.postContentRow-premium-banner {
  background-color: var(--colors-main-oh-02);
}



.premiumRoomplanBanner:hover img {
  opacity: 0.8;
}

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

  .postContentRow.postContentRow-premium .postContentRow_inner {
      padding-top: 50px;
      padding-bottom: 50px;
  }

  .postContentRow.postContentRow-premium .postContentRow_inner .ttl-logo,
  .postContentRow.postContentRow-premiumLayout .postContentRow_inner .ttl-logo {
      height: 56px;
	  margin-top: 16px;
  }

  .postContentRow.postContentRow-premium .postContentRow_inner .ttl-top {
    font-size: 24px;
    margin-top: 28px;
  }

  .postContentRow.postContentRow-premium .postContentRow_inner .lead-txt {
    font-size: 16px;
    margin-top: 28px;
  }

  .postContentRow.postContentRow-premium .postContentRow_inner.passwordBox .c-pw__box .c-pw__box-input {
      width: 200px;
  }

  .postContentRow.postContentRow-premium .postContentRow_inner.passwordBox .c-pw__box .c-pw__btn--submit {
    font-size: 16px;
    width: 90px;
    padding: 0px 10px;
    top:0px;
  }

  

  .postContentRow .prText01 {
    font-size: 18px;
    line-height: 2;
  }
}


/*  premium concept  */
#premium_concept_slider {
  width: 92%;
  margin-left: 4%;
}

#premium_concept_slider .slick-list {
    padding: 0 4% 0 0 !important;
}
.premium_concept_slider_wrap {
  width: 100%;
  margin: 20px auto;
  position: relative;
}

.premium_concept_slider {
    width: 100%;
    height: auto;
    min-height: 60px;
    margin: 0;
}

.premium_concept_slider .slick-arrow {
    background-color: var(--colors-main-beige);
    opacity: 0;
    border-radius: 50%;
    transition: all .3s ease-in-out;
}

.premium_concept_slider .slick-arrow {
    width: 48px;
    height: 48px;
    margin: -30px 0 0 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
    font-family: 'design_plus';
    color: #fff;
    font-size: 12px;
    line-height: 48px;
    position: absolute;
    bottom: 0;
    right: 2px;
    z-index: 2;
    cursor: pointer;
    background: #000;
    border: 1px solid #ffffff;
    opacity: 0.8;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.premium_concept_slider .slick-prev {
    top: 50%;
    left: -70px;
    display: none !important;
}

.premium_concept_slider .slick-next {
    top: 50%;
    right: -24px;
}

.premium_concept_slider_lead {
  display: grid;
  width: 100%;
  height: 602px;
  align-items: center;
}

/* Dots */
.dots-wrap {
    display: flex;
    justify-content: flex-start;
    position: absolute;
    bottom: -64px;
    left: -28px;
}

.dots-wrap li {
    width: 24px;
    height: 4px;
    border-radius: 2px;
    margin: 0 5px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    list-style: none;
}

.dots-wrap li:hover,
.dots-wrap li.slick-active {
    background: rgba(0, 0, 0, 0.8);
}
.dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

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

  #premium_concept_slider {
    width: 96%;
    margin-left: 2%;
  }

  #premium_concept_slider .slick-list {
      padding: 0 2% 0 0 !important;
  }

  .premium_concept_slider_lead {
    height: auto;
    min-height: 492px;
  }

  .premium_concept_slider .slick-arrow {
      width: 32px;
      height: 32px;
      margin: -60px 0 0 0;
      font-size: 8px;
      line-height: 32px;
  }

  .premium_concept_slider .slick-next {
      right: -18px;
  }


}

/*  premium floor  */


.flexPremiumFloor1unit>div:nth-child(1) {
    width: 130px;
}

.flexPremiumFloor1unit>div:nth-child(2) {
  flex: 1;
}

.flexPremiumFloor1unit>div:nth-child(1) h4 {
  background-color: #aaadb3;
  place-content: center;
  place-items: center;
  width: 110px;
  height: 110px;
  padding: 10px;
  text-align: center;
}


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

  .img_premium-floor-plan_ttl {
    aspect-ratio: 375 / 56;
    object-fit: cover;
  }

  

  .flexPremiumFloor1unit>div:nth-child(1),
  .flexPremiumFloor1unit>div:nth-child(2) {
    width: 100% !important;
  }

  .flexPremiumFloor1unit>div:nth-child(1) h4 {
     width: inherit !important;
     height: inherit !important;
     padding: 4px 0px;
     text-align: center;
     margin-bottom: 12px;
  }

}

/* premium view */


.view_contents #image-viewer {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.view_contents #image-container {
    width: 100%;
    overflow: hidden;
    /*border: 1px solid #ddd;
    background-color: #fff;*/
    cursor: grab;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.view_contents #image-container:active {
    cursor: grabbing;
}

.view_contents #image-container::-webkit-scrollbar {
    display: none;
}

.view_contents #image-scroller {
    white-space: nowrap;
}

.view_contents #scrolling-image {
    max-width: none;
    height: auto;
    vertical-align: top;
    pointer-events: none;
}

.view_contents #image-viewer .arrow-to-left,
.view_contents #image-viewer .arrow-to-right {
  top: 50%;
  transform: translateY(-50%);

}
.view_contents #image-viewer .arrow-to-left {
    left: 1.25%;
}
.view_contents #image-viewer .arrow-to-right {
    right: 1.25%;
}

.view_contents #image-viewer .viewer_nav {
  cursor: grab;
  position: relative;
  display: inline-block;
  width: 33px;
  height: 62px;
}

.view_contents #image-viewer .viewer_nav::before,
.view_contents #image-viewer .viewer_nav::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  width: 24px;
  height: 4px;
  /*border-radius: 9999px;*/
  background-color: #fff;
  box-shadow: 4px 4px 4px rgb(0 0 0 / .2);

}


.view_contents #image-viewer .viewer_nav.to-right::before,
.view_contents #image-viewer .viewer_nav.to-right::after {
  right: 0;
  transform-origin: calc(100% - 2px) 50%;
}

.view_contents #image-viewer .viewer_nav.to-left::before,
.view_contents #image-viewer .viewer_nav.to-left::after {
  left: 0;
  transform-origin: 2px 50%;
}

.view_contents #image-viewer .viewer_nav::before {
  transform: rotate(45deg);
}

.view_contents #image-viewer .viewer_nav::after {
  transform: rotate(-45deg);
}

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

  .view_contents .js-brand-tab {
    flex-direction: column !important;
  }

  .view_contents #image-container {
    aspect-ratio: 1 !important;
  }

  .view_contents #image-container #scrolling-image {
    margin-top: -12% !important;
  }

  .view_contents #image-viewer .viewer_nav::before,
  .view_contents #image-viewer .viewer_nav::after {
    width: 16px;
  }

}

/*  premium equipment  */
.premium_equipment_detail .p-number__answer {
  display: none;
}
.p-number__button.premium_toggle {
  margin-left: auto;
  margin-right: auto;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  position: relative;
}

.p-number__button.premium_toggle.typeW {
    border-color: var(--colors-white);
}

.p-number__button.premium_toggle.typeGray3e {
    border-color: var(--colors-sub-gray3e);
}

.p-number__button.premium_toggle .p-number__buttonLine {
  width: 12px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.p-number__button.premium_toggle.typeW .p-number__buttonLine {
  background: var(--colors-white);
}

.p-number__button.premium_toggle.typeGray3e .p-number__buttonLine {
  background: var(--colors-sub-gray3e);
}

.p-number__button.premium_toggle .p-number__buttonLine:nth-child(2) {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: 0.3s ease-in-out;
}
.p-number__button.premium_toggle .p-number__buttonLine.active {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* TOPページ / footer バナー用フリースペース
--------------------------------------   */
/*#cb_content_2 #cb_content_1 .rich_font_type1, #cb_content_1 .rich_font_type2*/
#header_slider .caption,
#cb_content_1 .rich_font_type1, #cb_content_1 .rich_font_type2 {
  font-family: "Zen Old Mincho", serif;
}


#top_free_space, .top_free_spaceRow {
  padding: 80px 0;
}

.footerPrSpace {
  padding-bottom: 60px;
}

#top_free_space div, .top_free_spaceRow div, .footerPrSpace div {
  margin: 30px auto 0;
  max-width: 880px;
  width: 100%;
}

#top_free_space div:first-child, .top_free_spaceRow div:first-child, .footerPrSpace div:first-child {
  margin: 0 auto;
}

#top_free_space div img, .top_free_spaceRow div img, .footerPrSpace div img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  opacity: 1;
}

#top_free_space div img:hover, .top_free_spaceRow div img:hover, .footerPrSpace div img:hover {
  opacity: 0.7;
}

@media only screen and (max-width: 750px) {
  #top_free_space, .top_free_spaceRow, .footerPrSpace {
    padding: 30px 0;
  }
  #top_free_space div, .top_free_spaceRow div, .footerPrSpace div {
    width: 92%;
  }
}

/* slick slider
--------------------------------------   */
/*#pb_slider_nav-1 .slick-track {
  margin-left: auto;
  margin-right: auto;
}*/

.pb_slider_wrap img {
  margin-top: 0px !important;
}

/* ============================================================
   DESIGN ページ タブ切替（&STAY / ドッグラン）
   - HTML 側で .font_mincho を併用するため font-family は指定しない
   - 案 C: アンダーライン拡大（上品系）
   ============================================================ */
.designTabNav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* .post_content a が specificity (0,1,1) で勝ってしまうため、.post_content を前置して (0,2,0) に */
.post_content .designTabNav-btn {
    position: relative;
    display: block;
    text-align: center;
    padding: 18px 24px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #d0d0d0;
    color: rgba(0, 0, 0, 0.4);
    font-size: 18px;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
}

.post_content .designTabNav-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--colors-black02);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.post_content .designTabNav-btn:hover,
.post_content .designTabNav-btn.active {
    color: #000;
    font-weight: 600;
}

.post_content .designTabNav-btn:hover::after,
.post_content .designTabNav-btn.active::after {
    width: 100%;
}

.designTabContent {
    display: none;
}

.designTabContent.active {
    display: block;
}

@media screen and (max-width: 767px) {
    .designTabNav {
        gap: 8px;
    }
    .designTabNav-btn {
        padding: 14px 12px;
        font-size: 14px;
    }
}


/* ============================================================
   DESIGN ページ 物件デザインコンテンツ（タブの上、APPEARANCE 系）
   - cidnal/L+HIRAO 流: 縦並び + 画像とテキストの「左端ずらし」
   - 背景色切替: APPEARANCE/ENTRANCE APPROACH 白 → ENTRANCE HALL 画像まで白 ⇒
     ENTRANCE HALL テキスト + CLUB LOUNGE はベージュ薄
     （ENTRANCE HALL を画像 section / テキスト section に分割して途中切替）
   - .post_content 前置で specificity 確保
   ============================================================ */

/* APPEARANCE: 中央寄せコピー主役、画像なし */
.post_content .designConcept-appearance {
    width: 100%;
    text-align: center;
    padding: 120px 24px;
    box-sizing: border-box;
}

/* 縦並びナラティブ（cidnal 流の左端ずらし） */
.post_content .designConcept-narrative {
    width: 100%;
    box-sizing: border-box;
}

.post_content .designConcept-narrative-img img {
    width: 100%;
    display: block;
}

/* CLUB LOUNGE: ベージュ薄継続、内側通常配置（章間細線あり） */




/* PC (>=1025px): 縦並び + 左端ずらし */
@media screen and (min-width: 1025px) {
    .post_content .designConcept-narrative {
        padding: 160px 0;
    }

    /* デフォルト: 画像が中央寄り左、テキストが画像より右にずれる */
    .post_content .designConcept-narrative .designConcept-narrative-img {
        width: 70%;
        margin-left: 15%;
    }
    .post_content .designConcept-narrative .designConcept-narrative-text {
        max-width: 640px;
        margin-left: 28%;
        padding-top: 60px;
    }

    /* shiftRight: 画像は左寄り、テキストもやや左寄せ（ENTRANCE HALL 全体を左に寄せる）*/
    
    

    /* fullbleedRight: 画像を画面右端までフルブリード（区切り効果、lplus 流）
       次の section と重ならないよう padding-bottom を拡大 */
    .post_content .designConcept-narrative.fullbleedRight {
        padding-bottom: 240px;
    }
    .post_content .designConcept-narrative.fullbleedRight .designConcept-narrative-img {
        width: 85vw;
        margin-left: auto;
        margin-right: 0;
    }
    .post_content .designConcept-narrative.fullbleedRight .designConcept-narrative-text {
        max-width: 1100px;
        margin-left: 15vw;
        padding-top: 60px;
        padding-right: 0;
    }

    /* ENTRANCE HALL の section 分割版 */
    
    
    
}

/* TB (768-1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .post_content .designConcept-appearance {
        padding: 80px 32px;
    }
    .post_content .designConcept-narrative {
        padding: 80px 0;
    }
    .post_content .designConcept-narrative .designConcept-narrative-img {
        width: 90%;
        margin-left: 5%;
    }
    .post_content .designConcept-narrative .designConcept-narrative-text {
        margin-left: 12%;
        padding: 40px 5% 0 0;
    }
    
    
    
    
    
    
    
}

/* SP (<=767px): 全幅、左寄り 0 でシンプルに積む */
@media screen and (max-width: 767px) {
    .post_content .designConcept-appearance {
        padding: 60px 20px;
    }
    .post_content .designConcept-narrative {
        padding: 40px 0;
    }
    /* fullbleedRight: SP では画像が切替位置（画像の上にベージュ薄の余白を作らない） */
    .post_content .designConcept-narrative.fullbleedRight {
        padding-top: 0;
    }
    .post_content .designConcept-narrative .designConcept-narrative-img,
    .post_content .designConcept-narrative.shiftRight .designConcept-narrative-img {
        width: 100%;
        margin-left: 0;
    }
    .post_content .designConcept-narrative .designConcept-narrative-text,
    .post_content .designConcept-narrative.shiftRight .designConcept-narrative-text {
        max-width: 100%;
        margin-left: 0;
        padding: 24px 20px 0;
    }
    
    
    
    
    
}


/* ============================================================
   DESIGN ページ cidnal 流レイヤード（負マージン重ね + 3 階調）
   - 色階層: 白 → ベージュ薄 (#f0ece8) → 濃いベージュ (#e9e4dd)
   - 重ね合わせ: 上のセクションに -mt で被さり、左右どちらかに偏る
   - PC のみ重ね有効、TB/SP は通常の縦並び
   ============================================================ */

/* 濃いベージュ utility（既存変数 --colors-beige4 を class 化） */
.bgColorBeige4 {
    background-color: var(--colors-beige4) !important;
}

/* PC のみ: 負マージン重ね合わせ
   section 自体の background-color は全幅維持、内側コンテンツだけ偏らせる
   （cidnal は body 藍なので section margin OK だが、hakata7 は body 白なので外余白が露出する） */
@media screen and (min-width: 1025px) {
    .post_content .postContentRow.designConcept-overlap-l,
    .post_content .postContentRow.designConcept-overlap-r {
        margin-top: -200px;
        position: relative;
        z-index: 2;
    }
    
    .post_content .postContentRow.designConcept-overlap-r > * {
        margin-left: 12vw;
        margin-right: 0;
    }
}

/* TB/SP: 重ね無効、通常の縦並び（margin リセット） */
@media screen and (max-width: 1024px) {
    .post_content .postContentRow.designConcept-overlap-l,
    .post_content .postContentRow.designConcept-overlap-r {
        margin-top: 0;
    }
    .post_content .postContentRow.designConcept-overlap-l > *,
    .post_content .postContentRow.designConcept-overlap-r > * {
        margin-left: 0;
        margin-right: 0;
    }
}


/* ============================================================
   DESIGN ページ designConcept-bridge（背景 linear-gradient）
   - ENTRANCE HALL section の上 55% ベージュ薄、下 45% 濃いベージュ
   - 画像の途中で背景色が変わる演出（lplus 流の "::before 後ろ敷き" 代替案）
   ============================================================ */


/* designConcept-bridge-h: 左の余白が薄ベージュ、画像左端〜右が濃ベージュ
   デフォルト: 上端から濃ベージュ（section 連結時に間が空かない）
   ENTRANCE HALL 用 modifier: with-top-gap で画像上端から濃にする */
.post_content .postContentRow.designConcept-bridge-h {
    position: relative;
    background-color: var(--colors-beige05) !important;
}

.post_content .postContentRow.designConcept-bridge-h::before {
    content: '';
    position: absolute;
    top: 0;
    left: max(0px, calc((100% - 1160px) / 2 + 16px));  /* 画像左端 = postContentRow_inner 左端 + 内側 padding 16px */
    right: 0;
    bottom: 0;
    background-color: var(--colors-beige4);
    z-index: 0;
    pointer-events: none;
}

/* ENTRANCE HALL 用: 上端 100px は薄ベージュ（画像の上端から濃ベージュ） */
.post_content .postContentRow.designConcept-bridge-h.with-top-gap::before {
    top: 100px;
}

/* 内側コンテンツを z-index で前面に */
.post_content .postContentRow.designConcept-bridge-h > * {
    position: relative;
    z-index: 1;
}

/* TB/SP では矩形を解除 → section 全体濃ベージュ */
@media screen and (max-width: 1024px) {
    .post_content .postContentRow.designConcept-bridge-h {
        background-color: var(--colors-beige4) !important;
    }
    .post_content .postContentRow.designConcept-bridge-h::before {
        display: none;
    }
}

/* CLUB LOUNGE 用: 切替位置（画像左端）よりさらに右へ余白を作る */
.post_content .postContentRow.designConcept-strong-shift > * {
    margin-left: 24vw;
    margin-right: 0;
}
@media screen and (max-width: 1024px) {
    .post_content .postContentRow.designConcept-strong-shift > * {
        margin-left: 0;
    }
}

/* 重ね合わせのみ: 内容の左右シフトはなし（内側コンテンツ側で位置決定）
   ENTRANCE HALL は画像が上に突き抜けるため、重ね合わせを弱めて ENTRANCE APPROACH との余白を確保 */
@media screen and (min-width: 1025px) {
    .post_content .postContentRow.designConcept-stacked {
        margin-top: -140px;
        position: relative;
        z-index: 2;
    }
}
@media screen and (max-width: 1024px) {
    .post_content .postContentRow.designConcept-stacked {
        margin-top: 0;
    }
}


/* colBlock-asym-img-narrow: PC 1fr : 1.4fr 非対称（画像が狭い、テキスト広い） */
@media screen and (min-width: 768px) {
    .colBlock.colBlock-asym-img-narrow {
        grid-template-columns: 1fr 1.4fr;
    }
}

/* CLUB LOUNGE 用: strong-shift で margin-left 18vw 適用時、postContentRow_inner の 1160px 固定が overflow するため上書き */
.post_content .postContentRow.designConcept-strong-shift .postContentRow_inner {
    min-width: 0;
    width: auto;
    max-width: 80vw;
}
@media screen and (max-width: 1024px) {
    .post_content .postContentRow.designConcept-strong-shift .postContentRow_inner {
        max-width: 100%;
    }
}


/* designConcept-bleed-img: 画像が背景色境界を左上に突き抜ける（cidnal/lplus 流の演出） */
@media screen and (min-width: 1025px) {
    .post_content .designConcept-bleed-img {
        position: relative;
        z-index: 2;  /* 擬似要素 (z-index 0) より前面 */
    }
    .post_content .designConcept-bleed-img img {
        margin-top: -80px !important;
        margin-left: -80px !important;
        width: calc(100% + 80px) !important;
        max-width: none !important;
    }
}


/* ============================================================
   &STAY 4 シーンセクション（パンフ準拠：見出し下罫線、左テキスト/右イラスト、イラスト大きめ）
   ============================================================ */
.post_content .designConcept-stay-scenes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px 80px;
}

.post_content .designConcept-stay-scenes > div {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    box-sizing: border-box;
}

.post_content .designConcept-stay-scenes-text {
    flex: 1;
    min-width: 0;
    text-align: left;
}

/* 英語見出し: 黒ラベル（白文字、右に三角矢印を切り取り） */
.post_content .designConcept-stay-scenes-text h3 {
    padding-bottom: 0;
    margin-bottom: 4px;
    border-bottom: none;
    display: block;
}

.post_content .designConcept-stay-scenes-text h3 > span:first-child {
    display: inline-block;
    background-color: var(--colors-black02);
    color: #fff;
    padding: 2px 18px 2px 10px;
    line-height: 1.2;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

/* 日本語見出し: 罫線をこちらに移動 */
.post_content .designConcept-stay-scenes-text > p:first-of-type {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--colors-black02);
    margin-bottom: 6px;
}
@media screen and (max-width: 767px) {
    .post_content .designConcept-stay-scenes-text > p:first-of-type {
        padding-bottom: 4px;
        margin-bottom: 4px;
    }
}

/* PC: 英語見出しラベル・メインコピーを 1 行に収める（折り返し禁止）*/
@media screen and (min-width: 1025px) {
    .post_content .designConcept-stay-scenes-text h3 > span:first-child,
    .post_content .designConcept-stay-scenes-text > p:first-of-type {
        white-space: nowrap;
    }
}

.post_content .designConcept-stay-scenes-img {
    flex-shrink: 0;
    width: 110px;
}

.post_content .designConcept-stay-scenes-img img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width: 767px) {
    .post_content .designConcept-stay-scenes {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    /* SP: 上段=英字+日本語見出し+罫線 全幅 / 下段=本文+イラスト 75:25
       column-gap を含めて 100% に収まるよう calc で調整 */
    .post_content .designConcept-stay-scenes > div {
        display: grid;
        grid-template-columns: calc(75% - 6px) calc(25% - 6px);
        grid-template-rows: auto auto auto;
        row-gap: 0;
        column-gap: 12px;
    }
    .post_content .designConcept-stay-scenes-text {
        display: contents;
    }
    .post_content .designConcept-stay-scenes-text > h3 {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .post_content .designConcept-stay-scenes-text > p:nth-of-type(1) {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    .post_content .designConcept-stay-scenes-text > p:nth-of-type(2) {
        grid-column: 1;
        grid-row: 3;
        align-self: center;
    }
    /* イラスト: 列幅 (25%) に合わせ 100%。PC base の -sm/-md/-lg の width 上書きを !important で打ち消す */
    .post_content .designConcept-stay-scenes-img,
    .post_content .designConcept-stay-scenes-img.designConcept-stay-scenes-img-sm,
    .post_content .designConcept-stay-scenes-img.designConcept-stay-scenes-img-md,
    .post_content .designConcept-stay-scenes-img.designConcept-stay-scenes-img-lg {
        grid-column: 2;
        grid-row: 3;
        width: 100% !important;
        align-self: center;
    }
    /* illust01 (staycation, -sm) は他より大きく見えるため、画像自体を 60% に縮小し領域中央に配置 */
    .post_content .designConcept-stay-scenes-img.designConcept-stay-scenes-img-sm img {
        width: 60%;
        margin: 0 auto;
    }
}

/* ============================================================
   &STAY ルーム情報（左：間取り 1 枚、右：BEDROOM 写真+説明+リビング写真の縦 3 要素、高さ揃え）
   ============================================================ */
.post_content .designConcept-stay-room {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: stretch;
}

.post_content .designConcept-stay-room-left {
    display: flex;
    align-items: center;
    justify-content: center;
}

.post_content .designConcept-stay-room-left img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.post_content .designConcept-stay-room-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}

.post_content .designConcept-stay-room-right img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width: 767px) {
    .post_content .designConcept-stay-room {
        grid-template-columns: 1fr;
        gap: 64px;
        align-items: stretch;
    }
}


/* &STAY 4 シーン上のブリッジコピー: 上下に罫線 */
.post_content .designConcept-stay-bridge-copy {
    border-top: 1px solid var(--colors-black02);
    border-bottom: 1px solid var(--colors-black02);
    padding: 32px 16px;
}

@media screen and (max-width: 767px) {
    .post_content .designConcept-stay-bridge-copy {
        padding: 24px 12px;
    }
}


/* &STAY 4 シーン: イラストサイズ個別 modifier
   sm = staycation (83px), md = with friends / memorial (149px), lg = with relatives (165px) */
.post_content .designConcept-stay-scenes-img.designConcept-stay-scenes-img-sm {
    width: 83px;
}
.post_content .designConcept-stay-scenes-img.designConcept-stay-scenes-img-md {
    width: 149px;
}
.post_content .designConcept-stay-scenes-img.designConcept-stay-scenes-img-lg {
    width: 165px;
}


/* ============================================================
   DESIGN ページ タブレット (768-1024px) 専用調整
   - postContentRow_inner の min-width: 1160px を解除し viewport に追従
   - 大半の 2 カラムを 1 カラム積みへフォールバック (SP 寄り)
   - PC reverse / 非対称 grid 解除
   - 画像/テキスト幅・章間の TB 専用余白
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* --- A. postContentRow_inner を viewport に追従 (TB 全体に適用、site-wide の TB 基盤として安全な改善)  --- */
    .postContentRow .postContentRow_inner {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        padding-left: 32px;
        padding-right: 32px;
    }
    /* 中央タイトル等 (postContentRow直下に postContentRow_inner ない簡易行) */
    .post_content .postContentRow.bgColorWhite,
    .post_content .postContentRow.bgColorBeige05,
    .post_content .postContentRow.designConcept-bridge-h {
        max-width: 100%;
        overflow-x: clip;
    }

    /* --- A-2. EH&LL 本文下 と CL 画像上 の章間を 60px に
       base utility .pt100/.pb100 が !important なので TB 上書きも !important で打ち消す */
    .post_content .postContentRow.designConcept-bridge-h .postContentRow_inner.pb100 {
        padding-bottom: 60px !important;
    }
    .post_content .postContentRow.designConcept-bridge-h .postContentRow_inner.pt100 {
        padding-top: 60px !important;
    }

    /* --- B. design ページ内の 2 カラムを 1 カラムへ --- */
    .post_content .designConcept-bridge-h .colBlock.colBlock-2,
    .post_content .designConcept-bridge-h .colBlock.colBlock-asym-img-wide,
    .post_content .designConcept-bridge-h .colBlock.colBlock-asym-img-wider,
    .post_content .designTabContent .colBlock.colBlock-2,
    .post_content .designTabContent .colBlock.colBlock-asym-img-wide,
    .post_content .designTabContent .colBlock.colBlock-asym-img-wider {
        grid-template-columns: 1fr !important;
        gap: 32px 0 !important;
    }
    /* PC reverse 解除 (HTML 順 = 画像 → テキスト) */
    .post_content .designConcept-bridge-h .colBlock.colBlock-pc-reverse > div:nth-child(1),
    .post_content .designConcept-bridge-h .colBlock.colBlock-pc-reverse > div:nth-child(2),
    .post_content .designTabContent .colBlock.colBlock-pc-reverse > div:nth-child(1),
    .post_content .designTabContent .colBlock.colBlock-pc-reverse > div:nth-child(2) {
        order: initial !important;
    }
    /* 1 カラム化した画像幅: 80% 中央寄せ (テキストとの差別化) */
    .post_content .designConcept-bridge-h .colBlock > div > img,
    .post_content .designTabContent .colBlock > div > img {
        width: 80%;
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }
    /* テキストブロック: 80% 中央寄せ */
    .post_content .designConcept-bridge-h .colBlock > div:not(:has(> img)),
    .post_content .designTabContent .colBlock > div:not(:has(> img)) {
        max-width: 80%;
        margin: 0 auto;
    }

    /* --- B-2. ドッグランタブ 見出しは左揃え (英語/日本語とも) --- */
    .post_content .designTabContent[data-tab-content="dogrun"] h3,
    .post_content .designTabContent[data-tab-content="dogrun"] h3 .dspBlock {
        text-align: left;
    }

    /* --- C. ENTRANCE APPROACH (.designConcept-narrative.fullbleedRight) TB 専用 --- */
    .post_content .designConcept-narrative.fullbleedRight {
        padding: 80px 0;
    }
    .post_content .designConcept-narrative.fullbleedRight .designConcept-narrative-img {
        width: 90%;
        margin: 0 auto;
    }
    .post_content .designConcept-narrative.fullbleedRight .designConcept-narrative-text {
        max-width: 80%;
        margin: 0 auto;
        padding: 40px 0 0;
    }

    /* --- D. CLUB LOUNGE strong-shift 系の margin-left 解除 (TB は中央寄せ) --- */
    .post_content .postContentRow.designConcept-strong-shift > * {
        margin-left: 0;
        margin-right: 0;
    }

    /* --- E. &STAY 1LDK + BEDROOM 縦 3 要素: 1 カラム
       間取り図は SP 版 (and-stay01-sp.png) を採用、BEDROOM 文言・画像は左寄せ揃え
       grid gap = 間取り↔BEDROOM 画像 の余白 (96px = 倍) */
    .post_content .designConcept-stay-room {
        grid-template-columns: 1fr;
        gap: 96px;
        align-items: stretch;
    }
    /* BEDROOM 本文 → リビング画像 のみ追加余白 (flex gap 20 + margin 20 = 40 = 倍)
       BEDROOM 画像 → BEDROOM 本文 の gap 20 はそのまま
       img に .mt0 (margin-top: 0 !important) が付いているので !important で打ち消す */
    .post_content .designConcept-stay-room-right > div + img {
        margin-top: 20px !important;
    }
    /* 間取り図: TB では SP 版を採用 (PC 版を非表示、SP 版を表示) */
    .post_content .designConcept-stay-room-left img.spNone {
        display: none !important;
    }
    .post_content .designConcept-stay-room-left img.pcNone {
        display: block !important;
    }
    /* BEDROOM 画像・間取り図・BEDROOM 文言を同じ位置・同じ最大幅に揃える
       base CSS の `.post_content .designConcept-stay-room-left img { max-width: 100% }` (specificity 0,2,1) に勝つよう
       img 直接指定 (specificity 同値、後勝ち) で max-width を上書き */
    .post_content .designConcept-stay-room-left > *,
    .post_content .designConcept-stay-room-left > img,
    .post_content .designConcept-stay-room-right > *,
    .post_content .designConcept-stay-room-right > img {
        max-width: 600px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- F. &STAY 4 シーン: 1 カラム + 各シーンは PC 風 横並び (左テキスト/右イラスト)
       全体幅はブリッジコピーと同じ 80% 中央寄せ --- */
    .post_content .designConcept-stay-scenes {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .post_content .designConcept-stay-scenes > div {
        display: flex;
        gap: 30px;
        align-items: center;
    }
    .post_content .designConcept-stay-scenes-text {
        display: block;
        flex: 1;
    }
    .post_content .designConcept-stay-scenes-img {
        flex-shrink: 0;
    }
    /* 4 シーン: TB は SP の grid 配置 (上段見出し+罫線/下段本文+イラスト) を解除 */
    .post_content .designConcept-stay-scenes-text > h3,
    .post_content .designConcept-stay-scenes-text > p:nth-of-type(1),
    .post_content .designConcept-stay-scenes-text > p:nth-of-type(2) {
        grid-column: auto;
        grid-row: auto;
    }

    /* --- G. ブリッジコピー: TB は中央寄せ + 左右余白確保 --- */
    .post_content .designConcept-stay-bridge-copy {
        padding: 28px 16px;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ============================================================
   LOCATION ページ
   - 構造 (position / aspect-ratio / overflow / display flex 等) と
     装飾 (background-color / color / border / 特殊計算) のみを class に書く
   - margin / padding (汎用) / font-size / line-height / letter-spacing
     / font-weight / gap は HTML 側で utility class (mb, fs, lh 等) を使う
   ============================================================ */

/* Section 2-B/2-C: 横並び画像 高さ揃え (構造) */
.post_content .location-img-pair img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 4 / 3;
    display: block;
}

/* 左右ボーダーブロック (装飾、パンフ「博多さんぽ」風) */
.post_content .location-band-block {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    border-left: 5px solid #1a1a1a;
    border-right: 5px solid #1a1a1a;
}

/* Swiper ::after デフォルトアイコンを非表示 */
.post_content .location-slider-button::after,
.post_content .location-walk-button::after {
    display: none !important;
}

/* Section 4 ②: GATEWAY スライダー */
.post_content .location-slider-wrapper {
    position: relative;
}
.post_content .location-slide-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.post_content .location-slide-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 !important;
}

/* image オーバーレイ (位置のみ、色・背景は HTML 側 utility で指定) */
.post_content .location-image-tag {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-block;
    pointer-events: none;
    z-index: 2;
}

/* キャプション色 (装飾) */
.post_content .location-slide-caption {
    color: #4c4948;
}

/* スライダーボタン配置 (画像 aspect / slidesPerView から計算) */
.post_content .location-slider-btn-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    padding-top: calc(100% * 9 / 16 / 2.2);
    pointer-events: none;
    z-index: 10;
}
.post_content .location-slider-btn-area .location-slider-button {
    pointer-events: auto;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
@media screen and (max-width: 767px) {
    .post_content .location-slider-btn-area {
        padding-top: calc(100% * 9 / 16 / 1.2);
    }
    .post_content .location-slider-btn-area .location-slider-button {
        right: 8px;
        width: 32px;
        height: 32px;
    }
}

/* スワイパー矢印アイコン (CSS 三角) */
.post_content .location-swiper-arrow {
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-left: -2px;
}

/* ページネーション 横長 bar 装飾 (ohori3 流: 24x4 / 黒、非active は薄ベージュ) */
.post_content .location-pagination {
    text-align: center;
}
.post_content .location-pagination .swiper-pagination {
    position: relative;
    bottom: auto;
}
.post_content .location-pagination .swiper-pagination-bullet {
    width: 24px;
    height: 4px;
    border-radius: 2px;
    background: #d3cbc5;
    opacity: 1;
    margin: 0 5px;
}
.post_content .location-pagination .swiper-pagination-bullet-active {
    background: #1a1a1a;
}

/* Section 5 ② / Section 8: walk スライダー */
.post_content .location-walk-wrapper {
    position: relative;
}
.post_content .location-walk-slide-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.post_content .location-walk-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 !important;
}

/* 店名 高さ equalizer (構造、行間は HTML 側 lh utility) */
.post_content .location-walk-name {
    min-height: 2.6em;
    display: block;
}
@media screen and (max-width: 767px) {
    .post_content .location-walk-name {
        min-height: 0;
    }
}

/* スワイパーボタン (walk 系) */
.post_content .location-walk-btn-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    padding-top: calc(100% / 3.3);
    pointer-events: none;
    z-index: 10;
}
.post_content .location-walk-btn-area .location-walk-button {
    pointer-events: auto;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
@media screen and (max-width: 767px) {
    .post_content .location-walk-btn-area {
        padding-top: calc(100% / 1.2);
    }
    .post_content .location-walk-btn-area .location-walk-button {
        right: 8px;
        width: 32px;
        height: 32px;
    }
}



/* design ページ (post_id=79): 最終セクションと footer banner の間の gap 調整
   通常 #footer { margin-top: 80px } は広すぎ → 0 でべた付き。
   ティザー版は最終セクションがブラウン帯で境界が明確なため border-top は不要(削除 2026-06-18) */
body.page-id-79 #footer {
    margin-top: 0;
}

/* ROOM PLAN 一覧(/plan/ = post-type-archive-news): design ページ同様、#footer の margin-top:80px を 0 にして
   最終セクション(PREMIUM FLOOR 帯)と footer(くら旅バナー)の間の 80px 白余白を詰める (2026-07-01) */
body.post-type-archive-news #footer {
    margin-top: 0;
}
/* SP: PC は #footer margin-top:0 でべた付くが、SP ではコンテンツ側(最終 PREMIUM 帯の下)に
   約46px の余白が残る。#footer を同分引き上げてくら旅バナー上の余白を詰める (2026-07-01) */
@media screen and (max-width: 767px) {
    body.post-type-archive-news #footer {
        margin-top: -46px;
    }
}


/* LIFE INFORMATION ボタン: テキスト中央寄せ + 矢印を右側に配置
   .buttonLinkContent の左に invisible spacer (矢印 width 28px + margin 12px) を入れて
   テキスト中央位置を維持しつつ矢印を text の右側に表示 */
.post_content .buttonLink.buttonLink-textCenter .buttonLinkContent::before {
    content: "";
    display: inline-block;
    width: 28px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* タブレット (768-1024px): flexDirCol-tb を付けた flexBox を SP 同様に縦並びにする。
   PC は影響なし。premium「高さによる空間」/ equipment LIFESTYLE 等で使用。 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .flexBox.flexDirCol-tb {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .flexBox.flexDirCol-tb > .flexItemMain,
  .flexBox.flexDirCol-tb > .flexItemSub,
  .flexBox.flexDirCol-tb > .flexItemMain2,
  .flexBox.flexDirCol-tb > .flexItemSub2,
  .flexBox.flexDirCol-tb.flexBox-c2 > div {
    width: 100% !important;
  }
  /* premium「高さによる空間」の画像: TB 縦並び時、上のテキストブロック (w85p) と
     左右幅を揃え (85%中央)、上の文章との余白を確保する */
  .flexBox.flexDirCol-tb > .flexItemSub.prem-floor-img-tb {
    width: 85% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 32px !important;
  }
  /* equipment LIFESTYLE with DOG / with CAT のメイン画像: TB で 80%・中央 */
  .flexBox.flexDirCol-tb img.img80-tb {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* footercta */
.footer_cta {
background: #f3efe8;
overflow: hidden;
}
.footer_cta_inner {
    background: #331C0B;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 120px;
    margin-bottom: 120px;
    padding: 64px 80px;
    color: #fff;
}
@media screen and (max-width: 1400px) {
    .footer_cta_inner {
        flex-direction: column;
        padding: 40px 24px;
        max-width: 550px;
    }
}

.footer_cta li:first-child {
    padding-right: 64px;
}
@media screen and (max-width: 1400px) {
    .footer_cta li:first-child {
        padding-right: 0;
        padding-bottom: 40px;
    }
}

.footer_cta li:last-child {
    /* border-left: 1px solid #6D5848; */
    padding-left: 64px;
}

@media screen and (max-width: 1400px) {
    .footer_cta li:last-child {
        border-left: 0;
        border-top:  1px solid #6D5848;
        padding-left: 0;
        padding-top: 40px;
    }
}

.footer_cta .buttonLink {
    background: #E4C463;
}
@media screen and (max-width: 425px) {
.footer_cta .pc_only {
    display: none;
}
}