@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;
  font-weight: 600;
  margin-bottom: 16px;
}
.has-x-large-font-size {
  font-size: clamp(24px,4.8vw,48px) !important;
  font-weight: 600;
  margin-bottom: .5em !important;
}
.top-lastmessage .has-x-large-font-size {
  font-size: clamp(40px,6vw,64px) !important;
}
/* =======================================
    トップページ
======================================= */
.hero-section {
  background-image: url("../img/care-with-distance/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,60px);
}
.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 p {
  margin-bottom: 72px;
}
.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);
}
.top-about .layout-box {
  margin-bottom: 0 !important;
}
.layout-box {
  background: #fff;
  border-radius: 16px;
  font-size: clamp(16px,2vw,20px);
  line-height: 2;
  padding: clamp(32px,8vw,96px) clamp(24px,4vw,80px) clamp(32px,13.6vw,136px);
  text-align: center;
}
.layout-box-inner {
  display: inline-block;
  text-align: left;
}
.top-about .text-area, .top-concept .text-area {
  line-height: 1.8;
  margin: clamp(24px,4.8vw,48px) auto 0;
  max-width: 500px;
  width: 100%;
  text-align: left;
}
/* 在宅での介護同居、あなたは無理なく続けられるでしょうか。 */
.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 .img01,
.top-about .img02,
.top-concept .img02 {
  border: 6px solid #fff;
  border-radius: 12px;
  width: 30%;
}
.top-about .img01 {
  position: absolute;
  right: -20%;
  top: 40%;
}
.top-about .img02 {
  position: absolute;
  left: -20%;
  bottom: 14%;
}
.top-about .img03 {
  position: absolute;
  bottom: -20%;
  right: 0;
  width: 48%;
  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 .img02 {
  position: absolute;
  right: -14%;
  top: 36%;
}
.top-concept .alternate {
  align-items: flex-end;
}
.top-concept .alternate__body {
  max-width: 960px;
  width: 80%;
}
.top-concept .alternate__thumb {
  margin-right: -6% !important;
  position: relative;
  text-align: right;
  z-index: 1;
}
.top-concept .alternate__thumb img {
  max-width: 560px;
  width: 100%;
}
/* ほどよい距離が、よい関係を続ける。 */
.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/care-with-distance/bg_our-value.jpg"),url("../img/common/bg_ourvalue_last.png");
  background-repeat: no-repeat,no-repeat;
  background-size: 60%,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(12px,2.4vw,24px);
}
.our-value h3 {
  color: var(--green-dark) !important;
  height: 80px;
  margin-bottom: 16px !important;
  position: relative;
  z-index: 1;
}
.our-value h3::before {
  counter-increment: number 1;
  content: counter(number);
  position: absolute;
  top: 64%;
  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/care-with-distance/bg_message01.png"),url("../img/care-with-distance/bg_message02.png"),url("../img/care-with-distance/bg_message03.png"),url("../img/care-with-distance/bg_message04.png"),url("../img/common/bg_message_top.jpg");
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat-x;
  background-size: 20%,22%,20%,20%,2%;
  background-position: 5% 3%,92% 0,12% 96%,96% 100%,0 0;
  padding: 100px 0;
}
/* C’ZBシニアリビングの特徴 */
.senior-img .text {
  color: var(--brown-dark);
  font-size: clamp(17px,3vw,38px);
  font-weight: bold;
  line-height: 1.7;
  margin-top: clamp(8px,2vw,36px);
  text-align: center;
}
.senior-img .text span {
  font-size: clamp(30px,6vw,64px);
  color: var(--green-dark);
}
/* =======================================
    装飾
======================================= */
/*横並びのカードリスト*/
.cardList02 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2,1fr);
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (max-width: 1280px){
.top-about .img01,
.top-about .img02,
.top-concept .img02 {
  width: 24%;
}
.top-about .img01 {
  right: -3%;
}
.top-about .img02 {
  left: -9%;
}
.top-about .img03 {
  bottom: -12%;
  width: 52%;
}
.top-concept .img02 {
  right: -8%;
}
}
@media screen and (max-width: 1060px){
.br-1060-none {
  display: block;
}
.top-concept .alternate {
  display: block;
}
.top-concept .alternate__body {
  width: 100%;
}
.top-concept .alternate__thumb {
  margin-top: -16%;
  padding-left: 24px;
  text-align: left;
}
.top-concept .alternate__thumb img {
  width: 64%;
}
.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-about .text-area, .top-concept .text-area {
  max-width: 460px;
}
.top-about .img02 {
  left: 0;
  right: -90%;
  bottom: 26%;
}
.top-about .img03 {
  bottom: -16%;
  width: 66%;
}
/* ほどよい距離が、よい関係を続ける。 */
.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 .img01,
.top-about .img02 {
  position: static;
  width: 48%;
}
.top-about .img01 {
  margin-right: -240px !important;
}
.top-about .img02 {
  margin: 24px 0 0 -240px !important;
}
.top-about .img03 {
  bottom: -12%;
}
.top-concept .img02 {
  width: 32%;
}
.top-message,
.top-lastmessage {
  min-height: 400px !important;
}
}
/*480px以下*/
@media screen and (max-width: 480px){
.top-about .img01 {
  margin-right: -180px !important;
}
.top-about .img02 {
  margin: 20px 0 0 -180px !important;
}
.top-about .img03 {
  bottom: -12%;
  width: 72%;
}
.top-concept .img02 {
  display: none;
}
}