@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400&family=Klee+One:wght@400;600&family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');
.l_header,
.l_main .l_footer {
    opacity: 0;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
object,
iframe,
em,
ul,
ol,
li,
label,
dl,
dt,
dd,
form,
label,
table,
tbody,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    list-style-type: none;
}
html {
    overflow-y: scroll;
    font-size: 62.5%;
    letter-spacing: 0.02em;
    line-height: 1.5;
}
* {
    box-sizing: border-box;
}
img {
    border: none;
    vertical-align: bottom !important;
    line-height: 0;
    font-size: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
}
body {
    font: 1.6rem/1.5 'Noto Sans JP', sans-serif;
    background: #fff;
    color: #000;
}
.clearfix {
    zoom: 1;
    min-height: 1px;
}
.clearfix:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    font-size: 0.1em;
    line-height: 0;
}
.clearboth {
    clear: both;
    height: 1px;
}
*html .clearfix {
    height: 1px; /*\*/ /*/ height: auto; overflow: hidden; /**/
}
.nopc {
    display: none;
}
.nosp {
    display: inline-block;
}
a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s;
}
a:hover {
    opacity: 0.7;
    text-decoration: none !important;
}
.kome {
    display: block;
    font: 400 1.4rem/1.5 'Noto Sans JP';
    text-align: left;
}
.kome dd {
    margin: -1.5em 0 0 1.1em;
}
sup {
    font: 1.4rem/1 'Noto Sans JP';
    vertical-align: text-top;
    color: inherit;
}

@media screen and (max-width: 768px) {
    body {
        font: 1.4rem/1.5 'Noto Sans JP';
    }
    .nosp {
        display: none;
    }
    .nopc {
        display: inline-block;
    }
    .kome {
        display: block;
        font: 400 1.2rem/1.5 'Noto Sans JP';
    }
    sup {
        font: 1.2rem/1 'Noto Sans JP';
    }
}

/* --------------------------------------------------------------------------
   header / footer
-------------------------------------------------------------------------- */

header {
    width: 1200px;
    margin: 0 auto;
    padding: 15px 0 20px;
}
header h1 {
    width: 208px;
    height: 38px;
}
header h1 a,
footer h1 a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(/assets/images/logo.svg) top left no-repeat;
    background-size: contain;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.totop {
    position: fixed;
    bottom: 240px;
    right: 20px;
    width: 100px;
    height: 100px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/bddd14e9e99143d3b2ac7d1685ae6b05/ico.png)
        0 0 no-repeat #0168b6;
    background-size: 300% auto;
    border-radius: 50px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

footer {
    width: 100%;
    min-width: 1200px;
    margin: 0 auto;
    padding: 60px 0 0;
    border-top: solid 1px #0168b6;
}
footer .sitemap {
    width: 1200px;
    margin: 0 auto;
    padding: 0 0 30px;
}
footer h1 {
    position: relative;
    width: 225px;
    height: 40px;
}
footer ul {
    display: flex;
    justify-content: space-between;
    margin: 54px 0 0;
}
footer li {
    width: 216px;
}
footer li a {
    font: 1.6rem/1.5 'Noto Sans JP';
    color: #0168b6;
    text-decoration: underline;
}
footer li a::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 11px;
    margin-right: 10px;
    background: url(/assets/images/layer.svg) top left no-repeat;
    background-size: contain;
}
footer .copyright {
    padding: 10px 0;
    background: #0168b6;
    color: #fff;
    font: 12px/1 'Noto Sans JP';
    text-align: center;
}

@media screen and (min-width: 769px) {
    footer h1 a::after {
        content: '';
        display: inline-block;
        position: absolute;
        bottom: -24px;
        left: 0;
        width: 54px;
        height: 5px;
        border-radius: 3px;
        background: linear-gradient(to right, #2b68b0 50%, #f7d201 50%);
    }
}
@media screen and (max-width: 768px) {
    header {
        width: 100%;
        padding: 10px 3%;
    }
    header h1 {
        width: 150px;
        height: 26px;
    }

    .totop {
        bottom: 60px;
        width: 60px;
        height: 60px;
    }

    footer {
        min-width: 100%;
        padding: 40px 0 0;
    }
    footer .sitemap {
        width: 100%;
        padding: 0 15px 30px;
        box-sizing: border-box;
    }
    footer h1 {
        width: 170px;
        min-height: 30px;
    }
    footer ul {
        margin: 0;
        flex-wrap: wrap;
    }
    footer li {
        width: 48%;
        margin: 30px 0 0;
    }
    footer li a {
        font: 1.2rem/1.5 'Noto Sans JP';
    }
    footer .copyright {
        font: 10px/1 'Noto Sans JP';
    }
}

/* --------------------------------------------------------------------------
   kv / common
-------------------------------------------------------------------------- */

.dp * {
    box-sizing: border-box;
}
#kv {
    position: relative;
    width: 1280px;
    margin: 0 auto;
    padding: 72px 0 0;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/4e1113e3fb794172b22fd693becb8805/kv.jpg)
        top center no-repeat;
    background-size: auto 764px;
}
#kv .inner {
    position: relative;
    width: 1080px;
    margin: 0 auto;
    padding: 70px 0 0;
}
#kv h1 {
    width: 580px;
    margin: 0 0 60px;
}
#kv h1 span {
    display: block;
    width: 100%;
    height: 0;
    padding: 0 0 18.4%;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/542eef88066546f48b3307709199a224/h1.png)
        top left no-repeat;
    background-size: 100% auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#kv .lead {
    width: 560px;
    margin: 0 0 200px 140px;
}
#kv .lead span {
    display: block;
    width: 100%;
    height: 0;
    padding: 0 0 30.4%;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/e7d092b0047241e1920fe9748610a1c7/kv_lead.png)
        top left no-repeat;
    background-size: 100% auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#kv nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
#kv nav a {
    position: relative;
    display: block;
    width: 164px;
    padding: 10px 20px;
    background: #00b7d6;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    color: #fff;
    font: 500 1.5rem/1.4 'Noto Sans JP';
}
#kv nav a::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/bddd14e9e99143d3b2ac7d1685ae6b05/ico.png) -20px
        0 no-repeat;
    background-size: 600% auto;
}

section {
    position: relative;
    width: 100%;
    padding: 72px 0;
}
section .wrap {
    width: 1080px;
    margin: 0 auto;
}
section h2 {
    margin: 0 0 50px;
    font: 400 7rem/1.2 'Noto Sans JP';
}
section h2 span {
    color: #0096d3;
}

@media screen and (min-width: 769px) {
    #kv {
        min-height: 764px;
    }
    #kv nav a {
        flex: 1;
    }
    section {
        min-width: 1100px;
    }
}
@media screen and (max-width: 768px) {
    #kv {
        max-width: 100%;
        overflow: hidden;
        background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/d0f8af5de36a4d6cab22791a746f1dab/kv_s.jpg)
            top center no-repeat;
        background-size: 100% auto;
    }
    #kv .inner {
        width: 90%;
        padding: 10vw 0 0;
    }
    #kv h1 {
        width: 100%;
        margin: 0 0 12vw;
    }
    #kv .lead {
        width: 100%;
        margin: 0 0 50vw;
    }
    #kv nav {
        flex-wrap: wrap;
    }
    #kv nav a {
        width: 48%;
    }

    section {
        width: 100%;
        padding: 48px 0;
    }
    section .wrap {
        width: 100%;
    }
    section h2 {
        margin: 0 auto 24px;
        font: 400 3rem/1.4 'Noto Sans JP';
        text-align: center;
    }
}

/* animation */
[class*='ani-'] {
    display: inline-block;
    height: 0;
    margin: 0;
    vertical-align: baseline;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/2a1101b73a7940168bee32ad7cc9cbc7/anim.png)
        top left no-repeat;
    overflow: hidden;
}
.ani-1 {
    position: absolute;
    top: 10px;
    right: 50px;
    width: 140px;
    height: 140px;
    background-position: 0 0;
    background-size: 300% auto;
    animation: blink 1s ease-in-out infinite alternate;
}
.ani-2 {
    position: absolute;
    top: 10px;
    right: 50px;
    width: 140px;
    height: 140px;
    background-position: 50% 0;
    background-size: 300% auto;
    animation: blink 1s ease-in-out infinite alternate;
    animation-delay: 1s;
}
.ani-3 {
    position: absolute;
    top: 10px;
    right: 50px;
    width: 140px;
    height: 140px;
    background-position: 100% 0;
    background-size: 300% auto;
    transform-origin: 50% 50%;
    animation: shake 0.5s ease-in-out infinite alternate;
}
.ani-4 {
    position: absolute;
    top: 304px;
    right: 115px;
    width: 88px;
    height: 88px;
    background-position: 0 100%;
    background-size: 300% auto;
    animation: spin 3s ease infinite;
    transform-origin: 50% 50%;
}
.ani-5 {
    position: absolute;
    top: 244px;
    right: 15px;
    width: 111px;
    height: 111px;
    background-position: 50% 100%;
    background-size: 300% auto;
    animation: spin 3s ease infinite;
    transform-origin: 50% 61%;
}
.wind {
    position: absolute;
    top: 320px;
    right: 100px;
    width: 510px;
    height: 110px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/4b12daf9e6e244a48bbd3ba7b507bb83/wind.png)
        0 0 no-repeat;
    background-size: 100% auto;
    animation: flow 2s ease-in-out infinite alternate;
}

@media screen and (max-width: 768px) {
    .ani-1 {
        right: 10px;
        width: 100px;
        height: 100px;
    }
    .ani-2 {
        right: 10px;
        width: 100px;
        height: 100px;
    }
    .ani-3 {
        right: 10px;
        width: 100px;
        height: 100px;
    }
    .ani-4 {
        top: 88vw;
        right: 10.66vw;
        width: 12.8vw;
        height: 12.8vw;
    }
    .ani-5 {
        top: 79vw;
        right: -3.6vw;
        width: 16vw;
        height: 16vw;
    }
    .wind {
        top: 80vw;
        width: 70vw;
        height: 15.1vw;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
        transform: scale(1.1, 1.1);
    }
    50% {
        transform: scale(0.5, 0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
}
@keyframes shake {
    from {
        transform: rotate(20deg);
    }
    to {
        transform: rotate(0);
    }
}
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes flow {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* --------------------------------------------------------------------------
   about
-------------------------------------------------------------------------- */

#about {
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/94b3b0459f374ef7866c158e015ffc09/base_about.png)
        bottom left no-repeat;
    background-size: 100% auto;
}
#about .lead {
    font: 300 1.8rem/2 'Noto Sans JP';
}
#about .lead span {
    font-weight: 500;
    color: #0257c2;
}

.struct {
    margin: 30px 0;
    padding: 24px 50px;
    background: #e2e5e9;
    border-radius: 36px;
}
.struct h3 {
    font: 500 3.2rem/1.8 'Noto Sans JP';
    color: #0257c2;
    letter-spacing: 1em;
}
.struct .fee {
    margin: 10px 0 25px;
    padding: 0 40px;
    background: #69c4eb;
    box-shadow: 0 15px 0 rgba(0, 0, 0, 0.1);
    border-radius: 36px;
    text-align: center;
}
.struct .fee .fee1 {
    position: relative;
    display: inline-block;
    padding-right: 200px;
    font: 500 3.2rem/2 'Noto Sans JP';
    letter-spacing: 1em;
    color: #fff;
}
.struct .fee .fee1 span {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 140px;
    height: 84px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/a8b782f2f2bf4fde8f1d6fb16ba3b18b/fee1.png)
        top left no-repeat;
    background-size: 100% auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.struct .fee.fee2 {
    padding: 20px 40px 40px;
}
.struct .fee .fee3 {
    font: 500 2.4rem/2 'Noto Sans JP';
    color: #fff;
}
.struct .fee h4 {
    font: 500 4rem/1.8 'Noto Sans JP';
    color: #2c496b;
}
.struct .fee h5 {
    margin: 0 0 10px;
    font: 700 1.9rem/1.4 'Noto Sans JP';
    color: #fff;
}
.struct .fee h5 span {
    font-size: 150%;
    color: #0257c2;
}
.struct .old {
    position: relative;
    padding: 40px 24px;
    background: #e6e6e6;
    border-radius: 12px;
}
.struct .scale {
    position: relative;
    width: 100%;
    margin: 20px 0;
    padding: 20px 40px;
    background: #fff;
    border: solid 4px #2c496b;
    border-width: 0 4px 0 4px;
}
.struct .scale::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -4px;
    width: calc(100% + 8px);
    height: 20px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/d2e552f5c4e14da29a2d0627410bd144/scale.png)
        0 0 no-repeat;
    background-size: 100% 200%;
}
.struct .scale::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -4px;
    width: calc(100% + 8px);
    height: 20px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/d2e552f5c4e14da29a2d0627410bd144/scale.png)
        0 100% no-repeat;
    background-size: 100% 200%;
}
.struct .scale .cost1 {
    position: relative;
    height: 40px;
    margin: 0 0 20px;
    color: #fff;
}
.struct .scale .cost1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 48px;
    height: 48px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/bddd14e9e99143d3b2ac7d1685ae6b05/ico.png) -48px -48px
        no-repeat #3fa9f5;
    background-size: 300% auto;
    transform: translate(-50%, 30px);
    border-radius: 25px;
    box-shadow: 0 24px 0 rgba(0, 0, 0, 0.1);
}
.struct .scale .cost1 dt {
    width: 240px;
    padding: 2px 24px;
    font: 700 1.8rem/2 'Noto Sans JP';
    text-align: left;
    background: linear-gradient(to right, #2c496b, #000 60%);
    border-radius: 25px;
}
.struct .scale .cost1 dd {
    position: absolute;
    top: 0;
    left: 180px;
    width: 584px;
    padding: 2px 100px;
    background: #2c496b;
    border-radius: 24px 0 0 24px;
    font: 700 2rem/1.8 'Noto Sans JP';
    text-align: right;
}
.struct .scale .cost1 dd::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: linear-gradient(to top right, #2c496b 50%, #fff 50%);
}
.struct .scale .cost1 dd::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: linear-gradient(to top left, #fff 50%, #2c496b 50%);
}
.struct .scale .cost2 {
    position: relative;
    height: 70px;
    color: #fff;
    z-index: 9;
}
.struct .scale .cost2 dt {
    display: block;
    width: 240px;
    height: 40px;
    padding: 2px 24px;
    transform: translateY(30px);
    font: 700 1.8rem/2 'Noto Sans JP';
    text-align: left;
    background: linear-gradient(to right, #8fbb99, #5a8585 60%);
    border-radius: 25px;
}
.struct .scale .cost2 dd {
    position: absolute;
    top: 0;
    left: 180px;
    width: 584px;
    padding: 32px 80px 2px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/7919a732a7be44e5a81406811bb340a7/cost2.png)
        bottom left no-repeat;
    background-size: cover;
    font: 700 2rem/1.8 'Noto Sans JP';
    text-align: right;
}
.struct .usage {
    background: linear-gradient(to right, #5aabcf, #2c496b);
    border-radius: 25px;
    font: 900 2.2rem/2 'Noto Sans JP';
    box-shadow: 0 15px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
}
@media screen and (min-width: 769px) {
}

@media screen and (max-width: 768px) {
    #about h2 {
        width: 90%;
        margin: 0 auto 24px;
    }
    #about h2 span {
        display: block;
    }
    #about .lead {
        width: 90%;
        margin: 0 auto;
        font: 300 1.5rem/1.6 'Noto Sans JP';
    }
    #about .kome.sub {
        width: 90%;
        margin: 0 auto;
    }
    .struct {
        width: 100%;
        padding: 24px 3%;
        border-radius: 16px;
    }
    .struct h3 {
        font: 500 2.4rem/1.8 'Noto Sans JP';
        text-align: center;
    }
    .struct .fee {
        padding: 0 3%;
    }
    .struct .fee .fee1 {
        padding-right: 82px;
        font: 500 2.2rem/2 'Noto Sans JP';
    }
    .struct .fee .fee1 span {
        width: 100px;
        height: 60px;
    }
    .struct .fee.fee2 {
        padding: 20px 3%;
    }
    .struct .fee .fee3 {
        font: 500 2rem/2 'Noto Sans JP';
    }
    .struct .fee h4 {
        font: 500 2.4rem/1.8 'Noto Sans JP';
    }
    .struct .fee h5 {
        font: 700 1.7rem/1.8 'Noto Sans JP';
    }
    .struct .fee h5 span {
        display: block;
    }
    .struct .old {
        padding: 24px 3%;
    }
    .struct .scale {
        margin: 10px 0;
        padding: 20px 3%;
        border-width: 0 2px 0 2px;
    }
    .struct .scale::before {
        top: -10px;
        left: -2px;
        width: calc(100% + 4px);
        height: 10px;
    }
    .struct .scale::after {
        bottom: -10px;
        left: -2px;
        width: calc(100% + 4px);
        height: 10px;
    }
    .struct .scale .cost1 dt {
        width: 45%;
        padding: 2px 10px;
        font: 700 1.2rem/2.7 'Noto Sans JP';
    }
    .struct .scale .cost1 dd {
        left: 35%;
        width: 65%;
        padding: 2px 20px;
        font: 700 1.8rem/1.8 'Noto Sans JP';
    }
    .struct .scale .cost1 dd::before,
    .struct .scale .cost1 dd::after {
        width: 17px;
        height: 17px;
    }
    .struct .scale .cost2 dt {
        width: 45%;
        padding: 0 10px;
        font: 700 1.2rem/40px 'Noto Sans JP';
        transform: translateY(26px);
    }
    .struct .scale .cost2 dd {
        left: 35%;
        width: 65%;
        padding: 32px 10px 2px;
        font: 700 1.8rem/1.8 'Noto Sans JP';
        background-size: 100% 100%;
    }
    .struct .usage {
        font: 900 1.6rem/2.4 'Noto Sans JP';
        box-shadow: 0 7px 0 rgba(0, 0, 0, 0.1);
    }
}

/* new plan */
.struct .new {
    position: relative;
    padding: 40px 24px;
    background: #c3e7f7;
    border-radius: 12px;
}
.struct .new::before {
    content: '';
    display: block;
    position: absolute;
    top: -80px;
    right: 0;
    width: 730px;
    height: 88px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/e0263025463b476294e13cb917eaff17/new.png)
        top right no-repeat;
    background-size: cover;
}
.struct .new h6 {
    position: relative;
    cursor: pointer;
}
.struct .new .cost3 {
    display: flex;
    position: relative;
    padding: 30px 0 15px;
    color: #fff;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/b46e90d317984c33a30c90d042956969/cost3.png)
        top left no-repeat;
    background-size: cover;
}
.struct .new .cost4 {
    display: flex;
    position: relative;
    padding: 10px 0 13px;
    color: #fff;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/daf07f1bc9004e2ca96369f5784e1438/cost4.png)
        top left no-repeat;
    background-size: cover;
}
.struct .new h6 span:first-of-type {
    display: block;
    width: 20%;
    font: 900 1.4rem/2 'Noto Sans JP';
    text-align: center;
}
.struct .new h6 span:last-of-type {
    display: block;
    width: 80%;
    padding: 0 60px;
    font: 900 2.4rem/1.2 'Noto Sans JP';
    text-align: left;
}
.struct .new h6 .more {
    display: block;
    position: absolute;
    width: 120px;
    height: 48px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/3685bece48c54c7f997d6f15fbe787bb/more.png)
        top right no-repeat;
    background-size: 100% auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.struct .new .cost4 span:first-of-type {
    color: #2c496b;
}
.struct .new .cost4 .ico-op {
    transform: translateY(-55%);
}
.struct .new .cost3 .more {
    top: -4px;
    right: 6px;
}
.struct .new .cost4 .more {
    top: -28px;
    right: 6px;
}

.struct .new .detail {
    display: none;
    padding: 24px 36px;
    text-align: left;
}
.struct .new .detail p {
    margin: 0 0 16px;
    font: 400 1.6rem/2 'Noto Sans JP';
}
.struct .new .detail .beil {
    display: flex;
    margin: 0 0 24px;
    padding: 10px 0;
    align-items: center;
    border-bottom: dashed 2px #add998;
    color: #2c496b;
}
.struct .new .detail .beil:first-of-type {
    margin: 0;
    border-top: dashed 2px #add998;
}
.struct .new .detail .beil li:first-child {
    width: 26%;
    font: 500 2.4rem/1.2 'Noto Sans JP';
    text-align: center;
}
.struct .new .detail .beil li:last-child {
    width: 74%;
    font: 500 1.6rem/1.4 'Noto Sans JP';
}
.struct .new .detail .note {
    margin: 12px 0 0 3.1em;
    text-indent: -3.1em;
    font: 400 1.4rem/1.5 'Noto Sans JP';
}
.struct .new .detail .kome dd {
    margin: -1.5em 0 0 1.5em;
}

.struct .new .price {
    display: flex;
    justify-content: space-between;
}
.struct .new .price .selector {
    position: relative;
    width: 48%;
    border: solid 2px #009468;
    border-radius: 4px;
    background: #fff;
}
.struct .new .price .selector select {
    position: relative;
    width: 100%;
    padding: 0 1em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    outline: none;
    background: transparent;
    box-shadow: none;
    font: 400 2rem/2.2 'Noto Sans JP';
    color: #2c496b;
}
.struct .new .price .selector::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 4px;
    width: 40px;
    height: 40px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/bddd14e9e99143d3b2ac7d1685ae6b05/ico.png) -120px
        0 no-repeat;
    background-size: 600% auto;
    transform: translateY(-50%);
}
.struct .new .price .result {
    position: relative;
    width: 48%;
    background: #e8f6c8;
    border-bottom: solid 2px #009468;
    text-align: center;
    color: #009468;
}
.struct .new .price .result p {
    margin: 0;
    font: 700 3.6rem/1.4 'Noto Sans JP';
}
.struct .new .price .result span {
    position: absolute;
    bottom: 6px;
    right: 12px;
    font: 700 2rem/1 'Noto Sans JP';
}
.struct .new .txt {
    margin: 0 0 10px;
    font: 500 1.4rem/1.2 'Noto Sans JP';
    color: #2c496b;
    text-align: right;
}

@media screen and (max-width: 768px) {
    .struct .new {
        padding: 24px 3%;
    }
    .struct .new::before {
        top: -20vw;
        width: 90%;
        height: 15vw;
        background-size: 100% auto;
    }
    .struct .new .cost3 {
        display: block;
        padding: 5px 0 10px;
        background: url(https://looop-denki.com/api/image?imageName=/d5726c1634ea4f76914e133fa4a9b1d9/7627e16a15884ee99aedfddb18f422cc/cost3_s.png)
            top left no-repeat;
        background-size: 100% 100%;
    }
    .struct .new .cost4 {
        display: block;
        padding: 5px 0 10px;
        background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/9a50afdc9631406a9a75144ebc4ab238/cost4_s.png)
            top left no-repeat;
        background-size: 100% 100%;
    }
    .struct .new .cost4 .ico-op {
        transform: translateY(0);
    }
    .struct .new h6 span {
        display: block;
        text-align: center;
    }
    .struct .new h6 span:first-of-type {
        width: 100%;
        font: 900 1.2rem/1.8 'Noto Sans JP';
    }
    .struct .new h6 span:last-of-type {
        width: 100%;
        padding: 0;
        font: 900 1.8rem/1.6 'Noto Sans JP';
        text-align: center;
    }
    .struct .new h6 .more {
        width: 80px;
        height: 32px;
    }
    .struct .new .cost3 .more {
        top: 4px;
        right: 0;
    }
    .struct .new .cost4 .more {
        top: 4px;
        right: 0;
    }
    .struct .new .detail {
        padding: 16px 0;
    }
    .struct .new .detail p {
        font: 400 1.4rem/1.5 'Noto Sans JP';
    }
    .struct .new .detail .beil {
        display: block;
        padding: 10px;
    }
    .struct .new .detail .beil li {
        width: 100%;
        font: 500 1.8rem/1.2 'Noto Sans JP';
        text-align: left;
    }
    .struct .new .detail .beil li:first-child {
        width: 100%;
        font: 500 1.8rem/1.4 'Noto Sans JP';
    }
    .struct .new .detail .beil li:last-child {
        width: 100%;
        font: 500 1.4rem/1.4 'Noto Sans JP';
    }
    .struct .new .detail .note {
        font: 400 1.2rem/1.5e 'Noto Sans JP';
    }
    .struct .new .price {
        display: block;
    }
    .struct .new .price .selector {
        width: 100%;
        margin: 0 0 16px;
    }
    .struct .new .price .result {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   feature
-------------------------------------------------------------------------- */

#feature {
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/385649e540c44e48a1d7957d25837b04/base_feat.png)
        top center no-repeat #d9f4f3;
    background-size: 100% auto;
}
#feature .point {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
#feature .point li {
    width: 40%;
    margin: 0 0 40px;
}
#feature .point li h3 {
    margin: 0 0 20px;
    font: 700 3rem/1.4 'Noto Sans JP';
    color: #2c496b;
    text-align: center;
}
#feature .point li p {
    font: 400 1.6rem/1.5 'Noto Sans JP';
}
#feature .point li i {
    display: block;
}
#feature .point li span {
    color: #0257c2;
    text-decoration: underline;
}
#feature .point li span.num {
    font-size: 150%;
}
#feature .point li a {
    position: relative;
    display: block;
    background: linear-gradient(to right, #9ddbd9, #59bccb);
    margin: 16px 0;
    border-radius: 30px;
    font: 500 1.8rem/2.4 'Noto Sans JP';
    color: #fff;
    text-align: center;
}
#feature .point li a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    width: 10px;
    height: 10px;
    border: solid 2px #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-50%) rotate(45deg);
}
#feature .example {
    padding: 60px;
    background: #fff;
    border-radius: 20px;
    text-align: center;
}
#feature .example h3 {
    margin: 0 0 20px;
    font: 700 2.6rem/1.8 'Noto Sans JP';
}
#feature .example h3 span {
    color: #0257c2;
}
#feature .example .txt {
    font: 400 1.6rem/1.5 'Noto Sans JP';
}
#feature .example .more {
    position: relative;
    width: 400px;
    margin: 20px auto 0;
    cursor: pointer;
    background: linear-gradient(to right, #bec2cc, #98bccb);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 30px;
    font: 500 1.7rem/2.4 'Noto Sans JP';
    color: #fff;
}
#feature .example .detail {
    padding: 20px 0 0;
}
#feature .example .graph {
    display: flex;
    justify-content: space-between;
}
#feature .example .graph li {
    width: 48%;
}
#feature .example .graph li p {
    margin: 0 0 12px;
    font: 1.6rem/1.5 'Noto Sans JP';
}
#feature .example .graph li .ao {
    font-size: 120%;
    color: #0257c2;
}
#feature .example .graph li .ki {
    font-size: 120%;
    color: #fabe00;
}
#feature .example .graph li .sm {
    font-size: 90%;
}

@media screen and (max-width: 768px) {
    #feature .wrap {
        width: 90%;
        margin: 0 auto;
    }
    #feature .point {
        display: block;
    }
    #feature .point li {
        width: 100%;
        margin: 0 0 36px;
    }
    #feature .point li h3 {
        margin: 0 0 16px;
        font: 700 2rem/1.4 'Noto Sans JP';
    }
    #feature .point li p {
        font: 400 1.4rem/1.5 'Noto Sans JP';
    }
    #feature .point li i {
        width: 80%;
        margin: 0 auto;
    }
    #feature .example {
        padding: 24px 3%;
    }
    #feature .example h3 {
        margin: 0 0 12px;
        font: 700 1.7rem/1.6 'Noto Sans JP';
    }
    #feature .example .txt {
        font: 400 1.4rem/1.5 'Noto Sans JP';
        text-align: left;
    }
    #feature .example .more {
        width: 100%;
        font: 500 1.5rem/2.4 'Noto Sans JP';
    }
    #feature .example .graph {
        display: block;
    }
    #feature .example .graph li {
        width: 100%;
    }
    #feature .example .graph li:last-child {
        margin: 20px 0 0;
    }
    #feature .example .graph li p {
        font: 1.4rem/1.5 'Noto Sans JP';
    }
}

/* --------------------------------------------------------------------------
   smart
-------------------------------------------------------------------------- */

#smart {
    padding: 72px 0 0;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/4b33dde13922401d9d27ea6db06255dd/base_smart.png)
        top center no-repeat;
    background-size: 100% auto;
}
#smart h2 {
    text-align: center;
}
#smart .lead {
    margin: 0 0 36px;
    font: 400 1.6rem/2 'Noto Sans JP';
    text-align: center;
}
#smart {
    .text-primary {
        color: #0168B6;
    }
    .font-bold {
        font-weight: 700;
    }
    .text-center {
        text-align: center;
    }
    .w-1\/2 {
        width: 50%;
    }
    .my-20 {
        margin-block: 20px;
    }
    .smart-otoku {
        display: none;
    }
    .smart-wait-container {
        background: #EDF6FC;
        border-radius: 15px;
    }
    .smart-wait-same {
        width: fit-content;
        margin: auto;
        padding: 8px 10px;
        background-color: #fff;
        border-radius: 8px;
        line-height: 1;
    }
    @media screen and (max-width: 768px) {
        .block-sp {
            display: block;
        }
        .smart-otoku {
            background: #EDF6FC;
            border-radius: 15px;
            padding: 40px 20px;
        }
        .smart-otoku-ttl {
            font-size: 18px;
        }
        .smart-wait-container {
            padding: 30px 20px;
            margin-top: 20px;
        }
        .smart-wait-flex {
            flex-direction: column;
        }
        .smart-wait-same {
            font-size: 14px;
        }
    }
    @media screen and (min-width: 769px) {
        .block-pc {
            display: block;
        }
        .smart-otoku-container {
            max-width: 992px;
            margin: auto;
            gap: 48px;
        }
        .smart-otoku-ttl {
            font-size: 40px;
        }
        .smart-otoku-col-right {
            background: #EDF6FC;
            border-radius: 15px;
            padding: 32px;
        }
        .smart-wait {
            max-width: 976px;
            margin-inline: auto;
        }
        .smart-wait-container {
            padding: 48px;
            margin-top: 40px;
        }
        .smart-wait-flex {
            flex-direction: row;
            gap: 48px;
        }
        .smart-wait-same {
            font-size: 18px;
        }
    }
}

@media screen and (max-width: 768px) {
    #smart .wrap {
        width: 90%;
        margin: 0 auto;
    }
    #smart .lead {
        margin: 0 0 24px;
        font: 400 1.4rem/1.8 'Noto Sans JP';
    }
}

/* --------------------------------------------------------------------------
   shift
-------------------------------------------------------------------------- */

#shift {
    padding: 144px 0 60px;
    background: #bfe6f6;
}
#shift::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 144px;
    background: linear-gradient(to right top, #bfe6f6 49.8%, #fff 50.2%);
}
#shift h2 {
    text-align: center;
}
#shift .graph {
    display: flex;
    justify-content: space-between;
    margin: 0 0 72px;
}
#shift .graph li {
    width: 48%;
}
#shift .graph li p {
    margin: 0 0 16px;
    font: 400 1.6rem/2 'Noto Sans JP';
}
#shift .app {
    position: relative;
    border: solid 6px #fff;
    border-radius: 20px;
    text-align: center;
    padding: 50px 30px;
    color: #2c496b;
}
#shift .app::before {
    content: '';
    position: absolute;
    bottom: 180px;
    left: -6px;
    width: 140px;
    height: 140px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/b3d03a2bef6342c9a05bf36c3d5bf413/app_before.png)
        top left no-repeat;
    background-size: 100% auto;
}
#shift .app::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: 0;
    width: 160px;
    height: 224px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/07720e07a6b54c46b8cf2c31bcaeac7c/app_after.png)
        top left no-repeat;
    background-size: 100% auto;
}
#shift .app h3 {
    display: inline-block;
    position: absolute;
    top: -1em;
    left: 50%;
    background: #bfe6f6;
    padding: 0 10px;
    font: 700 2.8rem/2 'Noto Sans JP';
    transform: translateX(-50%);
    white-space: nowrap;
    border-radius: 30px;
}
#shift .app p {
    width: 72%;
    padding: 0 80px 0 120px;
    font: 700 1.8rem/1.5 'Noto Sans JP';
    text-align: left;
}
#shift .app p:first-of-type {
    margin: 0 0 20px;
    padding: 0 80px 20px 120px;
    border-bottom: solid 6px #fff;
}
#shift .app p span {
    display: block;
    font-weight: 500;
    font-size: 90%;
}

@media screen and (min-width: 769px) {
    #shift .app {
        background-image: linear-gradient(to right, #bfe6f6 50%, rgba(255, 255, 255, 0) 70%),
            url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/f917e3be1ae1449baa17117ee975edc7/app.jpg);
        background-position: top left, top right;
        background-repeat: no-repeat, no-repeat;
        background-size: 100% auto, auto 100%;
    }
    #shift .app::before {
        bottom: 70px;
    }
}
@media screen and (max-width: 768px) {
    #shift {
        padding: 96px 0 48px;
    }
    #shift h2 span {
        display: block;
    }
    #shift .wrap {
        width: 90%;
        margin: 0 auto;
    }
    #shift::before {
        height: 96px;
    }
    #shift .graph {
        display: block;
        margin: 0 0 54px;
    }
    #shift .graph li {
        width: 100%;
        margin: 0 0 12px;
    }
    #shift .graph li p {
        margin: 0 0 12px;
        font: 400 1.4rem/1.5 'Noto Sans JP';
    }
    #shift .app {
        border: solid 3px #fff;
        border-radius: 12px;
        padding: 36px 0 24px;
    }
    #shift .app::before {
        width: 20vw;
        height: 20vw;
    }
    #shift .app::after {
        bottom: -14vw;
        width: 30vw;
        height: 42vw;
    }
    #shift .app h3 {
        top: -1.4em;
        left: 20vw;
        font: 700 2rem/1.4 'Noto Sans JP';
        transform: translateX(0);
    }
    #shift .app p {
        width: 100%;
        padding: 0 5%;
        font: 700 1.6rem/1.5 'Noto Sans JP';
    }
    #shift .app p:first-of-type {
        margin: 0;
        padding: 0 5%;
        border: none;
    }
    #shift .app p:last-of-type {
        padding: 0 25% 0 5%;
    }
    #shift .app i {
        display: block;
        margin: 10px 0;
    }
}

/* --------------------------------------------------------------------------
   voice
-------------------------------------------------------------------------- */

#voice {
    padding: 72px 0 0;
    background: #d2f5f3;
}
#voice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 144px;
    background: linear-gradient(to left top, rgba(255, 255, 255, 0) 49.8%, #bfe6f6 50.2%);
}
#voice h2 {
    width: 100%;
    height: 0;
    padding: 0 0 100%;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/cd9632c950244e46bbe8b9c2f05978a6/voice0.png)
        top left no-repeat;
    background-size: 100% auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#voice li {
    position: relative;
    float: right;
    width: 530px;
    margin: 0 0 50px 50px;
}
#voice li:nth-child(even) {
    float: left;
    width: 500px;
    margin: 0 0 50px;
}
#voice li.fst {
    padding: 0 50px 0 100px;
}
#voice li.snd {
    padding: 160px 0 0;
}
#voice li:nth-child(4) {
    padding: 0 2% 0;
}
#voice li p {
    position: absolute;
    top: 72px;
    left: 80px;
    font: 600 2rem/1.7 'Klee One';
    color: #0b62a9;
}
#voice li.snd p {
    top: 250px;
    left: 140px;
}
#voice li:nth-child(4) p {
    top: 54px;
    left: 100px;
}
#voice li:nth-child(5) p {
    left: 40px;
}
#voice li span {
    color: #00b7d6;
    border-bottom: solid 2px #00b7d6;
    text-fill: #00b7d6;
    -webkit-text-stroke-width: 0.05em;
    -webkit-text-stroke-color: #00b7d6;
}
#voice li i {
    display: block;
    margin: 20px 0 0;
    font-size: 80%;
    font-style: normal;
}
#voice li img {
    width: 100%;
}

@media screen and (max-width: 768px) {
    #voice {
        padding: 24px 0 20px;
    }
    #voice::before {
        height: 24px;
    }
    #voice h2 {
        margin: 0;
    }
    #voice .wrap {
        width: 90%;
        margin: 0 auto;
    }
    #voice li {
        float: none;
        width: 100%;
        margin: 0 0 10px;
        padding: 0 0 0 12%;
    }
    #voice li:nth-child(even) {
        float: none;
        width: 100%;
        margin: 0 0 10px;
        padding: 0 12% 0 0;
    }
    #voice li.fst {
        margin: 0;
        padding: 0 0 0 50%;
    }
    #voice li.snd {
        padding: 0 28% 0 0;
    }
    #voice li:nth-child(3) {
        clear: both;
    }
    #voice li:nth-child(4) {
        padding: 0 28% 0 0;
    }
    #voice li:nth-child(5) {
        padding: 0 0 0 10%;
    }
    #voice li p {
        top: 8vw;
        left: 10vw;
        font: 600 1.4rem/1.7 'Klee One';
    }
    #voice li.snd p {
        top: 6vw;
        left: 12vw;
    }
    #voice li:nth-child(odd) p {
        left: 18vw;
    }
    #voice li:nth-child(4) p {
        top: 4vw;
        left: 5vw;
    }
    #voice li:nth-child(5) p {
        top: 4vw;
        left: 18vw;
    }
    #voice li i {
        margin: 12px 0 0;
    }
}

/* --------------------------------------------------------------------------
   reuse
-------------------------------------------------------------------------- */

.ruphoto {
    display: block;
    position: relative;
    width: 100%;
}
.ruphoto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    background: linear-gradient(to left top, rgba(255, 255, 255, 0) 49.8%, #d2f5f3 50.2%);
}

#reuse {
    padding: 0 0 144px;
    background-image: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/f5f5fb64335e4d2da790a68350315442/base_reuse.png),
        url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/ad1c853e2a014e908f48cc1878ccd087/base_reuse.jpg);
    background-position: bottom left, top left;
    background-repeat: no-repeat, repeat;
    background-size: 100% auto, auto;
}
#reuse .wrap {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 260px 0 0;
}
#reuse h2 {
    position: absolute;
    top: -60px;
    right: -180px;
    width: 730px;
}
#reuse h2 span {
    display: block;
    width: 100%;
    height: 0;
    padding: 0 0 58.4%;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/d89b3bead57b46e1a450bd83fe00aaf9/reuse_h2.png)
        top right no-repeat;
    background-size: 100% auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#reuse p {
    margin: 16px 0 0;
    font: 400 1.8rem/1.6 'Klee One';
}
#reuse ul {
    margin: 0 0 24px;
}
#reuse li {
    margin: 36px 0 0 1.8em;
    font: 600 2.8rem/1.4 'Klee One';
    color: #59bccb;
    list-style-type: decimal;
}
#reuse li p {
    color: #000;
}
#reuse .kome dd {
    margin: -1.5em 0 0 1.8em;
}

@media screen and (max-width: 768px) {
    #reuse {
        padding: 0 0 96px;
        background-size: auto 96px, auto;
    }
    #reuse::before {
        height: 24px;
    }
    #reuse .wrap {
        width: 90%;
        padding: 32vw 0 0;
    }
    #reuse h2 {
        top: -30px;
        right: -3%;
        width: 80%;
    }
    #reuse p {
        font: 400 1.4rem/1.6 'Noto Sans JP';
    }
    #reuse li {
        margin: 24px 0 0 1.8em;
        font: 700 1.8rem/1.4 'Noto Sans JP';
    }
}

/* --------------------------------------------------------------------------
   faq
-------------------------------------------------------------------------- */

#faq {
    position: relative;
    padding: 144px 0 72px;
    background: #f7f7f7;
}
#faq::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 130px;
    height: 130px;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/cb80ccb1b60a406baac1c0595fb71ac2/faq.png)
        top left no-repeat;
    background-size: 100% auto;
    transform: translateX(-50%);
}
#faq h2 {
    font: 900 3rem/1.5 'Noto Sans JP';
    color: #2c496b;
    text-align: center;
}
#faq .faq {
    width: 940px;
    margin: 36px auto 0;
}
#faq h3 {
    position: relative;
    padding: 12px 100px;
    background: #69c4eb;
    color: #fff;
    font: 400 2rem/1.4 'Noto Sans JP';
    cursor: pointer;
    text-align: center;
    border-radius: 60px;
    box-shadow: 0 15px 0 rgba(0, 0, 0, 0.1);
}
#faq [class*='q-']::before {
    content: 'Q1';
    position: absolute;
    top: 50%;
    left: 20px;
    letter-spacing: 0.2em;
    font: 4rem/1.5 'Kiwi Maru';
    transform: translateY(-60%);
}
#faq .q-1::before {
    content: 'Q1';
}
#faq .q-2::before {
    content: 'Q2';
}
#faq .q-3::before {
    content: 'Q3';
}
#faq .q-4::before {
    content: 'Q4';
}

#faq .ans {
    position: relative;
    display: none;
    padding: 48px 80px 48px 6em;
    border-bottom: dashed 3px #69c4eb;
}
#faq .ans p {
    position: relative;
    padding-left: 4em;
    font: 500 1.6rem/1.5 'Noto Sans JP';
}
#faq .ans p::before {
    content: 'A';
    position: absolute;
    top: -0.5em;
    left: 0;
    font: 4rem/1.5 'Kiwi Maru';
    color: #69c4eb;
}

@media screen and (max-width: 768px) {
    #faq {
        padding: 96px 0 48px;
    }
    #faq::before {
        top: 0;
        width: 100px;
        height: 100px;
    }
    #faq h2 {
        font: 900 2rem/1.5 'Noto Sans JP';
    }
    #faq .faq {
        width: 90%;
        margin: 24px auto 0;
    }
    #faq h3 {
        padding: 12px 4em;
        font: 1.6rem/1.4 'Noto Sans JP';
        text-align: left;
    }
    #faq [class*='q-']::before {
        font: 2rem/1.5 'Kiwi Maru';
    }
    #faq .ans {
        padding: 24px 0 24px 0;
    }
    #faq .ans p {
        font: 500 1.4rem/1.5 'Noto Sans JP';
    }
}

/* --------------------------------------------------------------------------
   enquete
-------------------------------------------------------------------------- */

#enquete {
    padding: 36px 0 64px;
    background: #f7f7f7;
    text-align: center;
    color: #2c496b;
}
#enquete .frame {
    width: 1080px;
    margin: 0 auto;
    padding: 36px;
    background: #e2e5e9;
    border-radius: 30px;
}
#enquete .box {
    position: relative;
    padding: 36px 0 64px;
    background: #fff;
    border-radius: 24px;
}
#enquete h5 {
    font: 500 2.4rem/2 'Noto Sans JP';
}
#enquete p {
    font: 400 1.6rem/1.5 'Noto Sans JP';
}
#enquete a {
    display: block;
    position: absolute;
    bottom: -1.2em;
    left: 50%;
    width: 400px;
    background: linear-gradient(to right, #bec2cc, #98bccb);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 30px;
    font: 500 1.7rem/2.4 'Noto Sans JP';
    color: #fff;
    transform: translateX(-50%);
}
#enquete a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    border: solid 2px #fff;
    border-width: 2px 2px 0 0;
    transform: translateY(-50%) rotate(45deg);
}

@media screen and (max-width: 768px) {
    #enquete {
        padding: 24px 0 48px;
    }
    #enquete .frame {
        width: 90%;
        padding: 16px 16px 36px;
    }
    #enquete .box {
        padding: 16px 16px 36px;
    }
    #enquete h5 {
        margin: 0 0 10px;
        font: 500 2rem/1.4 'Noto Sans JP';
    }
    #enquete p {
        font: 400 1.4rem/1.5 'Noto Sans JP';
    }
    #enquete a {
        width: 80%;
        font: 500 1.5rem/2.4 'Noto Sans JP';
    }
}

/* --------------------------------------------------------------------------
   scroll animation
-------------------------------------------------------------------------- */

.din {
    opacity: 0;
    transform: translateY(-30px);
}
.din.active {
    transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 1s ease 0s;
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
 icons
-------------------------------------------------------------------------- */

[class*='ico-'] {
    display: inline-block;
    height: 0;
    margin: 0;
    vertical-align: baseline;
    background: url(https://looop-denki.com/api/image?imageName=d5726c1634ea4f76914e133fa4a9b1d9/bddd14e9e99143d3b2ac7d1685ae6b05/ico.png)
        top left no-repeat;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
.ico-pl {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background-position: 0 -60px;
    background-size: 300% auto;
}
.ico-pls {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    background-color: #3fa9f5;
    background-position: -48px -48px;
    background-size: 300% auto;
    box-shadow: 0 24px 0 rgba(0, 0, 0, 0.1);
    border-radius: 25px;
}
.ico-mul {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background-color: #3fa9f5;
    background-position: -120px -60px;
    background-size: 300% auto;
    border-radius: 30px;
    box-shadow: 0 30px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-20px);
}
.ico-nxt {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background-position: -160px 0;
    background-size: 300% auto;
    transform: translateY(-20px);
}
.ico-op {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 24px;
    height: 24px;
    background-position: -48px 0;
    background-size: 600% auto;
}
.ico-op2 {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 12px;
    height: 12px;
    background-position: -24px 0;
    background-size: 600% auto;
    transform: translateY(-50%);
}
.ico-1s {
    width: 70px;
    height: 70px;
    background-position: 0 -140px;
    background-size: 300% auto;
}
.ico-2s {
    width: 70px;
    height: 70px;
    background-position: -70px -140px;
    background-size: 300% auto;
}
.ico-3s {
    width: 70px;
    height: 70px;
    background-position: -140px -140px;
    background-size: 300% auto;
}
.ico-faq {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 40px;
    height: 40px;
    background-position: 0 -40px;
    background-size: 300% auto;
    transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
    .ico-op {
        position: absolute;
        top: 55%;
        right: 12px;
        width: 12px;
        height: 12px;
        background-position: -24px 0;
        background-size: 600% auto;
    }
    .ico-1s,
    .ico-2s,
    .ico-3s {
        display: block;
        margin: 0 auto;
    }
}

.fixedBnr {
    position: fixed;
    top: 110vw;
    right: 20px;
    width: 80px;
    height: 80px;
}

@media screen and (min-width: 769px) {
    .fixedBnr {
        --keyVisialWidth: 1280px;
        top: 500px;
        right: calc(50% - (var(--keyVisialWidth) / 2));
        bottom: auto;
        width: 150px;
        height: 150px;
        margin-right: 20px;
    }
}

.denkinavi {
    overflow: hidden;
    background-color: #f7f7f7;
    padding: 0 0 64px;
}
@media screen and (min-width: 769px) {
    .denkinavi {
        padding-top: 48px;
        padding-bottom: 80px;
    }
}
.p_top_electricity__lead {
    width: 90%;
    margin: 0 auto 20px;
    text-align: justify;
}
@media screen and (min-width: 769px) {
    .p_top_electricity__lead {
        max-width: 860px;
    }
}
.p_top_electricity__cardsWrapper {
    overflow-x: scroll;
    scrollbar-width: none;
}
.p_top_electricity__cardsWrapper::-webkit-scrollbar {
    display: none;
    height: 0;
}
.p_top_electricity__card {
    background-color: #fff;
}
.denkinavi .list {
    display: flex;
    width: 90%;
    margin: 0 calc(5% - 5px);
}
@media screen and (min-width: 769px) {
    .denkinavi .list {
        width: auto;
        margin: auto;
        justify-content: center;
    }
}


.p_common_price_annotation2 {
    padding: 4px 0 4px;
    position: fixed;
    height: 100px;
    width: 100%;
    z-index: 100;
    background-color: #0168B6;
    opacity: 0.9;
    bottom: 0;
    color: white;
}

.p_common_price_annotation__inner2 {
    max-width: 1736px;
    height: 92px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p_common_price_annotation__inner2 p{
    font-weight: bold;
    color: #FEE100;
    font-size:28px;
    padding:0 15%;
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    .p_common_price_annotation2 {
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .p_common_price_annotation__inner2 {
        font-size: 13px;
    }
    .p_common_price_annotation__inner2 p{
        padding: 0;
        font-size:18px;
    }
}

.footer_price_annotation2 {
    height: 100px;
}

.is_pc {
    display: block;
}

.is_sp {
    display: none;
}

@media screen and (max-width: 750px) {
    .is_pc {
        display: none;
    }

    .is_sp {
        display: block;
    }
}


.pr-smarttimeone {
  /* パターンB用 */
}
.pr-smarttimeone__shift_wrap {
  -webkit-box-align: center;
          align-items: center;
  margin-bottom: 0 !important;
}
.pr-smarttimeone__app-outer-title {
  text-align: center;
  margin: 123px auto 0;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app-outer-title {
    margin-top: 40px;
  }
}
.pr-smarttimeone__app-outer-title-image {
  max-width: 574px;
  width: 100%;
  margin-left: 22px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app-outer-title-image {
    margin-left: 0;
  }
}
.pr-smarttimeone__app-information {
  background-color: #fff;
  border: 2px solid #0168b6;
  border-radius: 15px;
  margin-top: 28px;
  padding: 28px;
  position: absolute;
  max-width: 760px;
  width: 100%;
  top: -54px;
  right: 0;
  left: 0;
  margin: auto;
}
@media screen and (max-width: 1199px) {
  .pr-smarttimeone__app-information {
    top: -80px;
  }
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app-information {
    padding: 16px;
    margin-top: 20px;
    width: 72%;
    top: -100px;
  }
}
.pr-smarttimeone__app-information-title {
  font-size: 18px;
  text-align: center;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app-information-title {
    font-size: 14px;
  }
}
.pr-smarttimeone__app-information-title .block_sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app-information-title .block_sp {
    display: block;
  }
}
.pr-smarttimeone__app-information-text {
  font-size: 18px;
  color: #0168b6;
  line-height: 1.4;
  font-size: 14px;
  text-align: center;
  margin-top: 12px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app-information-text {
    font-size: 10px;
    margin-top: 6px;
  }
}
.pr-smarttimeone__app-information-text .inline_pc {
  display: inline;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app-information-text .inline_pc {
    display: none;
  }
}
.pr-smarttimeone__app-information-text .block_pc {
  display: block;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app-information-text .block_pc {
    display: none;
  }
}
.pr-smarttimeone__app-information-link {
  text-decoration: underline;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.pr-smarttimeone__app-information-link:hover {
  text-decoration: none;
}
.pr-smarttimeone__app-box-inner {
  position: relative;
  max-width: 950px;
  width: 100%;
  margin: 123px auto 56px;
  background-color: #fff;
  border-radius: 20px;
  padding: 35px 52px 35px 54px;
}
@media screen and (max-width: 1199px) {
  .pr-smarttimeone__app-box-inner {
    margin: 40px auto 0;
  }
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app-box-inner {
    padding: 20px 20px 20px 20px;
    border-radius: 20px;
    margin: 40px auto 0;
  }
}
.pr-smarttimeone__app-box-outer-title {
  font-size: 28px;
  text-align: center;
  color: #0168b6;
  line-height: 1.4642857143;
  font-weight: 700;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app-box-outer-title {
    font-size: 24px;
    line-height: 1.4583333333;
  }
}
.pr-smarttimeone__app_box_flex {
  display: -webkit-box;
  display: flex;
  gap: 56px;
  margin-top: 7px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app_box_flex {
    margin-top: 15px;
    gap: 17px;
  }
}
.pr-smarttimeone__app_box_flex_image {
  width: 152px;
  min-width: 152px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app_box_flex_image {
    width: 77px;
    min-width: 77px;
  }
}
.pr-smarttimeone__app_box_flex_image_item {
  width: 100%;
  height: auto;
}
.pr-smarttimeone__app_box_image {
  max-width: 153px;
  height: auto;
  width: 30%;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app_box_image {
    max-width: 84px;
    width: 20%;
  }
}
.pr-smarttimeone__app_box_image_item {
  width: 100%;
  height: auto;
}
.pr-smarttimeone__app_box_title {
  font-weight: 700;
  color: #0168b6;
  font-size: 24px;
  line-height: 1.4545454545;
  padding-top: 9px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app_box_title {
    font-size: 16px;
    line-height: 1.4375;
    padding-top: 0;
  }
}
.pr-smarttimeone__app_box_text {
  font-size: 14px;
  line-height: 1.4166666667;
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__app_box_text {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4166666667;
  }
}
.pr-smarttimeone__store_wrap {
  border: 3px solid #DDD;
  padding: 26px 16px 15px 36px;
  border-radius: 16px;
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__store_wrap {
    border: 2px solid #DDD;
    padding: 22px 20px;
    margin-top: 18px;
    border-radius: 12px;
  }
}
.pr-smarttimeone__store_wrap--pc {
  display: block;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__store_wrap--pc {
    display: none;
  }
}
.pr-smarttimeone__store_wrap--sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__store_wrap--sp {
    display: block;
  }
}
.pr-smarttimeone__store_text {
  color: #202020;
  font-size: 18px;
  line-height: 1.4375;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__store_text {
    font-size: 16px;
    line-height: 1.4375;
    text-align: center;
  }
}
.pr-smarttimeone__store_flex {
  display: -webkit-box;
  display: flex;
  gap: 22px;
  margin-top: 18px;
  -webkit-box-align: start;
          align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__store_flex {
    margin-top: 11px;
    gap: 19px;
  }
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__store_flex_inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-flow: column;
    gap: 12px;
    width: 100%;
  }
}
.pr-smarttimeone__store_app_icon {
  width: 77px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__store_app_icon {
    width: 93px;
  }
}
.pr-smarttimeone__store_app_logo {
  width: 135px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__store_app_logo {
    width: 135px;
  }
}
.pr-smarttimeone__store_note {
  display: block;
  font-size: 16px;
  line-height: 1.4166666667;
  margin-top: 12px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__store_note {
    display: none;
  }
}
.pr-smarttimeone__store_note--sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__store_note--sp {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.4285714286;
  }
}
.pr-smarttimeone__textlink {
  text-decoration: underline;
}
.pr-smarttimeone__section {
  background-color: #BFE7F6;
  position: relative;
  padding: 171px 0 191px !important;
  background-image: none !important;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__section {
    padding-top: 106px;
    padding-bottom: 81px;
  }
}
.pr-smarttimeone__section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 144px;
  background: -webkit-linear-gradient(right bottom, rgba(255, 255, 255, 0) 49.8%, #d2f5f3 50.2%);
  background: linear-gradient(to left top, rgba(255, 255, 255, 0) 49.8%, #d2f5f3 50.2%);
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__section::before {
    height: 24px;
  }
}
.pr-smarttimeone__section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 144px;
  background: -webkit-linear-gradient(right top, rgba(255, 255, 255, 0) 49.8%, #f7f7f7 50.2%);
  background: linear-gradient(to left bottom, rgba(255, 255, 255, 0) 49.8%, #f7f7f7 50.2%);
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__section::after {
    height: 24px;
  }
}
.pr-smarttimeone__section--reuse::after {
  background: -webkit-linear-gradient(right top, rgba(255, 255, 255, 0) 49.8%, #fff 50.2%);
  background: linear-gradient(to left bottom, rgba(255, 255, 255, 0) 49.8%, #fff 50.2%);
}
.pr-smarttimeone__sectionInner {
  max-width: 1080px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__sectionInner {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
  }
}
.pr-smarttimeone__sectionTitle {
  text-align: center;
  position: static !important;
  width: auto !important;
  font: 400 7rem/1.2 "Noto Sans JP";
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__sectionTitle {
    font: 400 3rem/1.4 "Noto Sans JP";
  }
}
.pr-smarttimeone__sectionTitle span {
  display: inline !important;
  padding: 0 !important;
  background: none !important;
  text-indent: 0 !important;
  white-space: normal !important;
  overflow: auto !important;
  font: 400 7rem/1.2 "Noto Sans JP";
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__sectionTitle span {
    font: 400 3rem/1.4 "Noto Sans JP";
  }
}
.pr-smarttimeone__sectionText {
  text-align: center;
  margin: 24px 0 0 !important;
  font: 1.6rem/1.5 "Noto Sans JP", sans-serif !important;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__sectionText {
    text-align: left;
    font: 1.4rem/1.5 "Noto Sans JP" !important;
  }
}
.pr-smarttimeone__energyList {
  margin: 40px 0 0 !important;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__energyList {
    margin-top: 24px;
  }
}
.pr-smarttimeone__energyListItem {
  background-color: #ffffff;
  margin: 20px 0 0 !important;
  padding: 40px;
  border-radius: 20px;
  display: -webkit-box;
  display: flex;
  gap: 30px;
  color: #000 !important;
  list-style-type: none !important;
  font: 1.6rem/1.5 "Noto Sans JP", sans-serif !important;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__energyListItem {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-flow: column;
    padding: 20px;
    gap: 14px;
  }
}
.pr-smarttimeone__energyListItem:first-child {
  margin-top: 0 !important;
}
.pr-smarttimeone__energyImage {
  width: 284px;
  min-width: 284px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__energyImage {
    width: 100%;
  }
}
.pr-smarttimeone__energyImageItem {
  width: 100%;
  height: auto;
}
.pr-smarttimeone__energyContents {
  -webkit-box-flex: 1;
          flex: 1;
}
.pr-smarttimeone__energyTitle {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4545454545;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__energyTitle {
    font-size: 18px;
    line-height: 1.4444444444;
  }
}
.pr-smarttimeone__energyTitleStrong {
  color: #0096D3;
}
.pr-smarttimeone__energyText {
  font-size: 16px;
  line-height: 1.875;
  margin-top: 10px;
  font-family: Noto Sans JP !important;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__energyText {
    font-size: 14px;
    line-height: 1.5714285714;
  }
}
.pr-smarttimeone__energyNote {
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__energyNote {
    margin-top: 20px;
  }
}
.pr-smarttimeone__energyNoteItem {
  margin-top: 5px;
  text-indent: -3em;
  padding-left: 3em;
  font-size: 14px;
  line-height: 1.4285714286;
}
.pr-smarttimeone__energyNoteItem:first-child {
  margin-top: 0;
}
.pr-smarttimeone__movie {
  margin-top: 80px;
  display: -webkit-box;
  display: flex;
  gap: 48px;
  margin-bottom: 52px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__movie {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-flow: column;
    margin-top: 60px;
    gap: 36px;
    margin-bottom: 32px;
  }
}
.pr-smarttimeone__feature-movie {
  margin-top: 60px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  margin-bottom: 36px;
}
.pr-smarttimeone__movie-item {
  text-align: center;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__movie-item {
    width: 100%;
  }
}
.pr-smarttimeone__movie-item-title {
  color: #202020;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.4;
  margin-top: 8px;
}
.pr-smarttimeone__movie-item-copy {
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  margin-top: 16px;
  color: #1B6893;
  display: -webkit-inline-box;
  display: inline-flex;
  gap: 8px;
  -webkit-box-align: center;
          align-items: center;
}
.pr-smarttimeone__movie-item-copy::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 20px;
  background-color: #E0A641;
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
  -webkit-clip-path: polygon(0 0, 100% 8%, 100% 100%, 51% 95%);
          clip-path: polygon(0 0, 100% 8%, 100% 100%, 51% 95%);
  margin-right: 2px;
}
.pr-smarttimeone__movie-item-copy::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 20px;
  background-color: #E0A641;
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
  -webkit-clip-path: polygon(0 8%, 100% 0, 51% 95%, 0 100%);
          clip-path: polygon(0 8%, 100% 0, 51% 95%, 0 100%);
}
.pr-smarttimeone__movie-youtube {
  border-radius: 8px;
  -webkit-filter: drop-shadow(8px 8px 0px #FFFFFF);
          filter: drop-shadow(8px 8px 0px #FFFFFF);
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16/9;
  margin-top: 16px;
  position: relative;
}
.pr-smarttimeone__movie-youtube .iframe {
  width: 100%;
  height: 100%;
}
.pr-smarttimeone__movie-youtube-player {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.pr-smarttimeone__movie-youtube-player.is-hide {
  display: none;
}
.pr-smarttimeone__movie-youtube-player-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.pr-smarttimeone__movie-youtube-player-icon {
  position: absolute;
  width: 66px;
  height: 46px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.pr-smarttimeone__fixed-menu {
  width: 72px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-flow: column;
  right: 0;
  /* bottom: 30px; */
  bottom: 150px !important;
  position: fixed;
  gap: 20px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  visibility: visible;
  opacity: 1;
  z-index: 600;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__fixed-menu {
    width: 50px;
    bottom: 130px !important;
  }
}
.pr-smarttimeone__fixed-menu.is-inactive {
  visibility: hidden;
  opacity: 0;
}
.pr-smarttimeone__fixed-menu-simulation {
  background-color: #0168b6;
  box-shadow: 0 4px #0c426a;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  border-radius: 10px 0 0 10px;
  color: #ffffff;
  font-weight: 700;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 20px;
  height: 280px;
  -webkit-box-pack: center;
          justify-content: center;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__fixed-menu-simulation {
    font-size: 13px;
    height: 198px;
    letter-spacing: 0.25em;
  }
}
.pr-smarttimeone__fixed-menu-simulation:hover {
  opacity: 1;
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
  box-shadow: none;
}
.pr-smarttimeone__fixed-menu-join {
  background-color: #FEE100;
  box-shadow: 0 3px #e0bf04;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  border-radius: 10px 0 0 10px;
  color: #202020;
  font-weight: 700;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 20px;
  height: 274px;
  -webkit-box-pack: center;
          justify-content: center;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__fixed-menu-join {
    font-size: 13px;
    height: 198px;
    letter-spacing: 0.25em;
  }
}
.pr-smarttimeone__fixed-menu-join:hover {
  opacity: 1;
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
  box-shadow: none;
}
.pr-smarttimeone__join-button-wrap {
  margin-top: 80px;
  display: -webkit-box;
  display: flex;
  gap: 28px;
  -webkit-box-pack: center;
          justify-content: center;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__join-button-wrap {
    margin-top: 40px;
    gap: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-flow: column;
    padding: 0 20px;
  }
}
.pr-smarttimeone__join-button-wrap--voice {
  padding-bottom: 10px;
}
.pr-smarttimeone__join-button-wrap--rateexample {
  padding-bottom: 10px;
}
.pr-smarttimeone__join-button-item {
  width: 50%;
  height: 103px;
  border-radius: 9999px;
  background-color: #FEE100;
  box-shadow: 0 10px #e0bf04;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-flow: column;
  color: #202020;
  padding: 0 24px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__join-button-item {
    width: 100%;
  }
}
.pr-smarttimeone__join-button-item--simulation {
  box-shadow: 0 10px #0c426a;
  background-color: #0168b6;
  color: #ffffff;
}
.pr-smarttimeone__join-button-item:hover {
  opacity: 1;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  box-shadow: none;
}
.pr-smarttimeone__join-button-text {
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__join-button-text {
    font-size: 14px;
    line-height: 1.4285714286;
  }
}
.pr-smarttimeone__join-button-title {
  font-size: 28px;
  line-height: 1;
  margin-top: 12px;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone__join-button-title {
    font-size: 20px;
    line-height: 1.45;
    margin-top: 0;
  }
}
.pr-smarttimeone #feature.pr-smarttimeone__feature {
  background: none;
}
.pr-smarttimeone #feature .example h3 span {
  color: #0096D3 !important;
}
.pr-smarttimeone #feature .example .graph li p {
  font-weight: 700;
}
.pr-smarttimeone #feature .example .graph li p .ao {
  color: #0096D3 !important;
  font-size: 26px;
}
.pr-smarttimeone #feature .example .graph li p .ki {
  color: #E9593A !important;
  font-size: 26px;
}
.pr-smarttimeone #feature .example .graph li .note {
  margin-top: 12px;
  color: #707070;
  font-size: 16px;
  line-height: 1;
}
.pr-smarttimeone #feature .example .graph li img {
  border-radius: 12px;
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone #feature .example {
    padding-right: 0;
    padding-left: 0;
  }
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone #feature .wrap.pr-smarttimeone__join-button-outer {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone #feature .wrap.pr-smarttimeone__join-button-outer .pr-smarttimeone__join-button-wrap {
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone #voice .wrap.pr-smarttimeone__join-button-outer {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .pr-smarttimeone #rateexample .wrap.pr-smarttimeone__join-button-outer {
    width: 100%;
  }
}
.pr-smarttimeone #rateexample .wrap.pr-smarttimeone__join-button-outer--rateexample {
  position: relative;
  z-index: 500;
}
.pr-smarttimeone__feature-title {
  font-size: 36px;
  line-height: 1;
  color: #0096D3 !important;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  #shift {
    padding-bottom: 31px;
  }
}

/* 20240208追加 */
.pr-smarttimeone #kv .inner {
    @media screen and (min-width: 769px) {
        padding-top: 80px !important;
    }
}
.pr-smarttimeone #kv .lead span {
    background-image: url("/assets/lp/smarttimeone/images/text-firstview-pc.svg") !important;
    padding-top: 47.35336194563662% !important;
    @media screen and (max-width: 768px) {
        background-image: url("/assets/lp/smarttimeone/images/text-firstview-sp.svg") !important;
        padding-top: 66.87898089171973% !important;
    }
}