@charset "utf-8";
/* CSS Document */
/* オンカジヤリ */
/*
Theme Name: appinfo
Theme URI: https://appinfo.jp
Description: appinfo theme.
*/
/* ブラウザデフォルト*/
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p,
header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav {
margin: 0;
padding: 0;
font-size: 100%;
}
body {
line-height: 1.0;
-webkit-text-size-adjust: none;
}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
display:block;
}
img {
border: 0;
vertical-align: bottom;
max-width: 100%;
height: auto;
}
ul, ol {
list-style: none;
}
table {
border-spacing: 0;
empty-cells: show;
}
@media print {
body {
-webkit-print-color-adjust: exact;
}
}
.pc{
display: none;
}
.none{display: none;}
/************************************
form
*************************************/
/*
reset
***********************/
button,
option,
select,
textarea,
input[type="button"],
input[type="submit"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="text"],
input[type="select"],
input[type="option"] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
border: none;
outline: 0;
margin: 0;
background: #fff;
}
/* for firefox */
select {
text-indent: 0.01px;
text-overflow: '';
}
/* for ie10 ie11 ie系のプルダウンの矢印を消す ie9は非対応 */
select::-ms-expand {
display: none;
}
/* base setting
---------------------------------------*/
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 16px;
line-height: 1.9;
letter-spacing: 0.1em;
color: #000000;
background-color: #F8F1DE;
word-break: break-all;
}
a {
color: #357EBB;
text-decoration: underline;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
word-break: break-all;
}
a:hover {
text-decoration: none;
}
a img{
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
text-decoration:none;
color:#000;
}
a:hover img{
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter: "alpha( opacity=50 )";
}
/*反転時の文字色・背景色 */
::selection {
background: #FFEF03; /* 背景色*/
color:#000000; /* 文字色*/
}
/* Firefox対応*/
::-moz-selection {
background: #FFEF03; /* 背景色*/
color:#000000; /* 文字色*/
}
.wrapper{
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
.wrapper:after{
display: block;
clear: both;
content:"";
}
blockquote{
background:url(http://appinfo.jp/img/base/blockquote1.png),url(http://appinfo.jp/img/base/blockquote2.png); /*背景画像の指定*/
background-repeat:no-repeat; /*繰り返しの解除*/
background-size: 20px auto,20px auto;
background-position:top 10px left 10px,bottom 10px right 10px;
/位置（左上、右下）*/
clear: both;
margin-bottom: 30px;
padding-top: 50px;
background-color: #D0D0D0;
-webkit-border-radius: 5px;
border-radius: 5px;
max-width: 100%;
margin-left: 0px;
margin-right: 0px;
padding-bottom: 20px!important;
padding-right: 20px;
padding-left: 20px;
display: block;
}
blockquote a{
color: #999999;
}
#back-top {
position: fixed;
bottom: 7%;
right: 4%;
display: block;
width: 56px;/*幅*/
height: 56px;/*高さ*/
background: #D0D0D0;/*背景色*/
text-align: center;/*中央寄せ*/
border-radius: 50%;/*角丸く*/
transition: .3s;/*滑らかな動きに*/
box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);/*影*/
z-index: 20;
}
#back-top a {
width: 56px;/*幅*/
height: 56px;/*高さ*/
display: block;
color: #FFFFFF;
}
#back-top:hover {/*ホバー時*/
box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
}
#back-top i {/*中央のアイコン*/
line-height: 56px;/*＝幅と高さ*/
font-size: 24px;/*サイズ*/
}
.cat-day{
font-size: 14px;
text-align: center;
margin-bottom: 10px!important;
font-family: 'Noto Sans JP', sans-serif;
}
.cat-day a{
background-color: #0080AA;
display: inline-block;
color: #FFFFFF;
text-decoration: none;
text-align: center;
border-radius: 3px;
padding-top: 3px;
padding-right: 15px;
padding-bottom: 3px;
padding-left: 15px;
}
.updateinfo{
font-size: 14px;
text-align: center;
margin-bottom: 40px;
}
.updateinfo li{
display: inline;
}
/*キーワード*/
.keyword{
border: 3px solid #D9D9D9;
margin-bottom: 40px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
}
.keyword:after{
display: block;
clear: both;
content:"";
}
.keyword p{
font-weight: bold;
font-family: 'Noto Sans JP', sans-serif;
margin-bottom: 20px!important;
}
.keyword li{
float: left;
}
.keyword li a{
display: inline-block;
color: #FFFFFF;
background-color: #888888;
text-decoration: none;
margin-right: 3px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
margin-bottom: 20px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.keyword li a:hover{
background-color: #B0B0B0;
}
/*
コメント
-----------------------------------------*/
.comments{
margin-top: 60px;
}
.commentmidashi{
font-size: 20px;
border-bottom-width: 3px;
border-bottom-style: dotted;
border-bottom-color: #D9D9D9;
margin-bottom: 20px;
font-weight: normal;
padding-bottom: 15px;
}
.comment-form-comment{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
display: block;
}
.comments input, .comments textarea{
display: block;
}
.comment-form-url{
display: none;
}
.comments .required{
color: #FA603A;
}
.form-allowed-tags{display:none;}
.comments textarea{
width: 96%;
border: 1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 2%;
padding-left: 2%;
}
.comments .submit{
-webkit-border-radius: 4px!important;
-moz-border-radius: 4px!important;
-ms-border-radius: 4px!important;
border-radius: 4px!important;
width: 40%;
height: 44px;
display: block;
color: #fff;
text-align: center;
border: 1px solid #111;
cursor: pointer;
background-color: #000000!important;
padding-right: 0px!important;
padding-left: 0px!important;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
font-size: 16px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
-webkit-tap-highlight-color: transparent;
transition: .3s ease-out;/*変化を緩やかに*/
margin-top: 10px!important;
}
.comments .submit:hover {
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*浮き上がるように*/
background-color: #454545!important;
}
/*
文字装飾
-----------------------------------------*/
/* 色 */
.orange{color: #E37C34;}
/* サイズ */
.m12{font-size: 12px; line-height: 1.4em!important;}
.u{text-decoration: underline;}
.b{font-weight: bold;}
.no{text-decoration: line-through;}
.back-y{
background: linear-gradient(transparent 60%, #ffff66 60%);
}
.red{color: #EC4755;}
.white{color: #FFFFFF!important;}
.yellow{color: #FEDC01}
.gray{color: #CCCCCC;}
.m14{font-size: 14px;}
.m16{font-size: 16px;}
.m18{font-size: 18px;}
.m20{font-size: 20px;}
.m22{font-size: 22px;}
.m24{font-size: 24px;}
.m26{font-size: 26px;}
.m28{font-size: 28px;}
.m30{font-size: 30px;}
.m32{font-size: 32px;}
strong{font-weight: bold;}
.kage img{-webkit-box-shadow: 0px 0px 3px #CCCCCC;
-ms-box-shadow: 0px 0px 3px #CCCCCC;
box-shadow: 0px 0px 3px #CCCCCC;}
.font01{
font-family: 'Baloo Chettan', cursive!important;
font-size: 23px!important;
}
.font02{
font-family: 'Kosugi Maru', sans-serif;
}
/*
装飾
-----------------------------------------*/
hr.style1 {
clear: both; /* 線色 */
height: 2px; /* 高さ */
border-top-width: 2px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dotted;
border-top-color: #FFA477;
border-right-color: #FFA477;
border-bottom-color: #FFA477;
border-left-color: #FFA477;
margin-top: 40px;
margin-bottom: 40px;
}
.t5{margin-top: 5px;}
.b5{margin-bottom: 5px;}
.t10{margin-top: 10px;}
.b10{margin-bottom: 10px;}
.t20{margin-top: 20px;}
.b20{margin-bottom: 20px;}
.t30{margin-top: 30px;}
.b30{margin-bottom: 30px;}
.t40{margin-top: 40px;}
.b40{margin-bottom: 40px;}
.t50{margin-top: 50px;}
.b50{margin-bottom: 50px;}
.t60{margin-top: 60px;}
.b60{margin-bottom: 60px;}
.t70{margin-top: 70px;}
.b70{margin-bottom: 70px;}
.pt5{padding-top: 5px!important;}
.pb5{padding-bottom: 5px!important;}
.pt10{padding-top: 10px!important;}
.pb10{padding-bottom: 10px!important;}
.pt20{padding-top: 20px!important;}
.pb20{padding-bottom: 20px!important;}
.pt30{padding-top: 30px!important;}
.pb30{padding-bottom: 30px!important;}
.pt40{padding-top: 40px!important;}
.pb40{padding-bottom: 40px!important;}
.pt50{padding-top: 50px!important;}
.pb50{padding-bottom: 50px!important;}
.pt60{padding-top: 60px!important;}
.pb60{padding-bottom: 60px!important;}
.pt70{padding-top: 70px!important;}
.pb70{padding-bottom: 70px!important;}
.cent{
text-align: center;
margin-right: auto;
margin-left: auto;
}
.txt-right{
text-align: right;
margin-bottom: 20px!important;
}
/*
トップページソート
-----------------------------------------*/
.sortbutton {
display: flex;
justify-content:space-between;
width: 100%;
margin-bottom: 10px;
}
.sortbutton_midashi {
text-align: center;
margin-bottom: 5px!important;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
}
.sortbutton li{
width: 100%;
margin-right: 5px;
}
.sortbutton li:last-of-type{
margin-right: 0px;
}
.sort {
border:none;
color:#fff;
text-decoration: none;
background-color: #666666;
padding-top: 8px;
padding-right: 10px;
padding-bottom: 8px;
padding-left: 10px;
width: 100%;
cursor: pointer!important;
-webkit-border-radius: 4px!important;
-moz-border-radius: 4px!important;
-ms-border-radius: 4px!important;
border-radius: 4px!important;
}
.sort:hover {
text-decoration: none;
background-color:#999999;
}
.sort:focus {
outline:none;
}
.sort:after {
display:inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content:"";
position: relative;
top:50%;
right:-10px;
}
.sort.asc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content:"";
position: relative;
top:4px;
right:-5px;
}
.sort.desc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content:"";
position: relative;
top:-4px;
right:-5px;
}
.sortlist{
margin-right: auto;
margin-left: auto;
}
.sortlist > li{
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #D9D9D9;
margin-bottom: 40px;
}
.sortlist li:last-of-type{
border-bottom-style: none;
margin-bottom: 0px;
}
/*
リスト
-----------------------------------------*/
.d-list{
margin-bottom: 40px!important;
position:relative;
background-color: #FEEA89;
clear: both;
-webkit-border-radius: 3px;
border-radius: 3px;
padding-top: 40px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
.d-list:after{
display: block;
clear: both;
content:"";
}
.d-list dt{
margin-bottom: 20px;
padding-left: 30px;
padding-right: 20px;
clear: both;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
font-size: 18px;
color: #FF556F;
}
.d-list dt:before {/*リストのアイコン*/
font-family: "Font Awesome 5 Free";
content: "\f02e";
position: absolute;
left : 20px; /*左端からのアイコンまでの距離*/
color: #FF556F;/*アイコン色*/
}
.d-list dd{
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #000000;
margin-bottom: 40px;
}
.d-list dd:after{
display: block;
clear: both;
content:"";
}
.d-list dd:last-of-type{
border-bottom-style: none;
}
.list {
position: relative;
padding-right: 10px;
padding-left: 25px;
margin-bottom: 40px;
}
.list li{
line-height: 1.6;
margin-bottom: 20px;
font-weight: bold;
}
.list li:before {/*疑似要素*/
font-family: "Font Awesome 5 Free";
content: "\f058";
position: absolute;
left : 0em; /*左端からのアイコンまで*/
color: #000000; /*アイコン色*/
font-size: 17px;
}
.numList{
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding-right: 10px;
margin-bottom: 40px;
}
.numList li{
position: relative;
line-height: 1.6;
margin-bottom: 20px;
font-weight: bold;
padding-left: 25px;
}
.numList li:before{
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*数字のデザイン変える*/
display:inline-block;
background: #0080AA;
color: white;
font-weight:bold;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 20px;
height: 20px;
line-height: 20px;
text-align:center;
top:3px;
}
.numList li:last-of-type{
border-bottom: none; /*最後のliの線だけ消す*/
}
.b-half {
text-align: center;
clear: both;
margin-bottom: 40px;
width: 100%;
}
.b-half li{
display: block;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
}
/*枠・背景
---------------------------------------------------------------------------*/
.matome {
border: 5px solid #FF556F;
padding-top: 50px;
padding-bottom: 0px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 40px;
display: block;
position: relative;
background-color: #FFFFFF;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.matome h3,.matome h4{
position:relative!important;
font-size:24px!important;
background-color: #FF556F;
padding-top: 20px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
color: #FFFFFF;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
border-bottom-width: 4px;
border-bottom-style: double;
border-bottom-color: #FFFFFF;
}
.matome h2::after,.matome h3::after,.matome h4::after{
content: "まとめ"!important;
position: absolute!important;
top: -12px;
left: 10px;
background: #FFEF03!important;
font-size: 12px!important;
color: #000000!important;
padding: 0 10px!important;
}
div.matome h2{
position:relative!important;
font-size:24px!important;
background-color: #FF556F;
background-image: none;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 40px;
margin-left: 0px;
color: #FFFFFF;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
border-bottom-width: 4px;
border-bottom-style: double;
border-bottom-color: #FFFFFF;
}
.mokuji {
background: #F8F1DE;
margin-bottom: 60px;
padding-bottom: 30px;
}
.mokuji .mokujititle {
background: #FEEA89;
padding: 4px;
text-align: center;
color: #000000;
font-weight: bold;
font-family: 'Noto Sans JP', sans-serif;
}
.mokuji p {
margin: 0;
}
.mokuji ol{
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding-right: 20px;
}
.mokuji li{
position: relative;
line-height: 1.6;
margin-bottom: 10px;
font-weight: bold;
padding-left: 50px;
margin-right: 20px;
}
.mokuji li a{
display: block;
color: #000000;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
}
.mokuji li a:hover{
text-decoration: underline;
}
.mokuji li:before{
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*数字のデザイン変える*/
display:inline-block;
background: #FEEA89;
color: #000000;
font-weight:bold;
font-size: 15px;
border-radius: 50%;
left: 20px;
width: 20px;
height: 20px;
line-height: 20px;
text-align:center;
top:13px;
}
.numList li:last-of-type{
border-bottom: none; /*最後のliの線だけ消す*/
}
.waku{
clear: both;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 1px;
padding-left: 20px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #F2F2F2;
margin-bottom: 40px;
font-family: 'Noto Sans JP', sans-serif;
}
.waku-orange{
clear: both;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 1px;
padding-left: 20px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #FFA477;
margin-bottom: 40px;
font-family: 'Noto Sans JP', sans-serif;
color: #F8F1DE;
}
.waku-orange .list li:before{
color: #FFEF03;
}
.box .waku-orange h4{
color: #80523C;
border-left-color: #80523C;
}
.waku-blue{
clear: both;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 1px;
padding-left: 20px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #357EBB;
margin-bottom: 40px;
font-family: 'Noto Sans JP', sans-serif;
}
.waku-red{
clear: both;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 1px;
padding-left: 20px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #E17B80;
margin-bottom: 40px;
font-family: 'Noto Sans JP', sans-serif;
color: #FFFFFF;
}
.waku-red .list li:before{
color: #FFEF03;
}
.label-box1{
position: relative;
border: solid 3px #FEC92D;
margin-top: 70px!important;
margin-bottom: 40px;
margin-left: 0;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.label-box1 .lb1-title{
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #FEC92D;
color: #000000;
font-weight: bold;
border-radius: 5px 5px 0 0;
font-family: 'Noto Sans JP', sans-serif;
margin-bottom: 0px!important;
padding-top: 0;
padding-right: 9px;
padding-bottom: 0;
padding-left: 9px;
}
.label-box2{
position: relative;
border: solid 3px #357EBB;
margin-top: 70px!important;
margin-bottom: 40px;
margin-left: 0;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.label-box2 .lb2-title{
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #357EBB;
color: #FFFFFF;
font-weight: bold;
border-radius: 5px 5px 0 0;
font-family: 'Noto Sans JP', sans-serif;
margin-bottom: 0px!important;
padding-top: 0;
padding-right: 9px;
padding-bottom: 0;
padding-left: 9px;
}
.label-box2 .list{
color: #FF556F;
}
.label-box2 .list li:before {
color: #357EBB; /*アイコン色*/
}
.label-box1 p , .label-box2 p {
margin: 0;
}
.waku .list ,.waku-orange .list , .waku-red .list , .waku-blue .list , .label-box1 .list , .label-box2 .list {
padding-right: 0px!important;
}
.notice-box{
background-color: #F2F2F2;
padding-bottom: 10px;
margin-bottom: 40px;
}
.notice-title {
background: #0080AA;
text-align: center;
color: #FFF;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
font-size: 18px;
margin-bottom: 20px!important;
padding-top: 5px;
padding-bottom: 5px;
}
.notice-box p {
padding-right: 10px;
padding-left: 10px;
}
/*カテゴリーページ
---------------------------------------------------------------------------*/
.list_category{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.cate_item{
width: 46%;
margin-bottom: 40px;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #D9D9D9;
}
.cate_item img{
margin-bottom: 5px;
height: 150px;
width: 400px;
object-fit: contain;
}
.cate_item a{
color: #000000;
text-decoration: none;
display: block;
}
.cate_item p{
font-size: 14px;
font-weight: bold;
margin-bottom: 5px!important;
line-height: 1.4em;
}
.cateitem_name{
font-size: 10px!important;
text-align: right;
}
/*
パンくずリスト
-----------------------------------------*/
#breadcrumb{
clear: both;
font-size: 12px;
font-weight: normal;
text-align: left!important;
overflow-x: scroll;
clear: both;
height:auto;
width: 100%;
z-index: 20;
padding-right: 10px;
padding-left: 10px;
}
#breadcrumb::-webkit-scrollbar{height:4px;}/*バーの太さ*/
#breadcrumb::-webkit-scrollbar-thumb{background:#888888;}/*バーの色*/
#breadcrumb li {
display: inline;
white-space: nowrap;
font-weight: bold;/*太字*/
color:rgba(0, 0, 0, 0.54);
}
#breadcrumb li + li:before {
content: " > ";
}
#breadcrumb a{
padding-top: 5px;
padding-bottom: 5px;
display: inline-block;
text-decoration: none;
}
#breadcrumb li:first-child a:before{/*家アイコン*/
font-family: "Font Awesome 5 Free";
content: '\f015'; //家アイコン
font-weight: normal;
color:rgba(0, 0, 0, 0.54);
}
#breadcrumb li a{
color:rgba(0, 0, 0, 0.54);
}
#breadcrumb li a:hover {
text-decoration: underline;
}
/*
header
-----------------------------------------*/
header {
color: #FEEA89;
background-color: #000000;
font-size: 11px!important;
text-align: center;
padding-top: 3px;
padding-bottom: 10px;
}
header h1 {
font-weight: normal!important;
}
.logo img {
width: 275px;
}
/*
検索フォーム
-----------------------------------------*/
.form{
padding-bottom: 40px;
}
.f-midashi{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
margin-bottom: 10px!important;
}
textarea,
input[type="number"],
input[type="text"] ,input[type="email"]{
width: 96%;
border: 1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 2%;
padding-left: 2%;
}
textarea {
height: 100px; /* お好みの高さに */
}
/* フォーカス時の色変更 */
textarea:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="text"]:focus {
border: 1px solid #333;
}
.form-select {
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 30px;
}
.form-select::after {
position: absolute;
display: block;
content: '';
width: 0;
height: 0;
/* ここで下向き矢印指定 今回はCSSで */
border-top: 6px solid transparent;
border-left: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #333;
top: 53%;
right: 10px;
margin-top: -3px;
pointer-events: none;/* クリック出来るよう */
}
.form-select select {
width: 100%;
height: 35px;
padding: 0 10px;
border: none;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
overflow: hidden;
display: block;
border: 1px solid #ccc;
cursor: pointer;
font-size: 16px;
}
/* ie9対策 */
.form-select select:not(:target) {
width: 120% \9;
}
/* チェックボックス・ラジオボックス */
.form-checkbox label , .form-radio label {
display: inline-block;
cursor: pointer;
font-size: 16px;
line-height: 40px;
margin-right: 10px;
}
input[type=checkbox],input[type=radio] {
width: 16px;
height: 15px;
margin-right: 5px;
line-height: 30px;
}
.form-checkbox ,.form-radio , .form-line {
padding-bottom: 20px;
}
.feas-submit-button , .wpcf7-submit{
-webkit-border-radius: 4px!important;
-moz-border-radius: 4px!important;
-ms-border-radius: 4px!important;
border-radius: 4px!important;
width: 40%;
height: 44px;
display: block;
color: #fff;
text-align: center;
border: 1px solid #111;
cursor: pointer;
background-color: #000000!important;
padding-right: 0px!important;
padding-left: 0px!important;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
font-size: 16px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
-webkit-tap-highlight-color: transparent;
transition: .3s ease-out;/*変化を緩やかに*/
margin-top: 10px!important;
}
.feas-submit-button:hover , .wpcf7-submit:hover {
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*浮き上がるように*/
background-color: #454545!important;
}
/*
問い合わせフォーム
-----------------------------------------*/
.wpcf7 p label{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
line-height: 1.6em!important;
}
.wpcf7-form-control-wrap{
padding-top: 5px;
display: block;
}
.site-header{
background: #fff;
width: 100%;
padding-top: 5px;
padding-bottom: 10px;
}
/* 検索BOX */
#search{
width: 100%;
text-align: center;
margin-top: 10px;
}
.screen-reader-text{
display: none;
}
#s{
height: 30px;
border: 3px dotted #000000;
width: 80%;
}
#searchsubmit{
background-color: #000000;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
height: 37px;
width: 43px;
color: #FFFFFF;
border-radius: 3px;
cursor:pointer;
font-family: 'Kosugi Maru', sans-serif;
}
/*
コンテンツ
-----------------------------------------*/
.container{
width: 100%;
clear: both;
}
.kaso-container, .lp-container{
width: 100%;
clear: both;
margin-top:0px!important;
}
.box {
background-color: #FFFFFF;
padding-right: 10px;
padding-left: 10px;
margin-bottom: 40px;
padding-top: 40px;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
padding-bottom: 1px;
}
.box2 {
background-color: #FFFFFF;
margin-bottom: 40px;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
}
.box-b{
background-color: #FFFFFF;
padding-right: 10px;
padding-left: 10px;
margin-bottom: 40px;
padding-top: 40px;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
padding-bottom: 40px;
}
.box p,.box2 p ,.box-b p{
margin-bottom: 40px;
}
.box:after,.box2:after,.box-b:after{
display: block;
clear: both;
content:"";
}
.box h2 , .box-b h2{
font-size: 26px;
font-weight: 900;
margin-bottom: 40px;
line-height: 1.7em;
letter-spacing: 0.1em;
color: #FEEA89;
font-family: 'Noto Sans JP', sans-serif;
clear: both;
background-color: #000000;
border-bottom-width: 3px;
border-bottom-style: double;
border-bottom-color: #FEEA89;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
}
.box h3{
font-size: 23px;
font-weight: 400;
margin-bottom: 40px;
padding-top: 15px;
padding-bottom: 15px;
line-height: 1.4em;
letter-spacing: 2px;
color: #000000;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
clear: both;
background-color: #FEEA89;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #FFAD0A;
padding-right: 20px;
padding-left: 20px;
}
.box h4{
font-size: 18px;
font-weight: bold;
margin-bottom: 30px;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 1.4em;
letter-spacing: 0.1em;
color: #000000;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #FFAD0A;
font-family: 'Noto Sans JP', sans-serif;
}
.inbox{
margin-bottom: 40px;
}
.inbox h3{
font-size: 23px;
font-weight: 400;
margin-bottom: 40px;
padding-top: 15px;
padding-bottom: 15px;
line-height: 1.4em;
letter-spacing: 2px;
color: #000000;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
clear: both;
background-color: #F2F2F2;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #0080AA;
padding-right: 20px;
padding-left: 20px;
}
.box-title{
font-size: 23px;
font-weight: 400;
line-height: 1.4em;
letter-spacing: 2px;
color: #FFFFFF;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
clear: both;
background-color: #0093C7;
margin-bottom: 0px!important;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-align: center;
}
.newmenu li{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.newmenu a{
display: block;
color:rgba(0, 0, 0, 0.54);
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D9D9D9;
height: 120px;
}
.newmenu a:last-child{
border-bottom-style: none;
}
.newmenu a:hover{
color:rgba(0, 0, 0, 0.38)!important;
background-color: #FFFFFF;
opacity: 0.5;
}
.newmenu span{
font-weight: bold;
display: block;
}
.newmenu p{
color:rgba(0, 0, 0, 0.54);
font-weight: bold;
font-size: 12px;
text-align: right;
line-height: 1.6em;
margin-bottom: 0px;
}
.newmenu img{
width: 100px;
float: left;
margin-right: 10px;
border: 1px solid #D9D9D9;
}
/*
side
-----------------------------------------*/
.side , .side-kaso{
margin-bottom: 40px;
}
.side-ranking , .side-menu{
background-color: #FFFFFF;
margin-bottom: 40px;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
}
.side-ranking a:hover{
color:rgba(0, 0, 0, 0.38)!important;
background-color: #FFFFFF;
opacity: 0.5;
}
.side_recommended img {
width: 100px;
float: left;
margin-right: 10px;
}
.side_recommended {
position: relative;
}
.side_recommended li{
padding-top: 35px;
font-size: 16px;
font-weight: bold;
padding-left: 150px;
}
.rank-kin:before , .rank-gin:before , .rank-dou:before , .rank-etc:before{/*王冠アイコン*/
font-family: "Font Awesome 5 Free";
content: '\f521';
//王冠アイコン
font-weight: normal;
position: absolute;
left: 130px;
}
.rank-kin:before{
color: #F2C153;
}
.rank-gin:before{
color: #ABB6BE;
}
.rank-dou:before{
color: #E39C69;
}
.rank-etc:before{
color: #BB9E7B;
}
.side_recommended a{
display: block;
color:rgba(0, 0, 0, 0.54);
text-decoration: none;
height: 100px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D9D9D9;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
}
.sidemidashi{
font-size: 23px;
font-weight: 900;
line-height: 1.4em;
letter-spacing: 2px;
color: #FEEA89;
font-family: 'Noto Sans JP', sans-serif;
clear: both;
background-color: #000000;
text-align: center;
margin-bottom: 0px!important;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.side-ranking p a{
display: block;
color:rgba(0, 0, 0, 0.54);
text-decoration: none;
text-align: center;
font-size: 20px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
}
.side-menu a {
display: block;
color:rgba(0, 0, 0, 0.54);
text-decoration: none;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 25px;
}
.side-menu a:hover{
color: #FFFFFF;
background-color: rgba(0, 0, 0, 0.38);
}
.side-menu ul {
padding: 0;
position: relative;
}
.side-menu ul li {
line-height: 1.5;
list-style-type: none!important;
font-weight: bold; /*好みで太字に*/
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #D9D9D9;
}
.side-menu ul li:last-child {
border-bottom-style: none;
}
.side-menu ul li a:before {
font-family: "Font Awesome 5 Free";
content: "\f0da";
font-weight: 900;
position: absolute;
left : 10px; /*左端からのアイコンまでの距離*/
color:rgba(0, 0, 0, 0.54); /*アイコン色*/
}
/*
footer
-----------------------------------------*/
footer{
background-color: #000000;
clear: both;
padding-bottom: 2px;
padding-top: 40px;
margin-top: 40px;
padding-right: 10px;
padding-left: 10px;
color: #FEEA89;
}
.f-menu p{
margin-bottom: 30px;
clear: both;
font-size: 18px!important;
margin-right: 10px;
margin-left: 10px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
}
.footmenu01 , .footmenu02{
margin-bottom: 40px;
}
.footmenu01 li a ,.footmenu02 li a {
display: block;
line-height: 1.5em;
color: #000000;
text-decoration: none;
font-weight: normal;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 35px;
}
.footmenu01 li {
width:100%;
background-color: #FEEA89;
margin-bottom: 2px;
position: relative;
}
.footmenu01 li:before {
font-family: "Font Awesome 5 Free";
content: "\f1ad";
font-weight: 900;
position: absolute;
left : 10px; /*左端からのアイコンまでの距離*/
color:#000000; /*アイコン色*/
padding-top: 14px;
line-height: 1.5em;
}
.footmenu01 li:last-child {
margin-bottom: 0px;
}
.footmenu02 ul{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
align-items: stretch;
}
.footmenu02 li {
width:49.7%;
background-color: #FEEA89;
margin-bottom: 2px;
margin-right: 2px;
position: relative;
}
.footmenu02 li:before {
font-family: "Font Awesome 5 Free";
content: "\f192";
font-weight: 900;
position: absolute;
left : 10px; /*左端からのアイコンまでの距離*/
color:#000000; /*アイコン色*/
padding-top: 14px;
line-height: 1.5em;
}
.footmenu02 li:nth-child(even) {
margin-right: 0px;
}
.foot_navi{
text-align: center;
margin-top: 60px;
}
.foot_navi li{
border-top: none;
font-size: 12px;
display: inline;
padding: 0 10px 0 10px;
}
.foot_navi li +li{
border-left: 1px solid #FEEA89; /* ここがボーダー線指定しているところ */
margin: 0 10px 0 10px; /* メニューとボーダー線の間の距離感 */
}
.foot_navi li:last-child{
border-bottom-style: none;
}
.foot_navi li a{
line-height: 1.6em;
display: inline-block;
height: auto;
padding-right: 0px;
padding-left: 0px;
text-decoration: underline;
color: #FEEA89;
padding-top: 10px;
padding-bottom: 10px;
}
.foot_navi li a:hover{
text-decoration: none;
}
.copy{
font-size: 11px;
text-align: center;
display: block;
color: #FEEA89;
}
/*
ボタン
-----------------------------------------*/
.linkbox{
border: 2px solid #D9D9D9;
padding-right: 10px;
margin-bottom: 40px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.linkbox a {
display: block!important;
text-decoration: none!important;
color: #000000;
}
.linkbox_midashi{
margin-bottom: 10px!important;
font-size: 18px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
line-height: 1.4em;
}
.linkbox_txt{
line-height: 1.6em;
color: #000000;
font-size: 14px;
margin-bottom: 10px!important;
font-weight: normal;
}
.linkbox img{
float: left;
width: 30%!important;
-webkit-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
margin-right: 10px;
}
.linkbox_buttom{
margin-bottom: 0px!important;
background-color: #7cc576;
display: block;
color: #FFFFFF;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
padding-right: 10px;
-webkit-border-radius: 5px;
border-radius: 5px;
float: right;
text-align: right;
font-size: 14px;
}
.linkbox a:hover .linkbox_buttom{
background-color: #A8D9A4;
}
.linkbox:after{
display: block;
clear: both;
content:"";
}
/* リンクなしボタン */
.nolink {
text-align: center;
clear: both;
font-weight: 900;
font-size: 18px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #D1D1D1;
padding-right: 0px!important;
padding-left: 0px!important;
font-family: 'Noto Sans JP', sans-serif;
color: #DFDFDF;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 10px;
line-height: 1.4em;
display: block;
}
/* 赤ボタン */
.order_red {
text-align: center;
clear: both;
font-weight: 900;
font-size: 18px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #FFFFFF;
width: 100%;
padding-right: 0px!important;
padding-left: 0px!important;
font-family: 'Noto Sans JP', sans-serif;
}
.order_red a{
text-decoration: none;
border-radius:10px;
text-align: center;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 10px;
display: block;
line-height: 1.4em;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #FFFFFF;
text-decoration: none;
}
.o_color_red a {
background:#FF062C;
color: #FFFFFF;
}
.o_color_red a:hover {
background-color: #DC1625;
}
/* 緑色ボタン */
.order_midori {
text-align: center;
clear: both;
font-weight: 900;
font-size: 18px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #FFFFFF;
width: 100%;
padding-right: 0px!important;
padding-left: 0px!important;
font-family: 'Noto Sans JP', sans-serif;
}
.order_midori a{
text-decoration: none;
border-radius:10px;
text-align: center;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 10px;
display: block;
line-height: 1.4em;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #FFFFFF;
text-decoration: none;
}
.o_color_midori a {
background:#29BA96;
color: #FFFFFF;
}
.o_color_midori a:hover {
background-color: #208E73;
}
.raised{
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
-webkit-tap-highlight-color: transparent;
transition: .3s ease-out;/*変化を緩やかに*/
}
.raised:hover{
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*浮き上がるように*/
}
.b-txtwaku {
margin-bottom: 40px;
}
.b-txtwaku p{
margin-top: 0px;
margin-bottom: 0px;
}
.b-txt{
font-size: 14px;
text-align: center;
font-weight: bold;
font-family: 'Noto Sans JP', sans-serif;
color: #FF556F;
}
/*
テーブル
-----------------------------------------*/
table {
margin-bottom: 40px;
width: 100%;
border-top-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-left-color: #000000;
}
table th {
font-weight: bold;
text-align: center;
vertical-align: middle;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #000000;
background-color: #FEEA89;
color: #000000;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
table th a{
color: #FEDC01
}
table td {
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
vertical-align: top;
background-color: #FFFFFF;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #000000;
vertical-align: middle;
color: #000000;
}
table p{
margin-bottom: 10px!important;
}
.table10{width: 10%;}
.table15{width: 15%;}
.table20{width: 20%;}
.table22{width: 22%;}
.table25{width: 25%;}
.table26{width: 26%;}
.table30{width: 30%;}
.table35{width: 35%;}
.table40{width: 40%;}
.table50{width: 50%;}
.table60{width: 60%;}
.table70{width: 70%;}
.table80{width: 80%;}
.table90{width: 90%;}
.table100{width: 100%;}
.tbl-r01 th,
.tbl-r01 td {
display: block;
}
/*
https://b-risk.jp/blog/2018/07/table-css/
*/
@media screen and (max-width: 640px) {
}
.table_dl {
padding-right: 5px;
padding-left: 5px;
}
.table_dl dt{
font-weight: bold;
padding-top: 10px;
}
.table-sc {
margin-bottom: 0px;
}
div.scroll_div {
overflow: auto;
margin-bottom: 0px;
max-height: 500px;
}
.scroll_div::-webkit-scrollbar {
height: 10px;
background:#ccc;
width:10px;
}
.scroll_div::-webkit-scrollbar-thumb{
background: #999;
border-radius: 2px;
}
.scroll_div::-webkit-scrollbar-track-piece {
background: #efefef;
}
.fixedWidth90{width: 90px;}
.fixedWidth100{width: 100px;}
.fixedWidth150{width: 150px;}
.fixedWidth200{width: 200px;}
.fixedWidth250{width: 250px;}
.pc-table25{width: initial;}
/*横にスライドさせるアイコン*/
.animation{
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1.5s;
}
.keyframe{
animation-name: anim_h;
}
@keyframes anim_h {
0% {
transform: translate(0px, 0);
}
50% {
transform: translate(20px, 0);
}
100% {
transform: translate(20px, 10px);
}
}
@media screen and (max-width: 480px){
.scroll{ display: block;
overflow: auto; /*tableをスクロールさせる*/
-webkit-overflow-scrolling: touch;
}
.scroll th,.scroll td
{
white-space: nowrap;
}
}
/*--------------------------------
SNS
---------------------------------*/
.sns, .sns-contents{
text-align:center;
margin-bottom: 0px;
padding-right: 10px;
margin-top: 0px;
padding-left: 10px;
}
.sns ul , .sns-contents ul{
list-style:none;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}
.sns li , .sns-contents li{
width:48%;
margin-bottom: 10px;
font-weight: bold;
}
.sns li a , .sns-contents li a{
font-size:80%;
display:block;
padding:10px;
color:#fff;
border-radius:6px;
text-align:center;
text-decoration: none;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
-webkit-tap-highlight-color: transparent;
transition: .3s ease-out;/*変化を緩やかに*/
}
.sns li a:hover , .sns-contents li a:hover {
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*浮き上がるように*/
}
/* ツイッター */
.sns .twitter a , .sns-contents .twitter a {
background:#00acee;
}
.sns .twitter a:hover , .sns-contents .twitter a:hover {
background:#0092ca;
}
/* Facebook */
.sns .facebook a , .sns-contents .facebook a {
background:#3b5998;
}
.sns .facebook a:hover , .sns-contents .facebook a:hover {
background:#2c4373;
}
/* はてぶ */
.sns .hatebu a , .sns-contents .hatebu a {
background:#5d8ac1;
}
.sns .hatebu a:hover , .sns-contents .hatebu a:hover {
background:#43638b;
}
/* LINE */
.sns .line a , .sns-contents .line a {
background:#25af00;
}
.sns .line a:hover , .sns-contents .line a:hover {
background:#219900;
}
/* Pocket */
.sns .pocket a , .sns-contents .pocket a {
background:#f03e51;
}
.sns .pocket a:hover , .sns-contents .pocket a:hover {
background:#c0392b;
}
/* Feedly */
.sns .feedly a , .sns-contents .feedly a {
background:#87c040;
}
.sns .feedly a:hover , .sns-contents .feedly a:hover {
background:#74a436;
}
section h2.ichiranmidashi{
font-size: 22px;
font-weight: normal;
margin-bottom: 20px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 1.4em;
letter-spacing: 2px;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #DD3333;
color: #3C3C3C;
font-family: "Sawarabi Gothic";
background-color: initial;
margin-top: initial;
padding-right: initial;
padding-left: initial;
}
h2.ichiranmidashi a {
color: #3C3C3C;
text-decoration: none;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
h2.ichiranmidashi a:hover {
background: linear-gradient(transparent 60%, #DD3333 60%);
}
.thumb{
margin-bottom: 10px;
text-align: center;
}
.thumb img{
width: 250px;
}
.sentence{
font-size: 12px;
}
.more{
clear: both;
margin-top: 20px;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.more a{
background-color: #22A8F0;
display: block;
height: 50px;
width: 200px;
line-height: 50px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
font-size: 16px;
border-radius: 3px;
margin-right: auto;
margin-left: auto;
}
.more a:hover{
background-color: #000000;
}
/*記事情報*/
.postinfo{
font-size: 12px;
text-align: center;
margin-bottom: 30px;
margin-top: 60px;
}
.postinfo li{
display: inline;
}
.postinfo li a{
padding-top: 5px;
padding-bottom: 5px;
}
.postinfo li + li:before {
content: " ｜ ";
}
/*リスト*/
.weeklist {
display: flex;
justify-content:space-around;
flex-wrap: wrap;
}
.weeklist li a{
display: inline-block;
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
margin-right: 3px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
margin-bottom: 20px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.weeklist li a:hover{
background-color: #999999;
}
.checklist {
border: solid 2px #38BAAE;
position: relative;
margin-top: 40px;
margin-bottom: 20px;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 2.3em;
text-align: left;
}
.checklist li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;
font-weight: bold;
font-family: 'Kosugi Maru', sans-serif;
}
.checklist li:before {/*リストのアイコン*/
font-family: "Font Awesome 5 Free"!important;
content: "\f00c"!important;
position: absolute;
left : 1em; /*左端からのアイコンまでの距離*/
color: #38BAAE;/*アイコン色*/
}
.checklist li:after {/*タブ*/
background: #38BAAE;
color: #FEDC01;
font-family: "Font Awesome 5 Free",'Kosugi Maru', sans-serif;
position: absolute;
left: -2px;
bottom: 100%;
padding: 1px 7px;
content: '\f0a7 おすすめな人';/*アイコンコード＋文字*/
letter-spacing: 0.05em;/*字間*/
}
.point-list {
border: solid 2px #F05055;
position: relative;
margin-top: 40px;
margin-bottom: 20px;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 2.3em;
text-align: left;
}
.point-list li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;
font-weight: bold;
font-family: 'Kosugi Maru', sans-serif;
}
.point-list li:before {/*リストのアイコン*/
font-family: "Font Awesome 5 Free"!important;
content: "\f00c"!important;
position: absolute;
left : 1em; /*左端からのアイコンまでの距離*/
color: #F05055;/*アイコン色*/
}
.point-list li:after {/*タブ*/
background: #F05055;
color: #FEDC01;
font-family: "Font Awesome 5 Free",'Kosugi Maru', sans-serif;
position: absolute;
left: -2px;
bottom: 100%;
padding: 1px 7px;
content: '\f0a7 主な特徴';/*アイコンコード＋文字*/
letter-spacing: 0.05em;/*字間*/
}
.haishinlist {
border: solid 2px #38BAAE;
position: relative;
margin-top: 40px;
margin-bottom: 20px;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 2.3em;
text-align: left;
}
.haishinlist li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;
font-weight: bold;
font-family: 'Kosugi Maru', sans-serif;
}
.haishinlist li:before {/*リストのアイコン*/
font-family: "Font Awesome 5 Free"!important;
content: "\f00c"!important;
position: absolute;
left : 1em; /*左端からのアイコンまでの距離*/
color: #38BAAE;/*アイコン色*/
}
.haishinlist li:after {/*タブ*/
background: #38BAAE;
color: #FEDC01;
font-family: "Font Awesome 5 Free",'Kosugi Maru', sans-serif;
position: absolute;
left: -2px;
bottom: 100%;
padding: 1px 7px;
content: '\f0a7 配信中';/*アイコンコード＋文字*/
letter-spacing: 0.05em;/*字間*/
}
.mihoudailist {
border: solid 2px #38BAAE;
position: relative;
margin-top: 40px;
margin-bottom: 20px;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 2.3em;
text-align: left;
}
.mihoudailist li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;
font-weight: bold;
font-family: 'Kosugi Maru', sans-serif;
}
.mihoudailist li:before {/*リストのアイコン*/
font-family: "Font Awesome 5 Free"!important;
content: "\f00c"!important;
position: absolute;
left : 1em; /*左端からのアイコンまでの距離*/
color: #38BAAE;/*アイコン色*/
}
.mihoudailist li:after {/*タブ*/
background: #38BAAE;
color: #FEDC01;
font-family: "Font Awesome 5 Free",'Kosugi Maru', sans-serif;
position: absolute;
left: -2px;
bottom: 100%;
padding: 1px 7px;
content: '\f0a7 見放題';/*アイコンコード＋文字*/
letter-spacing: 0.05em;/*字間*/
}
.stay{
padding: 0.5em 0.5em 0.5em 30px;
line-height: 1.5em;
display: block;
color: #CCCCCC;
text-decoration: none;
}
.pagelink {
position: relative;
border: solid 3px #000000;
background: #FFFFFF;
-webkit-border-radius: 0px 3px 3px 3px;
border-radius: 0px 3px 3px 3px;
margin-bottom: 30px;
margin-top: 60px;
}
.pagelink p {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 16px;
background: #000000;
color: #FFFFFF;
font-weight: bold;
border-radius: 5px 5px 0 0;
font-weight: bold;
}
.pagelink ul {
padding: 0.3em 0.8em;
}
.pagelink ul li {
border-bottom: dashed 1px #000000;
position: relative;
}
.pagelink ul li a{
padding: 0.5em 0.5em 0.5em 30px;
line-height: 1.5em;
display: block;
color: #000000;
text-decoration: none;
}
.pagelink ul li a:hover{
background-color: #FFCC17;
color: #000000;
}
.pagelink ul li:before {/*疑似要素*/
font-family: "Font Awesome 5 Free";
content: "\f00c";/*リストアイコン*/
position: absolute;
left : 0em;/*左端からのアイコンまでの距離*/
color: #000000;/*アイコン色*/
/*以下 上下中央寄せのため*/
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: bold;
}
.pagelink ul li:last-of-type{
border-bottom: none; /*最後のliの線だけ消す*/
}
.pagelink ol {
padding: 0.3em 0.8em;
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
}
.pagelink ol li {
border-bottom: dashed 1px #000000;
position: relative;
font-size: 14px;
}
.pagelink ol li a{
padding: 0.5em 0.5em 0.5em 30px;
line-height: 1.5em;
display: block;
color: #000000;
text-decoration: none;
}
.pagelink ol li a:hover{
background-color: #FFCC17;
color: #000000;
}
.pagelink ol li:before {/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*数字のデザイン変える*/
display:inline-block;
background: #000000;
color: white;
font-weight:bold;
font-size: 14px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align:center;
top:7px;
}
.pagelink ol li:last-of-type{
border-bottom: none; /*最後のliの線だけ消す*/
}
.data-list{
margin-top: 20px;
margin-bottom: 30px;
position:relative;
background-color: #FFFFFF;
clear: both;
}
.data-list:after{
display: block;
clear: both;
content:"";
}
.data-list dt{
font-weight: bold;
margin-bottom: 10px;
padding-left: 2em;
padding-right: 2em;
clear: both;
font-family: 'Kosugi Maru', sans-serif;
}
.data-list dt:before {/*リストのアイコン*/
font-family: "Font Awesome 5 Free";
content: "\f02e";
position: absolute;
left : 1em; /*左端からのアイコンまでの距離*/
color: #FFCC17;/*アイコン色*/
}
.data-list dd{
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #000000;
margin-bottom: 20px;
color: #DD3333;
padding-right: 15px;
padding-left: 15px;
font-family: 'Kosugi Maru', sans-serif;
padding-bottom: 10px;
}
.data-list dd:after{
display: block;
clear: both;
content:"";
}
.data-list dd:last-of-type{
border-bottom-style: none;
}
.data-list li{
float: left;
margin-bottom: 5px;
}
.line-list {
clear: both;
}
.line-list li + li:before {
content: " | ";
}
.data-list li a{
display: inline-block;
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
margin-right: 3px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
margin-bottom: 5px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.data-list li a:hover{
background-color: #999999;
}
.d-crown{
padding-top: 40px;
padding-bottom: 0.5em;
margin-top: 40px;
margin-bottom: 30px;
position:relative;
background-color: #FFFFFF;
padding-right: 5px;
padding-left: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
clear: both;
-webkit-box-shadow: 0px 0px 3px #CCCCCC;
-ms-box-shadow: 0px 0px 3px #CCCCCC;
box-shadow: 0px 0px 3px #CCCCCC;
}
.d-crown:after{
display: block;
clear: both;
content:"";
}
.d-crown dt{
color: #000000;
font-weight: bold;
font-size: 20px;
margin-bottom: 15px;
padding-left: 2.5em;
padding-right: 2.5em;
clear: both;
}
.d-kin:before {/*リストのアイコン*/
font-family: "Font Awesome 5 Free";
content: "\f521";
position: absolute;
left : 1em; /*左端からのアイコンまでの距離*/
color: #F2C153;/*アイコン色*/
}
.d-gin:before {/*リストのアイコン*/
font-family: "Font Awesome 5 Free";
content: "\f521";
position: absolute;
left : 1em; /*左端からのアイコンまでの距離*/
color: #7A6E70;/*アイコン色*/
}
.d-dou:before {/*リストのアイコン*/
font-family: "Font Awesome 5 Free";
content: "\f521";
position: absolute;
left : 1em; /*左端からのアイコンまでの距離*/
color: #B37B04;/*アイコン色*/
}
.d-etc:before {/*リストのアイコン*/
font-family: "Font Awesome 5 Free";
content: "\f521";
position: absolute;
left : 1em; /*左端からのアイコンまでの距離*/
color: #333333;/*アイコン色*/
}
.d-crown dd{
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #000000;
margin-bottom: 40px;
color: #DD3333;
}
.d-crown dd:after{
display: block;
clear: both;
content:"";
}
.d-crown dd:last-of-type{
border-bottom-style: none;
}
/*ページナビ*/
.wp-pagenavi {
position:relative;/*--移動拠点（A）--*/
text-align:center;
font-size: 0px;/*--文字の大きさを、いったん0pxに--*/
color: #FFFFFF;/*--文字色は背景色と同色--*/
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;
padding-top: 10px;
}
.wp-pagenavi a {
color: #DD3333;
text-decoration: none;
background-color: #FFFFFF;
}
.wp-pagenavi a,.wp-pagenavi .current{/*--各種リンクと、現在開いているページ--*/
font-size:12px;/*--枠線と数字との余白--*/
border: 1px solid #DD3333;/*--枠線の太さ・種類・色--*/
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 2px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
.wp-pagenavi .current{/*--現在開いているページ--*/
font-weight:normal;/*--規定の太字だと、文字の大きさと枠線で囲った大きさが変わります--*/
background-color:#FFFF00;
color: #000000;
}
.wp-pagenavi a,.wp-pagenavi .current{/margin: 1px;}/*--IE6、IE7用CSSハック。IE8にも効果あり--*/
/*--ロールオーバーしない場合は不要--*/
.wp-pagenavi a:hover{
background-color:#22A8F0;
color:#FFFFFF;
}
/*
画像系
-----------------------------------------*/
.bnr{
text-align: center;
clear: both;
margin-bottom: 40px;
font-size: 12px;
}
.bnr img{
margin-bottom: 5px;
}
.imgline2 img{
border: 2px solid #D9D9D9;
}
.imgline2-black img{
border: 2px solid #000000;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 30px;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.photo{
text-align: center;
margin-bottom: 30px;
}
.photo li{
margin-bottom: 10px;
}
.photo-left{
text-align: center;
margin-bottom: 30px;
float: left;
width: 49%;
font-size: 12px;
margin-right: 5px;
}
.photo-left img{
margin-bottom: 5px;
}
.photo-left li{
margin-bottom: 10px;
}
.photo-left:after{
display: block;
clear: both;
content:"";
}
.photo-right{
text-align: center;
margin-bottom: 30px;
float: right;
width: 49%;
font-size: 12px;
}
.photo-right img{
margin-bottom: 5px;
}
.photo-right li{
margin-bottom: 10px;
}
.photo-right:after{
display: block;
clear: both;
content:"";
}
.i250{width: 250px;}
.i100{width: 100px;}
.imgfit img{object-fit: contain;}
.img-h150 img{
max-height: 150px;
width: auto;
}
.img-h50p80 img{
max-height: 50px;
width: auto;
}
.img-w120p200 img{
max-height: 250px;
max-width: 120px;
}
.img-wh65 img{
max-height: 65px;
max-width: 65px;
}
.imgl{
margin-bottom: 5px;
float: left;
padding-right: 7px;
}
.pcimgl{
margin-bottom: 20px;
padding-right: 0x;
text-align: center;
}
.imgr{
margin-bottom: 5px;
float: right;
padding-left: 7px;
}
.aligncenter{
margin-right: auto;
margin-left: auto;
display: block;
margin-bottom: 20px;
max-width: 100%;
height: auto;
}
.alignleft{
clear: both;
margin-right: auto;
margin-left: auto;
display: block;
margin-bottom: 20px;
max-width: 100%;
height: auto;
}
.alignright{
clear: both;
margin-right: auto;
margin-left: auto;
display: block;
margin-bottom: 20px;
max-width: 100%;
height: auto;
}
.wp-caption{
font-size: 12px;
text-align: center;
padding-top: 5px;
max-width: 100%;
}
.wp-caption img{
height: auto;
max-width: 100%;
}
.wp-caption-text{
padding-top: 5px;
font-size: 10px;
}
/*
ブログランキング
-----------------------------------------*/
.blog_rank{
list-style: none;
}
.blog_rank li{
margin-right: 5px;
padding-bottom: 10px;
float: left;
}
.blog_rank:after{
display: block;
clear: both;
content:"";
}
/*リンク
---------------------------------------------------------------------------*/
/*
関連記事
-----------------------------------------*/
.kanren-text {
position: relative;
border: solid 3px #888888;
background: #F0F0F0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
-webkit-border-radius: 0px 3px 3px 3px;
border-radius: 0px 3px 3px 3px;
margin-bottom: 30px;
margin-top: 60px;
}
.kanren-text p {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #888888;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
font-weight: bold;
font-family: 'Noto Sans JP', sans-serif;
}
.kanren-text ul {
padding: 0.3em 0.8em;
}
.kanren-text ul li {
border-bottom: dashed 1px #888888;
position: relative;
font-weight: bold;
}
.kanren-text ul li a{
padding: 0.5em 0.5em 0.5em 30px;
line-height: 1.5em;
display: block;
color: #000000;
text-decoration: none;
}
.kanren-text ul li a:hover{
background-color: #B7B7B7;
color: #FFFFFF;
}
.kanren-text ul li:before {/*疑似要素*/
font-family: "Font Awesome 5 Free";
content: "\f0da";/*アイコンの種類*/
position: absolute;
left : 0em;/*左端からのアイコンまでの距離*/
color: #888888;/*アイコン色*/
/*以下 上下中央寄せのため*/
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.kanren-text ul li:last-of-type{
border-bottom: none; /*最後のliの線だけ消す*/
}
.in_link a{
border: 3px solid #1393A9;
display: block;
font-size: 18px;
color: #1393A9;
text-decoration: none;
background-color: #FFFFFF;
font-weight: lighter;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;
}
.in_link {
width: 95%;
}
.buttom{
clear: both;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-top: 30px;
margin-bottom: 50px;
}
.buttom a {
position: relative;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.buttom a{
text-decoration: none;
font-weight: bold;
color: #1393A9;
}
.buttom a:hover{
color: #FFFFFF;
background-color: #1393A9;
}
.buttom a:before { /*白いひし型 */
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 10px;
width: 15px;
height: 15px;
margin-top: -7px;
background: #1393A9;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.buttom a:after { /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 14px;
width: 15px;
height: 15px;
margin-top: -7px;
background: #FFFFFF;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.buttom a:hover:before {
background: #FFFFFF;
}
.buttom a:hover:after { /*「after要素」のマウスオーバー（カラーを合わせる） */
background: #1393A9;
}
.order-s {
margin-top: 20px;
margin-bottom: 50px;
text-align: center;
margin-right: 5px;
margin-left: 5px;
clear: both;
}
.order-s a{
position:relative;
font-size: 14px!important;
font-weight: bold;
text-decoration: none;
display: block;
border-radius:10px;
text-align: center;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 10px;
}
.order-s a:hover{
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
color: #FFFFFF;
}
/* 緑 */
.o_color a {
background:#7cc576;
box-shadow:0 5px 0 #46963f;
color: #FFFFFF;
text-shadow: 1px 1px 1px #46963f;
}
.o_color a:hover {
background:#46963f;
}
.o_color a:before, .o_orange a:before { /*白いひし型 */
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 10px;
width: 15px;
height: 15px;
margin-top: -7px;
background: #FFFFFF;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.o_color a:after { /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 14px;
width: 15px;
height: 15px;
margin-top: -7px;
background: #7cc576;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.o_color a:hover:before , .o_orange a:hover:before{
background: #FFFFFF;
}
.o_color a:hover:after{ /*「after要素」のマウスオーバー（カラーを合わせる） */
background: #46963f;
}
/* オレンジ */
.o_orange a {
background:#FF6600;
box-shadow:0 5px 0 #D95700;
color: #FFFFFF;
text-shadow: 1px 1px 1px #D95700;
}
.o_orange a:hover {
background:#D95700;
}
.o_orange a:after { /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 14px;
width: 15px;
height: 15px;
margin-top: -7px;
background: #FF6600;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
.o_orange a:hover:after{ /*「after要素」のマウスオーバー（カラーを合わせる） */
background: #D95700;
}
/* 濃い青色 */
.order_ao {
display: block;
width: 80%;
clear: both;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-bottom: 60px;
}
.order_ao a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
border: 1px solid #00343C;
border-radius: 2px;
background-color: #006F80;
color: #ffffff;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
font-family: 'Kosugi Maru', sans-serif;
text-shadow: 1px 1px 1px #00343C;
box-shadow:0 5px 0 #00343C;
border-radius:10px;
position:relative;
}
.order_ao a:hover{
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
color: #FFFFFF;
background:#00343C;
}
/* しろ */
.order_shiro {
display: block;
width: 80%;
clear: both;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-bottom: 0px;
}
.order_shiro a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
border: 1px solid #C6C9D3;
border-radius: 2px;
background-color: #FFFFFF;
color: #38BAAF;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
font-family: 'Kosugi Maru', sans-serif;
text-shadow: 1px 1px 1px #C6C9D3;
box-shadow:0 5px 0 #C6C9D3;
border-radius:10px;
position:relative;
}
.order_shiro a:hover{
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
color: #FFFFFF;
background:#C6C9D3;
}
/* TSUTAYA DISCAS */
.order_tsutaya {
display: block;
width: 80%;
clear: both;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-bottom: 0px;
}
.order_tsutaya a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
border: 1px solid #000F2F;
border-radius: 2px;
background-color: #012061;
color: #FBBE01;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
font-family: 'Kosugi Maru', sans-serif;
text-shadow: 1px 1px 1px #000F2F;
box-shadow:0 5px 0 #000F2F;
border-radius:10px;
position:relative;
font-weight: bold;
}
.order_tsutaya a:hover{
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
color: #FBBE01;
background:#000F2F;
}
/* AMAZON */
.order_amazon {
display: block;
width: 80%;
clear: both;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-bottom: 0px;
}
.order_amazon a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
border: 1px solid #CD7601;
border-radius: 2px;
background-color: #FEBD69;
color: #FFFFFF;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
font-family: 'Kosugi Maru', sans-serif;
text-shadow: 1px 1px 1px #CD7601;
box-shadow:0 5px 0 #CD7601;
border-radius:10px;
position:relative;
font-weight: bold;
}
.order_amazon a:hover{
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
color: #FFFFFF;
background:#CD7601;
}
/* ピンク */
.o_color_pink a {
background:#E45991;
box-shadow:0 5px 0 #CE2267;
color: #FFFFFF;
text-shadow: 1px 1px 1px #CE2267;
}
.o_color_pink a:hover {
background:#CE2267;
}
.next{
font-weight: bold;
font-size: 18px;
margin-top: 60px;
margin-bottom: 30px;
padding-left: 30px;
position:relative;
}
.next:before {/*リストのアイコン*/
font-family: "Font Awesome 5 Free";
content: "\f35d";
position: absolute;
left : 0px; /*左端からのアイコンまでの距離*/
color: #DD3333;/*アイコン色*/
}
.next_blue{
clear: both;
margin-top: 60px;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
font-family: "Sawarabi Gothic";
position:relative;
}
.next_blue a{
background-color: #22A8F0;
display: block;
width: 60%;
line-height: 1.4em;
color: #FFFFFF;
text-decoration: none;
text-align: center;
font-size: 18px;
border-radius: 3px;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
padding-bottom: 20px;
}
.next_blue a:hover{
background-color: #000000;
}
.innext{
font-weight: bold;
font-size: 18px;
padding-left: 30px;
position:relative;
margin-top: 40px;
margin-bottom: 60px;
}
.innext:before {/*リストのアイコン*/
font-family: "Font Awesome 5 Free";
content: "\f0c1";
position: absolute;
left : 0px; /*左端からのアイコンまでの距離*/
color: #DD3333;/*アイコン色*/
}
/* 光るボタン */
.order {
display: block;
width: 80%;
margin: 0 auto;
}
.order a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
border: 1px solid #FF5B6B;
border-radius: 2px;
background-color: #FF5B6B;
color: #ffffff;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
font-family: 'Kosugi Maru', sans-serif;
text-shadow: 1px 1px 1px #D92C00;
box-shadow:0 5px 0 #D92C00;
border-radius:5px;
position:relative;
}
.order a:hover{
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
color: #FFFFFF;
background:#D92C00;
}
.order a:before {
display: block;
position: absolute;
z-index: -1;
left: -30%;
top: -50%;
content: "";
width: 30px;
height: 120px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
animation: shiny 3s infinite linear;
-webkit-animation: shiny 3s infinite linear;
-moz-animation: shiny 3s infinite linear;
}
@keyframes shiny {
0% {
left: -30%;
}
20% {
left: 120%;
}
100% {
left: 120%;
}
}
@-webkit-keyframes shiny {
0% {
left: -30%;
}
20% {
left: 120%;
}
100% {
left: 120%;
}
}
@-moz-keyframes shiny {
0% {
left: -30%;
}
20% {
left: 120%;
}
100% {
left: 120%;
}
}
.syosai_buttom a{
margin-bottom: 30px!important;
background-color: #7cc576;
display: inline-block;
color: #FFFFFF;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
-webkit-border-radius: 5px;
border-radius: 5px;
float: right;
text-decoration: none;
}
.syosai_buttom a:hover{
background-color: #A8D9A4;
}
/*チェックボックス
---------------------------------------------------------------------------*/
.checkbox{
clear: both;
margin-bottom: 25px;
}
.checkbox li{
margin-bottom: 10px;
}
.checkbox-input{
display: none;
}
.checkbox-parts{
position: relative;
padding: 15px 20px 15px 53px;
transition:.3s;
color: #444;
border-radius: 8px;
border: 1px solid #ddd;
display:inline-block;
line-height:1;
}
.checkbox-input:checked + .checkbox-parts{
background: #ff555e;
color: #fff;
border: 1px solid #ff555e;
}
.checkbox-parts::before{
content: "";
display: block;
left: 9px;
width: 30px;
height: 15px;
border-radius: 15px;
border: 1px solid #aaa;
background: #fff;
position: absolute;
}
.checkbox-parts::after{
content: "";
display: block;
position: absolute;
top:17px;
left: 11px;
width: 13px;
height: 13px;
background: #aaa;
border-radius: 50%;
transition:.2s;
display: block;
}
.checkbox-input:checked + .checkbox-parts::before {
border: 1px solid #ff555e;
}
.checkbox-input:checked + .checkbox-parts::after {
left: 26px;
background: #ff555e;
}
/*
原作一覧
-----------------------------------------*/
.gensaku-haishin,.gensaku-haishin6 {
position: relative;
border: solid 3px #38BAAE;
background: #FFFFFF;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
-webkit-border-radius: 0px 3px 3px 3px;
border-radius: 0px 3px 3px 3px;
margin-bottom: 30px;
margin-top: 100px;
clear: both;
}
.gensaku-haishin p,.gensaku-haishin6 p {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #38BAAE;
color: #FEDC01;
font-weight: bold;
border-radius: 5px 5px 0 0;
font-weight: bold;
font-family: "Sawarabi Gothic";
}
.gensaku-haishin ul , .gensaku-haishin6 ul {
padding: 0.3em 0.8em;
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.gensaku-haishin ul li{
width: 23%;
text-align: center;
margin-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 3px;
margin-left: 3px;
}
.gensaku-haishin ul li img ,.gensaku-haishin ul li img{
margin-bottom: 5px;
}
.gensaku-haishin ul li a , .gensaku-haishin ul li a{
display: block;
font-family: 'Kosugi Maru', sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 1.3em;
}
.gensaku-haishin6 ul li{
width: 15%;
text-align: center;
margin-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 3px;
margin-left: 3px;
}
/*絞込み検索部分
---------------------------------------------------------------------------*/
.is-hide {
display: none;
}
.search-box:after{
display: block;
clear: both;
content:"";
}
.search-box_label{
font-family: 'Kosugi Maru', sans-serif;
font-weight: bold;
margin-bottom: 10px;
}
.search-box {
margin-bottom: 15px;
}
.search-box input{
display: none;
}
.search-box label{
display: block;
float: left;
cursor: pointer;
width: 80px;
margin: 0;
padding: 12px 5px;
border-right: 1px solid #abb2b7;
background: #bdc3c7;
color: #555e64;
font-size: 12px;
text-align: center;
line-height: 1;
transition: .2s;
}
/* 小スマホ */
@media screen and (max-width: 374px) {
.search-box label{
width: 70px!important;
font-size: 11px;
}
/* 小スマホ向け終わり */ }
.search-box input[type="radio"]:checked + label {
background-color: #38BAAE;
color: #FEDC01;
font-weight: bold;
}
.search-box input[type="checkbox"]:checked + label {
background-color: #38BAAE;
color: #FEDC01;
font-weight: bold;
}
/*ACメニュー*/
.accordion{
padding-top: 10px;
padding-bottom: 10px;
margin-top: 20px;
margin-bottom: 20px;
position:relative;
background-color: #FFFFFF;
padding-right: 10px;
padding-left: 10px;
-webkit-border-radius: 5px;
border-radius: 5px;
clear: both;
-webkit-box-shadow: 0px 0px 3px #CCCCCC;
-ms-box-shadow: 0px 0px 3px #CCCCCC;
box-shadow: 0px 0px 3px #CCCCCC;
}
div.accordion form { display:none;}
div.accordion > div {
cursor:pointer;
font-weight: bold;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
color: #000000;
font-family: 'Kosugi Maru', sans-serif;
font-size: 18px;
}
.accordion ul > li:last-child{
border-style: none!important;
margin-bottom: 0px!important;
padding-bottom: 0px!important;
}
.accordion > ul{
padding: 0px!important;
}
.accordion ul > li {
padding-left:0px!important;
}
.accordion_icon,
.accordion_icon span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.accordion_icon {
position: relative;
width: 40px;
height: 40px;
float: right;
margin-right: -20px;
top: 5px;
}
.accordion_icon span {
position: absolute;
left: 5px;
width: 40%;
height: 5px;
background-color: #38BAAE;
border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
top: 5px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
top: 5px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
/*＋、－切り替え*/
.accordion_icon.active span:nth-of-type(1) {
display:none;
}
.accordion_icon.active span:nth-of-type(2) {
top: 5px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
.list_item{
text-align: center;
margin-bottom: 20px;
border-bottom-width: 3px;
border-bottom-style: dotted;
border-bottom-color: #000000;
padding-bottom: 10px;
padding-top: 10px;
}
.list_item img{
width: 80%;
margin-bottom: 20px;
}
.list_item p{
text-align: left;
}
.sortorder_mizuiro {
border: 2px solid #4BB6C2;
background-color: #FFFFFF;
width: 80%;
line-height: 1.4em;
-webkit-border-radius: 3px;
border-radius: 3px;
background:#4BB6C2;
text-shadow: 1px 1px 1px #30868F;
color: #FFFFFF;
font-family: 'Kosugi Maru', sans-serif;
font-size: 16px;
font-weight: bold;
margin-right: auto;
margin-left: auto;
text-align: center!important;
clear: both;
margin-bottom: 3px;
}
.sortorder_mizuiro a{
text-decoration: none;
border-radius:10px;
text-align: center;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 10px;
display: block;
line-height: 1.4em;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #FFFFFF;
text-decoration: none;
border: 1px dotted #FFFFFF;
padding-top: 20px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
}
.sortorder_mizuiro a:hover {
background:#30868F;
}
.order-top{
text-align: center!important;
font-size: 12px;
margin-bottom: 2px;
color: #F05055;
font-weight: bold;
font-family: 'Kosugi Maru', sans-serif;
line-height: 1.2em;
clear: both;
}
.order-bottom{
text-align: center!important;
font-size: 12px;
color: #F05055;
font-weight: bold;
font-family: 'Kosugi Maru', sans-serif;
margin-top: 7px;
line-height: 1.2em;
}
.animated {
animation-duration: 5s;
animation-fill-mode: both;
animation-timing-function: ease-out;
animation-iteration-count:infinite;
text-align: left;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
.fadeInRight {
animation-name: fadeInRight;
}
/*
ネタバレ
-----------------------------------------*/
/*ボックス全体*/
.accbox {
max-width: 100%;/*最大幅*/
font-family: 'Kosugi Maru', sans-serif;
}
.accbox .list li:before {/*疑似要素*/
font-family: "Font Awesome 5 Free";
content: "\f058";
position: absolute;
left : 0em; /*左端からのアイコンまで*/
color: #FEDC01!important; /*アイコン色*/
font-size: 20px;
}
.accbox .numList li:before{
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*数字のデザイン変える*/
display:inline-block;
background: #FEDC01!important;
color: #000000;
font-weight:bold;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 20px;
height: 20px;
line-height: 20px;
text-align:center;
top:3px;
}
.accbox blockquote{
color: #000000;
}
.accbox h4,.accbox h5{
margin-bottom: 0px!important;
margin-top: 0px!important;
}
/*ラベル*/
.accbox label {
display: block;
margin: 1.5px 0;
padding : 11px 12px;
color :#38BAAF;
font-weight: bold;
background :#FEDC01;
cursor :pointer;
transition: all 0.5s;
border: 3px solid #38BAAF;
}
.accbox label:after {
content: '';
margin-top: -7px;
top: 50%;
right: 15px;
width: 8px;
height: 8px;
color: #FFFFFF;
font-size: 1em;
font-weight: bold;
line-height: 1.2em;
display: block;
position: absolute;
border-top: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
/*ラベルホバー時*/
.accbox label:hover {
background :#FFFFFF;
}
/*チェックは隠す*/
.accbox input {
display: none;
}
/*中身を非表示にしておく*/
.accbox .accshow {
height: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
.accshow {
padding-right: 10px!important;
padding-bottom: 1px!important;
padding-left: 10px;
padding-top: 20px;
font-size: 14px;
color :#FFFFFF;
background :#38BAAF!important;
margin-bottom: 40px!important;
}
.accshow table {
margin-bottom: 1px!important;
}
/*クリックで中身表示*/
.cssacc:checked + .accshow {
height: auto;
padding-bottom: 0px!important;
background: #FFFFFF;
opacity: 1;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #38BAAF;
border-bottom-color: #38BAAF;
border-left-color: #38BAAF;
}
/*
アイコン
-----------------------------------------*/
/* Font Awesome hatena bookmark */
.fa-hatena:before {
content: "B!";
font-family: Verdana;
font-weight: bold
}
/*
feedly
*/
@font-face {
font-family: 'icomoon';
src: url('https://appinfo.jp/fonts/icomoon.eot?c4rzit');
src: url('https://appinfo.jp/fonts/icomoon.eot?c4rzit#iefix') format('embedded-opentype'),
url('https://appinfo.jp/fonts/icomoon.ttf?c4rzit') format('truetype'),
url('https://appinfo.jp/fonts/icomoon.woff?c4rzit') format('woff'),
url('https://appinfo.jp/fonts/icomoon.svg?c4rzit#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-feedly:before {
content: "\e900";
color: #FFFFFF;
}
/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1023px) {
/*
パンくずリスト
-----------------------------------------*/
#breadcrumb{
padding-right: 30px;
padding-left: 30px;
}
/*
コンテンツ
-----------------------------------------*/
.box , .box-b {
padding-right: 20px;
padding-left: 20px;
margin-right: 30px;
margin-left: 30px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box2 {
margin-right: 30px;
margin-left: 30px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box-title{
-webkit-border-radius: 3px 3px 0px 0px!important;
border-radius: 3px 3px 0px 0px!important;
}
.newmenu {
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
}
.newmenu li{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
.newmenu a{
height: 140px;
}
.newmenu img{
margin-right: 20px;
}
/*
side
-----------------------------------------*/
.side , .side-kaso{
margin-right: 30px;
margin-left: 30px;
}
.side-ranking , .side-menu{
-webkit-border-radius: 3px;
border-radius: 3px;
}
.sidemidashi{
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
}
.side_recommended img {
margin-right: 20px;
}
.side_recommended li{
font-size: 18px;
padding-left: 160px;
}
.rank-kin:before , .rank-gin:before , .rank-dou:before , .rank-etc:before{/*王冠アイコン*/
left: 140px;
}
.side_recommended a{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 25px;
padding-left: 20px;
}
.side-menu a {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}
.side-menu ul li a:before {
left : 20px; /*左端からのアイコンまでの距離*/
}
/*
ボタン
-----------------------------------------*/
.linkbox{
border: 2px solid #D9D9D9;
padding-right: 20px;
margin-bottom: 40px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
.linkbox_midashi{
margin-bottom: 20px!important;
font-size: 23px;
}
.linkbox_txt{
font-size: 16px;
margin-bottom: 20px!important;
}
.linkbox img{
margin-right: 20px;
}
.linkbox_buttom{
font-size: 16px;
}
/*--------------------------------
SNS
---------------------------------*/
.sns{
padding-right: 30px;
padding-left: 30px;
}
.sns li {
margin-bottom: 15px;
}
/*
footer
-----------------------------------------*/
footer{
padding-right: 30px;
padding-left: 30px;
}
.cate_item{
width: 22%;
}
/* タブレット*/ }