@charset "UTF-8"; /*! Theme Name: Cocoon Child Description: Cocoon専用の子テーマ Theme URI: https://wp-cocoon.com/ Author: わいひら Author URI: https://nelog.jp/ Template: cocoon-master Version: 1.1.2 */ /************************************ ** 子テーマ用のスタイルを書く ************************************/ /*必要ならばここにコードを書く*/ /************************************ ** レスポンシブデザイン用のメディアクエリ ************************************/ /*1023px以下*/ @media screen and (max-width: 1023px){ /*必要ならばここにコードを書く*/ } /*834px以下*/ @media screen and (max-width: 834px){ /*必要ならばここにコードを書く*/ } /*480px以下*/ @media screen and (max-width: 480px){ /*必要ならばここにコードを書く*/ } /* 画像の角を丸くする */ .image img{ border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; } /************************************ ** プロフィール-サイドバー ************************************/ .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-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); 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: #ff9a9e; text-decoration: none; letter-spacing: 2px; font-size: 19px; } .sidebar .author-box .author-description { padding: 45px 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: 120px; 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: 50%; border: 2px solid #ffd3cc; width: 45px; height: 45px; line-height: 45px!important; font-size: 30px; box-shadow: 0 0 10px rgba(255, 154, 158, .5), 0 0 5px -5px rgba(66, 172, 231); background:#fdf1f4; } .sidebar .author-box .sns-follow-buttons a:hover { box-shadow: 0 10px 20px -1px rgba(0, 0, 0, .2); opacity: 1; } .sidebar .icon-instagram-new:before { content: "\ea92"; font-size: 24px; } .sidebar .author-box .to-profile { position: absolute; background: #fff; border-radius: 50%; width: 50px; height: 50px; line-height: 50px; text-align: center; text-decoration: none; color: #ff9a9e; box-shadow: 0 0 10px rgba(255, 154, 158, .5), 0 0 5px -5px rgba(66, 172, 231); top: 105px; right: 45px; font-size: 0.9em; font-weight: bold; } .sidebar .author-box .to-profile:hover { box-shadow: 0 6px 8px 2px rgba(0, 0, 0, .2); } .sidebar .author-box .sns-follow-message { margin-bottom: 10px; font-size: 13px; } .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: 6px; right: 0; bottom: 0; left: 0; color: #1DA1F2; } .sidebar .icon-home-logo:before { position: absolute; top: 4px; bottom: 0; right: 0px; left: 0; color: #fe9a8b; } .sidebar .icon-instagram-logo:before { position: absolute; top: 5px; bottom: 0; right: 0; left: 0; color: #904AC6; } .sidebar .icon-youtube-logo:before { position: absolute; top: 5px; right: 0; bottom: 0; left: 0; color: #CD201F; } .sidebar .icon-line-logo:before { position: absolute; top: 5px; right: 0; bottom: 0; left: 0; color: #05c756; } #sidebar .author-box .sns-follow-message { display:block; } /************************************ ** ■プロフィール名 カスタマイズ ************************************/ .author-name::before { font-family: "Font Awesome 5 Free"; content: "\f470"; color: #fa6b6b; font-size: 18px; font-weight: 900; } .author-info .author-name::before { content: "\f1ae\A0"; } .author-name { padding-right: 20px; } .footer-meta .author-info .fas.fa-pencil-alt { display: none; } .footer-meta .author-info .post-author { font-size: 18px; } /************************************ ** ■ウィジェット[c]プロフィールカスタマイズ ************************************/ .nwa .author-box .author-description { word-break: break-all; text-decoration: underline dotted #bbb; font-size: 14px; font-weight: 600; } .nwa .author-box .author-thumb img { animation: ukasu 18s infinite; } @keyframes ukasu { 0% { transform:translate(-10px, 25px) rotate(0deg); } 35% { transform:translate(-10px, -10px) rotate(40deg); } 60% { transform:translate(-10px, 20px) rotate(0deg); } 82% { transform:translate(-10px, -10px) rotate(-20deg); } 100% { transform:translate(-10px, 25px) rotate(0deg); } } .nwa .author-box .author-thumb img:hover { animation: kaiten 0s linear infinite; } /************************************ ** トップページカスタマイズ ************************************/ .new-entry-card:hover { background: -webkit-repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 6px,#ffd3cc 6px, #ffd3cc 14px); background: repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 6px,#ffd3cc 6px, #ffd3cc 14px); -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); border-radius: 7px; box-shadow: 6px 6px 6px rgba(0,0,0,0.2)!important; } .new-entry-cards img { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .new-entry-card img:hover { animation: new-entry-card 3s linear infinite; } @keyframes new-entry-card { 0% { transform: rotate(0deg); } 25% { transform: rotate(6deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-6deg); } 100% { transform: rotate(0deg); } } .new-entry-card img{border-radius:8px;} /************************************ ** トップページカスタマイズ ************************************/ .home #main h1{ font-size: 1em; text-align: center!important; 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; -webkit-transition: all 0.3s; transition: all 0.3s; height:100%; } .home #main .widget-entry-cards .e-card:hover { transform: translateY(-3px); -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); box-shadow: 6px 6px 6px rgba(254, 154, 139)!important; background-color: #ffe0db; transition-duration: 0.6s; } .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: 210px; border-radius: 8px; box-shadow: 4px 4px 7px -2px #262626; } .home #main .widget-entry-cards .card-content { margin: 0 0 0em; padding:10px 15px; text-align: center; background: -webkit-repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 6px,#ffd3cc 6px, #ffd3cc 14px); background: repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 6px,#ffd3cc 6px, #ffd3cc 14px); } .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; } .home #main .widget-entry-cards .e-card { position: relative; overflow: hidden; } .home #main .widget-entry-cards .e-card:before { position: absolute; transform: rotate(45deg); animation: shine-title 4.8s ease-in-out infinite; background-color: #fffffa; content: " "; opacity: 0; top: -180px; left: 0; height: 100%; width: 30px; } @keyframes shine-title { 0% { -webkit-transform: scale(0) rotate(45deg); -ms-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); -ms-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); -ms-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); -ms-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; } } @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 { color: #fa6b6b; background: linear-gradient(#ffd3cc 0%, #fa6b6b 100%); text-shadow: 2.5px 1.0px 1.0px rgba(255, 255, 255, 0.66); box-shadow: 0px 2.5px 1px 2.8px rgba(0, 0, 0, 0.30), -1px -6px 7px 0px rgba(0, 0, 0, 0.28) inset; text-align: center; font-weight: 700; border-radius: 4em; line-height: normal; font-size: 20px; text-decoration: none; border-radius: 2em; padding: 0.8em 1em; margin:10px 0; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; -webkit-transition: all 0.8s; transition: all 0.9s; opacity:1; } .p-button a:hover{ box-shadow:none; transform: translateY(3px); opacity:1; } .p-button a:active { -webkit-transform: translateY(2px); transform: translateY(2px); box-shadow: 0 0 1px rgba(0, 0, 0, 0.15); background-image: linear-gradient(#fed6e3 0%, #ffd3cc 100%); } .p-button a:before { animation: shine 3s ease-in-out infinite; background-color: #fff; content: " "; height: 100%; left: 0; opacity: 0; position: absolute; top: -180px; transform: rotate(45deg); width: 30px; } @keyframes shine { 0% { transform: scale(0) rotate(45deg); opacity: 0; } 80% { transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { transform: scale(4) rotate(45deg); opacity: 1; } 100% { transform: scale(50) rotate(45deg); opacity: 0; } } /********************************* * 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: 1.0em; line-height: 1.4; font-weight: bold; padding: 1em 2em; letter-spacing: 1px; text-decoration:none; } .twice-notice a:first-child{ background:#ff9900; border-right:1px solid #fff; } .twice-notice a:last-child{ background:#ff0033; } .twice-notice a:hover{ opacity:0.7; } .twice-notice a:after{ position:absolute; top:50%; right:1em; transform: translateY(-50%); font-family: "Font Awesome 5 Free"; content: "\f218"; color: #fdf1f4; font-size: 20px; animation:infinite move-arrow 1.5s; } @keyframes move-arrow { 0%{margin:0 5px 0 -10px;opacity:.3;} } @media screen and (max-width: 480px){ .twice-notice a{ font-size: 0.5em; } .twice-notice a:after{ transform: translateY(-50%); font-size: 17px; } } /************************************ ** 何でも追従機能 ************************************/ .fixed-wrap{ position:fixed; z-index:100; max-width:180px; display:none; bottom:10px; right:90px; } .fixed-wrap img{ width:100%; height:auto; } @media screen and (max-width: 559px) { .fixed-wrap{ max-width:130px; bottom:20px; left:unset; right:15px; } } /************************************ ** ボックスナビ ************************************/ .p-nav{ margin:2em 0; padding:0; } .p-nav ul{ display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; list-style:none; margin:0; padding:0; border:none; } .p-nav ul li{ -ms-flex-preferred-size: calc(100%/4); flex-basis: calc(100%/4); margin:0; padding:0; text-align:center; box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; min-height:100px; cursor:pointer; background:#fff; } .p-nav ul li:hover{ z-index:2; box-shadow: inset 2px 2px 0 0 #fe9a8b, 2px 2px 0 0 #fe9a8b, 2px 0 0 0 #fe9a8b, 0 2px 0 0 #fe9a8b; background-color: #ffe7e3; transition: 0.35s ease-in-out; animation: pooyoon3 2.0s ease-in-out 1 forwards; } @keyframes pooyoon3 { 0%, 50% { transform: scale(1.0); } 10%, 30% { transform: scale(1.06); } 20%, 40% { transform: scale(0.94); } } .p-nav ul li:before{ content:unset !important; } .p-nav ul li a{ display:block; padding: 0.5em 1em; text-decoration:none; width:100%; } .p-nav ul li a:hover{ background:none; opacity:1; } .p-nav ul li a img{ max-width:50% !important; height: auto !important; filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1)); display: inline-block; } .p-nav .p-nav-title{ display: block; color: #666; font-size: 0.7em; letter-spacing: 1px; font-weight: 600; text-align: center; line-height: 1.5; } .sidebar .p-nav ul li{ -ms-flex-preferred-size: calc(100%/2); flex-basis: calc(100%/2); } @media screen and (max-width: 559px) { .p-nav ul li{ -ms-flex-preferred-size: calc(100%/2); flex-basis: calc(100%/2); } } .p-nav ul li a i,.p-nav ul li a svg{ font-size: 40px; padding: 10px 0; color: #fe9a8b; display:inline-block; } .p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{ color:#fe9a8b; } .p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{ color:#fe9a8b; } .p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{ color:#fe9a8b; } /************************************ ** ■カテゴリーのカスタマイズ *************************************/ .widget_categories ul li a{ text-decoration: none; color: #333; font-size: 13px; display: block; padding: 4px 4px 2px 10px; border-bottom: 1px dashed #fe9a8b; } .widget_categories ul li a::before{ font-family: "Font Awesome 5 Free"; content: "\f4ba"; font-weight: 900; color: #fe9a8b; padding-right: 6px; } .widget_categories > ul > li > a:first-child{ border-top: none; } .widget_categories ul li ul li a{ text-decoration: none; color: #333; display: block; padding: 4px 4px 2px 10px; border-bottom: 1px dashed #fe9a8b; } .widget_categories ul li ul li a::before{ font-family: "Font Awesome 5 Free"; content: "\f52d"; font-weight: 900; color: #fe9a8b; padding: 0px 6px 0px 2px; } .widget_categories ul li a .post-count{ display: inline-block; float: right; margin-left: 8px; color: #fa7e6b; background: #ffe2de; font-weight: bold; font-style: oblique; font-size: 12px; white-space: nowrap; line-height: 1.0; padding: 2px 15px; text-decoration: none; border-radius: 2px; } .widget_categories ul li a:hover{ background: #ffd3cc; color: #1c1c1c; transition: all 0.8s ease; } .widget_categories ul li a:hover .post-count{ background: #fe9a8b; color: #fff; transition: all 0.8s ease; } /************************************ カテゴリの行間とフォントを小さくする ************************************/ .widget_categories ul li a{ line-height: 1.3; font-size: 14px; } /************************************ ** ■ウィジェット カテゴリー ホバーエフェクト化のカスタマイズ ************************************/ .widget_categories ul li a { position: relative; } .widget_categories ul li a::after { position: absolute; color: rgba(255,255,255,1); bottom: -3px; left: 0; display: block; content: ""; width: 100%; height: 3px; background: #fe9a8b; transform: scaleX(0); transform-origin: left top; transition: transform 0.4s; } .widget_categories ul li a:hover::after { transform: scaleX(1); transform-origin: left top; transition: transform 0.3s; } .widget_categories ul li a { margin-bottom:2px; } /*-------------------------------- シンプルなボックス背景色、黄色と青 --------------------------------*/ .box1 { padding: 0.5em 1em; margin: 2em 0; border: dashed 2px #f7bcbc; border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); color: #2c2c2f; background: #fff7f9; } .box1 p { margin: 0; padding: 0; } .box2 { padding: 0.5em 1em; margin: 2em 0; border: dashed 2px #f7ed7c; border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); color: #2c2c2f; background: #fffdeb; } .box2 p { margin: 0; padding: 0; } .box3 { padding: 0.5em 1em; margin: 2em 0; border: dashed 2px #7fb3db; border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); color: #2c2c2f; background: #f0f6ff; } .box3 p { margin: 0; padding: 0; } .box4 { padding: 0.5em 1em; margin: 2em 0; border: dashed 2px #9fd996; border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); color: #2c2c2f; background: #edffef; } .box4 p { margin: 0; padding: 0; } /************************************ ** ピンクBOXノーマルタイトルありのカスタマイズ ************************************/ .box5-pink { position: relative; max-width:700px; margin: 2em auto; padding: 2em 2em 1em; border: 1.5px solid #fe9a8b; border-radius: 4px; background: #fdf1f4; border: 3px solid #ffdbe4; box-shadow: 0px 0px 5px 1px rgba(254, 154, 139); } .box5-pink .box-title { position: absolute; top: -25px; left: 20px; background: #fe9a8b; border: dashed 2px #e3e3e3; color: #fff; padding: 0.6em 1em; line-height: 1; font-size: 17px; font-weight: bold; border-radius: 3px; box-shadow: 2px 2px 5px 1px rgba(153, 153, 153); } .box5-pink .box-title:after { position: absolute; content: ''; left: -6px; top: -6px; border-width: 0 0 16px 16px; border-style: solid; border-color: #fff #fff #ffd3cc; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); } .box5-pink p { margin: 0; padding: 0; } /************************************ ** アコーディオンボタン ************************************/ .ac-box{ width: auto; margin: 30px auto 5px; } .ac-box label{ max-width: 385px; font-size: 16px; font-weight: bold; text-align: center; background: #fe9a8b; margin: auto; line-height: 50px; position: relative; display: block; height: 50px; border-radius: 8px; cursor: pointer; color: #fff; transition: all 0.5s; } .ac-box label:hover{ background: rgba( 240, 86, 137, 0.55 ); -webkit-transition: all .3s; transition: all .3s; } .ac-box input{ display: none; } .ac-box label:after{ color: #fff; font-family:"FontAwesome"; content:" \f078"; } .ac-box input:checked ~ label::after { color: #fff; font-family:"FontAwesome"; content:" \f077"; } .ac-box div{ height: 0px; padding: 0px; overflow: hidden; opacity: 0; transition: 0.5s; } .ac-box input:checked ~ div{ height: auto; padding: 5px; background: #eaeaea; opacity: 1; } .ac-box div p{ color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-align: justify; } .ac-small p{ margin-bottom: 0px; } /************************************ ** ●人気記事ランキング表示のカスタマイズ ************************************/ .widget-entry-cards.ranking-visible .card-thumb::before { background-color: #ffddee!important; color:#fe9a8b; top: -4px; left: -4px; border-radius: 18px; border:solid 2px #fe9a8b; width: 18px; height: 16px; line-height: 18px; font-weight: bold; font-size: 12.4px!important; font-style: oblique; font-family: Lato,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,sans-serif; } .widget-entry-cards.ranking-visible .no-1 .card-thumb::before, .widget-entry-cards.ranking-visible .no-2 .card-thumb::before, .widget-entry-cards.ranking-visible .no-3 .card-thumb::before { background-color: #fe9a8b!important; color:#fff; } .popular-entry-card-title.widget-entry-card-title.card-title { display: flex; padding-top: 5px; } .popular-entry-card-title { font-weight: bold; font-size: 14px; } @media screen and (max-width: 480px){ .popular-entry-card-title{ font-size: 12px!important; padding: 0px 0px 0px 0px!important; } } .popular-entry-card-link.a-wrap{ padding-top: 1px; padding-bottom: 1px; margin: 4px auto; } .attachment-thumb120.size-thumb120.wp-post-image{ border-radius: 4px; -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; -moz-box-shadow: 0 10px 8px -6px #8d8c8c; box-shadow: 0 10px 8px -6px #8d8c8c; } /************************************ ** ●パーテーション（区切り線）カスタマイズ 人気記事 ************************************/ .border-partition a:first-of-type { border-top: 1px dotted #f76c57; padding-top:4px; } .border-partition a { border-bottom: 2px dotted #f76c57; } /************************************ ** ■ウィジェット [C]人気記事の下マージン調整 ************************************/ .widget.widget-sidebar.widget-sidebar-standard.widget_popular_entries { margin-bottom: -18px!important; } /************************************ ** ●次のページボタンカスタマイズ ************************************/ .pagination-next, .pager-prev-next { line-height: 30px; } .pagination-next-link { width: 780px; margin-left: auto; margin-right: auto; border: solid 2px #ffd3cc!important; border-radius: 10px!important; font-weight:bold!important; font-size: 20px!important; color: #fff!important; text-align: center!important; letter-spacing: 10px; background-color: #fe9a8b!important; -webkit-transition: all 0.8s; transition: all 0.9s; opacity:1; box-shadow: 0px 2.5px 1px 2.0px rgba(0, 0, 0, 0.30), -1px -6px 7px 0px rgba(0, 0, 0, 0.28) inset; position: relative; overflow: hidden; } @media screen and (max-width: 780px) { .pagination-next-link { width: 300px!important; margin-left: auto; margin-right: auto; line-height: 20px!important; font-size: 20px!important; letter-spacing: 8px; padding: 10px 10px 10px 18px; } } .pagination-next-link:hover { color: #fa6b6b!important; background-color: #ffd3cc!important; border-radius: 40px!important; transition: all 0.6s ease; box-shadow:none!important; } .pagination-next-link:before { animation: shine 3s ease-in-out infinite; background-color: #fff; content: " "; height: 100%; left: 0; opacity: 0; position: absolute; top: -180px; transform: rotate(45deg); width: 30px; } /************************************ ** ●ページ送りボタン／戻りボタンのカスタマイズ ************************************/ .page-numbers { background-color: #fe9a8b; border: solid 2px #ffd3cc; border-radius: 24px; font-family: sans-serif; font-size: 15px; text-align: center!important; font-style: normal; color: #fff; font-weight: bold; line-height: 42px; box-shadow: 0px 3.0px 1px 0.5px rgba(0, 0, 0, 0.30), -1px -6px 7px 0px rgba(0, 0, 0, 0.28) inset; transition: all 0.6s ease; -webkit-transition: all 0.8s; transition: all 0.9s; opacity:1; font-family: Lato,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,sans-serif; } @media screen and (max-width: 1030px) { .page-numbers { font-size: 18px; line-height: 30px!important; } } .pagination a.page-numbers:hover { background-color: #ffd3cc!important; color: #fa6b6b!important; transition: all 0.6s ease; box-shadow:none; } .pagination .current { background-color: #ffd3cc; border: solid 2px #ffd3cc; border-radius: 24px; font-family: sans-serif; font-size: 15px; font-style: normal; color: #fa6b6b; font-weight: bold; box-shadow: none; font-family: Lato,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,sans-serif; } .page-numbers.dots { background-color: transparent; border: none; color: #fe9a8b; font-size: 28px; font-weight: 900; font-style: normal; box-shadow: none; opacity: 1.0; } @media screen and (max-width: 1030px) { .page-numbers.dots { line-height: 10px!important; } } /************************************ ** ●サイドバータイトル（見出し）カスタマイズ ************************************/ .sidebar .ad-label, #sidebar-menu-content h3, #sidebar h3{ position: relative; color: #fff; background:linear-gradient(to top, #ffd3cc, #fe9a8b, #fe9a8b, #ffd3cc)!important; font-size: 20px; font-weight: 900; letter-spacing: 6px; text-align: center; margin: 10px 0px 20px 0px; padding: 15px 3px 11px 3px; border-radius: 40px 0; line-height: 82%; } .sidebar .ad-label::after, #sidebar-menu-content h3::after, #sidebar h3::after { position: absolute; bottom: 4px; left: 3.8em; content: ''; height: 5px; width: -webkit-calc(100% - 8.0em); width: calc(100% - 8.0em); background-color: #fff; border-radius: 4px; animation:blink 1.8s ease-in-out infinite alternate; } @keyframes blink{ 0% { opacity: 0.2; } 81% { opacity: 1; } 100% { opacity: 1; } } /************************************ ** ●サイドバータイトル スライドインボタン設定時カスタマイズ ************************************/ #sidebar-menu-content h3{ position: relative; color: #fff !important; background:linear-gradient(to top, #ffd3cc, #fe9a8b, #fe9a8b, #ffd3cc)!important; font-size: 20px !important; font-weight: 900; letter-spacing: 6px; text-align: center; margin: 10px 0px 20px 0px; padding: 15px 3px 11px 3px; border-radius: 40px 0; line-height: 82%; } #sidebar-menu-content h3::after { position: absolute; bottom: 4px !important; left: 3.4em !important; content: ''; height: 6px !important; width: -webkit-calc(100% - 7.0em) !important; width: calc(100% - 7.0em) !important; background-color: #fff !important; border-radius: 4px !important; animation:blink 1.8s ease-in-out infinite alternate; } /************************************ ** ■イメージ画像やアイコンを点滅させるカスタマイズ ************************************/ .blink_before, .widget-entry-cards.ranking-visible .card-thumb::before, #navi .fab.fa-twitter:before, #navi .fab.fa-instagram:before, #navi .fab.fa-youtube:before, #navi .fas.fa-camera-retro:before, #navi .fas.fa-rss:before { animation:blink 2.7s ease-in-out infinite alternate; } /************************************ ** ■イメージ画像やアイコンを点滅させるカスタマイズ(記事一覧) ************************************/ .entry-card-title::after { animation:blink 1.8s ease-in-out infinite alternate; } /************************************ ** ■イメージ画像やアイコンを点滅させるカスタマイズ(記事一覧ホバー時早い) ************************************/ .entry-card-wrap:hover .entry-card-title::after { background-color: #40c6ff; animation:blink 0.3s ease-in-out infinite alternate; } /************************************ ** ■記事一覧インデックス内のタイトルをキラッと光らせるカスタマイズ ************************************/ .entry-card-title { position: relative; overflow: hidden; } .entry-card-title:before { position: absolute; transform: rotate(45deg); animation: shine-title 4.8s ease-in-out infinite; background-color: #fffffa; content: " "; opacity: 0; top: -180px; left: 0; height: 100%; width: 30px; } /************************************ ** ■タイトルやボタンをキラッと光らせるカスタマイズ ************************************/ .main .ad-label, .sidebar h3, .reflection-img, .amazon-item-title.product-item-title a, .entry-card-title, .comment-btn.key-btn, .follow-button, .share-button { position: relative; overflow: hidden; } .main .ad-label:before, .sidebar h3:before, .reflection-img_before, .amazon-item-title.product-item-title a:before, .entry-card-title:before { position: absolute; transform: rotate(45deg); animation: shine-title 3.8s ease-in-out infinite; background-color: #fff; content: " "; opacity: 0; top: -180px; left: 0; height: 100%; width: 30px; } .comment-btn.key-btn:before, .follow-button:before, .share-button:before { position: absolute; transform: rotate(45deg); animation: shine-title 3.4s ease-in-out infinite; background-color: #fff; content: " "; opacity: 0; top: -180px; left: 0; height: 100%; width: 30px; } /************************************ ** ■ブログカード/関連記事/次の記事/前の記事 ホバー時に浮かすカスタマイズ ************************************/ .blogcard-wrap.external-blogcard-wrap.a-wrap.cf, .blogcard-wrap.internal-blogcard-wrap.a-wrap.cf { background-color: #fff; } .main .prev-post.a-wrap.cf, .main .next-post.a-wrap.cf, .main .blogcard, .main .related-entry-card-wrap.a-wrap.cf { transition-duration: 0.6s; } .main .prev-post.a-wrap.cf:hover, .main .next-post.a-wrap.cf:hover, .main .blogcard:hover, .related-entry-card-wrap.a-wrap.cf:hover { -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); box-shadow: 6px 6px 6px rgba(0,0,0,0.2)!important; background-color: #ffd9d9; transition-duration: 0.6s; } /************************************ ** ■サイドバー ピックアップ記事/人気記事 ホバー時に浮かすカスタマイズ ************************************/ .sidebar .popular-entry-card-link.a-wrap, .sidebar .blogcard { transition-duration: 0.6s; } .sidebar .popular-entry-card-link.a-wrap:hover, .sidebar .blogcard:hover { -webkit-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px); box-shadow: 4px 4px 4px rgba(0,0,0,0.2)!important; background-color: #ffd3cc; transition-duration: 0.6s; } /************************************ ** ●記事一覧（インデックス）のカスタマイズ ************************************/ .main { border:1px solid #fe9a8b!important; -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; -moz-box-shadow: 0 10px 8px -6px #8d8c8c; box-shadow: 0 10px 8px -6px #8d8c8c; } .home main, .archive main { margin-top: 0px; padding-top: 34px; } .entry-card-wrap { transition: all 0.6s ease; margin-bottom: 14px!important; background-color: white; border-radius: 4px; border:1px solid #fe9a8b; } .entry-card-thumb-image.card-thumb-image.wp-post-image { display: block; max-width: 100%; max-height: 202px; margin: 0 auto; border-radius: 6px; -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; -moz-box-shadow: 0 10px 8px -6px #8d8c8c; box-shadow: 3px 4px 7px 0px #8d8c8c; transition-duration: 0.6s; } .entry-card-wrap.a-wrap:hover .entry-card-thumb-image.card-thumb-image.wp-post-image { animation: gatagata 2.0s ease-in-out 1 forwards; } @keyframes gatagata { 0% { transform: skew(0deg, 0deg); } 5% { transform: skew(6deg, 6deg); } 10% { transform: skew(-5deg, -5deg); } 15% { transform: skew(4deg, 4deg); } 20% { transform: skew(-3deg, -3deg); } 25% { transform: skew(2deg, 2deg); } 30% { transform: skew(-1deg, -1deg); } 35% { transform: skew(0.8deg, 0.8deg); } 40% { transform: skew(-0.6deg, -0.6deg); } 45% { transform: skew(0.4deg, 0.4deg); } 50% { transform: skew(-0.2deg, -0.2deg); } 55% { transform: skew(0deg, 0deg); } } @media screen and (max-width: 480px) { .entry-card-thumb-image.card-thumb-image.wp-post-image { -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; -moz-box-shadow: 0 10px 8px -6px #8d8c8c; box-shadow: 0 10px 8px -6px #8d8c8c; } .entry-card-wrap.a-wrap:hover .entry-card-thumb-image.card-thumb-image.wp-post-image { -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; -moz-box-shadow: 0 10px 8px -6px #8d8c8c; box-shadow: 0 10px 8px -6px #8d8c8c; } } .entry-card-wrap:hover { box-shadow: 0px 0px 8px 4px rgba(254, 154, 139); text-decoration: none!important; background-color: #fe9a8b; } .entry-card-wrap:hover .entry-card-title { box-shadow: 0px 0px 6px 3px rgba(64, 198, 255); background: -webkit-repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 6px,#ffd3cc 6px, #ffd3cc 14px); background: repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 6px,#ffd3cc 6px, #ffd3cc 14px); color: #333; transition-duration: 0.6s; } .entry-card-wrap.a-wrap:hover { background-color: #ffe8ee; -webkit-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translate3D(0,-4px,0); text-shadow: 2px 1px 3px #aaa; transition-duration: 0.6s; } .entry-card-snippet.card-snippet.e-card-snippet { font-size: 14px; margin-bottom:18px; color: #333; font-weight: 600; line-height: 1.6; } @media screen and (min-width:1260px) { .list .entry-card-wrap.a-wrap:hover:before, .list .related-entry-card-wrap.a-wrap:hover:before { position: absolute; width: 210px; height: 28px; transform: translate(0,0); left: 12px; bottom: 8px; content: "Click here to read more!"; font-size: 100%; color: white; font-style: oblique; background-color: #f76c57; text-align: center; border-radius: 6px; } } .related-entry-card-wrap.a-wrap:hover:before, .entry-card-wrap.a-wrap:hover:before { animation:blink 2.0s ease-in-out infinite alternate!important; } /************************************ ** ■エントリー記事カード（インデックス）のタイトルのカスタマイズ ************************************/ .entry-card-title { position: relative; word-break: break-all; margin-top: 12px; margin-bottom: 10px; line-height: 1.2; background: -webkit-repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 3px,#ffd3cc 3px, #ffd3cc 7px); background: repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 3px,#ffd3cc 3px, #ffd3cc 7px); color:#333; font-size:16px; letter-spacing:1px; text-decoration:none; font-weight:bold; padding: 14px 4px 14px 24px; border-radius: 4px; border: 2px solid #fe9a8b; transition-duration: 0.6s; } .entry-card-title::after { position: absolute; top: 0.3em; left: 0.5em; content: ''; width: 8px; height: -webkit-calc(100% - 0.6em); height: calc(100% - 0.6em); background-color: #fe9a8b; border-radius: 4px; } .e-card-info{ color: #333; } @media screen and (max-width: 1030px){ .entry-card-title { font-size: 14px; margin-top: 9px; line-height: 1.4; } .post-date, .post-update, .post-comment-count { font-size: 12px!important; } } /************************************ ** ■関連記事のアイキャッチ画像カスタマイズ ************************************/ .related-entry-card-thumb-image.card-thumb-image.wp-post-image{ border-radius: 4px!important; box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3)!important; } /************************************ ** ■コンテンツ領域の上下間調整 ************************************/ .content { margin-top: 28px; margin-bottom: 28px; } /************************************ ** ■タグクラウド カスタマイズ ************************************/ .tagcloud { padding: 0px 2px 0px 2px; } .tagcloud a { text-decoration: none; color: #fff; font-size: 12px; font-weight:bold; display: inline-block; background-color: #fe9a8b; padding: 2px 6px 0px 6px; margin-right: 2px; margin-bottom: 2px; border-radius: 9px 3px; border: 0px; word-break: break-all; } .tagcloud a:hover { background: #ffddee; color: #f32469; transition: all 0.6s ease; } /************************************ ** ●関連記事見出しカスタマイズ ************************************/ .related-entry-heading{ padding: 0; margin: 0; font-size: medium; border-collapse: separate; border-spacing: 0; border-top: none; border-right: none; border-bottom: none; border-left: none; line-height: normal; position:relative; } .related-entry-heading{ position: relative; word-break: break-all; background: -webkit-repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 3px,#ffd3cc 3px, #ffd3cc 7px); background: repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 3px,#ffd3cc 3px, #ffd3cc 7px); font-size: 25px; letter-spacing: 2px; margin: -8px -8px 20px -8px; padding: 16px 4px 16px 32px; line-height: 25px; border-radius: 4px; border: 2px solid #fe9a8b; -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; -moz-box-shadow: 0 10px 8px -6px #8d8c8c; box-shadow: 0 10px 8px -6px #8d8c8c; text-shadow: 2px 1px 3px #aaa; } .related-entry-heading::after{ position: absolute; top: 0.3em; left: 0.5em; content: ''; width: 10px; height: -webkit-calc(100% - 0.5em); height: calc(100% - 0.5em); background-color: #fe9a8b; border-radius: 6px; animation:blink 1.8s ease-in-out infinite alternate; } .related-entry-heading{ position: relative; overflow: hidden; } .related-entry-heading:before { position: absolute; transform: rotate(45deg); animation: shine-title 4.8s ease-in-out infinite; background-color: #fffffa; content: " "; opacity: 0; top: -180px; left: 0; height: 100%; width: 30px; } /************************************ ** ●コメント見出しカスタマイズ ************************************/ .comment-title{ padding: 0; margin: 0; font-size: medium; border-collapse: separate; border-spacing: 0; border-top: none; border-right: none; border-bottom: none; border-left: none; line-height: normal; position:relative; } .comment-title{ position: relative; word-break: break-all; background: -webkit-repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 3px,#ffd3cc 3px, #ffd3cc 7px); background: repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 3px,#ffd3cc 3px, #ffd3cc 7px); font-size: 25px; letter-spacing: 2px; margin: -8px -8px 20px -8px; padding: 16px 4px 16px 32px; line-height: 25px; border-radius: 4px; border: 2px solid #fe9a8b; -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; -moz-box-shadow: 0 10px 8px -6px #8d8c8c; box-shadow: 0 10px 8px -6px #8d8c8c; text-shadow: 2px 1px 3px #aaa; } .comment-title::after{ position: absolute; top: 0.3em; left: 0.5em; content: ''; width: 10px; height: -webkit-calc(100% - 0.5em); height: calc(100% - 0.5em); background-color: #fe9a8b; border-radius: 6px; animation:blink 1.8s ease-in-out infinite alternate; } .comment-title{ position: relative; overflow: hidden; } .comment-title:before { position: absolute; transform: rotate(45deg); animation: shine-title 4.8s ease-in-out infinite; background-color: #fffffa; content: " "; opacity: 0; top: -180px; left: 0; height: 100%; width: 30px; } /************************************ ** ■次の記事／前の記事のフォント ************************************/ .prev-post.a-wrap.cf, .next-post.a-wrap.cf{ font-size: 16px; font-weight:bold; } @media screen and (max-width: 480px){ .prev-post.a-wrap.cf, .next-post.a-wrap.cf{ font-size: 12px; font-weight:bold; } } /************************************ ** ●コメントを送信ボタンのカスタマイズ ************************************/ #submit { border: solid 2px #ffd3cc!important; border-radius: 6px!important; font-weight:bold!important; font-size: 18px!important; color: #fff!important; background-color: #fe9a8b!important; letter-spacing: 4px!important; -webkit-transition: all 0.8s; transition: all 0.9s; opacity:1; box-shadow: 0px 2.5px 1px 2.0px rgba(0, 0, 0, 0.30), -1px -6px 7px 0px rgba(0, 0, 0, 0.28) inset; } #submit:hover{ color: #f32469!important; background-color: #fdf1f4!important; transition: all 0.8s ease!important; box-shadow: none; } /************************************ ** ●お問い合わせコメントを送信ボタンのカスタマイズ ************************************/ .wpcf7-submit { border: solid 2px #ffd3cc!important; border-radius: 6px!important; font-weight:bold!important; font-size: 18px!important; color: #fff!important; text-align: center!important; background-color: #fe9a8b!important; letter-spacing: 10px!important; -webkit-transition: all 0.8s; transition: all 0.9s; opacity:1; box-shadow: 0px 2.5px 1px 2.0px rgba(0, 0, 0, 0.30), -1px -6px 7px 0px rgba(0, 0, 0, 0.28) inset; } .wpcf7-submit:hover{ color: #f32469!important; background-color: #fdf1f4!important; transition: all 0.8s ease!important; box-shadow: none; } /************************************ ** ■エントリーカード メタディスクリプションカスタマイズ ************************************/ .entry-card-snippet.card-snippet.e-card-snippet { word-break: break-all; text-decoration: underline dotted #bbb; font-size: 13px; margin-bottom:18px; color: #333; font-weight: 600; line-height: 1.6; overflow: hidden; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } /************************************ ** ●リンクテキスト カスタマイズ ************************************/ a{ text-decoration: none; } .post a:hover { text-decoration: underline; } .share-button{ text-decoration: none!important; } .follow-button{ text-decoration: none!important; } .cat-link{ text-decoration: none!important; } .tag-link{ text-decoration: none!important; } .blogcard-wrap.external-blogcard-wrap.a-wrap.cf, .blogcard-wrap.internal-blogcard-wrap.a-wrap.cf { text-decoration: none!important; } /************************************ ** ■動画を中央に配置 ************************************/ .video-container { margin: 0px auto; } /************************************ ** ●サイドバータイトル スライドインボタン設定時（上書き） ************************************/ #sidebar-menu-content h3{ position: relative; color: #333; background: -webkit-repeating-linear-gradient(-45deg, #ffd3cc, #ffd3cc 3px,#fdf1f4 3px, #fdf1f4 7px); background: repeating-linear-gradient(-45deg, #ffd3cc, #ffd3cc 3px,#fdf1f4 3px, #fdf1f4 7px); font-size: 16px; font-weight: 900; letter-spacing: 6px; text-align: center; margin: 10px 0px 20px 0px; padding: 16px 3px 12px 3px; border-top: 3px solid #fdf1f4; border-bottom: 3px solid #fdf1f4; border-radius: 12px; line-height: 100%; } #sidebar-menu-content h3::after { position: absolute; bottom: 3px; left: 1.8em; content: ''; height: 5px; width: -webkit-calc(100% - 3.6em); width: calc(100% - 3.6em); background-color: #fe9a8b; border-radius: 4px; } /*--------------------------------- ボックス（白抜き）の枠の色を変える --------------------------------*/ .blank-box {border-color: #000;} .blank-box.bb-yellow {border-color: #cc980d;} .blank-box.bb-red {border-color: #fe9a8b;} .blank-box.bb-blue {border-color: #005f8c;} .blank-box.bb-green {border-color: #445920;} .blank-box.bb-tab.bb-red .bb-label { background-color: #fe9a8b;} .blank-box.bb-tab.bb-blue .bb-label { background-color: #005f8c;} .blank-box.bb-tab.bb-green .bb-label { background-color: #445920;} .blank-box.bb-tab.bb-yellow .bb-label { background-color: #cc980d;} .blank-box.bb-tab .bb-label { background-color: #000;} /************************************ ピンク線外枠ボックス ************************************/ .box3-pink { position: relative; max-width:750px; margin: 3em 1em; padding: 2.0em 1.5em 0.5em 2.0em; border: 1.5px solid #fe9a8b; border-radius: 4px; background: #f5fdff; } .box3-pink .box-title { position: absolute; top: -18px; left: 20px; border: dashed 2px #e3e3e3; border-radius: 3px; background: #ffeded; color: #474747; padding: 1px 10px; line-height: 1.8; font-size: 18px; font-weight: bold; } .box3-pink .box-title:after { position: absolute; content: ''; left: -6px; top: -6px; border-width: 0 0 15px 15px; border-style: solid; border-color: #fff #fff #ffd3cc; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); } .box3-pink p { margin: 0; padding: 0; } /************************************ ** ■記事を読む時間 カスタマイズ（設定：本文） ************************************/ .read-time { color:#474747; font-size: 14px; border-top: 4px double #ffd3cc; border-bottom: 4px double #ffd3cc; text-shadow: 2px 1px 3px #999; } /************************************ ** 上下比較リストボックス ************************************/ .compare-list-box * { margin: 0 !important; padding: 0 !important; } .compare-list-box { margin: 2em auto !important; padding: 4.5em 2em 1.8em !important; font-size: 16px !important; font-weight: 300 !important; background: #fdf1f4; border-radius: 4px; max-width: 600px; position: relative; box-shadow: 0 3px 5px rgba(0, 0, 0, .07); } .compare-list-box .compare-list-box-title { padding: 0.5em 0 !important; background: #fe9a8b; color: #fff; font-weight: 600; font-size: 1em; text-align: center; border-radius: 4px 4px 0px 0px; position: absolute; bottom: calc(100% + -40px); left: 0; width: 100%; } .compare-list { position: relative; margin-left: 40px !important; } .compare-unit-top { position: absolute; top: 8px; right: calc(100% - -13px); font-size: 14px; font-weight: 400; color: #393f4c; width: 45px; text-align: right; } .compare-unit-bottom { position: absolute; bottom: 8px; right: calc(100% - -13px); font-size: 14px; font-weight: 400; color: #393f4c; width: 45px; text-align: right; } .compare-list ul,.compare-list ol { padding: 1em 0 1em 1.2em !important; position: relative; display: inline-block; vertical-align: middle; text-decoration: none; border-left: 2px solid #ffa883; list-style: none; border-top: none; border-right: none; border-bottom: none; } .compare-list ul li, .compare-list ol li { margin-bottom: 1.4em !important; padding: 0 0 0 1.5em !important; line-height: 1.4; position: relative; } .compare-list ul li:after, .compare-list ol li:after { content: unset !important; } .compare-list-box .compare-list ul li:before, .compare-list-box .compare-list ol li:before { content: ""; position: absolute; top: 10px; left: 8px; width: 3px; height: 3px; display: inline-block; background-color: #777 !important; border-radius: 50%; } .compare-list ul li:last-child, .compare-list ol li:last-child { margin-bottom: 0 !important; } .compare-list ul::before, .compare-list ul::after, .compare-list ol::before, .compare-list ol::after { margin: auto !important; position: absolute; left: -7px; content: ""; vertical-align: middle; } .compare-list ul::before, .compare-list ol::before { top: 0; width: 10px; height: 10px; border-top: 2px solid #ffa883; border-right: 2px solid #ffa883; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .compare-list ul::after, .compare-list ol::after { bottom: 0; width: 10px; height: 10px; border-top: 2px solid #ffa883; border-right: 2px solid #ffa883; -webkit-transform: rotate(135deg); transform: rotate(135deg); } /************************************ ** ブログカード ************************************/ .blogcard-snippet, .blogcard-footer { display: none; } .blogcard-wrap { transition: all .3s; max-width: 600px; margin: 1em auto; /* 修正: 2em → 1em（上下余白を詰める） */ } .blogcard { border:1px solid #eaeaea !important; box-shadow: 0 2px 5px rgba(0, 0, 0, .15); padding: 8px; /* 修正: 10px → 8px（内側余白を詰める） */ } .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: 6px 0 0 0; /* 修正: 10px → 6px（タイトル上余白を詰める） */ 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: #fe9a8b; 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: 4px; /* 修正: 6px → 4px（ボタン上余白を詰める） */ } @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; } } /************************************ ** ●ブログカード アイキャッチ画像カスタマイズ ************************************/ .blogcard .blogcard-thumbnail img { border-radius: 3px; box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); } /************************************ ** ■画像に影 ************************************/ .shadow1{ margin-top: 5px; display: inline-block; -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; -moz-box-shadow: 0 10px 8px -6px #8d8c8c; box-shadow: 8px 8px 6px 0px #a3a3a3, 0px 0px 0px 2px rgba(254, 149, 139); } /************************************ ** ■カルーセル カスタマイズ ************************************/ .carousel .carousel-entry-card .carousel-entry-card-title.card-title { font-size: 13px; font-weight:bold!important; word-break: break-all; } .carousel .carousel-entry-card .cat-label { color: #fff; border: none; display: none; } .carousel .carousel-in { margin-top: 0px; background-color: #ffedeb; } .carousel .carousel-entry-card-thumb.card-thumb img { border-radius: 8px; box-shadow: 4px 4px 7px 0px #999; } .carousel .carousel-entry-card-thumb.card-thumb:hover{ transform: rotate(360deg); transition-duration: 1.5s; background-color: #fe9a8b; border-radius: 8px; } .carousel-entry-card:hover { box-shadow: 0 0 10px rgba(250, 107, 107); transform: translateY(-2px); transition: all .3s ease; border-radius: 8px; background-color: #ffe0db; } .carousel .slick-track { padding: 0px 0; border: dotted 2px #fa6b6b; } #carousel .a-wrap{ margin:0; box-shadow:none; border:none; } .slick-next{ border-radius: 50%; background-color: #fa6b6b; border: none; width: 25px; height: 25px; opacity: 0.8; -webkit-transition: all 0.5s; transition: all 0.5s; color: #000!important; } .slick-next:hover{ border-radius: 50%; background-color: #fff; border: none; width: 25px; height: 25px; } .slick-prev{ border-radius: 50%; background-color: #fa6b6b; border: none; width: 25px; height: 25px; opacity: 0.8; -webkit-transition: all 0.5s; transition: all 0.5s; } .slick-prev:hover{ border-radius: 50%; background-color: #fff; border: none; width: 25px; height: 25px; } .carousel .slick-arrow:before { color: #333; font-size: 26px; } .slick-dots li.slick-active button:before, .slick-dots li button:before { color: #333; } /************************************ ** ■メインエリア 広告ラベル 見出しのカスタマイズ ************************************/ #main .ad-label { margin-top:20px; margin-bottom: 10px; position: relative; background:linear-gradient(160deg, #fe9a8b, #ffd3cc, #fdf1f4); padding: 2px 10px 2px 22px; color: #fff; text-align: left; border-radius: 4px; } #main .ad-label::after { position: absolute; top: 0.4em; left: 0.6em; content: ''; width: 6px; height: -webkit-calc(100% - 0.8em); height: calc(100% - 0.8em); background-color: #fff; border-radius: 6px; animation:blink 1.8s ease-in-out infinite alternate; } /************************************ ** ●全画像のホバー時エフェクト処理 ************************************/ a:hover img{ opacity: 0.6; transition: all 0.8s ease; } /************************************ ** ■カテゴリー／アーカイブ見出しカスタマイズ ************************************/ #archive-title{ padding: 0; margin: 0; font-size: medium; border-collapse: separate; border-spacing: 0; border-top: none; border-right: none; border-bottom: none; border-left: none; line-height: normal; position:relative; } #archive-title{ position: relative; word-break: break-all; background: -webkit-repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 3px,#ffd3cc 3px, #ffd3cc 7px); background: repeating-linear-gradient(-45deg, #fdf1f4, #fdf1f4 3px,#ffd3cc 3px, #ffd3cc 7px); font-size: 26px; color: #000; letter-spacing: 2px; margin: -8px -8px 20px -8px; padding: 16px 4px 16px 32px; line-height: 25px; border-radius: 4px; border: 2px solid #fe9a8b; -webkit-box-shadow: 0 10px 8px -6px #8d8c8c; -moz-box-shadow: 0 10px 8px -6px #8d8c8c; box-shadow: 0 10px 8px -6px #8d8c8c; text-shadow:1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff; } #archive-title::after{ position: absolute; top: 0.3em; left: 0.4em; content: ''; width: 10px; height: -webkit-calc(100% - 0.5em); height: calc(100% - 0.5em); background-color: #fe9a8b; border-radius: 6px; animation:blink 1.8s ease-in-out infinite alternate; } #archive-title{ position: relative; overflow: hidden; } #archive-title:before { position: absolute; transform: rotate(45deg); animation: shine-title 4.8s ease-in-out infinite; background-color: #fffffa; content: " "; opacity: 0; top: -180px; left: 0; height: 100%; width: 30px; } /************************************ ** ●カテゴリーラベルのカスタマイズ ************************************/ .cat-link{ text-decoration: none; color: #fff; font-size: 12px; background-color: #fe9a8b; display: inline-block; margin-right: 5px; padding: 2px 6px 0px 6px; border-radius: 9px 3px; border: 0px; word-break: break-all; } .cat-link:hover{ transition: all 0.8s ease; opacity: 0.6; color: #333; background-color: #ff5959; } /************************************ ** ●タグラベルのカスタマイズ ************************************/ .tag-link{ text-decoration: none; color: #333; font-size: 12px; background-color: #fe9a8b; display: inline-block; margin-right: 5px; padding: 2px 6px 0px 6px; border-radius: 9px 3px; border: 0px; word-break: break-all; } .tag-link:hover{ transition: all 0.8s ease; opacity: 0.6; color: #fff; background-color: #fe9a8b; } .entry-card .cat-label, .related-entry-card .cat-label{ display: none; } /************************************ ** ■投稿画面 カテゴリ表示位置調整 ************************************/ #main .entry-categories-tags.ctdt-category-only .entry-categories { margin:0 10px 18px 2px; } /************************************ ** ■メニュー／サイドバーのCLOSEボタンのカスタマイズ（常時表示対応） ************************************/ .menu-close-button { overflow: visible!important; position: sticky!important; z-index: 99999!important; top: 20px; background: rgba(255,238,247,0.8); width: 91%; transform: scale(1.2); } .menu-content .menu-drawer { padding:30px 1em 30px; } .menu-content .fas.fa-times { padding-left: 30px; } /************************************ ** ■アーカイブBOX検索 ************************************/ #sidebar select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #ffedeb; outline: none; border: 2px solid #fe9a8b; border-radius: 10px!important; padding: 9px 21px; font-size: 16px; color: #333; box-shadow: 3px 3px 5px 0px #999; } #sidebar select::-ms-expand { display: none; } #sidebar .widget_archive { position: relative; } #sidebar .widget_archive::after { font-family: "Font Awesome 5 Free"; content: '\f56b'; font-weight: 1000; position: absolute; bottom: 4px; right: 12px; color: #fe9a8b; } #sidebar .widget_archive :hover { background: #ffe0db; } /************************************ ** ■ヘッダーメニュースマホスライド ************************************/ #header-container #navi a:hover{ color:#333; } @media screen and (max-width: 1030px){ #header-container .menu-mobile{ display:none; } .navi-in > .menu-mobile{ display:-webkit-box; display:-ms-flexbox; display:flex; overflow-x: scroll; white-space: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #header-container #navi a{ font-size:0.8em; padding: 1em 1.2em; } #header-container .navi-in > ul > .menu-item-has-children > a::after{ display:none; } #navi .navi-in > .menu-mobile li { height: auto; line-height: 1.8; } .mblt-header-mobile-buttons { margin-top: 53px; } } /************************************ ** ■ウィジェット [C]人気記事の下マージン調整（重複定義） ************************************/ .widget.widget-sidebar.widget-sidebar-standard.widget_popular_entries { margin-bottom: -18px!important; } /* * TOPに戻るボタン * ******************/ .go-to-top .go-to-top-button { background: transparent; font-size: 25pt; } @media screen and (min-width: 769px) { .go-to-top { right: 10px; bottom: 10px; } .go-to-top-button { width: 90px; height: auto; } .go-to-top-button img:hover { visibility: hidden; } .go-to-top-button:hover { background: url(https://magickitchen.blog/wp-content/uploads/2021/10/TOPへ1.png) no-repeat; background-size: 90px; padding: -5px 10px 60px 10px; } } /************************************ * スマホスライドインのカスタマイズ * ************************************/ .mobile-menu-buttons { background-color: #fff0; background: url(https://magickitchen.blog/wp-content/uploads/2021/10/スマホサイドバー背景1.jpg) repeat; border-top: 1px solid #ddd; } .mobile-menu-buttons .menu-button:hover { background-color: #fa6b6b; color: #000; } .top-menu-button a:hover, .home-menu-button a:hover { color: #000; } .navi-menu-icon, .navi-menu-caption { color: #fff0; } .navi-menu-button { background: url(https://magickitchen.blog/wp-content/uploads/2021/10/メニュー1.png) no-repeat; background-size: contain; background-position: 50%; margin: 1px 0; } .home-menu-icon, .home-menu-caption { color: #fff0; } .home-menu-button { background: url(https://magickitchen.blog/wp-content/uploads/2021/10/ホーム.png) no-repeat; background-size: contain; background-position: 50%; margin: 1px 0; } .search-menu-icon, .search-menu-caption { color: #fff0; } .search-menu-button { background: url(https://magickitchen.blog/wp-content/uploads/2021/10/サーチ.png) no-repeat; background-size: contain; background-position: 50%; margin: 1px 0; } .sidebar-menu-icon, .sidebar-menu-caption { color: #fff0; } .sidebar-menu-button { background: url(https://magickitchen.blog/wp-content/uploads/2021/10/サイドバー.png) no-repeat; background-size: contain; background-position: 50%; margin: 1px 0; } .top-menu-icon, .top-menu-caption { color: #fff0; } .top-menu-button { background: url(https://magickitchen.blog/wp-content/uploads/2021/10/TOPへ1.png) no-repeat; background-size: contain; background-position: 50%; margin: 1px 0; } .navi-menu-button, .home-menu-button, .search-menu-button, .top-menu-button, .sidebar-menu-button { position: relative; } .navi-menu-button .navi-menu-caption, .home-menu-button .home-menu-caption, .search-menu-button .search-menu-caption, .top-menu-button .top-menu-caption, .mobile-menu-buttons .sidebar-menu-caption { display: none; } .navi-menu-icon::after, .home-menu-icon::after, .search-menu-icon::after, .top-menu-icon::after, .sidebar-menu-icon::after { font-size: 12px; position: absolute; top: 2em; left: 0; right: 0; color: #40c6ff; font-weight: bold; } .navi-menu-icon::after { content: 'メニュー'; } .home-menu-icon::after { content: 'ホーム'; } .search-menu-icon::after { content: 'サーチ'; } .top-menu-icon::after { content: 'トップ'; } .sidebar-menu-icon::after { content: 'サイドバー'; } .navi-menu-button { position: relative; } .navi-menu-button .navi-menu-caption { display: none; } .navi-menu-icon::after { content: 'メニュー'; font-size: 12px; position: absolute; top: 2.8em; left: 0; right: 0; } .home-menu-button { position: relative; } .home-menu-button .home-menu-caption { display: none; } .home-menu-icon::after { content: 'ホーム'; font-size: 12px; position: absolute; top: 2.8em; left: 0; right: 0; } .search-menu-button { position: relative; } .search-menu-button .search-menu-caption { display: none; } .search-menu-icon::after { content: 'サーチ'; font-size: 12px; position: absolute; top: 2.8em; left: 0; right: 0; } .top-menu-button { position: relative; } .top-menu-button .top-menu-caption { display: none; } .top-menu-icon::after { content: '上に行く↑'; font-size: 12px; position: absolute; top: 2.8em; left: 0; right: 0; } .sidebar-menu-button { position: relative; } .mobile-menu-buttons .sidebar-menu-caption { display: none; } .sidebar-menu-icon::after { content: 'サイドバー'; font-size: 12px; position: absolute; top: 2.8em; left: 0; right: 0; } /************************************ ** ■モバイル端末時のメニュー カスタマイズ ************************************/ #navi-menu-content { background-color: #fe9a8b; } #navi-menu-content .menu-drawer ol, #navi-menu-content .menu-drawer ul { margin: 0.2em 0; } #navi-menu-content .menu-drawer a { font-weight:bold!important; } #navi-menu-content .sub-menu a { font-weight:600!important; } #navi-menu-content .menu-item-4314 { display:none!important; } /************************************ ** ■コメントのラベルカスタマイズ ************************************/ .comment-respond .comment-form-comment label::before { font-family: "Font Awesome 5 Free"; content: "\f5ad"; color: #fa6b6b; font-size: 20px; font-weight: 900; } .comment-respond .comment-form-author label::before{ font-family: "Font Awesome 5 Free"; content: "\f5ad"; color: #fa6b6b; font-size: 20px; font-weight: 900; } .comment-respond .comment-form-email label::before { font-family: "Font Awesome 5 Free"; content: "\f5ad"; color: #fa6b6b; font-size: 20px; font-weight: 900; } .comment-respond .comment-form-url::before { font-family: "Font Awesome 5 Free"; content: "\f5ad"; color: #fa6b6b; font-size: 20px; font-weight: 900; } .comment-respond { border: 2px solid #fe9a8b; margin-top: -2px; } .comment-respond p { margin: 1em 0; } #commentform { padding: 20px; } p.comment-notes { font-size: 14px; } p.form-submit { margin: 2em 0 1em 0; } #commentform input[type="text"], #commentform textarea { background-color: #e2e2e2; width: 100%; height: 100%; padding: 10px; border-radius: 4px; border: 2px solid #fe9a8b; box-shadow: none; } #commentform textarea:focus, #commentform input:focus{ outline: none; background: #ffffff; font-size: 17px; border: 2px dashed #fe9a8b; } /************************************ ** ■お問い合わせラベルカスタマイズ ************************************/ .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="select-contact"], .wpcf7 input[type="text"], .wpcf7 textarea { background-color: #e2e2e2; width: 100%; height: 100%; padding: 10px; border-radius: 4px; border: 2px solid #fe9a8b; box-shadow: none; display: flex; align-items: center; } .wpcf7 textarea:focus, .wpcf7 input:focus{ outline: none; background: #ffffff; font-size: 17px; border: 2px dashed #fe9a8b; } /************************************ ** ■サイト内検索BOX ************************************/ .search-edit, input[type="text"] { border: 2px solid #fe9a8b; border-radius: 50px; outline: none; box-shadow: 3px 3px 5px 1px #999; } [type=submit].search-submit { top: 0; right: 0; height: 100%; padding: 8px 20px; background: #fe9a8b; color: #fff; font-size: 16px; font-weight: bold; border: none; border-radius: 0 50px 50px 0; } [type=submit].search-submit:hover { color: #fff; background: #fff; } .search-edit::placeholder { color: #fa6b6b; letter-spacing: 2px; } .search-box .fa-search { color: #875d5b; font-size:22px; } .comment-form-url, .comment-notes { display: none; } /************************************ ** ■コメントを書き込むの強調 ************************************/ .comment-btn.key-btn { border: solid 2px #fe9a8b!important; border-radius: 6px!important; font-weight:bold!important; font-size: 18px!important; color: #fff!important; background: linear-gradient(#ffd3cc 0%, #fa6b6b 100%); text-shadow: 2.5px 1.0px 0.5px rgba(0, 0, 0, 0.30); box-shadow: 0px 2px 1px 2px rgba(0, 0, 0, 0.30), -1px -6px 7px 0px rgba(0, 0, 0, 0.28) inset; letter-spacing: 4px!important; -webkit-transition: all 0.8s; transition: all 0.9s; opacity:1; } .comment-btn.key-btn:hover{ color: #f32469!important; border: none!important; background-color: #fdf1f4!important; text-shadow: 2.5px 1.0px 1.0px rgba(255, 255, 255, 0.66); transition: all 0.8s ease!important; box-shadow: none; } /*スクロール追従バー（目次の設定）*/ @media print, (max-width: 991px) { #side-scroll .toc_widget { display: none; } } .toc_widget { position: relative; padding: 10px; border: 1px solid #ddd; color: #333; background: #fff; } .toc_widget:before { content: '目次'; font-size: 1.2em; position: absolute; left: 17px; } .toc_widget>ul.toc_list { margin: 25px 0; overflow-y: auto; } #side-scroll li a { display: block; } #side-scroll li a:hover { background-color: #e6f2ff; } #side-scroll li a.current { background-color: #e6f2ff !important; } /***************************** ** ■目次カスタマイズ *****************************/ .toc { border: 2px solid #fe9a8b!important; font-size: 14px; line-height: 1.5; padding: 0.5em 1.5em 1.2em 1.5em; margin-top: 3em; margin-bottom: 4em; border-radius: 6px; background: #fff9fc; } @media screen and (max-width: 1030px){ .toc { padding: 0.4em 1em 1em 1em; text-align: left!important; } } .toc-title { background: #fe9a8b; border-radius: 18px; margin-top: 0.8em; margin-bottom: 0.4em; color: #fff; font-size: 16px; text-align: center; padding: 2px 0; font-weight: bold; font-style: oblique; } .toc-title:hover { background: #fdf1f4; color: #fe9a8b; transition: all 0.8s ease; } .toc-title::before { font-family: "Font Awesome 5 Free"; content: '\f0cb'; margin-right: 0.3em; font-size: 18px; font-weight: 900; font-style: normal; } .toc-content li a:hover { text-decoration:none; background: #ffd3cc; transition: all 0.8s ease; } .toc ul.toc-list>li>a, .toc ol.toc-list>li>a { display: block; border-bottom: 1px dotted #fe619a; font-weight: bold; margin-left: -20px; padding-left: 20px; margin-right: -15px; padding-right: 15px; } .article .toc-list li { font-weight: 700; } .article .toc-list > li li { list-style: none; font-weight: 500; } .toc-list > li li::before { display: inline-block; position: relative; font-family: "Font Awesome 5 Free"; content: '\f152'; font-weight: 700; left: -8px; } .toc-list > li li li::before { display: inline-block; position: relative; font-family: "Font Awesome 5 Free"; content: '\f152'; font-weight: 500; left: -4px; } .toc-list > li li li li::before { display: inline-block; position: relative; font-family: "Font Awesome 5 Free"; content: '\f0da'; font-weight: 700; left: -4px; } .toc-list > li li li li li::before { display: inline-block; position: relative; font-family: "Font Awesome 5 Free"; content: '\f105'; font-weight: 700; left: -4px; } /************************************ ** サイドバー追尾目次 ************************************/ #sidebar-scroll { top:15px !important; } .sidebar h3{ font-size:0.9em; padding: 15px 12px; } .sidebar .widget_toc{ box-shadow: 0 2px 10px rgba(0, 0, 0, .08); } .sidebar .toc-widget-box{ margin-top: -0.9em; } .sidebar .toc{ padding: 0; width:100%; } .sidebar .toc-content { overflow-y: scroll; max-height: 510px; background: #fff; padding: 0.5em 1.5em; } .sidebar .toc li{ line-height:1.6; margin-bottom: 1em; font-size:0.85rem; color:#000; } .sidebar .toc-content > ol > li,.sidebar .toc-content > ul > li{ font-weight:1000; } .sidebar .toc-content a{ letter-spacing:0.5px; } .sidebar .toc .toc-list ul, .sidebar .toc .toc-list ol { margin: 1em 0; list-style-type:none; font-weight:500; } /* ----------------------------------------- 目次上に読んでる項目をマーク ------------------------------------------*/ #toc-2{ width:95%; } li.current { position: relative; padding-left: 1.2em; line-height: 1.4; background-color: #F8F8FF !important; } li.current:before { font-family: "FontAwesome"; content: "\f0a4"!important; position: absolute; font-size: 1.1em; left: 0; top: 0; color: #36a1ff; } a.current { background-color: #ffd3cc !important; } /* ----------------------------------------- フッターカスタマイズ ------------------------------------------*/ .footer { margin-top: 10px; border-top: 4px solid #fa6b6b; border-bottom: 4px solid #ffd3cc; } .footer-bottom { margin-top: 20px; } .footer-bottom-logo { float: none; bottom: 10px; position: left; margin-bottom: 30px; } .footer-bottom-logo .logo-image { padding: 0px; max-width: 300px; margin: 0px auto; } .footer-bottom-content { float: none; text-align: center; } .navi-footer-in > .menu-footer { justify-content: center; margin-bottom: 1em; } .copyright { color: #000; } #navi-footer li { border: none; } @media screen and (max-width: 460px) { .navi-footer-in > .menu-footer li.menu-item { width: 100%; display: block; flex: auto; padding: 0.3em 0; } .footer-bottom { margin-top: 0px; } } /************************************ ** ●ヘッダーメニュー幅調整 ************************************/ #menu-item-462 { width: 95px!important; } #menu-item-4310, #menu-item-4311, #menu-item-4312, #menu-item-4313 , #menu-item-4315 { width: 38px!important; } #menu-item-4314 { pointer-events: none; cursor: default; text-decoration:none; width: 20px!important; } #menu-item-4310 .caption-wrap, #menu-item-4311 .caption-wrap, #menu-item-4312 .caption-wrap, #menu-item-4313 .caption-wrap, #menu-item-4314 .caption-wrap, #menu-item-4315 .caption-wrap { font-weight: 500; font-size: 18px; } /************************************ ** ■ヘッダーメニュー背景のカスタマイズ ************************************/ .navi.cf{ background:linear-gradient(to top, #ffd3cc, #fa6b6b, #ffd3cc)!important; height: 40px; text-align: center; } @media screen and (max-width: 480px) { .navi.cf{ height: 44px; } } /************************************ ** ●ヘッダーサブメニューのカスタマイズ ************************************/ .sub-menu { background-color: #fe9a8b!important; text-align: center!important; } .navi-in>ul .sub-menu li { border-bottom: 2px groove #ffddee!important; height: 44px; } @media screen and (max-width: 480px) { .sub-menu { text-align: left!important; } } /************************************ ** ■ヘッダーメニュー ホバーエフェクト化のカスタマイズ ************************************/ #navi .navi-in a { position: relative; } #navi .navi-in a::after { position: absolute; color: rgba(255, 221, 238); bottom: -2px; left: 0; display: block; content: ""; width: 100%; height: 5px; background: #fa6b6b; transform: scaleX(0); transition: transform 0.4s; } #navi .navi-in a:hover::after { transform: scaleX(1); transition: transform 0.3s; } /************************************ ** ●キャッチフレーズ位置調整 ************************************/ .tagline { margin-bottom: -8px; } /************************************ **　吹き出し ************************************/ .sbp-l { margin: 4em 3em 5em 0; } div.sbs-think.sbp-l { margin: 4em 2em 5em 0; } .speech-person { width: 16%; min-width: 16%; min-width:5em; min-height:5em; margin-right:1em; margin-left:2em; } .speech-icon-image { box-shadow:none!important; } .sbis-cn .speech-icon-image { margin-left:.5em; } div.speech-balloon { background:#edfcf3; border: 2px solid #ffeded; border-radius: 10px; margin-left: 2em!important; padding:1em; } div.sbs-think.sbp-l .speech-balloon { margin-right: 1em; } div.speech-balloon::before { border-right: 14px solid #ffeded; } div.speech-balloon::after { border-right: 20px solid #edfcf3; } div.sbs-think .speech-balloon::before { border: 2px solid #ffeded; background:#edfcf3; width: 15px; height: 15px; } div.sbs-think .speech-balloon::after { background:#edfcf3; border: 2px solid #ffeded; width:8px; height: 8px; } @media screen and (max-width: 480px){ .speech-person { margin-right:0; margin-left:0; } .sbp-l { margin: 3em 0 4em; } div.sbs-think.sbp-l { margin: 3em 0 4em; } div.speech-balloon::before { left:-10px!important; } div.sbs-think.sbp-l .speech-balloon { margin-right: 0; } div.sbs-think .speech-balloon::before { width: 10px!important; height: 10px!important; left:-22px!important; } div.sbs-think .speech-balloon::after { width: 2px!important; height: 2px!important; left:-30px!important; } } .logo{ animation-name:fdin; animation-duration:2s; } @keyframes fdin{ from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } } /************************************ **　引用タグカスタマイズ ************************************/ blockquote { position: relative; padding: 0px 10px 5px 40px; box-sizing: border-box; font-style: normal; color: #464646; background: #fff5f5; border-top: solid 2px #ff9d9d; border-bottom: solid 2px #ff9d9d; } blockquote:before{ display: inline-block; position: absolute; top: 0; left: 0; width: 32px; height: 30px; text-align: center; content: "\f10d"; font-family: "Font Awesome 5 Free"; color: #FFF; font-size: 18px; line-height: 30px; background: #ff9d9d; font-weight: 900; } blockquote:after{ position:absolute; content:'"'; font-size: 60px; color:#ff9d9d; right:10px; bottom:1px; } blockquote p { position: relative; padding: 0; margin: 10px 0; z-index: 3; line-height: 1.7; } blockquote cite { display: block; text-align: right; color: #888888; font-size: 0.9em; } /************************************ ** アイコンつきリスト（ポンひろ） ************************************/ .iconbox{ margin: 0 auto 2em; background: #fdf1f4; border-radius:6px; 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; top:0em; } .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; box-shadow: initial; border: none; padding: 0; } .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; box-shadow: initial; } .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; } } img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img { border: none; padding: 0; max-width: 97.5%; max-width: calc( 100% - 14px ); } /************************************ ** アイコンフキダシボックス(ピンク) ************************************/ .iconbox-pink{ background: #fdf1f1 !important; } .iconbox-pink .box-head-pink{ background: #f7bcbc !important; } .iconbox .list-number li:before { background: #f7bcbc !important; } .glow-yellow { background: linear-gradient(transparent 50%,rgba(255, 243, 82, 0.2) 50%,rgb(255, 243, 82) 76%,transparent); } .glow-red { background:linear-gradient(transparent 50%,rgb(234 97 142 / 20%) 50%,#ea618e 76%,transparent); } .glow-blue { background: linear-gradient(transparent 50%,rgba(127, 191, 255, 0.2) 50%,rgb(127, 191, 255) 76%,transparent); } .glow-pink { background: linear-gradient(transparent 50%,rgba(245, 178, 178, 0.2) 50%,rgb(245, 178, 178) 76%,transparent); } .glow-orange { background: linear-gradient(transparent 50%,rgba(255, 191, 127, 0.2) 50%,rgb(255, 191, 127) 76%,transparent); } .glow-mint { background: linear-gradient(transparent 50%,rgba(149, 229, 226, 0.2) 50%,rgb(149, 229, 226) 76%,transparent); } .glow-violet { background: linear-gradient(transparent 50%,rgba(209, 168, 249, 0.2) 50%,rgb(209, 168, 249) 76%,transparent); } /************************************ ** 自動アンダーライン ************************************/ .marker-move{ background-image: linear-gradient( 90deg,rgb(245, 178, 178) 90%,transparent ); background-repeat:no-repeat; background-size:200% 40%; background-position:0% bottom; animation: marker 3s ease 0s; } @keyframes marker{ 0%{ background-position:right -100% bottom; } 100%{ background-position:0% bottom; } } .marker-move2{ background-image: linear-gradient( 90deg,rgb(255, 243, 82) 90%,transparent ); background-repeat:no-repeat; background-size:200% 40%; background-position:0% bottom; animation: marker 3s ease 0s; } .marker-move3{ background-image: linear-gradient( 90deg,rgb(127, 191, 255) 90%,transparent ); background-repeat:no-repeat; background-size:200% 40%; background-position:0% bottom; animation: marker 3s ease 0s; } /************************************ ** スマホ追尾目次 ************************************/ #mobile-toc-widget-wrap .menu-trigger, #mobile-toc-widget-wrap .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; max-width: 960px; margin: 0 auto; width: 100%; } #mobile-toc-widget-wrap .menu-trigger { position: relative; width: 25px; height: 35px; } #mobile-toc-widget-wrap .menu-trigger span { position: absolute; left: 0; width: 100%; height: 3px; background-color: #fff; border-radius: 4px; } #mobile-toc-widget-wrap .menu-trigger span:nth-of-type(1) { top: 13px; } #mobile-toc-widget-wrap .menu-trigger span:nth-of-type(2) { top: 20px; } #mobile-toc-widget-wrap .menu-trigger span:nth-of-type(3) { top: 27px; } #mobile-toc-widget-wrap .menu-trigger.active { -webkit-transform: rotate(360deg); transform: rotate(360deg); } #mobile-toc-widget-wrap .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(20px) rotate(-45deg); transform: translateY(20px) rotate(-45deg); top:0; } #mobile-toc-widget-wrap .menu-trigger.active span:nth-of-type(2) { -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); } #mobile-toc-widget-wrap .menu-trigger.active span:nth-of-type(3) { opacity: 0; } #mobile-toc-widget-wrap{ position: fixed; bottom: 50px; right: 20px; margin: 0; padding: 0; z-index:5; counter-reset: mobile-toc; } #mobile-toc-widget-wrap label .mobile-toc-button { width: 58px; height: 58px; border-radius:50%; background: #fe9a8b; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16); transition: ease-out 0.3s; text-align:center; position:relative; z-index: 3; } #mobile-toc-widget-wrap label .mobile-toc-button .mobile-toc-button-title { color: #fff; font-size: 0.65em; letter-spacing: 0; position: absolute; bottom: 7px; left: 0; right: 0; margin: auto; } #mobile-toc-widget-wrap label:hover { background: #efefef; } #mobile-toc-widget-wrap input { display: none; } #mobile-toc-widget-wrap .mobile-toc-show { display:none; } #mobile-toc-widget-wrap input:checked ~ .mobile-toc-show { background:#fff; position: absolute; top: 0; left: 0; padding: 2.5em 1em; opacity:0.97; position:fixed; width:100%; height:100%; display:block; animation: 0.5s fade-in; -webkit-animation: 0.5s fade-in; overflow-y:scroll; } @-webkit-keyframes fadeIn { 0% {display: none;opacity: 0;} 1% {display: block;opacity: 0;} 100% {display: block;opacity: 0.93;} } @keyframes fade-in { 0% {display: none;opacity: 0;} 1% {display: block;opacity: 0;} 100% {display: block;opacity: 0.93;} } #mobile-toc-widget-wrap .widgettitle{ text-align: center; margin: 0 0 1em; color: #fa6b6b; font-size: 1.1em; letter-spacing:2px; font-weight:600; } #mobile-toc-widget-wrap .mobile-toc-show .toc{ border:none; margin: 0 !important; padding: 0 !important; } #mobile-toc-widget-wrap .toc .toc-list > li { list-style-type: none !important; position: relative; margin-left: 13px; margin-right: 25px; padding-left: 32px; margin-bottom: 15px; padding-bottom: 0px; font-size: 1.1em; line-height: 1.8; } #mobile-toc-widget-wrap .toc a { font-size: 0.8em; font-weight:600; } #mobile-toc-widget-wrap .toc-list{ padding:0 !important; } #mobile-toc-widget-wrap .toc-list > li:before{ counter-increment: mobile-toc; content: counter(mobile-toc); position: absolute; left: 15px; top: -1.5px; background: none; font-weight: bold; } #mobile-toc-widget-wrap .toc_widget_list > li ol { margin-top: 5px; padding-left: 20px; } #mobile-toc-widget-wrap .toc-list ol{ list-style:none; } #mobile-toc-widget-wrap .toc-list > li > ol > li a { position: relative; text-decoration: none !important; font-weight:500; } #mobile-toc-widget-wrap .toc-list > li ol li a:before { position: absolute; content: "・"; font-size: 1.4em; left: -20px; top: -10px; color: #f6a068; } /************************************ ** ■ブログカード ⊿ワンポイント表示追加 ************************************/ .main .blogcard { padding-right: 6px; padding-bottom: 6px; } .main .blogcard:after { margin-top: 0; border-top: solid 20px transparent; border-right: solid 20px #fe9a8b; } .main .blogcard-date { margin-right: 5%; } #sidebar .blogcard, #sidebar-menu-content .blogcard { padding-top: 3px!important; padding-right: 4px; padding-bottom: 4px; } #sidebar .blogcard:after, #sidebar-menu-content .blogcard:after { margin-top: 0; border-top: solid 12px transparent; border-right: solid 12px #fe9a8b; } .blogcard-footer { padding-top: 0; } .blogcard-post-date.internal-blogcard-post-date { display: none; } #sidebar .blogcard-footer.internal-blogcard-footer.cf, #sidebar .blogcard-footer.external-blogcard-footer.cf, #sidebar-menu-content .blogcard-footer.internal-blogcard-footer.cf, #sidebar-menu-content .blogcard-footer.external-blogcard-footer.cf { display: none; } .main .blogcard:after, #sidebar .blogcard:after, #sidebar-menu-content .blogcard:after { animation:blinking 1.2s ease-in infinite alternate!important; } @keyframes blinking { 0% { opacity: 0.1; } 81% { opacity: 1; } 100% { opacity: 1; } } /*ヘッダーロゴ（タイトル画像）*/ .site-name-text img{ transition: 0.8s; } .site-name-text:hover img{ opacity: 1; transition: 1.8s; -webkit-transform: rotateX(720deg); transform: rotateX(720deg); } /* ======================================== お手玉レク・メリットグリッド ======================================== */ .merit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 28px; } .merit-card { background: #FFF5F3; border: 1px solid #FFD3CC; border-radius: 8px; padding: 16px; transition: transform 0.2s, box-shadow 0.2s; } .merit-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(254,154,139,0.25); } .m-num { font-size: 26px; font-weight: 900; color: #FE9A8B; line-height: 1; margin-bottom: 8px; } .m-title { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 6px; } .m-desc { font-size: 13px; color: #666; line-height: 1.7; } @media (max-width: 600px) { .merit-grid { grid-template-columns: 1fr; } } /* ============================================= サイドバー目次（TOC）スクロール追従ハイライト ============================================= */ .widget_toc .toc-list a.toc-active { background-color: #fe9a8b; color: #fff !important; border-radius: 4px; padding: 2px 6px; font-weight: bold; } .widget_toc .toc-list a { transition: background-color 0.3s ease, color 0.3s ease; } .entry-content .toc-list a.toc-active { background-color: #fe9a8b; color: #fff !important; border-radius: 4px; padding: 2px 6px; font-weight: bold; } .entry-content .toc-list a { transition: background-color 0.3s ease, color 0.3s ease; }