@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,.deco2{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,.deco2 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;}

/*-------------------目的と導入効果-----------------*/
/*目的*/
#effect{position:relative;}
#effect::before{
    content:"";
    position: absolute;
    left:0;
    bottom:0px;
    width:100%;
    height:35%; 
    background:#004da1;
    z-index:-1;
}
.w1280{max-width:1280px;margin:auto;}
#effect .imgR{justify-content: space-between;align-items: flex-start;}
#effect .imgR img{order:2;width:clamp(250px,calc(515/1280*100vw),515px);}
#effect .imgR > div{width:calc(100% - clamp(270px,calc(560/1280*100vw),560px));}
/*効果・メリット*/
h3.circle{position:relative;z-index:0;}
h3.circle::before{content:"";display:block;width:clamp(36px,calc(62/1500*100vw),62px); height:clamp(36px,calc(62/1500*100vw),62px);border-radius: 50px;background:#e5edf5;position:absolute;left:clamp(-30px,calc(-30/1500*100vw),-15px);top:clamp(-8px,calc(-8/1500*100vw),0px);z-index:-1;}
h3.circle_w{display: flex;align-items: center;justify-content: center;gap:20px;font-size: clamp(20px, calc(24/1500*100vw),24px);}
h3.circle_w::before,.circle_w::after{content:"";display: block;aspect-ratio: 1 / 1;width: clamp(18px, 2vw, 26px); background:#e5edf5;flex-shrink: 0;border-radius: 20px;}
.deco2{background:none;padding:0;margin:0;}
.merit > div{display:flex;flex-direction: column;}
.merit .bgblue{padding:20px;flex-grow: 1;}
/*-------------------4つの柱-----------------*/
.point{position:relative;align-items: flex-start;justify-content: space-between;}
.point_lco{position:sticky;top:130px; left:0;width:40%; max-width: 500px;}
.point_rco{width:55%;display:block;margin-left: auto;}
.h3_circle{border-bottom:1px solid #004da1;position:relative;padding-bottom:5px;text-shadow:3px 3px 0 #FFF, -3px -3px 0 #FFF,-3px 3px 0 #FFF, 3px -3px 0 #FFF,0px 3px 0 #FFF,  0-3px 0 #FFF,-3px 0 0 #FFF,31px 0 0 #FFF;}
.h3_circle span.blue{color:#004da1;font-family: Arial, Helvetica, "sans-serif";font-style: italic;font-size:clamp(18px,calc(23/1500*100vw),23px); line-height: 1.0;}
.h3_circle span.blue span{font-size:clamp(20px,calc(30/1500*100vw),30px);font-style: italic;}
.h3_circle::before{content:"";display:block;width:clamp(36px,calc(62/1500*100vw),62px); height:clamp(36px,calc(62/1500*100vw),62px);border-radius: 50px;background:#e5edf5;position:absolute;left:clamp(-30px,calc(-30/1500*100vw),-15px);top:10px;z-index:-1;}
/*-------------------業務フロー-----------------*/
.flow > div{display:flex;flex-direction: column;}
.flow .boxborder{background:#FFF;border-radius: 12px;flex-grow: 1;}

/*----------スポット型研修サービス-------------*/
/*ブラッシュアップ研修*/
#spotservice{background:url("../images/coaching/spotservice_bg.webp") no-repeat top left /contain;padding-top: clamp(50px,calc(150/1500*100vw),150px);}
#spotservice .inner-box.bgw{border-radius: clamp(60px,calc(200/1500*100vw),200px) clamp(60px,calc(200/1500*100vw),200px) 0 0 ;}
#spotservice .imgL{justify-content: space-between;align-items: flex-start;}
#spotservice .imgL img{width:clamp(250px,calc(600/1500*100vw),600px);}
#spotservice .imgL > div{width:calc(100% - clamp(270px,calc(650/1500*100vw),650px));}
#spotservice .brushupbg{position:relative;z-index:0;padding:0 15px 60px;}
#spotservice .brushupbg::after{content:"";display:block;width:100%;height: 50%;border-radius:20px;background:#e5edf5;position:absolute;left:0;bottom: 0;z-index:-1;}
.w1280.flexbox.c3 >div{display:flex;flex-direction: column;}
.h4_spot{background:#3078b7; color:#FFF;text-align: center;padding:15px;border-radius: 12px 12px 0 0 ;}
ul.list.bgw{padding:20px;flex-grow: 1; border-radius: 0 0 12px 12px;}
/*新規開業研修*/
#newopen{position:relative;z-index: 0;}
#newopen::after{content:"";display:block;width:100%;height: 250px;ius:20px;background:#004da1;position:absolute;left:0;bottom: 0;z-index:-1;}
#spotservice .imgR{justify-content: space-between;align-items: center;}
#spotservice .imgR img{order:2;width:clamp(250px,calc(600/1280*100vw),600px);}
#spotservice .imgR > div{width:calc(100% - clamp(270px,calc(650/1280*100vw),650px));}

/*料金表*/
.w1000{width:100%;max-width: 1000px; 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;}
.notice li{position:relative;padding-left: 1.2em;   }
.notice li::before{content: "※";position: absolute;left: 0; top: 0; font-size: 0.9em;}
/*よくあるご質問*/
#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%;}
    /*目的と導入効果------------*/
    /*目的*/
    #effect .imgR img{order:1;width:80%;max-width:400px;margin:0 auto 20px;}
    #effect .imgR > div{order:2;width:100%;}
   /*-------------------4つの柱-----------------*/
    .point{position:relative;align-items: flex-start;justify-content: space-between;}
    .point_lco{position:static;width:100%;max-width:100%;margin:30px auto 0; padding:30px;order:2; background:#e5edf5;border-radius:12px;}
    .point_lco img{display:block;width:80%; max-width: 350px;margin:auto;}
    .point_rco{display:block;width:100%;margin-left:inherit;}
    /*スポット研修サービス*/
    #spotservice .imgL img,#spotservice .imgR img{display:block;width:80%; max-width: 350px;margin:0 auto 20px;}
    #spotservice .imgL > div,#spotservice .imgR > div{width:100%;}
    #spotservice .imgR > img{order:1;}
    #spotservice .imgR > div{order:2;}
    #spotservice .brushupbg{padding: 15px;}
    #spotservice .brushupbg::after,#newopen .w1280::after{height: 100%;border-radius:20px;background:#e5edf5;position:absolute;left:0;bottom: 0;z-index:-1;}
    /*新規開業研修*/
    #newopen .w1280{padding: 15px;background:#e5edf5;border-radius:20px;}
    #newopen::after{display:none;}

}
/* 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;}
    /*スポット研修サービス*/
    #spotservice .ti2{letter-spacing: 1px;font-size:19.5px;}
}