@charset "utf-8";
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    line-height: 1.5em;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; /*adobeフォントが使えないとき用*/
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 400;
    font-style: normal;
}
body{
    background: #e2e4de;
    font-size: 14.5px;
}
body.thanks_body{
    background: #fff;
}
.mincho{ 
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; /*adobeフォントが使えないとき用*/
    font-family: "a-otf-ryumin-pr6n", serif;
    font-weight: 300;
    font-style: normal;
}
.gothic{ 
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; /*adobeフォントが使えないとき用*/
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 400;
    font-style: normal;
}
img{ border:none; max-width:100%; }
a{ color:#335e80; text-decoration:none; transition: 0.3s; }
a:hover{ color:#467aa2; transition: 0.3s; }
ul, ol{ list-style:none; }
.sp{ display:none; }

@media screen and (max-width: 640px){
            *{ font-size: 3.7vw; }
            .pc{ display:none; }
            .sp{ display:inherit; }
}



.title_en{
    border-bottom: 1px #000 solid;
    line-height: 1.8em;
    font-size: 14px;
    margin-bottom: 35px;
}
.title_ja{
    font-size: 25px;
    margin-bottom: 30px;
}
@media screen and (max-width: 640px){
            .title_en{
                border-bottom: 1px #000 solid;
                font-size: 3.4vw;
                margin-bottom: 35px;
            }
            .title_ja{
                font-size: 6vw;
            }
}



.main_content {
  background-image: url('../images/content_back.jpg');
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.main_content.thanks_main_content{
    background: none;
}
.main_content .w1200{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
@media screen and (max-width: 1000px){
            .main_content .w1200{
                padding: 0 20px;
            }
}
@media screen and (max-width: 640px){
            .main_content .w1200{
                max-width: 94%;
                padding: 0;
            }
}




#fixed_contact_banner{
    position: fixed;
    z-index: 999;
    right: 0;
    bottom: 0;
    width: 270px;
    line-height: 0;
}
@media screen and (max-width: 1000px){
            #fixed_contact_banner{
                width: 200px;
            }
            #fixed_contact_banner .pc{
                display: none;
            }
            #fixed_contact_banner .sp{
                display: inherit;
            }
}
@media screen and (max-width: 640px){
            #fixed_contact_banner{
                width: 160px;
            }
}




#top_block{
    position: relative;
    background:url(../images/top_back.jpg) center/cover no-repeat;
    height: 770px;
    width: 100%;
}
#top_block .w1200{
    position: relative;
    max-width: 1200px;
    height: 770px;
    margin: 0 auto;
    padding: 12px 40px;
}
#top_block .w1200 .logo{
    width: 75px;
}
#top_block .w1200 .text_block{
    position: absolute;
    color: #fff;
    bottom: 150px;
    left: 40px;
    width: 550px;
    font-size: 24px;
    letter-spacing: 1px;
}
#top_block .w1200 .text_block .space{
    height: 1.7em;
    width: 1px;
}
#top_block .w1200 .text_block hr{
    display: block;
    margin: 1.2em 0 0.2em 0;
}
#top_block .w1200 .text_block .min{
    font-size: 14px;
}
#top_block .plant{
    width: 180px;
    position: absolute;
    bottom: 20px;
    right: 100px;
} 

@media screen and (max-width: 1000px){
            #top_block{
                height: 650px;
            }
            #top_block .w1200{
                height: 650px;
            }
            #top_block .w1200 .text_block{
                width: 400px;
                font-size: 22px;
                bottom: 60px;
            }
            #top_block .plant{
                width: 150px;
                right: 40px;
                bottom: 60px;
            } 
}

@media screen and (max-width: 640px){
            #top_block{
                height: 172vw;
                max-height: 800px;
            }
            #top_block .w1200{
                height: 172vw;
                max-height: 800px;
                padding: 0;
            }
            #top_block .w1200 .logo{
                width: 60px;
                margin: 4%;
            }
            #top_block .w1200 .text_block{
                bottom: 17vw;
                left: 4%;
                width: 92%;
                font-size: 6.1vw;
            }
            #top_block .w1200 .text_block .space{
                height: 2em;
            }
            #top_block .w1200 .text_block .min{
                font-size: 3.3vw;
            }
}




.introduce{
    width: 450px;
}
@media screen and (max-width: 640px){
            .introduce{
                width: 100%;
            }
}






#feeling{
    background: #fff;
    padding-top: 240px;
}
#feeling .feeling_inner{
    background: #e2e4de;
    padding: 60px 0 70px 0;
}
#feeling .feeling_inner .w1200{
    position: relative;
}
#feeling .feeling_img{
    position: absolute;
    max-width: 670px;
    width: calc(100% - 530px);
    top: -190px;
    right: 0;
}
@media screen and (max-width: 880px){
            #feeling .introduce{
                width: 100%;
            }
            #feeling .feeling_img{
                width: 400px;
                top: -200px;
            }
}
@media screen and (max-width: 640px){
            #feeling{
                padding-top: 80px;
            }
            #feeling .feeling_inner{
                padding: 50px 0 80px 0;
            }
}




.feeling-about_us{
    display: none;
}
@media screen and (max-width: 1100px){
            .feeling-about_us{
                display: block;
                height: 400px;
                width: 100%;
                background-image: url('../images/content_back.jpg');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }
}
@media screen and (max-width: 640px){
            .feeling-about_us{
                height: 85vw;
            }
}




#about_us{
    margin-top: 600px;
    background: #f7f8f6;
    padding-bottom:55px;
}
#about_us .w1200{
    max-width: 1120px;
    position: relative;
    top:-80px;
    background: #fff;
    padding: 70px 100px;
}
#about_us .introduce{
    width: 600px;
    position: relative;
    z-index: 2;
}
#about_us .plant{
    position: absolute;
    z-index: 1;
    bottom:80px;
    right: 30px;
    width: 125px;
}
@media screen and (max-width: 1100px){
            #about_us{
                margin-top: 0;
            }
            #about_us .w1200{
                max-width: 90%;
            }
}
@media screen and (max-width: 900px){
            #about_us .w1200{
                padding: 70px;
            }
            #about_us .introduce{
                width: 100%;
            }
}
@media screen and (max-width: 700px){
            #about_us .w1200{
                padding: 70px 50px;
            }
}
@media screen and (max-width: 640px){
            #about_us{
                padding-bottom:25px;
            }
            #about_us .w1200{
                max-width: 94%;
                top:-22vw;
                padding: 15vw 4vw;
            }
            #about_us .introduce{
                width: 100%;
            }
}




#architect{
    background: #586056;
    color: #fff;
    padding: 100px 0;
}
#architect .w1200{
    max-width: 850px;
}
#architect .title{
    font-size: 23px;
    line-height: 1.8em;
    border-bottom: 1px #fff solid;
    margin-bottom: 35px;
}
#architect .block{
    font-size: 0;
}
#architect .block .left{
    display: inline-block;
    width: 49%;
    padding-right: 25px;
    vertical-align: top;
}
#architect .block .left img:first-child{
    display: block;
    margin-bottom: 20px;
}
#architect .block .left div{
    font-size: 12px;
}
#architect .block .right{
    display: inline-block;
    width: 51%;
    vertical-align: top;
    font-size: 1rem;
}
#architect .block .right .belong{
    margin-bottom: 10px;
}
#architect .block .right .name_en{
    font-size: 14px;
}
#architect .block .right .name_ja{
    font-size: 24px;
}
#architect .block .right .people{
    margin-top: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}
#architect .block .right .text{
    margin-top: 35px;
    font-size: 14px;
}
#architect .block .right .youtube_banner{
    max-width: 280px;
    margin-top: 10px;
}
@media screen and (max-width: 640px){
            #architect{
                padding: 70px 5vw;
            }
            #architect .title{
                font-size: 6vw;
                line-height: 1.5em;
                padding-bottom: 10px;
            }
            #architect .block .left{
                display: block;
                width: 93%;
                margin: 0 auto;
                padding-right: 0;
            }
            #architect .block .left div{
                font-size: 3.3vw;
            }
            #architect .block .right{
                display: block;
                width: 100%;
                font-size: 1rem;
                margin-top: 50px;
            }
            #architect .block .right .name_en{
                font-size: 3.3vw;
            }
            #architect .block .right .name_ja{
                font-size: 6.5vw;
            }
            #architect .block .right .people{
                font-size: 3.3vw;
            }
            #architect .block .right .text{
                font-size: 3.3vw;
            }
            #architect .block .right .youtube_banner{
                max-width: 100%;
                margin-top: 15px;
            }
}






#contact{
    background: #f6f8f6;
    padding: 80px 0;
}
#contact .w1200{
    max-width: 1000px;
    padding: 0 40px;
}
#contact .title_ja{
    margin-bottom: 10px;
}
#contact .consult_title{
    font-size: 25px;
    text-align: center;
    margin-top: 35px;
}
#contact .consult_flow{
    width: 520px;
    margin: 0 auto;
}
#contact .consult_flow th{
    width: 70px;
    padding: 20px 0;
}
#contact .consult_flow td{
    padding: 20px 0 20px 30px;
}
#contact .consult_flow td .title{
    font-size: 25px;
    margin-bottom: 10px;
}

@media screen and (max-width: 640px){
            #contact .w1200{
                padding: 0 3vw;
            }
            #contact .consult_title{
                font-size: 6vw;
            }
            #contact .consult_flow{
                width: 100%;
            }
            #contact .consult_flow th{
                width: 40px;
            }
            #contact .consult_flow td{
                padding: 20px 0 20px 13px;
            }
            #contact .consult_flow td .title{
                font-size: 6vw;
            }
}



#contact .amazon_block{
    margin: 70px auto 100px auto;
}
#contact .amazon_block .consult_title{
    background: #586056;
    color: #fff;
    padding: 15px 0 10px 0;
}
#contact .amazon_block .store_block{
    font-size: 0;
    margin-top: 30px;
}
#contact .amazon_block .store_block .img{
    width: 50%;
    margin-right: 7%;
    display: inline-block;
    vertical-align: middle;
}
#contact .amazon_block .store_block .info{
    width: 43%;
    display: inline-block;
    vertical-align: middle;
    font-size: 14.5px;
    color: #000;
}
#contact .amazon_block .store_block .info .title{
    font-size: 20px;
    margin-bottom: 1.5em;
}
#contact .amazon_block .store_block .info table{
    width: 100%;
    border-collapse: collapse ;
}
#contact .amazon_block .store_block .info table th{
    width: 3.7em;
    text-align: left;
    border-right: 1px #000 solid;
    padding: 20px 0 0 0;
    font-weight: normal;
    vertical-align: top;
}
#contact .amazon_block .store_block .info table td{
    padding: 20px 0 0 1.5em;
}
#contact .amazon_block .store_block .info table tr:first-child th{
    padding: 0;
}
#contact .amazon_block .store_block .info table tr:first-child td{
    padding: 0 0 0 1.5em;
}
#contact .amazon_block .event_attention{
    background: #fff;
    padding: 40px 50px;
    margin: 30px auto 0 auto;
    color: #000;
    line-height: 1.7em;
}
#contact .amazon_block .event_attention .title{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
}
#contact .amazon_block .event_attention .text{
    font-size: 12px;
}
@media screen and (max-width: 640px){
            #contact .amazon_block{
                margin: 50px auto 70px auto;
            }
            #contact .amazon_block .consult_title{
                font-size: 4.5vw;
                padding: 0.8em 0;
            }
            #contact .amazon_block .store_block{
                margin-top: 10px;
            }
            #contact .amazon_block .store_block .img{
                width: 100%;
                margin-right: 0;
                display: block;
            }
            #contact .amazon_block .store_block .info{
                width: 100%;
                display: block;
                font-size: 3.6vw;
            }
            #contact .amazon_block .store_block .info .title{
                font-size: 4.5vw;
                letter-spacing: 0.7vw;
                text-align: center;
                margin-bottom: 1em;
                margin-top: 1em;
            }
            #contact .amazon_block .store_block .info table th{
                width: 3.5em;
                padding: 1em 0 0 0;
            }
            #contact .amazon_block .store_block .info table td{
                padding: 1em 0 0 1.5em;
            }
            #contact .amazon_block .event_attention{
                padding: 2em 0.7em 2em 1em;
                line-height: 1.7em;
            }
            #contact .amazon_block .event_attention .title{
                font-size: 3.8vw;
                margin-bottom: 1.5em;
            }
            #contact .amazon_block .event_attention .text{
                font-size: 3vw;
            }
}




#footer{
    background: #292a2b;
    padding: 60px 0;
    color: #fff;
}
#footer .left_block{
    line-height: 2.2em;
}
#footer .left_block img{
    width: 60px;
}
#footer .left_block a{
    color: #fff;
}
#footer .bottom_block{
    text-align: center;
    margin-top: 30px;
}
@media screen and (max-width: 640px){
            #footer{
                padding: 60px 0 20px 0;
            }
            #footer .bottom_block{
                padding-right: 30px;
            }
}







/* reservation-form */
#formCheck-01{
    margin-top: 50px;
}

#formCheck-01 .google_map_btn{
    background: #999;
    color: #fff;
    display: inline-block;
    line-height: 1.9em;
    padding: 0 1em;
    margin-left: 2em;
    font-size: 0.8em;
    border-radius: 4px;
    vertical-align: middle;
}

.table-box{
    background: #fff;
}

.form01-box {
  border-top: 2px #fff solid;
  border-bottom: 2px #fff solid;
}
.form01-box td{
    padding: 2em;
}

.form01-box-title {
  background-color: #f3f3f3;
  width: 15em;
  vertical-align: middle;
  padding: 0 1em;
}

.form01-item {
  border-bottom: 2px #f3f3f3 solid;
  vertical-align: middle;
}

.form-text-text-01 {
  font-size: 1.3em;
}

.mandatory {
  font-size: 0.8em;
  line-height: 1.8em;
  background-color: #586056;
  width: 4em;
  margin: auto;
  margin-top: 0.5em;
  text-align: center;
  color: #fff;
}

.option-color {
  color: #f3f3f3;
}

.form01_input_text {
  border: 2px #afaeae solid;
  width: 49%;
  padding: 0.5em 1em;
  text-align: left;
  height: 4em;
}

.form01_input_text:focus:hover{
  border: 2px #b3292c solid;
}

.form01_input_text:focus{
  border: 2px #b3292c solid;
  outline: none;
}

.form01-input-long {
  width: 100%;
}

.form01_input_text_add-01,
.form01_input_text_add-02,
.form01_input_text_add-03,
.form01_input_text_add-04{
  position: relative;
}
.form01_input_text_add-01,
.form01_input_text_add-02,
.form01_input_text_add-03{
  margin-bottom: 1em;
}
.form01_input_text_add-01 .form01_input_text,
.form01_input_text_add-02 .form01_input_text,
.form01_input_text_add-03 .form01_input_text,
.form01_input_text_add-04 .form01_input_text{
  width: calc(100% - 7em);
}

.form01_input_text_add-01::before,
.form01_input_text_add-02::before,
.form01_input_text_add-03::before,
.form01_input_text_add-04::before{
  width: 7em;
  display: inline-block;
  vertical-align: middle;
  font-size: 0.8em;
  line-height: 1.4em;
  white-space: pre;
}

.form01_input_text_add-01::before {
  content: '郵便番号';
}
.form01_input_text_add-02::before {
  content: '都道府県・\A市区郡';
}
.form01_input_text_add-03::before {
  content: '町村名・\A番地など';
}
.form01_input_text_add-04::before {
  content: '建物名・\A部屋番号など';
}

.form01-checkbox-item {
  display: flex;
  flex-wrap: wrap;
}

.form01-checkbox-item-in {
  padding: 1.5em 1.5em;
  background-color: #f1f1f1;
  margin: 0.3em;
  border-radius: 10px;
}
.form01-checkbox-item-in:hover {
  background-color: #586056;
  color: #fff;
}
.form01-checkbox-item-in.is-active {
  background-color: #586056;
  color: #fff;
}

.form01_checkbox_label {
  padding-left: 1em;
}

.form01-item {
  position: relative;
}

.form01-checkbox-item-in {
  position: relative;
}

.table-box textarea {
  height: 13em;
  width: 100%;
}

.send_btn {
  margin: 3em auto 2em auto;
  width: 20em;
  height: 5em;
  text-align: center;
  transition: all 0.2s ease-out;
}
.send_btn .form_btn{
  width:100%;
  height:100%;
  display: block;
  background-color: #586056;
  color: #fff;
}
.send_btn:hover{
  opacity: 0.6;
  transition: all 0.2s ease-out;
}
@media screen and (max-width: 800px){
            .form01-box-title {
                width: 12em;
            }
}
@media screen and (max-width: 700px){
            .form01-box-title {
                width: 10em;
            }
            .form01-box td{
                padding: 2em 1em;
            }
}
@media screen and (max-width: 640px){
            #formCheck-01{
                margin-top: 30px;
            }

            #formCheck-01 .google_map_btn{
                line-height: 2em;
                padding: 0 2em;
                margin-left: 0;
                font-size: 0.9em;
                margin-top: 1vw;
            }

            .form01-box {
              border-top: none;
              border-bottom: none;
            }
            .form01-box table{
                display: block;
            }
            .form01-box th{
                padding: 1em;
                display: block;
            }
            .form01-box td{
                padding: 1em 1em 4em 1em;
                display: block;
            }

            .form01-box-title {
              width: 100%;
              padding: 0 1em;
            }
            .form01-box-title p{
                display: inline-block;
            }

            .form01-item {
              border-bottom: none;
            }

            .mandatory {
              margin-left: 0.6em;
              margin-top: 0;
            }

            .form01_input_text_add-01,
            .form01_input_text_add-02,
            .form01_input_text_add-03{
              margin-bottom: 1em;
            }
            .form01_input_text_add-02 .form01_input_text,
            .form01_input_text_add-03 .form01_input_text,
            .form01_input_text_add-04 .form01_input_text{
              width: 100%;
            }
            .form01_input_text_add-01 .form01_input_text{
                width: 15em;
            }

            .form01_input_text_add-01::before,
            .form01_input_text_add-02::before,
            .form01_input_text_add-03::before,
            .form01_input_text_add-04::before{
              display: none;
            }

            .form01-checkbox-item {
              display: flex!important;
            }

            .table-box textarea {
              height: 15em;
            }

}

/* privacy-policy*/
.privacy-policy {
  width: 80%;
  margin: auto;
}
.privacy-policy a{
    color: #000;
}

.privacy-policy-bottom-line {
  border-bottom: 1px #252525 solid;
}
@media screen and (max-width: 800px){
            .privacy-policy {
                width: 100%;
            }
}
@media screen and (max-width: 640px)  {
            .privacy-policy {
                text-align: center;
            }
}






#thanks_block{
    margin: 0 auto;
    max-width: 46rem;
    width: 100%;
    padding: 100px 40px;
    text-align: center;
}
#thanks_block .big{
    font-size: 5rem;
    letter-spacing: 0.2em;
    font-weight: bold;
}
#thanks_block .big span{
    color: #b3292c;
    font-size: 5rem;
    font-weight: bold;
}
#thanks_block .text{
    line-height: 1.8em;
    padding: 4em 0;
    text-align: left;
}
#thanks_block .logo{
    width: 7em;
    display: block;
    margin: 0 auto 40px auto;
}
#thanks_block .go_hp{
    display: inline-block;
    background: #586056;
    color: #fff;
    line-height: 3em;
    padding: 0 4em;
    font-weight: bold;
    border-radius: 2px;
    border: 2px #586056 solid;
}
#thanks_block .go_hp:hover{
    background: #fff;
    color: #586056;
}
@media screen and (max-width: 640px)  {
    #thanks_block{
        padding: 50px 3vw 60px 3vw;
    }
    #thanks_block .big{
        font-size: 11vw;
    }
    #thanks_block .big span{
        font-size: 11vw;
    }
    #thanks_block .text{
        padding: 3em 0 4em 0;
    }
    #thanks_block .logo{
        width: 18vw;
        margin: 0 auto 8vw auto;
    }
    #thanks_block .go_hp{
        display: inline-block;
        background: #586056;
        color: #fff;
        line-height: 3em;
        padding: 0 4em;
        font-weight: bold;
        border-radius: 2px;
        border: 2px #586056 solid;
    }
}

/* gallery */
.gallery {
  background-color: #C7C7BF;
}

.gallery-title {
  font-size: 3rem;
  font-weight: 100;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.gallery-content {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-left: 15rem;
  padding-right: 15rem;
}

.gallery_modal {
  width: 48%;
  padding: 0.5rem;
}

.gallery-box-01 {
  display: flex;
  justify-content: space-between;
  justify-content: center;
}

.gallery-box-02 {
  width: 48%;
}

.gallery-box-02 .gallery_modal {
  width: 100%;
}

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

  .gallery .in-box {
    padding-right: calc(3rem - 2.5rem);
    padding-left: calc(3rem - 2.5rem);
  }

  .gallery-title {
    padding-top: 2rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
    font-size: 4.6rem;
  }

  .gallery-content {
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .gallery-box-02 {
    width: 47.6%;
  }
}