/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;700');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,500;1,700');
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");


/*全体の設定
---------------------------------------------------------------------------*/
html,
body {
	margin: 0;
	padding: 0;
	font-size: 15px;
	overflow-x: hidden;

}

body {
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-text-size-adjust: none;
	letter-spacing: 0.02em;
	background: #eff6fa;
	color: #000;
	line-height: 1.8;
}



div {
	box-sizing: border-box;
}

.mgt40 {
	margin-top: 40px;
}

.mgt20 {
	margin-top: 20px;
}

/*リセット*/
figure {
	margin: 0;
}

dd {
	margin: 0;
}

nav {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
}

img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

video {
	max-width: 100%;
}

iframe {
	width: 100%;
}

ul,
ol {
	margin: 0px;
	padding: 0px;
}

a {
	color: #79b1c3;
	transition: 0.3s;
}

a:hover {
	color: #4b99b4;
}

/*2カラム*/
.c2 {
	display: flex;
	flex-direction: column;
}


.c2 h1 {
	font-size: 2em;
}


.c2 .image {
	order: -1;
}


/*ヘッダー*/
header {
	display: flex;
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
	background: #79b1c3;
	position: fixed;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	padding: 0 20px;
	height: 60px;
}

header a {
	color: #fff;
}

header #logo img {
	display: block;
	height: 24px;
}

header h1 #logo {
	width: auto;
	margin: 0;
}

/*フッター*/

.wrapper {
	height: 100vh;
	position: relative;
	z-index: 0;
}

footer {
	z-index: 1;
	width: 100%;
	font-size: 0.7rem;
	text-align: center;
	padding: 20px;
	background: #79b1c3;
	color: #fff;
}

footer a {
	text-decoration: none;
	color: #fff;
}



/*トップページ*/
#mainimg {
	width: 100%;
	height: 100vh;
	padding: 0 0 20px 0;
	margin: 0;
	position: relative;
	top: 50px;
	overflow: hidden;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-image: url(../images/main.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

#mainimg .top-text {
	padding: 20px;
	color: #000;
	font-weight: 700;
	font-size: 32px;
	z-index: 1;
	text-shadow: 0px 0px 7px #fff;
}

#mainimg .top-text-sec {
	padding: 20px;
	color: #000;
	font-weight: 700;
	font-size: 20px;
	z-index: 1;
	text-shadow: 0px 0px 5px #fff;
}


.top-text-in1 {
	width: 40%;
}

.top-text-in2 {
	width: 60%;
}

/*top　ボタン　*/

.this-box {
	/*線の基点とするためrelativeを指定*/
	width: 100%;
	display: flex;
	justify-content: center;

	padding-top: 20px;
}




.this-box a {
	width: 60%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	/*ボタンの形状*/
	background-color: #071A52;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	border: 1px solid #071A52;
	color: #fff;
	text-decoration: none;
	outline: none;
	/*アニメーションの指定*/
	transition: all 0.3s ease-in-out;
	padding: 20px 10px 20px 30px;

	&:hover {
		background-color: #fff;
		color: #071A52 !important;
		border-color: transparent;
	}
}

.this-box a .material-symbols-outlined {
	vertical-align: middle;
	margin: 0 0 0 5px;
}

/*線の設定*/
.this-box a::before,
.this-box a::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	border: solid #071A52;
	width: 15px;
	height: 15px;
	/*アニメーションの指定*/
	transition: all 0.3s ease-in-out;
}

/*線の位置と形状*/
.this-box a::before {
	top: -6px;
	left: -6px;
	border-width: 1px 0 0 1px;
}

/*線の位置と形状*/
.this-box a::after {
	bottom: -6px;
	right: -6px;
	border-width: 0 1px 1px 0;
}

/*hoverした際の線の形状*/
.this-box a:hover::before,
.this-box a:hover::after {
	width: calc(100% + 11px);
	height: calc(100% + 11px);
	border-color: #071A52;
}


.this-button {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 2vh;
	padding: 0 3%;
}

.b-col1 {

	background-image: linear-gradient(60deg, #79d4d0 0%, #39c3bc 100%);
}

.b-col2 {
	background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.this-box2-outer {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0 25% 40px 25%;
}

article {
	overflow: hidden;
}

/*ループ文字　*/
.loop-out {
	overflow: hidden;
}

.main-catch {
	padding: 20px;
	font-size: 160px;
	line-height: 160px;
	color: #79b1c3;
	font-weight: 700;
	font-family: 'Roboto', sans-serif;
	mix-blend-mode: multiply;
}

.sub-catch {
	text-align: center;
	padding: 0px 20px 28px 20px;
	font-size: 40px;
	line-height: 52px;
	color: #79b1c3;
	font-weight: 700;
	mix-blend-mode: multiply;
}

.top-sub-cat {
	padding: 0px 0 20px 0;
	font-size: 28px;
	line-height: 38px;
	color: #79b1c3;
	font-weight: 700;
}

/*topナビ*/
#menubar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}


#menubar {
	display: none;
}

#menubar.db {
	display: block;
}

#menubar.dn {
	display: none;
}


#menubar a {
	display: block;
	text-decoration: none;
	text-align: center;
	letter-spacing: 0.05em;
	padding: 10px;
	font-weight: 400;
	transition: .3s ease-in-out;

	&:hover {
		color: #071A52;
	}
}



.menubg #menubar.db {
	position: fixed;
	overflow: auto;
	z-index: 100;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	padding: 70px 20px;
	background: rgba(121, 177, 195, 0.84);
	animation: animation1 0.2s both;
	text-align: center;
	color: #fff;
}

.menubg #menubar.db a {
	display: block;
	color: #fff;
	font-size: 28px;
}


/*ハンバーガー*/
#hmb-menu.db {
	display: flex;
}

#hmb-menu.dn {
	display: none;
}

#hmb-menu {
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: 8px;
	top: 8px;
	padding: 16px 12px;
	width: 44px;
	height: 44px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: #fff;
	border-radius: 50%;
}

#hmb-menu span {
	display: block;
	transition: 0.3s;
	border-top: 2px solid #79b1c3;
}

#hmb-menu.ham span:nth-of-type(1),
#hmb-menu.ham span:nth-of-type(3) {
	transform-origin: center center;
	width: 20px;
}

#hmb-menu.ham span:nth-of-type(1) {
	transform: rotate(45deg) translate(3.8px, 3px);
}

#hmb-menu.ham span:nth-of-type(3) {
	transform: rotate(-45deg) translate(3.8px, -3px);
}

#hmb-menu.ham span:nth-of-type(2) {
	display: none;
}










/*btnの設定
---------------------------------------------------------------------------*/
a.btn1,
a.btn2 {
	display: inline-block;
	text-decoration: none;
	letter-spacing: 0.1em;
	border-radius: 3px;
	padding: 5px 30px;
	font-size: 1.2em;
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
}

a.btn1 {
	background: #e27b2c;
	color: #fff;
}

a.btn2 {
	background: #4f6e80;
	color: #fff;
}

.radius {
	border-radius: 100px !important;
}

a.btn1 i,
a.btn2 i {
	margin-left: 20px;
}

a:hover.btn1,
a:hover.btn2 {
	transform: scale(1.03);
	filter: brightness(1.1);
}


/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;
	/*太字に*/
	padding: 10px 5px;
	/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #eee;
	margin-bottom: 15px;
	/*下に空けるスペース*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	border-top: 1px solid #ccc;
	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 30px;
	/*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #ccc;
	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th,
.ta1 td {
	padding: 10px 5px;
	/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;
	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;
	/*幅*/
	text-align: left;
	/*左よせにする*/
}




/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.color-theme,
.color-theme a {
	color: #4f6e80 !important;
}

.color-check,
.color-check a {
	color: #f00 !important;
}

.c {
	text-align: center !important;
}

.ws {
	width: 95%;
	display: block;
}

.wl {
	width: 95%;
	display: block;
}

.mb30 {
	margin-bottom: 30px !important;
}

.mt30 {
	margin-top: 30px !important;
}

.look {
	display: inline-block;
	padding: 0px 10px;
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin: 2px 0;
	word-break: break-all;
}

.small {
	font-size: 0.6em;
	letter-spacing: normal !important;
}

.large {
	font-size: 1.8em !important;
}

.block {
	display: block !important;
}

.sh {
	display: block;
}

.pc {
	display: none;
}

.hidden {
	position: absolute;
	top: -9999px;
	left: -9999px;
}



.highlighter {
	background: linear-gradient(transparent 60%, #a7ff83 60% 90%, transparent 90%);
	line-height: inherit;
}


/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {

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




	/*トップページ*/

	#mainimg #top-text {
		width: 100%;
	}

	#menubar {
		font-family: 'Roboto', sans-serif !important;
		font-size: 18px;
		font-weight: 700;
	}

	#menubar ul {
		display: flex;
	}

	#menubar a {
		padding: 10px 15px;
	}


	/*ハンバーガー*/
	#hmb-menu {
		display: none;
	}






	/*その他*/
	.ws {
		width: 48%;
		display: inline;
	}

	.sh {
		display: none;
	}

	.pc {
		display: inline-block;
	}

}

@media screen and (max-width:899px) {
	#mainimg {
		padding-bottom: 0px;
		background-position: 35% 100%;
	}

	#mainimg #top-text {
		width: 100%;
		flex-direction: column;
		margin: 0 20px 20px 20px;
		font-size: 20px;
		line-height: 2;
	}


	.this-box {
		width: 100%;
		padding: 10px;
		font-size: 4.2vw;
		line-height: 6.6vw;
		padding: 10px 10px;
	}

	.this-box a {
		width: 100%;
		font-size: 16px;
	}
}

/*animation1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {
		left: -200px;
	}

	100% {
		left: 0px;
	}
}


/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}


/*up,down,left,right,transform1,transform2の共通設定
（待機中の設定）
---------------------------------------------------------------------------*/
.up,
.down,
.left,
.right,
.transform1,
.transform2 {
	position: relative;
	opacity: 0;
	/*透明度（透明の状態）*/
}


/*up,down,left,right,transform1,transform2の共通設定
（要素が見えたら実行するアクションの設定）
---------------------------------------------------------------------------*/
.upstyle,
.downstyle,
.leftstyle,
.rightstyle,
.transform1style,
.transform2style {
	opacity: 1;
	/*透明度（色が100%出た状態）*/
	transition: 1s 0.5s;
	/*1sはアニメーションの実行時間1.5秒。0.5sは0.5秒遅れてスタートする指定。*/
}


/*upスタイル。下から上にフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.up {
	bottom: -20px;
	/*基準値の下20pxの場所からスタート*/
}

/*要素が見えたら実行するアクション*/
.upstyle {
	bottom: 0px;
	/*基準値まで戻す*/
}


/*downスタイル。上から下にフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.down {
	top: -20px;
	/*基準値の上20pxの場所からスタート*/
}

/*要素が見えたら実行するアクション*/
.downstyle {
	top: 0px;
	/*基準値まで戻す*/
}


/*leftスタイル。左からフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.left {
	left: -20px;
	/*基準値より左に100pxの場所からスタート*/
}

/*要素が見えたら実行するアクション*/
.leftstyle {
	left: 0px;
	/*基準値まで戻す*/
}


/*rightスタイル。右からフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.right {
	right: -20px;
	/*基準値より右に100pxの場所からスタート*/
}

/*要素が見えたら実行するアクション*/
.rightstyle {
	right: 0px;
	/*基準値まで戻す*/
}


/*transform1スタイル。その場で回転するスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.transform1 {
	transform: scaleX(0);
	/*幅を0%でスタート*/
}

/*要素が見えたら実行するアクション*/
.transform1style {
	transform: scaleX(1);
	/*幅を100%に戻す*/
}


/*transform2スタイル。倒れた状態から起き上がるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.transform2 {
	transform: perspective(400px) translateZ(-70px) rotateX(50deg);
}

/*要素が見えたら実行するアクション*/
.transform2style {
	transform: perspective(400px) translateZ(0px) rotateX(0deg);
}


/*blurスタイル。ぼかしで出現するスタイル。
---------------------------------------------------------------------------*/
/*待機中の設定*/
.blur {
	opacity: 0;
	/*透明度（透明の状態）*/
	filter: blur(30px);
	transform: scale(1.1);
}

/*要素が見えたら実行するアクション*/
.blurstyle {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
	transition: 2s 0.1s;
}

.blur2 {
	opacity: 0;
	/*透明度（透明の状態）*/
	filter: blur(30px);
	transform: scale(1.1);
}

/*要素が見えたら実行するアクション*/
.blurstyle2 {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
	transition: 0.6s 0.2s;
}

.forsp {
	display: none;
}

.txt-bold {
	font-weight: 700;
	font-size: 110% !important;
}

.txt-small {
	font-size: 90% !important;
}


/*transform3スタイル。小さなサイズから原寸大になるスタイル
---------------------------------------------------------------------------*/
/*キーフレーム（アニメーション）設定*/
@keyframes transform3 {
	0% {
		transform: scale(0);
	}

	50% {
		transform: scale(1.05);
	}

	70% {
		transform: scale(0.99);
	}

	100% {
		transform: scale(1);
	}
}

/*待機中の設定*/
.transform3 {
	transform: scale(0);
}

/*要素が見えたら実行するアクション*/
.transform3style {
	animation: transform3 0.8s ease-out 0.5s both;
}


/*クラッカーアニメーション
---------------------------------------------------------------------------*/
/*画像への指定。共通。*/
.crackerstyle img {
	width: 150px;
	/*各クラッカーの幅*/
	position: absolute;
	bottom: 0px;
}

/*左側（１つ目のimgタグ）の画像への追加指定*/
.crackerstyle img:nth-of-type(1) {
	left: 0px;
}

/*右側（２つ目のimgタグ）の画像への追加指定*/
.crackerstyle img:nth-of-type(2) {
	right: 0px;
	transform: scale(-1, 1);
	/*画像を左右逆向きにする*/
}





/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {


	/*クラッカーアニメーション
---------------------------------------------------------------------------*/
	/*画像への指定。共通。*/
	.crackerstyle img {
		width: 200px;
		/*各クラッカーの幅*/
	}


	/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}





/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {


	/*クラッカーアニメーション
---------------------------------------------------------------------------*/
	/*画像への指定。共通。*/
	.crackerstyle img {
		width: 300px;
		/*各クラッカーの幅*/
	}
}



.each-section {
	background: rgba(0, 0, 0, 0);
	position: relative;
	z-index: 1;
	padding: 20px 0 0 0;
}

.each-section-each {
	padding: 60px 0 0 0 !important;
}



.subpage-img {
	position: relative;
	width: 100%;
	padding: 80px 0 10px 0 !important;
	background-size: cover;
	background-position: center;
}

.subpage-img .color-top {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(7, 26, 82, 0.5);
}

.each-section h2 {
	position: relative;
	z-index: 2;
	padding: 20px 20px 40px 20px;
	font-size: 16px;
	line-height: 16px;
	color: #fff;
	text-align: center;
	box-sizing: border-box;
}

.each-section h2 span {
	position: absolute;
	width: 100%;
	display: inline-block;
	transform-origin: center;
	top: -50px;
	left: 0;
	font-family: 'Roboto', sans-serif !important;
	margin: 0;
	font-weight: 100;
	font-size: 64px;
	line-height: 64px;
	color: #fff;
	text-align: center;
}

.each-section h2.fortop {
	position: relative;
	width: 100%;
	z-index: 2;
	padding: 20px 20px 20px 20px;
	font-size: 16px;
	line-height: 16px;
	color: #79b1c3;
	text-align: center;
}



.each-section h2.fortop span {
	position: absolute;
	width: 100%;
	display: inline-block;
	transform-origin: center;
	top: -50px;
	left: 0;
	font-family: 'Roboto', sans-serif !important;
	margin: 0;
	font-weight: 100;
	font-size: 64px;
	line-height: 64px;
	color: #79b1c3;
	text-align: center;
}

.content-outer {
	width: 100%;
	display: flex;
	margin: 0;
	position: relative;
	z-index: 1;
}

.content-outer-each {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 40px 0 0 0;
	z-index: 1;
}

.content-inner {
	width: 50%;
	margin: 0;
	padding: 20px 30px;
	z-index: 1;
	font-weight: 700;
	font-size: 16px;
	line-height: 30px;
	color: #000;
}

.content-inner-img {
	width: 50%;
}

.content-inner-img img {
	width: 100%;

}

.content-inner-img-pad1 {
	padding: 20px 0 0 0px;
	margin-top: 80px;
}

.content-inner-img-pad2 {
	padding: 20px 0 0 0px;
	margin-top: 140px;
}

.content-inner-img-pad3 {
	padding: 0px 0 0 0px;
	margin-top: 180px;
}

.content-inner-img-pad4 {
	padding: 20px 0 0 0px;
	margin-top: 180px;
}

.content-outer-each-2 {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 100px 0 0 0;
	z-index: 1;
	background-color: rgba(121, 177, 195, 0.1);
}

.content-outer-each-2 h3 {
	position: relative;
	z-index: 2;
	padding: 20px 20px 10px 20px;
	font-size: 16px;
	line-height: 16px;
	color: #79b1c3;
	text-align: center;
	width: 100%;
}

.content-outer-each-2 h3 span {
	position: absolute;
	width: 100%;
	display: inline-block;
	transform-origin: center;
	bottom: 33px;
	left: 0;
	font-family: 'Roboto', sans-serif !important;
	margin: 0;
	font-weight: 100;
	font-size: 58px;
	line-height: 58px;
	color: #79b1c3;
	text-align: center;
}

.content-outer-each-2-in1 {
	width: 10%;
}

.content-outer-each-2-in1 img {
	width: 100%;
}

.content-outer-each-2-in2 {
	width: 80%;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	line-height: 24px;
}

#about {
	margin-top: 120px
}

#work {
	margin-top: 40px
}

#people {
	margin-top: 0px
}

#info {
	margin-top: 0px
}

#each {
	margin-top: 0px
}

.mbg-fix {
	margin-bottom: 40px;
}

.content-outer-in-each1 {
	width: 40%;
	display: flex;
	padding: 0;
}

.content-outer-in-each2 {
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 40px;
	background-color: #fff;
}

.content-outer-in-each2-mida {
	font-size: 26px;
	padding: 0 0 20px 0;
}

.each-content-outer {
	width: 100%;
	margin: 20px 0 40px 0;
	padding: 0 0 20px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.each-content-inner {
	width: 900px;

}

.content-outer-in-each2 {
	padding: 0 20px;
}

.each-content-outer h3 {
	display: inline-block;
	box-sizing: border-box;
	width: 900px;
	padding: 20px 0;
	margin: 0;
	font-size: 22px;

	color: #79b1c3;
	text-align: center;
}

.people-message-outer {
	width: 100%;
	padding: 0 20px;
}

.people-message {
	width: 100%;
	position: relative;
	padding: 20px;
	text-align: left;
	border: 1px solid #79b1c3;
	border-radius: 0 10px 10px 10px;
	background-color: #fff;
}

.people-message .tag {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 28px !important;
	position: absolute;
	top: -28px;
	left: -1px;
	height: 28px !important;
	padding: 0px 12px;
	color: #fff;
	border-radius: 10px 10px 0 0;
	background: #79b1c3;
	z-index: -1;
}

.people-message .tag .material-symbols-outlined {
	font-size: 26px;
	line-height: 20px !important;
	vertical-align: middle;
	margin: 0 3px 0 0;
}


.each-content-outer-txt {
	width: 100%;
	margin: 20px 0;
	display: flex;
	justify-content: center;
}

.each-content-outer-txt-in1 {
	width: 60%;
	padding: 20px 20px 40px 20px;
}

.each-content-outer-txt-in2 {
	width: 40%;
	padding: 20px;
}

.each-content-outer-txt-in2 img {
	width: 100%;
	height: auto;
}

.each-content-outer-txt-in3 {
	width: 100%;
	padding: 20px 20px 40px 20px;
}

.each-content-inner-com {
	text-align: center;
}



.aboutus-top-outer {
	display: flex;
	flex-wrap: nowrap;
}

.aboutus-top-inner1 {
	width: 75%;
	padding: 0 12px 0 0;

}

.aboutus-top-inner2 {
	width: 25%;

}

.aboutus-top-inner2 img {
	width: 100%;

}

.icon-content-outer-out {
	width: 100%;
	margin: 40px 0 0px 0;
	padding: 0 0 20px 0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

.icon-content-outer {
	width: 49%;
	margin: 40px 0 0px 0;
	padding: 0 0 0 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.icon-content-outer-inner {
	width: 100%;
	display: flex;
	flex-direction: row;
}

.icon-content-outer-in1 {
	width: 20%;

}

.icon-content-outer-in1 img {
	width: 100%;

}

.icon-content-outer-in2 {
	width: 80%;
	padding: 0 0 0 8px;
}

.icon-content-outer-in2-tit {
	font-weight: 700;
	margin-bottom: 12px;
	background-color: rgba(255, 255, 255, 1);
	padding: 4px 12px;
	border-left: #79b1c3 solid 10px;
}


.icon-content-outer-in2 ul {
	list-style: none;
}

.icon-content-outer-in2 li {
	padding: 0 !important;
	font-weight: 400;
	text-indent: -15px !important;
	padding-left: 15px !important;
}

.icon-content-outer-in2 li:before {
	font-family: 'Material Icons';
	content: 'arrow_forward';
	color: #79b1c3;
	padding-right: 5px;
	font-size: 18px;
}

/*スクロールダウン全体の場所*/
.scrolldown-outer {
	width: 100%;
	display: flex;
	justify-content: center;
	z-index: 3;
	padding: 30px 25px 30px 0;
}

.scrolldown1 {
	position: relative;
	height: 50px;
	margin: 0 0 0 40px;
}

.scrolldown1::before {
	content: "";
	position: absolute;
	top: -22px;
	left: -40px;
	height: 80px;
	width: 80px;
	border-radius: 50%;
	border: #79b1c3 1px solid;
	background-color: #eff6fa;
}

.scrolldown1 span {
	position: absolute;
	left: -15px;
	top: -15px;
	color: #79b1c3;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}


.about-c1-outer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	position: relative;
	z-index: 1;
	padding: 20px 0;
}

.about-c1-inner {
	width: 250px;
	height: 250px;
	margin: 20px;
	text-align: center;
	background-color: #fff;
	border: 1px solid #79b1c3;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 38px;
	font-weight: 700;
}

.about-c1-inner-2 {
	font-size: 18px;
	line-height: 32px;
	font-weight: 700;
	position: relative;
	padding-top: 20px;
}

.about-c1-inner-2 .material-symbols-outlined {
	position: absolute;
	color: #79b1c3;
	top: 20px;
	left: 103px;
	font-size: 52px;
	line-height: 32px;
	font-weight: 700;
}

.about-c1-inner .about-l {
	color: #79b1c3;
	font-size: 14px;
	line-height: 14px;
	font-weight: 400;
}

.about-c1-inner .about-l-font {
	font-size: 42px;
	line-height: 48px;
	font-weight: 200;
	font-family: 'Roboto', sans-serif;
}

.about-c1-inner img {
	width: 100%;
}

/* 線の描写 */
.scrolldown1::after {
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 30px;
	background: #79b1c3;
	animation: pathmove 1.4s ease-in-out infinite;
	opacity: 0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
	0% {
		height: 0;
		top: 0;
		opacity: 0;
	}

	30% {
		height: 30px;
		opacity: 1;
	}

	100% {
		height: 0;
		top: 50px;
		opacity: 0;
	}
}

/* 人物 */
.work-ppl-outer {

	margin: 60px 20px 0px 20px;
	background: rgba(166, 28, 69, 0.1);
	border-radius: 30px;

}

.work-ppl-tit {
	width: 100%;
	padding: 5% 0 0 0;
	font-size: 20px;
	line-height: 20px;
	color: #79b1c3;
	text-align: center;
}

.work-ppl-tit h2 {
	position: relative;
	z-index: 1;
	padding: 20px 20px 0% 20px;
	font-size: 14px;
	line-height: 28px;
	color: #79b1c3;
	text-align: center;
	margin: 0;
}

.work-ppl-tit h2 span {
	position: absolute;
	width: 100%;
	display: inline-block;
	transform-origin: center;
	top: -30px;
	left: 0;
	font-family: 'Roboto', sans-serif !important;
	margin: 0;
	font-weight: 100;
	font-size: 46px;
	line-height: 50px;
	color: #79b1c3;
	text-align: center;
}

.work-ppl-tit h2::after {
	content: '' !important;
}

.work-ppl-box {
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding: 20px 20px;

}

.work-ppl-inner {
	width: 50%;
	padding: 0 20px !important;
	text-align: center;
}

.work-ppl-inner:last-child {

	border-right: none;
}

.work-ppl-pic {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	overflow: hidden;

}

.work-ppl-pic img {
	object-fit: cover;
}

.work-ppl-txt {
	width: 100%;
	text-align: left;
	margin-top: 10px;
	display: flex;
	flex-direction: column;
}

.work-ppl-txt-in1 {
	font-weight: 100;
	font-size: 10px;
	line-height: 10px;

}

.work-ppl-txt-in2 {
	font-weight: 100;
	font-size: 28px;
	line-height: 28px;
	padding-top: 7px;
}

.work-ppl-txt-in2 span {
	font-weight: 100;
	font-size: 10px;
	line-height: 10px;

}

.work-ppl-txt-in2-each {
	display: flex;
	flex-direction: column;
	font-size: 32px;
	line-height: 32px;
}

.work-ppl-txt-in2-each span {
	font-size: 12px;
	line-height: 28px;

}

table.com-tbl {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 10px;
	margin-bottom: 20px;
}

table.com-tbl th {
	background-color: #79b1c3;
	color: #fff;
	width: 150px;
	text-align: center;
	padding: 8px 0;
}


table.com-tbl td {

	padding: 8px 8px;
	text-align: left;
}

.com-map {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 20px 0;
}

.com-map img {
	width: 30%;

}

.icon-com-num {
	width: 32%;
	margin-bottom: 60px;
}

.icon-com-num-in1 {
	width: 100%;
	font-weight: 700;
	margin-bottom: 0px;
	background-color: rgba(255, 255, 255, 0.7);
	padding: 4px 12px;
	border-left: #79b1c3 solid 10px;
}

.icon-com-num-in2 {
	width: 100%;
	padding: 8px;

}

.icon-com-num-in2 img {
	width: 50%;
}

.icon-com-num-in3 {

	font-weight: 700;
}

.icon-com-num-in3 span {
	font-size: 48px;
	line-height: 48px;
}

.icon-com-num-in4 {
	font-size: 70%;
	font-weight: 400;
	padding: 12px 0 0 0;
}

.prd-tbl {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
}

.prd-tbl-in {
	width: 49%;
	display: flex;
	flex-direction: column;
	text-align: left;
	background-color: #fff;
}

.prd-tbl-in a {
	width: 100%;
	display: inline-block;
}

.prd-tbl-in a img {
	width: 100%;
	display: inline-block;
}

.prd-tbl-in-txt {
	width: 100%;
	padding: 12px;
}

.prd-sub {
	width: 100%;
	margin: 20px 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.prd-sub a {
	width: 24%;
}

.prd-sub a a {
	width: 100%;
	height: auto;
}

.our-pos {
	width: 100%;
	text-align: left;
	margin-top: 10px;
	display: flex;
	flex-direction: row;
}

.our-pos-in1 {
	width: 200px;
}

.our-pos-in1 img {
	width: 100%;
}

.our-pos-in2 {
	width: calc(100% - 200px);
	padding: 0 0 0 20px;
}

.qa-com {
	text-align: left;
}

.qa-com dt {
	position: relative;
	margin: 0 0 12px 0;
	padding: 0 0 0 44px;
	font-weight: 700;
}


.qa-com dt::before {
	content: "Q.";
	color: #071A52;
	position: absolute;
	top: 0px;
	left: 4px;
	font-size: 24px;
	line-height: 24px;
}

.qa-com dd {
	position: relative;
	margin: 0 0 40px 0;
	padding: 12px 12px 12px 44px;
	background-color: #fff;
	color: #333333;

}

.qa-com dd::before {
	position: absolute;
	content: "A.";
	top: 12px;
	left: 12px;
	color: #79b1c3;
	font-size: 24px;
	line-height: 24px;
}

/*Q and A 展開*/
.toggle {
	display: none;
}

.Label {
	/*タイトル*/
	display: block;
	text-align: left;
	background: #fff;
	font-weight: 700;
	margin: 0 0 12px 0;
	padding: 8px 0 8px 44px;
}

.Label::before {
	/*タイトル横の矢印*/
	content: "";
	width: 6px;
	height: 6px;
	border-top: 2px solid #071A52;
	border-right: 2px solid #071A52;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top: calc(50% - 3px);
	right: 20px;
	transform: rotate(135deg);
}

.Label::after {
	content: "Q.";
	color: #071A52;
	position: absolute;
	top: 6px;
	left: 8px;
	font-size: 24px;
	line-height: 24px;
}

.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
	position: relative;
}

.content {
	/*本文*/
	text-align: left;
	height: 0;
	padding: 0px 12px 0px 44px;
	overflow: hidden;


}

.content p {
	margin: 0;
}

.content::before {
	position: absolute;
	content: "A.";
	top: 0px;
	left: 12px;
	color: #79b1c3;
	font-size: 24px;
	line-height: 24px;
	height: 0;
	overflow: hidden;
}

.toggle:checked+.Label+.content {
	/*開閉時*/
	height: auto;
	transition: all .3s;
	margin: 0 0 40px 0;
	padding: 12px 12px 12px 44px;
}

.toggle:checked+.Label+.content::before {
	/*開閉時*/
	height: auto;
	transition: all .3s;
	top: 12px;

}

.toggle:checked+.Label::before {
	transform: rotate(-45deg) !important;
}

/*timeline*/
.timeline-outer {
	width: 100%;
	border: 1px solid #79b1c3;
	padding: 0 20px;
	margin: 40px 0;
}


.timeline {
	list-style: none;
}

.timeline>li {
	margin-bottom: 50px;
}

.timeline>li {
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	margin: 0;
	position: relative;
	justify-content: flex-start;
}

.timeline-date {
	width: 110px;
	margin-top: 0px;
	flex-shrink: 0;
}

.timeline-date img {
	width: 70%;

}

.timeline-content {
	flex-shrink: 2;
	width: ;
	border-left: 3px #d8e9ef solid;
	padding-left: 10px;
	padding-top: 20px;
	padding-bottom: 12px;
	text-align: left;
}

.timeline-content span {
	color: #79b1c3;
	font-size: 20px;
}

.timeline-content h4 {
	color: #000;
	font-size: 17px;
	line-height: 24px;
	margin: 0px 0;
}

.timeline-content p {
	margin: 8px 0;
}

.timeline-content:before {
	content: '';
	width: 12px;
	height: 12px;
	background: #79b1c3;
	position: absolute;
	left: 106px;
	top: 32px;
	border-radius: 100%;
}

/*ppl*/
.ppl-outer {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	margin: 40px 0;
}

.ppl-inner1 {
	width: 15%;
	padding: 0 20px 0 0;
}

.ppl-inner2 {
	width: 85%;
	position: relative;
	display: inline-block;
	margin: 0 0px;
	padding: 16px 20px;
	text-align: left;
	font-size: 16px;
	background: #fff;
	border-radius: 15px;
}

.ppl-inner2:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	margin-top: -17px;
	border: 15px solid transparent;

	border-right: 15px solid #fff;
}



@media screen and (max-width:899px) {

	.main-catch {
		font-size: 88px;
		line-height: 88px;
	}

	.sub-catch {
		font-size: 26px;
		line-height: 38px;
	}

	.top-sub-cat {
		font-size: 24px;
		line-height: 34px;
	}

	#mainimg .top-text {
		font-size: 24px;
		line-height: 36px;
	}

	#mainimg .top-text-sec {
		font-size: 16px;
		line-height: 28px;
	}

	#about {
		margin-top: 120px
	}

	#business {
		margin-top: 60px
	}

	#voice {
		margin-top: 40px
	}

	#recruitingdata {
		margin-top: 80px
	}


	.scrolldown1 {
		margin: 10px 0 0 40px;
	}



	.content-outer {
		flex-direction: column;
		margin-bottom: 0px;
	}



	.content-inner {
		width: 100%;
		margin: 0 auto;
		padding: 30px 20px 20px 20px;
		z-index: 1;
		font-weight: 700;
		font-size: 14px;
		line-height: 30px;
		order: 2;
	}

	.each-content-outer-txt-in2 {
		padding: 20px 20px 20px 0;
	}

	.work-ppl-tit h2 {
		padding: 10px 10px 0 10px;
		font-size: 14px;
		line-height: 28px;
		margin: 30px 0 0 0;
	}

	.each-section h2 span {
		top: -30px;
		font-size: 42px;
		line-height: 42px;
	}

	.each-section h2::after {
		left: calc(50% - 25px);
		font-weight: 100;
		font-size: 170px;
		line-height: 20px;
	}

	.each-section-each {
		padding: 60px 0 0 0 !important;
	}

	.content-outer-in-each2-mida {
		font-size: 22px;
		padding: 0 0 10px 0;
	}

	.content-inner-img {
		width: 100%;
	}

	.each-content-inner {
		width: 100%;
		padding: 0 20px
	}

	.content-inner-img-pad1 {
		padding: 20px 20px 0 20px;
		margin-bottom: -40px;
	}

	.content-inner-img-pad2 {
		padding: 20px 20px 0 20px;
		margin-top: 140px;
		margin-bottom: -100px;
	}

	.content-inner-img-pad3 {
		padding: 20px 20px 0 20px;
		margin-bottom: -220px;
	}

	.content-inner-img-pad4 {
		padding: 20px 20px 0 20px;
		margin-bottom: -180px;
	}

	.content-outer-each-2 h3 span {

		bottom: 43px;
		font-size: 38px;
		line-height: 34px;

	}

	.work-ppl-outer {
		margin: 50px 20px 0px 20px;
	}

	.work-ppl-box {
		flex-wrap: wrap;
		padding: 0 0px 30px 0px;

	}

	.work-ppl-tit h2 span {

		top: -20px;
		font-size: 30px;
		line-height: 30px;
	}

	.work-ppl-txt {
		width: 100%;
		text-align: left;
		color: #000;
		margin-top: 10px;
		display: flex;
		flex-direction: column;
	}

	.work-ppl-txt-in1 {
		font-weight: 100;
		font-size: 10px;
		line-height: 14px;

	}

	.work-ppl-txt-in2 {
		font-weight: 100;
		font-size: 28px;
		line-height: 28px;
		padding-top: 7px;
	}

	.work-ppl-txt-in2 span {
		font-weight: 100;
		font-size: 10px;
		line-height: 10px;

	}

	.work-ppl-inner {
		width: 50%;
		padding: 30px 10px 0px 10px !important;
		border-right: none;
	}

	.this-box2-outer {
		padding: 0 20px 20px 20px;
	}

	.icon-content-outer-out {
		padding: 0 20px 20px 20px;
	}

	.each-content-outer h3 {
		width: 100%;
		font-size: 18px;
	}

	.our-pos {
		padding: 0 20px;
	}

	.qa-com {
		padding: 0 20px;
	}
}

@media screen and (max-width:599px) {
	#mainimg {

		background-position: 50% 100%;
	}

	#about {
		margin-top: 120px
	}

	#work {
		margin-top: 60px
	}

	#people {
		margin-top: 100px
	}

	header #logo img {
		height: 23px;
	}

	.forsp {
		display: block;
	}

	.topimgforsp1 {
		order: 1 !important;
	}

	.topimgforsp2 {
		order: 2;
	}

	.main-catch {
		font-size: 56px;
		line-height: 56px;
	}

	.content-outer-each {
		flex-direction: column;
	}

	.content-outer-in-each1 {
		width: 100%;
	}

	.content-outer-in-each2 {
		width: 100%;
		padding: 20px 20px;
	}

	.content-outer-in-each2-mida {
		font-size: 20px;
	}

	.each-content-outer-txt {
		flex-direction: column;
	}

	.each-content-outer-txt-in1 {
		width: 100%;
		padding: 20px 0px 40px 0px;
	}

	.each-content-outer-txt-in2 {
		width: 100%;
		padding: 20px 0;
	}

	.each-content-outer-txt-in3 {
		width: 100%;
		padding: 20px 0px 40px 0px;
	}

	.people-message-outer {
		width: 100%;
		padding: 0 0px;
	}

	.content-outer-each-2 {
		margin: 60px 0 0 0;
		z-index: 1;
	}

	.content-outer-each-2-in1 {
		width: 20%;
	}

	.content-outer-each-2-in1 img {
		width: 100%;
	}

	.content-outer-each-2-in2 {
		width: 60%;
		font-size: 18px;
		line-height: 18px;
		padding: 0 12px
	}

	.each-content-inner-com {
		padding: 0 20px;
	}

	.icon-content-outer {
		width: 100%;
		padding: 0 0;
	}

	.icon-com-num-in1 {
		padding: 4px 4px;
	}

	.icon-content-outer-out {
		margin: 0px 0 0px 0;
		padding: 0 0 40px 0;
	}

	.com-map img {
		width: 60%;
	}

	.icon-com-num {
		width: 49%;
		margin-bottom: 60px;
	}

	.icon-com-num-in3 span {
		font-size: 42px;
		line-height: 42px;
	}


	table.com-tbl th {
		width: 80px;
	}

	.icon-com-num-in2 img {
		width: 60%;
	}

	table.prd-tbl tr {
		display: flex;
		flex-direction: column;
	}

	table.prd-tbl th {
		width: 100%;
	}

	table.prd-tbl th img {
		width: 100%;
	}

	table.prd-tbl td {
		width: 100%;
		padding: 8px 0 28px 0;
	}



	.our-pos {
		flex-direction: column;
		padding: 0;
	}

	.our-pos-in1 {
		width: 100%;
	}

	.our-pos-in1 img {
		width: 100%;
	}

	.our-pos-in2 {
		width: 100%;
		padding: 12px 0 28px 0;
	}

	.for-data {
		padding: 0 20px;
	}

	.qa-com {
		padding: 0 0px;
	}

	.timeline-date {
		width: 70px;
		text-align: left;
	}

	.timeline-date img {
		width: 90%;

	}

	.timeline-content {
		padding-top: 15px;
		text-align: left;
	}

	.timeline-content:before {
		left: 66px;
		top: 27px;
	}

	/*ppl*/
	.ppl-outer {
		flex-wrap: wrap;
		flex-direction: column;
		margin: 20px 0;
	}

	.ppl-inner1 {
		width: 100%;
		padding: 0 0 20px 00;
	}

	.ppl-inner1 img {
		width: 30%;
	}

	.ppl-inner2 {
		width: 100%;
	}

	.ppl-inner2:before {
		top: -13px;
		left: 50%;
		margin-left: -15px;
		border: 15px solid transparent;
		border-bottom: 15px solid #fff;
	}

	.aboutus-top-outer {
		flex-wrap: wrap;
		flex-direction: column;
	}

	.aboutus-top-inner1 {
		width: 100%;
		padding: 0 0 20px 0;

	}

	.aboutus-top-inner2 {
		width: 100%;

	}

	.prd-tbl {
		flex-direction: column;
	}

	.prd-tbl-in {
		width: 100%;
		margin: 20px 0;
	}

	.prd-sub {
		flex-direction: column;
		justify-content: space-between;
	}

	.prd-sub a {
		width: 100%;
		margin: 20px 0;
	}

	.prd-sub a img {
		width: 100%;
	}

	.people-message {
		margin: 40px 0;
	}

	.Label {
		padding: 8px 30px 8px 44px;
	}
}