@charset "utf-8";
:root {
  --main-color: #d80930;

    --main-color2: color-mix(in srgb, var(--main-color) 90%, black 10%);
    --main-color3: color-mix(in srgb, var(--main-color) 10%, #fff 90%);

}
.cicon{
  filter: brightness(0) saturate(100%) invert(10%) sepia(74%) saturate(6426%) hue-rotate(335deg) brightness(95%) contrast(106%);
}
.introduction_dot{
  background-color: #fff;
  background-image:

 radial-gradient(var(--main-color3) 40%, transparent 10%), 
 radial-gradient(var(--main-color3) 40%, transparent 10%); 
 background-size: 16px 16px; 
 background-position: 0 0, 8px 8px;



    display: flex;
}

body {
  font-family: 'Inter', sans-serif;
  font-family: 'Noto Sans JP', sans-serif;
  padding-top: 6rem;
}

a{
  text-decoration: none;
}

.respo_header {
  display: none;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 6rem;
  background: var(--main-color);
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.hnav {
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.hnav .hnav_ul {
  list-style: none;
  margin: 0;
  display: flex;
}

.hnav_ul li {
  padding: 0 1rem;
}

.hnav_ul li+li {
  border-left: 2px solid #fff;
}

.hnav_ul li a {
  color: #fff;
  font-size: 1.2rem;
  position: relative;
}

.hnav_ul li a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #fff;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: transform 0.3s;   /*変形の時間*/
  }
  
.hnav_ul li a:hover::after {
  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
  }


.hnav_contact_button {
  display: flex;
  align-items: center;
  background-color: #fff;
  color: var(--main-color2);
  padding: 1.2rem;
  font-size: 1.1rem;
  letter-spacing: -0.1rem;
  margin: 1rem;
}

.hnav_contact_button img {
  width: 20px;
  margin-right: 5px;
}

  /* サブページタイトル */

  .page-title {
    margin: 0 2rem;
  }
  
  .page-title h1 {
    color: #000;
    font-size: 2.5em;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 6rem 0 5rem 0;
    letter-spacing: 0.2em;
    border-bottom:  #1B1B1B1a 3px solid;
  }

  .page-title_pink h1{
    border-bottom: var(--main-color) 1px solid;
  }

  .page-title h1 span {
    color: #4d4d4d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    margin-top: 1.2rem;
    font-weight: lighter;
  }

  .page-title_pink h1 span {
    color: var(--main-color2);
  }


  

  /* パンくず */
  .breadcrumb {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    z-index: 2;
    max-width: 73%;
    margin: 0 auto;
  }

  .breadcrumb .link_tab {
    position: relative;
  }

  .breadcrumb .link_tab::after {
    position: absolute;
    content: "";
    right: -0.6rem;
    top: 2px;
    width: 1px;
    height: 100%;
    background: var(--main-color);
    border-radius: 3px;
    transform: rotate(25deg);
  }

  .breadcrumb li {
    list-style: none;
    margin: 1rem 1.5rem 0 0;
    letter-spacing: 0.3em;
}

  .breadcrumb li a {
    text-decoration: none;
    transition: .5s;
    color: var(--main-color);
  }




/* 甲府南RC紹介,青少年奉仕-tabbutton */
.about_menu {
  padding-top: 0;
  padding-bottom: 5rem;
  display: flex;
  justify-content: center;
}

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

.about_menu ul li {
  width: 300px;
  list-style: none;
  margin: 0 5px;
}

.about_button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
  background: #dcf2fa;
  color: #00a2e0;
  font-weight: bold;
  transition: 0.3s;
}

.about_button:hover {
  background-color: #17458f;
  color: #fff;
}


.now_tab {
  background-color: #17458f;
  color: #fff;
  pointer-events: none;
}



  /* 以下フッター */

  footer {
    height: 70%;
    position: relative;
  }
  
  footer .finfo {
    background-image: url(../img/footer.png);
    background-size: cover;
    display: flex;
    height: 90%;
    position: relative;
    padding: 1rem 10rem;
  }
  
  .finfo nav {
    width: 50%;
    margin: 3rem 0 2rem ;
  }
  
  .finfo ul {
      display: flex;
      flex-wrap: wrap;
  }
  
  .finfo ul li {
    width: 50%;
    padding: 1rem 0;
  }
  
  .finfo li a {
    color: #FFF;
    font-weight: 500;
    font-size: 1.5rem;
  }

 .finfo li .finfo_contact_button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #000;
    padding: 1rem;
    width: 11rem;
    border-radius: 5px;
    font-size: 1rem;
    transition: 0.3s;
  }

  .finfo_contact_button img {
    width: 20px;
    margin-right: 5px;
  }
  

  .finfo li .finfo_contact_button:hover {
    filter: brightness(0.8);
  }


  .addoress_container {
    width: 50%;
    text-align: right;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-end;
  }
  
  .addoress_container img {
    width: 350px;
    margin-right: -1rem;
  }
  
  address {
    font-style: normal;
    line-height: 2em;
    font-size: 1.5rem;
  }
  
  .fbottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 3rem;
    margin: 0 1rem;
  }
  
  .fbottom p {
    display: flex;
    color: #333;
    letter-spacing: 0.2em;
  }
  
  .page_top_btn {
    color: #000;
    position: absolute;
    bottom: 5rem;
    right: 0rem;
    text-decoration: none;
    display: block;
    width: 100px;
    padding: 5px 15px;
    transform-origin: bottom right;
    z-index: 79;
    text-align: center;
  }
  
  .arrow1 {
    width: 30px;
    height: 1px;
    background: #000;
    position: absolute;
    top: 0%;
    right: 12px;
    transform: rotate(215deg);
    transform-origin: top left;
  }
  
  .arrow2 {
    width: 30px;
    height: 1px;
    background: #000;
    position: absolute;
    top: 0%;
    right: 60px;
    transform: rotate(321deg);
    transform-origin: top left;
  }


  @media screen and (max-width:1218px) {

    html {
      font-size: 82.5%;
    }
    
  }

  @media screen and (max-width:767px){


    body {
      padding-top: 0;
    }

    header {
      position: relative;
      height: 6rem;
    }

    .hnav {
      display: none;
    }

    .respo_header {
      display: block;
    }

    #g-nav{
      /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
      position:fixed;
      z-index: 999;
      /*ナビのスタート位置と形状*/
    top:-120%;
      left:0;
    width:100%;
      height: 100vh;/*ナビの高さ*/
    background:var(--main-color);
      /*動き*/
    transition: all 0.6s;
  }
  
  /*アクティブクラスがついたら位置を0に*/
  #g-nav.panelactive{
      top: 0;
  }
  
  /*ナビゲーションの縦スクロール*/
  #g-nav.panelactive #g-nav-list{
      /*ナビの数が増えた場合縦スクロール*/
      position: fixed;
      z-index: 999; 
      width: 100%;
      height: 100vh;/*表示する高さ*/
      overflow: auto;
      -webkit-overflow-scrolling: touch;
  }
  
  /*ナビゲーション*/
  #g-nav ul {
      /*ナビゲーション天地中央揃え*/
      position: absolute;
      z-index: 999;
      top:40%;
      left:50%;
      transform: translate(-50%,-50%);
      display: flex;
      flex-wrap: wrap;
      width: 70vw;
  }
  
  /*リストのレイアウト設定*/
  
  #g-nav li{
    list-style: none;
      text-align: center; 
      width: 50%;
      font-size: 1.2rem;
      padding: 1rem 0;
  }
  
  #g-nav li a{
    color: #fff;
    text-decoration: none;
    padding:10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
  }
  
  /*========= ボタンのためのCSS ===============*/
  .openbtn{
    position:fixed;
      z-index: 9999;/*ボタンを最前面に*/
    top:10px;
    right: 15px;
    cursor: pointer;
      width: 50px;
      height:50px;
  }
    
  /*×に変化*/	
  .openbtn span{
      display: inline-block;
      transition: all .4s;
      position: absolute;
      left: 14px;
      height: 3px;
      border-radius: 2px;
    background-color: #fff;
      width: 45%;
    }
  
  .openbtn span:nth-of-type(1) {
    top:15px;	
  }
  
  .openbtn span:nth-of-type(2) {
    top:23px;
  }
  
  .openbtn span:nth-of-type(3) {
    top:31px;
  }
  
  .openbtn.active span:nth-of-type(1) {
      top: 18px;
      left: 18px;
      transform: translateY(6px) rotate(-45deg);
      width: 30%;
  }
  
  .openbtn.active span:nth-of-type(2) {
    opacity: 0;
  }
  
  .openbtn.active span:nth-of-type(3){
      top: 30px;
      left: 18px;
      transform: translateY(-6px) rotate(45deg);
      width: 30%;
  }

  .hnav_contact_button02 {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: var(--main-color2);
    padding: 1.2rem;
    font-size: 1.1rem;
    letter-spacing: -0.1rem;
    margin: 1rem;
  }
  
  .hnav_contact_button02 img {
    width: 20px;
    margin-right: 5px;
  }

    /* パンくず */

    .breadcrumb {
      max-width: 100%;
    }


    /* 甲府南RC紹介,青少年奉仕-tabbutton */

    .about_menu ul {
      width: 100%;
    }
    .about_menu ul li {
      width: 33.33%;
    }

    .about_button {
      text-align: center;
    }



    footer .finfo {
      flex-direction: column-reverse;
      padding: 5rem 2rem;
    }

    .finfo nav {
      width: 100%;
    }

    .addoress_container {
      width: 100%;
      text-align: justify;
      align-items: center;
    }

    .fbottom {
      justify-content: center;
    }

  }

  @media screen and (max-width:500px){
    html {
      font-size: 62.5%;
    }

    .instagram_02 img {
      padding: 0px 5px;
      width: 25%;
  }


  }
  /* body * { outline: red 1px solid;}  */