@charset "utf-8"; /* 最終更新日 : 2016.04.22 ▼ CSS記述ルール 1. 基本的にCLASSを使用し、IDは各ブロックの命名に使用する程度に留める 2. 単語と単語はキャメルケースで繋いで一単語にする例）.breadCrumb 例）.pageTop 例）#globalNav 3. アンダースコア（_）で繋がれた単語は「親」と「子」と見なす例）.A_B　←　親要素Aの子要素Bと分かる例）.contact_title　←　親要素[contact]の子要素[title]と分かる 4. ハイフン（-）で繋がれた単語は「基本エレメント」に「特定のスタイル」を指定していると見なす例）.font-red　←　基本エレメント[font]に特定のスタイル[red]を指定例）.table-border　←　基本エレメント[table]に特定のスタイル[border]を指定 ※ レスポンシブ用のサフィックス（接尾辞）はこの規則に当てはまらない例）接尾が-sp　→　スマホ用スタイル例）.font-red-sp　←　[.font-red]のスマホ用スタイル例）接尾が-pc　→　パソコン用スタイル例）.table-border-pc　←　[.table-border]のパソコン用スタイル 5. ダブルハイフン（--）で繋がれた単語は「特定のスタイルを指定された要素」と「その要素が特定の条件で変化する別のスタイル・状態」を指定していると見なし、　　必ず、「特定のスタイルを指定された要素」（基本要素）と一緒に指定するものとする。例）btn--border　←　特定要素[btn]の別スタイル[border] 　　×）　　○）　←　特定要素[btn]も一緒に指定例）table-border--withTopBorder　←　特定要素[table-border]の別スタイル[withTopBorder] 　　×）　　○）　←　特定要素[table-border]も一緒に指定上記[4]と[5]の使い分けについて [4] A-B　⇒　Aは特定のスタイルを持たない。　　　　　　 .A {}は存在しない。 [5] A--B　⇒　Aは特定のスタイルを持つ。　　　　　　 .A {}が必ず存在する。 6. 変更する可能性のあるタグに対して直接スタイルを指定しない ×）#nav ol {}　← olがulに変更になる可能性がある ○）#nav .list {}　olにclass="list"を付与し、そのclassに対してスタイルを指定する ---------------------------------------------------------------------------------------------------- ▼ まず始めに 1. カラー変更以下の初期色をサイトに合わせて変更しよう！ローカルサイト全体を「#xxx」＆「xx,xx,xx」で「検索・置換」してOK！（#付で検索必須！） #333 （51,51,51）　　　⇒ 基本的な文字色 #1a1a1a（26,26,26）　　⇒ 見出しの色 #ccc（204,204,204）　　⇒ ボーダー色 #f2f2f2（242,242,242） ⇒ ボーダー色より薄い背景に使用する色 #f00（255,0,0）　　　　⇒ メインカラー 2. 角丸の値角丸の値を3pxで統一しているので、もっと丸くしたい場合はこのCSS内で「radius」で「検索」し、好きな値に変更しよう。 3. グリッドの余白 .container = 960pxの余白20pxで作ってあるので、 .container = 972pxの余白30pxに変更する場合は、 Templates.dwtののclassを .grid-960 ⇒ .grid-972 に変更しよう。 */ /*================================================================================================================================== reset ※ 基本的に変更しない ==================================================================================================================================*/ /* html5doctor.com Reset v1.6.1 - http://cssreset.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } /*body { line-height: 1; }*/ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } nav ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ins { background-color: #ff9; color: #333; text-decoration: none; } mark { background-color: #ff9; color: #333; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } /*----------------------------------------*---------------------------------------- original ----------------------------------------*----------------------------------------*/ *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { word-wrap: break-word; text-align: center; } audio, canvas, progress, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a:active, a:hover { outline: 0; } b, strong { font-weight: bold; } dfn { font-style: italic; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #ccc; } textarea { overflow: auto; } optgroup { font-weight: bold; } img { max-width: 100%; height: auto; vertical-align: bottom; } table { max-width: 100%; } li { list-style: none; } /*---------------------------------------- clearfix ここだけは必要に応じて足してください。 ----------------------------------------*/ .clearfix:after, .container:after, .row:after, .ebox:after, .card_block:after { content: " "; display: block; clear: both; } /*================================================================================================================================== = STYLE ==BasicStyle== ==Badge== ==Balloon== ==Btn== ==BtnGroup== ==Card== ==CardGroup== ==CardGroups== ==Color== ==Ebox== ==Grid== ==Headline== ==Image== ==ImageReplacement== ==List== ==Margin== ==Padding= ==Pagination== ==Slick== ==Table== ==Tab== ==Thumbnail== ==Visible== ==Hidden== ==Javascript== ※ ==名前== で検索するとその項目まで素早くジャンプできます。 ==================================================================================================================================*/ /*----------------------------------------*---------------------------------------- ==BasicStyle== ----------------------------------------*----------------------------------------*/ address { font-style: normal; line-height: inherit; } blockquote { border: 1px solid #ccc; padding: 20px; position: relative; margin: 0 0 20px; z-index: 0; } blockquote:before, blockquote:after { color: #f2f2f2; font-family: "FontAwesome"; font-size: 4rem; line-height: 1; position: absolute; z-index: -1; } blockquote:before { content: "\f10d"; top: 5px; left: 10px; } blockquote:after { content: "\f10e"; bottom: 5px; right: 10px; } code { background: #e6ee9c; border-radius: 3px; padding: 2px 4px; font-size: 90%; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } figure { margin: 0 0 20px; } figcaption { text-align: center; margin-top: 5px; font-size: 1.3rem; } mark { background-color: #ff3; } pre { display: block; border: 1px solid #ccc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; overflow: auto; padding: 20px; text-align: left; } pre code { padding: 0; font-size: inherit; color: inherit; background-color: transparent; border-radius: 0; } small { font-weight: normal; font-size: 1.4rem; } sub, sup { vertical-align: baseline; font-size: 1.1rem; line-height: 0; position: relative; } sub { bottom: -0.25em; } sup { top: -0.5em; } /*---------------------------------------- text ----------------------------------------*/ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media screen and (max-width: 767px) { .text-left-sp { text-align: left; } .text-right-sp { text-align: right; } .text-center-sp { text-align: center; } } @media print, screen and (min-width: 768px) { .text-nowrap { white-space: nowrap; } .text-left-pc { text-align: left; } .text-right-pc { text-align: right; } .text-center-pc { text-align: center; } } /*---------------------------------------- font ----------------------------------------*/ .font-xs { font-size: 1.1rem; } .font-s { font-size: 1.3rem; } .font-normal { font-size: 1.5rem; } .font-m { font-size: 2rem; } .font-l { font-size: 2.5rem; } .font-xl { font-size: 3rem; } /* weight */ /* フォント自体がその太さに対応していない場合アリ */ .font-400 { font-weight: 400; } /* レギュラー */ .font-600 { font-weight: 600; } /* セミボールド */ .font-800 { font-weight: 800; } /* 太字 */ @media screen and (max-width: 767px) { .font-xs-sp { font-size: 1.1rem; } .font-s-sp { font-size: 1.3rem; } .font-normal-sp { font-size: 1.5rem; } .font-m-sp { font-size: 2rem; } .font-l-sp { font-size: 2.5rem; } .font-xl-sp { font-size: 3rem; } .font-400-sp { font-weight: 400; } /* レギュラー */ .font-600-sp { font-weight: 600; } /* セミボールド */ .font-800-sp { font-weight: 800; } /* 太字 */ } @media print, screen and (min-width: 768px) { .font-xs-pc { font-size: 1.1rem; } .font-s-pc { font-size: 1.3rem; } .font-normal-pc { font-size: 1.5rem; } .font-m-pc { font-size: 2rem; } .font-l-pc { font-size: 2.5rem; } .font-xl-pc { font-size: 3rem; } .font-400-pc { font-weight: 400; } /* レギュラー */ .font-600-pc { font-weight: 600; } /* セミボールド */ .font-800-pc { font-weight: 800; } /* 太字 */ } /*---------------------------------------- webfont ----------------------------------------*/ .webfont-nsj { font-family: 'Noto Sans Japanese', sans-serif; } @media screen and (max-width: 767px) { .webfont-nsj-sp { font-family: 'Noto Sans Japanese', sans-serif; } } @media print, screen and (min-width: 768px) { .webfont-nsj-pc { font-family: 'Noto Sans Japanese', sans-serif; } } /*---------------------------------------- a ----------------------------------------*/ /* a { color: #333; } a:hover, a:active { color: #f00; } */ /* unstyled */ a.a-unstyled { text-decoration: none; } a.a-unstyled:hover, a.a-unstyled:active { text-decoration: underline; } /* block */ a.a-block { text-decoration: none; color: #333; transition: background-color .2s linear; } a.a-block:hover, a.a-block:active { background-color: #f2f2f2; } /*---------------------------------------- hr ----------------------------------------*/ hr { height: 0; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; border: 0; border-top: 1px solid #ccc; } /* diamond */ .hr-diamond { position: relative; height: 1px; background: #ccc; width: 60%; margin-left: auto; margin-right: auto; } .hr-diamond span { width: 0; height: 0; border: 6px solid transparent; border-bottom-color: #333; position: absolute; top: -11px; left: 50%; margin-left: -6px; } .hr-diamond span:after { content: ''; position: absolute; left: 50%; top: 5px; width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-top-color: #333; } /* circle */ .hr-circle { border-width: 0; height: 1px; width: 60%; margin-left: auto; margin-right: auto; background-color: #ccc; position: relative; text-align: center; } .hr-circle:before { content: ''; width: 9px; height: 9px; background-color: #333; position: absolute; top: -4px; margin-left: -4px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-radius: 50%; } /*----------------------------------------*---------------------------------------- ==Badge== ----------------------------------------*----------------------------------------*/ .badge { font-size: 1.3rem; display: inline-block; vertical-align: middle; padding: 1px 10px; top: -0.1em; position: relative; background: #f00; border-radius: 3px; } .ebox h1 .badge, .ebox h2 .badge, .ebox h3 .badge, .ebox h4 .badge, .ebox h5 .badge, .ebox h6 .badge { line-height: normal; font-size: 1.3rem; font-weight: normal; } a.badge, a.badge:hover { color: #fff !important; text-decoration: none; } .badge--round { border-radius: 100px; } .badge--block { display: block; text-align: center; } .badge--before { margin-right: 10px; } .badge--after { margin-left: 10px; } @media screen and (max-width: 767px) { .badge--block-sp { display: block; text-align: center; } } @media print, screen and (min-width: 768px) { .badge--block-pc { display: block; text-align: center; } } /*----------------------------------------*---------------------------------------- ==Balloon== ----------------------------------------*----------------------------------------*/ .balloon { position: relative; } .balloon:after { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; } .balloon--t:after { top: -15px; left: 50%; margin-left: -10px; border-width: 0 10px 15px 10px; border-color: transparent transparent #ccc transparent; } .balloon--b:after { bottom: -15px; left: 50%; margin-left: -10px; border-width: 15px 10px 0 10px; border-color: #ccc transparent transparent transparent; } .balloon--r:after { right: -15px; top: 50%; margin-top: -10px; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent #ccc; } .balloon--l:after { left: -15px; top: 50%; margin-top: -10px; border-width: 10px 15px 10px 0; border-color: transparent #ccc transparent transparent; } .balloon--t.balloon--25:after, .balloon--b.balloon--25:after { left: 25%; } .balloon--t.balloon--75:after, .balloon--b.balloon--75:after { left: 75%; } .balloon--r.balloon--25:after, .balloon--l.balloon--25:after { top: 25%; } .balloon--r.balloon--75:after, .balloon--l.balloon--75:after { top: 75%; } /*----------------------------------------*---------------------------------------- ==Bracket== ----------------------------------------*----------------------------------------*/ .bracket { position: relative; } .bracket:before { content: ""; position: absolute; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px; top: 0; bottom: 0; left: 0; } .bracket:after { content: ""; position: absolute; border-right: 1px solid #ccc; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px; top: 0; bottom: 0; right: 0; } @media screen and (max-width: 767px) { .bracket { padding: 20px; } } @media print, screen and (min-width: 768px) { .bracket { padding: 20px 40px; } } /*----------------------------------------*---------------------------------------- ==Btn== ----------------------------------------*----------------------------------------*/ .btn { border: none; cursor: pointer; display: inline-block; text-decoration: none; vertical-align: baseline; position: relative; background: rgba(255,0,0,1); color: #fff; padding: 10px 40px 10px 15px; transition: all .2s linear; } .btn:hover, .btn:active { text-decoration: none; background: rgba(255,0,0,.75); color: #fff; } .btn:before { position: absolute; top: 50%; right: 15px; margin-top: -.5em; font-family: "FontAwesome"; content: "\f105"; line-height: 1; } /*---------------------------------------- border ----------------------------------------*/ .btn--border { background: none; color: #333; border: 1px solid #333; } .btn--border:hover, .btn--border:active { border-color: #f00; color: #f00; background: none; } @media screen and (max-width: 767px) { .btn--border-sp { background: none; color: #333; border: 1px solid #333; } .btn--border-sp:hover, .btn--border-sp:active { border-color: #f00; color: #f00; background: none; } } @media print, screen and (min-width: 768px) { .btn--border-pc { background: none; color: #333; border: 1px solid #333; } .btn--border-pc:hover, .btn--border-pc:active { border-color: #f00; color: #f00; background: none; } } /*---------------------------------------- radius ----------------------------------------*/ .btn--radius { border-radius: 3px; } /*---------------------------------------- round ----------------------------------------*/ .btn--round { border-radius: 100px; } /*---------------------------------------- noIcon ----------------------------------------*/ .btn--noIcon { text-align: center; padding: 10px 40px; } .btn--noIcon:before { content: "" !important; } @media screen and (max-width: 767px) { .btn--noIcon-sp { text-align: center; padding: 10px 40px; } .btn--noIcon-sp:before { content: "" !important; } } @media print, screen and (min-width: 768px) { .btn--noIcon-pc { text-align: center; padding: 10px 40px; } .btn--noIcon-pc:before { content: "" !important; } } /*---------------------------------------- leftIcon ----------------------------------------*/ .btn--leftIcon { padding: 10px 20px 10px 40px; } .btn--leftIcon:before { right: auto; left: 15px; } @media screen and (max-width: 767px) { .btn--leftIcon-sp { padding: 10px 20px 10px 40px; } .btn--leftIcon-sp:before { right: auto; left: 15px; } } @media print, screen and (min-width: 768px) { .btn--leftIcon-pc { padding: 10px 20px 10px 40px; } .btn--leftIcon-pc:before { right: auto; left: 15px; } } /*---------------------------------------- ir ----------------------------------------*/ @media print, screen and (min-width: 768px) { .btn.ir-pc { border: none !important; padding: 0 !important; border-radius: 0 !important; text-align: left !important; } } /*---------------------------------------- thin ----------------------------------------*/ .btn--thin { } .btn--thin, .btnGroup--thin .btn { padding-top: 5px; padding-bottom: 5px; } @media screen and (max-width: 767px) { .btn--thin-sp { } .btn--thin-sp, .btnGroup--thin-sp .btn { padding-top: 5px; padding-bottom: 5px; } } @media print, screen and (min-width: 768px) { .btn--thin-pc { } .btn--thin-pc, .btnGroup--thin-pc .btn { padding-top: 5px; padding-bottom: 5px; } } /*---------------------------------------- thick ----------------------------------------*/ .btn--thick { } .btn--thick, .btnGroup--thick .btn { padding-top: 20px; padding-bottom: 20px; } @media screen and (max-width: 767px) { .btn--thick-sp { } .btn--thick-sp, .btnGroup--thick-sp .btn { padding-top: 20px; padding-bottom: 20px; } } @media print, screen and (min-width: 768px) { .btn--thick-pc { } .btn--thick-pc, .btnGroup--thick-pc .btn { padding-top: 20px; padding-bottom: 20px; } } /*---------------------------------------- block ----------------------------------------*/ .btn--block { display: block; width: 100%; } @media screen and (max-width: 767px) { .btn--block-sp { display: block; width: 100%; } } @media print, screen and (min-width: 768px) { .btn--block-pc { display: block; width: 100%; } } /*---------------------------------------- Social ----------------------------------------*/ .btn--social { color: #fff; width: 50px; height: 50px; line-height: 50px; text-align: center; padding: 0; font-size: 2rem; } .btn--social + .btn--social { margin-left: 10px; } .btn--social:before { content: ""; } .btn--twitter { background: rgba(85,172,238,1);; } .btn--twitter:hover { background: rgba(85,172,238,.75);; } .btn--facebook { background: rgba(58,87,149,1);; } .btn--facebook:hover { background: rgba(58,87,149,.75);; } .btn--googlePlus { background: rgba(221,.75,57,1);; } .btn--googlePlus:hover { background: rgba(221,.75,57,.75);; } .btn--hatena { background: rgba(16,156,219,1);; } .btn--hatena:hover { background: rgba(16,156,219,.75);; } .btn--instagram { background: rgba(205,72,107,1); } .btn--instagram:hover { background: rgba(205,72,107,.75); } /* hatena */ .fa-hatena:before { content: "B!"; font-family: Verdana; font-weight: bold; } /*----------------------------------------*---------------------------------------- ==BtnGroup== ----------------------------------------*----------------------------------------*/ .btnGroup { position: relative; vertical-align: middle; letter-spacing: -.4em; } .btnGroup > .btn { position: relative; display: inline-block; letter-spacing: normal; } .btnGroup .btn + .btn { margin-left: 1px; } .btnGroup .btn--border + .btn--border { margin-left: -1px; } /* space */ .btnGroup--space .btn + .btn { margin-left: 20px; } @media screen and (max-width: 767px) { .btnGroup--space-sp .btn + .btn { margin-left: 20px; } } @media print, screen and (min-width: 768px) { .btnGroup--space-pc .btn + .btn { margin-left: 20px; } } /* justified */ .btnGroup--justified { display: table; width: 100%; table-layout: fixed; } .btnGroup--justified > .btn { display: table-cell; float: none; } .btnGroup--justified > .btn + .btn { border-left: 1px solid #fff; } .btnGroup--justified > .btn--border + .btn--border { border-left: none; } @media screen and (max-width: 767px) { .btnGroup--justified-sp { display: table; width: 100%; table-layout: fixed; } .btnGroup--justified-sp > .btn { display: table-cell; float: none; } .btnGroup--justified-sp > .btn + .btn { border-left: 1px solid #fff; } .btnGroup--justified-sp > .btn--border + .btn--border { border-left: none; } } @media print, screen and (min-width: 768px) { .btnGroup--justified-pc { display: table; width: 100%; table-layout: fixed; } .btnGroup--justified-pc > .btn { display: table-cell; float: none; } .btnGroup--justified-pc > .btn + .btn { border-left: 1px solid #fff; } .btnGroup--justified-pc > .btn--border + .btn--border { border-left: none; } } /* radius */ .btnGroup--radius > .btn:first-child { border-radius: 3px 0 0 3px; } .btnGroup--radius > .btn:last-child { border-radius: 0 3px 3px 0; } /* round */ .btnGroup--round > .btn:first-child { border-radius: 100px 0 0 100px; } .btnGroup--round > .btn:last-child { border-radius: 0 100px 100px 0; } /* vertical */ .btnGroup--vertical .btn { display: block; } .btnGroup--vertical .btn + .btn { margin-top: 1px; margin-left: 0; } .btnGroup--vertical .btn--border + .btn--border { margin-left: 0; margin-top: -1px; } .btnGroup--vertical.btnGroup--radius > .btn:first-child { border-radius: 3px 3px 0 0; } .btnGroup--vertical.btnGroup--radius > .btn:last-child { border-radius: 0 0 3px 3px; } .btnGroup--vertical.btnGroup--round > .btn:first-child { border-radius: 100px 100px 0 0; } .btnGroup--vertical.btnGroup--round > .btn:last-child { border-radius: 0 0 100px 100px; } @media screen and (max-width: 767px) { .btnGroup--vertical-sp .btn { display: block; } .btnGroup--vertical-sp .btn + .btn { margin-top: 1px; margin-left: 0; } .btnGroup--vertical-sp .btn--border + .btn--border { margin-left: 0; margin-top: -1px; } .btnGroup--vertical-sp.btnGroup--radius > .btn:first-child { border-radius: 3px 3px 0 0; } .btnGroup--vertical-sp.btnGroup--radius > .btn:last-child { border-radius: 0 0 3px 3px; } .btnGroup--vertical-sp.btnGroup--round > .btn:first-child { border-radius: 100px 100px 0 0; } .btnGroup--vertical-sp.btnGroup--round > .btn:last-child { border-radius: 0 0 100px 100px; } } @media print, screen and (min-width: 768px) { .btnGroup--vertical-pc .btn { display: block; } .btnGroup--vertical-pc .btn + .btn { margin-top: 1px; margin-left: 0; } .btnGroup--vertical-pc .btn--border + .btn--border { margin-left: 0; margin-top: -1px; } .btnGroup--vertical-pc.btnGroup--radius > .btn:first-child { border-radius: 3px 3px 0 0; } .btnGroup--vertical-pc.btnGroup--radius > .btn:last-child { border-radius: 0 0 3px 3px; } .btnGroup--vertical-pc.btnGroup--round > .btn:first-child { border-radius: 100px 100px 0 0; } .btnGroup--vertical-pc.btnGroup--round > .btn:last-child { border-radius: 0 0 100px 100px; } } /*----------------------------------------*---------------------------------------- ==Card== ----------------------------------------*----------------------------------------*/ .card { position: relative; border: 1px solid #ccc; overflow: visible !important; } .card_block { padding: 20px; } .card_block > *:last-child { margin-bottom: 0; } a.card { display: block; color: #333; transition: border-color .2s linear; } a.card, a.card * { text-decoration: none; } a.card:hover { border-color: #333; } /*---------------------------------------- bg ----------------------------------------*/ .card--bg { background: #fff; border: none; } .card--bg:not([class*="bg-"]) { box-shadow: 0 0 5px rgba(0,0,0,.15); } .card--bg .card_header, .card--bg .card_footer { background: rgba(0,0,0,.1); border: none; } /*---------------------------------------- text-center ----------------------------------------*/ .card.text-center *, .cardGroup.text-center *, .cardGroups.text-center * { text-align: center; } @media screen and (max-width: 767px) { .card.text-center-sp *, .cardGroup.text-center-sp *, .cardGroup-sp.text-center-sp *, .cardGroups.text-center-sp *, .cardGroups-sp.text-center-sp * { text-align: center; } } @media print, screen and (min-width: 768px) { .card.text-center-pc *, .cardGroup.text-center-pc *, .cardGroup-pc.text-center-pc *, .cardGroups.text-center-pc *, .cardGroups-pc.text-center-pc * { text-align: center; } } /*---------------------------------------- header ----------------------------------------*/ .card_header { padding: 5px 15px; background-color: #f2f2f2; border-bottom: 1px solid #ccc; } .card .card_header:not(:first-child) { border-top: 1px solid #ccc; } /*---------------------------------------- footer ----------------------------------------*/ .card_footer { padding: 5px 15px; background-color: #f2f2f2; border-top: 1px solid #ccc; } /*---------------------------------------- icon アイコン小のサイズを変更する場合に修正する箇所 = ★ アイコン大のサイズを変更する場合に修正する箇所 = ☆ ----------------------------------------*/ /* topIcon */ .card--topIcon { text-align: center; } .card--topIcon .card_block { padding-top: 40px /*★*/; } .card--topIcon.icon-l .card_block { padding-top: 60px /*☆*/; } /* leftIcon */ .card--leftIcon { } .card--leftIcon .card_block { padding-left: 70px /*★*/; } .card--leftIcon.icon-l .card_block { padding-left: 90px /*☆*/; min-height: 80px /*☆*/; } /* card_icon */ .card_icon { width: 40px /*★*/; height: 40px /*★*/; line-height: 40px /*★*/; text-align: center; color: #fff; background: #f00; position: absolute; display: block; border-radius: 50%; z-index: 100; } .card--topIcon .card_icon { left: 50%; top: -10px; margin-left: -20px /*★*/; } .card--leftIcon .card_icon { left: 10px; top: 50%; margin-top: -20px /*★*/; } .card--topIcon.icon-l .card_icon, .card--leftIcon.icon-l .card_icon { width: 60px /*☆*/; height: 60px /*☆*/; line-height: 60px /*☆*/; font-size: 2.3rem /*☆*/; } .card--topIcon.icon-l .card_icon { margin-left: -30px /*☆*/; } .card--leftIcon.icon-l .card_icon { margin-top: -30px /*☆*/; } /*---------------------------------------- img ----------------------------------------*/ .card_img { } /*---------------------------------------- dogear ----------------------------------------*/ .card--dogear { position : relative; } .card--dogear .card_block:after { content : ""; display : block; position : absolute; bottom : -1px; right : -1px; width : 0; height : 0; border-width : 10px; border-style : solid; border-color : rgba(0,0,0,.15) #fff #fff rgba(0,0,0,.15); } .card--bg.card--dogear .card_block:after { bottom : 0; right : 0; } /*----------------------------------------*---------------------------------------- ==CardGroup== ----------------------------------------*----------------------------------------*/ .cardGroup { display: table; width: 100%; table-layout: fixed; } .cardGroup > .card { display: table-cell; vertical-align: top; } .cardGroup > .card + .card { margin-left: 0; border-left: none; overflow: hidden; } @media screen and (max-width: 767px) { .cardGroup-sp { display: table; width: 100%; table-layout: fixed; } .cardGroup-sp > .card { display: table-cell; vertical-align: top; } .cardGroup-sp > .card + .card { margin-left: 0; border-left: none; overflow: hidden; } } @media print, screen and (min-width: 768px) { .cardGroup-pc { display: table; width: 100%; table-layout: fixed; } .cardGroup-pc > .card { display: table-cell; vertical-align: top; } .cardGroup-pc > .card + .card { margin-left: 0; border-left: none; overflow: hidden; } } /*----------------------------------------*---------------------------------------- ==CardGroups== ----------------------------------------*----------------------------------------*/ .cardGroups .cardGroup + .cardGroup { margin-top: -21px; } @media screen and (max-width: 767px) { .cardGroups .cardGroup-sp + .cardGroup-sp, .cardGroups-sp .cardGroup + .cardGroup { margin-top: -21px; } } @media print, screen and (min-width: 768px) { .cardGroups .cardGroup-pc + .cardGroup-pc, .cardGroups-pc .cardGroup + .cardGroup { margin-top: -21px; } } /*----------------------------------------*---------------------------------------- ==Card ※option == 角丸を使わない場合は一括コメントアウト！ ----------------------------------------*----------------------------------------*/ .card { border-radius: 3px; } .card .card_header:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } .card .card_footer:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .card .card_img--top:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; } .card .card_img--bottom:last-child { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } .cardGroup > .card:not(:first-child), .cardGroups > .cardGroup:not(:first-child) > .card, .cardGroup > .card:not(:first-child) > .card_header, .cardGroups > .cardGroup:not(:first-child) > .card > .card_header, .cardGroup > .card:not(:first-child) > .card_img--top, .cardGroups > .cardGroup:not(:first-child) > .card > .card_img--top { border-top-left-radius: 0; } .cardGroup > .card:not(:last-child), .cardGroups > .cardGroup:not(:first-child) > .card, .cardGroup > .card:not(:last-child) > .card_header, .cardGroups > .cardGroup:not(:first-child) > .card > .card_header, .cardGroup > .card:not(:last-child) > .card_img--top, .cardGroups > .cardGroup:not(:first-child) > .card > .card_img--top { border-top-right-radius: 0; } .cardGroup > .card:not(:first-child), .cardGroups > .cardGroup:not(:last-child) > .card, .cardGroup > .card:not(:first-child) > .card_footer, .cardGroups > .cardGroup:not(:last-child) > .card > .card_footer, .cardGroup > .card:not(:first-child) > .card_img--bottom, .cardGroups > .cardGroup:not(:last-child) > .card > .card_img--bottom { border-bottom-left-radius: 0; } .cardGroup > .card:not(:last-child), .cardGroups > .cardGroup:not(:last-child) > .card, .cardGroup > .card:not(:last-child) > .card_footer, .cardGroups > .cardGroup:not(:last-child) > .card > .card_footer, .cardGroup > .card:not(:last-child) > .card_img--bottom, .cardGroups > .cardGroup:not(:last-child) > .card > .card_img--bottom { border-bottom-right-radius: 0; } @media screen and (max-width: 767px) { .cardGroup-sp > .card:not(:first-child), .cardGroups-sp > .cardGroup:not(:first-child) > .card, .cardGroup-sp > .card:not(:first-child) > .card_header, .cardGroups-sp > .cardGroup:not(:first-child) > .card > .card_header, .cardGroup-sp > .card:not(:first-child) > .card_img--top, .cardGroups-sp > .cardGroup:not(:first-child) > .card > .card_img--top { border-top-left-radius: 0; } .cardGroup-sp > .card:not(:last-child), .cardGroups-sp > .cardGroup:not(:first-child) > .card, .cardGroup-sp > .card:not(:last-child) > .card_header, .cardGroups-sp > .cardGroup:not(:first-child) > .card > .card_header, .cardGroup-sp > .card:not(:last-child) > .card_img--top, .cardGroups-sp > .cardGroup:not(:first-child) > .card > .card_img--top { border-top-right-radius: 0; } .cardGroup-sp > .card:not(:first-child), .cardGroups-sp > .cardGroup:not(:last-child) > .card, .cardGroup-sp > .card:not(:first-child) > .card_footer, .cardGroups-sp > .cardGroup:not(:last-child) > .card > .card_footer, .cardGroup-sp > .card:not(:first-child) > .card_img--bottom, .cardGroups-sp > .cardGroup:not(:last-child) > .card > .card_img--bottom { border-bottom-left-radius: 0; } .cardGroup-sp > .card:not(:last-child), .cardGroups-sp > .cardGroup:not(:last-child) > .card, .cardGroup-sp > .card:not(:last-child) > .card_footer, .cardGroups-sp > .cardGroup:not(:last-child) > .card > .card_footer, .cardGroup-sp > .card:not(:last-child) > .card_img--bottom, .cardGroups-sp > .cardGroup:not(:last-child) > .card > .card_img--bottom { border-bottom-right-radius: 0; } } @media print, screen and (min-width: 768px) { .cardGroup-pc > .card:not(:first-child), .cardGroups-pc > .cardGroup:not(:first-child) > .card, .cardGroup-pc > .card:not(:first-child) > .card_header, .cardGroups-pc > .cardGroup:not(:first-child) > .card > .card_header, .cardGroup-pc > .card:not(:first-child) > .card_img--top, .cardGroups-pc > .cardGroup:not(:first-child) > .card > .card_img--top { border-top-left-radius: 0; } .cardGroup-pc > .card:not(:last-child), .cardGroups-pc > .cardGroup:not(:first-child) > .card, .cardGroup-pc > .card:not(:last-child) > .card_header, .cardGroups-pc > .cardGroup:not(:first-child) > .card > .card_header, .cardGroup-pc > .card:not(:last-child) > .card_img--top, .cardGroups-pc > .cardGroup:not(:first-child) > .card > .card_img--top { border-top-right-radius: 0; } .cardGroup-pc > .card:not(:first-child), .cardGroups-pc > .cardGroup:not(:last-child) > .card, .cardGroup-pc > .card:not(:first-child) > .card_footer, .cardGroups-pc > .cardGroup:not(:last-child) > .card > .card_footer, .cardGroup-pc > .card:not(:first-child) > .card_img--bottom, .cardGroups-pc > .cardGroup:not(:last-child) > .card > .card_img--bottom { border-bottom-left-radius: 0; } .cardGroup-pc > .card:not(:last-child), .cardGroups-pc > .cardGroup:not(:last-child) > .card, .cardGroup-pc > .card:not(:last-child) > .card_footer, .cardGroups-pc > .cardGroup:not(:last-child) > .card > .card_footer, .cardGroup-pc > .card:not(:last-child) > .card_img--bottom, .cardGroups-pc > .cardGroup:not(:last-child) > .card > .card_img--bottom { border-bottom-right-radius: 0; } } /*----------------------------------------*---------------------------------------- ==Color== 色は適当に変えよう ----------------------------------------*----------------------------------------*/ a[class^="bg-"], a[class*=" bg-"] { transition: background-color .2s linear; text-decoration: none; } a[class^="bg-"]:not(.btn):hover, a[class*=" bg-"]:not(.btn):hover { color: #333; } /*---------------------------------------- main ----------------------------------------*/ /* primary */ .font-primary { color: #f00 !important; } .bg-primary { background-color: rgba(255,0,0,1) !important; } a.bg-primary:hover { background-color: rgba(255,0,0,.75) !important; } .balloon--t.bg-primary:after { border-bottom-color: #f00 !important; } .balloon--r.bg-primary:after { border-left-color: #f00 !important; } .balloon--b.bg-primary:after { border-top-color: #f00 !important; } .balloon--l.bg-primary:after { border-right-color: #f00 !important; } .border-primary { border-color: rgba(255,0,0,1) !important; } a.border-primary:hover { border-color: rgba(255,0,0,.75) !important; } .font-primary-l1 { color: #f33 !important; } .bg-primary-l1 { background-color: rgba(255,51,51,1) !important; } a.bg-primary-l1:hover { background-color: rgba(255,51,51,.75) !important; } .balloon--t.bg-primary-l1:after { border-bottom-color: #f33 !important; } .balloon--r.bg-primary-l1:after { border-left-color: #f33 !important; } .balloon--b.bg-primary-l1:after { border-top-color: #f33 !important; } .balloon--l.bg-primary-l1:after { border-right-color: #f33 !important; } .border-primary-l1 { border-color: rgba(255,51,51,1) !important; } a.border-primary-l1:hover { border-color: rgba(255,51,51,.75) !important; } .font-primary-l2 { color: #f66 !important; } .bg-primary-l2 { background-color: rgba(255,102,102,1) !important; } a.bg-primary-l2:hover { background-color: rgba(255,102,102,.75) !important; } .balloon--t.bg-primary-l2:after { border-bottom-color: #f66 !important; } .balloon--r.bg-primary-l2:after { border-left-color: #f66 !important; } .balloon--b.bg-primary-l2:after { border-top-color: #f66 !important; } .balloon--l.bg-primary-l2:after { border-right-color: #f66 !important; } .border-primary-l2 { border-color: rgba(255,102,102,1) !important; } a.border-primary-l2:hover { border-color: rgba(255,102,102,.75) !important; } .font-primary-d1 { color: #c00 !important; } .bg-primary-d1 { background-color: rgba(204,0,0,1) !important; } a.bg-primary-d1:hover { background-color: rgba(204,0,0,.75) !important; } .balloon--t.bg-primary-d1:after { border-bottom-color: #c00 !important; } .balloon--r.bg-primary-d1:after { border-left-color: #c00 !important; } .balloon--b.bg-primary-d1:after { border-top-color: #c00 !important; } .balloon--l.bg-primary-d1:after { border-right-color: #c00 !important; } .border-primary-d1 { border-color: rgba(204,0,0,1) !important; } a.border-primary-d1:hover { border-color: rgba(204,0,0,.75) !important; } .font-primary-d2 { color: #900 !important; } .bg-primary-d2 { background-color: rgba(153,0,0,1) !important; } a.bg-primary-d2:hover { background-color: rgba(153,0,0,.75) !important; } .balloon--t.bg-primary-d2:after { border-bottom-color: #900 !important; } .balloon--r.bg-primary-d2:after { border-left-color: #900 !important; } .balloon--b.bg-primary-d2:after { border-top-color: #900 !important; } .balloon--l.bg-primary-d2:after { border-right-color: #900 !important; } .border-primary-d2 { border-color: rgba(153,0,0,1) !important; } a.border-primary-d2:hover { border-color: rgba(153,0,0,.75) !important; } /* sub1 */ .font-sub1 { color: #0f0 !important; } .bg-sub1 { background-color: rgba(0,255,0,1) !important; } a.bg-sub1:hover { background-color: rgba(0,255,0,.75) !important; } .balloon--t.bg-sub1:after { border-bottom-color: #0f0 !important; } .balloon--r.bg-sub1:after { border-left-color: #0f0 !important; } .balloon--b.bg-sub1:after { border-top-color: #0f0 !important; } .balloon--l.bg-sub1:after { border-right-color: #0f0 !important; } .border-sub1 { border-color: rgba(0,255,0,1) !important; } a.border-sub1:hover { border-color: rgba(0,255,0,.75) !important; } .font-sub1-l1 { color: #3f3 !important; } .bg-sub1-l1 { background-color: rgba(51,255,51,1) !important; } a.bg-sub1-l1:hover { background-color: rgba(51,255,51,.75) !important; } .balloon--t.bg-sub1-l1:after { border-bottom-color: #3f3 !important; } .balloon--r.bg-sub1-l1:after { border-left-color: #3f3 !important; } .balloon--b.bg-sub1-l1:after { border-top-color: #3f3 !important; } .balloon--l.bg-sub1-l1:after { border-right-color: #3f3 !important; } .border-sub1-l1 { border-color: rgba(51,255,51,1) !important; } a.border-sub1-l1:hover { border-color: rgba(51,255,51,.75) !important; } .font-sub1-l2 { color: #6f6 !important; } .bg-sub1-l2 { background-color: rgba(102,255,102,1) !important; } a.bg-sub1-l2:hover { background-color: rgba(102,255,102,.75) !important; } .balloon--t.bg-sub1-l2:after { border-bottom-color: #6f6 !important; } .balloon--r.bg-sub1-l2:after { border-left-color: #6f6 !important; } .balloon--b.bg-sub1-l2:after { border-top-color: #6f6 !important; } .balloon--l.bg-sub1-l2:after { border-right-color: #6f6 !important; } .border-sub1-l2 { border-color: rgba(102,255,102,1) !important; } a.border-sub1-l2:hover { border-color: rgba(102,255,102,.75) !important; } .font-sub1-d1 { color: #0c0 !important; } .bg-sub1-d1 { background-color: rgba(0,204,0,1) !important; } a.bg-sub1-d1:hover { background-color: rgba(0,204,0,.75) !important; } .balloon--t.bg-sub1-d1:after { border-bottom-color: #0c0 !important; } .balloon--r.bg-sub1-d1:after { border-left-color: #0c0 !important; } .balloon--b.bg-sub1-d1:after { border-top-color: #0c0 !important; } .balloon--l.bg-sub1-d1:after { border-right-color: #0c0 !important; } .border-sub1-d1 { border-color: rgba(0,204,0,1) !important; } a.border-sub1-d1:hover { border-color: rgba(0,204,0,.75) !important; } .font-sub1-d2 { color: #090 !important; } .bg-sub1-d2 { background-color: rgba(0,153,0,1) !important; } a.bg-sub1-d2:hover { background-color: rgba(0,153,0,.75) !important; } .balloon--t.bg-sub1-d2:after { border-bottom-color: #090 !important; } .balloon--r.bg-sub1-d2:after { border-left-color: #090 !important; } .balloon--b.bg-sub1-d2:after { border-top-color: #090 !important; } .balloon--l.bg-sub1-d2:after { border-right-color: #090 !important; } .border-sub1-d2 { border-color: rgba(0,153,0,1) !important; } a.border-sub1-d2:hover { border-color: rgba(0,153,0,.75) !important; } /* sub2 */ .font-sub2 { color: #00f !important; } .bg-sub2 { background-color: rgba(0,0,255,1) !important; } a.bg-sub2:hover { background-color: rgba(0,0,255,.75) !important; } .balloon--t.bg-sub2:after { border-bottom-color: #00f !important; } .balloon--r.bg-sub2:after { border-left-color: #00f !important; } .balloon--b.bg-sub2:after { border-top-color: #00f !important; } .balloon--l.bg-sub2:after { border-right-color: #00f !important; } .border-sub2 { border-color: rgba(0,0,255,1) !important; } a.border-sub2:hover { border-color: rgba(0,0,255,.75) !important; } .font-sub2-l1 { color: #33f !important; } .bg-sub2-l1 { background-color: rgba(51,51,255,1) !important; } a.bg-sub2-l1:hover { background-color: rgba(51,51,255,.75) !important; } .balloon--t.bg-sub2-l1:after { border-bottom-color: #33f !important; } .balloon--r.bg-sub2-l1:after { border-left-color: #33f !important; } .balloon--b.bg-sub2-l1:after { border-top-color: #33f !important; } .balloon--l.bg-sub2-l1:after { border-right-color: #33f !important; } .border-sub2-l1 { border-color: rgba(51,51,255,1) !important; } a.border-sub2-l1:hover { border-color: rgba(51,51,255,.75) !important; } .font-sub2-l2 { color: #66f !important; } .bg-sub2-l2 { background-color: rgba(102,102,255,1) !important; } a.bg-sub2-l2:hover { background-color: rgba(102,102,255,.75) !important; } .balloon--t.bg-sub2-l2:after { border-bottom-color: #66f !important; } .balloon--r.bg-sub2-l2:after { border-left-color: #66f !important; } .balloon--b.bg-sub2-l2:after { border-top-color: #66f !important; } .balloon--l.bg-sub2-l2:after { border-right-color: #66f !important; } .border-sub2-l2 { border-color: rgba(102,102,255,1) !important; } a.border-sub2-l2:hover { border-color: rgba(102,102,255,.75) !important; } .font-sub2-d1 { color: #00c !important; } .bg-sub2-d1 { background-color: rgba(0,0,204,1) !important; } a.bg-sub2-d1:hover { background-color: rgba(0,0,204,.75) !important; } .balloon--t.bg-sub2-d1:after { border-bottom-color: #00c !important; } .balloon--r.bg-sub2-d1:after { border-left-color: #00c !important; } .balloon--b.bg-sub2-d1:after { border-top-color: #00c !important; } .balloon--l.bg-sub2-d1:after { border-right-color: #00c !important; } .border-sub2-d1 { border-color: rgba(0,0,204,1) !important; } a.border-sub2-d1:hover { border-color: rgba(0,0,204,.75) !important; } .font-sub2-d2 { color: #009 !important; } .bg-sub2-d2 { background-color: rgba(0,0,153,1) !important; } a.bg-sub2-d2:hover { background-color: rgba(0,0,153,.75) !important; } .balloon--t.bg-sub2-d2:after { border-bottom-color: #009 !important; } .balloon--r.bg-sub2-d2:after { border-left-color: #009 !important; } .balloon--b.bg-sub2-d2:after { border-top-color: #009 !important; } .balloon--l.bg-sub2-d2:after { border-right-color: #009 !important; } .border-sub2-d2 { border-color: rgba(0,0,153,1) !important; } a.border-sub2-d2:hover { border-color: rgba(0,0,153,.75) !important; } /*---------------------------------------- help ----------------------------------------*/ /* baseText */ .font-baseText { color: #333 !important; } .bg-baseText { background-color: rgba(51,51,51,1) !important; } a.bg-baseText:hover { background-color: rgba(51,51,51,.75) !important; } .balloon--t.bg-baseText:after { border-bottom-color: #333 !important; } .balloon--r.bg-baseText:after { border-left-color: #333 !important; } .balloon--b.bg-baseText:after { border-top-color: #333 !important; } .balloon--l.bg-baseText:after { border-right-color: #333 !important; } .border-baseText { border-color: rgba(51,51,51,1) !important; } a.border-baseText:hover { border-color: rgba(51,51,51,.75) !important; } /* baseH */ .font-baseH { color: #1a1a1a !important; } .bg-baseH { background-color: rgba(26,26,26,1) !important; } a.bg-baseH:hover { background-color: rgba(26,26,26,.75) !important; } .balloon--t.bg-baseH:after { border-bottom-color: #1a1a1a !important; } .balloon--r.bg-baseH:after { border-left-color: #1a1a1a !important; } .balloon--b.bg-baseH:after { border-top-color: #1a1a1a !important; } .balloon--l.bg-baseH:after { border-right-color: #1a1a1a !important; } .border-baseH { border-color: rgba(26,26,26,1) !important; } a.border-baseH:hover { border-color: rgba(26,26,26,.75) !important; } /* baseBorder */ .font-baseBorder { color: #ccc !important; } .bg-baseBorder { background-color: rgba(204,204,204,1) !important; } a.bg-baseBorder:hover { background-color: rgba(204,204,204,.75) !important; } .balloon--t.bg-baseBorder:after { border-bottom-color: #ccc !important; } .balloon--r.bg-baseBorder:after { border-left-color: #ccc !important; } .balloon--b.bg-baseBorder:after { border-top-color: #ccc !important; } .balloon--l.bg-baseBorder:after { border-right-color: #ccc !important; } .border-baseBorder { border-color: rgba(204,204,204,1) !important; } a.border-baseBorder:hover { border-color: rgba(204,204,204,.75) !important; } /* baseBg */ .font-baseBg { color: #f2f2f2 !important; } .bg-baseBg { background-color: rgba(242,242,242,1) !important; } a.bg-baseBg:hover { background-color: rgba(242,242,242,.75) !important; } .balloon--t.bg-baseBg:after { border-bottom-color: #f2f2f2 !important; } .balloon--r.bg-baseBg:after { border-left-color: #f2f2f2 !important; } .balloon--b.bg-baseBg:after { border-top-color: #f2f2f2 !important; } .balloon--l.bg-baseBg:after { border-right-color: #f2f2f2 !important; } .border-baseBg { border-color: rgba(242,242,242,1) !important; } a.border-baseBg:hover { border-color: rgba(242,242,242,.75) !important; } /*---------------------------------------- general ----------------------------------------*/ /* white */ .font-white { color: #fff !important; } .bg-white { background-color: rgba(255,255,255,1) !important; } a.bg-white:hover { background-color: rgba(255,255,255,.75) !important; } .balloon--t.bg-white:after { border-bottom-color: #fff !important; } .balloon--r.bg-white:after { border-left-color: #fff !important; } .balloon--b.bg-white:after { border-top-color: #fff !important; } .balloon--l.bg-white:after { border-right-color: #fff !important; } .border-white { border-color: rgba(255,255,255,1) !important; } a.border-white:hover { border-color: rgba(255,255,255,.75) !important; } /* grey */ .font-grey { color: #9e9e9e !important; } .bg-grey { background-color: rgba(158,158,158,1) !important; } a.bg-grey:hover { background-color: rgba(158,158,158,.75) !important; } .balloon--t.bg-grey:after { border-bottom-color: #9e9e9e !important; } .balloon--r.bg-grey:after { border-left-color: #9e9e9e !important; } .balloon--b.bg-grey:after { border-top-color: #9e9e9e !important; } .balloon--l.bg-grey:after { border-right-color: #9e9e9e !important; } .border-grey { border-color: rgba(158,158,158,1) !important; } a.border-grey:hover { border-color: rgba(158,158,158,.75) !important; } /* black */ .font-black { color: #1a1a1a !important; } .bg-black { background-color: rgba(26,26,26,1) !important; } a.bg-black:hover { background-color: rgba(26,26,26,.75) !important; } .balloon--t.bg-black:after { border-bottom-color: #1a1a1a !important; } .balloon--r.bg-black:after { border-left-color: #1a1a1a !important; } .balloon--b.bg-black:after { border-top-color: #1a1a1a !important; } .balloon--l.bg-black:after { border-right-color: #1a1a1a !important; } .border-black { border-color: rgba(26,26,26,1) !important; } a.border-black:hover { border-color: rgba(26,26,26,.75) !important; } /* red */ .font-red { color: #f44336 !important; } .bg-red { background-color: rgba(244,67,54,1) !important; } a.bg-red:hover { background-color: rgba(244,67,54,.75) !important; } .balloon--t.bg-red:after { border-bottom-color: #f44336 !important; } .balloon--r.bg-red:after { border-left-color: #f44336 !important; } .balloon--b.bg-red:after { border-top-color: #f44336 !important; } .balloon--l.bg-red:after { border-right-color: #f44336 !important; } .border-red { border-color: rgba(244,67,54,1) !important; } a.border-red:hover { border-color: rgba(244,67,54,.75) !important; } /* yellow */ .font-yellow { color: #ffc107 !important; } .bg-yellow { background-color: rgba(255,193,7,1) !important; } a.bg-yellow:hover { background-color: rgba(255,193,7,.75) !important; } .balloon--t.bg-yellow:after { border-bottom-color: #ffc107 !important; } .balloon--r.bg-yellow:after { border-left-color: #ffc107 !important; } .balloon--b.bg-yellow:after { border-top-color: #ffc107 !important; } .balloon--l.bg-yellow:after { border-right-color: #ffc107 !important; } .border-yellow { border-color: rgba(255,193,7,1) !important; } a.border-yellow:hover { border-color: rgba(255,193,7,.75) !important; } /* green */ .font-green { color: #4caf50 !important; } .bg-green { background-color: rgba(76,175,80,1) !important; } a.bg-green:hover { background-color: rgba(76,175,80,.75) !important; } .balloon--t.bg-green:after { border-bottom-color: #4caf50 !important; } .balloon--r.bg-green:after { border-left-color: #4caf50 !important; } .balloon--b.bg-green:after { border-top-color: #4caf50 !important; } .balloon--l.bg-green:after { border-right-color: #4caf50 !important; } .border-green { border-color: rgba(76,175,80,1) !important; } a.border-green:hover { border-color: rgba(76,175,80,.75) !important; } /* blue */ .font-blue { color: #2196f3 !important; } .bg-blue { background-color: rgba(33,150,243,1) !important; } a.bg-blue:hover { background-color: rgba(33,150,243,.75) !important; } .balloon--t.bg-blue:after { border-bottom-color: #2196f3 !important; } .balloon--r.bg-blue:after { border-left-color: #2196f3 !important; } .balloon--b.bg-blue:after { border-top-color: #2196f3 !important; } .balloon--l.bg-blue:after { border-right-color: #2196f3 !important; } .border-blue { border-color: rgba(33,150,243,1) !important; } a.border-blue:hover { border-color: rgba(33,150,243,.75) !important; } /*----------------------------------------*---------------------------------------- ==Ebox== 1. まず、eboxとeboxの間のmarginを決めます　　　　　　 PC = ☆px / SP = ★px / PRINT = ※px 2. 背景付ebox（ebox--bg）の天地のpaddingを決めます　　PC = □px / SP = ■px / PRINT = ◇px 3. 最後のeboxとfooterの間のmarginを決めます　　　　　 PC = △px / SP = ▲px / PRINT = ▽px ----------------------------------------*----------------------------------------*/ .ebox { position: relative; } /*ページ内リンクのための上部余白*/ @media screen { .ebox:not(.ebox--bg) ~ .ebox:not(.ebox--bg) { padding-top: 20px; } } @media screen and (max-width: 767px) { .ebox:not(.ebox--bg):last-child { margin-bottom: 40px; } /* ▲px */ .ebox:not(.ebox--bg) + .ebox:not(.ebox--bg) { margin-top: 40px; } /* ★px - 20px */ .ebox:not(.ebox--bg) + .ebox--bg, .ebox--bg + .ebox:not(.ebox--bg) { margin-top: 60px; } /* ★px */ .ebox--bg { padding-top: 20px; /* ■px */ padding-bottom: .1px; /* ■px - 20px（0になる場合、.1pxを指定する） */ } } /* PC用/印刷は別途指定 */ @media screen and (min-width: 768px) { #contents .ebox:not(.ebox--bg):last-child { margin-bottom: 100px; } /* △px */ .ebox:not(.ebox--bg) + .ebox:not(.ebox--bg) { margin-top: 80px; } /* ☆px - 20px */ .ebox:not(.ebox--bg) + .ebox--bg, .ebox--bg + .ebox:not(.ebox--bg) { margin-top: 100px; } /* ☆px */ .ebox--bg { padding-top: 40px; /* □px */ padding-bottom: 20px; /* □px - 20px（0になる場合、.1pxを指定する） */ } } /* 印刷用（PCより狭く設定） */ @media print { .ebox:not(.ebox--bg):last-child { margin-bottom: 40px; } /* ▽px */ .ebox:not(.ebox--bg) + .ebox:not(.ebox--bg) { margin-top: 20px; } /* ※px - 20px */ .ebox:not(.ebox--bg) + .ebox--bg, .ebox--bg + .ebox:not(.ebox--bg) { margin-top: 40px; } /* ※px */ .ebox--bg { padding-top: 20px; /* ◇px */ padding-bottom: .1px; /* ◇px - 20px（0になる場合、.1pxを指定する） */ } } .ebox address, .ebox dl, .ebox hr, .ebox ol, .ebox p, .ebox pre, .ebox table, .ebox ul, .pagination, .postNav, .btnGroup, .card, .cardGroup, .row, .row > .clearfix, .hr-diamond, .hr-circle, .media, .media-pc, .media-sp, .slick-slider, .thumbnail { margin-bottom: 20px; } .ebox ol ol, .ebox ul ul, .ebox ol ul, .ebox ul ol, .col *:last-child, .col *:last-child > *:last-child, .col *:last-child > *:last-child > *:last-child, .slick-dots, .tabNav, .media_body > *:last-child { margin-bottom: 0 !important; } @media screen and (max-width: 767px) { .col--12-sp { margin-bottom: 20px; } .row > .col--12-sp:last-child { margin-bottom: 0; } } @media print, screen and (min-width: 768px) { .col--12-pc { margin-bottom: 20px; } .row > .col--12-pc:last-child { margin-bottom: 0; } } /* 確認用 .ebox { background: rgba(100,0,0,.1); } .ebox:nth-child(even) { background: rgba(0,100,0,.1); } .ebox .container { background: #fff; } .ebox .col:nth-child(odd), .ebox h1, .ebox h2, .ebox h3, .ebox h4, .ebox h5, .ebox h6, .ebox p, .ebox li, .ebox dt, .ebox dd, .ebox table { background: rgba(0,0,100,.1); } .ebox .col:nth-child(even) { background: rgba(0,0,100,.15); } */ /*----------------------------------------*---------------------------------------- ==Grid== ----------------------------------------*----------------------------------------*/ /*---------------------------------------- container ----------------------------------------*/ .container { margin-right: auto; margin-left: auto; text-align: left; } @media screen and (max-width: 767px) { .container { width: 100%; padding-right: 20px; padding-left: 20px; } } @media print, screen and (min-width: 768px) { .container { width: 960px; padding-right: 10px; padding-left: 10px; } } /*---------------------------------------- row ----------------------------------------*/ @media screen and (max-width: 767px) { .row { margin-right: -10px; margin-left: -10px; } } @media print, screen and (min-width: 768px) { .row { margin-right: -10px; margin-left: -10px; } } /*---------------------------------------- col ----------------------------------------*/ .col { position: relative; min-height: 1px; } @media screen and (max-width: 767px) { /* デフォルト */ .col { padding-right: 10px; padding-left: 10px; } .col--1-sp, .col--2-sp, .col--3-sp, .col--4-sp, .col--5-sp, .col--6-sp, .col--7-sp, .col--8-sp, .col--9-sp, .col--10-sp, .col--11-sp, .col--12-sp, .col--x3-sp, .col--x4-sp, .col--x5-sp, .col--x6-sp, .col--x8-sp, .col--x12-sp { float: left; } .col--1-sp { width: 8.33333333%; } .col--2-sp { width: 16.66666667%; } .col--3-sp { width: 25%; } .col--4-sp { width: 33.33333333%; } .col--5-sp { width: 41.66666667%; } .col--6-sp { width: 50%; } .col--7-sp { width: 58.33333333%; } .col--8-sp { width: 66.66666667%; } .col--9-sp { width: 75%; } .col--10-sp { width: 83.33333333%; } .col--11-sp { width: 91.66666667%; } .col--12-sp { width: 100%; } .col--x3-sp { width: 33.33333333%; } .col--x4-sp { width: 25%; } .col--x5-sp { width: 20%; } .col--x6-sp { width: 16.66666667%; } .col--x8-sp { width: 12.5%; } .col--x12-sp { width: 8.33333333%; } .col--pull0-sp { right: auto; } .col--pull05-sp { right: 4.166666665%; } .col--pull1-sp { right: 8.33333333%; } .col--pull15-sp { right: 12.5%; } .col--pull2-sp { right: 16.66666667%; } .col--pull25-sp { right: 20.833333335%; } .col--pull3-sp { right: 25%; } .col--pull35-sp { right: 29.166666665%; } .col--pull4-sp { right: 33.33333333%; } .col--pull45-sp { right: 37.5%; } .col--pull5-sp { right: 41.66666667%; } .col--pull55-sp { right: 45.833333335%; } .col--pull6-sp { right: 50%; } .col--pull7-sp { right: 58.33333333%; } .col--pull8-sp { right: 66.66666667%; } .col--pull9-sp { right: 75%; } .col--pull10-sp { right: 83.33333333%; } .col--pull11-sp { right: 91.66666667%; } .col--pull12-sp { right: 100%; } .col--push0-sp { left: auto; } .col--push05-sp { left: 4.166666665%; } .col--push1-sp { left: 8.33333333%; } .col--push15-sp { left: 12.5%; } .col--push2-sp { left: 16.66666667%; } .col--push25-sp { left: 20.833333335%; } .col--push3-sp { left: 25%; } .col--push35-sp { left: 29.166666665%; } .col--push4-sp { left: 33.33333333%; } .col--push45-sp { left: 37.5%; } .col--push5-sp { left: 41.66666667%; } .col--push55-sp { left: 45.833333335%; } .col--push6-sp { left: 50%; } .col--push7-sp { left: 58.33333333%; } .col--push8-sp { left: 66.66666667%; } .col--push9-sp { left: 75%; } .col--push10-sp { left: 83.33333333%; } .col--push11-sp { left: 91.66666667%; } .col--push12-sp { left: 100%; } .col--offset0-sp { margin-left: 0; } .col--offset05-sp { margin-left: 4.166666665%; } .col--offset1-sp { margin-left: 8.33333333%; } .col--offset15-sp { margin-left: 12.5%; } .col--offset2-sp { margin-left: 16.66666667%; } .col--offset25-sp { margin-left: 20.833333335%; } .col--offset3-sp { margin-left: 25%; } .col--offset35-sp { margin-left: 29.166666665%; } .col--offset4-sp { margin-left: 33.33333333%; } .col--offset45-sp { margin-left: 37.5%; } .col--offset5-sp { margin-left: 41.66666667%; } .col--offset55-sp { margin-left: 45.833333335%; } .col--offset6-sp { margin-left: 50%; } .col--offset7-sp { margin-left: 58.33333333%; } .col--offset8-sp { margin-left: 66.66666667%; } .col--offset9-sp { margin-left: 75%; } .col--offset10-sp { margin-left: 83.33333333%; } .col--offset11-sp { margin-left: 91.66666667%; } .col--offset12-sp { margin-left: 100%; } /* row--10/30/40 */ .row--10-sp > .col { padding-right: 5px; padding-left: 5px; } .row--30-sp > .col { padding-right: 15px; padding-left: 15px; } .row--40-sp > .col { padding-right: 20px; padding-left: 20px; } .row--10-sp > .col--12-sp, .row--30-sp > .col--12-sp, .row--40-sp > .col--12-sp { padding-right: 10px; padding-left: 10px; } .row--10-sp > .col--left:not([class*="col--offset"]), .row--30-sp > .col--left:not([class*="col--offset"]), .row--40-sp > .col--left:not([class*="col--offset"]) { padding-left: 10px; } .row--10-sp > .col--right, .row--30-sp > .col--right, .row--40-sp > .col--right { padding-right: 10px; } /* row--10 */ .row--10-sp > .col--1-sp { width: 8.246527778%; } .row--10-sp > .col--2-sp { width: 16.49305556%; } .row--10-sp > .col--3-sp { width: 24.73958404040%; } .row--10-sp > .col--4-sp { width: 32.98611111%; } .row--10-sp > .col--5-sp { width: 41.23263889%; } .row--10-sp > .col--6-sp { width: 49.47916667%; } .row--10-sp > .col--7-sp { width: 57.72569444%; } .row--10-sp > .col--8-sp { width: 65.97222222%; } .row--10-sp > .col--9-sp { width: 74.21875%; } .row--10-sp > .col--10-sp-sp { width: 82.46527778%; } .row--10-sp > .col--11-sp { width: 90.71180556%; } .row--10-sp > .col--x5-sp { width: 19.79166667%; } .row--10-sp > .col--x8-sp { width: 12.36979167%; } .row--10-sp > .col--1-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--1-sp.col--right { width: 8.767361111%; } .row--10-sp > .col--2-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--2-sp.col--right { width: 17.01388889%; } .row--10-sp > .col--3-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--3-sp.col--right { width: 25.26041667%; } .row--10-sp > .col--4-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--4-sp.col--right { width: 33.50694444%; } .row--10-sp > .col--5-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--5-sp.col--right { width: 41.75347222%; } .row--10-sp > .col--6-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--6-sp.col--right { width: 50%; } .row--10-sp > .col--7-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--7-sp.col--right { width: 58.24652778%; } .row--10-sp > .col--8-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--8-sp.col--right { width: 66.49305556%; } .row--10-sp > .col--9-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--9-sp.col--right { width: 74.73958404040%; } .row--10-sp > .col--10-sp-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--10-sp-sp.col--right { width: 82.98611111%; } .row--10-sp > .col--11-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--11-sp.col--right { width: 91.23263889%; } .row--10-sp > .col--x5-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--x5-sp.col--right { width: 20.3125%; } .row--10-sp > .col--x8-sp.col--left:not([class*="col--offset"]), .row--10-sp > .col--x8-sp.col--right { width: 12.890625%; } /* row--30 */ .row--30-sp > .col--1-sp { width: 8.420138889%; } .row--30-sp > .col--2-sp { width: 16.84027778%; } .row--30-sp > .col--3-sp { width: 25.26041667%; } .row--30-sp > .col--4-sp { width: 33.68055556%; } .row--30-sp > .col--5-sp { width: 42.10069444%; } .row--30-sp > .col--6-sp { width: 50.52084040403%; } .row--30-sp > .col--7-sp { width: 58.94097222%; } .row--30-sp > .col--8-sp { width: 67.36111111%; } .row--30-sp > .col--9-sp { width: 75.78125%; } .row--30-sp > .col--10-sp-sp { width: 84.20138889%; } .row--30-sp > .col--11-sp { width: 92.62152778%; } .row--30-sp > .col--x5-sp { width: 20.20840404033%; } .row--30-sp > .col--x8-sp { width: 12.63020833%; } .row--30-sp > .col--1-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--1-sp.col--right { width: 7.899305556%; } .row--30-sp > .col--2-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--2-sp.col--right { width: 16.31944444%; } .row--30-sp > .col--3-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--3-sp.col--right { width: 24.73958404040%; } .row--30-sp > .col--4-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--4-sp.col--right { width: 33.15972222%; } .row--30-sp > .col--5-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--5-sp.col--right { width: 41.57986111%; } .row--30-sp > .col--6-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--6-sp.col--right { width: 50%; } .row--30-sp > .col--7-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--7-sp.col--right { width: 58.42013889%; } .row--30-sp > .col--8-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--8-sp.col--right { width: 66.84027778%; } .row--30-sp > .col--9-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--9-sp.col--right { width: 75.26041667%; } .row--30-sp > .col--10-sp-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--10-sp-sp.col--right { width: 83.68055556%; } .row--30-sp > .col--11-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--11-sp.col--right { width: 92.10069444%; } .row--30-sp > .col--x5-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--x5-sp.col--right { width: 19.6875%; } .row--30-sp > .col--x8-sp.col--left:not([class*="col--offset"]), .row--30-sp > .col--x8-sp.col--right { width: 12.109375%; } /* row--40 */ .row--40-sp > .col--1-sp { width: 8.506944444%; } .row--40-sp > .col--2-sp { width: 17.01388889%; } .row--40-sp > .col--3-sp { width: 25.52084040403%; } .row--40-sp > .col--4-sp { width: 34.02777778%; } .row--40-sp > .col--5-sp { width: 42.53472222%; } .row--40-sp > .col--6-sp { width: 51.04166667%; } .row--40-sp > .col--7-sp { width: 59.54861111%; } .row--40-sp > .col--8-sp { width: 68.05555556%; } .row--40-sp > .col--9-sp { width: 76.5625%; } .row--40-sp > .col--10-sp-sp { width: 85.06944444%; } .row--40-sp > .col--11-sp { width: 93.57638889%; } .row--40-sp > .col--x5-sp { width: 20.41666667%; } .row--40-sp > .col--x8-sp { width: 12.76041667%; } .row--40-sp > .col--1-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--1-sp.col--right { width: 7.465277778%; } .row--40-sp > .col--2-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--2-sp.col--right { width: 15.97222222%; } .row--40-sp > .col--3-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--3-sp.col--right { width: 24.47916667%; } .row--40-sp > .col--4-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--4-sp.col--right { width: 32.98611111%; } .row--40-sp > .col--5-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--5-sp.col--right { width: 41.49305556%; } .row--40-sp > .col--6-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--6-sp.col--right { width: 50%; } .row--40-sp > .col--7-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--7-sp.col--right { width: 58.50694444%; } .row--40-sp > .col--8-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--8-sp.col--right { width: 67.01388889%; } .row--40-sp > .col--9-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--9-sp.col--right { width: 75.52084040403%; } .row--40-sp > .col--10-sp-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--10-sp-sp.col--right { width: 84.02777778%; } .row--40-sp > .col--11-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--11-sp.col--right { width: 92.53472222%; } .row--40-sp > .col--x5-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--x5-sp.col--right { width: 19.375%; } .row--40-sp > .col--x8-sp.col--left:not([class*="col--offset"]), .row--40-sp > .col--x8-sp.col--right { width: 11.71875%; } } @media print, screen and (min-width: 768px) { /* デフォルト */ .col { padding-right: 10px; padding-left: 10px; } .col--1-pc, .col--2-pc, .col--3-pc, .col--4-pc, .col--5-pc, .col--6-pc, .col--7-pc, .col--8-pc, .col--9-pc, .col--10-pc, .col--11-pc, .col--12-pc, .col--x3-pc, .col--x4-pc, .col--x5-pc, .col--x6-pc, .col--x8-pc, .col--x12-pc { float: left; } .col--1-pc { width: 8.33333333%; } .col--2-pc { width: 16.66666667%; } .col--3-pc { width: 25%; } .col--4-pc { width: 33.33333333%; } .col--5-pc { width: 41.66666667%; } .col--6-pc { width: 50%; } .col--7-pc { width: 58.33333333%; } .col--8-pc { width: 66.66666667%; } .col--9-pc { width: 75%; } .col--10-pc { width: 83.33333333%; } .col--11-pc { width: 91.66666667%; } .col--12-pc { width: 100%; } .col--x3-pc { width: 33.33333333%; } .col--x4-pc { width: 25%; } .col--x5-pc { width: 20%; } .col--x6-pc { width: 16.66666667%; } .col--x8-pc { width: 12.5%; } .col--x12-pc { width: 8.33333333%; } .col--pull0-pc { right: auto; } .col--pull05-pc { right: 4.166666665%; } .col--pull1-pc { right: 8.33333333%; } .col--pull15-pc { right: 12.5%; } .col--pull2-pc { right: 16.66666667%; } .col--pull25-pc { right: 20.833333335%; } .col--pull3-pc { right: 25%; } .col--pull35-pc { right: 29.166666665%; } .col--pull4-pc { right: 33.33333333%; } .col--pull45-pc { right: 37.5%; } .col--pull5-pc { right: 41.66666667%; } .col--pull55-pc { right: 45.833333335%; } .col--pull6-pc { right: 50%; } .col--pull7-pc { right: 58.33333333%; } .col--pull8-pc { right: 66.66666667%; } .col--pull9-pc { right: 75%; } .col--pull10-pc { right: 83.33333333%; } .col--pull11-pc { right: 91.66666667%; } .col--pull12-pc { right: 100%; } .col--push0-pc { left: auto; } .col--push05-pc { left: 4.166666665%; } .col--push1-pc { left: 8.33333333%; } .col--push15-pc { left: 12.5%; } .col--push2-pc { left: 16.66666667%; } .col--push25-pc { left: 20.833333335%; } .col--push3-pc { left: 25%; } .col--push35-pc { left: 29.166666665%; } .col--push4-pc { left: 33.33333333%; } .col--push45-pc { left: 37.5%; } .col--push5-pc { left: 41.66666667%; } .col--push55-pc { left: 45.833333335%; } .col--push6-pc { left: 50%; } .col--push7-pc { left: 58.33333333%; } .col--push8-pc { left: 66.66666667%; } .col--push9-pc { left: 75%; } .col--push10-pc { left: 83.33333333%; } .col--push11-pc { left: 91.66666667%; } .col--push12-pc { left: 100%; } .col--offset0-pc { margin-left: 0; } .col--offset05-pc { margin-left: 4.166666665%; } .col--offset1-pc { margin-left: 8.33333333%; } .col--offset15-pc { margin-left: 12.5%; } .col--offset2-pc { margin-left: 16.66666667%; } .col--offset25-pc { margin-left: 20.833333335%; } .col--offset3-pc { margin-left: 25%; } .col--offset35-pc { margin-left: 29.166666665%; } .col--offset4-pc { margin-left: 33.33333333%; } .col--offset45-pc { margin-left: 37.5%; } .col--offset5-pc { margin-left: 41.66666667%; } .col--offset55-pc { margin-left: 45.833333335%; } .col--offset6-pc { margin-left: 50%; } .col--offset7-pc { margin-left: 58.33333333%; } .col--offset8-pc { margin-left: 66.66666667%; } .col--offset9-pc { margin-left: 75%; } .col--offset10-pc { margin-left: 83.33333333%; } .col--offset11-pc { margin-left: 91.66666667%; } .col--offset12-pc { margin-left: 100%; } /* row--10/30/40 */ .row--10-pc > .col { padding-right: 5px; padding-left: 5px; } .row--30-pc > .col { padding-right: 15px; padding-left: 15px; } .row--40-pc > .col { padding-right: 20px; padding-left: 20px; } .row--10-pc > .col--12-pc, .row--30-pc > .col--12-pc, .row--40-pc > .col--12-pc { padding-right: 10px; padding-left: 10px; } .row--10-pc > .col--left:not([class*="col--offset"]), .row--30-pc > .col--left:not([class*="col--offset"]), .row--40-pc > .col--left:not([class*="col--offset"]) { padding-left: 10px; } .row--10-pc > .col--right, .row--30-pc > .col--right, .row--40-pc > .col--right { padding-right: 10px; } /* row--10 */ .row--10-pc > .col--1-pc { width: 8.246527778%; } .row--10-pc > .col--2-pc { width: 16.49305556%; } .row--10-pc > .col--3-pc { width: 24.73958404040%; } .row--10-pc > .col--4-pc { width: 32.98611111%; } .row--10-pc > .col--5-pc { width: 41.23263889%; } .row--10-pc > .col--6-pc { width: 49.47916667%; } .row--10-pc > .col--7-pc { width: 57.72569444%; } .row--10-pc > .col--8-pc { width: 65.97222222%; } .row--10-pc > .col--9-pc { width: 74.21875%; } .row--10-pc > .col--10-pc-pc { width: 82.46527778%; } .row--10-pc > .col--11-pc { width: 90.71180556%; } .row--10-pc > .col--x5-pc { width: 19.79166667%; } .row--10-pc > .col--x8-pc { width: 12.36979167%; } .row--10-pc > .col--1-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--1-pc.col--right { width: 8.767361111%; } .row--10-pc > .col--2-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--2-pc.col--right { width: 17.01388889%; } .row--10-pc > .col--3-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--3-pc.col--right { width: 25.26041667%; } .row--10-pc > .col--4-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--4-pc.col--right { width: 33.50694444%; } .row--10-pc > .col--5-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--5-pc.col--right { width: 41.75347222%; } .row--10-pc > .col--6-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--6-pc.col--right { width: 50%; } .row--10-pc > .col--7-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--7-pc.col--right { width: 58.24652778%; } .row--10-pc > .col--8-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--8-pc.col--right { width: 66.49305556%; } .row--10-pc > .col--9-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--9-pc.col--right { width: 74.73958404040%; } .row--10-pc > .col--10-pc-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--10-pc-pc.col--right { width: 82.98611111%; } .row--10-pc > .col--11-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--11-pc.col--right { width: 91.23263889%; } .row--10-pc > .col--x5-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--x5-pc.col--right { width: 20.3125%; } .row--10-pc > .col--x8-pc.col--left:not([class*="col--offset"]), .row--10-pc > .col--x8-pc.col--right { width: 12.890625%; } /* row--30 */ .row--30-pc > .col--1-pc { width: 8.420138889%; } .row--30-pc > .col--2-pc { width: 16.84027778%; } .row--30-pc > .col--3-pc { width: 25.26041667%; } .row--30-pc > .col--4-pc { width: 33.68055556%; } .row--30-pc > .col--5-pc { width: 42.10069444%; } .row--30-pc > .col--6-pc { width: 50.52084040403%; } .row--30-pc > .col--7-pc { width: 58.94097222%; } .row--30-pc > .col--8-pc { width: 67.36111111%; } .row--30-pc > .col--9-pc { width: 75.78125%; } .row--30-pc > .col--10-pc-pc { width: 84.20138889%; } .row--30-pc > .col--11-pc { width: 92.62152778%; } .row--30-pc > .col--x5-pc { width: 20.20840404033%; } .row--30-pc > .col--x8-pc { width: 12.63020833%; } .row--30-pc > .col--1-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--1-pc.col--right { width: 7.899305556%; } .row--30-pc > .col--2-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--2-pc.col--right { width: 16.31944444%; } .row--30-pc > .col--3-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--3-pc.col--right { width: 24.73958404040%; } .row--30-pc > .col--4-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--4-pc.col--right { width: 33.15972222%; } .row--30-pc > .col--5-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--5-pc.col--right { width: 41.57986111%; } .row--30-pc > .col--6-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--6-pc.col--right { width: 50%; } .row--30-pc > .col--7-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--7-pc.col--right { width: 58.42013889%; } .row--30-pc > .col--8-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--8-pc.col--right { width: 66.84027778%; } .row--30-pc > .col--9-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--9-pc.col--right { width: 75.26041667%; } .row--30-pc > .col--10-pc-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--10-pc-pc.col--right { width: 83.68055556%; } .row--30-pc > .col--11-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--11-pc.col--right { width: 92.10069444%; } .row--30-pc > .col--x5-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--x5-pc.col--right { width: 19.6875%; } .row--30-pc > .col--x8-pc.col--left:not([class*="col--offset"]), .row--30-pc > .col--x8-pc.col--right { width: 12.109375%; } /* row--40 */ .row--40-pc > .col--1-pc { width: 8.506944444%; } .row--40-pc > .col--2-pc { width: 17.01388889%; } .row--40-pc > .col--3-pc { width: 25.52084040403%; } .row--40-pc > .col--4-pc { width: 34.02777778%; } .row--40-pc > .col--5-pc { width: 42.53472222%; } .row--40-pc > .col--6-pc { width: 51.04166667%; } .row--40-pc > .col--7-pc { width: 59.54861111%; } .row--40-pc > .col--8-pc { width: 68.05555556%; } .row--40-pc > .col--9-pc { width: 76.5625%; } .row--40-pc > .col--10-pc-pc { width: 85.06944444%; } .row--40-pc > .col--11-pc { width: 93.57638889%; } .row--40-pc > .col--x5-pc { width: 20.41666667%; } .row--40-pc > .col--x8-pc { width: 12.76041667%; } .row--40-pc > .col--1-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--1-pc.col--right { width: 7.465277778%; } .row--40-pc > .col--2-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--2-pc.col--right { width: 15.97222222%; } .row--40-pc > .col--3-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--3-pc.col--right { width: 24.47916667%; } .row--40-pc > .col--4-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--4-pc.col--right { width: 32.98611111%; } .row--40-pc > .col--5-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--5-pc.col--right { width: 41.49305556%; } .row--40-pc > .col--6-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--6-pc.col--right { width: 50%; } .row--40-pc > .col--7-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--7-pc.col--right { width: 58.50694444%; } .row--40-pc > .col--8-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--8-pc.col--right { width: 67.01388889%; } .row--40-pc > .col--9-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--9-pc.col--right { width: 75.52084040403%; } .row--40-pc > .col--10-pc-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--10-pc-pc.col--right { width: 84.02777778%; } .row--40-pc > .col--11-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--11-pc.col--right { width: 92.53472222%; } .row--40-pc > .col--x5-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--x5-pc.col--right { width: 19.375%; } .row--40-pc > .col--x8-pc.col--left:not([class*="col--offset"]), .row--40-pc > .col--x8-pc.col--right { width: 11.71875%; } } /*---------------------------------------- menu--col ----------------------------------------*/ @media screen and (max-width: 767px) { .menu--col12-sp, .menu--col9-sp, .menu--col8-sp, .menu--col6-sp, .menu--col4-sp, .menu--col3-sp { float: left; } .menu--col12-sp { width: 100%; } .menu--col9-sp { width: 75%; } .menu--col8-sp { width: 66.66666667%; } .menu--col6-sp { width: 50%; } .menu--col4-sp { width: 33.33333333%; } .menu--col3-sp { width: 25%; } } /*----------------------------------------*---------------------------------------- ==Headline== ----------------------------------------*----------------------------------------*/ /*---------------------------------------- Noto Sans Japaneseについて GoogleWebFontです。 font-weightは、normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900を指定できます。 normal = 400, bold = 900 ----------------------------------------*/ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { vertical-align: middle; margin-bottom: 20px; } @media screen and (max-width: 767px) { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { } h1, .h1 { font-size: 2.2rem; } h2, .h2 { font-size: 2.0rem; } h3, .h3 { font-size: 1.8rem; } h4, .h4 { font-size: 1.6rem; } h5, .h5 { font-size: 1.6rem; } h6, .h6 { font-size: 1.6rem; } .android h1, .android h2, .android h3, .android h4, .android h5, .android h6, .android .h1, .android .h2, .android .h3, .android .h4, .android .h5, .android .h6 { } } @media print, screen and (min-width: 768px) { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {} h1, .h1 { font-size: 3.0rem; } h2, .h2 { font-size: 2.4rem; } h3, .h3 { font-size: 2.0rem; } h4, .h4 { font-size: 1.8rem; } h5, .h5 { font-size: 1.6rem; } h6, .h6 { font-size: 1.6rem; } } /*---------------------------------------- h-primary ----------------------------------------*/ /*---------------------------------------- h-line ----------------------------------------*/ .h-line { position: relative; } .h-line:before { border-top: solid 1px #333; content: ""; display: block; height: 1px; width: 100%; position: absolute; top: 50%; z-index: 1; } .h-line span { position: relative; z-index: 2; display: inline-block; padding: 0 20px 0 0; line-height: 1; vertical-align: middle; background: #fff; } .h-line.text-center span { padding-left: 20px; } @media screen and (max-width: 767px) { .h-line.text-center-sp span { padding-left: 20px; } } @media print, screen and (min-width: 768px) { .h-line.text-center-pc span { padding-left: 20px; } } /*---------------------------------------- h-underline ----------------------------------------*/ .h-underline { padding-bottom: 10px; border-bottom: 1px solid #333; position: relative; } /*---------------------------------------- h-underline-lap ----------------------------------------*/ .h-underline-lap { border-bottom: 1px solid #ccc; } .h-underline-lap span { display: inline-block; border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: -1px; } /*---------------------------------------- h-tape ----------------------------------------*/ .h-tape { position: relative; display: inline-block; padding: 10px 20px; border: 1px solid #333; } .h-tape:after { position: absolute; top: 0; left: 1%; content: ""; height: 100%; width: 98%; z-index: -999; background: rgba(255,0,0,1); -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); transform: rotate(-2deg); } /*----------------------------------------*---------------------------------------- ==Image== ----------------------------------------*----------------------------------------*/ /*---------------------------------------- float ----------------------------------------*/ .float-left { float: left; } .float-right { float: right; } .float-left, .float-right, .float-left-pc, .float-right-pc, .float-left-sp, .float-right-sp { margin-bottom: 20px; } img.float-left, img.float-right, img.float-left-pc, img.float-right-pc, img.float-left-sp, img.float-right-sp { display: block; } @media screen and (max-width: 767px) { .float-left-sp { float: left; } .float-right-sp { float: right; } } @media print, screen and (min-width: 768px) { .float-left-pc { float: left; } .float-right-pc { float: right; } } /*---------------------------------------- img-radius ----------------------------------------*/ .img-radius { border-radius: 3px; } /*---------------------------------------- img-circle ----------------------------------------*/ .img-circle { border-radius: 50%; } /*---------------------------------------- img-thumbnail ----------------------------------------*/ .img-thumbnail { display: inline-block; padding: .4rem; border: 1px solid #ccc; } /*---------------------------------------- media ----------------------------------------*/ .media { overflow: hidden; display: table; width: 100%; } .media .media_object, .media .media_body { display: table-cell; vertical-align: top; } .media .media_body { width: 10000px; } .media.media--middle .media_object, .media.media--middle .media_body, .media .media_object--middle { vertical-align: middle; } .media.media--bottom .media_object, .media.media--bottom .media_body, .media .media_object--bottom { vertical-align: bottom; } .media .media_object img { display: block; max-width: none; } @media screen and (max-width: 767px) { .media .media_object--right, .media-sp .media_object--right { padding-left: 10px; } .media .media_object--left, .media-sp .media_object--left { padding-right: 10px; } .media-sp { overflow: hidden; display: table; width: 100%; } .media-sp .media_object, .media-sp .media_body { display: table-cell; vertical-align: top; } .media-sp .media_body { width: 10000px; } .media-sp.media--middle .media_object, .media-sp.media--middle .media_body, .media-sp .media_object--middle { vertical-align: middle; } .media-sp.media--bottom .media_object, .media-sp.media--bottom .media_body, .media-sp .media_object--bottom { vertical-align: bottom; } .media-sp .media_object img { display: block; max-width: none; } .media-pc .media_object { text-align: center; } .media-pc .media_object--left { margin-bottom: 20px; } .media-pc .media_object--right { margin-top: 20px; } } @media (min-width: 768px) { .media .media_object--right, .media-pc .media_object--right { padding-left: 20px; } .media .media_object--left, .media-pc .media_object--left { padding-right: 20px; } .media-pc { overflow: hidden; display: table; width: 100%; } .media-pc .media_object, .media-pc .media_body { display: table-cell; vertical-align: top; } .media-pc .media_body { width: 10000px; } .media-pc.media--middle .media_object, .media-pc.media--middle .media_body, .media-pc .media_object--middle { vertical-align: middle; } .media-pc.media--bottom .media_object, .media-pc.media--bottom .media_body, .media-pc .media_object--bottom { vertical-align: bottom; } .media-pc .media_object img { display: block; max-width: none; } .media-sp .media_object--left { margin-bottom: 20px; } .media-sp .media_object--right { margin-top: 20px; } } /*---------------------------------------- embed ----------------------------------------*/ .embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .embed-responsive .embed-responsive_item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .embed-responsive--21by9 { padding-bottom: 42.857143%; } .embed-responsive--16by9 { padding-bottom: 56.25%; } .embed-responsive--4by3 { padding-bottom: 75%; } /*----------------------------------------*---------------------------------------- ==ImageReplacement== ir = image replacement ----------------------------------------*----------------------------------------*/ .ir { overflow: hidden; text-indent: 100%; white-space: nowrap; text-align: left; } .ir > a, a.ir { display: block; } @media screen and (max-width: 767px) { .ir-sp { overflow: hidden; text-indent: 100%; white-space: nowrap; text-align: left; } .ir-sp > a, a.ir-sp { display: block; } } @media (min-width: 768px) { .ir-pc { overflow: hidden; text-indent: 100%; white-space: nowrap; text-align: left; } .ir-pc > a, a.ir-pc { display: block; } } /* IE10 */ .ir, .ir-sp, .ir-pc { text-indent: -9999px\9; } /*----------------------------------------*---------------------------------------- ==List== ----------------------------------------*----------------------------------------*/ /*---------------------------------------- basic ----------------------------------------*/ .list-basic li { list-style: disc; margin-left: 20px; } .list-basic li li { list-style: disc; } /*---------------------------------------- number ----------------------------------------*/ .list-number li { list-style: decimal; margin-left: 20px; } /*---------------------------------------- border ----------------------------------------*/ .list-border > li + li { border-top: 1px dotted #ccc; margin-top: .5em; padding-top: .5em; } /*---------------------------------------- icon ----------------------------------------*/ .list-icon li { position: relative; padding-left: 1.5em; } .list-icon li:before { position: absolute; top: .3em; left: 2px; font-family: "FontAwesome"; content: "\f0da"; vertical-align: middle; line-height: 1; } /*---------------------------------------- inline ----------------------------------------*/ .list-inline, .list-inline ul, .list-inline ol { letter-spacing: -.4em; } .list-inline li { letter-spacing: normal; display: inline; } .list-inline li + li { margin-left: 1.5em; } .list-inline ul, .list-inline ol { position: relative; display: inline; } .list-inline ul:before, .list-inline ol:before { content: "["; margin-right: 1em; margin-left: .5em; } .list-inline ul:after, .list-inline ol:after { content: "]"; margin-left: 1em; margin-right: .5em; } /* list-inline--comma */ .list-inline--comma li + li { margin-left: 0; } .list-inline--comma li + li:before { content: "、 "; } /*---------------------------------------- Dl ----------------------------------------*/ /* dl-basic */ .dl-basic dt { } .dl-basic dd + dt, .dl-basic dd + dd { margin-top: .5em; } /* horizontal */ .dl-horizontal dt { overflow: hidden; clear: left; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; } @media screen and (max-width: 767px) { .dl-horizontal dd + dt { margin-top: 10px; } } @media print, screen and (min-width: 768px) { .dl-horizontal dt { width: 20%; float: left; } .dl-horizontal dd { margin-left: 22%; } } /*----------------------------------------*---------------------------------------- ==Margin== ----------------------------------------*----------------------------------------*/ .mgn-all0 { margin: 0 !important; } .mgn-t0 { margin-top: 0 !important; } .mgn-r0 { margin-right: 0 !important; } .mgn-b0 { margin-bottom: 0 !important; } .mgn-l0 { margin-left: 0 !important; } .mgn-x0 { margin-right: 0 !important; margin-left: 0 !important; } .mgn-y0 { margin-top: 0 !important; margin-bottom: 0 !important; } .mgn-all5 { margin: 5px !important; } .mgn-t5 { margin-top: 5px !important; } .mgn-r5 { margin-right: 5px !important; } .mgn-b5 { margin-bottom: 5px !important; } .mgn-l5 { margin-left: 5px !important; } .mgn-x5 { margin-right: 5px !important; margin-left: 5px !important; } .mgn-y5 { margin-top: 5px !important; margin-bottom: 5px !important; } .mgn-all10 { margin: 10px !important; } .mgn-t10 { margin-top: 10px !important; } .mgn-r10 { margin-right: 10px !important; } .mgn-b10 { margin-bottom: 10px !important; } .mgn-l10 { margin-left: 10px !important; } .mgn-x10 { margin-right: 10px !important; margin-left: 10px !important; } .mgn-y10 { margin-top: 10px !important; margin-bottom: 10px !important; } .mgn-all20 { margin: 20px !important; } .mgn-t20 { margin-top: 20px !important; } .mgn-r20 { margin-right: 20px !important; } .mgn-b20 { margin-bottom: 20px !important; } .mgn-l20 { margin-left: 20px !important; } .mgn-x20 { margin-right: 20px !important; margin-left: 20px !important; } .mgn-y20 { margin-top: 20px !important; margin-bottom: 20px !important; } .mgn-all30 { margin: 30px !important; } .mgn-t30 { margin-top: 30px !important; } .mgn-r30 { margin-right: 30px !important; } .mgn-b30 { margin-bottom: 30px !important; } .mgn-l30 { margin-left: 30px !important; } .mgn-x30 { margin-right: 30px !important; margin-left: 30px !important; } .mgn-y30 { margin-top: 30px !important; margin-bottom: 30px !important; } .mgn-all40 { margin: 40px !important; } .mgn-t40 { margin-top: 40px !important; } .mgn-r40 { margin-right: 40px !important; } .mgn-b40 { margin-bottom: 40px !important; } .mgn-l40 { margin-left: 40px !important; } .mgn-x40 { margin-right: 40px !important; margin-left: 40px !important; } .mgn-y40 { margin-top: 40px !important; margin-bottom: 40px !important; } .mgn-xAuto { margin-right: auto !important; margin-left: auto !important; } @media screen and (max-width: 767px) { .mgn-all0-sp { margin: 0 !important; } .mgn-t0-sp { margin-top: 0 !important; } .mgn-r0-sp { margin-right: 0 !important; } .mgn-b0-sp { margin-bottom: 0 !important; } .mgn-l0-sp { margin-left: 0 !important; } .mgn-x0-sp { margin-right: 0 !important; margin-left: 0 !important; } .mgn-y0-sp { margin-top: 0 !important; margin-bottom: 0 !important; } .mgn-all5-sp { margin: 5px !important; } .mgn-t5-sp { margin-top: 5px !important; } .mgn-r5-sp { margin-right: 5px !important; } .mgn-b5-sp { margin-bottom: 5px !important; } .mgn-l5-sp { margin-left: 5px !important; } .mgn-x5-sp { margin-right: 5px !important; margin-left: 5px !important; } .mgn-y5-sp { margin-top: 5px !important; margin-bottom: 5px !important; } .mgn-all10-sp { margin: 10px !important; } .mgn-t10-sp { margin-top: 10px !important; } .mgn-r10-sp { margin-right: 10px !important; } .mgn-b10-sp { margin-bottom: 10px !important; } .mgn-l10-sp { margin-left: 10px !important; } .mgn-x10-sp { margin-right: 10px !important; margin-left: 10px !important; } .mgn-y10-sp { margin-top: 10px !important; margin-bottom: 10px !important; } .mgn-all20-sp { margin: 20px !important; } .mgn-t20-sp { margin-top: 20px !important; } .mgn-r20-sp { margin-right: 20px !important; } .mgn-b20-sp { margin-bottom: 20px !important; } .mgn-l20-sp { margin-left: 20px !important; } .mgn-x20-sp { margin-right: 20px !important; margin-left: 20px !important; } .mgn-y20-sp { margin-top: 20px !important; margin-bottom: 20px !important; } .mgn-all30-sp { margin: 30px !important; } .mgn-t30-sp { margin-top: 30px !important; } .mgn-r30-sp { margin-right: 30px !important; } .mgn-b30-sp { margin-bottom: 30px !important; } .mgn-l30-sp { margin-left: 30px !important; } .mgn-x30-sp { margin-right: 30px !important; margin-left: 30px !important; } .mgn-y30-sp { margin-top: 30px !important; margin-bottom: 30px !important; } .mgn-all40-sp { margin: 40px !important; } .mgn-t40-sp { margin-top: 40px !important; } .mgn-r40-sp { margin-right: 40px !important; } .mgn-b40-sp { margin-bottom: 40px !important; } .mgn-l40-sp { margin-left: 40px !important; } .mgn-x40-sp { margin-right: 40px !important; margin-left: 40px !important; } .mgn-y40-sp { margin-top: 40px !important; margin-bottom: 40px !important; } .mgn-xAuto-sp { margin-right: auto !important; margin-left: auto !important; } } @media print, screen and (min-width: 768px) { .mgn-all0-pc { margin: 0 !important; } .mgn-t0-pc { margin-top: 0 !important; } .mgn-r0-pc { margin-right: 0 !important; } .mgn-b0-pc { margin-bottom: 0 !important; } .mgn-l0-pc { margin-left: 0 !important; } .mgn-x0-pc { margin-right: 0 !important; margin-left: 0 !important; } .mgn-y0-pc { margin-top: 0 !important; margin-bottom: 0 !important; } .mgn-all10-pc { margin: 10px !important; } .mgn-t10-pc { margin-top: 10px !important; } .mgn-r10-pc { margin-right: 10px !important; } .mgn-b10-pc { margin-bottom: 10px !important; } .mgn-l10-pc { margin-left: 10px !important; } .mgn-x10-pc { margin-right: 10px !important; margin-left: 10px !important; } .mgn-y10-pc { margin-top: 10px !important; margin-bottom: 10px !important; } .mgn-all20-pc { margin: 20px !important; } .mgn-t20-pc { margin-top: 20px !important; } .mgn-r20-pc { margin-right: 20px !important; } .mgn-b20-pc { margin-bottom: 20px !important; } .mgn-l20-pc { margin-left: 20px !important; } .mgn-x20-pc { margin-right: 20px !important; margin-left: 20px !important; } .mgn-y20-pc { margin-top: 20px !important; margin-bottom: 20px !important; } .mgn-all30-pc { margin: 30px !important; } .mgn-t30-pc { margin-top: 30px !important; } .mgn-r30-pc { margin-right: 30px !important; } .mgn-b30-pc { margin-bottom: 30px !important; } .mgn-l30-pc { margin-left: 30px !important; } .mgn-x30-pc { margin-right: 30px !important; margin-left: 30px !important; } .mgn-y30-pc { margin-top: 30px !important; margin-bottom: 30px !important; } .mgn-all40-pc { margin: 40px !important; } .mgn-t40-pc { margin-top: 40px !important; } .mgn-r40-pc { margin-right: 40px !important; } .mgn-b40-pc { margin-bottom: 40px !important; } .mgn-l40-pc { margin-left: 40px !important; } .mgn-x40-pc { margin-right: 40px !important; margin-left: 40px !important; } .mgn-y40-pc { margin-top: 40px !important; margin-bottom: 40px !important; } .mgn-xAuto-pc { margin-right: auto !important; margin-left: auto !important; } } /*-------------------------------------------------------------------------------- ==Padding== ----------------------------------------*----------------------------------------*/ .pdg-all0 { padding: 0 !important; } .pdg-t0 { padding-top: 0 !important; } .pdg-r0 { padding-right: 0 !important; } .pdg-b0 { padding-bottom: 0 !important; } .pdg-l0 { padding-left: 0 !important; } .pdg-x0 { padding-right: 0 !important; padding-left: 0 !important; } .pdg-y0 { padding-top: 0 !important; padding-bottom: 0 !important; } .pdg-all5 { padding: 5px !important; } .pdg-t5 { padding-top: 5px !important; } .pdg-r5 { padding-right: 5px !important; } .pdg-b5 { padding-bottom: 5px !important; } .pdg-l5 { padding-left: 5px !important; } .pdg-x5 { padding-right: 5px !important; padding-left: 5px !important; } .pdg-y5 { padding-top: 5px !important; padding-bottom: 5px !important; } .pdg-all10 { padding: 10px !important; } .pdg-t10 { padding-top: 10px !important; } .pdg-r10 { padding-right: 10px !important; } .pdg-b10 { padding-bottom: 10px !important; } .pdg-l10 { padding-left: 10px !important; } .pdg-x10 { padding-right: 10px !important; padding-left: 10px !important; } .pdg-y10 { padding-top: 10px !important; padding-bottom: 10px !important; } .pdg-all20 { padding: 20px !important; } .pdg-t20 { padding-top: 20px !important; } .pdg-r20 { padding-right: 20px !important; } .pdg-b20 { padding-bottom: 20px !important; } .pdg-l20 { padding-left: 20px !important; } .pdg-x20 { padding-right: 20px !important; padding-left: 20px !important; } .pdg-y20 { padding-top: 20px !important; padding-bottom: 20px !important; } .pdg-all30 { padding: 30px !important; } .pdg-t30 { padding-top: 30px !important; } .pdg-r30 { padding-right: 30px !important; } .pdg-b30 { padding-bottom: 30px !important; } .pdg-l30 { padding-left: 30px !important; } .pdg-x30 { padding-right: 30px !important; padding-left: 30px !important; } .pdg-y30 { padding-top: 30px !important; padding-bottom: 30px !important; } .pdg-all40 { padding: 40px !important; } .pdg-t40 { padding-top: 40px !important; } .pdg-r40 { padding-right: 40px !important; } .pdg-b40 { padding-bottom: 40px !important; } .pdg-l40 { padding-left: 40px !important; } .pdg-x40 { padding-right: 40px !important; padding-left: 40px !important; } .pdg-y40 { padding-top: 40px !important; padding-bottom: 40px !important; } @media screen and (max-width: 767px) { .pdg-all0-sp { padding: 0 !important; } .pdg-t0-sp { padding-top: 0 !important; } .pdg-r0-sp { padding-right: 0 !important; } .pdg-b0-sp { padding-bottom: 0 !important; } .pdg-l0-sp { padding-left: 0 !important; } .pdg-x0-sp { padding-right: 0 !important; padding-left: 0 !important; } .pdg-y0-sp { padding-top: 0 !important; padding-bottom: 0 !important; } .pdg-all5-sp { padding: 5px !important; } .pdg-t5-sp { padding-top: 5px !important; } .pdg-r5-sp { padding-right: 5px !important; } .pdg-b5-sp { padding-bottom: 5px !important; } .pdg-l5-sp { padding-left: 5px !important; } .pdg-x5-sp { padding-right: 5px !important; padding-left: 5px !important; } .pdg-y5-sp { padding-top: 5px !important; padding-bottom: 5px !important; } .pdg-all10-sp { padding: 10px !important; } .pdg-t10-sp { padding-top: 10px !important; } .pdg-r10-sp { padding-right: 10px !important; } .pdg-b10-sp { padding-bottom: 10px !important; } .pdg-l10-sp { padding-left: 10px !important; } .pdg-x10-sp { padding-right: 10px !important; padding-left: 10px !important; } .pdg-y10-sp { padding-top: 10px !important; padding-bottom: 10px !important; } .pdg-all20-sp { padding: 20px !important; } .pdg-t20-sp { padding-top: 20px !important; } .pdg-r20-sp { padding-right: 20px !important; } .pdg-b20-sp { padding-bottom: 20px !important; } .pdg-l20-sp { padding-left: 20px !important; } .pdg-x20-sp { padding-right: 20px !important; padding-left: 20px !important; } .pdg-y20-sp { padding-top: 20px !important; padding-bottom: 20px !important; } .pdg-all30-sp { padding: 30px !important; } .pdg-t30-sp { padding-top: 30px !important; } .pdg-r30-sp { padding-right: 30px !important; } .pdg-b30-sp { padding-bottom: 30px !important; } .pdg-l30-sp { padding-left: 30px !important; } .pdg-x30-sp { padding-right: 30px !important; padding-left: 30px !important; } .pdg-y30-sp { padding-top: 30px !important; padding-bottom: 30px !important; } .pdg-all40-sp { padding: 40px !important; } .pdg-t40-sp { padding-top: 40px !important; } .pdg-r40-sp { padding-right: 40px !important; } .pdg-b40-sp { padding-bottom: 40px !important; } .pdg-l40-sp { padding-left: 40px !important; } .pdg-x40-sp { padding-right: 40px !important; padding-left: 40px !important; } .pdg-y40-sp { padding-top: 40px !important; padding-bottom: 40px !important; } } @media print, screen and (min-width: 768px) { .pdg-all0-pc { padding: 0 !important; } .pdg-t0-pc { padding-top: 0 !important; } .pdg-r0-pc { padding-right: 0 !important; } .pdg-b0-pc { padding-bottom: 0 !important; } .pdg-l0-pc { padding-left: 0 !important; } .pdg-x0-pc { padding-right: 0 !important; padding-left: 0 !important; } .pdg-y0-pc { padding-top: 0 !important; padding-bottom: 0 !important; } .pdg-all5-pc { padding: 5px !important; } .pdg-t5-pc { padding-top: 5px !important; } .pdg-r5-pc { padding-right: 5px !important; } .pdg-b5-pc { padding-bottom: 5px !important; } .pdg-l5-pc { padding-left: 5px !important; } .pdg-x5-pc { padding-right: 5px !important; padding-left: 5px !important; } .pdg-y5-pc { padding-top: 5px !important; padding-bottom: 5px !important; } .pdg-all10-pc { padding: 10px !important; } .pdg-t10-pc { padding-top: 10px !important; } .pdg-r10-pc { padding-right: 10px !important; } .pdg-b10-pc { padding-bottom: 10px !important; } .pdg-l10-pc { padding-left: 10px !important; } .pdg-x10-pc { padding-right: 10px !important; padding-left: 10px !important; } .pdg-y10-pc { padding-top: 10px !important; padding-bottom: 10px !important; } .pdg-all20-pc { padding: 20px !important; } .pdg-t20-pc { padding-top: 20px !important; } .pdg-r20-pc { padding-right: 20px !important; } .pdg-b20-pc { padding-bottom: 20px !important; } .pdg-l20-pc { padding-left: 20px !important; } .pdg-x20-pc { padding-right: 20px !important; padding-left: 20px !important; } .pdg-y20-pc { padding-top: 20px !important; padding-bottom: 20px !important; } .pdg-all30-pc { padding: 30px !important; } .pdg-t30-pc { padding-top: 30px !important; } .pdg-r30-pc { padding-right: 30px !important; } .pdg-b30-pc { padding-bottom: 30px !important; } .pdg-l30-pc { padding-left: 30px !important; } .pdg-x30-pc { padding-right: 30px !important; padding-left: 30px !important; } .pdg-y30-pc { padding-top: 30px !important; padding-bottom: 30px !important; } .pdg-all40-pc { padding: 40px !important; } .pdg-t40-pc { padding-top: 40px !important; } .pdg-r40-pc { padding-right: 40px !important; } .pdg-b40-pc { padding-bottom: 40px !important; } .pdg-l40-pc { padding-left: 40px !important; } .pdg-x40-pc { padding-right: 40px !important; padding-left: 40px !important; } .pdg-y40-pc { padding-top: 40px !important; padding-bottom: 40px !important; } } /*----------------------------------------*---------------------------------------- ==Pagination== ----------------------------------------*----------------------------------------*/ .pagination { border-radius: 3px; text-align: center; } .pagination a, .pagination span { position: relative; margin-left: -1px; color: #333; padding: 10px 0; text-decoration: none; background: #fff; border: 1px solid #ccc; display: block; } .pagination li:first-child a, .pagination li:first-child span { margin-left: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .pagination li:last-child a, .pagination li:last-child span { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .pagination a:hover, .pagination span:hover { background: #f2f2f2; } .pagination .current a, .pagination .current a:hover, .pagination .current span { z-index: 2; color: #fff; cursor: default; background: #f00; } @media screen and (max-width: 767px) { .pagination { display: table; width: 100%; } .pagination li { display: table-cell; vertical-align: middle; } .pagination .top, .pagination .home { width: 50%; } } @media print, screen and (min-width: 768px) { .pagination { margin-left: auto; margin-right: auto; margin-top: 40px; letter-spacing: -.4em; } .pagination li { display: inline-block; letter-spacing: normal; } .pagination a, .pagination span { padding-left: 20px; padding-right: 20px; } .pagination .top a, .pagination .home a { padding-left: 40px; padding-right: 40px; } } /*----------------------------------------*---------------------------------------- ==PostNav== ----------------------------------------*----------------------------------------*/ .postNav { border-radius: 3px; text-align: center; margin-left: auto; margin-right: auto; letter-spacing: -.4em; } .postNav li { display: inline-block; letter-spacing: normal; } .postNav a, .postNav span { position: relative; margin-left: -1px; text-decoration: none; background-color: #fff; border: 1px solid #ccc; display: block; padding: 10px 0; } .postNav a { color: #333; } .postNav span { color: #ccc; } .postNav a:hover { background-color: #f2f2f2; } .postNav a:before, .postNav a:after, .postNav span:before, .postNav span:after { font-family: "FontAwesome"; } .postNav .next a:before, .postNav .next span:before { content: "\f104"; } .postNav .previous a:after, .postNav .previous span:after { content: "\f105"; } .postNav .top a:after { content: "\f106"; } .postNav .home a:after { content: "\f015"; } @media screen and (max-width: 767px) { .postNav { font-size: 1.3rem; } .postNav li { width: 50%; } .postNav .next a, .postNav .next span, .postNav .previous a, .postNav .previous span { border-bottom: none; } .postNav .next a:before, .postNav .next span:before { margin-right: 10px; } .postNav .previous a:after, .postNav .previous span:after { margin-left: 10px; } .postNav .top a:after { margin-left: 10px; } .postNav .home a:after { margin-left: 10px; } .postNav .next a, .postNav .next span { border-radius: 3px 0 0 0; } .postNav .previous a, .postNav .previous span { border-radius: 0 3px 0 0; } .postNav .top a, .postNav .top span { border-radius: 0 0 0 3px; } .postNav .home a, .postNav .home span { border-radius: 0 0 3px 0; } } @media print, screen and (min-width: 768px) { .postNav a, .postNav span { padding-left: 20px; padding-right: 20px; } .postNav .next a:before, .postNav .next span:before { margin-right: 10px; } .postNav .previous a:after, .postNav .previous span:after { margin-left: 10px; } .postNav .top a:after { margin-left: 10px; } .postNav .home a:after { margin-left: 10px; } .postNav .next a, .postNav .next span { margin-left: 0; border-radius: 3px 0 0 3px; } .postNav .previous a, .postNav .previous span { border-radius: 0 3px 3px 0; } } /*----------------------------------------*---------------------------------------- ==Slick== ----------------------------------------*----------------------------------------*/ .slick-slider { position: relative; display: none; z-index: 0; } .slick-list { z-index: 1; } @media all and (max-width: 767px) { .slick { overflow: hidden; } } /*---------------------------------------- thumbnails ----------------------------------------*/ .slick-slider--thumbnails { margin-left: auto; margin-right: auto; } .slick-slider--thumbnails .slick-slide { opacity: .25; } .slick-slider--thumbnails .slick-current { opacity: 1; } /*---------------------------------------- arrow ----------------------------------------*/ .slick-prev, .slick-next { z-index: 2; font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; padding: 0; cursor: pointer; border: none; outline: none; margin-top: -30px; background: none; } .slick-prev:hover, .slick-next:hover { outline: none; } .slick-prev:before, .slick-next:before { font-family: 'FontAwesome'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 60px; line-height: 1; opacity: .5; color: #333; } .slick-prev:before { content: '\f104'; } .slick-next:before { content: '\f105'; } /* outside */ @media all and (max-width: 767px) { .slick-prev, .slick-next { margin-top: -20px; } .slick-prev:before, .slick-next:before { font-size: 40px; } .slick-prev { left: 10px; } .slick-next { right: 10px; } /* outside */ .arrows-outside .slick-prev { left: -10px; } .arrows-outside .slick-next { right: -10px; } } @media print, screen and (min-width: 768px) { .slick-prev { left: 20px; } .slick-next { right: 20px; } /* outside */ .arrows-outside .slick-prev { left: -40px; } .arrows-outside .slick-next { right: -40px; } } /*---------------------------------------- dots ----------------------------------------*/ .slick-dots { text-align: center; letter-spacing: -.4em; line-height: 0; z-index: 2; position: absolute; bottom: 15px; left: 0; width: 100%; } .slick-dots li { display: inline-block; letter-spacing: normal; margin: 0 5px; } .slick-dots button { font-size: 0; display: block; cursor: pointer; color: transparent; border: 0; outline: none; padding: 0; background: rgba(0,0,0,.25); width: 10px; height: 10px; border-radius: 50%; } .slick-dots button:hover, .slick-dots button:active, .slick-dots button:focus { outline: none; } .slick-dots button:hover, .slick-dots button:active, .slick-dots .slick-active button { background: rgba(0,0,0,.5); } /* 長方形ドットの場合 */ .dots-bar { } .dots-bar .slick-dots button { width: 40px; height: 10px; border-radius: 0; } /* outside */ .dots-outside .slick-dots { margin-top: 10px; position: static; width: auto; } /*----------------------------------------*---------------------------------------- ==Table== ----------------------------------------*----------------------------------------*/ table { background-color: transparent; max-width: 100%; width: 100%; } tbody th { text-align: left; white-space: nowrap; } caption { padding-top: 5px; text-align: right; caption-side: bottom; font-weight: normal; } @media screen and (max-width: 767px) { th, td { text-align: left; } tbody th { white-space: normal; } } /*---------------------------------------- common ----------------------------------------*/ .table-widthAuto { width: auto; } .td-number { text-align: right; white-space: nowrap; } .td-price { color: #e50000; /*red*/ text-align: right; white-space: nowrap; } /*---------------------------------------- simple ----------------------------------------*/ .table-simple th, .table-simple td { padding: 2px 5px; } .table-simple th { font-weight: normal; } /*---------------------------------------- basic ----------------------------------------*/ .table-basic th, .table-basic td { border: 1px solid #ccc; padding: 5px 10px; } .table-basic th { background-color: #f2f2f2; } /* thead */ .table-basic thead th, .table-basic thead td { border-bottom: 3px double #ccc; background-color: #f2f2f2; } /* tfoot */ .table-basic tfoot tj, .table-basic tfoot td { border-top: 3px double #ccc; background-color: #f2f2f2; } @media screen and (max-width: 767px) { .table-basic.table-responsive { border-top: 1px solid #ccc; } .table-basic.table-responsive th, .table-basic.table-responsive td { border-top: none; } } /*---------------------------------------- border ----------------------------------------*/ .table-border th, .table-border td { border-bottom: 1px dotted #ccc; padding: 10px 0; vertical-align: middle; } /* thead */ .table-border thead th { border-bottom: 3px double #ccc; padding: 5px 0; } /* tbody */ .table-border tbody th { position: relative; } .table-border:not(table-responsive) tbody tr:last-child th, .table-border:not(table-responsive) tbody tr:last-child td { border-bottom: none; } @media screen and (max-width: 767px) { .table-border.table-responsive { border-top: 1px solid #ccc; } .table-border.table-responsive th { padding: 5px; } .table-border.table-responsive tr:not(:last-child) td:last-child { border-bottom-style: solid; } .table-border.table-responsive th { background: #f2f2f2; } .table-border.table-responsive tbody tr:last-child td:last-child { border-bottom: none; } .table-border.table-responsive tfoot td:not(:first-child) { border-top-style: dotted; border-top-width: 1px; } } @media print, screen and (min-width: 768px) { .table-border tbody th { padding-right: 40px; } } /* tfoot */ .table-border tfoot td { border-top: 3px double #ccc; border-bottom: none; padding: 5px 0; } /* with-border */ .table-border--withBorderTop { border-top: 1px solid #ccc; } .table-border--withBorderBottom { border-bottom: 1px solid #ccc; } /*---------------------------------------- responsive ----------------------------------------*/ .table-responsive { } @media screen and (max-width: 767px) { .table-responsive th, .table-responsive td { display: block; } .text-center .table-responsive th, .text-center .table-responsive td, .text-center-sp .table-responsive th, .text-center-sp .table-responsive td, .table-responsive.text-center th, .table-responsive.text-center td, .table-responsive.text-center-sp th, .table-responsive.text-center-sp td { text-align: center; } .table-responsive thead { display: none; } .table-responsive td[data-label]:before { content: "[ "attr(data-label)" ]"; margin-right: 10px; } } /*----------------------------------------*---------------------------------------- ==TabNav== ----------------------------------------*----------------------------------------*/ .tabNav { border-bottom: 1px solid #ccc; } .tabNav:before, .tabNav:after { display: table; content: " "; } .tabNav:after { clear: both; } /* li */ .tabNav li { float: left; margin-bottom: -1px; } .tabNav li + li { margin-left: 10px; } /* a */ .tabNav a { display: block; padding: 5px 10px; border: 1px solid transparent; border-radius: 3px 3px 0 0; } .tabNav a:focus, .tabNav a:hover { border-color: #f2f2f2 #f2f2f2 #ccc; } .tabNav a.is-active, .tabNav a.is-active:focus, .tabNav a.is-active:hover, .tabNav li.is-active a, .tabNav li.is-active a:focus, .tabNav li.is-active a:hover { background-color: #fff; border-color: #ccc #ccc transparent; } /* content */ .tab-content { display: none; } .tab-content.is-active { display: block; } /*----------------------------------------*---------------------------------------- ==Thumbnail== ----------------------------------------*----------------------------------------*/ .thumbnail > img, .thumbnail a > img { display: block; } .thumbnail { display: block; padding: 4px; background-color: #fff; border: 1px solid #ccc; } .thumbnail > img, .thumbnail a > img { margin-right: auto; margin-left: auto; } a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: #f2f2f2; } .thumbnail .caption { padding: 20px 10px 10px 10px; color: #333; } /*----------------------------------------*---------------------------------------- ==Visible== ----------------------------------------*----------------------------------------*/ .visible-sp, .visible-pc, .visible-block-sp, .visible-inline-sp, .visible-inline-block-sp, .visible-block-pc, .visible-inline-pc, .visible-inline-block-pc { display: none !important; } @media screen and (max-width: 767px) { .visible-sp { display: block !important; } table.visible-sp { display: table; } tr.visible-sp { display: table-row !important; } th.visible-sp, td.visible-sp { display: table-cell !important; } .visible-block-sp { display: block !important; } .visible-inline-sp { display: inline !important; } .visible-inline-block-sp { display: inline-block !important; } } @media print, screen and (min-width: 768px) { .visible-pc { display: block !important; } table.visible-pc { display: table; } tr.visible-pc { display: table-row !important; } th.visible-pc, td.visible-pc { display: table-cell !important; } .visible-block-pc { display: block !important; } .visible-inline-pc { display: inline !important; } .visible-inline-block-pc { display: inline-block !important; } } /*----------------------------------------*---------------------------------------- ==Hidden== ----------------------------------------*----------------------------------------*/ @media screen and (max-width: 767px) { .hidden-sp { display: none !important; } } @media print, screen and (min-width: 768px) { .hidden-pc { display: none !important; } } @media print { .hidden-print { display: none !important; } } /*----------------------------------------*---------------------------------------- ==Javascript== javascript用CSS ----------------------------------------*----------------------------------------*/ .js-mh {} .js-mh-pc {} .js-mh-sp {} @charset "utf-8"; /*----------------------------------------*---------------------------------------- composition ----------------------------------------*----------------------------------------*/ html { font-size: 10px; } body { color: #333; font-family: "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size: 1.5rem; font-weight: bold; line-height: 1.5; } /*----------------------------------------*---------------------------------------- topimage ----------------------------------------*----------------------------------------*/ @media screen and (max-width: 767px) { #topimage .container { padding: 0; } #topimage .row { margin: 0; } } @media print, screen and (min-width: 768px) { #topimage { background: #1a1a1a url(../img/topimage.jpg) no-repeat center top; } #topimage .row { margin-bottom: 0; } } /*---------------------------------------- header ----------------------------------------*/ #header .logo { background: url(../img/logo.png) no-repeat left center; background-size: contain; margin-bottom: 0; } @media screen and (max-width: 767px) { #header { padding: 0; margin-bottom: 0; } #header .logo { height: 91px; } } @media print, screen and (min-width: 768px) { #header { padding-top: 10px; } #header .logo { width: 320px; height: 91px; } } /*---------------------------------------- lead ----------------------------------------*/ #lead { color: #c8da33; } #lead .lang-ja { border-bottom: 3px solid #c8da33; font-size: 1.8rem; padding-bottom: 5px; margin-bottom: 5px; line-height: 1.25; } #lead .lang-en { font-size: 1.2rem; } #lead .lang-en + .lang-ja { margin-top: 2rem; } @media screen and (max-width: 767px) { #lead { background: #1a1a1a; padding: 20px; } } @media print, screen and (min-width: 768px) { #lead { min-height: 610px; position: relative; } #lead dl { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 85%; } } /*----------------------------------------*---------------------------------------- about ----------------------------------------*----------------------------------------*/ #about { background: #1a274c; font-size: 1.7rem; color: #fff; border-top: 10px solid #d20037; border-bottom: 10px solid #d20037; } #about span { color: #fff100; } /*----------------------------------------*---------------------------------------- contents ----------------------------------------*----------------------------------------*/ #contents { background: #020513 url(../img/contents__bg.jpg) no-repeat center top fixed; background-size: cover; } /*----------------------------------------*---------------------------------------- flow ----------------------------------------*----------------------------------------*/ @media screen and (max-width: 767px) { } @media print, screen and (min-width: 768px) { #flow { padding-bottom: .1px; } } /*----------------------------------------*---------------------------------------- download ----------------------------------------*----------------------------------------*/ #download .container { text-align: center; } #download h1 { color: #D20037; border-bottom: 2px solid #D20037; margin-bottom: 10px; } #download h2 { background: #D20037; color: #fff; margin-bottom: 20px; } #download .dl-btn { background: url(../img/download__arrow.gif) no-repeat center top; background-size: 34px auto; padding-top: 31px; } @media screen and (max-width: 767px) { #download { padding-top: 0; } #download h1 { font-size: 2rem; padding-bottom: 5px; } #download h2 { font-size: 2rem; padding: 5px; } #download caption { text-align: center; } #download th { border-bottom: 1px solid #231815; padding-bottom: 5px; margin-bottom: 5px; } #download tr + tr th { margin-top: 10px; } } @media print, screen and (min-width: 768px) { #download { padding-top: 10px; padding-bottom: 10px; } #download .card_block { padding: 30px; } #download h1 { font-size: 2.2rem; display: inline-block; } #download h2 { font-size: 2.6rem; display: inline-block; padding: 0 40px; } #download td { width: 217px; } #download th, #download td { border-bottom: 1px solid #231815; padding: 5px 10px; } #download td { border-left: 1px solid #231815; } } /*----------------------------------------*---------------------------------------- item ----------------------------------------*----------------------------------------*/ #item { padding-top: 30px; } #item h1 { text-align: center; font-size: 1.5rem; margin-bottom: 10px; } #item .card_block { padding: 30px; } #item .price { line-height: 1.25; } #item .price .number { font-size: 2.4rem; } #item .price .tax { font-size: 1.3rem; } #item .col .col { font-weight: normal; text-align: center; } #item .photo { margin-bottom: 10px; } #item .lang-ja { margin-bottom: 5px; } @media screen and (max-width: 767px) { #item .price { text-align: center; } } @media print, screen and (min-width: 768px) { #item .lang-ja { font-size: 1.2rem; } #item .lang-en { font-size: 1.1rem; } } /*----------------------------------------*---------------------------------------- chara ----------------------------------------*----------------------------------------*/ .c-chara { color: #fff; } .c-chara header { border-left: solid 10px #3097AD; padding-left: 15px; margin-bottom: 20px; } .c-chara h1 { font-size: 1.9rem; margin-bottom: 0; } /*---------------------------------------- sound ----------------------------------------*/ #sound .function { font-weight: normal; font-size: 1.3rem; } @media screen and (max-width: 767px) { #sound .function { text-align: center; } #sound .function .media_object { margin-bottom: 5px; } #sound .media-pc { margin-bottom: 10px; } } @media print, screen and (min-width: 768px) { #sound .function .media_object--left { padding-right: 10px; } } /*---------------------------------------- dcc-control ----------------------------------------*/ #dcc-control th { white-space: nowrap; padding-right: 1em; } #dcc-control .card { background: rgba(68,114,196,.5); } /*----------------------------------------*---------------------------------------- footer ----------------------------------------*----------------------------------------*/ #footer { padding: 20px 0 46px 0; background: #1A274C url(../img/footer__bg.png) repeat-x bottom; color: #fff; font-size: 1.3rem; font-weight: normal; line-height: 1.25; } @media screen and (max-width: 767px) { #footer .container { text-align: center; } #footer .logo { margin-bottom: 10px; } #footer .phone-sp { color: #fff !important; } } @media print, screen and (min-width: 768px) { #footer .logo { float: left; margin-right: 10px; } } /*----------------------------------------*---------------------------------------- pageTop ----------------------------------------*----------------------------------------*/ #pageTop { position: fixed; text-decoration: none; color: #fff; background: rgba(0,0,0, .8); text-align: center; display: block; } @media screen and (max-width: 767px) { /* #pageTopを使う場合 */ body { padding-bottom: 40px; } #pageTop { width: 100%; height: 40px; line-height: 40px; bottom: 0; left: 0; } } @media print, screen and (min-width: 768px) { #pageTop { bottom: 20px; right: 20px; width: 100px; height: 100px; border-radius: 50%; line-height: 100px; font-size: 1.3rem; } } /*----------------------------------------*---------------------------------------- copyright ----------------------------------------*----------------------------------------*/ #copyright { padding: 10px 0; background: #1A274C; color: #fff; font-size: 1.3rem; font-weight: normal; }