@charset "utf-8";
/* color */
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_gray{color: #ccc}
.txt_color1{color: #000} /* メインカラー */
.txt_color2{color: #d3d3d3} /* サブカラー */
.txt_color3{color: #191970} /* アクセントカラー1 */
.txt_color4{color: #F2F2F2} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: #333333} /* 黒背景 */
.bg_gray{background-color: #ccc}
.bg_color1{background-color: #000} /* メインカラー */
.bg_color2{background-color: #d3d3d3} /* サブカラー */
.bg_color3{background-color: #191970} /* アクセントカラー1 */
.bg_color4{background-color: #F2F2F2} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_white{border-color: white}
.border_black{border-color: #333333}
.border_gray{border-color: #ccc}
.border_color1{border-color: #000}
.border_color2{border-color: #d3d3d3}
.border_color3{border-color: #191970}
.border_color4{border-color: #F2F2F2}

/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_gray:hover{color: #ccc}
.hvr_txt_color1:hover{color: #000} /* メインカラー */
.hvr_txt_color2:hover{color: #d3d3d3} /* サブカラー */
.hvr_txt_color3:hover{color: #191970} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #F2F2F2} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: #333333} /* 黒背景 */
.hvr_bg_gray:hover{background-color: #ccc}
.hvr_bg_color1:hover{background-color: #000} /* メインカラー */
.hvr_bg_color2:hover{background-color: #d3d3d3} /* サブカラー */
.hvr_bg_color3:hover{background-color: #191970} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #F2F2F2} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_white:hover{border-color: white}
.hvr_border_black:hover{border-color: #333333}
.hvr_border_gray:hover{border-color: #ccc}
.hvr_border_color1:hover{border-color: #000}
.hvr_border_color2:hover{border-color: #d3d3d3}
.hvr_border_color3:hover{border-color: #191970}
.hvr_border_color4:hover{border-color: #F2F2F2}

.linkStyle {
	color: #333333
}
.linkStyle:hover {
	opacity: 0.7;transition: all 0.3s;
}
body {
	line-height: 1.5;
}
#loader img {
	width:50%;
	max-width: 350px;
}
#logo a {
	width:250px;
	padding: 20px;
	padding-right: 30px;
	padding-left: 30px;
}
.catch {
	z-index: 1;
	animation: catch 3s ease;
}
@keyframes catch {
	0% {opacity: 0;}
	70%{opacity: 0; top:55%;}
	100% {opacity: 1; top:50%;}
}
.main_txt_wrap {
    display: none;
}
.main_txt {
    display: none;
}
.intro_wrap {
	padding: 50px;
	border:25px solid #d3d3d3;
}
#contents2 .con2_box {
	position: relative;
	z-index: 0;
}
#contents2 .con2_box::before {
	position: absolute;
	content: '';
	z-index: -1;
	background: #000;
	height: calc( 100% - 100px);
	width: calc( 100% - 50px);
	right: 0;
	top:50%;
	transform: translate(0%,-50%);
}
#contact_bt {
	bottom: 0;
    right: 0px;
    width: 600px;
	z-index: 1;
}
#contact_bt a {
	display: inline-block;
    width: 49%;
    margin: 0 0.5%;
}
#copyright {
	margin-bottom: 60px;
}
.youtube_box{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube_box iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.intro_wrap {
	padding: 30px;
	border:15px solid #f2f2f2;
}
#contents2 .con2_box::before {
	height: calc( 100% - 50px);
	width: calc( 100% - 25px);
}
#contact_bt {
    width: 100%;
}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#logo a {
	width:155px;
	padding: 20px;
	padding-right: 5px;
	padding-left: 5px;
}
#logo a img {
	width:100%!important;
}
.intro_wrap {
	padding: 30px 15px;
	border:transparent;
	border-top:30px solid #f2f2f2;
	border-bottom:30px solid #f2f2f2;
}
#contact_bt a {
    width: 100%;
    display: block;
    margin: 0;
}
#copyright {
	margin-bottom: 150px;
}
}

@media all and (-ms-high-contrast:none){
}