@charset "UTF-8";
/*
Theme Name: kawayo
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Zen+Kaku+Gothic+Antique:wght@400;500;700;900&display=swap');

.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.8;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;font-weight: 400;}:where(h1,h2,h3){line-height:calc(1em + 1rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

/* --------------------
   COMMON
-------------------- */
* { transition: .25s all;}
:where(html){ color-scheme: #fff;}
html{
  background: #fff;
  scroll-behavior: smooth;
  font-size: 100%;
  overflow-x: hidden;}
body{
  margin: 0;
  padding: 0;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  color: #402011;
  font-size: 100%;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;}
a {
  color: #EA6120;
  display: block;
  text-decoration: none;}

/* text */
.txs-14 { font-size: 0.875rem; }
.txs-16 { font-size: 1rem; }
.txs-18 { font-size: 1.125rem; }
.txs-19 { font-size: 1.1875rem; }
.txs-20 { font-size: 1.25rem; }
.txs-21 { font-size: 1.3125rem; }
.txs-23 { font-size: 1.4375rem; }
.txs-24 { font-size: 1.5rem; }
.txs-25 { font-size: 1.5625rem; }
.txs-28 { font-size: 1.75rem; }
.txs-34 { font-size: 2.125rem; }
.txs-36 { font-size: 2.25rem; }
.txs-38 { font-size: 2.375rem; }
.txs-40 { font-size: 2.5rem; }
.txs-42 { font-size: 2.625rem; }
.txs-46 { font-size: 2.875rem; }
.txs-48 { font-size: 3rem; }
.txs-51 { font-size: 3.1875rem; }
.txs-54 { font-size: 3.375rem; }
.txs-57 { font-size: 3.5625rem; }
.txs-62 { font-size: 3.875rem; }
.txs-64 { font-size: 4rem; }
.txs-70 { font-size: 4.375rem; }
.txs-72 { font-size: 4.5rem; }
.txs-75 { font-size: 4.6875rem; }
.txs-78 { font-size: 4.875rem; }
.txs-80 { font-size: 5rem; }
.txs-82 { font-size: 5.125rem; }
.txs-86 { font-size: 5.375rem; }
.txs-88 { font-size: 5.5rem; }
.txs-150 { font-size: 9.375rem; }
.txs-200 { font-size: 12.5rem; }

/* weight */
.txw-r { font-weight: 400;}
.txw-m { font-weight: 500;}
.txw-b { font-weight: 700;}
.txw-h { font-weight: 900;}

.pc-center { text-align: center;}
.pc-right { text-align: right;}

p { font-size: 1rem; line-height: 1.8;}

@media screen and (min-width: 1080px){
  .txs-48 { font-size: 3rem; }
  .txs-54 { font-size: 3.5rem; }
  .txs-62, .txs-72 { font-size: 4.5rem; }
  .txs-80, .txs-88 { font-size: 5rem; }
  .txs-150 { font-size: 8rem; }
  .txs-200 { font-size: 10rem; }}

@media screen and (max-width: 768px){
  .txs-14, .txs-16 { font-size: 1rem; }
  .txs-18 { font-size: 1rem; }
  .txs-20, .txs-21, .txs-23, .txs-24, .txs-28 { font-size: 1.25rem; }
  .txs-34, .txs-36, .txs-38, .txs-40, .txs-42, .txs-46, .txs-48 { font-size: 1.5rem; }
  .txs-51, .txs-54, .txs-57 { font-size: 1.8rem; }
  .txs-62, .txs-64, .txs-70, .txs-72 { font-size: 2rem; }
  .txs-75, .txs-78, .txs-80, .txs-82, .txs-86, .txs-88 { font-size: 2.25rem; }
  .txs-150, .txs-200 { font-size: 3rem; }
  p { font-size: 1rem; line-height: 1.8; }
  .pc-center { text-align: left;}
  .pc-right { text-align: left;}}


/* --------------------
   ANIMATION
-------------------- */
.fade {
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity, transform;
	transform: translate(0, 50px);}
.is-scrollIn {
  opacity: 1;
	transform: translate(0, 0);}

/* --------------------
   ALL PARTS
-------------------- */
.wrap {
  padding: 0;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;}
.contents {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 1280px;}
.inner {
  margin: 0 auto;
  padding: 0 100px;
  width: 100%;
  max-width: 1280px;}

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

@media screen and (max-width: 1280px){
  body { width: 100%; overflow: hidden;}
  .contents,.inner { padding: 0 4vw;}}

@media screen and (max-width: 1080px){
  .pc { display: none;}
  .pd { display: block;}
  .sp { display: none;}}

@media screen and (max-width: 768px){
  .pc { display: none;}
  .pd { display: none;}
  .sp { display: block;}}

/* ハンバーガー画像切り替え */
#hamburger {
	position: fixed;
	top: 20%;
	right: -1px;
	width: 55px;
	z-index: 3;
	height: 175px;}
#hamburger .menu-iconsp { display: none;}
.menu-icon img {
  content: url('asset/images/menu-open.png');
  width: 55px;
  transition: content 0.2s ease;}
#hamburger:hover .menu-icon img { content: url('asset/images/menu-close.png');}
#hamburger.active .menu-icon img { content: url('asset/images/menu-close.png');}
#main-nav {
	z-index: 3;
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	background: #EA6120;
	color: #fff;
  display: none;}
#main-nav.active { display: block;}
#bag {
	display: block;
	z-index: -2;
	position: fixed;
	background: rgba(20,20,20,0.8);
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;}
#hamburger-close2 {
	position: absolute;
	top: 20%;
	z-index: 5;
	left: -54px;}
#hamburger-close {
	z-index: 5;
	position: fixed;
	top: 40px;right: 40px;}
#main-nav a {
	font-weight: 500;
	color: #fff;}
#main-nav .flex {
	width: 300px;
	display: flex;
	justify-content: space-between;}
#main-nav .flex li { padding: 0 0 16px;}
#main-nav .contactlink {
	margin: 24px auto 20px;
	background: #fff;
	color: #EA6120;
	font-weight: 600;
	text-align: center;
	line-height: 50px;
	height: 50px;
	border-radius: 25px;
	width: 100%;
	font-size: 18px;}
#main-nav .sub {
	padding-bottom: 100px;
	width: 300px;
	gap: 20px;
	display: flex;
	justify-content: center;}
#main-nav .sub a { font-size: 14px;}
#main-nav .wrap {
	background: #EA6120;
	color: #fff;
	position: relative;
	z-index: 4;
	padding: 140px 60px 0;
	overflow: scroll;
	height: 100vh;}

/* --------------------
   HEADER
-------------------- */
#header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 4;}
#header .logo.flex {
	padding: 22px 0 0 40px;
	gap: 30px;
	display: flex;}
#header .flex img { width: 242px;}
#header h1 {
	color: #fff;
	text-shadow: 0 0 10px rgba(0,0,0,0.7);
	line-height: 1;}
#hd-nav {
	position: absolute;
	top: 0;
	right: 0;
	height: 80px;
	width: 590px;}
#hd-nav .flex { display: flex;}
#hd-nav .tel {
	background: #fff;
	height: 80px;
	border-radius: 0 0 0 30px;
	padding: 10px 0 0 10px;
	text-align: center;
	line-height: 1;
	width: 310px;}
#hd-nav .tel a {
	padding-left: 20px;
	background: url("asset/images/icon-tel.png") no-repeat left 28px bottom 3px;
	background-size:21px auto;}
#hd-nav .mail {
	height: 80px;
	text-align: center;
	line-height: 80px;
	width: 280px;
	background: linear-gradient(to left, #EA6120, #FD821A);}
#hd-nav .mail a {
	color: #fff;
	padding-left: 30px;
	background: url("asset/images/icon-mail.png") no-repeat left 40px bottom 29px;
	background-size:26px auto;}

/* --------------------
   HERO
-------------------- */
#hero .pc {
	margin-bottom: 210px;
	position: relative;
	background: url("asset/images/main-back.jpg") no-repeat center center;
	background-size:cover;
	height: 800px;
	padding-top: 140px;}
#hero .pc img {
	position: relative;
	z-index: 1;}
#hero .pc::after{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 160px;
  background: #fff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	pointer-events: none;}

/* --------------------
   bana
-------------------- */
#banner {
  padding-bottom: 60px;
  overflow: hidden;}
#banner .bannerlist {
  margin: 10px;
  position: relative;
  padding: 20px 0;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);}
#banner .js-slider {
  width: 100%;
  max-width: 1280px;
  overflow: hidden;
  margin: 0 auto;}
#banner .slick-list,#banner .slick-track {
  overflow: visible !important; /* スライドをはみ出して見せるため */}
#banner .slick-slide {
  padding: 0 10px; /* スライド同士の間隔を調整 */}
#banner .slick-slide img {
  width: 100%;
  display: block;}
#banner .slick-prev,
#banner .slick-next {
  position: absolute;
  border-radius: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  width: 60px;
  height: 60px;
  top: 50%;
  margin-top: -30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;}
#banner .slick-prev {
  background-image: url("asset/images/arrow-prev.png");
  left: 240px; /* スライダーの左に配置 */}
#banner .slick-next {
  background-image: url("asset/images/arrow-next.png");
  right: 240px; /* スライダーの右に配置 */}

@media (max-width: 1080px) {
  #banner { padding-top: 20px;padding-bottom: 0;}
  #banner .bannerlist { padding: 0;}
  #banner .js-slider {max-width: 100%;}
  #banner .slick-slide { padding: 0;}}

/* --------------------
   YOUZTUBE
-------------------- */
#youtube h1 {
	padding: 15px 26px;
	background: #FFDE00;
	color: #222222;
	text-align: center;
	height: 70px;
	border-radius: 20px 20px 0 0;}
#youtube .movie-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;}
#youtube .movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;}

/* --------------------
   CONTACT
-------------------- */
.contact {
  padding: 40px 0 0;
  margin: 0 auto;}
.contact-header {
  background: linear-gradient(0deg, #FD821A 0%, #EA6120 100%);
  color: #fff;
  text-align: center;
  padding: 40px 0 30px;
  border-radius: 20px 20px 0 0;}
.contact-header h2 {
  line-height: 1.6;
  margin: 0;
  font-weight: bold;}
.contact-form {
  background: #F6F6F6;
	padding: 50px 100px 140px;}
.contact-form .flex {
	gap:120px;
	display: flex;}
.contact-form .flex .box {
	width: 100%;}
.contact-form .flex .box dt {
	padding-bottom: 14px;
	display: flex;
	align-content: center;
	gap:14px;}
.contact-form .flex .box dt p.txs-18 {
	color: #402011;
	line-height: 1;}
.contact-form .flex .box dt p.hisu {
	font-weight: 600;
	color:#EA6120;}
.contact-form .form-group {
  margin-bottom: 20px;}
.contact-form .required,
.contact-form .optional {
  display: inline-block;
  font-size: 14px;
	height: 24px;
	border-radius: 12px;
	width: 60px;
	line-height: 24px;
	font-weight: 500;
	text-align: center;}
.contact-form .required {
  background: #EA6120;
  color: #fff;}
.contact-form .optional {
  background: #C9C9C9;
  color: #fff;}
.contact-form select { appearance: none;}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  box-shadow: 0;
	background: #fff;
  width: 100%;
  padding: 10px;
	height: 50px;
  border: 1px solid #fff;
  border-radius: 3px;
  box-sizing: border-box;}
.contact-form textarea {
	margin-top: 20px;
	height: 190px;}
.contact-form input[type=checkbox] { display: none;}
.contact-form input[type=checkbox]:checked + .wpcf7-list-item-label::after { opacity: 1 !important;}
.contact-form span.wpcf7-list-item-label {
  position: relative;
  display: inline-block;
  margin: 10px 30px 0 0;
  padding: 0 0 0 30px;
  line-height: 1;
  height: 24px;
  vertical-align: middle;
	cursor: pointer;}
.contact-form .wpcf7-list-item-label::before {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  content: '';
  border: 1px solid #C9C9C9;
  background: #FFFFFF;}
.contact-form .wpcf7-list-item-label::after {
  position: absolute;
  top: 5px;
  left: 5px;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background-color: #EA6120;
  content: '';
  opacity: 0;}
.contact-form .checkbox-group label {
  margin-right: 20px;
  font-weight: normal;}
.contact-form .privacy {
  color: #402011;
	letter-spacing: 0;
  line-height: 1.6;}
.contact-form .privacy a {
  color: #f26b24;
	display: inline-block;
  text-decoration: underline;}
.contact-form .form-submit {
  text-align: center;
  margin-top: 30px;}
.contact-form input[type=submit] {
  background: #006b57;
  color: #fff;
	height: 80px;
	width: 400px;
	font-size: 24px;
	font-weight: 600;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.3s;}
.contact-form input[type=submit]:hover { background: #008b6a;}
#contactform-last .contact-header {
	color: #402011;
	background: #F6F6F6;}
#contactform-last h2 {
	padding: 20px 0 50px;
	border-bottom: 2px solid #fff;}
.wpcf7-list-item { margin: 0;}

/* --------------------
   TELCONTACT
-------------------- */
.telcontact { background: linear-gradient(0deg, #FD821A 0%, #EA6120 100%);}
.telcontact .flex {
	height: 320px;
	display: flex;
	align-items: flex-end;}
.telcontact .photo { flex: 1;}
.telcontact .text { padding-bottom: 80px;}
.telcontact .text p {
	color: #fff;
	line-height: 1.2;}
.telcontact .text .txs-24 {
	padding-left: 26px;
	background: url("asset/images/icon-tel3.png") no-repeat left bottom;
	background-size: 21px auto;
	color: #F8EC9C;
	line-height: 1;}
.telcontact .text a { color: #fff;}

/* --------------------
   NAYAMI
-------------------- */
#nayami {
	padding: 110px 0 30px;
	position: relative;
	background: url("asset/images/nayami-back.jpg") no-repeat center bottom;
	background-size: cover;}
#risk::after{
  content: "";
	display: block;
  position: absolute;
  right: 0;
	top: -1px;
  width: 100vw;
  height: 160px;
  background: #C9C9C9;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	z-index: 1;}
#risk {
	position: relative;
	padding-top: 240px;}
#risk h1 { text-align: center; margin-bottom: 80px;}
#risk h1 img { display: inline-block;}
#risk .risk_list {
	padding: 80px 100px 60px;
	border-radius: 10px 10px 0 0;
	background: linear-gradient(180deg, #E5E5E5 80%, #ffffff 100%);}
#risk .risk_list h2 {
	position: relative;
	margin-top: 10px;
	padding: 0 0 20px;
	line-height: 1.2;
	padding-left: 110px;
	background: url("asset/images/cloud.png") no-repeat top left;
	background-size: 94px auto;}
#risk .risk_list h2.no1::after,
#risk .risk_list h2.no2::after {
	position: absolute;
	display: block;
	font-size: 36px;
	width:40px;
	height: 40px;
	left: 40px;
	top: 12px;
	content: "1";}
#risk .risk_list h2.no2::after {
	content: "2";}
#risk .flex {
	gap:60px;
	padding-bottom: 40px;
	justify-content: space-between;
	display: flex;}
#risk .flex p { padding-top: 10px;}
#risk .flex.change {
	padding-bottom: 80px;
	flex-direction: row-reverse;}
#risk .text { width: 600px; letter-spacing: 0;}
#risk .photo img { border-radius: 10px;}

/* --------------------
   NAYAMI
-------------------- */
#ansin {
	overflow: visible;
	margin-top: 380px;
	border-top: 4px solid #EA6120;
	background: #FEF4EB;}
#ansin .inner {
	padding-top: 400px;
	overflow: visible;
	position: relative;}
#ansin h1 {
	position: absolute;
	top: -360px;
	z-index:1;
	left: 100px;}
#ansin .ansin_list .flex {
	padding-bottom: 20px;
	align-items: center;
	gap: 40px;
	display: flex;}
#ansin .ansin_list .item {
	position: relative;}
#ansin .ansin_list .photo {
	width: 220px;}
#ansin .ansin_list .text { width: 820px;}
#ansin p.namber {
	position: absolute;
	top: 0;
	left: 0;
	background: #EA6120;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	border-radius: 60px;
	color: #fff;}
#ansin .whitebox {
	margin: 0 0 30px 20px;
	padding: 40px 60px;
	background: #fff;
	border-radius: 10px;}
#ansin .pdt10 {
	padding-top: 10px;}
#ansin .nam3 h2 {
	padding: 10px 0 20px;
	text-align: center;}
#ansin .nam3 img {display: inline-block;}
#ansin .nam3 p.txw-m {
	padding: 30px 0 16px;}
#ansin .nam6 .flex2 {
	display: flex;
	gap:50px;
	justify-content: space-between;}
#ansin .nam6 .flex2 .text { width: 480px;}
#ansin .nam6 .flex2 .photo { width: 410px;}

/* --------------------
   WORKS
-------------------- */
#works {
	padding: 240px 0;
	position: relative;
	background: #EA6120;}
#works::after{
  content: "";
	display: block;
  position: absolute;
  right: 0;
	top: -1px;
  width: 100vw;
  height: 160px;
  background: #FEF4EB;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	z-index: 1;}
#works h1 {
	padding-bottom: 60px;
	text-align: center;
	color: #FEF4EB;}
#works .list {
	flex-wrap: wrap;
	justify-content: center;
	gap:50px 40px;
	display: flex;}
#works .item {
  position: relative;
  width: 520px;}
#works .beforeafter { border: 4px solid #402011;}
#works .beforeafter img {
  width: 100%;
  height: 340px;
  object-fit: cover;}
#works .item p {
  margin-top: 10px;
  text-align: center;}
#works .item p span {
	margin: 2px;
  background: #FEF4EB;
  padding: 3px 20px 5px;
	font-weight: 500;
  border-radius: 20px;}
#works .item h2 {
	text-align: center;
	letter-spacing: 0;
	background: #402011;
	border-radius: 6px 6px 0 0;
	height: 60px;
	padding: 12px 20px;
	color: #FEF4EB;}
#works .subprice {
	margin: 80px auto 120px;}
.subcontact .box {
	position: relative;
	padding: 0 0 60px;
	border-radius: 20px;
	margin: 0 40px;
	background: #FEF4EB;}
#works .subcontact h2 {
	position: relative;
	top: -50px;
	background: #FFDE00;
	border: 4px solid #F6F6F6;
	height: 100px;
	line-height: 94px;
	border-radius: 50px;
	text-align: center;
	color: #EA6120;}
.subcontact .flex {
	display: flex;
	align-items: center;
	justify-content: space-between;}
.subcontact .phonebox {
	height: 180px;
	padding: 16px 0 0 60px;
	position: relative;}
.subcontact .phonebox p { line-height: 1.2;}
.subcontact .phonebox h3 {
	padding-left: 26px;
	background: url("asset/images/icon-tel4.png") no-repeat left bottom;
	background-size: 21px auto;
	line-height: 1;}
.subcontact .phonebox a { color: #EA6120;}
.subcontact .phonebox::before {
	display: block;
	position: absolute;
	height: 180px;
	left: 0;
	top: 0;
	content: "";
	border-left: 1px solid #C9C9C9;}
.subcontact .mailbox p {
	line-height: 1.6;
	padding-bottom: 20px;
	text-align: center;}
.subcontact .mailbox a {
	position: relative;
	border-radius: 76px;
	height: 76px;
	line-height: 76px;
	text-align: center;
	color: #fff;
	width: 480px;
	background: #A71A00;}
.subcontact .mailbox a::after {
  content: "";
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-40%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #fff;}
.subcontact .mailbox a:hover { background: #7C1401;}
.subprice { display: flex;gap:20px 40px;justify-content: center;}
.subprice h3 { color: #fff;}
.subprice h3 span { color: #FFDE00;}
.subprice table {
  border-spacing:0;
  flex: 1;
  border-top: 1px solid #FC8D59;}
.subprice table th, .subprice table td {
  padding: 10px;
  color:#fff;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid #FC8D59;}
.subprice table th { width: 400px;}
.subprice table td { text-align: right;width: 200px;}

/* --------------------
   Review
-------------------- */
#review {
	padding: 160px 0 0;
	background: url("asset/images/google-back.jpg") repeat left top;}
#review .inner {
	padding-bottom: 270px;
	background: url("asset/images/google-back2.jpg") no-repeat center bottom;
	background-size: 1076px auto;}
#review h1 {
	padding-bottom: 30px;
	text-align: center;}
#review h1 img { display: inline-block;}
#review .item { 
	margin-top: 10px;
	padding: 40px;
	background: #fff;
	border: 2px solid #EA6120;
	border-radius: 10px;}
#review .item .title {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 30px;}
#review .item .title p {
	height: 30px;
	padding-left: 40px;
	background: url("asset/images/icon-human.png") no-repeat left bottom;
	background-size: 30px auto;}
#review .item .comme p {
	letter-spacing: 0;
	font-weight: 500;}

/* --------------------
   POINT
-------------------- */
#point { padding: 60px 0 120px;}
#point h1 {
	padding-left: 40px;
	border-left: 6px solid #EA6120;}
#point h1 span.txs-36 { color: #EA6120;}
#point .flex {
	padding: 68px 0 40px;
	display: flex;
	justify-content: space-between;
	gap:60px;}
#point .photo { width: 500px;}
#point .text { width: 520px;}
#point .text p {
	letter-spacing: normal;
	padding-bottom: 10px;}
#point .green { color: #017164;}
#point .orange { color: #EA6120;}
#point h3,#point h4 { text-align: center;}

/* --------------------
   PRICE
-------------------- */
#price {
	padding: 120px 0;
	background: #FEF4EB;}
#price .contents {
	padding: 100px 100px 60px;
	background: #fff;
	border-radius: 20px;}
#price h1 {
	margin-bottom: 60px;
	text-align: center;}
#price h1 span.txs-24 {
	margin-bottom: 30px;
	display: inline-block;
	color: #fff;
	height: 60px;
	line-height: 60px;
	text-align: center;
	width: 420px;
	border-radius: 30px;
	background: linear-gradient(0deg, #FD821A 0%, #EA6120 100%);}
#price h1 span.txs-72 { color: #EA6120;}
#price .pricelist .flex {
  margin-top: 60px;
  gap: 40px 60px;
  justify-content: center;
  flex-wrap: wrap;
  display: flex;}
#price .pricelist .item { width: 320px;}
#price .pricelist table {
  margin-top: 16px;
  border-top: 1px solid #FEF4EB;
  width: 100%;}
#price .pricelist table th, #price .pricelist table td{
  text-align: left;
  border-bottom: 1px solid #FEF4EB;}
#price .pricelist table td{ text-align: right;}
#price .right { padding-top: 40px;}

/* --------------------
   guarantee
-------------------- */
#guarantee {
	padding-bottom: 120px;
	background: #FEF4EB;}
#guarantee h1 {
	padding-top: 80px;
	height: 280px;
	position: relative;
	text-align: center;
	overflow: visible;
	background: linear-gradient(0deg, #FD821A 0%, #EA6120 100%);}
#guarantee h1::after{
  content: "";
	display: block;
  position: absolute;
  right: 0;
	bottom:-99px;
  width: 100vw;
  height: 100px;
  background: #FD821A;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	z-index: 1;}
#guarantee h1 img {
	left: 40px;
	position: relative;
	z-index: 2;
	display: inline-block;}
#guarantee .gualist {
	padding-top: 180px;}
#guarantee .gualist h2 {
	margin-bottom: 60px;
	text-align: center;}
#guarantee .gualist h2 .txs-18 {
	margin-bottom: 30px;
	display:inline-block;
	background: #F8EC9C;
	color: #EA6120;
	border-radius: 25px;
	height: 50px;
	line-height: 50px;
	width: 440px;}
#guarantee .flex {
	margin-bottom: 60px;
	gap:40px;
	display: flex;}
#guarantee .flex img {
	border-radius: 10px;
	widht:520px;
	height: 300px;}
#guarantee .hosyotable { margin-bottom: 100px;}
#guarantee .hosyoimg2 { text-align: center;}
#guarantee .hosyoimg2 img { display: inline-block;}
#guarantee .hosyoimg2 .txs-24 { padding: 40px 0 60px;}
#guarantee .flex2 {
	padding-bottom: 100px;
	display: flex;
	gap:40px;
	justify-content: space-between;}
#guarantee .flex2 .item {
	padding: 0 40px 50px;
	width: 100%;
	background: #fff;
	border-radius: 10px;}
#guarantee .flex2 .item.normal {
	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);}
#guarantee .flex2 .item.orange {
	border:2px solid #EA6120;}
#guarantee .flex2 .item h3 {
	width: 220px;
	line-height: 50px;
	margin: 0 auto;
	text-align: center;
	border-radius: 0 0 20px 20px;}
#guarantee .flex2 .item.normal h3 { background: #C9C9C9;}
#guarantee .flex2 .item.orange h3 { background: #EA6120; color: #F8EC9C;}
#guarantee .flex2 .item img { margin:44px auto 0;}
#guarantee .flex2 .item h4 {
	padding: 34px 0 20px;
	text-align:center;
	letter-spacing: normal;
	line-height: 1.5;}
#guarantee .subcontact .box {
	padding: 60px 0;
	height: 300px;
	background: #fff;}

/* --------------------
   faq
-------------------- */
#faq { padding: 120px 0;}
#faq h1 {
	text-align: center;
	color: #EA6120;}
#faq h1 .txs-24 {
	display: block;
	padding-bottom: 10px;
	letter-spacing: normal;}
#faq .qa { margin: 80px 0 0;}
#faq .qa__head {
	padding: 0;
  position: relative;
  background: #fff;
	border: 0;
	text-align: left;
  border-bottom: 2px solid #EA6120;
  min-height: 76px;
	line-height: 76px;
  color: #EB6120;
  cursor: pointer;
  width: 100%;}
#faq .qa__head span {
	position: relative;
	top: -6px;
	vertical-align: middle;
	padding-right: 20px;}
#faq .qa__item { margin-bottom: 20px;}
#faq .qa__head:after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  background: #EB6120;
  position: absolute;
  right: 30px;
  top: 24px;
  transition: transform .4s;}
#faq .qa__head:before {
  content: "";
  display: block;
  width: 2px;
  height: 30px;
  background: #EB6120;
  position: absolute;
  right: 44px;
  top:24px;
  margin-top: -14px;
  transition: transform .4s;}
#faq .qa__head p { padding-left: 20px;}
#faq .qa__body {
  position: relative;
  padding: 0 20px;
  opacity: 0;
  height: 0;
  transition: line-height 0.4s, padding 0.4s, opacity 0.4s;}
#faq .qa__body.is-open {
  padding: 20px;
  height: auto;
  opacity: 1;}
#faq .qa__head.is-open::before { display: none;}
#faq .qa__body p { padding-left: 70px; max-width: 880px;}

/* --------------------
   impurtant
-------------------- */
#impurtant {
  overflow: visible;}
#impurtant .text {
  overflow: visible;
  position: relative;
  background: #fff;
  border: 4px solid #A71A00;
  gap:30px 40px;
  border-radius: 10px;
  color: #A71A00;
  text-align: center;
  padding: 60px 60px 80px;}
#impurtant .text img {
  position: absolute;
  height: 80px;
  width: 80px;
  top: -40px;
  left: 50%;
  margin-left: -40px;}
#impurtant .text h1 {
  margin-bottom: 20px;}
@media screen and (max-width: 1080px){
  #impurtant .text { padding: 50px 30px 40px;}
  #impurtant .text h1 { margin-bottom: 10px;}
  #impurtant .text p { text-align: left;}}
@media screen and (max-width: 768px){
  #impurtant .text { padding: 50px 20px 30px;}
  #impurtant .text h1 { margin-bottom: 10px;}
  #impurtant .text p { text-align: left;}}

/* --------------------
   blog
-------------------- */
#blog {
	padding-top: 120px;
	padding-bottom: 100px;}
#blog .flex {
	align-items: center;
	padding-bottom: 30px;
	justify-content: space-between;
	display: flex;}
#blog h1 span {
	line-height: 1;
	color: #EA6120;}
#blog .flex a {
	color: #EA6120;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	border-radius: 10px;
	position: relative;
	height: 60px;
	line-height: 56px;
	width: 280px;
	border:2px solid #EA6120;}
#blog .flex a::before {
	position: absolute;
	top: 25px;
	right: 26px;
	background: #EA6120;
  height: calc(tan(60deg) * 12px / 2);
  width: 10px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: "";}
#blog .list {
	gap:30px;
  flex-wrap: wrap;
	display: flex;
	justify-content: center;}
#blog .item {
	overflow: hidden;
	border-radius: 10px;
	width: 340px;}
#blog .item .photo {
	background: #ccc;
	height: 200px;}
#blog .item .photo img {
	width: 100%;
	height: 200px;
	object-fit: cover;}
#blog .item .text {
	height: 80px;
	padding: 20px 20px 14px;
	position: relative;
	background: #F6F6F6;}
#blog .item .text h2 {
	color: #382712;
	line-height: 1.2;
	font-size: 16px;}
#blog .item .text p.day {
	line-height: 28px;
	z-index: 2;
	background: #EA6120;
	position: absolute;
	left: 0;
	top: -14px;
	border-radius: 0 14px 14px 0;
	min-width: 108px;
	text-align: center;
	color: #fff;}
@media screen and (max-width: 1080px){
	#blog { padding-top: 40px;padding-bottom: 40px;}
	#blog .flex a { margin-top: 20px;}
	#blog .flex{ flex-wrap: wrap;}}
@media screen and (max-width: 768px){
  #blog .item .text h2 { text-align: center;}}

/* --------------------
   footer
-------------------- */
#footer .wrap {
	padding: 80px;}
#footer .info {
	gap:50px;
	display: flex;}
#footer .info table td,
#footer .info table th {
	padding: 2px 30px 6px 0;
	letter-spacing: normal;
	border-bottom: 1px solid #EEEEEE;}
#footer .info table th {
	padding-right: 30px;
	text-align: left;}
#footer .ft {
	padding-top: 50px;
	justify-content: flex-end;
	gap:40px;
	display: flex;}
#footer .ft .right {
	text-align: right;}
#footer .ft .right a {
	text-decoration: underline;
	color: #402011;}
#footer .ft .left {
	line-height: 1;
	color: #EA6120;
	padding-left: 30px;
	border-left: 1px solid #EA6120;}

/* --------------------
   SP
-------------------- */
@media screen and (max-width: 1080px){
	#header {
		height: 50px;background: #fff;
		position: fixed;top:0;left: 0;width: 100%;
		z-index: 4;}
	#header .logo h1,#hamburger-close2 {display: none;}
	#header .logo img { width: 112px;}
	#header .logo.flex { padding: 6px 0 0 10px;}
	#hd-nav .tel { right: 100px;position: absolute;}
	#hd-nav .mail { right: 50px;position: absolute;}
	#hd-nav .tel p,#hd-nav .tel span,#hd-nav .mail span { display: none;}
	#hd-nav .tel ,#hd-nav .mail{ width: 50px;height: 50px; border-radius: 0;padding: 0;}
	#hd-nav .tel a {
		width: 50px;height: 50px;
		background: #FD9022 url("asset/images/icon-tel2.png") no-repeat center center;
		background-size:21px auto;}
	#hd-nav .mail a {
		width: 50px;height: 50px;
		background: #F3711E url("asset/images/icon-mail.png") no-repeat center center;
		background-size:26px auto;}
	#hamburger { top: 0;right: 0; width: 50px; height: 50px;z-index: 1;}
	#hamburger .menu-iconsp { display: block;}
	#hero { padding-top: 50px;}
	#youtube h1 { height: auto;}
	#youtube .contents,#youtube .inner { padding: 0;}
	.contact-form { padding: 50px 40px 100px;}
	.contact-form .flex { display: block;}
	.contact-form .form-group { margin-bottom: 30px;}
	.telcontact .flex { flex-wrap: wrap-reverse; height: auto;}
	.telcontact .photo,.telcontact .text { width: 100%; text-align: center;flex: auto;}
	.telcontact .text { padding: 60px 0 10px;}
	.telcontact .text .txs-24 { background:none; padding: 0;}
	.telcontact .photo img { margin: 0 auto;}
	#risk .flex { display: block;}
	#risk .flex .photo img { margin: 30px auto 0;}
	#risk .risk_list { padding-bottom: 0;}
	#ansin { margin-top: 30vw;}
	#ansin h1 { left: 0; padding: 0 4vw;top: -28vw;}
	#risk .pc-center { text-align: center;}
	#risk .text { width: 100%;}
	#ansin .inner { padding-top: 45vw;}
	#ansin .ansin_list .flex,#ansin .nam6 .flex2 { display: block;}
	#ansin .ansin_list .photo { margin: 0 auto 20px;}
	#ansin p.namber { left: 50%; margin-left: -30px; top: -20px;}
	#ansin .ansin_list .item { padding-bottom: 40px;}
	#ansin .whitebox { margin-left: 0;}
	#ansin .nam6 .flex2 .text,#ansin .nam6 .flex2 .photo,#ansin .ansin_list .text,#ansin .ansin_list .photo { width: 100%;}
	#ansin .nam6 .flex2 .photo { padding-top: 20px;}
	#works { padding: 200px 0 160px;}
	#ansin .ansin_list .flex .photo img { margin: 0 auto;}
	#works .item p span { display: inline-block;}
	#works .subprice { margin: 60px auto 100px;}
	#works .subcontact h2 { font-size: 24px;}
	.subcontact .flex { display: block;}
	.subcontact .phonebox {padding: 40px 0 0; text-align: center;}
	.subcontact .phonebox h3 {background: none;}
	.subcontact .phonebox::before { display: none;}
	.subcontact .mailbox a { max-width: 480px; width: 100%; margin: 0 auto;}
  .subprice { display: block;}
  .subprice table { margin-top: 20px; width: 100%;}
  .subprice table th { width: 60%;}
  .subprice table td { width: 40%;}
	#review .inner { background-size: contain; padding-bottom: 25vw;}
	#point { padding: 120px 4vw;}
	#point .flex { display: block;}
	#point .photo, #point .text { width: 100%;padding-bottom: 40px;}
	#point .flex .photo img { margin: 0 auto;}
	#price{padding: 120px 4vw;}
	#price .contents { padding: 60px 60px;}
  #price .pricelist .item { width: 40%;}
	#guarantee .flex { display: block;}
	#guarantee .flex img { margin: 0 auto 40px; height: auto;}
	#guarantee .flex2 { display: block;}
	#guarantee .flex2 .item.normal { margin-bottom: 30px;}
	#guarantee .subcontact .box { height: auto; padding-bottom: 30px;}
	#faq .qa__head span { font-size: 20px;top:-3px;position: absolute;left: 0;}
	#faq .qa__head p { padding-right: 120px;line-height: 1.2;font-size: 16px;padding: 0 40px 0 40px;position: relative;}
	#faq .qa__head:before { height: 20px;right:9px;top:40px;}
	#faq .qa__head:after { width: 20px;right:0;top:35px;}
	#faq .qa__body p { padding: 0;}
	#faq .qa { margin-top: 40px;}
	#footer .wrap { padding: 50px 4vw;}
	#footer .info { display: block;}
	#footer .address { margin-top: 30px;}
	#footer .info table td { padding-right: 0;}
	#footer .ft .left { display: none;}}

@media screen and (max-width: 768px){
	#main-nav .wrap { padding: 120px 20px 0; width: 90vw;}
	#main-nav .flex { width: 100%; justify-content: center;gap:40px;}
	#main-nav .sub { width: 100%;}
	#youtube h1 { margin-top: 20px;line-height: 1.5;font-size: 16px;letter-spacing: normal;}
	.contact-header { padding: 20px 0 10px;}
	.contact-header h2 { font-size: 16px; padding: 10px;}
	.contact-form { padding: 30px 20px 100px;}
	.contact-form input[type=submit] { width: 100%;}
	#nayami { padding: 50px 0 60px;}
	#risk::after,#works::after { height: 60px;}
	#risk { padding-top: 100px;}
	#risk h1 { margin-bottom: 40px;}
	#risk .pc-center { font-size: 20px; line-height: 1.5;}
	#risk .risk_list { padding: 8vw 8vw;}
	#risk .flex.change { padding-bottom: 0;}
	#ansin { margin-top: 90vw;}
	#ansin h1 { left: 0; padding: 0 4vw;top: -80vw;}
	#ansin .inner { padding-top: 110vw;}
	#ansin .ansin_list h2 { padding-bottom: 10px;}
	#ansin .whitebox { padding: 50px 8vw 40px;}
	#works { padding: 120px 0 60px;}
	#works h1 { letter-spacing: normal;}
	#works .beforeafter img { height: 240px;}
	.subcontact .box { margin: 0 4vw; padding-bottom: 0;}
	.subcontact .inner { padding: 0 8vw;}
	#works .subcontact h2 { font-size: 16px; height: auto; line-height: 1.5; padding: 10px 20px;width: 100%;}
	.subcontact .mailbox p { font-size: 18px;}
	.subcontact .mailbox p br { display: none;}
	.subcontact .phonebox h3 { padding: 0;}
	.subcontact .mailbox a {  line-height: 1.4; padding-top: 16px;}
	#review { padding: 60px 0;}
	#review .item { padding: 30px 8vw;}
	#review .item .comme p { font-size: 14px;}
	#point { padding: 40px 4vw;}
	#point .flex { padding: 40px 0 0;}
	#point h1 { line-height:1.5; padding-left: 20px;font-size: 18px;}
	#point h1 span.txs-36 { line-height: 1;}
	#price .contents { padding: 40px 8vw;}
	#price h1 span.txs-24 { font-size: 16px; width: 100%;margin-bottom:10px; height: 40px;line-height: 40px; letter-spacing: normal;}
  #price .pricelist .flex { margin-top: 30px;}
  #price .pricelist .item { width: 100%;}
  #price .right { padding-top:20px;}
	#guarantee h1 { height: 100px;padding-top: 30px;}
	#guarantee h1 img { left: 3vw;}
	#guarantee h1::after { height: 60px;bottom: -59px;}
	#guarantee .gualist h2 .txs-18 { width: 100%;margin-bottom:10px;}
	#guarantee .gualist { padding-top: 20px;}
	#guarantee .flex { margin-bottom: 20px;}
	#guarantee .gualist h2 { margin-bottom: 20px;}
	#guarantee .flex2 .item { padding: 0 8vw 40px;}
	#guarantee .flex2 { padding-bottom: 40px;}
	#guarantee .subcontact .box { padding-bottom: 0;}
	#guarantee { padding-bottom: 60px;}
	#faq { padding: 60px 0;}
	#faq h1 { line-height: 1.5;}
	#footer .info table th,#footer .info table td { display: block;}
	#footer .info table th { border-bottom: none;padding: 10px 0 0;}
	#footer .info table td { padding: 0 0 10px;}
	#footer .txs-14 { font-size: 12px; letter-spacing: normal;}
	#footer h1 img {margin: 0 auto;}}