@charset "UTF-8";

:root {

/* 共通設定（基本カラーなどなど） */

}

/*-------------------------
__base_style
-------------------------*/
#wrap{}
#wrap a{ text-decoration: none;}
h1{}

/*-------------------------
__header
-------------------------*/
#header{}
#header .inner{ width: 100%;position: relative;}
#header .inner .head_logo{ width: 309px; height: auto; position: absolute; top: 0; left: 0; z-index: 100;}
#header .inner .head_logo img{ width: 100%; height: auto;}

@media screen and (max-width:999px){
#header .inner .head_logo{ width: 250px; height: auto;}
}

@media screen and (max-width: 767px) {
#header .inner .head_logo{ width: 200px; height: auto;}
}

@media (min-width: 768px) {
a[href^="tel:"] { pointer-events: none;}
}

/*-------------------------
__content
-------------------------*/
.contents_title{ width: 100%; height: 300px; background-image: url(../images/form_title.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}
.contents_title .inner{ width: 100%; max-width: 1000px; margin: 0 auto; padding: 80px 50px 20px; box-sizing: border-box; height: 100%; position: relative;}
.contents_title .inner h1{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4.5em; color: #fff; font-weight: 700; white-space: nowrap;}
.contents_title .inner h1:before{ content: ''; display: block; width: 230px; height: 149px; background-image: url(../images/title_back@2x.png); background-size: 230px 149px; background-repeat: no-repeat; position: absolute; top: -50px; left: -100px;}
.contents_title .inner h1 span{ display: block; position: relative;}

#main{ display:block; background-color: #F4F7E9; color: #283228; padding-top: 60px; box-sizing: border-box;}
#main .block{}
#main .block .block_inner{ max-width: 1100px; margin: 0 auto; padding: 0 50px; box-sizing: border-box;}
#main .block .block_inner h2.basic_h2{ font-size: 5.3em; line-height: 1.3; font-weight: 700;}
#main .block .block_inner h2.basic_h2 span{ color: #16673A;}
#main .block .block_inner h3.basic_h3{ font-size: 2.5em; line-height: 1.2; font-weight: 700; color: #fff; background-color: #16673A; padding: 10px 50px 10px 50px; clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);}
#main .block .block_inner p{ font-size: 1.8em; line-height: 1.7;}

@media screen and (max-width:999px){
.contents_title{ height: 240px;}
.contents_title .inner h1{ font-size: 3.5em; margin-top: 40px;}
.contents_title .inner h1:before{ height: 95px; background-size: 135px 95px; top: -30px; left: -50px;}
#main{ padding-top: 40px;}
#main .block .block_inner h2.basic_h2{ font-size: 4em;}
#main .block .block_inner h3.basic_h3{ font-size: 1.8em;}
#main .block .block_inner p{ font-size: 1.6em;}
}

@media screen and (max-width: 767px) {
.contents_title{ height: 170px;}
.contents_title .inner h1{ font-size: 2.7em; margin-top: 25px;}
.contents_title .inner h1:before{ height: 75px; background-size: 115px 75px; top: -25px; left: -50px;}
#main{ padding-top: 20px;}
#main .block .block_inner{ padding: 0 20px;}
#main .block .block_inner h2.basic_h2{ font-size: 2.8em;}
#main .block .block_inner h3.basic_h3{ font-size: 1.6em; padding: 6px 30px 6px 30px;}
#main .block .block_inner p{ font-size: 1.5em;}
}

/*-------------------------
__footer
-------------------------*/
#footer{ text-align: center;}
#footer .inner{ width: 100%; max-width: 1000px; margin: 0 auto; padding: 80px 50px 20px; box-sizing: border-box;}
#footer .inner ul{ display: flex; justify-content: center; margin-bottom: 80px;}
#footer .inner ul li{ width: 210px; margin: 0 15px;}
#footer .inner ul li a{ display: block; font-size: 1.7em; color: #16673A; border: 2px solid #16673A; box-sizing: border-box; height: 50px; line-height: 47px; border-radius: 50vh; font-weight: 700; -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
#footer .inner .foot_logo{ width: 441px; height: auto; margin: 0 auto 50px;}
#footer .inner .foot_logo img{ width: 100%; height: auto;}
#footer .cc{ font-size: 1.5em; color: #969696;}
#footer .inner .attention{ display: inline-block; font-size: 2.5em; margin-bottom: 50px; color: #FF3200; border: 2px solid #FF3200; padding: 15px 25px; box-sizing: border-box;}
#footer .inner .free_dial{ width: 335px; height: auto; margin: 0 auto 80px;}
#footer .inner .free_dial img{ width: 100%; height: auto;}

@media screen and (max-width:999px){
#footer .inner{ padding: 60px 50px 20px;}
#footer .inner ul{ margin-bottom: 60px;}
#footer .inner ul li{ width: 190px; margin: 0 15px;}
#footer .inner ul li a{ font-size: 1.5em;}
#footer .inner .foot_logo{ margin:0 auto 40px; width: 330px;}
#footer .inner .attention{ font-size: 2em; padding: 10px 20px; margin-bottom: 40px;}
#footer .inner .free_dial{ width: 280px; margin: 0 auto 60px;}
}

@media screen and (min-width: 768px) {
#footer .inner ul li a:hover{ color: #fff; background-color: #16673A;}
.br_none{ display: none;}
}

@media screen and (max-width: 767px) {
#footer .inner{ padding: 40px 20px 20px; box-sizing: border-box;}
#footer .inner ul{ margin-bottom: 40px;}
#footer .inner ul li{ width: calc(50% - 5px); max-width: 160px; margin: 0 10px 0 0;}
#footer .inner ul li:nth-child(2){ margin: 0;}
#footer .inner ul li a{ font-size: 1.3em; height: 40px; line-height: 37px;}
#footer .inner .foot_logo{ margin:0 auto 30px; width: 240px;}
#footer .inner .attention{ font-size: 2em; line-height: 1.3; padding: 10px 20px; margin-bottom: 30px;}
#footer .inner .free_dial{ width: 240px; margin: 0 auto 40px;}

#footer .cc{ font-size: 1.2em;}
}