@charset "UTF-8";

/* #header
-------------------------------------------------- */
#header{
  width: 100%;
  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
	transition: ease .3s;
  z-index: 1000;
}

.home #header{
  background: none;
}

.home #header.active{
  background: #fff;
}

#header .inner{
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

#header .logo{
  flex: 0 1 156px;
}

#header .logo svg {
  width: 156px;
  height: auto;
  display: block;
}

.home #header .logo{
  transition: color 0.3s;
}

.home #header .logo .st0{
  fill: #fff!important;
}

#header .logo .st0,
.home #header.active .logo .st0{
  fill: #000!important;
}

.header_btn{
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.header_btn a{
  width: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.3;
  color: #343434;
  background: #fff;
  border: 1px solid #343434;
  border-radius: 9999px;
}

#header a.btn_line{
  color: #343434;
  background: #fff;
  border: 1px solid #343434;
}

.header_btn a:hover{
  color: #fff;
  background: #343434;
}

.btn_set{
  display: grid;
  grid-template-columns: 200px;
  gap: 15px;
  margin-left: auto;
}

.btn_set li a{
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
  background: #343434;
  border-radius: 9999px;
}

#hamburger {
  display: block;
  width: 56px;
  height: 56px;
  background-color: transparent;
  border: 1px solid #000;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
}

.home #hamburger{
  border: 1px solid #fff;
}

#hamburger.active,
.home #header.active #hamburger{
  border: 1px solid #000;
}

#hamburger span {
  width: 24px;
  height: 1px;
  background-color: #000;
  position: relative;
  transition: ease .4s;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.home #hamburger span{
  background-color: #fff;
}

#hamburger.active span,
.home #header.active #hamburger span{
  background-color: #000;
}

#hamburger span:nth-child(1) {
  top: 0;
}

#hamburger span:nth-child(2) {
  margin: 8px auto;
}

#hamburger span:nth-child(3) {
  top: 0;
}

#hamburger.active span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

#hamburger.active span:nth-child(2) {
  opacity: 0;
}

#hamburger.active span:nth-child(3) {
  top: -9px;
  transform: rotate(-45deg);
}

#nav {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 400px;
  height: 100vh;
  min-height: 100svh;
  overflow-y: scroll;
  padding: 60px 30px 30px 30px;
  transform: translateX(400px);
  background-color: #fff;
  transition: ease .4s;
}

#nav.active {
  transform: translateX(0);
}

.gnav li{
	border-bottom: 1px solid #000;
}

.gnav li a{
	display: block;
	font-weight: 500;
	padding: 6px 10px;
}

#nav .btn_set{
  display: grid;
  grid-template-columns: 200px;
  gap: 15px;
  margin-left: auto;
}

#nav .btn_set li a{
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.6rem;
  color: #343434;
  background: #fff;
  border: 1px solid #343434;
  border-radius: 9999px;
}

#nav .btn_set li a:hover{
  color: #fff;
  background: #343434;
}

#nav .btn_set{
	width: 200px;
	margin: 20px auto 0 auto;
	grid-template-columns: 1fr;
	gap: 10px;
}

@media screen and (max-width: 1000px){
	.btn_set{
		grid-template-columns: 170px 170px 170px;
		gap: 10px;
	}
}
@media screen and (max-width: 850px){
	.btn_set{
		grid-template-columns: 150px 150px 150px;
		gap: 7px;
	}
}
@media screen and (max-width: 767px){
  #header{
    padding: 0 10px;
  }
	#header .inner{
		height: 60px;
    gap: 10px;
	}
	#header .logo{
		flex: 0 1 110px;
	}
  #header .logo svg {
    width: 110px;
  }
	#header .logo + .btn_set{
		display: none;
	}
  .header_btn{
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-right: 0;
    
  }
  .header_btn a{
    width: 100%;
    height: 40px;
    padding: 0 10px;
    text-align: center;
    font-size: 1rem;
    line-height: 1.2;
  }
	#nav {
		width: 100vw;
		padding: 60px 20px 30px 20px;
		transform: translateX(100vw);
	}
	#nav .gnav li{
		border-bottom: 1px solid #343434;
	}
	#nav .gnav li a{
		display: block;
		font-size: 1.5rem;
		padding: 6px 10px;
	}
	#nav .btn_set{
		display: none;
	}
  .sp_nav{
    padding: 40px 30px;
  }
  .sp_nav .logo{
    width: 160px;
    margin: 0 auto;
  }
  .sp_nav .tel{
    margin: 20px auto;
  }
  
	#hamburger {
		display: block;
		width: 46px;
		height: 46px;
	}
}

/* #footer
-------------------------------------------------- */
#footer{
	padding-top: 80px;
}

#footer .inner{
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 0 20px;
}

#footer .inner .txt .head{
  display: grid;
  grid-template-columns: 215px 340px;
	align-items: center;
	gap: 60px;
}

.fnav{
	margin-top: 40px;
	display: flex;
	gap: 80px;
}

.btn_gr{
	width: 230px;
}

.btn_img + .btn_img{
	margin-top: 15px;
}

.btn_img a{
  padding-left: 30px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
  color: #343434!important;
  background: #fff!important;
  border: 1px solid #343434!important;
	font-weight: 500;
	font-size: 1.8rem;
	border-radius: 9999px;
  position: relative;
}

.btn_img a::before{
  content: "";
	width: 22px;
	height: 22px;
	background: #343434;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-image: url(../img/icon_drop.svg);
	mask-size: contain;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  transition: ease .3s;
}

.btn_img.icon_drop a::before{ 
  background: #FF5400;
  mask-image: url(../img/icon_drop.svg);}
.icon_login a::before{
  background: #FF5400;
  mask-image: url(../img/icon_login.svg)!important;
}

.btn_img a:hover{
  color: #fff!important;
  background: #343434!important;
}

.btn_img a:hover::before{
  background: #fff;
}

.btn_gr .sns{
	margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 10px;
}

#copy{
	margin-top: 80px;
	display: block;
	padding: 10px;
	text-align: center;
	background: #fff;
	border-top: 1px solid #fff;
}

#footer_btn{
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 200;
}

#footer_btn .btn_set{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
	gap: 0;
}

#footer_btn .btn_set li a{
	height: 40px;
	border-radius: 0;
	font-size: 1.3rem;
	font-weight: 500;
  background: #343434;
}

#btn_cta{
  width: 277px;
	position: fixed;
  right: 0;
  bottom: 0;
  z-index: 100;
}

#btn_cta a{
  display: block;
}

@media screen and (max-width: 900px){
	#footer .inner .txt .head{
		grid-template-columns: 150px 200px;
		gap: 40px;
	}
	.fnav{
		gap: 20px;
	}
}
@media screen and (max-width: 767px){
	#btn_cta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    align-items: flex-end;
		width: 100%;
		bottom: 0px;
	}
	#footer{
		padding-top: 60px;
	}
	#footer .inner{
		display: block;
	}
	#footer .inner .txt .head{
		width: 100%;
		margin: 0 auto;
		grid-template-columns: 1fr;
		gap: 40px;
	}
	#footer .logo{
		width: 40%;
		margin: 0 auto;
	}
	#footer .tel{
		width: 80%;
		margin: 0 auto;
	}
	.fnav{
		display: none;
	}
	.btn_gr{
		margin: 20px auto;
		width: 80%;
	}
}
/* 
-------------------------------------------------- */
#opening {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  text-align: center;
  background: #fff;
}

#opening p {
  font-size: 5.5rem;
  font-weight: 700;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 1s ease;
}

#opening p.is_active {
  opacity: 1;
}

#opening img {
  width: min(100%, 400px);
}

#opening.is_hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

@media (max-width: 767px){
  #opening p {
    font-size: 2.4rem;
  }
}

#mv_wrap{
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  background: url(../img/home/slide_w01.webp) no-repeat center top / cover;
}

#mv_wrap .mv_txt{
  width: min(100%, 1200px);
  padding: 0 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

#mv_wrap .mv_txt p{
  line-height: 1.6;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 4rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

#mv_wrap .mv_txt p.txt2{
  margin-top: 20px;
  font-size: 2.8rem;
}

@media (max-width: 1200px){
  #mv_wrap .mv_txt p{
    font-size: 3rem;
  }
  #mv_wrap .mv_txt p.txt2{
    font-size: 1.6rem;
  }
}
@media (max-width: 767px){
#mv_wrap{
  aspect-ratio: 4 / 5;
  height: auto;
  background: url(../img/home/mv_sp.webp) no-repeat center top / cover;
}
  
  #mv_wrap .mv_txt{
    padding: 0 20px;
  }
  #mv_wrap .mv_txt p{
    font-size: 2rem;
  }
  #mv_wrap .mv_txt p.txt2{
    font-size: 1.4rem;
  }
}

.ttl{
	margin-bottom: 50px;
  text-align: center;
  line-height: 1;
  color: #000;
  font-weight: 500;
  font-size: 1.6rem;
}

.ttl span{
  display: block;
  margin-bottom: 20px;
  font-size: 3.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

#information{
  padding: 120px 20px;
}

#information .inner{
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
}

@media screen and (min-width: 768px){
  #information .ttl{
    text-align: left;
  }
}

#information .news_list{
  flex: 1 1 0%;
  max-width: 846px;
  border-top: 1px solid #D9D9D9;
}

.news_list li{
  border-bottom: 1px solid #D9D9D9;
}

.news_list li a{
  padding: 30px 0;
  line-height: 1.5;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
}

.date_cate{
  white-space: nowrap;
  display: flex;
  gap: 15px;
}

.date_cate .cate::before{
  content: "【";
}

.date_cate .cate::after{
  content: "】";
}

.date_cate .cate span + span::before{
  content: "/";
}

.news_list li a .txt{
  flex: 1 1 0%;
}

.news_list2{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 30px;
  line-height: 1.3;
}

#information .news_list2{
  flex: 1 1 0%;
  max-width: 846px;
}

.news_list2 li a{
  display: block;
}

.news_list2 li .img{
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.news_list2 li .img img{
	display: block;
	width: 100%!important;
	height: 100%!important;
	margin: 0!important;
	object-fit: cover!important;
}

.news_list2 li .date_cate{
  font-size: 1.5rem;
  gap: 0;
  margin: 10px 0;
}

@media (max-width: 1000px){
  #information .inner{
    display: block;
  }
  #information .news_list,
  #information .news_list2{
    max-width: none;
  }
}
@media screen and (max-width: 767px){
  .ttl{
    font-size: 1.4rem;
  }
  .ttl span{
    margin-bottom: 10px;
    font-size: 2.6rem;
  }
  #information{
    padding: 80px 20px;
  }
  #information .inner{
    display: block;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
  }
  .news_list li a{
    padding: 10px 0;
    display: block;
  }
  .news_list2{
    grid-template-columns: 1fr;
    gap: 0;
    border-bottom: 1px solid #ccc;
  }
  .news_list2 li{
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 15px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #ccc;
    font-size: 1.4rem;
  }
  .news_list2 li a::after{
    content:"";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    background-color: rgba(0,0,0,0);
  }
  .news_list2 li .date_cate{
    margin: 0;
  }
  .news_list2 li .img{
    aspect-ratio: 1 / 1;
  }
  .date_cate{
    font-size: 1.4rem;
  }
}

#topics{
	padding: 120px 20px;
}

.topics_list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

@media screen and (max-width: 900px){
	.topics_list{
		grid-template-columns: 1fr 1fr;
	}
}
@media screen and (max-width: 767px){
	#topics{
		padding: 80px 20px;
	}
	.topics_list{
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

.topics_list li p{
	margin-top: 10px;
}

.img_copy_wrap{

}

.img_copy_wrap{
  padding: 0 20px;
  position: relative;
}

.img_copy_wrap .inner{
  padding: 60px 600px 60px 0;
  line-height: 2;
}

.img_copy_wrap h2{
  font-size: 8.5rem;
  font-weight: 400;
  line-height: 1;
}

.img_copy_wrap p.catch{
  margin: 30px 0;
  font-size: 3rem; 
  font-weight: 700;
  line-height: 1.8;
}

.img_copy_wrap .img{
  width: 45vw;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.img_copy_wrap .img img{
	display: block;
	width: 100%!important;
	height: 100%!important;
	margin: 0!important;
	object-fit: cover!important;
  object-position: center bottom;
}

#ouronlyproducts{
  margin-top: 120px;
}

#ouronlyproducts h2{
  font-size: 3.8rem;
}

#ouronlyproducts p.catch{
  font-size: 1.6rem;
}

#ouronlyproducts .btn_more{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}

#ouronlyproducts .btn_more li.btn{
  margin-top: 0;
}

#ouronlyproducts .btn_more li.btn a{
  width: 250px;
}

#ouronlyproducts .btn_more li.btn:nth-child(2) a{
  width: 300px;
}

#ouronlyproducts .shikumi_img{
  width: min(100%, 560px);
  margin: 40px 0 0 0;
}

@media (max-width: 1200px){
  .img_copy_wrap .inner{
    width: 45vw;
    margin: 0;
    padding: 30px 0;
  }
  .img_copy_wrap h2{
    font-size: 7rem;
  }
  .img_copy_wrap p.catch{
    margin: 30px 0;
    font-size: 2.4rem; 
  }
  .img_copy_wrap .img{
    width: 47vw;
  }
}
@media (max-width: 1100px){
  .img_copy_wrap .inner{
    width: 45vw;
    margin: 0;
    padding: 30px 0;
  }
  .img_copy_wrap h2{
    font-size: 6rem;
  }
  .img_copy_wrap p.catch{
    font-size: 2rem; 
  }
  .img_copy_wrap .img{
    height: auto;
    aspect-ratio: 925 / 655;
  }
}
@media (max-width: 850px){
  .img_copy_wrap{
    padding: 0;
  }
  .img_copy_wrap .inner{
    width: 100%;
    margin: 0 0 30px 0;
    padding: 0 20px;
  }
  .img_copy_wrap h2{
    font-size: 4rem;
  }
  #ouronlyproducts h2{
    font-size: 3rem;
  }
  .img_copy_wrap p.catch{
    font-size: 1.8rem;
    margin: 20px 0;
  }
  .img_copy_wrap .img{
    width: 100%;
    height: auto;
    position: static;
  }
}

#csr{
	padding: 120px 20px;
}

.csr_item{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  text-align: center;
}

.csr_item li a{
  display: block;
  overflow: hidden;
}

.csr_item li a:hover{
	filter: brightness(1.2);
}

.csr_item li a p{
  font-weight: bold;
  font-size: 1.8rem;
  margin-top: 10px;
}

.csr_item2{
	padding: 120px 20px;
}

.csr_item2 ul{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 25px;
}

.csr_item2 ul li h3{
	margin: 10px 0;
	text-align: center;
	color: #000;
	font-size: 2rem;
	font-weight: 700;
}

@media screen and (max-width: 767px){
	#csr{
		padding: 60px 0;
	}
	.csr_item{
		padding: 0 20px;
		grid-template-columns: 1fr;
	}
  .csr_item2{
    padding: 80px 20px;
  }
	.csr_item2 ul{
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

#breake{
	padding: 150px 20px 200px 20px;
}

#breake h2{
	text-align: center;
	color: #000;
	font-size: 3.8rem;
}

#breake .wrap{
	margin: 100px 0;
  display: grid;
  grid-template-columns: 1fr 38%;
  gap: 20px;
	line-height: 2;
}

#breake .wrap .txt h3{
	margin-bottom: 15px;
	color: #000;
	line-height: 1.4;
	font-weight: 700;
	font-size: 2.5rem;
}

#breake .wrap .txt p + h3{
	margin-top: 60px;
}

#breake .wrap img{
	margin-top: 60px;
}

@media screen and (max-width: 767px){
	#breake{
		padding: 100px 20px;
	}
	#breake h2{
		font-size: 3rem;
	}
	#breake .wrap{
		margin: 60px 0;
		grid-template-columns: 1fr;
		gap: 20px;
		line-height: 1.8;
	}
	#breake .wrap .txt h3{
		margin-bottom: 20px;
		font-size: 2rem;
	}
	#breake .wrap img{
		width: 100%;
		margin: 0 auto;
	}
}

#aboutus{
	padding: 120px 20px;
  background: #F2F2F2;
}

#aboutus .messaage_wrap{
  display: grid;
  grid-template-columns: 356px 1fr;
}

#aboutus .messaage_wrap img{
  margin-top: 110px;
  position: relative;
  z-index: 2;
}

#aboutus .messaage_wrap .txt{
  padding: 110px 80px;
  background: #fff;
  position: relative;
}

#aboutus .messaage_wrap .txt::before{
  content: "";
  display: block;
  width: 80px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  background: #fff;
}

#aboutus .messaage_wrap p{
  margin: 20px 0 0 0;
}

#aboutus .messaage_wrap .cat_txt{
  font-weight: bold;
  font-size: 2.2rem;
  margin: 0;
}

#aboutus .messaage_wrap .sign{
	text-align: right;
	font-size: 1.8rem;
  margin: 30px 0 0 auto;
}

@media screen and (max-width: 1000px){
  #aboutus .messaage_wrap{
    grid-template-columns: 300px 1fr;
  }
  #aboutus .messaage_wrap img{
    margin-top: 80px;
  }
  #aboutus .messaage_wrap .txt{
    padding: 80px 40px 80px 50px;
  }
}
@media screen and (max-width: 767px){
  #aboutus .messaage_wrap{
    grid-template-columns: 1fr;
  }
  #aboutus .messaage_wrap img{
    margin: 0 auto;
    width: 60%;
  }
  #aboutus .messaage_wrap .txt{
    transform: translateY(-30px);
    padding: 60px 30px 30px 30px;
  }
  #aboutus .messaage_wrap .txt::before{
    display: none;
  }
}

.staff_list{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 60px 5%;
	text-align: center;
	font-weight: 700;
	padding: 0 20px;
}

.staff_list li .position{
	margin: 20px 0 10px 0;
	padding: 5px;
	color: #fff;
	background: #7ACAF4;
	border-radius: 9999px;
}

.staff_list li .name{
	color: #000;
	font-size: 2rem;
}

@media screen and (max-width: 1250px){
	.staff_list{
		grid-template-columns: 1fr 1fr 1fr;
	}
}
@media screen and (max-width: 767px){
	.staff_list{
		grid-template-columns: 1fr;
	}
	.staff_list img{
		width: 70%;
		margin: 0 auto;
	}
}

#faq{
  padding: 120px 20px;
}

#faq .inner{
  position: relative;
}

#faq .faq_list{
  border-top: 1px solid #D9D9D9;
}

.faq_list li {
  border-bottom: 1px solid #D9D9D9;
  padding: 20px 0;
}

.faq_list .q {
  position: relative;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.faq_list .q::before {
  content: "Q.";
  font-weight: 700;
  margin-right: 8px;
}

.faq_list .q::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  background: url(../img/icon_plus.svg) no-repeat center / contain;
  transition: transform 0.3s;
}

.faq_list .q.open::after {
  background-image: url(../img/icon_minus.svg);
}

.faq_list .a {
  max-height: 0;
  overflow: hidden;
  transition: 0.3s ease;
  padding-right: 40px;
}

.faq_list .a.open {
  max-height: 1000px;
}

@media screen and (max-width: 767px){
  #faq{
    padding: 80px 20px;
  }
  #faq .inner{
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
  }
  .faq_list li {
    padding: 10px 0;
  }
	.faq_list .q {
		padding: 10px 40px 10px 0;
	}
	.faq_list .q::after {
		width: 20px;
		height: 20px;
	}
	.faq_list .a {
		padding: 0 0 0 20px;
	}
}

.bg_long{
	padding: 160px 30px;
	background: url(../img/home/bg_long.webp) no-repeat center center / 100% 100%;
}

#sns{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#sns h2 span{
	display: inline-block;
	text-align: center;
	color: #000;
	line-height: 1;
	font-size: 3.8rem;
	padding-bottom: 25px;
	background: url(../img/wave.svg) no-repeat center bottom;
}

#sns ul{
  flex: 1 1 0%;
  max-width: 846px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}

#sns ul li a{
	display: block;
	border-radius: 9999px;
}

@media screen and (max-width: 767px){
.bg_long{
	padding: 80px 30px;
	background: url(../img/home/sp_bg_top.webp) no-repeat center top, url(../img/home/sp_bg_bottom.webp) no-repeat center bottom;
	background-size: 100% auto, 100% auto;
}
	#sns{
		display: block;
	}
	.bg_long h2{
		text-align: center;
	}
	.bg_long h2 span{
		margin-bottom: 40px;
    font-size: 2rem!important;
    padding-bottom: 20px;
    background-size: 30px auto;
	}
	#sns ul{
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
}

#company{
	padding: 120px 20px;
}

#company .inner{
  padding: 60px 40px;
  background: #fff;
}

.company_tb{
	width: min(100%, 1000px);
	margin: 0 auto;
	border-top: 1px solid #DEDEDE;
}

.company_tb th{
	white-space: nowrap;
	padding: 20px 0;
	border-bottom: 1px solid #DEDEDE;
}

.company_tb td{
	padding: 20px;
	border-bottom: 1px solid #D9D9D9;
}

@media screen and (max-width: 767px){
	#company{
		margin: 80px auto 30px auto;
		padding: 30px 20px;
		border: none!important;
	}
  .company_tb{
    border: none;
  }
	.company_tb th,	.company_tb td{
		display:  block!important;
		width: 100%!important;
		border: none!important;
	}
  .company_tb tr{
    border-top: 1px solid #DEDEDE;
  }
	.company_tb th{
    text-align: left;
    padding: 10px 10px 0 10px;
	}
	.company_tb td{
		padding: 10px 10px 20px 10px;
	}
}

.bnr_img_wrap{
  width: min(100%, 1200px);
  margin: 80px auto;
}

.bnr_img_wrap a{
  height: 350px;
  display: flex;
	justify-content: center;
  flex-direction: column;
  gap: 30px;
  padding: 20px 6%;
  line-height: 1;
  color: #343434;
  background: url(../img/bnr_product_bg.webp) no-repeat center right / cover;
}

.bnr_purpose_wrap a{
  background-image: url(../img/bnr_purpose_bg.webp);
}

.bnr_img_wrap a .bnr_txt1{
  font-size: 5rem;
  font-weight: 600;
}

.bnr_img_wrap a .bnr_txt2{
  font-size: 3rem;
}

.bnr_img_wrap a .bnr_txt3{
  width: 270px;
  height: 56px;
  display: flex;
	align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #343434;
  position: relative;
  transition: ease .3s;
}

.bnr_img_wrap a .bnr_txt3::before{
	content: "";
	display: block;
	width:0;
	height:0;
	border-style:solid;
	border-width: 7px 0 7px 6px;
	border-color: transparent transparent transparent #343434;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
  transition: ease .3s;
}

.bnr_img_wrap a:hover{
  filter: brightness(1.05);
}

.bnr_img_wrap a:hover .bnr_txt3{
  color: #fff;
  background: #343434;
}

.bnr_img_wrap a:hover .bnr_txt3::before{
  border-color: transparent transparent transparent #fff;
}

@media (max-width: 767px){
  .bnr_img_wrap a{
    height: 200px;
    gap: 15px;
    padding: 0 4%;
    background-size: auto 100%;
    background-position: 60% 0;
  }
  .bnr_img_wrap a .bnr_txt1{
    font-size: 3.6rem;
  }
  .bnr_img_wrap a .bnr_txt2{
    font-size: 1.8rem;
    line-height: 1.3;
  }
  .bnr_img_wrap a .bnr_txt3{
    width: 200px;
    height: 40px;
    font-weight: 1.4rem;
  }
}








.img_menu{
  /*display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  */
  width: min(100%, 400px);
  margin: 0 auto;
  display: flex;
	align-items: center;
  justify-content: center;
}

.img_menu li{
	padding: 20px;
	border: 1px solid #D9D9D9;
}

.img_menu li img{
	border-radius: 10px;
}

.img_menu li .btn{
	margin-top: 20px;
}

@media screen and (max-width: 767px){
	#products{
		padding: 80px 20px;
	}
	.img_menu{
		grid-template-columns: 1fr;
	}
	.img_menu li{
		padding: 10px;
	}
	.img_menu li .btn{
		margin-top: 20px;
	}
}

.page_body{
  padding: 40px 20px 100px 20px;
}

.single_body .inner{

}

.single_ttl{
  margin-bottom: 60px;
  padding: 10px 0;
  color: #000;
  line-height: 1.4;
  font-size: 2.8rem;
  border-bottom: 1px solid #D9D9D9;
  position: relative;
}

.article_body p{
  margin-bottom: 20px;
}

.article_body h2{
  margin: 40px 0 20px 0;
  line-height: 1.4;
  font-size: 2.4rem;
  position: relative;
  padding-left: 30px;
}

.article_body h2::before{
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #36A8E3;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.article_body h3{
  margin: 40px 0 20px 0;
  line-height: 1.4;
  font-size: 1.8rem;
  padding-left: 10px;
  border-left: 5px solid #36A8E3;
}

.article_body h4{
  margin: 20px 0 20px 0;
  line-height: 1.4;
  font-size: 1.6rem;
  padding-bottom: 6px;
  border-bottom: 1px solid #36A8E3;
}

@media (max-width: 767px){
  .single_ttl{
    margin-bottom: 40px;
    font-size: 2rem;
  }
  .article_body h2{
    font-size: 1.8rem;
  }
  .article_body h3{
    font-size: 1.6rem;
  }
}

main{
  padding: 0;
  overflow: hidden;
}

/* purpose
-------------------------------------------------- */
.mv{
  padding: 80px 20px 110px 0;
  background: url(../img/purpose/mv_bg.webp) no-repeat 80% center / cover;
  overflow: hidden;
}

.support_body .mv{
  background: url(../img/support/mv_bg.webp) no-repeat 45% center / cover;
}

.csr_body .mv{
  background: url(../img/csr/mv_bg.webp) no-repeat 85% center / cover;
}

.products_body .mv{
  background: url(../img/products/mv_bg.webp) no-repeat 50% center / cover;
}

@media (max-width: 1300px){
  .csr_body .mv{
    background-position: 75% center;
  }
  .products_body .mv{
    background-position: 65% center;
  }
}
@media (max-width: 1000px){

}

.mv .inner{
  position: relative;
}

.mv .inner::before{
  content: "";
  display: block;
  width: 50vw;
  height: 100%;
  background: rgba(255, 255, 255, .9);
  
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  z-index: 0;
}

.mv .wrap{
  width: min(100%, 600px);
  padding: 80px 20px 80px 20px;
  color: #000;
  line-height: 2;
  background: rgba(255,255,255,.9);
  border-radius: 0 10px 10px 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 1300px){
  .page-purpose .mv .wrap{
    width: min(100%, 500px);
  }
}
@media (max-width: 1000px){
  .mv .wrap{
    width: min(100%, 500px);
  }
}

.mv h1{
  font-size: 3.8rem;
  line-height: 1;
}

.mv h2{
  margin: 20px 0;
  font-size: 2.5rem;
  line-height: 1.5;
}

@media (max-width: 767px){
  .mv .wrap{
    width: 90%;
    margin: 0 auto;
    padding: 20px; 
    border-radius: 10px;
  }
  .mv h1{
    font-size: 2.2rem;
  }
  .mv h2{
    margin: 10px 0;
    font-size: 1.8rem;
  }
}

#purpose_read{
  margin-top: 120px;
}

.purpose_naze{
  padding: 200px 20px;
}

.purpose_naze .inner{
  display: flex;
  justify-content: space-between;
  gap: 5%;
}

.purpose_naze .img{
  flex: 0 1 340px;
}

.purpose_naze .txt{
  flex: 1 1 0;
  line-height: 2;
}

.purpose_naze .txt h2{
  margin-bottom: 40px;
  color: #000;
  line-height: 1;
  font-size: 3.8rem;
}

@media (max-width: 767px){
  .purpose_naze{
    padding: 80px 20px;
  }
  .purpose_naze .inner{
    display: block;
  }
  .purpose_naze .txt{
    margin-bottom: 20px;
  }
  .purpose_naze .txt h2{
    font-size: 2.4rem;
  }
}

.sec{
  padding: 120px 20px;
}

@media (max-width: 767px){
  .sec{
    padding: 80px 20px;
  }
}

.title_line{
  text-align: center;
  color: #fff;
  padding: 80px 20px 220px 20px;
  background: url(../img/ttl_bg.webp) no-repeat right top / cover;
  border: 10px solid blue;
}

.title_line h2{
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 65px;
  background: url(../img/purpose/drop.svg) no-repeat center bottom / auto auto;
}

.title_line h2.jp{
 padding-bottom: 35px;
 line-height: 1.3;
}

.title_line h2 span{
  display: block;
  font-size: 3.8rem;
  text-transform: uppercase;
  margin-bottom: 15px;
}

@media (max-width: 767px){
  .title_line{
    padding: 60px 20px;
    background: url(../img/ttl_bg.webp) no-repeat center top / 100% 100%;
  }
  .title_line h2{
    font-size: 1.6rem;
    padding-bottom: 65px;
    background: url(../img/purpose/drop.svg) no-repeat center bottom / auto auto;
  }
  .title_line h2 span{
    font-size: 2.4rem;
  }
}

@media (min-width: 768px){
  .pc_c{
    text-align: center;
  }
}

.sec_wbox h3{
	margin-bottom: 40px;
	text-align: center;
	color: #000;
	line-height: 1;
	font-size: 3rem;
	padding-bottom: 25px;
}

.sec_wbox h3::after{
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #000;
  margin: 20px auto 0 auto;
}

.sec_wbox h4{
  margin-bottom: 20px;
	color: #000;
	line-height: 1.3;
	font-size: 2rem;
}

.sec_wbox h5{
  margin-bottom: 20px;
	color: #000;
	line-height: 1;
	font-size: 2rem;
}

@media (max-width: 767px){
  .sec_wbox h3{
    margin-bottom: 40px;
    font-size: 2rem;
    line-height: 1.3;
    padding-bottom: 25px;
  }
  .sec_wbox h4{
    font-size: 1.8rem;
  }
}

.bg{
  background: #F2F2F2;
}

.wbox{
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 60px 40px;
  background: #fff;
}

@media (max-width: 767px){
  .wbox{
    padding: 30px 20px;
  }
}

.sec_wbox{
  width: min(100%, 1200px);
  margin: 0 auto 0 auto;
  padding: 60px 80px;
  background: #fff;
}

.sec_wbox + .sec_wbox{
  margin-top: 80px;
}

.sec_wbox .wrap{
  padding: 80px 0;
}

.sec_wbox .wrap + .wrap{
  border-top: 1px solid #ddd;
}

@media (max-width: 1000px){
  .sec_wbox{
    padding: 60px 20px;
  }
}
@media (max-width: 767px){
  .sec_wbox{
    width: 90%;
    padding: 30px 20px;
  }
  .sec_wbox + .sec_wbox{
    margin-top: 60px;
  }
  .sec_wbox .wrap{
    padding: 30px 0;
  }
}

.sec_wbox p{
  margin-bottom: 20px;
}

.sec_wbox .flex_wrap + .flex_wrap{
  margin-top: 70px;
}

@media (max-width: 767px){
  .sec_wbox .flex_wrap + .flex_wrap{
    margin-top: 40px;
  }
}

.marker{
  background: #FFF791;
}

.img_list{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.img_list4{
  grid-template-columns: repeat(4, 1fr);
}

.img_list li .tt{
  font-size: 2rem!important;
  background: none!important;
  padding: 0!important;
  margin: 20px 0!important;
  text-align: center!important;
}

.img_list li h3.tt::after{
  display: none;
}

@media (max-width: 950px){
  .img_list4{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
@media (max-width: 767px){
  .img_list{
    margin-top: 20px;
    grid-template-columns: 1fr;
  }
  .img_list4{
    grid-template-columns: repeat(2, 1fr)!important;
    gap: 5px;
  }
}

.purpose_henka{
  margin-top: 40px;
  margin-bottom: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}

.purpose_henka li{
  text-align: center;
  padding: 30px 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.purpose_henka li h4{
  margin: 0 0 10px 0;
}

.purpose_henka li p{
  margin: 0;
}

@media (max-width: 767px){
  .purpose_henka{
    margin-top: 20px;
    margin-bottom: 80px;
    grid-template-columns: 1fr!important;
    gap: 10px;
  }
  .purpose_henka li{
    padding: 20px 10px;
  }
}

.txt_list li{
  display: grid;
  grid-template-columns: 300px 1fr;
  background: #f2f2f2;
  border-radius: 5px;
  padding: 20px;
}

.txt_list li + li{
  margin-top: 20px;
}

.txt_list li h3{
  margin: 0;
  padding: 0 10px 0 40px;
  text-align: left;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  font-size: 1.6rem;
  color: #000;
  background: none;
  border-right: 1px solid #ccc;
}

.txt_list li h3::after{
  display: none;
}

.txt_list li h3 span{
  display: block;
  font-size: 2.4rem;
}

.txt_list li p{
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 20px 0 40px;
}

@media (max-width: 767px){
  .txt_list li{
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .txt_list li + li{
    margin-top: 20px;
  }

  .txt_list li h3{
    text-align: center;
    padding: 0 0 20px 0;
    display: block;
    border-right: none;
    border-bottom: 1px solid #ccc;
  }
  .txt_list li h3 span{
    margin: 0 0 10px 0;
    font-size: 2.4rem;
  }
  .txt_list li p{
    display: block;
    text-align: center;
    margin: 0;
    padding: 10px 0 0 0;
  }
}

.yakudachi .img_list{
  gap: 30px;
}

.yakusoku_list li{
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  font-weight: 600;
  background: #f2f2f2;
  border-radius: 9999px;
}

@media (max-width: 767px){
  .yakusoku_list li{
    padding: 10px 20px;
    text-align: left;
  }
}

.purpose_henka.box3col{
  grid-template-columns: 1fr 1fr 1fr;
}

.purpose_henka.box3col li p{
  display: inline-block;
  text-align: left;
}

.purpose_staff_list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.purpose_staff_list li img{
  display: block;
  width: 70%;
  margin: 0 auto 20px auto;
}

.purpose_staff_list li h4{
  text-align: center;
}

@media (max-width: 767px){
  .purpose_staff_list{
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
  }
}

.purpose_message{

}

.message_sign{
  display: block;
  text-align: right;
  margin-top: 10px;
}

.purpose_company{

}

@media (max-width: 767px){
  .purpose_company{
    padding: 80px 20px;
    background: url(../img/home/aboutus_bg.webp) no-repeat center top / 200% 100%;
  }
}

.purpose_company .sec_wbox{
  transform: translateY(0);
}

.overview_list{
  border-top: 1px solid #DEDEDE;
}

.overview_list li{
  display: grid;
  grid-template-columns: 163px 1fr;
  align-items: center;
  gap: 30px;
  padding: 20px 10px;
  border-bottom: 1px solid #DEDEDE;
}

.overview_list li p{
  margin: 0!important;
}

.overview_list li p span{
  font-weight: 700;
  text-align: center;
  display: block;
}

@media (max-width: 767px){
  .overview_list li{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 10px;
  }
  .overview_list li p span{
    text-align: left;
  }
}

.support_products_list{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.support_products_list li{
	padding: 20px;
	border-left: 1px solid #ccc;
}

.support_products_list li:first-child{
  border-left: none;
}

.support_products_list li h4{
  margin-top: 20px;
  text-align: center;
}

.support_products_list li .btn{
  margin-top: 0;
}

.support_products_list li .btn + .btn{
  margin-top: 15px;
}

@media screen and (max-width: 767px){
  .support_products_list{
		grid-template-columns: 1fr;
	}
	.support_products_list li{
		padding: 30px 10px;
    border-left: none;
    border-top: 1px solid #ccc;
	}
	.support_products_list li a{
		margin-top: 20px;
		height: 40px;
	}
}

.link_faq a{
  padding: 15px 20px;
  position: relative;
  display: flex;
	align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 2rem;
  color: #000;
  background: #fff;
  border: 1px solid #343434;
  border-radius: 10px;
}

.link_faq a::before{
	content: "";
	display: block;
	width:0;
	height:0;
	border-style:solid;
	border-width: 7px 0 7px 6px;
	border-color: transparent transparent transparent #343434;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
  transition: ease .3s;
}

.link_faq a:hover{
  color: #fff;
  background: #343434;
}

.link_faq a:hover::before{
  border-color: transparent transparent transparent #fff;
}

.about_menu{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.about_menu li a{
  display: block;
  font-weight: 600;
  text-align: center;
}

.about_menu li a:hover{
  filter: brightness(1.2);
}

.about_menu li a span{
  display: block;
  margin-top: 10px;
  font-size: 2rem;
}

.about_menu li a p{
  margin: 0;
}

@media screen and (max-width: 950px){
  .about_menu{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px){
  .about_menu{
    grid-template-columns: repeat(1, 1fr);
  }
}

.support_body .sec_wbox .wrap{
  padding: 0;
}

.media_list li{
  display: flex;
  gap: 6%;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid #D9D9D9;
}

.media_list li:first-child{
  padding-top: 0;
  border-top: none;
}

.media_list li .img{
  flex: 0 1 335px;
}

.media_list li .txt{
  flex: 1 1 0%;
}

.ttl_left{
  text-align: left!important;
  margin-bottom: 20px!important;
  line-height: 1.3!important;
  font-size: 2.5rem!important;
  padding-bottom: 0!important;
  background: none!important;
}

.ttl_left::after{
  display: none!important;
}

@media (max-width: 767px){
  .media_list li{
    display: block;
  }
  .ttl_left{
    margin-bottom: 15px!important;
    font-size: 2rem!important;
  }
}

.contact_list{
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: center;
}

.contact_list li{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact_list li img{
  display: block;
  width: min(100%, 168px);
  margin: 0 auto 20px auto;
}

.contact_list li .tel_num{
  color: #000;
  font-size: 4.3rem;
  font-weight: 700;
  line-height: 1; 
  margin-bottom: 10px;
}

.contact_list li .btn{
  margin-top: auto;
}

@media (max-width: 850px){
  .contact_list{
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
  }
}

.products_catch_txt1{
  padding-top: 100px;
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  color: #000;
}

.setsubi_list{
  margin-top: 40px;
  display: grid;
  gap: 40px 0;
}

.setsubi_list li{
  padding: 0 20px;
}

.setsubi_list li h5{
  font-size: 2rem;
  margin: 20px 0;
  text-align: center;
}

@media (min-width: 1000px){
  .setsubi_list{
    grid-template-columns: repeat(3, 1fr);
  }
  .setsubi_list li:not(:nth-child(3n + 1)){
    border-left: 1px solid #ccc;
  }
}
@media (min-width: 768px) and (max-width: 999px){
  .setsubi_list{ 
    grid-template-columns: repeat(2, 1fr);
  }
  .setsubi_list li:not(:nth-child(2n + 1)){
    border-left: 1px solid #ccc;
  }
}
@media (max-width: 767px){
  .setsubi_list{
    grid-template-columns: 1fr;
  }
  .setsubi_list li{
    border-left: none;
    padding-left: 0;
    border-bottom: 1px solid #ccc;
  }
  .setsubi_list li:last-child{
    border-bottom: none;
  }
}

.seibun_tb{
  width: min(100%, 500px);
  margin: 0 auto;
  table-layout: fixed;
}

.seibun_tb th, .seibun_tb td{
  padding: 10px;
  font-weight: normal;
  border: 1px solid #1990CE;
  text-align: center;
}

.seibun_tb th{
  background: #F2F2F2;
}

.server_img{
  display: block;
  width: auto;
  margin: 0 auto;
}

.server_point_list{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 40px;
  background: #F2F2F2;
}

.server_point_list li .num{
  display: inline-block;
  margin-bottom: 20px;
  padding: 0 20px;
  color: #000;
  font-weight: 700;
  font-size :1.8rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 9999px;
}

@media (max-width: 767px){
  .server_point_list{
    grid-template-columns: repeat(1, 1fr);
    padding: 20px;
  }
  .server_point_list li .num{
    margin-bottom: 10px;
    font-size :1.5rem;
  }
}

.goods_list li p.yen{
  text-align: center;
  font-weight: 700;
  color: #000;
}

.business_merit .flex_wrap{
  align-items: center;
  gap: 20px;
}

.business_merit .flex_img{
  flex: 0 1 50%;
}

.business_merit .check_list li{
  display: flex;
  gap: 10px;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 15px;
}

.business_merit .check_list li::before{
  content: "";
  display: block;
  margin-top: 0.3em;
  width: 20px;
  min-width: 20px;
  aspect-ratio: 20 / 17;
  background: url(../img/icon_check.svg) no-repeat center center / contain;
}

@media (max-width: 767px){
  .business_merit .check_list li{
    font-size: 1.6rem;
    margin-bottom: 15px;
  }
  .business_merit .check_list li::before{
    width: 16px;
    min-width: 16px;
  }
}

.business_message{
  display: grid;
  grid-template-columns: 1fr 346px;
  gap: 10%;
}

.business_message .txt p{
  margin-bottom: 30px;
}

.business_message .sign{
	text-align: right;
  width: min(100%, 350px);
  margin: 10px 0 0 auto;
}

@media (max-width: 767px){
	.business_message{
		grid-template-columns: 1fr;
		gap: 20px;
	}
  .business_message .txt p{
    margin-bottom: 20px;
  }
	.business_message img{
		width: 70%;
		margin: 0 auto;
	}
}

.business_3col{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.business_3col li{
  position: relative;
}

.business_3col li:nth-child(2)::before,
.business_3col li:nth-child(2)::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ccc;
}

.business_3col li:nth-child(2)::before{ left: -20px; }
.business_3col li:nth-child(2)::after { right: -20px; }

.business_3col li h4{
  text-align: center;
  color: #000;
  font-size: 1.9rem;
  font-weight: 600;
  margin: 15px 0;
}

.business_txt1{
  margin-top: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 3rem;
  font-weight: 700;
}

.business_katsuyou .sec_wbox2{
  padding: 0 80px;
  background: none;
}

.business_txt1 img{
  width: 220px;
}

.business_txt2{
  text-align: center;
  padding: 20px;
  color: #000;
  font-size: 2.5rem;
  font-weight: 700;
  background: #FFF7CB;
}

@media screen and (max-width: 767px){
	.business_3col{
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.business_3col li{
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
  }
	.business_3col li:last-child{
    padding-bottom: 0;
    border-bottom: none;
  }
  .business_3col li:nth-child(2)::before,
  .business_3col li:nth-child(2)::after{
    display: none;
  }
  .business_3col li h4{
    font-size: 1.6rem;
  }
  .business_txt1{
    margin-top: 40px;
    flex-direction: column;
    gap: 4px;
    font-size: 2rem;
  }
  .business_nayami .business_txt1 img{
    width: 140px;
    display: block;
  }
  .business_txt2{
    padding: 10px;
    text-align: left;
    font-size: 1.8rem;
  }
}

.business_katsuyou ul li h4 span{
  display: block;
  margin-top: 10px;
  font-weight: normal;
  font-size: 1.6rem;
}

.business_katsuyou ul li img{
  width: min(100%, 220px);
  margin: 0 auto;
}

@media (max-width: 1000px){
  .business_katsuyou .sec_wbox2{
    padding: 0 0;
  }
}

.business_price{
  text-align: center;
}

.business_price .tt{
  width: min(100%, 664px);
  margin: 0 auto;
}

.price_0_wrap{
  margin-top: 40px;
  display: flex;
	align-items: center;
  justify-content: center;
  gap: 10px 40px;
}

.price_0_wrap img{
  width: auto;
}

.price_0_wrap2{
  margin-top: 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 1000px){
  .price_0_wrap{
    flex-wrap: wrap;
  }
  .price_0_wrap2{
    margin-top: 40px;
    gap: 10px;
  }
  .price_0_wrap img{
    width: 100%;
  }
  .price_0_wrap img:last-child{
    width: 73%;
  }
}

.business_keihi{
  margin-top: 30px;
  color: #FF9301;
  padding: 20px 40px;
  background: #FFF7CB;
  border-radius: 10px;
}

.business_keihi .tt{
  font-weight: 700;
  font-size: 3rem;
  margin-bottom: 30px;
}

.business_keihi ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.business_keihi ul li{
  background: #fff;
  padding: 20px;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.business_keihi ul li span{
  width: min(100%, 224px);
  margin: 0 auto;
  display: block;
  padding: 8px 32px;
  border: 1px solid #FF9301;
  border-radius: 999px;
  color: #FF9301;
  font-size: 2rem;
  font-weight: normal;
  line-height: 1;
  position: relative;
  background: #fff;
}

.business_keihi ul li span::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #FF9301;
  z-index: 1;
}

.business_keihi ul li span::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -17px;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-top-color: #fff;
  z-index: 2;
}

.business_keihi .note{
  font-size: 1.4rem;
  color: #838383;
  margin-top: 20px;
}

.business_keihi2{
  margin-top: 30px;
  color: #272727;
  padding: 20px 40px;
  background: #F2F2F2;
  border-radius: 10px;
}

.business_keihi2 .tt{
  font-weight: 700;
  font-size: 3rem;
  color: #000;
  margin-bottom: 30px;
}

.business_keihi2 ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.business_keihi2 ul li{
  background: #fff;
  padding: 20px;
}

.business_keihi2 ul li h4{
  margin-bottom: 10px;
}

@media (max-width: 767px){
  .business_keihi, .business_keihi2{
    padding: 15px;
  }
  .business_keihi .tt,
  .business_keihi2 .tt{
    font-size: 2.2rem;
    margin-bottom: 20px;
  }
  .business_keihi ul,
  .business_keihi2 ul{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .business_keihi ul li{
    font-size: 2.2rem;
  }
  .business_keihi ul li span{
    width: min(100%, 200px);
    padding: 8px;
    font-size: 1.6rem;
  }
  .business_keihi .note{
    text-align: left;
    font-size: 1.3rem;
  }
}

.business_area{
  align-items: center;
}

.area_list{
  margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
  gap: 10px;
}

.area_list li{
  text-align: center;
  flex: 0 1 150px; 
	padding: 10px;
	line-height: 1;
  font-weight: 600;
	background: #EAF8EA;
	border-radius: 9999px;
}

.area_list.ku li{
	background: #F2F2F2;	
}

@media (max-width: 767px){
  .area_list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  .area_list.ku{
    grid-template-columns: repeat(2, 1fr);
  }
  .area_list li{
    font-size: 1.5rem;
    flex: 0 1 50%; 
    padding: 10px 20px;
  }
}

.business_teiki{
  text-align: center;
}

.business_teiki .check_list{
  margin: 20px 0 40px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.business_teiki .check_list li{
  display: flex;
  gap: 10px;
  padding: 10px;
  font-size: 2rem;
  font-weight: 500;
  background: #F2F2F2;
  border-radius: 5px;
}

.business_teiki .check_list li::before{
  content: "";
  display: block;
  margin-top: 0.3em;
  width: 20px;
  min-width: 20px;
  aspect-ratio: 20 / 17;
  background: url(../img/icon_check.svg) no-repeat center center / contain;
}

@media (max-width: 767px){
  .business_teiki .check_list{
    grid-template-columns: 1fr;
  }
  .business_teiki .check_list li{
    font-size: 1.6rem;
    margin-bottom: 15px;
  }
  .business_teiki .check_list li::before{
    width: 16px;
    min-width: 16px;
  }
}

.business_teiki_sch{
  padding: 20px 40px;
  background: #F2F2F2;
  border-radius: 10px;
}

.weekday{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.weekday li{
  background: #fff;
  padding: 20px;
  border-radius: 5px;
}

.weekday li .tt{
  margin: 0 0 10px 0;
  color: #000;
  line-height: 1;
  font-size: 2rem;
  font-weight: 500;
}

.weekday li p{
  margin: 0;
}

.sch_other{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.sch_other li .tt{
  margin: 0 0 5px 0;
  color: #000;
  font-size: 2rem;
  font-weight: 500;
  background: none;
}

.sch_other li .txt{
  margin: 0;
  padding: 15px;
  background: #fff;
  border-radius: 5px;
}

@media (max-width: 1000px){
  .weekday{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px){
  .business_teiki_sch{
    padding: 20px;
  }
  .weekday, .sch_other{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sch_other{
    margin-top: 20px;
  }
}

.business_koukan{
  align-items: center;
  gap: 8%;
}

.business_koukan .flex_img{
  flex: 0 1 260px;
  max-width: 260px;
}

@media (max-width: 767px){
  .business_koukan{
    gap: 20px;
  }
  .business_koukan .flex_img{
    max-width: 200px;
    margin: 0 auto;
  }
}

.business_trial{
  padding: 100px 20px;
  background: #FFE44E;
}

@media (max-width: 767px){
  .business_trial{
    padding: 40px 20px;
  }
}

.business_step li{
  position: relative;
  text-align: center;
  padding: 30px;
  margin-bottom: 30px;
  background: #F2F2F2;
  border-radius: 5px;
}

.business_step li::after{
  content: "";
  display: block;
  width:0;
  height:0;
  border-style:solid;
  border-width: 12px 32px 0 32px;
  border-color: #CECECE transparent transparent transparent;
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
}

.business_step li:last-child::after{
  display: none;
}

.business_step li .tt{
  font-size: 2.5rem;
  font-weight: 700;
  color: #000;
}

.btn_wrap{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

@media (max-width: 767px){
  .btn_wrap{
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
}

.faq_list2 .q {
  position: relative;
  cursor: pointer;
  padding: 20px 40px 20px 20px;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #1990CE;
  color: #fff;
  border-radius: 5px;
}

.faq_list2 .q.open{
  border-radius: 5px 5px 0 0;
}

.faq_list2 .q::before {
  content: "Q.";
  font-weight: 700;
  margin-right: 8px;
}

.faq_list2 .q::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width:0;
  height:0;
  border-style:solid;
  border-width: 7px 7.5px 0 7.5px;
  border-color: #fff transparent transparent transparent;

}

.faq_list2 .q.open::after {
  transform: rotate(180deg)
}

.faq_list2 .a {
  max-height: 0;
  overflow: hidden;
  transition: 0.4s ease;
  border: 1px solid transparent;
  padding: 0 40px 0 60px;
  border-radius: 0 0 5px 5px;
  position: relative;
}

.faq_list2 .a::before{
  content: "A.";
  color: #000;
  position: absolute;
  top: 40px;
  left: 30px;
}

.faq_list2 .a.open {
  padding: 40px 40px 40px 60px;
  max-height: 1000px;
  border: 1px solid #1990CE;
}

.bnr_trial{
  margin: 100px 20px;
}

.bnr_trial a{
  display: block;
}

.bnr_trial a:hover{
  opacity: 0.8;
}

@media (max-width: 767px){
  .bnr_trial{
    margin: 40px 20px;
  }
}

.otameshi_camp{
  padding: 110px 20px;
  background: #FFE44E;
  overflow: hidden;
}

.otameshi_camp .inner{
  padding: 70px;
  background: #fff;
  border-radius: 5px;
  position: relative;
  padding:clamp(16px,3vw,40px);
}

.otameshi_camp .ribbon{
  width: 100%;
  padding: 10px;
  text-align: center;
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1;
  color: #FFE34A;
  background:#1E79C6;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-25deg) translate(-34%, -180px);
  z-index: 2;
  pointer-events:none;
}

.otameshi_camp .point{
  margin-top: 60px;
  padding: 40px;
  border-radius: 10px;
  background: #F2F2F2;
}

.otameshi_camp .point h3{
  text-align: center;
  color: #000;
  font-size: 3.9rem;
}

.otameshi_camp .point ul{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.otameshi_camp .point ul li{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: center;
}

.otameshi_camp .point ul li h4{
  color: #000;
  font-size: 2.5rem;
}

.otameshi_camp .btn_wrap{
  margin: 60px 0 20px 0;
}

.otameshi_camp .note{
  text-align: center;
}

@media (max-width: 767px){
  .otameshi_camp{
    padding: 50px 20px 60px 20px;
  }
  .otameshi_camp .inner{
    padding: 20px;
  }
  .otameshi_camp .ribbon{
    font-size: 1.6rem;
    transform: rotate(-20deg) translate(-22%, -60px);
  }
  .otameshi_camp .point{
    margin-top: 40px;
    padding: 15px;
  }
  .otameshi_camp .point h3{
    font-size: 2rem;
  }
  .otameshi_camp .point ul{
    margin-top: 40px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .otameshi_camp .point ul li{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .otameshi_camp .point ul li img{
    width: 120px;
    margin: 0 auto;
  }
  .otameshi_camp .point ul li h4{
    text-align: center;
    font-size: 2rem;
  }
  .otameshi_camp .btn_wrap{
    margin: 30px 0 20px 0;
  }
  .otameshi_camp .note{
    text-align: left;
    font-size: 1.4rem;
  }
}

.egao_tt{
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
  color: #000;
}

.egao_tt span{
  display: inline-block;
  padding: 2px 8px;
  margin: 0 5px;
  border-radius: 5px;
  background: #F2F2F2;
}

.egao_point{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.egao_point li{
  background: #fff;
  padding: 20px;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: #000;
}

.egao_point li span{
  width: 100%;
  margin: 0 auto 20px auto;
  display: block;
  padding: 8px 32px;
  border: 1px solid #1990CE;
  border-radius: 999px;
  color: #000;
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 1;
  position: relative;
  background: #fff;
}

.egao_point li span::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #000;
  z-index: 1;
}

.egao_point li span::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -17px;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-top-color: #fff;
  z-index: 2;
}

@media (max-width: 767px){
  .egao_point{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.personal_single{
  margin-top: 30px;
}

.personal_kodawari .flex_wrap{
  gap: 60px;
}

.personal_kodawari .flex_img{
  flex: 0 1 35%;
}

.personal_kodawari .flex_txt{
  line-height: 2;
}

.personal_kodawari h4{
  font-size: 2.5rem;
}

.personal_kodawari3_car{
  margin-bottom: 40px;
  padding: 40px;
  display: grid;
  grid-template-columns: 183px 1fr;
  gap: 40px;
  align-items: center;
  background: #F2F2F2;
  border-radius: 10px;
}

@media (max-width: 767px){
  .personal_kodawari h4{
    font-size: 1.8rem;
  }
  .personal_kodawari3_car{
    margin-bottom: 40px;
    padding: 20px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .personal_kodawari3_car img{
    width: 183px;
    margin: 0 auto;
  }
}

.personal_voice li{
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}

.personal_voice li .img{
  flex: 0 1 260px;
  order: -2;
}

.personal_voice li .txt{
  flex: 1 1 0%;
}

.personal_voice li h4{
  color: #000;
  margin: 10px 0;
}

.personal_voice li p{
  margin: 0;
}

.personal_voice2 .flex_img{
  flex: 0 1 30%;
}

@media (max-width: 767px){
  .personal_voice li{
    display: block;
  }
  .personal_voice li .img{
    margin-top: 20px;
  }
  .personal_voice2 .flex_img{
    width: 50%;
    margin: 0 auto 20px auto;
  }
}

.personal_factory{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.personal_factory2 li{
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}

.personal_factory2 li .img{
  flex: 0 1 260px;
  order: -2;
}

.personal_factory2 li .txt{
  flex: 1 1 0%;
}

.personal_factory2 li h4{
  color: #000;
  margin: 10px 0;
}

@media (max-width: 767px){
  .personal_factory{
    grid-template-columns:1fr;
  }
  .personal_factory2 li{
    display: block;
  }
  .personal_factory2 li .img{
    margin-top: 20px;
  }
}

.personal_yakusoku .olist li{
  margin-top: 15px;
  font-weight: 700;
  font-size: 1.8rem;
}

.personal_message{
  gap: 60px;
  align-items: center;
}

@media (max-width: 767px){
  .personal_yakusoku .olist li{
    margin: 0 0 15px 0;
    font-size: 1.6rem;
  }
}

.movie_list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  text-align: center;
  font-weight: 700;
}

@media (max-width: 767px){
  .movie_list{
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.other_torikumi li{
  padding: 30px 0;
  border-top: 1px solid #ccc;
}

.other_torikumi li:first-child{
  padding-top: 0;
  border-top: none;
}

.other_torikumi_img{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.sp_logo{
  width: 120px;
  margin: 0 auto 20px auto;
}

.hana_sp ul li{
  margin-top: 10px;
  padding: 10px;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.5;
  background: #e5f4f8;
  border-radius: 5px;
}

.page-plan,
.page-company{
  padding-top: 80px;
}

.plan_img{
  width: min(100%, 1033px);
  margin: 0 auto;
}

.shiharai{
  margin-top: 80px;
  padding: 40px;
  border-radius: 10px;
}

.shiharai h4{
  text-align: center;
  font-size: 3rem;
}

.shiharai .btn{
  width: 270px;
  margin: 20px auto 0 auto;
}

.shikumi_img{
  display: block;
  width: min(100%, 900px);
  margin: 0 auto 80px auto;
}

.index_4strengths_img{
  width: min(100%, 840px);
  margin: 0 auto;
  padding: 0 20px;
}

.index_4strengths_img a,
.index_4strengths_img img{
  display: block;
}

.shikumi_wrap p{
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
}

.shikumi_wrap ul{
  margin: 60px 0;
  display: grid;
	grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.shikumi_wrap li{
  position: relative;
  padding: 60px;
  background: #F2F2F2;
}

.shikumi_wrap li span{
  display: flex;
	align-items: center;
  justify-content: center;
  width: 40px;
  aspect-ratio: 1 / 1;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2.4rem;
  color: #fff;
  background: #343434;
}

@media (max-width: 767px){
  .shikumi_img{
    margin: 0 auto 60px auto;
  }
  .shikumi_wrap p{
    font-size: 2rem;
  }
  .shikumi_wrap ul{
    margin: 40px 0;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
  .shikumi_wrap li{
    padding: 30px 20px 20px 40px;
  }
  .shikumi_wrap li span{
    width: 30px;
    font-size: 1.8rem;
  }
}