@charset "UTF-8";

/*==================================================================================================

       header

===================================================================================================*/

header { position: relative; }
        .header-wrap {
        position: absolute;
        bottom:30px;
        right:30px;
        width:340px;
        height:340px;
        background: rgba(255,255,255,.95);
        z-index: 1000;
        }
        .header-wrap h1 {
        position: absolute;
        top:50%;
        left:50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        width:240px;
        line-height: 100%;
        }
        
        @media only screen and (max-width:1280px) {
        .header-wrap { width:26.5%; height:0; padding-bottom:26.5%; }
        .header-wrap h1 { width:70.5%;}
        }
        @media only screen and (max-width:767px) {
        .header-wrap { width:45%; height:0; padding-bottom:45%; bottom: auto; right: auto; top:15px; left:15px; }
        .header-wrap h1 { }
        }

/*==================================================================================================

       hero

===================================================================================================*/

.hero-img {
        position: relative;
        width:100%;
        height:100vh;
        background: url("../images/img_01.jpg") center center / cover;
        overflow: hidden;
        z-index: 0;
        }
        .hero-img:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height: 35%;
        background: rgb(255,255,255);
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        z-index: 1;
        opacity: 0;
        }
        .main-catch {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        max-width: 60%;
        padding:3%;
        box-sizing: border-box;
        color:#222222;
        text-shadow: #FFF 0 0 20px, #FFF 0 0 15px;
        z-index: 2;
        }
        .main-catch:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:1700px;
        height: 550px;
        background: url("../images/cover.png") bottom right / cover;
        opacity: 1;
        z-index: -1;
        }
        
        .hero-banner {
        position: absolute;
        bottom: 30px;
        left: 2%;
        max-width: 600px;
        width: 60%;
        z-index: 1;
        opacity: 1;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .hero-banner:hover { opacity: .6;}
        @media only screen and (max-width:767px) {
        .main-catch { max-width:100%; }
        .hero-img { height:100vh; }
        .main-catch { top:auto; bottom:1%; }
        .main-catch:after { display: none; }
        .hero-img:after { opacity: 1;}
        .hero-banner { bottom:150px; width:96%; }
        }

/*==================================================================================================

       背景

===================================================================================================*/

.section-01 {
        background: #222222;
        border-top:15px solid #8C7459;
        padding:50px 0;
        box-sizing: border-box;
        }
.section-02 {
        background: url("../images/bg_01.jpg") repeat;
        padding:6% 0;
        box-sizing: border-box;
        }
.section-03 {
        background: #222222;
        border-top:15px solid #8C7459;
        padding:6% 0;
        box-sizing: border-box;
        }
.section-04 {
        background: url("../images/bg_02.jpg") repeat;
        border-bottom:15px solid #8C7459;
        padding:6% 0;
        box-sizing: border-box;
        color:#222222;
        }
.bg-white { background: #FFF; color:#222; }
        .bg-white a { color:#222; }
        .bg-white a:hover { color:#777; }
.bg-gray  { background: #F3F3F3; color:#222; }
.cases {
        background: url("../images/bg_03.jpg") center center / cover;
        border-bottom:15px solid #8C7459;
        padding:6% 0;
        box-sizing: border-box;
        color:#EEE;
        }


.bg-img {
        width:100%;
        height: 0;
        }
        
        .img-01 { padding-bottom:640px; background: url("../images/img_02.jpg") center center / cover; }
        .img-02 { padding-bottom:550px; background: url("../images/img_03-1.jpg") center center / cover; }
        .img-03 { padding-bottom:370px; background: url("../images/img_03-2.jpg") center center / cover; }
        .img-04 { padding-bottom:570px; background: url("../images/img_04-1.jpg") center center / cover; }
        .img-05 { padding-bottom:520px; background: url("../images/img_04-2.jpg") center center / cover; }
        .img-06 { padding-bottom:570px; background: url("../images/img_05.jpg") center center / cover; }
        .img-07 { padding-bottom: 45%; background: url("../images/img_06-1.jpg") center center / cover; }
        .img-08 { padding-bottom: 45%; background: url("../images/img_07-1.jpg") center center / cover; }
        .img-09 { padding-bottom: 45%; background: url("../images/img_08-1.jpg") center center / cover; }
        
        @media only screen and (min-width:1800px) {
        .img-01 { padding-bottom:75%; }
        }
        @media only screen and (max-width:1024px) {
        .section-02 { padding:50px 0;}
        .section-03 { padding:50px 0;}
        .section-04 { padding:50px 0;}
        .cases { padding:50px 0;}
        .img-01 { padding-bottom:66%; }
        .img-02 { padding-bottom:66%; }
        .img-03 { padding-bottom:350px; }
        .img-04 { padding-bottom:60%; }
        .img-05 { padding-bottom:60%; }
        .img-06 { padding-bottom:400px; }
        }
        @media only screen and (max-width:767px) {
        .section-01 { padding:30px 0;}
        .section-02 { padding:30px 0;}
        .section-03 { padding:30px 0;}
        .section-04 { padding:30px 0;}
        .cases { padding:30px 0;}
        .img-03 { padding-bottom:60%; }
        .img-06 { padding-bottom:60%; }
        .img-07 { padding-bottom:60%; }
        .img-08 { padding-bottom:60%; }
        .img-09 { padding-bottom:60%; }
        }

/*==================================================================================================

       タイトル

===================================================================================================*/

.gold { color:#8C7459; font-weight:bold; }
        .gold.normal { font-weight: 400;}
        .op35 { opacity: .35; }
.line-title {
        border-left:3px solid #8C7459;
        border-bottom:1px solid rgba(140,116,89,.6);
        line-height: 180%;
        padding-left:.75rem;
        }
.negative-indent {
        margin-left: -0.5em;
        }
.label-title {
        line-height: 1;
        padding:.6em .75em;
        box-sizing: border-box;
        background: #8C7459;
        color:#EEE;
        }

/*==================================================================================================

       アイコン

===================================================================================================*/

.icon-before {
        width:23px;
        height:15px;
        display:inline-block;
        margin-right:.5rem;
        position: relative;
        top: .125rem;
        }
        .icon-dial    { background: url("../images/free-dial.svg") center center / cover; }


/*===================================================================================================

		contact

====================================================================================================*/

.marker { background:linear-gradient(transparent 60%, #dcd7c5 60%); }

.kome { font-size:12px; color:#ffb355; font-weight:bold; margin:0 .5rem;}

.contact-section { margin-bottom:3rem;}

.reservation-form {
        width:100%;
        margin:0 auto;
        box-sizing:border-box;
        font-family: 'Shippori Mincho', serif;
        }
        .reservation-form tr {
        line-height:150%;
        box-sizing:border-box;
        }
        .contact-title {
        background: rgba(0,0,0,.55);
        color:#FFF;
        padding:.875rem 1.25rem;
        line-height: 1;
        box-sizing: border-box;
        margin-bottom:.5rem;
        }
        .contact-detail {
        
        }
        .contact-detail p {
        padding-bottom:.5rem;
        }



.reservation-form input {
        width:100%;
        font-size:16px;
        box-sizing:border-box;
        background:#FFF;
        border:1px solid #acacac;
        padding:0.5em 2.5%;
        font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        }
        .reservation-form .file-data input {
        background:none;
        box-shadow: none;
        border:none;
        }
        .reservation-form .date-td input {
        width:18%;
        }
        .reservation-form .radio input {
        background:#FFF;
        border:none;
        }
.reservation-form .radio {
        padding: 21px 15px 15px;
        }
        .reservation-form .wpcf7-list-item {
        padding-right:2em;
        }
        .reservation-form .radio input {
        width:auto;
        margin-top: 4px;
        margin-right:.5rem;
        vertical-align: text-top;
        box-shadow: none;
        font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        }
.reservation-form select {
        width:100%;
        font-size:16px;
        box-sizing:border-box;
        background:#FFF;
        border:1px solid #acacac;
        padding:0.7em 2.5%;
        font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        }
.reservation-form textarea {
        width:100%;
        font-size:16px;
        box-sizing:border-box;
        background:#FFF;
        border:1px solid #acacac;
        padding:0.7em 2.5%;
        font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        }

.reservation-form_btn {
        text-align:center;
        margin:30px auto;
        width:300px;
        }
        html>/**/body #submit_button {
        cursor: pointer;
        display: block;
        color:#FFF;
        width: 300px;
        height: 52px;
        margin-left: auto;
        margin-right: auto;
        font-size:18px;
        font-family: 'Shippori Mincho', serif;
        border: none;
        border-radius: 0px;
        background-color:#8C7459;
        }
        html>/**/body #submit_button:hover {
        background-color:#666;
        }

@media only screen and (max-width: 767px) {
    .reservation-form th { width:100% !important; display: block !important; text-align: left; padding: .75rem 15px;}
    .reservation-form td { width:100% !important; display: block !important; padding: 15px 0;}
    .reservation-form input {width:100%;}
	.reservation-form .date-td input { width:15%;}
	.reservation-form select {width:100%;}
	.reservation-form textarea {width:100%;}
    .reservation-form td.radio { padding:15px; }
    .reservation-form td.radio input { margin-top: 2px;}
	.reservation-form_btn { width:100%; }
	html>/**/body #submit_button { width:100%; height:46px;	font-size:15px; }
	}


.addthis_tool { display: none !important;}

.pc-menu {
        position: fixed;
        right:0;
        top:60px;
        width:60px;
        z-index: 999;
        }
        .mobile-menu { display: none; }

        @media screen and (max-width: 767px) {
        .pc-menu { display: none; }
        .mobile-menu {
                display: block;
                position: fixed;
                bottom:0;
                left:0;
                width:100%;
                height:auto;
                z-index: 10000;
                }
        .mobile-btn {
                
                }
                
        }


/*==================================================================================================

       求人バナー

===================================================================================================*/
 
.flex-wrap {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content:center;
        align-items: center;
        align-content:stretch;
        display: -webkit-flex;
        -webkit-flex-direction: row;
        -webkit-flex-wrap: nowrap;
        }
        .flex-wrap.is-align-stretch { /* 上端揃え */
        align-items: stretch;
        }
        .flex-wrap.is-align-start { /* 上端揃え */
        align-items: flex-start;
        }
        .flex-wrap.is-align-end { /* 下端揃え */
        align-items: flex-end;
        }
        .flex-side-center { /* 子要素の左右の中央揃え IE一部バグあり */
        display: flex;
        justify-content: center;
        }
        .flex-wrap.is-between { /* 子要素の等間隔 + 両端揃え */
        justify-content: space-between;
        }
        .flex-wrap.is-content-start { /* 子要素の等間隔 + 両端揃え */
        justify-content: flex-start;
        }
        .flex-wrap.is-content-center { /* 子要素の等間隔 + 中央揃え */
        justify-content: center;
        }
        .flex-wrap.is-wrap { /* 子要素折り返し */
        flex-wrap: wrap;
        }
    
        /* **** 子要素 **** */
        .flex {
        flex: none;
        display: block;
        flex-basis: auto;
        flex-grow: 1;
        flex-shrink: 1;
        width: 100%;
        min-width:0;
        box-sizing: border-box;
        }

        .column .inner { width:100%;}
        .vertical-center {
        display: flex;
        align-items: center;
        }
        .reverse-row-order {
        flex-direction: row-reverse;
        }




        .banner-wrap {
        border-top: 6px solid #8C7459;
        }
        .banner-text-wrap {
        position: relative;
        width:500px;
        max-width:500px;
        min-width:500px;
        }
        .banner-text {
        position:absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width:100%;
        }
        .banner-img {
        width:100%;
        height: 0;
        padding-bottom:550px;
        background: url("../images/banner-recruit.jpg") center center / cover;
        }
        @media screen and (max-width: 1270px) {
        .banner-text-wrap { width:400px; max-width:400px; min-width:400px; }
        .banner-img { padding-bottom:425px; }
        }
        @media screen and (max-width: 1024px) {
        .is-flex-tablet { -webkit-flex-direction: column; flex-direction: column; flex: none; display: block; }
        .is-flex-tablet .flex { margin-right:0 !important; margin-left:0 !important; max-width:100% !important; min-width:100% !important;}
        .banner-text { position: relative; top:auto; left:auto; transform: translate(0); padding:0 0 2.5rem 0; margin-top:-2em;}
        .banner-img { padding-bottom:40%; }
        }
        @media screen and (max-width: 767px) {
        .is-flex-mobile { -webkit-flex-direction: column; flex-direction: column; flex: none; display: block; }
        .is-flex-mobile .flex { margin-right:0 !important; margin-left:0 !important; max-width:100% !important; min-width:100% !important;}
        .banner-img { padding-bottom:60%; }
        }



/*==================================================================================================

       フッター

===================================================================================================*/

footer {
        width:100%;
        line-height: 180%;
        position: relative;
        background:#222;
        border-top:6px solid #8C7459;
        font-size:1rem;
        z-index: 0;
        }
        .footer-section {
        padding:5rem 0;
        border-bottom:1px solid #707070;
        }
        .footer-section:last-child { border-bottom:none; padding-bottom: 4rem; }

        .footer-logo {
        width:100%;
        max-width:240px;
        }
        .copyright {
                position: relative;
                z-index: 100;
                text-align:center;
                letter-spacing:0;
                line-height: 80px;
                height:80px;
                color:#FFF;
                width:100%;
                font-size:.825rem;
                }

        @media only screen and (max-width: 767px) {
        .footer-logo { width:210px; margin: 0 auto; }
        }


/*=================================================

		ページトップ

 ==================================================*/

#totop {
	display:none;
	*display:block; /* IE 7 and below */
	position:fixed;
	bottom:0;
	right:0px;
	z-index:999;
	}
    :root *> #totop { display:none;	}
    #totop { display:block; }
    *+html #totop { display:block; }
    #totop.open { display:block; }
    a.totop{ background: #8C7459; width:60px;height:60px; display:block; cursor:pointer; text-align: center; color:#FFF; font-size:13px; line-height: 125%; position: relative; }
    a.totop p { position: absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
    a.totop:hover{ background-position:center bottom;}

@media only screen and (max-width: 767px) {
    #totop { bottom:60px; right:5px;}
	a.totop{ width:55px;height:55px; font-size:10px;
    background: rgba(140,116,89,.3);
    color:#FFF;
    border-radius:         50%;
    moz-border-radius:     50%;
    -webkit-border-radius: 50%;
    -o-border-radius:      50%;
    -ms-border-radius:     50%;
    }
}