@charset "utf-8";
/* CSS Document */

/*-----------------------------------
基本要素
------------------------------------*/
html,
body {
	font-family: 'Helvetica Neue','Arial','Hiragino Sans','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
	color: #121212;
	font-size: 16px;
	line-height: 1.7;
	text-align: center;
}

a {
	color: #121212;
	text-decoration: none;
}

a:hover {
	opacity: .8;
}

img {
	max-width: 100%;
	vertical-align: bottom;
}

li {
	list-style: none;
}

table {
	max-width: 100%;
	background-color: transparent;
	border-collapse: collapse;
	border-spacing: 0;
}

table th,
table td {
	padding: 10px 20px;
	border: 1px solid #333333;
}

table td {
	text-align: left;
}

/* コンテンツ幅を設定するための共通クラス */

.wrapper {
  	width: 100%;
  	max-width: 1032px;
  	padding: 0 16px;
  	margin: 0 auto;
}

.container {
	
}

/*-----------------------------------
header
------------------------------------*/

#header {
	display: flex;
	align-items: center;
	padding: 0 2%;
	height: 80px;
	width: 100%;
	background-color: #00008B;
}

#header a {
	color: #fff;
}

#header a:hover {
	color: #DCDCDC;
}
.site-title {
	flex: 1 1 30%;
	padding-right: 20px;
}

.site-title img {
	max-height: 68px;
}

#navi {
	flex: 1 1 70%;
}

.nav-menu {
	display: flex;
	justify-content: space-between;
	padding-left: 30px;
}

.hamburger {
	display: none;
}


/*-------------------------------------------
Mai,sub nvisual
-------------------------------------------*/
#mainvisual,
#subvisual {
  	position: relative;
  	margin-bottom: 120px;
}

#mainvisual {
	height: 780px;
}

#subvisual {
	height: 300px;
}

/*
テキストが画像の上に表示されるように「z-index」を設定
*/
#mainvisual .text .toplogo1 {
  	position: absolute;
	width: 140px;
	height: 74px;
  	top: 76%;
	left: 90%;
	transform: translate(-50%, -50%);
  	z-index: 3;
}

#mainvisual .text .toplogo2 {
  	position: absolute;
	width: 140px;
	height: 50px;
  	top: 67%;
	left: 90%;
	transform: translate(-50%, -50%);
  	z-index: 3;
}

#mainvisual .text p,
#subvisual .text p {
	position: absolute;
	width: 100%;
	height: 100px;
  	top: 33%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	opacity: .6;
	font-size: 1.8em;
	padding-top: 1em;
  	z-index: 6;
}


/*
メインビジュアルを画面の高さに合わせる
headerの高さが80pxあるので、100vhから80px分だけマイナスする
*/
#mainvisual img {
  	width: 100%;
  	height: calc(100vh - 80px);
  	object-fit: cover;
}

#subvisual img {
	width: 100%;
	height: 300px;
	object-fit: cover;
}

#mainvisual .fade li {
  	width: 100%;
  	position: absolute;
  	top: 0;
  	right: 0;
  	/* 最初は3枚の画像を非表示にしておく */
  	opacity: 0;
  	/*
  	アニメーションを実行
  	fade：下で定義している「@keyframes fade」を実行
  	15s：「@keyframes fade」の処理を15秒かけて実行
  	infinite：アニメーションの処理を無限に繰り返す
  	*/
  	animation: fade 15s infinite;
}
/*
1枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 0s;」ですぐに実行
*/
#mainvisual .fade li:nth-child(1) {
  	animation-delay: 0s;
}
/*
2枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 5s;」で5秒後に実行
*/
#mainvisual .fade li:nth-child(2) {
  	animation-delay: 5s;
}
/*
3枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 10s;」で10秒後に実行
*/
#mainvisual .fade li:nth-child(3) {
  animation-delay: 10s;
}

/*
アニメーション処理
上の「animation」で15sを指定しているので下記の処理を15秒かけて実行
0%が0秒を表し、100%が15秒後を表す。

0%の「opacity: 0;」で非表示の状態からスタートし、
15%になるまでの間に少しづつ画像を表示（フェードイン）させる。
そこから30%の時点までは画像を表示させたままの状態を維持し、
45%の時点に向けて画像を非表示（フェードアウト）する。
そこから100%まで非表示の状態を維持する。
*/
@keyframes fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*-------------------------------------------
section-title
-------------------------------------------*/

.section-title {
  font-size: 2.25rem;
  margin-bottom: 100px;
  position: relative;
}
/* 疑似要素でタイトル下に下線を引く */
.section-title::after {
  content: "";
  width: 100px;
  height: 3px;
  background-color: #333;
  display: block;
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/*-------------------------------------------
section
-------------------------------------------*/
.sp {
	display: none;
}

#message,
#voice,
#work,
#company,
#contact,
#voice-1,
#voice-2,
#links {
	margin-bottom: 120px;
}

#message table tr td:nth-of-type(1) {
	width: 20%;
	text-align: center;
}

#message table tr td:nth-of-type(2) {
	width: 30%;
	text-align: center;
}

#message table tr td:nth-of-type(3) {
	width: 50%;
}

#voice .list {
	display: flex;
  	justify-content: center;
}

#voice .list li {
	width: 38%;
  	font-size: 0.875rem;
  	text-align: center;
	padding: 0 30px;
}

/*
円を作成

レスポンシブに対応した可変サイズの円を作成する場合は、
widthに100%を設定して、paddingで上下を50%に設定
今回は円の中にテキストが入っているのと、枠線をつけているため、
50%から上下それぞれテキストの高さ（10px）とボーダー（1px）をマイナスしている
※テキストの高さは、ディベロッパーツールで20pxと確認できるため、
上下で分割してそれぞれ10pxとなる。

*/
#voice .list li a {
  	width: 100%;
  	border: solid 1px #333333;
  	border-radius: 50%;
  	color: #333333;
  	display: block;
  	margin-bottom: 15px;
  	text-align: center;
  	position: relative;
  	/* ホバー時用の要素を隠すために設定 */
  	overflow: hidden;
}
/*
ホバー時のスライドを疑似要素で作成
「left: -100%;」で左側に隠しておく
*/
#voice .list li a::before {
  	content: "";
  	width: 100%;
  	height: 100%;
  	background-color: #808080;
  	position: absolute;
  	top: 0;
  	left: -100%;
  	opacity: 0.3;
  	transition: 0.5s;
}
/* ホバー時に「left: 0;」を設定して右に移動させる */
#voice .list li a:hover::before {
  	left: 0;
}
#voice .list .title {
  	font-size: 1rem;
  	font-weight: bold;
  	margin-bottom: 5px;
}

#work .link,
#links .link {
	display: flex;
	justify-content: center;
	margin-top: 60px;
}

#work .link .item,
#links .link .item {
	width: 40%;
  	border: solid 1px #333333;
  	display: block;
  	font-size: 0.875rem;
  	position: relative;
  	padding: 30px 0;
  	text-align: center;
  	transition: 0.1s;
	margin: 0 60px;
}

#work .link .item::before,
#links .link .item:before {
  	content: "";
  	border-top: 20px solid transparent;
  	border-right: 20px solid #333333;
  	position: absolute;
  	right: 4px;
  	bottom: 4px;
}

/*
ホバー時は枠線を太くする
「border」ではなく「outline」を使用することで、ホバー時にレイアウトがずれるのを防ぎます。
※詳細を知りたい方は、borderとoutlineの違いについて検索してみてください。
*/
#work .link .item:hover,
#links .link .item:hover {
  	outline: solid 3px #333333;
}
#work .link .item img,
#links .link .item img {
  	margin-bottom: 5px;
}

#access iframe {
	width: 100%;
}

.info {
	margin-bottom: 30px;
}

#message p,
#message table,
#company p,
#work p,
#contact p,
#construction p {
	margin-bottom: 50px;
}

.greeting {
	margin-bottom: 50px;
}

#company .greeting p {
	padding: 0 6%;
	text-align: left;
	margin-bottom: 0;
}

#company .greeting .right {
	text-align: right;
}

#company table,
#work table {
	margin: 0 auto;
	width: 90%;
}

#company th,
#work th {
	width: 30%;
}

.history {
	margin-top: 50px;
}

.achievement {
	
}

.achievement-title {
	font-size: 1.2em;
	color: #00008B;
	padding-bottom: 20px;
}

.achievement-item {
	display: flex;
	align-items: center;
	border-bottom: 2px dotted #00008B;
	margin-bottom: 30px;
}

.achievement-item:last-child {
	border-bottom: none;
}

.achievement-text,
.achievement-img {
	flex: 1 1 48%;
	padding-bottom: 50px;
}

.achievement-text {
	padding-left: 30px;
	text-align: left;
}

.achievement-text dt {
	font-weight: bold;
}

.achievement-text dd {
	padding-left: 20px;
	padding-bottom: 20px;
}

a.past-btn {
	display: block;
	vertical-align: middle;
	width: 300px;
	margin: auto;
	padding: 1em 4em;
	font-weight: bold;
	border-radius: 0.3em;
	border-bottom: 7px solid #b84c00;
	background: #eb6100;;
	color: #fff;
	margin-bottom: 50px;
}

a.past-btn:hover {
	margin-top: 6px;
	border-bottom: 1px solid #b84c00;
}

.voice-item {
	display: flex;
	align-items: center;
}

.voice-img {
	width: 30%;
	padding: 0 30px;
}

.voice-text {
	text-align: left;
}


/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
  	background-color: #00008d;
  	color: #fff;
  	padding: 20px 0;
}

#footer .menu {
  	display: flex;
  	justify-content: center;
  	margin: 30px 0;
}

#footer .menu li {
  	border-right: solid 1px #fff;
  	padding: 0 20px;
}

#footer .menu li:last-child {
  	border-right: none;
}

#footer .menu li a {
  	color: #fff;
}

#footer .copyright {
  	text-align: center;
}

/*-------------------------------------------
トップへ戻るボタン
-------------------------------------------*/
/*
右下に固定で配置
表示・非表示の切り替えはjQueryで行うため、詳細は「main.js」のコメントを参照
*/
#to-top {
  	width: 50px;
  	height: 50px;
  	background-color: #1E90FF;
  	border: solid 1px #fff;
  	border-radius: 50%;
  	position: fixed;
  	right: 25px;
  	bottom: 25px;
}
/*
中の三角は疑似要素で作成
*/
#to-top::after {
  	content: "";
  	border-left: 9px solid transparent;
  	border-right: 9px solid transparent;
  	border-bottom: 16px solid #fff;
  	position: relative;
  	left: 0;
  	bottom: 8px;
}



/*-------------------------------------------
タブレット　sp
-------------------------------------------*/
@media screen and (max-width: 1024px) {
	
	table th,
	table td {
		padding: 5px 10px;
	}
	
	.sp {
		display: block;
	}
	
	/*-------------------------------------------
  	ヘッダー
  	-------------------------------------------*/
	
	.site-title {
		flex: 0 0 320px;
		padding-left: 10px;
		position: relative;
	}
	
	/* ハンバーガーメニュー */
	#header {
		padding: 0;
		z-index: 10;
	}
	
	#navi {
    	width: 300px;
		background: #00008b;
    	padding: 90px 50px 25px 25px;
    	position: fixed;
    	top: 0;
		left: -300px;
    	bottom: 0;
		opacity: 0;
    	overflow-y: auto;
    	transition: 0.5s;
 	  	z-index: 20;
  	}
	
  	.open #navi {
    	left: 0;
    	opacity: .8;
  	}
	
  	#navi ul.nav-menu {
    	flex-direction: column;
		margin-bottom: 30px;
  	}
	
  	#navi ul li {
    	padding: 10px 0;
  	}
	
  	.hamburger {
    	display: block;
		width: 30px;
    	height: 30px;
    	cursor: pointer;
    	position: fixed;
    	top: 22px;
    	right: 18px;
    	transition: 0.5s;
    	z-index: 20;
  	}
	
  	.hamburger span {
    	width: 30px;
    	height: 2px;
    	background-color: #1E90FF;
    	border-radius: 4px;
    	display: block;
    	position: absolute;
    	left: 0;
    	transition: 0.5s;
  	}
	
  	.hamburger span:nth-child(1) {
    	top: 4px;
  	}
	
  	.hamburger span:nth-child(2) {
    	top: 14px;
  	}
	
  	.hamburger span:nth-child(3) {
    	bottom: 4px;
  	}
	
  	.open .hamburger span {
    	background-color: #fff;
  	}
	
  	.open .hamburger span:nth-child(1) {
    	transform: translateY(10px) rotate(-315deg);
  	}
	
  	.open .hamburger span:nth-child(2) {
    	opacity: 0;
  	}
	
  	.open .hamburger span:nth-child(3) {
    	transform: translateY(-10px) rotate(315deg);
  	}
	
	#mask {
    	display: none;
    	transition: 0.5s;
  	}

	
  	.open #mask {
    	width: 100%;
    	height: 100%;
		background-color: #000;
    	cursor: pointer;
    	display: block;
    	position: fixed;
    	top: 0;
    	left: 0;
		opacity: .7;
    	z-index: 10;
  	}
	
	/*-------------------------------------------
	Mainvisual
	-------------------------------------------*/
	
	#mainvisual,
	#mainvisual img {
		height: 600px;
	}
	
	#subvisual,
	#subvisual img {
		height: 160px;
	}
	
	#mainvisual .text .toplogo1 {
		width: 120px;
		height: 64px;
		top: 86%;
		left: 60%;
	}
	
	#mainvisual .text .toplogo2 {
		width: 120px;
		height: 44px;
		top: 86%;
		left: 43%;
	}
	
	#mainvisual .text p,
	#subvisual .text p {
		font-size: 1.1em;
		height: 60px;
	}
	/*-------------------------------------------
	section-title
	-------------------------------------------*/
	
	.section-title {
    	font-size: 1.75rem;
    	margin-bottom: 60px;
  	}
  	.section-title::after {
    	width: 80px;
  	}
	
	/*-------------------------------------------
  	work,company
  	-------------------------------------------*/
  	
	#message,
	#voice,
	#work,
	#company,
	#contact,
	#voice-1,
	#voice-2,
	#links {
		margin-bottom: 60px;
	}
	
	#company table,
	#work table {
		width: 100%;
	}
	
  	#work .link,
	#links .link {
    	flex-direction: column;
    	align-items: center;
    	margin-top: 30px;
  	}
	
  	#work .link .item,
	#links .link .item {
    	width: 80%;
    	margin: 20px 0 0 0;
  	}
	
  	#work .link .item:first-child,
	#links .link .item:first-child {
    	margin-top: 0;
  	}
	
	.achievement-item {
		flex-direction: column;
	}
	
	.achievement-text,
	.achievement-img {
		flex: 1 1 100%;
	}
	
	.achievement-text {
		padding-left: 10px;
	}
	
	#voice .list li {
		width: 48%;
	}
	
	.voice-item {
		flex-direction: column;
	}
	
	.voice-img {
		width: 60%;
		margin-bottom: 30px;
	}
	/*-------------------------------------------
  	フッター
  	-------------------------------------------*/
  	#footer .menu {
    	flex-wrap: wrap;
  	}
  	#footer .menu li {
    	margin-bottom: 10px;
  	}
	
}

/*------------------------------------------
sp
------------------------------------------*/

@media screen and (max-width: 600px){
	
	#mainvisual,
	#mainvisual img {
		height: 300px;
	}
	
	#mainvisual .text .toplogo1 {
		width: 90px;
		height: 48px;
		top: 86%;
		left: 63%;
	}
	
	#mainvisual .text .toplogo2 {
		width: 90px;
		height: 32px;
		top: 86%;
		left: 37%;
	}
	
}