Written by Anonymous
/*********************************** プロフィール-サイドバー
********************************/
.sidebar .widget_author_box {
background: #fff;
padding-top: 1.2em;
border-radius: 3px 3px 0 0;
max-width: 360px;
margin: 0 auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.sidebar .author-box {
padding: 120px 0 0;
border: none;
position: relative;
margin: 0 0 3em;
max-width: 100%;
overflow:hidden;
}
.sidebar .author-content {
background: #2fcdb4;
border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
color: #fff;
padding: 20px;
width:110%;
margin-left:-5% !important;
}
.sidebar .author-box .author-name a {
color: #218f7d;
text-decoration: none;
letter-spacing: 1px;
font-size: 18px;
}
.sidebar .author-box .author-description {
padding: 55px 25px 0px;
text-align: justify;
text-justify: inter-ideograph;
}
.sidebar .author-box p {
line-height: 1.8;
font-size: 14px;
}
.sidebar .author-box .author-thumb {
width: 170px;
margin: 0 auto;
position: absolute;
top: 50px;
right: 0;
left: 0;
bottom: 0;
}
.sidebar .author-box .author-name {
font-size: 1.1em;
font-weight: bold;
position: absolute;
margin-bottom: 0.4em;
top: 23px;
bottom: 0;
right: 0;
left: 0;
}
.sidebar .author-box .author-widget-name {
position: absolute;
top: 3px;
bottom: 0;
right: 0;
left: 0;
font-size: 0.7em;
color: #bbb;
}
.sidebar .author-box .sns-follow {
padding: 15px 10px;
}
.sidebar .author-box .sns-follow-buttons {
display: flex;
justify-content: space-evenly;
}
#sidebar .author-box .sns-follow-buttons a {
border-radius: 100%;
border: none;
width: 45px;
height: 45px;
line-height: 45px;
font-size: 30px;
}
.sidebar .author-box .sns-follow-buttons a:hover {
box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
opacity: 1;
}
.sidebar .author-box .sns-follow-buttons .follow-button span:before {
color: #fff;
}
.sidebar .icon-instagram-new:before {
content: "\ea92";
font-size: 24px;
}
.sidebar .author-box .to-profile:hover {
box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
}
.sidebar .author-box .sns-follow-message {
margin-bottom: 10px;
font-size: 13px;
color: #fff;
}
.sidebar .author-box .sns-follow-message:before {
content: "\";
margin-right: 5px;
}
.sidebar .author-box .sns-follow-message:after {
content: "/";
margin-left: 5px;
}
.sidebar .icon-twitter-logo:before {
position: absolute;
top: 8px;
right: 0;
bottom: 0;
left: 0;
}
.sidebar .icon-facebook-logo:before {
position: absolute;
top: 6px;
bottom: 0;
right: 8px;
left: 0;
}
.sidebar .icon-hatebu-logo:before {
position: absolute;
top: 8px;
bottom: 0;
right: 0;
left: 0;
}
.sidebar .icon-feedly-logo:before {
position: absolute;
top: 8px;
right: 0;
bottom: 0;
left: 0;
}
.sidebar .icon-rss-logo:before {
position: absolute;
top: 8px;
right: 0;
bottom: 0;
left: 0;
}
/************************************** リスト色 ぽんひろ.com
************************************/
.list-8{
counter-reset:number;
list-style-type: none;
padding:0;
margin:0;
}
.list-8 li {
border-bottom:2px dashed;
border-color:#cdcdcd; /* 線の色 */
position: relative;
margin:0.5em 0 !important;
max-width:500px; /* 横幅 */
padding: 0 0 0.5em 1.8em;
}
.list-8 li:last-child {
border:none;
}
.list-8 li:before {
counter-increment: number;
content: counter(number);
background-color: #ffa952; /* 文字背景色 */
color: #fff; /* 文字色 */
position: absolute;
font-weight:bold;
font-size: 14px;
left: 0;
top:0.5em;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
}
/************************************** ボックス色 ぽんひろ.com
************************************/
.list-box-1{
background: #fef9ed; /* 背景色 */
border-radius: 4px;
max-width: 600px; /* 横幅 */
padding: 2em;
margin:0 auto;
}
@media screen and (max-width: 768px){
.article ul, .article ol {
padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
}
}
/************************************** ボックス色 ぽんひろ2.com
************************************/
.box1-yellow{
margin: 2em auto; /* ボックスの余白 */
background: #fef9ed; /* ボックス背景色 */
border-radius:4px; /* ボックス角丸 */
max-width:600px; /* ボックス横幅 */
padding: 3.5em 2em 1.5em; /* ボックス内側余白 */
position:relative; /* 配置に関するもの(ここを基準に) */
}
.box1-yellow .box-title {
background: #fdc44f; /* タイトル背景色 */
color: #fff; /* タイトル文字色 */
font-weight: bold; /* タイトル文字の太さ */
font-size: 20px;/* タイトル文字の大きさ */
padding: 5px;/* タイトル周りの余白 */
text-align: center; /* タイトル中央寄せ */
border-radius: 4px 4px 0px 0px; /* タイトル角丸 */
position:absolute; /* 配置に関するもの(ここを動かす) */
top:0; /*上から(0px)に配置 */
left:0; /*左から(0px)に配置 */
width:100%;/*横幅最大幅 */
}
.box1-yellow p {
margin: 0;/* 文字の余白リセット */
padding: 0; /* 文字の内側余白リセット*/
}
.box5-yellow {
position: relative; /* 配置に関するもの(ここを基準に) */
max-width:600px; /* ボックスの横幅 */
margin: 2em auto; /* ボックスの外側余白(上下:2em 左右:auto) */
padding: 2em 2em 1.7em; /* ボックスの内側余白(上:2em 左右:2em 下:1.7em) */
border: 1px solid #fdc44f; /* ボックスの線 (太さ 線の種類 線の色)*/
border-radius: 4px; /* ボックスの角丸 */
background: #fef9ed;/* ボックス背景色 */
}
.box5-yellow .box-title {
position: absolute; /* 配置に関するもの(ここを動かす) */
top: -18px; /* 上から(-18px)移動*/
left: 27px; /* 左から(27px)移動 */
background: #fdc44f; /* タイトル背景色 */
color: #fff; /* タイトル文字色 */
padding: 0.6em 1em;/* タイトルの内側余白 */
line-height: 1;/* タイトルの行の高さ */
font-size: 17px;/* タイトル文字の大きさ */
font-weight: bold;/* タイトル文字の太さ */
border-radius:4px;/* タイトルの角丸 */
}
.box5-yellow p {
margin: 0; /* 文字の外側余白リセット*/
padding: 0; /* 文字の内側余白リセット*/
}
/************************************
** グローバルメニュー PC
************************************/
/* ロゴの大きさ・幅に関するもの */
.header-container-in.hlt-top-menu .logo-header img {
max-height: 100%;
height: auto;
max-width: 280px;
vertical-align: middle;
margin: 20px 20px;
}
#header-container {
box-shadow: 0 0 10px rgba(30, 30, 30, .1);
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 10;
}
.site-name-text-link {
color: #fff;
}
.navi {
background: none;
}
.navi-in > ul .sub-menu {
background: #fff;
box-shadow: 0 0 10px rgba(30, 30, 30, .1);
}
.navi-in > ul li {
width: auto;
}
.navi-in a {
font-size: 14px; /* ナビ文字大きさ */
font-weight: bold;
position: relative;
color: #fff; /* ナビ文字色 */
padding: 0 20px;
display: block;
text-decoration: none;
}
.navi-in a:hover {
background: none;
}
.navi-in a:before {
position: absolute;
left: 0;
bottom: 6px;
content: "";
display: block;
width: 100%;
height: 3px;
background: #fff; /* マウスON時の下線色 */
transform: scale(0, 1);
transition: 0.4s;
}
.navi-in a:hover:before {
transform: scale(1);
}
.navi-in > ul .sub-menu a {
color: #666; /* サブメニュー文字色 */
font-size: 12px; /* サブメニュー文字の大きさ */
}
.navi-in > ul .sub-menu a:before {
background: #42d5e7; /* サブメニューマウスON時の下線色 */
}
.header-container-in.hlt-top-menu .logo-header {
max-height: 100%;
}
.header-small {
opacity: 0.9;
}
.header-small .header-container-in.hlt-top-menu .logo-header img {
max-width: 130px;
margin: 10px 0;
}
#container {
padding-top: 90px;
}
[id^="toc"]:target {
padding-top: 85px;
margin-top: -85px;
}
/************************************通知エリア
*********************************/
.notice-area {
background: #9e3f3f;
}
/************************************
** トップページカスタマイズ
************************************/
.home #main h1{
font-size: 1em;
color: #555;
letter-spacing: 1px;
margin: 1em 0 -2em;
font-weight: 400;
display: flex;
align-items: center;
}
.home #main h1:before, .home #main h1:after {
content: "";
flex-grow: 1;
height: 1px;
background: #aaa;
display: block;
}
.home #main h1:before {
margin-right: .4em;
}
.home #main h1:after {
margin-left: .4em;
}
.home #main .large-thumb{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0.8em 0;
}
.home #main .large-thumb a{
width: 50%;
padding: 10px;
}
.home #main .large-thumb a:hover{
background:unset;
}
.home #main .widget-entry-cards .e-card {
font-size: 18px;
box-shadow: 0 0 4px rgba(0,0,0,.15);
-webkit-transition: all 0.3s;
transition: all 0.3s;
height:100%;
}
.home #main .widget-entry-cards .e-card:hover {
transform: translateY(-3px);
box-shadow: 0px 3px 18px 3px rgba(0,0,0,.08);
}
.home #main .widget-entry-cards figure {
float: none;
width: 100%;
}
.home #main .widget-entry-cards figure img {
width: 100%;
display: block;
object-fit: cover;
height: 170px;
}
.home #main .widget-entry-cards .card-content {
margin: 0 0 0.5em;
padding:10px 15px;
background:#fff;
}
.home #main .large-thumb .new-entry-card-title,.home #main .large-thumb .popular-entry-card-title {
font-size: 0.9em;
line-height: 1.5;
font-weight: 600;
color: #555;
margin-top: 3px;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
.home #main h1{
margin: 1em 0 0;
padding: 0;
font-size:0.8em;
}
.home #main .widget-entry-cards .e-card {
margin:0 5px;
}
.home #main .large-thumb a {
width: 100%;
padding: 0;
margin:0 0 15px;
}
.home .mobile-2{
justify-content:space-between;
}
.home .mobile-2 a{
width:48% !important;
}
.home .mobile-2 figure img {
object-fit: unset !important;
height: auto !important;
}
.home #main .large-thumb .new-entry-card-title{
line-height:1.3;
}
}
/************************************
** ボタン
************************************/
.p-button {
max-width: 300px;
margin: 0 auto;
}
.p-button a {
display: block;
margin:25px 0;
padding: 0.8em 1em;
border-radius: 2em;
color: #fff;
font-size: 16px;
font-weight: 700;
text-decoration: none;
background: #eba02f;
box-shadow: 0 5px 20px rgba(235, 160, 47, .5);
text-align: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity:1;
}
.p-button a:hover{
box-shadow:none;
transform: translateY(3px);
opacity:1;
}
.home header .sns-share,.home footer .sns-share,.home footer .sns-follow,.home header .post-date,.home .post-update,.home .author-info{
display: none;
}
/************************************
** おすすめ記事(タイトルなし)
************************************/
.recommend{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.recommend a img{
display:block;
padding:0 2px;
width:100%;
}
.recommend a:hover{
opacity:0.7;
transition: all .25s ease-out;
}
@media screen and (max-width: 1023px){
.recommend{
-ms-flex-wrap: wrap;
flex-wrap:wrap;
}
.recommend a img{
padding:1px 0;
}
.recommend a{
width:100%;
}
}
/************************************
** 比較表
************************************/
/* 比較表全体 */
.compare-box {
display:-webkit-box;/* 配置 */
display:-ms-flexbox;/* 配置 */
display:flex;/* 配置 */
max-width:600px;/* 横幅 */
margin: 0 auto 2rem;/* 余白 */
border-radius:4px;/* 角丸 */
box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
background: #fef9ed; /* 背景色 */
}
/* 左のボックス、右のボックス */
.compare-box .compare-left-wrap, .compare-box .compare-right-wrap{
width:50%;/* 横幅半分ずつ */
overflow:hidden;/* はみ出さないように*/
}
/* 左のタイトル、右のタイトル */
.compare-box .compare-left-head, .compare-box .compare-right-head{
background: #fdc44f; /* 背景色 */
text-align: center;/* 中央寄せ */
color: #FFF; /* 文字色 */
font-weight: bold;/* 文字太さ */
padding:0em 1em;/* 余白 */
font-size:15px;/* 文字大きさ */
line-height:1.5;/* 行間 */
height:65px;/* 縦幅 */
display:table-cell;/* 形式 */
vertical-align:middle;/* 高さ中央寄せ */
width:1000px;/* 横幅 */
}
/* 左のタイトル */
.compare-box .compare-left-head{
border-radius:4px 0 0 0;/* 角丸 */
}
/* 右のタイトル */
.compare-box .compare-right-head{
border-radius:0 4px 0 0;/* 角丸 */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box .compare-left, .compare-box .compare-right{
padding:1.5em;/* 余白 */
font-size:15px;/* 文字大きさ */
line-height:2;/* 行間 */
text-align: justify;/* 段落両端 */
text-justify: inter-ideograph;/* 段落両端 */
}
/* 文章 */
.compare-box p {
padding: 0;/* 余白 */
margin: 0 0 20px 0;/* 余白 */
}
/*スマホで見たとき*/
@media screen and (max-width: 480px){
/* 左のタイトル、右のタイトル */
.compare-box .compare-left-head, .compare-box .compare-right-head{
font-size:12px;/* 文字大きさ */
height:50px;/* 高さ */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box .compare-left, .compare-box .compare-right {
padding: 1.2em;/* 余白 */
font-size: 12px;/* 文字大きさ */
}
}
/************************************
** 比較表 箇条書き(記号)
************************************/
/* 箇条書き(記号) */
.compare-box .list{
list-style: none !important;/* 行頭記号リセット */
padding:0 !important;/* 余白リセット */
margin:0 !important;/* 余白リセット */
border:none !important;/* 線リセット */
}
/* 箇条書き 行 */
.compare-box .list li {
border-bottom:1px dashed #cdcdcd;/* 線(太さ 種類 色) */
position: relative;/* 配置 */
margin:0.5em 0 !important;/* 余白 */
max-width:500px;/* 横幅 */
padding: 0 0 0.7em 1.4em !important;/* 余白 */
line-height:1.8;/* 行間 */
}
/* 箇条書き 行最後 */
.compare-box .list li:last-child{
border:none;
}
/* 箇条書き 行頭記号 */
.compare-box .list li:before {
background-color: #ffa952; /* 色 */
position: absolute;/* 配置 */
content: '';/* 空文字 */
top: 10px;/* 上からの距離 */
left: 7px;/* 下からの距離 */
width: 7px;/* 横幅 */
height: 7px;/* 縦幅 */
border-radius: 4px;/* 角丸 */
}
/*スマホで見たとき*/
@media screen and (max-width: 480px){
/* 箇条書き 行頭記号 */
.compare-box .list li:before {
top: 9px;/* 上からの距離 */
left: 3px;/* 下からの距離 */
width:5px;/* 横幅 */
height:5px;/* 縦幅 */
}
}
/************************************
** 比較表 箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.compare-box .list-number{
counter-reset:number; /* 番号リセット */
list-style: none !important;/* 行頭番号削除) */
padding:0 !important;/* 余白リセット */
margin:0 !important;/* 余白リセット */
border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.compare-box .list-number li {
position: relative;/* 配置 */
margin:0.5em 0 !important;/* 余白 */
max-width:500px; /* 横幅 */
padding: 0 0 0.5em 1.8em !important;/* 余白 */
line-height:1.8;/* 行間 */
border-bottom:1px dashed #cdcdcd;/* 線(太さ 種類 色) */
}
/* 箇条書き 行最後 */
.compare-box .list-number li:last-child{
border:none;
}
/* 箇条書き(番号) 行頭番号 */
.compare-box .list-number li:before {
counter-increment: number;/* 番号 */
content: counter(number);/* 番号 */
background-color: #fdc44f; /* 背景色 */
color: #fff; /* 番号色 */
position: absolute;/* 配置 */
font-weight:bold;/* 文字太さ */
font-size: 12px;/* 文字大きさ */
border-radius: 50%;/* 角丸 */
left: 0;/* 左からの距離 */
top:5px;/* 上からの距離 */
width: 18px;/* 横幅 */
height: 18px;/* 縦幅 */
line-height: 18px;/* 行間 */
text-align:center;/* 中央寄せ */
}
/* 箇条書き 行頭記号リセット */
.compare-box .list-number li:after{
content:'';
}
/*スマホで見た時*/
@media screen and (max-width: 480px){
/* 箇条書き(番号) 行 */
.compare-box .list-number li{
padding: 0 0 0.5em 1.8em !important;/* 余白 */
}
/* 箇条書き(番号) 行頭番号 */
.compare-box .list-number li:before {
font-size:10px;/* 文字大きさ */
width: 16px;/* 横幅 */
height: 16px;/* 縦幅 */
line-height: 16px;/* 行間 */
top:2px;/* 上からの距離 */
}
}
/*********************************
* Cocoon 通知エリア2つ
*********************************/
.twice-notice{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
.twice-notice a{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position:relative;
flex-basis:50%;
text-align:center;
color:#fff; /* 文字色 */
font-size: 0.9em; /* 文字サイズ */
line-height: 1.4;
font-weight: bold;
padding: 1em 2em;
letter-spacing: 1px;
text-decoration:none;
}
.twice-notice a:first-child{
background:#bb4f05; /* 左背景色 */
border-right:1px solid #fff; /* 中央線 */
}
.twice-notice a:last-child{
background:#893a04; /* 右背景色 */
}
.twice-notice a:hover{
opacity:0.8;
}
.twice-notice a:after{
position:absolute;
top:50%;
right:1em;
transform: translateY(-50%);
font-family:"FontAwesome";
content:"\f054"; /* 矢印アイコン */
animation:infinite move-arrow 1.5s; /* 矢印アニメーション */
}
@keyframes move-arrow {
0%{margin:0 5px 0 -5px;opacity:.3;} /* 矢印アニメーション設定 */
}
/* スマホ */
@media screen and (max-width: 480px){
.twice-notice a{
font-size:0.7em; /* 文字サイズ */
}
.twice-notice a:after{
transform: translateY(-50%);
}
}
/************************************
** アイコンつきリスト 吹き出し
************************************/
/* ボックス全体 */
.iconbox{
margin: 0 auto 2em; /* 余白 */
background: #fef9ed; /* 背景色 */
border-radius:4px; /* 角丸 */
max-width:600px; /* 横幅 */
padding: 0; /* 余白 */
box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
}
/* ボックスタイトル */
.iconbox .box-title {
font-size: 18px; /* 文字サイズ */
background: #fdc44f; /* 背景色 */
text-align: center; /* 文字配置 */
color: #fff; /* 文字色 */
font-weight: bold; /* 文字太さ */
letter-spacing: 0.05em; /* 文字間隔 */
border-radius:4px 4px 0 0; /* 角丸 */
line-height:1.5; /* 行間 */
padding:1em 2em; /* 余白 */
}
/* 段落の余白リセット */
.iconbox p {
margin: 0;/* 文字の余白リセット */
padding: 0; /* 文字の内側余白リセット*/
}
/* ボックス 中 */
.iconbox .iconbox-wrap{
display:-webkit-box; /* 配置 */
display:-ms-flexbox; /* 配置 */
display:flex; /* 配置 */
padding:1.3em 2em; /* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
width: 97%;/*横幅 */
margin: 0 3% 0 0 !important;/* 余白 */
line-height:1.8;/* 行間 */
-ms-flex-item-align: center;/* 中央寄せ */
align-self: center;/* 中央寄せ */
}
/* コンテンツ段落 */
.iconbox .iconbox-wrap .box-content p{
margin-bottom:1em;/*余白 */
}
/* アイコン&吹き出し */
.iconballoon{
-ms-flex-item-align: end; /* 下部に配置 */
align-self: flex-end; /* 下部に配置 */
}
/* アイコン */
.iconballoon .icon{
text-align:center;/* 位置を中央へ */
}
/* アイコン画像 */
.iconballoon .icon img{
width: 120px; /* 横幅 */
margin:0; /* 余白 */
}
/* アイコン画像 (amp)*/
.iconballoon amp-img{
max-width: 120px !important; /* 横幅 */
margin:0; /* 余白 */
}
/* 吹き出し文字 */
.iconballoon .balloon p{
line-height:1.4; /* 行間 */
}
/* 吹き出し */
.iconballoon .balloon{
position:relative; /* 配置 */
width:140px; /* 横幅 */
background:#fff; /* 背景色 */
padding:10px; /* 余白 */
text-align:center; /* 中央寄せ */
border:2px solid #999;/* 線(太さ 種類 色) */
color:#555555;/* 文字色 */
font-size:14px;/* 文字サイズ */
font-weight:bold;/* 文字太さ */
border-radius:10px;/* 角丸 */
margin-bottom:10px;/* 余白 */
line-height:1.5; /* 行間 */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after,.balloon:before{
border: solid transparent;
content:'';
height:0;
width:0;
position:absolute;
top:100%;
left:50%;
}
.iconballoon .balloon:after{
border-top-width:10px;
border-bottom-width:10px;
border-left-width:10px;
border-right-width:10px;
margin-left: -10px;
border-top-color:#FFFFFF;
}
.iconballoon .balloon:before{
border-color:"rgba(153, 153, 153, 0)";
border-top-width:12px;
border-bottom-width:12px;
border-left-width:12px;
border-right-width:12px;
margin-left: -12px;
margin-top: 1px;
border-top-color:#999999;
}
/*スマホ*/
@media screen and (max-width: 480px){
/* ボックスタイトル */
.iconbox .box-title {
font-size: 14px; /* 文字サイズ */
}
/* ボックス 中 */
.iconbox .iconbox-wrap {
padding: 1em 1em 1em 1.5em;/* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
font-size:12px;/*文字サイズ */
}
/* アイコン画像 */
.iconballoon .icon img{
width:80px;/* 横幅 */
margin-top:5px;/* 余白 */
}
/* アイコン画像(amp) */
.iconballoon amp-img{
max-width:80px !important;/* 横幅 */
margin-top:5px;/* 余白 */
}
/* 吹き出し */
.iconballoon .balloon{
width:80px;/* 横幅 */
font-size:10px;/* 文字サイズ */
padding: 1em 0;/* 余白 */
border: 1px solid #999;/* 線(太さ 種類 色) */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after {
border-top-width: 12px;
border-bottom-width: 10px;
border-left-width: 11px;
border-right-width: 11px;
margin-left: -11px;
border-top-color: #FFFFFF;
}
}
/************************************
** ブログカード
************************************/
.blogcard-snippet,
.blogcard-footer {
display: none;
}
.blogcard-wrap {
transition: all .3s;
max-width: 600px;
margin: 2em auto;
}
.blogcard {
border:1px solid #eaeaea !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
padding: 10px;
}
.blogcard-wrap:hover {
background: none;
transform: translateY(-3px);
box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
margin: 0;
}
.blogcard-thumbnail img {
display: block;
}
.blogcard-title {
color: #555;
letter-spacing: 0.5px;
font-size: 15px;
line-height: 1.5;
margin: 10px 0 0 0;
height: 45px;
overflow: hidden;
}
.blogcard-content {
min-height: auto;
margin-left: 185px;
padding-right: 6px;
}
.blogcard-label {
top: -11px;
left: 9px;
padding: 3px 0.6em;
background:#aaa;
padding: 1px 10px;
font-weight: 600;
font-size: 11px;
letter-spacing: 1px;
}
.blogcard-content:after {
content: "クリックして読む";
background: #66c2c3; /* 背景色 */
display: block;
text-align: center;
color: #fff;
font-weight: 600;
letter-spacing: 1px;
width: 180px;
border-radius: 20px;
font-size: 13px;
padding: 1px 0;
margin-top: 6px;
}
@media screen and (max-width: 834px) {
.blogcard-content {
margin-left: 130px;
}
.blogcard-title {
font-size:12px;
line-height: 1.5;
height: 35px;
margin:0;
}
.blogcard-content:after {
content: "タップして読む";
}
.blogcard-thumbnail{
width:120px;
}
}
@media screen and (max-width: 560px) {
.blogcard-content:after {
width: 120px;
font-size: 12px;
}
.blogcard-title {
margin:0;
}
}
@media screen and (max-width: 320px) {
.blogcard-thumbnail {
width: 100px;
}
.blogcard-content {
margin-left: 110px;
}
.blogcard-title {
height: 35px;
}
}
/************************************
** 箇条書き(点)
************************************/
/* 箇条書き */
.iconbox .list {
list-style: none;/* 行頭記号削除 */
padding: 0 !important;/* 余白リセット */
margin: 0 !important;/* 余白リセット */
border:none;/* 線リセット */
}
/* 箇条書き 行 */
.iconbox .list li {
position: relative;/* 行頭記号の配置 */
margin: 0 0 0.5em 0 !important;/* 余白 */
padding: 0 0 0.5em 1.4em !important;/* 余白 */
line-height:1.8;/* 行間 */
}
/* 箇条書き 行頭記号 */
.iconbox .list li:before {
background-color: #ffa952; /* 記号色 */
position: absolute; /* 行頭記号の配置 */
content: ''; /* 空文字 */
top:13px; /* 上からの距離 */
left: 0; /* 左からの距離 */
width: 7px; /* 横幅 */
height: 7px; /* 縦幅 */
border-radius: 4px; /*角丸 */
}
/* 箇条書き 行頭記号リセット */
.iconbox .list-number li:after{
content:'';
}
/*スマホ*/
@media screen and (max-width: 480px){
/* 箇条書き 行頭記号*/
.iconbox .list li:before{
top:8px;/* 上からの距離 */
}
}
/************************************
** 箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.iconbox .list-number{
counter-reset:number; /* 番号リセット */
list-style: none !important;/* 行頭番号削除) */
padding:0 !important;/* 余白リセット */
margin:0 !important;/* 余白リセット */
border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.iconbox .list-number li {
position: relative;/* 配置 */
margin:0.5em 0 !important;/* 余白 */
max-width:500px; /* 横幅 */
padding: 0 0 0.5em 1.8em !important;/* 余白 */
line-height:1.8;/* 行間 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
counter-increment: number;/* 番号 */
content: counter(number);/* 番号 */
background-color: #fdc44f; /* 背景色 */
color: #fff; /* 番号色 */
position: absolute;/* 配置 */
font-weight:bold;/* 文字太さ */
font-size: 14px;/* 文字大きさ */
border-radius: 50%;/* 角丸 */
left: 0;/* 左からの距離 */
top:4px;/* 上からの距離 */
width: 22px;/* 横幅 */
height: 22px;/* 縦幅 */
line-height: 22px;/* 行間 */
text-align:center;/* 中央寄せ */
}
/*スマホ*/
@media screen and (max-width: 480px){
/* 箇条書き(番号) 行 */
.iconbox .list-number li{
padding: 0 0 0.5em 2em !important;/* 余白 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
font-size:10px;/* 文字大きさ */
width: 18px;/* 横幅 */
height: 18px;/* 縦幅 */
line-height: 18px;/* 行間 */
top:2px;/* 上からの距離 */
}
}
/************************************
** アイコンフキダシボックス(グリーン)
************************************/
/* ボックス全体 */
.iconbox-green{
background: #eafaf7 !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-green .box-head-green{
background: #2fcdb4 !important; /* 背景色 */
}
}