@charset "UTF-8";

#milmirafast {
    max-width: 750px;     /* retinaの2倍解像度を想定。実装中は375px幅でも検証可 */
    width: 100%;
    margin: 0 auto;
    color: #2c3e54;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", sans-serif;
    line-height: 1.7;
    letter-spacing: 0.1em;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
}

#milmirafast img {
    display: block;
    width: 100%;
    height: auto;
}

#milmirafast ul,
#milmirafast li {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ============================================== */
/* MV / メインビジュアル                            */
/* ============================================== */
.mv {
    position: relative;
    width: 100%;
    overflow: hidden;
    /*background-color: #557aa8; */ 
}

.mv__visual-stack {
    position: relative;
    width: 100%;
	aspect-ratio: 750 / 1204;
    background-image: url('/special/milmirafast/img/mv_ba.jpg');
    background-size: 100% auto;
    background-position: center -3%;
    background-repeat: no-repeat;
}

/* ロゴ */
.mv__logo {
    position: absolute;
    top: 3%;
    left: 4.5%;
    width: 42%;
    z-index: 10;
    margin: 0;
}

/* Silicone Hydrogelバッジ */
.mv__badge {
    position: absolute;
    top: 1%;
    right: 4%;
    width: 32%;
    z-index: 10;
}

/* モデル写真スライダー */
.mv__swiper {
	position: absolute;
	inset: 0;
	z-index: 1;
	mask-image: linear-gradient(to bottom, black 0%, black 87%, transparent 96%);
	-webkit-mask-image: linear-gradient(to bottom, black 0, black 87%, transparent 96%);
}

.mv__swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: 4% 0 0;
    display: flex;
    transition-property: transform;
    box-sizing: content-box
}

/* メインコピー */
.mv__copy {
    position: absolute;
    width: 21%;
    top: 20%;
    right: 2%;
    z-index: 5;
}

.mv__debut {
    position: absolute;
    width: 47%;
    top: 12%;
    left: 2%;
    z-index: 5;
}

.mv__hoshi {
    position: absolute;
    width: 31%;
    bottom: 12%;
    right: 0%;
    z-index: 5;
}
/* 4色レンズ＋ラベル */
.mv__lens-list {
    position: absolute;
    width: 92%;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    gap: 2.5%;
    z-index: 5;
}

.mv__lens-item {
    flex: 1;
    text-align: center;
}

.mv__lens-item img {
    width: 100%;
}

.mv__lens-name {
    margin: 6px 0 0;
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

/* スペック表記 */
.mv__spec {
    position: absolute;
    width: 94%;
    bottom: -4%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.mv__shita {
    position: absolute;
    width: 100%;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

/* ============================================== */
/* LINE UP                                         */
/* ============================================== */
.lineup {
    position: relative;
    width: 100%;
	background:#f2f2f4;
}

/* タイトル「LINE UP」 */
.lineup__title {
    width: 40%;
    margin: 0 auto 30px;
    text-align: center;
}

.lineup__title img {
    width: 100%;
}

/* 4色リスト */
.lineup__list {
    width: 100%;
}

/* 各色のアイテム共通 */
.lineup__item {
    position: relative;
    width: 100%;
}

/* 配置パターンA：着色直径バッジ＝左、瞳＝左、キャッチ＝右、名前＝中央寄り（brown, gray） */
/* 配置パターンB：その左右反転（pink, green） */

/* === 着色直径バッジ === */
.lineup__badge {
    position: absolute;
    width: 22%;
    top: 4%;
    z-index: 3;
}

.lineup__item--brown .lineup__badge,
.lineup__item--gray  .lineup__badge { left: 4%; }

.lineup__item--pink  .lineup__badge,
.lineup__item--green .lineup__badge { right: 4%; }

/* === キャッチコピー === */
.lineup__catch {
    position: absolute;
    width: 46%;
    top: 10%;
    z-index: 3;
}

.lineup__item--brown .lineup__catch,
.lineup__item--gray  .lineup__catch { right: 4%; }

.lineup__item--pink  .lineup__catch,
.lineup__item--green .lineup__catch { left: 4%; }

/* === 瞳アップ画像 === */
.lineup__eye {
    position: absolute;
    width: 100%;
    top: 14%;
    z-index: 2;
}

.lineup__item--brown .lineup__eye,
.lineup__item--gray  .lineup__eye { left: 0; }

.lineup__item--pink  .lineup__eye,
.lineup__item--green .lineup__eye { right: 0; }

/* === 名前（calm brown 等） === */
.lineup__name {
    position: absolute;
    width: 50%;
    bottom: 6%;
    z-index: 4;
}

.lineup__item--brown .lineup__name,
.lineup__item--gray  .lineup__name { left: 8%; }

.lineup__item--pink  .lineup__name,
.lineup__item--green .lineup__name { right: 8%; }


/* ============================================== */
/* キャンペーン ¥298                                */
/* ============================================== */
.lineup__campaign {
    width: 92%;
    margin: 0 auto 0;
    padding: 0px 0 10%;
}

.lineup__campaign a {
    display: block;
    transition: opacity 0.3s ease;
}

.lineup__campaign a:hover {
    opacity: 0.85;
}

.lineup__campaign img {
    width: 100%;
}

/* ============================================== */
/* スペック詳細表（テキスト版）                   */
/* ============================================== */
#milmirafast .spec-detail-area {
    background-color: #fcfaf8;
    padding: 2% 5% 5%;
    width: 90%;
    margin: 5% auto 0;
    box-sizing: border-box;
}

#milmirafast .spec-table {
    width: 100%;
    margin: 0;
}

#milmirafast .spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4.5% 0;
    border-bottom: 2px solid #eaddd6;
    color: #8c837b; 
    font-size: min(3.2vw, 14px); 
    line-height: 1.6;
    letter-spacing: 0.05em;
}

#milmirafast .spec-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#milmirafast .spec-row dt {
    width: 35%;
    text-align: left;
    font-weight: 500;
    margin: 0;
}

#milmirafast .spec-row dd {
    width: 65%;
    text-align: right;
    margin: 0;
}

@media screen and (max-width: 480px) {
    #milmirafast .spec-row dd {
        font-size: min(3.1vw, 13px);
    }
}

#milmirafast .product_area {
    margin: 1% auto;
    line-height: 2;
}

#milmirafast .product_inner,
#milmirafast .product_inner + .product_inner {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding: 0;
    margin: 5% 0 0;
}

#milmirafast .product_inner + .product_inner {
    margin: 0;
}

#milmirafast .product_box {
    width: 47%;
    display: flex;
    flex-direction: column;
}

#milmirafast .product_boximg {
    width: 70%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6%;
}

#milmirafast .product_boximg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#milmirafast .product_name {
    display: block;
    font-size: min(3.7vw, 20px);
    text-align: center;
    margin: 0 0 2%;
}

#milmirafast .product_text {
    font-size: min(2.4vw, 14px);
    text-align: center;
    margin: 0 0 4%;
    flex-grow: 1;
    line-height: 1.5;
}

#milmirafast .product_price {
    font-size: min(3vw, 16px);
    text-align: center;
    margin: 0 0 4%;
}

#milmirafast .product_price span {
    font-size: min(4.5vw, 25px);
    text-align: center;
}

#milmirafast .product_btn {
    display: block;
    margin: auto auto 15%; 
    width: 65%;
}