@charset "UTF-8";
/**
 * style.css 1.1.1
 * Released on: 01,2025
 */
/*--------------------------
 * Header
 *--------------------------*/
.headerTicker {
  position: relative;   /* fixed → relative に変更 */
  top: auto;            /* topは不要 */
  left: auto;           /* leftも不要 */
  transform: none;      /* transformもリセット */
  width: 100%;          /* 必要に応じて */
  max-width: 580px;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 1.332rem;
  line-height: 2;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 0.7rem 2rem 0.1rem;
  text-align: center;
  z-index: auto;        /* 固定する必要がない場合はauto */
  box-shadow: none;     /* 固定用の影も不要なら削除 */
  backdrop-filter: none; /* ぼかしも不要なら削除 */
}
/* ロゴ画像 */
.headerTicker .header_logo img {
  height: 60px;
  width: auto;
  display: inline-block;
}

/* テキストを含む場合 */
.headerTicker p {
  display: inline-block;
}

/* 固定ヘッダー分の余白を確保 */
body {
  padding-top: 0px;
}

@media screen and (max-width: 640px) {
    .headerTicker {
  width: 100%;
  max-width: 640px;                 /* 最大幅580px */
  background-color: rgba(255, 255, 255, 0.8); /* 白・80%透過 */
}
}
/* スマホ対応（〜580px） */
@media screen and (max-width: 580px) {
  .headerTicker {
    font-size: 1rem;
    line-height: 3;
    -webkit-text-size-adjust: 100%;
    padding: 0.7rem 1rem 0.2rem;
    max-width: 100%;
  }
  .headerTicker .header_logo img {
    height: 55px;
  }
}

/* PC表示時のみヘッダーTickerを出す（下固定版は非表示） */
.headerTicker.is-bottom {
  display: none;
}

/* スマホ・タブレット時は下固定バージョンを非表示 */
@media screen and (max-width: 1024px) {
  .headerTicker.is-bottom {
    display: none;
  }
}

/* Header コンテナ設定 */
.header {
  position: sticky;
  z-index: 100;
  padding: 0;
}

/* PCでは .header 非表示（上固定ヘッダーに任せる） */
@media screen and (min-width: 1025px) {
  .header {
    display: none;
    height: 0;
  }
}

/* スマホ時の余白調整 */
@media screen and (max-width: 580px) {
  .header {
    padding: 0;
  }
}

/*==============================
  Header
==============================*/

.head_bx{
    width: 100%;
    position: relative;    
}

.head_bx .head_txt{
    position: absolute;
    bottom: 5%; /* 下からの距離 */
    left: 50%;     /* 左端を中央に */
    transform: translateX(-50%); /* 自身の幅の半分だけ左にずらして中央揃え */
    width: 90%;
    text-align: justify;
    font-size: 14px;
    line-height: 20px;
}
.header_logo img{
    width: 12rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.head_img{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.head_img img{
    width: 100%;
}
/*==============================
  Layout
==============================*/

#wrap.is-top .header {
  top: 0.5rem;
  left: 0;
}
#wrap.is-top .header .parco {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  left: 2.2rem;
  top: 1.5rem;
  z-index: 100;
}
@media screen and (max-width: 580px) {
  #wrap.is-top .header .parco {
    top: 2rem;
  }
}
#wrap.is-top .header .parco img {
  width: 12rem;
}
@media screen and (max-width: 580px) {
  #wrap.is-top .header .parco img {
    width: 8rem;
  }
}
#wrap.is-top .header .igBtn {
  position: absolute;
  right: 2.2rem;
  top: 1.5rem;
}
@media screen and (max-width: 580px) {
  #wrap.is-top .header .igBtn {
    top: 1.75rem;
  }
}

#wrap:not(.is-top) .header__nav {
	position: fixed;
	opacity: 0;
	width: 100%;
	height: 100vh;
	padding: 3rem 0 5rem;
	background: #DAE7DE;
	bottom: 0;
	right: 0;
	z-index: -1;
	pointer-events: none;
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
	will-change: opacity, clip-path;
	-webkit-transition: opacity ease 400ms 100ms, -webkit-clip-path ease-in-out 400ms;
	transition: opacity ease 400ms 100ms, -webkit-clip-path ease-in-out 400ms;
	transition: opacity ease 400ms 100ms, clip-path ease-in-out 400ms;
	transition: opacity ease 400ms 100ms, clip-path ease-in-out 400ms, -webkit-clip-path ease-in-out 400ms;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: 20px;
}


header, main, footer {
  width: 100%;
}

/*==============================
  drips_bg
==============================*/
.drips_bg{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/common/bg.png);
    background-repeat: repeat-y;
}
.drips_bx{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
}
.intro-photo{
    width: 100%;
    padding-top: 60px;
    margin-left: auto;
    margin-right: auto;
}
.drips_img img{
    width: 100%;
}

.fv_text_circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform-origin: 50% 50%; /* 回転の中心を画像の真ん中に */
}
/*==============================
  lift clear 背景など
==============================*/
.point_bg {
    background-image: url(../images/top/point_bg.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.lift_bx {
  max-width: 580px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.clear_bx {
  max-width: 580px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/*==============================
  タイトル部分（背景と円）
==============================*/
.lift_text_title {
  position: relative;
  width: 100%;
  height: 200px;
  background-image: url(../images/top/lift_title.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 420px 62px;
}
.clear_text_title {
  position: relative;
  width: 100%;
  height: 200px;
  background-image: url(../images/top/clear_title.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 420px 92px;
}

.lift_text_circle {
  position: absolute;
  width: 160px;
  height: 160px;
  right: 380px;
  top: 50%;
  transform: translateY(-50%);
}

.lift_circle_txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.clear_text_circle {
  position: absolute;
  width: 160px;
  height: 160px;
  right: 380px;
  top: 50%;
  transform: translateY(-50%);
}

.clear_circle_txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.lift_circle_txt img,
.clear_circle_txt img {
  width: 100%;
}

/*==============================
  lift_photo（右端固定・比率維持）
==============================*/
.floating-container {
  position: relative;
  width: 100%;
  max-width: 580px;
  overflow: hidden;
  aspect-ratio: 420 / 800; /* modernブラウザ */
}

@supports not (aspect-ratio: 1 / 1) {
  .floating-container {
    height: 0;
    padding-top: calc(800 / 420 * 100%); /* fallback */
  }
}

.floating-container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lift_photo,
.clear_photo{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  z-index: 20;
}

.lift_photo img,
.clear_photo img{
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}

/*==============================
  泡（foam）
==============================*/
.floating-container .foam_img {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.floating-container .foam_img img {
  display: block;
  width: 35%;       /* PC 基準 */
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.12));
}

/* 泡の初期位置（%指定でレスポンシブ対応） */
.foam_a { left: 20%; top: 51%; }
.foam_b { left: 30%; top: 68%; }
.foam_c { left: 20%; top: 85%; }
.foam_d { left: 20%; top: 51%; }
.foam_e { left: 30%; top: 68%; }
.foam_f { left: 20%; top: 85%; }


/*==============================
  レスポンシブ微調整
==============================*/
/* スマホ（640px以下） */
@media screen and (max-width: 640px) {
  .lift_text_title{ background-size: 345px 52px; }
  .clear_text_title{ background-size: 345px 76px; }
  .lift_text_circle,.clear_text_circle { width: 140px; height: 140px; right: 300px; }
  .floating-container .foam_img img { width: 35%;  }
}

@media screen and (max-width: 550px) {
  .lift_text_title { background-size: 300px 44.35px; }
  .clear_text_title { background-size: 300px 66px; }
  .lift_text_circle,.clear_text_circle { width: 130px; height: 130px; right: 260px; }
  .foam_a { left: 22%; top: 46%; }
  .foam_b { left: 34%; top: 64%; }
  .foam_c { left: 23%; top: 83%; }
  .foam_d { left: 22%; top: 46%; }
  .foam_e { left: 34%; top: 64%; }
  .foam_f { left: 23%; top: 83%; } 
}

/* スマホ小（480px以下） */
@media screen and (max-width: 480px) {
  .floating-container .foam_img img { width: 35%;  }
  .foam_a { left: 22%; top: 48%; }
  .foam_b { left: 37%; top: 64%; }
  .foam_c { left: 24%; top: 84%; }
  .foam_d { left: 22%; top: 48%; }
  .foam_e { left: 37%; top: 64%; }
  .foam_f { left: 24%; top: 84%; } 
}

/* スマホ最小（390px以下） */
@media screen and (max-width: 390px) {
  .lift_text_title { background-size: 270px 41px; }
  .clear_text_title { background-size: 270px 59.5px; }
  .lift_text_circle,.clear_text_circle { width: 100px; height: 100px; right: 240px; } 
    .floating-container .foam_img img { width: 30%;  }

  .foam_a { left: 20%; top: 50%; }
  .foam_b { left: 35%; top: 67%; }
  .foam_c { left: 20%; top: 84%; }
  .foam_d { left: 20%; top: 50%; }
  .foam_e { left: 35%; top: 67%; }
  .foam_f { left: 20%; top: 84%; } 
}
/* スマホ最小（390px以下） */
@media screen and (max-width: 340px) {
  .lift_text_title { background-size: 230px 34px; }
  .clear_text_title { background-size: 230px 50px; }
  .lift_text_circle,.clear_text_circle { width: 100px; height: 100px; right: 200px; } 

}
/*==============================
  lift_point
==============================*/
.lift_point{
  width: 100%;
    padding-top: 30px;
    
}
.lift_point img{
  width: 100%;
    
}
.lift_buy{
    padding-top: 30px;
    padding-bottom: 100px;
}
/*==============================
  clear
==============================*/
#drips_clear {
    padding-top: 80px;
}

/*==============================
  clear_point
==============================*/
.clear_point{
  width: 100%;
padding-top: 60px;

}
.clear_point img{
  width: 100%;
    
}
.clear_buy{
    padding-top: 30px;
    padding-bottom: 100px;
}

/*==============================
  howto
==============================*/
#howto{
    margin-top: -35px;
}
.howto_img{
  width: 100%;
}
.howto_img img{
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.howto_bg {
    margin: 0px;
    padding: 0px;
  background: linear-gradient(to bottom, #f8e4e7 0%, #ffffff 100%);
}
.expert_bg{
    margin-top: -50px;
}
/*==============================
  voice
==============================*/
#voice{
    margin-top: -50px;
    background-color: #ecf8f9;
}
.voice_img{
  width: 100%;
}
.voice_img img{
  width: 100%;
    
}
.voice_bg {
    background: linear-gradient(to bottom, #ecf8f9 0%, #ffffff 100%);
    margin: 0px;
    padding: 0px 0px 100px;
}
/*==============================
 faq base
==============================*/
#faq { margin-top: -65px; }

.faq_bg {
  background: #f8eced;
  padding-bottom: 80px;
}

.faq-accordion {
  max-width: 820px;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  width: 90%;
}


/*==============================
 item
==============================*/
.faq-item {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 25px;
}

.faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: #FF80A0;
  border: none;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  font-size: 1rem;
  color: #fff;
  border-radius: 10px;
  transition: background .18s ease, color .18s ease;
}

.faq-btn:focus {
  outline: 3px solid rgba(0,137,105,0.14);
  outline-offset: 2px;
}
/*==============================
 Qアイコン＋テキスト部（はみ出し版）
==============================*/
.faq-q {
    position: relative;
    flex: 1;
    padding-left: 40px;
    margin: 0;
    line-height: 1.6;
    font-size: clamp(16px, 2.5vw, 20px); /* ← これで自動的に可変！ */
    text-align: left;
    font-weight: 800;
}

/* Q画像を左上に浮かせてはみ出させる */
.faq-q span {
  position: absolute;
  top: -30px;                  /* ← 上方向に浮かせる距離 */
  left: -30px;                 /* ← 左方向にはみ出す距離 */
  display: inline-block;
}

/* Q画像自体のサイズ指定 */
.faq-q span img {
  width: 50px;                 /* ← 大きさを固定（80%などより安定） */
  height: auto;
  display: block;
}
.faq-q sup {
  font-size: 0.6em;       /* 少し小さく */
  vertical-align: super;  /* 上付き */
  line-height: 0;         /* 行間のズレを抑える */
  margin-left: 2px;       /* 少し間を空ける */
}

/*==============================
 プラス/マイナスアイコン
==============================*/
.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  flex: 0 0 28px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
  position: relative;
  font-family: inherit;
  font-size: 28px;
}

.faq-icon::before { content: "+"; display: block; line-height: 1; }
.faq-btn[aria-expanded="true"] .faq-icon::before { content: "−"; }

/*==============================
 開閉アニメーション
==============================*/
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.2,.8,.2,1), padding .18s ease;
  padding: 0 16px;
}

.faq-panel > * {
  margin: 12px 0;
  color: #444;
  line-height: 1.7;
}

.faq-panel.open {
  padding: 10px 0px;
}

.faq-panel p {
  text-align: justify;
  font-size: 16px;
  line-height: 30px;
  width: 100%;
  padding-bottom: 10px;
}


/*==============================
 hover時（閉じている時のみ有効）
==============================*/
.faq-btn:not([aria-expanded="true"]):hover {
  background-color: #fff;   /* 背景白 */
  color: #FF80A0;           /* 文字ピンク */
}

/* Qテキストもhover時ピンクに */
.faq-btn:not([aria-expanded="true"]):hover .faq-q {
  color: #FF80A0;
}

/* アイコンもhover時はグレー */
.faq-btn:not([aria-expanded="true"]):hover .faq-icon {
  color: #333333;
}

/*==============================
 開いている状態（常に白背景固定）
==============================*/
.faq-btn[aria-expanded="true"] {
  background-color: #fff;   /* 開いている間は常に白 */
  color: #FF80A0;           /* 文字ピンク */
}

/* Qテキストをピンクに固定 */
.faq-btn[aria-expanded="true"] .faq-q {
  color: #FF80A0;
}

/* アイコンを濃いグレーに固定 */
.faq-btn[aria-expanded="true"] .faq-icon {
  color: #333333;
}
/*==============================
 スマホ調整
==============================*/
@media (max-width: 640px) {
  .faq-btn {
    padding: 14px;
    font-size: .98rem;
  }

  .faq-q span img {
    width: 32px; /* スマホは少し小さめ */
  }

  .faq-icon {
    width: 26px;
    height: 26px;
    font-size: 16px;
  }
}
/*==============================
  worries Section
==============================*/
.link_bx {
    background-color: #fff;
    width: 100%;
    margin: 0px;
    padding: 0px 0px 45px;
}
.link_title{
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.link_title img{
    width: 100%;
    margin-top: -25px;
}

.link_btn{
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.link_btn img{
    width: 100%;
}

/*==============================
  Footer
==============================*/
.footer {
  background-color: #8FA395;
  padding: 1.25rem 0 1.5rem;
  text-align: center;
}
.footer .txt {
  color: #fff;
  font-size: 12px;
}

/*==============================
  Fade Animation
==============================*/
.fade01 {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.3s;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*====================================
  追従ボタン（2カラム固定／最大580px）
====================================*/
#followBtns {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);   /* 中央寄せ */
    width: 100%;
    max-width: 420px;              /* 横幅の最大値 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2カラムで均等配置 */
    z-index: 9999;
    opacity: 0;                    /* 初期は非表示 */
    pointer-events: none;
    transition: opacity 0.3s ease;
    border-radius: 12px 12px 0 0;  /* 上部を少し丸く */
    overflow: hidden;              /* はみ出し防止 */
    margin-left: auto;
    margin-right: auto;
}

/* スクロール200px超で表示（JSが制御） */
#followBtns.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 各ボタン共通設定 */
#followBtns a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
    padding-top: 25px;
    padding-bottom: 25px;
}

/* 画像の伸縮調整 */
#followBtns a img {
  width: 90%;
  height: auto;
  display: block;
}


/* スマホ調整（狭い時は少し内側に） */
@media (max-width: 640px) {
  #followBtns {
    width: 80%;
    max-width: 94%;
    border-radius: 10px 10px 0 0;
  }
}

/* ==========================
   トップへ戻るボタン（右下）
========================== */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: block;
  opacity: 0;
  pointer-events: none; /* 初期は非表示 */
  transition: opacity 0.3s ease;
}

.back-to-top.visible {
  opacity: 0.8;
  pointer-events: auto; /* JSで表示 */
}
.back-to-top img {
  width: 80px;        /* PC用サイズ */
  height: auto;
  opacity: 0.8;       /* 透明80% */
  transition: opacity 0.3s ease;
}

.back-to-top:hover img {
  opacity: 1;         /* hoverで強調 */
}

/* ----------------------------
   スマホ・狭い画面（880px以下）
---------------------------- */
@media (max-width: 880px) {
  .back-to-top {
    /* 画面幅に応じて下からの距離を変える */
    right: 10px;            /* 少し内側に */
  bottom: 20px;
  }
  .back-to-top img {
    width: 40px;               /* スマホ用サイズ */
  }
}
/* ----------------------------
   スマホ・狭い画面（480px）
---------------------------- */
@media (max-width: 480px) {
  .back-to-top {
    /* 画面幅に応じて下からの距離を変える */
    right: 5px;           /* 少し内側に */
  bottom: 25px;
  }
  .back-to-top img {
    width: 30px;               /* スマホ用サイズ */
  }
}
/* ----------------------------
   スマホ・狭い画面（380px）
---------------------------- */
@media (max-width: 380px) {
  .back-to-top img {
    width: 30px;               /* スマホ用サイズ */
  }
}
/*==============================
  Responsive
==============================*/
@media screen and (max-width: 1024px) {

}
@media screen and (max-width: 640px) {

}

@media screen and (max-width: 420px) {
.head_bx .head_txt{
    font-size: 12px;
    line-height: 16px;
}
}