@charset "utf-8";
/* CSS Document */

/*共通css*/
*{margin: 0; padding: 0;font-family: tbchibirgothicplusk-pro, sans-serif;font-style: normal;font-weight: 400;font-feature-settings: "palt"}
img{width: 100%;}
.ancr { position: relative; transition: 0.5s;}
.anca { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 10; cursor: pointer;}
.ancr:hover { opacity: 0.75; transition: 0.5s; cursor: pointer;}

/*PC用css*/
@media screen and (min-width: 768px) {
    .sp {display: none;}
h2{font-size: 26px; background: #e26f68; color: #fff; text-align: center;line-height: 2;font-family: tbchibirgothicplusk-pro, sans-serif; max-width: 1028px; margin: 0 auto;}
h3{font-size: 26px; background: #f39c33; color: #fff; text-align: center;line-height: 2;font-family: tbchibirgothicplusk-pro, sans-serif; max-width: 1028px; margin: 0 auto;}
h4{font-size: 18px; background: #f3569c; color: #fff; text-align: center;line-height: 2.31;font-family: tbchibirgothicplusk-pro, sans-serif; max-width: 470px; margin: 0 auto;}
h5{font-size: 18px; background: #04b5f7; color: #fff; text-align: center;line-height: 2.31;font-family: tbchibirgothicplusk-pro, sans-serif; max-width: 470px; margin: 0 auto;}
    /*MV*/
#mv{width: 100vw; height: 45vw;}
#mv .mv_bg{background: url("../images/main-visual.png") no-repeat center/cover;     width: 100vw;    height: 45vw;}
/*Sec1*/
#sec1 .sec1_bg{background: #ededed;    width: 100vw;}
#sec1 .sec1_txt{text-align: center; padding: 65px 0 100px;letter-spacing: 0.19em;line-height: 1.8;font-size: 22px;    width: 80%;    margin: 0 auto;}
#sec1 .sec1_txt span{display: block;}

.round_txt-area{    background: #fff;    border-radius: 50%;    color: #c5293e;    width: 441px;    height: 140px;    margin: -58px auto 0;    line-height: 1.29;    letter-spacing: 0.01em;    align-self: center;    text-align: center;    font-size: 28px;    padding: 22px;}
    .round_txt-area p{font-weight: bold;}   
.round_txt-area span{display: block;font-weight: bold;}


/*Sec2*/
#sec2 {max-width: 1280px;    margin: 0 auto;}
#sec2 .check_txt {margin: 0 auto; width: 750px;}
#sec2 .ancar_flex {width: 85%; margin: 27px auto 50px;}
#sec2 .ancar_flex ul {display: flex; margin: 0 auto; justify-content: space-between;}
#sec2 .ancar_flex ul li{width: 32%;}    
#sec2 .ancar_flex ul li:hover{opacity: 0.5;cursor: pointer;}
#sec2 .ancar_4 {margin: 0 auto 55px;width: 630px;}
#sec2 .ancar_4:hover{opacity: 0.5;cursor: pointer;}


/*Sec3*/
#sec3 {background: #ededed;    width: 100vw;}
#sec3 .step_ancar     {padding: 60px 90px 72px 90px;    margin: 0 auto;    width: 738px;}
#sec3 .step1_ancar{background: #fff;border: 3px solid #000;width: 676px;margin: 7px auto;padding: 12px 14px;}
#sec3 .step1_ancar p {position: relative;font-size: 16px;letter-spacing: 0.05em;    font-feature-settings: "none";}
#sec3 .step1_ancar p:before{   font-size: 20px; content: 'STEP1';    position: absolute;    width: 110px;    height: 48.5px;    color: #fff;    background: #000;    margin: 0 10px;   top: -15px;    left: -133px;    text-align: center;    padding: 11px 25px; letter-spacing: 0.1em;} 
#sec3 .step1_ancar p:after{content: ''; position: absolute; width: 12px;  height: 12px;  margin: 0 10px; border-bottom: 3px solid #000; border-right: 3px solid #000;  transform: rotate(45deg);top: 0px; right: -10px;}

#sec3 .step2_ancar{background: #fff;border: 3px solid #000;width: 676px;margin: 7px auto;padding: 12px 14px;}
#sec3 .step2_ancar p {position: relative;font-size: 16px;letter-spacing: 0.05em;    font-feature-settings: "none";}
#sec3 .step2_ancar p:before{   font-size: 20px; content: 'STEP2';    position: absolute;    width: 110px;    height: 48.5px;    color: #fff;    background: #000;    margin: 0 10px;   top: -15px;    left: -133px;    text-align: center;    padding: 11px 25px;letter-spacing: 0.1em;} 
#sec3 .step2_ancar p:after{content: ''; position: absolute; width: 12px;  height: 12px;  margin: 0 10px; border-bottom: 3px solid #000; border-right: 3px solid #000;  transform: rotate(45deg);top: 0px; right: -10px;} 

#sec3 .step3_ancar{background: #fff;border: 3px solid #000;width: 676px;margin: 7px auto;padding: 12px 14px;}
#sec3 .step3_ancar p {position: relative;font-size: 16px;letter-spacing: 0.05em;    font-feature-settings: "none";}
#sec3 .step3_ancar p:before{   font-size: 20px; content: 'STEP3';    position: absolute;    width: 110px;    height: 48.5px;    color: #fff;    background: #000;    margin: 0 10px;   top: -15px;    left: -133px;    text-align: center;    padding: 11px 25px;letter-spacing: 0.1em;} 
#sec3 .step3_ancar p:after{content: ''; position: absolute; width: 12px;  height: 12px;  margin: 0 10px; border-bottom: 3px solid #000; border-right: 3px solid #000;  transform: rotate(45deg);top: 0px; right: -10px;} 

#sec3 .step4_ancar{background: #fff;border: 3px solid #000;width: 676px;margin: 7px auto;padding: 12px 14px;}
#sec3 .step4_ancar p {position: relative;font-size: 16px;letter-spacing: 0.05em;    font-feature-settings: "none";}
#sec3 .step4_ancar p:before{   font-size: 20px; content: 'STEP4';    position: absolute;    width: 110px;    height: 48.5px;    color: #fff;    background: #000;    margin: 0 10px;   top: -15px;    left: -133px;    text-align: center;    padding: 11px 25px;letter-spacing: 0.1em;} 
#sec3 .step4_ancar p:after{content: ''; position: absolute; width: 12px;  height: 12px;  margin: 0 10px; border-bottom: 3px solid #000; border-right: 3px solid #000;  transform: rotate(45deg);top: 0px; right: -10px;} 

/*sec3 STEP1Contentエリア*/
#sec3_step1 {}
#sec3_step1 .sec3_headding {background: #e26f68; width: 100vw; padding-bottom: 30px;}
    /*STEP１*/
    .step_headding {      position: relative;      width: 200px;  padding: 8px 46px;    min-width: 200px;    max-width: 100%;    color: #fff;    font-size: 22px;    background: #000;    margin: 0px auto;    transform: translateY(-16px);    letter-spacing: 0.1em;    text-align: center;}

.step_headding:before {  content: "";  position: absolute;    top: 96%;    left: 48%;  margin-left: -15px;  border: 15px solid transparent;  border-top: 15px solid #000;}
#sec3_step1 .step1_headding {width: 200px; margin: 0 auto 0; transform: translateY(-20px);}
#sec3_step1 .step1_headding-txt {width: 685px; margin: 20px auto 0; }
#sec3_step1 .step1_sub-area {background: #ededed;    width: 100vw;}
#sec3_step1 .step1_sub-area .step1_sub-txt {width: 470px;font-size: 22px;line-height: 1.64; margin: 0 auto; text-align: center;padding: 50px 0 70px;letter-spacing: 0.1em;}
#sec3_step1 .step1_sub-area .step1_sub-txt span{display: block;}

#sec3_step1 .step1_content-area {max-width: 1028px;margin: 0 auto;transform: translateY(-20px);}
#sec3_step1 .step1_content-1 {margin-bottom: 40px;}
#sec3_step1 .step1_content-2 {margin-bottom: 40px;}
#sec3_step1 .step1_content-3 {margin-bottom: 40px;}
#sec3_step1 .step1_flow-txt {width: 80vw; margin: 0 auto; max-width: 1028px;}
     .border_bg {background: url("../images/bg2.png")no-repeat center/cover;     max-width: 990px;    width: 80vw;    margin: 0 auto;    height: 41.1vh;}  
    #sec3_step1 .step1_content-1 .youtube_flex-right {margin-top: 55px;}
   /* #sec3_step1 .step1_content-1  .official_btn {margin: 55px auto;}*/
    #sec3_step1 .border_bg {background: url("../images/bg.png")no-repeat center/cover;     max-width: 990px;    width: 80vw;   margin: 0 auto;    height: 41.1vh;}  
#sec3_step1 .youtube_flex {display: flex;  width:72.8vw;    justify-content: space-between;   margin: 15px auto; padding: 25px 0 25px 35px;    max-width: 906px;  transform: translate(10px, 16px);    height: 36vh;
    max-width: 960px;
    background: #fff;}
#sec3_step1 .youtube_movie{width: 420px;    height: 235px; align-self: center;}
#sec3_step1 iframe {width: 32vw;    height: 20vw;    max-width: 420px;    max-height: 225px;}
#sec3_step1 .youtube_flex-right{  text-align: center;    width: 50%;    padding: 0;    line-height: 1.5;    height: 32vh;    margin-top: 20px;}
#sec3_step1 .youtube_flex-right p {font-size: 16px;    width: 72%;    text-align: left;    margin: 0 auto;}
#sec3_step1 .youtube_flex-right p span {display: block;}
#sec3_step1 .official_btn { font-size: 18px; color: #1c2b71;    background-color: #fff;  width: 80%; max-width: 360px; margin: 36px auto;}
#sec3_step1 .official_btn a { display: block; width: 100%; padding: 15px 0; border: 1px solid #1c2b71; box-shadow: 0 6px 0 rgba(28,42,113,1); border-radius: 9px; -webkit-border-radius: 9px; -moz-border-radius: 9px;}
#sec3_step1 .official_btn a:hover { background: #1c2b71; color: #fff;}


/*sec3 STEP2Contentエリア*/
#sec3_step2 {margin-top: 90px;}
#sec3_step2 .sec3_headding {background: #46bd98; width: 100vw; padding-bottom: 30px;}
#sec3_step2 .step2_headding {width: 200px; margin: 0 auto 0; transform: translateY(-20px);}
#sec3_step2 .step2_headding-txt {width: 500px; margin: 20px auto 0; }
#sec3_step2 .step2_sub-area {background: #fff;}
#sec3_step2 .step2_sub-area .step2_sub-txt {width: 750px;font-size: 22px;line-height: 1.64; margin: 0 auto; text-align: center;padding: 50px 0;}

#sec3_step2 .step2_content-area {max-width: 1028px; margin: 0 auto;}
#sec3_step2 .step2_flex1 {display: flex; justify-content: space-between;}
#sec3_step2 .step2_flex1 .step2_you {background: url("../images/step2_you.png") no-repeat center/cover; width: 510px;height: 280px;    position: relative;}
#sec3_step2 .step2_flex1 .step2_you .click_inner{width: 82.5%;    line-height: 1.7;    background: #fff;    position: absolute;    top: 64px;    left: 46px;    height: 55%;    border-radius: 25px;    border: #46bd98 2px solid;    border-bottom: 9px #46bd98 solid;    font-size: 14px;    padding: 15px 40px 0px;}
#sec3_step2 .step2_flex1 .step2_you .you_icon {position: relative;color: #1c2b71; font-size: 28px;     text-align: right;    width: 72%;}
#sec3_step2 .step2_flex1 .step2_you .you_icon::before {background: url("../images/yt_icon_rgb.png")no-repeat center/cover;content: '';position: absolute;    top: 10px;    left: 60px;    width: 50px;    height: 32px;}
#sec3_step2 .step2_flex1 .step2_you .txt {margin: 12px auto;}

#sec3_step2 .step2_flex1 .step2_insta {background: url("../images/step2_insta.png") no-repeat center/cover; width: 510px;height: 280px;    position: relative;}
#sec3_step2 .step2_flex1 .step2_insta .click_inner{width: 82.5%;    line-height: 1.7;    background: #fff;    position: absolute;    top: 64px;    left: 46px;    height: 55%;    border-radius: 25px;    border: #46bd98 2px solid;    border-bottom: 9px #46bd98 solid;    font-size: 14px;    padding: 15px 40px 0px;}
#sec3_step2 .step2_flex1 .step2_insta .insta_icon {position: relative;color: #1c2b71; font-size: 28px; text-align: center;}
#sec3_step2 .step2_flex1 .step2_insta .insta_icon::before {background: url("../images/insta_icon.png")no-repeat center/contain;content: '';position: absolute;top: 11px;    left: 44px;    width: 50px;    height: 32px;}
#sec3_step2 .step2_flex1 .step2_insta .txt {margin: 10px auto;}

#sec3_step2 .step2_flex2 {display: flex; justify-content: space-between;margin-top: 20px;}
#sec3_step2 .step2_flex2 .step2_twi {background: url("../images/step2_twi.png") no-repeat center/cover; width: 510px;height: 280px;    position: relative;}
#sec3_step2 .step2_flex2 .step2_twi .click_inner{width: 82.5%;    line-height: 1.7;    background: #fff;    position: absolute;    top: 64px;    left: 46px;    height: 55%;    border-radius: 25px;    border: #46bd98 2px solid;    border-bottom: 9px #46bd98 solid;    font-size: 14px;    padding: 15px 40px 0px;}
#sec3_step2 .step2_flex2 .step2_twi .twi_icon {position: relative;color: #1c2b71; font-size: 28px; text-align: center;}
#sec3_step2 .step2_flex2 .step2_twi .twi_icon::before {background: url("../images/twi_icon.png")no-repeat center/contain;content: '';position: absolute;top: 3px;
    left: 70px;
    width: 38px;
    height: 45px;
}
#sec3_step2 .step2_flex2 .step2_twi .txt {margin: 12px auto;}

#sec3_step2 .step2_flex2 .step2_blog {background: url("../images/step2_blog.png") no-repeat center/cover; width: 510px;height: 280px;    position: relative;}
#sec3_step2 .step2_flex2 .step2_blog .click_inner{width: 82.5%;    line-height: 1.7;    background: #fff;    position: absolute;    top: 64px;    left: 46px;    height: 55%;    border-radius: 25px;    border: #46bd98 2px solid;    border-bottom: 9px #46bd98 solid;    font-size: 14px;    padding: 15px 40px 0px;}
    #sec3_step2 .step2_flex1 .step2_you .click_inner:hover {margin-top: 9px; border-bottom: 2px #46bd98 solid;}  
    #sec3_step2 .step2_flex1 .step2_insta .click_inner:hover {margin-top: 9px; border-bottom: 2px #46bd98 solid;}  
    #sec3_step2 .step2_flex2 .step2_twi .click_inner:hover {margin-top: 9px; border-bottom: 2px #46bd98 solid;}  
    #sec3_step2 .step2_flex2 .step2_blog .click_inner:hover {margin-top: 9px; border-bottom: 2px #46bd98 solid;} 
#sec3_step2 .step2_flex2 .step2_blog .blog_icon {position: relative;color: #1c2b71; font-size: 28px; text-align: center;}
#sec3_step2 .step2_flex2 .step2_blog .blog_icon::before {background: url("../images/line_icon.png")no-repeat center/contain;content: '';position: absolute; top: 2px;    left: 76px;    width: 40px;    height: 45px;}
#sec3_step2 .step2_flex2 .step2_blog .txt {margin: 12px auto;}

/*STEP3*/
#sec3_step3 {margin-top: 90px;}
#sec3_step3 .sec3_headding {background: #f39c33; width:100vw; padding-bottom: 30px;}
#sec3_step3 .step3_headding {width: 200px; margin: 0 auto 0; transform: translateY(-20px);}
#sec3_step3 .step3_headding-txt {    width: 74.6vw;    margin: 20px auto 0;    max-width: 932px;}
#sec3_step3 .step3_sub-area {background: #fff;}
#sec3_step3 .step3_sub-area .step3_sub-txt {width: 750px;font-size: 22px;line-height: 1.64;letter-spacing: 0.1em; margin: 0 auto; text-align: center;padding: 50px 0;}
#sec3_step3 .step3_sub-area .step3_sub-txt span{display: block;}

#sec3_step3 .youtube_flex {display: flex;    width: 72.8vw;    justify-content: space-between;    margin: 15px auto;    padding: 25px 0 25px 35px;    transform: translate(10px, 16px);    height: 36vh;    max-width: 960px;    background: #fff;}
#sec3_step3 .youtube_movie{width: 420px;    height: 235px;     align-self: center;}
#sec3_step3 iframe {width: 32vw;    height: 20vw;    max-width: 420px;    max-height: 225px;}
#sec3_step3 .youtube_flex-right{   line-height: 1.5; text-align: center;    width: 50%; padding: 60px 0;    align-self: center;}
#sec3_step3 .youtube_flex-right p {font-size: 16px;    width: 72%;    text-align: left;    margin: 0 auto;}
#sec3_step3 .youtube_flex-right p span {display: block;}

/*STEP4*/
#sec3_step4 {margin-top: 90px;}
#sec3_step4 .sec3_headding {background: #ef8459; width: 100vw; padding-bottom: 30px;}
#sec3_step4 .step4_headding {width: 200px; margin: 0 auto 0; transform: translateY(-20px);}
#sec3_step4 .step4_headding-txt {    width:564px;    margin: 20px auto 0;    max-width: 564px;}
#sec3_step4 .step4_sub-area {background: #fff;}
#sec3_step4 .step4_sub-area .step4_sub-txt {width: 750px;font-size: 22px;line-height: 1.64; margin: 0 auto; text-align: center;padding: 50px 0;}
#sec3_step4 .step4_sub-area .step4_sub-txt span{display: block;}
    #sec3_step4 .step4_flex-item:hover {opacity: 0.5;}

#sec3_step4 .step4_flex {display: flex; justify-content: space-between;max-width: 1028px;margin: 0 auto;}
#sec3_step4 .step4-txt {background: #ef8459; color: #fff; text-align: center;line-height: 2;font-size: 18px;position: relative;}
#sec3_step4 .step4-txt::after {position: absolute;content: ''; transform: rotate(45deg);border-top: 1px solid #fff;border-right: 1px solid #fff;    width: 10px;height: 10px;top: 11px; right: 12px;}
#sec3_step4 .step4_btn_flex {display: flex; justify-content: space-between;max-width: 770px;width: 62vw; margin: 0 auto;}
#sec3_step4 .tell_btn { font-size: 26px; color: #ef8459;    background-color: #fff;    border: 1px solid #ef8459;    border-bottom: 4px solid #ef8459;    box-shadow: 0 3px 5px rgb(0 0 0 / 30%);    border-radius: 9px;     padding: 19px 0px 15px 27px;    width: 360px;margin: 55px auto;text-align: center;height: 11vh;    max-width: 360px;}
#sec3_step4 .tell_btn p {content: '';position: relative;}
#sec3_step4 .mail_btn p {content: '';position: relative;}
#sec3_step4 .tell_btn p span{display: block;font-size: 14px;}
#sec3_step4 .tell_btn p::before{background: url("../images/tell_icon.png")no-repeat center/contain;content: '';position: absolute; top: -1px; left: 21px; width: 66px; height: 45px;}
   #sec3_step4 .tell_btn:hover p::before{background: url("../images/tell_icon_on.png")no-repeat center/contain;content: '';position: absolute; top: -1px; left: 21px; width: 66px; height: 45px;}
#sec3_step4 .tell_btn:hover {  margin-top: 58px;  color: #fff;  background: #ef8459;  border-bottom: 2px solid #ef8459;}
#sec3_step4 .mail_btn {font-size: 22px;    color: #ef8459;    background-color: #fff;    border: 1px solid #ef8459;    border-bottom: 4px solid #ef8459;    box-shadow: 0 3px 5px rgb(0 0 0 / 30%);    border-radius: 9px;    padding: 27px 0px 15px 55px;     width: 360px;   margin: 55px auto;    text-align: center;  height: 11vh;    max-width: 360px;}
#sec3_step4 .mail_btn p::before{background: url("../images/mail_icon.png")no-repeat center/contain;content: '';position: absolute;  top: -7px;left: -13px; width: 38px; height: 40px;}

#sec3_step4 .mail_btn:hover p::before{background: url("../images/mail_icon_on.png")no-repeat center/contain;content: '';position: absolute;  top: -7px;left: -13px; width: 38px; height: 40px;}
  
#sec3_step4 .mail_btn:hover {  margin-top: 58px;  color: #fff;  background: #ef8459;  border-bottom: 2px solid #ef8459;cursor: pointer;}

/*sec4*/
#sec4 {background: #f9f3df;    padding-bottom: 50px;}
#sec4 .stripe_bg {  width: 85vw; max-width: 1000px; height: 200px;  border:7px solid #ededed;
 /*     上⇒下への白からピンクに変わっていくグラデーションを指定 → #fffの後にスペースを開けて50%と指定 
   background-image: linear-gradient(#fff 50%, #ffc0cb);*/
     /* 「#fff 50%, #ffc0cb」の間に「#ffc0cb 50%」を挿入 */
/*  background-image: linear-gradient(#fff 50%, #ffc0cb 50%, #ffc0cb);*/
      /* linear-gradient()関数の引数の一番前に「-45deg」と指定 */
/*  background-image:
    linear-gradient(-45deg, #fff 50%, #ffc0cb 50%, #ffc0cb);
    background-size: 50px 50px;
      -45度斜めから25%、50%、75%、100%と
    ボーダーが交互に色違いとなるように指定 */
  background-image: linear-gradient(    -45deg,    #fff 34%,    #e5e5e5 25%, #e5e5e5 50%,    #fff 50%, #fff 75%,    #e5e5e5 88%, #e5e5e5  );
  /*background-size: 50px 50px;*/
     /* 幅8px、高さ8pxで背景画像のサイズを指定 */
  background-size: 8px 8px;    margin: 40px auto 10px;}

#sec4 .sec4_step1 .sec4_step1-headding {width: 19.1%; text-align: center;transform: translateY(-20px);margin: 0 auto;}
#sec4 .sec4_step1 p {font-size: 26px; text-align: center;line-height: 2;font-weight: bold;    margin: 10px auto;}
#sec4 .sec4_step1 p span{display: block;font-size: 22px;}
#sec4 .sec4_arrow {width: 36px; height: 30px; margin: 0 auto;}

#sec4 .stripe_bg2 {      height: 61vh;width: 85vw;max-width: 1000px;  border:7px solid #ededed;   background-image:linear-gradient(    -45deg,    #fff 34%,    #e5e5e5 25%, #e5e5e5 50%,    #fff 50%, #fff 75%,    #e5e5e5 88%, #e5e5e5  ); background-size: 8px 8px;    margin: 40px auto 0;    padding-bottom: 25px;}
#sec4 .sec4_step2 .sec4_step2-headding {width: 19.1%; text-align: center;transform: translateY(-37px);margin: 0 auto;}
#sec4 .sec4_step2 {font-size: 26px; text-align: center;line-height: 2;font-weight: bold;    margin: 35px auto 12px;}
#sec4 .sec4_step2_flex{width: 90%;display: flex; justify-content: space-between;max-width: 900px;margin: 30px auto 0;}
#sec4 .sec4_step2_flex .step2_flex-left{width: 49%;} 
    #sec4 .sec4_step2_flex .step2_flex-right{width: 49%;} 
#sec4 .sec4_step2_flex .online_content{height: 26vh;margin: 20px auto;  background: #fff;    padding: 25px 0;max-width: 394px;    transform: translateY(18px);}
#sec4 .sec4_step2_flex .online-txt {font-size: 16px;text-align: left;margin: 0 auto 30px; width: 85%;}
#sec4 .sec4_step2_flex .online_btn {font-size: 18px;    color: #1c2b71;    background-color: #fff;  width: 80%;    max-width: 300px;    margin: 0 auto ;line-height: 1.5;}
#sec4 .sec4_step2_flex .online_btn a { display: block; width: 100%; padding: 12px 0; border: 1px solid #1c2b71; box-shadow: 0 6px 0 rgba(28,42,113,1); border-radius: 9px; -webkit-border-radius: 9px; -moz-border-radius: 9px;}
#sec4 .sec4_step2_flex .online_btn:hover a { background: #1c2b71; color: #fff;}
    .online_bg{background: url("../images/online_bg.png")no-repeat center/cover;   width: 100%;    height: 30vh;}
    .offline_bg{background: url("../images/offline_bg.png")no-repeat center/cover;   width: 100%;    height: 30vh;}
#sec4 .sec4_step2_flex .offline_content{height: 26vh;margin: 20px auto; background: #fff;   padding: 25px 0;  max-width: 394px;    transform: translateY(18px);}
#sec4 .sec4_step2_flex .offline-txt {font-size: 16px;text-align: left;margin: 0 auto 30px; width: 85%;}
#sec4 .sec4_step2_flex .offline_btn{ font-size: 18px;    color: #1c2b71;    background-color: #fff;  width: 80%;    max-width: 300px;    margin: 0 auto ;line-height: 1.5;}
#sec4 .sec4_step2_flex .offline_btn a { display: block; width: 100%; padding: 12px 0; border: 1px solid #1c2b71; box-shadow: 0 6px 0 rgba(28,42,113,1); border-radius: 9px; -webkit-border-radius: 9px; -moz-border-radius: 9px;}
#sec4 .sec4_step2_flex .offline_btn a:hover { background: #1c2b71; color: #fff;}

#sec4 .stripe_bg3 {  width: 85vw; max-width: 1000px; border:7px solid #ededed;   background-image:linear-gradient(    -45deg,    #fff 34%,    #e5e5e5 25%, #e5e5e5 50%,    #fff 50%, #fff 75%,    #e5e5e5 88%, #e5e5e5  );  background-size: 8px 8px;    margin: 10px auto;}
    #sec4 .sec4_headding-txt{margin: 0 auto 25px; text-align: center;font-size: 26px;}
#sec4 .step4_flow-txt { }
#sec4 .step4_flow-txt h2{  font-size: 18px;  width: 90%;    margin: 0 auto;}
#sec4 .step4_step3-content {padding-bottom: 40px;}
#sec4 .sec4_step3 .sec4_step3-headding {width: 19.1%; text-align: center;transform: translateY(-37px);margin: 0 auto;}
#sec4 .sec4_step3 { font-size: 26px; text-align: center;line-height: 2;font-weight: bold;    margin: 40px auto 10px;}
    #sec4 .border_bg {background: url("../images/bg.png")no-repeat center/cover; max-width: 860px;    width: 80vw;    margin: 0 auto;    height: 40.1vh;}
#sec4 .sec4_step3-flex {display: flex;    width: 72.8vw;    justify-content: space-between;    margin: 15px auto;    padding: 0px 0 25px 35px;    transform: translate(5px, 31px);
    height: 33vh;    max-width: 830px;    background: #fff;}
#sec4 .youtube_flex-right { width: 50%; text-align: left; padding: 80px 0 0 20px; box-sizing: border-box;}
#sec4 .youtube_flex-right p.txt { font-size: 18px; line-height: 2em; text-align: left;}
#sec4 .youtube_flex-right p.txt a { text-decoration: underline; color:#1c2b71;}
#sec4 .official_btn { font-size: 18px; color: #1c2b71;    background-color: #fff;    border: 1px solid #1c2b71;    border-bottom: 4px solid #1c2b71;    box-shadow: 0 3px 5px rgb(0 0 0 / 30%);    border-radius: 9px;   padding: 15px 0;    width: 80%;    max-width: 300px;  margin: 55px auto;}
#sec4 .official_btn:hover {cursor: pointer;  margin-top: 59px;  color: #fff;  background: #1c2b71;  border-bottom: 2px solid #1c2b71;}

#sec4 .stripe_bg4 {  width: 85vw; max-width: 1000px; border:7px solid #ededed;   background-image:linear-gradient(    -45deg,    #fff 34%,    #e5e5e5 25%, #e5e5e5 50%,    #fff 50%, #fff 75%,    #e5e5e5 88%, #e5e5e5  );  background-size: 8px 8px;    margin: 40px auto 16px;padding: 0 0 40px;}
#sec4 .sec4_step4 .sec4_step4-headding {width: 19.1%; text-align: center;transform: translateY(-37px);margin: 0 auto;}
#sec4 .sec4_step4 {font-size: 26px; text-align: center;line-height: 2;font-weight: bold;    margin: 40px auto 10px;}
#sec4 .sec4_step4 p {margin-bottom: 20px;}
#sec4 .pink_ul {    background: linear-gradient(transparent 49%, #fabbd7 0%);}
#sec4 .blue_ul {    background: linear-gradient(transparent 49%, #9be1fc 0%);}
#sec4 .fs_40 {font-size: 40px;}
#sec4 .official_btn { color: #1c2b71;position: relative;}
#sec4 .official_btn::before { content: '▲';position: absolute;top: 16px; left: 16px;}
#sec4 .stripe_bg5 {  width: 85vw;  border:7px solid #ededed;   background-image: linear-gradient(    -45deg,    #fff 34%,    #e5e5e5 25%, #e5e5e5 50%,    #fff 50%, #fff 75%,    #e5e5e5 88%, #e5e5e5  );  background-size: 8px 8px;    margin: 20px auto 40px; padding: 30px;max-width: 1000px;}
#sec4 .step5 {margin: 0 auto;     width: 30%; }
    #sec4 .fs-18 {    font-size: 18px;    letter-spacing: 0.1em;}
    #sec4 .fs-18 a{text-decoration: underline; color:#1c2b71;}
    #sec4 .fs-18 .break{margin-left: 5px;}

/*フッター*/
footer {background: url("../images/footer_bg.png")no-repeat center/cover; padding: 90px 0 30px 50px;}
footer .footer_flex {display: flex; justify-content: space-between;width: 100%;}
footer .footer_left {    width: 27.3%;}
footer .footer_right {  line-height: 1.5;    width: 66%;margin-top: -30px;}
footer .footer_right .gosic {   font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";    font-weight: 500;}
footer .footer_right p span{display: block;}
footer .copy {font-size: 12px;}
}


@media screen and (max-width: 767px) {
    .pc {display: none;}
h2{font-size: 4.5vw; background: #e26f68; color: #fff; text-align: center;line-height: 2;font-family: tbchibirgothicplusk-pro, sans-serif; margin: 0 auto;}
h3{font-size: 4vw; background: #f39c33; color: #fff; text-align: center;line-height: 2;font-family: tbchibirgothicplusk-pro, sans-serif; margin: 0 auto;}
h4{font-size: 4vw; background: #f3569c; color: #fff; text-align: center;line-height: 2;font-family: tbchibirgothicplusk-pro, sans-serif; margin: 0 auto;}
h5{font-size: 4vw; background: #04b5f7; color: #fff; text-align: center;line-height: 2;font-family: tbchibirgothicplusk-pro, sans-serif; margin: 0 auto;}
        /*MV*/
#mv{ width: 100%;}
	#mv .mv_img { width: 100%;}
	#mv .mv_img img { width: 100%; height: auto;}
	#mv .mv_bg{background: url("../images/main-visual_sp.png") no-repeat center; background-size: cover; width: 100vw; height: 70vw;}
/*Sec1*/
#sec1 .sec1_bg{ background: #ededed;}
#sec1 .sec1_txt{ text-align: center; padding: 8.66vw 0 13.3vw;letter-spacing: 0.15em; line-height: 1.8em ;font-size: 3vw;}
#sec1 .sec1_txt span{display: block;}

.round_txt-area{ background: #fff; border-radius: 50%; color: #c5293e; height: 17.33vw; margin: -6vw auto 0; line-height: 1.29em; letter-spacing: 0.01em; align-self: center; text-align: center; font-size: 3.2vw; padding: 1.32vw 0; width: 50%;}
    .round_txt-area p { font-weight: bold;}
.round_txt-area span{ display: block;  font-weight: bold;}
     .step_headding { position: relative; width: 30vw; padding: 1.5vw 2vw 2vw; color: #fff; font-size: 3.9vw; background: #000; margin: 0px auto 2vw; transform: translateY(-3.53vw); letter-spacing: 0.1em; text-align: center;}

.step_headding:before { content: ""; position: absolute; top: 90%; left: 40%; border: 3vw solid transparent; border-top: 3vw solid #000;}
    /*Sec2*/
#sec2 {}
#sec2 .check_txt {margin: 0 auto 3.6vw; width: 90%;}
#sec2 .ancar_flex { width: 70%; margin: 0 auto 10vw;}
#sec2 .ancar_flex ul li{ width: 100%; margin: 0 auto 4.6vw;}
#sec2 .ancar_flex ul li:hover{opacity: 0.5;cursor: pointer;}
#sec2 .ancar_4 {margin: 0 auto 13.3vw; width: 90%;}
   
    
    /*Sec3*/
#sec3 { background: #ededed; padding: 5vw 0 0;}
#sec3 .step_ancar { padding: 8vw 0 15vw;}
#sec3 .step1_ancar{ background: #fff; border: 1px solid #000; width: 90%; margin: 0 auto 5vw; text-align: right;}
#sec3 .step1_ancar a { display: inline-block; text-align: right; width: 80%;}
#sec3 .step1_ancar p { position: relative; font-size: 3.7vw; width: 90%; padding: 5vw 0 5vw 4vw; height: 20vw; text-align: left; box-sizing: border-box; line-height: 1.5em;}
#sec3 .step1_ancar p:before{ font-size: 3.5vw; content: 'STEP1'; position: absolute; width: 18vw; height: 20vw; line-height: 20vw; color: #fff; background: #000; top: 0px; left: -18vw; text-align: center; letter-spacing: 0.1em; box-sizing: border-box;} 
#sec3 .step1_ancar p:after{ content: ''; position: absolute; width: 3.2vw;  height: 3.2vw;  margin: 0 10px; border-bottom: 3px solid #000; border-right: 3px solid #000;  transform: rotate(45deg); top: 8vw; right: -6.3vw;}

#sec3 .step2_ancar { background: #fff; border: 1px solid #000; width: 90%; margin: 0 auto 5vw; text-align: right;}
#sec3 .step2_ancar a { display: inline-block; text-align: right; width: 80%;}
#sec3 .step2_ancar p { position: relative; font-size: 3.7vw; width: 90%; padding: 5vw 0 5vw 4vw; height: 20vw; text-align: left; box-sizing: border-box; line-height: 1.5em;}
#sec3 .step2_ancar p:before { font-size: 3.5vw; content: 'STEP2'; position: absolute; width: 18vw; height: 20vw; line-height: 20vw; color: #fff; background: #000; top: 0; left: -18vw; text-align: center; letter-spacing: 0.1em; box-sizing: border-box;}  
#sec3 .step2_ancar p:after{ content: ''; position: absolute; width: 3.2vw;  height: 3.2vw;  margin: 0 10px; border-bottom: 3px solid #000; border-right: 3px solid #000;  transform: rotate(45deg); top: 8vw; right: -6.3vw;} 

#sec3 .step3_ancar{ background: #fff; border: 1px solid #000; width: 90%; margin: 0 auto 5vw; text-align: right;}
#sec3 .step3_ancar a { display: inline-block; text-align: right; width: 80%;}
#sec3 .step3_ancar p { position: relative; font-size: 3.7vw; width: 90%; padding: 0vw 0 0vw 4vw; height: 20vw; line-height: 20vw; text-align: left; box-sizing: border-box;}
#sec3 .step3_ancar p:before{ font-size: 3.5vw; content: 'STEP3'; position: absolute; width: 18vw; height: 20vw; line-height: 20vw; color: #fff; background: #000; top: 0; left: -18vw; text-align: center; letter-spacing: 0.1em; box-sizing: border-box;} 
#sec3 .step3_ancar p:after{ content: ''; position: absolute; width: 3.2vw;  height: 3.2vw;  margin: 0 10px; border-bottom: 3px solid #000; border-right: 3px solid #000;  transform: rotate(45deg); top: 8vw; right: -6.3vw;}

#sec3 .step4_ancar{ background: #fff; border: 1px solid #000; width: 90%; margin: 0 auto 5vw; text-align: right;}
#sec3 .step4_ancar a { display: inline-block; text-align: right; width: 80%;}
#sec3 .step4_ancar p { position: relative; font-size: 3.7vw; width: 90%; padding: 0vw 0 0vw 4vw; height: 20vw; line-height: 20vw; text-align: left; box-sizing: border-box;}
#sec3 .step4_ancar p:before{ font-size: 3.5vw; content: 'STEP4'; position: absolute; width: 18vw; height: 20vw; line-height: 20vw; color: #fff; background: #000; top: 0; left: -18vw; text-align: center; letter-spacing: 0.1em; box-sizing: border-box;} 
#sec3 .step4_ancar p:after{ content: ''; position: absolute; width: 3.2vw;  height: 3.2vw;  margin: 0 10px; border-bottom: 3px solid #000; border-right: 3px solid #000;  transform: rotate(45deg); top: 8vw; right: -6.3vw;} 
    
    /*sec3 STEP1Contentエリア*/
#sec3_step1 {}
#sec3_step1 .sec3_headding { background: #e26f68; width: 100%; padding-bottom: 6vw;}
#sec3_step1 .step1_headding { width: 22.6vw; margin: 0 auto; transform: translateY(-2.6vw);}
#sec3_step1 .step1_headding p {}
#sec3_step1 .step1_headding-txt { width: 90%; margin: 0 auto;}
#sec3_step1 .step1_sub-area { background: #ededed;}
#sec3_step1 .step1_sub-area .step1_sub-txt { font-size: 3.9vw; line-height: 1.64em; margin: 0 auto; text-align: center; padding: 8vw 0 10vw;}
#sec3_step1 .step1_sub-area .step1_sub-txt span{ display: block;}
#sec3_step1 .step1_content-1 .border_bg {background: url("../images/bg.png") no-repeat center/cover; width: 90%; margin: 0 auto; height: 95vw;}    
#sec3_step1 .step1_content-2 .border_bg {background: url("../images/bg.png") no-repeat center/cover; width: 90%; margin: 0 auto; height: 105vw;}
#sec3_step1 .step1_content-3 .border_bg {background: url("../images/bg.png") no-repeat center/cover; width: 90%; margin: 0 auto; height: 113vw;}
#sec3_step1 .step1_content-2 .vh_up { height: 95vw;}
#sec3_step1 .step1_content-2 .vh_up p { margin-bottom: 8vw; line-height: 1.5em; text-align: left; padding: 0 2vw;}
#sec3_step1 .step1_content-3 .vh_up2 {height: 103vw;}
#sec3_step1 .step1_content-3 .vh_up2 p { margin-bottom: 8vw; line-height: 1.5em; text-align: left; padding: 0 2vw;}
#sec3_step1 .step1_content-area { width: 100%; transform: translateY(-20px);}
#sec3_step1 .step1_content-1 {margin-bottom: 40px;}
#sec3_step1 .step1_content-2 {margin-bottom: 40px;}
#sec3_step1 .step1_flow-txt { width: 90%; margin: 0 auto;}
#sec3_step1 .youtube_flex { width: 90%; margin: 0 auto; background: #fff; height: 85vw; transform: translateY(20px); padding-top: 5vw; box-sizing: border-box;}
#sec3_step1 .youtube_movie{ width: 100%; align-self: center;}
#sec3_step1 iframe { width: 100%; height: 42vw;}
#sec3_step1 .youtube_flex-right{ text-align: center; width: 100%; padding: 7vw 0 0;}
#sec3_step1 .youtube_flex-right p {font-size: 3.5vw; line-height: 1.3em; text-align: center; margin-bottom: 8vw;}
#sec3_step1 .youtube_flex-right p span {display: block;}
#sec3_step1 .official_btn { font-size: 3.5vw; color: #1c2b71; background-color: #fff; border: 1px solid #1c2b71; border-bottom: 4px solid #1c2b71;    box-shadow: 0 3px 5px rgb(0 0 0 / 30%); border-radius: 9px; padding: 4vw 0; width: 87%;margin: 0 auto;}

    /*sec3 STEP2Contentエリア*/
#sec3_step2 { margin-top: 10vw;}
#sec3_step2 .sec3_headding { background: #46bd98; width: 100%; padding-bottom: 6vw;}
#sec3_step2 .step2_headding { width: 22.6vw; margin: 0 auto 0; transform: translateY(-2.6vw);}
#sec3_step2 .step2_headding-txt { width: 80%; margin: 0 auto;}
#sec3_step2 .step2_sub-area { background: #fff;}
#sec3_step2 .step2_sub-area .step2_sub-txt { width: 100%; font-size: 3.9vw; line-height: 1.64em; margin: 0 auto; text-align: center; padding: 8vw 0 10vw;}
#sec3_step2 .step2_sub-area .step2_sub-txt span{display: block;}


#sec3_step2 .step2_content-area { width: 90%; margin: 0 auto;}
#sec3_step2 .step2_flex1 {}
#sec3_step2 .step2_flex1 .step2_you {background: url("../images/step2_you.png") no-repeat center/cover; width: 100%; height: 60vw; position: relative; margin-bottom: 10vw;}
#sec3_step2 .step2_flex1 .step2_you .click_inner{ width: 88%; background: #fff; position: absolute; top: 10vw; left: 5vw; border-radius: 25px; border: #46bd98 1px solid; border-bottom: 9px #46bd98 solid; font-size: 3.2vw; padding: 8vw 5vw;}
#sec3_step2 .step2_flex1 .step2_you .you_icon { position: relative;color: #1c2b71; font-size: 7vw; text-align: right; width: 80%;}
#sec3_step2 .step2_flex1 .step2_you .you_icon::before {background: url("../images/yt_icon_rgb.png")no-repeat center/cover;content: '';position: absolute; top: 1vw; left: 8vw; width: 10.06vw; height: 6.93vw;}
#sec3_step2 .step2_flex1 .step2_you .txt { margin: 5vw auto 0; line-height: 1.5em;}

#sec3_step2 .step2_flex1 .step2_insta { background: url("../images/step2_insta.png") no-repeat center/cover; width: 100%; height: 60vw; position: relative; margin-bottom: 10vw;}
#sec3_step2 .step2_flex1 .step2_insta .click_inner{ width: 88%; background: #fff; position: absolute; top: 10vw; left: 5vw; border-radius: 25px; border: #46bd98 1px solid; border-bottom: 9px #46bd98 solid; font-size: 3.2vw; padding: 8vw 5vw;}
#sec3_step2 .step2_flex1 .step2_insta .insta_icon { position: relative;color: #1c2b71; font-size: 7vw; text-align: right; width: 80%;}
#sec3_step2 .step2_flex1 .step2_insta .insta_icon::before {background: url("../images/insta_icon.png")no-repeat center/contain;content: '';position: absolute; top:0; left: 6vw; width: 13.3vw; height: 8.5vw;}
#sec3_step2 .step2_flex1 .step2_insta .txt { margin: 5vw auto 0; line-height: 1.5em;}

#sec3_step2 .step2_flex2 {}
#sec3_step2 .step2_flex2 .step2_twi { background: url("../images/step2_twi.png") no-repeat center/cover; width: 100%; height: 60vw; position: relative; margin-bottom: 10vw;}
#sec3_step2 .step2_flex2 .step2_twi .click_inner{width: 88%; background: #fff; position: absolute; top: 10vw; left: 5vw; border-radius: 25px; border: #46bd98 1px solid; border-bottom: 9px #46bd98 solid; font-size: 3.2vw; padding: 8vw 5vw;}
#sec3_step2 .step2_flex2 .step2_twi .twi_icon {position: relative;color: #1c2b71; font-size: 7vw; text-align: right; width: 68%;}
#sec3_step2 .step2_flex2 .step2_twi .twi_icon::before { background: url("../images/twi_icon.png")no-repeat center/contain; content: ''; position: absolute; top: 0px; left: 6vw; width: 13.3vw; height: 9.3vw;}
#sec3_step2 .step2_flex2 .step2_twi .txt { margin: 5vw auto 0; line-height: 1.5em;}

#sec3_step2 .step2_flex2 .step2_blog { background: url("../images/step2_blog.png") no-repeat center/cover; width: 100%; height: 60vw; position: relative;}
#sec3_step2 .step2_flex2 .step2_blog .click_inner{ width: 88%; background: #fff; position: absolute; top: 10vw; left: 5vw; border-radius: 25px; border: #46bd98 1px solid; border-bottom: 9px #46bd98 solid; font-size: 3.2vw; padding: 8vw 5vw;}
#sec3_step2 .step2_flex2 .step2_blog .blog_icon {position: relative;color: #1c2b71; font-size: 7vw; text-align: right; width: 65%;}
#sec3_step2 .step2_flex2 .step2_blog .blog_icon::before {background: url("../images/line_icon.png")no-repeat center/contain;content: '';position: absolute; top: 0px; left: 6vw; width: 13.3vw; height: 9.33vw;}
#sec3_step2 .step2_flex2 .step2_blog .txt { margin: 5vw auto 0; line-height: 1.5em;}
    
    /*STEP3*/
#sec3_step3 .border_bg {background: url("../images/bg.png") no-repeat center/cover; width: 90%; margin: 0 auto; height: 90vw;} 
#sec3_step3 { margin-top: 20vw;}
#sec3_step3 h3 { width: 90%; margin: 0 auto;}
#sec3_step3 .sec3_headding { background: #f39c33; width: 100%; padding-bottom: 6vw;}
#sec3_step3 .step3_headding { width: 22.6vw; margin: 0 auto ; transform: translateY(-20px);}
#sec3_step3 .step3_headding-txt { width: 80%; margin: 0 auto;}
#sec3_step3 .step3_sub-area { background: #fff;}
    
#sec3_step3 .step3_sub-area .step3_sub-txt { width: 85%; font-size: 3.9vw; line-height: 1.64em; margin: 0 auto; text-align: center; padding: 8vw 0 10vw;}
#sec3_step3 .step3_sub-area .step3_sub-txt span{display: block;}

#sec3_step3 .youtube_flex { width: 90%; margin: 15px auto; background: #fff; padding: 6vw 0 0; transform: translateY(20px);}
#sec3_step3 .youtube_movie{ width: 100%; align-self: center;}
#sec3_step3 iframe { width: 100%; height: 50vw;}
#sec3_step3 .youtube_flex-right{ text-align: center; width: 100%; padding: 7vw 0; align-self: center;}
#sec3_step3 .youtube_flex-right p {font-size: 3.5vw; line-height: 1.3em; width: 83%; text-align: left; margin: 0 auto;}
#sec3_step3 .youtube_flex-right p span {display: block;}
    
    /*STEP4*/
#sec3_step4 { margin-top: 20vw;}
#sec3_step4 .sec3_headding { background: #ef8459; width: 100%; padding-bottom: 6vw;}
#sec3_step4 .step4_headding { width: 22.6vw; margin: 0 auto; transform: translateY(-20px);}
#sec3_step4 .step4_headding-txt { width: 80%; margin: 0 auto;}
#sec3_step4 .step4_sub-area {background: #fff;}
#sec3_step4 .step4_sub-area .step4_sub-txt { font-size: 3.9vw; line-height: 1.64em; margin: 0 auto; text-align: center;padding: 8vw 0 10vw;}
#sec3_step4 .step4_sub-area .step4_sub-txt span{display: block;}

#sec3_step4 .step4_flex { width: 80%; margin: 0 auto;}
#sec3_step4 .step4_flex-item { margin-bottom: 8vw;}
#sec3_step4 .step4-txt { background: #ef8459; color: #fff; text-align: center; padding: 2vw 0; font-size: 3.5vw; position: relative;}
#sec3_step4 .step4-txt::after {position: absolute; content: ''; transform: rotate(45deg); border-top: 1px solid #fff; border-right: 1px solid #fff;    width: 2vw; height: 2vw; top: 2.93vw; right: 3.2vw;}
	
#sec3_step4 .step4_btn_flex { margin: 0 auto; width: 85%; padding-top: 5vw;}
#sec3_step4 .tell_btn { font-size: 4.5vw; color: #ef8459; background-color: #fff; border: 1px solid #ef8459; border-bottom: 4px solid #ef8459; box-shadow: 0 3px 5px rgb(0 0 0 / 30%); border-radius: 9px; padding: 4vw 0px 4vw 7.2vw; width: 100%; margin: 0 auto 5vw; text-align: center;}
#sec3_step4 .tell_btn p {content: '';position: relative; width: 100%;  margin: 0 auto;}
#sec3_step4 .tell_btn p span{display: block; font-size: 3.7vw;}
#sec3_step4 .tell_btn p::before{background: url("../images/tell_icon.png")no-repeat center/contain;content: '';position: absolute; top: 0; left: 0vw; width: 15.6vw; height: 10vw;}
#sec3_step4 .mail_btn { font-size: 4.5vw; color: #ef8459; background-color: #fff; border: 1px solid #ef8459; border-bottom: 4px solid #ef8459; box-shadow: 0 3px 5px rgb(0 0 0 / 30%); border-radius: 9px;  padding: 6vw 0px 6vw 7.2vw; width: 100%; margin: 0 auto 20vw; text-align: center; align-self: center;}
#sec3_step4 .mail_btn p {content: '';position: relative;text-align: center;width: 100%;    margin: 0 auto;}
#sec3_step4 .mail_btn p::before{background: url("../images/mail_icon.png")no-repeat center/contain;content: '';position: absolute;      top: -27%;    left: 3vw; width: 8.2vw; height: 8.2vw;}


/*sec4*/
#sec4 {background: #f9f3df; padding-bottom: 50px;}
#sec4 .sec4_headding { width: 100%; height: auto; margin-top: 0;}
#sec4 .stripe_bg {  width: 85%; height: 34vw; border:7px solid #ededed;
 /*     上⇒下への白からピンクに変わっていくグラデーションを指定 → #fffの後にスペースを開けて50%と指定 
   background-image: linear-gradient(#fff 50%, #ffc0cb);*/
     /* 「#fff 50%, #ffc0cb」の間に「#ffc0cb 50%」を挿入 */
/*  background-image: linear-gradient(#fff 50%, #ffc0cb 50%, #ffc0cb);*/
      /* linear-gradient()関数の引数の一番前に「-45deg」と指定 */
/*  background-image:
    linear-gradient(-45deg, #fff 50%, #ffc0cb 50%, #ffc0cb);
    background-size: 50px 50px;
      -45度斜めから25%、50%、75%、100%と
    ボーダーが交互に色違いとなるように指定 */
  background-image: linear-gradient(    -45deg,    #fff 25%,    #e5e5e5 25%, #e5e5e5 50%,    #fff 50%, #fff 75%,    #e5e5e5 75%, #e5e5e5  );
  /*background-size: 50px 50px;*/
     /* 幅8px、高さ8pxで背景画像のサイズを指定 */
  background-size: 8px 8px;    margin: 40px auto 10px;}

#sec4 .sec4_step1 .sec4_step1-headding { width: 40vw; text-align: center; transform: translateY(-25px);margin: 0 auto;}
#sec4 .sec4_step1 p {font-size: 3.5vw; text-align: center;line-height: 2;font-weight: bold; margin: 0 auto 5vw;}
#sec4 .sec4_step1 p span{display: block;font-size: 3.2vw;}
#sec4 .sec4_arrow { width: 9.6vw; height: 9.6vw; margin: 0 auto;}

#sec4 .stripe_bg2 { width: 85%; border:7px solid #ededed; background-image: linear-gradient(    -45deg,    #fff 25%,    #e5e5e5 25%, #e5e5e5 50%,    #fff 50%, #fff 75%,    #e5e5e5 75%, #e5e5e5  ); padding-bottom: 30px; background-size: 8px 8px;    margin: 0 auto 10px;}
    
#sec4 .sec4_step2 .sec4_step2-headding { width: 40vw; text-align: center;transform: translateY(-25px);margin: 0 auto;}
#sec4 .sec4_step2 { font-size: 3.2vw; text-align: center; line-height: 1.7em;font-weight: bold; margin: 10vw auto 0;}
#sec4 .sec4_step2_flex { width: 90%; margin: 0 auto;}
#sec4 .sec4_step2_flex .step2_flex-left{ width: 100%;} 
#sec4 .sec4_step2_flex .step2_flex-right{ width: 100%;} 
#sec4 .sec4_step2_flex .online_content{ margin: 5.3vw auto; padding: 6vw 0; box-sizing: border-box; background: #fff; width: 90%; transform: translateY(5vw); height: 45vw;}
#sec4 .sec4_step2_flex .online-txt {font-size: 3.2vw; text-align: left;margin: 0 auto 5vw; width: 85%;}
#sec4 .sec4_step2_flex .online_btn {font-size: 3.2vw; color: #1c2b71; background-color: #fff; border: 1px solid #1c2b71; border-bottom: 4px solid #1c2b71; box-shadow: 0 3px 5px rgb(0 0 0 / 30%); border-radius: 9px; padding: 2.5vw 0; width: 80%; margin: 0 auto ;}
 .online_bg{background: url("../images/online_bg.png")no-repeat center/cover; width: 100%; height: 55vw; margin-bottom: 10vw;}
 .offline_bg{background: url("../images/offline_bg.png")no-repeat center/cover; width: 100%; height: 55vw;}
#sec4 .sec4_step2_flex .offline_content{ margin: 20px auto; padding: 6vw 0; box-sizing: border-box; background: #fff; width: 90%; transform: translateY(5vw); height: 45vw;}
#sec4 .sec4_step2_flex .offline-txt {font-size: 3.2vw; text-align: left; margin: 0 auto 5vw; width: 85%;}
#sec4 .sec4_step2_flex .offline_btn {font-size: 3.2vw; color: #1c2b71; background-color: #fff; border: 1px solid #1c2b71; border-bottom: 4px solid #1c2b71; box-shadow: 0 3px 5px rgb(0 0 0 / 30%);  border-radius: 9px; padding: 2.5vw 0; width: 80%; margin:0 auto;}

#sec4 .stripe_bg3 {  width: 85%; border:7px solid #ededed;   background-image: linear-gradient(    -45deg,    #fff 25%,    #e5e5e5 25%, #e5e5e5 50%,    #fff 50%, #fff 75%,    #e5e5e5 75%, #e5e5e5  );  background-size: 8px 8px;    margin: 40px auto 10px;}
    
.sec4_headding-txt {font-size: 4vw; margin: 0 auto 5vw;text-align: center;}
	
#sec4 .step4_flow-txt { }
#sec4 .step4_flow-txt h2 { font-size: 4vw; width: 90%; margin: 0 auto 8vw;}
#sec4 .step4_step3-content { padding-bottom: 8vw;}
#sec4 .step4_step3-content .border_bg {  background: url("../images/online_bg.png")no-repeat center/cover; width: 90%; margin: 0 auto; padding: 4vw 0;}
#sec4 .sec4_step3 .sec4_step3-headding { width: 40vw; text-align: center;transform: translateY(-25px);margin: 0 auto;}
#sec4 .sec4_step3 { font-size: 3.2vw; text-align: center; line-height: 1.7em;font-weight: bold; margin: 10vw auto 0;}
#sec4 .sec4_step3-flex { width: 90%; margin: 0 auto; background: #fff; padding: 2vw 0 4vw;}
#sec4 .youtube_flex-right { width: 100%; margin: 0 auto; padding: 4vw;}
#sec4 .youtube_flex-right p.txt { font-size: 3.2vw; line-height: 2em; text-align: left;}
#sec4 .youtube_flex-right p.txt a { text-decoration: underline;}
#sec4 .youtube_movie { width: 80%; margin: 0 auto 5vw;}
#sec4 .official_btn { font-size: 3.2vw; color: #1c2b71;    background-color: #fff;    border: 1px solid #1c2b71; border-bottom: 4px solid #1c2b71; box-shadow: 0 3px 5px rgb(0 0 0 / 30%); border-radius: 9px;  width: 80%; margin: 0 auto 5px;position: relative;}
#sec4 .official_btn::before { content: '▲';position: absolute; top: 3vw; left: 8vw;}
#sec4 .official_btn a { display: block; width: 100%; padding: 2.5vw 0;}

#sec4 .stripe_bg4 {  width: 85%; border:7px solid #ededed;   background-image: linear-gradient(    -45deg,    #fff 25%,    #e5e5e5 25%, #e5e5e5 50%,    #fff 50%, #fff 75%, #e5e5e5 75%, #e5e5e5  );  background-size: 8px 8px; margin: 0 auto 10px; padding: 0 0 10vw;}
#sec4 .sec4_step4 .sec4_step4-headding { width: 40vw; text-align: center; transform: translateY(-25px); margin: 0 auto;}
#sec4 .sec4_step4 {font-size: 14px; text-align: center; line-height: 2.2em; font-weight: bold; margin: 10vw auto 0;}
#sec4 .sec4_step4 p { font-size: 4.3vw; text-align: center;}
#sec4 .pink_ul {    background: linear-gradient(transparent 49%, #fabbd7 0%);}
#sec4 .blue_ul {    background: linear-gradient(transparent 49%, #9be1fc 0%);}
#sec4 .break {display: block;}
#sec4 .fs_40 {font-size: 4vw;}
#sec4 a {text-decoration: underline; color: #777c9d;}

#sec4 .stripe_bg5 {  width: 85vw;  border:7px solid #ededed;   background-image: linear-gradient(    -45deg,    #fff 25%,    #e5e5e5 25%, #e5e5e5 50%,    #fff 50%, #fff 75%,    #e5e5e5 75%, #e5e5e5  );  background-size: 8px 8px; margin: 4.5vw auto; padding: 8vw 0;max-width: 1000px;}
#sec4 .step5 { margin: 0 auto;  width: 65%; }
    
/*フッター*/
footer { }
footer .footer_flex { width: 100%; background: url("../images/footer_bg.png")no-repeat center/cover; padding: 10vw 0;}
footer .footer_left { width: 85%; margin: 0 auto;}
footer .footer_right { width: 90%; margin: 0 auto; line-height: 1.4em; font-size: 4.5vw; text-align: center; padding: 5vw 0 0;}
footer .footer_right p span{ display: block;}
footer .footer_right .gosic { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
footer .copy { font-size: 2.9vw; padding: 5vw 0; width: 100%; text-align: center;}
}