@charset "UTF-8"; /*! normalize.css v3.0.2 | MIT License | git.io/normalize*/ html{ font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body{ margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary{ display: block; } audio, canvas, progress, video{ display: inline-block; vertical-align: baseline; } audio:not([controls]){ display: none; height: 0; } [hidden], template{ display: none; } a{ background-color: transparent; } a:active, a:hover{ outline: 0; } a:active img, a:hover img{ opacity: 0.7; } abbr[title]{ border-bottom: 1px dotted; } b, strong{ font-weight: bold; } dfn{ font-style: italic; } h1{ margin: 0.67em 0; font-size: 2em; } mark{ background: #ff0; color: #000; } small{ font-size: 80%; } sub, sup{ vertical-align: baseline; line-height: 0; position: relative; font-size: 75%; } sup{ top: -0.5em; } sub{ bottom: -0.25em; } img{ border: 0; } svg:not(:root){ overflow: hidden; } figure{ margin: 1em 40px; } hr{ height: 0; -moz-box-sizing: content-box; box-sizing: content-box; } pre{ overflow: auto; } code, kbd, pre, samp{ font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea{ margin: 0; color: inherit; font: inherit; } button{ overflow: visible; } button, select{ text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"]{ cursor: pointer; -webkit-appearance: button; } button[disabled], html input[disabled]{ cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner{ padding: 0; border: 0; } input{ line-height: normal; } input[type="checkbox"], input[type="radio"]{ padding: 0; box-sizing: border-box; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{ height: auto; } input[type="search"]{ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{ -webkit-appearance: none; } fieldset{ margin: 0 2px; padding: 0.35em 0.625em 0.75em; border: 1px solid #c0c0c0; } legend{ padding: 0; border: 0; } textarea{ overflow: auto; } optgroup{ font-weight: bold; } table{ border-collapse: collapse; border-spacing: 0; } td, th{ padding: 0; } /*------------------------------------------------------------ 賢威テンプレートの共通設定 -------------------------------------------------------------*/ html{ overflow-y: scroll; } body{ font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; background:#f1f1f1; } a{ -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: #444; } a:hover, a:active, a:focus{ color: #5077A2; } address, caption, cite, code, dfn, var, h1, h2, h3, h4, h5, h6{ font-style: normal; font-weight: normal; } q{ quotes: none; } q:before,q:after{ content: ''; content: none; } img{ vertical-align: bottom; -ms-interpolation-mode: bicubic; } div{ word-wrap: break-word; } pre{ overflow: auto; white-space: pre-wrap; word-wrap: break-word; } form{ margin: 0; } button, input, select, textarea, optgroup, option{ vertical-align: baseline; } select{ max-width: 100%; } textarea{ min-height: 100px; vertical-align: top; } button::-moz-focus-inner, input::-moz-focus-inner{ margin: 0; } table{ width: 100%; word-break: break-all; word-wrap: break-word; border-spacing: 0; } caption{ text-align: left; } img{ height: auto; max-width: 100%; } img{ max-width: none\9;/*IE8への対応*/ } html:not(:target) img{ max-width: 100%; /*IE9以上への対応*/ } p{ margin: 0 0 1em; } ul, ol{ margin-left: 40px; padding-left: 0; } li{ margin-top: 0.5em; } /*引用*/ blockquote{ position: relative; margin: 2em 0; padding: 115px 45px 80px; background: #fff; } blockquote p:last-child{ margin-bottom: 0; } blockquote:before{ position: absolute; top: 40px; left: 30px; width: 58px; height: 45px; content: url(../images/icon/icon-laquo.png); } blockquote:after{ position: absolute; right: 30px; bottom: 20px; width: 58px; height: 45px; content: url(../images/icon/icon-raquo.png); } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ blockquote:before{ display: inline-block; width: 58px; height: 45px; vertical-align: middle; background: url(../images/icon/icon-laquo@2x.png); -webkit-background-size: 58px 45px; background-size: 58px 45px; content: " "; } blockquote:after{ display: inline-block; width: 58px; height: 45px; vertical-align: middle; background: url(../images/icon/icon-raquo@2x.png); -webkit-background-size: 58px 45px; background-size: 58px 45px; content: " "; } } blockquote a{ color: #15a5e6; } blockquote a:hover, blockquote a:active, blockquote a:focus{ color: #5077A2; } q{ background: #ccc; } table{ width: 100%; margin: 1em 0; padding: 0; border-top: 1px solid #cfcfcf; border-left: 1px solid #cfcfcf; } th, td{ padding: 1.25em 1em; border-right: 1px solid #cfcfcf; border-bottom: 1px solid #cfcfcf; } th{ background-color: #e9e9e9; font-weight: bold; text-align: left; } thead th{ background: #555; color: #fff; text-align: center; } dd{ margin-left: 0; padding-left: 1em; } figure{ margin: 1em 0; } /*-------------------------------------------------------- テンプレートレイアウト --------------------------------------------------------*/ .header-title, /*変更。追加。ページの1行目用として*/ .site-header, .global-nav, .main-body, .site-footer{ min-width: 925px; /*変更*/ } .header-title-in, /*変更。追加*/ .site-header-in, .global-nav-in, .main-image-in, .main-image-in-text, .main-image-in-text-cont, .main-body-in, .site-footer-in{ -webkit-box-sizing: border-box; box-sizing: border-box; width: 925px; /*変更。サイトの横幅。これより小さければレスポンシブ*/ margin: auto; } .main-image-in img{ width: 100%; } .main-image-in.wide, .main-image-in-text.wide{ width: 100%; } /*1カラムレイアウト*/ .col1 .main-body-in{ width: 100%; } .col1 .breadcrumbs{ width: 925px; /*変更*/ margin-right: auto; margin-left: auto; } /*2カラムレイアウト*/ .col2 .main-conts{ float: left; width: 65%; } .col2 .sub-conts{ float: right; width: 30%; } /*2カラムレイアウト(リバース)*/ .col2r .main-conts{ float: right; width: 65%; } .col2r .sub-conts{ float: left; width: 30%; } /*-------------------------------------------------------- ヘッダー --------------------------------------------------------*/ .header-title{ /*変更。追加で1行目用に*/ float: left; width: 100.0%; /*ロゴ(メインタイトル)下の

の1行の幅はこちらのwidthの値を変更*/ background: #e53935;/*ヘッダー部分の横幅内の背景を黒に*/ text-align: center; color: #fff; /*ヘッダー部分の文字色を白に*/ } .site-header{ background: url(../images/lp-image.jpg) center center no-repeat; margin-bottom:-6px; } .site-header-conts{ width: 100%; padding: 60px 0 40px; } .site-header-in{ position:relative; } /*ヘッダーロゴ*/ .site-title{ text-align:center; margin: 0 auto; font-size: 2.25em; } .site-title a{ color: #333; text-decoration: none; } .site-title a:hover, .site-title a:active, .site-title a:focus{ text-decoration: underline; } .normal-screen .site-title{ font-size: 3em; } .normal-screen .lp-catch{ font-size: 1.5em; } /*ヘッダー右側の要素*/ .header-box{ text-align: right; position:absolute; right:0; top:20px; } /*ヘッダーの全画面表示*/ .full-screen{ background: url(../images/lp-image.jpg) center center no-repeat; -webkit-background-size: cover; background-size: cover; color: #fff; } .full-screen .site-header-in{ display: table; } .full-screen .site-header-conts{ display: table-cell; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; width: 100%; padding: 1em; text-align: center; vertical-align: middle; text-shadow: 1px 1px 8px #666; } .full-screen .site-title{ display: block; text-align:center; } .contact-btn{ margin-bottom: 0; } .full-screen .site-header-conts h1{ width: auto; margin: 0; } .full-screen .site-header-conts p{ font-size: 2em; } .full-screen .site-header-conts p a{ color: #fff; text-decoration: none; } /*-------------------------------------------------------- グローバルナビ --------------------------------------------------------*/ .global-nav{ padding: 0; background:#fff; border-bottom:#222 solid 3px; margin-bottom:-3px; z-index: 200; position: relative; } /*グローバルナビの開閉用ボタン*/ .global-nav-panel{ display: none; font-size: 12px; } .global-nav-panel span{ display: block; min-height: 20px; line-height: 20px; } .icon-gn-menu{ padding-left: 32px; background: url(../images/icon/icon-gn-menu.png) left center no-repeat; } .icon-gn-close{ padding-left: 32px; background: url(../images/icon/icon-gn-close.png) left center no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-gn-menu{ background: url(../images/icon/icon-gn-menu@2x.png) left center no-repeat; -webkit-background-size: 20px 20px; background-size: 20px 20px; } .icon-gn-close{ background: url(../images/icon/icon-gn-close@2x.png) left center no-repeat; -webkit-background-size: 20px 20px; background-size: 20px 20px; } } .global-nav .show-menu, .global-nav .show-menu li ul{ display: block!important; } .global-nav-in ul{ display: table; width: 100%; margin: 0; padding: 0; table-layout: fixed; /*メニューの幅を均等に*/ } .global-nav-in li{ display: table-cell; list-style: none; position: relative; vertical-align: middle; margin: 0; text-align: center; } .global-nav-in li a{ display: block; min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/ padding: 1em; /*画像をメニューにする場合は値を0に*/ color: #222; text-decoration: none; } .global-nav-in li a:hover, .global-nav-in li a:active, .global-nav-in li a:focus{ background-color: #222; color: #fff; } .global-nav-in li ul{ display: none; position: absolute; top: 100%; left: 0; z-index: 10; width: 100%; border-left: 0; } /*ドロップダウンメニューのデザイン*/ .global-nav li ul li{ display: list-item; width: 100%; margin: 0; padding: 0; border-top: 0; border-right: 0; white-space: normal; } .global-nav li ul li a{ display: block; padding: 0.8em 2em; background:rgba(44,44,44,.9); color:#fff; } .global-nav-in li ul ul{ top: 0; left: 100%; } /*-------------------------------------------------------- メインビジュアル --------------------------------------------------------*/ .main-image{ z-index: 100; position: relative; border-bottom:#f1f1f1 solid 2em; border-top:#222 solid 3px; margin-bottom:-3px; margin-top:-3px; } .main-image-in-text{ background-repeat: no-repeat; background-size: cover; } .main-image-in-text-cont{ -webkit-box-sizing: border-box; box-sizing: border-box; padding: 3em; } .main-image-in-text.wide .main-image-in-text-cont{ width: 925px; } .main-image-in-text p:last-child{ margin-bottom: 0; } .main-copy{ margin-bottom: 20px; font-size: 3em; text-align: center; } .sub-copy{ font-size: 1.5em; text-align: center; } /*-------------------------------------------------------- メインボディ --------------------------------------------------------*/ .main-body{ padding-bottom: 0px; /*変更*/ } .no-gn .main-body{ margin-top: 0; } .lp.no-gn .main-body{ margin-top: 2em; } .main-body-in{ padding-top:6px; /*変更*/ } .home .main-body-in{ padding-top:60px; } .lp .site-header{ border-bottom:none; } /*-------------------------------------------------------- パンくずリスト --------------------------------------------------------*/ .breadcrumbs-in{ margin:0 0 1.5em; color: #555; } .no-gn .breadcrumbs-in{ margin-top: 0; } .breadcrumbs-in a{ color: #555; } .breadcrumbs-in a:hover, .breadcrumbs-in a:active, .breadcrumbs-in a:focus{ color: #5077A2; } .breadcrumbs-in li{ display: inline-block; list-style: none; position: relative; margin-right: 5px; padding-right: 18px; background: url(../images/icon/icon-brc.gif) right center no-repeat; } .breadcrumbs-in li:before{ content: url(../images/icon/icon-folder-brc.png); } .breadcrumbs-in li.bcl-first:before{ content: url(../images/icon/icon-home-brc.png); } .breadcrumbs-in li.bcl-last{ background: none; } .breadcrumbs-in li.bcl-last:before{ content: none; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .breadcrumbs-in li{ background: url(../images/icon/icon-brc@2x.gif) right center no-repeat; -webkit-background-size: 5px 9px; background-size: 5px 9px; } .breadcrumbs-in li:before{ width: 12px; height: 12px; background: url(../images/icon/icon-folder-brc@2x.png); } .breadcrumbs-in li.bcl-first:before{ width: 12px; height: 12px; background: url(../images/icon/icon-home-brc@2x.png); } .breadcrumbs-in li:before, .breadcrumbs-in li.bcl-first:before{ display: inline-block; vertical-align: middle; -webkit-background-size: contain; background-size: contain; content: " "; } .breadcrumbs-in li.bcl-last:before{ width: 0; height: 0; background: none; content: none; } } /*-------------------------------------------------------- メインコンテンツ --------------------------------------------------------*/ .main-conts{ line-height: 1.8; } .col1 .main-conts{ margin-bottom: 40px; } /*コンテンツの基本単位(「section-wrap」+「section-in」でコンテンツを覆う)*/ .section-wrap{ -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: -40px; /*変更*/ background: #fff; /*変更*/ border-right: 1px solid #ccc; /*変更*/ border-left: 1px solid #ccc; /*変更*/ box-shadow:0px 0px 5px 5px rgba(0,0,0,0.1); /*変更*/ } .section-wrap.wide{ border-right: 0; border-left: 0; } .section-wrap .section-in, .float-area{ -webkit-box-sizing: border-box; box-sizing: border-box; } .float-area{ margin-bottom: 10px; } /*1カラムレイアウト*/ .col1 .section-wrap, .col1 .float-area{ width: 925px; /*変更*/ margin-right: auto; margin-left: auto; } .col1 .section-wrap{ padding: 0px 0px; } .col1 .section-wrap.wide{ width: 100%; padding: 40px 0; background:#ddd; } .col1 .section-wrap.wide .section-in{ width: 925px; margin-right: auto; margin-left: auto; padding: 30px 0; } /*-------------------------------------------------------- サブコンテンツ --------------------------------------------------------*/ .sub-conts .section-wrap{ margin: 0 auto 20px; padding: 0; border: none; } .sub-conts .section-wrap .section-in{ padding:0 20px 20px; background: #fafafa; border: 1px solid #fafafa; } .col1 .sub-conts .section-wrap .section-in{ padding: 0 80px 30px; } /*サブコンテンツ用メニューのデザイン*/ .sub-conts .link-menu{ margin-left: 18px; padding-left: 0; } .sub-conts .link-menu li{ list-style: none; margin-bottom: 1em; padding-left: 12px; background: url(../images/icon/icon-list-arw.png) left 6px no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .sub-conts .link-menu li{ background: url(../images/icon/icon-list-arw@2x.png) left 6px no-repeat; -webkit-background-size: 7px 10px; background-size: 7px 10px; } } .sub-conts .link-menu ul{ margin-top: 1em; margin-left: 10px; padding-left: 0; } /*-------------------------------------------------------- フッター --------------------------------------------------------*/ .site-footer{ background: #b5def8; color: #fff; } .site-footer-in a{ color: #fff; } .site-footer-in a:hover, .site-footer-in a:active, .site-footer-in a:focus{ color: #5077A2; } /*フッターナビ*/ .site-footer-nav{ margin: 0 auto; padding: 1em 0; text-align: center; } .site-footer-nav li{ display: inline; list-style: none; margin-left: 50px; padding: 0 0 0 13px; background: url(../images/icon/icon-arw-next02.png) left center no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .site-footer-nav li{ background: url(../images/icon/icon-arw-next02@2x.png) left center no-repeat; -webkit-background-size: 7px 10px; background-size: 7px 10px; } } .site-footer-nav li:first-child{ margin-left: 0; } /*コピーライト*/ .copyright{ margin: 0; padding: 15px 0; background: #7ec0ee; color: #fff; text-align: center; } .copyright small{ font-size: 100%; } /*ページトップボタン*/ .page-top{ display: none; position: fixed; right: 20px; bottom: 20px; z-index: 99; line-height: 1.2; margin-bottom: 0; } /*-------------------------------------------------------- 見出し --------------------------------------------------------*/ .section-in > h1:first-child, .section-in > h2:first-child, .section-in > h3:first-child, .section-in > h4:first-child, .section-in > h5:first-child, .section-in > h6:first-child{ margin-top: 0; } .main-body h1{ margin: 0px 0px 0px; padding: 10px 18px; color: #222; font-size: 1.75em; } .main-body h2{ /*変更*/ margin: 0px 0px 0px; padding: 35px 18px; background: url(../images/common/midashi-h2.png) repeat center center; border-top: 5px solid #c4a76b; border-bottom: 5px solid #c4a76b; border-left: 5px solid #c4a76b; border-right: 5px solid #c4a76b; color: #fff; font-size: 2.00em; font-weight: bold; } .main-body h3{ /*変更*/ margin: 60px 0 30px; padding: 35px 18px; font-weight: bold; font-size: 2.00em; background: url(../images/common/midashi-h3.png) repeat center center; border-top: 5px solid #f3d367; border-bottom: 5px solid #f3d367; color: #fff; } .main-body .sub-conts h3 { padding-top:20px; } .main-body h4{ margin: 55px 0 25px; font-weight: bold; font-size: 1.25em; position: relative; padding: .1em 0 .2em .75em; border-left: 6px solid #222; } .main-body h4:before { position: absolute; left: -6px; bottom: 0; content: ''; width: 6px; height: 50%; background-color: #bbb; } .main-body h5{ margin: 55px 0 25px; padding: 0 0 0 9px; border-left: 6px solid #bbb; font-weight: bold; font-size: 1.2em; } .main-body h6{ margin: 55px 0 25px; font-weight: bold; font-size: 1.125em; } /*画像を使う場合などに見出しのデザインを解除*/ .main-body .img-title{ padding: 0; border: none; background: none; border-radius: 0; box-shadow: none; font-weight: normal; font-size: 1.0em; } .main-body h2 a{ color: #fff; } .main-body h1 a:hover, .main-body h2 a:hover, .main-body h1 a:active, .main-body h2 a:active, .main-body h1 a:focus, .main-body h2 a:focus{ color: #5077A2; } /*コンテンツの外にある見出し*/ .main-body .archive-title{ margin: 0 0 30px; } .col1 .main-body .archive-title{ max-width: 925px; margin-right: auto; margin-left: auto; } /*記事タイトルや基本単位毎の最初の見出し*/ .section-wrap .section-title{ line-height: 1.5; margin: 0 0 1em; border: none; background: transparent; color: #333; font-size: 2.125em; border-top: 3px solid #222; border-bottom: 1px solid #ccc; padding:20px 0; position: relative; } html.col1 .section-wrap .section-title{ line-height: 1.5; margin: 0 -80px 1em; border: none; background: transparent; color: #333; font-size: 2.125em; border-top: 3px solid #222; border-bottom: 1px solid #ccc; padding:20px 80px; position: relative; } .main-body .section-title a{ color: #333; text-decoration: none; } .main-body .section-title a:hover, .main-body .section-title a:active, .main-body .section-title a:focus{ color: #5077A2; text-decoration: underline; } .sub-conts .section-wrap .section-in .section-title, .sub-conts .section-wrap .article-header .section-title{ margin: 0 0 20px; padding: 12px 0; font-weight: normal; font-size: 1em; border:none; color:#444; border-bottom: 3px solid #444; } .sub-conts .section-wrap .section-in .section-title:after, .sub-conts .section-wrap .article-header .section-title:after{ content:none; } /*-------------------------------------------------------- パーツ毎のスタイル --------------------------------------------------------*/ /*最新情報*/ .news .news-date{ color:#888; margin-right: 1em; } .news-item{ padding:15px 15px 0.1px; background: #fff; margin-bottom:1em; } .home .news-item{ padding:0 0 20px 20px; } .news .news-thumb{ float: left; margin:0 15px 15px 0; } .home .news .news-thumb{ float: left; margin:0 20px -20px -20px; } .news-item .news-thumb a{ display:block; } .main-body .news-title{ margin: 0 0 12px ; padding: 0; border: none; background: none; font-weight: normal; font-size: 1.1em; line-height:1.5em; } .home .main-body .news-title{ margin: 0 20px 6px 0 ; padding:20px 0 0; } .main-body .news-title:after{ content:none; } .news .news-date, .news .news-cat{ display: inline-block; } .cat{ display: inline-block; margin-right: 2px; margin-bottom: 5px; padding: 0.1em 0.5em; border-bottom: none; color: #fff; font-size: 0.75em; word-break: break-all; } .cat a{ display: inline-block; margin: -0.1em -1px; padding: 0.1em 0.5em; color: #fff; text-decoration: none; } .cat001{ background: #3E768A; } .cat002{ background: #947863; } .cat003{ background: #3E8A6A; } .cat004{ background: #705D88; } .cat005{ background: #606C7A; } .news .news-cont{ line-height:1.4em; margin:0 0 0.5em; } .home .news .news-cont{ margin:0 20px 0.5em 0; } /*記述リスト 横並び*/ .dl-style01 dt, .dl-style01 dd{ -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px; } .dl-style01 dt{ display: block; float: left; width: 35%; } .dl-style01 dd{ padding-left: 35%; border-bottom: 1px solid #ccc; } /*記述リスト 縦並び*/ .dl-style02 dt, .dl-style02 dd{ -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px; } .dl-style02{ border-bottom:1px solid #666; } .dl-style02 dt{ display: block; color: #222; border-top:1px solid #666; } .dl-style02 dd{ background: #fafafa; } /*テーブル(横幅がはみ出る場合にテーブルを囲む要素に設定)*/ .table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-comparison{ margin: 3em 0; border-top: 0; } .table-comparison th, .table-comparison td{ padding: 10px; text-align: center; } .table-comparison thead .highlight span{ display: block; margin: -11px; margin-top: -25px; padding: 11px; padding-top: 25px; } .table-comparison th.highlight, .table-comparison th.highlight span{ background: #FF824B; } .table-comparison tfoot td, .table-comparison tfoot td span{ background: #f2f2f2; } /*カテゴリー*/ .category-list{ margin-left: 0; padding-left: 0; } .category-list li{ list-style: none; margin-bottom: 1em; padding-left: 15px; background: url(../images/icon/icon-tag.png) left 6px no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .category-list li{ background: url(../images/icon/icon-tag@2x.png) left 6px no-repeat; -webkit-background-size: 12px 12px; background-size: 12px 12px; } } .category-list ul{ margin-top: 1em; margin-left: 10px; padding-left: 0; } /*タグクラウド*/ .tagcloud a{ margin-right: 10px; padding-left: 15px; background: url(../images/icon/icon-tag.png) left bottom no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .tagcloud a{ background: url(../images/icon/icon-tag@2x.png) left bottom no-repeat; -webkit-background-size: 12px 12px; background-size: 12px 12px; } } /*カレンダー*/ .calendar{ background: #fff; font-size: 0.875em; } .calendar caption{ font-weight: bold; } .calendar th, .calendar td{ padding: 10px 0; text-align: center; } .calendar tfoot td{ padding: 10px; border-right-width: 0; text-align: left; } .calendar tfoot td:last-child{ border-right-width: 1px; text-align: right; } .calendar td a{ display: block; margin: -10px 0; padding: 10px 0; } /*段組*/ .col4-wrap, .col3-wrap, .col2-wrap{ margin: 0 0 1em; } .col4-wrap .col, .col4-wrap .col_2of4, .col4-wrap .col_3of4, .col3-wrap .col, .col3-wrap .col_2of3, .col2-wrap .col{ -webkit-box-sizing: border-box; box-sizing: border-box; float: left; margin-left: 2%; } .col4-wrap .col:first-child, .col4-wrap .col_2of4:first-child, .col4-wrap .col_3of4:first-child, .col3-wrap .col:first-child, .col3-wrap .col_2of3:first-child, .col2-wrap .col:first-child{ margin-left: 0; } .col4-wrap .col{ width: 23.5%; } .col4-wrap .col_2of4{ width: 49%; } .col4-wrap .col_3of4{ width: 74.5%; } .col3-wrap .col{ width: 32%; } .col3-wrap .col_2of3{ width: 66%; } .col2-wrap .col{ width: 49%; } .col-link{ border: 1px solid #ccc; } .col-link a{ display: block; color: #333; text-decoration: none; } .col-link a:hover, .col-link a:active, .col-link a:focus{ background: #eee; } /*バナーエリア*/ .banner-list{ margin:20px 0 0; } .banner-list li{ list-style: none; border:#ccc solid 1px; box-sizing:border-box; } .col1 .banner-list{ text-align: center; } .col1 .banner-list li, .main-conts .banner-list li{ display: inline-block; margin-bottom: 1em; margin-left: 1em; } .col1 .banner-list li:first-child, .main-conts .banner-list li:first-child{ margin-left: 0; } /*引用元へのリンク*/ .link-ref{ text-align: right; } /*動画などのレスポンシブ対応*/ embed, iframe, object, video{ max-width: 100%; } /*ボタン*/ .btn{ display: inline-block; padding: .3em 3em; border: 0 ; color: #444; text-decoration: none; border:3px solid #444; background:none; } .btn-area .btn { display: block; margin-right: auto; margin-left: auto; } .btn:hover, .btn:active, .btn:focus{ color:#fff; cursor: pointer; } .btn span{ position:relative; padding-left:20px; } .btn span:after{ -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .btn span:after{ display: block; content: ''; position: absolute; top: .4em; left: -1em; width: 8px; height: 8px; border-right: 2px solid #444; border-bottom: 2px solid #444; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .btn:hover span:after{ left:-.5em; border-color:#fff; } .btn-green{ border:3px solid #1EC69B; font-size: 1.25em; color:#1EC69B; } .btn-green:hover, .btn-green:active, .btn-green:focus{ background: #1EC69B; cursor: pointer; color:#fff; } .btn-blue{ border:3px solid #1A76BD; font-size: 1.25em; color:#1A76BD; } .btn-blue:hover, .btn-blue:active, .btn-blue:focus{ background: #1A76BD; cursor: pointer; color:#fff; } .btn-orange{ border:3px solid #E3602D; font-size: 1.25em; color:#E3602D; } .btn-orange:hover, .btn-orange:active, .btn-orange:focus{ background: #E3602D; cursor: pointer; color:#fff; } .btn-red{ border:3px solid #D74648; font-size: 1.25em; color:#D74648; } .btn-red:hover, .btn-red:active, .btn-red:focus{ background: #D74648; cursor: pointer; color:#fff; } .btn-green span:after{ border-color:#1EC69B; } .btn-blue span:after{ border-color:#1A76BD; } .btn-orange span:after{ border-color:#E3602D; } .btn-red span:after{ border-color:#D74648; } .btn-form01{ padding: .5em 3em; border:3px solid #222; font-size: 1.25em; } .btn-form02{ padding: .5em 1em; border:3px solid #bbb; font-size: 1.25em; color:#bbb; } .btn-form02 span:after{ left: -.2em; border-color: #bbb ; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .btn-form01:hover, .btn-form01:active, .btn-form01:focus{ border:3px solid #274A7D; background:#274A7D; } .btn-form02:hover, .btn-form02:active, .btn-form02:focus{ border:3px solid #999; background:#999; } .btn-mail{ padding:.5em 3.3em .5em 1.3em; border:3px solid #222; text-align:left; } .btn-mail:hover, .btn-mail:active, .btn-mail:focus{ border:3px solid #274A7D; background:#274A7D; } .btn-mail span{ padding-left: 0; } .btn-mail span:after{ right:-2em; left:auto; top: .3em; } .btn-mail:hover span:after{ right:-2.5em; left:auto; } .btn-detail{ padding:.5em 3.3em .5em 1.3em; border:3px solid #444; margin-top:1em; } .btn-detail:hover, .btn-detail:active, .btn-detail:focus{ border:3px solid #274A7D; background:#274A7D; } .btn-detail span{ padding-left: 0; } .btn-detail span:after{ right:-1.5em; left:auto; top: .3em; } .btn-detail:hover span:after{ right:-2em; left:auto; } /*検索ボックス*/ .search-box{ margin:20px auto 0; text-align:center; } .search-box input[type="text"]{ -webkit-box-sizing: border-box; box-sizing: border-box; width: 80%; height: 30px; padding-right: 4px; padding-left: 4px; border: none; background:#ddd; border-radius: 0; color:#222; } .btn-search{ -webkit-box-sizing: border-box; box-sizing: border-box; height: 30px; vertical-align: top; padding: 5px; border: 0; background: #ddd; border-radius: 0; cursor: pointer; } .btn-search img{ width: 21px; height: 20px; vertical-align: top; } /*ソーシャルボタン*/ .sns-list ul{ margin: 0 0 1em; padding: 0; } .sns-list li{ display: inline-block; vertical-align: top; line-height: 1.0; margin-left: 1em; } .sns-list li iframe{ max-width: none; margin: 0; } .sns-list li:first-child{ margin-left: 0; } /*アイキャッチ*/ .eye-catch{ float: right; margin-top: 0; margin-left: 1em; } .post-date{ margin-right: 1em; } /*登場人物紹介1*/ .cast-box{ padding: 30px 20px; background:#fff; } .cast-box .cast{ position: relative; min-height: 100px; margin-top: 0; padding-left: 115px; } .cast-box .cast-name{ font-weight: bold; font-size: 1.25em; } .cast-box .cast .cast-headshot, .cast-box .cast .cast-profile{ margin-left: 0; margin-bottom: 40px; padding-left: 0; } .cast-box .cast:last-child, .cast-box .cast:last-child .cast-headshot, .cast-box .cast:last-child .cast-profile{ margin-bottom: 0; } .cast-box .cast .cast-headshot{ position: absolute; top: 0; left: 0; } /*登場人物紹介2*/ .cast-box02 .cast{ position: relative; margin-bottom: 40px; padding-top: 210px; } .cast-box02 .cast:last-child{ margin-bottom:0; } .cast-box02 .cast dd{ padding-left: 0; } .cast-box02 .cast-name{ font-weight: bold; } .cast-box02 .cast .cast-headshot{ position: absolute; top: 0; width: 100%; text-align: center; } .col1 .cast-box02 .cast{ min-height: 210px; padding-top: 0; } .col1 .cast-box02 .cast-name, .col1 .cast-box02 .cast-profile{ padding-left: 210px; } .col1 .cast-box02 .cast .cast-headshot{ width: auto; } /*吹き出し*/ .chat-l, .chat-r{ position: relative; overflow: hidden; margin: 0 0 2em; } .bubble{ display: block; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; width: 80%; min-height: 60px; margin-bottom: 2em; padding: 1em; border: 1px solid #ccc; background: #fff; } .bubble .bubble-in{ border-color: #fff; } .talker{ display: block; width: 15%; height: auto; text-align: center; } .talker b{ font-weight: normal; } .talker img{ display: block; width: 100px; max-width: 100%; max-width: none\9;/*IE8への対応*/ margin: auto; } html:not(:target) .talker img{ max-width: 100%; /*IE9以上への対応*/ } .chat-l .talker{ float: left; margin-right: 2%; } .chat-r .talker{ float: right; margin-left: 2%; } .chat-l .bubble{ float: right; } .chat-r .bubble{ float: left; } .bubble .bubble-in:after, .bubble .bubble-in:before{ position: absolute; top: 50%; width: 0; height: 0; border: solid transparent; content: ""; } /*吹き出しの微調整*/ .bubble .b-arw20:after, .bubble .b-arw20:before{ top: 20%; } .bubble .b-arw30:after, .bubble .b-arw30:before{ top: 30%; } .bubble .b-arw40:after, .bubble .b-arw40:before{ top: 40%; } .bubble .b-arw60:after, .bubble .b-arw60:before{ top: 60%; } .bubble .b-arw70:after, .bubble .b-arw70:before{ top: 70%; } .bubble .b-arw80:after, .bubble .b-arw80:before{ top: 80%; } .chat-l .bubble .bubble-in:after, .chat-l .bubble .bubble-in:before{ right: 100%; } .chat-r .bubble div:after, .chat-r .bubble div:before{ left: 100%; } .chat-l .bubble .bubble-in:after{ margin-top: -8px; border-width: 8px 20px; border-color: transparent; border-right-color: inherit; } .chat-l .bubble .bubble-in:before{ margin-top: -9px; border-width: 9px 21px; border-color: transparent; border-right-color: #ccc; } .chat-r .bubble .bubble-in:after{ margin-top: -8px; border-width: 8px 20px; border-color: transparent; border-left-color: inherit; } .chat-r .bubble .bubble-in:before{ margin-top: -9px; border-width: 9px 21px; border-color: transparent; border-left-color: #ccc; } .bubble p:first-child{ margin-top: 0; } /*吹き出し 会話者が複数人の場合*/ .together .talker, .together .bubble{ width: 100%; } .together .talker b{ display: inline-block; text-align: center; } .together.chat-l .talker, .together.chat-r .talker{ float: none; margin: 0 0 20px; } .together.chat-l .talker{ text-align: left; } .together.chat-r .talker{ text-align: right; } .together.chat-l .bubble, .together.chat-r .bubble{ float: none; } .together .bubble .bubble-in:after, .together .bubble .bubble-in:before{ top: auto; bottom: 100%; } .together.chat-l .bubble .bubble-in:after, .together.chat-l .bubble .bubble-in:before{ right: auto; left: 10%; } .together.chat-r .bubble .bubble-in:after, .together.chat-r .bubble .bubble-in:before{ right: 10%; left: auto; } .together.chat-l .bubble .bubble-in:after{ margin-top: -20px; margin-left: -8px; border-width: 20px 8px; border-color: transparent; border-bottom-color: inherit; } .together.chat-l .bubble .bubble-in:before{ margin-top: -21px; margin-left: -9px; border-width: 21px 9px; border-color: transparent; border-bottom-color: #ccc; } .together.chat-r .bubble .bubble-in:after{ border-width: 20px 8px; margin-top: -20px; margin-right: -8px; border-color: transparent; border-bottom-color: inherit; } .together.chat-r .bubble .bubble-in:before{ margin-top: -21px; margin-right: -9px; border-width: 21px 9px; border-color: transparent; border-bottom-color: #ccc; } .bubble-in p:last-child{ margin-bottom: 0; } /*吹き出し背景色:青(HTML版のみ)*/ .bubble-blue{ border: none; background: #398DD7; color:#fff; } .chat-l .bubble-blue .bubble-in:after, .chat-l .bubble-blue .bubble-in:before{ border-right-color: #398DD7; } .chat-r .bubble-blue .bubble-in:after, .chat-r .bubble-blue .bubble-in:before{ border-left-color: #398DD7; } .together.chat-l .bubble-blue .bubble-in:after, .together.chat-l .bubble-blue .bubble-in:before, .together.chat-r .bubble-blue .bubble-in:after, .together.chat-r .bubble-blue .bubble-in:before{ border-bottom-color: #398DD7; } /*吹き出し背景色:緑(HTML版のみ)*/ .bubble-green{ border: none; background: #38D1B0; color:#fff; } .chat-l .bubble-green .bubble-in:after, .chat-l .bubble-green .bubble-in:before{ border-right-color: #38D1B0; } .chat-r .bubble-green .bubble-in:after, .chat-r .bubble-green .bubble-in:before{ border-left-color: #38D1B0; } .together.chat-l .bubble-green .bubble-in:after, .together.chat-l .bubble-green .bubble-in:before, .together.chat-r .bubble-green .bubble-in:after, .together.chat-r .bubble-green .bubble-in:before{ border-bottom-color: #38D1B0; } /*吹き出し背景色:黄(HTML版のみ)*/ .bubble-yellow{ border: none; background: #DCD503; color:#fff; } .chat-l .bubble-yellow .bubble-in:after, .chat-l .bubble-yellow .bubble-in:before{ border-right-color: #DCD503; } .chat-r .bubble-yellow .bubble-in:after, .chat-r .bubble-yellow .bubble-in:before{ border-left-color: #DCD503; } .together.chat-l .bubble-yellow .bubble-in:after, .together.chat-l .bubble-yellow .bubble-in:before, .together.chat-r .bubble-yellow .bubble-in:after, .together.chat-r .bubble-yellow .bubble-in:before{ border-bottom-color: #DCD503; } /*吹き出し背景色:オレンジ(HTML版のみ)*/ .bubble-orange{ border: none; background: #f87047; color:#fff; } .chat-l .bubble-orange .bubble-in:after, .chat-l .bubble-orange .bubble-in:before{ border-right-color: #f87047; } .chat-r .bubble-orange .bubble-in:after, .chat-r .bubble-orange .bubble-in:before{ border-left-color: #f87047; } .together.chat-l .bubble-orange .bubble-in:after, .together.chat-l .bubble-orange .bubble-in:before, .together.chat-r .bubble-orange .bubble-in:after, .together.chat-r .bubble-orange .bubble-in:before{ border-bottom-color: #f87047; } /*吹き出し背景色:ピンク(HTML版のみ)*/ .bubble-pink{ border: none; background: #f06292; color:#fff; } .chat-l .bubble-pink .bubble-in:after, .chat-l .bubble-pink .bubble-in:before{ border-right-color:#f06292; } .chat-r .bubble-pink .bubble-in:after, .chat-r .bubble-pink .bubble-in:before{ border-left-color: #f06292; } .together.chat-l .bubble-pink .bubble-in:after, .together.chat-l .bubble-pink .bubble-in:before, .together.chat-r .bubble-pink .bubble-in:after, .together.chat-r .bubble-pink .bubble-in:before{ border-bottom-color: #f06292; } /*吹き出し背景色:赤(HTML版のみ)*/ .bubble-red{ border: none; background: #ef5350; color: #fff; } .chat-l .bubble-red .bubble-in:after, .chat-l .bubble-red .bubble-in:before{ border-right-color: #ef5350; } .chat-r .bubble-red .bubble-in:after, .chat-r .bubble-red .bubble-in:before{ border-left-color: #ef5350; } .together.chat-l .bubble-red .bubble-in:after, .together.chat-l .bubble-red .bubble-in:before, .together.chat-r .bubble-red .bubble-in:after, .together.chat-r .bubble-red .bubble-in:before{ border-bottom-color: #ef5350; } /*吹き出し背景色:黒(HTML版のみ)*/ .bubble-black{ border: none; background: #555555; color: #fff; } .chat-l .bubble-black .bubble-in:after, .chat-l .bubble-black .bubble-in:before{ border-right-color: #555555; } .chat-r .bubble-black .bubble-in:after, .chat-r .bubble-black .bubble-in:before{ border-left-color: #555555; } .together.chat-l .bubble-black .bubble-in:after, .together.chat-l .bubble-black .bubble-in:before, .together.chat-r .bubble-black .bubble-in:after, .together.chat-r .bubble-black .bubble-in:before{ border-bottom-color: #555555; } /*ランキング*/ .main-body .ranking-list{ margin-right: 0; margin-left: 0; margin-bottom:0; } .main-body .ranking-list li{ list-style: none; overflow: hidden; margin-bottom: 30px; } .main-body .main-conts .ranking-list li{ padding: 15px; background: #fafafa; margin-bottom: 1em; } .main-body .ranking-list li:last-child{ margin-bottom: 0; } .col1 .main-body .ranking-list li:last-child{ margin-bottom: 30px; } .main-body .ranking-list li p{ margin-bottom: 0; } .main-body .rank-title{ padding: 5px 0; border: none; background: none; font-weight: normal; font-size: 1.5em; margin-top: 0; } .main-body .rank-title:before{ content:none; } .rank-thumb{ float: left; margin-right: 20px; margin-bottom:10px; } .main-conts .rank-thumb{ margin-bottom:0; } .home .rank-thumb{ margin-bottom:0; } .home .main-conts .rank-thumb{ margin: 0 20px -20px -20px; } .sub-conts .ranking-list03 .rank-thumb img{ width: 100px; height: auto; } .col2 .sub-conts .ranking-list01 .rank-thumb, .col2 .sub-conts .ranking-list02 .rank-thumb, .col2r .sub-conts .ranking-list01 .rank-thumb, .col2r .sub-conts .ranking-list02 .rank-thumb{ float: none; text-align: center; } .rank-desc{ overflow: hidden; } /*ランキング用の王冠アイコンのリスト*/ .ranking-list01 > li .rank-title{ padding-left: 60px; margin-bottom:10px; padding-top:10px; } .ranking-list01 .rank01 .rank-title{ background: url(../images/icon/icon-rank01-01.png) left top no-repeat; } .ranking-list01 .rank02 .rank-title{ background: url(../images/icon/icon-rank01-02.png) left top no-repeat; } .ranking-list01 .rank03 .rank-title{ background: url(../images/icon/icon-rank01-03.png) left top no-repeat; } .ranking-list01 .rank04 .rank-title{ background: url(../images/icon/icon-rank01-04.png) left top no-repeat; } .ranking-list01 .rank05 .rank-title{ background: url(../images/icon/icon-rank01-05.png) left top no-repeat; } .ranking-list01 .rank06 .rank-title{ background: url(../images/icon/icon-rank01-06.png) left top no-repeat; } .ranking-list01 .rank07 .rank-title{ background: url(../images/icon/icon-rank01-07.png) left top no-repeat; } .ranking-list01 .rank08 .rank-title{ background: url(../images/icon/icon-rank01-08.png) left top no-repeat; } .ranking-list01 .rank09 .rank-title{ background: url(../images/icon/icon-rank01-09.png) left top no-repeat; } .ranking-list01 .rank10 .rank-title{ background: url(../images/icon/icon-rank01-10.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .ranking-list01 .rank01 .rank-title{ background: url(../images/icon/icon-rank01-01@2x.png) left top no-repeat; } .ranking-list01 .rank02 .rank-title{ background: url(../images/icon/icon-rank01-02@2x.png) left top no-repeat; } .ranking-list01 .rank03 .rank-title{ background: url(../images/icon/icon-rank01-03@2x.png) left top no-repeat; } .ranking-list01 .rank04 .rank-title{ background: url(../images/icon/icon-rank01-04@2x.png) left top no-repeat; } .ranking-list01 .rank05 .rank-title{ background: url(../images/icon/icon-rank01-05@2x.png) left top no-repeat; } .ranking-list01 .rank06 .rank-title{ background: url(../images/icon/icon-rank01-06@2x.png) left top no-repeat; } .ranking-list01 .rank07 .rank-title{ background: url(../images/icon/icon-rank01-07@2x.png) left top no-repeat; } .ranking-list01 .rank08 .rank-title{ background: url(../images/icon/icon-rank01-08@2x.png) left top no-repeat; } .ranking-list01 .rank09 .rank-title{ background: url(../images/icon/icon-rank01-09@2x.png) left top no-repeat; } .ranking-list01 .rank10 .rank-title{ background: url(../images/icon/icon-rank01-10@2x.png) left top no-repeat; } .ranking-list01 .rank01 .rank-title, .ranking-list01 .rank02 .rank-title, .ranking-list01 .rank03 .rank-title, .ranking-list01 .rank04 .rank-title, .ranking-list01 .rank05 .rank-title, .ranking-list01 .rank06 .rank-title, .ranking-list01 .rank07 .rank-title, .ranking-list01 .rank08 .rank-title, .ranking-list01 .rank09 .rank-title, .ranking-list01 .rank10 .rank-title{ -webkit-background-size: 48px; background-size: 48px; } } /*ランキング用のメダルアイコンのリスト*/ .ranking-list02 > li .rank-title{ padding-left: 60px; padding-bottom: 10px; padding-top:10px; } .ranking-list02 .rank01 .rank-title{ background: url(../images/icon/icon-rank02-01.png) left top no-repeat; } .ranking-list02 .rank02 .rank-title{ background: url(../images/icon/icon-rank02-02.png) left top no-repeat; } .ranking-list02 .rank03 .rank-title{ background: url(../images/icon/icon-rank02-03.png) left top no-repeat; } .ranking-list02 .rank04 .rank-title{ background: url(../images/icon/icon-rank02-04.png) left top no-repeat; } .ranking-list02 .rank05 .rank-title{ background: url(../images/icon/icon-rank02-05.png) left top no-repeat; } .ranking-list02 .rank06 .rank-title{ background: url(../images/icon/icon-rank02-06.png) left top no-repeat; } .ranking-list02 .rank07 .rank-title{ background: url(../images/icon/icon-rank02-07.png) left top no-repeat; } .ranking-list02 .rank08 .rank-title{ background: url(../images/icon/icon-rank02-08.png) left top no-repeat; } .ranking-list02 .rank09 .rank-title{ background: url(../images/icon/icon-rank02-09.png) left top no-repeat; } .ranking-list02 .rank10 .rank-title{ background: url(../images/icon/icon-rank02-10.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .ranking-list02 .rank01 .rank-title{ background: url(../images/icon/icon-rank02-01@2x.png) left top no-repeat; } .ranking-list02 .rank02 .rank-title{ background: url(../images/icon/icon-rank02-02@2x.png) left top no-repeat; } .ranking-list02 .rank03 .rank-title{ background: url(../images/icon/icon-rank02-03@2x.png) left top no-repeat; } .ranking-list02 .rank04 .rank-title{ background: url(../images/icon/icon-rank02-04@2x.png) left top no-repeat; } .ranking-list02 .rank05 .rank-title{ background: url(../images/icon/icon-rank02-05@2x.png) left top no-repeat; } .ranking-list02 .rank06 .rank-title{ background: url(../images/icon/icon-rank02-06@2x.png) left top no-repeat; } .ranking-list02 .rank07 .rank-title{ background: url(../images/icon/icon-rank02-07@2x.png) left top no-repeat; } .ranking-list02 .rank08 .rank-title{ background: url(../images/icon/icon-rank02-08@2x.png) left top no-repeat; } .ranking-list02 .rank09 .rank-title{ background: url(../images/icon/icon-rank02-09@2x.png) left top no-repeat; } .ranking-list02 .rank10 .rank-title{ background: url(../images/icon/icon-rank02-10@2x.png) left top no-repeat; } .ranking-list02 .rank01 .rank-title, .ranking-list02 .rank02 .rank-title, .ranking-list02 .rank03 .rank-title, .ranking-list02 .rank04 .rank-title, .ranking-list02 .rank05 .rank-title, .ranking-list02 .rank06 .rank-title, .ranking-list02 .rank07 .rank-title, .ranking-list02 .rank08 .rank-title, .ranking-list02 .rank09 .rank-title, .ranking-list02 .rank10 .rank-title{ -webkit-background-size: 48px; background-size: 48px; } } /*ランキング用のシンプルなリスト*/ .ranking-list03 > li .rank-title{ padding: 5px 0 7px; padding-left: 58px; font-size: 1.25em; margin-bottom:15px; } .sub-conts .ranking-list03 > li .rank-title{ min-height: 30px; padding: 0; padding-left: 40px; font-size: 1.25em; } .ranking-list03 .rank01 .rank-title, .ranking-list03 .rank02 .rank-title, .ranking-list03 .rank03 .rank-title{ background:#fff; } .ranking-list03 .rank01 .rank-title{ background: url(../images/icon/icon-rank03-01.png) left top no-repeat; } .ranking-list03 .rank02 .rank-title{ background: url(../images/icon/icon-rank03-02.png) left top no-repeat; } .ranking-list03 .rank03 .rank-title{ background: url(../images/icon/icon-rank03-03.png) left top no-repeat; } .ranking-list03 .rank04 .rank-title{ background: url(../images/icon/icon-rank03-04.png) left top no-repeat; } .ranking-list03 .rank05 .rank-title{ background: url(../images/icon/icon-rank03-05.png) left top no-repeat; } .ranking-list03 .rank06 .rank-title{ background: url(../images/icon/icon-rank03-06.png) left top no-repeat; } .ranking-list03 .rank07 .rank-title{ background: url(../images/icon/icon-rank03-07.png) left top no-repeat; } .ranking-list03 .rank08 .rank-title{ background: url(../images/icon/icon-rank03-08.png) left top no-repeat; } .ranking-list03 .rank09 .rank-title{ background: url(../images/icon/icon-rank03-09.png) left top no-repeat; } .ranking-list03 .rank10 .rank-title{ background: url(../images/icon/icon-rank03-10.png) left top no-repeat; } .sub-conts .ranking-list03 .rank01 .rank-title{ background: url(../images/icon/icon-rank04-01.png) left top no-repeat; } .sub-conts .ranking-list03 .rank02 .rank-title{ background: url(../images/icon/icon-rank04-02.png) left top no-repeat; } .sub-conts .ranking-list03 .rank03 .rank-title{ background: url(../images/icon/icon-rank04-03.png) left top no-repeat; } .sub-conts .ranking-list03 .rank04 .rank-title{ background: url(../images/icon/icon-rank04-04.png) left top no-repeat; } .sub-conts .ranking-list03 .rank05 .rank-title{ background: url(../images/icon/icon-rank04-05.png) left top no-repeat; } .sub-conts .ranking-list03 .rank06 .rank-title{ background: url(../images/icon/icon-rank04-06.png) left top no-repeat; } .sub-conts .ranking-list03 .rank07 .rank-title{ background: url(../images/icon/icon-rank04-07.png) left top no-repeat; } .sub-conts .ranking-list03 .rank08 .rank-title{ background: url(../images/icon/icon-rank04-08.png) left top no-repeat; } .sub-conts .ranking-list03 .rank09 .rank-title{ background: url(../images/icon/icon-rank04-09.png) left top no-repeat; } .sub-conts .ranking-list03 .rank10 .rank-title{ background: url(../images/icon/icon-rank04-10.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .ranking-list03 .rank01 .rank-title{ background: url(../images/icon/icon-rank03-01@2x.png) left top no-repeat; } .ranking-list03 .rank02 .rank-title{ background: url(../images/icon/icon-rank03-02@2x.png) left top no-repeat; } .ranking-list03 .rank03 .rank-title{ background: url(../images/icon/icon-rank03-03@2x.png) left top no-repeat; } .ranking-list03 .rank04 .rank-title{ background: url(../images/icon/icon-rank03-04@2x.png) left top no-repeat; } .ranking-list03 .rank05 .rank-title{ background: url(../images/icon/icon-rank03-05@2x.png) left top no-repeat; } .ranking-list03 .rank06 .rank-title{ background: url(../images/icon/icon-rank03-06@2x.png) left top no-repeat; } .ranking-list03 .rank07 .rank-title{ background: url(../images/icon/icon-rank03-07@2x.png) left top no-repeat; } .ranking-list03 .rank08 .rank-title{ background: url(../images/icon/icon-rank03-08@2x.png) left top no-repeat; } .ranking-list03 .rank09 .rank-title{ background: url(../images/icon/icon-rank03-09@2x.png) left top no-repeat; } .ranking-list03 .rank10 .rank-title{ background: url(../images/icon/icon-rank03-10@2x.png) left top no-repeat; } .ranking-list03 .rank01 .rank-title, .ranking-list03 .rank02 .rank-title, .ranking-list03 .rank03 .rank-title, .ranking-list03 .rank04 .rank-title, .ranking-list03 .rank05 .rank-title, .ranking-list03 .rank06 .rank-title, .ranking-list03 .rank07 .rank-title, .ranking-list03 .rank08 .rank-title, .ranking-list03 .rank09 .rank-title, .ranking-list03 .rank10 .rank-title{ -webkit-background-size: 48px; background-size: 48px; } .sub-conts .ranking-list03 .rank01 .rank-title{ background: url(../images/icon/icon-rank04-01@2x.png) left top no-repeat; } .sub-conts .ranking-list03 .rank02 .rank-title{ background: url(../images/icon/icon-rank04-02@2x.png) left top no-repeat; } .sub-conts .ranking-list03 .rank03 .rank-title{ background: url(../images/icon/icon-rank04-03@2x.png) left top no-repeat; } .sub-conts .ranking-list03 .rank04 .rank-title{ background: url(../images/icon/icon-rank04-04@2x.png) left top no-repeat; } .sub-conts .ranking-list03 .rank05 .rank-title{ background: url(../images/icon/icon-rank04-05@2x.png) left top no-repeat; } .sub-conts .ranking-list03 .rank06 .rank-title{ background: url(../images/icon/icon-rank04-06@2x.png) left top no-repeat; } .sub-conts .ranking-list03 .rank07 .rank-title{ background: url(../images/icon/icon-rank04-07@2x.png) left top no-repeat; } .sub-conts .ranking-list03 .rank08 .rank-title{ background: url(../images/icon/icon-rank04-08@2x.png) left top no-repeat; } .sub-conts .ranking-list03 .rank09 .rank-title{ background: url(../images/icon/icon-rank04-09@2x.png) left top no-repeat; } .sub-conts .ranking-list03 .rank10 .rank-title{ background: url(../images/icon/icon-rank04-10@2x.png) left top no-repeat; } .sub-conts .ranking-list03 .rank01 .rank-title, .sub-conts .ranking-list03 .rank02 .rank-title, .sub-conts .ranking-list03 .rank03 .rank-title, .sub-conts .ranking-list03 .rank04 .rank-title, .sub-conts .ranking-list03 .rank05 .rank-title, .sub-conts .ranking-list03 .rank06 .rank-title, .sub-conts .ranking-list03 .rank07 .rank-title, .sub-conts .ranking-list03 .rank08 .rank-title, .sub-conts .ranking-list03 .rank09 .rank-title, .sub-conts .ranking-list03 .rank10 .rank-title{ -webkit-background-size: 30px 30px; background-size: 30px 30px; } } /*ランキング用の画像+ランキング番号のリスト*/ .ranking-list .on-image{ } .ranking-list .on-image .rank-title{ padding: 0!important; border: 0; background: none!important; font-size: 1.25em; } .ranking-list .on-image .rank-thumb{ position: relative; } .ranking-list .on-image .rank-thumb:before, .ranking-list .on-image .rank-thumb:before, .ranking-list .on-image .rank-thumb:before{ position: absolute; top: 0; left: 0; } .ranking-list03 > .rank01.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank03-01.png); } .ranking-list03 > .rank02.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank03-02.png); } .ranking-list03 > .rank03.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank03-03.png); } .ranking-list03 > .rank04.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank03-04.png); } .ranking-list03 > .rank05.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank03-05.png); } .ranking-list03 > .rank06.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank03-06.png); } .ranking-list03 > .rank07.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank03-07.png); } .ranking-list03 > .rank08.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank03-08.png); } .ranking-list03 > .rank09.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank03-09.png); } .ranking-list03 > .rank10.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank03-10.png); } .sub-conts .ranking-list03 > .rank01.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank04-01.png); } .sub-conts .ranking-list03 > .rank02.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank04-02.png); } .sub-conts .ranking-list03 > .rank03.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank04-03.png); } .sub-conts .ranking-list03 > .rank04.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank04-04.png); } .sub-conts .ranking-list03 > .rank05.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank04-05.png); } .sub-conts .ranking-list03 > .rank06.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank04-06.png); } .sub-conts .ranking-list03 > .rank07.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank04-07.png); } .sub-conts .ranking-list03 > .rank08.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank04-08.png); } .sub-conts .ranking-list03 > .rank09.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank04-09.png); } .sub-conts .ranking-list03 > .rank10.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank04-10.png); } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .ranking-list03 > .rank01.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank03-01@2x.png); } .ranking-list03 > .rank02.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank03-02@2x.png); } .ranking-list03 > .rank03.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank03-03@2x.png); } .ranking-list03 > .rank04.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank03-04@2x.png); } .ranking-list03 > .rank05.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank03-05@2x.png); } .ranking-list03 > .rank06.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank03-06@2x.png); } .ranking-list03 > .rank07.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank03-07@2x.png); } .ranking-list03 > .rank08.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank03-08@2x.png); } .ranking-list03 > .rank09.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank03-09@2x.png); } .ranking-list03 > .rank10.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank03-10@2x.png); } .ranking-list03 > .rank01.on-image .rank-thumb:before, .ranking-list03 > .rank02.on-image .rank-thumb:before, .ranking-list03 > .rank03.on-image .rank-thumb:before, .ranking-list03 > .rank04.on-image .rank-thumb:before, .ranking-list03 > .rank05.on-image .rank-thumb:before, .ranking-list03 > .rank06.on-image .rank-thumb:before, .ranking-list03 > .rank07.on-image .rank-thumb:before, .ranking-list03 > .rank08.on-image .rank-thumb:before, .ranking-list03 > .rank09.on-image .rank-thumb:before, .ranking-list03 > .rank10.on-image .rank-thumb:before{ display: inline-block; width: 48px; height: 48px; vertical-align: middle; -webkit-background-size: contain; background-size: contain; content: " "; } .sub-conts .ranking-list03 > .rank01.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank04-01@2x.png); } .sub-conts .ranking-list03 > .rank02.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank04-02@2x.png); } .sub-conts .ranking-list03 > .rank03.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank04-03@2x.png); } .sub-conts .ranking-list03 > .rank04.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank04-04@2x.png); } .sub-conts .ranking-list03 > .rank05.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank04-05@2x.png); } .sub-conts .ranking-list03 > .rank06.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank04-06@2x.png); } .sub-conts .ranking-list03 > .rank07.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank04-07@2x.png); } .sub-conts .ranking-list03 > .rank08.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank04-08@2x.png); } .sub-conts .ranking-list03 > .rank09.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank04-09@2x.png); } .sub-conts .ranking-list03 > .rank10.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank04-10@2x.png); } .sub-conts .ranking-list03 > .rank01.on-image .rank-thumb:before, .sub-conts .ranking-list03 > .rank02.on-image .rank-thumb:before, .sub-conts .ranking-list03 > .rank03.on-image .rank-thumb:before, .sub-conts .ranking-list03 > .rank04.on-image .rank-thumb:before, .sub-conts .ranking-list03 > .rank05.on-image .rank-thumb:before, .sub-conts .ranking-list03 > .rank06.on-image .rank-thumb:before, .sub-conts .ranking-list03 > .rank07.on-image .rank-thumb:before, .sub-conts .ranking-list03 > .rank08.on-image .rank-thumb:before, .sub-conts .ranking-list03 > .rank09.on-image .rank-thumb:before, .sub-conts .ranking-list03 > .rank10.on-image .rank-thumb:before{ display: inline-block; width: 30px; height: 30px; vertical-align: middle; -webkit-background-size: contain; background-size: contain; content: " "; } } /*画像+テキストのリスト(ランキング用)*/ .ranking-list04 .rank-box{ position: relative; width: 320px; margin-right: auto; margin-left: auto; } .col1 .ranking-list04 li{ display: inline-block; margin-right: 20px; } .ranking-list04 .rank-box img{ width: 100%; } .ranking-list04 .on-image .rank-box:before, .ranking-list04 .on-image .rank-box:before, .ranking-list04 .on-image .rank-box:before{ position: absolute; top: 0; left: 0; } .ranking-list04 .on-image .rank-box .rank-text{ position: absolute; bottom: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; margin: 0; padding: 10px; background-color: rgba(0,0,0,0.5); background-color: #000000\9; /*IE8への対応*/ color: #fff; } html:not(:target) .ranking-list04 .on-image .rank-box .rank-text{ background-color: rgba(0,0,0,0.5); /*IE9以上への対応*/ } .ranking-list04 .on-image .rank-box a{ color: #fff; } .ranking-list04 .on-image .rank-box a:hover, .ranking-list04 .on-image .rank-box a:active, .ranking-list04 .on-image .rank-box a:focus{ color: #5077A2; } .ranking-list04 > .rank01.on-image .rank-box:before{ content: url(../images/icon/icon-rank03-01.png); } .ranking-list04 > .rank02.on-image .rank-box:before{ content: url(../images/icon/icon-rank03-02.png); } .ranking-list04 > .rank03.on-image .rank-box:before{ content: url(../images/icon/icon-rank03-03.png); } .ranking-list04 > .rank04.on-image .rank-box:before{ content: url(../images/icon/icon-rank03-04.png); } .ranking-list04 > .rank05.on-image .rank-box:before{ content: url(../images/icon/icon-rank03-05.png); } .ranking-list04 > .rank06.on-image .rank-box:before{ content: url(../images/icon/icon-rank03-06.png); } .ranking-list04 > .rank07.on-image .rank-box:before{ content: url(../images/icon/icon-rank03-07.png); } .ranking-list04 > .rank08.on-image .rank-box:before{ content: url(../images/icon/icon-rank03-08.png); } .ranking-list04 > .rank09.on-image .rank-box:before{ content: url(../images/icon/icon-rank03-09.png); } .ranking-list04 > .rank10.on-image .rank-box:before{ content: url(../images/icon/icon-rank03-10.png); } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .ranking-list04 > .rank01.on-image .rank-box:before{ background: url(../images/icon/icon-rank03-01@2x.png); } .ranking-list04 > .rank02.on-image .rank-box:before{ background: url(../images/icon/icon-rank03-02@2x.png); } .ranking-list04 > .rank03.on-image .rank-box:before{ background: url(../images/icon/icon-rank03-03@2x.png); } .ranking-list04 > .rank04.on-image .rank-box:before{ background: url(../images/icon/icon-rank03-04@2x.png); } .ranking-list04 > .rank05.on-image .rank-box:before{ background: url(../images/icon/icon-rank03-05@2x.png); } .ranking-list04 > .rank06.on-image .rank-box:before{ background: url(../images/icon/icon-rank03-06@2x.png); } .ranking-list04 > .rank07.on-image .rank-box:before{ background: url(../images/icon/icon-rank03-07@2x.png); } .ranking-list04 > .rank08.on-image .rank-box:before{ background: url(../images/icon/icon-rank03-08@2x.png); } .ranking-list04 > .rank09.on-image .rank-box:before{ background: url(../images/icon/icon-rank03-09@2x.png); } .ranking-list04 > .rank10.on-image .rank-box:before{ background: url(../images/icon/icon-rank03-10@2x.png); } .ranking-list04 > .rank01.on-image .rank-box:before, .ranking-list04 > .rank02.on-image .rank-box:before, .ranking-list04 > .rank03.on-image .rank-box:before, .ranking-list04 > .rank04.on-image .rank-box:before, .ranking-list04 > .rank05.on-image .rank-box:before, .ranking-list04 > .rank06.on-image .rank-box:before, .ranking-list04 > .rank07.on-image .rank-box:before, .ranking-list04 > .rank08.on-image .rank-box:before, .ranking-list04 > .rank09.on-image .rank-box:before, .ranking-list04 > .rank10.on-image .rank-box:before{ display: inline-block; width: 48px; height: 48px; vertical-align: middle; -webkit-background-size: contain; background-size: contain; content: " "; } } /*背景画像+テキストのリスト(ランキング用)*/ .ranking-list05 .rank-box{ position: relative; width: 320px; margin-right: auto; margin-left: auto; background-position: center center; background-size: cover; } .col1 .ranking-list05 li{ display: inline-block; margin-right: 20px; } .ranking-list05 .rank-box a{ display: block; -webkit-box-sizing: border-box; box-sizing: border-box; height: 180px; padding: 3em 1em 1em; background-color: rgba(0,0,0,0.5); background-color: #000000\9; /*IE8への対応*/ color: #fff; } html:not(:target) .ranking-list05 .rank-box a{ background-color: rgba(0,0,0,0.5); /*IE9以上への対応*/ } .ranking-list05 .rank-box a:hover, .ranking-list05 .rank-box a:active, .ranking-list05 .rank-box a:focus, html:not(:target) .ranking-list05 .rank-box a:hover{ background-color: rgba(0,0,0,0); } .ranking-list05 .on-image .rank-box:before, .ranking-list05 .on-image .rank-box:before, .ranking-list05 .on-image .rank-box:before{ position: absolute; top: 0; left: 0; } .ranking-list05 > .rank01.on-image .rank-box:before{ content: url(../images/icon/icon-rank04-01.png); } .ranking-list05 > .rank02.on-image .rank-box:before{ content: url(../images/icon/icon-rank04-02.png); } .ranking-list05 > .rank03.on-image .rank-box:before{ content: url(../images/icon/icon-rank04-03.png); } .ranking-list05 > .rank04.on-image .rank-box:before{ content: url(../images/icon/icon-rank04-04.png); } .ranking-list05 > .rank05.on-image .rank-box:before{ content: url(../images/icon/icon-rank04-05.png); } .ranking-list05 > .rank06.on-image .rank-box:before{ content: url(../images/icon/icon-rank04-06.png); } .ranking-list05 > .rank07.on-image .rank-box:before{ content: url(../images/icon/icon-rank04-07.png); } .ranking-list05 > .rank08.on-image .rank-box:before{ content: url(../images/icon/icon-rank04-08.png); } .ranking-list05 > .rank09.on-image .rank-box:before{ content: url(../images/icon/icon-rank04-09.png); } .ranking-list05 > .rank10.on-image .rank-box:before{ content: url(../images/icon/icon-rank04-10.png); } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .ranking-list05 > .rank01.on-image .rank-box:before{ background: url(../images/icon/icon-rank04-01@2x.png); } .ranking-list05 > .rank02.on-image .rank-box:before{ background: url(../images/icon/icon-rank04-02@2x.png); } .ranking-list05 > .rank03.on-image .rank-box:before{ background: url(../images/icon/icon-rank04-03@2x.png); } .ranking-list05 > .rank04.on-image .rank-box:before{ background: url(../images/icon/icon-rank04-04@2x.png); } .ranking-list05 > .rank05.on-image .rank-box:before{ background: url(../images/icon/icon-rank04-05@2x.png); } .ranking-list05 > .rank06.on-image .rank-box:before{ background: url(../images/icon/icon-rank04-06@2x.png); } .ranking-list05 > .rank07.on-image .rank-box:before{ background: url(../images/icon/icon-rank04-07@2x.png); } .ranking-list05 > .rank08.on-image .rank-box:before{ background: url(../images/icon/icon-rank04-08@2x.png); } .ranking-list05 > .rank09.on-image .rank-box:before{ background: url(../images/icon/icon-rank04-09@2x.png); } .ranking-list05 > .rank10.on-image .rank-box:before{ background: url(../images/icon/icon-rank04-10@2x.png); } .ranking-list05 > .rank01.on-image .rank-box:before, .ranking-list05 > .rank02.on-image .rank-box:before, .ranking-list05 > .rank03.on-image .rank-box:before, .ranking-list05 > .rank04.on-image .rank-box:before, .ranking-list05 > .rank05.on-image .rank-box:before, .ranking-list05 > .rank06.on-image .rank-box:before, .ranking-list05 > .rank07.on-image .rank-box:before, .ranking-list05 > .rank08.on-image .rank-box:before, .ranking-list05 > .rank09.on-image .rank-box:before, .ranking-list05 > .rank10.on-image .rank-box:before{ display: inline-block; width: 30px; height: 30px; vertical-align: middle; -webkit-background-size: contain; background-size: contain; content: " "; } } /*順位の無しのリスト*/ .main-body .post-list01, .main-body .post-list02{ margin-right: 0; margin-left: 0; } .main-body .post-list01 li, .main-body .post-list02 li{ list-style: none; overflow: hidden; margin-bottom: 40px; } /*画像+テキストのリスト*/ .post-list01 .post-box{ position: relative; width: 320px; margin-right: auto; margin-left: auto; } .col1 .post-list01 li{ display: inline-block; margin-right: 20px; } .post-list01 .post-box img{ width: 100%; } .post-list01 .on-image .post-box:before, .post-list01 .on-image .post-box:before, .post-list01 .on-image .post-box:before{ position: absolute; top: 0; left: 0; } .post-list01 .on-image .post-box .post-text{ position: absolute; bottom: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; margin: 0; padding: 10px; background-color: rgba(0,0,0,0.5); background-color: #000000\9; /*IE8への対応*/ color: #fff; } html:not(:target) .post-list01 .on-image .post-box .post-text{ background-color: rgba(0,0,0,0.5); /*IE9以上への対応*/ } .post-list01 .on-image .post-box a{ color: #fff; } .post-list01 .on-image .post-box a:hover, .post-list01 .on-image .post-box a:active, .post-list01 .on-image .post-box a:focus{ background-color: rgba(0,0,0,0); } /*背景画像+テキストのリスト*/ .post-list02 .post-box{ position: relative; width: 320px; margin-right: auto; margin-left: auto; background-position: center center; background-size: cover; } .col1 .post-list02 li{ display: inline-block; margin-right: 20px; } .post-list02 .post-box a{ display: block; -webkit-box-sizing: border-box; box-sizing: border-box; height: 180px; padding: 1em; background-color: rgba(0,0,0,0.5); background-color: #000000\9; /*IE8への対応*/ color: #fff; } html:not(:target) .post-list02 .post-box a{ background-color: rgba(0,0,0,0.5); /*IE9以上への対応*/ } .post-list02 .post-box a:hover, .post-list02 .post-box a:active, .post-list02 .post-box a:focus, html:not(:target) .post-list02 .post-box a:hover, html:not(:target) .post-list02 .post-box a:active, html:not(:target) .post-list02 .post-box a:focus{ background-color: rgba(0,0,0,0); } .post-list02 .on-image .post-box:before, .post-list02 .on-image .post-box:before, .post-list02 .on-image .post-box:before{ position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0); } /*情報比較リスト*/ .review-table{ width: auto; margin-top: 0; border-top: 1px solid #fff; border-left: 1px solid #fff; } .rank-thumb .review-table{ width: 100%; margin-bottom: 0; } .review-table th, .review-table td{ line-height: 1.0; padding: 0.75em; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background-color: #f1f1f1; } .review-table th{ font-weight: normal; } .star00, .star05, .star10, .star15, .star20, .star25, .star30, .star35, .star40, .star45, .star50{ padding-left: 105px; white-space: nowrap; } .star00{ background: url(../images/icon/icon-star00.png) left center no-repeat; } .star05{ background: url(../images/icon/icon-star05.png) left center no-repeat; } .star10{ background: url(../images/icon/icon-star10.png) left center no-repeat; } .star15{ background: url(../images/icon/icon-star15.png) left center no-repeat; } .star20{ background: url(../images/icon/icon-star20.png) left center no-repeat; } .star25{ background: url(../images/icon/icon-star25.png) left center no-repeat; } .star30{ background: url(../images/icon/icon-star30.png) left center no-repeat; } .star35{ background: url(../images/icon/icon-star35.png) left center no-repeat; } .star40{ background: url(../images/icon/icon-star40.png) left center no-repeat; } .star45{ background: url(../images/icon/icon-star45.png) left center no-repeat; } .star50{ background: url(../images/icon/icon-star50.png) left center no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .star00{ background: url(../images/icon/icon-star00@2x.png) left center no-repeat; } .star05{ background: url(../images/icon/icon-star05@2x.png) left center no-repeat; } .star10{ background: url(../images/icon/icon-star10@2x.png) left center no-repeat; } .star15{ background: url(../images/icon/icon-star15@2x.png) left center no-repeat; } .star20{ background: url(../images/icon/icon-star20@2x.png) left center no-repeat; } .star25{ background: url(../images/icon/icon-star25@2x.png) left center no-repeat; } .star30{ background: url(../images/icon/icon-star30@2x.png) left center no-repeat; } .star35{ background: url(../images/icon/icon-star35@2x.png) left center no-repeat; } .star40{ background: url(../images/icon/icon-star40@2x.png) left center no-repeat; } .star45{ background: url(../images/icon/icon-star45@2x.png) left center no-repeat; } .star50{ background: url(../images/icon/icon-star50@2x.png) left center no-repeat; } .star00, .star05, .star10, .star15, .star20, .star25, .star30, .star35, .star40, .star45, .star50{ -webkit-background-size: 97px 17px; background-size: 97px 17px; } } .item-data{ margin-bottom: 1em; } .item-data dl, .item-data dt, .item-data dd{ margin: 0; } .item-data dt, .item-data dd{ display: inline-block; } .item-data dd{ padding-left: 0; } .comparative-list01 .rank-desc, .comparative-list02 .rank-desc{ overflow: visible; } .main-body .review-desc-title{ overflow: hidden; margin-top: 1em; margin-bottom: 1em; padding: 0 0 0 14px; border: none; border-left: 4px solid #3B5D82; background: none; font-weight: normal; font-size: 1.125em; } /*情報比較用の王冠アイコン*/ .comparative-list01 > li .rank-title{ padding-left: 60px; } .comparative-list01 .rank01 .rank-title{ background: url(../images/icon/icon-rank01-01.png) left top no-repeat; } .comparative-list01 .rank02 .rank-title{ background: url(../images/icon/icon-rank01-02.png) left top no-repeat; } .comparative-list01 .rank03 .rank-title{ background: url(../images/icon/icon-rank01-03.png) left top no-repeat; } .comparative-list01 .rank04 .rank-title{ background: url(../images/icon/icon-rank01-04.png) left top no-repeat; } .comparative-list01 .rank05 .rank-title{ background: url(../images/icon/icon-rank01-05.png) left top no-repeat; } .comparative-list01 .rank06 .rank-title{ background: url(../images/icon/icon-rank01-06.png) left top no-repeat; } .comparative-list01 .rank07 .rank-title{ background: url(../images/icon/icon-rank01-07.png) left top no-repeat; } .comparative-list01 .rank08 .rank-title{ background: url(../images/icon/icon-rank01-08.png) left top no-repeat; } .comparative-list01 .rank09 .rank-title{ background: url(../images/icon/icon-rank01-09.png) left top no-repeat; } .comparative-list01 .rank10 .rank-title{ background: url(../images/icon/icon-rank01-10.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .comparative-list01 .rank01 .rank-title{ background: url(../images/icon/icon-rank01-01@2x.png) left top no-repeat; } .comparative-list01 .rank02 .rank-title{ background: url(../images/icon/icon-rank01-02@2x.png) left top no-repeat; } .comparative-list01 .rank03 .rank-title{ background: url(../images/icon/icon-rank01-03@2x.png) left top no-repeat; } .comparative-list01 .rank04 .rank-title{ background: url(../images/icon/icon-rank01-04@2x.png) left top no-repeat; } .comparative-list01 .rank05 .rank-title{ background: url(../images/icon/icon-rank01-05@2x.png) left top no-repeat; } .comparative-list01 .rank06 .rank-title{ background: url(../images/icon/icon-rank01-06@2x.png) left top no-repeat; } .comparative-list01 .rank07 .rank-title{ background: url(../images/icon/icon-rank01-07@2x.png) left top no-repeat; } .comparative-list01 .rank08 .rank-title{ background: url(../images/icon/icon-rank01-08@2x.png) left top no-repeat; } .comparative-list01 .rank09 .rank-title{ background: url(../images/icon/icon-rank01-09@2x.png) left top no-repeat; } .comparative-list01 .rank10 .rank-title{ background: url(../images/icon/icon-rank01-10@2x.png) left top no-repeat; } .comparative-list01 .rank01 .rank-title, .comparative-list01 .rank02 .rank-title, .comparative-list01 .rank03 .rank-title, .comparative-list01 .rank04 .rank-title, .comparative-list01 .rank05 .rank-title, .comparative-list01 .rank06 .rank-title, .comparative-list01 .rank07 .rank-title, .comparative-list01 .rank08 .rank-title, .comparative-list01 .rank09 .rank-title, .comparative-list01 .rank10 .rank-title{ -webkit-background-size: 48px 40px; background-size: 48px 40px; } } /*ランキング用のシンプルなリスト*/ .comparative-list02 > .rank01.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank05-01.png); } .comparative-list02 > .rank02.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank05-02.png); } .comparative-list02 > .rank03.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank05-03.png); } .comparative-list02 > .rank04.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank05-04.png); } .comparative-list02 > .rank05.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank05-05.png); } .comparative-list02 > .rank06.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank05-06.png); } .comparative-list02 > .rank07.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank05-07.png); } .comparative-list02 > .rank08.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank05-08.png); } .comparative-list02 > .rank09.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank05-09.png); } .comparative-list02 > .rank10.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank05-10.png); } .sub-conts .comparative-list02 > .rank01.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank06-01.png); } .sub-conts .comparative-list02 > .rank02.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank06-02.png); } .sub-conts .comparative-list02 > .rank03.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank06-03.png); } .sub-conts .comparative-list02 > .rank04.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank06-04.png); } .sub-conts .comparative-list02 > .rank05.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank06-05.png); } .sub-conts .comparative-list02 > .rank06.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank06-06.png); } .sub-conts .comparative-list02 > .rank07.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank06-07.png); } .sub-conts .comparative-list02 > .rank08.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank06-08.png); } .sub-conts .comparative-list02 > .rank09.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank06-09.png); } .sub-conts .comparative-list02 > .rank10.on-image .rank-thumb:before{ content: url(../images/icon/icon-rank06-10.png); } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .comparative-list02 > .rank01.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank05-01@2x.png); } .comparative-list02 > .rank02.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank05-02@2x.png); } .comparative-list02 > .rank03.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank05-03@2x.png); } .comparative-list02 > .rank04.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank05-04@2x.png); } .comparative-list02 > .rank05.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank05-05@2x.png); } .comparative-list02 > .rank06.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank05-06@2x.png); } .comparative-list02 > .rank07.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank05-07@2x.png); } .comparative-list02 > .rank08.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank05-08@2x.png); } .comparative-list02 > .rank09.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank05-09@2x.png); } .comparative-list02 > .rank10.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank05-10@2x.png); } .comparative-list02 > .rank01.on-image .rank-thumb:before, .comparative-list02 > .rank02.on-image .rank-thumb:before, .comparative-list02 > .rank03.on-image .rank-thumb:before, .comparative-list02 > .rank04.on-image .rank-thumb:before, .comparative-list02 > .rank05.on-image .rank-thumb:before, .comparative-list02 > .rank06.on-image .rank-thumb:before, .comparative-list02 > .rank07.on-image .rank-thumb:before, .comparative-list02 > .rank08.on-image .rank-thumb:before, .comparative-list02 > .rank09.on-image .rank-thumb:before, .comparative-list02 > .rank10.on-image .rank-thumb:before{ display: inline-block; width: 48px; height: 48px; vertical-align: middle; -webkit-background-size: contain; background-size: contain; content: " "; } .sub-conts .comparative-list02 > .rank01.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank06-01@2x.png); } .sub-conts .comparative-list02 > .rank02.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank06-02@2x.png); } .sub-conts .comparative-list02 > .rank03.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank06-03@2x.png); } .sub-conts .comparative-list02 > .rank04.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank06-04@2x.png); } .sub-conts .comparative-list02 > .rank05.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank06-05@2x.png); } .sub-conts .comparative-list02 > .rank06.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank06-06@2x.png); } .sub-conts .comparative-list02 > .rank07.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank06-07@2x.png); } .sub-conts .comparative-list02 > .rank08.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank06-08@2x.png); } .sub-conts .comparative-list02 > .rank09.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank06-09@2x.png); } .sub-conts .comparative-list02 > .rank10.on-image .rank-thumb:before{ background: url(../images/icon/icon-rank06-10@2x.png); } .sub-conts .comparative-list02 > .rank01.on-image .rank-thumb:before, .sub-conts .comparative-list02 > .rank02.on-image .rank-thumb:before, .sub-conts .comparative-list02 > .rank03.on-image .rank-thumb:before, .sub-conts .comparative-list02 > .rank04.on-image .rank-thumb:before, .sub-conts .comparative-list02 > .rank05.on-image .rank-thumb:before, .sub-conts .comparative-list02 > .rank06.on-image .rank-thumb:before, .sub-conts .comparative-list02 > .rank07.on-image .rank-thumb:before, .sub-conts .comparative-list02 > .rank08.on-image .rank-thumb:before, .sub-conts .comparative-list02 > .rank09.on-image .rank-thumb:before, .sub-conts .comparative-list02 > .rank10.on-image .rank-thumb:before{ display: inline-block; width: 30px; height: 30px; vertical-align: middle; -webkit-background-size: contain; background-size: contain; content: " "; } } /*文章中の間*/ .interval img{ display: block; margin: 60px auto; } /*チェックリスト*/ .check-list, .check-list-l{ margin-left: 0; } .check-list li, .check-list-l li{ list-style: none; } .check-list li{ margin-bottom: 1em; padding-left: 32px; background: url(../images/icon/icon-check-list.png) left 3px no-repeat; } .check-list-l li{ margin-bottom: 2em; padding: 10px 0 10px 55px; background: url(../images/icon/icon-check-list-l.png) left 3px no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .check-list li{ background: url(../images/icon/icon-check-list@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .check-list-l li{ background: url(../images/icon/icon-check-list-l@2x.png) left 3px no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*チェックリストR*/ .check-listr, .check-listr-l{ margin-left: 0; } .check-listr li, .check-listr-l li{ list-style: none; } .check-listr li{ margin-bottom: 1em; padding-left: 32px; background: url(../images/icon/icon-check-listr.png) left 3px no-repeat; } .check-listr-l li{ margin-bottom: 2em; padding: 10px 0 10px 55px; background: url(../images/icon/icon-check-listr-l.png) left 3px no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .check-listr li{ background: url(../images/icon/icon-check-listr@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .check-listr-l li{ background: url(../images/icon/icon-check-listr-l@2x.png) left 3px no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*Q&A*/ .qa-list dt{ display: block; margin-bottom: 30px; padding: 10px 0 10px 65px; background: url(../images/icon/icon-q.png) left 3px no-repeat; font-size: 1.25em; } .qa-list dd{ margin-left: 0; margin-bottom: 70px; padding: 10px 0 10px 65px; background: url(../images/icon/icon-a.png) left 3px no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .qa-list dt{ background: url(../images/icon/icon-q@2x.png) left 3px no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } .qa-list dd{ background: url(../images/icon/icon-a@2x.png) left 3px no-repeat; -webkit-background-size: 48px 49px; background-size: 48px 49px; } } /*フロー図*/ .flow-chart{ margin-left: 0; } .flow-chart li{ list-style: none; margin-bottom: 20px; padding-bottom: 60px; background: url(../images/icon/icon-arrow-b-chart.png) center bottom no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .flow-chart li{ background: url(../images/icon/icon-arrow-b-chart@2x.png) center bottom no-repeat; -webkit-background-size: 161px 40px; background-size: 161px 40px; } } .flow-chart li.end, .flow-chart li:last-child{ padding-bottom: 0; background: none; } .flow-chart .process-box{ padding: 30px; border:2px solid #444; } /*予告エリア*/ .info-box{ padding: 10px; background: repeating-linear-gradient(-45deg, #f1f1f1, #f1f1f1 3px, #f1f1f1 0, #222 6px); } .info-box p{ background:#fff; padding:10px 20px; margin:0; } .trailer-text{ font-weight: bold; font-size: 1.25em; } .trailer-text-l{ font-weight: bold; font-size: 1.5em; } /*関連記事*/ .related-thumb{ overflow: hidden; width: 100%; } .related-thumb img{ max-width: none; } .related-articles-thumbs01 ul{ margin-left: 0; } .related-articles-thumbs01 li{ list-style: none; } .related-articles-thumbs01 img{ width: auto; max-height: 100px; } .related-articles-thumbs01 .related-thumb{ float: left; width: 100px; margin-right: 20px; margin-bottom: 20px; } .related-articles-thumbs02 ul{ overflow: hidden; margin-left: 0; } .related-articles-thumbs02 li{ list-style: none; float: left; width: 30%; margin-left: 5%; } .related-articles-thumbs02 li:first-child{ margin-left: 0; } .related-articles-thumbs02 img{ width: auto; max-height: 160px; } /*目次*/ #keni_toc{ display: block; width: 80%; margin: auto; margin-bottom: 3em; padding: 25px; border: 2px solid #ccc; font-size: 0.875em; } .keni-toc-title{ font-size: 1.286em; } #keni_toc ol{ margin-top: 0; margin-bottom: 0; margin-left: 25px; } #keni_toc ol ol{ margin-top: 0.5em; } #keni_toc ol ol li{ list-style-type: circle; } /*お客様の声*/ .voice-box{ padding: 30px; background: #fafafa; } .voice-content{ overflow: hidden; } /*画像とテキストの組み合わせ*/ .col-onimage > .col{ position: relative; overflow: hidden; } .col-onimage > .col .text-onimage{ position: absolute; bottom: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; margin: 0; padding: 10px; background-color: rgba(0,0,0,0.5); background-color: #000000\9; /*IE8への対応*/ color: #fff; } html:not(:target) .col-onimage > .col .text-onimage{ background-color: rgba(0,0,0,0.5); /*IE9以上への対応*/ } .col-onimage02 > .col{ background-position: center center; background-size: cover; } .col-onimage02 > .col .text-onimage{ -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 20px; background-color: rgba(0,0,0,0.5); background-color: #000000\9; /*IE8への対応*/ color: #fff; } html:not(:target) .col-onimage02 > .col .text-onimage{ background-color: rgba(0,0,0,0.5); /*IE9以上への対応*/ } .col-onimage > .col .text-onimage a, .col-onimage02 > .col a{ color: #fff; } .col-onimage02 > .col a .text-onimage{ -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .col-onimage > .col .text-onimage a:hover, .col-onimage > .col .text-onimage a:active, .col-onimage > .col .text-onimage a:focus, .col-onimage02 > .col a:hover .text-onimage, .col-onimage02 > .col a:active .text-onimage, .col-onimage02 > .col a:focus .text-onimage{ background-color: rgba(0,0,0,0); } /*ページ送り*/ .link-next{ text-align: right; margin-right:15px; } .blog .article-body .link-next, .archive .article-body .link-next, .search .article-body .link-next{ margin-bottom: 0; } .link-next a{ padding-left: 13px; background: url(../images/icon/icon-arw-next.png) left 6px no-repeat; } .link-back a{ padding-left: 13px; background: url(../images/icon/icon-arw-prev.png) left 6px no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .link-next a{ background: url(../images/icon/icon-arw-next@2x.png) left 6px no-repeat; -webkit-background-size: 7px 10px; background-size: 7px 10px; } .link-back a{ background: url(../images/icon/icon-arw-prev@2x.png) left 6px no-repeat; -webkit-background-size: 7px 10px; background-size: 7px 10px; } } .page-nav ol{ margin-left: 0; text-align: center; } .page-nav li{ display: inline-block; margin-right: 10px; padding: 4px 13px; border: 1px solid #222; } .page-nav li:last-child{ margin-right: 0; } .page-nav li a{ display: block; margin: -4px -13px; padding: 4px 13px; color: #222; text-decoration: none; } .current{ background: #444; color: #fff; } .page-nav li a:hover, .page-nav li a:active, .page-nav li a:focus{ background: #274a7d; color: #fff; } .page-nav-bf ul{ margin-left: 0; } .page-nav-bf li{ list-style: none; } .page-nav-next{ float: right; padding-right: 13px; background: url(../images/icon/icon-arw-next.png) right center no-repeat; } .page-nav-prev{ float: left; padding-left: 13px; background: url(../images/icon/icon-arw-prev.png) left center no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .page-nav-next{ background: url(../images/icon/icon-arw-next@2x.png) right center no-repeat; -webkit-background-size: 7px 10px; background-size: 7px 10px; } .page-nav-prev{ background: url(../images/icon/icon-arw-prev@2x.png) left center no-repeat; -webkit-background-size: 7px 10px; background-size: 7px 10px; } } /*-------------------------------------------------------- デザイン調整用のスタイル --------------------------------------------------------*/ /*注記*/ .note{ display: block; padding-left: 1em; text-indent: -1em; } .note2{ display: block; padding-left: 2em; text-indent: -2em; } /*必須項目・警告・エラーの文字色*/ .warning, .error{ color: #e53935!important; } .required{ display: inline-block; color: #e53935!important; } /*傍点*/ .dot{ position: relative; padding-top: 5px; } .dot:before{ position: absolute; top: 0; left: 50%; width: 0.2em; height: 0.2em; margin-left: -.1em; background: #333; border-radius: 50%; content: ""; } /*装飾 ※IE8等古いブラウザを除く*/ .shadow{ box-shadow: 4px 4px 0px #e9e9e9; } .shadow02{ box-shadow: 0px 0px 4px #666; } .outline{ -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ccc; } .frame{ -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 95%; padding: 8px; background: #fff; box-shadow: 0px 0px 8px #666; } .border{ border: 1px solid #ccc; } /*画像のサイズ調整*/ img.resize10, html:not(:target) img.resize10{ height: auto; max-width: 10%; } img.resize20, html:not(:target) img.resize20{ height: auto; max-width: 20%; } img.resize30, html:not(:target) img.resize30{ height: auto; max-width: 30%; } img.resize40, html:not(:target) img.resize40{ height: auto; max-width: 40%; } img.resize50, html:not(:target) img.resize50{ height: auto; max-width: 50%; } img.resize60, html:not(:target) img.resize60{ height: auto; max-width: 60%; } img.resize70, html:not(:target) img.resize70{ height: auto; max-width: 70%; } img.resize80, html:not(:target) img.resize80{ height: auto; max-width: 80%; } img.resize90, html:not(:target) img.resize90{ height: auto; max-width: 90%; } /*円 ※IE8等古いブラウザを除く*/ .circle{ border-radius: 50%; } /*角丸 ※IE8等古いブラウザを除く*/ .rc4{ border-radius: 4px; } .rc4-tl{ border-top-left-radius: 4px; } .rc4-tr{ border-top-right-radius: 4px; } .rc4-bl{ border-bottom-left-radius: 4px; } .rc4-br{ border-bottom-right-radius: 4px; } .rc8{ border-radius: 8px; } .rc8-tl{ border-top-left-radius: 8px; } .rc8-tr{ border-top-right-radius: 8px; } .rc8-bl{ border-bottom-left-radius: 8px; } .rc8-br{ border-bottom-right-radius: 8px; } .rc12{ border-radius: 12px; } .rc12-tl{ border-top-left-radius: 12px; } .rc12-tr{ border-top-right-radius: 12px; } .rc12-bl{ border-bottom-left-radius: 12px; } .rc12-br{ border-bottom-right-radius: 12px; } /*角丸長方形 ※IE8等古いブラウザを除く ※高さ100pxまで*/ .rc50{ border-radius: 50px; } /*透明パネル ※IE8等古いブラウザを除く*/ .transparent-panel-wrap{ padding: 1em; background: url(../images/sample09.jpg) center center; -webkit-background-size: cover; background-size: cover; } .transparent-panel{ padding: 1em; background-color: rgba(255,255,255,0.7); background-color: #ffffff\9; /*IE8への対応*/ } html:not(:target) .transparent-panel{ background-color: rgba(255,255,255,0.7); /*IE9以上への対応*/ } /*回り込み ※モバイル時にも解除されない*/ .fl-l{ float: left; margin: 0 1em 1em 0; } .fl-r{ float: right; margin: 0 0 1em 1em; } .fl-c{ clear: both; } /*回り込み ※モバイル時には回り込み解除*/ .left{ float: left; margin: 0 1em 1em 0; } .right{ float: right; margin: 0 0 1em 1em; } /*文字の横位置*/ .al-l{ text-align: left; } .al-r{ text-align: right; } .al-c{ text-align: center; } /*文字の縦位置*/ .vl-t{ vertical-align: top!important; }/*上寄せ*/ .vl-m{ vertical-align: middle!important; }/*中央寄せ*/ .vl-b{ vertical-align: bottom!important; }/*下寄せ*/ /*周りのブロックからの距離(margin)*/ .m0{ margin: 0!important; }/*周りからのmarginを0に*/ .m0-t{ margin-top: 0!important; }/*上からのmarginを0に*/ .m0-r{ margin-right: 0!important; }/*右からのmarginを0に*/ .m0-b{ margin-bottom: 0!important; }/*下からのmarginを0に*/ .m0-l{ margin-left: 0!important; }/*左からのmarginを0に*/ .m5{ margin: 5px!important; } .m5-t{ margin-top: 5px!important; } .m5-r{ margin-right: 5px!important; } .m5-b{ margin-bottom: 5px!important; } .m5-l{ margin-left: 5px!important; } .m10{ margin: 10px!important; } .m10-t{ margin-top: 10px!important; } .m10-r{ margin-right: 10px!important; } .m10-b{ margin-bottom: 10px!important; } .m10-l{ margin-left: 10px!important; } .m15{ margin: 15px!important; } .m15-t{ margin-top: 15px!important; } .m15-r{ margin-right: 15px!important; } .m15-b{ margin-bottom: 15px!important; } .m15-l{ margin-left: 15px!important; } .m20{ margin: 20px!important; } .m20-t{ margin-top: 20px!important; } .m20-r{ margin-right: 20px!important; } .m20-b{ margin-bottom: 20px!important; } .m20-l{ margin-left: 20px!important; } .m25{ margin: 25px!important; } .m25-t{ margin-top: 25px!important; } .m25-r{ margin-right: 25px!important; } .m25-b{ margin-bottom: 25px!important; } .m25-l{ margin-left: 25px!important; } .m30{ margin: 30px!important; } .m30-t{ margin-top: 30px!important; } .m30-r{ margin-right: 30px!important; } .m30-b{ margin-bottom: 30px!important; } .m30-l{ margin-left: 30px!important; } .m40{ margin: 40px!important; } .m40-t{ margin-top: 40px!important; } .m40-r{ margin-right: 40px!important; } .m40-b{ margin-bottom: 40px!important; } .m40-l{ margin-left: 40px!important; } .m50{ margin: 50px!important; } .m50-t{ margin-top: 50px!important; } .m50-r{ margin-right: 50px!important; } .m50-b{ margin-bottom: 50px!important; } .m50-l{ margin-left: 50px!important; } .m60{ margin: 60px!important; } .m60-t{ margin-top: 60px!important; } .m60-r{ margin-right: 60px!important; } .m60-b{ margin-bottom: 60px!important; } .m60-l{ margin-left: 60px!important; } .m70{ margin: 70px!important; } .m70-t{ margin-top: 70px!important; } .m70-r{ margin-right: 70px!important; } .m70-b{ margin-bottom: 70px!important; } .m70-l{ margin-left: 70px!important; } .m80{ margin: 80px!important; } .m80-t{ margin-top: 80px!important; } .m80-r{ margin-right: 80px!important; } .m80-b{ margin-bottom: 80px!important; } .m80-l{ margin-left: 80px!important; } .m90{ margin: 90px!important; } .m90-t{ margin-top: 90px!important; } .m90-r{ margin-right: 90px!important; } .m90-b{ margin-bottom: 90px!important; } .m90-l{ margin-left: 90px!important; } .m100{ margin: 100px!important; } .m100-t{ margin-top: 100px!important; } .m100-r{ margin-right: 100px!important; } .m100-b{ margin-bottom: 100px!important; } .m100-l{ margin-left: 100px!important; } .m120{ margin: 120px!important; } .m120-t{ margin-top: 120px!important; } .m120-r{ margin-right: 120px!important; } .m120-b{ margin-bottom: 120px!important; } .m120-l{ margin-left: 120px!important; } .m150{ margin: 150px!important; } .m150-t{ margin-top: 150px!important; } .m150-r{ margin-right: 150px!important; } .m150-b{ margin-bottom: 150px!important; } .m150-l{ margin-left: 150px!important; } .m200{ margin: 200px!important; } .m200-t{ margin-top: 200px!important; } .m200-r{ margin-right: 200px!important; } .m200-b{ margin-bottom: 200px!important; } .m200-l{ margin-left: 200px!important; } .m300{ margin: 300px!important; } .m300-t{ margin-top: 300px!important; } .m300-r{ margin-right: 300px!important; } .m300-b{ margin-bottom: 300px!important; } .m300-l{ margin-left: 300px!important; } /*周りのブロックからの距離(padding)*/ .p0{ padding: 0!important; } .p0-t{ padding-top: 0!important; } .p0-r{ padding-right: 0!important; } .p0-b{ padding-bottom: 0!important; } .p0-l{ padding-left: 0!important; } .p5{ padding: 5px!important; } .p5-t{ padding-top: 5px!important; } .p5-r{ padding-right: 5px!important; } .p5-b{ padding-bottom: 5px!important; } .p5-l{ padding-left: 5px!important; } .p10{ padding: 10px!important; } .p10-t{ padding-top: 10px!important; } .p10-r{ padding-right: 10px!important; } .p10-b{ padding-bottom: 10px!important; } .p10-l{ padding-left: 10px!important; } .p15{ padding: 15px!important; } .p15-t{ padding-top: 15px!important; } .p15-r{ padding-right: 15px!important; } .p15-b{ padding-bottom: 15px!important; } .p15-l{ padding-left: 15px!important; } .p20{ padding: 20px!important; } .p20-t{ padding-top: 20px!important; } .p20-r{ padding-right: 20px!important; } .p20-b{ padding-bottom: 20px!important; } .p20-l{ padding-left: 20px!important; } .p25{ padding: 25px!important; } .p25-t{ padding-top: 25px!important; } .p25-r{ padding-right: 25px!important; } .p25-b{ padding-bottom: 25px!important; } .p25-l{ padding-left: 25px!important; } .p30{ padding: 30px!important; } .p30-t{ padding-top: 30px!important; } .p30-r{ padding-right: 30px!important; } .p30-b{ padding-bottom: 30px!important; } .p30-l{ padding-left: 30px!important; } .p40{ padding: 40px!important; } .p40-t{ padding-top: 40px!important; } .p40-r{ padding-right: 40px!important; } .p40-b{ padding-bottom: 40px!important; } .p40-l{ padding-left: 40px!important; } .p50{ padding: 50px!important; } .p50-t{ padding-top: 50px!important; } .p50-r{ padding-right: 50px!important; } .p50-b{ padding-bottom: 50px!important; } .p50-l{ padding-left: 50px!important; } .p60{ padding: 60px!important; } .p60-t{ padding-top: 60px!important; } .p60-r{ padding-right: 60px!important; } .p60-b{ padding-bottom: 60px!important; } .p60-l{ padding-left: 60px!important; } .p70{ padding: 70px!important; } .p70-t{ padding-top: 70px!important; } .p70-r{ padding-right: 70px!important; } .p70-b{ padding-bottom: 70px!important; } .p70-l{ padding-left: 70px!important; } .p80{ padding: 80px!important; } .p80-t{ padding-top: 80px!important; } .p80-r{ padding-right: 80px!important; } .p80-b{ padding-bottom: 80px!important; } .p80-l{ padding-left: 80px!important; } .p90{ padding: 90px!important; } .p90-t{ padding-top: 90px!important; } .p90-r{ padding-right: 90px!important; } .p90-b{ padding-bottom: 90px!important; } .p90-l{ padding-left: 90px!important; } .p100{ padding: 100px!important; } .p100-t{ padding-top: 100px!important; } .p100-r{ padding-right: 100px!important; } .p100-b{ padding-bottom: 100px!important; } .p100-l{ padding-left: 100px!important; } /*フォントの装飾*/ .b{ font-weight: bold!important; }/*太字*/ .normal{ font-weight: normal!important; }/*太字を解除*/ /*フォントサイズの設定*/ .big{ font-size: 1.2em!important; } .big2{ font-size: 1.5em!important; } .big3{ font-size: 1.8em!important; } .small{ font-size: 0.8em!important; } .f08em{ font-size: 0.8em; } .f09em{ font-size: 0.9em; } .f10em{ font-size: 1.0em; } .f11em{ font-size: 1.1em; } .f12em{ font-size: 1.2em; } .f13em{ font-size: 1.3em; } .f14em{ font-size: 1.4em; } .f15em{ font-size: 1.5em; } .f16em{ font-size: 1.6em; } .f17em{ font-size: 1.7em; } .f18em{ font-size: 1.8em; } .f19em{ font-size: 1.9em; } .f20em{ font-size: 2.0em; } .f21em{ font-size: 2.1em; } .f22em{ font-size: 2.2em; } .f23em{ font-size: 2.3em; } .f24em{ font-size: 2.4em; } .f25em{ font-size: 2.5em; } .f26em{ font-size: 2.6em; } .f27em{ font-size: 2.7em; } .f28em{ font-size: 2.8em; } .f29em{ font-size: 2.9em; } .f30em{ font-size: 3.0em; } .f8pt{ font-size: 8.5pt; } .f9pt{ font-size: 9.0pt; } .f10pt{ font-size: 10pt; } .f11pt{ font-size: 11pt; } .f12pt{ font-size: 12pt; } .f13pt{ font-size: 13pt; } .f14pt{ font-size: 14pt; } .f15pt{ font-size: 15pt; } .f16pt{ font-size: 16pt; } .f17pt{ font-size: 17pt; } .f18pt{ font-size: 18pt; } .f19pt{ font-size: 19pt; } .f20pt{ font-size: 20pt; } .f21pt{ font-size: 21pt; } .f22pt{ font-size: 22pt; } .f23pt{ font-size: 23pt; } .f24pt{ font-size: 24pt; } /*フォントの色設定*/ .red{ color: #ff3300!important; }/*赤*/ .blue{ color: #3187F9!important; }/*青*/ .green{ color: #4caf50!important; }/*緑*/ .yellow{ color: #E1D902!important; }/*黄*/ .navy{ color: #004182!important; }/*紺*/ .orange{ color: #ff9800!important; }/*橙*/ .pink{ color: #FF7173!important; }/*ピンク*/ .purple{ color: #9c27b0!important; }/*紫*/ .olive{ color: #808000!important; }/*オリーブ*/ .lime{ color: #11ee11!important; }/*黄緑*/ .aqua{ color: #00bcd4!important; }/*水色*/ .black{ color: #000!important; }/*黒*/ .gray{ color: #aaa!important; }/*灰*/ .white{ color: #fff!important; }/*白*/ .brown{ color: #6d4c33!important; }/*茶*/ .gold{ color: #f3d367!important; }/*変更追加。黄金*/ .gold2{ color: #ffcc33!important; }/*変更追加。薄い黄金(黄土色)*/ .lightgreen{ color: #07d34f!important; }/*変更追加。ライトグリーン*/ .lemonyellow{ color: #f5ff3e!important; }/*変更追加。レモン色*/ /*マーカー表示(背景に着色)*/ .box-yellow, .box-orange, .box-pink, .box-lime, .box-gray{ padding: 2px; } .box-yellow{ background-color: #ff6; }/*黄*/ .box-orange{ background-color: #FFB334; }/*橙*/ .box-pink{ background-color: #ffbbdd; }/*ピンク*/ .box-lime{ background-color: #9f9; }/*黄緑*/ .box-gray{ background-color: #ccc; }/*灰*/ .box-white{ background-color: #fff; }/*変更追加。白*/ .box-aqua{ background-color: #7ec0ee; }/*変更追加。青*/ .box-red{ background-color: #ff3300; }/*変更追加。赤*/ .box-black{ background-color: #000; }/*変更追加。黒*/ .box-redb{ padding:2px;background-color: #990000!important; }/*変更追加。暗赤色*/ .box-lightgreen{ padding:2px;background-color: #07d34f!important; }/*変更追加。ライトグリーン*/ /*行間の設定*/ .lh10{ line-height: 1.0!important; } .lh11{ line-height: 1.1!important; } .lh12{ line-height: 1.2!important; } .lh13{ line-height: 1.3!important; } .lh14{ line-height: 1.4!important; } .lh15{ line-height: 1.5!important; } .lh16{ line-height: 1.6!important; } .lh17{ line-height: 1.7!important; } .lh18{ line-height: 1.8!important; } .lh19{ line-height: 1.9!important; } .lh20{ line-height: 2.0!important; } /*横幅を指定*/ .w05{ width: 5%; } .w10{ width: 10%; } .w15{ width: 15%; } .w20{ width: 20%; } .w25{ width: 25%; } .w30{ width: 30%; } .w35{ width: 35%; } .w40{ width: 40%; } .w45{ width: 45%; } .w50{ width: 50%; } .w55{ width: 55%; } .w60{ width: 60%; } .w65{ width: 65%; } .w70{ width: 70%; } .w75{ width: 75%; } .w80{ width: 80%; } .w85{ width: 85%; } .w90{ width: 90%; } .w95{ width: 95%; } .w100{ width: 100%; } /*下線や取消線の設定*/ .underline{ text-decoration: underline!important; } .del{ text-decoration: line-through; } .noborder{ border: 0!important; }/*枠線を無くす*/ /*重なりの優先度*/ .z1{ z-index: 1!important; } .z2{ z-index: 2!important; } .z3{ z-index: 3!important; } .z4{ z-index: 4!important; } .z5{ z-index: 5!important; } .z10{ z-index: 10!important; } .z20{ z-index: 20!important; } .z30{ z-index: 30!important; } .z40{ z-index: 40!important; } .z50{ z-index: 50!important; } /*横並びリスト*/ .inline{ margin: 1em 0; padding: 0; } .inline li{ display: inline; list-style-type: none; } /*マーカー無しのリスト*/ .none{ margin: 1em 0; padding: 0; } .none li{ list-style-type: none; } /*------------------------------------------------------------ 文字列の前にアイコン -------------------------------------------------------------*/ /*ポイントアイコンアイコン*/ .icon-point{ padding: 0 0 0 30px; background: url(../images/icon/icon-point.png) left 3px no-repeat; } .icon-point-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-point-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-point{ background: url(../images/icon/icon-point@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-point-l{ background: url(../images/icon/icon-point-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*注意アイコン*/ .icon-caution{ padding: 0 0 0 30px; background: url(../images/icon/icon-caution.png) left 3px no-repeat; } .icon-caution-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-caution-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-caution{ background: url(../images/icon/icon-caution@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-caution-l{ background: url(../images/icon/icon-caution-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*NEWアイコン*/ .icon-new{ padding: 0 0 0 30px; background: url(../images/icon/icon-new.png) left 3px no-repeat; } .icon-new-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-new-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-new{ background: url(../images/icon/icon-new@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-new-l{ background: url(../images/icon/icon-new-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*初心者アイコン*/ .icon-wakaba{ padding: 0 0 0 30px; background: url(../images/icon/icon-wakaba.png) left 3px no-repeat; } .icon-wakaba-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-wakaba-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-wakaba{ background: url(../images/icon/icon-wakaba@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-wakaba-l{ background: url(../images/icon/icon-wakaba-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*別ウインドウアイコン*/ .icon-blank{ padding: 0 0 0 30px; background: url(../images/icon/icon-blank.png) left 3px no-repeat; } .icon-blank-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-blank-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-blank{ background: url(../images/icon/icon-blank@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-blank-l{ background: url(../images/icon/icon-blank-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*矢印上アイコン*/ .icon-arrow-t{ padding: 0 0 0 30px; background: url(../images/icon/icon-arrow-t.png) left 3px no-repeat; } .icon-arrow-t-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-arrow-t-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-arrow-t{ background: url(../images/icon/icon-arrow-t@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-arrow-t-l{ background: url(../images/icon/icon-arrow-t-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*矢印右アイコン*/ .icon-arrow-r{ padding: 0 0 0 30px; background: url(../images/icon/icon-arrow-r.png) left 3px no-repeat; } .icon-arrow-r-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-arrow-r-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-arrow-r{ background: url(../images/icon/icon-arrow-r@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-arrow-r-l{ background: url(../images/icon/icon-arrow-r-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*矢印下アイコン*/ .icon-arrow-b{ padding: 0 0 0 30px; background: url(../images/icon/icon-arrow-b.png) left 3px no-repeat; } .icon-arrow-b-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-arrow-b-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-arrow-b{ background: url(../images/icon/icon-arrow-b@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-arrow-b-l{ background: url(../images/icon/icon-arrow-b-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*矢印左アイコン*/ .icon-arrow-l{ padding: 0 0 0 30px; background: url(../images/icon/icon-arrow-l.png) left 3px no-repeat; } .icon-arrow-l-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-arrow-l-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-arrow-l{ background: url(../images/icon/icon-arrow-l@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-arrow-l-l{ background: url(../images/icon/icon-arrow-l-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*ダウンロード用PDアイコン*/ .icon-dl{ padding: 0 0 0 30px; background: url(../images/icon/icon-dl.png) left 3px no-repeat; } .icon-dl-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-dl-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-dl{ background: url(../images/icon/icon-dl@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-dl-l{ background: url(../images/icon/icon-dl-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*PDFアイコン*/ .icon-pdf{ padding: 0 0 0 30px; background: url(../images/icon/icon-pdf.png) left 3px no-repeat; } .icon-pdf-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-pdf-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-pdf{ background: url(../images/icon/icon-pdf@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-pdf-l{ background: url(../images/icon/icon-pdf-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*Zipアイコン*/ .icon-zip{ padding: 0 0 0 30px; background: url(../images/icon/icon-zip.png) left 3px no-repeat; } .icon-zip-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-zip-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-zip{ background: url(../images/icon/icon-zip@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-zip-l{ background: url(../images/icon/icon-zip-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*メールアイコン*/ .icon-mail{ padding: 0 0 0 30px; background: url(../images/icon/icon-mail.png) left 3px no-repeat; } .icon-mail-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-mail-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-mail{ background: url(../images/icon/icon-mail@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-mail-l{ background: url(../images/icon/icon-mail-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*ショッピングカートアイコン*/ .icon-cart{ padding: 0 0 0 30px; background: url(../images/icon/icon-cart.png) left 3px no-repeat; } .icon-cart-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-cart-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-cart{ background: url(../images/icon/icon-cart@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-cart-l{ background: url(../images/icon/icon-cart-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*虫めがねアイコン*/ .icon-search{ padding: 0 0 0 30px; background: url(../images/icon/icon-search.png) left 3px no-repeat; } .icon-search-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-search-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-search{ background: url(../images/icon/icon-search@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-search-l{ background: url(../images/icon/icon-search-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*ホームアイコン*/ .icon-home{ padding: 0 0 0 30px; background: url(../images/icon/icon-home.png) left 3px no-repeat; } .icon-home-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-home-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-home{ background: url(../images/icon/icon-home@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-home-l{ background: url(../images/icon/icon-home-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*フォルダアイコン*/ .icon-folder{ padding: 0 0 0 30px; background: url(../images/icon/icon-folder.png) left 3px no-repeat; } .icon-folder-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-folder-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-folder{ background: url(../images/icon/icon-folder@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-folder-l{ background: url(../images/icon/icon-folder-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*時計アイコン*/ .icon-time{ padding: 0 0 0 30px; background: url(../images/icon/icon-time.png) left 3px no-repeat; } .icon-time-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-time-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-time{ background: url(../images/icon/icon-time@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-time-l{ background: url(../images/icon/icon-time-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*カレンダーアイコン*/ .icon-calendar{ padding: 0 0 0 30px; background: url(../images/icon/icon-calendar.png) left 3px no-repeat; } .icon-calendar-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-calendar-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-calendar{ background: url(../images/icon/icon-calendar@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-calendar-l{ background: url(../images/icon/icon-calendar-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*RSSアイコン*/ .icon-rss{ padding: 0 0 0 30px; background: url(../images/icon/icon-rss.png) left 3px no-repeat; } .icon-rss-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-rss-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-rss{ background: url(../images/icon/icon-rss@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-rss-l{ background: url(../images/icon/icon-rss-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*ビルアイコン*/ .icon-building{ padding: 0 0 0 30px; background: url(../images/icon/icon-building.png) left 3px no-repeat; } .icon-building-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-building-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-building{ background: url(../images/icon/icon-building@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-building-l{ background: url(../images/icon/icon-building-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } /*マップアイコン*/ .icon-map{ padding: 0 0 0 30px; background: url(../images/icon/icon-map.png) left 3px no-repeat; } .icon-map-l{ padding: 10px 0 10px 60px; background: url(../images/icon/icon-map-l.png) left top no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .icon-map{ background: url(../images/icon/icon-map@2x.png) left 3px no-repeat; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .icon-map-l{ background: url(../images/icon/icon-map-l@2x.png) left top no-repeat; -webkit-background-size: 48px 48px; background-size: 48px 48px; } } .outbound{ padding: 3px; padding-left: 15px; background: url(../images/icon/icon-outbound-link.png) left center no-repeat; } /*Retina(高解像度)ディスプレイ用*/ @media screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){ .outbound{ background: url(../images/icon/icon-outbound-link@2x.png) left center no-repeat; -webkit-background-size: 12px 13px; background-size: 12px 13px; } } /*-------------------------------------------------------- floatの回り込みを解除 --------------------------------------------------------*/ .site-header-conts:after, .main-body-in:after, .article-body:after, .section-in:after, .col4-wrap:after, .col3-wrap:after, .col2-wrap:after, .news-item:after, .related-articles-thumbs01 li:after, .btn-area:after, .page-nav-bf:after, .clearfix:after{ content: ''; display: block; clear: both; height: 0; } /*--------------------------------------------------------------------- generated by Keni Template Maker Ver.7.1 on 2018-08-06 13:24:02 ----------------------------------------------------------------------*/ /*以下、テキストボックス追加*/ .textbox { border: solid 1px #fff ; background: #fff; margin:20px 20px ; padding:20px 15px ; } /*テキストボックス1*/ .textbox1 { border: solid 3px #ccc ; box-shadow: 0 0 3px 3px #ccc; margin:30px 30px ; padding:20px 15px ; } /*テキストボックス2*/ .textbox2 { border: solid 2px #ccc ; margin:30px 30px ; padding:20px 15px ; } /*テキストボックス3*/ .textbox3 { position: relative; margin: 2em 2em; padding: 20px 30px; background: #efefef; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.1); } /*テキストボックス4*/ .textbox4 { border: solid 2px #5bc2d9 ; margin:20px 30px ; padding:20px 15px ; } /*テキストボックス5*/ .textbox5 { border: solid 2px #ccc ; box-shadow: 0 0 2px 2px #ccc; margin:30px 50px ; padding:20px 0px 0px 0px ; }