@charset "UTF-8";

html,body{
width:100%;
height:100%;
position: relative;
background-color:#FCF9DE;
}

body.fixed {
width: 100%;
height: 100%;
position: fixed;
}

img{ vertical-align:middle; }

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

body{ letter-spacing:0.05em; }

}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/*----------------------------------------------------------------------------------------------------------------------animation----------*/

/*SPメニュー出現時*/

.slide_in { animation: slideIn 1s cubic-bezier(0.19, 1, 0.22, 1); }

@keyframes slideIn {
0% {
transform: translateX(-100px);
opacity: 0;
}

100% { 
transform: translateX(0);
opacity: 1; 
}

}


/*----------------------------------------------------------------------------------------------------------------------header----------*/

header{ 
position:fixed;
top:0;
width: 100%;
z-index:10;
background-color:#FCF9DE;
}

header h1{
width:11.4%;
line-height:1;
transition: all 1s 0s cubic-bezier(0.23,1,0.32,1);
margin-left: 44.3%;
margin-top: 28px;
position: fixed;
}

header img{
width:100%;
height:auto;
}

#menu_wrapper{
width:92%;
height:100px;
margin:0 auto;
display:flex;
align-items: center;
justify-content: space-between;
transition: all 1s 0s cubic-bezier(0.23,1,0.32,1);
}

#gnav ul{ display:flex; }

#gnav li{ 
padding-right:28px;
font-weight: bold;
}

#gnav li:last-child{ 
padding-right:0;
font-weight: bold;
}

#gnav li a{
font-size:14px;
color:#333;
opacity: 1;
position: relative;
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
letter-spacing: 0.05em;
}

#gnav li a:hover{ color:#E37059; }

#gnav li a:after{ 
position: absolute;
bottom: -8px;
left: 0;
content: "";
width: 100%;
height: 1px;
background:rgb(227 112 90);
transform: scale(0, 1);
transform-origin: right top;
transition: transform 0.3s;
}

#gnav li a:hover::after{ 
transform-origin: left top;
transform: scale(1, 1);
}


/*スクロール後の高さ ここから*/

.headerCommon h1{
width:7%;
margin-left: 45%;
margin-top: 14px;
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
}

.headerCommon #menu_wrapper{ 
height:66px;
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
}

/*ここまで*/


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

header h1{
width:16%;
margin-left: 42%;
margin-top: 20px;
}

#menu_wrapper{ height:80px; }

#gnav li{ padding-right:22px; }

#gnav li a{ font-size:13px; }


.headerCommon h1{
width:12%;
margin-left: 44%;
margin-top: 14px;
}

}


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

header h1{
width:26%;
margin-left: 37%;
margin-top: 14px;
}

#menu_wrapper{
height:66px;
width:90%;
}

#gnav ul{ display:none; }

.headerCommon h1{
width:20%;
margin-left: 40%;
}

}

/*----------------------------------------------------------------------------------------------------------------------#sp_menu----------*/

#sp_box{ display:block; }

.btn_wrapper {
width:74px;
height:50px;
}

.menu_btn {
width:100%;
height:50px;
overflow:visible;
cursor:pointer;
z-index:100;
position:absolute;
}

.menu_btn .line {
position:absolute;
background-color:#333;
overflow:hidden;
width:74px;
height:2px;
left:0;
-webkit-transition: all 400ms ease-out 0ms;
-moz-transition: all 400ms ease-out 0ms;
-o-transition: all 400ms ease-out 0ms;
transition: all 400ms ease-out 0ms;
}

.menu_btn .line:nth-child(1) {
top:19px;
left:50%;
margin-left:-37px;
}

.menu_btn .line:nth-child(2) {
bottom:19px;
left:50%;
margin-left:-37px;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(1) {
-webkit-transform: translateY(5px) rotate(45deg);
transform: translateY(5px) rotate(45deg);
-webkit-transition: all 400ms ease-out 0ms;
-moz-transition: all 400ms ease-out 0ms;
-o-transition: all 400ms ease-out 0ms;
transition: all 400ms ease-out 0ms;
background-color:#fff;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(2) {
-webkit-transform: translateY(5px) rotate(-45deg);
transform: translateY(-5px) rotate(-45deg);
-webkit-transition: all 400ms ease-out 0ms;
-moz-transition: all 400ms ease-out 0ms;
-o-transition: all 400ms ease-out 0ms;
transition: all 400ms ease-out 0ms;
background-color:#fff;
}

#sp_menu{ position:relative; }

#sp_menu nav {
position: fixed;
width: 50%;
height: 100%;/*100vh*/
top: 0;
left:0;
display:none;
z-index:99;
overflow-y: auto;
background: #735645;
}

#sp_menu nav a { color:#333; }

#nav_cont{
position:absolute;
top:18.8%;
left: 22.2%;
width:66.6%;
}

.box_up{
display:flex;
justify-content: space-between;
}

.nav_menu{ width:50%; }

.logo_sp_menu{ width:40%; }

#nav_cont li {
font-size:18px;
width:100%;
margin-top:24px;
font-weight:bold;
letter-spacing: 0.1em;
}

#nav_cont li:first-child{ margin-top:10px; }

#nav_cont li a{ color:#fff; }

.sns_sp{
margin-top:60px;
color:#fff;
font-size:12px;
font-weight:bold;
display:flex;
}

.sns_sp p{
position: relative;
line-height: 18px;
}

.sns_sp p::after {
content: "";
background-color:rgba(255,255,255,0.7);
display: block;
height: 1px;
width: 36px;
position: absolute;
bottom:10px;
left:70px;
transition: height 1s ease;
}

.sns_sp a{
display: block;
width:20px;
height: 20px;
margin-left:56px;
}

.copy_right_sp{
font-size:10px;
margin-top:125px;
color:#fff;
}

.sp_bg {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
display:none;
z-index:90;
background:rgba(0,0,0,0.5);
}



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

.btn_wrapper { width:54px; }

.menu_btn .line { width:54px; }

.menu_btn .line:nth-child(1) { margin-left:-27px; }

.menu_btn .line:nth-child(2) { margin-left:-27px; }

#sp_menu nav { width: 90%; }

#nav_cont{
top:18%;
left: 10%;
width:90%;
}

.nav_menu{ width:60%; }

.logo_sp_menu{ width:24%; }

#nav_cont li:first-child{ margin-top:6px; }

.sns_sp{ margin-top:50px; }

.copy_right_sp{ margin-top:80px; }

.copy_right_sp span{ display:none; }


}


/*----------------------------------------------------------------------------------------------------------------------fixed_sns----------*/


.sns_fixed{
position: fixed;
top:42%;
right:20px;
z-index:1;
}

.sns_fixed p{
writing-mode: vertical-rl;
text-orientation: mixed;
color:#735645;
font-size:12px;
font-weight:bold;
position: relative;
}

.sns_fixed p::after {
content: "";
background-color:rgba(120,80,47,0.7);
display: block;
height: 36px;
position: absolute;
bottom:-46px;
left:10px;
width: 1px;
transition: height 1s ease;
}

.sns_fixed a{
display: block;
width:20px;
height:20px;
margin-top: 56px;
opacity: 1;
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
}

.sns_fixed a:hover{
opacity:0.5;
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
}

.sns_fixed a img{
width:100%;
height:auto;
}


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

.sns_fixed{
right:12px;
display: none;
}

}

/*----------------------------------------------------------------------------------------------------------------------footer----------*/


footer{ margin-top:150px; }

footer img{ 
width:100%;
height: auto;
}

#footer_contact{
background-color:#735645;
width:100%;
}

#footer_contact .inner{
background-color:#735645;
width:83%;
margin:0 auto;
padding: 100px 0;
display: flex;
}

#footer_contact .inner .tit_group{ width:20%; }

#footer_contact .inner .tit_group span{
display: block;
color:#fff;
font-weight: bold;
font-size:14px;
}

#footer_contact .inner .tit_group h2{
font-weight: bold;
font-size:24px;
color:#fff;
}

#footer_contact .inner .txt_group {
    width: 80%;
    color: #fff;
}

#footer_contact .inner .txt_group .tel{
display: flex;
margin-top:20px;
}

#footer_contact .inner .txt_group .number{
font-size:30px;
font-weight: bold;
/*font-family:Helvetica, "sans-serif";*/
letter-spacing: 0.08em;
line-height: 1.4;
}

#footer_contact .inner .txt_group .number span{
font-size:18px;
line-height: 1.6;
}

#footer_contact .inner .txt_group .tel p:last-child{
font-size:14px;
padding-left: 5%;
}

#footer_contact .inner .more{ margin-top:25px; }

#footer_contact a[href^="tel:"]{ 
pointer-events: none;
color:#fff; 
}

#footer_btm{
padding: 80px 0 120px;
width:83%;
margin:0 auto;
position: relative;
}

#footer_btm .inner{
display: flex;
justify-content: space-between;
width:100%;
}

#footer_btm h2{width:17%;}

.btm_cont{
width:80%;
display: flex;
margin-top: 20px;
}

.btm_cont_tit{
width:25%;
font-weight: bold;
}

.btm_cont_tit h3 {
    font-weight: bold;
    font-size: 20px;
}
.copy_right{
margin: 80px 0 0 70%;
font-size:10px;
display: block;
}

#footer_btm .back_top {
position: absolute;
right: 0;
top: 100px;
transition: 0.1s;
border:1px solid #dad5d1;
width:74px;
height:74px;
border-radius:50%;
display: flex;
justify-content: center;
align-items: center;
}

#footer_btm .back_top a {
width:74px;
height:74px;
background: url('../images/arw_up.png') no-repeat center;
background-size:32px 23px;
display: block;
}

#footer_btm .back_top a:hover  {
animation: arrow-footer 0.5s;
animation-fill-mode: none;
}

@keyframes arrow-footer {
0% {
  transform: translateY(0);
  opacity: 1;
}
50% {
  transform: translateY(-10px);
  opacity: 0;
}
51% {
  transform: translateY(10px);
  opacity: 0;
}
100% {
  transform: translateY(0);
  opacity: 1;
}
}


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

#footer_contact .inner{
width:90%;
padding: 80px 0;
display: block;
}

#footer_contact .inner .tit_group{ 
width:100%;
}

#footer_contact .inner .txt_group{ 
width:100%;
margin-top: 20px;
}

#footer_contact .inner .txt_group .tel{
display: flex;
margin-top:20px;
}

#footer_contact .inner .txt_group .tel p:last-child{ padding-left: 4%; }

#footer_btm{
width:90%;
}

#footer_btm h2{width:10%;}

.btm_cont{
width:80%;
display: block;
margin-top:0;
}

.btm_cont_tit{ width:100%; }

.btm_cont_info{ margin-top:10px; }

.copy_right{
margin: 50px 0 0 20%;
font-size:10px;
display: block;
}

#footer_btm .back_top { top: 80px; }

}


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

footer{ margin-top:100px; }

#footer_contact .inner{
padding: 60px 0;
width:90%;
}

#footer_contact .inner .txt_group{ margin-top:5px; }

#footer_contact .inner .txt_group .read{ 
font-size: 15px;
margin-top:5px;
}

#footer_contact .inner .txt_group .tel{
display: block;
margin-top:15px;
}

#footer_contact .inner .txt_group .number{ font-size:30px; }

#footer_contact .inner .txt_group .number span{
font-size:18px;
line-height: 1.6;
}

#footer_contact .inner .txt_group .tel p:last-child{
padding-left:0;
margin-top:10px;
}

#footer_contact .inner .more a{ width: 100%; }

#footer a[href^="tel:"]{ pointer-events: auto; }

#footer_btm{
padding: 60px 0 100px;
width:90%;
}

#footer_btm .inner{
justify-content: space-between;
width:100%;
}

#footer_btm h2{width:20%;}

.btm_cont{
width:70%;
display: block;
margin-top:0;
font-size:14px;
}

.btm_cont_tit{
width:100%;
}

.copy_right{
margin: 50px 0 0 0;
}

#footer_btm .back_top {
position: absolute;
top: 30px;
right:-10px;
width:50px;
height:50px;
display: flex;
justify-content: center;
align-items: center;
}

#footer_btm .back_top a {
width:50px;
height:50px;
background-size:24px 17px;
}

}



/*----------------------------------------------------------------------------------------------------------------------page_main----------*/

#page_main{
width:91.7%;
margin-top:12%;
height:720px;
border-radius: 0 0 0 0;
background: url(../images/main_about.jpg) no-repeat center center;
background-size: cover;
}
}

#page_main h2{
font-weight:bold;
color:#fff;
margin-left:8.3%;
padding-top:640px;
line-height: 1;
letter-spacing: 0.1em;
}

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

#page_main{
width:91.3%;
height:500px;
}

#page_main h2{
padding-top:430px;
}

}

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

#page_main{
width:95%;
height:400px;
margin-top:0;
}

#page_main h2{
padding-top:350px;
margin-top:12%;
margin-left:5%;
}

}

/*----------------------------------------------------------------------------------------------------------------------bread_list----------*/


.bread_list{
width: 91.3%;
display:flex;
justify-content:flex-end;
font-size:12px;
margin: 20px 0 0 0;
}

.bread_list li{
padding-right:30px;
background:url("../images/arw_bread.png") no-repeat right 10px center;
background-size:5px 8px;
}

.bread_list li:last-child{
padding-right:0;
background:none;
}

.bread_list a{ 
position:relative;
}

.bread_list a:after{ 
position: absolute;
bottom: -3px;
left: 0;
content: "";
width: 100%;
height: 1px;
background: #fff;
transform: scale(0, 1);
transform-origin: right top;
transition: transform 0.3s;
}

.bread_list a:hover::after{ 
transform-origin: left top;
transform: scale(1, 1);
}

#no_main .bread_list
{ margin-top:18%; }

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

.bread_list{ width: 91.3%; }

#no_main .bread_list{ margin-top:24%; }

}

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

.bread_list{ width: 95%; }

#no_main .bread_list{ visibility: hidden; }

}


/*-----------------------------------------------------------------------------------------------line_btn----------*/

.line_btn { width:200px; }

.line_btn a { 
font-weight:bold;
display: block;
position: relative;
letter-spacing:0.1em;
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
padding-left: 0px;
}

.line_btn a:hover { 
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
padding-left:8px;
}

.line_btn a:after{ 
content: "";
background-color:rgba(51,51,51,0.9);
display: block;
height: 2px;
position: absolute;
bottom:11px;
left:95px;
width:70px;
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
transform-origin: left bottom;
}

.line_btn a:hover:after{ 
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
width:90px;
}


/*----------------------------------------------------------------------------------------------------------------------css_btn----------*/

.more a {
    border: 1px solid #333;
    border-radius: 35px 35px;
    color: #333;
    font-weight: bold;
    line-height: 70px;
    width: 240px;
    text-align: center;
    background: #fff;
}

.more a:hover {
    border: 1px solid rgb(247 141 64);
    background-color: rgb(247 141 64);
    color: #f1eada;
}
.cssbtn {
display: inline-block;
text-align: center;
outline: none;
}

.cssbtn::before,
.cssbtn::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}

.cssbtn,
.cssbtn::before,
.cssbtn::after {
-webkit-transition: all .3s;
transition: all .3s;
}




/*----------------------------------------------------------------------------------------------------------------------共通要素----------*/

.br_pc{ display:inline; }

.br_sp{ display:none; }


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

.br_pc{ display:none; }

.br_sp{ display:inline; }

}




@media screen and (max-width: 767px) {
        #page_main {
        background-position-x: -320px !important;
        background-position-y: 100px !important;
    }
}