/*reset css start*/
*,*::before,*::after{
    box-sizing:border-box;
}
html{
    -moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;
}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{
    margin:0;
}
ul[role='list'],ol[role='list']{
    list-style:none;
}
body{
    min-height:100vh;line-height:1.5
}
h1,h2,h3,h4,button,input,label{
    line-height:1.1;
}
h1,h2,h3,h4{
    text-wrap:balance;
}
a:not([class]){
    text-decoration-skip-ink:auto;color:currentColor;text-decoration: none;
}
img,picture{
    max-width:100%;display:block;
}
input,button,textarea,select{
    font:inherit;
}
textarea:not([rows]){
    min-height:10em;
}:target{
    scroll-margin-block:5ex;
}
/*reset css end*/
body{
    font-size:16px;
    line-height: 1.5em;
    color:#555;
    font-family: "Meiryo UI", "Hiragino Sans", "Yu Gothic UI", "MS PGothic", "Hiragino Kaku Gothic ProN", sans-serif;
    background: #fff4fa;
}
header{
    width:100%;
    padding:20px;
    display: flex;
    justify-content:space-between;
    background: #fff;
    align-items: anchor-center;
}
header .logo{
    width:auto;
    letter-spacing: 10px;
    font-size:28px;
}
/* header .logo img{
    width:40%;
    height: auto;
} */
header .logo .sp-logo{
    display: none;
}
header .logo span{
    font-size: 30px;
    letter-spacing: 0;
}
header .logo span span:first-child{
    color:#ee7cb6;
}
header .logo span span:last-child{
    color:#c7136d;
    margin-right: 10px;
}
header .btn-box{
    display: flex;
    justify-content: space-between;
    width:45%;
    gap:10px;
}
header #top-btn{
    position: relative;
    background:#ee7cb6;
    border-radius: 25px;
    width:50%;
    height:45px;
}
header #top-btn:after{
    font-family: "Font Awesome 5 Free";
    content: '\f138';
    font-weight: 900;
    color:#fff;
    position: absolute;
    right:10px;
    top:10px;
}

header #top-btn a{
    display: block;
    color:#fff;
    text-decoration: none;
    padding:10px 15px 0;
    text-align: center;
}
header #top-btn:hover{
    opacity: 0.8;
}
header #top-btn:last-child{
    background-color: #c7136d;
}
.main-img{
    background:#ffdbef;
    clip-path: polygon(0 0, 100% 0%, 100% 86%, 0 54%);
    height: 765px;
    z-index:10;
}
.main-img h2{
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 10px;
}
.main-img h2 span{
    display: block;
    font-size: 50px;
    text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff, -1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff, 0px -1px 1px #ffffff;
}
.main-img h2 span:first-child{
    color:#ee7cb6;
    letter-spacing: -4px;
}
.main-img h2 span:last-child{
   color:#c7136d;
   letter-spacing: 0;
}
.main-img #img-flex{
    display: flex;
    justify-content:space-evenly;
    width:1200px;
    margin:0 auto;
}
.main-img #main-txt{
    text-align:center;
    background: url(../img/lp/img-bg.webp)no-repeat;
    width: 62%;
    height: 460px;
    padding-top: 50px;
}
.main-img #main-txt img{
    width:75%;
    height: auto;
}
.main-img #main-txt #sub-txt{
    text-shadow: 
        1px  1px 1px #ffffff,
        -1px  1px 1px #ffffff,
        1px -1px 1px #ffffff,
        -1px -1px 1px #ffffff,
        1px  0px 1px #ffffff,
        0px  1px 1px #ffffff,
        -1px  0px 1px #ffffff,
        0px -1px 1px #ffffff;
    letter-spacing: 4px;
    font-size:24px;
    margin-bottom:10px;
    font-weight: bold;
}
.main-img #main-txt #sub-txt span{
    color:#ff0083;
    font-size: 30px;
}
.main-img #main-txt div{
    margin-top:15px;
}
.main-img #main-txt .signup-btn{
    margin-top:0;
    margin-bottom: 20px;
}
.main-img #main-txt img{
    display: inline-block;
    text-align: center;
}
.yeah-border{
    color:#fff;
    font-size:25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
}
.yeah-border::before{
    content: "";
    width: 30px;
    height: 5px;
    transform: rotate(60deg);
    box-sizing: border-box;
    background-color: #ee7cb6;
}
.yeah-border::after{
    content: "";
    width: 30px;
    height: 5px;
    transform: rotate(-60deg);
    box-sizing: border-box;
    background-color: #ee7cb6;
}
.btn-flex{
    display: flex;
    justify-content: space-between;
}
.btn-flex .signup-btn{
    width:48%;
}
.btn-flex .signup-btn a{
    width:100% !important;
}
.signup-btn a{
    position: relative;
    display: inline-block;
    background: #fff;
    border:solid 1px #ee7cb6;
    box-shadow: -3px 4px 0px 0px #ee7cb6;
    border-radius: 15px;
    padding:20px;
    width:50%;
    text-decoration: none;
    font-size:23px;
    text-align: center
}
.signup-btn a::after{
    position:absolute;
    right:0;
    font-family: "Font Awesome 5 Free";
    content: '\f138';
    font-weight: 900;
    color:#ee7cb6;
    margin:0 10px;
}
.signup-btn:hover{
    opacity: 0.8;
}
.open-txt{
    font-size:20px;
    line-height: 1.5;
    margin-top:50px !important;
}
footer .open-txt{
    color:#e43f99;
}
#page-img{
    padding-top:55px;
    width:45%;
}
#page-img img{
    width:100%;
    height: auto;
}
article{
    margin-top:-200px;
}
.container{
    width:1080px;
    margin:0 auto;
}
.value-point{
    display: flex;
    padding-top:125px;
    gap:20px;
}
.value-point div:first-child{
    width:25%;
}
.value-point img{
    width:100%;
}
.balloon {
    display: inline-block;
    font-size:24px;
    text-align: center;
    line-height:1.5em;
    background: transparent;
    border: solid 5px #ff9dcf;
    padding: 20px 22px;
    position: relative;
    width:60%;
    height: 120px;
    z-index: 2;
}
.balloon::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 18px;
    background: #fff5fa;
    bottom: -18px;
    left: 0;
    border-right: 5px solid #ff9dcf;
    transform: skew(-30deg);
    margin: auto;
    z-index: 1;
}
.balloon::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    top: 11px;
    left: -11px;
    mix-blend-mode: multiply;
    z-index: 2;
}
.balloon p span{
    display: block;
    font-size:37px;
}
.balloon p span::after{
    content:"";
    display: inline-block;
    border-bottom:solid 7px #f6ca19;
    position: absolute;
    bottom: 18px;
    display: inline-block;
    width: 80%;
    height: 14px;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
}
#pointbox{
    display: flex;
    gap:30px;
    background: #fff;
    padding:50px 30px;
    margin-bottom: 80px;
    border-radius:10px;
    -webkit-box-shadow: 30px 30px 35px -38px rgba(0,0,0,0.25);
    -moz-box-shadow: 30px 30px 35px -38px rgba(0,0,0,0.25);
    box-shadow: 30px 30px 35px -38px rgba(0,0,0,0.25);
}
.point{
    display: flex;
    text-align: center;
    width:50%;
    align-items: center;
    gap:25px;
}
/* .point div{
    margin-bottom: 20px;
} */
.point img{
    width:100%;
}
.point div{
    width:35%;
}
.point dl{
    width:80%;
}
.point dl dt{
    color:#f6ca19;
    font-size: 20px;    
    margin-bottom: 20px;
}
.point dl dd{
    text-align: left;
    margin-bottom: 20px;
    font-size:14px;
}
.point dl dd:last-child{
    margin-bottom: 0;
}
#function{
    background: #fff;
    padding:70px 0;
}
#function h2{
    font-size: 37px;
    position: relative;
    text-align: center;
    font-weight: 400;
    margin-bottom: 100px;
    z-index: 1;
}
#function h2::after{
    content: "";
    display: inline-block;
    border-bottom: solid 7px #f6ca19;
    position: absolute;
    bottom: 0;
    display: inline-block;
    width: 39%;
    height: 14px;
    left: 49%;
    transform: translateX(-50%);
    z-index: -1;
}
.func-box{
    position: relative;
    padding:30px 30px 80px;
    margin-bottom:100px;
    background-image: repeating-linear-gradient(90deg, #f1e7c0, #f1e7c0 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #f1e7c0, #f1e7c0 12px, transparent 12px, transparent 16px), repeating-linear-gradient(90deg, #f1e7c0, #f1e7c0 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #f1e7c0, #f1e7c0 12px, transparent 12px, transparent 16px);
    background-position: left top, right top, left bottom, left top;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    border-radius: 10px;
}
.func-box#box2{
    background-image: repeating-linear-gradient(90deg, #deeca2, #deeca2 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #deeca2, #deeca2 12px, transparent 12px, transparent 16px), repeating-linear-gradient(90deg, #deeca2, #deeca2 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #deeca2, #deeca2 12px, transparent 12px, transparent 16px);
}
.func-box#box3{
    background-image: repeating-linear-gradient(90deg, #9cd4e8, #9cd4e8 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #9cd4e8, #9cd4e8 12px, transparent 12px, transparent 16px), repeating-linear-gradient(90deg, #9cd4e8, #9cd4e8 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #9cd4e8, #9cd4e8 12px, transparent 12px, transparent 16px);
}
.func-number{
    position: absolute;
    font-size:30px;
    color:#f6ca19;
    text-align: center;
    top:-62px;
    left:25px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
.func-number span{
    display: block;
    font-size:80px;
    font-weight: 600;
    margin-top:30px;
}
.func-box#box2 .func-number{
    right:25px;
    left:unset;
    color:#bfd65f;
}
.func-box#box3 .func-number{
    color: #77c8e5;
}
.func-flex{
    display: flex;
    position: relative;
    justify-content: space-between;
}
.func-box#box2 .func-flex{
    flex-direction: row-reverse;
    text-align: right;
}
.func-img{
    position: absolute;
    top:-65px;
    right:0;
}
.func-box#box2 .func-img{
    left:0;
    right: unset;
}
.funt-ttl{
    background: #f6ca19;
    color:#fff;
    padding:10px 20px;
    border-radius: 30px;
    margin:40px 0 30px;
    font-size: 20px;
    font-weight: 600;
    width: auto;
    display: inline-block;
}
.func-box#box2 .funt-ttl{
    background: #bfd65f;
}
.func-box#box3 .funt-ttl{
    background: #77c8e5;
}
.func-flex h3{
    font-size:36px;
    color:#f6ca19;
    margin-bottom: 30px;
}
.func-box#box2 .func-flex h3{
    color:#bfd65f;
}
.func-box#box3 .func-flex h3{
    color:#77c8e5;
}
.func-flex p{
    margin-bottom: 20px;
}
footer{
    padding-top:40px;
}
#contact-box{
    background:#f9f9f9;
    padding:50px;
    margin-bottom: 30px;
    text-align: center;
}
#contact-box p{
    font-size:20px;
    line-height: 2em;
}
#ftr-logo{
    margin-bottom: 30px;
}
/* #ftr-logo img{
    display: inline-block;
    width:50%;
    height: auto;
} */
#ftr-logo{
    font-size: 30px;
    line-height: 1.2;
    font-weight: bold;
}

#ftr-logo span{
    display: block;
    font-size: 50px;
    text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff, -1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff, 0px -1px 1px #ffffff;
}
#ftr-logo span:first-child{
    color:#ee7cb6;
}
#ftr-logo span:last-child{
   color:#c7136d;
}
#ftr-btn{
    margin-top:20px;
}
#ftr-btn .yeah-border{
    color:#555;
}
#ftr-btn .signup-btn a{
    margin-bottom:20px;
}
footer #ftr-btn .signup-btn a{
    width:35%;
}
footer #ftr-btn .signup-btn:nth-child(3) a{
    color:#fff;
    background: #ee7bb6;
    box-shadow: -3px 4px 0px 0px #e43f99;
}
footer #ftr-btn .signup-btn:last-child a{
    color:#fff;
    background: #c7136d;
    border-color:#c7136d;
    box-shadow: -3px 4px 0px 0px #961053;
}
footer #ftr-btn .signup-btn:nth-child(3) a:after,
footer #ftr-btn .signup-btn:last-child a:after{
    color:#fff;
}
#copyright{
    background: #fff;
    text-align: center;
    font-size:12px;
    padding:20px 0;
}
@media (max-width:1562px){
    header .logo{
        width:60%;
    }
}
@media (max-width:1535px){
    header .logo{
        width:65%;
    }
}
@media (max-width:1495px){
    header .logo{
        width:70%;
        font-size:26px;
    }
    header #top-btn a{
        font-size: 13px;
    }
}
@media (max-width:1400px){
    header .btn-box{
        width:68%;
    }
    header .logo{
        width:97%;
    }
    header .logo img{
        width: 70%;
    }
}
@media (max-width:1390px){
    header .logo{
        width:88%;
    }
    header .logo span{
        font-size: 26px;
    }
}
@media (max-width:1365px){
    header .logo{
        width:100%;
    }
    header #top-btn a{
        font-size:13px;
    }
}
@media (max-width:1298px){
    header .logo{
        font-size: 23px;
        width:95%;
    }
    header .logo span{
        font-size: 25px;
    }
}
@media (max-width:1255px){
    header .logo{
        width:100%;
    }
        header #top-btn a{
        font-size:12px;
    }
}
@media (max-width:1230px){
    header .logo{
        width:85%;
    }
    header .btn-box{
        width:55%;
    }
    header #top-btn a{
        font-size:12px;
    }
}
@media (max-width:1199px){
    header .logo{
        width: 95%;
    }
    header .logo span{
        font-size: 23px;
    }
    header .btn-box{
        width:66%;
    }
}
@media (max-width:1170px){
    header .logo{
        width:95%;
        font-size: 19px;
    }
    header .logo span{
        font-size: 21px;
    }
}

@media only screen and (max-width: 767px) {
    header{
        display: block;
        padding:15px;
        align-items: center;
    }
    header .btn-box{
        display: block;
        width:100%;
    }
    header .logo{
        width:100%;
        margin:0 auto 20px;
        font-size:19px;
        text-align: center;
    }
    header .logo .sp-logo{
        display: block;
        letter-spacing: 10px;
    }
    header .logo .pc-logo{
        display: none;
    }
    header .logo .sp-logo span{
        display: block;
        font-size:25px;
    }
    /* header .logo img{
        width:90%;
        text-align: center;
        margin:0 auto;
    } */
    header #top-btn{
        width:100%;
        margin-bottom: 10px;
        position: relative;
    }
    header #top-btn a{
        display: block;
        text-align: center;
        font-size:16px;
    }
    header #top-btn:after{
        font-size: 12px;
    }
    .open-txt{
        font-size:18px;
        margin-top:20px !important;
    }
    .main-img{
        background: #ffadd7;
        height:980px;
        clip-path: polygon(0 0, 100% 0%, 100% 86%, 0 60%);
    }
    .main-img #img-flex{
        width:100%;
    }
     .main-img h2{
        line-height: 1.3;
     }
    .main-img h2 span{
        text-shadow: 2px 2px 2px #ffffff, -2px 2px 2px #ffffff, 2px -2px 2px #ffffff, -2px -2px 2px #ffffff, 2px 0px 2px #ffffff, 0px 2px 2px #ffffff, -2px 0px 2px #ffffff, 0px -2px 2px #ffffff;
        font-size:35px;
    }
    .container{
        width:95%;
    }
    .main-img #img-flex{
        display: block;
    }
    .main-img #main-txt{
        width:100%;
        background: none;
        height:auto;
        margin-bottom: 20px;
        padding-top:30px;
    }
    .main-img #main-txt #sub-txt{
        font-size:19px;
    }
    .main-img #main-txt #sub-txt span{
        font-size:23px;
        letter-spacing: -2px;
    }
    .main-img #main-txt img{
        width:90%;
    }
    .yeah-border{
        font-size:22px;
    }
    .yeah-border::before,
    .yeah-border::after{
        width:25px;
    }
    .main-img #main-txt #sub-txt{
        letter-spacing: 2px;
    }
    .btn-flex{
        display: block;
        width:80%;
        margin:0 auto;
    }
    .btn-flex .signup-btn{
        width:100%;
        margin-bottom:0 !important;
    }
    .signup-btn a{
        width:80%;
        padding:15px;
        font-size:21px;
    }
    .signup-btn:hover{
        opacity: 1;
    }
    #function{
        padding: 50px 0;
    }
    #page-img{
        padding-top:0;
        margin:0 auto;
        width:80%;
    }
    .value-point{
        padding-top:0;
        display: unset;
        position: relative;
    }
    .value-point div:first-child{
        width:40%;
    }
    .balloon{
        width:75%;
        height: 62px;
        font-size:13px;
        padding:5px 0;
        position: absolute;
        bottom: 125px;
        right:0;
        border: solid 3px #ff9dcf;
    }
    .balloon::after{
        top: 3px;
        left: -3x;
    }
    .balloon::before{
        border-right: solid 3px #ff9dcf;
    }
    .balloon p span{
        font-size: 16px;
        font-weight: 600;
    }
    .balloon p span::after{
        bottom: 14px;
        width:90%;
        border-bottom: solid 5px #f6ca19;
    }
    #pointbox{
        display: block;
    }
    .point{
        width:100%;
        margin-bottom: 30px;
        display: block;
    }
    .point div{
        width:100%;
    }
    .point img{
        width: 65%;
        text-align: center;
        display: inline-block;
        margin-bottom:20px;
    }
    .point dl{
        width:100%;
    }
    #function h2{
        font-size:30px;
    }
    #function h2::after{
        width: 90%;
    }
    .func-box{
        padding: 20px 20px 30px;
    }
    .func-flex{
        display: block;
        position: inherit;
    }
    .func-img{
        position: unset;
    }
    .func-number,
    .func-box#box2 .func-number{
        top:-60px;
        right: 0;
        left: 0;
        margin: 0 auto;
        font-size:25px;
    }
    .func-number span{
        font-size:65px;
        margin-top: 25px;
    }
    .funt-ttl{
        font-size:15px;
        text-align: center;
        width:100%;
        padding: 10px 5px;
    }
    .func-flex h3{
        font-size:30px;
        text-align: center;
    }
    .func-box#box2 .func-flex{
        text-align: left;
    }
    .func-box#box3{
        margin-bottom: 0;
    }
    #ftr-logo img{
        width:100%;
    }
    #ftr-logo{
        font-size:23px;
        line-height: 1.3;
    }
    #ftr-logo span{
        font-size:27px;
    }
    #contact-box{
        padding:30px;
    }
    #contact-box p{
        font-size:16px;
    }
    footer #ftr-btn .signup-btn a{
        width:90%;
        font-size: 17px;
    }
    footer .open-txt p{
        font-size:14px !important;
    }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 1)  {
    .container{
        width:90%;
    }
    header{
        align-items: center;
    }
    header .btn-box{
        margin-left:auto;
        width:55%;
    }
    header #top-btn{
        width:50%;
    }
    header .logo{
        width:40%;
        font-size: 20px;
    }
    header .logo span{
        font-size: 20px;
    }
    header .logo .sp-logo{
        display: block;
        letter-spacing: 10px;
    }
    header .logo .pc-logo{
        display: none;
    }
    header .logo .sp-logo span{
        display: block;
        font-size:25px;
    }
    header .logo img{
        width:100%;
    }
    header #top-btn a{
        font-size:11px;
        padding:10px;
    }
    .main-img{
        clip-path: polygon(0 0, 100% 0%, 100% 75%, 0 54%);
        height: 850px;
    }
    .main-img #img-flex{
        width:100%;
    }
    .main-img #main-txt{
        padding-top:65px;
    }
    .main-img #main-txt #sub-txt{
        font-size:16px;
    }
    .main-img #main-txt #sub-txt span{
        font-size:20px;
    }
    .main-img #main-txt{
        background:#ffadd7;
        height: 555px;
        border-left:solid 10px #fff2f9;
        border-right:solid 10px #fff2f9;
        margin: 0 20px;
    }
    .main-img h2{
        font-size:25px;
    }
    .main-img h2 span{
        font-size:30px;
    }
      .main-img #ftr-btn .signup-btn a{
    margin-bottom: 0;
      }
    #ftr-logo span{
        font-size:40px;
    }
    .btn-flex #ftr-btn .signup-btn a{
        margin-bottom: 0;
        font-size:20px;
    }
    .btn-flex{
        display: block;
        width:80%;
        margin:0 auto;
    }
    .open-txt{
        font-size: 16px;
    }
    .yeah-border{
        font-size:20px;
    }
    .yeah-border::after,
    .yeah-border::before{
        width:25px;
    }
    .main-img #main-txt img{
        width:95%;
    }
    .btn-flex .signup-btn{
        width:100%;
    }
    .signup-btn a{
        width:80%;
    }
    #page-img{
        width: 55%;
        padding-right: 10px;
        padding-top:100px;
    }
    .signup-btn:hover{
        opacity: 1;
    }
    .value-point{
        padding-top:0;
    }
    .balloon{
        width:75%;
        font-size:22px;
    }
    .balloon p span{
        font-size: 30px;
    }
    .balloon p span::after{
        width:90%;
    }
    #pointbox{
        gap:30px;
    }
    #function h2{
        font-size:32px;
    }
    .func-number{
        font-size:25px;
    }
    .func-number span{
        font-size: 65px;
        margin-top: 23px;
    }
    .func-img{
        width:40%;
    }
    .funt-ttl{
        font-size: 16px;
        margin: 25px 0 30px;
    }
    .func-box{
        padding: 20px 20px 30px;
    }
    .func-flex{
        display: block;
        position: inherit;
    }
    .func-img{
        position: unset;
        margin:0 auto;
    }
    .func-number,
    .func-box#box2 .func-number{
        top:-60px;
        right: 0;
        left: 0;
        margin: 0 auto;
        font-size:25px;
    }
    .func-number span{
        font-size:65px;
        margin-top: 25px;
    }
    .funt-ttl{
        font-size:16px;
        text-align: center;
        width:100%;
        padding: 10px 5px;
    }
    .func-flex h3{
        font-size:30px;
        text-align: center;
    }
    .func-box#box2 .func-flex{
        text-align: left;
    }
    .func-box#box3{
        margin-bottom: 0;
    }
    .func-flex p{
        text-align: center;
    }
    #ftr-logo img{
        width:65%;
    }
    #contact-box{
        padding:25px;
    }
    #contact-box p{
        font-size:17px;
    }
    footer #ftr-btn .signup-btn a{
        width:60%;
    }
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) {
    header #top-btn a{
        padding: 10px 15px;
    }
    .main-img{
        height: 700px;
    }
    .main-img #main-txt #sub-txt{
        font-size: 20px;
    }
    .main-img #main-txt #sub-txt span{
        font-size: 26px;;
    }
    .open-txt{
        font-size: 20px;
    }
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width:1024px) 
  and (orientation: landscape) {
  
  .main-img{
    height:700px;
  }
}
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1180px) 
  and (orientation: landscape) {
  header .logo{
    width:30%;
  }
  header .logo img{
    width:100%;
  }
  .main-img{
    height:800px;
  }
  #page-img{
    width:30%;
  }
  .main-img #main-txt{
    width:60%;
  }
  #page-img img{
    width:90%;
  }
  .main-img #img-flex{
    width:100%;
  }
  .main-img #main-txt{
    padding-top:50px;
  }
  .main-img #ftr-btn .signup-btn a{
    margin-bottom: 0;
  }
      header .logo .sp-logo{
        display: block;
        letter-spacing: 10px;
    }
    header .logo .pc-logo{
        display: none;
    }
    header .logo .sp-logo span{
        display: block;
        font-size:25px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1024px) 
  and (min-height: 1366px) and (max-height: 1366px) {
    .main-img{
        height:900px;
    }
    .main-img #main-txt{
        height:590px;
    }
    header .logo span{
        font-size:24px;
    }
}
@media screen 
  and (min-width: 1133px) 
  and (max-width: 1133px) 
  and (min-height: 744px) 
  and (max-height: 744px) {
    .main-img{
        height: 800px;
    }
}