@charset "utf-8";
/* color */
body,.txt_color_nomal{color: #181818;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #C62A88} /* メインカラー */
.txt_color2{color: #F5FFFA} /* サブカラー */
.txt_color3{color: #03C4A1} /* アクセントカラー1 */
.txt_color4{color: #f0f0f0} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #C62A88} /* メインカラー */
.bg_color2{background-color: #F5FFFA} /* サブカラー */
.bg_color3{background-color: #03C4A1} /* アクセントカラー1 */
.bg_color4{background-color: #f0f0f0} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #C62A88}
.border_color2{border-color: #F5FFFA}
.border_color3{border-color: #03C4A1}
.border_color4{border-color: #f0f0f0}

/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #181818;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #C62A88} /* メインカラー */
.hvr_txt_color2:hover{color: #F5FFFA} /* サブカラー */
.hvr_txt_color3:hover{color: #03C4A1} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #f0f0f0} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #C62A88} /* メインカラー */
.hvr_bg_color2:hover{background-color: #F5FFFA} /* サブカラー */
.hvr_bg_color3:hover{background-color: #03C4A1} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #f0f0f0} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #C62A88}
.hvr_border_color2:hover{border-color: #F5FFFA}
.hvr_border_color3:hover{border-color: #03C4A1}
.hvr_border_color4:hover{border-color: #f0f0f0}

.linkStyle { color:#181818;
}
.linkStyle:hover { opacity:0.7;transition: all 0.3s;
}
.l-mask, .l-mask--gr, .l-mask--top {
    background-color: #C62A88!important;
}
#logo {
    width: 110px!important;
}
#header {
    background-color: rgba(0,0,0,0.2);
}
/*動画*/
header#kore {
    max-height: 55vw;/*動画の高さによって変更*/
    overflow: hidden;
}
header span.before {
    height: 100%!important;
    left:-350px;
}
header span.after {
    height: 100%!important;
    right:-350px;
}

.catch_pc {
	top:55%;
	z-index: 2;
	width:50%;
	max-width: 600px;
}
#pc_nav li a span {
	color:#fff;
}
#top_message {
	position: relative;
}
#top_message .bg_town {
	position: absolute;
	transform: translate(-50%,0);
	bottom:-154px;
	left:50%;
	width: 150%;
	max-width: 1500px;
}
#top_contents1 {
	background-color: #03C4A1;
}
#top_contents1 div span.after {
    left: -25%!important;
}
#top_contents1 h3::before, #top_contents2 h3::before {
    z-index:-1;
}
#footer_contact {
    background-position: bottom;
}
#footer_contact h3 {
    text-shadow: 2px 2px 2px #333;
}
#page_title h2 {
    color:#333;
}
#filter_white {
    background-color: rgba(228, 243, 247, 0.7);
}
.pager li a {
    padding:20px;
}

@media (max-width:768px){
#logo {
    width: 290px!important;
}
#header {
    background-color: rgba(245,255,250,0.7);
}
header#kore {
    max-height: 70vw;/*動画の高さによって変更*/
}
#video {
	padding-top: 84px;
}
header span.before {
    top:84px!important;
    left:-200px;
}
header span.after {
    right:-200px;
}
.catch {
	width:200px;
	top:58%;
}
#top_message .bg_town {
	bottom:-103px;
	width: 190%;
}
}

@media (max-width:667px){
#logo {
    width: 200px!important;
	margin: 0 auto 0 10px!important;
}
header#kore {
    max-height: 88vw;/*動画の高さによって変更*/
}
#video {
	padding-top: 66px;
}
header span.before {
    left:-90px!important;
	top:66px!important;
}
header span.after {
    right:-90px!important;
	top:-8px!important;
}
.catch {
	width:150px;
	top:60%;
}
#top_message h2 {
	font-size:20px;
}
#top_message .bg_town {
	width: 300%;
}
}
@media all and (-ms-high-contrast:none){}
@supports (-ms-ime-align:auto) {}