@charset "UTF-8";
/* CSS Document */


html { 
	scroll-behavior: smooth; /*アンカーへのスクロールを滑らかに用　追加文言*/
	scroll-padding-top: 200px; /*アンカーへのスクロール時にヘッダー分空間を開けるため　追加文言*/
}


body {

  background-color: #f6f1eb;/* 背景 */
  width: 100%;/* 子要素にflotを使っているので、背景を正しく表示するためwidth height 両要素の指定 */
  margin: 0; /*余白削除用 必ずセットで*/
  padding: 0; /*余白削除用*/

  animation: bugfix infinite 1s; /*ハンバーガーメニュー用　追加文言*/
  -webkit-animation: bugfix infinite 1s;/*ハンバーガーメニュー用　追加文言*/
	
}



/*----------------------------
*AOS応用
*----------------------------*/
body[data-aos-delay='5000'] [data-aos], /* aosのdelayを認識させるため */
  [data-aos][data-aos][data-aos-delay='5000'] {
    transition-delay: 5000ms;
}

body[data-aos-delay='4000'] [data-aos],
  [data-aos][data-aos][data-aos-delay='4000'] {
    transition-delay: 4000ms;
}

/*----------------------------
*AOS応用
*----------------------------*/

#wrapper{
  height: 12400px;
}

@media (max-width: 1380px) 
{ #wrapper{
  height: 11400px; /* footer 位置調整 */
}}

.header {
 position:fixed;
 top:0;
 left:0;
 background:var(--color-white);
 width:100%;
 z-index:100
}


.header__body {
 grid-area:container;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -webkit-box-pack:justify;
 -ms-flex-pack:justify;
 justify-content:space-between;
 height:150px;
 padding-inline:30px;
 background-color: rgba(246, 241, 235, 0.5);/* 下地透過　透過率0.5 */	

  opacity: 0;
  animation-name: fadein-02;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay:6.8s;
}

@keyframes fadein-02 {
  0% {
     opacity: 0;
     transform: translateY(0);
  }
  100% {
     opacity: 1;
     transform: translateY(0px);
  }
}




/*----------------------------
* ハンバーガーメニュー
*----------------------------*/


/* overlay-styles.css */
.hamburger-overlay {
  position: fixed;
  top: 3em;/*メニューのボーダーの上からの位置設定*/
  right: 20px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger-overlay__line { /*メニューのボーダーのサイズと位置設定*/
  position: absolute;
  left: -5em;
  width: 45px; /*メニューの横幅*/
  height: 7px;
  border-radius: 3px;
  background-color: #765e5e;
  transition: all .6s ease-in-out;
}

.hamburger-overlay__line:nth-of-type(1) { top: 14px; }/*メニューの3本ボーダーの空き*/
.hamburger-overlay__line:nth-of-type(2) { top: 28px; }
.hamburger-overlay__line:nth-of-type(3) { top: 42px; }

.hamburger-overlay.active .hamburger-overlay__line {
  background-color: #765e5e;
}

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {/*メニューのバッテンの動き*/
  transform: translateY(14px) rotate(-45deg);
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
  transform: translateY(-14px) rotate(45deg);
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #F0E8DF;
  visibility: hidden;
  opacity: 0;
  transition: all .6s;
  z-index: 900;
}

.nav-overlay.active {
  visibility: visible;
  opacity: 1;
}

.nav-overlay__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.nav-overlay__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-overlay__item {
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s;
}

.nav-overlay.active .nav-overlay__item {
  opacity: 1;
  transform: translateY(0);
}

.nav-overlay.active .nav-overlay__item:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.active .nav-overlay__item:nth-child(2) { transition-delay: 0.2s; }
.nav-overlay.active .nav-overlay__item:nth-child(3) { transition-delay: 0.3s; }
.nav-overlay.active .nav-overlay__item:nth-child(4) { transition-delay: 0.4s; }
.nav-overlay.active .nav-overlay__item:nth-child(5) { transition-delay: 0.5s; }
.nav-overlay.active .nav-overlay__item:nth-child(6) { transition-delay: 0.6s; }
.nav-overlay.active .nav-overlay__item:nth-child(7) { transition-delay: 0.7s; }
.nav-overlay.active .nav-overlay__item:nth-child(8) { transition-delay: 0.9s; }

.nav-overlay__link {
  display: inline-block;
  padding: 20px;
  color: #6D5050;
  
    font-size: 1.5em;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-weight:500;

  text-decoration: none;
  transition: color .3s;
}

.nav-overlay__link:hover {
  color: #DBD0D0!important;
}


/* 電話番号全体のボックス */
.phone-box {
  padding: 16px 20px;
  border: 5px solid #A48282;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 上下中央寄せ */
  align-items: center;     /* 横中央寄せ */
  text-align: center;
  gap: 4px;                     /* 電話番号同士の間隔 */
  margin: 72px auto;        /* 上の項目との間隔 & 中央寄せ */
  width: fit-content;       /* 中の内容に合わせた幅 */
  max-width: 90%;           /* モバイル対応：広がりすぎないよう制限 */
}

/* 各電話番号リンク */
.phone-box a {
  display: block;
  padding: 12px 12px;             /* ← ここで間隔を調整 */
  color: #765e5e;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.3em;              /* 適度に大きめ */
  transition: color 0.3s;
}

@media screen and (max-width: 480px) {
  .phone-box a {
    font-size: 1em; /* ← スマホ表示だけ小さめに */
    padding: 8px 10px; /* ← 余白も少し詰めるとバランス◎ */
  }
	.phone-box {
		margin: 32px auto;        /* 上の項目との間隔 & 中央寄せ */
	}
}

/* ホバー時の効果 */
.phone-box a:hover {
  color: #DBD0D0;
}


/*----------------------------
* ヘッダー
*----------------------------*/

/* メニュー　ロゴ部分 */
 .header__logo {
    display:block;
    width:400px;
    margin-top: 20px;
	 transition-duration: .4s; /* アニメーションホバー用設定 */	
}

/* メニュー　ロゴ部分アニメーションホバー用設定 */
.header__logo:hover {
  transform: translateY(-5px)  scale(1.1) ;
}


@media (max-width: 1380px) 
{ .header__logo{
    display: none;
}}

.header__logo_02{
	display: none;
} 



@media (max-width: 1380px) 
{ .header__logo_02{
    display: block;
	   width:150px;
    margin-top: 20px;
	margin-left: 10px;
	margin-right: 20px;
	 transition-duration: .4s; /* アニメーションホバー用設定 */	
}}

/* メニュー　ロゴ部分アニメーションホバー用設定 */
.header__logo_02:hover {
  transform: translateY(-5px)  scale(1.1) ;
}


/* メニューリスト */
.nav-list {
	height: 100px;
    list-style: none;
    display:grid;
    justify-content: flex-end;
    grid-template-columns:repeat(6, 160px);
    gap:5px;
    background-color:white;
	border: solid 4px #765e5e;/*線*/
    border-radius: 	40px ;/* 下地角丸 */
	box-shadow: 0 2px 5px 0 rgba(197,195,195,0.50);
    place-items:center;
 }


.nav-list__link {
    display:grid;
    place-items:center;
    grid-template-rows:30px;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size:18px;
    font-weight:500;
    text-decoration: none;
    cursor: default;
    color: #765e5e;
	margin-left: 10px;
    }

/* メニューリスト　「こもれび」部分の調整サイズ */
.nav-list__link--komorebi{
	width: 210px;
}

/* メニューリスト ホバーアニメ*/
.nav-list__link:hover {
animation: text-blur 0.5s;
margin-bottom:15px;
transition:0.2s;
}


.nav-list__link::before {
    position: absolute;
    z-index: -1;
    width: 3.5em;
    height: 3.5em;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
    content: '';
}

.nav-list__link--komorebi::before {
     background: #FFA7A6;
}

.nav-list__link--service::before {
    background: #D5E4B5;
}


.nav-list__link--flow::before {
    background: #FFE681;
}

.nav-list__link--plan::before {
    background: #19ACC3;
}

.nav-list__link--renkei::before {
    background: #74C12C;
}


/* アニメーション設定 */
@keyframes text-blur {
  0% {
    filter: blur(0);
  }
  50% {
    filter: blur(1px); /* ぼかしの強さ */
  }
  100% {
    filter: blur(0);
  }
}


.menu-btn {
 position:relative;
 display:block;
 width:64px;
 height:64px;
 margin:auto
}

/* メニューリスト */



/*----------------------------
* こもれび　タイトル
*----------------------------*/

/* タイトル */
.title{
	height: 1800px; /*オープニングアニメのための高さ調節　1500から1800へ*/
}

/* タイトル　左下説明文 */
.title_moji{
    z-index: 11;/*　上に　*/
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    writing-mode: vertical-rl;
    font-size: clamp( 15px, calc( -29px + 4vw ), 27px ); /*<!--レスポンシブ対応-->*/
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 2;
    text-align: left;
    color: #765e5e;
    margin-top: 300px;
    margin-left: 10vw;
    position: absolute;/*重ねたい子要素にabsolute*/
	
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay:9.2s;
}

/* タイトル　イラスト */

.komorebi_title_illu{
	z-index: 12;/*　上に　*/
	display:block;
	position: absolute;
    width:62vw;
    top: 300px;
	left: 20vw;
}


.komorebi_titleillu_sitaji{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:100%;
	left:0%;
 
}


.komorebi_titleillu_hito3{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:27.1vw;
	left:15.1%;

  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay:6.8s;
}

@keyframes fadein {
  0% {
     opacity: 0;
     transform: translateY(0);
  }
  100% {
     opacity: 1;
     transform: translateY(20px);
  }
}

.komorebi_titleillu_hito2migi{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:23.5vw;
	left: 62%;
	margin-top: 1%;
	
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay:7.6s;
}




.komorebi_titleillu_hito2mae{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:44.3vw;
	left:0%;
	margin-top: 9.8%;
	
	  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay:8.4s;
 
}


.komorebi_titleillu_inu{
	z-index: 13;/*　上に　*/
	display:block;
	position: absolute;
    width:50.4vw;
	margin-top: 20.5%; 
	left:10.5%;
	
	  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay:6s;
  
}


/* タイトル　左下こもれび題字 */
.komorebi_title_logo{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:400px;
    margin-top: 900px;
	left: 200px;
	
   opacity: 0;
  animation-name: fadein-02;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay:9.2s;
}

@keyframes fadein-02 {
  0% {
     opacity: 0;
     transform: translateY(0);
  }
  100% {
     opacity: 1;
     transform: translateY(0px);
  }
}

@media (max-width: 1300px) 
{ .komorebi_title_logo{
    width:400px;
    margin-top: 700px;
	left: 30vw;
}}


/* タイトル下地 */
.bg_pink{
	z-index : 3;/*　上に　*/
	position: relative;
	background-color: #FFBAB9;
	height: 1600px;
	margin: 0; /*余白削除用 必ずセットで*/
    padding: 0; /*余白削除用*/
}

.nami_pink{
	z-index : 4;/*　上に　*/
	top:500px;
	width: 100%;
	display: block;
	position: absolute;
	left: 0;
}

.nami_pink img{
	margin-bottom:-10px!important;
	
}


/* タイトル　スクロールダウンの位置 */
.scroll {
  position: absolute;
 z-index: 10;
  right: 50%;
  top: 1000px;
  writing-mode: vertical-rl;
	color: #FFFFFF;
}
/* タイトル　線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #FFFFFF;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* タイトル　線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* タイトル 星 */
.hoshi01{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:40px;
    margin-top: 400px;
	left: 300px;
}

.hoshi02{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:60px;
    margin-top: 900px;
	left: 100px;
}

.hoshi03{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:30px;
    margin-top: 1100px;
	left: 450px;
}

.hoshi04{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:60px;
    margin-top: 800px;
	left: 43vw;
}

.hoshi05{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:60px;
    margin-top: 1000px;
	left: 60vw;
}

.hoshi06{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:50px;
    margin-top: 800px;
	left: 85vw;
}

.hoshi07{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:30px;
    margin-top:500px;
	left: 85vw;
}

.hoshi08{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:60px;
    margin-top: 300px;
	left: 90vw;
}

.hoshi09{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:60px;
    margin-top: 200px;
	left: 70vw;
}

.hoshi10{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:30px;
    margin-top: 250px;
	left: 50vw;
}

.hoshi11{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:50px;
    margin-top: 150px;
	left:800px;
}

.hoshi12{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:60px;
    margin-top: 200px;
	left: 500px;
}

.hoshi13{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:30px;
    margin-top: 500px;
	left: 100px;
}

.hoshi01 ,.hoshi03 ,.hoshi06,.hoshi09 ,.hoshi11 {
    animation: blinking 1s ease-in-out infinite alternate;
}

.hoshi02, .hoshi04 , .hoshi07 , .hoshi12   {
    animation: blinking02 1s ease-in-out infinite alternate;
}

.hoshi05, .hoshi08 , .hoshi10 , .hoshi13  {
    animation: blinking03 2.5s ease-in-out infinite alternate;
}



@keyframes blinking {
	0% {opacity: 0;}
	90% {opacity: 1;}
}

@keyframes blinking02 {
	20% {opacity: 1;}
	100% {opacity: 0;}
}
	

@keyframes blinking03 {
	0% {opacity: 0;}
	50% {opacity: 1;}
	70% {opacity: 1;}
	100% {opacity: 0;}
}
	

/* タイトル */


/*  Googlefont用 */
.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
}

.zen-maru-gothic-medium {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
}

.zen-maru-gothic-black {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-style: normal;
}
/*  Googlefont用 */


/* オープニングアニメ用 */

.loading {
  position: fixed;
  inset: 0;
  z-index: 30;
  height: 100vh;
  background-color: #f6f1eb;
}

.loading__inner {
  width: 100%;
  height: inherit;
  display: grid;
  place-content: center;
  row-gap: 10px;
}

.loading__text {
  font-family: "Zen Maru Gothic", serif;
  font-style: normal;	
  font-size: max(18px, 1rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 2;
  text-align: center;
  color: #765e5e;
}

.loading__logo {
  margin: 0 auto;
  width: min(200px, 100%); 
}

.contents {
  height: 100vh;
  display: grid;
  place-items: center;
  font-size: max(22px, 3vw);
}




/* オープニングアニメ用 */



/* お問い合わせボタン */



.p_movBnr {
  width: 250px;/* ボックス横サイズ */
  height: 210px;/* ボックス 上からの縦位置 */
  display: block;
  position: fixed;
  right:3vw;/* 右寄せ　空き3 */
  bottom: -300px;
  transition: .3s ease-out;
  z-index: 25;
  padding-bottom: 1vw;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*
@media screen and (min-width: 1024px) {
  .p_movBnr {
    width: 8vw; 背景白サイズ 
  }
}
*/

.p_movBnr.-view {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  -webkit-transition: 1s cubic-bezier(0.22, 0.61, 0.36, 1);
          transition: 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.p_movBnr:hover{ /* マウスオーバーで拡大 */
transform: scale(1.2,1.2);
transition-duration: 0.3s;
}

.p_movBnr .p_movBnr_circle {
  width:100%;/* 背景白　横サイズ */
  height: auto;
  padding-top: 80%;/* 背景白 縦サイズ */
  position: relative;
  background: #fff;
  border-radius: 50% 50% 50% 50% / 65% 66% 34% 35%   ;/* 背景白 形 */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid #f0f0f0;
}

.p_movBnr .p_movBnr_circle .circle_text{
  font-family: "Zen Maru Gothic", serif;
  font-style: normal;
  writing-mode: vertical-rl;
  font-size: max(23px, 1rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 2;
  text-align: center;
  color: #765e5e;

	position: absolute; /* 絶対配置で円の中心に */
    top: 50%; /* 上下中央寄せ */
    left: 50%; /* 左右中央寄せ */
    transform: translate(-50%, -50%); /* 補正 */
    display: inline-block; /* 円の中心に配置するため */
    vertical-align: middle; /* テキストの上下中央寄せ */
	height: 250px;
}


.p_movBnr .p_movBnr_animal {
  -webkit-transform: translateY(5%);
          transform: translateY(5%);
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.p_movBnr .p_movBnr_animal img {
  width: 41%;/* neko inu のサイズ */
  height: auto;
}
.p_movBnr .p_movBnr_animal img:last-child {
  position: absolute;
  left: 0;
  top: 0;
}
.p_movBnr .p_movBnr_animal .-inu {
	padding-left: 150px;/* inu の位置 */
  -webkit-animation: movbnranim 1s 0s linear infinite;
          animation: movbnranim 1s 0s linear infinite;
}
.p_movBnr .p_movBnr_animal .-neko {
margin-left: -10px;/* neko  の位置 */
  -webkit-animation: movbnranim 1s 0.5s linear infinite;
          animation: movbnranim 1s 0.5s linear infinite;
}

@-webkit-keyframes movbnranim {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes movbnranim {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}


.p_movBnr.is-active{
  bottom: 50px;
}

/* お問い合わせボタン */



/*----------------------------
* こもれびとは？
*----------------------------*/

/* こもれびとは？ */

.komorebi_towa{
    z-index: 10;
	position:relative;
	top:-300px;
}


/* はてな　イラスト部分 */
.komorebi_hatena_illu{
	z-index: 12;
	position:absolute;
	width: 1000px;
	left: 50%; /* 水平方向の中央揃え */
    margin: 100px 0 0 -500px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

 .hatena_fukidashi{
	 position:absolute;
	 width: 450px;
	  margin: 50px 0 0 260px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	 animation: fuwafuwa-y 1.8s ease-in-out infinite alternate-reverse;
}

@keyframes fuwafuwa-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}


.hatena_hito{
	position:absolute;
	width: 220px;
	margin: 340px 0 0 390px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
	transform-origin: center bottom;
    animation: yurayura 5s linear infinite 2.5s;
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(2deg);
  }
  50%{
      transform: rotate(-1deg);
  }
}




.hatena_inu{
	position:absolute;
	width: 330px;
	margin: 350px 0 0 600px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 

.hatena_neko{
	position:absolute;
	width: 200px;
	margin: 320px 0 0 170px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
/* opacity: 0;
	animation: zoomIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards 3s;*/
}
 
/*@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}*/


/* はてな　吹き出し部分 */
.komorebi_fukidashi{
	z-index: 12;
	position:absolute;
	width: 1200px;
	left: 50%; /* 水平方向の中央揃え */
    margin: 100px 0 0 -600px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.fukidashi_01{
	 position:absolute;
	 width: 200px;
	  margin: 200px 0 0 100px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 


.fukidashi_02{
	 position:absolute;
	 width: 360px;
	  margin: 400px 0 0 -30px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 
.fukidashi_03{
	 position:absolute;
	 width: 200px;
	  margin: 730px 0 0 150px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 
.fukidashi_04{
	 position:absolute;
	 width: 230px;
	  margin: 200px 0 0 900px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	/*opacity: 0;*/
/*animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) forwards 4s;*/
}
 
/*@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}*/
.fukidashi_05{
	 position:absolute;
	 width: 280px;
	  margin: 370px 0 0 950px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	/*opacity: 0;*/
/*animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) forwards 5s;*/
}
 
/*@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}*/
.fukidashi_06{
	 position:absolute;
	 width: 200px;
	  margin: 730px 0 0 860px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 


/* こもれびとは？ bg 丸*/
.komorebi_bg_maru_pink{
	z-index: 9;
	position:absolute;
	border-radius: 50%;
    border:40px solid #FEBAB9;
    width:900px;
    height: 850px;
    padding: 50px;		
    box-sizing: border-box;
    background: #FEBAB9;
    left: 50%; /* 水平方向の中央揃え */
    margin: 0px 0 0 -450px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	margin-top: 130px;
	
}
.komorebi_bg_maru_pink_min{
	border-radius: 50%;
    border: 100px solid #FFA7A6;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #FF8C8A;	
}



/* 流れる文字　無限ループ 右*/
	@keyframes infinity-scroll-left {
	from {
	  transform: translateX(0);
	}
	  to {
	  transform: translateX(-100%);
	}
	}
	.scroll-infinity__wrap_left {
	  display: flex;
	 overflow: hidden;/*はみ出した部分を非表示にする*/
	 position:relative;
	z-index: 10;
	margin-top: 0px;
	}
	.scroll-infinity__list {
	  display: flex;
	  list-style: none;
	  padding: 0;
	}
	.scroll-infinity__list--left {
	  animation: infinity-scroll-left 80s infinite linear 0.5s both;/* ページ表示がされて0.5秒後に動き出し、80秒かけてすべての画像が左端まで移動する */
	}

	.scroll-infinity__item {
        width: calc(100vw /3);
        margin-left: 30px;
        width: 600px;
	}
	.scroll-infinity__item>img {
	  width: 100%;

	}

/* 流れる文字　無限ループ */

/* 流れる文字　無限ループ 左*/
	@keyframes infinity-scroll-right {
	from {
	  transform: translateX(-100%);
	}
	  to {
	  transform: translateX(0%);
	}
	}
	.scroll-infinity__wrap_right {
	  display: flex;
	 overflow: hidden;/*はみ出した部分を非表示にする*/
	 position:relative;
	z-index: 10;
	 margin-top: 700px;
	}
	.scroll-infinity__list {
	  display: flex;
	  list-style: none;
	}
	.scroll-infinity__list--right {
	  animation: infinity-scroll-right 80s infinite linear 0.5s both;/* ページ表示がされて0.5秒後に動き出し、80秒かけてすべての画像が右端まで移動する */
	}

	.scroll-infinity__item {
	  width: calc(100vw /3);
		margin-left: 30px;
		width: 600px;
	}
	.scroll-infinity__item>img {
	  width: 100%;
	}

/* 流れる文字　無限ループ */


/* こもれびとは？ 　ここまで*/


/* こもれびとは？ 　そんなお悩みご相談ください ここから*/

.onayami_gosoudan{
    z-index: 10;
	position:relative;
	top:400px;
}

.nami_yellow{	
	z-index : 3;/*　上に　*/
	position: absolute;
	background-color: #FFFF58;
	height: 1200px;
	width: 100%;
	margin: 0; /*余白削除用 必ずセットで*/
    padding: 0; /*余白削除用*/
	margin-top: -10px;
	
}


.bg_yellow{
	z-index : 4;/*　上に　*/
	width: 100%;
	display: block;
	position: absolute;
	left: 0;
	margin-top: 200px;
}

.nami_yellow img{
	margin-bottom:-10px!important;
	
}



/* お悩みご相談　イラスト部分 */
.onayami_gosoudan_illu{
	z-index: 12;
	position:absolute;
	width: 1000px;
	left: 50%; /* 水平方向の中央揃え */
    margin:	0px 0 0 -500px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.onayami_bg{
	 position:absolute;
	 width: 1000px;
	  margin: 0px 0 0 0px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.onayami_fukidashi{
	position:absolute;
	width: 700px;
	margin: 10px 0 0 150px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.onayami_hito{
	position:absolute;
	width:1200px;
	margin: 330px 0 0 -100px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	 animation: pyonpyon 1s ease-in-out infinite alternate-reverse;

}


@keyframes pyonpyon {
  0% {
    transform: translateY(-1%);
  }
  100% {
    transform: translateY(2%);
  }
}


.onayami_moji{
	position:absolute;
	width: 1000px;
	margin: 550px 0 0 0px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.onayami_hoshi{
	position:absolute;
	width: 1000px;
	margin: 240px 0 0 0px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


.onayami_hoshi {
	animation: flashing 2s infinite;
}
@keyframes flashing {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	80% {
		opacity: 1;
	}
}

.onayami__text{
    align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(20px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
    color: #765e5e;
	margin-top: 750px;
}

/* お悩みご相談　イラスト部分 ここまで*/



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

/* サービス内容について */

.service_content{
    z-index: 10;
	position:relative;
	top:1400px;
	
}

.service_naiyou_title{
	position:absolute;
	background-color: #D5E4B5;
	width: 90vw;
	height: 650px;
    border-radius: 0px 300px 300px 0px;	/* 左上 | 右上 | 右下 | 左下 */
	margin: 200px 0 0 0px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}



.service_naiyou_hito{
	position:absolute;
	width: 300px;
	margin: -110px 0 0 20vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}

.service_naiyou_moji{
	position:absolute;
	width: 500px;
	margin: 120px 0 0 40vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}



/* 流れる画像　無限ループ 左*/
	@keyframes infinity-scroll-left {
	from {
	  transform: translateX(0);
	}
	  to {
	  transform: translateX(-100%);
	}
	}

	.scroll-infinity_service_content_wrap_left {
	 display: flex;
	 overflow: scroll;/*はみ出した部分を非表示にする*/
	 position:relative;
	 z-index: 10;
	}
	.scroll-infinity_service_content_list {
	  display: flex;
	  list-style: none;
	  padding: 0;
	 margin-top: 700px;
	}
	.scroll-infinity_service_content_list--left {
	  animation: infinity-scroll-left 80s infinite linear 0.5s both;/* ページ表示がされて0.5秒後に動き出し、80秒かけてすべての画像が左端まで移動する */
	}

	.scroll-service_content_list {
        width: calc(100vw /3);
        margin-left: 80px;
        width: 300px;
	}

	.scroll-service_content_list>img {
	  width: 100%;
	}

/* 流れる画像　無限ループ 縦サイズ調整*/
.service_content_05{
	width: 310px;
}

.service_content_06{
	width: 295px;
}


.service_content_07{
	width: 420px;
}

.service_content_09{
	width: 430px;
}

/* 流れる画像　無限ループ マスク部分*/


.scroll-infinity_service_content_wrap_left:active ul { /* 　無限ループ クリック時にストップ*/
  animation-play-state: paused;
}

.service_content_01 .caption01 {
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
	writing-mode: vertical-rl;
    font-size: max(20px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
	font-size:130%;
	text-align: left;
	color:	#fff;
	margin-left: 35%;
}
.service_content_01 .mask01 {
	width:			290px;
	height:			350px;
	border-radius: 20px;
	margin-left: 90px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(60,14,14,0.56);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.3s ease;
}
.service_content_01:hover .mask01 {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}

.service_content_02 .caption02 {
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
	writing-mode: vertical-rl;
    font-size: max(20px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
	font-size:130%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_02 .mask02 {
	width:			290px;
	height:			350px;
	border-radius: 20px;
	margin-left: 470px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(60,14,14,0.56);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.3s ease;
}
.service_content_02:hover .mask02 {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}

.service_content_03 .caption03 {
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
	writing-mode: vertical-rl;
    font-size: max(20px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
	font-size:130%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_03 .mask03 {
	width:			290px;
	height:			350px;
	border-radius: 20px;
	margin-left: 850px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(60,14,14,0.56);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.3s ease;
}
.service_content_03:hover .mask03 {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}

.service_content_04 .caption04 {
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
	writing-mode: vertical-rl;
    font-size: max(20px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
	font-size:130%;
	text-align: left;
	color:	#fff;
	margin-left: 20%;
}
.service_content_04 .mask04 {
	width:			290px;
	height:			350px;
	border-radius: 20px;
	margin-left: 1230px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(60,14,14,0.56);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.3s ease;
}
.service_content_04:hover .mask04 {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}

.service_content_05 .caption05 {
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
	writing-mode: vertical-rl;
    font-size: max(20px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
	font-size:130%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_05 .mask05 {
	width:			290px;
	height:			350px;
	border-radius: 20px;
	margin-left: 1620px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(60,14,14,0.56);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.3s ease;
}
.service_content_05:hover .mask05 {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}


.service_content_06 .caption06 {
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
	writing-mode: vertical-rl;
    font-size: max(20px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
	font-size:130%;
	text-align: left;
	color:	#fff;
	margin-left: 15%;
}
.service_content_06 .mask06 {
	width:			285px;
	height:			350px;
	border-radius: 20px;
	margin-left: 1995px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(60,14,14,0.56);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.3s ease;
}
.service_content_06:hover .mask06 {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}


.service_content_07 .caption07 {
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
	writing-mode: vertical-rl;
    font-size: max(20px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
	font-size:130%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_07 .mask07 {
	width:			385px;
	height:			350px;
	border-radius: 20px;
	margin-left: 2395px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(60,14,14,0.56);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.3s ease;
}
.service_content_07:hover .mask07 {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}

.service_content_08 .caption08 {
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
	writing-mode: vertical-rl;
    font-size: max(20px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
	font-size:130%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_08 .mask08 {
	width:			288px;
	height:			350px;
	border-radius: 20px;
	margin-left: 2875px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(60,14,14,0.56);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.3s ease;
}
.service_content_08:hover .mask08 {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}

.service_content_09 .caption09 {
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
	writing-mode: vertical-rl;
    font-size: max(19px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2.5;
	font-size:120%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
	margin-top: -20px;
}
.service_content_09 .mask09 {
	width:			425px;
	height:			348px;
	border-radius: 20px;
	margin-left: 3250px;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(60,14,14,0.56);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.3s ease;
}
.service_content_09:hover .mask09 {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}


/* 流れる文字　無限ループ */


/* サービスメニューについて */



.service_menu_title{
	position:absolute;
	background-color: #C9E4D9;
	width: 90vw;
	height: 550px;
    border-radius: 300px 0px 0px 300px;	/* 左上 | 右上 | 右下 | 左下 */
	margin: 200px 0 0 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


.service_menu_hito{
	position:absolute;
	width: 300px;
	margin: -110px 0 0 	50vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}

.service_menu_moji{
	position:absolute;
	width: 450px;
	margin: 120px 0 0 18vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}



/* サービスメニュー　老犬介護イラスト部分 */
.service_menu_kaigoinu_illu{
	z-index: 12;
	position:absolute;
	width: 1000px;
	left: 50%; /* 水平方向の中央揃え */
    margin: 60px 0 0 -480px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.service_menu_kaigoinu_center{/* 真ん中介護犬 */
	 position:absolute;
	 width: 500px;
	  margin: 780px 0 0 170px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	 animation: yurayura_inu 5s ease-in-out infinite alternate-reverse;
}

.service_menu_kaigoinu_01{/* 口腔ケア */
	 position:absolute;
	 width: 280px;
	  margin: 480px 0 0 -150px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
/*	 animation: fuwafuwa-y 1.8s ease-in-out infinite alternate-reverse;*/
}

.service_menu_kaigoinu_02{/* トリミング */
	 position:absolute;
	 width: 280px;
	  margin: 400px 0 0 200px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
/*	 animation: fuwafuwa-y 1.8s ease-in-out infinite alternate-reverse;*/
}

.service_menu_kaigoinu_03{/* 食事介助 */
	 position:absolute;
	 width: 300px;
	  margin: 480px 0 0 550px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
/*	 animation: fuwafuwa-y 1.8s ease-in-out infinite alternate-reverse;*/
}

.service_menu_kaigoinu_04{/* 床ずれ */
	 position:absolute;
	 width: 290px;
	  margin: 800px 0 0 700px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
/*	 animation: fuwafuwa-y 1.8s ease-in-out infinite alternate-reverse;*/
}

.service_menu_kaigoinu_05{/* オムツ */
	 position:absolute;
	 width: 280px;
	  margin: 1000px 0 0 450px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
/*	 animation: fuwafuwa-y 1.8s ease-in-out infinite alternate-reverse;*/
}

.service_menu_kaigoinu_06{/*バイタル */
	 position:absolute;
	 width: 280px;
	  margin: 1000px 0 0 50px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
/*	 animation: fuwafuwa-y 1.8s ease-in-out infinite alternate-reverse;*/
}

.service_menu_kaigoinu_07{/* マッサージ */
	 position:absolute;
	 width: 280px;
	  margin: 800px 0 0 -210px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
/*	 animation: fuwafuwa-y 1.8s ease-in-out infinite alternate-reverse;*/
}


.kaigoinu_maru:hover{ /* マウスオーバーで拡大 */
transform: scale(1.1,1.1);
transition-duration: 0.5s;
}




@keyframes fuwafuwa-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}

@keyframes yurayura_inu {
  0% , 100%{
      transform: rotate(1deg);
  }
  50%{
      transform: rotate(-1deg);
  }
}



/*吹き出しアニメーション*/

.menu_fukidashi-00 {
  position: relative;
  width: fit-content;
  padding: 12px 16px;
  border: 3px solid #6F5349;
  border-radius: 4px;
  background-color: #ffffff; /* 背景色と同じ色を指定 */
  margin: 760px 0 0 -350px; /* 吹き出しの位置 */
  left:50%;
  z-index: 15;	
	
  align-content: center;
  font-family: "Zen Maru Gothic", serif;
  font-style: normal;
  font-size: max(18px, 1rem);
	color: #6F5349;
  font-weight: 500;
}

.menu_fukidashi-00::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  background-color: #ffffff; /* 背景色と同じ色を指定 */
  rotate: 135deg;
  translate: -50%;
}
.menu_fukidashi-00::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 3px solid;
  border-color: #6E5248 #6F5349 transparent transparent;
  rotate: 135deg;
  translate: -50%;
}





/* サービスメニュー　bg 丸*/
.service_menu_bg_maru_blu{
	z-index: 9;
	position:absolute;
	border-radius: 50%;
    border:40px solid #6FCBD8;
    width:1000px;
    height: 780px;
    padding: 50px;		
    box-sizing: border-box;
    background: #6FCBD8;
    left: 50%; /* 水平方向の中央揃え */
    margin: 0px 0 0 -600px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	margin-top: 520px;
	
}
.service_menu__bg_maru_blu_min{
	border-radius: 50%;
    border: 100px solid #C9E4D9;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #DFEFE8;	
}

@media(max-width:1000px){
 .service_menu_bg_maru_blu{
        width: 30vw;
        height: 30vw;
        padding: 6vw;
    }
}

/* 提携動物病院獣医師のイラスト */

.teikei_menu_wrap{
	position:relative;
}

.teikei_illu{
	margin-top:800px;
	z-index: 10;
	position:relative;
}


/* 提携動物病院獣医師の下地　波青 */
.teikei_menu_bg_blu{
	z-index: 3;
	position:absolute;
    height: 950px;
	width: 100%;
    background: #C9E4D9;
    margin: 1150px 0 0 0px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.nami_blu{
	margin: -200px 0 0 0px;
	width: 100vw;
}

.nami_blu-02 img{
	display: none;
}

/* 提携動物病院獣医師の下地　波青の下 */
.teikei_menu_bg_blu::after {
  content: '';
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #F6F1EB;
  height: 13%;
}

.teikei_fukidashi{
	position:absolute;
	width: 33vw;
	margin: 30px 0 0 33vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}


.teikei_hito{
	position:absolute;
	width: 25vw;
	margin: 0px 0 0 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}

.teikei_neko_ue{
	position:absolute;
	width: 18vw;
	margin: 4vw 0 0 56vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */

}

.teikei_neko_shita{
	position:absolute;
	width: 18vw;
	margin: 26vw 0 0 13vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


/* 提携動物病院　menu*/
.teikei_menu_list{
	display: flex;
    justify-content: center;
	margin-left: -200px;
	z-index: 5;
	position:relative;
}

.teikei_menu{
	list-style: none;
	width: 10vw;
	margin: 15vw 0px 0 30px;
	left:500px;
}

.teikei_menu:hover{ /* マウスオーバーで拡大 */
transform: scale(1.05,1.03);
transition-duration: 0.3s;
}



/* 提携動物病院　ネコ　吹き出し部分*/
.fukidashi_neko {
  position: relative;
  z-index: 25;
  display: inline-block;
  margin: 0px 0 1.5em 33vw;
  padding: 15px 20px;
  min-width: 120px;
  max-width: 100%;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
  border-radius: 10px;
	
  align-content: center;
  font-family: "Zen Maru Gothic", serif;
  font-style: normal;
  font-size: max(16px, 1rem);
	color: #6F5349;
  font-weight: 500;
}

.fukidashi_neko:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.fukidashi_neko:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}


/*----------------------------
* サービスエリア
*----------------------------*/

/* サービス可能なエリア */

.service_erea_title{
	position:absolute;
	z-index: 10;
	border: solid 35px #C9E4D9; 
	background-color:#FFFFFF;
	width: 70vw;
	height: 38vw;
    border-radius: 150px 150px 150px 150px;	/* 左上 | 右上 | 右下 | 左下 */
	margin: 3700px 0 0 13vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.service_erea_moji{
	position:absolute;
	width: 48vw;
	margin: -90px 0 0 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}
.service_erea_hito{
	position:absolute;
	width: 30vw;
	margin:18vw 0 0 36vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	z-index: 20;
}


.service_erea_koshigaya{
	position:absolute;
	width: 25vw;
	margin: 4vw 0 0 5vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.service_erea_mark{
	position:absolute;
	width: 4vw;
	margin: 16vw 0 0 15vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	animation: puyon 4s linear 0s infinite;
}

@keyframes puyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  15%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  20%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  25%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  30%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}



.service_erea_parking{
	position:absolute;
	width: 10vw;
	margin: 5vw 0 0 36vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.service_erea_car{
	position:absolute;
	width: 24vw;
	margin: 26vw 0 0 40vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	animation: gatagata-car 1s ease-in-out infinite alternate-reverse;
}


@keyframes gatagata-car {
  0% , 100%{
      transform: rotate(1deg);
  }
  50%{
      transform: rotate(-1deg);
  }
}

@keyframes pyon {
    0% {top: 0}
    50% {top:-17px}
    100%{top: 0}
}


.koshigaya_moji{
  position: absolute;
  z-index: 20;
  margin: 33vw 0px 0 5vw;	
  align-content: center;
  font-family: "Zen Maru Gothic", serif;
  font-style: normal;
  font-size: max(2vw);
  color: #6F5349;
  font-weight: 600;	
  line-height : 1em;  /* 行の高さ */
	text-align: center;
}

.moji_kuwasikuwa{
 font-size: max(1vw);
  color: #6F5349;
  font-weight: 400;	
}
.parking_moji{
  position: absolute;
  z-index: 20;
  margin: 6vw 0 1.5em 47vw;	
  align-content: center;
  font-family: "Zen Maru Gothic", serif;
  font-style: normal;
  font-size: max(1vw);
  color: #6F5349;
  font-weight: 500;	
	
}


/*----------------------------
* flow
*----------------------------*/

/* flow */


.flow_content{
    z-index: 20;
	position:relative;
	top:4700px;
}


/* flow タイトル部分 */

.flow_title{
	z-index: 20;
	position:absolute;
	height: 100vw;
	margin: 0px 0 0 25vw  /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


.flow_hito{
	position:absolute;
	width: 400px;
	margin: 0px 0 0 0; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}

.flow_moji{
	position:absolute;
	width: 350px;
	margin: 100px 0 0 500px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

/*下地　波黄色 */
.flow_bg_yellow{
	z-index: 3;
	position:absolute;
    height: 140vw;
	width: 100%;
    background: #FFE681;
    margin: 200px 0 0 0px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
	border-bottom-left-radius: 50% 15vw;
  border-bottom-right-radius: 50% 15vw;
}

.flow_nami_yellow{
	margin: -200px 0 0 0px;
	width: 100vw;
}

.flow_nami_yellow img{
	margin-bottom:-10px!important;
	
}
/*下地　波黄色 */

/* flow　説明部分 */
.flow_nagare_erea{
	position:absolute;
	z-index: 10;
	margin: 450px 0 0 0; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	display: grid;
	gap: 5vw;  /* flow 角丸grid 下部の空きサイズ */
}


.flow_erea_content_list {
	 position:relative;
	z-index: 11;
	border: solid 7px #6F5349; 
	background-color:#FFFBBB;
	 border-radius: 80px 80px 80px 80px;	/* 左上 | 右上 | 右下 | 左下 */
     width: 62vw;
	margin: 0px 0 0 16vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	}

.flow_erea_title_01{
	height: 42vw;
}

.flow_erea_title_02{
	height: 25vw;
}

.flow_erea_title_03{
	height: 13vw;
}

.flow_erea_title_04{
	height: 13vw;
}


.flow_erea_title_05{
	height: 13vw;
}


.flow_erea_img_01{
	position:absolute;
	z-index: 11;
}

.flow_erea_step_01{
	position:absolute;
	width: 7vw;
	margin:-3vw 0 0 5vw; 
	z-index: 20;
}

.flow_tel_img{
	position:absolute;
	width: 6vw;
	margin:0vw 0 0 10vw; 
	z-index: 20;
}


.flow_erea_hito_01{
	position:absolute;
	z-index: 20;
	width: 17vw;
	margin: 23vw 0 0 49vw; 
}

.flow_erea_hito_02{
	position:absolute;
	width: 21vw;
	margin: 9.8vw 0 0 6vw; 
}

.flow_erea_hito_03{
	position:absolute;
	width: 22vw;
	margin: -30px 0 0 40vw; 
}

.flow_erea_hito_04{
	position:absolute;
	width: 15vw;
	margin: -40px 0 0 15vw; 
}

.flow_erea_hito_05{
	position:absolute;
	width: 20vw;
	margin: -30px 0 0 41vw; 
}



.flow_erea_midashi_01{
	position:absolute;
	width: 25vw;
	margin:-1.5vw 0 0 20vw;
	
}

.flow_erea_midashi_02{
	position:absolute;
	width: 19vw;
	margin:-1.5vw 0 0 28vw;
	
}

.flow_erea_midashi_03{
	position:absolute;
	width: 15vw;
	margin:-1.5vw 0 0 15vw;
	
}

.flow_erea_midashi_04{
	position:absolute;
	width: 13vw;
	margin:-1.5vw 0 0 35vw;
	
}

.flow_erea_midashi_05{
	position:absolute;
	width: 20vw;
	margin:-1.5vw 0 0 20vw;
	
}


.flow_tel_erea{
	margin: 5vw 0 0 0; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	display: grid; 
	gap: 1vw; /* flow ボタン部分のgrid 下部の空き */
	
}

/*borderの指定*/
.flow_tel{
	border-bottom:solid #6F5349 5px; /*borderの指定*/
   padding-bottom:2vw;/*余白の指定*/
	margin-left: 7vw;
	width: 48vw;
}

.flow_toiawase_line{
	border-bottom:solid #6F5349 0px; /*borderの指定*/
}

.flow_tel_img{
	margin-left: 2vw;
}

.flow_01_tel{
align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(1.7vw);
    color: #6F5349;
    font-weight: 700;	
    letter-spacing: 0.1em;
    line-height: 2;
  margin: 0vw 0 0 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}

/* (携帯)文字部分 */
.flow_02_tel span{
    font-size: max(1vw);
	
}
/* (携帯)文字部分 */
.flow_02_tel{
align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(1.7vw);
    color: #6F5349;
    font-weight: 700;	
    letter-spacing: 0.1em;
    line-height: 1.5;
  margin: -0.7vw 0 0 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}

/* (携帯)文字部分ホバー */
.flow_02_tel:hover{ 
color: #74C12C;
}

/* flow 小さい文字部分　共通設定 */
.flow_01_moji{
align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(0.8vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.1em;
    line-height: 1.5;
  margin: 0vw 0 0 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}

/* flow 小さい文字　お問い合わせ設定 */
.flow_otoiawase_moji{
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(1vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.1em;
    line-height: 1.5;
  margin: 0vw 0 0 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

/* 緑 ボタン　部分設定 */
.midori_botan_tel{
	position:relative;
	z-index: 11;
	border: solid 5px #B9E295; 
	background-color:#74C12C;
	 border-radius: 20px 20px 20px 20px;	/* 左上 | 右上 | 右下 | 左下 */
     width: 10vw;
	height: 4vw;
	margin: -7vw 0 1.5vh 32vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */
}

/* 電話をする・ボタンアニメーションホバー用設定　ボタン文字設定は共通 */
.midori_botan_tel:hover {
transform: scale(1.1) ;
background-color:#FFE681;
border: solid 5px #74C12C; 
}

.midori_botan_moji:hover{ /* ボタン文字設定は共通 */
	color: #74C12C;
}
/* 電話をする・ボタンアニメーションホバー用設定 */

.arrow01 { /* 長い矢印 */
position:absolute;
 display: inline-block;
z-index: 22;
 width: 33px;
  height: 10vw;
  background: #b0ada2;
  clip-path: polygon(0 86.7%, 37.9% 86.7%, 37.9% 0, 62.1% 0, 62.1% 86.7%, 100% 86.7%, 50% 100%);
  margin: 27vw 0 0 3vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
animation: arrowfuwa 2s infinite;
}


.arrow02 { /* 長い矢印 */
position:absolute;
 display: inline-block;
 width: 33px;
  height: 9vw;
  background: #b0ada2;
  clip-path: polygon(0 86.7%, 37.9% 86.7%, 37.9% 0, 62.1% 0, 62.1% 86.7%, 100% 86.7%, 50% 100%);
  margin: -8vw 0 0 3vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
animation: arrowfuwa 2s 0.3s infinite;
}


.arrow03 { /* 長い矢印 */
position:absolute;
 display: inline-block;
 width: 33px;
  height: 9vw;
  background: #b0ada2;
  clip-path: polygon(0 86.7%, 37.9% 86.7%, 37.9% 0, 62.1% 0, 62.1% 86.7%, 100% 86.7%, 50% 100%);
  margin: -5vw 0 0 3vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
animation: arrowfuwa 2s infinite;
}


.arrow04 { /* 長い矢印 */
position:absolute;
 display: inline-block;
 width: 33px;
  height: 9vw;
  background: #b0ada2;
  clip-path: polygon(0 86.7%, 37.9% 86.7%, 37.9% 0, 62.1% 0, 62.1% 86.7%, 100% 86.7%, 50% 100%);
  margin:-6vw 0 0 3vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
animation: arrowfuwa 2s 0.3s infinite;
}

@keyframes arrowfuwa {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(60px) scale(0.8, 1.2) ;
  }

  100% {
    transform: translateY(0px);
  }
}




.midori_botan_mail{
	position:relative;
	z-index: 11;
	border: solid 5px #B9E295; 
	background-color:#74C12C;
	 border-radius: 20px 20px 20px 20px;	/* 左上 | 右上 | 右下 | 左下 */
     width: 10vw;
	height: 4vw;
	margin: -4vw 0 0 32vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */	
}

/* mailをする・ボタンアニメーションホバー用設定  文字設定は共通*/
.midori_botan_mail:hover {
  transform: scale(1.1) ;
background-color:#FFE681;
border: solid 5px #74C12C; 
}
/* mailをする・ボタンアニメーションホバー用設定 */

.midori_botan_fax{
	position:relative;
	z-index: 11;
	border: solid 5px #B9E295; 
	background-color:#74C12C;
	 border-radius: 20px 20px 20px 20px;	/* 左上 | 右上 | 右下 | 左下 */
     width: 10vw;
	height: 4vw;
	margin: -4vw 0 0 32vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */	
}

/*ボタンアニメーションホバー用設定  文字設定は共通*/
.midori_botan_fax:hover {
  transform: scale(1.1) ;
background-color:#FFE681;
border: solid 5px #74C12C; 
}
/*ボタンアニメーションホバー用設定 */

.midori_botan_otoiawase{
	position:relative;
	z-index: 11;
	border: solid 5px #B9E295; 
	background-color:#74C12C;
	 border-radius: 20px 20px 20px 20px;	/* 左上 | 右上 | 右下 | 左下 */
     width: 20vw;
	height: 4vw;
	margin: 1vw 0 0 12vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */	
}

/* ボタンアニメーションホバー用設定  文字設定は共通*/
.midori_botan_otoiawase:hover {
transform: scale(1.1) ;
background-color:#FFE681;
border: solid 5px #74C12C; 
}
/* ボタンアニメーションホバー用設定 */

/* 緑 ボタン　白抜き文字部分　共通設定 */
.midori_botan_moji{
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(1.3vw);
    color: #FFFFFF;
    font-weight: 700;	
    letter-spacing: 0.1em;
	text-align: center;
    margin: 1vw 0 0 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */
}


/* flow 主な文章用文字*/
.flow_02_moji{
align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(1vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.05em;
    line-height: 1.6;
  margin: 5vw 5vw 0 7vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */	
}

.flow_02_moji span{
	background: linear-gradient(transparent 60%, #FF8686 20%);
}

/* flow 02　の四角の中の見出し文字*/
.flow_02_moji_komidashi{
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(1.1vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.05em;
    line-height: 2;
	background-color:#FFE681;
	border: solid 3px #6F5349; 
	border-radius: 30px;	/* 左上 | 右上 | 右下 | 左下 */
    width: 25vw;
	height: 10vw;
	margin: 2vw 4vw 0 29vw;
	padding: 0 2vw  1vw 2vw;
}

.flow_02_moji_komidashi span{
	font-size: max(1vw);
	background: linear-gradient(transparent 60%, #FF8686 20%);
}

/* flow 主な文章用文字*/
.flow_03_moji{
align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(1.1vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.1em;
    line-height: 2;
  margin: 3vw 0 0 13vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}
.flow_04_moji{
align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(1.1vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.1em;
    line-height: 2;
  margin: 2vw 0 0 33vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}
.flow_05_moji{
align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(1.1vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.1em;
    line-height: 2;
  margin: 4vw 0 0 13vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}



/*----------------------------
* price
*----------------------------*/

/* price */


.price_content{
    z-index: 20;
	position:relative;

}


/* flow タイトル部分 */

.price_title{
	z-index: 20;
	position:absolute;
	margin: 0px 0 0 18vw /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


.price_title_hito{
	position:absolute;
	width: 21vw;
	margin:2vw 0 0 2vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}

.price_title_midashi{
	position:absolute;
	width: 20vw;
	margin: -2vw 0 0 21vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.price_moji{
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(1vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.1em;
    line-height: 1.5;
  margin: 1vw 0 0 15vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


.price_title_content {
	position:absolute;
	z-index: 10;
	border: solid 7px #6F5349; 
	background-color:#D5E4B5;
	 border-radius: 80px 80px 80px 80px;	/* 左上 | 右上 | 右下 | 左下 */
     width: 62vw;
	height: 21vw;
	margin: 20vh 0 0 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
	}

/*ボタン*/

.price_botan{
	display: grid;
	gap: 1.5vw;  /* flow 角丸grid 下部の空きサイズ */
	margin: 5vw 0 0 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.ao_botan_price{
	position:relative;
	z-index: 11;
	border: solid 5px #68C9D8; 
	background-color:#19ACC3;
	 border-radius: 30px;	/* 左上 | 右上 | 右下 | 左下 */
     width: 22vw;
	height: 4vw;
	margin: 0 0 0 20vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */	
}


/* ボタンアニメーションホバー用設定  文字設定は共通*/
.ao_botan_price:hover {
  transform: scale(1.1) ;
background-color:#FFE681;
border: solid 5px #19ACC3; 
}
/* ボタンアニメーションホバー用設定 */


.midori_botan_renkei{
	position:relative;
	z-index: 11;
	border: solid 5px #B9E295; 
	background-color:#74C12C;
	 border-radius: 30px;	/* 左上 | 右上 | 右下 | 左下 */
     width: 22vw;
	height: 4vw;
	margin: 0 0 0 20vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */	
}

/* ボタンアニメーションホバー用設定  文字設定は共通*/
.midori_botan_renkei:hover {
  transform: scale(1.1) ;
background-color:#FFE681;
border: solid 5px #74C12C; 
}
/* ボタンアニメーションホバー用設定 */


/* 青ボタン　白抜き文字部分　 */
.ao_botan_moji{
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(1.3vw);
    color: #FFFFFF;
    font-weight: 700;	
    letter-spacing: 0.1em;
	text-align: center;
  margin: 1vw 0 0 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */
}

.ao_botan_moji:hover{ /* ボタン文字設定は共通 */
	color: #19ACC3;
}

/*----------------------------
* inuneko_slider
*----------------------------*/

/* inuneko_slider */

.inuneko_slider_eria{
	z-index: 10;
	position:relative;
	height: 35vw;
	width: 100%;
	top:-5vw;
}
.inuneko_slider img{
	width: 30vw;
	padding-left: 3vw;
	padding-top: 2vw;
	padding-bottom: 2vw;
}

.slider_neko_01 img{
	border-radius:70% 30% 64% 36% / 72% 72% 28% 28% ;
	animation: fuwatto_01 1.8s ease-in-out infinite alternate-reverse;
}

.slider_neko_02 img{
	border-radius:78% 22% 58% 42% / 46% 58% 42% 54%  ;
	animation: fuwatto_02 1.5s ease-in-out infinite alternate-reverse;
}


.slider_neko_03 img{
	border-radius:48% 52% 51% 49% / 59% 58% 42% 41%  ;
	animation: fuwatto_01 1.5s ease-in-out infinite alternate-reverse;
}


.slider_neko_04 img{
	border-radius:83% 17% 74% 26% / 59% 65% 35% 41% ;
	animation: fuwatto_02 3s ease-in-out infinite alternate-reverse;
}


.slider_neko_05 img{
	border-radius:83% 17% 74% 26% / 40% 36% 64% 60%  ;
	animation: fuwatto_01 1.8s ease-in-out infinite alternate-reverse;
}

.slider_inu_01 img{
	border-radius:70% 30% 64% 36% / 72% 72% 28% 28% ;
	animation: fuwatto_02 2.5s ease-in-out infinite alternate-reverse;
}

.slider_inu_02 img{
	border-radius:18% 82% 17% 83% / 66% 36% 64%  ;
	animation: fuwatto_01 2s ease-in-out infinite alternate-reverse;
}

.slider_inu_03 img{
	border-radius:39% 61% 77% 23% / 66% 52% 48% 34%  ;
	animation: fuwatto_02 2s ease-in-out infinite alternate-reverse;
}

.slider_inu_04 img{
	border-radius:61% 39% 28% 72% / 66% 87% 13% 34%  ;
	animation: fuwatto_01 2s ease-in-out infinite alternate-reverse;
}


@keyframes fuwatto_01 {
  0% {
    transform: translateY(-3%)  rotate(-1deg);;
  }
  100% {
    transform: translateY(3%)  rotate(1deg);;
  }
}

@keyframes fuwatto_02 {
  0% {
    transform: translateY(-1%)  rotate(-1deg);;
  }
  100% {
    transform: translateY(2%)  rotate(1deg);;
  }
}




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

/* footer */

.footer{
  width: 100%;/* 子要素にflotを使っているので、背景を正しく表示するためwidth height 両要素の指定 */
  margin: 0; /*余白削除用 必ずセットで*/
  padding: 0; /*余白削除用*/
  background-color: #F6F1EB;
}

.footer_eria{ /* footerの下部構成部分全体 */
	
	margin-top: 0vw;
	width: 100vw;
}
.footer_hoshi{
	margin-top: -20vw;
}

/* タイトル部分　左側全体 */
.footer_title_moji{
	position:absolute;
	z-index: 15;
	margin-top: 16vw;
	margin-left: 8vw
}
/* タイトル　左下こもれび題字 */
.footer_komorebi_title_logo{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:20vw;
    margin-top: 14vw;
	left: 2vw;
}

.footer_komorebi_title_hito{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:25vw;
    margin-top: 0vw;
	left: 0vw;
	 animation: fuwanfuwan 2s ease-in-out infinite alternate-reverse;

}


@keyframes fuwanfuwan {
  0% {
    transform: translateY(-1%);
  }
  100% {
    transform: translateY(2%);
  }
}


/* タイトル 文字 */
.footer_moji_kaisya{
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(0.9vw);
    color: #FFFFFF;
    font-weight: 400;	
    letter-spacing: 0.1em;
    line-height: 1.5;
  margin: 25vw 0 0 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.footer_rogo{
z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:9vw;
    margin-top: 21vw;
	left: 0vw;
}

.footer_rogo_moji{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:14vw;
    margin-top: 21vw;
	left: 10vw;
}


/* footer メニュー 文字 */

.footer_menu_moji{
	position:absolute;
	z-index: 15;
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(0.8vw);
    color: #FFFFFF;
    font-weight: 400;	
    letter-spacing: 0.1em;
    line-height: 2;
	margin: 35vw 0 0 45vw; /*  */
	
}

.footer_menu_moji a{
	display: inline-block;
	color:#FFFFFF;
	text-decoration:none; 
	transition: .3s;
}

.footer_menu_moji a:hover {/*マウスが上に乗っている状態*/
color:#FB7371;
font-weight:bold;
transform: translateX(10px);
}


.footer_moji_reserved{
	position:relative;
	color: #FFFFFF;
	letter-spacing: 0em;
	font-size: max(0.8vw);
    margin: 5vw 0 0 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */	
}

.footer_menu_moji_box{
	display: inline-block;      /* インラインブロック要素にする */
    padding:  10px;             /* 余白指定 */
	vertical-align: top;    /* 要素を上揃えにする */
  
}
.footer_moji_01{
	position:relative;
    line-height: 2;
  margin: 0 0 0 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */	
}

.footer_moji_02{
	position:relative;
    line-height: 2;
  margin: 0 0 0 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */	
}


.footer_border01 {
position:absolute;/*絶対位置指定*/
z-index: 15;
left:-2vw;/*横位置の指定*/
top:0vw;/*縦位置の指定*/
background:#FFFFFF;/*線の色指定*/
width:2px;/*線の幅指定*/
height:9vw;/*線の高さ指定*/
}

.footer_border02 {
position:absolute;/*絶対位置指定*/
z-index: 15;
left:17vw;/*横位置の指定*/
top:0vw;/*縦位置の指定*/
background:#FFFFFF;/*線の色指定*/
width:2px;/*線の幅指定*/
height:9vw;/*線の高さ指定*/
}


/*ボタン*/

.footer_botan{
	position: absolute;
	margin: 27vw 0 0 45vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.pink_botan_footer{
	position:absolute;
	z-index: 11;
	border: solid 5px #FAD4C8; 
	background-color:#FFFFFF;
	 border-radius: 30px;	/* 左上 | 右上 | 右下 | 左下 */
     width: 24vw;
	height: 5vw;
	margin: 0 0 0 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */	
}


/* ボタンアニメーションホバー用設定  文字設定は共通*/
.pink_botan_footer:hover {
transform: scale(1.1) ;
background-color:#FAD4C8;
border: solid 5px #FFFFFF; 
}

/* ピンクボタン　白抜き文字部分　 */
.pink_botan_moji{
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(1.3vw);
    color: #FEBAB9;
    font-weight: 700;	
    letter-spacing: 0.1em;
	text-align: center;
  margin: 0.8vw 0 0 3vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */
}

.pink_botan_moji:hover{ /* ボタン文字設定は共通 */
	color: #FFFFFF	;
}

.footer_tel_01{
z-index: 20;/*　上に　*/
	display:block;
	position: absolute;
    width:3vw;
    margin-top: 1vw;
	left: 3vw;
}


/* タイトル page top */

.footer_pagetop{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:3.5vw;
    margin-top: 17vw;
	left: 88vw;
	transition-duration: .2s; /* ボタンアニメーションホバー用設定 */	
}

.footer_pagetop:hover {
transform: scale(1.3) ;
}


/* タイトル 星 */
.footer_hoshi01{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:3vw;
    margin-top: 30vw;
	left: 35vw;
}

.footer_hoshi02{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:3vw;
    margin-top: 10vw;
	left: 10vw;
}

.footer_hoshi03{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:2vw;
    margin-top: 5vw;
	left: 40vw;
}

.footer_hoshi04{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:3vw;
    margin-top: 35vw;
	left: 2vw;
}

.footer_hoshi05{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:2vw;
    margin-top: 43vw;
	left: 35vw;
}

.footer_hoshi06{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:3vw;
    margin-top: 35vw;
	left: 80vw;
}

.footer_hoshi07{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:1vw;
    margin-top:40vw;
	left: 85vw;
}

.footer_hoshi08{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:2vw;
    margin-top: 25vw;
	left: 90vw;
}

.footer_hoshi09{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:3vw;
    margin-top: 10vw;
	left: 70vw;
}

.footer_hoshi10{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:2vw;
    margin-top: 23vw;
	left: 50vw;
}

.footer_hoshi01 ,.footer_hoshi03 ,.footer_hoshi06,.footer_hoshi09 ,.footer_hoshi11 {
    animation: blinking 1s ease-in-out infinite alternate;
}

.footer_hoshi02, .footer_hoshi04 , .footer_hoshi07 , .footer_hoshi12   {
    animation: blinking02 1s ease-in-out infinite alternate;
}

.footer_hoshi05, .footer_hoshi08 , .footer_hoshi10 , .footer_hoshi13  {
    animation: blinking03 2.5s ease-in-out infinite alternate;
}


/*下地　波ピンク色 */
.footer_bg_pink{
	z-index: 3;
	position:absolute;
    height: 20vw;
	width: 100%;
    background: #FFBAB9;
    margin: 15vw 0 0 0px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.footer_nami_pink{
	margin: -200px 0 0 0px;
	width: 100vw;
}

.footer_nami_pink_02{
	display: none;
}

.footer_nami_pink img{
	margin-bottom:-10px!important;
	
}
/*下地　波ピンク色 */