@charset "UTF-8";

/* Googleフォント読み込み*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;800&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');


/* 全体の設定 */
* {
    box-sizing: border-box;
}
html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "ヒラギノ角ゴ ProN", "メイリオ", "Meiryo", sans-serif;
    color: #333;
    background-color: #d8e0df;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}



/* テキストスタイル */
p.style1, p.style2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "ヒラギノ角ゴ ProN", "メイリオ", "Meiryo", sans-serif;
    line-height: 2.0;
}
p.style1 { font-size: 14px; color: #333; }
p.style2 { font-size: 16px; color: #fff; line-height: 180%; }

/* 見出しとフォント */
h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    border-bottom: solid 3px black;
    margin-top: 40px;
}

h2 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    border-bottom: solid 3px black;
    margin-top: 60px;
    text-align: right;
}

blockquote {
    position: relative;
    padding: 30px 15px 8px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 13px;
    left: 15px;
    content: "\f10d";
    font-family: FontAwesome;
    color: #cfcfcf;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
    font-size: 0.9em;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.6em;
}


/* リンク */
a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color: #fff;
    text-decoration: underline;
}

/* コンテナ */
.container {
    display: flex;
    width: 100%;
    margin: 0;
    min-height: 100vh;
}

/* メインコンテンツ */
.main-content {
    flex: 1;
    padding: 7%;
    background-color: #d8e0df;
    margin-left: 300px;
    width: calc(100% - 300px);
    padding-bottom: 50px; /* フッターのスペース */
}

/* フッター */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center; /* フッターを中央寄せ */
    padding: 10px 0; /* フッターの余白 */
    width: 100%;
    position: relative; /* メインコンテンツ内に固定 */
    margin-top: 0;
}


/* サイドバー */
.sidebar {
    width: 300px;
    background-color: #d8e0df; /* 不透明 */
    /*transition: background-color 0.3s; /* スムーズな透明度の変化 */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}




/* ヘッダー */
header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 0 20px;
}
.sidebar .logo {
    background-image: url('https://cinemahole.but.jp/img/image.jpg'); /* 画像のURLを指定 */
    background-size: contain; /* 画像をコンテナのサイズに合わせて調整 */
    background-repeat: no-repeat; /* 画像が繰り返されないように */
    height: 50px; /* ロゴの高さ */
    width: 50px; /* ロゴの幅 */
    border-radius: 30% 70% 71% 29% / 45% 32% 68% 55%;
    text-align: center; /* 必要に応じてテキストを中央に配置 */
    line-height: 50px; /* 高さに合わせてテキストを中央に配置 */
}


header nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}
header nav ul li {
    margin: 0 15px;
}
header nav ul li a {
    color: #fff;
    text-decoration: none;
}
header nav ul li a:hover {
    text-decoration: underline;
}





/* ハンバーガーメニュー */
.menu-icon {
    display: none;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 11;
}
.menu ul {
    list-style: none;
    padding: 0;
}
.menu ul li {
    margin: 10px 0;
}

/* ヒーロー */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    color: #fff;
    background-image: url('img/image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}

/* tag */

#hello {
  padding: 0.5em 1em;
  margin: 2em 0;
  margin-right: :0.5em;
  font-weight: solid;
  font-size: 12px;
  color: #6091d3;/*文字色*/
  background: #FFF;
  border: solid 2px #6091d3;/*線*/
  border-radius: 10px;/*角の丸み*/

}

#date {
  padding: 0.5em 1em;
  margin: 2em 0;
  margin-top: 2em;
  font-size: 16px;
  color: #ffffff;/*文字色*/
  background: #000000;

}

/* レスポンシブ */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        padding: 20px 0;
        padding-left: 4%    /* 縦方向の余白のみ確保 */
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 4%;
        margin-top: 90px;
    }

    .menu-icon {
        display: block;
    }

    .menu {
        display: none;
    }

    .menu.active {
        display: block;
    }

    footer {
        text-align: center;
    }
}