@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"; /*Font Awesome 5に設定*/ 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; } } /*(スマホ)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 { 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"; /*Font Awesome 5に設定*/ content: "\f218"; /*アイコン*/ color: #fdf1f4; /*アイコンカラー#191919*/ 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; } } /************************************ ** 何でも追従機能 ************************************/ /* PC(タブレット) */ .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);/* 4列 */ flex-basis: calc(100%/4);/* 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 { /*アニメーション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);/* 2列 */ flex-basis: calc(100%/2);/* 2列 */ } /* スマホ */ @media screen and (max-width: 559px) { .p-nav ul li{ -ms-flex-preferred-size: calc(100%/2);/* 2列 */ flex-basis: calc(100%/2);/* 2列 */ } } /* fontawesome */ .p-nav ul li a i,.p-nav ul li a svg{ font-size: 40px;/* アイコン大きさ */ padding: 10px 0;/* アイコン余白 */ color: #fe9a8b;/* アイコン色 */ display:inline-block; } /* fontawesome(2番目) */ .p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{ color:#fe9a8b;/* アイコン色 */ } /* fontawesome(3番目) */ .p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{ color:#fe9a8b;/* アイコン色 */ } /* fontawesome(4番目) */ .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; /*1つの空白にまとめて表示。折り返し無し。*/ 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; /* ボックスの外側余白(上下:2em　左右:auto) */ padding: 2em 2em 1em; /* ボックスの内側余白(上:2em　左右:2em 下：1.7em) */ 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; /* 上から（-18px）移動*/ left: 20px; /* 左から(27px)移動 */ 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 { /*順位数表示のカスタマイズ*/ /*.widget-entry-cards.ranking-visible ::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; text-align: 0px 1px 1px 30px; 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 {/*1～3位のランキング数字のスタイル*/ 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; } @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; } } /************************************ ** ●ページ送りボタン／戻りボタンのカスタマイズ ************************************/ .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; /*背景色ffddee*/ border: solid 2px #ffd3cc; /*枠線fe619a*/ 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; /*高さ調整*/ } } /************************************ ** ●サイドバータイトル（見出し）／スライドイン時タイトル（見出し）／Googleアドセンス広告タイトル(見出し)　カスタマイズ ************************************/ .sidebar .ad-label, #sidebar-menu-content h3, #sidebar h3{ position: relative; /* color: #fff; /*フォントカラー*/ color: #fff; /*フォントカラー*/ background:linear-gradient(to top, #ffd3cc, #fe9a8b, #fe9a8b, #ffd3cc)!important; /* background: -webkit-repeating-linear-gradient(-45deg, #fe9a8b, #fe9a8b 3px,#ffd3cc 3px, #ffd3cc 7px); /*背景カラー*/ /* background: repeating-linear-gradient(-45deg, #fe9a8b, #fe9a8b 3px,#ffd3cc 3px, #ffd3cc 7px); /*背景カラー*/ font-size: 20px; /*フォントサイズ*/ font-weight: 900; /*文字強調*/ letter-spacing: 6px; /*文字間隔*/ text-align: center; /*文字位置中央 center*/ margin: 10px 0px 20px 0px; padding: 15px 3px 11px 3px; /* border-top-right-radius: 40px; /*右上角丸コーナー*/ /* border-top-left-radius: 40px; /*左上角丸コーナー*/ /* border-bottom-right-radius: 10px; /*右下角丸コーナー*/ /* border-bottom-left-radius: 10px; /*左下角丸コーナー*/ /* border-radius: 16px 60px/5px 16px 16px;*/ border-radius: 40px 0; line-height: 82%; /* border: 1px solid #ff75a7!important;*/ } .sidebar .ad-label::after, #sidebar-menu-content h3::after, #sidebar h3::after { position: absolute; bottom: 4px; left: 3.8em; content: ''; height: 5px; /*8*/ width: -webkit-calc(100% - 8.0em); width: calc(100% - 8.0em); /* background-color: fe9a8b;*/ background-color: #fff; border-radius: 4px; animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/ } @keyframes blink{ 0% { opacity: 0.2; } 81% { opacity: 1; } 100% { opacity: 1; } } /************************************ ** ●サイドバータイトル スライドインボタン設定時カスタマイズ ************************************/ #sidebar-menu-content h3{ position: relative; /* color: #fff; /*フォントカラー*/ color: #fff !important; /*フォントカラー*/ background:linear-gradient(to top, #ffd3cc, #fe9a8b, #fe9a8b, #ffd3cc)!important; /* background: -webkit-repeating-linear-gradient(-45deg, #fe9a8b, #fe9a8b 3px,#ffd3cc 3px, #ffd3cc 7px); /*背景カラー*/ /* background: repeating-linear-gradient(-45deg, #fe9a8b, #fe9a8b 3px,#ffd3cc 3px, #ffd3cc 7px); /*背景カラー*/ font-size: 20px !important; /*フォントサイズ*/ font-weight: 900; /*文字強調*/ letter-spacing: 6px; /*文字間隔*/ text-align: center; /*文字位置中央 center*/ margin: 10px 0px 20px 0px; padding: 15px 3px 11px 3px; /* border-top-right-radius: 40px; /*右上角丸コーナー*/ /* border-top-left-radius: 40px; /*左上角丸コーナー*/ /* border-bottom-right-radius: 10px; /*右下角丸コーナー*/ /* border-bottom-left-radius: 10px; /*左下角丸コーナー*/ /* border-radius: 16px 60px/5px 16px 16px;*/ border-radius: 40px 0; line-height: 82%; /* border: 1px solid #ff75a7!important;*/ } #sidebar-menu-content h3::after { position: absolute; bottom: 4px !important; left: 3.4em !important; content: ''; height: 6px !important; /*8*/ width: -webkit-calc(100% - 7.0em) !important; width: calc(100% - 7.0em) !important; /* background-color: fe9a8b;*/ background-color: #fff !important; border-radius: 4px !important; animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/ } @keyframes blink{ 0% { opacity: 0.2; } 81% { opacity: 1; } 100% { opacity: 1; } } /************************************ ** ■イメージ画像やアイコンを点滅させる点滅させるカスタマイズ ************************************/ .blink_before, /*HTMLのテキスト*/ .widget-entry-cards.ranking-visible .card-thumb::before,/*サイドバーのランキング番号*/ #navi .fab.fa-twitter:before, /*ヘッダーメニューのTwitterアイコン*/ #navi .fab.fa-instagram:before, /*ヘッダーメニューのInstagramアイコン*/ #navi .fab.fa-youtube:before, /*ヘッダーメニューのYoutubeアイコン*/ #navi .fas.fa-camera-retro:before, /*ヘッダーメニューのレトロカメラアイコン*/ #navi .fas.fa-rss:before { /*ヘッダーメニューのRSSアイコン*/ animation:blink 2.7s ease-in-out infinite alternate; /*点滅間隔3.6秒設定*/ } @keyframes blink{ 0% { opacity: 0.2; } 81% { opacity: 1; } 100% { opacity: 1; } } /************************************ ** ■イメージ画像やアイコンを点滅させる点滅させるカスタマイズ(記事一覧) ************************************/ .entry-card-title::after { /*エントリー記事カードのタイトル*/ animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/ } @keyframes blink { 0% { opacity: 0.2; } 81% { opacity: 1; } 100% { opacity: 1; } } /************************************ ** ■イメージ画像やアイコンを点滅させる点滅させるカスタマイズ(記事一覧ホバー時早い) ************************************/ .entry-card-wrap:hover .entry-card-title::after { /*エントリー記事カードのタイトル ホバー時*/ background-color: #40c6ff; animation:blink 0.3s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/ } @keyframes blink { 0% { opacity: 0.2; } 81% { opacity: 1; } 100% { opacity: 1; } } /************************************ ** ■記事一覧インデックス内のタイトルをキラッと光らせるカスタマイズ ************************************/ .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; } @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; } } /************************************ ** ■タイトルやボタンをキラッと光らせるカスタマイズ ************************************/ .main .ad-label, .sidebar h3, .reflection-img, /*カスタムHTMLのイメージ画像*/ .amazon-item-title.product-item-title a, /*商品アイテムボックスのタイトル*/ .entry-card-title, /*エントリーカードのタイトル*/ .comment-btn.key-btn, /*コメントを書き込むボタン*/ .follow-button, /*SNSフォローボタン*/ .share-button { /*SNSシェアボタン*/ position: relative; overflow: hidden; } .main .ad-label:before, .sidebar h3:before, .reflection-img_before, /*カスタムHTMLのイメージ画像*/ .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, /*SNSフォローボタン*/ .share-button:before { /*SNSシェアボタン*/ 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; } @keyframes shine-title { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } } /************************************ ** ■ブログカード/関連記事/次の記事/前の記事 ホバー時に浮かすカスタマイズ ************************************/ .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; /*アニメーション0.8*/ } .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 { /*アニメーション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; /*説明文と日付間の余白22px*/ color: #333; font-weight: 600; /*文字強調*/ line-height: 1.6; /*行間設定*/ } @media screen and (min-width:1260px) { /*PCのみ表示*/ .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; /*アニメーション点滅間隔2.0秒設定*/ } @keyframes blink { 0% { opacity: 0.2; } 81% { opacity: 1; } 100% { opacity: 1; } } /************************************ ** ■エントリー記事カード（インデックス）のタイトルのカスタマイズ ************************************/ .entry-card-title { /* display: block;*/ 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; } .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; } @keyframes shine-title { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } } /************************************ ** ■関連記事見出し見出しカスタマイズ点滅させるカスタマイズ ************************************/ .related-entry-heading::after { /*見出し2*/ animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/ } @keyframes blink{ 0% { opacity: 0.2; } 81% { opacity: 1; } 100% { opacity: 1; } } /************************************ ** ●コメント見出しカスタマイズ ************************************/ .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; } .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; } @keyframes shine-title { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } } /************************************ ** ■関連記事見出し見出しカスタマイズ点滅させるカスタマイズ ************************************/ .comment-title::after { /*見出し2*/ animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/ } @keyframes blink{ 0% { opacity: 0.2; } 81% { opacity: 1; } 100% { opacity: 1; } } /************************************ ** ■次の記事／前の記事のフォント ************************************/ .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; 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; /*文字位置中央 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%; /* border: 1px solid #ff75a7!important;*/ } #sidebar-menu-content h3::after { position: absolute; bottom: 3px; left: 1.8em; content: ''; height: 5px; /*8*/ 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; /* ボックスの外側余白(上下:2em　左右:auto) */ padding: 2.0em 1.5em 0.5em 2.0em; /* ボックスの内側余白(上下:1.7em　左右:2em) */ border: 1.5px solid #fe9a8b; /* ボックスの線 (太さ　線の種類　線の色)*/ border-radius: 4px; /* ボックスの角丸 */ background: #f5fdff; /* タイトル背景色 */ } .box3-pink .box-title { position: absolute; /* 配置に関するもの(ここを動かす) */ top: -18px; /* 上から（-10px）移動*/ left: 20px; /* 左から(30px)移動 */ 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: 2em auto; } .blogcard { border:1px solid #eaeaea !important; box-shadow: 0 2px 5px rgba(0, 0, 0, .15); padding: 10px; } .blogcard-wrap:hover { background: none; transform: translateY(-3px); box-shadow: 0px 10px 20px rgba(0, 0, 0, .1); } .blogcard-thumbnail { margin: 0; } .blogcard-thumbnail img { display: block; } .blogcard-title { color: #555; letter-spacing: 0.5px; font-size: 15px; line-height: 1.5; margin: 10px 0 0 0; height: 45px; overflow: hidden; } .blogcard-content { min-height: auto; margin-left: 185px; padding-right: 6px; } .blogcard-label { top: -11px; left: 9px; padding: 3px 0.6em; background:#aaa; padding: 1px 10px; font-weight: 600; font-size: 11px; letter-spacing: 1px; } .blogcard-content:after { content: "クリックして読む"; background: #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: 6px; } @media screen and (max-width: 834px) { .blogcard-content { margin-left: 130px; } .blogcard-title { font-size:12px; line-height: 1.5; height: 35px; margin:0; } .blogcard-content:after { content: "タップして読む"; } .blogcard-thumbnail{ width:120px; } } @media screen and (max-width: 560px) { .blogcard-content:after { width: 120px; font-size: 12px; } .blogcard-title { margin:0; } } @media screen and (max-width: 320px) { .blogcard-thumbnail { width: 100px; } .blogcard-content { margin-left: 110px; } .blogcard-title { height: 35px; } } /************************************ ** ●ブログカード アイキャッチ画像カスタマイズ ************************************/ .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; } /************************************ ** ■カテゴリー／アーカイブ見出しカスタマイズ点滅させるカスタマイズ ************************************/ #main .ad-label::after { /*見出し2*/ animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/ } @keyframes blink{ 0% { opacity: 0.2; } 81% { opacity: 1; } 100% { opacity: 1; } } /************************************ ** ●全画像のホバー時エフェクト処理 ************************************/ 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; } #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; } @keyframes shine-title { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } } /************************************ ** ■カテゴリー／アーカイブ見出しカスタマイズ点滅させるカスタマイズ ************************************/ #archive-title::after { /*見出し2*/ animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/ } @keyframes blink{ 0% { opacity: 0.2; } 81% { opacity: 1; } 100% { opacity: 1; } } /************************************ ** ●カテゴリーラベルのカスタマイズ ************************************/ .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; } /* * TOPに戻るボタン * ******************/ @media screen and (min-width: 769px) { .go-to-top { right: 10px; /* 右から10px */ bottom: 10px; /* 下から20px */ } .go-to-top-button { width: 90px; /* 横幅指定：120px以上にしたい場合は追記を例）max-width: 130px; */ height: auto; /* 画像の高さpx指定でもOK！ */ } .go-to-top-button img:hover { visibility: hidden; /* onマウスしたとき、元画像を表示しない */ } .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; /* 上にボーダーを入れたい場合：太さ スタイル 色 */ } /* ボタンhover時の文字・背景変更 */ .mobile-menu-buttons .menu-button:hover { background-color: #fa6b6b; /* 背景色 */ color: #000; /* 文字の色 */ } /* トップ・ホームの『文字』は構造上別途必要 */ .top-menu-button a:hover, /*トップに戻る画像を入れる場合はこの1行削除*/ .home-menu-button a:hover { color: #000; /* ここは同じ文字色を */ } /* メニューの文字・アイコンを透明に */ /*.mobile-menu-buttons .navi-menu-button > a,*/ .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; } /* ホームメニューの文字・アイコンを透明に */ /*.mobile-menu-buttons .home-menu-button > a,*/ .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; } /* サーチの文字・アイコンを透明に */ /*.mobile-menu-buttons .search-menu-button > a,*/ .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; } /* サイドバーの文字・アイコンを透明に */ /*.mobile-menu-buttons .sidebar-menu-button > a,*/ .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; } /* トップの文字・アイコンを透明に */ /*.mobile-menu-buttons .top-menu-button > a,*/ .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, /* トップに画像を入れる場合この1行は削除 */ .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, /* トップに画像を入れる場合この1行は削除 */ .mobile-menu-buttons .sidebar-menu-caption { display: none; } .navi-menu-icon::after, .home-menu-icon::after, .search-menu-icon::after, .top-menu-icon::after, /* トップに画像を入れる場合この1行は削除 */ .sidebar-menu-icon::after { font-size: 12px; position: absolute; top: 2.em; /* 高さの微調整 */ left: 0; right: 0; color: #40c6ff; /* 一括でフォント色を変えたい場合：不要ならこの1行削除 */ font-weight: bold; /* 一括で文字の太さを太く：不要ならこの1行削除 */ } /* メニューの文字列を変更 */ .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"; /*Font Awesome 5に設定*/ content: "\f5ad"; /*アイコン*/ color: #fa6b6b; /*アイコンカラー#191919*/ font-size: 20px; font-weight: 900; } .comment-respond .comment-form-author label::before{ /*名前ラベル変更*/ font-family: "Font Awesome 5 Free"; /*Font Awesome 5に設定*/ content: "\f5ad"; /*アイコン*/ color: #fa6b6b; /*アイコンカラー#191919*/ font-size: 20px; font-weight: 900; } .comment-respond .comment-form-email label::before { /*メールアドレスラベル変更*/ font-family: "Font Awesome 5 Free"; /*Font Awesome 5に設定*/ content: "\f5ad"; /*アイコン*/ color: #fa6b6b; /*アイコンカラー#191919*/ font-size: 20px; font-weight: 900; } .comment-respond .comment-form-url::before { /*サイトラベル変更*/ font-family: "Font Awesome 5 Free"; /*Font Awesome 5に設定*/ content: "\f5ad"; /*アイコン*/ color: #fa6b6b; /*アイコンカラー#191919*/ 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; /*h2のアンダーラインの太さとカラー*/ 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; /*H3以下目次ナンバー非表示*/ font-weight: 500; /*文字強調*/ } .toc-list > li li::before { /*H3の先頭・表示*/ display: inline-block; position: relative; font-family: "Font Awesome 5 Free"; content: '\f152'; /*目次タイトルのアイコン指定*/ font-weight: 700; /*アイコンの太さ*/ left: -8px; /*位置調整*/ } .toc-list > li li li::before { /*H4の先頭・表示*/ 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 { /*H5の先頭・表示*/ 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 { /*H6の先頭・表示*/ 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 { /*モバイルでメニューを1カラムにする*/ width: 100%; display: block; flex: auto; padding: 0.3em 0; } .footer-bottom { margin-top: 0px; /*フッター内上部の余白を詰める*/ } } /************************************ ** ●ヘッダーメニュー幅調整 ************************************/ #menu-item-462 { /*HOMEメニュー幅変更*/ width: 95px!important; } #menu-item-4310, #menu-item-4311, #menu-item-4312, #menu-item-4313 , #menu-item-4315 { /*SNSアイコンメニュー幅変更*/ 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{ /* border-top: 2px solid #fe9a8b;*/ /*ヘッダーとメニューの間にボーダーラインを入れる場合*/ 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: -10; left: 0; width: 32px; height: 30px; text-align: center; content: "\f10d"; font-family: "Font Awesome 5 Free"; /*Font Awesome 5に設定*/ 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: none; /*枠線削除*/ } } /* アイコン画像 (amp)*/ .iconballoon amp-img{ max-width: 120px !important; /* 横幅 */ margin:0; /* 余白 */ } /* 吹き出し文字 */ .iconballoon .balloon p{ line-height:1.4; /* 行間 */ } /* 吹き出し */ .iconballoon .balloon{ position:relative; /* 配置 */ width:140px; /* 横幅 */ background:#fff; /* 背景色 */ padding:10px; /* 余白 */ text-align:center; /* 中央寄せ */ border:2px solid #999;/* 線(太さ 種類　色) */ color:#555555;/* 文字色 */ font-size:14px;/* 文字サイズ */ font-weight:bold;/* 文字太さ */ border-radius:10px;/* 角丸 */ margin-bottom:10px;/* 余白 */ line-height:1.5; /* 行間 */ } /* 吹き出し(三角) */ .iconballoon .balloon:after,.balloon:before{ border: solid transparent; content:''; height:0; width:0; position:absolute; top:100%; left:50%; } .iconballoon .balloon:after{ border-top-width:10px; border-bottom-width:10px; border-left-width:10px; border-right-width:10px; margin-left: -10px; border-top-color:#FFFFFF; } .iconballoon .balloon:before{ border-color:"rgba(153, 153, 153, 0)"; border-top-width:12px; border-bottom-width:12px; border-left-width:12px; border-right-width:12px; margin-left: -12px; margin-top: 1px; border-top-color:#999999; } /*スマホ*/ @media screen and (max-width: 480px){ /* ボックスタイトル */ .iconbox .box-title { font-size: 14px; /* 文字サイズ */ } /* ボックス 中 */ .iconbox .iconbox-wrap { padding: 1em 1em 1em 1.5em;/* 余白 */ } /* コンテンツ */ .iconbox .iconbox-wrap .box-content{ font-size:12px;/*文字サイズ */ } /* アイコン画像 */ .iconballoon .icon img{ width:80px;/* 横幅 */ margin-top:5px;/* 余白 */ box-shadow: initial; /*影*/ } /* アイコン画像(amp) */ .iconballoon amp-img{ max-width:80px !important;/* 横幅 */ margin-top:5px;/* 余白 */ } /* 吹き出し */ .iconballoon .balloon{ width:80px;/* 横幅 */ font-size:10px;/* 文字サイズ */ padding: 1em 0;/* 余白 */ border: 1px solid #999;/* 線(太さ 種類 色) */ } /* 吹き出し(三角) */ .iconballoon .balloon:after { border-top-width: 12px; border-bottom-width: 10px; border-left-width: 11px; border-right-width: 11px; margin-left: -11px; border-top-color: #FFFFFF; } } /* 画像枠線削除 */ img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */ border: none; padding: none; 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%; /*2つ目の値でマーカーの太さを変える*/ 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; /* 20190924数値変更 */ 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; /* 20190924数値変更 */ color: #fa6b6b; /* 目次名の色 */ font-size: 1.1em; letter-spacing:2px; font-weight:600; /* 20190924追記 */ } #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;/* 20190924追記 */ } #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-size: 0.8em; font-weight: bold; ?color: #000; /* 数字の色 */ } #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;/* 20190924追記 */ } #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; /*点滅間隔1.2秒設定*/ } @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); /*上下回転アニメーション*/ } /* ======================================== お手玉レク・メリットグリッド （SEOリライト用カスタムクラス） ======================================== */ /* 2カラムグリッド */ .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; } /* スマホは1カラム */ @media (max-width: 600px) { .merit-grid { grid-template-columns: 1fr; } }