/* =================================================================== 
 *
 *  custom for KIT
 *  04-04-2017
 *  ------------------------------------------------------------------
 *
 * =================================================================== */
 
/* ===================================================================
 *  fonts
 *
 * ------------------------------------------------------------------- */
body,h1,h2,h3,h4,h5,h6,p { font-family: "Montserrat", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
.mincho { font-family: "Sorts Mill Goudy", Georgia, "Times New Roman", Times, "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "HGS明朝B", "HGS明朝E", "MS PMincho", "MS 明朝", serif; }
html,body,table td,
h1,h2,h3,h4,h5,h6 { font-weight:400; }
.font_bold { font-weight:700; }

@font-face {
	font-family: "montserrat-bold";
	src: url("/record/fonts/montserrat/montserrat-bold-webfont.woff2") format("woff2"), 
	     url("/record/fonts/montserrat/montserrat-bold-webfont.woff") format("woff");
	font-style: normal;
	font-weight: normal;
}
.head_lead { font-family: "montserrat-bold", sans-serif; }

.font-S { font-size:12px !important; }
.font-M { font-size:14px !important; }
.font-L { font-size:16px !important; }
.font-2L { font-size:18px !important; }
.font-3L { font-size:21px !important; }
.font-4L { font-size:28px !important; }
@media only screen and (min-width: 640px) {
	.font-4L { font-size:36px !important; }
}
@media only screen and (min-width: 768px) {
	.font-4L { font-size:40px !important; }
}
@media only screen and (min-width: 1140px) {
	.font-S { font-size:13px !important; }
	.font-M { font-size:16px !important; }
	.font-L { font-size:18px !important; }
	.font-2L { font-size:24px !important; }
	.font-3L { font-size:32px !important; }
	.font-4L { font-size:46px !important; }
}

 
/* ===================================================================
 *  header
 *
 * ------------------------------------------------------------------- */
#navforPC { position:absolute; top:80px; width:100%;  }
#navforPC ul { list-style:none; margin-left:0; }
#navforPC ul li { padding:1rem 2rem 1rem 1rem; display:inline-block; text-align:center; }
#navforPC a,
#navforPC a:visited { color:#fff; }
#navforPC a:hover,
#navforPC a:focus { color:#E60013; }
@media only screen and (min-width:1300px) {
	#navforPC { top:110px; }
}

#naviArea #navforPC { display:none; }
.page-on-scroll #naviArea #navforMobile {
	visibility:visible;
	position:fixed;
	background:rgba(0,0,0,1);
	width:100%;
	height:80px;
	transition-duration: .3s;
	transition-property: all;
	transition-delay: .3s;
	z-index:700;
}
#naviArea #navforMobile .sitelogo {
	visibility:hidden;
	margin-top:10px;
	margin-left:15px;
	width:370px;
	opacity:0;
}
@media only screen and (max-width:599px) {
	#naviArea #navforMobile .sitelogo { width:300px; margin-top:15px; }
}
@media only screen and (max-width:499px) {
	#naviArea #navforMobile .sitelogo { width:240px; margin-top:20px; }
}
@media only screen and (max-width:359px) {
	#naviArea #navforMobile .sitelogo { width:200px; margin-top:24px; }
}

.page-on-scroll #naviArea #navforMobile .sitelogo {
	visibility:visible;
	transition-duration: .3s;
    transition-property: all;
	transition-delay: .3s;
	opacity:1;
}
.page-on-scroll #header-menu-trigger { top:20px; }
@media only screen and (min-width:768px) {
	#naviArea #navforPC { display:block; }
	.page-on-scroll #naviArea #navforPC { visibility:hidden; }
	#naviArea #navforMobile {
		visibility:hidden;
		background:none;
		transition-duration: .3s;
		transition-property: all;
	}
	#header-menu-trigger { display:none; }
	.page-on-scroll #header-menu-trigger { display:block; }
}
@media only screen and (max-width:400px) {
	.page-on-scroll #header-menu-trigger .header-menu-text {
		display: none;
	}
}

/* ------------------------------------------------------------------- 
 * social link
 * ------------------------------------------------------------------- */
.socialLink li { font-size:20px; }
#navforPC ul.socialLink li { padding-right:0; }
.socialLink li a { width:40px; height:40px; line-height:40px; display:block; border-radius:30px; }
.socialLink li a:hover,
.socialLink li a:focus { color:rgba(255,255,255,.7) !important; }
.socialLink li.icon_instagram a { background:#cd0016; }
.socialLink li.icon_twitter a { background:#66ade3; }
.socialLink li.icon_facebook a { background:#3556a5; }
.socialLink li.icon_instagram a:hover { background:rgba(205,0,22,.7); }
.socialLink li.icon_twitter a:hover { background:rgba(102,173,227,.7); }
.socialLink li.icon_facebook a:hover { background:rgba(53,86,165,.7); }

#menu-nav-wrap .socialLink li a { text-align:center;}
#menu-nav-wrap .socialLink a,
#menu-nav-wrap .socialLink a:visited { color:#fff; }




/* ===================================================================
 *  contents
 *
 * ------------------------------------------------------------------- */

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


/* ------------------------------------------------------------------- 
 * contents area
 * ------------------------------------------------------------------- */
.area_white { background:#fff; }
.area_black { color:#f8f8f8; }
.area_white,
.area_black { padding-top:10rem; padding-bottom:10rem; }

.area_black a,
.area_black a:visited { color:#76a8f5; }
.area_black a:hover,
.area_black a:focus { color:#f8f8f8; }


/* ------------------------------------------------------------------- 
 * midashi
 * ------------------------------------------------------------------- */
.title_h2 { margin-bottom:30px; }
.title_h2 .head_lead { color:#e60012; }
.title_h2 h2 { margin-bottom:0; }
.title_h2 .head_en,
.title_h2 .head_jp { display:block; }
@media only screen and (min-width: 768px) {
	.title_h2 .head_en,
	.title_h2 .head_jp { line-height:60px; }
	.title_h2 .head_en { float:left; width:50%; }
	.title_h2 .head_jp { float:right; width:50%; text-align:right; }
}
.area_white .title_h2 { padding-bottom:1rem; border-bottom:1px solid #a3a3a3; }
.area_black .title_h2 { padding-bottom:1rem; border-bottom:1px solid #f4f4f4; }


/* ------------------------------------------------------------------- 
 * dl,dt.dd
 * ------------------------------------------------------------------- */
dl { line-height:1.3; }
dl:after {
    content:" ";
    display:block;
    clear:both;
}
dt { float:left; }
dd { margin: 0 0 .6rem 2rem; }


/* ------------------------------------------------------------------- 
 * ul
 * ------------------------------------------------------------------- */
ul.inlineList { list-style:none; margin-left:0; }
ul.inlineList li { display:inline-block; }
ul.inlineList li:after { content:"/"; margin-left:4px; }


/* ------------------------------------------------------------------- 
 * tables
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 599px) {
	th, td {
		padding-top: 0;
		display: block;
	}
	th:first-child, td:first-child {
		padding-top: 1.5rem;
	}
}



/* ===================================================================
 *  home
 *
 * ------------------------------------------------------------------- */
.animated.delay {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
 
 
/* ===================================================================
 *  highlights
 *
 * ------------------------------------------------------------------- */
#highlights #record01 { margin-top:20px; text-align:left; }
#highlights #record01 img { transform:rotate(-22deg); }
#highlights #record02 { margin-top:60px; text-align:center; }
#highlights #record02 img { transform:rotate(23deg); }
#highlights #record03 { margin-top:50px; margin-left:20px; margin-bottom:20px; text-align:left; }
#highlights #record03 img { transform:rotate(-20deg); }
@media only screen and (max-width:989px) {
	#highlights #record01 { text-align:center; }
	#highlights #record03 { margin-left:0; text-align:center; }
}
#highlights #record04 { margin-top:50px; padding-left:20px; text-align:left; }
#highlights #record04 img { transform:rotate(-28deg); }
@media only screen and (max-width:989px) {
	#highlights #record04 { padding-left:40px; padding-right:20px; margin-bottom:60px; text-align:center; }
}
#highlights #record05 { float:left; width:50%; margin-top:20px; margin-bottom:30px; }
#highlights #record06 { float:right; width:50%; margin-top:20px; margin-bottom:30px; }
#highlights #record05 { text-align:left; }
#highlights #record05 img { transform:rotate(12deg); margin-left:30px; }
#highlights #record06 { text-align:left; }
#highlights #record06 img { transform:rotate(-21deg); }
@media only screen and (max-width:989px) {
	#highlights #record05 { text-align:center; }
	#highlights #record05 img { margin-left:0; }
	#highlights #record06 { text-align:center; }
}

/* ------------------------------------------------------------------- 
 * Animate.css
 * ------------------------------------------------------------------- */
/* ----- fadeInLeftLoop ----- */
@-webkit-keyframes fadeInLeftLoop {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
	25% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	60% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	85% {
		opacity: 0;
		-webkit-transform: translate3d(50%, 0, 0);
		transform: translate3d(50%, 0, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInLeftLoop {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
	25% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	60% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	85% {
		opacity: 0;
		-webkit-transform: translate3d(50%, 0, 0);
		transform: translate3d(50%, 0, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: none;
		transform: none;
	}
}
.fadeInLeftLoop {
	-webkit-animation-name: fadeInLeftLoop;
	animation-name: fadeInLeftLoop;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
}

/* ----- fadeInRightLoop ----- */
@-webkit-keyframes fadeInRightLoop {
	from {
		opacity: 0;
		-webkit-transform: translate3d(50%, 0, 0);
		transform: translate3d(50%, 0, 0);
	}
	25% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	60% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	85% {
		opacity: 0;
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInRightLoop {
	from {
		opacity: 0;
		-webkit-transform: translate3d(50%, 0, 0);
		transform: translate3d(50%, 0, 0);
	}
	25% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	60% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	85% {
		opacity: 0;
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: none;
		transform: none;
	}
}
.fadeInRightLoop {
	-webkit-animation-name: fadeInRightLoop;
	animation-name: fadeInRightLoop;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
}

/* ----- fadeInLeftReverse ----- */
@-webkit-keyframes fadeInLeftReverse {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
	25% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	60% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	85% {
		opacity: 0;
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInLeftReverse {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
	25% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	60% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	85% {
		opacity: 0;
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: none;
		transform: none;
	}
}
.fadeInLeftReverse {
	-webkit-animation-name: fadeInLeftReverse;
	animation-name: fadeInLeftReverse;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
}

/* ----- fadeInRightReverse ----- */
@-webkit-keyframes fadeInRightReverse {
	from {
		opacity: 0;
		-webkit-transform: translate3d(50%, 0, 0);
		transform: translate3d(50%, 0, 0);
	}
	25% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	60% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	85% {
		opacity: 0;
		-webkit-transform: translate3d(50%, 0, 0);
		transform: translate3d(50%, 0, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInRightReverse {
	from {
		opacity: 0;
		-webkit-transform: translate3d(50%, 0, 0);
		transform: translate3d(50%, 0, 0);
	}
	25% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	60% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	85% {
		opacity: 0;
		-webkit-transform: translate3d(50%, 0, 0);
		transform: translate3d(50%, 0, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: none;
		transform: none;
	}
}
.fadeInRightReverse {
	-webkit-animation-name: fadeInRightReverse;
	animation-name: fadeInRightReverse;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
}



/* ===================================================================
 *  news
 *
 * ------------------------------------------------------------------- */
#news ul.facebookFeed { list-style:none; margin-left:0; }
#news ul.facebookFeed li { text-indent:-1em; padding-left:1em; margin-bottom:1em; }
#news ul.facebookFeed li:before { font-family:"FontAwesome"; content:"\f105"; margin-right:.3em; color:#ff0015; }
#news ul.facebookFeed li a,
#news ul.facebookFeed li a:visited { color:#f8f8f8; }
#news ul.facebookFeed li a:hover,
#news ul.facebookFeed li a:focus { color:#b2cfff; }




/* ===================================================================
 *  footer
 *
 * ------------------------------------------------------------------- */
footer {
	padding-top: 4.2rem;
	padding-bottom: 4.2rem;
	font-size: 1.6rem;
	position: relative;
	background:#dcdddd;
}

footer .footer-social {
	list-style: none;
	display: inline-block;
	margin-left: 0;
	margin-bottom: 9rem;
}

footer .footer-social li {
	display: inline-block;
	padding-left: 0;
	margin: 0 8px 1.5rem 8px;
	/* font-family: "montserrat-bold", sans-serif; custom1704 */
	font-size: 1.8rem;
}

footer .footer-social li a,
footer .footer-social li a:visited {
	color: rgba(255, 255, 255, 0.5);
}

footer .footer-social li a:hover,
footer .footer-social li a:focus {
	color: #FFFFFF;
}

footer .footer-social li:last-child {
	margin-right: 0;
}

#go-top {
	position: fixed;
	bottom: 24px;
	right: 30px;
	z-index: 700;
	display: none;
}

#go-top a {
	text-decoration: none;
	border: 0 none;
	display: block;
	height: 63px;
	width: 60px;
	line-height: 63px;
	text-align: center;
	background-color: #000000;
	color: #888;
	text-align: center;
	text-transform: uppercase;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#go-top a i {
	font-size: 21px;
	line-height: inherit;
}

#go-top a:visited {
	background: #000000;
	color: #888;
}

#go-top a:hover,
#go-top a:focus {
	background: #000000;
	color: #FFFFFF;
}

/* ------------------------------------------------------------------- 
 * social link
 * ------------------------------------------------------------------- */
#footer ul.socialLink { list-style:none; margin-left:0; text-align:center; }
#footer ul.socialLink li { padding:1rem 2rem 1rem 1rem; display:inline-block; text-align:center; }
#footer ul.socialLink li { padding-right:0; }

#footer .socialLink li a { text-align:center;}
#footer .socialLink a,
#footer .socialLink a:visited { color:#fff; }


/* ------------------------------------------------------------------- 
 * responsive:
 * footer
 * ------------------------------------------------------------------- */
@media only screen and (max-width:767px) {
	#go-top {
		bottom: 0;
		right: 0;
	}

}