/*
Skin Name: Myskin
Description: オリジナルスキン
Skin URI: https://turicco.com/
Author: はっちゃん
Author URI: https://turicco.com/
Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png
Version: 1.0.2
Priority: 9900000
*/
/*以下にスタイルシートを記入してください*/
/************************************
子テーマ用のスタイルを書く
************************************/
/* カスタムプロパティ---------------------------------------------- */
:root {
--main-dark-color:#686462;
--main-color:#8b867d; /*#898881;*/
--main-sub-color:#e6e3df;
--main-light-color:#F6F5F3;/*#f4f3f1;*/
--second-color:#92bac2;/*#8b9b9d;#B0C5C1;*/
--second-sub-color:#C2D0D1;
--accent-color:#dbb6a2;
--accent-sub-color:#E8D1C9;
--cocoon-red-color: #bc5731; /*#db7c7c;*/
--cocoon-blue-color:#51677a; /*#757F96*/
--cocoon-text-color:#454545;
--gray-color:#f7f7f7;
--shadow-color:rgb(0 0 0 / .2);
--border-color:#ccc;
--box-padding:2em;
--cocoon-tab-label-active-color:var(--main-color);
}
/*480px以下*/
@media screen and (max-width: 480px){
:root {
--box-padding:1.5em;
}
}
/* svg縦位置調整---------------------------------------------- */
.svg-flex{
display: inline-flex;
align-items: center;
gap:5px;
}
/* アイコン変更---------------------------------------------- */
.fa-history:before {
content: "\f2f1";/*更新日*/
}
.fab-bolt::before {
content: "\f0a1";/*bullhorn*/
}
.check::before,
.is-style-icon-list-check > li::before,
.fab-edit::before,
.fab-thumbs-up::before,
.fab-pencil::before,
.fab-graduation-cap::before,
.fa-tag::before{
display:inline-block;
content:""!important;
height: 1em;
width: 1em;
background-color:currentColor;/*テキスト色に同期*/
-webkit-mask-repeat: no-repeat;/*リピートなし*/
-webkit-mask-position: center;/*アイコンを中央に配置*/
-webkit-mask-size: contain;/*マスクのサイズをコンテナに合わせて調整*/
}
.fab-edit::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/*いいね*/
.fab-thumbs-up::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/*ペン*/
.fab-pencil::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/*歯車*/
.fab-graduation-cap::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/*タグ*/
.fa-tag::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/*位置調整*/
.micro-balloon .fab-thumbs-up::before,
.micro-balloon .fab-pencil::before,
.micro-balloon .fab-edit::before,
.micro-balloon .fab-graduation-cap::before{
position: relative;
top: 2px;
}
:where(.tab-caption-box-label,.label-box-label).fab-thumbs-up::before,
:where(.tab-caption-box-label,.label-box-label).fab-pencil::before,
:where(.tab-caption-box-label,.label-box-label).fab-edit::before,
:where(.tab-caption-box-label,.label-box-label).fab-graduation-cap::before {
position: relative;
top: -1px;
}
/*リストスタイル（チェック）*/
.check{
position:relative;
padding-left:1.5em;
}
.check::before,
.is-style-icon-list-check > li::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
position:absolute;
top:.4em;
left:.2em;
}
/* codoc表示調整---------------------------------------------- */
.codoc-buy,
.codoc-support,
.codoc-bottom,
.codoc-copyright{
max-width: 100%!important;
border-radius:0!important;
}
.codoc-buy,
.codoc-support,
.codoc-bottom{
background:var(--second-sub-color)!important;
}
.codoc-support .codoc-support-title {
font-size: .8em!important;
}
.codoc-entry .codoc-btn ,
.codoc-support .codoc-btn {
font-size: .9em!important;
background:var(--cocoon-white-color)!important;
border:1px solid var(--cocoon-text-color)!important;
}
/* ボタンテキスト前にアイコン追加 */
.codoc-support .codoc-btn span:before {
font-family: "Font Awesome 5 Free"; /* アイコンのフォント */
content: "\f118"; /* チェックマークアイコンのUnicode */
margin-right: 5px; /* アイコンと文字の間隔 */
font-weight: normal;
}
/*codocにサイドバーが重なってしまうのを調整*/
#main {
z-index: 1;
}
#sidebar {
z-index: 0;
}
/* ブログ村---------------------------------------------- */
.blog-mura img{
max-width:100px;
opacity:.7;
}
/* 斜体リセット---------------------------------------------- */
cite {
font-style: unset;
}
/* 全体設定---------------------------------------------- */
body{
overflow-x:clip;
background-color:var(--cocoon-white-color);
}
@media screen and (max-width: 834px) {
body{
background-color:initial;
}
main.main{
padding-top: 1em;
}
}
/*1pxの余白を消す*/
.main{
border:none;
}
@media screen and (min-width: 1024px) {
.error404 .main {
width: 900px!important;
margin: auto!important;
}
}
:where(.blog, .archive) .main,
.header-container,
.navi,
.navi-in a:hover{
background-color:initial;
}
/* スムーススクロール---------------------------------------------- */
html {
scroll-behavior: smooth;
scroll-padding-top: 60px;/*位置調整*/
}
/* 中央揃え---------------------------------------------- */
.center{
text-align:center;
}
/* リンクカラー変更---------------------------------------------- */
a,
.has-text-color a {
color:var(--cocoon-blue-color);
}
/* 広告表記---------------------------------------------- */
.pr-label-l {
background:initial;
border-radius:0;
border-left:0;
border-right:0;
padding:.7em 0;
}
.pr-label-l:before{
font-family:"Font Awesome 5 Free";
content: "\f05a";
font-weight:bold;
margin-right:5px;
color:var(--main-color);
}
/* ハンバーガーメニュー */
.my-content {
opacity: 0;
background:rgb(0 0 0 /60%);
height: 100vh;
width: 100%;
position: fixed;
top: 0;
z-index: -1;
transition: all 0.3s;
}
.my-menu:has(#my-btn-check:checked) .my-content {
opacity: 1;
z-index: 999;
}
.my-content ul {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0;
z-index: 999;
}
.my-content li {
display: block;
list-style: none;
text-align: center;
margin:15px;
}
.my-content li a {
color: #fff;
padding: 10px;
text-decoration: none;
}
/*フェードイン*/
@keyframes fade-In {
to {
opacity: 1;
}
}
.my-menu:has(#my-btn-check:checked) .my-content ul {
animation: fade-In .5s ease-in forwards;
opacity:0;
}
/* メニューボタン */
#my-btn-check {
display: none;
}
.my-menu-btn {
cursor: pointer;
height: 50px;
position: fixed;
right: 30px;
top: 40px;
width: 60px;
z-index: 9999;
}
.my-menu-btn span {
background-color: #111;
border-radius: 2px;
display: inline-block;
height: 2px;
position: absolute;
left: 14px;
transition: all .3s;
width: 50%;
}
/* ボタンオフ */
.my-menu-btn span:nth-of-type(1) {
top: 13px;
}
.my-menu-btn span:nth-of-type(2) {
top: 21px;
}
.my-menu-btn span:nth-of-type(3) {
top: 29px;
}
/* ボタンオン */
.my-menu:has(#my-btn-check:checked) .my-menu-btn span{
background-color:#fff;
}
.my-menu:has(#my-btn-check:checked) .my-menu-btn span:nth-of-type(1) {
left: 16px;
top: 18px;
transform: translateY(6px) rotate(-45deg);
width: 50%;
}
.my-menu:has(#my-btn-check:checked) .my-menu-btn span:nth-of-type(2) {
opacity: 0;
}
.my-menu:has(#my-btn-check:checked) .my-menu-btn span:nth-of-type(3) {
top: 30px;
left: 16px;
transform: translateY(-6px) rotate(45deg);
width: 50%;
}
@media (width <= 1023px) {
.my-menu {
display: none;
}
}
/* 自作スライダー---------------------------------------------- */
.custom-slider {
position: relative;
width: 100%;
height: 100vh;
display:grid;
place-items:center;
}
.slide {
position: absolute;
inset: 0;/* width: 100%; height: 100%; と同じ意味 */
opacity: 0;
transition: opacity 1s ease-in-out;
background-size: cover; /* 画像をスライド全体にカバー */
}
.slide:first-child {
opacity: 1;
}
.slide1 {
background-image: url('https://turicco.com/wp-content/uploads/2024/09/img91-4.jpg'); /* 3枚目の画像 */
background-position:50%;
}
.slide2 {
background-image: url('https://turicco.com/wp-content/uploads/2024/09/img91-5.jpg'); /* 1枚目の画像 */
background-position:40%;
}
.slide3 {
background-image: url('https://turicco.com/wp-content/uploads/2024/09/img91.jpg'); /* 4枚目の画像 */
background-position:60%;
}
.slide4 {
background-image: url('https://turicco.com/wp-content/uploads/2024/01/appeal-img-2.jpg'); /* 5枚目の画像 */
background-position:40%;
}
.slide5 {
background-image: url('https://turicco.com/wp-content/uploads/2024/09/img91-3.jpg'); /* 2枚目の画像 */
background-position:70%;
}
.top-content {
z-index: 1;
padding:1em;
}
/* 記事ヘッダー順序変更---------------------------------------------- */
.article-header{
display:flex;
flex-flow: column;
}
.entry-title{
order:-3;
}
.entry-categories-tags {
order: -2;
margin-bottom:.5em;
}
.date-tags{
order:-1;
}
/* 記事下プロフィール背景画像---------------------------------------------- */
#author_box-6{
background-repeat:no-repeat; /*画像を繰り返さない*/
background-size:cover;/*画面サイズいっぱいに表示*/
background-position:center top;
background-attachment: fixed;
width:100%; /*横幅いっぱいに表示*/
background-image:url(https://turicco.com/wp-content/uploads/2023/09/bg-img-1.jpg);
padding:2em;
}
/* webフォント---------------------------------------------- */
.web-font,
.toc-title,
.toc-list > li:before,
.ect-vertical-card:before,
:where(.new-entry-cards.large-thumb a):before,
.header-container,
.scrollLabel,
.sidebar h3,
.menu-caption,
.top-heading,
.blank-box.bb-tab .bb-label,
.blogcard::after,
pre:after,
:where(.prev-post-title,.next-post-title):before,
.author-widget-name,
.related-entry-main-heading,
.comment-title,
.widget-title,
.article h2:before{
font-family: "Alata", sans-serif;
letter-spacing:.08em;
}
/* タイピング---------------------------------------------- */
.typing span {
display: table-cell;
opacity: 0; /* 初期は非表示 */
animation: typing 1s forwards;
animation-delay: calc(var(--i) * 0.1s); /* 各文字に異なる遅延を設定 */
}
@keyframes typing {
100% {
opacity: 1; /* 最終的に表示 */
}
}
/*文字列後ろの線の設定*/
.typing span:last-child::after {
content: "|";
animation: typinganime .8s ease infinite;
}
@keyframes typinganime{
0% { opacity:0 }
100% { opacity:1 }
}
/* アニメーション 2（その場でフェードイン）---------------------------------------------- */
.fade-in,
.content,
.logo{
animation:FadeIn 1.5s ease .5s normal both;
opacity: 0;/*最初に非表示*/
}
@keyframes FadeIn{
100% {
opacity: 1
}
}
.time01 {animation-delay: 2s;}
.time02 {animation-delay: 2.5s;}
/* アニメーション 3（スクロール）---------------------------------------------- */
/*----------------------------
scroll_in ｜フェードイン
----------------------------*/
.scroll_in,
.footer-title{
opacity: 0;/*最初は透明*/
transition: all 1s;
}
.scroll_in{
transition-delay: calc(var(--i) * 0.1s); /* 各文字に異なる遅延を設定 */
}
.footer-title{
transition-delay: .3s;
}
.scroll_in.on,
.footer-title.on{
opacity: 1;/*クラスが付与されたら不透明*/
}
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up{
opacity: 0;/*最初は透明*/
transition: all 1s .1s;
transform: translateY(30px);
}
.scroll_up.on {
opacity: 1;/*クラスが付与されたら不透明*/
transform: translate(0, 0);
}
/*----------------------------
scroll 左右から出現
----------------------------*/
.scroll_left,
.scroll_right{
opacity: 0;/*最初は透明*/
transition:all .5s ease-in-out;
}
.scroll_left.on,
.scroll_right.on {
opacity: 1;/*クラスが付与されたら不透明*/
transform: translateX(0);
}
/* scroll_left ｜左から出現---------------------------------------------- */
.scroll_left{
transform: translateX(-20px);
}
/* scroll_right ｜右から出現---------------------------------------------- */
.scroll_right {
transform: translateX(20px);
}
/* ホバー時の変化---------------------------------------------- */
/* ホバー2（反転／塗り）---------------------------------------------- */
.breadcrumb a:hover{
border-color:var(--main-color);
background:var(--main-color)!important;
color:var(--cocoon-white-color)!important;
}
/* ホバー3（反転／白抜き）---------------------------------------------- */
:where(input[type=submit] , .comment-reply-link):hover{
border:1px solid var(--main-color)!important;
color:var(--main-color)!important;
background-color:initial!important;
opacity:1;
}
/* ホバー4（カード）----------------------------------------------*/
.entry-card-wrap.a-wrap .entry-card-thumb img,
.related-entry-card-wrap.a-wrap .related-entry-card-thumb img,
.widget-entry-card-link.a-wrap .widget-entry-card-thumb img{
transition-duration: 0.5s;
}
/*.entry-card-wrap.a-wrap:hover .entry-card-thumb img,
.related-entry-card-wrap.a-wrap:hover .related-entry-card-thumb img,
.widget-entry-card-link.a-wrap:hover .widget-entry-card-thumb img{
box-shadow: 0 5px 5px rgb(0 0 0 / .3);
transform: translateY(-5px);
}*/
/* 記事カード設定 ---------------------------------------------- */
.a-wrap:hover{
background-color:transparent;
}
.card-thumb img,
.eye-catch img {
border-radius:10px;
}
/* ホバー */
.entry-card-wrap.a-wrap:hover .entry-card-thumb img,
.related-entry-card-wrap.a-wrap:hover .related-entry-card-thumb img,
.widget-entry-card-link.a-wrap:hover .widget-entry-card-thumb img{
filter: brightness(80%);
}
/* マスク／フィルタードット----------------------------------------------*/
.img-mask-b,.img-mask-w{
position:relative;
}
/*黒*/
.mask-b:before {
display: block;
background-image: url(https://turicco.com/wp-content/uploads/2024/06/dot.png);
background-size: 2px;
content: '';
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
opacity:.5;
}
/*白*/
.mask-w:before {
display: block;
margin: auto;
background-image: linear-gradient(-90deg, transparent 50%, #000 50%), linear-gradient(transparent 50%, #000 50%);
background-color: white;
background-size: 2px 2px;
mix-blend-mode: screen;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
opacity:.5;
}
/* 通知エリア----------------------------------------------*/
.home .notice-area{
display:none;
}
.notice-area{
color:var(--cocoon-white-color);
background-color:var(--main-color);
position:relative;
margin-bottom:1em;
}
.notice-area:before{
display: block;
content: "";
background-image: repeating-linear-gradient(-45deg, #fff 0 6px, transparent 6px 12px);
opacity: .1;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
.notice-area a {
color:var(--cocoon-white-color);
text-decoration: none;
font-weight:bold;
position:relative;
z-index:1;
}
.notice-btn{
box-shadow:0 1px 2px var(--shadow-color);
margin-left:.5em;
padding: 2px 1em;
text-decoration: none;
background-color:var(--accent-color);
color:var(--cocoon-white-color)!important;
border-radius:30px;
font-size:.9em;
}
/* 通知エリアの流れるテキスト */
.notice-area {
overflow: hidden; /* はみ出た部分を隠す */
white-space: nowrap; /* 文字を折り返さず1行で表示 */
}
/* 通知メッセージのスタイル */
.notice-area a {
display: inline-block;
padding-left: 100%; /* 初期位置を画面の右端に設定 */
animation: slideMessage 12s linear infinite; /* アニメーション適用 */
}
/* スライドアニメーションの定義 */
@keyframes slideMessage {
to {
transform: translateX(-100%); /* 左へ移動 */
}
}
/* 1023px以上（PC）では、アニメーションをゆっくりにする */
@media screen and (min-width: 1023px) {
.notice-area a {
animation-duration: 24s; /* PCでのスライド速度 */
}
}
/* トップへ戻るボタン---------------------------------------------- */
.go-to-top {
right: 3em;
bottom: 3em;
}
/* トップへ戻るボタン画像の表示調整 */
.go-to-top-button {
width: 60px; /* ボタン画像の表示幅 */
height: auto; /* ボタン画像の高さは自動調整 */
opacity:.7;
transition: all 0.3s ease-in-out;
}
.go-to-top-button:hover {
transform: translateY(-30px);
}
/* ヘッダー---------------------------------------------- */
.front-top-page .header-container{
position:fixed;
z-index:9;
width:100%;
}
/*サイトロゴマーク*/
.front-top-page .header-container-in.hlt-top-menu .site-name-text {
display:none;
}
/* グローバルナビ---------------------------------------------- */
#navi a{
text-transform:uppercase;/*大文字表記*/
}
/*ナビにホバーで下線を引く（左から右に伸びる）*/
.my-content li a,
.navi-in a{
position:relative;
}
.my-content li a::after,
.navi-in a::after {
content: '';
position: absolute; /*絶対配置で線の位置を決める*/
bottom: -1px;
left: 0%;
width: 100%;/*線の形状*/
height: 1px;
background:var(--cocoon-text-color);
transition: all .3s;/*アニメーションの指定*/
transform: scale(0, 1);/*X方向0、Y方向1*/
transform-origin:center top;/*上部中央基点*/
}
/*ホバーで下線を引く */
.my-content li a:hover::after,
.navi-in a:hover::after {
transform: scale(1, 1);/*X方向にスケール拡大*/
}
.my-content li a::after{
background:var(--cocoon-white-color);
}
/* フッター設定---------------------------------------------- */
.footer{
background:var(--main-color);
padding-top:3em;
}
/*フッター色調整*/
.footer,
.footer-title > div,
.footer a:not(:hover),
.footer-title{
color:var(--cocoon-white-color)!important;
}
.footer-title{
font-weight:normal;
}
.footer-title::after{
background-color: var(--cocoon-white-color)!important;
}
.footer a:hover{
color: var(--accent-color)!important;
background-color:initial;
}
.navi-footer-in > .menu-footer li {
width: 180px;
border-color:var(--cocoon-white-color);
}
/*834px以下*/
@media screen and (max-width: 834px){
.navi-footer-in > .menu-footer li.menu-item {
width: fit-content;
}
.navi-footer-in>.menu-footer a{
font-size:.8em;
}
}
/*スマホでもウィジェットを表示*/
@media screen and (max-width: 768px) {
.footer-widgets {
display: block;
}
}
/*画像*/
.widget_media_image{
display:flex;
justify-content: center;
}
/* パンくずリスト---------------------------------------------- */
.breadcrumb{
margin:0;
color:var(--main-color);
position:relative;
font-size:11px;
}
.breadcrumb a{
padding:3px;
border-radius:1px;
color:var(--main-color);
}
/* 「ホーム」を消す */
.breadcrumb .breadcrumb-home a span{
font-size: 0px;
}
/* 「HOME」を挿入 */
.breadcrumb .breadcrumb-home a span::before{
content: "Home";
font-size:13px;
}
/*パンくずリストアイコン非表示*/
.breadcrumb :where(.fa-folder, .fa-file-o){
display: none; /*非表示*/
}
/*アイコン>まわりの余白*/
.breadcrumb .sp {
margin: 0 3px;
}
/*装飾（ドット）*/
.breadcrumb:after{
display:inline-block;
content: '';
}
.breadcrumb:after{
position:absolute;
top:0;
bottom:0;
margin: auto;
width: 8px;
height: 8px;
box-shadow:10px 0px 0px var(--main-color), /*2個目 */ 25px 0px 0px var(--second-color), /*3個目*/ 40px 0px 0px var(--accent-color);
border-radius:50%;
}
/* サークル----------------------------------------------*/
.circle-container {
display: grid;
place-items: center;
padding: 2em;
}
.circle-block {
width: 220px;
height: 220px;
position: relative;
}
.circle-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 105%;
}
.circleText {
overflow: visible;
animation: rotation 18s linear infinite;
}
.circleText_circle {
fill: none;/*サークル内の背景色を消す*/
}
.circleText_text {
fill: var(--main-color);
font-size: 12px;
letter-spacing: 0.05em;
}
.circleText_text tspan{
fill: var(--accent-color);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* カバーブロック---------------------------------------------- */
/*トップ部分の設定*/
.wp-block-cover.top{
height:100svh;
}
/*834px以下*/
@media screen and (max-width: 834px){
.top .wp-block-cover__image-background{
background-position:70%!important;
}
}
.top-content .top-site-name a,
.top-content .micro-text {
color:var(--cocoon-text-color);
font-weight:bold;
}
:where(.top-content,.wp-block-cover.top) .top-site-name a{
text-decoration: none;
font-size:3.5em;
}
.wp-block-cover.top .search-box{
max-width:300px;
}
.shadow{
text-shadow: 1px 1px 5px var(--shadow-color);
}
/* WAVEの設定（うねうね）------------------------------------------------------ */
/*waveを描画するエリア設定*/
#wrapper{
position: relative;
}
canvas{
position: absolute;
bottom: 0;
left:0;
width: 100%;
z-index:1;
}
/*波の境界線（固定）*/
.wave-1{
fill:var(--main-light-color);
}
.wave-2{
fill:var(--main-light-color);
}
svg.wave-rotate{
transform:rotate(180deg);
vertical-align:top;
margin-top: -1px;
}
/* セクション---------------------------------------------- */
.section{
padding:5em 1.5em;
}
.color-area{
background:var(--main-light-color);
}
/* 記事カード設定---------------------------------------------- */
.e-card-title,
.widget-entry-cards.card-large-image .e-card {
font-size:16px;
}
@media screen and (max-width: 600px){
.e-card-title {
font-size: 14px!important;
line-height:1.5;
}
}
/*1024px以上*/
@media screen and (min-width: 1024px){
.related-entry-card-title, .entry-card-title {
-webkit-line-clamp: 2;
}
}
.related-entry-card-snippet, .entry-card-snippet {
line-height:1.6;
}
/*記事カード余白を0に*/
.related-entry-card-thumb,
.widget-entry-card-thumb,
.entry-card-thumb {
margin:0;
}
/* ウィジェット設定---------------------------------------------- */
/*三点リーダー省略*/
.widget-entry-cards:not(.large-thumb-on) .card-title{
-webkit-line-clamp: 2;
height:3em;
}
.widget-entry-card-snippet{
-webkit-line-clamp: 3!important;
}
/*記事タイトル*/
.widget-entry-cards .a-wrap {
padding: 5px;
line-height: 1.6;
}
.widget-entry-card-title{
font-weight:bold;
}
/*スマホで文字の大きさ調整*/
/*600px以下*/
@media screen and (max-width: 600px){
.widget-entry-card-title{
font-size: 14px;
}
}
.widget-entry-card-snippet {
font-size: 13px;
}
.widget-entry-cards.card-large-image .a-wrap {
margin-inline: auto;
}
/* ウィジェットカード設定（Grid）---------------------------------------------- */
/* カード内の画像リンク最大幅を600pxに制限（横幅100%で拡縮対応） */
[class*="is-style-column-"] .widget-entry-cards.card-large-image .a-wrap {
max-width: 600px;
width: 100%;
}
/* 大きなサムネイル画像を中央寄せ */
[class*="is-style-column-"] .widget-entry-cards.large-thumb {
justify-items: center; /* Gridのアイテムを水平方向に中央配置 */
}
/* 各カラム数に応じたグリッド表示 */
[class*="is-style-column-2"] .widget-entry-cards,
[class*="is-style-column-3"] .widget-entry-cards,
[class*="is-style-column-4"] .widget-entry-cards {
display: grid;
}
/* 2カラム表示 */
[class*="is-style-column-2"] .widget-entry-cards {
grid-template-columns: repeat(2, 1fr);
}
/* 3カラム表示 */
[class*="is-style-column-3"] .widget-entry-cards {
grid-template-columns: repeat(3, 1fr);
}
/* 4カラム表示 */
[class*="is-style-column-4"] .widget-entry-cards {
grid-template-columns: repeat(4, 1fr);
}
/* モバイル用レスポンシブ設定 */
@media (max-width: 768px) {
/* column-x-1系：モバイルでは1列 */
:is(.is-style-column-2-1, .is-style-column-3-1, .is-style-column-4-1) .widget-entry-cards {
grid-template-columns: 1fr;
}
/* column-x-2系：モバイルでは2列 */
:is(.is-style-column-3-2, .is-style-column-4-2) .widget-entry-cards {
grid-template-columns: repeat(2, 1fr);
}
}
/*ウィジェット記事の投稿日・更新日を表示*/
.widget-entry-card-date {
display:block;
text-align: right;/*右寄せ*/
}
/*更新日表示：更新日がない場合は投稿日*/
.widget-entry-card-date > span:nth-last-of-type(2) {
display:none;
}
/* 見出しデザイン---------------------------------------------- */
/*トップページの大見出し*/
.top-heading{
color: var(--main-color);
font-size: 3.5em;
line-height:1.5;
display: table;/*spanの余白対策*/
text-align: center;
margin: 0 auto 1em;
}
/*480px以下*/
@media screen and (max-width: 480px){
.top-heading{
font-size: 3em;
}
}
/*トップページの大見出し（２行目のスタイル）*/
.top-sub-heading{
display: table;/*spanの余白対策*/
margin: auto;
font-size:12px;
letter-spacing:.1rem;
font-weight:initial;
font-family: initial;
}
/*中見出し*/
.second-heading{
position: relative;
color: var(--main-color);
font-size: 1.2em;
font-weight:bold;
line-height:1.5;
padding-bottom:1rem;
margin-bottom:1em!important;
}
.second-heading::after {
background-color: var(--main-color);
position: absolute;
top: auto;
bottom: 0;
display: block;
width: 2.5rem;
height: 1px;
border-radius: 10px;
content: "";
}
/*アーカイブページ見出しのアイコンを消す*/
.archive-title .fas{
display:none;
}
/*固定ページ、アーカイブページのタイトル*/
.page .entry-title,
.archive-title{
text-align: center;
}
/*記事ページタイトル、アーカイブページのタイトル*/
.entry-title, .archive-title {
font-size: 5vw;
}
@media screen and (min-width: 600px) {
.entry-title, .archive-title {
font-size: 24px;
}
}
@media screen and (max-width: 480px) {
.entry-title {
padding: 0.6em 0;
}
}
/*固定ページの日付*/
.page .date-tags{
display:none;
}
/*目次タイトル、関連記事、コメント、フッター見出しのスタイル*/
.author-widget-name,
.related-entry-heading,
.comment-title,
.footer-title > div {
display:flex;
flex-direction: column;
align-items: center;
color:var(--main-color);
}
.toc-title,
.author-widget-name,
.related-entry-heading,
.comment-title{
font-size: 2rem;
font-weight:normal;
}
.footer-title > div {
font-size: 2.8rem;
}
.toc-title:before,
.related-entry-sub-heading,
.comment-sub-heading,
.footer-sub-heading{
font-size:.8rem;
letter-spacing:initial;
font-weight:initial;
font-family:initial;
}
/*短い下線を引く*/
.page .entry-title,
.archive-title,
.top-heading,
.top-heading-2,
.related-entry-heading,
.comment-title,
.author-widget-name,
.footer-title,
.timeline-title,
.iconlist-title{
position:relative;
padding-bottom:1rem;
margin-bottom:2rem;
}
:where(.page .entry-title,.archive-title,.top-heading,.top-heading-2,
.related-entry-heading,.comment-title,.author-widget-name,.footer-title,.timeline-title,.iconlist-title)::after{
background-color: var(--main-color);
position: absolute;
top: auto;
bottom: 0;
left: calc(50% - 1.25rem);
right: auto;
display: block;
width: 2.5rem;
height: 1px;
border-radius: 10px;
content: "";
}
/* 記事内見出しのデザイン */
.article :is(h1,h2,h3,h4){
border: initial;
background-color:initial;
border-radius:initial;
line-height:1.4;
}
.article h2:not(.step) {
margin-top:5rem;
counter-increment: heading-counter;
position: relative;
padding: 0 .5em;
background-color:initial;
border-bottom: 10px solid var(--main-sub-color);
color:var(--main-color);
font-size: 1.4em;
}
.article h2:not(.step):before {
display: block;
content: counter(heading-counter, decimal-leading-zero);
font-style: italic;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
line-height: 1;
font-size: 5rem;
color: var(--main-sub-color);
}
/*.article h2:not(.step) {
margin-top:5em;
padding:.7em 1em .7em;
background-color:var(--main-color);
color:var(--cocoon-white-color);
font-size: 1.4em;
position: relative;
}
.article h2:not(.step):before,
.article h2:not(.step):after {
position: absolute;
left: 0;
width: 100%;
content: '';
border-top: 1px solid var(--cocoon-white-color);
}
.article h2:not(.step):before{
top: 3px;
}
.article h2:not(.step):after{
bottom: 3px;
}*/
.article h3:not(.step) {
margin-top:5em;
padding:.2em 0;
border-bottom: solid 2px var(--gray-color);
color:var(--main-color);
font-size: 1.3em;
position: relative;
}
.article h3:not(.step):after{
position: absolute;
content: '';
display: block;
border-bottom: solid 2px var(--main-color);
bottom:-2px;
width:30%;
}
.article h4{
margin-top:5em;
padding:.1em .6em;
border-left:3px solid var(--main-color);
color:var(--main-color);
font-size: 1.2em;
}
/*先頭に四角のアクセント*/
.article h5 {
margin-top:3em;
background:none;
position: relative;
font-size: 1em;
padding:.5em .5em .5em 2em;
border-color:var(--main-sub-color);
}
.article h5::before{
position: absolute;
content: '';
}
.article h5::before {
top: .6em;
left: .2em;
z-index: 2;
width: 1em;
height: 1em;
background: var(--main-color);
opacity: .7;
}
/* ステップ----------------------------------------------*/
body{
counter-reset: step;
}
.step{
display: flex;
gap: 10px;
align-items: flex-start;
position:relative;
}
.step:before,
.step:after{
display:block;
margin-top:-6px;/*位置調整*/
width: 45px;
text-align:center;
color: var(--cocoon-white-color)!important;
}
.step:before {
content: 'STEP';
padding-top:7px;/*位置調整*/
height: 38px;
flex-shrink: 0;/*縮小しない*/
border-radius:99px;
font-size: 10px;
background-color: var(--main-color);
}
.step:after{
content:counter(step);
counter-increment: step;
font-size: 18px;
position:absolute;
top:17px;
}
/*見出し装飾リセット*/
.article h2.step{
background-color:initial;
padding:initial;
margin-left:initial;
color: var(--main-color);
margin-top:3em;
}
.article h3.step{
padding:initial;
color: var(--main-color);
margin-top:3em;
}
.article h4.step{
border:none;
padding:initial;
margin-top:3em;
}
/* ボタンのスタイル---------------------------------------------- */
/*cocoonボタン*/
.btn{
background-color:var(--main-color);
}
/* moreボタン---------------------------------------------- */
.more {
text-align: right;
display:block;
margin-top:1em;
margin-right:1em;
}
.more a {
position: relative;
padding: 0 2em .5em .5em;
color: var(--cocoon-text-color);
text-decoration: none;
outline: none;
}
.more a::before {
border-bottom: 1px solid var(--cocoon-text-color);
border-right: 1px solid var(--cocoon-text-color);
bottom: 0;
content: '';
height: 12px;
position: absolute;
left: 0;
transform: skewX(50deg);
width: 100%;
transition: all .3s;
}
.more a:hover::before {
left: 10px;
}
/* 自作カスタムボタン---------------------------------------------- */
.custom-btn a {
display: block;
width: 100%;
padding: .8em 2.2em .8em 1em ;
text-align:center;
text-decoration: none;
color: var(--cocoon-text-color);
border:1px solid var(--cocoon-text-color);
border-radius:99px;
white-space: nowrap; /* 改行を防止 */
overflow: hidden; /* はみ出した部分を非表示 */
text-overflow: ellipsis; /* 省略して表示 */
position:relative;
transition:all .5s;
}
.custom-btn a:hover {
background-color: var(--main-color);
border-color:var(--main-color);
color:var(--cocoon-white-color);
}
/*480px以下*/
@media screen and (max-width: 781px){
.custom-btn a {
font-size:.9em;
}
}
/* ボタンに矢印を追加する */
.custom-btn a:after {
content: '';/*矢印の描写*/
border-bottom: 1px solid var(--cocoon-text-color);/*下矢印の太さ、種類、色*/
border-right: 1px solid var(--cocoon-text-color);/*右矢印の太さ、種類、色*/
width: .9em;/*矢印の幅*/
height: .2em;/*矢印の高さ*/
transform: skewX(45deg);/*矢印の角度*/
position: absolute;/*矢印の位置*/
right: 1.2em;/*右からの位置*/
bottom:50%;/*下からの位置*/
transition: .3s all;
}
/*マウスオーバー時の変化*/
.custom-btn a:hover:after {
border-color:#fff;
right: 1em;
}
/* 目次設定---------------------------------------------- */
.toc{
padding:2em 8em 3em;
width:100%;
border:none;
border-top:2px solid var(--main-color);
border-bottom:2px solid var(--main-color);
}
/*834px以下*/
@media screen and (max-width: 834px){
.toc{
padding:2em 1.5em 3em 2.5em;
}
}
/* ol.toc-list > li > a{
font-weight:bold;
}*/
/*目次のスタイル追加（番号リスト）*/
.toc-list ol{
position:relative;
list-style:disc;/*点*/
}
.toc-list ol > li::marker {
color: var(--accent-color);
}
/* 目次の線（左） */
.toc-list ol:before {
content: "";
height: 100%;
width: 1px;
left: -1.5em;
position: absolute;
background-color: var(--main-color);
opacity: .5;
}
/* 目次に戻るリンクのスタイル */
.back-toc {
text-align:right;
}
/* 目次に戻るリンクを機能させる */
.toc-checkbox {
height: 0;
overflow: hidden;
display: block;
visibility: hidden;
}
/* 目次の表示切り替えを無効にする */
.toc-title {
pointer-events: none;
color: var(--main-color);
}
.toc-title:after {
display: none;
}
/**サイドバー目次---------------------------------------------- */
.nwa .toc{
padding:0;
line-height:1.8;
}
.widget_toc{
overflow-y:auto;/*縦方向スクロールを設置*/
max-height: calc(100vh - 150px); /* 目次の高さ上限*/
}
/* 目次の「続きを読む」ボタンのスタイル */
.morelink {
display: block;
margin: 1em auto 0!important;
padding:.3em 1em!important;
text-decoration: none!important;
cursor: pointer;
text-align: center;
color: var(--main-color)!important;
background-color:var(--main-light-color);
border-radius:40px;
width:10em;
transition: all .3s;
}
.morelink:hover {
color: var(--cocoon-white-color)!important;
background-color:var(--main-color);
}
/*サイドバータイトル非表示*/
.widget .toc-title{
display:none!important;
}
/* サイドバーの設定---------------------------------------------- */
.sidebar{
font-size:.9em;
}
.sidebar aside{
padding:1em 2em;
}
:where(.widget_nav_menu, .tagcloud) ul li{
line-height:1;/*変えない*/
}
/* サイドメニュー */
.sub-menu li {
display: flex;
align-items: center;
}
.sub-menu li:before {
content: "└ ";
margin-right: 5px;
}
/*サイドメニューホバー時*/
.widget_nav_menu ul li a:hover,
.tagcloud a:hover{
background-color: unset;
text-decoration:underline;
}
/* サイドバー見出し---------------------------------------------- */
.sidebar h3 {
margin:0 0 1rem 0;;
padding:0;
overflow: hidden;
position: relative;
background:transparent;
font-size:2.5em;
color:var(--main-color);
font-weight:normal;
}
.sidebar h3:after {
background-color:var(--main-color);/*1個目*/
content: '';
border-radius: 50%;
margin-left: 15px;/* 最後 */
position: absolute;
top: 55%;
transform : translateY(-50%);
width: 8px; /* ドットの幅 */
height: 8px;/* ドットの高さ */
box-shadow: 20px 0px 0px var(--second-color), /*2個目 */
40px 0px 0px var(--accent-color), /*3個目*/
60px 0px 0px var(--main-color),/* 4個目*/
80px 0px 0px var(--second-color), /*5個目*/
100px 0px 0px var(--accent-color), /*6個目*/
120px 0px 0px var(--main-color),/*7個目*/
140px 0px 0px var(--second-color), /*8個目*/
160px 0px 0px var(--accent-color), /*9個目*/
180px 0px 0px var(--main-color),/*10個目*/
200px 0px 0px var(--second-color), /*11個目*/
220px 0px 0px var(--accent-color); /*12個目*/
}
/* 検索ボックスのカスタマイズ---------------------------------------------- */
.search-box input:focus{
outline: 0; /*フォーカス時の枠線を消す*/
}
/*検索ボックス全体*/
.search-box {
max-width:300px;
margin:1em auto;
}
/*入力欄*/
.search-box .search-edit {
border-radius:1px;
color:var(--cocoon-text-color);
background-color:rgb(255 255 255 /.9);
font-size:.9em;
}
/*検索ボタン*/
.search-box .search-submit {
color:var(--main-color);
right:5px;
}
/* ヘッダーナビの検索ボタン ---------------------------------------------- */
/* 検索ボタンのアイコン */
#search-menu-open-pc .search-menu-icon {
display: grid;
place-content: center;
height: 100%;
width: 100px;
}
/* 検索ボタンがチェックされたときにカバーを表示 */
#search-menu-input-pc:checked ~ #search-menu-close-pc {
opacity: 0.5;
visibility: visible;
}
/* 閉じる用の薄黒カバー */
#search-menu-close-pc {
position: fixed;
z-index: 99; /* フォームより上に配置 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
visibility: hidden;
transition: all 0.5s;
}
/* 検索ボタンがチェックされたときに検索フォームを表示 */
#search-menu-input-pc:checked ~ #search-menu-content-pc {
opacity: 1;
visibility: visible;
top: 45%;
}
/* 検索フォーム本体 */
#search-menu-content-pc {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 中央配置 */
opacity: 0;
visibility: hidden;
}
#search-menu-content-pc .search-box {
max-width: 500px;
}
/* 閉じるボタン */
.close-btn {
position: absolute;
bottom: .5em; /* フォームの下部に配置 */
left:50%;
transform: translateX(-50%);
background: none;
border: none;
font-size: 16px;
color: var(--cocoon-white-color);
cursor: pointer;
transition: all 0.3s ease;
}
.close-btn:hover {
color: var(--accent-color); /* ホバー時の色 */
}
/* モバイルボタン---------------------------------------------- */
/*1023px以下*/
@media screen and (max-width: 1023px){
.mobile-menu-buttons {
box-shadow:none;
align-items: center;
}
.mobile-footer-menu-buttons{
background:initial;
}
/*アイコン、文字色*/
.mobile-footer-menu-buttons :is(.menu-button >a,.menu-button label):not(.display-none,.menu-close-button){
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width:45px;
height:45px;
margin:auto;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color:var(--main-color);
border-radius:99px;
box-shadow: inset 0 0 25px #fff;
}
.mobile-menu-buttons .menu-icon {
font-size: .9em;
}
/*ホバー*/
.mobile-menu-buttons :is(.menu-button >a,.menu-button label):not(.display-none,.menu-close-button):hover{
animation: fuwafuwa 1s;
}
@keyframes fuwafuwa {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
}
/* モバイルボタンアイコン---------------------------------------------- */
.custom-menu-icon .fas{
height: 1em;
width: 1em;
}
.custom-menu-icon .fa-th-large {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
/* モバイルサイドバー---------------------------------------------- */
/*開くときのアニメーション*/
#sidebar-menu-input:checked ~ #sidebar-menu-content,
#search-menu-input:checked ~ #search-menu-content{
transition: 0.5s ease-in-out;
}
/*閉じるときのアニメーション*/
.menu-content{
transition:.5s ease-out;
}
/*モバイルサイドバーの幅*/
@media screen and (max-width: 480px) {
.menu-content {
max-width: 90%;
}
}
/* モバイルサイドバーのCLOSEボタン---------------------------------------------- */
.menu-close-button {
position:sticky!important;/*スクロール追従*/
z-index: 9; /*最前面に指定*/
top: 0px; /*表示位置*/
display:flex;
flex-direction: column;
backdrop-filter: blur(2px);
}
.menu-close-button::after{
content: "CLOSE";
font-size:10px;
}
/* この記事を書いた人（横並び）--------------------------------------------- */
.flex-box .micro-balloon{
padding:.5em .6em;
font-size:.8em;
}
.flex-box .wp-block-image img {
max-width: 90px;
margin: auto;
}
/*配置*/
.flex-box{
display:flex;
flex-wrap: nowrap;
align-items:flex-end;
gap:2em;
}
.flex-box-icon{
flex-basis:20%;
}
.flex-box-content{
flex-grow:1;
}
/*480px以下*/
@media screen and (max-width: 480px){
.flex-box{
gap:1em;
}
.flex-box .micro-balloon{
padding:.5em;
}
.flex-box .wp-block-image img {
max-width: 80px;
}
.flex-box .wp-block-list{
font-size:.9em;
}
}
/* プロフィールボックス---------------------------------------------- */
.author-box{
display:flex;
border:none;
margin-bottom:0!important;
}
.author-thumb {
float: none;
width: 30%;
margin: 0 auto;/*中央揃え*/
}
.author-name a{
text-decoration:none;
color:var(--main-color);
}
.author-box p{
line-height:1.8;
}
.author-content {
margin-left: 2em;
}
.home .author-content p{
margin-bottom:.5em;
}
/*768px以下*/
@media screen and (max-width: 768px){
.author-box{
flex-direction:column;
}
.author-box .author-thumb {
width: 100px;
}
.author-box .author-content {
margin-left: 0;
margin-top:1em;
}
.author-box .author-name{
text-align:center;
}
}
/*サイドバーのプロフィールボックス*/
.nwa .author-box{
flex-direction:column;
padding:1em 0;
}
.nwa .author-box .author-content {
margin-top:1em;
padding: 0;
}
/*プロフィールボックスのsnsフォローボタン*/
.author-box .sns-follow-buttons a.follow-button {
border-color:var(--main-color);
color: var(--main-color);
border-radius: 0;
}
/* ページネーション（次ページ）---------------------------------------------- */
.pagination-next-link{
background-color:initial;
border: none;
color: var(--main-color);
font-size: 1em;
display:flex;
justify-content: center;
align-items: center;
gap:5px;
}
.pagination-next-link:hover{
background-color:initial;
}
/*矢印を追加する*/
.pagination-next-link:after {
content: '';/*矢印の描写*/
border-bottom: 1px solid var(--cocoon-text-color);/*下矢印の太さ、種類、色*/
border-right: 1px solid var(--cocoon-text-color);/*右矢印の太さ、種類、色*/
width: 60px;/*矢印の幅*/
height: 3px;/*矢印の高さ*/
transform: skewX(45deg);/*矢印の角度*/
}
/* ページネーション（番号）---------------------------------------------- */
.page-numbers {
color: var(--main-color);
height: 40px;
width: 40px;
border: none;
box-shadow: 0 1px 1px var(--shadow-color);
line-height: 40px;
border-radius:0;
font-size: 16px;
}
.pagination a:hover {
background-color: var(--main-color);
color: var(--cocoon-white-color);
transform: translateY(-5px);
box-shadow: 0 5px 5px var(--shadow-color);
}
/*現在のページ*/
.pagination .current {
background-color:var(--main-color);
color:var(--cocoon-white-color);
}
/* 関連記事記事下ページ送り---------------------------------------------- */
/*835px以上*/
@media screen and (min-width: 835px){
.pager-post-navi{
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
.prev-post-title,
.next-post-title{
line-height:1.5;
font-size:12px;
}
:where(.prev-post-title,.next-post-title):before{
display:block;
font-size: 16px; /* 文字サイズ */
color:var(--main-color);
}
.next-post-title:before {
content: 'Next';
text-align:right;
}
.prev-post-title:before {
content: 'Prev';
}
.pager-post-navi a .iconfont{
color:var(--main-color);/*アイコン*/
}
.pager-post-navi a:hover{
background-color:var(--main-light-color);
}
/* カテゴリーラベル---------------------------------------------- */
.cat-label {
position: initial;
background-color:initial;
color: unset;
border:none;
padding:0;
}
.cat-label:before{
content: "－";
margin-right:8px;
}
.eye-catch .cat-label{
display: none;
}
/* カテゴリー、タグリンク--------------------------------------------- */
:is(.cat-link,.tag-link){
padding:0 .5em;
font-size: 11px;
border-radius:1px;
border: 1px solid var(--main-color);
}
.cat-link {
background-color: var(--main-color);
}
.tag-link{
color: var(--main-color);
}
.tag-link .fa-tag::before{
position:relative;
top:.2em;
}
.entry-tags .tax-icon {
margin-right: 0;
}
/* タグクラウド---------------------------------------------- */
.tagcloud a {
border:none;
border-radius:0;
font-size:1em;
padding-left:0;
}
.tagcloud a .tag-caption {
display: flex;
align-items: center;
}
.tagcloud a .tag-caption .tax-icon {
margin-right: 0.2em;
}
/* ワードプレスのタグクラウド（ブロック）---------------------------------------------- */
.wp-block-tag-cloud a {
display:flex;
font-size: .9em!important; /* 文字のサイズ */
line-height: 1;
margin-right:0;/*リセット*/
padding:.7em .9em;
border-radius: 2px; /* 角を丸くする */
border: none;
color: var(--main-color); /* 文字色 */
background: var(--main-light-color); /* 背景色 */
transition: ease-out .3s;/*アニメーションの指定*/
flex:1 1 auto;
gap:3px;
}
/* マウスホバー時の設定 */
.wp-block-tag-cloud a:hover {
background: var(--main-color); /* 背景色 */
color: #fff; /* 文字色 */
}
/*サイトマップ： ハシュタグ風に「#」を追記 */
.page-id-40131 .wp-block-tag-cloud a:before {
content: "#";
}
/*404ページ対応*/
.wp-block-tag-cloud span {
margin-left: 0;
display: inline-flex;
gap: 3px;
}
/* SNSシェア・フォローボタン---------------------------------------------- */
.bc-brand-color-white a {
border: none;
}
.ss-bottom{
margin-bottom:1em;
}
.sns-follow{
margin-bottom:3em;
}
.sns-buttons{
justify-content: center;
margin-bottom:0;
}
.main .sns-buttons a {
width: 34px!important;
height: 34px!important;
margin:2px;
border-radius:0;
background:initial;
opacity:.8;
}
.sns-follow-buttons a {
font-size:20px;
}
.sns-share-message, .sns-follow-message {
font-size: .8em;
}
/* SNSアイコンサイズ調整(上)---------------------------------------------- */
.sns-share.ss-high-and-low-lc a .social-icon {
font-size: 18px;
}
.sns-share-buttons a .button-caption {
display: none!important;
}
/*ホバー*/
.sns-buttons a{
transition:all .5s;
}
.sns-buttons a:hover{
transform: translateY(-4px);
/*transform: scale(1.1);*/
}
/***SNSボタン画面左に固定（トップのみ）***/
/*1023px以上*/
@media screen and (min-width: 1023px){
.ss-top .sns-share-buttons{
flex-direction: column;
position: fixed;
top: 50%;
transform: translatey(-50%);
left: 1%;
z-index: 999;
}
.ss-top .sns-share-buttons:before{
content:'SHARE';
font-size:12px;
}
}
/*834px以下*/
@media screen and (max-width: 834px){
.ss-top .sns-buttons a{
border:none;
}
}
/* コメント--------------------------------------------- */
.commets-list .comment-meta a {
font-size: .8em;
text-decoration: none;
text-align:right;
}
.commets-list > li {
border-top: 2px dashed var(--gray-color); /*スレッドを区切る線*/
margin: 30px 0;
padding-top: 20px;
}
.commets-list > li:first-child {
border: none;
margin-top: 0;
padding-top: 0;
}
.commets-list .children {
border-left: 2px solid var(--border-color); /*返信コメントの左側のボーダー*/
margin: 0;
padding-left:1em!important;
}
.commets-list .avatar { /*アバターの位置調整*/
float: left;
border-radius: 50%;
margin-right: 10px;
}
.comment-content { /*コメントの吹き出し*/
background-color:var(--gray-color);
padding: 1.5em;
margin: 20px 0 6px;
border-radius: 10px;
position: relative;
font-size:.9em!important;
}
.comment-content::before { /*吹き出しの三角部分*/
content: "";
position: absolute;
top: -14px;
left: 50px;
border-style: solid;
border-color:transparent transparent var(--gray-color) transparent;
border-width: 0 20px 20px 0;
}
.comment-content p { /*吹き出し内の文字を調整*/
margin:0!important;
}
.comment-reply-link { /*返信ボタンの装飾*/
color:var(--cocoon-white-color);
background-color:var(--main-color);
padding: 4px 10px;
font-size:12px;
transition: all .5s;
}
/*コメントを送信*/
input[type=submit] {
color:var(--cocoon-white-color);
background-color:var(--main-color);
border-color:var(--main-color);
transition:all .5s;
}
/* 最近のコメントウィジェット---------------------------------------------- */
/*全体*/
.recent-comments {
padding: 0em;
}
/*アバターの位置調整*/
.recent-comment-avatar .avatar {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right:0px;
}
/*名前部分*/
.recent-comment-author {
line-height:30px;
}
.recent-comment-info,
.recent-comment-article {
font-size:1em;
color:var(--main-color);
}
/*日付*/
.recent-comment-date{
text-align:right;
font-size:9px;
color:#999;
}
/*記事名*/
.recent-comment-article {
font-size: .8em;
margin-top: 1em;
}
/*コメント部分*/
.recent-comment-content {
padding: 1em;
border-color:var(--border-color);
position: relative;
color:var(--cocoon-text-color);/*消さない*/
}
.recent-comment-content:before{ /*吹き出しの三角部分*/
content:none;
}
/*吹き出しの三角部分（内側）*/
.recent-comment-content:after{
content: "";
position: absolute;
top: -12px;
left: 50px;
border-style:solid;
border-color:transparent transparent var(--cocoon-white-color) transparent;
border-width: 0 20px 20px 0;
transition: all .5s;
}
/*吹き出しの三角部分（外側）*/
.recent-comment-content:before{
content: "";
position: absolute;
top: -14px;
left: 52px;
border-style:solid;
border-color:transparent transparent var(--border-color) transparent;
border-width: 0 14px 14px 0;
}
/* 比較表---------------------------------------------- */
.compare-box :where(ul,ol,p){
margin-bottom:0!important;
}
/* 比較表全体 */
.compare-box {
display:flex;/* 配置 */
margin:3em auto;
border-radius:1px;/* 角丸 */
box-shadow: 0 1px 2px var(--shadow-color);
}
/* 左のボックス、右のボックス */
.compare-box :where(.compare-left-wrap, .compare-right-wrap){
flex-basis: 50%;
}
.compare-box .compare-left-wrap{
border-right:1px solid #eee;
}
/* 左のタイトル、右のタイトル */
.compare-box :where(.compare-left-head, .compare-right-head){
display: grid;
place-items: center;
height:50px;/* 縦幅 */
color:var(--cocoon-white-color);/* 文字色 */
font-weight: bold;/* 文字太さ */
opacity:.9;
}
/* 左のタイトル */
.compare-box .compare-left-head{
border-radius:1px 0 0 0;/* 角丸 */
background-color:var(--accent-color);/* 背景色 */
}
/* 右のタイトル */
.compare-box .compare-right-head{
border-radius:0 1px 0 0;/* 角丸 */
background-color:var(--second-color);/* 背景色 */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box :where(.compare-left, .compare-right){
padding:1em 1.5em;/* 余白 */
/*text-align: justify;均等割り付け*/
/*text-justify: inter-ideograph;段落両端 */
}
/*スマホで見たとき*/
@media screen and (max-width: 834px){
/* 左のタイトル、右のタイトル */
.compare-box :where(.compare-left-head, .compare-right-head){
height:40px;/* 高さ */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box :where(.compare-left, .compare-right){
padding:1em;/* 余白 */
font-size:.9em;
}
}
/************************************
箇条書きリスト余白調整
************************************/
/* リストスタイル---------------------------------------------- */
.has-list-style {
padding: 0;
}
/*リストスタイル○*/
.is-style-icon-list-circle > li::before {
color: #dd9999!important;
}
/*リストスタイル△*/
.is-style-icon-list-triangle > li::before {
color:var(--second-color)!important;
}
/*目次の最終行*/
.toc :last-child {
padding-bottom:0;
}
/*余白を狭くする*/
ol, ul {
padding-left: 25px;
}
@media screen and (max-width: 834px){
.article ul{
padding-left: 1em; /* 26px→1em */
}
ul.has-list-style{
padding-left: 0;/*リストスタイル調整*/
}
}
/*２行目以降のリストスタイルを消す*/
:where(ol,ul):not(.timeline) ul{
list-style: none;
padding-left:0;
}
ul.timeline ul ul {
list-style: none;
padding-left:0;
}
:where(ol,ul):not(.timeline) ul li{
margin:0;/*0.2emの余白を消す*/
}
::marker{
color:var(--main-color);
}
/* 箇条書き高さ調整--------------------------------------------- */
/*下余白追加*/
.article ul li:has(ol),
.article ul li:has(ul),
.article ol li:has(ol),
.article ol li:has(ul) {
padding-bottom:.3em;
margin-bottom:.3em;
}
:is(ol,ul).list-height li{
padding-bottom:.5em;
margin-bottom:.5em;
}
.block-box :where(ol,ul) li:has(ol):last-child,
.block-box :where(ol,ul) li:has(ul):last-child{
padding-bottom:0;
}
/* 箇条書きリストを横並びに---------------------------------------------- */
.list-flex{
display:flex;
flex-wrap: wrap;
}
.list-flex a{
text-decoration:none;
border-bottom:1px dashed var(--border-color);
}
/*olリスト*/
ol.list-flex{
gap:0 2em;
}
/* 箇条書き(番号)---------------------------------------------- */
.toc-list,
.ol-list{
counter-reset:number; /* 番号リセット */
list-style: none;/* 行頭番号削除 */
}
/* 箇条書き(番号) 行 */
.toc-list > li,
.ol-list > li{
position: relative;/* 配置 */
}
/* 箇条書き(番号) 行頭番号 */
.toc-list > li:before,
.ol-list > li:before{
counter-increment: number;/* 番号 */
position: absolute;/* 配置 */
}
.ol-list > li:before {
content: counter(number);
position: absolute;
top: 0.4em;
left: -1.8rem;
width: 1.3rem;
height: 1.3rem;
font-size: 13px;
font-weight: bold;
border-radius: 50%;
background-color: var(--main-color);
color: var(--cocoon-white-color);
display: grid;
place-content: center;
}
/*目次の番号*/
.toc-list > li:before{
content: counter(number, decimal-leading-zero); /* 入れ子なし、0付加表記*/
top:-.2em;/* 上からの距離 */
left:-2em;/* 左からの距離 */
font-size:1.1em;
color:var(--main-color);/*番号色*/
}
/*480px以下*/
@media screen and (max-width: 480px){
.toc-list > li:before{
top:-.1em;/* 上からの距離 */
}
}
.toc li {
margin: .2em;
}
/************************************
箇条書き(点)
************************************/
.ul-list{
list-style: none!important;
}
.ul-list > li{
position: relative;/*ここを基準に*/
}
.ul-list > li:before {
position: absolute;/*ここを動かす*/
content: '';
width: 7px;/*円の幅*/
height: 7px;/*円の高さ*/
top:.7em;/*高さの位置調整*/
left: -1em;/*左側位置調整*/
border-radius: 50%;
background-color:var(--main-color);
}
/* 色、スタイル変更---------------------------------------------- */
.square li:before{border-radius:0!important;}
.main-color li:before{background-color:var(--main-color)!important;}
.second-color li:before{background-color:var(--second-color)!important;}
.accent-color li:before{background-color:var(--accent-color)!important;}
.has-blue-border-color li:before{background-color:var(--cocoon-blue-color)!important;}
/*リストに下線を引く---------------------------------------------- */
.timeline-item-snippet{
border-bottom:1px dashed var(--border-color);
}
.under-line > li {
border-bottom:1px dashed var(--border-color);
}
.block-box .under-line > li:last-child{
border:none;
}
/************************************
Cocoonボックス
************************************/
/* 新着情報 */
.info-list-item {
display: flex;
flex-direction: column;
}
.info-list-item-content {
margin-bottom: 0;
}
.info-list-item-meta {
order: -1;
padding-bottom: .5em;
}
.info-list-item-categorys .entry-category {
margin-right: 0;
}
/*汎用ボックス共通---------------------------------------------- */
.block-box-label {
align-items: center;
}
/* 白抜きボックス ------------------------------------------------------------ */
/* 個別スタイル用：共通の余白設定 */
[class*="is-style-blank-"] {
padding: 2em;
}
/* 共通の角丸設定 ------------------------------------------------------------ */
/* 角丸なし（直角） */
.blank-box:is(
.is-style-blank-1,
.is-style-blank-2,
.is-style-blank-3,
.is-style-blank-4,
.is-style-blank-5,
.is-style-blank-8,
.is-style-blank-9,
.is-style-blank-10,
.is-style-blank-11,
.is-style-blank-12,
.is-style-blank-13) {
border-radius: 0;
}
/* 角丸あり */
.blank-box:is(
.is-style-blank-6,
.is-style-blank-7
) {
border-radius: 20px;
}
/* 各スタイル定義 ------------------------------------------------------------ */
/* スタイル1：ダブル線・太枠 */
.blank-box.is-style-blank-1 {
border: 4px double;
}
/* スタイル2：細い実線 */
.blank-box.is-style-blank-2 {
border-width: 1px;
}
/* スタイル3：太い実線 */
.blank-box.is-style-blank-3 {
border-width: 5px;
}
/* スタイル4：細い点線 */
.blank-box.is-style-blank-4 {
border: 1px dashed;
}
/* スタイル5：やや太い点線 */
.blank-box.is-style-blank-5 {
border: 2px dashed;
}
/* スタイル6：角丸＋細いドット線 */
.blank-box.is-style-blank-6 {
border: 2px dotted;
}
/* スタイル7：角丸＋太いドット線 */
.blank-box.is-style-blank-7 {
border: 4px dotted;
}
/* スタイル8：上のみ枠線（太線） */
.blank-box.is-style-blank-8 {
border-width: 5px 0 0 0;
}
/* スタイル9：左のみ枠線（太線） */
.blank-box.is-style-blank-9 {
border-width: 0 0 0 5px;
}
/* スタイル10：斜めストライプ背景 */
.blank-box.is-style-blank-10 {
border: 0;
background: repeating-linear-gradient(
-45deg,
#f2f3f7 0,
#f2f3f7 3px,
transparent 3px,
transparent 6px
);
}
/* スタイル11：チェック背景 */
.blank-box.is-style-blank-11 {
border: 0;
background:
linear-gradient(0deg, transparent 19px, #ccc 20px),
linear-gradient(90deg, transparent 19px, #ccc 20px);
background-size: 20px 20px;
}
/* スタイル12：右上折り返し効果 */
.blank-box.is-style-blank-12 {
border: 0;
position: relative;
}
.blank-box.is-style-blank-12::after {
content: '';
position: absolute;
top: 0;
right: 0;
border: solid;
border-width: 0 20px 20px 0;
border-color: #ccc #fff #ccc;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
/* スタイル13：破線の外枠（内側に重ねる） */
.blank-box.is-style-blank-13 {
border: 0;
position: relative;
z-index: 0;
}
.blank-box.is-style-blank-13::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 5px;
border: 1px dashed #fff;
border-radius: 5px;
z-index: -1;
display: block;
}
/*--------------------------------------
アイコンボックスカスタマイズ
----------------------------------------*/
/* アイコン変更：メモアイコン（FontAwesome） */
[class*="myicon-"].memo-box::before {
content: "\f304";
}
/*--------------------------------------
共通：角の丸み設定
----------------------------------------*/
.wp-block-cocoon-blocks-icon-box[class*="myicon-square"] {
border-radius: 0; /* 四角 */
}
.wp-block-cocoon-blocks-icon-box[class*="myicon-radius"] {
border-radius: 8px; /* 丸みあり */
}
/*--------------------------------------
スタイル1・2・3の設定
----------------------------------------*/
.wp-block-cocoon-blocks-icon-box[class*="1-myicon"],
.wp-block-cocoon-blocks-icon-box[class*="2-myicon"],
.wp-block-cocoon-blocks-icon-box[class*="3-myicon"] {
padding: 1.2em 1.5em 1.2em 4em; /* 上右下左 */
}
.wp-block-cocoon-blocks-icon-box[class*="2-myicon"],
.wp-block-cocoon-blocks-icon-box:where(.is-style-6-myicon-square,.is-style-6-myicon-radius){
border-width: 0; /* 枠なし */
}
.wp-block-cocoon-blocks-icon-box[class*="3-myicon"],
.wp-block-cocoon-blocks-icon-box[class*="7-myicon"],
.wp-block-cocoon-blocks-icon-box:where(.is-style-6-myicon-square-bgnone,.is-style-6-myicon-radius-bgnone) {
border-width: 2px; /* 外枠の太さ */
}
/* 背景色なし */
.wp-block-cocoon-blocks-icon-box[class*="square-bgnone"],
.wp-block-cocoon-blocks-icon-box[class*="radius-bgnone"] {
background-color: transparent;
}
/* アイコンサイズ調整 */
.wp-block-cocoon-blocks-icon-box[class*="1-myicon"]::before,
.wp-block-cocoon-blocks-icon-box[class*="2-myicon"]::before,
.wp-block-cocoon-blocks-icon-box[class*="3-myicon"]::before {
font-size: 1em;
padding: 0;
}
/*--------------------------------------
スタイル4・5の設定
----------------------------------------*/
.wp-block-cocoon-blocks-icon-box[class*="4-myicon"],
.wp-block-cocoon-blocks-icon-box[class*="5-myicon"] {
border-width: 5px;
padding: 1em 1.5em 1em 3em;
}
/* スタイル4：下左右の枠を非表示 */
.wp-block-cocoon-blocks-icon-box[class*="4-myicon"] {
border-right: none;
border-left: none;
border-bottom: none;
}
/* スタイル5：上下右の枠を非表示 */
.wp-block-cocoon-blocks-icon-box[class*="5-myicon"] {
border-top: none;
border-right: none;
border-bottom: none;
}
/* アイコンスタイル調整（スタイル4・5） */
.wp-block-cocoon-blocks-icon-box[class*="4-myicon"]::before,
.wp-block-cocoon-blocks-icon-box[class*="5-myicon"]::before {
font-size: 1em;
border-right: 0;
padding: 0;
}
/*--------------------------------------
スタイル6の設定
----------------------------------------*/
/* ボックス余白 */
.wp-block-cocoon-blocks-icon-box[class*="6-myicon"] {
padding: 2em;
}
/* アイコン中央寄せ＋丸背景 */
.wp-block-cocoon-blocks-icon-box[class*="6-myicon"]::before {
display: grid;
place-content: center;
margin: 0;
padding: 0;
width: 2em;
height: 2em;
border-right: 0;
border-radius: 50%;
font-size: 0.9em;
color: #fff;
box-shadow: 0 0 0 2px #fff;
top: -1em;
left: 0.75em;
}
/*--------------------------------------
アイコン背景色（種類別）
----------------------------------------*/
.information-box[class*="6-myicon"]::before {
background-color: #87cefa; /* 情報 */
}
.question-box[class*="6-myicon"]::before {
background-color: gold; /* 質問 */
}
.alert-box[class*="6-myicon"]::before {
background-color: #f3aca9; /* アラート */
}
.memo-box[class*="6-myicon"]::before {
background-color: #7ad0b6; /* メモ */
}
.comment-box[class*="6-myicon"]::before {
background-color: #999; /* コメント */
}
.ok-box[class*="6-myicon"]::before {
background-color: #3cb2cc; /* OK */
}
.ng-box[class*="6-myicon"]::before {
background-color: #dd5454; /* NG */
}
.good-box[class*="6-myicon"]::before {
background-color: #98e093; /* GOOD */
}
.bad-box[class*="6-myicon"]::before {
background-color: #eb6980; /* BAD */
}
.profile-box[class*="6-myicon"]::before {
background-color: #999; /* プロフィール */
}
/* コメント・プロフィール用の背景と枠色 */
:where(.comment-box, .profile-box)[class*="2-myicon"],
:where(.comment-box, .profile-box)[class*="4-myicon"],
:where(.comment-box, .profile-box)[class*="5-myicon"],
:where(.comment-box, .profile-box)[class*="6-myicon"]{
background-color: #f8f8f8;
border-color: #aaa;
}
/*--------------------------------------
モバイル（480px以下）対応
----------------------------------------*/
@media screen and (max-width: 480px) {
/* 内側余白調整（スタイル1〜3） */
.wp-block-cocoon-blocks-icon-box[class*="1-myicon"],
.wp-block-cocoon-blocks-icon-box[class*="2-myicon"],
.wp-block-cocoon-blocks-icon-box[class*="3-myicon"] {
padding: 1em 1.5em 1em 3.5em;
}
/* 内側余白調整（スタイル4・5） */
.wp-block-cocoon-blocks-icon-box[class*="4-myicon"],
.wp-block-cocoon-blocks-icon-box[class*="5-myicon"] {
padding: 1em 1.5em 1em 3em;
}
/* アイコンの位置とサイズ（モバイル） */
.wp-block-cocoon-blocks-icon-box[class*="1-myicon"]::before,
.wp-block-cocoon-blocks-icon-box[class*="2-myicon"]::before,
.wp-block-cocoon-blocks-icon-box[class*="3-myicon"]::before,
.wp-block-cocoon-blocks-icon-box[class*="4-myicon"]::before,
.wp-block-cocoon-blocks-icon-box[class*="5-myicon"]::before {
top: 50%;
left: 5px;
margin-left: 0;
width: 35px;
}
/* アイコン横に線を追加（モバイル） */
.wp-block-cocoon-blocks-icon-box[class*="1-myicon"]::before,
.wp-block-cocoon-blocks-icon-box[class*="2-myicon"]::before,
.wp-block-cocoon-blocks-icon-box[class*="3-myicon"]::before {
border-right: 1px solid;
}
}
/* 見出しボックス---------------------------------------------- */
.caption-box {
border-width:1px;
border-radius:0px;/* 角丸 */
}
.caption-box-content {
padding:var(--box-padding);
}
.caption-box-label{
justify-content: center;
padding:.5em;
font-weight:bold;
}
/* ラベルボックス-------------------------------------------------------- */
/* 共通スタイル */
.label-box[class*="is-style-label"]{
position: relative; /* 子要素を配置する際の基準点 */
}
[class*="is-style-label"] .label-box-content {
margin-top: 0; /* 上の余白をリセット */
border-width: 2px; /* 枠線の幅を設定 */
color:var(--cocoon-text-color)!important; /* テキストの色を設定 */
}
/* 丸み設定 */
:where(.is-style-labelout,.is-style-labelin,.is-style-labelicon) .label-box-content {
border-radius: 2px; /* 角を四角に */
}
/* スタイル1（ラベルアウト） */
[class*="is-style-labelout"] .label-box-label {
position: absolute; /* ラベルを絶対位置に配置 */
top: -.8em; /* 上位置を調整 */
padding:0 .5em; /* 内側余白を上下ゼロ、左右に設定 */
text-shadow: none; /* テキストシャドウを削除 */
background-color:var(--cocoon-white-color); /* 背景色を白に設定 */
}
[class*="is-style-labelout"] .label-box-content {
padding: 2em; /* コンテンツの内側余白を設定 */
background-color: transparent!important;/* 背景色なし */
}
/* スタイル2（ラベルイン） */
[class*="is-style-labelin"] .label-box-label {
position: absolute; /* ラベルを絶対位置に配置 */
top: 1.5em; /* 上位置を調整 */
left: 2em;
padding:0; /* 内側余白を上下ゼロ、左右に設定 */
margin:0;
text-shadow: none; /* テキストシャドウを削除 */
}
[class*="is-style-labelin"] .label-box-content {
padding:3em 2em 1.5em; /* 内側余白を上に広く設定 */
}
/* スタイル3（アイコン） */
[class*="is-style-labelicon"] .label-box-label {
display: grid; /* ラベル内のアイテムをグリッドで配置 */
place-content: center; /* 中央に配置 */
height: 100%; /* 高さを親要素に合わせる */
position: absolute; /* ラベルを絶対位置に配置 */
top: 0; /* 上位置を調整 */
margin: 0; /* 外側余白をゼロに設定 */
padding: 0 .5em; /* 内側余白を設定 */
text-shadow: none; /* テキストシャドウを削除 */
font-size:1em; /* フォントサイズを設定 */
}
[class*="is-style-labelicon"] .label-box-label:before {
border-right: 1px solid var(--cocoon-custom-border-color); /* 右側に線を追加 */
color: var(--cocoon-custom-border-color); /* 線の色を設定 */
line-height: 1em; /* 行の高さを設定 */
text-align: center; /* テキストを中央揃え */
width: 2.5em; /* 幅を設定 */
margin:0; /* 外側余白 */
}
[class*="is-style-labelicon"] .label-box-label-text {
display: none; /* ラベルテキストを非表示 */
}
[class*="is-style-labelicon"] .label-box-content{
padding: 1.5em 1.5em 1.5em 4em; /* 内側余白（上・右・下・左） */
}
/* CVGアイコン用修正コード-------------------------------------------------------- */
[class*="is-style-labelicon"] .label-box-label {
display: inline-flex;
}
/*アイコン右側に線を追加*/
[class*="is-style-labelicon"] .label-box-label::after {
content: '';
display: inline-block;
width: 1px;
height: 1em;
background-color: var(--cocoon-custom-border-color);
}
[class*="is-style-labelicon"] .label-box-label:before {
margin:-1px; /* 外側余白（0→調整） */
}
/*タブボックス----------------------------------------------*/
.wp-block-cocoon-blocks-tab-box-1.blank-box{
padding:2em 1.5em 1.5em;
}
.blank-box.bb-tab .bb-label {
border-radius:0;
top: 0;
left: 0;
}
/*タブ見出しボックスのラベルスタイル ----------------------------------------------*/
.is-style-5-my-tab-caption .tab-caption-box-label {
display:flex; /*変更しない*/
justify-content: center;
}
/* タブ見出しボックスのスタイル ------------------------------------ */
/* 共通スタイル */
[class*="-my-tab-caption"] .tab-caption-box-label {
font-weight: bold;
}
[class*="-my-tab-caption-position"].tab-caption-box {
position: relative; /* ラベル配置の基準 */
}
[class*="-my-tab-caption-position"] .tab-caption-box-label {
position: absolute; /* ラベルを絶対配置 */
}
/* 共通：box-content スタイル */
[class*="-my-tab-caption"] .tab-caption-box-content {
border-width: 1px;
}
/* スタイル1：ラベルが左上に表示される */
.is-style-1-my-tab-caption .tab-caption-box-content {
padding: 1.5em 2em;
margin-top: -1px;
border-radius: 0;
}
.is-style-1-my-tab-caption .tab-caption-box-label {
padding: 0 1em;
border-radius: 2px 2px 0 0;
}
/* スタイル2：ラベルが枠内左上 */
.is-style-2-my-tab-caption-position .tab-caption-box-content {
padding: 2.5em 2em 1.5em;
border-radius: 0;
}
.is-style-2-my-tab-caption-position .tab-caption-box-label {
padding: 0 1em;
border-radius: 0 0 1px 0;
top: 0;
left: 0;
}
/* スタイル3,4：ラベルを枠に重ねて配置 */
:where(.is-style-3-my-tab-caption-position, .is-style-4-my-tab-caption-position) .tab-caption-box-content {
padding: 2em;
border-radius:3px;
}
:where(.is-style-3-my-tab-caption-position, .is-style-4-my-tab-caption-position) .tab-caption-box-label {
top: -0.8em;
left: 1em;
}
.is-style-3-my-tab-caption-position .tab-caption-box-label {
padding: 0 1em;
border-radius: 3px;
}
.is-style-4-my-tab-caption-position .tab-caption-box-label {
padding: 0 1.2em;
border-radius: 30px;
}
/* スタイル5：ラベルが幅いっぱいに表示される */
.is-style-5-my-tab-caption .tab-caption-box-content {
padding: 1.5em 2em 1.5em;
border-radius: 0;
}
.is-style-5-my-tab-caption .tab-caption-box-label {
padding: 0.5em 1em;
border-radius: 0;
width: 100%;
text-align: center;
}
/* スタイル6,7 共通：アイコン表示向けのラベル配置 */
:where(.is-style-6-my-tab-caption-position, .is-style-7-my-tab-caption-position) .tab-caption-box-label {
display: grid;
place-content: center;
line-height: 2em;
}
:where(.is-style-6-my-tab-caption-position, .is-style-7-my-tab-caption-position) .block-box-label::before {
margin-right: 0;
}
:where(.is-style-6-my-tab-caption-position, .is-style-7-my-tab-caption-position) .tab-caption-box-label-text {
display: none;
}
/* スタイル6：丸アイコンが左上に表示される */
.is-style-6-my-tab-caption-position .tab-caption-box-content {
padding: 1.5em 2em;
border-radius: 4px;
border-width: 2px;
}
.is-style-6-my-tab-caption-position .tab-caption-box-label {
width: 2em;
height: 2em;
padding: 0;
border-radius: 99px;
top: -0.9em;
left: 1em;
box-shadow: 0 0 0 2px;
font-size: 1em;
}
/* スタイル7：縦長のアイコンが左に表示される */
.is-style-7-my-tab-caption-position .tab-caption-box-content {
padding: 1.5em 1.5em 1.5em 3.5em;
border-radius: 0;
}
.is-style-7-my-tab-caption-position .tab-caption-box-label {
padding: 0;
border-radius: 0;
top: 0;
left: 0;
height: 100%;
width: 2.2em;
}
/* ラベルテキストの省略（三点リーダー）対応 */
:where(
.is-style-1-my-tab-caption,
.is-style-2-my-tab-caption-position,
.is-style-3-my-tab-caption-position,
.is-style-4-my-tab-caption-position
) .tab-caption-box-label {
max-width: calc(100% - 2em);
display: flex;
}
:where(
.is-style-1-my-tab-caption,
.is-style-2-my-tab-caption-position,
.is-style-3-my-tab-caption-position,
.is-style-4-my-tab-caption-position
) .tab-caption-box-label-text {
min-width: 0;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ::before 擬似要素には最小幅を適用しない */
:where(
.is-style-1-my-tab-caption,
.is-style-2-my-tab-caption-position,
.is-style-3-my-tab-caption-position,
.is-style-4-my-tab-caption-position
) .tab-caption-box-label::before {
flex-shrink: 0;
}
/* タブブロックのスタイル ---------------------------------------------- */
/* コンテンツ全体の共通設定 */
[class*="tab--02"] .tab-content-group,
[class*="tab--03"] .tab-content-group,
[class*="tab--04"] .tab-content-group,
[class*="tab--05"] .tab-content-group,
[class*="tab--06"] .tab-content-group,
[class*="tab--07"] .tab-content-group,
[class*="tab--08"] .tab-content-group,
[class*="tab--09"] .tab-content-group,
[class*="tab--10"] .tab-content-group {
border: none;
padding: 1.2em 0;
}
/* タブ間の隙間なし（tab--01） */
[class*="tab--01"] .tab-label-group {
gap: 0;
}
[class*="tab--01"] .tab-content-group {
border-radius: 0;
}
[class*="tab--01"] .tab-label-group .tab-label {
border-radius: 0;
}
/* タブラベル共通 */
[class*="tab--"] .tab-label-group .tab-label {
padding: 0.6em 1.5em;
text-align: center;
transition: 0.3s all;
border-radius: 1px;
}
/* 丸タブ（tab--04/05/08/09） */
[class*="tab--04"] .tab-label-group .tab-label,
[class*="tab--05"] .tab-label-group .tab-label,
[class*="tab--08"] .tab-label-group .tab-label,
[class*="tab--09"] .tab-label-group .tab-label {
border-radius: 99px;
}
/* タブ幅均等配置（2/3タブ） */
[class*="is-style-2tab"] .tab-label-group .tab-label,
[class*="is-style-3tab"] .tab-label-group .tab-label {
flex: 1;
}
/* タブ折り返し（3タブ以上） */
[class*="is-style-3tab"] .tab-label-group {
flex-wrap: wrap;
}
/* 吹き出しタブ共通 */
[class*="tab--03"] .tab-label-group,
[class*="tab--05"] .tab-label-group,
[class*="tab--07"] .tab-label-group,
[class*="tab--09"] .tab-label-group{
gap: 7px 3px;
padding-bottom: 1em;
}
[class*="tab--03"] .tab-label-group .tab-label,
[class*="tab--05"] .tab-label-group .tab-label,
[class*="tab--07"] .tab-label-group .tab-label,
[class*="tab--09"] .tab-label-group .tab-label{
position: relative;
}
[class*="tab--03"] .tab-label-group .tab-label.is-active:before,
[class*="tab--05"] .tab-label-group .tab-label.is-active:before,
[class*="tab--07"] .tab-label-group .tab-label.is-active:before,
[class*="tab--09"] .tab-label-group .tab-label.is-active:before{
background-color: var(--cocoon-tab-label-active-color);
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -7px;
height: 8px;
width: 16px;
z-index: 1;
}
/* 枠線タブ（tab--06〜09） */
[class*="tab--06"] .tab-label-group .tab-label,
[class*="tab--07"] .tab-label-group .tab-label,
[class*="tab--08"] .tab-label-group .tab-label,
[class*="tab--09"] .tab-label-group .tab-label {
border: 1px solid var(--cocoon-tab-label-active-color);
}
[class*="tab--06"] .tab-label-group .tab-label:not(.is-active),
[class*="tab--07"] .tab-label-group .tab-label:not(.is-active),
[class*="tab--08"] .tab-label-group .tab-label:not(.is-active),
[class*="tab--09"] .tab-label-group .tab-label:not(.is-active),
[class*="tab--10"] .tab-label-group .tab-label:not(.is-active) {
background-color: unset;
}
/* 下線タブ（tab--10） */
[class*="tab--10"] .tab-label-group .tab-label {
background: none;
border-bottom: 2px solid var(--cocoon-tab-label-color);
}
[class*="tab--10"] .tab-label-group .tab-label.is-active {
background: none;
border-color: var(--cocoon-tab-label-active-color);
color: var(--cocoon-tab-label-active-color);
}
/* ホバー時の共通設定 */
[class*="tab--01"] .tab-label-group .tab-label:hover,
[class*="tab--02"] .tab-label-group .tab-label:hover,
[class*="tab--03"] .tab-label-group .tab-label:hover,
[class*="tab--04"] .tab-label-group .tab-label:hover,
[class*="tab--05"] .tab-label-group .tab-label:hover,
[class*="tab--06"] .tab-label-group .tab-label:hover,
[class*="tab--07"] .tab-label-group .tab-label:hover,
[class*="tab--08"] .tab-label-group .tab-label:hover,
[class*="tab--09"] .tab-label-group .tab-label:hover {
background-color: var(--cocoon-tab-label-active-color);
color: var(--cocoon-white-color);
}
[class*="tab--10"] .tab-label-group .tab-label:hover {
border-color: var(--cocoon-tab-label-active-color);
color: var(--cocoon-tab-label-active-color);
}
/* キーボードキー--------------------------------------------- */
.keyboard-key {
background-color:initial;
border: 1px solid #888;
border-radius: 1px;
box-shadow:none;
font-size: 0.9em;
padding:1px 5px;
}
/* 微調整 */
.comment-content .blogcard-wrap {
width: 100%; /* カード幅100% */
}
/* ブログカードスタイル --------------------------------------------------- */
/* ホバー時のブログカードの影と背景色の設定 */
[class*="is-style-card-1"] .blogcard-wrap:hover,
[class*="is-style-card-2"] .blogcard-wrap:hover {
background-color: transparent;
box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
}
[class*="is-style-card-1"] .blogcard-wrap {
width: 100%;
}
/* ブログカードのコンテンツ部分の行間設定 */
[class*="is-style-card-1"] .blogcard-content {
line-height: 1.4;
}
[class*="is-style-card-2"] .blogcard-content {
line-height: 1.6;
}
/* ラベルの位置とデザイン */
[class*="is-style-card-"] .blogcard-label {
top: -11px;
font-size: .7em;
color: #666;
background-color: #fff;
}
/* 枠線の設定 */
[class*="is-style-card-"] .blogcard {
border-color: #ccc;
border-radius: 0;
}
/* パディングの設定 */
:where(.is-style-card-1-1, .is-style-card-1-2, .is-style-card-1-3, .is-style-card-1-4, .is-style-card-1-5) .blogcard,
[class*="is-style-card-2"] .blogcard {
padding: 1em;
}
:where(.is-style-card-1-6, .is-style-card-1-7) .blogcard {
padding: 1.5em;
}
/* ブログカードのタイトルスタイル設定 */
[class*="is-style-card-"] .blogcard-title {
font-size: .95em;
}
/* タイトル下の余白 */
:where(.is-style-card-1-1, .is-style-card-1-2, .is-style-card-1-3, .is-style-card-1-6) .blogcard-title {
margin-bottom: 0.2em;
}
:where(.is-style-card-1-4, .is-style-card-1-5, .is-style-card-1-7, .is-style-card-txt) .blogcard-title {
margin-bottom: 0;
}
/* 特定スタイルのタイトルを2行に制限 */
:where(.is-style-card-1-1, .is-style-card-1-2, .is-style-card-1-3, .is-style-card-1-4, .is-style-card-1-5) .blogcard-title,
[class*="is-style-card-2"] .blogcard-title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
:where(.is-style-card-1-1, .is-style-card-1-2, .is-style-card-1-3, .is-style-card-1-5) .blogcard-title,
[class*="is-style-card-2"] .blogcard-title {
-webkit-line-clamp: 2;
}
.is-style-card-1-4 .blogcard-title {
-webkit-line-clamp: 3;
}
/* ブログカードスニペットの行制限と透明度 */
:where(.is-style-card-1-2, .is-style-card-1-6) .blogcard-snippet {
-webkit-line-clamp: 2;
}
/* 特定スタイルのブログカードフッターを非表示 */
:where(
.is-style-card-1-3,
.is-style-card-1-4,
.is-style-card-1-5,
.is-style-card-1-6,
.is-style-card-1-7,
.is-style-card-txt,
.is-style-card-2-2,
.is-style-card-2-3
) .blogcard-footer {
display: none;
}
/* スタイルによってスニペットを非表示 */
:where(
.is-style-card-1-4,
.is-style-card-1-5,
.is-style-card-1-7,
.is-style-card-txt,
.is-style-card-2-3
) .blogcard-snippet {
display: none;
}
/* 「続きを読む」ボタンを追加 */
:where(.is-style-card-1-2, .is-style-card-1-5, .is-style-card-2-3) .blogcard::after {
display: block;
content: 'Read More';
color: #fff;
background-color: var(--main-color);
font-size: 12px;
border-radius: 30px;
z-index: 1;
}
:where(.is-style-card-1-2, .is-style-card-1-5) .blogcard::after {
position: absolute;
bottom: 1rem;
right: 1rem;
width: fit-content;
padding: 0.3em 2em;
}
.is-style-card-2-3 .blogcard::after {
position: relative;
width: 100%;
text-align: center;
padding: .5em 0;
}
.is-style-card-2-3 .blogcard-content {
min-height: 60px;
}
/* 「続きを読む」ボタンのホバー時の透明度 */
:where(.is-style-card-1-2, .is-style-card-1-5, .is-style-card-2-3) a.blogcard-wrap:hover .blogcard::after {
opacity: .8;
}
/* style-6, style-7, テキストリンクでサムネイルを非表示に */
:where(.is-style-card-1-6, .is-style-card-1-7, .is-style-card-txt) .blogcard-thumbnail {
display: none;
}
/* 特定のスタイルでブログカードコンテンツのマージンと最小高さをリセット */
:where(.is-style-card-1-6, .is-style-card-1-7, .is-style-card-txt) .blogcard-content {
margin-left: 0;
min-height: unset;
}
/* テキストリンク設定 */
.is-style-card-txt .a-wrap.blogcard-wrap {
display: flex;
width: 100%;
background-color: unset;
}
.is-style-card-txt .blogcard {
border-width: 0;
padding: 0;
}
.is-style-card-txt .blogcard-label {
display: none;
}
.is-style-card-txt .blogcard-title {
color: #757F96;
}
.is-style-card-txt .blogcard-title:hover {
text-decoration: underline;
}
/* アイコン追加 */
.is-style-card-txt .blogcard-content {
display: flex;
align-items: center;
}
.is-style-card-txt .blogcard-content::before {
font-family: "Font Awesome 5 Free";
content: "\f0c1";
font-weight: bold;
margin:0 10px;
color: var(--cocoon-text-color);
}
@media screen and (max-width: 834px) {
.is-style-card-txt .blogcard-title {
font-size: .9rem;
}
}
/* 縦型スタイル設定 */
[class*="is-style-card-2"] .blogcard-wrap {
max-width: 320px;
}
[class*="is-style-card-2"] .blogcard {
display: flex;
flex-direction: column;
}
[class*="is-style-card-2"] .blogcard-thumbnail {
float: none;
margin: 0 0 5px;
width: 100%;
}
[class*="is-style-card-2"] .blogcard-content {
margin-left: 0;
}
/* ブロックボックス内のブログカード調整 */
.block-box .blogcard-wrap {
width: 100%;
background-color: transparent;
}
.block-box .a-wrap.blogcard-wrap:hover {
box-shadow: none;
}
.block-box .blogcard {
border-width: 0;
padding: 0;
}
.block-box .blogcard-label {
display: none;
}
.block-box .blogcard::after {
bottom: 0;
right: 0;
}
/* 追加用：ブログカードのアイコン変更 */
.bct-related .blogcard-label .fa::before,/*関連記事*/
.bct-reference .blogcard-label .fa::before,/*参考記事*/
.bct-reference-link .blogcard-label .fa::before,/*参考リンク*/
.bct-popular .blogcard-label .fa::before,/*人気記事*/
.bct-together .blogcard-label .fa::before,/*合わせてよみたい*/
.bct-detail .blogcard-label .fa::before,/*詳細はこちら*/
.bct-pickup .blogcard-label .fa::before,
.bct-official .blogcard-label .fa::before/*ピックアップ*/{
content: "\f518";
}
/* ブログカードファビコン調整 */
.blogcard-site {
align-items: baseline;
}
/* 検索ボックスフォーム---------------------------------------------- */
div.search-form {
max-width: 100%;
}
.search-form div.sbtn {
background-color:var(--main-color);
}
.search-form div.sbtn::after {
font-weight: 900;
content: "\f245";
bottom: -1.2em;
right: 0px;
font-size: 24px;
}
/* マイクロバルーン---------------------------------------------- */
.micro-balloon{
border-color:#aaa;/*固定*/
border-radius: 2px;
line-height: 1.4;
padding:.5em 1.25em;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size:1em;
}
.micro-balloon.micro-top:before,
.micro-balloon.micro-top:after{
top: 100%;
}
.micro-balloon.micro-bottom:before,
.micro-balloon.micro-bottom:after{
bottom:100%;
}
.micro-balloon.micro-bottom:before,
.micro-balloon.micro-bottom:after{
bottom:100%;
}
/* cocoon吹き出し---------------------------------------------- */
/*フラットのスタイル*/
.sbs-flat {
--cocoon-custom-background-color:var(--main-light-color);
--cocoon-custom-border-color:var(--main-light-color);
--cocoon-custom-text-color: var(--cocoon-text-color);
}
div.speech-balloon {
border-width:1px;
border-radius:8px;
padding:1em!important;
max-width:100%;
}
@media screen and (min-width: 481px) {
.speech-wrap {
align-items: center; /*縦位置中央*/
}
.speech-person {
width: 10%;
min-width: 10%;
}
}
/*線を細くする*/
.speech-balloon::after{
left: -11px;
}
.sbp-r:not(.not-nested-style) .speech-balloon::after,
.cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::after{
right: -10px;
}
@media screen and (max-width: 480px) {
.cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::after{
right: -5px;
}
}
/* ソースコード---------------------------------------------- */
.wp-block-code code {
white-space: pre-wrap;
}
pre{
position: relative;
padding:1em!important;
border:none;
border-radius:5px;
}
/* ソースコードタイトル */
pre:after{
padding :1px 12px;
position: absolute;
top:0px;
right:0px;
color: var(--main-color);
font-size: 0.7em;
border-radius:0px;
}
pre.html:after{
content:"HTML";
}
pre.php:after{
content:"PHP";
}
pre.css:after{
content:"CSS";
}
pre.javascript:after{
content:"JavaScript";
}
/* コピーボタン*/
#selectPre {
position: absolute;
top: 1.5rem;
right: 10px;
border: none;
background-color: var(--main-color);
color: var(--cocoon-white-color);
padding: 3px 8px;
border-radius: 1px;
font-size:.7em;
}
#selectPre:before{
font-family: "Font Awesome 5 Free";
font-weight:bold;
content: "\f0c5";
margin:0 2px;
}
/* 表｜テーブルスタイル調整---------------------------------------------- */
.wp-block-flexible-table-block-table {
overflow-x: auto;
}
table th, table td {
padding: 1em .8em!important;
text-align: center!important;
min-width: 100px !important;
max-width: 200px !important;
white-space: normal !important;
}
@media screen and (min-width: 835px) {
table th, table td {
font-size: .9em;
}
}
/* 枠線の色 */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td,
table:not(.has-border-color) :where(th, td) {
border-color:var(--cocoon-basic-border-color);
}
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th,
.entry-content th {
background-color: var(--main-sub-color);
color:var(--main-color);
}
:where(table th,table td) .wp-block-image{
margin-bottom:0!important;
}
table a{
text-decoration:none;
}
/* 一列目固定 */
.sticky :where(table th,table td):first-child {
position: sticky;
left: -1px;
z-index: 1;
font-weight:bold;
background-color: var(--main-sub-color);
color:var(--main-color);
}
table tr:nth-of-type(2n+1) {
background-color:var(--cocoon-white-color); /* 奇数行背景色 */
}
.s-circle:before, .d-circle:before, .triangle:before, .cross:before, .b-check:before, .b-question:before, .b-none:before {
height: 3em;
width: 3em;
opacity: 0.2;
}
/*テーブル記号の色〇*/
.s-circle:before {
background-color:var(--cocoon-red-color);
}
/*テーブル記号の色×*/
.cross:before {
background-color:var(--cocoon-blue-color);/*#00bcd4;*/
}
/* テーブルの角丸設定 -------------------------------------------------- */
[class*="is-style-mytable"].wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table,
[class*="is-style-mytable"] table {
border-collapse: separate; /* 角丸を有効にする */
border-spacing: 0;
}
/* 上部角丸（全体） */
.is-style-mytable-1 table:has(thead) tr:first-child th:first-child,
.is-style-mytable-1 table:not(:has(thead)) tbody tr:first-child td:first-child{
border-top-left-radius: 10px;
}
.is-style-mytable-1 table:has(thead) thead tr:first-child th:last-child,
.is-style-mytable-1 table:not(:has(thead)) tbody tr:first-child td:last-child{
border-top-right-radius: 10px;
}
/* 上部角丸（個別） */
.is-style-mytable-2 table th{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* 下部角丸 */
[class*="is-style-mytable"] tbody tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
[class*="is-style-mytable"] tbody tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
/* 上部ボーダーの調整 */
/* thead がある場合の td 全体の上ボーダーを消す */
[class*="is-style-mytable"] table:has(thead) tr td,
/* thead がない場合は 2行目以降の td の上ボーダーを消す */
[class*="is-style-mytable"] table:not(:has(thead)) tr:not(:first-child) td {
border-top: none!important;
}
/* 横ボーダーの調整 */
/* 各行の最後のセル以外の右ボーダーを消す（th, td 共通） */
[class*="is-style-mytable"] table :is(th,td):not(:last-child) {
border-right: none!important;
}
/* テーブル内のCocoonボタンと囲みボタン---------------------------------------------- */
table .button-block,
table .btn-wrap{
margin-bottom: 0!important;/*下の余白を0にする*/
font-size: max(.8em, 12px) !important;
}
table .btn-wrap.btn-wrap-l > a::after{
content:none;/*矢印を非表示*/
}
/* 囲みボタン文字サイズ調整 */
@media screen and (min-width: 835px) {
.btn-l, .ranking-item-link-buttons a, .btn-wrap.btn-wrap-l > a {
font-size: 1em;
}
}
/* ハイライト機能を利用 */
table mark {
display: inline-block; /* インラインブロック要素に設定 */
padding: 14px 20px; /* 内側の余白を指定 */
border-radius: 99px; /* 角を丸くする（99px でほぼ楕円形） */
color: var(--cocoon-white-color); /* 文字色をカスタムプロパティで指定 */
transition: all 0.3s ease-in-out; /* すべてのプロパティを0.3秒でスムーズに変化 */
font-weight: bold; /* フォントを太字に設定 */
}
/* ホバー時の透明度を調整 */
table mark:hover {
opacity: 0.8;
}
/*テーブル内のリスト*/
table ol > li,
table ul > li{
padding-bottom:0!important;
}
/* スクロールヒント（表）---------------------------------------------- */
.entry-content .is-scrollable:before {
content: 'スクロールできます→';
display: block;
top: 0;
left: 0;
margin: 0;
position: sticky;
text-align: right;
font-size:.8em;
animation: scroll-right 1s infinite alternate ease-in-out;
}
.scroll-hint-icon-wrap {
display: none;
}
@keyframes scroll-right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-5px);
}
}
/*アイコンリストボックスー--------------------------------------------- */
.wp-block-cocoon-blocks-iconlist-box.blank-box{
padding:2em;
}
.iconlist-title:empty {
display: none;
}
.block-box .iconlist-box{
padding:0;
}
ul.timeline .iconlist-box ul {
list-style-type: none;
}
/* タイムライン（デフォルト）---------------------------------------------- */
.timeline-box {
border:0;
overflow: hidden;
}
.timeline-title{
padding-bottom:1rem;
margin-bottom:1rem;
}
.timeline-title:empty {
display: none;
}
.timeline-item-snippet {
padding-bottom: 1em;
}
.timeline > li.timeline-item {
display: flex;
flex-direction: column;
padding-left: 20px;
border-left:0!important;
}
.timeline-item:before {
background:var(--accent-color);
width: 14px;
height: 14px;
left: 14px;
}
.timeline-item-content {
width: 100%;
padding: 0 20px;
border-left: solid 2px var(--border-color);
float:none;
/*background-image: linear-gradient(transparent calc(100% - 1px), var(--gray-color) 50%, var(--gray-color)), linear-gradient(90deg, transparent calc(100% - 1px), var(--gray-color) 50%, var(--gray-color));
background-repeat: repeat;
background-size: 16px 16px;*/
}
.timeline-item-label {
float:none;
text-align:left;
width:auto;
font-weight:bold;
color:var(--main-color);
padding-left:20px;
}
@media screen and (max-width: 480px){
.timeline > li.timeline-item {
padding-left: 0;
}
.timeline-item:before {
top:23px;
left: -6px;
}
}
/* タイムラインのリスト */
ul.timeline ol,
ul.timeline ul {
margin-bottom: 1em;
}
/* アコーディオン（トグル）共通スタイル ----------------------------------------- */
/* トグルボタンの基本スタイル（全タイプ共通） */
[class*="-mytoggle"] .toggle-button {
border: none;
border-radius: 0;
padding: 0.5em 1em;
}
/* 背景色（スタイル1：グレー背景） */
[class*="is-style-1-mytoggle"] .toggle-button {
background-color: #f5f4f3;
}
/* 背景なし（スタイル2〜4） */
[class*="is-style-2-mytoggle"] .toggle-button,
[class*="is-style-3-mytoggle"] .toggle-button,
[class*="is-style-4-mytoggle"] .toggle-button {
background: none;
}
/* 枠線（スタイル1・2） */
.toggle-box[class*="is-style-1-mytoggle"],
.toggle-box[class*="is-style-2-mytoggle"] {
border: 1px solid var(--cocoon-custom-border-color);
}
/* 枠線（スタイル3は下線のみ） */
.toggle-box[class*="is-style-3-mytoggle"] {
border-bottom: 1px solid var(--cocoon-custom-border-color);
}
/* 左寄せボタン（-left系） */
[class*="-mytoggle-left"] .toggle-button {
padding: 0.5em 2em 0.5em 1em;
text-align: left;
}
/* アイコン位置調整（左寄せ・FAQ） */
[class*="-mytoggle-left"] .toggle-button::before,
[class*="-mytoggle-faq"] .toggle-button::before {
position: absolute;
right: 1em;
margin: 0;
font-size: 1em;
}
/* チェック時の下線装飾（スタイル2・FAQ2想定） */
[class*="is-style-2-mytoggle"] .toggle-checkbox:checked ~ .toggle-button {
border-bottom: 1px dashed var(--cocoon-custom-border-color);
}
/* チェック時：表示コンテンツのボーダー削除 */
[class*="-mytoggle"] .toggle-checkbox:checked ~ .toggle-content {
border: none;
border-radius: 0;
}
/* toggle1,2 の初期＆展開時コンテンツ余白設定 */
[class*="is-style-1-mytoggle"].toggle-wrap .toggle-content,
[class*="is-style-2-mytoggle"].toggle-wrap .toggle-content {
padding: 0 1.5em;
}
[class*="is-style-1-mytoggle"] .toggle-checkbox:checked ~ .toggle-content,
[class*="is-style-2-mytoggle"] .toggle-checkbox:checked ~ .toggle-content {
padding: 1em 1.5em;
}
/* ボタン風デザイン（スタイル4） */
.is-style-4-mytoggle .toggle-button {
width: fit-content;
border: 1px solid var(--cocoon-custom-border-color);
border-radius: 99px;
padding: 0.3em 1.5em;
margin: 0 auto;
}
.is-style-4-mytoggle .toggle-checkbox:checked ~ .toggle-button {
border-radius: 99px;
margin-bottom: 1em;
}
/* FAQ用 共通スタイル */
[class*="-mytoggle-faq"] .toggle-button,
[class*="-mytoggle-faq"] .toggle-content {
position: relative;
text-align: left;
}
/* FAQコンテンツ余白（初期） */
[class*="-mytoggle-faq"].toggle-wrap .toggle-content {
padding: 0 2em 0 2.2em;
}
/* FAQボタンの余白 */
[class*="-mytoggle-faq"] .toggle-button {
padding: 0.5em 2em 0.5em 2.2em;
}
/* FAQコンテンツ余白（展開時） */
[class*="-mytoggle-faq"] .toggle-checkbox:checked ~ .toggle-content {
padding: 1em 2em 1em 2.2em;
}
/* Q・Aラベル表示 */
[class*="-mytoggle-faq"] .toggle-button::after,
[class*="-mytoggle-faq"] .toggle-checkbox:checked ~ .toggle-content::after {
position: absolute;
left: 1em;
font-weight: bold;
}
/* Qラベル（ボタン内） */
[class*="-mytoggle-faq"] .toggle-button::after {
content: 'Q';
color: #004aad;
top: 0.5em;
}
/* Aラベル（展開コンテンツ内） */
[class*="-mytoggle-faq"] .toggle-checkbox:checked ~ .toggle-content::after {
content: 'A';
color: #bc5731;
top: 1em;
}
/* FAQアイコン（▼と▲） Font Awesome使用 */
[class*="-mytoggle-faq"] .toggle-button::before {
content: "\f0d7"; /* ▼ */
}
[class*="-mytoggle-faq"] .toggle-checkbox:checked ~ .toggle-button::before {
content: "\f0d8"; /* ▲ */
}
/* アイコン変更（共通設定追加） */
.fa-caret .toggle-button::before { content: "\f0d7"; }
.fa-caret .toggle-checkbox:checked ~ .toggle-button::before { content: "\f0d8"; }
.fa-chevron .toggle-button::before { content: "\f078"; }
.fa-chevron .toggle-checkbox:checked ~ .toggle-button::before { content: "\f077"; }
.fa-arrow .toggle-button::before { content: "\f063"; }
.fa-arrow .toggle-checkbox:checked ~ .toggle-button::before { content: "\f062"; }
/* FAQボックス------------------------------------------------------- */
.faq-wrap {
--cocoon-custom-border-color: #e8ecef;
}
.faq-wrap.blank-box{
border-width:1px;
border-radius:1px;
}
.faq-question {
align-items: unset;
}
.faq .faq-item-label {
font-size: 1em;
font-weight: bold;
text-align: center;
height: 100%;
width: 1.8em;
padding: 0;
margin-right: .5em;
}
.faq-item-content {
margin-top: 0;
}
.is-style-accordion > .faq > .faq-question::before {
opacity: 1;
}
/* ボックスメニューのスタイル---------------------------------------------- */
/* スタイル1（背景色あり） */
.box-style-1 .box-menu{
box-shadow:none!important;/* inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1!important;*/
background-color:var(--main-light-color);
color:var(--main-color);
padding:1em;
}
.box-style-1 .box-menu,
.box-style-1 .box-menu-icon > div{
transition:all .5s;
}
.box-style-1 .box-menu-icon{
font-size:1.8em;
color: var(--main-color)!important;
margin-bottom:10px;
}
.box-style-1 .box-menu:hover {
background-color:var(--main-sub-color);
}
.box-style-1 .box-menu:hover .box-menu-icon > div{
transform:scale(1.4);
}
/* ボックスメニューカラム数切り替え ---------------------------------------------- */
/* box-menu の個別幅を解除（グリッドレイアウト用） */
[class*="boxmenu-column-"] .box-menus .box-menu {
width: unset;
}
/* box-menus をグリッド化 */
[class*="boxmenu-column-"] .box-menus {
display: grid;
}
/* 「余白あり」スタイル用：グリッド間に余白を追加 */
[class*="-box-gap"] .box-menus {
gap: .5em;
}
/* --- PCレイアウト（カラム数） --- */
/* カラム2（PC） */
[class*="2-boxmenu-column"] .box-menus {
grid-template-columns: repeat(2, 1fr); /* 2列 */
}
/* カラム3（PC） */
[class*="3-boxmenu-column"] .box-menus {
grid-template-columns: repeat(3, 1fr); /* 3列 */
}
/* カラム4（PC） */
[class*="4-boxmenu-column"] .box-menus {
grid-template-columns: repeat(4, 1fr); /* 4列 */
}
/* カラム5（PC） */
[class*="5-boxmenu-column"] .box-menus {
grid-template-columns: repeat(5, 1fr); /* 5列 */
}
/* カラム6（PC） */
[class*="6-boxmenu-column"] .box-menus {
grid-template-columns: repeat(6, 1fr); /* 6列 */
}
/* --- モバイルレイアウト（834px以下） --- */
@media screen and (max-width: 834px) {
/* モバイル2カラム */
[class*="-column-mobile-2"] .box-menus {
grid-template-columns: repeat(2, 1fr); /* 2列 */
}
/* モバイル3カラム */
[class*="-column-mobile-3"] .box-menus {
grid-template-columns: repeat(3, 1fr); /* 3列 */
}
}
/* カラムブロック---------------------------------------------- */
/*flexの余白*/
.gap-0{
gap:0!important;
}
/*自作CTAボックス余白調整*/
.wp-block-columns.btn-flex,/*codoc対応*/
.is-layout-flex.btn-flex{
gap: .5rem;
}
/*ボタンカラム下の余白*/
.btn-flex .wp-block-column,
.btn-flex .btn-wrap a {
margin-bottom: 0!important;
}
/*下揃え*/
.wp-block-columns.btn-flex{
align-items: flex-end !important;
}
/******************************************
追加css
**************************************/
.center-text {
text-align: center;/*中央寄せ*/
}
.color{
color:var(--main-color);
}
/*テキストリンク*/
.txt-link a,
.txt-link-box a{
display: inline-block;
position: relative;
padding-left: 1.2em;
}
.txt-link a:before,
.txt-link-box a:before{
content: "";
height: 1em;
width: 1em;
position: absolute;
top: .4em;
left: 0;
background-color:currentColor;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
ul.txt-link-box{
list-style: none!important;
padding-left:0;
}
.txt-link-box p{
margin-bottom:1em!important;
}
/* arrow-down 中央下に表示されるスクロール誘導の矢印 ------------------------------- */
.arrow-down,.arrow-up {
margin-bottom:2em;
}
/* 矢印の形状 */
.arrow-up span,
.arrow-down span,
.arrow-down-1 span {
display: block; /* ブロック要素に */
width: 1em; /* 幅 */
height: 1em; /* 高さ */
border: 1px solid var(--cocoon-text-color); /* 黒い枠線 */
border-left: 0; /* 左線を消す */
border-bottom: 0; /* 下線を消す */
box-sizing: border-box; /* 枠込みサイズ */
transform: rotate(135deg); /* 回転して矢印に */
margin: 0 auto; /* 中央寄せ */
}
.arrow-up span{
transform: translateY(75%) rotate(-45deg);
}
/* 矢印全体の親要素（記事用位置調整） */
.arrow-container-1 {
position: absolute; /* 固定配置 */
bottom: -70%; /* 下端からの位置 */
left: 50%; /* 左端から50% */
transform: translateX(-50%); /* 中央寄せ */
text-align: center; /* 中央揃え */
}
/* 矢印にアニメーションを適用 */
.arrow-down-1 {
animation: arrow-move 2s ease infinite; /* ループアニメーション */
}
/* 矢印のアニメーション動作 */
@keyframes arrow-move {
0% {
transform: translateY(-30px); /* 上から出現 */
opacity: 1; /* 完全に表示 */
}
100% {
transform: translateY(0); /* 下に移動 */
opacity: 0; /* フェードアウト */
}
}
/* 「Scroll」テキスト */
.arrow-text {
font-size: 14px; /* 文字サイズ */
color: #333; /* 色 */
margin-top: 4px; /* 矢印との余白 */
}
/* めくれた紙風 */
.paper {
position:relative;
border:none;
}
.paper:after{
position: absolute;
content: '';
right: 0px;
top: 0px;
border-width: 0 20px 20px 0;
border-style: solid;
border-color: #ccc var(--cocoon-white-color) #ccc;
box-shadow: -1px 1px 1px rgb(0 0 0 / .15);
}
/* ウィジェット記事の新着リボン */
.new-tab .new-entry-cards.large-thumb a:first-of-type::before {
content: "NEW"; /* リボンの文字 */
}
.update-tab .new-entry-cards.large-thumb a:first-of-type::before {
content: "UP"; /* リボンの文字 */
}
.new-entry-cards.large-thumb a{
position: relative;
}
:where(.new-tab,.update-tab) .new-entry-cards.large-thumb a:first-of-type::before {
display: block;
position: absolute;
top: 0px;
left: 15px;
margin: 0;
z-index: 2;
background-color:var(--accent-color);
color: var(--cocoon-white-color);
text-align: center;
letter-spacing: 0.2em;
-webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 80%, 0% 100%, 0% 0%);
clip-path: polygon(100% 0%, 100% 100%, 50% 80%, 0% 100%, 0% 0%);
min-width: 4em; /* 最小幅 */
font-weight:bold;
font-size: max(.9em, 12px); /* 最小12pxを保証 */
text-shadow: 0 1px 1px var(--shadow-color);
padding: 10px 10px 15px; /* 少し余裕を持たせる */
}
@media (max-width: 768px) {
:where(.new-tab, .update-tab) .new-entry-cards.large-thumb a:first-of-type::before {
font-size: .8em;
min-width: 3.5em;
padding: 8px 8px 12px;
}
}
/* みてね画像 */
:where(.new-tab,.update-tab) .new-entry-cards.large-thumb a:nth-child(1)::after{
content: "";
position: absolute;
top: -3px;
right: 10px;
transform: translate(0%, -85%);
width: 18%;
aspect-ratio: 1/1;
z-index: 2;
background: url(https://turicco.com/wp-content/uploads/2025/03/1742482202939.png) no-repeat center/contain;
}
@media (max-width: 768px) {
:where(.new-tab,.update-tab) .new-entry-cards.large-thumb a:nth-child(1)::after{
width: 18%;
}
}
/* ナビカード---------------------------------------------- */
/*ナビリボン 1のカラー変更*/
.myribbon .ribbon-color-1 span{
background-color:var(--accent-color);
}
/*リボンスタイル変更*/
.myribbon .ribbon:before,
.myribbon .ribbon:after {
content: none;
}
.myribbon .ribbon {
width: 100%;
height: 50px;
}
.myribbon .card-large-image .ribbon-top-left {
left: 15px;
}
.myribbon .ribbon span {
transform: none;
right:initial;
top: initial;
width:auto;
padding:15px 15px 20px;
-webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 80%, 0% 100%, 0% 0%);
clip-path: polygon(100% 0%, 100% 100%, 50% 80%, 0% 100%, 0% 0%);
}
/* 点滅 ---------------------------------------------- */
.blink {
animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
/* スマホのみ改行---------------------------------------------- */
/*PCでは無効（改行しない）*/
.sma{
display: none;
}
/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
.sma{
display: block;
}
}
/* パソコンモニター枠---------------------------------------------- */
.window {
max-width: 800px;
margin:0 auto 2em!important;
border:1px solid #eee;
border-radius: 2px;
}
.window__head {
padding: .7em;
background-color:#eee;/* linear-gradient(0deg, #f4f4f4, #eee);*/
}
.window__body {
background-color:#fff;
}
.window__body :where(.wp-block-image,p){
margin-bottom:0!important;
}
.window__body:has(p,ol,ul){
padding:1em;
}
.window__body figure{
aspect-ratio: 16 / 9;
overflow-y:auto;
}
.window__body figure img{
margin:auto;
}
.buttons__wrap {
display: flex;
}
.buttons__item {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 8px;
}
.button_red {background: #bc5731;}
.button_yellow {background: #efbf75;}
.button_blue {background: #8b9b9d;}
/*480px以下*/
@media screen and (max-width: 480px){
.window__body::-webkit-scrollbar {
width: 10px;
}
.buttons__item {
width: 10px;
height: 10px;
}
}
/*スマホ枠*/
.smp-box {
--smp-color:#555;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 180px;/*168*/
height: 350px;/*360*/
margin: 0 auto;
overflow: hidden;
border: 8px solid var(--smp-color);
border-radius: 25px;
box-sizing: content-box;
background: #fff;
}
.smp-box::after {
position: absolute;
bottom: 5px;
width: 60px;
height: 3px;
border-radius: 20px;
background-color: rgb(255 255 255 / .9);
content: '';
}
.smp-box svg {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 60px;
height: 15px;
border-radius: 0 0 15px 15px;
background-color: var(--smp-color);
fill:#666;
}
.smp-box img {
height: 100%;
object-fit: contain;
}
/*スクロールバー*/
.scroll{
overflow-y:scroll;
}
.smp::-webkit-scrollbar,
.pc::-webkit-scrollbar {
width: 8px;
}
.smp::-webkit-scrollbar-thumb,
.pc::-webkit-scrollbar-thumb {
background: #bbb;
border-radius:1px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
/* ストライプ背景---------------------------------------------- */
.stripe{
background: linear-gradient(-45deg,transparent 25%,var(--gray-color) 25%,var(--gray-color) 50%,transparent 50%,transparent 75%,var(--gray-color) 75%,var(--gray-color));
background-clip: padding-box;
background-size: 6px 6px;
padding: var(--box-padding);
position: relative;
}
/* 方眼---------------------------------------------- */
.grid{
background-image: linear-gradient(transparent calc(100% - 1px), var(--gray-color) 50%, var(--gray-color)), linear-gradient(90deg, transparent calc(100% - 1px), var(--gray-color) 50%, var(--gray-color));
background-repeat: repeat;
background-size: 16px 16px;
}
/* ポチップ---------------------------------------------- */
.pochipp-box{
box-shadow: none!important;
}
/* ボタンのスタイルを調整する：アウトラインスタイルの設定 */
.pochipp-box[data-btn-style=outline] .pochipp-box__btn{
box-shadow: none!important;
border:1px solid currentColor;
transition: background-color 0.3s;
}
/* マウスオーバー時に文字色を白に変更 */
.pochipp-box[data-btn-style=outline] .pochipp-box__btn:hover {
color: #fff !important;
}
/* マウスオーバー時に背景色をAmazonカラーに設定 */
.pochipp-box[data-btn-style=outline] .-amazon>.pochipp-box__btn:hover {
background-color: var(--pchpp-color-amazon) !important;
border-color:var(--pchpp-color-amazon);
}
/* マウスオーバー時に背景色を楽天カラーに設定 */
.pochipp-box[data-btn-style=outline] .-rakuten>.pochipp-box__btn:hover {
background-color: var(--pchpp-color-rakuten) !important;
border-color:var(--pchpp-color-rakuten);
}
/* マウスオーバー時に背景色をYahooカラーに設定 */
.pochipp-box[data-btn-style=outline] .-yahoo>.pochipp-box__btn:hover {
background-color: var(--pchpp-color-yahoo) !important;
border-color:var(--pchpp-color-yahoo);
}
/* マウスオーバー時に背景色をメルカリカラーに設定 */
.pochipp-box[data-btn-style=outline] .-mercari>.pochipp-box__btn:hover {
background-color: var(--pchpp-color-mercari) !important;
border-color:var(--pchpp-color-mercari);
}
/* 画像サイズ */
@media screen and (min-width: 1000px) {
.pochipp-box[data-lyt-pc=big] ,
.pochipp-box[data-lyt-pc=imgbig] {
grid-template-columns: 40% 1fr!important;
}
.pochipp-box__image img {
max-height: 200px!important;
}
}
@media screen and (max-width: 599px) {
.pochipp-box[data-lyt-mb=vrtcl] .pochipp-box__image img {
width: 100%!important;
max-width: 250px!important;
max-height:200px!important;
}
}
/*インラインボタン色----------------------------------------------*/
.-amazon.pochipp-inline__btnwrap>.pochipp-inline__btn{
background-color:var(--pchpp-color-amazon)!important;
}
.-rakuten.pochipp-inline__btnwrap>.pochipp-inline__btn{
background-color:var(--pchpp-color-rakuten)!important;
}
.-yahoo.pochipp-inline__btnwrap>.pochipp-inline__btn{
background-color:var(--pchpp-color-yahoo)!important;
}
/*インラインボタンのスタイル*/
.pochipp-inline__btnwrap {
margin: .3em .5em!important;
}
.pochipp-inline__btnwrap>.pochipp-inline__btn {
line-height:1!important;
padding:10px!important;
}
/*文字色の設定*********************/
.red,
.bold-red{
color: var(--cocoon-red-color);
}
.bold-blue{
color:var(--cocoon-blue-color);
}
/* ポイントマーカー色---------------------------------------------- */
.badge-pink{
background-color:var(--accent-color);
}
.badge-blue{
background-color:var(--cocoon-blue-color);
}
.badge-grey{
background-color:#555;
}
.badge-green{
background-color:#93A4A4;
}
/* マーカー---------------------------------------------- */
.marker{
background:rgb(252 185 0 / .4);
}
.marker-red {
background:var(--accent-sub-color);
}
.marker-blue {
background: rgb(152 163 160 / .4);
}
/* マーカー（下線）---------------------------------------------- */
.marker-under,
.marker-under-red,
.marker-under-blue {
background:none;
padding-bottom:2px;
border-bottom: 1px dashed;
}
.marker-under {
border-color:var(--main-color);
}
.marker-under-red {
border-color: var(--cocoon-red--color);
}
.marker-under-blue {
border-color: var(--second-color);
}
/*ストライプマーカー*/
.marker-stripe{
background-image: repeating-linear-gradient(-45deg,#ddd 0, #ddd 2px,transparent 2px, transparent 4px);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.5em;
}
/***********************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
/*必要ならばここにコードを書く*/
}
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く */
}