@font-face {
    font-family: 'Note Sans JP';/*自分で好きな名前を付ける*/
    src: url('NotoSerifJP-Regular.ttf') format('truetype'), format('ttf'),url(NotoSerifJP-Regular.woff)format('woff');
    font-style:normal;
    font-display:swap;
    }
  
  /* 全体のスタイル */
  body {
      line-height: 1.6;
      margin: 0;
      padding: 0;
      text-align: center;
      font-family:'Note Sans JP', sans-serif;
      outline: none;
      -webkit-tap-highlight-color:rgba(0,0,0,0);
      cursor:pointer;
    
    }
    
    a {
      color: inherit; /* リンクの色を親要素の色と同じにする */
      text-decoration: none; /* 下線を削除する */
      
    }
  
  
  

  /* ヘッダーのスタイル */
  
  @media screen and (min-width: 1085px) {
  
    nav ul li a:hover {
        color: #073fd6; /* ホバー時の文字色を指定 */
    
        transition: color 0.3s ease; /* 背景色の変化を滑らかにする */
    }
    header img {
  margin-top:25px;
    }
    
  
    .outer-menu {
        display: none; /* 1000px以上ではハンバーガーメニューを非表示にする */
    }
  }
  
  /* ハンバーガーメニュー */
  @media screen and (max-width: 1085px) {
    .head {
        display: none; /* 1000px以下では通常のメニューバーを非表示にする */
    }
  }
  
  header {
    font-family: 'Note Sans JP','MS PMincho', Arial, sans-serif;
    background-color: #ffffff;
    color: #000000;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 2500px;
    margin: 0 auto;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  
  header img {
    height: 45px;
   
    margin-top:5px;
  }
  
  h1 {
    font-family: 'Note Sans JP','MS PMincho', Arial, sans-serif;
    margin: 0;
    line-height: 60px;
    position: absolute;
    left: 120px;
  }
  
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
  
  nav ul li {
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
  }
  
  nav ul li:first-child {
    padding-left: 10px;
  }
  
  nav ul li a {
    text-decoration: none;
    color: #000000;
    white-space: nowrap;
  
    display: inline-block; /* リンクをブロック要素に変更 */
    padding: 10px; /* パディングを追加 */
    transition: background-color 0.3s ease; /* 背景色の変化を滑らかにする */
  }
  
  
  
  
  nav ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    left: -30px; /* 左に10pxずらす */
    background-color: #ffffff;
    list-style: none;
    padding: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    animation: fadeInDown 0.3s ease forwards;
  }
  
  nav ul li:hover ul {
    display: block;
  }
  
  
  
  @keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
  }
  
  nav ul li ul li {
    padding: 5px 0;
  }
  
 
  
  
  /*ハンバーガーメニューのスタイル*/
  
  @import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300');
  .flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  }
  * {
  box-sizing: border-box;
 
  font-weight: 500;
  
  }
  a,
  a:visited,
  a:hover,
  a:active {
  color: inherit;
  text-decoration: none;
  
  }
  
  .outer-menu {
  position: fixed;
  top:20vh;
  left: 0;
  z-index: 1;
  }
  .outer-menu .checkbox-toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
  opacity: 0;
  }
  .outer-menu .checkbox-toggle:checked + .hamburger > div {
  transform: rotate(135deg);
  }
  .outer-menu .checkbox-toggle:checked + .hamburger > div:before,
  .outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
  }
  .outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  opacity: 0;
  }
  .outer-menu .checkbox-toggle:checked ~ .menu {
  pointer-events: auto;
  visibility: visible;
  }
  .outer-menu .checkbox-toggle:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: .75s;
  }
  .outer-menu .checkbox-toggle:checked ~ .menu > div > div {
  opacity: 1;
  transition: opacity .4s ease .4s;
  }
  .outer-menu .checkbox-toggle:hover + .hamburger {
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
  }
  .outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
  transform: rotate(225deg);
  }
  .outer-menu .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: .5em 1em;
  background: rgba(45, 27, 211, 0.75);
  border-radius: 0 .12em .12em 0;
  cursor: pointer;
  transition: box-shadow .4s ease;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .outer-menu .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: #FEFEFE;
  transition: all .4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .outer-menu .hamburger > div:before,
  .outer-menu .hamburger > div:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  transition: all .4s ease;
  }
  .outer-menu .hamburger > div:after {
  top: 10px;
  }
  .outer-menu .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  backface-visibility: hidden;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .outer-menu .menu > div {
  width: 200vw;
  height: 200vw;
  color: #FEFEFE;
  background: rgba(132, 212, 248, 0.97);
  border-radius: 50%;
  transition: all .4s ease;
  flex: none;
  transform: scale(0);
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .outer-menu .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity .4s ease;
  overflow-y: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .outer-menu .menu > div > div > ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  display: block;
  max-height: 100vh;
  }
  .outer-menu .menu > div > div > ul > li {
  padding: 0;
  margin: 1em;
  font-size: 24px;
  display: block;
  }
  .outer-menu .menu > div > div > ul > li > a {
  position: relative;
  display: inline;
  cursor: pointer;
  transition: color .4s ease;
  font-family: 'Note Sans JP','MS PMincho', Arial, sans-serif;
  }
  .outer-menu .menu > div > div > ul > li > a:hover {
  color: #e5e5e5;
  }
  .outer-menu .menu > div > div > ul > li > a:hover:after {
  width: 100%;
  }
  .outer-menu .menu > div > div > ul > li > a:after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: -0.15em;
  left: 0;
  width: 0;
  height: 2px;
  background: #e5e5e5;
  transition: width .4s ease;
  }

  @media screen and (max-width: 1085px) {
    /* 変換したCSSをここに追加 */
    header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    header img {
        margin-top: 14px;
    }

    h1 {
        position: static;
        line-height: normal;
        
    }
    
}
  @media screen and (max-width: 630px) {
    header img {
        height: 40px;
      
        margin-top:16px;
    }
  
}

@media screen and (max-width: 580px) {
    header img {
        height: 35px;
   
        margin-top:12px;
    }
    header h1{
        font-size:28px;
    }
}

    @media screen and (max-width: 500px) {
        header h1{
            font-size:24px;
        }
        header img {
            max-width:70px;
            height:auto;
            margin-top:12px;
        }
    }
        @media screen and (max-width: 460px) {
            header img {
                max-width:60px;
                height:auto;
                margin-top:12px;
            }
            header h1{
                
                font-size:22px;
            }
    }

    @media screen and (max-width: 420px) {
        header img {
            max-width:55px;
            height:auto;
            margin-top:11px;
        }
        header h1{
            font-size:19px;
        }
}
@media screen and (max-width: 370px) {
    header img {
        max-width:55px;
        height:auto;
        margin-top:8px;
    }
    header h1{
        font-size:16px;
    }
}
  
    
    
    
  
  .container {
      width: 60%;
      margin: 0 auto;
  }
  
  h2 {
      text-align: center;
      margin-top: 70px;
      font-weight: 600;
      font-family: 'Note Sans JP', Arial, sans-serif;
  }
  
  .contact, .donation {
      margin-top: 50px;
      border-top: 1px solid #ccc;
      padding-top: 20px;
  }
  
  .container p{
      text-align: left;
      line-height: 1.7;
      font-family: 'Note Sans JP', Arial, sans-serif;
      font-weight: 500;
  }
  
  .container h3{
      font-family: 'Note Sans JP', Arial, sans-serif;
      text-align: right;
      font-weight: 500;
     margin-bottom:150px;
     
  }
  

  @media screen and (max-width: 1000px) {
  .container {
    width: 85%;
    margin: 0 auto;
  }
  }
  @media screen and (max-width: 580px) {
   
    .container h3{
        font-size: 15px;
    }
}
  
@media screen and (max-width: 440px) {
   
    .container h3{
        font-size: 12px;
    }
}
  
  
  
  
  
  
  
  /* フッターのスタイル */
  footer {
      background-color: #e6fffc; /* フッターの背景色 */
      padding: 20px; /* 上下左右の余白 */
      text-align: center; /* テキストを中央に揃える */
      bottom: 0;
   
      width: 100%;
     
    }
    
    /* フッターリンクのスタイル */
    .footer-links {
      margin-bottom: 10px; /* リンク間の間隔 */
    }
    
    
    @media (max-width: 550px) {
      .footer-lonls a{
          font-size: 6px;
      }
    }
    
    .footer-links a {
      font-family: 'MS PMincho', Arial, sans-serif;
      margin: 0 10px; /* リンク間の余白 */
      color: #333; /* リンクの色 */
      text-decoration: none; /* リンクの下線を削除 */
    }
    
    
    
    
    /* コピーライトのスタイル */
    footer p {
      font-family: 'MS PMincho', Arial, sans-serif;
      margin: 0; /* 上下の余白を削除 */
      font-size: 14px; /* テキストのサイズ */
      color: #556768; /* テキストの色 */
    }