html,
body,
div,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
dl,
dt,
dd,
ol,
ul,
li,
strong,
sub,
sup,
i,
small,
address,
time,
fieldset,
form,
label,
legend,
hr,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
header,
footer,
nav,
section,
article,
aside,
figure,
figcaption,
canvas,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-style: normal;
    font-weight: normal;
    vertical-align: baseline;
    }

article,
aside,
figure,
figcaption,
footer,
header,
nav,
section {
    display: block;
}

*,
*::before,
*::after {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

ul,
ol,
li {
    list-style: none;
    }

input,
textarea,
button {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

input[type="submit"],
input[type="button"],
button {
    cursor: pointer;
}

button{
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    color: #333;
    overflow-x: clip;

}
p{
    line-height: 28px;
}

main{
    width: 100%;
    overflow: hidden;
}

.u-inline_block{
    display: inline-block;
}




/* layout */
.l-form{
    position: fixed;
    width: 25%;
    margin: 0 auto;
    right: 0;
    top: 0;
    z-index: 999;
}
@media (max-width: 1279px) {
    .l-form{
        position: relative;
        width: 100%;
    }
}
@media (max-height: 915px) {
    .l-form{
        position: relative;
        width: 100%;
    }
}


.l-main{
    width: 75%;
}

@media (max-width: 1279px) {
    .l-main{
        width: 100%;
    }
}
@media (max-height: 915px) {
    .l-main{
        width: 100%;
    }
}

.l-main_wrapper{
    position: relative;
    overflow: hidden;
}

.l-footer{
    width: 100%;
}

@media (max-width: 1279px) {
    .l-footer{
        width: 100%;
    }
}

.l-container{
    max-width: 1200px;
    width: 82%;
    margin: 0 auto;
	z-index:2;
	position: relative;
}
@media (max-width: 1200px) {
    .l-container{
        width: 88%;
    }
}
@media (max-width: 768px) {
    .l-container{
        width: 92%;
    }
}



/* utility */
.u-font--blue{
    background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.u-font--green{
    color: #21B574;
}




/* header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.site-header__inner{
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

/* =========================
   左：ロゴ
========================= */
.hdr-logos{
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.hdr-logo img{
  display:block;
  height: 45px;
  width: auto;
}
.hdr-logo:nth-child(2) img{
  height: 42px;
}

/* =========================
   中：メニュー
========================= */
.hdr-nav{ 
  display: flex;
  align-items: center;
  gap: 0px;
  flex: 1;
  justify-content: center;
}

.hdr-nav a{
  color:#111;
  text-decoration:none;
  font-weight: 800;
  font-size: clamp(0.8rem, 0.85rem, 0.9rem);
  letter-spacing: .04em;
  padding: 4px 14px 6px;          /* ← 枠に見せるため余白を増やす */
  border-radius: 20px;        /* ← 角丸 */
  transition: all .2s ease;   /* ← なめらか変化 */
	white-space: nowrap;
}

/* ホバー時 */
.hdr-nav a:hover{
  background:#00a0d2;  /* 水色（画像に近い色） */
  color:#fff;          /* 文字を白に */
}


/* =========================
   右：ボタン2つ
========================= */
.hdr-ctas{
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  margin-left: auto; /* ★右端固定 */
}

/* 共通 */
.hdr-ctas a{
  text-decoration:none;
  display:flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 10px 18px rgba(0,0,0,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}

.hdr-ctas a:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(0,0,0,.18);
}



@media (max-width: 1400px){
	.hdr-logo img{
		height: 30px;
    width: auto;
	}
	.hdr-logo:nth-child(2) img{
  height: 29px;
}

}

/* =========================
   赤：詳細資料を受け取る
========================= */
.cta-doc{
  width: 270px;
  background:#f04522;
  color:#fff;
  position: relative;
}

.cta-doc::after{
  content:"";
  position:absolute;
  left:0;
  bottom:6px;
  width:100%;
  height:3px;
  background:#fff; /* 下ライン */
}

.cta-doc__sub{
  display:inline-block;
  background:#fff;
  color:#f04522;
  font-size: 12px;
  font-weight: 900;
  text-align:center;
  padding: 3px 8px;
  border-radius: 999px;
  width: 86%;
  margin: 12px auto 0px;
}

.cta-doc__main{
  text-align:center;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .04em;
  padding: 2px 12px 18px;
}

/* =========================
   黄：無料でお試し
========================= */
.cta-trial{
  width: 260px;
  background:#ffe100;
  color:#0b2a7a;
  position: relative;
}

.cta-trial::after{
  content:"";
  position:absolute;
  left:0;
  bottom:6px;
  width:100%;
  height:3px;
  background:#0b2a7a;
}

.cta-trial__sub{
  display:inline-block;
  background:#0aa0c8;
  color:#fff;
  font-size: 12px;
  font-weight: 900;
  text-align:center;
  padding: 3px 8px;
  border-radius: 999px;
  width: 86%;
  margin: 12px auto 0px;
}

.cta-trial__main{
  text-align:center;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .04em;
  padding: 2px 12px 18px;
}

@media (max-width: 1400px){
.site-header__inner{
	margin-left:22px;
	}
	
.hdr-nav{ 
  gap: 0.5rem;
}
	
.cta-doc{
  width: auto;
	min-width:230px;
	max-width:270px;
}	
.cta-trial{
  width: auto;
	min-width:230px;
	max-width:260px;
	}
.cta-doc__main,
.cta-trial__main {
  font-size: 1.175rem;
  padding: 0.025rem 0.75rem 0.5rem;
}
	
.cta-doc__sub,
.cta-trial__sub {
  font-size: 0.65rem;
  padding: 0.1575rem 0.5rem;
  margin: 0.55rem auto 0;
}
	
.cta-doc::after,.cta-trial::after{
  bottom:4px;
  width:100%;
  height:1px;
}
}
@media (max-width: 1200px){
	.hdr-nav{ 
  gap: 0;
}
}

/* =========================
   SP（簡易）
========================= */
@media (max-width: 980px){
  .site-header__inner{
    flex-wrap: wrap;
    justify-content: center;
  }

  .hdr-nav{
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 8px;
  }

  .hdr-ctas{
    order: 2;
    margin-left: 0;
  }
}

@media (max-width: 600px){
  .hdr-ctas{
    flex-direction: column;
    width: 100%;
  }

  .cta-doc,
  .cta-trial{
    width: 100%;
  }
}
/* form */

.p-form{
    background-color: #fff;
    padding: 20px;
    box-shadow: -8px 0px 6px 0px #7070704D;
}
@media (max-width: 1279px) {
    .p-form{
        background-color: #29ABE2;
        padding: 20px;
        box-shadow: none;
    }
    .p-form__inner{
        max-width: 1000px;
        margin: 0 auto;
        background-color: #fff;
        padding: 18px;
        box-shadow: -8px 0px 8px 0px #7070704D;
    }
}

@media (max-height: 1279px) {
    .p-form{
        background-color: #29ABE2;
        padding: 20px;
        box-shadow: none;
    }
    .p-form__inner{
        max-width: 1000px;
        margin: 0 auto;
        background-color: #fff;
        padding: 18px;
        box-shadow: -8px 0px 8px 0px #7070704D;
    }
}


.p-form__title{
    display: flex;
    align-items: center;
    justify-content: center;
}
.p-form__title img{
    max-width: 73px;
    margin-left: -20px;
}
.p-form__title p{
    font-size: 20px;
    font-weight: 700;
    text-align: left;
    margin-left: 20px;
}
.p-form__title p span{
    font-size: 24px;
}

.p-form__form{
    margin-top: 20px;
    max-height: 52.08vw;
    padding-bottom: 100px;
    overflow-y: scroll;
}

@media (max-width: 1279px) {
    .p-form__form{
        max-height: 100%;
        overflow-y: visible;
        padding-bottom: 0px;
    }
}
.c-form_item_label{
    margin-bottom: 4px;
}

.c-form_item_label label{
    font-size: 16px;
    font-weight: 700;
    color: #29ABE2;
    letter-spacing: 0.1em;
}
.c-form_item_label span{
    color: #fff;
    background-color: #29ABE2;
    border-radius: 3px;
    line-height: 1em;
    display: inline;
    padding: 0px 6px;
    font-size: 14px;
    font-weight: 700;
}

.c-form__item{
    margin-bottom: 15px;
}

.c-form_item_input .c-formInput{
    width: 100%;
    min-height: 55px;
    padding: 10px 5px 10px 17px;
    border: solid 1px #ccc;
}
.c-form_item_input .c-formInput::placeholder {
    font-size: 16px;
    color: #ccc;
    font-weight: 500;
}

.c-form__item ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.c-form__item ul li{
    max-width: 210px;
    width: 50%;
}
@media (max-width: 768px) {
    .c-form__item ul{
        margin-top: 15px;
    }

    .c-form__item ul li{
        width: 100%;
    }
}

.c-form__text{
    font-size: 15px;
    line-height: 1em;

}

input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.c-checkboxWrap{
    display: flex;
    margin-bottom: 10px;
}

.c-form_item_input textarea{
    width: 100%;
    height: 96px;
    border: solid 1px #ccc;
}
.c-form__item__agree{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.c-form_btn{
    width: 80%;
    height: 65px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    background-image: linear-gradient(to bottom, #FF0000 0%, #C1272D 100%);
    text-align: center;
    margin: 0 auto;
    display: block;
}
@media (max-width: 768px) {
    .c-form_btn{
        width: 100%;
        height: 65px;
        color: #fff;
        font-size: 17px;
        font-weight: 700;
        background-image: linear-gradient(to bottom, #FF0000 0%, #C1272D 100%);
        text-align: center;
        margin: 0 auto;
        display: block;
    }
}

.c-form_btn span{
    margin-right: 8px;
}

/* fv */

.p-fv{
    position: relative;
    text-align: center;
    width: 100%;
	background-color:#00A0D2;
}

@media (min-width: 1701px) {
.p-fv__img img{
	width:1685px;
	height:auto;
	}
}


@media (max-width: 1700px) {
.p-fv__img img{width:80%;}
}

@media (max-width: 1560px) {
.p-fv__img img{width:60%;}
}
@media (max-width: 1200px) {
.p-fv__img img{width:55%;}
}


.p-fv__slider__wrap{
    position: absolute;
    top: 0;
    background-color:transparent;
    padding: 20px 0;
    width: 100%;
	overflow: hidden;
}

.p-fv__slider{
	display: flex;
  align-items: center;
}
.p-fv__slider__item{
  flex: 0 0 auto;
  width: auto;              /* ← 固定幅をやめる */
  margin-right: 30px;       /* 余白だけ確保 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-fv__slider__item img{
  height: 100px;
  width: auto;              /* ← これ重要 */
  object-fit: contain;      /* ← 念のため */
}
@media (max-width: 1080px) {
    .p-fv__slider__item img{
        height: 70px;
    }
}

@media (max-width: 768px) {
    .p-fv__slider__wrap{
        bottom: 1%;
    }
    .p-fv__slider__wrap{
        padding: 8px 0;
    }
    .p-fv__slider__item img{
        height: 35px;
    }
}



.p-fv__cta{
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 2;
    bottom: 10%;
}



/* achievement */
.p-achievement{
background: linear-gradient(
  0deg,
  #dceef8 0%,
  #e1f0f9 33%,
  #eef7fc 69%,
  #ffffff 100%
);
  position: relative;
  padding:140px 0 60px;
  overflow: hidden; /* 波のはみ出しを整理 */
	z-index:1;
}
.p-achievement::before{
  content:"";
  position:absolute;
  inset:0;                       /* 全面 */
  background: url("../images/bg_wave.png") no-repeat center top;
  background-size: contain;        /* 全体にフィット */
  pointer-events:none;           /* クリック無効 */
  z-index:0;
	}

@media (max-width: 768px) {
    .p-achievement{
        background-image: url(../images/achievement_bg_sp.webp);
        padding: 30px 0 0;
    }
}
.p-achievement__img{
    margin: 0 auto;
    max-width: 1200px;
    width: 92%;
}
@media (max-width: 768px) {
    .p-achievement__img{
        width: 100%;
    }
}
.p-achievement__img__text{
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 45px;
}
@media (max-width: 768px) {
    .p-achievement__img__text{
        font-size: 10px;
        margin-top: 5px;
        margin-bottom: 30px;
    }
}

.p-achievement__service{
    display: flex;
    justify-content: center;
    width:96%;
    margin:  0 auto;
	position:relative;
	z-index:2;
}



.p-achievement__service__box{
    width: 48%;
    padding: 0 30px 50px;
    max-width:588.5px;
    position: relative;
}
.p-achievement__service__box:nth-child(2){
	margin-left:25px;
}
@media (max-width: 768px) {
    .p-achievement__service{
        flex-direction: column;
        width:92%;
    }
    .p-achievement__service__box{
        width: 100%;
        padding: 0 15px 30px;
    }
.p-achievement__service__box:nth-child(2){
	margin-left:0px;
}
	
}

.p-achievement__service__box::before{
    content: "";
    position: absolute;
    width: 100%;
    top: 18%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    box-shadow: 10px 10px 6px -1px #7070704D;
border-radius:60px;
	background-color:#ffffff;
}
@media (max-width: 768px) {
    .p-achievement__service__box::before{
        top: 15%;
    }
    .p-achievement__service__box:nth-child(1){
        margin-bottom: 20px;
    }
}
.p-achievement__service__box:nth-child(1):before{
background-image: linear-gradient(180deg, #ffffff1a, #29abe21a);
}
.p-achievement__service__box:nth-child(2):before{
    background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(154, 212, 182, 0.1) 28%,
    rgba(56, 170, 110, 0.1) 63%,
    rgba(0, 146, 69, 0.1) 100%
  );
}

.p-achievement__service__img{
    max-width: 340px;
    margin: 0 auto;
    width: 60%;
    
}

.p-achievement__service__title{
    color: #fff;
    text-align: center;
    margin: 45px 0 15px;
}
.p-achievement__service__box p{
    color: #000;
    line-height: 28px;
}

@media (min-width: 1920px) {
    .p-achievement__text1{
        font-size: 24px;
    }
    .p-achievement__text2{
        font-size: 40px;
    }
    .p-achievement__text3 span{
        font-size: 20px;
    }

}

.p-achievement__text1{
    font-size: min(1.25vw,17px);
    font-weight: 600;
    line-height: 1em;
}
.p-achievement__text1 span{
padding: 8px 25px;
	background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );
}
.p-achievement__service__box.second .p-achievement__text1 span{
	background: linear-gradient(
    -30deg,
    rgba(0, 129, 64, 1) 0%,
    rgba(9, 130, 42, 1) 4.87%,
    rgba(0, 192, 37, 1) 12.26%,
    rgba(0, 129, 62, 1) 68.47%,
    rgba(0, 129, 64, 1) 90.39%,
    rgba(0, 129, 64, 1) 100%
  );
}

.p-achievement__text2{
    font-size: min(2.08vw, 28px);
    font-weight: 600;
    line-height: 1em;
    margin: 16px 0;
    letter-spacing: 0.1em;
	background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p-achievement__service__box.second .p-achievement__text2{
	background: linear-gradient(
    -30deg,
    rgba(0, 129, 64, 1) 0%,
    rgba(9, 130, 42, 1) 4.87%,
    rgba(0, 192, 37, 1) 12.26%,
    rgba(0, 129, 62, 1) 68.47%,
    rgba(0, 129, 64, 1) 90.39%,
    rgba(0, 129, 64, 1) 100%
  );
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.p-achievement__text3{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
	color:#000;
}
.p-achievement__text3 span{
    font-size: min(1.04vw,14px);
    border: solid 1.5px #000;
    padding: 4px 15px;
}
@media (max-width: 768px) {
    .p-achievement__text1{
        font-size:17px;
    }
    .p-achievement__text2{
        font-size: 24px;
        margin: 12px 0;
    }
    .p-achievement__text3 span{
        font-size: 16px;
        padding: 0px 10px;
        width: auto;
        border: solid 1px #000;
    }
    .p-achievement__service__title{
        margin: 15px 0;
    }
}







/* reason */
.c-callout{
  position: relative;
  display: inline-block;
  padding: 14px 28px;
  border-radius: 5px;
  background: #ffeb00;
  color: #111;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
	width:1200px;
	margin:60px auto 30px;
}

/* しっぽ */
.c-callout::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ffeb00;
}
.c-callout-wrap{
  display:flex;
  justify-content:center;
font-size: min(2vw,28px);
}
.c-callout span{
	background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	font-size: min(2.5vw,36px);
}




.p-reason{
    background-image: linear-gradient(to right bottom, #E5F6F5 0%,#EAF7FC 50%, #E5F1F8 100%);
}

.p-reason__content{
    display: flex;
    justify-content: space-between;
	width:1200px;
	margin-left:auto;
	margin-right:auto;
}

.p-reason__content__item{
    max-width: 380px;
    width: 32%;
    position: relative;
    background-color: #fff;
    box-shadow: 8px 8px 10px 0px #70707033;
	border-radius:72px;
}
@media (max-width: 1440px) {
	.c-callout{width:1000px;}
	
	.p-reason__content{width:1000px;}
	.p-reason__content__item{
		max-width: 310px;
		width: 32%;}
}


@media (max-width: 768px) {
    .p-reason__content{
        flex-direction: column;
		width:100%;
    }
    .p-reason__content__item{
        width: 100%;
        margin: 0 auto;
        margin-bottom: 30px;
    }
    .p-reason__content__item:last-of-type{
        margin-bottom: 0px;
    }
}

.p-reason__img img{
	width: calc(100% - 40px);
	border-radius:53px;
	display:block;
	margin:20px auto 0;
}

@media (min-width: 1920px) {
    .p-reason__img__num{
        width: 181px;
    }
}

.p-reason__img__num{
    position: relative;
    width:100%;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .p-reason__img__num{
        width: 160px;
        top:-11.8vw;
    }
}

@media (max-width: 450px) {
    .p-reason__img__num{
        width: 160px;
        top:-15.8vw;
    }
}


.p-reason__img__num img{
    width: calc(100% - 40px);
	border-radius:53px;
	display:block;
	margin:20px auto 0;
}


/* 丸番号 */
.p-reason__num{
  position:absolute;
  left:50%;
  bottom:-35px;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:70px;
  height:70px;
  border-radius:50%;
  background:#fff;
  font-size:24px;
  font-weight:700;
  color:#003399;
  z-index:10;
}

.p-reason__num::after{
  content:"";
  position:absolute;
  top: calc(100% - 20px); /* 丸の下に10px空けて線 */
  left:0;
  right:0;
  margin: 0 auto;         /* ←中央寄せ */
  width:40px;
  height:2px;
  background:#003399;
}
.p-reason__num-text {
  display: block;
  transform: translateY(-4px); /* ←数字だけ上に */
}



.p-reason__textBox{
	display:inline-block;
    padding: 35px 25px 40px;
    position: relative;
}

@media (max-width: 768px) {
    .p-reason__content__item:nth-of-type(2) .p-reason__textBox{
        padding: 0px 25px 50px;
    }
    
}


@media (min-width: 1920px) {
    .p-reason__textBox h3{
        font-size: 24px;
    }
}
.p-reason__textBox h3{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: 0.05em;
    margin-top:0;
}
@media (max-width: 1280px) {
    .p-reason__textBox h3{
        font-size: 1.7vw;
    }
}
@media (max-width: 768px) {
    .p-reason__textBox h3{
        font-size: 24px;
        margin-top:0;
    }
}
.p-reason__textBox h3 span.kome{
    font-size: 12px;
    vertical-align: top;
}
.p-reason__textBox p{
    line-height: 28px;
}
.p-reason__textBox p span{
    font-size: 12px;
    display: block;
    line-height: 18px;
    margin-top: 5px;
}

.slide-arrow{
    width: 4.17vw;
    height: 4.17vw;
    position: absolute;
    bottom: 50%;
}

.prev-arrow{
    left: -10%;
}
.next-arrow{
    right: -10%;
}
.p-case__cta{
}


.p-case__accordionBtn{
    font-size: 17px;
    color: #fff;
    background-image: linear-gradient(to right bottom, #00A99D 0%,#29ABE2 50%, #0071BC 100%);
    border-radius: 100vh;
    width: 300px;
    display: inline-block;
    padding: 20px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.p-case__accordionBody{
    padding-top: 20px;
}


/* flow */

:root{
    --flow-color-01:  #8CC63F;
    --flow-color-02:  #21B574;
    --flow-color-03:  #00A99D;
    --flow-color-04:  #29ABE2;
    --flow-color-05:  #0071BC;
}




.p-footer{
    padding-top: 50px;
    padding-bottom: 60px;
    background-color: #f3f3f3;
}



.p-footer .p-footer--right {
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .p-footer{
        padding-top: 30px;
    }
    .p-footer .p-footer--right {
        width: 100%;
    }
}

.p-footer--right p{
    color: #858585;
	font-size:14px;
}
.p-footer--right p .mini{
    font-size: 12px;
    color: #858585;
}

.p-footer h3 {
    font-size: 22px;
    color: #058BDF;
    margin-bottom: 0;
    font-weight: 600;
}

.p-footer h3::before {
    content: "■";
    color: #058BDF;
    font-size: 110%;
    display: inline-block;
    transform: scale(0.1, 1);
}

.p-footer--copyright {
    font-size: 14px;
    font-weight: 400;
    margin-top: 60px;
    color: #858585;
}

@media (max-width: 768px) {
    .p-footer--right p{
        font-size: 14px;
        line-height: 20px;
    }
    .p-footer h3 {
        font-size: 20px;
    }
    .p-footer--copyright {
        margin-top: 40px;
        font-size: 13px;
        text-align: center;
        line-height: 20px;
    }
    
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
    animation: scroll-hint-appear 2s linear !important;
    animation-iteration-count: 2;
}

.scroll-hint-icon {
    width: 93px !important;
    height: 76px !important;
    border-radius: 14px !important; 
    background: rgba(51, 51, 51, 0.6) !important; 
    top: calc(50% - 38px)!important; 
    left: calc(50% - 46px)!important; 
}

.scroll-hint-icon:before {
    width: 30px !important;
    height: 30px !important;
    
    
}
.scroll-hint-text {
    font-size: 8px !important;
}

.scroll-hint-icon:after {
    width: 37px !important;
    height: 6px !important;
    background-size: cover !important;
    background-image: url(../images/scroll_arrow.png) !important;
}
.scroll-hint-icon::before {
    width: 29px !important;
    height: 29px !important;
    background-image: url(../images/scroll_finger.png) !important;

}





/*　上に上がる動き　*/

#js-appear.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#js-appear.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
from {
    opacity: 1;
    transform: translateY(0);
}
to {
    opacity: 1;
    transform: translateY(100px);
}
}






/*CTAボタン青帯*/
	.sec_cta_blue{
		background: linear-gradient(
    90deg,
    rgba(0, 33, 129, 1) 0%,
    rgba(0, 63, 130, 1) 4.87%,
    rgba(0, 110, 192, 1) 12.26%,
    rgba(0, 35, 129, 1) 68.47%,
    rgba(0, 33, 129, 1) 90.39%,
    rgba(0, 33, 129, 1) 100%
  );
		width:100%;
		padding:50px 0 45px;
	}
	
.div_cta_blue {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
	max-width: 1200px;
  margin: 0 auto;
  gap: 60px;
}

.c-cta__btn {
  position: relative;
  padding: 13px 20px 36px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
	width:500px;height:115px;
	border-radius:17px 17px 0 0;
	box-shadow: 0px 5px 0px 0px #000000;
	 transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.c-cta__btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* 下線 */
.c-cta__btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 3px;
}
.c-cta__btn:hover::after {
  height: 3px;
}
@media (hover: none) {
  .c-cta__btn:hover {
    transform: none;
    box-shadow: none;
  }
}


	
/* 上の小ラベル */
.c-cta__label {
  display: inline-block;
  padding: 2px 30px;
  border-radius: 999px;
  font-size: 20px;
  margin-bottom: 0px;
}

/* メイン文言 */
.c-cta__text {
  display: block;
  font-size: 38px;
  letter-spacing: 0.05em;
}
	
/*左ボタン*/
.c-cta__btn--red {
  background: linear-gradient(90deg, #f05a28, #ff3b2f);
  color: #fff;
	margin-left:auto;
}

.c-cta__btn--red .c-cta__label {
  background: #fff;
  color: #ff3b2f;
}

.c-cta__btn--red::after {
  background: #fff;
}
	
/*右ボタン*/
.c-cta__btn--yellow {
  background: #fff100;
  color: #002181;
	margin-right:auto;
}

.c-cta__btn--yellow .c-cta__label {
  background: #00a0e9;
  color: #fff;
}

.c-cta__btn--yellow::after {
  background: #00a0e9;
}



@media (max-width: 1400px) {
	
.sec_cta_blue{
  padding: 1.5rem 0 1.5rem;
}

.div_cta_blue {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 1rem;           /* 端詰まり防止 */
  display: flex;
  flex-wrap: wrap;           /* ズーム時に下へ逃がす */
  justify-content: center;
  gap: 2.5rem;
}

.c-cta__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.6em 0.9em 0.7em;  /* em基準で自然伸縮 */
	width:auto;height:auto;
  min-width: 18rem;           /* 下限だけ決める */
  max-width: 100%;            /* 親超過防止 */
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 0.3rem 0 0 #000;
}
	
.c-cta__text {
  font-size: 1.3rem; 
}
.c-cta__label {
  font-size:0.775rem;}

.c-cta__btn::after {
  height: 2px;
	bottom: 5px;
}
.c-cta__btn:hover::after {
  height: 2px;
}
	
	
}
	
@media (max-width: 768px) {
  .c-cta {
    grid-template-columns: 1fr;
  }
}


/* sectionグレー */
.sec_worries{
  position: relative;
  padding: 90px 0 0; /* ←下のpaddingはbottom側で作るので0 */
  color: #fff;
background: url("../images/darkback.jpg") center top / auto 680px repeat;
}

.sec_worries::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.15);
}

.div_worries{
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 1440px) {
	.div_worries{
		max-width: 800px;}
	}
	
.p-worries__list{ list-style:none; padding:0; margin:0; display:grid; gap: 26px; justify-items:center; } 
.p-worries__item{ width: min(980px, 100%); border: 2px solid rgba(255,255,255,0.9); border-radius: 28px; padding: 34px 20px; text-align:center;/* うっすら中が明るい感じ */ background: rgba(255,255,255,0.08); backdrop-filter: blur(2px); }
.p-worries__text{ margin:0; font-weight: 700; line-height: 1.7; letter-spacing: 0.04em; font-size: clamp(16px, 2.2vw, 26px); }
	
	

/* ===== 青い波エリア ===== */
.p-worries__bottom{
  --wave:#7d90bf;
  position: relative;
  z-index: 2;
  margin-top: 105px;

  /* ★ここで中身の高さを作る（画像を入れるため） */
  padding: 90px 16px 70px;

/* ★ここを追加：青い面を作る */
  background: var(--wave);

  /* ★青の面積を増やす（好みで調整） */
  padding: 40px 16px 70px;  /* 上/左右/下 */
	
 overflow: visible; 
}

/* 波形SVGは“背景”として固定 */
.p-worries__wave{
  position:absolute;
  left:0;
  right:0;
  top:-80px;       /* ★これで山が上に出る */
  height:150px;
  width:100%;
  z-index:0;
}

.p-worries__wave path{ fill: var(--wave); }

/* 矢印は波の上 */
.p-worries__chev{
  position: absolute;
  left: 50%;
top: -35px;               /* ★位置調整 */
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  z-index: 1;
}

/* 3段矢印 */
.p-worries__chev::before,
.p-worries__chev::after,
.p-worries__chev i{
  content:"";
  position:absolute;
  inset:0;
  border-right: 3px solid #ffe600;
  border-bottom: 3px solid #ffe600;
  transform-origin: center;
}
.p-worries__chev::before{ transform: rotate(45deg); }
.p-worries__chev::after { transform: translateY(12px) rotate(45deg); }
.p-worries__chev i      { display:block; transform: translateY(24px) rotate(45deg); }

/* ★青い部分に入れる画像（中身）は通常レイヤー */
.p-worries__solve{
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: center;
  gap: 80px;

  margin-top: 30px;        /* ★青面の中で下げる */
}

.p-worries__solve img{
  width: min(440px, 42vw); /* ★少し大きく */
  height: auto;
  display: block;
}
	
	
	
	
	
.c-solveHead{
  text-align: center;
  color: #fff;
  padding: 28px 16px 0;
}

/* 上の白ラベル */
.c-solveHead__label{
  display: inline-block;
  background: #fff;
  color: #111;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  padding: 10px 60px;
  margin: 0 0 18px;
}

/* メイン見出し */
.c-solveHead__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 2.2;
  font-size: clamp(22px, 3.2vw, 34px);
}


	
	
	
	
	
.solveCorner{
  --y: #fff200;
  --blue: #0a43a8;

  --line: 2px;
  --len-x: 24px;  /* 横線の長さ */
  --len-y: 24px;  /* ★縦線の長さ（伸ばす） */

  --gap: 5px;    /* ★外側の余白は増やさない */
  --tilt: -6deg;

  position: relative;
  display: inline-block;
  padding: var(--gap);

  /* 左上 + 右下だけ */
  background:
    /* 左上 */
    linear-gradient(var(--y),var(--y)) left top / var(--len-x) var(--line) no-repeat,
    linear-gradient(var(--y),var(--y)) left top / var(--line) var(--len-y) no-repeat,

    /* 右下 */
    linear-gradient(var(--y),var(--y)) right bottom / var(--len-x) var(--line) no-repeat,
    linear-gradient(var(--y),var(--y)) right bottom / var(--line) var(--len-y) no-repeat;
}

/* 斜め黄色BOX（だけ回転） */
.solveCorner__box{
  position: relative;
  display: inline-block;
  padding: 8px 20px 8px;
  background: var(--y);
  transform: rotate(var(--tilt));
}

/* ★文字は水平に戻す（逆回転） */
.solveCorner__box{
  text-align: center;
}
.solveCorner__box{
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
}
	
	.solveCorner__text{
  display: inline-block;
  transform: rotate(6deg); /* ★BOXの回転を打ち消す */
}


/*できること*/

.sec_stacan{
	background-image: linear-gradient(140deg, #7d90bf 15%, #002381 30% 42%, #006ec0 85%, #002181 94%);
	}	

	/* セクション内の幅 */
.div_stacan{
  max-width:calc(100% - 50px);
  margin: 0 0 0 auto;
  padding: 0 0 90px;
}
	@media (max-width: 1440px) {
.div_stacan{
	padding: 0 0 60px;}
	}
	

/* 白い角丸カード */
.stacan-card{
  background: #fff;
  border-radius: 36px 0 0 36px;
	overflow: hidden;           /* 角丸で中身を切る */
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
	position: relative;
	background:url("../images/about_bg.jpg") center/cover no-repeat;
}

.stacan-card__inner{
  padding: 145px 50px 145px 100px;
	max-width:1200px;
	margin-left:auto;margin-right:auto;
	display:block;
}

/* 見出し */
.stacan-head{
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-bottom: 100px;
}

.stacan-head__bar{
  width: 8px;
  height: 90px;
  background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );
  flex: 0 0 auto;
  border-radius: 2px;
	transform:translateY(10px);
}

.stacan-head__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: #111;
  font-size: clamp(22px, 3.2vw, 34px);
}

@media (min-width: 1441px) {
	.stacan-head__bar{height: 72px;}
	.stacan-head__title br{display:none;}
	}
	
/* 図 */
.stacan-figure{
  margin: 18px 0 22px;
	padding-right:50px;
}

.stacan-figure img{
  width: 100%;
	max-width:1200px;
  height: auto;
  display: block;
}

/* 注釈 */
.stacan-note{
  margin: 18px 0 0;
  color: #111;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* 右の縦 ABOUT */
.stacan-about{
  position: absolute;
  top: 0;
  right: -25px;
  transform: translateY(0%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(
  -30deg,
  rgba(0,33,129,.2) 0%,
  rgba(0,110,192,.2) 12%,
  rgba(0,35,129,.2) 68%,
  rgba(0,33,129,.2) 100%
);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(80px, 9vw, 140px);
  user-select: none;
  pointer-events: none;
}

/* SP */
@media (max-width: 768px){
  .stacan-card__inner{ padding: 34px 18px 28px; }
  .stacan-head__bar{ height: 54px; }
  .stacan-about{ font-size: 52px; right: 8px; }
}
	
.stacan_cta{text-align:center;
	padding-bottom:140px;}
	
@media (max-width: 1440px) {
	.stacan_cta{
		padding-left:50px;
		padding-right:50px;	
	padding-bottom:110px;}
	.stacan_cta img{width:90%;height:auto;}
	}


/*選ばれる8つの理由*/
.sec-reasons{
margin-top:-50px;
	position: relative;
  overflow: hidden; /* はみ出しを隠したい場合だけ。不要なら消してOK */
}
.sec-reasons::before{
  content: "REASON";
  position: absolute;
  left: -5px;                /* 左端の余白 */
  top: 44%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left top;

  font-size: clamp(80px, 9vw, 140px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;

  background: linear-gradient(
  -30deg,
  rgba(0,33,129,.2) 0%,
  rgba(0,110,192,.2) 12%,
  rgba(0,35,129,.2) 68%,
  rgba(0,33,129,.2) 100%
);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
	
  pointer-events: none;
  z-index: 5;
}

/* セクション中身を REASON より前に */
.sec-reasons .div-reasons,
.sec-reasons .reasons-inner{
  position: relative;
  z-index: 1;
}

/* 左の文字と被る場合はセクション内の左余白を増やす */
@media (min-width: 901px){
  .sec-reasons .div-reasons{
    padding-left: 140px; /* ←必要なら調整（今の90px→増やす） */
  }
}
	
	
.div-reasons{
	padding:145px 0 145px 90px;
	width: calc(100% - 50px);
background: #fff;
	border-radius:0 36px 36px 0;
	}
	
@media (max-width: 1300px){
.div-reasons{width:100%;}
	}
	
.reasons-inner{
  max-width: 1100px;
  margin: 0 auto;
}

/* 見出し（前セクションと統一） */
.sec-title{
  display:flex;
  align-items:center;
  gap: 30px;
  margin: 0 0 64px;
}
.sec-title__bar{
  width: 8px;
  height: 42px;
  background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );
}
.sec-title__text{
  margin:0;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: clamp(22px, 3vw, 34px);
  color:#111;
}

/* 3列グリッド */
.reasons-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 46px;
}

	
/* ===== REASON card ===== */
.reason-card{
  position: relative;
overflow: visible;
}

.reason-card__num{
  position:absolute;
  top: -20px;
  left: 0;
  margin:0;
  font-weight: 900;
  font-size: 44px;
  letter-spacing: .04em;
	
background: linear-gradient(-30deg,#002181 0%,#006ec0 12%,#002381 68%,#002181 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
	overflow: visible;
	
  z-index: 5;
  line-height: 1;
}

.reason-card__media{
  margin-top: 0;
  background: transparent;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.reason-card__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.reason-card__lead{
  margin: 16px 0 20px;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 900;
  color:#111;
}
.reason-card__lead span{
  letter-spacing: .04em;
  line-height: 1;
  background: linear-gradient(-30deg,#002181 0%,#006ec0 12%,#002381 68%,#002181 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===== Read more (details/summary) ===== */
.reason-more{
  margin-top: 0;
}

/* 本文（基本） */
.reason-more__text{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 2.0;
  color:#111;

  /* アニメ用 */
  overflow: hidden;
  max-height: var(--rm-h, 0px);
  transition: max-height .35s ease;
}

/* 3行省略（閉じ状態） */
.reason-more:not(.is-open) .reason-more__text{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ボタン */
.reason-more__btn{
  cursor: pointer;          /* ←ursorを修正 */
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 340px;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 14px 20px;

  border-radius: 999px;
  border: 1px solid #1b1b1b;

  background: linear-gradient(
    90deg,
    #e6e9f2 0%,
    #e6f0f9 12%,
    #e6eaf2 68%,
    #e6e9f2 100%
  );
  color:#111;
  font-weight: 700;

  transition: transform .2s ease, box-shadow .2s ease;
}

.reason-more__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* 右端の＋（openで×にする） */
.reason-more__plus{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
}

.reason-more__plus::before,
.reason-more__plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 14px;
  height: 2px;
  background:#111;
  transform: translate(-50%,-50%);
  transition: transform .25s ease, opacity .25s ease;
}

/* 縦棒 */
.reason-more__plus::after{
  width: 2px;
  height: 14px;
}

/* 開いたら×（＋を45度回転） */
.reason-more.is-open .reason-more__plus::before{
  transform: translate(-50%,-50%) rotate(45deg);
}
.reason-more.is-open .reason-more__plus::after{
  transform: translate(-50%,-50%) rotate(45deg);
}

/* 開いたらテキスト差し替え（Read more → Close） */
.reason-more.is-open .reason-more__label{
  font-size: 0;
}
.reason-more.is-open .reason-more__label::after{
  content: attr(data-open);
  font-size: 14px;
}

/* 開閉のアニメーション（本文の出現をふわっと） */
.reason-more__text{
  transition: opacity .25s ease;
}
.reason-more:not([open]) .reason-more__text{
  opacity: 1;
}
.reason-more[open] .reason-more__text{
  opacity: 1;
}
.reason-more__text_bold{font-weight: bold;}

/* SP */
@media (max-width: 900px){
  .reason-card__media{ margin-top: 0; }
}
.reasons-grid__tail{
  grid-column: 1 / -1;          /* ★3列グリッドを横断 */
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 360px));
  justify-content: center;       /* ★左右に空きができる */
  gap: 44px 46px;
}

	
@media (max-width: 1440px) {
	.reasons-grid{gap: 60px 26px;}
	.reasons-grid__tail{gap: 44px 26px;}
	}
	
/* SP */
@media (max-width: 900px){
  .reasons-grid{ grid-template-columns: 1fr; gap: 36px; }
  .reason-card__media{ margin-top: 28px; }
}



/* ===== お客様の声 ===== */
.sec-voice{
  padding: 70px 16px 80px;
  background-image: linear-gradient(0deg, #eaf6ff, #ffffff);
	text-align:center;
}

.voice-title{
  margin: 0 auto 35px;
	
  font-weight: 900;
  letter-spacing: .06em;
	display:inline-block;

  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.05;
	
  background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
	
}
.voice-title.second{
  margin: 0 0 40px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .08em;
  color: #000;
	font-size:16px;
	display:block;
	background:transparent;
	-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: currentColor;
}
	
	
/* スライダー枠 */
.voice-slider{
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}

/* 矢印（中央カードの横あたり） */
.voice-arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: none;
  background:linear-gradient(-30deg, #002181 0%, #006ec0 12%, #002381 68%, #002181 100%);
  color: #fff;
  cursor: pointer;
  z-index: 5;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.voice-arrow.is-prev{ left: calc(50% - 220px); }
.voice-arrow.is-next{ left: calc(50% + 180px); }
.voice-arrow span{ font-size: 18px; }

/* ビューポート */
.voice-viewport{
  overflow-x: hidden;
  overflow-y: visible;      /* ★凸や人物を切らない */
  padding: 96px 0 52px;     /* ★上を確保 */
}

/* トラック */
.voice-track{
  display: flex;
  align-items: stretch;
  gap: 34px;
  will-change: transform;
  transition: transform .45s ease;
  padding: 0 0px;
}

/* カード本体（★横幅固定を戻す） */
.voice-card{
  position: relative;
  flex: 0 0 360px;          /* ★これが無いと細くなる */
  overflow: visible;
  transform: scale(.92);
  opacity: .55;
  transition: transform .45s ease, opacity .45s ease, filter .45s ease;
	text-align:left;
}

/* カードの白背景＋影（凸には影を乗せない） */
.voice-card__bg{
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
  z-index: 1;
}

/* ★凸（白） */
.voice-bump{
  position: absolute;
  left: 50%;
  top: -64px;
  transform: translateX(-50%);
  width: 160px;             /* ←あなたの値 */
  height: 160px;
  background:#fff;
  border-radius: 999px;
  z-index: 2;               /* ★カード影より後ろにして「凸に影が乗らない」 */
}

/* ★付け根を“水面張力”っぽく：下に少しだけ溶かすブリッジ */
.voice-bump::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -18px;            /* 沈み込み */
  transform: translateX(-50%);
  width: 220px;             /* 広いほどゆるい */
  height: 56px;             /* 付け根の厚み */
  background:#fff;
  border-radius: 0 0 999px 999px;
}

/* 中身 */
.voice-card__inner{
  position: relative;
  z-index: 2;
  padding: 34px 28px 30px;
}

/* アバター：上に飛び出す */
.voice-avatar{
  margin: -88px auto 12px;
  width: 140px;
  height: 140px;
  position: relative;
  z-index: 3;               /* ★凸より前 */
}
.voice-avatar img{
  width: 92%;
  height: 92%;
  object-fit: contain;
  display:block;
}

.voice-lead{
  margin: 10px 0 18px;
  font-size: 18px;
  line-height: normal;
  font-weight: 900;
  color: #111;
}

.voice-body{
  margin: 0;
  font-size: 14px;
  line-height: 2.0;
  color: #333;
}

/* 中央（active） */
.voice-card.is-active{
  transform: scale(1);
  opacity: 1;
  filter: none;
}

/* 左右（inactive） */
.voice-card.is-side{
  filter: blur(.2px);
}
	
	.voice-card.is-clone.is-side{margin-left:-40px;}

/* ドット */
.voice-dots{
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
}
.voice-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(10,67,168,.25);
  border: none;
  cursor: pointer;
}
.voice-dot.is-active{
  background: #0a43a8;
}

/* SP */
@media (max-width: 900px){
  .voice-track{ padding: 0 20px; }
  .voice-card{ flex-basis: 82vw; }
  .voice-arrow{ width: 52px; height: 52px; }
  .voice-arrow.is-prev{ left: 6px; transform: translateY(-50%); }
  .voice-arrow.is-next{ left: auto; right: 6px; transform: translateY(-50%); }
}




	/* =========================
   PRICE
========================= */
.sec-price{
background: linear-gradient(
  0deg,
  #dceef8 0%,
  #e1f0f9 33%,
  #eef7fc 69%,
  #ffffff 100%
);
  position: relative;
  padding: 70px 16px 90px;
  overflow: hidden; /* 波のはみ出しを整理 */
}
.sec-price::before{
  content:"";
  position:absolute;
  inset:0;                       /* 全面 */
  background: url("../images/bg_wave.png") no-repeat center top;
  background-size: cover;        /* 全体にフィット */
  pointer-events:none;           /* クリック無効 */
  z-index:0;
	}

.price-inner{
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.price-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.05;
	display: inline-block;
  letter-spacing: .04em;
  line-height: 1;
  background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.price-sub{
  margin: 8px 0 26px;
  font-weight: 800;
  color: #111;
  letter-spacing: .08em;
  font-size: 16px;
}

/* 2行の価格 */
.price-table{
  display: grid;
  grid-template-columns: 320px 1fr; /* ← 2列固定 */
  row-gap: 28px;
  column-gap: 40px;
  justify-content: center;
  max-width: 800px;
  margin: 32px auto 0;
}

.price-row{
  display: contents;
  grid-template-columns: 300px auto;
  align-items: center;
  gap: 26px;
  justify-content: center;
}

.price-label{	
display: flex;              /* ★ベースライン余白を消す */
  align-items: center;        /* ★縦中央 */
  justify-content: center;

  width: 300px;               /* price-tableの左列と同じにする */
  height: 64px;               /* ★高さ固定（好みで） */
  padding: 0 18px;            /* ★上下paddingを消す */

  border: 1px solid #0a43a8;
  border-radius: 999px;
  background: rgba(255,255,255,.7);

  font-weight: 900;
  color: #111;
  letter-spacing: .25em;
  line-height: 1;             /* ★これ重要 */
  text-align: center;
	transform: translateY(10px);
	font-size:18px;
}

.price-amount{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.price-amount .yen{
  font-weight: 900;
  color: #4b463a;
  font-size: clamp(34px, 4.2vw, 54px);
  letter-spacing: .02em;
}

.price-amount .tax{
  font-weight: 800;
  color: #111;
  font-size: 14px;
	transform:translateY(15px);
}



/* CTA */
.price-cta{
  margin-top: 44px;
  display: flex;
  justify-content: center;
}

.price-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(460px, 92%);
  height: 66px;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 18px;
  background: linear-gradient(135deg, #062a82 0%, #062a82 68%, #0c63c9 100%);
  box-shadow: 0 16px 30px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}

.price-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 34px rgba(0,0,0,.22);
}

/* =========================
   Responsive
========================= */
@media (max-width: 860px){
  .price-table{
    grid-template-columns: 1fr;
    row-gap: 18px;
    column-gap: 0;
  }

  .price-label{
    width: min(340px, 92%);
    margin: 0 auto;
    letter-spacing: .22em;
  }

  .price-amount{
    justify-content: center;
  }


}




	/* ===== 導入効果（EFFECT） ===== */
.sec-effect{
  position: relative;
  background: #fff;
  padding: 0 0 70px;
}

.effect-inner{
  max-width: 100%;
  margin: 0 auto;
}

/* 右端の縦ロゴ */
.effect-vertical{
  position: absolute;
  right: -10px;
  top: 0;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: clamp(80px, 9vw, 140px);
  
background: linear-gradient(
  -30deg,
  rgba(0,33,129,.2) 0%,
  rgba(0,110,192,.2) 12%,
  rgba(0,35,129,.2) 68%,
  rgba(0,33,129,.2) 100%
);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
	
  writing-mode: vertical-rl;
  text-orientation: mixed;
  user-select: none;
  pointer-events: none;
}

/* 2カラム */
.effect-main{
  position: relative;
}

.effect-left{
	max-width: 1000px;
	margin:0 auto 0 auto;
	padding-top:110px;
	padding-left:60px;
	padding-right:400px;
	padding-bottom:120px;
	}

/* 見出し */
.effect-head{
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 10px;
}
.effect-bar{
  width: 8px;
  height: 42px;
  background: linear-gradient(-30deg, #002181 0%, #006ec0 12%, #002381 68%, #002181 100%);
	}
.effect-title{
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  color: #111;
  letter-spacing: .04em;
}

/* サブ */
.effect-sub{
  margin: 0 0 18px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
	line-height: 1.4;
}

/* 3,000 の塊：絶対に折り返さない */
.effect-count{
  display: inline-flex;
  align-items: center;     /* ★月桂冠画像と数字の縦位置を揃える */
  gap: 10px;
  margin-left: 10px;
  white-space: nowrap;     /* ★ここで確実に改行を防ぐ */
  vertical-align: middle;
	overflow: visible;
}

.effect-num{
  font-size: 38px;
  font-weight: 900;
  letter-spacing: .02em;
background: linear-gradient(-30deg,#002181 0%,#006ec0 12%,#002381 68%,#002181 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
	z-index:5;
	position: relative;
	
	display: inline-block;
  line-height: 1.1;
  padding: 2px 0;
}

.effect-unit{
  font-weight: 900;
  color: #0a43a8;
  line-height: 1;
}

.effect-note{
  font-weight: 900;
  color: #111;
  line-height: 1;
}

/* 月桂冠（画像） */
.effect-laurel{
  width: 34px;      /* ★好みで調整 */
  height: 34px;
  object-fit: contain;
  display: block;
  transform: translateY(2px); /* ★見た目で微調整（不要なら消してOK） */
}

.effect-laurel.is-r{
  transform: translateY(2px); /* 左右でズレるなら個別に調整 */
}

/* 画面が狭い時は、見出し行だけ折って良いなら（任意） */
@media (max-width: 520px){
  .effect-sub{
    white-space: normal; /* ★スマホは折り返し許可 */
    line-height: 1.6;
  }
  .effect-count{
    margin-left: 0;
  }
}

/* 6カード */
.effect-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 18px;
  margin: 30px 0 30px;
	position:relative;
}
.effect-cards img{
	position:absolute;
	right:-440px;top:30%;
	transform: translateY(-50%);
	}

.effect-card{
  position: relative;
  background: #e6edf6;
  border-radius: 12px;
  padding: 16px 0;
  min-height: 84px;
  display: grid;
  place-items: center;
  text-align: center;
}

.effect-check{
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  background: linear-gradient(-30deg,#002181 0%,#006ec0 12%,#002381 68%,#002181 100%);
  border-radius: 999px;
}
.effect-check::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -55%) rotate(-45deg);
}

.effect-card__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: #111;
  font-weight: 700;
}
.effect-card__text strong{
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(-30deg,#002181 0%,#006ec0 12%,#002381 68%,#002181 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 説明文 */
.effect-desc{
  margin: 0;
  font-size: 14px;
  line-height: 2.1;
  color: #111;
  font-weight: 600;
	white-space: nowrap;
}


.effect-laptop{
  width: min(460px, 100%);
  height: auto;
  display: block;
  /* 画像が水平なら少し傾ける（不要なら消してOK） */
  transform: rotate(-4deg);
  transform-origin: center;
}

/* ===== SP ===== */
@media (max-width: 980px){
  .effect-main{
    grid-template-columns: 1fr;
  }

  .effect-vertical{
    right: 0;
    top: 0;
    font-size: 52px;
    opacity: .25;
  }
  .effect-cards{
    grid-template-columns: repeat(2, 1fr);
  }
}




/* ===== 導入事例 ===== */
.sec-case{
  position: relative;
  padding: 100px 0 140px;
  background: linear-gradient(135deg,#6f85b6 0%,#7fa1c9 100%);
  overflow: hidden;
	width:calc(100% - 50px);
	margin-left:auto;
	display:block;
	border-radius:36px 0 0 36px;
}
@media (max-width: 1300px){
.sec-case{width:100%;}
	}
	
	
@media (max-width: 1440px) {
	.sec-case{padding-left:80px;}
		
	}
	
	
	.case-bg{
  position: absolute;
  left:-40px;
  top: 60px;
  transform: translateY(200%) rotate(-90deg);
  transform-origin: left top;

  font-size: clamp(80px, 9vw, 140px);
  font-weight: 900;
  letter-spacing: .12em;
  color: rgba(255,255,255,0.25);

  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.case-inner{
	width:calc(100% - 500px);
  min-width:1080px;
  margin:0 0 0 auto;
  position:relative;
  z-index: 1;
}

.case-title{
  display:flex;
  align-items:center;
  gap:30px;
  margin-bottom:50px;
  color:#fff;
  font-weight:900;
  font-size:26px;
}

.case-title__bar{
  width:8px;
  height:38px;
  background: linear-gradient(-30deg, #002181 0%, #006ec0 12%, #002381 68%, #002181 100%);
}

/* スライダー */
.case-slider{
  position:relative;
--cardW: 760px;
  --gap: 40px;
}

.case-viewport{
 overflow: hidden;
  padding: 0 calc((100% - var(--cardW))) 0 0;
}

.case-track{
  display: flex;
  gap: var(--gap);
  will-change: transform;
  transition: transform .45s ease;
}

/* カード */
.case-card{
  background:#fff;
  border-radius:28px;
  padding:50px 60px 20px;
flex: 0 0 var(--cardW);
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
	position:relative;
}
.case-card.is-side{
  opacity: .25;          /* 好みで調整 0.2〜0.5 */
  transform: scale(.96);
  filter: saturate(.9);
}
.case-card.is-active{
  opacity: 1;
  transform: scale(1);
  filter: none;
}
	
	
.case-no{
  font-size:28px;
  font-weight:900;
  margin-bottom:12px;
}

.case-head{
  font-size:20px;
  font-weight:900;
  margin-bottom:10px;
}

.case-cols{
  display:flex;
  gap:40px;
}

.case-col{
  flex:1;
  font-size:14px;
  line-height:2;
}
.case-col_p{
	line-height:22px;
	}

.case-label{
 position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 130px;
  padding: 2.5px 22px;
  border-radius: 999px;

  font-weight: 700;
  text-align: center;

  /* デフォ */
  background: #fff;
  border: 1px solid #0A43A8;
  color: #0A43A8;

  /* まれにmix-blend-mode等で消える対策 */
  isolation: isolate;
	margin-bottom:15px;
	letter-spacing: 0.1em;
}
.case-label,
.case-label *{
  -webkit-text-fill-color: currentColor !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

.case-label.u-font--blue{
  border: none;
  color: #fff;          /* ←白文字 */
  background: transparent; /* 背景はbeforeで敷く */
}
.case-label.u-font--blue::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  z-index: -1;

  background: linear-gradient(-30deg, #002181 0%, #006ec0 12%, #002381 68%, #002181 100%);
}

/* 矢印 */
.case-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  background:linear-gradient(-30deg, #002181 0%, #006ec0 12%, #002381 68%, #002181 100%);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}

.case-arrow.is-prev{
  left:-25px;
	z-index:2;
}

.case-arrow.is-next{
  left:740px;
}
	
	.case-company{font-size:23px;margin-bottom:20px;
		font-weight:bold;
	}
	.case-company img{width:160px;height:auto;}
	.case-company span{margin-top:10px;margin-left:10px;display:inline-block;}
	
	.sec-case_user{
  display: inline;
  overflow: hidden;
	}
	.caseimg{
		border-radius: 20px;
		margin-top:20px;
		display: block;}



/* ===== FLOW ===== */
.sec-flow{
  position: relative;
  padding: 90px 16px 110px;
  background: linear-gradient(0deg, #dceef8 0%, #e1f0f9 33%, #eef7fc 69%, #ffffff 100%);
  overflow: hidden;
}
.sec-flow::before{
  content:"";
  position:absolute;
  inset: 0;
  background: url("../images/bg_wave.png") top center / cover no-repeat;
  pointer-events:none;
  z-index: 0;
}
.flow-inner{ position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }

/* 見出し */
.flow-head{ text-align:center; margin: 0 0 46px; }
.flow-en{
  margin:0; font-weight:900; letter-spacing:.08em;
  font-size: clamp(46px, 7vw, 82px);

display: inline-block;
  letter-spacing: .04em;
  line-height: 1;
  background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.flow-ja{ margin:10px 0 0; font-weight:800; color:#111; letter-spacing:.06em; font-size:16px; }

/* タイムライン（左 / 中央 / 右） */
.flow-timeline{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 140px 1fr;
  row-gap: 54px;
  align-items: start;
}

/* 中央の縦ライン */
.flow-line{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1px; /* 2px → 1px */
  background: rgba(0,0,0,.7);
  height: 800px; /* ここは微調整 */
}
/* 中央ラインの頂上ドット */
.flow-line::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%); /* ★線の頂点に半分だけ乗せる */
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );
}
	

/* 左右の本文 */
.flow-item{ position: relative; max-width: 350px; }
.flow-item.is-left{ grid-column: 1; justify-self: end; padding-right: 26px;
	transform:translateX(-20px)translateY(20px);
	}
.flow-item.is-right{ grid-column: 3; justify-self: start; padding-left: 26px;
	transform:
		translateX(20px)
		translateY(80px);
	}

/* ★中央列に固定するコネクタ（ズレ防止の核） */
.flow-mid{
  position: absolute;
  top: 22px;                /* ここで「線の高さ」を一括調整 */
  width: 62px;             /* 中央列幅と同じ */
  height: 2px;
  pointer-events: none;
	transform:translateY(80px);
}
.flow-item.is-left .flow-mid{ right: -90px; }  /* 左文から中央列へ */
.flow-item.is-right .flow-mid{ left: -90px; 
	translate: 0 6px;
	}  /* 右文から中央列へ */

.flow-mid__rail{
  position:absolute;
  inset: 0;
  height: 2px;
  background: rgba(0,0,0,.65);
}

/* dotは「中央列の左右端」に固定 */
.flow-mid__dot{
  position:absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(-30deg,#002181 0%,#006ec0 12%,#002381 68%,#002181 100%);
  transform: translateY(-50%);
}
/* ★ここが重要：dotを中央ライン基準に固定 */
.flow-mid.is-left  .flow-mid__dot{ left: -9px; }   /* dot半径ぶん外へ */
.flow-mid.is-right .flow-mid__dot{ right: -9px; }  /* dot半径ぶん外へ */

/* テキスト */
.flow-no{
display: inline-block; /* ★これがないとほぼ失敗する */
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 44px;
  letter-spacing: .04em;
  line-height: 1;

  background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}
	
.flow-title{
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 900;
  color: #111;
	white-space: nowrap;
}
.flow-text{
  margin: 0;
  font-size: 14px;
  line-height: 2.0;
  color: #111;
}
	
.flow-item.is-right.is-02{ transform: translateY(52px); }
.flow-item.is-right.is-04{ transform: translateY(52px); } /* 同じなら同値でOK */
.flow-item.is-right .flow-mid{ translate: 0 6px; }
	


/* SP：縦並び（中央線＋dotだけ） */
@media (max-width: 900px){
  .flow-timeline{ grid-template-columns: 1fr; padding-left: 26px; row-gap: 28px; }
  .flow-line{ left: 14px; transform:none; }
  .flow-item{ grid-column: 1 !important; max-width: 100%; padding: 0 0 0 22px !important; }
  .flow-mid{ display:none; }
}




/* ===== SUPPORT（サポート体制） ===== */
.sec-support{
  position: relative;
  padding: 90px 16px 110px;
  background: linear-gradient(0deg,#dceef8 0%, #eef7fc 70%, #ffffff 100%);
}
@media (max-width: 1440px) {
	.sec-support{padding: 90px 60px 110px;}
	}
@media (max-width: 768px) {
	.sec-support{padding: 90px 5% 110px;}
	}
	
	
.support-inner{
  max-width: 1180px;
  margin: 0 auto;
}

.support-head{
  text-align: center;
  margin: 0 0 56px;
}
.support-head__en{
  margin: 0;
  font-size: clamp(44px, 6vw, 82px);
  letter-spacing: .08em;
  font-weight: 900;
display: inline-block;
  letter-spacing: .04em;
  line-height: 1;
  background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.support-head__jp{
  margin: 25px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}

/* 2カラム */
.support-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:56px;
  align-items:stretch;
}

/* カード */
.support-card{
  position: relative;
  background: #fff;
  border-radius: 28px;
  padding: 100px 44px 42px; /* 上余白少し増やす */
  box-shadow: 0 0px 10px rgba(0,0,0,.24);
  display: flex;                 /* ★高さ揃え用 */
  flex-direction: column;
}

/* 上部中央の凸（白） */
.support-card::before{
  content:"";
  position:absolute;
  left:50%;
  top:-44px;
  transform:translateX(-50%);
  width:220px;
  height:110px;
  background:#fff;
  border-radius:999px 999px 40px 40px;
  z-index:1;
}

/* 丸ラベル（導入前/導入後） */
.support-badge{
  position:absolute;
  left:50%;
  top:-26px;
  transform:translateX(-50%);
  width:128px;
  height:128px;
  border-radius:999px;
    background: linear-gradient(
    -30deg,
    #002181 0%,
    #006ec0 12%,
    #002381 68%,
    #002181 100%
  );
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:20px;
  z-index:2;     /* ← 白凸より前 */
}

/* 画像 */
.support-media{
  position:relative;
  z-index:3;     /* ← これが重要 */
  margin:-30px auto 26px;
  width:100%;
  max-width:520px;
  border-radius:18px;
  overflow:hidden;
}
.support-media img{
  width:100%;
  height:auto;
  display:block;
}

/* 見出し */
.support-title{
  margin: 0 0 18px;
  text-align:center;
  font-weight: 900;
  color:#111;
  font-size: 28px;
  line-height: 1.35;
}

/* 本文 */
.support-text{
   margin-top:auto;  /* ← 下まで押し広げる */
  color:#111;
  font-size: 14px;
  line-height: 1.8;
}

/* SP */
@media (max-width: 900px){
  .support-grid{
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .support-card{
    padding: 86px 24px 36px;
  }
  .support-card::before{
    width: 200px;
    height: 100px;
  }
  .support-badge{
    width: 118px;
    height: 118px;
    font-size: 18px;
  }
}



/* ===== FAQ ===== */
.sec-faq{
  position: relative;
  padding: 90px 16px 110px;
  background: #fff;
  overflow: hidden;
}
@media (max-width: 1440px) {
	.sec-faq{
		padding: 90px 60px 110px;
	}
	}
/* 背景のFAQ（右端に縦） */
.faq-bg{
  position:absolute;
  right: -20px;
  top: 0;
  transform: translateY(100%) translateX(-60px) rotate(90deg);
  transform-origin: right center;
  font-size: clamp(80px, 9vw, 140px);
  font-weight: 900;
  letter-spacing: .08em;
  background: linear-gradient(
  -30deg,
  rgba(0,33,129,.2) 0%,
  rgba(0,110,192,.2) 12%,
  rgba(0,35,129,.2) 68%,
  rgba(0,33,129,.2) 100%
);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  pointer-events:none;
  user-select:none;
}

/* 内側 */
.faq-inner{
  max-width: 980px;
  margin: 0 auto;
}

/* タイトル */
.faq-title{
  display:flex;
  align-items:center;
  gap:18px;
  margin:0 0 34px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .06em;
  color:#111;
}
.faq-title__bar{
  width: 6px;
  height: 34px;
  background:#0a43a8;
  border-radius: 2px;
}

/* FAQリスト */
.faq-list{
  border-top: 1px solid rgba(0,0,0,.28);
}

/* item */
.faq-item{
  border-bottom: 1px solid rgba(0,0,0,.28);
  padding: 0;
}

/* summary */
.faq-q{
  list-style: none;
  cursor: pointer;
  padding: 26px 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
}
.faq-q::-webkit-details-marker{ display:none; }

.faq-q__left{
  display:flex;
  align-items:flex-start;
  gap: 30px;
  min-width: 0;
}

.faq-q__mark{
  font-size: 26px;
  font-weight: 900;
  color:#0a43a8;
  line-height:1;
  flex: 0 0 auto;
}

.faq-q__text{
  font-size: 18px;
  font-weight: 800;
  line-height: 1.7;
  color:#111;
}

/* アイコン（＋ / ×） */
.faq-icon{
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

/* 2本の棒（最初は＋） */
.faq-icon::before,
.faq-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 20px;
  height: 2px;
  background:#111;
  border-radius: 2px;
  transform-origin: center;
  transition: transform .25s ease;
}

/* 横棒 */
.faq-icon::before{
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 縦棒 */
.faq-icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いたら×にする */
.faq-item[open] .faq-icon::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
.faq-item[open] .faq-icon::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* A */
.faq-a{
  display:flex;
  gap: 16px;
  padding: 0 0 26px;
}

.faq-a__mark{
  font-size: 26px;
  font-weight: 900;
  color:#0a43a8;
  line-height:1;
  flex: 0 0 auto;
}

.faq-a__text{
  margin: 0;
  font-size: 14px;
  line-height: 2.0;
  color:#111;
}

/* SP */
@media (max-width: 900px){
  .faq-title{ font-size: 22px; }
  .faq-q__text{ font-size: 16px; }
  .faq-bg{ font-size: 86px; }
}