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

body {
  font-family: 'AnzuMoji', sans-serif;
  overflow: hidden; /* メインコンテンツが表示されるまでスクロールを禁止 */
}

.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;
}
.my-space{
    display: none;
}
/*==================================================
Loading背景画面設定
===================================*/

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* 初期は黒背景、ホワイトアウトのために色を調整する */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 他のコンテンツの上に表示 */
    transition: background-color 1s ease-out; /* ホワイトアウトのアニメーション */
}

#loading-image {
    width: 100px; /* 画像のサイズを調整 */
    height: 100px;
    animation: rotateAndFade 2s forwards, fadeOutImage 1s 2s forwards; /* 回転アニメーションとフェードアウト */
}

/* 画像の回転アニメーション */
@keyframes rotateAndFade {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: rotate(720deg); /* 2回転 (360deg * 2) */
        opacity: 1; /* 回転中は画像を不透明に保つ */
    }
}

/* 画像のフェードアウトアニメーション（ホワイトアウトと同時に消えるように） */
@keyframes fadeOutImage {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


#loading-screen.fade-out {
    background-color: #fff; /* ホワイトアウト */
    opacity: 0; /* 完全に透明にして隠す */
    pointer-events: none; /* クリックやホバーを無効にする */
}

#main-content {
    opacity: 0; /* 初期は非表示 */
    transition: opacity 1s ease-in; /* メインコンテンツのフェードイン */
    padding: 20px;
    box-sizing: border-box;
    min-height: 100vh; /* 少なくとも画面いっぱいに表示 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#main-content.show {
    opacity: 1; /* 表示 */
}
/*==================================================
 Loading背景画面設定ここまで
===================================*/


/*==================================================
 トップ画面設定
===================================*/
.hero-section {
    display: flex;
    width: 100%;
    position: relative;
    height: 100vh;
    align-items: center;
}

.text-container {
    position: absolute;
    left: 0;
    z-index: 10;
    padding-left: 5vw;
    width: 70%;
    box-sizing: border-box;
    font-family: serif;

    /* `text-container` 自体はスライドインしないので、transformとopacityは不要 */
    /* これらは子要素（main-text, sub-text）で個別に管理します */
    /* text-containerのflex-directionをcolumnにして、子要素を縦に並べる */
    display: flex; /* ★追加箇所★ */
    flex-direction: column; /* ★追加箇所★ */
}
.text-container img{

    width: 15%;
}
.main-text {
    font-size: 5vw;
    color: #333;
    margin: 0;
    white-space: nowrap;

    /* スライドインアニメーションの設定 */
    transform: translateY(100%); /* 初期は画面外（下）に配置 */
    opacity: 0; /* 初期は非表示 */
    transition: transform 1s ease-out, opacity 1s ease-out; /* アニメーション */
}

.main-text.slide-in {
    transform: translateY(0); /* 元の位置に戻す */
    opacity: 1; /* 不透明にする */
}


/* ★追加箇所ここから★ */
.sub-text {
    font-size: 3vw; /* 小さめの文字サイズ */
    color: #555; /* 文字色 */
    margin-top: 1vw; /* "Making happy time" との間の余白 */
    white-space: nowrap;
    /* スライドインアニメーションの設定 */
    transform: translateY(100%); /* 初期は画面外（下）に配置 */
    opacity: 0; /* 初期は非表示 */
    transition: transform 1s ease-out, opacity 1s ease-out; /* アニメーション */
}

.sub-text.slide-in {
    transform: translateY(0); /* 元の位置に戻す */
    opacity: 1; /* 不透明にする */
}
/* ★追加箇所ここまで★ */


.image-container {
    width: 66.66%;
    height: 100vh;
    margin-left: auto;
    position: relative;
    overflow: hidden;
}

.splash-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.splash-image.active {
    opacity: 1;
}
/* PC用画像はデフォルトで表示、スマホでは非表示 */
.splash-image.sp-image {
    display: none; /* スマホ用画像を初期は非表示 */
}

/*==================================================
 トップ画面設定ここまで
===================================*/

.action{
    display:none;
}

.textbox{
    margin: 0 5% 0 5%;
}
/*==================================================
 画像フェードイン設定
===================================*/
/* スクロールで下からフェードインさせたい要素の初期状態 */
.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); /* 元の位置に戻す */
}

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

/* 要素が画面内に入ったときに適用されるクラス */
.fade-in-item-left.is-revealed {
    opacity: 1; /* 不透明にする */
    transform: translateX(0); /* 元の位置に戻す */
}

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

/* 要素が画面内に入ったときに適用されるクラス */
.fade-in-item-right.is-revealed {
    opacity: 1; /* 不透明にする */
    transform: translateX(0); /* 元の位置に戻す */
}
/*==================================================
 画像フェードイン設定ここまで
===================================*/


h2{
    font-size: 3vw;
    font-family: serif;
    color:dimgray;
}
.content{
    display: flex;
}

.content p{
    font-size: 2vw;
}
.about-left{
    width: 50%;
}
.about-right{
    width: 50%;
}
.about-left img{
    width: 100%;
}
.about-right img{
    width: 50%;
    position: absolute;
    left: 40%;
    opacity: 0.5;
    z-index: -1;
}

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

.hotel-left{
    width: 50%;
}
.hotel-right{
    width: 50%;
}
.hotel-left img{
    width: 100%;
}
.hotel-right img{
    width: 50%;
    position: absolute;
    left: 40%;
    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%;
    font-family: serif;
}
.guide img{
    width: 50%;
}

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


/*==================================================
 ボタン設定
===================================*/
.more-button {
    display: inline-flex; /* Flexboxで中身（テキストと矢印）を横並びに */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え（コンテンツが短い場合） */

    padding: 10px 20px; /* 内側の余白（上下左右） */
    font-size: 3vw; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
    color: #333; /* 文字色 */
    text-decoration: none; /* リンクの下線を消す */
    background-color: transparent; /* 背景は透明 */

    border: none; /* デフォルトのボーダーを消す */
    border-left: 1px solid #333; /* 左側の細い線 */
    border-bottom: 1px solid #333; /* 下側の細い線 */

    position: relative; /* 矢印（::after）の基準位置にする */
    overflow: hidden; /* 矢印がはみ出さないように */

    /* ホバーアニメーションの準備 */
    transition: color 0.3s ease, border-color 0.3s ease;
    margin-bottom: 3vh;
}

/* 矢印のスタイル */
.more-button::after {
    content: ''; /* 疑似要素にはcontentが必要 */
    display: block;
    width: 8px; /* 矢印のサイズ */
    height: 8px; /* 矢印のサイズ */
    border-top: 1px solid #333; /* 矢印の線 */
    border-right: 1px solid #333; /* 矢印の線 */
    transform: rotate(45deg); /* 45度回転させて矢印にする */
    margin-left: 10px; /* テキストとの隙間 */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* ホバー時のスタイル */
.more-button:hover {
    color: #98FB98; /* ホバー時の文字色 */
    border-color: #98FB98; /* ホバー時の線色 */
    cursor: pointer; /* マウスカーソルをポインターに */
}

.more-button:hover::after {
    border-color: #98FB98; /* ホバー時の矢印の色 */
    transform: rotate(45deg) translateX(3px); /* ホバー時に少し右に動かす */
}

/* 必要であれば、アクティブ時のスタイルも追加 */
.more-button:active {
    opacity: 0.8;
}
/*==================================================
 ボタン設定ここまで
===================================*/

/*==================================================
 ブログ設定
===================================*/
/* ブログセクションのコンテナ */
.blog-section {
    max-width: 1000px; /* 最大幅 */
    margin: 80px auto; /* 上下の余白と中央揃え */
    padding: 0 20px; /* 左右のパディング */
}

.blog-section h2 {
    margin-bottom: 50px;
    font-size: 2.5em;
    color: dimgray;
}

/* 投稿リストのコンテナ（Flexboxで横並びにする場合） */
#latest-blog-posts {
    display: flex; /* 子要素を横並びに */
    flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
    gap: 30px; /* 投稿間の隙間 */
    justify-content: center; /* 中央寄せ */
}

/* 個々の投稿アイテム */
.blog-post-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    padding: 25px;
    flex: 1 1 calc(33.333% - 20px); /* 3列表示（隙間を考慮） */
    box-sizing: border-box;
    display: flex; /* 内部コンテンツもFlexboxで制御 */
    flex-direction: column; /* 内部コンテンツを縦並びに */
    justify-content: space-between; /* タイトル、抜粋、続きを読むリンクを上下に配置 */
    min-width: 280px; /* 最小幅を設定し、小さくなりすぎないように */
}

.blog-post-item h3 {
    margin-top: 0;
    font-size: 1.5em;
    line-height: 1.4;
    min-height: 3em; /* タイトルの高さが揃うように */
}

.blog-post-item h3 a {
    text-decoration: none;
    color: dimgray;
    transition: color 0.3s ease;
}

.blog-post-item h3 a:hover {
    color: dimgray;
}

.blog-post-item .excerpt {
    font-size: 0.95em;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
    /* 抜粋の行数を制限したい場合 */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 例: 3行に制限 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-post-item .read-more-link {
    display: inline-block;
    margin-top: auto; /* 他のコンテンツが上部にある状態で下部に固定 */
    color: dimgray;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.blog-post-item .read-more-link:hover {
    color: #98FB98;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    #latest-blog-posts {
        flex-direction: column; /* スマホでは縦並び */
        gap: 25px;
    }
    .blog-post-item {
        flex: 1 1 100%; /* スマホでは1列表示 */
    }
    .blog-section {
        margin: 50px auto;
        padding: 0 15px;
    }
    .blog-section h2 {
        font-size: 7vw;
        margin-bottom: 30px;
    }
.more-button {
    font-size: 7vw; /* 文字サイズ */
    margin-bottom: 0;
 }

}
.blog-post-item .post-thumbnail {
    margin-bottom: 15px;
    height: 180px; /* 画像の高さ固定（調整可能） */
    overflow: hidden; /* はみ出しを隠す */
    border-radius: 4px;
}

.blog-post-item .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像がコンテナに収まるようにトリミング */
    display: block; /* 余白を消す */
    transition: transform 0.3s ease; /* ホバー時のアニメーション */
}

.blog-post-item:hover .post-thumbnail img {
    transform: scale(1.05); /* ホバーで少し拡大 */
}

/*==================================================
 ブログ設定ここまで
===================================*/



/*==================================================
 料金表設定
===================================*/
#hiddenImage {
    /* 画像の基本的なスタイル */
    max-width: 80vw; /* 画像の最大幅を調整 */
    height: auto;
    display: block; /* imgは通常inline要素なので、ブロック要素に */
    margin-top: 5px;
    margin-left: auto;  /* 左マージンを自動調整 */
    margin-right: auto; /* 右マージンを自動調整 */

    /* 初期状態：完全に隠す */
    max-height: 0;   /* 高さを0にする */
    opacity: 0;      /* 透明にする */
    overflow: hidden; /* 高さが0の時に内容がはみ出さないように */

    /* アニメーションの設定 */
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out; /* 0.5秒かけてアニメーション */
}

/* 画像が表示された時のスタイル */
#hiddenImage.is-visible {
    max-height: 100vh; /* 画像の実際の高さより少し大きめに設定（アニメーションで広がる最大値） */
    opacity: 1;      /* 不透明にする */
}

/* クリック可能な文字のスタイル（任意） */
#toggleText {
    display: inline-flex; /* Flexboxで中身（テキストと矢印）を横並びに */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え（コンテンツが短い場合） */
    padding: 10px 20px; /* 内側の余白（上下左右） */
    font-size: 3vw; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
    color: #333; /* 文字色 */
    text-decoration: none; /* リンクの下線を消す */
    background-color: transparent; /* 背景は透明 */

    border: none; /* デフォルトのボーダーを消す */
    border-left: 1px solid #333; /* 左側の細い線 */
    border-bottom: 1px solid #333; /* 下側の細い線 */

    position: relative; /* 矢印（::after）の基準位置にする */
    overflow: hidden; /* 矢印がはみ出さないように */

    /* ホバーアニメーションの準備 */
    transition: color 0.3s ease, border-color 0.3s ease;

}
/*==================================================
 料金表設定ここまで
===================================*/


/*==================================================
 フッターの設定
===================================*/
/* --- フッターのスタイル --- */
.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;
}
.main-text {
  margin-top: 7vw;
  font-size: 7vw;

    }
    .sub-text{
  font-size: 5vw;
    }
.hero-section {
  padding-bottom: 10vw;
}    
    
    
.text-container {
   margin-bottom: 20%;
}
    
.content{
    display:grid;
}
    
.about-left{
    order: 2;
    width: 100%;
    }
.about-right{
    order: 1;
    width: 100%;
    }
.hotel-left{
    order: 2;
    width: 100%;
    }
.hotel-right{
    order: 1;
    width: 100%;
    }
.dogrun-left{
    width: 100%;
}
.dogrun-right{
    width: 100%;
} 
.trimming-left{
    width: 100%;
}
.trimming-right{
    width: 100%;
}
    h2{
    margin-top: 50px;
    font-size: 7vw;
    }
.content p{
    font-size: 5vw;
}
.text-container img{

    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%;
}

.content {
        margin-bottom: 12vw;
    }    
    
.navigation {
  top: 70px;
}
  .my-space {
    display: inline; /* スマホではスペースを表示する */
  }
.action{
    display:flex;
    justify-content: center;
    margin-top: 5vh;
    width: 100%;
}
    .action a img{
    width: 80px;
    margin:0 10px 0 10px;

    }
#toggleText {
    font-size: 7vw;

}
.textbox{
    margin: 0;
}   
}