@charset "UTF-8";


.video-container video {
  position: static;
  width: 384px;
  height: auto;
}


/*
.video-container {
  position: static;
  width: 384px;
  height: auto;
}

.video-container video {
    width: 100%;
    height: auto;
}
*/
/*
.video-container {
    width: 384px;
    margin: 0 auto;
    display: block;
}
*/

centered-image {
    display: block; /* 画像をブロックレベル要素に設定 */
    margin-left: auto; /* 左マージンを自動調整 */
    margin-right: auto; /* 右マージンを自動調整 */
    width: 384px; /* 画像の幅を640pxに設定 */
    height: auto;
}





header {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #0bd;
    width: 384px;
    height:  auto;
    margin: 0 auto;
    padding-bottom: 0; /* paddingを適切に設定 */
 }  


 h1 {
    width:  384px;
    height:  auto;
/*    padding: 10px 0; /* 上下余白で高さを調整 */
    font-size: 32px;
    background-color: #b65eab;
    text-align: center;
    margin: 0 auto;
}

h2 {
    background-color: #9cd384;
    width: 100%;
    max-width: 384px;
    height:  auto;
    font-size: 24px;
    color: navy;
    margin: 0 auto;
}

p {
    background-color: #e9ebe1;
    width: 100%;
    max-width: 384px;
    height:  auto;
    padding: 10px 0; /* 上下余白で高さを調整 */
    font-size: 16px;
    color: rgb(2, 2, 33); /*または変更 */
}




/*---------------------------------------------------------------------------------*/
/*----[ ナビゲーションメニュー ]-----------------------------------------------------*/
/*---------------------------------------------------------------------------------*/

/* ナビゲーションのコンテナ */
.main-nav {
    background-color: #333; /* 背景色 */
    padding: 10px 0; /* 上下のパディング */
}

/* リストのスタイルをリセット */
.main-nav ul {
    list-style: none; /* リストの黒点を削除 */
    margin: 0;
    padding: 0;
    text-align: center; /* 中央寄せ */
}

/* リストアイテムを横並びにする */
.main-nav ul li {
    display: inline-block; /* インラインブロック要素にして横並びに */
    margin: 0 15px; /* 左右のマージンで間隔を調整 */
}

/* リンクのスタイル */
.main-nav ul li a {
    color: white; /* 文字色 */
    text-decoration: none; /* 下線を削除 */
    padding: 10px 15px; /* クリックできる範囲を広げる */
    display: block; /* パディングを適用するためにブロック要素に */
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}

/* ホバー時のスタイル */
.main-nav ul li a:hover {
    background-color: #555; /* ホバー時の背景色 */
    border-radius: 5px; /* 角を丸くする */
}

/* セクションの基本的なスタイル */
section {
    padding: 60px 20px;
    text-align: center;
    min-height: 400px;
    border-bottom: 1px solid #eee;
}

section:nth-of-type(even) {
    background-color: #f9f9f9;
}

/*---------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/

.diary-video {
    display: block;
    margin: 0 auto; /* auto は margin-left と margin-right に適用され、横方向中央揃えになります */
    width: 384px;
    height: auto;
}

/*---------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/


body {
  text-align: center;
}


/*---------------------------------------------------------------------------------*/
/*----- [ アコーディオン ] ---------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/

.accordion-container {
    width: 384px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* 角丸を適用するため */
    margin-left: auto;   /* 左マージンを自動調整 */
    margin-right: auto;  /* 右マージンを自動調整 */
    /* またはショートハンドで margin: 0 auto; でも可 (上下マージンは0、左右はauto) */
}

.accordion-item {
    border-bottom: 1px solid #eee;
}

/* 最後のアイテムのボーダーを削除 */
.accordion-item:last-of-type {
    border-bottom: none;
}

.accordion-title {
    display: block; /* 全体をクリック可能にするため */
    padding: 15px 20px;
    background-color: #e7e9f3;
    color: #333;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    user-select: none; /* テキスト選択を無効に */
    font-size: 24px;
}

/* デフォルトのマーカー（三角のアイコン）を非表示にする */
.accordion-title::-webkit-details-marker {
    display: none;
}
.accordion-title::marker { /* Firefox対応 */
    display: none;
}

/* 開閉を示すアイコンを追加 */
.accordion-title::after {
    content: '+'; /* 閉じているときはプラス */
    position: absolute;
    right: 20px;
    font-size: 1.2em;
    transition: transform 0.2s ease;
}

/* detailsが開いたときのアイコン */
.accordion-item[open] > .accordion-title::after {
    content: '-'; /* 開いているときはマイナス */
    transform: rotate(0deg); /* 必要なら回転 */
}

.accordion-content {
    padding: 15px 20px;
    background-color: #fff;
    color: #555;
    border-top: 1px solid #eee; /* コンテンツ上部に線を追加 */
    /* アニメーションのためにmax-heightやheightをtransitionさせることも可能ですが、少し複雑になります */
}

.accordion-content p {
    margin: 0;
    line-height: 1.6;
}

.accordion-container img {
  width: 384px;
  height: auto; /* 高さを自動調整して、画像の縦横比を維持します */
}


/*---------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/