/* ================= 共通部分 ここから ================= */

p {
    font-size: 16px;
}

video {
    display: block;
    border-radius: 10px 10px 0 0;
}

.play-toggle {
    position: absolute;
    inset-block-end: 28px;
    inset-inline-start: 20px;
    padding-block: 0;
    padding-inline: 0;
    font-family: FontAwesome;
    font-size: 20px;
    color: var(--blue_atg_deep);
    cursor: pointer;
    background: none;
    border: none;
}

.play-toggle::before {
    display: block;
    font-size: 16px;
    text-align: center;
    content: "\f04c";
}

/* 停止中 → 再生ボタン */
.play-toggle.paused::before {
    content: "\f04b";
}

/* 終了後 → ループマーク */
.play-toggle.looped::before {
    content: "\f01e";
}

/* ================= 共通部分 ここまで ================= */

/* ================= トップ ここから ================= */

.top__row--2_img_ph img {
    width: 75%;
}

/* ================= トップ ここまで ================= */

/* ================= #measure ここから ================= */

#measure .measure__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#measure .measure__video--wrap {
    position: relative;
    width: 52%;
}

#measure .measure__video--wrap video {
    width: var(--w-1);
    max-width: var(--w-1);
    cursor: pointer;
}

#measure .measure__text {
    width: 42%;
}

#measure .measure__text h2 {
    font-size: 60px;
}

#measure .measure__text p {
    margin-block: 2em 0;
}

#measure .step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--w-1);
    margin-block: 12em 0;
}

#measure .step__image {
    width: var(--w-1_3);
}

#measure .step__image figcaption {
    font-size: 18px;
    font-weight: bold;
    color: var(--black_main);
    text-align: center;
}

#measure .step__image figcaption span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    margin-inline: 0 0.5em;
    font-size: 22px;
    font-weight: bold;
    color: white;
    background-color: var(--gray_main);
    border-radius: 50%;
}

#measure .step__image img {
    margin-block: 1em 0;
}

#measure .step__triangle {
    width: 3%;
    height: 50px;
    background: var(--gray_main);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ================= #measure ここまで ================= */

/* ================= #costfree ここから ================= */

#running {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block: 0 7em;
}

#running .running__img {
    width: 32%;
}

#running .running__box {
    width: 58%;
}

#running .running__box h2 {
    font-size: 48px;
}

#running .running__box--text h3 {
    color: var(--blue_atg);
}

#running .running__box--text h3 span {
    margin-inline: 0 0.4em;
    font-size: 48px;
}

#running .running__box--text {
    padding-inline: 2em 0;
    margin-block: 4em 0;
    color: #333;
    border-inline-start: 6px solid var(--blue_atg);
}

#running .running__box--text p {
    margin-block: 1em 0;
}

#running .running__box--text_sub {
    font-weight: bold;
    color: var(--blue_atg);
}

#cali .cali__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#cali .cali__text {
    width: 40%;
    padding-inline: 2em 0;
    border-inline-start: 6px solid var(--blue_atg);
}

#cali .cali__text h3 {
    color: var(--blue_atg);
}

#cali .cali__text h3 span {
    font-size: 48px;
}

#cali .cali__text p {
    margin-block: 2em 0;
}

#cali .cali__text--image {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-block: 3em 0;
    margin-inline: auto;
}

#cali .cali__text--image img {
    width: 40%;
}

#cali .cali__text--image figcaption {
    margin-inline: 2em 0;
    font-size: 12px;
}

#cali .cali__video--wrap {
    position: relative;
    width: 52%;
}

#cali .cali__video--wrap video {
    width: var(--w-1);
    max-width: var(--w-1);
    cursor: pointer;
}

/* ================= #costfree ここまで ================= */

/* ================= #stressfree ここから ================= */

#floor {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#floor .floor__image {
    width: var(--w-1_2);
}

#floor .floor__text {
    width: var(--w-1_2);
}

#floor .floor__text h2 {
    font-size: 46px;
}

#floor .floor_discription {
    margin-block: 4em 0;
}

#drop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block: 4em 0;
}

#drop .drop__box {
    width: var(--w-1_2);
}

#drop .drop__text {
    padding-inline: 2em 0;
    margin-block: 4em 0;
    border-inline-start: 6px solid var(--blue_atg);
}

#drop .drop__text h3 {
    color: var(--blue_atg);
    word-break: keep-all;
}

#drop .drop__text h3 span {
    font-size: 48px;
}

#drop .drop__text--main {
    margin-block: 1.6em 0;
}

#drop .drop__list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2em;
    margin-block-start: 3em;
    background-color: var(--blue_atg_bg);
    border-radius: var(--radius-m);
}

#drop .drop__list--item {
    display: flex;
    align-items: center;
    width: var(--w-1_2);
}

#drop .drop__list--item img {
    width: 32px;
    margin-inline-end: 0.8em;
}

#drop .drop__list--item p {
    font-weight: bold;
    color: #333;
}

#drop .drop__list--item p span {
    font-size: 24px;
}

#flat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block: 10em 0;
}

#flat .flat__box {
    width: var(--w-1_2);
}

#flat .flat__text--main {
    margin-block: 2em 0;
}

#flat .flat__cross {
    position: relative;
    width: 40%;
    margin-block: 4em 0;
    margin-inline: auto;
}

#flat .flat__cross p {
    font-size: 13px;
    color: #333;
}

#flat .flat__cross--reference {
    position: absolute;
    top: 0;
    left: 34px;
}

#flat .flat__cross--glass {
    position: absolute;
    top: 0;
    left: 133px;
}

#flat .flat__cross img {
    margin-block: 1.6em 0;
}

#wash {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-block: 8em 0;
}

#wash .wash__box h3 {
    word-break: keep-all;
}

#wash .wash__box {
    width: var(--w-1_2);
}

#wash .wash__discription {
    margin-block: 2em 0;
}

#wash .wash__image {
    margin-block: 3em 0;
}

/* ================= #stressfree ここまで ================= */

/* ================= #comparison ここから ================= */

#comparison .comparison__table {
    margin-block: 5em 0;
}

#comparison .comparison__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(84% / 6);
    padding-block: 1.6em;
    padding-inline: 1.2em;
    border-inline-end: 1px dashed var(--gray_border_lighter);
}

#comparison .comparison__column > .comparison__box:last-child {
    border-inline-end: none;
}

#comparison .comparison__box p {
    width: 60%;
    font-size: 12px;
    font-weight: bold;
    word-break: keep-all;
}

#comparison .comparison__box--icon {
    width: 36px;
}

#comparison .comparison__column {
    display: flex;
    border-block-end: dotted 2px var(--gray_border);
}

#comparison .comparison__column--label {
    border-block-end: none;
}

#comparison .comparison__column--label .comparison__box {
    text-align: center;
}

#comparison .comparison__column--label .comparison__box p {
    width: var(--w-1);
    font-size: 14px;
    font-weight: bold;
    color: var(--black_main);
}

#comparison .comparison__column--ph {
    width: calc(100% + 30px);
    margin-inline: -15px 0;
    background-color: var(--blue_atg);
    border: 15px solid var(--blue_atg);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow_strong);
}

#comparison .comparison__column--ph .comparison__box p {
    width: 58%;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

#comparison .comparison__column--ph .comparison__box .comparison__box--icon {
    width: 42px;
}

#comparison .comparison__column--ph .comparison__head figcaption {
    font-size: 18px;
    color: var(--white);
}

#comparison .comparison__head {
    width: 16%;
}

#comparison .comparison__head--image {
    width: 70px;
    height: 70px;
}

#comparison .comparison__head--image img {
    display: block;
    width: auto;
    height: 100%;
    margin-inline: auto;
}

#comparison .comparison__head figcaption {
    flex-grow: 1;
    font-size: 16px;
    font-weight: bold;
    color: var(--gray_main);
    text-align: center;
}

/* ================= #comparison ここまで ================= */

/* ================= #voice ここから ================= */

#voice .voice__box--wrap {
    display: flex;
    justify-content: space-between;
    margin-block: 5em 0;
}

#voice .voice__box {
    width: var(--w-1_2);
}

#voice .voice__box--head {
    display: flex;
    gap: 1em;
    align-items: flex-end;
    justify-content: flex-start;
    padding-block: 0 0.8em;
    border-block-end: 1px solid var(--gray_border);
}

#voice .voice__box--head h3 {
    margin-inline: 1.5em 0;
    font-size: 18px;
    font-weight: normal;
    color: var(--gray_main);
}

#voice .voice__box--head h3 span {
    margin-inline: 0.4em 0;
    font-size: 14px;
}

#voice .voice__box--text_front {
    position: relative;
    margin-block: 1.6em;
    font-size: 24px;
    font-weight: bold;
    color: var(--blue_atg);
    text-align: center;
}

#voice .voice__box--text_front::before {
    padding-inline: 0 0.6em;
    font-size: 40px;
    line-height: 1;
    color: var(--blue_atg_light);
    content: "“";
}

#voice .voice__box--text_front::after {
    padding-inline: 0.6em 0;
    font-size: 40px;
    line-height: 1;
    color: var(--blue_atg_light);
    content: "„";
}

#voice .voice__box--text span {
    font-weight: bold;
    color: var(--blue_atg);
}

#voice .voice__image {
    margin-block: 3em 0;
}

#voice .u--link_button {
    margin-block: 6em 0;
}

/* ================= #voice ここまで ================= */
#app {
    margin-block: 8em 0;
}

#app .app__wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-block: 1em 0;
}

#app .app__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--w-1_4);
    margin-block: 2.5em 0;
    color: var(--black_main);
    transition: 0.3s;
}

#app .app__item:hover {
    opacity: 0.7;
    transform: translateY(-4px);
}

#app .app__item--fig {
    width: 25%;
}

#app .app__item--img {
    border-radius: var(--radius-m);
    box-shadow: var(--shadow_strong);
}

#app .app__item--text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 70%;
    height: 100%;
    border-block-end: 1px solid var(--gray_border);
}

#app .app__item--text dt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

#app .app__item--text dt .app__item--label {
    font-weight: bold;
}

#app .app__item--text dt .app__item--value {
    font-size: 12px;
}

/* ================= #about ここから ================= */
#about {
    margin-block: 8em 0;
}

#about .about__link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 70%;
}

#about .u--link_text {
    word-break: keep-all;
}

#about .about__link--main {
    width: var(--w-1);
}

#about .about__link--sub {
    width: var(--w-1_2);
    margin-block: 3em 0;
}
/* ================= #about ここまで ================= */

@media (max-width: 1260px) {
    h1 {
        font-size: 70px;
    }

    #measure .measure__text h2 {
        font-size: 42px;
    }

    #running .running__box h2 {
        margin-block: 2em 0;
        font-size: 42px;
    }

    #floor .floor__text h2 {
        font-size: 34px;
    }

    #drop .drop__text h3 span {
        font-size: 38px;
    }

    #drop .drop__list {
        flex-direction: column;
    }

    #drop .drop__list--item {
        width: var(--w-1);
    }

    #flat .flat__text h2 {
        font-size: 32px;
    }

    #flat .flat__cross {
        width: 60%;
    }

    #wash .wash__box h3 {
        font-size: 24px;
    }

    #voice .voice__box--text_front {
        font-size: 18px;
    }

    #comparison .comparison__table--wrap {
        overflow-x: scroll;
    }

    #comparison .comparison__table {
        width: calc(100% - 30px);
        margin-inline-start: 15px;
    }

    #comparison .comparison__head--image {
        width: 60px;
        height: 60px;
    }

    #comparison .comparison__box {
        flex-direction: column;
        gap: 0.5em 0;
        justify-content: flex-start;
        padding-inline: 1em;
    }

    #comparison .comparison__box--icon {
        width: 32px;
    }

    #comparison .comparison__column {
        border-inline-start: dotted 2px var(--gray_border);
        border-inline-end: dotted 2px var(--gray_border);
    }

    #comparison .comparison__column--ph {
        padding-inline: 15px;
        border-inline-start: none;
        border-inline-end: none;
    }

    #comparison .comparison__column--ph .comparison__box p {
        width: 100%;
        font-size: 12px;
        text-align: center;
    }

    #comparison .comparison__box p {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 960px) {
    p {
        font-size: 14px;
    }

    #measure .measure__wrap {
        flex-direction: column;
    }

    #measure .measure__video--wrap {
        width: var(--w-1);
    }

    #measure .measure__text {
        width: var(--w-1);
        margin-block: 2em 0;
    }

    #measure .measure__text h2 {
        font-size: 42px;
    }

    #measure .step {
        margin-block: 6em 0;
    }

    #measure .step__image figcaption span {
        width: 1.4em;
        height: 1.4em;
        font-size: 16px;
    }

    #measure .step__image figcaption {
        font-size: 14px;
    }

    #running {
        flex-direction: column;
    }

    #running .running__img {
        width: 70%;
        max-width: 320px;
    }

    #running .running__box {
        width: var(--w-1);
    }

    #cali .cali__wrap {
        flex-direction: column;
    }

    #cali .cali__text {
        width: var(--w-1);
    }

    #cali .cali__video--wrap {
        width: var(--w-1);
        max-width: 560px;
        margin-block: 4em 0;
        margin-inline: auto;
    }

    #floor {
        flex-direction: column-reverse;
    }

    #floor .floor__image {
        width: var(--w-1);
        max-width: 560px;
        margin-block: 4em 0;
        margin-inline: auto;
    }

    #floor .floor_discription {
        margin-block: 2em 0;
    }

    #floor .floor__text {
        width: var(--w-1);
    }

    #drop {
        flex-direction: column;
        align-items: center;
    }

    #drop .drop__box {
        width: var(--w-1);
    }

    #drop .drop__image {
        width: var(--w-1);
        max-width: 560px;
        margin-block: 4em 0;
        margin-inline: auto;
    }

    #drop .drop__list {
        margin-block: 1.4em 0;
    }

    #flat {
        flex-direction: column-reverse;
        align-items: center;
    }

    #flat .flat__box {
        width: var(--w-1);
    }

    #flat .flat__cross {
        margin-block: 2em 0;
    }

    #flat .flat__image {
        width: var(--w-1);
        max-width: 560px;
        margin-block: 4em 0;
        margin-inline: auto;
    }

    #wash {
        flex-direction: column;
    }

    #wash .wash__box {
        width: var(--w-1);
    }

    #wash .wash__box:not(:first-of-type) {
        margin-block: 3em 0;
    }

    #wash .wash__discription {
        margin-block: 1.4em 0;
    }

    #wash .wash__image {
        width: var(--w-1);
        max-width: 560px;
        margin-block: 1.4em 0;
        margin-inline: auto;
    }

    #comparison .comparison__table {
        width: 700px;
        padding-inline: 2px;
        margin-block: 1em 0;
    }

    #comparison .comparison__head {
        width: 13%;
    }

    #comparison .comparison__head--image {
        width: 55px;
        height: 55px;
    }

    #comparison .comparison__column--ph .comparison__head {
        font-size: 16px;
    }

    #comparison .comparison__column--ph .comparison__head figcaption {
        font-size: 16px;
    }

    #comparison .comparison__box {
        padding-block: 1.2em;
        padding-inline: 0.8em;
    }

    #comparison .comparison__head figcaption {
        font-size: 14px;
    }

    #voice .voice__box--wrap {
        flex-direction: column;
        margin-block: 3em 0;
    }

    #voice .voice__box {
        width: var(--w-1);
    }

    #voice .voice__box:not(:first-of-type) {
        margin-block: 4em 0;
    }

    #app .app__item {
        width: var(--w-1_2);
    }

    #app .app__item--text dt .app__item--label {
        font-size: 14px;
    }

    #app .app__item--fig {
        width: 30%;
    }

    #app .app__item--text {
        width: 64%;
    }

    #about .about__link {
        width: 100%;
    }

    #about .u--link_text {
        font-size: 14px;
    }
}

@media (max-width: 520px) {
    h1 {
        font-size: 52px;
    }

    #measure .step {
        flex-direction: column;
        gap: 1em;
    }

    #measure .step__image figcaption {
        font-size: 16px;
    }

    #measure .step__triangle {
        width: 50px;
        height: 20px;
        clip-path: polygon(50% 20px, 0% 0%, 50px 0%);
    }

    #measure .step__image {
        width: 80%;
    }

    #running .running__box h2 {
        font-size: 30px;
    }

    #running .running__box--text {
        padding-inline: 1em 0;
    }

    #running .running__box--text h3 span {
        margin-inline: 0 0.3em;
        font-size: 38px;
    }

    #cali .cali__text h3 span {
        font-size: 38px;
    }

    #cali .cali__text {
        padding-inline: 1.4em 0;
    }

    #floor .floor__text h2 {
        font-size: 28px;
    }

    #drop .drop__text {
        padding-inline: 1.4em 0;
    }

    #drop .drop__list--item p span {
        font-size: 22px;
    }

    #flat .flat__text h2 {
        font-size: 24px;
    }

    #voice .voice__box--head img {
        width: var(--w-1_2);
    }

    #voice .voice__box--text_front {
        font-size: 16px;
    }

    #voice .voice__box--text_front::before {
        padding-inline: 0 0.1em;
    }

    #voice .voice__box--text_front::after {
        padding-inline: 0.1em 0;
    }

    #voice .voice__image img {
        width: var(--w-1_2);
    }

    #app .app__item--text dt {
        flex-direction: column;
    }
}