@charset "UTF-8";

/*---------------------------------------------------------------------------------*/
/*----[  ]-------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/

body {
  text-align: center;
}

/*--  --*/
.video-container video {
  position: static;
  width: 100vw;
  height: auto;
}


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


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


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

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

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


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

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

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

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

/* リンクのスタイル */
.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 0; /* auto は margin-left と margin-right に適用され、横方向中央揃えになります */
    width: 100vw;
    height: auto;
}


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

.accordion-container {
    width: 100vw;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* 角丸を適用するため */
    margin-left: 0;   /* 左マージンを自動調整 */
    margin-right: 0;  /* 右マージンを自動調整 */
    /* またはショートハンドで 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: 100vw;
  height: auto; /* 高さを自動調整して、画像の縦横比を維持します */
}


/*---------------------------------------------------------------------------------*/
/*--- [ ページトップに戻るボタン ] --------------------------------------------------*/
/*---------------------------------------------------------------------------------*/

body {
    margin: 0;
    font-family: sans-serif;
}

/* ページトップに戻るボタンのスタイル */
.pagetop {
    position: fixed; /* ページに固定 */
    right: 20px;     /* 右から20px */
    bottom: 20px;    /* 下から20px */
    display: flex;   /* フレックスボックスで中央揃え */
    flex-direction: column; /* 縦並び */
    justify-content: center;
    align-items: center;
    width: 60px;     /* ボタンの幅 */
    height: 60px;    /* ボタンの高さ */
    background-color: #007bff; /* 背景色 */
    color: #fff;     /* 文字色 */
    text-decoration: none; /* 下線をなくす */
    font-size: 1.2em; /* 文字サイズ */
    font-weight: bold; /* 文字を太く */
    border-radius: 50%; /* 角丸で円形にする */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 影 */
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
    z-index: 1000; /* 他の要素より手前に表示 */
}

.pagetop:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}

.home-button {
    display: inline-block; /* ボタンとして機能させるため */
    padding: 10px 20px; /* 内側の余白 */
    margin-top: 30px; /* 上部との余白 */
    background-color: #007bff; /* 背景色（青） */
    color: white; /* 文字色 */
    text-decoration: none; /* 下線を消す */
    border-radius: 5px; /* 角を丸くする */
    font-weight: bold; /* 文字を太くする */
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影 */
}

.home-button:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* ホバー時の影を濃くする */
}

.centered-image {
  width: 100vw;
  height: auto;
}

/* ========================================================= */
/* ========================================================= */
/* ========================================================= */
/* メディアクエリ - スマートフォン以外の調整 */
/* 画面幅が412vw以下の場合に適用 */
/* ========================================================= */
/* ========================================================= */
/* ========================================================= */
@media screen and (min-width: 1644px) {
/* ========================================================= */
/* ========================================================= */
/* ========================================================= */

body {
  text-align: center;
}

/*--  --*/
.video-container video {
  position: static;
  width: 80vw;
  height: auto;
}


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


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


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

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

p {
    background-color: #ffffff;
    width: 80%;
    max-width: 80vw;
    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: 80vw;
    height: auto;
}


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

.accordion-container {
    width: 80vw;
    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: 80vw;
  height: auto; /* 高さを自動調整して、画像の縦横比を維持します */
}


/*---------------------------------------------------------------------------------*/
/*--- [ ページトップに戻るボタン ] --------------------------------------------------*/
/*---------------------------------------------------------------------------------*/

body {
    margin: 0;
    font-family: sans-serif;
}

/* ページトップに戻るボタンのスタイル */
.pagetop {
    position: fixed; /* ページに固定 */
    right: 20px;     /* 右から20px */
    bottom: 20px;    /* 下から20px */
    display: flex;   /* フレックスボックスで中央揃え */
    flex-direction: column; /* 縦並び */
    justify-content: center;
    align-items: center;
    width: 60px;     /* ボタンの幅 */
    height: 60px;    /* ボタンの高さ */
    background-color: #007bff; /* 背景色 */
    color: #fff;     /* 文字色 */
    text-decoration: none; /* 下線をなくす */
    font-size: 1.2em; /* 文字サイズ */
    font-weight: bold; /* 文字を太く */
    border-radius: 50%; /* 角丸で円形にする */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 影 */
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
    z-index: 1000; /* 他の要素より手前に表示 */
}

.pagetop:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
}

body {
    font-family: Arial, sans-serif;
    margin: 0px;
    background-color: #f4f4f4;
    color: #333;
}

.home-button {
    display: inline-block; /* ボタンとして機能させるため */
    padding: 10px 20px; /* 内側の余白 */
    margin-top: 30px; /* 上部との余白 */
    background-color: #007bff; /* 背景色（青） */
    color: white; /* 文字色 */
    text-decoration: none; /* 下線を消す */
    border-radius: 5px; /* 角を丸くする */
    font-weight: bold; /* 文字を太くする */
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影 */
}

.home-button:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* ホバー時の影を濃くする */
}

.centered-image {
  width: 80vw;
  height: auto;
}

}















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

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