/*
Skin Name: Original-skin
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
*/
/*以下にスタイルシートを記入してください*/
/************************************
子テーマ用のスタイルを書く
************************************/
/* アプリーチ */
.appreach {
text-align: left;
padding: 10px;
border: 1px solid #7C7C7C;
overflow: hidden;
}
.appreach:after {
content: "";
display: block;
clear: both;
}
.appreach p {
margin: 0;
}
.appreach a:after {
display: none;
}
.appreach__icon {
float: left;
border-radius: 10%;
overflow: hidden;
margin: 0 3% 0 0 !important;
width: 25% !important;
height: auto !important;
max-width: 120px !important;
}
.appreach__detail {
display: inline-block;
font-size: 20px;
line-height: 1.5;
width: 72%;
max-width: 72%;
}
.appreach__detail:after {
content: "";
display: block;
clear: both;
}
.appreach__name {
font-size: 16px;
line-height: 1.5em !important;
max-height: 3em;
overflow: hidden;
}
.appreach__info {
font-size: 12px !important;
}
.appreach__developper, .appreach__price {
margin-right: 0.5em;
}
.appreach__posted a {
margin-left: 0.5em;
}
.appreach__links {
float: left;
height: 40px;
margin-top: 8px;
white-space: nowrap;
}
.appreach__aslink img {
margin-right: 10px;
height: 40px;
width: 135px;
}
.appreach__gplink img {
height: 40px;
width: 134.5px;
}
.appreach__star {
position: relative;
font-size: 14px !important;
height: 1.5em;
width: 5em;
}
.appreach__star__base {
position: absolute;
color: #737373;
}
.appreach__star__evaluate {
position: absolute;
color: #ffc107;
overflow: hidden;
white-space: nowrap;
}
/* カスタムプロパティ---------------------------------------------- */
:root {
--main-color:#898881;
--accent-color:#a5c9c1;
--cocoon-red-color: #bc5731;
--cocoon-blue-color:#677593;
--cocoon-text-color:#333;
--gray-color:#f7f7f7;
--border-color:#ccc;
--box-padding:2em;
}
/*480px以下*/
@media screen and (max-width: 480px){
:root {
--box-padding:1.5em;
}
}
.web-font,
.navi-in a,
.toc-title,
.widget-sidebar-title,
.related-entry-main-heading,
.comment-title,
.menu-caption {
font-family: "Oswald", sans-serif;
letter-spacing:.1em;
}
.widget-sidebar-title,
.related-entry-main-heading,
.comment-title {
font-size:2rem;
}
/* svg縦位置調整---------------------------------------------- */
.svg-flex {
display: inline-flex;
align-items: center;
gap:5px;
}
/* アイコン変更---------------------------------------------- */
.fa-history:before {
content: "\f2f1";/*更新日*/
}
.is-style-icon-list-check > li::before,
.fa-home: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;/*マスクのサイズをコンテナに合わせて調整*/
}
/*ホーム*/
.fa-home:before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
}
.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,');
}
/*位置調整*/
.block-box-label {
align-items: center;
}
.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;
}
/*リストスタイル（チェック）*/
.is-style-icon-list-check > li::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
position:absolute;
top:.4em;
left:.2em;
}
/* カラムボックス内の高さを揃える */
.sort-box {
display: flex; /* すでに is-layout-flex がある場合は不要 */
flex-wrap: wrap; /* 必要に応じて */
align-items: stretch; /* 子カラムの高さを揃える */
}
/* カラム内のカードも縦並びで伸ばす */
.sort-box .wp-block-column .block-box,/* ラベルボックス用 */
.sort-box .wp-block-column {
display: flex;
flex-direction: column;
}
.sort-box .wp-block-column .block-box,
.sort-box .wp-block-column .block-box .label-box-content/* ラベルボックス用 */ {
flex: 1 1 auto; /* カラム内でカードが伸びる */
}
/* トップページタブ---------------------------------------------- */
#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1],
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2],
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3],
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4] {
background: none var(--main-color);
border-color:var(--main-color);
}
.index-tab-buttons .index-tab-button {
border:none;
border-bottom: 1px solid var(--cocoon-thin-color);
border-radius: 0;
}
/* flexの余白 */
.gap-0{
gap:0!important;
}
/* スムーススクロール---------------------------------------------- */
html,body {
scroll-behavior: smooth;
scroll-padding-top: 100px; /* 位置調整 */
}
/* 広告表記---------------------------------------------- */
.pr-label-l {
border-radius:0;
border-left:0;
border-right:0;
padding:.7em 0;
margin-bottom:3em;
}
.pr-label-l:before{
font-family:"Font Awesome 5 Free";
content: "\f05a";
font-weight:bold;
margin-right:5px;
color:var(--main-color);
}
/* 中央寄せ ---------------------------------------------- */
.text-center {
text-align: center;
}
/* リンクカラー変更---------------------------------------------- */
a{
color:var(--cocoon-blue-color);
}
/* 固定ページの日付 */
.page .date-tags {
display:none;
}
/* 目次現在位置をハイライト */
.toc-widget-box .toc-content a.active {
color: var(--accent-color); /* 好みの強調色 */
font-weight: bold;
padding-left: 5px;
transition: all 0.2s ease;
}
/* ヘッダー---------------------------------------------- */
.header-container.fixed-header {
padding: 1em 0;
}
body,
.header-container,
.navi,
.navi-in a:hover {
background-color: #f4f3f1;
}
.site-name-text img {
width:100%;
max-width:300px;
}
/*480px以下*/
@media screen and (max-width: 480px){
.site-name-text img{
width:60%;
}
}
.appeal{
background-position:50% 90%;
}
/* モバイルの余白削除 */
@media screen and (max-width: 834px) {
.content,
main.main,
.footer {
margin: 0;
}
}
/* 検索ボックスのカスタマイズ---------------------------------------------- */
.search-box input:focus{
outline: 0; /*フォーカス時の枠線を消す*/
}
/*入力欄*/
.search-box .search-edit {
border-radius:1px;
}
/* ヘッダーナビの検索ボタン ---------------------------------------------- */
/* 検索ボタンのアイコン */
#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;
max-width: 500px;
}
/* 閉じるボタン */
.close-btn {
position: absolute;
bottom: 2em; /* フォームの下部に配置 */
left:50%;
transform: translateX(-50%);
background: none;
border: none;
font-size: 16px;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
}
.close-btn:hover {
color: red; /* ホバー時の色 */
}
/* 記事カード設定 ---------------------------------------------- */
.a-wrap {
padding: 0;
}
.a-wrap:hover {
background-color: transparent;
}
.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;
}
/* ホバー */
.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{
filter: brightness(80%);
}
/* ウィジェット設定---------------------------------------------- */
/* 三点リーダー省略 */
.widget-entry-cards:not(.large-thumb-on) .card-title,
.widget-entry-card-snippet {
-webkit-line-clamp: 3!important;
}
/* 記事タイトル */
.widget-entry-card-title{
line-height:1.5;
}
/* スマホで文字の大きさ調整 */
/* 834px以下 */
@media screen and (max-width: 834px){
.widget-entry-card-title{
font-size: 14px;
}
}
.widget-entry-card-snippet {
font-size: 13px;
}
/*カテゴリーウィジェット---------------------------------------------- */
.widget_nav_menu ul li,
.widget_categories ul li{
line-height:1;/*変えない*/
}
/* 見出しのデザイン---------------------------------------------- */
.article :is(h1,h2,h3,h4),
.sidebar h3{
border: initial;
background:initial;
border-radius:initial;
line-height:1.4;
}
/*アーカイブページ見出しのアイコンを消す*/
.archive-title .fas{
display:none;
}
/*固定ページ、アーカイブページのタイトル*/
.page .entry-title,
.archive-title{
text-align: center;
}
/*記事ページタイトル、アーカイブページのタイトル*/
.entry-title, .archive-title {
font-size: 6vw;
}
@media screen and (min-width: 600px) {
.entry-title, .archive-title {
font-size: 30px;
}
}
/*モバイル余白調整*/
@media screen and (max-width: 480px) {
.entry-title {
padding: 0.6em 0;
}
}
.page .entry-title,
.archive-title,
.related-entry-heading,
.widget-above-single-sns-buttons-title,
.comment-title{
text-align: center;
padding-bottom:1rem;
margin-bottom:3rem;
position:relative;
}
:where(.page .entry-title,.archive-title,.related-entry-heading,.widget-above-single-sns-buttons-title,.comment-title)::after{
background-color: var(--main-color);
position: absolute;
top: auto;
bottom: 0;
left: calc(50% - 1em);
right: auto;
display: block;
width: 2em;
height: 1px;
border-radius: 10px;
content: "";
}
/*２行目のスタイル*/
.related-entry-sub-heading,
.comment-title span{
display:block;
font-size:.8rem;
letter-spacing:initial;
}
/* 記事内見出しのデザイン */
.article h2 {
margin-top:5em;
position: relative;
background:var(--main-color);
color:var(--cocoon-white-color);
padding:.7em 1em .7em;
font-size: 1.4em;
}
.article h2:before,
.article h2:after {
position: absolute;
left: 0;
width: 100%;
content: '';
border-top: 1px solid var(--cocoon-white-color);/*ライン：太さ・実線・色*/
}
.article h2:before {
top: 3px;
}
.article h2:after {
bottom: 3px;
}
.article h3,
.sidebar h3 {
border-bottom: solid 2px #eee;/*#f0f1f5;薄いグレー*/
padding:.3em 0;
color:var(--main-color);
position: relative;
}
.article h3 {
margin-top:5em;
}
.article h3:after,
.sidebar h3:after{
position: absolute;
content: '';
display: block;
border-bottom: solid 2px var(--main-color);
bottom:-2px;
width:30%;
}
.article h4 {
margin-top:3em;
padding:.1rem .8rem;
font-size: 1.2em;
border-left:3px solid var(--main-color);
position:relative;
line-height:1.1;
}
/*先頭に四角のアクセント*/
.article h5 {
margin-top:3em;
background:none;
position: relative;
font-size: 1em;
padding:.5em .5em .5em 2em;
}
.article h5::before{
position: absolute;
content: '';
}
.article h5::before {
top: .6em;
left: .2em;
z-index: 2;
width: 1em;
height: 1em;
background: var(--accent-color);
opacity: .7;
}
/* 目次設定---------------------------------------------- */
.toc {
padding:1.5em 3em 2em;
}
/*480px以下（スマホのみ）*/
@media screen and (max-width: 480px){
.toc{
padding:1.5em 2em 2em;
}
}
.toc-title {
color:var(--main-color);
font-size:2em;
font-weight:bold;
}
.toc .toc-list > li:has(> ol, > ul) {
margin-bottom: 1em; /* サイドバー目次行間 */
padding-bottom:0;
}
/* 親項目の設定 */
.toc-content ol {
list-style:none;
position:relative;
}
/* .toc-list 直下の li だけ太字に */
.toc-list > li > a {
font-weight: bold;
}
.toc-content ol > li:before {
font-family: "Font Awesome 5 Free";
content: "\f138";
position:absolute;
left: -1.5em;
color: var(--accent-color);
font-weight: 700;
}
/* 子項目の設定 */
.toc-content ol li > ol > li:before {
font-family: "Font Awesome 5 Free";
content: "\f105";
position: absolute;
left: 0;
color: var(--accent-color);
font-weight: 700;
}
.toc .toc-list {
padding-left: 1.5em;
}
/* カテゴリー */
.widget_categories ul li {
font-size:0.95em;
}
.widget_categories ul li a:before {
font-family: "Font Awesome 5 Free";
content: "\f138";
color: var(--accent-color);
font-weight: 700;
margin-right:0.6em;
}
.widget_categories ul ul li a:before {
font-family: "Font Awesome 5 Free";
content: "\f105";
color: var(--accent-color);
font-weight: 700;
margin-right:5px;
}
/* サイドバー設定---------------------------------------------- */
body .sidebar {
padding:2em;
}
/* サイドバー目次---------------------------------------------- */
.widget_toc {
overflow-y:auto;/*縦方向スクロールを設置*/
max-height: calc(100vh - 150px); /* 目次の高さ上限*/
margin-top:60px;
}
.widget .toc {
width: 100%;
line-height:1.8;
}
/* カテゴリーラベル---------------------------------------------- */
.cat-label {
position: unset;
border:0!important;
padding:2px 10px;
}
/* カテゴリーリンク---------------------------------------------- */
.cat-link {
background-color: var(--main-color);
}
/* SNSボタン---------------------------------------------- */
.main .sns-buttons a {
width: 34px!important;
height: 34px!important;
border-radius:50%;
opacity:.7;
}
.sns-share-buttons a .button-caption {
display: none!important; /* テキスト非表示 */
}
/*画面左に固定（トップのみ）*/
/*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;
}
}
/*プロフィールボックスー---------------------------------------------- */
.author-box{
border:none;
font-size:.9em;
}
.author-name a{
pointer-events: none;
text-decoration:none;
color:var(--cocoon-text-color);
}
/* モバイルボタン---------------------------------------------- */
.mobile-menu-buttons {
color: var(--main-color);
background:rgba(255,255,255,.8);
}
.mobile-menu-buttons .menu-button >a{
color: var(--main-color);
}
.mobile-menu-buttons .menu-icon {
font-size: .9em;
}
/* ロゴを左端に寄せる */
.mobile-header-menu-buttons .logo-menu-button {
justify-content: flex-start;
padding-left:5px;
}
/* ボタン、囲みボタン---------------------------------------------- */
.btn-l,
.btn-wrap.btn-wrap-m > a,
.btn-wrap.btn-wrap-l > a {
border-width:1px;
font-size:1em;
margin-bottom:0!important;
padding:.8em 1.2em;
}
/*.btn-wrap > a::after {
content:none!important;
}*/
/*480px以下*/
@media screen and (max-width: 480px){
.btn-l,
.btn,
.btn-wrap.btn-wrap-m > a,
.btn-wrap.btn-wrap-l > a{
font-size:1em;
}
}
/* ページネーション（次ページ）---------------------------------------------- */
.pagination-next-link {
border-radius: 1px;
font-size: .9em;
border:1px solid var(--border-color);
background-color:initial;
}
.page-numbers{
border: none;
background-color:initial;
border-radius: 0%;
box-shadow: 0 1px 1px var(--shadow-color);
}
a.page-numbers:hover {
transform: translateY(-10px);
box-shadow: 0 5px 5px var(--shadow-color);
background-color:var(--main-color);
color:var(--cocoon-white-color);
}
.pagination .current {
/*現在のページ*/
color:var(--cocoon-white-color);
background-color:var(--main-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);
}
/* ブログカード---------------------------------------------- */
.blogcard-wrap{
width:100%;
}
.blogcard {
position: relative;
border-radius: 1px;
padding:1em;
border-color: var(--border-color);
line-height: 1.4;
}
.tab-caption-box .blogcard{
border:none;
}
@media screen and (max-width: 834px) {
.blogcard-content {
line-height: 1.6;
}
}
.blogcard-title{
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color:var(--text-color);
}
.blogcard-site {
align-items: flex-end;
}
/*ブログカードラベル*/
.blogcard-label{
top:-9px;
padding:0 5px!important;
border-radius: 0px;
font-size:12px;
color:var(--text-color);
background:var(--cocoon-white-color);
}
/*ブログカードラベルアイコン*/
/*参考記事、関連記事*/
.bct-reference .blogcard-label .fa::before,
.bct-related .blogcard-label .fa::before {
content: "\f518";
}
/*続きを読むを追加する*/
/*.internal-blogcard::after*/
.blogcard::after{
display:block;
content: 'Read More';
position: absolute;
bottom: 1rem;
right: 1rem;
color:var(--text-color);
border:1px solid var(--border-color);
background-color:var(--cocoon-white-color);
font-size:12px;
width: fit-content;
height: auto;
padding: 0.3em 2.4em;
z-index: 1;
transition:all .4s;
}
/*ホバー時ボタン*/
a.blogcard-wrap:hover .blogcard::after{
background-color:var(--main-color);
color:var(--cocoon-white-color);
border-color:var(--main-color);
}
/*834px以下*/
@media screen and (max-width: 834px){
.blogcard-snippet {
display: none;
}
}
/************************************
箇条書きリスト
************************************/
/* 箇条書き余白調整 --------------------------------------------- */
ul { padding-left: 1.2em; }
ol { padding-left: 1.7em; }
@media screen and (max-width: 834px) {
.article ul,
.article ol:not(.ol-list) {
padding-left: 1.1em;
}
}
ul.has-list-style {
padding: 0; /* アイコンリスト */
}
.article ul li, .article ol li {
margin: 0; /* 0.2emの余白を消す */
}
/* 1段目ネスト：マーカーあり */
.article ul:not(.timeline) ul,
.article ol ul {
list-style: disc;
}
/* 2段目ネスト：少しインデント、黒丸マーカー */
.article ul ul ul,
.article ol ul ul {
padding-left: 1em;
list-style: disc;
}
/*---------------------------------
リストの行間・余白調整
---------------------------------*/
/* 通常リストのアイテム間スペース（最後のアイテム以外） */
.article ul:not(.timeline):not(.tab-label-group):not(.mobile-menu-buttons) li:not(:last-of-type),
.article ol li:not(:last-of-type) {
padding-bottom: 0.25em;
margin-bottom: 0.25em;
}
/* list-tallクラス適用時、brありは余白を広く */
.article ul.list-tall:not(.timeline):not(.tab-label-group) li:not(:last-of-type),
.article ul:not(.timeline):not(.tab-label-group) li:has(br):not(:last-of-type),
.article ol.list-tall li:not(:last-of-type),
.article ol li:has(br):not(:last-of-type) {
padding-bottom: 0.5em;
margin-bottom: 0.5em;
}
/* ネストされたリスト内の余白（上部） */
.article li > ul,
.article li > ol,
.toc .toc-list ol {
padding-top: 0.25em;
margin-top: 0.25em;
}
/* timeline内はネストリストの上余白なし */
.timeline .block-box li > ul,
.timeline .block-box li > ol {
padding-top: 0;
margin-top: 0;
}
/*---------------------------------
下線付きリスト（under-lineクラス）
---------------------------------*/
/* 下線（最後の要素も含む） */
.article ul.under-line > li,
.article ol.under-line > li {
border-bottom: 1px dashed var(--border-color);
padding-bottom: 1em !important;
margin-bottom: 1em !important;
}
/* block-box内は最後の要素の下線を消す */
.block-box ul.under-line > li:last-of-type,
.block-box ol.under-line > li:last-of-type {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.article .under-line a {
text-decoration:none;
}
/* デフォルトのリストマーカー */
ul > li::marker {
color: var(--accent-color);
}
/* WPブロックリストのマーカー色をカスタム */
.has-border-color ul.wp-block-list li::marker { color: var(--cocoon-custom-border-color);}
.has-red-border-color ul.wp-block-list li::marker { color: var(--wp--preset--color--red);}
.has-pink-border-color ul.wp-block-list li::marker { color: var(--wp--preset--color--pink);}
.has-teal-border-color ul.wp-block-list li::marker { color: var(--wp--preset--color--teal);}
.has-luminous-vivid-amber-border-color ul.wp-block-list li::marker { color: var(--wp--preset--color--luminous-vivid-amber);}
.has-ex-a-border-color ul.wp-block-list li::marker { color: var(--wp--preset--color--ex-a);}
.has-ex-b-border-color ul.wp-block-list li::marker { color: var(--wp--preset--color--ex-b);}
.has-ex-c-border-color ul.wp-block-list li::marker { color: var(--wp--preset--color--ex-c);}
.has-ex-d-border-color ul.wp-block-list li::marker { color: var(--wp--preset--color--ex-d);}
/* リストスタイル---------------------------------------------- */
.is-style-icon-list-circle > li::before {
color: #dbb6a2!important;/* 〇 */
}
/* 箇条書き(番号)---------------------------------------------- */
.toc-list,
.ol-list {
counter-reset:number; /* 番号リセット */
list-style: none;/* 行頭番号削除 */
}
/* 箇条書き(番号) 行 */
.ol-list > li {
position: relative;/* 配置 */
}
.toc-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: -2em;
width: 1.5em;
height: 1.5em;
line-height:1.6em;
text-align:center;
font-size: .8em;
font-weight: bold;
border-radius: 50%;
background-color: var(--main-color);
color: var(--cocoon-white-color);
}
/* 四角 ---------------------------------------------- */
.square li:before { border-radius:0!important;}
/*コメント送信ボタン*/
input[type=submit] {
color:var(--cocoon-white-color);
background-color:var(--accent-color);
border-color:var(--accent-color);
border-radius:99px;
transition:all .5s;
}
/* topへ戻るボタン */
.go-to-top-button{
border-radius:99px;
background-color:var(--accent-color);
color: var(--cocoon-white-color);
width:65px;
height:65px;
}
/* cocoonブロック---------------------------------------------- */
/* cocoon吹き出し---------------------------------------------- */
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;
}
}
/* FAQ修正---------------------------------------------- */
.faq-item-label {
margin-right: 10px;
}
.faq-question {
align-items: initial;
}
.faq-question-content {
margin-top:6px;
}
/* 白抜きボックス---------------------------------------------- */
.blank-box {
padding:var(--box-padding);
border-width:1px;
border-radius:unset;
}
/* 見出しボックス---------------------------------------------- */
.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;
}
/* ---------------------------------------------------------
タブ見出しボックスのスタイル
--------------------------------------------------------- */
/* 共通：position基準 */
[class*="is-style-tab-caption-inside"].tab-caption-box,
[class*="is-style-tab-caption-overlap"].tab-caption-box,
[class*="is-style-tab-caption-icon"].tab-caption-box {
position: relative;
}
[class*="is-style-tab-caption-inside"] .tab-caption-box-label,
[class*="is-style-tab-caption-overlap"] .tab-caption-box-label,
[class*="is-style-tab-caption-icon"] .tab-caption-box-label {
position: absolute;
}
/* 共通：box-content */
[class*="is-style-tab-caption"] .tab-caption-box-content {
border-width: 1px;
}
/* 共通：ラベル太字 */
[class*="is-style-tab-caption"] .tab-caption-box-label {
font-weight: bold;
}
/* ---------------------------------------------------------
枠外
--------------------------------------------------------- */
.is-style-tab-caption-outside .tab-caption-box-content {
padding: 1.5em 2em;
margin-top: -1px;
border-radius: 0;
}
.is-style-tab-caption-outside .tab-caption-box-label {
padding: 0 1em;
border-radius: 2px 2px 0 0;
}
/* ---------------------------------------------------------
枠内
--------------------------------------------------------- */
.is-style-tab-caption-inside .tab-caption-box-content {
padding: 2.5em 2em 1.5em;
border-radius: 0;
}
.is-style-tab-caption-inside .tab-caption-box-label {
padding: 0 1em;
border-radius: 0 0 1px 0;
top: 0;
left: 0;
}
/* ---------------------------------------------------------
枠上（重ね / 丸吹き出し）
--------------------------------------------------------- */
[class*="is-style-tab-caption-overlap"] .tab-caption-box-label {
top: -0.8em;
left: 1em;
}
.is-style-tab-caption-overlap .tab-caption-box-content {
padding: 2em 2.5em;
border-radius: 3px;
}
.is-style-tab-caption-overlap .tab-caption-box-label {
padding: 0 1em;
border-radius: 3px;
}
/* 丸吹き出し */
.is-style-tab-caption-overlap-round .tab-caption-box-content {
padding: 3em;
border-radius: 3px;
}
.is-style-tab-caption-overlap-round .tab-caption-box-label {
padding: 0.1em 1.2em;
border-radius: 30px;
}
/* 吹き出しの三角形 */
.is-style-tab-caption-overlap-round .tab-caption-box-label:after {
background-color: var(--cocoon-custom-border-color);
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
position: absolute;
top: calc(100% - 1px);
left: 50%;
transform: translateX(-50%);
height: 8px;
width: 14px;
}
/* ---------------------------------------------------------
テープ風
--------------------------------------------------------- */
.is-style-tab-caption-overlap-tape .tab-caption-box-content {
padding: 2em;
border-radius: 0;
border-width: 0;
box-shadow: 0 0px 2px rgba(0,0,0,0.2), 0 2px 3px rgba(0,0,0,0.1);
}
.is-style-tab-caption-overlap-tape .tab-caption-box-label {
padding: 0 1em;
border-radius: 1px;
z-index:1;
}
.is-style-tab-caption-overlap-tape .tab-caption-box-label::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(-45deg, #fff 0 4px, transparent 4px 8px);
opacity: 0.1;
z-index: 0; /* 背景層 */
pointer-events: none; /* クリックや選択をブロックしない */
}
/* ---------------------------------------------------------
幅広
--------------------------------------------------------- */
.is-style-tab-caption-wide .tab-caption-box-content {
padding: 1.5em 2em 1.5em;
border-radius: 0;
}
.is-style-tab-caption-wide .tab-caption-box-label {
padding: 0.5em 1em;
border-radius: 0;
width: 100%;
text-align: center;
}
/* ---------------------------------------------------------
アイコン共通（円/バー）
--------------------------------------------------------- */
.is-style-tab-caption-icon-circle .tab-caption-box-label,
.is-style-tab-caption-icon-bar .tab-caption-box-label {
display: grid;
place-content: center;
line-height: 2em;
}
.is-style-tab-caption-icon-circle .tab-caption-box-label::before,
.is-style-tab-caption-icon-bar .tab-caption-box-label::before {
margin-right: 0;
}
.is-style-tab-caption-icon-circle .tab-caption-box-label-text,
.is-style-tab-caption-icon-bar .tab-caption-box-label-text {
display: none;
}
/* アイコン（円） */
.is-style-tab-caption-icon-circle .tab-caption-box-content {
padding: 3em;
border-radius: 4px;
border-width: 2px;
}
.is-style-tab-caption-icon-circle .tab-caption-box-label {
width: 2em;
height: 2em;
padding: 0;
border-radius: 99px;
top: -0.9em;
left: 0.75em;
box-shadow: 0 0 0 2px;
font-size: 1em;
}
/* アイコン（縦バー） */
.is-style-tab-caption-icon-bar .tab-caption-box-content {
padding: 1.5em 1.5em 1.5em 3.5em;
border-radius: 0;
}
.is-style-tab-caption-icon-bar .tab-caption-box-label {
padding: 0;
border-radius: 0;
top: 0;
left: 0;
height: 100%;
width: 2.2em;
}
/* ---------------------------------------------------------
480px以下
--------------------------------------------------------- */
@media screen and (max-width: 480px) {
.is-style-tab-caption-outside .tab-caption-box-content,
.is-style-tab-caption-wide .tab-caption-box-content,
.is-style-tab-caption-icon-circle .tab-caption-box-content {
padding: 2em;
}
.is-style-tab-caption-overlap-round .tab-caption-box-content {
padding: 3em 2em 2em;
}
.is-style-tab-caption-inside .tab-caption-box-content {
padding: 2.5em 1.5em 1.5em;
}
.is-style-tab-caption-overlap .tab-caption-box-content {
padding: 2em 1.5em 1.5em;
}
.is-style-tab-caption-icon-bar .tab-caption-box-content {
padding: 1em 1.5em 1em 3em;
}
}
/* ---------------------------------------------------------
ラベルテキストの省略（三点リーダー）
※ アイコン系以外に適用
--------------------------------------------------------- */
.is-style-tab-caption-outside .tab-caption-box-label,
.is-style-tab-caption-inside .tab-caption-box-label,
[class*="is-style-tab-caption-overlap"] .tab-caption-box-label {
display: flex;
max-width: calc(100% - 2em);
}
.is-style-tab-caption-outside .tab-caption-box-label-text,
.is-style-tab-caption-inside .tab-caption-box-label-text,
[class*="is-style-tab-caption-overlap"] .tab-caption-box-label-text {
min-width: 0;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.is-style-tab-caption-outside .tab-caption-box-label::before,
.is-style-tab-caption-inside .tab-caption-box-label::before,
[class*="is-style-tab-caption-overlap"] .tab-caption-box-label::before {
flex-shrink: 0;
}
/* リストマーカー色をボーダー色に合わせる ----------------------------------- */
[class*="is-style-tab-caption"].tab-caption-box ul li::marker {
color: var(--cocoon-custom-border-color);
}
/*--------------------------------------
ラベルボックス 共通設定
----------------------------------------*/
/* 共通スタイル */
.label-box[class*="is-style-cstm-label"] {
position: relative; /* 子要素を配置する際の基準点 */
}
/* ラベル */
.label-box[class*="is-style-cstm-label"] .label-box-label {
font-size: 1em;
text-shadow: none;
display: flex; /* 横並び */
overflow: hidden; /* はみ出し隠す */
max-width: 85%;
}
.label-box[class*="is-style-cstm-label"] .label-box-label-text {
flex: 1; /* 残り幅を使用 */
min-width: 0; /* 省略条件に必要 */
white-space: nowrap; /* 改行なし */
overflow: hidden; /* はみ出しを隠す */
text-overflow: ellipsis; /* 省略記号 (…) 表示 */
}
.label-box[class*="is-style-cstm-label"] .label-box-content {
margin-top: 0; /* 上の余白をリセット */
border-width: 1px; /* 枠線の幅を設定 */
color: var(--cocoon-text-color) !important; /* テキストの色を設定 */
}
/* 角型ラベルの丸み */
.is-style-cstm-label-out-square .label-box-content,
.is-style-cstm-label-in-square .label-box-content,
.is-style-cstm-label-icon-square .label-box-content {
border-radius: 0;
}
/* 丸型ラベルの丸み */
.is-style-cstm-label-out-round .label-box-content,
.is-style-cstm-label-in-round .label-box-content,
.is-style-cstm-label-icon-round .label-box-content {
border-radius: 10px;
}
/*--------------------------------------
ラベルアウト
----------------------------------------*/
.is-style-cstm-label-out-square .label-box-label,
.is-style-cstm-label-out-round .label-box-label {
position: absolute;
top: -0.8em;
padding: 0 0.5em;
background-color: var(--cocoon-white-color);
}
.is-style-cstm-label-out-square .label-box-content,
.is-style-cstm-label-out-round .label-box-content {
padding: 2em;
background-color: transparent !important;
}
/* 834px以下 */
@media screen and (max-width: 834px){
.is-style-cstm-label-out-square .label-box-content,
.is-style-cstm-label-out-round .label-box-content { padding: 1.5em;}
}
/*--------------------------------------
ラベルイン
----------------------------------------*/
.is-style-cstm-label-in-square .label-box-label,
.is-style-cstm-label-in-round .label-box-label {
position: absolute;
top: 1.5em;
left: 2em;
padding: 0;
margin: 0;
}
.is-style-cstm-label-in-square .label-box-content,
.is-style-cstm-label-in-round .label-box-content {
padding: 3.5em 2em 1.5em;
}
/*--------------------------------------
アイコンラベル
----------------------------------------*/
.is-style-cstm-label-icon-square .label-box-label,
.is-style-cstm-label-icon-round .label-box-label {
display: grid;
place-content: center;
height: 100%;
position: absolute;
top: 0;
margin: 0;
padding: 0 0.5em;
font-size: 1em;
}
.is-style-cstm-label-icon-square .label-box-label:before,
.is-style-cstm-label-icon-round .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;
}
.is-style-cstm-label-icon-square .label-box-label-text,
.is-style-cstm-label-icon-round .label-box-label-text {
display: none;
}
.is-style-cstm-label-icon-square .label-box-content,
.is-style-cstm-label-icon-round .label-box-content {
padding: 1.5em 1.5em 1.5em 4em;
}
/*--------------------------------------
アイコンボックスカスタマイズ
----------------------------------------*/
/* アイコン変更：メモアイコン */
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-"].memo-box::before {
content: "\f304"; /* FontAwesomeメモアイコン */
}
/* 四角スタイル（枠あり・枠なし・背景透明） */
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-"]:not([class*="circle"]) {
border-radius: 0;
padding: 1.2em 1.5em 1.2em 4em;
}
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-"]:not([class*="circle"])::before {
font-size: 1em;
padding: 0;
}
/* 枠あり・背景透明 */
body .wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-outline,
body .wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-circle-outline {
border-width: 1px;
background-color: transparent;
}
/* 枠なし */
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-borderless,
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-circle-bg {
border-width: 0;
}
/* 部分枠スタイル */
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-top-border,
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-left-border {
border-width: 5px;
}
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-top-border {
border-right: none;
border-left: none;
border-bottom: none;
}
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-left-border {
border-top: none;
border-right: none;
border-bottom: none;
}
/* 丸アイコンスタイル */
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-circle-"] {
padding: 2em;
}
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-circle-"]::before {
display: grid;
place-content: center;
margin: 0;
padding: 0;
width: 2em;
height: 2em;
border-radius: 50%;
font-size: 0.9em;
color: #fff;
box-shadow: 0 0 0 2px #fff;
top: -1em;
left: 0.75em;
}
/* アイコン背景色（種類別） */
.information-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #87cefa; }
.question-box[class*="is-style-cstm-icon-circle-"]::before { background-color: gold; }
.alert-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #f3aca9; }
.memo-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #7ad0b6; }
.comment-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #999; }
.ok-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #3cb2cc; }
.ng-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #dd5454; }
.good-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #98e093; }
.bad-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #eb6980; }
.profile-box[class*="is-style-cstm-icon-circle-"]::before { background-color: #999; }
/* コメント・プロフィール共通背景 */
.comment-box[class*="is-style-cstm-icon-"],
.profile-box[class*="is-style-cstm-icon-"] {
background-color: #f8f8f8;
border-color: #aaa;
}
/* モバイル対応（480px以下） */
@media screen and (max-width: 480px) {
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-"]:not([class*="circle"]) {
padding: 1em 1.5em 1em 3.5em;
}
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-top-border,
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-left-border {
padding: 1em 1.5em 1em 3em;
}
.wp-block-cocoon-blocks-icon-box[class*="is-style-cstm-icon-"]:not([class*="circle"])::before {
top: 50%;
left: 5px;
width: 35px;
margin-left: 0;
}
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-outline::before,
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-borderless::before,
.wp-block-cocoon-blocks-icon-box.is-style-cstm-icon-bordered::before {
border-right: 1px solid;
}
}
/* マイクロバルーン---------------------------------------------- */
.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%;
}
/* ギャラリー---------------------------------------------- */
.wp-block-gallery{
gap:.5em!important;
}
/* 表｜テーブルスタイル調整---------------------------------------------- */
.wp-block-flexible-table-block-table {
overflow-x: auto;
}
@media screen and (min-width: 835px) {
table th, table td {
font-size: .9em;
}
}
table a { text-decoration:none; }
.table-bold table td:first-child { font-weight: bold; /* 一列目太字 */ }
.table-center table td,
.table-center.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table tr td,
table th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table tr th {
text-align:center; /* 中央寄せ */
}
/* セルのスタイル */
.wp-block-table td, .wp-block-table th,
.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 {
padding:.8em 1em;
white-space: normal!important;/* 改行あり */
min-width: 100px!important;
}
/* 枠線の色 */
table:not(.has-border-color) :where(th, td),
.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 {
border-color:var(--cocoon-basic-border-color);
}
/* 見出し */
.scrollable-table th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table tr th {
background-color: var(--accent-color);
color:var(--cocoon-white-color);
}
/* 一列目固定（fixed） */
.fixed :where(table th,table td):first-child {
position: sticky;
left: 0;
z-index: 2;
font-weight:bold;
}
/* スタイル｜ストライプ---------------------------------------------- */
:is(.wp-block-table, .wp-block-flexible-table-block-table):is(.is-style-stripes,.is-style-table-no-vertical,.is-style-table-no-side-border).wp-block-flexible-table-block-table table :where(th, td) {
border:none;/* 全ボーダー削除 */
}
table tr:nth-of-type(2n+1),
.wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(odd) td {
background-color:var(--cocoon-white-color); /* 奇数行の背景 */
}
.wp-block-table.is-style-stripes tbody tr:nth-child(even),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.is-style-stripes tbody tr:nth-child(even) td {
background-color:var(--cocoon-xx-thin-color); /* 偶数行の背景 */
}
/* スタイル｜縦線なし ---------------------------------------------- */
:is(.wp-block-table, .wp-block-flexible-table-block-table).is-style-table-no-vertical.wp-block-flexible-table-block-table table td {
border-bottom:1px solid var(--cocoon-basic-border-color); /* 下線のみ追加 */
}
/* thead が *ない* テーブルに上線を追加 */
:is(.wp-block-table, .wp-block-flexible-table-block-table).is-style-table-no-vertical:not(:has(thead)) table tr:first-child td {
border-top: 1px solid var(--cocoon-basic-border-color);
}
/* スタイル｜左右縦線なし ---------------------------------------------- */
:is(.wp-block-table, .wp-block-flexible-table-block-table).is-style-table-no-side-border.wp-block-flexible-table-block-table table :where(th, td):not(:last-child){
border-right:1px solid var(--cocoon-basic-border-color);
}
:is(.wp-block-table, .wp-block-flexible-table-block-table).is-style-table-no-side-border.wp-block-flexible-table-block-table table :where(th, td){
border-bottom:1px solid var(--cocoon-basic-border-color);
}
/* テーブル記号 ---------------------------------------------- */
.s-circle:before, .d-circle:before, .triangle:before, .cross:before, .b-check:before, .b-question:before, .b-none:before {
height: 2.5em;
width: 2.5em;
opacity: 0.4;
}
.s-circle:before { background-color:var(--cocoon-red-color); } /* 〇 */
.cross:before {background-color:var(--cocoon-blue-color); } /* × */
/* ワードプレスのカラム余白調整 */
/*ボタン時にクラス追加 btn-flex */
.is-layout-flex.btn-flex {
gap: .5rem;
}
/* 個別設定 */
.timeline-box {
--cocoon-custom-point-color:var(--main-color);
}
.block-box .timeline-box[class*="is-style-cstm-timeline"] {
padding: 0; /* ブロック内の余白 */
}
/* -------------------------------
タイムライン共通設定
---------------------------------*/
/* カスタム変数 */
.timeline {
--timeline-dot-size: 16px; /* ドットサイズ */
--timeline-border-width: 2px; /* 線の太さ */
--timeline-margin-left: calc((var(--timeline-dot-size) / 2) - (var(--timeline-border-width) / 2)); /* 左マージン */
--label-width: 46px; /* ラベル幅 */
}
/* タイムラインボックス基本 */
.timeline-box[class*="is-style-cstm-timeline"] {
border: none;
overflow-x: hidden;
padding:1em 0;
}
/* 背景色があるタイムラインボックス */
.timeline-box.has-background[class*="is-style-cstm-timeline"] {
padding: 2em;
}
/* タイトル共通スタイル */
[class*="is-style-cstm-timeline"] .timeline-title {
position: relative;
padding-bottom: 0.8em;
}
.is-style-cstm-timeline-simple .timeline-title,
.is-style-cstm-timeline-step-vertical .timeline-title {
margin-bottom: 1em;
}
.is-style-cstm-timeline-number .timeline-title,
.is-style-cstm-timeline-step-circle .timeline-title,
.is-style-cstm-timeline-step-bordered .timeline-title {
margin-bottom: 2em;
}
/* タイトル下線 */
[class*="is-style-cstm-timeline"] .timeline-title::after {
content: "";
background-color: var(--cocoon-text-color, #333);
position: absolute;
bottom: 0;
left: calc(50% - 1.25rem);
width: 2.5rem;
height: 1px;
border-radius: 10px;
}
/* 空タイトル非表示 */
[class*="is-style-cstm-timeline"] .timeline-title:empty {
display: none;
position: static;
padding-bottom: 0;
margin-bottom: 0;
}
/* ラベル・コンテンツ共通リセット */
[class*="is-style-cstm-timeline"] .timeline-item-label,
[class*="is-style-cstm-timeline"] .timeline-item-content {
float: none;
}
[class*="is-style-cstm-timeline"] .timeline-item-label {
text-align: initial;
}
/* --- 共通ステップ番号 --- */
[class*="is-style-cstm-timeline-step"] .timeline,
.is-style-cstm-timeline-number .timeline {
counter-reset: step;
}
[class*="is-style-cstm-timeline-step"] .timeline-item-label {
font-size: 0;
display: flex;
justify-content: center;
}
[class*="is-style-cstm-timeline-step"] .timeline-item-label::before { content: "STEP"; display: block; }
[class*="is-style-cstm-timeline-step"] .timeline-item-label::after,
.is-style-cstm-timeline-number .timeline-item:before {
content: counter(step);
counter-increment: step;
font-weight: bold;
display: block;
}
[class*="is-style-cstm-timeline-step"] .timeline-item-content { border-left: none; }
/* -------------------------------
タイプ別スタイル
---------------------------------*/
.is-style-cstm-timeline-simple .timeline-item-content,
.is-style-cstm-timeline-number .timeline-item-content,
.is-style-cstm-timeline-step-circle .timeline-item-content {
width: auto; /* コンテンツ幅 */
}
/* --- シンプル --- */
.is-style-cstm-timeline-simple .timeline-item-label {
padding-left: calc(1.5rem + var(--timeline-margin-left));
width: auto;
}
.is-style-cstm-timeline-simple .timeline-item:before {
top: 22px;
left: 0;
width: 10px;
height: 10px;
border: 3px solid var(--cocoon-custom-point-color);
background: #fff !important;
}
/* 親に has-background がある場合 → カスタム背景色を使用 */
.is-style-cstm-timeline-simple.has-background .timeline-item:before {
background: var(--cocoon-custom-background-color) !important;
}
.is-style-cstm-timeline-simple .timeline-item-content {
margin-left: var(--timeline-margin-left);
border-left: var(--timeline-border-width) #ccc solid;
padding: 0 1em 1em 1.5em;
}
/* --- 番号 --- */
.is-style-cstm-timeline-number .timeline-item-label {
display: none;
}
.is-style-cstm-timeline-number .timeline > li.timeline-item {
margin-bottom: 1em;
}
.is-style-cstm-timeline-number .timeline-item:before {
width: 30px;
height: 30px;
line-height: 30px;
left: 0px;
top: 0;
color: #fff;
display: grid;
place-content: center;
}
.is-style-cstm-timeline-number .timeline-item-content {
padding: 0 1em 1em 1.5em;
margin-left: 13px;
border-left: 4px solid #eee;
}
/* --- ステップ（丸型） --- */
.is-style-cstm-timeline-step-circle .timeline .timeline-item { display: flex; }
.is-style-cstm-timeline-step-circle .timeline-item-label {
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: var(--label-width);
height: var(--label-width);
border-radius: 50%;
background: var(--cocoon-custom-point-color);
color: #fff;
padding: 0;
line-height: 1.2;
z-index: 2;
}
.is-style-cstm-timeline-step-circle .timeline-item-label::before { font-size: 10px; }
.is-style-cstm-timeline-step-circle .timeline-item-label::after { font-size: 16px; }
.is-style-cstm-timeline-step-circle .timeline-item-content {
margin-top: 0.5em;
padding: 0 1em 2em;
position: relative;
flex: 1 1 auto;
min-width: 0; /* 見切れ防止 */
}
.is-style-cstm-timeline-step-circle .timeline-item:before { display: none; }
.is-style-cstm-timeline-step-circle .timeline-item-title {
margin-bottom: 0.5em;
}
/* ラベル線 */
.is-style-cstm-timeline-step-circle .timeline-item .timeline-item-content::before {
content: "";
position: absolute;
left: calc(-1 * var(--label-width) / 2);
width: 1px;
height: 100%;
background: var(--cocoon-custom-point-color);
opacity: 0.5;
z-index: 1;
}
/* --- ステップ（縦型） --- */
.is-style-cstm-timeline-step-vertical .timeline .timeline-item,
.is-style-cstm-timeline-step-bordered .timeline .timeline-item {
position: relative;
overflow: visible;
}
.is-style-cstm-timeline-step-vertical .timeline .timeline-item {
padding: 1em;
}
.is-style-cstm-timeline-step-vertical .timeline .timeline-item {
border-bottom: 1px dashed var(--cocoon-custom-point-color);
}
.is-style-cstm-timeline-step-vertical .timeline-item::before,
.is-style-cstm-timeline-step-bordered .timeline-item::before {
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 10px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
border-radius: 0;
}
.is-style-cstm-timeline-step-vertical .timeline-item:last-child::before,
.is-style-cstm-timeline-step-bordered .timeline-item:last-child::before {
display: none;
}
.is-style-cstm-timeline-step-vertical .timeline-item-label {
flex-direction: column;
align-items: center;
}
.is-style-cstm-timeline-step-vertical .timeline-item-title,
.is-style-cstm-timeline-step-bordered .timeline-item-title {
text-align: center;
color: var(--cocoon-custom-point-color);
margin-bottom: 0.5em;
font-size: 1.1em;
}
.is-style-cstm-timeline-step-vertical .timeline-item-content,
.is-style-cstm-timeline-step-bordered .timeline-item-content {
width: 100%;
padding: 0;
}
.is-style-cstm-timeline-step-vertical .timeline-item-label,
.is-style-cstm-timeline-step-bordered .timeline-item-label {
width: auto;
color: var(--cocoon-custom-point-color);
line-height: 1.2;
padding: 0;
}
.is-style-cstm-timeline-step-vertical .timeline-item-label::before { font-size: 12px; }
.is-style-cstm-timeline-step-vertical .timeline-item-label::after { font-size: 30px; }
/* --- ステップ（枠線付） --- */
.is-style-cstm-timeline-step-bordered .timeline .timeline-item {
border: 1px solid var(--cocoon-custom-point-color);
padding: 2em;
}
.is-style-cstm-timeline-step-bordered .timeline .timeline-item:not(:last-child) {
margin-bottom: 30px !important;
}
.is-style-cstm-timeline-step-bordered .timeline-item::before {
margin-top: 10px;
}
.is-style-cstm-timeline-step-bordered .timeline-item-label {
flex-direction: row;
align-items: baseline;
gap: 2px;
}
.is-style-cstm-timeline-step-bordered .timeline-item-label::before { font-size: 1rem; }
.is-style-cstm-timeline-step-bordered .timeline-item-label::after { font-size: 1.2rem; }
/* -------------------------------
レスポンシブ（スマホ 480px以下）
---------------------------------*/
@media screen and (max-width: 480px) {
/* 背景色あり */
.timeline-box.has-background[class*="is-style-cstm-timeline"] { padding: 2em 1em; }
/* simpleタイプ調整 */
.is-style-cstm-timeline-simple .timeline > li.timeline-item { border: none; }
.is-style-cstm-timeline-simple .timeline-item-label { padding-left: 1rem; }
.is-style-cstm-timeline-simple .timeline-item:before { left: -0.45rem; }
.is-style-cstm-timeline-simple .timeline-item-content { margin-left: 0; padding-left: 1rem; }
/* paddingリセット */
.is-style-cstm-timeline-number .timeline,
.is-style-cstm-timeline-step-circle .timeline,
.is-style-cstm-timeline-step-vertical .timeline,
.is-style-cstm-timeline-step-bordered .timeline { padding-left: 0; }
/* 左線非表示 */
.is-style-cstm-timeline-number .timeline > li.timeline-item,
.is-style-cstm-timeline-step-circle .timeline > li.timeline-item,
.is-style-cstm-timeline-step-vertical .timeline > li.timeline-item { border-left: none; }
/* ラベル padding調整 */
.is-style-cstm-timeline-step-vertical .timeline-item-label,
.is-style-cstm-timeline-step-bordered .timeline-item-label { padding-left: 0; padding-right: 0; }
}
/******************************************
追加css
*******************************************/
/* 比較表 ---------------------------------------------- */
.article .compare-box :where(ul, ol, p) {
margin-bottom: 0;
}
/* 比較表全体 */
.compare-box {
display: flex; /* 配置 */
margin: 3em auto;
border-radius: 1px; /* 角丸 */
box-shadow: 0 1px 2px #ccc;
}
/* 左のボックス、右のボックス */
.compare-box :where(.compare-left-wrap, .compare-right-wrap) {
flex: 1 1 50%; /* grow, shrink, basis */
box-sizing: content-box;
}
.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; /* 文字太さ */
}
/* 左のタイトル */
.compare-box .compare-left-head {
border-radius: 1px 0 0 0; /* 角丸 */
background-color: #ddbaad; /* 背景色 */
}
/* 右のタイトル */
.compare-box .compare-right-head {
border-radius: 0 1px 0 0; /* 角丸 */
background-color: #f9d39a; /* 背景色 */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box :where(.compare-left, .compare-right) {
padding: 1em 1.5em; /* 余白 */
}
/* スマホで見たとき */
@media screen and (max-width: 600px) {
/* 左のタイトル、右のタイトル */
.compare-box :where(.compare-left-head, .compare-right-head) {
height: 40px; /* 高さ */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box :where(.compare-left, .compare-right) {
padding: 1em; /* 余白 */
font-size: .85em;
}
}
/* 点滅 */
@keyframes blinking {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* 要素にアニメーションを適用 */
.blink {
animation: blinking 1s ease-in-out infinite alternate;
}
/*もっと見るボタン*/
.list-more-button {
padding: .3em 4em;
background-color: var(--main-color);
color: var(--cocoon-white-color);
border: solid 2px var(--main-color);
}
.list-more-button:hover{
background-color:initial;
}
/*改行PCでは無効（改行しない）*/
.sma{
display: none;
}
/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
.sma{
display: block;
}
}
/* キーボードキー--------------------------------------------- */
.keyboard-key {
background-color:initial;
border: 1px solid #888;
border-radius: 2px;
box-shadow:none;
font-size: 0.9em;
padding:2px 5px;
margin:auto 3px;
}
/* ポイントマーカー色---------------------------------------------- */
.badge-pink{
background-color:#DDC5B5;
}
.badge-blue{
background-color:var(--cocoon-blue-color);
}
/* マーカー（下線）---------------------------------------------- */
.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(--accent-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;
padding-left:0;
}
.txt-link-box p{
margin-bottom:1em!important;
}
/* ポチップ／インラインボタン色----------------------------------------------*/
.pochipp-box{
box-shadow: none!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;
border-radius:40px!important;
}
/* 画像サイズ */
@media screen and (min-width: 1000px) {
body .pochipp-box[data-lyt-pc="big"],
body .pochipp-box[data-lyt-pc="imgbig"] {
grid-template-columns: 40% 1fr;
}
body .pochipp-box__image img {
max-height: 200px;
}
}
@media screen and (max-width: 599px) {
body .pochipp-box[data-lyt-mb="vrtcl"] .pochipp-box__image img {
width: 100%;
max-width: 200px;
}
body .pochipp-box .pochipp-box__btn {
padding: 10px;
}
}