@charset "UTF-8";
/* CSS Document */
/*//base.cssから上書き//*/
body {
	background-color: #f8f6f3;
}

#under02 .readArea h3 {
	margin-bottom: 0;
}

#under02 h3 {
	margin: 12rem auto 0;
}

h3 {
	margin-bottom: 2rem;
}

.lp-inner {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.lpTitle {
	width: 100%;
	background-color: #fff;
	display: flex;
	align-items: flex-start;
	position: relative;
}

.lpTitle h2 img {
	width: 36.82284041%;
	max-width: 503px;
	height: auto;
	position: absolute;
	top: 15%;
	left: 13.03074671%;
}

.lpTitle img.lpTitle-mainimg {
	width: 54.6852123%;
	height: auto;
	margin-left: auto;
}

.readArea {
	position: relative;
	overflow: hidden;
}

.illust-top-left {
  position: absolute;
  /* 横幅960pxのコンテンツエリアの左端を基準にする */
  top: 40px;
  left: calc(50% - 480px - 40px); /* センターから480px（960の半分）左へ、さらに80px外側へ */
  /*width: 150px;*/
  width: 15%;
  max-width: 150px;
  /*max-width: 15vw;*/
  z-index: 1;
}

.readArea h3 img {
	width: 100%;
	max-width: 484px;
	height: auto;
	margin: 0 auto;
}

.lpFlex {
  display: flex;
  justify-content: space-between;
  margin-top: 5rem;
}

.lpFlex li {
  width: 31%;
  display: flex;
  flex-direction: column;
}

.lpFlex li span.listTitle {
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  font-weight: 700;
  color: #90b1d3;
  text-align: center;
  border-top: solid 2px #90b1d3;
  border-bottom: solid 2px #90b1d3;
  padding: 1.5rem 0;
  margin-bottom: 2.5rem;
  display: block;
}

.lpFlex li span.listRead {
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  font-weight: 500;
  line-height: 1.8;
  color: #404040;
  text-align: left;
  margin-top: 2.5rem;
  display: block;
}

.lpFlex li.relative-li {
  position: relative; /* 3カラム目の枠を基準にする */
}

.illust-top-right {
  position: absolute;
  top: -40%;
  right: -80px; /* 3カラム目の写真の右側に飛び出させる */
  width: 170px;
  max-width: 18vw;
  z-index: 2;
  pointer-events: none; /* 万が一ボタン等に被ってもクリックを邪魔しない */
}

.caseArea {
	padding-bottom: 9rem;
	position: relative;
}

.illust-mid-left {
  position: absolute;
  top: 80px;
  left: calc(50% - 480px - 30px); /* 960pxエリアの左外側に配置 */
  width: 160px;
  max-width: 16vw;
  z-index: 1;
}

.caseArea h3 img {
	width: 100%;
	max-width: 593px;
	height: auto;
	margin: 0 auto;
}

.caseBox {
	width: 100%;
	max-width: 800px;
	display: flex;
	justify-content: space-between;
	margin: 5rem auto 10rem;
}

.caseBox div.case-single {
	width: 45%; /*360/800*/
	margin-right: 3rem;
	order: 0;
}

.caseBox div.case-dinks {
	width: 45%; /*360/800*/
	margin-left: 3rem;
	order: 2;
}

.caseBox div:nth-child(2) {
	width: 51%; /*408/800*/
	order: 1
}

@media all and (max-width: 1200px) {	
.illust-top-left {
  top: 40px;
  left: calc(50% - 480px - -40px);
  /*width: 150px;*/
  width: 15%;
  max-width: 150px;
  /*max-width: 15vw;*/
  z-index: 1;
}

.illust-top-right {
  position: absolute;
  top: -52%;
  right: -20px; /* 3カラム目の写真の右側に飛び出させる */
  width: 170px;
  max-width: 18vw;
  z-index: 2;
  pointer-events: none; /* 万が一ボタン等に被ってもクリックを邪魔しない */
}

.illust-mid-left {
  position: absolute;
  top: 80px;
  left: calc(50% - 480px - -30px); /* 960pxエリアの左外側に配置 */
  width: 160px;
  max-width: 16vw;
  z-index: 1;
}

}

/* ipad */
@media all and (max-width: 768px) {	
/*//base.cssから上書き//*/
.illust-top-left,
.illust-top-right,
.illust-mid-left {
	display: none;
}

.lpTitle {
	flex-direction: column-reverse;
	position: static;
	align-items: center;
}

.lpTitle h2 img {
	width: 100%;
	max-width: 503px;
	margin: 4.5rem auto;
	position: static;
}

.lpTitle img.lpTitle-mainimg {
	width: 100%;
	margin: 0 auto;
}

.lpFlex {
    flex-direction: column;
    align-items: center;
  }
  
  .lpFlex li {
    width: 100%;
    max-width: 450px;
    margin-bottom: 5rem;
  }
  
  .lpFlex li:last-child {
    margin-bottom: 0;
  }
  
 .caseArea {
	padding-bottom: 4.5rem;
}


.caseBox {
	flex-direction: column;
	justify-content: center;
	margin: 5rem auto;
}

.caseBox div.case-single,
.caseBox div.case-dinks{
	width: 100%;
	max-width: 450px;
	margin: 3rem auto;
	order: 0;
}

.caseBox div:nth-child(2) {
	width: 100%;
	max-width: 450px;
	margin: 3rem auto;
}

}


/* sp */
@media all and (max-width: 430px) {


}