@charset "utf-8";
/*メイン画像*/
#main_area{position:relative; width:100%;height:clamp(200px,calc(300/1500*100vw),300px);overflow: hidden;}
#main_area picture,#main_area  img{display:block;object-fit: cover;width:100%;height:100% !important;object-position: left center;}
#main_area p{position: absolute;left:50%;top:50%; white-space: nowrap;transform: translateX(-50%) translateY(-50%);background:#004da1;border:2px solid #FFF;border-radius: 12px; padding:clamp(15px,calc(30/1500*100vw),30px) clamp(25px,calc(50/1500*100vw),50px);text-align: center;font-size:clamp(20px,calc(30/1500*100vw),30px);color:#FFF;}
#main_area span{font-size:clamp(14px,calc(16/1025*100vw),16px); font-family: Arial, Helvetica, "sans-serif";font-weight: bold;}

/*サービスコンセプト*/
#concept h2{line-height: 1.2;}
#concept h2 span{font-size:clamp(16px,calc(20/1500*100vw),20px);}
#concept .imgR{justify-content: space-between;align-items: flex-start;}
#concept .rco{width:clamp(300px,calc(500/1500*100vw),500px);aspect-ratio: 16 / 9;}
#concept .rco iframe{width:100%;height: 100%;}
#concept .lco{width:calc(100% - clamp(320px,calc(550/1500*100vw),550px));}
.bgbblue{padding:clamp(20px,calc(50/1500*100vw),50px);}
.bgbblue div{display:flex;flex-direction: column;}
#concept .bgw{padding:clamp(15px,calc(30/1500*100vw),30px); flex-grow: 1;}

/*解決する構造的問題*/
#problem{background:url("../images/bg_blue.svg") no-repeat left bottom / contain;}
.deco{font-family: Arial, Helvetica, "sans-serif";font-style: italic;font-size:clamp(18px,calc(23/1500*100vw),23px);color:#004da1;background:url("../images/h3_line.webp") no-repeat left bottom; padding-bottom:10px; margin-bottom: 10px;}
.deco span{font-family: Arial, Helvetica, "sans-serif";font-style: italic;font-size:clamp(20px,calc(30/1500*100vw),30px);}
.problem .boxborder{background:#FFF;border-radius: 12px;}
.problem > div{display:flex;flex-direction: column;}
.problem .boxborder{flex-grow: 1;}

/*サービス内容*/
#service{position:relative;}
#service::before{
    content:"";
    position: absolute;
    left:0;
    bottom:0px;
    width:100%;
    height:50%; /* ← 下半分だけ */
    background:#004da1;
    z-index:-1;
}
.w1350{width:100%;max-width: 1350px;}
.w1350 > div{max-width:620px; background:#FFF;z-index: 1;}
.wrap{position:relative;display: flex;flex-direction: column;padding:30px;}
.wrap h3{font-size:clamp(20px,calc(28/1500*100vw),28px);width:75%;margin:0 auto;padding:30px 0 0;background:#FFF;position:absolute;top:-80px;left:50%;transform: translateX(-50%); }
.wrap h3::after{content:"";display: block; width:100px;height:1px;background:#004da1;margin:10px auto 0;}
.w700{width:100%;max-width: 700px; margin:auto;}
table{width:100%;border-collapse: collapse;}
th, td{padding:10px;border:1px solid #004da1;}
th{background:#e5edf5;}
td:not(:first-child){text-align: center;}
.w700 p{padding:10px;}

/*成果が出る理由*/
.w1000{width:100%;max-width: 1000px; margin:auto;}
.reason .boxborder{border-radius: 12px;}
.reason > div{display:flex;flex-direction: column;}
.reason .boxborder{flex-grow: 1;}
/*お客様からの声*/
.slider-wrapper { position: relative; width: 100%; max-width: 900px; margin: 0 auto;padding:0 30px;}
.slider {display: flex; overflow: hidden; scroll-behavior: smooth;}
.slider > div {min-width: 100%; padding:50px 10px;}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #004da1;
    color: #fff;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.slider-btn.prev {left: -20px;}
.slider-btn.next {right: -20px;}
.slider h3{position:relative;padding:clamp(10px,calc(20/1000*100vw),20px);border-radius: 10px;margin-bottom: 20px;display:inline-block;margin-left:clamp(80px,calc(150/1000*100vw),150px);background:#e5edf5;}
.slider h3::before{position:absolute;bottom:0;left:clamp(-140px,calc(-140/1000*100vw),-70px);content:"";display:block;width:clamp(50px,calc(120/1000*100vw),120px);height:clamp(50px,calc(120/1000*100vw),120px);}
.voice1 h3::before{background:url("../images/home/voice1.webp") no-repeat left bottom/contain;}
.voice2 h3::before{background:url("../images/home/voice2.webp") no-repeat left bottom/contain;}
.voice3 h3::before{background:url("../images/home/voice3.webp") no-repeat left bottom/contain;}
.voice4 h3::before{background:url("../images/home/voice4.webp") no-repeat left bottom/contain;}
.voice5 h3::before{background:url("../images/home/voice5.webp") no-repeat left bottom/contain;}
.voice6 h3::before{background:url("../images/home/voice6.webp") no-repeat left bottom/contain;}
.voice_co{border:1px solid #004da1; padding:20px;display:flex; border-radius: 12px;justify-content: space-between;align-items: flex-start;}
.voice_co2{border:1px solid #004da1; padding:20px;border-radius: 12px;}
.voice_co img{width:clamp(130px,calc(250/768*100vw),250px);}
.voice_co div{width:calc(100% - clamp(145px,calc(270/768*100vw),270px));}

/*導入・業務フロー*/
.flow .boxborder{border-radius: 12px;}
.flow > div{display:flex;flex-direction: column;}
.flow .boxborder{flex-grow: 1;}
.youtube{margin:auto;width:clamp(350px,calc(560/1500*100vw),560px);aspect-ratio: 16 / 9;}
.youtube iframe{width:100%; height: 100%;}
/*業務フロー*/
#flow .bgblue{padding:clamp(15px,calc(60/1500*100vw),60px);}
#flow .bgw{padding:clamp(15px,calc(30/1500*100vw),30px);}
.ti_flow{display: flex;align-items: center;justify-content: center;gap:20px;font-size: clamp(20px, calc(30/1500*100vw), 30px);}
.ti_flow::before,.ti_flow::after{content:"";display: block;aspect-ratio: 1 / 1;width: clamp(18px, 2vw, 26px); background:#004da1;transform: rotate(45deg);flex-shrink: 0;}
.flowlist h4{font-size:clamp(18px,calc(22/1000*100vw),22px);}
.flowlist {
    list-style: none;
    counter-reset: step; /* 連番の初期化 */
    padding-left: 0;
}
.flowlist li {
    counter-increment: step; /* 各liでカウントを進める */
    position: relative;
    padding-left: 50px; /* テキストを丸の右にずらす */
    margin-bottom: 20px;
}
.flowlist li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 3px;
    width: 32px;
    height: 32px;
    background-color: #e5edf5; /* 薄青の丸 */
    color: #004da1; /* 数字の色 */
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-style: italic;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.w800{width:100%;max-width: 800px; margin:auto;}
/*よくあるご質問*/
#faq .w1000{padding:clamp(15px,calc(30/1000*100vw),30px);}
summary{position:relative;cursor: pointer;padding:10px 0 ;border-bottom: 1px dotted #004da1;color:#000;display: flex; /* iOS Safari のマーカー強制表示バグ対策 */align-items: center;} 
summary::-webkit-details-marker {display: none;}/* iOS Safari 対策：デフォルトの三角マーカーを消す */
summary:before{content:"Q  ";font-size:clamp(20px,calc(30/1500*100vw),30px);color:#004da1; font-family: Arial, sans-serif;;font-weight: 500; margin-right:10px;}
summary:hover{background:#eaf1f8;}
summary::after{position:absolute;right:0; top:50%;transform: translateY(-50%);content:"+ "; color:#004da1;transition: transform .3s;}
details[open] summary::after{transform: translateY(-50%) rotate(45deg);}
details[open] summary{background:#eaf1f8;}
details[open]  p{border:1px solid #dedede;padding:15px;margin-bottom: 15px;}

/* レスポンシブ
------------------------------------------------------------*/
/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
    /*解決する構造的問題*/
    #problem{background:url("../images/bg_blue.svg") no-repeat left bottom / cover;}
}
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    /*サービスコンセプト*/
    #concept .imgR{justify-content: space-between;align-items: flex-start;}
    #concept .rco{width:clamp(350px,calc(550/768*100vw),550px);margin:15px auto 0;}
    #concept .lco{width:100%;}
    .bgbblue div{width:100%;}
    /*サービス内容*/
    #service::before{
        height:65%; /* ← 下半分だけ */
    }
    .w1350 div{width:100%;}
    .w1350 > div{margin:auto;}
    /*お客様からの評価*/
    .slider-wrapper {margin: 0 auto;padding:0;}
    .slider > div {padding: 40px 10px;}
    .slidenav{text-alien:center;display:flex;justify-content: center;gap:30px;}
    .slider-btn {position:inherit;}
    .slider-btn.prev {left:inherit;top:inherit;}
    .slider-btn.next { right: inherit;top:inherit;}

}
/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    /*解決する構造的問題*/
    #problem{position:relative;background:url("../images/bg_blue.svg") no-repeat center / contain;} 
    #problem::after{content: ""; position: absolute; left: 0;  bottom: 0;  width: 100%;  height:50%; background:#e5edf5; z-index: -1;}
    /*お客様からの声*/
    .voice_co{flex-wrap: wrap;row-gap:10px;}
    .voice_co img{width:90%;max-width:250px; margin: auto;}
    .voice_co div{width:100%;}
}