/*=============================================================
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;
}

.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-little-plus {
    margin-bottom: 10px;
}

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

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

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

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;
}

#wrapper {
    max-width: 500px;
    margin: 0 auto;
    overflow: hidden;
}

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

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

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

#visual #icon-scroll {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    text-align: center;
    line-height: 0;
    margin-bottom: 0;
}

#visual #icon-scroll img {
    width: 90px;
}

#bg {
    position: fixed;
}

.mass {
    padding: 80px 0;
}

.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: #B4B4B4;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.white-base {
    background-color: #fff;
}

.red-base {
    background-color: #BA0000;
}

.white {
    color: #fff;
}

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

.inner-divi {
    width: 90%;
    margin: 0 10% 0 0;
}

.tit-01 {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 25px;
    letter-spacing: 4px;
}

.tit-02 {
    margin-bottom: 35px;
    font-size: 24px;
    letter-spacing: 4px;
    font-weight: 700;
}

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

.sub-tit {
	font-family: "Noto Sans JP", sans-serif;
    margin-bottom: 15px;
    font-size: 28px;
	font-weight: bold;
}

.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;
}


.single-img,
.three-img {
    margin-bottom: 50px;
    text-align: center;
}

.single-img img {
    width: 58%;
    max-width: 700px;
}

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

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

.box-divi {
    width: 68%;
}


/*
* 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 800ms;
    transform: translateY( 20px );
    opacity: 0;
}

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

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

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

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

.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 {
    transform: translateY( 0 );
    opacity: 0.99999;
}

/*
* .btn
*/


.btn {
	width: 300px;
	height: 60px;
	text-align: center;
	margin: 0 auto;
    position: relative;
    display: block;
    background-color: #BA0000;
	border: 2px solid #000;
	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;
}


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

#main-header {
    position: relative;
}

#header-box {
    width: 100%;
    max-width: 500px;
    height: 80px;
    position: fixed;
    z-index: 10;
    background-color: #fff;
    box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);
}

#main-header h1 {
    width: 209px;
    position: relative;
    top: 17px;
    left: 10px;
    z-index: 1;
}

#nav-wrapper {
    width: 100%;
    position: relative;
}

#nav-box {
    width: 100%;
    max-width: 500px;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: #BA0000;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all ease 500ms;
}

#nav-box ul li a {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: 25px;
    line-height: 2.5em;
    letter-spacing: 6px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.nav-on #nav-box {
    opacity: 0.99999;
    visibility: visible;
}

/* nav button*/
	
#icon-nav,
#icon-contact {
	width: 80px;
	height: 80px;
    position: absolute;
	top: -50px;
}

#icon-nav {
    right: 0;
    background: #000;
    z-index: 11;
    transition: all ease 300ms;

}

#icon-nav span {
    display: block;
    position: absolute;
    top: 30px;
    left: 25px;
    width: 30px;
    height: 1px;
    background: #fff;
    transition: all ease 500ms;
}

#icon-nav span:nth-of-type(2) {
    top: 40px;
}

#icon-nav span:nth-of-type(3) {
    top: 50px;
}

.nav-on #icon-nav span {
    top: 40px;
}

.nav-on #icon-nav {
    background-color: #fff;
}

.nav-on #icon-nav span {
    background: #000;
}

.nav-on #icon-nav span:nth-of-type(1) {
    transform: rotate(135deg);
}

.nav-on #icon-nav span:nth-of-type(2) {
    opacity: 0;
    visibility: hidden;
}

.nav-on #icon-nav span:nth-of-type(3) {
    transform: rotate(-135deg);
}

#icon-contact {
    right: 80px;
    background: #BA0000;
    z-index: 10;
}

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

#main-footer {
    width: 100%;
    padding: 30px 0 20px;
    background-color: #BA0000;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-footer p {
    font-size: 14px;
    text-align: center;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 8px;
    font-weight: bold;
}

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


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

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

#home #loading-layer {
    background: #fff;
}

#home #visual {
    margin: 80px 0 0;
}

/*  contents */

#home h2 {
    margin-bottom: 30px;
}

#home h2 img {
    width: 280px;
}

#home #part-why-isuzu img,
#home #part-work img {
    margin-bottom: 20px;
}

.under-line {
    text-decoration: underline;
    text-underline-offset: 5px;
}

p.mb-0 {
    margin-bottom: 0;
}




/*=============================================================
05. #contact and #mail common style
=============================================================*/

.form-btns-wrapper {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.form-btn {
    width: 30%;
    padding: 18px 0;
    border: solid 1px #000;
    margin: 0 5px;
    background: none;
    border-radius: 500px;
    cursor: pointer;
    color: #000;
    font-size: 18px;
    transition: all ease 350ms;
}

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

/*=============================================================
06. contact
=============================================================*/


#part-contact .mark,
#part-contact .mark-any {
    font-size: 15px;
    padding: 10px;
    background-color: #BA0000;
    color: #fff;
    font-weight: 600;
    font-family: "M PLUS 1", sans-serif;
    letter-spacing: 2px;
    margin-right: 20px;
    box-sizing: border-box;
}

#part-contact .mark-any {
    background-color: #898989;
}

#part-contact table.formTable {
	width:100%;
	margin:0 auto 50px;
}

#part-contact table.formTable tr:nth-of-type( 1 ) {
    border-top: solid 1px rgba(36, 25, 25, 0.3);
}

#part-contact table.formTable tr:nth-of-type( 1 ) td label {
    margin-right: 20px;
}

#part-contact .formTable input[type=checkbox] {
    accent-color: #000;
}

#part-contact table.formTable th {
	font-weight:normal;
	text-align:left;
}

#part-contact table.formTable td .note-01 {
    text-indent: 1.5em;
    margin: 10px 0 8px;
}

#part-contact .formTable input[type="text"],
#part-contact .formTable textarea {
    padding: 10px;
    font-size: 17px;
    border: solid 2px #000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

#part-contact .formTable textarea {
    width: 100%;
    font-weight: normal;
    line-height: 1.6;
    letter-spacing: 2px;
}

#part-contact .formTable input[type="text"] {
    width: 100%;
}

#part-contact .ta-c p {
    text-align: left;
}

#part-contact .foot-massage {
    text-align: left;
}

.form-btn {
    width: 100%;
    margin: 0;
}

.form-btn:last-of-type {
    margin-top: 10px;
}

#part-contact table.formTable tr:last-of-type {
    border-bottom: none;
}

#part-contact table.formTable tr:last-of-type td {
    padding-bottom: 0;
}

#part-contact table.formTable th,
#part-contact table.formTable td {
    display: block;
    width: 100%;
}

#part-contact table.formTable th {
    padding: 20px 0 5px 0;
}

#part-contact table.formTable td {
    padding: 0 0 25px 0;
}

#part-contact table.formTable tr.padding-fix td,
#part-contact table.formTable th.padding-fix th {
    padding: 0 0 10px 0;
}

/*=============================================================
09. mail
=============================================================*/


#mail #contents {
    padding-top: 140px;
}

#mail .inner {
    text-align: center;
}

#mail #main-footer {
    border-top: none;
}

#mail #formWrap {
	margin: 0 auto 50px;
}

#mail table.formTable {
	width: 100%;
	margin: 0 auto 50px;
	border-collapse: collapse;
}

#mail table.formTable td,
#mail table.formTable th {
	border: 1px solid #000;
	padding: 20px;
	text-align:left;
}

#mail table.formTable th {
	width:30%;
	font-weight:normal;
}

#mail .box-errm {
    margin-bottom: 30px;
}

#mail p.bb,
#mail p.error_messe{
	padding: 20px 0;
    border-bottom: solid 1px #000;
    margin-bottom: 0;
}

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

/*=============================================================
10. thanks
=============================================================*/



#thanks #thanks-msg {
    width: 50%;
    max-width: 500px;
    box-shadow: 0 0 10px rgba(48, 44, 44, 0.2);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#thanks #thanks-msg .tit-01 {
    padding: 30px 0;
    margin-bottom: 0;
    background: #BA0000;
    color: #fff;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    line-height: 1.2;
}

#thanks #thanks-msg .box-text {
    padding: 25px 30px 30px 30px;
    background: rgba( 255,255,255,0.7 );
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

#thanks #thanks-msg .btn {
    display: block;
	font-size: 1.6rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 2.8;
	color: #BA0000;
	transition: all ease 500ms;
    cursor: pointer;
    font-family: "Noto Sans JP", sans-serif;;
}

#thanks #main-footer {
    width: 100%;
    padding: 30px 0;
    background-color: #fff;
    border-top: none;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    z-index: 1;
}

#thanks #main-footer div {
    display: none;
}

/*=============================================================
11. mobile
=============================================================*/

.mobile #main-header #icon-contact a .nav-icon,
.mobile #main-header #icon-contact-02 a .nav-icon,
.mobile .btn,
.mobile .btn.blown,
.moble .btn-02,
.mobile .form-btn {
    transition: none;
}

.mobile .btn {
    background: #fff;
}

.mobile .btn.blown {
    background-color: #5c1c1c;
}

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



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


    #home #visual {
        background-image: url( /common/img/home/visual-portrait.jpg );
    }

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

}

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

    #thanks #thanks-msg {
        width: 54%;
    }

}



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

	.pc-alt {
		display: none;
    }

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

    body {
        font-size: 17px;
    }

    #visual {
        margin-bottom: 35px;
    }

    #visual #icon-scroll img {
        width: 74px;
    }



    /* CONTACT */

    #part-contact .single-img {
        width: 60%;
    }



    #mail #contents {
        padding-top: 96px;
    }

    #mail .inner {
        text-align: left;
    }

    #mail .tit-01.mb-super-minus {
        margin-bottom: 18px;
    }

    #mail table.formTable {
        margin-bottom: 45px;
    }

    #mail table.formTable th,
    #mail table.formTable td {
        display: block;
        width: 100%;
        padding: 17px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    #mail table.formTable th {
        border-bottom:0;
    }

    #mail table.formTable tr {
        display: block;
        margin-bottom: 18px;
    }

    #part-contact table.formTable tr:nth-of-type( 1 ) th {
        margin-bottom: 10px;
    }

    #mail table.formTable tr:last-of-type {
        margin-bottom: 0;
    }

    #mail input[type="submit"],
    #mail input[type="reset"],
    #mail input[type="button"] {
        display:block;
        width:100%;
    }

    #thanks #thanks-msg {
        width: 93%;
    }

    #thanks #thanks-msg .box-text {
        padding: 18px 25px 25px 25px;
    }

    #thanks #thanks-msg .tit-01 {
        padding: 20px 0;
        font-size: 24px;
    }

    #thanks #thanks-msg p {
        font-size: 16px;
    }

    #thanks #main-footer {
        padding: 20px 0;
    }

}



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


    #thanks #thanks-msg .tit-01 {
        padding: 16px 0;
        font-size: 20px;
    }

    #thanks #thanks-msg p {
        font-size: 14px;
        letter-spacing: 1px;
    }

    #thanks #thanks-msg .btn-02 {
        padding: 10px 0;
    }

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

    #thanks #main-footer {
        padding: 13px 0;
    }

}

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

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

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

/*=============================================================
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: #BA0000;
    }
    
    .btn:hover a {
        color: #fff;
    }

    .mobile .btn:hover a {
        color: #BA0000;
    } 
    
    .mobile .form-btn:hover,
    .mobile .btn-02:hover {
        color: #BA0000;
    }

}