/*
    Theme Name: SWELL
    Theme URI: https://swell-theme.com/
    Description: シンプルなのに高機能。ブロックエディターの使い心地にこだわった国内最高峰のWordPressテーマ
    Version: 2.5.5.3
    Requires at least: 5.5
    Requires PHP: 7.3.0
    Author: LOOS,Inc.
    Author URI: https://twitter.com/ddryo_loos
    Text Domain: swell
    Domain Path: /languages
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

@charset "UTF-8";



/* ============================================
   VOD紹介ボックス
   ============================================ */
.vod_link_box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.2em;
	margin: 2em 0;
	padding: 1.4em 1.4em 1.6em;
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

/* サービス画像 */
.vod_link_box_items_img {
width:100%;
}

.vod_link_box_items_img img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

/* サービス名・料金など */
.vod_link_box_items_spac {
	flex: 1 1 200px;
}

.vod_link_box_items_spac h3 {
	margin: 0 0 .4em;
	padding: 0 0 .3em;
	font-size: 1.2em;
	border-bottom: 2px solid #4b9bd8;
	background: none;
}

.vod_link_box_items_spac p {
	margin: .2em 0;
	font-size: .95em;
}



/* 説明テキスト（全幅） */
.vod_link_box_items_text {
	flex: 1 1 100%;
	margin-top: 1em;
}

.vod_link_box_items_text p {
	margin: 0 0 .8em;
	line-height: 1.7;
}

.vod_link_box_items_text ol {
	margin: 0;
	padding-left: 1.5em;
}

.vod_link_box_items_text ol li {
	margin-bottom: .4em;
	line-height: 1.6;
}

/* ============================================
   ボタン
   ============================================ */
.botan02 {
	display: block;
	padding: .9em 1em;
	background: linear-gradient(180deg, #ff9a3c 0%, #f0761b 100%);
	color: #fff !important;
	font-weight: bold;
	font-size: 1.05em;
	text-align: center;
	text-decoration: none;
	border-radius: 50px;
	box-shadow: 0 4px 0 #c95c0e;
	transition: transform .15s, box-shadow .15s;
	line-height: 1.4;
}

.botan02:hover {
	transform: translateY(2px);
	box-shadow: 0 2px 0 #c95c0e;
	opacity: .95;
}

/* ============================================
   ユーティリティ
   ============================================ */
.al_c { text-align: center; }
.w100 { width: 100%; box-sizing: border-box; }
.m20_t { margin-top: 20px; }
.b { font-weight: bold; }
.red { color: #e53935; }

.label_yellow {
	background: linear-gradient(transparent 55%, #ffe873 55%);
	font-weight: bold;
	padding: 0 .1em;
}

ol.b > li { font-weight: bold; }

/* ============================================
   スマホ表示
   ============================================ */
@media screen and (max-width: 600px) {
	.vod_link_box {
		padding: 1em 1em 1.2em;
	}
	.vod_link_box_items_img {
		flex: 1 1 100%;
		max-width: 100%;
		text-align: center;
		margin-bottom: .8em;
	}

	.vod_link_box_items_spac {
		flex: 1 1 100%;
	}
}


/**
 * 作品（opus）ページ用スタイル
 *
 * 旧サイトのクラス名（table_design04 / tag_design01 / span_design01）を引き継ぎつつ、
 * SWELL のカラー変数（--color_main など）に合わせています。
 */

/* ===== 作品情報テーブル ===== */
.post_content .table_design04 {
	margin: 2em 0;
}

.post_content .table_design04 table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: .92em;
	table-layout: fixed;
}

.post_content .table_design04 th,
.post_content .table_design04 td {
	padding: .7em .8em;
	border: 1px solid var(--color_border, #e5e5e5);
	vertical-align: middle;
	word-break: break-word;
}

.post_content .table_design04 td.w30 {
	width: 30%;
	background: var(--color_bg_gray, #f7f7f7);
	font-weight: 700;
	white-space: nowrap;
}

@media screen and (max-width: 599px) {
	.post_content .table_design04 table {
		font-size: .86em;
	}

	.post_content .table_design04 td.w30 {
		width: 34%;
		white-space: normal;
	}
}

/* ===== タームのタグ ===== */
.post_content .tag_design01 {
	display: inline-block;
	margin: .15em .3em .15em 0;
	padding: .2em .7em;
	border: 1px solid var(--color_main, #35a2c0);
	border-radius: 100px;
	background: #fff;
	color: var(--color_main, #35a2c0);
	font-size: .92em;
	line-height: 1.6;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.post_content .tag_design01:hover {
	background: var(--color_main, #35a2c0);
	color: #fff;
}

/* ===== テーブル下の注記 ===== */
.post_content .span_design01 {
	display: block;
	margin-top: .5em;
	color: var(--color_text_lv2, #777);
	font-size: .8em;
	line-height: 1.6;
}

/* ===== VOD 各セクション ===== */
.post_content .vod-section {
	margin: 2.5em 0;
}

.post_content .vod-section > h2 {
	margin-top: 0;
}

.post_content .vod-section table {
	width: 100%;
}

/* ===== 作画崩壊ギャラリー ===== */
.post_content .gallery_box {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 1.5em 0;
}

.post_content .gallery_box p {
	width: calc((100% - 16px) / 3);
	margin: 0;
}

.post_content .gallery_box img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 4px;
	vertical-align: bottom;
}

@media screen and (max-width: 599px) {
	.post_content .gallery_box {
		gap: 6px;
	}

	.post_content .gallery_box p {
		width: calc((100% - 6px) / 2);
	}
}