@charset "UTF-8";
#header {background-color: rgba(255,255,255,1);}
#page_header{background-image: url("../img/header_img_pc.webp");}

.top_right_illust{position: absolute;top: -30px;right:0;width: 10%;}

/* section_01 */
.section_01{background-color: #e2e0da;}
.sec01_mtb{width: 70%;margin: 3em auto;}
.sec_01_h3{text-align: center;font-size: 1.6em;font-weight: normal;margin: 0.6em 0;}

/* section_02 */
.section_02{position: relative; background-image: url("../img/sec_02_back_pc.webp");background-position: top center;background-repeat: no-repeat;background-size: cover;}
.section_02 img.illust{position: absolute;top: -50px;left:0;width: 15%;}
.section_02_box{margin: 3em 0 0em;background-color: #ffffff;}
.w50per{width: 50%;}
.text_box{box-sizing: border-box;padding: 7%;}
.remake_h3{font-size: 1.6em;margin: 0.6em 0;}
.remake_p{font-size: 1.14em;text-align: justify;line-height: 1.8em;}
.remake_lead{font-size: 1.6em;margin: 0.6em 0 -2em;}
/* section_03 */
.section_03{position: relative;}
.section_03 img.illust{position: absolute;top: 30px;right:30px;width: 20%;}

/* section_04 */
.section_04{background-color: #d6e4e0;position: relative;}
.sec_04_p{font-size: 1.14em;text-align: center;line-height: 1.6em;margin-top: 1.4em;}
/* section_05 */
.section_05{background-color: #ffecbb;position: relative;}
.section_05 img.illust{position: absolute;top: -50px;left:30px;width: 15%;}
.sec_05_btn{width: 48%;margin: 5em auto 2em;}
/* section_06 */
.section_06{background-color: #f5f5f1;position: relative;}
.case-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
	margin-top: 2em;
}

.case-item {
  flex: 42%;
  min-width: 280px;
}

.case-img {
  position: relative;
}

.case-img img {
  width: 100%;
  display: block;
}

/* BEFORE / AFTER ラベル */
.label {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0.8rem 1.5rem;
  font-weight: bold;
  font-size: 1.2rem;
  color: #fff;
}

.label.before {
  background-color: #f4e3b0; /* BEFORE の淡いベージュ */
  color: #333;
}

.label.after {
  background-color: #c62828; /* AFTER の赤 */
}

/* 説明テキスト */
.case-text {
  margin-top: 1rem;
  line-height: 1.8;
  font-size: 1.2rem;
  color: #444;
text-align: justify;
}

/* BEFORE→AFTER の矢印 */
.arrow {
  font-size: 3.6rem;
  color: #c62828;
  font-weight: bold;
  align-self: center;
	margin-bottom:2.6em;
}

/* ▼ レスポンシブ：スマホでは縦並び */
@media (max-width: 640px) {
  .case-box {
    flex-direction: column;
    align-items: center;
	  gap: 0rem;
  }
  .case-item {
    width: 100%;
  }
  .arrow {
	  font-size: 3.0rem;
    transform: rotate(90deg);
    margin: 0rem 0;
  }
	/* 説明テキスト */
.case-text {
  margin-top: 0.4rem;
  line-height: 1.4;
  font-size: 1.0rem;
  color: #444;
text-align: justify;
}
}



/*
===================================================
 tb タブレット解像度
===================================================
*/
@media screen and (max-width:1000px) {

	}
/*
===================================================
 sp スマホ解像度
===================================================
*/
@media screen and (max-width:640px) {
#page_header{background-image: url("../img/header_img_sp.webp");}

.top_right_illust{position: absolute;top: -30px;right:-10px;width: 13%;}
/* section_01 */
.sec01_mtb{width:90%;margin: 3em auto;}
.sec_01_h3{text-align: center;font-size: 1.0em;font-weight: normal;margin: 0.6em 0;}	
/* section_02 */
.section_02 img.illust{position: absolute;top: -30px;left:20px;width: 20%;}
.section_02_box{width: 90%; margin: 3em auto 0em;background-color: #ffffff;}
.w50per{width: 100%;margin: 0;}
.text_box{box-sizing: border-box;padding: 7%;}
.remake_h3{font-size: 1.0em;margin: 0.4em 0;}
.remake_p{font-size: 0.9em;text-align: justify;line-height: 1.8em;}
.remake_lead{font-size: 1.0em;margin: 0.4em 0 -1em;}
.section_03{position: relative;padding-top: 3em;}
.section_03 img.illust{position: absolute;top: -20px;left:-30px;width: 30%;}
.sec_05_btn{width: 80%;margin: 3em auto 2em;}
.section_05 img.illust{position: absolute;top: -40px;left:5px;width: 18%;}
}