@charset "utf-8";
/* ---------------------------------------------------------------------------------
Copyright maisha. All Rights Reserved.

HTML CSS Selectors top

$Revision: 1.0 $
--------------------------------------------------------------------------------- */
#contents-wrapper {
  background-color: #F5F5F2;
}
.sec-ttl {
  font-size: 14px;
  line-height: 1;
}
.sec-ttl .en {
  display: block;
  padding-bottom: 8px;
  font-family: var(--font-en);
  font-size: 30px;
}
.btn-more {
  max-width: 1066px;
  margin: 0 auto;
}
.btn-more a {
  display: block;
  width: 75px;
  padding-bottom: 20px;
  background: url("../img/top/link_arrow.svg") no-repeat right bottom;
  margin-left: auto;
  font-size: 12px;
  line-height: 1;
}
/*---------------------------------------------------------------------------------
Main Visual
--------------------------------------------------------------------------------- */
.mv {
  display: flex;
  width: 100%;
  height: 100vh;
}
.mv div {
  width: 100%;
  height: 100%;
}

/*---------------------------------------------------------------------------------
リードセクション
--------------------------------------------------------------------------------- */
.read-sec {
  padding: 238px 0 0;
  position: relative;
}
.read-sec-in {
  width: 1066px;
  margin: 0 auto;
}
.read-sec-in__ttl {
  margin-bottom: 50px;
  font-size: 54px;
  line-height: 1.85;
  letter-spacing: 0.1em;
  transition-delay:1000ms;
}
.read-sec-in__logo {
  width: 345px;
  margin-bottom: 85px;
  position: relative;
  left: -159px;
}
.read-sec-in__txt {
  width: 440px;
  margin-bottom: 183px;
  font-family: var(--font-go);
  font-size: 18px;
  line-height: 1.77;
  font-weight: 300;
  letter-spacing: 0.1em;
  transition-delay:1200ms;
}
.read-sec-in__btn {
  margin-left: 205px;
  font-size: 18px;
  line-height: 1;
}
.read-sec-in__btn a {
  display: block;
  width: 172px;
  padding-bottom: 45px;
  background: url("../img/top/read_arrow.svg") no-repeat center bottom;
}

.read-sec__bg {
  width: 704px;
  position: absolute;
  top: 470px;
  left: 50%;
  margin-left: 21px;
  z-index: 1;
  transition-delay: 1600ms;
}
.read-sec__photo {
  width: 520px;
  position: absolute;
  top: 245px;
  left: 50%;
  margin-left: 118px;
  z-index: 2;
  transition-delay: 2000ms;
}

.photo-area {
  height: 1430px;
  position: relative;
}
.photo-area div {
  position: absolute;
  left: 50%;
  transition : all 200ms 0ms ease-out;
}
.photo-area__photo01 {
  width: 437px;
  top: 346px;
  margin-left: -622px;
  z-index: 3;
}
.photo-area__photo02 {
  width: 248px;
  top: 402px;
  margin-left: -98px;
  z-index: 2;
}
.photo-area__photo02::before {
  display: block;
  width: 472px;
  height: 315px;
  background: url("../img/top/photo_bg-02.svg") no-repeat;
  position: absolute;
  top: -35px;
  left: -105px;
  z-index: -1;
  content:"";
}
.photo-area__photo03 {
  width: 356px;
  height: 356px;
  padding: 25px;
  background: url("../img/top/photo_bg-03.svg") no-repeat;
  top: 454px;
  margin-left: 291px;
  z-index: 3;
}
.photo-area__circle01 {
  width: 376px;
  height: 376px;
  top: 502px;
  margin-left: -910px;
  z-index: 4;
}
.photo-area__circle02 {
  width: 376px;
  height: 376px;
  top: 155px;
  margin-left: 734px;
}
.photo-area circle {
  fill: transparent;
  stroke: #3C3B3B;
  stroke-width: 0.4;
}

/*---------------------------------------------------------------------------------
Blog
--------------------------------------------------------------------------------- */
.blog {
  width: 1066px;
  margin: 0 auto 357px;
}
.blog .sec-ttl {
  margin-bottom: 165px;
  text-align: center;
}
.blog-list {
  border-top: 1px solid #BCB1AB;
  margin-bottom: 113px;
}
.blog-list li {
  border-bottom: 1px solid #BCB1AB;
}
.blog-list li a {
  display: flex;
  align-items: center;
  align-content: center;
  padding: 22px 150px;
  background-color: #f5f5f2;
}
.blog-list li a:hover {
  opacity: 1;
  background-color: #E0D6D0;
}
.blog-list__img {
  width: 100px;
  height: 100px;
  margin-right: 57px;
}
.blog-list-in {
  width: calc(100% - 157px);
  font-family: var(--font-go);
  line-height: 1;
  font-weight: 300;
}
.blog-list-in__date {
  padding-bottom: 14px;
  font-size: 10px;
  color: #7B7777;
}
.blog-list-in__ttl {
  font-size: 14px;
}

/*---------------------------------------------------------------------------------
Staff
--------------------------------------------------------------------------------- */
.staff {
  padding-bottom: 228px;
  background-color: #d8e3e0;
}
.staff-header {
  height: 460px;
  position: relative;
  overflow:hidden;
  margin-bottom: 358px;
  transform: translate(0,0);
}
.effect-on.staff-header::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;/*伸びる背景色の設定*/
}

.staff-header__img {
  height: 100%;
  opacity: 0;
  transition : all 500ms 800ms ease-out;
}
.effect-on .staff-header__img {
  opacity: 1;
}

.staff .sec-ttl {
  width: 1066px;
  margin: 0 auto 130px;
}
.staff-list {
  display: flex;
  flex-wrap: wrap;
  width: 876px;
  margin: 0 auto 80px;
}
.staff-list li {
  width: 113px;
  margin: 0 53px 82px;
  line-height: 1;
}
.staff-list__img {
  margin-bottom: 14px;
}
.staff-list__job {
  padding-bottom: 8px;
  font-size: 12px;
}
.staff-list__name {
  font-size: 16px;
}

/*---------------------------------------------------------------------------------
Menu
--------------------------------------------------------------------------------- */
.menu {
  padding: 355px 0 532px;
  background-color: #f5f5f2;
}
.menu .sec-ttl {
  margin-bottom: 307px;
  text-align: center;
}
.menu-list {}
.menu-list li {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row-reverse;
  opacity: 1;
  transform: translate(0,0);
}

.menu-list-inner {
  width: 50%;
}
.menu-list-in {
  width: 656px;
  padding: 100px 123px;
}
.menu-list-in__ttl {
  margin-bottom: 112px;
  font-size: 20px;
  text-align: center;
  line-height: 1;
}
.menu-list-in__txt {
  margin-bottom: 115px;
  font-family: var(--font-go);
  font-size: 14px;
  line-height: 1.57;
  font-weight: 300;
  letter-spacing: 0.1em;
}
.menu-list-in .btn-more a {
  margin-right: auto;
}
.menu-list-img {
  width: 50%;
  min-height: 683px;
  position: relative;
  overflow:hidden;
}
.effect-on .menu-list-img::before{
  display: block;
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ABBCAE;/*伸びる背景色の設定*/
}

.menu-list-img img {
  opacity: 0;
  transition : all 500ms 800ms ease-out;
}
.effect-on .menu-list-img img {
  opacity: 1;
}
.menu-list li:nth-of-type(even) {
  flex-direction: row;
}
.menu-list li:nth-of-type(even) .menu-list-in {
  margin-left: auto;
}

/*---------------------------------------------------------------------------------
aging care
--------------------------------------------------------------------------------- */
.care {
  background-color: #D3DEE5;
}
.care-read {
  padding: 370px 0 322px;
  background-color: #fff;
  position: relative;
  z-index: 1;
}
.care-read::after {
  display: block;
  width: 100%;
  height: 479px;
  background: linear-gradient(#fff 0%, #d3dee5 100%);
  position: absolute;
  bottom: -478px;
  left: 0;
  content:"";
}
.care .sec-ttl {
  margin-bottom: 170px;
  text-align: center;
}
.care-read__txt01 {
  padding-bottom: 85px;
  font-size: 14px;
  line-height: 2.66;
  text-align: center;
}
.care-read__txt02 {
  font-size: 16px;
  text-align: center;
}

.care-read__circle01 {
  width: 646px;
  height: 646px;
  position: absolute;
  top: 63px;
  left: 50%;
  margin-left: -1028px;

}
.care-read__circle02 {
  width: 344px;
  height: 344px;
  position: absolute;
  top: 714px;
  left: 50%;
  margin-left: 482px;
}
.line {
  transform: translate(0,0) rotate(-90deg);
  transition : all 0ms 800ms ease-out;
}
.line circle {
  fill: transparent;
  stroke: #3C3B3B;
  stroke-width: 0.4;
}
.effect-on.care-read__circle01 circle {
	animation-name: circle1;
	animation-duration:1s;
	animation-fill-mode:forwards;
  animation-delay: 800ms;

}
.effect-on.care-read__circle02 circle {
	animation-name: circle2;
	animation-duration:1s;
	animation-fill-mode:forwards;
  animation-delay: 800ms;
}
@keyframes circle1 {
  0% { stroke-dasharray: 0 2022; }
  99.9%,to { stroke-dasharray: 2022 2022; }
}
@keyframes circle2 {
  0% { stroke-dasharray: 0 1074; }
  99.9%,to { stroke-dasharray: 1074 1074; }
}

.care-list {
  padding: 135px 0 150px;
  position: relative;
  z-index: 2;
}
.care-list li {
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: row-reverse;
  margin-bottom: 205px;
  opacity: 1;
  transform: translate(0,0);
}
.care-list-inner {
  width: calc(50% + 80px);
}
.care-list-in {
  width: 744px;
  padding: 0 127px;
}
.care-list-in__read {
  margin-bottom: 55px;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}
.care-list-in__name {
  width: 252px;
  margin: 0 auto 65px;
  text-align: center;
  line-height: 1;
}
.care-list-in__txt {
  padding-bottom: 115px;
  font-size: 14px;
  line-height: 1.57;
}
.care-list-in .btn-more a {
  margin-right: auto;
}
.care-list__img {
  width: calc(50% - 80px);
  min-height: 802px;
  position: relative;
  overflow:hidden;
}
.effect-on .care-list__img::before{
  display: block;
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ABBCAE;/*伸びる背景色の設定*/
}

.care-list__img img {
  opacity: 0;
  transition : all 500ms 800ms ease-out;
}
.effect-on .care-list__img img {
  opacity: 1;
}

.care-list li:nth-of-type(even) {
  flex-direction: row;
}
.care-list li:nth-of-type(even) .care-list-in {
  margin-left: auto;
}
.care-list li:last-child {
  margin-bottom: 0;
}

/*---------------------------------------------------------------------------------
Access
--------------------------------------------------------------------------------- */
.access {
  padding: 220px 0 122px;
  background-color: #fff;
}
.access-inner {
  width: 1066px;
  margin: 0 auto;
}
.access .sec-ttl {
  margin-bottom: 215px;
  text-align: center;
}
.access__read01 {
  margin-bottom: 95px;
  font-size: 18px;
  text-align: center;
}
.access__read02 {
  margin-bottom: 205px;
  font-size: 14px;
  line-height: 1.85;
  text-align: center;
}
.access__map {
  height: 340px;
  margin-bottom: 67px;
}
.access__map iframe {
  width: 100%;
  height: 100%;
}

.access__info {
  font-size: 14px;
  line-height: 1.57;
}