@charset "UTF-8"; /** * @ 概要 * 本ファイルではコンテンツ部分 (.frame-content) 以外のスタイルを定義 * コンテンツ部分 (.frame-content) のスタイルはカテゴリーごとにファイルを作成して定義 * - 全メディア用 …… main-{CATEGORY}.css * - 印刷用 …… print-{CATEGORY}.css * セレクターは必ず .frame-content から記述 * * @ 識別子 * の class に以下を付加 * - js …… JavaScript 有効 * - sd …… スマートデバイス (Android、iPhone、iPad、iPod) * - oldie …… Internet Explorer 10 未満 * - ie9 …… Internet Explorer 9 * - ie8 …… Internet Explorer 8 * * @ 通常フォント * 基本のサイズは、広のとき 18 px、狭／中のとき 13 px * 基本のカラーは #000 * ブラウザーの標準サイズは 16px を想定 * * @ Web フォント * F+UD-筑紫明朝 R (https://webfont.fontplus.jp/service/fontdetail/WZX3Wxmmhbo%3D) を使用 * * @ レイアウト * スクロールバー領域を考慮して 20px 多く設定 * - 0px - 719px …… 狭 * - 720px - 1039px …… 中 * - 1040px - …… 広 * * @ 構造 * .frame * .frame-header * .logo * .frame-nav * .tocnav * .frame-path * .path * .frame-content * .frame-footer * .utilnav * .copyright * * @ z-index * .frame-nav 内では 1000 - 1999 を使用 * .frame-content 内では 0 - 999 を使用 */ body { background-color: #fff; color: #000; font-family: "F+UD-筑紫明朝 R", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳＰゴシック", sans-serif; font-size: 1.125em; letter-spacing: 0.05em; line-height: 2; } img { height: auto; max-width: 100%; } a { color: #003391; -webkit-transition: opacity 0.4s linear; transition: opacity 0.4s linear; } a:hover, a:active { opacity: 0.6; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } @media only screen and (max-width: 719px) { body { font-size: 0.875em; line-height: 1.8; } } .ie8 * { -ms-filter: inherit; } .ie8 a:hover, .ie8 a:active { color: #6685bd; -ms-filter: "alpha(opacity=60)"; } /* * --------------------------------------------------------------------------------------- * フレーム * * .frame * .frame-header * .frame-nav * .frame-path * .frame-content * .frame-footer * --------------------------------------------------------------------------------------- */ .frame { } .frame .frame-header { line-height: 1; } .frame .frame-nav { } .frame .frame-path { } .frame .frame-content { } .frame .frame-footer { background: transparent url("../image/footer.png") no-repeat scroll center top; background-size: 154px 64px; margin-top: 80px; padding-top: 64px; } @media only screen and (max-width: 719px) { .frame .frame-footer { background-size: 77px 32px; margin-top: 60px; padding-top: 32px; } } .ie8 .frame { margin: 0 auto; width: 1020px; }.ie8 .frame .frame-footer { background-image: url("../image/ie8-footer.png"); } /* * --------------------------------------------------------------------------------------- * ロゴ * * .logo * --------------------------------------------------------------------------------------- */ .frame-header .logo { box-sizing: border-box; margin: 29px auto; padding: 0 40px; max-width: 1020px; } @media only screen and (min-width: 720px) and (max-width: 1039px) { .frame-header .logo img { width: 560px; } } @media only screen and (max-width: 719px) { .frame-header .logo { margin: 20px auto; padding: 0 20px; } .frame-header .logo img { width: 242px; } } /* * --------------------------------------------------------------------------------------- * コンテンツナビゲーション * * .tocnav (--drawed) * .tocnav-toggle * .tocnav-content * .tocnav-entrylist * .tocnav-entryitem * .tocnav-mainlist * .tocnav-mainitem (--current) * .tocnav-sublist (--2column | --3column | --4column) * .tocnav-subitem * span * --------------------------------------------------------------------------------------- */ .frame-nav .tocnav { box-sizing: border-box; margin: 0 auto; position: relative; max-width: 1020px; } .frame-nav .tocnav .tocnav-toggle { display: none; } .frame-nav .tocnav .tocnav-content { } .frame-nav .tocnav .tocnav-entrylist { font-size: 0.77777777777777777777777777777778em; position: absolute; right: 40px; top: -71px; } .frame-nav .tocnav .tocnav-entrylist .tocnav-entryitem { } .frame-nav .tocnav .tocnav-entrylist .tocnav-entryitem > a { border: 2px solid #003391; color: #00408C; display: inline-block; padding: 5px 15px; text-decoration: none; } .frame-nav .tocnav .tocnav-mainlist { color: #ddd; font-size: 0.83333333333333333333333333333333em; line-height: 1; position: relative; text-align: center; } .frame-nav .tocnav .tocnav-mainlist .tocnav-mainitem { border-bottom: 2px solid #fff; display: inline-block; margin: 0 1.05em; padding-bottom: 10px; } .frame-nav .tocnav .tocnav-mainlist .tocnav-mainitem--current { border-color: #000; } .frame-nav .tocnav .tocnav-mainlist .tocnav-mainitem > a { color: #000; text-decoration: none; } .frame-nav .tocnav .tocnav-sublist { background-color: #fff; box-sizing: border-box; display: none; left: 0; line-height: 1.6; padding: 25px 25px 75px; position: absolute; text-align: center; top: 0; width: 100%; z-index: 1000; } .frame-nav .tocnav .tocnav-sublist:after { clear: both; content: ""; display: table; } .frame-nav .tocnav .tocnav-sublist .tocnav-subitem { display: inline-block; font-size: 1.6em; padding: 25px; text-align: center; } .frame-nav .tocnav .tocnav-sublist--2column .tocnav-subitem, .frame-nav .tocnav .tocnav-sublist--3column .tocnav-subitem, .frame-nav .tocnav .tocnav-sublist--4column .tocnav-subitem { box-sizing: border-box; float: left; margin-top: 40px; padding-top: 10px; position: relative; } .frame-nav .tocnav .tocnav-sublist--2column .tocnav-subitem { width: 50%; } .frame-nav .tocnav .tocnav-sublist--3column .tocnav-subitem { min-height: 6.3em; width: 33.333333333333333333333333333333%; } .frame-nav .tocnav .tocnav-sublist--4column .tocnav-subitem { width: 25%; } .frame-nav .tocnav .tocnav-sublist .tocnav-subitem > a { color: #000; display: inline-block; text-decoration: none; } .frame-nav .tocnav .tocnav-sublist--2column .tocnav-subitem > a, .frame-nav .tocnav .tocnav-sublist--3column .tocnav-subitem > a, .frame-nav .tocnav .tocnav-sublist--4column .tocnav-subitem > a { display: block; margin-top: -10px; padding-top: 10px; position: relative; } .frame-nav .tocnav .tocnav-sublist--2column .tocnav-subitem span, .frame-nav .tocnav .tocnav-sublist--3column .tocnav-subitem span, .frame-nav .tocnav .tocnav-sublist--4column .tocnav-subitem span { bottom: 100%; box-sizing: border-box; font-size: 0.5em; left: 0; line-height: 1.2; padding: 0 25px; position: absolute; width: 100%; } .frame-nav .tocnav .tocnav-sublist--2column .tocnav-subitem > a span, .frame-nav .tocnav .tocnav-sublist--3column .tocnav-subitem > a span, .frame-nav .tocnav .tocnav-sublist--4column .tocnav-subitem > a span { padding: 0; } .frame-nav .tocnav .tocnav-sublist--2column .tocnav-subitem span + br, .frame-nav .tocnav .tocnav-sublist--3column .tocnav-subitem span + br, .frame-nav .tocnav .tocnav-sublist--4column .tocnav-subitem span + br { display: none; } @media only screen and (min-width: 720px) and (max-width: 1039px) { .frame-nav .tocnav { margin-bottom: 50px; } .frame-nav .tocnav .tocnav-entrylist { position: static; } .frame-nav .tocnav .tocnav-entrylist .tocnav-entryitem { text-align: center; } .frame-nav .tocnav .tocnav-mainlist { font-size: 1.4444444444444444444444444444444em; line-height: 2; margin-top: 20px; } .frame-nav .tocnav .tocnav-mainlist .tocnav-mainitem { border: none; display: block; margin: 20px 50px 0; padding-bottom: 0; } .frame-nav .tocnav .tocnav-mainlist .tocnav-mainitem:first-child { margin-top: 0; } .js .frame-nav .tocnav { margin-bottom: 0; } .js .frame-nav .tocnav .tocnav-toggle { display: block; position: absolute; right: 40px; top: -57px; z-index: 1001; } .js .frame-nav .tocnav .tocnav-toggle a { background: transparent url("../image/toggle.png") no-repeat scroll 0 0; background-size: 48px 20px; content: ""; display: block; height: 20px; overflow: hidden; text-indent: -9999em; width: 24px; } .js .frame-nav .tocnav .tocnav-mainlist { background-color: #fff; box-sizing: border-box; height: 100%; left: 100%; margin-top: 0; overflow: auto; padding: 29px; position: fixed; top: 0; width: 100%; z-index: 1000; } } @media only screen and (max-width: 719px) { .frame-nav .tocnav { margin-bottom: 50px; } .frame-nav .tocnav .tocnav-entrylist { font-size: 1em; position: static; } .frame-nav .tocnav .tocnav-entrylist .tocnav-entryitem { margin: 0 30px; text-align: center; } .frame-nav .tocnav .tocnav-mainlist { font-size: 1.5em; line-height: 2; margin-top: 20px; } .frame-nav .tocnav .tocnav-mainlist .tocnav-mainitem { border: none; display: block; margin: 20px 30px 0; padding-bottom: 0; } .frame-nav .tocnav .tocnav-mainlist .tocnav-mainitem:first-child { margin-top: 0; } .js .frame-nav .tocnav { margin-bottom: 0; } .js .frame-nav .tocnav .tocnav-toggle { display: block; position: absolute; right: 20px; top: -38px; z-index: 1001; } .js .frame-nav .tocnav .tocnav-toggle a { background: transparent url("../image/toggle.png") no-repeat scroll 0 0; background-size: 48px 20px; content: ""; display: block; height: 20px; overflow: hidden; text-indent: -9999em; width: 24px; } .js .frame-nav .tocnav .tocnav-content { background-color: #fff; box-sizing: border-box; height: 100%; left: 100%; overflow: auto; padding: 29px 0; position: fixed; top: 0; width: 100%; z-index: 1000; } } .ie8 .frame-nav .tocnav .tocnav-entrylist .tocnav-entryitem a:hover, .ie8 .frame-nav .tocnav .tocnav-entrylist .tocnav-entryitem a:active { border-color: #6685bd; color: #668cba; -ms-filter: ""; } .ie8 .frame-nav .tocnav .tocnav-mainlist .tocnav-mainitem > a:hover, .ie8 .frame-nav .tocnav .tocnav-mainlist .tocnav-mainitem > a:active, .ie8 .frame-nav .tocnav .tocnav-sublist .tocnav-subitem > a:hover, .ie8 .frame-nav .tocnav .tocnav-sublist .tocnav-subitem > a:active { color: #666; -ms-filter: ""; } /* * --------------------------------------------------------------------------------------- * ページ階層 * * .path * .path-item * --------------------------------------------------------------------------------------- */ .frame-path .path { box-sizing: border-box; font-size: 0.61111111111111111111111111111111em; margin: 60px auto 10px; padding: 0 40px; max-width: 1020px; } .frame-path .path:after { clear: both; content: ""; display: table; } .frame-path .path .path-item { background: transparent url("../image/delimiter.png") no-repeat scroll 7px center; background-size: 5px 1px; float: left; padding-left: 19px; } .frame-path .path .path-item:first-child { background-image: none; padding-left: 0; } .frame-path .path .path-item a { color: #000; text-decoration: none; } @media only screen and (min-width: 720px) and (max-width: 1039px) { .frame-path .path { margin-top: 10px; } } @media only screen and (max-width: 719px) { .frame-path .path { font-size: 0.78571428571428571428571428571429em; margin-top: 0; padding: 0 20px; } } .ie8 .frame-path .path .path-item { background-image: url("../image/ie8-delimiter.png"); } .ie8 .frame-path .path .path-item a:hover, .ie8 .frame-path .path .path-item a:active { color: #666; } /* * --------------------------------------------------------------------------------------- * ユーティリティーナビゲーション * * .utilnav * .utilnav-item * --------------------------------------------------------------------------------------- */ .frame-footer .utilnav { box-sizing: border-box; font-size: 0.66666666666666666666666666666667em; margin: 30px auto 0; padding: 0 40px; text-align: center; max-width: 1020px; } .frame-footer .utilnav .utilnav-item { display: inline-block; margin: 0 10px; } .frame-footer .utilnav .utilnav-item a { color: #000; text-decoration: none; } @media only screen and (max-width: 719px) { .frame-footer .utilnav { font-size: 0.78571428571428571428571428571429em; margin: 20px auto; padding: 0 20px; } .frame-footer .utilnav .utilnav-item { margin-top: 10px; } } .ie8 .frame-footer .utilnav .utilnav-item a:hover, .ie8 .frame-footer .utilnav .utilnav-item a:active { color: #666; } /* * --------------------------------------------------------------------------------------- * コピーライト * * .copyright * --------------------------------------------------------------------------------------- */ .frame-footer .copyright { box-sizing: border-box; font-size: 0.55555555555555555555555555555556em; margin: 0 auto 60px; padding: 0 40px; text-align: center; max-width: 1020px; } @media only screen and (max-width: 719px) { .frame-footer .copyright { font-size: 0.64285714285714285714285714285714em; margin: 20px auto 30px; padding: 0 20px; } } /* * --------------------------------------------------------------------------------------- * ページの先頭に戻る * * .rewind * --------------------------------------------------------------------------------------- */ .frame-footer .rewind { bottom: 40px; position: fixed; right: 40px; width: 62px; } .frame-footer .rewind a { display: block; } .sd .frame-footer .rewind { display: none; }