@charset "UTF-8";
body{
    font-family: "M PLUS 2", sans-serif;
}
a{
    text-decoration: none;
    color: #3f3f3f;
}
p{
    font-size: clamp(0.875rem, 0.8143rem + 0.2589vw, 1.125rem);
}
h2{
    font-size: clamp(1.875rem, 1.7233rem + 0.6472vw, 2.5rem);
    font-weight: normal;
}
h3{
    color: #13B7F6;
    font-size: clamp(1.5rem, 1.409rem + 0.3883vw, 1.875rem);
    font-weight: bold;
    letter-spacing: -0.75px;
}
img{
    width: 100%;
	height: auto;
}
ul{
    list-style: none;
}
.inner{
    max-width: 1200px;
    margin: 0 auto;
}
@media(max-width:959px){
    .inner{
        max-width: 98%;
    }
}
@media(max-width:428px){
    h2{
        font-size: 24px;
        margin-top: 10px;
    }
    h3{
        font-size: 20px;
    }
}
/* header */
.header {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.top-logo {
    background: #fff;
    padding: 13px 35px 10px;
    border-radius: 28px;
    max-width: 290px;
    box-shadow: 5px 10px 6px #00000029;
}
.top-logo img{
    vertical-align: bottom;
}

.nav{
    border-radius: 28px;
    box-shadow: 5px 10px 6px #00000029;
    background: #fff;
}
.nav-menu li a img{
    width: 40px;
    vertical-align: bottom;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 10px;
}

.nav-menu li a {
    text-decoration: none;
    color: #333;
    padding: 15px 0;
}
.nav-menu li{
    list-style: none;
    margin: 10px;
}

.nav-menu li a:hover{
    color: #13B7F6;
    transition: color .3s
}

.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    width: 50px;
    height: 50px;
}

.hamburger-menu span {
    height: 4px;
    width: 25px;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.hamburger-menu span:nth-child(1){
    position: absolute;
    top: 0;
}
.hamburger-menu span:nth-child(2) {
    opacity: 1;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 25%;
    left: 25%;
    background: #ff357f;
}
.hamburger-menu span:nth-child(3){
    position: absolute;
    bottom: 20px;
    background: #13B7F6;
}

.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(14px, 8px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(10px, -4px);
}

.menu-text {
    position: absolute;
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
    bottom: 5px;
}
.sp_mail_btn,
.sp_sns_btn{
    display: none;
}
@media (max-width: 1021px) {
    .nav-menu {
        position: fixed;
        top: 0;
        left: -150%;
        width: 100%;
        height: 100%;
        background: #fff;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        transition: left 0.3s ease-in-out;
        padding-left: 40px;
        margin: 0;
    }
    .sp_mail_btn,
    .sp_sns_btn{
        display: block;
    }

    .nav-menu.active {
        left: 0;
    }

    .hamburger-menu {
        display: flex;
        z-index: 5;
    }

    .header {
        justify-content: center;
    }

    .top-logo {
        margin: 0 auto;
    }
    .nav-menu li{
        margin: 0;
    }
    .nav-menu li a{
        display: inline-block;
    }
    .nav-menu li:nth-of-type(5),
    .nav-menu li:nth-of-type(6){
        margin: 0 auto;
        display: none;
    }
    .nav-menu li:nth-of-type(7) a{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px auto;
        border: 3px solid #13B7F6;
        border-radius: 9999px;
        padding: 15px 30px;
        line-height: 1.8;
        text-decoration: none;
        font-weight: normal;
        box-shadow: 4px 4px 6px #00000029;
        color: #13B7F6;
        font-weight: bold;

    }
    .nav-menu li:nth-of-type(7),
    .nav-menu li:nth-of-type(8){
        margin: 0 auto;
    }
    .nav-menu li:nth-of-type(8) a{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px auto;
        border: 3px solid #00B900;
        border-radius: 9999px;
        padding: 10px 30px;
        line-height: 1.8;
        text-decoration: none;
        font-weight: normal;
        box-shadow: 4px 4px 6px #00000029;
        color: #00B900;
        font-weight: bold;
    }
    .sp_mail_btn a img{
        margin-right: 10px;
    }
    .sp_sns_btn img{
        margin-right: 20px;
    }
}
@media(max-width:767px){
    .top-logo{
        width: 200px;
        padding: 10px 20px;
    }
}
@media(max-width:428px){
    .header{
        justify-content: start;
    }
}
/* MV */
.top-mv{
    width: 100%;
}


.mv_txt{
    position: absolute;
    top: 25%;
    left: 100px;
}

/* キャッチコピー cp */
.cp{
    margin-top: 7.5rem;
    margin-bottom: 7.5rem;
}
.cp p{
    font-size: clamp(1.5rem, 1.409rem + 0.3883vw, 1.875rem);
    text-align: center;
}
.cp p span{
    font-size: clamp(1.75rem, 1.6286rem + 0.5178vw, 2.25rem);
    font-weight: medium;
    color: #13B7F6;
}
@media(max-width:959px){
    .cp{
        margin-top: 4.5rem;
        margin-bottom: 4.5rem;
    }
}
@media(max-width:428px){
    .cp{
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
    .cp p{
        font-size: 20px;
    }
    .top-logo{
        display: none;
    }
}

/* title h2 */
.title_container p{
    font-size: 90px;
    font-weight: bold;
    color: #13B7F6;
    line-height: 1.7;
    display: inline-block;
}
.title h2{
    text-align: center;
}
.title_container span{
    content: "";
    display: inline-block;
    width: 70px;
    height: 3px;
    background: #13B7F6;
    margin-bottom: 20px;
    margin-left: 10px;
}
@media(max-width:767px){
    .title_container p{
        font-size: 50px;
    }
    .title_container span{
        width: 50px;
        margin-bottom: 10px;
    }
}
/* Feature */
.Feature{
    margin-bottom: 160px
}

.sec1_area{
    width: 50%;
}
.sec1_area span{
    font-size: clamp(5.625rem, 5.1699rem + 1.9417vw, 7.5rem);
    font-weight: 800;
    color: #BDD2EE;
    letter-spacing: -6px;
}
.sec1_area h3{
    margin-bottom: 50px;
}
.sec1_txt p{
    padding: 5px;
    margin-bottom: 75px;
}


.sec1_box{
    margin-top: 70px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.sec1_img,
.sec1_img_2,
.sec1_img_3{
    position: relative;
    z-index: 1;
    max-width: 450px;
}

.sec1_img::after{
    content: "";
    width: 350px;
    height: 200px;
    background: transparent linear-gradient(270deg, #0089D4 0%, #0040C1 0%, #14BAF8 100%) 0% 0% no-repeat padding-box;
    display: block;
    position: absolute;
    top: -50px;
    right: -10px;
    z-index: -1;
    pointer-events: none;
}
.sec1_img_2::after{
    content: "";
    width: 350px;
    height: 200px;
    background: transparent linear-gradient(90deg, #0089D4 0%, #0040C1 0%, #14BAF8 100%) 0% 0% no-repeat padding-box;
    display: block;
    position: absolute;
    top: -50px;
    left: -10px;
    z-index: -1;
    pointer-events: none;
}
.sec1_img_3::after{
    content: "";
    width: 350px;
    height: 200px;
    background: transparent linear-gradient(180deg, #0089D4 0%, #0040C1 0%, #14BAF8 100%) 0% 0% no-repeat padding-box;
    display: block;
    position: absolute;
    bottom: -50px;
    left: -10px;
    z-index: -1;
    pointer-events: none;
}
@media(max-width:959px){
    .Feature{
        margin-bottom: 100px;
    }
    .sec1_box{
        margin-top: 40px;
    }
    .sec1_area span{
        line-height: 1;
    }
    .sec1_txt p{
        margin-bottom: 40px;
    }
    .sec1_img,
    .sec1_img_2,
    .sec1_img_3{
        max-width: 300px;
    }
    .sec1_img::after,
    .sec1_img_2::after,
    .sec1_img_3::after{
        width: 200px;
        height: 150px;
    }
    .sec1_img::after{
        top: -25px;
        right: 0;
    }
    .sec1_img_2::after{
        top: -25px;
        left: 0;
    }
    .sec1_img_3::after{
        bottom: -25px;
        left: 0;
    }
}
@media(max-width:767px){
    .sec1_box{
        flex-direction: column;
    }
    .sec1_area{
        width: 95%;
        display: contents;
    }
    .sec1_txt  h3{
        margin-bottom: 25px;
    }
    .sec1_txt p{
        margin-bottom: 20px;
    }
    .sec1_txt{
        order: 2;
        margin-top: 10px;
    }
    .sec1_img{
        order: 1;
    }
    .sec1_img_2{
        order: 2;
    }
    .sec1_img_3::after{
        left: 100px;
        top: -25px;
    }
    .Feature{
        margin-bottom: 80px;
    }
}
@media(max-width:428px){
    .sec1_area span{
        font-size: 50px;
        letter-spacing: 0.1rem;
        margin-bottom: 5px;
    }
    .sec1_img,
    .sec1_img_2,
    .sec1_img_3{
        width: 250px;
    }
}

/* btn-a */
.btn-a a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    border: 3px solid;
    border-radius: 9999px;
    max-width: 250px;
    padding: 10px 25px;
    font-family: "Noto Sans Japanese";
    color: #fff;
    line-height: 1.8;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    background: linear-gradient(270deg, #3bade3 0%, #576fe6 25%, #9844b7 51%, #ff357f 100%);
    background-position: 99% 50%;
    background-size: 200% auto;
    transition: all 0.3s ease-out;
    box-shadow: 4px 4px 6px #00000029;
}
.btn-a a:hover {
    color: #fff;
    background-position: 1% 50%;
}
.btn-a a:after {
    content: '';
    width: 50px;
    border-top: 2px solid #ffffff;
    position: absolute;
    top: 50%;
    right: 0;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
@media(max-width:959px){
    .btn-a a{
        max-width: 225px;
    }
    .btn-a a::after{
        width: 30px;
    }
}
@media(max-width:767px){
    .btn-a a{
        max-width: 200px;
    }

}

/* btn-b */
.cta{
    text-align: center;
}
.btn-b{
    max-width: 600px;
    height: 90px;
    text-align: center;
    background: transparent linear-gradient(90deg, #0089D4 0%, #14BAF8 100%) 0% 0% no-repeat padding-box;
    margin: 0 auto;
    border-radius: 9px;
    transition: .2s
}
.btn-b:hover{
    transform: translateY(5px);
}
.cta p{
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 1rem;
}
.btn-b a{
    display: block;
    width: 100%;
    padding-top: 28px;
    padding-bottom: 28px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}
@media(max-width:959px){
    .btn-b{
        max-width: 450px;
    }
}
@media(max-width:767px){
    .cta p{
        font-size: 20px;
        margin-bottom: 8px;
    }
    .btn-b{
        max-width: 80%;
        height: auto;
    }
    .btn-b a{
        padding-top: 18px;
        padding-bottom: 18px;
    }
}
/* テストボタン */
/* About */
.About{
    margin-top: 160px;
    margin-bottom: 160px;
}

.banner_box {
    max-width: 750px;
    margin: 0 auto;
    box-shadow: 4px 4px 6px #00000029;
    position: relative;
}
.banner_box a::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    background: #3f3f3f;
    opacity: 0;
    transition: 0.3s;
}
.banner_box a:hover::before{
    opacity: 0.2;
}
.About_banner{
    position: relative;
    z-index: 1;
    margin-top: 65px;
}
.About_banner::after{
    display: block;
    content: "";
    width: 100%;
    height: 200px;
    background: transparent linear-gradient(180deg, #0089D4 0%, #14BAF8 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    bottom: -25px;
    z-index: -1;
}
.About_box{
    max-width: 900px;
    margin: 60px auto 70px;
}
.About_box ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: space-around;
    gap: 20px;
}
.About_box ul li{
    width: 250px;
    text-align: center;
    padding: 30px 0;
    border: 1px solid #3f3f3f;
    border-radius: 12px;
    box-shadow: 4px 4px 6px #00000029;
    color: #0089D4;

}
@media(max-width:959px){
    .About{
        margin-top: 100px;
        margin-bottom: 100px;
    }
    .banner_box{
        max-width: 95%;
    }
    .About_banner::after{
        height: 100px;
    }
    .About_box ul li{
        width: 45%;
        padding: 30px 0;
    }
}
@media(max-width:767px){
    .About{
        margin-top: 80px;
        margin-bottom: 80px;
    }
    .About_box ul{
        gap: 10px;
    }
}
@media(max-width:428px){
    .About_banner{
        margin-top: 35px;
    }
    .About ul li {
        padding: 15px 0;
    }
}

/* Case study */
.Case_study{
    margin-top: 160px;
    background: #EDFBFF 0% 0% no-repeat padding-box;
    padding-top: 100px;
}

.Case_img{
    width: 450px;
}
.Case_study_container{
    margin-top: 75px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.Case_study_01{
    width: 50%;
}
.Case_study_title span{
    font-size: 36px;
    font-weight: bold;
    color: #3f3f3f;
}
.Case_txt span{
    display: inline-block;
    font-size: 18px;
    color: #fff;
    padding: 5px 15px 6px;
    background: transparent linear-gradient(180deg, #0089D4 0%, #14BAF8 100%) 0% 0% no-repeat padding-box;
    border-radius: 4px;
    margin-top: 40px;
    margin-bottom: 10px;
    position: relative;
}
.Case_txt span::before{
    content: "";
    display: block;
    width: 7px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    inset: 50% 0 0 0%;
}
.Case_txt{
    margin-bottom: 70px;
}

@media(max-width:959px){
    .Case_study{
        margin-top: 100px;
        padding-top: 50px;
    }
    .Case_img{
        width: 300px;
    }
}
@media(max-width:767px){
    .Case_study{
        margin-top: 80px;
        padding-top: 35px;
    }
    .Case_study_container{
        flex-direction: column;
        margin-top: 45px;
    }
    .Case_study_01{
        width: 95%;
    }
    .Case_study_title h3{
        font-size: 20px;
    }
    .Case_txt span{
        margin-top: 20px;
    }
    .Case_txt{
        margin-bottom: 40px;
    }
    .Case_img{
        order: -1;
    }
}
@media(max-width:428px){
    .Case_txt span{
        font-size: 1rem;
    }
}

/* Price */
.Price{
    background: #EDFBFF;
    padding-top: 160px;
    padding-bottom: 160px;
}

.Price_container{
    background-color: #fff;
    margin: 0 auto;
    max-width: 900px;

}
.Price_txt_box{
    text-align: center;
    margin-top: 50px;
    padding: 50px 0 70px;
    box-shadow: 4px 4px 6px #00000029;
}

.Price_a{
    display: inline-block;
    width: 160px;
    font-size: 28px;
    color: #ffffff;
    padding: 9px;
    background: transparent linear-gradient(180deg, #0089D4 0%, #14BAF8 100%) 0% 0% no-repeat padding-box;
    margin-right: 20px;
}
.Price_txt {
    display: flex;
    align-items: center;
    justify-content: center;
}
.Price_txt p{
    display: inline-block;
    font-size: 48px;
    color: #01449B;
    font-weight: bold;
}
.yen,
.user{
    font-size: 30px;
}

.Price_cc{
    margin-top: 30px;
    font-size: 30px;
    font-weight: 600;

}
.Price_txt_box .btn-b{
    margin-top: 50px;
}

@media(max-width:959px){
    .Price{
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .Price_container{
        max-width: 95%;
    }
    .Price_txt_box{
        margin-top: 30px;
        padding: 30px 0 45px;
    }
    .Price_a{
        width: 140px;
        padding: 4px;
        font-size: 24px;
    }
    .Price_txt p{
        font-size: 30px;
    }
    .yen,
    .user{
        font-size: 22px;
    }
    .Price_cc{
        font-size: 24px;
    }
    .Price_txt_box .btn-b{
        margin-top: 40px;
    }
}
@media(max-width:767px){
    .Price{
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .Price_txt{
        flex-direction: column;
    }
    .Price_cc{
        font-size: 20px;
        margin-bottom: 15px;
    }
    .Price_a{
        margin-right: 0;
        border-radius: 7px;
    }
    .Price_txt_box{
        margin-top: 20px;
        padding: 20px 0 30px;
    }
    .Price_txt_box .btn-b{
        margin-top: 25px;
    }
}
@media(max-width:428px){
    .Price_a{
        font-size: 20px;
        width: 100px;
    }
}
/* よくある質問 */
.Q-A{
    max-width: 1200px;
    margin: 0 auto;
}
.Q-A_case{
    max-width: 900px;
    margin: 0 auto;
    padding-top: 25px;
    padding-bottom: 140px;
}

.faq_container{
    margin-top: 50px;
    margin-bottom: 100px;
}

details {
    --arrow-size: 18px;
    --anime-speed: 0.3s;
    margin-bottom: 30px;
  }

  details summary {
    box-sizing: border-box;
    position: relative;
    display: block;
    font-weight: 700;
    padding: 1.5em calc(var(--arrow-size) + 3em) 1.5em 3.5em;
    background: #fff;
    border: 1px solid #84b1de;
    cursor: pointer;
  }
  
  details summary::-webkit-details-marker {
    /* iOSで表示されるデフォルトの三角形アイコンを消す */
    display: none;
  }
  
  details summary::before {
    content: "Q.";
    position: absolute;
    top: 1.5em;
    left: 1.5em;
  }
  
  /* ※本来はafter要素の装飾で十分だが、iOSだと疑似要素に「transition」が効かないので、通常のタグを装飾 */
  details summary .ico {
    position: absolute;
    top: 0;
    right: 1.5em;
    bottom: 0;
    display: block;
    width: var(--arrow-size);
    height: calc(var(--arrow-size) * 0.6);
    /*aspect-ratio: 1/0.6;*/
    /* ※追記 Windows版Chrome124にてaspect-ratioを指定した要素と、position: absoluteの位置調整の組み合わせに不具合が発生したため、height値をcalcの計算に切り替え */
    margin: auto;
    background: #0a64be;
    clip-path: polygon(100% 13%, 50% 100%, 0 13%, 8% 0, 50% 73%, 92% 0);
    transition: transform var(--anime-speed);
  }

  details[open] summary .ico {
    transform: rotate(180deg);
  }

  details .s_inner {
    position: relative;
    padding: 1.5em 1.5em 1.5em 3.5em;
    background: #EDFBFF;
    margin-top: 10px;
  }

  details .s_inner::before {
    content: "A.";
    position: absolute;
    top: 1.5em;
    left: 1.5em;
    font-weight: 700;
  }
@media(max-width:959px){
    .faq_container{
        margin-top: 30px;
      }
      .Q-A{
        max-width: 95%;
      }
      .Q-A_case{
        padding-bottom: 100px;
      }
}
@media(max-width:767px){
    .Q-A {
        padding-top: 20px;
    }
    .Q-A_case{
        padding-top: 15px;
    }
    .faq_container{
        margin-bottom: 80px;
    }
}

/* News */
.News{
    max-width: 900px;
    margin: 0 auto;
}

.News_list{
    margin-top: 75px;
    margin-bottom: 160px;
}
.News_1{
    display: inline-block;
    font-size: 16px;
    padding: 2px 18px;
    border: 1px solid #3f3f3f;
    border-radius: 18px;
    background: #EDFBFF 0% 0% no-repeat padding-box;
    margin-left: 20px;
    margin-right: 20px;
}
.News_list ul li{
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
}
.News_list ul li a{
    display: inline-block;
    width: 100%;
}
.News_list ul li a::after{
    display: inline-block;
    content: ">";
    position: absolute;
    right: 20px;
    font-size: 1rem;
}
.n_txt:hover{
    color: #0a64be;
}
@media(max-width:959px){
    .News{
        max-width: 90%;
    }
    .title_container p{
        line-height: 1.2;
    }
    .News_list{
        margin-top: 60px;
        margin-bottom: 120px;
    }
}
@media(max-width:767px){
    .News_list ul li{
        font-size: 1rem;
    }
    .News_1{
        display: block;
        width: 100px;
        padding: 0 5px;
        text-align: center;
        margin: 5px 0;
    }
    .News_list ul li a{
        padding-bottom: 10px;
        border-bottom: 1px solid #3f3f3f;
    }
    .News_list ul li a::after{
        right: 5px;
        top: 25px;
    }
}
@media(max-width:428px){
    .News_list{
        margin-top: 35px;
        margin-bottom: 80px;
    }
}

/* footer */
footer{
    background: transparent linear-gradient(180deg, #0089D4 0%, #14BAF8 100%) 0% 0% no-repeat padding-box;
    position: relative;
}
.footer{
    padding-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.f_box1{
    width: 50%;
    padding: 25px;
}
.f_nav{
    margin-bottom: 25px;
}
.f_nav ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.f_nav ul li a,
.privacy{
    font-size: 15px;
    color: #ffffff;
}
.f_logo{
    width: 300px;
    margin-top: 1rem;
    padding: 5px;
}
.f_contact{
    width: 400px;
    padding: 24px;
    border: 1px solid #0a64be;
    background: #fff;
    text-align: center;
    box-shadow: 5px 5px 6px #00000029;
}
.f_contact p{
    font-size: 20px;
}
.f_contact span{
    font-size: 30px;
    font-weight: bold;
}
.f_contact p:last-child{
    font-size: 1rem;
}
.privacy a{
    font-size: 15px;
    display: inline-block;
    margin-right: 1rem;
    padding-bottom: 1rem;
    color: #ffffff;
}
small{
    display: block;
    text-align: center;
    margin-top: 45px;
    padding-bottom: 10px;
}
@media(max-width:959px){
    .footer{
        flex-direction: column;
    }
    .f_box1{
        width: 98%;
        padding: 20px 20px 10px;
        border-radius: 8px;
        background: #fff;
        margin-bottom: 20px;
    }
    .f_contact{
        width: 70%;
        padding: 18px;
    }
    .f_logo{
        width: 250px;
        margin: 0 auto;
    }
    .privacy{
        text-align: center;
    }
    .privacy a{
        color: #3f3f3f;
    }
    .f_nav ul li a{
        color: #3f3f3f;
    }
    .f_contact{
        background: #fff;
        border-radius: 8px;
    }
}
@media(max-width:767px){
    .f_contact{
        width: 95%;
    }

}
@media(max-width:428px){
    .f_nav ul{
        flex-direction: column;
    }
    .f_nav ul li{
        text-align: left;
        width: 100%;
        padding: 10px;
        border-bottom: 1px solid #3f3f3f;
    }
    .f_nav ul li a{
        display: inline-block;
        width: 100%;
    }
}

/******************************/
/** コンタクトフォームの装飾 **/
/******************************/
/*　フォーム全体　*/
#cf7-area {
width:100%;
margin: 0 auto;
font-family: "遊ゴシック","ヒラギノ角ゴ","メイリオ","MS Pゴシック",sans-serif;
max-width: 900px;
margin: 0 auto;
padding-top: 10rem;
}

.cf7-item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin: 0 0 1.75em;
}

.cf7-q {
width: 30%;
margin: 0 0 0 10px;
}

.cf7-a {
width: 60%;
}

/*　見出し　*/
.form-heading
{
width: 100%;
background-color: #191970;
border-left: 1em solid #6495ED;
border-radius: 2px;
color: #ffffff;
font-weight: bold;
padding: 1em .8em;
margin: 0 0 2em;
}

.form-heading p {
margin: 0;
}

/* 各項目共通 */
#cf7-area label{
font-weight:bold;
}

#cf7-area input[type="text"],#cf7-area input[type="email"],#cf7-area input[type="tel"],#cf7-area textarea {
background: #F0F8FF;
width:100%;
margin-left:10px;
}

#cf7-area input[type="text"]:focus,#cf7-area input[type="email"]:focus,#cf7-area input[type="tel"]:focus,#cf7-area textarea:focus {
background: #FFE4E1;
border: 2px solid #FF1493;
outline: 0;
}

#cf7-area input[type="checkbox"],#cf7-area input[type="radio"]{
appearance: auto;
}

#cf7-area .wpcf7-list-item {
display: block;
}

#cf7-area textarea{
height:200px;
padding: 0.625em 0.4375em;
}

.cf7-accept-check{
text-align: center;
margin: 50px auto;
}

.cf7-submit {
width: 40%;
margin: 0 auto;
text-align: center;
}

#cf7-area input[type="submit"]
{
width: 100%;
background-color: #191970;
color: #ffffff;
border-radius: 5px;
font-size: 1.2em;
padding: 1em 10px;
margin-bottom: 10rem;
}

#cf7-area input[type="submit"]:hover
{
background-color:#ffffff;
border: 2px solid #191970;
color:#191970;
}

.cf7-btn{
width: 40%;
margin: 0 auto;
text-align: center;
}

/*　必須ラベル　*/
.cf7-req{
font-size:.8em;
padding: 4px 6px;
background: #eb2a2a;
color: #ffffff;
margin-left: 10px;
display:inline-block;
}

@media screen and (max-width:768px){
.cf7-item {
display: block;
}
#cf7-area{
max-width: 600px;
}	
#cf7-area label{
display: block;
margin-bottom: 10px;
max-width: 700px;
}

.cf7-q {
width: 100%;
margin: 0;
}

.cf7-a {
width: 100%;
}

#cf7-area input[type="text"], #cf7-area input[type="email"], #cf7-area input[type="tel"], #cf7-area textarea{
margin-left: 0;
}

.cf7-submit{
width: 90%;
}
@media screen and (max-width:628px){
#cf7-area{
max-width: 490px;
}	
}
@media screen and (max-width:500px){
#cf7-area{
max-width: 410px;
}	
}
@media screen and (max-width:430px){
#cf7-area{
max-width: 380px;
}	
}