@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 {
  --green-lighter: #e6ebe4;
}
.main {
  padding: 0 16px !important;
}
.features h2 {
  text-align: center !important;
}
.has-medium-font-size {
  font-size: clamp(18px,2.4vw,24px) !important;  
}
.has-large-font-size {
  font-size: clamp(20px,3.2vw,32px) !important;
  margin-bottom: 16px;
}
.has-x-large-font-size {
  font-size: clamp(24px,4vw,40px) !important;
  font-weight: 600;
  margin-bottom: .5em !important;
}
.top-lastmessage .has-x-large-font-size {
  font-size: clamp(36px,6vw,64px) !important;
}
/* =======================================
    トップページ
======================================= */
.hero-section {
  background-image: url("../img/living-with-grace/bg_firstview.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 0;
  display: grid;
  font-family: 'Noto Serif JP', serif;
  grid-template-columns: 2fr 3fr;
  grid-template-areas:
    "box1 box3"
    "box2 box3";
  overflow: hidden;
  padding-top: clamp(4px,4vw,40px);
}
.hero-section .box1 {
  color: var(--brown-dark);
  grid-area: box1;
  font-size: clamp(14px,2vw,20px);
  padding-top: clamp(2px,5vw,160px);
}
.hero-section .box1 .copy-text {
  font-size: clamp(18px,2.4vw,24px);
  font-weight: 700;
  margin-bottom: 24px;
} 
.hero-section .box1 h1 {
  font-size: clamp(48px,7.2vw,72px);
  font-weight: 700;
  text-align: left;
}
.hero-section .box1 h1 .ruby {
  left:40%;
}
.hero-section .box2 {
  grid-area: box2;
}
.hero-section .box3 {
  grid-area: box3;
  width: calc(100% + (28vw - 28%));
  max-width: none;
  min-width: 0;
}
.hero-section .box3 img {
  border: clamp(4px,1vw,10px) solid #fff;
  border-radius: 12px;
}
.top-about, .top-concept {
  background-color: var(--green-lightest);
  padding-top: clamp(24px,5vw,100px);
}
.layout-box {
  background: #fff;
  border-radius: 16px;
  font-size: clamp(16px,2vw,20px);
  line-height: 2;
  max-width: 880px;
  padding: clamp(32px,8vw,80px) clamp(16px,4vw,104px) clamp(32px,10vw,100px);
  text-align: center;
  width: 100%;
}
.layout-box-inner {
  display: inline-block;
  text-align: left;
}
.top-about .layout-box,
.top-concept .layout-box {
  margin-bottom: 0 !important;
}
.top-about {
  background-image: url("../img/care-with-distance/bg_introduction01.png");
  background-repeat: no-repeat;
  background-size: 22%;
  background-position: 100% 0;
  position: relative;
}
.top-about .img03 {
  position: absolute;
  bottom: -16%;
  right: 0;
  width: 40%;
  z-index: 1;
}
.top-concept {
  background-image: url("../img/care-with-distance/bg_concept_bottom.jpg");
  background-repeat: repeat-x;
  background-position: bottom;
}
.top-concept .layout-box {
  transform: translateX(80px);
}
.top-concept .illust {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
}
/* 老後の「いま」と「これから」を支える住まい。 */
.top-feature {
  padding-bottom: clamp(32px,10vw,100px);
}
.top-feature .alternate:first-child {
  align-items: flex-end;
}
.top-feature .alternate:last-child {
  align-items: center;
}
.top-feature .img01 {
  max-width: 400px;
  width: 30%;
}
.top-feature .img02 {
  max-width: 400px;
  width: 34%;
}
.top-feature .wp-block-media-text>.wp-block-media-text__content {
  padding: 0;
}
.top-feature ul {
  padding: 0;
}
.top-feature li {
  color: var(--brown-dark);
  font-size: clamp(16px,2.4vw,24px);
  font-weight: bold;
  list-style: none;
  margin: clamp(16px,2vw,24px) 0 0 !important;
  padding: 0 0 0 1.5em;
  position: relative;
}
.top-feature li::before {
  position: absolute;
  left: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f058';
  color: var(--brown-lighter);
}
/* 価値 */
.our-value {
  background-image: url("../img/living-with-grace/bg_our-value.jpg"),url("../img/common/bg_ourvalue_last.png");
  background-repeat: no-repeat,no-repeat;
  background-size: 64%,7%;
  background-position: 100% 0,96% 100%;
  counter-reset: number 0;
}
.our-value .title-area {
  background-image: url("../img/common/bg_ourvalue_title.png");
  background-repeat: no-repeat;
  background-size: 14%;
  background-position: 0 100%;
  padding: 0 0 clamp(16px,4vw,64px) clamp(24px,6vw,90px);
}
.our-value .cardList02 div {
  background: #fff;
  border: 1px solid var(--green-lighter);
  border-radius: 12px;
  padding: clamp(24px,3.2vw,32px) clamp(16px,2.4vw,24px) clamp(12px,2.4vw,24px);
  text-align: center;
}
.our-value .cardList02 div:nth-child(even) {
  position: relative;
  top: 28px;
}
.our-value h3 span {
  color: var(--green-lighter);
  display: block;
  font-size: 15px;
  padding-bottom: clamp(8px,2vw,24px);
}
.our-value h3 {
  color: var(--green-dark) !important;
  font-size: clamp(22px,2.8vw,28px) !important;
  height: 88px;
  margin-bottom: clamp(4px,1vw,16px) !important;
  position: relative;
  z-index: 1;
}
.our-value h3::before {
  counter-increment: number 1;
  content: counter(number);
  position: absolute;
  top: 56%;
  left: 50%;
  font-size: clamp(64px,7.2vw,72px);
  font-weight: bold;
  color: var(--green-lighter);
  pointer-events: none;
  white-space: nowrap;
  z-index: -1;
  transform: translate(-50%, -50%);
}
.our-value .last-copy {
  color: var(--brown-dark);
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(18px,2.6vw,26px);
  margin-top: -64px;
  text-align: right;
}
/* メッセージ */
.top-message {
  background-image: url("../img/living-with-grace/bg_message01.png"),url("../img/living-with-grace/bg_message02.png"),url("../img/living-with-grace/bg_message03.png"),url("../img/living-with-grace/bg_message04.png"),url("../img/common/bg_message_top.jpg");
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat-x;
  background-size: 21%,26%,23%,24%,2%;
  background-position: 3% 3%,94% 0,10% 96%,98% 100%,0 0;
  padding: 100px 0;
}
/* C’ZBシニアリビングの特徴 */
.senior-img .text {
  color: var(--brown-dark);
  font-size: clamp(18px,3vw,38px);
  font-weight: bold;
  line-height: 1.6;
  margin-top: clamp(8px,2vw,36px);
  text-align: center;
}
.senior-img .text span {
  font-size: clamp(32px,6vw,80px);
  color: var(--green-dark);
}
/* =======================================
    装飾
======================================= */
/*横並びのカードリスト*/
.cardList02 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2,1fr);
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (max-width: 1280px){
}
@media screen and (max-width: 1060px){
.br-1060-none {
  display: block;
}
.top-feature {
  padding-top: clamp(24px,5vw,100px);
}
.top-feature .img01 {
  width: 40%;
  position: absolute;
  bottom: 0;
  right: 0;
}
.features .cardList > div:nth-child(odd) {
  left: 0;
}
.features .cardList > div:nth-child(even) {
  right: 0;
}
}
@media screen and (max-width: 834px){
/* =======================================
    トップページ
======================================= */
.hero-section {
  background-color: var(--green-lightest);
  background-image: none;
  grid-template-columns: 1fr;
  grid-template-areas:
    "box1"
    "box3"
    "box2";
}
.hero-section .box1,
.hero-section .box1 p {
  margin-bottom: 0;
}
.hero-section .box1 img {
  margin: auto;
  width: 90%;
}
.hero-section .box3 {
  margin-right: calc(80% - 80vw) !important;
  width: 100%;
}
.hero-section .box2 p {
  line-height: 1.4;
  padding-top: 32px;
}
.top-about {
  background-image: none;
}
/* 老後の「いま」と「これから」を支える住まい。 */
.top-feature .alternate__body {
  padding: 0;
}
.top-feature .img02 {
  width: 56%;
}
.top-feature li {
  line-height: 1.5;
}
/* 価値 */
.our-value {
  background-size: 72%,14%;
}
.our-value .title-area {
  background-size: 21%;
}
.our-value .cardList02 {
  gap: 12px;
  grid-template-columns: repeat(1,1fr);
}
.our-value .cardList02 div:nth-child(even) {
  top: 0;
}
.our-value .cardList02 div p {
  font-size: 15px;
  line-height: 1.5;
}
.our-value .last-copy {
  margin-top: 40px;
  text-align: center;
}
/* メッセージ */
.top-message {
  background-size: 34%,38%,36%,36%;
}
}
/*600px以下*/
@media screen and (max-width: 600px){
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 48px;
}
.layout-box-inner {
  display: block;
}
.top-about .img03 {
  bottom: -12%;
  width: 50%;
}
.top-concept .layout-box {
  transform: translateX(0);
}
.top-concept .illust {
  margin-top: -40px;
  position: relative;
  width: 56%;
}
.top-message,
.top-lastmessage {
  min-height: 400px !important;
}
}
/*480px以下*/
@media screen and (max-width: 480px){
}