﻿@charset "utf-8";
/* color */
body,.txt_color_nomal{color: #181818;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #00B88E} /* メインカラー */
.txt_color2{color: #FFF9F3} /* サブカラー */
.txt_color3{color: #004391} /* アクセントカラー1 */
.txt_color4{color: #f0f0f0} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #00B88E} /* メインカラー */
.bg_color2{background-color: #FFF9F3} /* サブカラー */
.bg_color3{background-color: #004391} /* アクセントカラー1 */
.bg_color4{background-color: #f0f0f0} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #00B88E}
.border_color2{border-color: #FFF9F3}
.border_color3{border-color: #004391}
.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: #00B88E} /* メインカラー */
.hvr_txt_color2:hover{color: #FFF9F3} /* サブカラー */
.hvr_txt_color3:hover{color: #004391} /* アクセントカラー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: #00B88E} /* メインカラー */
.hvr_bg_color2:hover{background-color: #FFF9F3} /* サブカラー */
.hvr_bg_color3:hover{background-color: #004391} /* アクセントカラー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: #00B88E}
.hvr_border_color2:hover{border-color: #FFF9F3}
.hvr_border_color3:hover{border-color: #004391}
.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: #00B88E!important;
}
#logo {
    width: 170px!important;
}
#header {
    background-color: rgba(0,67,145,0.5);
}
#header_contact a.btn_back {
    height: 81px;
}
.catch_pc {
	top:55%;
	z-index: 2;
	width:50%;
	max-width: 500px;
}
.catch_pc {
	animation: catch_pc 3s ease;
}

@keyframes catch_pc {
0%   { transform:translate(-50%, -150%);  opacity: 0;}
  20% { transform:translate(-50%, -50%);}
  30% { transform:translate(-50%, -60%);}
  50% { transform:translate(-50%, -50%);}
  60% { transform:translate(-50%, -53%); opacity: 1;}
  80% { transform:translate(-50%, -50%);}
  90% { transform:translate(-50%, -51%);}
  100% { transform:translate(-50%, -50%); opacity: 1;}
}
#pc_nav li a span {
	color:#fff;
}
.top_wrap header {
	margin-bottom: 0px!important;
}
.top_wrap .top_main {
	background: url(./Dup/img/copy.png) repeat-x;
    background-size: 1000px;
    background-position: 0 0;
    -webkit-animation: copy 30s linear infinite;
    animation: copy 50s linear infinite;
	padding-top: 180px;
}
@-webkit-keyframes copy {
    from {background-position: 0 0;}
    to {background-position: -1000px 0;}
}
@keyframes copy {
    from {background-position: 0 0;}
    to {background-position: -1000px 0;}
}
@keyframes copyIe {
    from {background-position: 0 -180px;}
    to {background-position: -1000px -180px;}
}
#top_message {
	position: relative;
	background-color: #fff;
	background-image: url("./Dup/img/bg_item.png");
	background-repeat: repeat-x;
	background-position: left 0 bottom 0;
	background-size: 650px;
	-webkit-animation: copy2 30s linear infinite;
    animation: copy2 30s linear infinite;
	padding-bottom: 120px;
}
@-webkit-keyframes copy2 {
    from {background-position: left 0 bottom 0;}
    to {background-position: left 650px bottom 0;}
}
@keyframes copy2 {
    from {background-position: left 0 bottom 0;}
    to {background-position: left 650px bottom 0;}
}
@keyframes copy2Ie {
    from {background-position: left 0 bottom -150px;}
    to {background-position: left -650px bottom -150px;}
}
/*
#top_message .bg_town {
	position: absolute;
	transform: translate(-50%,0);
	bottom:-154px;
	left:50%;
	width: 150%;
	max-width: 1500px;
}*/
#top_contents1 {
	background-color: #004391;
}
#top_contents1 div span.after {
    left: -25%!important;
}
#top_contents1 h3::before,
#top_contents2 h3::before{
    z-index: -1;
}
#footer_contact {
    background-position: bottom;
}
#logo2 {
	width:200px!important;
}
@media (max-width:768px){
#header {
    background-color: rgba(0,67,145,0.8);
}
#logo {
    width: 290px;
}
#toggle span {
    background-color: #fff;
}
.catch {
	width:200px;
	top:58%;
}
#top_message .bg_town {
	bottom:-103px;
	width: 190%;
}
}

@media (max-width:667px){
#logo {
    width: 200px;
	margin: 0 auto 0 10px!important;
}
#toggle {
    top:24px;
}
.catch {
	width:150px;
	top:60%;
}
#top_message .bg_town {
	width: 300%;
}
}
@media all and (-ms-high-contrast:none){
#cms_5-a .cate .cate_title { 
    padding-top: 6px;
}
}
    
}
@supports (-ms-ime-align:auto) {}