@charset "UTF-8";

/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

#contents { text-align: center; color: #211815; }

#lower-contents { padding-bottom: 0; font-family: "Zen Kaku Gothic New", Helvetica, Arial, Sans-Serif; color: #0e0b0d; font-feature-settings: "palt" }

.btn-back-to-idx { margin: 0; padding: 60px 0 150px; background: url( "/assets/img/products/u-line.png") repeat-x; }
.btn-back-to-idx span { background: #f4e5e6; box-shadow: 0.3px 0.3px 0px 0.3px #c38288; }

/* effects */
.fd { position: relative; opacity: 0; transform: translateY(4.4vw); transition: opacity 1.2s linear, transform 1s cubic-bezier(0.19, 1, 0.22, 1) }
.fd .contrast { filter: contrast(300%); transition: 1.2s linear }
.fd .contrast_ { filter: contrast(200%); transition: 1.2s linear }
.fd.active { opacity: 1; transform: translateY(0); }
.fd.active .contrast, .fd.active .contrast_ { filter: contrast(100%); }
.zm { opacity: 0; transform: scale(1.33); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); }
.zm.active { opacity: 1; transform: scale(1) }
.zm_ { opacity: 0; transform: scale(1.33); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.15); }
.zm_.active { opacity: 1; transform: scale(1) }

.contents_inner { position: relative; }

.mincho {
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-style: normal; }
.en { font-family: "altivo", sans-serif;
font-weight: 500;
font-style: normal; }


#main { position: relative; }
#main h2 { position: absolute; left: 0; top: 16%; width:55%; text-align: center; font-size: 2.2vw; letter-spacing: 0.08em; font-weight: 500; color: #fff; z-index: 10 }
#main h2 span { display: block; font-size: 1.6vw; margin-top: 1em }
#main img { position: inherit; z-index: 0 }
#main p.cap { position: absolute; right: 20px; bottom: 20px; text-align: right }

.sec-intro { margin: 40px 0 0;}
.sec-intro p.lead { position: absolute; left: 13.2vw; bottom: 16%; font-size: 1.4vw; font-weight: 400; line-height: 1.5em; text-align: left }
.sec-intro img { position: inherit; z-index: 0 }
.sec-intro-2 { }
.sec-intro-2 p.lead { position: absolute; right: 8.8vw; top: 33.33%; font-size: 1.6vw; font-weight: 400; line-height: 1.5em; margin-top: -1.5em; text-align: left }
.sec-intro-2 img { position: inherit; z-index: 0 }

.sec-artist {}
.sec-artist h2 { font-size: 20px; font-weight: 500; text-align: center; margin: 60px 0 }
.sec-artist h2 img { vertical-align: baseline }
.sec-artist .inner-block { position: relative }
.sec-artist .inner-block h3 { position: absolute; left: 30px; top: 30px; width: 15.8%; z-index: 10; font-feature-settings: "palt" }
.sec-artist .inner-block h3 span { position: absolute; left: 0; top: 18.8%; width: 0; height: 3px; background: #211815; transition: all 0.8s }
.sec-artist.active .inner-block h3 span { width: 100%; }
.sec-artist .inner-block .txt { padding: 40px 8.8vw; text-align: left }
.sec-artist .inner-block .txt .txt-box { position: relative; width: 50% }
.sec-artist .inner-block .txt .txt-box h4 { font-size: 22px; font-weight: 500; margin-bottom: 16px }
.sec-artist .inner-block .txt .txt-box p { font-size: 15px; }
.sec-artist .inner-block .txt .txt-box p.profile { font-size: 14px; margin-top: 2em }
.sec-artist .inner-block .txt .txt-box p.profile strong { font-size: 16px }
.sec-artist .inner-block .txt .txt-box .sns-links { position: absolute; right: 0; bottom: 0 }
.sec-artist .inner-block .txt .txt-box .sns-links li { display: inline-block; margin-left: 8px }
.sec-artist .inner-block .txt .txt-box .sns-links li a { display: block; transition: all 0.2s }
.sec-artist .inner-block .txt .txt-box .sns-links li a:hover { transform: scale(1.2) }

.blue-back { background: #d8e8f2; margin-top: 40px }

.sec-features {  }
.sec-features h2 { position: relative; width: 31.6%; margin-left: 68.4%; padding-bottom: 24px; text-align: left }
.sec-features h2 img { margin-top: -24px }
.sec-features h2 span { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; display: block; background: #2d74ac; transition: all 0.8s }
.sec-features.active h2 span { width: 100%; }
.sec-features .inner-block { position: relative; padding: 0 4.4vw; margin: 0 auto; max-width: 1360px }
.sec-features .inner-block .feature01 { position: relative; width: 50%; }
.sec-features .inner-block .feature01 h3 { position: absolute; left: 0; top: 0; width: 6.77% }
.sec-features .inner-block .feature01 .box-01 { position: relative; width: 63.8%; margin-left: 12.9%; z-index: 1 }
.sec-features .inner-block .feature01 .box-02 { position: relative; width: 83.2%; margin: -40px 0 0 16.8% }
.sec-features .inner-block .feature02 { position: absolute; left: 54.84%; top: 20%; width: 38.6%; }
.sec-features .inner-block .feature02 h3 { width: 63.68% }
.sec-features .inner-block .feature02 .box-01 { position: relative; width: 88.8%; margin: 30px 0 0 9.8% }
.sec-features .inner-block .feature03 { position: relative; width: 50%; margin-top: 40px }
.sec-features .inner-block .feature03 h3 { position: absolute; left: 8.8%; top: 30px; width: 77.74%; z-index: 1 }
.sec-features .inner-block .feature03 .box-01 { position: relative; width: 87.25%; margin: 0 0 0 4.8%; }
.sec-features .inner-block .feature04 { position: relative; width: 50%; margin-top: 40px; }
.sec-features .inner-block .feature04 h3 { position: absolute; left: 22.5%; top: 30px; width: 60%; z-index: 1 }
.sec-features .inner-block .feature04 .box-01 { position: relative; width: 87.25%; margin: 0 0 0 7.95%; }
.sec-features .inner-block .feature05 { position: relative; width: 50%; margin-top: 50px }
.sec-features .inner-block .feature05 h3 { position: absolute; left: 10%; top: 30px; width: 52%; z-index: 1 }
.sec-features .inner-block .feature05 .box-01 { position: relative; width: 62.5%; margin: 0 0 0 4.8%; }
.sec-features .inner-block .feature05 .box-02 { position: relative; width: 82.25%; margin: -16% 0 0 17.75%; }
.sec-features .inner-block .feature06 { position: absolute; left: 50%; top: 50px; width: 41.18%; }
.sec-features .inner-block .feature06 h3 { position: relative; width: 75%; margin: 30px 0 0 25% }
.sec-features .inner-block .feature06 .box-01 { position: relative; width: 61.61%; margin: 0 0 0 9.68%; }
.sec-features .inner-block .feature06 .box-02 { position: relative; width: 34.84%; margin: -14% 0 0 65.16%; }
.sec-features .inner-block .feature06 .box-03 { position: relative; width: 34.84%; margin: -5% 0 0 45.8%; }
.sec-features .inner-block .feature07 { position: relative; width: 100%; margin: 0 4.8%; }
.sec-features .inner-block .feature07 h3 { position: absolute; left: 0; top: 16.5%; width: 3.4%}
.sec-features .inner-block .feature07 .box-01 { position: relative; width: 42.63%; margin: 0 0 0 51.78%; }
.sec-features .inner-block .feature07 .box-02 { position: absolute; top: 16.5%; left: 9.09%; width: 35%; }
.sec-features .inner-block .feature07 .box-03 { position: absolute; bottom: 6%; left: 20%; width: 36.7%; }
.sec-features .inner-block .feature07 .box-04 { position: relative; width: 31%; margin: 0 0 0 69%; }
.sec-features .inner-block .feature07 p { position: absolute; left: 0; top: 65.38%; text-align: left }

.sec-products { padding: 120px 4.4vw }
.sec-products h2 { position: relative; display: inline-block; padding: 0 1em 0.33em; font-size: 32px; font-weight: 500; }
.sec-products h2 span { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; display: block; background: #211815; transition: all 0.8s }
.sec-products.active h2 span { width: 100%; }
.sec-products p.lead { font-size: 18px; margin-top: 1em }
.sec-products ul {}
.sec-products ul li { width: 25% }
.sec-products ul li .item .weight { display: inline-block; font-size: 18px; margin-top: 12px }
.sec-products ul li .item .inner-block { padding: 0 20px; text-align: left }
.sec-products ul li .item .release-date { display: block; line-height: 1.5em; text-align: center; background: #fff; margin: 1.5em 0 1em }
.sec-products ul li .item .release-date.pk { background: #f0d7e2 }
.sec-products ul li .item h3 { font-size: 18px; }
.sec-products ul li .item .price { font-size: 18px; font-weight: 500 }
.sec-products ul li .item .price span { font-size: 15px; }
.sec-products ul li .item .spec { font-size: 14px; }
.sec-products ul li .item .spec span { font-size: 12px; }
.btn-more { margin: 20px 0 0; }
.btn-more a { width: 80%; background: #2d74ac; color: #fff; font-size: 16px; font-weight: 500; text-align: center; text-decoration: none; padding: 0.66em 1em; margin: 0 auto; border-radius: 60px; display: block; position: relative; box-shadow: 2px 2px 0px 0px rgba(209, 109, 152, 1); transition: all 0.2s }
.btn-more a:hover { transform: scale(1.08) }
.btn-more .arw { position: absolute; top: calc(50% - 6px); right: 20px; height: 12px; transition: all 0.2s }
.btn-more a:hover .arw { right: 16px; }

.sec-recipe { padding: 120px 8.8vw }
.sec-recipe .recomended-recipe { position: relative; border-radius: 20px; overflow: hidden }
.sec-recipe .recomended-recipe .inner-block { position: absolute; left: 4.4vw; bottom: 4.4vw; text-align: left }
.sec-recipe .recomended-recipe .inner-block .reco { position: relative; width: 120px; margin-left: -8px }
.sec-recipe .recomended-recipe .inner-block .reco span { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; display: block; background: #f0d7e2; transition: all 0.8s }
.sec-recipe.active .recomended-recipe .inner-block .reco span { width: 100%;  ¥}
.sec-recipe .recomended-recipe .inner-block h3 { font-size: 32px; font-weight: 500; margin: 0.66em 0 }
.sec-recipe .recomended-recipe .inner-block p { font-size: 16px }
.sec-recipe .recomended-recipe .inner-block .btn-more { margin: 20px 0 0; width: 290px }
.sec-recipe .recomended-recipe .inner-block .btn-more a { width: 100%; padding: 0; line-height: 60px  }

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

	.btn-back-to-idx { padding: 30px 0 90px; }
	.btn-back-to-idx a { margin: 0 12.4vw; }
	
	#lower-contents { padding-bottom: 0; }
	
    .sp-w { margin: 0 -4.4vw !important; width: calc(100% + 8.8vw) !important }
    
    #main { overflow: hidden }
    #main h2 { position: absolute; left: 4.4vw; top: 8.8vw; width:auto; text-align: center; font-size: 4vw; font-weight: 500; color: #fff; z-index: 10 }
    #main h2 span { display: block; font-size: 3.6vw; margin-top: 0.5em }
    #main p.cap { position: absolute; right: 10px; bottom: 10px; font-size: 8px }
	
	.sec-intro { margin: 20px 0 0; }
    .sec-intro p.lead { position: inherit; left: 8.8vw; bottom: inherit; font-size: 14px; margin-top: -4em }
    .sec-intro p.lead span { color: #fff; line-height: 1.5em }
    .sec-intro img { position: inherit; z-index: 0 }
    .sec-intro-2 { padding: 20px 0 40px }
    .sec-intro-2 p.lead { pposition: relative; right: inherit; top: inherit; font-size: 14px; margin: 1em 0 0 8.8vw; display: block }
    .sec-intro-2 img { position: inherit; z-index: 0 }
    
    .sec-artist { border-top: solid 1px #e7e7e7; }
    .sec-artist.mt { margin-top: 40px }
    .sec-artist h2 { font-size: 16px; font-weight: 500; text-align: center; margin: 20px 0 }
    .sec-artist .inner-block { position: relative }
    .sec-artist .inner-block h3 { position: absolute; left: 2.2vw; top: 4.4vw; width: 44.4%; z-index: 10 }
    .sec-artist .inner-block h3 span { position: absolute; left: 0; top: 18.8%; width: 0; height: 2px; background: #211815; transition: all 0.8s }
    .sec-artist.active .inner-block h3 span { width: 100%; }
    .sec-artist .inner-block .vis img { width: 100% }
    .sec-artist .inner-block .txt { padding: 0 8.8vw 20px; text-align: left }
    .sec-artist .inner-block .txt .txt-box { position: relative; width: 100%; padding: 20px 0 0 }
    .sec-artist .inner-block .txt .txt-box h4 { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
    .sec-artist .inner-block .txt .txt-box h4 br, .sec-artist .inner-block .txt .txt-box h4 .space { display: none }
    .sec-artist .inner-block .txt .txt-box p { font-size: 13px; margin-left: 0 }
    .sec-artist .inner-block .txt .txt-box p.profile { font-size: 12px; margin-top: 1.5em }
    .sec-artist .inner-block .txt .txt-box p.profile strong { font-size: 14px }
    .sec-artist .inner-block .txt .txt-box .sns-links { position: relative; right: inherit; bottom: inherit; text-align: right; margin-top: 8px }
    
    .sec-features h2 { position: relative; width: 66.66%; margin-left: 33.33%; padding-bottom: 12px; text-align: left }
    .sec-features h2 img { margin-top: -18px; width: 75% }
    .sec-features h2 span { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; display: block; background: #2d74ac; transition: all 0.8s }
    .sec-features.active h2 span { width: 100%; }
    .sec-features .inner-block { position: relative; padding: 0 4.4vw; margin: 0 auto; max-width: 1360px }
    .sec-features .inner-block .feature01 { position: relative; width: 100%; margin-top: 40px }
    .sec-features .inner-block .feature01 h3 { position: absolute; left: 0; top: 0; width: 7.2% }
    .sec-features .inner-block .feature01 .box-01 { position: relative; width: 63.8%; margin-left: 12.9%; z-index: 1 }
    .sec-features .inner-block .feature01 .box-02 { position: relative; width: 83.2%; margin: -20px 0 0 16.8% }
    .sec-features .inner-block .feature02 { position: relative; left: inherit; top: inherit; width: calc(100% - 4.4vw); margin-top: 40px }
    .sec-features .inner-block .feature02 h3 { width: 66% }
    .sec-features .inner-block .feature02 .box-01 { position: relative; width: 91.2%; margin: 15px 0 0 8.8% }
    .sec-features .inner-block .feature03 { position: relative; width: calc(100% - 8.8vw); margin: 40px 4.4vw 0 }
    .sec-features .inner-block .feature03 h3 { position: absolute; left: 4.4%; top: 15px; width: 91.2%; z-index: 1 }
    .sec-features .inner-block .feature03 .box-01 { position: relative; width: 102.2%; margin: 0 -2.2% 0 0; }
    .sec-features .inner-block .feature04 { position: relative; width: calc(100% - 8.8vw); margin: 40px 4.4vw 0; }
    .sec-features .inner-block .feature04 h3 { position: absolute; left: 15%; top: 15px; width: 72%; z-index: 1 }
    .sec-features .inner-block .feature04 .box-01 { position: relative; width: 100%; margin: 0; }
    .sec-features .inner-block .feature05 { position: relative; width: 100%; margin-top: 40px }
    .sec-features .inner-block .feature05 h3 { position: absolute; left: 4%; top: 30px; width: 60%; z-index: 1 }
    .sec-features .inner-block .feature05 .box-01 { position: relative; width: 67.4%; margin: 0; }
    .sec-features .inner-block .feature05 .box-02 { position: relative; width: 82.25%; margin: -16% 0 0 17.75%; }
    .sec-features .inner-block .feature06 { position: relative; left: inherit; top: inherit; width: 100%; margin-top: 40px }
    .sec-features .inner-block .feature06 h3 { position: relative; width: 80%; margin: 15px 0 0 20% }
    .sec-features .inner-block .feature06 .box-01 { position: relative; width: 72%; margin: 0; }
    .sec-features .inner-block .feature06 .box-02 { position: relative; width: 50%; margin: -14% 0 0 50%; }
    .sec-features .inner-block .feature06 .box-03 { position: relative; width: 50%; margin: -5% 0 0 30%; }
    .sec-features .inner-block .feature07 { position: relative; width: 100%; margin: 0; margin-top: 40px }
    .sec-features .inner-block .feature07 h3 { position: absolute; left: 0; top: 0; width: 7.2%}
    .sec-features .inner-block .feature07 .box-01 { position: relative; width: 92.8%; margin: 20px 0 0 7.2%; }
    .sec-features .inner-block .feature07 .box-02 { position: relative; top: inherit; left: inherit; width: 82.4%; z-index: 1 }
    .sec-features .inner-block .feature07 .box-03 { position: relative; bottom: inherit; left: inherit; width: 88.8%; margin: -20px 0 0 11.2% }
    .sec-features .inner-block .feature07 .box-04 { position: relative; width: 80%; margin: 12px 0 0 11.2%; }
    .sec-features .inner-block .feature07 p { position: relative; left: inherit; top: inherit; text-align: left; font-size: 12px; margin: 12px 0 0 11.2%; }
    
    .sec-products { padding: 60px 4.4vw }
    .sec-products h2 { position: relative; display: inline-block; padding: 0 1em 0.33em; font-size: 20px; letter-spacing: 0.04em }
    .sec-products p.lead { font-size: 14px; }
    .sec-products ul { margin: 0 -10px }
    .sec-products ul li { width: 50% }
    .sec-products ul li .item .weight { display: inline-block; font-size: 14px; margin-top: 12px }
    .sec-products ul li .item .inner-block { padding: 0 10px; }
    .sec-products ul li .item .release-date { display: block; line-height: 1.5em; text-align: center; background: #fff; margin: 1em 0; font-size: 10px }
    .sec-products ul li .item h3 { font-size: 15px; }
    .sec-products ul li .item .price { font-size: 14px; line-height: 1.5 }
    .sec-products ul li .item .price span { font-size: 12px; line-height: 1.5 }
    .sec-products ul li .item .spec { font-size: 12px; line-height: 1.5 }
    .sec-products ul li .item .spec span { font-size: 11px; line-height: 1.5 }
    .btn-more { margin: 10px 0 0; }
    .btn-more a { width: 100%; background: #2d74ac; color: #fff; font-size: 12px; font-weight: 500; text-align: center; text-decoration: none; padding: 0.66em 0; margin: 0 auto; border-radius: 60px; display: block; position: relative; box-shadow: 2px 2px 0px 0px rgba(209, 109, 152, 1); transition: all 0.2s }
    .btn-more a:hover { transform: scale(1.08) }
    .btn-more .arw { position: absolute; top: calc(50% - 4px); right: 12px; height: 8px; transition: all 0.2s }
    .btn-more a:hover .arw { right: 10px; }
    
    .sec-recipe { padding: 60px 4.4vw }
    .sec-recipe .recomended-recipe { position: relative; border-radius: 20px; overflow: hidden }
    .sec-recipe .recomended-recipe .inner-block { position: relative; left: inherit; bottom: inherit; padding: 4vw 4vw 0; margin-top: -60px }
    .sec-recipe .recomended-recipe .inner-block .reco { position: relative; width: 96px; margin-left: -8px }
    .sec-recipe .recomended-recipe .inner-block h3 { font-size: 20px;}
    .sec-recipe .recomended-recipe .inner-block p { font-size: 14px }
    .sec-recipe .recomended-recipe .inner-block .btn-more { margin: 20px 10% 2px; width: 80% }
    .sec-recipe .recomended-recipe .inner-block .btn-more a { width: 100%; padding: 0; line-height: 50px  }

	
}