/* Theme Name:KB Theme 
Template:parenttheme
*/

:root {
  --kb_clr: #0053a6;
}

body{font-size: 16px;text-align: center;}
div,p,h1,h2,h3,h4,h5{margin-bottom:1em}
img{max-width:100%}
a{text-decoration: none;color: #2760aa;}

.hd{   position: sticky;top: 0;}
 body.home{}
 body.home::before{ content: ''; background-image: url("/common/imgs/kbimgs/scan6.jpg");background-repeat: no-repeat;background-position: center top;background-size: cover;height: 100vh;display: block;
  position: fixed;
  width: 100vw;
  z-index: -1;}

.home .hd{height: 70vh;}

.hd_inner{display: flex;align-items: center;background-color: rgba(255,255,255,0.8);justify-content: space-between;}
.hd_inner h1{max-width: 30%;flex-grow: 0;}
.hd_inner .hd_menu{}
.hd div,.hd h1{margin-bottom:0}




.cont {  background-color: #fff;margin: 0 10%;padding: 30px 30px 60px ;  text-align: left;line-height: 1.5;}
.ft{  background-color: #fff;margin: 0 10% 20px;padding: 30px; border-top: 1px solid var(--kb_clr);font-size: .8rem;}
.post_item h1 span{display:block;font-size: .9rem;  font-weight: normal;}











/* =======================================
ナビゲーション
======================================= */
#menu-btn-check {display: none;}
#navigation ul{list-style: none;}
#navigation ul li {display: inline-block;}
#navigation ul  a{margin-right: 1em;}

@media screen and (max-width: 428px) {
#navigation {width: 50%;height: 100%;position: fixed;top: 0;left: 100%; /*leftの値を変更してメニューを画面外へ */z-index: 80;background-color: var(--kb_clr);overflow: auto;
transition: all 0.5s; /*アニメーション設定*/}
#navigation ul a {color: #ffffff;margin-right:unset;}
#navigation ul {display: block;width: 90%;margin: 60px auto auto;}
#navigation ul li {padding: 1em 0;border-bottom: solid 1px #ffffff;display: block;}

/*MENUが☓に変化*/
.menu-btn {position: fixed;top: 5px;right: 5px;height: 50px;width: 50px;z-index: 90;}
.menu-btn span,.menu-btn span:before,.menu-btn span:after {content: '';display: block;height: 5px;width: 50px;border-radius: 3px;background-color: var(--kb_clr);position: absolute;top: 24px;}
.menu-btn span:before {bottom: 16px;top: unset;}
.menu-btn span:after {top: 16px;}

/* ---　ボタンをクリックした時の動作 --- */
#menu-btn-check:checked ~ #navigation {left: 50%; /*メニューを画面内へ*/}
#menu-btn-check:checked ~ .menu-btn span {background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/}
#menu-btn-check:checked ~ .menu-btn span::before {bottom: 0;transform: rotate(45deg);background-color: #fff;}
#menu-btn-check:checked ~ .menu-btn span::after {top: 0;  transform: rotate(-45deg);background-color: #fff;}
}