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

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

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

.pages #bg-wrapper {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.pages #visual-bg,
.pages #visual-bg-landscape,
.pages #visual-bg-portrait {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all ease 500ms;
    transition-delay: 500ms;
    transform: scale( 1.23 );
}

.pages.loaded #visual-bg,
.pages.loaded #visual-bg-landscape,
.pages.loaded #visual-bg-portrait {
    transform: scale( 1.00001 );
}

.pages #visual::before,
.pages #visual::after {
    display: block;
    content: "";
    width: 100%;
	height: 50%;
    background: #fed931;
    position: absolute;
    left: 0;
    z-index: 3;
    transition: all ease 600ms;
    transition-delay: 300ms;
}

.pages #visual::before {
	top: 0;
}

.pages #visual::after {
	bottom: 0;
}

.pages.loaded #visual::before,
.pages.loaded #visual::after {
	height: 0;
    visibility: 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;
}

.pages #visual #title-asset {
    width: 100%;
    z-index: 2;
    text-align: center;
    font-style: italic;
    line-height: 1;
    overflow: hidden;
}

.pages #visual #title-asset h1,
.pages #visual #title-asset p {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

.pages #visual #title-asset h1,
.pages #visual #title-asset p {
    padding: 4px 0;
}

.pages #visual #title-asset h1 {
    font-size: 6vw;
    color: #fff;
}

.pages #visual #title-asset p {
    font-size: 3vw;
    color: #fff;
    letter-spacing: 2px;
    margin-top: 10px;
}


.pages #visual #title-asset h1 span,
.pages #visual #title-asset p span {
    display: inline-block;
    padding: 0 0.4em;
    font-weight: 700;
    transition: all ease 400ms;
    transition-delay: 500ms;
    opacity: 0;
    overflow: hidden;
}

.pages #visual #title-asset h1 span {
    transform: translateX( -8% );
}

.pages #visual #title-asset p span {
    transform: translateX( 8% );
}

.pages.loaded #visual #title-asset h1 span,
.pages.loaded #visual #title-asset p span {
    transform: translateX( 0 );
    opacity: 0.99999;
}

.mass {
    padding: 50px 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: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

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

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

/* font-style */

.tit-01 {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    margin-bottom: 30px;
    font-size: 35px;
    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;
}

.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: 2rem;
    line-height: 1.4;
    padding: 20px 0;
}

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

.yellow {
    color: #fed931;
    font-weight: bold;
    font-size: 1.5rem;
}



/*
 * .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: 40%;
}

.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: 55%;
	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 700ms;
    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: #000;
    border: 2px solid #000;
	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.black-base {
    background-color: #000;
    color: #fff;
}

.mass.yellow-base {
    background-color: #fed931;
}


/*=============================================================
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: #3add8a;
    transition: all ease 200ms;
}

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

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

#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: #d48702;
}

#main-header #nav-wrapper {
    width: 100%;
    height: 100%;
    background-color: #fed931;
    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-img,
#main-header #nav-wrapper #box-nav {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-header #nav-wrapper .box-img {
    background-image: url( /common/img/shared/nav-bg.jpg?v01 );
    left: 50%;
}

#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: 50%;
    top: 50%;
    background-color: #fff;
    border-radius: 30px;
    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;
}

#main-header #nav-wrapper #box-nav ul li a::before {
    background: #000;
}

#main-header #nav-wrapper #box-nav ul li a::after {
    width: 0;
    background: #ff6600;
    transition: all ease 300ms;
}

#main-header #nav-wrapper #box-nav ul li a:hover::after {
    width: 100%;
}

#main-header #nav-wrapper #box-nav ul li:last-of-type a::before,
#main-header #nav-wrapper #box-nav ul li:last-of-type a::after {
    display: none;
}



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

#main-footer {
    padding: 30px 0;
    background-color: #000;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}


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

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


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

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

/* visual-loading */

#loading-layer {
    width: 100%;
    height: 100%;
    background: url(/common/img/home/loading-bg.jpg) center center / cover no-repeat;
    transition: all ease 800ms;
    transition-delay: 3000ms;
    position: relative;
    top: 0;
    left: 0;
    z-index: 30;
}

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

#home .load-copy {
    z-index: 30;
    color: #fff;
    font-weight: bolder;
    position: absolute;
    transition: all ease 700ms;
    transition-delay: 2300ms;

}

#home.loaded .load-copy {
    opacity: 0;
}

#letters-flow-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
}

#letters-flow-wrapper .letters-flow-inner {
    display: flex;
    padding: 10px  0;
}

#letters-flow-wrapper .letters-flow {
	width: 100vw;
    padding-right: 5px;
    animation: letters-flow 50000ms infinite linear 500ms both;

}


@keyframes letters-flow {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}



/* contents */

#home #visual {
    background-color: #fed931;
    margin-bottom: 0;
}

#home #visual #box-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 0%;
    z-index: 1;
	opacity: 0;
	transition: all ease 500ms;
	transition-delay: 3200ms;

}

#home.loaded #visual #box-logo {
    width: 60%;
	opacity: 0.99999;
}

/*  contents */

#home-nav.mass {
    padding: 50px 0;
}

#home-nav ul {
    width: 100%;
    display: flex;
    column-gap: 5%;
}

#home-nav ul li {
    padding: 10px 50px;
    background-color: #fff;
    box-sizing: border-box;
    border:  2px #000 solid;
}

#home-nav ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
}

#home-nav ul li a img {
    width: clamp(100px, 100%, 100%)
}


.home-h1 {
    width: 70%;
    margin: 0 auto;
}

#home #part-about .row {
    margin-top: 30px
}

#home #part-about .box-img {
    background: url(/common/img/home/img-01.jpg) no-repeat top center / cover;
}

#home #part-feature {
    overflow: hidden;
}

#home #part-feature .row.divi.img-right {
    margin-top: 70px;
}

#home #part-feature .tit.left,
#home #part-feature .tit.right {
    position: absolute;
    z-index: 2;
    width: 60%;
    transition: all ease 500ms;
    opacity: 0;
}


#home #part-feature .tit.left.elem-01 {
    top: -80px;
    left: 0;
    transform: translateX( -100px );
}
#home #part-feature .tit.right.elem-03{
    top: -80px;
    right: 0;
    transform: translateX( 100px );
    transition-delay: 500ms;
}
#home #part-feature .tit.left.elem-05 {
    top: -80px;
    left: 0;
    transform: translateX( -100px );
    transition-delay: 1200ms;
}

#home #part-feature.active .tit.left {
    opacity: 0.9999;
    transform: translateX( 0 );
}

#home #part-feature.active .tit.right {
    opacity: 0.9999;
    transform: translateX( 0 );
}

#home #part-feature .box-img {
    width: 55%;
}

#home #part-feature .box-text {
    width: 35%;
    padding: 12% 3% 10%;
} 

#home #part-feature .row.divi.img-right .box-text {
    margin-left: 20px;
}

#home #part-feature .row.divi.img-left .box-text {
    width: 35%;
    margin-right: 20px;
    padding: 12% 3% 10%;
}

#home #part-feature .contents:nth-of-type( 3 ) .row.divi.img-right .box-text {
    padding: 12% 3% 2%;
}

#home #part-feature .box-text p {
    line-height: 2;
}

#home #part-feature .contents {
    position: relative;
    margin-bottom: 90px;
}

#home #part-feature .contents:nth-of-type( 1 ) .box-img {
    background: url(/common/img/home/feature-01.jpg) no-repeat top center / cover;
}

#home #part-feature .contents:nth-of-type( 2 ) .box-img {
    background: url(/common/img/home/feature-02.jpg) no-repeat top center / cover;
}

#home #part-feature .contents:nth-of-type( 3 ) .box-img {
    background: url(/common/img/home/feature-03.jpg) no-repeat top center / cover;
}



#home #part-example .scroll-infinity {
    margin: 10px 0 50px;
}

.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
    margin-bottom: 10px;
}

.scroll-infinity__item {
    width: calc(100vw / 5);
    padding-right: 5px;
}

.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
}

.scroll-infinity__list--left {
    animation: infinity-scroll-left 50000ms infinite linear 500ms both;
}

@keyframes infinity-scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.scroll-infinity__list--right {
    animation: infinity-scroll-right 50000ms infinite linear 500ms both;
}

@keyframes infinity-scroll-right {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}


#home #part-contact .home-h1 {
    margin-bottom: 20px;
}

#home #part-contact .tel {
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    display: block;
    margin: 30px 0;
}


/*=============================================================
05. #about
=============================================================*/

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

#about #bg {
    background-color: #fff;
}

#about .box-simple-img {
    width: 60%;
    margin: 0 auto 30px;
}

#about #part-02 dl {
    padding-top: 20px;
    border-top: solid 1px rgba( 28,59,149,0.3 )
}

#about #part-02 dd {
    font-weight: bold;
}

#about #part-02 dl dt {
    font-size: 24px;
}

#about #part-02 dl dd span {
    font-weight: normal;
    font-size: 15px;
}

#about #part-02 dl dd {
    padding-bottom: 20px;
    border-bottom: solid 1px rgba( 28,59,149,0.3 );
    margin-bottom: 20px;
}

#about #part-02 .row.divi:nth-of-type( 2 ) .box-text {
    margin-left: 5%;
}

#about #part-02 .row.divi:nth-of-type( 1 ) .box-img {
    background-image: url( /common/img/about/img-02.jpg?v01 );
}

#about #part-02 .row.divi:nth-of-type( 2 ) .box-img {
    background-image: url( /common/img/about/img-03.jpg?v01 );
}

/*=============================================================
05. #example
=============================================================*/

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

#example #bg {
    background-color: #fed931;
}

#example .tit-01 {
    margin-bottom: 0;
}

#example .tit-01.mb-plus {
    margin-bottom: 50px;
}

#example .light-box-list li,
#example .light-box-list li a {
    display: block;
}

#example .light-box-list li a {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#example .light-box-list li a span,
#example .light-box-list li a span::before {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all ease 300ms;
    overflow: hidden;
}

#example .light-box-list li a span {
    background: rgba(38, 33, 28, 0.6);
    opacity: 0;
}

#example .light-box-list li a:hover span {
    opacity: 0.99999;
}

#example .light-box-list li a span::before {
    content: "";
    background: url( /common/img/example/icon-zoom.png ) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    transform: scale( 0.4 );
}

#example .light-box-list li a:hover span::before {
    transform: scale( 0.8 );
}

#example .light-box-list li {
    width: 33.33333%;
    padding: 0 1%;
    margin-bottom: 2%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left
}


/*=============================================================
05. #form
=============================================================*/

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

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

.form-btn:hover {
    background: #fff100;
    color: #000;
}

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

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

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

#contact #formWrap {
    width: 80%;
    margin: 0 auto;
}


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

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

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

#contact table.formTable td,
#contact table.formTable th {
	padding: 30px 10px 15px 30px;
}

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

#contact table.formTable th {
	width: 10em;
	font-weight:bold;
	text-align:left;
}

.red {
    color: #fb0e02;
}


#contact table.formTable td .note-01 {
    margin: 10px 0 8px;
}

#contact .formTable input[type="text"],
#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;
}

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

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

/*=============================================================
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 #784739;
	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 #784739;
    margin-bottom: 0;
}

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

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

#thanks #wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #fed931;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#thanks #thanks-msg {
    width: 50%;
    max-width: 640px;
    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: #000;
    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: #fff;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}


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

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


/*=============================================================
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 {
        background-image: url( /common/img/home/visual-portrait.jpg );
    }

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

}

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

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


}

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


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

    #mail table.formTable th {
        width: 10em;
    }

    .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 {
        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%;

    }

    #loading-layer {
            background: url(/common/img/home/loading-bg.jpg) right center / cover no-repeat;

    }

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

    #home .load-copy {
        width: 70%;
    }

    #home.loaded #visual #box-logo {
        width: 70%;
    }

    #home #part-feature .contents {
        margin-bottom: 60px;
    }

    #home #part-feature .row.divi.img-right .box-img,
    #home #part-feature .row.divi.img-left .box-img,
    #home #part-feature .row.divi.img-right .box-text,
    #home #part-feature .row.divi.img-left .box-text {
        width: 100%;
    }

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

    #home #part-feature .row.divi.img-right .box-img,
    #home #part-feature .row.divi.img-left .box-img {
        margin-bottom: 20px;
    }


    #home #part-feature .tit.left,
    #home #part-feature .tit.right {
        width: 100%;
        position: relative;
        margin-bottom: 10px;
    }

    #home #part-feature .row.divi.img-right,
    #home #part-feature .row.divi.img-left {
        margin-top: 0;
    }

    #home #part-feature .tit.left.elem-01,
    #home #part-feature .tit.left.elem-02,
    #home #part-feature .tit.right.elem-03,
    #home #part-feature .tit.left.elem-05 {
        top: 0;
    }

    #home #part-feature .contents:nth-of-type( 3 ) .row.divi.img-right .box-text {
        padding: 0;
    }


    #home #part-feature .box-img {
        margin-bottom: 20px;
    }

    #home #part-feature .box-text {
        margin-bottom: 50px;
    }

    .scroll-infinity__item {
        width: calc(100vw / 4);
    }

    


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

    .form-btn {
        width: 40%;
    }

    .left,.right {
        float: none;
        width: 100%;
    }


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

    #contact table.formTable td,
    #contact table.formTable th {
        padding: 30px 0;
    }

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

}

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

    .tit-01 {
        font-size: 31px;
        line-height: 1.4;
    }

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

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

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

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

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

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

    .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-img,
    .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: 70%;
    }

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

    #about #part-02 .row.divi:nth-of-type( 2 ) .box-text {
        margin-left: 0;
    }

        #main-header #icon-menu, 
    #main-header #icon-close {
        top: 4px;
        right: 4px;
    }

    #main-header #icon-tel {
        top: 4px;
        right: 85px;
    }

    #main-header #nav-wrapper #box-nav .central {
        width: 80%;
    }

    #home.loaded #visual #box-logo {
        width: 94%;
    }

    #loading-layer {
            background: url(/common/img/home/loading-bg_sp.jpg) center center / cover no-repeat;
    }

    #home .load-copy {
        width: 95%;
    }

    #letters-flow-wrapper .letters-flow {
        width: 250vw;
    }

    .home-h1 {
        width: 100%;
    }

    #home #part-about .box-img {
        margin-bottom: 0;
    }

    #home #part-feature .contents:nth-of-type( 3 ) {
        margin-bottom: 0;
    }

    .scroll-infinity__item {
        width: calc(100vw / 2);
    }

    

    /* CONTACT */

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

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

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

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

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

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

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


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

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

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

    #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: 570px) {

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

    .inner {
        width: 90%;
    }



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

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

    #home #part-about h2.bold {
        font-size: 1.7rem;
    }



}

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

    #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: #fff100;
    }
    
    .btn:hover a {
        color: #000;
    }


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

}