@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 30px ;
padding:20px 15px ;
}
/*テキストボックス1*/
.textbox1 {
border: solid 3px #ccc ;
box-shadow: 0 0 3px 3px #ccc;
margin:20px 30px ;
padding:20px 15px ;
}
/*テキストボックス2*/
.textbox2 {
border: solid 2px #ccc ;
margin:20px 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:10px 10px ;
padding:20px 15px ;
}
/*テキストボックス5*/
.textbox5 {
border: solid 2px #ccc ;
box-shadow: 0 0 2px 2px #ccc;
margin:30px 50px ;
padding:20px 0px 0px 0px ;
}