@charset "UTF-8";

/* ===================================
    共通
=================================== */
html {
  overflow-y: scroll;
}
body, div, dl, dt, dd {
  margin: 0;
  padding: 0;
}
ul, ol {
  margin: 0;
  padding: 0;
}
ul li, ol li {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, section, nav, article, aside, hgroup, header, address, figure, figcaption {
  margin: 0;
  padding: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 18px;
  line-height: 2em;
  color: #000;
  display: none;
}

@media screen and (max-width: 1200px) {
  html,
  body {
    font-size: 0.0833333333vw;
  }
}

@media screen and (max-width: 640px) {
  html,
  body {
    font-size: 0.2666666666666667vw;
  }
}
.colwh {
  color: white;
}
.box{
	opacity: 0;
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeUpRgt {
  animation-name: fadeUpRgtAnime;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpRgtAnime{
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeUpLft {
  animation-name: fadeUpLftAnime;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpLftAnime{
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.example {
	font-size: 0.6em;
	vertical-align:20%;
}

/* ===================================
    ヘッダー 
=================================== */
header {
  position: fixed;
  z-index: 50;
  width: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
}
.header-container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 20px;
}
.header {
  float: left;
}
.header-logo {
  width: 115px;
  margin: 25px 0 0 0;
}
.menu-nav {
  float: right;
  width: 720px;
  margin-top: 40px;
}
nav ul {
  list-style: none;
}
nav li {
  float: left;
  line-height: 0;
}
.g-nav-list01 {
  margin: 0 0 0 0;
}
.g-nav-list02 {
  margin: 0 0 0 9px;
}
.g-nav-list01 li {
  margin: 3px 30px 0 0;
}
.g-nav-list02 li {
  margin: 0 8px;
}
.g-nav-list02 li:last-child {
  margin: 0 0 0 8px;
  padding: 0;
}

.g-nav-list01 li:nth-child(1) img {width: 31px; margin-top: 3px;}
.g-nav-list01 li:nth-child(4) img {width: 48px; margin-top: 1px;}
.g-nav-list01 li:nth-child(2) img {width: 71px; margin-top: 3px;}
.g-nav-list01 li:nth-child(5) img {width: 75px; margin-top: 3px;}
.g-nav-list01 li:nth-child(3) img {width: 58px; margin-top: 3px;}

.g-nav-list02 li:nth-child(1) img {width: 20px;}
.g-nav-list02 li:nth-child(2) img {width: 18px; margin-top: 1px;}
.g-nav-list02 li:nth-child(3) img {width: 20px;}
.g-nav-list02 li:nth-child(4) img {width: 22px; margin-top: 2px;}

nav a img {
  transition: 0.6s;
}
nav a:hover img {
  opacity: 0.5;
}
nav a {
  padding: 0.5rem;
}


/*  ナビゲーション
-------------------------------------*/


/*========= ボタンのためのCSS ===============*/
.openbtn {
  position: fixed;
  z-index: 999;
  /*ボタンを最前面に*/
  cursor: pointer;
  width: 56px;
  height: 60px;
  border-radius: 5px;
}


/*×に変化*/
.openbtn span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 1px;
  border-radius: 3px;
  width: 50%;
}
.openbtn span:nth-of-type(1) {
  top: 15px;
  background-color: #000;
}
.openbtn span:nth-of-type(2) {
  top: 23px;
  background-color: #000;
}
.openbtn span:nth-of-type(3) {
  top: 31px;
  background-color: #000;
}
.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 50%;
  background-color: #000;
}
.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 50%;
  background-color: #000;
}



/* ===================================
    Top
=================================== */
.top {
  margin: 100px auto 90px auto;
  width: 100%;
  position: relative;
  height: 835px;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
.top-inner {
  position: absolute;
  width: 100%;
  height: 785px;
  top: 0;
  z-index: 5;
}
.top-inner-dtl {
  position: absolute;
  width: 1700px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}
.top-inner-dtlbox {
  position: absolute;
  width: 1200px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
}
.top-whtbg {
  position: absolute;
  width: 100%;
  height: 243px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
.top-whtbg img {
  width: 100%;
  min-height: 245px;
}
.top-elmt00 {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 770px;
}
.top-elmt00 img {
  width: 100%;
}
.top-elmt01 {
  position: absolute;
  bottom: -10px;
  left: 148px;
  width: 98px;
}
.top-elmt01 img {
  width: 100%;
}
.top-elmt02 {
  position: absolute;
  bottom: -10px;
  left: 350px;
  width: 98px;
}
.top-elmt02 img {
  width: 100%;
}
.top-elmt03 {
  position: absolute;
  bottom: -10px;
  right: 0;
  left: 0;
  width: 98px;
  margin: auto;
}
.top-elmt03 img {
  width: 100%;
}
.top-elmt035 {
  position: absolute;
  bottom: -10px;
  right: 350px;
  width: 98px;
}
.top-elmt035 img {
  width: 100%;
}
.top-elmt037 {
  position: absolute;
  bottom: -10px;
  right: 148px;
  width: 98px;
}
.top-elmt037 img {
  width: 100%;
}
.top-elmt04 {
  position: absolute;
  top: 55px;
  right: 30px;
  width: 68px;
}
.top-elmt04 img {
  width: 100%;
}
.top-elmt05 {
  position: absolute;
  bottom: 15px;
  left: 110px;
  z-index: 5;
  width: 173px;
}
.top-elmt05 img {
  width: 100%;
}
.top-elmt06 {
  position: absolute;
  bottom: 15px;
  left: 313px;
  z-index: 5;
  width: 173px;
}
.top-elmt06 img {
  width: 100%;
}
.top-elmt07 {
  position: absolute;
  bottom: 15px;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 5;
  width: 173px;
}
.top-elmt07 img {
  width: 100%;
}
.top-elmt08 {
  position: absolute;
  bottom: 15px;
  right: 313px;
  z-index: 5;
  width: 173px;
}
.top-elmt08 img {
  width: 100%;
}
.top-elmt09 {
  position: absolute;
  bottom: 15px;
  right: 110px;
  z-index: 5;
  width: 173px;
}
.top-elmt09 img {
  width: 100%;
}
.top-video{
  width: 100%;
  height: 100%;
  background-image: url(../img/bg_mp4.jpg) ;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;  
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.top-video::after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
.top-video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}


/* ===================================
    Top下
=================================== */
.sp-top-elmt{
  display: none;
}

.topUnder-inner01 {
  width: 1000px;
  margin: 65px auto;
}
.topUnder-inner01 h2 {
  width: 1000px;
  text-align: center;
}
.topUnder-inner01 h2 img {
  width: 480px;
}
.topUnder-inner01-01, .topUnder-inner01-02, .topUnder-inner01-03 {
  margin-top: 140px;
  display: flex;
  width: 1000px;
}
.topUnder-inner01-01, .topUnder-inner01-03 {
  flex-direction: row-reverse;
}
.topUnder-inner01-01 div, .topUnder-inner01-02 div, .topUnder-inner01-03 div {
  width: 500px;
}
.topUnder-inner01-01-dtl02 img, .topUnder-inner01-03-dtl02 img {
  width: 430px;
}
.topUnder-inner01-02-dtl02 img {
  width: 400px;
}
.topUnder-inner01-04 {
  margin-top: 140px;
}
.topUnder-inner01-04 h2 {
  font-size: 28px;
  margin-top: 140px;
  display: block;
}
.topUnder-inner01-04 p {
  margin-top: 40px;
  text-align: center;
}
.topUnder-inner01dawn {
  margin-top: 100px;
  width: 100%;
  height: 350px;
  background: url("../img/top_dawnBg.jpg") ,#c79468;
  background-repeat: no-repeat;
  background-size: 1465px 350px;
  background-position: center;
}
.topUnder-inner02 {
  margin: 0 auto;
  width: 100%;
  position: relative;
  height: 628px;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
.topUnder-inner02-01 {
  position: absolute;
  width: 100%;
  height: 630px;
  top: 0;
  z-index: 5;
}
.topUnder-inner02-01-dtl01 {
  position: absolute;
  width: 290px;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.topUnder-inner02-01-dtl01 img {
  width: 290px;
}
.topUnder-inner02-01-dtl02 {
  position: absolute;
  width: 680px;
  height: 380px;
  top: 190px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.topUnder-whtbg {
  position: absolute;
  width: 100%;
  height: 245px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
.topUnder-whtbg img {
  width: 100%;
  min-height: 245px;
}
.topUnder-video{
  width: 100%;
  height: 100%;
  background-image: url(../img/bg_mp4.jpg) ;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;  
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.topUnder-video::after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
.topUnder-video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}




/* ===================================
    受賞歴 Awards
=================================== */
.awards-btn{
  margin: 150px auto 200px;
  width: 100%;
}
.awards-btn-area {
  position: absolute;
  width: 100%;
  height: 690px;
  top: 0;
  z-index: 2;
}
.awards-modal-btn {
  width: 440px;
  display: block;
  margin: 0 auto;
  transition: transform .3s ease;
  cursor: pointer;
}
.awards-modal-btn:hover {
  transform: scale(1.1);
}
.awards-modal-btn h2 {
  margin-top: 65px;
  width: 440px;
  display: block;
}
.awards-modal-btn h2 img {
  width: 100%;
}
.awards-btn-icon {
  width: 232px;
  display: block;
  margin: 0 auto;
}
.awards-btn-icon img {
  width: 100%;
}
.awards-video{
  width: 100%;
  height: 100%;
  background-image: url(../img/bg_mp4.jpg) ;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;  
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.awards-video::after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
.awards-video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.awards-modal {
  width:100%;
  height: 100%;
  position: fixed;
  left:0;
  top:0;
  z-index: 1000;
  display: none;
  opacity: 0;
}
.awards-modal.open {
  display: block;
  opacity: 1;
  animation: fadeIn 1s forwards;
}
.awards-modal__inner{
  max-width: 1200px;
  width: 100%;
  max-height: 1560px;
  height: 90vh;
  overflow: auto;
  position: fixed;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.awards {
  width: 100%;
  margin: 0 auto;
  background-image: linear-gradient(to bottom, #56060D 0%, #000 100%);
  padding:0 0 50px;
  position: relative;
}
.awards .h2-box {
  background-image: url(../img/awards_imgBg_up.jpg) ;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 1200px 120px;
  width: 100%;
  height: 120px;
}
.awards h2 {
  padding-top: 90px;
  text-align: center;
}
.awards h2 img {
  width: 400px;
}
.awards-inner {
  width: 100%;
  margin:0 auto 0 auto;
}
.awards-inner-01 {
  margin: 0 auto 0 auto;
  max-width: 1200px;
  height: 1310px;
  background-image: url(../img/awards_imgBg.jpg) ;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 1200px 1213px;
}
.awards-inner-01-dtl {
  position: relative;
  height: 920px;
}
.awards-elmt01 {
  width: 1106px;
  top: 271px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}
.awards-elmt01 img {
  width: 1106px;
}
.awards-elmt02 {
  width: 480px;
  top: 580px;
  right: 79px;
  position: absolute;
}
.awards-elmt02 img {
  width: 480px;
}
.awards-elmt03 {
  width: 591px;
  top: 680px;
  left: 42px;
  position: absolute;
}
.awards-elmt03 img {
  width: 591px;
}
.awards-inner-02-dtl {
  width: 700px;
  height: 370px;
  overflow-y: scroll;
  background: #fff;
  margin: 0 auto;
}
.awards-inner-02-dtl h3 {
  text-align: center;
  font-size: 20px;
  margin-top: 13px;
}
.awards-inner-02-gin {
  background: #B6C0D1;
  width: 650px;
  margin: 15px auto 20px auto;
  padding: 15px 0 5px 0;
}
.awards-inner-02-gin h4, .awards-inner-02-kin h4, .awards-inner-02-rich h4, .awards-inner-02-ruby h4 {
  width: 210px;
  margin: 0 auto;
}
.awards-inner-02-gin dl, .awards-inner-02-kin dl, .awards-inner-02-rich dl, .awards-inner-02-ruby dl {
  width: 530px;
  margin: 20px auto 10px auto;
  display: flex;
  flex-wrap: wrap;
}
.awards-inner-02-gin dl dt, .awards-inner-02-kin dl dt, .awards-inner-02-rich dl dt, .awards-inner-02-ruby dl dt {
  width: 110px;
  margin-top: 45px;
}
.awards-inner-02-gin dl dt img, .awards-inner-02-kin dl dt img, .awards-inner-02-rich dl dt img, .awards-inner-02-ruby dl dt img {
  width: 80px;
}
.awards-inner-02-gin dl dd, .awards-inner-02-kin dl dd, .awards-inner-02-rich dl dd, .awards-inner-02-ruby dl dd {
  width: 420px;
  font-size: 16px;
  line-height: 1.4em;
  margin-top: 45px;
  margin-bottom: 25px;
}
.awards-inner-02-gin dl dt:first-of-type, .awards-inner-02-kin dl dt:first-of-type, .awards-inner-02-rich dl dt:first-of-type, .awards-inner-02-ruby dl dt:first-of-type,
.awards-inner-02-gin dl dd:first-of-type, .awards-inner-02-kin dl dd:first-of-type, .awards-inner-02-rich dl dd:first-of-type, .awards-inner-02-ruby dl dd:first-of-type {
  margin-top: 0 !important;
}
.awards-inner-02-kin {
  background: #F9F0C7;
  width: 650px;
  margin: 15px auto 20px auto;
  padding: 15px 0 5px 0;
}
.awards-inner-02-rich {
  background: #D7F0EA;
  width: 650px;
  margin: 15px auto 20px auto;
  padding: 15px 0 5px 0;
}
.awards-inner-02-ruby {
  background: #fadce9;
  width: 650px;
  margin: 15px auto 20px auto;
  padding: 15px 0 5px 0;
}



/* ===================================
    FEATURE
=================================== */
.feature {
  width: 100%;
  margin: 0 auto;
}
.feature h2 {
  width: 100%;
  margin-top: 100px;
  text-align: center;
}
.feature h2 img {
  width: 100px;
}
.feature-inner {
  margin: 0 auto 90px auto;
  width: 100%;
  text-align: center;
}

.feature-inner-01 {
  width: 100%;
}
.feature-blkbg {
  height: auto;
  width: 100%;
}
.feature-blkbg img {
  width: 100%;
  min-height: auto;
}
.feature-inner-01-dtl01 {
  background-color: #fff;
  width: 100%;
  margin: 45px auto 0 auto;
  padding: 90px 0 40px 0;
}
.feature-inner-01-dtl01-box01 {
  width: 980px;
  margin: 0 auto ;
}
.feature-inner-01-dtl01-box01 h3 {
  width: 383px;
  margin: 0 auto;
}
.feature-inner-01-dtl01-box01 h3 img {
  width: 383px;
}
.feature-inner-01-dtl01-box01-mov {
  margin-top: 45px;
}
.feature-inner-01-dtl01-box01-mov img{
  height: 382px;
  width: 680px;
  display: block;
  margin: auto;
}
.feature-inner-01-dtl01-box01-txt ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}
.feature-inner-01-dtl01-box01-txt ul li {
  width: 47%;
  text-align: left;
}
.feature-inner-01-dtl01-box01-txt li:nth-child(1) h4 img {
  width: 300px;
  margin-bottom: 40px;
}
.feature-inner-01-dtl01-box01-txt li:nth-child(2) h4 img {
  width: 278px;
  margin-bottom: 38px;
}
.feature-inner-01-dtl02 h3 img {
  width: 454px;
  margin: 90px auto 45px auto;
}
/* --------------------------
    FEATUREキクマサギン
-------------------------- */
.feature-gin {
  position: relative;
  background:rgba(255,255,255,0.8);
  width: 1000px;
  height: 615px;
  margin: 0 auto;
  text-align: left;
}


.feature-gin .apple{
  position: absolute;
  top: -155px;
  left: -50px;
  z-index: -1;
}

.feature-gin .apple img{
  display: block;
  width: 274px;
}

.feature-gin .banana{
  position: absolute;
  top: 300px;
  right: -235px;
  z-index: -1;
}

.feature-gin .banana img{
  display: block;
  width: 412px;
}

.feature-gin-inner {
  display: flex;
}
.feature-gin-product {
  width: 265px;
}
.feature-gin-product h4 img {
  width: 265px;
  margin: 69px 0 0 -25px;
}
.feature-gin-productP {
  width: 108px;
  margin: 63px 0 0 62px;
}
.feature-gin-graph01 {
  width: 283px;
  margin: 64px 0 0 28px;
}
.feature-gin-graph01 h5 img {
  width: 283px;
}
.feature-gin-graph01-text img {
  width: 256px;
  margin: 37px 0 30px 0;
}

.feature-gin-graph02 {
  width: 285px;
  margin: 64px 0 0 74px;
}
.feature-gin-graph02 h5 img {
  width: 285px;
}
.feature-gin-graph02-text img {
  width: 245px;
  margin: 37px 0 30px 0;
}
.feature-gin-graph01-dtl01 {
  width:242px;
  height: 270px;
}
.feature-gin-graph01-dtl01 .image-box.graph {
  width:242px;
  height: 270px;
  background-image: url(../img/feature_gin_graph01_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  position: relative;
  display: table-cell;
  vertical-align: bottom;
}
.feature-gin-graph01-dtl01 .image-box.graph > span.info-graph2 {
  display: block;
  height: 2px;
  width:242px;
  background-image: url(../img/feature_gin_graph01_01.png);
  background-repeat: no-repeat;
  background-size: 242px 270px;
  background-position: left bottom;
}
.image-box.graph > span {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.image-box.graph > span.info-graph3 {
  display: block;
  opacity: 0;
}
.image-box.graph > span.info-graph4 {
  display: block;
  width: 0px;
}
.image-box.graph > span.info-graph5 {
  display: block;
  opacity: 0;
}
.info-graph3 img {
  width:242px;
  height: 270px;
}
.feature-gin-graph02-dtl01 .image-box.graph {
  width:242px;
  height: 270px;
  background-image: url(../img/feature_gin_graph02_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  position: relative;
  display: table-cell;
  vertical-align: bottom;
}
.feature-gin-graph02-dtl01 .image-box.graph > span.info-graph2 {
  display: block;
  height: 2px;
  width:242px;
  background-image: url(../img/feature_gin_graph02_01.png);
  background-repeat: no-repeat;
  background-size: 242px 270px;
  background-position: left bottom;
}
/* --------------------------
    FEATUREキクマサキン
-------------------------- */
.feature-kin {
  background:rgba(255,255,255,0.8);
  width: 1000px;
  height: 615px;
  margin: 48px auto;
  text-align: left;
}
.feature-kin-inner {
  display: flex;
}
.feature-kin-product {
  width: 265px;
}
.feature-kin-product h4 img {
  width: 265px;
  margin: 69px 0 0 -25px;
}
.feature-kin-productP {
  width: 108px;
  margin: 63px 0 0 62px;
}
.feature-kin-graph01 {
  width: 283px;
  margin: 64px 0 0 28px;
}
.feature-kin-graph01 h5 img {
  width: 283px;
}
.feature-kin-graph01-text img {
  width: 250px;
  margin: 37px 0 31px 0;
}

.feature-kin-graph02 {
  width: 284px;
  margin: 64px 0 0 74px;
}
.feature-kin-graph02 h5 img {
  width: 284px;
}
.feature-kin-graph02-text img {
  width: 263px;
  margin: 37px 0 8px 0;
}
.feature-kin-graph01-dtl01 {
  width:242px;
  height: 270px;
}
.feature-kin-graph01-dtl01 .image-box.graph {
  width:242px;
  height: 270px;
  background-image: url(../img/feature_kin_graph01_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  position: relative;
  display: table-cell;
  vertical-align: bottom;
}
.feature-kin-graph01-dtl01 .image-box.graph > span.info-graph2 {
  display: block;
  height: 2px;
  width:242px;
  background-image: url(../img/feature_kin_graph01_01.png);
  background-repeat: no-repeat;
  background-size: 242px 270px;
  background-position: left bottom;
}
.feature-kin-graph02-dtl01 .image-box.graph {
  width:242px;
  height: 270px;
  background-image: url(../img/feature_kin_graph02_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  position: relative;
  display: table-cell;
  vertical-align: bottom;
}
.feature-kin-graph02-dtl01 .image-box.graph > span.info-graph2 {
  display: block;
  height: 2px;
  width:242px;
  background-image: url(../img/feature_kin_graph02_01.png);
  background-repeat: no-repeat;
  background-size: 242px 270px;
  background-position: left bottom;
}

/* --------------------------
    FEATUREキクマサリッチ
-------------------------- */
.feature-rich {
  position: relative;
  background:rgba(255,255,255,0.8);
  width: 1000px;
  height: 615px;
  margin: 48px auto 20px auto;
  text-align: left;
}

.feature-rich .richapple{
  position: absolute;
  top: 120px;
  left: -165px;
  z-index: -1;
}

.feature-rich .richapple img{
  display: block;
  width: 191px;
}

.feature-rich-inner {
  display: flex;
}
.feature-rich-product {
  width: 265px;
}
.feature-rich-product h4 img {
  width: 265px;
  margin: 69px 0 0 -25px;
}
.feature-rich-productP {
  width: 108px;
  margin: 63px 0 0 62px;
}
.feature-rich-graph01 {
  width: 283px;
  margin: 64px 0 0 28px;
}
.feature-rich-graph01 h5 img {
  width: 283px;
}
.feature-rich-graph01-text img {
  width: 285px;
  margin: 37px 0 33px 0;
}

.feature-rich-graph02 {
  width: 284px;
  margin: 69px 0 0 74px;
}
.feature-rich-graph02 h5 img {
  width: 284px;
}
.feature-rich-graph02-text img {
  width: 232px;
  margin: 37px 0 95px 0;
}
.feature-rich-graph01-dtl01 {
  width:242px;
  height: 270px;
}
.feature-rich-graph01-dtl01 .image-box.graph {
  width:242px;
  height: 270px;
  background-image: url(../img/feature_rich_graph01_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  position: relative;
  display: table-cell;
  vertical-align: bottom;
}
.feature-rich-graph01-dtl01 .image-box.graph > span.info-graph2 {
  display: block;
  height: 2px;
  width:242px;
  background-image: url(../img/feature_rich_graph01_01.png);
  background-repeat: no-repeat;
  background-size: 242px 270px;
  background-position: left bottom;
}
.feature-rich-graph02-dtl01 .image-box.graph {
  width:303px;
  height: 223px;
  background-image: url(../img/feature_rich_graph02_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  position: relative;
  display: table-cell;
  vertical-align: bottom;
}
.feature-rich-graph02-dtl01 .image-box.graph > span.info-graph2 {
  display: block;
  height: 2px;
  width:303px;
  background-image: url(../img/feature_rich_graph02_01.png);
  background-repeat: no-repeat;
  background-size: 303px 223px;
  background-position: left bottom;
}

.feature-annotation {
  width: 1000px;
  margin: 0 auto;
}
.feature-annotation p {
  font-size: 16px;
  text-align: right;
}
/* --------------------------
    FEATUREキクマサブルー
-------------------------- */
h3.feature-blue-h3 img {
  width: 622px;
  margin: 90px auto 45px auto;
}
.feature-blue {
  position: relative;
  background:rgba(255,255,255,0.8);
  width: 1000px;
  height: 615px;
  margin: 0 auto;
  text-align: left;
}
.feature-blue .apple{
  position: absolute;
  top: -155px;
  left: -50px;
  z-index: -1;
}
.feature-blue .apple img{
  display: block;
  width: 274px;
}
.feature-blue .banana{
  position: absolute;
  top: 300px;
  right: -235px;
  z-index: -1;
}
.feature-blue .banana img{
  display: block;
  width: 412px;
}
.feature-blue-inner {
  display: flex;
}
.feature-blue-product {
  width: 265px;
}
.feature-blue-product h4 img {
  width: 265px;
  margin: 69px 0 0 -25px;
}
.feature-blue-productP {
  width: 108px;
  margin: 63px 0 0 62px;
}
.feature-blue-graph01 {
  width: 710px;
  margin: 64px 0 0 28px;
}
.feature-blue-graph01 h5 {
  font-size: 24px;
  font-weight: normal;
}
.feature-blue-graph01 ul {
  width: 647px;
  display: flex;
  justify-content: space-between;
}
.feature-blue-graph01 ul.feature-blue-list01 {
  margin-top: 75px;
}
.feature-blue-graph01 ul.feature-blue-list02,
.feature-blue-graph01 ul.feature-blue-list04 {
  margin-top: 30px;
}
.feature-blue-graph01 ul.feature-blue-list03 {
  margin-top: 20px;
}
.feature-blue-graph01 ul li:nth-child(2) img {
  width: 438px;
}
.feature-blue-graph01 ul.feature-blue-list01 li:nth-child(1) img {
  margin-left: 4px;
  width: 199px;
}
.feature-blue-graph01 ul.feature-blue-list02 li:nth-child(1) img {
  margin-left: 8px;
  width: 130px;
}
.feature-blue-graph01 ul.feature-blue-list03 li:nth-child(1) img {
  width: 144px;
}
.feature-blue-graph01 ul.feature-blue-list04 li:nth-child(1) img {
  margin-left: 5px;
  width: 143px;
}


.feature-video{
  width: 100%;
  height: 100%;
  background-image: url(../img/bg_mp4.jpg) ;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;  
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.feature-video::after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
.feature-video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* ===================================
    MARIAGE
=================================== */
.mariage {
  width: 100%;
  margin: 0 auto 105px;
}
.mariage-whtbg {
  width: 100%;
  height: 180px;
  margin-top: -280px;
  overflow: hidden;
}
.mariage-whtbg img {
  width: 100%;
  min-height: 190px;
}
.mariage-inner {
  margin: 0 auto;
  padding-top: 0;
  width: 100%;
  text-align: center;
  overflow: hidden;
  background: url("../img/mariage_top_bg.jpg") ,#fff;
  background-repeat: no-repeat;
  background-size: 1200px 600px;
  background-position: center top;
}
.mariage-inner h2 img {
  width: 100px;
}
.mariage-box01 {
  margin: 0 auto 90px auto;
  width: 100%;
  height: 600px;

}
.mariage-box01 h3 img {
  margin-top: 90px;
  width: 732px;
}
.mariage-box01-txt {
  width: 1000px;
  margin: 120px auto 0 auto;
  text-align: left;
}
.mariage-box01-txt p {
  width: 340px;
  display: block;
  background: #fff;
  padding: 20px 30px 20px 30px;
}

/* --------------------------
    MARIAGEキクマサギン
-------------------------- */
.mariage-box02 {
  width: 100%;
}


.mariage-gin {
  width: 1100px;
  padding-bottom: 50px;
  margin: 0 auto;
  background: #E2E6ED;
  text-align: left;
  display: flex;
}
.mariage-ruby {
  width: 1100px;
  padding-bottom: 45px;
  margin: 95px auto;
  background: #FAE3EE;
  text-align: left;
  display: flex;
}
.mariage-kin {
  width: 1100px;
  padding-bottom: 45px;
  margin: 95px auto;
  background: #F9F0C7;
  text-align: left;
  display: flex;
}
.mariage-rich {
  width: 1100px;
  padding-bottom: 45px;
  margin: 95px auto;
  background: #D7F0EA;
  text-align: left;
  display: flex;
}
.mariage-blue {
  width: 1100px;
  padding-bottom: 45px;
  margin: 95px auto;
  background: #DAECF8;
  text-align: left;
  display: flex;
}
.mariage-gin-left,
.mariage-ruby-left,
.mariage-kin-left,
.mariage-rich-left,
.mariage-blue-left {
  width: 450px;
  margin: -15px 0 0 70px;
}
.mariage-left01-product img {
  width: 63px;
}
.mariage-gin-left01,
.mariage-ruby-left01,
.mariage-kin-left01,
.mariage-rich-left01,
.mariage-blue-left01 {
  display: flex;
  width: 436px;
  justify-content: space-between;
}
.mariage-gin-left01 h4 img,
.mariage-ruby-left01 h4 img,
.mariage-kin-left01 h4 img,
.mariage-rich-left01 h4 img,
.mariage-blue-left01 h4 img {
  width: 265px;
}
.mariage-gin-left01 h5 {
  margin-top: 46px;
}
.mariage-ruby-left01 h5 {
  margin-top: 91px;
}
.mariage-kin-left01 h5 {
  margin-top: 91px;
}
.mariage-rich-left01 h5 {
  margin-top: 46px;
}
.mariage-blue-left01 h5 {
  margin-top: 91px;
}

.mariage-gin-left01 h5 img {
  width: 229px;
}
.mariage-ruby-left01 h5 img {
  width: 276px;
}
.mariage-kin-left01 h5 img {
  width: 296px;
}
.mariage-rich-left01 h5 img {
  width: 268px;
}
.mariage-blue-left01 h5 img {
  width: 314px;
}
.mariage-right-img img {
  margin-left: 50px;
  width: 570px;
}
.mariage-gin-left02,
.mariage-ruby-left02,
.mariage-kin-left02,
.mariage-rich-left02,
.mariage-blue-left02 {
  font-size: 17px;
  line-height: 1.8em;
  margin-top: 13px;
  padding: 13px 0;
  border-top: #000 solid 1px;
  border-bottom: #000 solid 1px;
}
.mariage-gin-left03,
.mariage-ruby-left03,
.mariage-kin-left03,
.mariage-rich-left03,
.mariage-blue-left03 {
  position: relative;
  display: flex;
  width: 436px;
  justify-content: space-between;
}

.recomend{
  position: absolute;
  top: 0;
  left: -60px;
}

.recomend img{
  width: 110px;
}

.mariage-btn {
  width: 47%;
  text-align: center;
  margin-top: 50px;
  padding: 5px 0;
  border: #000 1px solid;
}
.mariage-gin-right,
.mariage-ruby-right,
.mariage-kin-right,
.mariage-rich-right,
.mariage-blue-right {
  text-align: center;
  width: 100%;
  margin-top: 45px;
  margin-left: 50px;
}
.mariage-gin-right01 img {
  width: 356px;
}
.mariage-ruby-right01 img {
  width: 355px;
}
.mariage-kin-right01 img {
  width: 292px;
}
.mariage-rich-right01 img {
  width: 383px;
}
.mariage-blue-right01 img {
  width: 295px;
}
.mariage-graph {
  background-color: #FFEED3;
  margin-top: -20px;
  padding-bottom: 80px;
}
.mariage-graph h3 {
  padding-top: 30px;
}
.mariage-graph h3 img {
  width: 568px;
  margin-bottom: 30px;
}
.mariage-graph-dtl01 {
  margin: 0 auto;
  padding-bottom: 15px;
  width: 868px;
  position: relative
}
.mariage-graph-dtl01 img {
  width: 868px;
}
.mariage-graph-dtl01-02,
.mariage-graph-dtl01-03 {
  display: none;
  position: absolute;
  top:0
}


/* ===================================
    graphbox
=================================== */

.graphbox .graphbox-headertxt{
  width: 500px;
  height: 100px;
  margin: auto;
}

.graphbox .graphbox-headertxt img{
  display: block;
}

.graphbox .graphbox-maingraph .topgraph{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.graphbox .graphbox-maingraph .bottomgraph{
  display: flex;
  align-items: center;
  justify-content: center;
}



/* ===================================
    Lineup
=================================== */

#lineup {
  margin: 0 auto;
  text-align: center;
  color: #000;
}
#lineup h2 {
  text-align: center;
  margin: 0 0 -26px 0;
  line-height: 1.3em;
}
#lineup h2 img {
  width: 100px;
  margin: 0 0 22px 0;
}
.lineup-inner {
  width: 100%;
}
.lineup-btn-area {
  margin: 120px auto 0;
  width: 930px;
  height: 478px;
  position: relative;
}
.lineup-btn-gin,
.lineup-btn-kin,
.lineup-btn-rich,
.lineup-btn-blue,
.lineup-btn-ruby {
  display: block;
  position: absolute;
  width: 113px;
  transition: transform .3s ease;
  cursor: pointer;
}
.lineup-btn-gin:hover,
.lineup-btn-kin:hover,
.lineup-btn-rich:hover,
.lineup-btn-blue:hover,
.lineup-btn-ruby:hover {
  transform: scale(1.1);
}
.lineup-btn-gin img,
.lineup-btn-kin img,
.lineup-btn-rich img,
.lineup-btn-blue img,
.lineup-btn-ruby img {
  width: 100%;
}
.lineup-btn-gin {
  top: 0;
  left: 30px;
}
.lineup-btn-kin {
  top: 0;
  left: 220px;
}
.lineup-btn-rich {
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.lineup-btn-blue {
  top: 0;
  right: 220px;
}
.lineup-btn-ruby {
  top: 0;
  right: 30px;
}
.lineup-btn-ginLogo {
  position: absolute;
  width: 168px;
  bottom: 0;
  left: 0;
}
.lineup-btn-kinLogo {
  position: absolute;
  width: 168px;
  bottom: 0;
  left: 30px;
}
.lineup-btn-kinLogo {
  position: absolute;
  width: 168px;
  bottom: 0;
  left: 191px;
}
.lineup-btn-richLogo {
  position: absolute;
  width: 168px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.lineup-btn-blueLogo {
  position: absolute;
  width: 168px;
  bottom: 0;
  right: 191px;
}
.lineup-btn-rubyLogo {
  position: absolute;
  width: 168px;
  bottom: 0;
  right: 0;
}
.lineup-modal01,
.lineup-modal02,
.lineup-modal03,
.lineup-modal04,
.lineup-modal05 {
  width:100%;
  height: 100%;
  position: fixed;
  left:0;
  top:0;
  z-index: 1000;
  display: none;
  opacity: 0;
}
.lineup-modal01.open,
.lineup-modal02.open,
.lineup-modal03.open,
.lineup-modal04.open,
.lineup-modal05.open {
  display: block;
  opacity: 1;
  animation: fadeIn 1s forwards;
}
.modal__inner {
  max-width: 1200px;
  width: 100%;
  max-height: 1200px;
  height: 90vh;
  overflow: auto;
  position: fixed;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.overlay{
  width:100%;
  height: 100%;
  background: black;
  opacity: 0.7;
  position: absolute;
  left:0;
  top:0;
}
.m-close__btn{
  width: 95px;
  display: flex;
  position: absolute;
  top:20px;
  left:20px;
  cursor: pointer;
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}
.m-close__btn img{
  width: 100%;
}
.lineup-inner-dtl01 {
  margin: 0 auto 0 auto;
  padding: 0 0 30px 0;
  background: #E9ECF1;
  background-image: url("../img/lineup_gnBg.png");
  background-repeat: no-repeat;
  background-size: 101px;
  background-position: top 50px right 30px;
  position: relative;
}
.lineup-inner-dtl02 {
  width: 100%;
  margin: 0 auto 0 auto;
  padding: 0 0 30px 0;
  background: #F9F0C7;
  background-image: url("../img/lineup_kinBg.png");
  background-repeat: no-repeat;
  background-size: 101px;
  background-position: top 50px right 30px;
  position: relative;
}
.lineup-inner-dtl03 {
  width: 100%;
  margin: 0 auto 0 auto;
  padding: 0 0 30px 0;
  background: #D7F0EA;
  background-image: url("../img/lineup_richBg.png");
  background-repeat: no-repeat;
  background-size: 101px;
  background-position: top 50px right 30px;
  position: relative;
}
.lineup-inner-dtl04 {
  width: 100%;
  margin: 0 auto 0 auto;
  padding: 0 0 30px 0;
  background: #DAECF8;
  background-image: url("../img/lineup_blueBg.png");
  background-repeat: no-repeat;
  background-size: 131px;
  background-position: top 50px right;
  position: relative;
}
.lineup-inner-dtl05 {
  width: 100%;
  margin: 0 auto 0 auto;
  padding: 0 0 30px 0;
  background: #FADCE9;
  background-image: url("../img/lineup_rubyBg.png");
  background-repeat: no-repeat;
  background-size: 113px;
  background-position: top 50px right 15px;
  position: relative;
}
.lineup-inner-dtl01-wipper,
.lineup-inner-dtl02-wipper,
.lineup-inner-dtl03-wipper,
.lineup-inner-dtl04-wipper,
.lineup-inner-dtl05-wipper {
  width: 900px;
  margin: 0% auto 0 auto;
}
.lineup-inner-dtl01-wipper h3,
.lineup-inner-dtl02-wipper h3,
.lineup-inner-dtl03-wipper h3,
.lineup-inner-dtl04-wipper h3,
.lineup-inner-dtl05-wipper h3 {
  text-align: left;
  padding-top: 60px;
}
.lineup-inner-dtl01-wipper h3 img,
.lineup-inner-dtl02-wipper h3 img,
.lineup-inner-dtl03-wipper h3 img,
.lineup-inner-dtl04-wipper h3 img,
.lineup-inner-dtl05-wipper h3 img {
  margin: 80px 0 80px 0;
}
.lineup-inner-dtl01-wipper h3 img {
  width: 553px;
}
.lineup-inner-dtl02-wipper h3 img {
  width: 632px;
}
.lineup-inner-dtl03-wipper h3 img {
  width: 526px;
}
.lineup-inner-dtl04-wipper h3 img {
  width: 529px;
}
.lineup-inner-dtl05-wipper h3 img {
  width: 508px;
}
.lineup-gin-product {
  margin-top: -40px;
}
.lineup-gin-product img {
  width: 469px;
}
.lineup-kin-product img {
  margin-right: 45px;
  width: 350px;
}
.lineup-rich-product img {
  margin-right: 110px;
  width: 229px;
}
.lineup-blue-product img {
  margin-right: 110px;
  width: 229px;
}
.lineup-ruby-product img {
  margin-right: 110px;
  width: 229px;
}
.lineup-inner-dtl01-box,
.lineup-inner-dtl02-box,
.lineup-inner-dtl03-box,
.lineup-inner-dtl04-box,
.lineup-inner-dtl05-box {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.lineup-inner-dtl01-dl,
.lineup-inner-dtl02-dl,
.lineup-inner-dtl03-dl,
.lineup-inner-dtl04-dl,
.lineup-inner-dtl05-dl {
  width: 350px;
  margin: 0 60px 0 0;
}
.lineup-inner-dtl01-dl01,
.lineup-inner-dtl02-dl01,
.lineup-inner-dtl03-dl01,
.lineup-inner-dtl04-dl01,
.lineup-inner-dtl05-dl01 {
  font-size: 24px;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
}
.lineup-inner-dtl01-dl01 li,
.lineup-inner-dtl02-dl01 li,
.lineup-inner-dtl03-dl01 li,
.lineup-inner-dtl04-dl01 li,
.lineup-inner-dtl05-dl01 li {
  padding: 4px 0;
  text-align: left;
}
dl.lineup-inner-dtl01-dl01 dt,
dl.lineup-inner-dtl02-dl01 dt,
dl.lineup-inner-dtl03-dl01 dt,
dl.lineup-inner-dtl04-dl01 dt,
dl.lineup-inner-dtl05-dl01 dt {
  float: left;
  clear: both;
  width: 10em;
  padding: 4px 0;
  text-align: left;
}
dl.lineup-inner-dtl01-dl01 dd,
dl.lineup-inner-dtl02-dl01 dd,
dl.lineup-inner-dtl03-dl01 dd,
dl.lineup-inner-dtl04-dl01 dd,
dl.lineup-inner-dtl05-dl01 dd {
  padding: 4px 0 4px 10em;
  text-align: right;
}
.lineupkome {
  font-size: 14px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  text-align: left;
  margin-top: 20px;
}
dl.lineup-inner-dtl01-dl02,
dl.lineup-inner-dtl02-dl02,
dl.lineup-inner-dtl03-dl02,
dl.lineup-inner-dtl04-dl02,
dl.lineup-inner-dtl05-dl02 {
  font-size: 14px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: 0;
  margin: 40px 0 0 0;
  padding: 0;
  line-height: 4ex;
  text-align: left;
}
dl.lineup-inner-dtl01-dl02 dt,
dl.lineup-inner-dtl02-dl02 dt,
dl.lineup-inner-dtl03-dl02 dt,
dl.lineup-inner-dtl04-dl02 dt,
dl.lineup-inner-dtl05-dl02 dt {
  float: left;
  clear: left;
  width: 8.5em;
  padding: 5px 0;
}
dl.lineup-inner-dtl01-dl02 dd,
dl.lineup-inner-dtl02-dl02 dd,
dl.lineup-inner-dtl03-dl02 dd,
dl.lineup-inner-dtl04-dl02 dd,
dl.lineup-inner-dtl05-dl02 dd {
  padding: 5px 0 5px 8.5em;
  border-bottom: 1px #000 solid;
}
dl.lineup-inner-dtl01-dl02 dd:nth-of-type(1),
dl.lineup-inner-dtl02-dl02 dd:nth-of-type(1),
dl.lineup-inner-dtl03-dl02 dd:nth-of-type(1),
dl.lineup-inner-dtl04-dl02 dd:nth-of-type(1),
dl.lineup-inner-dtl05-dl02 dd:nth-of-type(1) {
  border-top: 1px #000 solid;
}
.sakeajiimg {
  width: 900px;
  margin: 30px 0 40px 0;
  background: #fff;
  padding: 30px 0;
  text-align: center;
}
.sakeajiimg img {
  width: 590px;
}
.shoplink {
  text-align: center;
  margin-bottom: 40px;
}
.shoplink img {
  width: 460px;
  border: #86807E 2px solid;
  border-radius: 6px;
}
.shoplink a img {
  transition: 0.6s;
}
.shoplink a:hover img {
  opacity: 0.5;
}




/* ===================================
    footer
=================================== */

.footer {
  width: 90%;
  border-top: 1px solid #9FA0A0;
  text-align: center;
  color: #9FA0A0;
  margin:  0 auto 50px auto;
}
.footer-cpywriter {
  font-size: 10px;
  margin: 10px;
  line-height: 1.6em;

}
.footer-annotation {
  font-size: 12px;
  line-height: 1.6em;
}

.rside_shoplink {
  position: fixed;
  z-index: 10;
  margin: 0;
  padding: 0;
  width: 180px;
  height: 80px;
  bottom: 0;
  right: 0;  
}
.rside_shoplink img  {
  width: 180px;
  height: 80px;
}
@media screen and (max-width: 640px) {
  .rside_shoplink {
    display: none;
  }
}





@media screen and (min-width: 641px) and (max-width: 1200px) {
  body{
    font-size: 18rem;
  }
  .header-container {
    padding: 0 20rem;
  }
  .header-logo {
    width: 115rem;
    margin: 25rem 0 0 0;
  }
  .menu-nav {
    width: 600rem;
    margin-top: 40rem;
    margin-left: 200rem;
  }
  .g-nav-list02 {
    margin: 0 0 0 9rem;
  }
  .g-nav-list01 li {
    margin: 3rem 30rem 0 0;
  }
  .g-nav-list02 li {
    margin: 0 8rem;
  }
  
  .g-nav-list01 li:nth-child(1) img {width: 31rem; margin-top: 3rem;}
  .g-nav-list01 li:nth-child(4) img {width: 48rem;}
  .g-nav-list01 li:nth-child(2) img {width: 71rem; margin-top: 3rem;}
  .g-nav-list01 li:nth-child(5) img {width: 75rem; margin-top: 3rem;}
  .g-nav-list01 li:nth-child(3) img {width: 58rem; margin-top: 3rem;}
  
  .g-nav-list02 li:nth-child(1) img {width: 20rem;}
  .g-nav-list02 li:nth-child(2) img {width: 18rem; margin-top: 1rem;}
  .g-nav-list02 li:nth-child(3) img {width: 20rem;}
  .g-nav-list02 li:nth-child(4) img {width: 22rem; margin-top: 2rem;}
  
  nav a {
    padding: 0.5rem;
  }
  
  
  /*  ナビゲーション
  -------------------------------------*/
  
  
  /*========= ボタンのためのCSS ===============*/
  .openbtn {
    width: 60rem;
    height: 60rem;
    border-radius: 5rem;
  }
  
  
  /*×に変化*/
  .openbtn span {
    left: 14rem;
    height: 3rem;
    border-radius: 3rem;
    width: 50%;
  }
  .openbtn span:nth-of-type(1) {
    top: 15rem;
  }
  .openbtn span:nth-of-type(2) {
    top: 23rem;
  }
  .openbtn span:nth-of-type(3) {
    top: 31rem;
  }
  .openbtn.active span:nth-of-type(1) {
    top: 18rem;
    left: 18rem;
    width: 50%;
  }
  .openbtn.active span:nth-of-type(3) {
    top: 30rem;
    left: 18rem;
  }

  /* ===================================
    Top
=================================== */
.top {
  margin: 100rem auto 90rem auto;
  width: 100%;
  height: 785rem;
}
.top-inner {
  width: 100%;
  height: 785rem;
}
.top-inner-dtl {
  width: 1700rem;
  top: 0;
  left: 50%;
}
.top-inner-dtlbox {
  width: 1200rem;
  top: 0;
}
.top-whtbg {
  width: 100%;
  height: 243rem;
  bottom: 0;
  left: 50%;
}
.top-whtbg img {
  width: 100%;
  height: auto;
}
.top-elmt00 {
  top: 48rem;
  left: 50%;
  width: 770rem;
}
.top-elmt01 {
  bottom: -10rem;
  left: 148rem;
  width: 98rem;
}
.top-elmt02 {
  bottom: -10rem;
  left: 350rem;
  width: 98rem;
}
.top-elmt03 {
  bottom: -10rem;
  width: 98rem;
}
.top-elmt035 {
  bottom: -10rem;
  right: 350rem;
  width: 98rem;
}
.top-elmt037 {
  bottom: -10rem;
  right: 148rem;
  width: 98rem;
}
.top-elmt04 {
  top: 55rem;
  right: 30rem;
  width: 68rem;
}
.top-elmt05 {
  bottom: 15rem;
  left: 110rem;
  width: 173rem;
}
.top-elmt06 {
  bottom: 15rem;
  left: 313rem;
  width: 173rem;
}
.top-elmt07 {
  bottom: 15rem;
  width: 173rem;
}
.top-elmt08 {
  bottom: 15rem;
  right: 313rem;
  width: 173rem;
}
.top-elmt09 {
  bottom: 15rem;
  right: 110rem;
  width: 173rem;
}
/* ===================================
    Top下
=================================== */
.topUnder-inner01 {
  width: 1000rem;
  margin: 65rem auto;
}
.topUnder-inner01 h2 {
  width: 1000rem;
  text-align: center;
}
.topUnder-inner01 h2 img {
  width: 480rem;
}
.topUnder-inner01-01, .topUnder-inner01-02, .topUnder-inner01-03 {
  margin-top: 140rem;
  display: flex;
  width: 1000rem;
}
.topUnder-inner01-01 div, .topUnder-inner01-02 div, .topUnder-inner01-03 div {
  width: 500rem;
}
.topUnder-inner01-01-dtl02 img, .topUnder-inner01-03-dtl02 img {
  width: 430rem;
}
.topUnder-inner01-02-dtl02 img {
  width: 300rem;
}
.topUnder-inner01-04 {
  margin-top: 140rem;
}
.topUnder-inner01-04 h2 {
  font-size: 28rem;
  margin-top: 140rem;
}
.topUnder-inner01-04 p {
  margin-top: 40rem;
}
.topUnder-inner01dawn {
  margin-top: 100rem;
  width: 100%;
  height: 350rem;
  background-size: 1465rem 350rem;
}
.topUnder-inner02 {
  margin: 0 auto;
  height: 628rem;
}
.topUnder-inner02-01 {
  width: 100%;
  height: 630rem;
}
.topUnder-inner02-01-dtl01 {
  width: 290rem;
  top: 110rem;
}
.topUnder-inner02-01-dtl01 img {
  width: 290rem;
}
.topUnder-inner02-01-dtl02 {
  width: 680rem;
  height: 380rem;
  top: 190rem;
}
.topUnder-whtbg {
  width: 100%;
  height: 240rem;
}
.topUnder-whtbg img {
  width: 100%;
  min-height: 245rem;
}

/* ===================================
    受賞歴 Awards
=================================== */
.awards-btn{
  margin: 150rem auto 200rem;
}
.awards-btn-area {
  height: 690rem;
}
.awards-modal-btn {
  width: 440rem;
}
.awards-modal-btn h2 {
  margin-top: 65rem;
  width: 440rem;
}
.awards-btn-icon {
  width: 232rem;
}
.awards-modal__inner{
  max-width: 1200rem;
  max-height: 1560rem;
}
.awards {
  padding:0 0 50rem;
}
.awards .h2-box {
  background-size: 1200rem 120rem;
  height: 120rem;
}
.awards h2 {
  padding-top: 90rem;
  text-align: center;
}
.awards h2 img {
  width: 400rem;
}
.awards-inner {
  width: 100%;
}
.awards-inner-01 {
  width: 100%;
  height: 1310rem;
  background-size: 1200rem 1213rem;
}
.awards-inner-01-dtl {
  height: 920rem;
}
.awards-elmt01 {
  width: 1106rem;
  top: 271rem;
}
.awards-elmt01 img {
  width: 1106rem;
}
.awards-elmt02 {
  width: 480rem;
  top: 580rem;
  right: 79rem;
}
.awards-elmt02 img {
  width: 480rem;
}
.awards-elmt03 {
  width: 591rem;
  top: 680rem;
  left: 42rem;
}
.awards-elmt03 img {
  width: 591rem;
}
.awards-inner-02-dtl {
  width: 700rem;
  height: 370rem;
}
.awards-inner-02-dtl h3 {
  font-size: 20rem;
  margin-top: 13rem;
}
.awards-inner-02-gin {
  width: 650rem;
  margin: 15rem auto 20rem auto;
  padding: 15rem 0 5rem 0;
}
.awards-inner-02-gin h4, .awards-inner-02-kin h4, .awards-inner-02-rich h4, .awards-inner-02-ruby h4 {
  width: 210rem;
  margin: 0 auto;
}
.awards-inner-02-gin dl, .awards-inner-02-kin dl, .awards-inner-02-rich dl, .awards-inner-02-ruby dl {
  width: 530rem;
  margin: 20rem auto 10rem auto;
}
.awards-inner-02-gin dl dt, .awards-inner-02-kin dl dt, .awards-inner-02-rich dl dt, .awards-inner-02-ruby dl dt {
  width: 110rem;
  margin-top: 45rem;
}
.awards-inner-02-gin dl dt img, .awards-inner-02-kin dl dt img, .awards-inner-02-rich dl dt img, .awards-inner-02-ruby dl dt img {
  width: 80rem;
}
.awards-inner-02-gin dl dd, .awards-inner-02-kin dl dd, .awards-inner-02-rich dl dd, .awards-inner-02-ruby dl dd {
  width: 420rem;
  font-size: 16rem;
  line-height: 1.4em;
  margin-top: 45rem;
}
.awards-inner-02-gin dl dt:first-of-type, .awards-inner-02-kin dl dt:first-of-type, .awards-inner-02-rich dl dt:first-of-type, .awards-inner-02-ruby dl dt:first-of-type,
.awards-inner-02-gin dl dd:first-of-type, .awards-inner-02-kin dl dd:first-of-type, .awards-inner-02-rich dl dd:first-of-type, .awards-inner-02-ruby dl dd:first-of-type {
  margin-top: 0 !important;
}
.awards-inner-02-kin {
  width: 650rem;
  margin: 15rem auto 20rem auto;
  padding: 15rem 0 5rem 0;
}
.awards-inner-02-rich {
  width: 650rem;
  margin: 15rem auto 20rem auto;
  padding: 15rem 0 5rem 0;
}
.awards-inner-02-ruby {
  width: 650rem;
  margin: 15rem auto 20rem auto;
  padding: 15rem 0 5rem 0;
}



/* ===================================
    FEATURE
=================================== */
.feature {
  width: 100%;
  margin: 0 auto;
}
.feature h2 {
  width: 100%;
  margin-top: 100rem;
  text-align: center;
}
.feature h2 img {
  width: 100rem;
}
.feature-inner {
  margin: 0 auto 90rem auto;
}

.feature-inner-01-dtl01 {
  background-color: #fff;
  width: 100%;
  margin: 45rem auto 0 auto;
  padding: 90rem 0 40rem 0;
}
.feature-inner-01-dtl01-box01 {
  width: 980rem;
  margin: 0 auto ;
}
.feature-inner-01-dtl01-box01 h3 {
  width: 383rem;
}
.feature-inner-01-dtl01-box01 h3 img {
  width: 383rem;
}
.feature-inner-01-dtl01-box01-mov {
  margin-top: 45rem;
}
.feature-inner-01-dtl01-box01-mov img{
  height: 382rem;
  width: 680rem;
}
.feature-inner-01-dtl01-box01-txt ul {
  width: 100%;
  margin-top: 60rem;
}
.feature-inner-01-dtl01-box01-txt li:nth-child(1) h4 img {
  width: 300rem;
  margin-bottom: 40rem;
}
.feature-inner-01-dtl01-box01-txt li:nth-child(2) h4 img {
  width: 278rem;
  margin-bottom: 38rem;
}
.feature-inner-01-dtl02 h3 img {
  width: 454rem;
  margin: 90rem auto 45rem auto;
}
/* --------------------------
    FEATUREキクマサギン
-------------------------- */
.feature-gin {
  width: 1000rem;
  height: 615rem;
}

.feature-gin .apple{
  top: -155rem;
  left: -50rem;
}

.feature-gin .apple img{
  width: 274rem;
}

.feature-gin .banana{
  top: 300rem;
  right: -235rem;
}

.feature-gin .banana img{
  width: 412rem;
}

.feature-gin-product {
  width: 265rem;
}
.feature-gin-product h4 img {
  width: 265rem;
  margin: 69rem 0 0 -25rem;
}
.feature-gin-productP {
  width: 108rem;
  margin: 63rem 0 0 62rem;
}
.feature-gin-graph01 {
  width: 283rem;
  margin: 64rem 0 0 28rem;
}
.feature-gin-graph01 h5 img {
  width: 283rem;
}
.feature-gin-graph01-text img {
  width: 256rem;
  margin: 37rem 0 30rem 0;
}

.feature-gin-graph02 {
  width: 285rem;
  margin: 64rem 0 0 74rem;
}
.feature-gin-graph02 h5 img {
  width: 285rem;
}
.feature-gin-graph02-text img {
  width: 245rem;
  margin: 37rem 0 30rem 0;
}
.feature-gin-graph01-dtl01 {
  width:242rem;
  height: 270rem;
}
.feature-gin-graph01-dtl01 .image-box.graph {
  width:242rem;
  height: 270rem;
}
.feature-gin-graph01-dtl01 .image-box.graph > span.info-graph2 {
  height: 2rem;
  width:242rem;
  background-size: 242rem 270rem;
}
.image-box.graph > span.info-graph4 {
  width: 0rem;
}
.info-graph3 img {
  width:242rem;
  height: 270rem;
}
.feature-gin-graph02-dtl01 .image-box.graph {
  width:242rem;
  height: 270rem;
}
.feature-gin-graph02-dtl01 .image-box.graph > span.info-graph2 {
  height: 2rem;
  width:242rem;
  background-size: 242rem 270rem;
}
/* --------------------------
    FEATUREキクマサキン
-------------------------- */
.feature-kin {
  width: 1000rem;
  height: 615rem;
  margin: 48rem auto;
}
.feature-kin-product {
  width: 265rem;
}
.feature-kin-product h4 img {
  width: 265rem;
  margin: 69rem 0 0 -25rem;
}
.feature-kin-productP {
  width: 108rem;
  margin: 63rem 0 0 62rem;
}
.feature-kin-graph01 {
  width: 283rem;
  margin: 64rem 0 0 28rem;
}
.feature-kin-graph01 h5 img {
  width: 283rem;
}
.feature-kin-graph01-text img {
  width: 250rem;
  margin: 37rem 0 31rem 0;
}

.feature-kin-graph02 {
  width: 284rem;
  margin: 64rem 0 0 74rem;
}
.feature-kin-graph02 h5 img {
  width: 284rem;
}
.feature-kin-graph02-text img {
  width: 263rem;
  margin: 37rem 0 8rem 0;
}
.feature-kin-graph01-dtl01 {
  width:242rem;
  height: 270rem;
}
.feature-kin-graph01-dtl01 .image-box.graph {
  width:242rem;
  height: 270rem;
}
.feature-kin-graph01-dtl01 .image-box.graph > span.info-graph2 {
  height: 2rem;
  width:242rem;
  background-size: 242rem 270rem;
}
.feature-kin-graph02-dtl01 .image-box.graph {
  width:242rem;
  height: 270rem;
}
.feature-kin-graph02-dtl01 .image-box.graph > span.info-graph2 {
  display: block;
  height: 2rem;
  width:242rem;
  background-size: 242rem 270rem;
}

/* --------------------------
    FEATUREキクマサリッチ
-------------------------- */
.feature-rich {
  width: 1000rem;
  height: 615rem;
  margin: 48rem auto 20rem auto;
}

.feature-rich .richapple{
  top: 120rem;
  left: -165rem;
}

.feature-rich .richapple img{
  width: 191rem;
}

.feature-rich-product {
  width: 265rem;
}
.feature-rich-product h4 img {
  width: 265rem;
  margin: 69rem 0 0 -25rem;
}
.feature-rich-productP {
  width: 108rem;
  margin: 63rem 0 0 62rem;
}
.feature-rich-graph01 {
  width: 283rem;
  margin: 64rem 0 0 28rem;
}
.feature-rich-graph01 h5 img {
  width: 283rem;
}
.feature-rich-graph01-text img {
  width: 285rem;
  margin: 37rem 0 33rem 0;
}

.feature-rich-graph02 {
  width: 284rem;
  margin: 69rem 0 0 74rem;
}
.feature-rich-graph02 h5 img {
  width: 284rem;
}
.feature-rich-graph02-text img {
  width: 232rem;
  margin: 37rem 0 95rem 0;
}
.feature-rich-graph01-dtl01 {
  width:242rem;
  height: 270rem;
}
.feature-rich-graph01-dtl01 .image-box.graph {
  width:242rem;
  height: 270rem;
}
.feature-rich-graph01-dtl01 .image-box.graph > span.info-graph2 {
  height: 2rem;
  width:242rem;
  background-size: 242rem 270rem;
}
.feature-rich-graph02-dtl01 .image-box.graph {
  width:303rem;
  height: 223rem;
}
.feature-rich-graph02-dtl01 .image-box.graph > span.info-graph2 {
  display: block;
  height: 2rem;
  width:303rem;
  background-size: 303rem 223rem;
}

.feature-annotation {
  width: 1000rem;
}
.feature-annotation p {
  font-size: 16rem;
}
/* --------------------------
    FEATUREキクマサブルー
-------------------------- */
h3.feature-blue-h3 img {
  width: 622rem;
  margin: 90rem auto 45rem auto;
}
.feature-blue {
  width: 1000rem;
  height: 615rem;
}
.feature-blue .apple{
  top: -155rem;
  left: -50rem;
}
.feature-blue .apple img{
  width: 274rem;
}
.feature-blue .banana{
  top: 300rem;
  right: -235rem;
}
.feature-blue .banana img{
  width: 412rem;
}
.feature-blue-product {
  width: 265rem;
}
.feature-blue-product h4 img {
  width: 265rem;
  margin: 69rem 0 0 -25rem;
}
.feature-blue-productP {
  width: 108rem;
  margin: 63rem 0 0 62rem;
}
.feature-blue-graph01 {
  width: 710rem;
  margin: 64rem 0 0 28rem;
}
.feature-blue-graph01 h5 {
  font-size: 24rem;
}
.feature-blue-graph01 ul {
  width: 647rem;
}
.feature-blue-graph01 ul.feature-blue-list01 {
  margin-top: 75rem;
}
.feature-blue-graph01 ul.feature-blue-list02,
.feature-blue-graph01 ul.feature-blue-list04 {
  margin-top: 30rem;
}
.feature-blue-graph01 ul.feature-blue-list03 {
  margin-top: 20rem;
}
.feature-blue-graph01 ul li:nth-child(2) img {
  width: 438rem;
}
.feature-blue-graph01 ul.feature-blue-list01 li:nth-child(1) img {
  margin-left: 4rem;
  width: 199rem;
}
.feature-blue-graph01 ul.feature-blue-list02 li:nth-child(1) img {
  margin-left: 8rem;
  width: 130rem;
}
.feature-blue-graph01 ul.feature-blue-list03 li:nth-child(1) img {
  width: 144rem;
}
.feature-blue-graph01 ul.feature-blue-list04 li:nth-child(1) img {
  margin-left: 5rem;
  width: 143rem;
}





/* ===================================
    MARIAGE
=================================== */
.mariage {
  margin: 0 auto 105rem;
}
.mariage-whtbg {
  height: 180rem;
  margin-top: -280rem;
}
.mariage-whtbg img {
  min-height: 190rem;
}
.mariage-inner {
  background-size: 1200rem 600rem;
}
.mariage-inner h2 img {
  width: 100rem;
}
.mariage-box01 {
  margin: 0 auto 90rem auto;
  height: 600rem;
}
.mariage-box01 h3 img {
  margin-top: 90rem;
  width: 732rem;
}
.mariage-box01-txt {
  width: 1000rem;
  margin: 120rem auto 0 auto;
}
.mariage-box01-txt p {
  width: 340rem;
  padding: 20rem 30rem 20rem 30rem;
}

/* Animation */



.mariage-gin {
  width: 1100rem;
  padding-bottom: 45rem;
}
.mariage-ruby {
  width: 1100rem;
  padding-bottom: 45rem;
  margin: 95rem auto;
}
.mariage-kin {
  width: 1100rem;
  padding-bottom: 45rem;
  margin: 95rem auto;
}
.mariage-rich {
  width: 1100rem;
  padding-bottom: 45rem;
  margin: 95rem auto;
}
.mariage-blue {
  width: 1100rem;
  padding-bottom: 45rem;
  margin: 95rem auto;
}
.mariage-gin-left,
.mariage-ruby-left,
.mariage-kin-left,
.mariage-rich-left,
.mariage-blue-left {
  width: 450rem;
  margin: -15rem 0 0 70rem;
}
.mariage-left01-product img {
  width: 63rem;
}
.mariage-gin-left01,
.mariage-ruby-left01,
.mariage-kin-left01,
.mariage-rich-left01,
.mariage-blue-left01 {
  width: 436rem;
}
.mariage-gin-left01 h4 img,
.mariage-ruby-left01 h4 img,
.mariage-kin-left01 h4 img,
.mariage-rich-left01 h4 img,
.mariage-blue-left01 h4 img {
  width: 265rem;
}
.mariage-gin-left01 h5 {
  margin-top: 46rem;
}
.mariage-ruby-left01 h5 {
  margin-top: 91rem;
}
.mariage-kin-left01 h5 {
  margin-top: 91rem;
}
.mariage-rich-left01 h5 {
  margin-top: 46rem;
}
.mariage-blue-left01 h5 {
  margin-top: 91rem;
}

.mariage-gin-left01 h5 img {
  width: 229rem;
}
.mariage-ruby-left01 h5 img {
  width: 276rem;
}
.mariage-kin-left01 h5 img {
  width: 296rem;
}
.mariage-rich-left01 h5 img {
  width: 268rem;
}
.mariage-blue-left01 h5 img {
  width: 314rem;
}
.mariage-right-img img {
  margin-left: 50rem;
  width: 570rem;
}
.mariage-gin-left02,
.mariage-ruby-left02,
.mariage-kin-left02,
.mariage-rich-left02,
.mariage-blue-left02 {
  font-size: 17rem;
  line-height: 1.8em;
  margin-top: 13rem;
  padding: 13rem 0;
}
.mariage-gin-left03,
.mariage-ruby-left03,
.mariage-kin-left03,
.mariage-rich-left03,
.mariage-blue-left03 {
  width: 436rem;
}

.recomend{
  top: 0;
  left: -60rem;
}

.recomend img{
  width: 110rem;
}

.mariage-btn {
  width: 47%;
  margin-top: 50rem;
  padding: 5rem 0;
}
.mariage-gin-right,
.mariage-ruby-right,
.mariage-kin-right,
.mariage-rich-right,
.mariage-blue-right {
  margin-top: 45rem;
}
.mariage-gin-right01 img {
  width: 356rem;
}
.mariage-ruby-right01 img {
  width: 355rem;
}
.mariage-kin-right01 img {
  width: 292rem;
}
.mariage-rich-right01 img {
  width: 383rem;
}
.mariage-blue-right01 img {
  width: 295rem;
}
.mariage-graph {
  margin-top: -20rem;
  padding-bottom: 80rem;
}
.mariage-graph h3 {
  padding-top: 30rem;
}
.mariage-graph h3 img {
  width: 609rem;
  margin-bottom: 30rem;
}
.mariage-graph-dtl01 {
  padding-bottom: 15rem;
  width: 868rem;
}
.mariage-graph-dtl01 img {
  width: 868rem;
}
.mariage-graph-dtl01-02,
.mariage-graph-dtl01-03 {
  display: none;
  position: absolute;
  top:0
}


/* ===================================
    graphbox
=================================== */

.graphbox .graphbox-headertxt{
  width: 500rem;
  height: 100rem;
}

.graphbox .graphbox-maingraph .topgraph{
  gap: 50rem;
}

.graphbox .graphbox-maingraph .topgraph .asset1{
  width: 115rem;
  height: 670rem;
}

.graphbox .graphbox-maingraph .topgraph .asset2{
  width: 770rem;
  height: 690rem;
}

.graphbox .graphbox-maingraph .bottomgraph .asset3{
  width: 185rem;
  height: 145rem;
}

.graphbox .graphbox-maingraph .bottomgraph .asset4{
  width: 740rem;
  height: 120rem;
}


/* ===================================
    Lineup
=================================== */
#lineup {
  margin: 0 auto;
}
#lineup h2 {
  margin: 0 0 -26rem 0;
}
#lineup h2 img {
  width: 100rem;
  margin: 00 22rem 0;
}
.lineup-btn-area {
  margin: 120rem auto 0;
  width: 930rem;
  height: 478rem;
}
.lineup-btn-gin,
.lineup-btn-kin,
.lineup-btn-rich,
.lineup-btn-blue,
.lineup-btn-ruby {
  width: 113rem;
}
.lineup-btn-gin {
  left: 30rem;
}
.lineup-btn-kin {
  left: 220rem;
}
.lineup-btn-blue {
  right: 220rem;
}
.lineup-btn-ruby {
  right: 30rem;
}
.lineup-btn-ginLogo {
  width: 168rem;
}
.lineup-btn-kinLogo {
  width: 168rem;
  left: 30rem;
}
.lineup-btn-kinLogo {
  width: 168rem;
  left: 191rem;
}
.lineup-btn-richLogo {
  width: 168rem;
}
.lineup-btn-blueLogo {
  width: 168rem;
  right: 191rem;
}
.lineup-btn-rubyLogo {
  width: 168rem;
}
.modal__inner {
  max-width: 1200rem;
  max-height: 1200rem;
}
.m-close__btn{
  width: 95rem;
}

.lineup-inner-dtl01 {
  padding: 0 0 30rem 0; 
  background-size: 101rem;
  background-position: top 100rem right 30rem;
}
.lineup-inner-dtl02 {
  padding: 0 0 30rem 0;
  background-size: 101rem;
  background-position: top 50rem right 30rem;
}
.lineup-inner-dtl03 {
  padding: 0 0 30rem 0;
  background-size: 101rem;
  background-position: top 50rem right 30rem;
}
.lineup-inner-dtl04 {
  padding: 0 0 30rem 0;
  background-size: 131rem;
  background-position: top 50rem right;
}
.lineup-inner-dtl05 {
  padding: 0 0 30rem 0;
  background-size: 113rem;
  background-position: top 50rem right 15rem;
}
.lineup-inner-dtl01-wipper,
.lineup-inner-dtl02-wipper,
.lineup-inner-dtl03-wipper,
.lineup-inner-dtl04-wipper,
.lineup-inner-dtl05-wipper {
  width: 900rem;
}
.lineup-inner-dtl01-wipper h3 img,
.lineup-inner-dtl02-wipper h3 img,
.lineup-inner-dtl03-wipper h3 img,
.lineup-inner-dtl04-wipper h3 img,
.lineup-inner-dtl05-wipper h3 img {
  margin: 80rem 0 80rem 0;
}
.lineup-inner-dtl01-wipper h3 img {
  width: 553rem;
}
.lineup-inner-dtl02-wipper h3 img {
  width: 632rem;
}
.lineup-inner-dtl03-wipper h3 img {
  width: 526rem;
}
.lineup-inner-dtl04-wipper h3 img {
  width: 529rem;
}
.lineup-inner-dtl05-wipper h3 img {
  width: 508rem;
}
.lineup-gin-product {
  margin-top: -40rem;
}
.lineup-gin-product img {
  width: 469rem;
}
.lineup-kin-product img {
  margin-right: 45rem;
  width: 350rem;
}
.lineup-rich-product img {
  margin-right: 110rem;
  width: 229rem;
}
.lineup-blue-product img {
  margin-right: 110rem;
  width: 229rem;
}
.lineup-ruby-product img {
  margin-right: 110rem;
  width: 229rem;
}
.lineup-inner-dtl01-dl,
.lineup-inner-dtl02-dl,
.lineup-inner-dtl03-dl,
.lineup-inner-dtl04-dl,
.lineup-inner-dtl05-dl {
  width: 350rem;
  margin: 0 60rem 0 0;
}
.lineup-inner-dtl01-dl01,
.lineup-inner-dtl02-dl01,
.lineup-inner-dtl03-dl01,
.lineup-inner-dtl04-dl01,
.lineup-inner-dtl05-dl01 {
  font-size: 24rem;
}
.lineup-inner-dtl01-dl01 li,
.lineup-inner-dtl02-dl01 li,
.lineup-inner-dtl03-dl01 li,
.lineup-inner-dtl04-dl01 li,
.lineup-inner-dtl05-dl01 li {
  padding: 4rem 0;
}
dl.lineup-inner-dtl01-dl01 dt,
dl.lineup-inner-dtl02-dl01 dt,
dl.lineup-inner-dtl03-dl01 dt,
dl.lineup-inner-dtl04-dl01 dt,
dl.lineup-inner-dtl05-dl01 dt {
  width: 10em;
  padding: 4rem 0;
}
dl.lineup-inner-dtl01-dl01 dd,
dl.lineup-inner-dtl02-dl01 dd,
dl.lineup-inner-dtl03-dl01 dd,
dl.lineup-inner-dtl04-dl01 dd,
dl.lineup-inner-dtl05-dl01 dd {
  padding: 4rem 0 4rem 10em;
}
.lineupkome {
  font-size: 14rem;
  margin-top: 20rem;
}
dl.lineup-inner-dtl01-dl02,
dl.lineup-inner-dtl02-dl02,
dl.lineup-inner-dtl03-dl02,
dl.lineup-inner-dtl04-dl02,
dl.lineup-inner-dtl05-dl02 {
  font-size: 14rem;
  margin: 40rem 0 0 0;
  line-height: 4ex;
}
dl.lineup-inner-dtl01-dl02 dt,
dl.lineup-inner-dtl02-dl02 dt,
dl.lineup-inner-dtl03-dl02 dt,
dl.lineup-inner-dtl04-dl02 dt,
dl.lineup-inner-dtl05-dl02 dt {
  width: 8.5em;
  padding: 5rem 0;
}
dl.lineup-inner-dtl01-dl02 dd,
dl.lineup-inner-dtl02-dl02 dd,
dl.lineup-inner-dtl03-dl02 dd,
dl.lineup-inner-dtl04-dl02 dd,
dl.lineup-inner-dtl05-dl02 dd {
  padding: 5rem 0 5rem 8.5em;
}
.sakeajiimg {
  width: 900rem;
  margin: 30rem 0 40rem 0;
  padding: 30rem 0;
}
.sakeajiimg img {
  width: 590rem;
}
.shoplink {
  text-align: center;
  margin-bottom: 40rem;
}
.shoplink img {
  width: 460rem;
  border: #86807E 1px solid;
  border-radius: 6rem;

}




/* ===================================
    footer
=================================== */

.footer {
  margin:  0 auto 50rem auto;
}
.footer-cpywriter {
  font-size: 10rem;
  margin: 10rem;
  line-height: 1.6em;

}
.footer-annotation {
  font-size: 12rem;
  line-height: 1.6em;
}
.rside_shoplink {
  width: 180rem;
  height: 80rem;
}
.rside_shoplink img  {
  width: 180rem;
  height: 80rem;
}


}



@media screen and (min-width: 641px) {

  .sp_only {
    display: none;
  }

  /* PC時はMENUボタンを非表示 */
  .openbtn {
    display: none !important;
  }
  #navi {
    display: block !important;
  }
}

@media screen and (max-width: 640px) {

  body {
    font-size: 16rem;
    overflow: hidden;
  }
  .pc_only {
    display: none;
  }

  nav ul {
    flex-direction: column;
  }
  nav a {
    padding: 0;
  }
  .header li {
    padding-top: 0;
  }
  .header {
    width: 100%;
  }
  header .header-container {
    height: 50rem;
  }
  .header-logo {
    width: 63rem;
    margin: 15rem auto 0 auto;
  }
  .menu-nav-sp-shop {
    top:0;
    left: 40rem;

  }
  .menu-nav-sp-shop img {
    width: 24rem;
    
  }
  .menu-nav {
    clear: both;
    width: 100%;
    margin-top: 0;
  }
  nav ul {
    list-style: none;
  }
  nav li {
    clear: both;
    line-height: 0;
  }
  .g-nav-list01 {
    margin: 0 0 0 0;
  }
  .g-nav-list02 {
    margin: 0;
  }
  .g-nav-list01 li {
    margin: 0;
  }
  .g-nav-list02 li {
    margin: 0 8rem;
  }
  .g-nav-list01 li:nth-child(1) a {padding: 0 0 80rem 0;}
  .g-nav-list01 li:nth-child(4) a {padding: 0 0 85rem 0;}
  .g-nav-list01 li:nth-child(2) a {padding: 0 0 85rem 0;}
  .g-nav-list01 li:nth-child(5) a {padding: 0 0 85rem 0;}
  .g-nav-list01 li:nth-child(3) a {padding: 0 0 85rem 0;}
  
  .g-nav-list01 li:nth-child(1) img {width: 30rem;}
  .g-nav-list01 li:nth-child(4) img {width: 48rem;}
  .g-nav-list01 li:nth-child(2) img {width: 71rem;}
  .g-nav-list01 li:nth-child(5) img {width: 75rem;}
  .g-nav-list01 li:nth-child(3) img {width: 58rem;}
  
  .g-nav-list02 li:nth-child(1) img {width: 24rem;}
  .g-nav-list02 li:nth-child(2) img {width: 22rem;}
  .g-nav-list02 li:nth-child(3) img {width: 24rem;}
  .g-nav-list02 li:nth-child(4) img {width: 27rem; margin-top: 2rem;}
  .g-nav-list-logo a {
    padding: 0.5rem;
  }
  
  #g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: 100;
    /*ナビのスタート位置と形状*/
    top: 0;
    right: -120%;
    width: 100%;
    height: 100vh;
    /*ナビの高さ*/
    background-color: #fff;
    opacity: 1;
    /*動き*/
    transition: all 0.6s;
    font-size: 20rem;
    font-weight: 600;
  }
  /*アクティブクラスがついたら位置を0に*/
  #g-nav.panelactive {
    right: 0;
  }
  /*ナビゲーションの縦スクロール*/
  #g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100vh;
    /*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  /*ナビゲーション*/
  #g-nav .g-nav-list-logo {
    position: absolute;
    z-index: 101;
    top: 15rem;
    left: 50%;
    transform: translateX(-51.2%);
    width: 63rem;
    margin-right: -30rem;
  }
  #g-nav ul.g-nav-list01 {
    position: absolute;
    margin: 0 5%;
    z-index: 100;
    width: 90%;
    height: 100vh;
  }
  /*リストのレイアウト設定*/
  #g-nav ul.g-nav-list01 li:nth-child(1) {
    position: absolute;
    top: 0;
    list-style: none;
    border-top: 60rem #fff solid;
    width: 100%;
  }
  #g-nav ul.g-nav-list01 li:nth-child(1) img {
    position: absolute;
    top: 8rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    padding: 25rem 0;
  }
  #g-nav ul.g-nav-list01 li:nth-child(2) {
    position: absolute;
    top: 140rem;
    list-style: none;
    border-top: 1px #A3A6AB solid;
    width: 100%;
  }
  #g-nav ul.g-nav-list01 li:nth-child(2) img {
    position: absolute;
    top: 8rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    padding: 25rem 0;
  }
  #g-nav ul.g-nav-list01 li:nth-child(3) {
    position: absolute;
    top: 225rem;
    list-style: none;
    border-top: 1px #A3A6AB solid;
    width: 100%;
  }
  #g-nav ul.g-nav-list01 li:nth-child(3) img {
    position: absolute;
    top: 8rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    padding: 25rem 0;
  }
  #g-nav ul.g-nav-list01 li:nth-child(4) {
    position: absolute;
    top: 310rem;
    list-style: none;
    border-top: 1px #A3A6AB solid;
    width: 100%;
  }
  #g-nav ul.g-nav-list01 li:nth-child(4) img {
    position: absolute;
    top: 8rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    padding: 25rem 0;
  }
  #g-nav ul.g-nav-list01 li:nth-child(5) {
    position: absolute;
    top: 395rem;
    list-style: none;
    border-top: 1px #A3A6AB solid;
    border-bottom: 1px #A3A6AB solid;
    width: 100%;
  }
  #g-nav ul.g-nav-list01 li:nth-child(5) img {
    position: absolute;
    top: 8rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    padding: 25rem 0;
  }
  #g-nav ul.g-nav-list02 {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 500rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    padding: 25rem 0;
    z-index: 100;
  }
  #g-nav ul.g-nav-list02 a {
    padding: 10rem;
  }
  #g-nav .g-nav-shlink {
    position: absolute;
    width: 100%;
    top: 620rem;
    z-index: 100;
    padding-bottom: 190rem;
  }
  #g-nav .g-nav-shlink img {
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border: 1px #86807E solid;
    border-radius: 5rem;
  }  
  #g-nav li a {
    display: block;
  }
  
  .menu-nav-box {
    top: 0;
    right: 10rem;
    display: flex;
  }
  
  .openbtn {
    top: 2rem;
    right: 10rem;
  }
  
  .top {
    margin: 50rem auto 0 auto;
    width: 100%;
    height: 390rem;
  }
  .top-inner {
    width: 100%;
    height: 100%;
  }
  .top-inner-dtl {
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
  }
  .top-inner-dtlbox {
    width: 100%;
    height: 100%;
    top: 0;
  }
  .top-whtbg {
    width: 100%;
    height: 120rem;
    bottom: 45rem;
    left: 50%;
  }
  .top-whtbg img {
    min-height: 245rem;
  }
  .top-elmt00 {
    top: 29rem;
    left: 50%;
    width: 313rem;
  }
  .top-elmt01 {
    bottom: -10rem;
    left: 27rem;
    width: 51rem;
  }
  .top-elmt02 {
    bottom: -10rem;
    left: 93rem;
    width: 51rem;
  }
  .top-elmt03 {
    bottom: -10rem;
    width: 51rem;
  }
  .top-elmt035 {
    bottom: -10rem;
    right: 93rem;
    width: 51rem;
  }
  .top-elmt037 {
    bottom: -10rem;
    right: 27rem;
    width: 51rem;
  }
  .top-elmt04,.top-elmt05,.top-elmt06,.top-elmt07,.top-elmt08,.top-elmt09{
    display: none;
  }
  /* ===================================
      Top下
  =================================== */

  .sp-top-elmt{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 13rem;
    margin-top: -30rem;
    z-index: 10;
    position: relative;
  }

  .sp-top-elmt .elmt_txt{
    width: 308rem;
    margin-bottom: 17rem;
  }

  .sp-top-elmt .elmt_img{
    width: 208rem;
  }


  .topUnder-inner01 {
    width: 375rem;
    margin: 65rem auto;
  }
  .topUnder-inner01 h2 {
    width: 100%;
  }
  .topUnder-inner01 h2 img {
    width: 250rem;
  }
  .topUnder-inner01-01, .topUnder-inner01-02, .topUnder-inner01-03 {
    margin:auto;
    padding-top: 60rem;
    display: flex;
    flex-direction: column;
    gap: 35rem;
    width: 323rem;
  }
  .topUnder-inner01-01 div, .topUnder-inner01-02 div, .topUnder-inner01-03 div {
    width: 100%;
  }  
  .topUnder-inner01-01-dtl02 img,.topUnder-inner01-03-dtl02 img{
    width: 313rem;
    margin: auto;
    display: block;
  }

  .topUnder-inner01-02-dtl02 img {
    width: 225rem;
    height: 225rem;
    float: right;
  }
  .topUnder-inner01-04 {
    margin-top: 60rem;
  }
  .topUnder-inner01-04 h2 {
    font-size: 24rem;
    margin-top: 60rem;
  }
  .topUnder-inner01-04 p {
    margin-top: 40rem;
  }
  .topUnder-inner01dawn {
    margin-top: 60rem;
    width: 100%;
    height: 180rem;
    background-size:cover;
  }
  .topUnder-inner02 {
    margin: 0 auto 35rem auto;
    width: 100%;
    height: 358rem;
  }
  .topUnder-inner02-01 {
    width: 100%;
    height: 420rem;
  }
  .topUnder-inner02-01-dtl01 {
    width: 203rem;
    top: 60rem;
  }
  .topUnder-inner02-01-dtl01 img {
    width: 203rem;
  }
  .topUnder-inner02-01-dtl02 {
    width: 335rem;
    height: 197rem;
    top: 110rem;
  }
  .topUnder-whtbg {
    width: 100%;
    height: 245px;
  }
  .topUnder-whtbg img {
    width: 100%;
    height: 245px;
  }
  
  .topUnder-video{
    height: 0;
  }
  /* ===================================
      受賞歴 Awards
  =================================== */
  .awards-btn{
    margin: 90rem auto 200rem;
  }
  .awards-btn-area {
    height: 440rem;
  }
  .awards-modal-btn {
    width: 286rem;
  }
  .awards-modal-btn h2 {
    margin-top: 45rem;
    width: 286rem;
  }
  .awards-btn-icon {
    width: 155rem;
  }
  .awards-modal__inner{
    max-width: 95%;
    max-height: 90vh;
    height: 90vh;
  }

  .awards {
    width: 100%;
    padding:0;
  }
  .awards .h2-box {
    background-image: url(../img/awards_imgBg_up.jpg) ;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 110rem;
    width: 100%;
    height: 110rem;
  }
  
  .awards h2 {
    padding-top: 75rem;
  }
  .awards h2 img {
    width: 240rem;
  }
  .awards-inner {
    width: 100%;
    margin: 0 auto 0 auto;
  }
  .awards-inner-01 {
    width: 100%;
    height: 640rem;
    background-position: initial;
    background-size: 100%;
  }
  
  .awards-inner-01-dtl {
    width: 100%;
    height: 335rem;
  }
  .awards-elmt01 {
    width: 98%;
    top: 90rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .awards-elmt01 img {
    width: 98%;
  }
  .awards-elmt02 {
    width: 160rem;
    top: 194rem;
    right: 24rem;
  }
  .awards-elmt02 img {
    width: 160rem;
  }
  .awards-elmt03 {
    width: 174rem;
    top: 235rem;
    left: 8rem;
  }
  .awards-elmt03 img {
    width: 174rem;
  }
  .awards-inner-02-dtl {
    width: 90%;
    height: 280rem;
    position: relative;
    z-index: 9;
  }
  .awards-inner-02-dtl h3 {
    font-size: 20rem;
    margin-top: 13rem;
  }
  .awards-inner-02-gin {
    width: 308rem;
    margin: 15rem auto 20rem auto;
    padding: 15rem 0 5rem 0;
  }
  .awards-inner-02-gin h4, .awards-inner-02-kin h4, .awards-inner-02-rich h4, .awards-inner-02-ruby h4 {
    width: 168rem;
    margin: 0 auto;
  }
  .awards-inner-02-gin dl, .awards-inner-02-kin dl, .awards-inner-02-rich dl, .awards-inner-02-ruby dl {
    width: 270rem;
    margin: 20rem auto 10rem auto;
  }
  .awards-inner-02-gin dl dt, .awards-inner-02-kin dl dt, .awards-inner-02-rich dl dt, .awards-inner-02-ruby dl dt {
    width: 70rem;
    margin-top: 25rem;
  }
  .awards-inner-02-gin dl dt img, .awards-inner-02-kin dl dt img, .awards-inner-02-rich dl dt img, .awards-inner-02-ruby dl dt img {
    width: 60rem;
  }
  .awards-inner-02-gin dl dd, .awards-inner-02-kin dl dd, .awards-inner-02-rich dl dd, .awards-inner-02-ruby dl dd {
    width: 200rem;
    font-size: 14rem;
    line-height: 1.2em;
    margin-top: 25rem;
  }
  .awards-inner-02-gin dl dt:first-of-type, .awards-inner-02-kin dl dt:first-of-type, .awards-inner-02-rich dl dt:first-of-type, .awards-inner-02-ruby dl dt:first-of-type,
  .awards-inner-02-gin dl dd:first-of-type, .awards-inner-02-kin dl dd:first-of-type, .awards-inner-02-rich dl dd:first-of-type, .awards-inner-02-ruby dl dd:first-of-type {
    margin-top: 0 !important;
  }
  .awards-inner-02-kin {
    width: 305rem;
    margin: 15rem auto 20rem auto;
    padding: 15rem 0 5rem 0;
  }
  .awards-inner-02-rich {
    width: 305rem;
    margin: 15rem auto 20rem auto;
    padding: 15rem 0 5rem 0;
  }
  .awards-inner-02-ruby {
    width: 305rem;
    margin: 15rem auto 20rem auto;
    padding: 15rem 0 5rem 0;
  }
  
  
  /* ===================================
      FEATURE
  =================================== */
  .feature {
    width: 100%;
    margin: 0 auto 30rem;
    padding-bottom: 1rem;  }
  .feature h2 {
    width: 100%;
    margin-top: 15px;
    text-align: center;
    padding: 0;
  }
  .feature h2 img {
    width: 100px;
  }
  .feature-blkbg {
    height: auto;
    width: 100%;
  }
  .feature-blkbg img {
    width: 100%;
    min-height: auto;
    height: 50rem;
    margin: -8rem 0 0 0;
  }
  .feature-inner-01-dtl01 {
    background-color: #fff;
    width: 100%;
    margin: 15px auto 0 auto;
    padding: 55px 0 25px 0;
  }
  .feature-inner-01-dtl01-box01 {
    width: 100%;
    margin: 0 auto ;
  }
  .feature-inner-01-dtl01-box01 h3 {
    width: 277px;
  }
  .feature-inner-01-dtl01-box01 h3 img {
    width: 277px;
  }
  .feature-inner-01-dtl01-box01-mov {
    margin-top: 20px;
  }
  .feature-inner-01-dtl01-box01-mov img{
    height: 185px;
    width: 335px;
  }
  .feature-inner-01-dtl01-box01-txt ul {
    width: 100%;
    margin-top: 60px;
    flex-direction: column;
  }
  .feature-inner-01-dtl01-box01-txt ul li {
    width: 83%;
    margin: auto;
  }
  .feature-inner-01-dtl01-box01-txt ul li:nth-child(2)  {
    margin-top: 40rem;
  }
  
  .feature-inner-01-dtl01-box01-txt ul li p {
    display: block;
    font-size: 15px;
    line-height: 1.7em;
    margin: 20rem 0 25rem;
  }
  
  .feature-inner-01-dtl01-box01-txt li:nth-child(1) h4 img {
    width: 226px;
    margin-bottom: 10px;
  }
  .feature-inner-01-dtl01-box01-txt li:nth-child(2) h4 img {
    width: 226px;
    margin-bottom: 10px;
  }
  .feature-inner-01-dtl02 h3 img {
    width: 175px;
    margin: 90px auto 45px auto;
  }
  /* --------------------------
      FEATUREキクマサギン
  -------------------------- */
  .feature-gin {
    width: 90%;
    height: auto;
  }
  
  .feature-gin-inner{
    flex-direction: column;
  }

  .feature-gin .apple{
    top: -60rem;
    left: -20rem;
  }
  
  .feature-gin .apple img{
    width: 135rem;
  }
  
  .feature-gin .banana{
    top: 930px;
    right: -60rem;
  }
  
  .feature-gin .banana img{
    width: 190rem;
  }
  
  .feature-gin-product {
    width: 235px;
    margin: auto;
  }
  .feature-gin-product h4 img {
    width: 235px;
    margin: auto;
    padding-top: 40px;
  }
  .feature-gin-productP {
    width: 68px;
    margin: auto;
    display: block;
    padding-top: 30px;
  }
  .feature-gin-graph01 {
    width: 100%;
    margin: 30px 0 0 0;
    text-align:center;
  }
  .feature-gin-graph01 h5 img {
    width: 236px;
    margin: auto;
    display: block;
  }
  .feature-gin-graph01-text img {
    width: 285px;
  }
  .feature-gin-graph02 {
    width: 100%;
    margin: 70px auto 30px auto;
    display: block;
    text-align: center;
  }
  .feature-gin-graph02 h5 img {
    width: 243px;
  }
  .feature-gin-graph02-text img {
    width: 279px;
    margin: 20px auto 19px auto;
  }
  .feature-gin-graph01-dtl01 {
    margin: 0 auto 0 auto;
    width:242px;
    height: 270px;
  }
  .feature-gin-graph01-dtl01 .image-box.graph {
    width:242px;
    height: 270px;
  }
  .feature-gin-graph01-dtl01 .image-box.graph > span.info-graph2 {
    height: 2rem;
    width:242px;
    background-size: 242px 270px;
  }
  .image-box.graph > span.info-graph4 {
    width: 0;
  }
  .info-graph3 img {
    width:242px;
    height: 270px;
  }
  .feature-gin-graph02-dtl01 {
    margin: 3px auto 0 auto;
    width:242px;
    height: 270px;
  }
  .feature-gin-graph02-dtl01 .image-box.graph {
    width:242px;
    height: 270px;
  }
  .feature-gin-graph02-dtl01 .image-box.graph > span.info-graph2 {
    height: 2rem;
    width:242px;
    background-size: 242px 270px;
  }
  /* --------------------------
      FEATUREキクマサキン
  -------------------------- */
  .feature-kin {
    width: 90%;
    height: auto;
  }

  .feature-kin-inner{
    flex-direction: column;
  }

  .feature-kin-product {
    width: 235px;
    margin: auto;
  }
  .feature-kin-product h4 img {
    width: 235px;
    margin: auto;
    padding-top: 40px;
  }
  .feature-kin-productP {
    width: 68px;
    margin: auto;
    display: block;
    padding-top: 30px;
  }
  .feature-kin-graph01 {
    width: 100%;
    margin: 30px 0 0 0;
    text-align:center;
  }
  .feature-kin-graph01 h5 img {
    width: 243px;
    margin: auto;
    display: block;
  }
  .feature-kin-graph01-text img {
    width: 297px;
  }
  .feature-kin-graph02 {
    width: 100%;
    margin: 70px auto 30px auto;
    display: block;
    text-align: center;
  }
  .feature-kin-graph02 h5 img {
    width: 226px;
  }
  .feature-kin-graph02-text img {
    width: 263px;
    margin: 17px 0 8px 0;
  }
  .feature-kin-graph01-dtl01 {
    margin: 0 auto 0 auto;
    width:242px;
    height: 270px;
  }
  .feature-kin-graph01-dtl01 .image-box.graph {
    width:242px;
    height: 270px;
  }
  .feature-kin-graph01-dtl01 .image-box.graph > span.info-graph2 {
    height: 2rem;
    width:242px;
    background-size: 242px 270px;
  }
  .feature-kin-graph02-dtl01 {
    margin: 3px auto 0 auto;
    width:242px;
    height: 270px;
  }
  .feature-kin-graph02-dtl01 .image-box.graph {
    width:242px;
    height: 270px;
  }
  .feature-kin-graph02-dtl01 .image-box.graph > span.info-graph2 {
    height: 2rem;
    width:242px;
    background-size: 242px 270px;
  }
  
  /* --------------------------
      FEATUREキクマサリッチ
  -------------------------- */
  .feature-rich {
    width: 90%;
    height: auto;
  }
  
  .feature-rich .richapple{
    top: 200rem;
    left: -30rem;
  }
  
  .feature-rich .richapple img{
    width: 110rem;
  }
  .feature-rich-inner{
    flex-direction: column;
  }

  .feature-rich-product {
    width: 235px;
    margin: auto;
  }
  .feature-rich-product h4 img {
    width: 235px;
    margin: auto;
    padding-top: 40px;
  }
  .feature-rich-productP {
    width: 68px;
    margin: auto;
    display: block;
    padding-top: 30px;
  }
  .feature-rich-graph01 {
    width: 100%;
    margin: 30px 0 0 0;
    text-align:center;
  }
  .feature-rich-graph01 h5 img {
    width: 243px;
    margin: auto;
    display: block;
  }
  .feature-rich-graph01-text img {
    width: 297px;
  }
  .feature-rich-graph02 {
    width: 100%;
    margin: 70px auto 30px auto;
    display: block;
    text-align: center;
  }
  .feature-rich-graph02 h5 img {
    width: 261px;
  }
  .feature-rich-graph02-text img {
    width: 199px;
    margin: 17px 0 8px 0;
  }
  .feature-rich-graph01-dtl01 {
    margin: 0 auto 0 auto;
    width:242px;
    height: 270px;
  }
  .feature-rich-graph01-dtl01 .image-box.graph {
    width:242px;
    height: 270px;
  }
  .feature-rich-graph01-dtl01 .image-box.graph > span.info-graph2 {
    height: 2rem;
    width:242px;
    background-size: 242px 270px;
  }
  .feature-rich-graph02-dtl01 {
    margin: 3px auto 0 auto;
    width:303px;
    height: 223px;
  }
  .feature-rich-graph02-dtl01 .image-box.graph {
    width:303px;
    height: 223px;
  }
  .feature-rich-graph02-dtl01 .image-box.graph > span.info-graph2 {
    height: 2rem;
    width:303px;
    background-size: 303px 223px;
  }
  
  .feature-annotation {
    width: 90%;
  }
  .feature-annotation p {
    font-size: 13px;
  }

  /* --------------------------
    FEATUREキクマサブルー
  -------------------------- */
  h3.feature-blue-h3 img {
    width: 271px;
    margin: 90px auto 45px auto;
  }
  .feature-blue {
    width: 90%;
    height: auto;
  }
  .feature-blue .banana{
    top: 600px;
    right: -60rem;
  }
  .feature-blue .banana img{
    width: 190rem;
  }
  .feature-blue-inner {
    flex-direction: column;
  }
  .feature-blue-product {
    width: 235px;
    margin: auto;
  }
  .feature-blue-product h4 img {
    width: 235px;
    margin: auto;
    padding-top: 40px;
  }
  .feature-blue-productP {
    width: 68px;
    margin: auto;
    display: block;
    padding-top: 30px;
  }
  .feature-blue-graph01 {
    width: 95%;
    margin: 0 auto 50px auto;
    text-align:center;
  }
  .feature-blue-graph01 h5 {
    font-size: 17rem;
    line-height: 1.8;
  }
  .feature-blue-graph01 ul {
    width: 95%;
    margin: 0 auto;
    flex-direction: column;
  }
  .feature-blue-graph01 ul.feature-blue-list01 {
    margin-top: 30px;
  }
  .feature-blue-graph01 ul.feature-blue-list02,
  .feature-blue-graph01 ul.feature-blue-list04 {
    margin-top: 20px;
  }
  .feature-blue-graph01 ul.feature-blue-list03 {
   margin-top: 20px;
  }
  .feature-blue-graph01 ul li:nth-child(2) img {
    margin-top: 10px;
    width: 275px;
  }
  .feature-blue-graph01 ul li:nth-child(1) {
    text-align: left;
  }
  .feature-blue-graph01 ul li:nth-child(2) {
    text-align: right;
  }
  .feature-blue-graph01 ul.feature-blue-list01 li:nth-child(1) img {
    margin-left: 4px;
    width: 162px;
  }
  .feature-blue-graph01 ul.feature-blue-list02 li:nth-child(1) img {
    margin-left: 8px;
    width: 105px;
  }
  .feature-blue-graph01 ul.feature-blue-list03 li:nth-child(1) img {
    width: 117px;
  }
  .feature-blue-graph01 ul.feature-blue-list04 li:nth-child(1) img {
    margin-left: 5px;
    width: 116px;
  }

  
  /* ===================================
      MARIAGE
  =================================== */

  .mariage-whtbg {
    height: 180px;
    margin-top: -190px;
  }
  .mariage-whtbg img {
    width: 100%;
    min-height: 180px;
    height: auto;
  }
  .mariage {
    width: 100%;
    margin: -75rem auto 40rem;
  }
  .mariage-inner {
    margin: 0 auto;
    padding-top: 0;
    width: 100%;
    text-align: center;
    width: 100%;
    background: url(../img/mariage_top_bg_sp.jpg) ,#fff;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top 65rem;
  }
  .mariage-inner h2 {
    width: 100rem;
    margin: 20rem auto 0 auto;
  }
  .mariage-inner h2 img {
    width: 100rem;
  }
  .mariage-box01 {
    margin: 0 auto 60rem auto;
    width: 100%;
    height: auto;
  }
  .mariage-box01 h3 img {
    margin-top: 30rem;
    width: 236rem;
  }
  .mariage-box01-txt {
    width: 100%;
    margin: 20rem auto 0 auto;
    text-align: center;
  }
  .mariage-box01-txt p {
    width: 100%;
    padding: 0;
    text-align: center;
    background: none;
  }
  
  
  
  .mariage-gin {
    margin-top: 200rem;
    width: 90%;
    padding-bottom: 150rem;
    flex-direction: column;
    height: auto;
  }
  .mariage-ruby {
    width: 90%;
    margin: 120rem auto;
    padding-bottom: 150rem;
    flex-direction: column;
    height: auto;
  }

  .mariage-kin {
    width: 90%;
    padding-bottom: 150rem;
    margin: 120rem auto;
    flex-direction: column;
    height: auto;
  }
  .mariage-rich {
    width: 90%;
    padding-bottom: 150rem;
    margin: 120rem auto;
    flex-direction: column;
    height: auto;
  }
  .mariage-blue {
    width: 90%;
    padding-bottom: 150rem;
    margin: 120rem auto;
    flex-direction: column;
    height: auto;
  }
  .mariage-gin-left,
  .mariage-ruby-left,
  .mariage-kin-left,
  .mariage-rich-left,
  .mariage-blue-left {
    width: 295rem;
    margin: -15rem auto;
  }
  .mariage-left01-product img {
    width: 45rem;
  }
  .mariage-gin-left01,
  .mariage-ruby-left01,
  .mariage-kin-left01,
  .mariage-rich-left01,
  .mariage-blue-left01 {
    width: 295rem;
  }
  .mariage-gin-left01 h4 img,
  .mariage-ruby-left01 h4 img,
  .mariage-kin-left01 h4 img,
  .mariage-rich-left01 h4 img,
  .mariage-blue-left01 h4 img {
    margin-left: 10rem;
    width: 187rem;
  }
  .mariage-gin-left01 h5 {
    margin-top: 24rem;
  }
  .mariage-ruby-left01 h5 {
    margin-top: 53rem;
  }
  .mariage-kin-left01 h5 {
    margin-top: 17rem;
  }
  .mariage-rich-left01 h5 {
    margin-top: 17rem;
  }
  .mariage-blue-left01 h5 {
    margin-top: 53rem;
  }
  
  .mariage-gin-left01 h5 img {
    width: 180rem;
  }
  .mariage-ruby-left01 h5 img {
    width: 224rem;
  }
  .mariage-kin-left01 h5 img {
    width: 150rem;
  }
  .mariage-rich-left01 h5 img {
    width: 220rem;
  }
  .mariage-blue-left01 h5 img {
    width: 245rem;
  }
  .mariage-right-img img {
    margin-left: 17%;
    width: 300rem;
  }
  .mariage-gin-left02,
  .mariage-ruby-left02,
  .mariage-kin-left02,
  .mariage-rich-left02,
  .mariage-blue-left02 {
    font-size: 17rem;
    line-height: 1.8em;
    margin-top: 13rem;
    padding: 13rem 0;
  }
  .mariage-gin-left03,
  .mariage-ruby-left03,
  .mariage-kin-left03,
  .mariage-rich-left03,
  .mariage-blue-left03 {
    position: relative;
    margin-top: 35rem;
    width: 295rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .recomend{
    top: -50rem;
    left: 0;
  }

  .mariage-btn {
    width: 70%;
    margin-top: 15rem;
    padding: 5rem 0;
  }
  .mariage-gin-right,
  .mariage-ruby-right,
  .mariage-kin-right,
  .mariage-rich-right,
  .mariage-blue-right {
    text-align: center;
    margin-top: 45rem;
  }
  .mariage-gin-right01 img {
    width: 236rem;
  }
  .mariage-ruby-right01 img {
    width: 235rem;
  }
  .mariage-kin-right01 img {
    width: 190rem;
  }
  .mariage-rich-right01 img {
    width: 236rem;
  }
  .mariage-blue-right01 img {
    width: 190rem;
  }
  .mariage-graph {
    margin-top: -15rem;
    padding-top: 5rem;
    padding-bottom: 35rem;
  }
  .mariage-graph h3 img {
    width: 228rem;
    margin-bottom: 30rem;
  }
  .mariage-graph-dtl01 {
    margin: 0 auto;
    width: 100%;
    position: relative
  }
  .mariage-graph-dtl01 img {
    width: 90%;
  }
  .mariage-graph-dtl01-02,
  .mariage-graph-dtl01-03 {
    display: none;
    position: absolute;
    top:0
  }
  .mariage-graph-dtl01 {
      padding-bottom: 20rem;
  }

  
  /* ===================================
      graphbox
  =================================== */
  
  .graphbox .graphbox-headertxt{
    width: 250rem;
    height: 53rem;
  }
  
  .graphbox .graphbox-maingraph .topgraph{
    gap: 7rem;
  }
  
  .graphbox .graphbox-maingraph .topgraph .asset1{
    width: 45rem;
    height: 256rem;
  }
  
  .graphbox .graphbox-maingraph .topgraph .asset2{
    width: 216rem;
    height: 264rem;
  }
  
  .graphbox .graphbox-maingraph .bottomgraph .asset3{
    width: 65rem;
    height: 55rem;
  }
  
  .graphbox .graphbox-maingraph .bottomgraph .asset4{
    width: 200rem;
    height: 30rem;
  }
  
  
 /* ===================================
      Lineup
  =================================== */
  #lineup {
    margin: -30rem auto 0 auto;
  }
  #lineup h2 {
    text-align: center;
    margin: 30rem 0 22rem 0;
    line-height: 1.3em;
  }
  #lineup h2 img {
    text-align: center;
    margin: 30px 0 22px 0;
    line-height: 1.3em;
    width: 100rem;
  }
  .lineup-inner {
    width: 100%;
    top: 0;
    z-index: 10;
  }
  .lineup-btn-area {
    margin: 45rem auto 0;
    width: 95%;
    height: 434rem;
  }
  .lineup-btn-gin,
  .lineup-btn-kin,
  .lineup-btn-rich,
  .lineup-btn-blue,
  .lineup-btn-ruby {
    width: 3em;
  }
  .lineup-btn-gin {
    left: 30rem;
  }
  .lineup-btn-kin {
    left: 0;
    right: 0;
    margin: auto;
  }
  .lineup-btn-rich {
    left: auto;
    right: 30rem;
  }
  .lineup-btn-blue {
    top: auto;
    bottom: 0;
    left: 85rem;
    z-index: 2;
  }
  .lineup-btn-ruby {
    top: auto;
    bottom: 0;
    right: 85rem;
    z-index: 2;
  }
  .lineup-btn-ginLogo {
    width: 105rem;
    top: 179rem;
    bottom: auto;
    left: 1rem;
  }
  .lineup-btn-kinLogo {
    width: 105rem;
    top: 179rem;
    bottom: auto;
    left: 0;
    right: 0;
    margin: auto;
  }
  .lineup-btn-richLogo {
    width: 105rem;
    top: 179rem;
    bottom: auto;
    left: auto;
    right: 1rem;
  }
  .lineup-btn-blueLogo {
    width: 105rem;
    left: 53rem;
    bottom: 2rem;
    z-index: 3;
  }
  .lineup-btn-rubyLogo {
    width: 105rem;
    right: 53rem;
    bottom: 2rem;
    z-index: 3;
  }
  .modal__inner {
    max-width: 95%;
    max-height: 85vh;
    height: 85vh;
  }
  .m-close__btn{
    width: 40rem;
  }


  .lineup-inner-dtl01 .lineup_bg {
    margin-top: -30rem;
  }
  .lineup-inner-dtl01 {
    background-size: 60rem;
    background-position: top 50rem right 18rem;;
  }
  .lineup-inner-dtl02 {
    background-size: 60rem;
    background-position: top 50rem right 18rem;;
  }
  .lineup-inner-dtl03 {
    background-size: 60rem;
    background-position: top 50rem right 18rem;
  }
  .lineup-inner-dtl04 {
    background-size: 78rem;
    background-position: top 50rem right;
  }
  .lineup-inner-dtl05 {
    background-size: 67rem;
    background-position: top 50rem right 9rem;
  }
  
  .lineup-inner-dtl01 {
    padding: 0 0 30rem 0;
    width: 100%;
  }
  .lineup-inner-dtl02 {
    padding: 0 0 30rem 0;
  }
  .lineup-inner-dtl03 {
    padding: 0 0 30rem 0;
  }
  .lineup-inner-dtl04 {
    padding: 0 0 30rem 0;
  }
  .lineup-inner-dtl05 {
    padding: 0 0 30rem 0;
  }
  .lineup-inner-dtl01-wipper,
  .lineup-inner-dtl02-wipper,
  .lineup-inner-dtl03-wipper,
  .lineup-inner-dtl04-wipper,
  .lineup-inner-dtl05-wipper {
    width: 90%;
    margin: 0 auto 0 auto;
  }
  .lineup-inner-dtl01-wipper h3,
  .lineup-inner-dtl02-wipper h3,
  .lineup-inner-dtl03-wipper h3,
  .lineup-inner-dtl04-wipper h3,
  .lineup-inner-dtl05-wipper h3 {
    text-align: center;
  }
  .lineup-inner-dtl01-wipper h3 img,
  .lineup-inner-dtl02-wipper h3 img,
  .lineup-inner-dtl03-wipper h3 img,
  .lineup-inner-dtl04-wipper h3 img,
  .lineup-inner-dtl05-wipper h3 img {
    margin: 30rem auto 30rem auto;
  }
  .lineup-inner-dtl01-wipper h3 img {
    width: 80%;
  }
  .lineup-inner-dtl02-wipper h3 img {
    width: 100%;
  }
  .lineup-inner-dtl03-wipper h3 img {
    width: 78%;
  }
  .lineup-inner-dtl04-wipper h3 img {
    width: 78%;
  }
  .lineup-inner-dtl05-wipper h3 img {
    width: 78%;
  }
  .lineup-gin-product {
    width: 90%;
    margin: 0 auto;
  }
  .lineup-gin-product img {
    width: 100%;
  }
  .lineup-kin-product img {
    margin: 0 auto;
    width: 75%;
  }
  .lineup-rich-product img {
    width: 50%;
    margin: 0 auto;
  }
  .lineup-blue-product img {
    width: 50%;
    margin: 0 auto;
  }
  .lineup-ruby-product img {
    width: 50%;
    margin: 0 auto;
  }
  .lineup-inner-dtl01-box,
  .lineup-inner-dtl02-box,
  .lineup-inner-dtl03-box,
  .lineup-inner-dtl04-box,
  .lineup-inner-dtl05-box {
    display: block;
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .lineup-inner-dtl01-dl,
  .lineup-inner-dtl02-dl,
  .lineup-inner-dtl03-dl,
  .lineup-inner-dtl04-dl,
  .lineup-inner-dtl05-dl {
    width: 95%;
    margin: 20rem auto 0 auto;
  }
  .lineup-inner-dtl01-dl01,
  .lineup-inner-dtl02-dl01,
  .lineup-inner-dtl03-dl01,
  .lineup-inner-dtl04-dl01,
  .lineup-inner-dtl05-dl01 {
    font-size: 20rem;
    letter-spacing: 0;
    margin: 0;
    padding: 0;
  }
  .lineup-inner-dtl01-dl01 li,
  .lineup-inner-dtl02-dl01 li,
  .lineup-inner-dtl03-dl01 li,
  .lineup-inner-dtl04-dl01 li,
  .lineup-inner-dtl05-dl01 li {
    padding: 4rem 0;
  }
  dl.lineup-inner-dtl01-dl01 dt,
  dl.lineup-inner-dtl02-dl01 dt,
  dl.lineup-inner-dtl03-dl01 dt,
  dl.lineup-inner-dtl04-dl01 dt,
  dl.lineup-inner-dtl05-dl01 dt {
    width: 190rem;
    padding: 4rem 0;
  }
  dl.lineup-inner-dtl01-dl01 dd,
  dl.lineup-inner-dtl02-dl01 dd,
  dl.lineup-inner-dtl03-dl01 dd,
  dl.lineup-inner-dtl04-dl01 dd,
  dl.lineup-inner-dtl05-dl01 dd {
    padding: 4rem 0 4rem 185rem;
  }
  .lineupkome {
    font-size: 14rem;
    margin-top: 20rem;
    line-height: 1.6em;
  }
  dl.lineup-inner-dtl01-dl02,
  dl.lineup-inner-dtl02-dl02,
  dl.lineup-inner-dtl03-dl02,
  dl.lineup-inner-dtl04-dl02,
  dl.lineup-inner-dtl05-dl02 {
    font-size: 14rem;
    margin: 30rem 0 0 0;
    padding: 0;
    line-height: 4ex;
  }
  dl.lineup-inner-dtl01-dl02 dt,
  dl.lineup-inner-dtl02-dl02 dt,
  dl.lineup-inner-dtl03-dl02 dt,
  dl.lineup-inner-dtl04-dl02 dt,
  dl.lineup-inner-dtl05-dl02 dt {
    width: 100%;
    padding: 5rem 0 0 0;
    clear: both;
  }
  dl.lineup-inner-dtl01-dl02 dd,
  dl.lineup-inner-dtl02-dl02 dd,
  dl.lineup-inner-dtl03-dl02 dd,
  dl.lineup-inner-dtl04-dl02 dd,
  dl.lineup-inner-dtl05-dl02 dd {
    padding: 0 0 5rem 0;
    clear: both;
  }
  dl.lineup-inner-dtl01-dl02 dt:nth-of-type(1),
  dl.lineup-inner-dtl02-dl02 dt:nth-of-type(1),
  dl.lineup-inner-dtl03-dl02 dt:nth-of-type(1),
  dl.lineup-inner-dtl04-dl02 dt:nth-of-type(1),
  dl.lineup-inner-dtl05-dl02 dt:nth-of-type(1) {
    border-top: 1px #000 solid;
  }
    
  dl.lineup-inner-dtl01-dl02 dd:nth-of-type(1),
  dl.lineup-inner-dtl02-dl02 dd:nth-of-type(1),
  dl.lineup-inner-dtl03-dl02 dd:nth-of-type(1),
  dl.lineup-inner-dtl04-dl02 dd:nth-of-type(1),
  dl.lineup-inner-dtl05-dl02 dd:nth-of-type(1) {
    border-top: none;
  }
   
  .sakeajiimg {
    width: 100%;
    margin: 30rem auto 0 auto;
    background: #fff;
    padding: 30rem 0;
  }
  .sakeajiimg img {
    width: 90%;
  }
  .shoplink {
    text-align: center;
    margin-bottom: 40rem;
    margin-top: 20rem;
  }
  .shoplink img {
    width: 90%;
    border: #86807E 1px solid;
    border-radius: 5rem;
  
  }
  
  
  
  
  /* ===================================
      footer
  =================================== */
  
  .footer {
    width: 100%;
    margin:  0 auto 50rem auto;
  }
  .footer-cpywriter {
    font-size: 6.5rem;
    margin: 20rem auto 10rem auto;
    line-height: 1.6em;
  
  }
  .footer-annotation {
    font-size: 11rem;
    line-height: 1.6em;
  }
  
}






/* 20230831追記 */
.delayScroll img{
  opacity:0;
}
.delayScroll p{
  opacity:0;
}
.delayScroll h2{
  opacity:0;
}
/*
.delayScroll dl{
  opacity:0;
}
*/
.delayScroll picture{
  opacity:0;
}
.delayScroll .swiper-wrapper{
  opacity:0;
}
.delayScroll iframe{
  opacity:0;
}
.delayScrollRgt img{
  opacity:0;
}
.delayScrollLft img{
  opacity:0;
}
.delayScrollLft h3{
  opacity:0;
}
.delayScrollLft section{
  opacity:0;
}
.delayScroll .sakeajiimg{
  opacity:0;
}
.delayScroll .lineup-gin-product,
.delayScroll .lineup-inner-dtl01-dl, 
.delayScroll .lineup-kin-product,
.delayScroll .lineup-inner-dtl02-dl,
.delayScroll .lineup-rich-product,
.delayScroll .lineup-inner-dtl03-dl,
.delayScroll .lineup-blue-product,
.delayScroll .lineup-inner-dtl04-dl,
.delayScroll .lineup-ruby-product,
.delayScroll .lineup-inner-dtl05-dl,
.delayScroll source {
  opacity:0;
}
.fadeUp{
  opacity:0;
}

.fadeUp img{
  opacity:1;
}
.fadeUp picture{
  opacity:1;
}
.fadeUp p{
  opacity:1;
} 
.mariage-gin_wrap{
  position:relative;
}
.mariage-ruby_wrap{
  position:relative;
}
.mariage-kin_wrap{
  position:relative;
}
.mariage-rich_wrap{
  position:relative;
}
.mariage-blue_wrap{
  position:relative;
}
.swiper {
  margin:0;
  width:50%;
  position:absolute!important;
  right:0;
  bottom:5%;
}
.swiper-slide img{
  width: 100%;
  height: auto;
}
.swiper {
  margin:0;
  max-width:600px;
  width:45%;
  position:absolute!important;
  left:50%;
  bottom:5%;
}

@media screen and (min-width: 1200px) {
  .swiper {
    margin-left:50px!important;
    top: 150px;
    border: 0;
  }
}
@media screen and (min-width: 641px) and (max-width: 1200px) {
  .swiper {
    top: 160rem;
  }
}
@media screen and (max-width: 640px) {
  .swiper {
    margin:0;
    width:80%;
    left:20%;
    bottom: -115rem;
  }
}
/* @media screen and (min-width: 541px) and (max-width: 590px) {
  .swiper {
    margin:0;
    width:80%;
    left:20%;
    bottom:-8%;
  }
}
@media screen and (min-width: 481px) and (max-width: 540px) {
  .swiper {
    margin:0;
    width:80%;
    left:20%;
    bottom:-10%;
  }
}
@media screen and (min-width: 401px) and (max-width: 480px) {
  .swiper {
    margin:0;
    width:80%;
    left:20%;
    bottom:-130rem;
  }
} */

/* @media screen and (min-width: 371px) and (max-width: 400px) {
  .swiper {
    margin:0;
    width:80%;
    left:20%;
    bottom:-150rem;
  }
}
@media screen and (max-width: 370px) {
  .swiper {
    margin:0;
    width:80%;
    left:20%;
    bottom:-180rem;
  }
} */
@media screen and (max-width: 640px) {
  .cart_btn {
    position: fixed;
    z-index: 999;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    top: 11rem;
    right: 65rem;
  }
}



.swiper-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 350px;
}

.image {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: change-img-anim 12s infinite;
}

.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 6s;
}

@keyframes change-img-anim {
  0% {opacity: 1;}
  50% {opacity: 1;}
  60% {opacity: 0; z-index: 5;}
  100% {opacity: 0;}
}

@media screen and (max-width: 640px) {
.swiper-wrapper {
  height: 250rem;
}
}

@media screen and (min-width: 1200px) {
.swiper-wrapper {
  height: 350px;
}
}


/* ===================================
    モダール
=================================== */

#newProductBtn{
	display: none;
}
#newProduct{
	display: none;
}


/*モーダルの横幅を変更したい場合*/
.modaal-container{
  max-width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  line-height: 0;
  background-image: url(../img/topNew_ruby_bg_pc.jpg);
  background-size: cover;
  background-position: center;
  display: block;
}
.modaal-close{
  display: none;
}


/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#fff;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

.modaal-content-container {
  padding: 0;
  display: flex;
  justify-content: end;
  align-items: center;
  height: 100vh;
  margin: 0 auto;
}
.modaal-content-container picture{
  width: 95%;
  display: block;
}
.modaal-content-container img{
  display: block;
  max-width: 100%;
  max-height: 90vh;
  margin: 0 auto;
}
.modaal-overlay {
  background-color: #ec87ba;
  background-image: url(../img/topNew_ruby_bg_pc.jpg) !important;
  background-size: cover;
  background-position: center;
}
.modaal-inner-wrapper {
  padding: 0;
}

@media screen and (max-width: 640px) {
  .modaal-container{
    height: 100vh;
    background-image: url(../img/topNew_ruby_bg_sp.jpg);
  }
  .modaal-content-container picture{
    width: 100%;
    display: block;
  }
  .modaal-content-container img{
    max-width: 100% !important;
    max-height: 90vh;
    top: 50%;
    margin: 0 auto;
    padding: 0;
  }  
  .modaal-close{
    display: none;
  }
}