@charset "UTF-8";
/*===========================================================================
   the DRAFTY CSS
===========================================================================*/

/*  common
 ========================================================================= */
 main {
   margin-bottom: 0 !important;
   background: #fff9f0;
   position: relative;
   font-family: "Yu Gothic","游ゴシック","游ゴシック体","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","MS Pゴシック",sans-serif;
 }

.inner {position: relative; margin: 0 auto; max-width: 1200px; width: 100%;}


/*  header
========================================================================= */
.page-global-nav {background: #fffcec;}
.page-global-nav-list {
  position: relative;
  padding: 5.67% 0 0;
}
.page-global-nav.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
}
.page-global-nav-list li {
  position: absolute;
  top: 0;
}
.page-global-nav-list li a { display: block; font-size: 0; width: 100%; height: 100%;}

#pcMenu01 {width: 4.967%; left: 3.78%;}
#pcMenu02 {width: 9.725%; left: 11.653%;}
#pcMenu03 {width: 10.647%; left: 24.201%;}
#pcMenu04 {width: 5.273%; /*left: 37.757%;*/ left: 24.201%;}
#pcMenu05 {width: 7.245%; left: 45.834%;}
.news-txt {width: 30.845%; left: 57.75%;}

/*  TOP
========================================================================= */
#mainimgArea {
  display: block;
  width: 100%;
}
.page-top #contentBox01 {
  width: 60.689%;
  margin: 17.533% auto 0;
}
.page-top #contentBox01 .content-txt-01 {margin: 0 auto 21.148%;}

.leading-bnr-list {
  width: 76.184%;
  margin: 15.645% auto 10.936%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.leading-bnr-list li {width: 47.394%;}
.leading-bnr-list li .leading-ttl {background: #e42b3d; font-size: 0; line-height: 0; width: 100%;}

/*  PRODUCT
========================================================================= */
.page-product #contentBox01 {
  width: 72.075%;
  margin: 12.935% 0 9.512% 15.334%;
}
.page-product #contentBox02 .content-ttl {
  width: 70.05%;
  margin: 0 0 13.569% 15.611%;
}
.method-flow-list {
  width: 53.002%;
  margin: 0 0 18.618% 23.37%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.method-flow-list li {position: relative; margin-bottom: 16.067%;}
.method-flow-list li:nth-child(odd) {width: 42.357%;}
.method-flow-list li:nth-child(even) {width: 45.796%;}
.method-flow-list li:nth-child(3),
.method-flow-list li:nth-child(4) {margin-bottom: 0;}

.method-flow-list li .ab-item {
  position: absolute;
  width: 41.845%;
  top: 3.756%;
  left: 35.861%;
}

.btn-top {
  background: #500f14;
  width: 100%;
}
.btn-top a {
  display: block;
  width: 100%; height: 100%;
  font-size: 0;
  padding: 1.647% 0 1.524%;
}
.btn-top a img {
  display: block;
  width: 9.701%;
  margin: 0 0 0 45.129%;
}

/*  Q&A
========================================================================= */
.page-faq #contentBox01 {
  margin: 18.775% 0 17.95%;
}
.faq-list {
  width: 72.323%;
  margin: 0 0 0 14.317%;
}
.faq-list li:not(:last-child) {margin-bottom: 8.459%;}
.faq-list li .faq-txt {
  font-size: 20px;
  font-weight: 600;
  color: #3e0000;
  line-height: 1.7;
  padding: 3.851% 0 0;
}

/*  購入ボタン
========================================================================= */
.p-absolute {position: absolute !important;}
.conductor-cart-area,
.conductor-bnr-list button {transition: opacity .2s linear;}
.conductor-cart-area:hover,
.conductor-bnr-list button:hover {opacity: .8;}
.conductor-cart-area {
  width: 70px;
  position: fixed;
  right: 30px;
  bottom: 120px;
  z-index: 2;
  opacity: 0;
}
.conductor-cart-area button,
.conductor-bnr-list.current li button {width: 100%;}
.conductor-cart-area.p-absolute {
  top: auto !important;
  bottom: 56px;
  left: auto !important;
  /*right: 30px;*/
  opacity: 1;
}

.cart-icon {
  background: none;
  border: none;
  line-height: 0;
}
.conductor-bnr-list {display: none;}
.conductor-bnr-list.current {
  position: fixed !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 66.666%;
  background: #f1f1f1;
  border: 2px solid #d60e1c;
  padding: 2% 0 2% 2%;
  letter-spacing: -1em;
  z-index: 1;
  bottom: 108px;
  right: 160px;
}
.conductor-bnr-list.current.p-absolute {
  top: auto !important;
  bottom: 40px;
  position: absolute !important;
}
.conductor-bnr-list.current li {
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  position: relative;
}
.conductor-bnr-list.current li a {display: block;}

.bnr-amazon {width: 15.6599%;}
.bnr-rakuten {width: 16.485%;}
.bnr-yahoo {width: 28.1425%;}
.bnr-lohaco {width: 23.1975%;}

.conductor-bnr-list li a[target="_blank"]:not(.m-no-icon):after {
    position: absolute;
    display: block;
    margin: 0;
    right: -16px;
    bottom: 0;
}

.opacity-1 {opacity: 1;}

.anim-slideout-x {
  opacity: 1;
  animation: SlideOutX 1s;
}
@keyframes SlideOutX {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(1000px);
  }
}
.anim-slidein-x-right {
  opacity: 0;
  animation: SlideInX 1s;
}
@keyframes SlideInX {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(1000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*-----------------------------
	1200px以上
-----------------------------*/
@media screen and (min-width: 1200px) {
  .conductor-bnr-list.current {
    width: 800px;
    padding: 24px 0 24px 24px;
  }
}

/*-----------------------------
	768px以下
-----------------------------*/
@media screen and (max-width: 768px) {

  .acd-box h3.c-ttl {
    background: #1a1311;
    width: 100% !important;
    margin-top: 0 !important;
  }

  .acd-close-btn {
    background: #bb0015;
    display: block;
    width: 100%;
    border: none;
    font-size: 0;
    line-height: 0;
  }

  .acd-box h3.c-ttl {position: relative;}
  .acd-box h3.c-ttl::before {
    content: url(/the_drafty/media/svg/arrow_white.svg);
    position: absolute;
    width: 3.086796724744197%;
    top: 37.16801895473385%;
    left: 0;
  }
  .acd-box.active h3.c-ttl::before {
    transform:rotate(90deg);
    transform-origin:0 0;
    top: 43.800750397133825%;
  }

  #sectionArea01,
  #sectionArea02,
  #sectionArea03,
  #sectionArea04,
  #sectionArea05 {margin-bottom: 4.253961535577919%;}

  /* fixed cart-btn
  =========================== */
  /*購入ボタン*/
  .conductor-cart-area {width: 14%; bottom: 80px; right: 10px; transition: all .2s linear;}
  .conductor-cart-area.current {bottom: 55.5vw !important;}
  .conductor-cart-area.p-absolute {bottom: 40px;}
  .conductor-bnr-list.current {width: 100%; left: 0; bottom: 5vw; padding: 5% 0 0 5%; z-index: 999; justify-content: space-evenly;}
  .conductor-bnr-list.current.p-absolute,
  .conductor-bnr-list.current li {margin-bottom: 5%; float: left; margin-right: 5%;}
  .conductor-bnr-list.current.p-absolute {bottom: 0;}

  .bnr-amazon {width: 32.6145%;}
  .bnr-rakuten {width: 33.7864%;}
  .bnr-yahoo {width: 45.0625%;}
  .bnr-lohaco {width: 38.014%;}

  .conductor-bnr-list.current li a[target="_blank"]:not(.m-no-icon):after {
    right: -2.9333vw;
  }

  /*header
  ========================================================================= */
  .page-global-nav {
    position: relative;
    background: #1a1311;
  }
  button.menu-toggl-btn {
    display: block;
    width: 10.391%;
    float: right;
    font-size: 0;
    padding: 4.59% 0 4.363%;
    margin-right: 13.346%;
  }
  button.menu-toggl-btn::before {
    content: url('/the_drafty/media/svg/common/icb_humberger_menu.svg');
    position: absolute;
    width: 5.751172335903548%;
    top: 31.986268040327083%;
    right: 4.210957718274654%;
  }
  button.menu-toggl-btn.active::before {
    content: url('/the_drafty/media/svg/common/icn_humberger_close.svg');
    position: absolute;
    width: 4.4841482745034025%;
    top: 31.38932730353483%;
    right: 4.293349575970488%;
  }
  button.menu-toggl-btn::after {
    content: "　";
    clear: both;
    display: block;
    height: 0;;
  }
  .page-global-nav-list {
    position: absolute;
    width: 100%;
    top: 100%;
    z-index: 3;
    background: #fff;
    display: none;
    padding: 0;
  }
  .page-global-nav-list li {
    background: #e42b3d;
    margin-top: 4.522%;
    font-size: 0;
    position: relative;
  }

  /*top
  ========================================================================= */
  .page-top #contentBox01 {
    width: 68.503%;
    margin-top: 16.167%;
  }
  .page-top #contentBox01 .content-txt-01 {margin-bottom: 17.776%;}
  .leading-bnr-list {
    width: 86.669%;
    display: block;
    margin: 19.812% auto;
  }
  .leading-bnr-list li {width: 100%; font-size: 0;}
  .leading-bnr-list li:first-child {margin-bottom: 7.692%;}

  /*  PRODUCT
  ========================================================================= */
  .page-product #contentBox01 {
    width: 67.774%;
    margin: 16.063% 0 12.571% 16.108%;
  }
  .page-product #contentBox02 .content-ttl {
    width: 66.56%;
    margin: 0 0 12.222% 16.84%;
  }
  .method-flow-list {
    width: 74.384%;
    margin: 0 0 27.304% 14.105%;
  }
  .btn-top a {padding: 5.433% 0 6.456%;}
  .btn-top a img {width: 21.168%; margin: 0 0 0 40.48%;}

  /*  Q&A
  ========================================================================= */
  .page-faq #contentBox01 {margin: 0 auto 0;}
  .faq-list {width: 100%; margin: 0 auto;}
  
  .faq-list .faq-ttl {border-bottom: 1px solid #000;}
  .faq-list li {margin: 0 !important;}
  .faq-list li .faq-txt {
    font-size: 3.626vw;
    background: #fff1c2;
    border-bottom: 1px solid #000;
    padding: 11.3% 0 10.093%;
    display: none;
  }
  .faq-list li .faq-txt p {
    width: 59.312%;
    margin: 0 0 0 20.767%;
  }
  .faq-list li .close-btn {
    width: 29.057%;
    margin: 7.956% 0 0 35.894%;
  }


  /*  fixed-attention-txt
  ========================================================================= */
  .fixed-attention-txt {
    background: #1a1311;
    font-size: 0;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
  }

}