@charset "utf-8";

/*------------------------------------------------------------------
/
/	STYLE:PC
/
/-----------------------------------------------------------------*/
html {}
body {
	margin: 0 auto;
	font-size:100%;
	color: #333;
	line-height: 1.6;
	background:#fff;
}
a {
	color: #777;
	text-decoration: none;
}
a:hover {}
a:visited {}
a:hover {}

/* common
-------------------------------------------------------*/
.sp {display: none;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.text-left{text-align:left;}

.area{width:100%;}
.area-in{
	width:980px;/* 任意の幅 */
	margin: 0 auto;
}

* header:after, * footer:after, * main, * section:after, * article:after, * div:after, * ul:after, * ol:after, * dl:after{
	content: "";
	clear: both;
	display: block;
}

/* header
-------------------------------------------------------*/
#header{}
#header .in{
	width:980px;
	margin: 0 auto;
	padding:10px 0;
}
#header .in h1{
	font-size:12px;
}
#header .branding{}
#header .branding .logo{
	float:left;
}
#header .branding .contact{
	float:right;
}
#header .branding .contact li{
	float:left;
}
.btn-tel {
	padding: 2px 0 2px 44px;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
	background-image: url(../images/icon_tel.png?0);
	background-repeat: no-repeat;
	background-position: left 2px;
}

/* footer
-------------------------------------------------------*/
#footer{
	border-top:3px solid #0AA7DA;
	padding:30px 0 0 0;
}
#footer .copy{
	color:#fff;
	background:url(../images/bg01.jpg) repeat;
	padding:10px 0;
	text-align:center;
	font-size:10px;
}
#footer ul{
	text-align:center;
}
#footer ul li{
	display:inline-block;
	vertical-align: middle;
}
#footer p{
	font-size:14px;
	text-align:center;
	padding:10px 0 30px 0;
}
#footer .logo{
	padding-bottom:0;
}
.btn-tel2 {
	margin-left: 0;
	padding: 2px 0 0 44px !important;
	font-size: 28px !important;
	font-weight: bold;
	line-height: 1;
	text-align: left !important;
	background-image: url(../images/icon_tel.png?0);
	background-repeat: no-repeat;
	background-position: left 2px;

}

/* visual
-------------------------------------------------------*/
#visual{
	text-align:center;
	background:url(../images/visual_bg.png) repeat-x left bottom #f7f7f7;
}

/*=======================================================
	以下コンテンツのセクションごと
=======================================================*/

/* #area common
-------------------------------------------------------*/
.bg01{
	background:url(../images/bg01.jpg) repeat;
}
.area-contact{
	position:relative;
	margin:0 auto;
	padding:40px 0;
	text-align:center;
}
.area-contact.bar01{
	border-top:3px solid #00A3D9;
}
.area-contact ul{}
.area-contact ul li{
	display:inline-block;
	vertical-align:middle;
}
.aside01{}
.title01{
	background:url(../images/bg01.jpg) repeat;
	text-align:center;
	position:relative;
	margin-bottom:50px;
}
.title01:before{
	content:'';
	position:absolute;
	background:url(../images/arrow01.png) no-repeat center bottom;
	width:78px;
	height:18px;
	bottom:-18px;
	left:0;
	right:0;
	margin:0 auto;
}
.title02{
	border-bottom:3px solid #00A3D9;
	text-align:center;
	margin-bottom:40px;
}
.btn-tel3 {
	padding: 2px 0 2px 60px;
	font-size: 38px;
	font-weight: bold;
	line-height: 1;
	background-image: url(../images/icon_tel2.png?0);
	background-repeat: no-repeat;
	background-position: left 2px;
	text-align: left;
}

/* #area01
-------------------------------------------------------*/
#area01 ul{
	padding:20px 0;
	text-align:center;
}
#area01 ul li{
	display:inline-block;
	vertical-align:middle;
}

/* #area02
-------------------------------------------------------*/
#area02{}
#area02 article{
	margin-bottom:50px;
}
#area02 .box{
	background:#F5F7DD;
	padding:50px 50px 50px 200px;
	box-sizing:border-box;
	position:relative;
}
#area02 .box:before{
	content:'';
	position:absolute;
	background:url(../images/area02_img02.png) no-repeat left bottom;
	width:139px;
	height:179px;
	left:0;
	bottom:0;
}
#area02 .box p{
	font-size:23px;
	line-height:1.58;
}

/* #area03
-------------------------------------------------------*/
#area03{
	background:#f7f7ee;
}
#area03 article{
	padding:60px 0;
	border-bottom:1px solid #00A3D9;
}
#area03 article:first-of-type{
	padding-top:0;
}
#area03 dl{}
#area03 dl dt{
	float:left;
}
#area03 dl dd{
	float:right;
	width:760px;
}
#area03 dl dd h4{
	margin-bottom:20px;
}
#area03 dl dd p{
	font-size:16px;
}

/* #area04
-------------------------------------------------------*/
#area04 article{
	padding:0 0 60px 0;
}

/* #area05
-------------------------------------------------------*/
#area05 article{
	padding:0 0 80px 0;
}
#area05 ul li{
	float:left;
	width:300px;
	padding:20px;
	box-sizing:border-box;
	border:1px solid #0AA7DA;
	margin-right:40px;
}
#area05 ul li:last-of-type{
	margin-right:0;
}
#area05 ul li .text{
	background:#F7F7EE;
	padding:10px;
	box-sizing:border-box;
	border-radius:5px;
}
#area05 .box{
	background:#F5F7DD;
	padding:20px 20px 20px 200px;
	box-sizing:border-box;
	position:relative;
}
#area05 .box:before{
	content:'';
	position:absolute;
	background:url(../images/area05_img04.png) no-repeat left bottom;
	width:151px;
	height:181px;
	left:0;
	bottom:0;
}
#area05 .box p{
	font-size:23px;
}
#area05 .notes {
    margin: 0;
    padding: 35px 0 0;
}
#area05 .notes ul {}
#area05 .notes ul li{
    position: relative;
	width:100%;
    font-size: 14px;
	padding: 2px 2px 2px 28px;
	box-sizing:border-box;
	border:none;
	margin: 0 0 6px;
}
#area05 .notes ul li::before{
    content: "";
    position: absolute;
    top: 9px;
    left: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #bfbfbf;
}


/* #area06
-------------------------------------------------------*/
#area06 article{
	padding-bottom:60px;
}
#area06 dl{
	border:1px solid #D6D6D6;
	border-bottom:5px solid #eee;
	padding:20px;
	box-sizing:border-box;
	border-radius:5px;
	margin-bottom:30px;
}
#area06 dl dt,
#area06 dl dd{
	display:table-cell;
	vertical-align:top;
}
#area06 dl dt{
	padding-right:20px;
}
#area06 dl dd h4{
	color:#00A3D9;
	border-bottom:1px solid #00A3D9;
	font-size:23px;
	margin-bottom:20px;
	padding-bottom:10px;
}
#area06 dl dd h4 span{
	font-size:16px;
}

/* #area07
-------------------------------------------------------*/
#area07 ol li{
	list-style:none;
	padding-bottom:60px;
	position:relative;
	background:url(../images/area07_arrow01.png) no-repeat center 80%;
}
#area07 ol li:last-of-type{
	background:none;
}

/* #area08
-------------------------------------------------------*/
#area08{
	background:url(../images/area08_bg.jpg) no-repeat center center;
	background-size:cover;
	padding:90px 0;
}
#area08 .box{
	padding:20px;
	background:#fff;
	box-sizing:border-box;
	border-radius:5px;
	margin-bottom:20px;
}
#area08 .box dl dt,
#area08 .box dl dd{
	padding:0 0 10px 50px;
}
#area08 .box dl dt{
	color:#3F1F00;
	background:url(../images/area08_q.png) no-repeat left top;
	font-size:23px;
	border-bottom:1px solid #DDC5A9;
	margin-bottom:10px;
}
#area08 .box dl dd{
	background:url(../images/area08_a.png) no-repeat left top;
}

/* #contact/#area09
-------------------------------------------------------*/
#contact{
	padding:0 0 70px 0;
}
#contact .contact-form{}
#contact .contact-form.sent{
	margin-bottom:150px;
}
#contact .contact-form .in{
	border:1px solid #D6D6D6;
	width:100%;
}
#contact .contact-form .in dl{
	display:table;
	width:100%;
}
#contact .contact-form .in dl dt,
#contact .contact-form .in dl dd{
	display:table-cell;
	vertical-align:middle;
	padding:10px;
	box-sizing:border-box;
}
#contact .contact-form .in dl dt{
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );

	border-bottom:1px solid #D6D6D6;
	border-right:1px solid #D6D6D6;
	color:#3F1F00;
	font-size:16px;
	position:relative;
}
#contact .contact-form .in dl dt:before{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:10px;
	margin:auto 0;
	width:50px;
	height:22px;
}
#contact .contact-form .in dl dt.hissu:before{
	background:url(../images/hissu.png) no-repeat right center;
}
#contact .contact-form .in dl dt.nini:before{
	background:url(../images/nini.png) no-repeat right center;
}
#contact .contact-form .in dl:last-of-type dt{
	border-bottom:none;
}
#contact .contact-form .in dl dd{
	width:760px;
	border-bottom:1px solid #D6D6D6;
}
#contact .contact-form .in dl:last-of-type dd{
	border-bottom:none;
}
#contact .contact-form .form-text01{
	width:510px;
	height:40px;
	border:1px solid #D6D6D6;
	box-sizing: border-box;
	background:#F0F0E1;
}
#contact .contact-form .form-textarea01{
	width:610px;
	height:110px;
	border:1px solid #D6D6D6;
	box-sizing: border-box;
	background:#F0F0E1;
}
#contact .contact-form .contact-btnarea{
	margin-top:30px;
	text-align:center;
}
#contact .contact-form .form-btn{
	width:270px;
	height:60px;
	color:#fff;
	font-size:22px;
	text-align:center;
	line-height:60px;
	border:none;
	border-radius:5px;
}
.form-btn-conf, .form-btn-send{background:#FF9424;}
.form-btn-back{background:#00a2d9;}
#contact .contact-form .contact-caution{
	color:#dd0000;
	margin-bottom:20px;
}
#contact .form-btn-2cols li{
	display:inline-block;
	vertical-align:middle;
	margin-right:10px;
}
#contact .form-btn-2cols li:last-child{margin-right:0;}
#contact .form-sent{
	font-size:16px;
	margin-bottom:100px;
}
#contact .form-sent-message{
	font-size:25px;
	font-weight:bold;
	color:#ff8000;
	margin-bottom:20px;
}


/* #area10
-------------------------------------------------------*/

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


#popupOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}
#popupMessage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(134, 109, 160, 1);
    color: #ffffff;
    padding: 0;
    border-radius: 8px;
    z-index: 1000;
	border: 3px #595959 solid;
}
#popupMessage p {
    font-size: 26px;
    line-height: 1.7em;
    margin: 1px;
    padding: 1px;
}
#popupMessage .close {
    margin-top: 10px;
    text-align: center;
}
#popupMessage .close span {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    padding: 5px 10px;
    text-align: center;
    color: #fff;
    width: 300px;
    max-width: calc(100% - 20px);
    border-radius: 26px;
    background: #ff8f00;
}
#popupClose {
    cursor: pointer;
    margin: 0;
    padding: 25px 30px;
}
@media screen and (max-width: 767px) {
    #popupMessage {
        left: 10%;
        transform: translate(-5%, -50%);
    }
    #popupMessage p {
        font-size: 20px;
    }
    #popupMessage .close span {
        font-size: 15px;
        width: calc(100% - 20px);
        max-width: initial;
    }
    #popupClose {
        padding: 30px;
    }
}