@charset "UTF-8";

/* =======================================================================================
	カスタムプロパティ
======================================================================================= */

:root {
	--container: 1200px;
	--color-key: #83de51;
	--color-sub: #1f2c5a;
	--color-gry: #e7ebf8;
}

@property --count {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}

/* TB/SP */
@media screen and (max-width: 1199px) {
	:root {
		--container: 90%;
	}
}

/* =======================================================================================
	Font
======================================================================================= */
/* noto-sans-jp-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/noto-sans-jp-v53-latin-regular.woff2') format('woff2'); 
}
/* noto-sans-jp-500 - latin */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/noto-sans-jp-v53-latin-500.woff2') format('woff2');
}
/* noto-sans-jp-700 - latin */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/noto-sans-jp-v53-latin-700.woff2') format('woff2'); 
}
/* bebas-neue-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bebas-neue-v16-latin-regular.woff2') format('woff2'); 
}

/* =======================================================================================
	Base
======================================================================================= */

/* Document */

html {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	color: #333;
	font-weight: 400;
	line-height: 1.8;
	overflow: hidden;
	overflow-y: scroll;
}
body {
	max-width: 2560px;
	min-width: var(--container);;
	margin: 0 auto;
	position: relative;
	-webkit-text-size-adjust: 100%;
	position: relative;
}

/* Typography */

body, p, li, dt, dd, tr, th {
	font-size: 16px;
	line-break: strict;
	word-break: break-all;
	word-wrap: break-word;
	letter-spacing: 0.1px;
}
h1,h2,h3,h4,h5 { line-height: 1.6; }

/* Elements */

a {
	color:#333;
	text-decoration: none;
	transition: color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}
img {
	max-width: 100%;
	height: auto;
	transition: opacity 0.3s ease;
}
ul { list-style: none; }

br.br-pc { display: block; }
br.br-tb,
br.br-sp { display: none; }

/* highlights */

::selection {
	color: #fff;
	background: #776b74;
}

/* Theme */

.keycolor { color: var(--color-key); }
.subcolor { color: var(--color-sub); }

/* TB/SP */
@media screen and (max-width: 1199px) {

	body {
		min-width: auto;
		font-size: 14px
	}
	body, p, li, dt, dd, tr, th { font-size: 14px; }

	br.br-pc { display: none; }
	br.br-tb { display: block; }
}

/* SP */
@media screen and (max-width: 639px) {

	body {
		font-size: 13px;
		min-width: 360px;
		letter-spacing: 0.3px;
	}
	h1,h2,h3,h4,h5 { line-height: 1.5; letter-spacing: 0.5px;}
	body, p, li, dt, dd, tr, th { font-size: 13px; letter-spacing: 0.3px;}
	img { width: 100%; }

	br.br-tb { display: none; }
	br.br-sp { display: block; }

}

/* =======================================================================================
	ローディング
======================================================================================= */
/* スケルトン */
.skeleton {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
	position: fixed;       /* 画面全体の中央に固定表示 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;         /* コンテンツより前に */
}

.skeleton img {
	margin-bottom: 20px;
}
.skeleton-line {
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(231,235,248,1) 25%,   /* #83de51 の淡い色 */
    rgba(31, 44, 90, 1) 37%,     /* #1f2c5a の濃い色 */
    rgba(231,235,248,1) 63%    /* 戻す */
  );
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
.skeleton-line:first-child { width: 60%; }
.skeleton-line:nth-child(2) { width: 100%; }
.skeleton-line:nth-child(3) { width: 75%; }

@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* コンテンツのフェード表示：displayは使わない */

.content-wrap {
	animation: fadein 2s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

/* スケルトンもフェードアウトできるように */
.skeleton { transition: opacity 0.2s ease; }


/* =======================================================================================
	Header ナビ
======================================================================================= */
.header {
	width: 100%;
	position: absolute;
	inset: auto 0;
	z-index: 100;
}

.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	position: relative;
	z-index: 101;
}

.header-logo img { width: 160px; }
.header-nav-list {
	display: flex;
	align-items: center;
	gap:40px;
}
.header-nav-link {
	display: block;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
.single-news .header-nav-link { color: #1f2c5a; }

.header-nav-link span {
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	margin-top: 5px;
}
.header-nav-link--btn {
	color: var(--color-sub);
	background: var(--color-key);
	font-size: 32px;
	border-radius: 34px;
	padding-left: 80px;
	padding-right: 80px;
}
.header-nav-link--btn span {
	font-size: 12px;
	margin-top: 0;
}

/* Scrolled */
.header.scrolled {
	position: fixed;
	height: 60px;
	background: rgba(31, 44, 90, 0.9);
	transition: 0.3s;
}
.header.scrolled .header-logo img { width: 120px; }
.header.scrolled .header-nav-list { gap:20px; }
.header.scrolled .header-nav-link {
	font-size: 22px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.single-news .header.scrolled .header-nav-link { color: #fff; }
.single-news .header.scrolled .header-nav-link--btn { color: #1f2c5a; }
.header.scrolled .header-nav-link span{
	display: none;
	margin-top: 0;
}

/* Hamburger */
.hamburger {
	display: none; 
	position: fixed;
	inset: 10px 10px auto auto;
	z-index: 1000;
	width: 48px;
	height: 48px;
	border: none;
	background: rgba(255, 255, 255, 0.7);
	cursor: pointer;
}
.hamburger-line {
	position: absolute;
	left: 11px;
	width: 26px;
	height: 3px;
	background-color: var(--color-sub);
	transition: all .6s;
}
.hamburger-line:nth-of-type(1) { top: 14px; }
.hamburger-line:nth-of-type(2) { top: 23px; }
.hamburger-line:nth-of-type(3) { top: 32px; }
.hamburger.active .hamburger-line { background-color: #fff; }
.hamburger.active .hamburger-line:nth-of-type(1) { transform: translateY(9px) rotate(-45deg); }
.hamburger.active .hamburger-line:nth-of-type(2) { opacity: 0; }
.hamburger.active .hamburger-line:nth-of-type(3) { transform: translateY(-9px) rotate(45deg); }

/* TB/SP */
@media screen and (max-width: 1199px) {
	.header { position: fixed; }
	.header .header-logo img { width: 100px; }
	.single-news .header-nav-link { color: #fff; }
	.single-news .header-nav-link--btn { color: #1f2c5a; }
	.hamburger { display: initial; }
	.header-content {
		position: fixed;
		inset: 0 auto auto 0;
		width: 100%;
		height: 100vh;
		background: rgba(31, 44, 90, 0.9);
		visibility: hidden;
		opacity: 0;
		transition: all .6s;
		z-index: 500;
	}
	.header-content.active {
		visibility: visible;
		opacity: 1;
	}
	.header-nav {
		position: absolute;
		inset: 50% auto auto 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		text-align: center;
	}
	.header-nav-list {
		flex-direction: column;
	}
	.header-nav-item {
		opacity: 0;
		transform: translateY(10px);
		transition: all .6s;
	}
	.header-content.active .header-nav-item {
		opacity: 1;
		transform: translateY(0);
	}
	.header-content.active .header-nav-item:nth-child(1) { transition-delay: 0.1s; }
	.header-content.active .header-nav-item:nth-child(2) { transition-delay: 0.2s; }
	.header-content.active .header-nav-item:nth-child(3) { transition-delay: 0.3s; }
	.header-content.active .header-nav-item:nth-child(4) { transition-delay: 0.4s; }
	.header-content.active .header-nav-item:nth-child(5) { transition-delay: 0.5s; }

}

/* =======================================================================================
	FV
======================================================================================= */

/* TOP --------------------------------------
------------------------------------------- */
/* Slider */
.fv {
	position: relative;
	height: 100%;
}

/* Slick のレイヤーを下に */
.fv-slider .slick-list,
.fv-slider .slick-track { z-index: 1; }
.fv-slider-item {
	height: 1280px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}
.fv-slider-item--bg01 { background-image: url('../img/fv-ph01.webp'); }
.fv-slider-item--bg02 { background-image: url('../img/fv-ph02.webp'); }
.fv-slider-item--bg03 { background-image: url('../img/fv-ph03.webp'); }

/* Dots */
.dots-class button {
	display: none;
	appearance: none;
	outline: none;
	padding: 0;
	border: none;
	background-color: transparent;
}
.dots-class {
	position: absolute;
	inset: auto auto 270px 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	z-index: 10;
}
.dots-class li {
	width: 15px;
	height: 15px;
	background-color: #fff;
	border: 1px solid var(--color-key);
	border-radius: 50%;
	margin-right: 20px;
	cursor: pointer;
	transition: background-color .5s ease;
}
.dots-class li.slick-active { background-color: var(--color-key); }
.dots-class li:last-child { margin-right: 0; }

/* Key Message */
.fv-header {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transform: translateY(-100px);
	z-index: 10;
	pointer-events: none;
}
.fv-header * { pointer-events: auto; }
.fv-header-inner {
	width: var(--container);;
	margin: 0 auto;
}

.fv-ttl {
	color: var(--color-key);
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 150px;
	line-height: 1.0;
	letter-spacing: 0.04em;
	-webkit-text-stroke: 6px var(--color-key);
	text-stroke: 6px var(--color-key);
	margin-bottom: 20px;
}
.fv-ttl .char { 
	opacity: 0;
	display: inline-block;
	animation: fadeInChar 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
	animation-delay: calc(0.06s * var(--char-index));
}
.fv-txt {
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.05em;
	--bg-dur: 1.1s;
	--txt-dur: 1.2s;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
.fv-txt:not(:last-child) { margin-bottom: 20px; }

.fv-txt--top { font-size: 32px; }
.fv-txt--btm { font-size: 26px; }

.fv-txt--bg {
	display: inline-block;
	position: relative;
	padding: 8px 10px;
	z-index: 0;
}
.fv-txt--bg::before {
	content:"";
	position:absolute;
	inset:0;
	background: rgba(40,126,40,.65);
	backdrop-filter: brightness(.6) contrast(1.2) saturate(1.1);
	transform-origin: left center;
	transform: scaleX(0);
	opacity: 0;
	z-index: -1;
	animation: bgSlideIn var(--bg-dur) var(--ease-out) var(--bg-delay,0s) forwards;
}
.fv-txt--char {
	display: inline-block;
	opacity: 0;
	transform: translateX(-200px);
	animation: textIn var(--txt-dur) var(--ease-out) calc(var(--bg-delay,0s) + var(--bg-dur)) forwards;
}

/* 行ごとに遅延 */
.fv-txt--top  { --bg-delay: .60s; }
.fv-txt--btm  { --bg-delay: 1.10s; }

/* 初期はアニメを止める（ローディング中） */
html:not(.is-ready) .fv-ttl .char {
  opacity: 0;
  animation: none !important;
}
html:not(.is-ready) .fv-txt--bg::before {
  transform: scaleX(0);
  opacity: 0;
  animation: none !important;
}
html:not(.is-ready) .fv-txt--char {
  opacity: 0;
  transform: translateX(-200px);
  animation: none !important;
}

/* ローディング終了時にだけアニメ開始 */
html.is-ready .fv-ttl .char {
  animation: fadeInChar 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  animation-delay: calc(0.06s * var(--char-index));
}
html.is-ready .fv-txt--bg::before {
  animation: bgSlideIn var(--bg-dur,1.1s) var(--ease-out,cubic-bezier(0.16, 1, 0.3, 1)) var(--bg-delay,0s) forwards;
}
html.is-ready .fv-txt--char {
  animation: textIn var(--txt-dur,1.2s) var(--ease-out,cubic-bezier(0.16, 1, 0.3, 1)) calc(var(--bg-delay,0s) + var(--bg-dur,1.1s)) forwards;
}

/* デフォルトは非表示（チラ見え防止） */
.skeleton { display: none; }

/* 初回のみ、JSが .show-loading を付けた時だけ表示 */
html.show-loading .skeleton {
  display: flex;
}

/* 通常のフェード表示 */
.content-wrap {
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.content-wrap.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease;
}

/* 2回目以降は即表示 */
html.skip-loading .content-wrap {
  opacity: 1;
  visibility: visible;
}

/* Message */
.fv-message {
	position: absolute;
	inset: auto auto 0 auto;
	width: 100%;
	height: 240px;
	background: rgba(8, 15, 45, 0.7);
	backdrop-filter: brightness(0.6) contrast(1.2) saturate(1.1);
	z-index: 10;
}
.fv-message-content {
	height: 100%;
	display: grid;
	place-items: center;
}
.fv-message-txt {
	color: #fff;
	font-size: 26px;
	font-weight: 700;
	text-align: center;
}

/* TB/SP */
@media screen and (max-width: 1199px) {
	.fv-slider-item { height: 1000px; }
	.dots-class { inset: auto auto 210px 50%; }
	.fv-ttl {
		font-size: 120px;
		margin-bottom: 15px;
	}
	.fv-txt--bg::before { backdrop-filter:none; }
	.fv-txt--top { font-size: 26px; }
	.fv-txt--btm { font-size: 20px; }
	.fv-message { height: 180px; }
	.fv-message-txt { font-size: 20px; }

}
/* 微調整 */
@media screen and (max-width: 799px) {
	.fv-ttl { font-size: 90px; }
	.fv-txt--top { font-size: 18px; }
	.fv-txt--btm { font-size: 15px; }
	.fv-txt:not(:last-child) {margin-bottom: 10px;}

	.fv-slider-item--bg01 { background-image: url('../img/fv-ph01_sp.webp'); }
	.fv-slider-item--bg02 { background-image: url('../img/fv-ph02_sp.webp'); }
	.fv-slider-item--bg03 { background-image: url('../img/fv-ph03_sp.webp'); }
}

/* SP */
@media screen and (max-width: 639px) {
	.fv-slider-item { height: 800px; }
	.dots-class { inset: auto auto 200px 50%; }
	.dots-class li {
		width: 10px;
		height: 10px;
	}
	.fv-header { transform: none; }
	.fv-ttl {
		font-size: 80px;
		-webkit-text-stroke: 2px var(--color-key);
		text-stroke: 2px var(--color-key);
	}
	.fv-message { height: 180px; }
	.fv-message-txt { font-size: 15px; }
}
/* 微調整 */
@media screen and (max-width: 499px) {
	.fv-message-txt { text-align: left; }
	.fv-message-txt br { display: none; }
}

/* 下層 -------------------------------------
------------------------------------------- */
.under-fv {
	background: var(--color-sub);
	height: 500px;
	position: relative;
}
.under-fv-header {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	z-index: 10;
}
.under-fv-header-content {
	display: flex;
	flex-direction: column-reverse;
}
.under-fv-ttl {
	color: var(--color-key);
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 100px;
	line-height: 1.0;
	letter-spacing: 0.04em;
}
.under-fv-ttl--ja {
	color: var(--color-key);
	font-size: 30px;
	font-weight: 700;
}

/* TB/SP */
@media screen and (max-width: 1199px) {

	.under-fv { height: 400px; }
	.under-fv-ttl { font-size: 80px; }
	.under-fv-ttl--ja { font-size: 24px; }

}

/* SP */
@media screen and (max-width: 639px) {

	.under-fv { height: 300px; }
	.under-fv-header-content { transform: translateY(20px); }
	.under-fv-ttl { font-size: 48px; }
	.under-fv-ttl--ja { font-size: 16px; }

}

/* =======================================================================================
	Contents
======================================================================================= */
/* Layout */
.inner {
	width: var(--container);;
	margin: 0 auto;
	position: relative;
	z-index: 10;
}

.section {
	padding: 160px 0;
	position: relative;
}
#under .section { padding: 100px 0; }

/* TB/SP */
@media screen and (max-width: 1199px) {
	.section { padding: 100px 0; }
	#under .section { padding: 80px 0; }
}

/* SP */
@media screen and (max-width: 639px) {
	.section { padding: 60px 0; }
	#under .section { padding: 40px 0; }
}

/* =======================================================================================
	TOP
======================================================================================= */

/* 共通 */

.top-content { position: relative; }

.top-header {
	color: var(--color-sub);
	margin-bottom: 60px;
}

.top-header-ttl {
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 140px;
	line-height: 1.0;
	letter-spacing: 0.04em;
}
.top-header-ttl--ja {
	font-size: 24px;
	font-weight: 700;
}

.top-content-box { margin-bottom: 80px; }

.top-content-ttl {
	color: var(--color-sub);
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 60px;
}
.top-content-txt { font-size: 18px; }
.top-content-txt span { font-weight: 700; }

/* YouTubeリンク */
.top-youtube { background: #e7ebf8; }
.top-youtube-wrap {
  padding: 40px 50px;
	background: #fff;
	border-radius: 10px;
	position: relative;
}
.top-youtube-wrap::before {
    content: "";
    position: absolute;
    inset: 15px;
    border: 3px solid var(--color-key);
    border-radius: 10px;
    pointer-events: none;
}
.top-youtube-header-ttl {
	margin-bottom: 20px;
	padding: 2px 0;
	background: #1f2c5a;
	color: #fff;
	text-align: center;
	border-radius: 5px;
}
.top-youtube-content {
	display: flex;
	align-items: center;
	gap: 30px;
}
.top-youtube-img { width: 320px; }
.top-youtube-text { width: calc(100% - 350px); }
.top-link-btn.diff {
	display: block;
	margin-left: auto;
	color: #fff;
	background: var(--color-sub);
	font-size: 16px;
	font-weight: 700;
	width: 280px;
	padding: 20px;
	border-radius: 34px;
	text-align: center;
	line-height: 1;
	position: relative;
	transition: .3s;
}
.top-link-btn.diff::after {
    content: "";
    position: absolute;
    inset: 50% 20px auto auto;
    transform: translateY(-50%) rotate(45deg);
    width: 16px;
    height: 16px;
    border-top: 3px solid var(--color-key);
    border-right: 3px solid var(--color-key);
}
.top-youtube-wrap a:hover .top-link-btn.diff { opacity: 0.8; }


/* About ZERO2ONE */
.top-about { position: relative; }
.top-about .top-content-box { width: 480px; }
.top-about .top-header-ttl {
	position: absolute;
	top: 50%;
	font-size: 136px;
	line-height: 0.7;
	writing-mode: vertical-rl;
	white-space: nowrap;
	transform: translateY(-50%) translateX(calc((var(--container) - 100vw) / 2));
}
.top-about-box {
	position: absolute;
	inset: 0 0 auto auto;
	display: grid;
	justify-items: end;
	row-gap: 60px;
}
.top-about-ph img { border-radius: 10px; }
.top-about-ph--top { width: 550px; margin-right: 40px; }
.top-about-ph--btm { width: 360px; }

/* Servic */
.top-service { position: relative; }
.top-service .top-header-ttl {
	position: absolute;
	inset: -120px 0 auto auto;
	color: var(--color-key);
	font-size: 220px;
	transform: translateX(calc((100vw - var(--container)) / 2));
}
.top-service-box { margin-bottom: 80px; }
.top-service-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, auto);
	gap: 30px;
}
.top-service-item {
	position: relative;
	padding: 40px 32px;
	background: #fff;
	border-radius: 10px;
}
.top-service-item::before {
	content: "";
	position: absolute;
	inset: 15px;
	border: 3px solid var(--color-key);
	border-radius: 10px;
	pointer-events: none;
}
.top-service-ttl {
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-sub);
	font-size: 24px;
	line-height: 1.2;
	text-align: center;
}
.top-service-logo {
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.top-service-txt { color: #333; }

/* News/Blog */
.top-news { position: relative; }
.top-news-box { margin-bottom: 80px; }

/* Link Button */
.top-link-btn a {
	display: block;
	color: #fff;
	background: var(--color-sub);
	font-size: 16px;
	font-weight: 700;
	width: 280px;
	padding: 20px;
	border-radius: 34px;
	text-align: center;
	line-height: 1;
	position: relative;
}
.top-link-btn a::after {
	content: "";
	position: absolute;
	inset: 50% 20px auto auto;
	transform: translateY(-50%) rotate(45deg);
	width: 16px;
	height: 16px;
	border-top: 3px solid var(--color-key);
	border-right: 3px solid var(--color-key);
}

/* 背景青 */
.section--blue { background: var(--color-sub); }
.section--blue,
.section--blue .top-header,
.section--blue .top-content-ttl{ color: #fff; }
.section--blue .top-link-btn a {
	color: var(--color-sub);
	background: var(--color-key);
}
.section--blue .top-link-btn a::after {
	border-top: 3px solid var(--color-sub);
	border-right: 3px solid var(--color-sub);
}

/* TB/SP */
@media screen and (max-width: 1199px) {
	.top-header { margin-bottom: 40px; }
	.top-header-ttl { font-size: 100px; }
	.top-header-ttl--ja { font-size: 18px; }

	.top-content-box { margin-bottom: 40px; }
	.top-content-ttl {
		font-size: 24px;
		margin-bottom: 40px;
	}
	.top-content-txt { font-size: 16px; }

	.top-about .top-content-box { width: 100%; }
	.top-about .top-header-ttl {
		position: static;
		font-size: 100px;
		line-height: 1;
		writing-mode: horizontal-tb;
		white-space: normal;
		transform: none;
	}
	.top-about-box {
		position: static;
		display: flex;
		justify-items: center;
		gap: 20px;
		margin-bottom: 40px;
	}
	.top-about-ph--top { width: 100%; margin-right: 0; }
	.top-about-ph--btm { width: 100%; }
	.top-about-ph img { width: 100%; }

	.top-service .top-header-ttl {
		position: static;
		color: #fff;
		font-size: 100px;
		transform: none;
	}
	.top-service-box { margin-bottom: 40px; }
	.top-service-list {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		gap: 20px;
	}
	.top-service-item { padding: 30px; }
	.top-service-item::before {
		inset: 10px;
		border: 2px solid var(--color-key);
	}
	.top-service-ttl {
		height: 60px;
		font-size: 20px;
	}
	.top-service-logo {
		height: 110px;
		margin-bottom: 20px;
	}
	.top-news-box { margin-bottom: 40px; }
}

@media screen and (max-width: 869px) {
/* YouTubeリンク */
.top-youtube-wrap { padding: 30px 25px; }
	.top-youtube-wrap::before {
    inset: 6px;
    border: 2px solid var(--color-key);
	}
.top-youtube-header-ttl {
    font-size: 15px;
    margin-bottom: 10px;
		padding: 5px 0;
	}

	.top-youtube-content {
    gap: 0px;
    flex-direction: column;
	}
	.top-youtube-text {
		width:100%;
		margin-bottom: 20px;
	}
}

/* SP */
@media screen and (max-width: 639px) {
	.top-header { margin-bottom: 20px; }
	.top-header-ttl { font-size: 48px; }
	.top-header-ttl--ja { font-size: 16px; }

	.top-content-box { margin-bottom: 20px; }
	.top-content-ttl {
		font-size: 18px;
		margin-bottom: 20px;
	}
	.top-content-txt { font-size: 13px; }

	.top-youtube-img { width: 260px; }
	.top-link-btn.diff { margin: auto; }
	
	.top-about .top-header-ttl { font-size: 48px; }
	.top-about-box {
		display: block;
		margin-bottom: 30px;
	}
	.top-about-ph--top { margin-bottom: 20px; }

	.top-service .top-header-ttl { font-size: 48px; }
	.top-service-box { margin-bottom: 30px; }
	.top-service-list { grid-template-columns: 1fr; }
	.top-service-item { padding: 20px; }
	.top-service-item::before { inset: 5px; }
	.top-service-ttl {
		height: auto;
		font-size: 15px;
		margin-bottom: 15px;
	}
	.top-service-logo {
		height: auto;
		margin-bottom: 15px;
	}
	.top-service-logo img {
		height: 80px;
		object-fit: contain;
	}
	.top-news-box { margin-bottom: 30px; }
	.top-link-btn a {
		margin: 0 auto;
		font-size: 13px;
	}
}

/* =======================================================================================
	下層
======================================================================================= */

.under-header { margin-bottom: 60px; }
.under-header-ttl {
	color: var(--color-sub);
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 60px;
	line-height: 1.0;
	letter-spacing: 0.04em;
}
.under-header-ttl--ja {
	color: var(--color-sub);
	font-size: 26px;
	font-weight: 700;
}
.under-header-lead {
	color: var(--color-sub);
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.gry-box {
	background: var(--color-gry);
	padding: 50px;
	border-radius: 10px;
}
.gry-box-header {
	text-align: center;
	margin-bottom: 40px;
}
.gry-box-header-ttl {
	color: var(--color-sub);
	font-family: "Bebas Neue", sans-serif;
	font-size: 36px;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
}
.gry-box-header-ttl--ja {
	color: var(--color-sub);
	font-size: 24px;
	font-weight: 700;
}
.gry-box-header-ttl--diff {
	color: var(--color-sub);
	font-size: 28px;
	font-weight: 700;
}
.gry-box-list {
	display: grid;
	gap: 30px;
}
.gry-box-item {
	color: #333;
	background: #fff;
	padding: 30px;
	border: 3px solid var(--color-key);
	border-radius: 10px;
}

/* 背景青 */

.section--blue .under-header-ttl,
.section--blue .under-header-ttl--ja { color: var(--color-key) ;}

/* TB/SP */
@media screen and (max-width: 1199px) {

	.under-header { margin-bottom: 40px; }
	.under-header-ttl { font-size: 48px; }
	.under-header-ttl--ja { font-size: 20px; }
	.under-header-lead {
		font-size: 18px;
		text-align: center;
	}

	.gry-box { padding: 30px; }
	.gry-box-header { margin-bottom: 30px; }
	.gry-box-header-ttl { font-size: 28px; }
	.gry-box-header-ttl--ja { font-size: 18px; }
	.gry-box-header-ttl--diff { font-size: 22px; }
	.gry-box-item { padding: 20px; }

}
/* TB/SP */
@media screen and (max-width: 899px) {

	.under-header-lead {
		font-size: 18px;
		text-align: left;
	}
	.under-header-lead br { display: none; }

}

/* SP */
@media screen and (max-width: 639px) {

	.under-header { margin-bottom: 20px; }
	.under-header-ttl { font-size: 32px; }
	.under-header-ttl--ja { font-size: 16px; }
	.under-header-lead { font-size: 15px; }

	.gry-box { padding: 20px; }
	.gry-box-header { margin-bottom: 20px; }
	.gry-box-header-ttl { font-size: 24px; }
	.gry-box-header-ttl--ja { font-size: 14px; }
	.gry-box-header-ttl--diff { font-size: 18px; }
	.gry-box-list { gap: 20px; }

}

/* =======================================================================================
	ABOUT ZERO2ONE
======================================================================================= */

/* Message */

.about-message {
	background: var(--color-gry);
	padding: 50px;
	border-radius: 10px;
}
.about-message > *:not(:last-child) { margin-bottom: 40px; }
.about-message-ph { text-align: center; }
.about-message-greet > *:not(:last-child) { margin-bottom: 30px; }
.about-message-ttl {
	color: var(--color-sub);
	font-size: 18px;
	font-weight: 700;
}
.about-message-timeline {
	background: #fff;
	padding: 40px 60px;
	border-radius: 10px;
}
.about-message-timeline-list { margin-bottom: 30px; }
.about-message-timeline-item {
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	position: relative;
}
.about-message-timeline-date {
	color: var(--color-sub);
	width: 100px;
	flex-shrink: 0;
}
.about-message-timeline-date span {
	font-family: "Bebas Neue", sans-serif;
	font-size: 26px;
	font-weight: 400;
	font-style: normal;
	margin-right: 10px;
}
.about-message-timeline-txt {
	color: var(--color-sub);
	padding: 10px 0 10px 30px;
	position: relative;
}
.about-message-timeline-txt:before {
	content: '';
	width: 14px;
	height: 14px;
	background: var(--color-key);
	position: absolute;
	left: -6px;
	top: 18px;
	border-radius: 100%;
	z-index: 10;
}
.about-message-timeline-txt::after {
	content: '';
	width: 2px;
	height: 100%;
	background: var(--color-sub);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 8;
}
.about-message-timeline-item:first-child .about-message-timeline-txt::after { top: 20px; }
.about-message-timeline-item:last-child  .about-message-timeline-txt::after { height: 20px; }
.about-message-timeline-sup { text-align: center; }

/* Mission */

.about-mission-three-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 30px;
}
.about-mission-three-item {
	background: #fff;
	padding: 30px 20px;
	border-radius: 5px;
}
.about-mission-three-item--wide { grid-column: 1 / -1; }
.about-mission-three-ttl {
	color: var(--color-sub);
	font-size: 30px;
	margin-bottom: 20px;
	position: relative;
	padding-left: 40px;
}
.about-mission-three-ttl:before {
	content: '';
	width: 18px;
	height: 18px;
	background: var(--color-key);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 100%;
	z-index: 10;
}
.about-mission-three-txt {
	color: #333;
	text-align: center;
}
.about-mission-three-values-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: 30px;
	padding: 0 40px;
}
.about-mission-three-values-item {
	display: flex;
	align-items: center;
	color: #333;
}
.about-mission-three-values-item span {
	flex-shrink: 0;
	color: #fff;
	background: var(--color-sub);
	padding: 4px 8px;
	border-radius: 5px;
	margin-right: 10px;
}

/* Key Figures of ZERO2ONE Group */

.about-key-infographic-list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 40px;
}
.about-key-infographic-item:nth-child(1) {
	grid-column: 1 / span 3;
	grid-row: 1;
}
.about-key-infographic-item:nth-child(2) {
	grid-column: 4 / span 3;
	grid-row: 1;
}
.about-key-infographic-item:nth-child(3) {
	grid-column: 1 / span 2;
	grid-row: 2;
}
.about-key-infographic-item:nth-child(4) {
	grid-column: 3 / span 2;
	grid-row: 2;
}
.about-key-infographic-item:nth-child(5) {
	grid-column: 5 / span 2;
	grid-row: 2;
}

.about-key-infographic-item {
	background: var(--color-gry);
	padding: 20px;
	border-radius: 10px;
	text-align: center;
}
.about-key-infographic-ttl {
	color: var(--color-sub);
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 20px;
}
.about-key-infographic-picto { margin-bottom: 40px; }

.about-key-infographic-count {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 10px;
	font-size: 32px;
	line-height: 1;
	margin-bottom: 40px;
	font-variant-numeric: tabular-nums;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .5s ease, transform .5s ease;
}
.about-key-infographic-count.is-active {
	opacity: 1;
	transform: translateY(0);
}
.about-key-infographic-count .count-num {
	color: var(--color-key);
	font-family: "Bebas Neue", sans-serif;
	font-size: 140px;
	font-weight: 400;
	font-style: normal;
	line-height: 0.6;
}

.about-key-infographic-rstu {
	font-size: 24px;
	font-weight: 700;
}
.about-key-infographic-avg { font-size: 18px; }

/* Company */

.about-company-detail {
	display:grid;
	grid-template-columns: 1fr 360px;
	gap: 40px;
	align-items:start;
	margin-bottom: 60px;
}
.about-company-detail-dl {
	display:grid;
	grid-template-columns: 9em 1fr;
	row-gap: 0;
}
.about-company-detail-dl dt,
.about-company-detail-dl dd {
	font-size: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-key);
}
.about-company-detail-dl dt { font-weight:700; }
.about-company-detail-dl dt:first-of-type,
.about-company-detail-dl dd:first-of-type { padding-top: 0; }
.about-company-detail-dl :is(dt,dd):nth-last-child(-n + 2){ border-bottom: none; }

.about-company-detail-ph {
	height: 380px;
	border-radius: 10px;
	overflow:hidden;
}
.about-company-detail-ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-office {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 30px;
}
.about-office-detail {
	display: grid;
	align-content: start;
	gap: 10px;
}
.about-office-ttl {
	color: var(--color-sub);
	font-size: 18px;
}
.about-office-dl {
	display: grid;
	grid-template-columns: 4em 1fr;
	column-gap: 20px;
	row-gap: 5px;
	text-indent: -2em;
	padding-left: 2em;
}
.about-office-dl dd::before { content: "：　"; }

.about-office-map iframe { border-radius: 6px; }

/* History */

.about-history-timeline {
	display:grid;
	grid-template-columns: 1fr 370px;
	gap:40px;
}

.about-history-timeline-item {
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	position: relative;
}
.about-history-timeline-date {
	color: var(--color-sub);
	width: 170px;
	flex-shrink: 0;
}
.about-history-timeline-date span {
	font-family: "Bebas Neue", sans-serif;
	font-size: 60px;
	font-weight: 400;
	font-style: normal;
	margin-right: 10px;
}
.about-history-timeline-detail-list {
	display: grid;
	gap: 30px;
	position: relative;
	padding: 35px 0 20px 60px;

}
.about-history-timeline-detail-list:before {
	content: '';
	width: 20px;
	height: 20px;
	background: var(--color-key);
	position: absolute;
	left: -9px;
	top: 42px;
	border-radius: 100%;
	z-index: 10;
}
.about-history-timeline-detail-list::after {
	content: '';
	width: 2px;
	height: 100%;
	background: var(--color-sub);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 8;
}
.about-history-timeline-detail-ttl {
	color: var(--color-sub);
	font-size: 20px;
}
.about-history-timeline-detail-txt::before { content: "- "; }
.about-history-timeline-item:first-child .about-history-timeline-detail-list::after { top: 42px; }
.about-history-timeline-item:last-child  .about-history-timeline-detail-list::after { height: 42px; }

.about-history-timeline-gallery {
	display: grid;
	gap: 30px;
	align-items: start;
	grid-auto-rows: max-content;
}
.about-history-timeline-ph {
	overflow:hidden;
	border-radius:10px;
	align-self: start; 
}
.about-history-timeline-ph:nth-child(1) { height: 450px; }
.about-history-timeline-ph:nth-child(2) { height: 240px; }
.about-history-timeline-ph img {
	display:block;
	width:100%;
	height: 100%;
	object-fit: cover;
}

/* TB/SP */
@media screen and (max-width: 1199px) {

	.about-message { padding: 30px; }
	.about-message > *:not(:last-child) { margin-bottom: 30px; }
	.about-message-greet > *:not(:last-child) { margin-bottom: 20px; }
	.about-message-ph {
		max-width: 800px;
		margin: 0 auto;
	}
	.about-message-ttl { font-size: 16px; }
	.about-message-timeline { padding: 20px 30px; }
	.about-message-timeline-list { margin-bottom: 10px; }
	.about-message-timeline-date { width: 80px; }
	.about-message-timeline-date span {
		font-size: 24px;
		margin-right: 8px;
	}
	.about-message-timeline-txt { padding: 12px 0 12px 20px; }
	.about-message-timeline-txt:before { top: 16px; }

	.about-mission-three-list { grid-template-columns: 1fr; }
	.about-mission-three-item { padding: 20px; }
	.about-mission-three-item--wide { grid-column: auto; }
	.about-mission-three-ttl {
		font-size: 24px;
		margin-bottom: 10px;
	}
	.about-mission-three-txt {
		text-align: left;
		padding: 0 40px;
	}
	.about-mission-three-values-list {
		column-gap: 20px;
		row-gap: 20px;
		margin-top: 20px;
	}
	.about-mission-three-values-item { line-height: 1.3; }

	.about-key-infographic-list { gap: 30px; }
	.about-key-infographic-ttl {
		font-size: 22px;
		margin-bottom: 20px;
	}
	.about-key-infographic-picto { margin-bottom: 30px; }
	.about-key-infographic-count {
		font-size: 20px;
		margin-bottom: 30px;
	}
	.about-key-infographic-count .count-num {
		font-size: 80px;
	}
	.about-key-infographic-rstu { font-size: 18px; }
	.about-key-infographic-avg { font-size: 14px; }

	.about-company-detail {
		grid-template-columns: 1fr;
		gap: 30px;
		margin-bottom: 30px;
	}
	.about-company-detail-dl {
		grid-template-columns: 7em 1fr;
	}
	.about-company-detail-dl dt,
	.about-company-detail-dl dd {
		font-size: 16px;
		padding: 14px 0;
	}
	.about-company-detail-ph {
		width: 100%;
		max-width: 530px;
		height: 200px;
		margin: 0 auto;
	}
	.about-company-detail-ph img {
		object-fit: cover;
		object-position: 50% 30%;
	}

	.about-office {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.about-office-ttl { font-size: 16px; }

	.about-office-map {
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
	}
	.about-office-map iframe { width: 100%; }

	.about-history-timeline {
		grid-template-columns: 1fr;
		gap:30px;
	}
	.about-history-timeline-date {
		color: var(--color-sub);
		width: 120px;
	}
	.about-history-timeline-date span { font-size: 40px; }
	.about-history-timeline-detail-list {
		gap: 20px;
		padding: 20px 0 20px 40px;
	}
	.about-history-timeline-detail-list:before { top: 26px; }
	.about-history-timeline-detail-ttl { font-size: 18px; }
	.about-history-timeline-item:first-child .about-history-timeline-detail-list::after { top: 26px; }
	.about-history-timeline-item:last-child  .about-history-timeline-detail-list::after { height: 26px; }

	.about-history-timeline-gallery {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 400px));
		gap: 20px;
		justify-content: center;
	}
	.about-history-timeline-ph { width: 100%; }
	.about-history-timeline-ph:nth-child(1) { height: 200px; }
	.about-history-timeline-ph:nth-child(2) { height: 200px; }

}

/* SP */
@media screen and (max-width: 639px) {

	.about-message { padding: 20px; }
	.about-message > *:not(:last-child) { margin-bottom: 20px; }
	.about-message-timeline { padding: 20px; }
	.about-message-timeline-sup { text-align: left; }

	.about-mission-three-ttl {
		font-size: 20px;
		padding-left: 30px;
	}
	.about-mission-three-txt {
		padding: 0 30px;
	}
	.about-mission-three-values-list {
		grid-template-columns: 1fr;
		padding: 0;
		column-gap: 10px;
		row-gap: 10px;
		margin-top: 0;
	}

	.about-key-infographic-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.about-key-infographic-item {
		grid-column: auto !important;
		grid-row: auto !important;
	}
	.about-key-infographic-ttl { font-size: 18px; }
	.about-key-infographic-picto { height: 60px; }
	.about-key-infographic-picto img {
		height: 100%;
		object-fit: contain;
	}
	.about-key-infographic-count { font-size: 16px; }
	.about-key-infographic-count .count-num { font-size: 70px; }
	.about-key-infographic-rstu { font-size: 16px; }

	.about-company-detail-dl dt,
	.about-company-detail-dl dd { font-size: 14px; }
	.about-company-detail-ph { height: 180px; }
	.about-office { gap: 10px; }
	.about-office-ttl { font-size: 16px; }

	.about-history-timeline { gap:20px; }
	.about-history-timeline-date {
		color: var(--color-sub);
		width: 85px;
	}
	.about-history-timeline-date span {
		font-size: 30px;
		margin-right: 5px;
	}
	.about-history-timeline-detail-list { padding: 10px 0 20px 25px; }
	.about-history-timeline-detail-list:before { top: 14px; }
	.about-history-timeline-detail-ttl { font-size: 16px; }
	.about-history-timeline-item:first-child .about-history-timeline-detail-list::after { top: 14px; }
	.about-history-timeline-item:last-child  .about-history-timeline-detail-list::after { height: 14px; }

	.about-history-timeline-ph:nth-child(1) { height: 180px; }
	.about-history-timeline-ph:nth-child(2) { height: 180px; }

}

/* =======================================================================================
	SERVICE サービス
======================================================================================= */

/* Point */
.service-point-list {
	counter-reset: point;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}
.service-point-item {
	background: var(--color-gry);
	padding: 30px;
	border-radius: 10px;
	position: relative;
	text-align: center;
}
.service-point-item::before {
	content: "POINT";
	font-family: "Bebas Neue", sans-serif;
	font-size: 30px;
	font-weight: 400;
	font-style: normal;
	position: absolute;
	inset: -24px auto auto 0;
}
.service-point-item::after{
	counter-increment: point;
	content: counter(point, decimal-leading-zero); 
	color: var(--color-sub);
	background: var(--color-key, #83de51);
	font-family: "Bebas Neue", sans-serif;
	font-size: 28px;
	font-weight: 400;
	font-style: normal;
	position: absolute;
	inset: -20px auto auto 60px;
	inline-size: 40px;
	block-size: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 5px;
	border-radius: 50%;
	
}
.service-point-ttl {
	display: inline-block;
	color: var(--color-sub);
	font-size: 20px;
	font-weight: 700;
	border-bottom: 4px solid var(--color-key);
	text-align: center;
	padding-bottom: 5px;
	margin-bottom: 20px;
}
.service-point-txt { text-align: left; }

/* Our Services */
.service-our > *:not(:last-child) { margin-bottom: 40px; }
.service-detail-header {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 20px;
	align-items: center;
	border-bottom: 2px solid var(--color-gry);
	padding-bottom: 30px;
	margin-bottom: 30px;
}
.service-detail-logo {
	width: 100%;
	height: 110px;
}
.service-detail-logo img {
	display:block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.service-detail-ttl {
	color: var(--color-sub);
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 10px;
}
.service-detail-txt { font-size: 18px; }

.service-detail-main {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 30px;
}
.service-detail-info {
	display: grid;
	gap: 30px;
}
.service-detail-info-dl {
	display: grid;
	gap: 15px;
}
.service-detail-info-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 30px;
	align-items: start;
}
.service-detail-info-badge {
	justify-self: start;
	width: 100%;
	color: #fff;
	background: var(--color-sub);
	font-weight: 700;
	text-align: center;
	padding: 4px 10px;
	border-radius: 10px;
}
.service-detail-info-desc { padding: 4px 0; }

.service-detail-link a {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	color: var(--color-sub);
	font-size: 16px;
	font-weight: 700;
}
.service-detail-link a::before{
	content:"";
	inline-size: 22px;
	block-size: 22px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="M10 14L21 3"/></svg>') center/contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="M10 14L21 3"/></svg>') center/contain no-repeat;
}

.service-detail-ph {
	border-radius: 10px;
	overflow: hidden;
	align-self: end;
	aspect-ratio: 16 / 9;
}
.service-detail-ph img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.service-detail-ph.jdip-ph img { object-position: 50% 38%; }

/* Client Companies */
.service-intro { margin-top: 100px; }
.service-intro-header {
	margin-bottom: 40px;
	text-align: center;
}
.service-intro-ttl {
	color: var(--color-sub);
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 20px;
}
.service-intro-txt { font-size: 12px; }

.logo-slider li {
	width: 100%;
	max-width: 150px;
	height: 150px;
	padding: 20px;
}
.logo-slider li img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* TB/SP */
@media screen and (max-width: 1199px) {

	.service-point-ttl {
		font-size: 18px;
		border-bottom: 3px solid var(--color-key);
		margin-bottom: 10px;
	}

	.service-our > *:not(:last-child) { margin-bottom: 30px; }
	.service-detail-header {
		grid-template-columns: 100px 1fr;
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	.service-detail-logo { height: 90px; }
	.service-detail-ttl { font-size: 20px; }
	.service-detail-txt { font-size: 16px; }

	.service-detail-main {
		grid-template-columns: 1fr 280px;
		gap: 20px;
	}
	.service-detail-info { gap: 20px; }
	.service-detail-info-dl { gap: 10px; }
	.service-detail-info-row {
		grid-template-columns: 110px 1fr;
		gap: 10px;
	}
	.service-detail-info-badge { padding: 2px 10px; margin-bottom: 10px;}
	.service-detail-info-desc { padding: 2px 0; }
	.service-detail-link a { font-size: 14px; }
	.service-detail-link a::before{
		inline-size: 20px;
		block-size: 20px;
	}
	.service-detail-ph.jdip-ph img { object-position: 50% 40%; }

	.service-intro { margin-top: 60px; }
	.service-intro-header {
		margin-right: 3%;
		margin-left: 3%;
		margin-bottom: 30px;
	}
	.service-intro-ttl { font-size: 20px; margin-bottom: 10px; }
	.logo-slider li {
		max-width: 120px;
		height: 120px;
	}

}
/* 微調整 */
@media screen and (max-width: 799px) {

	.service-point { margin-top: 40px; }
	.service-point-list {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.service-point-ttl {
		font-size: 18px;
		border-bottom: 3px solid var(--color-key);
		margin-bottom: 10px;
	}

	.service-detail-header { grid-template-columns: 80px 1fr; }
	.service-detail-logo { height: 80px; }
	.service-detail-ttl { font-size: 18px; text-align: center;}
	.service-detail-txt { font-size: 14px; }
	.service-detail-main {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.service-detail-ph {
		max-width: 400px;
		margin: 0 auto;
	}

}

/* SP */
@media screen and (max-width: 639px) {

	.service-point-item { padding: 20px; }
	.service-point-item::before {
		font-size: 24px;
		inset: -20px auto auto 0;
	}
	.service-point-item::after{
		font-size: 22px;
		inset: -15px auto auto 50px;
		inline-size: 30px;
		block-size: 30px;
	}
	.service-point-ttl {
		font-size: 16px;
		border-bottom: 2px solid var(--color-key);
	}

	.service-detail-header { grid-template-columns: 1fr; }
	.service-detail-logo { height: 60px; }
	.service-detail-ttl { font-size: 16px; }
	.service-detail-txt { font-size: 13px; }
	.service-detail-main {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.service-detail-info-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.service-detail-info-dl { gap: 20px; }
	.service-detail-link a { font-size: 12px; }
	.service-detail-ph {
		max-width: 300px;
		margin: 0 auto;
	}

	.service-intro-ttl { font-size: 16px; }
	.logo-slider li {
		max-width: 100px;
		height: 100px;
		padding: 10px;
	}

}

/* =======================================================================================
	NEWS/BLOG　お知らせ・ブログ
======================================================================================= */
/* Category */
.news-category { margin-bottom: 80px; }
.news-category-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.news-category-item {
	display: grid;
	place-items: center;
}
.news-category-item a {
	display: block;
	width: 100%;
	color: #fff;
	background: var(--color-sub);
	font-size: 16px;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 24px;
	text-align: center;
}
.news-archive-head { margin-bottom: 20px; }

/* News */
.news-list {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.news-item-link {
	display: block;
	color: var(--color-sub);
	background: var(--color-gry);
	font-weight: 700;
	padding: 30px;
	border-radius: 10px;
}
.news-item-content {
	display: grid;
	grid-template-columns: 1fr;	
	gap: 20px;
	min-width: 0;
}
.news-item-thumb {
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
}
.news-item-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.news-item-area {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
}
.news-item-cate {
	display: flex;
	font-weight: 700;
	align-items: center;
	gap: 15px;
}
.news-item-cate span {
	width: 125px;
	background: var(--color-key);
	border-radius: 5px;
	font-size: 12px;
	text-align: center;
	padding: 2px 0;
}
.news-item-cate time {
	padding-top: 4px;
	font-family: "Bebas Neue", sans-serif;
	font-size: 20px;
	font-weight: normal;
	font-style: normal;
	line-height: 0.8;
}
.news-item-ttl,
.news-item-txt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.news-item-txt {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
.news-item-ttl {
	font-size: 15px;
	height: calc(2 * 1.6em); /* 2行 × line-height(1.6) */
}
.news-item-txt {
	font-size: 16px;
	font-weight: 400;
	height: calc(2 * 2em); /* 3行 × line-height(1.8) */
}
.news-item-detail {
	font-size: 14px;
	text-align: right;
	position: relative;
	padding-right: 20px;
	font-weight: normal;
}
.news-item-detail::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto auto;
	transform: translateY(-50%) rotate(45deg);
	width: 16px;
	height: 16px;
	border-top: 3px solid var(--color-sub);
	border-right: 3px solid var(--color-sub);
}

/* 1つ目強調 */
.news-list > *:first-child { grid-column: span 3; }
.news-list > *:first-child .news-item-content {
	grid-template-columns: 480px 1fr;
	gap: 40px;
}
.news-list > *:first-child .news-item-cate span { width: 140px;font-size: 13px; }
.news-list > *:first-child .news-item-cate time { font-size: 24px; }
.news-list > *:first-child .news-item-ttl { font-size: 22px; }
.news-list > *:first-child .news-item-txt { font-size: 18px; }
.news-list > *:first-child .news-item-detail { font-size: 16px; }

/* TOP */
.top-news-box .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.top-news-box .news-item-content { grid-template-columns: 200px 1fr; }
.top-news-box .news-list > *:first-child { grid-column: span 2; }

/* Service */
.service-news-list {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-news-list .news-item-ttl {
	font-size: 18px;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}
.service-news-list .service-news-list .news-item-txt {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
.service-news-list .news-item-ttl { height: calc(1 * 1.6em); /* 2行 × line-height(1.6) */ }
.service-news-list .news-item-txt { height: calc(2 * 1.8em); /* 3行 × line-height(1.8) */ }

/* TB/SP */
@media screen and (max-width: 1199px) {
	.news-category { margin-bottom: 60px; }
	.news-category-item a { font-size: 14px; }
	.news-list { gap: 20px; }
	.news-item-link { padding: 15px; }
	.news-item-cate { gap: 10px; }
	.news-item-cate span {
		width: 100px;
		font-size: 11px;
	}
	.news-item-cate time { font-size: 16px; }
	.news-item-ttl { font-size: 13px; }
	.news-item-txt { font-size: 12px; }
	.news-item-detail { font-size: 12px; }
	.news-item-detail::after {
		width: 14px;
		height: 14px;
	}
	.news-list > *:first-child .news-item-content {
		grid-template-columns: 400px 1fr;
		gap: 20px;
	}
	.news-list > *:first-child .news-item-cate span { font-size: 11px; }
	.news-list > *:first-child .news-item-cate time { font-size: 16px;margin-top: 3px;}
	.news-list > *:first-child .news-item-ttl { font-size: 14px; }
	.news-list > *:first-child .news-item-txt { font-size: 14px; }
	.news-list > *:first-child .news-item-detail { font-size: 12px; }
}

/* 微調整 */
@media screen and (max-width: 999px) {
	.top-news-box .news-list { grid-template-columns: 1fr; }
	.top-news-box .news-list > *:first-child { grid-column: auto; }
}

/* 微調整 */
@media screen and (max-width: 799px) {
	.news-category { margin-bottom: 40px; }
	.news-category-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
	.news-category-item a { font-size: 12px; }

	.news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.news-list > *:first-child { grid-column: span 2; }
	.news-list > *:first-child .news-item-content { grid-template-columns: 1fr; }

	.service-news-list {
		gap: 20px;
		grid-template-columns: 1fr;
	}
	.service-news-list .news-item-content { grid-template-columns: 200px 1fr; }
	.service-news-list .news-item-ttl { font-size: 16px; }
	.news-archive-head { margin-bottom:  15px; }
}

/* SP */
@media screen and (max-width: 639px) {
	.news-list { grid-template-columns: 1fr; }
	.news-item-content { gap: 12px; }
	.news-item-content,
	.top-news-box .news-item-content { grid-template-columns: 130px 1fr; }
	.news-item-detail::after {
		width: 12px;
		height: 12px;
	}
	.news-list > *:first-child { grid-column: auto; }
	.news-item-cate {
		gap: 5px;
		align-items: baseline;
	}
	.news-item-cate span {
		width: 100px;
		font-size: 9px;
	}
	.news-item-cate time { font-size: 13px; }

	.service-news-list .news-item-content { grid-template-columns: 1fr;}
	.service-news-list .news-item-ttl { font-size: 14px; }
	.news-summary .news-list > *:not(:first-child) .news-item-txt { display: none; }
}

/* =======================================================================================
	NEWS/BLOG 記事
======================================================================================= */
.news-article {
	background: var(--color-gry);
	padding: 60px 100px;
	border-radius: 10px;
	margin-bottom: 60px;
}
.news-article-header { margin-bottom: 40px; }
.news-article-header .news-item-cate { margin-bottom: 40px; }
.news-article-ttl {
	color: var(--color-sub);
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 20px;
}

.news-article-main h3 {
	color: var(--color-sub);
	font-size: 20px;
	font-weight: 700;
	border-bottom: 1px solid var(--color-sub);
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.news-article-main p { margin-bottom: 20px; }
.news-article-main > *:last-child { margin-bottom: 0; }  

.news-article-main figure { text-align: center; }
.news-article-main a { text-decoration: underline; color: #1f2c5a; }
.wp-block-list li { 
	padding-left: 20px;
	position: relative;
}
.wp-block-list li::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #83de51;
	position: absolute;
	left: 0;
	top: 10px;
}

/* Pager */
.news-link-list {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
.news-link-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.news-link-item a {
	width: 480px;
	display: block;
	color: var(--color-sub);
	background: var(--color-gry);
	border-radius: 10px;
}
.news-link-item .news-item-area { gap: 5px; }
.news-link-item .news-item-content {
	grid-template-columns: 150px minmax(0, 1fr);
	padding: 20px;
	border-bottom: 2px solid #fff;
}
.news-link-item .news-item-ttl,
.news-link-item .news-item-txt {
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	height: auto;
}
.news-link-item .news-item-cate { gap: 10px; }
.news-link-item .news-item-cate span { font-size: 11px; }
.news-link-item .news-item-cate time { font-size: 18px; }
.news-link-item .news-item-ttl { font-size: 14px; }
.news-link-item .news-item-txt { font-size: 12px; }

.news-link-txt {
	padding: 20px;
	font-weight: 700;
	position: relative;
}
.news-link-txt::before {
	content: "";
	width: 34px;
	height: 34px;
	background: var(--color-sub);
	border-radius: 50%;
	position: absolute;
	inset: 0;
	transform: translateY(-50%);
	z-index: 8;
}
.news-link-txt::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateY(-50%) rotate(-135deg);
	width: 12px;
	height: 12px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	z-index: 10;
}

.news-link-item--prev { justify-content: flex-start; }
.news-link-item--next { justify-content: flex-end; }

.news-link-item--prev .news-link-txt { padding-left: 70px; }
.news-link-item--prev .news-link-txt::before { inset: 50% auto auto 20px; }
.news-link-item--prev .news-link-txt::after { inset: 50% auto auto 32px; }

.news-link-item--next .news-link-txt {
	text-align: right;
	padding-right: 70px;
}
.news-link-item--next .news-link-txt::before { inset: 50% 20px auto auto; }
.news-link-item--next .news-link-txt::after {
	inset: 50% 32px auto auto;
	transform: translateY(-50%) rotate(45deg);
}

h2.wp-block-heading {
	color: var(--color-sub);
	font-size: 20px;
	font-weight: 700;
	border-bottom: 1px solid var(--color-sub);
	margin-bottom: 10px;
	padding-bottom: 10px;
}


/* TB/SP */
@media screen and (max-width: 1199px) {
	.news-article {
		padding: 30px;
		margin-bottom: 30px;
	}
	.news-article-header { margin-bottom: 20px; }
	.news-article-header .news-item-cate { margin-bottom: 20px; }
	.news-article-ttl {
		font-size: 18px;
		margin-bottom: 10px;
	}
	.news-article-main h3 { font-size: 16px; }
	.news-link-list { flex-direction: column; }
	.news-link-item a { width: 100%; }
	.news-link-item--prev { margin-bottom: 30px; }
}

/* SP */
@media screen and (max-width: 639px) {
	.news-article {
		padding: 20px;
		margin-bottom: 20px;
	}
	.news-article-ttl { font-size: 16px; }
	.news-article-main h3 { font-size: 14px; }
	.news-link-item .news-item-content { grid-template-columns: 100px minmax(0, 1fr); }
	.news-link-txt::before {
		width: 28px;
		height: 28px;
	}
	.news-link-txt::after {
		width: 8px;
		height: 8px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
	}
	.news-link-item--prev { margin-bottom: 20px; }
	.news-link-item--prev .news-link-txt { padding-left: 60px; }
	.news-link-item--next .news-link-txt { padding-right: 60px; }

	.wp-block-list li::before { top: 7px; }
}

/* =======================================================================================
	CONTACT お問い合わせ
======================================================================================= */
.content-text {
	margin-bottom: 30px;
	color: var(--color-sub);
}
.contact-wrap {
	padding: 30px 0;
	background: var(--color-gry);
}
form#mailformpro .mailform {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
form#mailformpro .mailform dt {
	width: 250px;
	margin-bottom: 20px;
}
form#mailformpro .mailform dd {
	width:calc(100% - 250px);
	margin-bottom: 20px;
}
form#mailformpro label,.confirm-text {
	display: flex;
	align-items: center;
}
.mailform input[type="text"],
.mailform input[type="email"],
.mailform input[type="tel"],
.mailform select,
.mailform textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
  box-sizing: border-box;
  background: #fff;
}
.mailform textarea {
  height: 250px;
  resize: vertical;
}
.must,.any {
	display: block;
	background-color: #C00;
	padding: 2px 5px;
	font-size: 10px;
	color: #FFF;
	margin: 0px 5px;
	border-radius: 4px;
}
.any { background-color: rgb(161, 161, 161); }
.check-text label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #57A3D0; /* ユーザー指定カラーに合わせています */
}

.form-privacy {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}
.form-privacy a {
	font-weight: bold;
	text-decoration: underline;
	color: var(--color-sub);
}
.submit_buttons {
	display: block;
	width: 100%;
	max-width: 500px;
	margin: 20px auto 0;
	padding: 20px 0;
	background: var(--color-sub);
	border-radius: 50px;
	color: #fff;
	font-weight: 500;
	font-size: 18px;
}
.mfp textarea {
  width: 100% !important;
  height: 300px !important;
  padding: 10px;
  font-size: 16px;
  line-height: 1.6;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  box-sizing: border-box;
}
/* 共通：通常時のフォーム見た目 */
.mfp input,
.mfp textarea,
.mfp select {
  background: #fff;
  color: #111;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
/* Chrome / Safari */
.mfp input:-webkit-autofill,
.mfp textarea:-webkit-autofill,
.mfp select:-webkit-autofill {
  /* 背景を上から塗りつぶす */
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
          box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #111;  /* 文字色も指定 */
}

/* 確認画面 */
#mfp_button_send {
	background: #1f2c5a;
	color: #fff;
	font-weight: bold;
}

/* 完了画面　*/
.completion-ttl { 
	margin-bottom: 30px;
	color: #1f2c5a;
}
.completion p {
	margin-bottom: 15px;
}

/* SP */
@media screen and (max-width: 799px) {
	.content-text {
    margin-bottom: 15px;
    font-size: 15px;
	}
	form#mailformpro .mailform { flex-direction: column; }
	form#mailformpro .mailform dt {
			width: 100%;
			margin-bottom: 0px;
	}
	form#mailformpro .mailform dd { width: 100%; }
}



/* =======================================================================================
	COPYRIGHT & LINK, PRIVACY POLICY
======================================================================================= */
.box-area {
	display: grid;
	gap: 40px;
}
.box-block > *:not(:last-child) { margin-bottom: 20px; }
.box-block h3 {
	font-size: 20px;
	font-weight: 700;
	border-bottom: 1px solid #333;
	padding-bottom: 10px;
}
.box-block p { line-height: 2; }
.box-block a { text-decoration: underline; }
.box-block ul { padding-left: 1.5em; }
.box-block li { list-style: disc; }

/* TB/SP */
@media screen and (max-width: 1199px) {
	.box-area { gap: 30px; }
	.box-block > *:not(:last-child) { margin-bottom: 10px; }
	.box-block h3 { font-size: 18px; }
}

/* SP */
@media screen and (max-width: 639px) {
	.box-area { gap: 20px; }
	.box-block h3 { font-size: 16px; }
}

/* =======================================================================================
	Marquee
======================================================================================= */
.marquee {
	width: 100%;
	position: absolute;
	bottom: 0;
	z-index: 10;
	overflow: hidden;
}
.marquee-inner {
	display: flex;
	gap: 20px;
}
.marquee-txt {
	color: rgba(225, 255, 208, 0.8);
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 194px;
	line-height: 1;
	white-space: nowrap;
	transform: translateY(20%);
	animation: marquee 20s linear infinite;
}
.has-marquee,
#under .has-marquee {
	position: relative;
	padding-bottom: 240px;
}

/* TB/SP */
@media screen and (max-width: 1199px) {
	.marquee-txt { font-size: 160px; }
	.has-marquee,
	#under .has-marquee { padding-bottom: 180px; }
}

/* SP */
@media screen and (max-width: 639px) {
	.marquee-txt { font-size: 120px; }
	.has-marquee,
	#under .has-marquee { padding-bottom: 120px; }
}

/* =======================================================================================
	CTA
======================================================================================= */
.cta-area {
	color: #fff;
	background: var(--color-sub);
	padding: 80px 0;
	position: relative;
}
.cta-content {
	display: grid;
	gap: 40px;
}
.cta-header-txt {
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}
.cta-contact-btn a {
	display: block;
	color: var(--color-sub);
	background: #fff;
	padding: 40px;
	border-radius: 132px;
	text-align: center;
	overflow: hidden;
	position: relative;
	z-index: 10;
}
.cta-contact-btn a::after {
	background: var(--color-key);
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: -1;
	transform: skewY(-20deg) scale(1, 0);
	height: 500px;
}
.cta-contact-btn-ttl {
	color: var(--color-key);
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 120px;
	line-height: 1;
	margin-bottom: 10px;
}

.cta-contact-btn-txt {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	font-size: 26px;
	font-weight: 700;
	position: relative;
	line-height: 1;
}
.cta-contact-btn-txt::after {
	content: "";
	transform: rotate(45deg);
	width: 20px;
	height: 20px;
	border-top: 5px solid var(--color-sub);
	border-right: 5px solid var(--color-sub);
}

/* 電話 */
.cta-contact-btn.cta-contact-btn--tel a { pointer-events: none; }
.cta-contact-btn--tel .cta-contact-btn-ttl {
	font-size: 72px;
	margin-bottom: 0;
}
.cta-contact-btn--tel .cta-contact-btn-txt { font-size: 20px; }
.cta-contact-btn--tel .cta-contact-btn-txt::after { content: none; }

/* TB/SP */
@media screen and (max-width: 1199px) {

	.cta-area { padding: 60px 0; }
	.cta-content { gap: 30px; }
	.cta-header-txt { font-size: 16px; }
	.cta-contact-btn a { padding: 30px; }
	.cta-contact-btn a::after { content: none; }

	.cta-contact-btn-ttl {
		font-size: 80px;
		margin-bottom: 0;
	}
	.cta-contact-btn-txt {
		gap: 10px;
		font-size: 18px;
	}
	.cta-contact-btn-txt::after {
		width: 16px;
		height: 16px;
		border-top: 4px solid var(--color-sub);
		border-right: 4px solid var(--color-sub);
	}
	.cta-contact-btn.cta-contact-btn--tel a { pointer-events: auto; }
	.cta-contact-btn--tel .cta-contact-btn-ttl { font-size: 40px; }
	.cta-contact-btn--tel .cta-contact-btn-txt { font-size: 14px; }
}

/* SP */
@media screen and (max-width: 639px) {

	.cta-area { padding: 40px 0; }
	.cta-content { gap: 20px; }
	.cta-header-txt { font-size: 14px; }
	.cta-contact-btn a { padding: 20px; }
	.cta-contact-btn-ttl { font-size: 50px; }

	.cta-contact-btn-txt {
		gap: 5px;
		font-size: 12px;
	}
	.cta-contact-btn-txt::after {
		width: 13px;
		height: 13px;
		border-top: 3px solid var(--color-sub);
		border-right: 3px solid var(--color-sub);
	}
	.cta-contact-btn--tel .cta-contact-btn-ttl { font-size: 40px; }
	.cta-contact-btn--tel .cta-contact-btn-txt { font-size: 12px; }

}

/* =======================================================================================
	Footer
======================================================================================= */
.footer { width: 100%; }
.footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40px;
	position: relative;
	z-index: 10;
}

/* footer上 */
.footer-top { position: relative; }
.footer-base-list {
	display: flex;
	gap: 40px;
}
.footer-base-item > *:not(:last-child) { margin-bottom: 10px; }

.footer-base-ttl {
	color: var(--color-sub);
	font-size: 16px;
	font-weight: 700;
}
.footer-base-txt,
.footer-base-tel { font-size: 14px; }

.footer-sns-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.footer-sns-item {
	display: grid;
	gap: 20px;
	align-items: center;
	grid-template-columns: 150px auto;
}
.footer-sns-link {
	color: var(--color-sub);
	font-size: 18px;
	font-weight: 700;
	padding: 10px 0 10px 50px;
	position: relative;
}
.footer-sns-item--note .footer-sns-link { padding: 0; }
.footer-sns-link::before {
	content: "";
	background: no-repeat center center / cover;
	width: 40px;
	height: 40px;
	position: absolute;
	left: 0;
	top: 6px;
}
.footer-sns-item--tiktok .footer-sns-link::before { background-image: url('../img/logo-tiktok.webp'); }
.footer-sns-item--instagram .footer-sns-link::before { background-image: url('../img/logo-instagram.webp'); }
.footer-sns-item--facebook .footer-sns-link::before { background-image: url('../img/logo-facebook.webp'); }
.footer-sns-item--youtube .footer-sns-link::before { background-image: url('../img/logo-youtube.webp'); }
.footer-sns-item--x .footer-sns-link::before { background-image: url('../img/logo-x.webp'); }


.footer-sns-item--note img { width: 70px;}
.footer-sns-link-list {
	display: flex;
	gap: 20px;
}
.footer-sns-link-item a {
	padding: 10px 0;
	font-size: 15px;
	position: relative;
}
.footer-sns-link-item a::after {
	display: inline-block;
	content: "";
	background: url('../img/icon-window.webp') no-repeat;
	width: 12px;
	height: 12px;
	margin-left: 5px;
}

/* footer下 */
.footer-btm {
	color: #fff;
	background: var(--color-sub);
}
.copyright p { font-size: 14px; }
.footer-nav-list {
	display: flex;
	align-items: center;
	gap: 30px;
}
.footer-nav-link {
	display: block;
	color: #fff;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
}
.footer-nav-link--btn {
	color: var(--color-sub);
	background: var(--color-key);
	font-size: 24px;
	border-radius: 34px;
	padding: 10px 50px;
}

/* TB/SP */
@media screen and (max-width: 1199px) {
	.footer { width: 100%; }
	.footer-inner {
		width: 94%;
		margin: 0 auto;
		flex-wrap: wrap;
		padding: 30px 0;
	}
	.footer-top .footer-inner { display: block; }
	.footer-base-list {
		display: flex;
		flex-direction: column;
		gap: 30px;
		margin-bottom: 30px;
	}
	.footer-base-item > *:not(:last-child) { margin-bottom: 5px; }
	.footer-base-ttl { font-size: 14px; }
	.footer-base-txt, .footer-base-tel { font-size: 11px; }
	.footer-sns-list {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}
	.footer-sns-item {
		gap: 20px;
		grid-template-columns: 150px auto;
	}
	.footer-sns-link a { font-size: 16px; }
	.footer-sns-link-list {
		display: flex;
		gap: 20px;
	}

	.footer-nav-list { gap: 20px; }
	.footer-nav-link { font-size: 18px; }
	.footer-nav-link--btn { font-size: 20px; }

}
/* 微調整 */
@media screen and (max-width: 999px) {
	.footer-nav {
		width: 100%;
		margin-bottom: 30px;
	}
	.footer-nav-list {
		gap: 20px;
		flex-direction: column;
	}
	.footer-nav-item {
		width: 100%;
		text-align: center;
	}
	.footer-nav-item:not(:last-child) {
		padding-bottom: 10px;
		border-bottom: 1px solid #fff;
	}
	.copyright {
		width: 100%;
		order: 1;
		text-align: center;
	}
	.copyright p { font-size: 12px; }
}

/* SP */
@media screen and (max-width: 639px) {
	.footer-base-logo img { width: 120px; }
	.footer-base-list { gap: 20px; }
	.footer-base-ttl { font-size: 12px; }
	.footer-base-item > *:not(:last-child) { margin-bottom: 0; }
	.footer-sns-list {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.footer-sns-item {
		gap: 5px;
		grid-template-columns: 1fr;
	}
	.footer-sns-link {
		padding: 7px 0 0px 36px;
		font-size: 15px;
	}
	.footer-sns-link::before {
		width: 30px;
		height: 30px;
		left: 0;
		top: 6px;
	}
	.footer-sns-link a {
		font-size: 14px;
		padding: 10px 0 10px 30px;
		background-size: 24px;
	}
  .footer-sns-item--note .footer-sns-link a { padding: 0px 0 0px 0px; }
	.footer-sns-link-item a { font-size: 13px; }
}

/* =======================================================================================
	Triangle 背景三角
======================================================================================= */
/* FV */
.header::before {
	position: absolute;
	inset: 0 auto auto 0;
	content: "";
	background: #ffffff;
	height: 145px;
	width: 400px;
	clip-path: polygon(0 0, 0 100%, 100% 0);
	z-index: 100;
}
.header.scrolled::before {
	height: 60px;
	width: 240px;
	clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}
/* TOP */
.fv-slider-item::after {
	position: absolute;
	inset: auto 0 240px auto;
	content: "";
	background: var(--color-sub);
	mix-blend-mode: overlay;
	height: 280px;
	width: 640px;
	clip-path: polygon(100% 0, 0 100%, 100% 100%);
	z-index: 2;
}
.top-about::before {
	position: absolute;
	inset: auto auto 0 0;
	content: "";
	background: var(--color-gry);
	height: 600px;
	width: 320px;
	clip-path: polygon(0 0, 0 100%, 100% 100%);
	z-index: 2;
}
.top-about::after {
	position: absolute;
	inset: 0 0 auto auto;
	content: "";
	background: var(--color-key);
	height: 100%;
	width: 780px;
	clip-path: polygon(0 0, 100% 0%, 100% 100%);
	z-index: 2;
}

.top-service::before {
	position: absolute;
	inset: 0 auto auto 0;
	content: "";
	background: var(--color-key);
	mix-blend-mode: multiply;
	height: 165px;
	width: 250px;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	z-index: 2;
}
.top-service::after {
	position: absolute;
	inset: auto 0 0 auto;
	content: "";
	background: var(--color-key);
	mix-blend-mode: soft-light;
	height: 600px;
	width: 580px;
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	z-index: 2;
}

.top-news::before {
	position: absolute;
	inset: auto auto 0 0;
	content: "";
	background: var(--color-gry);
	height: 720px;
	width: 440px;
	clip-path: polygon(0 0, 0 100%, 100% 100%);
	z-index: 2;
}
.top-news::after {
	position: absolute;
	inset: 0 0 auto auto;
	content: "";
	background: var(--color-key);
	height: 450px;
	width: 300px;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	z-index: 2;
}

/* 下層 */
.under-fv::after {
	position: absolute;
	inset: auto 0 0 auto;
	content: "";
	background: var(--color-sub);
	mix-blend-mode: hard-light;
	height: 180px;
	width: 320px;
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	z-index: 2;
}

#under > .section:not(:first-child):not(:last-child)::before {
	position: absolute;
	inset: auto auto 0 0;
	content: "";
	background: var(--color-key);
	height: 240px;
	width: 280px;
	clip-path: polygon(0 0, 0 100%, 100% 100%);
	z-index: 2;
}
#under > .section:not(:first-child):not(:last-child)::after {
	position: absolute;
	inset: 0 0 auto auto;
	content: "";
	background: var(--color-gry);
	height: 380px;
	width: 480px;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	z-index: 2;
}
#under.contact > .section:not(:first-child):not(:last-child)::after { background: var(--color-key); }
#under.contact > .section:not(:first-child):not(:last-child)::before { background: var(--color-gry); }

#under > .section--blue:not(:first-child):not(:last-child)::before {
	position: absolute;
	inset: 0 auto auto 0;
	content: "";
	background: var(--color-key);
	mix-blend-mode: multiply;
	height: 340px;
	width: 320px;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	z-index: 2;
}
#under > .section--blue:not(:first-child):not(:last-child)::after {
	position: absolute;
	inset: auto 0 0 auto;
	content: "";
	background: var(--color-key);
	mix-blend-mode: soft-light;
	height: 340px;
	width: 320px;
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	z-index: 2;
}

/* 共通 */
.cta-area::before {
	position: absolute;
	inset: 0 auto auto 0;
	content: "";
	background: var(--color-key);
	mix-blend-mode: soft-light;
	height: 100%;
	width: 500px;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	z-index: 2;
}
.footer-top::after {
	position: absolute;
	inset: 0 0 auto auto;
	content: "";
	background: var(--color-gry);
	height: 100%;
	width: 800px;
	clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
	z-index: 2;
}

/* TB/SP */
@media screen and (max-width: 1199px) {
	.header::before {
		transform-origin: top left;
		transform: scale(0.7);
		height: 120px;
    width: 330px;
	}
	.fv-slider-item::after {
		inset: auto 0 180px auto;
		transform-origin: bottom right;
		transform: scale(0.5);
	}
	.top-about::before {
		transform-origin: bottom left;
		transform: scale(0.5);
	}
	.top-about::after {
		transform-origin: top right;
		transform: scale(0.5);
	}
	.top-service::before {
		transform-origin: top left;
		transform: scale(0.5);
	}
	.top-service::after {
		transform-origin: bottom right;
		transform: scale(0.5);
	}
	.top-news::before {
		transform-origin: bottom left;
		transform: scale(0.5);
	}
	.top-news::after {
		transform-origin: top right;
		transform: scale(0.5);
	}
	.under-fv::after {
		transform-origin: bottom right;
		transform: scale(0.5);
	}
	#under > .section:not(:first-child):not(:last-child)::before {
		transform-origin: bottom left;
		transform: scale(0.5);
	}
	#under > .section:not(:first-child):not(:last-child)::after {
		transform-origin: top right;
		transform: scale(0.5);
	}
	#under > .section--blue:not(:first-child):not(:last-child)::before {
		transform-origin: top left;
		transform: scale(0.5);
	}
	#under > .section--blue:not(:first-child):not(:last-child)::after {
		transform-origin: bottom right;
		transform: scale(0.5);
	}
	.cta-area::before {
		transform-origin: top left;
		transform: scale(0.5);
	}
	.footer-top::after { content: none; }
}

/* SP */
@media screen and (max-width: 639px) {
	.fv-slider-item::after { transform: scale(0.3); }
	.top-about::before { transform: scale(0.3); }
	.top-about::after { transform: scale(0.3); }
	.top-service::before { transform: scale(0.3); }
	.top-service::after { transform: scale(0.3); }
	.top-news::before { transform: scale(0.3); }
	.top-news::after { transform: scale(0.3); }
	.under-fv::after { transform: scale(0.3); }
	#under > .section:not(:first-child):not(:last-child)::before { transform: scale(0.3); }
	#under > .section:not(:first-child):not(:last-child)::after { transform: scale(0.3); }
	#under > .section--blue:not(:first-child):not(:last-child)::before { transform: scale(0.3); }
	#under > .section--blue:not(:first-child):not(:last-child)::after { transform: scale(0.3); }
	.cta-area::before { transform: scale(0.3); }
}

/* =======================================================================================
	hover
======================================================================================= */

@media (hover: hover) {

	a:hover img { opacity: 0.8; }
	a:hover { color: #333; }

	.header-nav-link:hover { color: var(--color-key); }
	.header-nav-link--btn:hover {
		color: var(--color-sub);
		opacity: 0.8;
	}

	.footer-nav-link:hover { color: var(--color-key); }
	.footer-nav-link--btn:hover {
		color: var(--color-sub);
		opacity: 0.8;
	}
	.footer-sns-link a:hover {
		color: var(--color-sub);
		text-decoration: underline;
	}
	.footer-sns-link-item a:hover { text-decoration: underline; }

	.cta-contact-btn a:hover,
	.cta-contact-btn a:hover .cta-contact-btn-ttl { color: #fff; }
	.cta-contact-btn a:hover::after { transform: skewY(-10deg) scale(1, 1); }
	.cta-contact-btn a:hover .cta-contact-btn-txt::after {
		border-top: 5px solid #fff;
		border-right: 5px solid #fff;
	}

	.dots-class li:hover { background-color: var(--color-key); }
	.top-link-btn a:hover {
		color: #fff;
		opacity: 0.8;
	}
	.section--blue .top-link-btn a:hover {
		color: var(--color-sub);
		opacity: 0.8;
	}

	.news-category-item a:hover {
		color: #fff;
		opacity: 0.8;
	}
	.news-item-link:hover,
	.news-link-item a:hover {
		color: var(--color-sub);
		background: #f1f4fb;
	}

	.news-item-link:hover .news-item-detail { text-decoration: underline; }

	.about-office-dl dd a:hover { text-decoration: underline; }

	.service-detail-link a:hover {
		color: var(--color-sub);
		text-decoration: underline;
	}
}

/* =======================================================================================
	Animation アニメーション
======================================================================================= */

/* FVテキスト */
@keyframes fadeInChar {
	from { opacity: 0; ; }
	to   { opacity: 1; ; }
}
@keyframes bgSlideIn{
	0%   { transform: scaleX(0); opacity: 0; }
	40%  { opacity: 1; }
	100% { transform: scaleX(1); opacity: 1; }
}
@keyframes textIn{
	0% { opacity: 0; transform: translateX(-5px); }
	100%   { opacity: 1; transform: translateX(0); }
}

/* マーキー */
@keyframes marquee {
	0%   { translate: 0; }
	100% { translate: calc(-100% - 1rem); }
}

/* 画像フェード */
.monitor img {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.monitor.is-active img {
	opacity: 1;
	transform: translateY(0);
}

/* =======================================================================================
	Screen 1200px～1400px
======================================================================================= */
/* 微調整 */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
	.top-about .top-header-ttl {
		position: static;
		font-size: 90px;
		line-height: 1;
		writing-mode: horizontal-tb;
		white-space: normal;
		transform: none;
	}
	.footer-base-list { gap: 20px;}
	.footer-sns-link-list { flex-wrap: wrap; }
}