@charset "utf-8"; /* common ---------------------------------------------*/ * {margin:0;padding:0;} a:link,a:visited { color: #ffffff; text-decoration:underline; } a:hover,a:active { color: #d90909; text-decoration:underline; } .impact {font-size:20pt; font-weight:bold;} .impact2 {color:red;} .impact3 {background:yellow; color:#000;} #impact4 {underline;} .impact5 {background:#173B50; padding:2px 5px; color:#fff;} .impact6 {background:#f4f4f4; padding:3px; line-height:1.1;} .impact7 {background: #B60000; padding:2px 5px; color:#fff;} .style2 {color: #FF0000} .style3 {color: #333333} .style4 {color: #000000} img{ border: none;} /* ボタンのマウスオーバーで明るくする */ .btn:hover { filter: brightness(120%); } /* animation ---------------------------------------------*/ .feedInUp { opacity: 0; transform: translate(0,30px); -webkit-transform: translate(0,30px); transition: 1.5s; } .feedInUp_On { opacity: 1.0; transform: translate(0,0); -webkit-transform: translate(0,0); } /* layout ---------------------------------------------*/ /*TopIntro-Start*/ body { width: 100%; height: 100%; margin: 0px; padding: 0px; min-width: 1002px; background-image: url(../images/bg.jpg); background-repeat: repeat; background-attachment: fixed; background-position: top center; -webkit-text-size-adjust:none; text-align:center; font-size:18px; font-family: 'meiryo', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif; color: #383d5c; } /*サイズ設定は不要にできた。オートで対応してくれる。*/ #head1 { background: url("../images/header_01.png") no-repeat top center; height:200px; } #head2 { background: url("../images/header_02.png") no-repeat top center; height:200px; } #head3 { background: url("../images/header_03.png") no-repeat top center; height:200px; } #head4 { background: url("../images/header_04.png") no-repeat top center; height:200px; } #head5 { background: url("../images/header_05.png") no-repeat top center; height:200px; } #head6 { background: url("../images/header_06.png") no-repeat top center; height:200px; } #head7 { background: url("../images/header_07.png") no-repeat top center; height:200px; } #head8 { background: url("../images/header_08.png") no-repeat top center; height:200px; } #head9 { background: url("../images/header_09.png") no-repeat top center; height:200px; } #head10 { background: url("../images/header_10.png") no-repeat top center; height:200px; } #head11 { background: url("../images/header_11.png") no-repeat top center; height:200px; } #head12 { background: url("../images/header_12.png") no-repeat top center; height:200px; } #head13 { background: url("../images/header_13.png") no-repeat top center; height:200px; } #head14 { background: url("../images/header_14.png") no-repeat top center; height:200px; } #head15 { background: url("../images/header_15.png") no-repeat top center; height:200px; } #head16 { background: url("../images/header_16.png") no-repeat top center; height:200px; } #head17 { background: url("../images/header_17.png") no-repeat top center; height:200px; } #head18 { background: url("../images/header_18.png") no-repeat top center; height:200px; } #head19 { background: url("../images/header_19.png") no-repeat top center; height:200px; } #head20 { background: url("../images/header_20.png") no-repeat top center; height:200px; } #head21 { background: url("../images/header_21.png") no-repeat top center; height:200px; } #head22 { background: url("../images/header_22.png") no-repeat top center; height:200px; } #head23 { background: url("../images/header_23.png") no-repeat top center; height:200px; } #head24 { background: url("../images/header_24.png") no-repeat top center; height:200px; } #head25 { background: url("../images/header_25.png") no-repeat top center; height:200px; } #head26 { background: url("../images/header_26.png") no-repeat top center; height:200px; } #head27 { background: url("../images/header_27.png") no-repeat top center; height:200px; } #head28 { background: url("../images/header_28.png") no-repeat top center; height:200px; } #head29 { background: url("../images/header_29.png") no-repeat top center; height:200px; } #head30 { background: url("../images/header_30.png") no-repeat top center; height:200px; } #head31 { background: url("../images/header_31.png") no-repeat top center; height:200px; } #head32 { background: url("../images/header_32.png") no-repeat top center; height:200px; } #head33 { background: url("../images/header_33.png") no-repeat top center; height:200px; } #head34 { background: url("../images/header_34.png") no-repeat top center; height:200px; } #head35 { background: url("../images/header_35.png") no-repeat top center; height:200px; } #head36 { background: url("../images/header_36.png") no-repeat top center; height:200px; } #head37 { background: url("../images/header_37.png") no-repeat top center; height:200px; } #head38 { background: url("../images/header_38.png") no-repeat top center; height:200px; } #head39 { background: url("../images/header_39.png") no-repeat top center; height:200px; } #head40 { background: url("../images/header_40.png") no-repeat top center; height:200px; } #head41 { background: url("../images/header_41.png") no-repeat top center; height:200px; } #head42 { background: url("../images/header_42.png") no-repeat top center; height:200px; } #head43 { background: url("../images/header_43.png") no-repeat top center; height:200px; } #head44 { background: url("../images/header_44.png") no-repeat top center; height:200px; } #head45 { background: url("../images/header_45.png") no-repeat top center; height:200px; } #head46 { background: url("../images/header_46.png") no-repeat top center; height:200px; } #head47 { background: url("../images/header_47.png") no-repeat top center; height:200px; } #head48 { background: url("../images/header_48.png") no-repeat top center; height:200px; } #head49 { background: url("../images/header_49.png") no-repeat top center; height:200px; } #head50 { background: url("../images/header_50.png") no-repeat top center; height:200px; } #head51 { background: url("../images/header_51.png") no-repeat top center; height:200px; } #head52 { background: url("../images/header_52.png") no-repeat top center; height:200px; } #head53 { background: url("../images/header_53.png") no-repeat top center; height:200px; } #head54 { background: url("../images/header_54.png") no-repeat top center; height:200px; } #head55 { background: url("../images/header_55.png") no-repeat top center; height:200px; } #head56 { background: url("../images/header_56.png") no-repeat top center; height:200px; } #head57 { background: url("../images/header_57.png") no-repeat top center; height:200px; } #head58 { background: url("../images/header_58.png") no-repeat top center; height:200px; } #head59 { background: url("../images/header_59.png") no-repeat top center; height:200px; } #head60 { background: url("../images/header_60.png") no-repeat top center; height:200px; } #head61 { background: url("../images/header_61.png") no-repeat top center; height:200px; } #head62 { background: url("../images/header_62.png") no-repeat top center; height:200px; } #head63 { background: url("../images/header_63.png") no-repeat top center; height:200px; } #head64 { background: url("../images/header_64.png") no-repeat top center; height:200px; } #head65 { background: url("../images/header_65.png") no-repeat top center; height:200px; } #head66 { background: url("../images/header_66.png") no-repeat top center; height:200px; } #head67 { background: url("../images/header_67.png") no-repeat top center; height:200px; } #head68 { background: url("../images/header_68.png") no-repeat top center; height:200px; } #head69 { background: url("../images/header_69.png") no-repeat top center; height:200px; } #head70 { background: url("../images/header_70.png") no-repeat top center; height:200px; } #head71 { background: url("../images/header_71.png") no-repeat top center; height:200px; } #head72 { background: url("../images/header_72.png") no-repeat top center; height:200px; } #head73 { background: url("../images/header_73.png") no-repeat top center; height:200px; } #head74 { background: url("../images/header_74.png") no-repeat top center; height:200px; } #head75 { background: url("../images/header_75.png") no-repeat top center; height:200px; } #head76 { background: url("../images/header_76.png") no-repeat top center; height:200px; } #head77 { background: url("../images/header_77.png") no-repeat top center; height:200px; } #head78 { background: url("../images/header_78.png") no-repeat top center; height:200px; } #head79 { background: url("../images/header_79.png") no-repeat top center; height:200px; } #head80 { background: url("../images/header_80.png") no-repeat top center; height:200px; } #head81 { background: url("../images/header_81.png") no-repeat top center; height:200px; } #head82 { background: url("../images/header_82.png") no-repeat top center; height:200px; } #head83 { background: url("../images/header_83.png") no-repeat top center; height:200px; } #head84 { background: url("../images/header_84.png") no-repeat top center; height:200px; } #head85 { background: url("../images/header_85.png") no-repeat top center; height:200px; } #head86 { background: url("../images/header_86.png") no-repeat top center; height:200px; } #head87 { background: url("../images/header_87.png") no-repeat top center; height:200px; } #head88 { background: url("../images/header_88.png") no-repeat top center; height:200px; } #head89 { background: url("../images/header_89.png") no-repeat top center; height:200px; } #head90 { background: url("../images/header_90.png") no-repeat top center; height:200px; } #head91 { background: url("../images/header_91.png") no-repeat top center; height:200px; } #head92 { background: url("../images/header_92.png") no-repeat top center; height:200px; } #head93 { background: url("../images/header_93.png") no-repeat top center; height:200px; } #head94 { background: url("../images/header_94.png") no-repeat top center; height:200px; } #head95 { background: url("../images/header_95.png") no-repeat top center; height:200px; } #head96 { background: url("../images/header_96.png") no-repeat top center; height:200px; } #head97 { background: url("../images/header_97.png") no-repeat top center; height:200px; } #head98 { background: url("../images/header_98.png") no-repeat top center; height:200px; } #head99 { background: url("../images/header_99.png") no-repeat top center; height:200px; } #head100 { background: url("../images/header_100.png") no-repeat top center; height:200px; } #head101 { background: url("../images/header_101.png") no-repeat top center; height:200px; } #head102 { background: url("../images/header_102.png") no-repeat top center; height:200px; } #head103 { background: url("../images/header_103.png") no-repeat top center; height:200px; } #head104 { background: url("../images/header_104.png") no-repeat top center; height:200px; } #head105 { background: url("../images/header_105.png") no-repeat top center; height:200px; } #head106 { background: url("../images/header_106.png") no-repeat top center; height:200px; } #head107 { background: url("../images/header_107.png") no-repeat top center; height:200px; } #head108 { background: url("../images/header_108.png") no-repeat top center; height:200px; } #head109 { background: url("../images/header_109.png") no-repeat top center; height:200px; } #head110 { background: url("../images/header_110.png") no-repeat top center; height:200px; } #head111 { background: url("../images/header_111.png") no-repeat top center; height:200px; } #head112 { background: url("../images/header_112.png") no-repeat top center; height:200px; } #head113 { background: url("../images/header_113.png") no-repeat top center; height:200px; } #head114 { background: url("../images/header_114.png") no-repeat top center; height:200px; } #head115 { background: url("../images/header_115.png") no-repeat top center; height:200px; } #head116 { background: url("../images/header_116.png") no-repeat top center; height:200px; } #head117 { background: url("../images/header_117.png") no-repeat top center; height:200px; } #head118 { background: url("../images/header_118.png") no-repeat top center; height:200px; } #head119 { background: url("../images/header_119.png") no-repeat top center; height:200px; } #head120 { background: url("../images/header_120.png") no-repeat top center; height:200px; } #head121 { background: url("../images/header_121.png") no-repeat top center; height:200px; } #head122 { background: url("../images/header_122.png") no-repeat top center; height:200px; } #head123 { background: url("../images/header_123.png") no-repeat top center; height:200px; } #head124 { background: url("../images/header_124.png") no-repeat top center; height:200px; } #head125 { background: url("../images/header_125.png") no-repeat top center; height:200px; } #head126 { background: url("../images/header_126.png") no-repeat top center; height:200px; } #head127 { background: url("../images/header_127.png") no-repeat top center; height:200px; } #head128 { background: url("../images/header_128.png") no-repeat top center; height:200px; } #head129 { background: url("../images/header_129.png") no-repeat top center; height:200px; } #head130 { background: url("../images/header_130.png") no-repeat top center; height:200px; } #head131 { background: url("../images/header_131.png") no-repeat top center; height:200px; } #head132 { background: url("../images/header_132.png") no-repeat top center; height:200px; } #head133 { background: url("../images/header_133.png") no-repeat top center; height:200px; } #head134 { background: url("../images/header_134.png") no-repeat top center; height:200px; } #head135 { background: url("../images/header_135.png") no-repeat top center; height:200px; } #head136 { background: url("../images/header_136.png") no-repeat top center; height:200px; } #head137 { background: url("../images/header_137.png") no-repeat top center; height:200px; } #head138 { background: url("../images/header_138.png") no-repeat top center; height:200px; } #head139 { background: url("../images/header_139.png") no-repeat top center; height:200px; } #head140 { background: url("../images/header_140.png") no-repeat top center; height:200px; } #head141 { background: url("../images/header_141.png") no-repeat top center; height:200px; } #head142 { background: url("../images/header_142.png") no-repeat top center; height:200px; } #head143 { background: url("../images/header_143.png") no-repeat top center; height:200px; } #head144 { background: url("../images/header_144.png") no-repeat top center; height:200px; } #head145 { background: url("../images/header_145.png") no-repeat top center; height:200px; } #head146 { background: url("../images/header_146.png") no-repeat top center; height:200px; } #head147 { background: url("../images/header_147.png") no-repeat top center; height:200px; } #head148 { background: url("../images/header_148.png") no-repeat top center; height:200px; } #head149 { background: url("../images/header_149.png") no-repeat top center; height:200px; } #head150 { background: url("../images/header_150.png") no-repeat top center; height:200px; } #head151 { background: url("../images/header_151.png") no-repeat top center; height:200px; } #head152 { background: url("../images/header_152.png") no-repeat top center; height:200px; } #head153 { background: url("../images/header_153.png") no-repeat top center; height:200px; } #head154 { background: url("../images/header_154.png") no-repeat top center; height:200px; } #head155 { background: url("../images/header_155.png") no-repeat top center; height:200px; } #head156 { background: url("../images/header_156.png") no-repeat top center; height:200px; } #head157 { background: url("../images/header_157.png") no-repeat top center; height:200px; } #head158 { background: url("../images/header_158.png") no-repeat top center; height:200px; } #head159 { background: url("../images/header_159.png") no-repeat top center; height:200px; } #head160 { background: url("../images/header_160.png") no-repeat top center; height:200px; } #head161 { background: url("../images/header_161.png") no-repeat top center; height:200px; } #head162 { background: url("../images/header_162.png") no-repeat top center; height:200px; } #head163 { background: url("../images/header_163.png") no-repeat top center; height:200px; } #head164 { background: url("../images/header_164.png") no-repeat top center; height:200px; } #head165 { background: url("../images/header_165.png") no-repeat top center; height:200px; } #head166 { background: url("../images/header_166.png") no-repeat top center; height:200px; } #head167 { background: url("../images/header_167.png") no-repeat top center; height:200px; } #head168 { background: url("../images/header_168.png") no-repeat top center; height:200px; } #head169 { background: url("../images/header_169.png") no-repeat top center; height:200px; } #head170 { background: url("../images/header_170.png") no-repeat top center; height:200px; } #head171 { background: url("../images/header_171.png") no-repeat top center; height:200px; } #head172 { background: url("../images/header_172.png") no-repeat top center; height:200px; } #head173 { background: url("../images/header_173.png") no-repeat top center; height:200px; } #head174 { background: url("../images/header_174.png") no-repeat top center; height:200px; } #head175 { background: url("../images/header_175.png") no-repeat top center; height:200px; } #head176 { background: url("../images/header_176.png") no-repeat top center; height:200px; } #head177 { background: url("../images/header_177.png") no-repeat top center; height:200px; } #head178 { background: url("../images/header_178.png") no-repeat top center; height:200px; } #head179 { background: url("../images/header_179.png") no-repeat top center; height:200px; } #head180 { background: url("../images/header_180.png") no-repeat top center; height:200px; } #head181 { background: url("../images/header_181.png") no-repeat top center; height:200px; } #head182 { background: url("../images/header_182.png") no-repeat top center; height:200px; } #head183 { background: url("../images/header_183.png") no-repeat top center; height:200px; } #head184 { background: url("../images/header_184.png") no-repeat top center; height:200px; } #head185 { background: url("../images/header_185.png") no-repeat top center; height:200px; } #head186 { background: url("../images/header_186.png") no-repeat top center; height:200px; } #head187 { background: url("../images/header_187.png") no-repeat top center; height:200px; } #head188 { background: url("../images/header_188.png") no-repeat top center; height:200px; } #head189 { background: url("../images/header_189.png") no-repeat top center; height:200px; } #head190 { background: url("../images/header_190.png") no-repeat top center; height:200px; } #head191 { background: url("../images/header_191.png") no-repeat top center; height:200px; } #head192 { background: url("../images/header_192.png") no-repeat top center; height:200px; } #head193 { background: url("../images/header_193.png") no-repeat top center; height:200px; } #head194 { background: url("../images/header_194.png") no-repeat top center; height:200px; } #head195 { background: url("../images/header_195.png") no-repeat top center; height:200px; } #head196 { background: url("../images/header_196.png") no-repeat top center; height:200px; } #head197 { background: url("../images/header_197.png") no-repeat top center; height:200px; } #head198 { background: url("../images/header_198.png") no-repeat top center; height:200px; } #head199 { background: url("../images/header_199.png") no-repeat top center; height:200px; } #head200 { background: url("../images/header_200.png") no-repeat top center; height:200px; } #head201 { background: url("../images/header_201.png") no-repeat top center; height:200px; } #head202 { background: url("../images/header_202.png") no-repeat top center; height:200px; } #head203 { background: url("../images/header_203.png") no-repeat top center; height:200px; } #head204 { background: url("../images/header_204.png") no-repeat top center; height:200px; } #head205 { background: url("../images/header_205.png") no-repeat top center; height:200px; } #head206 { background: url("../images/header_206.png") no-repeat top center; height:200px; } #head207 { background: url("../images/header_207.png") no-repeat top center; height:200px; } #head208 { background: url("../images/header_208.png") no-repeat top center; height:200px; } #head209 { background: url("../images/header_209.png") no-repeat top center; height:200px; } #form { background: url("../images/form.png") no-repeat top center; height: px; } #wrap { background-image: url("../images/wrap.png"); background-repeat: repeat-y; background-position: center top; background-position:50% 0%; } #container { text-align:left; width:1000px; margin:0 auto; } #container_form { text-align:left; width:1000px; margin:0 auto; } #text { text-align:left; width:850px; margin:0 auto; } #text_form { text-align:left; width:850px; margin:0 auto; } #footer { background-color: #ddf2ec; } ol, ul{ list-style-position: inside; padding-left:10px; } ol li, ul li{ text-align:left; } /* head◯◯：指定サイズで縮小、中央寄せ、幅は1000pxに統一 */ /* PC表示時の横幅サイズを調整・指定する */ /* PC表示時の横幅サイズを調整・指定する */ /* PC表示時の横幅サイズを調整・指定する */ [id^="head"]{ background-size: 80% auto !important; /* %のサイズ指定表示 */ background-repeat: no-repeat !important; background-position: top center !important; width: 1000px; /* 幅を決めて高さ計算を安定化 */ margin: 0 auto; /* センター配置 */ height: 200px; /* フォールバック（JS前のチラつき防止） */ display: block; overflow: hidden; } /* PCでは50%、スマホでは100%で背景を表示 */ /* --- Smartphone (<=768px) overrides --- */ @media screen and (max-width: 768px) { body { min-width: 0 !important; /* 固定幅解除 */ } [id^="head"] { width: 100% !important; /* 1000px固定解除 */ background-size: 100% auto !important; /* スマホは100%表示 */ /* heightは触らない。JSが inline で数値セットする */ } } /* すべての head でボタン中央寄せ＆絶対配置 */ [id^="head"] { position: relative; } [id^="head"] .btn-wrap{ position: absolute; left: 0; right: 0; margin: 0 auto; /* 水平中央 */ /* top と width は JS が設定 */ } [id^="head"] .btn{ display: block; width: 100%; /* ラッパー幅にフィット */ height: auto; } @media (max-width: 768px){ [id^="head"] .btn-wrap{ max-width: 95vw; } /* はみ出し保険 */ } /* 下部にボタン固定するために下記を追加した */ /* 背景帯とボタン */ .fixed-cta { position: fixed; bottom: 0px; left: 0; /* 左端に配置 */ transform: translateX(0) translateY(100px); /* 最初は下に隠れている */ z-index: 9999; /* 最前面に表示 */ display: block; /* 初期状態で表示するが透明で下に隠れる */ opacity: 0; /* 最初は透明 */ transition: opacity 0.8s ease, transform 0.8s ease; /* ふわっと出てくるアニメーション */ width: 100%; /* 背景帯をボタン幅に合わせて表示 */ background: linear-gradient(to bottom, #e6f3eb, #fcfefd); /* 縦方向のグラデーション */ text-align: center; padding-top: 15px; /* ボタン周囲の帯の大きさ */ padding-right: 0px; padding-bottom: 0px; padding-left: 0px; pointer-events: none; /* フェードイン前はリンク無効化 */ /* 　ツイカ　　　*/ } .fixed-cta a { color: white; text-decoration: none; font-size: 18px; font-weight: bold; display: block; /* 画像リンクボタンをブロック要素に */ } /* 画像リンクボタン */ .cta-image { width: 20%; /* 画像の幅設定 */ height: auto; /* 高さは自動調整 */ cursor: pointer; /* 画像にカーソルを載せるとポインタに変更 */ z-index: 1; /* ボタン画像が最前面に表示される */ transition: opacity 0.3s ease; /* 画像のフェードイン/アウトをスムーズに */ /* 　ツイカ　　　*/ } /* リンク無効化（フェードアウト時に無効にする） */ /* 　ツイカ　　　*/ .fixed-cta.fade-out { pointer-events: none; /* フェードアウト時にリンク無効化 */ } /* --- スマホ時に下部固定ボタンを少し大きくする --- */ @media screen and (max-width: 768px) { .fixed-cta .cta-image { width: 50%; /* 通常20% → 〇〇%に拡大 */ } }