@charset "UTF-8";

/* =============================
   基本設定
============================= */

body{
  margin:0;
  font-family: "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  background:#f9fbfd;
  color:#555;
  font-weight:500;
  letter-spacing:0.02em;
  line-height:1.9;
  padding-top:80px;
}


h1,h2,h3{
  font-weight:700;
}

/* 共通コンテナ */
.section,
.worry-wrapper,
.philosophy-wrapper,
.container{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

.section{
  padding:70px 20px;
}

.center{
  text-align:center;
}

.sp {
	display:none;
}

@media (max-width:768px){
	.pc {
		display:none;
	}
	.sp {
		display: block;
	}
}

/* =============================
   ヘッダー
============================= */

.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  z-index:1000;
}

.header-inner{
  max-width:1100px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:5px;
}

.brand img{
  height:40px;
}

.brand-text{
  font-size:14px;
  color:#555;
  line-height:1.5;
}

.brand-text strong{
  display:block;
  font-size:18px;
}

.header-btn{
  background:#ff9999;
  color:#fff;
  padding:8px 18px;
  border-radius:20px;
  text-decoration:none;
  font-size:14px;
}

/* =============================
   ヒーロー
============================= */
.hero{
  position:relative;
  background:url("../images/hero.jpg") center/cover no-repeat;
  padding:160px 20px 140px;
  text-align:center;
  overflow:hidden; /* はみ出し防止 */
}

.hero::before{
  display:none;   /* オーバーレイ完全削除 */
}

.hero-pocket{
  position:absolute;
  top:56%;
  left:50%;
  transform:translate(160px, -50%); /* ← ここ変更 */
  width:170px;
  z-index:3;
}

@media (max-width:768px){
  .hero-pocket{
    width:80px;
    transform:translate(80px, -50%);
  }
}


.hero h1{
  color:#fff;
  font-size:48px;
  line-height:1.6;
  text-shadow:0 4px 20px rgba(0,0,0,0.55);
  margin-top:-20px;
}

.hero-sub{
  color:#fff;
  font-size:28px;
	font-weight:bold;
  text-shadow:0 3px 12px rgba(0,0,0,0.5);
}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto;
}


/* ボタン */
.btn{
  font-family: "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  display:inline-block;
  padding:10px 34px;
  background:#ff9999;
  color:#fff;
  text-decoration:none;
  border-radius:30px;
  margin-top:30px;
  font-weight:bold;
  letter-spacing:0.05em;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.btn:hover{
  background:#ffb1b1;
}

/* =============================
   タイトル装飾
============================= */

.section-title,
.worry-title,
.philosophy-title{
  position:relative;
  text-align:center;
  display:block;
  margin-bottom:40px;   /* ← 余白はここで作る */
  padding-bottom:0;     /* ← 消す */
	color:#555;
	font-size:28px;
}

.section-title::after,
.worry-title::after,
.philosophy-title::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-15px;         /* ← ここを直接指定 */
  width:60px;
  height:3px;
  background:#51bcbc;
  border-radius:3px;
  opacity:0.6;
}

@media (max-width:768px){
	.section-title,
	.worry-title,
	.philosophy-title{
		font-size:22px;
	}
}
/* =============================
   お悩み
============================= */

.worry-section{
  background:#f4fbff;
}

.worry-list{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:40px;
	font-size:18px;
}

.worry-item{
  display:flex;
  align-items:center;
  background:#fff;
  padding:18px 25px;
  border-radius:50px;
  box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.worry-icon {
  display: flex;             /* アイコン内もflexに */
  align-items: center;       /* 垂直中央揃え */
  margin-right: 15px;
  flex-shrink: 0;            /* アイコンが縮まらない */
}

.worry-icon img {
  display: block;            /* inline-block の余白を消す */
  width: 36px;               /* アイコンサイズ */
  height: 36px;
  object-fit: contain;       /* 縦横比を保持 */
}

.worry-message{
  text-align:center;
  margin-top:40px;
	line-height:2em;
}

@media (max-width:768px){
  .worry-item {
    flex-direction: row; /* 縦並びにしたい場合は column */
  }
}
/* =============================
   できること
============================= */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:25px;
  margin-top:50px;
}

.feature{
  background:#ffffff;
  border-radius:18px;
  padding:30px;
  box-shadow:0 6px 20px rgba(0,0,0,0.05);
}

.feature h3{
  color:#51bcbc;
  font-weight:600;
}

.feature img{
  width:100%;
  border-radius:5px;
}

/* =============================
   思い
============================= */

.philosophy-section{
  background:linear-gradient(180deg,#ffffff,#f6fbff);
}

.philosophy-box{
  background:#ffffff;
  padding:60px 50px;
  border-radius:25px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  text-align:center;
}

.philosophy-box .lead{
  font-size:20px;
}

.philosophy-box .lead span{
  color:#ff9999;
  font-weight:bold;
}

.philosophy-box .closing{
  margin-top:40px;
  font-size:19px;
}

/* =============================
   機能紹介
============================= */

.feature-section{
  background:linear-gradient(180deg,#ffffff 0%, #f7fbfd 100%);
  position:relative;
}

.feature-section::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background:linear-gradient(to right, transparent, #d8eef2, transparent);
}

.feature-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:80px;
  margin-top:90px;
}


.feature-image{
  flex:0 0 30%;
  position:relative;
}

/* PC版のみ */
@media (min-width: 1024px){
  .feature-section .section-title,
  .feature-section > .container > p:first-of-type{
    text-align:center;
  }
  .feature-image{
    margin-left: 40px; /* 好きな数値に調整 */
  }
}

.feature-image img{
  width:100%;
}

.feature-text{
  flex:0 0 60%;
}

.feature-text h3{
  position:relative;
  padding-left:15px;
  font-weight:600;
}

.feature-text h3::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:5px;
  height:20px;
  background:#51bcbc;
  border-radius:3px;
  opacity:0.6;
}

@media (max-width:768px){
  .feature-section .container{
    width:90%;
  }
}

.point{
  background:#51bcbc;
  color:#fff;
  padding:3px 10px;
  border-radius:13px;
  margin-right:8px;
	font-size:12px;
}

/* =============================
   CTA
============================= */

.cta{
  background:#e6f7ff;
  text-align:center;
  padding:100px 20px;
}

.contact-form{
  max-width:600px;
  margin:50px auto 0;
  text-align:left;
}

.form-group{
  margin-bottom:20px;
}

.form-group label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
}

.required{
  background:#ff9999;
  color:#fff;
  padding:3px 10px;
  border-radius:10px;
  margin-left:8px;
	font-size:12px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #ddd;
  box-sizing:border-box;
}

.submit-btn{
  width:100%;
  border:none;
  cursor:pointer;
	font-size:18px;
}


/* =============================
   フッター
============================= */

footer{
  background:#51bcbc;
  color:#fff;
  text-align:center;
  padding:40px 20px;
  font-size:14px;
}

/* =============================
   スマホ
============================= */
@media (max-width:768px){

  .hero{
    padding:120px 20px 100px;
  }

  .hero h1{
    font-size:32px;
  }

.hero-sub{
  font-size:20px;
}

  .feature-item{
    display:block;   /* flexをやめる */
    margin-top:60px;
  }

  .feature-image,
  .feature-text{
    width:100%;
  }

  .feature-image{
    margin-bottom:25px;
  }

  .feature-image::before{
    display:none;
  }

  .feature-image img{
    width:100%;
    height:auto;
    display:block;
  }

  .section{
    padding:80px 20px;
  }
}

.rainbow-top{
  position:fixed;
  right:20px;
  bottom:30px;
  width:140px;
  z-index:1000;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:0.3s;
}

.rainbow-top.show{
  opacity:0.9;
  pointer-events:auto;
}

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

/* 文字を中央に重ねる */
.rainbow-top .top-text{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:16px;
  font-weight:bold;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
  pointer-events:none;
}

/* ふわっと */
@keyframes float{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
  100%{ transform:translateY(0); }
}

.rainbow-top{
  animation:float 6s ease-in-out infinite;
}

/* ホバー */
.rainbow-top:hover{
  opacity:1;
  transform:translateY(-10px);
}

@media (max-width:768px){
  .rainbow-top{
    width:90px;
    right:15px;
    bottom:30px;
  }
}


/* フォーカス中に枠線も強調 */
input:required:invalid:focus,
textarea:required:invalid:focus {
  border: 2px solid #ff9999; /* フォーカス中の濃いピンク */
  outline: none;
}
.contact-form textarea:focus {
  border: 2px solid #ff9999; /* フォーカス中の濃いピンク */
  outline: none;
}