@charset "UTF-8";

/*================================================ 

* 

* モバイル対応（レスポンシブデザイン） 

* 

================================================*/ 

 

/* モバイル用スタイル（768px以下） */ 

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

/* ベーススタイル */ 

body { 

font-size: 14px; 

} 

 

/* コンテナの幅調整 */ 

.inner { 

width: 100%; 

padding: 0 10px; 

box-sizing: border-box; 

} 

 

#contents { 

width: 100%; 

margin: 10px auto; 

padding: 0 10px; 

box-sizing: border-box; 

} 

 

/* ヘッダー調整 */ 

header img { 

padding: 15px 10px; 

max-width: 100%; 

height: auto; 

} 

 

/* メインコンテンツエリア */ 

#main_1cul { 

margin: 0; 

border-left: none; 

border-right: none; 

border-radius: 0; 

} 

 

#main_1cul article { 

margin: 15px 10px; 

} 

 

/* h1エリア */ 

#h1_area { 

padding: 15px 10px; 

margin: 0; 

border-left: none; 

border-right: none; 

} 

 

h1.service_ttl { 

font-size: 1.3em; 

} 

tbody {

display: block;

}
 

/* テーブルを縦並びに */ 

.table_row { 

display: block; 

border: none; 

} 

 

.table_row tr { 

display: block; 

margin-bottom: 15px; 

border: 1px solid #ddd; 

border-radius: 4px; 

background: #fff; 

box-sizing: border-box; 

overflow: hidden; 

} 

 

.table_row th { 

display: block; 

width: 100%; 

max-width: 100%; 

text-align: left; 

padding: 10px; 

border: none; 

border-bottom: 1px solid #ddd; 

background: #f2faff; 

font-size: 0.9em; 

box-sizing: border-box; 

} 

 

.table_row td { 

display: block; 

width: 100%; 

max-width: 100%; 

padding: 10px; 

border: none; 

box-sizing: border-box; 

} 

 

/* 入力フィールドの調整 */ 

input[type="text"], 

input[type="email"], 

input[type="tel"], 

textarea, 

select { 

width: 100%; 

max-width: 100%; 

box-sizing: border-box; 

font-size: 16px; /* iOSでズームを防ぐ */ 

padding: 8px; 

border: 2px solid #ddd; 

border-radius: 4px; 

} 

 

input[type="text"]:focus, 

input[type="email"]:focus, 

input[type="tel"]:focus, 

textarea:focus, 

select:focus { 

border-color: #4c89b5; 

outline: none; 

} 

 

/* ラジオボタンとラベルの調整 */ 

input[type="radio"] { 

margin-right: 8px; 

width: 18px; 

height: 18px; 

vertical-align: middle; 

} 

 

.table_row label { 

display: inline-block; 

margin-bottom: 8px; 

font-size: 0.95em; 

line-height: 1.5; 

vertical-align: middle; 

} 

 

/* チェックボックスの調整 */ 

input[type="checkbox"] { 

width: 18px; 

height: 18px; 

margin-right: 8px; 

vertical-align: middle; 

} 

 

/* テキストエリア */ 

textarea { 

min-height: 120px; 

resize: vertical; 

} 

 

/* ヒントテキスト */ 

.hint { 

display: block; 

font-size: 0.85em; 

color: #666; 

margin-bottom: 5px; 

} 

 

/* 注意書き */ 

.notes { 

display: inline-block; 

font-size: 0.85em; 

margin-left: 5px; 

} 

 

/* ボタンの調整 */ 

.button3 {  

max-width: 100%; 

padding: 12px; 

font-size: 16px; 

line-height: 1.5; 

border-radius: 4px; 

} 

 

.button4 { 

width: 100%; 

max-width: 100%; 

padding: 12px; 

font-size: 16px; 

line-height: 1.5; 

border-radius: 4px; 

} 

 

/* フォーム情報エリア */ 

.form_info { 

padding: 15px; 

margin: 15px 0; 

font-size: 0.9em; 

line-height: 1.6; 

} 

 

/* 個人情報同意のテーブル */ 

.table_row th[width="330"] { 

width: 100%; 

} 

 

/* その他入力フィールド */ 

#other { 

width: 100%; 

margin-top: 8px; 

box-sizing: border-box; 

} 

 

/* 記事内の見出し */ 

article h3 { 

font-size: 1.1em; 

margin: 1.5em 0 0.8em 0; 

} 

 

/* フッター調整 */ 

footer { 

padding: 0 10px; 

} 

 

.footmenu { 

padding: 0 10px; 
display: block;

} 

 

/* トップへ戻るボタン */ 

.totop { 

right: 10px; 

bottom: 10px; 

} 

 

.totop img { 

max-width: 50px; 

height: auto; 

} 

} 

 

/* 小さなモバイル（480px以下） */ 

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

body { 

font-size: 13px; 

} 

 

#main_1cul article { 

margin: 10px 5px; 

} 

 

#h1_area { 

padding: 10px 5px; 

} 

 

h1.service_ttl { 

font-size: 1.2em; 

} 

 

.table_row th, 

.table_row td { 

padding: 8px; 

font-size: 0.9em; 

box-sizing: border-box; 

max-width: 100%; 

} 

 

input[type="text"], 

input[type="email"], 

input[type="tel"], 

textarea, 

select { 

font-size: 16px; /* iOSでズームを防ぐ */ 

padding: 10px; 

} 

 

.button3, 

.button4 { 

padding: 14px; 

font-size: 16px; 

} 

 

.form_info { 

padding: 10px; 

font-size: 0.85em; 

} 

}