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

	+ wrapper
		- header
		- footer

-----------------------------------------*/


/*----------------------------------------
	body
-----------------------------------------*/

html {
 visibility: hidden;
}

html.wf-active {
 visibility: visible;
animation: fadeIn 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

html{
		font-size: 62.5%;
		box-sizing: border-box;
	}


a { transition:opacity .2s; }
a,a:visited { color: #333;text-decoration: none; }
a:hover { opacity: .7; }

body {
 font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 400;
line-height:2.5;
font-size:  1.6rem;
color: #333;
min-width:100%;
width:100%;
}

.en {
font-family: "Poppins", sans-serif;
font-weight:800;
}



/*縦書き*/
.text-vertical{
writing-mode:vertical-rl;
-ms-writing-mode:tb-rl;
-moz-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
}

.pc{
	display:block;
}
.sp{
	display:none;
}

.map {
overflow: hidden;
padding-top: 0;
position: relative;
	height:400px;  
}
.map iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	
	height:400px;  
}
/*----------------------------------------
	wrapper
-----------------------------------------*/
.wrap_top{
	background-color: #e3eef0;
}
.wrap_v3{
	background:url("../img/01_v3/v3_bg.jpg") no-repeat top center #e3eef0;
}
.wrap_pet{
	background:url("../img/02_pet/pet_bg.jpg") repeat-y top center #ffe86c;
}
/*----------------------------------------
	header
-----------------------------------------*/
header .header_inner_sp{
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 100;
	position: fixed;
	padding: 50px 70px 0 40px;
	width: 100%;
	top:0;
	z-index:9999;
}

.globalLogo dl{
	text-align: center;
padding: 10px 0 0 20px;
}	
.globalLogo h1{
	font-size: 1.2rem;
	font-weight: 700;
}	
.globalMenu ul{
	display: flex;
	align-items: center;
}
.globalMenu .contact a{
	display: block;
	background: #333;
	border-radius: 50px;
	line-height: 1;
	padding: 20px 30px;
	color: #fff;
	font-weight: 800;
	margin-right: 20px;
}
.globalMenu .shop a{
	display: block;
	background:url("../img/cmn_head_shopico.png")no-repeat left 20px center #f2d11d;
	border-radius: 50px;
	line-height: 1;
	padding: 20px 30px 20px 50px;
	color: #333;
	font-weight: 800;
}

.page_head{
	background: #fff;
	border-radius: 0 0 50px 50px;
	padding: 10px 70px 10px 40px!important;
}
/*----------------------------------------
	fixed-banner
-----------------------------------------*/
.fixed-banner {
	position: fixed;
	z-index: 999;
	right: 10px;
	top: 50%;
	cursor: pointer;
  transition: .3s;
	/*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
	animation: slidebn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slidebn {
  0% {
    transform: translate(0,-50%);
	  opacity: 1;
  }
  100% {
    transform: translate(100px,-50%);
    opacity: 0;
  }
  40%,100% {
    opacity: 0;
  }
}

/*このクラスが付与されると表示する*/
.is-active{
  opacity: 1;
  visibility: visible;
	animation: slidebn-active 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slidebn-active {
  0% {
    transform: translate(100px,-50%);
    opacity: 0;
  }
  100% {
    transform: translate(0,-50%);
  }
  40%,100% {
    opacity: 1;
  }
}

/*----------------------------------------
	title
-----------------------------------------*/
.main_ttl{
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: calc(22px + 22 * (100vw - 360px) / 840); 
	line-height: 1.3;
	padding: 0 0 0 50px;
	color:#388e9b;
	background: url("../img/cmn_ttl_ico.png") no-repeat center left;
}

.main_ttl_v3{
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: calc(42px + 10 * (100vw - 360px) / 840); 
	line-height: 1.3;
	padding: 0 0 0 50px;
	color:#388e9b;
	background: url("../img/cmn_ttl_ico.png") no-repeat center left;
	text-align: center;
	display: inline-block;
	margin: 0 auto 50px auto;
}
.main_ttl_pet{
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: calc(42px + 10 * (100vw - 360px) / 840); 
	line-height: 1.3;
	padding: 0 0 0 50px;
	color:#fa9f00;
	background: url("../img/cmn_ttl_ico_pet.png") no-repeat center left;
	text-align: center;
	display: inline-block;
	margin: 0 auto 50px auto;
}
.main_ttl_wrap{
	margin: 0 auto;
	text-align: center;
}

.page_ttl{
	display: flex;
	margin-bottom: 5%;
}
.page_ttl .page_no{
	margin-right: 20px;
}
.page_ttl dt{
	font-size: calc(9px + 8 * (100vw - 360px) / 840); 
	font-weight: 800;
	line-height: 1.5;
}
.page_ttl dd{
	font-weight: 800;
	font-size: calc(22px + 10 * (100vw - 360px) / 840); 
	line-height: 1.5;
}
/*----------------------------------------
	wide
-----------------------------------------*/
main{
	box-sizing: border-box;
}
.cmn_inner_wide {
	position: relative;
	margin: 0 auto;
	padding: 0 40px;
}
.cmn_inner {
	position: relative;
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 40px;
}
.cmn_inner_page {
	position: relative;
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 7%;
}
.cmn_other_page {
	background: #fff;
	border-radius: 50px;
	padding: 8% 0;
	margin:250px 8% 0 8%;
	position: relative;
}
.cmn_other_page_last {
	background: #fff;
	border-radius: 50px;
	padding: 8% 0;
	margin:250px 8% 10% 8%;
	position: relative;
}
.cmn_bg {
	background: #fff;
	border-radius: 50px;
	padding: 8% 0;
	margin:80px 8% 0 8%;
	position: relative;
}
.cmn_bg {
	background: #fff;
	border-radius: 50px;
	padding: 8% 0;
	margin:80px 8% 0 8%;
	position: relative;
}
.cmn_line {
	padding-bottom: 8%;
	margin-bottom: 8%;
	background: url("../img/cmn_page_line.png") repeat-x bottom left;
}
.cmn_line_pet {
	padding-bottom: 8%;
	margin-bottom: 8%;
	background: url("../img/cmn_page_line_pet.png") repeat-x bottom left;
}
.cmn_contents_box{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.l_contents_box{
	width: 50%;
	box-sizing: border-box;
}
.r_contents_box{
	width: 45%;
	box-sizing: border-box;
}
.cmn_contents_box .pic{
	display: flex;
	justify-content: center;
}
/*----------------------------------------
	privacy_box
-----------------------------------------*/
.privacy_box li{
	list-style: decimal;
}
.privacy_box h4{
	font-weight: 800;
	font-size: calc(18px + 10 * (100vw - 360px) / 840);
	margin: 80px 0 30px 0;
}
/*----------------------------------------
	footer
-----------------------------------------*/

footer{
	background: #fff;
	padding:5% 0;
	margin: 0 auto;
}
footer .cmn_inner{
	display: flex;
	justify-content: space-between;
}
footer .foot_area{
	width: 30%;
}
footer .foot_area dl{
	display: flex;
}
footer .foot_area dt{
	padding-top: 10px;
	width: 110px;
}
footer .foot_area dd{
	font-weight: 700;
	line-height: 2;
	flex: 1;
}
footer .online{
	display: block;
	background: #f2d11d;
	padding: 20px;
	margin: 30px 0;
	text-align: center;
	border-radius: 20px;
	width: 200px;
}
footer .online p{
	font-weight: 700;
	background: url("../img/cmn_foot_ico.png")no-repeat left center;
	padding: 0 0 0 30px;
	display: inline-block;
}
footer .foot_area li a{
	display: block;
	font-weight: 700;
	line-height: 1.3;
	background: url("../img/cmn_foot_arrow.png")no-repeat right center;
	border-bottom: 1px solid #c9c9c9;
	padding: 10px 0;
}
footer .foot_area li:last-of-type a{
	border-bottom: none;
	padding: 10px 0 0 0;
}
footer .map_area{
	width: 65%;
}
.foot_copy{
	font-size: 1.2rem;
	text-align: right;
	margin-top: 10px;
}
/*ページトップボタン*/
.page-top{
	position: fixed;
	right: 40px;
	bottom: 40px;
	z-index: 9999;
	background: #ffffff url("../img/cmn_pagetop.png")no-repeat center center;
	display: block;
	border:3px #a1d4dc solid;
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

/*media Queries タブレットサイズ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1200px) {

/*----------------------------------------
	cmn_inner
-----------------------------------------*/
.cmn_contents_box{
	display: block;
}
.l_contents_box{
	width: auto;
}
.r_contents_box{
	width: auto;
	text-align: center;
	margin: 7% auto 0 auto;
}
}

/*media Queries スマートフォンサイズ（950px以下）で適応したいCSS - スマホ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 950px) {



body {

line-height:2;
font-size:  1.4rem;
}
.pc{
	display:none;
}
.sp{
	display:block;
}

/*----------------------------------------
	header
-----------------------------------------*/
	
header .header_inner_sp{
	padding: 3% 4% 3% 6%;
	background: #fff;
	border-radius: 50px;
	margin: 5% 4% 0 4%;
	width: 92%;
}

.globalLogo dt img{
	width: 60px;
}	
.globalLogo dl{
	display: flex;
	text-align: left;
padding: 0;
}	
.globalLogo dd{
	font-size: 1.2rem;
	line-height: 1.5;
	margin-left: 10px;
}	
.globalMenu ul{
	display: flex;
	align-items: center;
}
.globalMenu .contact a{
	width: 50px;
  height: 50px;
  border-radius: 50%;
	padding: 0;
	margin-right: 6px;
	display: flex;
	align-items: center;
	align-content: center;
}
.globalMenu .shop a{
	width: 50px;
  height: 50px;
  border-radius: 50%;
	background-image:none;
	padding: 0;
	display: flex;
	align-items: center;
	align-content: center;
}
.globalMenu a img{
	width: 25px;
  height: 25px;
	margin: 0 auto;
	text-align: center;
}
.page_head{
	padding: 3% 4% 3% 6%!important;
	border:5px solid #b7dbe1;
}
/*----------------------------------------
	fixed-banner
-----------------------------------------*/

.fixed-banner {
	bottom: 10px;
	right: 0;
	left:0;
	top:auto;
	width: 90%;
	display: block;
	margin: 0 auto;
	animation: slideIn01 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.fixed-banner ul{
	display: grid;
	gap:10px;
	justify-content: space-between;
	align-items: center;
	grid-template-columns: 1fr 1fr;
}
@keyframes slidebn01 {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
  }
  40%,100% {
    opacity: 1;
  }
}
/*----------------------------------------
	title
-----------------------------------------*/
.main_ttl {
	font-size: calc(34px + 22 * (100vw - 360px) / 840); 
}

.main_ttl_v3{
	font-size: calc(36px + 10 * (100vw - 360px) / 840); 
	padding: 0 0 0 45px;
	background-size: 35px;
	margin: 0 auto 15% auto;
}

.page_ttl{
	display: flex;
	margin-bottom: 5%;
}
.page_ttl .page_no{
	margin-right: 15px;
	width: 60px;
}
.page_ttl dl{
	flex: 1;
}
.page_ttl dt{
	font-size: calc(14px + 10 * (100vw - 360px) / 840); 
	font-weight: 800;
	line-height: 1.5;
}
.page_ttl dd{
	font-weight: 800;
	font-size: calc(21px + 10 * (100vw - 360px) / 840); 
	line-height: 1.5;
}
/*----------------------------------------
	wide
-----------------------------------------*/
main{
	padding:0;
}
.cmn_inner_wide {
	padding: 0 7%;
}
.cmn_inner {
	padding: 0 7%;
}
.cmn_inner_page {
	padding: 0 10%;
}
.cmn_other_page {
	border-radius:60px;
	padding: 18% 0;
	margin:35% 0 0 0;
}
.cmn_other_page_last {
	border-radius:60px;
	padding: 18% 0;
	margin:35% 0 35% 0;
}
.cmn_bg {
	border-radius:60px;
	padding: 18% 0;
	margin:15% 0 0 0;
}
.cmn_line {
	padding-bottom: 15%;
	margin-bottom: 15%;
	background-size: 20px;
}
.cmn_line_pet {
	padding-bottom: 15%;
	margin-bottom: 15%;
	background-size: 20px;
}
.cmn_contents_box .pic{
	width: 80%;
}
.cmn_contents_box .pic_all{
	width: auto;
}
/*----------------------------------------
	privacy_box
-----------------------------------------*/
.privacy_box h4{
	margin: 15% 0 10px 0;
}
/*----------------------------------------
	footer
-----------------------------------------*/

footer{
	padding:12% 0 30% 0;
	margin: 0 auto;
}
footer .cmn_inner{
	display: block;
}
footer .foot_area{
	width: auto;
}
footer .foot_area dl{
	display: block;
	text-align: center;
}
footer .foot_area dt{
	padding: 0 0 20px 0;
	width: auto;
}

footer .foot_area ul{
	margin-bottom: 20px;
}
footer .online{
	display: flex;
	justify-content: center;
	align-items: center;
	padding:7px 10px;
	margin: 30px 0;
	text-align: center;
	border-radius: 10px;
	width: auto;
}
footer .online .pic{
	width: 45px;
	margin-right: 20px;
}
footer .online p{
	display: block;
}


footer .map_area{
	width: auto;
}
.foot_copy{
	text-align: center;
}
	
.map {
overflow: hidden;
padding-top: 0;
position: relative;
	height:250px;  
}
.map iframe{
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 100%;
	
	height:250px;  
}
footer .foot_area .map{
	width: auto;
	margin: 6%;
}

/*ページトップボタン*/
.page-top{
	bottom: 28%;
	right: 4%;
}
	
}/*解像度950px以下*/

/*media Queries スマホサイズ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 800px) {

.page-top{
	bottom: 24%;
}
}
/*media Queries スマホサイズ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 700px) {

.page-top{
	bottom: 20%;
}
}
/*media Queries スマホサイズ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {

/*----------------------------------------
	title
-----------------------------------------*/
.main_ttl {
	background-size: 33px;
	padding: 0 0 0 40px;
}
	
.page-top{
	width: 40px;
	height: 40px;
	background-size: 10px;
	bottom: 14%;
}
}