@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
.content {margin-top: 0px;}
.main { padding: 0px 29px 20px 29px;}
.entry-content {margin-top: 3em;margin-bottom: 3em;}
.sidebar {width: 376px;margin-top: 100px;}
.single.sidebar .article h1 {position: relative;left: 200px;}
.back01{  background-image: url(https://m-cleanservice.com/wp-content/uploads/2022/03/back001.jpg);  background-repeat: no-repeat;  background-position: top left;min-height:800px;}
.back02{  background-image: url(https://m-cleanservice.com/wp-content/uploads/2022/03/back002.jpg);  background-repeat: no-repeat;  background-position: top right;min-height:800px;}
.back03{  background-image: url(https://m-cleanservice.com/wp-content/uploads/2022/03/back003.jpg);  background-repeat: no-repeat;  background-position: top left;min-height:800px;}
.back04{  background-image: url(https://m-cleanservice.com/wp-content/uploads/2022/03/back004.jpg);  background-repeat: no-repeat;  background-position: top right;min-height:800px;}
/*必要ならばここにコードを書く*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #1b68ae;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}
#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}
.navi-in a { color: #333; font-size: 14px;font-weight:600;}

/*必要ならばここにコードを書く*/

.mincho{font-family: 'Noto Serif JP', serif;font-weight:600;}
.mincho3{font-family: 'Noto Serif JP', serif;font-weight:300;}
.f-vw{font-size:clamp(1.5rem, 2vw + 1rem, 2.625rem);font-weight:800;}
.m-vw{margin-top:7.2vw!important}
.shadow {box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}
.full-width {margin: 0 calc(50% - 50vw); padding: 5em calc(50vw - 50%);}
.full-width2 {margin: 0 calc(50% - 50vw); padding: 2em calc(50vw - 50%);}
.date-tags{display:none;}
.tbl-r02 th { background: #e9727e; color: #808080; padding: 10px;}
.tbl-r02 td { padding: 10px;}
.img_container:hover img{transform: scale(1.1); transition: transform .5s;}
.new-entry-cards.large-thumb {display: flex;flex-wrap: wrap;}
.new-entry-cards.large-thumb a {width: 33.333%;}

/* =========================================
   entry-title 微妙な左ズレ対策 完成版
   ポイント：
   - h1本体は通常の中央配置
   - 全幅背景は ::before で作る
   - 100vwズレ対策として svw も併用
========================================= */

.single.sidebar .article h1, .single .article h1.entry-title, .single .article-header .entry-title, .single .entry-header .entry-title { left: auto !important; right: auto !important; transform: none !important; }
.single .article-header, .single .entry-header { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
.single .article-header .entry-title, .single .entry-header .entry-title, .single .article h1 { position: relative !important; z-index: 1; display: block; margin: 0 0 24px !important; padding: clamp(18px, 3vw, 34px) 20px !important; box-sizing: border-box; text-align: center !important; line-height: 1.35; letter-spacing: 0.02em; overflow-wrap: anywhere; word-break: break-word; font-size: clamp(1.5rem, 2vw + 1rem, 2.625rem); font-weight: 800; color: #fff; background: none !important; isolation: isolate; }
.single .article-header .entry-title::before, .single .entry-header .entry-title::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 75%!important; transform: translateX(-50%); width: 100vw; width: 100svw; max-width: none; background: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18)), url("https://m-cleanservice.com/wp-content/uploads/2022/03/h1back.jpg") no-repeat 56% 50%; background-size: cover; }

.sidebar .article h1,.article h1.entry-title,.article-header .entry-title,.entry-header .entry-title { left: auto !important; right: auto !important; transform: none !important; }
.article-header, .entry-header { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
 article-header .entry-title,.entry-header .entry-title { position: relative !important; z-index: 1; display: block; margin: 0 0 24px !important; padding: clamp(18px, 3vw, 34px) 20px !important; box-sizing: border-box; text-align: center !important; line-height: 1.35; letter-spacing: 0.02em; overflow-wrap: anywhere; word-break: break-word; font-size: clamp(1.5rem, 2vw + 1rem, 2.625rem); font-weight: 800; color: #fff; background: none !important; isolation: isolate; }
.article-header .entry-title::before, .single .entry-header .entry-title::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; width: 100svw; max-width: none; background: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18)), url("https://m-cleanservice.com/wp-content/uploads/2022/03/h1back.jpg") no-repeat 56% 50%; background-size: cover; }


/************************************
****　エントリーカードインデックス
************************************/
.ect-vertical-card .entry-card-wrap .entry-card-content{padding:3px;margin:0;display:flex;flex-direction:column;height:100%}
a.entry-card-wrap.a-wrap.border-element.cf{padding:0 0 .5em;border-radius:6px;width:33%;margin-bottom:1em}
a.entry-card-wrap.a-wrap{transition:all .1s}
a.entry-card-wrap.a-wrap:hover{transform:translateY(-1px);transition:all .1s;background-color:#fff}
figure.entry-card-thumb.card-thumb.e-card-thumb{max-height:200px;border-radius:6px 6px 0 0/ 6px 6px 0 0;overflow:hidden;display:flex;justify-content:center;align-items:center}
.e-card-thumb .cat-label{margin-top:.3em;margin-left:.3em}
.cat-label{background-color:#004f9d!important}
h2.entry-card-title.card-title.e-card-title{font-size:18px;color:#7b7b7b;font-weight:700;text-align:center;line-height:1.5rem;margin-top:.5em;margin-bottom:1rem;padding:0 .3em}
.entry-card-snippet.card-snippet.e-card-snippet{font-size:14px;color:#7b7b7b;text-align:center;border-top:3px dotted silver;line-height:1.8em;padding-top:.6em;margin-left:2em;margin-right:2em;margin-bottom:1em;max-height:20em}
.eye-catch .cat-label,.cat-label{font-size:.7em;padding:0 .5em;opacity:.85;background-color:#f5f5f5;color:#696969}
div.admin-pv{display:none}
/************************************
**　トップ新着・人気・関連記事ウィジェット 投稿日・更新日表示
************************************/
.new-entry-cards.a-wrap{display:flexbox}
.widget-entry-cards.card-large-image .a-wrap{border:solid 1px #ccc;border-radius:20px;width:24%;text-align:left;padding:0;margin:1px;height:400px}
.widget-entry-cards:not(.large-thumb-on) .card-title{font-size:16px;color:#7b7b7b;font-weight:700;text-align:center;line-height:1.5rem;margin-top:.5em;margin-bottom:1rem;padding:0 .8em}
.widget-entry-card-snippet{font-size:12px;color:#7b7b7b;text-align:center;border-top:3px dotted silver;line-height:1.5em;padding-top:.6em;margin-left:2em;margin-right:2em;margin-bottom:1em;max-height:20em}
.widget-entry-cards.card-large-image figure img{width:100%;display:block;border-radius:20px 20px 0 0;object-fit:cover}
.widget-entry-card-thumb{margin-top:0!important}
.eye-catch .cat-label,.cat-label{font-size:.7em;padding:0 .5em;margin-left:5px;opacity:.85;background-color:#f5f5f5;color:#696969}
div.admin-pv{display:none}
.new-entry-card-date{display:block;color:#a3a1a1;text-align:right;margin-right:15px}
.widget-entry-card-update-date{display:none}
.widget-entry-card-date{display:block;position:absolute;right:0;font-size:18px}
.widget-entry-card-date::before{font-family:"Font Awesome 5 Free";content:"\f017";font-weight:400;padding-right:0;font-size:14px}

/************************************
** サイドバーの設定
************************************/
.widget_categories ul li a{color:#333;text-decoration:none;padding:6px 0;display:block;padding-right:4px;padding-left:4px;border-top:1px dotted #ccc;font-size:16px}
.widget_categories ul li a::before{font-family:"Font Awesome 5 Free";content:"\f192";color:#a8bcc8;padding-right:5px;font-weight:900;font-size:18px}
.widget_categories > ul > li > a:first-child{border-top:none}
.widget_categories > ul > li > a:last-child{border-bottom:1px dotted #ccc}
.widget_categories ul li a .post-count{display:block;float:right;background:#ededed;padding:0 1em;font-size:14px;margin-top:.2em;border-radius:4px}
.widget_categories ul li a:hover{background:none;transition:.5s;color:#72c7e6}
.widget_categories ul li a:hover .post-count{background:#72c7e6;color:#fff;transition:.5s}
.widget_categories ul li ul{border-bottom:1px dotted #ccc}
.widget_categories ul li ul li a{color:#333;text-decoration:none;padding:0 4px 4px;display:block;border:none}
.widget_categories ul li ul li a::before{display:inline-block;width:30px;height:30px;background:url(https://el-design.jp/wp-content/uploads/2024/11/83e0448450076e8838472f4ac197e3e1.svg) no-repeat}
.no-scrollable-sidebar .sidebar{height:100%}
.sidebar h3{background-color:#FFF;position:relative;font-size:1.2rem;font-weight:700;padding:12px 0 12px 40px;margin:16px 0;border-radius:2px}
.sidebar h3::before{position:absolute;content:'';left:0;bottom:0;width:100px;height:3px;background:#56afd5;z-index:1}
.sidebar h3::after{position:absolute;content:'';left:0;bottom:0;width:100%;height:3px;background:#f5f5f5}
.cat-label{color:#fff!important;border-radius:5px}
.widget_recent_entries ul li a,.widget_archive ul li a,.widget_pages ul li a,.widget_meta ul li a,.widget_rss ul li a,.widget_nav_menu ul li a{padding:5px 0;padding-right:9px;padding-left:5px;transition:all 1s;font-size:14px}
.widget_recent_entries ul li a,.widget_archive ul li a,.widget_pages ul li a,.widget_meta ul li a,.widget_rss ul li a,.widget_nav_menu ul li a:hover{transform:translate(20px,0px);background-color:#FFF}
.widget_recent_entries ul li a::after{position:absolute;content:"";display:block;width:10px;height:10px;background-color:#56afd5;border-radius:50%;top:10px;left:-20px;opacity:0;-webkit-transition:all .6s ease;transition:all .6s ease}
.widget_recent_entries ul li a:hover::after{opacity:1}

.widget_categories ul li a:hover{transform: translate(20px,0px);}
.widget_categories ul li a::after{ position: absolute; content: ""; display: block; width: 10px; height: 10px; background-color: #56afd5; border-radius: 50%; top: 10px; left: -20px; opacity: 0; -webkit-transition: all 0.6s ease; transition: all 0.6s ease;}
.widget_categories ul li a:hover::after{ opacity: 1;}


/768px以下/
@media screen and (max-width: 768px){}
@media screen and (max-width: 1023px){}
@media screen and (max-width: 834px){
.new-entry-cards.large-thumb a {width: 50%;}
.last td:last-child { border-bottom: solid 1px #ccc; width: 100%; }
.tbl-r02 {width: 80%;}
.tbl-r02 th,.tbl-r02 td {border-bottom: none;display: block;width: 100%;}
.tbl-r02 th {background-color: #808080!important; color:#fff;}
.single .article-header .entry-title, .single .entry-header .entry-title { margin: 0 0 16px !important; padding: 16px 14px !important; font-size: clamp(1.25rem, 5vw, 1.8rem); line-height: 1.4; } .single .article-header .entry-title::before, .single .entry-header .entry-title::before { background-position: 54% 50%;｝
}
@media screen and (max-width: 480px) {
.new-entry-cards.large-thumb a {width: 100%;}
.article-header .entry-title,.entry-header .entry-title {padding: 14px 12px !important;font-size: 1.3rem;}
.back01{background-image: url(https://m-cleanservice.com/wp-content/uploads/2022/03/19e2b16c8a02851873264f0d7a7609a4.jpg);  background-repeat: no-repeat;  background-position: top center;min-height:350px;}
.back02{background-image: url(https://m-cleanservice.com/wp-content/uploads/2022/03/813247d8ea16866404c04d64d8d55bd0.jpg);  background-repeat: no-repeat;  background-position: top center;min-height:350px;}
.back03{background-image: url(https://m-cleanservice.com/wp-content/uploads/2022/03/0111194643fab7646a15c86cc765eb53.jpg);  background-repeat: no-repeat;  background-position: top center;min-height:350px;}
.back04{background-image: url(https://m-cleanservice.com/wp-content/uploads/2022/03/b4a569b316cee2a861b882ecfe5e2fc4.jpg);  background-repeat: no-repeat;  background-position: top center;min-height:350px;}
}