/* ====================

Base CSS

==================== */

html{
  font-size:62.5%;
}
body{
  background-color:#fff;
  color:#000;
  font-family:'Noto Sans JP', sans-serif;
  font-size:1.6rem;
  font-weight:400;
  letter-spacing:.075em;
}
a{
  text-decoration:none;
}
.flex{
  display:flex;
}
.container{
  flex-direction:column;
  min-height:100vh;
  overflow:hidden;
}
.inner-l{
  margin:0 auto;
  max-width:106rem;
  padding:0 3rem;
}
.inner-s{
  margin:0 auto;
  max-width:70rem;
  padding:0 3rem;
}
.inner-l .inner-s{
  padding:0;
}

@media (max-width:767px){
  body{
    font-size:1.4rem;
  }
  .inner-l,
  .inner-s{
    padding:0 2rem;
  }
}



/* Break Point For Media Query */
.pc-767{
  display:block;
}
.sp-767{
  display:none;
}
.pc-520{
  display:block;
}
.sp-520{
  display:none;
}
.inline-pc-767{
  display:inline-block;
}
.inline-sp-767{
  display:none;
}
@media screen and (max-width:767px){
  .pc-767{
    display:none;
  }
  .sp-767{
    display:block;
  }
  .inline-pc-767{
    display:none;
  }
  .inline-sp-767{
    display:inline-block;
  }
}
@media screen and (max-width:519px){
  .pc-520{
    display:none;
  }
  .sp-520{
    display:block;
  }
}





/* ====================

Header

==================== */

.header{
  background-color:#fff;
  border-bottom:solid .1rem #000;
  left:0;
  padding:1.8rem 0;
  position:fixed;
  top:0;
  width:100%;
  z-index:16;
}
.header-inner{
  justify-content:space-between;
  position:relative;
}
.site-title{
  font-size:2.4rem;
  line-height:1;
}
.site-title a{
  color:#000;
  display:block;
}
.site-title img{
  display:block;
  max-height:3.6rem;
  max-width:none;
}

.hm-check{
  display:none;
}
.hm-bars{
  cursor:pointer;
  height:1.8rem;
  position:absolute;
  right:3rem;
  top:50%;
  transform:translate(0, -50%);
  width:2.6rem;
  z-index:3;
}
.hm-bar{
  background-color:#000;
  content:'';
  display:block;
  height:.1rem;
  left:0;
  position:absolute;
  transition:.2s ease-in-out;
  width:100%;
  z-index:1;
}
.hm-bar-top{
  top:0;
}
.hm-bar-middle{
  top:50%;
  transform:translate(0, -50%);
}
.hm-bar-bottom{
  bottom:0;
}
#header-hm:checked ~.hm-bars .hm-bar-top{
  background-color:#fff;
  transform:rotate(45deg) translate(.55rem, .6rem);
}
#header-hm:checked ~.hm-bars .hm-bar-middle{
  opacity:0;
}
#header-hm:checked ~.hm-bars .hm-bar-bottom{
  background-color:#fff;
  transform:rotate(135deg) translate(-.55rem, .65rem);
}
.hm-layer{
  display:none;
}

.header-nav-contents{
  height:100%;
}
.menu-headline{
  display:none;
}
.global-nav{
  align-items:center;
  height:100%;
}
.first-nav{
  font-size:1.2rem;
  font-weight:400;
  line-height:1;
  margin:0 5rem 0 0;
  text-align:center;
}
.first-nav-ul li:not(:first-child){
  margin:0 0 0 .2rem;
}
.first-nav-ul a{
  border-radius:.2rem;
  color:#000;
  display:block;
  padding:.6rem 1.2rem;
  transition: .2s ease-in-out;
}
.first-nav-ul a:hover{
  background-color:#bdbdbd;
}
.second-nav{
  background-color:rgba(54, 54, 59, .6);
  height:100vh;
  left:0;
  opacity:0;
  position:fixed;
  top:0;
  transition:.6s ease-in-out;
  visibility:hidden;
  width:100%;
  z-index:2;
}
#header-hm:checked ~.header-nav-contents .second-nav{
  opacity:1;
  visibility:visible;
}

@media (max-width:767px){
  .header{
    padding:1.5rem 0;
  }
  .site-title{
    font-size:2rem;
    line-height:1;
  }
  .site-title img{
    max-height:3rem;
  }
  .hm-bars{
    right:2rem;
  }

  .hm-layer{
    background-color:rgba(54, 54, 59, .6);
    display:block;
    height:100vh;
    left:0;
    opacity:0;
    position:fixed;
    top:0;
    transition:.4s ease-in-out .03s;
    visibility:hidden;
    width:100%;
    z-index:2;
  }
  #header-hm:checked ~ .hm-layer{
    opacity:1;
    visibility:visible;
  }
  .header-nav-contents{
    background-color:#fff;
    height:100vh;
    left:100%;
    position:fixed;
    top:0;
    transition:.4s ease-in-out;
    width:82%;
    z-index:2;
  }
  #header-hm:checked ~ .header-nav-contents{
    left:18%;
  }
  .menu-headline{
    background-color:#bdbdbd;
    color:#fff;
    display:block;
    font-size:2.4rem;
    font-weight:800;
    line-height:1;
    padding:2rem 2rem 4.2rem;
  }
  .global-nav{
    display:block;
    height:calc(100% - 8.6rem);
    overflow:auto;
  }
  .first-nav{
    font-size:1.4rem;
    margin:2rem 0 0;
    padding:0 2rem;
    text-align:left;
  }
  .first-nav-ul{
    display:block;
  }
  .first-nav-ul li:not(:first-child){
    margin:.6rem 0 0;
  }
  .first-nav-ul a{
    display:inline-block;
    padding:1rem 0;
  }
  .first-nav-ul a:hover{
    background-color:transparent;
  }
  .second-nav{
    background-color:#fff;
    height:80rem;
    position:static;
  }
}










/* ====================

Footer

==================== */

.footer{
  background-color:#000;
  color:#fff;
  margin:auto 0 0;
  padding:4.8rem 0 0;
}
.footer-inner{
  padding:0 0 1.6rem;
  position:relative;
}
.footer-pagetop-arrow-wrap{
  line-height:1;
}
.footer-pagetop-arrow{
  background-color:rgba(54, 54, 59, .6);
  border-radius:2.4rem;
  bottom:3rem;
  color:#fff;
  display:block;
  height:4.8rem;
  padding:1.6rem 0;
  position:fixed;
  right:3rem;
  text-align:center;
  width:4.8rem;
  z-index:8;
}
.copyright{
  border-top:solid #fff .1rem;
  font-size:1.2rem;
  line-height:1;
  padding:1.6rem 0;
  text-align:center;
}
.copyright small{
  font-size:inherit;
  line-height:inherit;
}
@media (max-width:767px){
  .footer{
    margin:3rem 0 0;
    padding:2rem 0;
  }
  .footer-inner{
    padding:0 0 1.6rem;
    position:relative;
  }
  .footer-pagetop-arrow-static{
    position:absolute;
    right:50%;
    top:-4.8rem;
    transform:translate(50%, 0);
    width:6rem;
  }
  .footer-pagetop-arrow-sticky{
    bottom:7rem;
    right:2rem;
  }
  .copyright{
    border-top:solid #fff .1rem;
    font-size:1.2rem;
    line-height:1;
    padding:1.6rem 0 0;
    text-align:center;
  }
}










/* ====================

Contents

==================== */

.contents{
  background-color:#fff;
  margin:7.2rem 0 0;
  min-height:60rem;
  padding:3.6rem 0 7.2rem;
}
.main{
  padding:0;
  width:100%;
}
@media (max-width:767px){
  .contents{
    margin:6rem 0 0;
    min-height:72rem;
    padding:2rem 0;
  }
}








/* ====================

Archive

==================== */

.archive-title{
  font-size:3.2rem;
  letter-spacing:.085em;
  margin:3.6rem auto 5.4rem;
  text-align:center;
}

.archive-article{
  border:solid .2rem #bdbdbd;
  border-radius:.8rem;
  overflow:hidden;
}
.archive-article:not(:last-child){
  margin:0 0 4.8rem;
}
.archive-article-header{
  background-color:#bdbdbd;
  color:#fff;
  flex-wrap:wrap;
  font-weight:700;
  justify-content:space-between;
  line-height:1.5;
  padding:2rem;
  position:relative;
}
.archive-article-title{
  flex:1 0 0;
  font-size:2rem;
}
.archive-article-title a{
  color:#fff;
}
.archive-article-goal{
  font-size:2rem;
  text-align:right;
  width:8rem;
}
.archive-article-info{
  border-top:solid .2rem #fff;
  justify-content:space-between;
  margin:1.6rem 0 0;
  width:100%;
}
.archive-article-list{
  margin:1.6rem 0 0;
}
.archive-article-list li:last-child{
  margin:0 0 0 auto;
}
.archive-article-list a{
  background-color:#fff;
  border-radius:.4rem;
  color:#000;
  display:block;
  font-size:1.2rem;
  line-height:1;
  margin:0 .8rem 0 0;
  padding:.6rem 1rem .7rem;
}
.archive-article-list li:last-child a{
  background-color:#fefe22;
  margin:0;
}

.archive-article-toggle{
  cursor:pointer;
  font-size:1.4rem;
  padding:1rem;
  text-align:center;
}

.archive-article-content{
  display:none;
  font-size:1.4rem;
  margin:.2rem 0 0;
  padding:2rem;
  position:relative;
}








/* ====================

Single

==================== */

.post-article .post-title{
  font-size:3.2rem;
  letter-spacing:.085em;
  margin:3.6rem auto 5.4rem;
  text-align:center;
}

.post-article .post-content{
  box-shadow:0 .2rem .8rem rgba(0,0,0,.15);
  border-radius:.8rem;
  overflow:hidden;
}

.post-goal{
  background-color:#bdbdbd;
  color:#fff;
  font-size:2.4rem;
  line-height:1;
  margin:0;
  padding:3.2rem 1.6rem;
  text-align:right;
}

.post-list{
  padding:3.2rem 1.6rem;
}
.post-list a{
  background-color:#bdbdbd;
  border-radius:.4rem;
  color:#fff;
  display:block;
  font-size:1.2rem;
  line-height:1;
  margin:0 .8rem 0 0;
  padding:.6rem 1rem .7rem;
}

.post-table{
  font-size:1.4rem;
  line-height:1.5;
  width:100%;
}
.post-table th,
.post-table td{
  border-top:dotted .1rem #bdbdbd;
  padding:1.6rem;
}
.post-table tbody tr:last-child th,
.post-table tbody tr:last-child td{
  background-color:#bdbdbd;
  color:#fff;
  font-size:2rem;
  font-weight:700;
}
.post-table th{
  text-align:left;
  width:56%;
}
.post-table td{
  text-align:right;
}
.post-table td:nth-child(2){
  
  width:16%;
}
.post-table td:nth-child(3){
  width:12%;
}
.post-table td:nth-child(4){
  width:16%;
}




.page-template h1{
  font-size: 3.2rem;
  letter-spacing: .085em;
  margin: 3.6rem auto 5.4rem;
  text-align: center;
}

.page-month-list{
  flex-wrap:wrap;
  margin:0 -1.2rem;
}
.page-month-list li{
  margin:0 0 2.4rem;
  padding:0 1.2rem;
  width:calc(100% / 3);
}
.page-month-list a{
  border:solid .1rem #000;
  border-radius:.4rem;
  box-shadow:0 .1rem .8rem rgba(0,0,0,.15);
  color:#000;
  display:flex;
  font-size:1.8rem;
  font-weight:600;
  justify-content:center;
  /* max-inline-size:max-content; */
  /* margin-inline:auto; */
  padding:1.6rem;
  width:100%;
}
.page-month-list a:hover{
  background-color:#fefe22;
}































/* ====================

Home

==================== */

.home .contents{
  padding:0;
}
.home .main{
  padding:0;
  width:100%;
}

.home-firstview{
  background-color:#bdbdbd;
  background-position:center;
  min-height:48rem;
  padding:2rem;
}
.home-section{
  margin:12rem 0;
}
.home-section h2{
  margin:0 0 1.2em;
  text-align:center;
}

.home-section-outline p{
  margin:0 auto;
  max-width:48rem;
  width:90%;
}

.home-section-feature{
  background-color:#bdbdbd;
  padding:8rem 0;
}