@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&display=swap');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
a, address,
em, img,
small, strong, sub, sup,
b, u, i,
ul, ol, li, dl, dt, dd,
form, label,
table, caption, tbody, tfoot, thead, tr, th, td,
article, section, aside, figure, figcaption,
header, footer, nav, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, section, aside, figure, figcaption, header, footer, nav { display: block; }
body { line-height: 1; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong { font-weight:bold;}
.clearfix::after {
content: "";
clear: both;
display: table;
}
/*================================================
全体
=================================================*/
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*::before,
*::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { font-size: 62.5%; }
body {
position: relative;
min-height: 100vh;
color: #000D31;
text-align: left;
font-family: "Noto Sans JP", sans-serif;
font-family: "Montserrat", "Noto Sans JP", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a, a:link, a:focus, a:visited {
color: #0061B2;
text-decoration: none;
opacity: 1;
transition: all 0.5s ease;
}
a:hover {
opacity: 0.3;
}
@media screen and (min-width: 768px) {
a[href^="tel:"]{
pointer-events: none;
}
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
/*================================================
header
=================================================*/
header {
background-color: #000D31;
padding: 85px 0 80px;
}
header .logo-box {
position: relative;
display: flex;
padding: 0 0 0 73px;
z-index: 10;
}
header .logo-box h1 {
margin: 15px 0 0 60px;
color: #FFF;
font-size: 40px;
font-weight: 900;
line-height: 1.45;
}
@media screen and (max-width: 1280px) {
header {
padding: 6.640625vw 0 6.25vw;
}
header .logo-box {
padding: 0 0 0 5.703125vw;
}
header .logo-box h1 {
margin: 1.171875vw 0 0 4.6875vw;
font-size: clamp(3.4rem, (100vw - 1080px) * 6 / 200 + 34px, 4rem);
}
header .logo-box img {
width: 44.921875vw;
}
}
@media screen and (max-width: 1079px) {
header .logo-box h1 {
font-size: clamp(2.4rem, (100vw - 768px) * 10 / 312 + 24px, 3.4rem);
}
}
@media screen and (max-width: 768px) {
header {
padding: 105px 0 12.2666667vw;
}
header .logo-box {
flex-direction: column;
flex-direction: column-reverse;
padding: 0 0 0 5.86666667vw;
}
header .logo-box h1 {
margin: 0 0 2.66666667vw;
font-size: clamp(1.7rem, (100vw - 375px) * 17 / 393 + 17px, 3.4rem);
}
header .logo-box h1 br {
display: none;
}
header .logo-box img {
width: 68vw;
}
}
/*================================================
レイアウト共通
=================================================*/
.content-wrap {
margin: 0;
padding: 0;
background-color: #FFF;
}
@media screen and (max-width: 768px) {
.content-wrap {
margin: 0;
padding: 0;
background-color: #FAFAFA;
}
}
/*================================================
メインビジュアル
=================================================*/
.lineup {
margin: -18px 0 0;
}
.lineup ul {
display: flex;
}
.lineup ul li {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: calc(100vw / 7);
}
.lineup ul li:nth-of-type(1),
.lineup ul li:nth-of-type(2) {
width: calc(100vw / 3.5);;
}
.lineup ul li div {
position: relative;
width: 100%;
text-align: center;
}
.lineup ul li:nth-of-type(1) div,
.lineup ul li:nth-of-type(2) div {
width: 50%;
}
.lineup ul li div figure img {
width: 100%;
height: min(29.391892vw, 435px);
object-fit: cover;
}
.lineup ul li:nth-of-type(3) div figure img {
background-color: #FFF;
}
.lineup ul li p {
width: 64.454976%;
margin-top: min(2.432432vw, 36px);
padding: 3px 0;
color: #FFF;
text-align: center;
font-size: 1.6rem;
font-weight: 700;
background-color: #012951;
border: 1px solid #012951;
}
.lineup ul li:nth-of-type(2) p {
background-color: transparent;
border: 1px solid #3552A3;
}
.lineup ul li:nth-of-type(3) p {
width: 130px;
color: #440607;
background-color: #F1E3D9;
border: 1px solid #F1E3D9;
}
.lineup ul li:nth-of-type(4) p {
width: 130px;
background-color: #82011A;
border: 1px solid #82011A;
}
.lineup ul li:nth-of-type(5) p {
width: 130px;
font-size: 13px;
background-color: #0E7A48;
border: 1px solid #0E7A48;
}
.lineup ul li a {
position: absolute;
top: min(20.27027vw, 300px);
left: 0;
right: 0;
}
.lineup ul li:nth-of-type(1) div:nth-of-type(1),
.lineup ul li:nth-of-type(2) div:nth-of-type(1) {
text-align: left;
}
.lineup ul li:nth-of-type(1) div:nth-of-type(1) a,
.lineup ul li:nth-of-type(2) div:nth-of-type(1) a {
margin-left: 37.440758%;
}
.lineup ul li:nth-of-type(1) div:nth-of-type(2),
.lineup ul li:nth-of-type(2) div:nth-of-type(2) {
text-align: right;
}
.lineup ul li:nth-of-type(1) div:nth-of-type(2) a,
.lineup ul li:nth-of-type(2) div:nth-of-type(2) a {
margin-right: 32.701422%;
}
.lineup ul li a img {
width: min(8.716216vw, 129px);
}
.beginners {
width: 922px;
margin: 110px auto 0;
}
@media screen and (max-width: 1280px) {
.lineup ul li p {
font-size: clamp(1.3rem, (100vw - 1080px) * 3 / 200 + 13px, 1.6rem);
}
.lineup ul li:nth-of-type(3) p,
.lineup ul li:nth-of-type(4) p,
.lineup ul li:nth-of-type(5) p {
width: 10.15625vw;
}
.lineup ul li:nth-of-type(5) p {
font-size: clamp(1.1rem, (100vw - 1080px) * 2 / 200 + 11px, 1.3rem);
}
.beginners {
width: 74.609375vw;
margin: 8.59375vw auto 0;
}
}
@media screen and (max-width: 1079px) {
.lineup ul li p {
font-size: clamp(0.9rem, (100vw - 768px) * 4 / 312 + 9px, 1.3rem);
}
.lineup ul li:nth-of-type(5) p {
font-size: clamp(0.8rem, (100vw - 768px) * 3 / 312 + 8px, 1.1rem);
}
}
@media screen and (max-width: 768px) {
.lineup {
margin: -2.4vw 0 0;
}
.lineup ul {
flex-wrap: wrap;
}
.lineup ul li {
width: calc(100vw / 3);
}
.lineup ul li:nth-of-type(1),
.lineup ul li:nth-of-type(2) {
width: calc(100vw / 2);
}
.lineup ul li div figure img {
height: 61.333333vw;
}
.lineup ul li:nth-of-type(3) div figure img,
.lineup ul li:nth-of-type(4) div figure img,
.lineup ul li:nth-of-type(5) div figure img {
height: 45.06667vw;
}
.lineup ul li p {
width: 100% !important;
margin-top: 0;
padding: 1.06666667vw 0;
font-size: clamp(1.1rem, (100vw - 375px) * 11 / 393 + 11px, 2.2rem) !important;
border: none !important;
}
.lineup ul li a {
top: auto;
bottom: 0.8vw;
left: 2.13333333vw;
}
.lineup ul li div {
text-align: left !important;
}
.lineup ul li:nth-of-type(1) div:nth-of-type(1) a,
.lineup ul li:nth-of-type(2) div:nth-of-type(1) a {
margin-left: 0;
}
.lineup ul li:nth-of-type(1) div:nth-of-type(2) a,
.lineup ul li:nth-of-type(2) div:nth-of-type(2) a {
margin-right: 0;
}
.lineup ul li a img {
width: 13.3333333vw;
}
.beginners {
width: min(400px, 80vw);
margin: min(80px, 13.3333333vw) auto 0;
}
}
/*================================================
nav
=================================================*/
nav {
position: relative;
display: flex;
justify-content: space-between;
height: 80px;
margin: 0 auto;
padding: 0 0 0 54px;
background-color: #FFF;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
nav .logo-box {
width: 280px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav .logo-box p {
font-size: 12px;
font-weight: 700;
line-height: 1.45;
}
nav .navlist {
display: flex;
align-items: center;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.05em;
}
nav .navlist li {
padding: 0 0 0 45px;
}
nav .navlist li a {
color: #000D31;
}
nav .navlist > li:last-child {
height: 100%;
padding: 0;
}
nav .navlist > li:last-child a {
display: flex;
align-items: center;
height: 100%;
margin: 0 0 0 25px;
padding: 0 34px 0 25px;
color: #FFF;
background-color: #000D31;
}
nav .navlist > li:last-child a span {
display: flex;
align-items: center;
}
nav .navlist > li:last-child a i {
padding: 0 7px 0 0;
}
nav .navlist li a span:nth-of-type(2),
nav .navlist > li:last-child a span:nth-of-type(2),
.sp-disp {
display: none;
}
@media screen and (max-width: 1480px) {
nav {
padding: 0 0 0 3.648649vw;
}
nav .navlist li {
padding: 0 0 0 3.040541vw;
}
nav .navlist > li:last-child a {
margin: 0 0 0 1.689189vw;
padding: 0 2.297297vw 0 1.689189vw;
}
nav .navlist > li:last-child a i {
padding: 0 0.472973vw 0 0;
}
}
@media screen and (max-width: 1280px) {
nav {
height: 6.25vw;
}
nav .logo-box {
width: 21.875vw;
}
nav .logo-box img {
width: 10.3125vw;
}
nav .logo-box p {
font-size: clamp(0.8rem, (100vw - 768px) * 4 / 512 + 8px, 1.2rem);
}
nav .navlist {
font-size: clamp(0.9rem, (100vw - 768px) * 6 / 512 + 9px, 1.5rem);
}
nav .navlist > li:last-child a i img {
width: 1.875vw;
}
}
@media screen and (max-width: 768px) {
nav {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
width: 100%;
height: 64px;
padding: 0 0 0 7.2vw;
background-color: #FFF;
z-index: 9999;
}
nav .logo-box {
width: 220px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav .logo-box img {
width: 99px;
}
nav .logo-box p {
font-size: 10px; /* 10px / 2.667vw */
}
nav .navlist {
overflow-y: scroll;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
position: fixed;
top: 0;
left: 100%;
width: 100vw;
height: 100%;
padding: 50px 15.733333vw 0;
font-size: 20px; /* 20px / 5.333vw */
background: #000D31;
transition: 0.5s ease-out;
}
nav .navlist li {
margin-bottom: 35px;
padding: 0;
}
nav .navlist > li:first-child {
margin-bottom: 50px;
}
nav .navlist li a {
color: #FFF;
}
nav .navlist > li:last-child {
width: 70.4vw;
max-width: 350px;
height: 61px;
margin-top: 50px;
padding: 0;
font-size: 14px; /* 14px / 3.733vw */
}
nav .navlist > li:last-child a {
position: relative;
display: flex;
align-items: center;
height: 100%;
margin: 0;
padding-left: 5.866667vw;
color: #010E32;
background-color: #000D31;
background: linear-gradient(90deg, #A59661 0%, #D7C995 51%, #A59661 100%);
}
nav .navlist > li:last-child a::before,
nav .navlist > li:last-child a::after {
content: "";
position: absolute;
background-color: #000D31;
}
nav .navlist > li:last-child a::before {
top: calc(50% + 3px);
right: 4.8vw;
width: 6.13333vw;
height: 1px;
}
nav .navlist > li:last-child a::after {
top: calc(50% - 3px);
right: 5.333333vw;
width: 1px;
height: 2.133333vw;
transform: rotate(-45deg);
}
nav .navlist li ul {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
width: 70.4vw;
max-width: 350px;
font-size: 14px; /* 14px / 3.733vw */
font-weight: 500;
}
nav .navlist li ul li {
margin-top: 20px;
margin-bottom: 0;
padding: 0;
letter-spacing: normal;
}
nav .navlist li ul li:nth-of-type(even) {
width: 37.121212%;
}
nav .navlist li ul li:nth-of-type(odd) {
width: 47.727273%;
}
nav .navlist li a span:nth-of-type(1),
nav .navlist li:last-child a span:nth-of-type(1) {
display: none;
}
nav .navlist li a span:nth-of-type(2),
nav .navlist li:last-child a span:nth-of-type(2),
.sp-disp {
display: block;
}
}
/* ハンバーガー
=================================================*/
.menu-btn {
display: none;
position: absolute;
top: 0;
right: 0;
width: 64px;
height: 64px;
background-color: #000D31;
z-index: 999999;
}
.menu-btn .toggle {
position: relative;
width: 100%;
height: 100%;
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
}
.menu-hamburger,
.menu-hamburger::before,
.menu-hamburger::after {
display: block;
position: relative;
width: 22px;
height: 2px;
margin: auto;
background-color: #FFF;
transition: 0.2s ease-out;
}
.menu-hamburger::before,
.menu-hamburger::after {
position: absolute;
top: -8px;
left: 0;
content: '';
}
.menu-hamburger::after {
top: 8px;
}
.menu-btn.open .menu-hamburger {
background-color: transparent;
}
.menu-btn.open .menu-hamburger::before,
.menu-btn.open .menu-hamburger::after {
top: 0;
}
.menu-btn.open .menu-hamburger::before {
transform: rotate(45deg);
}
.menu-btn.open .menu-hamburger::after {
transform: rotate(-45deg);
}
@media screen and (max-width: 768px) {
.menu-btn {
display: block;
}
.menu-btn.open + .navlist {
transform: translateX(-100%);
}
}
/*================================================
コンセプト
=================================================*/
.concept {
padding: 150px 0 0;
}
.title-box {
display: flex;
justify-content: space-between;
align-items: center;
width: min(86.486486vw, 1280px);
margin: 0 auto;
}
.concept .title-box h2 {
font-size: 45px;
font-weight: 900;
line-height: 1.3;
}
.concept .title-box p {
position: relative;
font-size: 123px;
font-weight: 700;
letter-spacing: 0.1em;
color: #FFF;
z-index: 2;
}
.concept .title-box p::after {
position: absolute;
left: 0;
top: 0;
content: "CONCEPT";
font-size: 123px;
-webkit-text-stroke: 6px #000D31;
text-stroke: 6px #000D31;
z-index: -1;
}
.concept-body {
position: relative;
width: 100%;
height: min(47.567568vw, 704px);
margin: min(3.378378vw, 50px) 0 0;
padding: min(2.567568vw, 38px) 0 0 min(16.486486vw, 244px);
background: url("{{ 'izmo_concept_bg_img01.jpg' | file_img_url: 'master' }}") center top / cover no-repeat;
}
.concept-body p {
margin: min(1.283784vw, 19px) 0;
color: #000D31;
font-size: 22px;
font-weight: 900;
line-height: 1.8;
}
.concept-body p span {
padding: 7px 12px;
background-color: #FFF;
}
.concept-body p:first-child span:first-child,
.concept-body p span:last-child {
padding-right: 0;
}
.concept-body figure {
position: absolute;
left: 0;
right: 0;
bottom: -90px;
text-align: center;
}
@media screen and (max-width: 1480px) {
.concept .title-box h2 {
font-size: 3.041vw;
}
.concept .title-box p {
font-size: 8.311vw;
}
.concept .title-box p::after {
font-size: 8.311vw;
}
.concept-body p {
font-size: 1.486vw;
}
.concept-body figure {
bottom: -6.081081vw;
}
.concept-body figure img {
width: 38.851351vw;
}
}
@media screen and (max-width: 1280px) {
.concept {
padding: 11.71875vw 0 0;
}
}
@media screen and (max-width: 768px) {
.concept {
padding: 8vw 0 0;
}
.title-box {
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 85.333333vw;
margin: 0 auto 5.33333333vw;
}
.concept .title-box h2 {
font-size: 6.933vw; /* 26px */
}
.concept .title-box p {
font-size: 14.667vw; /* 55px */
}
.concept .title-box p::after {
font-size: 14.667vw; /* 55px */
-webkit-text-stroke: 2px #000D31;
text-stroke: 2px #000D31;
}
.concept-body {
width: 100%;
height: 149.333334vw;;
margin: 0;
padding: 42.6666667vw 0 0 6.333333vw;
background: url("{{ 'izmo_concept_bg_spimg01_02.jpg' | file_img_url: 'master' }}") center bottom / 100% auto no-repeat;
}
.concept-body p {
margin: min(4vw, 15px) 0;
font-size: clamp(1.4rem, (100vw - 375px) * 14 / 393 + 14px, 2.8rem);
}
.concept-body p:first-child {
margin-top: -42.6666667vw;
}
.concept-body p span {
padding: 1.06666667vw 1.86666667vw;
}
}
/*================================================
日本最高峰を目指す
=================================================*/
.product-point {
width: 1007px;
margin: 200px auto 0;
padding: 0;
}
.product-point h3 {
text-align: center;
font-size: 35px;
font-weight: 700;
color: #000D31;
z-index: 2;
}
.product-point h3 br {
display: none;
}
.product-point h3 span {
display: inline-block;
position: relative;
font-size: 35px;
font-weight: 700;
color: #FFF;
z-index: 2;
}
.product-point h3 span::after {
position: absolute;
left: 0;
top: 0;
content: "日本最高峰を目指す";
font-size: 35px;
-webkit-text-stroke: 2px #000D31;
text-stroke: 2px #000D31;
z-index: -1;
}
.product-point ul {
display: flex;
justify-content: space-between;
margin: 70px 0 0;
}
.product-point ul li {
position: relative;
width: 31.082423%;
padding: 0;
}
.product-point ul li h4 {
font-size: 28px;
font-weight: 700;
line-height: 1.7;
letter-spacing: 0.03em;
}
.product-point ul li h4 span {
display: block;
font-size: 18px;
}
.product-point ul li p {
margin: 10px 0 0;
font-size: 14px;
font-weight: 500;
line-height: 2;
}
.product-point ul li figure p.number {
position: absolute;
top: -40px;
left: 8px;
margin: 0;
color: transparent;
font-family: "Oswald";
font-size: 80px;
font-weight: 700;
line-height: 1;
-webkit-text-stroke: 1px #000D31;
text-stroke: 1px #000D31;
}
.product-point ul li figure {
margin: 0 0 18px;
}
.product-point ul li figcaption {
position: absolute;
top: 11px;
right: 10px;
color: #FFF;
font-family: "Oswald";
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
@media screen and (max-width: 1280px) {
.product-point {
width: 78.671875vw;
margin: 15.625vw auto 0;
}
.product-point h3,
.product-point h3 span,
.product-point h3 span::after {
font-size: clamp(2.1rem, (100vw - 768px) * 14 / 512 + 21px, 3.5rem);
}
.product-point ul {
margin: 5.46875vw 0 0;
}
.product-point ul li h4 {
font-size: clamp(1.7rem, (100vw - 768px) * 11 / 512 + 17px, 2.8rem);
}
.product-point ul li h4 span {
font-size: clamp(1.1rem, (100vw - 768px) * 7 / 512 + 11px, 1.8rem);
}
.product-point ul li p {
margin: 0.78125vw 0 0;
font-size: clamp(1rem, (100vw - 768px) * 4 / 512 + 10px, 1.4rem);
}
.product-point ul li figure p.number {
top: -3.125vw;
left: 0.625vw;
font-size: clamp(4.8rem, (100vw - 768px) * 32 / 512 + 48px, 8rem);
}
.product-point ul li figure {
margin: 0 0 1.40625vw;
}
.product-point ul li figcaption {
top: 0.859375vw;
right: 0.78125vw;
font-size: clamp(0.7rem, (100vw - 768px) * 5 / 512 + 7px, 1.2rem);
}
}
@media screen and (max-width: 768px) {
.product-point {
width: 85.333333vw;
margin: 19.2vw auto 0;
}
.product-point h3 {
margin: 0 -0.26666667vw;
font-size: clamp(2.3rem, (100vw - 375px) * 23 / 393 + 23px, 4.6rem);
line-height: 1.4;
}
.product-point h3 br {
display: block;
}
.product-point h3 span {
font-size: clamp(2.3rem, (100vw - 375px) * 23 / 393 + 23px, 4.6rem);
}
.product-point h3 span::after {
font-size: clamp(2.3rem, (100vw - 375px) * 23 / 393 + 23px, 4.6rem);
}
.product-point ul {
flex-wrap: wrap;
margin: 0;
}
.product-point ul li {
width: 100%;
margin: 13.333333vw 0 0;
}
.product-point ul li h4 {
margin-top: 3.2vw;
font-size: clamp(2.5rem, (100vw - 375px) * 25 / 393 + 25px, 5rem);
line-height: 1.6;
}
.product-point ul li h4 span {
font-size: clamp(1.6rem, (100vw - 375px) * 16 / 393 + 16px, 3.2rem);
}
.product-point ul li p {
margin: 10px 0 0;
font-size: clamp(1.4rem, (100vw - 375px) * 14 / 393 + 14px, 2.8rem);
}
.product-point ul li figure p.number {
top: -7.666667vw;
left: 2.133333vw;
font-size: clamp(6rem, (100vw - 375px) * 60 / 393 + 60px, 12rem);
}
.product-point ul li figcaption {
top: 2.933333vw;
right: 2.666667vw;
font-size: clamp(1.2rem, (100vw - 375px) * 12 / 393 + 12px, 2.4rem);
}
}
/*================================================
プロダクト
=================================================*/
.product {
margin: min(8.445946vw, 125px) auto 0;
}
.product .title-box {
width: min(82.77027vw, 1225px);
margin: 0 auto min(2.027027vw, 30px);
}
.product .title-box h2 {
font-size: 35px;
font-weight: 700;
line-height: 1.3;
}
.product .title-box p {
font-size: 150px;
font-weight: 700;
}
@media screen and (max-width: 1480px) {
.product .title-box h2 {
font-size: clamp(1.8rem, (100vw - 768px) * 17 / 712 + 18px, 3.5rem);
}
.product .title-box p {
font-size: clamp(7.7rem, (100vw - 768px) * 73 / 712 + 77px, 15rem);
}
}
@media screen and (max-width: 768px) {
.product {
margin: min(16vw, 60px) auto 0;
}
.product .title-box {
width: 85.333333vw;
margin: 0 auto min(5.866667vw, 22px);
}
.product .title-box h2 {
font-size: 5.067vw;
}
.product .title-box p {
font-size: 14.133vw;
}
.product .title-box h2 br {
display: none;
}
}
/*================================================
プロダクト ラインナップ バナー
=================================================*/
.product-lineup-banner {
display: flex;
justify-content: space-between;
width: min(82.77027vw, 1225px);
margin: 0 auto min(8.108108vw, 120px);
}
.product-lineup-banner li {
width: 18.77551%;
height: min(21.824324vw, 323px);
font-weight: 700;
}
.product-lineup-banner li a {
display: block;
position: relative;
width: 100%;
height: 100%;
padding: min(11.891892vw, 176px) 0 0 min(1.418919vw, 21px);
color: #FFF;
background: url("{{ 'izmo_product_lineup_bg_pcimg01.png' | file_img_url: 'master' }}") center center / 100% auto no-repeat;
}
.product-lineup-banner li:nth-of-type(2) a { background-image: url("{{ 'izmo_product_lineup_bg_pcimg02.png' | file_img_url: 'master' }}"); }
.product-lineup-banner li:nth-of-type(3) a { background-image: url("{{ 'izmo_product_lineup_bg_pcimg03.png' | file_img_url: 'master' }}"); color: #440607; }
.product-lineup-banner li:nth-of-type(4) a { background-image: url("{{ 'izmo_product_lineup_bg_pcimg04.png' | file_img_url: 'master' }}"); }
.product-lineup-banner li:nth-of-type(5) a { background-image: url("{{ 'izmo_product_lineup_bg_pcimg05.png' | file_img_url: 'master' }}"); }
.product-lineup-banner li a h3 {
margin: min(0.337838vw, 5px) 0 min(0.675676vw, 10px);
font-size: 20px;
}
.product-lineup-banner li a p {
font-size: 13px;
}
.product-lineup-banner li a p.sup {
position: absolute;
top: min(0.945946vw, 14px);
right: min(0.675676vw, 10px);
color: #FFF;
font-family: "Montserrat";
font-size: 12px;
font-weight: 700;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.product-lineup-banner li a figure {
padding: 0 0 0 min(0.337838vw, 5px);
}
.product-lineup-banner li a::before,
.product-lineup-banner li a::after {
content: "";
position: absolute;
background: #FFF;
}
.product-lineup-banner li:nth-of-type(3) a::before,
.product-lineup-banner li:nth-of-type(3) a::after {
background: #000D31;
}
.product-lineup-banner li a::before {
right: min(1.216216vw, 18px);
bottom: min(0.675676vw, 10px);
height: min(1.013514vw, 15px);
width: 1px;
}
.product-lineup-banner li a::after {
right: min(1.081081vw, 16px);
bottom: min(0.608108vw, 9px);
height: min(0.472973vw, 7px);
width: 1px;
transform: rotate(45deg);
}
.product-lineup-banner-title {
width: min(82.77027vw, 1225px);
margin: min(7.77027027vw, 115px) auto min(1.35135135vw, 20px);
font-size: 60px;
font-weight: 700;
}
@media screen and (max-width: 1480px) {
.product-lineup-banner li a h3 {
font-size: clamp(1.4rem, (100vw - 1080px) * 6 / 400 + 14px, 2rem);
}
.product-lineup-banner li a p {
font-size: clamp(0.95rem, (100vw - 1080px) * 3.5 / 400 + 9.5px, 1.3rem);
}
.product-lineup-banner li a p.sup {
font-size: clamp(0.9rem, (100vw - 1080px) * 3 / 400 + 9px, 1.2rem);
}
.product-lineup-banner li a figure img {
width: 4.054054vw;
}
.product-lineup-banner li:nth-of-type(1) a figure img,
.product-lineup-banner li:nth-of-type(2) a figure img {
width: 8.040541vw;
}
.product-lineup-banner-title {
font-size: clamp(4.3rem, (100vw - 1080px) * 17 / 400 + 43px, 6rem);
}
}
@media screen and (max-width: 1079px) {
.product-lineup-banner {
position: relative;
flex-wrap: wrap;
width: 85.333333vw;
margin: 0 auto min(8.108108vw, 120px);
}
.product-lineup-banner::after {
content: "";
display: block;
width: 32%;
}
.product-lineup-banner li {
width: 32%;
height: 11.955514vw;
margin: 0 0 1.6vw;
}
.product-lineup-banner li a {
width: 100%;
height: 100%;
padding: 2.06089vw 0 0 1.76089vw;
background: url("{{ 'izmo_product_lineup_bg_spimg01.jpg' | file_img_url: 'master' }}") center center / 100% auto no-repeat;
}
.product-lineup-banner li:nth-of-type(2) a { background-image: url("{{ 'izmo_product_lineup_bg_spimg02.jpg' | file_img_url: 'master' }}"); }
.product-lineup-banner li:nth-of-type(3) a { background-image: url("{{ 'izmo_product_lineup_bg_spimg03.jpg' | file_img_url: 'master' }}"); }
.product-lineup-banner li:nth-of-type(4) a { background-image: url("{{ 'izmo_product_lineup_bg_spimg04.jpg' | file_img_url: 'master' }}"); }
.product-lineup-banner li:nth-of-type(5) a { background-image: url("{{ 'izmo_product_lineup_bg_spimg05.jpg' | file_img_url: 'master' }}"); }
.product-lineup-banner li a h3 {
margin-bottom: 0.2vw;
font-size: 1.297498vw;
}
.product-lineup-banner li a p {
font-size: 0.92678406vw;
}
.product-lineup-banner li a p.sup {
top: 1.11214087vw;
right: 0.83410565vw;
font-size: 0.834106vw;
}
.product-lineup-banner li a figure {
padding: 0;
}
.product-lineup-banner li a figure img {
width: 4.63392018vw;
margin-bottom: 0;
}
.product-lineup-banner li:nth-of-type(1) a figure img,
.product-lineup-banner li:nth-of-type(2) a figure img {
width: 9.190608vw;
}
.product-lineup-banner li:nth-of-type(3) a::before,
.product-lineup-banner li:nth-of-type(3) a::after {
background: #FFF;
}
.product-lineup-banner li a::before {
right: 1.01946247vw;
bottom: 1.390176vw;
height: 1.39017609vw;
}
.product-lineup-banner li a::after {
right: 0.83410565vw;
bottom: 1.204819vw;
height: 0.64874884vw;
}
.product-lineup-banner-title {
width: 85.333333vw;
margin: 13.333333vw auto 2.666667vw;
font-size: 8vw;
}
}
@media screen and (max-width: 768px) {
.product-lineup-banner {
flex-direction: column;
justify-content: space-between;
width: 85.333333vw;
margin: 0 auto min(8.108108vw, 120px);
}
.product-lineup-banner li {
width: 100%;
height: 34.4vw;
margin: 0 0 1.6vw;
}
.product-lineup-banner li a {
width: 100%;
height: 100%;
padding: 4.533333vw 0 0 5.066667vw;
background: url("{{ 'izmo_product_lineup_bg_spimg01.jpg' | file_img_url: 'master' }}") center center / 100% auto no-repeat;
}
.product-lineup-banner li:nth-of-type(2) a { background-image: url("{{ 'izmo_product_lineup_bg_spimg02.jpg' | file_img_url: 'master' }}"); }
.product-lineup-banner li:nth-of-type(3) a { background-image: url("{{ 'izmo_product_lineup_bg_spimg03.jpg' | file_img_url: 'master' }}"); }
.product-lineup-banner li:nth-of-type(4) a { background-image: url("{{ 'izmo_product_lineup_bg_spimg04.jpg' | file_img_url: 'master' }}"); }
.product-lineup-banner li:nth-of-type(5) a { background-image: url("{{ 'izmo_product_lineup_bg_spimg05.jpg' | file_img_url: 'master' }}"); }
.product-lineup-banner li a h3 {
margin-bottom: 1.066667vw;
font-size: 4.267vw;
}
.product-lineup-banner li a p {
font-size: 3.2vw;
}
.product-lineup-banner li a p.sup {
top: 3.2vw;
right: 2.93333333vw;
font-size: 2.4vw;
}
.product-lineup-banner li a figure {
padding: 0;
}
.product-lineup-banner li a figure img {
width: 13.333333vw;
margin-bottom: 1.066667vw;
}
.product-lineup-banner li:nth-of-type(1) a figure img,
.product-lineup-banner li:nth-of-type(2) a figure img {
width: 26.444444vw;
}
.product-lineup-banner li a::before {
right: 4.266667vw;
bottom: 2.933333vw;
height: 4vw;
}
.product-lineup-banner li a::after {
right: 3.466667vw;
bottom: 2.666667vw;
height: 2.133333vw;
}
.product-lineup-banner-title {
width: 85.333333vw;
margin: 13.333333vw auto 2.666667vw;
font-size: 8vw;
}
}
/*================================================
プロダクト 商品紹介
=================================================*/
.product-content {
position: relative;
}
.product-content.athlete { background-color: #002850; }
.product-content.bulkup,
.product-content.shapeup { background-color: #000D31; }
.product-content.beauty,
.product-content.junior { background-color: #EADACB; }
.product-content h2 {
position: relative;
display: flex;
align-items: center;
padding: 20px 0 20px 545px;
color: #FFF;
font-size: 33px;
font-weight: 700;
background-color: #BCAC73;
}
.product-content.beauty h2 { padding-left: 515px; }
.product-content.shapeup h2 { padding-left: 545px; }
.product-content.junior h2 { padding-left: 472px; }
.product-content h2 span {
padding: 0 0 0 min(0.337838vw , 5px);
font-size: 19px;
}
/* 縁文字設定
=================================================*/
p.surround01 {
position: absolute;
top: 13px;
left: 1002px;
filter: url(#dilate01);
color: #FFF;
font-size: 81px;
font-weight: 700;
z-index: 10;
}
.beauty p.surround01 { left: 1040px;}
.shapeup p.surround01 { left: 940px;}
.junior p.surround01 { text-align: right; }
p.surround01 + svg {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
@media screen and (max-width: 1480px) {
.product-content h2 {
justify-content: flex-end;
padding: 20px 524px 20px 0;
}
.product-content.beauty h2 { padding-left: 0; padding-right: 515px; }
.product-content.shapeup h2 { padding-left: 0; padding-right: 546px; }
.product-content.junior h2 { padding-left: 0; padding-right: 472px; }
/* 縁文字設定
=================================================*/
p.surround01 {
left: auto;
right: 100px;
}
.beauty p.surround01 { left: auto;}
.shapeup p.surround01 { left: auto;}
.junior p.surround01 { left: auto; }
}
@media screen and (max-width: 1280px) {
.product-content h2 {
padding: min(1.5625vw, 20px) min(40.9375vw, 524px) min(1.5625vw, 20px) 0;
font-size: clamp(2rem, (100vw - 768px) * 13 / 512 + 20px, 3.3rem);
}
.product-content.beauty h2 { padding-left: auto; padding-right: min(40.234375vw, 515px); }
.product-content.shapeup h2 { padding-left: auto; padding-right: min(42.65625vw, 546px); }
.product-content.junior h2 { padding-left: auto; padding-right: min(36.875vw, 472px);; }
.product-content h2 span {
font-size: clamp(1.1rem, (100vw - 768px) * 8 / 512 + 11px, 1.9rem);
}
/* 縁文字設定
=================================================*/
p.surround01 {
top: 1.015625vw;
left: auto;
right: min(7.8125vw, 100px);
font-size: clamp(4.8rem, (100vw - 768px) * 33 / 512 + 48px, 8.1rem);
}
.beauty p.surround01 { left: auto;}
.shapeup p.surround01 { left: auto;}
.junior p.surround01 { left: auto; text-align: right; }
}
@media screen and (max-width: 768px) {
.product-content:nth-of-type(1) {
margin-top: 21.333333vw;
}
.product-content h2 {
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5.33333333vw 0;
font-size: 7.467vw; /* 28px */
}
.product-content.beauty h2,
.product-content.shapeup h2,
.product-content.junior h2 { padding-left: 0; padding-right: 0; }
.product-content h2 span {
display: block;
padding: 0.8vw 0 0;
font-size: 4.533vw; /* 17px */
}
/* 縁文字設定
=================================================*/
p.surround01 {
position: static;
margin-top: -3.466667vw;
text-align: center;
font-size: 16vw; /* 60px */
}
.junior p.surround01 { text-align: center; }
}
.product-content-detail {
padding: 73px 0 130px;
color: #FFF;
}
.beauty .product-content-detail { color: #440607; }
.junior .product-content-detail { color: #000D31; }
.product-content-detail-top {
position: relative;
display: flex;
margin: 0 auto 60px;
padding: 0 0 0 max(9.864865vw, 146px);
}
@media screen and (max-width: 1479px) {
.product-content-detail-top {
justify-content: flex-end;
padding: 0 min(40.878378vw, 605px) 0 0;
}
}
@media screen and (max-width: 1280px) {
.product-content-detail {
padding: 5.703125vw 0 10.15625vw;
}
.product-content-detail-top {
margin: 0 auto 4.6875vw;
}
}
@media screen and (max-width: 768px) {
.product-content-detail {
width: 85.333333vw;
margin: auto;
padding: 10.666667vw 0 21.333333vw;
}
.product-content-detail-top {
display: block;
margin: 0 auto 8vw;
padding: 0;
}
}
.detail-top-description {
position: relative;
width: 730px;
z-index: 10;
}
.detail-top-description h3 {
position: relative;
margin: 0 0 8px;
padding: 0 0 0 min(3.378378vw, 50px);
font-size: 20px;
font-weight: 700;
line-height: 1.3;
z-index: 10;
}
.detail-top-description h4 {
position: relative;
padding: 0 0 0 min(3.378378vw, 50px);
font-size: 43.2px;
font-weight: 700;
line-height: 1.7;
z-index: 10;
}
.detail-top-description h4 span {
padding: 5px 16px;
background-color: #000;
}
.beauty .detail-top-description h4,
.junior .detail-top-description h4 { color: #FFF; }
.beauty .detail-top-description h4 span { background-color: #E5B094; }
.junior .detail-top-description h4 span { background-color: #0D7947; }
.bio .detail-top-description h4 span:first-child,
.boost .detail-top-description h4 span:first-child {
padding: 5px 0 5px 16px;
}
.detail-top-description-pickup {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: -20px 0 0;
}
.detail-top-description-pickup ul {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 370px;
margin: 0 0 0 -47px;
}
@media screen and (max-width: 1280px) {
.detail-top-description {
width: 57.03125vw;
}
.detail-top-description h3 {
margin: 0 0 0.625vw;
padding: 0 0 0 3.90625vw;
font-size: clamp(1.7rem, (100vw - 1080px) * 3 / 200 + 17px, 2rem);
}
.detail-top-description h4 {
padding: 0 0 0 3.90625vw;
font-size: clamp(2.6rem, (100vw - 768px) * 17.2 / 512 + 26px, 4.32rem);
}
.detail-top-description h4 span {
padding: 0.390625vw 1.25vw;
}
.detail-top-description-pickup {
margin: -20px 0 0;
}
.detail-top-description-pickup figure {
width: 35.9375vw;
}
.detail-top-description-pickup ul {
height: 28.90625vw;
margin: 0 0 0 -3.671875vw;
}
}
@media screen and (max-width: 768px) {
.detail-top-description {
width: 100%;
}
.detail-top-description h3 {
margin: 0 0 8px;
padding: 0;
font-size: 3.733vw;
}
.detail-top-description h4 {
padding: 0 0 0 ;
font-size: 5.867vw;
line-height: 1.8;
}
.detail-top-description h4 span {
padding: 0.8vw 1.6vw;
}
.bio .detail-top-description h4 span:first-child,
.boost .detail-top-description h4 span:first-child {
padding: 0.8vw 0 0.8vw 1.6vw;
}
.detail-top-description-pickup {
display: block;
align-items: center;
margin: -2.666667vw 0 0;
}
.detail-top-description-pickup figure {
width: 100%;
}
.detail-top-description-pickup figure img {
width: 100%;
}
.detail-top-description-pickup ul {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
height: 100%;
margin: 0;
}
}
/* BIO
=================================================*/
.bio .detail-top-description-pickup ul li:first-child {
margin: 0 0 12px;
padding: 0 0 0 7px;
}
.bio .detail-top-description-pickup ul li:nth-of-type(2) {
padding: 0 0 0 10px;
}
.bio .detail-top-description-pickup ul li:nth-of-type(4) {
padding: 0 0 0 16px;
}
.bio .detail-top-description-pickup ul li:nth-of-type(5) {
display: flex;
align-items: center;
}
.bio .detail-top-description-pickup ul li:nth-of-type(5) img:first-child {
margin: 0 15px 0 0;
}
/* BOOST
=================================================*/
.boost .detail-top-description-pickup ul li:first-child {
margin: 47px 0 0;
}
.boost .detail-top-description-pickup ul li:nth-of-type(4) {
margin: 0 0 0 -2px;
}
.boost .detail-top-description-pickup ul li:nth-of-type(5) {
display: flex;
align-items: flex-end;
margin: 0 0 8px;
}
.boost .detail-top-description-pickup ul li:nth-of-type(5) img:first-child {
margin: 0 5px 0 0;
}
/* MAX
=================================================*/
.max .detail-top-description-pickup ul li:first-child {
margin: 15px 0 0;
}
.max .detail-top-description-pickup ul li:nth-of-type(4) {
display: flex;
align-items: flex-end;
margin: 0 0 40px;
}
.max .detail-top-description-pickup ul li:nth-of-type(4) img:first-child {
margin: 0 10px 0 0;
}
/* EAA
=================================================*/
.eaa .detail-top-description-pickup ul li:first-child {
margin: 25px 0 0;
}
.eaa .detail-top-description-pickup ul li:nth-of-type(5) {
display: flex;
align-items: flex-end;
margin: 0 0 10px;
}
.eaa .detail-top-description-pickup ul li:nth-of-type(5) img:first-child {
margin: 0 10px 0 0;
}
/* BEAUTY
=================================================*/
.beauty .detail-top-description-pickup ul {
height: 380px;
margin: 20px 0 0 -47px;
}
.beauty .detail-top-description-pickup ul li:nth-of-type(5) {
display: flex;
align-items: center;
}
.beauty .detail-top-description-pickup ul li:nth-of-type(5) img:first-child {
margin: 0 15px 0 0;
}
/* SHAPE UP JUNIOR
=================================================*/
.shapeup .detail-top-description-pickup ul li:first-child,
.junior .detail-top-description-pickup ul li:first-child {
margin: 5px 0 0;
}
.shapeup .detail-top-description-pickup ul li:nth-of-type(4),
.junior .detail-top-description-pickup ul li:nth-of-type(4) {
display: flex;
align-items: flex-end;
margin-bottom: 80px;
}
.shapeup .detail-top-description-pickup ul li:nth-of-type(4) img:first-child,
.junior .detail-top-description-pickup ul li:nth-of-type(4) img:first-child {
margin: 0 10px 0 0;
}
@media screen and (max-width: 1280px) {
/* BIO
=================================================*/
.bio .detail-top-description-pickup ul li:first-child {
margin: 0 0 0.9375vw;
padding: 0 0 0 0.546875vw;
}
.bio .detail-top-description-pickup ul li:nth-of-type(2) {
padding: 0 0 0 0.78125vw;
}
.bio .detail-top-description-pickup ul li:nth-of-type(4) {
padding: 0 0 0 1.25vw;
}
.bio .detail-top-description-pickup ul li:nth-of-type(5) {
display: flex;
align-items: center;
}
.bio .detail-top-description-pickup ul li:nth-of-type(5) img:first-child {
margin: 0 1.171875vw 0 0;
}
.bio .detail-top-description-pickup ul li:first-child img { width: 14.765625vw; }
.bio .detail-top-description-pickup ul li:nth-of-type(2) img { width: 10.15625vw; }
.bio .detail-top-description-pickup ul li:nth-of-type(3) img { width: 11.796875vw; }
.bio .detail-top-description-pickup ul li:nth-of-type(4) img { width: 9.21875vw; }
.bio .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(1) { width: 5.703125vw; }
.bio .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(2) { width: 4.84375vw; }
.bio .detail-top-description-pickup ul li:nth-of-type(6) img { width: 11.40625vw; }
/* BOOST
=================================================*/
.boost .detail-top-description-pickup ul li:first-child {
margin: 3.671875vw 0 0;
}
.boost .detail-top-description-pickup ul li:nth-of-type(4) {
margin: 0 0 0 -0.15625vw;
}
.boost .detail-top-description-pickup ul li:nth-of-type(5) {
margin: 0 0 0.625vw;
}
.boost .detail-top-description-pickup ul li:nth-of-type(5) img:first-child {
margin: 0 0.390625vw 0 0;
}
.boost .detail-top-description-pickup ul li img { width: 12.265625vw; }
.boost .detail-top-description-pickup ul li:nth-of-type(2) img { width: 8.671875vw; }
.boost .detail-top-description-pickup ul li:nth-of-type(3) img { width: 8.828125vw; }
.boost .detail-top-description-pickup ul li:nth-of-type(4) img { width: 7.578125vw; }
.boost .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(1) { width: 4.84375vw; }
.boost .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(2) { width: 9.6875vw; }
/* MAX
=================================================*/
.max .detail-top-description-pickup ul li:first-child {
margin: 1.171875vw 0 0;
}
.max .detail-top-description-pickup ul li:nth-of-type(4) {
display: flex;
align-items: flex-end;
margin: 0 0 3.125vw;
}
.max .detail-top-description-pickup ul li:nth-of-type(4) img:first-child {
margin: 0 0.78125vw 0 0;
}
.max .detail-top-description-pickup ul li img { width: 16.328125vw; }
.max .detail-top-description-pickup ul li:nth-of-type(2) img { width: 12.65625vw; }
.max .detail-top-description-pickup ul li:nth-of-type(3) img { width: 13.515625vw; }
.max .detail-top-description-pickup ul li:nth-of-type(4) img:nth-of-type(1) { width: 4.84375vw; }
.max .detail-top-description-pickup ul li:nth-of-type(4) img:nth-of-type(2) { width: 9.6875vw; }
/* EAA
=================================================*/
.eaa .detail-top-description-pickup ul li:first-child {
margin: 1.953125vw 0 0;
}
.eaa .detail-top-description-pickup ul li:nth-of-type(5) {
display: flex;
align-items: flex-end;
margin: 0 0 0.78125vw;
}
.eaa .detail-top-description-pickup ul li:nth-of-type(5) img:first-child {
margin: 0 0.78125vw 0 0;
}
.eaa .detail-top-description-pickup ul li img { width: 15.3125vw; }
.eaa .detail-top-description-pickup ul li:nth-of-type(2) img { width: 10.703125vw; }
.eaa .detail-top-description-pickup ul li:nth-of-type(3) img { width: 11.484375vw; }
.eaa .detail-top-description-pickup ul li:nth-of-type(4) img { width: 9.6875vw; }
.eaa .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(1) { width: 4.84375vw; }
.eaa .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(2) { width: 9.6875vw; }
/* BEAUTY
=================================================*/
.beauty .detail-top-description-pickup ul {
height: 29.6875vw;
margin: 1.5625vw 0 0 -3.671875vw;
}
.beauty .detail-top-description-pickup ul li:nth-of-type(5) img:first-child {
margin: 0 1.171875vw 0 0;
}
.beauty .detail-top-description-pickup ul li img { width: 11.640625vw; }
.beauty .detail-top-description-pickup ul li:nth-of-type(2) img { width: 8.125vw; }
.beauty .detail-top-description-pickup ul li:nth-of-type(3) img { width: 10.9375vw; }
.beauty .detail-top-description-pickup ul li:nth-of-type(4) img { width: 13.984375vw; }
.beauty .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(1) { width: 5.703125vw; }
.beauty .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(2) { width: 4.84375vw; }
.beauty .detail-top-description-pickup ul li:nth-of-type(6) img { width: 9.6875vw; }
/* SHAPE UP JUNIOR
=================================================*/
.shapeup .detail-top-description-pickup ul li:first-child,
.junior .detail-top-description-pickup ul li:first-child {
margin: 0.390625vw 0 0;
}
.shapeup .detail-top-description-pickup ul li:nth-of-type(4),
.junior .detail-top-description-pickup ul li:nth-of-type(4) {
display: flex;
align-items: flex-end;
margin-bottom: 6.25vw;
}
.shapeup .detail-top-description-pickup ul li:nth-of-type(4) img:first-child,
.junior .detail-top-description-pickup ul li:nth-of-type(4) img:first-child {
margin: 0 0.78125vw 0 0;
}
.shapeup .detail-top-description-pickup ul li img { width: 13.4375vw; }
.shapeup .detail-top-description-pickup ul li:nth-of-type(2) img { width: 12.03125vw; }
.shapeup .detail-top-description-pickup ul li:nth-of-type(3) img { width: 13.359375vw; }
.shapeup .detail-top-description-pickup ul li:nth-of-type(4) img:nth-of-type(1) { width: 4.84375vw; }
.shapeup .detail-top-description-pickup ul li:nth-of-type(4) img:nth-of-type(2) { width: 9.6875vw; }
.junior .detail-top-description-pickup ul li img { width: 10.46875vw; }
.junior .detail-top-description-pickup ul li:nth-of-type(2) img { width: 12.34375vw; }
.junior .detail-top-description-pickup ul li:nth-of-type(3) img { width: 9.609375vw; }
.junior .detail-top-description-pickup ul li:nth-of-type(4) img:nth-of-type(1) { width: 4.84375vw; }
.junior .detail-top-description-pickup ul li:nth-of-type(4) img:nth-of-type(2) { width: 9.53125vw; }
}
@media screen and (max-width: 768px) {
.detail-top-description-pickup ul {
justify-content: space-around;
}
.detail-top-description-pickup ul li {
margin: 0 0 5vw !important;
padding: 0 !important;
text-align: center !important;
}
/* BIO
=================================================*/
.bio .detail-top-description-pickup ul li:first-child {
width: 100%;
}
.bio .detail-top-description-pickup ul li:nth-of-type(2) {
width: 100%;
}
.bio .detail-top-description-pickup ul li:nth-of-type(3) {
width: 40vw;
}
.bio .detail-top-description-pickup ul li:nth-of-type(4) {
width: 31.2vw;
}
.bio .detail-top-description-pickup ul li:nth-of-type(5) {
justify-content: space-between;
width: 38.666667vw;
}
.bio .detail-top-description-pickup ul li:nth-of-type(5) img:first-child {
margin: 0;
}
.bio .detail-top-description-pickup ul li:nth-of-type(6) {
width: 38.133333vw;
}
.bio .detail-top-description-pickup ul li:first-child img { width: 39.733333vw; }
.bio .detail-top-description-pickup ul li:nth-of-type(2) img { width: 34.4vw; }
.bio .detail-top-description-pickup ul li:nth-of-type(3) img { width: 40vw; }
.bio .detail-top-description-pickup ul li:nth-of-type(4) img { width: 31.2vw; }
.bio .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(1) { width: 19.466667vw; }
.bio .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(2) { width: 16.266667vw; }
.bio .detail-top-description-pickup ul li:nth-of-type(6) img { width: 38.133333vw; }
/* BOOST
=================================================*/
.boost .detail-top-description-pickup ul li:first-child {
width: 41.6vw;
}
.boost .detail-top-description-pickup ul li:nth-of-type(2) {
width: 29.066667vw;
}
.boost .detail-top-description-pickup ul li:nth-of-type(3) {
width: 29.6vw;
}
.boost .detail-top-description-pickup ul li:nth-of-type(4) {
width: 25.6vw;
}
.boost .detail-top-description-pickup ul li:nth-of-type(5) {
}
.boost .detail-top-description-pickup ul li:nth-of-type(5) img:first-child {
margin: 0 2.666667vw 0 0;
}
.boost .detail-top-description-pickup ul li img { width: 41.6vw; }
.boost .detail-top-description-pickup ul li:nth-of-type(2) img { width: 29.066667vw; }
.boost .detail-top-description-pickup ul li:nth-of-type(3) img { width: 29.6vw; }
.boost .detail-top-description-pickup ul li:nth-of-type(4) img { width: 25.6vw; }
.boost .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(1) { width: 16.266667vw; }
.boost .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(2) { width: 33.333vw; }
/* MAX
=================================================*/
.max .detail-top-description-pickup ul li:first-child {
width: 100%;
}
.max .detail-top-description-pickup ul li:nth-of-type(2) {
width: 36.266667vw;
}
.max .detail-top-description-pickup ul li:nth-of-type(3) {
width: 38.933333vw;
}
.max .detail-top-description-pickup ul li:nth-of-type(4) {
}
.max .detail-top-description-pickup ul li:nth-of-type(4) img:first-child {
margin: 0 2.666667vw 0 0;
}
.max .detail-top-description-pickup ul li img { width: 55.466667vw; }
.max .detail-top-description-pickup ul li:nth-of-type(2) img { width: 36.266667vw; }
.max .detail-top-description-pickup ul li:nth-of-type(3) img { width: 38.933333vw; }
.max .detail-top-description-pickup ul li:nth-of-type(4) img:nth-of-type(1) { width: 16.266667vw; }
.max .detail-top-description-pickup ul li:nth-of-type(4) img:nth-of-type(2) { width: 33.066667vw; }
/* EAA
=================================================*/
.eaa .detail-top-description-pickup ul li:first-child {
width: 48vw;
}
.eaa .detail-top-description-pickup ul li:nth-of-type(2) {
width: 33.333333vw;
}
.eaa .detail-top-description-pickup ul li:nth-of-type(3) {
width: 35.733333vw;
}
.eaa .detail-top-description-pickup ul li:nth-of-type(4) {
width: 30.4vw;
}
.eaa .detail-top-description-pickup ul li:nth-of-type(5) {
}
.eaa .detail-top-description-pickup ul li:nth-of-type(5) img:first-child {
margin: 0 2.666667vw 0 0;
}
.eaa .detail-top-description-pickup ul li img { width: 48vw; }
.eaa .detail-top-description-pickup ul li:nth-of-type(2) img { width: 33.333333vw; }
.eaa .detail-top-description-pickup ul li:nth-of-type(3) img { width: 35.733333vw; }
.eaa .detail-top-description-pickup ul li:nth-of-type(4) img { width: 30.4vw; }
.eaa .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(1) { width: 16.266667vw; }
.eaa .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(2) { width: 33.066667vw; }
/* BEAUTY
=================================================*/
.beauty .detail-top-description-pickup ul {
height: inherit;
}
.beauty .detail-top-description-pickup ul li:first-child {
width: 39.733333vw;
}
.beauty .detail-top-description-pickup ul li:nth-of-type(2) {
width: 27.466667vw;
}
.beauty .detail-top-description-pickup ul li:nth-of-type(3) {
width: 34.8vw;
margin-left: 4vw!important;
}
.beauty .detail-top-description-pickup ul li:nth-of-type(4) {
width: 45.2vw;
margin-left: 3vw!important;
}
.beauty .detail-top-description-pickup ul li:nth-of-type(5) img:first-child {
margin: 0 2.666667vw 0 0;
}
.beauty .detail-top-description-pickup ul li:nth-of-type(6) {
width: 33.066667vw;
}
.beauty .detail-top-description-pickup ul li img { width: 39.733333vw; }
.beauty .detail-top-description-pickup ul li:nth-of-type(2) img { width: 27.466667vw; }
.beauty .detail-top-description-pickup ul li:nth-of-type(3) img { width: 34.8vw; }
.beauty .detail-top-description-pickup ul li:nth-of-type(4) img { width: 45.2vw; }
.beauty .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(1) { width: 19.466667vw; }
.beauty .detail-top-description-pickup ul li:nth-of-type(5) img:nth-of-type(2) { width: 16.266667vw; }
.beauty .detail-top-description-pickup ul li:nth-of-type(6) img { width: 33.066667vw; }
/* SHAPE UP JUNIOR
=================================================*/
.shapeup .detail-top-description-pickup ul li:first-child,
.junior .detail-top-description-pickup ul li:first-child {
width: 100%;
}
.shapeup .detail-top-description-pickup ul li:nth-of-type(2) {
width: 38.933333vw;
}
.shapeup .detail-top-description-pickup ul li:nth-of-type(3) {
width: 39.2vw;
}
.shapeup .detail-top-description-pickup ul li:nth-of-type(4) img:first-child {
margin: 0 2.666667vw 0 0;
}
.shapeup .detail-top-description-pickup ul li img { width: 45.6vw; }
.shapeup .detail-top-description-pickup ul li:nth-of-type(2) img { width: 38.933333vw; }
.shapeup .detail-top-description-pickup ul li:nth-of-type(3) img { width: 39.2vw; }
.shapeup .detail-top-description-pickup ul li:nth-of-type(4) img:nth-of-type(1) { width: 16.266667vw; }
.shapeup .detail-top-description-pickup ul li:nth-of-type(4) img:nth-of-type(2) { width: 33.066667vw; }
.junior .detail-top-description-pickup ul li:nth-of-type(2) {
width: 41.866667vw;
}
.junior .detail-top-description-pickup ul li:nth-of-type(3) {
width: 36vw;
}
.junior .detail-top-description-pickup ul li:nth-of-type(4) img:first-child {
margin: 0 2.666667vw 0 0;
}
.junior .detail-top-description-pickup ul li img { width: 35.466667vw; }
.junior .detail-top-description-pickup ul li:nth-of-type(2) img { width: 41.866667vw; }
.junior .detail-top-description-pickup ul li:nth-of-type(3) img { width: 36vw; }
.junior .detail-top-description-pickup ul li:nth-of-type(4) img:nth-of-type(1) { width: 16.266667vw; }
.junior .detail-top-description-pickup ul li:nth-of-type(4) img:nth-of-type(2) { width: 32vw; }
}
.detail-top-description-useful {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 0 0 0 min(3.378378vw, 50px);
}
.detail-top-description-useful h5 {
margin: 0 0 13px;
width: 276px;
padding: 6px 0;
color: #000D31;
text-align: center;
font-size: 15px;
font-weight: 700;
background-color: #D9D9D9;
border-radius: 9999px;
}
.boost .detail-top-description-useful h5 {
color: #FFF;
background-color: #E26A1B;
}
.eaa .detail-top-description-useful h5,
.shapeup .detail-top-description-useful h5 {
color: #FFF;
background-color: #820019;
}
.beauty .detail-top-description-useful h5 {
background-color: #FFF;
}
.junior .detail-top-description-useful h5 {
color: #FFF;
background-color: #0D7947;
}
.detail-top-description-useful p {
font-size: 15px;
font-weight: 700;
}
.detail-top-description-useful p span {
margin: 0 10px 0 0;
padding: 2px 8px;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
border: 1px solid #FFF;
border-radius: 9999px;
}
.beauty .detail-top-description-useful p span { border: 1px solid #440607; }
.junior .detail-top-description-useful p span { border: 1px solid #000D31; }
.detail-top-description-useful > p {
width: 535px;
margin-top: 20px;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
}
.detail-top-description-useful-flavor {
display: flex;
justify-content: space-between;
align-items: center;
width: 360px;
margin: 0;
}
.detail-top-description-useful figure {
display: flex;
align-items: center;
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 1.7;
}
.detail-top-description-useful figure img {
margin: 0 10px 0 0;
}
@media screen and (max-width: 1280px) {
.detail-top-description-useful h5 {
margin: 0 0 1.015625vw;
width: 21.5625vw;
padding: 0.46875vw 0;
font-size: clamp(1.2rem, (100vw - 1080px) * 3 / 200 + 12px, 1.5rem);
}
.detail-top-description-useful p {
font-size: clamp(1.2rem, (100vw - 1080px) * 3 / 200 + 12px, 1.5rem);
}
.detail-top-description-useful p span {
margin: 0 0.78125vw 0 0;
padding: 0.15625vw 0.625vw;
font-size: clamp(1.2rem, (100vw - 1080px) * 3 / 200 + 12px, 1.5rem);
}
.detail-top-description-useful > p {
width: 41.796875vw;
margin-top: 1.5625vw;
font-size: clamp(1rem, (100vw - 1080px) * 2 / 200 + 10px, 1.2rem);
}
.detail-top-description-useful-flavor {
width: 28.125vw;
}
.detail-top-description-useful figure {
font-size: clamp(1.2rem, (100vw - 1080px) * 3 / 200 + 12px, 1.5rem);
}
.detail-top-description-useful figure img {
width: 5.3125vw;
margin: 0 0.78125vw 0 0;
}
}
@media screen and (max-width: 999px) {
.detail-top-description-useful-flavor {
justify-content: flex-start;
width: 100%;
margin: 1.5015015vw 0 0;
}
.detail-top-description-useful figure {
margin: 0 1.5015015vw 0 0;
}
}
@media screen and (max-width: 768px) {
.detail-top-description-useful {
flex-direction: column;
align-items: stretch;
margin: 0;
padding: 0;
}
.detail-top-description-useful h5 {
margin: 6.666667vw 0 4vw;
width: 100%;
padding: 6px 0;
font-size: 4vw;
}
.detail-top-description-useful p {
font-size: 4vw;
}
.detail-top-description-useful p span {
margin: 0;
padding: 2px 8px;
font-size: 4vw;
}
.detail-top-description-useful > p {
width: 100%;
margin-top: 5.333333vw;
font-size: 3.2vw;
}
.detail-top-description-useful-flavor {
width: calc(100% + 9px);
justify-content: space-between;
margin: 4vw -9px 0 0;
}
.detail-top-description-useful figure {
margin: 0;
font-size: 4vw;
}
.detail-top-description-useful figure img {
width: 16.266667vw;
margin: 0 1.5vw 0 0;
}
}
.detail-top-image {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: column;
width: 50.878378vw;
}
.detail-top-image figure img {
width: 100%;
height: 365px;
object-fit: cover;
}
@media screen and (max-width: 1280px) {
.detail-top-image {
width: 50.878378vw;
}
.detail-top-image figure img {
height: 28.515625vw;
}
}
@media screen and (max-width: 768px) {
.detail-top-image {
position: static;
width: 100%;
margin: 13.333333vw 0 8vw;
}
.detail-top-image figure img {
width: 100%;
height: 39.733333vw;
}
}
/* 製品特徴
=================================================*/
.product-content-detail-feature {
display: flex;
justify-content: space-between;
align-items: center;
width: 1020px;
margin: auto;
}
.eaa .product-content-detail-feature {
width: 1167px;
padding: 0 0 0 40px;
}
.shapeup .product-content-detail-feature {
width: 1157px;
padding: 0 0 0 70px;
}
.detail-features-description {
width: 414px;
}
.detail-features-description h6 {
font-size: 25px;
font-weight: 700;
line-height: 1.5;
}
.detail-features-description p {
margin: 25px 0 0;
font-size: 14px;
font-weight: 500;
line-height: 1.9;
}
.detail-features-description p.title {
margin: 0 0 15px;
font-size: 15px;
font-weight: 700;
line-height: 1;
}
.beauty .detail-features-description p.title { color: #817052; }
.junior .detail-features-description p.title { color: #817052; }
@media screen and (max-width: 1280px) {
.product-content-detail-feature {
width: 79.6875vw;
}
.eaa .product-content-detail-feature,
.shapeup .product-content-detail-feature {
width: 91.171875vw;
padding: 0 0 0 3.125vw;
}
.product-content-detail-feature figure {
width: 44.453125vw;
}
.eaa .product-content-detail-feature figure,
.shapeup .product-content-detail-feature figure {
width: 52.890625vw;
}
.detail-features-description {
width: 32.34375vw;
}
.detail-features-description h6 {
font-size: clamp(1.5rem, (100vw - 768px) * 10 / 512 + 15px, 2.5rem);
}
.detail-features-description p {
margin: 1.953125vw 0 0;
font-size: clamp(1.2rem, (100vw - 1080px) * 2 / 200 + 12px, 1.4rem);
}
.detail-features-description p.title {
margin: 0 0 1.171875vw;
font-size: clamp(1.2rem, (100vw - 1080px) * 3 / 200 + 12px, 1.5rem);
}
}
@media screen and (max-width: 1080px) {
.detail-features-description p {
margin: 1.953125vw 0 0;
font-size: clamp(1.1rem, (100vw - 768px) * 1 / 312 + 11px, 1.2rem);
}
}
@media screen and (max-width: 768px) {
.product-content-detail-feature {
flex-direction: column;
width: 100% !important;
}
.eaa .product-content-detail-feature {
padding: 0;
}
.shapeup .product-content-detail-feature {
padding: 0;
}
.product-content-detail-feature figure {
width: 100%;
}
.product-content-detail-feature figure img {
width: 100%;
}
.eaa .product-content-detail-feature figure,
.shapeup .product-content-detail-feature figure {
width: 100%;
}
.detail-features-description {
width: 100%;
}
.detail-features-description h6 {
margin: 2.666667vw 0 0;
font-size: 5.333vw;
}
.detail-features-description p {
margin: 5.333333vw 0 9.333333vw;
font-size: 3.467vw;
}
.detail-features-description p.title {
margin: 0;
font-size: 4vw;
}
}
/* 購入ボタン
=================================================*/
.product-content-buybutton a {
display: flex;
align-items: center;
width: 553px;
margin: 65px auto 0;
padding: 31px 0 27px 70px;
background: linear-gradient(90deg, #A59661 0%, #D7C995 51%, #A59661 100%);
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.product-content-buybutton figure {
margin: 0 30px 0 0;
}
.product-content-buybutton p {
color: #000D31;
font-size: 26px;
font-weight: 700;
line-height: 1.5;
}
.product-content-buybutton p:first-child {
margin-bottom: 5px;
padding-left: 5px;
font-size: 14px;
line-height: 1.3;
}
.product-content-buybutton p:last-child {
padding-left: 7px;
font-size: 12px;
font-weight: 500;
}
@media screen and (max-width: 1280px) {
.product-content-buybutton a {
width: 43.203125vw;;
margin: 5.078125vw auto 0;
padding: 2.421875vw 0 2.109375vw 5.46875vw;
}
.product-content-buybutton figure {
margin: 0 2.34375vw 0 0;
}
.product-content-buybutton figure img {
width: 5.3125vw;
}
.product-content-buybutton p {
font-size: clamp(1.5rem, (100vw - 768px) * 11 / 512 + 15px, 2.6rem);
}
.product-content-buybutton p:first-child {
margin-bottom: 0.390625vw;
padding-left: 0.390625vw;
font-size: clamp(0.9rem, (100vw - 768px) * 5 / 512 + 9px, 1.4rem);
}
.product-content-buybutton p:last-child {
padding-left: 0.546875vw;
font-size: clamp(0.8rem, (100vw - 768px) * 4 / 512 + 8px, 1.2rem);
}
}
@media screen and (max-width: 768px) {
.product-content-buybutton a {
width: 100%;
margin: 13.333333vw auto 0;
padding: 4.533333vw 0 4.533333vw 5.066667vw;
}
.product-content-buybutton figure {
margin: 0 2.666667vw 0 0;
}
.product-content-buybutton figure img {
width: 13.6vw;
}
.product-content-buybutton p {
font-size: 5.333vw;
}
.product-content-buybutton p:first-child {
margin-bottom: 0;
padding-left: 0;
font-size: 2.667vw;
}
.product-content-buybutton p:last-child {
padding-left: 0;
font-size: 2.667vw;
}
}
.product-nav {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
transition: all 1s ease;
}
.product-nav li {
text-align: center;
margin: 0 auto;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.product-nav li a {
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 131px;
padding: 0 3px 0 0;
font-size: 12px;
font-weight: 700;
background-color: #012951;
}
.product-nav li a {
color: #FFF;
}
.product-nav li:nth-of-type(3) a { color: #440607; }
.product-nav li:nth-of-type(2) a { background-color: #010E32; }
.product-nav li:nth-of-type(3) a { background-color: #F1E3D9; }
.product-nav li:nth-of-type(4) a { background-color: #82011A; }
.product-nav li:nth-of-type(5) a { background-color: #0E7A48; }
.product-nav.is-hidden {
visibility: hidden;
opacity: 0;
}
hr {
max-width: 1280px;
height: 5px;
margin: 0 auto;
padding:0;
background-color: #BCAC73;
border: none;
}
@media screen and (max-width: 1280px) {
.product-nav li a {
width: 2.734375vw;
height: 10.234375vw;
padding: 0 0.234375vw 0 0;
font-size: 0.9375vw;
}
}
@media screen and (max-width: 768px) {
.product-nav {
display: none;
}
hr {
max-width: 85.333333vw;
height: 2px;
}
}
/*================================================
ATHLETE VOICE
=================================================*/
.voice {
display: flex;
flex-wrap: wrap;
width: min(89.864865vw, 1330px);
margin: 0 auto min(7.432432vw, 110px);
color: #FFF;
}
.voice h2 {
width: 100%;
margin: 0 0 35px;
color: #000D31;
text-align: center;
font-size: 150px;
font-weight: 700;
}
.voice h2 br {
display: none;
}
.voice h2 span {
display: block;
margin: 5px 0 0;
font-size: 23px;
}
.voice ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.voice ul li {
width: 49.022556%;
margin-bottom: 1.756757vw;
}
.voice ul li dl {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
height: 100%;
width: 100%;
padding: 39px 35px 39px 39px;
background-color: #000D31;
}
.voice ul li dl dt {
display: none;
}
.voice ul li dd {
display: flex;
justify-content: space-between;
fo