/* --------------------------------------------------------------
general
-------------------------------------------------------------- */
body {
  background: linear-gradient(to right, #efe9dc, #fffcf6 20%, #fffcf6 80%, #efe9dc);
}

/* --------------------------------------------------------------
keyvisual
-------------------------------------------------------------- */

.keyvisual-image-lower {
  background: url(../images/keyvisual_image_lower.jpg) center/cover no-repeat;
}

/* for sp ------------------------------------------ */

@media(max-width:500px) {
  .keyvisual-image {
    background: url(../images/keyvisual_image_sp.jpg) center/cover no-repeat;
  }
}

/* --------------------------------------------------------------
header
-------------------------------------------------------------- */

.global-header .inner {
  background: #5bc2dc;
}

.global-header-navi {
  background: #5bc2dc;
}

.global-header-navi a {
  color: #fff;
}

.global-header-contact a {
  line-height: 2.2em;
}

/*.global-header-navi-list:nth-child(3) {
  flex-grow: 2;
}*/

.global-header-navi-top {
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.slide .slide-item::before {
  display: none;
}

.banner_inner {
  width: 100%;
  position: absolute;
  top: 0;
  max-width: 1440px;
  height: 100%;
  right: 50%;
  transform: translateX(50%);
}

.keyvisual-banner {
  position: absolute;
  top: 160px;
  right: 0;
  z-index: 1;
}

/* for small pc ----------------------------------- */

@media(max-width:1000px) {
  .banner_inner {
    position: static;
    transform: translateX(0%);
  }
  .keyvisual-banner {
    position: static;
  }
  .keyvisual-top-title {
    height: 80%;
  }
}

/* for tablet ----------------------------------- */
@media (max-width: 800px) {
  .global-header-navi-sp-btn-icon,
  .global-header-navi-sp-btn-icon:before,
  .global-header-navi-sp-btn-icon:after {
    background: #fff;
    height: 2px;
  }
}

/* --------------------------------------------------------------
footer
-------------------------------------------------------------- */

.global-footer {
  background: #e6e0cc;
}

/* --------------------------------------------------------------
TOP:どうみょうじ高殿苑について
-------------------------------------------------------------- */

.about .content-section-leading {
  display: flex;
  align-items: stretch;
}

.about .leading-body {
  margin-left: auto;
}

.about .content-section-title {
  text-align: left;
}

.about .content-section-title-en, .service .content-section-title-en {
  color: #999;
}

/* for small pc ----------------------------------- */

@media(max-width:1000px) {}

/* for tablet ----------------------------------- */

@media (max-width: 800px) {
  .about .content-section-leading {
    display: block;
  }
  .about .leading-body {
    width: 100%;
  }
  .about .leading-image {
    width: 100%;
    height: 520px;
  }
  .about .content-section-title-en {
    font-size: 10vw;
  }
}

/* for sp ------------------------------------------ */

@media(max-width:500px) {}

/* --------------------------------------------------------------
TOP:サービスのご案内
-------------------------------------------------------------- */

.service {
  background: #fff;
}

.service .content-section-leading {
  display: flex;
  align-items: stretch;
}

.service .leading-body {
  margin: 0;
  width: 100%;
}

.service .leading-body .cols {
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.service .content-section-body {
  margin: 0.5em 0;
  padding: 0 10px;
}

.service .cols::after {
  content: "";
  display: block;
  width: 325px;
}

.service .content-section-body .circle {
  width: 305px;
  height: 200px;
  border-radius: 55% 0%;
}

.service .content-section-body .circle {
  background: linear-gradient(to bottom right, #d3f286, #99cc33);
}

/* .service .content-section-body .circle_9 {
  background: linear-gradient(to bottom right, #b5e0ea, #5bc2dc);
} */

.service .content-section-body .circle-inner {
  position: absolute;
  width: 85%;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  line-height: 1.3;
}

.service .content-section-body .circle_1 .circle-inner, .service .content-section-body .circle_3 .circle-inner {
  top: 52%;
}

.service .content-section-body .circle_2 .circle-inner {
  top: 54%;
}

.service .content-section-body .circle-inner-sub {
  font-size: 0.8em;
}

.service .content-section-body .circle-inner-main {
  display: inline-block;
  margin-top: 2px;
  font-size: 1.4em;
  color: #fff;
}

.service .content-section-body .circle-inner-small {
  font-size: 0.7em;
}

.service .content-section-body .circle-inner-btn {
  display: inline-block;
  padding: 0.5em 1.5em 0.5em 2em;
  margin-top: 20px;
  font-size: 0.85em;
  color: #777;
  background: #fff;
  border-radius: 30px;
}

.service .content-section-body .circle_1 .circle-inner-btn, .service .content-section-body .circle_3 .circle-inner-btn, .service .content-section-body .circle_8 .circle-inner-btn {
  margin-top: 10px;
}

.service .content-section-body .circle-inner-btn_vacancy {
  margin-top: 0px;
  background: none;
  color: #fff;
  font-size: 0.8em;
}

.service .cols ul {
  text-align: center;
}

.service .cols2 .content-section-body:nth-child(3) h3 {
  background: #99cc33;
}

.service .leading-image {
  width: 100%;
  min-height: inherit;
}

.service .content-section-body a {
  /* display: flex; */
  letter-spacing: 0.02em;
}

.service .content-section-body .sub-btn::before {
  display: none;
}

.service .more-btn {
  width: 100%;
  margin: 0;
}

.circle-inner-btn::after {
  display: inline-block;
  content: '\f0da';
  font-family: "Font Awesome 5 Free";
  margin: -1px 0 0 10px;
  font-weight: 900;
  font-size: 1.2em;
  vertical-align: middle;
}

.btn {
  display: inline-block;
  margin: 0 10px;
  background: #5bc2dc;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 0.7em;
  white-space: nowrap;
  color: #fff;
}

/* for small pc ----------------------------------- */

@media(max-width:1000px) {
  .service .leading-body {
    padding: 40px 0px 0px;
  }
}

/* for tablet ----------------------------------- */

@media (max-width: 800px) {
  .service .content-section-body {
    width: 100%;
    margin: 0.5em 0 1em;
  }
}

/* for sp ------------------------------------------ */

@media(max-width:500px) {}

/* --------------------------------------------------------------
TOP:日頃の様子
-------------------------------------------------------------- */

/* --------------------------------------------------------------
施設長のご挨拶
-------------------------------------------------------------- */

.greeting .content-section-title {
  display: none;
}

.greeting .content-section-body h2 {
  margin-bottom: 0.5em;
  font-family: 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
  font-size: 2em;
  font-weight: 900;
  line-height: 1.3em;
}

.greeting .content-section-body img {
  display: block;
  float: left;
  width: 20%;
  padding: 0 2em 1em 0;
}

.writer {
  margin-top: 1em;
  text-align: right;
}

/* for small pc ----------------------------------- */

@media(max-width:1000px) {
  .greeting .content-section-body h2 {
    /*font-size: 3vw;*/
  }
}

/* for tablet ----------------------------------- */

@media (max-width: 800px) {
  .greeting .content-section-body h2 {
    font-size: 4vw;
  }
  .greeting .content-section-body img {
    margin: auto;
    padding: 0;
    float: none;
    width: 50%;
  }
}

/* for sp ------------------------------------------ */

@media(max-width:500px) {
  .greeting .content-section-body img {
    width: 60%;
  }
  .greeting .content-section-body h2 {
    font-size: 1.4em;
  }
}

/* --------------------------------------------------------------
法人理念
-------------------------------------------------------------- */

.philosophy {
  margin-bottom: 0;
  background: #fff;
}

.philosophy .content-section-box {
  box-shadow: none;
  border: none;
}

.philosophy .content-section-body .inner {
  display: flex;
  align-items: stretch;
  margin: 1em 0;
  padding: 0;
}

.philosophy .content-section-body .inner:last-child {
  margin-bottom: 0;
}

.philosophy .content-section-body h3 {
  width: 30%;
  margin: 0;
  padding: 1em;
  background: #64CDE2;
  font-size: 1em;
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.philosophy .content-section-body .bg_dark {
  background: #00B3D0;
}

.philosophy .content-section-body .bg_thin {
  background: #8CF0FF;
}

.philosophy .content-section-body h3 span {
  font-size: 1.5em;
}

.philosophy .content-section-body div {
  width: 100%;
  margin-left: 5px;
  padding: 1em;
}

.philosophy .content-section-body .bd_dark {
  border: 1px solid #00B3D0;
}

.philosophy .content-section-body .bd_normal {
  border: 1px solid #64CDE2;
}

.philosophy .content-section-body .bd_thin {
  border: 1px solid #8CF0FF;
}

.philosophy .content-section-body h4 {
  margin-bottom: 0.5em;
  font-size: 1.2em;
  font-weight: 600;
  color: #5bc2dc;
}

.philosophy .content-section-body .bd h4 {
  position: relative;
  padding-left: 1.5em;
}

.philosophy .content-section-body .bd h4::before {
  content: '';
  display: block;
  position: absolute;
  background: #5bc2dc;
  width: 15px;
  height: 15px;
  top: 2px;
  left: 5px;
}

.bd_thin h4 .kuromori{ color:#555; font-weight: normal;}

/* for small pc ----------------------------------- */

@media(max-width:1000px) {}

/* for tablet ----------------------------------- */

@media (max-width: 800px) {
  .philosophy .content-section-body .inner {
    display: block;
  }
  .philosophy .content-section-body h3 {
    width: 100%;
  }
  .philosophy .content-section-body h3 br {
    display: none;
  }
  .philosophy .content-section-body div {
    margin-left: 0px;
  }
}

/* --------------------------------------------------------------
どうみょうじ高殿苑の特色
-------------------------------------------------------------- */

.feature {
  margin-top: 1.5em;
}

.feature .content-section-body .cols {
  display: flex;
  flex-wrap: wrap;
}

.feature .content-section-body .cols div {
  width: 33.3%;
  padding: 15px;
  box-shadow: 10px 10px 15px -10px rgb(0 0 0 / 10%);
}

.feature .content-section-body .cols img {
  margin-bottom: .5em;
}

.feature .content-section-body h3 {
  position: relative;
  background: none;
  color: #555;
  text-align: left;
  font-size: 1.2em;
  padding: 1em 0 .5em 1.5em;
}

.feature .content-section-body h3::before, .feature .content-section-body h3::after {
  position: absolute;
  content: '';
  border-radius: 100%;
}

.feature .content-section-body .sub::before {
  content: none;
}

.feature .content-section-body h3::before {
  top: 1.2em;
  left: -.1em;
  width: 18px;
  height: 18px;
  background: rgba(91, 194, 220);
}

.feature .content-section-body h3::after {
  top: 1.6em;
  left: .4em;
  width: 13px;
  height: 13px;
  background: rgba(91, 194, 220, .7);
}

/* for tablet ----------------------------------- */

@media (max-width: 800px) {
  .feature .content-section-body .cols div {
    width: 50%;
  }
}

/* for sp ------------------------------------------ */

@media(max-width:500px) {
  .feature .content-section-body .cols div {
    width: 100%;
  }
}

/* --------------------------------------------------------------
どうみょうじ高殿苑概要
-------------------------------------------------------------- */
.overview h4 {
  margin: 1em 0 .2em;
  font-weight: 600;
}

.overview table {
  width: 100%;
  min-width: 720px;
  border: 1px solid #666;
  -webkit-text-size-adjust: 100%;
}

.overview th {
  padding: 5px 10px;
  vertical-align: top;
  background: #ccc;
  border: 1px solid #666;
}

.overview td {
  padding: 5px 10px;
  border: 1px solid #666;
}

.overview .content-section-body figure p {
  margin: 0;
}

/* for tablet ----------------------------------- */

@media(max-width:800px) {
  .overview .content-section-body figure {
    overflow-x: auto;
  }
}

/* --------------------------------------------------------------
サービスのご案内
-------------------------------------------------------------- */

.service_info .content-section-body h3 {
  position: relative;
  background: none;
  color: #555;
  text-align: left;
  font-size: 1.2em;
  padding: 1em 0 .5em 1.5em;
  margin-bottom: 10px;
  border-bottom: 2px dotted rgba(91, 194, 220, .7);
}

.service_info .content-section-body .sub {
  padding: 1em 0 0 0;
  border: none;
}

.service_info .content-section-body h3::before, .service_info .content-section-body h3::after {
  position: absolute;
  content: '';
  border-radius: 100%;
}

.service_info .content-section-body .sub::before, .service_info .content-section-body .sub::after {
  content: none;
}

.service_info .content-section-body h3::before {
  top: 1.2em;
  left: -.1em;
  width: 18px;
  height: 18px;
  background: rgba(91, 194, 220);
}

.service_info .content-section-body h3::after {
  top: 1.6em;
  left: .4em;
  width: 13px;
  height: 13px;
  background: rgba(91, 194, 220, .7);
}

.service_info .content-section-body ul {
  list-style: disc;
  padding: 0 1.8em;
}

.service_info .content-section-body p {
  padding: 0.5em 1.8em;
}

.service_info .content-section-body .sub-btn {
  display: inline-block;
  padding: 0 1em;
  background: #33aa88;
  border-radius: 1em;
  margin-top: 5px;
  color: #fff;
}

.service_info .cols .content-section-image {
  position: relative;
  margin: 30px;
  min-width: 45%;
}

.service_info .content-section-title .capacity {
  border: 0.5px solid #5BC2DC;
  width: 230px;
  margin: 0.5em auto;
  padding: 1em 0 0.5em;
  font-size: 1.2rem;
}

.service_info .content-section-title .numbers {
  font-size: 2.4rem;
}

.service_info .content-section-body .img_area {
  display: flex;
  list-style: none;
  justify-content: center;
}

.service_info .content-section-body .img_area img {
  max-height: 200px;
  padding: 5px;
}

.service_info .blue {
  color: #5bc2dc;
  font-weight: 600;
}

.service_info .bold {
  font-weight: 600;
}

.service_info .button_area {
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
}

.service_info .button_area p a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 1em 2em;
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  background-color: #f83;
  border-radius: 50vh;
}

.service_info .button_area p a::after {
  content: '';
  width: 12px;
  height: 12px;
  margin: 0 0 3px 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.service_info ul.stepflow {
  margin: 30px auto 20px;
  list-style-type: none;
}

.service_info ul.stepflow>li:before, ol.stepflow>li:before {
  background-color: #cccccc!important;
}

.service_info .stepflow li {
  position: relative;
  padding: 0 0 1.5em 1.8em;
}

.service_info .stepflow>li:before {
  content: "";
  width: 3px;
  background: #cccccc;
  display: block;
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 5px;
}

.service_info .stepflow>li.end:before {
  display: none;
}

.service_info .stepflow-white {
  content: '';
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: solid 3px #5bc2dc;
}

.service_info .stepflow-black {
  content: '';
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: solid 3px #5bc2dc;
  background-color: #5bc2dc;
}

.service_info .stepflow_label_time {
  padding: 3px 0px 8px 0px;
  margin-bottom: 8px;
  color: #5bc2dc;
  font-size: 1.2em;
  font-weight: bold;
}

.service_info .stepflow_label, .childminder .stepflow_label {
  padding: 3px 0px 0px 0px;
  margin-bottom: 8px;
  font-size: 1.2em;
  font-weight: bold;
}

.service_info .stepflow_title, .childminder .stepflow_title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
}

.service_info .stepflow_content, .childminder .stepflow_content {
  font-size: .9em;
  line-height: 1.5;
  margin-top: .5em;
  padding: 0 0 1.5em;
  border-bottom: dashed 1px #cccccc;
}

.service_info .stepflow_imgArea {
  display: flex;
}

.service_info .stepflow_imgArea img {
  padding-right: 20px;
  height: 100%;
}

.service_info .stepflow .end .stepflow_content {
  border: none;
}

/* for small pc ----------------------------------- */

@media(max-width:1000px) {
  .service_info .button_area {
    display: block;
    width: 440px;
    margin: 30px auto;
  }

  .service_info .content-section-body .img_area {
    flex-wrap: wrap;
  }
}

/* for sp ------------------------------------------ */

@media (max-width: 500px) {
  .service_info .button_area {
    width: 100%;
  }
  .service_info .button_area p a {
    font-size: 0.9em;
  }

  .service_info .content-section-body .img_area {
    padding: 0 1em;
  }
}

/* --------------------------------------------------------------
ご利用料金
-------------------------------------------------------------- */

.fee .content-section-box p {
  display: table;
  margin: auto;
}

#fee .content-section-body table {
  width: 60%;
  margin: 2em auto;
}

#fee .content-section-body table tr td {
  padding: 1em;
  border-bottom: 1px dotted #5bc2dc;
  vertical-align: middle;
}

#fee .far, #fee .fas {
  color: #5bc2dc;
}

#fee .table_wrap img {
  max-width: initial;
}

/* for tablet ----------------------------------- */

@media(max-width:800px) {
  #fee .content-section-body table {
    width: 90%;
    margin: 2em auto;
  }

  #fee .table_wrap {
    overflow-x: inherit;
  }

  #fee table {
    min-width: initial;
  }
}

/* --------------------------------------------------------------
各種資料ダウンロード
-------------------------------------------------------------- */

#download .hidden_box {
  width: 80%;
  margin: 2em auto;
  background: #d5f4fc;
}

#download .hidden_box label {
  padding: 15px;
  font-weight: bold;
  background: #5bc2dc;
  border-radius: 5px;
  cursor: pointer;
  transition: .5s;
  display: block;
  color: #ffffff;
}

#download .hidden_box label span {
  padding: 0 0 0 50px;
  font-weight: normal;
}

#download .far, #download .fas {
  color: #5bc2dc;
}

/*アイコンを表示*/

#download .hidden_box label:before {
  display: inline-block;
  content: '\f078';
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
  transition: 0.2s;
  font-weight: 900;
}

/*ボタンホバー時*/

#download .hidden_box label:hover {
  background: #d5f4fc;
  color: #333333;
}

/*アイコンを切り替え*/

#download .hidden_box input:checked~label:before {
  font-family: "Font Awesome 5 Free";
  content: '\f077';
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  color: #668ad8;
  font-weight: 900;
}

/*チェックは見えなくする*/

#download .hidden_box input {
  display: none;
}

/*中身を非表示にしておく*/

#download .hidden_box .hidden_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}

/*クリックで中身表示*/

#download .hidden_box input:checked~.hidden_show {
  padding: 10px 0;
  height: auto;
  opacity: 1;
}

#download .content-section-body table {
  width: 80%;
  margin: 2em auto;
}

#download .content-section-body table tr th {
  font-weight: 600;
  padding: 2em 0 0 0;
}

#download .content-section-body table tr td {
  width: 80%;
  padding: 1em;
  border-bottom: 1px solid #dcdcdc;
  vertical-align: middle;
}

#download .table_wrap img {
  max-width: initial;
}

/* for tablet ----------------------------------- */

@media(max-width:800px) {
  #download .content-section-body table {
    width: 90%;
    margin: 2em auto;
  }

  #download .table_wrap {
    overflow-x: inherit;
  }

  #download table {
    min-width: initial;
  }
}

/* --------------------------------------------------------------
空き状況
-------------------------------------------------------------- */

.short_box, .day_box, .help_box {
  border: 1px solid #dcdcdc;
  width: 90%;
  margin: 2em auto;
  padding: 2em;
}

/* --------------------------------------------------------------
ボランティアさんのページ
-------------------------------------------------------------- */

.volunteer .content-section-body .p0 {
  padding: 0;
}

.volunteer .content-section-body h3 {
  position: relative;
  background: none;
  color: #555;
  text-align: left;
  font-size: 1.2em;
  padding: 1em 0 .5em 1.5em;
  margin-bottom: 10px;
  border-bottom: 2px dotted rgba(91, 194, 220, .7);
}

.volunteer .content-section-body h3::before {
  position: absolute;
  content: '';
  border-radius: 100%;
  top: 1.1em;
  left: -.1em;
  width: 18px;
  height: 18px;
  background: rgba(91, 194, 220);
}

.volunteer .content-section-body h3::after {
  position: absolute;
  content: '';
  border-radius: 100%;
  top: 1.5em;
  left: .4em;
  width: 13px;
  height: 13px;
  background: rgba(91, 194, 220, .7);
}

.volunteer .blue {
  color: #5bc2dc;
  font-weight: 600;
}

/* --------------------------------------------------------------
アクセス
-------------------------------------------------------------- */

.map_img {
  width: 70%;
  margin: 0 auto;
}

.map_img img {
  max-width: 100%;
  text-align: center;
}

.access-map div {
  min-height: auto;
}

@media screen and (max-width: 800px) {
  .access-map div:last-child {
    min-height: 400px;
  }
}