/* reset.css はそのまま利用することを想定 */
@charset"UTF-8"; /* @charsetの最後にセミコロンを追加 */

/* bodyの基本的な設定 */
body {
    margin: 0;
    font-family: sans-serif;
    background-color: white;
    line-height: 1; /* bodyのline-heightをリセット */
}

/* ★重要: 画像の基本的なリセットを強化 */
img {
    border: 0;
    vertical-align: bottom; /* これも有効ですが、display: block; がより確実です */
    display: block; /* 画像をブロック要素にすることで、インライン要素特有の余白をなくす */
    max-width: 100%; /* 親要素の幅に合わせて最大100%まで縮小 */
    height: auto;    /* 縦横比を維持 */
}

/* wrapperは今回の場合、不要かもしれませんが、将来的な拡張性を考えて残しておきます */
.wrapper {
    /* 必要であれば背景色やその他のスタイルを追加 */
}

/* contanerの最大幅と中央寄せ、padding設定 */
.contaner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    line-height: 0; /* contaner内のテキストの行高も0にする */
    font-size: 0; /* ★重要: contaner内のインライン要素が生成する余白をなくすため */
}

/* 画像をレスポンシブにするための設定 (contaner内のimgは既にグローバル設定で対応済みだが、念のため) */
.contaner img {
    /* グローバルのimg設定で十分なはずですが、もしここで個別に調整が必要なら */
    /* display: block;  */
    /* margin: 0;       */
    /* padding: 0;      */
}

/* HTMLのh1, h2, divなどのブロックレベル要素のデフォルトマージンとパディングをリセット */
/* さらに、line-heightとfont-sizeも0に設定し、子要素が画像のみの場合は余白を確実に排除 */
/* 修正後 */
.contaner h1 { /* h1のみにpadding-topを残すか、または完全に削除 */
    padding-top: 30px !important;
    background-color: white!important;
}
.contaner h2 { /* h2からはpadding-topを削除 */
    /* padding-top: 30px !important; */ /* この行を削除またはコメントアウト */
    background-color: white!important;
}
.contaner div,
.contaner p { /* P要素も追加 */
    margin: 0 !important; /* !important を使用して強制的に上書き */
    padding: 0 !important; /* !important を使用して強制的に上書き */
    line-height: 0 !important; /* !important を使用して強制的に上書き */
    font-size: 0 !important; /* ★重要: 子要素のインラインコンテンツが生成する余白をなくす */
}

/* .btn-inner1 と .btn-inner2 内の p 要素は、a タグと img タグを含んでいるので、
   ここも余白が発生しないように設定 */
.btn-inner1,
.btn-inner2 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* ボタンの背景色 */
.btn-bg {
    background-color: white;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important; /* ここも追加 */
}

/* aタグ内のimgもインライン要素なので、親要素のline-heightが0でも
   わずかな余白が残る可能性があるので、aタグにも同様の指定をするか、
   aタグをdisplay: block; にする */
.contaner a {
    display: block; /* aタグをブロック要素にする */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* ボタン画像のサイズ調整 */
.btn-inner1 img,
.btn-inner2 img {
    width: 80%; /* 幅を80%に設定 */
    margin: 0 auto; /* 親要素内で画像を中央寄せにする */
/* --- ここから追加 --- */
    transition: transform 0.3s ease-out, filter 0.3s ease-out; /* アニメーションを追加 */
    /* --- ここまで追加 --- */
}
/* ホバー時のアニメーション効果 */
.btn-inner1 img:hover,
.btn-inner2 img:hover {
    transform: scale(0.98); /* 98%に縮小 */
    filter: brightness(0.8); /* 明るさを80%にする（暗くする） */
    cursor: pointer; /* ホバー時にカーソルをポインターにする（クリック可能であることを示すため） */
}

/* aタグにdisplay:block;を適用しているので、画像ではなくaタグにホバーを適用することもできます */
/* その場合、以下のように記述します */
/*
.btn-inner1 a,
.btn-inner2 a {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    transition: transform 0.3s ease-out, filter 0.3s ease-out;
}

.btn-inner1 a:hover img,
.btn-inner2 a:hover img {
    transform: scale(0.98);
    filter: brightness(0.8);
}
*/
/* google-form-wrapper のスタイル（.contaner と同様の中央寄せと幅制限） */
.google-form-wrapper {
    max-width: 450px; /* .contaner と同じ最大幅 */
    margin: 0 auto;   /* 中央寄せ */
    padding: 0;
    box-sizing: border-box;
    background-color: #ffffff; /* フォームの背景色（.contaner の背景色と合わせる） */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* .contaner と同じ影 */
    margin-top: 30px; /* 必要であれば、フォームの上に少し余白を追加 */
    margin-bottom: 20px; /* フォームの下にも余白 */
}

/* Googleフォームのレスポンシブ対応 */
.google-form-container {
    position: relative;
    width: 100%;
    /* !!! ここを徹底的に調整 !!! */
    /* 元のフォームの比率: height / width = 820 / 640 = 1.28125 */
    /* なので、128.125% をベースに、フォームのコンテンツが途切れないギリギリの値を設定 */
    /* まずは、デベロッパーツールで iframe のスクロールバーが出ない最低限の値を試す */
    padding-top: 130% !important; /* 例: まずは130%から試す。フォームに合わせて調整。 */
                                 /* 例えば、フォームのコンテンツが少し増えたら132%、減ったら129%など */
                                 /* この値が、スクロールバーが出ないようにする鍵です */
    height: 0; /* padding-topで高さを確保するため、ここは0 */
    overflow: hidden; /* iframeがはみ出さないように */
    background-color: transparent; /* コンテナ自身の背景は透明に保つ */
}

.google-form-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important; /* 親要素の高さに合わせる */
    border: 0;
    /* margin: 0; を削除: Googleフォームの内部マージンに干渉しないように */
    /* padding: 0; を削除: Googleフォームの内部パディングに干渉しないように */
    display: block; /*念のためiframeもブロック要素に*/
}

/* ★★★★★ 究極の強制リセット用メディアクエリ（最終版） ★★★★★ */

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

    /* すべての要素の基本的なボックスモデルを強制的にリセット */
    /* これでマージン・パディング・ボックスサイジングを統一 */
    *, *::before, *::after {
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        /* outline: none !important; */ /* フォーカス時のアウトラインはアクセシビリティのため基本残す */
    }

    /* html と body をビューポートに完全にフィットさせる */
    html, body {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important; /* 横スクロールバーを完全に禁止 */
        box-sizing: border-box !important;
        position: relative !important; /* IE/Edgeでの挙動安定化のため */
        left: 0 !important;
        right: 0 !important;
    }

    /* wrapper も画面いっぱいに広げる */
    .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important; /* ラッパー自身もはみ出しを隠す */
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        /* bodyと背景色を合わせる場合 */
        /* background-color: white !important; */
    }

    /* contaner の設定 */
    .contaner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important; /* 影をなくす */
        box-sizing: border-box !important;
        /* contaner自身のline-height, font-sizeはリセット状態維持でOK */
        /* background-color: #ffffff !important; */
    }

    /* google-form-wrapper の設定 */
    .google-form-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important; /* 影をなくす */
        box-sizing: border-box !important;
        margin-top: 20px !important; /* 上下のマージンを調整 */
        margin-bottom: 20px !important;
        /* background-color: #ffffff !important; */
    }

    /* 画像とiframeのリセット強化 */
    img, iframe {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;    /* iframeも高さ自動調整を試みる */
        display: block !important;
        box-sizing: border-box !important;
    }

    /* 特定のボタン画像は80%のままで中央寄せを維持したい場合 */
    .btn-inner1 img, .btn-inner2 img {
        width: 80% !important;
        margin: 0 auto !important;
        height: auto !important; /* 画像も高さ自動調整 */
    }

    /* contaner内のh1,h2,div,p、及びボタン関連要素のリセット解除（必要な場合のみ） */
    /* これらは画像ベースなので、line-height:0, font-size:0のままでも問題ない可能性が高いが、
       もし余白が残るようなら、以下の行をコメント解除して試す */
    /*
    .contaner h1, .contaner h2, .contaner div, .contaner p,
    .btn-inner1, .btn-inner2, .btn-bg, .contaner a {
        margin: 0 !important;
        padding: 0 !important;
        line-height: normal !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
    */

    /* h2のpadding-topとbackground-colorは維持 */
    .contaner h2 {
        padding-top: 30px !important;
        background-color: white!important;
    }

    /* Googleフォームのコンテナ（padding-topハック） */
    .google-form-container {
        padding-top: 130% !important; /* フォームの高さに合わせて調整 */
        height: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        background-color: transparent !important;
    }

    .google-form-container iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
    }

} /* @media 終わり */

/* ------------------------- */
/* 右下固定ボタンの最終版 */
/* ------------------------- */
.fixed-btn {
  position: fixed;       /* 画面に固定 */
  bottom: 20px;          /* 下からの距離 */
  right: 20px;           /* 右からの距離 */
  width: 40px;           /* ★幅を40pxに設定 */
  height: auto;          /* 縦横比を維持 */
  max-width: 100px;       /* ★最大幅も40pxに設定 */
  min-width: 100px;       /* ★最小幅も40pxに設定 */
  z-index: 9999;         /* 前面表示 */
  cursor: pointer;
  transition: transform 0.3s ease-out, filter 0.3s ease-out;
}

.fixed-btn:hover {
  transform: scale(0.98);
  filter: brightness(0.8);
}

/* 小さい画面向けに強制調整（rightとbottomのみ変更） */
@media screen and (max-width : 115px ){
  .fixed-btn {
    right: 15px !important;  /* 小さい画面での右からの距離 */
    bottom: 15px !important; /* 小さい画面での下からの距離 */
    /* width, max-width, min-width は固定値なのでここでの調整は不要 */
  }
}