@charset "UTF-8";
/* ===============================================================================
Reset
=============================================================================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}

ol,ul {
  list-style: none;
}

blockquote,q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
*,
:before,
:after {
  background-repeat: no-repeat;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

button {
  border: none;
}

/* ===============================================================================
Body Setting
=============================================================================== */
html {
  font-size: 62.5%;
}
body {
  font-family: "A1 Gothic R", sans-serif;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  line-height: 2;
  font-size: 1.4rem;
}

a {
  text-decoration: none;
  color: #000000;
}

a:hover {
  opacity: 0.5;
  text-decoration: none;
}
/* a[target=_blank]:after {
    font-family: "Hobonichi-Icons";
    content: "\e914";
    font-weight: normal;
    font-size: .8em;
    position: relative;
    top: -.2em;
}*/
img {
  vertical-align: top;
  max-width: 100%;
}
.ff_A1M{
  font-family: "A1 Gothic M", sans-serif;
}
.ff_A1B{
  font-family: "A1 Gothic B", sans-serif;
}
@media screen and (min-width: 769px) {
  .spOnly {
    display: none !important;
  }
  a:hover {
    opacity: 0.5;
    text-decoration: none;
  }
}

@media screen and (max-width: 768px) {
  .pcOnly {
    display: none !important;
  }
  .spOnly {
    display: block !important;
  }
}
/* ===============================================================================
Opening
=============================================================================== */
/* #opening{
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: #fff;
  background-repeat: no-repeat;
  position: fixed;
  background-position: center center;
  background-size: cover;
  z-index: -2;
} */
#opening .bg{
  width: 100%;
  height: 100vh;
  background-color: #cdcece;
  height: calc(var(--vh, 1vh) * 100);
  position: fixed;
  background-position: center center;
  background-size: cover;
  z-index: -2;
}
#opening .js-random--a.active{
  background-image: url(../img/opening/bg01_pc.jpg);
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
          animation: fadeIn 1.5s ease 0s 1 normal;
}
#opening .js-random--b.active{
  background-image: url(../img/opening/bg02_pc.jpg);
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
          animation: fadeIn 1.5s ease 0s 1 normal;
}
#opening .js-random--c.active{
  background-image: url(../img/opening/bg03_pc.jpg);
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
          animation: fadeIn 1.5s ease 0s 1 normal;
}
#opening .js-random--d.active{
  background-image: url(../img/opening/bg04_pc.jpg);
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
          animation: fadeIn 1.5s ease 0s 1 normal;
}
#opening .js-random--e.active{
  background-image: url(../img/opening/bg05_pc.jpg);
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
          animation: fadeIn 1.5s ease 0s 1 normal;
}
#opening .js-random--f.active{
  background-image: url(../img/opening/bg06_pc.jpg);
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
          animation: fadeIn 1.5s ease 0s 1 normal;
}

#opening .uta{
  position: relative;
  height: 100vh; 
  height: calc(var(--vh, 1vh) * 100);
  z-index: 1;
}
#opening .uta div:first-of-type{
  width: 200px;
  height: 539px;
  margin-left: -5px;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
}
#opening .moji.active{
  opacity: 1;
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
          animation: fadeIn 1.5s ease 0s 1 normal;
}
#opening .moji{
  opacity: 0;
}
#opening .moji img{
  width: 50px;
}
#opening .fuda{
  width: 416px;
  height: 607px;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  z-index: -1;
}
#opening .fuda.active{
  opacity: 1;
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
          animation: fadeIn 1.5s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
@media screen and (max-width: 768px) {

  #opening .bg{
    background-size: 100% auto;
  }

  #opening .js-random--a{
    background-image: url(../img/opening/bg01_sp.jpg) !important;
  }
  #opening .js-random--b{
    background-image: url(../img/opening/bg02_sp.jpg) !important;
  }
  #opening .js-random--c{
    background-image: url(../img/opening/bg03_sp.jpg) !important;
  }
  #opening .js-random--d{
    background-image: url(../img/opening/bg04_sp.jpg) !important;
  }
  #opening .js-random--e{
    background-image: url(../img/opening/bg05_sp.jpg) !important;
  }
  #opening .js-random--f{
    background-image: url(../img/opening/bg06_sp.jpg) !important;
  }
  #opening .js-random--g{
    background-image: url(../img/opening/bg_sp.jpg) !important;
  }
  #opening .fuda{
    width: 55.466%;
    height: 45.5vh;
    height: calc(var(--vh, 1vh) * 45.5);
  }
  #opening .uta div:first-of-type{
    width: 26.466%;
    height: 40vh;
    height: calc(var(--vh, 1vh) * 40);
  }
  #opening .moji img{
    width: 6.5vw;;
  }
}
/* ===============================================================================
ContentsArea
=============================================================================== */
main{
  position: relative;
  top: 100vh;
  top: calc(var(--vh, 1vh) * 100);
}
#main .down{
  position: fixed;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 25px;
  z-index: 0;
  opacity: 0;
}
#main .down a{
  color: #fff;
}
#main .down.active{
  opacity: 1;
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
          animation: fadeIn 1.5s ease 0s 1 normal;
}
#main .wrapper{
  z-index: 1;
  position: relative;
  background-color: #ffdd31;
}
header{
  width: 100%;
}
header .inner{
  position: relative;
}
header .inner .badge{
  max-width: 754px;
  margin: -50px auto -140px;
  position: relative;
}
header .inner .ttl{
  position: relative;
}
header .inner .ttl a{
  position: absolute;
  top: 12%;
  left: 72.5%;
}
.yodogawa{
  text-align: center;
  padding: 70px 0 100px;
}
h2{
  background-color: #3e6559;
  color: #fff;
  font-size: 1.4rem;
  font-family: "A1 Gothic B", sans-serif;
  text-align: center;
  line-height: 50px;
}
.product{
  max-width: 820px;
  margin: 0 auto;
  padding: 50px 0;
}
.detail{
  max-width: 700px;
  width: 90%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 70px 0 150px;
}
.price_area{
  font-size: 1.3rem;
  font-family: "A1 Gothic M", sans-serif;
  margin-top: 5px;
}
.price_area .price{
  font-size: 1.7rem;
}
.btn_cart{
  padding-top: 26px;
}
.btn_cart a{
  font-size: 1.4rem;
  font-family: "A1 Gothic B", sans-serif;
  color: #fff;
  background-color: #ff1d25;
  display: inline-block;
  width: 274px;
  line-height: 30px;
  text-align: center;
  border-radius: 15px;
}
.btn_cart a.sold{
  background-color: #959595;
  cursor: default;
}
.stock{
  display: block;
  text-align: center;
  font-size: 1.2rem;
  color: #ff1d25;
}
.desc{
  font-size: 1.1rem;
  padding-top: 18px;
}
.contents{
  max-width: 750px;
  margin: 50px auto;
}
.banner{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.banner a{
  -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
          box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  border-radius: 5px;
}
.credit{
  text-align: center;
  padding-top: 60px;
  font-size: 1.2rem;
}
.link{
  background-color: #fff;
  font-family: "A1 Gothic M", sans-serif;
  padding: 50px 0;
}
.link ul.cart li::before{
  content: '▶︎';
  color: #3e6559;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg)
}
.link ul{
  max-width: 720px;
  width: 90%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 768px) {
  #main .down{
    width: 52px;
    bottom: 15px;
  }
  .link ul{
    display: block;
    text-align: center;
  }
  .link ul.cart{
    margin-bottom: 30px;
  }
  header .inner .ttl a{
    top: 4.1%;;
    width: 54.687%;
    left: 22.34%;
  }
  header .inner .ttl a img{
    width: 100%;
  }
  header .inner .ttl .spOnly img{
    width: 100%;
  }
  header .inner .badge{
    width: 39.06%;
    margin: -87px 0 -65px auto;
    position: relative;
  }
  header .inner .ttl img.spOnly{
    width: 100%;
  }
  .yodogawa{
    padding: 70px 0;
  }
  .yodogawa img{
    width: 80%;
  }
  .product{
    padding: 0;
  }
  .detail{
    display: block;
    padding: 40px 0 80px;
  }
  h1, .price_area, .btn_cart{
    text-align: center;
  }
  .desc{
    color: #4d4d4d;
    padding-bottom: 30px;
  }
  .contents{
    width: 350px;
  }
  .banner{
    display: block;
    text-align: center;
  }
  .banner a{
    display: block;
  }
  .banner a:first-of-type{
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 640px) {
  .contents{
    width: 80%;
  }
}
/* ===============================================================================
FooterArea
=============================================================================== */
.footer div{
  line-height: 2;
}
.footer .inner{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: end;
  -webkit-box-align: end;
          align-items: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
          justify-content: center;
  padding-top: 40px;
}
.footer .share__list {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: end;
  -webkit-box-align: end;
          align-items: flex-end;
}
.footer .share__list h5 {
  margin-right: .5em;
}
.footer .share__list ul li i {
  font-size: 2.4rem;
}
.footer h5, .footer a, .footer small {
  text-decoration: none;
  font-family: Koburina Gothic W6 JIS2004,sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
}
.footer .share__list ul {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: end;
  -webkit-box-align: end;
          align-items: flex-end;
}
.footer .share__list ul li {
  margin: 0 .2em;
}
.footer .share__list ul:after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  border-left: 1px solid #000000;
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
  margin: 0 -6px 0 15px;
  position: relative;
  top: 3px;
}
.footer .contact__list ul {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: end;
  -webkit-box-align: end;
          align-items: flex-end;
}
.footer .contact__list ul li:after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  border-left: 1px solid #000000;
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
  margin: 0 -6px 0 15px;
  position: relative;
  top: 13px;
}
.footer .footer__menu ul {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: end;
  -webkit-box-align: end;
          align-items: flex-end;
}
.footer .footer__menu ul li {
  margin: 0 .5em;
}
.footer .footer__menu ul li:first-child:before {
  margin: 0 .5em 0 0;
}
.footer .footer__menu ul li:first-child:before, .footer .footer__menu ul li:after {
  content: '｜';
  margin: 0 0 0 .5em;
  color: #000000;
  font-size: 1.8rem;
  font-family: Koburina Gothic W6 JIS2004,sans-serif;
}
.footer small {
  text-align: center;
  padding: 65px 0 100px;
  display: block;
}
@media screen and (max-width: 768px) {
  .footer .inner{
    width: 90%;
    margin: 0 auto;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
    padding-top: 30px;
  }
  .footer .share__list {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  .footer .share__list h5 {
    margin-right: 0;
  }
  .footer .share__list ul {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
    margin-top: 10px;
  }
  .footer .share__list ul li {
    margin: 0 .5em;
  }
  .footer .contact__list {
    margin-top: 20px;
  }
  .footer .contact__list ul {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
  }
  .footer .footer__menu {
    margin-top: 20px;
  }
  .footer .footer__menu ul {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
  }
  .footer .footer__menu ul li {
    margin: 0 .5em;
  }
  .footer small {
    text-align: center;
    padding: 40px 0 50px;
    display: block;
  }
  .footer .share__list ul:after,
  .footer .contact__list ul li:after{
    display: none;
  }
  .footer .footer__menu ul li:first-child:before,
  .footer .footer__menu ul li:after{
    display: none;
  }
}

/* ===============================================================================
slider
=============================================================================== */
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -30px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 10px;
    height: 10px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 10px;
    height: 10px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  text-indent: 0px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: .5;
}
.slick-dots li.slick-active button:before
{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 1;
}
.slick-slider
{
    position: relative;

    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}