@charset "utf-8";
/*-- ------------- --*/
/*-- component css --*/
/*-- ------------- --*/
/*-- button --*/
.c-btn{
	position:relative;
	text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-btn.c-btn__right{
    justify-content: flex-end;
}
.c-btn a{
    position:relative;
	text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
	padding:10px 10px;
    font-size: 16px;
	line-height:1;
    color:var(--main-color);
    transition:all .5s;
    width:auto;
    text-decoration: none;
}
.c-btn a:hover{cursor: pointer;opacity: .7;}
/*.c-btn a::after{
	content:'';
    background: url(../img/base/btn.svg)no-repeat center/20px auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
    margin-left: 10px;
	transition:all .5s;
}*/
.link__btn{position:relative;text-decoration: none;height:100%;}
.link__btn a{position:relative;text-decoration: none;display: block; width:100%;height:100%;}
.link__btn a::after{
	content:'';
    background: url(../img/base/btn.svg)no-repeat center right/100% auto;
    position: relative;
    display: flex;
    align-items: center;
    width: 30px;
    height: 30px;
    margin-top: 2rem;
    margin-left: auto;
	transition:all .5s;
}
.link__btn:hover{cursor: pointer;opacity: .7;}
.c-return__btn{
	position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
	text-align:center;
	padding:14px 30px;
	border-radius:50px;
	border:1px solid var(--main-color);
    font-weight: 500;
	line-height:1;
    color:var(--main-color);
    text-decoration: none;
}
.c-return__btn::before{
	content:'';
    position: relative;
    display: flex;
    align-items: center;
    width: 30px;
    height: 30px;
    background: url(../img/base/btn.svg)no-repeat center/100% auto;
    transform: rotate(180deg);
	transition:all .5s;
    margin-right: 10px;
}
.c-t__btn{
    position: fixed;
    right:1%;
    bottom:6%;
    z-index: 100;
}
.c-t__btn a{
    position: relative;
    display: block;
    background: var(--main-color);
    color:var(--white-color);
    border:2px solid var(--white-color);
    width: 60px;
    height:60px;
    border-radius: 50%;
}
.c-t__btn a::before{
    content:'';
    position: absolute;
    top:calc(50% + 5px);
    left:50%;
    transform: translate(-50%,-50%)rotate(-45deg);
    display: block;
    width:20px;
    height:20px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    transition:all .5s;
}
.c-t__btn a:hover::before{
    top:calc(50% + 2px);
}
@media screen and (max-width: 768px){
.link__btn a::after{
    width: 30px;
    height: 30px;
    margin-top: 1rem;
}
.c-t__btn{position: fixed;right:5px;}
.c-t__btn a{
    width: 40px;
    height:40px;
}
.c-t__btn a::before{
    top:calc(50% + 3px);
    width:14px;
    height:14px;
}
}
@media screen and (max-width: 640px){

}

/*-- ----------- --*/
/*-- project css --*/
/*-- ----------- --*/
/*-- Index MV--*/
.mv{
}
.mv .mv__txt{
    position: relative;
    width:80%;
}
@media screen and (max-width: 900px){
/*-- Index MV--*/
.mv .mv__txt{
    width:100%;
    padding: 0 20px;
}
}


/*-- .home --*/
.section__meiwakiyaku .left__block{
    min-height:100%;
    background-size: contain;
    background-position: bottom center;
}
.section__meiwakiyaku .left__block figure{
    position: relative;
}
.section__meiwakiyaku .left__block img{
    height:auto;
}
.section__meiwakiyaku figure img{
    width:70%;
    margin: 0 auto;
}
@media screen and (max-width: 1400px){

}
@media screen and (max-width: 1200px){

}
@media screen and (max-width: 1000px){

}
@media screen and (max-width: 900px){

}
@media screen and (max-width: 768px){
.section__meiwakiyaku figure img{
    width:100%;
}
}
@media screen and (max-width: 640px){
}
@media screen and (max-width: 480px){

}

/*--- ---------- ---*/
/*---  固定ページ ---*/
/*--- ---------- ---*/

/*--　固定ページ サムネイル--*/
.page__hero{
    position: relative;
    padding: 0;
}
.page__hero .bg__contain{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: contain;
}
.page__hero .bg__contain img{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: contain;
}
/*-- 固定ページ お問い合わせ --*/
.contact__page{}
.contact__page .contact__body{
    margin: 0 auto;
    border-bottom:1px solid #bbb;
    max-width: 1000px;
}
.contact__page .contact__body .contact__left{
    width:30%;
    padding: 12px 10px;
    border-top:1px solid #bbb;
    display: flex;
    align-items: center;
}
.contact__page .contact__body .contact__right{
    width:70%;
    padding: 12px 10px;
    border-top:1px solid #bbb;
}
.contact__page .contact__body .contact__right p{
    width:calc(100% - 20px);
    padding-left: 10px
}
.contact__page .contact__body .contact__right input{
    width:100%;
    background: transparent!important;
}
.contact__page .contact__body .contact__right input[type=checkbox] {
    width:15px;
}
.contact__page .contact__body .contact__right textarea{
    width:100%!important;
    min-height:80px;
    background: transparent!important;
}
.contact__page .contact__body .must__item{
    font-size: 14px;
    display: inline-block;
    border:1px solid #C00;
    color:#C00;
    margin-left: 10px;
    padding: 3px 8px;
}
.submit__btn{
    margin:30px auto 40px;
    text-align: center;
}
.submit__btn button{
	position:relative;
	text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
	padding:10px 40px 10px 40px;
	border-radius:0px;
    border:2px solid var(--main-color);
	line-height:1.4;
    color:var(--main-color);
    background: var(--white-color);
    transition:all .5s;
}
.submit__btn button:hover{
    cursor: pointer;
    background: var(--white-color);
    box-shadow: none;
    opacity: .7;
}
.page .mfp_buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.page #mfp_button_send.mfp_element_button{
    position:relative;
	text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px;
	padding:10px 40px 10px 40px;
	border-radius:0px;
    border:2px solid var(--main-color);
	line-height:1.4;
    color:var(--main-color);
    background: var(--white-color);
    transition:all .5s;
    width: 180px;
}
.page #mfp_button_send.mfp_element_button:hover{
    cursor: pointer;
    background: var(--white-color);
    box-shadow: none;
    opacity: .7;
}
.page #mfp_button_cancel.mfp_element_button{
    position:relative;
	text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px;
	padding:10px 40px 10px 40px;
	border-radius:0px;
	line-height:1.4;
    transition:all .5s;
    width: 180px;
}
@media screen and (max-width: 1200px){
/*-- 固定ページ 会社案内 --*/
.company dl{
    max-width: 100%;
}
}
@media screen and (max-width: 768px){
/*-- 固定ページ 会社案内 --*/
.company dl dt,.company dl dd{
    position: relative;
    border-bottom:1px solid #333;
    padding-top: 10px;
    padding-bottom: 10px;
    width:100%;
    padding-left: 10px;
    padding-right: 10px;
}
.company dl dt{
    border-bottom:0px solid #333;
}
.company dl dt::before{
    content:'';
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background: var(--main-color);
    opacity: .3;
}
/*-- 固定ページ お問い合わせ --*/
.contact__page .contact__body .contact__left{
    width:100%;
    padding: 10px 10px;
    border-top:1px solid #bbb;
    display: flex;
    align-items: center;
}
.contact__page .contact__body .contact__right{
    width:100%;
    padding: 10px 10px;
    border-top:1px solid #bbb;
}
}
@media screen and (max-width: 640px){
.safety h3{
    font-size: 16px;
    text-align: center;
    margin: 30px 0 20px;
}
}
@media screen and (max-width: 480px){

}
