@charset "UTF-8";

:root {
--thin-color: #ddd;
--xxx-thin-color: #fafbfc;
--xx-thin-color: #f5f6f7;
--x-thin-color: #eee;
--middle-thickness-color: #888;
--badge-border-radius: 2px;
--basic-border-radius:4px;
--x-pallid-text-color: #999;
--custom-background-color: inherit;

--light-grey-color: #cccccc;
--grey-color: #949495;
--dark-grey-color: #666666;
--blue-gray-color: #607d8b;

--red-color: #cc0000;
}


/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}



body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}
ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration: none;
}
ins {
background-color:#fff;
color:#000;
text-decoration:none;
}
mark {
background-color:#fff;
color:#000; 
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;   
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}





/* common */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
box-sizing: border-box;
}


body{
line-height: 1.8;
font-family: "Roboto", "Noto Sans JP",  sans-serif;
background-color: #f4f5f7;
font-size: 16px;

}



img{
max-width: 100%;
height: auto;
}


@media screen and (max-width: 834px) {
body{
font-size: 14px; 
}
}




.header{
background-color: #000;
}
.header h1 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
padding: 30px  10px;
text-align: center;
}
.header h1 img{
width: 280px;
}
.header h1 span{
font-size: 14px;
margin-top: 10px;
font-weight: normal;
}
.header__nav{
background-color: #a00;
height: 60px;

}

.header__nav_list{
display: flex;
justify-content: center;
height: 100%;
align-items: center;
gap: 20px;
}

.header__nav_list li a{
color: #fff;
font-size: 16px;
}

@media screen and (max-width: 834px) {
.header h1 {
padding:10px;
}

.header h1 span {
font-size: 12px;
margin-top: 0;
}

.header h1 img{
width: 60%;
max-width: 280px;
}

.header__nav {
height: 40px;
}

.header__nav_list{
justify-content:flex-start;
gap: 10px;
padding: 0 10px;
}

}

.footer__nav ul{
display: flex;
justify-content: center;
margin-bottom: 50px;
}
.footer__nav a{
color: #333;
font-size: 14px;
padding: 10px 20px;
border-left: 1px solid #ccc;
}
.footer__nav li + li a{
border-right: 1px solid #ccc;
}
.footer__copy{
font-size: 12px;
text-align: center;
padding: 10px;
}




.breadcrumbsWrap{
  width: 90%;
  max-width: 1200px;
  margin:30px auto 0;
  font-size: 12px;
  color: #ccc;
  white-space: nowrap;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.breadcrumbs{
  display: flex;
  align-items: center;
}
.breadcrumbs a{
    color: #333;
}
.breadcrumbs .arrow{
  display: inline-block;
  content: '';
  width: 6px;
  height: 6px;
  border-top: solid 1.5px #aaa;
  border-right: solid 1.5px #aaa;
  margin-right: 10px;
  margin-left: 10px;
  transform: rotate(45deg);
}





/* home */

.main{
padding: 60px 0;
width: 90%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 834px) {
.main{
padding: 30px 0 60px;
}
}


/* 最新記事 */
.home_top_post_wrap {
margin-bottom: 100px !important;
width: 100%;
/* overflow-x: hidden;
overflow-y: visible; */
}

.home_top_post .slick-list {
overflow: hidden !important;
}
.home_top_post .slick-track {
overflow: hidden;
/* display: flex !important;
align-items: stretch !important; */

}

.slick-slide {
background-color: #fff;
border-radius: 10px;
}

.home_top_post{
position: relative;
display: flex !important;
color: #333;
text-decoration: none;
border-radius: 10px;
overflow: hidden;
}

.home_top_post:hover{
color: #333;

}

.home_top_post__img{
width: 50%;
}
.home_top_post__img img{
height: 100%;
object-fit: cover;
}

.home_top_post__img .cat-label {
position: absolute;


top: 10px;
left: 10px;
border: 1px solid #eee;
font-size: 10px;
color: #fff;
background-color: rgba(51, 51, 51, 0.7);
padding: 3px 5px;
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}

.home_top_post__dsc{
width: 50%;
padding: 20px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;

}

.home_top_post__dsc a{
display: block;
color: #333;
text-decoration: none;
}

.home_top_post__ttl{
font-size: 22px;
line-height: 1.6;
font-weight: bold;
margin-bottom: 30px;
margin-top: 20px;
}

.home_top_post__date{
text-align: right;
}

.home_top_post__tag{
display: flex;
list-style: none;
gap: 10px;
padding: 0;
margin: 10px 0 !important;
flex-wrap: wrap;
}

.home_top_post__tag a{
padding: 5px 10px;
background-color: #E2E2E2;
text-decoration: none;
color: #333;
font-size: 12px;
border-radius: 15px;
}
.slick-dots{

bottom: -40px;
}
.slick-dots li{
width: auto !important;
height: auto !important;
}
.slick-dots li button{
width: 45px !important;
height: 8px !important;
padding: 0 !important;
}

.slick-dots li button:before {
width: 45px !important;
background: #000;
height: 8px !important;
content: "" !important;
border-radius: 8px;
}


@media screen and (max-width: 834px) {

.home_top_post_wrap {
margin-bottom: 50px !important;
}

.home_top_post{
display: block !important;
}
.home_top_post__img{
width: 100%;
}

.home_top_post__img img{
height: auto;
}

.home_top_post__dsc{
width: 100%;
padding: 10px;
}
.home_top_post__ttl{
margin-bottom: 10px;
margin-top: 0;
font-size: 16px;
}
.slick-dots{
display: block !important;
}
.home_top_post__tag{
    gap: 5px;
}
}

.pagination-next{
display: none;
}

.page-numbers{
border: none !important;
color: #707070 !important;
}

.pagination .current{
border-radius: 50% !important;
background-color: #707070 !important;
color: #fff !important;
}

.page-numbers.next,
.page-numbers.prev{
border-radius: 50% !important;
border: 1px solid !important;

}


/* 検索・タグBOX */
.top_search_box{
border: 2px solid #000;
padding:30px 60px ;
margin-bottom: 50px;
text-align: center;
border-radius: 5px;
}

.top_search_box .search-box {
margin: 0;
position: relative;
margin: 0 auto 30px;
}

.top_search_box__ttl{
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
}
.top_search_box__tag_ttl{
text-align: left;
font-size: 28px;
font-weight: bold;
border-bottom: 2px solid #707070;
}

.top_search_box form{
border-radius: 50px;
overflow: hidden;

}
.top_search_box input{
border-radius: 50px;
padding:10px 30px;
border: none;
width: 100%;
}
.top_search_box .search-submit {
position: absolute;
right: 3px;
top: calc(50% - 12px);
font-size: 20px;
cursor: pointer;
border: none;
color: var(--thin-color);
padding: 0 8px;
background-color: #000;
color: #fff;
height: 100%;
top: 0;
right: 0;
width: 110px;
}

.top_search_box__tag{
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 10px auto 0;
padding: 0;
gap: 10px;
}

.top_search_box__tag li{
}

.top_search_box__tag li a{ 
padding: 5px 10px;
background-color: #E2E2E2;
text-decoration: none;
color: #333;
font-size: 12px;
border-radius: 15px;
}

.top_search_box--bottom{
margin-top: 120px;
}
@media screen and (max-width: 834px) {
.top_search_box--bottom{
margin-top: 60px;
}
.top_search_box{
padding: 30px;
}
.top_search_box__ttl,.top_search_box__tag_ttl{
font-size: 20px;
}


}



/* archive */

.archive_title{ 
font-size: 26px;
margin: 0 0 20px;
}
@media screen and (max-width: 834px) {

.archive_title{
font-size: 20px;
}
}

.post_list{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
gap:30px;
}

.post_list__item {
background-color: #fff;
border-radius: 10px;
overflow: hidden;
width: calc((100% - 60px) / 3);
display: flex;
flex-direction: column;
justify-content: space-between;
}

.post_list__item .post_list__item_dsp {
padding: 20px 24px 10px;
}
/* .post_list__item .home_top_post__tag{
padding: 0 24px;
} */
.post_list__item .post_list__item_date{
padding: 0 24px;  
}

.post_list__item_img{
position: relative;
width: 100%;
aspect-ratio: 352 / 198;
display: block;

}

.post_list__item_img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
top: 0;
left: 0;
}

.post_list__item_img .cat-label {
position: absolute;
top: 10px;
left: 10px;
border: 1px solid #eee;
font-size: 10px;
color: #fff;
background-color: rgba(51, 51, 51, 0.7);
padding: 3px 5px;
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}

.post_list__item_dsp{
padding: 30px 24px 10px;
}

.post_list__item_dsp .ttl {
font-size: 18px;
margin: 0 0 0.4em 0;
line-height: 1.6;
font-weight: bold;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.post_list__item_dsp a{
color: #333;
}
.post_list__item_dsp .txt{
font-size: 14px;
margin: 0 0 0.4em 0;
line-height: 1.3;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

.post_list__item_date{
font-size: 11px;
padding:0;
margin: 0 0 10px !important;
display: flex;
justify-content: flex-end;
gap: 5px;
align-items: center;
}

.post_list__item_date span{
font-size: 14px;
}

@media screen and (max-width: 834px) {
.post_list{
flex-direction: column;
gap:30px;
}

.post_list__item {
width:100% ;
}
.post_list__item_dsp .ttl {
    font-size: 16px;
}

.post_list__item_dsp{
  padding: 10px;
}
}


.navigation.pagination {
    display: flex;
    justify-content: center; 
    margin: 50px 0; 
}
.navigation.pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 15px; 
}

.navigation.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    line-height: 1; 
    
    width: 38px;
    height: 38px;
    border-radius: 50%;
    
    background: transparent;
    border: none;
    padding: 0;
}


.navigation.pagination .current {
    background-color: #333 !important; 
    color: #fff !important; 
}

.navigation.pagination .next,
.navigation.pagination .prev { 
    border: 1px solid #333 !important; 
    color: #333 !important;
    text-indent: -9999px; 
    overflow: hidden;
    position: relative;
}

/* 矢印アイコンの作成 */
.navigation.pagination .next::after {
    content: "\203A";
    position: absolute;
    text-indent: 0;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-left: 2px;
    line-height: 34px;
    height: 100%;
}
.navigation.pagination .prev::after {
    content: "\203A";
    position: absolute;
    text-indent: 0;
    font-size: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    line-height: 32px;
    height: 100%;
}

.navigation.pagination .dots {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    font-size: 16px;
    color: #333;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.searchform > div{
    position: relative;
}

.searchsubmit{
    position: absolute;
    right: 3px;
    top: calc(50% - 12px);
    font-size: 20px;
    cursor: pointer;
    border: none;
    color: var(--cocoon-thin-color);
    padding: 0 8px;
    background-color: #000;
    color: #fff;
    height: 100%;
    top: 0;
    right: 0;
    width: 110px;
}

.top_search_box__tag_ttl{
margin-top: 30px;
}





.single .main {
max-width: 1000px;
margin: 0 auto !important;
}

.post_content{
background-color: #fff !important;
padding: 50px 10%;
border-radius: 10px;
}

.post_ttl{ 
font-size: 26px;
margin: 0 !important;
}

.post_cat {
color: #333;
text-decoration: none;
border: 1px solid;
padding: 2px 8px;
margin: 0 0 10px !important;
display: inline-block;
}

@media screen and (max-width: 834px) {

.post_content{
padding: 20px;
}

.post_list__item_date{
padding: 0 10px 10px;
}
.post_ttl{
font-size: 20px;
margin-bottom: 10px !important;
}
.post_content .home_top_post__tag{
  margin: 0 0 20px;
}
}


.post_related{
margin: 80px 0 0;
}

.post_related h2{
font-size: 24px;
margin: 0 0 10px;
}



.post-navigation{
margin: 50px 0 0;
}
.post-navigation > div{
display: flex;
padding: 20px;
background-color: #fff;
border-radius: 10px;
align-items: center;
gap: 20px;
}

.post-navigation > div img{
vertical-align: bottom;
}
.post-navigation > div A{
color: #333;
}
.next-post{
flex-direction: row-reverse;
margin-top: 20px;
}

/************************************
** 投稿・固定ページで使うHTML要素
************************************/
.post_content > *,
.post_content h2, .post_content h3, .post_content h4, .post_content h5, .post_content h6 {
margin-bottom: 1.62em;
}


table {
margin-bottom: 20px;
max-width: 100%;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
table th,
table td {
position: relative;
padding: 0.5em;
}
table th {
background-color: var(--xx-thin-color);
}
table tr:nth-of-type(2n+1) {
background-color: var(--xxx-thin-color);
}
table:not(.has-border-color) :where(th, td) {
border: 1px solid var(--x-thin-color);
}

.scrollable-table {
-webkit-overflow-scrolling: touch;
margin: 0;
}
.scrollable-table.stfc-sticky table:not(.wp-calendar-table) tr > *:first-child {
background-color: #e9eff2;
color: var(--text-color);
position: sticky;
position: -webkit-sticky;
left: 0;
z-index: 2;
}

.scrollable-table table {
border-collapse: collapse;
max-width: none;
margin: 0;
}

.scrollable-table th {
background-color: #eee;
}

.scrollable-table th,
.scrollable-table td {
white-space: nowrap;
}

.scrollable-table .has-fixed-layout th,
.scrollable-table .has-fixed-layout td {
white-space: normal;
}

.scrollable-table {
overflow-x: auto !important;
overflow-y: hidden !important;
}

figure.wp-block-table table {
width: auto;
}

figure.wp-block-table.alignwide table,
figure.wp-block-table.alignfull table {
width: 100%;
}

.main figure.wp-block-table {
width: auto;
max-width: 100%;
display: block;
}

figure.wp-block-table table {
margin-right: auto;
}
figure.wp-block-table.aligncenter table {
margin-left: auto;
}
figure.wp-block-table.aligncenter figcaption {
text-align: center;
}
figure.wp-block-table.alignright table {
margin-left: 0;
}

.scroll-hint-icon-wrap {
overflow: hidden;
}

.post_content {
margin-bottom: 2em;
}
.post_content dd {
margin-left: 40px;
}
.post_content ul li,
.post_content ol li {
margin: 0.2em;
}
.post_content ul ul, .post_content ul ol,
.post_content ol ul,
.post_content ol ol {
margin: 0;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
}
.post_content .wp-block-gallery ul {
padding-left: 0;
}
.post_content h1,
.post_content h2,
.post_content h3,
.post_content h4,
.post_content h5,
.post_content h6 {
line-height: 1.25;
font-weight: bold;
}
.post_content h4,
.post_content h5,
.post_content h6 {
font-size: 20px;
padding: 9px 10px;
}
.post_content h2 {
font-size: 24px;
padding: 25px;
background-color: var(--xx-thin-color);
border-radius: var(--badge-border-radius);
}
.post_content h3 {
border-left: 7px solid var(--middle-thickness-color);
border-right: 1px solid var(--thin-color);
border-top: 1px solid var(--thin-color);
border-bottom: 1px solid var(--thin-color);
font-size: 22px;
padding: 12px 20px;
}
.post_content h4 {
border-top: 2px solid var(--thin-color);
border-bottom: 2px solid var(--thin-color);
}
.post_content h5 {
border-bottom: 2px solid var(--thin-color);
}
.post_content h6 {
border-bottom: 1px solid var(--thin-color);
}
.post_content .column-wrap h1, .post_content .column-wrap h2, .post_content .column-wrap h3, .post_content .column-wrap h4, .post_content .column-wrap h5, .post_content .column-wrap h6 {
margin-top: 0;
}

/************************************
** 引用（blockquote）
************************************/
blockquote {
background-color: var(--xxx-thin-color);
border: 1px solid var(--thin-color);
padding: 1.4em 1.8em;
position: relative;
}
blockquote::before, blockquote::after {
color: #C8C8C8;
font-family: serif;
position: absolute;
font-size: 300%;
}
blockquote::before {
content: "“";
line-height: 1.1;
left: 10px;
top: 0;
}
blockquote::after {
content: "”";
line-height: 0;
right: 10px;
bottom: 0px;
}
blockquote cite {
font-size: 0.7em;
}

/*本文下情報*/
.footer-meta {
font-size: 0.8em;
text-align: right;
}

/*投稿者*/
.author-info .post-author {
font-size: 14px;
}




.blank-box.sticky {
border-width: 0 0 0 6px;
border-style: solid;
border-color: var(--x-pallid-text-color);
background-color: var(--xx-thin-color);
padding:1em 1.5em;
border-radius: var(--basic-border-radius);
}




.blank-box {
--custom-border-color: var(--grey-color);
padding:1em 1.5em;
border-radius: var(--basic-border-radius);
border-style: solid;
border-width: 1px;
border-color: var(--custom-border-color);
background-clip: padding-box;
}





.btn{
border-width: 2px;
border-style: solid;
color: var(--cocoon-custom-text-color, #fff);
background-color: var(--cocoon-custom-background-color, #333);
border-color: var(--cocoon-custom-border-color);
font-weight: bold;
border-radius: 4px;
display: inline-block;
cursor: pointer;
line-height: normal;
padding: 7px 13px;
text-decoration: none;
text-align: center;
font-size: 14px;
position: relative;
transition: all 0.3s 
ease-in-out;
background-clip: padding-box;
}

.btn-m{
padding: 14px 45px;
font-size: 16px;
}

.btn-red, .ranking-item-link a, .btn-wrap.btn-wrap-red > a {
background-color: var(--red-color);
}

.blogcard {
width: 100%;
margin: 30px 0;
background-color: #fff;
border: 1px solid #ccc;
word-wrap: break-word;
display: flex;
color: #000;
position: relative;
}

.blogcard-img {
width: 280px;
padding: 10px 10px 0 10px;
}
.blogcard-img img{
vertical-align: bottom;
}
.blogcard-content {
width: calc(100% - 280px);
padding: 10px;
color: #333;
}
.blogcard-title {
font-size: 16px;
font-weight: bold;
margin: 0;
}
.blogcard-excerpt {
font-size: 14px;
line-height: 1.6;
margin-top: 10px;
}

/** スマホ用 **/
@media screen and (max-width: 834px) {
    .blogcard {
        flex-direction: column;
    }
    .blogcard-img {
width: 100%;
    }
    .blogcard-img img {
        /* max-width: 100%;
        height: 100%;
        object-fit: cover; */
    }
    .blogcard-content {
        /* width: calc(100% - 120px); */
        width: 100%;
    }
    .blogcard-title {
        /* font-size: 1.3rem; */
    }
    .blogcard-excerpt  {
        /* display: none; */
    }
}