/*
Theme Name: Hyuga Kouzai
Theme URI: 
Author: HIMUKA
Author URI: 
Description: 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Hyuga Kouzai

This theme is licensed under the GPL.
Copyright 2022 Hyuga Kouzai.
*/
@charset "utf-8";


/* ------------------------------------------------ 
   ヘッダ部  
------------------------------------------------ */
header{
  position: relative;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  background:#d3d3d3;
  margin-bottom:1%;
  border-bottom:solid 5px #9d9d9d;
  }
header .wrap{
  display: grid;
  grid-template-columns: 1.5fr 2.5fr 6fr 4fr;
  gap: 0px;
  height:5rem;
  text-align: left;
}
header .wrap div:nth-child(3){
  text-align: center;
}
header .logo {
  position: relative;
  width:100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}
header .logo img{
  position: relative;
  width:40%;
  margin-top:0;
}
header h1 {
  position: relative;
  display: block;
	top: 20%;
  padding-left:0;
  margin:0;
  color: #333;
  font-size:2.5rem;
  line-height: 1.5rem;
  text-align: left;
  text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0-2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
}
header h1 span{
  position: relative;
  display: inline-block;
  margin:0;
  padding-left:0.5rem;
  /*padding-bottom:1rem;*/
  color: #333;
  line-height: 1rem;
  font-size:0.8rem;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
header h2 {
  position: relative;
  display: inline-block;
  margin:0;
  top: 50%;
	transform: translateY(-50%);
  color: #333;
  line-height: 1.5rem;
  font-size:1.5rem;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
#contener{
  width:90%;
  padding: 0px;
  margin:0 auto;
}
.user {
  display:block;
  width: 100%;
  margin:1.5rem auto 1rem;
  border-bottom: #333 2px dotted;
  text-align: center;
}
.user p{
  line-height: 1.5rem;
  font-size:1.5rem;
}
.m_content p{
  text-align: right;
  margin: 0.5rem 2rem 0 0;
}
.m_content p a{
  text-decoration: none;
  color:#333;
  font-size: 10px;
}
.m_content p a:nth-of-type(2){
  margin-left:1rem;
}
span[data-badge-top-right] {
    display: block;
    position: relative;
  }
span[data-badge-top-right]:before {
  position: absolute;
  display: inline-block;
  font-weight: bold;
  background-color: #f00;
  border-radius: 50%;
  color: white;
  font-size: 1rem;
  line-height: 1rem;
  min-width: 1rem;
  padding: 0.5rem;
  text-align: center;
}
span[data-badge-top-right]:before {
  top: -6.5rem;  /*-2rem;*/
  right: 3rem;  /*4.5rem;*/
  /*transform: translate(50%, -50%);*/
  content: attr(data-badge-top-right) "";
}
span[data-badge-bottom-right]:before {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
  content: attr(data-badge-bottom-right) "";
}
.btn {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 17rem);
  gap:2rem;
  width:100%;
  height: 100%;
  text-align: center;
}
.btn-box{
  width:100%;
  height: 100%;
  background-size: 80%;
  background-repeat:no-repeat;
  background-position: center;
  text-align: center;
}
.btn-boxcol2{
  grid-column-start: 4;
  grid-column-end: 6;
  text-align: center;
  width:100%;
  height: 100%;
  background-size: 90%;
  background-repeat:no-repeat;
  background-position: center;
  background-image:url(../images/menu06.jpg) ;
}
.btn-box a,
.btn-boxcol2 a{
  display: block;
    position: relative;
    width: 100%;
    height: 100%;
    color: #000000;
    text-align: center;
    text-decoration: none;
    padding: 5px 0;
    font-size: 1.5rem;
    font-weight: bold;
}
.btn-box a span,
.btn-boxcol2 a span{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    text-align: center;
    transform : translateY(-50%);
}
.btn-box:first-child{
    background-image:url(../images/menu01.jpg) ;
}
.btn-box:nth-of-type(2),
.btn-box:nth-of-type(3){
  background-image:url(../images/menu02.jpg) ;
}
.btn-box:nth-of-type(5){
  background-image:url(../images/menu03.jpg) ;
}
.btn-box:nth-of-type(6){
  background-image:url(../images/menu04.jpg) ;
}
.btn-box:nth-of-type(7){
  background-image:url(../images/menu05.jpg) ;
}
.btn-box:nth-of-type(8){
  background-image:url(../images/menu07.jpg) ;
}
.btn-box:nth-of-type(9){
  background-image:url(../images/menu08.jpg) ;
}
.btn_nav_i {
  background: #cccccc;
  border:solid 2px #9d9d9d;
  border-radius: 50px;
  color: #444;
  text-decoration: none;
  padding: 0.2rem 1rem;
  font-size: 1.2rem;
letter-spacing:1%;
}
.btn_nav_i:hover {
  background: #808080;
  color:#fff;
  font-Weight:bold;
  text-decoration: none;
}
.btn_nav_z {
  background: #cccccc;
  border:solid 2px #9d9d9d;
  border-radius: 50px;
  color: #444;
  text-decoration: none;
  padding: 0.2rem 1rem;
  font-size: 1.2rem;
letter-spacing:1%;
}
.btn_nav_z:hover {
  background: #808080;
  color:#fff;
  font-Weight:bold;
  text-decoration: none;
}
/* ------------------------------------------------ 
   デバイス横向き
 ------------------------------------------------ */
 @media only screen and (min-device-width: 767.98px) and (max-device-width: 1024px) and (orientation: portrait){
  span[data-badge-top-right]:before {
    top: -1.3rem;
    right: 3.5rem;
  }
}
/* ------------------------------------------------ 
   レスポンシブ（768px以下）
 ------------------------------------------------ */
  @media screen and (max-width: 767.98px) {
    header{
      height:5rem;
    }
    header h1 {
      padding-top:0.5rem;
      padding-left:0;
      font-size: 1.8rem;
      letter-spacing: -0.2rem;
      line-height:0.9em;
    }
    header h1 span{
      display: none;
    }
      header h2 {
      font-size:1rem;
      letter-spacing: 0;
    }
    header .logo img{
      /*display:none;*/
      margin-top:0.5%;
      height: 45%;
      margin:1rem auto;
      padding:0;
      }
     /* 登録情報ボタン */
     header .h_btn{
      position: relative;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: right;
      justify-content: flex-end; 
      padding-right: 1rem;
      font-size:1rem;
         }
    /* 登録情報ボタン */
    .btn_nav_i {
      letter-spacing:-0.5px;
      padding: 0.2rem 0.2rem;
      font-size: 0.8rem;
      }
    /* ログアウトボタン */
    .btn_nav_z {
      letter-spacing:-0.5px;
      padding: 0.1rem 0.1rem;
      font-size: 0.8rem;
      }
    #contener{
      width:95%;
    }    
    .user p{
      font-size:1.8rem;
    }
    .m_content p{
      margin: 3rem 2rem 3rem 0;
    }
    span[data-badge-top-right]:before {
      top: -10rem;
      right: 12rem;
    }
    .btn{
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(5, 30rem)32rem;
    }
    .btn-box{
      text-align: center;
      background-size: 60%;
    }
    .btn-boxcol2{
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 6;
      grid-row-end: 7;
      text-align: center;
      background-size: 80%;
    }
    .btn-box a,
    .btn-boxcol2 a{
        font-size: 1.8rem;
    }    
    .btn-box4{
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 3;
      grid-row-end: 4;
    }
    .btn-box5{
      grid-column-start: 2;
      grid-column-end: 3;
      grid-row-start: 3;
      grid-row-end: 4;
    }
    .btn-box6{
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 4;
      grid-row-end: 5;
    }
    .btn-box7{
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 5;
      grid-row-end: 6;
    }
    .btn-box8{
      grid-column-start: 2;
      grid-column-end: 3;
      grid-row-start: 5;
      grid-row-end: 6;
    }


  }
  /* ------------------------------------------------ 
   レスポンシブ（420px以下）
 ------------------------------------------------ */
 @media screen and (max-width: 419.98px) {
  span[data-badge-top-right]:before {
    top: -6.8rem;
    right: 6.5rem;
  }
  .btn{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 16rem)18rem;
  }
}
  /* ------------------------------------------------ 
   レスポンシブ（280px以下）
 ------------------------------------------------ */
 @media screen and (max-width: 300px) {
  header h1 {
    margin-top:10%;
    font-size: 0.8rem;
  }
  .wrap h1 span{
    display: none;
  }
  header h2 {
    font-size:0.8rem;
    line-height:1.5rem;
  }
  header img{
    margin-top:0.5%;
    height: 30%;
    margin:1rem auto;
    }
  header .h_btn{
    margin-left:0rem;
    padding-right: 0.5rem;
    font-size: 10px;

    }
  .btn_nav_i {
    letter-spacing:-2px;
    padding: 0.2rem 0.1rem;
}
  .btn_nav_z {
    letter-spacing:-3px;
    padding: 0.2rem 0.1rem;
}
  span[data-badge-top-right]:before {
    top: -1.2rem;
    right: 3rem;
  }
  .btn {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 17rem)18rem;
    gap:1rem;
    width:100%;
    height: 100%;
    text-align: center;
  }

}
  /* ------------------------------------------------ 
   Dual-screen(surface duo)
 ------------------------------------------------ */
 @media (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
  .user {
    padding-left:5rem;
    text-align: left;
  }
  .user p{
    line-height: 1.5rem;
    font-size:1.5rem;
  }
  span[data-badge-top-right]:before {
    top: -5rem;
    right: 3rem;
  }
.btn {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 17rem);
  }
  .btn-boxcol2{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .btn-box4{
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .btn-box5{
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .btn-box6{
    grid-column-start: 6;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .btn-box7{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .btn-box8{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
 }