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


body {

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

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

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


.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 */	
}




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


/* 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) ;
}

/* メニューリスト */
.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;
	padding-left: 30px;
 }


.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: 1500px;
}

/* タイトル　左下説明文 */
.title_moji{
    z-index: 11;/*　上に　*/
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    writing-mode: vertical-rl;
    font-size: max(27px, 1rem);
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 2;
    text-align: left;
    color: #765e5e;
    margin-top: 300px;
    margin-left: 200px;
    position: absolute;/*重ねたい子要素にabsolute*/
}

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

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

.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%;
 
}


.komorebi_titleillu_hito2migi{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:23.5vw;
	left: 62%;
	margin-top: 1%

}


.komorebi_titleillu_hito2mae{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:44.3vw;
	left:0%;
	margin-top: 9.8%;
 
}


.komorebi_titleillu_inu{
	z-index: 13;/*　上に　*/
	display:block;
	position: absolute;
    width:50.4vw;
	margin-top: 20.5%; 
	left:10.5%;
  
}


/* タイトル　左下こもれび題字 */
.komorebi_title_logo{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:400px;
    margin-top: 900px;
	left: 200px;
}


/* タイトル下地 */
.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用 */




/*----------------------------
* otoiawase_flow
*----------------------------*/

/* otoiawase_flow */


.otoiawase_flow_content{
    z-index: 20;
	position:relative;
	top:10vw;
}


/* flow タイトル部分 */

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


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

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


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

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

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

.otoiawase_flow_nami_yellow_02{
	display: none;
}
/*下地　波黄色 */

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


.otoiawase_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 を負の数に設定 */
	
	}

.otoiawase_yoyakusei{
	height: 10vw;
	background-color:#D5E4B5;
}

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

.otoiawase_yoyakusei_moji span{
	background: linear-gradient(transparent 60%, #FF8888 30%);
      display: inline-block;
	
}


.flow_erea_title_01{
	height: 41vw;
}

.otoiawase_inu_fukidashi{
	position:absolute;
	z-index: 11;
	width: 15vw;
	margin:-12vw 0 0 53vw; 
}

/* otoiawase_flow　犬と猫 */

.otoiawase_inu{
	position:absolute;
	z-index: 11;
	width: 8vw;
	margin:0vw 0 0 54vw; 
	
	 /*animationプロパティここから*/
    animation-name: pyonoyon;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center bottom;
}

.otoiawase_neko_fukidashi{
	position:absolute;
	z-index: 20;
	width: 10vw;
	margin:-5% 0 0 15vw; 
}

.otoiawase_neko{
	position:absolute;
	z-index: 20;
	width: 8vw;
	margin:8% 0 0 17vw; 
	
    /*animationプロパティここから*/
    animation-name:  pyonoyon;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center bottom;
}


@keyframes  pyonoyon {
    0%   { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態 */
    30%  { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 地面に着地し、その変動で潰れだす */
    70%  { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 潰れた反動で一瞬元に戻る */
    75%  { transform: scale(0.9, 1.1) translate(0%, -5%); } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
    80%  { transform: scale(1.0, 1.0) translate(0%, -20%); } /* 潰れた反動が終り、空中で元に戻る */
    100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態に戻る */
}

/* otoiawase_flow　犬と猫 */

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

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


.otoiawase_erea_midashi_01{
	position:absolute;
	width: 25vw;
	margin:-1.5vw 0 0 18vw;
}



.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: -6vw 0 1vw 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;
}
/* 電話をする・ボタンアニメーションホバー用設定 */




.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: 1.2vw 0 0 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */
}


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



/*----------------------------
* お申し込み後のサービスの流れ
*----------------------------*/

/* お申し込み後のサービスの流れ */


.price_content{
    z-index: 20;
	position:relative;
	top:30vw;
}


/* タイトル部分 */

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


.nagare_hito{
	position:absolute;
	width: 33vw;
	margin:-14vw 0 0 12vw; /* 完全に中央に配置するため、上・左の 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: 0px 0 0 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
	}

/*ボタン*/

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

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


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


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

/* ボタンアニメーションホバー用設定  文字設定は共通*/
.midori_form_botan:hover {
  transform: scale(1.1) ;
background-color:#B9E295;
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: 1.2vw 0 0 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */
}

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

/*----------------------------
* form
*----------------------------*/

/* form */

.mailform_erea{
	z-index: 10;
	position:relative;
	width: 100%;
	padding-top:125%;
	
}
	

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

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


/* 青ボタン　白抜き文字部分　 */
.midori_home_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: 1.2vw 0 0 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */
}

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

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

/* inuneko_slider */

.inuneko_slider_eria{
	z-index: 10;
	position:relative;
	height: 25vw;
	width: 100%;
	top:-5vw;
	margin-top: 20vh;
}
.inuneko_slider img{
	width: 20vw;
	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の下部構成部分全体 */
	position:absolute;
	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;
	line-height: 1.3em;
	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;
	
}
/*下地　波ピンク色 */



/* -- responsive ---------------------------------------------------------------------------------------------------------携帯用------------------------------ */

/* 768ixel start */
/*for SP*/
@media screen and (max-width:768px) {
	
	
/* メニューリスト */
.nav-list {
	display: none;
 }
	
/*----------------------------
* ヘッダー
*----------------------------*/
	
.header__body {
 height:5em;
 padding-inline:30px;
}


/* メニュー　ロゴ部分 */
 .header__logo {
    display:block;
    width:70%;
    margin-top:0.7em;
	margin-left: 1em;
    }


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


/* overlay-styles.css */
.hamburger-overlay {
  position: fixed;
  top: 1em;/*メニューのボーダーの上からの位置設定*/
  right: 2em;
  z-index: 1000;
  width: 48px;
  height: 48px;
}

.hamburger-overlay__line { /*メニューのボーダーのサイズと位置設定*/
  left: 0em;
}
	
.nav-overlay__link {
  display: inline-block;
  padding: 20px;
  color: #6D5050;
  
    font-size: 1em;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-weight:500;

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

/*----------------------------
* otoiawase_flow
*----------------------------*/

/* otoiawase_flow */


.otoiawase_flow_content{
    z-index: 20;
	position:relative;
	top:6em;
}


/* flow タイトル部分 */

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


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

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


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

.otoiawase_flow_nami_yellow{ 
	display: none;
}
	
.otoiawase_flow_nami_yellow_02{
	display: block;
	margin: -5vh 0 0 0px;
	width: 100vw;
}
	

.otoiawase_flow_nami_yellow_02 img{
	display: block;
	margin-bottom:-3vh!important;
	width:100vw;
	
}

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


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

.otoiawase_yoyakusei{
	height: auto;
}

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

.otoiawase_yoyakusei_moji span{
	background: linear-gradient(transparent 60%, #FF8888 30%);
      display: inline-block;
	
}


.flow_erea_title_01{
	height: auto;
}

.otoiawase_inu_fukidashi{
	position:absolute;
	z-index: 11;
	width: 20vw;
	margin:1vw 0 0 65vw; 
}

/* otoiawase_flow　犬と猫 */

.otoiawase_inu{
	position:absolute;
	z-index: 11;
	width: 15vw;
	margin:10vh 0 0 72vw; 
}

.otoiawase_neko_fukidashi{
	position:absolute;
	z-index: 20;
	width: 15vw;
	margin:26vh 0 0 75vw; 
}

.otoiawase_neko{
	position:absolute;
	z-index: 20;
	width: 15vw;
	margin:35vh 0 0 78vw; 
	
    /*animationプロパティここから*/
    animation-name:  pyonoyon;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center bottom;
}


/* otoiawase_flow　犬と猫 */

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

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


.otoiawase_erea_midashi_01{
	position:absolute;
	width: 40vw;
	margin:-2.5vw 0 0 18vw;
}



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

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

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

.flow_tel_img{
	margin-left: -5vw;
	margin-top: 3vh;
	width: 12vw;
}

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


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

	.flow_01_tel_suji{
	margin-left: 15vw;
	}

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

/* 緑 ボタン　部分設定 */
.midori_botan_tel{
	border: solid 3px #B9E295; 
    width: 40vw;
	height: auto;
	margin: 3vw 0 1vh 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.midori_botan_mail{
	border: solid 3px #B9E295; 
    width: 40vw;
	height: auto;
	margin:  3vw 0 1vh 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.midori_botan_fax{
	border: solid 3px #B9E295; 
    width: 40vw;
	height: auto;
	margin:  3vw 0 1vh 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}	


.midori_botan_otoiawase{
	border: solid 3px #B9E295; 
    width: 40vw;
	height: auto;
	margin:  3vw 0 1vh 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


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


.otoiawase_form_moji{
    font-size: max(2.5vw);
    color: #6F5349;
    font-weight: 600;	
    letter-spacing: 0.1em;
    line-height: 2;
  margin: 1vw 0 2vh 4vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


/*ボタン*/

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

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

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


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

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

/*----------------------------
* form
*----------------------------*/

/* form */

.mailform_erea{
	z-index: 10;
	position:relative;
	width: 100%;
	padding-top:263%;
	
}
	
.home_botan{
	margin: -3vh 0  0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
		
	}
	
.midori_home_botan{
	border: solid 3px #B9E295; 
    width: 50vw;
	height: auto;
	margin: 1vh 0 1vh 25vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


/* 青ボタン　白抜き文字部分　 */
.midori_home_botan_moji{
    font-size: max(3vw);
    color: #FFFFFF;
    font-weight: 700;	
    letter-spacing: 0.1em;
	text-align: center;
  margin: 1vh 0 1vh 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


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

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

/* inuneko_slider */

.inuneko_slider_eria{
	z-index: 10;
	position:relative;
	height: 25vw;
	width: 100%;
	top:-5vw;
	margin-top: 10vh;
}
	
	


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

/* footer */

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

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

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

}



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

.footer_rogo{
z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:20vw;
    margin-top: 43vw;
	left: -5vw;
}

.footer_rogo_moji{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:30vw;
    margin-top: 43vw;
	left: 18vw;
}


/* footer メニュー 文字 */

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

.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(2vw);
    margin: 5vw 0 0 9vw; /* 完全に中央に配置するため、上・左の 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:1vh;/*縦位置の指定*/
background:#FFFFFF;/*線の色指定*/
width:1.5px;/*線の幅指定*/
height:10vh;/*線の高さ指定*/
}

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


/*ボタン*/

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

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

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

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


/* タイトル page top */

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


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

.footer_nami_pink_02{
	display: block;
	margin: -5vh 0 0 0px;
	width: 100vw;
}

.footer_nami_pink{
	display: none;
}

.footer_nami_pink-02 img{
	display: block;
	margin-bottom:-3vh!important;
	width:100vw;
}
/*下地　波ピンク色 */
	

} /* -- responsive ----------------------------------------------------------------------------------------------------------------------- */


/* -- responsive ---------------------------------------------------------------------------------------------------------------------------タブレット用------ */

/* 1024xel start */
/*for tablet*/
@media screen and (min-width:768px) and (max-width:1024px) {
	
	

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


/* メニューリスト */
.nav-list {
	height: 55px;
    list-style: none;
    display:grid;
    justify-content: flex-end;
    grid-template-columns:repeat(6, 118px);
    gap:5px;
    background-color:white;
	border: solid 3px #765e5e;/*線*/
    border-radius: 	30px ;/* 下地角丸 */
	box-shadow: 0 2px 5px 0 rgba(197,195,195,0.50);
    place-items:center;
	padding-left: 45px;/*こもれびについての文字の左空き部分*/
	margin: 50px 0 0 2%;
	
 }


.nav-list__link {
    display:grid;
    place-items:center;
    grid-template-rows:30px;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size:15px;
    font-weight:500;
    text-decoration: none;
    cursor: default;
    color: #765e5e;
	
	position: relative; /* ← これが必要！ */
    }

/* メニューリスト　「こもれび」部分の調整サイズ */
.nav-list__link--komorebi{
	width: 210px;
	padding-right: 20px; /*こもれびについて　右側の空き調整用*/
}

/* メニューリスト ホバーアニメ*/
.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: 2.5em;
    height: 2.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: '';
	left: 50%;/* ← これが必要！ */
    top: 50%;/* ← これが必要！ */
    transform: translate(-50%, -50%);/* ← これが必要！ */
}

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

/* メニューリスト */
	
/*----------------------------
* ヘッダー
/*----------------------------*/
	
.header__body {
 height:10em;
 padding-inline:0px;

}


/* メニュー　ロゴ部分 */
 .header__logo {
 position: absolute;
    display:block;
    width:300px;
    margin:-80px 0 0 29%;
	
    }


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


/* overlay-styles.css */
.hamburger-overlay {
  position: fixed;
  top: 75px;/*メニューのボーダーの上からの位置設定*/
  right: 4em;
  z-index: 1000;
  width: 48px;
  height: 48px;
}

.hamburger-overlay__line { /*メニューのボーダーのサイズと位置設定*/
  left: 0em;
}

.hamburger-overlay__line:nth-of-type(1) { top: 14px; }/*メニューの3本ボーダーの空き*/
.hamburger-overlay__line:nth-of-type(2) { top: 27px; }
.hamburger-overlay__line:nth-of-type(3) { top: 40px; }
	
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {/*メニューのバッテンの動き*/
  transform: translateY(13px) 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(-13px) rotate(45deg);
}


.nav-overlay__link {
  display: inline-block;
  padding: 20px;
  color: #6D5050;
 
    font-size: 1.2em;

}	
	
	

/*----------------------------
* otoiawase_flow
*----------------------------*/

/* otoiawase_flow */


.otoiawase_flow_content{
    z-index: 20;
	position:relative;
	top:10em;
}


/* flow タイトル部分 */

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


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

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


/*下地　波黄色 */
.otoiawase_flow_bg_yellow{
	z-index: 3;
	position:absolute;
    height: 120vh;
	width: 100%;
    background: #FFE681;
    margin: 8vh 0 0 0px; /* 後ろの波の高さの調整 */
	
	border-bottom-left-radius: 50% 15vw;
  border-bottom-right-radius: 50% 15vw;
}

.otoiawase_flow_nami_yellow{
	display: none;
}
	
.otoiawase_flow_nami_yellow_02{
	display: block;
	margin: -8vh 0 0 0px;/* 波のナミナミ部分の山の高さ調整 */
	width: 100vw;
}
	

.otoiawase_flow_nami_yellow_02 img{
	display: block;
	margin-bottom:-3vh!important;
	width:100vw;
	
}

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


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

.otoiawase_yoyakusei{
	height: auto;
}

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

.otoiawase_yoyakusei_moji span{
	background: linear-gradient(transparent 60%, #FF8888 30%);
      display: inline-block;
	
}


.flow_erea_title_01{
	height: auto;
}

.otoiawase_inu_fukidashi{
	position:absolute;
	z-index: 11;
	width: 20vw;
	margin:1vw 0 0 65vw; 
}

/* otoiawase_flow　犬と猫 */

.otoiawase_inu{
	position:absolute;
	z-index: 11;
	width: 15vw;
	margin:13vh 0 0 72vw; 
}

.otoiawase_neko_fukidashi{
	position:absolute;
	z-index: 20;
	width: 15vw;
	margin:23vh 0 0 75vw; 
}

.otoiawase_neko{
	position:absolute;
	z-index: 20;
	width: 15vw;
	margin:35vh 0 0 78vw; 
	
    /*animationプロパティここから*/
    animation-name:  pyonoyon;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center bottom;
}


/* otoiawase_flow　犬と猫 */

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


.otoiawase_erea_midashi_01{
	position:absolute;
	width: 40vw;
	margin:-2.5vw 0 0 18vw;
}



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

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

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

.flow_tel_img{
	margin-left: -5vw;
	margin-top: 3vh;
	width: 12vw;
}

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


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

	.flow_01_tel_suji{
	margin-left: 15vw;
	}

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

/* 緑 ボタン　部分設定 */
.midori_botan_tel{
	border: solid 3px #B9E295; 
    width: 40vw;
	height: auto;
	margin: 3vw 0 1vh 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.midori_botan_mail{
	border: solid 3px #B9E295; 
    width: 40vw;
	height: auto;
	margin:  3vw 0 1vh 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.midori_botan_fax{
	border: solid 3px #B9E295; 
    width: 40vw;
	height: auto;
	margin:  3vw 0 1vh 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}	


.midori_botan_otoiawase{
	border: solid 3px #B9E295; 
    width: 40vw;
	height: auto;
	margin:  3vw 0 1vh 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


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


.otoiawase_form_moji{
    font-size: max(2.5vw);
    color: #6F5349;
    font-weight: 600;	
    letter-spacing: 0.1em;
    line-height: 2;
  margin: 1vw 0 1vh 4vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


/*ボタン*/

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

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

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


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

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

/*----------------------------
* form
*----------------------------*/

/* form */

.mailform_erea{
	z-index: 10;
	position:relative;
	width: 100%;
	padding-top:235%;
	
}
	
.home_botan{
	margin: -3vh 0  0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
		
	}
	
.midori_home_botan{
	border: solid 3px #B9E295; 
    width: 50vw;
	height: auto;
	margin: 1vh 0 1vh 25vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


/* 青ボタン　白抜き文字部分　 */
.midori_home_botan_moji{
    font-size: max(3vw);
    color: #FFFFFF;
    font-weight: 700;	
    letter-spacing: 0.1em;
	text-align: center;
  margin: 1vh 0 1vh 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


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

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

/* inuneko_slider */

.inuneko_slider_eria{
	z-index: 10;
	position:relative;
	height: 25vw;
	width: 100%;
	top:-5vw;
	margin-top: 10vh;
}
	
	


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

/* footer */

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

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

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

}



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

.footer_rogo{
z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:13vw;
    margin-top:2.5vw;
	left: 73vw;
}

.footer_rogo_moji{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:25vw;
    margin-top:4vh;
	left: 45vw;
}


/* footer メニュー 文字 */

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

.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(1.5vw);
    margin: 2vh 0 0 10vw; /* 完全に中央に配置するため、上・左の 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 15vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */	
}


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

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


/*ボタン*/

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

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

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

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


/* タイトル page top */

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

/*下地　波ピンク色 */
.footer_bg_pink{
	z-index: 3;
	position:absolute;
    height: 55%;
	width: 100%;
    background: #FFBAB9;
    margin: 13vh 0 0 0px; /* ピンク背景の位置 */
}

.footer_nami_pink_02{
	display: block;
	margin: -8vh 0 0 0px; /* ピンク山の部部分の高さ位置 */
	width: 100vw;
}

.footer_nami_pink{
	display: none;
}

.footer_nami_pink-02 img{
	display: block;
	margin-bottom:-3vh!important;
	width:100vw;
}
/*下地　波ピンク色 */
		
		
	
}/* -- responsive ----------------------------------------------------------------------------------------------------------------------- */