/* OPTIN LP 専用CSS */
/* =======================================
   ファーストビュー（背景＋中央画像）
======================================= */
body,
.lp-wrapper,
.entry-content {
  background: transparent !important;
}

.lp-wrapper {
  background: transparent !important;
}

.lp-fv {
  width: 100%;
	height : 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background: url('https://trader-first.com/wp-content/themes/ystandard-child/image/optin-fv-bg-pc.png') center/cover no-repeat;
  background-color: #2547b2!important;
}

@media (max-width: 880px) {
.lp-fv {
  width: 100%;
	height : 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background: url('https://trader-first.com/wp-content/themes/ystandard-child/image/optin-fv-bg-sp.png') center/cover no-repeat;
  background-color: #2547b2 !important;
}	
}


.lp-fv-inner {
  max-width: 1200px;
  width: 100%;
  text-align: center;
}

.lp-fv-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* =======================================
   コンテンツ
======================================= */
.lp-content-top{
	width: 100%;
	background-color: #071761;
	background-image: url('https://trader-first.com/wp-content/themes/ystandard-child/image/profile_bg.png'); 
	background-repeat: no-repeat; 
	background-position: top center;
	background-size: cover;
}
.lp-content {
	width: 100%; 
	background-color: #ffffff;
}
.lp-content-mel{
	width : 100%;
	background-image: url('https://trader-first.com/wp-content/themes/ystandard-child/image/top-under-bg-pc.jpg'); 
	background-repeat: no-repeat; 
	background-position: top center;
	background-size: cover;
	padding : 40px 0px;
}
.lp-content-miyata{
	width : 100%;
	background : #effbfe!important;
	padding : 60px 0px;
}
.lp-content-profile{
  width: 100%;
  padding: 45px 0;
    background : #f7f8fa;
}
.lp-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 20px;
}
.lp-content-link{
	width : 100%;
	background : #f4f4f4!important;
	padding : 30px 0px;
}
.lp-heading {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
}

/* =======================================
   プロフィール 2ボックスレイアウト
======================================= */

.lp-inner-profile {
	width : 940px;
  margin: -23px auto 0;
  padding: 0px 20px 50px 20px;
  background: url('https://trader-first.com/wp-content/themes/ystandard-child/image/profile-bg.png') center/cover no-repeat;
}
.profile-box-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* ボックス間の余白 */
  justify-content: space-between;
}

/* ★ 横並び用に幅を50% - 余白に変更 ★ */
.profile-box {
  width: calc(50% - 15px);  /* 1200px幅に2個並ぶ */
  box-sizing: border-box;

  margin: 0;      /* ← 縦落ちの原因になる auto は削除 */
  padding: 1.5em 1.2em;
  position: relative;
  border: 8px solid #c9c3b8;
  z-index: 0;
  background: #fff; /* あった方が綺麗 */
}

/* ワンポイント装飾（そのまま使えます） */
.profile-box::before {
  content: '';
  display: block;
  position: absolute;
  top: -8px;
  left: -8px;
  width: 8px;
  height: 8px;
  background-color: #cc0000;
  z-index: 1;
}

.syusai{
	font-size : 24px;
	text-align : center;
	font-weight : 600;
	line-height : 38px;
	margin-bottom : 30px;
}

/* 見出し */
.profile-title {
  font-size: 26px;
	line-height : 28px;
  font-weight: 700;
  margin-bottom: 15px;
	text-align : center;
}
.profile-title span{
	font-size : 17px;
  font-weight: 600;
}
.profile-img{
	text-align : center;
	width : 92%;
	margin : 20px auto 0;
}

/* スマホ：縦並びに変更 */
@media (max-width: 768px) {
  .profile-box-wrapper {
    flex-direction: column;
    gap: 20px;
  }
  .profile-box {
    width: 100%; /* 横幅いっぱいで縦並び */
  }
.lp-content{
	width : 100%;
	background : #ffffff;
	margin-top : -20px;
}
	.img-20{
		padding : 0 20px;
	}
.lp-content-mel{
	width : 100%;
	background-image: url('https://trader-first.com/wp-content/themes/ystandard-child/image/top-under-bg-sp.jpg'); 
	background-repeat: no-repeat; 
	background-position: top center;
	background-size: cover;
	padding : 40px 0px 10px 0px;
}
.syusai{
	font-size : 18px;
	line-height : 30px;
	text-align : center;
	font-weight : 600;
}
}


/*メルマガフォーム*/
.lp-inner-mel {
  max-width: 880px;
  margin: 0 auto;
  padding: 0px 20px 20px 20px;
}
.form-tyui{
	color : #555151;
	font-size : 90%;
}

/*メルマガフォーム*/
.mel-form {
  max-width: 100%;
  margin: 30px auto;
  padding: 30px;
  background: #faf6e2;
  border-radius: 14px;
  border: 1px solid #c2b98a;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ブロック間余白 */
.form-block {
  margin-bottom: 20px;
}

/* 全input共通 */
.mel-form input[type="text"],
.mel-form input[type="email"] {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 16px;
  background: #fafafa;
  transition: 0.25s;
  box-sizing: border-box;
}

/* フォーカス時 */
.mel-form input[type="text"]:focus,
.mel-form input[type="email"]:focus {
  background: #fff;
  border-color: #0078ff;
  box-shadow: 0 0 6px rgba(0,120,255,0.25);
}

/* 氏名 横並び */
.name-flex {
  display: flex;
  gap: 12px;
}

.name-flex input {
  width: 50%;
}

/* スマホも横並びキープ */
@media (max-width: 480px) {
  .name-flex {
    gap: 10px;
  }
.lp-inner-profile {
  width: auto;
  margin: 0px auto 0;
  padding: 0px 20px 20px 20px;
}
}

/* ボタン */
.center-text {
  margin: 0 !important;
  padding: 0 !important;
}
.formBtn {
  display: inline-block;
  border: none;
  background: none;
  cursor: pointer;
  margin-bottom: 25px;
}

/* 画像だけぼよーん */
.formBtn img {
  display: block;
  width: 100%;          /* ボタンサイズそのまま維持 */
  height: auto;
  animation: boing 1.6s infinite ease-in-out;
}

@keyframes boing {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.15); } /* ぼよーん大きく */
  50%  { transform: scale(1.00); } /* ←縮ませない！ */
  70%  { transform: scale(1.08); } /* もう一度軽く大きく */
  100% { transform: scale(1); }
}



/* フォームボタンの余白もゼロ化 */
.formBtn {
	max-width : 480px;
  margin: 30px auto!important;
  padding: 0 !important;
  border: none;
  background: none;
  display: block;
  width: 100%;
  cursor: pointer;
}

/* 画像ボタン用：画像を100%で綺麗に表示 */
.formBtn img {
  display: block;
  width: 100%;
  height: auto;
}

/* ====================================
   スマホ対応
==================================== */
@media (max-width: 767px) {
  .mel-form {
    padding: 20px;
  }

  .mel-form tr {
    padding: 16px;
  }

  .mel-form td input#touroku_name1,
  .mel-form td input#touroku_name2 {
    width: calc(50% - 10px);
  }
}

/* 宮田さま紹介セクション */
.miyata-wrapper {
  width: 880px;
  margin: 0 auto;
  position: relative;
}
.tokutyou-wrapper {
  width: 880px;
  margin: 20px auto 0px;
	border : 7px solid #acbec7;
	background : #fff;
}
.gutaiteki-wrapper {
  width: 880px;
  margin: 20px auto 0px;
	border : 7px solid #882d09;
	background : #fff;
}
.tokutyou-wrapper-text {
  width: 880px;
  margin: 20px auto 0px;
}

/* 回り込み解除（超重要） */
.miyata-wrapper::after {
  content: "";
  display: block;
  clear: both;
}

/* 画像（PCでは右に回り込む） */
.miyata-img {
  float: right;
  width: 28%; /* 適宜調整 */
  margin: 0 0 20px 20px;
  display: block;
}

/* テキスト部分 */
.miyata-inner {
  overflow: hidden;
	padding : 0px;
}
.tokutyou-inner{
  overflow: hidden;
	padding : 20px;
}
.tokutyou-ttl{
	width : 100%;
	background : #4c778a;
	color : #fff;
	font-size : 28px;
	padding : 8px 0px;
	font-weight : 600;
	text-align : center;
	margin-bottom : 20px;
}
h3.tokutyou {
	color : #cc0000;
  border-bottom: solid 3px #094763;
  position: relative;
	line-height : 200%;
	font-size : 24px;
	margin-top : 30px!important;
}

h3.tokutyou:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #cc0000;
  bottom: -3px;
  width: 30%;
}
.gutaiteki-inner{
  overflow: hidden;
	padding : 20px;
}
.gutaiteki-ttl{
	width : 100%;
	background : #882d09;
	color : #fff;
	font-size : 28px;
	padding : 8px 0px;
	font-weight : 600;
	text-align : center;
	margin-bottom : 20px;
}
h3.gutaiteki {
	color : #882d09;
  border-bottom: solid 3px #031360;
  position: relative;
	line-height : 200%;
	font-size : 24px;
	margin-top : 30px!important;
}

h3.gutaiteki:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #882d09;
  bottom: -3px;
  width: 30%;
}

/* スマホ対応 */
@media (max-width: 767px) {
.lp-inner {
  padding: 20px 20px;
}
/* 宮田さま紹介セクション */
.lp-content-miyata{
	width : 100%;
	background : #effbfe!important;
	padding : 40px 0px;
}
.miyata-wrapper {
  width: auto;
  margin: 0 20px;
  position: relative;
}
  .miyata-img {
    float: none;
    width: 65%;
    margin: 0 auto 20px;
  }
  .miyata-inner {
    overflow: visible;
  }
  .tokutyou-inner {
    overflow: visible;
  }
.tokutyou-wrapper {
  width: auto;
  margin: 20px;
}
.tokutyou-ttl{
	font-size : 22px;
}
h3.tokutyou {
	font-size : 20px;
}
.tokutyou-wrapper-text {
  width: auto;
  margin: 20px;
}
.gutaiteki-wrapper {
	width : auto;
  margin: 20px;
}
.gutaiteki-ttl{
	font-size : 22px;
}
h3.gutaiteki {
	font-size : 20px;
}
}

/* チェックマーク付きリスト */
.s-plan {
  list-style: none;
  padding-left: 0;
  margin: 40px 0 40px 0;
}

.s-plan li {
  position: relative;
  padding-left: 1.8em;
  margin-bottom: 0.4em;
  font-weight: 700;
  line-height: 1.6;
}

/* チェックマーク */
.s-plan li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.1em;
  line-height: 1.3;
  color: #2bb673;
  transform: translateY(0.1em);
}

/* サブテキスト */
.profile-sub{
  font-size: 18px;
  text-align: center;
  font-weight: 600;
}


/* スマホ（縦長） */
@media (max-width: 768px) {
  .lp-fv {
    height: auto;
	  padding : 30px 0px
  }
}

/* 画像を中央に置く場合（後で差し替えOK） */
.lp-fv-inner {
  max-width: 1000px;
  width: 100%;
  text-align: center;
}

.lp-fv-img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}