@charset "utf-8";

*, *::before, *::after {
    box-sizing: border-box;
}

/*---------------------------------------------
	clearfix
  ---------------------------------------------*/
.clearfix {  display: inline-block; }
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html .clearfix { height: 1px; }
.clearfix { display: block; }

/* 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!important;
	line-height: 180%;
	color: #222;
	text-align: left;
	-webkit-text-size-adjust: none;
}
/* 指定英字フォント */
.webfontL {
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
}
.webfontS {
	font-family: 'Abril Fatface', cursive;
}
/* ------ ライン ------ */
/* leftLine */
.leftLine {
	line-height: 100%;
	display: flex;
	align-items: center;
}
.leftLine:after {
	border-top: 1px solid;
	content: "";
	flex-grow: 1;
	margin-left: 2%;
}

/* ------ アニメーション ------ */
/* fadeIn */
.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}
/* fadeIn_up */
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 10%);
  transition: 1.5s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
/* fadeIn_left */
.fadeIn_left {
  opacity: 0;
  transform: translate(-10%, 0);
  transition: 3s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
/* fadeIn_right */
.fadeIn_right {
  opacity: 0;
  transform: translate(10%, 0);
  transition: 3s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* body */
body {}

/* 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: 1.9%;
	width: 29%;
}
@media screen and (max-width: 1300px) {
	.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%;
	line-height: 160%;
}
/* 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;
}
@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%;
}
/* title-border-bold */
.title-border-bold {
	font-size: 160%;
	display: flex;
	align-items: center;
}
@media (max-width: 1000px) {
	.title-border-bold {
		font-size: 4vw;
	}
}
.title-border-bold:before,
.title-border-bold:after {
	border-top: 4px solid;
	content: "";
	flex-grow: 1;
}
.title-border-bold:before {
	margin-right: 15px;
}
.title-border-bold:after {
	margin-left: 15px;
}
.title-border-bold a{
	color: #222;
}
.title-border-bold a:hover{
	color: #666;
	transition: .3s;
}
/* navArea */
.navArea ul{
}
.navArea li{
	list-style: none;
	text-align: center;
	font-size: 60px;
	line-height: 100%;
	padding-top: 3%;
}
@media (max-width: 1000px) {
	.navArea li{
		font-size: 6vw;
	}
}
@media (max-width: 600px) {
	.navArea li{
		font-size: 7vw;
		padding-top: 5%;
	}
}
.navArea li a{
	display: block;
	color: #222;
}
.navArea li a:hover{
	color: #666;
	transition: .3s;
}
/* snsArea*/
.snsArea {
	padding: 3% 40%;
}
@media (max-width: 600px) {
	.snsArea {
		padding: 8% 20% 6%;
	}
}
.snsArea p{
	float: left;
	width: 33.3%;
	padding: 0 6%;
}
/* 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% 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;
	text-decoration: none;
}
.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;
}

/* footArea
================================================== */
#footArea {
	position: relative;
	padding: 0;
	z-index: 999;
	background-color: #fff;
}
.footLogo {
	position: absolute;
	z-index: 2;
	top: 40%;
	left: 0;
	width: 100%;
}
@media (max-width: 600px) {
	.footLogo {
		top: 26%;
	}
}
.footLogo h3{
	text-align: center;
	color: #fff;
	font-size: 300%;
}
@media screen and (max-width: 1400px) {
	.footLogo h3{
		font-size: 3vw;
	}
}
@media screen and (max-width: 600px) {
	.footLogo h3{
		font-size: 160%;
	}
}
.footLogo h3 a{
	color: #fff;
	text-decoration: none;
}
.footLogo h3 a:hover{
	color: #000;
	transition: 1s;
}
.carouselBox {
	position: relative;
	z-index: 1;
}
.footSns {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 0;
	width: 100%;
}
@media (max-width: 600px) {
	.footSns {
		top: 48%;
	}
}
.footSns .footSnsBox {
	width: 100%;
	max-width: 200px;
	margin: 0 auto;
}
@media (max-width: 600px) {
	.footSns .footSnsBox {
		max-width: 160px;
	}
}
.footSns .footSnsBox .snsArea {
	padding: 3% 0;
}
@media (max-width: 600px) {
	.footSns .footSnsBox .snsArea {
		padding: 3% 0;
	}
}
.footSns .footSnsBox .snsArea p{
	float: left;
	width: 33.3%;
	padding: 0 6%;
}
.footname {
	color: #fff;
	font-size: 80%;
	text-align: center;
	padding-top: 8%;
}
@media (max-width: 1000px) {
	.footname {
		font-size: 1.4vw;
	}
}
@media (max-width: 600px) {
	.footname {
		font-size: 60%;
	}
}

/* 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;
}

/* shopBtn
================================================== */
/* shopBtn */
.shopBtn {
	position: fixed;
	top: 20px;
	right: -3px;
	z-index: 1090;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
}
.shopBtn a{
	display: block;
	background-color: #000;
	color: #fff;
	border-radius: 2px; 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
	padding: 40px 13px 40px 10px;
	border: solid 1px #666;
}
.shopBtn a:hover{
	color: #fff;
	background-color: #444;
	border-radius: 2px; 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
@media screen and (max-width: 600px) {
	.shopBtn {
		position: fixed;
		width: 100%;
		text-align: center;
		top: inherit;
		right: 0;
		bottom: 61px;
		font-size: 100%;
		letter-spacing: 0.1em;
		-ms-writing-mode: inherit;
		writing-mode: inherit;
		box-shadow: inherit;
	}
	.shopBtn 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;
	}
	.shopBtn a:hover{
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}
}