@charset "utf-8";
/* CSS Document */

:root{
    font-size:62.5%;
}
html {
    font-size:62.5%;
}
body{
	font-size:16px;
	color:#000000;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-family: "open-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
	margin:0;
	position: relative;
}
a{
	color:#000000;
	text-decoration:none;
    transition: 0.3s;
}
a:hover{
	opacity:0.5;
	filter:alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
}
img {
	border: none;
	vertical-align: bottom;
    max-width: 100%;
	height: auto;
}
a img { 
	border: none;
}
a.nolink{
    pointer-events: none;
}
ul {
	list-style-type: none;
}
table{
	border-collapse: collapse;
}
.clearfix:after {
	content: "";
	display: block;
	overflow: hidden;
	clear: both;
}
.fix-flex{
    display: flex;
}
.leftBox{
	float:left;
}
.rightBox{
	float:right;
}
.center{
    text-align: center;
}
.c_white{
    color:#FFFFFF;
}
.sp{
	display:none !important;
}
.spacer{
    width:100%;
}
.inner{
    padding-left: 0;
    padding-right: 0;
}
.contentWidth{
    width:92%;
    max-width: 1000px;
    margin-left:auto;
    margin-right: auto;
    box-sizing: border-box;
}
h2.style001{
    font-size:50px;
    font-weight: bold;
    color:#14B26D;
    text-align: center;
    margin-bottom: 50px;
}
h2.style001 span{
    display: block;
    font-size:16px;
    font-weight: bold;
    color:#14B26D;
}
.complete h2.style001,
.complete h2.style001 span{
    color:#353535;
}
.mb{
    margin-bottom: 0 !important;
}
@media (max-width: 768px) {
    body{
        font-size:14px;
        padding-top: 0 !important;
    }
    .pc{
        display:none !important;
    }
    .sp{
        display:block !important;
    }
    .leftBox{
        float:none !important;
    }
    .rightBox{
        float:none !important;
    }
    .contentWidth{
        width:calc(100% - 40px);
    }
    h2.style001{
        font-size:24px;
        margin-bottom: 30px;
    }
    h2.style001 span{
        font-size:14px;
    }
}

@media (max-width: 768px) {    
    header{
        background: rgba(234,234,234,0);
    }
    header.scroll{
        background: #FFFFFF;
    }
}
/*--------------------------------------
    visualArea
--------------------------------------*/

.visualArea{
    width:100%;
    height:800px;
    position: relative;
    background: url("../img/envalue/bg_visual_001.jpg") no-repeat center center/cover;
}
.visualArea .inner{
    display: flex;
    justify-content: space-between;
    width:75%;
    height:100%;
    margin: 0 auto;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 40;
}
.visualArea .inner .textArea{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:7%;
    width:52%;
}
.visualArea .inner .textArea p{
    font-size:22px;
    line-height: 2.5;
    font-weight: bold;
}
.visualArea .inner .img{
    height:100%;
    display: flex;
    align-items: flex-end;
    width:44%;
}
@media (max-width: 768px) {
    .visualArea{
        width:100%;
        height:100vh;
    }
    .visualArea .inner{
        width:92%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .visualArea .inner .textArea{
        width:auto;
        height:50vh;
        gap:20px;
        margin:60px auto 20px auto;
    }
    .visualArea .inner .textArea p{
        font-size:13px;
        line-height: 1.2;
        font-weight: bold;
    }
    .visualArea .inner .img{
        width:auto;
        height:calc(50vh - 40px);
        text-align: center;
        justify-content: center;
    }
    .visualArea .inner .textArea img,
    .visualArea .inner .img img{
        max-height:100%;
        width:auto;
    }
}

/*--------------------------------------
    introArea
--------------------------------------*/

.introArea{
    width:100%;
    padding: 40px 0 60px 0;
    background: #EFEFEF;
    position: relative;
}
.introArea .inner{
    width:1000px;
    height:100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.introArea .inner .textArea p{
    font-size:22px;
    font-weight: bold;
    line-height: 2.2;
}
.introArea .inner .textArea ul li{
    font-size:50px;
    font-weight: bold;
    color:#14B26D;
    display: flex;
    gap:50px;
    border-bottom: 5px solid #F8E400;
    margin-bottom: 20px;
}
.introArea .inner .textArea ul li img{
    vertical-align: middle;
}
.introArea .img{
    position: absolute;
    top:40px;
    left:calc(50% + 160px);
}
@media (max-width: 1500px) {
    .introArea .inner .img{
        max-width:575px;
        width:35vw;
    }
}
@media (max-width: 768px) {
    .introArea{
        height:auto;
        padding: 20px 4%;
    }
    .introArea .inner{
        width:100%;
    }
    .introArea .inner .textArea p{
        font-size:14px;
    }
    .introArea .inner .textArea ul{
        margin-top: 30px;
    }
    .introArea .inner .textArea ul li{
        font-size:18px;
        line-height: 20px;
        padding-bottom: 10px;
        gap:20px;
        border-bottom: 2px solid #F8E400;
        margin-bottom: 10px;
    }
    .introArea .inner .textArea ul li img{
        width:30px;
    }
    .introArea .img{
        text-align: center;
        margin: 0 auto 30px auto;
        width: 70%;
        position: static;
    }
}

/*--------------------------------------
    priceArea
--------------------------------------*/

.priceArea{
    padding: 80px 0 100px 0;
}
.priceArea .price{
    font-size:26px;
    font-weight: bold;
    padding-bottom: 20px;
    margin: 20px 0;
    border-bottom: 1px solid #707070;
}
.priceArea .price strong{
    font-size:42px;
    font-weight: bold;
    color:#14B26D;
}
.priceArea .price span{
    font-size:22px;
    font-weight: bold;
    display: inline-block;
    padding: 0 10px;
    background: #FFDC0080;
    position: relative;
    margin-left: 10px;
}
.priceArea .price span::after{
    content: "※";
    position: absolute;
    top:5%;
    right:10px;
    font-size:10px;
}
.priceArea .price span strong{
    font-size:48px;
    font-weight: bold;
    color:#14B26D;
    padding: 0 5px;
}
@media (max-width: 768px) {
    .priceArea{
        padding: 30px 0 30px 0;
    }
    .priceArea .unitprice{
        margin: 0 auto;
        width: 70%;
    }
    .priceArea .price{
        font-size:14px;
    }
    .priceArea .price strong{
        font-size:20px;
    }
    .priceArea .price span{
        font-size:14px;
        margin-left: 0px;
    }
    .priceArea .price span strong{
        font-size:24px;
    }
}

/*--------------------------------------
    flowArea
--------------------------------------*/

.flowArea{
    padding: 70px 0 80px 0;
    background: #14B26D;
}
.flowArea .flowheader{
    background: url("../img/envalue/bg_dotted.gif") repeat-x left center;
    text-align: center;
}
.flowArea h2.style001,
.flowArea h2.style001 span{
    color:#FFFFFF;
    background: #14B26D;
}
.flowArea h2.style001{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 5%;
    margin: 0 auto;
}
.flowArea h2.style001 span{
    text-align: center;
    position: absolute;
    top:auto;
    left:0;
    right:0;
    bottom:100%;
}
.flowArea .boxArea{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:50px;
    margin-top: 40px;
}
.flowArea .boxArea .box{
    width:300px;
    height:380px;
    background: #FFFFFF;
    position: relative;
    box-sizing: border-box;
    padding: 30px 25px;
}
.flowArea .boxArea .box:not(:last-child)::after{
    content: "";
    position: absolute;
    top:50%;
    left:100%;
    border-top:50px solid transparent;    
    border-left:36px solid #FFFFFF;
    border-bottom:50px solid transparent;    
}
.flowArea .boxArea .box h3{
    width:100%;
    height:55px;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#FFFFFF;
    background: #C2C2C2;
    margin-bottom: 30px;
    font-size: 30px;
}
.flowArea .boxArea .box figure{
    text-align: center;
}
.flowArea .boxArea .box figure figcaption{
    font-size:30px;
    font-weight: bold;
    margin-top: 20px;
}
@media (max-width: 768px) {
    .flowArea{
        padding: 30px 0 30px 0;
    }
    .flowArea .boxArea{
        grid-template-columns: 1fr;
    }
    .flowArea .boxArea .box{
        width:100%;
        height:auto;
        padding: 20px;
    }
    .flowArea .boxArea .box:not(:last-child)::after{
        content: "";
        position: absolute;
        top:100%;
        left:calc(50% - 50px);
        border-top:36px solid #FFFFFF;    
        border-left:50px solid transparent;   
        border-right:50px solid transparent;
        border-bottom:0px solid transparent;    
    }
    .flowArea .boxArea .box h3{
        width:100%;
        height:40px;
        margin-bottom: 20px;
        font-size: 16px;
    }
    .flowArea .boxArea .box figure figcaption{
        font-size:18px;
        margin-top: 15px;
    }
}

/*--------------------------------------
    contactArea
--------------------------------------*/

.contactArea{
    background: #97CF96;
    padding: 60px 0 60px 0;
}
.contactArea .inner{
    background: #FFFFFF;
    padding: 60px 90px 100px 90px;
}
.contactArea .inner dl{
    display: flex;
    flex-wrap: wrap;
}
.contactArea .inner dt{
    width:270px;
    position: relative;
    display: block;
    line-height: 26px;
    padding: 49px 25px 49px 0;
    border-bottom: 1px solid #B2B2B2;
        margin: 0;
}
.contactArea .inner dt.nameArea{
    padding: 9px 25px 0px 0;
    border-bottom: none;
}
.contactArea .inner dt.postcodeArea,
.contactArea .inner dt.dataArea{
    padding: 49px 25px 0px 0;
    border-bottom: none;
}
.contactArea .inner dt.furiArea,
.contactArea .inner dt.addressArea{
    padding: 9px 25px 40px 0;
}
.contactArea .inner dt .required{
    width:60px;
    height:26px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #BB0031;
    font-size:16px;
    font-weight: 500;
    border-radius: 0;
    line-height: 1.5;
    color:#FFFFFF;
    position: absolute;
    top:49px;
    right:25px;
}
.contactArea .inner dt.nameArea .required,
.contactArea .inner dt.furiArea .required,
.contactArea .inner dt.addressArea .required{
    top:9px;
}
.contactArea .inner dd{
    width:calc(100% - 270px);
    padding: 40px 0 40px 0;
    border-bottom: 1px solid #B2B2B2;
        margin: 0;
}
.contactArea .inner dd {
    input[type="text"], input[type="url"], input[type="tel"], input[type="email"], select{
        height: 45px;
        border: 1px solid #B2B2B2;
        border-radius: 5px;
        box-sizing: border-box;
    }
}
.contactArea .inner dd .wpcf7-form-control-wrap{
    width:100%;
}
.contactArea .inner dd.nameArea{
    padding: 0px 0px 20px 0;
    border-bottom: none;
}
.contactArea .inner dd.postcodeArea{
    gap:0.5rem;
}
.contactArea .inner dd.addressArea{
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap:1rem;
}
.contactArea .inner dd.postcodeArea,
.contactArea .inner dd.dataArea{
    padding: 40px 0px 20px 0;
    border-bottom: none;
}
.contactArea .inner dd.furiArea,
.contactArea .inner dd.addressArea{
    padding: 0px 0px 40px 0;
}
.contactArea .inner dd.postcodeArea .wpcf7-form-control-wrap,
.contactArea .inner dd.addressArea .wpcf7-form-control-wrap{
    width:auto;
}
.contactArea .inner dd.addressArea .wpcf7-form-control-wrap:last-of-type{
    grid-column: 1 / 3;
}
.contactArea .inner dd.addressArea .p-locality {
    width: 100%;
}
.contactArea .inner dd.addressArea #inputAddress02{
    margin-top: 1rem;
}
.contactArea .inner dd.sparse span{
    border:none;
}
.contactArea .inner .privacy{
    margin-top: 30px;
}
.contactArea .inner .privacy a{
    color:#BB0031;
    text-decoration: underline;
}
.contactArea .inner .comment{
    font-size:12px;
    font-weight: 500;
    margin-top: 16px;
    text-align: center;
}
.contactArea .inner .btn{
    margin-top: 5rem;
}
.contactArea .inner .btn .wpcf7-submit{
    width:55rem;
    height:7.4rem;
    border-radius: 3.7rem;
    box-shadow: none;
    padding: 0.5rem 1rem 0.7rem 1rem;
    box-sizing: border-box;
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid #BB0031;
}
.contactArea .inner .btn2{
    text-align: center;
}
@media (max-width: 768px) {
    .contactArea{
        padding: 30px 0 30px 0;
    }
    .contactArea .inner{
        padding: 30px 20px 30px 20px;
    }
    .contactArea .inner dl{
        display: block;
    }
    .contactArea .inner dt{
        width:100%;
        height:auto;
        margin-bottom: 10px;
        padding: 20px 25px 0px 0 !important;
        border-bottom: none;
    }
    .contactArea .inner dt .required {
        top:20px;
        right: 0px;
    }
    .contactArea .inner dt.nameArea .required, .contactArea .inner dt.furiArea .required, .contactArea .inner dt.addressArea .required {
        top:20px;
    }
    .contactArea .inner dd{
        width:100%;
        height:auto;
        padding: 10px 0 20px 0;
        margin: 0;
        gap:10px;
    }
    .contactArea .inner dd.furiArea, .contactArea .inner dd.addressArea {
        padding: 10px 0 20px 0;
    }
    .contactArea .inner dd.postcodeArea, .contactArea .inner dd.dataArea {
        padding: 10px 0px 20px 0;
        border-bottom: 1px solid #B2B2B2;
    }
    .contactArea .inner dd.postcodeArea input[type="text"].size2.p-postal-code{
        width: 7rem;
    }
    .contactArea .inner dd.nameArea{
        width:100%;
        height:auto;
        padding: 10px 0 20px 0;
        margin: 0 0 0 0;
        gap:10px;
        border-bottom: 1px solid #B2B2B2;
    }
    .contactArea .inner dd.textArea textarea{
        height: 200px;
    }
    .contactArea .inner dd.addressArea{
        padding: 10px 0 20px 0;
    }
    .contactArea .inner dd.addressArea .p-locality {
        width: 100%; 
        margin: 0;
    }
    .contactArea .inner dd.addressArea #inputAddress02 {
        margin-top: 0;
    }
    .contactArea .inner .btn{
        margin-top: 3rem;
    }
    .contactArea .inner .btn .wpcf7-submit{
        width:26rem;
        height:5rem;
        border-radius: 2.5rem;
    }
}