@charset "UTF-8";

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

  目次

  1.基本的なCSS
  2.page1_トップページ
  3.page2_Concept_灯の理念
  4.page3_Service-灯のサービス-
  5.page4_Business-事業内容-
  6.page5_Customer Review-利用者さんからの声-
  7.page6_SNS-公式SNS情報-
  8.page7_Outline-会社概要-


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

/* Debug */
/* * {
  outline: 1px solid red;
} */

/* ===================================================
	1.基本的なCSS
=================================================== */

* {
  padding: 0;
  margin: 0;
  /* box-sizing: border-box; */
}

html, body {
  position: relative;
  height: 100%;
  background-color: #fff !important;
  scroll-padding-top: 4rem; /* ページ内スクロールのずれ修正 */
}

a:link, a:visited {
  font-family: 'Noto Sans JP', sans-serif;
  text-decoration: none;
  color: #952223;
}
a:hover, a:active {
  font-family: 'Noto Sans JP', sans-serif;
  color: #6b0f11 !important;
  text-decoration: none;
}

p, li ,th ,td {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 2.2;
  color: #404040;
}

h1, h2, h3, h4 {
  font-family: 'Noto Sans JP', sans-serif;
  color: #404040;
}

img {
  width: 100%;
  height: auto;
}

/* 共通の見出し */
.section_title {
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 2.2rem;
  text-align: center;
  color: #952223;
  padding-bottom: 3rem;
}
.section_title span {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: #404040;
  padding-top: .5rem;
}

/* 見出しの後に来る説明文 */
.section_title + p {
  text-align: center;
}

/* hoverで波打つボタン */
.wave_btn {
  margin-top: auto;
  text-align: center;
  padding-top: 1rem;
}
.wave_btn a {
  display: inline-block;
  color: #000;
  padding: 10px 20px;
  text-decoration: none;
  outline: 1px solid;
  outline-color: #404040;
  outline-offset: 0px;
  transition: .3s;
  border-radius: 5px;
  mix-blend-mode: multiply; /* 乗算 */
}
.wave_btn a:hover {
  color: #fff;
  background-color: #eeeeee;
  animation: light .8s infinite;
}
@keyframes light {
  100% { 
    outline-color: transparent;
    outline-offset: 8px;
  }
}
.wave_btn a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* 上下の余白一括指定 */
#page3, #page4,
#page5, #page6, #page7 {
  padding-top: 12rem;
  padding-bottom: 4rem;
}
#page7 {
  padding-bottom: 5rem;
}

/* 改行ON */
.pc_br {
  display: inline-block;
}
/* 改行OFF */
.mobile_br {
  display: none;
}



/* タブレット（pro横向き以外） */
/* タブレット縦 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .wave_btn a {
    padding: 10px 15px;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  /* 改行OFF */
  .pc_br {
    display: none;
  }
  /* 改行ON */
  .mobile_br {
    display: inline-block;
  }
  p, li ,th ,td {
    font-size: clamp( .9rem, 4vw, 1rem );
  }
}



/* ===================================================
	2.TOP
=================================================== */

#page1 {
  position: relative;
  width: auto;
}

/* ともそう— Reignite — */
.top_title {
  z-index: 2;
  position: absolute;
  top: 35%;
  left: 10%;
  text-align: center;
}
.top_title h1 {
  font-family: "Shippori Mincho", serif;
  letter-spacing: 0.12em;
  font-weight: 600;
  font-style: normal;
  font-size: 3.8rem;
  line-height: 1.3;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 6px rgba(0, 0, 0, 0.3);
}
.top_title h1 span {
  display: block;
  font-size: 1.2rem;
}

.toppage_slider {
  position: relative;
}
.toppage_slider .swiper {
  height: 90vh;
  height: 90svh;
}

.toppage_slider .swiper-slide {
  z-index: 0;
  width: 100%;
  height: 100%;
}

.toppage_slider .swiper-slide::before {
  z-index: 5;
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.15) 30%,
    rgba(0,0,0,0) 60%
  );
}

.toppage_slider .swiper-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.curve-divider {
  z-index: 1;
  position: absolute;
  width: 100%;
  line-height: 0;
  bottom: -1px;
  right: 0;
  left: 0;
}
.curve-divider svg {
  width: 100%;
  height: 200px; /* カーブの深さ */
  display: block;
}



/* タブレット（pro横向き以外） */
/* タブレット縦 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .curve-divider svg {
    height: 100px;
  }
}
/* タブレット横 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .curve-divider svg {
    height: 150px;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  /* ともそう— Reignite — */  
  .top_title {
    top: auto;
    bottom: 45%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
  /* オーバーレイグラデーションを下からに変更 */
  .toppage_slider .swiper-slide::before {
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.15) 30%,
    rgba(0,0,0,0) 60%
    );
  }
  .curve-divider svg {
    height: 70px;
  }
}



/* ===================================================
	3.Concept-灯の理念-
=================================================== */

#page2.section {
  padding-top: 5rem;
  position: relative;
  width: 100%;
  max-width: 100%;
}


/* ---------------------------------------------
  カルーセルの説明
--------------------------------------------- */

/* スライダー本体が横に溢れないように */
.swiper {
  overflow: hidden; /* 横に溢れる部分を隠す */
  width: 100%;
  height: 100%;
}

.concept_slider {
  position: relative;
  padding-top: 6rem;
}

/* 斜めに入る背景 */
.concept_slider::before {
  content: '';
  position: absolute;
  top: 35%;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f3f0e9;
  transform: skewY(-7deg) translateY(90px);
  z-index: -1;
}

.concept_slider .swiper-wrapper {
  width: 100% !important;
}

.concept_slider .swiper-slide {
  width: 100% !important;
  height: auto !important;
  padding: 3rem 0;
}

/* 矢印の色を変更 */
.swiper-button-next,
.swiper-button-prev {
  color: #555 !important;
  transition: color 0.3s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #952223 !important;
}

/* アクティブなドットの色を変更 */
.swiper-pagination-bullet-active {
  background-color: #555 !important;
}

/* 理念のメインボックス */
.concept_slider .swiper-slide-inner {
  margin: 0 auto;
  width: 80%;
  height: auto;
}
.concept_slider .row {
  width: 98%;
  height: 100% !important; /* スライダーの高さを揃える */
  background-color: #fad3c0;
  border-radius: 1rem;
}
.concept_slider .row div {
  position: relative;
}
.concept_slider .row .col-sm-7 {
  padding: 2rem;
  margin-bottom: 2rem;
}

/* 理念の見出し */
.concept_slider .row h2 {
  font-size: 1.8rem;
  color: #000;
  font-weight: 600;
  line-height: 1.5;
  padding-top: 3rem;
  padding-bottom: 2rem;
}
.concept_slider .row h2 span {
  position: relative;
  left: -1rem;
}
.concept_slider .row p {
  padding-bottom: .8rem;
}
span.red_text {
  color: #952223;
}

/* 理念の番号 */
.swiper_number {
  position: absolute;
  font-size: 5rem;
  font-weight: 700;
  color: #952223;
  top: -5.5rem;
  left: 2rem;
  padding-bottom: 0 !important;
}

/* 右下の英字 */
.point_text {
  z-index: 2;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3.8rem;
  color: #fff;
  position: absolute;
  bottom: -1.5rem;
  right: 1.5rem;
  padding-bottom: 0 !important;
  white-space: nowrap; /* 折り返さない */
}

/* 理念のイメージ画像 */
.concept_slider .row img {
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  border-radius: 1rem;
}



/* スマートフォン */
@media (max-width: 767px) {
  .concept_slider {
    padding-top: 3rem;
  }
  /* 理念のメインボックス */
  .concept_slider .swiper-slide-inner {
    width: 90%;
  }
  .concept_slider .row {
    /*height: auto !important; /* スライダーの高さを揃えない */
    width: 100%;
    margin-left: 0;
  }
  /* 理念の見出し */
  .concept_slider .row h2 {
    font-size: clamp( 1.4rem, 6vw, 2.8rem );
    line-height: 1.8;
    padding-top: 3rem;
    padding-bottom: 2rem;
  }
  /* 文章スペースの余白の調整 */
  .concept_slider .row .col-sm-7 {
    margin-bottom: 0;
  }
  /* flexboxにしてイメージ画像を下ぞろえ */
  .concept_slider .row .col-sm-5 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 2rem;
  }
  .concept_slider .row img {
    position: relative;
    top: 0;
    right: 0;
  }
  /* 右下の英字 */
  .point_text {
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    font-size: 3rem;
    position: absolute;
    bottom: 2rem;
    left: 1.5rem;
    right: auto;
    white-space: normal; /* 折り返しを許可 */
  }
}



/* ---------------------------------------------
  イラスト付きの説明
--------------------------------------------- */

.image_concept {
  position: relative;
  padding-top: 8rem;
}

.image_concept::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f3f0e9;
  transform: skewY(-7deg) translateY(90px);
  z-index: -1;
}

.image_concept .row {
  margin: 0;
  padding: 0;
}

.image_concept img {
  max-width: 100%;
  height: auto;
  display: block;  /* 余分な空間をなくす */
}
.image_concept .left_col,
.image_concept .right_col {
  box-sizing: border-box;
  padding: 0; /* 余計なパディングが入ってる場合に削除 */
}

/* 左カラム */
.image_concept .left_col > div {
  padding: 5rem;
  padding-bottom: 0;
}
.image_concept .left_col img {
  border-radius: 0 1rem 1rem 0;
}
/* 火を囲むように、当たり前に支え合う暮らしを。 */
.image_concept .left_col h2 {
  padding: .2rem .8rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 2;
  color: #000;
  display: inline;
  background: linear-gradient(transparent 0%, #fff 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.image_concept .left_col p:nth-of-type(1) {
  padding-top: 2rem;
}

/* 右カラム */
.image_concept .right_col {
  padding: 4rem 5rem 0 5rem;
}

.image_concept_explain h3 {
  color: #000;
  font-weight: 600;
  font-size: 1.3rem;
  padding-bottom: 2rem;
  line-height: 2.2rem;
}

.image_concept_explain p {
  padding-left: 1rem;
}

.image_concept_explain img {
  border-radius: 50%;
  background-color: #fff;
}

/* 説明文を上下中央寄せにする */
.image_concept_explain div:nth-of-type(2) {
  display: flex;
  align-items: center;
}


/* 区切り線 */
.image_concept .right_col .image_concept_explain:nth-of-type(1),
.image_concept .right_col .image_concept_explain:nth-of-type(2) {
  border-bottom: #000 solid 1px;
}

/* 余白の調整 */
.image_concept .right_col .image_concept_explain:nth-of-type(1) {
  padding-bottom: 2.5rem;
}
.image_concept .right_col .image_concept_explain:nth-of-type(2) {
  padding: 2.5rem 0;
}
.image_concept .right_col .image_concept_explain:nth-of-type(3) {
  padding-top: 2.5rem;
}



/* スマートフォン */
@media (max-width: 767px) {
  .image_concept {
    padding-top: 4rem;
  }
  /* 左カラム */
  .image_concept .left_col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20%;
    height: 100vh;
    position: relative;
    background-image: url(../img/concept_4.jpg);
    background-size: cover;
    background-position: 70% center;
    clip-path: polygon(
      0 0,
      100% 5%,
      100% 100%,
      0 95%
    );
  }
  .image_concept .left_col::before { /* オーバーレイ追加 */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0.75) 100%
    );
  }
  .image_concept .left_col > div {
    padding: 0 2rem;
  }
  .image_concept .left_col h2 {
    padding: 0;
    padding-left: 6%;
    font-weight: 700;
    font-size: clamp( 1.8rem, 6vw, 2rem );
    position: relative;
    z-index: 1;
    background: none;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  }
  .image_concept .left_col p {
    padding-left: 6%;
    position: relative;
    z-index: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }
  .image_concept .left_col p:nth-of-type(1) {
    padding-top: 4rem;
  }
  .image_concept span.red_text {
    color: #ffa8aa;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  }
  .image_concept .left_col img {
    display: none;
  }

  /* 右カラム */
  .image_concept .right_col {
    padding: 4rem 3rem 0 3rem;
  }
  .image_concept_explain h3 {
    text-align: center;
    padding-bottom: 1rem;
  }
  .image_concept_explain p {
    padding-top: 1rem;
    padding-left: 0;
  }
  .image_concept_explain img {
    width: 70%;
    height: auto;
    margin: 0 auto;
  }
}



/* ===================================================
	4.Service-灯のサービス-
=================================================== */

.card_box {
  padding-top: 5rem;
}

.card_box .card {
  padding: 1.5rem !important;
}

.card_box h2 {
  font-weight: 600;
  font-size: 1.3rem;
  padding-bottom: 1rem;
  text-align: center;
}

.card-body {
  display: flex;
  flex-direction: column;
}

/* ともりちゃんの紹介 */
.tomori_chan {
  padding-top: 6rem;
  display: flex;
  justify-content: center;
}

.tomori_chan_inner {
  background-color: #faecb6;
  border-radius: 1rem;
  width: 70%;
  padding: 2rem;
}

.tomori_chan_inner div {
  position: relative;
}

.tomori_chan_inner img {
  position: absolute;
  left: 0;
  top: -5rem;
}

.tomori_chan h2 {
  font-weight: 600;
  font-size: 1.6rem;
  padding-bottom: 1rem;
}

.tomori_chan h2,
.tomori_chan p {
  padding-left: 1.5rem;
}



/* スマートフォン */
@media (max-width: 767px) {
  #page3 .card_box {
    padding-top: 2rem;
  }
  #page3 .card_box > div {
    padding-top: 2rem;
  }
  /* ともりちゃんの紹介 */
  .tomori_chan {
    padding-top: 4rem;
  }
  .tomori_chan_inner {
    width: 90%;
    padding: 1rem;
  }
  .tomori_chan_inner img {
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .tomori_chan h2,
  .tomori_chan p {
    padding-left: 0;
  }
}



/* ===================================================
	5.Business-事業内容-
=================================================== */

#page4 {
  position: relative;
}
#page4::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f3f0e9;
  transform: skewY(-7deg) translateY(90px);
  z-index: -1;
}

#page4 .card_box {
  padding-bottom: 3rem;
}
#page4 .card_box img {
  border-radius: .5rem;
}
#page4 .card-body div {
  padding-bottom: 2rem;
}

#page4 .card_box .col-sm-4:nth-of-type(4),
#page4 .card_box .col-sm-4:nth-of-type(5),
#page4 .card_box .col-sm-4:nth-of-type(6) { 
  padding-top: 2rem;
}

.staff {
  position: relative;
  padding-top: 6rem;
  text-align: center;
}

.staff .row {
  padding-top: 4rem;
}

.staff .row img {
  background-color: #fff;
  width: 70%;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
}

.staff h2 {
  font-size: 1.2rem;
  padding: .2rem .8rem !important;
  font-weight: 600;
  line-height: 2.5;
  color: #000;
  display: inline;
  background: linear-gradient(transparent 0%, #fff 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.staff h3 {
  padding-top: 2rem;
  font-weight: 600;
  font-size: 1rem;
}

/* 登録看護師10名 */
.tomori_comment {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: -6rem;
  left: 15%;
}
.tomori_comment p {
  margin: 0 .5rem;
  padding: .5rem 1rem;
  background-color: #fff;
  border-radius: .5rem;
  position: relative;
  display: inline-block;
}
.tomori_comment p::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 7.5px 15px 7.5px 0;
  border-color: transparent #fff transparent transparent;
  translate: -100% -50%;
}
.tomori_comment img {
  width: 5rem;
  height: auto;
}



/* スマートフォン */
@media (max-width: 767px) {
  #page4 .card_box .col-sm-4 {
    padding-top: 2rem;
  }
  #page4 .card_box {
    padding-top: 2rem;
  }
  .staff h2 {
    font-size: 1.2rem;
  }
  .staff .col-sm-3:nth-of-type(2),
  .staff .col-sm-3:nth-of-type(3),
  .staff .col-sm-3:nth-of-type(4) {
    padding-top: 1.5rem;
  }
  .tomori_comment {
    left: 1rem;
  }
}



/* ===================================================
	6.Customer Review-利用者さんからの声-
=================================================== */

/* 1回に表示するスライド数を2に指定 */
.swiper2 {
  position: relative;
  width: 80%;
  margin: 0 auto;
}

.review_slider {
  position: relative;
  padding-top: 5rem;
  width: 100%;
  height: 100%;
}

.review_slider .swiper-slide {
  width: 100%;
  height: auto !important;
  margin-bottom: 3rem;
}

/* 矢印の位置調整 */
.swiper2-prev {
  position: absolute;
  left: calc(10% - 20px); /* スライダー幅の外 */
}
.swiper2-next {
  position: absolute;
  right: calc(10% - 20px);
}

.review_slider .swiper-slide-inner {
  background-color: #fad3c0;
  border-radius: 1rem;
  padding: 3rem 2rem;
}

.review_slider h2 {
  font-size: 1.3rem;
  line-height: 2.2;
  padding: 2rem 0 1rem 0;
  font-weight: 600;
  line-height: 2.5;
  color: #000;
}

.review_slider img {
  border-radius: .5rem;
}



/* スマートフォン */
@media (max-width: 767px) {
  .swiper2 {
    width: 90%;
  }
  .review_slider {
    padding-top: 3rem;
  }
}



/* ===================================================
	7.SNS-公式SNS情報-
=================================================== */

#page6 {
  position: relative;
}
#page6::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f3f0e9;
  transform: skewY(-7deg) translateY(90px);
  z-index: -1;
}

.sns_box {
  padding-top: 3rem;
}

.sns_box .row div {
  display: flex;
  align-items: center;
  justify-content: center;
}



/* スマートフォン */
@media (max-width: 767px) {
  .sns_box {
    padding-top: 2rem;
  }
}



/* ===================================================
	8.Outline-会社概要-
=================================================== */

.outline_box {
  padding: 3rem 0;
}

.outline_box img {
  border-radius: 1rem;
}

/* 電話番号 */
.outline_box .tel {
  display: flex;
  align-items: center;
  font-size: 2.2rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}
.outline_box .tel .fa-phone {
  font-size: 1.4rem;
  padding: .5rem;
  color: #fff;
  background-color: #b4b4b4;
  border-radius: 50%;
  margin-right: .8rem;
  margin-bottom: -5px;
}

/* テーブル */
.outline_box th {
  white-space: nowrap; /* 折り返し無効 */
  vertical-align: top;
  padding: .5rem;
  padding-left: 0;
}
.outline_box td {
  vertical-align: top;
  padding: 0 2rem .5rem 1rem;
}
.outline_box th span {
  background: #ffe08a;
  padding: .4em 1em;
  border-radius: 4px;
}
.outline_box th span.letter_3 {
  letter-spacing: .5em;
  padding: .4em .5rem .4em 1em;
}

/* Google Map */
.outline_box .google_map {
  vertical-align: bottom;
}
.outline_box .google_map span {
  margin-left: .2rem;
}



/* タブレット（pro横向き以外） */
@media (min-width: 768px) and (max-width: 1024px) {
  .outline_box img {
    margin-top: 1.5rem;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  .outline_box {
    padding: 0 0 3rem;
  }
  .outline_box td {
    padding: 0 0 .5rem .5rem;
  }
  .outline_box .col-sm-6:nth-of-type(2) {
    padding-top: 2rem;
  }
  .outline_box .col-sm-6:nth-of-type(1) p {
    text-align: center;
  }
  .outline_box .tel {
    justify-content: center;
    margin-bottom: 2rem;
  }
}




/* END */