@charset "utf-8";

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * メイン
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* -------------------------------------------------------------------------------------------------
   * セクショニング
/* ---------------------------------------------------------------------------------------------- */

#main {}

#main-contents {}

#main-contents div.body {
  max-width: 1240px;
  padding:0 20px;
  margin: 0 auto;
  overflow: hidden;
}

#main-contents .column ~ .column {
  margin-top: 40px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:1100px) {

 #main-contents div.body {
   max-width: 100%;
   padding:0 20px;
   margin: 0 auto;
   overflow: hidden;
   }
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {

#main-contents > .section {
  padding-top: 30px;
  padding-bottom: 30px;
}

#main-contents div.body {
  max-width: 100%;
  padding:0 20px;
  margin: 0 auto;
  overflow: hidden;
}

#main-contents .column ~ .column {
  margin-top: 20px;
}

}

/* ****************************************************************************************************
   * お知らせ
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

.topics {
  position: relative;
  padding-top: 60px;
  padding-bottom: 90px;
  z-index: 1;
}
.topics::after {
  content: "";
  display: block;
  background: url("../../_images/index/topics-img.png") no-repeat;
  width: 469px;
  height: 516px;
  background-size: 469px 516px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.topics .body {
  max-width: 1040px !important;
  overflow: inherit !important;
}

.topics .layout-2 {}

.topics .title-area {
  text-align: center;
}
.topics .title-area .title {}

.topics .link-btn {
  margin-top: 40px;
  text-align: right;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/

.topics::after {
  content: "";
  display: block;
  background: url("../../_images/index/topics-img.png") no-repeat;
  width: 234px;
  height: 258px;
  background-size: 234px 258px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.topics .title-area .title img {
  width: 177px;
}

}

/* ----------------------------------------------------------------------------------------------------
   * リスト
/* ------------------------------------------------------------------------------------------------- */

.topics ul {
  margin-top: 15px;
  justify-content: flex-start;
  column-gap: 40px;
  row-gap: 40px;
}

.topics ul li {
  width: 22%;
  font-size: 1.6rem;
  line-height: 1.4;
  padding: 0;
  font-family: "M PLUS 1p", "sans-serif";
}

.topics ul li a {
  transition: 0.3s;
  display: block;
}
.topics ul li a:hover {
  opacity: 0.7;
}
.topics ul li .images {}

.topics ul li .images img {
  max-width: 220px;
}

.topics ul li .day {
  color: var(--c-green);
  display: block;
  margin-top: 1em;
}
.topics ul li .text {
  display: block;
  margin-top: 0.5em;
  font-size: 1.8rem;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:1100px) {
  /*ブラウザの幅が736px以下の時*/
.topics ul {
  margin-top: 15px;
  justify-content: space-between;
  column-gap: 20px;
  row-gap: 20px;
}
.topics ul li {
  width: 48%;
  text-align: center;
}

}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  .topics ul {
    justify-content: space-between;
  }

.topics ul li {
  width: 100%;
}

.topics ul li .images img {
  max-width: 100%;
}

.topics ul li a {
  transition: 0.3s;
}
.topics ul li a:hover {
  opacity: 0.7;
}

.topics ul li .day {
  color: #64be46;
  display: block;
  margin-top: 0.5em;
}
}

/* ****************************************************************************************************
   * ABOUT
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

.about {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
  background: #ffe100;
  margin-top: 90px;
}
.about::before {
  content: "";
  display: block;
  background: url("../../_images/index/about-top-bg.png") no-repeat;
  width: 100%;
  height: 105px;
  background-size: 100% 105px;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -105px;
}
.about::after {
  content: "";
  display: block;
  background: url("../../_images/index/about-bottom-bg.png") no-repeat;
  width: 100%;
  height: 105px;
  background-size: 100% 105px;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: -105px;
}

.about .body {
  position: relative;
  max-width: 1040px !important;
  overflow: inherit !important;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  
.about::before {
  content: "";
  display: block;
  background: url("../../_images/index/about-top-bg.png") no-repeat;
  width: 100%;
  height: 52px;
  background-size: 100% 52px;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -52px;
}
.about::after {
  content: "";
  display: block;
  background: url("../../_images/index/about-bottom-bg.png") no-repeat;
  width: 100%;
  height: 52px;
  background-size: 100% 52px;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: -52px;
}
}

/* ----------------------------------------------------------------------------------------------------
   * 内容
/* ------------------------------------------------------------------------------------------------- */

.about .contents.layout-flex-2 {}

.about .contents.layout-flex-2 .content {
  font-family: "M PLUS 1p", "sans-serif";
}

.about .contents.layout-flex-2 .content .title {
  position: relative;
  font-size: 3.0rem;
  text-align: left;
  line-height: 1.8;
}

.about .contents.layout-flex-2 .content .text {}

.about .contents.layout-flex-2 .photo {
  text-align: center;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:1100px) {
  /*ブラウザの幅が736px以下の時*/

.about .contents.layout-flex-2 .content {
  max-width: 400px;
  margin: 0 auto;
}
}


/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/

.about .contents.layout-flex-2 .content {
  margin-top: 1em;
}

.about .contents.layout-flex-2 .content .title {
  position: relative;
  font-size: 2.4rem;
  text-align: left;
  font-weight: 600;
  line-height: 1.8;
  font-family: "Zen Maru Gothic", serif;
}

}


/* ****************************************************************************************************
   * グッドケアのサービス
**************************************************************************************************** */
/* ----------------------------------------------------------------------------------------------------
   * 共通
/* ------------------------------------------------------------------------------------------------- */

.service {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
  margin-top: 90px;
}
.service::before {
  content: "";
  display: block;
  background: url("../../_images/index/service-img-1.png") no-repeat;
  width: 538px;
  height: 484px;
  background-size: 538px 484px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.service::after {
  content: "";
  display: block;
  background: url("../../_images/index/service-img-2.png") no-repeat;
  width: 605px;
  height: 618px;
  background-size: 605px 618px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}


.service .body {
  max-width: 1040px !important;
}
.service .title-area {
  text-align: center;
}
.service .title-area .title {}

.service .link-btn {
  margin-top: 40px;
  text-align: center;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/

.service::before {
  content: "";
  display: block;
  background: url("../../_images/index/service-img-1.png") no-repeat;
  width: 269px;
  height: 242px;
  background-size: 269px 242px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.service::after {
  content: "";
  display: block;
  background: url("../../_images/index/service-img-2.png") no-repeat;
  width: 302px;
  height: 309px;
  background-size: 302px 309px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.service .title-area .title img {
  width: 250px;
}
}

/* ----------------------------------------------------------------------------------------------------
   * セクション1内容
/* ------------------------------------------------------------------------------------------------- */

.service .layout-flex-3 {
  margin-top: 25px;
}
.service .layout-flex-3 a {
  display: block;
}

.service .layout-flex-3 .item {
  border-radius: 40px;
  min-width: 310px;
  padding: 0;
}

.service .layout-flex-3 .item-1 {
  background: #f6e4e4;
  animation: floating-2 2s ease-in-out infinite alternate;
  animation-delay: 0;
}
.service .layout-flex-3 .item-2 {
  background: #fff0e1;
  margin-top: 50px;
  animation: floating-4 2s ease-in-out infinite alternate;
  animation-delay: .2s;
}
.service .layout-flex-3 .item-3 {
  background: #fdf6d7;
  margin-top: 25px;
  animation: floating-3 2s ease-in-out infinite alternate;
  animation-delay: .6s;
}


.service .layout-flex-2 .item-4 {
  animation: floating-5 2s ease-in-out infinite alternate;
  animation-delay: .4s;
}
.service .layout-flex-2 .item-5 {
  animation: floating-4 2s ease-in-out infinite alternate;
  animation-delay: .3s;
}

.service .layout-flex-3 .icon {
  text-align: center;
  margin-top: 1em;
}

.service .layout-flex-3 .link-btn {
  margin: 1em auto 0;
  padding-bottom: 20px;
}
.service .layout-flex-3 .btn {
  background: var(--c-orange);
  width: 180px;
  font-size: 1.6rem;
}

.service .layout-flex-3 a:hover {
  opacity: 0.7;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (max-width:736px) {
  /*ブラウザの幅が736px以下の時*/
  
.service .layout-flex-3 > * {
  width: 100%;
  max-width: 310px;
  margin: 0 auto;
}
.service .layout-flex-3 .item {
  border-radius: 40px;
  min-width: 310px;
  width: 100%;
  padding: 0;
}
}

/* ----------------------------------------------------------------------------------------------------
   * セクション2内容
/* ------------------------------------------------------------------------------------------------- */

.service .layout-flex-2 {
  margin-top: 35px;
  align-items: flex-start;
}

.service .layout-flex-2 .item {
  background: #f9d091;
  border-radius: 40px;
  padding: 20px;
}

.service .layout-flex-2 .title-1 {
  color: #fff;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 500;
  font-family: "M PLUS 1p", "sans-serif";
}

.service .layout-flex-2 .content {}
.service .layout-flex-2 .content.layout-flex-2 {
  align-items: initial;
  margin-top: 0;
}

.service .layout-flex-2 .content .icon {
  margin-top: 1em;
  background: #fff;
  border-radius: 10px;
  padding: 0.5em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.service .layout-flex-2 .link-btn {
  margin-top: 1em;
}
.service .layout-flex-2 .btn {
  background: var(--c-orange);
}
.service .layout-flex-2 :nth-child(2) {
  margin-top: 25px;
}