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

Site Name: [ 汎用scssテンプレート ]
Site URI: [ 汎用scssテンプレート ]
Description: [ 汎用scssテンプレート ]
Version: [ 1.0 ]
Author: gramglan
Author URI: gramglan.work

-------------------------------- */
/* SITE COLOR */
/*
mixin
*/
/* --------------------------------
MIXIN
- gramglan
-------------------------------- */
/* SETTING */
/* mixin */
/* --------------------------------
汎用MIXIN
-------------------------------- */
/* margin padding 0指定 */
/* BOX-SIZING */
/* 透過 */
/* hover処理 */
/* 画像のhover処理 */
/* 吹き出し
@include arrow(#ccc, 10, 30%);
*/
/* SNS COLOR */
/* alpha base color */
/*
gradient
@include gradient(#ff00ff, #ff00cc, vertical);
*/
/* --------------------------------
サポートブラウザの設定
-------------------------------- */
/* ベンダープレフィックス */
/* --------------------------------
clearfix
-------------------------------- */
/* --------------------------------
FONT STYLE
-------------------------------- */
/* font-family
@include font__noto;
*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/* width設定 */
/*
	base padding
*/
/*
	base margin
*/
/*
	flexbox
*/
/*
	absolute
	@include absolute(0,0,0,0);
	@include absolute($t:0,$r:0, $b:0,$l:0);
*/
/* --------------------------------
MEDIA QUERY

@include mq(){}

'xsmall': 320px,
'small' : 600px,
'medium': 768px,
'large' : 1024px,
'xlarge': 1280px,

@include or(){};

'p': 'portrait',
'l': 'landscape',

-------------------------------- */
/* --------------------------------
角丸設定
-------------------------------- */
/* 基本設定 */
/* --------------------------------
MIXIN
- gramglan


MEDIA QUERY

@include mq(){}

'xsmall': 320px,
'small' : 600px,
'medium': 768px,
'large' : 1024px,
'xlarge': 1280px,

@include or(){};

'p': 'portrait',
'l': 'landscape',

-------------------------------- */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 16px;
  color: #333; }

a {
  text-decoration: none; }
  a:hover {
    outline: none;
    border: none; }

img {
  vertical-align: bottom;
  max-width: 100%; }

ul, li, dl, dt, dd, ol, p, h1, h2, h3, h4, h5, h6, p, figure, figcaption, input, textarea {
  margin: 0;
  padding: 0;
  list-style: none; }

ul:after, ol:after {
  *zoom: 1; }
  ul:after:after, ol:after:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden; }

/* --------------------------------
MIXIN
- gramglan


MEDIA QUERY

@include mq(){}

'xsmall': 320px,
'small' : 600px,
'medium': 768px,
'large' : 1024px,
'xlarge': 1280px,

@include or(){};

'p': 'portrait',
'l': 'landscape',

-------------------------------- */
/* 横幅指定 */
.mod__wrap {
  width: 100%;
  position: relative; }
  @media screen and (min-width: 768px) {
    .mod__wrap {
      margin: 0 auto;
      width: 100%; } }
  @media screen and (min-width: 768px) and (min-width: 0px) {
    .mod__wrap {
      width: 100%; } }
  @media screen and (min-width: 768px) and (min-width: 600px) {
    .mod__wrap {
      width: 100%; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .mod__wrap {
      width: 100%; } }
  @media screen and (min-width: 768px) and (min-width: 1024px) {
    .mod__wrap {
      max-width: 768px; } }
  @media screen and (min-width: 768px) and (min-width: 1280px) {
    .mod__wrap {
      max-width: 974px; } }

.mod__flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  /* reverse setting */ }
  .mod__flex .mod__flex__item {
    width: 100%; }
    .mod__flex .mod__flex__item.-w20 {
      width: 50%; }
    @media screen and (min-width: 768px) {
      .mod__flex .mod__flex__item.-w10 {
        width: 10%; }
      .mod__flex .mod__flex__item.-w20 {
        width: 20%; }
      .mod__flex .mod__flex__item.-w25 {
        width: 24%; }
      .mod__flex .mod__flex__item.-w30 {
        width: 30%; }
      .mod__flex .mod__flex__item.-w40 {
        width: 40%; }
      .mod__flex .mod__flex__item.-w45 {
        width: 45%; }
      .mod__flex .mod__flex__item.-w50 {
        width: 50%; }
      .mod__flex .mod__flex__item.-w55 {
        width: 55%; }
      .mod__flex .mod__flex__item.-w60 {
        width: 60%; }
      .mod__flex .mod__flex__item.-w70 {
        width: 70%; }
      .mod__flex .mod__flex__item.-w80 {
        width: 80%; }
      .mod__flex .mod__flex__item.-w90 {
        width: 90%; }
      .mod__flex .mod__flex__item.-w100 {
        width: 100%; } }
    @media screen and (min-width: 1024px) {
      .mod__flex .mod__flex__item {
        padding: 0 0 0 0; } }
  @media screen and (min-width: 1024px) and (min-width: 768px) {
    .mod__flex .mod__flex__item {
      padding: 0 0 0 0; } }
    @media screen and (min-width: 1024px) {
        .mod__flex .mod__flex__item.-flex {
          -ms-flex: 1;
          /*IE10*/
          -webkit-box-flex: 1;
          /* Android4.3以下、Safari3.1〜6.0 */
          -webkit-flex: 1;
          /* Safari6.1以降 */ }
        .mod__flex .mod__flex__item.-w10 {
          width: 10%; }
        .mod__flex .mod__flex__item.-w20 {
          width: 20%; }
        .mod__flex .mod__flex__item.-w25 {
          width: 24%; }
        .mod__flex .mod__flex__item.-w30 {
          width: 30%; }
        .mod__flex .mod__flex__item.-w40 {
          width: 40%; }
        .mod__flex .mod__flex__item.-w45 {
          width: 45%; }
        .mod__flex .mod__flex__item.-w50 {
          width: 50%; }
        .mod__flex .mod__flex__item.-w55 {
          width: 55%; }
        .mod__flex .mod__flex__item.-w60 {
          width: 60%; }
        .mod__flex .mod__flex__item.-w70 {
          width: 70%; }
        .mod__flex .mod__flex__item.-w80 {
          width: 80%; }
        .mod__flex .mod__flex__item.-w90 {
          width: 90%; }
        .mod__flex .mod__flex__item.-w100 {
          width: 100%; } }
    .mod__flex .mod__flex__item.-full {
      width: 100%; }
  .mod__flex.-just_around {
    -ms-flex-pack: justify;
    /*IE10*/
    -webkit-box-pack: justify;
    /* Android4.3以下、Safari3.1〜6.0 */
    -webkit-justify-content: space-around;
    /* Safari6.1以降 */
    justify-content: space-around; }
  .mod__flex.-just_center {
    -ms-flex-pack: justify;
    /*IE10*/
    -webkit-box-pack: justify;
    /* Android4.3以下、Safari3.1〜6.0 */
    -webkit-justify-content: center;
    /* Safari6.1以降 */
    justify-content: center; }
  .mod__flex.-just_between {
    -ms-flex-pack: justify;
    /*IE10*/
    -webkit-box-pack: justify;
    /* Android4.3以下、Safari3.1〜6.0 */
    -webkit-justify-content: space-between;
    /* Safari6.1以降 */
    justify-content: space-between; }
  .mod__flex.-rev_all {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-flow: row-reverse wrap;
    -ms-flex-flow: row-reverse wrap;
    -webkit-flow: row-reverse wrap; }
  @media screen and (min-width: 768px) {
    .mod__flex.-rev {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      flex-flow: row-reverse wrap;
      -ms-flex-flow: row-reverse wrap;
      -webkit-flow: row-reverse wrap; } }

/* JS用 */
/* 各ページ */
/* --------------------------------
HEADER
- gramglan

MEDIA QUERY

@include mq(){}

'xsmall': 320px,
'small' : 600px,
'medium': 768px,
'large' : 1024px,
'xlarge': 1280px,

@include or(){};

'p': 'portrait',
'l': 'landscape',

-------------------------------- */
@-webkit-keyframes hoverShake {
  0% {
    -webkit-transform: skew(0deg, 0deg);
    transform: skew(0deg, 0deg); }
  25% {
    -webkit-transform: skew(1deg, 1deg);
    transform: skew(1deg, 1deg); }
  75% {
    -webkit-transform: skew(-1deg, -1deg);
    transform: skew(-1deg, -1deg); }
  100% {
    -webkit-transform: skew(0deg, 0deg);
    transform: skew(0deg, 0deg); } }
@keyframes hoverShake {
  0% {
    -webkit-transform: skew(0deg, 0deg);
    transform: skew(0deg, 0deg); }
  25% {
    -webkit-transform: skew(1deg, 1deg);
    transform: skew(1deg, 1deg); }
  75% {
    -webkit-transform: skew(-1deg, -1deg);
    transform: skew(-1deg, -1deg); }
  100% {
    -webkit-transform: skew(0deg, 0deg);
    transform: skew(0deg, 0deg); } }

/* body add class*/
.__sp {
  display: block; }
  @media screen and (min-width: 768px) {
    .__sp {
      display: none; } }

.__pc {
  display: none; }
  @media screen and (min-width: 768px) {
    .__pc {
      display: block; } }

.pic {
  position: fixed;
  bottom: 1em;
  right: 1em;
  z-index: 100; }
  .pic img {
    width: 100px;
    height: auto; }
    @media screen and (min-width: 768px) {
      .pic img {
        width: 200px; } }


.anime-fuwafuwa {
  -webkit-animation: 3s fuwafuwa infinite;
  animation: 3s fuwafuwa infinite; }

@-webkit-keyframes fuwafuwa {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }

@keyframes fuwafuwa {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }




.anime-fuwafuwa2 {
  -webkit-animation: 3s fuwafuwa4 infinite;
  animation: 3s fuwafuwa4 infinite; }
  .anime-fuwafuwa2 img {
    -webkit-animation: 5s fuwafuwa3 infinite;
    animation: 5s fuwafuwa3 infinite; }



@-webkit-keyframes fuwafuwa2 {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); } }

@keyframes fuwafuwa2 {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); } }

/*アマノ振り子の場合*/
/*ユラユラはfuwafuwa2を指定する*/

.amafuwa {
        position: absolute;
        width: 150px;
        top: 80px;
        left: -50px; 
  border-radius: 100px;
  animation: swing linear 5s infinite;
  transform-origin: center -50px 0;
}

.amafuwa::before {
  position: absolute;
  top: -70px;
  left: 50px;
  content: "";
  height: 70px;
}
    @media screen and (min-width: 768px) {
.amafuwa {
        position: absolute;
        width: 150px;
        top: 50px;
        left: -180px; 
  border-radius: 100px;
  animation: swing linear 5s infinite;
  transform-origin: center -50px 0;
}

.amafuwa::before {
  position: absolute;
  top: -70px;
  left: 50px;
  content: "";
  height: 70px;
}}



@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

/*アマノ振り子の場合ここまで*/


@-webkit-keyframes fuwafuwa3 {
  0%, 100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }

@keyframes fuwafuwa3 {
  0%, 100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }

@-webkit-keyframes fuwafuwa4 {
  0%, 100% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px); }
  50% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px); } }

@keyframes fuwafuwa4 {
  0%, 100% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px); }
  50% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px); } }
/*
body {
  background: #000 url(../img/bg2.png) repeat-y center top;
  background-size: contain;
  background: #000 url(../img/bg.jpg) no-repeat center bottom;
  background-size: cover;
  background-attachment: fixed; }
  @media screen and (min-width: 1024px) {
    body {
      min-width: 1000px; } }
 */

body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(../img/bg.jpg) center no-repeat;
background-position:50% 100%;

  background-size:cover;
}



header {
  line-height: 1;
  vertical-align: bottom; }
  header img {
    margin: 0;
    padding: 0; }
  header h1 {
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 1px; }
  header .line {
    position: relative;
    top: -12px; }

footer {
  background: #000;
  text-align: center;
  padding: 3em;
  width: 100%;
  position: relative;
  padding-top: 5em; }
  footer .yoro {
    width: 200px;
    position: absolute;
    right: 120px;
    top: 1em;
    z-index: 100; }
    @media screen and (min-width: 768px) {
      footer .yoro {
        width: 300px;
        position: absolute;
        right: 280px;
        top: 1em;
        z-index: 100; } }
    footer .yoro img {
      width: 100%;
      height: auto; }
  footer .copyright {
    text-align: center;
    color: #fff;
    font-size: 14px; }

#page_top {
  width: 79px;
  height: 102px;
  position: fixed;
  right: 1em;
  bottom: 0em;
  opacity: 1; }

#page_top a {
  position: relative;
  display: block;
  width: 79px;
  height: 102px;
  text-decoration: none; }

.lp-wrap {
  max-width: 1000px;
  margin: 0 auto; }
  .lp-wrap .sns {
    padding: 1em 1em; }
    .lp-wrap .sns ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      .lp-wrap .sns ul li {
        width: 90px; }
        .lp-wrap .sns ul li a:hover {
          opacity: 0.8; }
  .lp-wrap .toshop {
    text-align: center; }
    .lp-wrap .toshop a {
      margin: 0 auto;
      padding: 1em 3em 2em;
      max-width: 700px;
      display: block;
      position: relative; }
      .lp-wrap .toshop a img {
        background: #000; }
      .lp-wrap .toshop a:hover img {
        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25), inset 0px 0px 16px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25), inset 0px 0px 16px rgba(0, 0, 0, 0.5); }
      .lp-wrap .toshop a:hover:after {
        /* 疑似要素で同じ大きさのboxを作り、position: absoluteで背面に表示 */
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* ①疑似要素のボックスを影色で塗りつぶし */
        background-color: rgba(255, 0, 0, 0.5);
        /* ②ブラーフィルターでぼかす */
        -webkit-filter: blur(20px);
        filter: blur(20px);
        /* ③位置やサイズを調整 */
        -webkit-transform: translateY(0px) scale(0.9);
        -ms-transform: translateY(0px) scale(0.9);
        transform: translateY(0px) scale(0.9);
        /* ④乗算で重ねる */
        mix-blend-mode: multiply; }
    .lp-wrap .toshop p {
      color: #fff;
      margin: 0 auto;
      max-width: 700px;
      text-align: left;
      font-size: 13px;
      padding: 0 4em; }
  .lp-wrap .title {
    padding-top: 1em;
    margin-bottom: 1em; }
    .lp-wrap .title img {
      width: 100%;
      height: auto; }
  .lp-wrap .kuji {
    padding: 0 1.5em;
    margin-bottom: 3em; }
    .lp-wrap .kuji li {
      margin-bottom: 1.5em;
      position: relative; }
      .lp-wrap .kuji li .amano {
        position: absolute;
        width: 150px;
        bottom: -50px;
        right: 100px; }
        @media screen and (min-width: 768px) {
          .lp-wrap .kuji li .amano {
            position: absolute;
            width: 300px;
            bottom: -50;
            right: 100px; } }
    .lp-wrap .kuji .swiper-button-next {
      color: #fff;
      right: 2em;
      top: auto;
      bottom: 2em;
      display: none; }
      @media screen and (min-width: 768px) {
        .lp-wrap .kuji .swiper-button-next {
          display: block; } }
    .lp-wrap .kuji .swiper-button-prev {
      color: #fff;
      left: 2em;
      top: auto;
      bottom: 2em;
      display: none; }
      @media screen and (min-width: 768px) {
        .lp-wrap .kuji .swiper-button-prev {
          display: block; } }
    .lp-wrap .kuji .swiper-pagination {
      bottom: 4px; }
      @media screen and (min-width: 768px) {
        .lp-wrap .kuji .swiper-pagination {
          bottom: 2em; } }
      .lp-wrap .kuji .swiper-pagination .swiper-pagination-bullet-active {
        background: #fff; }
  .lp-wrap .lineup {
    background: rgba(255, 255, 255, 0.3);
    padding: 1em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: center;
    color: #fff;
    width: 90%;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      .lp-wrap .lineup {
        margin-bottom: 2em; } }
    .lp-wrap .lineup li {
      padding: 1em;
      width: 50%; }
      @media screen and (min-width: 768px) {
        .lp-wrap .lineup li {
          width: 33%; } }
      .lp-wrap .lineup li p {
        padding-top: 1em;
        font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; }

.shoplist {
  color: #fff;
  max-width: 768px;
  margin: 0 auto; }
  .shoplist h2 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    padding: 1em;
    padding-top: 3em;
    text-align: center;
    font-size: 32px; }
    @media screen and (min-width: 768px) {
      .shoplist h2 {
        font-size: 50px; } }

.tab_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 1em; }
  .tab_area a {
    width: 48%;
    display: block;
    text-align: center;
    background: #fff;
    color: #000;
    font-size: 15px;
    border-radius: 80px;
    padding: 0.5em;
    margin: 1%; }
    @media screen and (min-width: 768px) {
      .tab_area a {
        width: 20%;
        font-size: 20px;
        margin: 0.5em; } }
    .tab_area a:hover {
      opacity: 0.5; }

.panel_area h3 {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  padding: 1em;
  padding-top: 3em;
  text-align: center;
  font-size: 20px;
  background: url(../img/line.png) no-repeat bottom center;
  background-size: contain; }
  @media screen and (min-width: 768px) {
    .panel_area h3 {
      font-size: 32px; } }

.area {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #fff;
  padding: 1em; }
  .area li {
    border-bottom: 1px solid #333;
    padding: 1em 0; }
    .area li dl {
      margin-bottom: 4px; }
      @media screen and (min-width: 768px) {
        .area li dl {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex; } }
      .area li dl dt {
        width: 100%;
        text-align: center;
        padding: 0.5em;
        background: #000;
        display: block;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #fff;
        font-size: 14px;
        border: 1px solid #fff; }
        @media screen and (min-width: 768px) {
          .area li dl dt {
            text-align: left;
            width: 6em;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex; } }
      .area li dl dd {
        width: 100%;
        padding: 0.5em;
        text-align: center; }
        @media screen and (min-width: 768px) {
          .area li dl dd {
            text-align: left;
            width: calc(100% - 6em); } }
  .area .shop_name {
    font-weight: bold;
    padding-bottom: 0.5em;
    text-align: left;
    font-size: 20px;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .area .shop_name {
        text-align: left; } }