/*** プロフィール-サイドバー ****/ .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; }
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; }
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; }
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;/ 上からの距離 / } } /*****