@charset "utf-8";
@font-face {
    font-family: 'AnzuMoji';
    src: url('../fonts/anzumoji.ttf') format('truetype');
}

body {
  font-family: 'AnzuMoji', sans-serif;
}

.maintopic{
  display: block;
}
/*==================================================
ハンバーガーメニュー
===================================*/
.header {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background-color:   transparent;
  z-index: 999;
}
.logo {
  padding-left: 25px;
  color: black;
  font-size: 45px;
}
.logo img{
  height: 100px;
  position: absolute;
  left: 5px;
  top:-8px;
}
.logo a{
  padding-left: 100px;  
}
.hamburger-menu {
  width: 50px;
  height: 50px;
  position: relative;
  border: none;
  background: transparent;
  appearance: none;
  padding: 0;
  cursor: pointer;
}
.hamburger-menu__bar {
  display: inline-block;
  width: 44%;
  height: 2px;
  background: black;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: .5s;
}
.hamburger-menu__bar:first-child {
  top: 16px;
}
.hamburger-menu__bar:nth-child(2) {
  top: 24px;
}
.hamburger-menu__bar:last-child {
  top: 32px;
}
.hamburger-menu--open .hamburger-menu__bar {
  top: 50%;
}
.hamburger-menu--open .hamburger-menu__bar:first-child {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.hamburger-menu--open .hamburger-menu__bar:last-child {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
  display: none;
}
.navigation {
  display: none;
  background: #242424;
  position: absolute;
  top: 100px;
  width: 100%;
  z-index: 9999;
}
.navigation__list {
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.navigation__list-item {
  border-bottom: solid 1px #474747;
}
.navigation__list-item:first-child {
  border-top: solid 1px #474747;
}
.navigation__link {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  display: block;
  padding: 24px 0;
  transition: .5s;
}
@media (hover: hover) and (pointer: fine) {
  .navigation__link:hover {
    background: #333;
  }
}
/*==================================================
ハンバーガーメニューここまで
===================================*/

.sp-only{
    display: none;
}


h2{
    font-size: 3vw;
    font-family: serif;
    color:dimgray;
    margin-bottom: 0;
}
h3{
    font-size: 3vw;
    font-family: serif;
    color:dimgray;
    margin-top: 10vh;
}
p{
    font-size: 1.7vw;
}

.trimming-left{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 5%;
    display: block;

}
.trimming-left h2{
    padding-top: 5vw;
}
.trimming-right{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 5%;
}
.trimming-right img{
    width: 100%;
    border-radius: 50%;
}
.trimming-left img{
    width: 50%;
    position: absolute;
    left: 0%;
    opacity: 0.5;
    z-index: -1;

}


.dogrun-left{
    width: 50%;
}
.dogrun-right{
    width: 50%;
}
.dogrun-right img{
    width: 100%;
}
.dogrun-left img{
    width: 50%;
    position: absolute;
    left: 0%;
    opacity: 0.5;
    z-index: -1;
}

.information{
    width: 100%;
    display: flex;
    text-align: center;
    margin-top: 3vw;
}

.guide{
    width: 50%;
}
.guide img{
    width: 50%;
}

.guide p{
    font-size: 2vw;
}
.map{
    width: 50%;
}
iframe{
    width: 100%;
    height: 100%;
}

hr{
     border: none;
  border-top: 1px dotted #999;
  margin: 20px 0; 
}
/* スクロールでフェードインさせたい要素の初期状態 */
.fade-in-item {
    opacity: 0; /* 初期は透明 */
    transform: translateY(50px); /* 下から50px移動した位置に */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 0.8秒かけて透明度と位置をアニメーション */
}

/* 要素が画面内に入ったときに適用されるクラス */
.fade-in-item.is-revealed {
    opacity: 1; /* 不透明にする */
    transform: translateY(0); /* 元の位置に戻す */
}
.fee{
    display: block;
    text-align: center;
}
.fee img{
    width: 80%;
    margin: 0 10% 0 10%;
}


/*==================================================
 フッターの設定
===================================*/
/* --- フッターのスタイル --- */
.site-footer {
    background-color: #FFFFFF; /* 白い背景 */
    padding: 30px 20px; /* 上下の余白と左右のパディング */
    text-align: center; /* テキストを中央揃え */
    border-top: 1px solid #e0e0e0; /* 上部に薄い線を追加してセクションを区切る */

}
.site-footer p{
    font-family: serif;
}
.copyright {
    color: dimgray; /* 暗い灰色の文字色 */
    font-size: 14px; /* 文字サイズ */
    margin: 0; /* 段落のデフォルトマージンをリセット */
    line-height: 1.5;

}

/* レスポンシブ対応 (必要であれば) */
@media (max-width: 768px) {
    .site-footer {
        padding: 20px 15px; /* スマホではパディングを少し小さく */
    }

    .copyright {
        font-size: 12px; /* スマホでは文字を小さく */
    }
}
/*==================================================
 フッターの設定ここまで
===================================*/



/*----------------- -------------------------------*/
/*スマホOK設定--------------------------------------*/
@media(max-width: 1050px){

}
    
@media(max-width: 700px){


}


/* スマホ用のメディアクエリ */
@media (max-width: 768px) { /* 768px以下の画面幅で適用 (タブレットとスマホを想定) */
    .splash-image.pc-image {
        display: none; /* PC用画像をスマホで非表示 */
    }

    .splash-image.sp-image {
        display: block; /* スマホ用画像をスマホで表示 */
    }

    /* 画像切り替えJavaScriptは、アクティブクラスが適用されることでopacityを制御するため、
       display: block にした上で、非アクティブな状態ではopacity: 0 を維持します */
    
/*==================================================
ハンバーガーメニュー スマホ用
===================================*/
.header {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background-color:   transparent;
  z-index: 999;
}
.logo {
  padding-left: 25px;
  color: black;
  font-size: 35px;
}
.logo a{
  padding-left: 70px;
}
.logo img{
  height: 100px;
  position: absolute;
  left: 5px;
  top:-8px;
}
.sp-only {
  display: block;
    }
.hamburger-menu {
  width: 50px;
  height: 50px;
  position: relative;
  border: none;
  background: transparent;
  appearance: none;
  padding: 0;
  cursor: pointer;
}
    

 

 h2{
    margin-top: 50px;
    font-size: 7vw;
    }
p{
    font-size: 4vw;
}
.text-container img{
    margin-top: 110%;
    width: 30%;
}
    
    
.information{
    width: 100%;
    display: block;
}

.guide{
    width: 100%;
}
    .guide p{
        font-size: 4vw;
    }
.map{
    width: 80%;
    height: 40vh;
    margin-left: 10%;
    margin-right: 10%;
}
h3{
    font-size: 6vw;
    font-family: serif;
    color:dimgray;
    margin-top: 4vh;
    margin-bottom: 1vh;
}

}