/* CSS Custom Properties for Colors */
:root {
    --color-primary-red: #e60012;
    --color-dark-red: #bf0000;
    --color-button-red: #9e1a1f;
    --color-text-main: #333;
    --color-yellow: #fff100;
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* Background Colors */
    --bg-news: #AAE1EC;
    --bg-solution-container: #FF8181; /* ピンク */
    --bg-brand: #F7F2F2;
    --bg-install: #ECFFD2; /* 薄い緑 */
    --bg-cta: #ffffff;
}

/* Base Styles & Reset */
html { /* ディスプレイ幅480pxより大きい場合、ベースサイズ固定*/
    font-size: 13px; 
}
@media (max-width: 480px) { /* ディスプレイ幅480px以下、320pxより大きい時、ベースサイズ可変 */
    html {
        font-size: calc(100dvw / 36);
    }
}
@media (max-width: 320px) { /* ディスプレイ幅320px以下の場合、ベースサイズ固定 */
    html {
        font-size: 9px;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", sans-serif;
    background-color: #F5F5F5; /* Outside container color */
    color: var(--color-text-main);
    line-height: 1.5;
    font-size: 1.4rem; /* Base 14px */
}

* {
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Typography Helpers */
.text-primary-red {
    color: var(--color-primary-red);
}
.text-yellow {
    color: var(--color-yellow);
}

/* Container for Responsive Layout */
.lp-container {
    /*width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background-color: var(--color-white);
    box-shadow: 0 0 1.5rem rgba(0,0,0,0.1);*/
    overflow: hidden;
}

/* Image Placeholders */
/*.hero__image-placeholder,
.news-section__graphic-placeholder,
.example-item__image-placeholder,
.product-placeholder,
.feature-placeholder,
.brand-subsection__logo-placeholder,
.install-subsection__image-placeholder {
    background-color: #ddd;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    font-size: 1.4rem;
}*/

/* コンテンツ幅最大値の調整（セクション直下のinner） */
.section-inner {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/* =====================================
   第1セクション: Hero
====================================== */
.hero {
    background-image: url(images/mainvisual.webp);
    background-size: cover;
    background-position: center center;
    background-color: rgba(0,0,0,0.9);
    background-blend-mode: darken;
    padding-bottom: 3rem;
}

.hero__logo-area {
    text-align: left;
    padding: 2rem 2rem 0;
}

.hero__logo {
    display: block;
    width: 10rem;
}

.hero__title {
    margin: 0;
    padding: 0 0 350px;
    margin: -2rem -4rem 0;
    background-image: url(images/mainvisual.webp);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
}
@media (max-width: 640px) {
    .hero__title {
        padding: 0 0 54dvw;
    }
}
.hero__title img {
    margin: 0;
}

.hero__title-small {
    font-size: 3rem;
    color: var(--color-yellow);
}

.hero__title-large {
    font-size: 6rem;
    font-weight: 900;
    color: var(--color-primary-red);
}

.hero__image-placeholder {
    display: none;
    padding: 0;
    margin: 0;
}
.hero__image-placeholder p {
    padding: 0;
    margin: 0;
}
.hero__banner {
    background-color: var(--color-yellow);
    padding: 1rem 2rem;
}
.hero__banner p {
    margin: 0 auto;
    width: 100%;
    max-width: 640px;
}

/* =====================================
   第2セクション: News
====================================== */
.news-section {
    background-color: var(--bg-news);
    padding: 3rem 1.5rem 2.5rem;
}

.news-section__title {
    background-color: var(--color-white);
    color: var(--color-primary-red);
    border: 0.4rem solid var(--color-primary-red);
    border-radius: 1.8rem;
    text-align: center;
    font-size: 2rem;
    padding: 0.8rem;
    margin: 0 0 2rem 0;
    position: relative;
}

.news-section__title::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 1rem solid transparent;
    border-top-color: var(--color-primary-red);
}

.news-section__graphic-placeholder {
    margin-bottom: 1.5rem;
}

.news-section__text {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

/* =====================================
   Voice (Speech Bubbles & Avatar) Module
====================================== */
.voice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}

.voice__avatar {
    width: 5.4rem;
    height: 5.4rem;
    background-color: #FFFBDE; /* CSSで背景色を指定 */
    border-radius: 50%; /* ここで丸く切り抜く */
    overflow: hidden; /* 枠からはみ出した部分を隠す */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.voice__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の縦横比を保ちつつ枠全体を埋める */
}

.voice__bubble {
    position: relative;
    padding: 1rem 1rem 1.2rem;
    border-radius: 1rem;
    font-size: 1.3rem;
    font-weight: bold;
    flex-grow: 1;
    color: var(--color-text-main);
}

.voice__bubble.large {
    font-size: 150%;
}

.voice__bubble::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: -0.7rem;
    border-style: solid;
    border-width: 0.6rem 0.8rem 0.6rem 0;
}

/* 吹き出しのバリエーション */
.voice__bubble--border-blue {
    background-color: var(--color-white);
    border: 0.2rem solid #b2dfdb;
}
.voice__bubble--border-blue::before {
    border-color: transparent #b2dfdb transparent transparent;
    left: -0.9rem; 
}

.voice__bubble--bg-yellow {
    background-color: #FFFBDE;
}
.voice__bubble--bg-yellow::before {
    border-color: transparent #FFFBDE transparent transparent;
}

.voice__bubble--bg-orange {
    background-color: #fce1b5;
}
.voice__bubble--bg-orange::before {
    border-color: transparent #fce1b5 transparent transparent;
}

.voice__bubble--bg-white {
    background-color: var(--color-white);
}
.voice__bubble--bg-white::before {
    border-color: transparent var(--color-white) transparent transparent;
}


/* =====================================
   第3セクション: Exceptions (ベース背景白)
====================================== */
.exceptions-section {
    background-color: var(--color-white);
    padding: 3rem 1.5rem;
    text-align: center;
}

.exceptions-section__title {
    color: var(--color-dark-red);
    font-size: 2.8rem;
    margin-top: 0;
    margin-bottom: 3rem;
}

.exceptions-section__list {
    text-align: left;
    padding-left: 0;
    list-style: none;
    font-size: 1.3rem;
    margin: 0 auto;
    width: fit-content;
}

.exceptions-section__item {
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1.8em;
    font-weight: bold;
    color: var(--color-text-main);
}

/* Font Awesome Check Icon for list */
.exceptions-section__item::before {
    content: "\f14a"; /* fa-square-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--color-dark-red);
    position: absolute;
    left: 0;
    font-size: 1.4rem;
}

.exceptions-section__question {
    padding: 1rem 1rem;
    margin-top: 2rem;
}

/* =====================================
   第4セクション: Examples (垂直方向グラデーション)
====================================== */
.examples-section {
    /* グラデーション: 薄い緑 -> 薄い黄色 -> 薄いオレンジ -> 濃いオレンジ -> 赤 */
    background: linear-gradient(
        to bottom, 
        #D4FFB2 0%, 
        #FFF494 34%, 
        #FCDB82 65%, 
        #FFB6B6 100%
    );
    padding: 3rem 1.5rem 0 1.5rem;
    text-align: center;
}

.examples-section__title {
    background-color: var(--color-white);
    border: 0.3rem solid var(--color-dark-red);
    color: var(--color-dark-red);
    display: inline-block;
    padding: 0.8rem 2.5rem 1rem;
    margin: 0 0 2.5rem 0;
    font-size: 2rem;
}

.example-item {
    margin-bottom: 2.5rem;
}

.example-item__image-placeholder {
    border: 0.2rem solid var(--color-white);
}

.example-item__image-placeholder img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.example-item__image-placeholder + .voice {
    margin-top: -1rem;
}

.examples-section__alert {
    padding: 0 0 3rem;
}

/* =====================================
   第5セクション: Solution & Subsections
====================================== */
.solution-container {
    background-color: var(--bg-solution-container);
    padding: 4rem 1.5rem;
    text-align: center;
}

.solution-content {
    margin-bottom: 2rem;
    background-color: var(--color-white);
    border: 0.2rem solid var(--color-dark-red);
    padding: 2rem 1.5rem 1rem;
}

.solution-content__intro {
    background-color: var(--color-black);
    color: var(--color-white);
    display: inline-block;
    padding: 0.5rem 1.5rem;
    font-weight: bold;
    font-size: 1.4rem;
}

.solution-content__title {
    color: var(--color-dark-red);
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 2rem;
}

.solution-content__title-large {
    font-size: 4rem;
    display: block;
    margin: 0.5rem 0;
    color: var(--color-dark-red);
}

.solution-content__product-image {
    margin: 0 auto;
    padding: 0 1.5rem;
    max-width: 420px;
}

.solution-content__desc {
    font-size: 1.3rem;
    text-align: left;
    background-color: var(--color-white);
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}
.solution-content__desc strong {
    color: var(--color-primary-red);
}

.solution-content .voice {
    margin-top: -1rem;
}


/* サブセクション: ブランド */
.brand-subsection {
    background-color: var(--bg-brand);
    padding: 2rem 1.5rem 1.5rem;
    border-radius: 1rem;
    text-align: center;
    margin-top: 3rem;
}

.brand-subsection__title {
    font-size: 1.6rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.brand-subsection__logo-placeholder {
    max-width: 320px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

.brand-subsection__desc {
    font-size: 1.3rem;
    text-align: left;
}
.brand-subsection__desc strong {
    color: var(--color-primary-red);
}

/* サブセクション: インストール */
.install-subsection {
    background-color: var(--bg-install);
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    text-align: center;
}

.install-subsection__title {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 2rem;
}

.install-subsection__image-placeholder {
    border: 0.2rem solid var(--color-white);
}

/* =====================================
   第6セクション: CTA & Footer
====================================== */
.cta-section {
    background-color: var(--bg-cta);
    padding: 3rem 1.5rem 4rem;
    text-align: center;
}

.cta-section__title {
    font-size: 1.6rem;
    margin-top: 0;
    margin-bottom: 2rem;
}

.cta-section__buttons {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cta-button {
    background-color: var(--color-button-red);
    color: var(--color-white);
    text-decoration: none;
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
    font-weight: bold;
    text-align: left;
    box-shadow: 0 0.4rem 0.6rem rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

.cta-button-inner {
    width: 100%;
    /*max-width: 360px;*/
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
}

.cta-button__text {
    font-size: 2rem;
    padding-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

@media (max-width: 540px) {
    .cta-button__text {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}

.cta-button small {
    display: block;
    font-size: 1.6rem;
    font-weight: normal;
    margin-top: 0.2rem;
}

.cta-button__arrow {
    background-color: var(--color-white);
    color: var(--color-button-red);
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.3rem;
    font-size: 1.4rem; /* Icon size */
}

/* ボタン強調アニメーション ----------------------- */

.cta-button::before {
	content: "";			/* 文字は表示しないので中身無しを指定 */
	position: absolute;	/* ボタンの位置を基準に絶対値指定する */
	display: block;		/* 形式はblock */
	background: linear-gradient(to right,rgba(255,255,255,0), rgba(255,255,255,0.5));
    /* 背景色は透明から白になるグラデーション */
	width: 5rem;	/* 横幅 */
	height: 5rem;	/* 縦幅 */
	top: -8rem;	/* ボタン左上を基準に上へ60pxの位置 */
	left: -8rem;	/* ボタン左上を基準に左へ60pxの位置 */
	/* アニメーションの動作指定 */
	animation-name:shine-run;	/* アニメーション名の指定 */
	animation-delay:0s;		/* アニメーションの開始時間指定 */
	animation-duration: 3s;	/* アニメーション動作時間の指定 */
	animation-timing-function: ease-in;
	/* アニメーションの動き指定（徐々に早く）*/
	animation-iteration-count: infinite;
	/* アニメーションの無限繰り返しの指定 */
}
.cta-button:nth-child(1)::before {
	animation-delay: 0s;		/* アニメーションの開始時間指定 */
}
.cta-button:nth-child(2)::before {
	animation-delay: .25s;		/* アニメーションの開始時間指定 */
}
.cta-button:nth-child(3)::before {
	animation-delay: .5s;		/* アニメーションの開始時間指定 */
}

/* ------------------------------------
アニメーションのタイミングとボックスの
拡大率、角度、透過率の指定
------------------------------------*/
@keyframes shine-run {
    0% {
        transform: scale(0) rotate(50deg);
        /* アニメ開始時は大きさ0、50度の傾き */
        opacity: 0;
        /* アニメ開始時は全透過 */
    }
    40% {
        transform: scale(1) rotate(50deg);
        /* 40%まで進む間に大きさを等倍に。傾きは50度のまま*/
        opacity: 1;
        /* 透過しない（しっかり表示される）ように1を設定 */
    }
    60% {
        opacity: 0;
        /* 変形完了より先に全透過 */
    }

    100% {
        transform: scale(250) rotate(50deg);
        /* 最後は元の大きさの250倍になるようにする。傾きは50度のまま*/
        opacity: 0;
    }
}

.footer {
    background-color: var(--color-white);
    padding: 2rem 1.5rem 2rem;
    font-size: 1.1rem;
    color: #666;
    border-top: 0.2rem dotted rgba(0,0,0,0.2);
}

.footer__title {
    font-size: 1.4rem;
}

.footer__notes {
    list-style: disc;
    padding: 0 0 0 1.5em;
    margin: 0 0 2rem 0;
}

.footer__notes li {
    margin-bottom: 0.5rem;
}

.footer__copyright {
    text-align: right;
    margin: 0;
}