/* ========================================================================
ResetCss
======================================================================== */


/* 要素 フォントサイズ・マージン・パディングをリセット */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	font-weight: normal;
	background:transparent;
}

/* 行の高=フォントサイズ*/
body {
	font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP","BIZ UDGothic", sans-serif, "Helvetica Neue", "Segoe UI", Meiryo;
	line-height:1;
}

/* 新規追加要素をブロック要素化 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}

/* ulのマーカー非表示 */
ol, ul {
	list-style: none;
}

/* 引用符の非表示 */
blockquote, q {
	quotes:none;
}

/* blockquote要素、q要素の前後にコンテンツ非表示 */
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

/* フォントサイズ　リセット フォントの縦方向 ベースライン揃え 点線削除 */
a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	outline: none;
	text-decoration: none;
}

/* ins要素 デフォルトセット 色を変える場合はここで変更 */
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

/* mark要素 デフォルトセット 色やフォントスタイルを変える場合はここで変更 */
mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

/* テキスト 打ち消し線 */
del {
	text-decoration: line-through;
}

/* IE　デフォルトで点線を下線表示設定　下線設定 マウスオーバー時 ヘルプカーソル表示可 */
abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

/*　隣接するセルのボーダーを重ねて表示　*/
table {
	border-collapse:collapse;
	border-spacing:0;
}

/* 水平罫線デフォルトリセット */
hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}

/* 縦方向の揃え 中央揃え */
input, select {
	vertical-align:middle;
}

/* 画像を縦に並べた時に余白0 */
img {
	vertical-align: top;
	font-size: 0;
	line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/*画像レスポンシブ*/
img {
	max-width: 100%;
	height: auto;
}

/*改行のweb際のBR高さバグ修正*/
br {
	line-height: inherit;
}

/* デフォルト：両方非表示 */
.pc-only { display: none; }
.sp-only { display: none; }

/* PC表示：1001px以上 */
@media screen and (min-width: 768px) {
    .pc-only { display: flex; }
    .sp-only { display: none; }
}

/* SP表示：1000px以下 */
@media screen and (max-width: 767px) {
    .pc-only { display: none !important; }
    .sp-only { display: flex !important; }
}


/*  リンク類
-------------------------------------------------------------*/
a{transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; color: #181C1F;}
a:hover{opacity: 0.6; transition:.2s all;}
a img{transition:.2s all;}
a img:hover{opacity: 0.8; transition:.2s all;}
button{transition:.2s all;}
button:hover{opacity: 0.8; transition:.2s all;}
form{margin: 0;}


/* その他 共通
-------------------------------------------------------------*/
html {overflow: auto; height: 100%;}
body{
	font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP","BIZ UDGothic", sans-serif, "Helvetica Neue", "Segoe UI", Meiryo;
	background: none;
	position: relative;
	margin: 0px;
	box-sizing: border-box;
	padding-top: 0;
	transition: padding-top 0.3s ease;
	font-feature-settings: "palt" 1;
}

@media (max-width: 1000px) {
}

/* =================================================================
float
=================================================================*/
.float {width: 100%; height: 8em; background: rgba( 255, 255, 255, 0.70 ); position: fixed; bottom: 0; display: flex; justify-content: center;z-index:300; padding-top: 0.5em;}
.float img {position: relative; z-index:500; max-height:100%;}
.float a {position: fixed; z-index:400;}

@media screen and (max-width: 767px) {
	.float {width: 100%; height:auto;  position: fixed; bottom: 0; display: flex; justify-content: center; z-index:300; padding-top: 0.5em;}
	.float img {width: 100%; position: inherit; z-index:500; justify-self:anchor-center; max-width:600px; height:auto;}
	.float a {position:relative; z-index:400;}
}


/* =================================================================
float Safari用
=================================================================*/
_::-webkit-full-page-media, _:future, :root .float{
	background: rgba( 255, 255, 255, 0.70 );  display: grid;
  place-content: center; padding:2em 0;
}
_::-webkit-full-page-media, _:future, :root .float img{
	background: rgba( 255, 255, 255, 0.70 );  display: grid;
  place-content: center; padding:2em 0; 
}

/* =================================================================
float Safari用
=================================================================*/

.link-icon-outside {
	position: relative;
	padding-right: .5em;
	margin-right: 1em
}

.link-icon-outside::before {
	content: "\e315";
	font-family: icomoon;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: -1em;
	font-size: initial
}

.link-icon-outside::after {
	content: "\f08e";
	font-family: icomoon;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	right: -.8em;
	font-size: initial
}

/* =================================================================
fv
=================================================================*/
.fv {background-size: cover; background-color: #003572; position: relative;}
.fv img {display: block; margin: auto; width: 100%; max-width: 1000px;}
.fv h1 {font-size: 160px; font-weight: 800; color: #fff; text-align: center; margin-bottom: 52px;}
.fv h1 span {font-size: 75%; font-weight: 800;}
.fv a {text-align: center; font-size: 25px; color: #f5c440; font-weight: 500;  line-height: 1.3; letter-spacing: 0.01em;}
.fv p {text-align:center; width: 950px; margin:auto; color: #fff; font-size: 25px; letter-spacing: 5px; line-height: 2em; padding: 40px 0; position: absolute; top: 85%; left: 50%; transform: translate(-50%, -50%);}
.fv .title1 img {display: block; margin: 0 60px 60px; max-width: 30%;}



@media screen and (max-width: 767px) {
	.fv {background-color: #003572;}
	.fv img {display: block;}
	.fv h1 {font-size: 80px; line-height: 1.2; margin-bottom: 50px;}
	.fv a {font-size: 20px;}
	.fv p {text-align:center; line-height: 2.0; max-width: 95%;  font-size: 0.5em; letter-spacing: 2px;}
	.fv .title1 img {display: block; margin: 0 auto 20px; max-width: 50%;}
}


/* =================================================================
fv-02
=================================================================*/
.fv-02 {background-image: url('../img/stock-new.png'); background-size: cover;}
.fv-02 img {display: block; margin: auto;}
.fv-02 a {text-align: center; font-size: 25px; color: #f5c440; font-weight: 500;  line-height: 1.3; letter-spacing: 0.01em;}
.fv-02 p {text-align:center; width: 950px; margin:auto; color: #fff; font-size: 25px; letter-spacing: 5px; line-height: 2em; padding: 40px 0;}
.fv-02 .title1 img {display: block; margin: 0 60px 60px; max-width: 30%;}

@media screen and (max-width: 767px) {
	.fv-02 {background-image: url('../img/stock-new.png'); background-size: cover;}
	.fv-02 img {display: block;}
	.fv-02 h1 {font-size: 80px; line-height: 1.2; margin-bottom: 50px;}
	.fv-02 a {font-size: 20px;}
	.fv-02 p {text-align:center; margin:auto; color: #fff; font-size: 10px; letter-spacing: 5px; line-height: 2em; padding: 20px 0;}
	.fv-02 .title1 img {display: block; margin: 0 auto 20px; max-width: 50%;}
}
/* =================================================================
fv-stock
=================================================================*/
.fv-stock {background-color:#001e42; background-size: cover;}
.fv-stock img {display: block; margin: auto; max-width: 22%; margin-left: 25px;}
.fv-stock a {text-align: center; font-size: 25px; color: #f5c440; font-weight: 500;  line-height: 1.3; letter-spacing: 0.01em;}
.fv-stock p {text-align:right; width: 950px; margin:auto; color: #fff; font-size: 33px; letter-spacing: 5px; line-height: 2em; padding: 40px 0;}
.fv-stock .title1 img {display: block; margin: 0 60px 60px; max-width: 30%;}

@media screen and (max-width: 767px) {
	.fv-stock {background-color:#001e42; background-size: cover;}
	.fv-stock img {display: block; max-width: 30%; margin-left: 10px;}
	.fv-stock h1 {font-size: 80px; line-height: 1.2; margin-bottom: 50px;}
	.fv-stock a {font-size: 20px;}
	.fv-stock p {text-align:right; margin:auto; max-width: 90%; color: #fff; font-size: 10px; letter-spacing: 2px; line-height: 2.5em; padding: 20px 0;}
	.fv-stock .title1 img {display: block; margin: 0 auto 20px; max-width: 50%;}
}

/* =================================================================
cp　 現物手数料無料キャンペーン
=================================================================*/
.cp {background-size: cover; background-color: #002355; position: relative; padding-bottom: 30px;}
.cp img {display: block; margin: auto; width: 100%; max-width: 1000px;}
.cp a img {display: block; margin: auto; width: 100%; max-width: 1000px;}
.cp h1 {font-size: 160px; font-weight: 800; color: #fff; text-align: center; margin-bottom: 52px;}
.cp h1 span {font-size: 75%; font-weight: 800;}
.cp h2 {
    letter-spacing: 5px;
    font-size: 40px;
    font-weight: 500;
    color: #fff;
    margin: 10px auto;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.cp h2 img{width:150px; max-width:none; margin:0; flex-shrink:0;}
.cp h3 {font-size: 30px; border-bottom: #000 1px solid; margin-top: 10px;line-height: 1.8;}
.cp a {text-align: center; font-size: 25px; color: #f5c440; font-weight: 500;  line-height: 1.3; letter-spacing: 0.01em;}
.cp p {text-align:center; width: 950px; margin: 20px auto 0; color: #fff; font-size: 25px; letter-spacing: 5px; line-height: 2em; padding: 0; position: static; transform: none;}
.cp .title1 img {display: block; margin: 0 60px 60px; max-width: 30%;}
.cp ul { width: 100%; line-height: 1.8;}
.cp .box {max-width: 1000px; background-color: #FFF; padding: 80px; margin: auto;}
.cp .btn {background-color: #FFF; color: red; padding: 10px 20px; border-radius: 8px; font-weight: 600; margin-right: 10px;}
.cp .btn02 {padding: 90px 0 0 0; max-width: 900px; margin: auto;}
.cp .title {font-size: 40px; text-align: center; color: #002355; margin: 0 auto 40px; font-weight: 500;}
.cp .note {text-align: right; margin-top: 0; padding-bottom: 30px; font-size: 20px;}

@media screen and (max-width: 767px) {
	.cp {background-color: #002355;}
	.cp img {display: block;}
	.cp h1 {font-size: 80px; line-height: 1.2; margin-bottom: 50px;}
	.cp a {font-size: 20px;}
	.cp p {text-align:center; line-height: 2.0; max-width: 95%;  font-size: 0.5em; letter-spacing: 2px;}
	.cp .title1 img {display: block; margin: 0 auto 20px; max-width: 50%;}
	.cp .box {padding: 20px 15px; width: 95%;}
	.cp ul {width: 100%; padding: 0 20px;}
	.cp .btn {padding: 8px 14px; font-size: 18px; margin-right: 10px; margin-bottom: 10px; display: inline-block;}
	.cp .btn02 {padding: 40px 15px 0 15px; max-width: 100%;}
	.cp  .title {font-size: 24px; margin: 0 auto 20px; line-height: 1.4;}
	.cp  .note {font-size: 14px; padding-bottom: 15px;}
	.cp h2 {font-size: 24px; letter-spacing: 2px; line-height: 1.4;}
  .cp h3 {font-size: 20px; margin-top: 5px; line-height: 1.5;}
}
/* =================================================================
cp01　 現物手数料無料キャンペーン
=================================================================*/
.cp01 {background-size: cover; position: relative;}
.cp01 img {display: block; margin: auto; width: 100%; max-width: 1000px;}
.cp01 a img {display: block; margin: auto; width: 100%; max-width: 1000px;}
.cp01 h1 {font-size: 160px; font-weight: 800; color: #fff; text-align: center; margin-bottom: 52px;}
.cp01 h1 span {font-size: 75%; font-weight: 800;}
.cp01 h2 {letter-spacing: 5px; font-size: 40px; font-weight: 500; color: #fff; text-align: center; margin: 50px;}
.cp01 h3 {font-size: 30px; border-bottom: #000 1px solid; margin-top: 10px;line-height: 1.8;}
.cp01 a {text-align: center; font-size: 25px; color: #f5c440; font-weight: 500;  line-height: 1.3; letter-spacing: 0.01em;}
.cp01 p {text-align:center; width: 950px; margin: 20px auto 0; color: #fff; font-size: 25px; letter-spacing: 5px; line-height: 2em; padding: 0; position: static; transform: none;}
.cp01 .title1 img {display: block; margin: 0 60px 60px; max-width: 30%;}
.cp01 ul { max-width: 1000px; line-height: 1.8;}
.cp01 .box {max-width: 1000px; background-color: #FFF; padding: 80px; margin: auto;}
.cp01 .btn {background-color: #FFF; color: red; padding: 10px 20px; border-radius: 8px; font-weight: 600; margin-right: 10px;}
.cp01 .btn02 {padding: 90px 0 0 0; max-width: 900px; margin: auto;}
.cp01 .title {font-size: 40px; text-align: center; color: #FFF; margin: auto; font-weight: 500; padding: 20px 0;
}
.cp01 .note {text-align: right; margin-top: 0; padding-bottom: 30px; font-size: 20px; color: #000;}
.cp01 .image-wrapper {
  position: relative;
	margin: auto;
	background-color: #002355;
}

.cp01 .image-wrapper .overlay {
  position: absolute;
  bottom: 150px;   /* 親の下端に合わせる */
  left: 400px;     /* 親の左端に合わせる */
  width: 275px; /* 元画像の約27% */
  pointer-events: none; /* 画像をクリック不可にする場合 */
}

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

	.cp01 img {display: block;}
	.cp01 h1 {font-size: 80px; line-height: 1.2; margin-bottom: 50px;}
	.cp01 a {font-size: 20px;}
	.cp01 p {text-align:center; line-height: 2.0; max-width: 95%;  font-size: 0.5em; letter-spacing: 2px;}
	.cp01 .title1 img {display: block; margin: 0 auto 20px; max-width: 50%;}
	.cp01 .box {padding: 20px 15px; width: 95%;}
	.cp01 ul {width: 100%; padding: 0 20px;}
	.cp01 .btn {padding: 8px 14px; font-size: 18px; margin-right: 10px; margin-bottom: 10px; display: inline-block;}
	.cp01 .btn02 {padding: 40px 15px 0 15px; max-width: 100%;}
	.cp01  .title {font-size: 24px; margin: 0 auto 20px; line-height: 1.4;}
	.cp01  .note {font-size: 14px; padding-bottom: 15px;}
	.cp01 h2 {font-size: 24px; letter-spacing: 2px; margin: 30px 10px; line-height: 1.4;}
  .cp01 h3 {font-size: 20px; margin-top: 5px; line-height: 1.5;}
}
/* =================================================================
section1
=================================================================*/
.section1 {padding: 100px 0 95px; background-color:#eef7ff;}
.section1 .title2 {background-color:#01295f; height: 150px;}
.section1 .point {max-width: 1000px; margin: auto; margin-bottom: 90px;}
.section1 .stock-cost {position: relative; border: 2px solid #01295f; border-top: 10px solid #01295f; padding: 20px 15px 15px 15px; max-width: 900px; margin: auto; margin-top: 100px; margin-bottom: 50px;}
.section1 .stock-cost .title {position: absolute; top: -30px; left: 30%; background: #ffffff; color: #01295f; padding: 0 8px; font-size: 40px; font-weight: 600;}

.section1 .point-title h2 {background-color:#eef8ff; background-size: cover;}
.section1 .point img {display: block; max-width: 90%;}

.section1 h3 {font-size: 30px; font-weight: 500; text-align: center; line-height: 45px; margin-bottom: 15px;}
.section1 h2 img {display: block; margin: auto; max-width: 600px;}
.section1 table {width: 100%; max-width: 1220px; margin: 0 auto 12px; border-spacing: 10px; border-collapse: separate;}
.section1 th,
.section1 td {text-align: center; vertical-align: middle; font-size: 24px; width: 162px; height: 90px; font-weight: 600;}
.section1 td {background: #e6e6e6;}
.section1 strong {font-size: 200%; font-weight: 800;}
.section1 tr:nth-child(1) th {background: #b3b3b3; font-weight: 600;}
.section1 tr th:nth-child(1) {background: #b3b3b3; font-weight: 600;line-height: 1.2;}
.section1 .no-bg {background: #fff !important;}
.section1 .neotore {background: #fff; height: 100%; display: flex; justify-content: center; align-items: center; border: 4px solid #ff0000; box-sizing: border-box;}
.section1 .neotore .inner {font-weight: 600;}
.section1 .neotore-title {background: #ff0000 !important; width:200px;}
.section1 p {width: 100%; max-width: 1000px; margin: auto; line-height: 1.285714285714286;}
.section1 .marker {background: linear-gradient(transparent 65%, #f5c440 80%);}
.section1 .inner {width: 100%; max-width: 900px; margin: auto;}
.section1 .flex {margin: auto; display: flex; justify-content: space-between; padding: 20px 100px; text-align: center;}
.section1 h4 {font-size: 25px; letter-spacing: 0.01em; font-weight: 800; text-align:center; margin-bottom: 60px;}
.section1 .extenal-link:after {
  padding: 0 0 0 0.2rem;
  display: inline-block;
  content:url('https://www.sbineotrade.jp/landing/sec2/img/link-icon.png');
}


@media screen and (max-width: 767px) {
	.section1 {padding: 30px 0 0;}
	.section1 .title2 {height: 10em;}
	.section1 .point {max-width: 1000px; margin: 0 auto 20px;}
	.section1 .stock-cost02 {position: relative; border-top: 5px solid #01295f; padding: 20px 15px 15px 15px; max-width: 900px; margin: auto; margin-top: 100px; margin-bottom: 0px;}
	.section1 .stock-cost02 .title {position: absolute; top: -13px; left: 20%; background: #ffffff; color: #01295f; padding: 0 8px; font-size: 20px; font-weight: 400;}
	.section1 .stock-cost02 .flex .bd {position: relative; border: 1px solid #000; padding: 35px 15px 25px 15px; max-width: 900px; margin: auto; margin-top: 20px; margin-bottom: 50px;}
	.section1 .stock-cost02 .flex .bd .title {position: absolute; top: -13px; left: 25%; background: #ffffff; color: #000; padding: 0 8px; font-size: 30px; font-weight: 400;}
	.section1 h2 img {max-width: 60%; padding-top: 15px;}
	.section1 h3 {font-size: 16px; font-weight: 500; text-align: center; line-height: 25px; margin-bottom: 15px;}
	.section1 .scroll {overflow-x: scroll; margin-bottom: 23px;}
	.section1 .scroll table {white-space: nowrap; table-layout: fixed; border-spacing: 7px; margin-bottom: 22px;}
	.section1 th,
	.section1 td {width: 8em; height: 4em; font-size: 16px;}
	.section1 p {font-size: 14px; padding: 0 20px; }
	.section1 .scroll::-webkit-scrollbar { width: 10px; height: 20px; }
	.section1 .scroll::-webkit-scrollbar-track { background: #e6e6e6; border-radius: 10px; }
	.section1 .scroll::-webkit-scrollbar-thumb { background: #999999; border-radius: 10px; }
	.section1 .scroll::-webkit-scrollbar-thumb:hover { background: #555; }
	.section1 .flex {flex-direction: column; padding :20px 0; display: block;}
	.section1 h4 {font-size: 14px; padding:0 10px;}
	.section1 .extenal-link:after {
  padding: 0 0 0 0.2rem;
  display: inline-block;
  content:url('https://www.sbineotrade.jp/landing/sec2/img/link-icon02.png');
}	
}


/* =================================================================
cta
=================================================================*/
.cta {background-image: url('../img/cta_bg.png'); background-size: cover; max-width: 1920px; height: 578px; margin: auto; padding: 177px 0 0;}
.cta p {text-align: center; font-size: 32px; color: #fff; font-weight: 500; line-height: 1.3; letter-spacing: 0.01em;}
.cta p strong {color: #ffff00; font-size: 150%; font-weight: 500; }
.cta .button {margin: 37px auto 0; display: block; width: 800px; height: 100px;}
.cta .button img {display: block;}

@media screen and (max-width: 767px) {
	.cta {background-image: url('../img/cta_bg_sp.png'); height: 257px; padding-top: 77px;}
	.cta p {font-size: 16px; margin-bottom: 20px;}
	.cta .button {margin: 15px auto 0; width: 356px;}
	.cta .button img {max-width: 97%; margin: auto;}
}

/* =================================================================
cta2
=================================================================*/
.cta2 {max-width: 1920px;  margin: auto; }
.cta2 p {text-align: center; font-size: 32px; color: #fff; font-weight: 500; line-height: 1.3; letter-spacing: 0.01em; }
.cta2 p strong {color: #ffff00; font-size: 150%; font-weight: 500;}
.cta2 .button {margin: 37px auto 0; display: block; width: 800px; }
.cta2 .button img {display: block;}

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

	.cta2 p {font-size: 15px; }
	.cta2 .button {margin: 15px auto 0; width: 356px;}
}
/* =================================================================
white-card
=================================================================*/

/* =======================
   白カード
======================= */
.white-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 50px;
    margin: 0px auto 95px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    max-width: 1000px;
    width: 100%;
}

/* タイトル */
.white-card h2 {
    font-size: 48px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 30px;
    color: #01295f;
}
@media screen and (max-width: 767px) {.white-card h2 {font-size: 40px;}}
/* =======================
   PC用 文章と画像 横並び
======================= */
.intro-wrapper.pc-only {
    display: flex;                  
    align-items: flex-start;        
    justify-content: space-between; 
    gap: 20px;
    margin-bottom: 20px;
}

.intro-wrapper.pc-only .intro {
    flex: 1;
    font-size: 18px;
    line-height: 1.8;
}

.intro-wrapper.pc-only .ratio-img {
    max-width: 30%;
    height: auto;
}

/* =======================
   SP用 文章と画像 縦並び
======================= */
.intro-wrapper.sp-only {
    display: none;                  
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;            
}

.intro-wrapper.sp-only .intro {
    font-size: 16px;
    line-height: 1.7;
}

.intro-wrapper.sp-only .ratio-img-sp {
    max-width: 50%;
    display: block;
    margin: 0 auto;
    height: auto;
}

.sp-caption {
    border: 1px solid #01295f;
    color: #01295f;
    padding: 5px 50px;
    font-size: 20px;
    text-align: center;
    display: inline-block;
}

/* =======================
   メリット・デメリット
======================= */
.flex.merit-demerit {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0;
    text-align: left;
}

.flex.merit-demerit .box {
    flex: 1;
    min-width: 280px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}



.merit-box h3 { background-color: #ff0000; }
.demerit-box h3 { background-color: #333; }

.merit-box p, .demerit-box p {
    padding: 15px 20px;
    margin: 0;
    background-color: #fff;
    line-height: 1.7;
}

.merit-box p { border: 2px solid #ff0000; }
.demerit-box p { border: 2px solid #333; }

/* 本文ハイライト */
.intro .highlight {
    color: #01295f;
    font-weight: 600;
}

/* --- メリット・デメリット 共通設定 --- */
.flex.merit-demerit {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0;
    text-align: left;
}

.flex.merit-demerit .box {
    flex: 1;
    min-width: 280px;
    box-sizing: border-box;

    /* 追加 */
    display: flex;
    flex-direction: column;
}
/* --- タイトル付きボックス --- */
.merit-box h3,
.demerit-box h3 {
    margin: 0;
    padding: 10px 0;
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
}

/* メリットタイトル背景 */
.merit-box h3 { background-color: #ff0000; }

/* デメリットタイトル背景 */
.demerit-box h3 { background-color: #333333; }

/* 内容の枠（タイトル色に合わせる） */
.merit-box p {
    border: 2px solid #ff0000;
    padding: 15px 20px;
    margin: 0;
    background-color: #fff;
    line-height: 1.7;

    /* 追加：高さを揃える */
    flex: 1;
}

.demerit-box p {
    border: 2px solid #333333;
    padding: 15px 20px;
    margin: 0;
    background-color: #fff;
    line-height: 1.7;

    /* 追加：高さを揃える */
    flex: 1;
}

/* =================================================================
section3
=================================================================*/
.section3 h2 {font-size: 48px; font-weight: 800; text-align: center; margin-bottom: 65px;}
.section3 h2 strong {font-size: 150%; font-weight: 800;}
.section3 .inner {width: 100%; max-width: 1000px; margin: auto;}
.section3 .point-title h2 {background-color:#eef8ff; background-size: cover;}
.section3 h2 img {display: block; margin: auto; max-width: 30%; padding-top: 40px;}
.section3 .box img {margin-bottom: 100px;}
.section3 h3 {text-align: center; letter-spacing: 0.01em; font-size: 35px; font-weight: 800; margin-bottom: 60px; color:#01295f;}
.section3 h3 strong {font-size: 150%; font-weight: 800; display: inline-block; margin-top: 25px;}
.section3 .box h4 {background: #eef8ff; height: 40px; display: flex; align-items: center; font-size: 25px; letter-spacing: 0.01em; padding: 0 16px; font-weight: 800; margin-bottom: 18px;}
.section3 .box p {font-size: 20px; letter-spacing: 0.05em; line-height: 2; padding-left: 23px; margin-bottom: 49px; text-align: left;}
.section3 h2 {font-size: 48px; font-weight: 800; text-align: center; margin-bottom: 65px;}
.section3 .point-title h2 {background-color:#eef8ff; background-size: cover;}

@media screen and (max-width: 767px) {
	.section3 {padding: 50px 0 0;}
	.section3 h2 {font-size: 18px; line-height: 1.2; margin-bottom: 49px;}
	.section3 h2 strong {font-size: 130%;}
	.section3 p { font-size: 16px; letter-spacing: 0.05em; line-height: 2; padding: 15px;}
	.section3 h2 img {display: block; margin: auto; max-width: 60%; padding-top: 15px;}
	.section3 .inner {padding: 0 5px;}
	.section3 .inner p { font-size: 16px; letter-spacing: 0.05em; line-height: 2; padding: 15px;}
	.section3 .box {padding-bottom: 38px;}
	.section3 .box img {margin-bottom: 30px;}
	.section3 h3 {font-size: 22px; margin-bottom: 29px;}
	.section3 h3 strong {font-size: 20px; margin: 12px 0 0;}
	.section3 .box h4 {background: #eef8ff; height: 45px; display: flex; align-items: center; font-size: 20px; letter-spacing: 0.01em; padding: 0 16px; font-weight: 800; margin-bottom: 18px;}
	.section3 .box p {padding: 0 15px; margin-bottom: 22px; }
}

/* =================================================================
section4
=================================================================*/
.section4 {padding-top: 100px;}
.section4 h2 {text-align: center; font-weight: 800; font-size: 48px; letter-spacing: 0; margin-bottom: 76px; color:#01295f;}
.section4 h2 strong {font-weight: 800; font-size: 150%;}
.section4 .box {width: 100%; max-width: 1000px; display: flex; justify-content: space-between; margin: auto;}
.section4 .box + .box {margin-top: 70px;}
.section4 .box img {flex-shrink: 0;}
.section4 .box .text {width: 100%; max-width: 600px; margin-right: 20px;}
.section4 .box .text h3 {font-size: 25px; color: #000; padding: 0 0 0 17px; height: 40px; line-height: 1; display: flex; align-items: center; letter-spacing: 0.01em; margin-bottom: 8px; border-bottom: 1px solid #000;}
.section4 .box .text p { font-size: 20px; letter-spacing: 0.05em; line-height: 2; padding-left: 20px;}
.section4 .point-title h2 {background-color:#eef8ff; background-size: cover;}
.section4 h2 img {display: block; margin: auto; max-width: 30%; padding-top: 40px;}
.section4 .title2 {display: block; margin: 97px auto 98px;}
.section4 .title2 img {display: block; margin: auto;}

.section4 .step {display: flex; justify-content: center; margin-bottom: 49px; }
.section4 .step li {width: 292px; background-color: #683f91; margin-right: 13px; position: relative; padding-top: 39px; padding-bottom: 29px; }
.section4 .step li:not(:last-child):after {content: ""; display: inline-block; width: 40px; height: 50px; background-image: url("../img/step_after.svg"); background-size: contain; background-repeat: no-repeat; vertical-align: middle; position: absolute; right: -33px; top: 40%; }
.section4 .step .mainstep {width: 120px; display: block; margin: 0 auto; text-align: center; border-radius: 20px; border: 2px solid #683f91; background-color: #ffffff; color: #683f91; font-size: 16px; padding: 5px 0;  top: -15px; left: 0; right: 0; font-weight: 800;}
.section4 .step .mainstep span {font-weight: 800; font-size: 20px;}
.section4 .step .title {font-size: 18px; text-align: center; color: #ffffff; padding-bottom: 24px;}
.section4 .step img {margin: 0 auto; display: block;}
.section4 .step p {font-size: 16px; text-align: center; color: #ffffff; padding-top: 20px; line-height: 20px;}

.section4 .tel {text-align: center;}
.section4 .tel img {width: 548px; margin: 0 auto 20px; display: block;}
.section4 .tel p {margin-bottom: 20px; font-size:20px;}
.section4 .tel a {color: #002bb9;}

@media screen and (max-width: 767px) {
	.section4 {padding-top: 39px;}
	.section4 h2 {font-size: 24px; margin-bottom: 54px;}
	.section4 h2 img {display: block; margin: auto; max-width: 60%; padding-top: 15px;}
	.section4 .box {flex-direction: column; padding: 0 5px;}
	.section4 .box + .box {margin-top: 50px;}
	.section4 .box .text h3 {padding: 12px 15px; font-weight: 800; line-height: 1.333333333333333; height: auto; margin-bottom: 20px;}
	.section4 .box .text p {font-size: 16px !important; padding: 0 10px 15px;}
	.section4 .box img {width: 100%; display: block;}
.section4 p {font-size: 16px; letter-spacing: 0.05em; line-height: 2; padding: 15px;}
	.section4 .title2 {margin-bottom: 40px;}
	.section4 .step {flex-direction: column; align-items: center; margin-bottom: 28px;}
	.section4 .step li {margin-right: 0;}
	.section4 .step li:not(:last-child):after {right: 0; left: 0; bottom: -44px; top: auto; transform:rotate(90deg); margin: auto; }
	.section4 .step li + li {margin-top: 43px;}

	.section4 .tel {padding: 0 10px;}
	.section4 .tel p {font-size: 14px; margin-bottom: 13px; }
	.section4 .tel a {font-size: 16px;}
}

/* =================================================================
section5
=================================================================*/
.section5 {padding: 100px 0 0;}
.section5 h2 {font-size: 48px; font-weight: 800; text-align: center; margin-bottom: 65px;}
.section5 .point-title h2 {background-color:#eef8ff; background-size: cover;}
.section5 h2 img {display: block; margin: auto; max-width: 30%; padding-top: 40px;}
.section5 h2 strong {font-size: 150%; font-weight: 800;}
.section5 h3 {text-align: center; letter-spacing: 0.01em; font-size: 36px; font-weight: 800; display: inline-block; margin-bottom: 20px;}
.section5 .inner {width: 100%; max-width: 1000px; margin: 61px auto 0; text-align: center;}
.section5 .inner img {width: 40%; margin: 61px auto 0; margin: 20px;}
.section5 p { font-size: 16px; letter-spacing: 0.05em; line-height: 2; text-align: right;}
.section5 strong {font-weight: 800;}
.section5 .flex {display: flex; justify-content: space-between;}
.section5 .flex .box {width: 470px; border: 4px solid #683f91; border-radius: 10px; padding: 20px 30px 20px; display: flex; flex-direction: column; justify-content: space-between;}
.section5 .flex.merit-demerit {margin-bottom: 20px;}
.section5 .flex.merit-demerit .box {border: none; border-radius: 0px; padding: 0; justify-content: flex-start; }
.section5 .flex.merit-demerit .box h3 {color: #fff; font-size: 36px; text-align: center; font-weight: 600; line-height: 1.2; letter-spacing: 2px;}
.section5 .flex.merit-demerit .yuuguu { border-top-left-radius: 15px; border-top-right-radius: 15px; border: #01295f 4px solid;}
.section5 .flex.merit-demerit .yuuguu h3 {background: #01295f; padding: 10px;}
.section5 .flex.merit-demerit .box p {background: #fff; padding: 10px 10px; height: 100%; width: 100%;}
.section5 .hosoku {font-size: 14px; line-height: 1.285714285714286;}
.section5 h4 {font-size: 25px; letter-spacing: 0.01em; font-weight: 800; text-align:center; margin-bottom: 60px; margin-top: 50px;}
.section5 h3 img {max-width: 20%;}
.section5 .extenal-link:after {
  padding: 0 0 0 0.2rem;
  display: inline-block;
  content:url('https://www.sbineotrade.jp/landing/sec2/img/link-icon.png');
}



@media screen and (max-width: 767px) {
  .section5 {padding: 70px 0 0;}
	.section5 h2 {font-size: 24px; line-height: 1.2; margin-bottom: 25px;}
	.section5 h2 img {display: block; margin: auto; max-width: 60%; padding-top: 15px;}
  .section5 .flex.merit-demerit .yuuguu h3 {font-size: 25px;}
	.section5 .sp-inner {padding: 0 20px;}
	.section5 .inner {margin: 47px auto 0;}
	.section5 .inner img {width: 85%;}
	.section5 .flex {display: block; flex-direction: column; margin: 7px auto 35px;}
	.section5 .flex .box {width: 98%; padding: 20px 27px 20px; margin:auto;}
	.section5 .flex .box + .box {margin-top: 20px;}
	.section5 .flex .box p {font-size: 16px; letter-spacing: 0.03em;}
  .section5 p { font-size: 16px; letter-spacing: 0.05em; line-height: 2; padding: 15px;}
	.section5 .flex.merit-demerit {padding: 0 5px; margin-bottom: 15px;}
	.section5 .flex.merit-demerit .box {padding: 0;}
	.section5 .hosoku {padding: 0 5px;}
	.section5 h4 {font-size: 14px; padding:0 10px; margin-top: 10px;}
	.section5 .extenal-link:after {
  padding: 0 0 0 0.2rem;
  display: inline-block;
  content:url('https://www.sbineotrade.jp/landing/sec2/img/link-icon02.png');
}
}

/* =================================================================
section6
=================================================================*/
.section6 {padding-top: 100px;}
.section6 h2 {background-color: #01295f; background-size: cover; font-size: 48px; font-weight: 800; text-align: center; margin-bottom: 65px; color:yellow;   padding: 30px;}
.section6 h2 strong {font-weight: 800; font-size: 150%;}
.section6 .box {width: 100%; max-width: 1000px; display: flex; justify-content: space-between; margin: auto;}
.section6 .box + .box {margin-top: 70px;}
.section6 .box img {flex-shrink: 0;}
.section6 .box .text {width: 100%; max-width: 600px;}
.section6 .box .text h3 {font-size: 20px; color: #000; padding: 0 0 0 17px; height: 40px; line-height: 1; display: flex; align-items: center; letter-spacing: 0.01em; margin-bottom: 8px; border-bottom: 1px solid #000;}
.section6 .box .text p { font-size: 20px; letter-spacing: 0.05em; line-height: 2; padding-left: 20px;}
.section6 .point-title h2 {background-color:#eef8ff; background-size: cover;}
.section6 h2 img {display: block; margin: auto; max-width: 30%; padding-top: 40px;}
.section6 .title2 {display: block; margin: 97px auto 98px;}
.section6 .title2 img {display: block; margin: auto;}
.section6 .step {display: flex; justify-content: center; margin-bottom: 49px; }
.section6 .step li {width: 292px; background-color: #01295f; margin-right: 13px; position: relative; padding-top: 39px; padding-bottom: 29px; }
.section6 .step li:not(:last-child):after {content: ""; display: inline-block; width: 40px; height: 50px; background-image: url("../img/step_after.svg"); background-size: contain; background-repeat: no-repeat; vertical-align: middle; position: absolute; right: -33px; top: 40%; }
.section6 .step .mainstep {width: 120px; display: block; margin: 0 auto; text-align: center; border-radius: 20px; border: 2px solid #01295f; background-color: #ffffff; color: #01295f; font-size: 16px; padding: 5px 0; position: absolute; top: -15px; left: 0; right: 0; font-weight: 800;}
.section6 .step .mainstep span {font-weight: 800; font-size: 20px;}
.section6 .step .title {font-size: 18px; text-align: center; color: #ffffff; padding-bottom: 24px;}
.section6 .step img {margin: 0 auto; display: block;}
.section6 .step p {font-size: 16px; text-align: center; color: #ffffff; padding-top: 20px; line-height: 20px;}
.section6 .tel {text-align: center;}
.section6 .tel img {width: 548px; margin: 0 auto 20px; display: block;}
.section6 .tel p {margin-bottom: 20px; font-size:20px; }
.section6 .tel a {color: #002bb9;}

@media screen and (max-width: 767px) {
	.section6 {padding-top: 39px;}
	.section6 h2 {font-size: 24px; margin-bottom: 54px;}
	.section6 .box {flex-direction: column; padding: 0 5px;}
	.section6 .box + .box {margin-top: 50px;}
	.section6 .box .text h3 {padding: 12px 15px; font-weight: 800; line-height: 1.333333333333333; height: auto; margin-bottom: 20px;}
	.section6 .box .text p {font-size: 16px; padding: 0 10px 15px;}
	.section6 .box img {width: 100%; display: block;}
	.section6 p { font-size: 16px; letter-spacing: 0.05em; line-height: 2; padding: 15px;}
	.section6 .title2 {margin-bottom: 40px;}
	.section6 .step {flex-direction: column; align-items: center; margin-bottom: 28px;}
	.section6 .step li {margin-right: 0;}
	.section6 .step li:not(:last-child):after {right: 0; left: 0; bottom: -44px; top: auto; transform:rotate(90deg); margin: auto; }
	.section6 .step li + li {margin-top: 43px;}
	.section6 .tel {padding: 0 10px;}
	.section6 .tel p {font-size: 14px; margin-bottom: 13px; }
	.section6 .tel a {font-size: 16px;}
}

/* =================================================================
footer
=================================================================*/
footer {margin-top: 100px;}
footer .info {padding: 80px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;background-color: #000;}
footer .info .box {width: 550px;}
footer .info h2 {text-align: center; color: #fff; font-size: 28px; margin-bottom: 20px;}
footer .info p {font-size: 18px; color: #fff; line-height: 1.5;}
footer .risk {width: 100%; max-width: 1000px; margin: auto;  font-size: 15px; padding: 30px 0;}
footer .risk h3 {margin-bottom: 14px; font-size: 15px;}
footer .risk p {line-height: 1.3; font-size: 14px;}
footer .bottom {height: 160px; background: #01295f; display: flex; justify-content: space-between; align-items: center; padding: 0 65px 113px;}
footer .bottom p {color: #fff; letter-spacing: 0; line-height: 1.3;  font-size: 13px;}

@media screen and (max-width: 767px) {
	footer {margin-top: 42px;}
	footer .info {height: 260px; padding: 35px 20px 0; background-image: url('../img/footer_bg_sp.jpg');}
	footer .info .box {width: 100%;}
	footer .info h2 {font-size: 24px; text-align: left;}
	footer .risk {padding: 50px 20px 35px;}
	footer .bottom {flex-direction: column; padding: 0px 0px 60px; align-items: center; justify-content: center; height: 130px;}
	footer .bottom p + p {margin-top: 24px;}
}

 .hp-jump{font-size: 25px;
    letter-spacing: 0.01em;
    font-weight: 800;
    text-align: center;
    margin-bottom: 60px;
		display: block;
}

@media screen and (max-width: 767px) {
     .hp-jump {
        font-size: 14px;
        padding: 0 10px;
    }
}

.contact-link {
  font-weight: 600;
  color: #005BBB; /* コントラスト確保 */
}

.phone-number {
  font-weight: bold;
}

@font-face {
  font-family: 'CustomFont';
  src: url('CustomFont.woff2') format('woff2');
  font-display: swap;
}

.tie-up {
    margin: auto;
		display: block;
}
.tie-up img {display: block; max-width: 90%; margin: auto;}

.tie-up ul {
  display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}
.tie-up .tie-up-attention {
 border: 1px solid #5b5959; padding: 20px; color: #5b5959; max-width: 1000px; margin: auto;}

@media screen and (max-width: 767px) {
	.tie-up {max-width: 1000px; margin: auto;}
	.tie-up img {display: block; max-width: 100%; margin: auto;}

.tie-up .tie-up-attention {
 font-size: 14px;}}



 .accordion {
  border: 1px solid #aaa;
	margin-top: 30px;
}

.accordion-header {
  padding: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
      background-color: #FFF;
}

.icon {
  font-size: 20px;
}

.accordion-content {
  display: none;
  padding: 15px;
  background: #fff;
      text-align: left;
}
@media (max-width:600px){

.accordion{
  margin-top:20px;
}

.accordion-header{
  padding:16px 14px; /* タップしやすく */
  font-size:16px;
}

.icon{
  font-size:18px;
}

.accordion-content{
  padding:18px 14px;
  font-size:14px;
  line-height:1.7;
}

}


.kbox-wrapper{
max-width: 1000px;
border-radius:35px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,0.15);
font-family:sans-serif;
margin: auto;
margin-bottom: 95px;
}

.kbox-header{
background:#0a2e63;
color:#fff;
padding:25px 25px;
font-size:24px;
font-weight:bold;
display:flex;
align-items:center;
}

.kbox-number{
width:50px;
height:50px;
border:3px solid #fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-right:15px;
font-size:22px;
}

.kbox-content{
background:#fff;
padding:40px;
text-align:center;
}

.kbox-rate-area {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.kbox-rate{
font-size:70px;
font-weight:bold;
color:#ff0000;
position:relative;
}

.kbox-rate::after{
content:"";
position:absolute;
bottom:8px;
left:0;
width:100%;
height:12px;
background:#ffd400;
z-index:-1;
}

.kbox-button{
display:block;
background:#0a2e63;
color:#fff;
padding:12px 40px;
border-radius:30px;
font-weight:bold;
margin: auto;
    width: 200px;
		font-size: larger;
}

.kbox-footer-link {
    border: 2px solid #666;        /* 枠線はしっかり目 */
    padding: 20px;
		width: 95%;
    margin-top: 40px;
    display: inline-block;
    text-decoration: none;
    color: #222;                   /* 読みやすい文字色 */
    background-color: #e8f0f8;     /* 薄い青系で落ち着く */
    position: relative;
    overflow: hidden;
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
    font-weight: bold;
        font-size: 18px;
}

/* リンク文字 */
.kbox-footer-link a {
    color: inherit;
    text-decoration: none;
    transition: color 0.4s ease;
    position: relative;
    z-index: 2;
    font-size: 20px;
}

/* 光の流れ（控えめ） */
.kbox-footer-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* 単色の光 */
    transform: skewX(-20deg);
    transition: all 0.5s ease;
    z-index: 1;
}

/* ホバー時に光がスッと流れる */
.kbox-footer-link:hover::before {
    left: 100%;
}

/* ホバー時文字色 */
.kbox-footer-link:hover a {
    color: #fff; /* 背景とのコントラスト */
}

/* ホバー時の背景と枠線 */
.kbox-footer-link:hover {
    border-color: #444;              /* 枠線は少し濃く */
    background-color: #6fa8dc;       /* 単色ブルーで落ち着いたホバー */
}

.custom-table-3x7 {
  border-collapse: collapse !important;
  width: 100%;
  font-family: sans-serif;
  text-align: center;
}

.custom-table-3x7 th,
.custom-table-3x7 td {
  border: 1px solid #ccc;
  padding: 12px 3px;
  font-size: 16px;
}

/* 2列目 共通（左右の赤太枠） */
.custom-table-3x7 th:nth-child(2),
.custom-table-3x7 td:nth-child(2){
  border-left: 3px solid #ff0000;
  border-right: 3px solid #ff0000;
  font-weight: bold;
	font-size: 22px;
}

/* 2列目 1行目（濃い赤） */
.custom-table-3x7 thead th:nth-child(2){
  background:#ff4d4d !important;
  color:#fff;
  border-top:3px solid #ff0000;
  font-size:18px;
}

/* 2列目 2～3行目（かなり薄い赤） */
.custom-table-3x7 tbody td:nth-child(2){
  background:#ffecec !important;
}

/* 2列目 一番下の外枠 */
.custom-table-3x7 tbody tr:last-child td:nth-child(2){
  border-bottom:3px solid #ff0000;
}

/* 左端列 */
.custom-table-3x7 th:first-child{
  background:#eef7ff !important;
}

/* その他セル */
.custom-table-3x7 td:not(:nth-child(2)){
  background:#FFF !important;
}
/* ======================
   テーブルスクロール
====================== */
.table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

/* ======================
   SP表示
====================== */
@media screen and (max-width:767px){

  .custom-table-3x7{
    min-width:600px; /* テーブル崩れ防止 */
  }

  .custom-table-3x7 th,
  .custom-table-3x7 td{
    font-size:14px;
    padding:10px 6px;
  }

  /* 強調列 */
  .custom-table-3x7 th:nth-child(2),
  .custom-table-3x7 td:nth-child(2){
    font-size:18px;
  }

  /* 見出し */
  .custom-table-3x7 thead th:nth-child(2){
    font-size:16px;
  }

}
.kbox-images{
  display:flex;
  gap:50px;
  margin-top:20px;
  justify-content:center;
	align-items: flex-start;
}

.kbox-images img{
  width:40%;
  height:auto;
}

@media (max-width:768px){

.kbox-images img{
  width: 48%;
}

}

.note-list{
  list-style:none;
  padding-left:0;
}

.note-list li{
  position:relative;
  padding-left:1.4em;
  margin-bottom:3px;
	text-align: left;
  line-height: 1.5;
      font-size: 14px;
}

.note-list li::before{
  content:"※";
  position:absolute;
  left:0;
}
@media screen and (max-width:767px){

  .note-list li{
    font-size:14px;      /* 文字少し小さく */
    line-height:1.6;     /* 行間広め */
    padding-left:1.6em;  /* ※との間隔調整 */
    margin-bottom:8px;   /* 行の余白 */
  }

  .note-list li::before{
    font-size:14px;      /* ※のサイズ */
    top:0.05em;          /* 位置微調整 */
  }

}
.yellow-area{
  background:#fffaeb; /* 薄い黄色 */
  padding:0px 40px 100px;
  margin-top:20px;
	margin-left: -40px;
  margin-right: -40px;
	margin-bottom: -40px;

}

.side-title{
  background:#fdd23f;
  font-weight:bold;
  padding:16px 14px;
  min-width:110px;
  text-align:center; 
	line-height:1.7;
	
}


.side-title-box{
  display:flex;
  border:1px solid #ddd;
  border-radius:6px;
  overflow:hidden;
  margin:20px 0;
}
.side-content{
  padding:16px;
  background:#fff;
  flex:1;
  line-height:1.7;
	text-align: left;

}

.highlight-outline{
  font-size:2.5em;
  font-weight:700;
  color:#000;
  text-shadow:
    2px 2px 0 #fdd23f,
   -2px 2px 0 #fdd23f,
    2px -2px 0 #fdd23f,
   -2px -2px 0 #fdd23f;
}
@media screen and (max-width:767px){

  /* 縦並びに変更 */
  .side-title-box{
    flex-direction: column;
  }

  /* タイトル */
  .side-title{
    min-width: auto;
    width: 100%;
    font-size:16px;
    padding:12px;
  }

  /* 本文 */
  .side-content{
    padding:14px;
    font-size:14px;
    line-height:1.6;
  }

  /* 強調文字 */
  .highlight-outline{
    font-size:1.8em;
  }

}
.big{
  font-size: 2.5em;
  font-weight:700;
}
.big-m{
  font-size: 1.3em;
  font-weight:700;
}
@media screen and (max-width:767px){

  .big{
    font-size:1.8em;
  }

  .big-m{
    font-size:1.1em;
  }

}


.cp-top{
  background: linear-gradient(
    to bottom,
    #002355 0px,
    #002355 121px,
    #dce1e5 121px,
    #dce1e5 440px
  );
}
.cp-top img{margin: auto; display: block;}

.opn-btn{display: block; margin: auto; max-width: 700px; padding-bottom: 60px;}
@media screen and (max-width:767px){
.opn-btn{max-width: 80%; padding-bottom: 60px;}
}

.yajirushi {
    display: block;
    margin: auto;
    max-width: 400px;
    position: relative;
    bottom: 20px;
}

.kbox-wrapper-red{
max-width:950px;
border-radius:35px;
overflow:visible; /* 吹き出しを見せる */
font-family:sans-serif;
margin:auto;
margin-bottom:50px;
padding-top:50px;
}

.kbox-header-red{
background:#7a1d1d;
color:#fff;
padding:25px 25px;
font-size:24px;
font-weight:bold;
display:flex;
align-items:center;
position:relative;
border-radius:35px 35px 0 0; /* 上だけ丸める */
}

.kbox-header-red::before{
  content:"";
  position:absolute;
  top:-70px;
  left:50%;                 /* 中央基準 */
  transform:translateX(-45%); /* 自分の幅の半分戻す */
  width:0;
  height:0;
border-left:19px solid transparent;
border-right:19px solid transparent;
border-bottom:75px solid #7a1d1d;
}
.kbox-content-red{
background:#ffe1e1;
padding:40px;
text-align:center;
border-radius:0 0 35px 35px; /* 下だけ丸める */
}
@media (max-width:600px){

.kbox-wrapper-red{
  margin-top:30px;
  margin-bottom:30px;
}

.kbox-header-red{
  font-size:18px;
  padding:18px 16px;
}

.kbox-content-red{
  padding:25px 18px;
}

/* 吹き出し小さく */
.kbox-header-red::before{
  top:-40px;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-bottom:40px solid #7a1d1d;
}

}
@media (max-width:600px){

.kbox-wrapper-red{
  width:92%;
}

}