@charset "utf-8";
/* fv */
#header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 101;
    padding: 1rem 0;
    width: 75rem;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 3px 6px #00000015;
}
#c_logo {
    width: 18.3rem;
}
#c_tel {
    width: 23.2rem;
}
#c_btn {
    width: 26.4rem;
}
#conversion {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    margin: 0 auto;
}
.c_btn {
    width: 65rem;
    margin: -1.7rem auto 0 auto;
    display: block;
    position: relative;
}
.fvTtl {
    width: 68rem;
    position: absolute;
    top: 3rem;
    left: 3.4rem;
    z-index: 1;
}
.fvNo1 {
    width: 29.7rem;
    position: absolute;
    top: 13rem;
    left: 3.5rem;
}
.fvVio {
    width: 55.5rem;
    position: absolute;
    top: 40rem;
    left: -1.5rem;
}
.fvTxt {
    width: 65rem;
    position: absolute;
    top: 67rem;
    left: 0;
}
#fv_li {
    position: absolute;
    top: 75rem;
    margin: 0 2rem 0 1.5rem;
}
.fv_li {
    width: 22rem;
    margin-left: 1.5rem;
}
.fv p {
    position: absolute;
    top: 98rem;
}
.boxBtnGb {
    text-align: center;
    padding: 2rem 1rem 1rem;
    box-sizing: border-box;
}
/* plan00 */
#plan00 {
    background: #6281AA;
    padding: 3rem 0;
    text-align: center;
}
/* medal */
#medal {
    background: url(../img/medalBg.webp) no-repeat center;
    background-size: contain;
    padding: 2rem 3rem;
    height: 111.6rem;
    z-index: 2;
}
#medalNext {
    position: absolute;
    top: 101.5rem;
    left: 12rem;
    width: 51rem;
}
/* plan */
#plan {
    background: #6281AA;
    padding: 3rem 0;
    text-align: center;
}
#plan > p {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 1rem;
    width: 61rem;
    margin: 0 auto;
}
.planVio {
    height: 32rem;
    padding: 1rem 0 0 1.5rem;
    display: block;
    position: static;
}
.ben01 {
    height: 88.3rem;
    margin-top: -3.2rem;
    padding: 0 2rem;
}
.shopList {
    padding: 0 4rem;
}
/* Campaign00 */
.campaign00{
    padding-top: 15rem;
    z-index: 1;
    margin-top: -3rem;
}
.campaignTxt00 {
    position: absolute;
    top: 5rem;
    left: 3.1rem;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 1rem 1.5rem;
    letter-spacing: 0.5rem;
}
.campaign00 .cpTxt {
    top: 77rem;
}
.limitedPrice {
    width: 52.2rem;
    left: 12rem;
}
.campaignPrice {
    width: 59.3rem;
    left: 8rem;
}
.benefitTxt01 {
    width: 30rem;
    left: 8rem;
}
.benefitTxt02 {
    width: 34rem;
    left: 8rem;
}
.benefitTxt03 {
    width: 33rem;
    left: 8rem;
}
.benefitTxt04 {
    font-weight: 400;
    color: #808080;
    width: 54rem;
    left: 11.3rem;
}
.benMonth {
    display: flex;
    left: 45.1rem;
}
.campaign00 .limitedPrice {
    top: 101.6rem;
}
.campaign00 .campaignPrice {
    top: 84rem;
}
.campaign00 .benefitTxt01 {
    top: 138.5rem;
}
.campaign00 .benefitTxt02 {
    top: 132rem;
}
.campaign00 .benefitTxt03 {
    top: 201rem;
}
.campaign00 .benefitTxt04 {
    top: 237rem;
}
.campaign00 .benMonth {
    top: 132.8rem;
}
/* Campaign */
.campaign, .campaign00 {
    background: linear-gradient(to top, #BECDE3, #6180AA);
    padding-bottom: 6rem;
}
.campaignImg {
    height: 193rem;
}
.campaign00 .cpTxt, .campaign .cpTxt, .campaignPrice, .limitedPrice, .benefitTxt01, .benefitTxt02, .benefitTxt03, .benefitTxt04, .benefitTxt05, .hadaterasuTxt01, .hadaterasuTxt02, .hadaterasuTxt03, .benMonth  {
    position: absolute;
}
.cpTxt {
    padding: 0.3rem 5rem 0.7rem 5rem;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    text-align: center;
    left: 23rem;
}
.campaign .cpTxt {
    top: 64.5rem;
}
.cpTxt span {
    color: #E6495F;
}
.campaign .campaignPrice {
    top: 71rem;
}
.campaign .limitedPrice {
    top: 89.5rem;
}
.campaign .benefitTxt01 {
    top: 126.5rem;
}
.campaign .benefitTxt02 {
    top: 119.5rem;
}
.campaign .benefitTxt03 {
    top: 189rem;
}
.campaign .benefitTxt04 {
    top: 224.5rem;
}
.campaign .benMonth {
    top: 121rem;
}
.benefitTxt04 a {
    color: #808080;
    font-weight: bold;
}
/* End Campaign */
/* compare */
#compare {
    background: url(../img/compareBg.webp) no-repeat center;
    background-size: contain;
    padding: 3rem 3rem 4rem;
    height: 166rem;
    margin-top: -0.5rem;
}
.compareImg {
    height: 126.4rem;
}
.compareTtl01 {
    width: 51.3rem;
}
.compareTtl02 {
    width: 42.3rem;
}
.compareTxt01 ,.compareTxt02,.compareTxt03,.compareTxt04,.compareTxt05,.compareTxt06,.compareTxt07,.compareTxt08,.compareTxt09 {
    position: absolute;
}
.compareTxt01 {
    width: 17rem;
    top: 42rem;
    left: 17.5rem;
}
.compareTxt02 {
    width: 17rem;
    top: 42.3rem;
    left: 36.5rem;
}
.compareTxt03 {
    width: 17rem;
    top: 42.3rem;
    left: 54rem;
}
.compareTxt04 {
    width: 17rem;
    top: 89rem;
    left: 17.5rem;
}
.compareTxt05 {
    width: 17rem;
    top: 89rem;
    left: 36.5rem;
}
.compareTxt06 {
    width: 17rem;
    top: 89rem;
    left: 54rem;
}
.compareTxt07 {
    width: 17rem;
    top: 106rem;
    left: 17.5rem;
}
.compareTxt08 {
    width: 17rem;
    top: 106rem;
    left: 36.5rem;
}
.compareTxt09 {
    width: 17rem;
    top: 106rem;
    left: 54rem;
}
.dakara {
    width: 17.1rem;
}
/* no1 */
#no1 {
    background: url(../img/no1Bg.webp) no-repeat center top;
    background-size: cover;
    height: 51rem;
    margin-top: -9rem;
    padding-top: 13rem;
}
.no1Ttl {
    width: 61.3rem;
}
.no1Img {
    width: 59rem;
}
/* doctor */
#doctor {
    background: url(../img/doctorBg.webp) no-repeat center top;
    background-size: cover;
    padding-top: 3rem;
    height: 105rem;
    padding-bottom: 110rem;
}
.doctorTtl {
    width: 52.1rem;
    margin-left: 13rem;
    margin-bottom: 8.5rem;
}
.doctorName {
    width: 42.2rem;
    float: right;
    margin-bottom: 11rem;
}
.doctorTxt01 {
    padding-left: 6rem;
    float: right;
    margin-right: 3rem;
    font-weight: 500;
    margin-bottom: 2rem;
}
.doctorTxt02 {
    width: 62.5rem;
    display: inline-block;
    margin-top: -2.5rem;
    margin-left: 7rem;
}
sup{
    vertical-align: super;
    font-size: 1.4rem;
}
/* support */
#support {
    background: url(../img/supportBg.webp) no-repeat center top;
    background-size: contain;
    text-align: center;
    padding: 11rem 3rem 3rem 3rem;
    height: 115rem;
}
.supportFrame {
    height: 72.5rem;
}
.supportSarani, .supportTxt, .supportImg {
    position: absolute;
}
.supportSarani {
    width: 12.5rem;
    top: -4rem;
    left: 31rem;
}
.supportTtl01 {
    width: 40.1rem;
}
.supportTtl02 {
    width: 54.9rem;
}
.supportTxt {
    width: 55rem;
    top: 57.6rem;
    left: 11rem;
}
.supportImg {
    width: 62.7rem;
    top: 77.1rem;
    left: 7rem;
}
/* number */
#number {
    background: url(../img/numberBg.webp) no-repeat center top;
    background-size: cover;
    text-align: center;
    padding: 8rem 0 3rem;
    height: 238rem;
}
.members, .achievements {
    width: 62.8rem;
}
.okagesama {
    width: 47.8rem;
}
.toppa {
    width: 32.4rem;
}
#number #box1 {
    font-family: Zen Old Mincho, Yu Mincho;
    position: absolute;
    top: 29rem;
    left: 13rem;
    text-shadow: 1px 2px 10px #205288;;
}
#box1 p:first-child {
    margin-bottom: 17rem;
}
.count-size{
    font-size:10rem;
    font-weight: bold;
  }
/* comments */
#comments {
    padding: 1rem 0;
}
.comments_area {
    cursor: grab;
    margin: 0 2rem;
}
#comments_box .slick-prev {
    left: 1rem;
}
#comments_box .slick-next {
    right: 1rem;
}
#comments_box .slick-arrow {
    display: block;
    border: none;
    font-size: 0;
    position: absolute;
    z-index: 100;
    top: calc(50% - 4.6rem);
    width: 4.8rem;
    height: 5.4rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
#comments_box .slick-arrow:hover {
    opacity: 0.8;
}
#comments_box .slick-prev {
    background: url(../img/prev.svg) no-repeat;
    background-size: 4.6rem;
    left: 2rem;
}
#comments_box .slick-next {
    background: url(../img/next.svg) no-repeat;
    background-size: 4.8rem;
    right: 2rem;
}
.comments_img {
    width: 69.1rem;
}
#comments_box .slick-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: absolute;
    top: 0;
    width: 59rem;
}
#comments_box .slick-dots li {
    margin: 0;
    position: relative;
}
#comments_box .slick-dots li:hover::after {
    opacity: 0.8;
}
#comments_box .slick-dots li button {
    width: 19rem;
    height: 5.2rem;
    visibility: hidden;
}
/* worry */
.worryBox {
    background: url(../img/worryBg.webp) no-repeat center top;
    background-size: 101% 100%;
    height: 165.3rem;
    padding: 34rem 1rem 0 1rem;
}
#worry .worryTtl{
    display: block;
    margin: 0 auto;
    width: 47.2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    height: 28rem;
}
#worry .surveyArrow {
    width: 6.2rem;
}
#worry .vioSurvey {
    width: 38.2rem;
}
#worry .vioQ {
    width: 53.6rem;
}
#worry .vioA {
    width: 51.1rem;
}
#worry .worryTxt{
    display: block;
    margin-bottom: -0.5rem;
    white-space: nowrap;
    top: 74rem;
    left: 16rem;
    line-height: 1.9;
}
#worry p {
    position: absolute;
}
#worry span{
    color: #71C4F9;
}
/* End worry */
/* Reason */
#reason .reasonInner {
    /* background: rgb(0, 113, 162); */
    background: linear-gradient(90deg, rgba(0, 113, 162, 1) 50%, rgba(32, 82, 136, 1) 100%);
    height: 1033rem;
    margin-top: -3rem;
    padding: 4rem 2rem 6rem;
    position: static;
}
.reasonImg {
    height: 50rem;
}
#reason .reasonLogo {
    width: 16.4rem;
    position: absolute;
    top: 5rem;
    left: 39rem;
}
#reason .reasonTtl {
    width: 55rem;
    position: absolute;
    top: 11.5rem;
    left: 19rem;
}
#reason .pointTxt {
    padding: 0 2rem;
}
#reason .box{
    background-color: #fff;
    margin-top: 2rem;
    padding-top: 3rem;
}
#reason .r01_ttl {
    width: 60.7rem;
}
#reason .r01_img02 {
    width: 57.2rem;
}
#reason .r01_img03 {
    margin: 0 -2rem 0 !important;
}
#reason .r01_dakara {
    width: 16.4rem;
}
#reason .r01_img04 {
    width: 59.9rem;
}
#reason .r02_ttl {
    width: 58.1rem;
}
#reason .r02_img02, #reason .r02_img03 {
    width: 62.8rem;
}
#reason .r02_ep {
    position: absolute;
    padding: 5rem;
    top: 3.5rem;
    left: 0rem;
}
#reason .r02_img03 {
    margin: 0 auto;
}
#reason .r02_actually {
    width: 13rem;
    margin-top: 0.5rem;
}
#reason .r02_img04 {
    width: 55.4rem;
}
#reason .r02_img05 {
    width: 55.4rem;
}
#reason .r03_ttl {
    width: 58.8rem;
}
#reason .r03Txt01, #reason .r03Txt02, #reason .r03Txt03 {
    position: absolute;
    width: 43rem;
    left: 22rem;
}
#reason .r03Txt01 {
    top: 21rem;
}
#reason .r03Txt02 {
    top: 42rem;
}
#reason .r03Txt03 {
    top: 65rem;
}
#reason .r03_img04 {
    width: 54.2rem;
}
#reason .r03_img06 {
    width: 56.7rem;
}
#reason .r03_img06 {
    width: 56.7rem;
}
#reason .r03_img07 {
    width: 44rem;
}
#reason .r03_img08 {
    width: 48.4rem;
}
/* End Reason */
/* Part */
#parts {
    padding: 1rem 1rem 3rem 1rem;
}
#parts h3 {
    background: #08568B;
    border-radius: 1.6rem;
    font-weight: 400;
}
.parts_area {
    cursor: grab;
}
#parts_box {
    padding: 5.2rem 2rem 0 2rem;
}
#parts_box .slick-list {
    border: 3px solid #08568B;
}
#parts_box .slick-prev {
    left: -3rem;
}
#parts_box .slick-next {
    right: -3rem;
}
#parts_box .slick-arrow {
    display: block;
    border: none;
    font-size: 0;
    position: absolute;
    z-index: 100;
    top: calc(50% - 4.6rem);
    width: 4.6rem;
    height: 9.2rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
#parts_box .slick-arrow:hover {
    opacity: 0.8;
}
#parts_box .slick-prev {
    background: url(../img/prev.webp) no-repeat;
    background-size: 4.6rem;
    left: 0rem;
}
#parts_box .slick-next {
    background: url(../img/next.webp) no-repeat;
    background-size: 4.6rem;
    right: 0rem;
}
.parts_img {
    width: 59rem;
}
#parts_box .slick-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: absolute;
    top: 0;
    width: 61rem;
}
#parts_box .slick-dots li {
    margin: 0;
    position: relative;
}
#parts_box .slick-dots li::after {
    content: "FRONT";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 5.2rem;
    transition: 0.3s;
    cursor: pointer;
    background: #e6ebf5;
    color: #08568B;
    border-radius: 0.6rem 0.6rem 0 0;
    font-weight: 500;
}
#parts_box .slick-dots li:hover::after {
    opacity: 0.8;
}
#parts_box .slick-dots li:nth-child(1):after {
    content: "FRONT";
}
#parts_box .slick-dots li:nth-child(2):after {
    content: "BACK";
}
#parts_box .slick-dots li:nth-child(3):after {
    content: "FACE";
}
#parts_box .slick-dots li.slick-active:after {
    color: #fff;
    background: #08568B;
}
#parts_box .slick-dots li button {
    width: 19rem;
    height: 5.2rem;
    visibility: hidden;
}
/* promise */
#promise {
    background: url(../img/promiseBg.webp) no-repeat center top;
    background-size: cover;
    padding: 15rem 2rem 6rem 2rem ;
}
#promise .accordion_box {
    padding: 2rem 2rem 4.5rem;
    border: 3px solid;
    border-image: linear-gradient(to right, #C29600, #92800C, #FFC398) 1;
}
#promise .num{
    width: 12rem;
    margin: 0 auto;
}
#promise h4{
    background: url(../img/goldBg.svg) no-repeat center top;
    background-size: cover;
    padding: 2rem 0;
    margin-top: 1.5rem;
}
#promise .promiseTtl01{
    width: 40.5rem;
    margin-left: 5rem;
}
#promise .promiseTtl02{
    width: 35.6rem;
    margin-left: 5rem;
    margin-bottom: 7.5rem;
}
#promise .promiseImg01 {
    width: 39.1rem;
}
#promise .promiseImg02 {
    width: 34rem;
}
#promise .promiseImg03 {
    width: 50rem;
}
#promise .promiseImg04 {
    width: 34.6rem;
}
#promise .promiseImg05 {
    width: 40.9rem;
}
#promise .promise_info {
    display: none;
    background: #FFF;
    padding: 3rem 1rem;
    position: relative;
}
.promise_ttl.close::after {
    background: url(../img/open.svg) no-repeat center top;
    background-size: contain;
}
.promise_ttl::after {
    position: absolute;
    content: '';
    width: 3.2rem;
    height: 2.9rem;
    top: calc(50% - 1.5rem);
    right: 2rem;
    background: url(../img/open.svg) no-repeat center top;
    background-size: contain;
    transition: 0.3s;
}
.promise_ttl.active::after {
    transform: rotate(180deg);
}
/* End promise */
/* Flow */
#flow {
    background: url(../img/flowBg.webp) no-repeat center top;
    background-size: cover;
    height: 325rem;
    padding: 8rem 0rem 11rem 9.5rem;
}
#flowTtl{
    height: 31rem;
}
#flowTtl01{
    width: 55.3rem;
}
#flowTtl02{
    width: 38.7rem;
    margin-top: 47rem;
}
#flowTtl03{
    width: 45.3rem;
    margin-top: 43.5rem;
}
#flowTtl04{
    width: 43.4rem;
    margin-top: 47rem;
}
#flowTtl05{
    width: 46.3rem;
    margin-top: 47rem;
}
.flow_img01 {
    position: absolute;
    top: 0;
    left: 0;
    animation: sliderButton-anim 2s ease-out 0s infinite;
}
@keyframes sliderButton-anim {
    0% {opacity: 1;}
    49% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}
.flow_txtdots {
    width: 0.2rem;
    margin: 0 0 0 2rem;
}
.flow_txt {
    margin-left: 13rem;
}
.flow_img, .flow_img05 {
    width: 43.7rem;
    position: absolute;
    right: 11rem;
}
.flow_img {
    top: 11rem;
}
.flow_img05 {
    top: 5rem;
}
/* Shop */
#shop .shopTtl {
    width: 52rem;
}
#shop .shopTtl02 {
    padding: 1rem 3rem;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    width: 38.1rem;
    margin: 0 auto;
}
.shop_area,
.shop_box,
.shop_info {
    display: none;
}
#shop .shop_ttl01 {
    font-weight: 500;
    color: #0143A4;
}
#shop_list li:first-child h3 {
    border-radius: 0.9rem 0.9rem 0 0;
}
#shop_list li:last-child h3 {
    border-radius: 0 0 0.9rem 0.9rem;
}
#shop_list li:last-child h3.active {
    border-radius: 0;
}
.shop_ttl01,
.shop_ttl02,
.shop_ttl03 {
    position: relative;
    cursor: pointer;
}
.shop_ttl01::after,
.shop_ttl01::before,
.shop_ttl02::after,
.shop_ttl02::before,
.shop_ttl03::after,
.shop_ttl03::before {
    content: "";
    display: block;
    background: #0143a4;
    border-radius: 0.2rem;
    position: absolute;
}
.shop_ttl03::after,
.shop_ttl03::before {
    background: #fff;
}
.shop_ttl01::before,
.shop_ttl02::before,
.shop_ttl03::before {
    width: 0.4rem;
    height: 2.4rem;
    top: calc(50% - 1.2rem);
    right: 4rem;
}
.shop_ttl01::after,
.shop_ttl02::after,
.shop_ttl03::after {
    width: 2.4rem;
    height: 0.4rem;
    top: calc(50% - 0.2rem);
    right: 3rem;
}
.shop_ttl01.active::before,
.shop_ttl02.active::before,
.shop_ttl03.active::before {
    display: none;
}
.shop_ttl01 {
    background: #fff;
    padding: 1.5rem 3rem;
    margin: 0 0 0.2rem 0;
}
.shop_area {
    background: #ffffffcc;
    padding: 3rem;
    margin: 0 0 0.2rem 0;
}
.shop_ttl02 {
    background: #ffffffcc;
    padding: 1.5rem 3rem;
    margin: 0 0 0.2rem 0;
}
.shop_ttl03 {
    background: #0143a4;
    color: #fff;
    padding: 1.5rem 3rem;
    margin: 0 0 0.2rem 0;
}
.shop_info {
    padding: 1.5rem 0 3rem 0;
}
.shop_search {
    width: 19.6rem;
}
/* End shop */
/* FAQ */
#faq {
    background: rgb(32,80,177);
    background: linear-gradient(90deg, rgba(32,80,177,1) 50%, rgba(0,50,92,1) 100%);
    color: #032C76;
}
#faq .faq_Ttl {
    width: 48.7rem;
    display: block;
    margin: 0 auto;
    padding-bottom: 6rem;
}
.faq_ttl {
    cursor: pointer;
    padding: 2rem 4rem 2rem 7rem;
    position: relative;
    background: #c1d6ff;
    font-size: 2.8rem;
    line-height: 1.57;
    font-weight: 700;
}
.faq_ttl::before {
    content: "";
    display: block;
    width: 4.1rem;
    height: 4rem;
    background: url(../img/faq_q.svg) no-repeat center top;
    background-size: 4.1rem;
    position: absolute;
    top: 2rem;
    left: 2rem;
}
.faq_info {
    display: none;
    background: #fff;
    padding: 1.5rem 0 0 7rem;
    position: relative;
    font-size: 2.8rem;
    line-height: 1.57;
    font-weight: 500;
}
.faq_info::before {
    content: "";
    display: block;
    width: 3.7rem;
    height: 4rem;
    background: url(../img/faq_a.svg) no-repeat center top;
    background-size: 3.7rem;
    position: absolute;
    top: 2rem;
    left: 2rem;
}
.faq_ttl::after {
    content: "";
    position: absolute;
    width: 0.8rem;
    height: 1rem;
    background: url(../img/faqArw.webp) no-repeat center top;
    background-size: 0.8rem;
    top: calc(50% - 0.5rem);
    right: 2rem;
    transition: 0.3s;
}
.faq_ttl.active::after {
    transform: rotate(90deg);
}
.f_notes_box {
    border: 1px solid #ccc;
    padding: 3rem;
    color: #4d4d4d;
}
/* Button */
.gb_btn{
    background-size: 100% 100%;
    width: 71rem;
    cursor: pointer;
}
.gb_btn a{
    text-decoration: none;
    color: #fff;
    line-height: 1.1;
    display: block;
}
.gb_btn span{
    font-size: 4.5rem;
}
.btnshine {
    position: relative;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    outline: none;
    overflow: hidden;
    border-top-right-radius: 8rem;
    border-bottom-right-radius: 8rem;
}
.btnshine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    transform: skewX(-25deg);
    animation: shine 1.3s infinite;
}
@keyframes shine {
    100% {
        left: 125%;
    }
}