.display-pc { display: block !important; }
.display-sp { display: none !important; }
.cet {text-align:center;}
.img-fluid2 {
    max-width: 70%;
    height: auto;
}

p {
  text-align: justify;
  text-justify: inter-ideograph;
  word-break: break-all;
  line-height:1.8;
}


@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1200px;
    }
}

.header_leftbox {
    position: relative; /* ← caption を絶対配置するため必要 */
    display: flex;
    align-items: center;
}

/* 左側グループ（ロゴ）は左寄せのまま */
.left-group {
    display: flex;
    align-items: center;
}

/* caption を中央配置 */
.caption {
    position: absolute;
    top:0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.caption img {
    width:400px;
    height:auto;
}

.btn-contact {
  text-align:center;
}
.btn-contact a {
  color:#3a81c3;
}
.btn-contact i {
  font-size:3em;
}
.btn-contact p {
  font-size:70%;
  padding:0;
  margin:0;
  line-height:0;
}


#hero {
    padding: 0;
}



.main-bg {
    width: 100vw; /* ビューポートの幅100% */
    aspect-ratio: 5 / 3; /* アスペクト比 (16:9 例) */
    background-image: url(../../assets/img/main.png);
    background-size: cover; /* 画像を完全にカバー */
    background-position: center center; /* 中央配置 */
    background-repeat: no-repeat; /* 画像の繰り返しなし */
    display: flex;
    justify-content: center;  /* 左寄せ */
    align-items: center;          /* 垂直中央 */
    height: 100%;
}

.contentsbox {
    width:700px;
    height:auto;
    padding:0;
    margin:0 auto;
    text-align:center;
}

.downarr-bg {
    position:relative;
    width: 100%;
    aspect-ratio: 700 / 113;
    height: 100%;
    background-image: url(../../assets/img/down-arr.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
}
.downarr-bg h2 {
    color:#fff;
    font-weight:bold;
    margin-top:-1em;
}
@media screen and (max-width: 768px){
	.downarr-bg h2 {
    margin-top:-0.5em;
	}
	.downarr-bg h2.subinfo {
    margin-top:-1em;
}
}

.downarr-bg span {
    display: inline-block;
    background-color: #fff;
    font-weight: bold;
    font-size: 120%;
    border: 1px solid #1d57a6;
    border-radius: 0.5em;
    padding: 0 0.5em;
    text-align: center;
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
@media screen and (max-width: 768px){
.downarr-bg span {
    font-size: 90%;
    position: absolute;
    bottom: 10px;
}
}
.downarr-bg span.yl {
    background-color: #fcee21;
}

.bg-band {
    position:relative;
    width: 100%;
    aspect-ratio: 800 / 131;
    height: 100%;
    background-image: url(../../assets/img/bg-band.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
}
.bg-band h2 {
    color:#fff;
	font-weight:bold;
	margin:0;
	border:3px solid #fff;
	border-radius:100vh;
	padding:0.5em 1em;
	
}

.free-h3 {
  display: inline-block;
  margin: 2em auto;
  padding: 0.8em 1.8em;
  background-color: #fcee21;
  color: #000;
  font-weight: 700;
  font-size: 1em;
  border-radius: 50px;
  border: 3px solid #fff;
  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
  letter-spacing: 1px;
  text-align: center;
}

a.btn-line {
  display:block;
  margin-bottom:3em;
}
a.btn-line img {
  width:50%;
  height:auto;
  animation: pulse 1.8s infinite ease-in-out;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); } /* 少しだけ大きく */
  100% { transform: scale(1); }
}

.questionbox {
    position:relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/question.png);
    background-size: 200px auto;
    background-position: center center;
	background-repeat: no-repeat;
	text-align:center;
	font-size:130%;
	font-weight:bold;
	margin:2em auto;
	padding:3em 0;
	line-height:2em;
}




span.underline_pink {
    background: linear-gradient(transparent 65%,rgba(255,0,0,.2) 0%);
    background-image: linear-gradient(transparent 65%, rgba(255, 0, 0, 0.2) 0%);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}


.section-title p {
    text-align: center;
    margin: 0 auto;
    width:700px;
}

ul.ml-1 li {
  margin-left:-2.5rem;
  list-style:none;
}

ol.ml-2 li {
  margin-left:-0.5rem;
}

.company_info dl {
  display: flex;
  flex-wrap: wrap;
}
.company_info dt {
  width: 28%;
  padding: 20px;
  background-color: #3a81c3;
  color:#fff;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content:  center;
}
.company_info dd {
  width: 72%;
  padding: 20px;
  background-color: #eeeeee;
  text-align:left;
  margin: 0 0 10px 0;
}
.company_info dd:last-child { margin-bottom: 10px!important; }

.company_info ul {
  margin-bottom: 0;
  padding-left: 1.3em;
  line-height: 1.8;
}

table.tbl-r02 {
  margin: 3rem auto;
  width:100%;
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
}

.tbl-r02 th {
  background: #ececec;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  padding: 0.5rem;
  vertical-align:middle;
  text-align:center;
  font-weight:bold;
  white-space: nowrap;
  box-sizing: border-box;
}

.tbl-r02 td {
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  padding: 0.5rem;
  vertical-align:middle;
  box-sizing: border-box;
}

.tbl-r02 ul {
  margin-bottom: 0;
  padding-left: 1.3em!important;
  line-height: 1.8;
  list-style-type: disc!important;
}

.tbl-r02 ul li {
  padding-bottom:0!important;
}

.notes {
font-size:75%;
color:#1d52aa;
margin-top:2rem;
font-style: oblique;
text-align:center;
}

.sns-bg {
padding:0.2em!important;
background-color:#1b3d2f;
color:#fff!important;
display:block;
text-align:center!important;
margin:0;
border-radius:100vh;
}

.sns-bg a:hover {
opacity:0.7;
}

.lh18 {line-height:1.8!important; }

/*----------------------------------
  ユーザーの声用
------------------------------------*/
.row-success {
    display: flex;
    gap: 2em;
    align-items: stretch;
    justify-content:center;
}
.row-success .col-md-6 {
    display: flex;
    flex-direction: column;
}


.row-success .col-md-6 .cet {
    margin-top: auto;
}


@media screen and (max-width: 768px) {
    .row-success {
        flex-direction: column;
        gap: 0;
    }
}

.successbox {
	border: 3px solid #034491;            /* 白枠 */
	padding: 0.5em;
	margin:0 0 1em;
	font-size: 90%;
	border-radius: 20px;
	height:100%;
	background-color: #eef4fc;
}
.successbox img {
	width:100%;
	height:auto;
	margin-bottom: 1em;
}

.success-inner {
	display: flex;
	align-items: center;
	gap: 1.5em;
	padding:0;
}

.success-inner .text {
	flex: 7.5;
	text-align:left;
}

.success-inner .img {
  flex: 2.5;
}

.success-inner img {
  max-width: 100%;
	height: auto;
	border-radius:100vh;
	box-shadow: 0 3px 7px rgba(0,0,0,0.5);
}

.successbox {
  margin-bottom: 3em;
}


@media screen and (max-width: 768px) {
  .successbox h4 {
    white-space: nowrap;                 /* 改行しない */
    font-size: clamp(0.8em, 4vw, 1.2em); /* ←幅に応じて自動調整 */
	}
	.success-inner {
	gap: 1em;
}
}

/*----------------------------------
  強み用
------------------------------------*/
.strong-point {
	background-image: url(../../assets/img/logo.png);
    background-size: auto 100%;
    background-position: left center;
	background-repeat: no-repeat;
	text-align:center;
	font-weight:bold;
	margin:2em 1em;
	padding:0;
}
.strong-point h2 {
	line-height:1.8;
	font-weight:bold;
}

.pointbox h4,
.pointbox2 h4 {
  background-color: #fcee21;         /* 黄色帯 */
  border: 3px solid #fff;            /* 白枠 */
  padding: 0.5em;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 100vh;
  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
  margin: 0 1em 1.2em;
  display: block;
}

.point-inner {
	display: flex;
	align-items: center;
	gap: 2em;
	padding:0 1em;
}

.point-inner .text {
	flex: 8;           /* ★テキスト 7割 */
	text-align:left;
}

.point-inner .img {
  flex: 2;           /* ★画像 3割 */
}

.point-inner img {
  max-width: 100%;
  height: auto;
}

.pointbox {
  margin-bottom: 3em;
}

.pointbox2 .point-inner {
  text-align:left;
}

.pointbox2 {
  margin-bottom: 3em;
}

@media screen and (max-width: 768px) {
  .pointbox h4,
  .pointbox2 h4 {
    white-space: nowrap;                 /* 改行しない */
    font-size: clamp(0.8em, 4vw, 1.2em); /* ←幅に応じて自動調整 */
	}
	.point-inner {
	gap: 1em;
}
}





/*----------------------------------
  特徴・強み用
------------------------------------*/
.feature-list {
  width:700px;
  list-style: none; /* デフォルト番号を消す */
  padding: 0;
  margin: 2rem 0;
  margin:0 auto;
}

.feature-list li {
  padding: 1.5rem 1rem;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.feature-list li h5 {
  margin: 0;
  font-size: 1.2em;
  color: #b3272d;               /* 差し色 */
  font-weight: 700;
  text-align:left;
}

.feature-list li p {
  margin: 0;
  line-height: 1.7;
  color: #333;
  font-size: 1em;
}
.feature-img {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}

.feature-img img {
  width: 33.333%;
  margin: 0;
  padding: 0;
  display: block;
}


@media screen and (max-width: 768px) {
    .feature-list {
  width:100%;
    }
  .feature-img {
    flex-direction: column;
  }

  .feature-img img {
    width: 100%;
  }
}


/*----------------------------------
  よくある質問用
------------------------------------*/
.faqbox {
	background-color:#dff8fc;
	padding:2em;
	border-top:10px solid #0061f1;
	margin-bottom:3em;
}

.faqbox h2 {
	color:#cfeaf3;
	font-size:3em;
	font-weight:bold;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

.faq-item {
	margin-bottom: 1.5em;
	background-image: url(../../assets/img/dot.png);
    background-size: 100% auto;
    background-position: center bottom;
	background-repeat: no-repeat;
	padding: 0 0 1em;
}

.faq-item .q,
.faq-item .a {
  position: relative;
  padding-left: 2.2em; /* ← Q と A の位置が揃うポイント */
}

/* Qの疑似要素 */
.faq-item .q::before {
  content: "Q：";
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}
.faq-item .a {
  color:#034491;
}
/* Aの疑似要素 */
.faq-item .a::before {
  content: "A：";
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.faq-title {
  display: inline-block;
  margin: 1em auto 2em;
  padding: 0.8em 1.8em;
  background-color: #fff;
  color: #000;
  font-weight: 700;
  font-size: 1em;
  border-radius: 100vh;
  border: 2px solid #cfeaf3;
  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
  letter-spacing: 1px;
  text-align: center;
}

@media screen and (max-width: 768px) {
	.faqbox {
	padding:1em;
	}
	.faqbox h2 {
	font-size:2.5em;
	}
}
	
/*----------------------------------
  無料サポートの流れ用
------------------------------------*/
.flowbox {
	background-color:#fdfdd6;
	padding:1em;
	border-top:10px solid #0061f1;
	margin-bottom:0;
}

.flowbox h2 {
  position: relative;
  display: inline-block;  /* テキスト幅に応じて中央寄せ可能 */
  padding: 0.5em 1.5em;   /* 左右に余白を作ってラインを置く */
	text-align: center;
	font-weight:bold;
}

.flowbox h2::before,
.flowbox h2::after {
  content: "";
  position: absolute;
  top: 50%;               /* テキスト中央の高さ */
  width: 2em;            /* ラインの長さ */
  height: 3px;            /* ラインの太さ */
  background-color: #000; /* 色は自由に変更可能 */
}

/* 左側のライン */
.flowbox h2::before {
  left: -10px;
  transform: translateY(-50%) rotate(70deg);
}

/* 右側のライン */
.flowbox h2::after {
  right: -10px;
  transform: translateY(-50%) rotate(290deg);
}

.flow-step {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 5em auto 4em;
  background: #fff;
  border: 4px solid #034491;
  border-radius: 20px;
  box-shadow:
    6px 6px 0 #59b3e1;
  padding: 3em 1.5em 2em;
  text-align: center;
}

.flow-step h5 {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #034491;
  color: #fff;
  border: 3px solid #f8d02c;
  width: 90px;
  height: 90px;
  border-radius: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  font-weight: bold;
  z-index: 2;
}

.flow-step h6 {
  font-size: 1.8em;
	font-weight: bold;
	margin:0;
	padding:0;
}
.flow-step h6 span {
  color:#00c301;
}

@media screen and (max-width: 768px) {
	.flow-step h6 {
  font-size: 1.1em;
}
}

.flow-step h5 span {
  background: #fff;
  color: #034491;
  border-radius: 100vh;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  font-weight: bold;
}

.flow-step img {
  max-width: 50%;
  height: auto;
  margin-top: 1em;
}
.flow-step div.w40 img {
  width: 40%;
}

.arrbox {
	text-align:center;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
}
.arrbox img {
	width:30%;
	max-width:150px;
	height:auto;
}


/*----------------------------------
  共通
------------------------------------*/
.nowr {white-space: nowrap;}
.bg-col01 {background-color:#ffdfee!important;}
.bg-col02 {background-color:#def1ff!important;}
.bg-col03 {background-color:#ffefb1!important;}

form#mailformpro {
  padding: 0px;
}

.uline {
  display: inline-block;
  background-image: url(../../assets/img/underline.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto; /* 下線を文字幅にフィット */
  padding-bottom: 8px;       /* 文字と下線の余白 */
}


.bg-bk {
    padding: 0.2em 1em;
    color: #fff;
    background-color: #000;
}

.box-sdw {
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.row-fx {
    display: flex;
    gap: 5em;
    align-items: stretch;
    justify-content:center;
}
.row-fx .col-md-6 {
    display: flex;
    flex-direction: column;
}


.row-fx .col-md-6 .cet {
    margin-top: auto;
}


@media screen and (max-width: 768px) {
    .row-fx {
        flex-direction: column;
        gap: 0;
    }
}


/* ================================
   ボタン（PC標準）
================================ */
.formbox {
  text-align: center;
}

.formbox a {
  position: relative;
  display: inline-block;
  background-color: #3a81c3;
  color: #fff;
  padding: 1em 3.2em 1em 2.5em; /* アイコン分だけ右に余白追加 */
  font-size: 1.8em;
  font-weight: 700;
  text-decoration: none;
  border-radius: 100vh;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  letter-spacing: 0.5px;
}

/* after アイコン */
.formbox a::after {
  content: "\ed24";
  font-family: boxicons !important;
  font-weight: 400;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    display: inline-block;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
  position: absolute;
  right: 1.2em;   /* ボタン右側に配置 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  line-height: 1;
  pointer-events: none;
}

.formbox a:hover {
  background-color: #4d96d8;
  transform: translateY(-2px);
}

.formbox a:active {
  transform: translateY(0);
}

.formbox p,
.footer_menu p {
  text-align:center;
  margin:2em 0 0;
}


.footer_menu .row,
.contact .row {
  width:700px;
  margin:0 auto;
}
.footer_menu ul {
  line-height:3em;
	list-style-type: none;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:1em;
	text-align:center;
	padding:0;
}
.footer_menu ul li {
	padding:0;
	margin:0;
	color:#fff;
	text-align:center;
}

.footer_menu ul li a {
  color:#fff;
  text-decoration: underline;
}
.footer_menu ul li a:hover {
  color:#fff;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .formbox a {
    font-size: 1.2em;
    padding: 0.9em 3em 0.9em 1.8em;
  }

  .formbox a::after {
    right: 0.8em;
    font-size: 1.3em;
	}
	.footer_menu ul {
	display:block;
}
}


/*----------------------------------
  edit sp
------------------------------------*/


@media screen and (max-width: 768px){
.display-pc { display: none !important; }
.display-sp { display: block !important; }

form#mailformpro {
  padding: 2em 0 0;
}

.contentsbox {
    width:100%;
    height:auto;
}

.footer_menu .row,
.contact .row {
  width:100%;
}

.section-title h2 {
  font-size: 28px;
}
.section-title p {
    text-align: left;
    width:100%;
}
.navbar {display:flex;}

#header,
#navbar-pc,
.contact a,
.caption {
  display: none;
}

#hero {
    padding: 0;
}

.main-bg {
    aspect-ratio: 1200 / 1682;
    background-image: url(../../assets/img/main-sp.png);
    background-size: cover; /* 画像の比率維持 */
    background-position: top center;
    padding:0;
}
h2 {
    font-size: calc(1.325rem + -0.5vw);
}

a.btn-line img {
  width:90%;
}

.section-title p {
    width:100%;
}

.company_info dt { width: 100%; margin: 0 0 0 0; }
.company_info dd { width: 100%; padding: 20px 10px; }

.otoiawase {
margin-left:0;
}

.member-fx div {
  width: calc((100% - 0.5em* 2) / 2);
}
.member-fx div img {
  width: 100%;
}
.mpost {
font-size:90%;
text-align:justify;
word-wrap:break-word;
}

}