/*=============================================================
common.css
---------------------------------------------------------------

01. common layout
02. header
03. footer
04. home
05. contact and mail common style
06. contact
07. mail
08. thanks
09. mobile
10. media query
11. helper

===============================================================
01. common layout
=============================================================*/

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

#wrapper {
    overflow: hidden;
} 

.pc,
.pc-alt {
	display: inline-block;
}

.sp,
.sp-alt,
.tb {
	display: none;
}

.central {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
	transform: translateX( -50% ) translateY( -50% );
}

img {
    width: 100%;
}

.mt-plus {
    margin-top: 30px;
}

.mb-plus {
    margin-bottom: 30px;
}

.mb-plus-more {
    margin-bottom: 45px;
}

.mb-plus-plus {
    margin-bottom: 60px;
}

.mb-plus-super {
    margin-bottom: 100px;
}

.mb-little-plus {
    margin-bottom: 10px;
}

p.no-padding {
	padding: 0;
}

p {
    margin-bottom: 15px;
}

p:last-of-type,
p.mb-none {
    margin-bottom: 0;
}

p.mb-default {
    margin-bottom: 15px;
}

p.mb-plus {
    margin-bottom: 25px;
}

p.mb-plus-plus {
    margin-bottom: 50px;
}

.bold {
	font-weight: bold;
}

#loading-layer {
    width: 100%;
    height: 100%;
    background: #fff;
    transition: all ease 800ms;
    transition-delay: 100ms;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
}

.loaded #loading-layer {
    opacity: 0;
    visibility: hidden;
}

.pages #loading-layer {
    background: #ffffff;
    transition: all ease 500ms;
    transition-delay: 50ms;
}

.pages.loaded #loading-layer {
    opacity: 0;
    visibility: hidden;
}

#contents {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#visual,
#bg {
    width: 100%;
    height: 100%;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: contain;
    overflow: hidden;
    top: 0;
    left: 0;
}

#visual {
    margin-bottom: 55px;
    background-repeat: no-repeat;
    position: relative;
}

#bg {
    position: absolute;
    z-index: 1;
}

.mass {
    padding: 50px 0 150px;
}

.ta-c {
	text-align: center;
}

.with-top-line {
    padding-top: 60px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.with-top-line::before {
    display: inline-block;
    content: "";
    width: 100%;
    height: 1px;
    background: #b0b0b0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.inner {
    width: 80%;
    margin: 0 auto;
}


/* font-style */

.tit-01 {
    font-family: "Zen Old Mincho", serif;
    font-weight: 700;
    margin-bottom: 150px;
    font-size: 40px;
    text-align: center;
    letter-spacing: 4px;
}

.tit-02 {
    margin-bottom: 35px;
    font-size: 28px;
    text-align: center;
    letter-spacing: 4px;
}

.tit-03 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: min(1.5vw,20px);
    font-weight: 500;
    text-align: center;
}

.en {
    font-family: "Lora", serif;
    font-weight: bolder;
}

.sub-tit {
	font-family: "Noto Sans JP", sans-serif;
    margin-bottom: 15px;
    font-size: 15px;
    text-align: center;
	font-weight: 300;
}

.bold {
    font-family: "M PLUS 1", sans-serif;
    font-size: 1.5vw;
    line-height: 1.7;
}

.tit-01.mb-plus {
    margin-bottom: 45px;
}

.tit-01.mb-minus {
    margin-bottom: 25px;
}

.tit-01.mb-super-minus {
    margin-bottom: 6px;
}

#visual #visual-tit h1 img {
	width: 80%;
	margin: 0 auto;
	display: block;
}

.green {
    color: #1cd14f;
    font-weight: bold;
    font-size: 1.3rem;
}

.orange {
    color: #f65c1a;
    font-weight: bold;
    font-size: 1.3rem;
}

.mini {
    font-size: 15px;
}


/*
 * .box-img
 */

.box-img {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

/*
 * .box-simple-img [ for img tag ]
 */

.box-simple-img {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

.box-simple-img.mb-plus {
    margin-bottom: 25px;
}

.box-simple-img img,
.box-simple-img a {
    display: block;
}

.box-simple-img.two > img,
.box-simple-img.two a {
    width: 50%;
}

.box-simple-img.three > img,
.box-simple-img.three a {
    width: calc( 100% / 3 );
}


/*
 * .row
 */

.row {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}


/*
 * .row.divi
 */
.row.divi {
    margin-bottom: 4%;
}

.row.divi:last-child {
    margin-bottom: 0;
}

.row.divi .box-img {
    width: 50%;
    height: 100%;
    position: absolute;
    z-index: 1;
} 

.row.divi.img-left .box-img {
    top: 0;
    left: 0;
}

.row.divi.img-right .box-img {
    top: 0;
    right: 0;
}

.row.divi .box-text {
    width: 50%;
}

.row.divi .box-text.pa-tb-plus {
    padding: 4% 0;
}

.row.divi .box-text.pa-b-plus {
    padding-bottom: 4%;
}

.row.divi.img-left .box-text {
    margin-left: 50%;
	padding: 20px 0;
}

.row.divi.img-right .box-text {
    margin-left: 10%;
}

/*
 * .row.double-img
 */

.row.double-img.mb-plus {
    margin-bottom: 50px;
}

.row.double-img.mb-plus-little {
    margin-bottom: 35px;
}

.row.double-img .box-img:nth-of-type( 1 ) {
    width: 55%;
    padding-top: 40%;
}

.row.double-img .box-img:nth-of-type( 2 ) {
    width: 41%;
    height: 78%;
    position: absolute;
    top: 10%;
    right: 0;
    z-index: 1;
}


/*
* pages
*/

.pages #visual #visual-tit {
    width: 50%;
    top: 47%;
}

/*
* basic motion
*/

.elem-01,
.elem-02,
.elem-03,
.elem-04,
.elem-05,
.elem-06,
.elem-07,
.elem-08,
.elem-09,
.elem-10,
.elem-11 {
    transition: all ease 1200ms;
    filter: blur(6px);
    opacity: 0;
}

.elem-01 {
    transition-delay: 300ms;
}

.elem-02 {
    transition-delay: 500ms;
}

.elem-03 {
    transition-delay: 700ms;
}

.elem-04 {
    transition-delay: 900ms;
}

.elem-05 {
    transition-delay: 1200ms;
}

.elem-06 {
    transition-delay: 1400ms;
}

.elem-07 {
    transition-delay: 1600ms;
}

.elem-08 {
    transition-delay: 1800ms;
}

.elem-09 {
    transition-delay: 2000ms;
}

.elem-10 {
    transition-delay: 2200ms;
}

.elem-11 {
    transition-delay: 2400ms;
}


.active .elem-01,
.active .elem-02,
.active .elem-03,
.active .elem-04,
.active .elem-05,
.active .elem-06,
.active .elem-07,
.active .elem-08,
.active .elem-09,
.active .elem-10,
.active .elem-11 {
    filter: none;
    opacity: 0.99999;
}

/*
* .btn
*/


.btn {
	width: 300px;
	height: 60px;
	text-align: center;
	margin: 0 auto;
    position: relative;
    display: block;
    background-color: #5b473d;
    border: 2px solid #5b473d;
	border-radius: 30px;
	transition: all ease 500ms;
    box-sizing: border-box;
}

.btn a {
    display: block;
    font-family: 'Noto sans',sans-serif;
	font-size: 17px;
    font-weight: 550;
    letter-spacing: normal;
	text-decoration: none;
	line-height: 3.3;
	color: #fff;
	transition: all ease 500ms;
    cursor: pointer;
}

.mass.with-bg {
    background-image: url(/common/img/shared/bg.jpg);
}




/*=============================================================
02. header
=============================================================*/

#main-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

#main-header h1 {
    width: 300px;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1;
}

/*
* global nav
*/

#main-header #icon-menu,
#main-header #icon-close {
    width: 80px;
    height: 80px;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1;
    cursor: pointer;
}

#main-header #icon-menu {
    background: #ffffff;
    transition: all ease 200ms;
}

#main-header #icon-tel {
	width: 80px;
	height: 80px;
	position: fixed;
	top: 10px;
	right: 94px;
	z-index: 1;
    cursor: pointer;
	background: #5b473d;
    transition: all ease 200ms;
}

#main-header #icon-menu:hover {
    background: #c7baa4;
}

#main-header #icon-close {
    background: #fff;
}

#main-header #icon-tel a {
	text-decoration: none;
	color: #fff;
	text-align: center;
	display: block;
	line-height: 1.2;
}

#main-header #icon-tel:hover {
    background-color: #a69f9b;
}

#main-header #nav-wrapper {
    width: 100%;
    height: 100%;
    background-color: #5b473d;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    transition: all ease 600ms;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
}

.nav-on #main-header #nav-wrapper {
    opacity: 0.99999;
    visibility: visible;
}

#main-header #nav-wrapper #box-nav {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}


#main-header #nav-wrapper #box-nav .close-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-header #nav-wrapper #box-nav .central {
    width: 30%;
    top: 50%;
    padding: 15%;
}

#main-header #nav-wrapper #box-nav ul li,
#main-header #nav-wrapper #box-nav ul li a {
    display: inline-block;;
}

#main-header #nav-wrapper #box-nav ul li a {
    width: 100%;
    padding: 9% 5%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-header #nav-wrapper #box-nav ul li:nth-of-type( 1 ) a {
    padding-top: 0;
}

#main-header #nav-wrapper #box-nav ul li a::before,
#main-header #nav-wrapper #box-nav ul li a::after {
    display: inline-block;
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}




/*=============================================================
03. footer
=============================================================*/

#main-footer {
    padding: 30px 0;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    background: url(/common/img/shared/bg.jpg) center center no-repeat;
}


#main-footer p {
    font-size: 18px;
    text-align: center;
    letter-spacing: 2px;
    color: #000000;
    margin-bottom: 15px;
    font-weight: bold;
}

#main-footer #copy {
    margin-top: 20px;
}


/*=============================================================
04. home
=============================================================*/

#home #main-header h1 {
    display: none;
}

/* visual-loading */


#home #bg {
    background: url(/common/img/shared/bg.jpg);
}

#home #visual {
    margin-bottom: 0;
}

#home #visual #box-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50%;
    z-index: 1;
}


/*  contents */

#home .img-box {
    width: 90%;
    margin: 0 auto;
}

#part-contact  ul {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
}

#part-contact  ul li {
    width: 33.3;
}

#part-contact  ul li a {
    text-align: center;
    display: block;
    text-decoration: none;
}

#part-contact  ul li a img {
    width: 50%;
    margin: 0 auto 10px;
    display: block;
}



/*=============================================================
12. media query
=============================================================*/

@media screen and (max-width: 1360px) {

    #main-header #nav-wrapper #box-nav .central {
        width: 51%;
    }
}
@media screen and (max-width: 1360px) {

    .tb {
        display: block;
    }
}


@media screen and (max-width: 1024px) and (orientation: portrait) {


    #home #visual #box-logo {
        width: 57%;
    }

}


@media screen and (max-width: 1023px) {


    .tit-03 {
        font-size: max(1.6vw,21px);
    }

}

@media screen and (max-width: 800px) {

	.pc {
		display: none;
    }

	.sp {
		display: inline-block;
    }

    .row.divi .box-img,
    .row.divi .box-text {
        width: 100%;
    }

    .row.divi .box-img {
        height: auto;
        padding-top: 100%;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .row.divi.img-right .box-img {
        left: 0;
    }

    .row.divi.img-right .box-text {
        padding-right: 0;
    }

    .row.divi.img-left .box-text,
    #home #part-contact .row.divi.img-left .box-text {
        padding-left: 0;
        margin-left: 0;
    }

    #main-header #nav-wrapper .box-img  {
        display: none;
    }

    #main-header #nav-wrapper #box-nav {
        width: 100%;
    }

    #main-header #nav-wrapper #box-nav .central {
        width: 50%;
        padding: 20% 5%;

    }

    .loaded #loading-layer {
        opacity: 0;
        height: 100%;
    }

    .pages #visual #visual-tit {
        width: 84%;
        top: 50%;
    }


}

@media screen and (max-width: 700px) {

	.pc-alt {
		display: none;
    }

	.sp-alt {
		display: inline-block;
    }

    body {
        font-size: 17px;
    }

    #visual {
        margin-bottom: 35px;
    }

    .mass {
        padding: 30px 0 80px
    }

    .tit-01 {
        font-size: 28px;
        line-height: 1.4;
        margin-bottom: 80px;
    }

    .tit-01.mb-plus {
        margin-bottom: 30px;
    }

    .tit-01.mb-super-minus {
        margin-bottom: 3px;
    }

    .tit-02 {
        margin-bottom: 15px;
        font-size: 21px;
    }

    .bold {
        font-size: 4.7vw;
    }

    .btn-02 {
        width: 300px;
        height: 60px;
    }

    .btn-02 a {
        line-height: 2.2;
        font-size: 1.5rem;
    }

    .box-simple-img {
        display: block;
        margin-bottom: 20px;
    }

    .box-simple-img .apply > span > span {
        font-size: 100%;
        width: 90%;
    }


    .box-simple-img.two > img,
    .box-simple-img.two a,
    .box-simple-img.three > img,
    .box-simple-img.three a {
        width: 100%;
    }

    .row.divi .box-img,
    .box-img.wide,
    .box-img.wide.pt-plus,
    .box-img.wide.pt-plus-more {
        padding-top: 100%;
    }

    .row.divi .box-text.white-base {
        padding: 5%;
    }

    .box-img.wide,
    picture.mb-plus {
        margin-bottom: 30px;
    }

    .row.double-img.mb-plus {
        margin-bottom: 35px;
    }

    .box-img.wide.mb-per {
        margin-bottom: 0;
    }

    .row.double-img.sp-w-narrow {
        width: 80%;
        margin: 0 auto;
    }

    .row.double-img.sp-w-narrow.sp-mb-plus {
        margin-bottom: 30px;
    }

    img.mb-plus {
        margin-bottom: 30px;
    }

    .row.double-img .box-img:nth-of-type( 1 ),
    .row.double-img .box-img:nth-of-type( 2 ) {
        width: 100%;
        padding-top: 100%;
        position: relative;
        top: 0;
        left: 0;
    }

    .pages #visual #title-asset h1 {
        font-size: 13vw;
    }

    .pages #visual #title-asset p {
        font-size: 6vw;       
    }

    #main-header h1 {
        width: 230px;
        top: 20px;
        left: 10px;
    }

    #main-header #icon-contact,
    #main-header #icon-contact-02 {
        width: 80px;
        height: 80px;
    }

    #main-header #icon-contact-02 {
        right: 98px;
    }

    #main-header #icon-contact a .nav-icon,
    #main-header #icon-contact-02 a .nav-icon {
        width: 80px;
        height: 80px;
    }

    #main-header #icon-tel a {
        line-height: 1.4;
    }

    #main-footer {
        padding: 40px 0;
    }

    #main-footer p {
        font-size: 14px;
    }


    #home #visual #box-logo {
        width: 90%;
    }

    #home .img-box {
        width: 100%;
    }
    



}

@media screen and (max-width: 570px) {

    #main-header #nav-wrapper #box-nav .central {
        padding: 13% 5%;
    }

    .inner {
        width: 90%;
    }

}

@media screen and (max-width: 500px) {
    #main-header h1 {
        width: 200px;
    }

    #part-contact  ul {
        width: 100%;
    }



}

@media screen and (max-width: 359px) {

    .tit-01 {
        font-size: 27px;
    }

    #main-header h1 {
        width: 200px;
        left: 18px;
    }

    #main-header #icon-menu,
    #main-header #icon-close {
        width: 70px;
        height: 70px;
    }

}

/*=============================================================
13. helper
=============================================================*/

.ta-r {
    text-align: right;
}

.center {
    text-align: center;
}

.clr {
	clear: both;
}

/*
* clear fix
*/

.cf:before,
.cf:after {
	content:"";
	display: block;
	height: 0;
	overflow: hidden;
}

.cf:after {
	clear: both;
}

@media (hover: hover) {

    .btn:hover {
        background-color: #46b512;
    }
    
    .btn:hover a {
        color: #000;
    }

    .form-btn:hover {
    background: #46b512;
    color: #fff;
    }


    .mobile #main-header #icon-contact a:hover .nav-icon,
    .mobile #main-header #icon-contact-02 a:hover .nav-icon {
        background: #0000;
    }

    .mobile .btn:hover a {
        color: #000;
    } 

    .mobile .btn.blown:hover a {
        color: #fff;
    }
    
    .mobile .form-btn:hover,
    .mobile .btn-02:hover {
        color: #0000;
    }

}