@charset "utf-8";

/* 共通 標準要素 A
------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
html {
	/*横向きにした際のフォントサイズ自動調整オフ */
	-webkit-text-size-adjust: 100%;
	/* ウェブフォント用設定。また、モリサワ系には指定時に別途回転をかける */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* テキストリンク
------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
a:link    { color: #727681;	text-decoration:none; transition: all 0.3s ease; }
a:visited { color: #727681;	text-decoration:none; }
a:hover   { color: #0363C4; text-decoration:none; }
a:active  { color: #0363C4;	text-decoration:none; }


/* 共通 標準要素 B
------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
body { }

.w1120 { width:1120px; margin:0 auto; position:relative; }


/* トップページ
------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

.lpblk1 { position: fixed; top: 0; left: 0; width: 100%; z-index: 8; }

.lpb1lef { position: absolute; top: 0; left: 0; width: 280px; }

.lpb1lbk { position: absolute; top: -10px; left: 0; width: 280px; }
.lpb1lbk img { width: 100%; }

.lpb1llogo { position: absolute; top: 25px; left: 50px; width: 100px; }
.lpb1llogo img { width: 100%; }



.lpb1rig { position: absolute; top: 30px; right: 40px; 
display: inline-flex;
height: 70px;
padding: 10px 60px;
align-items: center;
gap: 32px;
border-radius: 35px;
background: #FFF;
box-shadow: 0 0 10px 0 rgba(44, 64, 82, 0.25);
}

.lpb1rig p { 
font-size: 1rem;
line-height: 1.25;
font-weight: 600;
}


.lpb1rbtn {

  display: flex;
  width: 180px;
  padding: 12px 25px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 21px;
  
  /* 元のグラデーション */
  background: linear-gradient(115deg, #0363C4 10.74%, #B78CD4 93.58%);
  
  /* 必須：中身を重ねるための準備 */
  position: relative;
  z-index: 1;
  overflow: hidden; 
}

/* ホバー用の濃い色を裏側に用意する */

.lpb1rbtn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 濃い方のグラデーション */
  background: linear-gradient(115deg, #02478C 10.74%, #9463B5 93.58%);
  
  /* 最初は透明にしておく */
  opacity: 0;
  z-index: -1;
  /* ここでフェード時間を指定 */
  transition: opacity 0.3s ease;
}

/* マウスオーバー時、裏の濃い色を不透明（1）にする */
.lpb1rbtn:hover::after {
  opacity: 1;
}
.lpb1rbtn { color: #fff; }


.lpb1rbtnicon {
width: 14px;
height: 12px;
flex-shrink: 0;
}
.lpb1rbtnicon img { width: 100%; }



.lpblk2 { z-index: 9;
  position: fixed; 
  bottom: 5%; 
  width: 100%;
		margin: 0 -40px;

  /* 左右センター */
  left: 50%;
  transform: translateX(-50%);
}

.lpblk2swk { position: absolute; bottom: 0; right: 0; width: 310px; min-height: 100px; padding: 22px;
border-radius: 4px;
background: #FFF;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.lpblk2maru { position: absolute; top: -12px; right: -12px; 
display: flex;
width: 80px;
height: 80px;
justify-content: center;
align-items: center;
border-radius: 40px;
background: #FFF000;
box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.20);
}

.lpblk2maru p { padding-top: 4px;
color: #0363C4;
text-align: center;
font-size: 1.1rem;
font-weight: 800;
line-height: 1.25;
}

.lpblk2swk h5 { 
color: #0363C4;
font-size: 1.2rem;
font-style: normal;
font-weight: 800;
line-height: 1.4; 
}

.lpblk2swk h6 { margin-top: 0.3em;
color: #727681;
font-size: 1.1rem;
font-style: normal;
font-weight: 700;
line-height: 1.4;
}


.lpblk3btn { margin-top: 1em;

  display: flex;
  width: 100%;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  
  /* 元のグラデーション */
  background: linear-gradient(115deg, #0363C4 10.74%, #B78CD4 93.58%);
  
  /* 必須：中身を重ねるための準備 */
  position: relative;
  z-index: 1;
  overflow: hidden; 
}

/* ホバー用の濃い色を裏側に用意する */

.lpblk3btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 濃い方のグラデーション */
  background: linear-gradient(115deg, #02478C 10.74%, #9463B5 93.58%);
  
  /* 最初は透明にしておく */
  opacity: 0;
  z-index: -1;
  /* ここでフェード時間を指定 */
  transition: opacity 0.3s ease;
}

/* マウスオーバー時、裏の濃い色を不透明（1）にする */
.lpblk3btn:hover::after {
  opacity: 1;
}
.lpblk3btn p { color: #fff; line-height: 1.4; }


.lpb3rbtnicon {
width: 27px;
height: 22px;
flex-shrink: 0;
}
.lpb3rbtnicon img { width: 100%; }



.lpblk3 { position: relative; width: 100%; background-color: #FAF8F4; z-index: 6; }


.lpblk3bg1 { position: absolute; top: 0px; width: 800px; 
/* ここを追加 */
  left: 50%;
  margin-left: -150px;
	}
.lpblk3bg1 img { width: 100%; }

.lpblk3bg2 { position: absolute; top: 540px; left: 0; width: 330px; }
.lpblk3bg2 img { width: 100%; }

.lpblk3bg3 { position: absolute; top: 790px; right: 0; width: 380px; }
.lpblk3bg3 img { width: 100%; }

.lpblk3bg4 { position: absolute; top: 910px; left: 0; width: 280px; }
.lpblk3bg4 img { width: 100%; }


.lpblk3tx1 { margin: 0 auto; padding: 160px 0 0 0;  width: 1060px; position: relative; z-index: 2; }


/* 1. 角丸ボックスのベース設定 */
.lpblk3fk1 {
  /* テキストを中央揃えにするための指定（追加） */
  display: flex;
  justify-content: center;
  align-items: center;

  width: 332px;
  height: 54px;
  transform: rotate(-0.11deg);
  border-radius: 27px;
  background: #E5E9F1;

  /* 文字のスタイル */
  color: #727681;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;

  /* 必須：三角をボックスの「底面中央」に固定するための基準 */
  position: relative; 
}

/* 2. 下側の三角（吹き出しのツノ）を作る設定 */
.lpblk3fk1::after {
  content: "";
  position: absolute;
  
  /* 三角の位置調整（ボックスの底面中央に配置） */
  bottom: -12px;      /* 三角の高さ分、下に突き出させる */
  left: 50%;
  transform: translateX(-50%);

  /* ボーダーを使って三角形を作るテクニック */
  border-style: solid;
  border-width: 12px 10px 0 10px; /* 上（三角の高さ） 左右（横幅の半分） 下 */
  border-color: #E5E9F1 transparent transparent transparent; /* 上だけボックスと同じ色 */
}

.lpblk3fk2 { position: relative; margin-top: 0.8em; width: 336px; 
}

.lpblk3fk2 p { text-align: center;
color: #727681;
font-size: 1.3rem;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 30px */
}

.lpblk3tx1 h1 { margin-top: 0em;
 
  font-size: 74px;
  font-style: normal;
  font-weight: 800;
  line-height: 115%;
  width: fit-content;

  /* 角度を 45deg（左下から右上へ）に変更 */
  background: linear-gradient(135deg, #0363C4 0%, #B78CD4 100%) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.lpblk3tx1 h1 span {
  font-size: 63px;
		line-height: 1.1;
}

.lpblk3tx1 h2 { margin-top: 0.7em;
				font-size: 26px;
		font-style: normal;
		font-weight: 800;
		line-height: 140%; /* 36px */
  width: fit-content;

  /* 角度を 45deg（左下から右上へ）に変更 */
  background: linear-gradient(135deg, #0363C4 0%, #B78CD4 100%) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;

filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);

}



.lpblk3tx2 { margin: 0 auto; padding: 190px 0 0 0;  width: 1140px; position: relative; z-index: 2; padding-bottom: 6em; }

.lpblk3tx2 h2 { text-align: center; margin-bottom: 0.7em; scroll-margin-top: 150px;
color: #0363C4;
font-size: 42px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 42px */
}

.lpblk3tx2 p {
color: #727681;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 180%; /* 28.8px */
}



.lpblk4 { position: relative; width: 100%; background-color: #fff; z-index: 5; }


.lpblk4bg1 { position: absolute; top: 650px; right: 0; width: 290px; }
.lpblk4bg1 img { width: 100%; }

.lpblk4tx1 { margin: 0 auto; padding: 4em 0 5em 0;  width: 1100px; position: relative; z-index: 2; }


.lpblk4tx1 h2 { text-align: center; margin-bottom: 0.7em; scroll-margin-top: 150px;
color: #0363C4;
font-size: 42px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 42px */
}

.lpblk4tx1 p {
color: #727681;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 180%; /* 28.8px */
}



/* テーブル全体のスタイル */
.comparison_table {
  width: 100%;
  max-width: 1100px; 
  margin: 2em auto 0 auto;
  border-collapse: collapse;
 
  font-size: 16px;
  background-color: #fff;
}

/* セルの基本設定 */
.comparison_table th,
.comparison_table td {
  padding: 20px 15px;
  text-align: center;
  vertical-align: middle;
}

/* ヘッダー行の背景色と文字設定 */
.comparison_table thead th {
  font-weight: 700;
  color: #555555;
  background-color: #EDF3F9; 
}

/* 中央列「比較項目」のスタイル */
.comparison_table .label {
  background-color: #EBF0F6; 
  color: #666666;
  font-weight: 700;
  width: 20%; 
}
.comparison_table thead th:nth-child(2) {
  background-color: #EBF0F6;
}

/* 左右の列の幅を均等に（各40%） */
.comparison_table th:first-child,
.comparison_table td:first-child,
.comparison_table th:last-child,
.comparison_table td:last-child {
  width: 40%;
}

/* 行ごとの下線（区切り線） */
.comparison_table tr {
  border-bottom: 1px solid #C1C7D1;
}

/* 左列（従来型）の文字色 */
.comparison_table td:first-child {
  color: #666666;
}

/* ▼ 右側「LSP®研修」列の強調スタイル ▼ */

/* ヘッダーの青背景 */
.comparison_table thead th.highlight {
  background-color: #0363C4;
  color: #FFFFFF;
}

/* テキストの青字化 */
.comparison_table td.highlight_text {
  color: #0363C4;
  font-weight: 500;
}

/* 「参加者全員」など、特に強調したい太字用 */
.comparison_table .font_bold {
  font-weight: 700 !important;
}



.lpblk5 { position: relative; width: 100%; background-color: #FAF8F4; z-index: 4; }

.lpblk5bg1 { position: absolute; top: 1120px; left: 0; width: 300px; }
.lpblk5bg1 img { width: 100%; }

.lpblk5bg2 { position: absolute; top: 2270px; right: 0; width: 370px; }
.lpblk5bg2 img { width: 100%; }

.lpblk5bg3 { position: absolute; top: 3410px; left: 0; width: 300px; z-index: 3; }
.lpblk5bg3 img { width: 100%; }


.lpblk5tx1 { margin: 0 auto; padding: 4em 0 0 0;  width: 1100px; position: relative; z-index: 2; }


.lpblk5tx1 h2 { text-align: center; margin-bottom: 0.7em; scroll-margin-top: 150px;
color: #0363C4;
font-size: 42px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 42px */
}

.lpblk5tx1 p {
color: #727681;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 180%; /* 28.8px */
}



.lpblk5tx2 { position: relative; margin: 2em auto 0 auto; padding: 40px 40px; width: 600px; height: 209px; background-image: url("../images/boxbg01_600_210.png"); background-repeat: no-repeat; }
	
.lpblk5tx2 p { 
	color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 200%; /* 32px */
}



.lpblk5tx4 { margin: 0 auto; padding: 2em 0 0 0;  width: 1100px; position: relative; z-index: 2; }

.lpblk5tx4 p {
color: #727681;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 180%; /* 28.8px */
}



.lpblk5tx5 { 
  margin: 3em auto 0 auto; 
  padding: 0;  
  width: 1000px; 
  position: relative; 
  z-index: 2; 
  
  /* 背景画像の設定 */
  background-image: url("../images/ill01.png"); 
  background-repeat: no-repeat; 
  background-position: center top; 
  
  /* ▼ ここを追加：画像のサイズを50%（横幅50%、縦幅は自動比率）にする ▼ */
  background-size: 55% auto; 
  
  min-height: 600px; 
}

.lpblk5tx5wk { margin: 0 auto; width: 100%; padding-top: 150px;
 display:flex;
	flex-wrap:wrap;
 justify-content: space-around;
}

.lpblk5tx5bx { width: 240px; }

.lp5mtc { margin-top: 120px; }


/* 1. 親要素（白い正円のボックス） */
.lpblk5tx5bxtit { margin-bottom: 1.5em;
  /* ▼ ここを追加：中身を上下左右中央に集める設定 ▼ */
  display: flex;
  justify-content: center; /* 左右の中央揃え */
  align-items: center;     /* 上下の中央揃え */
  flex-direction: column;  /* 改行（複数行）があっても縦に並べる設定 */

  width: 240px;
  height: 240px;
  border-radius: 120px;
  background-color: #fff;
  filter: drop-shadow(0 0 7px #0363C4);
}

/* 2. 子要素（見出し文字） */
.lpblk5tx5bxtit h4 {
  text-align: center;
 
  font-size: 26px;
  font-style: normal;
  font-weight: 800;
  line-height: 120%;

  /* ▼ ここを追加：グラデーションの横広がりを防ぐ ▼ */
  width: fit-content;

  background: linear-gradient(115deg, #0363C4 10.74%, #B78CD4 93.58%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lpblk5tx5bx p { 
color: #727681;
text-align: justify;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 22.5px */
}



.lpblk5tx6 { margin: 0 auto; padding: 7.5em 0 0 0;  width: 1140px; position: relative; z-index: 2; }


.lpblk5tx6 h2 { text-align: center; margin-bottom: 0.7em; scroll-margin-top: 150px;
color: #0363C4;
font-size: 42px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 42px */
}


.lpblk5tx6wk { margin: 0 auto; width: 100%; padding-top: 50px;
 display:flex;
	flex-wrap:wrap;
 justify-content: space-between;
}

.lpblk5tx6bx { width: 510px; position: relative; }



.lpblk5tx6bximg { position: absolute; top: 0; left: 0; width: 130px; }
.lpblk5tx6bximg img { width: 100%; }

.lpblk5tx6bxdata { margin: 0 0 0 150px; width: calc(100% - 150px); min-height: 170px; }

.lpblk5tx6bxdtit {
display: flex;
padding: 12px 0;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 8px;
align-self: stretch;
border-top: 1px solid #0363C4;
border-bottom: 1px solid #0363C4;
}

.lpblk5tx6bxdtit h5 {
color: #0363C4;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 27px */
}

.lpblk5tx6bxdmtk {
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
}

.lpblk5tx6bxdmtk h6 {
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 5px;
background: #7EADDC;
color: #FFF;
padding: 0 6px;
text-align: center;
font-size: 0.8rem;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 16.8px */
}

.lpblk5tx6bxdmtk p {
display: flex;
align-items: center;
gap: 10px;
color: #727681;
font-size: 0.93rem;
font-style: normal;
font-weight: 600;
line-height: 130%; /* 20.8px */
}

.lpblk5tx6bxdnme { margin: 1em 0 0 0; }

.lpblk5tx6bxdnme h6 { 
color: #727681;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 100%; /* 16px */
}

.lpblk5tx6bxdnme h6 span { 
font-weight: 800;
}

.lpblk5tx6bxdnme p { margin-top: 0.5em;
color: #727681;
font-size: 0.75rem;;
font-style: normal;
font-weight: 400;
line-height: 1.4em;
}


.lpblk5tx7owk { position: relative; margin: 0 auto; padding: 0; width: 100%;  background-color: transparent; }


.lpblk5tx7 { 
  margin: 4em auto; 
  position: relative; 
  z-index: 2; 
  display: flex;
  width: 1120px;
  padding: 30px 70px;
  flex-direction: column;
  align-items: center; 
  gap: 16px;
  border-radius: 20px;
  
  /* ▼ 修正した枠線グラデーションの指定 ▼ */
  border: 4px solid transparent; 
  background-image: 
    linear-gradient(#ECF3F9, #ECF3F9), 
    linear-gradient(45deg, #B78CD480 0%, #0363C480 100%); /* 角度を295degにし、末尾に「80（50%透明）」を追加 */
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.lpblk5tx7 h3 {
  color: #0363C4;
  text-align: center;
 
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

.lpblk5tx7 p { 
  color: #727681;
  text-align: center;
 
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}



.lpblk5tx8 { margin: 0 auto;

  display: flex;
  width: 540px;
padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-radius: 35px;
  
  /* 元のグラデーション */
  background: linear-gradient(115deg, #0363C4 50.74%, #B78CD4 97.58%);
  
  /* 必須：中身を重ねるための準備 */
  position: relative;
  z-index: 1;
  overflow: hidden; 

	box-shadow: 0 5px 0 0 #0063C7;
}

/* ホバー用の濃い色を裏側に用意する */

.lpblk5tx8::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 濃い方のグラデーション */
  background: linear-gradient(115deg, #02478C 50.74%, #9463B5 97.58%);
  
  /* 最初は透明にしておく */
  opacity: 0;
  z-index: -1;
  /* ここでフェード時間を指定 */
  transition: opacity 0.3s ease;
}

/* マウスオーバー時、裏の濃い色を不透明（1）にする */
.lpblk5tx8:hover::after {
  opacity: 1;
}
.lpblk5tx8 { color: #fff; 
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 20px */
}

.lpblk5tx8icon {
width: 27px;
height: 22px;
flex-shrink: 0;
}
.lpblk5tx8icon img { width: 100%; }




.lpblk5tx9 { margin: 5.5em auto 0 auto; padding: 0 0 5em 0;  width: 1000px; position: relative; z-index: 2; }


.lpblk5tx9 h2 { text-align: center; margin-bottom: 0.7em; scroll-margin-top: 150px;
color: #0363C4;
font-size: 42px;
font-style: normal;
font-weight: 700;
line-height: 130%; 
}


.lpblk5tx9 p {
color: #727681;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 180%; /* 28.8px */
}


.lpblk5tx9wk { margin: 0 auto; width: 100%; padding-top: 4em;
 display:flex;
	flex-wrap:wrap;
 justify-content: space-around;
}

.lpblk5tx9bx { width: 230px; }


.lpblk5tx9bximg { width: 224px; margin: 0 auto; position: relative; }
.lpblk5tx9bximg img { width: 100%; }

.lpblk5tx9bxdata { position: relative; margin: 1em 0 0 0; }

.lpblk5tx9bxdata h5 {
color: #727681;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 18px */
}

.lpblk5tx9bxdata h6 { margin: 1em 0;
color: #727681;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 19.5px */
}

.lpblk5tx9bxdata p {
color: #727681;
text-align: justify;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 22.5px */
}




.lpblk6 { position: relative; width: 100%; background-color: #fff; z-index: 2; }


.lpblk6tx1 { margin: 0 auto; padding: 4em 0 5em 0;  width: 1140px; position: relative; }


.lpblk6tx1 h2 { text-align: center; margin-bottom: 0.7em; scroll-margin-top: 150px;
color: #0363C4;
font-size: 42px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 42px */
}



.lpblk6tx1wk { margin: 3em auto 0 auto; width: 100%; 
 display:flex;
	flex-wrap:wrap;
 justify-content: space-around;
}

.lpblk6tx1bx { width: 250px; }

.lpblk6tx1bxstp { }
.lpblk6tx1bxstp p { 
color: #FFF;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: #0363C4;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 30px */
letter-spacing: 1px;
}

.lpblk6tx1bximg { width: 250px; margin: 0.6em auto 0 auto; position: relative; }
.lpblk6tx1bximg img { width: 100%; }

.lpblk6tx1bxbun { margin: 0.5em auto 0 auto; width: 90%; }
.lpblk6tx1bxbun p { 
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 24px */
}

/* ▼ 変更：吹き出しボックス本体 ▼ */
.lpblk6tx1bxfki { 
  margin: 1.2em auto 0 auto; /* 三角のスペースを確保するため、上のマージンを 0.7em から 1.2em に少し広げました */
  display: flex;
  width: 250px;
  padding: 10px;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  border-radius: 10px;
  background: #0363C4;
  
  /* 必須：三角をボックスの「上面中央」に固定するための基準 */
  position: relative; 
}

.lpblk6tx1bxfki p { 
  color: #FFF;
  text-align: center;
 
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}

/* ▼ 追加：ボックスの「上」に付く三角の設定 ▼ */
.lpblk6tx1bxfki::after {
  content: "";
  position: absolute;
  
  /* 三角の位置調整（ボックスの上面中央に配置） */
  top: -10px; /* 三角の高さ分、上に突き出させる */
  left: 50%;
  transform: translateX(-50%);

  /* ボーダーを使って「上向き」の三角形を作る設定 */
  border-style: solid;
  border-width: 0 10px 10px 10px; /* 上 左右 下（三角の高さ10px） */
  border-color: transparent transparent #0363C4 transparent; /* 下の枠線だけボックスと同じ青色にする */
}





.lpblk7 { position: relative; width: 100%; background-color: #FAF8F4; }

.lpblk7tx1 { margin: 0 auto; padding: 4em 0 5em 0; width: 1000px; position: relative; }

.lpblk7tx1 h2 { 
  text-align: center; 
  margin-bottom: 0.7em; 
  scroll-margin-top: 150px;
  color: #0363C4;
 
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

.lpblk7tab { margin: 3em auto 0 auto; width: 100%; }

/* FAQ全体のコンテナ */
.faq_container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
 
  background-color: #ffffff;
  box-sizing: border-box;
}

/* box-sizingのバグ防止 */
.faq_container *, 
.faq_container *::before, 
.faq_container *::after {
  box-sizing: border-box;
}

/* 各質問の枠（下線） */
.faq_item {
  border-bottom: 1px solid #D2DAE5;
}

/* 質問部分のクリックエリア */
.faq_question {
  display: flex;
  align-items: center;
  padding: 24px 30px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}

/* 開いている質問の背景を薄い青にする */
.faq_item.active .faq_question {
  background-color: #EDF3F9;
}

/* 質問テキスト */
.faq_question h3 {
  margin: 0 0 0 15px;
  font-size: 18px;
  font-weight: 700;
  color: #555555;
  flex: 1;
}

/* QとAの丸アイコン共通スタイル */
.icon_q, .icon_a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Qアイコン */
.icon_q {
  background: linear-gradient(45deg, #0363C4 0%, #B78CD4 100%);
  color: #ffffff;
}

/* Aアイコン */
.icon_a {
  color: #0363C4;
  position: relative;
  z-index: 1;
  background: #D4DCFF;
}

/* 回答部分 */
.faq_answer {
  display: none;
  overflow: hidden;
}

/* ▼ 変更：align-items を center にして、全体の高さに対してマルAを上下中央にする ▼ */
.faq_answer_inner {
  display: flex;
  align-items: center; 
  padding: 24px 30px;
}

/* 回答テキスト（pタグを囲むコンテナにしてマージンを調整） */
.faq_answer_content {
  margin-left: 15px;
  flex: 1;
}

.faq_answer_content p {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #727681;
  line-height: 1.6;
}
.faq_answer_content p:last-child {
  margin-bottom: 0;
}

/* 右側のプラス・マイナスアイコン */
.icon_toggle {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.icon_toggle::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 2px;
  width: 20px;
  height: 4px;
  background-color: #0363C4;
  border-radius: 2px;
}

.icon_toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 10px;
  width: 4px;
  height: 20px;
  background-color: #0363C4;
  border-radius: 2px;
  transition: transform 0.3s ease;
}

.faq_item.active .icon_toggle::after {
  transform: rotate(90deg);
  opacity: 0; 
}

/* ========================================================
   ▼ スマホ・タブレット用のレスポンシブ設定 (768px以下)
   ======================================================== */
@media screen and (max-width: 768px) {
  .faq_question {
    padding: 20px 15px;
  }
  
  .faq_answer_inner {
    padding: 20px 15px;
  }

  .faq_question h3 {
    font-size: 15px;
    margin: 0 10px;
  }

  .faq_answer_content {
    margin-left: 10px;
  }

  .faq_answer_content p {
    font-size: 14px;
  }
  
  .icon_q, .icon_a {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
}





.lpblk8 { 
  position: relative; 
  width: 100%; 
  background-image: url("../images/bgimgft01.webp"); 
  background-repeat: no-repeat; 
  
  /* ▼ ここを追加 ▼ */
  background-size: cover;       /* 画像をアスペクト比を保ったまま全体に広げる */
  background-position: center;  /* 画面が伸縮した際、画像の中央を基準にトリミングする */
}


.lpblk8tx1 { margin: 0 auto; padding: 4em 0 5em 0; width: 720px; position: relative; }

.lpblk8tx1 h2 { 
  text-align: center; 
  margin-bottom: 0.9em; 
  scroll-margin-top: 150px;
  color: #fff;
 
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}


.lpblk8tx1 h3 { margin-bottom: 1em; 
color: #FFF;
text-align: left;
font-size: 22px;
font-style: normal;
font-weight: 800;
line-height: 33.6px; /* 152.727% */
letter-spacing: 0.448px;
}


.lpblk8tx1 p { 
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 180%; /* 28.8px */
}


/* 1. 外側の白い大きなボックス */
.lpblk8kkm1 { 
  display: flex;
  justify-content: space-around; /* 3つの要素を均等に美しく分散配置 */
  align-items: center;
  
  width: 100%;
  max-width: 1000px; /* 本文の幅（1000px）に合わせます */
  margin: 1.5em auto 0 auto;
  padding: 25px 30px; /* 上下にゆとりのある上品な余白 */
  
  background-color: #ffffff;
  border-radius: 12px; /* 画像に合わせた優しい角丸 */
  
  /* 画像にある、きれいで柔らかい浮遊感のあるシャドウ効果 */
  box-shadow: 0 10px 30px rgba(3, 99, 196, 0.1); 
  
  box-sizing: border-box;
}

/* box-sizingのバグ防止 */
.lpblk8kkm1 *,
.lpblk8kkm1 *::before,
.lpblk8kkm1 *::after {
  box-sizing: border-box;
}

/* 2. 各情報アイテム（時計、費用、人）の並び */
.lpblk8kbx {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3. アイコン画像のコンテナ */
.lpblk8kbxpct {
  width: 20px;  /* アイコンの適切なサイズ */
  height: 20px;
  margin-right: 5px; /* アイコンと文字の間の隙間 */
  flex-shrink: 0; /* 絶対にアイコンを潰さない */
  display: flex;
  align-items: center;
  justify-content: center;
}

.lpblk8kbxpct img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 4. テキストの設定（フォントや色） */
.lpblk8kbx p {
  margin: 0;
  color: #555555; /* 読みやすい落ち着いたグレー */
 
  font-size: 1rem;
  font-weight: 700; /* 画像に合わせたしっかりした太字 */
  line-height: 1;
  white-space: nowrap; /* 途中で不自然に改行されるのを防ぐ */
}

/* 「│」の縦線の色を少し薄くしてデザインを洗練させる指定 */
.lpblk8kbx p span {
  color: #D2DAE5;
  margin: 0 3px;
  font-weight: 400;
}


/* ========================================================
   ▼ スマホ・タブレット用のレスポンシブ設定 (768px以下)
   ======================================================== */
@media screen and (max-width: 768px) {
  .lpblk8kkm1 {
    flex-direction: column; /* 横並びから「縦並び」に切り替え */
    gap: 18px; /* 縦に並んだときの間隔 */
    padding: 30px 20px;
    width: 90%; /* スマホ画面の左右に少し余白を作る */
  }

  .lpblk8kbx {
    width: 100%;
    justify-content: flex-start; /* スマホ時は左揃えベースにすると見やすいです */
    padding-left: 15%; /* 中央に寄せるための左余白（好みで調整可） */
  }

  .lpblk8kbx p {
    font-size: 16px; /* スマホ用に少し文字を小さく */
  }
  
  .lpblk8kbxpct {
    width: 28px; /* スマホ用にアイコンを一回り小さく */
    height: 28px;
  }
}



footer { 
  position: relative; 
  width: 100%; 
		padding: 4em 0 5em 0;
}

footer h4 { 
color: #0363C4;
text-align: center;
font-size: 17px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 25.5px */
letter-spacing: 0.88px;
}

footer p { margin-top: 0.4em;
color: #0363C4;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 25.2px */
}


/* 1. フッター全体のテキストやリンクの基本カラー設定 */
footer {
  text-align: center;
 
}



/* 2. ピクト付き行を囲む外枠（fotkkm） */
.fotkkm {
  display: flex;
  justify-content: center; /* 2つの要素を画面の真ん中に寄せる */
  align-items: center;
  gap: 20px;               /* アイテム同士の横の隙間（画像に合わせて広めに設定） */
  margin: 0.5em auto 0 auto;
  width: 100%;
  max-width: 1000px;
}

/* 3. 各ブロックの並び */
.fotkkm .lpblk8kbx {
  display: flex;
  align-items: center;
}

/* 4. アイコン画像の設定 */
.fotkkm .lpblk8kbxpct {
  width: 16px;             /* 画像の見本に合わせたシャープなサイズ */
  height: auto;
  margin-right: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.fotkkm .lpblk8kbxpct img {
  width: 100%;
  height: auto;
}

/* 5. テキストおよびリンクのスタイル（美しい青色） */
.fotkkm .lpblk8kbx p {
  margin: 0;
  font-size: 1rem;         /* 見本画像に合わせた、少し大きめで見やすいサイズ */
  line-height: 1;
}

.fotkkm .lpblk8kbx p a {
  color: #0363C4;          /* 画像の鮮やかなブルー */
  text-decoration: none;   /* リンクの下線を消す */
  transition: opacity 0.3s ease;
}

/* マウスを乗せたときにふわっと透過させる演出 */
.fotkkm .lpblk8kbx p a:hover {
  opacity: 0.7;
}

/* 6. 先ほど読み込んだ英数字専用フォント「Barlowの700」を数字とURLに直撃させる */
.fotkkm .font_barlow {
  font-weight: 400;
}





/* SP 追加CSS */


.lphsp {display: none; }

.mn_button_container {display: none; }

.overlay-menu  {display: none; }






/* PC版の電話リンクを無効にする 
a[href^="tel:"] {
    pointer-events: none;
}
*/

/* スマホ版のみ表示する。PC版では削除 */
.sponly { display:none; }

/* PC版のみ表示する。スマホ版では削除 */
.pconly { display:block; }


@media screen and (max-width: 979px) {


/* スマホ版のみ表示する。PC版では削除 */
.sponly { display:block; }

/* PC版のみ表示する。スマホ版では削除 */
.pconly { display:none; }

img { }

}














/* 部品
------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* Noto Sans JP

100: Thin (極細) 
.font-thin {
font-family: "Noto Sans JP", sans-serif;
font-weight: 100;
}

200: Extra Light (超細)
.font-extralight {
font-family: "Noto Sans JP", sans-serif;
font-weight: 200;
}

300: Light (細め)
.font-light {
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
}

400: Regular / Normal (標準)
.font-regular {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
}

500: Medium (中字)
.font-medium {
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
}

600: Semi Bold (やや太め)
.font-semibold {
font-family: "Noto Sans JP", sans-serif;
font-weight: 600;
}

700: Bold (太字)
.font-bold {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
}

800: Extra Bold (極太)
.font-extrabold {
font-family: "Noto Sans JP", sans-serif;
font-weight: 800;
}

900: Black (超極太)
.font-black {
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
}

*/