@charset "utf-8";
<!--エンコードはUTF-8指定-->
/*
Theme Name: Yosuga V Creater
Theme URI: https://yosuga.live/
Author: Akitsuki Yosuga
Author URI: https://yosuga.live/
Description: Custom WordPress Theme for V Creater
Version: 1.0
*/

/* ---------- */
/* ↓ 要素テンプレ ↓ */
/* ↑ 要素テンプレ ↑ */
/* ---------- */


/* ---------- */
/* ↓ サイトデフォルト設定 ↓ */
* { 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,body {
  height: 100%;
}
body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(18px, 0.9375vw, 36px);
  line-height: 1.7;
  color: #3b2b26; /* 赤みのある濃いブラウン系 */
  margin: 0;
  -webkit-font-smoothing: antialiased;
  background-image: url("images/bg1.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/*見出しを全て太字で表示するように指定*/
h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
}

hr {
  width: 95%;
  color: #B2667C;
  display: block;
  border-style: inset;
  border-top: 5px solid #B2667C;
  border-bottom: 4px double #D39FAD;
  border-left: none;
  border-left: none;
  margin: 10px;
}

a:link { color: #75444C; }
a:visited { color: #4E6D83; }
a:hover { color: #AC5664; }

:root {

}

input[type="submit" i] {
  font-size: 16px;
  padding:6px 20px;
  border-radius:8px;
  border: none;
  cursor:pointer;
  background: #3b2b26;
  color: #DCDCDC;
  text-decoration: none;
}
/* ↑ サイトデフォルト設定　ココマデ ↑ */
/* ---------- */

/* ---------- */
/* ↓ ヘッダー(header.php/header-bar.php) ↓ */
header {
  background-color: #1f1f1f;
  display: flex;
  line-height: 1;
}

header ul {
  display: flex;
  padding: 0;
}

.header-bar {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1000;
}

.head-bar-content{
  background-color: #1f1f1f;
  display: flex;
  line-height: 1;
  width: 100%;
  text-align: center;
}

.header-bar a {
  display: flex;
}

.header-bar a:hover {
  background-color: #404040;
  border-radius: 10px;
}

.header-bar img {
  padding: 0 10px;
  max-width: 130px;
  object-fit: contain;
}

.header-bar nav {
  margin: 0 auto;
}
.header-bar nav .menu-menu-container ul {
  margin: 10px auto 0 auto;
}
.header-bar nav .menu-menu-container li {
}
.header-bar .main-nav a {
  color: #DCDCDC;
  text-decoration: none;
  padding: 10px 20px;
}

.header-bar-sitelogo {
  display: block;
  left: 0;
}

.header-bar-vlogo {
  display: block;
  right: 0;
}

.header-bar-sitelogo a, .header-bar-vlogoa a {
  padding: 2px 10px;
}
/* ↑ ヘッダー(header.php/header-bar.php) ↑ */
/* ---------- */

/* ---------- */
/* ↓ フッター(footer.php) ↓ */
.footer {
  background-color: #1f1f1f;
  color: #fff;
  padding: 50px 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer a {
  padding: 5px 10px;
  color: #DCDCDC;
  text-decoration: none;
}
.footer a:hover {
  background-color: #4a3a3d;
  transition: 1000ms;
}
.footer-inner1 {
  display: flex;
  float: none;
  border-bottom: 2px solid #fff;
}

.footer-col {
  width: 15%;
  min-width: 300px;
  margin: 0 5% 0 0;
}
.footer_logo {
  max-width: 200px;
}
.footer_linklist img {
  width: 25px;
  height: 25px;
  padding: 0 0.5vw 0 0;
  vertical-align: middle;
}
.footer_linklist p {
  padding: 0 0 0 30px;
}

.footer_site-menu a {
  display: inline-block;
}

.menu-menu-container li {
  list-style: none !important;
}

.footer-inner2 {
  display: block;
  float: none;
}

.footer-inner2 p {
  padding: 0 10px;
  display: flex;
  float: left;
}
/* ↑ フッター(footer.php) ↑ */
/* ---------- */

/* ---------- */
/* ↓ 固定フッター(screen-bottom.php) ↓ */
.screen-bottom {
  display: flex;
  width: 100%;
  height: 3vh;
  min-height: 20px;
  overflow: hidden;
  background-color: #1f1f1f;
  color: #fff;
  font-size: clamp(12px, 0.7vw, 30px);
  position: fixed;
  bottom: 0;
  z-index: 1000;
  vertical-align: top;
}
span.copyright {
  position: absolute;
  line-height: 0.5;
  right: 0;
  margin-right: 3%;
  display: flex;
}
span.copyright p {
  display: inline-block;
}
/* ↑ 固定フッター(screen-bottom.php) ↑ */
/* ---------- */



/* ---------- */
/* ↓ レイアウト ↓ */
.site-inner { display: flex; gap: 24px; width: auto; margin: 0 auto;}
.main-column { max-width: 700px; width: 100%; background: rgba(255,255,255,0.92); padding-bottom: 30px; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.3) 10px 10px 10px 0.6em;}
.main-column-inner {padding: 0 15px}
.sidebar { width: 250px; background: rgba(255,255,255,0.9); margin-left: auto; padding: 18px; border-radius: 12px; position: sticky; top: 70px; height: calc(80vh - 40px); overflow: hidden; 
  box-shadow: rgba(0, 0, 0, 0.3) 10px 10px 10px 0.6em;}

  .post-meta { font-size: 12px; color: #666; margin-bottom: 8px; }
  .category-badge { display: inline-block; padding: 4px 8px; background:#e6e1de; border-radius:6px; font-size:12px; margin-right:6px; }
  .container {
    width: 100%;
    max-width: 1100px;
    margin: 50px auto auto;
    padding: 20px 20px 50px;
    align-content: center;
  }
/* ↑ レイアウト ↑ */
/* ---------- */


/* ---------- */
/* ↓ トップページ ↓ */

/* 初回アニメーション用オーバーレイ */
#intro-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease;
}
.intro-logo {
  height: 60px; /* ロゴサイズ調整 */
  opacity: 1;
  transition: opacity 1s ease;
}

/* トップのビデオヒーロー */
.hero {
  position: relative;
  width: 100%;
  height: 50vh; /* ブラウザの高さ100% */
  background: black; /* アスペクト比が違う場合に出る余白を黒で塗る */
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0px 30px 1.2em;
}
#hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 動画を全体表示、余白が出る */
  transform: translate(-50%, -50%); /* 中央に配置 */
}
.hero-logo,
.hero-vtuber-logo {
  position: absolute;
  z-index: 2;
}
.hero-logo {
  top: 20%;
  left: 20%;
  width: 20%; /* 調整してください */
}
.hero-vtuber-logo {
  top: 20%;
  right: 20%;
  width: 20%; /* 調整してください */
}

/* フロントのページリンク5つ横並び */
.front-links {
  display: flex;
  width: 100%;
  margin: 30px 0;
  gap: 12px;
}
.front-links a {
  flex:1; background: rgba(255,255,255,0.92);
  padding: 14px;
  border-radius: 8px;
  text-align:center;
  font-weight:600;
  text-decoration: none;
}

/* 最新記事・YouTubeエリア */
/* ----- home-grid: 2カラム均等、カードは白背景 ----- */
.home-grid {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 24px;
  /* container 内で左右等分するために幅100% */
  width: 100%;
}

/* 左右カラムを均等に */
.front-left-col,
.front-right-col {
  flex: 1 1 0; /* 均等に伸びる */
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  width: 48%;
}

/* 各セクション（カード）共通スタイル */
.front-section {
  background-color: #ffffff; /* 白系背景 */
  color: #222222;           /* 本文は濃いめ */
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 12px;
}

/* セクション見出し */
.front-section h2 {
  color: #222;
  font-size: 1.15rem;
  margin: 0 0 12px 0;
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding-bottom: 8px;
}

/* ===== 最新記事リストデザイン ===== */
.home-article-item {
  color: #222;
  position: relative;
  display: block;
  text-decoration: none;
  margin-bottom: 10px;
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* clip-pathで右上カドを削る */
.home-article-item .inner {
  background-color: #ffffff;
  border: 1px solid #e8bfc6;
  border-radius: 0 0 0 16px;
  overflow: visible; /* 折り目を隠さない */
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
  position: relative;
  z-index: 1;
}

/* 折り返し部分（右上の小三角形） */
.home-article-item::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(
    135deg,
    rgba(255, 182, 193, 0.95) 0%,
    #db7093 100%
  );
  clip-path: polygon(0 0, 5% 95%, 100% 100%);
  box-shadow: -4px 10px 4px rgba(0, 0, 0, 0.20);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  z-index: 2;
}

/* カテゴリ＋日付部分 */
.home-article-item .meta-line {
  background-color: #ffe6ea;
  color: #444;
  font-size: 0.9rem;
  padding: 4px 10% 4px 8px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e8bfc6;
  margin: 0;
}

/* 記事タイトル部分 */
.home-article-item .title-line {
  background-color: #ffffff;
  color: #202020;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 8px 10px;
  margin: 2px;
  border-radius: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

/* hover時：カード全体が浮く */
.front-section .home-article-item:hover {
  transform: translateY(-2px);
  filter: brightness(0.97) saturate(1.4);
  transition: all 200ms;
}

/* hover時：折り目がふわっと動く */
.home-article-item:hover::after {
  clip-path: polygon(0 0, 30% 70%, 100% 100%);
  box-shadow: -4px 10px 6px rgba(0, 0, 0, 0.50);
  transition: all 200ms;
}

/* ↑ トップページ ↑ */
/* ---------- */



/* ---------- */
/* ↓ 個別・固定ページ共通 ↓ */
.wp-block-quote {
  background-color: #EDE2D7;
  border: 3px dotted #765760;
  border-start-end-radius: 15px;
  border-end-start-radius: 15px;
  margin: 10px 0 10px 3%;
  padding: 5px;
}

/* ↑ 個別・固定ページ共通 ↑ */
/* ---------- */



/* ---------- */
/* ↓ 個別記事(single.php) ↓ */
.kiji h1 {
  background-color: #69464C;
  color: #DCDCDC;
  font-size: 1.8em;
  line-height: 1.3;
  padding: 15px 10px;
  margin: 0 0 20px 0;
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
}
.kiji h2 {
  font-size: 1.5em;
  margin: 3em -1em 1.2em -1em;
  border-top: 16px ridge #ca95a4;
  border-left: 16px ridge #ca95a4;
  border-bottom: 4px solid #765760;
  border-right: 10px ridge rgba(0,0,0,0);
  background: url(./images/h2.png) no-repeat left center;
  background-size: 10%;
  padding-left: 40px;
}
.kiji h2::before {
  content: "";
  font-size: 1.5em;
  margin-right: 10px;
  margin-left: 0;
  color: #905C73;
}
.kiji h3 {
  font-size: 1.4em;
  margin: 2em 0 1.5em 0;
  padding: 0 .3em 0 0;
  border-bottom: 6px double #ac537a;
  background: url(./images/h3.png) no-repeat left center;
  background-size: contain;
  padding-left: 40px;
}
.kiji h3::before {
  font-size: 1.3em;
  content: "";
  margin-right: 8px;
  color: #ac537a;
}
.kiji h4 {
  font-size: 1.3em;
  margin: 1.8em 0 1em 0;
  border-bottom: 3px dotted #ac537a;
  background: url(./images/h4.png) no-repeat left center;
  background-size: contain;
  padding-left: 30px;
}
.kiji h4::before {
  content: "";
  font-size: 1.2em;
  color: #C88DA7;
  padding-left: 5px;
}
.kiji h5 {
  font-size: 1.2em;
  margin: 2em 0 1em 0;
  border-left: 7.5px solid #C88DA7;
  padding-left: 10px;
}
.kiji h6 {
  font-size: 1.1em;
  margin: 2em 0 1em 0;
  border-left: 5px dotted #C88DA7;
  padding-left: 10px;
}

.kiji-thumbnail {
  width: 100%;
  height: auto;
  max-width: 800px;
  max-height: 450px;
  margin: 50px auto 0 auto;
  padding: 20px;
}
.kiji-thumbnail img {
  width: 100%;
  max-width: 800px;
  max-height: 450px;
  object-fit: cover;
  border-radius: 20px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.3) 10px 10px 10px 0.3em;
}
.kiji-img{
  border-radius: 20px;
}

.kiji-post-meta {
  font-size: 14px;
  font-weight: 400;
  color: #74554b;
  margin-left: 20px;
  margin-bottom: 8px;
}

.cat-data {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.cat-data a {
  color: #DCDCDC;
  background-color: #A0867E;
  display: inline-block;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s;
}
.cat-data a:hover {
  background-color: #6e5851;
}

/*タグ*/
.kiji-content {
  margin: 50px 20px;
}

.kiji-tag {
  line-height: 2.1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.kiji-tag a {
  background-color: #A0867E;
  color: #DCDCDC;
  display: inline-block;
  white-space: nowrap;
  padding:0 10px;
  border-radius:8px;
  border: none;
  text-decoration: none;
  transition: background-color 0.2s;
}
.kiji-tag a:hover {
    filter: brightness(1.3);
}

.kiji-endcomment {
  font-size: 0.9em;
  color: #6e5851;
}

/*関連記事*/
.related-grid {
  margin: 0;
  padding: 10px;
}

.related-grid ul {
  font-size: 0;
  margin: 10px 0;
  padding: 0;
}

.related-grid li {
  display: inline-block;
  box-sizing: border-box;
  width: 30%;
  margin: 0 1% 20px;
  list-style: none;
  vertical-align: top;
}

.related-grid li:nth-child(3n) {
  margin-right: 0;
}

.related-grid li a {
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.related-grid li a:hover {
  color: #fff;
}

.related-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}

.related-grid .text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
  background-color: rgba(0,0,0,0.5);
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.3em;
}

/* ↑ 個別記事(single.php) ↑ */
/* ---------- */



/* ---------- */
/* ↓ 固定ページ(page.php) ↓ */
.entry-content h1 {
  background-color: #69464C;
  color: #DCDCDC;
  font-size: 2em;
  text-align: center;
  padding: 15px 10px;
  margin: 0 0 20px 0;
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
}
.entry-content h2 {
  font-size: 1.5em;
  margin: 3em 0em 1.2em 0em;
  padding: 0;
  border-top: 10px ridge rgba(0,0,0,0);
  border-left: 16px ridge #ca95a4;
  border-bottom: 4px solid #765760;
  border-right: 10px ridge rgba(0,0,0,0);
  background: url(./images/h2.png) no-repeat left center;
  background-size: 10%;
  padding-left: 40px;
}
.entry-content h2::before {
  content: "";
  font-size: 1.5em;
  margin-right: 10px;
  margin-left: 0;
  color: #905C73;
}
.entry-content h3 {
  font-size: 1.4em;
  margin: 2em 0 1.5em 0;
  padding: 0 .3em 0 0;
  border-bottom: 6px double #ac537a;
  background: url(./images/h3.png) no-repeat left center;
  background-size: 7% auto;
  padding-left: 40px;
}
.entry-content h3::before {
  font-size: 1.3em;
  content: "";
  margin-right: 8px;
  color: #ac537a;
}
.entry-content h4 {
  font-size: 1.3em;
  margin: 1.8em 0 1em 0;
  border-bottom: 3px dotted #ac537a;
  background: url(./images/h4.png) no-repeat left center;
  background-size: 7% auto;
  padding-left: 30px;
}
.entry-content h4::before {
  content: "";
  font-size: 1.2em;
  color: #C88DA7;
  padding-left: 5px;
}
.entry-content h5 {
  font-size: 1.2em;
  margin: 2em 0 1em 0;
  border-left: 7.5px solid #C88DA7;
  padding-left: 10px;
}
.entry-content h6 {
  font-size: 1.1em;
  margin: 2em 0 1em 0;
  border-left: 5px dotted #C88DA7;
  padding-left: 10px;
}

.main-column-inner .entry-content {
  margin-bottom: 100px;
}
/* ↑ 固定ページ(page.php) ↑ */
/* ---------- */



/* ---------- */
/* ↓ サイドバー ↓ */
.sidebar h2, .sidebar h3 {
  font-size: 1.1em;
  margin-bottom: 0;
  padding: 0 .3em 0 0;
  border-bottom: 6px double #ac537a;
  background: url(./images/h3.png) no-repeat left center;
  background-size: contain;
  padding-left: 40px;
}

.sidebar h2::before, .sidebar h3::before {
  content: "";
  font-size: 1.1em;
  color: #C88DA7;
  border-left: none;
  padding-left: 2px;
}

.sidebar ul {
  margin: 5px 0;
  list-style: none;
  padding: 5px;
}

.sidebar li::before {
  content: "⟡.·";
  color: #B2667C;
}

.sidebar-post-title {
  display: block;
  overflow: hidden; /* はみ出した部分を隠す */
  white-space: nowrap; /* 改行させず1行に固定 */
  text-overflow: ellipsis; /* 省略記号「...」を表示 */
}

div.widget div select {
  margin: 10px;
  padding: 5px;
  width: 90%;
  border-radius: 10px;
}
/* ↑ サイドバー ↑ */
/* ---------- */



/* ---------- */
/* ↓ SNSボタン ↓ */
.share-buttons {
  display:flex;
  gap:8px;
  margin-top:10px;
}
.share-buttons a {
  padding:4px 10px;
  border-radius:8px;
  border: none;
  cursor:pointer;
  background: #753740;
  color: #DCDCDC;
  text-decoration: none;
}
/* ↑ SNSボタン ↑ */
/* ---------- */



/* ---------- */
/* ↓ コメント欄 ↓ */
.comment-respond h3 {
  font-size: 1.3em;
  margin: 1.8em 0 1em 0;
  border-bottom: 3px dotted #ac537a;
  background: url(./images/h4.png) no-repeat left center;
  background-size: 7% auto;
  padding-left: 30px;
}
.comment-respond h3::before {
  content: "";
  font-size: 1.2em;
  color: #C88DA7;
  padding-left: 5px;
}
/* ==============================
   コメント欄デザイン（Yosuga仕様）
============================== */
.yosuga-comments-area {
    margin-top: 3em;
}

/* 各コメント全体 */
.yosuga-comment-item {
    margin-bottom: 2em;
}

/* ヘッダー部分 */
.yosuga-comment-header {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    position: relative;
}

/* コメント番号 */
.yosuga-comment-number {
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    font-size: 0.8em;
    background: #e0d6d8;
    padding: 0.2em 0.5em;
    border-radius: 5px;
}

/* アバター */
.yosuga-comment-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ccb2b7;
}

/* 名前と日時 */
.yosuga-comment-meta {
    line-height: 1.4;
    width: 70%;
}
.yosuga-comment-author {
    font-weight: bold;
    color: #6b4c51;
}
.yosuga-comment-date {
    font-size: 0.85em;
    color: #777;
}

/* 本文部分 */
.yosuga-comment-body {
    margin-top: 0.3em;
    margin-left: 10%;
    padding: 0.7em;
    border-width: 1px;
    border-color: #b38c93;
    border-radius: 0 30px 30px 30px;
    background: #fafafa;
}
.yosuga-comment-text p {
  margin: 10px 0;
}

/* 階層コメントは左にインデント */
.yosuga-comment-item .children {
    margin-left: 4em;
}

/* 編集・返信リンク */
.yosuga-comment-edit,
.yosuga-comment-reply {
    margin-top: 0.5em;
    font-size: 0.85em;
}
.yosuga-comment-reply a {
    color: #8c5f66;
    text-decoration: none;
    margin-left: 10px;
}
.yosuga-comment-reply a:hover {
    text-decoration: underline;
}

/* コメントリストの番号マーカーを非表示に */
.yosuga-comment-list {
    list-style: none;
    counter-reset: yosuga-comment;
    padding-left: 0;
}
.yosuga-comment-list li::marker {
    content: none;
}

.yosuga-comment-title {
  font-size: 1.2em;
  margin-bottom: 0.5em;
  border-left: 4px solid #666;
  padding-left: 8px;
}
p.yosuga-comment-notes, p.comment-form-cookies-consent {
  font-size: 0.8em;
}
form.comment-form label {
  display: block;
}
/* ↑ コメント欄 ↑ */
/* ---------- */



/* ---------- */
/* ↓ 広告が表示されますアナウンス ↓ */
.ad-notice {
    font-size: 0.7em;
    display: table;
    margin: 0 0 auto auto;
    line-height: 0.9;
    color: #b4958b;
}
/* ↑ 広告が表示されますアナウンス↑ */
/* ---------- */



/* ---------- */
/* ↓ 記事一覧ページ ↓ */
.kiji-list {
  width: 95%;
  display: flex;
  margin: 10px;
}
.kiji-list a {
  width: 100%;
  text-decoration: none;
  border: 10px double #b38c93;
}
.kiji-list a:hover {
  background-color: #e5d9db;
}
.kiji-list img {
  width: 25%;
  margin: 5px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  height: auto;
  display: inline-block;
  border-radius: 8px;
  vertical-align: middle;
}
.kiji-list div {
  display: inline-block;
  width: 60%;
  height: auto;
  vertical-align: top;
  margin-left: 10px;
}
.kiji-list div h2 {
  font-size: 1.2em;
}
/* ↑ 記事一覧ページ ↑ */
/* ---------- */



/* ---------- */
/* ↓ 404エラーページ ↓ */
.page-404 {
  background-color: rgba(255,255,255,0.92);
  border-start-start-radius: 15px;
  border-start-end-radius: 15px;
  width: 90%;
}
.page-404 h1 {
  background-color: #69464C;
  color: #DCDCDC;
  font-size: 2em;
  text-align: center;
  padding: 15px 10px;
  margin: 0 0 20px 0;
  overflow: hidden;
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
}
.page-404 h3 {
  font-size: 1.4em;
  margin: 2em 0 1em 0;
  padding: 0 .3em 0 0;
  border-bottom: 3px dotted #ac537a;
  background: url(./images/h4.png) no-repeat left center;
  background-size: 7% auto;
  padding-left: 30px;
}
.page-404 h3::before {
  font-size: 1.3em;
  content: "";
  margin-right: 8px;
  color: #ac537a;
}
.page-404-content {
  margin: 10px;
}
/* ↑ 404エラーページ ↑ */
/* ---------- */



/* ---------- */
/* ↓ クリックして表示 ↓ */
.yosuga-toggle {
  margin-bottom: 1em;
  font-weight: 400;
  font-size: 0.9em;
  display: block;
}

.yosuga-toggle-button {
  background-color: #ccb2b7;
  color: #57232D;
  display: inline-block;
  border: 1px solid #b38c93;
  padding: 0.5em 1em;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-start-end-radius: 15px;
  transition: background-color 0.25s ease;
}

.yosuga-toggle-button a {
  color: #57232D;
}

.yosuga-toggle-button:hover {
  background-color: #c09fa5;
}

.yosuga-toggle-content {
  max-height: 0;
  overflow: hidden;
  display: block;
  transition: max-height 0.35s ease;
  padding: 0 1em;
  border-left: 1px solid #b38c93;
  border-right: 1px solid #b38c93;
  border-bottom: 1px solid #b38c93;
  background-color: #fafafa;
  border-end-start-radius: 15px;
}
/* ↑ クリックして表示 ↑ */
/* ---------- */



/* ---------- */
/* ↓ リンクカード ↓ */
.linkcard-bg1 {
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.linkcard-bg2 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.linkcard-bg {
  background-image:url('./images/bg_room1.jpg');
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  image-orientation: from-image;
}

.mainmount {
  display: flex;
}

.container-LinkCard {
  display: inline-block;
  margin: 0 auto 50px;
  position: relative;
}

.contents-LinkCard{
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  background-color: rgba(0,0,0,0.5);
  border: none;
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px 10px;
}

.contents-LinkCard h1 {
  text-align: center;
  font-family: "Zen Antique Soft", serif;
  font-size: 30px;
  font-weight: normal;
  color: #fff;
  background-color: rgba(12.75, 0, 0, 0.5);
  padding: 20px 0 10px 0;
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
}
.contents-LinkCard h1:after {
  content: "";
  display: block;
  height: 4px;
  margin: 0;
}
.contents-LinkCard h2 {
  font-family: "Zen Antique Soft", serif;
  font-size: 25px;
  font-weight: normal;
  color: #fff;
  margin: 15px 0.5em 5px 0;
  border-top: none;
  border-left: 6px solid #cf81a0;
  border-bottom: 6px solid #cf81a0;
  border-right: 10px ridge rgba(0,0,0,0);
  background: url(./images/h2.png) no-repeat left center;
  background-size: 10%;
  padding-left: 30px;
}
.contents-LinkCard h2::before {
  content: "";
  margin-right: 10px;
  color: #ffdaea;
  font-size: 1.8em;
}

.contents-LinkCard p{
  position: relative;
  background-color: rgba(255,255,255,0.8);
  border: 2px solid rgb(175, 110, 119);
  margin: auto 5px 30px 0px;
  padding: 10px;
  padding-left: 15px;
}
.contents-LinkCard p::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 6px;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0);
  border-top: 2px solid rgb(175, 110, 119);
  border-bottom: 2px solid rgb(175, 110, 119);
  border-right: 2px solid rgb(175, 110, 119);
  border-left: 2px solid rgb(175, 110, 119);
}

.contents-LinkCard img {
  margin: 10px auto;
}

.contents-LinkCard img:hover {
  transform: translateY(-2px);
  filter: brightness(1.2) saturate(1.4);
  transition: all 200ms;
}

.contents-LinkCard .yosuga-toggle {
  font-weight: 500;
}

.contents-LinkCard .yosuga-toggle-button {
  background-color: #ccb2b7;
  color: #57232D;
  border: 1px solid rgb(175, 110, 119);
}

.contents-LinkCard .yosuga-toggle-button a {
  color: #57232D;
}

.contents-LinkCard .yosuga-toggle-button:hover {
  background-color: #c09fa5;
}

.contents-LinkCard .yosuga-toggle-content {
  border-left: 1px solid rgb(175, 110, 119);
  border-right: 1px solid rgb(175, 110, 119);
  border-bottom: 1px solid rgb(175, 110, 119);
  background-color: rgba(255,255,255,0.8);
}
/* ↑ リンクカード ↑ */
/* ---------- */

/* レスポンシブは別ファイル（style-mobile.css）で管理 */