@charset "utf-8";
/* CSS Document */

*{
	box-sizing: border-box;
	font-size: 16px;
}

/*大きさの計算*/
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*iOSフォーム要素の初期化*/
input, button, textarea, select {
	-webkit-appearance: none;
	appearance: none;
}

body {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%; /*スマホ横向き時のフォントサイズ*/
	text-size-adjust: 100%; /*スマホ横向き時のフォントサイズ*/
	-webkit-font-feature-settings: 'palt';/*文字詰め*/
	font-feature-settings: 'palt';/*文字詰め*/
}

body *{
  box-sizing: inherit; /* box-sizingの値は継承されないので明示的に設定 */
}

/*画像の調整*/
img {
    max-width: 100%;
    height: auto;
	vertical-align: bottom;
	width: 100%;
}

a:hover {
    opacity: 0.8;
}

/*****LPコーディングここから*****/
.lp-content{
	max-width: 720px;
	margin: 0 auto;
	background: white;
}

/***背景を設定したいとき***/
/*背景に色を付ける*/
/*
.content01 {
    background: #fff7f8;
}
*/

/*背景を固定したいとき　例
.content01 {
    background-image: url("img/bg-content02.jpg");
	background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: lighten;
	background-size: contain;
}*/


/***メールフォーム こちらにメールフォームのコーディングを記述ください***/



/* PC表示のときだけ幅を狭くする */
@media screen and (min-width: 1024px) {
  .lp-content {
    width: 65%;     /* ← ここがポイント！ */
    max-width: 640px; 
    margin: 0 auto;
  }
}



/* ふわっと控えめに拡大縮小するアニメーション */
@keyframes scaleSoft {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03); /* ←控えめで上品 */
  }
}

/* セクション3・11・17 のCTAボタン画像に適用 */
.section03 .ctabtn img,
.section11 .ctabtn img,
.section17 .ctabtn img {
  animation: scaleSoft 2.5s infinite ease-in-out;
  display: inline-block;
}






/* ===================================
   CTA 共通スタイル（Section03 / 11 / 17）
=================================== */
.section03 .img-wrapper,
.section11 .img-wrapper,
.section17 .img-wrapper {
  position: relative;
  width: 100%;
}

.section03 .img-wrapper img,
.section11 .img-wrapper img,
.section17 .img-wrapper img {
  width: 100%;
  display: block;
}

.section03 .ctabtn,
.section11 .ctabtn,
.section17 .ctabtn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 60px); /* ← 左右30pxの余白 */
  display: block;
}

.section03 .ctabtn img,
.section11 .ctabtn img,
.section17 .ctabtn img {
  width: 100%;
  display: block;
}

/* --- bottom 値だけ個別に設定 --- */
.section03 .ctabtn { bottom: 14%; }
.section11 .ctabtn { bottom: 5%; }
.section17 .ctabtn { bottom: 6%; }

/* ===== CTAスタイルここまで ===== */





/* ===== フッターここから ===== */

.footer-section {
  background: #f7f7f6;
  color: #544c41;
  font-family: "Noto Sans JP", sans-serif;
  padding: 24px 0;
  text-align: center;
}

/* 中央寄せのラッパー（必要なら） */
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* コピーライト */
.footer-copy {
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

/* ===== フッターここまで ===== */