:root {
  --white: #fff;
  --black: #333;
  --blue01: #003268;
  --blue02: #4082E3;
  --blue03: #1E4785;
  --blue04: #EEF4F6;
  --blue05: #0C57BF;
  --blue06: #2458A1;
  --blue07: #1A69C6;
  --blue08: #78A1DA;
  --yellow: #FFF478;
  --yellow02: #FFFEF5;
  --gray: #E0E0E0;
  --gray02: #CBCBCB;
  --gray03: #F5F5F5;
  --gray04: #EBEBEB;
  --gray05: #D9D9D9;
  --gray06: #B1B1B1;
  --orange: #F15D00;
  --orange02: #e2491a;
  --red: #E35555;
  --green: #64C3BF;
  --green02: #6DA885;
  --brown: #C59460;
  --font-thin: 100;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;
  --line-height08: 0.8;
  --line-height10: 1.0;
  --line-height11: 1.1;
  --line-height12: 1.2;
  --line-height14: 1.4;
  --line-height15: 1.5;
  --width100: 100%;
  --text-center: center;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Noto Sans JP", serif; font-style: normal; font-weight: normal; }
.white { color: var(--white); }
.bg-white { background-color: var(--white); }
.black { color: var(--black); }
.blue01 { color: var(--blue01); }
.bg-blue01 { background-color: var(--blue01); }
.blue02 { color: var(--blue02); }
.blue03 { color: var(--blue03); }
.bg-blue04 { background-color: var(--blue04); }
.blue05 { color: var(--blue05); }
.bg-blue05 { background-color: var(--blue05); }
.blue06 { color: var(--blue06); }
.bg-blue06 { background-color: var(--blue06); }
.border-blue06-radius50 {border:1px solid var(--blue06);border-radius:50%;}
.blue07 { color: var(--blue07); }
.yellow { color: var(--yellow); }
.bg-yellow02 {background-color: var(--yellow02); }
.orange { color: var(--orange); }
.bg-orange { background-color: var(--orange); }
.bg-orange02 { background-color: var(--orange02); }
.bg-red { background-color: var(--red); }
.bg-gray03 { background-color: var(--gray03); }
.bg-gray04 { background-color: var(--gray04); }
.bg-gray05 { background-color: var(--gray05); }
.bg-green { background-color: var(--green); }
.bg-blue08 { background-color: var(--blue08); }
.bg-brown { background-color: var(--brown); }
.bg-green02 { background-color: var(--green02); }
.thin {  font-weight: var(--font-thin); } .light { font-weight: var(--font-light); } .normal { font-weight: var(--font-normal); } .medium { font-weight: var(--font-medium); } .bold { font-weight: var(--font-bold); }
.size10 { font-size: min(10px, 10 / 780 * 100vw);} .size12 { font-size: min(12px, 12 / 780 * 100vw);} .size14 { font-size: min(14px, 14 / 780 * 100vw);} .size16 { font-size: min(16px, 16 / 780 * 100vw);} .size18 { font-size: min(18px, 18 / 780 * 100vw);} .size20 { font-size: min(20px, 20 / 780 * 100vw);} .size22 { font-size: min(22px, 22 / 780 * 100vw);} .size24 { font-size: min(24px, 24 / 780 * 100vw);} .size26 { font-size: min(26px, 26 / 780 * 100vw);} .size28 { font-size: min(28px, 28 / 780 * 100vw);} .size30 { font-size: min(30px, 30 / 780 * 100vw);} .size32 { font-size: min(32px, 32 / 780 * 100vw);} .size34 { font-size: min(34px, 34 / 780 * 100vw);} .size36 { font-size: min(36px, 36 / 780 * 100vw);} .size38 { font-size: min(38px, 38 / 780 * 100vw);} .size40 { font-size: min(40px, 40 / 780 * 100vw);} .size42 { font-size: min(42px, 42 / 780 * 100vw);} .size44 { font-size: min(44px, 44 / 780 * 100vw);} .size46 { font-size: min(46px, 46 / 780 * 100vw);} .size48 { font-size: min(48px, 48 / 780 * 100vw);} .size50 { font-size: min(50px, 50 / 780 * 100vw);} .size52 { font-size: min(52px, 52 / 780 * 100vw);} .size54 { font-size: min(54px, 54 / 780 * 100vw);} .size56 { font-size: min(56px, 56 / 780 * 100vw);} .size58 { font-size: min(58px, 58 / 780 * 100vw);} .size60 { font-size: min(60px, 60 / 780 * 100vw);} .size62 { font-size: min(62px, 62 / 780 * 100vw);} .size64 { font-size: min(64px, 64 / 780 * 100vw);} .size66 { font-size: min(66px, 66 / 780 * 100vw);} .size68 { font-size: min(68px, 68 / 780 * 100vw);} .size70 { font-size: min(70px, 70 / 780 * 100vw);} .size72 { font-size: min(72px, 72 / 780 * 100vw);} .size74 { font-size: min(74px, 74 / 780 * 100vw);} .size76 { font-size: min(76px, 76 / 780 * 100vw);} .size78 { font-size: min(78px, 78 / 780 * 100vw);} .size80 { font-size: min(80px, 80 / 780 * 100vw);} .size82 { font-size: min(82px, 82 / 780 * 100vw);} .size84 { font-size: min(84px, 84 / 780 * 100vw);} .size86 { font-size: min(86px, 86 / 780 * 100vw);} .size88 { font-size: min(88px, 88 / 780 * 100vw);} .size90 { font-size: min(90px, 90 / 780 * 100vw);} .size92 { font-size: min(92px, 92 / 780 * 100vw);} .size94 { font-size: min(94px, 94 / 780 * 100vw);} .size96 { font-size: min(96px, 96 / 780 * 100vw);} .size98 { font-size: min(98px, 98 / 780 * 100vw);} .size100 { font-size: min(100px, 100 / 780 * 100vw);}
.line-height { line-height: var(--line-height15); } .small-line-height { line-height: var(--line-height12); } .line-height08 { line-height: var(--line-height08); } .line-height10 { line-height: var(--line-height10); } .line-height11 { line-height: var(--line-height11); } .line-height12 { line-height: var(--line-height12); } .line-height14 { line-height: var(--line-height14); } .line-height15 { line-height: var(--line-height15); }
.w100 { width: var(--width100); } .w96 { width: calc(var(--width100) * 0.96); } .w94 { width: calc(var(--width100) * 0.94); } .w92 { width: calc(var(--width100) * 0.92); } .w90 { width: calc(var(--width100) * 0.9); } .w86 { width: calc(var(--width100) * 0.86); } .w80 { width: calc(var(--width100) * 0.8); } .w75 { width: calc(var(--width100) * 0.75); } .w74 { width: calc(var(--width100) * 0.74); } .w72 { width: calc(var(--width100) * 0.72); } .w70 { width: calc(var(--width100) * 0.7); } .w64 { width: calc(var(--width100) * 0.64); } .w60 { width: calc(var(--width100) * 0.6); } .w55 { width: calc(var(--width100) * 0.55); } .w50 { width: calc(var(--width100) * 0.5); } .w45 { width: calc(var(--width100) * 0.45); } .w40 { width: calc(var(--width100) * 0.4); } .w30 { width: calc(var(--width100) * 0.3); } .w28 { width: calc(var(--width100) * 0.28); } .w26 { width: calc(var(--width100) * 0.26); } .w25 { width: calc(var(--width100) * 0.25); } .w20 { width: calc(var(--width100) * 0.2); } .w10 { width: calc(var(--width100) * 0.1); } .w08 { width: calc(var(--width100) * 0.08); } .w06 { width: calc(var(--width100) * 0.06); } .w04 { width: calc(var(--width100) * 0.04); } .w02 { width: calc(var(--width100) * 0.02); } .w0 { width: calc(var(--width100) * 0); }
.hauto { height: auto; }
.h40 { height: calc(var(--width100) * 0.4); } 
.margin0auto { margin: 0 auto; }
.margintop02 { margin-top: 2%; } .margintop04 { margin-top: 4%; } .margintop06 { margin-top: 6%; } .margintop08 { margin-top: 8%; } .margintop10 { margin-top: 10%; } .margintop12 { margin-top: 12%; }
.marginbottom02 { margin-bottom: 2%; } .marginbottom04 { margin-bottom: 4%; } .marginbottom06 { margin-bottom: 6%; } .marginbottom08 { margin-bottom: 8%; } .marginbottom10 { margin-bottom: 10%; } .marginbottom12 { margin-bottom: 12%; }
.paddingtop02 { padding-top: 2%; } .paddingtop04 { padding-top: 4%; } .paddingtop06 { padding-top: 6%; } .paddingtop08 { padding-top: 8%; } .paddingtop10 { padding-top: 10%; } .paddingtop12 { padding-top: 12%; }
.paddingbottom02 { padding-bottom: 2%; } .paddingbottom04 { padding-bottom: 4%; } .paddingbottom06 { padding-bottom: 6%; } .paddingbottom08 { padding-bottom: 8%; } .paddingbottom10 { padding-bottom: 10%; } .paddingbottom12 { padding-bottom: 12%; }
.objectfit { object-fit: contain; object-position: center; }
.center { text-align: var(--text-center); } .left { text-align: left; } .right { text-align: right; }
.row { display: flex; } .row-center { display: flex; justify-content: center; } .row-center-center { display: flex; justify-content: center; align-items: center; } .row-start-center { display: flex; justify-content: flex-start; align-items: center; }
.column { display: flex; flex-direction: column; } .column-center { display: flex; justify-content: center; flex-direction: column; } .column-center-center { display: flex; justify-content: center; align-items: center; flex-direction: column; } .column-center-start { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; }
.marker { background: linear-gradient(transparent 54%, #FFF478); }
.decoration { text-decoration: none; }
.block { display: block; }
.nowrap { white-space: nowrap; }
.px02 {padding-left: 2% !important; padding-right: 2% !important;}.px06 {padding-left: 6% !important; padding-right: 6% !important;}
.py15 {padding-top: 15% !important; padding-bottom: 15% !important;}
.pl02{padding-left:2%!important;}.pl04{padding-left:4%!important;}.pl06{padding-left:6%!important;}.pl08{padding-left:8%!important;}
.pb10{padding-bottom:10%!important;}.pb07{padding-bottom:7%!important;}
.mx01{margin-left:1%!important;margin-right:1%!important;}
.ml006{margin-left:0.6%!important;}
.ml01{margin-left:1%!important;}.ml02{margin-left:2%!important;}.ml04{margin-left:4%!important;}.ml06{margin-left:6%!important;}.ml08{margin-left:8%!important;}
.mr02{margin-right:2%!important;}.mr04{margin-right:4%!important;}.mr06{margin-right:6%!important;}.mr08{margin-right:8%!important;}
.my02{margin-top:2%!important;margin-bottom:2%!important;}
.mt02{margin-top:2%!important;}.mt04{margin-top:4%!important;}.mt06{margin-top:6%!important;}.mt08{margin-top:8%!important;}.mt10{margin-top:10%!important;}.mt12{margin-top:12%!important;}
.mb01{margin-bottom:1%!important;}.mb02{margin-bottom:2%!important;}.mb04{margin-bottom:4%!important;}.mb06{margin-bottom:6%!important;}
.w90i{width:90%!important;}
.ls01{letter-spacing:0.01em!important;}.ls04{letter-spacing:0.04em!important;}.ls06{letter-spacing:0.06em!important;}.ls08{letter-spacing:0.08em!important;}.ls10{letter-spacing:0.1em!important;}
.ls-01{letter-spacing:-0.01em!important;}.ls-04{letter-spacing:-0.04em!important;}.ls-06{letter-spacing:-0.06em!important;}.ls-10{letter-spacing:-0.1em!important;}

main {
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.fv {
    background: url("../images/fv.webp") center center / cover no-repeat;
    width: 100%;
    padding: 6% 2% 2%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}
.fv-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fv-serif {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1% 9% 4%;
    margin-bottom: 1.4%;
    position: relative;
    z-index: 2;
}
.fv-serif::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: url("../images/fv-serif.webp") center center / contain no-repeat;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.fv-serif p {
    --size: 28;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
}
.fv-contents h1 {
    --size: 62;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
    text-align: center;
    line-height: var(--line-height12);
    text-shadow: 0px 4.15px 4.15px #00000040;
    letter-spacing: 0.015em;
}
.fv-contents h1 small {
    --size: 42;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
}
.fv-contents h1 span {
    --size: 62;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
    text-align: center;
    line-height: var(--line-height12);
    letter-spacing: -0.12em;
}
.fv-contents h2 {
    --size: 55;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
    text-align: center;
    line-height: var(--line-height08);
    text-shadow: 0px 4.15px 4.15px #00000040;
    padding: 0 0 3%;
    margin-top: 4.8%;
    border-top: 1px solid var(--white);
    border-bottom: 1px solid var(--white);
    width: 80%;
}
.fv-contents h2 span {
    --size: 70;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
    text-align: center;
}

.fv-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: url("../images/fv-row.webp") center center / contain no-repeat;
    width: 98%;
    height: auto;
    margin: 8% 1% 4%;
}
.fv-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 33%;
    padding-top: 20%;
}
.fv-item::before {
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 1px;
    background-color: var(--gray);
}
.fv-check {
    width: 12%;
    padding-top: 12%;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.fv-check::before {
    content: "";
    position: absolute;
    top: 2%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blue03);
    border-radius: 50%;
}
.fv-check img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 70%;
    height: auto;
    margin-bottom: 2%;
} 
.fv-item h3 {
    --size: 27;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
    text-align: center;
    width: 100%;
    line-height: var(--line-height12);
    white-space: nowrap;
    position: absolute;
    bottom: 20%;
}
.fv-item h3 .blue02 {
    --size: 24;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
    letter-spacing: 0.1em;
}
.fv-item h3 .blue02:nth-of-type(1) {
    --size: 43;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
    letter-spacing: -0.06em;
    padding:0 2%;
}
.fv-item h3 .blue01 {
    --size: 38;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
}
.fv-item:nth-of-type(2) h3 .blue01 {
    --size: 40;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
}
.fv-item:nth-of-type(2) h3 .blue01:nth-of-type(2) {
    --size: 36;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
    letter-spacing: -0.06em;
}
.fv-item:nth-of-type(3) h3 {
    --size: 32;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
    letter-spacing: -0.06em;
}
.fv-item:nth-of-type(3) h3 .blue01 {
    --size: 38;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
    
}
.fv-pr {
    position: absolute;
    bottom: 2%;
    left: 3%;
    border: 1px solid var(--white);
    --size: 16;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
    padding: 0 1%;
}

.about {
    padding: 6% 0 6%;
}
.about-row,
.serif-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 96%;
    margin: 0 auto;
}
.about-row img,
.serif-row img {
    width: 21%;
    height: auto;
}
.about-text,
.serif-text  {
    background: url("../images/serif-right.webp") center center / contain no-repeat;
    padding: 4.5% 0% 5% 9.6%;
    width: 79%;
    margin-top: 2%;
}
.about-text p,
.serif-text p {
    line-height: var(--line-height15);
}

.nofee-loss {
    padding: 6% 2% 0;
    width: 100%;
}
.nofee-loss h2 {
    position: relative;
}
.nofee-loss h2::before {
    position: absolute;
    content: "";
    top: 50%;
    right: 25%;
    transform: translateY(-50%);
    width: 25%;
    height: 6.8%;
    background: url("../images/wave.webp") center center / contain no-repeat;
}
.nofee-loss-slider {
    width: 98%;
    margin: 3% auto 6%;
    overflow: hidden;
    padding: 0 1% 2%;
}
.swiper-wrapper {
    display: flex;
    align-items: stretch;
    /* overflow-x: scroll; */
}
.nofee-loss-slide {
    width: 32%;
    height: auto;
    box-shadow: 0px 0px 4px #00000040;
    padding-bottom: 1%;
    display: flex;
    flex-direction: column;
    margin-right: 1.6%;
    margin-bottom: 2%;
}
.nofee-loss-slide > h3 {
    padding: 4% 0;
    position: relative;
}
.nofee-loss-slide > h3::before {
    position: absolute;
    content: "";
    top: 100%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 8%;
    padding-top: 8%;
    background: url("../images/slide-arrow.webp") center center / contain no-repeat;
}   
.nofee-loss-name {
    gap: 2%;
    padding: 4% 0;
}
.nofee-loss-slide:nth-of-type(2) .nofee-loss-name {
    margin: 3% 0;
}
.nofee-loss-slide:nth-of-type(2) .nofee-loss-name h3 a {
    margin-top: -1%;
    display: block;
}
.nofee-loss-name img {
    width: 18%;
    height: auto;
}
.nofee-loss-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: auto;
    margin: 0 auto;
}
.nofee-loss-img img {
    width: 100%;
    height: auto;
}

.nofee-loss-text {
    padding: 6% 2% 8%;
}
.nofee-loss-text > p {
    margin-bottom: 6%;
}
.nofee-loss-text .serif-text {
    padding: 4.5% 0% 5% 8.6%;
}

.points-title {
    background: url("../images/points-title.webp") center center / contain no-repeat;
    padding: 6.8% 0 4.8%;
}
.points-title h2 {
    line-height: 1.1;
    letter-spacing: 0.06em;
}
.dots {
    position: relative;
    display: inline-block;
}
.dots::before {
    content: "•";
    position: absolute;
    top: -46%;
    left: 50%;
    transform: translateX(-50%);
    --size: 20;
    font-size: min(var(--size) * 1px, var(--size) / 780 * 100vw);
    color: var(--white);
}
.points-title h2 .bg-white {
    padding: 0 2%;
    margin-left: 1%;
    line-height: var(--line-height10);
}
.points-contents {
    padding: 6% 0;
}
.points-row {
    gap: 1%;
    margin-bottom: 4%;
}
.points-item {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--blue01);
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.points-item > h3 {
    padding: 6% 0;
    width: 100%;
    height: 23%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.points-item-contents {
    padding: 0% 2% 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 77%;
}
.points-item-contents img {
    width: 96%;
    height: auto;
    margin-bottom: 2%;
}
.points-item:nth-of-type(2) .points-item-contents img {
    width: 60%;
}

.difference {
    padding-bottom: 8%;
}
.difference-title {
    padding: 4% 0 3%;
    position: relative;
    margin-bottom: 6%;
}
.difference-title::before {
    position: absolute;
    content: "";
    top: 97%;
    left: 50%;
    transform: translateX(-50%);
    width: 4%;
    padding-top: 4%;
    background: url("../images/arrow.webp") center center / contain no-repeat;
}
.difference-title h2 span:nth-of-type(1) {
    margin-right: 1%;
    padding: 0 1%;
    letter-spacing: -0.04em;
}
.difference .serif-text {
    padding: 8.5% 0% 9% 12.6%;
}
.difference-table {
    overflow-x: scroll;
    margin: 6% auto;
}
.difference-table table {
    width: 170%;
}
.difference-table table tr th {
    width: 19%;
    padding: 1.4% 0;
    position: sticky;
    left: 0;
    z-index: 4;
}
.difference-table table tr:nth-of-type(1) a {
    width: 100%;
}
.difference-table table tr:nth-of-type(1) img {
    width: 60%;
    height: auto;
}
.difference-table table tr:nth-of-type(1) th {
    border-top: 1px solid var(--blue05);
}
.difference-table table tr:nth-of-type(1) td {
    border-top: 1px solid var(--blue05);
    padding: 0 0 1%;
}
.difference-table table tr td {
    width: 27%;
    border-right: 1px solid var(--blue05);
    border-bottom: 1px solid var(--blue05);
    padding: 1% 1.6%;
}
.difference-table table tr:nth-of-type(5) td {
    padding: 1% 0.6%;
}
.difference-table table tr:nth-of-type(6) td:nth-of-type(1) {
    padding: 1% 0 1% 4%;
}
.difference-table table tr:nth-of-type(8) td {
    padding: 1% 0 1% 4%;
}
.difference-table table tr:nth-of-type(8) td.center {
    padding: 1% 1% 1% 0;
}
.difference-table table tr td h3 {
    margin-bottom: 3%;
}
.difference-table table tr:last-of-type td {
    padding: 0.8% 0.4%;
}
.difference-table table tr:last-of-type td a {
    padding: 7%;
    border-radius: 10px;
    width: 98%;
    display: flex;
    position: relative;
    box-shadow: 0 3px 2.5px #00000040;
}
.difference-table table tr:last-of-type td a::before {
    position: absolute;
    content: "";
    top: 52%;
    right: 3%;
    transform: translateY(-50%);
    width: 11%;
    padding-top: 11%;
    background: url("../images/white-arrow.webp") center center / contain no-repeat;
}
.difference .serif-row {
    width: 90%;
}
.difference .serif-row:last-of-type .serif-text {
    padding: 8.5% 0% 9% 16.6%;
}

.perfect-title {
    padding: 4% 0 3%;
    position: relative;
}
.perfect-title::before {
    position: absolute;
    content: "";
    top: 97%;
    left: 50%;
    transform: translateX(-50%);
    width: 4%;
    padding-top: 4%;
    background: url("../images/arrow.webp") center center / contain no-repeat;
}
.perfect-title h2 span:nth-of-type(1) {
    margin-right: 1%;
    padding: 0 2%;
}
.perfect-title h2 span:nth-of-type(3) {
    display: none;
}
.perfect-title h2 span:last-of-type {
    padding-left: 2.6%;
}
.perfect-title h2 {
    position: relative;
}
.perfect-title h2::before {
    position: absolute;
    content: "";
    bottom: 0.6%;
    left: 40.1%;
    width: 1.8%;
    padding-top: 7.6%;
    background: url("../images/yellow1.webp") center center / contain no-repeat;
}
.perfect-contents {
    padding: 12% 2% 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 77%;
}
.perfect-item {
    position: relative;
    border: 1px solid var(--blue05);
    border-radius: 10px;
    box-shadow: 0 3px 4px #00000036;
    padding: 8% 2% 6%;
    margin-bottom: 12%;
}
.perfect-item:last-of-type {
    margin-bottom: 4%;
}
.perfect-num {
    position: absolute;
    top: 0;
    left: 5%;
    transform: translateY(-50%);
    width: 28%;
    height: auto;
}
.perfect-item h3 {
    padding-bottom: 2%;
    margin-bottom: 2%;
    position: relative;
}
.perfect-item h3::before {
    position: absolute;
    content: "";
    height: 3%;
    width: 100%;
    bottom: 0;
    left: 0;
    background: url("../images/border-dashed.webp") center center / cover no-repeat;
}
.perfect-item:first-of-type table {
    border-collapse: collapse;
    margin: 12% auto 8%;
    line-height: 1.2;
}
.perfect-item:first-of-type table tr:first-of-type th {
    border-top: 1px solid var(--gray02);

}
.perfect-item:first-of-type table tr:first-of-type td {
    border-left: 1px solid var(--white);
}
.perfect-item:first-of-type table tr:first-of-type td:first-of-type {
    position: relative;
}
.perfect-item:first-of-type table tr:first-of-type td:first-of-type::before {
    position: absolute;
    content: "";
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--red);
    height: 14%;
    width: calc(100% + 8px);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.perfect-item:first-of-type table tr:last-of-type td:first-of-type::after {
    position: absolute;
    content: "";
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--red);
    height: 10%;
    width: calc(100% + 7px);
}
.perfect-item:first-of-type table tr th {
    border-left: 1px solid var(--gray02);
    border-bottom: 1px solid var(--gray02);
}
.perfect-item:first-of-type table tr td {
    border-right: 1px solid var(--blue06);
    border-bottom: 1px solid var(--blue06);
    padding: 4% 0;
}
.perfect-item:first-of-type table tr:last-of-type td:first-of-type {
    border-bottom: 4px solid var(--red);
    position: relative;
}
.perfect-item:first-of-type table tr td:nth-of-type(1) {
    border-left: 4px solid var(--red);
    border-right: 4px solid var(--red);
    border-bottom: 1px solid var(--gray04);
    padding: 2% 0;
    line-height: 0.6;
}
.perfect-portable {
    border: 1px solid var(--black);
    border-radius: 10px;
    padding: 2%;
    margin-bottom: 6%;
}
.perfect-portable table tr td {
    border-top: 1px solid var(--gray04);
    border-bottom: 1px solid var(--gray04);
    width: 35.5%;
}
.perfect-portable table tr td:nth-of-type(2) {
    width: 29%;
}
.perfect-portable table tr td:first-of-type {
    border-left: 1px solid var(--gray04);
    padding: 2% 2% 2% 0 ;
}
.perfect-portable table tr td:last-of-type {
    border-right: 1px solid var(--gray04);
    padding: 1% 0 1% 2%;
}
.perfect-portable table tr:first-of-type td,
.perfect-portable table tr:nth-of-type(2) td {
    border: none;
    padding: 0;
}
.perfect-portable table tr:first-of-type th:first-of-type ,
.perfect-portable table tr:first-of-type th:last-of-type {
    border-radius: 40px;
}
.perfect-portable table tr:nth-of-type(2) td:first-of-type img {
    display: block;
    width: 70%;
    margin: 2% auto;
}
.perfect-portable table tr:nth-of-type(2) td:last-of-type img {
    display: block;
    width: 90%;
    margin: 2% auto;
}
.perfect-item:nth-of-type(2) .serif-text {
    padding: 6.5% 0% 7% 8.2%;
}
.perfect-item:nth-of-type(3) .serif-text {
    padding: 4.5% 0% 5% 14.6%;
}
.perfect-tab {
    position: relative;
    margin: 20% auto 10%;
}
.perfect-tab-item {
    position: relative;
    padding: 3% 2%;
    z-index: 2;
}
.perfect-tab-item p {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 49%;
    padding: 1.4% 5%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border: 2px solid var(--gray05);
    letter-spacing: 0.1em;
    cursor: pointer;
}
.perfect-tab-item:nth-of-type(2) p {
    left: auto;
    right: 0;
}
.perfect-tab-item table {
    margin: 0 auto;
    padding: 6% 2%;
    border-collapse: separate;
    border-spacing: 0px;
}
.perfect-tab-item table tr th {
    width: 40%;
}
.perfect-tab-item table tr td {
    width: 60%;
    border-left: 2px solid var(--blue05);
    border-right: 2px solid var(--blue05);
}
.perfect-tab-item table tr:first-of-type td {
    border-top: 2px solid var(--blue05);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.perfect-tab-item table tr:last-of-type td {
    border-bottom: 2px solid var(--blue05);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.perfect-tab-item table tr th,
.perfect-tab-item table tr td {
    position: relative;
    padding: 3% 0;
}
.perfect-tab-item table tr th::before,
.perfect-tab-item table tr td::before {
    position: absolute;
    content: "";
    height: 3%;
    width: 100%;
    bottom: 0;
    left: 0;
    background: url("../images/border-dashed.webp") center center / contain no-repeat;
}
.perfect-tab-item table tr:last-of-type th::before ,
.perfect-tab-item table tr:last-of-type td::before {
    display: none;
}
.perfect-tab-item:nth-of-type(2) table tr td {
    padding: 3% 1% 3% 6%;
}
.perfect-tab-item:nth-of-type(2) table tr:first-of-type td {
    padding: 3% 0;
}
.perfect-tab-item:not(.active) {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: var(--white);
}
.perfect-tab-item:not(.active) table {
    visibility: hidden;
    opacity: 0;
}
.perfect-tab-item:not(.active) p {
    background-color: var(--white);
}
.perfect-tab-item:not(.active) table.active {
    display: table;
}
.perfect-item .serif-row {
    position: relative;
    z-index: 3;
}

.guide {
    padding-bottom: 10%;
}
.guide-title {
    padding: 4% 0 5%;
    position: relative;
    margin-bottom: 6%;
}
.guide-title::before {
    position: absolute;
    content: "";
    top: 97%;
    left: 50%;
    transform: translateX(-50%);
    width: 4%;
    padding-top: 4%;
    background: url("../images/arrow.webp") center center / contain no-repeat;
}
.guide-title .bg-white {
    display: inline-block;
    padding: 0.4% 8%;
    margin-bottom: 1%;
}
.guide-contents {
    padding: 6% 2%;
    margin-top: 6%;
    border: 1px solid var(--black);
    border-radius: 10px;
}
.guide-contents-title {
    width: 100%;
    margin-bottom: 6%;
    gap: 1%;
}
.guide-contents-title img {
    width: 12%;
    height: auto;
}
.guide-img {
    width: 86%;
    height: auto;
    display: block;
    margin: 0 auto 4%;
}
.guide-img:not(.active) {
    display: none;
}
.guide-point {
    border: 1px solid var(--blue06);
    margin-bottom: 10%;
}
.guide-point h4 {
    padding: 2% 0;
    width: 100%;
    position: relative;
}
.guide-point h4::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
    height: 1px;
    width: 6%;
    background-color: var(--white);
}
.guide-point h4::after {
    position: absolute;
    content: "";
    top: 50%;
    right: 20%;
    transform: translateY(-50%);
    height: 1px;
    width: 6%;
    background-color: var(--white);
}
.guide-point-list {
    padding: 6% 2% 2%;
}
.guide-point-list p {
    padding-left: 7%;
    margin-bottom: 5%;
    position: relative;
}
.guide-point-list p::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 6%;
    padding-top: 6%;
    background: url("../images/guide-list-check.webp") center center / contain no-repeat;
}
.guide-contents > h4 {
    position: relative;
    width: 100%;
}
.guide-contents > h4::before {
    position: absolute;
    content: "";
    top: 23%;
    left: 23%;
    width: 0.4%;
    padding-top: 5.6%;
    background-color: var(--black);
    transform:rotate(-30deg);
}
.guide-contents > h4::after {
    position: absolute;
    content: "";
    top: 23%;
    right: 23%;
    width: 0.4%;
    padding-top: 5.6%;
    background-color: var(--black);
    transform:rotate(30deg);
}
.guide-tab {
    padding: 4% 0 10%;
    gap: 1%;
}
.guide-tab-item {
    width: 49%;
    padding: 2.4% 0;
    border-radius: 10px;
    border: 2px solid var(--blue01);
    cursor: pointer;
}
.guide-tab-item:last-of-type {
    letter-spacing: 0.06em;
}
.guide-tab-item:not(.active) {
    background-color: var(--white);
    color: var(--black);
}
.guide-contents > h5 {
    position: relative;
    width: 100%;
    margin-bottom: 5%;
}
.guide-contents > h5:nth-of-type(1):before {
    position: absolute;
    content: "";
    top: 50%;
    left: 33%;
    transform: translateY(-50%);
    height: 1px;
    width: 6%;
    background-color: var(--blue06);
}
.guide-contents > h5:nth-of-type(1):after {
    position: absolute;
    content: "";
    top: 50%;
    right: 33%;
    transform: translateY(-50%);
    height: 1px;
    width: 6%;
    background-color: var(--blue06);
}
.guide-detail-row {
    gap: 1%;
}
/* No.1 Square */
.guide-item01 .guide-detail-row:first-of-type .guide-detail-list > .guide-detail-list-row {width: 79%;}
.guide-item01 .guide-detail-row:first-of-type .guide-detail-list-item.visa {width: 30%;}
.guide-item01 .guide-detail-row:first-of-type .guide-detail-list-item.mastercard {width: 26%;}
.guide-item01 .guide-detail-row:first-of-type .guide-detail-list-item.amex {width: 15%;}
.guide-item01 .guide-detail-row:first-of-type .guide-detail-list-item.dinersclub {width: 21.2%;}
.guide-item01 .guide-detail-row:first-of-type .guide-detail-list-item.discover {width: 21.4%;}

.guide-item01 .guide-detail-row:nth-of-type(2) .guide-detail > .guide-detail-contents {width: 96%;}

/* No.2 PayCAS Mobile */
.guide-item02 .guide-detail-row:first-of-type .guide-detail .guide-detail-list:nth-of-type(2) {padding: 2% 8%;}
.guide-item02 .guide-detail-row:first-of-type .guide-detail-list-item.visa {margin-right: -1%;}
.guide-item02 .guide-detail-row:first-of-type .guide-detail-list-item.mastercard {margin-left: -8%;}
.guide-item02 .guide-detail-row:first-of-type .guide-detail-list {margin-bottom: -2% !important;}
.guide-item02 .guide-detail-row:first-of-type .guide-detail-list:first-of-type::before {bottom: 6%;}
.guide-item02 .guide-detail-row:nth-of-type(3) .guide-detail-list-row:nth-last-of-type(3) {padding: 0 4% 4%; gap:0%;}
.guide-item02 .guide-detail-row:nth-of-type(3) .guide-detail-list-row:nth-last-of-type(3) .guide-detail-list-item {width: 21%;  margin-right: 4%;}
.guide-item02 .guide-detail-row:nth-of-type(3) .guide-detail-list-row:nth-last-of-type(3) .guide-detail-list-item:first-of-type {margin-right: 0%;}
.guide-item02 .guide-detail-row:nth-of-type(3) .guide-detail-list-row:nth-last-of-type(3) .guide-detail-list-item:nth-of-type(2) {margin-left: 0%;}
.guide-item02 .guide-detail-row:nth-of-type(3) .guide-detail-list-row:nth-last-of-type(3) .guide-detail-list-item:last-of-type {margin-right: 0%;}
.guide-item02 .guide-detail-row:nth-of-type(3) .guide-detail-list-row:nth-last-of-type(3) .guide-detail-list-item.merpay {position: relative; width: 25% !important;}
.guide-item02 .guide-detail-row:nth-of-type(3) .guide-detail-list-row:nth-last-of-type(3) .guide-detail-list-item.merpay img {position: absolute; width: 110%; transform: translateX(-50%); left: 50%;}
.guide-item02 .guide-detail-row:nth-of-type(3) .guide-detail-list-row:nth-last-of-type(3) .guide-detail-list-item.merpay img:nth-of-type(1) {top: -28%;z-index: 2;}
.guide-item02 .guide-detail-row:nth-of-type(3) .guide-detail-list-row:nth-last-of-type(3) .guide-detail-list-item.merpay img:nth-of-type(2)  {bottom: -28%;z-index: 1;}
.guide-item02 .guide-detail-row:nth-of-type(2) .guide-detail-list .guide-detail-list-row:nth-of-type(2) {margin-top: -10%;}

/* No.3 stera pack(ステラパック) */
.guide-item03 .guide-detail-row:first-of-type .guide-detail .guide-detail-list:nth-of-type(2) {padding: 2% 8%;}
.guide-item03 .guide-detail-row:first-of-type .guide-detail-list-item.visa {margin-right: -1%;}
.guide-item03 .guide-detail-row:first-of-type .guide-detail-list-item.mastercard {margin-left: -8%;}
.guide-item03 .guide-detail-row:first-of-type .guide-detail-list {margin-bottom: -2% !important;}
.guide-item03 .guide-detail-row:first-of-type .guide-detail-list:first-of-type::before {bottom: 6%;}
.guide-item03.guide-contents > h4:last-of-type::before {left: 7%;}
.guide-item03.guide-contents > h4:last-of-type::after {right: 7%;}
.guide-item03 .guide-detail-row:nth-of-type(2) .guide-detail-list .guide-detail-list-row:nth-of-type(2) {margin-top: -10%;}


/* No.4 PAYGATE */
.guide-item04 .guide-detail-row:first-of-type .guide-detail-list > .guide-detail-list-row {width: 79%;}
.guide-item04 .guide-detail-row:first-of-type .guide-detail-list > .guide-detail-list-row:nth-of-type(2) {margin-bottom: -3%;}
.guide-item04 .guide-detail-row:nth-of-type(2) .guide-detail-contents {margin-bottom: -2%;}
.guide-item04 .guide-detail-row:nth-of-type(3) .guide-detail-list {margin-bottom: -3%;}
.guide-item04 .guide-detail-row:first-of-type .guide-detail-list-item.visa {width: 30%;}
.guide-item04 .guide-detail-row:first-of-type .guide-detail-list-item.mastercard {width: 26%;}
.guide-item04 .guide-detail-row:first-of-type .guide-detail-list-item.amex {width: 15%;}
.guide-item04 .guide-detail-row:first-of-type .guide-detail-list-item.dinersclub {width: 21.2%;}
.guide-item04 .guide-detail-row:first-of-type .guide-detail-list-item.discover {width: 20.4%;}
.guide-item04 .guide-detail-row:first-of-type .guide-detail-list-item.unionpay {width: 27.4%;}
.guide-item04 .guide-detail-row:nth-of-type(2) .guide-detail-list .guide-detail-list-row:nth-of-type(2) {margin-top: -10%;}


.guide-detail {
    width: 49%;
    border: 1px solid var(--blue06);
    margin-bottom: 1%;
}
.guide-detail.w100 {
    width: 100%;
}
.guide-detail h6 {
    padding: 1% 0;
}
.guide-detail-list {
    padding: 5% 0;
    height: 100%;
}
.guide-detail-list p {
    letter-spacing: 0.06em;
}
.guide-payment {
    margin: 6% auto;
    padding: 6% 0;
}
.guide-payment > h5 {
    position: relative;
    width: 100%;
    margin-bottom: 5%;
}
.guide-payment > h5:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 17%;
    transform: translateY(-50%);
    height: 1px;
    width: 6%;
    background-color: var(--blue06);
}
.guide-payment > h5:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 17%;
    transform: translateY(-50%);
    height: 1px;
    width: 6%;
    background-color: var(--blue06);
}
.guide-payment .guide-detail-list {
    padding: 2% 0;
}
.guide-payment .guide-detail-list p {
    letter-spacing: -0.03em;
    line-height: 1.2;
    white-space: nowrap;
}
.guide-payment .guide-detail-list p small {
    padding-left: 2%;
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.guide-payment .guide-detail-list p:first-of-type {
    letter-spacing: -0.01em;
    padding: 0 3%;
    margin-bottom: 2%;
}
.guide-detail-list-row {
    gap: 1%;
}
.guide-detail-list-item.dinersclub {
    justify-content: space-between;
}
.guide-detail-list-item img {
    margin-bottom: 1%;
    width: 100%;
    height: 64%;
    object-fit: contain;
    object-position: center;
}
.guide-detail-list-item.id {
    width: 50%;
}
.guide-detail-list-item.id img {
    object-fit: cover;
    height: 75%;
}
.guide-detail-list-item.rakutenedy {
    width: 50%;
}
.guide-detail-list-item.rakutenedy img {
    object-fit: contain;
    height: 70%;
}
.guide-detail-list-item.quicpay {
    width: 50%;
}
.guide-detail-list-item.quicpay img {
    object-fit: cover;
    height: 75%;
}
.guide-detail-list-item.waon {
    width: 50%;
}
.guide-detail-list-item.waon img {
    object-fit: contain;
    height: 80%;
}
.guide-detail-list-item.nanaco {
    width: 50%;
}
.guide-detail-list-item.nanaco img {
    object-fit: contain;
    height: 80%;
}
.guide-detail-list-row.other {
    margin: 2% 0;
    width: 61%;
}
.guide-detail-list-row.other img {
    width: 100%;
    height: auto;
}
.guide-detail-list-row.other .quicpay {
    margin-top: 2%;
    position: relative;
    padding: 4% 4% 4% 26%;
    width: 70%;
    z-index: 1;
}
.guide-detail-list-row.other .quicpay::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url("../images/QUICPay.webp") center center / contain no-repeat;
    width: 40%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
}
.guide-detail-list-row.other .quicpay::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--black);
    z-index: 2;
}
.guide-detail-list-row.other .quicpay p {
    padding-top: 10%;
    position: relative;
    z-index: 2;
}
.cashless .guide-detail-contents {
    gap: 4%;
}
.cashless .guide-detail-list {
    width: 35%;
}
.cashless .guide-detail-list p:first-of-type {
    margin-bottom: 8%;
}
.qr .guide-detail-list-row {
    width: 70%;
    margin-bottom: 2%;
}
.qr .guide-detail-list-row:first-of-type .guide-detail-list-item {
    width: 24%;
}
.qr .guide-detail-list-row .guide-detail-list-item img {
    height: 100%;
}

.reviews {
    border: 1px solid var(--blue06);
    padding: 6% 2%;
    margin-bottom: 10%;
}
.reviews > h5 {
    position: relative;
    width: 100%;
    margin-bottom: 5%;
}
.reviews > h5:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 12%;
    transform: translateY(-50%);
    height: 1px;
    width: 6%;
    background-color: var(--blue06);
}
.reviews > h5:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 12%;
    transform: translateY(-50%);
    height: 1px;
    width: 6%;
    background-color: var(--blue06);
}
.reviews-contents {
    padding: 4% 3% 6%;
    margin-bottom: 5%;
    border: 1px solid var(--gray06);
}
.reviews-contents-row {
    position: relative;
    padding-bottom: 8%;
    align-items: center;
}
.reviews-contents-row img {
    width: 26%;
    height: auto;
}
.reviews-contents-row h6 {
    padding-left: 6%;
}
.reviews-contents-row p {
    position: absolute;
    bottom: 0;
    right: 0;
}
.reviews-contents > img {
    width: 100%;
    height: 2%;
    object-fit: cover;
    object-position: center;
    margin: 3% auto;
}
.guide-contents > h4:last-of-type::before {
    left: 15%;
}
.guide-contents > h4:last-of-type::after {
    right: 15%;
}
.btn01 {
    background: linear-gradient(to bottom, #FF9A4A, #F8842A, #E96702);
    text-decoration: none;
    padding: 5% 12% 5% 2%;
    position: relative;
    margin-top: 3%;
    box-shadow: 0px 1px 4px #68686836;
    overflow: hidden;
}
.btn01::before {
    position: absolute;
    content: "";
    right: 1%;
    top: 52%;
    transform: translateY(-50%);
    width: 8%;
    padding-top: 8%;
    background: url("../images/btn01-arrow.webp") center center / contain no-repeat;
    -webkit-animation-name: btnArrow;
    animation-name: btnArrow;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.btn01::after {
    -moz-animation: reflection 4s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -ms-animation: reflection 4s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -o-animation: reflection 4s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -webkit-animation: reflection 4s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    animation: reflection 4s ease-in-out infinite;
    background-color: #fff;
    content: " ";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -180px;
    transform: rotate(45deg);
    width: 30px;
}
.btn02 {
    position: relative;
    overflow: hidden;
}
.btn02::before {
    -webkit-animation-name: btnArrow;
    animation-name: btnArrow;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.btn02::after {
    -moz-animation: reflection 4s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -ms-animation: reflection 4s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -o-animation: reflection 4s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -webkit-animation: reflection 4s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    animation: reflection 4s ease-in-out infinite;
    background-color: #fff;
    content: " ";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -180px;
    transform: rotate(45deg);
    width: 30px;
}
@keyframes btnArrow {
    0% {
        opacity: 0;
        transform: translate(-30px, -50%);
    }
    50% {
        opacity: 1;
        transform: translate(-10px, -50%);
    }
    100% {
        opacity: 0;
        transform: translate(0, -50%);
    }
}
@keyframes reflection {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        transform: scale(4) rotate(45deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(50) rotate(45deg);
        transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}
.guide-detail0101:not(.active),
.guide-detail0102:not(.active),
.guide-detail0201:not(.active),
.guide-detail0202:not(.active),
.guide-detail0301:not(.active),
.guide-detail0302:not(.active),
.guide-detail0401:not(.active),
.guide-detail0402:not(.active),
.guide-detail0501:not(.active),
.guide-detail0502:not(.active) {
    display: none !important;
}
.guide-detail-list-upper .guide-detail-list:first-of-type {
    position: relative;

}
.guide-detail-list-upper .guide-detail-list:first-of-type::before {
    position: absolute;
    content: "";
    left: 102%;
    top: 4%;
    bottom: 4%;
    width: 2%;
    background: url("../images/vertical-line.webp") center center / contain no-repeat;
}
.guide-detail-list-upper .guide-detail-list .guide-detail-list-item.amex {
    margin-top: -3%;
}
.guide-detail-list-upper .guide-detail-list .guide-detail-list-row {
    margin-bottom: 2%;
}
.qr .guide-detail-list-row.btm-dashed {
    position: relative;
    width: 100%;
    padding: 0 10% 4%;
    margin-bottom: 4%;
    gap: 4%;
}
.qr .guide-detail-list-row.btm-dashed p:first-of-type {
    padding-left: 0;
    margin-left: 0;
}
.qr .guide-detail-list-row.btm-dashed .guide-detail-list-item.paypay {
    width: 20%;
}
.btm-dashed::before {
    position: absolute;
    content: "";
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 2%;
    background: url("../images/border-dashed.webp") center center / contain no-repeat;
}
.qr .guide-detail-list-row.btm-dashed .guide-detail-list-item.merpay {
    width: 23%;
}
.qr .guide-detail-list-row.btm-dashed .guide-detail-list-item.merpay img:last-of-type {
    margin-top: -6%;
}
.qr p.guide-detail0203 {
    padding: 0 3%;
    margin-bottom: 2%;
}
.qr .guide-detail-list-row.guide-detail0203 {
    gap: 8%;
}
.qr .guide-detail-list-row.guide-detail0203 .guide-detail-list-item {
    width: 45%;
}
.qr .guide-detail-list-row.guide-detail0203 .guide-detail-list-item.jkopay {
    width: 40%;
}
.guide-contents > h4.guide-btn02-title::before {
    left: 9%;
}
.guide-contents > h4.guide-btn02-title::after {
    right: 9%;
}
.guide-detail-list-row.other .quicpay-img {
    width: 30%;
    height: auto;
    margin-top: -4%;
}

.steps .guide-title::before {
    display: none;
}
.guide-title .bg-white.row-center-center {
    display: flex;
    gap: 2%;
    padding: 1.4% 3%;
    white-space: nowrap;
    position: relative;
}
.guide-title .bg-white.row-center-center::before {
    position: absolute;
    content: "";
    top: 94%;
    left: 50%;
    transform: translateX(-50%);
    width: 4%;
    padding-top: 4%;
    background: url("../images/white-arrow02.webp") center center / contain no-repeat;
}
.guide-title .bg-white.row-center-center img {
    width: 14%;
    height: auto;
}

.steps .steps-serif01 .serif-text {
    background: url("../images/serif02-right.webp") center center / contain no-repeat;
    padding: 9.5% 5% 9% 10.6%;
}
.steps .steps-serif02 .serif-text {
    padding: 4.5% 0% 5% 11.6%;
}
.steps .steps-serif03 .serif-text {
    padding: 6.5% 0% 7% 9.6%;
}
.steps .steps-serif04 .serif-text {
    padding: 6.5% 3% 7% 8.6%;
}
.steps-item {
    border: 2px solid var(--blue01);
    border-radius: 10px;
    padding-bottom: 6%;
}
.steps-item-title {
    border-bottom: 2px solid var(--blue01);
}
.steps-item-title p {
    padding: 3% 0;
}
.steps-item-title h3 {
    padding: 3% 0;
}
.steps-item .steps-item-title h3 {
    padding: 1% 5%;
}
.steps-item-check {
    border-radius: 10px;
    border: 1px solid var(--black);
    padding: 3% 6%;
}
.steps-item-check p {
    position: relative;
    padding: 1% 0% 1% 8%;
}
.steps-item-check p::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4%;
    padding-top: 4%;
    background: url("../images/step-check.webp") center center / contain no-repeat;
}

.boost {
    padding: 6% 0;
}
.boost-title {
    border-bottom: 1px solid var(--black);
    position: relative;
}
.boost-title::before {
    position: absolute;
    content: "";
    bottom: -6%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--black);
}
.circle-img {
    width: 70%;
    height: auto;
    margin-left: 20%;
    margin-right: 10%;
}
.reviews-more {
    overflow: hidden;
    /* height: min(1860px, 1860 / 780 * 100vw); */
    padding-bottom: 20%;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 4px #00000040;
    border: 2px solid var(--blue06);
    transition: max-height .4s ease;
}
.reviews-more::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    padding-top: 20%;
    background-color: var(--white);
    z-index: 2;
}
.reviews-btn {
    gap: 2%;
    border-bottom: 2px solid var(--orange);
    cursor: pointer;
    padding: 0 2% 2%;
    justify-content: space-between;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    margin-bottom: 7%;
}
.reviews-btn img {
    width: 9%;
    height: auto;
}

.recommendation-title {
    padding: 4% 0 5%;
    position: relative;
    margin-bottom: 6%;
}
.recommendation-title::before {
    position: absolute;
    content: "";
    top: 97%;
    left: 50%;
    transform: translateX(-50%);
    width: 4%;
    padding-top: 4%;
    background: url("../images/arrow.webp") center center / contain no-repeat;
}
.recommendation-title .bg-white {
    display: inline-block;
    padding: 0.4% 3%;
    margin-bottom: 1%;
}
.recommendation-item01 {
    border: 1px solid var(--blue05);
}
.recommendation-item02 {
    border: 1px solid var(--brown);
}
.recommendation-item03 {
    border: 1px solid var(--green02);
}
.recommendation-item-contents a:first-of-type {
    box-shadow: 0 4px 4px #00000040;
}
.recommendation-btn01-title ,
.recommendation-btn02-title ,
.recommendation-btn03-title {
    position: relative;
}
.recommendation-btn01-title::before ,
.recommendation-btn02-title::before ,
.recommendation-btn03-title::before {
    position: absolute;
    content: "";
    top: -10%;
    left: 14%;
    width: 0.4%;
    padding-top: 5.6%;
    background-color: var(--black);
    transform: rotate(-30deg);
}
.recommendation-btn01-title::after ,
.recommendation-btn02-title::after ,
.recommendation-btn03-title::after {
    position: absolute;
    content: "";
    top: -10%;
    right: 14%;
    width: 0.4%;
    padding-top: 5.6%;
    background-color: var(--black);
    transform: rotate(30deg);
}
.recommendation-btn02-title::before {
    left: 7%;
}
.recommendation-btn02-title::after {
    right: 7%;
}
.recommendation-btn03-title::before {
    left: 11%;
}
.recommendation-btn03-title::after {
    right: 11%;
}