@charset "UTF-8";

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

.san_serif{ 
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
}

.san_serif_bold{ 
font-family: 'Josefin Sans', sans-serif;
font-weight: 600;
}

@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); }
40%,100% { opacity: 1; }
}


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

header{ 
position:fixed;
top:0px;/*下に続く要素の上マージン消す*/
width : 100%;
z-index:10;
display:flex;
justify-content: flex-start;
font-size:14px;
}

header h1#site_logo{
width:240px;
height:240px;
line-height:1;
background:#289a49;
margin-left: 2.5%;
}

header h1#site_logo img{
width:100px;
height:auto;
display: block;
margin: 60px auto 0;
}

#menu_wrapper{
height:  150px;
width:82.4%;
display:flex;
align-items: center;
padding:0 4%; 
}

#gnav ul{ display:flex; }

#gnav li{ 
padding-right:30px;
position: relative;
}

#gnav li a{ 
color:#fff;
opacity: 1;
position: relative;
}

#gnav li a:after{ 
position: absolute;
bottom: -8px;
left: 0;
content: "";
width: 100%;
height: 1px;
background:rgba(255,255,255,0.8);
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);
}

#gnav li a.current::after {
position: absolute;
bottom: -8px;
left: 0;
content: "";
width: 100%;
height: 1px;
background:rgba(255,255,255,0.8);
transform: scale(1, 1);
}

header .sns{
color:#fff;
display:flex;
align-items: center;
margin-left: auto;
margin-right: 5%;
line-height:1;
}

header .sns div:nth-child(2){
width: 12px;
height: 22px;
margin-left: 16px;
}

header .sns div:nth-child(3){
width: 21px;
height: 21px;
margin-left: 16px;
}

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

header .sns a {
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
opacity:1;
}

header .sns a:hover{ opacity:0.6; }


/*スクロール後のナビ色・高さ ここから*/

header.headerCommon{ 
background-color:rgba(238,236,231,1);
height:80px;
transition: all 1s 0s cubic-bezier(0.23,1,0.32,1);
top:0;
}

.headerCommon h1#site_logo{
width:120px;
height:120px;
transition: all 1s 0s cubic-bezier(0.23,1,0.32,1);
}

.headerCommon h1#site_logo img{
width:60px;
margin: 24px auto 0;
transition: all 1s 0s cubic-bezier(0.23,1,0.32,1);
}

.headerCommon #menu_wrapper{
height:80px;
width:90%;
transition: all 1s 0s cubic-bezier(0.23,1,0.32,1);
}

.headerCommon #gnav li a{
color: #333;
transition: all 0.2s ease-out;
}

.headerCommon #gnav li a:after{ background: #333; }

.headerCommon .sns{
color:#333;
}

/* 画像に関するスタイル */

.js-img-before{ display : inline; }
.js-img-after{ display : none; }

.img_display{ display : inline; }
.img_none{ display : none; }


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

header h1#site_logo{
width:200px;
height:200px;
margin-left: 2.5%;
}

header h1#site_logo img{
width:80px;
height:auto;
margin: 55px auto 0;
}

#menu_wrapper{
height: 150px;
width:82.4%;
display:flex;
align-items: center;
padding:0 4%; 
}

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

header .sns{display: none; }

}

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

header.headerCommon{ 
background-color:rgba(238,236,231,0);
}

header h1#site_logo{
width:120px;
height:120px;
margin-left:0;
}

header h1#site_logo img{
width:60px;
height:auto;
display: block;
margin: 24px auto 0;
}

#menu_wrapper{
height: 80px;
width:90%;
padding:0 4%; 
}

#gnav ul{ display:none; }

}

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

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

.menu_btn {
width:100%;
height:50px;
border: 1px solid #fff;
border-radius:50%;
overflow:visible;
cursor:pointer;
z-index:100;
position:absolute;
background-color: #fff;
}

.menu_btn .line {
position:absolute;
background-color:#279a49;
overflow:hidden;
width:20px;
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:20px;
left:50%;
margin-left:-10px;
}
.menu_btn .line:nth-child(2) {
bottom:20px;
left:50%;
margin-left:-10px;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(1) {
-webkit-transform: translateY(3px) rotate(45deg);
transform: translateY(3px) 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: #279a49;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(2) {
-webkit-transform: translateY(3px) rotate(-45deg);
transform: translateY(-3px) 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: #279a49;
}

/*-----スクロール後のスタイル-----*/

.spCommon .menu_btn .line{
background-color:#333;
transition: all 0.4s ease-out;
}

.spCommon .menu_btn{
background-color: #279949;
border:none;
}

.spCommon .menu_btn .line {
background-color:#fff;
}

.spCommon .btn_wrapper.clicked .menu_btn .line {
background-color:#fff;
}

.btn_wrapper.clicked .menu_btn{
border: 1px solid #fff;
}

/*----------------*/

#sp_menu{ position:relative; }

#sp_menu nav {
position: fixed;
width: 41.65%;
height: 100%;/*100vh*/
top: 0;
left: 58.35%;
display:none;
z-index:99;
background: rgba(40,154,73,.90);
overflow-y: auto;
}

#sp_menu nav a {
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
opacity:1;
color:#fff;
}

#sp_menu nav a:hover{ opacity:0.6; }

#nav_cont{
position:absolute;
right:20%;
top:14%;
width:60%;
}

#nav_cont h1{ width:30%; }

#nav_cont h1 img{
width:100%;
height:auto;
}

#nav_cont ul{ margin-top: 14%; }

#nav_cont li {
font-size:26px;
width:100%;
padding-bottom: 4px;
}

.sns_sp{
margin-top: 20%;
color:#fff;
display:flex;
align-items: center;
line-height:1;
}

.sns_sp div:nth-child(2){
width: 12px;
height: 22px;
margin-left: 24px;
}

.sns_sp div:nth-child(3){
width: 21px;
height: 21px;
margin-left: 24px;
}

.sns_sp img{
width: 100%;
height: auto;
}

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

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

#sp_box { margin-left: auto; }


#nav_cont{ top:16%; }

#sp_menu nav {
width: 50%;
left: 50%;
}

#nav_cont li a{ padding:15px 0 ; }

}

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

#sp_menu nav {
width: 93%;
left: 7%;
}

#nav_cont{
position:absolute;
right:15%;
top:13%;
width:70%;
}

#nav_cont li {
font-size:24px;
padding-bottom: 4px;
}

#nav_cont li a{ padding:14px 0 ; }

.sp_bg {background: rgba(0,0,0,0.8);}

}

/*----------------------------------------------------------------------------------------------------------------------copy_right----------*/

.copy_right{
position:fixed;
left:-20px;
top:48%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
font-size:10px;
z-index:10;
transform: rotate(-90deg);
}

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

.copy_right{ left:-34px; }

}


/*----------------------------------------------------------------------------------------------------------------------access----------*/

.access {
position:fixed;
right:-20px;
top:50%;
z-index:10;
width:65px;
height:190px;
margin-top:-95px;
background-color: #d0c4a2;
color: #279949;
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

.access_btn:hover .access{ right:0; }

.access p:nth-child(1){
width:12px;
height: 18px;
margin: 50px 0 0 18px;
line-height: 1;
}


.access p:nth-child(1) img{
width: 100%;
height: auto;
}


.access p:nth-child(2){
writing-mode: vertical-rl;
font-size: 14px;
margin: 12px 0 0 15px;;
line-height: 1;
}


/*----------------------------------------------------------------------------------------------------------------------more_btn----------*/


.wrap_link_arrow { display: inline-block; }

.wrap_link_arrow a.link_arrow {
display: flex;
align-items: center;
flex-basis: auto;
}

.wrap_link_arrow a.link_arrow span.tx {
font-size: 14px;
margin-right: 20px;
letter-spacing: 0.05em;
}

.wrap_link_arrow a.link_arrow span.arrow {
display: block;
width: 45px;
height: 45px;
border: 1px solid #289a49;
border-radius: 50%;
background: url("../images/arrow_right_white.png") no-repeat center;
background-color: #289a49;
background-size: 18px 15px;
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

.wrap_link_arrow a.link_arrow:hover span.arrow {
background: url("../images/arrow_right_green.png") no-repeat center;
background-size: 18px 15px;;
background-color: rgba(255,255,255,0);
}





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

footer{
width:100%;
padding:75px 0 100px 0;
background-color:#f6f6f2;
}

#footer_cont{
width:83.3%;
margin: 0 auto;
display: flex;
align-items: end;
}

#footer_cont h1{
width:20%;
height:auto;
}

#footer_cont h1 img{
width:100%;
max-width: 94px;
height:auto;
}

#footer_cont .shop_name{width:20%;}

#footer_cont .shop_name h2{font-size:12px;}

#footer_cont .shop_name h3{
font-size:14px;
line-height: 1;
margin-top: 6px;
}

#footer_cont .info{
width:50%;
font-size:14px;
line-height: 1.6;
}

#footer_cont .back_top{
width:10%;
text-align: right;
}

#footer_cont .back_top img{
width:100%;
max-width:70px; 
height: auto;
}

#footer_cont .back_top {
opacity:1;
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
padding-bottom: 0px;
}

#footer_cont .back_top:hover{
opacity:0.5;
padding-bottom: 10px;
}

footer .shop_concept{
border-bottom: 1px solid #ddd;
width: 100%;
font-size:12px;
margin-top: 43px;
padding: 0 0 43px 8.3%;
}

footer .shop_concept span{
position: relative;
padding-left:24px;
}

footer .shop_concept span:before{
content: "";	
background-color:#003399;
display: block;
width: 18px;
height: 1px;
position: absolute;
top:7px;
left:0;
}

#footer_menu{
width:83.3%;
margin: 44px auto 0;
display: flex;
align-items: center;
font-size:12px;
}

#footer_menu a{
opacity: 1;
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

#footer_menu a:hover{opacity: 0.6;}

#footer_menu ul{
width:40%;
display: flex;
}

#footer_menu ul li{ margin-right: 15px; }

#footer_menu ul li:last-child{margin-right: 0; }

#footer_menu .sns{
display: flex;
margin-left: auto;
}

#footer_menu .sns div:nth-child(1){width:10px;}

#footer_menu .sns div:nth-child(2){
width:18px;
margin-left: 15px;
}

#footer_menu .sns img{
width: 100%;
height: auto;
}


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

#footer_cont{
width:80%;
margin: 0 auto;
display:block;
position: relative;
}

#footer_cont h1{
width:100%;
}

#footer_cont .shop_name{
width:100%;
margin-top: 30px;
}

#footer_cont .info{
width:100%;
margin-top: 20px;
}

#footer_cont .back_top{
width:20%;
text-align: right;
position: absolute;
top:10px;
right:0;
}

#footer_menu{
width:80%;
margin: 44px auto 0;
display: block;
position: relative;
}

#footer_menu ul{ 
width:100%;
display: none;
}

#footer_menu ul li{ margin-right: 12px; }

#footer_menu ul li:last-child{margin-right: 0; }

#footer_menu .url{ margin-top: 20px; }

#footer_menu .sns{
display: flex;
margin-left: auto;
position: absolute;
bottom:5px;
right: 0;
}

#footer_menu .sns img{
width: 100%;
height: auto;
}

}

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

footer{
padding:60px 0 100px 0;
}

#footer_cont .shop_name h2{ display: none;  font-size:12px;}

#footer_cont .shop_name h3{ 
font-size:16px;
margin-top: 10px;
}

#footer_cont .info{font-size:16px;}

footer .shop_concept{
font-size:15px;
line-height: 1.8;
margin-top: 30px;
padding: 0 0 30px 10%;
}

footer .shop_concept span{
padding-left:0px;
}

footer .shop_concept span:before{
width: 0px;
height: 0px;
}

#footer_menu{
margin: 30px auto 0;
}

}


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

.br_pc{ display:inline; }

.br_sp{ display:none; }


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

.br_pc{ display:none; }

.br_sp{ display:inline; }

}


/*----------------------------------------------------------------------------------------------------------------------page_tit----------*/

#page_tit{ 
width:83.3%;
margin:135px 0 0 16.7%;
position: relative;
}

#page_tit figure {
width:90%;
height: auto;
margin-left: 10%;
}

#page_tit figure img{ 
width:100%;
height:auto;
}

#page_tit h2{ 
font-size: 48px;
z-index: 1;
line-height: 1;
color:#289a49;
position: absolute;
left:0;
padding-top: 20%;
}

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

}

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

#page_tit{ 
width:90%;
margin:50px 0 0 10%;
}

#page_tit h2{ 
font-size: 36px;
padding-top: 25%;
}

}


/*----------------------------------------------------------------------------------------------------------------------read----------*/


.read{
width:49.98%;
margin: -75px 0 0 16.66%;
padding-top: 100px;
background-color:#edece6;
border-radius: 0 50px 0 0;
position: relative;
z-index: 1;
}

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

.read{
width:74.97%;
margin: -50px 0 0 16.66%;
padding-top: 75px;
border-radius: 0 25px 0 0;
}

.read p{ width:95%; }

}

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

.read{
width:80%;
margin: -40px 0 0 10%;
padding-top: 40px;
line-height: 1.8;
}

.read p{ width:90%; }

}