/* ======== Style ======== */

/* bodyの余白をなくして、上にピッタリ */
body {
    margin: 0;
    /* もし固定ヘッダ用に padding-top:100px; とか書いていたら
       このページでは 0 に上書きしておく */
    padding-top: 0;
}

/* スライダー本体：PCでは1200px・中央寄せ */
@media screen and (min-width: 1024px) {
    #slick-slide {
        width: 1200px;
        margin: 0 auto;   /* 画面の中央に */
    }
}

/* 画像をコンテナいっぱい（＝1200px）＆センター表示 */
#slick-slide .slick-slide {
    text-align: center;
}
/* スライダーを位置の基準に */
#slick-slide {
    position: relative; /* 追加！ */
}

#slick-slide .slick-slide img {
    display: block;
    width: 100%;   /* 親が1200pxなので、実質1200px */
    height: auto;
}

/* テキスト：スライダー画像の中央基準へ変更 */
.slider-catch {
    position: absolute;
    top: 50%;  /* スライダー高さの50% */
    left: 50%;
    transform: translate(-50%, -170%);

    background: rgba(228, 226, 244, 0.75);
    color: #0A004D;
    padding: 4px 44px;
    font-size: 45px;
    font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN",
                "MS PMincho", "ヒラギノ明朝 ProN W3", serif;
	font-weight:bold;
    z-index: 20;
    white-space: nowrap;
}


.slick-prev,
.slick-next {
  z-index: 99;
}

.slick-prev {
  left: 10px;
}

.slick-next {
  right: 10px;
}

/* ドット部分のスタイル調整 */


.slick-dots li button:before {
  font-size: 50px; /* ● の大きさ（初期は 6px くらい） */
  color: #000;     /* 白でくっきり */
  opacity: .75;
}

.slick-dots li.slick-active button:before {
  color: #eee;     /* アクティブを白で強調 */
  opacity: 1;
}










/* キャッチコピー共通 */
.slider-catch {
  position: absolute;
  background: rgba(228, 226, 244, 0.85);
  color: #0A004D;
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN",
               "MS PMincho", "ヒラギノ明朝 ProN W3", serif;
  font-weight: bold;
  z-index: 20;
  pointer-events: none; /* クリック無効でUI干渉なし */
  text-shadow: 0 0 5px rgba(255,255,255,0.4); /* 読みやすさUP */
}

/********** PC **********/
@media (min-width: 769px) {
/* スライダーリストを基準にする */
.slider .slick-list {
  position: relative;
    top: 0px;
}
  .slider-catch {
    top: 333px;
    left: 50%;
    transform: translate(-50%, -380%);
    padding: 0px 44px;
	margin-top:210px;
    font-size: 45px;
    white-space: nowrap;
  }
}



/********** SP **********/
@media (max-width: 768px) {
/* スライダーリストを基準にする */
.slider .slick-list {
  position: relative;
    top: 94px;
}
  .slider-catch {
    width: 62%;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 10px;
    font-size: 20px;
    text-align: center;
    line-height: 1.4;
    white-space: normal;
  }
.slick-prev {
  left: 10px;
top: 200px;
}

.slick-next {
  right: 10px;
top: 200px;
}
.slick-dots {
    top: 315px;
}
	}



/* 表紙メイン */
.main-intro{
	width:1200px;
	margin:0 auto;
	text-align:center;
}
.main-intro h1 {
  font-size: 32px;
  margin-bottom: 18px;
}
.main-intro .lead {
  font-size: 18px;
  line-height: 1.8;
}

@media (max-width: 768px) {
.main-intro{
	width:80%;
	margin-top:160px;
}
  .main-intro h1 {
    font-size: 5.5vw;
    margin-bottom: 14px;
    line-height: 1.4;
  }
  .main-intro .lead {
    font-size: 3.8vw;
    line-height: 1.7;
	text-align:left;
  }
}





/* ３ボックス */
.top_01box {
  width: 100%;
  padding: 60px 0;
  background: #fff;
}

.top_01wrap {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; /* 追加 */
}

.top_01img {
  width: 600px;
  z-index: 20;
  position: relative;
}
.top_01img img {
  width: 600px;
  height: 400px;
  object-fit: cover;
  display: block;
}

.top_01txtbox {
    width: 655px;
    height: 400px;
    background: #F0EAF9;
    padding: 40px 50px 40px 87px;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    margin-top: 45px;
    margin-left: -107px;

    display: flex;           /* 追加 */
    flex-direction: column;  /* 縦並び */
}

.top_01btn {
  align-self: flex-end;  /* 右寄せ */
}

.top_01fuji {
  width: 180px;
  position: absolute;
  top: -40px;
  right: 70px;
  transform: rotate(5deg); /* ←調整OK */
}

.top_01ttl {
  font-size: 28px;
  font-weight: 700;
  color: #47288E;
  margin-bottom: 20px;
}

.top_01txt {
  line-height: 1.9;
  font-size: 16px;
  color: #333;
  margin-bottom: 30px;
}

.top_01btn {
  display: inline-block;
  width: 250px;
  text-align: center;
  background: #BD96E5;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 0;
  text-decoration: none;
  border-radius: 6px;
}
.top_01btn:hover {
  opacity: 0.85;
}







/* 2段目、reverse の場合、左右を反転 */
/* reverse 用の flex-direction は一旦やめる */
.top_01wrap.reverse {
  /* flex-direction: row-reverse; ← 使わない */
}

/* 「お部屋」用：テキストボックスを左、画像を右に配置するときの調整 */
.top_01txtbox.left {
  margin-left: 0;
  margin-right: -107px; /* 右側にかぶせる */
}

/* 藤イラストを左寄せに */
.top_01txtbox.left .top_01fuji {
  left: 70px;
  right: auto;
  transform: rotate(-5deg);
}
/* 2段目専用：藤イラストを右寄せ */
.top_01wrap.reverse .top_01fuji {
  left: auto;
  right: 50px;
  transform: rotate(5deg);
margin: 0px 65px 0px 0px;
}
/* 2段目は全文字左寄せに */
.top_01wrap.reverse .top_01txtbox {
    text-align: left;
    align-items: flex-start; /* ←これが重要！ */
padding: 50px 88px 0px 50px;
}

/* 補足文（ユニットバス）の小さい文字 */
.top_01note {
  font-size: 13px;
  margin-top: -30px;
  margin-bottom: 30px;
  color: #444;
}
/* 2段目専用：ボタンを左寄せ */
.top_01wrap.reverse .top_01btn {
	align-self: flex-start;
}







/* SP用 */
@media (max-width: 768px){
.top_01box {
	width: 100%;
	padding: 0px 0;
}
.top_01wrap{
	flex-direction:column;
	width:100%;
	padding: 0px 0px 0px 0px;

}

.top_01img{
	width:100%;
	height:100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;

}
.top_01txtbox{
	width:100%;
	height:100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 30px 0px;

}
.top_01txtbox.left {
	margin-left: 0;
	margin-right: 0px;
}
.top_01img img {
	width:100%;
	height:100%;
	object-fit: contain;

}
.top_01ttl {
	text-align:center;
	margin: 15px 0;
}
.top_01txt {
	margin:0 10% 10% 10%;
	z-index: 10;
}
/* 藤イラストを裏に */
.top_01fuji {
	top: 50px;
	right: 10px;
}
.top_01txtbox.left .top_01fuji {
	left: 70px;
	transform: rotate(-5deg);
	z-index: 0;
}
.top_01btn{
	margin:0 auto;
}

/* ２段目 */
.top_01wrap.reverse {
	flex-direction:column-reverse;
}
.top_01wrap.reverse .top_01txtbox {
	padding: 0px 0px 30px 0px;
	align-items: normal;
}
.top_01wrap.reverse .top_01ttl{
	text-align:center;
}
.top_01wrap.reverse .top_01fuji {
	top: 50px;
	left:200px;
	transform: rotate(5deg);
}
.top_01note {
	margin:-44px 0px 30px 39px;

}

/* SP藤イラスト透過 */
.top_01txtbox img {
	opacity: 50% !important;
}
	}
	}





/* ガイダンス部 */
.guidance_box {

}
.guidance{
	display: flex;
	background: #F0EAF9;
	width: 1200px;
	align-items: center;
	justify-content: center; /* 子要素の水平中央寄せ(任意) */
	margin:50px auto 100px; /* 親の中央に配置 */
	padding: 20px 0; /* お好みで余白 */
}
.guidance01{
	width:20%;
	display: flex;
	justify-content: center; /* 左右中央 */
	align-items: center;     /* 上下中央 */
}
.guidance01 img{
	width:70%;
	text-align:center;
	transform: rotate(5deg);
}
.guidance02{
	width:40%;
	text-align:center;
}
.guidance02 h2{
	font-size: 28px;
	font-weight: 700;
	color: #47288E;
	text-align:center;
	margin:14px 0;
}
.g02_txt{
	text-align:center;
	margin:14px 0;
}

.guidance_btn {
  display: inline-block;
  width: 250px;
  text-align: center;
  background: #BD96E5;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 0;
  text-decoration: none;
  border-radius: 6px;
}
.guidance_btn:hover {
  opacity: 0.85;
}
.guidance02 .guidance_btn{
	text-align:center;
}



/* SP用 */
@media (max-width: 768px){

.guidance{
	width: 100%;
}
.guidance01{
	width:40%;
	display: flex;
}
.guidance01 img{
	width:85%;
}
.guidance02{
	width:54%;
	text-align:center;
}
.guidance02 h2{
	white-space: nowrap;
}
.guidance_btn {
  width: 100%;
}


	}