@charset "utf-8";

/* 基本設定 */
html{
	font-size: 62.5%;
}
*, *::before, *::after{
  box-sizing: border-box;
}
body{
	color: #FFF;
	background: #000;
	line-height: 1.6;
  font-size: 1.6vw;
	font-family: 'Noto Sans JP', 'Noto Sans CJK JP', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  -moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; /* 文字サイズの自動調整機能のキャンセル */
  overflow-y: hidden !important;
}
_:lang(x)::-ms-backdrop, body { font-family: "メイリオ", Meiryo, sans-serif; } 
.fntMc{
  font-family: 'Noto Serif JP', 'Noto Serif CJK JP', YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.trajNoml{font-family: trajan-pro-3,serif; font-weight: 400; font-style: normal;}
.trajBold{font-family: trajan-pro-3,serif; font-weight: 700; font-style: normal;}
.ftW100{ font-weight: 100; } /* Note Sans */
.ftW200{ font-weight: 200; } /* Note Serif */
.ftW300{ font-weight: 300; } /* Note Sans - Note Serif */
.ftW400{ font-weight: 400; } /* Note Sans - Note Serif (normal-default) */
.ftW500{ font-weight: 500; } /* Note Sans - Note Serif */
.ftW600{ font-weight: 600; } /* Note Serif */
.ftW700{ font-weight: 700; } /* Note Sans - Note Serif (borld-default) */
.ftW900{ font-weight: 900; } /* Note Sans - Note Serif */

img{
	border: 0;
	vertical-align: top;
}
input ,select{
	position: relative;
	top: 1px;
}
table, th, td{
	border-collapse: collapse;
	border-spacing: 0;
}
ul, li{
	list-style:none;
}
a:link, a:visited{
	color: #C00;
	text-decoration: none;
	transition: opacity 0.5s;
}
a:hover, a:active{
  opacity: .6;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
#cover{
  width: 100%;
  height: 100%;
  position: fixed;
  background: #000;
  top: 0px;
  left: 0px;
  z-index: 10000;
}
#loader{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 140%;
  height: 50%;
}
#loader img{
  display: block;
  margin: -10% 0 0 -30%;
  transform: rotate(-35deg);
  transform-origin:  40% 40%;
  width: 100%;
  height: auto;
}
#wrapper{
	overflow: hidden;
  position: relative;
}
.dd960,.dd560,.dd560i,.dd414{
  display: none;
}
.feedin1-no{
  opacity: 0;
	transform: scale(1.1); 
	transition: opacity 2s ease-in 0.2s, transform 2s ease-out 0.2s;
}
.feedin1{
  opacity: 1;
	transform: scale(1); 
}
.feedin2-no{
  opacity: 0;
	transform: scale(1.1); 
	transition: opacity 2s ease-in 1s, transform 2s ease-out 1s;
}
.feedin2{
  opacity: 1;
	transform: scale(1); 
}
@media screen and (max-width: 559px){
  body{
    font-size: 160%;
  }
  #loader{
    width: 280%;
    height: 100%;
  }
  #loader img{
    margin: 10% 0 0 -50%;
  }
  #ascrail2000{
    display: none !important;
  }
}


/* ヘッダー */
#header{
  position: relative;
  z-index: 9990;
  top: 0;
  left: 0;
  width: 100%;
}
#header .logo{
  position: fixed;
  z-index: 9999;
  width: 12%;
  height: auto;
  margin: 2vw 0 0 2vw;
}
#header .logo img{
  width: 100%;
  height: auto;
}
@media screen and (max-width: 559px){
  #header .logo{
    position: absolute;
    width: 38vw;
    margin: 6vw 0 0 -19vw;
    left: 50%;
  }
}
.snsB2 {
  position: fixed;
  z-index: 9999;
  right: .8em;
  bottom: 1em;
  width: 1.8em;
}
.snsB2 a{
  display: block;
}
.snsB2 a img{
  width: 100%;
  height: auto;
}
@media screen and (max-width: 559px){
  .snsB2 {
    right: 1.2em;
    bottom: 1.5em;
  }
}

/* ナビゲーション */
#header .gMenu{
  position: fixed;
  z-index: 9999;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
#header .gMenu li{
  position: relative;
  white-space: nowrap;
  padding: 1vw 0 1vw 6vw;
}
#header .gMenu li::before{
  content: "";
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5vw;
  height: 1px;
  background: #A1A9B1;
}
#header .gMenu li.active::before{
  background: #FFF;
}
#header .gMenu li a{
  position: relative;
	display: block;
  color: #A1A9B1;
  font-size: 50%;
}
#header .gMenu li.active a{
  color: #FFF;
  font-weight: 600;
}
.menu-trigger{
  display: none;
}
@media screen and (max-width: 559px){
  #header .gMenu{
    height: 0;
    max-height: 0;
    top: 12vw;
    left: 0;
    width: 50%;
    margin: 0 auto;
    overflow: hidden;
    transition: max-height .4s;
  }
  #header .gMenu.active{
    height: auto;
    max-height: 101vw;
  }
  #header .gMenu li{
    width: 100%;
  }
  #header .gMenu li a{
    width: 100%;
    padding: 2.5vw 0;
    font-size: 80%;
  }
  .menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }
  .menu-trigger {
    position: fixed;
    z-index: 9999;
    width: 9vw;
    height: 8vw;
    top: 4.5vw;
    right: 4.5vw;
  }
  .menu-trigger span {
    position: absolute;
    width: 100%;
    height: 0.5vw;
    background-color: #A1A9B1;
    border-radius: 2px;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger span:nth-of-type(2) {
    top: 3.8vw;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }
  .menu-trigger.active span:nth-of-type(1) {
    transform: translateY(3.8vw) rotate(-45deg);
  }
  .menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-trigger.active span:nth-of-type(3) {
    transform: translateY(-3.6vw) rotate(45deg);
  }
}


/* コンテンツ */
main{
	overflow: hidden;
  position: relative;
}
section{
  position: relative !important;
  overflow: hidden !important;
  height: auto !important;
  min-height: 100vh;
  top: inherit !important;
  text-align: center;
}
section h2{
  font-size: 160%;
  letter-spacing: 0.4vw;
  margin-bottom: 5vw;
}
section h2 span{
  display: block;
  margin-bottom: .5em;
}
section h2 strong{
  font-size: 180%;
  font-weight: 400;
}
section h2 strong img{
  width: 40%;
  height: auto;
  margin: 0 auto;
}
section .mainCopy{
  position: relative;
  padding: 25vh 0 5vh;
}
section .mainCopy .txt1{
  font-weight: 600;
  letter-spacing: 0.2vw;
  margin-bottom: 0.6vw;
}
section .picUp{
  position: relative;
  margin: 0 auto 3em;
  width: 80%;
  background: #000 url("../img/howto_bg.webp") no-repeat left center / contain;
  padding: 21em 1em 2em 45%;
}
section .picUp li{
  position: relative;
  display: block;
  margin-bottom: 1em;
}
section .picUp li p{
  position: relative;
  text-align: left;
  line-height: 1.5;
}
section .picUp li p b{
  font-weight: 400;
  font-size: 130%;
  padding-right: .2em;
}
section .picUp li p strong{
  font-size: 180%;
  padding-left: .5em;
  letter-spacing: .1em;
}
section .picUp li p small {
  display: block;
  font-size: 90%;
  padding-left: 1em;
}
section .endCopy{
  position: relative;
  overflow: hidden;
  height: 62vw;
}
section .endCopy .bgimg{
  display: block;
  width: 100%;
  height: auto;
}
section .endCopy p{
  position: absolute;
  bottom: 3.5em;
  right: 4em;
  text-align: left;
  line-height: 2.2;
  letter-spacing: .1em;
  font-size: 130%;
}
@media screen and (max-width: 559px){
  section{
    min-height: inherit;
  }
  section h2{
    font-size: 120%;
    letter-spacing: .2em;
    margin-bottom: 1.5em;
  }
  section h2 span{
    display: block;
    margin-bottom: 1em;
  }
  section h2 strong{
    font-size: 160%;
    letter-spacing: .2em;
  }
  section h2 strong img{
    width: 65%;
    height: auto;
    margin: 0 auto;
  }
  section .mainCopy{
  padding: 12vh 0 4vh;
  }
  section .mainCopy .txt1{
    line-height: 2.2;
    letter-spacing: .2em;
    margin-bottom: 1.2vw;
  }
  section .picUp{
    width: 84%;
    background-position: left top;
    background-size: 100% auto;
    padding: 22em 2% 1.5em;
    text-align: center;
  }
  section .picUp li {
    display: block;
    text-align: center;
  }
  section .picUp li p{
    display: inline-block;
    font-size: 95%;
    text-align: left;
  }
  section .picUp li p small{
    font-size: 80%;
  }
  section .picUp li p strong{
    display: block;
    text-align: center;
    padding: 0;
  }
  section .endCopy{
    height: auto;
    padding-bottom: 60vw;
    background: #000;
  }
  section .endCopy .bgimg{
    width: 150%;
    margin-left: -23%;
  }
  section .endCopy p{
    bottom: 1em;
    right: inherit;
    left: 8%;
    font-size: 120%;
  }
}

/* フッター */
#footer{
  position: relative;
  overflow: hidden;
  z-index: 50;
  background: #e6e7e8;
  padding: 1em 5%;
}
#footer .logo{
  display: block;
  float: left;
  width: 10%;
  height: auto;
  padding-top: .2em;
}
#footer .snsB{
  display: block;
  float: left;
  width: 3%;
  margin-left: 2%;
  opacity: .8;
}
#footer .snsB:hover{
  opacity: .6;
}
#footer .snsB img{
  width: 100%;
  height: auto;
}
#footer .cpr{
  display: block;
  font-size: 50%;
  float: right;
  color: #84898e;
  padding-top: 1em;
}
@media screen and (max-width: 559px){
  #footer{
  padding: 2em 0;
  }
  #footer .logo{
    float: none;
    width: 40%;
    margin: 0 auto 1em;
  }
  #footer .snsB{
    float: none;
    width: 10%;
    margin: 1em auto;
  }
  #footer .cpr{
    font-size: 50%;
    float: none;
    padding-top: 0;
  }
}

@media screen and (max-width: 559px){
  .nn560{ display: none !important; }
  .dd560{ display: block !important; }
  .dd560i{ display: inline-block !important; margin-bottom: 0; }
}
@media screen and (max-width: 414px){
  .nn414{ display: none !important; }
  .dd414{ display: block !important; }
}
@media screen and (orientation: landscape) {
}
@media screen and (orientation: portrait) {
}


/* 利尻昆布ラーメンLP */
#topSct .bgImg{
  opacity: 0;
  position: absolute;
  z-index: 0;
  width: 100vw !important;
  height: 100vh !important;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  background: url("../img/top_bg.webp") no-repeat center 60%;
  background-size: cover;
}
#topSct .mainCopy{
  position: absolute;
  bottom: .7em;
  padding: 0;
  left: -1.5%;
}
#topSct .mainCopy .cpr{
  position: relative;
  display: block;
  color: #A1A9B1;
  text-align: right;
  font-size: 50%;
  padding-right: 7%;
}
#topSct .mainCopy .txt1{
  display: block;
  font-size: 514%;
  letter-spacing: 0.1em;
  margin-bottom: 0;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}
#topSct .btn{
  position: fixed;
  z-index: 999;
  top: .5%;
  right: 2%;
  width: 25%;
}
#topSct .btn img{
  width: 100%;
  height: auto;
}
@media screen and (max-width: 559px){
  #topSct .bgImg{
    background: url("../img/top_bg.webp") no-repeat center top;
    background-size: 150% auto;
  }
  #topSct .mainCopy{
    position: relative;
    padding-top: 34vw;
    margin-bottom: 15vw;
  }
  #topSct .mainCopy .cpr{
    text-align: center;
    font-size: 50%;
    color: #fff;
    letter-spacing: .1em;
    padding-right: 0;
  }
  #topSct .mainCopy .txt1{
    text-align: left;
    font-size: 16vw;
    letter-spacing: 0;
    line-height: 1.3;
    padding-top: 6.5em;
  }
  #topSct .btn{
    position: relative;
    top: inherit;
    right: inherit;
    display: block;
    width: 80%;
    margin: 0 auto;
  }
}

#secretSct .bgImg{
  opacity: 0;
  position: absolute;
  z-index: 0;
  width: 100vw !important;
  height: 100vh !important;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  background: url("../img/secret_bg.jpg") no-repeat center top;
  background-size: cover;
}
@media screen and (max-width: 559px){
  #secretSct .bgImg{
    background: url("../img/secret_bg.jpg") no-repeat center -10%;
    background-size: 100% auto;
  }
  #secretSct h2 span{
    margin-bottom: 6em;
  }
}

#houtoeatSct .bgImg{
  opacity: 0;
  position: absolute;
  z-index: 0;
  width: 100vw !important;
  height: 100vh !important;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
}

.active#topSct .bgImg,
.active#secretSct .bgImg,
.active#houtoeatSct .bgImg{
  animation-name: topBgimg;
  animation-delay: 0.5s;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@keyframes topBgimg{
  0% {opacity: 0; transform: scale(1.1);}
  100% {opacity: 1; transform: scale(1);}
}
#onlineSct{
  position: relative;
  color: #000;
  padding: 7em 0 4em;
}
#onlineSct .logo{
  display: block;
  margin: 0 auto 1.6em;
  width: 18%;
  height: auto;
}
#onlineSct .txt{
  margin-bottom: 1em;
}
#onlineSct .txt2{
  font-size: 130%;
  color: #C00;
  margin-bottom: 1.6em;
  padding-right: .5em;
}
#onlineSct .name {
  display: block;
  font-size: 130%;
  margin-bottom: .3em;
}
#onlineSct .price{
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin: 0 auto;
  margin-bottom: 1em;
  padding-left: 3.8em;
}
#onlineSct .price .fukuro{
  position: absolute;
  display: inline-block;
  background: #000;
  color: #fff;
  font-weight: 600;
  border-radius: 50%;
  font-size: 60%;
  line-height: 1;
  padding: .9em .3em;
  left: 0;
  top: 1.8em;
  margin: auto;
}
#onlineSct .price .kingaku{
  position: relative;
  overflow: hidden;
}
#onlineSct .price .kingaku strong{
  font-size: 220%;
  font-weight: 400;
  letter-spacing: .1em;
}
#onlineSct .price .kingaku span{
  font-size: 90%;
}
#onlineSct .price .kingaku small{
  position: absolute;
  font-size: 60%;
  top: 1.5em;
  right: 0;
}
#onlineSct .price .itibu small{
  display: block;
  font-size: 60%;
  line-height: 1;
}
#onlineSct .opne{
  position: relative;
  margin: 0 auto 1.2em;
}
#onlineSct .opne p{
  position: relative;
  display: inline-block;
  border: 1px solid #c00;
  border-radius: 1em;
  padding: .6em .8em .5em 1.2em;
}
#onlineSct .opne p::after {
  content: "";
  position: absolute;
  right: 2em;
  top: 31.5%;
  width: 5.5em;
  height: 5.5em;
  background: url("../img/rmn_freak.png") no-repeat center center / contain;
}
#onlineSct .opne p span{
  display: inline-block;
  padding-right: 5em;
}
#onlineSct .opne p b{
  color: #c00;
  font-size: 150%;
  line-height: 1.2;
  padding: 0 .1em;
}
#onlineSct .opne p small{
  display: inline-block;
  font-size: 60%;
  text-align: left;
  padding-top: .8em;
}
#onlineSct .cartB{
  display: block;
  margin: 0 auto;
  width: 50%;
}
#onlineSct .btn{
  display: block;
  margin: 0 auto;
  width: 32%;
}
#onlineSct .close{
  position: relative;
  margin: 2em auto 0;
}
#onlineSct .close p{
  display: inline-block;
  border-top: 1px solid #666;
  line-height: 1.4;
  padding: .8em 3em;
  color: #f00;
  font-weight: 500;
}
#onlineSct .tel{
  position: relative;
  margin: 0 auto 1em;
}
#onlineSct .tel p{
  display: inline-block;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  line-height: 1.4;
  padding: .8em 2em;
}
#onlineSct .tel p b{
  font-size: 150%;
  font-weight: 400;
}
#onlineSct .tel p small{
  font-size: 80%;
}
#onlineSct .btn img{
  width: 100%;
  height: auto;
}
@media screen and (max-width: 559px){
  #onlineSct{
    padding: 5em 0 3em;
  }
  #onlineSct .logo{
    margin: 0 auto 2em;
    width: 60%;
  }
  #onlineSct .txt{
    line-height: 2;
    font-size: 120%;
    padding-left: .8em;
    margin-bottom: 2em;
  }
  #onlineSct .price{
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin: 0 auto;
    margin-bottom: 2em;
    padding-left: 5.3em;
  }
  #onlineSct .price .fukuro{
    font-size: 80%;
    top: 2em;
  }
  #onlineSct .price .kingaku strong{
    font-size: 300%;
    padding-right: .1em;
  }
  #onlineSct .price .kingaku span{
    font-size: 110%;
  }
  #onlineSct .price .kingaku small{
    font-size: 60%;
    top: 2.8em;
    right: 1em;
  }
  #onlineSct .opne p b{
    display: block;
    line-height: 1.2;
    position: relative;
    margin-right: -2.5em;
  }
  #onlineSct .opne p::after {
    right: .6em;
    top: inherit;
    bottom: 1em;
  }
  #onlineSct .opne p span{
    display: inline-block;
    padding-right: 5em;
  }
  #onlineSct .opne p small{
    display: inline-block;
    padding-right: 8em;
  }
  #onlineSct .cartB,
  #onlineSct .cartB .cartjs_sk_link_other{
    width: 80% !important;
  }
  #onlineSct .cartB input{
    width: 100% !important;
  }
  #onlineSct .cartB table{
    width: 60% !important;
  }
  #onlineSct .cartB .cartjs_product_num th{
    white-space: nowrap;
    padding-right: .5em;
  }
  #onlineSct .btn{
    width: 100%;
  }
  #onlineSct .close p{
    padding: .8em 2em;
  }
}