@charset "UTF-8";

/* ////////////////////////////////////////////////////////////////////*/
/* //////////////////////////// BASE STYLE ////////////////////////////*/
/* ////////////////////////////////////////////////////////////////////*/

/*------------------------*/
/*------ Background ------*/
/*------------------------*/
html{
	background-color: #fff;
}
.inner{
	max-width: 1080px;
	margin: 0 auto;
}
.inner880{
	max-width: 880px;
	margin: 0 auto;
}
.inner640{
	max-width: 640px;
	margin: 0 auto;
}
@media screen and (max-width:1100px) {
	.inner{
		width: 90%;
		margin: 0 auto;
	}
	.inner880{
		margin: 0 auto;
	}
}
section{
	padding: 3rem 0 3rem;
	background-color: #fff;
}
.bg01{
	background-color: #f6f6f6;
}
@media screen and (max-width:600px) {
	section{
		padding: 2.5rem 0;
	}
}

/*--------------------*/
/*------ height ------*/
/*--------------------*/

.site-wrapper{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main{
	flex: 1;
	overflow-x: 100vh;
}

/*---------------------*/
/*------ general ------*/
/*---------------------*/

html {
  font-size: 16px;
	box-sizing: border-box;
}
@media screen and (max-width:880px) {
  html {font-size: 16px;}
}
@media screen and (max-width:600px) {
  html {font-size: 14px;}
}
body {
  margin: 0 auto;
  color: #333333;
  line-height: 1.5;
	font-family: arial,Helvetica Neue,Hiragino Kaku Gothic ProN,Hiragino Sans,meiryo,sans-serif;
}
h1 {
	font-size: 3rem;
	font-weight: bold;
}
h2 {
	font-size: 2.5rem;
	font-weight: bold;
}
h3 {
	font-size: 2rem;
	font-weight: bold;
}
h4 {
	font-size: 1.5rem;
	font-weight: bold;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {}
img {
	max-width: 100%;
}
.bold{
	font-weight: bold;
}
.r-text{
	margin: 0 auto 1rem;
	max-width: 640px;
}
.c-text{
	text-align: center;
	margin-bottom: 1rem;
}
.s-text{
	font-size: .85rem;
}
.pcbr{
	display: block;
}
.br960,.br880,.spbr{
	display: none;
}
.flex{
	display: flex;
	justify-content: space-between;
}
.mb2{
	margin-bottom: 2rem;
}
.mr1{
	margin-right: 1rem;
}
.serif{
	font-family: 'Noto Serif JP', serif;
	font-weight: 300;
}
.spbl{
	display: none;
}
.txul{
	text-decoration: underline;
}
@media screen and (max-width:960px) {
	.br960{
		display: block;
	}
}
@media screen and (max-width:880px) {
	.br880{
		display: block;
	}
	.pcbr{
		display: none;
	}
	.spnone{
		display: none;
	}
	.spbl{
		display: block;
	}
	.dpib{
	display: inline-block;
	}
}
@media screen and (max-width:600px) {
	h1 {font-size: 3rem;}
	h2 {font-size: 1.5rem;}
	h3 {font-size: 1.25rem;}
	h4 {font-size: 1.2rem;}
	.spbr{
		display: block;
	}
}
/*-------------------*/
/*------ title ------*/
/*-------------------*/

.sec-title{
	text-align: center;
	margin-bottom: 4rem;
}
.sec-ttl{
	font-family: 'Noto Serif JP', serif;
	font-weight: 300;
}
.hl-ttl{
	text-align: center;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 2.5rem;
}
.hl-ttl span {
  background: linear-gradient(transparent 55%, #cbcbcb 0%);
  padding: 0.25rem 0.5rem;
}
@media screen and (max-width:880px) {
	.sec-title{
		margin-bottom: 2rem;
	}
	.sec-ttl{
		font-size: 2rem;
	}
}

/*--------------------*/
/*------ button ------*/
/*--------------------*/

.btn1 span{
	background-color: #ddccaa;
	color: #333;
	border-radius: 5px;
	box-shadow: 3px 3px 7px 0px #c0c0c0;
}
.btn1 span:hover{
	background-color: #e4d6bb;
}

/*** inview JS ***/
.fadeIn_up {
  opacity: 0;
  transform: translateY(10px);
  transition: 1s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}


/* ////////////////////////////////////////////////////////////////////*/
/* //////////////////////////// MAIN START ////////////////////////////*/
/* ////////////////////////////////////////////////////////////////////*/

/*==============*//*==============*//*==============*//*==============*/
/*=== header ===*//*=== header ===*//*=== header ===*//*=== header ===*/
/*==============*//*==============*//*==============*//*==============*/

header{}
.header{
	padding: .3rem 0 .4rem;
	z-index: 99999;
	background-color: #fff;
	color: #333;
}
.shadow{
	box-shadow: 0px 0px 10px 5px #555;
	position:relative;
}
.header-inner{
	width: 80%;
  max-width: 2000px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.logo{
	width: 250px;
	text-align: center;
}
.header-copy{
	font-size: 0.8rem;
	font-weight: normal;
}
.header-right{
	width: 760px;
	align-items: center;
}
.gnav{
	max-width: 250px;
	width: 100%;
}
.gnav-item a:hover{
	color: #999;
}
/*** voiceなしの時 ***/
.gnav-items{
	width: 80%;
  margin: 0 auto;
}
/*******************/

.header-tel{
	max-width: 240px;
	align-items: center;
	justify-content: flex-start;
}
.header-tel-zenkoku{
	border: #333 1px solid;
	width: 45px;
	height: 45px;
	line-height: 1;
	display: grid;
  place-items: center;
	margin-right: .5rem;
}
.header-tel-fa{
	color: #999;
}
.header-tel-number{
	font-size: 1.5rem;
}
.hd-btn{
	margin-left: 10px;
	margin-top: 3px;
}
.hd-btn span{
	padding: 15px 20px;
	font-size: 1.25rem;
	box-shadow: 2px 2px 10px -5px #999;
}
@media screen and (max-width:1200px) {
	.header-inner{
		width: 90%;
	}
	.header-tel-number,.hd-btn{
		font-size: 1rem;
	}
}
@media screen and (max-width:950px) {
	.gnav{
		max-width: 220px;
	}
}
@media screen and (max-width:880px) {
	.logo{
		width: 180px;
		padding-top: .8rem;
	}
}

/*******************************/
/*** fix body when dr open ***/
html.is-fixed,
html.is-fixed body {
    height: 100%;
    overflow: hidden;
 }
/*** drawer btn before click ***/
.sp-nav{
	display: none;
}
.nav_toggle {
  display: block;
  position: relative;
  width: 30px;
  height: 25px;
	z-index: 999;
}
.nav_toggle i {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #333;
  position: absolute;
  transition: transform .5s, opacity .5s;
}
.nav_toggle i:nth-child(1) {
  top: 0;
}
.nav_toggle i:nth-child(2) {
  top: 0;
  bottom: 0;
  margin: auto;
}
.nav_toggle i:nth-child(3) {
  bottom: 0;
}
/*** drawer btn after click ***/
.nav_toggle.show i:nth-child(1) {
  transform: translateY(10px) rotate(-45deg);
}
.nav_toggle.show i:nth-child(2) {
  opacity: 0;
}
.nav_toggle.show i:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
}
/*** menu before click ***/
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
	background-color: #fff;
  width: 100%;
  z-index: 99;
}
/*** menu after click ***/
.nav.show {
  opacity: 1;
  visibility: visible;
}

/*********************/
/*** sp nav design ***/
.dr-header{
	width: 100%;
	background-color: #fff;
	z-index: 998;
	padding: .3rem 0 .4rem;
}
.dr-header-inner {
  width: 90%;
  margin: 0 auto;
}
.dr-menu-inner{
	padding: 2rem;
}
.logo-wrapper-dr{
	text-align: center;
  font-size: .8rem;
	max-width: 180px;
	padding-top: .8rem;
}
.sp-nav_menu_ul{
	margin-bottom: 4rem;
	font-size: 2rem;
}
.sp-nav_menu_li{
	background-color: #fff;
	color: #333;
	font-size: 2rem; 
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
  border-bottom: 1px solid #333
}
.sp-nav_menu_li a{
	display: block;
	padding: 5px 10px;
}
.sp-nav-btn{
	display: block;
	margin-bottom: 2rem;
	text-align: center;
}
.sp-nav-btn span{
	display: inline-block;
	background-color: #ddccaa;
	width: 100%;
	padding: 20px 10px;
	font-size: 1.5rem;
	font-weight: bold;
	border-radius: 5px;
	box-shadow: 3px 3px 7px 0px #c0c0c0;
}
.sp-nav-btn-tel span{
	font-size: 2rem;
}
@media screen and (max-width:880px){
	.header-right{
		display: none;
	}
	.logo-wrapper{
		margin: 0 auto;
	}
	.sp-nav{
		display: block;
	}
}

/*=============*//*=============*//*=============*//*=============*/
/*===footer ===*//*===footer ===*//*===footer ===*//*===footer ===*/
/*=============*//*=============*//*=============*//*=============*/

footer{}
#footer{
	background-color: #999;
	text-align: center;
	padding: 1rem 0;
}
.footer-privacy{
	color: #fff;
}
.footer-privacy:hover{
	opacity: .8;
}
#copyright{
	color: #fff;
}
/*** PAGETOP BUTTON ***/
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 9px;
  line-height: 1.5;
  z-index: 999999;
}
#page-top a {
  background: #b2997b;
  text-decoration: none;
  color: #fff;
  width: 60px;
  padding: 8px 5px;
  text-align: center;
  display: block;
  opacity: 0.9;
  transition: all .3s ease;
	outline: 1px solid #FFFFFF;
  outline-offset: -4px;
}
#page-top a:hover {
  text-decoration: none;
  opacity: .5;
}
@media screen and (max-width:880px){
	.footer-privacy span{
		text-decoration: underline;
	}
}




/*================*//*================*//*================*//*================*/
/*=== TOP PAGE ===*//*=== TOP PAGE ===*//*=== TOP PAGE ===*//*=== TOP PAGE ===*/
/*================*//*================*//*================*//*================*/

/*------------------------------------------------------
MV
------------------------------------------------------*/
#mv{
	padding: 0;
}
.mv-wrapper{
	position: relative;
}
.mv-text-area{
	position: absolute;
	top: 15%;
  left: 15%;
	z-index: 999;
}
.mv-text{
	color: #fff;
}
.mv-video{
	text-align: center;
}
.mv-video-pc{
	max-width: 3000px;
	width: 100%;
	text-align: center;
}
.mv-video-sp{
	width: 100%;
	text-align: center;
	display: none;
}
.mv-copy1{
	font-size: 1.5rem;
	letter-spacing: 1px;
	margin-bottom: 1rem;
}
.mv-copy2{
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 2rem;
}
.mv-copy3{
	font-size: 1.5rem;
	margin-bottom: 2.5rem;
}

.mv-btn span{
	font-size: 1.5rem;
	padding: 15px 30px;
	box-shadow: 0px 0px 0px 0px #000;
}

@media screen and (max-width:880px){
	.mv-video-pc{
		display: none;
	}
	.mv-video-sp{
		display: block;
	}
	.mv-text-area{
		left: 7%;
	}
	.mv-copy1{
		font-size: 1.25rem;
		letter-spacing: normal;
	}
	.mv-copy2{
		margin-bottom: 1.5rem;
	}
	.mv-copy3{
		font-size: 1rem;
	}
}

/***　scroll animation ***/

.scroll {
  padding-top: 60px;
}
.scroll span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
.scroll span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.scroll-ani{
	position: absolute;
	left: 50%;
  bottom: 16%;
	color: #fff;
}
@media screen and (min-width:1900px){
	.scroll-ani{
		bottom: 20%;
	}
}
@media screen and (max-width:880px){
	.scroll-ani{
		display: none;
	}
}


/*------------------------------------------------------
problem
------------------------------------------------------*/

.problem-wrap{
	align-items: center;
	margin-bottom: 2rem;
	justify-content: space-around;
}
.problem-img{
	width: 200px;
}
.problem-item{
	padding-bottom: 1rem;
}
.problem-item::before{
	font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 900;
  margin-right: 1rem;
	color: #999;
}
.arrow{
	margin-bottom: 2rem;
}
.problem-text{
	text-align: center;
	font-size: 1.5rem;
	padding: 2rem;
}
@media screen and (max-width:880px){
	.problem-wrap{
		flex-direction: column;
		margin-bottom: 1rem;
		margin-top: -1rem;
	}
	.problem-item{
		padding-left: 26px;
		text-indent: -26px;
	}
	.problem-text{
		font-size: 1rem;
	}
}


/*------------------------------------------------------
case
------------------------------------------------------*/

.case-service{
	margin-bottom: 3rem;
}
.service-item{
	width: 250px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 5px 5px 10px 0px #c0c0c0;
	align-items: center;
	justify-content: space-around;
	padding: 0.5rem 0;
}
.service-item-ttl p{
  line-height: 1;
}
.service-icon{
	width: 50px;
}
.service-item-ttl-eg{
	font-weight: bold;
	padding-bottom: 6px;
}
.service-item-down{
	color: #d0d0d0;
	font-size: 2rem;
}
@media screen and (max-width:880px){
	.service-items{
		flex-direction: column;
	}
	.service-item{
		width: 100%;
		margin-bottom: 1rem;
		padding: 1rem;
	}
	.service-icon{
		margin-right: 2rem;
	}
	.service-item-ttl{
		width: 60%;
	}
}

/*==================================================
サムネイル付きスライダー
==================================================*/
/*
.gallery{
	max-width: 400px;
	margin: 0 auto 5px;
}
.gallery img{
	width: 100%;
}
.gallery li{
	list-style:none;
}
*/
/*** arrow ***/
.slick-arrow:before{
	content:""!important;
}
.slick-prev, 
.slick-next {
  position: absolute;
	z-index: 3;
  top: 50%;
  cursor: pointer;
  outline: none;
  border-top: 3px solid #666;
  border-right: 3px solid #666;
  height: 20px;
  width: 20px;
}
#repair .slick-prev, 
#repair .slick-next {
	border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}
.slick-prev {
    left:2.5%;
    transform: rotate(-135deg);
}
.slick-next {
    right:2.5%;
    transform: rotate(45deg);
}
/*** thumbnail　***/
.case-thumb{
	max-width: 400px;
	margin: 0 auto 1rem;
}
.case-thumb li{
	cursor: pointer;
	outline: none;
	list-style:none;
}

.case-thumb li img{
	opacity: 0.7;
	padding: 5px;
}

.case-thumb li.slick-current img{
	opacity: 1;
	border: solid 2px #4D4D4D;
}
.case-thumb span{
	font-size: 9px;
}
.slick-track{
	margin-left: 0;
}

/***caseコンテンツ調整用 ***/
.case-service-content{
	margin-bottom: 3rem;
}
.case-items{
	max-width: 880px;
	margin: 0 auto;
	margin-bottom: 2rem;
	display: flex;
	justify-content: space-between;
}
.case-item{
	margin-bottom: 2rem;
	max-width: 400px;
}
.case-dics{
	width: 100%;
  margin: 0 auto;
}
.case-disk-ttl{
	font-weight: bold;
	margin-bottom: .5rem;
}
@media screen and (max-width:880px) {
	.test1{
		max-width: 880px;
		width: 90%;
		margin: 0 auto;
	}
	.case-items{
		display: block;
	}
	.case-item{
		margin: 0 auto 2.5rem;
	}
}

/**** アコーディオン ****/
.grad-wrap {
  position: relative;
}
.grad-wrap + .grad-wrap {
  margin-top: 40px;
}
.grad-btn {
  z-index: 999;
  position: absolute;
  right: 0;
  bottom: 50px;
  left: 0;
  width: 300px;
  margin: auto;
  padding: .5em 0;
  border-radius: 5px;
  background: #f6f6f6;
	border: solid 1px #333;
  color: #333;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: 3px 3px 7px 0px #c0c0c0;
}
.grad-btn::after {
  content: "▼";
	position: relative;
	right: -60px;
}
.grad-btn:hover {
  background: #333;
	color: #fff;
}
.grad-btn .la {
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 80px;
}
.grad-item p + p {
  margin-top: 1em;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
	height: 80px;
  z-index: 99;
  background-color: #f6f6f6;
}
.grad-trigger {
  display: none;
}
.grad-trigger:checked ~ .grad-btn {
  bottom: -10px;
}
.grad-trigger:checked ~ .grad-btn::after {
  content: "閉じる ▲";
	position: relative;
  left: 0;
}
.grad-trigger:checked ~ .grad-btn .la {
  display: none;
}
.grad-trigger:checked ~ .grad-item {
  height: auto;
}
.grad-trigger:checked ~ .grad-item::before {
  display: none;
}
@media screen and (max-width:640px) {
	.grad-btn{
		bottom: 30px;
	}
	.grad-btn:hover {
  background: #f6f6f6;
	color: #333333;
}
}



/*------------------------------------------------------
cta
------------------------------------------------------*/

.cta{
	background-color: #f7f3eb;
}
.cta-text{
	text-align: center;
	font-size: 1.5rem;
	margin-bottom: 2rem;
}
.cta-contact-wrap{
	width: 60%;
	margin: 0 auto;
	align-items: baseline;
}
.cta-tel-pc{
	font-size: 2rem;
	font-weight: bold;
}
.cta-tel-fa{
	color: #bd9e5e;
}
.cta-tel-btn{
	display: none;
}
.cta-btn,.cta-tel-btn{
	background-color: #ddccaa;
	width: 100%;
	text-align: center;
	border-radius: 5px;
	padding: 1rem;
	box-shadow: 3px 3px 7px 0px #c0c0c0;
	margin-bottom: 2rem;
	font-weight: bold;
}
.cta-btn{
	display: block;
	width: 300px;
}
.cta-btn:hover,.cta-tel-btn:hover{
	background-color: #e4d6bb;
}
.cta-btn span{
	font-size: 1.5rem;
}
@media screen and (max-width:1100px){
	.cta-contact-wrap{
		flex-wrap: wrap;
    justify-content: center;
	}
}
@media screen and (max-width:880px){
	.cta{
		margin-top: -3rem;
	}
	.cta-contact-wrap{
		flex-direction: column;
		width: 100%;
	}
	.cta-btn{
		display: block;
		width: 100%
	}
	.cta-tel-pc{
		display: none;
	}
	.cta-tel-btn{
		display: block;
	}
	.cta-tel-btn span{
		font-size: 1.5rem;
		padding: 0 1rem
	}
}


/*------------------------------------------------------
flow
------------------------------------------------------*/

.flow-wrap{
	flex-wrap: wrap;
}
.flow-item{
	width: 28%;
	margin-bottom: 3rem;
}
.flow-icon{
	margin-bottom: 1rem;
	position: relative;
}
.flow-icon::after{
	content: "▶︎";
  font-size: 2rem;
  right: -20%;
  top: 105px;
  position: absolute;
}
.flow-icon-nt::after{
	content: "";
}
.flow-item-ttl{
	text-align: center;
	margin-bottom: 1rem;
	font-weight: bold;
}
@media screen and (max-width:880px) {
	.flow{
		padding-bottom: 0;
	}
	.flow-wrap{
		flex-direction: column;
	}
	.flow-item{
		width: 80%;
		max-width: 300px;
		margin: 0 auto 5rem;
		position: relative;
	}
	.flow-item::after{
		content: "▼";
		font-size: 1.5rem;
		position: absolute;
		left: 47%;
		bottom: -40px;
	}
	.flow-item:last-child{
		margin-bottom: 1rem;
	}
	.flow-item:last-child::after{
		content: "";
	}
	.flow-icon::after{
		content: "";
	}
}

/*------------------------------------------------------
how to
------------------------------------------------------*/

.howto-disc{
	text-align: center;
	margin-bottom: 2rem;
}
.howto-item{
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 5px 5px 10px 0px #c0c0c0;
	max-width: 640px;
	width: 100%;
	margin: 0 auto 2rem;
}
.howto-flex-wrap{
	justify-content: flex-start;
}
.howto-icon{
	width: 100px;
	margin: 1.5rem;
}
.howto-cnt-wrap{
	max-width: 430px;
	padding: 1.5rem;
}
.howto-cnt-ttl{
	font-size: 1rem;
	margin-bottom: 1rem;
}
.howto-cnt-disc{
	margin-bottom: 1rem;
}
.howto-list{
	margin-bottom: 3rem;
}
.howto-list li::before{
	font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 900;
  margin-right: 1rem;
	color: #999;
}
.howto-video-btn{
	display: block;
	margin-bottom: 3rem;
}
.howto-video-btn span{
	padding: 1.5rem 3.5rem;
	font-size: 1.5rem;
}
.video-flow{
	background-color: #f6f6f6;
	width: 430px;
  border-radius: 15px;
	padding: 1.5rem;
	margin-bottom: 1rem;
}
.video-flow-ttl{
	font-weight: bold;
	margin-bottom: 2rem;
}
.video-flow-icon{
	width: 50px;
	margin-right: 1rem;
	z-index: 99;
}
.video-flow-item{
	justify-content: flex-start;
}
.video-flow-right{
	padding-top: 13px;
	padding-bottom: 3rem;
	padding-left: 3rem;
  border-left: 2px solid #666;
  margin-left: -43px;
}
.video-flow-right-lc{
	border: none;
}
.video-flow-text{
	font-weight: bold;
	margin-bottom: 1rem	
}
.video-flow-disc{
	max-width: 300px;
}
.video-flow-img{
	width: 150px;
}
.howto-form-btn{
	display: block;
  margin: 2rem 0 1rem;
}
.howto-form-btn span{
	padding: 1rem 4rem;
	font-size: 1.5rem;
}
.howto-line-disc{
	margin-bottom: 2rem;
}
.howto-line{
	margin-bottom: 1rem;
}
.howto-line-qr{
	width: 150px;
}
@media screen and (max-width:880px) {
	.howto-disc{
		text-align: left;
	}
	.howto-flex-wrap{
		flex-direction: column;
	}
	.howto-item{
		border-radius: 5px;
	}
	.howto-icon{
		margin: 1rem auto 0;
	}
	.howto-cnt-ttl{
		text-align: center;
	}
	.howto-cnt-disc{
		width: 90%;
	}
	.howto-video-btn span,.howto-form-btn span{
		font-size: 1.25rem;
		font-weight: bold;
		display: block;
    text-align: center;
    width: 100%;
	}
	.howto-cnt-wrap{
		margin: 0 auto;
		width: 100%;
	}
	.video-flow{
		max-width: 430px;
    width: 100%;
		border-radius: 5px;
	}
	.video-flow-right-ad{
		width: 267px;
	}
	.howto-line-qr{
		margin: 0 auto;
	}
	.howto-line-id{
		text-decoration: underline;
	}
}


/*------------------------------------------------------
price
------------------------------------------------------*/

.price-items{
	flex-wrap: wrap;
}
.price-item{
	width: 280px;
	margin-bottom: 3rem;
	background-color: #fff;
	align-self: flex-start;
	border-radius: 5px 5px 0 0;
}
.price-item-head{
	background-color: #404040;
	color: #fff;
	font-weight: bold;
	padding: 1rem;
	position: relative;
	font-size: 1.75rem;
  line-height: 1.1;
	align-items: center;
	border-radius: 5px 5px 0 0;
}
.price-item-head::after{
	content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -20px;
  left: 0;
  border-style: solid;
  border-color: #404040 transparent transparent transparent;
  border-width: 20px 140px 0 140px;
  z-index: 1;
}
.price-item-icon{
	width: 70px;
}
.price-list{
	padding-top: 20px;
}
.price-list li{
	padding: 5px 1rem;
}
.price-list li:nth-child(even){
  background-color: #dbdbdb;
}
.price-list-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 50px;
}
.price-list-item dt{
	width: 60%;
}
@media screen and (max-width:950px){
	.price-items{
		justify-content: space-around;
	}
}
@media screen and (max-width:880px){
	.price-item{
		margin: 0 auto 2rem;
	}
}
@media screen and (max-width:640px){
	.price-item{
		width: 340px;
	}
	.price-item-head::after{
		border-width: 20px 170px 0 170px;
	}
}


/*------------------------------------------------------
contact
------------------------------------------------------*/

.mail-container{
	margin-bottom: 2rem;
}
.contact-text{
	text-align: center;
	margin-bottom: 3rem;
}
.mail-item{
	display: flex;
	flex-direction: column;
	margin-bottom: 1rem;
}
.mail-item label:after{
	content: "必須";
	background-color: #999;
	color: #fff;
	font-size: .8rem;
	padding: 2px 4px;
	margin-left: 1rem;
	border-radius: 3px;
}
.mail-item label{}
.text-field{
	border: solid 1px #b7bac0;
	padding: 5px 10px;
	border-radius: 4px;
}
.form-comment{
	resize: vertical;
	height: 8rem;
}
.mail-submit{
	text-align: center;
}
input[type="submit"] {
  font-size: 1.5rem;
  padding: 1rem 4rem;
	background-color: #ddccaa;
	margin: 0 auto;
	border-radius: 5px;
	box-shadow: 3px 3px 7px 0px #c0c0c0;
	font-weight: bold;
}
input[type="submit"]:hover{
	background-color: #e4d6bb;
}
.g-recaptcha{
	margin: 0 auto 2rem;
  width: 320px;
}
@media screen and (max-width:880px) {
	.contact-text{
		margin-bottom: 1rem;
	}
	input[type="submit"] {
		width: 100%;
		margin-bottom: 2rem;
	}
	.mail-item label{
		margin-bottom: 0.25rem;
	}
}


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

.about-item-fc{
	border-top: solid 1px #333;
}
.about-item{
	display: flex;
	align-items: center;
	border-bottom: solid 1px #333;
	padding: 1rem 2rem;
}
.about-item dt{
	width: 25%;
}
.about-item dd{
	width: 75%;
}
.t-link{
	text-decoration: underline;
}
.t-link:hover{
	opacity: .8;
}
@media screen and (max-width:880px){
	.about-item{
		flex-direction: column;
		align-items: flex-start;
	}
	.about-item dt,.about-item dd{
		width: 100%;
	}
	.about-item a{
		text-decoration: underline;
	}
}


/*************//*************//*************//*************/
/*** UNDER ***//*** UNDER ***//*** UNDER ***//*** UNDER ***/
/*************//*************//*************//*************/


/*/// heading ///*/
.page-heading{
	text-align: center;
	padding: 2rem 0;
	font-size: 2rem;
	background-color: #f6f6f6;
}
.u-shadow{
	box-shadow: 0px 1px 5px 0px #999;
	position:relative;
}

/*/// bread crumb ///*/
.breadcrumb {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
	font-size: .8rem;
}
.breadcrumb li {
  display: inline;
  list-style: none;
}
.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #555;
}
.breadcrumb li:last-child:after {
  content: '';
}
.breadcrumb li a {
  text-decoration: underline;
}
.breadcrumb li a:hover {
  text-decoration: underline;
}

/**** thanks page ****/
#thankspage{
	background-color: #dbdbdb;
}
.under2-bg{
	background-color: #f3f3f4;
}
.under2-inner {
  padding: 2rem 7rem;
  margin: 2rem auto;
  border-radius: 15px;
}
.under2-cont{
	margin-bottom: 2rem;
}
.under2-cont-text{
	margin-bottom: 1rem;
}
.privacy-date{
	text-align: right;
}
.thanks-link-top span{
	text-align: center;
  display: block;
  width: 300px;
  padding: 1rem;
  margin: 0 auto;
	background-color: #ddccaa;
	border-radius: 5px;
	font-size: 1.5rem;
}
.thanks-link-top span:hover{
	background-color: #e4d6bb;
}
.thanks-link-top ::after{
	content: '▶︎';
	position: relative;
  right: -80px;
}
@media screen and (max-width:880px) {
	.under2-inner{
		width: 90%;
		padding: 2rem 1rem;
	}
	.under2-cont{
		margin-bottom: 3rem;
	}
	.under2-cont:last-child{
		margin-bottom: 0;
	}
}
/*/// mapstar ///*/
#mrBox04-layout{
height: 500px;
overflow: scroll;}
#mrBox04-layout::-webkit-scrollbar {
  width: 10px;
  height: 0px;
}
#mrBox04-layout::-webkit-scrollbar-track {
  background: #fff;
}
#mrBox04-layout::-webkit-scrollbar-thumb {
  background: #ddccaa;
}
.mrcominfo{
	display: none;
}
.mapreview-wrapper > .mr-box04{
	background-color: #f6f6f6;
}
.mr-box04 > .review-card{
	border-radius: 10px;
}
.review-card .mrnotice{
	display: none;
}