@charset "UTF-8";

@font-face {
  font-family: 'MogihaPenFont';
  src: url('MogihaPenFont') format('truetype');
}




html {
  font-size: 100%;

}

body {
  color: #5D5B5A;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.2em;
  line-height: 3;
  background-image: url(../img/common/backgroundimage.png);
  background-size: cover;
  overflow-x: hidden;
  

}

img {
  max-width: 100%;
  vertical-align: bottom;
  border-radius: 10px;
}

li {
  list-style: none;
}

a {
  color: #5D5B5A;
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  opacity: 0.7;
}

iframe {
  vertical-align: bottom;
}

.navi {
  max-width: 1235px;
}

main{
  overflow: hidden;
}










/*-------------------------------------------
セクション　ロゴ＋タイトル 

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

/* 位置の指定 */

.text-title,
.description-title {
  font-size: clamp(20px, 1.7vw, 25px);
  /* 基準値24px ÷ 画面幅1440 × 100 */
  font-weight: 600;
  margin-bottom: 0px;

}




/* セクションタイトルフォントの指定 */


.section-title-ja {
  font-size: 50px;
  font-weight: 600;
  z-index: 20;
  line-height: 1;
  margin-left: -35px;

}

/* ローマ字の指定 */
.section-title-en {
  font-size: 23px;
  font-weight: 100;
  z-index: 20;
  color: #A5A0A0;
  margin-left: -10px;
}

/* ロゴサイズの指定 */
.section-logo-img {
  width: 150px;
  margin-top: 10px;

}

.logo-flex {
  display: flex;
  width: 98%;
  margin-left: auto;
  padding-bottom: 50px;
}

/*-------------------------------------------
フレックス部分
-------------------------------------------*/

.flex,
.flex .img {
  display: flex;

}



/*-------------------------------------------
タイトル
-------------------------------------------*/
.section-title-ja,
.text-title,
.description {
  margin-bottom: 40px;
  
}


/*-------------------------------------------
詳しく見るボタン
-------------------------------------------*/
.btn {
  max-width: 250px;
  background-color: #FFD574;
  border-radius: 10px;
  display: block;
  /* border: solid 1px #1f1f1f; */
  font-size: clamp(17px, 1.4vw, 20px);
  /* 基準値20px ÷ 画面幅1440 × 100 */

  text-align: center;
  position: relative;
  z-index: 10;
  margin-bottom: 50px;
}

.btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #ffb300;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
  border-radius: 10px;
}

.btn:hover {
  color: #fff;
  opacity: 1;
}

.btn:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}


/*-------------------------------------------
お問合せ・資料ボタン
-------------------------------------------*/

.contact-btn {
  max-width: 400px;
  background-color: #FFD574;
  border-radius: 10px;
  display: block;
  /* border: solid 1px #1f1f1f; */
  font-size: clamp(20px, 1.7vw, 24px);
  /* 基準値24px ÷ 画面幅1440 × 100 */
  padding: 0px 30px;
  text-align: left;
  position: relative;
  z-index: 10;
}

.contact-btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #ffb300;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
  border-radius: 10px;
}

.contact-btn:hover {
  color: #fff;
  opacity: 1;
}

.contact-btn:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

/*-------------------------------------------
めくる風ボタン
-------------------------------------------*/

.btn-turnover::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #92D2DC;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;

}

.btn-turnover:hover {
  color: #fff;
  opacity: 1;
}

.btn-turnover:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}



/*-------------------------------------------
単独ページへボタン
-------------------------------------------*/
/* 
.btn-page {
  max-width: 1000px;
  /* background-color: #FFD574; 
  border-radius: 10px;
  display: block;
  /* border: solid 1px #1f1f1f; 
  padding: 10px 0;
  text-align: left;
  position: relative;
  z-index: 10;
  margin-bottom: 50px;
}

*/

.btn-page {
    max-width: 1000px;
    /* background-color: #FFD574; */
    /* border-radius: 10px; */
    display: block;
    /* border: solid 1px #1f1f1f; */
    padding: 25px 15px;
    text-align: left;
    position: relative;
    z-index: 10;
    /* margin-bottom: 50px; */
    border-bottom: 1px solid #5D5B5A;
    line-height: 2;

}



.btn-page::before {
  color: #5D5B5A;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #e1c171;

  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
  border-radius: 10px;
}



.btn-page :hover {
  color: #5D5B5A;
  transform-origin: 0 0;
  transform: scaleX(1);
  /* background-color: #fff1d1; */
  opacity: 1;
  font-weight:900;
}


/*-------------------------------------------
 少しずらしたボックス
-------------------------------------------*/
.overlap-overview,
.overlap {
  max-width: 1000px;
  /* margin: auto 2em; */
  margin: 0 auto;  /* 外側の余白（上下と中央配置） */
  padding: 2em;
  /* 内側余白 */
  background: none;
  /* 元のボックス背景色なし */
  border: 10px solid #FFD574;
  /* 線の太さ（1px）、種類（実線）、色（#ccc） */
  position: relative;
  /* 配置（基準となる位置） */
  border-radius: 20px;
  /* left: 15%; */
      display: block;
    text-align: -webkit-center;

}
.overlap-overview:after,
.overlap:after {
  background-color: #FFFBF4;
  /* ずらしたボックスの背景色 */
  border: none;
  /* 枠線なし */
  content: '';
  /* 擬似要素にコンテンツなし */
  position: absolute;
  /* 配置（ここを動かす） */
  top: 3%;
  /* 上からずらす */
  left: 2%;
  /* 左からずらす */
  width: 102%;
  /* 幅100%（親要素に合わせる） */
  height: 102%;
  /* 高さ100%（親要素に合わせる） */
  z-index: -10;
  /* 背景として後ろに表示 */
  border-radius: 20px;

}


.overlap-overview p,
.overlap p {
  margin: 0;
}

/*-------------------------------------------
めくる風フレーム
-------------------------------------------*/
.simpleframe {
  max-width: 350px;
  height: 350px;
  position: relative;
  padding: 1rem;
  outline: 3px solid #A5D2E1;
  outline-offset: 2px;
  background-image: linear-gradient(-45deg, transparent 10px, #A5D2E1 10px);
  /* color: #212121; */
  overflow: hidden;
  border-radius: 20px;
  z-index: 20;
}

.simpleframe::before {
  position: absolute;
  content: '';
  right: 0px;
  bottom: 0px;
  border-width: 0px 0px 15px 15px;
  border-style: solid;
  border-color: transparent transparent transparent #A5D2E1;
  box-shadow: 0 0 5px #000;
}

.simpleframe p {
  line-height: 1.5;
}

/*-------------------------------------------
タイトル付きフレーム
-------------------------------------------*/

.title-simpleframe {
  width: 550px;
  height: 350px;
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  border-radius: 20px;
  border: solid 10px;
}

.title-simpleframe .text-title {
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 10px 10px 0 0;

}



.title-simpleframe p {
  padding: 15px 20px;
  margin: 0;
}

/*-------------------------------------------
時計アイコン
-------------------------------------------*/

.dli-clock {
  display: inline-block;
  vertical-align: middle;
  color: #5D5B5A;
  line-height: 1;
  position: relative;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-radius: 50%;
  box-sizing: content-box;
  align-items: center;
  transform: translate(0px, 15px);
}

.dli-clock::before,
.dli-clock::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 50%;
  background: currentColor;
  border-radius: 0.1em;
  transform: translate(-0.05em, 0.05em);

}

.dli-clock::before {
  width: 0.1em;
  height: 0.4em;
}

.dli-clock::after {
  width: 0.35em;
  height: 0.1em;
}


.description {
  font-size: clamp(16px, 1.4vw, 20px);
  /* 基準値20px ÷ 画面幅1440 × 100 */
}






/* ----------------------------------
ヘッダー 全体
---------------------------------- */
.header-container{
  
  width: 100%;
  z-index: 100;
}



/* ----------------------------------
ヘッダー 上部
---------------------------------- */
.navi {
  margin: 0 auto;
}



#header {
  width: 100%;
  /* padding: 0px 20px 10px 20px; */
  /* 要素の内側の余白。上側と下側には0pxの余白、左右には20pxの余白 */
 
  top: 0;
  left: 0;
  z-index: 50;
  /* 前面に表示 */
 
}


.upper {
  width: 100%;
  display: flex;
  align-items: center;
  /* フレックスアイテムを、コンテナの垂直方向の中央に揃える */
  justify-content: space-between;
  /* Flexboxレイアウトで子要素を水平方向に均等に配置 */

}



.pc-none {
  display: none;

}


.sp-none {
  display: block;
}


.logo-sp {
  width: clamp(200px, 21vw, 350px);
  /* 基準値300px ÷ 画面幅1440 × 100 */
}



.logo {
  width: clamp(110px, 41vw, 600px);
  /* 基準値600px ÷ 画面幅1440 × 100 */
  ;

}
.logo a {
  display: block;
}

.upper-menu {
  display: inline-block;
  display: flex;
  align-items: center;
  font-size: clamp(16px, 1.4vw, 20px); 
  /* 基準値20px ÷ 画面幅1440 × 100 */
  font-size: 20px;
  gap: 40px
}


.upper-menu a{
white-space: nowrap;
} 

.upper-menu li {
  /* position: relative; */
}



/* ヘッダー　お問い合わせボタン*/
.header-menu-contact-btn a {
  /* max-width: 250px; */
  width: 100%;
  background-color: #FFD574;
  border-radius: 10px;
  display: block;
  font-size: clamp(16px, 1.4vw, 25px);  /* 基準値20px ÷ 画面幅1440 × 100 */
  text-align: center;
  position: relative;
  z-index: 10;
  font-weight: 500;
  padding: 0px 30px;
 
}

.header-menu-contact-btn a::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #ffb300;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
  border-radius: 10px;

}

.header-menu-contact-btn a:hover {
  color: #fff;
  opacity: 1;
}

.header-menu-contact-btn a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}


/* ヘッダー　リクルートボタン*/
.header-menu-recruit-btn a {
  /* max-width: 250px; */
  width: 100%;
  background-color: #92e8f9;
  border-radius: 10px;
  display: block;
  font-size: clamp(16px, 1.4vw, 25px); /* 基準値20px ÷ 画面幅1440 × 100 */
  text-align: center;
  position: relative;
  z-index: 10;
  font-weight: 500;
  padding: 0px 30px;
}

.header-menu-recruit-btn a::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #39deff;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
  border-radius: 10px;

}

.header-menu-recruit-btn a:hover {
  color: #fff;
  opacity: 1;
}

.header-menu-recruit-btn a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}








/* ----------------------------------
ヘッダー 下部
---------------------------------- */

.header-menu-item {
  width: 20%;
  border-left: 3px dashed #5D5B5A;
  line-height: 2;

  
}

.header-menu-item-end {
 border-right: 3px dashed #5D5B5A; 
}




.bottom-menu {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: clamp(20px, 1.6vw, 23px);
  /* 基準値23px ÷ 画面幅1440 × 100 */
}

.menu-second-li {
  font-size: clamp(18px, 1.4vw, 20px);
  /* 基準値20px ÷ 画面幅1440 × 100 */
}

.bottom-menu>li {
  text-align: center;
}

.menu-first {
  position: relative;
  /* 元の位置を基準に指定された数値の分だけ移動 */
}

.menu-first span {
  cursor: pointer;
  /* マウスカーソルがリンクやボタンの上にある際に表示される「指差しマーク」 */
}

.menu-first span::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: solid 1px #5D5B5A;
  border-right: solid 1px #5D5B5A;
  margin: 0 auto;
  transform: rotate(135deg);
  position: absolute;
  top: 45px;
  left: 0;
  right: 0;

}


/* ----------------------------------
ドロップダウンメニュー
---------------------------------- */



.menu-second {
  display: none;
  width: 240px;
  background-color: #dbecef;
  padding: 10px 20px;
  position: absolute;
  top: 45px;
  left: 0px;
  z-index: 2;
  border-radius: 20px;
  font-size: 16px;
}

.menu-first:hover .menu-second {
  display: block;
}


.menu-second-li {
  /* background-color: #FFD574; */
  height: 60px;
  transition: all .3s;
  position: relative;
  padding-top: 15px;
}

.menu-second-li:not(:first-child)::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #5D5B5A;
  position: absolute;
  top: 0;
  left: 0;
}

.menu-second-li:hover {
  /*background-color: #fddf9a;*/

}

.menu-second a {
  display: flex;
  /* justify-content: center; */
  align-items: left;
  color: #5D5B5A;
  text-decoration: none;
  position: relative;


}

.menu-second a::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #5D5B5A;
  border-left: 2px solid #5D5B5A;
  transform: rotate(135deg);
  position: absolute;
  right: 1px;
  top: calc(50% - 5px);

}



/*-------------------------------------------
フッター
-------------------------------------------*/

.footer-image {
  position: absolute;
  top: 0;
  left: 0;
  translate: 0 -100%;
}

.footer-image img {
  width: 100%;
  height: auto;
}


/* 全体 */
#footer {
  justify-content: space-between;
  background-color: #C6E4E7;
  color: #5D5B5A;
  padding: 80px 5%;
  position: relative;
}


.footer-area {
  display: flex;
  margin-bottom: 100px;
  gap: 20px;
}

#footer a {
  color: #5D5B5A;
}

/* 会社情報 */
#footer .info-area {
  width: 100%;

}

/* 
.logo {
  width: 100%;
  max-width: 575px;
  display: block;
  line-height: 0;
}
  */


.info {
  font-size: clamp(14px, 1.2vw, 17px);
  /* 基準値17px ÷ 画面幅1440 × 100 */
  line-height: 2;
  margin-bottom: 30px;
  gap: 30px;


}


/* メニューエリア */
.menu-area {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  line-height: 1.8;
  gap: 15px;
  justify-content: space-evenly;
}

.menu-col {
  width: 100%;
  max-width: 200px;
}
.sp-menu-col{
  margin-top: 100px;
}
.menu-title {
  font-size: clamp(15px, 1.2vw, 17px);
  /* 基準値17px ÷ 画面幅1440 × 100 */
  font-weight: 600;
  margin-bottom: 30px;
}

.menu-list li {
  font-size: clamp(14px, 1.05vw, 15px);
  /* 基準値15px ÷ 画面幅1440 × 100 */
  margin-bottom: 20px;
}

.menu-list li::before {
  content: "-";
  margin-right: 10px;
}



.copyright {
  text-align: center;
  font-size: clamp(12px, 1vw, 13px);
  /* 基準値13px ÷ 画面幅1440 × 100 */
    margin-bottom: 100px;
}

/*-------------------------------------------
 トップページ
 メインビジュアル
-------------------------------------------*/

.mainvisual {
  height: 900px;
  margin-bottom: 0px;
  position: relative;
  margin-top: 0px;
}

.fade-img img {
  width: 100%;
  object-fit: cover;

}


.fade-img li {
  /* width: 70%; */
  position: absolute;
  right: 0px;
  opacity: 0;
  animation: fade 15s infinite;
}

.fade-img li:nth-child(1) {
  animation-delay: 0s;
}

.fade-img li:nth-child(2) {
  animation-delay: 5s;
}

.fade-img li:nth-child(3) {
  animation-delay: 10s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  45% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}



.catchphrase,
.subcatchphrase {
  position: absolute;
  left: 6%;
}

.catchphrase {
  top: 100px;
}

.subcatchphrase {
  top: 350px;
}

/*-------------------------------------------
トップページ
私たちの思い
-------------------------------------------*/

.features-section-title{
  /* margin-top: 700px; */
}
.company-container {
  justify-content: center;
  gap: 50px;
}


.thought-image{
  width: 50%;
  align-self: flex-start;
  /* position: relative;
  top: 0px; */
}

/* バックグランドカラー */
.company {
  position: relative;
  padding-bottom: 100px;
  margin-bottom: 150px;
 
}

.company::before {
  content: "";
  display: block;
  background-color: rgba(176, 255, 199, 0.28);
  width: 100%;
  height: 100%;
  position: absolute;
  /* top: 12%; */
  top: 94px;
  left: 0px;
  z-index: -1;
}



/* バックグランドカラー  ここまで*/


/* 水彩モチーフ */


.company::after {
  content: "";
  display: block;
  background-image: url(../img/common/colorful--watercolor.png);
  width: 160%;
  height: 160%;
  position: absolute;
  top: -20%;
  left: 25%;
  z-index: -1;
  background-size: contain;
}

/* 水彩モチーフ ここまで*/





/*-------------------------------------------
トップページ　
サービスについて
-------------------------------------------*/


.service-description {
  text-align: left;
  /* position: relative; */
  /* left: 32%; */
  margin-left: auto;
  width: 62%;
}

/* バックグランドカラー */

.service {
  position: relative;
  margin-bottom: 250px;
}


.service::before {
  content: "";
  display: block;
  background-color: rgba(176, 255, 199, 0.28);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 94px;
  left: 30%;
  z-index: -1;
  border-radius: 20px 0 0 20px;
}
/* バックグランドカラー ここまで */

.service-section {
  /* position: relative;
  left: 30%; */
  width: 68%;
  margin-left: auto;
}

.servise-list-btn {
  width: 250px;
}

.servise-list {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 250px);
  gap: 20px;
  justify-content: space-evenly;
}




/* ラウンドモチーフ */
.service::after {
  content: "";
  display: block;
  background-image: url(../img/common/round-blue.png);
  width: 500px;
  height: 500px;
  position: absolute;
  top: 500px;
  right: 100px;
  z-index: -1;
  background-size: contain;
}

/* ラウンドモチーフ ここまで*/






/*-------------------------------------------
トップページ
実例紹介
-------------------------------------------*/

/*  バックグランドイメージ */
.works {
  position: relative;
  margin-bottom: 250px;
}

.works::before {
  content: "";
  display: block;
  background-color: rgba(176, 255, 199, 0.28);
  width: 70%;
  height: 70%;
  position: absolute;
  /* top: 10%; */
  top: 94px;
  left: 10%;
  z-index: -1;
  border-radius: 20px;
}

/*  バックグランドイメージ ここまで*/

.works-container-flex {
    /* position: relative; */
    /* display: flex; */
    /* left: 10%; */
    margin-left: auto;
    width: 82%;
}





.works-section {
  /* position: relative;
  left: 10%; */
  width: 88%;
  margin-left: auto;
}



.works-section-title-en {
  /* position: relative;
  left: -2%; */
}

.works-section-title-ja {
  /* position: relative;
  left: -17%; */
}

.works-description {
  max-width: 30%;
}

.works-list {
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 50px;


}

.works-flex-text {
  display: flex;
  gap: 50px;

}



/*-------------------------------------------
めくる風フレーム
-------------------------------------------*/
.works-list-simpleframe {
  max-width: 350px;
  height: 350px;
  position: relative;
  padding: 1rem;
  outline: 3px solid #A5D2E1;
  outline-offset: 2px;
  background-image: linear-gradient(-45deg, transparent 10px, #A5D2E1 10px);
  /* color: #212121; */
  overflow: hidden;
  border-radius: 20px;
  z-index: 20;
}

.works-list-simpleframe::before {
  position: absolute;
  content: '';
  right: 0px;
  bottom: 0px;
  border-width: 0px 0px 15px 15px;
  border-style: solid;
  border-color: transparent transparent transparent #A5D2E1;
  box-shadow: 0 0 5px #000;
}

.works-list-simpleframe p {
  line-height: 1.5;
}


/*-------------------------------------------
トップページ
スタッフ紹介
-------------------------------------------*/



 .staff-text{
  /* position: relative;
  left: 30%;
  margin-left: 115px; */
  margin-left: auto;
  width: 62%;
}

/* バックグランドイメージ */
.staff {
  position: relative;
  margin-bottom: 250px;
  /* overflow: hidden; */
}

.staff::before {
    content: "";
    display: block;
    background-color: rgba(176, 255, 199, 0.28);
    width: 100%;
    height: 100%;
    position: absolute;
    /* top: 12%;*/
    top: 94px;
    left: 30%;
    z-index: -1;
    border-radius: 20px 0 0 20px;
}

/* バックグランドイメージ */





/* 水彩モチーフ */
.staff::after {
  content: "";
  display: block;
  background-image: url(../img/common/round-orange-frame.png);
  width: 1450px;
  height: 1450px;
  position: absolute;
  top: -150px;
  right: 0px;
  z-index: -1;
  background-size: contain;
}

/* 水彩モチーフ ここまで*/

.staff-section {
  /* position: relative;
  left: 30%; */
  width: 68%;
  margin-left: auto;
}

.staff-img-flex {
  margin: 0 auto;
  width: 100%;
  gap: 10px;
  display: flex;
  justify-content: space-evenly;
}

.staff-img-flex img {
  height: 400px;
  max-width: 100%;
  object-fit: contain;
}


/*-------------------------------------------
トップページ
お知らせ
-------------------------------------------*/

.news-btn {
    margin: 50px auto;
}


/* ドット柄モチーフ */


.news{
  position: relative;
}

.news::before {
    content: "";
    display: block;
    background-image: url(../img/common/colorful-dotpattern.png);
    width: 600px;
    height: 500px;
    position: absolute;
    top: -300px;
    right: 0;
    z-index: -1;
    background-size: cover;
}


/* ドット柄モチーフ ここまで*/


.sp-flex {
  display: flex;
  gap: 10px;
}


.news-section {

  /* position: relative;
  left: 10%; */
  width: 90%;
  margin-left: auto;

}

.news-tag-flex {
  display: flex;
  gap: 10px;
}


.news {

  margin-bottom: 250px;

}

/* 背景色をつける */
.tag {
  padding: 0 0.5em;
  /* 内側余白 */
  border-radius: 10px;
  height: clamp(40px, 3.5vw, 70px);
  /* 基準値24px ÷ 画面幅1440 × 100 */
  font-weight: 600;
}



.tag-news {
  background-color: #CEE5E8;
  height: 100%;
}

.tag-seminar {
  background-color: #FFDEAB;
  height: 100%;
}

.tag-event {
  background-color: #E8F7E0;
  height: 100%;
}



/*-------------------------------------------
トップページ
お問合せ
-------------------------------------------*/


.tell-img {
  max-width: 30px;
  height: 30px;
  margin-top: 25px;
  margin-right: 10px;
}

.tell-img img {
  transform-origin: (20px, 20px);
}

.contact-description {
  /* position: relative;
  left: 30%; 
  margin-left: 115px;*/
  margin-left: auto;
  width: 62%;

}


.contact-list {
  /* position: relative; */
  display: block;
  
}

.title-simpleframe-flex {
  width: 100%;
  height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-simpleframe-description {
  margin-left: 20px;
}

/* ラウンドモチーフ */
.contact{
  position: relative;
  margin-bottom: 500px;
}
.contact::after {
  content: "";
  display: block;
  background-image: url(../img/common/round-red.png);
  width: 500px;
  height: 500px;
  position: absolute;
  top: 500px;
  left: 0px;
  z-index: -1;
  background-size: contain;
}

/* ラウンドモチーフ ここまで*/

/* バックグランドイメージ */
.contact::before {
  content: "";
  display: block;
  background-color: rgba(176, 255, 199, 0.28);
  width: 100%;
  height: 100%;
  position: absolute;
  /* top: 12%; */
  top: 94px;
  left: 30%;
  z-index: -1;
  border-radius: 20px 0 0 20px;
}

/* バックグランドイメージ ここまで*/


.contact-section {
  /* justify-content: center; */
 /* position: relative;
  left: 30%; */
  width: 68%;
  margin-left: auto;
}




.contact-flex {
  margin: 0 auto;
  justify-content: space-evenly;
  gap: 10px;
  display: flex;
}

.download-contact-btn {
  /* max-width: 400px; */
  /* position: relative; */
  /* margin: 20px; */
  width: 90%;
  margin: 20px auto;

}

.download-contact-btn p {
  line-height: 2;
}


/*-------------------------------------------
タイトル付きフレーム
-------------------------------------------*/
/* 電話 */
.contact-title-simpleframe-tell {
  width: clamp(350px, 34vw, 480px);
  /* 基準値480px ÷ 画面幅1440 × 100 */
  height: 350px;
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  border-radius: 20px;
  border: solid 10px;
  border-color: #92D2DC;

}

.contact-title-simpleframe-tell .text-title {
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 10px 10px 0 0;
  background: #92D2DC;
}



.contact-title-simpleframe-tell p {}


/* WEB */
.contact-title-simpleframe-web {
  width: clamp(350px, 34vw, 480px);
  /* 基準値480px ÷ 画面幅1440 × 100 */
  height: 350px;
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  border-radius: 20px;
  border: solid 10px;
  border-color: #FF9C9C;
  /* position: relative; */
}

.contact-title-simpleframe-web .text-title {
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 10px 10px 0 0;
  background: #FF9C9C;
}



.contact-title-simpleframe-web p {
  padding: 15px 20px;
  margin: 0;
}


/*-------------------------------------------
私たちについてページ
ページヘッダー
-------------------------------------------*/
.page-description-area{
  line-height: 2.4;
  margin-bottom: 0px;
}



.page-header-flex {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(6%, 0.1vw, 7%);
  width: 85%;
  margin-left: auto;
  /*  margin-left: clamp(5%, 0.1vw, 10%); */
}



.page-header {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  background-color: #C6E4E7;
  position: relative;
  /* top: 20px;
  left: 0;*/
  margin-top: 20px;
  z-index: -2;
  overflow: hidden;
  height: 300px;
}

.page-title {
  /* position: relative;
  left: 0%; */
}


.page-description {
  /* position: relative;
  left: 0;
  bottom: -40px; */
  line-height: 1.8;
}

.page-header-img {
    /* position: relative; */
    margin-left: auto;
    z-index: -1;
}
.page-header-img img {
  width: 19%;
  object-fit: contain;
  position: absolute;
  right: 0;
  top: -3px;
}

.section-title-en {
  display: block;
  text-align: start;

}

.section-title-ja {
  display: block;

}

    

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

ページ内リンク
-------------------------------------------*/

#company.html .html,
#servise.html .html,
#works.html .html,
#staff.html .html{
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

.text-area-wrapper,
.pagelink-list-wrapper {
  max-width: 1400px;
  padding: 0 5px;
  margin: 0 auto;
}
.pagelink {
  display: flex;
  margin-bottom: 80px;
  margin-top: 40px;
}



.company-pagelink-li{
  width: calc(100% / 5);
}

.service-pagelink-li{
  width: calc(100% / 7);
}

.staff-pagelink-li{
   width: calc(100% / 2);
}
.pagelink li {
  /* width: calc(100% / 7); */
  border-left: solid 1px #5D5B5A;
  font-size: clamp(14px, 1.4vw, 20px);
  /* 基準値20px ÷ 画面幅1440 × 100 */
  text-align: center;
  position: relative;
  margin: 0 auto;
  white-space: nowrap;
  line-height: 2;

}

.pagelink li:last-child {
  border-right: solid 1px #5D5B5A;
}

.pagelink li::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #5D5B5A;
  margin: 0 auto;
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
}

.pagelink li a {
  display: block;
}
.pagelink-btn{
  font-size: clamp(16px, 1.4vw, 25px); /* 基準値20px ÷ 画面幅1440 × 100 */
}


/*-------------------------------------------
私たちについてページ
セクションタイトル
-------------------------------------------*/
 
 /* セクションタイトルフォントの指定 */
.page-section-title-ja {
  /* font-size: clamp(20px, 3.4vw, 60px); /* 基準値48px ÷ 画面幅1440 × 100 */

  /* left: 0%; */
  margin-bottom: 40px;
} 


/* ローマ字の指定 */
.page-section-title-en {
  /* font-size: clamp(12px, 1.4vw, 30px); /* 基準値140px ÷ 画面幅1440 × 100 */
  /* left: 0%;
  bottom: -4%; */
}



.features-section-title {
  margin-bottom: 100px;
  position: relative;
     
}

.features-section-title span {
  max-width: 1000px;
  display: block;
  padding: 0 20px;
  margin: 0 auto;
}

.features-section-title::before {
  content: "";
  width: calc((100% - 1000px) / 2);
  height: 0.5px;
  background-color: #5D5B5A;
  position: absolute;
  top: 80px;
  left: 0;
}


/*-------------------------------------------
私たちについてページ
私たちの思い
-------------------------------------------*/
.width-100{
  width: 100%;

}

/* ドット柄モチーフ  縦に回転*/

.thought-container {
  position: relative;
  gap: 50px;
  margin-bottom: 250px;
  justify-content: center;
}

.thought-container::after {
    content: "";
    display: block;
    background-image: url(../img/common/colorful-dotpattern.png);
    transform: rotate(90deg);
    width: 140%;
    height: 140%;
    position: absolute;
    bottom: -215%;
    left: 5%;
    z-index: -1;
    background-size: contain;
}


/* ドット柄モチーフ ここまで*/




/*-------------------------------------------
私たちについてページ
経営理念
-------------------------------------------*/

#philosophy{
  margin-bottom: 150px;
   
}

.philosophy-container {
   gap: 50px;
  margin-bottom: 150px;
  justify-content: center;
  
}

.philosophy-description {
    max-width: 30%;
     
}

.philosophy-image{
align-self: flex-start;
}


.representative-message {
  text-align: center;
	display: block;
 
}

.representative-message-description{
  text-align: left;
	display: inline-block;
  max-width: 70%;
 
}

.sign{
text-align: right;
}

.representative-image{
  margin-bottom: 40px;


}





/* 水彩モチーフ */
.representative-message{
  position: relative;
}

.representative-message::before {
    content: "";
    display: block;
    background-image: url(../img/common/colorful--watercolor.png);
    width: 110%;
    height: 110%;
    position: absolute;
    top: 0%;
    /* left: 8%; */
    z-index: -1;
    background-size: contain;
}

/* 水彩モチーフ ここまで*/


/*-------------------------------------------
私たちについてページ
特徴
-------------------------------------------*/

/* 特徴　導入 */
#features {
  /* position: relative; */
}

.features-container {
  text-align: center;
	display: block;
 
}


.features-description{
  text-align: left;
	display: inline-block;
  max-width: 70%;
}



/* ポイント共通部分  */


.point-container {
margin-bottom: 250px;
text-align: center;
display: block;
}
 

.contents-box{
  display: flex;
  margin: 0 auto;
  max-width: 1400px;
  justify-content: space-evenly;
  gap: 0px;
  
}
  

.point-section-description{
    /* position: relative; */
    text-align: left;
	  /*display: inline-block;*/
  /* left: 10%; */
  /* margin-left: 130px; */
}

/* ポイント画像位置 */
.point-imege-1{
  /* position: relative;
  bottom: -4px; */
  z-index: 20;
  margin-top: 4px;
  max-width: initial;
}
.point-imege-2{
  /* position: relative;
  bottom: -4px; */
  z-index: 20;
  margin-top: 4px;
  max-width: initial;
}
.point-imege-3{
  /* position: relative;
  bottom: -4px; */
  z-index: 20;
  margin-top: 14px;
  max-width: initial;
}



/* ポイント */

.point-section-title {
  /* position: relative; */
  font-size: 40px;
  font-weight: 500;
  z-index: 20;

}
.point3-section-title,
.point2-section-title,
.point1-section-title {
  /* position: relative;
  left:3%; */
  /* bottom: -6px;*/
  margin-left: 20px;
  line-height: 2;
  margin-top: 22px;
  text-align: left;
}



 .point1-section,
 .point3-section {
    /* position: relative;
    left: 32%;*/
    width: 67%;
    margin-left: auto;
}

 .point2-section {
    /* position: relative;
    left: 2%; */
    width: 98%;
    margin-left: auto;
}





/* ドット線 下線のみ*/

.dotted-line-g{
  border-bottom: 10px dotted #A0E0A6; /* 線の太さ1px、点線、黒色 */
}
.dotted-line-b{
  border-bottom: 10px dotted #92D2DC; /* 線の太さ1px、点線、黒色 */
}
.dotted-line-or{
  border-bottom: 10px dotted #FFC874; /* 線の太さ1px、点線、黒色 */
}

/* ドット線 下線のみここまで*/

/* バックグランドイメージ */

/*　ポイント1　*/
.point1-container{
  position: relative;
  ;
}

.point1::before {
  content: "";
  display: block;
  background-color: rgba(176, 255, 199, 0.28);
  width: 100%;
  height: 100%;
  position: absolute;
  /* top: 10%; */
  top: 64px;
  left: 30%;
  z-index: -1;
  border-radius: 20px 0 0 20px;
}


/*　ポイント2　*/

.point2-container{
  position: relative;
}

 .point2::before {
  content: "";
  display: block;
  background-color: #E0F1F4;
  width: 70%;
  height: 100%;
  position: absolute;
   /* top: 10%; */
   top: 64px;
  left: 0;
  z-index: -1;
  border-radius: 0 20px 20px 0;
}


/*　ポイント3　*/

.point3-container{
  position: relative;
}

 .point3::before {
  content: "";
  display: block;
  background-color: #FDE9CB;
  width: 100%;
  height: 100%;
  position: absolute;
   /* top: 10%; */
   top: 64px;
  left: 30%;
  z-index: -1;
  border-radius: 20px 0 0 20px;
}


/* バックグランドイメージ  ここまで*/

/* ラウンドモチーフ */
.features-container{
  position: relative;
}
.features-container::after {
  content: "";
  display: block;
  background-image: url(../img/common/round-blue.png);
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: -1;
  background-size: contain;
}


/* ラウンドモチーフ ここまで*/


/* ドット柄モチーフ  縦に回転*/
.point3-container {
  position: relative;
}

.point3-container::after {
    content: "";
    display: block;
    background-image: url(../img/common/colorful-dotpattern.png);
    transform: rotate(90deg);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -117%;
    left: 30%;
    z-index: -10;
    background-size: contain;
}

/* ドット柄モチーフ ここまで*/




/*-------------------------------------------
タイトル付きフレーム
-------------------------------------------*/


/* 共通部分 */
.point-title-simpleframe-g ,
.point-title-simpleframe-b ,
.point-title-simpleframe-or{
  max-width: 450px;
  height: 100%;
  /* width: clamp(350px, 34vw, 480px);
  /* 基準値480px ÷ 画面幅1440 × 100 */
   /* width: clamp(150px, 27vw, 480px); */
  /* height: 350px; */
  /* height:  clamp(400px, 42vw, 450px); */
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  border-radius: 20px;
  border: solid 10px;
  /* position: relative; */
  margin:5px;
}

.point-title-simpleframe-g .text-title,
.point-title-simpleframe-b .text-title,
.point-title-simpleframe-or .text-title {
  padding: 0;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 10px 10px 0 0;
  width: 100%;
  height: 80px;
  place-items: center;
  
}


.point-title-simpleframe-g p,
.point-title-simpleframe-b p,
.point-title-simpleframe-or p{
  padding: 15px 20px;
  margin: 0;
  text-align: left;

}
.line-height-15{
  line-height: 1.5;
}


/* ブルー */
.point-title-simpleframe-b {
 border-color: #92D2DC;
}
.point-title-simpleframe-b .text-title{
background: #92D2DC;
}

/* グリーン */
.point-title-simpleframe-g {
  border-color: #A0E0A6;
}

.point-title-simpleframe-g .text-title {
  background: #A0E0A6;
}

/* オレンジ */
.point-title-simpleframe-or {
  border-color: #FFC874;
}

.point-title-simpleframe-or .text-title {
  background: #FFC874;
}


/*-------------------------------------------
私たちについてページ
会社概要
-------------------------------------------*/
#overview{
margin-bottom: 250px;
  
}

/* 会社概要テーブル */
.overview-table{
    width: 70%;
    border-collapse: collapse;
    align-items: center;
    }
    
    .overview-table th,
    .overview-table td {
    border-bottom: 1px solid #5D5B5A;
    padding: 20px;
    text-align: left;
    }
    
    .overview-table th {
    font-weight: bold;
    /* background-color: #dedede;  */
    }
  /* 会社概要テーブル 　ここまで*/
  


  




/* ラウンドモチーフ */
#overview{
  position: relative;
}

#overview::after {
  content: "";
  display: block;
  background-image: url(../img/common/round-red.png);
  width: 400px;
  height: 400px;
  position: absolute;
  bottom: -300px;
  left: 0px;
  z-index: 0;
  background-size: contain;
}

/* ラウンドモチーフ ここまで*/



/*-------------------------------------------
私たちについてページ
アクセス
-------------------------------------------*/



.access-flex{
  display: flex;
  gap: 50px;
  justify-content: center;
 padding-top: 120px;
  margin-bottom: 450px;
  
}


/* 会社概要テーブル */
.access-table{
  width: 30%;
  border-collapse: collapse;
  }
  
  .access-table th,
  .access-table td {
   border-bottom: 1px solid #5D5B5A;
  /* padding: 2px; */
  text-align: left;
  }
  
  .access-table th {
  font-weight: bold;
  /* background-color: #dedede;  */
  }
/* 会社概要テーブル 　ここまで*/











/* バックグランドイメージ */
.access-flex{
  position: relative;
 
}

.access-flex::before {
  content: "";
  display: block;
  background-color: rgba(176, 255, 199, 0.28);
  width: 100%;
  height: 105%;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: -1;
  border-radius:0;
}
/* バックグランドイメージ  ここまで*/


/*-------------------------------------------
サービスページ
ページ内リンク
-------------------------------------------*/






/*-------------------------------------------
サービスページ
認知症・精神科訪問看護とは？
-------------------------------------------*/


/* 導入 */
#visiting-nursing {
  /* position: relative; */
  margin-bottom: 250px;
}

.visiting-nursing-container {
  text-align: center;
	display: block;
 
}


.visiting-nursing-description{
  text-align: left;
	display: inline-block;
  width:70%;
}

/* バックグランドイメージ ここから*/

.visiting-nursing-container{
  position: relative;
  
}

.visiting-nursing-container::before {
    content: "";
    display: block;
    background-color: rgba(176, 255, 199, 0.28);
    width: 100%;
    height: 133%;
    position: absolute;
    top: -12%;
    left: 0%;
    z-index: -1;
    border-radius: 0;
}

/* バックグランドイメージ ここまで*/


/*-------------------------------------------
サービスページ
サービス内容
-------------------------------------------*/
#service {
  /* position: relative; */
  margin-bottom: 250px;
  
}


.service-container{
text-align: center;
display: block;
}

.speech-bubble{
  margin-bottom: 150px;
  text-align: center;
}


.worries{
  margin-bottom: 150px;
  text-align: center;
   margin-bottom: 150px;
}


.emphasis-message{
 margin-bottom: 150px;
}

.target-disease-container{
   margin-bottom: 150px;
}



/* 青い吹き出し　ここから */
.speech-bubble {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  background: #CEE4E5;
  border-radius: 20px;
  margin-bottom: 150px;
}

.speech-bubble:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #CEE4E5;
}

.speech-bubble p {
  margin: 0;
  padding: 0;
}

/* 青い吹き出し　ここまで */




/* ボーダーライン 赤　ここから*/
.border-bottom-text-title {
    padding: 0.2rem;
    margin-bottom: 50px;
    text-align: center;
    font-size: 50px;
    ;
}
.emphasis-text-title{
    font-size: clamp(25px, 2.5vw, 36px);
    /* 基準値36pxpx ÷ 画面幅1440 × 100 */

}


.border-bottom-r{
    background: linear-gradient(transparent 60%, #FFAEAE 60%);
    border-radius: 80% 50% 60% 5%/80% 75% 15% 75%;
    
}




/* ボーダーライン 赤　ここまで*/

/* ドット線 上下 ここから*/

.dotted-line-sandwich-g{
  border-bottom: 10px dotted #A0E0A6; /* 線の太さ1px、点線、黒色 */
  border-top: 10px dotted #A0E0A6;
  padding: 10px 0;
}
.dotted-line-sandwich-b{
  border-bottom: 10px dotted #92D2DC; /* 線の太さ1px、点線、黒色 */
  border-top: 10px dotted #92D2DC; 
  padding: 10px 0;
}
.dotted-line-sandwich-or{
  border-bottom: 10px dotted #FFC874; /* 線の太さ1px、点線、黒色 */
  border-top: 10px dotted #FFC874;
   padding: 10px 0;
}

/* ドット線 上下 ここまで*/



/* 丸いフレーム　青　 ここから*/

.target-disease-flex{
   display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: center;
 gap:20px;
 margin-bottom: 50px;
display: inline-flex;
width: 1080px; 

}

.round-frame-b{
 

    line-height: 200px;
    background-color:#9ED3DD;
    border-radius: 50%;
    text-align: center;
    width:200px;/* 横幅を5等分 */
   
   }
  






/* 丸いフレーム　青　 ここまで*/


/* △　三角矢印　ここから */



.triangle {
    background: #FFC874;
    height: calc(tan(60deg) * 60px / 2);
    width: 30%;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: relative;
    left: 35%;
    margin-top: 20px;
    margin-bottom: 80px;
}

/* △　三角矢印　ここまで */


.nursing-contents-li{
  
}

.nursing-contents-li li{
 margin-bottom: 20px;
 
}

/* バックグランドカラー　ここから*/

.nursing-contents-box-flex{
  display: flex;
 flex-wrap: wrap;
 /* justify-content: flex-start; */
 /* text-align: center; */
gap:1%;
margin-bottom: 0px;
display: inline-flex;
max-width: 1410px;
justify-content: center;
}

.nursing-contents-text-title{
  position: relative;
  top: -30px;
  margin-bottom: 10px;
}

.nursing-contents{
  position: relative;
  line-height: 1;
  text-align: left;
 padding: 20px;
 margin-bottom: 100px;
 background-color:#FFDEAB;
 width: 32%;
 height: 250px;
 border-radius: 20px;
}


/* バックグランドカラー　ここまで */


/* チェックマーク　ここから */
.others-contents-li li,
.nursing-contents-li li{
  position: relative;
  padding-left: 15px;
  margin-left: 10px;
}


.others-contents-li li::before,
.nursing-contents-li li::before{
content: "";
position: absolute;
top: .1em;
left: 0;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
width: 5px;
height: 10px;
border-right: 3px solid #8b6b4e;
border-bottom: 3px solid #8b6b4e;
}
/* チェックマーク　ここまで */

/*ラインフレーム　ここから */
.others {
  border:10px solid  #FFDEAB;
  border-radius: 20px;
  padding: 40px;
  max-width: 1410px;
  text-align: center;
  display:inline-block;
  background-color: #FFFBF4;
}

 .others-flex{
  gap:50px;
  /* justify-content: center; */
 justify-content: space-evenly;
 }


/*ラインフレーム　ここまで */

/* チェックマーク　ここから */
.others-contents-li li{
  position: relative;
  padding-left: 15px;
  margin-left: 10px;
}


.others-contents-li li::before{
content: "";
position: absolute;
top: .1em;
left: 0;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
width: 5px;
height: 10px;
border-right: 3px solid #8b6b4e;
border-bottom: 3px solid #8b6b4e;
top: 20px;
}
/* チェックマーク　ここまで */

.others-text-title{
  text-align: left;
}
.others-contents-li{
  text-align: left;
}
.others-description{
  margin-bottom: 0;
}


/* こんな方に選ばれている　導入*/
.center{
  text-align: center;
  display: block;
}

.center .description{
  display: inline-block;
  text-align: left;
}



/* 折り返し　フレックスボックス　３カラム */


.selected-flex{
  display: flex;
  flex-wrap: wrap;
 max-width: 1410px;
 display: inline-flex;
 justify-content: center;
}
.selected-point-list{
  width: 30%;
 margin-bottom: 40px;
 
}



/*-------------------------------------------
サービスページ
選ばれる理由
-------------------------------------------*/

/* バックグランドカラー　ここから*/

.selected-flex{
  display: flex;
 flex-wrap: wrap;
 justify-content: center;
 max-width: 1400px;
}


.selected-point-list{
  width: 30%;
}
/* バックグランドカラー　ここまで */



/*-------------------------------------------
こんな方に選ばれています
タイトル付きフレーム
-------------------------------------------*/

.selected-text-sub-title{
  margin: 0 20px;
  line-height: 2;
    font-size: clamp(20px, 1.7vw, 25px);
  /* 基準値24px ÷ 画面幅1440 × 100 */
  font-weight: 600;
  margin-bottom: 0px;
}


.selected-flex{
  justify-content: flex-start;
  margin: 0 auto;
  max-width: 1400px;
  display: flex;
  gap: 70px;
  margin-bottom: 250px;
  
}


.selected-title-simpleframe-g {
  max-width: 33%;
  /* height:640px; */
  height: auto;
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  border-radius: 20px;
  border: solid 10px;
  /* position: relative; */
  margin:0px;
  border-color: #A0E0A6;
  
}

.selected-title-simpleframe-g .text-title {
  padding: 20px 4px 4px 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 10px 10px 0 0;
  width: 100%;
  height: 130px;
  place-items: center;
  background: #A0E0A6;
}


.selected-title-simpleframe-g p{
  padding: 15px 20px;
  margin: 0;
  text-align: left;
  line-height: 2;

}
.line-height-15{
  line-height: 1.5;
}








/*-------------------------------------------
サービスページ
ご利用者様の声
-------------------------------------------*/
#voice{
  margin-bottom: 250px;
}


.real-voice{
  text-align: center;
}

.episode-flex{
  justify-content: center;
  gap:20px;
}



.episode{
  border: 10px solid #92D2DC;
  background-color: #f1f1f1;
  border-radius: 20px;
  /*width: 450px; */
  padding: 20px;
}

.episode-title {
  font-size: clamp(20px, 1.7vw, 25px);
  /* 基準値24px ÷ 画面幅1440 × 100 */
  font-weight: 600;
  
}


/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto;
}

.slider-episode {
    width:30vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}

.slider .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/*==================================================
スライダーのためのcss ここまで
===================================*/


/* バックグランドイメージ　ここから */
#voice{
  position: relative;
}

#voice::after {
    content: "";
    display: block;
    background-image: url(../img/common/colorful--watercolor.png);
    width: 150%;
    height: 150%;
    position: absolute;
    top: 0%;
    left: 15%;
    z-index: -1;
    background-size: contain;
}

/* バックグランドイメージ　ここまで */


/*-------------------------------------------
サービスページ
ご利用について
-------------------------------------------*/
#how{
  margin-bottom: 250px;
}
.how-overlap{
  margin-left: 100px;
}

.overlap-text-title{
  text-align: center;
  margin-bottom: 50px;
  margin-top: 50px;
}

 .how-text-title{
  margin-bottom: 0px;
 }

 .overlap-container-description{
  line-height: 2;
  padding-left: 50px;
 }


/* ご利用の流れ* 　
/* 矢印 〇ここから*/

.how-round-1,
.how-round-2,
.how-round-3,
.how-round-4{
  position: relative;
}

.how-round-1::before,
.how-round-2::before,
.how-round-3::before,
.how-round-4::before{
  content: "";
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  z-index: 20;
  left: -60px;
  top: 25px;
}

.how-round-1::before{
   background-color: #FFEDD2;
}
.how-round-2::before{
  background-color: #FFE7C3;
}

.how-round-3::before{
  background-color: #FFD697;
}
.how-round-4::before{
  background-color: #FFC874;
}


/* 矢印　ここから*/
.overlap-container{
  position: relative;
}

.overlap-arrow{
  background-color: #5D5B5A;
  width: 1px;
  height: 95%;
  display: block;
  position: absolute;
  top: 30px;
  left: -42px;
}

.overlap-arrow::before{
content: '';
display: block;
height: 10px;
width: 1px;
background-color: #5D5B5A;
position: absolute;
bottom: 0;
left: 0;
rotate: 45deg;
transform-origin: center bottom;
}

.overlap-arrow::after{
content: '';
display: block;
height: 10px;
width: 1px;
background-color:#5D5B5A ;
position: absolute;
bottom: 0;
left: 0;
rotate: -45deg;
transform-origin: center bottom;
}
/* 矢印 ここまで*/

/* ボーダーライン オレンジ　ここから*/

.border-bottom-text-title-or {
    padding: 0.2rem;
    margin-bottom: 20px;
    text-align: center;
    /* font-size: 50px; */
    display: block;
    text-align: left;
}

.border-bottom-or{
    background: linear-gradient(transparent 60%, #FFC874 60%);
    border-radius: 80% 50% 60% 5%/80% 75% 15% 75%;
}


/* ボーダーライン オレンジ  ここまで*/

/*-------------------------------------------
サービスページ
訪問エリア
-------------------------------------------*/
#access{
  margin-bottom: 250px;
  
}




.area-img{
 text-align: center;
 margin-bottom: 250px;
}
.area-image{
width: 80%;
  
}



/*-------------------------------------------
サービスページ
よくある質問
-------------------------------------------*/
#faq{
  margin-bottom: 350px;
  
}


.faq-container{
  display: block;
  text-align: center;
}
.faq-description{
  display: inline-block;
  text-align: left;

}

.faq-list-item-q .description{
  margin-bottom: 0;
  margin-right: 50px;
}








/* 質問　アコーディオン */

.faq-list {
  max-width: 1280px;
  padding: 0 20px;
  margin: 0 auto 120px;
}
.faq-list-item {
  border-top: solid 1px #5D5B5A;
  text-align: left;
}
.faq-list-item:last-child {
  border-bottom: solid 1px #5D5B5A;
}



.faq-list-item-q {
  display: flex;
  cursor: pointer;
  /* font-size: 15px; */
  line-height: 1.8;
  padding: 40px 0;
  position: relative;
}
.faq-list-item-q::before {
  content: "";
  width: 15px;
  height: 1px;
  background-color: #5D5B5A;
  position: absolute;
  top: 55px;
  right: 0;
  margin-right: 20px;
}
.faq-list-item-q::after {
  content: "";
  width: 1px;
  height: 15px;
  background-color: #5D5B5A;
  position: absolute;
  top: 48px;
  right: 6px;
  left: auto;
  margin-right: 20px;
}
.faq-list-item-q.active::after {
  content: none;
}




.faq-list-item-q:hover {
  background-color: #dbefee;
  opacity: 1;
  font-weight: 900;
}

.faq-list-item-q:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}




.question {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: #5D5B5A;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  margin-right: 100px;
  margin-left: 20px;
}
.faq-list-item-a {
  display: flex;
  /* font-size: 15px; */
  padding-bottom: 40px;
  line-height: 3;
  margin-right: 50px;
}
.faq-list-item-a a {
  text-decoration: underline;
}
.answer {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: solid 1px #5D5B5A;
  border-radius: 50%;
  font-size: 14px;
  margin-right: 100px;
  margin-top: 11px;
  margin-left: 20px;
}


/*-------------------------------------------
実例紹介ページ

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

.works-container-section{
  margin-bottom: 450px;
}


.works-container{
  gap: 50px;
  margin: 250px 100px;
  justify-content: center;
  
}
.works-img{
  width: 40%;
}

.works-img img{
  border: solid 10px #A0E0A6;
  border-radius: 20px;
   
}

.profile{
position: relative;
  top: 100px;
  width: 50%;
  line-height: 2.5;
}
.works-text-title{
  margin-bottom: 0px;
}

.profile::before {
    content: "";
    display: block;
    background-color: rgba(176, 255, 199, 0.28);
    width: 150%;
    height: 107%;
    position: absolute;
    top: -7%;
    left: -29%;
    z-index: -1;
    border-radius: 20px;
}





/*-------------------------------------------
スタッフ紹介ページ

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

.staff-pagelink li {
    width: calc(100% / 2);
}

#nurse{
  margin-bottom: 250px;
}

.staff-about-container{
  gap: 50px;
  margin: 250px 100px;
  justify-content: center;
}

.staff-img{
  width: 30%;
}

.staff-img img{
  border: solid 10px #A0E0A6;
  border-radius: 20px;
   
}

.staff-message{
position: relative;
  top: 100px;
  width: 50%;
  line-height: 2.5;
}



.staff-message::before {
    content: "";
    display: block;
    background-color: rgba(176, 255, 199, 0.28);
    width: 150%;
    height: 107%;
    position: absolute;
    top: -7%;
    left: -29%;
    z-index: -1;
    border-radius: 20px;
}


#occupational-therapist{
  margin-bottom: 450px;
}


.news-overlap-container{
  margin-bottom: 450px;
  margin-top: 100px;

}

.staff-name{
  line-height: 1.7;
}


/*-------------------------------------------
お知らせページ

-------------------------------------------*/
/* タブ */


/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
  justify-content: center;
  margin-top: 50px;
}
.tab li a{
	display: block;
	background:#FFD574;
	margin:0 2px;
	padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.tab li a.on{
	background:#fff;
}


/*エリアの表示非表示と形状*/
.area {
	
	/* background:#fff; */
	padding:70px 40px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*  ページ送りボタン  */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination-Item-Link {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  background: #fff;
  border: solid 2px #5D5B5A;
  font-size: 14px;
  color: #5D5B5A;
  font-weight: bold;
  transition: all 0.15s linear;
}
.pagination-Item-Link-Icon {
  width: 20px;
}
.pagination-Item-Link.isActive {
  background: #5D5B5A;
  color: #fff;
  pointer-events: none;
}
.pagination-Item-Link:not(.isActive):hover {
  background: #5D5B5A;
  color: #fff;
}
.pagination > * + * {
  margin-left: 8px;
}



/*-------------------------------------------
個別お知らせページ

-------------------------------------------*/
.page-back{
  margin-top: 50px;
  margin-left: 20%;
}
.single-page{
  margin-top: 50px;
}


/*-------------------------------------------
お問い合わせページ

-------------------------------------------*/
.tell-container-flex{
  justify-content: space-evenly;
      margin-top: 100px;
    margin-bottom: 100px;
  align-items: center;
      gap: 20px;
 
}


.tell-container{
  border: 10px solid #FF9C9C;
  border-radius: 20px;
  display: block;
  align-items: center;
  padding: 20px;
   background-color: #f1f1f1;
}

.apply-btn{
  margin-bottom: 50px;
}
.tell-description{
  margin-bottom: 0;
}
.tell-text-title{
  margin-bottom: 0;
  font-size: 40px;
}
.contact-tell-img{
  max-width: 30px;
  height: 30px;
  margin-top: 47px;
  margin-right: 10px;
}
.contact-message{
  display: block;
  text-align: center;
}
.contact-message-description {
    text-align: left;
    margin-bottom: 130px;
    display: inline-block;
}



/*-------------------------------------------
お申込みボタン
-------------------------------------------*/

.apply-btn {
  max-width: 600px;
  background-color: #FFD574;
  border-radius: 10px;
  display: block;
  /* border: solid 1px #1f1f1f; */
  font-size: clamp(20px, 1.7vw, 24px);
  /* 基準値24px ÷ 画面幅1440 × 100 */
  padding: 0px 30px;
  text-align: left;
  position: relative;
  z-index: 10;
}

.apply-btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #ffb300;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
  border-radius: 10px;
}

.apply-btn:hover {
  color: #fff;
  opacity: 1;
  
}

.apply-btn:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}



/*-------------------------------------------
エントリーボタン
-------------------------------------------*/

.recruit-btn {
  max-width: 600px;
  background-color: #92e8f9;
  border-radius: 10px;
  display: block;
  /* border: solid 1px #1f1f1f; */
  font-size: clamp(20px, 1.7vw, 24px);
  /* 基準値24px ÷ 画面幅1440 × 100 */
  padding: 0px 30px;
  text-align: left;
  position: relative;
  z-index: 10;
}

.recruit-btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #39deff;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
  border-radius: 10px;
}

.recruit-btn:hover {
  color: #fff;
  opacity: 1;
 
}

.recruit-btn:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

/*-------------------------------------------
グーグルフォーム
-------------------------------------------*/


.google-foam {
  margin: 0 auto;
  margin-bottom: 450px;
  width: 700px;
  display: block;
}





/*-------------------------------------------
お問合せフォーム
-------------------------------------------*/

/* フォーム全体の設定 */

.form-area {
  max-width: 1280px;
  padding: 0 20px;
  margin: 0 auto 120px;
}
.form-area .form-title {
  border-bottom: solid 1px #5D5B5A;
  font-weight: 500;
  padding-bottom: 10px;
  margin-bottom: 30px;
  text-align: center;
}
.form-area dl {
  margin-bottom: 40px;
}
.form-area .item {
  display: flex;
  /* font-size: 15px; */
  margin-bottom: 10px;
}


/* ラベルの設定 */
.form-area .item dt {
  width: 450px;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  /* background-color: #f5f5f5; */
  /* padding: 30px 20px; */
}
.form-area .item dt .require {
  /* border: solid 1px #df4440; */
  color: #df4440;
  /* font-size: 10px; */
  /* font-weight: 500; */
  padding: 2px 30px 2px 0;

}


/* 入力欄の設定 */
.form-area .item dd {
  width: calc(100% - 250px);
  display: flex;
  align-items: center;
  padding: 0 40px;
}
.form-area .item dd.checkbox-group {
  display: flex;
  align-items: center;
}
.form-area .item dd .checkbox-item {
  margin-right: 40px;
}
.form-area .item dd input[type="text"],
.form-area .item dd input[type="email"],
.form-area .item dd input[type="tel"],
.form-area .item dd input[type="post-code"],
.form-area .item dd input[type="address"],
.form-area .item dd select {
  width: 100%;
  border: solid 1px #ccc;
  border-radius: 10px;
  padding:10px 10px;
  background-color: #f1f1f1;
}
.form-area .item dd input[type="checkbox"] {
  margin-right: 5px;
}
.form-area .item dd textarea {
  width: 100%;
  border: solid 1px #ccc;
  border-radius: 10px;
  padding: 5px 10px 5px 10px;
   background-color: #f1f1f1;
}






/* スクロールボックスの設定 */
.form-area .privacy-policy {
  font-size: 15px;
  margin-bottom: 40px;
}
.form-area .privacy-policy .privacy-text {
  max-width: 640px;
  height: 200px;
  border: solid 1px #ccc;
  border-radius: 10px;
  padding: 40px 20px;
  margin: 0 auto 30px;
  overflow-x: hidden;
  background-color: #f1f1f1;
}
.form-area .privacy-policy .privacy-text .privacy-title {
  font-weight: 500;
  margin-bottom: 30px;
  text-align: center;
}
.form-area .privacy-policy .privacy-text ol {
  line-height: 2;
  margin-top: 30px;
}
.form-area .privacy-policy .privacy-text ol li {
  margin-bottom: 20px;
}
.form-area .privacy-policy .privacy-item {
  text-align: center;
}

/* 送信ボタンの設定 */
.form-area .btn-submit {
  width: 100px;
  height: 40px;
  background-color: #5D5B5A;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin: 0 auto;
  border-radius: 10px;
  margin-bottom: 450px;
}




/*-------------------------------------------
ページトップリンク
-------------------------------------------*/




.page-top p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #5D5B5A;
}

.page-top {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 20px;
  bottom: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  border: 0;
  background: none;
  transition: .2s;
  z-index: 100;
}

.page-top p{
  writing-mode: vertical-rl;
  text-decoration: none;
  text-transform: uppercase;
  height: 85px;
  margin: 0;
  letter-spacing: 5px;
  text-align: right;
}

.page-top p:before {
    content: "";
    position: absolute;
    top: 2px;
    right: -5px;
    width: 2px;
    height: 20px;
    background: #5D5B5A;
    transform: skewX(-150deg);
}

.page-top p:after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 2px;
    height: 85px;
    background: #5D5B5A;
}

.is-active {
  opacity: 1;
  visibility: visible;
}




/*******

/*リンクの形状
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	/* background:#5D5B5A; *
  background:#ffc76e;
	border-radius: 10px 0 0 10px;
	width: 60px;
	height: 60px;
	/*  color: #fff;*
 color: #5D5B5A; 
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
  font-size: 13px;
}

#page-top a:hover{
	/* background: #777;*
  background-color: #ffa616;
  color: #fff;
}




************/

/*リンクを右下に固定*/

#page-top {
	position: fixed;
	right: 0px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateX(100px);
  z-index: 100;
}

/*　左の動き　*/

#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}

/*-------------------------------------------
右側に追従する　コンタクト・リクルートボタン
-------------------------------------------*/

.fixed_btn{
writing-mode: vertical-rl; 
display: flex;
gap: 30px;
position: fixed;
right: 0px;
top: 50%;
translate: 0 -50%;
z-index: 100;
}
.fixed_btn-active{
opacity: 0;
transform: translateX(100px);
z-index: 100;
}
/*　左の動き　*/
.fixed_btn.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

.fixed_btn.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}

@keyframes upAnime{
  from {
    opacity: 0;
	transform: translateY(100%);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}


/* お問い合わせボタン*/
.contact-fixed_btn a {
  /* max-width: 250px; */
  width: 100%;
  background-color: #FFD574;
  border-radius: 10px 0 0 10px;
  display: block;
  font-size: 17px;

  text-align: center;
  position: relative;
  z-index: 10;
  padding: 10px 0px;
  
}

.contact-fixed_btn a::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #ffb300;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
  border-radius: 10px 0 0 10px;

}

.contact-fixed_btn a:hover {
  color: #fff;
  opacity: 1;
}

.contact-fixed_btn a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}


/*リクルートボタン*/

.recruit-fixed_btn a {
  /* max-width: 250px; */
  width: 100%;
  background-color: #92e8f9;
  border-radius: 10px 0 0 10px;
  display: block;
  /* border: solid 1px #1f1f1f; */
  font-size: 17px;
  text-align: center;
  position: relative;
  z-index: 10;
  padding: 10px 0px;
}

.recruit-fixed_btn a::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #39deff;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
  border-radius: 10px 0 0 10px;

}

.recruit-fixed_btn a:hover {
  color: #fff;
  opacity: 1;
}

.recruit-fixed_btn a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}





/*-------------------------------------------
右側に追従する　コンタクト・リクルートボタン ここまで
-------------------------------------------*/


/*----------------------------------
スマートフォン　ここから
----------------------------------*/

@media screen and (max-width: 767px) {
  main {
    overflow-x: hidden;
  }

  body{
line-height: 2;
  }

.line-height-20{
  line-height: 2;
}



.line-height-10{
  line-height: 1;
}


.profile,
.text-title,
.works-text-title,
.how-text-title,
  .emphasis-message,
.emphasis-text-title,
.description-title ,
  .description{
    line-height: 2;
  }
  .faq-q-description{
    margin-bottom: 0;
  }

  .pagination,
.faq-description,
  .margin-top-20px{
    margin-top: 20px;
  }

.staff-about-container{
   margin: 20px 20px;
  }


.margin-bottom-20px{
  margin-bottom: 20px;
  }


  .logo-flex,
  .border-bottom-text-title,
  .point-text-title,
.nursing-contents,
  .representative-img,
  .page-title-area,
  .section-title-ja,
  .description,
  .text-title{
    margin-bottom: 20px;
  }

 .staff-description,
.pagination,
.features-container,
.emphasis-message,
.worries,
.speech-bubble,
.man-worries-image{
  margin-bottom: 50px;
}


#nurse,
.area-img,
.selected-flex,
#service,
#visiting-nursing,
 .access-flex,
  .news,
  .staff,
  .works,
  .company,
  .service{
  margin-bottom: 100px;
  }

  .news-overlap-container,
  #occupational-therapist,
  .works-container-section,
   #faq{
    margin-bottom: 250px;
   }

 
  .subcatchphrase,
  .catchphrase,
  .staff-message,
  .profile,
  .page-title-area,
  .overlap-overview,
  .overlap,
  .works-container-flex {
    padding-bottom: 0;
    position: initial;
  }

.visiting-nursing-point-title-simpleframe-g,
  .works-img,
  .selected-flex,
  .dotted-line-sandwich-g,
 .point-contents-box,
  .page-header-img,
  .page-description-area,
  .page-title-area,
  .contact-message-description,
  .recruit-btn,
  .apply-btn,
  .tell-container,
  .logo-flex,
  .title-simpleframe-description,
  .pagination,
  .profile,
  .faq-description,
  .visiting-nursing-description,
  .overlap-inner,
  .point3-section,
  .point2-section,
  .point1-section,
  .features-description,
  .representative-img,
  .representative-message-description,
  .philosophy-description,
  .tex-hought,
  /* .pagelink, */
  .page-header-flex,
  .footer-area,
  .contact-cotainer,
  .overlap-overview:after,
  .overlap-overview,
  .overlap:after,
  .overlap,
  .staff-container,
  .works-container-flex,
  .service-container,
  .company-text,
  .catch  {
    margin-left: 20px;
    margin-right: 20px;
}

.margin-0-20px-0-20px{
   margin-left: 20px;
  margin-right: 20px;
}


.others{
  padding: 20px;
}
.features-section-title span {
    padding: 0; 
}

.logo-flex {
  padding-bottom: initial;
}


.philosophy-description,
.representative-message-description,
.philosophy-img,
.sp-download-contact-btn,
.sp-contact-btn,
.works-list,
 .works-description {
  max-width: initial;
  }

.works-img,
.point3-section,
.point2-section,
.point1-section,
.download-contact-btn,  
.contact-description,
.staff-text,
.works-container-flex,
.contact-section,
.news-section,
.staff-section,
.works-section,
.service-section,
.logo-flex,
.staff-message,
.profile,
.nursing-contents,
.visiting-nursing-description{
  width: initial;
}


.page-header-flex {
    width: inherit;

}
.nursing-contents {
    height: auto;
}

 


 .center-left {
    text-align: left;
    display: inline-block;
  }


  .point3-section-title,
  .point2-section-title,
  .point1-section-title,
  .download-contact-btn,
  .staff-btn,
  .staff-text{
   margin-left: 0px;
  margin-right: 0px;
}


  .flex {
    flex-direction: column;
  }

  .news-tag-flex {
    display: contents;
  }


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



/* セクション位置の指定 */

.section{
  
 margin-top: 22px;
 margin-left: 100px;
 /*
 position: relative;
 left: 100px;
  top: 20px; */
  

}




  /* セクションタイトルフォントの指定 */


  .section-title-ja {
    font-size: 27px; 
    margin-left: -25px;
  }

  /* ローマ字の指定 */
  .section-title-en {
    font-size: 16px;


  }

  /* ロゴサイズの指定 */

  .logo-sp {
    /* width: clamp(200px, 21vw, 350px);*/
    /* position: relative; */
    display: block;
}

  .section-logo {
    position: static;
    left: 0px;
    z-index: -1;
  }

.section-logo-img {
  position: absolute;
  /* top: 10px; */
    width: 100px;
   
}







/*-------------------------------------------
ページトップリンク
-------------------------------------------*/
.contact-fixed_btn a::before,
.recruit-fixed_btn a::before{
 border-radius: 0;
}
 

  


  
.contact-fixed_btn a {
 /*  border-radius: 10px; */
 border-radius: 0px;
  padding: 10px 5px;
  width: 100%;
  /* border-right:2px solid white; */
}
.recruit-fixed_btn a{
  /*  border-radius: 10px; */
  border-radius: 0px;
  padding: 10px 5px;
  width: 100%;

}


.fixed_btn {
  writing-mode: initial;
  right: 0px;
  top: unset;
  width: 100%;
  /* width: 103%; */
  justify-content: space-around;
  /* gap: 5px; */
  gap: 0;
  bottom: -23px;
    }

#page-top {
	margin-bottom:100px;
  margin-bottom: 0;
}


.page-top {
  bottom: 92px;
 
}

.contact-fixed_btn{
  width: 48%;
}

.recruit-fixed_btn{
  width: 48%; 
}

/* お問い合わせボタン・リクルートボタン　下から*/
.fixed_btn-active.RightMove{
  opacity: 0;
  transform: translateY(0);
  transform: translateX(0);
  opacity: 1;
  bottom:-100px;
  z-index: 100;
  transition: 1s;
  }
  .fixed_btn,.fixed_btn-active.LeftMove{
    opacity: 0;
    transform: translateY(100%);
    transform: translateX(0);
    /* bottom:10px; */
    opacity: 1;
    z-index: 100;
    transition: 1s;
    }
  
/* お問い合わせボタン・リクルートボタン　ここまで*/

/* ページトップボタン　下から*/
#page-top.RightMove{
  opacity: 0;
  transform: translateY(0);
  transform: translateX(0);
  opacity: 1;
  bottom:-100px;
  z-index: 100;
  transition: 1s;
  }
  #page-top.LeftMove{
    opacity: 0;
    transform: translateY(100%);
    transform: translateX(0);
    bottom:10px;
    opacity: 1;
    z-index: 100;
    transition: 1s;
    }
  
/* ページトップボタン　下から　ここまで*/



  .fixed_btn.LeftMove,.fixed_btn.RightMove,#page-top.RightMove,#page-top.LeftMove{
    animation: none;
  }












  /*-------------------------------------------
  ボタン
  -------------------------------------------*/


  .btn {
    margin: 0 auto;
    padding: 10px 0;

  }

  .contact-btn {}


  /*-------------------------------------------
 少しずらしたボックス
-------------------------------------------*/




  .overlap-overview:after,
  .overlap:after{
    display:none;
  }

  .others,
  .overlap-overvie,
  .overlap:after{
    background-color: #FFFBF4;
  }

  /*-------------------------------------------
  トップページ　ヘッダー
  -------------------------------------------*/


 
  .upper-menu {}

  .pc-none {
    display: block;
  }

  .sp-none {
    display: none;
  }

 
.logo-sp-position{
        height: 50px;
        /* position: relative;
        top: 20px;
        left: 20px; */
        margin-top: 20px;
        margin-left: 20px;
}

  .hamburger-navi {
    height: 25px;
        position: fixed;
        top: 30px;
        right: 27px;
        width: 40px;
        border-radius: initial;
        z-index: 100;
}

.hamburger-navi .hamburger-navi-open{
  display: block;
  width: 60px;
}
.hamburger-navi .hamburger-navi-close{
  display: none;
  width: 60px;
}

.hamburger-navi.active .hamburger-navi-open{
  display: none;
}
.hamburger-navi.active .hamburger-navi-close{
  display: block;
}


.page-header {
    overflow: hidden;
    padding: 0 0 20px 0;
    height: auto;
    flex-direction: column-reverse;
    
}

  .bottom-menu {
    flex-direction: column;
    background-color: #FEF4E9;
    height: 1000px;
    padding-top: 30px;
  }


  .bottom {
    overflow: scroll;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: 80%;
    height: 100vh;
    transition: 0.5s;
    translate: -100%;
  }


  .bottom.active {
    translate: 0;

  }


  .upper {
    flex-direction: column;

  }

  .upper-menu {
    display: none;
  }

  .bottom-menu>.header-menu-item {
    width: 80%;
    /* border-bottom: 3px solid #5D5B5A;*/
    border-bottom: none;
    border-left: none;
    text-align: left;
    margin-bottom: 15px;

  }

  .header-menu-item-end {
    border-right: none;
    margin-bottom: 60px;
  }



  /* ヘッダー　お問い合わせボタン*/
  .header-menu-contact-btn-sp a {
    width: 250px;
    background-color: #FFD574;
    border-radius: 10px;
    display: block;
    /* border: solid 1px #1f1f1f; */
    font-size: clamp(20px, 1.4vw, 23px);
    /* 基準値20px ÷ 画面幅1440 × 100 */

    text-align: center;
    position: relative;
    z-index: 10;

    font-weight: 600;
    padding: 10px 30px;
    margin: 50px 0;
  }

  .header-menu-contact-btn-sp a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    background-color: #ffb300;
    transform-origin: 100% 50%;
    transform: scaleX(0);
    transition: transform ease 0.3s;
    border-radius: 10px;

  }

  .header-menu-contact-btn-sp a:hover {
    color: #fff;
    opacity: 1;
  }

  .header-menu-contact-btn-sp a:hover::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
  }

  /* ヘッダー　リクルートボタン*/
  .header-menu-recruit-btn-sp a {
    width: 250px;
    background-color: #92e8f9;
    border-radius: 10px;
    display: block;
    /* border: solid 1px #1f1f1f; */
    font-size: clamp(20px, 1.4vw, 23px);
    /* 基準値20px ÷ 画面幅1440 × 100 */

    text-align: center;
    position: relative;
    z-index: 10;

    font-weight: 600;
    padding: 10px 30px;
    margin-bottom: 50px
  }

  .header-menu-recruit-btn-sp a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    background-color: #39deff;
    transform-origin: 100% 50%;
    transform: scaleX(0);
    transition: transform ease 0.3s;
    border-radius: 10px;

  }

  .header-menu-recruit-btn-sp a:hover {
    color: #fff;
    opacity: 1;
  }

  .header-menu-recruit-btn-sp a:hover::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
  }


  /*-------------------------------------------
  トップページ　ドロップダウンメニュー
  -------------------------------------------*/

  .menu-second-li:not(:first-child)::before{
    content: none;
  }
  .menu-first {
    align-items: left;
  }

  .menu-second {
    display: block;
    position: relative;
    top: 0;
    background-color: transparent;
    padding: 0;
    margin-left: 40px;
    margin-top: 10px;


  }

  
  .menu-second-li {
    height: 45px;
    font-size:15px;
    margin-bottom: 3px;
  }

  .menu-first span::after {
    display: none;
  }
 



  /*-------------------------------------------
タイトル付きフレーム
-------------------------------------------*/

  /*-------------------------------------------
   トップページ　メインビジュアル
-------------------------------------------*/

  .mainvisual {
    height: 600px;
    position: initial;
    /* margin-top: 90px; */
  }

  .fade-img {
    margin-top: 30px;
    position: relative;


  }

  .fade-img img {
    scale: 1.5;
    transform-origin: center 0;
    
    /* filter: opacity(50%); */
  }

  .fade-img li {}


.catchphrase,
.subcatchphrase {
  /* text-shadow: 1px 1px 0.5px #fff; */
}

.catch{
  text-align: center;
  position: absolute;
  top: 20%;
margin-top: 20%;

}
.catchphrase {
  margin-bottom: 20px;
  /* top: 150px; */
 /*  font-weight: 600; */
  /* position: sticky; */
  /* text-align: center; */
  }

  .subcatchphrase {
    /* top: 300px; */
    /* font-weight: 700; */
     /*position: sticky;*/
    /* text-align: center; */
  }



  /*-------------------------------------------
  トップページ　私たちの思い
  -------------------------------------------*/
  .sp-flex-block {
    display: block
  }

  
  .company {
    padding-bottom: 0px
  }

  .company-container {
    align-items: center;
    gap: 0
  }

  /* バックグランドカラー */
  .company::before {
    top: 64px;
    left: 0;
  }

  .thought-image {
    width: 100%;
    border-radius: 0;
  }

  /* 水彩モチーフ */
  .company::after {

    width: 140%;


    top: 40%;
    left: -16%;

  }

  /* 水彩モチーフ ここまで*/



  /*-------------------------------------------
  トップページ　サービスについて
  -------------------------------------------*/
 
  .service-description {
  text-align: center;
  margin-left: auto;
  width: 100%;
}

  


  .servise-list {
    grid-template-columns: repeat(1, 250px);
    place-content: center;
  }



  .service::before {
    top: 64px;
    left: 0;
    border-radius: 0px;
  }





  .service::after {
    width: 400px;
    height: 400px;
    top: 1060px;
    right: -10px;

  }

  /* ラウンドモチーフ */
  .service::after {

    width: 160px;
    height: 160px;
    top: 700px;
    right: 20px;

  }

  /* ラウンドモチーフ ここまで*/




  /*-------------------------------------------
  トップページ　実例紹介
  -------------------------------------------*/
 


  .works::before {
    width: 100%;
    height: 100%;
    top: 64px;
    left: 0;
    border-radius: 0px;
  }

  .works-container {
    position: relative;


  }

  

  .works-container-flex {
    text-align: center;
    display: block;
   }

  .works-flex-text {
    text-align: left;
    display: inline-block;

  }

  .works-description {
    max-width: initial;
  }


  .works-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 25px;
    margin-top: 0px;
    margin-bottom: 40px;

  }

  .works-flex-text {
    flex-direction: column;
    gap: 0;

  }

  .works-text-title {
    margin-bottom: 20px;
  }



  .works-none {
    display: none;
  }

  .works-contener {
    background-image: url(../img/common/logo-section.png);
    padding-left: 62px;
    padding-bottom: 30px;
  }

  /*-------------------------------------------
めくる風フレーム
-------------------------------------------*/
  .works-list-simpleframe {
    max-width: fit-content;
    height: auto;
    position: relative;
    padding: 1rem;
    outline: 3px solid #A5D2E1;
    outline-offset: 2px;
    background-image: linear-gradient(-45deg, transparent 10px, #A5D2E1 10px);
    /* color: #212121; */
    overflow: hidden;
    border-radius: 20px;
    z-index: 20;
  }

  .works-list-simpleframe::before {
    position: absolute;
    content: '';
    right: 0px;
    bottom: 0px;
    border-width: 0px 0px 15px 15px;
    border-style: solid;
    border-color: transparent transparent transparent #A5D2E1;
    box-shadow: 0 0 5px #000;
  }

  .works-list-simpleframe p {
    line-height: 1.5;
  }

  /*-------------------------------------------
めくる風フレーム ここまで
-------------------------------------------*/
  /*-------------------------------------------
トップページ　スタッフ紹介
-------------------------------------------*/
 


  

  .staff-img-flex {
    gap: 0;
    margin-bottom: 60px;
  }

  .staff-img-flex img {
    height: auto;
    width: 33%;
    max-width: 100%;
    object-fit: contain;
    scale: 1;
  }

  

  .staff1 {
    translate: 10% -10%;
    z-index: 1.5;
  }

  .staff2 {
    translate: 0 10%;
    z-index: 1;
  }

  .staff3 {
    translate: -10% -10%;
    z-index: 2;
  }


  .staff::before {

    top:63px;
    left: 0;
    border-radius: 0px;
  }


      .staff::after {
        width: 1000px;
        /* height: 100%; */
        top: -130px;
        right: -200px;
        z-index: -10;
    }

.staff-btn{
  margin-bottom: 50px;
}
  /*-------------------------------------------
  トップページ　お知らせ
  -------------------------------------------*/
  .news {
    position: relative;
  }

  .overlap-overview,
  .overlap {
    padding: 0em;
    background-color: #FFFBF4;
  }
  .news-btn {
    margin: 50px auto;
    display: block;
  }

  .btn-page {
    margin-bottom: 0px;
    padding: 10px 20px;
  }

  .tag-news,
  .tag-seminar,
  .tag-event {
    position: relative;
    max-width: 100%;
  }

  .news-tag-flex {
    display: block;
    text-align: center
  }

  .dli-clock{
    bottom: 8px;
  }


  .news-tag-flex p {}

  /* ドット柄モチーフ */
 
    .news::before {
        width: 500px;
        height: 400px;
        position: absolute;
        top: -300px;
        right: 0;
        background-size: cover;
    }

  /* ドット柄モチーフ ここまで*/

  /*-------------------------------------------
  トップページ　お問い合わせ
  -------------------------------------------*/

  .contact {
    margin-bottom: 250px;
  }




  .contact-description {
    margin-left: 0;
    text-align: center;
    display: block;
  }



  .comtact-width {
    width: 100%;
  }

  .tell-img {
    max-width: 25px;
    height: 25px;
    margin-top: 25px;
    margin-right: 5px;
  }




  .tell-flex {
    flex-direction: row;
    display: inline-flex;
  }



  .contact-flex {
    margin: auto 10px;
    display: block;


  }

  .download-contact-btn {
    left: 0;

  }


  .contact::before {
    top: 65px;
    left: 0;
    border-radius: 0px;
  }
.contact-list{
  margin: 0 auto;
}
.sp-contact-list{
  display: block;
  text-align: center;
 
}
.sp-download-contact-btn,
.sp-contact-btn{
  display: inline-block;
 padding-top: 10px;
  padding-bottom: 10px;
}



  .title-simpleframe-description {}

  /* ラウンドモチーフ */
  .contact::after {
    width: 200px;
    height: 200px;
    top: -140px;
    right: 0px;
    left: initial;
    z-index: 10;
  }

  /* ラウンドモチーフ ここまで*/

  /*-------------------------------------------
タイトル付きフレーム
-------------------------------------------*/
  /* 電話 */
  .contact-title-simpleframe-tell {
    width: 100%;
    margin-bottom: 40px;
    height: auto;
    display: block;
    text-align: center;
  }

  .contact-title-simpleframe-tell .text-title {
   

  }



  .contact-title-simpleframe-tell p {
    padding: 15px 0px;
    margin: 0;
  }


  /* WEB */
  .contact-title-simpleframe-web {
    width: 100%;
    
  }

  .contact-title-simpleframe-web .text-title {

  }



  .contact-title-simpleframe-web p {

  }

  .download-contact-btn {
    margin-top: 40px;
    margin-left: 0px;
  }





  /*-------------------------------------------
  フッター
  -------------------------------------------*/
  #footer {
   padding: 50px 0%;

  }

  .footer-area {
    flex-direction: column-reverse;
    gap: 0%;
    
  }

  .info-area {
    width: 100%;
    margin-top: 10%;
    display: block;
    text-align: center;
  }



  .menu-area {
    width: 100%;
    justify-content: center;
    margin-bottom: 40px;
    justify-content: space-evenly;
    
  }


  .footer-image img {
    width: auto;
    height: 176px;
    object-fit: cover;
  }
  .info {
    text-align: left;
    display: inline-block;
}

 

  .menu-title {

    margin-bottom: 6%;
  }

  .menu-list li {

    margin-bottom: 6%;
  }

.left-10{
  padding-left: 10%;
}


  /*-------------------------------------------
私たちについてページ
ページヘッダー
-------------------------------------------*/
#header .navi .upper {
  display: block;
  margin-bottom: 5px;
  padding-top: 1px;
}
.page-header-img {
    /* position: relative; */
    text-align: center;
}

.page-header-img img {
   width: 45%;
   position: relative;

}
.page-header-flex {
  align-items: initial;
  /* position: absolute; */
  /* left: -13%; 
  align-items: flex-start;
  margin-left: clamp(2%, 0.1vw, 3%);
  /* 基準値10% ÷ 画面幅1440 × 100 */
  
}
.page-description {
  bottom: 0;
}

.page-description-area{
  /* width: max-content; */
}
.page-section-title-ja {
  /* font-size: clamp(20px, 3.4vw, 60px); /* 基準値48px ÷ 画面幅1440 × 100 */
  margin-bottom: 0px;
  margin-left: 0;
} 


.page-section-title-en {
  margin-left: 0;
}

/* 
.page-header-flex{
  background-image: url(/img/common/mainvisual.png);
}

/* 
.page-header .img {
position: relative;
/* left: 20%;
left: clamp(10%, 4vw, 30%);/* 基準値20% ÷ 画面幅1440 × 100 
}*/

  /*-------------------------------------------
私たちについてページ
ページ内リンク
-------------------------------------------*/


.pagelink {
  margin-top: 40px;
  /* justify-content: space-evenly; */
  gap:5px;
  flex-wrap: wrap;
  justify-content: flex-start;

}



/*-------------------------------------------
ページ内リンクボタン

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

.pagelink-btn {
  border: solid 0px #5D5B5A;
  border-radius: 20px;
  text-align: center;
  white-space: nowrap;
  width: 32%;
  margin: 0;
  margin-bottom: 20px;
  background-color: white;
  display: block;
  position: relative;
  z-index: 10;
 transition: 0.5s;
 overflow: hidden;
}
.pagelink-btn a{
  color: #5D5B5A;
}

.pagelink-btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #5D5B5A;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
  
}


.pagelink-btn:active{
  transform: scale(.8);
 }


.pagelink-btn a:hover {
  color: #ffffff;
  opacity: 1;
}

.pagelink-btn:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

.pagelink .pagelink-btn {
  border: solid 2px #5D5B5A;
  border-radius: 10px;
  text-align: center;
  white-space: nowrap;
  width: 32%;
  margin: 0;
  margin-bottom: 20px;
  background-color: white;
  display: block;
  position: relative;
  z-index: 10;
  transition: 0.5s;
  overflow: hidden;
  line-height: 3;
}



/*-------------------------------------------
私たちについてページ
私たちの思い
-------------------------------------------*/
 
  .thought-container {
    align-items: center;
    gap: 0;
    margin-bottom: 80px;
  }


.features-section-title {
  margin-bottom: 0px;
}



/* ドット柄モチーフ  縦に回転*/

.thought-container::after {
  content: "";
  display: block;
  background-image: url(../img/common/colorful-dotpattern.png);
  transform: rotate(90deg);
  width: 170%;
  height: 164%;
  position: absolute;
  bottom: -77%;
  left: -78%;
  z-index: -1;
  background-size: contain;
}

/*-------------------------------------------
私たちについてページ
経営理念
-------------------------------------------*/
#philosophy {
    margin-bottom: 80px;
}

.philosophy-container {
    align-items: center;
    gap: 0;
    margin-bottom: 80px;
}

.philosophy-img{
  width: 100%;
}
  .philosophy-image {
    border-radius: 0;
  }

/*　代表挨拶  */


.representative-message-description {
 
    max-width: 95%;
}
.representative-image{
  margin-bottom: 0;
}



/* 水彩モチーフ */

.representative-message::before {
    width: 160%;
    height: 160%;
    top: -3%;
    left: -26%;
}
 /* 水彩モチーフ ここまで*/


/*-------------------------------------------
私たちについてページ
特徴
-------------------------------------------*/
/* 特徴　導入 */
.features {
  margin-bottom: 80px;

}

.features-description {
    max-width: 95%;
}
.features-section-title-ja {
    /* left: -20%; */
}



/* ポイント共通部分  */
.point-container {
      text-align: left;
    margin-bottom: 100px;

}
.point1-section, .point3-section {
    left: 2%;
}
.contents-box{
  padding: 0;
  gap: 20px;
  /* align-items: center; */
}




/* ポイント */
.point-section-title{
  font-size: clamp(23px, 1.7vw, 26px);
  left: -2px;
  /* 基準値24px ÷ 画面幅1440 × 100 */
}


  /* バックグランドカラー */
.point1::before {
    width: 100%;
    height: 100%;
    top: 20px;
    left: 0;
    z-index: -1;
    border-radius: 0;
}

.point2::before {
    width: 100%;
    height: 100%;
    top: 1%;
    left: 0;
    z-index: -1;
    border-radius: 0;
}


.point3::before {
    width: 100%;
    height: 100%;
    top: 1%;
    left: 0;
    z-index: -1;
    border-radius: 0;
}



  /* バックグランドカラー ここまで */

  /* ラウンドモチーフ */
  .features-container::after {
          width: 200px;
        height: 200px;
        top: 87%;
        right: 0;
        z-index: 0;
  }
/* ラウンドモチーフ ここまで*/

/* ドット柄モチーフ  縦に回転*/
.point3-container::after {
  content: "";
  display: block;
  background-image: url(../img/common/colorful-dotpattern.png);
  /* transform: rotate(90deg); */
  width: 170%;
  height: 170%;
  position: absolute;
  bottom: -90%;
  left: -210%;
  z-index: -11;
  background-size: contain;
}

/* ドット柄モチーフ ここまで*/

/*-------------------------------------------
タイトル付きフレーム
-------------------------------------------*/



/* 共通部分 */
.selected-title-simpleframe-g,
.point-title-simpleframe-g ,
.point-title-simpleframe-b ,
.point-title-simpleframe-or{
   width:100%;
  /* height: 350px; */
  /* height:  clamp(400px, 42vw, 450px); */
  margin-bottom: 20px;
  height: 100%;
  margin: 0px;
  max-width: initial;
}
.selected-title-simpleframe-g .text-title,
.point-title-simpleframe-g .text-title,
.point-title-simpleframe-b .text-title,
.point-title-simpleframe-or .text-title {
  height: auto;
  padding: 10px 0px;
  
}





.point-title-simpleframe-g p,
.point-title-simpleframe-b p,
.point-title-simpleframe-or p{
  padding: 15px 20px;
  margin: 0;
  text-align: left;
}



/*-------------------------------------------
私たちについてページ
会社概要
-------------------------------------------*/
#overview {
    margin-bottom: 150px;

}






/* 会社概要テーブル*/
.overview-table {
  width: fit-content;
}

.overview-table th{
  padding: 0;
}
  .overview-table,
  .overview-table tr,
  .overview-table td,
  .overview-table th,
  .access-table,
  .access-table tr,
  .access-table td,
  .access-table th {
    display:block;
  }
  .overview-table th,
  .access-table th {
    width:auto;
  }
  

.overview-table td,
.access-table td{
   border-bottom: 1px solid #5D5B5A;
   padding: 0 0 5px 20px;
   
  }

  .overview-table th,
  .access-table th{
  border-bottom: none;
 
}
/* 会社概要テーブル 　ここまで*/
/* 会社概要テーブル*/

 


  
  
/* 会社概要テーブル 　ここまで*/
  



/* ラウンドモチーフ */

    #overview::after {
        content: "";
        display: block;
        background-image: url(../img/common/round-red.png);
        width: 250px;
        height: 250px;
        position: absolute;
        top: 97%;
        z-index: 10;
        background-size: contain;
        left: 45%;
    }
/* ラウンドモチーフ ここまで*/

/*-------------------------------------------
私たちについてページ
アクセス
-------------------------------------------*/

.access-flex{
 /* padding: 120px 2% 0 2%; */
}

.access-table{
  width: 100%;
  justify-content: center;
}

/* グーグルマップ */
.map {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.access-flex {
 padding-top:0;
 gap: 20px;
}








/*-------------------------------------------
サービスページ
認知症・精神科訪問看護とは？
-------------------------------------------*/



/* バックグランドイメージ ここから*/
.visiting-nursing-container::before {
  
    width: 100%;
    height: 105%;
    top: 0%;
    left: 0%;
    border-radius: 0;
}

/* バックグランドイメージ ここまで*/



/*-------------------------------------------
サービスページ
サービス内容
-------------------------------------------*/




.emphasis-message {
  text-align: left;
}

.target-disease-flex{
  width: 100%;
  gap: 10px;
}






.round-frame-b {
    line-height: 160px;
    width: 160px;
}



.others-contents-li li::before,
.nursing-contents-li li::before{

top:0.6em;

}
.nursing-contents-text-title {
  top: -40px;
 margin-bottom: 0;
}
.nursing-contents-li {
    margin-top: -20px;
}
/*-------------------------------------------
サービスページ
選ばれる理由
-------------------------------------------*/

.selected-title-simpleframe-g {
    max-width: initial;
    height: 100%;
    width: 100%;
    }



/*-------------------------------------------
サービスページ
ご利用者様の声
-------------------------------------------*/

#voice {
margin-bottom: 100px;
}

.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  margin:0 auto;
}

.slider-episode {
  width:70vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  height:auto;
}








/*-------------------------------------------
サービスページ
ご利用について
-------------------------------------------*/
#how {
 margin-bottom: 100px;
}



.how-overlap {
  margin-left: 70px;
}

.overlap-text-title{
  margin-bottom: 25px;
 display: block;
 text-align: center;
}

.dotted-line-sandwich-or{
  display: inline-block;
  text-align: center;
  padding: 0;
}

.overlap-container-description {
padding-left: 0px;
line-height: 1.7;
}

/*-------------------------------------------
サービスページ
訪問エリア
-------------------------------------------*/





.area-image {
    width: 100%;
}











/*-------------------------------------------
サービスページ
よくある質問
-------------------------------------------*/
.answer,
.faq-list-item-q .question {
  margin-left: 0px;
}


.faq-list-item-a,
.faq-list-item-q .question{
  margin-right: 0px;
}


.faq-list-item-q::after,
.faq-list-item-q::before {
  margin-right: 20px;
}

 .faq-list-item-q .description{
  margin-right: 20px;
 }
/*-------------------------------------------
アコーディオン
-------------------------------------------*/
  .faq-list {
    margin: 0 auto 60px;
  }
  .faq-list-item {
    padding-right: 20px;
  }
  .faq-list-item-q {
    padding: 20px 0;
    text-align: left;
    margin-right: -20px;
  }
  .faq-list-item-q::before {
    top: 45px;
    right: -20px;
  }
  .faq-list-item-q::after {
    top: 38px;
    right: -14px;
  }
  .faq-list-item-q .question {
    margin-right: 20px;
  }
  .faq-list-item-a {
    padding-bottom: 20px;
  }
  .faq-list-item-a .answer {
    margin-right: 20px;
  }





/*-------------------------------------------
実例紹介

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




.works-container {
    gap: 0px;
    margin: 100px 0px;
 
}
.profile::before {
display: none;

}


/*-------------------------------------------
スタッフ紹介

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



.staff-img {
    width: 100%;
}




.staff-about-container {
    gap: 0px;
    
  
  align-items: center;
}
.staff-message::before {
display: none;

}

/*-------------------------------------------
お知らせページ

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




/* タブ */


/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
  justify-content: center;
  margin-top: 50px;
  
}
.tab li a{
	display: block;
	background:#FFD574;
	margin: 3px 3px;
	padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.tab li a.on{
	background:#fff;
}








/*  ページ送りボタン  */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination-Item-Link {
  width: 33px;
  height: 33px;
  line-height: 0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  background: #fff;
  border: solid 2px #5D5B5A;
  font-size: 14px;
  color: #5D5B5A;
  font-weight: bold;
  transition: all 0.15s linear;
}
.pagination-Item-Link-Icon {
  width: 20px;
}
.pagination-Item-Link.isActive {
  background: #5D5B5A;
  color: #fff;
  pointer-events: none;
}
.pagination-Item-Link:not(.isActive):hover {
  background: #5D5B5A;
  color: #fff;
}
.pagination > * + * {
  margin-left: 8px;
}









/*-------------------------------------------
お問い合わせフォーム

-------------------------------------------*/
.tell-text-title{
  font-size: 23px;
  margin-top: 18px;
}

.tell-container {
margin-bottom: 50px;
}

.apply-btn {
margin-bottom: 20px;
padding: 10px 30px;

}

.recruit-btn {
padding: 10px 30px;

}


.contact-message-description {
 margin-bottom: 80px;
}


/* 入力フォーム */
.form-area {
    margin: 0 auto 60px;
   
  }
  .form-area .item {
    flex-direction: column;
    margin-bottom: 10px;
  }
  .form-area .item dt {
    width: 100%;
    padding: 0px;
   margin-bottom: -5px;
  }
  .form-area .item dd {
    width: 100%;
    padding: 0;
  }
  .form-area .item dd.checkbox-group {
    flex-direction: column;
    align-items: flex-start;
  }
  .form-area .item dd .checkbox-item {
    margin: 0 0 0px;
  }

  .form-area .btn-submit {
    margin-bottom: 250px;
}

.form-area .item dt .require {
    padding: 2px 5px 2px 0;
}
}