@charset 'utf-8';

/* color */
:root {
    --product-color-black: #35383F;
    --product-color-white: #F0F0F0;
    --product-color-green: #3B524A;
    --product-color-coral: #E9B4A4;
    --product-color-greige: #C8C0BE;
    --product-color-greige-sub: #F7E7C3;
    --product-color-blue: #B5C2D3;
    --product-color-blue-sub: #D8C2AC;
    --text-color-base: #000000;
}

html.scroll {
    scroll-behavior: smooth;
    scroll-padding-top: 12rem;
}

@media screen and (min-width: 1440px) {
    html.scroll {
        scroll-padding-top: 120px;
    }
}

/* pc-sp */
.main_contents .pc-inline {
    display: none;
}

.main_contents .sp-inline {
    display: none;
}

@media screen and (min-width: 769px) {
    .sp-only {
        display: none !important;
    }

    .pc-only {
        display: block !important;
    }
} 
@media screen and (max-width: 768px) {
    .back_to_top {
        padding: 5px;
    }
    .sp-only {
        display: block !important;
    }

    .pc-only {
        display: none !important;
    }
}

@media screen and (min-width: 769px) {
    .main_contents .pc-inline {
        display: inline !important;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .sp-inline {
        display: inline !important;
    }
}

/* main_contents style */
.main_contents {
    position: relative;
    color: var(--text-color-base);
    padding: 30px 0 0 0;
}

    .main_contents .content {
        position: relative;
        width: 115.2rem;
        margin: 0 auto
    }

@media screen and (min-width: 1440px) {
    .main_contents .content {
        width: 1152px;
    }
}
@media screen and (max-width: 1200px) {
    .main_contents {
        padding: 40px 0 0 0;
    }
}
@media screen and (max-width: 900px) {
    .main_contents {
        padding: 40px 0 0 0;
    } 
}

@media screen and (max-width: 768px) {
    .main_contents .content {
        width: 32.4rem;
        margin: 4rem auto 0;
    }
}

.main_contents .content.wide {
    width: 100%;
    max-width: 1440px;
}

@media screen and (max-width: 768px) {
    .main_contents .content.wide {
        width: 32.4rem;
        max-width: unset;
    }
}

.main_contents h2 {
    margin: 8rem 0 2.7rem;
    font-size: 3.8rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    letter-spacing: .04em;
}

@media screen and (min-width: 1440px) {
    .main_contents h2 {
        margin: 80px 0 27px;
        font-size: 38px;
        letter-spacing: .04em;
    }
}

@media screen and (max-width: 768px) {
    .main_contents h2 {
        margin: 5rem 0 2rem;
        font-size: 2.8rem;
        letter-spacing: .12rem;
    }
}

.main_contents h3 {
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .128rem;
    margin-bottom: 1.5rem;
}

@media screen and (min-width: 1440px) {
    .main_contents h3 {
        font-size: 32px;
        letter-spacing: 1.28px;
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents h3 {
        font-size: 2.7rem;
        line-height: 1.5;
        letter-spacing: .088rem;
    }
}

.main_contents h4 {
    margin: 1.6rem 0 0;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 3rem;
}

@media screen and (min-width: 1440px) {
    .main_contents h4 {
        margin: 16px 0 0;
        font-size: 22px;
        line-height: 30px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents h4 {
        margin: 1.2rem 0 0;
        font-size: 2.7rem;
        line-height: 1.5;
        letter-spacing: .072rem;
    }
}

.main_contents section {
    margin: 16rem auto 0;
    max-width: 1440px;
}

@media screen and (min-width: 1440px) {
    .main_contents section {
        margin: 160px auto 0;
    }
}

@media screen and (max-width: 768px) {
    .main_contents section {
        margin: 13rem 0 0
    }
}

.main_contents p {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2;
    letter-spacing: .02em;
}

@media screen and (min-width: 1440px) {
    .main_contents p {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents p {
        font-size: 1.5rem;
        line-height: 1.6;
        text-align: left;
    }
}


.main_contents a {
    color: inherit;
    text-decoration: inherit;
    background-color: transparent;
}

.main_contents img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.main_contents svg {
    display: block;
    width: 100%;
    height: auto;
}

.main_contents video {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
    pointer-events: none;
}

.main_contents .annotationText {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    font-size: 1.3rem;
    line-height: 1.6;
    letter-spacing: .026rem;
    margin-top: 2rem;
    opacity: .64;
}

@media screen and (min-width: 1440px) {
    .main_contents .annotationText {
        gap: 6px;
        font-size: 13px;
        margin-top: 20px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .content.annotation {
        margin-top: 2rem;
    }
}

.main_contents .annotationText > div > span {
    margin: 0 .5rem 0 0;
    font-size: 100%;
}

@media screen and (min-width: 1440px) {
    .main_contents .annotationText > div > span {
        margin: 0 5px 0 0;
    }
}

.main_contents .small {
    font-size: 0.7em;
}

.main_contents .justify-center {
    justify-content: center;
}

.main_contents .items-centerf {
    align-items: center;
}

.main_contents .flex {
    display: flex;
}

@media screen and (max-width: 768px) {
    .main_contents .sp-flex-column {
        display: flex;
        flex-direction: column;
    }

        .main_contents .sp-flex-column .order0 {
            order: 0;
        }

        .main_contents .sp-flex-column .order1 {
            order: 1;
        }

        .main_contents .sp-flex-column .order2 {
            order: 2;
        }
}

.main_contents .flex_b-60 {
    flex-basis: 60%;
}

.main_contents .flex_b-50 {
    flex-basis: 50%;
}

.main_contents .flex_b-40 {
    flex-basis: 40%;
}

.main_contents .taL {
    text-align: left;
}

.main_contents .taL-R {
    text-align: left;
}

.main_contents .taR {
    text-align: right;
}

.main_contents .taR-L {
    text-align: right;
}

@media screen and (max-width: 768px) {
    .main_contents .taR-L {
        text-align: left;
    }

    .main_contents .taL-R {
        text-align: right;
    }
}

.main_contents .taC {
    text-align: center;
}

.main_contents .m0a {
    margin: 0 auto;
}

.main_contents .mt1 {
    margin-top: 1rem !important;
}

@media screen and (min-width: 1440px) {
    .main_contents .mt1 {
        margin-top: 10px !important;
    }
}

.main_contents .mt2 {
    margin-top: 2rem !important;
}

@media screen and (min-width: 1440px) {
    .main_contents .mt2 {
        margin-top: 20px !important;
    }
}

.bb0 {
    border-bottom: none !important;
}

/*MV*/
.main_contents #mv {
    width: 115.2rem;
    height: 51.2rem;
    margin: 0 auto;
}

@media screen and (min-width: 1440px) {
    .main_contents #mv {
        width: 1152px;
        height: 512px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents #mv {
        width: 100%;
        height: auto;
    }
}

.main_contents .mv_swiper .swiper-wrapper {
    padding: 3px 0 40px;
    overflow: hidden;
}

.main_contents .mv_swiper .swiper-pagination {
    text-align: right
}

.main_contents .mv_swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0;
    padding: .3px 7rem 0 0;
    line-height: 1;
}

@media screen and (max-width: 768px) {
    .main_contents .mv_swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
        padding: .3px 4rem 0 0;
    }
}

.main_contents .mv_swiper .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0;
}

.main_contents .mv_swiper .circle-pagination {
    position: relative;
    display: inline-block;
    width: 25px;
    height: inherit;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
    outline: none;
    opacity: 1;
}

    .main_contents .mv_swiper .circle-pagination .circle-pagination__inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 13px;
    }

        .main_contents .mv_swiper .circle-pagination .circle-pagination__inner:before {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            content: "";
            background-color: #9d9d8f;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

    .main_contents .mv_swiper .circle-pagination.swiper-pagination-bullet-active .circle-pagination__inner:before {
        background-color: #000;
    }

.main_contents .mv_swiper .circle-pagination__inner svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(-90deg);
    transform: translate(-50%, -50%) rotate(-90deg);
}

.main_contents .mv_swiper .circle-pagination__inner circle {
    fill: transparent;
    stroke: #9d9d8f;
    stroke-width: 1.5;
    animation: circle 5s linear forwards;
}

.main_contents .mv_swiper .circle-pagination:not(.swiper-pagination-bullet-active) .circle-pagination__inner svg {
    display: none;
}

@keyframes circle {
    0% {
        stroke-dasharray: 0 69
    }

    99.9%, to {
        stroke-dasharray: 69 69
    }
}

.main_contents .mv_swiper .button-auto-play {
    position: absolute;
    right: 1.7rem;
    bottom: 5px;
    z-index: 11;
    display: block;
    width: 15px;
    margin: 0 4rem 0 auto;
}

@media screen and (max-width: 768px) {
    .main_contents .mv_swiper .button-auto-play {
        right: 0;
        margin: 0 2rem 0 auto;
    }
}

.main_contents .mv_swiper .button-auto-play {
    margin: 0 2rem 0 0;
}

@media screen and (max-width: 768px) {
    .main_contents .mv_swiper .button-auto-play {
        bottom: 0.4rem;
    }
}

.stop .main_contents .mv_swiper .button-auto-play {
    bottom: 7px;
}

.stop .swiper-pagination-bullet-active > .circle-pagination__inner > svg {
    display: none;
}


.main_contents .mv_swiper .button-auto-play img.stop,
.main_contents .mv_swiper .button-auto-play.stop img.play {
    display: block;
}

.main_contents .mv_swiper .button-auto-play.stop img.stop,
.main_contents .mv_swiper .button-auto-play img.play {
    display: none;
}


/*.main_contents .mv_swiper .swiper-pagination-bullets .swiper-pagination-bullet {
	display: inline-block;
	margin: 13px;
	cursor: pointer;
	outline: none;
	opacity: 1;
	background-color: #9d9d8f;
}

.main_contents .mv_swiper .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: #000;
}*/


/* Toc */
.main_contents #toc {
}

    .main_contents #toc .content {
        text-align: center;
        margin-top: 20px;
    }

@media screen and (max-width: 768px) {
    .main_contents #toc p {
        line-height: 2;
    }
}

.main_contents .movieLink_wrap {
    display: inline-flex;
    gap: 1.6rem;
    margin: 4rem 0 0;
}

.main_contents a.movieLink_wrap circle {
    fill: #FFF;
    fill-opacity: .2;
    transition: fill .3s;
}

.main_contents a.movieLink_wrap:hover circle {
    fill: #000;
}

@media screen and (min-width: 1440px) {
    .main_contents .movieLink_wrap {
        gap: 16px;
        margin: 40px 0 0;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .movieLink_wrap {
        margin: 5.8rem 0 0;
    }
}

.main_contents .movieLink {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 3.52rem;
    letter-spacing: .02em;
    border-bottom: 1px solid #403d33;
}

@media screen and (min-width: 1440px) {
    .main_contents .movieLink {
        font-size: 16px;
        line-height: 35px;
    }
}

.main_contents .ButtonLink_wrap {
    display: inline-block;
    margin: 4rem 0 0;
    height: 5rem;
    padding: 0 5rem;
    border: 1px solid #000;
    border-radius: 9999px;
    font-weight: 500;
    transition: background-color 0.3s ease;
    position: relative;
}

@media screen and (min-width: 1440px) {
    .main_contents .ButtonLink_wrap {
        margin: 40px 0 0;
        height: 50px;
        padding: 0 50px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .ButtonLink_wrap:hover {
        background-color: unset;
    }
}

.main_contents .ButtonLink_wrap:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .2;
    border-radius: 9999px;
    pointer-events: none;
    transition: background-color .3s;
}

.main_contents .ButtonLink_wrap:hover:after {
    background-color: #000;
}

@media screen and (max-width: 768px) {
    .main_contents .ButtonLink_wrap:hover:after {
        content: unset;
    }
}

.main_contents a.ButtonLink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.main_contents .ButtonLink_text {
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: .026em;
    word-break: break-word;
}

@media screen and (min-width: 1440px) {
    .main_contents .ButtonLink_text {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .ButtonLink_wrap {
        margin: 5.8rem 0 0;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .ButtonLink_wrap {
        display: block;
        margin: 2rem 0 0 auto;
        padding: 0;
        border: none !important;
    }

    .main_contents a.ButtonLink:after {
        content: "→";
        display: block;
        font-size: 2.4rem;
        font-weight: 400;
        width: 4rem;
        height: 4rem;
        border: 1px solid #000;
        border-radius: 9999px;
        margin: 0 0 0 1rem;
    }

    .main_contents a.ButtonLink:active:before {
        content: "→";
        display: block;
        font-size: 2.4rem;
        font-weight: 400;
        width: 4rem;
        height: 4rem;
        border: 1px solid #000;
        border-radius: 9999px;
        margin: 0 0 0 1rem;
        background: #000;
        opacity: .2;
        position: absolute;
        pointer-events: none;
        right: 0;
    }
}

.main_contents a.campaignLink {
    width: 87%;
    display: block;
    margin: 7rem auto 0;
    border-radius: 16px;
    border: 1px solid #000;
    position: relative;
}

@media screen and (min-width: 1440px) {
    .main_contents a.campaignLink {
        margin: 70px auto 0;
    }
}

@media screen and (max-width: 768px) {
    .main_contents a.campaignLink {
        width: 100%;
        margin: 5rem auto 0;
    }
}

.main_contents a.campaignLink > img {
    border-radius: 16px;
}

.main_contents a.campaignLink:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0);
    transition: background .3s;
}

@media screen and (min-width: 769px) {
    .main_contents a.campaignLink:hover:after {
        background: rgba(0, 0, 0, 0.2);
    }
}

@media screen and (max-width: 768px) {
    .main_contents a.campaignLink:active:after {
        background: rgba(0, 0, 0, 0.2);
    }
}

/* AnkerLinkArea */
.main_contents .ankerNav_container {
    position: relative;
    width: 114.5rem;
    margin: 5rem auto 0;
}

@media screen and (min-width: 1440px) {
    .main_contents .ankerNav_container {
        width: 1145px;
        margin: 80px auto 0;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .ankerNav_container {
        width: 32.4rem;
        margin: 5rem auto 0;
    }
}

.main_contents .ankerNav_grid {
    display: grid;
    grid-template-areas: "first first first second" "first first first second" "third third forth forth";
    gap: 1rem;
}

@media screen and (max-width: 768px) {
    .main_contents .ankerNav_grid {
        grid-template-areas: "first" "second" "third" "forth";
    }
}

.main_contents .ankerNav_link {
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
}


@media screen and (min-width: 769px) {
    .main_contents .ankerNav_link img {
        transition: transform .3s;
    }

    .main_contents .ankerNav_link:hover img {
        transform: scale(1.05);
    }
}

.main_contents .ankerNav_link[data-gridnum="0"] {
    grid-area: first;
    width: 63rem;
    height: 50.5rem;
}

@media screen and (min-width: 1440px) {
    .main_contents .ankerNav_link[data-gridnum="0"] {
        width: 630px;
        height: 505px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .ankerNav_link[data-gridnum="0"] {
        width: auto;
        height: 14em;
    }
}

.main_contents .ankerNav_link[data-gridnum="1"] {
    grid-area: second;
    width: 50.5rem;
    height: 50.5rem;
}

@media screen and (min-width: 1440px) {
    .main_contents .ankerNav_link[data-gridnum="1"] {
        width: 505px;
        height: 505px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .ankerNav_link[data-gridnum="1"] {
        width: auto;
        height: 14rem;
    }
}

.main_contents .ankerNav_link[data-gridnum="2"] {
    grid-area: third;
    width: 50.5rem;
    height: 25rem;
}

@media screen and (min-width: 1440px) {
    .main_contents .ankerNav_link[data-gridnum="2"] {
        width: 505px;
        height: 250px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .ankerNav_link[data-gridnum="2"] {
        width: auto;
        height: 14em;
    }
}

.main_contents .ankerNav_link[data-gridnum="3"] {
    grid-area: forth;
    width: 63em;
    height: 25rem;
}

@media screen and (min-width: 1440px) {
    .main_contents .ankerNav_link[data-gridnum="3"] {
        width: 630px;
        height: 250px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .ankerNav_link[data-gridnum="3"] {
        width: auto;
        height: 14rem;
    }
}

.main_contents .ankerNavTxt_wrap {
    position: absolute;
    bottom: 2.4rem;
    left: 3rem;
    color: #FFF;
}

@media screen and (min-width: 1440px) {
    .main_contents .ankerNavTxt_wrap {
        bottom: 24px;
        left: 30px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .ankerNavTxt_wrap {
        bottom: 1rem;
        left: 1.6rem;
    }

    .main_contents #toc .ankerNavTxt_wrap p {
        line-height: 1.5;
    }
}

.main_contents .ankerNavTxt_sub {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.1rem;
}

@media screen and (min-width: 1440px) {
    .main_contents .ankerNavTxt_sub {
        font-size: 14px;
        line-height: 21px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .ankerNavTxt_sub {
        font-size: 1.1rem;
        line-height: 1.65rem;
    }
}

.main_contents .ankerNavTxt_main {
    font-size: 2rem;
    font-weight: 500;
    line-height: 3.2rem;
}

@media screen and (min-width: 1440px) {
    .main_contents .ankerNavTxt_main {
        font-size: 20px;
        line-height: 32px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .ankerNavTxt_main {
        font-size: 1.4rem;
        line-height: 2.1rem;
    }
}

/* colorPicker deafult */
.main_contents ul.colorCircle > li {
    display: block;
    width: 4rem;
    height: 4rem;
    background-color: #CCC;
    border-radius: 2rem;
    position: relative;
    border: 1px solid #000;
    font-size: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
}

@media screen and (min-width: 1440px) {
    .main_contents ul.colorCircle > li {
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }
}

.main_contents #design[name="1"] ul.colorCircle > li,
.main_contents #design[name="5"] ul.colorCircle > li {
    border: 1px solid #FFF;
}

.main_contents ul.colorCircle > li.checked {
    position: relative;
}

    .main_contents ul.colorCircle > li.checked::before {
        content: "";
        border: 1px solid #000;
        width: 140%;
        height: 140%;
        border-radius: 9999px;
    }

.main_contents #design[name="1"] ul.colorCircle > li.checked::before,
.main_contents #design[name="5"] ul.colorCircle > li.checked::before {
    border: 1px solid #FFF;
}

.main_contents ul.colorCircle > li.off {
    background: unset;
}

.main_contents ul.colorCircle > li.black {
    background: var(--product-color-black);
}

.main_contents ul.colorCircle > li.white {
    background: var(--product-color-white);
}

.main_contents ul.colorCircle > li.green {
    background: var(--product-color-green);
}

.main_contents ul.colorCircle > li.coral {
    background: var(--product-color-coral);
}

.main_contents ul.colorCircle > li.greige {
    background: var(--product-color-greige);
}

    .main_contents ul.colorCircle > li.greige.sub {
        background: linear-gradient(0deg, var(--product-color-greige) 0%, var(--product-color-greige) 49%, var(--product-color-greige-sub) 50%, var(--product-color-greige-sub) 100%);
    }

.main_contents ul.colorCircle > li.blue {
    background: var(--product-color-blue);
}

    .main_contents ul.colorCircle > li.blue.sub {
        background: linear-gradient(0deg, var(--product-color-blue) 0%, var(--product-color-blue) 49%, var(--product-color-blue-sub) 50%, var(--product-color-blue-sub) 100%);
    }

/* colorPicker Square(coordinate) */
.main_contents .coordinate ul.colorCircle > li {
    width: 7.48rem;
    height: 3.7rem;
    border-radius: 9999px;
}

@media screen and (min-width: 1440px) {
    .main_contents .coordinate ul.colorCircle > li {
        width: 74.8px;
        height: 37px;
    }
}

.main_contents .coordinate ul.colorCircle > li.checked::before {
    width: 130%;
    height: 144%;
}

.main_contents .coordinate .caseColor ul.colorCircle > li {
    width: 6.2rem;
}

@media screen and (min-width: 1440px) {
    .main_contents .coordinate .caseColor ul.colorCircle > li {
        width: 62px;
    }
}

.main_contents .coordinate .ul.colorCircle > li.off {
    background: #FFF;
    position: relative;
}

.main_contents .coordinate ul.colorCircle > li.off {
    background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/images/sense9/cover_off.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    border: none !important;
}

@media screen and (max-width: 768px) {
    .main_contents .coordinate ul.colorCircle > li.off {
        background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/images/sense9/cover_off_sp.png");
    }
}

.main_contents #design[name="1"] ul.colorCircle > li.off,
.main_contents #design[name="5"] ul.colorCircle > li.off {
    background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/images/sense9/cover_off_white.png");
}

@media screen and (max-width: 768px) {

    .main_contents #design[name="1"] ul.colorCircle > li.off,
    .main_contents #design[name="5"] ul.colorCircle > li.off {
        background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/images/sense9/cover_off_sp_white.png");
    }
}

/* @media screen and (min-width: 1440px) {
	.main_contents .coordinate ul.colorCircle>li.off::after {
		top: 11.5px;
	}
} */

@media screen and (max-width: 768px) {
    .main_contents .coordinate .productColor ul.colorCircle > li {
        width: 4.6rem;
        height: 3rem;
    }

    .main_contents .coordinate .caseColor ul.colorCircle > li {
        width: 3.5rem;
        height: 3.5rem;
    }

        .main_contents .coordinate .caseColor ul.colorCircle > li.checked::before {
            width: 140%;
            height: 140%;
        }
}

.main_contents .coordinate ul.colorCircle > li.greige.sub {
    background: linear-gradient(360deg, var(--product-color-greige) 0%, var(--product-color-greige) 49%, var(--product-color-greige-sub) 50%, var(--product-color-greige-sub) 100%);
}

.main_contents .coordinate ul.colorCircle > li.blue.sub {
    background: linear-gradient(360deg, var(--product-color-blue) 0%, var(--product-color-blue) 49%, var(--product-color-blue-sub) 50%, var(--product-color-blue-sub) 100%);
}

/* headImg */
.main_contents .headImg {
    position: absolute;
    top: -13rem;
    left: -3rem;
}

    .main_contents .headImg.headR {
        left: unset;
        right: -3rem;
    }

    .main_contents .headImg > img {
        height: 10rem;
        width: auto;
    }

@media screen and (min-width: 1440px) {
    .main_contents .headImg {
        top: -130px;
        left: -30px;
    }

        .main_contents .headImg.headR {
            right: -30px;
        }

        .main_contents .headImg > img {
            height: 100px;
        }
}

@media screen and (max-width: 768px) {
    .main_contents .headImg > img {
        height: 6rem;
    }

    .main_contents .headImg {
        top: -16rem;
        left: 2rem;
    }

    .main_contents #display .headImg {
        top: -8.7rem;
    }

    .main_contents #camera .headImg {
        top: -6.6rem;
    }

    .main_contents #usability .headImg {
        top: -9rem;
    }

    .main_contents .headImg.headR {
        right: 0rem;
    }
}

/* section */
.bg-blend {
    width: 100%;
    height: 100%;
    background: url("https://aquosmobile.sharp.com.tw/resources/aquos/images/sense9/bg_blend.png");
    background-size: 300px;
    pointer-events: none;
    position: absolute;
    top: 0;
    opacity: .3;
    /* mix-blend-mode: soft-light; */
}

.main_contents #design[name="1"] .bg-blend,
.main_contents #design[name="5"] .bg-blend {
    opacity: .12;
}

.main_contents #design[name="0"] .bg-blend,
.main_contents #design[name="3"] .bg-blend {
    opacity: .5;
}

@media screen and (max-width: 768px) {
    .bg-blend {
        background-size: 150px;
    }
}

.hidden-x {
    overflow-x: hidden;
}





/* #design */
.main_contents #design {
    padding: 8rem 0 0;
    position: relative;
}

    .main_contents #design .content {
        text-align: center;
    }

@media screen and (min-width: 1440px) {
    .main_contents #design {
        padding: 80px 0 0;
    }
}

@media screen and (max-width: 768px) {
    .main_contents #design {
        padding: 0 0 4rem;
    }

        .main_contents #design .content {
            text-align: left;
        }

        .main_contents #design .headImg {
            top: -3.6rem;
            z-index: 2;
        }

        .main_contents #design .designSlide_Wrap {
            display: flex;
            flex-direction: column;
        }

            .main_contents #design .designSlide_Wrap .content {
                order: 1;
            }

            .main_contents #design .designSlide_Wrap .hidden-x {
                order: 0;
            }

                .main_contents #design .designSlide_Wrap .hidden-x .content {
                    margin: 0 auto;
                }
}



/* 背景色切り替え用設定 */
.main_contents #design {
    transition: background 0.6s ease-out;
}

    .main_contents #design[name="0"] {
        background: #F0F0F0;
    }

    .main_contents #design[name="1"] {
        background: #35383F;
        color: #FFF;
    }

    .main_contents #design[name="2"] {
        background: #95C5FF;
    }

    .main_contents #design[name="3"] {
        background: #F7E7C3;
    }

    .main_contents #design[name="4"] {
        background: #E9B4A4;
    }

    .main_contents #design[name="5"] {
        background: #005D3B;
        color: #FFF;
    }

        .main_contents #design[name="1"] .ButtonLink_wrap,
        .main_contents #design[name="5"] .ButtonLink_wrap {
            border: 1px solid #FFF;
        }

            .main_contents #design[name="1"] .ButtonLink_wrap:hover:after,
            .main_contents #design[name="5"] .ButtonLink_wrap:hover:after {
                background-color: #FFF;
            }

        .main_contents #design[name="1"] .funcImg > img,
        .main_contents #design[name="5"] .funcImg > img {
            filter: invert(100%);
        }

@media screen and (max-width: 768px) {

    .main_contents #design[name="1"] a.ButtonLink:after,
    .main_contents #design[name="5"] a.ButtonLink:after {
        border: 1px solid #FFF;
    }
}

/* color Picker hover */

.main_contents .colorPicker .colorCircle li {
    position: relative;
}

    .main_contents .colorPicker .colorCircle li::after {
        content: "";
        width: 100%;
        height: 100%;
        opacity: .2;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        border-radius: 9999px;
        transition: background-color .3s;
    }

@media screen and (min-width: 769px) {
    .main_contents .colorPicker .colorCircle li:hover::after {
        background-color: #000;
    }

    .main_contents .colorPicker .colorCircle li:active::after {
        background-color: unset;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .colorPicker .colorCircle li:active::after {
        background-color: #000;
    }
}


/* color Picker for coordinate */
.main_contents .colorPicker.coordinate {
    display: flex;
    gap: 4rem;
    justify-content: center;
    margin: 2rem auto;
    align-items: flex-end;
}

@media screen and (min-width: 1440px) {
    .main_contents .colorPicker.coordinate {
        gap: 40px;
        margin: 20px auto;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .colorPicker.coordinate {
        flex-direction: column;
        align-items: center;
        gap: .2rem;
        margin: auto;
    }

        .main_contents .colorPicker.coordinate p {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
}

.main_contents .coordinate .productColor,
.main_contents .coordinate .caseColor {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: flex-start;
}

@media screen and (min-width: 1440px) {

    .main_contents .coordinate .productColor,
    .main_contents .coordinate .caseColor {
        gap: 10px;
    }
}

@media screen and (max-width: 768px) {

    .main_contents .coordinate .productColor,
    .main_contents .coordinate .caseColor {
        align-items: center;
        gap: .5rem;
    }
}

.main_contents .colorPicker p {
    font-size: 2rem;
}

@media screen and (min-width: 1440px) {
    .main_contents .colorPicker p {
        font-size: 20px;
    }
}

.main_contents .colorPicker .times p {
    font-size: 3rem;
    font-weight: 400;
    line-height: 1;
}

@media screen and (min-width: 1440px) {
    .main_contents .colorPicker .times p {
        font-size: 30px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .colorPicker .times p {
        line-height: unset;
        margin-bottom: unset;
    }
}

.main_contents .productColor ul,
.main_contents .caseColor ul {
    display: flex;
    gap: 1.5rem;
}

@media screen and (min-width: 1440px) {

    .main_contents .productColor ul,
    .main_contents .caseColor ul {
        gap: 15px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .productColor ul {
        gap: 1rem;
    }

    .main_contents .caseColor ul {
        gap: 1.3rem;
    }
}


/* Cover Swiper */
.cover_swiper {
    background: #fff;
}

    .cover_swiper .swiper-slide img {
        opacity: 0;
        transition: opacity 0.6s ease-out;
    }

        .cover_swiper .swiper-slide img.black,
        .cover_swiper .swiper-slide img.blue,
        .cover_swiper .swiper-slide img.green,
        .cover_swiper .swiper-slide img.greige,
        .cover_swiper .swiper-slide img.coral,
        .cover_swiper .swiper-slide img.white {
            position: absolute;
            top: 0;
            left: 0;
        }

    .cover_swiper .swiper-slide[name="off"] img.off,
    .cover_swiper .swiper-slide[name="black"] img.black,
    .cover_swiper .swiper-slide[name="blue"] img.blue,
    .cover_swiper .swiper-slide[name="green"] img.green,
    .cover_swiper .swiper-slide[name="greige"] img.greige,
    .cover_swiper .swiper-slide[name="coral"] img.coral,
    .cover_swiper .swiper-slide[name="white"] img.white {
        opacity: 1;
    }


/* design slide */
.main_contents .designCoSlide {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.main_contents #design[name="1"] .designCoSlide,
.main_contents #design[name="5"] .designCoSlide {
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}

.main_contents .designCoSlide .swiper-slide {
    border-right: 1px solid #000;
}

.main_contents #design[name="1"] .designCoSlide .swiper-slide,
.main_contents #design[name="5"] .designCoSlide .swiper-slide {
    border-right: 1px solid #FFF;
}

@media screen and (max-width: 768px) {

    .main_contents #design[name="1"] .designCoSlide .swiper-slide,
    .main_contents #design[name="5"] .designCoSlide .swiper-slide {
        border-right: none;
    }
}

.main_contents .designCoSlide .content {
    width: 100%;
}

.main_contents .design_style_swiperWrap,
.main_contents .design_strong_swiperWrap {
    overflow: hidden;
    border-left: 1px solid #000;
}

.main_contents #design[name="1"] .design_style_swiperWrap,
.main_contents #design[name="1"] .design_strong_swiperWrap,
.main_contents #design[name="5"] .design_style_swiperWrap,
.main_contents #design[name="5"] .design_strong_swiperWrap {
    border-left: 1px solid #FFF;
}

@media screen and (max-width: 768px) {

    .main_contents #design[name="1"] .design_style_swiperWrap,
    .main_contents #design[name="1"] .design_strong_swiperWrap,
    .main_contents #design[name="5"] .design_style_swiperWrap,
    .main_contents #design[name="5"] .design_strong_swiperWrap {
        border-left: none;
    }
}

.main_contents .design_body_swiperWrap {
    overflow: hidden;
    border-right: 1px solid #000;
}
.main_contents .design_img
{
    width:40%; 
    min-width:150px;

}
#pro .proSwiper{width:85%; max-width:550px;}

#buy .buybox{text-align: center; width:100%; margin:auto;}
.buybox .storeicon {
    display: inline-block !important;
    border: 0px !important;
    width: 180px !important;
    height: auto;
    margin-left: 10px;
}

.buybox .storeicon img {width: 150px !important; height: auto; }

.main_contents #design[name="1"] .design_body_swiperWrap,
.main_contents #design[name="5"] .design_body_swiperWrap {
    border-right: 1px solid #FFF;
}

@media screen and (max-width: 768px) {

    .main_contents #design[name="1"] .design_body_swiperWrap,
    .main_contents #design[name="5"] .design_body_swiperWrap {
        border-right: none;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .designCoSlide .swiper-slide {
        border-right: none;
    }

    .main_contents .design_style_swiperWrap,
    .main_contents .design_body_swiperWrap,
    .main_contents .design_strong_swiperWrap {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        margin-bottom: 2rem;
        border-right: none;
        border-left: none;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
    }

    .main_contents #design[name="1"] .design_style_swiperWrap,
    .main_contents #design[name="5"] .design_style_swiperWrap,
    .main_contents #design[name="1"] .design_body_swiperWrap,
    .main_contents #design[name="5"] .design_body_swiperWrap,
    .main_contents #design[name="1"] .design_strong_swiperWrap,
    .main_contents #design[name="5"] .design_strong_swiperWrap {
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #FFF;
    }
}

/* functions */
.main_contents .functions > div:first-child {
    border-top: 1px solid #000;
    margin: 8rem auto 0;
}

.main_contents #design[name="1"] .functions > div:first-child,
.main_contents #design[name="5"] .functions > div:first-child {
    border-top: 1px solid #FFF;
}

.main_contents #design[name="1"] .functions > div,
.main_contents #design[name="5"] .functions > div {
    border-bottom: 1px solid #FFF;
}

@media screen and (min-width: 1440px) {
    .main_contents .functions > div:first-child {
        margin: 80px auto 0;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .functions > div:first-child {
        border-top: none;
        border-bottom: none;
        margin: 5rem auto 0;
    }

    .main_contents #design[name="1"] .functions > div:first-child,
    .main_contents #design[name="5"] .functions > div:first-child {
        border-top: none;
    }

    .main_contents #design[name="1"] .functions > div,
    .main_contents #design[name="5"] .functions > div {
        border-bottom: none;
    }
}


.main_contents .functions > div {
    border-bottom: 1px solid #000;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .main_contents .functions > div {
        border-bottom: none;
    }
}


.main_contents .functions .flex .txtWrap .funcLeftTxt {
    width: 57.6rem;
    margin: 0 0 0 auto;
    padding: 3rem 3rem 3rem 0;
}

@media screen and (min-width: 1440px) {
    .main_contents .functions .flex .txtWrap .funcLeftTxt {
        width: 576px;
        padding: 30px 30px 30px 0;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .functions .flex .txtWrap .funcLeftTxt {
        width: unset;
        margin: unset;
        padding: unset;
    }
}

@media screen and (min-width: 769px) {
    .main_contents .functions .flex .txtWrap .funcLeftTxt p span {
        text-wrap: nowrap;
    }
}

.main_contents .functions .flex .funcRightTxt {
    width: 57.6rem;
    margin: 0 auto 0 0;
    padding: 3rem 0 3rem 3rem;
}

@media screen and (min-width: 1440px) {
    .main_contents .functions .flex .funcRightTxt {
        width: 576px;
        padding: 30px 0 30px 30px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .functions .flex .funcRightTxt {
        width: unset;
        margin: unset;
        padding: unset;
    }
}

@media screen and (min-width: 769px) {
    .main_contents .functions .flex .leftImg {
        border-right: 1px solid #000;
    }

    .main_contents .functions .flex .rightImg {
        border-left: 1px solid #000;
    }
}

.main_contents .functions .colorPicker .colorCircle {
    margin: 2rem 0 5rem;
}

@media screen and (min-width: 1440px) {
    .main_contents .functions .colorPicker .colorCircle {
        margin: 20px 0 50px;
    }
}

.main_contents .functions .roundwhite {
    background: #fff;
    border: 1px solid #000;
    border-radius: 16px;
    gap: 2rem;
    font-size: 1.6rem;
    color: #000 !important;
    position: relative;
}

@media screen and (min-width: 1440px) {
    .main_contents .functions .roundwhite {
        gap: 20px;
        font-size: 16px;
    }
}

.main_contents #design[name="1"] .functions .roundwhite,
.main_contents #design[name="5"] .functions .roundwhite {
    border: 1px solid #FFF;
}

.main_contents .functions .roundwhite::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: rgba(0, 0, 0, 0);
    transition: background .3s;
    border-radius: 16px;
}

.main_contents .functions .roundwhite:hover::before {
    background: rgba(0, 0, 0, 0.2);
}

.main_contents .functions .roundwhite a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main_contents .functions .roundwhite:after {
    content: "";
    display: block;
    width: 3rem;
    height: 2rem;
    background: url("https://aquosmobile.sharp.com.tw/resources/aquos/images/sense9/arrow.png") no-repeat;
    background-size: contain;
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    pointer-events: none;
}

@media screen and (min-width: 1440px) {
    .main_contents .functions .roundwhite:after {
        width: 30px;
        height: 20px;
        right: 20px;
        bottom: 20px;
    }
}

.main_contents .functions .roundwhite > div {
    display: flex;
}

    .main_contents .functions .roundwhite > div > div:nth-child(1) {
        height: 15rem;
    }

@media screen and (min-width: 1440px) {
    .main_contents .functions .roundwhite > div > div:nth-child(1) {
        height: 150px;
    }
}

.main_contents .functions .roundwhite img {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-right: 1px solid #000;
}

.main_contents .functions .roundwhite > div > div:nth-child(2) {
    padding: 2rem 4rem 2rem 2.5rem;
    display: flex;
    align-items: center;
    line-height: 1.7;
}

@media screen and (min-width: 1440px) {
    .main_contents .functions .roundwhite > div > div:nth-child(2) {
        padding: 20px 20px 20px 25px;
    }
}

.main_contents .functions .clm-flx {
    display: flex;
    flex-direction: column;
}

    .main_contents .functions .clm-flx .ButtonLink_wrap {
        margin-top: 1rem;
    }

@media screen and (min-width: 1440px) {
    .main_contents .functions .clm-flx .ButtonLink_wrap {
        margin-top: 10px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .functions .clm-flx {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .main_contents #design .functions .clm-flx .ButtonLink_wrap {
        margin-top: 0;
    }
}

.main_contents .functions .funcImg {
    width: 50rem;
    margin: 3rem auto 0 0;
}

@media screen and (min-width: 1440px) {
    .main_contents .functions .funcImg {
        width: 500px;
        margin: 30px auto 0 0;
    }
}

.main_contents .otherFunc_flex {
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 10rem;
    margin-top: 1rem;
}

@media screen and (min-width: 1440px) {
    .main_contents .otherFunc_flex {
        gap: 100px;
        margin-top: 10px;
    }
}

.main_contents .otherFunc_flex > div {
    display: flex;
    flex-direction: column;
    /* justify-content: center;
	align-items: center; */
}

.main_contents .otherFunc_img {
    height: 12rem;
    margin: 3rem auto;
}

@media screen and (min-width: 1440px) {
    .main_contents .otherFunc_img {
        height: 120px;
        margin: 30px auto;
    }
}

.main_contents .otherFunc_img > img {
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .main_contents .functions .flex {
        flex-direction: column;
    }

        .main_contents .functions .flex .sp_order0 {
            order: 0;
        }

        .main_contents .functions .flex .sp_order1 {
            order: 1;
        }

        .main_contents .functions .flex .sp_order2 {
            order: 2;
        }

    .main_contents .functions .colorPicker .colorCircle {
        justify-content: center;
        margin: 0 0 2rem;
    }

    .main_contents .functions .funcImg {
        width: 100%;
        margin: 2rem auto 1rem;
    }

    .main_contents .functions .flex .imgWrap {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        margin-bottom: 2rem;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
    }

        .main_contents .functions .flex .imgWrap img {
            border-right: none;
            border-left: none;
        }

    .main_contents .otherFunc_flex {
        flex-direction: column;
        gap: 4rem;
    }

        .main_contents .otherFunc_flex > div > h4 {
            align-self: flex-start;
        }

    .main_contents .otherFunc_img {
        height: 10rem;
        margin: 2rem auto;
    }
}

/* display */
.main_contents #display {
    background: #67C56F;
    padding: 8rem 0 5rem;
    position: relative;
}

@media screen and (min-width: 1440px) {
    .main_contents #display {
        padding: 80px 0 50px;
    }
}

.main_contents #display .flex.flag {
    margin-top: 5rem;
}

@media screen and (min-width: 1440px) {
    .main_contents #display .flex.flag {
        margin-top: 50px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents #display .flex.flag {
        flex-direction: column;
        margin-top: 0;
    }
}

.main_contents #display .flex.icons {
    gap: 5rem;
    justify-content: right;
    padding-right: 5rem;
}

@media screen and (min-width: 1440px) {
    .main_contents #display .flex.icons {
        gap: 50px;
        padding-right: 50px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents #display .flex.icons {
        margin-top: 2rem;
        gap: 2rem;
        justify-content: center;
        padding-right: 5rem;
        padding-left: 5rem;
    }
}

.main_contents #display .flex.icons > img {
    width: 15rem;
}

@media screen and (min-width: 1440px) {
    .main_contents #display .flex.icons > img {
        width: 150px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents #display .flex.icons > img {
        width: 13rem;
    }
}

.main_contents #display .igzo {
    align-items: center;
    gap: 3rem;
    margin-top: 4rem;
}

@media screen and (min-width: 1440px) {
    .main_contents #display .igzo {
        gap: 30px;
        margin-top: 40px;
    }
}

@media screen and (min-width: 769px) {
    .main_contents #display .igzo.pc-only {
        display: flex !important;
    }
}

@media screen and (max-width: 768px) {
    .main_contents #display .igzo.sp-only {
        display: flex !important;
        flex-direction: column;
        gap: 3rem;
        margin: 0 auto 4rem;
    }
}

.main_contents #display .igzo > img:nth-child(1) {
    height: 5rem;
    width: auto;
}

@media screen and (min-width: 1440px) {
    .main_contents #display .igzo > img:nth-child(1) {
        height: 50px;
    }
}

.main_contents #display .igzo > img:nth-child(2) {
    height: 3rem;
    width: auto;
}

@media screen and (min-width: 1440px) {
    .main_contents #display .igzo > img:nth-child(2) {
        height: 30px;
    }
}

@media screen and (min-width: 769px) {
    .main_contents #display .flex.speaker {
        overflow: hidden;
    }

    .main_contents #display .speaker img {
        max-width: unset;
        width: 127%;
        height: auto;
        object-position: -10rem;
    }
}

@media screen and (min-width: 1440px) {
    .main_contents #display .speaker img {
        object-position: -100px;
    }
}

/* 画像比較 */

.comparison-block {
    overflow: hidden;
}

.changeImg img {
    max-width: none;
    user-select: none;
    pointer-events: none;
}


/* バー色調整 */
.icv__circle {
    background: #67C56F;
}

.icv__arrow-wrapper svg path {
    stroke: #000;
}

.main_contents #display .functions {
    margin-bottom: 0;
}

@media screen and (min-width: 1440px) {
    .main_contents #display {
        padding: 80px 0 50px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents #display {
        padding: 1rem 0 4rem;
    }
}

/* camera */
.main_contents #camera {
    background: #F4DB53;
    padding: 8rem 0 5rem;
    position: relative;
}

@media screen and (min-width: 1440px) {
    .main_contents #camera {
        padding: 80px 0 50px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents #camera {
        padding: 1rem 0 4rem;
    }

        .main_contents #camera .content {
            margin: 2rem auto 0;
        }

        .main_contents #camera .functions .content {
            margin: 4rem auto 0;
            width: 32.4rem;
        }
}

/* cameraSlide */
.main_contents .cameraSlide_swiper {
    position: relative;
    max-width: 1920px;
    margin: auto;
    overflow: hidden;
}

    .main_contents .cameraSlide_swiper .slide_navigation {
        display: flex;
        margin: 2rem 0 0;
        gap: 3rem;
        align-items: center;
        justify-content: end;
        width: 115.2rem;
    }

@media screen and (min-width: 1440px) {
    .main_contents .cameraSlide_swiper .slide_navigation {
        gap: 30px;
        width: 1152px;
        margin: 20px 0 0;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .cameraSlide_swiper {
        margin-bottom: 2rem;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        position: relative;
    }

        .main_contents .cameraSlide_swiper::after,
        .main_contents .cameraSlide_swiper::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            height: 100%;
            width: 4rem;
            z-index: 2;
        }

        .main_contents .cameraSlide_swiper::after {
            left: 0;
            background-image: linear-gradient(90deg, rgba(0, 0, 0, .52), rgba(255, 255, 255, 0));
        }

        .main_contents .cameraSlide_swiper::before {
            right: 0;
            background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, .52));
        }

        .main_contents .cameraSlide_swiper .slide_navigation {
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            justify-content: space-between;
            pointer-events: none;
            padding: 0 1rem;
            z-index: 3;
        }
}

.main_contents .cameraSlide_swiper .slide_prev,
.main_contents .cameraSlide_swiper .slide_next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    cursor: pointer;
    border-radius: 50%;
    transition: color .3s ease, background-color .3s ease, border .3s ease;
    position: relative;
}

@media screen and (min-width: 1440px) {

    .main_contents .cameraSlide_swiper .slide_prev,
    .main_contents .cameraSlide_swiper .slide_next {
        width: 40px;
        height: 40px;
    }
}

@media screen and (max-width: 768px) {

    .main_contents .cameraSlide_swiper .slide_prev,
    .main_contents .cameraSlide_swiper .slide_next {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 3rem;
        color: #FFF;
        border: none;
        pointer-events: auto;
        filter: drop-shadow(0 0 2px #000);
    }
}

.main_contents .cameraSlide_swiper .slide_prev {
    background: url(https://aquosmobile.sharp.com.tw/resources/aquos/images/sense9/arrow_prev.png) no-repeat;
    background-size: contain;
}

.main_contents .cameraSlide_swiper .slide_next {
    background: url(https://aquosmobile.sharp.com.tw/resources/aquos/images/sense9/arrow_next.png) no-repeat;
    background-size: contain;
}

    .main_contents .cameraSlide_swiper .slide_prev:hover,
    .main_contents .cameraSlide_swiper .slide_next:hover {
        background-color: rgb(0 0 0 / 0.2);
    }

@media screen and (max-width: 768px) {
    .main_contents .cameraSlide_swiper .slide_prev {
        background: url(https://aquosmobile.sharp.com.tw/resources/aquos/images/sense9/arrow_prev_sp.png) no-repeat;
        background-size: contain;
    }

    .main_contents .cameraSlide_swiper .slide_next {
        background: url(https://aquosmobile.sharp.com.tw/resources/aquos/images/sense9/arrow_next_sp.png) no-repeat;
        background-size: contain;
    }

        .main_contents .cameraSlide_swiper .slide_prev:hover,
        .main_contents .cameraSlide_swiper .slide_next:hover {
            background-color: unset;
        }
}


/* camera functions */
.main_contents #camera .functions > div:first-child {
    margin-top: 5rem;
}

.main_contents #camera .otherFunc_flex > div {
    flex-basis: 50%;
}

/* usability */
.main_contents #usability {
    background: #FFA490;
    padding: 8rem 0 5rem;
    position: relative;
}

.main_contents .usability_flx {
    display: flex;
    gap: 6rem;
    margin-top: 5rem;
}

    .main_contents .usability_flx > div {
        flex-basis: 30%;
    }

        .main_contents .usability_flx > div img {
            border: 1px solid #000;
        }

    .main_contents .usability_flx h4 {
        margin-bottom: 1.5rem;
    }

    .main_contents .usability_flx p {
        line-height: 2;
        margin-top: 1rem;
    }

    .main_contents .usability_flx > div > img {
        height: auto;
    }

@media screen and (min-width: 1440px) {
    .main_contents #usability {
        padding: 80px 0 50px;
    }

    .main_contents .usability_flx {
        gap: 60px;
        margin-top: 50px;
    }

        .main_contents .usability_flx h4 {
            margin-bottom: 15px;
        }

        .main_contents .usability_flx p {
            margin-top: 10px;
        }
}

@media screen and (max-width: 768px) {
    .main_contents #usability {
        padding: 1rem 0 5rem;
    }

    .main_contents .usability_flx {
        flex-direction: column;
        gap: 4rem;
        margin-top: 4rem;
    }
}

.main_contents #usability .ButtonLink_wrap {
    margin-top: 1rem;
}

@media screen and (min-width: 1440px) {
    .main_contents #usability .ButtonLink_wrap {
        margin-top: 10px;
    }
}

/* #support */

.main_contents #support {
    margin: 8rem auto 10rem;
}

@media screen and (min-width: 1440px) {
    .main_contents #support {
        margin: 80px auto 100px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents #support {
        margin: 5rem auto;
    }
}

.main_contents #support .content {
    border: 1px solid #000;
}


.main_contents #support h2 {
    text-align: center;
    margin-top: 3rem;
}

@media screen and (min-width: 1440px) {
    .main_contents #support h2 {
        margin-top: 30px;
    }
}

.main_contents .supportTextWrap {
    padding: 0 0 2rem;
    text-align: center;
}

@media screen and (min-width: 1440px) {
    .main_contents .supportTextWrap {
        padding: 0 0 20px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .supportTextWrap {
        padding: 1rem 2rem;
    }
}

.main_contents .supportText {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 38.3rem;
    margin: 0 auto;
    font-size: 2rem;
    line-height: 1.5;
    letter-spacing: .04rem;
}

@media screen and (min-width: 1440px) {
    .main_contents .supportText {
        width: 383px;
        font-size: 20px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .supportText {
        width: 100%;
        font-size: 1.6rem;
        line-height: 6rem;
        letter-spacing: .032rem;
    }
}

.main_contents .supportText > span {
    display: flex;
    align-items: center;
}

    .main_contents .supportText > span > span {
        margin: 0 1rem 0 .8rem;
        font-size: 5.2rem;
        font-weight: 500;
        line-height: 7.8rem;
    }

@media screen and (min-width: 1440px) {
    .main_contents .supportText > span > span {
        margin: 0 10px 0 8px;
        font-size: 52px;
        line-height: 78px;
    }
}

@media screen and (max-width: 768px) {
    .main_contents .supportText > span > span {
        font-size: 3.2rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: .064rem;
    }
}

.main_contents .supportText + .supportText {
    margin: -1.6rem auto 0;
}

@media screen and (min-width: 1440px) {
    .main_contents .supportText + .supportText {
        margin: -16px auto 0;
    }
}

.main_contents #buy {
    margin: 8rem auto 10rem;
    text-align: center;
}

.back_to_top {
    box-sizing: content-box !important;
    font-size: 0.714rem;
    text-transform: none;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    display: none;
    background: #b42222;
    width: 40px;
    padding: 10px;
    cursor: pointer;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 20;
}