@charset "utf-8";
/* ----------------------------------------------
    The new CSS reset - version 1.8.5 (last updated 14.6.2023)
------------------------------------------------- */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
	all: unset;
	display: revert;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
a, button {
	cursor: revert;
}
ol, ul, menu {
	list-style: none;
}
img {
	max-inline-size: 100%;
	max-block-size: 100%;
}
table {
	border-collapse: collapse;
}
input, textarea {
	-webkit-user-select: auto;
}
textarea {
	white-space: revert;
}
/* ----------------------------------------------
*** 共通設定 ***
------------------------------------------------- */
/* ----------------------- 基本設定 */
:root {
	--max_width: 1200px;
	--base_background: #ffffff;
	--base_color: #414141;
	--site_color: #306fd5;
	--c-top:  #3a77dc; /* 上部の平均色 */
	--c-mid:  #306fd5; /* 中間 */
	--c-bot:  #2b6bd0; /* 下部の平均色 */
	--c-left: #3a77dc; /* 左寄りの平均色 */
	--c-right:#326dd3;
}
body {
	background: var(--base_background);
	color: var(--base_color);
	-webkit-text-size-adjust: 100%;
	font-family: 'Noto Sans JP', Helvetica, Arial, sans-serif;
	font-size: 100%;
	line-height: 1.6;
	text-align: center;
	scroll-behavior: smooth;
}
/* ----------------------- リンク設定 */
a:hover {opacity: 0.85;}
a[target="_blank"]::after {
	content: "\1F517";  /* 🔗 */
	margin-left: 0.5rem;
	font-size: 0.9rem;
}
a.pdf {
	padding: 0 0 0 1rem;
	background: url(img/icon_pdf.gif) no-repeat center left;
}
/* ----------------------- 短縮設定 */
.none {	
	display: none;
}
.t_l {
	text-align: left;
}
.t_r {
	text-align: right;
}
.t_c {
	text-align: center;
}
.f_l 	{float: left;}
.f_r 	{float: right;}
.clearboth {clear: both;}
.v_m	{vertical-align: middle;}
.red 	{color: #ff0000;}
.maroon {color: #800000;}
.green 	{color: #008000;}
.blue 	{color: #0000ff;}
.navy 	{color: #000080;}
.yellow 	{color: #ffff00;}
.pink 	{color: #ff33cc;}
.orange 	{color: #ffa500;}
.olive 	{color: #339966;}
.bg_aqua {background: #EDF3FF;}
.bg_gray {background: #F9F9F9;}

/* ----------------------------------------------
*** 個別設定 ***
------------------------------------------------- */
h2 {
	color: var(--site_color);
	font-size: 1.8rem;
	font-weight: bold;
}
h3 {
	color: var(--site_color);
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: 0.1em;
}
h4 {
	font-weight: bold;
}
h5 {
	font-size: 1rem;
	font-weight: bold;
}
h6 {
	font-size: 0.85rem;
	font-weight: bold;
}
p {
	font-size: 1.05rem;
	text-align: left;
}
@media  (max-width: 767px) {
h2 {
	font-size: 1.6rem;
	}
}
/* -------------------- ヘッダー */
header {
	width: 100%;
	background-color: var(--site_color);
}
.headerWrap {
	display: flex;
	flex-direction: column;
	min-height:100vh; 
	min-height: 100svh;
	margin: 0 2% 0 0;
	border-radius: 0 0 10em 0;
	background-image: url(images/topImage02.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	background-attachment: fixed;
	animation: bg_topImage 30s infinite;
}
@keyframes bg_topImage {
	0% {
	background-image: url(images/topImage2022.jpg);
	}
	31% {
	background-image: url(images/topImage2022.jpg);
	}
	33% {
	background-image: url(images/topImage2025.jpg);
	}
	64% {
	background-image: url(images/topImage2025.jpg);
	}
	66% {
	background-image: url(images/topImage01.jpg);
	}
	81% {
	background-image: url(images/topImage01.jpg);
	}
	83% {
	background-image: url(images/topImage03.jpg);
	}
	98% {
	background-image: url(images/topImage03.jpg);
	}
	100% {
	background-image: url(images/topImage2022.jpg);
	}
}
header .wrap {
	position: relative;
	isolation: isolate;
	position:sticky; 
	order:2; 
	top:0; 
	z-index:10;
	margin-top: auto;
}
header .wrap.is-fixed {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 999;
}
#wrap-spacer { 
	height: var(--wrap-h, 80px); 
}
header .wrap div  {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--max_width);
	margin: 0 auto;
	padding: 1rem 1rem 0;
}
header .wrap::before {
	content: "";
	position: absolute; inset: 0;
	opacity: 0.8;
	pointer-events: none;
	background:
	radial-gradient(60% 140% at 0% 0%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%),
	linear-gradient(to right,rgba(58,119,220,0.18) 0%,	rgba(50,109,211,0.00) 35%,rgba(50,109,211,0.12) 100% ),
	linear-gradient(to bottom,	#3a77dc 0%,#306fd5 55%,#2b6bd0 100%);
	background-color: var(--site_color);
	z-index: -1;
}
h1.logo {
	margin: 0 0 1rem;
}
h1.logo img {
	width: 320px;
}
header p.tel {
	margin: 0.5rem 1rem 0.6rem auto;
	font-weight: bold;
	font-size: 1.8rem;
} 
header p.tel span {
	margin: 0 0.3rem 0 0;
	font-size: 1.2rem;
}
header p.tel a {
	display: block;
	padding: 0 0 0 28px;
	color: #fff;
	letter-spacing: 0.02em;
	text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
}
h2.catchCopy {
	max-width: 60rem;
	margin: 24vh auto 2.4rem;
	color: #ffffff;
	text-shadow: 1px 2px 8px rgba(255, 255, 255, 0.7);
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-size: 7.2rem;
	animation-name: fadein;
	animation-duration: 3s;
	animation-timing-function: ease-out;
	color: transparent;		/* 中抜き（白抜き） */
	-webkit-text-stroke: 2px #fff;	/* 白い縁取り */
	filter:	drop-shadow(0 0 12px #ddd)	/* 近い白い光 */
		drop-shadow(0 0 16px #bbb)	/* 外側の色グロー */
		drop-shadow(0 0 36px #fff); 	/* さらに外側 */
}
h2.catchCopy span {
	letter-spacing: -1rem;
}
h2.catchCopy span:nth-child(1) {
	letter-spacing: -3rem;
}
h2.catchCopy span:nth-child(3) {
	letter-spacing: -2rem;
}
@media (hover: none) and (pointer: coarse) {
.headerWrap {
	background-attachment: scroll;
	}
}
@media  (max-width: 767px) {
.headerWrap {
	margin: 0;
	border-radius: 0;
	background-size: cover;
	min-height: 100vh;
	min-height: 100svh;
}
header .wrap {
	flex-direction: column;
	justify-content: center;
	}
h1.logo {
	margin: 0;
	}
header p.tel {
	margin: 0 auto 0.6rem;
	} 
header p.tel a {
	padding: 0 0 0 28px;
	font-size: 1.5rem;
	letter-spacing: 0;
	}
#imageAnime {
	min-height: 30vh;
	padding: 1vh 0 0;
	order:1; 
	lex:1 0 auto;
	}
h2.catchCopy {
	margin: 14vh auto 0;
	padding: 1rem 1rem;
	font-size: 3rem;
	color: #fff; 			/* 中抜き（白抜き） */
	-webkit-text-stroke: 0;		/* 白い縁取り */
	filter:	drop-shadow(0 0 1px #eee) /* 近い白い光 */
		drop-shadow(0 0 2px #ccc) /* 外側の色グロー */
		drop-shadow(0 0 3px #fff); /* さらに外側 */
	}
h2.catchCopy span {
	letter-spacing: -0.3rem;
	}
h2.catchCopy span:nth-child(1) {
	letter-spacing: -0.9rem;
	}
h2.catchCopy span:nth-child(3) {
	letter-spacing: -0.6rem;
	}
}

/* -------------------- ヘッダー 終わり */


/* ----------------------- コンテンツ */
#catch {
	padding: 0 1rem;
	border-radius: 0 0 0 20em;
	background: var(--site_color);
	color: #fff;
}
.catchWrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: var(--max_width);
	height: 600px;
	margin-inline: auto; 
}
.catchWrap div {
	width: 48%;
}
#catch h2 {
	max-width: 8em;
	margin: 0 auto 2rem;
	font-size: 3rem;
	color: #fff;
}
#catch p {
	max-width: 28em;
	margin: 0 0 1rem;
	font-size: 1.2rem;
	line-height: 2.0;
}
@media  (max-width: 767px) {
#catch {
	border-radius: 0 0 0 5em;
	}
.catchWrap {
	flex-direction: column;
	height: 100%;
	padding: 3rem 0;
	}
.catchWrap div {
	width: 100%
	}
#catch h2 {
	width: 100%;
	font-size: 1.8rem;
}
#catch p {
	width: 100%;
	font-size: 1.0rem;
	line-height: 1.6;
	}
}

/* --------- work */
#work {
	max-width: var(--max_width);
	margin: 0 auto 6rem;
	padding: 1rem;
}
.workWrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4rem 2rem;
}
#work .wrap {
	width: 360px;
	margin: 2rem 0 0; 
	padding: 1rem;
	border: 1px solid var(--site_color);
	border-radius: 1rem;
}
#work .wrap:nth-child(2) {
}
#work .wrap p:first-child {
	margin: 0 0 3rem;
}
#workWrap {
}
#workWrap div {
}
#work img {
	width: 260px;
	border-radius: 50%;
	padding: 5px;
	background:#fff;
	box-shadow: 0 1px 10px -3px rgba(0, 0, 0, 0.7);
}
#work h3 {
	margin: 2rem 0 1rem;
}
#work p {
	margin: 0 0 0.5rem;
}
#work p.more a {
	display: block;
	width: 120px;
	height: 30px;
	margin: 0 auto 1rem;
	border: 1px solid var(--site_color);
	border-radius: 30px;
	background:var(--site_color);
	color: #fff;
	font-size: 0.9rem;
	line-height: 28px;
	text-align: center;
}
@media  (max-width: 767px) {
.workWrap {
	flex-direction: column;
	gap: 1rem;
}
#work .wrap {
	width: 100%;
	margin: 0; 
	padding: 0.5rem 1rem;
	}
}


#contents .wrap {
	max-width: var(--max_width);
	margin: 2rem auto 0;
	padding: 0 1rem;
}

#contents h2 {
	height: 100px;
	background: var(--site_color);
	color: #fff;
	line-height: 100px;
}
#contents h2 img {
	width: 80px;
	margin: 0 0.5rem 0 0;
	vertical-align: middle;
}
#work02 h2 img {
	width: 60px;
}
#recruit h2 img {
	width: 70px;
}
/* --------- work01 */
#work01 {
	margin: 0 0 6rem 0;
}
#work01 .work01Wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 2rem
}
#work01 .bgGray {
	max-width: 540px;
	background: #d7d7d7;
	margin: 2rem 0 2rem 0;
	padding: 0.5rem 0 0 0;
}
#work01 h3 {
	margin: 1rem 1.5rem 0;
	text-align: left;
}
#work01 .bgGray h3 {
	margin: 1rem 1.5rem;
	text-align: center;
}
#work01 p {
	margin: 0 1rem;
}

#work01 ul {
	margin: 1rem 0.5rem 2rem 1.5rem;
	color: var(--site_color);
}
#work01 ul li {
	float: left;
	margin: 0 1.5rem 0 0;
}
#work01 ul li:before {
	content: "";
	position: relative;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 4px;
	background: #0074bf;
	border-radius:  50%; 
}
#work01 img {
	width: 100%;
	margin: 2rem 0 -1rem;
}

/* --------- work02 */
#work02 {
	margin: 0 0 6rem 0;
}
#work02 p {
	margin: 0 1rem 2rem;
}
#work02 .work02Wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem
}
#work02 .work02Wrap div {
	width: 31%;
}
#work02 .work02Wrap img {
	width: 100%;
}
#work02 h3 {
	margin: 0;
	font-size: 1.25rem;
	letter-spacing: 0;
}
#work02 h3 span {
	font-size: 1.15rem;
}
#work02 p.kome {
	margin-top: 3rem;
	text-align: center;
}
@media (max-width: 767px) {
#work02 .work02Wrap {
	gap: 0.5rem
	}
#work02 .work02Wrap div {
	width: 46%;
	}
#work02 h3 {
	font-size: 0.9rem;
	}
#work02 h3 span {
	font-size: 0.9rem;
	}
}

/* --------- work03 */
#work03 {
	margin: 0 0 6rem 0;
}
#work03 p {
	margin: 0 1rem 2rem;
}
#work03 .work03Wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}
#work03 .work03Wrap a {
	width: 24%;
}
#work03 .work03Wrap img {
	width: 100%;
}
@media (max-width: 1200px) {
#work03 .work03Wrap a {
	width: 32%;
	}
}
@media (max-width: 767px) {
#work03 .work03Wrap {
	gap: 0.5rem;
	}
#work03 .work03Wrap a {
	width: 48%;
	}
}
/* --------- contact */
#contact {
	margin: 0 0 6rem 0;
	background: #f1f5f8;
}
#contact .wrap {
	max-width: 990px;
	min-height: 360px;
	margin: 3rem auto 0;
	padding: 0 1rem;
	padding-top: 60px;
	background: url(img/contact.png) no-repeat 60px bottom;
}
#contact h2 {
	display: none;
}
.contactMessage {
	float: right;
	width: 37rem; 
}
#contact h3 {
	margin: 0 auto 1rem;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-size: 2.2rem;
}
#contact p {
	float: right;
	width: 37rem; 
	text-align: center;
}
#contact p.tel {
	font-size: 1.8rem;
	margin: 1em 0 0.5rem;
	font-weight: bold;
}
#contact p.tel a {
	padding: 0.5rem;
	color: var(--site_color);
	letter-spacing: 0.02em;
}
#contact p.tel span {
	margin: 0 0.3rem 0 0;
	font-size: 1.2rem;
}
p.linkNav {
	clear: both;
}
p.linkNav a {
	display: block;
	width: 300px;
	height: 40px;
	background: var(--site_color);
	color: #fff;
	margin: 1rem auto 2rem auto;
	text-align: center;
	line-height: 40px;
	border-radius: 20px;
}
p.linkNav a:hover {
	opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha( opacity=75 )";
	text-decoration: none; 
}

@media (max-width: 900px) {
#contact .wrap {
	background: none;
	}
.contactMessage {
	float: none;
	width: 100%;
	text-align: left;
	}
#contact h3 {
	margin: 0 auto 1rem;
	font-size: 1.5rem;
	text-align: center;
	letter-spacing: 0;
	}
#contact p {
	float: none;
	width: 100%;
	margin: 0 auto 1rem;
	text-align: left;
	}
#contact p.tel {
	margin: 0 auto;
	text-align: center;
	}
}
/* --------- recruit */
#recruit {
	margin: 0 0 6rem 0;
}
#recruit p {
	margin: 0 1rem 2rem;
	text-align: center;
}

/* ----------------------- フッター */
#footer {
	padding: 3rem 0 0 0;
	background: #e2edf0;
	text-align: left;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}
#footerWrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: var(--max_width);
	margin: 0 auto;
	padding: 0 1rem;
}
#footerNav {
	width: 500px;
	margin: 0 0 1rem;
}
#footer h2 {
	margin: 0 0 0.5rem 0;
	color: var(--site_color);
	font-size: 2.4rem;
	text-align: left;
}
#footer h2 a {
	color: var(--site_color);
}
#footer p {
	color: var(--base_color);
	line-height: 1.8;
}
#footer p.mail {
	padding: 0 0 0 3rem;
	background: url(img/icon_mail.svg) no-repeat 0.45rem 0.25rem/22px;
}
#footer p.catchphrase {
	margin: 0;
	color: var(--site_color);
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 0.1rem;
}
#footer a {
	color: var(--base_color);
}
#footer ul {
	margin: 1rem 0 0;
}
#footer ul li {
	margin: 0 0rem 0.3rem 0;
	color: var(--site_color);
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.5;
}
#footer ul ul {
	margin: 0 0 0 1rem;
}
#footer ul ul li {
	margin: 0  0 0 1rem;
	color: var(--base_color);
	font-size: 1rem;
	font-weight: normal;
	list-style: circle;
}
#googlemap {
	margin: 0 0 1rem;
}
#googlemap iframe {
	overflow: hidden;
	width: 420px;
	height:570px;
	border: 0;
	background-color: transparent;
}
p#copyright {
	clear: both;
	height: 100px;
	margin: 2rem 0 0 0;
	padding: 2.5rem 0;
	background: var(--site_color);
	color: #fff;
	font-size: 0.9rem;
	text-align: center;
	letter-spacing:  0.05rem;
}
@media (max-width: 970px) {
#footerNav {
	width: 100%;
}
#footer h2 {
	font-size: 2rem;
	}
#footer p.catchphrase {
	font-size: 1.05rem;
	}
#footer ul li span {
	font-size: 1.25rem;
	letter-spacing: -0.1rem;
	}
#googlemap {
	width: 100%;
	}
#googlemap iframe {
	width: 100%;
	height: 360px;
	}
}

#pageTop {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #0088be;
	opacity: 0.6;
}
#pageTop a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
}
#pageTop a::before{
	position: absolute;
	top: -15px;
	bottom: 0;
	right: 0;
	left: 0;
	width: 25px;
	height: 25px;
	margin: auto;
	color: #fff;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f0d8';
	font-size: 25px;
	text-align: center;
}
/* ----------------------- フッター 終わり */