@charset "utf-8";


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*lightbox.cssの読み込み
---------------------------------------------------------------------------*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);


/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}



/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 14px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/

body {
	font-family: "M PLUS 1", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-weight: 300;
	font-optical-sizing: auto;
	letter-spacing: 0.1rem;
	text-indent: 0.1rem;
	-webkit-text-size-adjust: none;
	margin: 0;padding: 0;
	line-height: 2.5;		/*行間*/
	background: #212121;		/*背景色*/
	color: #fff;			/*文字色*/
}

.strongtext{
	font-size: larger;
	font-weight: 500;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li {margin: 0;padding: 0;}
nav ul {list-style: none;}
h1,h2,h3,h4 {font-weight: 400;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ
video {max-width: 100%;}*/

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
strong {font-weight: 500;}

@media only screen and (max-width: 768px) { 
.pcbr {
display: none;
 }
}
@media only screen and (min-width: 768px) { 
.spbr {
display: none;
 }
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #fff;	/*文字色*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	text-decoration: none;
}


/*オープニングの動画
---------------------------------------------------------------------------*/
video {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

#video {
  position: relative;
  z-index: -1;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* 縦向き端末 */
@media (orientation: portrait) {
  #video .landscape { display: none; }
  #video .portrait   { display: block; }
}

/* 横向き端末 */
@media (orientation: landscape) {
  #video .landscape { display: block; }
  #video .portrait  { display: none; }
}

/* ====== スクロールダウン設定 ====== */
.scroll_down {
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.scroll_down::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 80%, rgba(0,0,0,.8) 100%);
}

.scroll_down a {
  display: inline-block;
  position: absolute;
  right: 24px;
  bottom: 0;
  z-index: 2;
  width: 30px;
  padding: 10px 10px 110px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  transition: .2s;
  overflow: hidden;
  margin: auto;
  text-align: center;
}

.scroll_down a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 100px;
  background: #ddd;
  transform: translateX(-50%);
}

.scroll_down a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 100px;
  background: #fff;
  transform: translateX(-50%);
}

.scroll_down a:hover {
  opacity: .6;
}

#type01 a::after {
  animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

/* スクロールアニメーション */
@keyframes sdl01 {
  0% {
    transform: translateX(-50%) scaleY(0);
    transform-origin: 0 0;
  }
  50% {
    transform: translateX(-50%) scaleY(1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: translateX(-50%) scaleY(1);
    transform-origin: 0 100%;
  }
  100% {
    transform: translateX(-50%) scaleY(0);
    transform-origin: 0 100%;
  }
}

	@media screen and (max-width:900px) {
.scroll_down {
  height: 85vh;
}
	}/*追加指定ここまで*/



/*header（ロゴとメニューが入ったブロック）
---------------------------------------------------------------------------*/
header {
	width: 250px;		/*幅*/
	height: 100%;
	padding: 30px 3vw;		/*ヘッダー内の余白。上下、左右への順番。*/
	text-align: center;	/*テキストをセンタリング*/
	background-color: #21212138;
}

/*ロゴ*/
header #logo img {display: block;}
header #logo {
	padding: 0;margin: 0;
}

/*ロゴ下の小文字*/
header #logo span {
	display: block;
	font-size: 0.7rem;	/*文字サイズを70%に*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	header {
		position: fixed;	/*スクロールしても動かないようにする設定*/
		left: 0px;
		top: 0px;
	}

	}/*追加指定ここまで*/

	/*画面の高さが500px以下の追加指定*/
	@media screen and (max-height:500px) {

	header {
		position: absolute;	/*メニューが切れて見えなくならないように、fixedを中止する*/
	}

	}/*追加指定ここまで*/


/*mainブロック（右側のsectionを囲むブロック）
---------------------------------------------------------------------------*/

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	main {
		margin-left: 250px;	/*headerのwidthに合わせる*/
	}

	}/*追加指定ここまで*/


/*main内のh2*/
main h2 {
	font-size: 2.5rem;	/*文字サイズを2.5倍*/
  font-weight: 700;
}

/*main内のh3*/
main h3 {
	font-size: 1.5rem;	/*文字サイズを1.5倍*/
	margin: 0;
}

/*main内のh4*/
.neonText h4 {
	font-size: 1.5rem;	/*文字サイズを1.5倍*/
	font-weight: 700;
	margin: 0;
}

p{
font-size: 1.1em;
font-weight: 400;
}

/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}


/*メニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#menubar ul {
	margin: 1rem 0;	/*メニューブロックの外側に空けるスペース*/
}

/*メニュー一個あたり*/
#menubar nav a {
	text-decoration: none;display: block;
	font-size: 0.8em;
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒のことで0.5は色が50%出た状態。*/
	border: 1px solid rgba(255,255,255,0.3);	/*枠線の幅、線種、色。255,255,255は白のことで0.3は色が30%出た状態。*/
	color: #fff;		/*文字色*/
	padding: 0.1rem;	/*余白*/
	margin: 0.1rem 0;	/*メニューの外側に空けるスペース。上下、左右。*/
	border-radius: 5px;	/*角を丸くする指定*/
}

/*マウスオン次*/
#menubar nav a:hover {
	border: 1px solid rgba(223,21,123,0.9);	/*枠線。透明度を変更して濃くします。*/
  box-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 10px #ff22f7, 0 0 6px #ff22f7, 0 0 10px #ff22f7, 0 0 16px #ff22f7;
}

.moreLinkText {
  display: inline-flex;
  align-items: center;
  line-height: 1;          /* 余白を詰める */
}

/*ホバーしたときに下線矢印も同時に色を変える*/
.moreLinkText:hover .lineArrow  {
  border-bottom: 1px solid  rgba(223,21,123,0.8);
  border-right: 1px solid  rgba(223,21,123,0.8);
}

.moreLinkText:hover {
  color:  rgba(223,21,123,0.9);
}

.lineArrow {
  width: 40px;
  height: 12px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: skew(45deg);
  margin: 0px auto 0;  /* ← 文字との間を詰める */
  display: block;
}



/*900px以下画面でのメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 80px;
	background: rgba(0,0,0,0.8);		/*背景色*/
	animation: animation1 0.2s both;	/*animation1を実行する。0.2sは0.2秒の事。*/
}
.small-screen #menubar ul {
	margin: 3rem;	/*メニューブロックの外側に空けるスペース*/
}
	/*画面幅900px以上の追加指定*/
	@media screen and (max-width:900px) {
	header {
	background-color: transparent;
    }
	}/*追加指定ここまで*/


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 30px;			/*右からの配置場所指定*/
	top: 30px;				/*上からの配置場所指定*/
	padding: 16px 14px;		/*上下、左右への余白*/
	width: 46px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 46px;			/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	background: #212121;	/*背景色*/
	border-radius: 3em;
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1.5px solid #fff;	/*線の幅、線種、色*/
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 20px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}


/*メニュー内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
ul.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 12px; /* ← アイコン間のスペース調整（お好みで） */
}

ul.icons li a {
  display: flex;              /* アイコンをflexアイテムに */
  align-items: center;        /* 上下中央揃え */
  justify-content: center;    /* 左右中央揃え（余白があるとき） */
  text-decoration: none;
  color: inherit;             /* Font Awesomeアイコンの色継承 */
}

ul.icons img {
  display: block;             /* 画像の下にできる隙間対策 */
  height: 20px;               /* widthと合わせておくとより綺麗 */
}

ul.icons i {
	font-size: 20px;	/*Font Awesomeのアイコンサイズ*/
}


/*section
---------------------------------------------------------------------------*/
/*フェード設定*/
.section::before {
	opacity: 0; /* 初期状態では非表示 */
	transition: opacity 1s; /* 1秒かけてフェードイン/フェードアウト */
}
.section.active::before {
	opacity: 1; /* フェードイン状態 */
}
.section.inactive::before {
	opacity: 0; /* フェードアウト状態 */
}

/*section要素*/
section {
	padding: 2vw 5vw;	/*ボックス内の余白。上下、左右への順番。*/
}

/*４つのsectionブロックの共通設定*/
#section1,#About_MITTNESS,#Work,#Interview,#Schedule,#Job_description,#Foam {
	min-height: calc(60dvh - 50px);	/*最低の高さ。100dvhは画面の高さ100%のこと。50pxは下のmarginの値。*/
	margin-bottom: 80px;	/*ボックスの下に空けるスペース*/
	padding: 5vw;			/*ボックス内の余白*/
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	#section1,#About_MITTNESS,#Work,#Interview,#Schedule,#note,#Job_description,#Foam {
		border-radius: 3vw 0 0 3vw;	/*角丸の指定。左上、右上、右下、左下への順番。*/
	}

	}/*追加指定ここまで*/


/*背景画像を置く為の設定*/
#section1::before,#About_MITTNESS::before,#Work::before,#Interview::before,#Schedule::before,#note::before,#Job_description::before,#Foam::before {
	content: '';
	position: fixed;z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*About_MITTNESSの設定*/
#About_MITTNESS {
	background-color: rgba(255, 255, 255, 0.5);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
 
}
#About_MITTNESS::before {
	background: url('../images/About_MITTNESS_sp.webp') no-repeat center center / cover;	/*背景画像の読み込み*/
	 filter: grayscale(20%) brightness(45%); /* フィルターを追加 */
}

/*Workの設定*/
#Work {
  color: #fff;       /* 文字色 */
}

#Work::before {
  background: url('../images/work_pc.webp') no-repeat center center / cover;
  filter: grayscale(60%) brightness(15%); /* フィルターを追加 */
}

.neonText h3 {
  font-size: 3.2rem;
  margin: 0;
  animation: pulsate 1.5s infinite alternate;
  color: #fff;
  text-shadow:
    0 0 1px #fff,
    0 0 1px #fff,
    0 0 12px #df157b,
    0 0 24px #df157b,
    0 0 36px #df157b;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight:700;
  font-style: normal;
}

.mask-bg {
  color: transparent;
  display: inline-block;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}

.mask-bg::after {
  background: linear-gradient(to right,#df157b 0%, #d9468f 50%, #171717 100%);
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateX(-101%); /* ←左の外からスタート */
}

.mask-bg.is-animated {
  color:#fff;
}

.mask-bg.is-animated::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.17, 1);
}

@keyframes mask-bg {
  0% {
    transform: translateX(-101%); /* 左外 */
  }
  40%, 60% {
    transform: translateX(0); /* 全体を覆う */
  }
  100% {
    transform: translateX(101%); /* 右外へ抜ける */
  }
}


@keyframes pulsate {
  100% {
    text-shadow:
      0 0 4px #fff,
      0 0 40px #df157b,
      0 0 80px #df157b,
      0 0 90px #df157b;
  }

  0% {
    text-shadow:
      0 0 2px #fff,
      0 0 10px #bc13fe,
      0 0 45px #bc13fe,
      0 0 55px #bc13fe;
  }
}

 .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .card {
    position: relative;
    overflow: hidden;
    height: 160px; /* 高さを半分に */
    border-radius: 12px;
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
    -webkit-clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
  }

  .card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.6) 100%);
  }

  /* 下半分にテキストを中央寄せ配置 */
  .card__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%; /* 下半分の領域 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    padding: 0 10px;
  }

  .card__title {
    font-size: 1.1rem;
    font-weight: 700;
  }

  @media (max-width: 1200px) {
    .grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 600px) {
    .grid {
      grid-template-columns: 1fr;
    }
    .card { height: 120px; } /* スマホ用に少し小さく */
    .card__title { font-size: 1rem; }
  }


/*Interviewの設定*/
#Interview {
	background-color: rgba(216, 74, 209, 0.6);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#Interview::before {
	background: url('../images/Interview.webp') no-repeat center center / cover;	/*背景画像の読み込み*/
}

/*Scheduleの設定*/
#Schedule {
	color: #fff;	/*文字色*/
}
#Schedule::before {
	background: #1c1c1c;	/*Scheduleだけは背景画像ではなく、単に背景色だけ指定しました。*/
}


  .Schedule_container ul {
  margin: 0;
  list-style: none;
  position: relative;
  padding: 1px 10vw;
  color: #fff;
  font-size: 13px;
}

.Schedule_container ul::before {
  content: '';
  height: 100%;
  position: absolute;
  border-left: 2px dashed #fff;
  left: 10vw;
}

.Schedule_container ul li {
  position: relative;
  margin-left: 30px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 14px;
  border-radius: 6px;
  width: 100%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 各 li に背景画像を指定 */

.Schedule_container ul li:nth-child(1) {
  background-image: url('../images/sc01.webp');
}

.Schedule_container ul li:nth-child(2) {
  background-image: url('#');
}

.Schedule_container ul li:nth-child(3) {
  background-image: url('../images/sc03.webp');
}

.Schedule_container ul li:nth-child(4) {
  background-image: url('#');
}

.Schedule_container ul li:nth-child(5) {
  background-image: url('#');
}

.Schedule_container ul li:nth-child(6) {
  background-image: url('../images/sc06.webp');
}

.Schedule_container ul li:nth-child(7) {
  background-image: url('../images/sc07.webp');
}

.Schedule_container ul li:nth-child(8) {
  background-image: url('../images/sc08.webp');
}

/* 背景の上にテキストを読みやすくするための半透明レイヤー */
.Schedule_container ul li::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);  /* ここで暗めに */
  border-radius: 6px;
  z-index: 0;
}

/* コンテンツを上に重ねる */
.Schedule_container ul li > div,
.Schedule_container ul li > span {
  position: relative;
  z-index: 1;
}

.Schedule_container ul li {
  margin-top: 24px;
      display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.Schedule_container ul li > span {
  width: 2px;
  height: 100%;
  background: #fff;
  left: -30px;
  top: 0;
  position: absolute;
}

.Schedule_container ul li > span::before{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #fff;
  position: absolute;
  background: #86b7e7;
  left: -5px;
  top: 0;
}

.Schedule_container ul li > div {
  margin-left: 10px;
}

.Schedule_container .title {
  font-weight: 600;
  font-size: 14px;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
}

.Schedule_container .info {
  font-weight: 400;
  line-height: 1.6;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
}

.Schedule_container span.number span {
  position: absolute;
  font-size: 10px;
  left: -50px;
  font-weight: bold;
}

.Schedule_container span.number span:first-child {
  top: -6px;
}

/* -------------------------------
   📱 レスポンシブ対応
--------------------------------*/
@media (max-width: 768px) {

  .Schedule_container span.number span {
    font-size: 10px;
  }
}
@media screen and (min-width:700px) {
.Schedule_container ul li:nth-child(1){
  min-height: 240px;
}
.Schedule_container ul li:nth-child(7){
  min-height: 240px;
}
.Schedule_container ul li:nth-child(8){
  min-height: 240px;
}
}
@media screen and (max-width:700px) {
.Schedule_container ul li:nth-child(8) {
  min-height: 200px;
}
}
/*noteの設定*/
#note {
	color: #fff;	/*文字色*/
}
#note::before {
	background: #1c1c1c;	/*Scheduleだけは背景画像ではなく、単に背景色だけ指定しました。*/
}

.info_banner{
	display: flex;
	flex-direction: row;
}

.info_banner img{
	padding:1em;
}

@media screen and (max-width:700px) {
.info_banner{
	flex-direction: column;
}
}

/*募集要項の設定*/

#Job_description {
	color: #fff;	/*文字色*/
}
#Job_description::before {
  background: url('../images/Job_description_pc.webp') no-repeat center center / cover;
  filter: grayscale(50%) brightness(30%); /* フィルターを追加 */}

.shopinfo {
	display: grid;
    justify-content: center;
    justify-items: center;
	list-style: none;
}

@media screen and (min-width: 640px) {
.shopinfo {
	grid-template-columns: repeat(2, 1fr);
}
  }


/*テーブル
---------------------------------------------------------------------------*/
table.tbl-r02 {
    width: 100%;
}
.tbl-r02 tr {
border-bottom:1px solid #fff;
}

.tbl-r02 th {
  background: #7a7172;
  color: #fff;
  padding: 10px;
}
.tbl-r02 td {
  color: #171717;
  font-weight: 500;
　border: solid 1px #ccc;
  padding: 10px;
  line-height: 1.8;
  background: rgba(255, 255, 255, 0.9);
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }

  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

/*note*/

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.slide-thumbnail1-parts {
	overflow-x: hidden;
	opacity: 0.3;
}

/*画像たちを囲むブロック*/
.slide-thumbnail1-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*右から左へ、左から右へ、のアニメーション*/
.slide-thumbnail1-parts .rtl-parts, .slide-thumbnail1-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.slide-thumbnail1-parts .rtl-parts {animation-name: slide-rtl-parts;}
.slide-thumbnail1-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

/*Foam 応募フォームの設定*/
#Foam {
	color: #fff;	/*文字色*/
}
#Foam::before {
	background: #1c1c1c;	/*Foamだけは背景画像ではなく、単に背景色だけ指定しました。*/
}
	/*縦向き端末から見た場合に背景画像をチェンジする*/
	@media (orientation: portrait) {

	#section1::before {
		background-image: url('../images/section1_portrait.jpg');
	}
	#About_MITTNESS::before {
		background-image: url('../images/About_MITTNESS_pc.webp');
	}
	#Interview::before {
		background-image: url('../images/Interview.webp');
	}
		#About_MITTNESS::before {
		background-image: url('../images/About_MITTNESS_sp.webp');
	}

	}/*追加指定ここまで*/

/*背景色を入れない場合（画像だけを表示したい場合）*/
.no-bgcolor {background-color: transparent !important;}

.glass {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 18px;
  line-height: 1.8;
}
.glass p {
margin: 0;
}

.glass h3 {
margin: 0;
}

/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 0.8rem;
	text-align: center;		/*内容をセンタリング*/
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}


/*お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.new dd {
	padding-bottom: 1rem;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0 0.5rem;		/*上下、左右へのブロック内の余白*/
	width: 6rem;			/*幅。６文字分。*/
	transform: scale(0.8);	/*80%のサイズに縮小*/
	background: rgba(255,255,255,0.8);		/*背景色*/
	color: #333;			/*文字色*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	.new {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
	}

	}/*追加指定ここまで*/


/*list-grid（gallery.htmlでサムネイルを表示している部分の設定です）
---------------------------------------------------------------------------*/
/*listブロックを囲む外側のボックス*/
.list-grid-trimming {
	display: grid;
	grid-template-columns: repeat(2, 1fr);	/*ここの「4」の数字が横に並べる数です。3列がいいなら(3, 1fr)です。*/
	gap: 1rem;	/*マージン的な数値。サムネイル間を１文字分あけます。*/
}

/*ボックスを正方形にトリミングする為の指定なので変更しない。*/
.list-grid-trimming .list {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-top: 100%;
}
.list-grid-trimming .list a {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
.list-grid-trimming .list img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: 0.5s;	/*マウスオン時にかける時間。0.5秒。*/
}

/*マウスオン時の画像*/
.list-grid-trimming .list img:hover {
	transform: scale(1.1);	/*1.1倍に拡大*/
	filter: contrast(1.3);	/*コントラストを1.3倍*/
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 0.2s 0.2s both;	/*一瞬ボタンが出ちゃうのを隠す為の応急措置*/
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: rgba(223,21,123,0.8);		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border: 1px solid rgba(223,21,123,0.8);
	border-radius: 50%;	/*円形にする*/
}

/*スマホ表示時にあらわれる追従バナー 2025.10 wrote
---------------------------------------------------------------------------*/
/* button neon */
.neon {
  box-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #ff22f7, 0 0 20px #ff22f7, 0 0 40px #ff22f7, 0 0 60px #ff22f7;
}

/* button base */
.fixed-btn{
	z-index: 99;
   position: fixed;
  bottom: 20px;
  left: 2vw;
  width: 200px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0.3em;
  border-radius: 30px;
  transition: all 0.3s ease;
}

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


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #000;border: 1px solid #fff;border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.color-check, .color-check a {color: #ffcf0d;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		.ws {width: 48%;display: inline;}
		.sh {display: none;}
		.pc {display: block;}

	}/*画面幅900px以上の追加指定ここまで*/

	.line_style {
	height: 40px;
    padding: 0em 0em 0em 1em;
    position: relative;
}

.line_style::before,
.line_style::after {
    content: "";
    display: block;
    position: absolute;
}

.line_style::before {
    left: 0;
    bottom: -22px;
    width: 10px;
    height: 100%;
    background: #ffffff;
    transform: skewX(-15deg);
}

.line_style::after {
    left: -4px;
    bottom: -22px;
    width: 100%;
    height: 2px;
    background: #ffffff;
}