/* Scss Document */ @media screen and (min-width: 781px) { /* PC STYLE *************************************************************/ /*kv*/ .bg { background: url("/images/products/kv.jpg") no-repeat center; background-size: cover; } #contents section.pagetitle .copy .line.out:before { border: 2px solid #fff; } #contents section.pagetitle .copy .line.out:after { border: 2px solid #fff; } #contents section.pagetitle .copy .line.in:before { border: 1px solid #fff; } #contents section.pagetitle .copy .line.in:after { border: 1px solid #fff; } #contents .wrap { width: 1400px; margin: 0 auto; padding: 0 100px; } #contents .list .wrap { padding-bottom: 80px; } #contents .list .wrap .attention { font-size: 24px; letter-spacing: 0.1em; font-weight: 600; padding-top: 25px; color:#c40000;} #contents .list .wrap h2 { font-size: 48px; letter-spacing: 0.12em; font-weight: 600; padding-top: 60px; } #contents .list .wrap .inner { display: flex; flex-wrap: wrap; justify-content: space-between; } #contents .list .wrap .inner h3.line { width: 100%; font-size: 30px; letter-spacing: 0.16em; } #contents .list .wrap .inner h3.line span { font-size: 24px; } #contents .list .wrap .inner .category { width: 560px; margin-top: 90px; } #contents .list .wrap .inner .category:nth-of-type(1) { order: 1; } #contents .list .wrap .inner .category:nth-of-type(2) { order: 3; } #contents .list .wrap .inner .category:nth-of-type(3) { order: 4; } #contents .list .wrap .inner .category:nth-of-type(4) { order: 5; } #contents .list .wrap .inner .category:nth-of-type(5) { order: 6; } #contents .list .wrap .inner .category:nth-of-type(6) { order: 2; } #contents .list .wrap .inner .category .item { margin-top: 20px; } #contents .list .wrap .inner .category .item + .item { margin-top: 70px; } #contents .list .wrap .inner .category .item a { width: 560px; height: 276px; position: relative; display: block; overflow: hidden; } #contents .list .wrap .inner .category .item a picture img { vertical-align: bottom; transition: 0.4s; } #contents .list .wrap .inner .category .item a i { height: 67px; position: absolute; top: 50%; right: -1px; transform: translateY(-50%); } #contents .list .wrap .inner .category .item a i img { height: 100%; width: auto; } #contents .list .wrap .inner .category .item a:hover picture img { transition: 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); transform: scale(1.07); } #contents .list .wrap .inner .category .item p { font-size: 18px; letter-spacing: 0.1em; line-height: 1.6; margin-top: 22px; } #contents .detail { padding-top: 30px; } #contents .detail .wrap .inner { display: flex; justify-content: space-between; flex-wrap: wrap; } #contents .detail .wrap .inner h2 { position: relative; font-size: 48px; font-weight: 600; width: 100%; height: auto; line-height: 1.4; padding: 16px 0 19px; letter-spacing: 0.12em; text-align: center; } #contents .detail .wrap .inner h2 span{display: block; font-size: 29px; margin-top: 10px;} #contents .detail .wrap .inner h2:before { content: ""; width: 100%; height: 5px; background: url("/images/h3-line-top.png") repeat-x left top; background-size: 1px 5px; position: absolute; left: 0; top: 0; } #contents .detail .wrap .inner h2:after { content: ""; width: 100%; height: 5px; background: url("/images/h3-line-bottom.png") repeat-x left top; background-size: 1px 5px; position: absolute; left: 0; bottom: 0; } #contents .detail .wrap .inner .text { width: 654px; text-align: left; } #contents .detail .wrap .inner .text p { font-size: 16px; line-height: 2.06; letter-spacing: 0.08em; margin-top: 32px; padding-bottom: 27px; } #contents .detail .wrap .inner .text .box { border: 1px solid #000; font-size: 15px; letter-spacing: 0.08em; line-height: 1.8; padding: 25px 25px 28px; } #contents .detail .wrap .inner .text .box p { margin: 0; padding-bottom: 0; } #contents .detail .wrap .inner .text .box p + p { margin-top: 4px; margin-bottom: 6px; } #contents .detail .wrap .inner .text .box a { color: #cf1030; text-decoration: underline; } #contents .detail .wrap .inner .text .box a:hover { text-decoration: none; } #contents .detail .wrap .inner .images { width: 500px; } #contents .detail .wrap .inner .images ul.main { position: relative; width: 494px; height: 494px; margin: 0 auto; } #contents .detail .wrap .inner .images ul.main li { position: absolute; left: 0; right: 0; opacity: 0; transition: opacity 0.5s,z-index 0s; z-index: 1; } #contents .detail .wrap .inner .images ul.main li.active { opacity: 1; transition: opacity 0.3s; z-index: 5; } #contents .detail .wrap .inner .images ul.thumb { overflow: hidden; margin: 20px auto 0; } #contents .detail .wrap .inner .images ul.thumb li { cursor: pointer; position: relative; transition: opacity 0.2s; float: left; margin: 0 3px; } #contents .detail .wrap .inner .images ul.thumb li img { width: 94px; height: 94px; user-select: none; } #contents .detail .wrap .inner .images ul.thumb li:after { content: ""; width: 94px; height: 94px; position: absolute; left: 0; top: 0; border: 1px solid #cf1030; opacity: 0; transition: opacity 0.3s; } #contents .detail .wrap .inner .images ul.thumb li:hover { opacity: 0.7; } #contents .detail .wrap .inner .images ul.thumb li.active:after { content: ""; width: 94px; height: 94px; position: absolute; left: 0; top: 0; border: 1px solid #cf1030; opacity: 1.0; transition: opacity 0.3s; z-index: 999; } #contents .detail .wrap .inner + .inner .item { width: 570px; margin-top: 70px; } #contents .detail .wrap .inner + .inner .item p { position: relative; } #contents .detail .wrap .inner + .inner .item p img { vertical-align: bottom; } #contents .detail .wrap .inner + .inner .item p a span { display: block; width: 172px; height: 37px; line-height: 34px; letter-spacing: 0.16em; background: rgba(0, 0, 0, 0.8); color: #fff; position: absolute; right: 0; bottom: 0; font-size: 15px; pointer-events: auto; } #contents .detail .wrap .inner + .inner .item p a:hover { opacity: 0.7; } #contents .detail .wrap .inner + .inner .item h3 { font-size: 20px; letter-spacing: 0.12em; margin-top: 30px; } #contents .detail .wrap .inner + .inner .item h3 + p { font-size: 16px; letter-spacing: 0.12em; margin-top: 7px; } #contents .detail .wrap .inner + .inner .item h3 + p span { color: #cf1030; } #contents .detail .wrap .btn { margin-top: 100px; } #contents.nutrition .wrap h2 { font-size: 48px; letter-spacing: 0.12em; font-weight: 600; padding-top: 60px; } #contents.nutrition .wrap .inner { padding-top: 70px; } #contents.nutrition .wrap .inner table { border: 1px solid #888; } #contents.nutrition .wrap .inner table thead tr { height: 63px; color: #fff; font-size: 15px; } #contents.nutrition .wrap .inner table thead tr th { padding: 20px 0; text-align: center; letter-spacing: 0.1em; background: #252525; } #contents.nutrition .wrap .inner table thead tr th + th { border-left: 1px solid #888; } #contents.nutrition .wrap .inner table tbody tr:nth-child(even) { background-color: #eeeeee; } #contents.nutrition .wrap .inner table tbody tr + tr { border-top: 1px solid #888; } #contents.nutrition .wrap .inner table tbody tr td { font-size: 16px; letter-spacing: 0.1em; text-align: center; padding: 15px 0; line-height: 1.54; height: 100px; } #contents.nutrition .wrap .inner table tbody tr td:nth-of-type(1) { width: 220px; word-break: keep-all; } #contents.nutrition .wrap .inner table tbody tr td:nth-of-type(2) { width: 182px; } #contents.nutrition .wrap .inner table tbody tr td:nth-of-type(3) { width: 100px; } #contents.nutrition .wrap .inner table tbody tr td:nth-of-type(4) { width: 100px; } #contents.nutrition .wrap .inner table tbody tr td:nth-of-type(5) { width: 60px; } #contents.nutrition .wrap .inner table tbody tr td:nth-of-type(6) { width: 85px; } #contents.nutrition .wrap .inner table tbody tr td:nth-of-type(7) { width: 98px; } #contents.nutrition .wrap .inner table tbody tr td:nth-of-type(8) { width: 350px; font-size: 13px; text-align: left; padding: 5px 10px; } #contents.nutrition .wrap .inner table tbody tr td + td { border-left: 1px solid #888; } #contents.nutrition .wrap .inner .notice { font-size: 15px; padding-top: 10px; letter-spacing: 0.1em; line-height: 1.4; text-align: left; } } @media screen and (min-width: 781px) and (max-width: 1400px) { #contents .wrap { min-width: 1200px; width: 1200px; margin: 0 auto; padding: 0 80px; } #contents .list .wrap h2 { padding-top: 60px; } #contents .list .wrap .inner { display: flex; flex-wrap: wrap; justify-content: space-between; } #contents .list .wrap .inner h3 { padding-bottom: 13px; } #contents .list .wrap .inner h3 img { vertical-align: bottom; } #contents .list .wrap .inner .category { width: 500px; } #contents .list .wrap .inner .category .item { margin-top: 20px; } #contents .list .wrap .inner .category .item + .item { margin-top: 70px; } #contents .list .wrap .inner .category .item a { width: 500px; height: 246px; } #contents .detail .wrap .inner .text { width: 500px; } #contents .detail .wrap .inner .text dl dt { width: 130px; } #contents .detail .wrap .inner .text dl dd { padding-left: 130px; } #contents .detail .wrap .inner + .inner .item { width: 500px; margin-top: 70px; } } @media screen and (max-width: 780px) { /* SP STYLE *************************************************************/ #contents section.pagetitle .bg { background: url("/images/products/kv-sp.jpg") no-repeat center; background-size: cover; } #contents section.pagetitle .copy .line.out:before { border: 2px solid #fff; } #contents section.pagetitle .copy .line.out:after { border: 2px solid #fff; } #contents section.pagetitle .copy .line.in:before { border: 1px solid #fff; } #contents section.pagetitle .copy .line.in:after { border: 1px solid #fff; } #contents .wrap { width: 100%; margin: 0 auto; padding: 0 6.4102564103vw; text-align: left; } #contents .list .wrap h2 { font-size: 6.1538461538vw; letter-spacing: 0.12em; font-weight: 600; text-align: center; margin-bottom: 6.4102564103vw; } #contents .list .wrap .attention { font-size: 4vw; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 5vw; color:#c40000;} #contents .list .wrap .inner h3.line { width: 100%; padding-bottom: 1.9230769231vw; font-size: 4.6153846154vw; letter-spacing: 0.16em; } #contents .list .wrap .inner h3.line span { font-size: 3.7179487179vw; } #contents .list .wrap .inner .category { width: 100%; } #contents .list .wrap .inner .category + .category { margin-top: 11.5384615385vw; } #contents .list .wrap .inner .category .item + .item { margin-top: 11.5384615385vw; } #contents .list .wrap .inner .category .item a { width: 100%; height: 42.9487179487vw; position: relative; display: block; margin-top: 3.2051282051vw; overflow: hidden; } #contents .list .wrap .inner .category .item a picture img { height: 100%; vertical-align: bottom; transition: 1s; } #contents .list .wrap .inner .category .item a i { position: absolute; top: 50%; right: -0.3846153846vw; transform: translateY(-50%); width: 48.7179487179vw; height: 10.5128205128vw; } #contents .list .wrap .inner .category .item a i img { height: 100%; } #contents .list .wrap .inner .category .item a:hover picture img { transition: 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); transform: scale(1.07); } #contents .list .wrap .inner .category .item p { font-size: 3.8vw; line-height: 1.9; letter-spacing: 0.06em; text-align: center; margin-top: 4.1025641026vw; } #contents .detail .wrap { width: 100vw; } #contents .detail .wrap .inner h2 { position: relative; font-size: 6.1538461538vw; font-weight: 600; width: 100%; height: auto; line-height: 1.4; padding: 2.4358974359vw 0 2.6923076923vw; letter-spacing: 0.12em; text-align: center; } #contents .detail .wrap .inner h2:before { content: ""; width: 100%; height: 0.7692307692vw; background: url("/images/h3-line-top.png") repeat-x left top; background-size: 1px 0.641025641vw; position: absolute; left: 0; top: 0; } #contents .detail .wrap .inner h2:after { content: ""; width: 100%; height: 0.7692307692vw; background: url("/images/h3-line-bottom.png") repeat-x left top; background-size: 1px 0.641025641vw; position: absolute; left: 0; bottom: 0; } #contents .detail .wrap .inner h2 span { display: block; font-size: 4.4871794872vw; margin-top: 1.2820512821vw; } #contents .detail .wrap .inner .text p { font-size: 3.8vw; line-height: 1.9; letter-spacing: 0.06em; margin-top: 4.1025641026vw; padding-bottom: 4.1025641026vw; } #contents .detail .wrap .inner .text .box { border: 1px solid #000; padding: 3.2051282051vw 2.5641025641vw; } #contents .detail .wrap .inner .text .box p { padding: 0; margin: 0; } #contents .detail .wrap .inner .text .box a { color: #cf1030; text-decoration: underline; } #contents .detail .wrap .inner .text .box a:hover { text-decoration: none; } #contents .detail .wrap .inner .images { margin-top: 8.7179487179vw; } #contents .detail .wrap .inner .images ul.main { position: relative; width: 100%; height: 87.1794871795vw; } #contents .detail .wrap .inner .images ul.main li { width: 100%; height: auto; position: absolute; left: 0; right: 0; opacity: 0; transition: opacity 0.5s,z-index 0s; z-index: 1; } #contents .detail .wrap .inner .images ul.main li img { width: 100%; height: auto; vertical-align: bottom; } #contents .detail .wrap .inner .images ul.main li.active { opacity: 1; transition: opacity 0.3s; z-index: 5; } #contents .detail .wrap .inner .images ul.thumb { overflow: hidden; margin: 3.8461538462vw -0.641025641vw 0; } #contents .detail .wrap .inner .images ul.thumb li { cursor: pointer; position: relative; width: 16.6666666667vw; height: 16.6666666667vw; transition: opacity 0.3s; float: left; margin: 0 0.5128205128vw; } #contents .detail .wrap .inner .images ul.thumb li img { width: 100%; height: 100%; } #contents .detail .wrap .inner .images ul.thumb li:nth-of-type(n+6) { margin-top: 1.0256410256vw; } #contents .detail .wrap .inner .images ul.thumb li:after { content: ""; width: 16.6666666667vw; height: 16.6666666667vw; position: absolute; left: 0; top: 0; border: 1px solid #cf1030; opacity: 0; transition: opacity 0.3s; } #contents .detail .wrap .inner .images ul.thumb li:hover { opacity: 0.7; } #contents .detail .wrap .inner .images ul.thumb li.active:after { content: ""; width: 16.6666666667vw; height: 16.6666666667vw; position: absolute; left: 0; top: 0; border: 1px solid #cf1030; opacity: 1.0; transition: opacity 0.3s; z-index: 999; } #contents .detail .wrap .inner + .inner .item { width: 100%; margin-top: 12.8205128205vw; text-align: center; } #contents .detail .wrap .inner + .inner .item p { position: relative; transition: opacity 0.3s; } #contents .detail .wrap .inner + .inner .item p:hover { opacity: 0.7; } #contents .detail .wrap .inner + .inner .item p img { vertical-align: bottom; } #contents .detail .wrap .inner + .inner .item p a { display: block; width: 100%; height: 100%; top: 0; left: 0; } #contents .detail .wrap .inner + .inner .item p a span { display: block; width: 31.1538461538vw; height: 6.6666666667vw; line-height: 6.4102564103vw; letter-spacing: 0.16em; background: rgba(0, 0, 0, 0.8); color: #fff; position: absolute; right: 0; bottom: 0; font-size: 2.5641025641vw; } #contents .detail .wrap .inner + .inner .item h3 { font-size: 3.8vw; letter-spacing: 0.12em; margin-top: 5.1282051282vw; } #contents .detail .wrap .inner + .inner .item h3 + p { font-size: 3.8vw; letter-spacing: 0.12em; margin-top: 0.8974358974vw; } #contents .detail .wrap .inner + .inner .item h3 + p span { color: #cf1030; } #contents.nutrition .wrap h2 { font-size: 6.1538461538vw; letter-spacing: 0.12em; font-weight: 600; text-align: center; margin-bottom: 6.4102564103vw; } #contents.nutrition .wrap .inner table { border-bottom: 1px solid #888; border-collapse: collapse; display: block; overflow-x: scroll; -webkit-overflow-scrolling: touch; } #contents.nutrition .wrap .inner table::-webkit-scrollbar { width: 1.9230769231vw; height: 0.8974358974vw; } #contents.nutrition .wrap .inner table::-webkit-scrollbar-thumb { background: #c1c1c1; } #contents.nutrition .wrap .inner table thead tr { height: 10.2564102564vw; color: #fff; font-size: 2.8205128205vw; } #contents.nutrition .wrap .inner table thead tr th { text-align: center; letter-spacing: 0.1em; background: #252525; white-space: nowrap; padding: 2.5641025641vw 1.2820512821vw; } #contents.nutrition .wrap .inner table thead tr th + th { border-left: 1px solid #888; } #contents.nutrition .wrap .inner table tbody tr:nth-child(even) { background-color: #eeeeee; } #contents.nutrition .wrap .inner table tbody tr + tr { border-top: 1px solid #888; } #contents.nutrition .wrap .inner table tbody tr td { font-size: 2.8205128205vw; line-height: 1.54; letter-spacing: 0.06em; text-align: center; padding: 2.5641025641vw 1.2820512821vw; } #contents.nutrition .wrap .inner table tbody tr td:nth-of-type(1) { min-width: 39.7435897436vw; border-left: 1px solid #888; } #contents.nutrition .wrap .inner table tbody tr td:nth-of-type(2) { min-width: 39.7435897436vw; } #contents.nutrition .wrap .inner table tbody tr td:nth-of-type(8) { min-width: 76.9230769231vw; font-size: 2.3076923077vw; text-align: left; padding: 2.5641025641vw 1.2820512821vw; border-right: 1px solid #888; } #contents.nutrition .wrap .inner table tbody tr td + td { border-left: 1px solid #888; } #contents.nutrition .wrap .inner .notice { font-size: 2.3076923077vw; text-align: left; letter-spacing: 0.06em; padding-top: 2.5641025641vw; line-height: 1.4; } }