/* CSSコード */
/*common
------------------------------------------------------------------------------------------------------------------------------------ */
@-webkit-keyframes flash { 0% { opacity: .6; } 100% { opacity: 1; } }
@keyframes flash { 0% { opacity: .6; } 100% { opacity: 1; } }
/* 共通設定 */
main.afull a { color: #000; text-decoration: none; }
main.afull a:hover { opacity: 1; -webkit-animation: flash 1s; animation: flash 1s; }
main.afull a.none:hover { opacity: 1; -webkit-animation: flash 0; animation: flash 0; }

/* =======================================================
   AFULL (アフル) 専用CSS
======================================================= */
main.afull { color: #8f8f8f; font-family: "Shippori Mincho B1", serif; text-align: center; }
main.afull a { color: #000; text-decoration: none; transition: opacity 0.3s; }
main.afull a:hover { opacity: 0.7; }
main.afull h3 { letter-spacing: 0.1em; color: #9a2a27; font-weight: 500; }
main.afull p { letter-spacing: 0.05em; text-align: center; }

@media screen and (max-width:767px) {
  .forPC { display: none; }
  .forSP { display: inline; }
  main.afull { line-height: 1.6; font-size: 3.5vw; }
  main.afull img { max-width: 100%; height: auto; }
  main.afull .afullTitle { font-size: 4.8vw; margin: 10vw 6.5vw 5vw 6.5vw; line-height: 1.8; }
  main.afull .afullText { margin: 0 6.5vw 25vw 6.5vw; line-height: 2.2; }
  main.afull .image { display: block; margin: 0 6.5vw; }
  main.afull .image img { width: 100%; }
}
@media screen and (min-width: 768px) {
  .forPC { display: inline; }
  .forSP { display: none; }
  main.afull { font-size: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  main.afull .afullTitle { font-size: 2.2rem; margin: 45px 0 30px; }
  main.afull .afullText { line-height: 2.2; margin-bottom: 80px; }
  main.afull .image { width: 784px; margin: 0 auto; }
  main.afull .image img { width: 784px; }
}

/* -----------------------------------
   KVセクション
----------------------------------- */
@media screen and (max-width:767px) {
  main.afull .kv { position: relative; margin: 0; }
  main.afull .kv .bg { display: block; }
  main.afull .kv .bg img { width: 100%; }
  main.afull .kv .text { position: absolute; bottom: 16.5vw; left: 0; width: 100%; z-index: 2; }
}
@media screen and (min-width: 768px) {
  main.afull .kv { position: relative; text-align: center; }
  main.afull .kv .bg img { width: 100%; }
  main.afull .kv .text { position: absolute; top: calc(50% - 15px); left: 6.7%; }
  main.afull .kv .text img { width: 280px; }
}


/* -----------------------------------
   Introセクション
----------------------------------- */
@media screen and (max-width:767px) {
  main.afull .intro { text-align: center; }
}
@media screen and (min-width: 768px) {
  main.afull .intro { text-align: center; }
}

/* -----------------------------------
   Feature (feuture) セクション
----------------------------------- */
@media screen and (max-width:767px) {
  main.afull .feuture { }
  main.afull .feuture .feutureTitle { position: relative; margin-bottom: 40px; }
  main.afull .feuture .feutureText { position: absolute; bottom: 5%; text-align: center; left: 0; right: 0; margin: auto; }
  main.afull .feuture .feutureText h4 { margin-bottom: 15px; color: #fff; font-weight: normal; font-size: 4.4vw; letter-spacing: 0.2em; line-height: 1.8; text-shadow: 1px 1px 8px #470907, 2px 2px 8px #470907; }
  main.afull .feuture .feutureText p { color: #fff; line-height: 2; text-align: center; text-shadow: 1px 1px 8px #470907, 2px 2px 8px #470907; }
  main.afull .feuture .feutureImage img { width: 100%; }
  main.afull .feuture ul { margin: 6.5vw 10vw 6.5vw; }
  main.afull .feuture ul li { margin-bottom: 14vw; }
  main.afull .feuture ul li dt { display: flex; font-size: 4vw; margin-bottom: 5vw; padding: 1vw 0 0 0; line-height: 1.7; text-align: center; background: url(../images/bg_feuture.png) center center no-repeat; background-size: 36vw 36vw; height: 36vw;  align-items: center; justify-content: center;}
  main.afull .feuture ul li dd { line-height: 1.8; text-align: justify; }
}
@media screen and (min-width: 768px) {
  main.afull .feuture { width: 100%; }
  main.afull .feuture .feutureTitle { position: relative; margin-bottom: 40px; }
  main.afull .feuture .feutureText { position: absolute; top: 40%; left: 10%; }
  main.afull .feuture .feutureText h4 { margin-bottom: 20px; color: #fff; font-weight: normal; font-size: 2.0rem; letter-spacing: 0.2em; }
  main.afull .feuture .feutureText p { color: #fff; line-height: 2.2; }
  main.afull .feuture .feutureImage img { width: 100%; }
  main.afull .feuture ul { display: flex; flex-wrap: wrap; width: 1060px; margin: 0 auto 100px auto; justify-content: space-between; }
  main.afull .feuture ul li { width: 200px; }
  main.afull .feuture ul li dt { display: flex; padding-top: 15px; text-align: center; font-size: 1.5rem; margin-bottom: 25px; padding-bottom: 10px; line-height: 1.6; background: url(../images/bg_feuture.png) center center no-repeat; background-size: 141px auto; height: 141px; align-items: center; justify-content: center; }
  main.afull .feuture ul li dd { line-height: 2; font-size: 1.4rem; }
}

/* -----------------------------------
   Slider セクション
----------------------------------- */
@keyframes scrollImage {
  from {
  transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.scrollWrap { display: flex; overflow: hidden; margin-bottom: 40px; }
.scrollList { display: flex; list-style: none; padding: 0; animation: scrollImage 50s infinite linear 0.5s both; }
.scrollItem picture { display: block; }
.scrollItem img { width: 100%; height: auto; vertical-align: top; }
.scrollItem { width: calc(100vw / 2); margin: 0 1px 0 0; }
@media screen and (max-width:767px) {
  .scrollItem { width: calc(100vw / 1.5); margin: 0 1px 0 0; }
}

/* -----------------------------------
   Product セクション
----------------------------------- */
@media screen and (max-width:767px) {
  main.afull .product { text-align: center; }
  main.afull .product .title { margin-bottom: 60px; padding: 52px 0; background-image: linear-gradient(90deg, #c26464, #f29a9a 50%, #c26464); }
  main.afull .product .title picture { width: 64.87vw; margin: 0 auto; }
  main.afull .product .title picture img { width: 64.87vw; }
  main.afull .product .spec { margin: -15vw 0 10vw; line-height: 2.2; }
  main.afull .product .spec span { color: #9a2a27; }
  main.afull .btnShop { margin-top: 5vw; }
  main.afull .btnShop img { width: 80%; }
}
@media screen and (min-width: 768px) {
  main.afull .product { text-align: center; }
  main.afull .product .title { margin-bottom: 60px; padding: 52px 0; background-image: linear-gradient(90deg, #c26464, #f29a9a 50%, #c26464); }
  main.afull .product .title picture { width: 250px; margin: 0 auto; }
  main.afull .product .title picture img { width: 250px; }
  main.afull .product .spec { margin: -20px 0 40px; line-height: 2.2; }
  main.afull .product .spec span { color: #9a2a27; }
  main.afull .btnShop img { width: 345px; transition: transform 0.3s; }
}

.js-fadeUp {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .8s, transform .8s;
}
.js-fadeUp.is-inview {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .2s;
}

.fadeUpMain {
    animation-name:fadeUpAnimeMain;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity: 0;
    }
    @keyframes fadeUpAnimeMain{
      from {
        opacity: 0;
        transform: translateY(0px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .delay-time01 { animation-delay: 1s; }
    .delay-time03 { animation-delay: 2s; }
    .delay-time02 { animation-delay: 3s; }

.wakuwakunokura { margin: 60px 20px; text-align: center }
.wakuwakunokura img { max-width: 100% }
.wakuwakunokura-anchor img { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-property: opacity; transition-property: opacity }
@media (any-hover:hover) {
	.wakuwakunokura-anchor:hover img { opacity: .6 }
}