@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.body {
	letter-spacing: .05rem;
	font-feature-settings: 'palt';
	font-size: 1.05rem;
}

/*フォント*/
.hina-mincho-regular {
	font-family: "Hina Mincho", serif;
	font-weight: 400;
	font-style: normal;
}

body,
input,
textarea {
	font-family: "Hina Mincho", serif;
}

.skin-grayish .navi, .skin-grayish .site-name-text, .skin-grayish .sub-caption, .skin-grayish .mobile-menu-buttons .menu-caption, .skin-grayish .navi-footer, .skin-grayish .menu-drawer, .skin-grayish .logo-menu-button, .skin-grayish .list-new-entries h1, .skin-grayish .list-columns h1, .skin-grayish .list-columns::after, .skin-grayish .related-entry-heading, .skin-grayish .comment-title, .skin-grayish .comment-btn, .skin-grayish .sidebar h3, .skin-grayish .footer h3, .skin-grayish .main-widget-label, .blank-box.bb-tab .bb-label  {
	font-family: "Hina Mincho", serif !important;
}

/*グローバルナビメニューの背景（トップページのみ）*/
.skin-grayish:not(.front-top-page) .header-container {
	background-color: var(--topHeaderNaviBgColor);
}

/*グローバルナビメニューのリンク文字*/
.skin-grayish :where(.navi-in, .navi-footer-in) a {
	color: #ffffff;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

/*グローバルナビSNSアイコン*/
.skin-grayish #navi-in [class^="icon-"], .skin-grayish #navi-in [class*=" icon-"], .skin-grayish .menu-content .menu-drawer [class^="icon-"], .skin-grayish .menu-content .menu-drawer [class*=" icon-"] {
	color: #ffffff;
}

/*グローバルナビメニューの検索アイコン*/
 .skin-grayish .navi-in .search-menu-icon span::before {
	color: #ffffff;
}

.skin-grayish .grayish-btn {
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

/*サブメニュー*/
.skin-grayish .navi-in>ul>li>.sub-menu {
	background-color: rgba(75, 55, 42, 0.4);
}

/*サイト名*/
.site-name-text-link {
	color: #ffffff;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

/*サイト名（トップページのみ）*/
.front-top-page .site-name-text-link {
	color: var(--cocoon-text-color);
	/* text-shadow: 1px 1px 2px rgba(255, 255, 255, 1); */
	text-shadow: 1px 1px 4px #ffffff, -1px -1px 4px #ffffff, -1px 1px 4px #ffffff, 1px -1px 4px #ffffff, 1px 0 4px #ffffff, -1px  0 4px #ffffff, 0 1px 4px #ffffff, 0 -1px 4px #ffffff;
}

/*フッター著作権情報*/
.skin-grayish .copyright {
	opacity: 1;
	color: #ffffff;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.skin-grayish .copyright a {
	color: #ffffff;
	text-decoration: none;
}

.skin-grayish .copyright a:hover {
	color: var(--skin-grayish-site-main-hover);
	text-decoration: underline;
}

/*フッターの背景色*/
.skin-grayish .footer {
	background-color: rgba(75, 55, 42, 0.5);
}

/*フッターのサイト名*/
#footer .site-name-text-link {
	color: #ffffff;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

/*画像の幅100%*/
.wp-block-image img {
	width: 100%;
	height: auto;
	max-width: 100%;
}

.wp-block-image>a, .wp-block-image>figure>a {
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* YouTube レスポンシブ化 */
/* YouTubeのサイズ変更 */
.video-container {
	max-width: 100%;
	margin: 0px auto;
}

.yt {
}

.yt iframe:where([src*="https://www.youtube.com/embed/"][width="560"][height="315"]) {
	aspect-ratio: 16 / 9;
	height: 100%;
	width: 100%;
}

/* Facebook レスポンシブ化 */
.facebook-wrapper {
  max-width: 100%;
}
.facebook-wrapper > .fb-page,
.facebook-wrapper iframe {
  width: 100% !important;
}

/* Googleマップ レスポンシブ化 */
.map-container {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9のアスペクト比を維持 */
}

.map-container iframe {
	aspect-ratio: 16 / 9;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* 年表 */
/* カラム全体 */
/* 前後のカラムとの間隔などを設定 */
.my-timeline-block {
	padding-top: 30px;
	padding-bottom: 30px;
	margin-top: 0;
	margin-bottom: 0;
	border-left: solid 5px var(--LtGray_T70);
}

/* バイオグラフィーのカラム */
/* 日付のテキスト */
/* 日付の左横に青色の丸アイコンを表示 */
.my-timeline-block .wp-block-column:first-child p::before {
	content: "●";
	color: #b89257;
	position: relative;
	top: 0;
	left: -11px;
}

/* 右側（出来事）のカラム */
/* 吹き出しの色などを設定 */
.my-timeline-block .wp-block-column:last-child {
	border-radius: 10px;
	box-shadow: 0px 0px 80px -30px rgba(247, 243, 236, .5);
	padding: 20px;
	background-color: #f7f3ec;
}

/* 更新日を非表示（※これ必要かな？用検討！） */
/* .page */.post-update {
	display: none;
}

/* ボタン */
.wp-block-buttons a:hover {
	/* color: var(--skin-grayish-site-main-hover); */
	background-color: #ffeeee;
	transform: translateY(-2px);
	opacity: .86;
	box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

/* サイドバー */
/* ボタン */
.wp-sidebar-block-button__link {
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	word-break: break-word;
	box-sizing: border-box;
	background: transparent none;
	border-color: currentColor;
	border-width: 2px;
	border-style: solid;
	color: currentColor;
	padding-top: 0.667em;
	padding-right: 1.33em;
	padding-bottom: 0.667em;
	padding-left: 1.33em;
	width: 100%;
}

.wp-sidebar-block-button a:hover {
	color: var(--skin-grayish-site-main-hover);
	/* color: var(--skin-grayish-site-main-hover); */
	background-color: #ffeeee;
	transform: translateY(-2px);
	opacity: .86;
	box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

/* トップへ戻るボタン */
.skin-grayish .go-to-top-button.go-to-top-button-icon-font {
	background-color: var(--skin-grayish-site-main-hover);
	/* border: 1px solid #ffffff; */
	opacity: 0.8;
}

.skin-grayish .go-to-top-button.go-to-top-button-icon-font span {
	border-left: 1px solid #ffffff;
	border-top: 1px solid #ffffff;
}

/* トップへ戻る画像バージョン */
.skin-grayish .go-to-top-button {
	height: 160px;
	width: 128px;
}

/* FontAwesome 体裁 */
.fa, .fab, .fad, .fal, .far, .fas {
	padding-right: 0.25em;
	line-height: normal;
}

/* 画像hover効果 */
.enlarge-img {
	cursor: pointer;
	/* max-width: 500px; */
	/* overflow: hidden; */
	width: 100%;
}
.enlarge-img img {
	height: auto;
	transition: transform .6s ease; /* ゆっくり変化させる */
}
.enlarge-img:hover img {
	transform: scale(1.1); /* 拡大 */
}

/* サムネイル画像をOGPサイズに！ */
.a-wrap:not(.recent-comment-link, .rss-entry-card-link) figure img,
.fb-like-box img {
	aspect-ratio: 1.91 / 1;
	object-fit: cover;
}

/* grayishスキン専用：エントリーカード（記事一覧）を1.91:1にする */
/* 新着記事（スライダーやウィジェット）の枠の16:9固定を解除 */
.new-entry-card-link .new-entry-card-thumb,
.widget-entry-card-link .widget-entry-card-thumb {
    padding-top: 0 !important;
    height: auto !important;
}

/* 画像を1.91:1に固定して綺麗に切り抜く */
.new-entry-card-link .new-entry-card-thumb img,
.widget-entry-card-link .widget-entry-card-thumb img {
    aspect-ratio: 1.91 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

/* ブログ記事一覧：外枠の16:9固定を完全に解除 */
.entry-card-wrap .entry-card-thumb,
.entry-card-wrap .card-thumb {
    padding-top: 0 !important;
    height: auto !important;
    display: block !important;
    overflow: hidden !important;
}

/* ブログ記事一覧：読み込んだ1.91:1の画像を歪ませずにぴったりはめる */
.entry-card-wrap .entry-card-thumb img,
.entry-card-wrap .card-thumb img {
    aspect-ratio: 1.91 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

/************************************
** YULYオリジナル
************************************/

.yuly-lp {
  --base: #F7F3EC;
  --text: #4B372A;
  --main: #B89257;
  --sub: #6F8F8C;
  --accent: #D8A0A4;
  --myth: #6B4E9B;

  color: var(--text);
  /* font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; */
}

/* ==============================
   Hero
============================== */

.yuly-hero {
  min-height: 72vh;
  background:
    linear-gradient(90deg, rgba(247,243,236,.94) 0%, rgba(247,243,236,.78) 45%, rgba(247,243,236,.18) 100%),
    url("https://yuly.jp/wp-content/uploads/260609_yuly_top_img.webp");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 70px;
}

/* WordPress Coverブロック対策 */
.wp-block-cover.yuly-hero {
  padding: 0;
}

.wp-block-cover.yuly-hero .wp-block-cover__inner-container {
  width: 100%;
  color: var(--text);
}

.wp-block-cover.yuly-hero .wp-block-cover__background {
  display: none;
}

.yuly-hero__inner {
  width: 100%;
  padding: 8vw 6vw;
}

.yuly-hero__text {
  max-width: 620px;
}

.yuly-kicker {
  color: var(--main);
  letter-spacing: .12em;
  font-size: .9rem;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.yuly-hero h1,
.yuly-hero h2 {
  font-size: clamp(2.1rem, 5vw, 4.4rem);
  line-height: 1.25;
  margin: 0 0 24px;
  color: var(--text);
  font-weight: 600;
}

.yuly-lead {
  font-size: 1.05rem;
  line-height: 2;
  margin-bottom: 32px;
}

/* ==============================
   Buttons
============================== */

.yuly-buttons,
.wp-block-buttons.yuly-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.yuly-buttons--center,
.wp-block-buttons.yuly-buttons--center {
  justify-content: center;
}

/* WordPressボタン外側は装飾しない */
.wp-block-button.yuly-btn {
  margin: 0;
}

/* 実際のボタン見た目は a タグだけに当てる */
a.yuly-btn,
.wp-block-button.yuly-btn .wp-block-button__link {
  display: inline-block;
  padding: 0.75em 1.25em;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: .25s;
  line-height: 1.5;
  box-shadow: none;
}

/* メインボタン */
a.yuly-btn--main,
.wp-block-button.yuly-btn--main .wp-block-button__link {
  background: var(--main);
  color: #fff;
  border: 1px solid var(--main);
}

/* サブボタン */
a.yuly-btn--sub,
.wp-block-button.yuly-btn--sub .wp-block-button__link {
  border: 1px solid var(--main);
  color: var(--main);
  background: rgba(255,255,255,.55);
}

/* Hover */
a.yuly-btn:hover,
.wp-block-button.yuly-btn .wp-block-button__link:hover {
	transform: translateY(-2px);
	opacity: .86;
	box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

/* WordPress標準ボタンの余計な見た目を抑える */
.wp-block-button.yuly-btn .wp-block-button__link {
  font-size: inherit;
}

/* ==============================
   Sections
============================== */

.yuly-section {
  padding: 70px 5vw;
  margin-bottom: 48px;
}

.yuly-section--cream {
  background: var(--base);
  border-radius: 24px;
}

.yuly-section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 42px;
}

.yuly-section__head h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  margin: 0 0 18px;
  color: var(--text);
}

.yuly-section__head p {
  line-height: 1.9;
}

/* ==============================
   Mythology Cards
============================== */

/* ブロックエディター版：Columnsをカードグリッド風にする */
.wp-block-columns.yuly-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 22px;
}

.wp-block-columns.yuly-card-grid:not(.is-not-stacked-on-mobile) > .wp-block-column {
  flex-basis: auto !important;
  flex-grow: 0;
}

/* 元HTML版にも一応対応 */
.yuly-card-grid {
  gap: 22px;
}

.yuly-card {
  display: block;
  height: 100%;
  padding: 30px 24px;
  min-height: 180px;
  background: #fff;
  border-radius: 20px;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 10px 28px rgba(75,55,42,.08);
  border-top: 5px solid var(--myth);
  transition: .25s;
}

.yuly-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--text);
}

.yuly-card span {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  /* margin-bottom: 14px; */
}

.yuly-card p {
  line-height: 1.8;
  font-size: .95rem;
  margin-bottom: 0;
}

.yuly-card .wp-block-buttons {
  margin-top: 20px;
}

/* ブロック版のカード色指定 */
.wp-block-columns.yuly-card-grid:nth-of-type(1) .wp-block-column:nth-child(1) .yuly-card {
  border-color: #4E7A4A;
}

.wp-block-columns.yuly-card-grid:nth-of-type(1) .wp-block-column:nth-child(2) .yuly-card {
  border-color: #B73A3A;
}

.wp-block-columns.yuly-card-grid:nth-of-type(2) .wp-block-column:nth-child(1) .yuly-card {
  border-color: #4FAFB3;
}

.wp-block-columns.yuly-card-grid:nth-of-type(2) .wp-block-column:nth-child(2) .yuly-card {
  border-color: #E58A5A;
}

/* 元HTML版のカード色指定も残す */
.yuly-card-grid > .yuly-card:nth-child(1) {
  border-color: #4E7A4A;
}

.yuly-card-grid > .yuly-card:nth-child(2) {
  border-color: #B73A3A;
}

.yuly-card-grid > .yuly-card:nth-child(3) {
  border-color: #4FAFB3;
}

.yuly-card-grid > .yuly-card:nth-child(4) {
  border-color: #E58A5A;
}

.yuly-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(75,55,42,.14);
}

/* ==============================
   Card Heading Reset
   Cocoon等のH3装飾をカード内だけ解除
============================== */

.yuly-card h3,
.yuly-card .wp-block-heading {
  padding: 0 !important;
  margin: 0 0 14px !important;
  border: none !important;
  border-left: none !important;
  border-bottom: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

.yuly-card h3::before,
.yuly-card h3::after,
.yuly-card .wp-block-heading::before,
.yuly-card .wp-block-heading::after {
  display: none !important;
  content: none !important;
}

/* ==============================
   Works
============================== */

.yuly-works {
  text-align: center;
  justify-content: center;
}

.yuly-work-link {
  display: inline-block;
  padding: 16px 36px;
  background: var(--text);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
}

/* ==============================
   Message
============================== */

.yuly-message {
  text-align: center;
  padding: 80px 5vw;
  background: linear-gradient(135deg, #6B4E9B, #B89257);
  color: #fff;
  border-radius: 24px;
  margin-bottom: 40px;
  container-type: inline-size;  /* ボックス幅を基準（コンテナ）にする指定 */
}

.yuly-message p {
	/* font-size: clamp(1.4rem, 3vw, 2.2rem); */
	font-size: 5cqw;              /* ボックス幅の 8% の大きさに自動調整 */
	white-space: nowrap;          /* 改行させずに1行に収める */
	line-height: 2;
	margin: 0;
	color: #fff;
}

/* ==============================
   YULY Music Page
============================== */

.yuly-music-page {
  --music-bg: #071C3A;
  --music-blue: #0B2F5B;
  --music-blue-light: #123F73;
  --music-gold: #C69A4A;
  --music-cream: #F7F3EC;
  --music-text: #3F342C;
  --music-muted: #6B625C;
  --music-white: #FFFFFF;

  color: var(--music-text);
}

/* ==============================
   Hero
============================== */

.yuly-music-hero {
  min-height: 68vh;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 70px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(7,28,58,.96) 0%, rgba(7,28,58,.88) 42%, rgba(7,28,58,.25) 100%),
    url("https://yuly.jp/wp-content/uploads/music-ogp.webp");
  background-size: cover;
  background-position: center;
  position: relative;
}

.yuly-music-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 25%, rgba(198,154,74,.22), transparent 32%),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.16), transparent 24%);
  pointer-events: none;
}

.yuly-music-hero__inner {
  width: 100%;
  padding: 8vw 6vw;
  position: relative;
  z-index: 1;
}

.yuly-music-hero__text {
  max-width: 620px;
  color: var(--music-white);
}

.yuly-music-kicker {
  color: var(--music-gold);
  letter-spacing: .16em;
  font-size: .86rem;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 600;
}

.yuly-music-hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  line-height: 1.12;
  margin: 0 0 24px;
  color: #F7E6B5;
  font-weight: 600;
  letter-spacing: .08em;
}

.yuly-music-copy {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.9;
  margin: 0 0 24px;
  color: #fff;
}

.yuly-music-lead {
  font-size: 1.02rem;
  line-height: 2;
  color: rgba(255,255,255,.9);
  margin: 0 0 34px;
}

/* ==============================
   Buttons
============================== */

.yuly-music-buttons,
.yuly-music-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.yuly-music-btn {
  display: inline-block;
  padding: .82em 1.5em;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.5;
  transition: .25s;
}

.yuly-music-btn--main {
  background: var(--music-gold);
  color: #fff;
  border: 1px solid var(--music-gold);
}

.yuly-music-btn--sub {
  background: rgba(255,255,255,.08);
  color: var(--music-gold);
  border: 1px solid var(--music-gold);
}

.yuly-music-btn:hover {
  transform: translateY(-2px);
  opacity: .86;
}

/* ==============================
   Sections
============================== */

.yuly-music-section {
  padding: 72px 5vw;
  margin-bottom: 52px;
}

.yuly-music-section--cream {
  background: var(--music-cream);
  border-radius: 24px;
}

.yuly-music-section--blue {
  background:
    linear-gradient(135deg, #061A33, #0B2F5B);
  color: #fff;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.yuly-music-section--blue::before {
  content: "♪";
  position: absolute;
  right: 5vw;
  top: -30px;
  font-size: 11rem;
  color: rgba(198,154,74,.13);
  line-height: 1;
}

.yuly-music-section__head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 44px;
}

.yuly-music-section__head h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  margin: 0 0 18px;
  color: inherit;
  font-weight: 600;
}

.yuly-music-section__head p {
  line-height: 1.9;
  margin: 0;
}

/* ==============================
   Two Column
============================== */

.yuly-music-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 34px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

.yuly-music-text p {
  line-height: 2;
  margin: 0 0 1.2em;
}

.yuly-music-text strong {
  color: var(--music-gold);
}

.yuly-music-note-card {
  background:
    linear-gradient(135deg, rgba(11,47,91,.96), rgba(7,28,58,.96));
  color: #fff;
  padding: 34px 30px;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(7,28,58,.18);
  border: 1px solid rgba(198,154,74,.36);
}

.yuly-music-note-card span {
  display: block;
  color: #F7E6B5;
  font-size: 1.35rem;
  margin-bottom: 16px;
  font-style: italic;
}

.yuly-music-note-card p {
  line-height: 1.9;
  margin: 0;
}

/* ==============================
   Cards
============================== */

.yuly-music-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.yuly-music-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(198,154,74,.36);
  border-radius: 20px;
  padding: 30px 26px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}

.yuly-music-card h3 {
  color: #F7E6B5;
  font-size: 1.35rem;
  margin: 0 0 14px;
  padding: 0;
  border: none;
  background: transparent;
}

.yuly-music-card p {
  line-height: 1.9;
  margin: 0;
  color: rgba(255,255,255,.9);
}

/* Cocoon等のH3装飾リセット */
.yuly-music-card h3::before,
.yuly-music-card h3::after {
  display: none;
  content: none;
}

/* ==============================
   Roots
============================== */

.yuly-music-roots {
  max-width: 860px;
  margin: 0 auto;
  padding: 42px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(63,52,44,.08);
  border-left: 6px solid var(--music-gold);
}

.yuly-music-roots p {
  line-height: 2;
  margin: 0 0 1.2em;
}

.yuly-music-roots p:last-child {
  margin-bottom: 0;
}

/* ==============================
   Activity List
============================== */

.yuly-music-activity-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}

.yuly-music-activity-list div {
  background: #fff;
  border-radius: 999px;
  padding: 14px 18px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(63,52,44,.07);
  border: 1px solid rgba(198,154,74,.24);
  font-weight: 600;
}

/* ==============================
   Message
============================== */

.yuly-music-message {
  text-align: center;
  padding: 78px 5vw;
  margin-bottom: 44px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(7,28,58,.96), rgba(11,47,91,.94)),
    radial-gradient(circle at 70% 20%, rgba(198,154,74,.3), transparent 32%);
  color: #fff;
}

.yuly-music-message h2 {
  color: #F7E6B5;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  margin: 0 0 24px;
}

.yuly-music-message p {
  line-height: 2;
  margin: 0;
}

.yuly-music-message .yuly-music-kicker {
  margin-bottom: 14px;
}

/* ==============================
   Bottom Links
============================== */

.yuly-music-links {
  justify-content: center;
  padding: 20px 5vw 70px;
}

.yuly-music-links .yuly-music-btn--sub {
  background: #fff;
}

/* Gutenberg版ボタン補正 */
.wp-block-button.yuly-music-btn {
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.wp-block-button.yuly-music-btn .wp-block-button__link {
  display: inline-block;
  padding: .82em 1.5em;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.5;
  transition: .25s;
  box-shadow: none;
}

/* メインボタン */
.wp-block-button.yuly-music-btn--main .wp-block-button__link {
  background: var(--music-gold);
  color: #fff;
  border: 1px solid var(--music-gold);
}

/* サブボタン */
.wp-block-button.yuly-music-btn--sub .wp-block-button__link {
  background: rgba(255,255,255,.08);
  color: var(--music-gold);
  border: 1px solid var(--music-gold);
}

/* カード内H3のCocoon装飾リセット */
.yuly-music-card h3,
.yuly-music-card .wp-block-heading,
.yuly-music-note-card h3,
.yuly-music-note-card .wp-block-heading {
  padding: 0 !important;
  margin: 0 0 14px !important;
  border: none !important;
  border-left: none !important;
  border-bottom: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.yuly-music-card h3::before,
.yuly-music-card h3::after,
.yuly-music-card .wp-block-heading::before,
.yuly-music-card .wp-block-heading::after,
.yuly-music-note-card h3::before,
.yuly-music-note-card h3::after,
.yuly-music-note-card .wp-block-heading::before,
.yuly-music-note-card .wp-block-heading::after {
  display: none !important;
  content: none !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/*必要ならばここにコードを書く*/
	
	/* グローバルナビの背景色と被るため便宜上 */
	.skin-grayish:not(.front-top-page) .header-container {
		background-color: transparent;
	}
	
	/* グローバルナビの背景色 */
	.skin-grayish.front-top-page .mobile-header-menu-buttons.mobile-menu-buttons {
		background-color: rgba(75,55,42,0.5);
	}
	
	/* ハンバーガーメニューアイコン */
	.skin-grayish .mobile-menu-buttons .menu-button, .skin-grayish .mobile-menu-buttons .menu-button>a, .skin-grayish .sidebar-menu-content .sidebar-menu-close-button {
		color: #ffffff;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
	}
	/* メニュー閉じるアイコン */
	.fa-times:before {
		color: var(--cocoon-text-color);
		text-shadow: none;
	}
	
	/* メニューテキスト */
	.menu-drawer a {
	    text-shadow: none;
	}
	
	/* SNSアイコン */
	.skin-grayish #navi-in [class^="icon-"], .skin-grayish #navi-in [class*=" icon-"], .skin-grayish .menu-content .menu-drawer [class^="icon-"], .skin-grayish .menu-content .menu-drawer [class*=" icon-"] {
		color: var(--cocoon-text-color);
		text-shadow: none;
	}
	
	/* 日付のテキスト */
	/* 青色の丸アイコンの位置を調整 */
	.my-timeline-block .wp-block-column:first-child p::before {
		left: -11px;
	}
	
	/* 右側（出来事）のカラム */
	/* 吹き出しの位置を調整 */
	.my-timeline-block .wp-block-column:last-child {
		margin-left: 20px;
	}
	
	/* サイドバー */
	#sidebar-menu-content {
		text-shadow: none;
	}

}

/* ==============================
   900px以下
============================== */

@media screen and (max-width: 900px) {
  .wp-block-columns.yuly-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
/* ==============================
   YULY Top Page
============================== */

  .yuly-hero {
    min-height: 62vh;
  }
  
/* ==============================
   YULY Music Page
============================== */

 .yuly-music-hero {
    min-height: 64vh;
    background:
      linear-gradient(90deg, rgba(7,28,58,.96) 0%, rgba(7,28,58,.86) 55%, rgba(7,28,58,.38) 100%),
      url("https://yuly.jp/wp-content/uploads/music-ogp.webp");
    background-size: cover;
    background-position: center;
  }

  .yuly-music-two-column {
    grid-template-columns: 1fr;
  }

  .yuly-music-card-grid {
    grid-template-columns: 1fr;
  }

  .yuly-music-activity-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
	/*必要ならばここにコードを書く*/
}


/* ==============================
   600px以下
============================== */

@media screen and (max-width: 600px) {
  .yuly-hero {
    background:
      linear-gradient(90deg, rgba(247,243,236,.94) 0%, rgba(247,243,236,.50) 100%),
      url("https://yuly.jp/wp-content/uploads/260609_yuly_top_img_s.webp");
    background-size: cover;
    background-position: center;
    min-height: 68vh;
    border-radius: 18px;
    margin-bottom: 48px;
  }

  .yuly-hero__inner {
    padding: 14vw 6vw;
  }

  .yuly-hero__text {
    max-width: 100%;
  }

  .yuly-hero h1,
  .yuly-hero h2 {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }

  .yuly-lead {
    font-size: 1rem;
    line-height: 1.9;
  }

  .wp-block-columns.yuly-card-grid {
    grid-template-columns: 1fr;
  }

  .yuly-section {
    padding: 48px 4vw;
    margin-bottom: 36px;
  }

  .yuly-section--cream,
  .yuly-message {
    border-radius: 18px;
  }

  .yuly-buttons,
  .wp-block-buttons.yuly-buttons {
    gap: 10px;
  }

  .yuly-btn,
  .yuly-btn .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
    .yuly-music-hero {
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(7,28,58,.96) 0%, rgba(7,28,58,.88) 100%),
      url("https://yuly.jp/wp-content/uploads/music-ogp.webp");
    background-size: cover;
    background-position: center top;
    border-radius: 18px;
    margin-bottom: 48px;
  }

  .yuly-music-hero__inner {
    padding: 18vw 6vw;
  }

  .yuly-music-hero h1 {
    font-size: clamp(2.3rem, 12vw, 3.4rem);
  }

  .yuly-music-copy {
    font-size: 1.08rem;
  }

  .yuly-music-section {
    padding: 52px 4vw;
    margin-bottom: 36px;
  }

  .yuly-music-section--cream,
  .yuly-music-section--blue,
  .yuly-music-message,
  .yuly-music-roots {
    border-radius: 18px;
  }

  .yuly-music-roots {
    padding: 30px 24px;
  }

  .yuly-music-activity-list {
    grid-template-columns: 1fr;
  }

  .yuly-music-buttons,
  .yuly-music-links {
    flex-direction: column;
  }

  .yuly-music-btn {
    width: 100%;
    text-align: center;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
	/*必要ならばここにコードを書く*/
}