@charset "UTF-8";
/*
Theme Name: lut-hmf
Theme URI: https://example.com/lut-hmf
Author: H.Ohshima
Author URI: https://twiyo.lu
Description: あなたのマチで会いましょうWordPressテーマ（PC/SPレスポンシブ対応）
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lut-hmf
*/


/* ======================
   reset CSS
====================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 14px; /* 1rem = 14px */
}
body {
  font-family: '小塚ゴシック Pro','Kozuka Gothic Pro' , 'Helvetica Neue', sans-serif;
  line-height: 1.6;
	font-size: 1rem; 
  color: #000;
  overflow-x: hidden;
}

html, body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}
ul, ol {
  list-style: none;
}
button {
  cursor: pointer;
  background: none;
  border: none;
}

/* 見出し */
h1 {
  font-size: 2rem;        /* 28px */
  font-weight: bold;
}

h2 {
  font-size: 1.75rem;     /* 24.5px */
  font-weight: bold;
}

h3 {
  font-size: 1.85rem;      /* 26px */
  font-weight: bold;
}

h4 {
  font-size: 1.25rem;     /* 17.5px */
  font-weight: bold;
}

.small-text {
  font-size: 0.875rem;    /* 12px */
  color: #777;
}



/* =====================　=====================　===================== =====================
スクロールに合わせて左右中央からイン
アニメーション初期状態　=====================　=====================　===================== */

/* 初期状態: 透明で非表示＆オフスクリーン位置 */
.fade-in-left,
.fade-in-right,
.fade-in-center {
  opacity: 0;
  transition: opacity 2s ease, transform 2.5s ease;
}

.fade-in-left {
  transform: translateX(-50px);
}

.fade-in-right {
  transform: translateX(50px);
}

.fade-in-center {
  transform: scale(0.95);
}

/* 画面内に入ったら表示＆移動 → ふわふわ開始 */
.fade-in-left.inview {
  opacity: 1;
  transform: translateX(0); /* 左右の移動をリセット */
  animation: floatY 7s ease-in-out infinite;
}

.fade-in-right.inview{
  opacity: 1;
  transform: translateX(0); /* 左右の移動をリセット */
  animation: floatY 6.5s ease-in-out infinite;
}


.fade-in-center.inview {
  opacity: 1;
  transform: translateX(0); /* 左右の移動をリセット */
  animation: floatY 7.2s ease-in-out infinite;
}
/* ふわふわアニメーション */
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}


	


/*========================================================================================
背景の設定
========================================================================================*/

/* 各セクションの背景ラッパー（相対位置基準） */
.section {
  position: relative;
  z-index: 0;
}

.main-bg-01 .main-bg-02 .main-bg-03 .main-bg-04 .main-bg-05
{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  z-index: 0;
}

/*ヘッダーからAbout*/
.main-bg-01{
	position: relative;
	z-index: 1;
	background: linear-gradient(
    to bottom,
    #ffffff 0%,       /* 白の開始位置 */
    #ffffff 40%,      /* 白の終了位置 */
    #F2E6F1 50%      /* 紫の終了位置 */
  );
}

.main-bg-02{
	background:#F2E6F1;	
}

.main-bg-04{
	background:#CBEAFF;	
}




/* 各背景パーツの共通スタイル */
.bg-layer{ /*上中央配置*/
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size:  contain;
  background-position: center top;
  z-index: 1;
  pointer-events: none;
}

.bg-layer-01{ /*上中央固定配置*/
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size:  contain;
  background-position: center top;
  z-index: 1;
  pointer-events: none;
}


.bg-layer-02 { /*右下配置固定*/
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size:  contain;
  background-position: right bottom;
  z-index: 1;
  pointer-events: none;
}

.bg-layer-03 { /*右中配置*/
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size:  contain;
  background-position: right center;
  z-index: 1;
  pointer-events: none;
}

.bg-layer-04 { /*下中央配置固定*/
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size:  contain;
  background-position: center bottom;
  z-index: 1;
  pointer-events: none;
}

.bg-layer-05 { /*左中配置*/
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size:  contain;
  background-position: left center;
  z-index: 1;
  pointer-events: none;
}

.bg-layer-06 { /*左下配置*/
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size:  contain;
  background-position: left bottom;
  z-index: 1;
  pointer-events: none;
}

.bg-layer-07 { /*左上配置*/
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size:  contain;
  background-position: left top;
  z-index: 1;
  pointer-events: none;
}


.bg-layer-08{ /*右上固定配置*/
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size:  contain;
  background-position: right top;
  z-index: 1;
  pointer-events: none;
}

.bg-layer-09{ /*中央固定配置*/
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size:  contain;
  background-position: center center;
  z-index: 1;
  pointer-events: none;
}




/* 各イラスト背景を個別設定 =======================*/

/* 1. 最大オーバーフロー量を定義 */
:root {
  --max-overflow: 200px;    /* はみ出し量の上限 */
  --overflow-base: 1440px;  /* 幅がこの値のときにオーバーフロー0 */
}

/*メインビジュアル =======================*/

.bg-layer-mv-flw-01 {
    top: 0;
    right: 0;
    height: 11vw;
  background-image: url("../../../assets/images/img-bg-ring-01-ur.svg");
  z-index: 2;
	animation-delay: 2s;
}
.bg-layer-mv-flw-02 { 
    top: 25vw;
    right: 0;
    height: 36vw;
    max-height: 580px;
  background-image: url("../../../assets/images/img-bg-ring-01-ml.svg");
  z-index: 2;
	animation-delay: 1s;
}
.bg-layer-mv-flw-03 {
    top: 22vw;
    right: 0;
    height: 35vw;
    max-height: 550px;
  background-image: url("../../../assets/images/img-bg-ring-01-mr.svg");
  z-index: 2;
	animation-delay:  0.2s;
}

.bg-layer-mv-top {
    top: 0;
    left: 0;
    height: 54vw;
	max-height: 281px;
  background-image: url("../../../assets/images/img-bg-head-01.png");
  z-index: 2;
	animation-delay:  2.2s;
}

.bg-layer-mv-middle {display: none;
}

.bg-layer-mv-middle-pc {
    top: 680px;
	right:0;
	height: 60vw;
    max-height: 710px;
    left: 8vw;
  background-image: url("../../../assets/images/img-bg-head-02.png");
  z-index: 1;
	animation-delay:  3.5s;
}

.bg-layer-mv-bottom {
    top: 640px;
    left: 0;
    height: 140vw;
    max-height: 1530px;
  background-image: url("../../../assets/images/img-bg-head-03.svg");
	background-size: cover;
  z-index: 0;
}

/*performers =======================*/


.bg-layer-pfm-flw-01 {
    bottom: 48vw;
    left: 0;
    height: 46vw;
	max-height: 620px;
  background-image: url("../../../assets/images/img-bg-ring-02-ml.svg");
  z-index: 3;
}

.bg-layer-pfm-top {
    bottom: 0;
    right: 0;
    height: 29vw;
	max-height: 1200px;
  background-image: url("../../../assets/images/img-bg-pfm-02.svg");
  z-index: 2;
}

.bg-layer-pfm-middle {
    bottom: 150px;
    height: 78vw;
    right: 0;
  background-image: url("../../../assets/images/img-bg-pfm-01.svg");
  z-index: 1;
}

.bg-layer-pfm-bottom {
	bottom: 1350px;
    right: 0;
    height: 17vw;
	max-height: 215px;
  background-image: url("../../../assets/images/img-bg-pfm-03.svg");
  z-index: 0;
}


/*archives =======================*/


.bg-layer-arc-flw-01 {
    top: -52vw;
    right: 0;
    height: 35vw;
  background-image: url("../../../assets/images/img-bg-arc-04.svg");
  z-index: 3;
}

.bg-layer-arc-flw-02 {
	bottom: 58vw;
    left: 0;
    height: 46vw;
  background-image: url("../../../assets/images/img-bg-ring-02-ml.svg");
  z-index: 3;
}

.bg-layer-arc-top {
    top: -46vw;
    right: 0;
    height: 52vw;
  background-image: url("../../../assets/images/img-bg-arc-02.svg");
	    background-size: cover;
  z-index: 2;
}

.bg-layer-arc-middle {
    top: 0;
    height: 78vw;
    right: 0;
  background-image: url("../../../assets/images/img-bg-arc-01.svg");
  z-index: 1;
}
.bg-layer-arc-bottom {
	bottom: 0;
    right: 0;
    height: 45vw;
  background-image: url("../../../assets/images/img-bg-arc-03.svg");
  z-index: 0;
}


/*message =======================*/

.bg-layer-message-top {
    top: 0;
    left: 0;
    height: 15vw;
	max-height: 185px;
  background-image: url("../../../assets/images/img-bg-message-01.svg");
  z-index: 2;
}


/*goods =======================*/


.bg-layer-goods-flw-01 {
	top: -17vw;
    right: calc(-1 * var(--overflow)) ;
	 /* overflow をビューポート幅に応じて算出 */
  --overflow: clamp(
    0px,
    calc((var(--overflow-base) - 100vw) * 1),
    var(--max-overflow)
  );
    height: 1115px;
  background-image: url("../../../assets/images/img-bg-goods-02.svg");
  z-index: 3;
}

.bg-layer-goods-flw-02 { 
    top: 300px;
    left: 40px;
    height: 512px;
    max-height: 808px;
    background-size: auto;
  background-image: url("../../../assets/images/img-bg-goods-01.svg");
  z-index: 999;
}

.bg-layer-goods-flw-03 {
	display: none;
}

.bg-layer-goods-bottom {
        bottom: 0;
        right: 0;
        height: 100vw;
        max-height: 800px;
        background-size: contain;
        background-image: url(../../../assets/images/img-bg-foot-04.svg);
        z-index: 0;
        animation-delay: 4s;
    }
.main-bg-goods{
	padding-bottom: 350px;
}

/*footer =======================*/


.bg-layer-footer-flw-01 {
    top: -40vw;
    left: calc(-1 * var(--overflow)) ;
	 /* overflow をビューポート幅に応じて算出 */
  --overflow: clamp(
    0px,
    calc((var(--overflow-base) - 100vw) * 1),
    var(--max-overflow)
  );
    height: 90vw;
    max-height: 1190px;
  background-image: url("../../../assets/images/img-bg-foot-03.svg");
  z-index: 2;
}
.bg-layer-footer-top {
    bottom: 650px;
    right: 0;
    height: 100vw;
    max-height: 880px;
    background-size: cover;
  background-image: url("../../../assets/images/img-bg-foot-02.png");
  z-index: 3;
}

.bg-layer-footer-mid {
    top: 0;
    right: 0;
    height: 100vw;
    max-height: 800px;
    background-size: contain;
  background-image: url("../../../assets/images/img-bg-foot-04.svg");
  z-index: 1;
}

.bg-layer-footer-bottom {
	bottom: 0;
    right: 0;
    height: 100vw;
    max-height: 970px;
    background-image: url(../../../assets/images/img-bg-foot-01.svg);
    background-size: cover;
    z-index: 0;
}

/* ゆっくり揺れるアニメーション */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* コンテンツ本体は重ねて表示 */
.main-content {
  position: relative;
  z-index: 10;
}



/* ======================
   コンテンツ
====================== */
.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
.section {/*
  padding: 60px 0;*/
}

/* ======================
  Header section
====================== */
/* メニューボタン */
.menu-btn {
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 999;
  width: 30.3px;
  height: 18.5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end; 
  transition: transform 0.6s ease;
}

.menu-btn span {
  height: 3px;
  background: #000;
  border-radius: 1.5px;
  transition: 0.3s;
  transform-origin: center right;
}

.menu-btn span:nth-child(1) {
  width: 100%;
}
.menu-btn span:nth-child(2) {
  width: 80%;
}
.menu-btn span:nth-child(3) {
  width: 60%;
}

.menu-btn.open {
  transform: rotate(360deg);
}

.menu-btn.open span {
  background: #fff;
}


.menu-btn.open span:nth-child(1),
.menu-btn.open span:nth-child(2),
.menu-btn.open span:nth-child(3) {
  transform: none;
  opacity: 1;
}

.global-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.82);
  color: #fff;
  display: flex;
  flex-direction: column;
	padding: 98px 40px;
  transition: right 0.4s ease;
	text-align: right;
  z-index: 9999;
	
	
  overflow-y: auto;        /* 縦スクロール有効化 */
  -webkit-overflow-scrolling: touch;  /* iOS用スムーズスクロール */
}

.global-nav.active {
  right: 0;
}

.global-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
font-family: "futura-pt-bold", sans-serif;
font-weight: 700;
font-style: normal;
}

.global-nav ul li {
  margin: 10px 0;
}

.global-nav ul li a {
  color: #fff;
    font-size: 1.45rem;
  font-weight: bold;
  text-decoration: none;
  transition: opacity 0.2s;
}

.global-nav ul li a:hover {
  opacity: 0.7;
}

.navi-logos{
	margin: 0 auto;	
}
.navi-logos img{
	margin: 17px 0;
	display: inline;
}
.navi-logos-radiko{
	text-align: right;
}
.navi-logos-radiko img{
	display: inline;
	margin: 80px 0 30px 0;
	max-width: 144px;
}

@media (min-width: 769px) {
	
	.header-inner{
  margin: 0 auto;
	}
	
  .menu-btn {
    display: none;
  }

  .global-nav {
    position: static;
    background: transparent;
    height: auto;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    color: inherit;
    right: auto;
	padding: 54px 40px;
	  font-size: 1.45rem;
  }

  .global-nav ul {
    display: flex;
    gap: 30px;
  }
	
.global-nav ul li {
  margin: 0;
}

  .global-nav ul li a {
    color: #000;
    font-size: 1.45rem;
  }
}
@media (max-width: 768px) {
  .global-nav ul li {
    font-size: 1.45rem;
	  line-height: 1.8;
  }
}

/*
スクロールボタン MV下
*/
.scroll-btn {
  position: absolute; 
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 70px;
  height: 70px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  font-weight: bold;
  font-size: 12px;
  color: #000;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s;
}

.scroll-btn:hover {
  background-color: #000;
  color: #fff;
}

.scroll-btn:hover .scroll-icon {
  transform: translateY(4px);
}

/* スクロールボタンPC */
.scroll-icon {
  font-size: 14px;
  transition: transform 0.3s;
}

/* スクロールボタンSP */
@media (max-width: 767px) {
  .scroll-btn {
    width: 50px;
    height: 50px;
    font-size: 8px;
	  line-height: 14px;
  }

  .scroll-icon img {
	  height: 15px;
  }
}

.cont-inner{
	max-width: 1000px;
	margin: 0 auto;
}

/* ================================
   TOPページ　MV周辺
================================ */
.top-section{
	padding: 0;
	margin-bottom: 225px;
}
.top-radiko{
	width: 100%;
	max-width: 1000px;
	text-align: right;
	margin: 0 auto;
}

.top-radiko img{
	display: inline;
	max-width: 115px;
}

.container-top{
	width: 100%;
	max-width: 730px;
	margin: 0 auto;
	padding: 130px 0 65px
}
.main-logo {
  display: block;
  margin: 0 auto 65px; /* 下に65pxのスペース */
}


/* ================================
   ABOUTセクション全体
================================ */
.about-section {
  display: flex;
  justify-content: center;
	padding-bottom: 135px;
}

.about-box-wrapper {
  position: relative; 
  max-width: 1000px;
  width: 90%;
}

@media (max-width: 768px) {
	.about-section {
  padding: 5rem 40px;
}
.about-box-wrapper {
  width: 100%;
}
}

/* ------------------------
   回転見出し（白枠外に表示）
------------------------ */
.about-rotate-wrapper {
  position: absolute;
  top: 0;
  left: 96.9%; 
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 10;
  pointer-events: none;
  transform: rotate(90deg) translateX(-15%);
  transform-origin: bottom left;
  white-space: nowrap;
	line-height: normal;
}

.rotate-title {
  font-size: 8.75rem;
  color: #000;
  letter-spacing: normal;
	font-family: "futura-pt-bold", sans-serif;
font-weight: 700;
font-style: normal;
	

}

.rotate-time {
  font-size: 2.1rem;
	font-weight: bold;
  padding: 0 0.6em;
  border-radius: 4px;
  color: #000;
}


	
.rotate-title-sp{
	display: none;
}

.about-sp{
	
}

/* PCのみ改行 */
.br-sp-only {
  display: none;
}

/* SPのみ改行*/
@media (max-width: 768px) {
  .br-sp-only {
    display: inline;
  }
}

.br-pc-only {
  display: inline;
}
@media (max-width: 768px) {
  .br-pc-only {
    display: none;
  }
}

/* ------------------------
   白枠と装飾線
------------------------ */
.about-box {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 6.35rem 2rem;
  position: relative;
  box-sizing: border-box;
  z-index: 1;
  border-radius: 1rem;
}

.about-content {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 2;
  color: #000;
  text-align: center;
}

.about-line {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* ==== TOP ==== */
.about-line-top {
  top: 15px;
  left: 15px;
  right: 15px;
  height: 0;
}
.about-line-top::before,
.about-line-top::after {
  content: "";
  position: absolute;
  top: 0;
  height: 3px;
  background: black;
}
.about-line-top::before {
  left: 5.3%;
  width: 15.2%;
}
.about-line-top::after {
  left: 50.5%;
  width: 37.9%;
}

/* ==== BOTTOM ==== */
.about-line-bottom {
  bottom: 15px;
  left: 15px;
  right: 15px;
  height: 0;
}
.about-line-bottom::before,
.about-line-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 3px;
  background: black;
}
.about-line-bottom::before {
  left: 21.3%;
  width: 13.6%;
}
.about-line-bottom::after {
  left: 69.1%;
  width: 13.6%;
}

/* ==== LEFT ==== */
.about-line-left {
  top: 15px;
  bottom: 15px;
  left: 15px;
  width: 0;
}
.about-line-left::before,
.about-line-left::after {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  background: black;
}
.about-line-left::before {
  top: 38%;
  height: 20.4%;
}
.about-line-left::after {
  top: 76.9%;
  height: 18.6%;
}

/* ==== RIGHT ==== */
.about-line-right {
  top: 15px;
  bottom: 15px;
  right: 15px;
  width: 0;
}
.about-line-right::before {
  content: "";
  position: absolute;
  right: 0;
  width: 3px;
  top: calc(100% - 814px); /* 635 + 179 */
  height: 635px;
  background: black;
}

.about-line-right::before {
  top: 31.5%;
  height: 57.5%;
}

.about-line::before,
.about-line::after {
  border-radius: 2px;
}


/* ======================
Performer Section
====================== */
.perform-wrapper{
	width: 100%;
	padding: 0 !important;
	margin: 0 auto;
	margin-bottom: 50px;
    position: relative;
    left: -8px;
}

.performers-box-wrapper {
  position: relative; 
  max-width: 1000px;
	margin: 0 auto;
  width: 90%;
}


.icon-sns-prof{
		width: 24px;
		margin: 0.5rem;
	}
	

.title-pfm{
  font-size: 8.75rem;
  color: #000;
  letter-spacing: normal;
	font-family: "futura-pt-bold", sans-serif;
font-weight: 700;
font-style: normal;
}

.text-performer{
	font-size: 1rem;
	font-weight: bold;
}

.text-mckana{
	color: #DE5994;
	font-size: 1.15rem;
	font-weight: bold;
}

.performer-prof{
	margin-bottom: 75px;
}



/* ================================
   ARCHIVES　セクション全体
================================ */
.archives-section {
  justify-content: center;
  padding-bottom: 670px;
	z-index: 0;
}

.archives-box-wrapper {
  position: relative; 
  max-width: 1000px;
	margin: 0 auto;
  width: 90%;
}

.archives-content{
	padding-top: 60px;
}

@media (max-width: 768px) {
	.archives-section {
  padding: 5rem 40px;
}
}

/* ------------------------
   回転見出し（枠外に表示）archives
------------------------ */
.archives-rotate-wrapper {
  position: absolute;
  top: 0;
  left: 4rem; 
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  z-index: 10;
  pointer-events: none;
}

.rotate-title-arc {
  transform: rotate(90deg);
  transform-origin: top left;
  white-space: nowrap;
}

.rotate-title-arc {
  font-size: 8.75rem;
  color: #000;
  letter-spacing: normal;
	font-family: "futura-pt-bold", sans-serif;
font-weight: 700;
font-style: normal;
}

/*アーカイブ一覧表示*/

.archives-box{
	padding-top: 225px;
}

/* ARCHIVES セクションのカスタムスタイル */
.archive-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px dashed #aaa;
  margin-bottom: 2rem;
}

.archive-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  flex-shrink: 0;
}

.archive-content {
  flex-grow: 1;
  text-align: left;
}

.archive-date {
  font-size: 1rem;
  color: #dc3545;
  margin-bottom: 0.25rem;
	font-weight: 600;
}

.archive-vol {
  font-size: 1rem;
  font-weight: bold;
  color: #A3BF2E; /* 黄緑 */
  margin-bottom: 0.25rem;
	padding-left: 1.2rem;
}
.archive-name {
  font-size: 1.45rem;
  margin-bottom: 0.25rem;
	font-weight: bold;
	padding-left: 1.2rem;
}


.archive-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.archive-tag {
  display: inline-block;
  background: #2CC43D;
  color: #fff;
  font-size: 0.7rem;
  padding: 0.1rem 1rem;
  border-radius: 3px;
  margin-bottom: 0.25rem;
	font-weight: bold;
}

.archive-theme {
  font-size: 1.45rem;
  font-weight: bold;	
}

.archive-thumb img {
  width: 163px;
  height: auto;
  object-fit: cover;
}

.archive-row {
  border-bottom: 1px dashed #aaa;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
}

.clip-hexa{
	width: 163px;;
	clip-path:path('M116.48,0a10,10,0,0,1,8.658,5l34.97,60.5a10,10,0,0,1,0,10.009L125.138,136a10,10,0,0,1-8.658,5H46.52a10,10,0,0,1-8.658-5L2.893,75.5a10,10,0,0,1,0-10.009L37.862,5A10,10,0,0,1,46.52,0Z');
}

.archive-vol.vol-highlight {
  color: #7ac943;
  font-size: 1rem;
}



/*
MOREボタン MV下
*/
.more-btn {
  position: absolute; 
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 70px;
  height: 70px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: bold;
  font-size: 12px;
  color: #000;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s;
}

.more-btn:hover {
  background-color: #000;
  color: #fff;
}

.more-btn:hover .more-icon {
  transform: translateY(4px);
}

/* archive一覧ボタンPC */
.more-icon {
  font-size: 14px;
  transition: transform 0.3s;
}

.link-archive-sp{
	padding: 30px 0 50px;
}

/*　archive一覧ボタンSP */
@media (max-width: 768px) {
  .more-btn {
    width: 70px;
    height: 70px;
    font-size: 12px;
  }

  .more-icon {
    font-size: 12px;
  }
	
.link-archive-sp{
	padding: 10px 0 80px;
}
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
	.archive-text{
		text-align: right;
	}
	.d-flex{
    justify-content: space-around;
	}
}
/*radiko紹介*/
.archives-box-radiko{
	margin: 0 auto;
	width: 100%;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.75;
	margin-top: 75px;
}
.radiko-archives{
	margin-top: 65px;
}
	
.bnr-radiko-archive-sp {
  text-align: center;
  margin-top: 1.5rem;
}

.bnr-radiko-archive-sp img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* ======================
   Footer section
====================== */
#footer {
  background: #fff;
  text-align: center;
  padding: 60px 0 100px;
  position: relative;
}

.footer-nav a,
.footer-nav a li {
	font-size: 1.45rem;
  color: #fff;
}


.footer-inner{
	max-width: 1000px;
	margin: 0 auto;
    position: relative;
    z-index: 5;
}
.footer-logo {
  text-align: center;
    margin: 0 auto;
    max-width: 610px;
    padding-bottom: 635px;
    position: relative;
    top: -5vw;
}
.footer-logo img {
  width: 100%;
  max-width: 610px;
  height: auto;
}

.bnr-foot{
	padding: 0 0 1.25rem;
}



/*common-footer*/

.footer-logo-common {
  text-align: center;
	margin: 0 auto;
	max-width: 610px;
    padding-bottom: 700px;
	padding-top: 0;
}
.footer-logo-common img {
  width: 100%;
  max-width: 610px;
  height: auto;
}
/*common-footer ここまで*/

.footer-nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 60px;
font-family: "futura-pt-bold", sans-serif;
font-weight: 700;
font-style: normal;
}
.footer-nav ul li a {
  color: #fff;
  font-size: 1.45rem;
}
.footer-logos {
  display: flex;
    justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

.footer-logos img {
  max-width: 100%;
    max-width: 287px;
  height: auto;
}

.broadcast-time{
	font-size: 1.45rem;
	font-weight: bold;
	text-align: right;
}
.copyright {
  font-size: 1.45rem;
  margin-top: 85px;
	font-family: "futura-pt-book", sans-serif;
font-weight: 400;
	text-align: center;
	color: #FFF;
	margin-bottom: 320px;
}


/*スクロールボタン　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/	

.scroll-top {
  position: fixed;
  bottom: 60px;
  right: 50px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}


.scroll-top a {
         display: inline-block;
        background: #fff;
        color: #000;
        border: solid 1px #000;
        text-align: center;
        text-decoration: none;
        font-size: 31px;
        width: 63px;
        height: 63px;
        line-height: 57px;
        border-radius: 50%;
        transition: background 0.3s;
}

.scroll-top a:hover {
  background: #333;
}



/* footer 到達時に追加する .visible クラスはそのまま残してOK */
.scroll-top.visible {
  /* ここに、footer到達時のスタイルだけ書く */
  opacity: 1;
  pointer-events: auto;
}


/* ======================
   SP表示
====================== */
@media (max-width: 767px) {
}



/* ======================
Messaga Section
====================== */

.message-section{
	padding-bottom: 105px;
	background: #CBEAFF;
	z-index: 0;
}

.msg-wrapper {
	width: 90%;
	padding: 0 !important;
	margin: 0 auto;
	max-width: 1000px;
	text-align: right;
}

.msg-box-wrapper {
  position: relative; 
  max-width: 1000px;
	margin: 0 auto;
  width: 90%;
	text-align: 
		right;
	font-size: 1.1rem;
    font-weight: bold;
    line-height: 2;
}

.title-msg{
  font-size: 8.75rem;
  color: #000;
  letter-spacing: normal;
	font-family: "futura-pt-bold", sans-serif;
font-weight: 700;
font-style: normal;
}

.text-msg{
	font-size: 14px;	
}

.msg-desc{
	text-align: right;
}

/*
 メッセージ送信ボタン
*/
.message-btn {
  margin-top: 30px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #009EFF;
  color: #fff;
  font-size: 1.45rem;
  font-weight: bold;
  height: 104px;
  padding: 0 2rem;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  max-width: 320px;
}

/* メッセージ送信 矢印*/
.message-btn .arrow {
  margin-left: 1rem;
    position: absolute;
    background-position: right center;
    right: 40px;
  background: #fff;
  color: #009EFF;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  line-height: 41px;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
}

/* メッセージボタン 白線*/
.message-btn .line {
  position: absolute;
  background: #fff;
  border-radius: 2px;
}

/* ボタン内白線 上 */
.message-btn .line-top {
  top: 10px;
  right: 10px;
  width: 97px;
  height: 4px;
  background: #fff;
  border-radius: 2px;
  position: absolute;
}

.message-btn .line-top::after {
  content: '';
  position: absolute;
  right: 102.5px; /* 97px + 5px */
  width: 7.5px;
  height: 4px;
  background: #fff;
  border-radius: 2px;
}

/* ボタン内白線  下 */
.message-btn .line-bottom {
  bottom: 10px;
  left: 10px;
  width: 92px;
  height: 4px;
}
.message-btn .line-bottom::after {
  content: '';
  position: absolute;
  left: 97px;
  width: 7.5px;
  height: 4px;
  background: #fff;
  border-radius: 2px;
}

/* ボタン内白線  左 */
.message-btn .line-left {
  top: 10px;
  left: 10px;
  width: 4px;
  height: 43px;
}

/* ボタン内白線 右 */
.message-btn .line-right {
  bottom: 10px;
  right: 10px;
  width: 4px;
  height: 43px;
}



@media (max-width: 768px) {
  .message-btn {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
	padding: 0 2.8rem;
	font-size: 1.45rem;
	  
  }
}
@media (min-width: 769px) {
  .message-btn {
    max-width: 637px;
  font-size: 2.14rem;
  }
	.sp-only{
		display: none;
	}
.message-btn .arrow {
	font-size: 2.14rem;
  width: 45px;
  height: 45px;
  line-height: 45px;
	}
}




/* ======================
GOODS Section
====================== */

.goods-wrapper {
	width: 90%;
	padding: 0 !important;
	margin: 0 auto;
	max-width: 1000px;
}

.goods-box-wrapper {
  position: relative; 
  max-width: 1000px;
	margin: 0 auto;
  width: 90%;
	font-size: 1.1rem;
    font-weight: bold;
    line-height: 2;
}

.title-goods{
  font-size: 8.75rem;
  color: #000;
  letter-spacing: normal;
	font-family: "futura-pt-bold", sans-serif;
font-weight: 700;
font-style: normal;
	line-height: 1.2;
}

.text-goods{
	font-size: 14px;	
}



.goods-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.goods-item {
  position: relative;
  width: 300px;
}

.goods-img {
  width: 100%;
  height: auto;
  display: block;
}

.goods-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 250px;
  height: auto;
}
.goods-images-wrapper {
  position: relative;
  width: 100%;
  height: 720px; /* 必要に応じて調整 */
}

/* 各ギフト配置 */
.gift-item {
  position: absolute;
}

/* テキスト画像に傾き追加 */
.gift-label {
  position: absolute;
}

/* ランダム配置用の個別調整-PC */
.gift-1 {
  top: 23px;
  left: -15px;
}
.gift-1 .gift-label { 
    top: 120px;
    left: 276px;
	max-width: 360px;
	transform: rotate(33deg);
}
.gift-1 .gift-img {
  width: auto;
  max-width: 463px;
  height: auto;
}

.gift-2 {
  top: 100px;
    right: -15px;
}
.gift-2 .gift-label {
    top: 10px;
    left: 102px;
    max-width: 325px;
  transform: rotate(-15deg);
}
.gift-2 .gift-img {
  width: auto;
  max-width: 430px;
  height: auto;
}


.gift-3 {
    top: 285px;
    left: 275px;
}
.gift-3 .gift-label {
    top: 200px;
    left: 295px;
    max-width: 360px;
}

.gift-3 .gift-img {
  width: auto;
  max-width: 388px;
  height: auto;
}

/*ページネーションスタイル===================*/
.pagination {
	position: relative;
  text-align: center;
  margin: 40px 0;
}

.pagination .page-numbers {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 4px;
  line-height: 38px;
  border: 2px solid #000;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  color: #000;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* 現在のページ */
.pagination .page-numbers.current {
  color: #ff00b7;         /* ピンク */
  border-color: #ff00b7;
}

/* ホバー時 */
.pagination .page-numbers:hover {
  background-color: #f0f0f0;
}

/* ドット（…） */
.pagination .page-numbers.dots {
  border: none;
  pointer-events: none;
  background: transparent;
  width: auto;
  height: auto;
  line-height: inherit;
}

/* 矢印ボタン（→、≫） */
.pagination .page-numbers.next,
.pagination .page-numbers.last {
  font-size: 1.5rem;
  line-height: 38px;
  padding: 0;
}


/* ---------- ---------- ---------- ---------- ---------- 
SPサイズ対応  まとめ
 ---------- ---------- ---------- ---------- ---------- */
@media screen and (max-width: 768px) {
	
	/*MV*/
	.main-logo{
		margin: 0 auto 10vw;
	}
	
	.top-radiko{
		display: none;
	} 
	.top-section{
	padding: 0;
	margin-bottom: 265px;
}
	.container-top{
	margin: 0 auto;
		padding: 150px 45px 0px;
}
	
/*About------------------------------*/
	
  .about-box {
    background: none !important;
    padding: 0 !important;
  }

	  .about-line {
    display: none !important;
  }

  .about-rotate-wrapper {
    transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-end;  
    text-align: right;
    margin-bottom: 2rem;
	  top: -8.5rem;
	  right:0;
	  
  }

  .rotate-title {
		display: none !important;
  }
	
	.rotate-title-sp{
    transform: none !important;
    font-size: 4.6rem;
    line-height: 1;
    letter-spacing: normal;
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-style: normal;
    display: flex;
    justify-content: flex-end;
		position: relative;
		right: 40px;
		top:9px;
	}

  .rotate-time {
    transform: none !important;
    font-size: 1.45rem;
    font-weight: bold;
    color: #000;
    padding: 0;
    margin-top: 0.5rem;
    position: static !important;
    text-align: right;
    line-height: 1.5;
  }

  .about-content {
    padding: 0;
    font-size: 3.6vw; 
    line-height: 2;
    text-align: left;
  }
	
/*  PERFORMERS ------------------------------------------------------*/
	
.performer-prof{
	padding: 0 ;
}
	
	.performer-prof p{
		font-size: 1.15rem;
		font-weight: bold;
		line-height: 2;
	}
	
	.icon-sns-prof{
		width: 39px;
		margin: 0.65rem;
	}
	
.title-pfm{
  width: 100vw;
  margin: 0;
  padding: 0;
  font-size: 16.5vw;
  text-align: center;
  line-height: 1;
  overflow-wrap: break-word;
	}
	
	.title-mc-sp{
		font-size:1.1rem;
	}
	
	
.perform-wrapper{
	width: 110%;
	margin: 0 auto;
	margin-bottom: 50px;
    position: relative;
    left: -1.5vw;
	white-space: nowrap;
}
	
.performers-box-wrapper {
  width: 100%;
	padding: 0 40px 200px;
}
	
  .performers-box-wrapper .col-12.col-md-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .performers-box-wrapper img.img-fluid {
    width: 80%;
    max-width: 290px;
    height: auto;
  }

  .performers-box-wrapper .d-flex.justify-content-center {
    justify-content: center;
    flex-wrap: wrap;
  }
	
	
/*アーカイブタイトル------------------------------*/
	.archives-box {
    padding-top: 50px;
	}
	
.archives-box-wrapper{
		width: 100%;
        margin-bottom: 75vw;
	}
	
	
	
/* ARCHIVES セクションのカスタムスタイル */
.archive-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

	.archive-block{
		margin-bottom: 2.5rem;
	}
	/* ---------*/
	
	.archives-rotate-wrapper{
    position: static !important;
		margin-left: -50px;
    transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;  
    text-align: left;
	}
	
  .rotate-title-arc {
    transform: none !important;
    font-size: 16vw;
    letter-spacing: normal;
	  text-align: left;
  }
	
	/*radiko 告知*/
　　.archives-box-radiko{
	text-align: left;
	font-size: 0.985rem;
	}
	
	.bnr-radiko-archive-sp {
  text-align: center;
  margin-top: 1.5rem;
}

.bnr-radiko-archive-sp img {
  display: inline-block;
  width:277px;
  height: auto;
}
.radiko-desc{
	text-align: left;
	line-height: 1.8;
}
	
.radiko-archives{
	margin-top: 45px;
}
	
	
/*メッセージ関連------------------------------*/
	.msg-wrapper{
		width: 100%; 
	}
.title-msg{
  width: 100vw;
  margin-bottom: 60px;
  padding: 0;
  font-size: 4.6rem;
  text-align: left;
  line-height: 1;
  overflow-wrap: break-word;
        position: relative;
        left: -1.5vw;
	}
	
	.title-mc-sp{
		font-size:1rem;
	}
	.msg-box-wrapper{
    font-size: 1.1rem;
	text-align: left;
		width: 100%;
		padding: 0 40px;
	}
	
/*グッズ関連------------------------------*/
	.goods-wrapper{
		width: 100%;
	}
.title-goods{
  width: 100vw;
  margin-bottom: 60px;
  padding: 0;
  font-size: 4.6rem;
  text-align: left;
  line-height: 1;
  overflow-wrap: break-word;
        position: relative;
        left: -1.5vw;
	}
	.title-mc-sp{
		font-size:1.28rem;
	}
  .goods-title {
    font-size: 2.5rem;
  }

  .goods-description {
    font-size: 0.95rem;
  }

  .goods-items {
    flex-direction: column;
    align-items: center;
  }
	
	.goods-box-wrapper{
        font-size: 1.1rem;
        text-align: left;
        width: 100%;
        padding: 0 40px;
	}
	.goods-images-wrapper {
		height: 1780px;
	}
	

/* ランダム配置用の個別調整-SP */
.gift-1 {
   top: 20px;
   left: -140px;
}
.gift-1 .gift-label {
  top: 285px;
  left: 135px;
  transform: rotate(0deg);
}

.gift-2 {
  top: 550px;
  right: -120px;
}
.gift-2 .gift-label {
  top: 250px;
  left: -10px;
  transform: rotate(0deg);
}

.gift-3 {
	top: 960px;
    left: -90px;
}
.gift-3 .gift-label {
  top: 315px;
  left: 100px;
  max-width: 303px;
}
	
	
/* 各イラスト背景を個別設定 =======================*/

/*メインビジュアル =======================*/
	    .about-section {
        padding: 9.5rem 40px 315px;
  background-color: rgba(255, 255, 255, 0.7);
    }

.main-bg-01{
	position: relative;
	z-index: 1;
	background: linear-gradient(
    to bottom,
    #ffffff 0%,       /* 白の開始位置 */
    #ffffff 20%,      /* 白の終了位置 */
    #F2E6F1 30%      /* 紫の終了位置 */
  );
}

.bg-layer-mv-flw-01 {
        bottom: 10vw;
        right: 0;
        height: 65vw;
	display: none;
	
}
.bg-layer-mv-flw-02 { 
        top: 105vw;
        right: 0;
        height: 62vw;
}
.bg-layer-mv-flw-03 {
        top: 72vw;
        right: 0;
        height: 67vw;
}

.bg-layer-mv-top {
    top: 0;
    left: 0;
    height: 54vw;
	max-height: 281px;
  background-image: url("../../../assets/images/img-bg-head-01-mb.png");
  z-index: 2;
  animation-delay: 0s;
}

	.bg-layer-mv-middle-pc{
		display: none;
	}
	
.bg-layer-mv-middle {
  background-image: url("../../../assets/images/img-bg-head-02.png");
	display: block;
    top: 435px;
	right:0;
	height: 53vw;
    max-height: 600px;
    left: 0;
}

.bg-layer-mv-bottom {
        top: 550px;
        left: 0;
        height: 410vw;
        max-height: 1780px;
  background-image: url("../../../assets/images/img-bg-head-03-mb.svg");
	background-size: cover;
  z-index: 0;
  animation-delay: 4s;
}

/*performers =======================*/
.performers-section {
	padding-top: 95px;}

.bg-layer-pfm-flw-01 {
	display: none;
}

.bg-layer-pfm-top {
    bottom: 0;
    right: 0;
        height: 69vw;
	max-height: 1200px;
  background-image: url("../../../assets/images/img-bg-pfm-02.svg");
  z-index: 2;
  animation-delay: 4s;
}

.bg-layer-pfm-middle {
    bottom: 110px;
    height: 168vw;
    right: 0;
    background-size: cover;
    opacity: 0.18 !important;
}

.bg-layer-pfm-bottom {
	top: 490vw;
        right: 0;
        height: 33vw;
	max-height: 215px;
  background-image: url("../../../assets/images/img-bg-pfm-03.svg");
  z-index: 0;
  animation-delay: 0s;
}


/*archives =======================*/


.bg-layer-arc-flw-01 {
        top: -70vw;
        right: 0;
        height: 65vw;
  background-image: url("../../../assets/images/img-bg-arc-04.svg");
  z-index: 3;
  animation-delay: 0.5s;
}

.bg-layer-arc-flw-02 {
	display: none;
}

.bg-layer-arc-top { 
	top: -75vw;
	right: 0;
    height: 90vw;
  background-image: url("../../../assets/images/img-bg-arc-02-mb.svg");
    background-size: contain;
}

.bg-layer-arc-middle {
    top: 0;
    height: 78vw;
    right: 0;
  background-image: url("../../../assets/images/img-bg-arc-01-mb.svg");
  z-index: 1;
  animation-delay: 2s;
}
.bg-layer-arc-bottom {
    height: 80vw;
        background-size: contain;
  background-image: url("../../../assets/images/img-bg-arc-03-mb.svg");
}


/*message =======================*/

.bg-layer-message-top {
	display: none;
}


/*goods =======================*/
	.goods-section{
		z-index: 1;
	}
	
.main-bg-goods{
	padding-bottom: 0px;
}

.bg-layer-goods-flw-00 {
       top: 370px;
        right: -70px;
        height: 200vw;
        max-height: 1224px;
        background-size: contain;
  background-image: url("../../../assets/images/img-bg-goods-01-mb.png");
  z-index: 99;
  animation-delay: 0.1s;
}
	
.bg-layer-goods-flw-01 {
        top: 360px;
        left: 0;
        height: 570vw;
        max-height: 1870px;
        background-size: cover;
  background-image: url("../../../assets/images/img-bg-goods-03-mb.png");
  z-index: 3;
  animation-delay: 0.5s;
}

.bg-layer-goods-flw-02 { 
	display: none;
}
.bg-layer-goods-flw-03 {
	bottom: 0;
    left: 0;
    height: 300vw;
    max-height: 1750px;
  background-image: url("../../../assets/images/img-bg-goods-03-mb.svg");
  z-index: 3;
  animation-delay: 0.5s;
}

.bg-layer-goods-bottom {
    bottom: 0;
    right: 0;
    height: 100vw;
    max-height: 800px;
    background-size: contain;
  background-image: url("../../../assets/images/img-bg-foot-04-mb.svg");
  z-index: 0;
  animation-delay: 4s;
	}

/*footer =======================*/
	#footer{
		padding: 1rem;
		z-index: 0;
	}
	
	
	.footer-inner{
		padding-top: 70px;
		}
  .footer-nav ul {
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    margin-bottom: 105px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
	  text-align: center;
  }

.footer-logo {
	padding: 0 40px;
    margin-bottom: 455px;
}
	
.footer-logo-common {
	padding: 0 40px;
    margin-bottom: 415px;
}
	
  .footer-nav ul li a {
    color: #fff;
  }

  .footer-logos {
    flex-direction: column;
    gap: 15px;
  }

.broadcast-time{
	text-align: center;
	font-size: 1.15rem;
	}

  .copyright {
    font-size: 0.8rem;
	margin-bottom: 0.5rem;
    margin-top: 5.2rem;
  }
	

.bg-layer-footer-flw-01 {
	display: none;
}
.bg-layer-footer-top {
    bottom: 60rem;
    right: 0;
    height: 100vw;
    max-height: 800px;
    background-size: cover;
  background-image: url("../../../assets/images/img-bg-foot-02-mb.png");
  z-index: 3;
  animation-delay: 4s;
}

.bg-layer-footer-mid {
	display: none;
}

.bg-layer-footer-bottom {
	bottom: 0;
    right: 0;
        height: 1000px;
    background-image: url(../../../assets/images/img-bg-foot-01-mb.svg);
    background-size: cover;
    z-index: 0;
    animation-delay: 0s;
}
	
}/*SPまとめここまで*/

@media (max-width: 767px) {
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .col-xs-12 {
    padding-left: 0;
    padding-right: 0;
  }
}