@charset "utf-8";
/*----------------------
共通項目
------------------------*/
.column-inner { width: 96%; margin-left: 2%; margin-right: 2%; max-width: 1100px; display: block;}
.wrap-block{ width: 100%; display: block;}
.wrap-flexR{ width: 100%; display: flex; flex-direction: row; align-items: center;}
.wrap-flexC{ width: 100%; display: flex; flex-direction: column;}
.block { display: block !important;}
.inline-block { display:inline-block;}
.flexR { display:flex; flex-direction: row; justify-content: space-between;}
.flexC { display:flex; flex-direction: column;}
.between{ justify-content: space-between;}
.center{ justify-content: center; text-align: center;}
/**/
.bold{font-weight: 700; vertical-align: baseline;}
.color{ color: var(--color1) !important;}
.color333{ color: #333 !important;}
.font11{ font-size: 11px;}
.font12{ font-size: 12px;}
.font13{ font-size: 13px;}
.font14{ font-size: 14px;}
.font15{ font-size: 15px;}
.font16{ font-size: 16px;}
.font17{ font-size: 17px;}
.font18{ font-size: 18px;}
.font19{ font-size: 19px;}
.font20{ font-size: 20px;}
.font20{ font-size: 10px;}
.font21{ font-size: 21px;}
.font22{ font-size: 22px;}
.font23{ font-size: 23px;}
.font24{ font-size: 24px;}
.font25{ font-size: 25px;}
.font26{ font-size: 26px;}
.font27{ font-size: 27px;}
.font28{ font-size: 28px;}
.font29{ font-size: 29px;}
.font30{ font-size: 30px;}
.font32{ font-size: 32px;}
.font34{ font-size: 34px;}
.font36{ font-size: 36px;}
.font38{ font-size: 38px;}
.mb0, .is-style-mb0{ margin-bottom: 0;}
.mb5, .is-style-mb5{ margin-bottom: 5px;}
.mb10, .is-style-mb10{ margin-bottom: 10px;}
.mb15, .is-style-mb15{ margin-bottom: 15px;}
.mb20, .is-style-mb20{ margin-bottom: 20px;}
.mb25, .is-style-mb25{ margin-bottom: 25px;}
.mb30, .is-style-mb30{ margin-bottom: 30px;}
.mb35, .is-style-mb35{ margin-bottom: 35px;}
.mb40, .is-style-mb40{ margin-bottom: 40px;}
.mb45, .is-style-mb45{ margin-bottom: 45px;}
.mb50, .is-style-mb50{ margin-bottom: 50px;}
.mb55, .is-style-mb55{ margin-bottom: 55px;}
.mb60, .is-style-mb60{ margin-bottom: 60px;}
.mb65, .is-style-mb65{ margin-bottom: 65px;}
.mb70, .is-style-mb70{ margin-bottom: 70px;}
.mb75, .is-style-mb75{ margin-bottom: 75px;}
.mb80, .is-style-mb80{ margin-bottom: 80px;}
.mb85, .is-style-mb85{ margin-bottom: 85px;}
.mb90, .is-style-mb90{ margin-bottom: 90px;}
.mb95, .is-style-mb95{ margin-bottom: 95px;}
.mb100, .is-style-mb100{ margin-bottom: 100px;}
.mb110, .is-style-mb110{ margin-bottom: 110px;}
.mb120, .is-style-mb120{ margin-bottom: 120px;}
.padding5{ padding: 5px !important;}
.padding10{ padding: 10px !important;}
.padding15{ padding: 15px !important;}
.padding20{ padding: 20px !important;}
.padding25{ padding: 25px !important;}
.padding30{ padding: 30px !important;}
.pb0{ padding-bottom: 0px !important;}
.pb5{ padding-bottom: 5px !important;}
.pb10{ padding-bottom: 10px !important;}
.pb15{ padding-bottom: 15px !important;}
.pb20{ padding-bottom: 20px !important;}
.pt0{ padding-top: 0px !important;}
.pt5{ padding-top: 5px !important;}
.pt10{ padding-top: 10px !important;}
.pt15{ padding-top: 15px !important;}
.pt20{ padding-top: 20px !important;}
/*==============================================
 main
================================================*/
main {position: relative; background: #fff;}
main > * { z-index: 100;}
main::before, 
main::after{ width: 100%; height: 100px; position: absolute; left: 0; right: 0; content: ""; z-index: 0; pointer-events: none;}
main::before{ top: 0; background: linear-gradient(to bottom,  rgba(243,243,243,1) 10%,rgba(255,255,255,1) 100%);}
main::after{ bottom: 0; background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 90%);}




/*----------------------
 #mv　トップと一覧
------------------------*/
#mv .pageTitle{ width: 100%; max-width: 1100px; margin: 60px auto 80px; padding: 0 2%; display: flex; justify-content: center;}
#mv .pageTitle .ttlBox{ display: flex; flex-direction: column-reverse; padding:40px; position: relative; text-align: center; align-items: center;}
#mv .pageTitle .ttlBox::before, 
#mv .pageTitle .ttlBox::after { width: 30px; height: 100%; content:""; pointer-events: none; position: absolute; top: 0; z-index: -1; border: solid 6px #333;}
#mv .pageTitle .ttlBox::before{ left: 0; border-right: none; border-radius: 20px 0 0 20px;}
#mv .pageTitle .ttlBox::after{ right: 0; border-left: none; border-radius:  0 20px 20px 0;}
#mv .pageTitle .ttlBox h1{ display: flex; flex-direction: row; justify-content: center; align-items: baseline;}
#mv .pageTitle .ttlBox h1 b{ display: block; font-size: 28px; letter-spacing: 3px; font-weight: 600;}
#mv .pageTitle .ttlBox h1 span, 
#mv .pageTitle .ttlBox h1 span::before{ font-size:18px; letter-spacing: 1px; font-weight: 500;}
#mv .pageTitle .ttlBox h1 span::before{ content: "の";}
#mv .pageTitle .ttlBox h2{ display: block; margin-bottom: 4px; color: #444; font-size: 12px; letter-spacing: 1px; padding:0 15px 10px;}

@media screen and (max-width: 1100px) {
#mv .pageTitle{ justify-content: center;}
#mv .pageTitle .ttlBox{ align-items: center;}
#mv .pageTitle .ttlBox h2{ padding:0 0 10px;}
}
@media screen and (max-width: 600px) {
#mv .pageTitle .ttlBox{ width: 90%; margin: 0 5%; padding: 30px 15px 20px;}
#mv .pageTitle .ttlBox h1{ flex-direction: column; justify-content: center; align-items: center;}
#mv .pageTitle .ttlBox h1 b{font-size: 7.2vw; letter-spacing: 2px; line-height: 1.2em;}
#mv .pageTitle .ttlBox h1 span::before{ content: ""; display: none;}
#mv .pageTitle .ttlBox h1 span{ font-size: 16px; font-size: 400; padding: 5px 0;}
#mv .pageTitle .ttlBox h2{ }
}

/*--サイドメニューの検索----------------*/
.post-search2{ width: auto; display: inline-block; position: relative;}
.post-search2 input[type="text"]{ width: 100%; font-size:12px; text-align: left; line-height: 18px; padding: 4px 35px 6px; border: solid 1px #cccccc; background: url("img/search.png") 6px 50% no-repeat; border-radius: 4px; vertical-align: middle; font-weight: 300; transition: 0.2s; cursor: pointer;}
.post-search2:hover input[type="text"]{ border: solid 1px #555;}
.post-search2 input[type="text"]:focus{ border: solid 1px #555; outline: none;}
.post-search2 .submit{ display: block; opacity: 0; position: absolute; right: 0px; top: 0%; width: 40px; line-height: 26px; text-align: center; border-radius: 2px; background: #999; color: #fff; font-size: 12px; letter-spacing: 0; outline:none; border: solid 1px #666; cursor:pointer; transition: 0.4s;}
.post-search2 .submit:hover{  background: #111; }
.post-search2:hover .submit,
.post-search2 input[type="text"]:focus + .submit{ opacity: 1;}
@media screen and (max-width: 950px) {
.post-search2{ width: 250px;}
.post-search2 .submit, 
.post-search2 .submit:hover{ opacity: 1 !important; border: solid 1px #aaa; background: #f0f0f0; color: #555; line-height: 24px; margin-left: -1px; border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; padding-bottom: 3px; -webkit-appearance: none; text-align: center;}

}
/*----------------------
 記事ランキング
------------------------*/
.post-list5{ width: 320px; display:block;}
.post-list5 .tit{ padding: 10px 20px; font-size: 16px; border-bottom: solid 1px #000;}
.post-list5 ul, 
.post-list5 ul li { width: 100%; display:block; border-bottom: solid 1px #ddd;}
.post-list5 ul li:nth-child(n+6){ display: none;}
.post-list5 ul li a { display: flex; flex-direction: row; align-items: flex-start; padding: 15px; box-shadow:0 0 0 0 #fafafa inset;}
.post-list5 ul li a:hover{ box-shadow:500px 0 0 0 #f5f5f5 inset;}
.post-list5 ul li a > b{ width: 30px; font-size: 22px; margin-top: 4px;}
.post-list5 ul li a > span{ width: 60px !important; display: block; margin-right: 10px; margin-top: 4px;}
.post-list5 ul li a > span img{ width: 100%; height: auto;}
.post-list5 ul li a p{ font-size: 14px; width: auto; flex: 1; font-weight: 500;}
.post-list5 ul li a p span{ display: block; font-size: 12px; color: #777; margin-top: 5px;} 
.post-list5 ul li a:hover > p{ text-decoration: underline; color: var(--color1);}
.post-list5 ul li a:hover p span{ color: var(--color1);}
@media screen and (max-width: 1100px) {
.post-list5{ width: 45%; margin: 0 2%;}
}
@media screen and (max-width: 750px) {
.post-list5{ width: 96%; margin: 0 2% 40px;}
.post-list5 ul{ border-bottom: none;}
.post-list5 ul li a:hover{ box-shadow:none;}
.post-list5 ul li:last-child{ border-bottom: none;}
.post-list5 ul li a > span{ width: 20% !important;}
.post-list5 ul li a { align-items: center;}
}
@media screen and (max-width: 600px) {
.post-list5 ul li a > span{ width: 25% !important;}
.post-list5 ul li a { align-items: center;}
}

/*----------------------
 サイトへリンク
------------------------*/
.siteLinks{}
.siteLinks .siteLinks-tit{ display: block; text-align: center; margin: 10px 0; font-size: 14px;}
.siteLinks .flexR{}
.siteLinks .flexR p{ display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; border: solid 1px #000; border-radius: 8px; overflow: hidden;}
.siteLinks .flexR p a{ height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1.2em; font-weight: 300; padding: 20px 10px; min-width: 64px; border-left: solid 1px #000; background: #fff; text-align: center; color: #000;}
.siteLinks .flexR p a b{ font-weight: 600;}
.siteLinks .flexR p a:nth-child(1){ border-left: none;}
.siteLinks .flexR p a:hover{ color: #fff; background: var(--color1);}
.siteLinks .flexR p a:hover b{ color: #fff;}
@media screen and (max-width: 850px) {
.siteLinks .flexR p:nth-child(2) { margin: 0 10px;}
.siteLinks .flexR p{border-radius: 4px;}
.siteLinks .flexR p a{ padding: 20px 6px; font-size: 1.6vw;}
}
@media screen and (max-width: 750px) {
.siteLinks .flexR{ flex-wrap: wrap;}
.siteLinks .flexR p a{ font-size: 11px; font-weight: 600;}
.siteLinks .flexR p:nth-child(1) { width: 100%; margin: 0 0 20px; flex-wrap: wrap;}
.siteLinks .flexR p:nth-child(1) a{ width:25%; height: 50px; min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.siteLinks .flexR p:nth-child(1) a:nth-child(5){ border-left: none;}
.siteLinks .flexR p:nth-child(1) a:nth-child(1), 
.siteLinks .flexR p:nth-child(1) a:nth-child(2), 
.siteLinks .flexR p:nth-child(1) a:nth-child(3), 
.siteLinks .flexR p:nth-child(1) a:nth-child(4){ border-bottom: solid 1px #000;}
.siteLinks .flexR p:nth-child(2) { margin: 0;}
.siteLinks .flexR p:nth-child(2), 
.siteLinks .flexR p:nth-child(3){ width: 46%;}
.siteLinks .flexR p:nth-child(2) a, 
.siteLinks .flexR p:nth-child(3) a{ width: 100%; padding: 0; line-height: 40px;}
.siteLinks .flexR p:nth-child(2) br{ display: none;}
}