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

/* -- responsive --------------------------------------------------------------------------------------------------------------------------------携帯／スマホ用　ここから---------- */

/* 768ixel start */
/*for SP*/
@media screen and (max-width:768px) {
	

body {
  width: 100vw;/* 子要素にflotを使っているので、背景を正しく表示するためwidth height 両要素の指定 */
}

#wrapper{
width: 100vw;
height: 7750px;

}

/*	*{
    outline: 2px red solid;
}
*/
	
/* メニューリスト */
.nav-list {
	display: none;
 }
	
/*----------------------------
* ヘッダー
*----------------------------*/
	
.header__body {
 height:5em;
 padding-inline:30px;
}


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

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


/* 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;
}	
	
	
/* お問い合わせボタン *//*---------------------------------------------------------------------------------------------------お問い合わせボタン-------->*/



.p_movBnr {
  width: 28vw;/* 背景白サイズ  */
  height: 100px;/* ボックス 上からの縦位置 */
}


.p_movBnr .p_movBnr_circle .circle_text{
  font-size: max(9px, 0.8rem);
  height: 250px;
}

.p_movBnr .p_movBnr_animal img {
  width: 41%;/* neko inu のサイズ */
  height: auto;
}

.p_movBnr .p_movBnr_animal .-inu {
	padding-left: 60%;/* inu の位置 */
}
.p_movBnr .p_movBnr_animal .-neko {
margin-left: -1px;/* neko  の位置 */
}


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

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

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

/* タイトル */
.title{
	height: 1180px; /*オープニングアニメのための高さ調節　1500から1800へ*/
}
/* タイトル　左下説明文 */
.title_moji{
    z-index: 11;/*　上に　*/
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    writing-mode: horizontal-tb;
    font-size: clamp( 15px, calc( -29px + 4vw ), 27px ); /*<!--レスポンシブ対応-->*/
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 2;
    text-align: center;
    color: #765e5e;
    margin-top: 530px;
    margin-left: 13vw;
    position: absolute;/*重ねたい子要素にabsolute*/
	
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  /*animation-delay:3.2s;*/
}

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

.komorebi_title_illu{
	z-index: 12;/*　上に　*/
	display:block;
	position: absolute;
    width:62vw;
    top:220px;
	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:41.5vw;
	left:2%;

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


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




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


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


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

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

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

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


/* タイトル　スクロールダウンの位置 */
.scroll {
  position: absolute;
 z-index: 10;
  right: 47%;
  top: 680px;
  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;
}


/* タイトル 星 */
.hoshi01{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:4vw;
    margin-top: 60vh;
	left: 10vw;
}

.hoshi02{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:6vw;
    margin-top: 90vh;
	left:10vw;
}

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

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

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

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

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

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

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

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

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

.hoshi12{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:6vw;
    margin-top: 20vh;
	left: 10vw;
}

.hoshi13{
	z-index: 10;/*　上に　*/
	display:block;
	position: absolute;
    width:3vw;
    margin-top: 50vh;
	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;
}


/* タイトル */
	
/*----------------------------
* オープニングアニメーション
*----------------------------*/
	
	
.loading__text {
  font-family: "Zen Maru Gothic", serif;
  font-style: normal;	
  font-size: max(12px);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 2;
  text-align: center;
  color: #765e5e;
}

.loading__text span {
  display: inline-block;
}
	
.loading__logo {
  margin: 0 auto;
	margin-left: 30%;
  width: 50%; 
}
	
.loading__logo img{
  width: 80%; 
}

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

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

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

.komorebi_towa{
    z-index: 10;
	position:relative;
	top:-30vw;
}


/* はてな　イラスト部分 */
.komorebi_hatena_illu{
	z-index: 12;
	position:absolute;
	width: 100vw;
	left:0; /* 水平方向の中央揃え */
    margin: 8vw 0 0 0vw; 
}

 .hatena_fukidashi{
	 width: 50vw;
	  margin: 0% 0 0 26%;
}


.hatena_hito{
	width: 23vw;
	margin: 56% 0 0 41%; 
}



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

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


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

.fukidashi_01{
	 position:absolute;
	 width: 22vw;
	  margin: 23% 0 0 24%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 
.fukidashi_02{
	 position:absolute;
	 width: 32vw;
	  margin: 45% 0 0 12%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 
.fukidashi_03{
	 position:absolute;
	 width: 23vw;
	  margin: 80% 0 0 22%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 
.fukidashi_04{
	 position:absolute;
	 width: 25vw;
	  margin: 23% 0 0 77%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 
.fukidashi_05{
	 position:absolute;
	 width: 23vw;
	  margin: 45% 0 0 85%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 
.fukidashi_06{
	 position:absolute;
	 width: 23vw;
	  margin: 80% 0 0 81%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 


/* こもれびとは？ bg 丸*/
.komorebi_bg_maru_pink{
	z-index: 9;
	position:absolute;
	border-radius: 50%;
    border:40px solid #FEBAB9;
    width:80vw;
    height: 300px;
    padding: 0px;		
    box-sizing: border-box;
    background: #FEBAB9;
    left: 50%;  /*水平方向の中央揃え */
	transform: translateX(-50%);
    margin: 0px 0 0 0px; 
	margin-top: 120px;
	
}
.komorebi_bg_maru_pink_min{
	border-radius: 50%;
    border: 40px solid #FFA7A6;
    width: 60vw;
    height: 230px;
    box-sizing: border-box;
    background: #FF8C8A;
}

	

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

	.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: 400px;
	}
	.scroll-infinity__item>img {
	  width: 100%;

	}

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

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

	.scroll-infinity__wrap_right {
	  display: flex;
	 overflow: hidden;/*はみ出した部分を非表示にする*/
	 position:relative;
	z-index: 10;
	 margin-top: 350px;
	}
	.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: 400px;
	}
	.scroll-infinity__item>img {
	  width: 100%;
	}

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

/* こもれびとは？ 　そんなお悩みご相談ください ここから*//*---------------------------------------------------------------------------------------------------お悩みご相談ください　黄色バック部分------->*/

.onayami_gosoudan{
	top:100px;
}

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


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

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



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

.onayami_bg{ /*黄色後ろグラデ丸*/
	 width: 80vw;
	  margin: 0px 0 0 10%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

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

.onayami_hito{
	width:90vw;
	margin: 27% 0 0 7%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

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

.onayami_hoshi{

	width: 100vw;
	margin: 20% 0 0 0px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


.onayami__text{
    align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(9px, 0.5rem);
    font-weight: 500;
    letter-spacing: 0em;
    line-height: 1.7;
    text-align: center;
    color: #765e5e;
	margin-top: 70%;
}

/* お悩みご相談　イラスト部分 ここまで*/
	
	
/*----------------------------
* サービス内容
*----------------------------*/

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

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

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



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

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



/* 流れる画像　無限ループ 左*/

	.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: 550px;
	}
	.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: 250px;/*300=×0.83*/
	}

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

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

.service_content_06{
	width: 244px;
}


.service_content_07{
	width: 348px;
}

.service_content_09{
	width: 356px;
}

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


.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(16px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
	font-size:120%;
	text-align: left;
	color:	#fff;
	margin-left: 35%;
}
.service_content_01 .mask01 {
	width:			240px; /*290×0.83* 縮小の計算率*/
	height:			280px; /*350×0.83-10*/
	border-radius: 20px;
	margin-left: 88px;
	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:120%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_02 .mask02 {
	width:			240px;/*290×0.83* 縮小の計算率*/
	height:			280px;/*350×0.83-10*/
	border-radius: 20px;
	margin-left: 419px;
	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(13px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
	font-size:110%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_03 .mask03 {
	width:			240px;/*290×0.83* 縮小の計算率*/
	height:			278px;/*350×0.83-10*/
	border-radius: 20px;
	margin-left: 750px;
	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:120%;
	text-align: left;
	color:	#fff;
	margin-left: 20%;
}
.service_content_04 .mask04 {
width:			240px;/*290×0.83* 縮小の計算率*/
	height:			279px;/*350×0.83-10*/
	border-radius: 20px;
	margin-left: 1079px;
	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:110%;
	text-align: left;
	color:	#fff;
	margin-left: 25%;
	margin-top: -10px;
}
.service_content_05 .mask05 {
	width:			240px;/*290×0.83* 縮小の計算率*/
	height:			277px;/*350×0.83-10*/
	border-radius: 20px;
	margin-left: 1418px;
	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:110%;
	text-align: left;
	color:	#fff;
	margin-left: 15%;
}
.service_content_06 .mask06 {
	width:			236px;
	height:			273px;
	border-radius: 20px;
	margin-left: 1742px;
	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:110%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_07 .mask07 {
	width:			319px;
	height:			277px;
	border-radius: 20px;
	margin-left: 2088px;
	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:120%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_08 .mask08 {
	width:			239px;
	height:			277px;
	border-radius: 20px;
	margin-left: 2499px;
	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:100%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
	margin-top: -30px;
}
.service_content_09 .mask09 {
	width:			352px;
	height:			273px;
	border-radius: 20px;
	margin-left: 2822px;
	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: 500px;
    border-radius: 500px 0px 0px 500px;	/* 左上 | 右上 | 右下 | 左下 */
	margin: 200px 0 0 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


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

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




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

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

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

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

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

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

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

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

.service_menu_kaigoinu_07{/* マッサージ */
	 position:absolute;
	 width: 35vw;
	  margin: 100vh 0 0 22vw; /* 完全に中央に配置するため、上・左の 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;
}



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

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

.menu_fukidashi-00::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 15px;
  height: 10px;
  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:90vw;
    height: 550px;
    padding: 50px;		
    box-sizing: border-box;
    background: #6FCBD8;
    left: 50%;
    transform: translateX(-55%);
    margin: 0; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	margin-top: 43vh;
	
}
.service_menu__bg_maru_blu_min{
	border-radius: 50%;
    border: 50px solid #C9E4D9;
    width: 65vw;
    height: 400px;
    box-sizing: border-box;
    background: #DFEFE8;
	margin-left: -35px;
}
	
	
/* 提携動物病院獣医師のイラスト */

.teikei_menu_wrap{
	position:relative;
}

.teikei_illu{
	margin-top:950px;
	margin-left: 20px;
	z-index: 10;
	position:relative;
}


/* 提携動物病院獣医師の下地　波青 */
.teikei_menu_bg_blu{
	z-index: 3;
	position:absolute;
    height: 55vh;
	width: 100%;
    background: #C9E4D9;
    margin: 1350px 0 0 0px; 
}

.nami_blu{
	display: none;
}
	
.nami_blu_02{
	display: block;
	margin: -40px 0 0 0px;
	width: 100vw;
}


/* 提携動物病院獣医師の下地　波青の下 */
.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: 50vw;
	margin: -3vh 0 0 30vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}


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

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

}

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


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

.teikei_menu{
	list-style: none;
	width: 18vw;
	margin: 19vw 0px 0 5px;
}

.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 27vw;
  padding: 10px 15px;
  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(10px, 0.6rem);
	color: #6F5349;
  font-weight: 500;
}

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

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

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

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

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

.service_erea_moji{
	position:absolute;
	width: 85vw;
	margin: -35px 0 0 -3vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}
.service_erea_hito{
	position:absolute;
	width: 63vw;
	margin:100vw 0 0 15vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	z-index: 20;
}


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

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


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

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

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

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


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

/* flow */


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


/* flow タイトル部分 */
.flow_title{
	z-index: 20;
	position:absolute;
	height:auto;
	width: auto;
	margin: 0.5vh 0 0 25vw ;
}


.flow_hito{
	position:absolute;
	width: 48vw;
	margin: 0px 0 0 -5vw;
	
}

.flow_moji{
	position:absolute;
	width: 45vw;
	margin:20vh 0 0 5vw; 
}

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

.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:-5vh!important;
	width:100vw;
	
}
/*下地　波黄色 */

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


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

.flow_erea_title_01{
	height: auto;
}

.flow_erea_title_02{
	height: auto;
}

.flow_erea_title_03{
	height: auto;
}

.flow_erea_title_04{
	height: auto;
}


.flow_erea_title_05{
	height: 16vh;
}


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

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


.flow_erea_hito_01{
	position:absolute;
	z-index: 20;
	width: 25vw;
	margin: 15% 0 0 78%; 
}

.flow_erea_hito_02{
	position:absolute;
	width: 35vw;
	margin:25vw 0 0 40vw; 
}

.flow_erea_hito_03{
	position:absolute;
	width: 35vw;
	margin: 3vh 0 0 45vw; 
}

.flow_erea_hito_04{
	position:absolute;
	width: 25vw;
	margin: 2vh 0 0 7vw; 
}

.flow_erea_hito_05{
	position:absolute;
	width: 28vw;
	margin: 5vh 0 0 41vw; 
}



.flow_erea_midashi_01{
	position:absolute;
	width: 40vw;
	margin:-2.5vw 0 0 20vw;
}

.flow_erea_midashi_02{
	position:absolute;
	width: 30vw;
	margin:-2.5vw 0 0 25vw;
	
}

.flow_erea_midashi_03{
	position:absolute;
	width: 23vw;
	margin:-2.5vw 0 0 25vw;
	
}

.flow_erea_midashi_04{
	position:absolute;
	width:23vw;
	margin:-2.5vw 0 0 25vw;
	
}

.flow_erea_midashi_05{
	position:absolute;
	width: 33vw;
	margin:-2.5vw 0 0 25vw;
	
}


.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 小さい文字　お問い合わせ設定 */
.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: 0vh 0 0vh 0vw; /* 完全に中央に配置するため、上・左の 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: 25;
 width: 15px;
  height: 15vw;
  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: 115% 0 0 3vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
animation: arrowfuwa 2s infinite;
}


.arrow02 { /* 長い矢印 */
	z-index: 25;
position:absolute;
 display: inline-block;
 width: 15px;
  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: -18vw 0 0 3vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
animation: arrowfuwa 2s 0.3s infinite;
}


.arrow03 { /* 長い矢印 */
	z-index: 25;
position:absolute;
 display: inline-block;
 width: 15px;
  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: -18vw 0 0 3vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
animation: arrowfuwa 2s infinite;
}


.arrow04 { /* 長い矢印 */
	z-index: 25;
position:absolute;
 display: inline-block;
 width: 15px;
  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:-18vw 0 0 3vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
animation: arrowfuwa 2s 0.3s infinite;
}


/* 緑 ボタン　白抜き文字部分　共通設定 */
.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; /* ボタンアニメーションホバー用設定 */
}


	
	
	
/* flow 主な文章用文字*/
.flow_02_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.8;
  margin: 5vh 5vw 5vh 5vw; 
}

.flow_02_moji span{
	border-bottom: none;
	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(2vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.05em;
    line-height: 2;
	background-color:#FFE681;
	border: solid 3px #6F5349; 
	border-radius: 20px;	/* 左上 | 右上 | 右下 | 左下 */
    width: 65vw;
	height: auto;
	margin: 15% 0 5% 7%;
	
}

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

/* flow 主な文章用文字*/
.flow_03_moji{
    font-size: max(2vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.1em;
    line-height: 2;
  margin: 5vw 0 5vh 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}
.flow_04_moji{
    font-size: max(2vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.1em;
    line-height: 2;
  margin: 5vw 0 5vh 35vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}
.flow_05_moji{
    font-size: max(2vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.1em;
    line-height: 2;
  margin: 5vw 0 5vh 13vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}



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

/* price */


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

}


/* flow タイトル部分 */

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


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

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

.price_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: 3vw 0 0 -5vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


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

/*ボタン*/

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

.ao_botan_price{
	position:relative;
	z-index: 11;
	border: solid 5px #68C9D8; 
	background-color:#19ACC3;
	 border-radius: 30px;	/* 左上 | 右上 | 右下 | 左下 */
     width: 60vw;
	height:auto;
	margin: 20vh 0 0 -5vw; /* 完全に中央に配置するため、上・左の 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: 60vw;
	height: auto;
	margin: 0 0 0 -5vw; /* 完全に中央に配置するため、上・左の 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(3vw);
    color: #FFFFFF;
    font-weight: 700;	
    letter-spacing: 0.1em;
	text-align: center;
  margin: 1vh 0 1vh 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */
}

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


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

.renkei_midori_title{
	position:relative;
	z-index: 11;
	border: solid 5px #B9E295; 
	background-color:#74C12C;
	border-radius: 10px;	/* 左上 | 右上 | 右下 | 左下 */
    width: 35vw;
	height: auto;
	margin: 2vh 0 2vh 25vw; /* ボックスの位置 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */	
}

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


/* 緑ボタン　白抜き文字部分　 */
.renkei_midori_title_moji{
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(2.5vw);
    color: #FFFFFF;
    font-weight: 700;	
    letter-spacing: 0.1em;
	text-align: center;
    margin:1vh 0 1vh 0vw; /*白抜き文字の位置 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */
}

/* <!--サービスプラン 説明　ここまで　------------------------------------------------------->  */
		
	
	
/*----------------------------
* inuneko_slider
*----------------------------*/

/* inuneko_slider */

.inuneko_slider_eria{
	z-index: 10;
	position:relative;
	height: 35vw;
	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 17vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

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

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


/* 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: 96% 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; /* ボタンアニメーションホバー用設定 */	
}


/*下地　波ピンク色 */ /*波ピンク---------------------------------------------------------------------------------------pink nami-------------------------->*/
.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 --------------------------------------------------------------------------------------------------------------------------------------------------------------------タブレット用-------------------- */

/* 1024xel start */
/*for tablet*/
@media screen and (min-width:768px) and (max-width:1024px) {
	
	
body {
  width: auto/* 子要素にflotを使っているので、背景を正しく表示するためwidth height 両要素の指定 */

}

#wrapper{
width: auto;
	height: 10500px;
}



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


/* メニューリスト */
.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%;
	
    }


.header__logo_02{
	display: none;
} 
	
	

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


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

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


#overlay-button {
  position: absolute;/*ハンバーガーメニューの位置設定*/
  right: 3em;
  top: 75px;
}


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



.p_movBnr {
  width: 22vw;/* 背景白サイズ  */
  height: 150px;/* ボックス 上からの縦位置 */
}


.p_movBnr .p_movBnr_circle .circle_text{
  font-size: max(9px, 0.8rem);
  height: 250px;
}

.p_movBnr .p_movBnr_animal img {
  width: 41%;/* neko inu のサイズ */
  height: auto;
}

.p_movBnr .p_movBnr_animal .-inu {
	padding-left: 60%;/* inu の位置 */
}
.p_movBnr .p_movBnr_animal .-neko {
margin-left: -1px;/* neko  の位置 */
}


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

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

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

/* タイトル */
.title{
	height: 1800px;
}

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

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

.komorebi_title_illu{
	z-index: 12;/*　上に　*/
	display:block;
	position: absolute;
    width:62vw;
    top:23vh;
	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:41.5vw;
	left:2%;

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


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




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


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


/* タイトル　左下こもれび題字 */
.komorebi_title_logo{
	z-index: 11;/*　上に　*/
	display:block;
	position: absolute;
    width:40vw;
    margin-top: 55vh;
	left: 29vw;
}

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

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

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


/* タイトル　スクロールダウンの位置 */
.scroll {
  position: absolute;
 z-index: 10;
  right: 50%;
  top: 900px;
  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;
}


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

.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:40vw;
}

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

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


/* タイトル */


/*  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用 */

	

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

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

.komorebi_towa{
    z-index: 10;
	position:relative;
	top:-30vw;
}


/* はてな　イラスト部分 */
.komorebi_hatena_illu{
	z-index: 12;
	position:absolute;
	width: 100vw;
	left:0; /* 水平方向の中央揃え */
    margin: 8vw 0 0 0vw; 
}

 .hatena_fukidashi{
	 width: 43vw;
	  margin: 0% 0 0 28%;
}


.hatena_hito{
	width: 18vw;
	margin: 38% 0 0 42%; 
}



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

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


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

.fukidashi_01{
	 position:absolute;
	 width: 18vw;
	  margin: 18% 0 0 24%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 
.fukidashi_02{
	 position:absolute;
	 width: 30vw;
	  margin: 35% 0 0 12%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 
.fukidashi_03{
	 position:absolute;
	 width: 17vw;
	  margin: 65% 0 0 25%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 
.fukidashi_04{
	 position:absolute;
	 width: 21vw;
	  margin: 18% 0 0 77%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 
.fukidashi_05{
	 position:absolute;
	 width: 20vw;
	  margin: 35% 0 0 85%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 
.fukidashi_06{
	 position:absolute;
	 width: 17vw;
	  margin: 65% 0 0 81%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}
 


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

	
	

/* こもれびとは？ 　そんなお悩みご相談ください ここから*//*---------------------------------------------------------------------------------------------------お悩みご相談ください　黄色バック部分------->*/

.onayami_gosoudan{
	top:100px;
}

.nami_yellow{	
	z-index : 3;/*　上に　*/
	position: absolute;
	background-color: #FFFF58;
	height: 700px;
	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: 100vw;
	left: 50%; /* 水平方向の中央揃え */
    margin:	0px 0 0 -50vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.onayami_bg{ /*黄色後ろグラデ丸*/
	 width: 80vw;
	  margin: 0px 0 0 10%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

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

.onayami_hito{
	width:90vw;
	margin: 27% 0 0 7%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.onayami_moji{
	width: 80vw;
	margin: 45% 0 0 12%; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

.onayami_hoshi{

	width: 100vw;
	margin: 20% 0 0 0px; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


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

/* お悩みご相談　イラスト部分 ここまで*/
	
	
/*----------------------------
* サービス内容
*----------------------------*/

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

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

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

.service_naiyou_moji{
	position:absolute;
	width: 50vw;
	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: 550px;
	}
	.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: 250px;/*300=×0.83*/
	}

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

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

.service_content_06{
	width: 244px;
}


.service_content_07{
	width: 348px;
}

.service_content_09{
	width: 356px;
}

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


.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(16px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
	font-size:120%;
	text-align: left;
	color:	#fff;
	margin-left: 35%;
}
.service_content_01 .mask01 {
	width:			240px; /*290×0.83* 縮小の計算率*/
	height:			280px; /*350×0.83-10*/
	border-radius: 20px;
	margin-left: 88px;
	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:120%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_02 .mask02 {
	width:			240px;/*290×0.83* 縮小の計算率*/
	height:			280px;/*350×0.83-10*/
	border-radius: 20px;
	margin-left: 419px;
	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(13px, 1rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
	font-size:110%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_03 .mask03 {
	width:			240px;/*290×0.83* 縮小の計算率*/
	height:			278px;/*350×0.83-10*/
	border-radius: 20px;
	margin-left: 750px;
	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:120%;
	text-align: left;
	color:	#fff;
	margin-left: 20%;
}
.service_content_04 .mask04 {
width:			240px;/*290×0.83* 縮小の計算率*/
	height:			279px;/*350×0.83-10*/
	border-radius: 20px;
	margin-left: 1079px;
	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:110%;
	text-align: left;
	color:	#fff;
	margin-left: 25%;
	margin-top: -10px;
}
.service_content_05 .mask05 {
	width:			240px;/*290×0.83* 縮小の計算率*/
	height:			277px;/*350×0.83-10*/
	border-radius: 20px;
	margin-left: 1418px;
	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:110%;
	text-align: left;
	color:	#fff;
	margin-left: 15%;
}
.service_content_06 .mask06 {
	width:			236px;
	height:			273px;
	border-radius: 20px;
	margin-left: 1742px;
	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:110%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_07 .mask07 {
	width:			319px;
	height:			277px;
	border-radius: 20px;
	margin-left: 2088px;
	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:120%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
}
.service_content_08 .mask08 {
	width:			239px;
	height:			277px;
	border-radius: 20px;
	margin-left: 2499px;
	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:100%;
	text-align: left;
	color:	#fff;
	margin-left: 30%;
	margin-top: -30px;
}
.service_content_09 .mask09 {
	width:			352px;
	height:			273px;
	border-radius: 20px;
	margin-left: 2822px;
	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: 28vw;
	margin: -110px 0 0 	50vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}

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




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

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

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

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

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

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

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

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

.service_menu_kaigoinu_07{/* マッサージ */
	 position:absolute;
	 width: 23vw;
	  margin: 80vh 0 0 16vw; /* 完全に中央に配置するため、上・左の 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;
}



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

.menu_fukidashi-00 {
  position: relative;
  width: fit-content;
  padding: 12px 16px;
  border: 3px solid #6F5349;
  border-radius: 4px;
  background-color: #ffffff; /* 背景色と同じ色を指定 */
  margin: 30vh 0 0 -20vw; /* 吹き出しの位置 */
  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:80vw;
    height: 55vh;
    padding: 50px;		
    box-sizing: border-box;
    background: #6FCBD8;
    left: 2vw; /* 水平方向の中央揃え */
    margin: 0px 0 0 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	margin-top: 43vh;
	
}
.service_menu__bg_maru_blu_min{
	border-radius: 50%;
    border: 100px solid #C9E4D9;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #DFEFE8;	
}
	
	
/* 提携動物病院獣医師のイラスト */

.teikei_menu_wrap{
	position:relative;
}

.teikei_illu{
	margin-top:900px;
	margin-left: 20px;
	z-index: 10;
	position:relative;
}


/* 提携動物病院獣医師の下地　波青 */
.teikei_menu_bg_blu{
	z-index: 3;
	position:absolute;
    height: 75vh;
	width: 100%;
    background: #C9E4D9;
    margin: 105vh 0 0 0px; 
}

.nami_blu{
	display: none;
}
	
.nami_blu_02{
	display: block;
	margin: -90px 0 0 0px;
	width: 100vw;
}


/* 提携動物病院獣医師の下地　波青の下 */
.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: 40vw;
	margin: -1vh 0 0 33vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}


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

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

}

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


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

.teikei_menu{
	list-style: none;
	width: 14vw;
	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 28vw;
  padding: 10px 15px;
  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(14px, 0.7rem);
	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 15px #C9E4D9; 
	background-color:#FFFFFF;
	width: 80vw;
	height: 47vw;
    border-radius: 40px;	/* 左上 | 右上 | 右下 | 左下 */
	margin: 240vh 0 0 9vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}

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


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

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


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

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

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

.moji_kuwasikuwa{
 font-size: max(1.2vw);
  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(1.5vw);
  color: #6F5349;
  font-weight: 500;	
	
}


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

/* flow */


.flow_content{
    z-index: 20;
	position:relative;
	top:300vh;
}


/* flow タイトル部分 */
.flow_title{
	z-index: 20;
	position:absolute;
	height:auto;
	width: auto;
	margin: 0.5vh 0 0 25vw ;
}


.flow_hito{
	position:absolute;
	width: 33vw;
	margin: 0px 0 0 -15vw;
	
}

.flow_moji{
	position:absolute;
	width: 30vw;
	margin:3vh 0 0 25vw; 
}

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

.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:-5vh!important;
	width:100vw;
	
}
/*下地　波黄色 */

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


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

.flow_erea_title_01{
	height: auto;
}

.flow_erea_title_02{
	height: auto;
}

.flow_erea_title_03{
	height: auto;
}

.flow_erea_title_04{
	height: auto;
}


.flow_erea_title_05{
	height: 25vh;
}


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

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


.flow_erea_hito_01{
	position:absolute;
	z-index: 20;
	width: 25vw;
	margin: 12% 0 0 78%; 
}

.flow_erea_hito_02{
	position:absolute;
	width: 35vw;
	margin:21vw 0 0 40vw; 
}

.flow_erea_hito_03{
	position:absolute;
	width: 35vw;
	margin: 3vh 0 0 45vw; 
}

.flow_erea_hito_04{
	position:absolute;
	width: 25vw;
	margin: 2vh 0 0 7vw; 
}

.flow_erea_hito_05{
	position:absolute;
	width: 28vw;
	margin: 7vh 0 0 41vw; 
}



.flow_erea_midashi_01{
	position:absolute;
	width: 40vw;
	margin:-2.5vw 0 0 20vw;
}

.flow_erea_midashi_02{
	position:absolute;
	width: 30vw;
	margin:-2.5vw 0 0 25vw;
	
}

.flow_erea_midashi_03{
	position:absolute;
	width: 23vw;
	margin:-2.5vw 0 0 25vw;
	
}

.flow_erea_midashi_04{
	position:absolute;
	width:23vw;
	margin:-2.5vw 0 0 25vw;
	
}

.flow_erea_midashi_05{
	position:absolute;
	width: 33vw;
	margin:-2.5vw 0 0 25vw;
	
}


.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 小さい文字　お問い合わせ設定 */
.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: 0vh 0 0vh 0vw; /* 完全に中央に配置するため、上・左の 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: 25;
 width: 33px;
  height: 15vw;
  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: 110% 0 0 3vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
animation: arrowfuwa 2s infinite;
}


.arrow02 { /* 長い矢印 */
	z-index: 25;
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 { /* 長い矢印 */
	z-index: 25;
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 infinite;
}


.arrow04 { /* 長い矢印 */
	z-index: 25;
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;
}


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


	
	
	
/* flow 主な文章用文字*/
.flow_02_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.8;
  margin: 5vh 5vw 5vh 5vw; 
}

.flow_02_moji span{
	border-bottom: none;
	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(2vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.05em;
    line-height: 2;
	background-color:#FFE681;
	border: solid 3px #6F5349; 
	border-radius: 20px;	/* 左上 | 右上 | 右下 | 左下 */
    width: 65vw;
	height: auto;
	margin: 15% 0 5% 7%;
	
}

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

/* flow 主な文章用文字*/
.flow_03_moji{
    font-size: max(2vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.1em;
    line-height: 2;
  margin: 5vw 0 5vh 10vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}
.flow_04_moji{
    font-size: max(2vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.1em;
    line-height: 2;
  margin: 5vw 0 5vh 35vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}
.flow_05_moji{
    font-size: max(2vw);
    color: #6F5349;
    font-weight: 500;	
    letter-spacing: 0.1em;
    line-height: 2;
  margin: 5vw 0 5vh 13vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	
}



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

/* price */


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

}


/* flow タイトル部分 */

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


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

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

.price_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: 3vw 0 0 -5vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


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

/*ボタン*/

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

.ao_botan_price{
	position:relative;
	z-index: 11;
	border: solid 5px #68C9D8; 
	background-color:#19ACC3;
	 border-radius: 30px;	/* 左上 | 右上 | 右下 | 左下 */
     width: 40vw;
	height:auto;
	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: 40vw;
	height: auto;
	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(2vw);
    color: #FFFFFF;
    font-weight: 700;	
    letter-spacing: 0.1em;
	text-align: center;
  margin: 1vh 0 1vh 0vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */
}

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


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

.renkei_midori_title{
	position:relative;
	z-index: 11;
	border: solid 5px #B9E295; 
	background-color:#74C12C;
	border-radius: 10px;	/* 左上 | 右上 | 右下 | 左下 */
    width: 35vw;
	height: auto;
	margin: 2vh 0 2vh 25vw; /* ボックスの位置 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */	
}

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


/* 緑ボタン　白抜き文字部分　 */
.renkei_midori_title_moji{
	align-content: center;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-size: max(2.5vw);
    color: #FFFFFF;
    font-weight: 700;	
    letter-spacing: 0.1em;
	text-align: center;
    margin:1vh 0 1vh 0vw; /*白抜き文字の位置 */
	transition-duration: .4s; /* ボタンアニメーションホバー用設定 */
}

/* <!--サービスプラン 説明　ここまで　------------------------------------------------------->  */
		
	
	
/*----------------------------
* inuneko_slider
*----------------------------*/

/* inuneko_slider */

.inuneko_slider_eria{
	z-index: 10;
	position:relative;
	height: 35vw;
	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:3.5vw;
	left: 72vw;
}

.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: 53% 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: 40vh;
	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;
}
/*下地　波ピンク色 */
		
		
	
} /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------タブレット用ここまで--------->*/	

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------1000px サイズ調整用--------->*/	




/* 1500px start */
/*for */
@media screen and (min-width:1800px) {
	
	
body {
  width: auto/* 子要素にflotを使っているので、背景を正しく表示するためwidth height 両要素の指定 */

}


#wrapper{
width: auto;
	height: 13000px;
}


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

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

.service_erea_title{
	margin: 3900px 0 0 13vw; /* 完全に中央に配置するため、上・左の margin を負の数に設定 */
}


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

/* flow */


.flow_content{
	top:5100px;
}

}/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------1000px サイズ調整用-　ここまで-------->*/	


@media screen and (min-width:2000px) {


#wrapper{
width: auto;
	height: 13500px;
}
}