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



/* 新規追加要素をブロック要素化 */
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;
}



/*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のみ  */
.sp-only {display: none !important;}
.pc-only {display: block !important;}

/*  spのみ  */
@media screen and (max-width: 1024px) {
	.pc-only {display: none !important;}
	.sp-only {display: block !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%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.70);

  display: flex;
  flex-direction: column;
  align-items: stretch;   /* ←重要：幅を揃える */
  justify-content: center;

  z-index: 300;
  padding: 0.5em;
  box-sizing: border-box;
}

/* 幅を統一（←最重要ポイント） */
.float a,
.float p {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

/* リンク（中央寄せ） */
.float a {
  display: block;
}

/* 画像 */
.float img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト */
.float p {
  font-size: 1rem;
  color: red;
  font-weight: 600;
  text-align: center;
  margin-top: 0.3em; /* ←詰めて違和感解消 */
}


/* =================================================================
スマホ
=================================================================*/
@media screen and (max-width: 1024px) {
  .float {
    padding: 0.5em;
  }

  .float a,
  .float p {
    max-width: 500px; /* ←ここも揃える */
  }

  .float p {
    font-size: 0.8rem;
    padding: 0.3em 0;
  }
}


/* =================================================================
Safari対策（最小限）
=================================================================*/
@supports (-webkit-touch-callout: none) {
  .float img {
    width: 100%;
    height: auto;
  }
}


/* =================================================================
外部リンクアイコン
=================================================================*/
.link-icon-outside {
  position: relative;
  padding: 0 1em;
}

.link-icon-outside::before,
.link-icon-outside::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: icomoon;
}

.link-icon-outside::before {
  content: "\e315";
  left: -0.8em;
}

.link-icon-outside::after {
  content: "\f08e";
  right: -0.8em;
}


/* =================================================================
外部リンクアイコン
=================================================================*/
.link-icon-outside {
  position: relative;
  padding: 0 1em;
}

.link-icon-outside::before,
.link-icon-outside::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: icomoon;
}

.link-icon-outside::before {
  content: "\e315";
  left: -0.8em;
}

.link-icon-outside::after {
  content: "\f08e";
  right: -0.8em;
}

/* =================================================================
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: 1024px) {
	.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: 1024px) {
	.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: 1024px) {
	.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-color: #0c234c;
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

/* =============================
   背景（パース）
============================= */
.cp .ipo-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.cp .ipo-bg img {
  width: 100%;
  display: block;
}

/* =============================
   コンテンツ
============================= */
.cp .ipo-inner {
  position: relative;
  z-index: 2;
}

.cp .ipo-content {
  position: relative;
  z-index: 2;
  padding-top: 140px; /* ←ここで位置調整（重要） */
}

/* =============================
   共通スタイル
============================= */
.cp img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
}

.cp h2 {
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
}

.cp h3 {
  text-align: center;
  font-size: 35px;
  line-height: 1.8;
  color: #009e92;
  font-weight: 700;
  margin-bottom: 30px;
}

.cp p {
  text-align: center;
  max-width: 950px;
  margin: 20px auto 0;
  color: #fff;
  font-size: 25px;
  letter-spacing: 3px;
  line-height: 2;
}

/* ブロック余白 */
.cp .ipo-block {
  width: 90%;
  margin: 0 auto 60px;
}

/* =============================
   スマホ
============================= */
@media screen and (max-width: 1024px) {

  .cp {
    padding: 60px 0 0;
  }

  .cp h2 {
    font-size: 28px;
    margin-bottom: 0;
  }

  .cp h3 {
    font-size: 18px;
  }

  .cp p {
    max-width: 95%;
    font-size: 14px;
    letter-spacing: 2px;
  }

  .cp .ipo-content {
    padding-top: 80px; /* スマホは浅め */
  }

  .cp .ipo-block {
    margin-bottom: 40px;
  }
}
/* =================================================================
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: #084870;
}

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

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

	.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: 20px; 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;}
}

/* =================================================================
section0
=================================================================*/
.section0 {background-image: url("https://www.sbineotrade.jp/landing/sec2/img/point_background_ipo.png"); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0;}


.section0 .title2 {background-color:#01295f; height: 150px;}
.section0 .point {max-width: 1000px; margin: auto;}
.point02 {max-width: 1000px; margin: auto;}
.section0 .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;}
.section0 .stock-cost .title {position: absolute; top: -30px; left: 30%; background: #ffffff; color: #01295f; padding: 0 8px; font-size: 40px; font-weight: 600;}

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

.section0 h3 {font-size: 30px; font-weight: 500; text-align: center; line-height: 45px; margin-bottom: 15px;}

.section0 h2 img {display: block; margin: auto; max-width: 600px;}
.section0 table {width: 100%; max-width: 1220px; margin: 0 auto 12px; border-spacing: 10px; border-collapse: separate;}
.section0 th,
.section0 td {text-align: center; vertical-align: middle; font-size: 24px; width: 162px; height: 90px; font-weight: 600;}
.section0 td {background: #e6e6e6;}
.section0 strong {font-size: 200%; font-weight: 800;}
.section0 tr:nth-child(1) th {background: #b3b3b3; font-weight: 600;}
.section0 tr th:nth-child(1) {background: #b3b3b3; font-weight: 600;line-height: 1.2;}
.section0 .no-bg {background: #fff !important;}
.section0 .neotore {background: #fff; height: 100%; display: flex; justify-content: center; align-items: center; border: 4px solid #ff0000; box-sizing: border-box;}
.section0 .neotore .inner {font-weight: 600;}
.section0 .neotore-title {background: #ff0000 !important; width:200px;}
.section0 p {width: 100%; max-width: 1000px; margin: auto; line-height: 1.285714285714286;}
.section0 .marker {background: linear-gradient(transparent 65%, #f5c440 80%);}
.section0 .inner {width: 100%; max-width: 900px; margin: auto;}
.section0 .flex {margin: auto; display: flex; justify-content: space-between; padding: 20px 100px; text-align: center;}
.section0 h4 {font-size: 25px; letter-spacing: 0.01em; font-weight: 800; text-align:center; margin-bottom: 60px;}
.section0 .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: 1024px) {
	.section0 {padding: 30px 0 0;}
	.section0 .title2 {height: 10em;}
	.section0 .point {max-width: 1000px; margin: 0 auto 20px;}
  .point02 {max-width: 1000px;}
	.section0 .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;}
	.section0 .stock-cost02 .title {position: absolute; top: -13px; left: 20%; background: #ffffff; color: #01295f; padding: 0 8px; font-size: 20px; font-weight: 400;}
	.section0 .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;}
	.section0 .stock-cost02 .flex .bd .title {position: absolute; top: -13px; left: 25%; background: #ffffff; color: #000; padding: 0 8px; font-size: 30px; font-weight: 400;}
	.section0 h2 img {max-width: 60%; padding-top: 15px;}
	.section0 h3 {font-size: 16px; font-weight: 500; text-align: center; line-height: 25px; margin-bottom: 15px;}
	.section0 .scroll {overflow-x: scroll; margin-bottom: 23px;}
	.section0 .scroll table {white-space: nowrap; table-layout: fixed; border-spacing: 7px; margin-bottom: 22px;}
	.section0 th,
	.section0 td {width: 8em; height: 4em; font-size: 16px;}
	.section0 p {font-size: 14px; padding: 0 20px; }
	.section0 .scroll::-webkit-scrollbar { width: 10px; height: 20px; }
	.section0 .scroll::-webkit-scrollbar-track { background: #e6e6e6; border-radius: 10px; }
	.section0 .scroll::-webkit-scrollbar-thumb { background: #999999; border-radius: 10px; }
	.section0 .scroll::-webkit-scrollbar-thumb:hover { background: #555; }
	.section0 .flex {flex-direction: column; padding :20px 0; display: block;}
	.section0 h4 {font-size: 14px; padding:0 10px;}
	.section0 .extenal-link:after {
  padding: 0 0 0 0.2rem;
  display: inline-block;
  content:url('https://www.sbineotrade.jp/landing/sec2/img/link-icon02.png');
}	
}
/* =================================================================
section1
=================================================================*/



.section1 {padding: 80px 0; background-color:#edf7ff;overflow: hidden;}
.section1::after {
  content: "";
  display: block;
  clear: both;
}
.section1 .inner {width: 100%; max-width: 900px; margin: auto;}
.section1 .title2 {background-color:#01295f; height: 150px;}
.section1 .point {max-width: 1000px; margin: auto; margin: 90px auto;}
.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 .waku_ipo {padding-top: 15px;padding-bottom: 15px;padding-left: 20px;padding-right: 20px;margin-top: 30px;margin-bottom: 30px;border: 1px solid #000; letter-spacing: 0.05em; line-height: 2;}
.section1 .point-title h2 {background-size: cover;}
.section1 .point img {display: block; max-width: 90%;}
.section1 .inner h2 {
    text-align: center;
    letter-spacing: 0.01em;
    font-size: 45px;
    font-weight: 800;
    color: #0c234c;}

.section1 h3 {font-size: 30px; font-weight: 500; text-align: center; line-height: 45px; margin-bottom: 15px;}

.section1 table {width: 100%; max-width: 1220px; margin: 0 auto 12px; border-collapse: separate; border: 1px solid #949593;}
.section1 th {text-align: center; vertical-align: middle; font-size: 24px; width: 162px; height: 90px; background-color: #2f2d32; color: #fff;}
.section1 td {text-align: center; vertical-align: middle; font-size: 24px; width: 162px; height: 90px;}
.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: 2.0; font-size: 20px;}
.section1 .marker {background: linear-gradient(transparent 65%, #f5c440 80%);}
.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: 1024px) {
	.section1 {padding: 30px 0 0;}
  .section1 .inner {max-width: 100%;}
  .section1 .inner h2 {font-size: 28px; letter-spacing: 0.02em; margin-bottom: 20px;}
	.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');
}	
.section1 .inner .point-title img {max-width: 100%; padding: 20px;}
.section1 .inner img {max-width: 90%; display: block; margin: auto;}
}

/* =================================================================
section2
=================================================================*/
.section2 {padding: 80px 0;}
.section2 .ratio img {max-width: 20%;}
.section2 .inner h2 {
    text-align: center;
    letter-spacing: 0.01em;
    font-size: 45px;
    font-weight: 800;
    color: #0c234c;    margin-bottom: 20px;}
.section2 .inner .point-title img {max-width: 100%; margin-left: 0; display: block; margin: auto;}
.section2 .inner .point-title .comment01 {margin-left: 50px; font-size: 22px; letter-spacing: 5px; line-height: 2em; padding: 40px 0; position: absolute; top: 14.1%; left: 43.2%; transform: translate(-50%, -50%);}
.section2 .inner .point-title .comment02 {margin-left: 50px; font-size: 47px; letter-spacing: 5px; line-height: 2em; padding: 40px 0; position: absolute; top: 15.1%; left: 48%; transform: translate(-50%, -50%);}
.section2 .bg {background-size: cover; color: #000;}
.section2 .inner {width: 100%; max-width: 900px; margin: auto;}
.section2 p { font-size: 20px; letter-spacing: 0.05em; line-height: 2; padding: 10px;}
.section2 .flex {margin: 61px auto 40px; display: flex; justify-content: space-between;}
.section2 .flex .box {width: 470px; height: 400px; border: 4px solid #683f91; border-radius: 10px; padding: 20px 30px 20px; display: flex; flex-direction: column; justify-content: space-between; align-items: center}
.section2 .inner h3 {font-size: 30px; font-weight: 500; text-align: center; line-height: 45px; margin-bottom: 15px;}
.section2 table {width: 100%; max-width: 1220px; margin: 0 auto 12px; border-collapse: separate; border: 1px solid #949593;}
.section2 th {text-align: center; vertical-align: middle; font-size: 20px; height: 90px; background-color: #2f2d32; color: #fff; border: 1px solid #949593;}
.section2 td {text-align: center; vertical-align: middle; font-size: 20px; height: 90px; border: 1px solid #949593;}
.section2 .hosoku {font-size: 14px; line-height: 1.285714285714286;}
.section2 h4 {font-size: 25px; letter-spacing: 0.01em; font-weight: 800; text-align:center; margin-bottom: 60px;}
.section2 .extenal-link:after {padding: 0 0 0 0.2rem; display: inline-block; content:url('https://www.sbineotrade.jp/landing/sec2/img/link-icon.png');}
.section2 .waku_ipo {padding-top: 15px;padding-bottom: 15px;padding-left: 20px;padding-right: 20px;margin-top: 30px;margin-bottom: 30px;border: 1px solid #000;background-color: #ffffff; font-size: 16px; letter-spacing: 0.05em; line-height: 2;max-width: 1000px;}
.section2 .emp-red {color: red;}
.section2 .marker-yellow {background: linear-gradient(transparent 60%, #fff799 80%); font-weight: bold; color:#0761a1;}


.section2 .toggle-box-header {display: flex; background: #eee; padding: 12px; cursor: pointer; font-weight: bold; border: 1px solid #ccc; justify-content: space-between; background-color: #5297c1; color:#FFF;}

.section2 .toggle-box-content {display: none; border: 1px solid #ccc; border-top: none; padding: 20px; background: #f1f1f1;}

.section2 .toggle-box.active .toggle-box-content {display: block; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);}
.section2 .toggle-box{margin: 2em 0;}

.section2 ul{line-height: 2;}


@media screen and (max-width: 1024px) {
	.section2 {padding:0;}
  .section2 .inner h2 {font-size: 28px; letter-spacing: 0.02em; margin: 20px 0;}
	.section2 .sp-inner {margin: 47px auto 0;}
	.section2 p { font-size: 15px; letter-spacing: 0.05em; line-height: 2; padding: 15px;}
	.section2 .inner {margin: 5px auto 0;}
	.section2 .inner img {max-width: 100%;}
	.section2 .flex {flex-direction: column; margin: 7px auto 35px;}
	.section2 .flex .box {width: 98%; height: 320px; padding: 20px 27px 20px; margin:auto;}
	.section2 .flex .box + .box {margin-top: 20px;}
	.section2 .flex .box p {font-size: 15px; letter-spacing: 0.03em; }
	.section2 .flex.merit-demerit .box h3 {font-size: 25px;}
	.section2 .flex.merit-demerit {padding: 0 5px; margin-bottom: 15px;}
	.section2 .flex.merit-demerit .box { padding: 5px; height: 300px;}
	.section2 .hosoku {padding: 0 5px;}
	.section2 h4 {font-size: 14px; padding:0 10px;}
    .section2 .inner h3 {
        font-size: 22px;      /* 小さくする */
        line-height: 32px;    /* 行間も調整 */
        margin-bottom: 10px;  /* 余白も少し縮める */
    }
	.section2 .extenal-link:after {
  padding: 0 0 0 0.2rem;
  display: inline-block;
  content:url('https://www.sbineotrade.jp/landing/sec2/img/link-icon02.png');
}
.section2 .waku_ipo {padding-top: 15px;padding-bottom: 15px;padding-left: 20px;padding-right: 20px;  border: 1px solid #000;background-color: #ffffff; font-size: 15px; letter-spacing: 0.05em; line-height: 2;max-width: 1000px;  width: calc(100% - 40px); margin: 20px auto;}

.section2 table {max-width: 950px; border-collapse: separate; border: 1px solid #949593; width: calc(100% - 40px); margin: 20px auto;}
.section2 th {text-align: center; vertical-align: middle; font-size: 12px; width: 162px; height: 40px; background-color: #2f2d32; color: #fff; border: 1px solid #949593;}
.section2 td {text-align: center; vertical-align: middle; font-size: 12px; width: 162px; height: 40px; border: 1px solid #949593;}

.section2 .box .box-title {font-size: 15px;}
.section2 .box p {font-size: 12px; }
.section2 .box ul {line-height: 1.5; font-size: 12px; padding-bottom: 5px;}
.section2 .toggle-box{width: calc(100% - 40px); margin: 20px auto;}

}

/* =================================================================
section3
=================================================================*/
.section3 {padding: 80px 0;}
.section3 h2 img {display: block; margin: auto;}
.section3 .point-title {font-size: 30px; font-weight: 500; text-align: center; line-height: 50px; margin-bottom: 15px; background-color: #025695; color: #FFF; padding: 20px;}
.section3 .point-title h2 {font-weight: 600;    font-size: 45px;}
.section3 .inner .point-title img {max-width: 100%; display: block; margin: auto; width: 100%;}
.section3 .inner .point-title .comment01 {margin-left: 50px; font-size: 22px; letter-spacing: 5px; line-height: 2em; padding: 40px 0; position: absolute; top: 37.4%; left: 47.2%; transform: translate(-50%, -50%);}
.section3 .inner .point-title .comment02 {margin-left: 50px; font-size: 44px; letter-spacing: 5px; line-height: 2em; padding: 40px 0; position: absolute; top: 38.4%; left: 45%; transform: translate(-50%, -50%);}
.section3 .inner .image-container {display: flex; gap: 10px; margin: 40px auto;}
.section3 .inner .image-container img {width: 100%;max-width: 400px; margin: auto;}
.section3 h3 {
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    color: rgb(12, 35, 76);
    margin-bottom: 20px;
    line-height: 1.4;
}
.section3 .bg {background-size: cover; color: #000;}
.section3 .inner {width: 100%; max-width: 900px; margin: auto;}
.section3 .graph {max-width:70%;}
.section3 p { font-size: 17px; letter-spacing: 0.05em; line-height: 2; padding: 10px;}
.section3 .title {padding-top:50px; font-size: 29px; font-weight: bold;}
.section3 .flex {margin: 61px auto 40px; justify-content: space-between;} 
.section3 .flex .box {width: 470px; height: 400px; border: 4px solid #683f91; border-radius: 10px; padding: 20px 30px 20px; display: flex; flex-direction: column; justify-content: space-between; align-items: center}

.section3 .hosoku {font-size: 14px; line-height: 1.285714285714286;}
.section3 h4 {font-size: 25px; letter-spacing: 0.01em; font-weight: 800; text-align:center; margin-bottom: 60px;}
.section3 .extenal-link:after {padding: 0 0 0 0.2rem; display: inline-block; content:url('https://www.sbineotrade.jp/landing/sec2/img/link-icon.png');}
.section3 .waku_ipo {padding-top: 15px;padding-bottom: 15px;padding-left: 20px;padding-right: 20px;margin-top: 30px;margin-bottom: 30px;border: 1px solid #000;background-color: #ffffff; font-size: 20px; letter-spacing: 0.05em; line-height: 2;max-width: 1000px;}
.section3 .emp-red {color: red;}
.section3 .marker-yellow {background: linear-gradient(transparent 60%, #fff799 80%); font-weight: bold; color:#0761a1;}
.section3 .box {
  max-width: 20%;
  border: #000 1px solid;
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);

  margin: 50px 0 150px auto;
  overflow: hidden;

  position: relative;  /* ← 追加 */
  top: 50px;           /* ← 下にずらす量（調整OK） */
}
.section3 .box .box-title {
  background: #808080;
  font-size: clamp(14px, 2.0vw, 22px); /* 小〜大まで自動調整 */
  padding: clamp(6px, 1.5vw, 10px);
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.section3 .box p {padding: 15px 20px 0; margin: 0; }
.section3 .box ul {
  padding: clamp(6px, 1.5vw, 10px) clamp(12px, 3vw, 20px);
  margin: 0;
  letter-spacing: 0.05em;
  line-height: clamp(1.5em, 2vw, 3em);
  list-style: none;
  font-size: clamp(14px, 2vw, 20px);
}
.section3 .ipo-pickup {display: block; background-color:#fffdee ;padding:20px;}
.section3 .ipo-pickup .comment {border: #000 solid 1px; padding: 10px; font-size: 20px; background-color:#fff; max-width: 50%;}
.section3 .ipo-pickup img {max-width: 100%; margin-left: 0; display: block; margin: auto;}

@media screen and (max-width: 1024px) {
	.section3 {padding:0;}
  .section3 h3{font-size: 28px;}
  .section3 .point-title h2 {font-size: 28px; letter-spacing: 0.02em; margin: 20px 0;}
    .section3 .point-title h3 {font-size: 28px; letter-spacing: 0.02em; margin: 20px 0;}
	.section3 .sp-inner {margin: 47px auto 0;}
	.section3 p { font-size: 15px; letter-spacing: 0.05em; line-height: 2; padding: 15px;}
	.section3 .inner {margin: 5px auto 0;}
  .section3 .inner .image-container {display: block !important;}
	.section3 .inner .image-container img {max-width: 90%;width: calc(100% - 40px); margin: 20px auto;}
	.section3 .flex {flex-direction: column; margin: 7px auto 35px;}
	.section3 .flex .box {width: 98%; height: 320px; padding: 20px 27px 20px; margin:auto;}
	.section3 .flex .box + .box {margin-top: 20px;}
	.section3 .flex .box p {font-size: 15px; letter-spacing: 0.03em; }
	.section3 .flex.merit-demerit .box h3 {font-size: 25px;}
	.section3 .flex.merit-demerit {padding: 0 5px; margin-bottom: 15px;}
	.section3 .flex.merit-demerit .box { padding: 5px; height: 300px;}
	.section3 .hosoku {padding: 0 5px;}
	.section3 h4 {font-size: 14px; padding:0 10px;}
	.section3 .extenal-link:after {
  padding: 0 0 0 0.2rem;
  display: inline-block;
  content:url('https://www.sbineotrade.jp/landing/sec2/img/link-icon02.png');
	.section3 .title {padding-top:20px; font-size: 22px; font-weight: bold;}
}
.section3 .box {max-width:90%; border: #000 1px solid; background-color:#fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); position: static; width: calc(100% - 40px);margin: 20px auto;}
.section3 .box .box-title {background: #808080; font-size: 15px; padding: 10px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em;}
.section3 .box p {padding: 15px 20px 0; margin: 0; }
.section3 .box ul {padding: 10px 20px; margin: 0;  letter-spacing: 0.05em; line-height: 2; list-style: none; font-size: 14px;}
.section3 .list {width: 100%; display: grid; grid-template-columns: repeat(3, auto); padding: 30px 10px 10px; justify-content: space-between; }
.section3 .ipo-pickup .comment {border: #000 solid 1px; padding: 10px; font-size: 15px; background-color:#fff; width: calc(100% - 40px);margin: 20px auto;}
}


/* ==================================================
   section4
================================================== */
.section4 {
  background-color: #ecf2fd;
  position: relative;
  overflow: hidden;
}

/* =============================
   背景（パース）
============================= */
.section4 .ipo-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.section4 .ipo-bg img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================
   コンテンツレイヤー
============================= */
.section4 .ipo-inner02 {
  position: relative;
  z-index: 2;
    max-width: 1000px;
  margin: 0 auto;

}

.section4 .ipo-content {
  position: relative;
  z-index: 2;
}

/* =============================
   テキストエリア
============================= */
.section4 .ipo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section4 .ipo-text img {
  width: min(900px, 90%);
  display: block;

margin-top: 60px;
}


.section4 h2 {
  text-align: center;
  font-size: 42px;
  font-weight: 800;
  color: #0c234c;
  margin-bottom: 20px;
    line-height: 1.4;
}

.section4 h3 {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #009e92;
  margin-bottom: 30px;
  line-height: 1.5;
}


/* =============================
   画像コンテナ
============================= */
.section4 .image-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px auto 30px;
  flex-wrap: wrap;
}

.section4 .image-container img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* =============================
   ブロック
============================= */
.section4 .ipo-block {
  width: min(90%, 1000px);
  margin: 0 auto 60px;
}
.section4 .ipo-block p{color: #035795;}
.section4 .ipo-block img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================
   スマホ
============================= */
@media screen and (max-width: 1024px) {

  .section4 h2 {
    font-size: 28px;
  }

  .section4 h3 {
    font-size: 16px;
  }

  .section4 .image-container {
    gap: 15px;
    flex-wrap: nowrap;
    margin: 0 auto 10px;
  }

  .section4 .image-container img {width: 40%;}
  
  .section4 .ipo-block {
    margin-bottom: 5px;
  }
  .section4 .ipo-text img{margin-top: 20px;}
  .section4 .ipo-block img{width: 90%; margin: auto;}
  .section4 .ipo-block p{font-size: small;}
}

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

@media screen and (max-width: 767px) {
	.section5 {background-color: #002355;}
	.section5 img {display: block;}
	.section5 h1 {font-size: 80px; line-height: 1.2; margin-bottom: 50px;}
	.section5 a {font-size: 20px;}
	.section5 p {text-align:center; line-height: 2.0; max-width: 95%;  font-size: 0.5em; letter-spacing: 2px;}
	.section5 .title1 img {display: block; margin: 0 auto 20px; max-width: 50%;}
	.section5 .box {padding: 20px 15px; width: 95%;}
	.section5 ul {width: 100%; padding: 0 20px;}
	.section5 .btn {padding: 8px 14px; font-size: 18px; margin-right: 10px; margin-bottom: 10px; display: inline-block;}
	.section5 .btn02 {padding: 40px 15px 0 15px; max-width: 100%;}
	.section5  .title {font-size: 24px; margin: 0 auto 20px; line-height: 1.4;}
	.section5  .note {font-size: 14px; padding-bottom: 15px;}
	.section5 h2 {font-size: 20px; letter-spacing: 2px; line-height: 1.4;}
  .section5 h3 {font-size: 20px; margin-top: 5px; line-height: 1.5;}
}

/* =================================================================
section7
=================================================================*/

.section7 {
  background-color: #f5f4f7;
  position: relative;
  overflow: hidden;
      padding: 80px 0;
}

/* =============================
   背景（パース）
============================= */
.section7 .ipo-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.section7 .ipo-bg img {
  width: 100%;
  height: auto;
  display: block;
}
section7 {
    width: min(90%, 1000px);
    margin: 0 auto 60px;
}
/* =============================
   コンテンツレイヤー
============================= */
.section7 .ipo-inner02 {
  position: relative;
  z-index: 2;
    max-width: 1000px;
  margin: 0 auto;

}

.section7 .ipo-content {
  position: relative;
  z-index: 2;
}

/* =============================
   テキストエリア
============================= */
.section7 .ipo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section7 .ipo-text img {
  width: min(900px, 90%);
  display: block;

margin-top: 60px;
}


.section7 h2 {
  text-align: center;
  font-size: 42px;
  font-weight: 800;
  color: #0c234c;
  margin-bottom: 20px;
    line-height: 1.4;
}

.section7 h3 {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #009e92;
  margin-bottom: 30px;
  line-height: 1.5;
}


/* =============================
   画像コンテナ
============================= */
.section7 .image-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px auto 30px;
  flex-wrap: wrap;
}

.section7 .image-container img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* =============================
   ブロック
============================= */
.section7 .ipo-block {
  width: min(90%, 1000px);
    margin: auto ;
}

.section7 .ipo-block img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================
   スマホ
============================= */
@media screen and (max-width: 1024px) {

  .section7 {
    padding: 60px 0;
  }

  .section7 h2 {
    font-size: 30px;
  }

  .section7 h3 {
    font-size: 16px;
  }

  .section7 .image-container {
    flex-direction: column;
    gap: 15px;
  }

  .section7 .ipo-block {
    margin-bottom: 40px;
            max-width: 100%;
  }
}
/* =================================================================
section6
=================================================================*/

.section6 h2 {  background: linear-gradient(to right, #b4d1f0, #ffffff); background-size: cover; font-size: 38px; font-weight: 800; text-align: center; margin-bottom: 65px;  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: 20px; position: relative; padding-top: 39px; padding-bottom: 29px; }
.section6 .step li:not(:last-child):after {content: ""; display: inline-block; width: 42px; height: 47px; background-image: url("../img/step_after02.svg"); background-size: contain; background-repeat: no-repeat; vertical-align: middle; position: absolute; right: -42px; 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: 20px; 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: 900px; 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: 1024px) {

	.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;}
}

/* ==================================================
   section8
================================================== */
.section8 {
  background-color: #ecf2fd;
  position: relative;
  overflow: hidden;
}

/* =============================
   背景（パース）
============================= */
.section8 .ipo-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.section8 .ipo-bg img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================
   コンテンツレイヤー
============================= */
.section8 .ipo-inner02 {
  position: relative;
  z-index: 2;
    max-width: 1000px;
  margin: 0 auto;

}

.section8 .ipo-content {
  position: relative;
  z-index: 2;
}

/* =============================
   テキストエリア
============================= */
.section8 .ipo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section8 .ipo-text img {
  width: min(900px, 90%);
  display: block;

margin-top: 60px;
}


.section8 h2 {
  text-align: center;
  font-size: 42px;
  font-weight: 800;
  color: #0c234c;
  margin-bottom: 20px;
    line-height: 1.4;
}

.section8 h3 {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #009e92;
  margin-bottom: 30px;
  line-height: 1.5;
}


/* =============================
   画像コンテナ
============================= */
.section8 .image-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px auto 30px;
  flex-wrap: wrap;
}

.section8 .image-container img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* =============================
   ブロック
============================= */
.section8 .ipo-block {
  width: min(90%, 1000px);
  margin: 0 auto 60px;
}

.section8 .ipo-block img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================
   スマホ
============================= */
@media screen and (max-width: 1024px) {

  .section8 {
    padding: 0;
  }

  .section8 h2 {
    font-size: 28px;
  }

  .section8 h3 {
    font-size: 16px;
  }

  .section8 .image-container {
    flex-direction: column;
    gap: 15px;
  }

  .section8 .ipo-block {
    margin-bottom: 40px;
  }
  .section8 .ipo-text img{margin-top: 0;}
}

/* =================================================================
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: 1024px) {
	.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: 1024px) {

	.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: 1024px) {.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: 20px;
    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;
}



/* =================================================================
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: 20px; 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: 1024px) {
	footer {margin-top: 42px;}
	footer .info {height: 220px; padding: 35px 20px 0; background-image: url('../img/footer_bg_sp.jpg');}
	footer .info .box {width: 100%;}
	footer .info h2 {font-size: 20px; 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;}
  footer .info p{ font-size: 14px;}
}

 .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: 1024px) {
     .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: 1024px) {
	.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: 1024px){

.accordion{
  margin-top:20px;
}

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

.icon{
  font-size:20px;
}

.accordion-content{
  padding:20px 14px;
  font-size:14px;
  line-height:1.7;
}
.kbox-footer-link{    font-size: 17px;
    margin: 20px auto;
      padding: 13px;}

}


.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: 20px;
    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: 20px;
}

/* リンク文字 */
.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:20px;
}

/* 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: 1024px){

  .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:20px;
  }

  /* 見出し */
  .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: 1024px){

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

}

.note-list{
  list-style:none;
  padding:10px;
}

.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: 1024px){

  .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: clamp(8px, 1.5vw, 16px) clamp(8px, 1.5vw, 14px);
    min-width: clamp(80px, 20vw, 110px);
    font-size: clamp(14px, 1.5vw, 18px);
    line-height: clamp(1.4em, 1.7vw, 1.7em);

    display: flex;               /* フレックスに変更 */
    justify-content: center;     /* 横中央 */
    align-items: center;         /* 縦中央 */
    margin: 0 auto;              /* 親ブロック内で横中央 */
    text-align: center;          /* 念のため横中央 */
}

/* サイドボックス全体 */
.side-title-box {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  margin: clamp(10px, 2vw, 20px);
}

/* サイドコンテンツ */
.side-content {
  padding: clamp(8px, 1.5vw, 16px);
  background: #fff;
  flex: 1;
  line-height: clamp(2.0em, 1.7vw, 1.7em);
  text-align: left;

  display: flex;
  flex-direction: column;
  justify-content: center;
font-size: clamp(0.6em, 3vw, 1.0em);
}

/* ハイライト文字 */
.highlight-outline {
  font-size: clamp(1.2em, 4vw, 2.2em); /* 小〜大まで自動縮小 */
  font-weight: 700;
  color: #000;
  text-shadow:
    2px 2px 0 #fdd23f,
   -2px 2px 0 #fdd23f,
    2px -2px 0 #fdd23f,
   -2px -2px 0 #fdd23f;
  white-space: nowrap;
}

/* 大きい文字 */
.big {
  font-size: clamp(1.5em, 4vw, 2.2em); /* 小〜大まで自動縮小 */
  font-weight: 700;
}

/* 中くらいの文字 */
.big-m {
  font-size: clamp(1em, 2.5vw, 1.3em); /* 小〜大まで自動縮小 */
  font-weight: 700;
}



.cp-top-api {
  /* height: clamp(300px, 48vw, 478px); */
  background: #ddf7fe;
  margin-bottom: 50px;
}

.ipo-campaign-grid {
  position: absolute;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  margin: 20px auto 0;
}

.ipo-campaign-grid img {
  width: 100%;
  height: auto;
  display: block;
}
.cp .ipo-inner {
  position: relative;
  z-index: 2;
}

/* 基準（ここが超重要） */
.ipo-inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.ipo-inner img {
  width: 80%;
  height: auto;
  display: block;
  margin: auto;
}
.ipo-text02 {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;          /* ←これ重要（親に合わせる） */
  max-width: 90%;      /* ←はみ出し防止 */
  text-align: center;
}

/* 1. 親要素を基準位置にする */
.cp-top-api .ipo-inner {
    position: relative; /* これにより、中の要素を画像の上に絶対配置できます */
    width: 100%;
    max-width: 1024px;  /* 元のメイン画像の横幅に合わせて数値を調整してください */
    margin: 0 auto;
}

/* 2. メイン画像の設定 */
.cp-top-api .ipo-inner picture img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3. 【PC用】画像の下側に横4×縦2で上乗せ */
@media screen and (min-width: 1025px) {
    .ipo-campaign-hero-side {
        position: absolute;
        bottom: 1%;                 /* 画像の下側からの位置（％で調整すると画像に連動します） */
        left: 50%;
        transform: translateX(-50%); /* 左右中央寄せ */
        z-index: 10;                /* 画像より前面に表示 */
        
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 横4つ */

        width: 90%;                            /* 画像に対してボタンエリアが占める横幅 */
        max-width: 900px;                      /* ボタンエリアの最大横幅 */
    }
    .ipo-campaign-hero-side a img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* 4. 【スマホ用】画像の下側に上乗せ ＆ 横2列（縦4段） */
@media screen and (max-width: 1024px) {
    .ipo-campaign-grid {
        position: absolute;
        bottom: 1%;                 /* スマホ画像の下側からの位置（％で調整） */
        left: 50%;
        transform: translateX(-50%); /* 左右中央寄せ */
        z-index: 10;                /* 画像より前面に表示 */
        
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 横に2列（均等に2分割） */

        width: 90%;                            /* スマホ画面に対する横幅 */
        max-width: 80%;                      /* ボタンエリアが広がりすぎないための制限 */
    }

    .ipo-campaign-grid a img {
        width: 100%;
        height: auto;
        display: block;
    }
}


.opn-btn{display: block; margin: auto; max-width: 700px; padding-bottom: 60px;}

@media screen and (max-width: 1024px){
.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:1024px){



.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: 1024px){

.kbox-wrapper-red{
  width:92%;
  margin-bottom: 10px;
}

}


/* セクション全体 */
.ipo-stock-fee-section {
  max-width: clamp(300px, 100vw, 900px); /* 画面幅に応じて縮小 */
  margin: 0 auto;
  position: relative;
  padding: 
    clamp(10px, 5vw, 20px)   /* 上 */
    clamp(100px, 15vw, 300px) /* 右：余白を広く */
    clamp(50px, 10vw, 130px) /* 下 */
    clamp(20px, 5vw, 40px);  /* 左 */
}

/* テキスト */
.ipo-stock-fee-text {
  position: relative;
  z-index: 2;
  font-size: clamp(14px, 2vw, 20px);   /* 画面に応じて縮小 */
  letter-spacing: 0.05em;
  line-height: clamp(1.5em, 2vw, 2em);     /* 行間も可変 */
}

/* 右の画像 */
.ipo-stock-fee-image {
  position: absolute;
  top: clamp(50px, 2vw, 0px);          /* 画面に応じて微調整可能 */
  right: clamp(10px, 5vw, 20px);       /* 右端の余白も可変 */
  max-width: clamp(150px, 40vw, 400px); /* 小〜大まで自動縮小 */
  height: auto;                        /* 比率維持 */
  z-index: 1;
}

.ipo-highlight {
  color: red;                 /* 赤文字強調 */
}


.review-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 900px;
  margin: 0 auto;
}

.review-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background-color: #faf8f3;
    padding: 10px;
}

.avatar img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

.bubble {
  position: relative;
  background: #f1f3f5;
  padding: 30px 25px;
  border-radius: 10px;
  flex: 1;
}

.bubble::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #f1f3f5;
}

.bubble p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.name {
  margin-top: 10px;
  font-size: 14px;
  text-align: right;
  color: #666;
}

@media screen and (max-width: 1024px) {
  .review-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bubble::before {
    display: none;
  }

  .name {
    text-align: center;
  }
    .table-wrap {
        margin: 20px 10px !important;
        border-radius: 10px !important;
            overflow-x: auto; /* ←ここ重要 */
    }

    .comparison-table {
        font-size: 14px !important;
        table-layout: auto !important;
        min-width: 100% !important;
    }

  .comparison-table th,
  .comparison-table td {
    padding: 8px 6px !important;       /* 余白をコンパクトに */
    font-size: 13px !important;        /* 少し小さく */
    line-height: 1.3 !important;       /* 行間も調整 */
  }

    .comparison-table tbody th {
    width: 120px !important;          /* ←少し縮める */
    font-size: 13px !important;
  }

  .comparison-table .neo {
    background: #d9edf7;   /* 基本そのままでOK */
  }
}

.table-wrap {
    max-width: 900px;
    margin: 30px auto 10px;
    border-radius: 14px;

    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
    background: #e5e5e5;
    border: #666 1px solid;
}

.comparison-table {
    width: 100%;
    min-width: 600px; /* ←これも重要 */
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 20px;
}
.comparison-table thead th {
  background: #eef3f7;
  font-size: 30px;
  font-weight: 700;
  padding: 14px 10px;
  border: 1px solid #bfbfbf;
}
.comparison-table th,
.comparison-table td {
  border: 1px solid #c2c2c2;
  padding: 12px 14px;
  text-align: center;
  color: #333;
  background: #f7f7f7;
  line-height: 1.4;
}
.comparison-table tbody th {
  background: #ececec;
  font-weight: 700;
  width: 180px;
}
.comparison-table .neo {
  background: #d9edf7;
}
.big-api {
  font-size: 32px;
  font-weight: 700;
  color: #1b5e8a !important;
  letter-spacing: 0.5px;
}
.note-api {
  font-size: 12px;
  color: #666;
}
.comparison-table th:first-child {
  width: 180px;
  font-size: 17px;
}

.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
  width: 240px;
}

.comparison-table th:nth-child(3),
.comparison-table td:nth-child(3),
.comparison-table th:nth-child(4),
.comparison-table td:nth-child(4) {
  width: 240px;
}
.comparison-table tr:first-child th:first-child {
    border-top-left-radius: 14px;
}

.comparison-table tr:first-child th:last-child {
    border-top-right-radius: 14px;
}


#pc_section02,

#sp_section02 {
  scroll-margin-top: -900px;
}
.youtube-wrap {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9; /* ここが重要 */
    margin: 0 auto 60px;
}

.youtube-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.link-jump{width: 500px;
    margin: 40px auto;}

@media screen and (max-width: 1024px) {
  .link-jump{max-width: 80%; text-align: center; margin: 0px auto 40px;}
  #sp_section02 {
  scroll-margin-top: 0px;
}
  }

/* 全体のベース設定 */
.auto-trading-intro {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333333;
    line-height: 1.6;
    max-width: 1024px;
    margin: 0 auto;
    padding: 20px;
}

/* キャッチコピー */
.sub-title {
    color: #1dbcb1;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* 大見出し */
.main-title {
    font-size: 32px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #cccccc; /* PCでは通常通り文字幅いっぱいに線が出る */
}

/* リード文 */
.lead-text {
    font-size: 13px;
    margin-bottom: 35px;
}

/* 中見出し（左に緑の装飾） */
.section-heading {
    font-size: 23px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 8px solid #1dbcb1;
    margin-bottom: 15px;
}

/* 画像を囲むコンテナ（PCでは横に2つ並べる） */
.card-container {
    display: flex;
    gap: 20px; /* 画像と画像のすき間 */
    margin-bottom: 35px;
}

/* 各画像エリア（2枚が均等な幅になるように設定） */
.problem-card {
    flex: 1; 
}

/* 画像がはみ出したり歪んだりするのを防ぐ */
.problem-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* 解決策ブロック全体の配置 */
.solution-block {
    display: flex;
    justify-content: center; /* 🛠 追加：要素全体を画面の横方向の真ん中に寄せる */
    align-items: center;     /* 🛠 矢印とテキストの上下の高さの真ん中を揃える */
    margin: 30px auto 0 auto; /* 🛠 上に30pxの余白を作りつつ、左右は自動で中央寄せ */
    position: relative;
    font-size: 16px;
    width: fit-content;      /* 🛠 追加：中身の幅に合わせることで綺麗に中央に配置される */
}

/* 矢印の配置を真ん中寄せ用に修正 */
.solution-block::before {
    content: "";
    position: relative;      /* 🛠 absoluteからrelativeに変更してテキストの左隣に固定 */
    margin-right: 15px;      /* 🛠 矢印とテキストの間のすき間 */
    flex-shrink: 0;          /* 🛠 矢印が潰れるのを防ぐ */
    
    width: 32px;
    height: 22px;
    background: #11a481;
    
    clip-path: polygon(
        0% 30%,
        55% 30%,
        55% 0%,
        100% 50%,
        55% 100%,
        55% 70%,
        0% 70%
    );
}

/* 結論テキスト */
.solution-text p {
    margin: 0 0 6px 0;
    line-height: 1.6;
    color: #333333;
}

/* 青い太字の強調部分 */
.solution-text .highlight-text {
    color: #0c4da2;
    font-weight: bold;
    font-size: 23px;
}

/* 📱 スマホ用レスポンシブ対応（画面幅768px以下） */
@media screen and (max-width: 1024px) {
    /* スマホでは2枚の画像を縦並びにする */
    .card-container {
        flex-direction: column; /* 横並びから縦並びに変更 */
        gap: 15px;              /* 上下の画像同士のすき間 */
    }

    .problem-card {
        width: 100%;            /* 横幅を画面いっぱいに広げる */
    }

    .problem-card img {
        width: 80%;            /* 画像がはみ出さないように固定 */
        height: auto;
        margin: auto;
    }
    /* キャッチコピー */
.sub-title {
    color: #1dbcb1;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* 大見出し */
.main-title {
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 25px;
        padding-bottom: 15px;
        
        /* 🔥 【重要】PC用のボーダーをここで一旦消去します */
        border-bottom: none; 

        /* テキスト全体の幅を狭めて中央に寄せる */
        max-width: 80%;       
        margin-left: auto;
        margin-right: auto;
        text-align: center;   
        
        /* 擬似要素（線）の基準位置にする */
        position: relative;
    }

    /* 擬似要素を使って、タイトルより長いアンダーバーを新しく作る */
    .main-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        
        /* 線の長さを調整（テキスト幅に対して120%の長さに設定） */
        width: 120%;          
        border-bottom: 1px solid #cccccc;
    }

/* 青い太字の強調部分 */
.solution-text .highlight-text {
    color: #0c4da2;
    font-weight: bold;
    font-size: 18px;
}

}

/* ===================================================
   PC・タブレット向けの基本スタイル（768px以上）
=================================================== */
.point-box {
  background-color: #fffaf2; /* 画像の淡いクリーム色 */
  border: 2px solid #ffe6cc;  /* ほんのりオレンジの枠線 */
  border-radius: 16px;        /* 滑らかな角丸 */
  
  width: 100%;
  max-width: 950px;           /* 全体のコンテンツ幅 */
  margin: 30px auto;
  padding: 24px 30px;
  box-sizing: border-box;
  
  display: flex;
  align-items: center;        /* 上下中央で綺麗に横並び */
}

/* 左側エリア（アイコンとタイトル） */
.point-left {
  display: flex;
  align-items: center;
  flex: 0 0 160px;            /* PCでの左側エリアの横幅を固定 */
  border-right: 1px solid #ffd0a0; /* PCは縦の仕切り線 */
  padding-right: 20px;
  margin-right: 25px;
}

/* pngアイコンを囲む枠（サイズ固定） */
.point-icon-wrapper {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

/* pngアイコン自体の設定 */
.point-png-icon {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 縦横比を崩さずに綺麗に枠内に収める */
  display: block;
}

/* 「ポイント」の文字 */
.point-title {
  font-weight: bold;
  color: #333333;             
  white-space: nowrap;
}

/* 右側エリア（説明文） */
.point-right {
  flex: 1;
}

.point-right p {

  line-height: 1.7;
  color: #222222;             
  margin: 0;
}

/* ===================================================
   スマホ向けのスタイル（767px以下）
=================================================== */
@media screen and (max-width: 767px) {
  .point-box {
    flex-direction: column;   /* 縦並びにする */
    align-items: stretch;     /* 中身の横幅をいっぱいに広げる */
    padding: 24px 20px;       /* スマホ用の適切な余白 */
    border-radius: 12px;      
  }
  
  .point-left {
    flex: 0 0 auto;
    width: 100%;
    border-right: none;       /* PC用の縦線を消す */
    
    /* アイコンと文字を中央寄せ */
    justify-content: center;  
    
    /* 文字の下にある薄いオレンジの横線 */
    border-bottom: 1px solid #ffcca0; 
    padding-right: 0;
    padding-bottom: 12px;     
    margin-right: 0;
    margin-bottom: 18px;      
  }
  
  .point-title {
    font-size: 2.0rem;        
    letter-spacing: 0.05em;
  }
  
  .point-right p {
font-size: 14px;
    line-height: 1.7;
    text-align: justify;      
  }
}


/* ========================================================
      ネオトレAPI コンポーネント専用スタイル（PC・スマホ両対応完全版）
       ======================================================== */
    .nt-wrapper {
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        color: #333333;
        line-height: 1.6;
        width: 100%;
        margin: 0 auto;
        padding: 10px;
        box-sizing: border-box;
    }

    /* 1. ヘッダー */
    .nt-header-title {
        display: flex;
        align-items: center;
        font-size: 24px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 20px;
    }
    .nt-header-title::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 32px;
        background-color: #00b092;
        margin-right: 15px;
        flex-shrink: 0;
    }

    /* 2. 上部エリア（文章 ＆ 証券システム×Excel） */
    .nt-description-section {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 25px;
        gap: 20px;
    }
    .nt-description-text {
        flex: 1;
        font-size: 16px;
        color: #333333;
        padding-top: 5px;
    }
    .nt-highlight-blue {
        color: #005caf;
        font-weight: bold;
    }
    .nt-api-diagram-container {
        flex-shrink: 0;
    }
    .nt-diagram-img {
        width: 280px; /* PC表示時の「証券システム×Excel」画像の横幅 */
        height: auto;
        display: block;
    }

    /* 3. 下部お悩み枠 */
    .nt-trouble-box {
        border: 1px solid #dcdcdc;
        border-radius: 30px;
        padding: 35px 45px;
        background-color: #ffffff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        box-sizing: border-box;
    }

    /* ========================================================
       【PC用のレイアウト設定（1025px以上）】
       大きな白い枠の中をGrid化し、左にイラスト、右にテキストを配置
       ======================================================== */
    @media (min-width: 1025px) {
        .nt-trouble-box {
            display: grid;
            grid-template-columns: 150px 1fr; /* 左列: イラスト幅, 右列: テキストコンテンツ */
            grid-template-rows: auto auto auto;
            gap: 10px 40px;
        }

        /* タイトル：最上段に横いっぱいに広げる */
        .nt-trouble-title {
            grid-column: 1 / 3;
            grid-row: 1;
            font-size: 18px;
            font-weight: bold;
            color: #333333;
            margin-bottom: 10px;
        }

        /* 箇条書き（①〜③）：右列の上側に配置 */
        .nt-trouble-list {
            grid-column: 2;
            grid-row: 2;
            list-style: none;
            padding: 0;
            margin: 0 0 10px 0;
        }
        .nt-trouble-list li {
            font-size: 15px;
            margin-bottom: 12px;
            color: #333333;
            text-indent: -1.5em;
            padding-left: 1.5em;
        }
        .nt-trouble-list li:last-child {
            margin-bottom: 0;
        }

        /* イラストと解決テキスト画像が入っている枠（.nt-solution-row） */
        /* contentsを指定することで、PC時のみ中のイラストとテキスト画像をグリッドのマス目に直接バラして配置できます */
        .nt-solution-row {
            display: contents; 
        }
        
        /* 悩む男性イラスト：左列に配置し、箇条書きと解決テキストの左側全体を縦にぶち抜く */
        .nt-illustration-container {
            grid-column: 1;
            grid-row: 2 / 4; 
            align-self: center; /* 箇条書きとテキスト画像を合わせた高さに対して中央揃え */
            width: 140px;
        }
        .nt-illustration-container img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 矢印・解決テキスト画像：右列の下側（箇条書きの下）に配置 */
        .nt-solution-container {
            grid-column: 2;
            grid-row: 3;
            align-self: center;
            margin-top: 10px;
        }
        .nt-solution-img {
            max-width: 550px;
            width: 100%;
            height: auto;
            display: block;
        }
    }

    /* ========================================================
       【スマホ・タブレット用のレイアウト設定（1024px以下）】
       ご提示いただいた1枚目のスマホ画面と、2枚目の画像レイアウトを完全再現
       ======================================================== */
    @media (max-width: 1024px) {
        /* 上部説明エリア：文章の右側に図を縦に並べる（スマホ用画像サイズ） */
        .nt-description-section {
            align-items: flex-start;
            gap: 15px;
            display: inline-block;
        }
        .nt-description-text {
            font-size: 15px;
            line-height: 1.7;
        }
        .nt-diagram-img {
            width: 90%;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        /* お悩みボックス全体の余白調整 */
        .nt-trouble-box {
            padding: 25px 20px;
            border-radius: 24px;
        }
        .nt-trouble-title {
            font-size: 16px;
            margin-bottom: 15px;
        }

        /* 箇条書きリスト：HTMLの並び通り、タイトルの下に配置。横いっぱいに広げる */
        .nt-trouble-list {
            list-style: none;
            padding: 0;
            margin: 0 0 25px 0; /* 下のイラスト行との間にしっかり隙間を空ける */
        }
        .nt-trouble-list li {
            font-size: 14px;
            margin-bottom: 10px;
            text-indent: -1.5em;
            padding-left: 1.5em;
        }

        /* イラストと解決画像が入っている枠（.nt-solution-row） */
        /* スマホ時は通常のFlexboxにして、イラストと解決テキストを同じ行に横並びで配置 */
        .nt-solution-row {
            display: flex; 
            align-items: center; /* 縦方向を中央揃え */
            gap: 15px; /* イラストとテキスト画像の間隔 */
        }
        
        /* 悩む男性イラスト */
        .nt-illustration-container {
            width: 90px; /* スマホ画面に合わせて縮小 */
            flex-shrink: 0;
        }
        .nt-illustration-container img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 矢印・解決テキスト画像 */
        .nt-solution-container {
            flex: 1;
        }
        .nt-solution-img {
            max-width: 100%;
            height: auto;
            display: block;
        }
    }

.neotre-container {
            max-width: 100%;
            margin: 0 auto;
            padding: 10px;
        }

        /* タイトル部分 */
        .neotre-main-title {
            font-size: 22px;
            font-weight: bold;
            color: #333333;
            display: flex;
            align-items: center;
            margin-bottom: 24px;
        }

        .neotre-main-title::before {
            content: "";
            display: inline-block;
            width: 14px;
            height: 28px;
            background-color: #00bfa5;
            margin-right: 12px;
            flex-shrink: 0;
        }

        /* ===================================================
           📱 スマートフォン用のスタイル（外枠のみの画像）
           =================================================== */
        .neotre-card {
            box-sizing: border-box;
            width: 100%;
            margin-bottom: 20px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
            padding: 16px 16px 16px 65px; 
        }

        /* 📱 スマホ用背景画像 */
        .neotre-card-01 {
            background-image: url('/tool/api/img/sp-frame-01.png');
        }
        .neotre-card-02 {
            background-image: url('/tool/api/img/sp-frame-02.png');
        }
        .neotre-card-03 {
            background-image: url('/tool/api/img/sp-frame-03.png');
        }

        /* 中身のテキスト */
        .neotre-card-title {
            font-size: 16px;
            font-weight: bold;
            color: #00bfa5;
            margin: 0 0 8px 0;
            line-height: 1.4;
        }

        .neotre-card-text {
            font-size: 14px;
            margin: 0;
            text-align: justify;
            color: #444444;
        }

        /* ===================================================
           フッター部分（矢印を画像に変更）
           =================================================== */
        .neotre-footer-message {
            display: flex;
            align-items: center;
            font-size: 15px;
            font-weight: bold;
            margin-top: 24px;
            padding-left: 4px;
            line-height: 1.5;
        }

        /* 🟢 送っていただいた形の矢印画像用のCSSスタイル */
        .neotre-footer-arrow {
            width: 24px;         /* 矢印の横幅（見栄えに合わせて調整してください） */
            height: auto;        /* 縦横比を維持 */
            margin-right: 10px;  /* 文字との間のすき間 */
            flex-shrink: 0;
            object-fit: contain;
        }

        .neotre-highlight {
            color: #00bfa5;
            font-size: 18px;
            border-bottom: 2px solid #ffeb3b; /* スマホの黄色い下線 */
            margin: 0 4px;
            padding-bottom: 2px;
        }
        /* 🟢 画像を再現：緑文字 ＋ 下側に太めの黄色蛍光マーカー */
        .neotre-highlight {
            font-size: 20px;
            font-weight: bold;
            color: #00bfa5; /* 画像通りの緑色の文字 */
            /* 下半分より少し多め（45%〜）に濃い黄色を敷く設定 */
            background: linear-gradient(transparent 45%, #ffeb3b 45%);
            margin: 0 4px;
            padding: 0 2px;
            display: inline-block;
            line-height: 1.2;
        }

        /* ===================================================
           💻 パソコン用のスタイル（外枠＋アイコンセットの画像）
           =================================================== */
        @media (min-width: 768px) {
            .neotre-main-title {
                font-size: 24px;
            }
            
            .neotre-card {
                min-height: 140px;
                padding: 40px 30px 40px 290px;
            }

            /* 💻 PC用背景画像 */
            .neotre-card-01 {
                background-image: url('/tool/api/img/pc-frame-icon-01.png');
            }
            .neotre-card-02 {
                background-image: url('/tool/api/img/pc-frame-icon-02.png');
            }
            .neotre-card-03 {
                background-image: url('/tool/api/img/pc-frame-icon-03.png');
            }
            
            .neotre-card-title {
                font-size: 20px;
                margin-bottom: 12px;
            }
            
            .neotre-card-text {
                font-size: 16px;

            }
            
            .neotre-footer-message {
                font-size: 20px;
                                                margin-top: 40px;
                align-items: center; /* PCでは1行に収まるため上下中央に揃えます */
                
            }

            .neotre-footer-arrow {
                width: 30px; /* PCでは少しだけ大きく表示 */
                                margin-right: 16px;
                margin-top: 0;
            }
            
            .neotre-highlight {
                font-size: 25px;
            }
        }
/* コンテンツ配置 */
        .content-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 25px;
            align-items: center;
        }
        .text-side {
            flex: 1;
            min-width: 300px;
        }
        
        /* 画像エリアの調整 */
        .image-side {
            flex: 1;
            min-width: 300px;
            text-align: center;
        }
        .flow-image {
            width: 100%;
            max-width: 450px;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        /* メリットの強調帯 */
        .summary-box {
            background-color: #f4fbf9;
            padding: 15px 20px;
            border-radius: 4px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
        .highlight {
            background: linear-gradient(transparent 60%, #fff176 60%);
        }

        /* レスポンシブ対応 */
        @media (max-width: 640px) {
            .content-container {
                flex-direction: column;
            }
            .summary-box {font-size: 15px;}
            .text-side {font-size: 14px;}
        }

.autotrade-wrapper {
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        padding: 40px 20px;
        display: flex;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    .autotrade-container {
        display: flex;
        gap: 24px;
        max-width: 900px;
        width: 100%;
        box-sizing: border-box;
    }

    /* 各カードの共通スタイル */
    .autotrade-card {
        flex: 1;
        background-color: #ffffff;
        border-radius: 24px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        overflow: hidden;
        padding-bottom: 24px;
        box-sizing: border-box;
    }

    /* ヘッダー部分 */
    .autotrade-card-header {
        display: flex;
        align-items: center;
        padding: 14px 24px;
        color: #ffffff;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 1px;
        border-bottom-right-radius: 32px;
        width: fit-content;
        min-width: 160px;
        box-sizing: border-box;
    }

    /* メリット・デメリット固有の色 */
    .autotrade-card-benefit .autotrade-card-header {
        background-color: #00bfa5; /* エメラルドグリーン */
    }
    .autotrade-card-demerit .autotrade-card-header {
        background-color: #005bc4; /* ブルー */
    }

    /* アイコン部分 */
    .autotrade-card-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        background-color: #ffffff;
        border-radius: 50%;
        margin-right: 12px;
        font-size: 14px;
        font-weight: bold;
    }
    .autotrade-card-benefit .autotrade-card-icon {
        color: #00bfa5;
    }
    .autotrade-card-demerit .autotrade-card-icon {
        color: #005bc4;
    }

    /* リスト部分 */
    .autotrade-card-content {
        padding: 24px 32px;
        box-sizing: border-box;
    }
    .autotrade-card-content ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .autotrade-card-content li {
        position: relative;
        padding-left: 14px;
        margin-bottom: 12px;
        font-size: 14.5px;
        color: #333333;
        line-height: 1.5;
    }
    /* 行頭のドット「・」 */
    .autotrade-card-content li::before {
        content: "・";
        position: absolute;
        left: 0;
        color: #333333;
    }
    .autotrade-card-content li:last-child {
        margin-bottom: 0;
    }

    /* 🛠️ レスポンシブ対応（スマホ表示の崩れを修正） */
    @media (max-width: 768px) {
        .autotrade-wrapper {
            display: block;      /* flexを解除して縦の高さが正しく伸びるように修正 */
            padding: 20px 12px;  /* 左右の余白を狭めて横幅を画面いっぱいに広げる */
            height: auto;        /* 高さを中身に自動追従させる */
        }
        .autotrade-container {
            flex-direction: column;
            gap: 20px;
            width: 100%;
        }
        .autotrade-card {
            flex: none;          /* 横幅の押し潰し制限を完全解除 */
            width: 100%;
        }
        .autotrade-card-header {
            font-size: 18px;
            padding: 12px 20px;
        }
        .autotrade-card-content {
            padding: 20px 20px;
        }
    }

/* ベーススタイル（PC向け） */
        .neotre-comp-wrapper {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            gap: 40px;
            align-items: flex-start;
            font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
            color: #333333;
            line-height: 1.6;
            padding: 20px;
            box-sizing: border-box;
        }

        /* 左側の画像エリア */
        .neotre-comp-media-box {
            flex: 1.2;
            max-width: 500px;
            width: 100%;
        }
        .neotre-comp-media-box img {
            width: 100%;
            height: auto;
            display: block;
            margin: 0;
            padding: 0;
        }

        /* 右側の注記エリア */
        .neotre-comp-notes-box {
            flex: 0.9;
            font-size: 14px;
            color: #444444;
            padding-top: 10px;
        }
        .neotre-comp-list {
            list-style-type: none;
            padding-left: 0;
            margin: 0;
        }
        .neotre-comp-item {
            position: relative;
            padding-left: 1.2em;
            margin-bottom: 12px;
            text-align: justify;
        }
        .neotre-comp-item::before {
            content: "※";
            position: absolute;
            left: 0;
            top: 0;
        }

        /* 📱 スマートフォン向けのレスポンシブ設定 (768px以下) */
        @media screen and (max-width: 768px) {
            .neotre-comp-wrapper {
                flex-direction: column; /* 縦並びに変更 */
                gap: 24px;              /* 画像とテキストの間の余白を調整 */
                padding: 16px;          /* スマホ画面の左右余白 */
            }

            .neotre-comp-media-box {
                max-width: 100%;        /* 画像を横幅いっぱいに広げる */
            }

            .neotre-comp-notes-box {
                font-size: 13px;        /* スマホで見やすいよう文字サイズを少し微調整 */
                padding-top: 0;
            }
            
            .neotre-comp-item {
                margin-bottom: 10px;    /* 行間のバランスを調整 */
            }
        }

/* 全体のコンテナ（PCでは横並び） */
        .neotre-card-container {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            gap: 24px;                  /* カード同士の間隔 */
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
            background-color: #f4f9fc; /* 必要に応じて背景色を調整してください */
        }

        /* 各カードのラッパー */
        .neotre-card-item {
            flex: 1;
            max-width: 450px;           /* カードの最大横幅 */
            width: 100%;
        }



        /* 📱 スマートフォン向けのレスポンシブ設定 (768px以下) */
        @media screen and (max-width: 768px) {
            .neotre-card-container {
                flex-direction: column; /* 縦並びに切り替え */
                gap: 20px;              /* 縦並び時のカード間の余白 */
                padding: 16px;
            }

            .neotre-card-item {
                max-width: 100%;        /* スマホ画面いっぱいに広げる */
            }
        }

/* 全体のレイアウト（PC向け・横並び） */
        .neotre-table-wrapper {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            gap: 40px;
            align-items: flex-start;
            font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
            color: #333333;
            line-height: 1.5;
            padding: 20px;
            box-sizing: border-box;
        }

        /* 左側：テーブルエリア */
        .neotre-table-area {
            flex: 1.2;
            width: 100%;
        }

        /* 比較テーブルのスタイル（角丸と影の再現） */
        .neotre-table-main {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border: 1px solid #b5c7d3;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            background-color: #ffffff;
            text-align: center;
        }

        /* セルの基本設定 */
        .neotre-table-main th, 
        .neotre-table-main td {
            padding: 16px 12px;
            border-bottom: 1px solid #b5c7d3;
            border-right: 1px solid #b5c7d3;
            vertical-align: middle;
        }

        /* 右端の列は右ボーダーを消す */
        .neotre-table-main th:last-child, 
        .neotre-table-main td:last-child {
            border-right: none;
        }

        /* 最終行は下ボーダーを消す */
        .neotre-table-main tr:last-child th, 
        .neotre-table-main tr:last-child td {
            border-bottom: none;
        }

        /* ヘッダー行の背景（グラデーションと薄いグレー） */
        .neotre-table-th-label {
            background-color: #f5f7fa;
            width: 25%;
        }
        .neotre-table-th-neotre {
            background: linear-content;
            background: linear-gradient(to bottom, #ebf6fd, #dcf0fb);
            font-size: 24px;
            font-weight: bold;
            width: 40%;
            text-align: center;
        }
        .neotre-table-th-rakuten {
            background-color: #f5f7fa;
            font-size: 20px;
            font-weight: bold;
            width: 35%;
            text-align: center;
        }

        /* 左側：項目名列のスタイル */
        .neotre-table-label-cell {
            background-color: #ffffff;
            font-weight: bold;
            font-size: 14px;
            text-align: center;
            line-height: 1.3;
        }

        /* 中央：ネオトレ列の強調スタイル（青文字・太字） */
        .neotre-table-neotre-cell {
            color: #005aa0;
            font-weight: bold;
            font-size: 38px;
            font-family: 'Arial Black', Gadget, sans-serif;
            background-color: #f2f9fd; /* 薄い青の背景 */
        }
        .neotre-table-neotre-cell .neotre-table-unit {
            font-size: 20px;
            margin-left: 2px;
        }

        /* 右側：楽天列のスタイル */
        .neotre-table-rakuten-cell {
            color: #777777;
            font-size: 20px;
        }
        .neotre-table-rakuten-cell .neotre-table-sub {
            font-size: 13px;
            color: #999999;
            vertical-align: middle;
        }

        /* 金利部分の文字サイズ微調整 */
        .neotre-table-neotre-cell.neotre-table-rate {
            font-size: 34px;
        }
        .neotre-table-rakuten-cell.neotre-table-rate {
            font-size: 22px;
            color: #555555;
        }

        /* 右側：注記テキストエリア */
        .neotre-table-notes-area {
            flex: 0.9;
            font-size: 13px;
            color: #555555;
            padding-top: 4px;
        }
        .neotre-table-notes-list {
            list-style-type: none;
            padding-left: 0;
            margin: 0;
        }
        .neotre-table-notes-item {
            position: relative;
            padding-left: 1.2em; /* 通常の「※」用インデント */
            margin-bottom: 10px;
            text-align: justify;
            line-height: 1.6;
        }
        /* 通常の「※」を自動付与 */
        .neotre-table-notes-item::before {
            content: "※";
            position: absolute;
            left: 0;
            top: 0;
        }
        
        /* ※1 用の特殊スタイル（文字幅が広くなるためインデントを深く調整） */
        .neotre-table-notes-item.neotre-table-note-spec1 {
            padding-left: 1.8em;
        }
        .neotre-table-notes-item.neotre-table-note-spec1::before {
            content: "※1";
        }

        /* 📱 スマートフォン向けのレスポンシブ設定 (768px以下) */
        @media screen and (max-width: 768px) {
            .neotre-table-wrapper {
                flex-direction: column; /* 縦並びに変更 */
                gap: 24px;
                padding: 16px;
            }

            .neotre-table-area, 
            .neotre-table-notes-area {
                width: 100%;
            }

            /* スマホで表が潰れないよう文字サイズを微調整 */
            .neotre-table-main th, 
            .neotre-table-main td {
                padding: 12px 6px;
            }
            .neotre-table-th-neotre { font-size: 20px; }
            .neotre-table-th-rakuten { font-size: 18px; }
            .neotre-table-label-cell { font-size: 12px; }
            .neotre-table-neotre-cell { font-size: 28px; }
            .neotre-table-neotre-cell .neotre-table-unit { font-size: 16px; }
            .neotre-table-neotre-cell.neotre-table-rate { font-size: 26px; }
            .neotre-table-rakuten-cell { font-size: 16px; }
            .neotre-table-rakuten-cell.neotre-table-rate { font-size: 18px; }
        }

/* 全体コンテナ（PC背景） */
        .promo-container {
            width: 100%;
            max-width: 900px;
            padding: 40px 20px;
            background-image: url('/tool/api/img/path_to_pc_background_image.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            color: #333333;
        }

        /* 冒頭のテキスト文章 */
        .intro-text {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 30px;
            text-align: left;
        }

        /* メインレイアウト（PC時は左右並び） */
        .main-layout {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 20px;
        }

        /* PC時の左側（金利カード2枠） */
        .left-panel {
            width: 35%;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* PC時の右側（グラフのみ） */
        .right-panel {
    width: 62%;
    display: flex;
    flex-direction: column;
    gap: 10px; /* グラフとリボンの間の隙間 */
}
        /* 各画像パーツの共通スタイル */
        .image-component {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 【PC用リボン】グラフの真下に配置するためのラッパー */
.pc-ribbon-container {
    width: 100%;
}
        /* 【スマホ用リボン】PC時は非表示 */
        .sp-ribbon {
            display: none;
        }

        /* 下部エリア（注記、詳細ボタン） */
        .bottom-layout {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        /* 注記テキスト（※から始まる文章） */
        .note-text {
            font-size: 13px;
            color: #666666;
            width: 100%;
            text-align: left;
        }

        /* 詳細はこちらボタンのコンテナ */
        .cta-container {
            width: 100%;
            max-width: 700px;
            margin: 0 auto; /* PC表示時にしっかり中央に配置する */
        }

        /* 詳細はこちらボタンのコンテナ */
        .cta-container02 {
            width: 100%;
            max-width: 850px;
            margin: 0 auto; /* PC表示時にしっかり中央に配置する */
        }
        /* ==========================================
           スマートフォン用のスタイル (画面幅 768px 以下)
           ========================================== */
        @media (max-width: 768px) {
            /* スマホ用の背景画像に切り替え */
            .promo-container {
                padding: 25px 15px;
                background-image: url('/tool/api/img/path_to_sp_background_image.png');
            }

            .intro-text {
                font-size: 14px;
                margin-bottom: 20px;
            }

            /* スマホ時はすべて一本の縦並びにする */
            .main-layout {
                flex-direction: column;
                gap: 15px;
                margin-bottom: 0;
            }

            /* 金利カード：スマホ時は2つの画像を横並び（50%ずつ） */
            .left-panel {
                width: 100%;
                flex-direction: row;
                gap: 10px;
            }

            .left-panel .image-component {
                width: 50%;
            }

            /* PC用のリボンを非表示にする */
            .pc-ribbon-container {
                display: none;
            }

            /* スマホ用のリボンを表示（カードの下、グラフの上に差し込む） */
            .sp-ribbon {
                display: block;
                width: 100%;
                margin-top: 10px;
                margin-bottom: 5px;
            }

            /* グラフのエリア */
            .right-panel {
                width: 100%;
            }

            /* 下部エリア */
            .bottom-layout {
                margin-top: 15px;
                gap: 15px;
            }

            /* 注記テキスト */
            .note-text {
                font-size: 11px;
            }

            /* 詳細はこちらボタン */
            .bottom-layout .cta-container {
                max-width: 100%;
            }
        }


        .neotre-card-container {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            gap: 24px;                  /* カード同士の間隔 */
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
            background-color: #f4f9fc; /* 必要に応じて背景色を調整してください */
        }

        @media screen and (max-width: 768px) {
            .neotre-card-container {
                flex-direction: column; /* 縦並びに切り替え */
                gap: 20px;              /* 縦並び時のカード間の余白 */
                padding: 16px;
            }

          }

.riyou{background: linear-gradient(to right, #b4d1f0, #ffffff);
    background-size: cover;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    padding: 10px;}

    .open-btn-wrap{
  margin: 50px auto;
  text-align: center;
}
        @media screen and (max-width: 768px) {

          .riyou{font-size: 16px;}
          }
.open-btn-img{
  width: 60%;
  max-width: 700px;
  height: auto;
  display: inline-block;
}

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

  .open-btn-wrap{
    margin: 32px 16px;
  }

  .open-btn-img{
    width: 100%;
  }

}