@charset "UTF-8";

/* --------------------------------------------
	basic-style-override
-----------------------------------------------*/

/* base-style */
a ,a:visited{
	color: gray;
	font-weight: bold;
}
a:hover ,a:visited:hover{
	color: #000;
}


/* megamenu */
.menu-container .menu > ul > li:hover {
  background: #fff;
  border-bottom: 4px solid #000 !important;
}

.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price{
	color: #000;
}

/* WooCommerce */
#cart-navigation ul li i span{
	background: #000 !important;
}
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
  background: #000;
  color: #fff;
}
.woocommerce div.product .woocommerce-product-details__short-description span.price del,
.woocommerce-page div.product .woocommerce-product-details__short-description span.price del,
.woocommerce #content div.product .woocommerce-product-details__short-description span.price del,
.woocommerce-page #content div.product .woocommerce-product-details__short-description span.price del,
.woocommerce div.product p.price del,
.woocommerce-page div.product p.price del,
.woocommerce #content div.product p.price del,
.woocommerce-page #content div.product p.price del {
  color: #000;
}
.woocommerce div.product .single_variation .price del,
.woocommerce-page div.product .single_variation .price del,
.woocommerce #content div.product .single_variation .price del,
.woocommerce-page #content div.product .single_variation .price del,
.woocommerce div.product .itemscope span.price del,
.woocommerce-page div.product .itemscope span.price del,
.woocommerce #content div.product .itemscope span.price del,
.woocommerce-page #content div.product .itemscope span.price del,
.woocommerce div.product p.price del,
.woocommerce-page div.product p.price del,
.woocommerce #content div.product p.price del,
.woocommerce-page #content div.product p.price del {
  color: #000;
}
.woocommerce div.product .stock,
.woocommerce-page div.product .stock,
.woocommerce #content div.product .stock,
.woocommerce-page #content div.product .stock {
  color: #000;
}
.woocommerce span.onsale,
.woocommerce-page span.onsale {
  background: #000;
  color: #fff;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  color: #000;
}
.woocommerce table.cart a.remove,
.woocommerce-page table.cart a.remove,
.woocommerce #content table.cart a.remove,
.woocommerce-page #content table.cart a.remove {
  color: #000;
}
.woocommerce table.cart a.remove:hover,
.woocommerce-page table.cart a.remove:hover,
.woocommerce #content table.cart a.remove:hover,
.woocommerce-page #content table.cart a.remove:hover {
  background-color: #000;
  color: #fff;
}
.woocommerce.widget_shopping_cart .checkout.button:hover,
.woocommerce-page.widget_shopping_cart .checkout.button:hover,
.woocommerce .widget_shopping_cart .checkout.button:hover,
.woocommerce-page .widget_shopping_cart .checkout.button:hover {
  background: #000;
}
.woocommerce .cart-collaterals .cart_totals .discount td,
.woocommerce-page .cart-collaterals .cart_totals .discount td {
  color: #000;
}

a.button:hover,
button.button:hover,
input.button:hover,
#respond input#submit:hover,
#content input.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background: #000;
  color: #fff;
  text-decoration: none;
}
a.button.alt:hover,
button.button.alt:hover,
input.button.alt:hover,
#respond input#submit.alt:hover,
#content input.button.alt:hover,
input[type="button"].alt:hover,
input[type="reset"].alt:hover,
input[type="submit"].alt:hover {
  background: #000;
  color: #fff;
}

/* slidecart */
#cd-cart .woocommerce-mini-cart__buttons .button.wc-forward {
	}
	#cd-cart .woocommerce-mini-cart__buttons .button.wc-forward:first-child:hover {
		background: none;
		color: #000;
	}


/* youtube */
.movie_area{
	background: #202124;
	padding: 3% 0;
}
.movie_area h2{
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 2px;
	padding-bottom: 20px;
	margin-bottom: 30px;
}
.movie_area h2 span{
	border-bottom: 2px solid #fff;
	padding-bottom: 15px;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
}
.movie_list{
	margin-left: 0 !important;
}
.movie_item{
	margin-left: 50px !important;
}
.movie_item img{
	width: 100%;
}
.movie_item a{
	display: block;
	position: relative;
	color: #000;
}
.movie_item a:hover{
	color: gray;
}
.movie_title{
	width: 100%;
	background: rgba(255,255,255,0.5);
	font-family: 'Montserrat', sans-serif;
	padding: 3% 2%;
	position: absolute;
	position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 -webkit-transform: translate(-50%, -50%);
	 -ms-transform: translate(-50%, -50%);
}

@media screen and (max-width: 640px){
	.movie_area{
		padding: 5% 0;
	}
	.movie_list{
		margin-left: 0 !important;
	}
	.movie_item{
		margin-left: 30px !important;
	}
	.movie_item img{
		width: 100%;
	}
	.movie_item a{
		width: 100%;
	}

}

/* insta
   ------------------------------------------------------------------
   Instagram の元画像は縦長・横長・正方形が混在していて、そのまま並べると
   高さが揃わず隙間だらけになる（SPだと特に間延びする）。
   **正方形に切り抜いて隙間ゼロで敷き詰める**。Instagram のグリッドらしい見え方。
------------------------------------------------------------------ */
#sb_instagram #sbi_images {
	padding: 0 !important;
	gap: 0 !important;
}
#sb_instagram #sbi_images .sbi_item {
	padding: 0 !important;
	margin: 0 !important;
	/* Smash Balloon が .sbi_item に固定幅を持たせていて、grid のセル幅まで
	   広がらない（実測：セルが176pxなのにアイテムは88pxのまま）。
	   セルいっぱいに広げる。 */
	width: 100% !important;
	max-width: none !important;
}
/* .sbi_photo は <a>。中の img を正方形に切り抜く。
   ※ Smash Balloon の JS が style="height:247.5px" のように **インラインで高さを
     設定**してくる。放っておくと画像ごとに高さが変わって段差だらけになるので、
     height を !important で打ち消してから aspect-ratio で正方形にする。
     （インラインstyleに勝つには !important が要る） */
#sb_instagram #sbi_images .sbi_item .sbi_photo {
	display: block;
	height: auto !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	line-height: 0;
}
#sb_instagram #sbi_images .sbi_item .sbi_photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* SP・タブレットのカラム数
   ------------------------------------------------------------------
   **#sbi_images は display:grid**。カラム数は grid-template-columns が
   決めるので、.sbi_item に width:50% を当てても効かない
   （以前ここにあった width:50% の指定はそれで無効だった）。
   実測では391px幅でも4カラムのままで、1コマ88pxしかなかった。
   グリッドの列数そのものを2列にする。 */
@media screen and (max-width: 800px){
	#sb_instagram #sbi_images {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}


/* CREW（カード型グリッド。写真は正方形に切り抜いて不揃いを吸収する） */

.crew{}
.crew-list{
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
}
.crew-item{
	display: flex;
	flex-direction: column;
	border: solid 1px #eee;
	background: #fff;
}
.crew-item .crew-photo{
	width: 100%;
}
.crew-item .crew-photo img{
	vertical-align: bottom;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.crew-item .crew-contents{
	padding: 2rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.crew-iconlist{
	list-style: none;
	display: flex;
	margin: auto 0 0;
	padding-top: 1.5rem;
}
.crew-iconlist li{
	margin-right: 1rem;
	width: 3.2rem;
}
.crew-iconlist li img{
	width: 100%;
}
.crew-position{
	font-size: 1.3rem;
	margin-bottom: 1.2rem;
	color: #888;
}
.crew-name{
	font-size: 1.4rem;
	margin-bottom: 1.5rem;
	font-weight:bold;

}
.crew-name span{
	display: block;
	font-size: 1.8rem;
}
.crew-txt{
	font-size: 1.3rem;
	line-height: 1.8;
	margin-bottom: 0;
}
@media screen and (max-width: 1024px){
	.crew-list{
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
}
@media screen and (max-width: 640px){
	.crew{}
	.crew-list{
		margin: 0;
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.crew-item{
		margin-bottom: 0;
	}
	.crew-item .crew-contents{
		padding: 2rem 1.5rem;
	}
	.crew-position{
		font-size: 1.3rem;
		margin-bottom: 1.2rem;
	}
	.crew-name{
		font-size: 1.4rem;
		margin-bottom: 1.5rem;
		font-weight:bold;

	}
	.crew-name span{
		display: block;
		font-size: 1.8rem;
	}


}


/* footer */
.f_logo{
	opacity: 0.075;
	padding-top: 10px;
}
@media screen and (max-width: 640px){
	.f_logo{
		width: 60%;
		margin: 0 auto;
	}
	.f_logo img{
		width: 100%;
	}
}


/* ==================================================================
   商品ギャラリーを表示する
   ------------------------------------------------------------------
   WooCommerce の CSS は .woocommerce-product-gallery に opacity:0 を当て、
   flexslider の start コールバックで opacity:1 に戻す作りになっている。

   このテーマは wc-product-gallery-slider をサポートしていない
   （add_theme_support は wc-product-gallery-lightbox のみ）ため
   flexslider が読み込まれず、**opacity:0 のまま商品画像が消える**。
   実際 wc_single_product_params.flexslider_enabled は空だった。

   スライダーを有効化すると見た目（サムネイルの挙動）が変わってしまうので、
   ここでは opacity だけ戻す。
================================================================== */
.woocommerce-product-gallery {
	opacity: 1 !important;
}


/* ==================================================================
   差し色 #e60012
   ------------------------------------------------------------------
   サイトの基調は白黒（ロゴも黒）なので、赤は「差し色」として
   押せるもの・状態を示すものだけに使う。地の面積は増やさない。
================================================================== */

/* --- 購入ボタン --- */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button {
	background-color: #e60012;
	color: #fff;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.single_add_to_cart_button:hover {
	background-color: #c1000f;
	color: #fff;
}
/* 押せないボタンは赤くしない（押せると誤解させない） */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce a.button.disabled,
.woocommerce button.button.disabled {
	background-color: #ddd;
	color: #888;
}

/* --- SOLD OUT --- */
.hc-soldout {
	display: inline-block;
	border: 2px solid #e60012;
	color: #e60012;
	font-weight: bold;
	letter-spacing: .12em;
	padding: .6em 1.4em;
	margin: 1em 0;
	font-size: 1.4rem;
	line-height: 1;
}
.hc-soldout--loop {
	margin-top: .8em;
	font-size: 1.2rem;
	padding: .5em 1em;
}

/* --- カート内の個数バッジ --- */
.cartcontents,
.cart-contents-count {
	background-color: #e60012;
	color: #fff;
}

/* --- セール表示 --- */
.woocommerce span.onsale {
	background-color: #e60012;
	color: #fff;
}

/* ------------------------------------------------------------------
   差し色は「テーマのキーカラー」で入れている

   montblanc は functions.php の customize_key_color() が
       get_theme_mod( 'key_color', '#e36e3a' )
   を読んで <style> をインライン出力する作り。リンク色・価格・
   セールバッジ・通知の帯・ボタンのホバーなど、アクセント色は
   **この1つの設定で全部決まる**。

   なので CSS で個別に上書きするのではなく、キーカラー自体を
   #e60012 にした（tools/set-key-color.php）。
   インライン出力は外部CSSより後に来るため、CSSで戦っても勝てない
   ——実際、以前ここにあった
       .menu-container .menu > ul > li:hover { border-bottom: 4px solid #000 }
   はインラインのオレンジに負けていて効いていなかった。

   ここに残すのは、キーカラーが面倒を見てくれない箇所だけ。
------------------------------------------------------------------ */

/* 購入ボタン（親テーマは黒。押せる操作だけ差し色にする） */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button {
	background-color: #e60012;
	color: #fff;
}
/* 押せないボタンは赤くしない（押せると誤解させない） */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce a.button.disabled,
.woocommerce button.button.disabled {
	background-color: #ddd;
	color: #888;
}

/* SOLD OUT */
.hc-soldout {
	display: inline-block;
	border: 2px solid #e60012;
	color: #e60012;
	font-weight: bold;
	letter-spacing: .12em;
	padding: .6em 1.4em;
	margin: 1em 0;
	font-size: 1.4rem;
	line-height: 1;
}
.hc-soldout--loop {
	margin-top: .8em;
	font-size: 1.2rem;
	padding: .5em 1em;
}

/* 商品詳細の価格（キーカラーは一覧側だけ面倒を見る） */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: #e60012;
}


/* ==================================================================
   商品ページのタブ（説明 / 追加情報）
   ------------------------------------------------------------------
   説明タブの中身は投稿本文に手書きされた <table class="spec_sheet">。
   クラスは振ってあるのにスタイルが一切無く、罫線なしで散らばっていた。
   追加情報は WooCommerce 標準の .shop_attributes。
   どちらも素のままだと締まらないので、ここで整える。
================================================================== */

/* --- タブ見出し --- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #e5e5e5;
}
/* WooCommerce 既定の吹き出し風の飾りを消す */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 1.2em 1.8em;
	color: #999;
	font-weight: bold;
	letter-spacing: .08em;
	border-bottom: 3px solid transparent;
	transition: color .2s, border-color .2s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: #222;
}
/* 選択中のタブだけ差し色。どこを見ているかを一目で分かるようにする */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: #222;
	border-bottom-color: #e60012;
}

/* パネル：タブと同じ文字の見出し（h2「説明」）が重複するので隠す */
.woocommerce div.product .woocommerce-Tabs-panel > h2 {
	display: none;
}
.woocommerce div.product .woocommerce-Tabs-panel {
	padding-top: 2.5em;
	max-width: 760px;
}

/* --- サイズ表（説明タブ） --- */
.spec_sheet {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5em;
	font-family: 'Montserrat', sans-serif;
}
.spec_sheet th,
.spec_sheet td {
	border: 1px solid #e5e5e5;
	padding: .9em .6em;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1.4;
}
.spec_sheet thead th {
	background: #222;
	color: #fff;
	font-weight: bold;
	letter-spacing: .06em;
}
.spec_sheet tbody th {
	background: #f7f7f7;
	text-align: left;
	white-space: nowrap;
	font-weight: bold;
	width: 8em;
}
/* 数字の桁を揃えて、サイズ差を読み取りやすくする */
.spec_sheet tbody td {
	font-variant-numeric: tabular-nums;
}
.spec_sheet tbody tr:hover td {
	background: #fafafa;
}

/* --- 追加情報タブ --- */
.woocommerce div.product .woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}
.woocommerce div.product .woocommerce-product-attributes th,
.woocommerce div.product .woocommerce-product-attributes td {
	border: 1px solid #e5e5e5;
	padding: 1em 1.2em;
	font-size: 1.4rem;
	line-height: 1.5;
	text-align: left;
}
.woocommerce div.product .woocommerce-product-attributes th {
	background: #f7f7f7;
	font-weight: bold;
	width: 10em;
	white-space: nowrap;
	letter-spacing: .06em;
}
.woocommerce div.product .woocommerce-product-attributes td p {
	margin: 0;
}

@media screen and (max-width: 640px){
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		padding: 1em 1.1em;
		font-size: 1.3rem;
	}
	/* 表は潰さず横スクロールで逃がす */
	.woocommerce div.product .woocommerce-Tabs-panel {
		overflow-x: auto;
		padding-top: 2em;
	}
	.spec_sheet {
		min-width: 460px;
	}
	.woocommerce div.product .woocommerce-product-attributes th {
		width: 7em;
	}
}


/* ==================================================================
   サイドバー（ウィジェット）を1列にする
   ------------------------------------------------------------------
   親テーマは #secondary .widget を inline-block + 固定幅にしていて、
       css/woocommerce-layout.css      … width:30%（PCで3列）
       css/woocommerce-smallscreen.css … width:46%（SPで2列）
   となる。SPだと1列46%に「最近の投稿」の長いタイトルが入るため、
   1文字ずつ折り返して縦に伸び、検索ボタンも縦書きのように潰れていた。

   ウィジェットは項目数が少なく横に並べる意味がないので、素直に1列にする。
================================================================== */
#secondary .widget {
	width: 100%;
	display: block;
	margin-bottom: 3em;
}
#secondary .widget:last-child {
	margin-bottom: 0;
}

/* 見出し */
#secondary .widget h2,
#secondary .widget .widget-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: .1em;
	margin: 0 0 1.2em;
	padding-bottom: .8em;
	border-bottom: 1px solid #e5e5e5;
}

/* 一覧（最近の投稿・アーカイブ・カテゴリー） */
#secondary .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#secondary .widget ul li {
	margin: 0;
	padding: .7em 0;
	border-bottom: 1px solid #f2f2f2;
	line-height: 1.6;
	font-size: 1.3rem;
}
#secondary .widget ul li:last-child {
	border-bottom: 0;
}

/* 検索フォーム：ラベルとボタンが縦に潰れていたので横並びで組み直す */
#secondary .wp-block-search__label {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: .1em;
	margin: 0 0 1.2em;
	padding-bottom: .8em;
	border-bottom: 1px solid #e5e5e5;
}
#secondary .wp-block-search__inside-wrapper {
	display: flex;
}
#secondary .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: .7em .9em;
	font-size: 1.3rem;
}
#secondary .wp-block-search__button {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: .7em 1.2em;
	margin-left: .5em;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2rem;
	letter-spacing: .08em;
	background: #222;
	color: #fff;
	border: 0;
	cursor: pointer;
}
#secondary .wp-block-search__button:hover {
	background: #e60012;
}