@charset "utf-8";
/* リセット
------------------------------------- */
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}

table {border-spacing:0; border-collapse:collapse;}
* html table {border-collapse:collapse;}
*:first-child+html table {border-collapse:collapse;}
caption,th {text-align:left; font-weight:normal;}
table,th,td,img {border:0;}
img,input {vertical-align:middle; outline:none;}
q:before,q:after {content:'';}
ul {list-style: none;}

hr,
legend,
caption {display:none;}

img {border:0; vertical-align:bottom;}

a:focus { outline:none;}


/* aタグ設定
------------------------------------- */
a.btnEffect{
    color:#FD5229;
    text-decoration: none;
    transition: 0.3s;
}

a.btnEffect:hover {
	opacity:0.50;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
	-moz-opacity:0.50;
	-khtml-opacity: 0.50;
	zoom:1;
}

a.btnEffect:active {
    position: relative;
    top: 2px;
    left: 2px;
}

/* 基本設定
------------------------------------- */
body{
    width: 100%;
    height: 100%;
    font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

#wrap{
	width: 100%;
}

.scale {
	animation: scaleUp 1s infinite ease-in-out;
}

@keyframes scaleUp {
	0%, 100% {
		transform: scale(0.4);
	}
	50% {
		transform: scale(1.0);
	}
}

.bounce {
	animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px); /* 上に20px移動 */
	}
}

.scale-random {
	transform-origin: bottom center; /* 下部を基点にする */
	animation: scaleRandom 1s infinite ease-in-out;
}

@keyframes scaleRandom {
	0% {
		transform: scaleY(1);
	}
	10% {
		transform: scaleY(0.95); /* 縮小 */
	}
	20% {
		transform: scaleY(1); /* 拡大 */
	}
	30% {
		transform: scaleY(1);
	}
	40% {
		transform: scaleY(0.92); /* 大きめに縮小 */
	}
	50% {
		transform: scaleY(1.0); /* 大きめに拡大 */
	}
	60% {
		transform: scaleY(0.97); /* 少し縮小 */
	}
	70% {
		transform: scaleY(0.99); /* 少し拡大 */
	}
	80% {
		transform: scaleY(1);
	}
	90% {
		transform: scaleY(0.93); /* ランダムな縮小 */
	}
	100% {
		transform: scaleY(1);
	}
}

/* Header
------------------------------------- */
#header{
	width: 100%;
	height: 160px;
	background: url("../img/bgHeader.jpg") repeat-x;
	background-size: cover;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
	padding: 0 20px;
}

#header p.titleHeader{
	width: 738px;
	height: 148px;
	background: url("../img/titleHeader.png") no-repeat;
	background-size: cover;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

#header p.btnContact{
	width: 126px;
	height: 68px;
	background: url("../img/btnHeaderContactPc.png") no-repeat;
	background-size: cover;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

/* Main Visual
------------------------------------- */
#mv{
	width: 100%;
	background: linear-gradient(to bottom, #E5D6AA, #FFE094);
}

#mv img{
	width: 100%;
	height: auto;
}

/* Company
------------------------------------- */
#boxCompany{
	position: relative;
	width: 100%;
	height: 1500px;
	background: url("../img/bgCompanyPc.png");
	background-size: 100% 100%;
	background-repeat: repeat-x;
	overflow:hidden;
}

#boxCompany #msg{
	position: absolute;
	top: 40px;
	right: calc((100% - 1124px) / 2);
	left: calc((100% - 1124px) / 2);
	width: 1124px;
	height: 387px;
	background: url("../img/bgMsgPc.png") no-repeat;
	background-size: cover;
	font-size: 24px;
	font-family: "Yuji Syuku", serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.875;
	color: #000;
	padding: 35px 60px;
	z-index: 3;
}

#boxCompany #msg span{
	color: #EA5514;
}

#boxCompany .star{
	display: block;
	width: 85px;
	height: 86px;
	background: url("../img/imgStar.png") no-repeat;
	background-size: cover;
	z-index: 6;
}

#boxCompany #star1{
	position: absolute;
	top: 439px;
	left: calc(50% - 363px);
	animation-delay: 0s;
}

#boxCompany #star2{
	position: absolute;
	top: 810px;
	left: calc(50% - 336px);
	animation-delay: 0.25s;
}

#boxCompany #star3{
	position: absolute;
	top: 1036px;
	left: calc(50% - 248px);
	animation-delay: 0.5s;
}

#boxCompany #star4{
	position: absolute;
	top: 1100px;
	right: calc(50% - 220px);
	animation-delay: 0.75s;
}

#boxCompany #star5{
	position: absolute;
	top: 650px;
	right: calc(50% - 355px);
	animation-delay: 0.85s;
}

#boxCompany #star6{
	position: absolute;
	top: 1157px;
	left: calc(50% - 320px);
	animation-delay: 0.85s;		
}

#boxCompany #details{
	position: absolute;
	bottom: 560px;
	right: calc((100% - 590px) / 2);
	left: calc((100% - 590px) / 2);
	width: 590px;
	height: 308px;
	background: url("../img/imgTable.png") no-repeat;
	background-size: cover;
	z-index: 3;	
}

#boxCompany #details ul li{
	font-size: 20px;
	font-family: "Yuji Syuku", serif;
	font-weight: 400;
	font-style: normal;
	color: #000;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
	padding-left: 13px;
	padding-top: 11px;
	margin-bottom: 23.5px;
	line-height: 1.2;
}

#boxCompany #details ul li p{
	color: #fff;
	width:138px;
}

#boxCompany a.btnContactAction #btnContact{
	transition: filter 0.5s ease;
}

#boxCompany a.btnContactAction:hover #btnContact{
	filter: hue-rotate(-15deg) saturate(3);
}

#boxCompany #msgContact{
	position: absolute;
	bottom: 286px;
	right: calc(50% - 208px);
	width: 416px;
	height: 138px;
	background: url("../img/bgMsgContactPc.png") no-repeat;
	background-size: cover;
	font-size: 20px;
	font-family: "Yuji Syuku", serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.30;
	color: #000;
	text-align: center;
	padding-top: 11px;
	z-index: 5;
}

#boxCompany #btnContact{
	position: absolute;
	bottom: 190px;
	right: calc(50% - 103px);
	width: 200px;
	height: 128px;
	background: url("../img/btnContactMain.png") no-repeat;
	background-size: cover;
	z-index: 4;
	font-size: 12px;
	text-align: center;
	color: #000;
	padding-top: 91px;
}

#boxCompany #nobori{
	position: absolute;
	bottom: 164px;
	right: calc(50% - 350px);
	width: 151px;
	height: 437px;
	background: url("../img/imgNobori.png") no-repeat;
	background-size: cover;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	z-index: 4;
}

#boxCompany #company{
	position: absolute;
	bottom: 94px;
	right: calc((100% - 922px) / 2);
	left: calc((100% - 922px) / 2);
	width: 922px;
	height: 928px;
	background: url("../img/imgCompanyPc.png") no-repeat;
	background-size: cover;
	z-index: 2;
}

#boxCompany #cloud1{
	position: absolute;
	width: 497px;
	height: 211px;
	top: 120px;
	left: calc(50% - 830px);
	background: url("../img/imgCloud1.png") no-repeat;
	background-size: cover;
	z-index:1 ;
	animation-delay: 0s;
}

#boxCompany #cloud2{
	position: absolute;
	width: 542px;
	height: 270px;
	top: 392px;
	right: calc(50% - 840px);
	background: url("../img/imgCloud2.png") no-repeat;
	background-size: cover;
	z-index:1 ;
	animation-delay: 0.5s;
}

#boxCompany #cloud3{
	position: absolute;
	width: 354px;
	height: 162px;
	top: 588px;
	left: calc(50% - 646px);
	background: url("../img/imgCloud3.png") no-repeat;
	background-size: cover;
	z-index:1 ;
	animation-delay: 1.0s;
}

#boxCompany #buildings{
	position: absolute;
	bottom: 196px;
	width: 100%;
	height: calc(100vw * 1109 / 4070);
	background: url("../img/bgBuildings.png") no-repeat;
	background-size: contain;
	z-index: 0;
}

#boxCompany #copyright{
	position: absolute;
	bottom: 110px;
	width: 100%;
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	color: #fff;
	letter-spacing: 0.1em;
	z-index: 4;
}