@charset "UTF-8";
/* CSS Document */

header{
background-color: #4e3525;
background-image: url("/img/w_main.png");
background-position: top center;
background-size: auto 780px;
background-repeat: no-repeat;
}
.head_title{
padding: 5px;
display: flex;
justify-content:space-between;
}
.head_title p.box1{
width: 50%;
vertical-align: text-bottom;
font-weight: 600;
font-size: 2rem;
line-height: 2.4rem;
}
.head_title p.box1 img{
width: auto;
height: 55px;
float: left;
margin: 5px;
vertical-align: middle;
}
.head_title p.box2{
width: 50%;
padding: 1px 2px 3px 0;
text-align: right;
}
.head_title p.box2 a{
display: inline-block;
margin: 0 2px;
}
.head_title p.box2 img{
display: block;
margin-left: auto;
width: auto;
height: 27px;
}
.head_title p.box2 i{
font-size: 1.9rem;
margin-right: 5px;
vertical-align: baseline;
}
.head_img{
position: relative;
height: 700px;
}
.head_img img{
width: 100%;
}
.i-head01{
position: absolute;
top: 40%;
right: 0;
transform: translateY(-50%);
}
.i-head02{
position: absolute;
bottom: -30px;
left: 10px;
max-width: 200px;
}
.i-head03{
position: absolute;
bottom: -20px;
right: 15px;
max-width: 250px;
}
.head_img_sp{
display: none;
}
.menu-line01{
background-image: url("/img/i-top_menu_line01.png");
background-position: top;
background-repeat: repeat-x;
height: 15px;
}
.menu-line02{
background-image: url("/img/i-top_menu_line02.png");
background-position: bottom;
background-repeat: repeat-x;
height: 15px;
}
.menu-line03{
background-image: url("/img/i-top_menu_line03.png");
background-position: top;
background-repeat: repeat-x;
height: 15px;
margin-top: -15px;
}
.menu-line04{
background-image: url("/img/i-top_menu_line04.png");
background-position: bottom;
background-repeat: repeat-x;
height: 25px;
position: relative;
}
@media (max-width: 1200px) {
.i-head02{max-width: 150px;}
.i-head03{max-width: 200px;}
.w-img_sp{display: block;position: relative;}
}
@media (max-width: 992px) {
header{background: #4e3525;}
.head_title{display: none;}
.head_img{display: none;}
.head_img_sp {display: block;position: relative;}
.head_img_sp a{
display: block;
position: absolute;
bottom: 20px;
left: 10px;
width: 80px;
animation-name:updown1;   /* アニメーション名の指定 */
animation-delay:0s;   /* アニメーションの開始時間指定 */
animation-duration: 3s;   /* アニメーション動作時間の指定 */
animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
animation-iteration-count: infinite; 
}
.head_img_sp img{width: 100%;}
.menu .menu-line01{display: none;}
.menu-line01,.menu-line02,.menu-line03,.menu-line04{background-size: auto 80%;height: 20px;}
.menu-line01,.menu-line03{background-position: bottom;}
.menu-line02,.menu-line04{background-position: top;}

.i-sns-sp{margin-top: -15px;text-align: center;}
.i-sns-sp a{display: inline-block;margin: 0 5px;width: 40px;}
.i-sns-sp a img{width: 100%}
}
@keyframes updown1 {
0% {transform: translateY(0);}
50% {transform: translateY(-10px);}
100% {transform: translateY(0);}
}

/*--#w-food--*/
#w-food{
background: url("/img/w-food_back.jpg") center center / cover;
}
#w-food .contents-box{
position: relative;
margin-top: 10px;
}
#w-food .contents-box img{
width: 100%;
position: relative;
}
#w-food .contents-box .row{
background: url("/img/w-food_hokkaido.png") no-repeat top left / 65%;
margin-top: -30px;
}
#w-food .contents-box .row > div{
margin: 150px 0;
}
#w-food .contents-box .text-box{
  background-image: linear-gradient(180deg, #b48e19 1px, transparent 1px); /* 罫線の色と太さ  */
  background-size: 100% 2.5em; /* 行の高さ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px;
  margin-top: 30px;
  font-weight: 700;
}
@media (max-width: 992px) {
#w-food .contents-box .row > div{margin: 150px 0 80px;}
#w-food .contents-box .row{background: url("/img/w-food_hokkaido.png") no-repeat top left / 65%;}
}
@media (max-width: 768px) {
#w-food .contents-box .row > div{margin: 150px 0 50px;}
#w-food .contents-box .row{background: url("/img/w-food_hokkaido.png") no-repeat top center/ 500px auto;max-width: 500px;margin: -30px auto 0;}
}
@media (max-width: 576px) {
#w-food .contents-box .row > div{margin: 100px 0 50px;}
#w-food .contents-box .row{background: url("/img/w-food_hokkaido.png") no-repeat top center/ 350px auto;}
}

/*--#w-menu--*/
#w-menu{
position: relative;
height: 900px;
}
.curry-box {
position: absolute;
background: url("/img/w-menu_curry03.jpg");
background-position: bottom left -30rem;
background-repeat: no-repeat;
background-size: 60%;
width: 100%;
height: 1000px;
}
.curry-box > img {
width: 50%;
position: absolute;
top:-80px;
left: -100px;
z-index: 1;
}
.curryinner{
position: absolute;
top:2rem;
right: 2rem;
width: 55%;
text-align: right;
padding: 5rem 10rem 5rem;
}
.curryinner img{
width: 100%;
}
#w-menu h2{
text-align: left;
font-size: 2.5rem;
margin-top: 3rem;
line-height: 2em;
}
#w-menu p ,#w-menu2 p{
  margin: 0 auto;
  padding: 3rem 0;
  text-align: left;
  letter-spacing: 0.2rem;
  line-height: 2em;
}
.w-img_sp{display: none;}

@media (max-width: 1300px) {
.curry-box {
background: url("/img/w-menu_curry01_sp.png");
background-position: top left;
background-repeat: no-repeat;
background-size: 35%;
width: 100%;
height: 1300px;
}
.curry-box > img{display: none;}
.curryinner{
top:2rem;
right: 2rem;
width: 65%;
text-align: right;
padding: 5rem 5rem 3rem;
}
}
@media (max-width: 992px) {
#w-menu{
height: 800px;
}
.curry-box {
height: 800px;
}
#w-menu h2{
font-size: 1.8rem;
margin-top: 3rem;
line-height: 1.5em;
}
}

@media (max-width: 768px) {
#w-menu{
height: 580px;
}
.curry-box {
background-position: top left -2rem;
background-repeat: no-repeat;
background-size: 40%;
width: 100%;
height:700px;
}
#w-menu h2{
text-align: left;
font-size: 1.3rem;
margin-top: 3rem;
line-height: 1.5em;
}
#w-menu p ,#w-menu2 p{
  margin: 0 auto;
  padding: 2rem 0;
  text-align: left;
  letter-spacing: 0.1rem;
  line-height: 1.8rem;
  font-size: 1.2rem;
}
.curryinner{
top:2rem;
right: 2rem;
width: 68%;
text-align: right;
padding: 2rem 0 1rem 0rem;
}
}


/*----------ホッキカレー-----------*/
#w-menu2{
position: relative;
height: 1100px;
background-color: #fbfbfb;
clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
margin-top: 8rem;
padding-bottom: 10rem;
padding-top: 10rem;
width: 100%;
}
.hokki-box {
position: absolute;
background: url("/img/w-menu_hokki03.png");
background-position: bottom 5rem right -10rem;
background-repeat: no-repeat;
background-size: 60%;
width: 100%;
height: 1000px;
}
.hokki-box > img {
position: absolute;
top:-90px;
right:0;
width: 40%;
margin-right: 0px;
}
.hokkiinner{
position: absolute;
top:2rem;
left: 2rem;
width: 50%;
text-align: left;
padding: 5rem 0 5rem 10rem;
}
.hokkiinner > img{
position: absolute;
width: 70%;
left:5rem;
margin: 5rem 0 5rem;
}
#w-menu2 h2{
text-align: left;
font-size: 2.5rem;
margin-top: 30rem;
line-height: 2em;
}
 
#i-shop .contents-box{
position: static;
padding: 5rem 2rem;
}

@media (max-width: 1300px) {
.hokki-box {
background: url("/img/w-menu_hokki01_sp.png");
background-position: top right;
background-repeat: no-repeat;
background-size: 50%;
width: 100%;
height: 1000px;
}
.hokki-box > img{display: none;}
.hokkiinner{
top:2rem;
right: 2rem;
width: 65%;
text-align: right;
padding: 5rem 5rem 3rem;
}
#w-menu2 h2{
margin-top: 25rem;
}
}

@media (max-width: 992px) {
.hokkiinner > img{
width: 80%;
left:3rem;
margin: -5rem 0 2rem;
}
#w-menu2{
height: 850px;
}
#w-menu2 h2{
font-size: 1.8rem;
margin-top: 13rem;
line-height: 1.5em;
}
}

@media (max-width: 768px) {
#w-menu2{
height: 740px;
}
.hokki-box {
background-position: top 2rem right -2rem;
background-repeat: no-repeat;
background-size: 60%;
width: 100%;
height:800px;
}
#w-menu2 h2{
text-align: left;
font-size: 1.3rem;
margin-top: 1rem;
line-height: 1.5em;
}
.hokkiinner{
top:2rem;
right: 2rem;
width: 60%;
text-align: right;
padding: 2rem 0.5rem 5rem 0rem;
}
.hokkiinner > img{
position: static;
width: 100%;
left:0;
top:0;
margin: -3rem 0 0.5rem;
}
}




/*--#i-shop--*/
#i-shop{
background-image: url("/img/i-top_back.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
padding: 40px 0 30px;
margin-top: -20px;
z-index: 0;
}
#i-shop li img{
width: 100%;
}
#i-shop ul{
display: table;
width: 100%;
}
#i-shop li{
display: table-cell;
}
#i-shop li p{
max-width: 300px;
margin: 0 auto;
}
#i-shop ul li:nth-of-type(1){
width: 43%!important;
}
#i-shop ul li:nth-of-type(2){
vertical-align: top;
padding-top: 30px;
position: relative;
width: 14%;
}
#i-shop ul li:nth-of-type(2) img{
position: relative;
z-index: 1;
}
#i-shop ul li:nth-of-type(2) div{
position: absolute;
top:100px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20%!important;
background: url("/img/i-s-line01.png") bottom center no-repeat;
background-size: cover;
}
#i-shop ul li:nth-of-type(3){
width: 43%!important;
}
#i-shop ul li a img:hover{
opacity: 1;
transform:scale(1.05,1.05);
transition: all 0.3s;
}
@media (max-width: 992px) {
#i-shop{padding: 0 0 30px;}
}