@charset "utf-8";



    /*Font Awesomeの読み込み
    ---------------------------------------------------------------------------*/
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


    /*Google Fontsの読み込み
    ---------------------------------------------------------------------------*/
    @import url('https://fonts.googleapis.com/css2?family=Murecho:wght@100..900&display=swap');


    /*slick.cssの読み込み
    ---------------------------------------------------------------------------*/
    @import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");


    /*テンプレート専用cssファイルの読み込み
    ---------------------------------------------------------------------------*/
    @import url("slide.css");
    @import url("inview.css");


    /*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
    ---------------------------------------------------------------------------*/
    :root {
        --primary-color: #d19ab2;		/*テンプレートのメインまたはアクセントカラー*/
        --primary-inverse-color: #fff;	/*上のprimary-colorの対となる色*/
        /*--global-bg-color: #f9f9f9; ---*/
        --global-space: 7vw;			/*主に余白の一括管理用。画面幅100%＝100vwです。*/
    }


    /*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
    ---------------------------------------------------------------------------*/
    @keyframes animation1 {
        0% {right: -100vw;}
        100% {right: 0px;}
    }


    /*opa1のキーフレーム設定（汎用的）
    ---------------------------------------------------------------------------*/
    @keyframes opa1 {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }


    /*fadeInのキーフレーム設定（テキストのフェードインに使用）
    ---------------------------------------------------------------------------*/
    @keyframes fadeIn {
        0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
        100% {opacity: 1;transform: scale(1) rotate(0deg);}
    }


    /*slide1のキーフレーム設定（footer背景に使用）
    ---------------------------------------------------------------------------*/
    @keyframes slide1 {
        0% {background-position: center bottom;}
        50% {background-position: 50px bottom;}
        100% {background-position: center bottom;}
    }


    /*spin（回転するキーフレーム）
    ---------------------------------------------------------------------------*/
    @keyframes spin {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
    }


    /*全体の設定
    ---------------------------------------------------------------------------*/
    body * {box-sizing: border-box;}

    html,body {
        font-size: 13px;	/*基準となるフォントサイズ。*/
    }

        /*画面幅900px以上の追加指定*/
        @media screen and (min-width:900px) {

            html, body {
                font-size: 16px;	/*基準となるフォントサイズ。*/
            }

        }/*追加指定ここまで*/


    body {
        margin: 0;padding:0;
        font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "Yu Mincho", "游明朝体", "MS PMincho", "ＭＳ Ｐ明朝", serif; /* フォント種類（明朝） */
        font-optical-sizing: auto;
        -webkit-text-size-adjust: none;
        background: #fff;	/*背景色*/
        color: #8a9dc1;		/*文字色*/
        line-height: 2;		/*行間*/
        overflow-x: hidden;
        background-color: var(--global-bg-color);
    }

    /*トップページのヘッダー下の背景画像*/
    body.home {
        background: #fff url("../images/bg_header.png") no-repeat center top / 100%;
    }

    /*リセット他*/
    figure {margin: 0;}
    dd {margin: 0;}
    nav ul {list-style: none;}
    nav,ul,li,ol {margin: 0;padding: 0;}
    section li {margin-left: 1rem;}

    /*table全般の設定*/
    table {border-collapse:collapse;}

    /*画像全般の設定*/
    img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

    /*videoタグ*/
    video {max-width: 100%;}

    /*iframeタグ*/
    iframe {width: 100%;}

    /*他*/
    input {font-size: 1rem;}
    section + section {
        margin-top: var(--global-space);
    }


    /*リンクテキスト全般の設定
    ---------------------------------------------------------------------------*/
    a {
        color: inherit;
        transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
    }

    /*マウスオン時*/
    a:hover {
        text-decoration: none;	/*下線を消す*/
        opacity: 0.9;			/*色0%だけ出す*/
    }


    /*コンテナー（サイト全体を囲むブロック）
    コンテンツ内容が少なくてもフッターが画面下に配置される為の指示なので変更不要。
    ---------------------------------------------------------------------------*/
    #container {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }


    /*コンテンツ
    ---------------------------------------------------------------------------*/
    #contents {
        flex: 1;
        padding: 0 20px;	/* var(--global-space)上下、左右へのコンテンツ内の余白。左右の余白についてはcss冒頭のglobal-spaceを読み込みます。*/
    }


    /*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
    ---------------------------------------------------------------------------*/
    header nav ul ul,
    .small-screen #menubar ul ul {
        animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
    }


    /*メニューブロック初期設定
    ---------------------------------------------------------------------------*/
    /*メニューをデフォルトで非表示*/
    #menubar {display: none;}
    #menubar ul {list-style: none;margin: 0;padding: 0;}
    #menubar a {display: block;text-decoration: none;}

    /*上で非表示にしたメニューを表示させる為の設定*/
    .large-screen #menubar {display: block;}
    .small-screen #menubar.display-block {display: block;}

    /*3本バーをデフォルトで非表示*/
    #menubar_hdr.display-none {display: none;}

    /*ドロップダウンをデフォルトで非表示*/
    .ddmenu_parent ul {display: none;}

    /*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
    a.ddmenu::before {
        font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指示*/
        content: "\f078";		/*使いたいアイコン名（Font Awesome）をここで指定*/
        font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
        margin-right: 0.5em;	/*アイコンとテキストとの間に空けるスペース*/
    }


    /*開閉メニュー
    ---------------------------------------------------------------------------*/
    /*メニューブロック設定*/
    .small-screen #menubar.display-block {
        position: fixed;overflow: auto;z-index: 100;
        right: 0px;top: 0px;
        width: 100%;
        height: 100%;
        padding: 90px 10vw 50px;				/*ブロック内の余白。上、左右、下への順番。*/
        background: var(--primary-color);		/*背景色。css冒頭のprimary-colorを読み込みます。*/
        color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
        animation: animation1 0.2s both;		/*animation1を実行する。0.2sは0.2秒の事。*/
    }

    /*子メニューの設定*/
    .small-screen #menubar ul ul {
        margin: 2rem;	/*外側に空けるスペース。２文字分。*/
    }

    /*メニュー１個あたりの設定*/
    .small-screen #menubar nav ul li {
        border: 1px solid var(--primary-inverse-color);	/*枠線の幅、線種、varは色の事でcss冒頭のprimary-inverse-colorを読み込みます。*/
        margin: 1rem 0;			/*メニューの外側に空けるスペース。上下、左右への順番。*/
        border-radius: 5px;		/*角を丸くする指定*/
    }
    .small-screen #menubar a {
        color: inherit;
        padding: 1rem 2rem;	/*メニュー内の余白。上下、左右へ。*/
    }

    /*マウスオン時*/
    .small-screen #menubar a:hover {
        color: var(--primary-color);				/*文字色。css冒頭のprimary-colorを読み込みます。*/
        background: var(--primary-inverse-color);	/*背景色。css冒頭のprimary-inverse-colorを読み込みます。*/
    }


    /*３本バー（ハンバーガー）アイコン設定
    ---------------------------------------------------------------------------*/
    /*３本バーを囲むブロック*/
    #menubar_hdr {
        animation: opa1 0.3s 0.5s both;
        position: fixed;z-index: 101;
        cursor: pointer;
        top: 5px;		/*上からの配置場所*/
        right: 10px;	/*右からの配置場所*/
        width: 50px;	/*幅*/
        height: 50px;	/*高さ*/
        padding: 15px;	/*ブロック内の余白*/
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.5s;
        background: var(--primary-color);	/*背景色。css冒頭のprimary-colorを読み込みます。*/
        border-radius: 50%;	/*円形にする。四角形がいいならこの１行を削除。*/
    }

        /*画面幅900px以上の追加指定*/
        @media screen and (min-width:900px) {

        /*３本バーを囲むブロック*/
        #menubar_hdr {
            top: 34px;		/*上からの配置場所*/
        }

        }/*追加設定ここまで*/


    /*マウスオン時に120%にする*/
    #menubar_hdr:hover {
        transform: scale(1.2);
    }

    /*×アイコンになった場合にサイズを大きくする*/
    #menubar_hdr.ham {
        width: 80px;	/*幅*/
        height: 80px;	/*高さ*/
    }

    /*ここは変更不要*/
    #menubar_hdr div {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /*バーの設定*/
    #menubar_hdr div span {
        display: block;
        width: 100%;
        height: 2px;	/*線の太さ*/
        background-color: var(--primary-inverse-color);	/*線の色。css冒頭のprimary-inverse-colorを読み込みます。*/
        border-radius: 2px;		/*コーナーを少しだけ丸く*/
        transition: all 0.5s ease-in-out;
        position: absolute;
    }

    /*以下変更不要*/
    #menubar_hdr div span:nth-child(1) {top: 0;}
    #menubar_hdr div span:nth-child(2) {top: 50%;transform: translateY(-50%);}
    #menubar_hdr div span:nth-child(3) {bottom: 0;}
    #menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
    #menubar_hdr.ham div span:nth-child(2) {opacity: 0;}
    #menubar_hdr.ham div span:nth-child(3) {top: 50%;transform: translateY(-50%) rotate(-45deg);}




    /****************************日記ページCSS ********************************/
  


    .diary-top-img {
        position: relative;  /* 画像の親要素にposition: relativeを追加 */
        width: 10%;
        aspect-ratio: 1 / 1; /* 幅と高さを同じにする */
        z-index: 50;
    }
    
    .diary-top-img img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 画像が枠内に収まるようにする */
        border-radius: 10px; /* 枠に丸みをつける */
    }
    
    .diary-top-img::after {
        content: "";  /* 擬似要素を作成 */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(253, 253, 253, 0.708); /* 半透明の白いオーバーレイ */
        z-index: 5;  /* 画像の上にオーバーレイを表示 */
    }


    
    
    .diary-top-date {
        position: absolute;  /* 日付と曜日を画像の上に配置 */
        top: 50%;             /* 画像の中央に配置 */
        left: 50%;
        transform: translate(-50%, -50%); /* 完全に中央に配置 */
        text-align: center;
        color: #5576b3;  /* 白色のテキスト */
        z-index: 10;  /* 画像とオーバーレイの上に表示 */
    }
    
    .diary-top-day {
        font-size: 18px;
        font-weight: bold;
    }
    
    .diary-top-week {
        font-size: 13px;
        font-weight: normal;
    }
    
    .diary-top-title {
        font-size: 14px;
    }
    
    .diary-top {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        padding:3% 0 0 0;
    }

    h1 {
        position: relative;
        padding: 5px;
        background: #a6d3c8;
        color: white;
        font-size: 13px;
      }
      
      h1::before {
        position: absolute;
        content: '';
        top: 100%;
        left: 0;
        border: none;
        border-bottom: solid 5px transparent;
        border-right: solid 20px rgb(149, 158, 155);
      }

      .diary-all{
        padding: 0 0 4% 0;
      }




      @media screen and (max-width: 768px) {
        /* ここにスマホ用のスタイルを書く */
        .diary-top-img {
            position: relative;  /* 画像の親要素にposition: relativeを追加 */
            width: 30%;
            aspect-ratio: 1 / 1; /* 幅と高さを同じにする */
            z-index: 50;
        }
        
        .diary-top-img img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 画像が枠内に収まるようにする */
            border-radius: 10px; /* 枠に丸みをつける */
        }
        
        .diary-top-img::after {
            content: "";  /* 擬似要素を作成 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(253, 253, 253, 0.708); /* 半透明の白いオーバーレイ */
            z-index: 5;  /* 画像の上にオーバーレイを表示 */
        }
        
        .diary-top-date {
            position: absolute;  /* 日付と曜日を画像の上に配置 */
            top: 50%;             /* 画像の中央に配置 */
            left: 50%;
            transform: translate(-50%, -50%); /* 完全に中央に配置 */
            text-align: center;
            color: #5576b3;  /* 白色のテキスト */
            z-index: 10;  /* 画像とオーバーレイの上に表示 */
        }
        
        .diary-top-day {
            font-size: 18px;
            font-weight: bold;
        }
        
        .diary-top-week {
            font-size: 13px;
            font-weight: normal;
        }
        
        .diary-top-title {
            font-size: 14px;
        }
        
        .diary-top {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            padding:3% 0 0 0;
        }
    
        h1 {
            position: relative;
            padding: 5px;
            background: #a6d3c8;
            color: white;
            font-size: 13px;
          }
          
          h1::before {
            position: absolute;
            content: '';
            top: 100%;
            left: 0;
            border: none;
            border-bottom: solid 15px transparent;
            border-right: solid 20px rgb(149, 158, 155);
          }
    
          .diary-all{
            padding: 0 0 15% 0;
          }
    }

    /* ローディング用の隠し要素 */
.loading-overlay {
	position: fixed; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.466);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	visibility: hidden; /* 初期状態は非表示 */
}

/* ローディングGIF */
.loading-overlay img {
	width: 100px; /* 適宜調整 */
}

/* グレーアウト時の body */
.loading-active {
	pointer-events: none; /* 操作禁止 */
}

#non_diary {
    margin-top: 100px;
}

#menubar .logo {
    margin: 0px;
    height: 100px;
}
.logo {
    margin: 0;
    margin-top: 25px;
    padding: 0;
    width: 140px;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

#menubar img {
    /* height: 112%; */
}