@charset "utf-8";
*{
	font-family: "Noto Sans Japanese", sans-serif;
}
body{
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
}
h1,h2{
	padding: 0;
	margin: 0;
}
img{
	display: block;
	width: 100%;
	height: auto;
}
.pc{
	display: block;
}
.sp{
	display: none;
}
.intro{
	max-width: 1200px;
	margin: 60px auto 60px;
	padding: 0 3%;
	box-sizing: border-box;
}
.foryourdog-content{
	background-color: #f3eee4;
	padding: 100px 0% 0px;
}
.foryourdog-1 .inner{
	max-width: 1050px;
	margin: 0px auto 0;
	padding-bottom: 6%;
}
.foryourdog-1{
	background-image: url(../img/wave1.svg);
	background-repeat: no-repeat;
	background-position: center 270px;
	padding: 0 5%;
}
.foryourdog-2,
.foryourdog-3,
.foryourdog-4{
	background-color: #ede5d6;
	padding: 0 5%;
}
.foryourdog-2 .inner,
.foryourdog-3 .inner,
.foryourdog-4 .inner{
	max-width: 1020px;
	margin: 0px auto 0;
	padding-bottom: 4%;
}
.foryourdog-4 .inner{
	max-width: 1200px;
	margin: 0px auto 0;
	padding-bottom: 13%;
}
.foryourdog-5 .inner{
	max-width: 610px;
	margin: 30px auto 0;
	padding-bottom: 7%;
	position: relative;
}
.foryourdog-5{
	display: block;
	width: 100%;
	position: relative;
	margin-top: -100px;
	overflow: hidden;
	background-image: url(../img/wave2.svg);
	background-repeat: no-repeat;
	box-sizing: border-box;
	background-position: center -68px;
	padding: 0 3%;
}

.foryourdog-6 .inner{
	max-width: 700px;
	margin: 30px auto 0;
	padding-bottom: 5%;
	position: relative;
}
.foryourdog-6{
	display: block;
	width: 100%;
	position: relative;
	margin-top: -100px;
	overflow: hidden;
	background-image: url(../img/wave1.svg);
	background-repeat: no-repeat;
	background-position: center -70px;
	padding: 0 3%;
	box-sizing: border-box;
	background-color: #ede5d6;
}



/* -------clean-------
--------------------- */

.clean-1{
	background-image: url(../img/clean_bg.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: cover;
}
.clean-1 .inner{
	max-width: 1050px;
	margin: 0 auto;
	padding: 120px 5% 100px;
	
}
.clean-detail{
	max-width: 930px;
	margin: 0 auto;
	padding: 2% 5% ;
	
}
.clean-img{
	max-width: 650px;
	margin: 0 auto;
	padding: 2% 5% ;
	
}
/* -------LongLasting--------
--------------------------- */
.long-lasting-content {
    overflow: hidden;
}
.long-1 {
	padding: 10% 5% 4%;
	background-image: url(../img/circle1.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	overflow: hidden;
}
.long-1 .inner,
.long-2 .inner{
	max-width: 850px;
	margin: 0 auto;
	padding: 0 5%;
}
.long-2{
	background-color: #f3eee4;
}
.long-2 .inner{
	max-width: 1120px;
	margin: 0 auto ;
	position: relative;
}
.movie-frame{
    position: absolute;
	bottom: 8%;
    left: 6.3vw;
    width: 19%;
}
.movie-frame img{
	margin: 0 ;
	display: inline-block;
	clip-path: inset(0 0 round 23px 23px 23px 23px); 
	overflow: hidden;
	width: 100%;
}
.long-3 .inner{
	max-width: 650px;
	margin: 0 auto;
	padding: 0 5% 20px;
}
.long-3 {
	padding: 2% 5% 4% 5%;
	background-image: url(../img/circle2.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	overflow: hidden;
	background-position: bottom;
}
/* -------color--------
--------------------------- */
.color_1{
	margin-top: 80px;
	background-image: url(../img/color_bg.jpg);
	background-size: cover;
}
.color_1 .inner{
	max-width: 1000px;
	margin: 0 auto;
}
.color_2{
	background-image: url(../img/logo_bg.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center 58%;
}
.color_2 .inner{
	max-width: 740px;
	margin: 50px auto;
}
/* -------size--------
--------------------------- */
.size-content {
	background-color: #f3eee4;
	background-image: url(../img/wave3.svg);
	background-repeat: no-repeat;
	background-position: center -10px;
}
.size-content .inner{
	max-width: 1030px;
	margin: 0px auto;
	padding: 8% 3% 3% 3%;
	box-sizing: border-box;
}
.size-content .inner .size2{
	max-width: 800px;
	margin: 60px auto;
}
/* -------accordion--------
--------------------------- */
.accordion-item{
	max-width: 900px;
	margin: 30px auto;
	padding: 3%;
	padding-bottom: 60px;
}
.accordion-content{
	border: 1px solid #a58767;
	padding: 3% 3% 5% 3%;
	box-sizing: border-box;
}
.accordion-content p{
	color: #0e1b2e;
	font-weight: 500;
	font-size: 1.1em;
    letter-spacing: -0.1rem;
    line-height: 1.7em;
}
.accordion-title {
	cursor: pointer;
	font-size: 3rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
    padding: 1%;
    background-color: #a58767;
    position: relative;
}
.sub-accordion-title {
    cursor: pointer;
	margin-top: 30px;
    padding: 1%;
    border-radius: 15px;
    font-size: 2.8rem;
    font-weight: bold;
    text-align: center;
    background-color: #ede5d6;
    position: relative;
    color: #0e1b2e;
}
.arrow {
    position: absolute;
    right: 10px;
    transition: transform 0.3s ease;
	width: 50px;

}
.accordion-content, .sub-accordion-content {
    display: none;
    border-top: none;
}
.sub-accordion-content {
    padding: 3% 5%;
}
.accordion-content.open .arrow, .sub-accordion-content.open .arrow {
    transform: rotate(90deg);
}
.accordion-title::before, .sub-accordion-title::before {
	content: '';/*何も入れない*/
	display: inline-block;
	width: 48px;/*画像の幅*/
	height: 48px;/*画像の高さ*/
	background-image: url(../img/acc_arrow1.png);
	background-size: contain;
	vertical-align: middle;
    position: absolute;
    right: 10px;
    top: 50%;
	transform: translateY(-50%) rotate(180deg);
    transform-origin: center;
    transition: transform 0.3s ease;
}
.sub-accordion-title::before,.sub-accordion-title.open::before {
	background-image: url(../img/acc_arrow2.png);
	width: 40px;
    height: 40px;
}
.accordion-title.open::before, .sub-accordion-title.open::before {
	transform: translateY(-50%) rotate(0deg);
}
/* -------voice--------
--------------------------- */
.voice{
	background-image: url(../img/voice_bg_pc.jpg);
	background-repeat: no-repeat;
	padding: 5% 3%;
	background-size: cover;
}
.voice .inner{
	max-width: 1200px;
	margin: 0px auto;
	padding: 0;
}
.voice .ttl{
	max-width: 800px;
}
/* --modal-- */
.modal {
	padding: 50px 0;
  }
  
  .inner {
	width: min(100%, 1120px);
	margin: 0 auto;
	padding: 0 20px;
  }
  
  /* モーダルを開くボタン */
  .modal__trigger {
	cursor: pointer;
  }
  
  .modal__trigger:nth-child(n + 2) {
	margin-top: 60px;
  }
  
  /* モーダル本体 */
  .modal__wrapper {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
  }
  
  .modal__layer {
	height: 100%;
	background: #cdbca9cc;
	cursor: pointer;
  }
  
  .modal__container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(calc(100% - 40px), 600px);
	max-height: calc(100vh - 100px);
	padding: 20px;
	background: #fff;
  }
  
  .modal__inner {
	position: relative;
	height: 100%;
	padding:3%;
  }
  
  /* モーダルを閉じるボタン */
  .modal__close {
	position: absolute;
    top: -36px;
    right: -41px;
	width: 60px;
	height: 60px;
	background:#0e1b2e;
	cursor: pointer;
	border-radius: 50%;
	z-index: 3;
  }
  
  
  .modal__close:before,
  .modal__close:after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 3px;
	background: #fff;
	content: '';
  }
  
  .modal__close:before {
	transform: translate(-50%, -50%) rotate(45deg);
  }
  
  .modal__close:after {
	transform: translate(-50%, -50%) rotate(-45deg);
  }
  .modal__content {
    max-height: calc(100vh - 173px);
    overflow: auto;
}
  
  /* モーダル内のコンテンツ */
  .modal__text {
    margin-top: 30px;
    line-height: 1.7em;
    font-size: 1em;
    max-height: 200px;
	color: #0e1b2e;
	padding-right: 5px;
}
  .modal .btn{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
  }
  .modal .btn .modal__trigger{
	width: 19%;
	margin-block-start: 0em;
    margin-block-end: 0em;
	margin-bottom: 1%;
  }
  /* モーダル　スクロールバー */
	::-webkit-scrollbar {
	display: none;/* 元のスクロールバーを消す */
	}
	::-webkit-scrollbar-thumb {
	background: #949494;
	border-radius: 5px;
	}
	::-webkit-scrollbar-track {
	background: #e7e7e7;
	border-radius: 5px;
   }
   .simplebar-track.simplebar-horizontal {
	height: 9px;
	background: #e7e7e7;
	border-radius: 9px;
	border:1px solid #414141;	
	max-width: 372px;
	margin: 0 auto;
	}
	.simplebar-scrollbar {
	height: 9px;
	background: #949494!important;
	border-radius: 5px;
	top: 0;
	}
	.simplebar-scrollbar::before {
	background: #949494!important;
	}
	.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
	  right: auto;
	  left: 0;
	  top: 0px;
	  height: 7px;
	  min-height: 0;
	  min-width: 10px;
	  width: auto;
  }
  .simplebar-track.simplebar-vertical {
    top: 0;
    width: 5px;
}
.simplebar-track.simplebar-vertical {
    top: 0;
    width: 5px;
    background: #e6e6e6 !important;
    border-radius: 5px;
}
  /* -------about--------
--------------------------- */
	.aboutus{
	background: linear-gradient(90deg, #f6f2ea 0%, #f6f2ea 50%, #efe8da 50%, #efe8da 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 5% 3% 10%;
	box-sizing: border-box;
	}
	.aboutus .inner{
	max-width: 600px;
	margin: 0 auto;
	}
  /* -------offer---------
--------------------------- */
	.offer{
		background-color: #cdbca9;
		position: relative;
	}
	.offer::before{
		position: absolute;
		top: -14.5%;
		content: '';
		display: inline-block;
		width: 100vw;/*画像の幅*/
		height: 116px;/*画像の高さ*/
		background-image: url(../img/wave4.svg);
		background-size: 100vw;
		vertical-align: middle;
		background-repeat: no-repeat;
		background-position: bottom;
		max-width: 1920px;
	}
	.offer .inner{
		max-width: 800px;
		padding: 4% 3%;
		box-sizing: border-box;
	}
	.offer .cta{
		position: relative;
		margin-top: 30px;
	}
	.cta a img{
		max-width: 470px;
		position: absolute;
		bottom: 9%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}
  /* -------footer---------
--------------------------- */
footer{
	background-color: #0e1b2e;
	padding: 1%;
}
footer p{
	font-size: 0.8em;
	text-align: center;
	color: #fff;
}
footer p a{
	color: #fff;
	text-decoration: underline;
}
/* add cta */
.cta_btn{
	max-width: 520px;
	display: block;
	margin: 0 auto 70px;
}


@media only screen and (max-width: 1650px){
	.foryourdog-5::before {
		top: -25%;
	}
	.foryourdog-4 .inner {
		padding-bottom: 15%;
	}
	.foryourdog-6 {
		margin-top: -60px;
	}
	.movie-frame {
		position: absolute;
		bottom: 8.5%;
		left: 9.5%;
		width: 19.5%;
	}
}
@media only screen and (max-width: 1480px){
	.movie-frame {
		position: absolute;
		bottom: 8.5%;
		left: 6.8vw;
		width: 19.5%;
	}
	.size-content {
		background-position: center -40px;
	}

}
@media only screen and (max-width: 1340px){
	.foryourdog-1 {
		background-position: center 310px;
	}
	.foryourdog-4 .inner {
		padding-bottom: 17%;
	}
	.foryourdog-5::before {
		top: -20%;
	}

}
@media only screen and (max-width: 1281px){
	.movie-frame {
		position: absolute;
		bottom: 8%;
		left: 7vw;
		width: 20.5%;
	}

	
}
@media only screen and (max-width: 1150px){
	.foryourdog-1 {
		background-position: center 143%;
	}
	.foryourdog-5 {
		margin-top: -8%;
	}
	.clean-1{
		background-repeat: no-repeat;
		background-position: bottom;
	}
	.offer::before{
		top: -15%;
	}
}
@media only screen and (max-width: 950px){
	.foryourdog-1 .inner {
		padding-bottom: 11%;
	}

}



/* -----スマホサイズ------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px){
    body{
		width: 100%;
	}
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	.inner {
		width: 100%;
		padding: 0; 
	}
	.intro{
		width: 100%;
		margin: 0;
		padding: 0%;
	}
	.foryourdog-content {
		padding: 0px;
	}
	.foryourdog-1 {
		background-image: inherit;
		padding: 0;
	}
	.foryourdog-1 .inner {
		width: 100%;
		margin: 0px auto 0;
		padding-bottom: 0%;
	}
	.foryourdog-2, .foryourdog-3, .foryourdog-4 {
		padding: 0 ;
	}
	.foryourdog-2 .inner, .foryourdog-3 .inner, .foryourdog-4 .inner,.foryourdog-5 .inner {
		padding-bottom: 0;
	}
	.foryourdog-5::before,
	.foryourdog-6::before {
		content: none;
	}
	.foryourdog-5 {
		margin-top: 0%;
		background-image: none;
		padding: 0;
	}
	.foryourdog-5 .inner{
		margin-top: 0;
		max-width: inherit;
		width: 100%;
	}
	.foryourdog-6 {
		margin-top: 0px;
		background-image: none;
		background-position: center 0px;
		padding: 0%;
		background-color: #ede5d6;
	}
	.foryourdog-6 .inner {
		max-width: inherit;
		margin: 0px auto 0;
		padding-bottom: 0;
	}
	/* -------clean-------
	--------------------- */

	.clean-1{
		background-image:none;
	}
	.clean-1 .inner{
		width: 100%;
		margin: 0 auto;
		padding: 0px;
		
	}
	.clean-detail{
		width: 100%;
		margin: 0 auto;
		padding: 0% ;
		
	}
	.clean-img{
		max-width: 100%;
		margin: 0 auto;
		padding: 0% ;
		
	}
		/* -------LongLasting--------
	--------------------------- */
	.long-1,.long-3 {
		padding: 0%;
		background-image: none;
	}
	.long-1 .inner, .long-2 .inner, .long-3 .inner {
		margin: 0 auto;
		padding: 0%;
	}
	.movie-frame {
		position: absolute;
		bottom: inherit;
		top: 16%;
		left: 8%;
		width: 44%;
	}
	video{
		margin: 0 ;
		display: inline-block;
		clip-path: inset(0 0 round 15px 15px 15px 15px); 
	}
	/* -------color--------
	--------------------------- */
	.color_1{
		margin-top: 0px;
		background-image: none;
	}
	/* -------color--------
	--------------------------- */
	.color {
		padding-bottom: 0%;
	}
	.color_2 .inner {
		margin: 0px auto;
	}

	/* -------size--------
	--------------------------- */
	.size-content {
		background: none;
	}
	.size-content .inner {
		width: 100%;
		margin: 0px auto;
		padding: 0;
	}
	.size-content .inner .size2 {
		width: 100%;
		margin: 0px auto;
	}
	.sub-accordion-title {
		margin-top: 17px;
	}
	.accordion-title {
		padding: 1.5%;
	}
	.accordion-title::before {
		width: 42px;
		height: 42px;
	}
	.sub-accordion-title {
		border-radius: 8px;
	}
	.accordion-content p {
		font-weight: 400;
		font-size: 1.1em;
		letter-spacing: -0.1rem;
		line-height: 1.5em;
	}
	.accordion-item {
		padding-bottom: 0px; 
	}
	.sub-accordion-title::before, .sub-accordion-title.open::before {
		background-image: url(../img/acc_arrow2.png);
		width: 35px;
		height: 35px;
	}
	.sub-accordion-content {
		padding: 4% 3%;
	}
	/* -------about--------
	--------------------------- */
	.voice {
		background-image: none;
		padding: 0;
	}
	.modal{
		background-image: url(../img/voice_bg.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: bottom;
		padding: 0 5% 10%;
	}
	.modal .btn .modal__trigger {
		width: 48.5%;
		margin-block-start: 0em;
		margin-block-end: 0em;
		margin-bottom: 3%;
	}
	.modal__container {
		width: 85%;
		max-height: 580px;
	}
	.modal__text {
		margin-top: 15px;
		line-height: 1.7em;
		font-size: 1.1em;
		max-height: 214px;
		overflow-y: auto;
		color: #0e1b2e;
		padding-right: 7px;
	}
	.aboutus {
		background: none;
		width: 100%;
		padding: 0%;
	}
	.aboutus .inner {
		max-width: inherit;
		margin: 0 auto;
		padding: 0;
	}
	.offer::before {
		content: none;
	}
	.offer .cta {
		position: relative;
		margin-top: 0px;
	}
	.offer .inner {
		padding: 0% 3%;
	}
	.cta a img {
		width: 77%;
		position: absolute;
		bottom: 5%;
	}
	.offer .cta:nth-child(2) a img {
		bottom: 17%;
	}
	.cta_btn {
		max-width: 85%;
		display: block;
		margin: 30px auto 30px;
	}

}
/* ECforceのデフォルト打消し用　直書き -------------------------------------
-------------------------------------------------------------------------*/
.modal {
    outline: none;
    position: inherit;
    margin-top: inherit;
    top: inherit;
    overflow: inherit;
}
.modal {
    left: inherit;
    bottom: inherit;
    right: inherit;
    z-index: inherit;
    padding: inherit;
    width: inherit;
    margin-left: inherit;
    background-color: inherit;
    border: none;
    border:none;
    border-radius: none;
    box-shadow: none;
    background-clip: inherit;
}
/* スマホ */
@media only screen and (max-width: 767px){
.modal {
    background-image: url(../img/voice_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 0 5% 10%;
}
}
.modal__content{
	padding-right: 5px; 
	box-sizing: border-box;
}
.modal__content::-webkit-scrollbar {
	display: block;
}
/* スクロールバー全体 */
.modal__content::-webkit-scrollbar {
    width: 5px; /* スクロールバーの幅 */
}

/* スクロールバーのつまみ */
.modal__content::-webkit-scrollbar-thumb {
    background-color: rgba(102, 102, 102, 0.5); /* つまみの色 */
    border-radius: 4px; /* 角を丸くする */
}

/* スクロールバーのトラック部分（背景） */
.modal__content:-webkit-scrollbar-track {
    background-color: transparent; /* 背景色（透明にする） */
}
@media only screen and (max-width: 767px){
	.modal__content::-webkit-scrollbar {
		display: none;
	}
}