@charset "utf-8";

/* ============================================================
   豊臣LPテンプレート（スマホ特化型） style.css
   スマホ用画像（img_sp連番・幅750px推奨）だけを縦に並べる型。
   PCでは中央寄せの1カラム（最大750px）で表示される。
   構成：
   1. 基本設定（フォント・画像・フッターなど）
   2. テキスト装飾
   3. フォームの仕組み（構造CSS・触らない）
   4. 追従ボタンの仕組み（構造CSS・触らない）
   5. 特商法ページ
   6. ★ フォームの調整ゾーン（編集するのはここだけ）★ ←一番下
   ============================================================ */

body {
  /***	フォント関連設定	***/
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 125%;
  /* 20px */
  line-height: 1.7;
  /***	背景＆文字色設定	***/
  background: #f5f5f5;
  color: #222;
  font-feature-settings: "palt";
  text-align: justify;
}

/* LP全体：スマホ幅の1カラムを中央寄せ */
#wrapper {
  margin: 0 auto;
  max-width: 750px;
}

/***	見出し	***/

h2 {
  margin: 0 auto;
  text-align: center;
  padding: 0em 0;
}

h3 {
  padding: 1.5em 0;
}

a {
  cursor: pointer;
}

img {
  display: block;
  /*	ブロック要素としてふるまう：中揃えで表示	*/
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

strong {
  font-weight: bold;
}

/* --------------------------------------------------
背景設定
----------------------------------------------------- */

/* 背景画像を使う場合は images/bg.webp を用意してから .bg を使う */
.bg {
  background-image: url("../images/bg.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.bg_white {
  background: #FFFFFF;
}

/*---	背景ここまで---*/

/* フッター設定 */
footer {
  margin: 0 auto;
  padding: 1em 0;
  background: #fff;
  color: #222;
  text-align: center;
  font-size: 75%;
}

footer a {
  color: #222;
  text-decoration: underline;
}

footer a:hover {
  color: #595959;
}

address {
  font-style: normal;
}

/* --------------------------------------------------
テキスト装飾
----------------------------------------------------- */
.bold {
  font-weight: bold;
}

.large {
  font-size: 120%;
}

.xlarge {
  font-size: 144%;
}

.xxlarge {
  font-size: 172.8%;
}

.small {
  font-size: 82.5%;
}

.xsmall {
  font-size: 62.5%;
}

.xxsmall {
  font-size: 56.25%;
}

.u {
  text-decoration: underline;
}

.red {
  color: red;
}

.pink {
  color: #e72444;
}

.white {
  color: #FFFFFF;
}

.underline {
  background: linear-gradient(transparent 70%, yellow 70%);
}

.highlight_blue {
  background-color: #000436;
  padding: 0.1em;
}

.highlight_white {
  background-color: #fff;
  padding: 0.1em;
}

.highlight {
  background-color: #fff266;
}

.redhigh {
  color: red;
  background-color: #fff266;
}

/***　中央揃え　***/
.center {
  text-align: center;
}

/***	テキスト装飾設定ここまで	***/

/* --------------------------------------------------
案件ごとのコンテンツ内容
----------------------------------------------------- */

/* CTAボタン：画像内にあらかじめ確保された枠へ button.png を重ねて表示 */
.cta-overlay {
  position: relative;
}

.cta-overlay .cta-anchor {
  position: absolute;
  display: block;
}

.cta-overlay .cta-anchor img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* CTAボタン：画像内に枠がない場合、画像の直後にそのまま表示 */
.cta-plain {
  max-width: 652px;
  margin: 0 auto;
  padding: 1.5em 0;
}

.cta-plain img.btn {
  width: 100%;
}

/*
 *		class-name　案件ごとのコンテンツ内容　ここまで
 */

/* ============================================================
   フォームの仕組み（構造CSS）
   ※ここは触らない。色や余白の調整は一番下の「★ゾーン」で行う。
   ============================================================ */

/* フォームの外枠（A型・B型・C型 共通） */
.form {
  display: block;
  margin: 0 auto;
  max-width: 750px;
  padding: var(--form-padding);
  background-color: var(--form-bg);
  text-align: center;
  /* タイトル・ボタンを中央揃え（必須） */
}

/* フォームタイトル画像 */
.form_title {
  margin: 0 auto;
  padding: var(--title-padding);
  max-width: var(--title-width);
}

/* A型：リンクボタン（LINE登録など外部URLへ飛ばす） */
.form .btn-link {
  display: block;
  margin: 0 auto;
  max-width: var(--btn-width);
}

.form .btn-link img {
  width: 100%;
}

/* B型：送信フォーム（メールアドレス入力＋送信ボタン） */
.submit .btn {
  margin: 0 auto;
  max-width: var(--btn-width);
}

/* B型：入力欄 */
.deco {
  display: block;
  margin: 30px auto 20px;
  padding: 10px 6px 4px;
  width: 96%;
  max-width: 96%;
  height: 88px;
  border: 4px solid #cbcbcb;
  background: #fff;
  color: #333;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}

.deco::placeholder {
  color: #AAA;
}

/* C型：外部フォーム埋め込み（マイスピー等の発行コードを入れる枠） */
.form_embed {
  margin: 0 auto;
  max-width: 700px;
  padding: 0 1em;
  text-align: left;
}

/* ボタンのアニメーション（A型・B型共通） */
.btn {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  animation-name: btn-animation;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

.btn:hover {
  animation-duration: 0.8s;
  opacity: 0.8;
}

@keyframes btn-animation {
  0% {
    transform: translateY(0.5em);
  }

  50% {
    transform: translateY(-0.5em);
  }

  100% {
    transform: translateY(0.5em);
  }
}

/* プライバシーポリシー同意文など */
.optin {
  font-size: 0.9em;
  padding: 1.3em;
  text-align: center;
  color: #fff;
}

/***	フォームの仕組みここまで	***/

/* ============================================================
   追従ボタンの仕組み（構造CSS）※触らない
   ============================================================ */
.flbtn {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  right: 0;
  /* PC：右下に固定 */
  width: 300px;
  background-color: var(--flbtn-bg);
  padding: 0.8%;
  border-radius: 20px 0 0 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.flbtn.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.flbtn figure {
  margin-bottom: 0.5em;
}

.flbtn figure:last-of-type {
  margin-bottom: 0;
}

/* ============================================================
   スマホ表示（750px以下）
   ============================================================ */
@media screen and (max-width: 750px) {

  body {
    font-size: 100%;
  }

  /* 追従ボタン：スマホは左右いっぱい */
  .flbtn {
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    padding: 1em;
  }

  .flbtn figure {
    width: 100%;
  }

  .flbtn_title {
    padding: 0em 0 1em;
  }

  /* 追従ボタンの高さぶんフッターを底上げ */
  footer {
    padding-bottom: 15em;
  }

}

/*
 *		特商法
 */
.page_laws #wrapper {
  margin: 0 auto 2em;
  padding: 3em;
  width: 800px;
  background: #fff;
  max-width: 100%;
  font-size: 75%;
}

.page_laws #wrapper h2 {
  margin: 0 auto;
  font-size: 2em;
  text-align: center;
}

.page_laws #wrapper h3 {
  margin-top: 2em;
  font-size: 1.25em;
}

.page_laws #wrapper h4 {
  margin-top: 2em;
}

.page_laws table {
  margin: 1.5em auto;
  border-collapse: separate;
  border-spacing: 1px;
  background: #ccc;
}

.page_laws th {
  padding: 0.5em;
  width: 28%;
  border-top: 1px solid #fff;
  background-color: #EBEBEB;
}

.page_laws td {
  padding: 0.5em;
  font-size: 0.8em;
  background-color: #FFFFFF;
}

/* ============================================================
   ★ フォームの調整：ここだけ編集してください ★
   上はぜんぶ「仕組み」なので触らない。
   数字や色（変数の値）を変えるだけでフォームの見た目が変わります。
   ============================================================ */

/* --- フォームの設定（PC・スマホ共通） --- */
.form {
  --form-bg: #2da8b5;          /* フォームの背景色 */
  --form-padding: 2em 0;       /* フォームの上下余白 */
  --title-width: 90%;          /* タイトル画像の幅 */
  --title-padding: 0 1em 1em;  /* タイトル画像の余白（上 左右 下） */
  --btn-width: 92%;            /* ボタンの幅 */
}

/* --- 追従ボタンの背景色 --- */
.flbtn {
  --flbtn-bg: #2778C8;
}

/* --- スマホ（750px以下）だけ変えたい場合（例） ---
@media screen and (max-width: 750px) {
  .form {
    --form-padding: 1.5em 0;
  }
}
------------------------------------------------------ */

/* --- 2つ目以降のフォームだけ変えたい場合（例） ---
.form.form02 {
  --form-bg: #e7647c;
  --btn-width: 80%;
}
------------------------------------------------------ */