@charset "utf-8";

/***************************************************************************
top_img
****************************************************************************/

#top_img {
	height: 100vh;
	width: 100%;
	margin-bottom: 50px;
	background-image: url(../img/index/top_img.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
#top_img .inner {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	width: auto;
}
#top_img .inner img {
	width: auto !important;
	max-width: inherit;
}
#top_img .inner .en,
#top_img .inner .jp {
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0;
}
#top_img .inner .en {
    animation: fade_en 7s forwards;
	animation-delay: 0.5s;
}

@keyframes fade_en {
0% {
    opacity: 0;
    transform: translateX(70px);
}
20% {
    opacity: 1;
    transform: translateX(0px);
}
75% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}

#top_img .inner .jp {
    animation: fade_jp 2.5s forwards;
	animation-delay: 7.25s;
}

@keyframes fade_jp {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/***************************************************************************
works
****************************************************************************/

#works .thumb_exp_wrap {
	display: flex;
	justify-content: space-between;
}
#works .thumb_exp {
	width: 32%;
	display: block;
}
#works .thumb {
	padding-top: 68%;
	margin-bottom: 20px;
}
#works .exp li {
	display: flex;
	border-bottom: 1px solid #C4D4D8;
	font-size: 14px;
}
#works .exp li span {
	display: flex;
	align-items: center;
	padding: 10px 0px 10px 0px;
}
#works .exp li span.subject {
	width: 7.5em;
	margin-right: 1em;
	justify-content: center;
	background-color: #F5F8F8;
}

/***************************************************************************
office
****************************************************************************/

#office .thumb {
	background-image: url(../img/index/office_thumb.jpg);
	width: 40%;
	margin-left: 30px;
	order: 2;
}
#office .exp {
	flex: 1;
}
#office .exp table {
	width: 100%;
}
#office .exp th,
#office .exp td {
	padding: 10px 15px 10px 15px;
	border-bottom: 1px solid #C4D4D8;
}

/***************************************************************************
contact
****************************************************************************/

#contact.contents {
	max-width: 1000px;
}
#contact table {
	width: 100%;
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC; 
}
#contact th,
#contact td {
	border-bottom: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	padding: 10px 15px 10px 15px;
}
#contact th {
	width: 200px;
	background-color: #F5F8F8;
}

/***************************************************************************
access
****************************************************************************/

#access #google_map {
	margin-bottom: 30px;
}
#access #google_map iframe {
	width: 100%;
	border: 1px solid #CCCCCC !important;
}
#access ul {
	display: table;
	margin: 0px auto 0px auto;
}
#access li {
	border-bottom: 1px solid #CCCCCC;
	display: flex;
	padding: 20px 50px 20px 50px;
}
#access li .subject {
	width: 5em;
}
#access li .icon {
	color: #85A1A0;
	font-size: 14px;
	padding-right: 0.2em;
}