@charset "utf-8";
/* General Settings
================================================== */
html {
	*overflow-x: hidden;
}
.fLeft {
	float: left;
}
.fRight {
	float: right;
}
a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	line-height: 1px;
	transition: .3s;
}
.forPc {
	display: block;
}
.forMobile {
	display: none;
}
@media screen and (max-width: 600px) {
	.forPc {
		display: none;
	}
	.forMobile {
		display: block;
	}
}
/* ------ webfont ------ */
/* 日本語フォント */
body {
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 160%;
	color: #222;
	text-align: left;
	-webkit-text-size-adjust: none;
}
/* 指定英字フォント */
.webfontL {
	font-family: 'Roboto', sans-serif;!important;
	font-weight: bold;
}
.webfontS {
	font-family: 'Roboto', sans-serif;!important;
	font-weight: normal;
}
/* ------ ライン ------ */
/* leftLine */
.leftLine {
	line-height: 100%;
	display: flex;
	align-items: center;
}
.leftLine:after {
	border-top: 1px solid;
	content: "";
	flex-grow: 1;
	margin-left: 2%;
}
/* body */
body {}

/* headLogo
================================================== */
#headLogo{
	position: fixed;
	z-index: 100;
	top: 20px;
	left: 5%;
	width: 40%;
}
@media screen and (max-width: 600px) {
	#headLogo{
		width: 60%;
	}
}

/* newsArea
================================================== */
/* newsArea */
#newsArea {
	padding: 0 0 0 0;
}
@media screen and (max-width: 1000px) {
	#newsArea {
		padding: 0 0 5% 0;
	}
}
@media screen and (max-width: 600px) {
	#newsArea {
		width: 100%;
		margin: 0 auto;
	}
}
/* newsBox */
.newsBox {
	display: inline-block;
	vertical-align: top;
	margin: 2%;
	width: 20.5%;
}
@media screen and (max-width: 800px) {
	.newsBox {
		margin: 3.5%;
		width: 42%;
	}
}
@media screen and (max-width: 600px) {
	.newsBox {
		display: inherit;
		margin: 5% 0 0;
		width: 100%;
	}
}
/* newsBox linkBox */
.newsBox .linkBox {
    position: relative;
    z-index: 10;
}
.newsBox .linkBox a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 11;
}
.newsBox .zoomBox {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.newsBox .zoomBox:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.newsBox h3 {
	font-size: 100%;
}
@media screen and (max-width: 600px) {
	.newsBox h3 {
		margin: 2% 0;
	}
}
/* categoryName */
.categoryName {
	font-size: 80%;
	line-height: 100%;
	background-color: #fff;
	text-align: center;
	font-weight: bold;
	margin-bottom: 2%;
	padding: 2%;
	border-radius: 2px; 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
@media screen and (max-width: 600px) {
	.categoryName {
		font-size: 70%;
		padding: 1%;
		border-radius: 2px; 
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
	}
}
.newsLead {
	font-size: 80%;
}
/* newsPhoto */
@media screen and (max-width: 600px) {
	.newsPhoto {
		float: left;
		width: 30%;
	}
}
.newsPhoto img{
	border-radius: 2px; 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
/* newsTxt */
@media screen and (max-width: 600px) {
	.newsTxt {
		float: right;
		width: 65%;
	}
}
.newsTxt .newsDay{
	font-size: 60%;
	font-weight: bold;
}
.newsTxt h3{
	font-weight: bold;
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 600px) {
	.newsTxt h3{
		font-size: 3.6vw;
	}
}

/* btnMenuBox
================================================== */
/* btnMenuBox */
.btnMenuBox {
	position: fixed;
	z-index: 1000;
	display: block;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
}
/* btnMenu */
.btnMenu {
	text-align: center;
}
.btnMenu p a{
	border-top: #fff solid 1px;
	font-size: 140%;
	line-height: 60px;
	color: #fff;
	display: block;
	background: linear-gradient(-45deg,#000 25%, #000 25%,#222 50%, #000 50%,#000 75%, #000 75%,#222);
	background: linear-gradient(-45deg,#000 25%, #000 25%,#222 50%, #000 50%,#000 75%, #000 75%,#222);
	background-size: 300px 300px;
	animation: anime_stripe_1 10s infinite linear;
}
@keyframes anime_stripe_1 {
	0% {  background-position-x: 0;}
	100% {  background-position-x: -300px;}
}
.btnMenu p a:hover{
	animation: anime_stripe_1 1s infinite linear;
}
/* popup
================================================== */
.lock {
    overflow:hidden;
}
.modal-content {
    position: relative;
    display: none;
	width: 90%;
	max-width: 1000px;
	margin: 0;
    max-height: 70%;
    padding: 20px;
    overflow:auto;
	border-radius: 2px; 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
	box-shadow: 0 0 8px #ccc;
	background-color: #fff;
s}
@media (max-width: 500px) {
	.modal-content {
		width:80%;
		margin:0;
	}
}
.modal-overlay {
    z-index:10500;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(255,255,255,0.9);
}
.modal-wrap {
    z-index:10600;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
}
.modal-open {
}
.modal-open:hover {
    cursor:pointer;
}
/* modalBox
================================================== */
.modalBox {
	position: relative;
	height: 100%;
}
/* logoBox */
.logoBox {
	width: 80%;
	margin: 4% auto 0;
}
@media (max-width: 600px) {
	.logoBox {
		width: 90%;
		margin: 0 auto;
	}
}
/* navArea */
.navArea ul{
	padding-bottom: 3%;
}
.navArea li{
	list-style: none;
	text-align: center;
	font-weight: bold;
	font-size: 60px;
	line-height: 160%;
	border-bottom: 2px solid;
}
@media (max-width: 1000px) {
	.navArea li{
		font-size: 6vw;
	}
}
@media (max-width: 600px) {
	.navArea li{
		font-size: 6vw;
		line-height: 220%;
	}
}
.navArea li a{
	display: block;
	color: #222;
}
.navArea li a:hover{
	color: #666;
	transition: .3s;
}
.navTel {
	text-align: center;
	padding: 3% 0;
    font-size: 40px;
	line-height: 120%;
}
@media (max-width: 1000px) {
	.navTel{
		font-size: 5vw;
	}
}
.navTel a{
	color: #222;
}
/* contentsArea */
.contentsArea {
	max-width: 900px;
	margin: 0 auto;
	padding: 3% 0;
}
.contentsArea h3{
	border-bottom: solid 1px;
}
.modalTxt p{
	padding-top: 2%;
}
/* closeBox */
.closeBox {
	position: fixed;
	z-index: 10700;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
}
.closeBtn {
	height: 60px;
	text-align: center;
}
.closeBtn a{
	font-size: 140%;
	line-height: 60px;
	color: #fff;
	display: block;
	background: linear-gradient(-45deg,#000 25%, #000 25%,#222 50%, #000 50%,#000 75%, #000 75%,#222);
	background: linear-gradient(-45deg,#000 25%, #000 25%,#222 50%, #000 50%,#000 75%, #000 75%,#222);
	background-size: 300px 300px;
	animation: anime_stripe_1 10s infinite linear;
}
@keyframes anime_stripe_1 {
	0% {  background-position-x: 0;}
	100% {  background-position-x: -300px;}
}
.closeBtn a:hover{
	animation: anime_stripe_1 1s infinite linear;
	cursor: pointer;
}

/* btnArea
================================================== */
/* btnArea */
.btnArea {
	padding: 2% 2.5% 0;
}
@media (max-width: 600px) {
	.btnArea {
		padding: 2% 0 0;
	}
}
/* btn */
.btn {
	position: relative;
	display: inline-block;
	border: solid 1px #000;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
    border-radius: 100px;
	line-height: 100%;
}
.btn:hover {
	border: solid 1px #000;
	background-color: #000;
	transition: .3S;
	-webkit-transition: .3s;
}
.btn a{
	padding: 10px 40px 10px 55px;
	color: #000;
	display: block;
}
.btn:hover a{
	transition: .3S;
	-webkit-transition: .3s;
	color: #fff;
}
.btn .btn-border:before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	-webkit-transition: .3s;
	transition: .3s;
	background: #000;
	font-family: 'Font Awesome 5 Free';
	line-height: 26px;
	font-size: 70%;
	width: 26px;
	height: 26px;
	color: #fff;
	border-radius: 50%;
	content: '\f061';
	-webkit-transform: translateX(6px) translateY(5px);
	transform: translateX(6px) translateY(5px);
	text-align: center;
}
.btn:hover .btn-border:before {
	-webkit-transform: translateX(23px) translateY(5px);
	transform: translateX(23px) translateY(5px);
	background-color: #fff;
	color: #000;
}

/* navArea
================================================== */
#navArea {
	padding: 3% 5%;
	background-color: #eee;
}
/* navTit */
#navArea .navTit .leftLine {
	font-size: 4vw;
}
#navArea .navTit .leftLine a{
	color: #000;
}
#navArea .navTit .leftLine a:hover{
	color: #666;
	transition: .3s;
}
#navArea p{
	float: left;
	width: 30%;
	margin: 0 1.5%;
	text-align: center;
	font-size: 2.5vw;
	line-height: 100%;
}
@media screen and (max-width: 600px) {
	#navArea p{
		font-size: 3vw;
	}
}
#navArea p a{
	display: block;
	padding: 3% 0 3.5%;
	color: #fff;
	border-radius: 2px; 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
	box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
	background-image: repeating-linear-gradient(45deg, #222 0, #222 1px, #000400 0, #000400 50%);
	background-size: 20px 20px;
}
#navArea p a:hover{
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	transition: .3s;
}
@media screen and (max-width: 600px) {
	#navArea p a{
		padding: 10% 0 11%;
	}
}


/* footArea
================================================== */
#footArea {
	padding: 5% 0;
	text-align: center;
	background-color: #000400;
	background-image: repeating-linear-gradient(45deg, #222 0, #222 1px, #000400 0, #000400 50%);
	background-size: 20px 20px;
}
@media screen and (max-width: 600px) {
	#footArea {
		padding: 5% 0 10%;
	}
}

/* licksFoot
================================================== */
#licksFoot {
	padding: 0 5%;
}

/* footEnd
================================================== */
#footEnd {
	position: relative;
}

/* footLogo
================================================== */
#footLogo h2 a{
	margin: 0;
    font-size: 4vw;
    font-weight: bold;
	line-height: 100%;
	color: #fff;
}
@media screen and (max-width: 600px) {
	#footLogo h2{
	}
}

/* footTxt
================================================== */
#footTxt {
	margin: 0;
    font-size: 2vw;
	line-height: 140%;
	color: #fff;
	padding-bottom: 2%;
}
@media screen and (max-width: 600px) {
	#footTxt {
		font-size: 4vw;
	}
}

/* telNo
================================================== */
#telNo {
}
#telNo p{
    font-size: 3.1vw;
	color: #fff;
}
#telNo p a{
	color: #fff;
}
@media screen and (max-width: 600px) {
	#telNo {
	}
	#telNo p{
		font-size: 6vw;
	}
	#telNo p a{
	}
}

/* topcrArea
================================================== */
/* topcrArea */
#topcrArea {
	position: relative;
	z-index: 10;
	padding: 8px 0 70px;
	background-color: #222;
}
@media screen and (max-width: 600px) {
	#topcrArea {
		padding: 8px 0 114px;
	}
}
#topcrArea p{
	text-align: center;
	font-size: 60%!important;
	color: #aaa;
}
@media screen and (max-width: 800px) {
	#topcrArea p{
		font-size: 60%;
	}
}
/* crArea
================================================== */
/* crArea */
#crArea {
	position: relative;
	z-index: 10;
	padding: 8px 0 70px;
	background-color: #222;
}
@media screen and (max-width: 600px) {
	#crArea {
		padding: 8px 0 70px;
	}
}
#crArea p{
	text-align: center;
	font-size: 60%!important;
	color: #aaa;
}
@media screen and (max-width: 800px) {
	#crArea p{
		font-size: 60%;
	}
}
/* backtotop
================================================== */
/* backtotop */
.backtotop {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 1100;
	display: none;
}
.hovicon {
	display: inline-block;
	font-size: 80%;
	line-height: 60px;
	cursor: pointer;
	width: 60px;
	height: 60px;
	text-align: center;
	position: relative;
	text-decoration: none;
	z-index: 1;
	color: #fff;
	border-left: #fff solid 1px;
}
.hovicon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.hovicon:before {
	speak: none;
	font-size: 140%;
	line-height: 60px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	display: block;
}
/* Effect 1 */
.hovicon.effect-1 {
	background: #000;
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}
.hovicon.effect-1:after {
	top: -7px;
	left: -7px;
	padding: 7px;
	box-shadow: 0 0 0 4px #fff;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-webkit-transform: scale(.8);
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	-moz-transform: scale(.8);
	-ms-transform: scale(.8);
	transition: transform 0.2s, opacity 0.2s;
	transform: scale(.8);
	opacity: 0;
}
/* Effect 1a */
.hovicon.effect-1.sub-a:hover {
	background: #000;
	color: #fff;
}
.hovicon.effect-1.sub-a:hover p {
	color: #fff;
}
.hovicon.effect-1.sub-a:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

/* covid-19
================================================== */
/* covid-19 */
.covid-19 {
	position: fixed;
	top: 20px;
	right: -3px;
	z-index: 1090;
	font-size: 70%;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
}
.covid-19 br{
	display: none;
}
.covid-19 a{
	display: block;
	background-color: #000;
	color: #fff;
	border-radius: 2px; 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
	padding: 20px 13px 20px 10px;
	border: solid 1px #666;
}
.covid-19 a:hover{
	background-color: #444;
	border-radius: 2px; 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
@media screen and (max-width: 600px) {
	.covid-19 {
		position: fixed;
		width: 100%;
		text-align: center;
		top: inherit;
		right: 0;
		bottom: 61px;
		font-size: 2.4vw;
		letter-spacing: 0.1em;
		-ms-writing-mode: inherit;
		writing-mode: inherit;
		box-shadow: inherit;
	}
	.covid-19 a{
		line-height: 42px;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		padding: 0;
		border-top: solid 1px #fff;
		border-bottom: none;
		border-left: none;
		border-right: none;
	}
	.covid-19 a:hover{
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}
}