@charset "utf-8";

@import url("header.css");
@import url("footer.css");

@import url('https://fonts.googleapis.com/css?family=Bebas+Neue|Oswald:500,600,700&display=swap');


body * {
	/*border:0.2px solid rgba(0,255,0,0.1);
background:rgba(0,255,0,0.1);*/
}


html {
	width: 100%;
	overflow-x: auto;
}

body {
	width: 100%;
	/*min-width: 1024px;*/
	height: auto;
	background: #F4F3F1;
}

@media screen and (max-width:640px) {
	html {
		min-width: none;
		overflow-x: hidden;
	}
}


/* フォントの指定 */
html {
	font-size: 62.5%;
}

body,
input[type='text'],
input[type='tel'],
input[type='email'],
textarea {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
	font-family: "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-feature-settings: "palt";
	color: #141414;
}

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

p {
	text-align: justify;
	text-justify: inter-ideograph;
}

p a {
	color: #231815;
	text-decoration: underline;
}

/* セレクト時の色指定 */
::selection {
	background: #141414;
	color: #EBE9E6;
}

::-moz-selection {
	background: #141414;
	/*Firefox*/
	color: #EBE9E6;
}

.inner {
	width: 94%;
	margin: 0 auto;
}

.mw100 {
	max-width: 100%;
}

.showPc {}

.showSp {
	display: none;
}

.imgTxt {
	position: relative;
}

.imgTxt p {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -100vw;
	font-size: 10px !important;
}

@media screen and (max-width:960px) {
	html {
		font-size: 56%;
	}
}

@media screen and (max-width:640px) {
	.showPc {
		display: none;
	}

	.showSp {
		display: block;
	}
}




/* --------------------------------------------

font

---------------------------------------------- */
.font-oswald {
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
}

.font-bebas {
	font-family: 'Bebas Neue', cursive, sans-serif;
	font-weight: 500;
}




/* --------------------------------------------

animation

---------------------------------------------- */

@keyframes anime_fadeIn {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

-webkit-@keyframes anime_fadeIn {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}



.anime,
.animest {
	opacity: 0;
}

.animest.animeFadeInBottomTop,
.animest .animeFadeInBottomTop {
	animation-name: fadeInBottomTop;
	animation-delay: 0.0s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes fadeInBottomTop {
	0% {
		opacity: 0;
		transform: translateY(8rem) translateX(0) scale(0.9);
	}

	100% {
		opacity: 1;
		transform: translateY(0) translateX(0) scale(1);
	}
}




.animeOverlay {
	position: relative;
	overflow: hidden;
	opacity: 1;
}

.animeOverlay::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	background: #0096AE;
	z-index: 1;
}

.animeOverlay::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: -100%;
	background: #0096AE;
	z-index: 2;
}

.animest.animeOverlay::before {
	animation-name: Overlay;
	animation-delay: 0.0s;
	animation-duration: 0.7s;
	animation-fill-mode: forwards;
}

.animest.animeOverlay::after {
	animation-name: Overlay_af;
	animation-delay: 0.0s;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
}

@keyframes Overlay {
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: translateX(100%);
		opacity: 0.5;
	}
}

@keyframes Overlay_af {
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: translateX(200%);
		opacity: 0.5;
	}
}

/* --------------------------------------------

#main

---------------------------------------------- */
#main {
	margin-right: 184px;
	z-index: 9991;
	overflow-x: hidden;

	opacity: 0;
	animation: anime_fadeIn 1.8s ease 0.5s 1 forwards;
	-webkit-animation: anime_fadeIn 1.8s ease 0.5s 1 forwards;
}

/*--- Responsive ---*/
@media screen and (max-width:768px) {
	#main {
		margin-right: 0;
		padding-top: 14.4vw;
		overflow-x: hidden;
	}
}

@media screen and (max-width:640px) {
	#main {
		padding-top: 18vw;
	}
}




.pageTitle {
	position: absolute;
	top: 1.1em;
	width: 9.5em;
	padding: 0.56em 0 0 1.7em;
	color: #B29A76;
	font-size: 25px;
	font-size: 2.5rem;
	letter-spacing: 0.2em;
	line-height: 1.4;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	border-top: 2px solid #B29A76;
	z-index: 1;
}

.pageTitle::before {
	content: "MATSUIKENSETSU";
	display: block;
	font-size: 0.42em;
	letter-spacing: 0.47em;
}

/*--- Responsive ---*/
@media screen and (max-width:768px) {
	.pageTitle {
		margin-top: 12vw;
		width: 8.5em;
		font-size: 18px;
		font-size: 1.8rem;
	}

	.pageTitle::before {
		font-size: 0.46em;
	}
}



/* --------------------------------------------
英語表記付き見出し
---------------------------------------------- */
.titleType-A {
	padding: 5em 0 0.5em;
	margin-bottom: 1.5em;
	text-align: center;
	font-size: 26px;
	font-size: 2.6rem;
	line-height: 0.95;
}

.titleType-A span {
	display: block;
	margin: -1.25em auto 0;
	font-size: 4em;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: rgba(0, 150, 174, 0.15);
}

@media screen and (max-width:640px) {
	.titleType-A {
		font-size: 20px;
		font-size: 2.0rem;
	}
}




/* --------------------------------------------

button

---------------------------------------------- */
.arrowBtn {
	display: inline-block;
	min-width: 19em;
	padding: 1em;

	color: #EBE9E6;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	border: 1px solid #B29A70;
	background: #0096AE;

}

/* --------------------------------------------
コーポレートカラーBtn
---------------------------------------------- */
.linkBtnType-A {
	/*display: inline-block;
	min-width: 10em;
	padding: 0.3em 1em;
	color: #EBE9E6;
	font-weight: bold;
	border: 1px solid #B29A70;
	background: #0096AE;*/
	transition: 0.3s;
}


.linkBtnType-A:hover {
	/*color: #222222;*/
	border: 1px solid #EBE9E6!important;
	background: #a0885e!important;
}


/* --------------------------------------------

校正用　制作中ページ

---------------------------------------------- */
.pendPages {
	padding: 5em 0;
	margin: 5em 5%;
	font-size: 20px;
	font-size: 2rem;
	color: red;
	text-align: center;
	border: 2px solid red;
}

.pendImage {
	display: block;
	position: relative;
	left: 50%;
	margin-left: -678px;
}

@media screen and (max-width:640px) {
	.pendImage {
		width: 120vw;
		margin-left: -60vw;
	}
}