@charset "UTF-8";
/* ヘッダー */
/* @font-face {
    font-family: 'Noto Sans';
    src: url('./static/NotoSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('./static/NotoSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
} */

html {
    scroll-behavior: smooth;
}
.h1{
    margin: 0;
}
body{
    width: 100%;
    margin: 0;
    font-family: 'Noto Sans', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
.privacy8{
    display: inline-block;
  align-items: center;
  gap: 0.5em; /* 要素間のスペースを調整 */
  flex-wrap: wrap; /* スマホなどで折り返し可能に */
}
header{

    display: flex;
    padding: 0px 64px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background-color: #2885E1;
}
.logo-1 img{
    width: 157px;
}
.logo{
    padding-left: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-background-backgroundr1, #FFF);
    }
.logo h1{
    color: var(--color-background-backgroundr1, #FFF);
    margin: 0;
    font-family: "Times New Roman";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.section1{
    display: flex;
    align-items: center;
    gap: 24px;
}

.section2{
    display: flex;
    height: 57px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
    align-items: center;
    gap: 24px;

}
a {
    text-decoration: none;
}
.section2 a {
    display: flex;
    height: 57px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #2886E1;
    display: flex;
    align-items: center;
    gap: 24px;

    text-align: center;
    /* font/regular/font regular 16px */
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

.contact-page-bt {
    display: flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    border-right: 2px solid #B45D1C;
    border-bottom: 2px solid #B45D1C;
    background: #F19B2B;
    color: #FFF;
    cursor: pointer; /* カーソルをポインターに */
}
.contact-page-bt img{
    width: 24px;
    height: 24px;
    aspect-ratio: 1/1;
}
.contact-page-bt a {
    text-decoration: none;
    display: flex;
    align-items: center;
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
}
.contact-page-bt:hover {
    background: #E38A1E;
}

.sp-ver{
    display: none;
}
.pc-ver{
    display: flex;
}
.site-header{
    position: absolute;
    height: 64px;
    width: 100%;
    top: 0px;
    align-items: center;
    background-color: transparent;
}

.fv{
    justify-content: center;
    position: relative;
    overflow: hidden;
    display: flex;
    padding-top: 123.27px;
    padding-bottom: 64px;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    background: linear-gradient(102deg, #2885E1 0%, #2A89E4 100%);
    z-index: 0;
}
.fv-rect {
    position: absolute;
    width: 580px;
    height: 580px;
    background: rgb(56 157 231);
    border-radius: 12px;
    transform: rotate(45deg);
    z-index: -1;
}
.rect1 {
    top: 270px;
    right: 100px;
background: rgba(85, 144, 198, 0.68);
mix-blend-mode: soft-light;
border-radius: 45px;
}
.img{
    z-index: 0;
}
.rect2 {
    top: -300px;
    left: 5%;
    width: 200px;
    height: 500px;
}

.rect3 {
    bottom: -300px;
    left: 40px;
    width: 180px;
    height: 600px;
}
.talent{
background-color: white;
}

.fv_left{
    width: 42%;
    margin-left: 24px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    gap: 40px;


}

.fv_right{
    z-index: 0;
}
.fv_right img{
    width: 100%;
    max-width: 700px;
}

.fv_left_section1{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    color: #FFF;

}
.fv_download {
    display: flex;
    position: relative;
    justify-content: center;
    flex-direction: column;
    margin-top: 32px;
    width: 100%;
}
.check{
    color: #333;
}

.microcopy {
    /* width: 302px;
    height: 40px; */
    font-size: 0.9722222222222222vw;
    position: absolute;
    color: #F19B2B;
    font-weight: bold;
    background: #FFFFFF;
    border-radius: 999px;
    display: inline-block;
    z-index: 2;
    left: 45px;
    top :-28px;
    display: flex;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;

}
.microcopy:after{
    content: "";
    position: absolute;
    right: 0;
    bottom: -15px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #FFFFFF transparent transparent transparent;
    border-width: 8px 7px ;
  }

.download-button  {
    display: flex;
    width: 100%;
    max-width: 380px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #F19B2B;
    color: white;
    padding: 20px 0px;
    font-weight: 700;
    font-size: 18px;
    border-radius: 8px;
    text-decoration: none;
    border-right: 4px solid #B45D1C;
    border-bottom: 4px solid #B45D1C;
    transition: background 0.3s ease;
}

.button-text img{
    width: 32px;
    height: 32px;

}

.download-button:hover {
    background: #e88a0f;
}

.free-label {
    background-color: white;
    color: #F19B2B;
    padding: 4px 10px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 999px;
}

.button-text {
    font-size: 1.9444444444444444vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}


.fv_left_section1 div{
    color: #FFF;


    font-family: "Noto Sans";
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
}
.fv_left_section1 h1{
    margin: 0;
    display: flex;
    padding: 0px 23.804px;
    justify-content: center;
    align-items: center;
    font-family: "Noto Sans";
    font-size: 72px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 115.2px */
    background: var(--Linear, linear-gradient(102deg, #60B8DB 0%, #054394 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fv-word1{
    display: flex;
    width: 600px;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans";
    font-size: 2.8vw;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
}
.fv-word2{
    color: #FFF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans";
    font-size: 2.09vw;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 48px */
}
.main{
    display: flex;
    padding: 96px 0px;
    padding-bottom: 120px;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    align-self: stretch;
}
.daw{
    display: flex;
}
.daw p{
    color: #505050;

    /* font/bold/font bold 32px */
    font-family: "Noto Sans";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 48px */
}
p{
    margin: 0;
}
.onayami{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}
.onayami1 {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    background: #FFF;
    flex-wrap: wrap;
}
.word1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}
.onayami1-1 {
    display: flex;
    width: 283px;
    padding: 40px 28px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    flex-shrink: 0;
    background: #FFF;
    border-radius: 24px;
    border: 3px solid #D9D9D9
}

.onayami1-1 img{
    height: 181px;
}


.onayami1-3{
    display: flex;
    width: 345px;
    padding: 40px 28px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    flex-shrink: 0;
    border-radius: 24px;
    border: 3px solid
}

.hutoi{
    color: #000;
    /* font/bold/font bold 20px */
    font-family: "Noto Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
}

.hosoi{
    display: flex;
    width: 512px;
    max-width: 512px;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    align-self: stretch;
    color: #333;
    /* font/regular/font regular 16px */
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}
.hosoi2{
    display: flex;
    width: 288px;
    max-width: 512px;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    align-self: stretch;
    color: #333;
    /* font/regular/font regular 16px */
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}
.word3{
    color: #505050;
    /* font/bold/font bold 32px */
    font-family: "Noto Sans";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 48px */
}

.word4{
    color: #00113F;

    /* font/bold/font bold 48px */
    font-family: "Noto Sans";
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 72px */
}

    .word5{
        color: #505050;
        font-family: "Noto Sans";
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }


.function{
    display: flex;
    padding: 96px 10px 120px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--color-background-background3, #E5F0FB);
    }
.function1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}
.function2{
        /* 768px以下の画面サイズで適用されるスタイル */
        display: flex;
    padding: 64px 16px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    align-self: stretch;
    background: var(--back4, #DFEBFF);
}
.function3{
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
    background:#FFF
}
.function4{
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}
.function4 img{
    width: 24px;
    height: 24px;
}
.function_p1{
    color: #333;

    /* font/bold/font bold 16px */
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
}
.function_p2{
    align-self: stretch;
    color: #333;

    /* font/regular/font regular 14px */
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}
.main3 img{
    width: 100%;
}
.main2{
    gap: 16px;
    width: 100%;
}
.sub{
    color: var(--color-main-main4, #2886E1);
    text-align: center;
    /* font/bold/font bold 24pxNoto Sans */
    font-family: "Noto Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    width: 100%;
    line-height: 150%; /* 36px */
}
.h2{
    margin: 0;
}
.subtitle{
    margin: 0;
    color: var(--color-main-main4, #2886E1);
    text-align: center;
    /* font/bold/font bold 48px */
    font-family: "Noto Sans";
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    width: 100%;
    line-height: 150%; /* 72px */
    padding-bottom: 80px;
}

.servicesp1{
    display: flex;
    width: 375px;
    padding-bottom: 64px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.servicesp0{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.servicesp2{
    display: flex;
    width: 343px;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}
.servicesp3{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}
.servicesp4{
    display: flex;
    width: 340px;
    align-items: center;
    gap: 16px;
}
.servicesp5{
    flex: 1 0 0;
    color: #636363;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    width: 100%;
    line-height: 150%; /* 24px */
}
.servicesp6{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 9.506px;
    align-self: stretch;
}
.servicesp6 img{
    width: 340px;
}
.servicesp7{
    display: flex;
    width: 66px;
    height: 72px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.servicesp7 img{
    display: flex;
    width: 66px;
    height: 72px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.servicesp8{
    width: 254.749px;
    color: #333;
    font-family: "Noto Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 36px */
}



.service{
    display: flex;
    padding-top: 48px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}
.service sub{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}
.sub{
    color: var(--color-main-main4, #2886E1);
    text-align: center;
    /* font/bold/font bold 24pxNoto Sans */
    font-family: "Noto Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 36px */
    padding-bottom: 16px;
}
.faq10{
    padding-bottom: 40px;
}
.service1{
    display: flex;
    padding: 0px 0px 120px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 56px;
    align-self: stretch;
}

.service2{
    height: 400px;
    width: 1080px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
}
.service2 img{
    width: 44%;
    }
.service3{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.service4{
    display: flex;
    align-items: center;
    gap: 32px;
}
.service4 img{
    width: 20%;
}
.service4 p{
    display: flex;
    height: 100px;
    flex-direction: column;
    justify-content: center;
    color: #333;

    font-family:"Noto Sans" ;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 60px */
}
.buttonSP{
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    padding: 64px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background:#2987E2;
    
}
.backgroundsp1{
    position: absolute;
    width: 320px;
    height: 320px;
    z-index: 0;
    top: 0px;
    left: 140px;
}
.backgroundsp1 img{
    width: 248px;
    height: 248px;
}
.backgroundsp2{
    position: absolute;
    right: 140px;
    width: 240px;
    height: 240px;
    z-index: 0;
    bottom: 40px;

}
.backgroundsp2 img{
    width: 300px;
    height: 300px;

}
.buttonwordsp1{
    align-self: stretch;
    color: #FFF;
    text-align: center;
    /* font/bold/font bold 20px */
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */

}

.buttonSPword{

}
.button{
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    padding: 72px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #2987E2
}
.background3 img{
    position: absolute;
    width: 35%;
    left: -40px;
    top: 60px;
    z-index: 1;
}
.background4 img{
    position: absolute;
    width: 35%;
    right: -40px;
    top: 0px;
    z-index: 1
}
.cta-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
    text-align: center;
    z-index: 2;
  }
  .cta-section img{
    width: 25px ;
  }
  
  .cta-microcopy {
    position: relative;        /* ← ::after がこの要素を基準に動く */
    display: inline-block;
    background-color: #FFF;
    color: #F19B2B;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 999px;
    display: inline-block;
    z-index: 2;
  }
  
  .cta-button {
    display: inline-flex;
    
    gap: 12px;
    padding: 16px 40px;
    background-color: #F19B2B;
    border-radius: 10px;
    border-right: 5px solid #B45D1C;
    border-bottom:  7.5px solid #B45D1C;
    text-decoration: none;
    color: #FFF;
    font-weight: 700;
    font-size: 18px;
    transition: background 0.3s ease;
  }
  
  .cta-button:hover {
    background-color: #e38a0f;
  }
  
  .cta-badge {
    background-color: #fff;
    color: #F19B2B;
    padding: 4px 16px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 999px;
  }
  
  .cta-text {
    font-size: 18px;
    padding-right: 14px;
  }
  
  .cta-note {
    font-size: 12px;
    color: #fff;
    margin-top: 32px;
  }

.check{
    color: #333;
}
.button1{
    width: 100%;
    color: #FFF;
    text-align: center;
    /* font/bold/font bold 32px */
    font-family: "Noto Sans";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 48px */
    z-index: 2;
}

.buttonword1{
    width: 100%;
    color: #FFF;
    text-align: center;
    /* font/bold/font bold 32px */
    font-family: "Noto Sans";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 48px */
}

.buttonword2{
    color: #FFF;
    /* font/regular/font regular 14px */
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
}
.bg-img{
    background-image: url("img/background.png");
}

.faq {
margin-top: 80px;

}

.question_list{
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #2886E1;
    /* font/bold/font bold 20px */
    font-family: "Noto Sans";
    font-size: 1.4vw;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
}
.faq-accordion {
    max-width: 1080px;
    margin: 0 auto;
}
.question_text{
    display: flex;
    gap: 8px;
    color: #00113F;
}
.panel {
        align-items: center;
        border: 1px solid #2886E1;
        border-radius: 12px;
        margin-bottom: 16px;
        padding: 16px 32px;
        width: 100%;
        box-sizing: border-box;

}
.panel-header {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
}
.panel-header:hover {
    background: #FFFFFF;
}

.icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon span {
    display: block;
    background-color: #2886E1;  /* 既存の青色を使用 */
    width: 100%;
    height: 1px;
    transition: all 0.4s ease;
}

/* 横線 */
.icon span:nth-of-type(1) {
    transform: translateX(15px);
}

/* 縦線 */
.icon span:nth-of-type(2) {
    transform: rotate(-90deg);
}

/* アクティブ時は縦線を回転させて非表示に */
.panel-header.active .icon span:nth-of-type(2) {
    transform: rotate(0deg);
}

.panel-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.panel-content.active {
  max-height: 500px;
}
.panel-body {
    padding: 16px 36px 16px 88px;
    background-color: #E5F0FB;
    border-radius: 12px;
}

        .subtitle1 {
            color: var(--color-main-main4, #2886E1);
            margin-bottom: 80px;
            margin-top: 0px;
            text-align: center;
            font-family: "Noto Sans";
            font-size: 48px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%;
        }
.question_list img{
    width: 40px;
}
@media screen and (max-width: 768px){
    .subtitle1 {
            color: var(--color-main-main4, #2886E1);
            margin-bottom: 40px;
            margin-top: 0px;
            text-align: center;
            font-family: "Noto Sans";
            font-size: 28px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%;
        }
    .Form {
        display: flex;
        /* width: 1080px; */
        padding: 32px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        border-radius: 24px;
        background: #FFF;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
    }
}
@media screen and (min-width: 1200px){
.Form {
    width: 1080px;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    display: flex;
    /* width: 1080px; */
    padding: 64px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    border-radius: 24px;
    background: #FFF;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
}
.Form-Item{
    display: flex;
}
}
@media screen and (max-width: 480px) {
    .Form {
    margin-top: 40px;
    }
}


@media screen and (max-width: 768px) {
    .Form-Item {
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
    align-items: center;
}
.Form {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 1rem;
    display: flex;
    /* width: 1080px; */
    /* padding: 64px; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    border-radius: 24px;
    background: #FFF;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
}
}

.Form-Item {
    padding-bottom: 20px;
    width: 100%;
    align-items: center;
    gap: 28px;
}
.textarea-group{
    align-items: flex-start;
    gap: 28px;
    padding-bottom: 0px;
}
@media screen and (max-width: 480px) {
    .Form-Item {
    max-width: 1080px;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
    }
}

.Form-Item-Label {
    width: 100%;
    max-width: 248px;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 18px;
    color: #333;
}
@media screen and (max-width: 480px) {
    .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
    }
}
.Form-Item-Label.isMsg {
    /* margin-top: 8px;
    margin-bottom: auto; */
}
@media screen and (max-width: 480px) {
    .Form-Item-Label.isMsg {
    margin-top: 0;
    }
}
.Form-Item-Label-Required {
    border-radius: 6px;
    margin-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 16px;
    width: 48px;
    display: inline-block;
    text-align: center;
    background: #f19b2b;
    color: #fff;
    
}
@media screen and (max-width: 480px) {
    .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
    }
}
.Form-Item-Input {
    border: 1px solid #2886E1;
    border-radius: 6px;
    margin-right:10px;
    padding-left: 1em;
    padding-right: 1em;
    height: 48px;
    flex: 1;
    width: 90.8%;
    background: #fff;
    font-size: 18px;
    display: flex;
    height: 64px;
    /* padding: 12px 32px; */
    align-items: center;
    align-self: stretch;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
      height: 40px;
      flex: inherit;
      font-size: 15px;
    }
}


.Form-Item-InputWrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}
#error-area {
  min-height: 24px; /* 高さを確保してフォーム全体の高さを固定 */
}
.error-text {
    display: block;
     height: 1.4em;               /* 常に一定の高さを持たせる */
    visibility: hidden;          /* 初期は非表示だが場所は確保される */
    color: red;
    font-size: 14px;
    margin-top: 4px;
    line-height: 1.4;
}
.error-text.visible {
visibility: visible;
}

  .Form-Item-Textarea {
    text-align: left; /* 左揃え */
    vertical-align: top; /* 上揃え */
    border: 1px solid #2886E1;
    border-radius: 6px;
    padding-left: 1em;
    padding-right: 1em;
    flex: 1;
    width: 90%;
    background: #fff;
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    padding-top: 1em;
    line-height: 1; /* 行間を1に設定し、中央揃えを防ぐ */
    white-space: pre-wrap; /* 折り返しを有効にする */
  word-wrap: break-word; /* 長い単語を折り返す */
  height: 200px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Textarea {
      margin-top: 18px;
      margin-left: 0;
      height: 200px;
      flex: inherit;
      font-size: 15px;
    }
  }
.privacy1{
    color: var(--color-main-main4, #2886E1);
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%; /* 19.2px */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    align-items: center;
}
.privacy2{
    color: var(--color-font-font2, #333);
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%; /* 19.2px */
}
.privacy3{
    display: flex;
    align-items: center;
}
 @media screen and (min-width: 769px) {
.privacy-group {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  line-height: 1.5;
}
}
.Form-Btn {
    border-radius: 6px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 280px;
    display: block;
    letter-spacing: 0.05em;
    background: #f19b2b;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
  }
  @media screen and (max-width: 480px) {
    .Form-Btn {
      margin-top: 24px;
      padding-top: 8px;
      padding-bottom: 8px;
      width: 160px;
      font-size: 16px;
    }
  }
  .inquiry{
    display: flex;
    padding: 96px 16px 120px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 80px;
    background: linear-gradient(180deg, #FFF 50%, #E5F0FB 50%);
    }

.Form-Item-Label-Required2{
    border-radius: 6px;
    margin-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 48px;
    display: inline-block;
    text-align: center;
    background: #9CB4CB;
    color: #fff;
    font-size: 14px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
    }
    .Form-Item-Label-Required2 {
        border-radius: 4px;
        margin-right: 8px;
        padding-top: 4px;
        padding-bottom: 4px;
        width: 32px;
        display: inline-block;
        text-align: center;
        background: #9CB4CB;
        color: #fff;
        font-size: 10px;
    }
}

.textarea{
    height: 200px;
}
.submit-button {
    display: flex;
    width: 240px;
    border: none;
    padding: 16px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    border-right: 2px solid #B45D1C;

    border-bottom: 4px solid #B45D1C;

    background: var(--color-main-main2, #F19B2B);
    color: #FFF;

    text-align: center;
    /* font/bold/font bold 20px */
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
}

.submit-button:hover {
    background: #d97b01;
}






.button_last{
    text-align: center;
    justify-items: center;
}
.button_last img{
    height: 14px;
    padding-top: 40px;
}
input[type="checkbox"] {
    width: 24px; /* サイズ変更 */
    height: 24px;
    cursor: pointer;
    accent-color: #2886E1; /* チェックマークの色 */
}

/* ホバー時の変化 */
input[type="checkbox"]:hover {
    opacity: 0.8;

}





.footer {
    display: flex;
    padding: 40px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background-color: #E5F0FB; /* 淡い水色 */
    text-align: center;
}

    .footer-container {
        display: flex;
        padding: 40px 0px;
        justify-content: center;
        align-items: center;
        gap: 80px;
        align-self: stretch;
    }
    
    .footer-logo {
        max-width: 195px; /* ロゴのサイズ調整 */
    }
    
    .footer-nav {
        display: flex;
        gap: 20px;
        justify-content: center;
    }
    
    .footer-link {
        text-decoration: none;
        color: #007bff; /* 青色 */
        font-weight: bold;
    }
    
    .footer-link:hover {
        text-decoration: underline;
    }
    
    .footer-copyright {
        font-size: 16px;
        color: #666;
    }
.footer-copyright{
    color: #2987E2;

    text-align: center;
    font-family: "Noto Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 12px */
}
.footer3{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    }




    @media screen and (max-width: 768px) {
        /* メディアクエリ：768px以下用 */
    header {
        align-items: center;
    height: auto;
    padding: 8px 16px;
    }

    .logo {
    justify-content: space-between;
    padding-left: 0px;
    }

    #menu__toggle {
        opacity: 0;
        border-radius: 8px;
    }
    #menu__toggle:checked + .menu__btn > span {
        transform: rotate(45deg);
        border-radius: 8px;
    }
    #menu__toggle:checked + .menu__btn > span::before {
        top: 0;
        transform: rotate(0deg);
        border-radius: 8px;
    }
    #menu__toggle:checked + .menu__btn > span::after {
        top: 0;
        transform: rotate(90deg);
        background-color: #2886E1; /* ← 好きな青でもOK */
        border-radius: 8px;
    }
    #menu__toggle:checked ~ .menu__box {
        right: 0 !important;
    }
    .menu__btn {
        position: absolute;
        top: 38px;
        right: 62px;
        width: 32px;
        height: 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        z-index: 1100;
        background: none;
        border: none;
        border-radius: 8px;
    }
    
    .menu__box {
        display: block;
        position: fixed;
        top: 0;
        /* right: -100%; */
        width: 300px;
        height: 100%;
        margin: 0;
        padding: 80px 0;
        list-style: none;
        background-color: #e5f0fb;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
        transition-duration: .25s;
    }
    .menu__item {
        display: block;
        padding: 12px 24px;
        color: #003366;
        font-family: 'Noto Sans', sans-serif;
        font-size: 20px;
        font-weight: 600;
        text-decoration: none;
        transition-duration: .25s;
    }
    .menu__item:hover {
        background-color: #CFD8DC;
    }
    



     /* ナビ全体を非表示 */
    .section1 {
    display: flex;
    padding-top: 12px;
    }

     /* 開いたときに表示 */
    .section1.active {
    display: flex;
    }

    .section2 {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    }

    .section2 a {
            display: flex
        ;
            height: 57px;
            padding-left: 32px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            color: #2886E1;
            display: flex
        ;
            align-items: center;
            gap: 24px;
            text-align: center;
            font-family: "Noto Sans";
            font-size: 16px;
            font-style: normal;
            font-weight: bold;
            line-height: 150%;
    }
.footer-link2{
    display: none;
}
    .contact-page-bt {
        display: none;
    margin-top: 12px;
    justify-content: center;
    width: 100%;
    background: #666;
    padding: 10px;
    border-radius: 6px;
    }
        .fv{
        flex-direction: column;
        padding-bottom: 16px;
        padding-top: 0px;
        }
        .fv_left{
            margin-left: 0;
            width: 343px;
            padding-top: 82.41px;
            align-items: center;
            }
        .fv_left_section1 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 16px;
            color: #FFF;
        }
        .fv_left_section1 div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 16px;
        flex-shrink: 0;
        }
        .fv_left_section1 p{
            color: #FFF;
            width: auto;
            text-shadow: 0px 2px 5.8px rgba(0, 0, 0, 0.25);
            font-family: "Noto Sans";
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
             line-height: 160%; /* 32px */
        }
        .fv_left_section1 h1{
            font-family: "Noto Sans";
            font-size: 44px;
            font-style: normal;
            font-weight: 700;
             line-height: 160%; /* 83.2px */
            padding: 0 12px;
        }
        .download-button{
            width: 100%;
        }
        .button-text{
            color: #FFF;
            text-align: center;
            font-family: "Noto Sans";
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
             line-height: 120%; /* 28.8px */
        }
        .microcopy{
            color: #F19B2B;
            font-family: "Noto Sans";
            font-size: 10px;
            font-style: normal;
            font-weight: 700;
             line-height: 150%; /* 18px */
            display: flex;
            height: 26px;
            padding: 4px 16px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            left: 64px;
            top: -32px;
        }
        .fv_right img {
            width: 100%;
            max-width:343px;
            height: 265px;
    }
    .sp-ver{
        display: flex;
    }
    .pc-ver{
        display: none;
    }
    }



    /* 書き換え */
    .menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100%;
        background: #e5f0fb;
        transition: right 0.3s ease;
        z-index: 1000;
      }
      
      .menu.open {
        right: 0;
      }
      
      .menu__btn {
        position: absolute;
        top: 38px;
        right: 62px;
        width: 32px;
        height: 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        z-index: 1100;
        background: none;
        border: none;
        border-radius: 8px;
      }
      
      .menu__btn span {
        height: 3px;
        width: 100%;
        top: 0px;
        background: #fff;
        display: block;
        border-radius: 4px !important; /* ← 強制的に適用 */
      }
      
    .menu__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    }

    .menu__close::before,
    .menu__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 4px;
    background-color: #2886E1;
    border-radius: 4px; /* ← 角丸指定ここ！ */
    transform-origin: center;
    }

    .menu__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
    }

    .menu__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
    }
    
      body.menu-open {
        position: fixed;
        top: 0;
        width: 100%;
        overflow: hidden;
    }
    .menu.open + .menu__btn {
        display: none;
    }
      /* ここまで */


    .menu__box {
        display: block;
        position: fixed;
        top: 0;
        /* right: -100%; */
        width: 300px;
        height: 100%;
        margin: 0;
        padding: 80px 0;
        list-style: none;
        background-color: #e5f0fb;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
        transition-duration: .25s;
        z-index: 3;
    }
    .menu__item {
        display: block;
        padding: 12px 24px;
        color: #fff;
        font-family: 'Noto Sans', sans-serif;
        font-size: 20px;
        font-weight: 600;
        text-decoration: none;
        transition-duration: .25s;
    }
    .menu__item:hover {
        background-color: #CFD8DC;
    }






    .function2{
        display: none;
    }
    .servicesp1{
        display: none;
    }
    .buttonSP{
        display: none;
    }

    @media screen and (max-width: 768px) {
        .fv-rect {
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgb(56 157 231);
            border-radius: 12px;
            transform: rotate(45deg);
            z-index: -1;
        }
        
        .rect1 {
        top: 280px;
        left: 200px;
        position: absolute;
        width: 400px;
        height: 400px;
        background: rgb(56 157 231);
        border-radius: 12px;
        transform: rotate(45deg);
        z-index: -1;
        
        }
        .rect2 {
            top: -220px;
            left: -80px;
            width: 300px;
            height: 300px;
        }
        .kinou1 img{
            padding-bottom: 40px;
            height: 194px;
        }
        .function{
            display: none !important;
        }
        .function2{
            display: flex;
            gap: 0px;
        }
        .service{
            display: none;
        }
        .servicesp1{
            display: flex;
            margin: auto;
            margin-top: 64px;
        }
        .buttonSP{
            display: flex;
            margin: auto;
        }
        .button{
            display: none;
        }

        /* section2 */
        .main{
            gap: 24px;
        }
        .onayami{
            gap: 8px;
        }
        .onayami p{
            color: #505050;
            font-family: "Noto Sans";
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 30px */
        }
        .word3{
            color: #505050;
            font-family: "Noto Sans";
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 30px */
        }
        .word4{
            color: #00113F;
            font-family: "Noto Sans";
            font-size: 24px;
            margin: 0 8px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 36px */
        }
        .onayami1-1{
            display: flex;
            width: 288px;
            height: auto;
            padding: 36px 28px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 24px;
            align-self: stretch;
        }
        .onayami1-1 img{
            display: flex;
            height: 237px;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }
        .word1{
            justify-content: center;
            align-items: center;
        }
        .hutoi{
            color: #333;
            font-family: "Noto Sans";
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 24px */
        }
        .hosoi{
            display: flex;
            width: 288px;
            flex-direction: column;
            justify-content: center;
            flex: 1 0 0;
            align-self: stretch;
            color: #333;
            font-family: "Noto Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%; /* 21px */
        }
.hosoi2{
            display: flex;
            width: 288px;
            flex-direction: column;
            justify-content: center;
            flex: 1 0 0;
            align-self: stretch;
            color: #333;
            font-family: "Noto Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%; /* 21px */
        }
        /* faq */
        .faq{
            margin: 64px 16px;
        }
        .sub{
            font-family: "Noto Sans";
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 24px */
        }
        .subtitle{
            color: var(--color-main-main4, #2886E1);
            text-align: center;
            font-family: "Noto Sans";
            font-size: 28px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 42px */
            padding-bottom: 40px;
        }
        .question_list{
            color: var(--color-main-main4, #2886E1);
            font-family: "Noto Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 21px */
        }
        .panel-body{
            display: flex;
            padding: 12px 16px;
            align-items: center;
            gap: 8px;
            align-self: stretch;
        }
        .question_text p{
            color: var(--color-main-main1, #00113F);
            font-family: "Noto Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%; /* 18px */
        }
        .inquiry{
            padding: 0px 16px 0px 16px;
            gap: 40px;
        }
        .Form{
            margin-top: 0;
            padding-top: 24px;
            padding-bottom: 40px;
            padding-left: 16px;
            padding-right: 16px;
            gap: 16px;
        }
        .Form-Item-Input{
            margin-top: 8px;
        }
        .Form-Item-Label{
            padding-bottom: 0;
        }
        .Form-Item{
            padding-bottom: 0;
        }
        .privacy3{
            align-items: center;
        }
        .privacy2{
        }
        .privacy-group{
            display: flex;
            gap: 8px;
        }
        
        .footer-container{
            flex-direction: column;
                display: flex;
                padding: 0px 0px;
                justify-content: center;
                align-items: center;
                gap: 24px;
                align-self: stretch;
        }
        .footer3{
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
    @media screen and (min-width:481px){
    .Form-Item-Label-Required2 {
        border-radius: 6px;
        margin-right: 8px;
        padding-top: 4px;
        padding-bottom: 4px;
        width: 48px;
        display: inline-block;
        text-align: center;
        background: #9CB4CB;
        color: #fff;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 16px;
    }}


    @media screen and (min-width:769px) {
        .word3{
        color: #505050;
        /* font/bold/font bold 32px */
        font-family: "Noto Sans";
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 48px */
    }
    .privacy8{
        display: flex;
    }
    .word5{
        color: #505050;
        font-family: "Noto Sans";
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }
        header{
            background: transparent;
            display: flex;
            padding: 32px 64px;
            justify-content: space-between;
            align-items: center;
            align-self: stretch;
        }
        .menu__btn {
            position: absolute;
            display: none;
            top: 24px;
            right: 24px;
            width: 32px;
            height: 32px;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
            z-index: 1100;
            background: none;
            border: none;
        }
        .footer-link2{
            display: flex;
        }
        .section1{
            padding-right: 64px;
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .section2{
            display: flex;
            height: 57px;
            padding: 10px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            display: flex;
            align-items: center;
            gap: 24px;
        }
        a {
            text-decoration: none;
        }
        .section2 a {
            display: flex;
            height: 57px;
            padding: 10px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            color: #FFF;
            display: flex;
            align-items: center;
            gap: 24px;
            text-align: center;
            /* font/regular/font regular 16px */
            font-family: "Noto Sans";
            font-size: 1.112vw;
            font-style: normal;
            font-weight: 400;
            line-height: 150%; /* 24px */
        }
        .section3 {
            display: flex;
            padding: 11px 15px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border-radius: 6px;
            border-right: 2px solid #B45D1C;
            border-bottom: 2px solid #B45D1C;
            background: #F19B2B;
            cursor: pointer; /* カーソルをポインターに */
        }
        .section3 img{
            width: 24px;
            height: 24px;
            aspect-ratio: 1/1;
        }
        .section3 a {
            text-decoration: none;
            display: flex;
            align-items: center;
            color: #FFF;
            font-size: 1.2vw;
            font-weight: 700;
        }
        .section3:hover {
            background: #E38A1E;
        }
        .section3 p{
                color: #FFF;
                text-align: center;
                font-family: "Noto Sans";
                font-size: 1.111vw;
                font-style: normal;
                font-weight: 700;
                line-height: 150%;
        }
        .section4{
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .section4 p{
        color: #636363;
        text-align: center;
        font-family: "Noto Sans";
        font-size: 1.7vw;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 19.2px */
        }
        .section4 img{
        width: 1.6vw;
        height: 1.6vw;
        }
        .hamburger-menu{
            display: none;
            }
    }
    @media (min-width: 769px) and (max-width: 1200px) {
    
    .hosoi {
    display: flex;
    /* width: 512px; */
    max-width: 512px;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    align-self: stretch;
    color: #333;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    }
        .rect1 {
            top: 180px;
            right: 100px;
            position: absolute;
            width: 500px;
            height: 500px;
            background: rgb(56 157 231);
            border-radius: 12px;
            transform: rotate(45deg);
            z-index: -1;
        }
        .background3 img{
            position: absolute;
            width: 35%;
            left: -40px;
            top: 120px;
            z-index: 0;
        }
        .background4 img{
            position: absolute;
            width: 35%;
            right: -80px;
            top: 90px;
            z-index: 0
        }

        .fv_left_section1 h1{
            margin: 0;
            display: flex;
            padding: 0px 23.804px;
            justify-content: center;
            align-items: center;
            font-family: "Noto Sans";
            font-size: 5vw;
            font-style: normal;
            font-weight: 700;
            line-height: 160%; /* 115.2px */
            background: var(--Linear, linear-gradient(102deg, #60B8DB 0%, #054394 100%));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .menu__btn{
            display: none;
        }
        .Form {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        display: flex;
        width: 720px;
        padding: 64px 48px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        border-radius: 24px;
        background: #FFF;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
        }
        .service2{
            height: 240px;
            width: 720px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 80px;
        }
        .service4 p{
            display: flex;
            height: 100px;
            flex-direction: column;
            justify-content: center;
            color: #333;
        
            font-family: Roboto;
            font-size: 22px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 60px */
        }
        .service3 {
            display: flex
        ;
            flex-direction: column;
            align-items: flex-start;
            gap: 0px;
        }
}

@media (min-width: 769px)  and (max-width:1024px){
    .rect1 {
        top: 180px;
        right: 40px;
        position: absolute;
        width: 460px;
        height: 460px;
        background: rgb(56 157 231);
        border-radius: 12px;
        transform: rotate(45deg);
        z-index: -1;
        
    }
    .microcopy {
        font-size: 14px;
        position: absolute;
        color: #F19B2B;
        font-weight: bold;
        background: #FFFFFF;
        border-radius: 999px;
        display: inline-block;
        z-index: 2;
        left: 40px;
        top: -28px;
        display: flex
;
        padding: 8px 20px;
        justify-content: center;
        align-items: center;
    }
    .rect3 {
        bottom: -280px;
        left: 100px;
        width: 120px;
        height: 480px;
    }
}

@media screen and (max-width: 375px){
    .rect1 {
                    top: 280px;
            left: 20px;
            position: absolute;
            width: 340px;
            height: 340px;
            background: rgb(56 157 231);
            border-radius: 12px;
            transform: rotate(45deg);
            z-index: -1;
    }
    .panel-header {
        width: 100%;
        padding: 13px 13px;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border: none;
        cursor: pointer;
        font-size: 16px;
        text-align: left;
    }

    
    .panel {
        align-items: center;
        border: 1px solid #2886E1;
        border-radius: 12px;
        margin-bottom: 16px;
        padding: 3px;
        width: 100%;
        box-sizing: border-box;
    }
    .download-button {
        width: 86%;
        display: flex;
        max-width: 436px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #F19B2B;
        color: white;
        padding: 20px 24px;
        font-weight: 700;
        font-size: 18px;
        border-radius: 8px;
        text-decoration: none;
        border-right: 4px solid #B45D1C;
        border-bottom: 4px solid #B45D1C;
        transition: background 0.3s ease;
    }
    /* 横線 */
.icon span:nth-of-type(1) {
    transform: translateX(12px);
}
    .faq{
        margin: 0px;
    }
    .faq10{
    padding: 64px 16px;
    }
    
}
@media screen and (max-width: 500px){
.privacy3{
    flex-direction: column;
    align-items: start;
}
.privacy2{
    margin-left: 28px;
}}
.cta-microcopy::after {
    content: "";
    position: absolute;
    bottom: -7px; /* 下に配置 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid white; /* 吹き出しと同じ色 */
}
.sp-only {
  display: none;
}
@media screen and (max-width: 512px) {
            .microcopy {
            color: #F19B2B;
            font-family: "Noto Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            gap: 0px
            ;
            line-height: 150%;}
.privacy3 {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
    .privacy2 {
        margin-left: 0px;
    }
.privacy-text {
color: #333;
}
    input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #2886E1;
    }
.privacy-group {
    display: flex;
    align-items: flex-start;
    gap: 8px; /* チェックボックスと文の間に余白 */
    font-size: 14px;
    line-height: 1.6;
}
    .sp-only {
    display: inline;
}
}
@media (min-width: 375px)  and (max-width:520px){
.panel-header {
        width: 100%;
        gap: 8px;
        padding: 8px 8px;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border: none;
        cursor: pointer;
        font-size: 16px;
        text-align: left;
    }
    .panel {
        align-items: center;
        border: 1px solid #2886E1;
        border-radius: 12px;
        margin-bottom: 16px;
        padding: 3px;
        width: 100%;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 1100px){
        .microcopy {
    font-size: 14px;
    position: absolute;
    color: #F19B2B;
    font-weight: bold;
    background: #FFFFFF;
    border-radius: 999px;
    display: inline-block;
    z-index: 2;
    left: 60px;
    top: -28px;
    display: flex
;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
}
}
@media screen and (max-width: 1240px){
        .microcopy {
    font-size: 16px;
    position: absolute;
    color: #F19B2B;
    font-weight: bold;
    background: #FFFFFF;
    border-radius: 999px;
    display: inline-block;
    z-index: 2;
    left: 80px;
    top: -28px;
    display: flex
;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
}
}
@media screen and (max-width: 1440px){
    .microcopy {
    font-size: 16px;
    position: absolute;
    color: #F19B2B;
    font-weight: bold;
    background: #FFFFFF;
    border-radius: 999px;
    display: inline-block;
    z-index: 2;
    left: 40px;
    top: -28px;
    display: flex
;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
}
}
@media screen and (max-width: 900px){
    .microcopy {
        font-size: 12px;
        position: absolute;
        color: #F19B2B;
        font-weight: bold;
        background: #FFFFFF;
        border-radius: 999px;
        display: inline-block;
        z-index: 2;
        left: 55px;
        top: -28px;
        display: flex;
        padding: 8px 20px;
        justify-content: center;
        align-items: center;
    }
}

.color-bar{
    background: linear-gradient(102deg, #2885E1 0%, #2A89E4 100%);
}
.header-page{
    padding-top: 64px;
    padding-bottom: 64px;
}
.privacy-page{
    display: flex;
    padding: 232px 180px 120px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 80px;
    background-color: #e5f0fb;
}
.privacy-content{
    display: flex;
    padding: 64px 40px 96px 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    border-radius: 16px;
    background: #FFF;
}
.privacy-content h1{
    color: var(--color-main-main4, #2886E1);
    text-align: center;
    font-family: "Noto Sans";
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    justify-content: center;
    margin: auto;
    margin-bottom: 32px;
}
.privacy-content p{
    color: var(--color-font-font2, #333);
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
}
.privacy-box{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}
.privacy-box h2{
    color: var(--color-font-font2, #333);
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin: 0;
}
.privacy-box p{
    color: var(--color-font-font2, #333);
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
}

.privacy-subtitle{
    color: var(--color-font-font2, #333);
    /* font/regular/font regular 20px */
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    margin-left: 12px;
}
.privacy-text{
    margin-left: 31px;
}
.privacy-box ol{
    margin-left: 24px;
}
.privacy-box li{
    color: var(--color-font-font2, #333);
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
}

.privacy-address a{
    color: var(--color-main-main4, #2886E1);
    /* font/regular/font regular 20px */
    font-family: "Noto Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    }
.return-button-text img{
    width: 16px;
    height: 16px;
    }
    @media screen and (max-width: 768px) {
        .header-page{
            height: 78px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .privacy-page{
            display: flex;
            padding: 120px 16px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 32px;
        }
        .privacy-content{
            display: flex;
            padding:46px 16px 64px 16px;
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            align-self: stretch;
        }
        .privacy-content h1{
            color: var(--color-main-main4, #2886E1);
            text-align: center;
            font-family: "Noto Sans";
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 30px */
            margin: auto;
        }
        .privacy-content p{
            color: var(--color-font-font2, #333);
            font-family: "Noto Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%; /* 18px */
        }
        .privacy-box{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            align-self: stretch;
        }
        .privacy-box h2{
            color: var(--color-font-font2, #333);
            font-family: "Noto Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 21px */
        }
        .privacy-box p{
            color: var(--color-font-font2, #333);
            font-family: "Noto Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
         
        }
        
        .privacy-subtitle{
            color: var(--color-font-font2, #333);
            font-family: "Noto Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%; /* 18px */
        }
        .privacy-text{
            margin-left: 31px;
        }
        .privacy-box ol{
            margin-left: 24px;
        }
        .privacy-box li{
            color: var(--color-font-font2, #333);
            font-family: "Noto Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%; /* 18px */
        }
        
        .privacy-address a{
            color: var(--color-main-main4, #2886E1);
            font-family: "Noto Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%; /* 18px */
            }
    }

    .contact-page{
        display: flex;
        padding: 96px 0px 120px 0px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 80px;
        flex: 1 0 0;
    }
    .contact-group{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        align-self: stretch;
    }
    .contact-title{
        color: var(--color-main-main4, #2886E1);
        leading-trim: both;
        text-edge: cap;
        font-family: "Noto Sans";
        font-size: 48px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin: 0;
    }
    .contacgt-lead{
        color: #636363;
        text-align: center;
        font-family: "Noto Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 200%; /* 36px */
    }
    .return-button1{
        display: flex;
        width: 328px;
        height: 64px;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 16px;
        border-radius: 8px;
        border-right: 4px solid #10579C;
        border-bottom: 6px solid #10579C;
        background: var(--color-main-main4, #2886E1);
        
    }
    .return-button-text{
        color: #FFF;
        text-align: center;
        font-family: "Noto Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 24px */
        display: contents;
        display: flex;
        width: 292px;
        height: 42px;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 16px;
        border-radius: 8px;
        border-right: 4px solid #10579C;
        border-bottom: 6px solid #10579C;
        background: var(--color-main-main4, #2886E1);
    }
    /* ホバー時のスタイル */
        .return-button-text:hover {
        background: #1e6bc3; /* 少し濃い青に変化 */
        transform: translateY(-2px); /* 少し上に浮くような効果 */
        cursor: pointer;
    }

    @media screen and (max-width: 768px) {
        .contact-page{
            display: flex;
            padding: 120px 16px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 64px;
        }
        .contact-group{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            align-self: stretch;
        }
        .contact-title{
            color: var(--color-main-main4, #2886E1);
            text-align: center;
            font-family: "Noto Sans";
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 36px */
        }
        .contacgt-lead{
            color: #636363;
            text-align: center;
            font-family: "Noto Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 180%; /* 25.2px */
        }
        .return-button-text{
            display: flex;
            width: 296px;
            height: 64px;
            padding: 8px 16px;
            justify-content: center;
            align-items: center;
            gap: 16px;
        }
        .footer-copyright{
            margin-top: 40px;
        }
    }
    @media screen and (max-width: 768px){
    .menu__btn > span,
    .menu__btn > span::before,
    .menu__btn > span::after {
        display: block;
        position: absolute;
        width: 100%;
        border-radius: 8px;
        height: 3px;
        background-color: white; /* ← 白に変更 */
        transition: background-color 0.25s, transform 0.25s;
        transition-duration: .25s;
    }
    .menu__btn > span::before {
        content: '';
        top: -8px;
        height: 3px;
        border-radius: 5px;
    }
    .menu__btn > span::after {
        content: '';
        top: 8px;
        height: 3px;
        border-radius: 5px;
    }
}
@media (min-width: 512px)  and (max-width:768px){

input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #2886E1;
    }

.privacy-group {

  gap: 16px;
  font-size: 16px;
  line-height: 1.5;
}
.privacy-group{
        
            display: flex;
            gap: 8px;
        }
    }
@media (min-width: 769px) and (max-width: 1200px) {
    
    .hosoi {
    display: flex;
    width: 288px;
    max-width: 512px;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    align-self: stretch;
    color: #333;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}}