@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
:root {
  --text-color: #333;
  --gray-lightest: #f7f7f7;
  --gray-lighter: #dbdde1;
  --gray-light: #787878;
  --gray-dark: #4e5257;
  --gray-darker: #272727;
  --gray-darkest: #020202;
  --logo-red: #d93232;
  --logo-blue: #15499c;
}

html, body {
  overflow-x: hidden;
}

.br-pc-none {
  display: none;
}

.hidden-field {
  display: none !important;
}

/* =======================================
    レイアウト
======================================= */
/*ヘッダーとコンテンツ間の余白調整*/
.main {
  border-top: none;
  padding: 1rem 29px 0;
}
.home.page .main {
  padding-top: 0;
}
.home.page .content {
  margin-top: 0;
}
.home.page .date-tags,
.page-id-1247 .date-tags {
  margin-bottom: 0;
}

.min-contentSize {
  margin: auto;
  width: min(100%,840px);
}

/*セクション間隔*/
.section {
  padding: clamp(32px,7.2vw,72px) 0;
}

.section:not(.section--bg) + .section:not(.section--bg) {
  padding-top: 0;
}

.section >:first-child {
  margin-top: 0;
}

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

.section--bg {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  margin-bottom: 0 !important;
}

.full-wide {
  margin: 0 calc((100% - 100vw) / 2) !important;
}

.full-wide img {
  width: 100vw !important;
}

.bg-gray-lightest {
  background: var(--gray-lightest);
}
.bg-gray-lighter {
  background: var(--gray-lighter);
}
.bg-gray-darker {
  color: #fff;
  background: var(--gray-darker);
}
.bg-cosmos, .bg-cosmos2 {
  color: #fff;
  background: url(img/top/cosmos-1853491_1920.jpg) bottom/cover no-repeat;
}
.bg-cosmos2 {
  position: relative;
}
.bg-cosmos2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
.bg-cosmos2 div {
  position: relative;
  z-index: 2;
}

#nationwide, #quality, #want, #brand, #modelplan, #orderflow {
  padding-top: 40px;
}
#quality, #want {
  padding-bottom: 32px;
}

/*右側へ要素を広げる（2カラム）*/
.column-outside-right {
    flex: 1;
    margin-right: calc(50% - 50vw) !important;
}
/*左側へ要素を広げる（2カラム）*/
.column-outside-left {
    flex: 1;
    margin-left: calc(50% - 50vw) !important;
}
.alternate {
  display: flex;
  flex-direction: row-reverse;
}
.alternate._reverse {
  flex-direction: row;
}
.alternate__body {
  max-width: 800px;
  padding: 80px 60px;
  position: relative;
  top: 36px;
  width: 64%;
}

/************************************
** ヘッダー
************************************/
/*ヘッダーを最大幅にする*/
.header-container-in.hlt-top-menu {
  width:100%;
}

/*ヘッダーロゴの左右余白の調整*/
.site-name-text-link {
  padding: 0;
}

/************************************
** グローバルメニュー
************************************/
#navi .navi-in>ul>li>a {
  padding: 0 1em;
}

.navi-in .has-icon {
  display: none;
}

.navi-in a {
  color: #666;
}

.navi-in a:hover {
  color: #666;
  background: inherit;
  opacity: 1;
}

.navi-in a::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 0;
  transition: all 0.3s ease-out;
  border-bottom: 1px solid currentColor;
  display: block;
}

.navi-in a:hover::after {
  width: 100%;
  border-bottom: 1px solid currentColor;
}

/*お問い合わせを強調する*/
.gmenu-last {
background: var(--logo-red);
color: #fff;
}

.gmenu-last a {
	color:#fff;
}

.gmenu-last a:hover {
  background: var(--logo-blue);
  color: #fff;
}

/************************************
** 日付関係のスタイル
************************************/
.date-tags {
  text-align: left;
  margin-bottom: 2em;
}
.post-date {
  font-size: 16px;
}
.fa-clock:before {
    content: "";
}
.entry-date {
    margin-left: 0;
}
.ect-vertical-card .entry-card-wrap .entry-card-meta,
.rect-vertical-card .related-entry-card-meta {
  margin: 8px 0;
}
.e-card-info {
  justify-content: flex-start;
}

/*固定ページの投稿日・更新日・投稿者名を非表示*/
.page .post-date,
.page .post-update,
.page .author-info,
.categoryid-104 .post-date
 {
  display: none;
}
.new-entry-card-date,
.new-entry-card-date .post-date {
	display: block;
}
.new-entry-card-date .post-date {
  font-size: 14px;
  padding-bottom: 8px;
}
.new-entry-card-content {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}
/*関連記事のタイトルと日付を上下逆に入れ替える*/
.rect-vertical-card .related-entry-card-content {
  flex-direction: column-reverse;
  height: auto;
}
/*最新の投稿ブロックを日付→タイトルの順で表示する*/
.wp-block-latest-posts__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wp-block-latest-posts__list li {
  margin-bottom: 10px;
  padding: 12px 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
}
.wp-block-latest-posts__post-date {
  margin-right: 10px;
  order: 1;
  white-space: nowrap;
  width: 9.5rem;
}
.wp-block-latest-posts__post-title {
  order: 2;
  white-space: nowrap;
  flex-grow: 0;
}

/************************************
** パンくずリスト
************************************/
/*アイコンをまとめて非表示にする*/
.breadcrumb .fa-home,
.breadcrumb .fa-folder,
.breadcrumb .fa-file {
	display: none;
}

.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
  margin: 0;
}

/************************************
** 内容
************************************/
/*エントリー・アーカイブの見出し*/
.entry-title,
.archive-title {
  margin: 1rem 0 2rem;
}

.entry-content {
  margin-top: 0;
}

.cat-label,
.archive-title :before {
display: none;
}

/*特定ページのシェア・フォローボタン非表示*/
.page-id-48 .sns-share,
.page-id-48 .sns-follow {
    display: none;
}
#main .sns-buttons a {
 background-color: var(--gray-darkest);
}
.sns-buttons {
  margin-bottom: 0;
}

.catch {
  font-weight: bold;
  padding: clamp(20px,3.2vw,40px) 16px;
  text-align: center;
}

.catch-text1 {
  font-size: clamp(21px,5vw,64px);
  margin-bottom: 0 !important;
}

.catch-text2 {
  font-size: clamp(14px,2.6vw,26px);
}

/************************************
** 投稿・固定ページで使うHTML要素
************************************/
table th {
  font-weight: normal;
  text-align: left;
  width: 26%;
}

figure.wp-block-table table {
  width: 100%;
}

.wp-block-table th, .wp-block-table td {
  border-color: #eee;
  border-width: 1px 0px;
  background-color: white;
  padding: 16px 24px;
}

.wp-block-table table tr:nth-of-type(2n+1) {
  background-color: white;	
}

.wp-block-table th {
  background-color: var(--gray-lightest);
}

.container table tr {
  background-color: transparent;
}

/* 見出し */
.type-page h1, .archive-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(32px,6.4vw,64px);
}

.modelplan-lp h1 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(17px,4vw,36px);
  padding: 16px !important;
}

.type-post h1 {
  font-size: clamp(22px,3.6vw,36px);
  padding: 0;
}

h1 .sub-title {
  color: var(--gray-lighter);
  font-family: "M PLUS 1p", sans-serif;
  font-size: clamp(22px,4.8vw,48px);
  padding-left: 16px;
  text-transform: uppercase;
}
.plan-title h1 .sub-title {
  color: var(--gray-dark);
}

.article h2 {
  background: none;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(24px,5.4vw,54px);
  margin-bottom: 32px;
  padding: 0;
  text-transform: uppercase;
}

figure h2 {
  margin-bottom: 0 !important;
}

.home.page .article h2 {
  font-family: "M PLUS 1p", sans-serif;
  font-size: clamp(48px,8vw,80px);
  margin: 0 auto;
  text-align: center;
}

.article h3 {
  border: none;
  font-size: clamp(18px,3.2vw,32px);
  margin-top: 2rem;
  padding: 0;
}
.article h4 {
  border-top: none;
  padding: 8px 0;
}

/*フォントのサイズ*/
.has-small-font-size {
  font-size: 12px !important;
}

.has-medium-font-size {
  font-size: clamp(18px,2.4vw,24px) !important;
  font-weight: bold;
}

.has-large-font-size {
  font-size: clamp(17px,3.2vw,32px) !important;
  font-weight: bold;
}

.has-x-large-font-size {
  font-size: clamp(18px,4.8vw,48px) !important;
  font-weight: bold;
}

.bold-red {
  font-size: clamp(24px,4vw,40px);
}

/************************************
** リンクとボタンのスタイル
************************************/
a img:hover {
  opacity: .7;
}

.entry-content a {
  color: var(--text-color);
  text-decoration: none;
}

.wp-block-button__link {
  background-color: #fff;
  border: 2px solid var(--gray-darkest);
  color: var(--gray-darkest);
  font-size: 18px;
  font-weight: bold;
  padding: 10px 48px 10px 40px;
  position: relative;
  -webkit-transition: all .3s;
  transition: all .6s;
}
.wp-block-button__link:after {
  content: "\f0a9";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
 }
.wp-block-button__link:hover {
  background-color: var(--gray-darkest);
  color: #fff;
}

.modelplan-box .wp-block-button__link {
  background: var(--gray-darkest);
  color: #fff;
}
.modelplan-box .wp-block-button__link:hover {
  background: #fff;
  color: var(--gray-darkest);
}

.btn-contact {
  text-align: center;
}
.btn-contact a {
  padding: 12px 48px;
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  background: var(--logo-red);
-webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.btn-contact a:hover {
	background: var(--logo-blue);
}

.go-to-top-button {
  background: transparent;
}
.go-to-top-button:hover {
  opacity: .7;
}

/************************************
** 関連記事
************************************/
/*関連エントリーカード*/
.related-entry-heading,
.comment-title {
  margin: 32px 0 22px;
}
/* =======================================
    装飾
======================================= */
.heading02 {
  display: flex;
  font-size: clamp(16px,1.7vw,18px);
  align-items: center;
}

.heading02::before,
.heading02::after {
	content: '';
	width: 40px;
	height: 1px;
	background-color: #ccc;
}

.heading02::before {
	margin-right: 12px;
}
.heading02::after {
	margin-left: 12px;
}

/*横並びのカードリスト*/
.cardList02 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2,1fr);
}

.cardList03 {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3,1fr);
}

.cardList04 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4,1fr);
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: clamp(16px,3vw,30px);
}

/************************************
** お問い合わせ
************************************/
.footer-info span {
  display: block;
}

.grecaptcha-badge {
visibility: hidden;
}
.page-id-48 .grecaptcha-badge {
visibility: visible;
}

.contact-text {
  font-size: clamp(16px,2.2vw,22px);
  font-weight: bold;
  margin-bottom: 0;
  text-align: center;
}
.contact-block {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}
.contact-block__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(40px,6.4vw,64px) 8px;
}
.contact-block__inner2 {
  max-width: 860px;
  margin: 0 auto;
  padding: 8px;
}
.contact-block .aligncenter {
  display: block;
  text-align: center;
}
.contact-block__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(32px,5.6vw,56px);
  font-weight: bold;
  line-height: 1;
}
.contact-block__subtitle {
  color: var(--gray-dark);
  font-family: "M PLUS 1p", sans-serif;
  font-size: clamp(16px,3.2vw,32px);
  font-weight: bold;
  opacity: .7;
  padding: 4px 0 0;
  text-transform: uppercase;
}
.contact-block .cardList02 {
  background: #fff;
  gap: 1rem;
  margin-top: 2rem;
  padding: 2rem 1rem 1rem;
}
.contact-block .cardList__item {
  background: var(--gray-darkest);
  color: #fff;
  grid-row: span 2;
  grid-template-rows: subgrid;
  height: 100%;
  padding: .5rem;
  text-align: center;
}
.contact-block .tel-icon, .contact-block .mail-icon {
  background: var(--logo-red);
  font-size: clamp(24px,3.2vw,32px);
  height: clamp(44px,6vw,60px);
  line-height: clamp(44px,6vw,60px);
  margin: -2rem auto 1rem;
  width: clamp(44px,5vw,60px);
}
.tel {
  display: block;
  font-size: clamp(28px,3.2vw,32px);
  font-weight: bold;
  line-height: 1.2;
}
.contact-block a {
  text-decoration: none;
}
.contact-block a:hover {
  opacity: .8;
}
a[href*="tel:"] {
  pointer-events: none;
  cursor: default;
}

/************************************
** エントリーカードの設定
************************************/
.home.page .new-entry-cards {
  margin: 32px 0;
  max-width: 1920px !important;
  width: 100%;
}
.home.page .new-entry-card {
  background: #fcfcfc;
  border-radius: 6px;
  box-shadow: 0 1px 4px #aaa;
  padding: clamp(8px,1.6vw,16px);
}
.home.page .new-entry-card:hover {
  opacity: .8;
}
.home.page .new-entry-card-title {
  font-weight: bold;
}

.body .swiper .a-wrap {
  max-width: unset!important;
  width: 24%;
}

.a-wrap:hover {
  background-color: #fff;
}

/* =======================================
    トップページ
======================================= */
#xo-slider-2630 .swiper {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  margin-bottom: clamp(24px,4vw,40px);
  opacity: 0;
  transition: opacity .2s linear; /* ふんわり表示用 */
}

#xo-slider-2630 .swiper.swiper-initialized {
  opacity: 1;
}

#xo-slider-2630 .slider-titile {
	background: rgba(0,0,0,0.7);
	color: #fff;
  font-size: clamp(14px,2vw,18px);
  font-weight: bold;
  letter-spacing: 1px;
  padding: clamp(4px,1vw,8px) clamp(8px,2vw,40px);
  position: relative;
  top: 40%;
  left: 0;
}

.xo-slider .slide-content {
  pointer-events: none;
}

.xo-slider {
  padding-bottom: 24px;
}

.top-products .sub-title {
  color: var(--gray-lighter);
  font-family: "M PLUS 1p", sans-serif;
  font-size: clamp(26px,3.4vw,34px);
  font-weight: bold;
  margin-bottom: 16px;
  text-transform: uppercase; 
}
.top-products img {
  margin: auto;
  width: 90%;
}

.box-a::after {
	position: absolute;
	top: 15%;
	left: 50%;
	margin: 0;
	content: "";
	width: 1px;
	height: 70%;
  background-image: linear-gradient(to bottom, transparent, #999 50%, transparent);
  background-repeat: no-repeat;
}

.staff-wrappar-bg {
   background: var(--gray-lightest) url(img/top/bg_staff-content.png) top right no-repeat; 
}
.staff-bg {
  overflow: hidden;
  position: relative;
}
.staff-bg::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 52%;
  background: url(img/top/cosmos-1853491_1920.jpg) bottom/cover no-repeat;
  z-index: 0;
}
.staff-content {
  position: relative;
  z-index: 1;
}
.staff-content img {
  box-shadow: 2px 2px 4px #777;
}

/* =======================================
    自由設計+子ページ
======================================= */
.modelplan-box {
  border: 1px solid #ccc;
  box-shadow: 0 2px 3px #ddd;
}
.modelplan-wrap {
  padding: clamp(8px,1.6vw,16px) clamp(24px,6.4vw,64px);
}
.page-id-2088 h3 {
  font-size: clamp(24px,4vw,40px);
  margin-bottom: 24px;
  padding-top: 16px;
}
.plan-title {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}
.plan-title div:first-child {
  width: 48%;
}
.plan-title div:last-child {
  width: 62%;
}
.plan-title h1 {
  margin: 1rem;
}
.plan-contents {
  padding: clamp(32px,8vw,80px) 0;
}
.plan-contents h2 {
  font-size: clamp(24px,4.6vw,46px);
}
.plan-contents img {
  margin-bottom: 16px;
}
.wp-block-columns .text-block {
  max-width: 460px;
  margin: auto;
}

/*シニアリビング*/
.plan-content-box {
  background: #fff;
  border-radius: 12px;
  margin: auto;
  padding:clamp(32px,4vw,64px) clamp(16px,6vw,120px);
}

.plan-strong-text {
  margin: auto;
  padding: 16px 0;
  width: min(100%,960px);
}

.senior-img {
  margin-bottom: 0 !important;
  position: relative;
  text-align: center;
}

.senior-img .wrapper {
  position: absolute;
  top: -64px;
  left: 50%;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  white-space: nowrap;
}

.senior-catch {
  background: var(--logo-red);
  font-weight: bold;
  padding: clamp(8px,4vw,40px) 16px;
  text-align: center;
  margin-bottom: 0 !important;
  width: 100vw;
}

.senior-catch p {
  color: #fff;
  font-size: clamp(18px,3.2vw,32px);
  line-height: 1.5;
  padding: 0;
}

.triangle-down {
  background: var(--logo-red);
  height: clamp(16px,2.4vw,24px);
  margin: -2px auto 0;
  width: clamp(24px,3.2vw,32px);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.senior-img .text {
  font-size: clamp(16px,3vw,48px);
  font-weight: bold;
  line-height: 1.4;
  margin-top: clamp(8px,2vw,36px);
}

.senior-img .text span {
  font-size: clamp(19px,7vw,80px);
  color: var(--logo-red);
}

.features {
  background: #e6f3f4;
  padding: clamp(24px,4vw,40px) 16px;
}

.features h2 {
  font-size: clamp(24px,5vw,64px) !important;
  padding: clamp(24px,5vw,56px) 0;
}

.features h3 {
  font-size: clamp(21px,5vw,48px) !important;
}

.features .cardList > div {
  background: #fff;
  border-radius: 12px;
  margin: 0 auto clamp(56px,8vw,80px) !important;
  max-width: 1040px;
  padding: clamp(24px,4vw,40px) clamp(16px,6vw,136px) clamp(32px,4vw,56px);
  position: relative;
}

.features .cardList > div:nth-child(odd) {
  left: -5%;
}

.features .cardList > div:nth-child(even) {
  right: -5%;
}

.bg-count {	
  position: absolute;
  width: clamp(56px,10vw,112px);
  height: clamp(56px,10vw,112px);
  background: #9c5f28;
  color: #fff;
  margin: auto;
  opacity: .8;
  -webkit-transform: translateX(-40px) translateY(-80%);
  transform: translateX(-40px) translateY(-80%);
}

.bg-count p {
  font-size: clamp(13px,2vw,20px);
  font-weight: bold;
  position: absolute;
  display: inline-block;
  left: 0;
  top: 52%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: clamp(56px,10vw,112px);
  text-align:center;
  line-height: 1.2;
}

.bg-count p span {
  display: block;
  font-size: clamp(20px,4vw,40px);
}

/* =======================================
    展示販売
======================================= */
.stock-items {
  margin-bottom: 24px;
}

.item-price {
  color: var(--text-color);
  display: block;
  margin: 12px 0 6px;
  text-align: right;
}

.bargain-price {
  color:  var(--logo-red);
  font-size: 18px;
  font-weight: bold;
}

.forsale-itembox__order, .forsale-itembox__sold {
  position: relative
}
.forsale-itembox__order:before, .forsale-itembox__sold:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 112px 112px 0 0;
}
.forsale-itembox__order:before {
    border-color: var(--logo-blue) transparent transparent transparent;
}
.forsale-itembox__sold:before {
    border-color: var(--gray-dark) transparent transparent transparent;
}
.forsale-itembox__order:after, .forsale-itembox__sold:after {
    position: absolute;
    transform: rotate(315deg);
    display: block;
    font-size: 18px;
    white-space: pre;
    color: #fff;
    top: 30px;
    left: 10px;
    text-align: center;
    z-index: 2;
    letter-spacing: 2px;
    line-height: 1.2;
}
.forsale-itembox__sold:after {
    content: "SOLD";
}
.forsale-itembox__order:after {
    content: "受注生産";
}

.stock-item__sale, .stock-item__sold, .stock-item__order {
  font-size: clamp(16px,2.4vw,24px);
  font-weight: bold;
	text-align: center;
  padding: 3px 12px;
}
.stock-item__sale {
  border: 2px solid var(--logo-red);
  color: var(--logo-red);
}
.stock-item__sold {
  border: 2px solid var(--gray-dark);
  color: var(--gray-dark);
}
.stock-item__order {
  border: 2px solid var(--logo-blue);
  color: var(--logo-blue);
}

/* =======================================
    ニュース
======================================= */
.cat-news {
  display: flex;
}
.cat-news .main-column {
  width: calc( 100% - 200px );
  margin: 0 64px 0 0;
}
.cat-news .main-column h2 {
  margin: 4px 0;
}
.cat-news .sub-column {
  width: 200px;
}
.cat-news .sub-column h2 {
  font-size: 20px;
  margin-bottom: 16px;
}
.cat-news .sub-column h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.cat-news ul {
  margin: 0;
  padding: 0;
}
.cat-news li {
  list-style: none;
}
.cat-news .main-column li {
  border-bottom: 1px solid var(--gray-lighter);;
  padding: 16px 0;
}
.cat-news .main-column .wp-block-button__link, .pdf-download__link {
  font-size: 14px;
  padding: 8px 32px 8px 24px;
  width: 200px;
}
.pdf-download__link {
  background-color: #333;
  border: 1px solid #333;
  color: #fff;
  border-radius: 0px;
  box-shadow: none;
  cursor: pointer;
  display: inline-block;
  position: relative;
  -webkit-transition: all .3s;
  transition: all .6s;
  text-align: center;
  text-decoration: none;
  word-break: break-word;
  box-sizing: border-box;
}
.pdf-download__link:after {
  content: "\f0a9";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
 }
.pdf-download__link:hover {
  background-color: #fff;
  border: 1px solid #333;
  color: #333;
}

/* =======================================
    C’ZBの空間づくり
======================================= */
.want-wrapper {
  background: #fff;
  margin-top: -96px;
  padding: 72px 96px 0 !important;
}
.promise-wrapper div {
  background: linear-gradient(to top, #fff, var(--gray-lightest));
  margin-bottom: 24px;
}
.promise-wrapper .circle {
  background: var(--gray-lightest);
  border-radius: 50%;
  height: 88px;
  line-height: 88px;
  margin: -32px auto 0;
  text-align:center;
  width: 88px;
}
.promise-title {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

/* =======================================
    ご購入の流れ
======================================= */
.flow-block {
  counter-reset: number 0;
  padding: 32px 0 64px;
}
.flow-block p {
  font-size: clamp(18px,2.4vw,24px);
  font-weight: bold;
  border-bottom: 1px solid var(--gray-light);
  letter-spacing: 1px;
  margin-bottom: 24px;
}
.flow-block p::before {
  counter-increment: number 1;
  content: counter(number,decimal-leading-zero) ".";
  font-size: clamp(24px,5.6vw,56px);
  letter-spacing: 0;
  margin-right: 32px;
}
.construction-list {
  display: flex;
  align-items: stretch; /* 高さを揃える */
}
.construction-list ul {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 0 0 120px !important;
}
.construction-list ul::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  width: 10px;
  background: #eee;
  border-radius: 8px;
}
.construction-list ul li {
  position: relative;
  padding: 12px 0 12px 40px;
}
.construction-list ul li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #333;
  border-radius: 50%;
}
.construction-list ul li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  width: 20px;
  height: 1px;
  border-top: 1px dotted #333;
}
/* =======================================
    よくある質問
======================================= */
.is-style-accordion > .faq > .faq-question {
  background-color: #f5f5f5;
}

.faq-question-label {
    color: #666;
}
.faq-answer-label {
    color: #666;
}

/* =======================================
    会社概要
======================================= */
.message-representative {
  padding-top: 40px;
}
.message-representative > div:first-child {
  margin-right: 32px;
}

.role-socialfirm {
  border: 1px solid #666;
  padding: 16px 24px;
}
.role-socialfirm img {
  margin: auto;
  width: 72%;
}
/* =======================================
    メールフォーム
======================================= */
.smf-item__label__text {
  padding-left: 42px;
  position: relative;
}

.smf-item:has([data-validations~="required"]) .smf-item__label__text::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 23px;
  border-radius: 4px;
  content: "必須";
  font-size: 12px;
  color: #fff;
  background: var(--logo-red);
}

.any .smf-item__label__text::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 23px;
  border-radius: 4px;
  content: "任意";
  font-size: 12px;
  color: #fff;
  background: var(--gray-light);
}

#autozip {
   display: none !important;
}

form[data-screen="confirm"] .input {
 display:none;
}

.smf-checkboxes-control--horizontal {
  border-bottom: 1px dashed #aaa;
  margin-bottom: 12px;
  padding-bottom: 10px;
}

/************************************
** ページネーション
************************************/
.page-id-2078 .pagination {
  margin: 24px 0 40px;
}
.pagination-next {
	display: none;
}
.page-numbers {
    color: var(--cocoon-text-color);
    text-decoration: none;
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 4px;
    border-radius: 0;
    border:none;
}
.pagination .current,
.pagination a:hover {
    background-color: var(--gray-dark);
    color: #fff;
}
.page-numbers.dots {
    opacity: 1;
    background-color: #fff;
}

/************************************
** フッター、フッターボトム
************************************/
.footer, .footer-bottom {
  margin-top: 0;
}

.navi-footer {
  margin-top: 8px;
}

.navi-footer-in > .menu-footer li.menu-item {
  display: inline-block;
  width: auto;
  margin: 0;
  flex: none;
  text-align: left;
}

.navi-footer-in > .menu-footer li,
.navi-footer-in > .menu-footer li:last-child {
  border: none;
}

.navi-footer-in > .menu-footer li.menu-item a {
  display: inline-block;
  width: auto;
  padding: 0 10px;
}

.navi-footer-in a {
  color: #484848;
}

.navi-footer-in a:hover {
  color: #484848;
  background-color: inherit;
  opacity: 1;
}

.navi-footer li a i {
  margin-right: 8px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1200px){
/*シニアリビング*/
.senior-img > div {
  top: 14%;
}

.features .cardList > div:nth-child(odd) {
  left: 0;
}

.features .cardList > div:nth-child(even) {
  right: 0;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
.gmenu-last {
  background: #fff;
  color: var(--gray-darkest);
}
	
.gmenu-last a {
	color:var(--gray-darkest);
}
	
/*ヘッダーとコンテンツの間の余白をなくす*/
main.main {
  padding: 0 16px;
}
/* =======================================
    C’ZBの空間づくり
======================================= */
.want-wrapper {
  margin-top: -32px;
  padding: 24px 16px 0 !important;
}
/* =======================================
    ニュース
======================================= */
.cat-news {
  flex-direction: column;
}
.cat-news .main-column {
  width: 100%;
  padding: 0;
}
.cat-news .sub-column {
  width: 100%;
}
}

@media screen and (max-width: 780px){
.block-reverse {
  flex-direction: column-reverse;
}

.alternate {
  display: block;
}
.alternate__body {
  padding: 24px;
  top: 0;
  width: 100%;
}
.alternate__thumb {
  margin-top: -40px;
  width: 90%;
}

/* =======================================
    トップページ
======================================= */
.box-a {
  margin-bottom: 40px !important;
} 
.box-a::after {
  background-image:none;
}
/* =======================================
    会社概要
======================================= */
.message-representative {
  padding-top: 24px;
}
.message-representative > div:first-child {
  margin-right: 0;
}
}

/*600px以下*/
@media screen and (max-width: 600px){
.br-pc-none {
  display: block;
}

#nationwide, #quality, #want, #brand, #modelplan, #orderflow {
  padding-top: 16px;
}
#quality, #want {
  padding-bottom: 16px;
}
.no-spacer {
  display: none;
}
.spacer-1 {
  height: 200px !important;
}

.alignright {
  float: none;
  margin-left: 0 !important;
}

/*スマホのハンバーガーメニューを右からスライド*/
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}

/*ハンバーガーメニューの閉じるボタンの調整*/
.menu-close-button {
  font-size: 1.3em;
  padding: 8px 24px 24px 0;
  text-align: right;
}
  
.menu-drawer a {
  border-bottom: solid 1px #e6e6e6;
  padding: 12px;
}
.menu-drawer a:hover {
  background:#eee;
}

/************************************
** パンくずリスト
************************************/
.breadcrumb {
  overflow-x: scroll;
  word-break: keep-all;
  white-space: nowrap;
}

/************************************
** 投稿・固定ページで使うHTML要素
************************************/
.type-page h1 {
  padding: 0;
}

.fz-18px {
  font-size: 16px;
}
.fz-20px {
  font-size: 17px;
}
.fz-24px {
  font-size: 18px;
}
.fz-28px {
  font-size: 14px;
}
.fz-32px {
  font-size: 22px;
}

.wp-block-media-text__content,
.wp-block-media-text img {
  margin-bottom: 40px;		
}
  
.cardList03 {
  grid-template-columns: repeat(1,1fr);
}

.cardList04 {
  grid-template-columns: repeat(2,1fr);
}
  
/************************************
** リンクとボタンのスタイル
************************************/
.btn-contact a {
  font-size: 18px;
  padding: 10px 16px;
}
  
.has-bottom-margin.is-style-bottom-margin-2em {
  margin-bottom: 1em !important;
}

a[href*="tel:"] {
  pointer-events: auto;
  cursor: pointer;
}
/************************************
** テーブル
************************************/
table th {
  width: 100%;
}
  
.wp-block-table th, .wp-block-table td {
  display: block;
  padding: 8px 16px;
}
/* =======================================
    装飾
======================================= */
.heading02 {
  justify-content: center;
}

/************************************
** エントリーカードの設定
************************************/
.body .swiper .a-wrap {
  width: 42%;
}

/* =======================================
    トップページ
======================================= */
#xo-slider-2630 .slider-titile {
  font-weight: normal;
}

.column-bg {
  background: none;
}
  
/* =======================================
    自由設計+子ページ
======================================= */
.plan-title {
  flex-direction: column;
  text-align: left;
} 
.plan-title div:first-child, .plan-title div:last-child {
  width: 100%;
}
  
/*シニアリビング*/
.bg-count {
  -webkit-transform: translateY(-90%);
  transform: translateY(-90%);
}
/* =======================================
    ご購入の流れ
======================================= */
.flow-block {
  padding: 16px 0 64px;
}
.flow-block p {
  margin-bottom: 16px;
}
.flow-block p::before {
  margin-right: 12px;
}
.construction-list ul {
  margin: 0 0 0 40px !important;
}
/* =======================================
    お問い合わせ
======================================= */
.contact-block .cardList02 {
  gap: 2rem;
  grid-template-columns: repeat(1,1fr);
}
}