@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 fonts
----------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');


/*----------------------------------------------------------------
 custom properties
----------------------------------------------------------------*/
:root {
	/* colors */
	--bg-color				: #222;
	--text-color			: #fff;
	--main-color			: #d85558;
	--sub-color				: #444;

	/* width */
	--content-width		: 90vw;

	/* padding */
	--content-padding	: 90px;

	/* font */
	--font-size			: 1.4rem;
	--font-en			: 'Helvetica Light','Arial Light','Helvetica Regular','Arial Regular',Helvetica, Arial,
							'Noto Sans JP',"ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro',"メイリオ", "ＭＳ Ｐゴシック", sans-serif;

}

@media screen and (min-width: 769px) {
:root {
	/* width */
	--content-width		: 740px;
}
}
@media screen and (min-width: 1050px) {
:root {
	/* width */
	--content-width		: 900px;
}
}
@media screen and (min-width: 1200px) {
:root {
	/* width */
	--content-width		: 1180px;
}
}
:root{
  --heading-width: 17.796%;
}


/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	background-color	: var(--bg-color);
	line-height			: 2.142;
	font-size			: var(--font-size);
	font-family			: 'Noto Sans JP',"ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro',"メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
	font-weight			: 400;
	color				: var(--text-color);
}

/* inline element
-----------------------------------------------------*/

/* link
----------------------------------*/
a{
	color				: inherit;
	text-decoration		: underline;
}
a:hover{
	color: var(--main-color);
	text-decoration: none; }

/*-----------------------------------------------------
 class
-----------------------------------------------------*/

/* separater line
-----------------------------------------------------*/
hr.separater{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}
/* br
-----------------------------------------------------*/
@media screen and (min-width: 769px) { .br_sp{ display: none; } }

/* hide
-----------------------------------------------------*/
@media screen and (max-width: 768px) { [data-hide=sp]{ display: none; } }
@media screen and (min-width: 769px) { [data-hide=pc]{ display: none; } }

/* view
-----------------------------------------------------*/
@media screen and (max-width: 768px) { [data-show=sp]{ display: block; } }
@media screen and (min-width: 769px) { [data-show=pc]{ display: block; } }


/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/

/*-----------------------------------------------------
 wrap
-----------------------------------------------------*/
.wrap{
	position			: relative;
}

#wrap{
	width				: 100%;
}
#sp-navi{
	position			: fixed;
	left				: 0;
	top					: 0;
	display				: none;
	padding				: 1px 0 0 0;
	width				: 100vw;
	height				: 100%;
	background			: var(--text-color);
	color				: var(--bg-color);
	opacity				: 0;
}
#sp-navi .navigation{ padding: 1px 0; }

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	position			: relative;
	clear				: both;
}
#header{ padding: 1px 0; }
#navigation{ margin: 0 0 var(--content-padding) 0; }
#footer{ padding: 15px 0; }

/*-----------------------------------------------------
 content
-----------------------------------------------------*/
.content{
	position			: relative;
	clear				: both;
	padding				: 0 0 var(--content-padding) 0;
}

/*-----------------------------------------------------
 container
-----------------------------------------------------*/
.container{
	position			: relative;
	clear				: both;
	margin				: 0 auto;
	width				: var(--content-width);
}

/*-----------------------------------------------------
 column
-----------------------------------------------------*/
@media screen and (min-width: 769px) {
.column{
	position			: relative;
	clear				: both;
	display				: flex;
	flex-direction		: row;
	justify-content		: space-between;
	flex-wrap			: wrap;
}
.column.vertical{ flex-direction: column; }
.column > .heading{
  width: var(--heading-width);
}

.column:not(.vertical)>.main{
	width				: 82.204%;
	padding				: 100px 0 0 0;
}
}


/*-----------------------------------------------------
 common styles
-----------------------------------------------------*/

/* row
-----------------------------------------------------*/
.row>.col:nth-child(odd){ flex: 0 0 21.649%; }
.row>.col:nth-child(even){ flex: 0 0 78.351%; }
@media screen and (min-width: 769px) {
.row{
	display				: flex;
	flex-direction		: row;
	justify-content		: space-between;
}
}

/* logo
-----------------------------------------------------*/
.site-logo{
	margin: 0 0 15px 0;
	padding: 30px 0;
}
.site-logo img	{ width: 64vw; }
@media screen and (min-width: 769px) {
.site-logo{
	margin				: 0 0 15px 0;
	padding				: 50px 0 30px 0;
}
.site-logo img	{ width: 40%; }
}


/* heading
-----------------------------------------------------*/
.heading{ font-family: var(--font-en); }

h2.heading{
	border-top			: 1px solid var(--main-color);
	padding				: 30px 0;
	font-size			: 2rem;
}
@media screen and (min-width: 769px) {
h2.heading{ padding: 40px 0; }
}

/* bullet
-----------------------------------------------------*/
.bullet{
	display				: inline-block;
	min-width			: 70px;
	border-radius		: 15px;
	padding				: 2px 15px 5px 15px;
	background			: var(--sub-color);
	text-align			: center;
	text-decoration		: none;
	line-height			: 1;
	font-size			: 1.2rem;
}
a.bullet:hover{
	color: var(--bg-color);
	background			: var(--text-color);
}

/* button
-----------------------------------------------------*/
.button{
	display				: inline-block;
	border-radius		: 30px;
	padding				: 7px 20px 7px 20px;
	background			: var(--sub-color);
	text-align			: center;
	text-decoration		: none;
	line-height			: 1;
	font-size			: 1.2rem;
}
a.button:hover{
	color: var(--bg-color);
	background			: var(--text-color);
}

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/



/*-----------------------------------------------------
 navigation
-----------------------------------------------------*/
.navigation .navi{ font-family: var(--font-en); }
.navigation .navi a{ text-decoration: none; }
.navigation .navi a:hover{
  opacity: .7;
}
.navigation .navi a:before{ content: "- "; }
.navigation .main-navi{
	margin				: 0 0 10px 0;
	font-size			: 2rem;
}
.navigation .sub-navi{ font-size: 1.4rem; }

/*-----------------------------------------------------
 note
-----------------------------------------------------*/
#note .info-list li{
	list-style			: none;
	margin				: 0 0 30px 0;
}
#note .info-list li:last-child{ margin: 0 0 15px 0; }
#note .info-list li dt{ font-size: 1rem; }
#note .bullet{
	min-width			: 95px;
	padding				: 3px 15px 5px 15px;;
}
#note .row{
	display				: flex;
	flex-direction		: row;
	margin				: 0 0 50px 0;
}
#note .button img{ width: 62px; }
#note a.button:hover img{ filter: brightness(10%); }

@media screen and (min-width: 769px) {
#note .row .heading{
	font-size			: 2rem;
	line-height			: 1;
}
#note .info-list li{ margin: 0 0 25px 0; }
#note .info-list li dl{
	display				: flex;
	justify-content		: flex-start;
	flex-direction		: row;
}
#note .info-list li dl>dt{
	flex				: 0 0 120px;
	font-size			: 1.2rem;
}
}

/*-----------------------------------------------------
 profile
-----------------------------------------------------*/
#profile ruby{ ruby-position: under; }
#profile ruby>rt{
	margin				: 8px 0 0 0;
	font-size			: 1rem;
	font-style			: italic;
}

/* row
-----------------------------------------------------*/
#profile .row{ margin: 0 0 50px 0; }
#profile .row .heading{ margin: 0 0 20px 0; }
@media screen and (min-width: 769px) {
#profile .row{ margin: 0 0 var(--content-padding) 0; }
}

/* logo
-----------------------------------------------------*/
#profile .logo{
	margin				: 20px 0;
	width				: 125px;
}


/*-----------------------------------------------------
 archive
-----------------------------------------------------*/

/* logo
-----------------------------------------------------*/
#archive .index{ font-size: 1rem; }


/* selector
-----------------------------------------------------*/
#archive .selector{ margin: 0 0 50px 0; }

#archive .selector select{
	position			: relative;
	border				: none;
	border-radius		: 10px;
	width				: 200px;
	padding				: 0 30px 0 5px;
	color				: var(--bg-color);
}

#archive .selector>dl{ margin: 0 30px 10px 0; }
#archive .selector>dl ul>li{
	list-style			: none;
	display				: inline-block;
	margin				: 0 3px 0 0;
}
#archive .selector>dl ul>li:last-child{ margin: 0; }

#archive .selector .bullet{ cursor: pointer; }
#archive .selector .bullet.is-checked{
	background			: var(--text-color);
	color				: var(--bg-color);
}
@media screen and (min-width: 769px) {
#archive .selector{ display: flex; }
}
/*-----------------------------------------------------
 archive
-----------------------------------------------------*/

/*-----------------------------------------------------
 emergence entry
-----------------------------------------------------*/
#emergence-entry{
	background: #111;
	padding: 48px 16px;
	border-top: 1px solid rgba(255,255,255,.08);
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.emergence-entry-card{
	display: block;
	color: #eee;
	text-decoration: none;
	max-width: var(--content-width);
	margin: 0 auto;
}
.emergence-entry-date{
	font-size: 1.2rem;
	letter-spacing: .12em;
	opacity: .7;
}
.emergence-entry-title{
	margin-top: 10px;
	font-size: 2.8rem;
	letter-spacing: .08em;
	line-height: 1.1;
}
.emergence-entry-title .en{
	font-size: 1.4rem;
	margin-left: 10px;
	opacity: .65;
}
.emergence-entry-catch{
	margin-top: 12px;
	font-size: 1.3rem;
	line-height: 1.7;
	opacity: .8;
}
@media (max-width: 768px){
	#emergence-entry{ padding: 56px 16px; }
}

/* logo */
#archive .index{ font-size: 1rem; }

/* selector */
#archive .selector{ margin: 0 0 50px 0; }

#archive .selector select{
  border: none;
  border-radius: 10px;
  width: 200px;
  padding: 0 30px 0 8px;
  color: var(--bg-color);
}

#archive .selector>dl{ margin: 0 30px 10px 0; }
#archive .selector>dl ul>li{
  list-style: none;
  display: inline-block;
  margin: 0 3px 0 0;
}
#archive .selector>dl ul>li:last-child{ margin: 0; }

#archive .selector .bullet{ cursor: pointer; }
#archive .selector .bullet.is-checked{
  background: var(--text-color);
  color: var(--bg-color);
}

@media screen and (min-width: 769px) {
  #archive .selector{ display: flex; }
}

/* archive-list 共通 */
#archive .archive-list li{ list-style: none; }
#archive .archive-list .item{ line-height: 1.5; }
#archive .archive-list .tag .bullet{ margin: 0 5px 5px 0; }

/* --- SP（スマホ） --- */
@media screen and (max-width: 768px) {

  #archive .archive-list .index{ display: none; }

  #archive .archive-list .item{
    margin: 0 0 40px 0;
    padding: 0 0 0 70px;
  }

  #archive .archive-list .item ul>li{
    position: relative;
    margin: 0 0 5px 0;
  }

  #archive .archive-list .item ul>li:before{
    content: attr(data-type);
    display: inline-block;
    width: 70px;
    font-size: 1rem;
    position: absolute;
    left: -70px;
    top: 4px;
  }
}
@media screen and (min-width: 769px) {
  /* FIX: PCで最初のitem（例:「103歩のエラー」）が見出し行の下に隠れたため、
     index行のstickyをやめて重なりを解消する。 */
  #archive .archive-list{
    padding-top: 0;
  }

  #archive .archive-list > li.index{
    position: static;
    background: var(--bg-color);
    padding: 10px 0;
    margin: 0 0 10px 0;
    opacity: .8;
  }
}

/* --- PC（表組み）--- */
@media screen and (min-width: 769px) {
   /* tag列のはみ出し対策（PCのみ） */
  #archive .archive-list li .tag{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;            /* bullet間の余白はここで管理 */
  }

  #archive .archive-list .tag .bullet{
    margin: 0 !important; /* 共通の margin をPCだけ無効化 */
    white-space: nowrap;
  }
 

/* Archiveだけcontainer幅を変えていたのを無効化（Profileと揃える） */
#archive .container{
  width: var(--content-width) !important;
}


  /* 見出し行（index） */
  #archive .archive-list > li.index{
    position: static !important;
    background: var(--bg-color);
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    height: auto !important;
  }

  /* 見出し行を通常フローに戻し、重なりを防ぐ */
  #archive .archive-list > li.index ul{
    align-items: center;
    line-height: 1.2;
  }
  #archive .archive-list > li.index ul,
  #archive .archive-list > li.index ul > li{
    position: static !important;
  }

  /* 1行（index/item）の中身をgrid */
  #archive .archive-list > li.index > ul,
  #archive .archive-list > li.item > ul{
    width: 100%;
    display: grid;
    grid-template-columns: 220px 140px minmax(360px, 1fr) 200px 260px;
    column-gap: 24px;
    align-items: center;
  }

  /* 旧CSSの干渉を止める */
  #archive .archive-list > li > ul{ margin: 0; padding: 0; }
  #archive .archive-list > li > ul > li{
    width: auto !important;
    float: none !important;
    display: block;
    min-width: 0;
  }

  /* titleの折り返し */
  #archive .archive-list > li > ul > li.title a{
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* tag列：折り返し */
  #archive .archive-list .tag{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  #archive .archive-list .tag .bullet{ white-space: normal; }

  #archive .archive-list .category .bullet{ min-width: 140px; }

  /* 行間 */
  #archive .archive-list > li.item{ padding: 12px 0; }
  #archive .archive-list .item{ line-height: 1.6; }
}

/*-----------------------------------------------------
 performance slider（sunday と Archive の間）
-----------------------------------------------------*/

/* セクション間の余白 */
#performance{
  padding: 40px 0 30px 0;
}

/* columnレイアウトの「mainが100px下がる」影響を消す */
@media screen and (min-width: 769px) {
  #performance .column:not(.vertical)>.main{
    padding-top: 0;
  }
}

/* 全体（左の赤線 + 写真帯） */
#performance .marquee{
  display: flex;
  align-items: center;
  gap: 28px;
}

/* 左の赤線ブロック（上下線が写真に被らないよう高さを持たせる） */
#performance .marquee__line{
  width: 260px;
  height: 220px;
  padding: 28px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 auto;
}
#performance .marquee__line::before,
#performance .marquee__line::after{
  content: "";
  display: block;
  height: 1px;
  background: var(--main-color);
  width: 100%;
}

/* 写真帯（横1列） */
#performance .marquee__viewport{
  overflow: hidden;
  flex: 1 1 auto;
}

/* ループするトラック（同じ並びを2回入れる前提） */
#performance .marquee__track{
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee 45s linear infinite;
  will-change: transform;
}
#performance .marquee__viewport:hover .marquee__track{
  animation-play-state: paused; /* 触ったら止まる */
}

/* 写真カード */
#performance .marquee__item{
  flex: 0 0 auto;
  width: 420px;
  height: 190px;
  border-radius: 16px;
  overflow: hidden;
}
#performance .marquee__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* 白黒 */
  filter: grayscale(1) contrast(1.05);
  opacity: .92;
  transition: filter .3s ease, opacity .3s ease;
}
#performance .marquee__item img:hover{
  filter: grayscale(0);
  opacity: 1;
}

/* ループ */
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 2回並べた半分まで動かす */
}

/* 画面が狭いとき */
@media (max-width: 1200px){
  #performance .marquee__item{ width: 360px; height: 170px; }
}
@media (max-width: 768px){
  #performance{ padding: 25px 0 20px 0; }
  #performance .marquee{ gap: 16px; }
  #performance .marquee__line{ width: 160px; height: 140px; padding: 18px 0; }
  #performance .marquee__item{ width: 260px; height: 140px; border-radius: 12px; }
}
/* =========================
   赤線：Archive見出しの線だけ残す
   ========================= */

/* Archive 見出し（h2.heading）の線は元のまま使う
   → すでに h2.heading に border-top があるので何もしなくてOK */

   /* 写真が縦にならないよう強制で横並び */
#archive .marquee__track,
#performance .loop-slider .track{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
}
#archive .marquee__item,
#performance .loop-slider .slide{
  flex: 0 0 auto !important;
}
/* performance セクションの見出し線だけ消す */
#performance h2.heading{
  border-top: 0 !important;
}

#performance h2.heading{
  border-top: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* performance 写真を Archive 見出しのA位置まで引き延ばす */
#performance .marquee{
  margin-left: calc(-1 * (17.796% + 28px));
}
/* sunday と performance の間を詰める */
#performance{
  margin-top: -50px;
}