@charset "UTF-8";


/*----------------------------------------
	wrapper
-----------------------------------------*/



/*----------------------------------------
	main_visual
-----------------------------------------*/

.main_visual{
	position:relative;
	top:0;
	margin: 0 40px;
	padding: 40px 0 0 0;
}

.main_visual .main-slider{
	margin: 0 auto;
	text-align: center;
	position:relative;
	z-index: 1!important;
}
.main_visual a:hover{
	opacity: 1;
}
.main_visual .v3_wrap{
	background:url("../img/main_v3_bg.jpg") no-repeat top center #a1d4dc;
	border-radius: 40px;
}
.main_visual .pet{
	background:url("../img/main_pet.jpg") no-repeat top center #ffe86c;
	border-radius: 40px;
}
.main_visual .mask{
	background:url("../img/main_mask_top.png") no-repeat top left,url("../img/main_mask_bottom.png") no-repeat bottom right;
	border-radius: 40px;
}
.main_visual .inner_mask{
	display: grid;
	height: 570px;
	max-width: 1100px;
	padding: 140px 60px 40px 60px;
	margin: 0 auto;
	grid-template-columns: 1fr 2fr 1fr;
	direction: rtl;
}
.main_visual .c_item{
	margin: -20px 0 0 0;
}
.main_visual .l-ex{
	text-align: left;
	direction: ltr;
	font-weight: 700;
	line-height: 2;
}
.main_visual .l-ex .caption{
	color: #127b8b;
}
.main_visual .l-ex .caption_pet{
	color: #009944;
}
.main_visual .l-ex .name{
	font-weight: 800;
	font-size: calc(12px + 3 * (100vw - 360px) / 840); 
	line-height: 1.3;
	margin-bottom: 6px;
}
.main_visual .l-ex h2{
	font-weight: 800;
	font-size: calc(20px + 14 * (100vw - 360px) / 840); 
	line-height: 1.2;
	margin-bottom: 10px;
}
.main_visual .l-ex small{
	text-align: left;
	display: block;
	font-weight: 400;
}
.main_visual .l-ex .ex_icon_img{
	margin: 20px 0;
	width: 80%;
}
.main_visual .r_copy{
	padding-right: 15%;
}


	/* thumbnail */

.thumb_wrap {
	position: relative;
	width: 100%;
	display: grid;
  justify-content: flex-end;
}

.thumbnail-slider .slick-track {
	width: 100%;
  transform: unset !important;
}

.thumbnail-slider {
  opacity: 1;
  transition: opacity .3s linear;
	z-index: 99!important;
	position: absolute;
	top:-132px;
	right:0px;
	width: 100%;
}
.thumbnail-img {
  opacity: 1;
	z-index: 99!important;
	width: 100%;
}
.thumbnail-slider .slick-current {
  opacity: 0;
	position: absolute;
	top:-300px;
}
/*----------------------------------------
	news
-----------------------------------------*/

.news{
	margin:-230px 40px 12% 40px;
	background:url("../img/00_index/news_bg.png")no-repeat left center #fff;
	border-radius: 20px;
	padding:50px 10%;
	display: grid;
	align-items: center;
	grid-template-columns:240px 1fr;
}

.news .news_ttl em{
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: calc(22px + 22 * (100vw - 360px) / 840); 
	letter-spacing: 0.1em;
	line-height: 1.3;
	margin-bottom: 6px;
	color:#388e9b;
}
.news .news_ttl p{
	background: url("../img/00_index/news_ttl_ico.png")no-repeat left center;
	font-weight: 400;
	font-size: 22px; 
	line-height: 1.5;
	padding: 0 0 0 30px;
}
.news ul{
	padding-left: 40px;
	border-left: 1px solid #83cbd6;
}
.news li{
	margin: 6px 0;
}
.news dl{
	flex: 1;
	z-index:999;
}
.news dt{
	font-weight: 700;
	color:#54b1bf;
	line-height: 1.7;
}
.news dd{
	font-weight: 700;
	color:#54b1bf;
	margin-bottom: 10px;
	line-height: 1.7;
}
.news dd:last-of-type{
	margin-bottom: 0px;
}
/*----------------------------------------
	about
-----------------------------------------*/

.about{
	margin:0 auto 12% auto;
	background:url("../img/00_index/about_bg.png")no-repeat top left;
}
.about .about_copy{
	margin:0 0 50px 20%;
}
.about .about_copy h4{
	font-weight: 700;
}
.about .about_copy h4 dt{
	font-weight: 800;
	font-size: calc(25px + 10 * (100vw - 360px) / 840); 
	font-feature-settings: "vpal";
	line-height: 2;
}
.about .ab_copy_area {
	display: grid;
	grid-template-columns:1fr 4.5fr;
	width: 100%;
	margin-top: 60px;
}
.about .ab_copy_area .ab_c_bg{
	border-radius: 50px 0 0 50px;
	background:url("../img/00_index/about_copy_bg.jpg")no-repeat center center;
	background-size: 130%;
	height: 100%;
	width: 100%;
}
.about_ex_container{
	display: grid;
	grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
}
.about_ex_container .ex_box01,.about_ex_container .ex_box02{
	background:url("../img/00_index/about_ex_bg.png")no-repeat center top #54b1bf;
	background-size: 60%;
	border-radius: 40px;
	padding: 7% 10%;
	color: #fff;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-column-gap: 30px;
}
.about_ex_container .ex_box01 dt,.about_ex_container .ex_box02 dt{
	font-weight: 800;
	font-size: calc(13px + 10 * (100vw - 360px) / 840); 
	line-height: 1.5;
	margin-bottom: 20px;
}
.about_ex_container .ex_box01 dd,.about_ex_container .ex_box02 dd{
	line-height: 2;
}
.about_ex_container .ex_box01 .ex_illbox li,.ex_ill{
	background: #fff;
	color: #54b1bf;
	font-size: calc(8px + 6 * (100vw - 360px) / 840);
	line-height: 1.5;
	text-align: center;
	padding:10px 15px;
	font-weight: 700;
	border-radius: 10px;
	margin-bottom: 10px;
}
.about_ex_container .ex_ill_pic{
	margin-top: 10px;
}
.about_ex_container .ex_ttl{
	border-radius: 50px;
	background: #fff;
	color: #54b1bf;
	line-height: 1.5;
	text-align: center;
	padding:7px 15px;
	font-weight: 700;
}
.about_ex_container .ex_box01{
	grid-area: 1 / 1 / 2 / 2;
}
.about_ex_container .ex_box02{
	grid-area:2 / 1 / 3 / 2;
}
.about_ex_container .ex_box03{
	background: #fff;
	border-radius: 40px;
	padding: 7% 10%;
	grid-area: 1 / 2 / 3 / 3;
}
.about_ex_container .ex_box03 .box03_ttl{
	font-weight: 800;
	font-size: calc(13px + 10 * (100vw - 360px) / 840); 
	line-height: 1.5;
	margin-bottom: 20px;
	color: #54b1bf;
}
.about_ex_container .ex_box03 ul{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 30px;
}
.about_ex_container .ex_box03 dt{
	border-radius: 50px;
	background: #54b1bf;
	color: #fff;
	line-height: 1.5;
	text-align: center;
	padding:7px 15px;
	font-weight: 700;
	margin-bottom: 30px;
}
.about_ex_container .ex_box03 .silver{
	background: #e6e6e6;
	color: #333;
}
.about_ex_container .ex_box03 p{
	margin: 40px auto;
	line-height: 2;
}
.about_safety_container{
	margin: 10% auto 0 auto!important;
	text-align: center;
}
.about_safety_container h3{
	font-weight: 800;
	font-size: calc(16px + 14 * (100vw - 360px) / 840); 
	line-height: 1.5;
	margin: 0 auto 5% auto;
	text-align: center;
}
.about_safety_container .ico_list{
	display: grid;
	grid-column-gap: 10px;
	 grid-template-columns: repeat(5,1fr);
	width: 80%;
	margin: 0 auto 5% auto;
	text-align: center;
}
.about_safety_container .ico_list li:nth-child(2),
.about_safety_container .ico_list li:nth-child(4){
	padding-top: 20%;
}
.safety_copy{
	background:url("../img/00_index/about_safety_bg.png")no-repeat center center;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 9% 0;
	background-size: 100%;
	margin: 0 3%;
}
.safety_copy li{
display: grid;
	justify-content: center;
	padding: 0 2%;
}
.safety_copy h4{
font-weight: 800;
	font-size: calc(25px + 10 * (100vw - 360px) / 840); 
	text-align: left;
	line-height: 1.5;
}

/*----------------------------------------
	product
-----------------------------------------*/

.product{
	margin:0 auto 12% auto;
	background:url("../img/00_index/pro_g_top.png")no-repeat top center,url("../img/00_index/pro_g_btm.png")no-repeat bottom center #fff;
	padding: 15% 0;
	text-align: center;
}
.product h3{
	display:inline-block;
	justify-content: center;
}
.product h4{
	font-weight: 800;
	font-size: calc(20px + 10 * (100vw - 360px) / 840); 
	text-align: left;
	line-height: 1.5;
	text-align: center;
	margin: 5% 0;
}
.product ul{
	display: grid;
	justify-content: center;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 30px;
	width: 80%;
	margin: 0 auto;
}

/*----------------------------------------
	philosophy
-----------------------------------------*/

.philosophy{
	margin:0 auto 12% auto;
}
.philosophy p{
	margin:0 15% 50px 20%;
}
.philosophy .ph_ttl{
	display: grid;
	grid-template-columns: 170px 1fr;
	grid-column-gap: 30px;
	padding: 7% 0;
}
.philosophy h4{
	font-weight: 700;
}
.philosophy h4 dt{
	font-weight: 800;
	font-size: calc(25px + 10 * (100vw - 360px) / 840); 
	font-feature-settings: "vpal";
	line-height: 2;
}

/*----------------------------------------
	company
-----------------------------------------*/

.company{
	margin:0 auto 30px auto;
}
.company p{
	font-weight: 800;
}
.company .company_inner{
	background: #fff;
	border-radius: 50px;
	display: grid;
	grid-template-columns: 1fr 2fr;
	box-sizing: border-box;
	padding: 5% 7%;
	grid-column-gap: 30px;
}
.company .main_ttl{
	font-size: calc(18px + 22 * (100vw - 360px) / 840); 
}

.company dl{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px #c9c9c9 solid;
	padding: 10px 0;
}
.company dl:last-of-type{
	border-bottom: none;
}

/*----------------------------------------
	contact_btn
-----------------------------------------*/
.contact_btn{
	margin:0 auto 12% auto;
}
.contact_btn p,.contact_btn dd{
	font-weight: 800;
}
.contact_btn p{
	font-size: 2.2rem;
	line-height: 2;
}
.contact_btn .contact_inner{
	background:url("../img/00_index/contact_bg.png")no-repeat left center #54b1bf;
	border-radius: 50px;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 2fr;
	box-sizing: border-box;
	padding: 5% 7%;
	grid-column-gap: 30px;
	color: #fff;
}
.contact_btn dt{
	font-size: calc(18px + 22 * (100vw - 360px) / 840); 
	line-height: 1.2;
}

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

.main_visual .r_copy{
	padding-right: 0%;
}	
/*----------------------------------------
	about
-----------------------------------------*/
.about_ex_container{
	display: block;
}
.about_ex_container .ex_box01,.about_ex_container .ex_box02{
	margin-bottom: 40px;
}
}
/*media Queries タブレットサイズ（951px～1000px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 951px) and (max-width: 1100px) {
	
}


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

/*----------------------------------------
	main_visual
-----------------------------------------*/

.main_visual{
	 position: relative;
	margin: 0 auto;
	padding: 0;
}

.main_visual .center{
	margin: 0 auto;
	text-align: center;
}
.main_visual .v3_wrap{
	background:url("../img/main_v3_bg_sp.jpg") no-repeat top left #a1d4dc;
	background-size: 100%;
	border-radius: 0;
}
.main_visual .pet{
	background:url("../img/main_pet_bg_sp.jpg") no-repeat top left #ffe86c;
	background-size: 100%;
	border-radius: 0;
}
.main_visual .mask{
	background:none;
	border-radius: 0;
}
	
.main_visual .inner_mask{
	display: block;
	height: auto;
	padding:35% 7% 40% 7%;
	margin: 0 auto;
}
.main_visual .r_copy{
	padding: 0 7%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}
.main_visual .c_item{
	padding:2% 7% 3% 7%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}
.main_visual .l-ex{
	text-align: left;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	direction: ltr;
}
.main_visual .l-ex p{
	line-height: 1.7;
	font-size: calc(14px + 10 * (100vw - 360px) / 840); 
}
.main_visual .l-ex .caption{
	color: #127b8b;
}
.main_visual .l-ex .name{
	font-weight: 800;
	font-size: calc(14px + 20 * (100vw - 360px) / 840); 
	line-height: 1.6;
}
.main_visual .l-ex h2{
	font-weight: 800;
	font-size: calc(24px + 30 * (100vw - 360px) / 840); 
	line-height: 1.5;
	margin-bottom: 10px;
}
.main_visual .l-ex small{
	text-align: left;
	display: block;
	font-weight: 400;
}
.main_visual .l-ex .ex_icon_img{
	margin: 10px 0 5px 0;
	width: auto;
}
.main_visual .l-ex small{
	margin: 0 0 0 5px;
}

	/* thumbnail */

.thumb_wrap {
	position: absolute;
	width: 90%;
	display: block;
	margin: 0 auto;
	bottom:-12%;
	left: 5%;
}
.thumbnail-slider {
  opacity: 1;
	position: relative;
}
.thumbnail-img {
  opacity: 1;
	z-index: 99!important;
	width: 100%;
}
.thumbnail-slider .slick-current {
  opacity: 0;
	position: absolute;
	top:-300px;
}

/*----------------------------------------
	news
-----------------------------------------*/

.news{
	margin:10% 7% 25% 7%;
	background:url("../img/00_index/news_bg_sp.png")no-repeat right top #fff;
	background-size: 30%;
	border-radius: 15px;
	padding: 6% 8%;
	display: block;
}

.news .news_ttl em{
	margin-bottom: 10px;
	font-size: calc(34px + 22 * (100vw - 360px) / 840); 
}
.news .news_ttl p{
	font-size: 14px; 
	background-size: 18px;
	line-height: 1.5;
	padding: 0 0 0 24px;
}
.news ul{
	padding-left: 0;
	border-left: 0;
}
.news li{
	margin: 12px 0;
}
.news dl{
	display: block;
}
.news dt{
	width: auto;
	line-height: 2;
	font-size: 12px; 
}
.news dd{
	line-height: 2;
}

	
/*----------------------------------------
	about
-----------------------------------------*/

.about{
	margin:0 auto 25% auto;
	background:url("../img/00_index/about_bg.png")no-repeat top left;
}
.about .about_copy{
	margin:0 0 10% 7%;
}
.about .about_copy h4{
	font-weight: 700;
}
.about .about_copy h4 dt{
	font-weight: 800;
	font-size: calc(20px + 10 * (100vw - 360px) / 840); 
	font-feature-settings: "vpal";
}
.about .ab_copy_area {
	display: grid;
	grid-template-columns:1fr 4fr;
	grid-column-gap: 30px;
	margin-top: 20px;
}
.about .ab_copy_area .ab_c_bg{
	border-radius: 30px 0 0 30px;
	background:url("../img/00_index/about_copy_bg.jpg")no-repeat center center;
	background-size: 200%;
}
.about_ex_container .ex_box01,.about_ex_container .ex_box02{
	background:url("../img/00_index/about_ex_bg.png")no-repeat center top #54b1bf;
	background-size: 60%;
	border-radius: 40px;
	padding: 7% 10%;
	color: #fff;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-column-gap: 30px;
}
.about_ex_container .ex_box01 dt,.about_ex_container .ex_box02 dt{
	font-weight: 800;
	font-size: calc(13px + 10 * (100vw - 360px) / 840); 
	line-height: 1.5;
	margin-bottom: 20px;
}

.about_safety_container h3{
	font-weight: 800;
	font-size: calc(16px + 14 * (100vw - 360px) / 840); 
	line-height: 1.5;
	margin: 0 auto 5% auto;
	text-align: center;
}
.about_safety_container .ico_list{
	display: grid;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	 grid-template-columns: repeat(2,1fr);
	margin: 0 auto 5% auto;
}
.about_safety_container .ico_list li:nth-child(2),
.about_safety_container .ico_list li:nth-child(4){
	padding-top: 0%;
}
.safety_copy{
	background:url("../img/00_index/about_safety_bg_sp.png")no-repeat center center;
	padding:24% 13% 10% 18%;
	margin: 0 3%;
	background-size: 100%;
}
.safety_copy li{
	padding: 0 2%;
}
.safety_copy h4{
	font-size: calc(20px + 10 * (100vw - 360px) / 840); 
}

/*----------------------------------------
	product
-----------------------------------------*/

.product{
	margin:0 auto 25% auto;
	background-size: 100%;
	padding: 20% 0;
	text-align: center;
}

.product h4{
	font-size: calc(17px + 10 * (100vw - 360px) / 840); 
	margin: 5% 0 8% 0;
}
.product ul{
	display: block;
}
.product li:first-of-type{
	margin-bottom: 10%;
}	
	
	
/*----------------------------------------
	philosophy
-----------------------------------------*/

.philosophy{
	margin:0 auto 25% auto;
}
.philosophy p{
	margin:0 0 50px 0;
}
.philosophy .ph_ttl{
	display: grid;
	grid-template-columns:12% 1fr;
	padding: 7% 0;
}

.philosophy h4 dt{
	font-size: calc(20px + 10 * (100vw - 360px) / 840); 
	line-height: 1.5;
}
/*----------------------------------------
	company
-----------------------------------------*/

.company{
	margin:0 auto 20px auto;
}
.company .company_inner{
	border-radius: 20px;
	display: block;
	padding: 8% 8%;
}
.company .main_ttl{
	font-size: calc(25px + 22 * (100vw - 360px) / 840); 
}

.company dl{
	display: block;
	padding: 10px 0;
}
	
/*----------------------------------------
	contact_btn
-----------------------------------------*/
.contact_btn{
	margin:0 auto 25% auto;
}
.contact_btn p,.contact_btn dd{
	font-weight: 800;
}
.contact_btn p{
	font-size: 1.4rem;
	line-height: 1.7;
}
.contact_btn dl{
	margin-bottom: 5%;
}
.contact_btn .contact_inner{
	background:url("../img/00_index/contact_bg_sp.png")no-repeat left top #54b1bf;
	background-size: 100%;
	border-radius: 20px;
	display: block;
	padding: 8% 8%;
}
.contact_btn dt{
	font-size: calc(25px + 22 * (100vw - 360px) / 840); 
}
	
}

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

.thumb_wrap {
	position: absolute;
	width: 90%;
	display: block;
	margin: 0 auto;
	bottom:-15%;
	left: 5%;
}
	
/*----------------------------------------
	about
-----------------------------------------*/


.about_ex_container .ex_box01,.about_ex_container .ex_box02{
	border-radius: 30px;
	padding: 10%;
	display: block;
}
.about_ex_container .ex_box01 dl,.about_ex_container .ex_box02 dl{
	margin-bottom: 20px;
}
.about_ex_container .ex_box01 dt,.about_ex_container .ex_box02 dt{
	font-size: calc(18px + 10 * (100vw - 360px) / 840); 
}
.about_ex_container .ex_box01 dd,.about_ex_container .ex_box02 dd{
	line-height: 1.7;
}
.about_ex_container .ex_box01 .ex_illbox li,.ex_ill{
	font-size: calc(14px + 10 * (100vw - 360px) / 840);
}
.about_ex_container .ex_ttl{
	margin: 20px 0 10px 0;
}
.about_ex_container .ex_box03{
	border-radius: 30px;
	padding:10%;
}
.about_ex_container .ex_box03 .box03_ttl{
	font-size: calc(18px + 10 * (100vw - 360px) / 840); 
}
.about_ex_container .ex_box03 ul{
	display: block;
}
.about_ex_container .ex_box03 li{
	margin-bottom: 20px;
}

.about_ex_container .ex_box03 p{
	margin: 30px auto;
	line-height: 2;
}
.about_ex_container .ex_box01,.about_ex_container .ex_box02{
	margin-bottom: 7%;
}
	
}
/*media Queries スマホサイズ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {

.thumb_wrap {
	position: absolute;
	width: 90%;
	display: block;
	margin: 0 auto;
	bottom:-20%;
	left: 5%;
}	
}