@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」で「検索・置換」してOK！（#付で検索必須！） #333 ⇒ 基本的な文字色 #1a1a1a ⇒ 見出しの色 #ccc ⇒ ボーダー色 #f2f2f2 ⇒ ボーダー色より薄い背景に使用する色 #c00 ⇒ メインカラー #f00 ⇒ メインカラーのホバー色 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; } /* change colours to suit your needs */ ins { background-color: #ff9; color: #333; text-decoration: none; } /* change colours to suit your needs */ 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; } /* change border colour to suit your needs */ 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 { content: " "; /* 旧Operaをサポートしないのであれば空白でOK */ display: block; clear: both; } /*================================================================================================================================== = STYLE -- ==00== Basic Style -- ==01== Badge -- ==02== Btn -- ==03== Card -- ==04== Color -- ==05== Ebox -- ==06== Grid -- ==07== Headline -- ==08== Image -- ==09== ImageReplacement -- ==10== List[UL/OL/DL] -- ==11== Margin -- ==12== Padding -- ==13== Pagination -- ==14== Slick -- ==15== Social -- ==16== Table -- ==17== Tab-nav -- ==18== Thumbnail -- ==19== Visible & Hidden ※ ==番号== で検索するとその項目まで素早くジャンプできます。 ==================================================================================================================================*/ /*----------------------------------------*---------------------------------------- ==00== Basic Style ----------------------------------------*----------------------------------------*/ 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; -moz-border-radius: 3px; -webkit-border-radius: 3px; 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, .mark { background-color: #ff3; } pre { display: block; border: 1px solid #ccc; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; overflow: auto; padding: 20px; } pre code { padding: 0; font-size: inherit; color: inherit; background-color: transparent; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } small, .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; } } /*---------------------------------------- size ----------------------------------------*/ .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; } @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; } } @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; } } /*---------------------------------------- a ----------------------------------------*/ a { color: #333; } a:hover, a:active { color: #c00; } /* unstyled */ a.a-unstyled { text-decoration: none; } a.a-unstyled:hover, a.a-unstyled:active { text-decoration: underline; } /*---------------------------------------- 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); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } /*----------------------------------------*---------------------------------------- ==01== Badge ----------------------------------------*----------------------------------------*/ .badge { font-size: 1.2rem; color: #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; display: inline-block; vertical-align: middle; padding: 1px 10px; top: -0.1em; position: relative; } h1 .badge, h2 .badge, h3 .badge, h4 .badge, h5 .badge, h6 .badge { line-height: normal; } .badge--before { margin-right: 5px; } .badge--after { margin-left: 5px; } /*----------------------------------------*---------------------------------------- ==02== Btn ----------------------------------------*----------------------------------------*/ /*---------------------------------------- common ----------------------------------------*/ .btn { border: none; cursor: pointer; display: inline-block; text-decoration: none; vertical-align: baseline; position: relative; background: #c00; color: #fff; padding: 10px 40px 10px 15px; transition: all .2s linear; } .btn:hover, .btn:active { text-decoration: none; background: #f00; 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 { background: #f2f2f2; color: #333; } @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 { background: #f2f2f2; } } @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 { background: #f2f2f2; } } /*---------------------------------------- radius ----------------------------------------*/ .btn--radius { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /*---------------------------------------- round ----------------------------------------*/ .btn--round { -moz-border-radius: 100px; -webkit-border-radius: 100px; 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; -moz-border-radius: 0 !important; -webkit-border-radius: 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%; } } /*---------------------------------------- buttonGroup ----------------------------------------*/ .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: 0; border-left: none; } /* 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 { -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .btnGroup--radius > .btn:last-child { -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } /* round */ .btnGroup--round > .btn:first-child { -moz-border-radius: 100px 0 0 100px; -webkit-border-radius: 100px 0 0 100px; border-radius: 100px 0 0 100px; } .btnGroup--round > .btn:last-child { -moz-border-radius: 0 100px 100px 0; -webkit-border-radius: 0 100px 100px 0; 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-top: 0; border-top: none; border-left: 1px solid #333; } .btnGroup--vertical.btnGroup--radius > .btn:first-child { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .btnGroup--vertical.btnGroup--radius > .btn:last-child { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } .btnGroup--vertical.btnGroup--round > .btn:first-child { -moz-border-radius: 100px 100px 0 0; -webkit-border-radius: 100px 100px 0 0; border-radius: 100px 100px 0 0; } .btnGroup--vertical.btnGroup--round > .btn:last-child { -moz-border-radius: 0 0 100px 100px; -webkit-border-radius: 0 0 100px 100px; 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-top: 0; border-top: none; border-left: 1px solid #333; } } /*----------------------------------------*---------------------------------------- ==03== Card ----------------------------------------*----------------------------------------*/ .card { position: relative; border: 1px solid #ccc; } .card_block { padding: 20px; } .card_block > *:last-child { margin-bottom: 0; } /*---------------------------------------- header ----------------------------------------*/ .card_header { padding: 5px 15px; background-color: #f2f2f2; border-bottom: 1px solid #ccc; } /*---------------------------------------- footer ----------------------------------------*/ .card_footer { padding: 5px 15px; background-color: #f2f2f2; border-top: 1px solid #ccc; } /*---------------------------------------- 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,.15); border: none; } /*---------------------------------------- group ----------------------------------------*/ @media print, screen and (min-width: 768px) { .cardGroup { display: table; width: 100%; table-layout: fixed; } cardGroup + .cardGroup { margin-top: -21px; } .cardGroup .card { display: table-cell; vertical-align: top; } .cardGroup .card + .card { margin-left: 0; border-left: none; overflow: hidden; } } /*---------------------------------------- radius 角丸を使わない場合は一括コメントアウト！ ----------------------------------------*/ /* .card { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .card_header:first-child { -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; } .card_footer:last-child { -moz-border-radius: 0 0 2px 2px; -webkit-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; } .card_img-top { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .card_img-bottom { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } .cardGroup .card:first-child, .cardGroup .card:first-child .card_header, .cardGroup .card:first-child .card_img-top { -moz-border-top-right-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; } .cardGroup .card:first-child, .cardGroup .card:first-child .card_footer, .cardGroup .card:first-child .card_img-bottom { -moz-border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .cardGroup .card:last-child, .cardGroup .card:last-child .card_header, .cardGroup .card:last-child .card_img-top { -moz-border-top-left-radius: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; } .cardGroup .card:last-child, .cardGroup .card:last-child .card_footer, .cardGroup .card:last-child .card_img-bottom { -moz-border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } .cardGroup .card:not(:first-child):not(:last-child) { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .cardGroup .card:not(:first-child):not(:last-child) .card_img-top, .cardGroup .card:not(:first-child):not(:last-child) .card_img-bottom { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } */ /*---------------------------------------- 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; } /*----------------------------------------*---------------------------------------- ==04== Color 色は適当に変えよう ----------------------------------------*----------------------------------------*/ /* primaryColor */ .font-primary { color: #c00; } .bg-primary { background: #c00; } /* white */ .font-white { color: #fff; } .bg-white { background-color: #fff; } /* red */ .font-red { color: #f44336; } .bg-red { background-color: #f44336; } /* pink */ .font-pink { color: #f48fb1; } .bg-pink { background-color: #f48fb1; } /* orange */ .font-orange { color: #ff9800; } .bg-orange { background-color: #ff9800; } /* yellow */ .font-yellow { color: #ffc107; } .bg-yellow { background-color: #ffc107; } /* green */ .font-green { color: #4caf50; } .bg-green { background-color: #4caf50; } /* yellowGreen */ .font-yellowGreen { color: #8bc34a; } .bg-yellowGreen { background-color: #8bc34a; } /* blue */ .font-blue { color: #2196f3; } .bg-blue { background-color: #2196f3; } /* skyBlue */ .font-skyBlue { color: #03a9f4; } .bg-skyBlue { background-color: #03a9f4; } /* black */ .font-black { color: #424242; } .bg-black { background-color: #424242; } /*----------------------------------------*---------------------------------------- ==05== Ebox ----------------------------------------*----------------------------------------*/ .ebox { position: relative; padding-top: 20px; margin-top: -20px; } .pagination, .postNav, .ebox address, .ebox dl, .ebox hr, .ebox ol, .ebox p, .ebox pre, .ebox table, .ebox ul, .ebox .btnGroup, .ebox .card, .ebox .cardGroup, .ebox .row, .ebox .row > .clearfix, .ebox .hr-diamond, .ebox .hr-circle, .ebox .media, .ebox .slick_slider, .ebox .thumbnail { margin-bottom: 20px; } .ebox .row--10 > .clearfix { margin-bottom: 10px; } .ebox .row--20 > .clearfix { margin-bottom: 20px; } .ebox .row--30 > .clearfix { margin-bottom: 30px; } .ebox .row--40 > .clearfix { margin-bottom: 40px; } .ebox .row--grid > .clearfix { margin-bottom: 0; } .ebox ol ol, .ebox ul ul, .ebox ol ul, .ebox ul ol, .ebox .col *:last-child, .ebox .col *:last-child > *:last-child, .ebox .col *:last-child > *:last-child > *:last-child, .ebox .slick-dots, .ebox .tabNav { 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, .ebox h1, .ebox h2, .ebox h3, .ebox h4, .ebox h5, .ebox h6, .ebox p, .ebox li, .ebox dt, .ebox dd { background: rgba(0,0,100,.1); } */ @media screen and (max-width: 767px) { .ebox { margin-bottom: 40px; } .ebox--bg { padding-top: 20px; padding-bottom: 20px; margin-bottom: 20px; } .ebox--bg + .ebox:not(.ebox--bg) { margin-top: 20px; } .ebox:not(.ebox--bg) + .ebox--bg { margin-top: 40px; } #contents .ebox:last-child.ebox--bg { margin-bottom: 0; } .ebox .col--12-sp { margin-bottom: 20px; } .ebox .col:last-child { margin-bottom: 0; } } @media print, screen and (min-width: 768px) { .ebox { margin-bottom: 80px; } .ebox--bg { padding-top: 40px; padding-bottom: 40px; margin-bottom: 20px; } .ebox--bg + .ebox:not(.ebox--bg) { margin-top: 60px; } .ebox:not(.ebox--bg) + .ebox--bg { margin-top: 80px; } #contents .ebox:last-child.ebox--bg { margin-bottom: 0; } } /*----------------------------------------*---------------------------------------- ==06== Grid ----------------------------------------*----------------------------------------*/ .grid-972 { } .grid-960 { } /*---------------------------------------- container ----------------------------------------*/ .container { margin-right: auto; margin-left: auto; text-align: left; } .grid-972 .container { padding-right: 15px; padding-left: 15px; width: 972px; } .grid-960 .container { padding-right: 10px; padding-left: 10px; width: 960px; } @media screen and (max-width: 767px) { .container, .grid-972 .container, .grid-960 .container { width: 100%; } } /*---------------------------------------- row ----------------------------------------*/ @media screen and (max-width: 767px) { .row { margin-right: -10px; margin-left: -10px; } } @media print, screen and (min-width: 768px) { .grid-972 .row { margin-right: -15px; margin-left: -15px; } .grid-960 .row { margin-right: -10px; margin-left: -10px; } .grid-972 .row--10, .grid-960 .row--10 { margin-right: -5px; margin-left: -5px; } .grid-972 .row--20, .grid-960 .row--20 { margin-right: -10px; margin-left: -10px; } .grid-972 .row--30, .grid-960 .row--30 { margin-right: -15px; margin-left: -15px; } .grid-972 .row--40, .grid-960 .row--40 { margin-right: -20px; margin-left: -20px; } } /*---------------------------------------- col ----------------------------------------*/ .col { position: relative; min-height: 1px; } @media screen and (max-width: 767px) { .grid-972 .col { padding-right: 10px; padding-left: 10px; } .grid-960 .col { padding-right: 10px; padding-left: 10px; } } @media print, screen and (min-width: 768px) { .grid-972 .col { padding-right: 15px; padding-left: 15px; } .grid-960 .col { padding-right: 10px; padding-left: 10px; } } /*左右余白（10px） class="row--10"*/ .row--10 > .col, .grid-972 .row--10 > .col, .grid-960 .row--10 > .col { padding-right: 5px; padding-left: 5px; } /*左右余白（20px） class="row--20"*/ .row--20 > .col, .grid-972 .row--20 > .col, .grid-960 .row--20 > .col { padding-right: 10px; padding-left: 10px; } /*左右余白（30px） class="row--20"*/ .row--30 > .col, .grid-972 .row--30 > .col, .grid-960 .row--30 > .col { padding-right: 15px; padding-left: 15px; } /*左右余白（40px） class="row--20"*/ .row--40 > .col, .grid-972 .row--40 > .col, .grid-960 .row--40 > .col { padding-right: 20px; padding-left: 20px; } /*左右余白が必要ない場合は class="row-sprite"*/ .row--0 > .col, .grid-972 .row--0 > .col, .grid-960 .row--0 > .col { padding-right: 0; padding-left: 0; } /*上下左右余白が必要ない場合は　 class="row--grid"*/ .row--grid > .col, .grid-972 .row--grid > .col, .grid-960 .row--grid > .col { padding-right: 0; padding-left: 0; } @media screen and (max-width: 767px) { .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--x5-sp, .col--x8-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--x5-sp { width: 20%; } .col--x8-sp { width: 12.5%; } .col--pull0-sp { right: auto; } .col--pull1-sp { right: 8.33333333%; } .col--pull2-sp { right: 16.66666667%; } .col--pull3-sp { right: 25%; } .col--pull4-sp { right: 33.33333333%; } .col--pull5-sp { right: 41.66666667%; } .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--push1-sp { left: 8.33333333%; } .col--push2-sp { left: 16.66666667%; } .col--push3-sp { left: 25%; } .col--push4-sp { left: 33.33333333%; } .col--push5-sp { left: 41.66666667%; } .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--offset1-sp { margin-left: 8.33333333%; } .col--offset2-sp { margin-left: 16.66666667%; } .col--offset3-sp { margin-left: 25%; } .col--offset4-sp { margin-left: 33.33333333%; } .col--offset5-sp { margin-left: 41.66666667%; } .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%; } } @media print, screen and (min-width: 768px) { .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--x5-pc, .col--x8-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--x5-pc { width: 20%; } .col--x8-pc { width: 12.5%; } .col--pull0-pc { right: auto; } .col--pull1-pc { right: 8.33333333%; } .col--pull2-pc { right: 16.66666667%; } .col--pull3-pc { right: 25%; } .col--pull4-pc { right: 33.33333333%; } .col--pull5-pc { right: 41.66666667%; } .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--push1-pc { left: 8.33333333%; } .col--push2-pc { left: 16.66666667%; } .col--push3-pc { left: 25%; } .col--push4-pc { left: 33.33333333%; } .col--push5-pc { left: 41.66666667%; } .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--offset1-pc { margin-left: 8.33333333%; } .col--offset2-pc { margin-left: 16.66666667%; } .col--offset3-pc { margin-left: 25%; } .col--offset4-pc { margin-left: 33.33333333%; } .col--offset5-pc { margin-left: 41.66666667%; } .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%; } } /*---------------------------------------- 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%; } } /*----------------------------------------*---------------------------------------- ==07== 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 { font-weight: normal; color: #1a1a1a; line-height: 1.1; margin-bottom: 1em; } @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 { /* font-family: 'Noto Sans Japanese', sans-serif; */ } 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; text-transform: uppercase; } .h-tape:after { position: absolute; top: 0; left: 1%; content: ""; height: 100%; width: 98%; z-index: -999; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); transform: rotate(-2deg); background: #ccc; } /*----------------------------------------*---------------------------------------- ==08== Image ----------------------------------------*----------------------------------------*/ /*---------------------------------------- float ----------------------------------------*/ .float-left { float: left; } .float-right { float: right; } @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 { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /*---------------------------------------- img-circle ----------------------------------------*/ .img-circle { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } /*---------------------------------------- img-thumbnail ----------------------------------------*/ .img-thumbnail { display: inline-block; padding: .4rem; border: 1px solid #ccc; } /*---------------------------------------- media ----------------------------------------*/ .media, .media_body { overflow: hidden; zoom: 1; } .media_object, .media_body { display: table-cell; vertical-align: top; } .media_body { width: 10000px; } .media--middle .media_object, .media--middle .media_body, .media_object--middle { vertical-align: middle; } .media--bottom .media_object, .media--bottom .media_body, .media_object--bottom { vertical-align: bottom; } .media_object img { display: block; } .media_object img.img-thumbnail { max-width: none; } @media screen and (max-width: 767px) { .media_object--right { padding-left: 10px; } .media_object--left { padding-right: 10px; } .media--pc .media_body { overflow: auto; } .media--pc .media_object, .media--pc .media_body { display: block; vertical-align: auto; } .media--pc .media_body { width: auto; } } @media (min-width: 768px) { .media_object--right { padding-left: 20px; } .media_object--left { padding-right: 20px; } .media-pc .media_object--right { padding-left: 20px; } .media-pc .media_object--left { padding-right: 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%; } /*----------------------------------------*---------------------------------------- ==09== ImageReplacement ir = image replacement ----------------------------------------*----------------------------------------*/ .ir { overflow: hidden; text-indent: 100%; white-space: nowrap; } .ir > a, a.ir { display: block; } @media screen and (max-width: 767px) { .ir-sp { overflow: hidden; text-indent: 100%; white-space: nowrap; } .ir-sp > a, a.ir-sp { display: block; } } @media (min-width: 768px) { .ir-pc { overflow: hidden; text-indent: 100%; white-space: nowrap; } .ir-pc > a, a.ir-pc { display: block; } } /*----------------------------------------*---------------------------------------- ==10== List[UL/OL/DL] ----------------------------------------*----------------------------------------*/ /*---------------------------------------- basic ----------------------------------------*/ .list-basic li { list-style: circle; 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 { margin-top: .25em; padding-top: .25em; border-top: 1px dotted #ccc; } /*---------------------------------------- icon ----------------------------------------*/ .list-icon li { position: relative; padding-left: 1.5em; } .list-icon li:before { position: absolute; top: .25em; left: 2px; font-family: "FontAwesome"; content: "\f14a"; vertical-align: middle; font-size: 1.2rem; } .list-icon li li:before { content: "\f058"; } /*---------------------------------------- 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 { margin-top: 10px; } /* horizontal */ .dl-horizontal dt { overflow: hidden; clear: left; text-overflow: ellipsis; white-space: nowrap; } @media print, screen and (min-width: 768px) { .dl-horizontal dt { width: 160px; float: left; } .dl-horizontal dd { margin-left: 180px; } } /*-------------------------------------------------------------------------------- ==11== 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; } } /*-------------------------------------------------------------------------------- ==12== 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; } } /*----------------------------------------*---------------------------------------- ==13== Pagination ----------------------------------------*----------------------------------------*/ .pagination { -moz-border-radius: 3px; -webkit-border-radius: 3px; 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: #c00; } @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; 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 { -moz-border-radius: 3px; -webkit-border-radius: 3px; 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 { -moz-border-radius: 3px 0 0 0; -webkit-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0; } .postNav .previous a, .postNav .previous span { -moz-border-radius: 0 3px 0 0; -webkit-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0; } .postNav .top a, .postNav .top span { -moz-border-radius: 0 0 0 3px; -webkit-border-radius: 0 0 0 3px; border-radius: 0 0 0 3px; } .postNav .home a, .postNav .home span { -moz-border-radius: 0 0 3px 0; -webkit-border-radius: 0 0 3px 0; 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; -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .postNav .previous a, .postNav .previous span { -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; 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; } } /*---------------------------------------- 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; color: #fff; opacity: .5; color: #333; opacity: .50; } .slick-prev:before { content: '\f104'; } .slick-next:before { content: '\f105'; } /* inside */ .slick_arrows--inside {} /* outside */ .slick_arrows--outside {} @media all and (max-width: 767px) { .slick-prev, .slick-next { margin-top: -20px; } .slick-prev:before, .slick-next:before { font-size: 40px; } /* inside */ .slick_arrows--inside .slick-prev { left: 10px; } .slick_arrows--inside .slick-next { right: 10px; } /* outside */ .slick_arrows--outside .slick-prev { left: -10px; } .slick_arrows--outside .slick-next { right: -10px; } } @media print, screen and (min-width: 768px) { /* inside */ .slick_arrows--inside .slick-prev { left: 20px; } .slick_arrows--inside .slick-next { right: 20px; } /* outside */ .slick_arrows--outside .slick-prev { left: -40px; } .slick_arrows--outside .slick-next { right: -40px; } } /*---------------------------------------- dots ----------------------------------------*/ .slick-dots { text-align: center; letter-spacing: -.4em; line-height: 0; z-index: 2; } .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); } .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); } /* 丸いドットの場合 */ .slick_dots--circle .slick-dots button { width: 10px; height: 10px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } /* 長方形ドットの場合 */ .slick_dots--bar {} .slick_dots--bar .slick-dots button { width: 40px; height: 5px; } /* inside */ .slick_dots--inside .slick-dots { position: absolute; bottom: 15px; left: 0; width: 100%; } /* outside */ .slick_dots--outside .slick-dots { margin-top: 10px; } /*----------------------------------------*---------------------------------------- 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: #55ACEE; } .btn--facebook { background: #3A5795; } .btn--googlePlus { background: #dd4b39; } .btn--hatena { background: #109CDB; } /* hatena */ .fa-hatena:before { content: "B!"; font-family: Verdana; font-weight: bold; } /*----------------------------------------*---------------------------------------- Table ----------------------------------------*----------------------------------------*/ table { background-color: transparent; max-width: 100%; width: 100%; } th { font-weight: normal; } tbody th { text-align: left; white-space: nowrap; } caption { padding-bottom: 3px; text-align: right; caption-side: top; font-size: 1.2rem; } @media screen and (max-width: 767px) { tbody th { white-space: normal; } } /*---------------------------------------- common_style ----------------------------------------*/ .table-widthAuto { width: auto; } .td-number { text-align: right; white-space: nowrap; } .td-price { color: #f00; /*red*/ text-align: right; white-space: nowrap; } /*---------------------------------------- simple ----------------------------------------*/ .table-simple th, .table-simple td { padding: 2px 5px; } .table-simple th { font-weight: normal; } /*---------------------------------------- basic_style ----------------------------------------*/ .table-basic th, .table-basic td { border: 1px solid #ccc; padding: 5px 10px; } /* thead */ .table-basic thead th { border-bottom: 3px double #ccc; background: #f2f2f2; } /* tbody */ .table-basic tbody th { background: #f2f2f2; } /* tfoot */ .table-basic tfoot td { border-top: 3px double #ccc; background: #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; } } /*---------------------------------------- table-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: #f7f4e9; } .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; } /*---------------------------------------- table-responsive ----------------------------------------*/ .table-responsive { } @media screen and (max-width: 767px) { .table-responsive th, .table-responsive td { display: block; } .table-responsive thead { display: none; } .table-responsive td[data-label]:before { content: "[ "attr(data-label)" ]"; margin-right: 10px; } } /*----------------------------------------*---------------------------------------- Tab-nav ----------------------------------------*----------------------------------------*/ .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; -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; 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 & Hidden ----------------------------------------*----------------------------------------*/ .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; } }