@charset "utf-8";



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



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

.w1120 { width:90%; margin:0 auto; position:relative; }



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


.lpblk1 { display: none; }

.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 { display: none; }




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


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

.lpblk3bg2 { position: absolute; left: 0; width: 27%; 
/* 「最初は上から510pxの位置」＋「画面幅が広がるごとにその10%分下に下がる」 */
  top: calc(48% + 10vw);
	}
.lpblk3bg2 img { width: 100%; }

.lpblk3bg3 { position: absolute; right: 0; 
  top: calc(15% + 40vw);
	/* ▼ ここを変更 ▼ */
 /* 最小：45% ｜ 推奨（連動サイズ）：35% + 10vw ｜ 最大：60% */
  width: clamp(45%, 10% + 40vw, 75%);
	}
.lpblk3bg3 img { width: 100%; }

.lpblk3bg4 { position: absolute; bottom: 0; left: 0; width: 40%; background-color: #ddd; }
.lpblk3bg4 img { width: 100%; }


/*
##
*/

.lpblk3tx2 { margin: 0 auto; padding: 2em 0 0 0;  width: 90%; position: relative; z-index: 2; padding-bottom: 3em; }

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

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



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


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

.lpblk4tx1 { margin: 0 auto; padding: 4em 0 4em 0;  width: 90%; position: relative; z-index: 2; }


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

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



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

/* セルの基本設定 */
.comparison_table th,
.comparison_table td {
  padding: 0.5em 0.5em;
  text-align: left;
  vertical-align: middle;
		line-height: 1.4;
}

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

/* 中央列「比較項目」のスタイル */
.comparison_table .label {
  background-color: #EBF0F6; 
  color: #666666;
  font-weight: 700;
  width: 20%; 
		text-align: center;
}
.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: 8; }

.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: 90%; position: relative; z-index: 2; }


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

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


	.lpblk5tx2 { 
  position: relative; 
  margin: 1.5em auto 0 auto; 
  padding: 30px 40px 30px 40px; 
  width: 90%; 
  height: auto;
  
  background-image: url("../images/boxbg01_390_190.png"); 
  background-repeat: no-repeat; 
  
  /* ▼ ここを追加：縦横比を無視してボックスに100%フィットさせる ▼ */
  background-size: 100% 100%; 
}

.lpblk5tx2 p { 
	color: #FFF;
font-size: 0.9rem;
font-style: normal;
font-weight: 700;
line-height: 160%;
padding-left: 1em;
text-indent: -1em;
}



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

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



.lpblk5tx5 {
  margin: 1.5em auto 0 auto; 
  padding: 0 0 1em 0;  
  width: 90%; 
  position: relative; 
  z-index: 2; 
  
  /* 背景画像の設定 */
  background-image: none;
  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: 0.5em;
 display:flex;
	flex-wrap:wrap;
 justify-content: space-around;
}

.lpblk5tx5bx { width: 90%; margin-bottom: 2em; 
  display: flex;
  align-items: center; /* 左右の要素の「上下中央」を綺麗に揃える */
  justify-content: flex-start;
  gap: 20px; /* 丸ボックスと右側のテキストの間の隙間 */
}

.lp5mtc { margin-top: 0; }


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

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

		flex-shrink: 0; /* ★重要：画面が狭くなっても絶対に丸を横に潰さない指示 */
}

/* 2. 子要素（見出し文字） */
.lpblk5tx5bxtit h4 {
  text-align: center;
 
  font-size: 16px;
  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: 16px;
font-style: normal;
font-weight: 400;
line-height: 170%; /* 22.5px */
}



.lpblk5tx6 { margin: 0 auto; padding: 3em 0 0 0;  width: 100%; position: relative; z-index: 2; background-color: #fff; }


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


.lpblk5tx6wk { margin: 0 auto; width: 90%; padding-top: 1em;
 display: block;
	flex-wrap:wrap;
 justify-content: space-between;
}

.lpblk5tx6bx { width: 100%; position: relative; margin-top: 2em; }



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

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

.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: block;
align-items: center;
gap: 10px;
align-self: stretch;
}

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

.lpblk5tx6bxdmtk p { margin-top: 0.5em;
display: block;
align-items: center;
gap: 10px;
color: #727681;
font-size: 0.93rem;
font-style: normal;
font-weight: 600;
line-height: 150%;
}

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

.lpblk5tx6bxdnme h6 { 
color: #727681;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 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: 2em 0 4em 0; width: 100%;  background-color: #fff; }

.lpblk5tx7 {
  margin: 0 auto; 
  position: relative; 
  z-index: 2; 
  display: flex;
  width: 90%;
  padding: 1.5em 1.5em;
  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: justify;
 
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}



.lpblk5tx8 { margin: 2em auto  0 auto;

  display: flex;
  width: 100%;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 100px;
  
  /* 元のグラデーション */
  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: 16px;
font-style: normal;
font-weight: 700;
line-height: 120%;
}

.lpblk5tx8 p { color: #fff; 
text-align: left;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 140%;
}


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




.lpblk5tx9 { margin: 3.8em auto 0 auto; padding: 0 0 4em 0;  width: 100%; position: relative; z-index: 2; }


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


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


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

.lpblk5tx9bx { width: 100%; margin-top: 2em; }


.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;
text-align: center;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 19.5px */
}

.lpblk5tx9bxdata p { width: 100%;
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: 8; }


.lpblk6tx1 { margin: 0 auto; padding: 4em 0 4em 0;  width: 90%; position: relative; }


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



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

.lpblk6tx1bx { width: 100%; margin-top: 2em; }

.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: 100%;  max-width: 350px; margin: 1em auto 0 auto; position: relative; height: 220px; overflow: hidden; border-radius: 30px;}
.lpblk6tx1bximg img { width: 100%; }

.lpblk6tx1bxbun { margin: 0.5em auto 0 auto; width: 100%; }
.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: 100%;  max-width: 350px; 
  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: 3em 0 4em 0; width: 90%; position: relative; }

.lpblk7tx1 h2 { 
  text-align: center; 
  margin-bottom: 0.7em; 
  scroll-margin-top: 150px;
  color: #0363C4;
 
  font-size: 24px;
  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/bgimgft01sp.webp"); 
  background-repeat: no-repeat; 
  
  /* ▼ ここを追加 ▼ */
  background-size: cover;       /* 画像をアスペクト比を保ったまま全体に広げる */
  background-position: bottom center;  /* 画面が伸縮した際、画像の中央を基準にトリミングする */
}


.lpblk8tx1 { margin: 0 auto; padding: 3em 0 4em 0; width: 90%; position: relative; }

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


.lpblk8tx1 h3 {  
  /* ▼ 変更：ボックス自体の横幅を文字ぴったりにし、左右autoでド真ん中へ */
  width: fit-content;
  margin: 0 auto 1em auto;
  
  /* ▼ 変更：文字自体も中央揃えに */
  text-align: left;
  
  /* ▼ 変更：左右の余白（画面端にぶつかったときの保険） */
  padding: 0 20px; 
  box-sizing: border-box;

  color: #FFF;
 
  font-size: 22px;
  font-style: normal;
  font-weight: 800;
  line-height: 33.6px;
  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: 100%; /* 本文の幅（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: 16px;  /* アイコンの適切なサイズ */
  height: 16px;
  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: 13px; /* 縦に並んだときの間隔 */
    padding: 15px 15px;
    width: 100%; /* スマホ画面の左右に少し余白を作る */
  }

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

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



footer { 
  position: relative; 
  width: 100%; 
		padding: 2em 0 2em 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: 8px;               /* アイテム同士の横の隙間（画像に合わせて広めに設定） */
  margin: 0.5em auto 0 auto;
  width: 100%;
  max-width: 100%;
  flex-direction: column;  /* 1行目：横並びを解除して縦並びにする */
}

/* 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: 0.8rem;         /* 見本画像に合わせた、少し大きめで見やすいサイズ */
  line-height: 1.3;
}

.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: block; position: absolute; top: 0; left: 0; width: 100%; z-index: 9; }

.lphsplef { position: absolute; top: 0; left: 0; width: 155px; }

.lphsplefbk { position: absolute; top: -20px; left: 0; width: 155px; }
.lphsplefbk img { width: 100%; }

.lphsplogo { position: absolute; top: 15px; left: 20px; width: 70px; }
.lphsplogo img { width: 100%; }



.lphsprig { position: absolute; top: 10px; right: 10px; width: 186px; 
display: flex;
height: 56px;
padding: 15px 15px;
align-items: center;
gap: 8px;
border-radius: 35px;
background: #FFF;
box-shadow: 0 0 3px 0 rgba(44, 64, 82, 0.25);
}

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

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

.lphsprigbtn::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）にする */
.lphsprigbtn:hover::after {
  opacity: 1;
}
.lphsprigbtn { color: #fff; font-size: 0.9rem; }



/* メニューリンクボタン */
.mn_button_container { display: block;
	position: absolute; top: 27px; right: 29px; width: 30px; height: 23px; z-index: 99;
 /* 任意の配置用スタイル（必要に応じて追加） */
}


/* --- メニュー表示中、外側のスクロールバーを完全に消す --- */
html.is-menu-open,
body.is-menu-open {
  overflow: hidden !important;
  height: 100%; /* スクロール領域をなくす */
}


/* --- メニュー本体の設定 --- */
.overlay-menu { 
		display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(241, 246, 253, 0.9);
  z-index: 9999;
  
  /* スクロール設定 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* --- スクロールバー非表示（Firefox / IE用） --- */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE, Edge (旧) */
}

/* --- スクロールバー非表示（Chrome / Safari / Edge用） --- */
.overlay-menu::-webkit-scrollbar {
  display: none;
}


/* --- メニューの内側（白背景の部分） --- */
.menu-inner {
  position: relative;
  width: 90%;          /* スマホ等での横幅 */
  max-width: 1000px;   /* PCでの最大幅 */
  margin: 0 auto;
  box-sizing: border-box;
}

/* --- ボタン画像のスタイル --- */
.menu-open-btn, .menu-close-btn { z-index: 10;
cursor: pointer;
transition: opacity 0.3s;
display: flex; /* 中の画像を中央に寄せる */
justify-content: center;
align_items: center;
width: 30px;
height: 23px;
}

/* --- ボタン画像のスタイル --- */
.menu-open-btn img, .menu-close-btn img {
padding-top: 0;
width: 30px;
height: 23px;
display: block;
}

.menu-open-btn:hover, .menu-close-btn:hover {
  opacity: 0.7;
}

/* 閉じるボタンの配置（menu-inner内の右上） */
.menu-close-btn {
position: absolute;
top: 27px; right: 29px;
}

/* --- JSで制御するクラス：メニュー表示時に背面を隠す --- */
body.is-menu-open #js-main-content,
body.is-menu-open #js-footer {
/*  display: none; */
}




.mn26mmnu { position: relative; width: 80%; margin: 7em auto 0 auto; }

.mn26mmnu p { }

.mn26mmnu p a {
	color: #0363C4;
 display: block;
 font-size: 1rem;
 font-weight: 600; 
 font-style: normal;
	padding: 0.8em 0 0.8em 0;
	border-bottom: 1px solid #0363C4;
	line-height: 1.4;
}



.lpblk2sp { position: relative; margin: 2em auto 1em auto;  width: 100%; }

.lpblk2spswk { position: relative; width: 80%; padding: 20px; margin: 0 auto;
border-radius: 4px;
background: #FFF;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

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

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

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

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




.lpblk4bg0 { position: absolute; top: -30px; left: 0; width: 40%; max-width: 260px; }
.lpblk4bg0 img { width: 100%; }



.lpblk5bg0 { position: absolute; top: -45px; right: 0; width: 40%; max-width: 260px; }
.lpblk5bg0 img { width: 100%; }



.lpblk5spil01 { position: relative; width: 100%; max-width: 440px; }
.lpblk5spil01 img { width: 100%; }



.lpblk5t9bg0 { position: absolute; top: -95px; right: 0; width: 40%; max-width: 260px; }
.lpblk5t9bg0 img { width: 100%; }



.lpblk6bg0 { position: absolute; top: -40px; left: 0; width: 40%; max-width: 260px; }
.lpblk6bg0 img { width: 100%; }






/* ===================================================
   ベース設定（画面幅に合わせてどこまでも拡大縮小する設定）
   =================================================== */
.lpblk3tx1sp {
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 640px; /* 枠の最大幅は640px */
  position: relative;
  z-index: 2;
  top: -15px;
  box-sizing: border-box;
}

/* 1. 角丸ボックスのベース設定 */
.lpblk3fk1sp {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.1em 1.5em;
  width: auto;
  height: auto;
  transform: rotate(-0.11deg);
  border-radius: 5.6vw; /* 画面幅に完全追従 */
  background: #E5E9F1;

  /* 文字スタイル：482pxのとき1.2rem(19.2px)になる比率 */
  color: #727681;
  font-size: 4vw; 
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  position: relative; 
}

/* 2. 下側の三角（吹き出しのツノ）の設定 */
.lpblk3fk1sp::after {
  content: "";
  position: absolute;
  bottom: -2.5vw; 
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 2.5vw 2vw 0 2vw;
  border-color: #E5E9F1 transparent transparent transparent;
}

.lpblk3fk2sp { 
  position: relative; 
  margin-top: 0.6em;
}

.lpblk3fk2sp p { 
  text-align: left;
  color: #727681;
  font-size: 4vw; /* 482pxのとき1.2rem(19.2px)になる比率 */
  font-style: normal;
  font-weight: 700;
  line-height: 150%; 
  margin: 0;
  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);
}

.lpblk3tx1sp h1 { 
  margin-top: 0.1em;
  margin-bottom: 0;
  font-size: 8.9vw; /* 482pxのとき43pxになる比率 */
  font-style: normal;
  font-weight: 800;
  line-height: 115%;
  width: fit-content;
  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);
}

.lpblk3tx1sp h1 span {
  font-size: 10.5vw; /* 482pxのとき51pxになる比率 */
}

.lpblk3tx1sp h2 { 
  margin-top: 0.6em;
  margin-bottom: 0;
  font-size: 4vw; /* 482pxのとき1.2remになる比率 */
  font-style: normal;
  font-weight: 800;
  line-height: 150%; 
  width: fit-content;
  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);
}


/* ===================================================
   画面幅が712px以上になったら、文字サイズの拡大をストップ
   =================================================== */
@media screen and (min-width: 712px) {
  .lpblk3fk1sp {
    border-radius: 40px; /* 712px時点の角丸で固定 */
    font-size: 28.5px;   /* 712px時点の文字サイズで固定 */
  }
  .lpblk3fk1sp::after {
    bottom: -17.8px;
    border-width: 17.8px 14.2px 0 14.2px; /* しっぽのサイズを固定 */
  }
  .lpblk3fk2sp p { 
    font-size: 28.5px;   /* 文字サイズを固定 */
  }
  .lpblk3tx1sp h1 { 
    font-size: 63.4px;   /* タイトルサイズを固定 */
  }
  .lpblk3tx1sp h1 span {
    font-size: 74.8px;   /* 「受け身ゼロ！」を固定 */
  }
  .lpblk3tx1sp h2 { 
    font-size: 28.5px;   /* サブタイトルサイズを固定 */
  }
}





/* 20260701 タイトル修正 */

  /* ===================================================
     【共通・482px以下〜712pxまで】
     画面幅に合わせてどこまでも拡大縮小するベース設定
     =================================================== */
  .lpblk3tx1sp {
    margin: 0 auto;
    padding: 0;
    width: 90%;
    max-width: 640px; /* 枠の最大幅は640px */
    position: relative;
    z-index: 2;
    top: -30px;
    box-sizing: border-box;
  }

  /* 1. 角丸ボックスのベース設定 */
  .lpblk3fk1sp {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.1em 1.5em;
    width: auto;
    height: auto;
    transform: rotate(-0.11deg);
    border-radius: 5.6vw; /* 画面幅に完全追従 */
    background: #E5E9F1;

    /* 文字スタイル：482pxのとき1.2rem(19.2px)になる比率 */
    color: #727681;
    font-size: 4vw; 
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
    position: relative; 
  }

  /* 2. 下側の三角（吹き出しのツノ）の設定 */
  .lpblk3fk1sp::after {
    content: "";
    position: absolute;
    bottom: -2.5vw; 
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 2.5vw 2vw 0 2vw;
    border-color: #E5E9F1 transparent transparent transparent;
  }

  .lpblk3fk2sp { 
    position: relative; 
    margin-top: 0.6em;
  }

  .lpblk3fk2sp p { 
    text-align: left;
    color: #727681;
    font-size: 4vw; /* 482pxのとき1.2rem(19.2px)になる比率 */
    font-style: normal;
    font-weight: 700;
    line-height: 150%; 
    margin: 0;
    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);
  }

  .lpblk3tx1sp h1 { 
    margin-top: 0.1em;
    margin-bottom: 0;
    font-size: 8.9vw; /* 482pxのとき43pxになる比率 */
    font-style: normal;
    font-weight: 800;
    line-height: 115%;
    width: fit-content;
    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);
				letter-spacing: -1px;

		}

  .lpblk3tx1sp h1 span {
    font-size: 10.5vw; /* 482pxのとき51pxになる比率 */
  }

  .lpblk3tx1sp h2 { 
    margin-top: 0.6em;
    margin-bottom: 0;
    font-size: 4vw; /* 482pxのとき1.2remになる比率 */
    font-style: normal;
    font-weight: 800;
    line-height: 150%; 
    width: fit-content;
    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);
  }


  /* ===================================================
     【712px 〜 979pxの間】
     文字サイズが大きくなりすぎないよう、拡大をストップしてサイズを固定
     =================================================== */
  @media screen and (min-width: 712px) {
    .lpblk3fk1sp {
      border-radius: 40px; /* 712px時点の角丸で固定 */
      font-size: 28.5px;   /* 712px時点の文字サイズで固定 */
    }
    .lpblk3fk1sp::after {
      bottom: -17.8px;
      border-width: 17.8px 14.2px 0 14.2px; /* しっぽのサイズを固定 */
    }
    .lpblk3fk2sp p { 
      font-size: 28.5px;   /* 文字サイズを固定 */
    }
    .lpblk3tx1sp h1 { 
      font-size: 63.4px;   /* タイトルサイズを固定 */
    }
    .lpblk3tx1sp h1 span {
      font-size: 74.8px;   /* 「受け身ゼロ！」を固定 */
    }
    .lpblk3tx1sp h2 { 
      font-size: 28.5px;   /* サブタイトルサイズを固定 */
    }
  }

}





/* 20260701 タイトル下リンクボタン追加 */

.spw70 { position: relative; width: 75%; margin: 0 auto 1em auto; }


.lpblk5wsp7 { margin: 0 auto;

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

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

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

.lpblk5wsp7::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）にする */
.lpblk5wsp7:hover::after {
  opacity: 1;
}
.lpblk5wsp7 { color: #fff; 
text-align: center;
font-size: 1.1rem;
font-style: normal;
font-weight: 700;
line-height: 120%;
}

.lpblk5wsp7 p { color: #fff; 
text-align: left;
font-size: 1.1rem;
font-style: normal;
font-weight: 700;
line-height: 140%;
}


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



.lpblk5wsp7w { margin: 1em auto 0 auto;

  display: flex;
  width: 100%;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 100px;
		
		background-color: #fff;
		border: 1px solid #0363C4;
  
  /* 必須：中身を重ねるための準備 */
  position: relative;
  z-index: 1;
  overflow: hidden; 

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

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

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

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

.lpblk5wsp7w p {
text-align: left;
font-size: 1.1rem;
font-style: normal;
font-weight: 700;
line-height: 140%;
    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;
}





































































































































































































































































































































































































































}