@charset "utf-8";
/* CSS Document */
/* ---------------------------------------------------------
information
----------------------------------------------------------*/
#information{
	font-size: 0.9em;
	font-weight: bold;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background: url("../img/common/BG_main_blue.jpg");
	background-size: 100%;
	background-position: left 0 bottom 20%;
	padding: 0.5em;
}
#information .infoIco{
	text-align: center;
	border-radius: 5px;
	padding: 0.3em;
	margin-right: 0.6em;
	font-weight: bold;
	font-size: 0.9em;
	line-height: 1;
	width: 4.5em;
}
#information .infoIco.important{
	background: #ffe725;
	color: #3A3A3A;
}
#information .infoBody{
	color: #fff;
}

@media screen and (max-width: 500px) {
	#information{
		font-size: 3.4vw;
	}
}
/* ---------------------------------------------------------
mainVisual
----------------------------------------------------------*/
#mainVisual{
	width: 100%;
	position: relative;
	aspect-ratio: 500 / 430;
}
#mainVisual img{
	display: block;
	width: 100%;
}
#mainVisual .topPRarea{
	display: block;
	width: 100%;
	position: absolute;
	bottom: 0;
}
/* ---------------------------------------------------------
about
----------------------------------------------------------*/
#about{
	background: #FFFFFF;
}
#about .sectionInner{
	padding-bottom: 1em;
}
#about p.lead{
	font-weight: 400;
}
#about .leadLogo{
	width: 60%;
	margin: auto;
	position: relative;
	margin-bottom: 20px;
	text-align: center;
}
#about .leadLogo .sub{
	display: inline-block;
	background: #0061D0;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 0.90em;
	text-align: center;
	border-radius: 80px;
	line-height: 1;
	padding: 0.4em 1em;
	margin-bottom: 0.4em;
}
#about .leadLogo img.logo{
	width: 100%;
}
#about .leadLogo img.illust_left,
#about .leadLogo img.illust_right{
	position: absolute;
	width: 30%;
}
#about .leadLogo img.illust_left{
	left: -35%;
	bottom: 0;
}
#about .leadLogo img.illust_right{
	right: -35%;
	bottom: 0;
}
/* topNavi */
ul#topNavi{
	display: block !important;
	margin: 20px auto 0;
	font-size: 0.9em;
	font-weight: bold;
}
#topNavi li{
	box-sizing: border-box;
	margin-bottom: 6px;
	float: left;
	height: 50px;
	text-align: center;
}
#topNavi li:nth-child(1),#topNavi li:nth-child(4){
	width: calc(100% / 3 - 4px);
	margin-right: 6px;
}
#topNavi li:nth-child(2),#topNavi li:nth-child(5){
	width: calc(100% / 3 - 4px);
	margin-right: 6px;
}
#topNavi li:nth-child(3),#topNavi li:nth-child(6){
	width: calc(100% / 3 - 4px);
}
#topNavi li a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url("../img/common/BG_main_blue.jpg")no-repeat;
	background-size: 100%;
	background-position: left 0 bottom 20%;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #fff;
	border-radius: 10px;
}
#topNavi li a:hover{
	opacity: 0.8;
}
@media screen and (max-width: 500px) {
	#about .leadLogo .sub{
		font-size: 3vw;
	}
	ul#topNavi{
		font-size: 3.2vw;
	}
}
/* ---------------------------------------------------------
service
----------------------------------------------------------*/
.wide3images{
	width: 80%;
	display: flex;
	margin: 0 auto 20px;
}
.wide3images img{
	width: calc(100% / 3 - 6px);
	margin-right: 9px;
	display: block;
}
.wide3images img:last-child {
	margin-right: 0;
}
.textBox{
	box-sizing: border-box;
	border-radius: 20px;
	background: #fff;
	padding: 1em;
	margin-bottom: 10px;
}
img.woman_01{
	display: block;
	width: 80%;
	margin: auto;
}
.customer{
	width: 100%;
	margin-bottom: 30px;
}
.customer.right{
	text-align: right;
}
.customer > img{
	display: inline-block;
	width: 85%;
	margin-bottom: 10px;
}
.customer .customer_price{
	display: block;
	width: 100%;
}

/* ---------------------------------------------------------
kinds
----------------------------------------------------------*/
#kinds{
	width: 100%;
}
#kinds .imgBox{
	display: flex;
	margin: 1em 0 1.5em 0;
}
#kinds .imgBox > div{
	width: 45%;
	margin: 0 2.5%;
	position: relative;
}
#kinds .imgBox > div .circle{
	border-radius: 50%;
	background: url("../img/common/BG_main_blue.jpg")no-repeat;
	background-size: cover;
	color: #fff;
	text-align: center;
	width: 60px;
	height: 60px;
	line-height: 60px;
	position: absolute;
	top: -15px;
	left: -15px;
	font-size: 1.5em;
	font-weight: bold;
}
#kinds .imgBox > div img{
	width: 100%;
	border-radius: 15px;
}
#kinds .imgBox > div .caption{
	text-align: center;
	padding-top: 0.4em;
	line-height: 1.2;
	font-size: 0.9em;
	font-weight: bold;
}
#kinds .imgBox > div .caption span{
	font-size: 0.8em;
	color: #787878;
}
#kinds .textBox{
	margin-bottom: 2em;
}
#kinds .price_other {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2em;
}
#kinds .price_other > div {
	background: #fff;
	width: 49%;
	margin: 0 2% 0.5em 0;
	font-weight: bold;
	border-radius: 10px;
	color: #848484;
	text-align: center;
	line-height: 1.2;
	font-size: 0.9em;
	box-sizing: border-box;
}
#kinds .price_other > div:nth-child(even){
	margin-right: 0;
}
#kinds .price_other > div .upper {
	height: 5.6em;
	width: 100%;
	padding: 0.5em 1em;
	border-radius: 10px 10px 0 0;
	display:table;
	text-align:center;
	box-sizing: border-box;
	background: url("../img/common/BG_main_blue.jpg")no-repeat;
	background-size: cover;
	color: #fff;
}
#kinds .price_other > div .upper div{
	display:table-cell;
	vertical-align:middle;
	width: 100%;
}
#kinds .price_other > div .lower{
	height: 5.6em;
	padding: 10px;
	width: 100%;
	display:table;
	text-align:center;
	box-sizing: border-box;
}
#kinds .price_other > div .lower div{
	display:table-cell;
	vertical-align:middle;
	width: 100%;
}
#kinds .price_other > div .upper span,
#kinds .price_other > div .lower span{
	font-size: 0.8em;
	font-weight: normal;
}
#kinds .price_other > div span.zero{
	font-size: 4em;
	padding-left: 0.3em;
}
#kinds .price_other > div span.zero::after{
	content: "円";
	font-size: 0.3em;
}

/* ---------------------------------------------------------
flow
----------------------------------------------------------*/
.flowWrap{
	width: 100%;
	margin-bottom: 2em;
}
.flowWrap .flowBox{
	width: 100%;
	position: relative;
}
.flowWrap .flowBox .flowInner{
	width: 100%;
	box-sizing: border-box;
	padding-top: 20px;
	padding-left: 20px;
}
.flowWrap .flowBox:nth-child(even) .flowInner{
	padding-left: 0;
	padding-right: 20px;
}
.flowWrap .flowBox .flowInner img{
	display: block;
	width: 100%;
	border-radius: 20px 20px 0 0 ;
}
.flowWrap .flowBox .flowInner p{
	background: #FFFFFF;
	box-sizing: border-box;
	padding: 1em;
	font-size: 0.9em;
	font-weight: normal;
	border-radius: 0 0 20px 20px;
}
.flowWrap .flowBox .ico_flow{
	width: 26%;
	position: absolute;
	top: 0;
	left: 0;
}
.flowWrap .flowBox:nth-child(even) .ico_flow{
	left: inherit;
	right: 0;
}
.flowWrap .arrowNext{
	display: block;
	width: 10%;
	margin: 10px auto -10px;
}
#flow .contactArea{
	margin-top: 1em;
}

/* ---------------------------------------------------------
area
----------------------------------------------------------*/
#area .areaAnchor{
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	margin: auto;
	margin-bottom: 1em;
	width: 100%;
}
#area .areaAnchor .BTN_text{
	display: block;
	font-size: 1.4em;
	font-weight: bold;
	width: 20%;
	margin: 0 1% 0.5em 1%;
	line-height: 1;
}
#area .areaAnchor.small .BTN_text:last-child{
	margin-right: 0;
}
#area .areaAnchor .BTN_text a,
#area .areaAnchor .BTN_text span.pre{
	display: block;
	text-align: center;
	box-sizing: border-box;
	width: 100%;
	padding: 0.6em 0;
	color: #FFFFFF;
	background: url("../img/common/BG_main_blue.jpg")no-repeat;
	background-size: cover;
	cursor: pointer;
}
#area .areaAnchor .BTN_text span.pre{
	background: #8C8C8C;
	cursor: default;
}
#area .areaAnchor .BTN_text span.pre:hover{
	opacity: inherit;
}

#area .areaMap{
	display: block;
	width: 70%;
	margin: 0 auto 20px auto;
}

#area .areaDetail{
	background: #FFFFFF;
	border-radius: 15px;
	padding: 1.5em;
	margin-bottom: 1.5em;
}
#area .areaDetail h3{
	margin-left: 6px;
    padding-left: 6px;
    margin-bottom: 0.4em;
	position: relative;
	font-size: 1.1em;
	font-weight: bold;
}
#area .areaDetail h3 a{
	color: #0061D0;
}
#area .areaDetail h3::before {
    position: absolute;
    width: 0.5em;
    left: -0.5em;
    height: 100%;
    content: '';
    border-radius: 10px;
    background: url("../img/common/BG_main_blue.jpg")no-repeat;
	background-size: cover;
}
#area .areaDetail p{
	margin-bottom: 1em;
}
#area .areaDetail p a{
	display: inline-block;
	margin-right: 0.8em;
	line-height: 1.8;
	color: #0061D0;
}
#area .areaDetail p a:last-child{
	margin-right: 0;
}
@media screen and (max-width: 500px) {
	#area .areaAnchor .BTN_text{
		font-size: 1.2em;
	}
}

/* ---------------------------------------------------------
faq
----------------------------------------------------------*/
#faq{
	/*background: #CFEBFF;*/
}
#faq h1{
	margin-bottom: 0;
}
.acd-check{
    display: none;
}
.acd-label{
    background: #FFFFFF;
    border-bottom: 1px solid #f3f3f3;
	display: block;
    position: relative;
	font-weight: bold;
	cursor: pointer;
	padding: 1em 3em 1em 1em;
}
.acd-label:after{
	font-family: "Font Awesome 5 Free";
	content:'\f0d7';
	color: #6E6E6E;
	font-size: 1.2em;
	display: block;
	position: absolute;
	right: 1em;
	top: 1em;
}
.acd-check:checked + .acd-label:after{
	font-family: "Font Awesome 5 Free";
	content:'\f0d8';
	color: #6E6E6E;
	font-size: 1.2em;
	display: block;
	position: absolute;
	right: 1em;
	top: 1em;
}
.acd-content{
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 1em;
    transition: .2s;
    visibility: hidden;
	border-bottom: 1px solid #f3f3f3;
	background: #E6F4FF;
}
.acd-content a{
	color: #FF3366 !important;
}
.acd-content p.answer1{
	color: #0061D0;
	margin-bottom: 0.1em;
	font-weight: bold;
}
.acd-content p.answer2{
	margin: 0;
}
.acd-check:checked + .acd-label:after{
	font-family: "Font Awesome 5 Free";
	content:'\f0d8';
	color: #6E6E6E;
	font-size: 1.2em;
	display: block;
	position: absolute;
	right: 1em;
	top: 1em;
}
.acd-check:checked + .acd-label + .acd-content{
    height: inherit;
    opacity: 1;
    padding: 0.8em 1em;
	visibility: visible;
}

/* ---------------------------------------------------------
company
----------------------------------------------------------*/
#company{
	background: #FFF7E2;
}
#company .companyLogo{
	display: block;
	width: 100%;
	margin: auto;
}
#company .lead{
	width: 90%;
	margin: 1em auto 2em;
}
#company .lead h2{
	font-size: 1.1em;
	color: #00602E;
	font-weight: bold;
	margin-bottom: 1em;
}
#company .lead p{
	font-size: 0.9em;
	line-height: 1.6;
	color: #1B1B1B;
	margin-bottom: 1.5em;
}
#company .lead .presidentName{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
#company .lead .presidentName span:first-child{
	text-align: right;
	width: 14em;
	margin-right: 0.8em;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.2;
}
#company .lead .presidentName span:last-child{
	display: block;
	width: calc(62% - 7.5em);
}
#company .lead .presidentName span:last-child img{
	width: 100%;
}
#company h2.sideborder.num4{
	color: #00602E;
}
#company h2.sideborder:before, #company h2.sideborder:after {
	background: #00602E;
}
/* companyInfo */
#companyInfo{
	margin: 0 0 2em 0;
	padding: 0;
}
#companyInfo dl{
	text-align: left;
	width: 100%;
	margin: 0 auto !important;
	margin-top: 1.5em;
	background: #fff;
	font-size: 0.9em;
	padding: 1em 1em 0 1em;
	box-sizing: border-box;
	border-radius: 15px;
}
#companyInfo dt,
#companyInfo dd{
	padding-bottom: 1em;
	margin-bottom: 1em;
	box-sizing:border-box;
}
#companyInfo dt {
	float: left ;
	clear: left ;
	width: 6em;
	padding-left: 0.5em;
	border-bottom: 1px solid #E5E5E5;
}
#companyInfo dd {
	float: left;
	width: calc(100% - 6em);
	padding-left: 2em;
	border-bottom: 1px solid #E5E5E5;
}
#companyInfo dt.last,
#companyInfo dd.last{
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}
#companyInfo dt span{
	display: inline-block;
	width: 100%;
	text-align-last: justify;
	text-justify: inter-ideograph;
}
#companyInfo dd span{
	display: block;
}
#companyInfo dl a{
	margin-left: 1em;
}
#companyInfo .row2{
	height: 4em;
}
#companyInfo .row3{
	height: 5.4em;
}