@charset "UTF-8";
@keyframes flicker {
  0% {
    opacity: 0.5143050905; }
  5% {
    opacity: 0.1937973411; }
  10% {
    opacity: 0.8727020259; }
  15% {
    opacity: 0.8319693752; }
  20% {
    opacity: 0.2014521873; }
  25% {
    opacity: 0.6973371672; }
  30% {
    opacity: 0.2157634727; }
  35% {
    opacity: 0.712485932; }
  40% {
    opacity: 0.682172145; }
  45% {
    opacity: 0.5064144632; }
  50% {
    opacity: 0.215973038; }
  55% {
    opacity: 0.595234671; }
  60% {
    opacity: 0.8611647919; }
  65% {
    opacity: 0.1307767747; }
  70% {
    opacity: 0.789133936; }
  75% {
    opacity: 0.6463169744; }
  80% {
    opacity: 0.0875644954; }
  85% {
    opacity: 0.103667045; }
  90% {
    opacity: 0.1251028486; }
  95% {
    opacity: 0.7697638819; }
  100% {
    opacity: 0.0904828062; } }
@keyframes hoverin {
  0% {
    transform: translateX(-101%);
    opacity: 1; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes hoverout {
  0% {
    transform: translateY(0);
    left: 0;
    opacity: 1; }
  100% {
    transform: translateY(0);
    left: 101%;
    opacity: 1; } }
@keyframes hoverin_reverse {
  0% {
    transform: translateX(101%);
    opacity: 1; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes hoverout_reverse {
  0% {
    transform: translateY(0);
    left: 0;
    opacity: 1; }
  100% {
    transform: translateY(0);
    left: -101%;
    opacity: 1; } }
.buruburu {
  display: inline-block;
  animation: hurueru .1s  infinite; }

@keyframes hurueru {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg); }
  25% {
    transform: translate(2px, 2px) rotateZ(1deg); }
  50% {
    transform: translate(0px, 2px) rotateZ(0deg); }
  75% {
    transform: translate(2px, 0px) rotateZ(-1deg); }
  100% {
    transform: translate(0px, 0px) rotateZ(0deg); } }
@keyframes wave {
  0% {
    background-position: 0 0; }
  100% {
    background-position: round-decimal(6.9444444444vw, 3) 0; } }
@media screen and (min-width: 768px) {
  @keyframes wave {
    0% {
      background-position: 0 0; }
    100% {
      background-position: 100px 0; } } }
@keyframes sdb {
  0% {
    transform: translate(0, -2.564vw);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: translate(0, 0vw);
    opacity: 0; } }
@keyframes sdbpc {
  0% {
    transform: translate(0, -20px);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: translate(0, 0);
    opacity: 0; } }
[data-opacity] {
  opacity: 0;
  filter: blur(10px) brightness(0);
  transform: translateY(0);
  transition: 1.2s 0s cubic-bezier(0.165, 0.84, 0.44, 1); }

[data-opacity].animated {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0) brightness(1); }

@media screen and (min-width: 768px) {
  [data-pc-opacity] {
    opacity: 0;
    transform: translateY(0);
    transition: 1.2s 0s cubic-bezier(0.23, 1, 0.32, 1); }

  .ie11 [data-pc-opacity] {
    opacity: 0;
    transform: translateY(20px);
    transition: 1.2s 0s cubic-bezier(0.23, 1, 0.32, 1); }

  [data-pc-opacity].animated {
    opacity: 1;
    transform: translateY(0); } }
@media screen and (max-width: 767px) {
  [data-opacity],
  [data-sp-opacity] {
    opacity: 0;
    transform: translateY(0);
    transition: 1.2s 0s cubic-bezier(0.23, 1, 0.32, 1); }

  .ie11 [data-opacity],
  .ie11 [data-sp-opacity] {
    opacity: 0;
    transform: translateY(0);
    transition: 1.2s 0s cubic-bezier(0.23, 1, 0.32, 1); }

  [data-sp-opacity].animated,
  [data-opacity].animated {
    opacity: 1;
    transform: translateY(0); } }
[data-sp-opacity],
[data-pc-opacity],
[data-opacity],
[data-once] {
  will-change: transform;
  backface-visibility: hidden; }

body.top main {
  background: url("../img/bg@sp.jpg") repeat-y center top/100% auto; }
body.top #contents {
  padding: 0 0 12.821vw; }
  body.top #contents .btn_more {
    color: #fff;
    background: url("../img/btn_base.png") no-repeat left top/cover;
    width: 29.615vw;
    height: 8.462vw;
    display: block;
    font-size: 3.59vw;
    font-weight: 700;
    padding: 2.308vw 0 0;
    margin: 3.205vw 1.538vw 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    /*&:hover::after{transform: scale(1);transition:transform 1.3s $easeOutExpo;}*/ }
    body.top #contents .btn_more::after {
      content: '';
      width: 59.231vw;
      height: 59.231vw;
      background-color: rgba(255, 255, 255, 0.15);
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -29.615vw 0 0 -29.615vw;
      z-index: 1000;
      border-radius: 50%;
      transform: scale(0);
      transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
  body.top #contents #news {
    padding: 0 0vw;
    width: 94.872vw;
    margin: 0 0 0 2.564vw; }
    body.top #contents #news h2 {
      margin-bottom: 4.872vw; }
    body.top #contents #news a.btn_more {
      position: absolute;
      right: 0;
      top: 0; }
  body.top #contents .videos {
    padding: 0 0vw;
    width: 94.872vw;
    margin: 10.256vw 0 0 2.564vw; }
    body.top #contents .videos .swiper-container {
      padding: 0.641vw 0 0; }
    body.top #contents .videos img {
      width: 100%;
      height: auto; }
    body.top #contents .videos .swiper-slide {
      position: relative;
      padding: 0 3.205vw;
      		/*
          a:hover{
            span {transform: scale(1.16); transition: transform 0.75s, filter 1.5s $easeOutCubic; filter: brightness(1.3);}
            span  picture:nth-child(2){transform: scale(1.16); opacity: 0;transition: transform 0.6s , opacity 0.55s;}
      			i {filter: invert(100%); transition: 0.6s $easeOutCubic; transform: scale(1.1);}
          }
      		*/ }
      body.top #contents .videos .swiper-slide a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 88.462vw;
        left: 2.564vw;
        overflow: hidden; }
        body.top #contents .videos .swiper-slide a::after {
          content: '';
          width: 100%;
          height: 100%;
          border: 1px solid #fff;
          position: absolute;
          left: 0;
          top: 0; }
        body.top #contents .videos .swiper-slide a::before {
          content: '';
          background: url("../img/top/pv_mask.png") center center no-repeat;
          background-size: cover;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 100;
          border: 1px solid #fff; }
        body.top #contents .videos .swiper-slide a i {
          background: url("../img/btn_play.webp") no-repeat center center/cover;
          width: 15vw;
          height: 10.641vw;
          position: absolute;
          z-index: 101;
          transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
          backface-visibility: hidden; }
        .nowebp body.top #contents .videos .swiper-slide a i {
          background-image: url("../img/btn_play.png"); }
        body.top #contents .videos .swiper-slide a span {
          transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
          overflow: hidden;
          display: block;
          position: relative;
          z-index: 0; }
          body.top #contents .videos .swiper-slide a span img {
            width: 100%;
            height: auto;
            position: relative;
            z-index: 0; }
          body.top #contents .videos .swiper-slide a span picture:nth-child(2) {
            transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10; }
      body.top #contents .videos .swiper-slide p {
        font-size: 3.333vw;
        line-height: 1.346;
        color: #fff;
        padding: 2.564vw 3.205vw;
        text-align: center; }
    body.top #contents .videos .swiper-button-next {
      top: 17.949vw; }
    body.top #contents .videos .swiper-button-prev {
      top: 17.949vw; }
  body.top #contents .about {
    margin: 3.846vw 0 0;
    	/*
    	.hoverin{
      .cell:nth-child(1){
      	.img {transform: scale(1.12); transition: transform 0.75s $easeOutCubic , filter 1.5s $easeOutCubic; filter: brightness(1.3);}
    		.img picture:nth-child(2){transform: scale(1.12); opacity: 0; transition: transform 0.6s  $easeOutCubic, opacity 0.4s  $easeOutCubic;}
    		}
    	}
    	*/ }
    body.top #contents .about img {
      width: 100%;
      height: auto; }
    body.top #contents .about h3 {
      padding: 4.231vw 1.538vw 0; }
    body.top #contents .about .overview h3 img {
      width: 75.897vw; }
    body.top #contents .about .story h3 img {
      width: 46.923vw; }
    body.top #contents .about h4 {
      color: #fff;
      font-size: 6.026vw;
      line-height: 1.277;
      margin-top: 2.564vw;
      padding: 0 1.538vw;
      font-weight: 700; }
    body.top #contents .about p {
      color: #fff;
      font-size: 3.333vw;
      line-height: 1.346;
      margin-top: 2.564vw;
      padding: 0 1.538vw; }
    body.top #contents .about .cell {
      padding-bottom: 0;
      margin-bottom: 5.385vw;
      overflow: hidden; }
      body.top #contents .about .cell .img {
        display: block;
        position: relative;
        overflow: hidden;
        transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); }
        body.top #contents .about .cell .img picture + picture {
          position: absolute;
          left: 0;
          top: 0;
          transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1); }
  body.top #contents .features {
    padding: 0;
    width: 96.667vw;
    margin: 6.41vw 0 0 1.667vw; }
    body.top #contents .features h2 {
      position: relative;
      left: 0.897vw;
      margin-bottom: -0.769vw; }
    body.top #contents .features .four_class {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: center;
      position: relative;
      font-size: 0;
      line-height: 1; }
      body.top #contents .features .four_class::after {
        content: '';
        background: url("../img/top/features_title.webp") no-repeat left top/cover;
        width: 17.051vw;
        height: 25vw;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -12.436vw 0 0 -8.59vw; }
      body.top #contents .features .four_class .feature {
        margin: 0.897vw;
        width: 46.41vw;
        position: relative;
        			 /*
            	a:hover{
              	span.bg {transform: scale(1.16); transition: transform 0.75s, filter 1.5s $easeOutCubic; filter: brightness(1.2);}
              	span.bg  picture:nth-child(2){transform: scale(1.16); opacity: 0;transition: transform 0.6s $easeOutCubic, opacity 0.55s $easeOutCubic;}
        				&::after{transition: 0.6s $easeOutCubic; transform: scale(1.0);}
            	}
        			*/
        /*
        a:hover header {transition: 0.6s $easeOutCubic;}
        &:nth-child(1) a:hover::after,
        &:nth-child(1) a:hover header {filter: drop-shadow(0px 0px 10px #7b0f02) invert(100%);}
        &:nth-child(2) a:hover::after,
        &:nth-child(2) a:hover header {filter: drop-shadow(0px 0px 10px #50b9ec) invert(100%);}
        &:nth-child(3) a:hover::after,
        &:nth-child(3) a:hover header {filter: drop-shadow(0px 0px 10px #0f1cbd) invert(100%);}
        */ }
        body.top #contents .features .four_class .feature a {
          display: block;
          position: relative;
          transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
          overflow: hidden; }
          body.top #contents .features .four_class .feature a::after {
            content: '';
            background: url("../img/btn_plus.png") no-repeat left top/cover;
            width: 5.513vw;
            height: 5.513vw;
            position: absolute;
            left: 1.282vw;
            top: 1.282vw;
            z-index: 10;
            backface-visibility: hidden;
            transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); }
        body.top #contents .features .four_class .feature a.disabled {
          pointer-events: none; }
        body.top #contents .features .four_class .feature a.disabled::after {
          display: none; }
        body.top #contents .features .four_class .feature .bg {
          position: relative;
          z-index: 0; }
        body.top #contents .features .four_class .feature .bg img {
          width: 100%;
          height: auto; }
        body.top #contents .features .four_class .feature span.bg {
          transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
          overflow: hidden;
          display: block;
          position: relative;
          z-index: 0; }
          body.top #contents .features .four_class .feature span.bg img {
            width: 100%;
            height: auto;
            position: relative;
            z-index: 0; }
          body.top #contents .features .four_class .feature span.bg picture:nth-child(2) {
            transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10; }
        body.top #contents .features .four_class .feature header {
          position: absolute;
          z-index: 10;
          font-size: 0;
          line-height: 1;
          left: 0;
          bottom: 2.564vw;
          backface-visibility: hidden;
          transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); }
        body.top #contents .features .four_class .feature:nth-child(1) header img {
          height: 7.308vw;
          width: auto; }
        body.top #contents .features .four_class .feature:nth-child(2) a::after, body.top #contents .features .four_class .feature:nth-child(4) a::after {
          left: inherit;
          right: 1.282vw; }
        body.top #contents .features .four_class .feature:nth-child(2) header, body.top #contents .features .four_class .feature:nth-child(4) header {
          left: inherit;
          right: 0; }
        body.top #contents .features .four_class .feature:nth-child(2) header img {
          height: 7.564vw;
          width: auto;
          left: inherit;
          right: 0; }
        body.top #contents .features .four_class .feature:nth-child(3) header img {
          height: 7.692vw;
          width: auto; }
        body.top #contents .features .four_class .feature:nth-child(4) header img {
          height: 7.564vw;
          width: auto;
          left: inherit;
          right: 0; }
    body.top #contents .features .lead {
      color: #fff;
      font-size: 3.333vw;
      line-height: 1.462;
      text-align: center;
      margin: 1.795vw 0 0; }
  body.top #contents .customize {
    margin: 8.974vw 0 0;
    	/*
      a:hover ~ .wrap{
      	.img {transform: scale(1.06); transition: transform 0.75s $easeOutCubic , filter 1.5s $easeOutCubic; filter: brightness(1.3);}
    		.img picture:nth-child(2){transform: scale(1.06); opacity: 0; transition: transform 0.6s  $easeOutCubic, opacity 0.4s  $easeOutCubic;}
    	}
    	*/ }
    body.top #contents .customize .img {
      display: block;
      position: relative;
      overflow: hidden;
      transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); }
      body.top #contents .customize .img picture + picture {
        position: absolute;
        left: 0;
        top: 0;
        transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1); }
    body.top #contents .customize img {
      width: 100%;
      height: auto;
      position: relative;
      z-index: 0; }
    body.top #contents .customize header {
      position: absolute;
      left: 0;
      bottom: 1.026vw;
      z-index: 10;
      color: #fff; }
      body.top #contents .customize header h3 {
        background: url("../img/bg_dot.png") repeat-x left top/auto 5.897vw;
        font-size: 5.128vw;
        line-height: 5.897vw;
        padding: 0 1.282vw 0 2.564vw;
        display: inline-block;
        position: relative;
        top: -0.513vw;
        font-family: "Noto Sans JP", sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; }
        body.top #contents .customize header h3 span {
          font-weight: 700;
          display: block; }
      body.top #contents .customize header p span {
        background: #000;
        line-height: 3.59vw;
        padding: 0.128vw 1.282vw 0 1.923vw;
        margin-top: 0.769vw;
        display: inline-block;
        font-size: 3.205vw;
        white-space: nowrap; }
    body.top #contents .customize .wrap {
      overflow: hidden;
      position: relative; }
    body.top #contents .customize .pc-item {
      display: none; }
  body.top #contents .gallery {
    margin: 12.821vw 0 0;
    padding: 0 0 0 1.667vw;
    width: 100vw;
    		/*
        a:hover{
          span {transform: scale(1.16); transition: transform 0.75s, filter 1.5s $easeOutCubic; filter: brightness(1.3);}
          span  picture:nth-child(2){transform: scale(1.16); opacity: 0; transition: transform 0.6s  $easeOutCubic, opacity 0.55s  $easeOutCubic;}
    			&::after{filter: invert(100%); transition: 0.6s $easeOutCubic; transform: scale(1.0);}
        }
    		*/ }
    body.top #contents .gallery h2 {
      position: relative;
      left: 0.897vw; }
    body.top #contents .gallery img {
      width: 100%;
      height: auto; }
    body.top #contents .gallery a {
      position: relative;
      display: inline-block;
      overflow: hidden;
      margin: 0 0.897vw 1.282vw;
      vertical-align: top; }
      body.top #contents .gallery a span {
        transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        overflow: hidden;
        display: block;
        position: relative;
        z-index: 0; }
        body.top #contents .gallery a span img {
          width: 100%;
          height: auto;
          position: relative;
          z-index: 0; }
        body.top #contents .gallery a span picture:nth-child(2) {
          transition: transform 0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1);
          position: absolute;
          left: 0;
          top: 0;
          z-index: 10;
          width: 100%;
          height: auto; }
      body.top #contents .gallery a::after {
        content: '';
        background: url("../img/btn_plus.png") no-repeat left top/cover;
        width: 5.513vw;
        height: 5.513vw;
        position: absolute;
        right: 2.051vw;
        bottom: 2.051vw;
        z-index: 10;
        transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
        backface-visibility: hidden; }
    body.top #contents .gallery .split a {
      margin-bottom: 1.795vw;
      width: 46.538vw; }
      body.top #contents .gallery .split a::after {
        width: 3.846vw;
        height: 3.846vw;
        right: 1.282vw;
        bottom: 1.282vw;
        z-index: 10; }
  body.top #contents .products {
    margin: 11.026vw 0 0;
    position: relative; }
    body.top #contents .products .cell {
      position: relative;
      padding: 0 3.846vw; }
      body.top #contents .products .cell:nth-child(1) {
        padding-bottom: 23.077vw;
        margin-bottom: -2.821vw; }
      body.top #contents .products .cell:nth-child(1)::after {
        content: '';
        background: url("../img/top/bg_products@sp.png") no-repeat left top/cover;
        width: 98.077vw;
        height: 133.462vw;
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: -49.103vw;
        z-index: -1; }
    body.top #contents .products h2 {
      margin-bottom: 1.41vw; }
    body.top #contents .products img[src*='package'] {
      height: 35.897vw;
      margin: 0 auto;
      display: flex;
      justify-content: center; }
    body.top #contents .products h3 {
      font-size: 5.128vw;
      line-height: 1.2;
      color: #fff;
      padding: 1.282vw 0vw 0;
      letter-spacing: -0.02em;
      font-weight: 900; }
    body.top #contents .products .cell:nth-child(1) dl {
      font-size: 3.077vw;
      line-height: 1.346;
      color: #fff;
      padding: 0 0vw;
      margin-top: 2.308vw; }
      body.top #contents .products .cell:nth-child(1) dl dt {
        font-weight: bold;
        padding-top: 1.282vw; }
      body.top #contents .products .cell:nth-child(1) dl a {
        color: #fff;
        text-decoration: underline; }
    body.top #contents .products dd span.annotation {
      margin-top: 2.564vw;
      display: block; }
    body.top #contents .products #btn_goto_shop.disabled a {
      filter: grayscale(200%);
      pointer-events: none;
      opacity: 0.5; }
    body.top #contents .products p.btnundertxt {
      font-size: 1.923vw;
      color: #fff;
      margin: 3.846vw 0 -3.846vw 0;
      text-align: center;
      line-height: 1.5em; }
  body.top #contents .spec {
    margin: 12.821vw 0 0; }
    body.top #contents .spec h2 {
      margin-bottom: 1.026vw; }
    body.top #contents .spec .cell + .cell {
      margin-top: 2.564vw; }
    body.top #contents .spec .notes {
      font-size: 2.051vw;
      line-height: 2.692vw;
      color: #fff;
      padding: 1.923vw 0.641vw; }
      body.top #contents .spec .notes li {
        text-indent: -2.5em;
        padding-left: 2.5em; }
      body.top #contents .spec .notes li ~ li {
        margin-top: 1.923vw; }
    body.top #contents .spec table td p + p {
      margin-top: 1.2em; }
body.top .spec_btn img {
  transition: 1s; }
body.top .spec_btn img:hover {
  opacity: 0.5; }

@media screen and (min-width: 768px) {
  /*  pc 768 ~
  ************************************/
  body.top main {
    background: url("../img/bg.jpg") repeat-y center top/100% auto;
    background-attachment: fixed; }
  body.top #contents {
    padding: 0 0;
    		 /*
    	 #news {padding: 0 14px 0 13px; width:inherit; margin: 90px auto 0;
    		h2{margin-bottom: 5px; margin-left: 7px;}
    		 .news-area { padding: 0; align-content:center !important; display: block !important; justify-content: center;
        	.item {position: relative;
    			}
    		 }
    		 .swiper-button-next,
    		 .swiper-button-prev {display: none;}
    	}
    	*/ }
    body.top #contents .btn_more {
      width: 165px;
      height: 47px;
      font-size: 20px;
      padding: 12px 0 0;
      margin: 0 0; }
      body.top #contents .btn_more::after {
        content: '';
        width: 330px;
        height: 330px;
        margin: -165px 0 0 -165px; }
      body.top #contents .btn_more:hover::after {
        transform: scale(1);
        transition: transform 1.3s cubic-bezier(0.19, 1, 0.22, 1); }
    body.top #contents .features {
      width: auto;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 13px; }
      body.top #contents .features h2 {
        left: 13px;
        margin-bottom: 0; }
      body.top #contents .features .four_class::after {
        width: 133px;
        height: 195px;
        margin: -97px 0 0 -67px; }
      body.top #contents .features .four_class .feature {
        margin: 7px;
        width: 693px; }
        body.top #contents .features .four_class .feature a::after {
          width: 37px;
          height: 37px;
          left: 20px;
          top: 20px; }
        body.top #contents .features .four_class .feature header {
          position: absolute;
          z-index: 10;
          font-size: 0;
          line-height: 1;
          left: -1px;
          bottom: 13px; }
        body.top #contents .features .four_class .feature:nth-child(1) header img {
          height: 49px;
          width: auto; }
        body.top #contents .features .four_class .feature:nth-child(2) a::after, body.top #contents .features .four_class .feature:nth-child(4) a::after {
          left: inherit;
          right: 20px; }
        body.top #contents .features .four_class .feature:nth-child(2) header, body.top #contents .features .four_class .feature:nth-child(4) header {
          left: inherit;
          right: -1px; }
        body.top #contents .features .four_class .feature:nth-child(2) header img {
          height: 50px;
          width: auto;
          left: inherit;
          right: 0; }
        body.top #contents .features .four_class .feature:nth-child(3) header img {
          height: 50px;
          width: auto; }
        body.top #contents .features .four_class .feature:nth-child(4) header img {
          height: 50px;
          width: auto;
          left: inherit;
          right: 0; }
      body.top #contents .features .lead {
        font-size: 16px;
        line-height: 1.75;
        margin: 20px 0 0; } }
@media screen and (min-width: 768px) {
  /*  pc 768 ~
  ************************************/
  body.top #contents {
    /* news-area */ }
    body.top #contents #news {
      padding: 0;
      margin: 90px auto 0;
      width: inherit;
      font-size: 0;
      line-height: 1; }
      body.top #contents #news .wrap {
        padding: 0 0 0 16.667px; }
      body.top #contents #news a.btn_more {
        position: absolute;
        right: 20.833px;
        top: 19.167px; }
      body.top #contents #news h2 {
        margin: 0 0 4.167px 0; }
      body.top #contents #news .news-area {
        padding: 0;
        align-content: center !important;
        display: block !important;
        justify-content: center; }
        body.top #contents #news .news-area .item {
          position: relative;
          width: 380px;
          margin-right: 11.667px; }
          body.top #contents #news .news-area .item a {
            width: 380px;
            min-height: 320.833px;
            background: #000; }
          body.top #contents #news .news-area .item figure {
            height: 215px; }
            body.top #contents #news .news-area .item figure img {
              width: 100%;
              height: auto; }
          body.top #contents #news .news-area .item dl {
            padding: 12.5px 25px 12.5px; }
            body.top #contents #news .news-area .item dl dt {
              font-size: 13.333px;
              margin-bottom: 8.333px; }
            body.top #contents #news .news-area .item dl dd {
              font-size: 13.333px; }
        body.top #contents #news .news-area .item:last-child {
          margin-right: 0; }
      body.top #contents #news .swiper-button-next,
      body.top #contents #news .swiper-button-prev {
        display: none; }
    body.top #contents .videos {
      padding: 0;
      width: 100%;
      max-width: inherit;
      min-width: 1200px;
      margin: 108px auto 0; }
      body.top #contents .videos h2 {
        width: 1000px;
        margin: 0 auto; }
      body.top #contents .videos .swiper-container {
        padding: 5px 0 0; }
      body.top #contents .videos .swiper-slide {
        padding: 0 0;
        width: 1000px;
        transition: transform 0.4s;
        margin: 0 20px; }
        body.top #contents .videos .swiper-slide > img {
          transform: scale(0.88);
          transition: transform 0.4s; }
        body.top #contents .videos .swiper-slide a, body.top #contents .videos .swiper-slide iframe {
          transform: scale(0.88);
          transition: transform 0.4s; }
        body.top #contents .videos .swiper-slide p {
          opacity: 0;
          transition: opacity 0.4s; }
        body.top #contents .videos .swiper-slide a {
          width: 1000px;
          left: 0;
          overflow: hidden; }
          body.top #contents .videos .swiper-slide a i {
            width: 85px;
            height: 59px;
            left: 50%;
            top: 50%;
            margin: -29px 0 0 -42px; }
        body.top #contents .videos .swiper-slide a:hover span {
          transform: scale(1.16);
          transition: transform 0.75s, filter 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
          filter: brightness(1.3); }
          body.top #contents .videos .swiper-slide a:hover span::after {
            animation: flicker 3s infinite;
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(51, 51, 51, 0.06);
            opacity: 0; }
        body.top #contents .videos .swiper-slide a:hover span picture:nth-child(2) {
          transform: scale(1.16);
          opacity: 0;
          transition: transform 0.6s , opacity 0.55s; }
        body.top #contents .videos .swiper-slide a:hover i {
          filter: invert(100%);
          transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
          transform: scale(1.1); }
        body.top #contents .videos .swiper-slide p {
          font-size: 16px;
          line-height: 1.75;
          padding: 25px; }
        body.top #contents .videos .swiper-slide.swiper-slide-active > img {
          transform: scale(1); }
        body.top #contents .videos .swiper-slide.swiper-slide-active a, body.top #contents .videos .swiper-slide.swiper-slide-active iframe {
          transform: scale(1); }
        body.top #contents .videos .swiper-slide.swiper-slide-active p {
          opacity: 1; }
      body.top #contents .videos .swiper-button-next {
        top: 250px;
        right: inherit;
        left: 50%;
        margin-left: 534px; }
      body.top #contents .videos .swiper-button-prev {
        top: 250px;
        left: inherit;
        right: 50%;
        margin-right: 534px; }
    body.top #contents .about {
      margin: 100px auto 0;
      max-width: 1440px; }
      body.top #contents .about .split {
        display: flex;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: space-between; }
      body.top #contents .about .cell:nth-child(1) {
        width: 685.833px; }
      body.top #contents .about .cell:nth-child(2) {
        width: 433.333px; }
      body.top #contents .about h3 {
        padding: 0; }
      body.top #contents .about .overview h3 img {
        width: 433.333px; }
      body.top #contents .about .overview h3 {
        padding: 14.167px 0 0; }
      body.top #contents .about .story {
        flex-flow: row-reverse; }
        body.top #contents .about .story h3 img {
          width: 283.333px; }
        body.top #contents .about .story h3 {
          padding: 108.333px 0 0; }
      body.top #contents .about h4 {
        font-size: 33.333px;
        line-height: 1.275;
        margin-top: 16.667px;
        padding: 0;
        font-weight: 700;
        white-space: nowrap; }
      body.top #contents .about p {
        font-size: 13.333px;
        line-height: 1.75;
        margin-top: 16.667px;
        padding: 0; }
      body.top #contents .about .btn_more {
        margin: 22.5px 0 0; }
      body.top #contents .about .cell {
        margin-bottom: 33.333px; }
      body.top #contents .about .hoverin .cell:nth-child(1) .img {
        transform: scale(1.12);
        transition: transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
        filter: brightness(1.3); }
      body.top #contents .about .hoverin .cell:nth-child(1) .img picture:nth-child(2) {
        transform: scale(1.12);
        opacity: 0;
        transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); }
    body.top #contents .features {
      padding: 0 16.667px; }
      body.top #contents .features h2 {
        left: 10.833px; }
      body.top #contents .features .four_class::after {
        width: 110.833px;
        height: 162.5px;
        margin: -80.833px 0 0 -55.833px; }
      body.top #contents .features .four_class .feature {
        margin: 0;
        width: 583.333px; }
        body.top #contents .features .four_class .feature a {
          margin: 5.833px 5.833px 5.833px 0; }
          body.top #contents .features .four_class .feature a::after {
            width: 30.833px;
            height: 30.833px;
            left: 16.667px;
            top: 16.667px; }
        body.top #contents .features .four_class .feature a:hover span.bg {
          transform: scale(1.16);
          transition: transform 0.75s, filter 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
          filter: brightness(1.2); }
        body.top #contents .features .four_class .feature a:hover span.bg picture:nth-child(2) {
          transform: scale(1.16);
          opacity: 0;
          transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.55s cubic-bezier(0.215, 0.61, 0.355, 1); }
        body.top #contents .features .four_class .feature a:hover::after {
          transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
          transform: scale(1); }
        body.top #contents .features .four_class .feature a:hover header {
          transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); }
        body.top #contents .features .four_class .feature:nth-child(1) a:hover::after, body.top #contents .features .four_class .feature:nth-child(1) a:hover header {
          filter: drop-shadow(0px 0px 10px #7b0f02) invert(100%); }
        body.top #contents .features .four_class .feature:nth-child(2) a:hover::after, body.top #contents .features .four_class .feature:nth-child(2) a:hover header {
          filter: drop-shadow(0px 0px 10px #50b9ec) invert(100%); }
        body.top #contents .features .four_class .feature:nth-child(3) a:hover::after, body.top #contents .features .four_class .feature:nth-child(3) a:hover header {
          filter: drop-shadow(0px 0px 10px #0f1cbd) invert(100%); }
        body.top #contents .features .four_class .feature:nth-child(4) a:hover::after, body.top #contents .features .four_class .feature:nth-child(4) a:hover header {
          filter: drop-shadow(0px 0px 10px #ff69b4) invert(100%); }
      body.top #contents .features .four_class .feature:nth-child(even) a {
        margin: 5.833px 0px 5.833px 5.833px; }
      body.top #contents .features .lead {
        font-size: 13.333px;
        margin: 16.667px 0 0; }
    body.top #contents .customize {
      margin: 70px auto 0;
      max-width: 1440px;
      position: relative; }
      body.top #contents .customize header {
        bottom: 88px; }
        body.top #contents .customize header h3 {
          background: url("../img/bg_dot.png") repeat-x left top/auto 46px;
          font-size: 40px;
          line-height: 46px;
          height: 46px;
          padding: 0 14px 0 20px;
          top: -4px;
          overflow: hidden;
          white-space: nowrap; }
          body.top #contents .customize header h3 span {
            display: inline-block; }
          body.top #contents .customize header h3::after {
            content: '';
            width: 130%;
            height: 100%;
            position: absolute;
            left: -140%;
            top: 0;
            mix-blend-mode: difference;
            background: url("../img/bg_dot.png") repeat-x left top/auto 46px;
            filter: invert(100%);
            transform: skewX(0);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
            backface-visibility: hidden; }
        body.top #contents .customize header p span {
          background: #000;
          line-height: 28px;
          padding: 1px 10px 0 20px;
          margin-top: 6px;
          font-size: 16px;
          position: relative;
          overflow: hidden;
          white-space: nowrap; }
          body.top #contents .customize header p span::after {
            content: '';
            width: 130%;
            height: 100%;
            position: absolute;
            left: -140%;
            top: 0;
            mix-blend-mode: difference;
            background: url("../img/bg_dot.png") repeat-x left top/auto 46px;
            filter: invert(100%);
            transform: skewX(0);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
            backface-visibility: hidden; }
      body.top #contents .customize .pc-item {
        display: block; }
      body.top #contents .customize .sp-item {
        display: none; }
      body.top #contents .customize .btn_more {
        position: absolute;
        left: 41px;
        bottom: 32px;
        z-index: 10; }
      body.top #contents .customize .wrap {
        position: relative;
        z-index: 0; }
        body.top #contents .customize .wrap .img {
          display: block;
          overflow: hidden; }
      body.top #contents .customize a:hover ~ .wrap .img {
        transform: scale(1.06);
        transition: transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
        filter: brightness(1.3); }
      body.top #contents .customize a:hover ~ .wrap .img picture:nth-child(2) {
        transform: scale(1.06);
        opacity: 0;
        transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); }
      .noie11 body.top #contents .customize a:hover ~ .wrap h3::after,
      .noie11 body.top #contents .customize a:hover ~ .wrap p span::after {
        left: -5%;
        opacity: 1;
        transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); }
    body.top #contents .gallery {
      margin: 91.667px auto 0;
      padding: 0 16.667px 0 16.667px;
      width: auto;
      max-width: 1440px; }
      body.top #contents .gallery h2 {
        position: relative;
        left: 2.5px;
        margin-bottom: 2.5px; }
      body.top #contents .gallery .wrap {
        display: flex;
        justify-content: space-between; }
      body.top #contents .gallery .full {
        width: 583.333px;
        padding: 0 4.167px 0 0; }
      body.top #contents .gallery .split {
        display: flex;
        flex-wrap: wrap;
        width: 583.333px;
        padding: 0; }
      body.top #contents .gallery img {
        width: 100%;
        height: auto; }
      body.top #contents .gallery a {
        width: 579.167px;
        margin: 0; }
        body.top #contents .gallery a img {
          width: 100%;
          height: auto; }
        body.top #contents .gallery a::after {
          width: 40px;
          height: 40px;
          right: 16px;
          bottom: 16px; }
      body.top #contents .gallery a:hover span {
        transform: scale(1.16);
        transition: transform 0.75s, filter 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
        filter: brightness(1.3); }
      body.top #contents .gallery a:hover span picture:nth-child(2) {
        transform: scale(1.16);
        opacity: 0;
        transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.55s cubic-bezier(0.215, 0.61, 0.355, 1); }
      body.top #contents .gallery a:hover::after {
        filter: invert(100%);
        transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: scale(1); }
      body.top #contents .gallery .split a {
        margin: 0 5.833px 10.833px 0;
        width: 285.833px; }
        body.top #contents .gallery .split a:nth-child(even) {
          margin-right: 0; }
        body.top #contents .gallery .split a::after {
          width: 24px;
          height: 24px;
          right: 16px;
          bottom: 15px; }
      body.top #contents .gallery .split ~ .split a {
        margin: 0 0 10.833px 5.833px; }
        body.top #contents .gallery .split ~ .split a:nth-child(even) {
          margin-left: 5.833px; }
      body.top #contents .gallery .full ~ .split a {
        width: 283.333px;
        margin: 0 0px 10.833px 8.333px; }
      body.top #contents .gallery .wrap.reverse {
        flex-direction: row-reverse; }
        body.top #contents .gallery .wrap.reverse .full {
          padding: 0 0 0 5px; }
        body.top #contents .gallery .wrap.reverse .split a {
          margin: 0 8.333px 10.833px 0; }
    body.top #contents .products {
      margin: 100px auto 0;
      position: relative;
      max-width: 1440px;
      width: 100vw;
      padding: 0 16.667px;
      min-width: 1200px; }
      body.top #contents .products .split {
        display: flex;
        justify-content: center;
        align-items: flex-end; }
      body.top #contents .products .cell {
        position: relative;
        padding: 0 0;
        width: 583.333px; }
        body.top #contents .products .cell:nth-child(1) {
          padding-bottom: 0;
          margin-bottom: 0; }
        body.top #contents .products .cell:nth-child(1)::after {
          content: '';
          background: url("../img/top/bg_products.png") no-repeat left top/cover;
          width: 995.833px;
          height: 534.167px;
          left: inherit;
          right: 0;
          bottom: 0;
          margin-right: -131.667px;
          margin-left: 0; }
        body.top #contents .products .cell:nth-child(1)::before {
          content: '';
          background: url("../img/top/bg_products-repeat_.png") repeat-x left top/auto 100%;
          width: 50vw;
          height: 315.833px;
          left: inherit;
          right: 0;
          bottom: 0;
          margin-right: 864.167px;
          margin-left: 0;
          position: absolute;
          z-index: -1; }
        body.top #contents .products .cell:nth-child(2) {
          padding: 12.5px 25px 125px 41.667px; }
          body.top #contents .products .cell:nth-child(2) #btn_goto_shop {
            padding: 0; }
            body.top #contents .products .cell:nth-child(2) #btn_goto_shop a span {
              padding-top: 24.167px; }
        body.top #contents .products .cell p.btnundertxt {
          font-size: 12.5px;
          color: #fff;
          margin: 25px 0px -25px 0px;
          text-align: center;
          line-height: 1.5em; }
      body.top #contents .products h2 {
        margin-bottom: 2.5px; }
      body.top #contents .products img[src*='package'] {
        height: 260.833px;
        margin: 0 auto 0 0;
        display: flex;
        justify-content: flex-start; }
      body.top #contents .products h3 {
        font-size: 33.333px;
        line-height: 1.2;
        padding: 0;
        margin-top: 14.167px;
        font-weight: 900; }
      body.top #contents .products .cell:nth-child(1) dt {
        font-weight: bold;
        padding-top: 4.167px; }
      body.top #contents .products .cell:nth-child(1) dl {
        font-size: 10.833px;
        line-height: 1.5em;
        padding: 0 37.5px 32.5px 0;
        margin-top: 13.583px; }
      body.top #contents .products dd span.annotation {
        margin-top: 8.333px;
        display: block; }
    body.top #contents .spec {
      margin: 50px auto 0;
      max-width: 1400px;
      padding: 0 33.333px; }
      body.top #contents .spec h2 {
        margin-bottom: 5.833px; }
      body.top #contents .spec table {
        font-size: 13.333px;
        line-height: 34.167px; }
        body.top #contents .spec table th {
          padding: 5.833px 22.5px;
          width: 146.667px; }
        body.top #contents .spec table td {
          padding: 8.333px 10.833px; }
      body.top #contents .spec .split {
        display: flex;
        justify-content: space-between; }
      body.top #contents .spec .cell {
        padding-right: 8.333px;
        width: 100%; }
      body.top #contents .spec .cell + .cell {
        margin-top: 0;
        padding: 0 0 0 8.333px; }
      body.top #contents .spec table {
        height: 241.667px;
        /*tr:last-child {height:px(170);}*/ }
        body.top #contents .spec table td p {
          line-height: 1.4; }
        body.top #contents .spec table td p + p {
          margin-top: 1.2em; }
      body.top #contents .spec .cell + .cell table tr:last-child {
        height: 40px; }
      body.top #contents .spec .notes {
        font-size: 10px;
        line-height: 1.875;
        padding: 12.5px 5.833px 25px; }
        body.top #contents .spec .notes li ~ li {
          margin-top: 1.667px; } }
@media screen and (min-width: 1201px) {
  /*  pc 1201px ~
  ************************************/
  body.top #contents {
    /* news-area */ }
    body.top #contents #news .wrap {
      padding: 0 0 0 1.389vw; }
    body.top #contents #news a.btn_more {
      right: 1.736vw;
      top: 1.597vw; }
    body.top #contents #news h2 {
      margin: 0 0 0.347vw 0; }
    body.top #contents #news .news-area .item {
      width: 31.667vw;
      margin-right: 0.972vw; }
      body.top #contents #news .news-area .item a {
        width: 31.667vw;
        min-height: 26.736vw; }
      body.top #contents #news .news-area .item figure {
        height: 17.917vw; }
      body.top #contents #news .news-area .item dl {
        padding: 1.042vw 2.083vw 1.042vw; }
        body.top #contents #news .news-area .item dl dt {
          font-size: 1.111vw;
          margin-bottom: 0.694vw; }
        body.top #contents #news .news-area .item dl dd {
          font-size: 1.111vw; }
    body.top #contents #news .news-area .item:last-child {
      margin-right: 0; }
    body.top #contents #news .swiper-button-next,
    body.top #contents #news .swiper-button-prev {
      display: none; }
    body.top #contents .about {
      margin: 6.944vw auto 0; }
      body.top #contents .about .cell:nth-child(1) {
        width: 57.153vw; }
      body.top #contents .about .cell:nth-child(2) {
        width: 36.111vw; }
      body.top #contents .about .overview h3 img {
        width: 36.111vw; }
      body.top #contents .about .overview h3 {
        padding: 1.181vw 0 0; }
      body.top #contents .about .story h3 img {
        width: 23.611vw; }
      body.top #contents .about .story h3 {
        padding: 9.028vw 0 0; }
      body.top #contents .about h4 {
        font-size: 2.778vw;
        margin-top: 1.389vw; }
      body.top #contents .about p {
        font-size: 1.111vw;
        margin-top: 1.389vw; }
      body.top #contents .about .btn_more {
        margin: 1.875vw 0 0; }
      body.top #contents .about .cell {
        margin-bottom: 2.778vw; }
    body.top #contents .features {
      padding: 0 1.389vw;
      width: 100vw; }
      body.top #contents .features h2 {
        left: 0.903vw; }
      body.top #contents .features .four_class::after {
        width: 9.236vw;
        height: 13.542vw;
        margin: -6.736vw 0 0 -4.653vw; }
      body.top #contents .features .four_class .feature {
        margin: 0;
        width: 48.125vw; }
        body.top #contents .features .four_class .feature a {
          margin: 0.486vw 0.486vw 0.486vw 0; }
          body.top #contents .features .four_class .feature a::after {
            width: 2.569vw;
            height: 2.569vw;
            left: 1.389vw;
            top: 1.389vw; }
      body.top #contents .features .four_class .feature:nth-child(even) a {
        margin: 0.486vw 0vw 0.486vw 0.486vw; }
      body.top #contents .features .lead {
        font-size: 1.111vw;
        margin: 1.389vw 0 0; }
    body.top #contents .gallery {
      margin: 7.639vw auto 0;
      padding: 0 1.389vw 0 1.389vw;
      width: 100vw; }
      body.top #contents .gallery h2 {
        left: 0.208vw;
        margin-bottom: 0.208vw; }
      body.top #contents .gallery .full {
        width: 48.611vw;
        padding: 0 0.347vw 0 0; }
      body.top #contents .gallery .split {
        width: 48.611vw; }
      body.top #contents .gallery a {
        width: 48.264vw; }
      body.top #contents .gallery .split a {
        margin: 0 0.486vw 0.903vw 0;
        width: 23.819vw; }
        body.top #contents .gallery .split a:nth-child(even) {
          margin-right: 0; }
      body.top #contents .gallery .split ~ .split a {
        margin: 0 0 0.903vw 0.486vw; }
        body.top #contents .gallery .split ~ .split a:nth-child(even) {
          margin-left: 0.486vw; }
      body.top #contents .gallery .full ~ .split a {
        width: 23.611vw;
        margin: 0 0px 0.903vw 0.694vw; }
      body.top #contents .gallery .wrap.reverse .full {
        padding: 0 0 0 0.417vw; }
      body.top #contents .gallery .wrap.reverse .split a {
        margin: 0 0.694vw 0.903vw 0; }
    body.top #contents .products {
      padding: 0 1.389vw; }
      body.top #contents .products .cell {
        width: 48.611vw; }
        body.top #contents .products .cell:nth-child(1)::after {
          width: 82.986vw;
          height: 44.514vw;
          margin-right: -10.972vw; }
        body.top #contents .products .cell:nth-child(1)::before {
          height: 26.319vw;
          margin-right: 72.014vw; }
        body.top #contents .products .cell:nth-child(2) {
          padding: 1.042vw 2.083vw 10.417vw 3.472vw; }
          body.top #contents .products .cell:nth-child(2) #btn_goto_shop {
            padding: 0; }
            body.top #contents .products .cell:nth-child(2) #btn_goto_shop a span {
              padding-top: 2.014vw; }
      body.top #contents .products h2 {
        margin-bottom: 0.208vw; }
      body.top #contents .products img[src*='package'] {
        height: 21.736vw; }
      body.top #contents .products h3 {
        font-size: 2.778vw;
        line-height: 1.2;
        margin-top: 1.181vw; }
      body.top #contents .products .cell:nth-child(1) dt {
        font-weight: bold;
        padding-top: 0.347vw; }
      body.top #contents .products .cell:nth-child(1) dl {
        font-size: 0.903vw;
        line-height: 1.5em;
        padding: 0 37.5px 44.792px 0;
        margin-top: 13.583px; }
      body.top #contents .products dd span.annotation {
        margin-top: 0.694vw;
        display: block; }
      body.top #contents .products p.btnundertxt {
        font-size: 1.042vw;
        color: #fff;
        margin: 2.083vw 0 -2.083vw 0;
        text-align: center;
        line-height: 1.5em; }
    body.top #contents .spec {
      margin: 4.167vw auto 0;
      max-width: 1400px;
      padding: 0 40px; }
      body.top #contents .spec h2 {
        margin-bottom: 0.486vw; }
      body.top #contents .spec table {
        font-size: 1.111vw;
        line-height: 2.847vw; }
        body.top #contents .spec table th {
          padding: 0.486vw 1.875vw;
          width: 12.222vw; }
        body.top #contents .spec table td {
          padding: 0.694vw 0.903vw; }
      body.top #contents .spec .cell {
        padding-right: 10px;
        width: calc( 100% ); }
      body.top #contents .spec .cell + .cell {
        margin-top: 0;
        padding: 0 0 0 10px; }
      body.top #contents .spec table {
        width: 100%;
        height: 20.139vw;
        /*tr:last-child {height:vw(170);}*/ }
      body.top #contents .spec .cell + .cell table tr:last-child {
        height: 4.167vw; }
      body.top #contents .spec .notes {
        font-size: 0.833vw;
        padding: 1.042vw 0.486vw 2.083vw; }
        body.top #contents .spec .notes li ~ li {
          margin-top: 0.139vw; } }
@media screen and (min-width: 1440px) {
  /*  pc 1441 ~
  ************************************/
  body.top #contents #news {
    /* news-area */
    	/*	padding: 0 0 0 10px;
    
       .news-area {
         .item {width: 456px; margin: 0 7px;
           a{width: 456px; min-height: 385px;
             figure{height: 258px;}
             dl{padding:15px 30px 15px;
    				 	dt{font-size: 16px; margin-bottom:10px;}
    					dd{font-size: 16px;}
    				 }
           }
         }
       }
    	
    	*/ }
  body.top #contents #news .wrap {
    padding: 0 0 0 20px; }
  body.top #contents #news a.btn_more {
    right: 25px;
    top: 23px; }
  body.top #contents #news h2 {
    margin: 0 0 5px 0; }
  body.top #contents #news .news-area .item {
    width: 456px;
    margin-right: 14px; }
    body.top #contents #news .news-area .item a {
      width: 456px;
      min-height: 385px; }
    body.top #contents #news .news-area .item figure {
      height: 258px; }
    body.top #contents #news .news-area .item dl {
      padding: 15px 30px 15px; }
      body.top #contents #news .news-area .item dl dt {
        font-size: 16px;
        margin-bottom: 10px; }
      body.top #contents #news .news-area .item dl dd {
        font-size: 16px; }
  body.top #contents #news .news-area .item:last-child {
    margin-right: 0; }
  body.top #contents .about {
    margin: 100px auto 0;
    max-width: 1440px; }
    body.top #contents .about .cell:nth-child(1) {
      width: 823px; }
    body.top #contents .about .cell:nth-child(2) {
      width: 520px; }
    body.top #contents .about .overview h3 img {
      width: 520px; }
    body.top #contents .about .overview h3 {
      padding: 17px 0 0; }
    body.top #contents .about .story h3 img {
      width: 340px; }
    body.top #contents .about .story h3 {
      padding: 130px 0 0; }
    body.top #contents .about h4 {
      font-size: 40px;
      margin-top: 20px; }
    body.top #contents .about p {
      font-size: 16px;
      margin-top: 20px; }
    body.top #contents .about .btn_more {
      margin: 27px 0 0; }
    body.top #contents .about .cell {
      margin-bottom: 40px; }
  body.top #contents .features {
    padding: 0 20px;
    width: 100vw; }
    body.top #contents .features h2 {
      left: 13px; }
    body.top #contents .features .four_class::after {
      width: 133px;
      height: 195px;
      margin: -97px 0 0 -67px; }
    body.top #contents .features .four_class .feature {
      margin: 0;
      width: 693px; }
      body.top #contents .features .four_class .feature a {
        margin: 7px 7px 7px 0; }
        body.top #contents .features .four_class .feature a::after {
          width: 37px;
          height: 37px;
          left: 20px;
          top: 20px; }
    body.top #contents .features .four_class .feature:nth-child(even) a {
      margin: 7px 0 7px 7px; }
    body.top #contents .features .lead {
      font-size: 16px;
      margin: 20px 0 0; }
  body.top #contents .gallery {
    margin: 110px auto 0;
    padding: 0 20px 0 20px;
    width: 100vw; }
    body.top #contents .gallery h2 {
      left: 3px;
      margin-bottom: 3px; }
    body.top #contents .gallery .full {
      width: 700px;
      padding: 0 5px 0 0; }
    body.top #contents .gallery .split {
      width: 700px; }
    body.top #contents .gallery a {
      width: 695px; }
    body.top #contents .gallery .split a {
      margin: 0 7px 13px 0;
      width: 343px; }
      body.top #contents .gallery .split a:nth-child(even) {
        margin-right: 0; }
    body.top #contents .gallery .split ~ .split a {
      margin: 0 0 13px 7px; }
      body.top #contents .gallery .split ~ .split a:nth-child(even) {
        margin-left: 7px; }
    body.top #contents .gallery .full ~ .split a {
      width: 340px;
      margin: 0 0px 13px 10px; }
    body.top #contents .gallery .wrap.reverse .full {
      padding: 0 0 0 6px; }
    body.top #contents .gallery .wrap.reverse .split a {
      margin: 0 10px 13px 0; }
  body.top #contents .products {
    padding: 0 20px; }
    body.top #contents .products .cell {
      width: 700px; }
      body.top #contents .products .cell:nth-child(1)::after {
        width: 1195px;
        height: 641px;
        margin-right: -158px; }
      body.top #contents .products .cell:nth-child(1)::before {
        height: 379px;
        margin-right: 1037px; }
      body.top #contents .products .cell:nth-child(2) {
        padding: 15px 30px 150px 50px; }
        body.top #contents .products .cell:nth-child(2) #btn_goto_shop {
          padding: 0; }
          body.top #contents .products .cell:nth-child(2) #btn_goto_shop a span {
            padding-top: 29px; }
    body.top #contents .products h2 {
      margin-bottom: 3px; }
    body.top #contents .products img[src*='package'] {
      height: 313px; }
    body.top #contents .products h3 {
      font-size: 40px;
      line-height: 1.2;
      margin-top: 17px; }
    body.top #contents .products .cell:nth-child(1) dt {
      font-weight: bold;
      padding-top: 5px; }
    body.top #contents .products .cell:nth-child(1) dl {
      font-size: 13px;
      line-height: 1.5em;
      padding: 0 50px 50px 0;
      margin-top: 10px; }
    body.top #contents .products dd span.annotation {
      margin-top: 10px;
      display: block; }
    body.top #contents .products p.btnundertxt {
      font-size: 15px;
      color: #fff;
      margin: 30px 0 30px 0;
      text-align: center;
      line-height: 1.5em; }
  body.top #contents .spec {
    margin: 60px auto 0;
    max-width: 1400px;
    padding: 0 40px; }
    body.top #contents .spec h2 {
      margin-bottom: 7px; }
    body.top #contents .spec table {
      font-size: 16px;
      line-height: 41px; }
      body.top #contents .spec table th {
        padding: 7px 27px;
        width: 176px; }
      body.top #contents .spec table td {
        padding: 7px 13px; }
    body.top #contents .spec .cell {
      padding-right: 10px;
      width: calc( 100% ); }
    body.top #contents .spec .cell + .cell {
      margin-top: 0;
      padding: 0 0 0 10px; }
    body.top #contents .spec table {
      width: 100%;
      height: 290px;
      /*tr:last-child {height:170px;}*/ }
    body.top #contents .spec .cell + .cell table tr:last-child {
      height: 61px; }
    body.top #contents .spec .notes {
      font-size: 12px;
      padding: 15px 7px 30px; }
      body.top #contents .spec .notes li ~ li {
        margin-top: 2px; } }