@charset "UTF-8";

a:hover{
  transition: .3s;
 }

.inner_long{
	padding:6rem 0 !important;
}

.bg_g {
	background:#E6F3EC;
}
.bg_g2 {
	background:#00796B;
}


.mb-20{
	margin-bottom:2rem;
}
.mb-50{
	margin-bottom:5rem;
}

.fixed-width{
	max-width: 1140px;
}

.annotation{
	margin-top: -4rem;
	text-align:right;
}
.flatpickr-months .flatpickr-month{
	height:40px;
}

/* CTA */
.cta {
background: #469045;
background: linear-gradient(90deg,rgba(70, 144, 69, 1) 0%, rgba(118, 193, 107, 1) 100%);
	padding: 30px 0 40px 0;
	width: 100%;
}
.cta h3 {
	background-color: #3B773C;
	color: #fff;
	text-align: center;
	font-size: 3.0rem;
	padding: 2rem 0;
	line-height: 1.6;
	margin-bottom: 3rem;
}
.cta h3 span {
	display: block;
	font-size: 2.4rem;
}
.cta .flex {
  display: grid;
  gap: 2%;
  grid-template-columns: repeat(2, 1fr);
  width:100%;
  max-width:960px;
  margin:0 auto;
}
.cta .flex p {
	color: #fff;
	font-size: 24px;
	font-weight:bold;
	line-height: 1.6;
	margin-bottom: 2rem;
	height: 100px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cta .flex .left {
}
.cta .flex .txt {
	display: flex;
	margin: 0 auto 2rem;
	align-items: center;
	justify-content: center;
}
.cta .flex .txt p {
	margin-bottom: 0;
}
.cta .flex .txt figure {
	display: flex;
	align-items: center;
}
.cta .flex .txt figure img {
	height: 100px;
	width: auto;
	margin-right: 1rem;
	box-shadow: 5px 5px 1px rgba(255, 255, 255, 0.15);
}
.cta .flex .btn {
	background: #FBC02D;
	background: linear-gradient(180deg,rgba(251, 192, 45, 1) 0%, rgba(225, 172, 41, 1) 100%);
	color: #020202;
	border: 2px solid #fff;
	border-radius: 10px;
	font-size: 20px;
	line-height: 60px;
	font-weight: bold;
	width: 380px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	position:relative;
	margin: 0 auto;
}
.cta .flex .btn::after {
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position:absolute;
	right: 2rem;
	font-size: 20px;
}
.cta .flex .btn:hover {
	opacity: 0.8;
}
.cta .flex .btn.green {
background: #CDDC39;
background: linear-gradient(180deg,rgba(205, 220, 57, 1) 0%, rgba(191, 205, 46, 1) 100%);
	color: #020202;
}
.cta .flex .btn.green::after {
	content: "\f105";
	font-family: "Font Awesome 5 Free";
}
@media (max-width: 767px) {
	.pc {
		display: none;
	}
	.cta {
    padding: 0 0 30px 0;
	}
	.cta h2 span {
    font-size: 18px;
	}
	.cta .flex {
		display: block;
	}
	.cta .flex .left {
		margin: 0 0 20px 0;
		border-bottom: 1px solid #DDE6F8;
		padding-bottom: 20px;
	}
	.cta .flex .txt {
		justify-content: center;
	}
	.cta .flex h3 {
		font-size: 20px;
	}
}


.container{
	padding-top:70px;
	box-sizing:border-box;
	font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
}
/*
	@media screen and (max-width:1000px) {
		#container {
			padding-top: 110px;
		}
	}
*/

/* イントロ */
.introWrap{
	overflow:hidden;
}
.intro{
	display:flex;
	justify-content:center;
	margin-inline: auto;
	min-height:600px;
}

.introWrap .flexRV{
	display:flex;
	flex-direction:column-reverse;
}
.introWrap h1 {
	font-size: 54px;
	font-weight: bold;
	line-height:1.4;
	color: #fff;
	margin-bottom: 2rem;
	text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);
}
.introWrap h1 span {
	font-size: 44px;
}

.introWrap h2 {
	font-size: 28px;
	font-weight: bold;
	line-height:1;
	color: #3E743F;
	margin-bottom: 2rem;
	display:block;
	background:#FFEB3B;
	padding: 1.0rem 1.4rem;
	width: fit-content;
}
.introWrap h2 span {
	font-size: 24px;
	color: #333;
}

.introTxtBox{
	background: url(/hojokin/images/bg_intro_left.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top left;
	/* margin-left: calc(50% - 50vw); */
	display:flex;
	width: 60%;
	align-items:center;
	justify-content: end;
	padding-top:2rem;
	padding-right: 8vw;
}
.introTxt{
	line-height:1.6;
	color: #fff;
	position:relative;
	/* margin-left: calc(50% - 10vw); */
}

.introPop{
	color:#212121;
	text-align:center;
	background:#FFEB3B;
	border-radius:50%;
	position:absolute;
	right:30px;
	top: -90px;
	width:155px;
	height:155px;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
}
.introPop p{
	font-size: 24px;
	font-weight: bold;
	line-height:1;
}
.introPop span{
	color:#3E743F;
}
.introPop span{
	font-size:50px;
}
.introPop span small{
	font-size:24px;
}
.introPop sup{
	font-size: 16px;
	vertical-align: super;
}

.introP{
	font-size: 24px;
	font-weight: bold;
	line-height:1.6;
	text-shadow: 00px 3px 10px rgba(0, 0, 0, 0.25);
	margin-bottom:1.5rem;
}

.introPsub{
	font-size: 12px;
	text-shadow: 00px 3px 10px rgba(0, 0, 0, 0.25);
}
.introBtn{
	display:flex;
	margin-top: 4rem;
	gap:4rem;
}

.introBtn .btn {
	background: #FBC02D;
	background: linear-gradient(180deg,rgba(251, 192, 45, 1) 0%, rgba(225, 172, 41, 1) 100%);
	color: #020202;
	border: 2px solid #fff;
	border-radius: 10px;
	font-size: 16px;
	line-height: 60px;
	font-weight: bold;
	width: 275px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	position:relative;
	margin: 0 auto;
}
.introBtn .btn::after {
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position:absolute;
	right: 2rem;
	font-size: 20px;
}
.introBtn .btn:hover {
	opacity: 0.8;
}
.introBtn .btn.green {
background: #CDDC39;
background: linear-gradient(180deg,rgba(205, 220, 57, 1) 0%, rgba(191, 205, 46, 1) 100%);
	color: #020202;
}
.introBtn .btn.green::after {
	content: "\f105";
	font-family: "Font Awesome 5 Free";
}


.introImg{
	position:relative;
	background: url(/hojokin/images/bg_intro_right.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top left;
	/* margin-right: calc(50% - 50vw); */
	width: 40%;
	display:flex;
	align-items:center;
	justify-content: flex-start;
	position:relative;
	padding-top:2rem;
	padding-left: 0.8vw;
	padding-right: 2vw;
}
.introImg::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	background-color: rgba(0,121,107,0.4);
}
.introImg img{
	width:100%;
	max-width: 520px;
	z-index:1;
}






/* 使える */
.useWrap{
}
.useWrap h2 {
	font-size: 44px;
	font-weight: bold;
	color: #00796B;
	text-align:center;
	margin-bottom: 5rem;
	margin-top:2rem;
}
.useBox{
	background: #E9EFEF;
	border-radius: 8rem;
/*	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);	*/
	margin-bottom: 5rem;
	padding: 4rem;
}
.useFlex{
	display: grid;
	gap: 4%;
	grid-template-columns: repeat(3, 1fr);
}


.useItem{
}
.useItem h3{
	font-size: 34px;
	font-weight: bold;
	color: #00796B;
	margin-bottom: 2rem;
}
.useItem ul{
	width:100%;
	margin-bottom: 4rem;
}
.useItem ul li{
	width:100%;
	background:#fff;
	border-radius: 1rem;
	overflow:hidden;
	margin-bottom:2rem;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}


.useItem ul li a{
	border-left: 1.5rem solid #00796B;
	color:#333;
	width:100%;
	padding: 2rem 2rem 2rem 2rem;
	display: flex;
	flex-direction: row-reverse;
	font-size: 18px;
	line-height:1.6;
	font-weight: bold;
	position:relative;
	justify-content: space-between;
	align-items: center;
}
.useItem ul li a:before {
  /* right: 2rem; */
  /* vertical-align: middle; */
  /* height: auto; */
  content: "\f2d0";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  color:#666;
}

.useItem ul li a:hover {
	opacity: 0.8;
}

.useOther{
	text-align:center;
	color:#333;
	font-size: 30px;
	font-weight:bold;
	width:fit-content;
	margin: 2rem auto;
	padding: 0 1rem 0.2em;
 background-image: linear-gradient(0deg, #f2c75e 0.3em, transparent 0.3em);
}




/* 料金 */
.priceWrap{
	background:#EFF7F2;
}
.priceWrap h2 {
	font-size: 44px;
	font-weight: bold;
	color: #00796B;
	text-align:center;
	margin-bottom:5rem;
	margin-top:5rem;
}
.priceWrap h3 {
	background:#00796B;
	color: #fff;
	text-align:center;
	width:100%;
	font-size:34px;
	font-weight:600;
	margin-bottom:8rem;
	line-height:82px;
}

.priceBox{
	position:relative;
	width:100%;
	padding: 5rem;
	background:#fff;
	border:1px solid #00796B;
	margin: 0 auto 8rem;
}

.priceBox .sample{
	position:absolute;
	top: -5rem;
	left: -5rem;
	color: #fff;
	background: #00796B;
	font-weight:bold;
	font-size:40px;
	width: 106px;
	height: 106px;
	display: flex;
	border-radius: 100px;
	/* padding: 1rem; */
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.priceBox .priceFlex{
	display:flex;
	justify-content: center;
	/* align-items: start; */
	gap:2%;
}

.priceBox .priceFlex .priceL{
	width:49%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}
.priceBox .priceFlex .priceL h4{
	font-size:24px;
	font-weight:bold;
	margin-bottom: 3rem;
}
.priceBox .priceFlex .priceL h4 small{
	font-size:18px;
}
.priceBox .priceFlex .priceL img{
	width: 90%;
	max-width: 510px;
}

.priceBox .priceFlex .priceR{
	width:49%;
}
.priceBox .priceFlex .priceR .pricePoint{
	background:rgba(255, 249, 235, 1);
	position:relative;
	padding:3rem;
	margin-bottom: 3rem;
}
.priceBox .priceFlex .priceR .pricePoint .priceOff{
	background:#C30D23;
	color:#fff;
	position:absolute;
	border-radius: 0 20px 20px 0;
	font-size:20px;
	font-weight:bold;
	line-height: 40px;
	padding: 0 20px;
	top: -20px;
	left: -7px;
}

.priceBox .priceFlex .priceR .pricePoint .priceOff:after {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top: 5px solid #8B0918;
}
.priceBox .priceFlex .priceR .pricePoint .priceOff:after {
  left: 0;
  border-right: 5px solid #8B0918;
}

.priceBox .priceFlex .priceR .pricePoint .priceSpecial{
	display:flex;
	justify-content: center;
	align-items: center;
	gap:4rem;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial .normal{
	text-align:center;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial .normal dt{
	color:#333;
	font-size:20px;
	font-weight:500;
	margin:1rem 0 1rem;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial .normal dd{
	color:#000;
	font-size:24px;
	font-weight:500;
	text-decoration:line-through;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial i{
	color:#C30D23;
	font-size:50px;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial .special{
	text-align:center;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial .special dt{
	color:#C30D23;
	font-size:20px;
	font-weight:bold;
	margin-bottom:0.5rem;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial .special dd{
	color:#C30D23;
	font-size:50px;
	font-weight:bold;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial .special dd small{
	font-size:20px;
	color:#C30D23;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial .special dd span{
	color:#333;
	font-size:20px;
	font-weight:500;
}
.priceBox .priceFlex .priceR .priceSet{
	position:relative;
	color:#333;
	margin-bottom:2rem;
}
.priceBox .priceFlex .priceR .priceSet:after{
	background:#00796B;
	content:'';
	width: 1px;
	height:85%;
	position:absolute;
	left: 0.5em;
	top:32px;
}
.priceBox .priceFlex .priceR .priceSet dt{
	font-size:20px;
	font-weight:bold;
	margin-bottom: 1rem;
}
.priceBox .priceFlex .priceR .priceSet dd{
	line-height: 2;
	padding-left: 1.5em;
	font-size:16px;
}
.priceBox .priceFlex .priceR .priceSet + p{
	font-size:16px;
	color:#666;
}

.price .priceA{
	margin-top: -6rem;
	text-align:right;
}





/* 特長 */
.reasonWrap{
	background: url(/hojokin/images/bg_reason.png), rgba(0,121,107,0.3);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top;
	margin: 0 auto;
	padding: 4rem 0;
}

.reasonBox{
	max-width:1140px;
	width:100%;
	margin: 0 auto;
	position:relative;
}



.reasonSub{
	background:#fff;
	color:#000;
	display:flex;
	justify-content:center;
	align-items:center;
	padding: 1.5rem 2rem;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	position:absolute;
	width:fit-content;
	bottom:-12rem;
	z-index:1;
	left:calc(50% - 340px);
	gap: 0.5rem;
}
.reasonSub img{
	max-width: 230px;
	height:100%;
}
.reasonSub p{
	font-weight:bold;
	font-size:3.8rem;
	line-height:1;
}
.reasonSub p span{
	color:#5788E5;
}

.reasonBox h2{
	font-size:44px;
	font-weight:bold;
	color:#fff;
	margin-bottom: 12rem;
	padding-top:5rem;
}
.reasonBox h2 span{
	color:#5788E5;
	font-size:4.4rem;
}

.reason{
	background: #fff;
	border-radius: 8rem;
/*	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);	*/
	margin-bottom: 12rem;
	position: relative;
  }
.reason:last-child{
	margin-bottom: 6rem;
}

.reason .reasonNum{
	position:absolute;
	  font-family: "Jost", sans-serif;
	  font-optical-sizing: auto;
	top:-5rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	font-size:10rem;
	color:#00796B;
	font-weight:bold;
	z-index:1;
}

.reason .reasonVisual{
	padding:60px 80px 40px 80px;
}

.reasonVisual > img{
	flex:1;
	max-width:50%;
}

.reasonVisual h3{
color:#00796B;
font-size:3.4rem;
text-align:center;
}
.reasonVisual h3 span{
font-size:2.8rem;
}

.reasonVisual .reasonF{
	background: #CDDC39;
	padding: 8px 30px;
	text-align: center;
	position: relative;
    margin: 0 auto 2.5rem;
	font-size:20px;
	font-weight:bold;
	color:#00796B;
	width:fit-content;
}
.reasonVisual .reasonF:before{
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 15px solid #CDDC39;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

 .reason h4{
color:#5788E5;
font-size:2.4rem;
margin-bottom:1rem;
}
.reasonTxt{
	padding: 50px 60px 60px 60px;
	background:#E3F1F0;
	border-radius: 0 0 8rem 8rem;
}

.reasonFlex{
	display:flex;
	justify-content: center;
	align-items: center;
	gap:4rem;
}

.reasonTxt p{
	font-size: 16px;
	line-height: 1.6;
}
.reasonImg{
	width:470px;
}
.reasonImg img{
	max-width:100%;
	width: 100%;
}
.reasonR{
	flex:1;
}
.reasonR ul{
	margin: 2rem 0 0 3rem;
	font-weight:bold;
	font-size:16px;
	line-height:1.8;
}
.reasonR ul li{
	position:relative;
}
.reasonR ul li:before{
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position:absolute;
	left: -2.5rem;
	font-size: 16px;
	color:#14AE5C;
}


.reason .openBtn{
	background: #CDDC39;
	background: linear-gradient(180deg,rgba(205, 220, 57, 1) 0%, rgba(191, 205, 46, 1) 100%);
	color: #020202;
	border: 2px solid #fff;
	border-radius: 10px;
	font-size: 16px;
	line-height: 50px;
	font-weight: bold;
	display:block;
	text-align:center;
	max-width: 280px;
	width:100%;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	position:relative;
	margin-top: 3rem;
}
.reason .openBtn:before {
	position:absolute;
	right: 1rem;
	font-size: 18px;
  content: "\f2d0";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  color:#666;
}



/* cashless */


.slider_box {
	margin: 0 0 30px;
}
.swiper-area2{
	position: relative;   /* 矢印の基準点 */
  }
  

.swiper-container2{
	position: relative;   /* 矢印の基準点に必須 */
	overflow: hidden;     /* はみ出したスライドを隠す */
	width: 100%;
  }
  .swiper-container2 .swiper-wrapper2{
	width: 100%;
  }
  
  .swiper-container2 .swiper-button-prev,
  .swiper-container2 .swiper-button-next{
	position:absolute;    /* 本来のデフォルト */
	top:50%;
	transform:translateY(-50%);
  }

.swiper-slide2 {
	width: var(--swiper-slide-size, auto); /* ← Swiper の計算値を優先させる */
	height: auto;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	font-size: 1.6rem;
	text-align: center;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 5px;
	padding: 10px;
}

.swiper-slide2 img {
	width: 130px;
	height: 80px;
	object-fit: contain;
}

.swiper-wrapper2 {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;                 /* Core flexbox implementation */
	transition-property: transform;
	box-sizing: content-box;
  }
  
  .swiper-slide2 {
	flex-shrink: 0;                /* ← 幅固定 */
	width: auto;                   /* Swiper が inline-style で width を上書き */
  }
/* ul を div に替えた場合は不要だが、念のためリセット */
.swiper-container2 ul       { margin:0; padding:0; list-style:none; }

.swiper-container2 .swiper-slide2 {
  text-align:center;
  /* Swiper が inline-style で width を付けるので
     display:block のままで OK */
}

/* 共通設定 ------------------------------------------------ */
.swiper-button-prev2,
.swiper-button-next2{
  position: absolute;
  top: 50%;
  width: 44px; height: 44px;
  margin-top: -22px;      /* 垂直中央 */
  z-index: 10;
  cursor: pointer;
  background: rgba(0,0,0,.4);
  border-radius: 50%;
  transition: background .3s;
}
.swiper-button-prev2:hover,
.swiper-button-next2:hover{
  background: rgba(0,0,0,.6);
}

/* 左右位置 ------------------------------------------------ */
.swiper-button-prev2 { left:  -14px; } /* 44px+20px */
.swiper-button-next2 { right: -14px; }

/* アイコン（Font Awesome を使う場合）-------------------- */
.swiper-button-prev2::before,
.swiper-button-next2::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 18px;
  color:#fff;
  line-height:44px;
  text-align:center;
    display: block;
}
.swiper-button-prev2::before{content: "\f053";} /* < */
.swiper-button-next2::before{content: "\f054";} /* > */

.pconly3{display: block;}
.sponly3{display: none;}





/* Support */
.support_btm {
	text-align: center;
	position: relative
}

.support_btm h2 {
	font-size: 3.5rem;
	font-weight: bold;
	color: #000;
	margin-top:2rem;
}
.support_btm h2 span {
	color: #00796B;
}
.support_btm p {
	font-size: 14px;
	line-height:1.4;
	font-weight:500;
}

.support_layout {
	align-items: flex-start
}

.support_layout img {
	max-width: 140px;
}

.support_layout h3 {
	font-size: 2.4rem;
	font-weight: 500;
	margin-top: 3rem;
	margin-bottom: 3rem;
	color: #00796B;
}

.support_layout span {
	font-size: 1.2rem;
	color: #666;
	display: block
}



.flowWrap{
	padding: 3rem 0;
}
.flowWrap h2{
	font-size: 3.5rem;
	font-weight: bold;
	color: #00796B;
	text-align:center;
	margin-top:2rem;
}

.flowBox{
  display: grid;
  gap: 6%;
  grid-template-columns: repeat(4, 1fr);
  width:100%;
  margin-top:10rem;
}
.flow{
	position:relative;
	position:relative;
	display: flex;
	flex-direction: column;
}
.flow::after{
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent #ddd;
  position: absolute;
  top: 0;
  /* left: 0; */
  right: -23%;
  bottom: 0;
  margin: auto;
}
.flow:nth-of-type(4)::after{
	display:none;
}

.flow dl{
	background:#00796B;
	min-height:200px;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 1rem;
	padding-top: 3rem;
	padding-bottom: 3rem;
	z-index:2;
	position:relative;
}
.flow:nth-of-type(4) dl{
	background:#CDDC39;
}

.flow dl dt{
}
.flow dl dt div{
	background:#fff;
	border-radius: 50%;
	width:90px;
	height:90px;
	display:flex;
	justify-content: center;
	align-items: center;
}
.flow dl dt div i{
	color:#333;
	font-size:42px;
}
.flow:nth-of-type(4) dl dt div i{
	color:#fff;
	font-size:42px;
}

.flow:nth-of-type(4) dl dt div{
	background:#00796B;
}
.flow dl dt img{
	max-width:50px;
	max-height:50px;
	object-fit:contain;
}
.flow dl dd{
	color:#fff;
	font-size:20px;
	line-height:1.6;
	font-weight:600;
	text-align:center;
}
.flow:nth-of-type(4) dl dd{
	color:#00796B;
}
.upPoint{
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  color:#fff;
	background:#00796B;
	border-radius: 50%;
	font-size:1.6rem;
	position:absolute;
	left:calc(50% - 59px);
	top: -50px;
	width:118px;
	height:118px;
	text-align:center;
	display: flex;
	text-align:center;
	flex-direction: column;
	font-size:4rem;
	font-weight:bold;
	line-height:1.6;
}

.flow .flowTxt{
	background:#E3F1F0;
	min-height:200px;
	display:flex;
	justify-content: start;
	align-items: center;
	flex-direction: column;
	gap: 3rem;
	padding: 3rem 1rem;
	text-align:center;
	flex-grow:1;
}
.flow .flowTxt p{
	font-size:15px;
	line-height:1.6;
}
.flow:nth-of-type(4) .flowTxt p{
	font-size:16px;
	line-height:1.4;
	font-weight:bold;
}

.cBtn {
	background: #FBC02D;
	background: linear-gradient(180deg,rgba(251, 192, 45, 1) 0%, rgba(225, 172, 41, 1) 100%);
	color: #020202;
	border: 2px solid #fff;
	border-radius: 10px;
	font-size: 16px;
	line-height: 40px;
	font-weight: bold;
	width: 100%;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	position:relative;
}
.cBtn::after {
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position:absolute;
	right: 2rem;
	font-size: 20px;
}
.cBtn:hover {
	transition:0.3s;
	opacity: 0.3;
	color:#020202;

}


.bg_room {
background:url("/hojokin/images/bg_showroom.png"), rgba(0,121,107, 0.4);
background-size: cover;
background-blend-mode:color-burn;
}
.showroom{
	padding:8rem 0;
}

.showroom h2 {
	font-size: 3.5rem;
	font-weight: bold;
	color: #000;
	text-align:center;
}
.showroom h2 span {
	color: #00796B;
}

.roomUl{
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
  width:100%;
	margin-bottom:6rem;
}
.roomUl li{
}
.roomUl li img{
	object-fit:contain;
	width:100%;
}

.roomMapBox{
	background:#E3F1F0;
	padding: 5rem;
	margin-bottom:6rem;
	border-radius: 8rem;
}

.roomMapBox h3{
	font-size: 2.6rem;
	font-weight: 600;
	margin-top: 2.0rem;
	margin-bottom: 2rem;
	text-align:center;
}

.roomMapBox ul{
	display:flex;
	justify-content: center;
	align-items: start;
	gap: 3rem 4rem;
	flex-wrap:wrap;
}
.roomMapBox ul li{
	width:30.4%;
}
.roomMapBox ul li .googlemap{
	height: 0;
	position: relative;
	overflow: hidden;
	padding-bottom: 64%;
	margin-bottom: 2rem;
}
.roomMapBox ul li .googlemap iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}



.roomMapBox ul li dl{
}
.roomMapBox ul li dl dt{
	font-weight:14px;
	margin-bottom:2rem;
	line-height:1.4;
	font-weight:500;
}
.roomMapBox ul li dl dd{
	font-weight:12px;
	line-height:1.4;
}

.yBtn{
	background: #CDDC39;
	background: linear-gradient(180deg, rgba(205, 220, 57, 1) 0%, rgba(191, 205, 46, 1) 100%);
	color: #020202;
	border: 2px solid #fff;
	border-radius: 10px;
	font-size: 16px;
	line-height: 60px;
	font-weight: bold;
	width: 360px;
	display:block;
	margin: 0 auto;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	position:relative;
	text-align:center;
}
.yBtn::after {
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position:absolute;
	right: 2rem;
	font-size: 20px;
}
.yBtn:hover {
	transition:0.3s;
	opacity: 0.3;
	color:#020202;
}

.title_black_line {
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
	position: relative;
	margin: 0 0 40px;
}

.title_black_line::after {
	content: '';
	position: absolute;
	background: #333;
	bottom: -15px;
	left: calc(50% - 45px);
	width: 90px;
	height: 3px;
	border-radius: 5px;
}
.FAQ-Re { margin:0; padding:0 0 0 0; }
.FAQ-Re-outer { margin:0; padding:64px 0; background:#f3f3f4; }
.FAQ-Re-inner { width:90%; max-width:950px; margin:0 auto; }
.FAQ-Re-inner h2 {
	color:#00796B;
	font-size:44px;
	font-weight:bold;
}

.FAQ-Re-inner h2 + p { margin:0; padding:0 0 32px; text-align:center; }
.FAQ-Re-inner ul { margin:0; padding:0; list-style:none; }
.FAQ-Re-inner li { margin:0; padding:0 0 24px; }
.FAQ-Re-inner dl {  }
.FAQ-Re-inner dt { position:relative; margin:0; padding:0 48px 16px 48px; border-bottom:#E5E5E5 1px solid; line-height:20px; font-weight:bold; cursor:pointer; transition:0.3s; }
.FAQ-Re-inner dt::after { content:'＋'; display:block; position:absolute; top:calc(50% - 8px); right:24px; width:20px; height:20px; margin:0; padding:0; border:#1A68B2 1px solid; border-radius:20px; color:#1A68B2; line-height:20px; font-weight:bold; text-align:center; transform:translate(0,-50%); }
.FAQ-Re-inner dt.active::after { content:'−'; }
.FAQ-Re-inner dt:hover { opacity:0.75; transition:0.3s; }
.FAQ-Re-num { display:block; position:absolute; top:calc(50% - 8px); left:0; width:30px; height:24px; color:#1A68B2; line-height:24px; font-size:20px; font-weight:bold; text-align:center; transform:translate(0,-50%); }
.FAQ-Re-inner dd { position:relative; overflow:hidden; height:0; margin:0; padding:0 0 0 48px; line-height:1.7; font-weight:bold; transition:0.3s; }
.FAQ-Re-inner dd.active { height:auto; padding-top:16px; transition:0.3s; }
.FAQ-Re-a { display:block; position:absolute; top:calc(50% - 3px); left:0; width:30px; height:18px; color:#D9534F; line-height:1; font-size:18px; font-weight:lighter; text-align:center; transform:translate(0,-50%); }




/*メールフォーム*/
.form{
/*	background:#EFF7F2;	*/
	background:#f8f9fa;
	padding:8rem 0 !important;
}

.form_title h2 {
	width: fit-content;
	display: flex;
	align-items: baseline;
	text-align: center;
	line-height: 1.5;
	position: relative;
	margin: 0 auto;
	color:#00796B;
	font-size:44px;
	font-weight:bold;
}

.form_title h2 + p {
	display:block;
	text-align: center;
	line-height: 1.5;
	margin: 0 auto 50px;
	color:#333;
	font-size:20px;
	font-weight:bold;
}

.form_box {
	display: flex;
	flex-flow: column;
	justify-content: center;
	background: #fff;
	border: 1px solid #ccc;
	padding: 40px;
	margin: 0 auto;
}

.form_box h4 {
	text-align: center;
	line-height: 1.5;
	margin: 0 0 10px;
}

.form_box h4+div {
	color: #ff0000;
	text-align: center;
	margin: 0 0 30px;
}

.form_box a {
	color: #296fb2;
	transition: 0.3s;
}

.form_box a:hover {
	opacity: 0.3;
}

.form_box table {
	margin: 0 0 30px;
}

.form_box table tr th,
.form_box table tr td {
	width: auto;
	text-align: left;
	font-weight: normal;
	border: none;
	padding: 20px 0;
}
.form_box table tr th{
	line-height:1.7;
}
.form_box table tr th span {
	color: #fff;
	background: #3A60BA;
	border-radius: 5px;
	padding: 5px;
	margin: 0 5px 0 0;
}

.form_box label {
	line-height: 1.5;
}

.form_box input[type="text"],
.form_box input[type="email"],
.form_box input[type="tel"],
.form_box textarea,
.form_box select {
	width: 100%;
}

.form_box input.short {
	max-width: 200px;
}

.form_box input,
.form_box textarea,
.form_box select {
	background: #f9f9f9;
	border: 1px solid #ececec;
	border-radius: 5px;
	resize: vertical;
	padding: 10px;
}

.form_box>p.front {
	text-align: center;
	margin: 0 0 30px;
}

.form_box>p input {
	width: 100%;
	max-width: 300px;
	display: block;
	color: #005d96;
	font-size: 1.6rem;
	font-weight: bold;
	border: 1px solid #005d96;
	border-radius: 30px;
	cursor: pointer;
	padding: 10px;
	margin: 0 auto;
	transition: 0.3s;
}

.form_box>p input.back {
	color: #fff;
	background: #999;
	border: none;
}

.form_box>p input:hover {
	opacity: 0.3;
}

.form_box .columns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.form_box table.kakunin_table tr th,
.form_box table.kakunin_table tr td {
	border: 1px solid #ccc;
	padding: 20px;
}

.form_box table.kakunin_table tr th {
	display: table-cell;
	font-weight: bold;
	background: #eee;
}

.form_box table.kakunin_table+p {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

.form_header {
	background: #fff;
	padding: 10px 30px;
}

.form_header img {
	width: 100%;
	max-width: 120px;
}

/*メールフォームここまで*/



/* モーダルを開くボタン */
.modal__trigger {
  cursor: pointer;
}

.modal__trigger:nth-child(n + 2) {
  margin-top: 60px;
}

/* モーダル本体 */
.modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.modal__layer {
  height: 100%;
  background: rgba(50, 50, 50, .85);
  cursor: pointer;
}

.modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 40px), 800px);
  height: calc(100% - 100px);
  line-height: unset;
  padding: 20px;
  background: #fff;
}

.modal__inner {
  position: relative;
  overflow-y: auto;
  height: 100%;
  padding: 80px 20px 20px;
}

/* モーダルを閉じるボタン */
.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(50, 50, 50, 1);
  cursor: pointer;
  transition: opacity .6s;
}

.modal__close:hover {
  opacity: .6;
}

.modal__close:before,
.modal__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  content: '';
}

.modal__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* モーダル内のコンテンツ */
.modal__content {
}
.modal__title {
	color:#00796B;
	text-align:center;
	font-size:34px;
	font-weight:bold;
  margin-bottom: 30px;
  line-height:1.6;
}
.modal__text {
  text-align:left;
	font-size:1.4rem;
  line-height:1.6;
}

.modal_flex{
	display:flex;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	margin: 3rem auto 0;
}

.modal__btn {
	background: #FBC02D;
	background: linear-gradient(180deg,rgba(251, 192, 45, 1) 0%, rgba(225, 172, 41, 1) 100%);
	color: #020202;
	border: 2px solid #fff;
	border-radius: 10px;
	font-size: 16px;
	line-height: 60px;
	font-weight: bold;
	display:block;
	text-align:center;
	max-width: 275px;
	width:100%;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	position:relative;
}
.modal__btn::after {
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position:absolute;
	right: 2rem;
	font-size: 20px;
}
.modal__btn:hover {
	transition:0.3s;
	opacity: 0.3;
	color:#020202;

}

.officialBtn {
	background: #666;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 10px;
	font-size: 16px;
	line-height: 60px;
	font-weight: bold;
	display:block;
	text-align:center;
	max-width: 275px;
	width:100%;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	position:relative;
}
.officialBtn::after {
	content: "\f08e";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position:absolute;
	right: 2rem;
	font-size: 20px;
}
.officialBtn:hover {
	transition:0.3s;
	opacity: 0.3;
	color:#fff;

}

.md-overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .7;
  z-index: 9999;
}
 
.md-contents{
	border-radius:4rem;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 40px), 800px);
  max-height: calc(100% - 100px);
  line-height: unset;
  padding: 20px;
  background: #fff;
  overflow-y:auto;
  z-index: 10000;
}
 
 
.md-inner{
  padding: 24px 40px;
  background: #fff;
  height: auto;
}
 
 
 
.md-xmark{
  position: absolute;
  top: 34px;
  right: 20px;
  width: 25px;
  height: 22px;
  z-index: 9999;
  cursor: pointer;
}
 
.md-xmark span {
  height: auto;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
}
 
.md-xmark span:nth-of-type(1) {
  top: 0;
  transform: translateY(10px) rotate(-45deg);
}
 
 
.md-xmark span:nth-of-type(2) {
  bottom: 0;
  transform: translateY(-10px) rotate(45deg);
}
.spOnly_res{
	display:none;
}

.tabOnly_res{
	display:none;
}


@media screen and (max-width: 1024px) {
.intro{
	min-height: unset;
}
.introTxtBox{
	padding: 3rem;
	width:70%;
	justify-content: center;
}

.inner_long{
	padding: 6rem 4rem !important;
}

.useItem ul li a{
	padding: 1.5rem 1rem 1.5rem 1.5rem;
	font-size: 1.8vw;
}
.reasonBox{
	max-width: unset;
	padding: 0 6rem;
}
.fixed-width{
	max-width:unset;
	padding: 0 2rem;
}
.flowWrap{
	padding: 6rem 6rem !important;
}
.roomMapBox{
	margin:0 4rem 6rem;
}
.roomMapBox ul{
	gap: 3rem;
}
.priceBox .priceFlex .priceR .pricePoint{
	padding: 3rem 1rem;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial{
	gap:2rem;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial i{
	font-size: 3vw;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial .special dd{
	font-size: 4vw;
}
}

@media screen and (max-width: 1023px) {
.inner_long{
	padding: 4rem 2rem !important;
}
.introTxtBox{
	padding: 1rem;
	width:64%;
}
.introTxt{
	transform:scale(0.8);
}
.useWrap h2{
	font-size:5vw;
}
.useOther{
	font-size:3.2vw;
}
.reasonBox{
	max-width: unset;
	padding: 0 2rem;
}
.fixed-width{
	max-width:unset;
	padding: 0;
}

.priceBox{
	flex-direction: column;
	width: 96%;
}
.priceBox .sample{
	left: -2rem;
}
.priceBox .priceFlex{
	flex-direction: column;
	width: 100%;
}

.priceBox .priceFlex .priceL,
.priceBox .priceFlex .priceR{
	width: 100%;
}
.priceBox .priceFlex .priceL h4{
	text-align:center;
}
.priceBox .priceFlex .priceL img{
	width: 90%;
	max-width: 420px;
	margin: 0 auto 5rem;
	display: block;
}

.priceBox .priceFlex .priceR .pricePoint .priceSpecial{
	gap:2rem;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial i{
	font-size: 6vw;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial .special dd{
	font-size: 6vw;
}

.priceWrap h2{
	margin-top: 3rem;
	font-size:5vw;
	line-height:1.4;
}
.reasonBox h2{
	padding-top: 3rem;
	margin-bottom:8rem;
	line-height:1.4;
}
.reason{
	margin-bottom: 8rem;
}
.reason .reasonVisual{
	padding: 60px 20px 40px;
}
.reasonImg{
	width: 100%;
	max-width: 50%;
}

.flowBox{
	gap:4%;
}
.flow dl{
	padding: 3rem 1rem;
	min-height:220px;
}
.flow::after{
  border-width: 10px 0 10px 20px;
  right: -16%;
}

.roomMapBox{
	padding: 3rem;
	margin: 0 2rem 5rem;
}
.roomMapBox h3{
	font-size:2rem;
}
.roomMapBox ul{
	gap: 2rem;
}
.showroom{
	padding: 5rem 0;
}

.form_title h2{
	font-size:5vw;
}

.cta .flex{
	width: 96%;
	gap:1%;
}
.cta .flex p{
	font-size:2.4vw;
}
.cta .flex .btn{
	width: 90%;
}
.tabOnly_res{
	display:block;
}

}


@media screen and (max-width: 767px) {
.tabOnly_res{
	display:none;
}
.spOnly_res{
	display:block;
}

.intro{
	flex-direction: column;
}
.introTxtBox{
	padding: 2rem;
	width:100%;
	justify-content: center;
}
.introTxt{
	transform:unset;
}
.introWrap h1 {
	font-size: 9vw;
	margin-bottom: 1rem;
}
.introWrap h1 span {
	font-size: 6vw;
}
.introWrap h2 {
	font-size: 6vw;
}
.introWrap h2 span {
	font-size: 5vw;
}
.introP {
	font-size: 4vw;
}


.introImg{
	width:100%;
	justify-content: center;
	padding: 2rem;
	background-position: center center;
}
.introImg img{
	max-width:70%;
}
.introBtn{
	margin-top:1rem;
	gap:1rem;
}
.introBtn .btn{
	width:100%;
	max-width:50%;
	line-height:1;
	padding: 1.5rem 0;
	font-size: 3.2vw;
	display: flex;
	justify-content: center;
	align-items: center;
}
.introBtn .btn::after{
	right:1rem;
}


.inner_long{
	padding: 3rem 2rem !important;
}

.useWrap h2{
	font-size: 8vw;
	margin-bottom:3rem;
	line-height:1.4;
}

.useBox{
	border-radius: 2rem;
	margin-bottom: 5rem;
	padding: 2rem;
}
.useFlex{
	grid-template-columns: repeat(1, 1fr);
}
.useItem h3{
	font-size: 6vw;
}
.useItem ul{
	margin-bottom: 0rem;
}
.useItem ul li a{
	padding: 1.5rem 1rem 1.5rem 1.5rem;
	font-size: 4vw;
}
.useOther{
	font-size: 5vw;
	margin-top: 8rem;
}
.priceWrap h2{
	margin-top: 2rem;
	margin-bottom:3rem;
	font-size: 7.6vw;
}
.reasonBox h2{
	padding-top: 0;
	margin-bottom:5rem;
	font-size:8vw;
}

.priceWrap h3 {
	font-size: 6vw;
	margin-bottom:6rem;
	line-height: 1.4;
	padding: 2rem 1rem;
}
.priceBox .sample{
	font-size: 24px;
	width: 66px;
	height: 66px;
}
.priceBox{
	padding: 3rem 2rem;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial{
	gap: 1rem;
	flex-direction: column;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial i{
	font-size:9vw;
	transform: rotate(90deg);
}
.priceBox .priceFlex .priceL h4{
	font-size:5vw;
	line-height:1.4;
}
.priceBox .priceFlex .priceR .pricePoint .priceSpecial .special dd{
	font-size: 13vw;
}
.cta h3 {
	font-size: 6vw;
}
.cta h3 span{
	font-size: 4vw;
}
.cta .flex p{
	font-size: 4.2vw;
	height: unset;
}
.cta .flex .btn{
	width: 90%;
	line-height: 1;
	font-size: 5vw;
	padding: 1.5rem 0;
}
.cta .flex .txt figure img{
	margin-right:0.4rem;
	height:90px;
	box-shadow: 5px 5px 1px rgba(255, 255, 255, 0.05);
}

.cta .flex .txt{
	width:96%;
}

.reason{
	border-radius: 2rem;
}
.reason .reasonNum{
	top: -4rem;
	font-size: 8rem;
}
.reasonVisual h3{
font-size:7vw;
line-height:1.4;
}
.reasonVisual h3 span{
font-size:4vw;
}
.reasonVisual .reasonF{
	padding: 8px 20px;
}
.reasonTxt{
	padding: 2rem 2rem 2rem;
	border-radius: 0 0 2rem 2rem;
}
.reason .reasonVisual{
	padding: 50px 10px 20px;
}
.reasonFlex{
	gap: 1rem;
	flex-direction: column;
}
.reasonImg{
	width: 100%;
	max-width: 100%;
}
.reason:last-child{
	margin-bottom: 2rem;
}

.support_btm h2{
font-size:7vw;
line-height:1.4;
margin-top:2rem;
}

.flowWrap h2{
font-size:8vw;
line-height:1.4;
margin-top:2rem;
}
.flowBox{
  grid-template-columns: repeat(1, 1fr);
  gap: 6rem;
  margin-bottom:3rem;
  margin-top: 8rem;
}
.flow::after{
	display:none;
}
.flow dl{
	min-height:unset;
	padding: 2rem 1rem;
}
.flow .flowTxt{
	min-height:unset;
	
}
.showroom{
	padding: 4rem 0;
}
.showroom h2{
font-size:8vw;
line-height:1.4;
margin-top:1rem;
margin-bottom:2rem !important;
}
.roomUl{
margin-bottom:2rem;
}
.roomMapBox{
	padding: 2rem;
	margin-bottom:4rem;
	border-radius: 2rem;
}
.roomMapBox ul{
  gap: 3rem;
}
.roomMapBox ul li{
	width:100%;
}
.roomMapBox h3{
	font-size:6vw;
}

.modal_flex{
	flex-direction: column;
}

.yBtn,
.cBtn,
.modal__btn,
.officialBtn{
	width: 90%;
	line-height: 1.4;
	padding: 1.5rem 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.md-inner{
  padding: 3rem 1rem;
}
.md-xmark{
	top : 20px;
}
.modal__title{
	font-size: 8vw;
}

		.form_title h2 {
			font-size: 2.4rem;
			align-items: flex-end;
			padding-top:2rem;
		}
		.form_title h2 + p{
			margin-bottom: 3rem;
		}
	
		.form_box {
			padding: 20px 20px 40px;
		}
	
		.form_box table {
			max-width: 100%;
		}
	
		.form_box table td {
			font-size: 1.4rem;
		}
	
		.form_box table tr th {
			padding: 20px 0 0;
		}
	
		.form_box input.short {
			max-width: 100%;
		}
		.form_box th,
		.form_box td{
			display:block;
		}
	
		/* form2 */
		.form_box2 {
			padding: 20px 20px 40px;
		}
	
		.form_box2 table {
			max-width: 100%;
		}
	
		.form_box2 table td {
			font-size: 1.4rem;
		}
	
		.form_box2 table tr th {
			padding: 15px 0 5px;
		}
	
		.form_box2 input.short {
			max-width: 100%;
		}
		
		.form_box table tr {
			display: flex;
			flex-flow: column;
		}
	
}