/*============================================================
Boost用
============================================================*/
:root{
  --boost-container: 1200px; /* 右寄せの基準幅（中央コンテナ想定） */
  --gutter-boost: clamp(24px, (100vw - var(--boost-container))/2, 72px);
  --right-max: 960px;        /* ロゴ／メッセージの最大幅 */
}

/****************
トップビジュアル
****************/

section#top {
  margin-top: 108px; /*ヘッダ分68＋もともと余白40 */
  background: #FFFFFF url(/assets/images/boost/boost_main_image.jpg) no-repeat left center / auto 100%;
}

div.topMessage {
  margin: 0 auto; /* 中央寄せ */
  /*width: clamp(280px, calc(100vw * 709 / 1200), 709px);*/
	width: clamp(320px, 56vw, 709px);
}

div.topMessage p.topCopy {
  font-weight: 700;
  text-align: center;
  font-size: clamp(20px, 4vw, 48px); /* fluid */
}

div.topMessage h1 {
  width: 100%;
	max-width:709px;
  aspect-ratio: 709 / 174;
  background: url(/assets/images/boost/boost_main_logo.png) no-repeat center / contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto 20px auto; /* 中央寄せ（左右auto） */
}

div.topMessage p.topLead {
  font-weight: 400;
  text-align: center;
  font-size: clamp(16px, 4vw, 26px); /* fluid */
}

div.topMessage p.topCopy,
div.topMessage p.topLead {
  text-shadow:
    0 0 2px rgba(255,255,255,0.8),
    0 0 4px rgba(255,255,255,0.6),
    0 0 6px rgba(255,255,255,0.4);
}

div.topMessage ul.topBtn{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /*flex-wrap: nowrap;*/
  /*box-sizing: border-box;*/
	/*margin:0 0 0 0;*/
	gap:20px;
}
div.topMessage ul.topBtn li{
	/*width:calc( ( 100% - 20px ) / 2 );*/
	/*margin:0 20px 0 0;
 	padding:0;*/
	flex: 1 1 0;
}
/*div.topMessage ul.topBtn li:last-child{
	margin:0 0 0 0;
}*/
div.topMessage ul.topBtn li a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  line-height: 1.2;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  text-align: center;
  transition: 0.2s ease-in-out;
  text-decoration: none;
}
div.topMessage ul.topBtn li a.btnDL{
	border:1px solid var(--color-link);
	background: var(--color-link);
	color:#fff;
}
div.topMessage ul.topBtn li a.btnDL:hover{
  border-color: var(--color-link-hover);
  background: var(--color-link-hover);
}
div.topMessage ul.topBtn li a.btnPlan{
	border:1px solid var(--color-orange);
	background: var(--color-orange);
	color:#fff;
}
div.topMessage ul.topBtn li a.btnPlan:hover{
  border-color: var(--color-orange-hover);
  background: var(--color-orange-hover);
}

/****************
Boostとは（リード）
****************/
section#lead {
  background: #FFFFFF;
  box-sizing: border-box;
	margin-top:60px;
	padding:20px;
}
section#lead > div{
	width:100%;
	margin:0 auto;
	padding:0;
}
section#lead div.message h2{
	font-weight: 700;
	font-size: clamp(24px, 4vw, 36px);
}
section#lead div.message p{
	font-weight: 400;
	font-size: clamp(16px, 2vw, 18px);
}
section#lead div.image img{
	width:100%;
}
/****************
こんなお悩み＆解決＆プラン
****************/
section#question,
section#answer,
section#plan {
  background: var(--color-lightblue);
	margin-top:80px;
	padding-top: 80px;
	padding-bottom: 80px;
}
section#answer {
  background: var(--color-blue);
	margin-top:0;
	padding-top: 0;
}
section#plan {
  background: var(--color-white);
	margin-top:0;
	padding-top: 80px;
}
section#question h2,
section#answer h2,
section#plan h2{
	text-align:center;
	margin-bottom:1rem;
}
section#answer h2{
	margin-bottom:1.6rem;
	color:var(--color-white);
}
section#question > p,
section#plan > p{
	width:100%;
	font-weight: 700;
	font-size: clamp(16px, 2vw, 24px);
	text-align:center;
}

section#answer div.ansArrow {
	/*width: 0;
	height: 0;
	border-left: 120px solid transparent;
	border-right: 120px solid transparent;
	border-top: 32px solid var(--color-lightblue);
	margin: 0 auto 48px auto;*/
	height: 32px;
	margin: 0 auto 48px;
	width: min(25%, var(--container-max));
	background: var(--color-lightblue);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	
}

section#question ul,
section#answer ul,
section#plan ul {
  display: block;
  box-sizing: border-box;
	margin: 40px auto 0 auto;
}
section#question ul li,
section#answer ul li,
section#plan ul li{
	width:100%;
	margin: 0 auto 20px 0;
	padding:0;
	border-radius:8px;
	background:#fff;
}
section#plan ul li{
	padding: 20px;
	border: 1px solid var(--color-blue);
	text-align: center;
}

section#question div.quesTop,
section#answer div.ansTop {
	display:block;
	height:8px;
	background: linear-gradient(to right, var(--color-gradation-light), var(--color-gradation-dark));
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
section#answer div.ansTop {
	height:auto;
	padding: 10px 0;
	text-align:center;
}
section#answer div.ansTop h3 {
	/*font-size:clamp(16px, 2vw, 24px);*/
	color:var(--color-white);
}

section#question div.quesImage,
section#answer div.ansImage {
	padding:20px;
}
section#question div.quesImage img,
section#answer div.ansImage img{
	margin:0 auto;
}
section#question div.quesText,
section#answer div.ansText{
	padding:20px;
}

section#plan h3{
	font-size:42px;
	line-height: 1.0;
	color:var(--color-blue);
	font-weight:700;
}
section#plan p.planName{
	font-size:12px;
	line-height:1.0;
	color:var(--color-gray);
	font-weight:700;
}
section#plan h4{
	width:fit-content;
	min-width:172px;
	margin:0 auto 8px auto;
	padding:8px 16px;
	font-size:14px;
	line-height:1.0;
	background:var(--color-blue);
	color:var(--color-white);
	font-weight:700;
	border-radius:20px;
}
section#plan p.planExp {
	margin-bottom:2rem;
}
section#plan p.planSend {
	line-height: 1.0;
	margin: 0;
}
section#plan p.planSend span.big{
	font-size:180%;
}
section#plan p.planSmall {
	font-size:60%;
	margin-bottom:0rem;
	padding-bottom:40px;
}

/****************
CVボタン
****************/
section#btnBlack,
section#btnWhite{
  background: var(--color-darkgray);
	padding-top: 40px;
	padding-bottom: 40px;
	color:var(--color-white);
}
/*section#btnWhite{
  background: var(--color-white);
	color:var(--color-text);
	padding-bottom: 80px;
}*/
section#btnBlack ul,
section#btnWhite ul {
  box-sizing: border-box;
	max-width: 820px;
	margin: 0 auto;
}
section#btnBlack ul li,
section#btnWhite ul li{
	width:auto;
	margin: 0 auto 0 0;
	padding:0;
	text-align: center;
}
section#btnBlack ul li img,
section#btnWhite ul li img{
	margin:0 auto 20px auto;
	max-width: 160px;
}
section#btnBlack ul li div.btnLead,
section#btnWhite ul li div.btnLead{
	font-size: clamp(20px, 4vw, 28px);
}
section#btnBlack ul li div.btnLink a,
section#btnWhite ul li div.btnLink a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 240px;
  min-height: 60px;
  padding: 10px 14px;
  line-height: 1.2;
  font-size:clamp(16px, 2vw, 18px);
  font-weight: 700;
  border-radius: 6px;
  text-align: center;
  transition: 0.2s ease-in-out;
  text-decoration: none;
	border:1px solid var(--color-link);
	background: var(--color-link);
	color:#fff;
}
section#btnBlack ul li div.btnLink a:hover,
section#btnWhite ul li div.btnLink a:hover{
  border-color: var(--color-link-hover);
  background: var(--color-link-hover);
}


/****************
ブレークポイント
****************/
@media (max-width: 359.98px) {}

@media (min-width: 400px) {
	section#question div.quesBox,
	section#answer div.ansBox {
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	section#question div.quesImage,
	section#answer div.ansImage {
		min-width: 120px;
	}
}

@media (min-width: 640px) {
	/* 640px以上：右端 = “中央1200pxコンテナ”の右端に合わせる */
  div.topMessage{
    margin: 0 var(--gutter-boost) 0 auto; 
    width: clamp(600px, 58vw, var(--right-max));
		min-height: clamp(508px, 58vw, 664px);
		padding-top: 40px;
  }
	div.topMessage ul.topBtn{
		width:60%;
		margin:0 auto 0 0;
		
	}
	div.topMessage ul.topBtn li {
		min-width: 220px;
	}
	div.topMessage ul.topBtn li a{
		padding: 20px 16px;
		font-size: 18px;
	}
  section#lead {
    display: flex;
    /*align-items: center;*/
    justify-content: flex-start;
    flex-wrap: nowrap;
		max-width: 1200px;
		margin: 80px auto 0 auto;
		padding:20px;
	}
  section#lead > div {
    width: auto;   /* 必要に応じて調整 */
    flex: 1;       /* 均等割りしたいなら追加 */
  }
	section#lead div.message p{
		padding-right:40px;
	}
	section#btnBlack ul,
	section#btnWhite ul{
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
	section#btnBlack ul li,
	section#btnWhite ul li{
		text-align: left;
	}
	section#btnBlack ul li:first-child,
	section#btnWhite ul li:first-child{
		width:185px;
		margin-right: 40px;
	}
	section#plan ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
		gap: 40px;
  }
	section#plan ul > li {
    flex: 1 1 calc(50% - 40px); /* 2列 */
	}
	section#plan p.planExp {
		min-height:78px;
	}	
}
@media (min-width: 768px) {
  div.topMessage p.topCopy {
    text-align: left;
  }
  div.topMessage h1 {
    background-position: right center;
    margin: 0 0 30px auto; /* 左autoで右寄せ */
  }
  div.topMessage p.topLead {
    text-align: left;
  }
	section#question ul,
	section#answer ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
		gap: 40px;
  }
	section#question ul > li,
	section#answer ul > li{
    width: auto;   /* 必要に応じて調整 */
    flex: 1;       /* 均等割りしたいなら追加 */
		margin: 0 auto 0 0;
	}

	section#question div.quesBox,
	section#answer div.ansBox {
		display: block;
	}
	section#question div.quesImage,
	section#answer div.ansImage {
		width: auto;
		padding:40px;
	}
}
@media (min-width: 860px) {
	section#plan p.planExp {
		min-height:52px;
	}
}

@media (min-width: 960px) {
  div.topMessage h1 {
    margin: 0 0 50px auto;
  }	
}
@media (min-width: 1200px) {
  /*div.topMessage{
    width: clamp(720px, 64vw, var(--right-max));
  }*/
  div.topMessage p.topCopy {
    font-size: 48px; /* clampを無視して固定 */
  }
  div.topMessage h1 {
    /*margin: 0 0 60px auto;*/
		margin: 0 auto 60px 0;
  }
	div.topMessage p.topLead {
    font-size: 32px; /* clampを無視して固定 */
  }
	section#plan ul > li {
    flex: 1 1 calc(25% - 40px); /* 4列 */
	}
	section#plan p.planExp {
		min-height:104px;
	}
}