@charset "UTF-8";
/********************************************************************************

page-lp01.css　AQUA LP LP01用　css

********************************************************************************/

/*============================================================
 css変数
*============================================================*/
:root {
    --common-color-black: #171B1E;
    --common-color-blue: #2749BE;
    --common-color-gray: #878B8D;

	--common-inner-max-width-inside: 1040px;    /* 必須余白なしサイト幅 */

    --common-color-header-bg: rgba(255, 255, 255, 0.80);
    --common-color-footer-bg: #fff;
    --common-color-footer-text: var(--common-color-black);
 
    --common-color-site-bg: #fff;           /* サイト背景色 */
    --common-color-text: var(--common-color-black);           /* 基本テキスト色 */
    --common-color-main: var(--common-color-blue);           /* メイン色 */
    --common-color-sub: #fff;            /* サブ色 */
    --common-color-accent: #F7BC27;      /* アクセント色(強調色) */
    --common-color-attention: #D93838;   /* 注意色 */
    --common-color-attention-bg: #FFF5F5;   /* 注意色(背景用) */
    --common-color-link: #2784D6;        /* テキストリンク色 */
    --common-color-notice: #878B8D;      /* 注釈色 */

    --common-font-family: 'Noto Sans JP', sans-serif;
    --common-font-family-en: 'Fira Sans Condensed', sans-serif;

    --variable-size-rate: calc(100vw / 1120);       /* inner内要素用 */
    --variable-size-rate-full: calc(100vw / 1440);  /* inner外要素用 */
    --variable-size-rate-full-sp: calc(100vw / 390);       /* SP(inner外のみ)要素用 */
}

/*============================================================
 パーツ
*============================================================*/
/* ボタン 
---------------------------------------- */
/* ベース */
.page-lp01 .parts-btn {
    --size: 1px;
}
.page-lp01 .parts-btn a {
    /* width: calc(360 * var(--size)); */
    /* height: calc(80 * var(--size)); */
    /* padding: 0 calc(4 * var(--size)); */
    width: clamp(320px, calc(360 * var(--size)), calc(360 * var(--size)));
    height: clamp(64px, calc(80 * var(--size)), calc(80 * var(--size)));
    padding: 0 clamp(4px, calc(4 * var(--size)), calc(4 * var(--size)));
border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    transition: all 300ms 0s ease-out;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
}
.page-lp01 .parts-btn a .label {
    flex: 1;
    font-weight: bold;
    font-size: clamp(20px, calc(24 * var(--size)), calc(24 * var(--size)));
    /* font-size: calc(24 * var(--size)); */
    line-height: 100%;
    text-align: center;
}
.page-lp01 .parts-btn a::after {
    content: "";
    display: block;
    width: clamp(56px, calc(72 * var(--size)), calc(72 * var(--size)));
    /* width: calc(72 * var(--size)); */
    height: auto;
    aspect-ratio: 1;
    border-radius: 100px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: clamp(32px, calc(32 * var(--size)), calc(32 * var(--size)));
    /* background-size: calc(32 * var(--size)); */
}
/* 黒ボタン */
.page-lp01 .parts-btn[data-color="black"] a {
    background-color: var(--common-color-black);
    color: #fff;
}
.page-lp01 .parts-btn[data-color="black"] a::after {
    background-color: #fff;
    background-image: url(../images/parts/icon-arrow-r-black.svg);
}
.page-lp01 .parts-btn[data-color="black"] a:hover {
    background-color: #41494E;
    color: #fff;
}
/* 白ボタン */
.page-lp01 .parts-btn[data-color="white"] a {
    background-color: #fff;
    color: var(--common-color-black);
}
.page-lp01 .parts-btn[data-color="white"] a::after {
    background-color: var(--common-color-black);
    background-image: url(../images/parts/icon-arrow-r-white.svg);
}
.page-lp01 .parts-btn[data-color="white"] a:hover {
    background-color: #DFE6EB;
}
/* サイズ可変 */
.page-lp01 .parts-btn[data-variable] {
    --size: var(--variable-size-rate-full);
}



/*============================================================
 ヘッダー
*============================================================*/
.page-lp01 #fixed-header .gnav .parts-btn a {
    width: 264px;
    height: 56px;
    padding: 0 4px;
}
.page-lp01 #fixed-header .gnav .parts-btn a .label {
    font-size: 20px;
}
.page-lp01 #fixed-header .gnav .parts-btn a::after {
    width: 48px;
    height: 48px;
    background-size: 24px;
}

/*============================================================
 フッター
*============================================================*/

/*============================================================
 CTA
*============================================================*/
/* CTA　資料ダウンロード 
---------------------------------------- */
.page-lp01 .cta-document {
    padding: 80px 0;
    border-radius: 0 160px 0 0;
    background-color: var(--common-color-main);
    background-image: url(../images/lp01/cta-document-bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(760 * var(--variable-size-rate-full)) auto;
    background-blend-mode: soft-light;
    color: #fff;
    position: relative;
}
.page-lp01 .cta-document .inner {
    max-width: fit-content;
}
.page-lp01 .cta-document .sec-title-animation {
    margin-bottom: 16px;
}
.page-lp01 .cta-document .cta-content {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 0 80px;
}
.page-lp01 .cta-document .cta-content .info .catch {
    font-weight: 900;
    font-size: max(32px, calc(48 * var(--variable-size-rate-full)));
    line-height: 140%;
}
.page-lp01 .cta-document .cta-content .info .catch.catch-image {
    display: flex;
    margin: max(24px, calc(24 * var(--variable-size-rate-full))) 0px;
}
.page-lp01 .cta-document .cta-content .info .catch img {
    width: max(128px, calc(192 * var(--variable-size-rate-full)));
}

/*============================================================
 見出し
*============================================================*/
.page-lp01 .sec-title-animation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    --animation-color: var(--common-color-text);
}
.page-lp01 .sec-title-animation[data-color="white"] {
    --animation-color: #fff;
    color: #fff;
}
.page-lp01 .sec-title-animation .sec-title-en {
    --bar-size: 120px;

    font-family: "Open Sans", sans-serif;
    font-size: 24px;
    line-height: 100%;
    display: flex;
    align-items: center;
    gap: 0 16px;
    position: relative;
}
.page-lp01 .sec-title-animation .sec-title-en::before {
    content: "";
    display: block;
    width: var(--bar-size);
    height: 1px;
    background-color: var(--animation-color);
}
.page-lp01 .sec-title-animation .sec-title-en::after {
    content: "";
    display: block;
    width: 2px;
    height: 2px;
    background-color: var(--animation-color);
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    opacity: 0;

    animation-name: sec-title-en-bar;
    animation-duration: 2.8s;
    animation-delay: 0s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}
@keyframes sec-title-en-bar {
    0%, 1% {
        width: 2px;
        height: 2px;
        left: 0px;
        opacity: 0;
    }
    14% {
        width: 2px;
        height: 2px;
        left: 0px;
        opacity: 1;
    }
    57%, 71% {
        width: 12px;
        height: 12px;
        left: calc(var(--bar-size) - 12px);
        opacity: 1;
    }
    92%, 100% {
        width: 12px;
        height: 12px;
        left: calc(var(--bar-size) - 12px);
        opacity: 0;
    }
}
/* // アフターディレイ
animation-delay: 400ms;
// 次に変更: "Variant2";
// Animate: スマートアニメート;
animation-timing-function: ease-out;
animation-duration: 1200ms;


// アフターディレイ
animation-delay: 400ms;
// 次に変更: "Variant3";
// Animate: スマートアニメート;
animation-timing-function: ease-out;
animation-duration: 600ms;


// アフターディレイ
animation-delay: 200ms;
// 次に変更: "Default";
// Animate: 即時;
animation-duration: 0ms; */
.page-lp01 .sec-title-animation .sec-title-ja {
    font-size: 20px;
    font-weight: 500;
    line-height: 100%;  
}


/*============================================================
 LP01ページ
*============================================================*/
/* メインビジュアル
---------------------------------------- */
#page-lp01 #mainvisual {
    margin-bottom: 120px;
    position: relative;
}
#page-lp01 #mainvisual .mainvisual-inner {
    display: flex;
    gap: 40px 0;
}
#page-lp01 #mainvisual .mainvisual-inner > * {
    flex: 1;
}
#page-lp01 #mainvisual .info {
    z-index: 1;
}
#page-lp01 #mainvisual .info .info-inner {
    width: fit-content;
    padding: calc(80 * var(--variable-size-rate-full)) calc(48 * var(--variable-size-rate-full)) 0 0;
    margin-left: auto;
}
#page-lp01 #mainvisual .info .logo {
    width: calc(192 * var(--variable-size-rate-full));
    margin-bottom: calc(40 * var(--variable-size-rate-full));
}
#page-lp01 #mainvisual .info .catch {
    font-size: calc(56 * var(--variable-size-rate-full));
    font-style: normal;
    font-weight: 900;
    line-height: 160%;
    margin-bottom: calc(40 * var(--variable-size-rate-full));
}
#page-lp01 #mainvisual .info .catch-en {
    font-family: "Open Sans", sans-serif;
    font-size: calc(23 * var(--variable-size-rate-full));
    line-height: 100%;
    margin-bottom: calc(56 * var(--variable-size-rate-full));
    color: #878B8D;
}
#page-lp01 #mainvisual .info .parts-btn {
    margin-bottom: calc(56 * var(--variable-size-rate-full));
}
#page-lp01 #mainvisual .info .results {
    display: flex;
    align-items: start;
    gap: calc(32 * var(--variable-size-rate-full));
}
#page-lp01 #mainvisual .info .results .results-info .results-info-01 {    
    font-weight: bold;
    font-size: calc(16 * var(--variable-size-rate-full));
    line-height: 100%;
    letter-spacing: -1.92px;
    margin-bottom: calc(8 * var(--variable-size-rate-full));
}
#page-lp01 #mainvisual .info .results .results-info .results-info-02 {
    font-weight: bold;
    font-size: calc(32 * var(--variable-size-rate-full));
    line-height: 100%;
    letter-spacing: 1.92px;
    margin-bottom: calc(8 * var(--variable-size-rate-full));
}
#page-lp01 #mainvisual .info .results .results-info .results-info-03 {
    font-weight: 500;
    font-size: calc(22 * var(--variable-size-rate-full));
    line-height: 100%; 
    display: flex;
    gap: 8px;
    align-items: end;
}
#page-lp01 #mainvisual .info .results .results-info .results-info-03 img {
    width: calc(100 * var(--variable-size-rate-full));
}
#page-lp01 #mainvisual .info .results .results-num .num {  
    font-style: italic;
    font-weight: 600;
    font-size: calc(120 * var(--variable-size-rate-full));
    line-height: 70%;
    letter-spacing: max(-6px, calc(-6 * var(--variable-size-rate-full)));
    color: var(--common-color-main);
    padding-right: calc(48 * var(--variable-size-rate-full));
    position: relative;
}
#page-lp01 #mainvisual .info .results .results-num .num .comma {
    font-style: italic;
    font-size: calc(56 * var(--variable-size-rate-full));
}
#page-lp01 #mainvisual .info .results .results-num .num::after {
    content: "";
    display: block;
    width: calc(76 * var(--variable-size-rate-full));
    height: calc(44 * var(--variable-size-rate-full));
    background-image: url(../images/lp01/mainvisual-result.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(76 * var(--variable-size-rate-full)) auto;
    position: absolute;
    bottom: calc(20 * var(--variable-size-rate-full));
    right: 0;
}
#page-lp01 #mainvisual .image {
    position: relative;
}
#page-lp01 #mainvisual .image picture img {
    max-width: unset;
    width: 100%;
    border-radius: 0 0 0 160px;
}
#page-lp01 #mainvisual .circle {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    mix-blend-mode: hard-light;
    width: max(280px,calc(480 * var(--variable-size-rate-full)));
}
#page-lp01 #mainvisual .circle img {
    max-width: unset;
    width: 100%;
}

/* scrollアニメーション */
#page-lp01 #mainvisual .scroll {
    position: absolute;
    bottom: calc(160 * var(--variable-size-rate-full));
    right: calc(40 * var(--variable-size-rate-full));
}
#page-lp01 #mainvisual .scroll .scroll-bar {
    padding-left: 5px;
    display: flex;
    align-items: stretch;
    gap: 5px;
    position: relative;
}
#page-lp01 #mainvisual .scroll .scroll-bar .bar-title {
    writing-mode: vertical-rl;
}
#page-lp01 #mainvisual .scroll .scroll-bar::before {
    content: "";
    display: block;
    width: 2px;
    height: 120px;
    background-color: var(--common-color-text);
}
#page-lp01 #mainvisual .scroll .scroll-bar::after {
    content: "";
    display: block;
    width: 2px;
    height: 2px;
    background-color: var(--common-color-text);
    border-radius: 100%;
    position: absolute;
    left: 6px;
    top: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);

    animation-name: scroll-bar;
    animation-duration: 2.8s;
    /* animation-delay: 0.4s; */
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}
@keyframes scroll-bar {
    0%, 14% {
        width: 2px;
        height: 2px;
        top: 0px;
        opacity: 1;
    }
    57%, 71% {
        width: 12px;
        height: 12px;
        top: 108px;
        opacity: 1;
    }
    92%, 100% {
        width: 12px;
        height: 12px;
        top: 108px;
        opacity: 0;
    }
}

/* セクション共通
---------------------------------------- */
#page-lp01 .section {
}

/* セクション　コインランドリー経営での収益化
---------------------------------------- */
#page-lp01 #sec-monetization {
    margin-bottom: 120px;
}
#page-lp01 #sec-monetization .sec-catch {
    font-weight: bold;
    font-size: 40px;
    line-height: 150%;
    text-align: center;
    margin-bottom: 56px;
}
#page-lp01 #sec-monetization .sec-catch .line-01 {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 12px;
}
/* スライドアニメーション */
#page-lp01 #sec-monetization .animation-loop {
    width: 100%;
    overflow:hidden;
}
#page-lp01 #sec-monetization .animation-loop .loop-list {
    width: fit-content;
    display: flex;
}
#page-lp01 #sec-monetization .animation-loop .loop-list .item {
    width: 3170px;
    margin: 0 20px;
}
#page-lp01 #sec-monetization .animation-loop .loop-list .item:first-child {
    animation: loop 80s -40s linear infinite;
}
#page-lp01 #sec-monetization .animation-loop .loop-list .item:last-child {
    animation: loop2 80s linear infinite;
}
@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}


/* セクション　大型・小型店の収益例
---------------------------------------- */
#page-lp01 #sec-model-case {
    background-image: url(../images/lp01/model-case-bg.svg);
    background-repeat: no-repeat;
    background-position: top 284px center;
    background-size: 1440px auto;
    margin-bottom: 120px;
}
#page-lp01 #sec-model-case .sec-title-animation {
    margin-bottom: 48px;
}
#page-lp01 #sec-model-case .block-case-list {
    max-width: 888px;
    background-color: #fff;
    border-radius: 40px;
    padding: 56px;    
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
    margin: 0 auto;
}
#page-lp01 #sec-model-case .block-case-list .case-list {
    display: flex;
    flex-direction: column;
    gap: 80px 0;
    margin-bottom: 40px;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case {
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .case-header {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .case-header .case-num {
    --size: 80px;
    width: var(--size);
    height: var(--size);
    font-style: italic;
    font-size: 64px;
    line-height: var(--size);
    color: var(--common-color-main);
    text-align: center;
    position: relative;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .case-header .case-num::before {
    content: "";
    display: block;
    width: var(--size);
    height: var(--size);
    border: 8px solid var(--common-color-main);
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .case-header .case-num::after {
    content: "CASE";
    display: block;
    width: var(--size);
    height: auto;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 100%;
    color: #A8B2D5;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .case-header .case-title {
    flex: 1;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .case-header .case-title .title {
    font-weight: bold;
    font-size: 24px;
    line-height: 150%;
    margin-bottom: 12px;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .case-header .case-title .meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .case-header .case-title .meta-list .meta {
    height: 24px;
    border: 1px solid #878B8D;
    border-radius: 100px;
    padding: 3px 8px;
    font-size: 14px;
    line-height: 100%;
    color: #878B8D;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .image {
    margin-bottom: 32px;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .gain {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 12px;
    background-color: var(--common-color-main);
    border-radius: 16px;
    color: #fff;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .gain::before {
    content: "年間利益";
    display: inline-block;
    font-weight: bold;
    font-size: 24px;
    line-height: 100%;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .gain span {
    font-weight: bold;
    font-size: 40px;
    line-height: 30px;
    display: flex;
    align-items: start;
    gap: 4px;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .gain span::before,
#page-lp01 #sec-model-case .block-case-list .case-list .case .gain span::after {
    display: inline-block;
    font-family: var(--common-font-family);
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 100%;
    padding-top: 12px;
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .gain span::before {
    content: "約";
}
#page-lp01 #sec-model-case .block-case-list .case-list .case .gain span::after {
    content: "万円";
}

/* セクション　AQUAコインランドリーオーナーの声
---------------------------------------- */
#page-lp01 #sec-owner-voice {
    margin-bottom: 120px;
}
#page-lp01 #sec-owner-voice .sec-title-animation {
    margin-bottom: 48px;
}
#page-lp01 #sec-owner-voice .owner-list {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 48px;
}
#page-lp01 #sec-owner-voice .owner-list .owner {
    position: relative;
}
#page-lp01 #sec-owner-voice .owner-list .owner:nth-child(even) {
    margin-top: 80px;
}
#page-lp01 #sec-owner-voice .owner-list .owner .info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    top: 40px;
    left: -16px;
}
#page-lp01 #sec-owner-voice .owner-list .owner .info > * {
    width: fit-content;
    padding: 4px 8px;
    background-color: var(--common-color-main);
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
}
#page-lp01 #sec-owner-voice .owner-list .owner .image img {
    border-radius: 32px; 
}
#page-lp01 #sec-owner-voice .owner-list .owner .voice{
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    bottom: 56px;
    right: -24px;
}
#page-lp01 #sec-owner-voice .owner-list .owner .voice > * {
    width: fit-content;
    padding: 0 8px;
    background-color: var(--common-color-black);
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    line-height: 160%;
}

/* セクション　なぜコインランドリー経営なのか？
---------------------------------------- */
#page-lp01 #sec-why-coin-laundry {
    margin: 120px 0;
}
#page-lp01 #sec-why-coin-laundry .sec-title-animation {
    margin-bottom: 72px;
}
#page-lp01 #sec-why-coin-laundry .block-intro {
    display: flex;
    gap: 72px;
    margin-bottom: 88px;
}
#page-lp01 #sec-why-coin-laundry .block-intro .info {
    flex: 1;
}
#page-lp01 #sec-why-coin-laundry .block-intro .info .block-title {
    font-weight: 900;
    font-size: 48px;
    line-height: 160%;
    margin-bottom: 40px;
}
#page-lp01 #sec-why-coin-laundry .block-intro .info .block-title .small {
    display: inline-block;
    font-weight: 500;
    font-size: 32px;
    line-height: 150%;
    margin-bottom: 16px;
}
#page-lp01 #sec-why-coin-laundry .block-intro .info .block-title .color {
    color: var(--common-color-main);
}
#page-lp01 #sec-why-coin-laundry .block-intro .image {
    width: 440px;
}

#page-lp01 #sec-why-coin-laundry .block-fact {
    position: relative;
    overflow-x: clip;
}
#page-lp01 #sec-why-coin-laundry .block-fact:before {
    content: "";
    display: block;
    width: 100%;
    height: 960px;
    position: absolute;
    top: 367px;
    left: max(80px, calc(50% - 640px));
    z-index: -1;
    background-image: url(../images/lp01/why-coin-laundry-fact-bg.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    border-radius: 160px 0 0 160px;
}
#page-lp01 #sec-why-coin-laundry .block-fact .fact-list {
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 0 auto;
}
#page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact {
    padding: 32px;
    border-radius: 40px;
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
}
#page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .num {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0.32px;
    color: var(--common-color-main);
    margin-bottom: 8px;
}
#page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .title {
    font-weight: bold;
    font-size: 24px;
    line-height: 150%;
    margin-bottom: 16px;
}
#page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .lead {
    margin-bottom: 40px;
}
#page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .image {
    text-align: center;
}
#page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .notice {
    text-align: center;
    margin-top: 24px;
}
#page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .needs-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
#page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .needs-list .needs {
    width: 192px;
    height: auto;
    aspect-ratio: 1;
    padding-top: 44px;
    border-radius: 16px;
    background-color: var(--common-color-main);
    /* font-family: "Inter", sans-serif; */
    text-align: center;
    color: #fff;
}
#page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .needs-list .needs:nth-child(even) {
    background-color: #41538E;
}
#page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .needs-list .needs .large {
    display: inline-block;
    font-weight: bold;
    font-size: 24px;
    line-height: 150%;
    margin: 4px 0;
}
#page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .needs-list .needs:nth-child(2) .large {
    font-size: 22px;
}

/* セクション　コインランドリー開業に役立つ優遇制度
---------------------------------------- */
#page-lp01 #sec-public-system {
    padding: 80px 0 280px 0;
    background-color: #E4EFFF;
}
#page-lp01 #sec-public-system + .sec-cta {
    margin-top: -160px;
}
#page-lp01 #sec-public-system .sec-title {
    font-weight: bold;
    font-size: 20px;
    line-height: 150%;
    text-align: center;
    margin-bottom: 80px;
}
#page-lp01 #sec-public-system .info-list {
    display: flex;
    flex-direction: column;
    gap: 120px;
    width: fit-content;
    margin: 0 auto;
}
#page-lp01 #sec-public-system .info-list .info {    
}
#page-lp01 #sec-public-system .info-list .info .title {
    font-weight: bold;
    font-size: 32px;
    line-height: 150%;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}
#page-lp01 #sec-public-system .info-list .info .title::before {
    content: "";
    display: block;
    width: 120px;
    height: 120px;
    /* background-image: url(../images/lp01/public-system-icon-circle.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120px auto; */
    border: solid 20px #BBD6F7;
    border-radius: 100%;
    position: absolute;
    top: -36px;
    left: -56px;
    z-index: -1;
    /* #aed0ff */
}
#page-lp01 #sec-public-system .info-list .info .system-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    z-index: 1;
}
#page-lp01 #sec-public-system .info-list .info .system-list .system {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 16px;
    background-color: var(--common-color-main);
}
#page-lp01 #sec-public-system .info-list .info .system-list .system span {
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    color: #fff;
}
#page-lp01 #sec-public-system .info-list .info .lead a {
    color: var(--common-color-main);
    text-decoration-line: underline;
}

/* セクション　AQUAコインランドリー経営のメリット
---------------------------------------- */
#page-lp01 #sec-why-aqua {
    margin: 120px 0 80px 0;
}
#page-lp01 #sec-why-aqua .sec-title-animation {
    margin-bottom: 120px;
}
#page-lp01 #sec-why-aqua .merit-list {
    display: flex;
    flex-direction: column;
    gap: 104px;
}
#page-lp01 #sec-why-aqua .merit-list .merit {
    display: flex;
    gap: 64px;
}
#page-lp01 #sec-why-aqua .merit-list .merit:nth-child(odd) {
    flex-direction: row-reverse;
}
#page-lp01 #sec-why-aqua .merit-list .merit .info {
    flex: 1;
}
#page-lp01 #sec-why-aqua .merit-list .merit .info .title {
    font-weight: bold;
    font-size: 32px;
    line-height: 150%;
    margin-bottom: 32px;
}
#page-lp01 #sec-why-aqua .merit-list .merit .image {
}

/* セクション　GOOD DESIGN AWARD 2022
---------------------------------------- */
#page-lp01 #sec-good-design-award {
}
#page-lp01 #sec-good-design-award .sec-title {
    text-align: center;
    margin-bottom: 32px;
}
#page-lp01 #sec-good-design-award .lead {
    width: fit-content;
    margin: 0 auto 56px auto;
}
#page-lp01 #sec-good-design-award .image img {
    width: 100%;
    height: 100%;
}
#page-lp01 #sec-good-design-award .image img {
    max-width: unset;
    width: 100%;
    height: 720px;
    object-fit: cover;
    border-radius: 0 0 160px 0;
}
#page-lp01 #sec-good-design-award + #sec-superior-series {
    margin-top: -160px;
}

/* セクション　Superior series の機能
---------------------------------------- */
#page-lp01 #sec-superior-series {
    padding: 280px 0 120px 0;
    background: linear-gradient(180deg, #2A3034 0%, #060608 100%);
    margin-bottom: 120px;
}
#page-lp01 #sec-superior-series .sec-title {
    font-size: 16px;
    line-height: 150%;
    color: #fff;
    text-align: center;
    margin-bottom: 48px;
}
#page-lp01 #sec-superior-series .sec-title span {
    font-weight: 500;
}
#page-lp01 #sec-superior-series .feature-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    text-align: center;
    color: #fff;
}
#page-lp01 #sec-superior-series .feature-list .feature {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#page-lp01 #sec-superior-series .feature-list .feature .title {
    font-weight: bold;
    font-size: 20px;
    line-height: 150%;   
}
#page-lp01 #sec-superior-series .feature-list .feature .lead {
    font-size: 14px;
    line-height: 180%;
}
#page-lp01 #sec-superior-series .feature-list .safety-feature {
    justify-content: center;
    align-items: center;
}
#page-lp01 #sec-superior-series .feature-list .safety-feature .title {
    font-weight: bold;
    font-size: 16px;
    line-height: 150%;
}
#page-lp01 #sec-superior-series .feature-list .safety-feature .safety-feature-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
#page-lp01 #sec-superior-series .feature-list .safety-feature .safety-feature-list .item {
    width: 72px;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #fff;
    border-radius: 12px;
    font-weight: 500;
    font-size: 13px;
    line-height: 120%; 
}
#page-lp01 #sec-superior-series .feature-list .safety-feature .jia {
    display: flex;
    gap: 12px;
    width: fit-content;
}
#page-lp01 #sec-superior-series .feature-list .safety-feature .jia .info {
    font-size: 12px;
    line-height: 150%;
    text-align: left;
}

/* セクション　運営開始までのフロー
---------------------------------------- */
#page-lp01 #sec-workflow {
    margin-bottom: 200px;
}
#page-lp01 #sec-workflow .sec-title-animation {
    margin-bottom: 64px;
}

/* セクション　よくある質問
---------------------------------------- */
#page-lp01 #sec-faq {
    margin-bottom: 120px;
}
#page-lp01 #sec-faq .sec-title-animation {
    margin-bottom: 64px;
}



/*============================================================
 〇〇〇ページ
*============================================================*/
/* 
---------------------------------------- */


/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1119px) {
    /*============================================================
     パーツ
    *============================================================*/
    /* ボタン 
    ---------------------------------------- */
    .page-lp01 .parts-btn a {
        /* width: max(320px, calc(360 * var(--size))); */
        /* height: max(64px, calc(80 * var(--size))); */
        /* padding: 0 max(4px, calc(4 * var(--size))); */
    }
    .page-lp01 .parts-btn a .label {
        /* font-size: max(20px, calc(24 * var(--size))); */
    }
    .page-lp01 .parts-btn a::after {
        /* width: max(56px, calc(72 * var(--size))); */
        /* background-size: max(32px, calc(32 * var(--size))); */
    }

    /*============================================================
     CTA
    *============================================================*/
    /* CTA　資料ダウンロード 
    ---------------------------------------- */
    .page-lp01 .cta-document .cta-content {
        gap: 0 min(40px, calc(80 * var(--variable-size-rate-full)));
    }

    /*============================================================
     メインビジュアル
    *============================================================*/
    /* 
    ---------------------------------------- */
    #page-lp01 #mainvisual  {
    }

    /*============================================================
     LP01ページ
    *============================================================*/
    /* セクション　AQUAコインランドリーオーナーの声
    ---------------------------------------- */
    #page-lp01 #sec-owner-voice .owner-list {
        gap: min(48px, calc(48 * var(--variable-size-rate)));
    }
    #page-lp01 #sec-owner-voice .owner-list .owner .info{
        top: min(40px, calc(40 * var(--variable-size-rate)));
    }
    #page-lp01 #sec-owner-voice .owner-list .owner .voice{
        bottom: min(56px, calc(56 * var(--variable-size-rate)));
    }

    /* セクション　なぜコインランドリー経営なのか？
    ---------------------------------------- */
    #page-lp01 #sec-why-coin-laundry .block-intro {
        gap: min(72px, calc(72 * var(--variable-size-rate)));
    }
    #page-lp01 #sec-why-coin-laundry .block-intro .info .block-title {
        font-size: min(48px, calc(48 * var(--variable-size-rate)));
    }
    #page-lp01 #sec-why-coin-laundry .block-intro .info .block-title .small {
        font-size: min(32px, calc(32 * var(--variable-size-rate)));
    }
    #page-lp01 #sec-why-coin-laundry .block-intro .image {
        width: min(440px, calc(440 * var(--variable-size-rate)));
    }
    #page-lp01 #sec-why-coin-laundry .block-fact:before {
        left: max(40px, calc(50% - 640px));
    }
    #page-lp01 #sec-why-coin-laundry .block-fact .fact-list {
        max-width: min(880px, calc(880 * var(--variable-size-rate)));
    }
    
    /* セクション　コインランドリー開業に役立つ優遇制度
    ---------------------------------------- */
    #page-lp01 #sec-public-system .info-list {
        width: min(866px, calc(866 * var(--variable-size-rate)));
    }
    
    /* セクション　AQUAコインランドリー経営のメリット
    ---------------------------------------- */
    #page-lp01 #sec-why-aqua .merit-list .merit .image {
        width: min(376px, calc(376 * var(--variable-size-rate)));
    }


    /*============================================================
     セクション
    *============================================================*/
    /* 
    ---------------------------------------- */
    #page-lp01 #sec-セクション名 {
    }

}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
    /*============================================================
     パーツ
    *============================================================*/
    /* アコーディオン
    ---------------------------------------- */
    
    /*============================================================
     CTA
    *============================================================*/
    /* CTA　資料ダウンロード 
    ---------------------------------------- */
    .page-lp01 .cta-document {
        border-radius: 0 80px 0 0;
        background-size: calc(480 * var(--variable-size-rate-full-sp)) auto;
    }
    .page-lp01 .cta-document .sec-title-animation {
        margin-bottom: 32px;
    }    
    .page-lp01 .cta-document .cta-content {
        flex-direction: column;
        align-items: center;
        gap: 56px;
    }
    .page-lp01 .cta-document .cta-content .info .catch {
        font-size: max(32px, calc(32 * var(--variable-size-rate-full-sp)));
    }
    .page-lp01 .cta-document .cta-content .info .catch.catch-image {
        margin: max(16px, calc(16 * var(--variable-size-rate-full-sp))) 0px;
    }
    .page-lp01 .cta-document .cta-content .info .catch img {
        width: max(128px, calc(128 * var(--variable-size-rate-full-sp)));
    }
    
    /*============================================================
     見出し
    *============================================================*/
    .page-lp01 .sec-title-animation {
        flex-direction: column;
        align-items: start;
        gap: 16px;
    }
    .page-lp01 .sec-title-animation .sec-title-en {
        --bar-size: 56px;
    }
    .page-lp01 .sec-title-animation .sec-title-ja {
        font-size: 16px;
    }
    
    /*============================================================
     ヘッダー
    *============================================================*/
    .page-lp01 #fixed-header .gnav .parts-btn a {
        width: 144px;
        height: 48px;
        padding: 0 16px;
    }
    .page-lp01 #fixed-header .gnav .parts-btn a .label {
        font-size: 14px;
    }
    .page-lp01 #fixed-header .gnav .parts-btn a::after {
        display: none;
    }

    /*============================================================
     LP01ページ
    *============================================================*/
    /* メインビジュアル
    ---------------------------------------- */
    #page-lp01 #mainvisual  {
        margin-bottom: 88px;
    }
    #page-lp01 #mainvisual .mainvisual-inner {
        flex-direction: column-reverse;
    }
    #page-lp01 #mainvisual .info .info-inner {
        padding: 0;
        margin: 0 auto;
    }
    #page-lp01 #mainvisual .info .logo {
        display: none;
    }
    #page-lp01 #mainvisual .info .catch {
        font-size: calc(32 * var(--variable-size-rate-full-sp));
        margin-bottom: calc(24 * var(--variable-size-rate-full-sp));
    }
    #page-lp01 #mainvisual .info .catch-en {
        font-size: calc(14 * var(--variable-size-rate-full-sp));
        margin-bottom: calc(24 * var(--variable-size-rate-full-sp));
    }
    #page-lp01 #mainvisual .info .parts-btn {
        margin-bottom: calc(40 * var(--variable-size-rate-full-sp));
    }
    #page-lp01 #mainvisual .info .results {
        flex-direction: column;
        align-items: center;
        gap: calc(16 * var(--variable-size-rate-full-sp));
    }
    #page-lp01 #mainvisual .info .results .results-info .results-info-01 {    
        font-size: calc(16 * var(--variable-size-rate-full-sp));
        margin-bottom: calc(8 * var(--variable-size-rate-full-sp));
    }
    #page-lp01 #mainvisual .info .results .results-info .results-info-02 {
        font-size: calc(32 * var(--variable-size-rate-full-sp));
        margin-bottom: calc(16 * var(--variable-size-rate-full-sp));
    }
    #page-lp01 #mainvisual .info .results .results-info .results-info-03 {
        font-size: calc(22 * var(--variable-size-rate-full-sp));
    }
    #page-lp01 #mainvisual .info .results .results-info .results-info-03 img {
        width: calc(100 * var(--variable-size-rate-full-sp));
    }    
    #page-lp01 #mainvisual .info .results .results-num .num {  
        font-size: calc(120 * var(--variable-size-rate-full-sp));
        line-height: 80%;
        letter-spacing: max(-6px, calc(-6 * var(--variable-size-rate-full-sp)));
        padding-right: calc(48 * var(--variable-size-rate-full-sp));
    }
    #page-lp01 #mainvisual .info .results .results-num .num .comma {
        font-size: calc(56 * var(--variable-size-rate-full-sp));
    }
    #page-lp01 #mainvisual .info .results .results-num .num::after {
        width: calc(76 * var(--variable-size-rate-full-sp));
        height: calc(44 * var(--variable-size-rate-full-sp));
        background-size: calc(76 * var(--variable-size-rate-full-sp)) auto;
        bottom: calc(20 * var(--variable-size-rate-full-sp));
    }
    #page-lp01 #mainvisual .image picture img {
        max-width: unset;
        width: 100%;
        border-radius: 0 0 0 120px;
    }
    #page-lp01 #mainvisual .circle {
        top: 100%;
        left: 50%;
        width: max(280px,calc(280 * var(--variable-size-rate-full-sp)));

    }
    /* scrollアニメーション */
    #page-lp01 #mainvisual .scroll {
        display: none;
    }

    /* セクション共通
    ---------------------------------------- */
    #page-lp01 .section {
    }

    /* セクション　コインランドリー経営での収益化
    ---------------------------------------- */
    #page-lp01 #sec-monetization {
        margin-bottom: 88px;
    }
    #page-lp01 #sec-monetization .sec-catch {
        font-size: 32px;
    }
    #page-lp01 #sec-monetization .sec-catch .line-01 {
        gap: 16px;

        font-weight: bold;
        font-size: 24px;
        line-height: 150%;
    }
    #page-lp01 #sec-monetization .sec-catch .line-01 img {
        width: 98px;
    }
        
    /* セクション　大型・小型店の収益例
    ---------------------------------------- */
    #page-lp01 #sec-model-case {
        background-image: url(../images/lp01/sp-model-case-bg.svg);
        background-position: top 136px center;
        background-size: 514px auto;
        margin-bottom: 88px;
    }
    #page-lp01 #sec-model-case .sec-title-animation {
        margin-bottom: 32px;
    }
    #page-lp01 #sec-model-case .block-case-list {
        border-radius: 40px;
        padding: 24px 16px;
    }
    #page-lp01 #sec-model-case .block-case-list .case-list {
        gap: 64px 0;
    }
    #page-lp01 #sec-model-case .block-case-list .case-list .case .case-header {
        gap: 16px;
        margin-bottom: 24px;
    }
    #page-lp01 #sec-model-case .block-case-list .case-list .case .case-header .case-num {
        --size: 56px;
        font-size: 40px;
    }
    #page-lp01 #sec-model-case .block-case-list .case-list .case .case-header .case-num::after {
        font-size: 12px;
    }
    #page-lp01 #sec-model-case .block-case-list .case-list .case .case-header .case-title .title {
        font-size: 20px;
    }
    #page-lp01 #sec-model-case .block-case-list .case-list .case .image {
        width: calc(100vw - var(--inner-padding) - 16px - ((100vw - 528px) / 2));
        overflow-x: auto;
        padding-bottom: 16px;
        margin-bottom: 8px;
    }
    @media screen and (max-width: 527px) {
        #page-lp01 #sec-model-case .block-case-list .case-list .case .image {
            width: calc(100vw - var(--inner-padding) - 16px);
        }
    }
    #page-lp01 #sec-model-case .block-case-list .case-list .case .image img {
        width: 544px;
        max-width: unset;
    }
    #page-lp01 #sec-model-case .block-case-list .notice {
        font-size: 12px;
    }
    
    /* セクション　AQUAコインランドリーオーナーの声
    ---------------------------------------- */
    #page-lp01 #sec-owner-voice {
        margin-bottom: 88px;
    }
    #page-lp01 #sec-owner-voice .sec-title-animation {
        margin-bottom: 32px;
    }
    #page-lp01 #sec-owner-voice .owner-list {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    #page-lp01 #sec-owner-voice .owner-list .owner:nth-child(even) {
        margin-top: unset;
    }
    #page-lp01 #sec-owner-voice .owner-list .owner .info {
        gap: 4px;
        top: 40px;
    }
    #page-lp01 #sec-owner-voice .owner-list .owner .voice{
        right: -16px;
    }

    /* セクション　なぜコインランドリー経営なのか？
    ---------------------------------------- */
    #page-lp01 #sec-why-coin-laundry {
        margin: 88px 0;
    }
    #page-lp01 #sec-why-coin-laundry .sec-title-animation {
        margin-bottom: 56px;
    }
    #page-lp01 #sec-why-coin-laundry .block-intro {
        flex-direction: column;
        align-items: center;
        gap: 56px;
        margin-bottom: 64px;
    }
    #page-lp01 #sec-why-coin-laundry .block-intro .info .block-title {
        font-size: 32px;
        margin-bottom: 32px;
    }
    #page-lp01 #sec-why-coin-laundry .block-intro .info .block-title .small {
        font-size: 20px;
    }
    #page-lp01 #sec-why-coin-laundry .block-intro .image {
        width: 100%;
    }
    #page-lp01 #sec-why-coin-laundry .block-fact:before {
        display: none;
    }
    #page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact {
        padding: 24px 16px;
        border-radius: 32px;
    }
    #page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .lead {
        margin-bottom: 32px;
    }
    #page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .needs-list .needs {
        width: calc((100% - 8px) / 2);
        font-size: min(16px, calc(13 * var(--variable-size-rate-full-sp)));
        line-height: 180%;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .needs-list .needs br {
        display: none;
    }
    #page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .needs-list .needs .large {
        font-size: min(24px, calc(18 * var(--variable-size-rate-full-sp)));
    }
    #page-lp01 #sec-why-coin-laundry .block-fact .fact-list .fact .needs-list .needs:nth-child(2) .large {
        font-size:  min(22px, calc(16 * var(--variable-size-rate-full-sp)));
    }

    /* セクション　コインランドリー開業に役立つ優遇制度
    ---------------------------------------- */
    #page-lp01 #sec-public-system {
        padding: 80px 0 166px 0;
    }
    #page-lp01 #sec-public-system + .sec-cta {
        margin-top: -78px;
    }
    #page-lp01 #sec-public-system .sec-title {
        font-size: 16px;
        line-height: 180%;
        margin-bottom: 48px;
    }
    #page-lp01 #sec-public-system .info-list {
        width: 100%;
        gap: 64px;
    }
    #page-lp01 #sec-public-system .info-list .info .title {
        font-size: 24px;
    }
    #page-lp01 #sec-public-system .info-list .info .title::before {
        width: 80px;
        height: 80px;
        border: solid 13.33px #BBD6F7;
        border-radius: 100%;
        position: absolute;
        top: -24px;
        left: -16px;
        z-index: -1;
    }
    #page-lp01 #sec-public-system .info-list .info .system-list {
        flex-direction: column;
    }
    #page-lp01 #sec-public-system .info-list .info .system-list .system {
        height: 64px;
    }
    #page-lp01 #sec-public-system .info-list .info .system-list .system span {
        line-height: 120%;
    }

    /* セクション　AQUAコインランドリー経営のメリット
    ---------------------------------------- */
    #page-lp01 #sec-why-aqua {
        margin: 88px 0;
    }
    #page-lp01 #sec-why-aqua .sec-title-animation {
        margin-bottom: 56px;
    }
    #page-lp01 #sec-why-aqua .merit-list {
        gap: 80px;
    }
    #page-lp01 #sec-why-aqua .merit-list .merit {
        flex-direction: column;
        gap: 32px;
    }
    #page-lp01 #sec-why-aqua .merit-list .merit:nth-child(odd) {
        flex-direction: column;
    }
    #page-lp01 #sec-why-aqua .merit-list .merit .info .title {
        font-size: 28px;
    }
    #page-lp01 #sec-why-aqua .merit-list .merit .image {
        width: 100%;
        text-align: center;
    }
    /* セクション　GOOD DESIGN AWARD 2022
    ---------------------------------------- */
    #page-lp01 #sec-good-design-award .sec-title img {
        width: 342px;
    }
    #page-lp01 #sec-good-design-award .lead {
        margin-bottom: 32px;
    }
    #page-lp01 #sec-good-design-award .image img {
        height: 195px;
        object-fit: cover;
        border-radius: 0 0 80px 0;
    }
    #page-lp01 #sec-good-design-award + #sec-superior-series {
        margin-top: -80px;
    }
    /* セクション　Superior series の機能
    ---------------------------------------- */
    #page-lp01 #sec-superior-series {
        padding: 120px 0 80px 0;
        margin-bottom: 88px;
    }
    /* セクション　運営開始までのフロー
    ---------------------------------------- */
    #page-lp01 #sec-workflow {
        margin-bottom: 120px;
    }
    #page-lp01 #sec-workflow .sec-title-animation {
        margin-bottom: 48px;
    }

    /* セクション　よくある質問
    ---------------------------------------- */
    #page-lp01 #sec-faq {
        margin-bottom: 80px;
    }
    #page-lp01 #sec-faq .sec-title-animation {
        margin-bottom: 48px;
    }
    

    
}