@charset "UTF-8";

/* ==========================================================================
   共通設定
   ========================================================================== */
#osusume-lens {
    color: #292929;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.05em;
    font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif;
}

#osusume-lens div, #osusume-lens p, #osusume-lens h1, #osusume-lens h2, 
#osusume-lens h3, #osusume-lens h4, #osusume-lens ul, #osusume-lens li, #osusume-lens a {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#osusume-lens a:hover {
    opacity: 0.8;
    transition: 0.3s;
}

/* ==========================================================================
   メインビジュアル・キャッチコピー
   ========================================================================== */
#osusume-lens .header_box img {
    display: block;
    width: 100%;
    height: auto;
}

#osusume-lens .catch_zone {
    display: block;
    margin: 8% auto 0;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1.5px;
    font-size: min(3.2vw, 16px);
}

#osusume-lens .ttl_donna {
    width: 28%;
    margin: 2% auto 4%;
    display: block;
}

#osusume-lens .coupon_img {
    width: 100%;
    margin: 8% auto 2%;
    display: block;
}

/* ==========================================================================
   診断コンテンツ (質問カードエリア)
   ========================================================================== */
#osusume-lens .diag-container {
    padding-top: 6%;
}

#osusume-lens .q-card {
	background: #fff;
    border: 0.3em solid #276bbc;
    border-radius: 1.6em;
    padding: 5% 2%;
    margin: 0 8% 6% !important;
    box-shadow: 0.6em 0.6em 0px #c3d6ec;
    width: auto;
}

#osusume-lens .titleq {
    display: block;
    width: 80%;
    margin: 0 auto 5%;
}

#osusume-lens .ans-list {
	padding-left: 28%;
    list-style: none;
}

#osusume-lens .ans-btn {
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
    width: 100%;
    padding: 2% 0;
    margin-bottom: 3%;
    border: none !important;  
    background: transparent !important; 
    text-align: left;
    cursor: pointer;
    font-size: min(3.6vw, 16px);
    color: #292929;
    line-height: 1.2;
}

#osusume-lens .ans-btn::before {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #999;
    background: #fff;
    margin-right: 12px;
    flex-shrink: 0;
    border-radius: 3px;
}

#osusume-lens .ans-btn.selected {
    color: #3273bc !important;
    font-weight: bold;
}

#osusume-lens .ans-btn.selected::before {
    border-color: #3273bc;
    content: '✔'; 
    color: #3273bc;
    /*font-size: 14px;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   診断ボタンエリア
   ========================================================================== */
#osusume-lens .submit-area {
    text-align: center;
    margin: 40px 0;
}

#osusume-lens .btn-diagnose {
    background: #3273bc;
    color: #fff;
    border: none;
    padding: 3% 8%;
    font-size: min(3.8vw, 18px);
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(50, 115, 188, 0.3);
}

/* ==========================================================================
   結果表示（商品カード）
   ========================================================================== */
#osusume-lens .product-details-container {
    display: none; 
    padding: 18% 0 3%;
    position: relative;
    background-color: #e3f3ff;
}

#osusume-lens .product-card {
    display: none; 
    width: 90%;
    margin: 0 auto 30px;
}

#osusume-lens .product-card-inner {
	border-radius: 1.8em;
    padding: 16% 7% 7% 7%;
    background: #fff;
}

#osusume-lens .card-title {
    text-align: center;
    font-size: min(5.2vw, 21px);
    font-weight: 700;
    color: #333333;
}

#osusume-lens .card-image {
    width: 70%;
    max-width: 300px;
    margin: 5% auto;
}

#osusume-lens .recommend-title {
    font-size: min(4.6vw, 22px);
    font-weight: 700;
    text-align: center;
    margin: 4% auto;
    color: #002768;
}

#osusume-lens .check-list {
    list-style: none;
    margin-bottom: 10%;
}

#osusume-lens .check-list li {
    font-size: min(3.6vw, 15px);
    padding-left: 8%;
    position: relative;
    margin-bottom: 8px;
}

#osusume-lens .check-icon {
    width: 1em;
    position: absolute;
    left: 0;
    top: 4px;
}

/* メリットボックス */
#osusume-lens .merit-content {
    background: #0c85d3;
    border-radius: 1em;
    padding: 9% 5% 1%;
    color: #fff;
}

/* テーマ別カラー */
#osusume-lens .product-card.rich-theme .merit-content { background: #2b4170; }
#osusume-lens .product-card.sq2-theme .merit-content { background: #13adc9; }
#osusume-lens .product-card.color-theme .merit-content { background: #ff7e6d; }

/* ==========================================================================
   もう一度診断する（リトライ）エリア
   ========================================================================== */
#result-area {
    display: none;
    padding-bottom: 50px;
}

#osusume-lens .btn-retry {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 3% 8%;
    font-size: min(3.8vw, 18px);
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
}

#osusume-lens .btn-retry:hover {
    background-color: #333;
}

#osusume-lens .merit-box {
    position: relative;
    margin: 5% auto 10%;
}

#osusume-lens .merit-title {
	position: absolute;
    top: -6%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 36%;
    max-width: 150px;
}

#osusume-lens .merit-title img {
    width: 100%;
}
#osusume-lens .rich_b{
    background-color: #cddbfb;
}
#osusume-lens .sq2_b{
    background-color: #cbf7ff;
}
#osusume-lens .color_b{
    background-color: #ffe5e2;
}

#osusume-lens .osusume-fuki{
	position: absolute;
	width: 80%;
	margin: 0 auto;
	right: 0;
	left: 0;
	top: 4%;

}

#osusume-lens #coupon-area {
    position: relative;
    z-index: 10;
    margin-top: -5% !important;
}

#osusume-lens .coupon-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.js-scroll-trigger {
    opacity: 0;
    transform: translateY(15px) scale(0.98); 
    transition: 
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.js-scroll-trigger.is-active {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}
.is-fade-in {
    transform: scale(0.98); 
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.q-card:nth-child(1).is-active { transition-delay: 0.1s; }
.q-card:nth-child(2).is-active { transition-delay: 0.2s; }
.q-card:nth-child(3).is-active { transition-delay: 0.3s; }

.header_box {
    overflow: hidden;
}

.header_box img {
    opacity: 0;
    transform: scale(1.05);
    animation: mvFadeZoom 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes mvFadeZoom {
    to {
        opacity: 1;
        transform: scale(1);
    }
}