/*
Theme Name:taisei202508
*/

/**********************************************************************
* リセットCSS
************************************************************************/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	border: 0;
	font-size: 100%;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	width: 100%;
}

body {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	letter-spacing: 1.5px;
	line-height: 1.5;
}

img {
	width: 100%;
	top: 0;
	left: 0;
}

a {
	text-decoration: none;
}

ol,
ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}




/* サイト全体がなめらかに動く */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

/****************************************************************************************************
* フォント設定
***************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

html,
body {
	font-size: 16px;
}

/*会社名*/

@font-face {
	font-family: 'TsukuMinPro';
	src: url('./fonts/fot-tsukuminpro-lb-webfont.woff2') format('woff2'),
		url('./fonts/fot-tsukuminpro-lb-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

.ja7 {
	font-family: 'TsukuMinPro', serif;
	/* serifをフォールバックフォントとして指定 */
}

/* Title */
.ja8 {
	font-family: "Noto Sans JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}


/** h1 **/
.ja {
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-family: "ヒラギノ角ゴ Pro W3",
		"Hiragino Kaku Gothic Pro",
		"メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/** header 社名 **/
.ja2 {
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	font-style: normal;
}

/** h2 **/
.ja3 {
	font-family: "Klee One", cursive;
	font-weight: 400;
	font-style: normal;

	font-family: "ヒラギノ角ゴ Pro W3",
		"Hiragino Kaku Gothic Pro",
		"メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/** message **/
.ja4 {
	font-family: "Klee One", cursive;
	font-weight: 400;
	font-style: normal;

}

/* 会社概要 沿革 */
.ja5 {
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/* 社名 */
@font-face {
	font-family: 'CustomFontName';
	/* フォント名を指定 */
	src: url('your-font-file.woff2') format('woff2'),
		/* .woff2 フォーマット */
		url('your-font-file.woff') format('woff'),
		/* .woff フォーマット */
		url('your-font-file.ttf') format('truetype');
	/* .ttf フォーマット */
	font-weight: normal;
	font-style: normal;
}

.ja6 {
	font-family: 'CustomFontName', sans-serif;
	/* フォントを適用 */
}

/* simple */
.en {
	font-family: "Cactus Classical Serif", serif;
	font-weight: 400;
	font-style: normal;
}

/* 1st message */
.en2 {
	font-family: "Satisfy", cursive;
	font-weight: 400;
	font-style: normal;
}

/* 社名アルファベット グレコSTD代替 */
.en3 {
	font-family: "Cormorant Garamond", serif;
	font-weight: 300;
	font-style: normal;
}


/**********************************************************************
* ヘッダーCSS
************************************************************************/
html {
	scroll-behavior: smooth;
}



.header-box {
	width: 100%;
	height: 16vh;
	position: relative;
	z-index: 160;
	display: flex;
	position: fixed;
	margin-top: 0vh;
}

.header-home {
	width: 30%;
}

.header-home-btn {
	display: flex;
	margin-left: 16%;
}

.header-logo {
	width: 22%;
	padding-top: 2.4vh;
}

.header-name {
	color: white;
	font-size: 2vw;
	padding-top: 3.8vh;
	padding-left: 3.2%;
}

.header-items-box {
	width: 70%;
}

.header-items {
	display: flex;
	margin-left: auto;
	margin-right: 0%;
	width: 54%;
}

.header-items a {
	width: 30%;
}

.header-item {
	color: white;
	font-size: 1.6vw;
	padding-top: 4.8vh;
}

/* btn-8: テキスト下線 */
.btn-8 {

	position: relative;
}

.btn-8::before {
	background: white;
	content: '';
	width: 64%;
	height: 1.6px;
	position: absolute;
	left: 0;
	bottom: 0;
	margin: auto;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}

.btn-8:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}

.btn-81::before {
	width: 90%;
}



.openbtn1 {
	display: none;
}

.modal {
	display: none;
}

/***********************************************************************
* fv
***************************************************************************/



.container {
	position: relative;
	text-align: center;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #000;
	overflow: hidden;
	width: 100%;
	position: absolute;
	top: 0px;
	z-index: 1000;
}

/* 文字の初期スタイル */
.text {
	font-size: 2.4rem;
	color: #fff;
	opacity: 0;
	transition: opacity 1.5s ease;
}


.text.visible {
	opacity: 1;
}


/* 既存の円のスタイル */
.circle {
	width: 360px;
	height: 360px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
}

/* 円のフェードインアニメーション */
.circle.visible {
	opacity: 1;
	transition: opacity 1.5s ease;
}

/* アニメーション用の円スタイル */
.animated-circle {
	stroke-dasharray: 1068;
	/* 円周の長さ */
	stroke-dashoffset: 1068;
	/* 非表示状態からスタート */
	stroke-width: 1.6;
	/* アニメーション用の円を太めに設定 */
}

/* 枠線アニメーション */
.circle.animate-border .animated-circle {
	animation: draw-border 1.5s ease forwards;
}

/* アニメーションのキー */
@keyframes draw-border {
	0% {
		stroke-dashoffset: 1068;
	}

	100% {
		stroke-dashoffset: 0;
	}
}










.fv {
	width: 100%;
	height: 104vh;
	overflow-y: hidden;
	margin-top: 0vh;
	position: relative;
	z-index: 100;
}

.fv-img {
	width: 100%;
	margin-top: -8vh;
}

.fv-img video {
	width: 100%;
	margin: 0 auto;
	margin-top: -12vh;
}



.slide {
	position: relative;
	width: 100%;
	height: 104vh;
	overflow: hidden;
}

.slide-image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: slider-1 15s linear infinite;
	display: table;
}

.slide-image img {
	vertical-align: middle;
}

.slide-image2 {
	margin-left: 0px;
}


.slide-image:nth-child(1) {
	animation-delay: -2s;
}

.slide-image:nth-child(2) {
	animation-delay: 3s;
}

.slide-image:nth-child(3) {
	animation-delay: 8s;
}

@keyframes slider-1 {
	0% {
		opacity: 0;
		transform: scale(1);
	}

	4.16% {
		opacity: 1;
	}

	33.33% {
		opacity: 1;
	}

	41.66% {
		opacity: 0;
		transform: scale(1.2);
	}

	100% {
		opacity: 0;
	}
}

.fv-img2 {
	margin-top: 0vh;
}

.fv-img3 {
	margin-top: 0vh;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
}


.fv-black {
	background-color: rgb(0, 0, 0, 0.3);
	margin-top: -104vh;
	position: relative;
	z-index: 110;
	width: 100%;
	height: 112vh;
}

.fv-dis {
	color: white;
	text-align: center;
	position: relative;
	z-index: 115;
	padding-top: 56vh;
}

.fv-dis1 {
	font-size: 32px;
	display: none;
}

.fv-dis2 {
	font-size: 32px;
	margin-top: -8vh;
	letter-spacing: 6.4px;
}



.audio {
	height: 8vh;
	width: 320px;
	position: absolute;
	top: 84vh;
	left: auto;
	right: 0;
	z-index: 120;
}


/*******************************************************************
* what
*******************************************************************/
.what {
	width: 100%;
	background-color: #D2D2D2;
	margin-top: -10vh;
}

.what-title {
	color: rgb(0, 0, 0, 0.3);
	text-align: center;
	font-size: 6.4vw;
	padding-top: 44vh;
	position: absolute;
	z-index: 110;
	line-height: 12vh;
	margin-left: 32vw;
}

.what-box {
	width: 100%;
	height: 184vh;
	display: flex;
	margin-top: -20vh;
	position: relative;
	z-index: 100;
	padding-top: 64vh;
}

.what-box1 {
	width: 50%;
	height: 120vh;
}

.what-img1 {
	margin-left: 12%;
	margin-right: 8%;
	height: 40vh;
	overflow: hidden;
}

.what-img1 img {
	border-radius: 0px;
	object-fit: cover;
	margin-top: -30vh
}

.what-img2 {
	margin-left: 12%;
	margin-right: 8%;
	height: 40vh;
	overflow: hidden;
}

.what-img2 img {
	border-radius: 0px;
	object-fit: cover;
	margin-top: -8vh
}

.what-img3 {
	margin-left: 12%;
	margin-right: 8%;
	height: 40vh;
	overflow: hidden;
}

.what-img3 img {
	border-radius: 0px;
	object-fit: cover;
	margin-top: -30vh
}

.what-box2 {
	width: 50%;
}

.what-box2-title {
	color: #1c2649;
	padding-top: 64vh;
	font-size: 3.2vw;
	font-weight: 200;
}

.what-box2-dis {
	color: #1c2649;
	font-size: 1.4vw;
	width: 72%;
	margin-top: 4vh;
}

.what-box2 a {
	display: inline-block;
	width: 16vw;
}


/* btn-9: スライド */
.btn-9 {
	color: white;
	background-color: #1c2649;
	border-radius: 3px;
	margin-top: 4vh;
	font-size: 1.4vw;
	letter-spacing: 0.2em;
	width: 16vw;
	height: 10vh;
	padding-top: 2.4vh;
	padding-left: 2vw;
	position: relative;
	z-index: 1;
	transition: .5s;
}

.btn-9::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: black;
	transition: transform ease .5s;
	transform-origin: 100% 50%;
	transform: scaleX(0);
}

.btn-9:hover {
	color: white;
	font-size: 1.3vw;
	padding-top: 2.8vh;
	padding-left: 2.4vw;
}

.btn-9:hover::before {
	transform-origin: 0% 50%;
	transform: scaleX(1);
}




.arrow {
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}

.arrow::before,
.arrow::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}



.what01 {
	width: 100%;
	background-color: #D2D2D2;
	padding-bottom: 16vh;
	padding-top: 4vh;
}

.what-title01 {
	color: rgb(0, 0, 0, 0.3);
	text-align: center;
	font-size: 6.4vw;
	padding-top: 28vh;
	position: absolute;
	letter-spacing: 0.08vw;
	z-index: 110;
	line-height: 160px;
	margin-left: 32vw;
}

.what-box01 {
	width: 100%;
	height: 184vh;
	display: flex;
	flex-direction: row-reverse;
	margin-top: 0vh;
	position: relative;
	z-index: 100;
	padding-top: 44vh;
}

.what-img01 {
	margin-left: 12%;
	margin-right: 8%;
	height: 40vh;
	overflow: hidden;
}

.what-img01 img {
	border-radius: 0px;
	object-fit: cover;
	margin-top: -26vh
}

.what-img02 {
	margin-left: 12%;
	margin-right: 8%;
	height: 40vh;
	overflow: hidden;
}

.what-img02 img {
	border-radius: 0px;
	object-fit: cover;
	margin-top: -8vh
}

.what-img03 {
	margin-left: 12%;
	margin-right: 8%;
	height: 40vh;
	overflow: hidden;
}

.what-img03 img {
	border-radius: 0px;
	object-fit: cover;
	margin-top: -8vh
}

.what-box02 {
	width: 50%;
	padding-left: 18%;
}

.what-box02-title {
	color: #1c2649;
	padding-top: 76vh;
	font-size: 3.2vw;
	font-weight: 200;
}

.what-box02-dis {
	color: #1c2649;
	font-size: 1.4vw;
	width: 100%;
	margin-top: 4vh;
}

/******************************************************************************
* contact
********************************************************************************/
.contact {
	background-color: #151f25;
	width: 100%;
}

.contact-title {
	font-size: 40px;
	color: white;
	padding-top: 24vh;
	text-align: center;
}

.contact-content {
	padding-bottom: 24vh;
	display: flex;
	width: 56%;
	margin: 0 auto;
	margin-top: 8vh;
}

.contact-dis {
	color: white;
	width: 50%;
	font-size: 20px;
}

.contact-content a {
	display: inline-block;
	width: 50%;
}

.contact-btn {
	background-color: #626262;
	width: 24vw;
	height: 16vh;
	color: white;
	font-size: 20px;
	padding-top: 6vh;
	text-align: center;
	transition: 0.5s;
}

/* btn-6: 沈む */
.btn-6 {
	color: white;
	background: #000000;
	border: solid 1px #1c2649;
	border-radius: 3px;
	font-size: 1.6vw;
	letter-spacing: 0.2em;
	padding-top: 5vh;
	padding-left: 1.6vw;
	text-decoration: none;
	transition: 0.5s;
}

.btn-6:hover {
	box-shadow: 0px 8px 80px rgb(28, 38, 73);
	transform: translateY(4px);
}

/*********************************************************************************
* footer
***********************************************************************************/
.footer-box {
	width: 100%;
	background-color: #535557;
	padding-top: 16vh;
}

.footer-title {
	display: flex;
	width: 25.6%;
	margin: 0 auto;
}

.footer-title-img {
	width: 16%;
}

.footer-title-dis {
	font-size: 24px;
	color: white;
	padding-left: 2%;
	padding-top: 4px;
}

.footer-title2 {
	color: white;
	text-align: center;
	margin-top: 0vh;
	font-size: 16px;
	margin-bottom: 4vh;
}

.footer-items {
	display: flex;
	flex-flow: column;
}

.footer-item {
	text-align: center;
	color: white;
	font-size: 18px;
	padding-top: 2vh;
	border-bottom: solid 0.5px white;
	transition: 0.5s;
}

.footer-item1 {
	display: inline-block;
	width: 10%;
	margin: 0 auto;
}

.footer-item2 {
	display: inline-block;
	width: 18%;
	margin: 0 auto;
}

.footer-item01:hover {
	transition: 0.5s;
}

.footer-item02:hover {
	transition: 0.5s;
}

.footer-item03:hover {
	transition: 0.5s;
}


/* btn-9: スライド */
.footer-item {
	border-radius: 3px;
	position: relative;
	z-index: 1;
}

.footer-item::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: white;
	transition: transform ease .3s;
	transform-origin: 100% 50%;
	transform: scaleX(0);
}

.footer-item:hover {
	color: #535557;
	font-weight: bold;
}

.footer-item:hover::before {
	transform-origin: 0% 50%;
	transform: scaleX(1);
}


.footer-copy {
	text-align: center;
	color: white;
	font-size: 16px;
	padding-top: 8vh;
	padding-bottom: 4vh;
}



/***********************************************************************
* business
****************************************************************************/
.business {
	width: 100%;
	background-color: #D2D2D2;
}


/**************************
2025.08 事業説明デザイン修正
***************************/
.work {
	width: 100%;
	background-color: #f0f0f2;
}

.work-fv {
	width: 100%;
	height: 68vh;
	background: linear-gradient(90deg,
			/* 左→右へのグラデーション */
			#222629 0%,
			/* 左端はほぼ黒 */
			#333f68 32%,
			/* 中間に深い青 */
			#222629 100%
			/* 右端に黒に近い色 */
		);
	color: #ffffff;
	/* 文字色は白 */
}

.work-fv-dis {
	color: white;
	font-size: 1.8vw;
	text-align: center;
	width: 56%;
	margin: 0 auto;
	padding-top: 24vh;
}

.work-fv-content {
	color: white;
	font-size: 1.6vw;
	width: 75%;
	margin: 0 auto;
	margin-top:4vh;
}


.work-content{
	width:100%;
}
.work-content01{
	display:flex;
	height:88vh;
	border-bottom:solid white 1px;
	display: flex;
  align-items: center; 
}
.work-content02{
	display:flex;
	flex-direction: row-reverse; 
	height:88vh;
	border-bottom:solid white 1px;
	display: flex;
  align-items: center; 
}
.work-content03{
	display:flex;
	flex-direction: row-reverse; 
	height:96vh;
	border-bottom:solid white 1px;
	padding-bottom:8vh;
	display: flex;
  align-items: center; 
}
.work-content-left{
	width:47%;
	padding:0px 96px 48px 96px;
	display: flex;
  flex-direction: column;
}
.work-content-left-inner{
	margin-top: auto;
}
.work-content-left-no{
	font-size:2.4vw;
}
.work-content-left-title{
	font-size:1.8vw;
	margin-top:8px;
}
.work-content-left-title-pc{
	display:block;
}
.work-content-left-title-sp{
	display:none;
}
.work-content-left-content{
	font-size:1.1vw;
	margin-top:16px;
}
.work-content-right1{
	width:53%;
	display: flex;
  justify-content: flex-start; /* 左寄せ */
  align-items: flex-end;
	padding-bottom:48px;
}
.work-content-right2{
	width:53%;
	display: flex;
  justify-content: flex-end; /* 右寄せ */
  align-items: flex-end;
	padding-bottom:48px;
}
.work-content-img{
	width:88%;
	max-width: 100%; /* はみ出さないように調整 */
  height: auto;
}









.business-fv03 {
	width: 100%;
	height: 88vh;
	overflow: hidden;
}

.business-fv03 img {
	width: 100%;
	margin-top: -42vh;
}

.business-fv-dis {
	margin-top: -60vh;
	position: relative;
	z-index: 120;
	height: 60vh;
}

.business-fv-dis01 {
	margin-top: -88vh;
}

.business-fv1 {
	color: white;
	/*	text-shadow: 
    -1px -1px 0 #000, 
    1px -1px 0 #000,  
    -1px 1px 0 #000,  
    1px 1px 0 #000;    */
	font-size: 16px;
	text-align: center;
	padding-top: 32vh;
	letter-spacing: 4px;
}

.business-fv2 {
	color: white;
	/*	text-shadow: 
    -0.6px -0.6px 0 #000,
    0.6px -0.6px 0 #000,  
    -0.6px 0.6px 0 #000,  
    0.6px 0.6px 0 #000;    */
	font-size: 2.8vw;
	text-align: center;
	margin-top: -0.4vh;
	font-weight: 200;
}


.business-top {
	padding-top: 9.6vh;
	padding-bottom: 16vh;
	width: 56%;
	margin: 0 auto;
	position: relative;
	z-index: 115;
	opacity: 0;
	/* 最初は透明 */
	transition: opacity 2.4s ease-in;
	/* 1秒かけてふわっと表示 */
}

.business-top-dis {
	font-size: 18px;
	text-align: left;
	letter-spacing: 1.6px;
	background-color: rgba(0, 0, 0, 0.56);
	/*background-color:rgb(28,38,73,0.2);*/
	padding-top: 8vh;
	padding-bottom: 8vh;
	padding-left: 2.4vw;
	padding-right: 2.4vw;
	border-radius: 4px;
	color: white;
}



.business-box {
	width: 100%;
	background-color: #F1F1F3;
	margin-top: -6vh;
}

.business-box-inner {
	width: 72%;
	margin: 0 auto;
	padding-top: 16vh;
	padding-bottom: 32vh;
}

.business-box1 {
	display: flex;
	width: 100%;
}

.business-box-content {
	width: 50%;
	padding-left: 1.6%;
	padding-right: 1.6%;
	height: 56vh;
	display: flex;
	margin-top: 6.4vh;
}

.business-box-content:hover .business-box-content-img img {
	transform: scale(1.2);
	/* ホバー時に1.2倍に拡大 */
	transition: 0.5s;
}

.business-box-content-img {
	width: 36%;
	overflow: hidden;

}

.business-box-content-img img {
	object-fit: cover;
	width: 320%;
	margin: 0 auto;
	transition: 0.5s;

}

.business-box-content-img7 img {
	width: 440%;

}

.business-box-content-dis {
	width: 64%;
	background-color: white;
	padding: 1.6vw;
	font-size: 1vw;
	color: #333333;
}


.business-box-content1 {
	display: flex;
	height: 76vh;
	margin-top: 6.4vh;
	padding-left: 1.6vw;
	padding-right: 1.6vw;
}

.business-box-content1:hover .business-box-content-img1 img {
	transform: scale(1.2);
	/* ホバー時に1.2倍に拡大 */
	transition: 0.5s;
}

.business-box-content2 {
	display: flex;
	height: 56vh;
	margin-top: 6.4vh;
	padding-left: 1.6vw;
	padding-right: 1.6vw;
}

.business-box-content2:hover .business-box-content-img1 img {
	transform: scale(1.2);
	/* ホバー時に1.2倍に拡大 */
	transition: 0.5s;
}

.business-box-content-img11:hover .business-box-content-img111 img {
	transform: scale(1.2);
	/* ホバー時に1.2倍に拡大 */
	transition: 0.5s;
}

.business-box-content-img1 {
	width: 68%;
	overflow: hidden;
}

.business-box-content-img1 img {
	object-fit: cover;
	width: 140%;
	margin-top: -4vh;
	transition: 0.5s;
	margin-top: -58px;

}

.business-box-content-img11 {
	display: flex;
	width: 68%;
}

.business-box-content-img111 {
	width: 50%;
	overflow: hidden;
}

.business-box-content-img111 img {
	object-fit: cover;
	width: 100%;
	margin-top: 0vh;
	transition: 0.5s;
	margin-top: 0px;
	width: 304%;
	margin-left: -16vw;

}

.business-box-content-dis1 {
	width: 32%;
	background-color: white;
	padding: 1.6vw;
	font-size: 1.2vw;
	display: flex;
	justify-content: center;
	/* 横方向の中央配置 */
	align-items: center;
	/* 縦方向の中央配置 */
	color: #333333;
}




.business-content {
	width: 100%;
	padding-top: 16vh;
	display: flex;
	padding-bottom: 8vh;
}

.business-dis {
	width: 50%;
}

.business-dis01 {
	display: flex;
	padding-left: 20vw;
	padding-right: 4vw;
	padding-top: 4vh;
	color: #333333;
}

.business-dis1 {
	width: 14%;
	color: #333333;
}

.business-dis2 {
	padding-left: 1vw;
	width: 86%;
	color: #333333;
}

.business-dis02 {
	display: flex;
	padding-left: 20vw;
	padding-right: 4vw;
	padding-top: 6vh;
	color: #333333;
}

.business-img {
	width: 50%;
}

.business-img2 {
	width: 72%;
	height: 40vh;
}

.business-img2 img {
	width: 80%;
	height: 40vh;
}


.business-content2 {
	width: 100%;
	padding-top: 8vh;
	display: flex;
	padding-bottom: 16vh;
}

.business-img3 {
	width: 50%;
}

.business-img4 {
	width: 72%;
	height: 40vh;
	margin-left: auto;
	margin-right: -14%;
}

.business-img4 img {
	width: 80%;
	height: 40vh;
}

.business-dis22 {
	width: 50%;
}

.business-dis03 {
	display: flex;
	padding-left: 4vw;
	padding-right: 20vw;
	padding-top: 6vh;
	color: #333333;
}

.business-dis3 {
	width: 14%;
}

.business-dis4 {
	padding-left: 1vw;
	width: 86%;
}

.business-dis04 {
	display: flex;
	padding-left: 4vw;
	padding-right: 20vw;
	padding-top: 6vh;
	color: #333333;
}




/****************************************************
* business union
******************************************************/
.union {
	width: 100%;
	padding-top: 0vh;
	padding-bottom: 24vh;
	background-color: #F1F1F3;
}

.union-title {
	width: 100%;
	background-color: #1c2649;
	padding-top: 6.4vh;
	height: 24vh;
}

.union-title1 {
	text-align: center;
	font-size: 18px;
	color: white;
}

.union-title2 {
	text-align: center;
	font-size: 32px;
	letter-spacing: 1.6vw;
	color: white;
	margin-top: -0.8vh;
}

.union-box {
	width: 100%;
}

.union-box-title {
	text-align: center;
	font-size: 40px;
	padding-top: 10vh;
	padding-bottom: 8vh;
	color: #333333;
}

.union-content {
	width: 72%;
	margin: 0 auto;
	display: flex;
}

.union-left {
	width: 76%;
	margin: 0 auto;
}

.union-left-title {
	width: 88%;
	border-bottom: solid 0.5px gray;
	line-height: 6.4vh;
	font-size: 22px;
	margin: 0 auto;
	text-align: center;
	color: #333333;
}

.union-left-items {
	width: 88%;
	margin: 0 auto;
	padding-top: 3.2vh;
}

.union-left-item {
	display: flex;
	padding-top: 2.4vh;
}

.union-left-item1 {
	width: 12%;
	font-size: 16px;
	margin-left: 4%;
	color: #333333;
}

.union-left-item2 {
	width: 80%;
	font-size: 16px;
	color: #333333;
}

.union-right {
	width: 50%;
}

.union-box a {
	display: inline-block;
	margin-left: 72%;
	margin-top: 4%;
}

.union-btn {
	border: solid 0.32px gray;
	width: 12vw;
	height: 8vh;
	color: black;
	padding-top: 2vh;
	padding-left: 1.8vw;
	font-size: 16px;
	transition: 0.5s;
	color: #333333;
}

.union-btn:hover {
	background-color: #1c2649;
	color: white;
	transition: 0.5s;
}

.union-btn span::before {
	left: 4px;
	width: 12px;
	height: 12px;
	border-top: 1px solid black;
	border-right: 1px solid black;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.union-btn span:hover::before {
	border-top: 1px solid white;
	border-right: 1px solid white;
}


.recruit {
	width: 100%;
	background-color: white;
}

.recruit-title {
	font-size: 36px;
	letter-spacing: 0.8vw;
	;
	text-align: center;
	padding-top: 20vh;
	color: #333333;
}

.recruit-dis {
	text-align: center;
	font-size: 18px;
	padding-top: 4vh;
	padding-bottom: 28vh;
	color: #333333;
}


/***********************************************************************
* about
****************************************************************************/
.about {
	width: 100%;
	background-color: white;
}

.business-fv02 {
	width: 100%;
	height: 64vh;
	overflow: hidden;
}

.business-fv02 video {
	width: 100%;
	margin-top: -44vh;
}

.about-content {
	width: 72%;
	padding-top: 24vh;
	padding-bottom: 24vh;
	margin: 0 auto;
}

.about-title {
	border-bottom: 2px solid;
	/* ボーダーの高さ設定 */
	border-image: linear-gradient(to right, #237CD5 0%, #237CD5 24%, #535557 24%, #535557 100%);
	border-image-slice: 1;
	width: 100%;
	/* 全体の56%の長さ */
	margin: 0 auto;
	/* 中央寄せ */
	display: block;
	padding-bottom: 4px;
	/* ボーダーと文字の距離調整 */
}


.about-title1 {
	font-size: 2vw;
	color: #333333;

}

.about-title2 {
	font-size: 16px;
	margin-top: -0.8vh;
	display: none;
}

.about-box {
	width: 100%;
	margin-top: 8vh;
}

.about-items0 {
	border: solid 0.5px #A6A8AA;
	display: flex;
	letter-spacing: 3.2px;
}

.about-item1 {
	width: 32%;
	font-size: 0.96vw;
	padding-left: 1.6vw;
	padding-top: 2.4vh;
	padding-bottom: 2.4vh;
	border-right: solid 0.5px #A6A8AA;
	background-color: #DEE2E5;
	color: #333333;
}

.about-item2 {
	width: 68%;
	font-size: 0.96vw;
	padding: 2.4vh 0px 2.4vh 1.6vw;
	color: #333333;
}

.about-item2-pc {
	display: block;
	width: 68%;
	font-size: 0.96vw;
	padding: 2.4vh 0px 2.4vh 1.6vw;
	color: #333333;
}

.about-item2-sp {
	display: none;
	width: 100%;
	font-size: 15px;
	padding: 4.8vh 0px 4.8vh 0px;
}

.about-items {
	border-left: solid 0.5px #A6A8AA;
	border-right: solid 0.5px #A6A8AA;
	border-bottom: solid 0.5px #A6A8AA;
	display: flex;
	letter-spacing: 3.2px;
}

.about-item3 {
	width: 68%;
	font-size: 1vw;
	padding: 2.4vh 0px 2.4vh 1.6vw;
	color: #333333;
}

.about-content0 {
	background-color: white;
	width: 100%;
	margin-top: -16vh;
}


/*********************************************
* about message
***********************************************/

.message {
	width: 100%;
	padding-top: 16vh;
	padding-bottom: 24vh;
	background-image: url(img/124.jpg);
	height: 128vh;
	background-size: cover;
}

.message-content {
	width: 56%;
	padding-top: 8vh;
	display: block;
	border-top: none;
	margin: 0 auto;
	position: relative;
	z-index: 115;
}

.message-title {
	width: 100%;
	border-bottom: solid 0.5px gray;
	padding-bottom: 4vh;
	padding-left: 2%;
}

.message-title1 {
	font-size: 16px;
	color: white;
}

.message-title2 {
	font-size: 22px;
	color: white;
}

.message-dis {
	width: 96%;
	font-size: 18px;
	line-height: 6.4vh;
	padding-top: 8%;
	margin: 0 auto;
	color: white;

}

.message-date-box {
	width: 240px;
	margin-left: auto;
	margin-right: 0px;
}

.message-date {
	font-size: 18px;
	text-align: right;
	color: white;
	padding-top: 8vh;
}

.message-img {
	width: 160px;
	margin-left: auto;
	margin-right: 0px;
	padding-top: 1.6vh;
}

.message-black {
	background-color: rgb(0, 0, 0, 0.24);
	margin-top: -128vh;
	position: relative;
	z-index: 110;
	width: 100%;
	height: 128vh;
	display: block;
}

/*********************************************
* about map
***********************************************/

.about-map-top {
	width: 100%;
}

.about-map {
	width: 72%;
	margin: 0 auto;
	padding-top: 16vh;
	padding-bottom: 24vh;
}

.about-map iframe {
	padding-top: 4vh;
}

.about-iframe {
	width: 100%;
}




/********************************************************************
* contact
***********************************************************************/
.contact2 {
	width: 100%;
}

.business-fv022 {
	width: 100%;
	height: 64vh;
	overflow: hidden;
}

.business-fv022 video {
	width: 100%;
	margin-top: -36vh;
}


.contact2-content {
	width: 100%;
	background-color: #D2D2D2;
	padding-bottom: 24vh;
}

.contact2-dis {
	text-align: center;
	font-size: 18px;
	padding-top: 16vh;
	padding-bottom: 4vh;
}

.contact2-form {
	width: 32%;
	margin: 0 auto;
	margin-top: 8vh;
}

.contact2-form p {
	margin-top: 5.6vh;
	width: 100%;
	font-size: 18px;
	font-family: "ヒラギノ角ゴ Pro W3",
		"Hiragino Kaku Gothic Pro",
		"メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.wpcf7-text {
	width: 100%;
	border: none;
	background-color: #F1F1F1;
	height: 5.6vh;
	margin-top: 0.8vh;
}

.contact2-form textarea {
	width: 100%;
	border: none;
	background-color: #F1F1F1;
	height: 40vh;
	margin-top: 0.8vh;
	font-family: "ヒラギノ角ゴ Pro W3",
		"Hiragino Kaku Gothic Pro",
		"メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.wpcf7-submit {
	display: inline-block;
	background-color: #1c2649;
	color: white;
	height: 10.4vh;
	width: 100%;
	margin: 0 auto;
	font-family: "ヒラギノ角ゴ Pro W3",
		"Hiragino Kaku Gothic Pro",
		"メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	font-size: 18px;
	transition: 0.5s;
	cursor: pointer;
}

.wpcf7-submit:hover {
	background-color: rgb(88, 28, 230);
	border: none;
	transition: 0.5s;
}

.contact2-submit {
	width: 36%;
	margin: 0 auto;
	margin-top: 8vh;
	transition: 0.5s;
}

.contact2-submit input {
	font-family: "ヒラギノ角ゴ Pro W3",
		"Hiragino Kaku Gothic Pro",
		"メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	letter-spacing: 0.8vw;
	border-radius: 2.4vw;
	padding-left: 1.3vw;
	transition: 0.5s;
	border: none;
}

.contact2-submit input:hover {
	cursor: pointer;
	opacity: 0.7;
	transition: 0.5s;
}