@charset "UTF-8"; /* 共通 ------------------------------------------------------------- */ /* 共通 */ body { width: 100%; font-size: 13pt; font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; } /* ヘッダー --------------------------------------------------------- */ /* ヘッダーラッパー */ .head-wrap { width: 100%; max-width: 800px; box-sizing: border-box; /* 幅のはみ出しを防ぐ */ margin: 0 auto; padding: 0; } /* ヘッダー */ .head { display: table; margin: 0; padding: 4px; } /* ヘッダー左側 */ .head__column-left { display: table-cell; margin: 0; padding: 0; vertical-align: middle; } /* ヘッダー右側 */ .head__column-right { display: table-cell; margin: 0; padding: 0; vertical-align: middle; } /* ヘッダー左側(ロゴ) */ .head__logo { margin: 0; padding: 0; line-height: 1em; font-size: 1em; /* 画像がない時のフォントサイズを指定して高さを固定 */ } .head__logo img { padding-right: 6px; width: 55px; height: auto; } /* ヘッダー左側(タイトル) */ .head__title { margin: 0; padding: 0; line-height: 1em; font-size: 0.87em; } /* トップページ背景 ------------------------------------------------- */ /* トップページ背景ラッパー */ .topbg-wrap { width: 100%; margin: 0; padding: 0; background-image: url("../images/top_bg_back.png"); background-position: center; background-size: 8px 8px; background-repeat: repeat; z-index: 200; } /* トップページ背景 */ .topbg { display: table; width: calc(100% - 8px); max-width: 380px; margin: 0 auto; padding: 0; } /* トップページ背景左側 */ .topbg-left { display: table-cell; margin: 0; padding: 0; vertical-align: bottom; } .topbg-left img { width: 100px; height: auto; padding-top: 6px; padding-left: 12px; padding-right: 2px; vertical-align: bottom; /* 画像に下の余白を付けない */ } /* トップページ背景右側 */ .topbg-right { display: table-cell; vertical-align: middle; margin: 0; padding: 0; } .topbg-right h2 { color: #FFFFFF; font-size: 1.01em; line-height: 1.5em; } /* トップページ背景右側(タイトル文字(小)) */ .topbg__title-small { font-size: 0.8em; } /* メイン ----------------------------------------------------------- */ /* メイン(説明)ラッパー */ .main__desc-wrap { max-width: 800px; box-sizing: border-box; /* 幅のはみ出しを防ぐ */ margin: auto; padding: 18px 10px 2px; } /* メイン(説明) */ .description { margin: 0; padding: 0; display: inline-block; vertical-align: top; text-align: left; width: 100%; } /* メイン(説明(サブタイトル)) */ .main__desc-subtitle { margin: 0 auto; padding: 0; vertical-align: top; font-size: 0.75em; } /* メイン(説明(段落)) */ .main__desc-paragraph { margin: 8px 0; padding: 0; font-size: 0.75em; line-height: 1.9em; text-indent: 1em; } /* メイン(表)ラッパー */ .main__table-wrap { max-width: 800px; box-sizing: border-box; /* 幅のはみ出しを防ぐ */ margin: auto; padding: 12px 20px 12px 24px; } /* メイン(表) */ .main__table { display: block; font-size: 0.75em; float: left; line-height: 1.7em; } .main__table dl, .main__table dt, .main__table dd { margin: 0; padding: 0; } .main__table dt { width: 5.1em; clear: left; float: left; font-weight: bold; } .main__table dd { margin-left: 5.1em; } /* メイン(表の回り込み解除) */ .main__table-clearfix { *zoom: 1; } .main__table-clearfix:before, .main__table-clearfix:after { content: " "; display: table; } .main__table-clearfix:after { clear: both; } /* メイン(認定証)ラッパー */ .main__cert-wrap { width: 100%; max-width: 800px; box-sizing: border-box; /* 幅のはみ出しを防ぐ */ margin: 0 auto; padding: 0; } /* メイン(認定証) */ .main__cert { display: table; width: calc(100% - 8px); margin: 0; padding: 4px; background-color: #DAEAF5; font-size: 0.75em; font-weight: bold; } /* メイン(認定証)左側 */ .main__cert-left { display: table-cell; margin: 0; padding: 0; vertical-align: middle; } /* メイン(認定証)右側 */ .main__cert-right { display: table-cell; margin: 0; padding: 0; vertical-align: middle; } /* メイン(認定証)左側(画像) */ .cert__image { margin: 0; padding: 0; line-height: 1em; } .cert__image img { padding-top: 6px; padding-bottom: 6px; padding-left: 20px; padding-right: 12px; width: 55px; height: auto; } /* メイン(認定証)右側(文章) */ .cert__paragraph { margin: 0; padding-right: 16px; line-height: 1.7em; } /* メイン(参照先)ラッパー */ .main__ref-wrap { max-width: 800px; box-sizing: border-box; /* 幅のはみ出しを防ぐ */ margin: auto; padding: 16px 24px; text-align: center; } /* メイン(参照先) */ .main__ref { display: inline-block; margin: 0 auto; padding: 8px 12px; text-align: left; color: #3FA9F5; font-size: 0.75em; font-weight: bold; border: solid 1px #3FA9F5; } .main__ref a { text-decoration: none; color: #3FA9F5; } /* メイン(共通) ----------------------------------------------------- */ /* メイン(文字間隔) */ .paragraph__letterspacing-2 { letter-spacing: 2em; } /* メイン(語句の固まり) */ .paragraph__unit { display: inline-block; } /* 区切り ----------------------------------------------------------- */ /* 区切りラッパー */ .separate-wrap { width: 100%; margin: 0; padding: 8px 0 0; } /* 区切り */ .separate__column { max-width: 800px; box-sizing: border-box; /* 幅のはみ出しを防ぐ */ margin: 0 auto; padding: 0; border-bottom: 1px solid; } /* フッター --------------------------------------------------------- */ /* フッターラッパー */ .footer-wrap { width: 100%; margin: 0; padding: 0; } /* フッター */ .footer { max-width: 800px; box-sizing: border-box; /* 幅のはみ出しを防ぐ */ margin: 0 auto; padding: 4px 18px; text-align: center; background-color: #3FA9F5; } /* フッター(カラム) */ .footer__column { display: inline-block; text-align: left; color: #ffffff; font-size: 0.65em; }