/*
Theme Name: 動画ワークス
Description:
Theme URI:
Author: スリーグッド鹿児島
Author URI:
Version:
License:
License URI:
*/

/* --------------------------
    variables
-------------------------- */
:root {
    --content-width: 1100px;
    --narrow-width: 800px;
    --wide-width: 1200px;
    --youtube6-width: 800px;
    --color: #333;
    --line-height: 1.75;
    --font-size: 16px;
    --letter-spacing: 0.1em;
    --font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'ＭＳ Ｐゴシック', sans-serif;
    --display-font: 'Oswald', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'ＭＳ Ｐゴシック', sans-serif;
    --display-font2: 'M PLUS 1p', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'ＭＳ Ｐゴシック', sans-serif;
    --main-color: #d93232;
    --main-color-light: #f25050;
    --main-color-dark: #9c2424;
    --main-color-pale: #fff5f5;
}

/* --------------------------
    reset
-------------------------- */
* {
    margin: 0;
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
    box-sizing: border-box;
}

*:before,
*:after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
	font-size: var(--font-size);
	line-height: var(--line-height);
	letter-spacing: var(--letter-spacing);
	color: var(--color);
	font-family: var(--font-family);
	font-weight: 500;
	min-height: 100vh;
	counter-reset: number 0;
	overflow-x: hidden;
	text-align: justify;
	word-break: break-all;
}

body:before {
	content: '';
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
}

body:after {
	content: '';
	display: flex;
	justify-content: center;
	align-items: center;
	width: 256px;
	height: 256px;
	position: fixed;
	top: calc(50% - 128px);
	left: calc(50% - 128px);
	z-index: 999;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIKCSB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyNTYgMzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NiAzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiMzMzMzMzM7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMy42LDQuOWg4LjJjMi40LDAsNC41LDAuMyw2LjUsMXMzLjcsMS42LDUuMSwyLjhzMi41LDIuNiwzLjMsNC4yczEuMiwzLjQsMS4yLDUuNGMwLDEuOS0wLjQsMy43LTEuMiw1LjQKCWMtMC44LDEuNy0xLjksMy4xLTMuMyw0LjJjLTEuNCwxLjItMy4xLDIuMS01LjEsMi44Yy0yLDAuNy00LjEsMS02LjUsMUgzLjZWNC45eiBNMTIuMiwyNi40YzEuMywwLDIuNi0wLjIsMy43LTAuNnMyLTAuOSwyLjgtMS42CglzMS40LTEuNSwxLjgtMi42YzAuNC0xLDAuNi0yLjIsMC42LTMuNGMwLTEuMy0wLjItMi40LTAuNi0zLjRzLTEtMS45LTEuOC0yLjZjLTAuOC0wLjctMS43LTEuMi0yLjgtMS42Yy0xLjEtMC40LTIuMy0wLjYtMy43LTAuNgoJaC0ydjE2LjNoMlYyNi40eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTcuOCwxOC4zYzAsMS45LTAuMywzLjctMC45LDUuNGMtMC42LDEuNy0xLjUsMy4xLTIuNyw0LjRzLTIuNiwyLjMtNC4zLDNzLTMuNiwxLjEtNS44LDEuMXMtNC4xLTAuNC01LjgtMS4xCglzLTMuMS0xLjctNC4zLTNzLTIuMS0yLjctMi43LTQuNGMtMC42LTEuNy0wLjktMy41LTAuOS01LjRzMC4zLTMuNywwLjktNS40czEuNS0zLjEsMi43LTQuNHMyLjYtMi4zLDQuMy0zQzQwLDQuOCw0Miw0LjQsNDQuMSw0LjQKCWMyLjIsMCw0LjEsMC40LDUuOCwxLjFzMy4xLDEuNyw0LjMsM3MyLjEsMi43LDIuNyw0LjRTNTcuOCwxNi40LDU3LjgsMTguM3ogTTQ0LjEsMjYuOWMxLjIsMCwyLjItMC4yLDMuMS0wLjYKCWMwLjktMC40LDEuNi0xLDIuMi0xLjhjMC42LTAuOCwxLjEtMS43LDEuMy0yLjdjMC4zLTEuMSwwLjQtMi4yLDAuNC0zLjVzLTAuMS0yLjQtMC40LTMuNWMtMC4zLTEuMS0wLjctMi0xLjMtMi43CgljLTAuNi0wLjgtMS4zLTEuNC0yLjItMS44cy0xLjktMC42LTMuMS0wLjZjLTEuMiwwLTIuMiwwLjItMy4xLDAuNmMtMC45LDAuNC0xLjYsMS0yLjIsMS44cy0xLjEsMS43LTEuMywyLjcKCWMtMC4zLDEuMS0wLjQsMi4yLTAuNCwzLjVzMC4xLDIuNCwwLjQsMy41YzAuMywxLjEsMC43LDIsMS4zLDIuN3MxLjMsMS40LDIuMiwxLjhDNDEuOSwyNi43LDQzLDI2LjksNDQuMSwyNi45eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNzUuNSw0LjRjMy41LDAsNi40LDAuNSw4LjgsMS42bC0wLjksNWMtMi4zLTAuOS00LjctMS40LTcuMi0xLjRjLTEuMywwLTIuNSwwLjItMy42LDAuNXMtMiwwLjktMi44LDEuNgoJYy0wLjgsMC43LTEuNCwxLjctMS44LDIuOHMtMC42LDIuNS0wLjYsNC4xYzAsMi44LDAuNyw0LjksMi4yLDYuM2MxLjUsMS40LDMuNiwyLjEsNi41LDIuMWMwLjYsMCwxLjIsMCwxLjgtMC4xCgljMC42LTAuMSwxLTAuMiwxLjQtMC4zdi03LjVoNS45djExYy0xLjIsMC42LTIuNiwxLTQuNCwxLjRTNzcuMiwzMiw3NS4yLDMyYy0yLjMsMC00LjMtMC4zLTYtMWMtMS44LTAuNy0zLjMtMS42LTQuNS0yLjgKCWMtMS4yLTEuMi0yLjItMi42LTIuOC00LjJjLTAuNy0xLjYtMS0zLjUtMS01LjVjMC0yLjEsMC4zLTQuMSwxLTUuOXMxLjYtMy4zLDIuOS00LjVjMS4zLTEuMiwyLjgtMi4yLDQuNi0yLjkKCUM3MS4xLDQuNyw3My4xLDQuNCw3NS41LDQuNHoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTEwNi41LDI2LjVIOTYuMmwtMS42LDUuMmgtNi44bDEwLTI2LjhoNy4ybDEwLDI2LjhoLTYuOEwxMDYuNSwyNi41eiBNOTcuOSwyMS4zaDYuOUwxMDEuNCwxMEw5Ny45LDIxLjN6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNDEuNywyMy41bDQuMS0xOC42aDYuOGwtNy40LDI2LjhoLTYuN2wtNS40LTIwLjFsLTUuNCwyMC4xSDEyMWwtNy40LTI2LjhoNi44bDQuMSwxOC42bDUtMTguNmg3LjMKCUwxNDEuNywyMy41eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTgwLDE4LjNjMCwxLjktMC4zLDMuNy0wLjksNS40Yy0wLjYsMS43LTEuNSwzLjEtMi43LDQuNHMtMi42LDIuMy00LjMsM3MtMy42LDEuMS01LjgsMS4xcy00LjEtMC40LTUuOC0xLjEKCXMtMy4xLTEuNy00LjMtM3MtMi4xLTIuNy0yLjctNC40Yy0wLjYtMS43LTAuOS0zLjUtMC45LTUuNHMwLjMtMy43LDAuOS01LjRjMC42LTEuNywxLjUtMy4xLDIuNy00LjRzMi42LTIuMyw0LjMtM3MzLjYtMS4xLDUuOC0xLjEKCXM0LjEsMC40LDUuOCwxLjFzMy4xLDEuNyw0LjMsM3MyLjEsMi43LDIuNyw0LjRDMTc5LjcsMTQuNiwxODAsMTYuNCwxODAsMTguM3ogTTE2Ni4zLDI2LjljMS4yLDAsMi4yLTAuMiwzLjEtMC42CgljMC45LTAuNCwxLjYtMSwyLjItMS44czEuMS0xLjcsMS4zLTIuN3MwLjQtMi4yLDAuNC0zLjVzLTAuMS0yLjQtMC40LTMuNWMtMC4zLTEuMS0wLjctMi0xLjMtMi43cy0xLjMtMS40LTIuMi0xLjgKCWMtMC45LTAuNC0xLjktMC42LTMuMS0wLjZjLTEuMiwwLTIuMiwwLjItMy4xLDAuNmMtMC45LDAuNC0xLjYsMS0yLjIsMS44Yy0wLjYsMC44LTEuMSwxLjctMS4zLDIuN2MtMC4zLDEuMS0wLjQsMi4yLTAuNCwzLjUKCXMwLjEsMi40LDAuNCwzLjVjMC4zLDEuMSwwLjcsMiwxLjMsMi43YzAuNiwwLjgsMS4zLDEuNCwyLjIsMS44QzE2NC4xLDI2LjcsMTY1LjEsMjYuOSwxNjYuMywyNi45eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjA0LjIsMTMuNGMwLDEuOC0wLjUsMy40LTEuNSw0LjdzLTIuNCwyLjQtNC4yLDMuMWw4LjgsMTAuNWgtOC4xbC03LjQtOS4zaC0xLjJ2OS4zSDE4NFY0LjloOC41CgljMS43LDAsMy4yLDAuMiw0LjYsMC41YzEuNCwwLjMsMi43LDAuOSwzLjcsMS42czEuOSwxLjYsMi41LDIuNkMyMDMuOSwxMC43LDIwNC4yLDExLjksMjA0LjIsMTMuNHogTTE5Ny44LDEzLjUKCWMwLTEuMi0wLjUtMi4xLTEuNC0yLjdjLTAuOS0wLjYtMi4zLTAuOS0zLjktMC45aC0xLjl2Ny41aDEuNmMxLjgsMCwzLjItMC4zLDQuMS0xQzE5Ny4zLDE1LjcsMTk3LjgsMTQuOCwxOTcuOCwxMy41eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjA5LjcsMzEuN1Y0LjloNi42djEyLjhsOC41LTEyLjhoNy40bC05LjEsMTMuMmw5LjcsMTMuNmgtNy45bC04LjYtMTMuMXYxMy4xSDIwOS43eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjUzLDIzLjdjMCwxLjItMC4yLDIuMy0wLjcsMy4zcy0xLjEsMS45LTIsMi43Yy0wLjksMC44LTIsMS40LTMuMiwxLjhjLTEuMywwLjQtMi43LDAuNy00LjMsMC43CgljLTEuNSwwLTMtMC4yLTQuNC0wLjVzLTIuOC0wLjgtNC4xLTEuNGwxLjMtNWMwLjksMC41LDIsMC45LDMuMiwxLjJjMS4yLDAuMywyLjUsMC41LDMuOCwwLjVjMS4xLDAsMi4xLTAuMiwyLjgtMC42czEuMS0xLjEsMS4xLTIKCWMwLTAuNy0wLjMtMS4zLTAuOS0xLjhjLTAuNi0wLjUtMS44LTEuMS0zLjQtMS44Yy0yLjYtMS00LjUtMi4xLTUuOC0zLjRjLTEuMi0xLjMtMS44LTIuOS0xLjgtNC45YzAtMi42LDAuOS00LjYsMi42LTYKCWMxLjctMS40LDQuMS0yLjEsNy4xLTIuMWMxLjUsMCwzLDAuMiw0LjQsMC41czIuNiwwLjgsMy41LDEuM2wtMS4xLDQuOWMtMC45LTAuNS0yLTAuOC0zLjEtMS4xcy0yLjMtMC40LTMuNC0wLjQKCWMtMSwwLTEuOCwwLjItMi40LDAuNWMtMC42LDAuMy0wLjksMC45LTAuOSwxLjdjMCwwLjQsMC4xLDAuNywwLjIsMXMwLjMsMC41LDAuNiwwLjhjMC4zLDAuMiwwLjcsMC41LDEuMiwwLjdzMS4yLDAuNSwxLjksMC44CgljMS4xLDAuNSwyLjIsMC45LDMuMiwxLjRzMS45LDEuMSwyLjYsMS44YzAuNywwLjcsMS4zLDEuNCwxLjcsMi4zQzI1Mi44LDIxLjUsMjUzLDIyLjUsMjUzLDIzLjd6Ii8+Cjwvc3ZnPgo=);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 256px;
	transform-origin: center;
	animation: blink 1s ease infinite;
}

@keyframes blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

body.show:before {
	animation: fadeIn 1s ease forwards;
	background-image: none;
}

body.show:after {
	animation: fadeIn 1s ease forwards;
	background-image: none;
}

@keyframes fadeIn {
	0% {
		z-index: 999;
		opacity: 1;
	}
	100% {
		opacity: 0;
		z-index: -1;
	}
}

main {
	display: block;
}

img,
iframe {
	display: block;
	max-width: 100%;
}

a {
	color: var(--color);
	text-decoration: none;
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.25rem;
}

h4 {
	font-size: 1rem;
}

h5 {
	font-size: 0.75rem;
}

h6 {
	font-size: 0.75rem;
	font-weight: 500;
}

table {
	border-spacing: 0;
}

@media (max-width: 768px) {
	body {
		font-size: 14px;
	}
}


/* --------------------------
    common
-------------------------- */
.content-width {
	width: 100%;
	max-width: var(--content-width);
	margin: 0 auto;
}

.narrow-width {
	width: 100%;
	max-width: var(--narrow-width);
	margin: 0 auto;
}

.wide-width {
	width: 100%;
	max-width: var(--wide-width);
	margin: 0 auto;
}

.youtube6-width {
	width: 100%;
	max-width: var(--youtube6-width);
	margin: 0 auto;
}

.section-padding {
	padding: 8rem 1rem;
}

.section-padding-low {
	padding: 4rem 1rem;
}

.clearfix {
	clear: both;
}

.heading > h2 {
	font-size: 1.5em;
	letter-spacing: 0.2em;
	margin-bottom: 2em;
}

.heading > div {
	display: block;
	font-size: 3em;
	font-family: var(--display-font);
	line-height: 1;
	color: #333;
	letter-spacing: 0.1em;
}

.heading.white > div {
	color: #fff;
}

.heading > div::first-letter {
	color: var(--main-color);
}

.heading.white > div::first-letter {
	color: #fff;
}

.heading > div:after {
	content: '';
	display: block;
	width: 2em;
	height: 5px;
	background: linear-gradient(to right, var(--main-color) 0%, var(--main-color) 50%, #333 50%);
	margin: 0.5em 0;
}

.heading.white > div:after {
	background: #fff;
}

.heading.center {
	text-align: center;
}

.heading.center > div:after {
	transform: translateX(-50%);
	position: relative;
	left: 50%;
}

.heading2 {
	display: flex;
	font-size: 1.5rem;
	letter-spacing: 0.2em;
	margin-bottom: 1em;
}

.heading2:before {
	content: '';
	display: block;
	width: 1.75em;
	height: 1.75em;
	background-color: var(--main-color);
	margin-right: 1em;
}

.button-wrap {
	margin-top: 2rem;
}

.button-wrap.center {
	text-align: center;
}

.button {
	display: inline-block;
	background-color: var(--main-color);
	color: #fff;
	font-weight: 700;
	padding: 1em 3em 1em 2em;
	position: relative;
	transition: all 0.3s ease;
}

.button:before {
	content: '';
	display: block;
	border-top: 4px solid transparent;
	border-left: 4px solid #fff;
	border-right: 4px solid transparent;
	border-bottom: 4px solid transparent;
	position: absolute;
	top: calc(50% - 4px);
	right: 1.5em;
	transition: all 0.3s ease;
}

.button.white {
	background-color: #fff;
	color: var(--main-color);
}

.button.white:before {
	border-left: 4px solid var(--main-color);
}

.button:hover {
	opacity: 0.7;
	transition: all 0.3s ease;
}
	
.button:hover:before {
	right: 1em;
	transition: all 0.3s ease;
}

.table {
	width: 100%;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
}

.table th {
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	padding: 1em 2em;
	background-color: #eee;
}

.table td {
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	padding: 1em 2em;
}

@media (max-width: 768px) {
	.table th,
	.table td {
		display: block;
		width: 100%;
		padding: 1rem;
	}
	
	.section-padding {
		padding: 4rem 1rem;
	}

	.section-padding-low {
		padding: 2rem 1rem;
	}
	
	.heading > div {
		font-size: 2rem;
	}
	
	.heading > h2 {
		margin-bottom: 1em;
	}
}


/* --------------------------
    header
-------------------------- */
/* header */
header {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 80px;
	position: fixed;
	z-index: 253;
	transition: all 0.3s ease;
}

header.fixed {
	height: 50px;
	background-color: rgba(255, 255, 255, 0.9);
	border-bottom: 1px solid #eee;
	transition: all 0.3s ease;
}

#header-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 256px;
	height: 100%;
	color: #fff;
	background-color: var(--main-color);
	transition: all 0.3s ease;
}

header.fixed #header-logo {
	width: 192px;
	transition: all 0.3s ease;
}

#header-logo > img {
	width: 192px;
}

header.fixed #header-logo > img {
	width: 128px;
}

#header-menu {
	list-style-type: none;
	display: flex;
	align-self: center;
	margin-right: 2rem;
}

#header-menu > li + li {
	margin-left: 2em;
}

#header-menu > li > a {
	color: #fff;
	font-weight: 700;
	transition: all 0.3s ease;
}

header.fixed #header-menu > li > a {
	color: #333;
	transition: all 0.3s ease;
}

@media (max-width: 1200px) {
	header {
		height: 50px;
	}
	
	#header-menu {
		display: none;
	}
	
	#header-logo,
	header.fixed #header-logo {
		width: 128px;
		transition: all 0.3s ease;
	}
	
	#header-logo > img {
		width: 96px;
	}

	header.fixed #header-logo > img {
		width: 96px;
	}
}

/* drawer */
/* drawer */
#drawer {
	display: none;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 255;
	width: 50px;
	height: 50px;
	background-color: var(--main-color);
}

.drawer-unshown {
	display: none;
}

#drawer-open {
    display: inline-flex;
    flex-flow: column;
    width: 1.5rem;
    height: 1.5rem;
    justify-content: space-around;
    padding: 1rem 0;
	margin-left: 0;
}

#drawer-open > span {
	display: block;
	width: 100%;
	height: 1px;
}

#drawer-open:before {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	margin-top: -0.75rem;
}

#drawer-open:after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	margin-bottom: -0.75rem;
}

#drawer-open > span,
#drawer-open:before,
#drawer-open:after {
	background-color: #fff;
}

#drawer-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: .3s ease-in-out;
}

#drawer-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 90%;
  max-width: 330px;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  transition: 0.3s ease-in-out;
  -webkit-transform: translateX(105%);
  transform: translateX(105%);
}

#drawer-input:checked ~ #drawer-close {
  display: block;
  opacity: .5;
}

#drawer-input:checked ~ #drawer-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

#drawer-content {
	color: #333;
}

#menu-mobile {
	list-style-type: none;
}

#drawer-input ~ #drawer-content #drawer-close2,
#drawer-input ~ #drawer-content #menu-mobile > li > a {
	padding: 1em;
	text-align: center;
	display: block;
	position: relative;
	color: #333;
	border-bottom: 1px solid #aaa;
	opacity: 0;
	text-decoration: none;
}

#drawer-input:checked ~ #drawer-content #drawer-close2,
#drawer-input:checked ~ #drawer-content #menu-mobile > li > a {
	opacity: 1;
}

#mobile-menu {
	list-style-type: none;
	border-bottom: 1px solid var(--main-color-pale);
}

#mobile-menu > li {
	border-bottom: 1px solid #aaa;
}

#mobile-menu > li > a {
	display: block;
	padding: 1em 2em;
}

#mobile-menu > li > ul {
	border-top: 1px solid #aaa;
}

#mobile-menu > li > ul > li {
	border-bottom: 1px solid #aaa;
}

#mobile-menu > li > ul > li > a {
	display: block;
	padding: 1em 2em;
	color: #333;
	font-size: 0.75rem;
}

#mobile-menu > li > ul > li > a:before {
    content: '\f138';
    margin-right: 1em;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

@media (max-width: 1200px) {
	#drawer {
		display: flex;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 0;
		right: 0;
	}
}

/* --------------------------
    footer
-------------------------- */
footer {
	color: #fff;
	background-color: #333;
	font-size: 0.75rem;
}

footer a {
	color: #fff;
}

footer > div:first-of-type {
	text-align: center;
}

#footer-logo {
	display: inline-block;
	margin-bottom: 1rem;
}

#footer-logo > img {
	width: 192px;
}

#menu-footer {
	list-style-type: none;
	display: flex;
	justify-content: center;
	margin-top: 4rem;
}

#menu-footer > li {
	display: flex;
}

#menu-footer > li + li:before {
	content: '';
	display: block;
	height: 100%;
	border-left: 1px solid #555;
	margin: 0 1em;
}

#copyright {
	font-size: 0.75rem;
	height: 3em;
	background-color: #222;
	line-height: 3em;
	text-align: center;
}

@media (max-width: 768px) {
	#menu-footer {
		flex-flow: column;
		align-items: center;
		margin-top: 2rem;
	}
	
	#menu-footer > li + li {
		margin-top: 1em;
	}
	
	#menu-footer > li + li:before {
		display: none;
	}
}

/* part contact */
#part-contact {
	color: #fff;
	background: linear-gradient(to top, #333 0%, #333 50%, transparent 50%);
}

#part-contact > div {
	display: flex;
	width: 90%;
	margin: 0 auto;
	background-color: var(--main-color);
}

#part-contact > div > div {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 50%;
	background-color: var(--main-color);
	padding: 4rem;
}

#part-contact > div > div + div {
	border-left: 1px solid #fff;
}

#part-contact > div > div > h3 {
	display: flex;
	flex-flow: column;
	align-items: center;
	font-size: 1rem;
	margin-bottom: 2rem;
}

#part-contact > div > div > h3:before {
	content: attr(data-text);
	font-family: var(--display-font);
	font-size: 2rem;
}

#part-contact-tel {
	font-family: var(--display-font);
	font-size: 2rem;
}

#part-contact-tel:before {
	content: 'tel.';
	font-size: 0.75em;
}

@media (max-width: 768px) {
	#part-contact > div {
		flex-flow: column;
	}
	
	#part-contact > div > div {
		width: 100%;
		padding: 2rem;
	}
	
	#part-contact > div > div + div {
		border-left: none;
		border-top: 1px solid #fff;
	}
	
	#part-contact-tel {
		font-size: 1.5rem;
	}
}

/* --------------------------
    page
-------------------------- */
#page-header {
	height: 300px;
	color: #fff;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

#page-header:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(/dogaworks/wp-content/uploads/2021/09/studiomedia_exterior.jpeg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	filter: blur(10px) brightness(0.5) grayscale(1);
	transform: scale(1.2);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#page-header a {
	color: #fff;
}

#page-header > div {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 80px 1rem 0 1rem;
}

#breadcrumb {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75rem;
}

#breadcrumb > li + li:before {
	content: '/';
	margin: 0 1em;
}

#page-wrap {
	margin: 4rem auto;
}

#page-wrap.sidebar {
	display: flex;
	justify-content: space-between;
	margin: 4rem auto;
}

#page-wrap.sidebar > #page-content {
	width: calc(100% - 300px);
	padding: 0 1rem;
}

@media (max-width: 768px) {
	#page-wrap.sidebar {
		flex-flow: column;
		margin: 2rem auto;
	}
	
	#page-wrap.sidebar >#page-content {
		width: 100%;
		margin-bottom: 2rem;
	}
	
	#page-header {
		height: 150px;
	}
	
	#page-header > div {
		padding: 50px 1rem 0 1rem;
	}
	
	#page-header > div > h2 {
		font-size: 1rem;
	}
	
	#breadcrumb {
		font-size: 10px;
	}
}

/* --------------------------
    sidebar
-------------------------- */
#sidebar {
	width: 300px;
	padding: 0 1rem;
}

#sidebar > div + div {
	margin-top: 1rem;
}

#sidebar > div > h3 {
	border-left: 2px solid var(--main-color);
	padding-left: 1em;
	margin-bottom: 1em;
}

#sidebar ul {
	list-style-type: none;
}

#sidebar ul > li + li {
	border-top: 1px solid #ddd;
}

#sidebar ul > li > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0;
}

#sidebar ul > li > a:after {
	display: block;
	content: '';
	border-top: 5px solid transparent;
	border-left: 5px solid var(--main-color);
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	margin-left: 10px;
	margin-right: 5px;
}

#sidebar > div > a > img {
	transition: all 0.3s ease;
}

#sidebar > div > a > img:hover {
	opacity: 0.7;
	transition: all 0.3s ease;
}

@media (max-width: 768px) {
	#sidebar {
		display: none;
		width: 100%;
	}
}

/* --------------------------
    archive
-------------------------- */
/* archive */
.archive-list {
	list-style-type: none;
}

.archive-list > li {
	padding: 1rem 0;
}

.archive-list > li + li {
	border-top: 1px solid #ddd;
}

.archive-list > li > a {
	display: block;
}

.archive-list > li > a > article {
	display: flex;
	align-items: center;
}

.archive-list > li > a > article > .thumb {
	width: 30%;
	padding-top: 20%;
	background-color: #eee;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 1rem;
}

.archive-list > li > a > article > .info {
	width: calc(70% - 1rem);
	color: #333;
}

.archive-list > li > a > article > .info > time {
	display: block;
	font-family: var(--display-font);
	font-size: 0.75rem;
	margin-bottom: 0.5rem;
}

.archive-list > li > a > article > .info > .category {
	margin-bottom: 0.5rem;
}

.archive-list > li > a > article > .info > .category > span {
	display: inline-block;
	font-size: 10px;
	padding: 0.25em 0.75em;
	margin: 0 0.5em 0.5em 0;
	background-color: var(--main-color);
	color: #fff;
	border-radius: 3px;
}

.archive-list > li > a > article > .info > h3 {
	font-size: 1rem;
	margin-bottom: 1em;
}

@media (max-width: 768px) {
	.archive-list > li > a > article {
		flex-flow: column;
	}
	
	.archive-list > li > a > article > .thumb {
		width: 100%;
		padding-top: 75%;
		margin-right: 0;
		margin-bottom: 1rem;
	}
	
	.archive-list > li > a > article > .info {
		width: 100%;
	}
}

/* archive pagination */
#pagination {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

#pagination > * {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
	letter-spacing: 0;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	border: 1px solid var(--main-color);
	color: var(--main-color);
	margin: 0 0.5em;
	transition: all 0.3s ease;
}

#pagination > span,
#pagination > a:hover {
	border: 1px solid var(--main-color);
	background-color: var(--main-color);
	color: #fff;
	transition: all 0.3s ease;
}


/* --------------------------
    single
-------------------------- */
/* single */
#single-date {
	display: block;
	color: var(--main-color);
	font-weight: 700;
	margin-bottom: 2rem;
}

.single-content > section:not(.plain) + section:not(.plain):before {
	content: '';
	display: block;
	width: 100%;
	margin: 4rem 0;
}

.single-content > section:not(.plain) > section:not(.plain) + section:not(.plain) {
	margin-top: 4rem;
}

.single-content h1:not(.plain),
.single-content h2:not(.plain) {
	display: flex;
	flex-flow: column;
	border-left: 4px solid var(--main-color);
	padding: 0.5em 1em;
	background-color: #f5f5f5;
	margin-bottom: 1em;
	position: relative;
}

.single-content h3:not(.plain) {
	border-left: 2px solid var(--main-color);
	padding-left: 1em;
	font-weight: 500;
	margin-bottom: 1em;
}

.single-content h4:not(.plain) {
	border-left: 1px solid var(--main-color);
	padding-left: 1em;
	font-weight: 500;
	margin-bottom: 1em;
}

.single-content h5:not(.plain),
.single-content h6:not(.plain) {
	color: var(--main-color);
	font-weight: 500;
	font-size: 1rem;
	margin-bottom: 1em;
}

.single-content ul:not(.plain),
.single-content ol:not(.plain) {
	padding: 2rem 2rem 2rem 3rem;
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
	margin-bottom: 2rem;
}

.single-content ul:not(.plain) > li + li,
.single-content ol:not(.plain) > li + li {
	margin-top: 1rem;
}

.single-content ul:not(.plain),
.single-content ol:not(.plain) {
	padding: 2rem 2rem 2rem 3rem;
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
	margin-bottom: 2rem;
}

.single-content ul:not(.plain) > li + li,
.single-content ol:not(.plain) > li + li {
	margin-top: 0.5rem;
}

.single-content blockquote:not(.plain) {
	padding: 2rem;
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
	margin-bottom: 2rem;
}

.single-content p:not(.plain) {
	margin-bottom: 1rem;
}

.single-content a:not(.plain) {
	color: var(--main-color);
	text-decoration: underline;
}

.single-content a:not(.plain):hover {
	opacity: 0.7;
}

.single-content strong:not(.plain) {
	color: var(--main-color);
}

.single-content img:not(.plain) {
	margin-bottom: 2rem;
}

.single-content img.alignleft:not(.plain) {
	float: left;
	margin: 0 2rem 2rem 0;
}

.single-content img.alignright:not(.plain) {
	float: right;
	margin: 0 0 2rem 2rem;
}

.single-content img.aligncenter:not(.plain) {
	margin: 0 auto 2rem auto;
}

@media (max-width: 768px) {
	.single-content h1:not(.plain),
	.single-content h2:not(.plain),
	.single-content h3:not(.plain) {
		font-size: 1rem;
	}
	
	.single-content img:not(.plain),
	.single-content img.alignleft:not(.plain),
	.single-content img.alignright:not(.plain),
	.single-content img.aligncenter:not(.plain) {
		float: none;
		margin: 0 auto 2rem auto;
	}
	
	.single-content table th,
	.single-content table td {
		display: block;
		width: 100%;
	}
}

/* single pagination */
#single-pagination {
	list-style-type: none;
	display: flex;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 1rem 0;
	margin-top: 2rem;
}

#single-pagination > li {
	width: 50%;
}

#single-pagination > li + li {
	border-left: 1px solid #ddd;
}

#single-pagination > li > a {
	display: block;
	color: #333;
	padding: 1rem 3rem;
	position: relative;
}

#single-pagination > li:first-of-type > a:before {
	content: '';
	display: block;
	border-top: 5px solid transparent;
	border-right: 5px solid var(--main-color);
	border-left: 5px solid transparent;
	border-bottom: 5px solid transparent;
	color: var(--main-color);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

#single-pagination > li:last-of-type > a:before {
	content: '';
	display: block;
	border-top: 5px solid transparent;
	border-left: 5px solid var(--main-color);
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 768px) {
	#single-pagination {
		flex-flow: column;
		padding: 0;
	}
	
	#single-pagination > li {
		width: 100%;
	}
	
	#single-pagination > li + li {
		border-left: none;
		border-top: 1px solid #ddd;
	}
}


/* --------------------------
    top
-------------------------- */
#top-main-banner {
	width: 100%;
	height: calc(100vh - 80px);
	background-color: #eee;
	position: relative;
	padding: 3vw;
}

#top-movie {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: brightness(0.5);
	position: absolute;
	top: 0;
	left: 0;
}

#top-main-banner > div {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
	transform: translate(-50%, -50%);
}

#top-main-banner > div > h2 {
	font-size: 3vw;
	white-space: nowrap;
	letter-spacing: 0.2em;
}

@media (max-width: 768px) {
	#top-main-banner > div > h2 {
		font-size: 5vw;
	}
}

#top-news > div:first-of-type {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 2rem); 
	padding: 2rem 4rem;
	color: #fff;
	position: relative;
	z-index: 1;
}

#top-news > div:first-of-type a {
	color: #fff;
}

#top-news > div:first-of-type:before {
	content: '';
	display: block;
	width: calc((100vw - 100%) / 2 + 100%);
	height: 100%;
	background-color: #333;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

#top-news > div:first-of-type > .heading {
	width: 30%;
	margin-bottom: 0;
}

#top-news > div:first-of-type > .heading > h2 {
	margin-bottom: 0;
}

#top-news-list {
	width: 70%;
	list-style-type: none;
}

#top-news-list > li + li {
	border-top: 1px solid #555;
}

#top-news-list > li > a {
	display: block;
}

#top-news-list > li > a > article {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em 0;
	font-size: 0.85rem;
}

#top-news-list > li > a > article > time {
	font-size: 0.85rem;
	font-family: var(--display-font);
	width: 7em;
}

#top-news-list > li > a > article > h3 {
	font-size: 0.85rem;
	width: calc(100% - 8em);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
}

@media (max-width: 768px) {
	#top-news > div:first-of-type {
		flex-flow: column;
		align-items: flex-start;
		padding: 1rem;
	}
	
	#top-news > div:first-of-type > .heading {
		display: none;
	}
	
	#top-news-list {
		width: 100%;
	}
	
	#top-news-list > li > a > article {
		flex-flow: column;
		padding: 0;
	}
	
	#top-news-list > li > a > article > time {
		width: 100%;
		font-size: 0.75rem;
	}
	
	#top-news-list > li > a > article > h3 {
		width: 100%;
		font-size: 0.75rem;
	}
}

#top-offer .heading > h2 {
	font-size: 2rem;
}

#top-offer > div {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#top-offer > div > div:nth-of-type(1) {
	width: calc(100% / 3 - 1rem);
}

#top-offer > div > div:nth-of-type(2)  {
	display: flex;
	justify-content: space-between;
	width: calc(100% / 3 * 2 - 1rem);
}

#top-offer > div > div:nth-of-type(2) > div {
	width: calc(50% - 1rem);
}

#top-offer > div > div:nth-of-type(3) {
	display: none;
	width: 100%;
}

#top-offer > div > div > div > figure {
	padding-top: 56.25%;
	background-color: #eee;
	margin-bottom: 1rem;
	position: relative;
}

#top-offer > div > div > div > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

#top-offer > div > div > div > div > h3 {
	font-size: 1.5rem;
	margin-bottom: 1em;
}

#top-offer > div > div > div > div > h3:first-letter {
	font-size: 1.5em;
	font-family: var(--display-font);
	letter-spacing: 0.2em;
	color: var(--main-color);
}

@media (max-width: 768px) {
	#top-offer > div {
		flex-flow: column;
	}
	
	#top-offer .heading > div {
		display: flex;
		flex-flow: column;
		align-items: center;
	}
	
	#top-offer .heading > h2 {
		font-size: 1.25rem;
		text-align: center;
	}
	
	#top-offer > div > div:nth-of-type(1) {
		width: 100%;
	}
	
	#top-offer > div > div:nth-of-type(1) .button-wrap {
		display: none;
	}
	
	#top-offer > div > div:nth-of-type(2) {
		width: 100%;
		flex-flow: column;
	}
	
	#top-offer > div > div:nth-of-type(2) > div {
		width: 100%;
	}
	
	#top-offer > div > div:nth-of-type(2) > div + div {
		margin-top: 2rem;
	}
	
	#top-offer > div > div:nth-of-type(3) {
		display: block;
	}
	
	#top-offer > div > div > div > div > h3 {
		font-size: 1.25rem;
		text-align: center;
	}
}

#top-service {
	background: linear-gradient(-60deg, #eee 0%, #eee 50%, #f5f5f5 50%);
}

#top-service-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

#top-service-list > li {
	width: calc(100% / 4 - 1rem);
	margin-bottom: calc(4rem / 3);
	padding-top: calc((100% / 4 - 1rem) / 2);
	background-color: var(--main-color);
	position: relative;
}

#top-service-list > li:not(:nth-of-type(4n)) {
	margin-right: calc(4rem / 3);
}

#top-service-list > li > h3 {
	display: flex;
	flex-flow: column;
	align-items: center;
	width: 100%;
	font-size: 1rem;
	text-align: center;
	color: #fff;
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
}

#top-service-list > li > h3:before {
	content: attr(data-text);
	font-family: var(--display-font);
	font-size: 1rem;
}

@media (max-width: 768px) {
	#top-service-list > li {
		width: calc(50% - 0.5rem);
		padding-top: calc((100% / 2 - 1rem) / 2);
	}

	#top-service-list > li:not(:nth-of-type(4n)) {
		margin-right: 0;
	}

	#top-service-list > li:nth-of-type(odd) {
		margin-right: 1rem;
	}
	
	#top-service-list > li > h3 {
		font-size: 0.75rem;
	}
}

#works-category-list {
	list-style-type: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	font-weight: 700;
	margin-bottom: 4rem;
}

#works-category-list > li {
	margin: 0.5em;
}

#works-category-list > li > a {
	display: inline-block;
	padding: 0.5em 1em;
	border-radius: 5px;
	background-color: #eee;
}

#works-category-list > li > a.current-item,
#works-category-list > li > a:hover {
	background-color: var(--main-color);
	color: #fff;
}

#top-works-list,
.works-archive-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

#top-works-list > li {
	width: calc(100% / 4 - 1rem);
	margin-bottom: calc(4rem / 3);
	position: relative;
}

#top-works-list > li:not(:nth-of-type(4n)) {
	margin-right: calc(4rem / 3);
}

#top-works-list > li > a > figure {
	padding-top: 56.25%;
	background-color: #eee;
	margin-bottom: 1rem;
	position: relative;
}

#top-works-list > li > a > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

#top-works-list > li > a  > h3 {
	font-size: 1rem;
	height: calc(1.75em * 2);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

#top-works-list > li > a > .company {
	font-size: 0.75rem;
}

#top-works-list > li > a > .category {
	margin-top: 0.5rem;
}

#top-works-list > li > a > .category > span {
	background-color: #333;
	color: #fff;
	line-height: 1;
	font-size: 10px;
	padding: 0.5em;
	max-width: 15em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: hidden;
}

.works-archive-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

.works-archive-list > li {
	width: calc(100% / 3 - 1rem);
	margin-bottom: calc(3rem / 2);
	position: relative;
}

.works-archive-list > li:not(:nth-of-type(3n)) {
	margin-right: calc(3rem / 2);
}

.works-archive-list > li > a > figure {
	padding-top: 56.25%;
	background-color: #eee;
	margin-bottom: 1rem;
	position: relative;
}

.works-archive-list > li > a > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

.works-archive-list > li > a  > h3 {
	font-size: 1rem;
	height: calc(1.75em * 2);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.works-archive-list > li > a > .company {
	font-size: 0.75rem;
}

.works-archive-list > li > a > .category {
	margin-top: 0.5rem;
}

.works-archive-list > li > a > .category > span {
	background-color: #333;
	color: #fff;
	line-height: 1;
	font-size: 10px;
	padding: 0.5em;
	max-width: 15em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: hidden;
}

@media (max-width: 768px) {
	#works-category-list {
		font-size: 0.75rem;
	}
	
	#top-works-list > li {
		width: calc(50% - 0.5rem);
		margin-bottom: 2rem;
	}
	
	#top-works-list > li:not(:nth-of-type(4n)) {
		margin-right: 0;
	}
	
	#top-works-list > li:nth-of-type(odd) {
		margin-right: 1rem;
	}
	
	#top-works-list > li > a > h3 {
		font-size: 0.75rem;
	}
	
	.works-archive-list > li {
		width: calc(50% - 0.5rem);
		margin-bottom: 2rem;
	}
	
	.works-archive-list > li:not(:nth-of-type(3n)) {
		margin-right: 0;
	}
	
	.works-archive-list > li:nth-of-type(odd) {
		margin-right: 1rem;
	}
	
	.works-archive-list > li > a  > h3 {
		font-size: 0.75rem;
	}
}


/* --------------------------
    contact
-------------------------- */
.contactform table {
	width: 100%;
	border-top: 1px solid #ddd;
	margin: 1rem 0;
}

.contactform table th {
	text-align: left;
	padding: 1rem 4rem 1rem 1rem;
	position: relative;
	border-bottom: 1px solid #ddd;
}

.contactform table td {
	padding: 1rem;
	border-bottom: 1px solid #ddd;
}

.contactform table th.required:after {
	content: '必 須';
	display: block;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0;
	padding: 0.5em 1em;
	border-radius: 3px;
	background-color: var(--main-color);
	color: #fff;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
}

.contactform table th:not(.required):after {
	content: '任 意';
	display: block;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0;
	padding: 0.5em 1em;
	border-radius: 3px;
	background-color: #ddd;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
}

.contactform table td input[type=text],
.contactform table td input[type=email],
.contactform table td input[type=tel],
.contactform table td textarea {
	display: block;
	width: 100%;
	border-radius: 3px;
	border: none;
	background-color: #eee;
	padding: 0.5em 1em;
}

.contactform table td input[type=number] {
	display: block;
	border-radius: 3px;
	border: none;
	background-color: #eee;
	padding: 0.5em 1em;
}

.contactform table td input.inline {
	display: inline-block;
}

.contactform table td input.readonly {
	background-color: transparent;
}

.contactform table td input.readonly:focus {
	outline: none;
}

.agreement-wrap {
	text-align: center;
	margin-bottom: 1rem;
}

.contactform input[name=agreement] {
	appearance: none;
	-webkit-appearance: none;
	border: none;
}

.contactform input[name=agreement] + span {
	display: flex;
	justify-content: center;
	align-items: center;
}

.contactform input[name=agreement] + span:hover {
	cursor: pointer;
}

.contactform input[name=agreement] + span:before {
	content: '';
	display: inline-block;
	width: 3rem;
	height: 3rem;
	border: 1px solid #aaa;
	border-radius: 3px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGZvY3VzYWJsZT0iZmFsc2UiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIgoJIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojQUFBQUFBO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTE3My45LDQzOS40TDcuNSwyNzNjLTEwLTEwLTEwLTI2LjIsMC0zNi4ybDM2LjItMzYuMmMxMC0xMCwyNi4yLTEwLDM2LjIsMEwxOTIsMzEyLjdMNDMyLjEsNzIuNgoJYzEwLTEwLDI2LjItMTAsMzYuMiwwbDM2LjIsMzYuMmMxMCwxMCwxMCwyNi4yLDAsMzYuMkwyMTAuMSw0MzkuNEMyMDAuMSw0NDkuNCwxODMuOSw0NDkuNCwxNzMuOSw0MzkuNEwxNzMuOSw0MzkuNHoiLz4KPC9zdmc+Cg==);
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 1rem;
	background-color: #fff;
}

.contactform input[name=agreement]:checked + span:before {
	content: '';
	display: inline-block;
	width: 3rem;
	height: 3rem;
	border: 1px solid #333;
	border-radius: 3px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGVjayIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWNoZWNrIGZhLXctMTYiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ij48L3BhdGg+PC9zdmc+);
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
}


.contactform .submit-wrap {
	text-align: center;
}

.contactform .submit-wrap > input[type=submit] {
	width: 100%;
	max-width: 280px;
	border: none;
	color: #fff;
	background-color: var(--main-color);
	padding: 1rem 2rem;
	border-radius: 5px;
}

.contactform .submit-wrap > input[type=submit]:disabled {
	background-color: #ddd;
}

.submit-wrap > spa {
	display: none !important;
}

div.wpcf7 .ajax-loader {
	display: block;
	margin: auto;
}

@media (max-width: 768px) {
	.contactform > table th {
		display: block;
		background-color: var(--main-color-pale);
	}
	
	.contactform > table td {
		display: block;
	}
}



/* --------------------------
    company
-------------------------- */
.company-about:after {
	content:'スタジオメディアについて';
}

.company-profile:after {
	content:'会社概要';
}

.company-history:after {
	content:'沿革';
}

.company-access:after {
	content:'アクセス';
}

.company-about:after,
.company-profile:after,
.company-history:after,
.company-access:after {
	font-size: 0.85rem;
	display: block;
	font-weight: lighter;
}

.align-center {
	margin:0 auto 1em auto;
}

.align-center > p {
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
}

.align-center > img {
	width: 100%;
	margin: auto;
}

table.company {
	width: 100%;
	margin: 0 auto;
	border-bottom: 1px solid #888;
	margin-top: 2rem;
}

table.company th {
	width: 30%;
	padding: 1rem;
	border-top: 1px solid #888;
	color: #333;
}

table.company td {
	width: 70%;
	padding: 1rem;
	border-top: 1px solid #888;
	color: #333;
}

.shop {
    width: 49%;
    display: inline-block;
}

.company-flex {
	display: flex;
	flex-flow: row-reverse;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
}

.company-flex > img,
.company-flex > div {
	width: calc(50% - 1rem);
}

.company-flex > div > span {
	display: block;
	text-align: center;
	font-size: 1.4rem;
	margin: 0 auto 1rem;
}

@media (max-width: 768px) {
	table.company th {
		display: block;
		width: auto;
	}

	table.company td {
		display: block;
		width: auto;
		text-align: center;
	}
	
	.company-about:after,
	.company-profile:after,
	.company-history:after,
	.company-access:after {
	font-size: 0.65rem;
	display: block;
	font-weight: lighter;
	}
	
	.company-flex {
		display: block;
	}
	
	.company-flex > img,
	.company-flex > div {
	width: 100%;
	}
	
	.company-flex > div {
		margin-top: 1rem;
	}
}

/* --------------------------
    works
-------------------------- */
#works-youtube-embed {
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	background-color: #eee;
}

#works-youtube-embed > iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#works-info .table th {
	white-space: nowrap;
}

#works-info .table td span.category {
	display: inline-block;
	padding: 0.5em 1em;
	background-color: #333;
	color: #fff;
	font-size: 0.75rem;
	margin: 0.25em 0.5em 0.25em 0;
}


/* --------------------------
    youtube6
-------------------------- */
.youtube6-heading {
	display: flex;
	flex-flow: column;
	font-size: 2rem;
	font-family: var(--display-font2);
}

.youtube6-heading.center {
	align-items: center;
}

.youtube6-heading:after {
	content: '';
	display: block;
	width: 3em;
	height: 3px;
	background-color: var(--main-color);
	margin: 1em 0;
}

.youtube6-heading span {
	font-size: 1.5em;
	margin: 0 0.125em;
	color: var(--main-color);
}

#youtube6-problem {
	background-color: #f5f5f5;
	position: relative;
}

#youtube6-problem > div:before {
	content: '';
	display: block;
	width: 50%;
	height: 100%;
	background-image: url(/wp-content/uploads/2021/10/youtube6-trouble.png);
	background-size: contain;
	background-position: center bottom;
	background-repeat: no-repeat;
	position: absolute;
	right: 0;
	bottom: 0;
}

.youtube6-problem-list {
	list-style-type: none;
	width: 60%;
	font-family: var(--display-font2);
	font-size: 1.25rem;
}

.youtube6-problem-list > li {
	padding: 1rem 1rem 1rem 6rem;
	background-color: #fff;
	position: relative;
}

.youtube6-problem-list > li:before {
	content: '';
	display: block;
	width: calc(1.25rem * 1.75);
	height: calc(1.25rem * 1.75);
	border: 2px solid #777;
	position: absolute;
	top: 1rem;
	left: 2rem;
}

.youtube6-problem-list > li:after {
	content: '';
	display: block;
	width: calc(1.25rem * 1.75);
	height: calc(1.25rem * 1.75 / 2);
	border-left: 4px solid var(--main-color);
	border-bottom: 4px solid var(--main-color);
	transform: rotate(-45deg);
	position: absolute;
	top: 1rem;
	left: calc(2.25rem);
}

.youtube6-problem-list > li + li {
	margin-top: 1rem;
}

#youtube6-copy {
	font-family: var(--display-font2);
	text-align: center;
	font-size: 3vw;
	background: linear-gradient( 
-45deg, var(--main-color) 25%, #c93030 25%, #c93030 50%, var(--main-color) 50%, var(--main-color) 75%, #c93030 75%, #c93030);
	background-size: 30px 30px;
	padding: 3vw;
	position: relative;
}

#youtube6-copy:after {
	content: '';
	display: block;
	border-top: 2rem solid var(--main-color);
	border-left: 2rem solid transparent;
	border-right: 2rem solid transparent;
	border-bottom: 2rem solid transparent;
	position: absolute;
	bottom: -4rem;
	left: calc(50% - 2rem);
}

#youtube6-copy > h2 {
	font-size: 3vw;
	color: #fff;
	text-align: center;
}

#youtube6-whatis > div:first-of-type {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-flow: row-reverse;
}

#youtube6-whatis > div:first-of-type > figure {
	width: calc(50% - 2rem);
	padding-top: calc((50% - 2rem) / 4 * 3);
	background-color: #eee;
	position: relative;
}

#youtube6-whatis > div:first-of-type > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

#youtube6-whatis > div:first-of-type > div {
	width: calc(50% - 1rem);
}

#youtube6-reason {
	background-color: var(--main-color-pale);
}

.youtube6-reason-list {
	list-style-type: none;
	counter-reset: count;
}

.youtube6-reason-list > li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	padding: 2rem;
	counter-increment: count;
}

.youtube6-reason-list > li + li {
	margin-top: 2rem;
}

.youtube6-reason-list > li:nth-of-type(even) {
	flex-flow: row-reverse;
}

.youtube6-reason-list > li > figure {
	width: calc(30% - 2rem);
	padding-top: calc((30% - 2rem) / 4 * 3);
	background-color: #eee;
	position: relative;
}

.youtube6-reason-list > li > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

.youtube6-reason-list > li > div {
	width: calc(70% - 1rem);
}

.youtube6-reason-list > li > div > h3 {
	display: flex;
	align-items: flex-end;
	font-family: var(--display-font2);
	font-size: 1.5rem;
	color: var(--main-color);
	margin-bottom: 1em;
}

.youtube6-reason-list > li > div > h3:before {
	content: counter(count)'.';
	font-family: var(--display-font);
	font-size: 1.5em;
	line-height: 1.25;
	margin-right: 0.5em;
}

.youtube6-flow-list {
	list-style-type: none;
	counter-reset: count;
}

.youtube6-flow-list  > li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	counter-increment: count;
	background-color: #fff;
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
	position: relative;
}

.youtube6-flow-list  > li + li {
	margin-top: 2rem;
}

.youtube6-flow-list  > li + li:before {
	content: '';
	display: block;
	border-top: 1rem solid var(--main-color);
	border-left: 2rem solid transparent;
	border-right: 2rem solid transparent;
	border-bottom: 1rem solid transparent;
	position: absolute;
	left: calc(50% - 2rem);
	top: -1.5rem;
}

.youtube6-flow-list  > li:after {
	content: counter(count);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	font-size: 1.75rem;
	font-family: var(--display-font);
	color: #fff;
	line-height: 1;
	letter-spacing: 0;
	border-radius: 50%;
	background-color: var(--main-color);
	position: absolute;
	top: -0.4em;
	left: -0.4em;
}

.youtube6-flow-list  > li > figure {
	width: 30%;
	padding-top: calc(30% / 4 * 3);
	background-color: #eee;
	position: relative;
}

.youtube6-flow-list  > li > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	right: 0;
}

.youtube6-flow-list  > li > div {
	width: calc(70% - 2rem);
}

.youtube6-flow-list  > li > div > h3 {
	font-family: var(--display-font2);
	color: var(--main-color);
	margin-bottom: 1em;
}

@media (max-width: 768px) {
	.youtube6-heading {
		font-size: 1.25rem;
		align-items: center;
	}
	
	#youtube6-problem {
		padding-bottom: 200px;
	}
	
	#youtube6-problem > div:before {
		width: 360px;
		height: 240px;
		right: calc(50% - 180px);
	}
	
	.youtube6-problem-list {
		width: 100%;
		font-size: 1rem;
	}
	
	.youtube6-problem-list > li {
		padding: 1rem 1rem 1rem 4rem;
	}
	
	.youtube6-problem-list > li:before {
		left: 1rem;
	}
	
	.youtube6-problem-list > li:after {
		left: 1.25rem;
	}
	
	#youtube6-copy > h2 {
		font-size: 5vw;
	}
	
	#youtube6-whatis > div:first-of-type {
		flex-flow: column;
	}
	
	#youtube6-whatis > div:first-of-type > figure {
		width: 100%;
		padding-top: 75%;
	}
	
	#youtube6-whatis > div:first-of-type > div {
		width: 100%;
		margin-top: 2rem;
	}
	
	.youtube6-reason-list > li,
	.youtube6-reason-list > li:nth-of-type(even) {
		flex-flow: column;
	}
	
	.youtube6-reason-list > li > figure {
		width: 100%;
		padding-top: 75%;
	}
	
	.youtube6-reason-list > li > div,
	.youtube6-reason-list > li > div {
		width: 100%;
		margin-top: 2rem;
	}
	
	.youtube6-reason-list > li > div > h3 {
		align-items: flex-start;
		font-size: 1.25rem;
	}
	
	.youtube6-flow-list > li {
		flex-flow: column;
	}
	
	.youtube6-flow-list > li > figure {
		width: 100%;
		padding-top: 75%;
	}
	
	.youtube6-flow-list > li > div {
		width: 100%;
		margin-top: 2rem;
	}
	
	.youtube6-flow-list > li > div > h3 {
		font-size: 1.25rem;
	}
}


/* --------------------------
    recruit-video
-------------------------- */
.question:before {
	content:"Q";
	font-weight: bold;
	background: var(--main-color);
	color: #fff;
	font-size: 1rem;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.4;
	text-align: center;	
	display: inline-block;
	border-radius: 50%;	
	margin-right: 0.5em;
}

.basic-rate {
	font-size: 1.2rem;
	font-weight: bold;
}