@charset "UTF-8";
/*明朝体*/
/*Times New Roman*/
/*Google Fonts*/
/*コンテンツwidth*/
/*よく使う色*/
/*ボーダーカラー*/
/*リンク*/
/*ボタン*/
/*
@mixin btn01SP($width: 49.8vw, $height: 12vw, $bgImg: url(img/common/arrow01_black.svgz), $bgPos: right 3.2vw center, $bgSize: 4.4vw auto, $fSize: 2.93vw) {
    a,
    input {
        display: block;
        width: $width;
        height: $height;
        margin: 0 auto;
        background: $bgImg $bgPos no-repeat;
        -webkit-background-size: $bgSize;
        background-size: $bgSize;
        border: 1px solid #333;
        line-height: $height;
        text-align: center;
        font-size: $fSize;
    }
}
*/
/*
@mixin btn01PC($width: 250px, $height: 60px, $bgImg: url(img/common/arrow01_black.png), $bgImgHover: url(img/common/arrow01_white.png), $bgPos: right 15px center, $bgSize: 22px auto, $fSize: 15rem) {
    a,
    input {
        display: block;
        width: $width;
        height: $height;
        margin: 0 auto;
        background: $bgImg  $bgPos no-repeat;
        -webkit-background-size: $bgSize;
        background-size: $bgSize;
        border: 1px solid #333;
        line-height: 58px;
        text-align: center;
        letter-spacing: 0.3em;
        font-size: $fSize;
        &:hover {
            background-image: $bgImgHover;
            color: #fff;
            cursor: pointer;
            -webkit-animation: bg 0.3s ease-in 0s forwards;
            animation: bg 0.3s ease-in 0s forwards;
            @keyframes bg {
                0% {
                    background-color: transparent;
                    color: #333;
                }
                100% {
                    background-color: $emphasis;
                    background-image: $bgImgHover;
                    color: #fff;
                }
            }
            @-webkit-keyframes bg {
                0% {
                    background-color: transparent;
                    color: #333;
                }
                100% {
                    background-color: $emphasis;
                    background-image: $bgImgHover;
                    color: #fff;
                }
            }
        }
    }
}
*/
/*タイトルバー*/
/*
TOPページ用CSS
*/
/*------------------------------ SP用CSS（PCにも同時に適用される） ------------------------------*/
#wrapper {
  visibility: hidden;
}

/*-----------------------------------------------------------------
loader
-----------------------------------------------------------------*/
#loader {
  width: 150px;
  height: 150px;
  display: none;
  position: fixed;
  top: 45%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
  z-index: 1000;
}
#loader img {
  width: 150px;
  height: 150px;
}

#fade {
  width: 100%;
  height: 100%;
  display: none;
  background-color: #f6f2f2;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999;
}

/*-----------------------------------------------------------------
header
-----------------------------------------------------------------*/
header#topHeader {
  padding: 24vw 0 10.6vw;
  z-index: 1000;
}
header#topHeader .logo {
  width: 29.3vw;
  position: absolute;
  top: 4vw;
  left: 4vw;
  z-index: 99;
}
header#topHeader .menuBtn {
  position: absolute;
  top: 9.6vw;
  right: 4vw;
  z-index: 99;
}
header#topHeader #mainVisual {
  width: 100%;
  height: 79.3vw;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
header#topHeader #mainVisual img.pc {
  display: none;
}
header#topHeader #mainVisual .copy {
  width: 90.6vw;
  margin: 0 auto;
  position: absolute;
  top: 61.73vw;
  right: 0;
  left: 0;
  z-index: 99;
}
header#topHeader #mainVisual .bx-wrapper {
  width: 100%;
  height: 100% !important;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport {
  height: 100% !important;
  overflow: hidden;
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider {
  width: 100%;
  height: 100% !important;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li {
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  position: relative;
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li img {
  width: 100%;
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider01 {
  background-image: url(img/top/slider01_bg_sp.jpg);
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider02 {
  background-image: url(img/top/slider02_bg_sp.jpg);
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider03 {
  background-image: url(img/top/slider03_bg_sp.jpg);
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider04 {
  background-image: url(img/top/slider04_bg_sp.jpg);
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider05 {
  background-image: url(img/top/slider05_bg_sp.jpg);
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider06 {
  background-image: url(img/top/slider06_bg_sp.jpg);
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider07 {
  background-image: url(img/top/slider07_bg_sp.jpg);
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider08 {
  background-image: url(img/top/slider08_bg_sp.jpg);
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider09 {
  background-image: url(img/top/slider09_bg_sp.jpg);
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider10 {
  background-image: url(img/top/slider10_bg_sp.jpg);
}
header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider11 {
  background-image: url(img/top/slider11_bg_sp.jpg);
}
header#scrollNav {
  display: none;
  -webkit-box-shadow: 0 5px 10px 0 rgba(246, 242, 242, 0.8);
  box-shadow: 0 5px 10px 0 rgba(246, 242, 242, 0.8);
}

.scroll,
.element {
  display: none;
}

/*-----------------------------------------------------------------
Imagination, Hapiness, Peace of mind...
-----------------------------------------------------------------*/
#about {
  width: 92vw;
  padding: 88vw 0 15.2vw;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
#about .img li {
  position: absolute;
  z-index: 0;
}
#about .img li:nth-child(1) {
  width: 45.6vw;
  top: 20vw;
  left: 0;
}
#about .img li:nth-child(2) {
  width: 30.53vw;
  top: 24.13vw;
  left: 46.4vw;
}
#about .img li:nth-child(3) {
  width: 30.53vw;
  top: 51.46vw;
  left: 15.06vw;
}
#about .img li:nth-child(4) {
  width: 45.6vw;
  top: 70.53vw;
  right: 0;
}
#about .copy {
  width: 63.6vw;
  margin-bottom: 8.6vw;
  position: relative;
  z-index: 1;
}
#about .txt {
  margin-bottom: 8.6vw;
  line-height: 250%;
  position: relative;
  z-index: 1;
}
#about .btn li:not(:last-child) {
  margin-bottom: 5.3vw;
}
#about .btn li a {
  width: 70vw;
  height: 14vw;
  margin: 0 auto;
  -webkit-background-size: 4.4vw auto;
  background-size: 4.4vw auto;
  border: 1px solid #333;
  text-align: center;
  line-height: 14vw;
  font-size: 4vw;
  font-family: "Cormorant Garamond", serif;
  position: relative;
}
#about .btn li a span {
  width: 4vw;
  height: 4vh;
  position: absolute;
  top: 1vw;
  right: 2vw;
}

/*-----------------------------------------------------------------
banners
-----------------------------------------------------------------*/
.banners {
  width: 100vw;
  height: 100%;
  padding: 0 0 26.6666666667vw;
}
.banners .banner img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/*-----------------------------------------------------------------
Event Plan
-----------------------------------------------------------------*/
#event {
  width: 100vw;
  height: 100%;
  padding: 10vw 0 24vw;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
#event * {
  position: relative;
  z-index: 1;
}
#event h2 {
  margin-bottom: 8vw;
  text-align: center;
  font-size: 7.73vw;
  font-family: "Cormorant Garamond", serif;
}
#event ul {
  width: 88vw;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
#event ul li {
  width: 42.6666666667vw;
}
#event ul li:nth-of-type(n+3) {
  margin-top: 5.3333333333vw;
}
#event ul li:nth-of-type(2n) {
  margin-left: 2.6666666667vw;
}
#event ul li a {
  position: relative;
  display: block;
  padding: 0 0 6.6666666667vw;
}
#event ul li h3 {
  margin-bottom: 2vw;
  line-height: 130%;
  text-align: center;
  font-size: 3.4666666667vw;
  letter-spacing: 0.1em;
  font-family: "Cormorant Garamond", serif;
  padding: 0;
}
#event ul li figure {
  display: flex;
  justify-content: center;
  width: 40vw;
  margin: 0 auto 4.6vw;
}
#event ul li figure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
#event ul li .subtitle {
  font-size: 2.4vw;
  color: #999;
  text-align: center;
}
#event ul li .more {
  width: 15.3vw;
  margin: 2.6666666667vw auto 0;
  line-height: 130%;
  font-size: 12rem;
  font-family: "Cormorant Garamond", serif;
  color: #999;
  z-index: 4;
}
#event ul li .more span {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  right: 0;
}
#event ul li .more span .arrow_color {
  fill: #999;
}
#event > .more a {
  width: 49.8vw;
  height: 12vw;
  margin: 10.6vw auto 0;
  border: 1px solid #333;
  line-height: 12vw;
  font-size: 3.46vw;
  font-family: "Cormorant Garamond", serif;
  position: relative;
  text-align: center;
}
#event > .more a span {
  width: 4vw;
  height: 4vh;
  position: absolute;
  top: 1vw;
  right: 2vw;
}

/*-----------------------------------------------------------------
Basic Plan
-----------------------------------------------------------------*/
#basic {
  padding: 16vw 4vw 26vw;
  margin: 0 auto;
  background-image: url(./img/top/photo_plan-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #f5f5f5;
}
#basic h2 {
  margin-bottom: 8vw;
  text-align: center;
  font-size: 7.73vw;
  font-family: "Cormorant Garamond", serif;
}
#basic .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
#basic .list li {
  width: 44.26vw;
  margin-bottom: 10.75vw;
}
#basic .list li a {
  height: 100%;
}
#basic .list li a h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 16vw;
}
#basic .list li a h3 span {
  line-height: 130%;
  text-align: center;
  font-family: "Barlow", sans-serif;
}
#basic .boxes .box + .box {
  margin-top: 12vw;
}
#basic .boxes .box a {
  display: block;
  width: 69.3333333333vw;
  margin: 0 auto;
}
#basic .boxes .box a .more {
  margin-top: 6.4vw;
}
#basic .more {
  width: 49.86vw;
  height: 12vw;
  margin: 0 auto;
  border: 1px solid #333;
  line-height: 12vw;
  text-align: center;
  font-size: 3.46vw;
  font-family: "Cormorant Garamond", serif;
  position: relative;
}
#basic .more span {
  width: 4vw;
  height: 4vh;
  position: absolute;
  top: 1vw;
  right: 2vw;
}

/*-----------------------------------------------------------------
Official LINE Account
-----------------------------------------------------------------*/
#line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vw;
  background: url(img/top/line_bg_sp.jpg) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
#line div {
  width: 82.6vw;
  padding: 8vw 8vw 7.3vw;
  background-color: #6c6565;
  color: #fff;
}
#line div .txt {
  margin: 3.3vw 0;
  text-align: center;
}
#line div .btn a {
  width: 69.3vw;
  height: 12vw;
  margin: 0 auto;
  border: 1px solid #fff;
  line-height: 12vw;
  text-align: center;
  color: #fff;
}
#line div .btn a span:first-of-type {
  font-size: 2.93vw;
}
#line div .btn a span:first-of-type::after {
  content: " / ";
}
#line div .btn a span:last-of-type {
  font-size: 2.6vw;
  font-family: "Cormorant Garamond", serif;
}

/*-----------------------------------------------------------------
items, 753 kimono
-----------------------------------------------------------------*/
#pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16vw 0 36vw;
  position: relative;
  z-index: 0;
}
#pages * {
  position: relative;
  z-index: 1;
}
#pages::after {
  content: "";
  display: block;
  width: 100%;
  height: 70%;
  background-color: #f6f2f2;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
#pages section {
  width: 81.3vw;
  border: 1px solid #333;
}
#pages section:not(:last-of-type) {
  margin-bottom: 10vw;
}
#pages section a {
  padding: 6.6vw 10.6vw 22.6vw;
  color: #333;
  position: relative;
}
#pages section a h2 {
  margin-bottom: 6vw;
  line-height: 130%;
  text-align: center;
  font-size: 7.73vw;
  font-family: "Cormorant Garamond", serif;
}
#pages section a figure {
  margin-bottom: 4.6vw;
}
#pages section a h3 {
  margin-bottom: 4vw;
  line-height: 130%;
  text-align: center;
}
#pages section a h3.en {
  margin-bottom: 1.3vw;
  font-family: "Barlow", sans-serif;
}
#pages section a h3.jp {
  font-size: 2.4vw;
  color: #999;
}
#pages section a .txt {
  text-align: justify;
}
#pages section a .more {
  width: 15.3vw;
  margin: 0 auto;
  line-height: 130%;
  font-size: 12rem;
  font-family: "Cormorant Garamond", serif;
  color: #999;
  position: absolute;
  bottom: 8vw;
  left: 50%;
  z-index: 4;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
#pages section a .more span {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  right: 0;
}
#pages section a .more span .arrow_color {
  fill: #999;
}

/*-----------------------------------------------------------------
FAQ
-----------------------------------------------------------------*/
#faq {
  width: 92vw;
  padding: 72vw 0 26vw;
  margin: 10vw auto;
  position: relative;
}
#faq .img li {
  position: absolute;
  z-index: 0;
}
#faq .img li:nth-child(1) {
  width: 45.6vw;
  top: 0;
  left: 0;
}
#faq .img li:nth-child(2) {
  width: 30.53vw;
  top: 4.13vw;
  left: 46.4vw;
}
#faq .img li:nth-child(3) {
  width: 30.53vw;
  top: 31.46vw;
  left: 15.06vw;
}
#faq .img li:nth-child(4) {
  width: 45.6vw;
  top: 50.53vw;
  right: 0;
}
#faq h2 {
  width: 30.6vw;
  margin-bottom: 7.3vw;
  position: relative;
  z-index: 1;
}
#faq .list {
  margin-bottom: 9.3vw;
}
#faq .list li:not(:last-child) {
  margin-bottom: 4.6vw;
}
#faq .list li .q a {
  display: flex;
}
#faq .list li .q a span {
  display: block;
}
#faq .list li .a {
  margin-left: 1.5em;
}
#faq .list li .a a {
  display: inline-block;
  padding-right: 4.8vw;
  line-height: 130%;
  font-size: 12rem;
  font-family: "Cormorant Garamond", serif;
  color: #999;
  position: relative;
}
#faq .list li .a a span {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  right: 0;
}
#faq .list li .a a span .arrow_color {
  fill: #999;
}
#faq .more a {
  width: 49.86vw;
  height: 12vw;
  margin: 0 auto;
  border: 1px solid #333;
  line-height: 12vw;
  text-align: center;
  font-size: 3.46vw;
  font-family: "Cormorant Garamond", serif;
  position: relative;
}
#faq .more a span {
  width: 4vw;
  height: 4vh;
  position: absolute;
  top: 1vw;
  right: 2vw;
}

/*-----------------------------------------------------------------
新着情報
-----------------------------------------------------------------*/
#info {
  padding: 19.3vw 4vw 28vw;
  margin: 24vw auto 0;
  text-align: center;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
#info h2 {
  margin-bottom: 9.3vw;
  font-size: 7.73vw;
  font-family: "Cormorant Garamond", serif;
}
#info .list > li:not(:last-child) {
  margin-bottom: 10vw;
}
#info .list > li:nth-child(n+4) {
  display: none;
}
#info .list > li a {
  display: block;
}
#info .list > li div {
  margin-bottom: 1.3vw;
  line-height: 130%;
}
#info .list > li div.newIcon {
  font-size: 10rem;
  font-family: "Barlow", sans-serif;
  color: #ca4b53;
}
#info .list > li div.date {
  font-size: 12rem;
  font-family: "Barlow", sans-serif;
}
#info .list > li div.more {
  margin: 0;
  display: inline-block;
  padding-right: 4.8vw;
  line-height: 130%;
  font-size: 12rem;
  font-family: "Cormorant Garamond", serif;
  color: #999;
  position: relative;
}
#info .list > li div.more span {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  right: 0;
}
#info .list > li div.more span .arrow_color {
  fill: #999;
}
#info .list > li h3 {
  margin-bottom: 10.6vw;
  line-height: 150%;
  font-size: 3.2vw;
}
#info > .more a {
  width: 49.8vw;
  height: 12vw;
  margin: 10.6vw auto 0;
  border: 1px solid #333;
  line-height: 12vw;
  font-size: 3.46vw;
  font-family: "Cormorant Garamond", serif;
  position: relative;
}
#info > .more a span {
  width: 4vw;
  height: 4vh;
  position: absolute;
  top: 1vw;
  right: 2vw;
}

@media screen and (min-width: 768px) {
  /*------------------------------ PC用CSS ------------------------------*/
  /*-----------------------------------------------------------------
    header
    -----------------------------------------------------------------*/
  header#topHeader {
    height: auto;
    padding: 0;
    z-index: 0;
  }
  header#topHeader .logo {
    width: 200px;
    top: 60px;
    left: 4.16vw;
  }
  header#topHeader .logo a img {
    width: 200px;
  }
  header#topHeader .menuBtn {
    display: none;
  }
  header#topHeader .navWrap {
    position: absolute;
    top: 46px;
    right: 330px;
  }
  header#topHeader .navWrap .sns {
    right: -40px;
  }
  header#topHeader .reservationBtn {
    position: absolute;
    top: 46px;
    right: 70px;
  }
  header#topHeader #mainVisual {
    height: auto;
    padding-top: 160px;
  }
  header#topHeader #mainVisual img.pc {
    display: inline;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
  }
  header#topHeader #mainVisual .copy {
    width: 35.41vw;
    height: 3.69vw;
    padding-top: 160px;
    margin: auto 0;
    top: 0;
    right: 5.78vw;
    bottom: 0;
    left: auto;
  }
  header#topHeader #mainVisual .copy img {
    width: 100%;
  }
  header#topHeader #mainVisual .bx-wrapper {
    height: 100%;
    padding-top: 160px;
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport {
    height: 100%;
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider {
    height: 100%;
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li {
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider01 {
    padding: 0;
    background-image: url(img/top/slider01_bg_pc.jpg);
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider02 {
    padding: 0;
    background-image: url(img/top/slider02_bg_pc.jpg);
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider03 {
    padding: 0;
    background-image: url(img/top/slider03_bg_pc.jpg);
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider04 {
    padding: 0;
    background-image: url(img/top/slider04_bg_pc.jpg);
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider05 {
    padding: 0;
    background-image: url(img/top/slider05_bg_pc.jpg);
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider06 {
    padding: 0;
    background-image: url(img/top/slider06_bg_pc.jpg);
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider07 {
    padding: 0;
    background-image: url(img/top/slider07_bg_pc.jpg);
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider08 {
    padding: 0;
    background-image: url(img/top/slider08_bg_pc.jpg);
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider09 {
    padding: 0;
    background-image: url(img/top/slider09_bg_pc.jpg);
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider10 {
    padding: 0;
    background-image: url(img/top/slider10_bg_pc.jpg);
  }
  header#topHeader #mainVisual .bx-wrapper .bx-viewport #slider li.slider11 {
    padding: 0;
    background-image: url(img/top/slider11_bg_pc.jpg);
  }
  header#topHeader #mainVisual .element {
    display: block;
    position: absolute;
    right: 35px;
    bottom: -50px;
    z-index: 90;
  }
  header#topHeader #mainVisual .scroll {
    display: block;
    width: 84px;
    height: 54px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    bottom: 40px;
    left: 0;
    z-index: 90;
  }
  header#topHeader #mainVisual .scroll img {
    width: 84px;
    height: 54px;
  }
  header#scrollNav {
    display: none;
  }

  /*-----------------------------------------------------------------
    Imagination, Hapiness, Peace of mind...
    -----------------------------------------------------------------*/
  #about {
    width: 100%;
    min-height: 52vw;
    padding: 15.41vw 0 6vw;
  }
  #about .img li:nth-child(1) {
    width: 22.91vw;
    top: 10.88vw;
    right: 28.9vw;
    left: auto;
  }
  #about .img li:nth-child(2) {
    width: 15.31vw;
    top: 12.9vw;
    right: 13vw;
    left: auto;
  }
  #about .img li:nth-child(3) {
    width: 15.31vw;
    top: 26.71vw;
    right: 28.9vw;
    left: auto;
  }
  #about .img li:nth-child(4) {
    width: 22.91vw;
    top: 36.4vw;
    right: 5.4vw;
  }
  #about .img li img {
    width: 100%;
  }
  #about .copy {
    width: 80vw;
    margin: 0 auto 2.6vw;
  }
  #about .copy img {
    width: 33.28vw;
  }
  #about .txt {
    width: 80vw;
    padding-right: 40vw;
    margin: 0 auto 4.16vw;
  }
  #about .btn {
    display: flex;
    width: 80vw;
    margin: 0 auto;
  }
  #about .btn li:not(:last-child) {
    margin: 0 30px 0 0;
  }
  #about .btn li a,
#about .btn li input {
    display: block;
    width: 250px;
    height: auto;
    margin: 0 auto;
    border: 1px solid #333;
    line-height: 60px;
    text-align: center;
    letter-spacing: 0.3em;
    font-size: 18rem;
    position: relative;
    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
  }
  #about .btn li a span,
#about .btn li input span {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 7px;
    right: 15px;
  }
  #about .btn li a:hover,
#about .btn li input:hover {
    color: #fff;
    border: 1px solid #6c6565;
    background: #6c6565;
  }
  #about .btn li a:hover span,
#about .btn li input:hover span {
    -webkit-animation: arrow 2s ease-out 0s infinite alternate;
    animation: arrow 2s ease-out 0s infinite alternate;
  }
  #about .btn li a:hover span .arrow_color,
#about .btn li input:hover span .arrow_color {
    fill: #fff;
  }
  #about .element {
    display: block;
    position: absolute;
    left: 35px;
    bottom: -50px;
    z-index: 90;
  }

  @keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  @-webkit-keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  /*-----------------------------------------------------------------
  banners
  -----------------------------------------------------------------*/
  .banners {
    width: 64.5833333333vw;
    margin: 0 auto;
    padding: 0 0 180px;
  }
  .banners .banner {
    padding: 0 28px;
  }
  .banners .banner a {
    transition-duration: 0.3s;
  }
  .banners .banner a img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }
  .banners .banner a:hover {
    opacity: 0.7;
  }

  /*-----------------------------------------------------------------
    Event Plan
    -----------------------------------------------------------------*/
  #event {
    width: 100%;
    padding: 6.25vw 0 12.5vw;
    background: url(./img/top/event_element.png) left 34px bottom 110px no-repeat;
    background-size: 0.5050505051vw auto;
  }
  #event::after {
    height: 76%;
  }
  #event img {
    width: 100%;
  }
  #event h2 {
    margin-bottom: 50px;
    font-size: 48rem;
  }
  #event ul {
    display: flex;
    justify-content: center;
    width: auto;
  }
  #event ul li {
    width: 21.6145833333vw;
  }
  #event ul li:nth-of-type(n+3) {
    display: none;
  }
  #event ul li:nth-of-type(2n) {
    margin-left: 13.0208333333vw;
  }
  #event ul li a {
    width: 21.6145833333vw;
    padding: 0 0 1.8229166667vw;
    height: 100%;
    border-width: 1px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }
  #event ul li a img {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    width: 100%;
  }
  #event ul li a:hover {
    opacity: 0.7;
  }
  #event ul li a:hover img {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
  #event ul li h3 {
    margin-bottom: 2px;
    text-align: center;
    font-size: 15rem;
    line-height: 150%;
    font-family: "Cormorant Garamond", serif;
    padding: 0;
  }
  #event ul li figure {
    display: flex;
    justify-content: center;
    margin: 0 auto 15px;
    overflow: hidden;
    width: 21.6145833333vw;
  }
  #event ul li figure img {
    max-width: 21.6145833333vw;
    max-height: 21.6145833333vw;
    width: auto;
    height: auto;
  }
  #event ul li .subtitle {
    font-size: 12rem;
    color: #999;
    text-align: center;
  }
  #event ul li .more {
    width: auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 4;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  #event ul li .more div {
    padding-right: 35px;
    font-size: 12rem;
    position: relative;
    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
  }
  #event ul li .more div span {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    right: 10px;
  }
  #event ul li .more div span .arrow_color {
    fill: #999;
  }
  #event ul li .more div:hover {
    color: #ccc;
  }
  #event ul li .more div:hover span {
    -webkit-animation: arrow 2s ease-out 0s infinite alternate;
    animation: arrow 2s ease-out 0s infinite alternate;
  }
  #event ul li .more div:hover span .arrow_color {
    fill: #ccc;
  }
  #event > .more {
    margin-top: 20px;
  }
  #event > .more a,
#event > .more input {
    display: block;
    width: 250px;
    height: auto;
    margin: 0 auto;
    border: 1px solid #333;
    line-height: 60px;
    text-align: center;
    letter-spacing: 0.3em;
    font-size: 18rem;
    position: relative;
    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
  }
  #event > .more a span,
#event > .more input span {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 7px;
    right: 15px;
  }
  #event > .more a:hover,
#event > .more input:hover {
    color: #fff;
    border: 1px solid #6c6565;
    background: #6c6565;
  }
  #event > .more a:hover span,
#event > .more input:hover span {
    -webkit-animation: arrow 2s ease-out 0s infinite alternate;
    animation: arrow 2s ease-out 0s infinite alternate;
  }
  #event > .more a:hover span .arrow_color,
#event > .more input:hover span .arrow_color {
    fill: #fff;
  }

  @keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  @-webkit-keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  @keyframes leftAnim {
    0% {
      left: -500px;
    }
    100% {
      left: 500px;
    }
  }
  @keyframes bottomAnim {
    0% {
      bottom: -28vw;
    }
    100% {
      bottom: 28vw;
    }
  }
  @keyframes rightAnim {
    0% {
      right: -500px;
    }
    100% {
      right: 500px;
    }
  }
  @keyframes topAnim {
    0% {
      top: -28vw;
    }
    100% {
      top: 28vw;
    }
  }
  /*-----------------------------------------------------------------
    Basic Plan
    -----------------------------------------------------------------*/
  #basic {
    width: auto;
    padding: 160px 0 180px;
    position: relative;
  }
  #basic h2 {
    margin-bottom: 60px;
    font-size: 48rem;
  }
  #basic .list {
    justify-content: flex-start;
    width: 82vw;
    margin: 0 auto;
  }
  #basic .list li {
    width: 19vw;
    margin: 0 0 3.64vw;
  }
  #basic .list li:not(:nth-child(4n)) {
    margin-right: 2vw;
  }
  #basic .list li a {
    display: block;
    /*@include opacity(0.5);*/
  }
  #basic .list li a figure {
    overflow: hidden;
    background: #f6f2f2;
  }
  #basic .list li a figure img {
    width: 100%;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }
  #basic .list li a figure img:hover {
    opacity: 0.7;
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }
  #basic .list li a h3 {
    height: 6.5vw;
  }
  #basic .list li a h3 span {
    font-size: 22rem;
  }
  #basic .boxes {
    display: flex;
    justify-content: center;
  }
  #basic .boxes .box {
    width: 27.0833333333vw;
  }
  #basic .boxes .box + .box {
    margin-top: 0;
    margin-left: 7.2916666667vw;
  }
  #basic .boxes .box a {
    display: block;
    width: 27.0833333333vw;
    margin: 0 auto;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }
  #basic .boxes .box a .img {
    width: 27.0833333333vw;
    margin: 0 auto;
    overflow: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    width: 100%;
  }
  #basic .boxes .box a .img img {
    display: block;
    max-width: 27.0833333333vw;
    max-height: 18.75vw;
    width: auto;
    height: auto;
    transition-duration: 0.3s;
  }
  #basic .boxes .box a:hover .img img {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    opacity: 0.7;
  }
  #basic .boxes .box a:hover .more {
    color: #fff;
    border: 1px solid #6c6565;
    background: #6c6565;
  }
  #basic .boxes .box a:hover .more span {
    -webkit-animation: arrow 2s ease-out 0s infinite alternate;
    animation: arrow 2s ease-out 0s infinite alternate;
  }
  #basic .boxes .box a:hover .more span .arrow_color {
    fill: #fff;
  }
  #basic .boxes .box a .more {
    margin-top: 2.5vw;
  }
  #basic .more {
    display: block;
    width: 300px;
    height: auto;
    margin: 0 auto;
    border: 1px solid #333;
    line-height: 60px;
    text-align: center;
    letter-spacing: 0.3em;
    font-size: 18rem;
    position: relative;
    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
  }
  #basic .more span {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 7px;
    right: 15px;
  }
  #basic .element {
    display: block;
    position: absolute;
    right: 35px;
    bottom: -5px;
    z-index: 90;
  }

  @keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  @-webkit-keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  /*-----------------------------------------------------------------
    Official LINE Account
    -----------------------------------------------------------------*/
  #line {
    display: block;
    height: 34.89vw;
    background-image: url(img/top/line_bg_pc.jpg);
    position: relative;
  }
  #line div {
    width: 540px;
    height: 360px;
    padding: 60px 0 0;
    margin: auto 0;
    text-align: center;
    position: absolute;
    top: 0;
    right: 5%;
    bottom: 0;
  }
  #line div h2 img {
    width: 402px;
  }
  #line div .txt {
    margin: 15px 0 40px;
  }
  #line div .btn a {
    display: block;
    width: 404px;
    height: 60px;
    line-height: 58px;
    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
  }
  #line div .btn a span:first-of-type {
    font-size: 15rem;
  }
  #line div .btn a span:last-of-type {
    font-size: 12rem;
  }
  #line div .btn a:hover {
    color: #333;
    background: #fff;
  }

  /*-----------------------------------------------------------------
    items, 753 kimono
    -----------------------------------------------------------------*/
  #pages {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    padding: 8.25vw 0 16vw;
  }
  #pages::after {
    height: 53%;
  }
  #pages img {
    width: 100%;
  }
  #pages section {
    width: 35.93vw;
    position: relative;
    overflow: hidden;
  }
  #pages section:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
  #pages section:not(:last-of-type) {
    margin: 0 9.2vw 0 0;
  }
  #pages section a {
    display: block;
    height: 100%;
    padding: 2.34vw 6.19vw 5.2vw;
  }
  #pages section a h2 {
    margin-bottom: 2.34vw;
    font-size: 48rem;
  }
  #pages section a figure {
    margin-bottom: 1.56vw;
    overflow: hidden;
    background: #f6f2f2;
  }
  #pages section a figure img {
    width: 100%;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }
  #pages section a figure img:hover {
    opacity: 0.7;
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }
  #pages section a h3 {
    margin-bottom: 4vw;
  }
  #pages section a h3.en {
    margin-bottom: 0.5vw;
    font-size: 22rem;
  }
  #pages section a h3.jp {
    margin-bottom: 0.7vw;
    font-size: 14rem;
  }
  #pages section a .more {
    width: 71px;
    position: absolute;
    bottom: 2vw;
    padding-right: 35px;
    /*
                    -webkit-background-size: 21px 5px;
                    background-size: 21px 5px;
                    */
    font-size: 11rem;
    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
  }
  #pages section a .more span {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    right: 10px;
  }
  #pages section a .more span .arrow_color {
    fill: #999;
  }
  #pages section a .more:hover {
    color: #ccc;
  }
  #pages section a .more:hover span {
    -webkit-animation: arrow 2s ease-out 0s infinite alternate;
    animation: arrow 2s ease-out 0s infinite alternate;
  }
  #pages section a .more:hover span .arrow_color {
    fill: #ccc;
  }
  #pages section::before, #pages section::after {
    content: "";
    position: absolute;
    background: #999;
  }
  #pages section a::before, #pages section a::after {
    content: "";
    position: absolute;
    background: #999;
  }
  #pages section::before {
    bottom: 0;
    left: -35.93vw;
    width: 35.93vw;
    height: 1px;
  }
  #pages section::after {
    bottom: -500px;
    right: 0;
    width: 1px;
    height: 500px;
  }
  #pages section a::before {
    top: 0;
    right: -35.93vw;
    width: 35.93vw;
    height: 1px;
  }
  #pages section a::after {
    top: -500px;
    left: 0;
    width: 1px;
    height: 500px;
  }
  #pages section:hover::before {
    animation: leftAnim 0.4s ease-in;
  }
  #pages section:hover::after {
    animation: bottomAnim 0.4s ease-in;
  }
  #pages section a:hover::before {
    animation: rightAnim 0.4s ease-in;
  }
  #pages section a:hover::after {
    animation: topAnim 0.4s ease-in;
  }
  #pages .element {
    display: block;
    position: absolute;
    top: 340px;
    left: 35px;
    z-index: 90;
  }

  @keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  @-webkit-keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  @keyframes leftAnim {
    0% {
      left: -500px;
    }
    100% {
      left: 500px;
    }
  }
  @keyframes bottomAnim {
    0% {
      bottom: -35.93vw;
    }
    100% {
      bottom: 35.93vw;
    }
  }
  @keyframes rightAnim {
    0% {
      right: -500px;
    }
    100% {
      right: 500px;
    }
  }
  @keyframes topAnim {
    0% {
      top: -35.93vw;
    }
    100% {
      top: 35.93vw;
    }
  }
  /*-----------------------------------------------------------------
    FAQ
    -----------------------------------------------------------------*/
  #faq {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 47.6vw;
    padding: 0 12.23vw 16.7vw 55.78vw;
    margin-top: 10vw;
  }
  #faq .img li:nth-child(1) {
    width: 22.91vw;
    top: 0;
    right: auto;
    left: 5.4vw;
  }
  #faq .img li:nth-child(2) {
    width: 15.31vw;
    top: 2.08vw;
    right: auto;
    left: 28.9vw;
  }
  #faq .img li:nth-child(3) {
    width: 15.31vw;
    top: 15.8vw;
    right: auto;
    left: 13vw;
  }
  #faq .img li:nth-child(4) {
    width: 22.91vw;
    top: 25.5vw;
    right: auto;
    left: 28.9vw;
  }
  #faq .img li img {
    width: 100%;
  }
  #faq h2 {
    width: 100%;
    margin-bottom: 3vw;
  }
  #faq h2 img {
    width: auto;
    height: 2.8vw;
  }
  #faq .list {
    width: 100%;
    margin-bottom: 2.6vw;
  }
  #faq .list li:not(:last-child) {
    margin-bottom: 1vw;
  }
  #faq .list li .q {
    margin-bottom: 0.5vw;
  }
  #faq .list li .a a {
    padding-right: 35px;
    font-size: 11rem;
    position: relative;
    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
  }
  #faq .list li .a a span {
    width: 16px;
    height: 16px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: absolute;
    top: 0;
    right: 10px;
  }
  #faq .list li .a a span .arrow_color {
    fill: #999;
  }
  #faq .list li .a a:hover {
    color: #ccc;
  }
  #faq .list li .a a:hover span {
    -webkit-animation: arrow 2s ease-out 0s infinite alternate;
    animation: arrow 2s ease-out 0s infinite alternate;
  }
  #faq .list li .a a:hover span .arrow_color {
    fill: #ccc;
  }
  #faq .more {
    align-self: flex-start;
  }
  #faq .more a,
#faq .more input {
    display: block;
    width: 250px;
    height: auto;
    margin: 0 auto;
    border: 1px solid #333;
    line-height: 60px;
    text-align: center;
    letter-spacing: 0.3em;
    font-size: 18rem;
    position: relative;
    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
  }
  #faq .more a span,
#faq .more input span {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 7px;
    right: 15px;
  }
  #faq .more a:hover,
#faq .more input:hover {
    color: #fff;
    border: 1px solid #6c6565;
    background: #6c6565;
  }
  #faq .more a:hover span,
#faq .more input:hover span {
    -webkit-animation: arrow 2s ease-out 0s infinite alternate;
    animation: arrow 2s ease-out 0s infinite alternate;
  }
  #faq .more a:hover span .arrow_color,
#faq .more input:hover span .arrow_color {
    fill: #fff;
  }

  @keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  @-webkit-keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  @keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  @-webkit-keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  /*-----------------------------------------------------------------
    新着情報
    -----------------------------------------------------------------*/
  #info {
    margin-top: 10.6060606061vw;
    padding: 130px 0 160px;
  }
  #info h2 {
    margin-bottom: 40px;
    font-size: 48rem;
  }
  #info .list {
    display: flex;
    justify-content: center;
  }
  #info .list > li {
    width: 24.47vw;
    padding-top: 25px;
    margin: 0 2.99vw;
    position: relative;
    /*
      &:nth-child(n+4) {
          display: none;
      }
      */
  }
  #info .list > li:not(:last-child) {
    margin-bottom: 0;
  }
  #info .list > li a:hover div.more {
    color: #ccc;
  }
  #info .list > li a:hover div.more span {
    -webkit-animation: arrow 2s ease-out 0s infinite alternate;
    animation: arrow 2s ease-out 0s infinite alternate;
  }
  #info .list > li a:hover div.more span .arrow_color {
    fill: #ccc;
  }
  #info .list > li div.newIcon {
    height: 25px;
    margin: 0 auto;
    font-size: 12rem;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }
  #info .list > li div.date {
    margin-bottom: 5px;
    font-size: 14rem;
  }
  #info .list > li div.more {
    padding-right: 35px;
    font-size: 11rem;
    position: relative;
    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
  }
  #info .list > li div.more span {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    right: 10px;
  }
  #info .list > li div.more span .arrow_color {
    fill: #999;
  }
  #info .list > li h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    margin-bottom: 0;
    font-size: 14rem;
  }
  #info .list > li h3::before {
    content: "";
    display: block;
    height: 0;
    width: 0;
  }
  #info > .more {
    margin-top: 50px;
  }
  #info > .more a {
    display: block;
    width: 250px;
    height: auto;
    margin: 0 auto;
    border: 1px solid #333;
    line-height: 60px;
    text-align: center;
    letter-spacing: 0.3em;
    font-size: 18rem;
    position: relative;
    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;
  }
  #info > .more a span {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 7px;
    right: 15px;
  }
  #info > .more a:hover {
    color: #fff;
    border: 1px solid #6c6565;
    background: #6c6565;
  }
  #info > .more a:hover span {
    -webkit-animation: arrow 2s ease-out 0s infinite alternate;
    animation: arrow 2s ease-out 0s infinite alternate;
  }
  #info > .more a:hover span .arrow_color {
    fill: #fff;
  }

  @keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  @-webkit-keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  @keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  @-webkit-keyframes arrow {
    from {
      right: 18px;
      animation-timing-function: ease-out;
    }
    25% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    50% {
      right: 18px;
      animation-timing-function: ease-out;
    }
    75% {
      right: 12px;
      animation-timing-function: ease-in;
    }
    to {
      right: 18px;
    }
  }
  /*------------------------------ //PC用CSS ------------------------------*/
}