@charset "UTF-8";

html { font-size: 62.5%; }

body{
color: #222222;
font-family: "Noto Sans JP","Roboto", sans-serif;
font-size: 1.6rem;
line-height: 1.8;
padding-top: 80px;
}

@media screen and (max-width: 1023px) {
body{
padding-top: 60px;
}
}

a{
color: #222222;
font-size: 1.6rem;
text-decoration: none;
}

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

.header{
width: 100%;
top: 0;
position: fixed;
z-index: 2;
background-color: #fff;
display: flex;
height: 80px;
align-items: center;
padding: 0 2.5%;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
}

.header__navWrap{
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
}

.header__navList{
display: flex;
padding-left: 20px;
}
.header__navList li{
position: relative;
}
.header__navList > li + li::before{
content: "";
display: block;
height: 15px;
width: 1px;
border-left: 1px solid;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}

.header__hasChild > span,
.header__navList > li > a{
padding: 20px;

}

.header__hasChild > span,
.header__navList a{
font-size: 1.5rem;
display: block;
white-space: nowrap;
}

.header__hasChild > span:hover,
.header__navList a:hover{
color:#AA0000;
}

.header__hasChild > span{
display: flex;
align-items: center;
}
.header__hasChild .arrow{
margin-left: 10px;
width: 11px;
height: 10px;
position: relative;
}
.header__hasChild .arrow::before,
.header__hasChild .arrow::after{
content: "";
display: inline-block;
width: 5.5px;
height: 2px;
background-color: #AA0000;
border-radius: 3px;
position: absolute;
transform-origin: center;
top: 50%;

}

.header__hasChild .arrow::before{
transform: rotate(45deg) translateY(-50%);
left: 0.5px;
}
.header__hasChild .arrow::after{
transform: rotate(-45deg) translateY(-50%);
right: 0;
}


.header__hasChild div{
position: absolute;
left: 0;
top: 100%;
width: 540px;
padding: 10px;
background-color: #ffffff;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);

display: none;
}

.header__hasChild:hover div{
display: block;
}


.header__hasChild ul{
display: flex;
flex-wrap: wrap;
position: relative;
}

.header__hasChild ul::after{
content: "";
display: block;
height: 80%;
width: 1px;
border-left: 0.5px solid #878787;
left: 50%;
top: 50%;
transform: translateY(-50%);
position: absolute;

}

.header__hasChild ul li{
width: 50% ;
}

.header__hasChild ul li a{
padding: 10px 20px;
font-size: 1.5rem;
}
.header__hasChild p{
padding:0 5px;
font-size: 1.5rem;
}


.header__btnWrap{
display: flex;
margin-left: auto;
gap: 15px;
}

.header__btnWrap a{
font-size: 1.3rem;
background-color: #AA0000;
color: #ffffff;
height: 38px;
width: 150px;
border-radius: 23px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
border: 1px solid #AA0000;
}
.header__btnWrap a:hover{
background-color: #fff;
color: #AA0000;

}

.sp_header__btn{
display: none;
}


@media screen and (max-width: 1023px) {
.sp_header__btn{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 25px;
height: 24px;
position: fixed;
top: calc(35px/2);
right: 4%;
cursor: pointer;

}
.sp_header__btn span{
display: block;
width: 100%;
height: 3px;
background-color: #222;
transition: 0.6s;
}
.nav_on .sp_header__btn{
justify-content: center;
}
.nav_on .sp_header__btn span:nth-of-type(1){
transform: rotate(45deg) translateY(2px);
}
.nav_on .sp_header__btn span:nth-of-type(2){
display: none;
}
.nav_on .sp_header__btn span:nth-of-type(3){
transform: rotate(-45deg) translateY(-2px);
}
.header{
height: 60px;
}
.header__navWrap{
position: fixed;
width: 100%;
height: calc(100svh - 60px);
left: 0;
top: 61px;
transform: translateY(calc(-100% - 60px));
transition: 0.2s;
display: block;
background-color: #fff;
z-index: -1;
overflow-y: scroll;
}
.nav_on .header__navWrap{
transform: translateY(0); 
}
.header__navList{
display: block;
padding: 0;
}
.header__navList > li + li::before {
content: none;
}
.header__navList{
display: block;
}
.header__hasChild > span,
.header__navList li a{
border-bottom: 1px solid #eee;
}
.header__hasChild > span{
justify-content: space-between;
}

.header__hasChild div{
position: relative;
width: 100%;
display: block;
box-shadow: none;
padding: 0;

}
.header__hasChild p{
display: none;
}
.header__hasChild ul{
display: none;

}
.header__hasChild.on ul{
display: block;

}
.header__hasChild ul li {
width: 100%;
}
.header__hasChild ul li a{
padding: 20px;
text-indent: 1em;
}
.header__hasChild ul::after{
content: none;
}

.header__btnWrap{
flex-direction: column;
margin-top: 30px;
}

.header__btnWrap a{
width: 90%;
height: 60px;
margin-left: auto;
margin-right: auto;
font-size: 1.6rem;
border-radius: 30px;
}

}

.sp_header__searchBtn{
display: none;
}

.sp_header__search{
display: none;
}
@media screen and (max-width: 1023px) {
.header{
padding: 0 4%;
}

.header h1 img{
width: 140px;
}

.sp_header__searchBtn{
display: flex;
align-items: center;
padding: 10px;
position: fixed;
height: 60px;
top: 0;
right: calc(3% + 40px);
cursor: pointer;
}


.sp_header__search{
display: none;
position: fixed;
top: 60px;
left: 0;
width: 100%;
padding: 10px;
background-color: #AA0000;
z-index: 2;
}

.search_on .sp_header__search{
display: block;
}

.sp_header__search .searchform{
border-radius: 50px;
overflow: hidden;
max-width: 500px;
margin: 0 auto;
}
.sp_header__search .searchform > div{
position: relative;
}
.sp_header__search .searchform input{
border-radius: 50px;
padding:10px 30px;
border: none;
width: 100%;
border: 1px solid #222;
}
.sp_header__search .searchform .searchsubmit {
position: absolute;
font-size: 20px;
cursor: pointer;
border: none;;
background-color: #222;
color: #fff;
height: 100%;
top: 0;
right: 0;
width: 70px;
}
.sp_header__search .searchsubmit img{
margin-left: -5px;
}

}

.footer{
background-color: #222222;
color: #fff;
padding: 30px 0 40px;
margin-top: 110px;
position: relative;
}
.footer a{
color: #fff;
}


.footer__content{
display: flex;

justify-content: space-between;
width: 90%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}

.footer__logo a{
display: block;
}

.footer__nav a{
padding: 0 20px;
position: relative;
}

.footer__nav a + a::before{
content: "";
display: block;
height: 15px;
width: 1px;
border-left: 1px solid;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.footer__btnWeap {
display: flex;
gap: 15px;
}
.footer__btnWeap a {
font-size: 1.3rem;
border:#ffffff solid 1px;
color: #ffffff;
height: 38px;
width: 150px;
border-radius: 23px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
}
.footer__btnWeap a:hover{
border:#ffffff solid 1px;
color: #222222;
background-color: #fff;
}
.footer__snsWeap{
display: flex;
gap: 15px;
justify-content: flex-end; 
margin-top: 20px;
}

.footer__copy{
font-size: 1.4rem;
margin-top: 30px ;
width: 90%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 1600px) {
.footer__nav a{
font-size: 1.4rem;
padding: 0 10px;
}   
}
@media screen and (max-width: 1023px) {
.footer__content{
display: block;
text-align: center;
}
.footer__nav > a{
display: block;
margin-top: 14px;
}
.footer__nav a + a::before {
content:none;
}
.footer__btnWeap{
display: none;
}
.footer__snsWeap{
justify-content: center;
}
.footer__copy{
text-align: center;
}
}

.main--page{
width: 90%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;  
}

.column{
display: flex;
justify-content: space-between;
width: 90%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}

.column .main{
width: calc(100% - 340px);
margin-top: 80px;
}
.column .side{
width: 300px;
margin-top: 80px;
}

@media screen and (max-width: 1023px) {
.column{
display: block;
margin-top: 0;

}

.column .main{
width: 100%;
margin-top: 0;
}
body:not(.home) .column .main{
padding-top:30px ;
}

.side{
width: 100%;
}
}

.side h2{
font-size: 2rem;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}

.side h2 span{
display: flex;
}


.side > div + div{
margin-top: 50px;
}

.sidePost__item{
display: flex;
gap: 10px;
align-items: flex-start;
}

.sidePost__item + .sidePost__item{
margin-top: 10px;
}

.sidePost__imgWrap{
width:120px;
border-radius: 6px;
overflow: hidden;
}

.sidePost__txt{
flex: 1;
line-height: 1.4;
vertical-align: baseline;
}

.sidepost__cat{
font-size: 1rem;
display: block;
}

.sidePost_ttl{
font-size: 1.2rem;
margin: 5px 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;   
overflow: hidden; 
font-weight: bold;
}
.sidePost_time{
font-size: 0.8rem;
margin-bottom: 5px;
display: block;
}

.side_tag > div{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag-cloud-link{
font-size: 1.2rem !important;
background-color: #EEEEEE;
padding: 3px 20px;
border-radius: 12px;
}

.side_search .searchform > div {
position: relative;
}

.side_search .searchform{
border-radius: 50px;
overflow: hidden;

}
.side_search .searchform input{
border-radius: 50px;
padding:10px 30px;
border: none;
width: 100%;
border: 1px solid #222;
}
.side_search .searchform .searchsubmit {
position: absolute;
font-size: 20px;
cursor: pointer;
border: none;;
background-color: #222;
color: #fff;
height: 100%;
top: 0;
right: 0;
width: 70px;
}
.side_search .searchform .searchsubmit img{
margin-left: -5px;
}
@media screen and (max-width: 1023px) {
.side_header,
.side_search{
display: none;
}
.sidePost__imgWrap{
width:40%;
}

.sidePost__txt{
display: flex;
flex-direction: column-reverse;


}
.sidepost__cat{
display: none;
}
}

/* 共通 */
.inner{
width: 90%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}

.img{
width: 100%; 
aspect-ratio: 1.91 / 1; 
object-fit: cover;
object-position: center;
border: 1px solid #eee;
}


.ttl{
font-weight: bold;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;   
overflow: hidden; 
line-height: 1.6;
margin: 0.5em 0;
}

.time{
font-size: 1.1rem;
}



.primary_ttl_wrap{
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 20px;
}

.primary_ttl_wrap a{
font-size: 1.4rem;
}

.primary_ttl{
font-size: 3rem;
display: flex;
align-items: center;
margin-bottom: 20px;
/* position: relative;
padding-left: 28px; */
}
.primary_ttl_wrap .primary_ttl{
margin-bottom: 0;
}
.primary_ttl::before{
content: "";
width: 18px;
height: 18px;
background-color: #AA0000;
display: block;
border-radius: 2px;
margin-right: 10px;

}
@media screen and (max-width: 1023px) {
.primary_ttl{
font-size: 2.4rem;
}
}
.more_link{
display: flex;
align-items: center;
font-size: 1.4rem;
}
.more_link::after{
content:"";
display: block;
width: 20px;
height: 7px;
background-image: url(../img/more_link_arrow.svg);
background-size: cover;
margin-left: 5px;
}


.breadcrumbsWrap{
width: 90%;
max-width: 1200px;
margin:30px auto 0;
white-space: nowrap;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.breadcrumbs{
display: flex;
flex-wrap: wrap;
align-items: center;
color: #ccc;
font-size: 12px;
}
.breadcrumbs a{
color: #333;
font-size: 12px;
}

.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);
}


/* 一覧ページ */
.post_list{
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.post_list__item{
width: calc((100% - 40px) / 3);
}

.post_list__item .img{
border-radius: 6px;
}


/* アーカイブ */
.post__cat{
display: inline-block;
font-size: 1.1rem;
border-radius: 4px;
padding:3px 8px;
border: 1px solid;
}

.post__tag{
display: flex;
gap: 0px 10px;
flex-wrap: wrap;
}
.post__tag a{
font-size: 1.1rem;
background-color: #EEEEEE;
padding: 3px 10px;
border-radius: 12px;
}

.post__footer{
display: flex;
align-items: center;
justify-content: space-between;
}


.post__txt{
margin-top: 10px;
}

.navigation{
margin-top: 30px;
text-align: center;
width: 100%;
}

.nav-links{
display: flex;
justify-content: center;
gap: 10px;
}

.page-numbers{
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border:1px solid ;
border-radius: 50%;
}
.page-numbers.prev,
.page-numbers.next{
position: relative;
}
.page-numbers.prev::after,
.page-numbers.next::after{
content: "";
display: block;
width: 8px;
height: 8px;
position: absolute;
top: 50%;
left: 50%;
border-left:1px solid;
border-top:1px solid;
}
.page-numbers.prev::after{
transform: translate(calc(-50% + 2px),-50%) rotate(-45deg);
}

.page-numbers.next::after{
transform: translate(calc(-50% - 2px),-50%) rotate(135deg);
}


@media screen and (max-width: 1023px) {
.post_list__item{
width: calc((100% - 20px)/2);
}
}

@media screen and (max-width: 576px) {
.post_list{
flex-direction: column;
}
.post_list__item{
width: 100%;
}
}


/* 固定ページ */
.page_header{
text-align: center; 
}
.page_ttl{
display: inline-block;
font-size: 3rem;
border-bottom: 3px solid;
padding-bottom: 10px;
margin-top: 20px;
margin-bottom: 80px;
}

.main--404{
text-align: center;
}
.main--404 .post_content p{
margin-bottom: 60px;
}