@charset "UTF-8";

body{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 1em;
	line-height: 1.6em;
	color: #222;
}


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

.amaneko::before {
	content: "\A" ;
	white-space: pre ;
}

a, a:link{
	color: #222;
	text-decoration: none;
	transition: 0.5s ease-in-out;
}
a:hover{
	/*background-color: #fff100;*/
	cursor: pointer;
}
a:visited{
	color: #000;
}
img{
	max-width: 100%;
	height: auto;
}

/* __ Header __ */

header{
	padding: 1em 1em 0;
	display: flex;
	flex-direction: column;
	align-items: center;/**/
	/*border-bottom: #928147 solid 1px;*/
	background-color: #FFE4E1;
}

/*.logo{
	margin: 0.5em 0;
	width: 60px;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	background-color: #000;
	border-radius: 50%;
}*/

h1.logo{
}

h1.logo a{
	color: #fff;
	text-align: center;
	background-color: transparent;
}

h1.logo a:hover{
	color: #fff100;
	background-color: transparent;
}

/*====================1st plan>>>=================================*/

.gnav{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;/**/
	/*margin-top: 1em;*/
}

.gnav li{
	/*border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #FFFCDB;*/
	margin-top: 1rem;
}

.gnav li a{
	padding: 16px 32px 10px;
	display: block;
	font-size: 1.4rem;
}

.gnav >:first-child{
	order: -1;
}

.gnav li.home{
}

.gnav .home{
	background-image: url("../images/cat_home_H36.png");
	background-position: top 10%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
}

.gnav .home:hover{
	background-image: url("../images/cat_home_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}

.gnav .goods{
	background-image: url("../images/cat_goods_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	/*background-color: transparent;*/
}

.gnav .goods:hover{
	background-image: url("../images/signNikukyuOrange_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}

.gnav .shop{
	background-image: url("../images/cat_trade_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
}

.gnav .shop:hover{
	background-image: url("../images/signNewNikukyuGreen_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}

.gnav .amada{
	background-image: url("../images/cat_amada_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	/*background-color: transparent;*/
}

.gnav .amada:hover{
	background-image: url("../images/signNewNikukyuPurple_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}

.gnav .company{
	background-image: url("../images/cat_company_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	/*background-color: transparent;*/
}

.gnav .company:hover{
	background-image: url("../images/signNewNikukyuTurq_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}

.gnav .ask{
	background-image: url("../images/cat_ask_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	/*background-color: transparent;*/
}

.gnav .ask:hover{
	background-image: url("../images/signNewNikukyuBrown_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}
/*==================== <<<1st Plan =================================*/


/*==================== 2nd plan>>> =================================*/
.gnav2 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;/**/
	padding-top: 1.5em;
}

.gnav2 li{
	margin-top: 1rem;
}

.gnav2 li{
	padding: 2.1em 10px 0 10px;
}

.gnav2 li a{
	padding: 16px 2em 0;
	display: block;
	font-size: 1.4rem;
}

.gnav2 >:first-child{
	order: -1;
}

.gnav2 .part2{
	border: #fff solid 1px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.gnav2 .home2{
	background-image: url("../images/catfaceH36.png");
	background-position: top 10%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
	/*background-color: transparent;*/
}

.gnav2 .home2:hover{
	background-image: url("../images/cat_home_H36.png");
	background-position: bottom left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}

.gnav2 .goods2{
	background-image: url("../images/cat_goods_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	/*background-color: transparent;*/
}

.gnav2 .goods2:hover{
	background-image: url("../images/signNikukyuOrange_H36.png");
	background-position: bottom left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}

.gnav2 .shop2{
	background-image: url("../images/cat_trade_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	/*background-color: transparent;*/
}

.gnav2 .shop2:hover{
	background-image: url("../images/signNewNikukyuGreen_H36.png");
	background-position: bottom left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}


.gnav2 .amada2{
	background-image: url("../images/cat_amada_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	/*background-color: transparent;*/
}

.gnav2 .amada2:hover{
	background-image: url("../images/signNewNikukyuPurple_H36.png");
	background-position: bottom left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}


.gnav2 .company2{
	background-image: url("../images/cat_company_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	/*background-color: transparent;*/
}

.gnav2 .company2:hover{
	background-image: url("../images/signNewNikukyuTurq_H36.png");
	background-position: bottom left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}

.gnav2 .ask2{
	background-image: url("../images/cat_ask_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	/*background-color: transparent;*/
}

.gnav2 .ask2:hover{
	background-image: url("../images/signNewNikukyuBrown_H36.png");
	background-position: bottom left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: 0.5s ease-in-out;
}

/*==================== <<<2nd Plan =================================*/


/*==================== 3rd Plan>>> =================================*/

.gnav3 {
	display: flex;/**/
	flex-direction: column;
	justify-content: space-between;
	padding-top: 1em;
	background-color: #ffc0cb;
}

.gnav3 li{
	margin-top: 0.5em;
	padding: 1.2em 10px 0 10px;
	width: 100vw;
}

.gnav3 li a{
	padding: 6px 1em 0;
	display: block;
	font-size: 1.4rem;
}

.gnav3 >:first-child{
	order: -1;
}

.gnav3 .part3{
	text-align: center;
	padding: 0 4em;
	width: 100%;
}

.gnav3 .home3{
	background-image: url("../images/catfaceH36.png");
	background-position: top left 40%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
	border-bottom: #aaa solid 1px;
}

.gnav3 .home3:hover{
	background-image: url("../images/cat_home_H36.png");
	background-position: bottom left 40%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
}


.gnav3 .goods3{
	background-image: url("../images/cat_goods_H36.png");
	background-position: top left 40%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
	border-bottom: #aaa solid 1px;
}

.gnav3 .goods3:hover{
	background-image: url("../images/signNikukyuOrange_H36.png");
	background-position: bottom left 38%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
}


.gnav3 .shop3{
	background-image: url("../images/cat_trade_H36.png");
	background-position: top left 40%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
	border-bottom: #aaa solid 1px;
}

.gnav3 .shop3:hover{
	background-image: url("../images/signNewNikukyuGreen_H36.png");
	ackground-color: #F59B74;
	background-position: bottom left 38%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
}


.gnav3 .amada3{
	background-image: url("../images/cat_amada_H36.png");
	background-position: top left 40%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
	border-bottom: #aaa solid 1px;
}

.gnav3 .amada3:hover{
	background-image: url("../images/signNewNikukyuPurple_H36.png");
	ackground-color: #F59B74;
	background-position: bottom left 38%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
}

.gnav3 .company3{
	background-image: url("../images/cat_company_H36.png");
	background-position: top left 40%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
	border-bottom: #aaa solid 1px;
}

.gnav3 .company3:hover{
	background-image: url("../images/signNewNikukyuTurq_H36.png");
	ackground-color: #F59B74;
	background-position: bottom left 38%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
}


.gnav3 .ask3{
	background-image: url("../images/cat_ask_H36.png");
	background-position: top left 40%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
	border-bottom: #aaa solid 1px;
}

.gnav3 .ask3:hover{
	background-image: url("../images/signNewNikukyuBrown_H36.png");
	ackground-color: #F59B74;
	background-position: bottom left 38%;
	background-repeat: no-repeat;
	transition: 0.5s ease-in-out;
}
/*==================== <<<3rd Plan =================================*/


/*==================== Contents =================================*/

.conttainer{
	width: 100vw;
}

.container p:not(:last-child){
	margin-bottom: 1.5em;
}

.main, footer{
	padding: 5px;
}

.main{
	background-color: #FFE4E1;
}

.main p {
	border-radius: 1px solid #ddd;
	padding: 0.5rem 0.5rem 0 0.5rem;
}

.main h2 {
	font-size: 1.4rem;
}

.main .news{
		background-color: #FFF5EE;
		margin: 0 0 10px 0;
		padding: 1.2em;
		border-radius: 10px;
	}
	
.main .news p{
		border-bottom: 1px #70684C dotted;
	}


/*==================== sidebar =================================*/

.sidebar{
	background-color: #B0E0E6;
	padding: 4px;
	width: 97vw;
}

.sidebar-nav{
		margin-top: 4px;
}

.sidebar-nav h2{
	margin: 0.1rem;
	font-weight: 800;
}

.sidebar-nav p{
	margin: 0.1rem;
}

.sidebar-nav li a{
	display: block;
	width: 100%;
	border-bottom: 1px solid #ddd;
}

.sidebar-nav img{
	margin: 0.1rem;
	border-radius: 10px;
	transition:0.5s ease-in-out;
	}

.sidebar-nav img#mcal:hover{
	transform: scale(1.88);
	transform-origin: left;
	}

/*==================== Tiles All =================================*/

.tiles,.tiles1,.tiles2,.tiles3,.tiles4{
	margin-bottom: 1em;
}

.tiles,.tiles1,.tiles2,.tiles3,.tiles4 p{
	padding-bottom: 1em;
	border:  #D7D7D7 1px solid;
}

.tiles,.tiles1,.tiles2,.tiles3,.tiles4 li{
	margin-bottom: 1em;
	padding: 10px;/**/
	border: #D7D7D7 1px solid;
	border-radius: 10px;
	background-color: #fff;
}

.tiles,.tiles1,.tiles2,.tiles3,.tiles4 li img{
		border-radius: 10px;
		padding: 2px;
	}

/*==================== tiles 2 Column=================================*/

.tiles2 {
	margin-bottom: 1rem;
}

.tiles2 p{
	padding: 0.6rem;
	border:  #D7D7D7 1px solid;
}

.tiles2 li{
	margin-bottom: 1rem;
	padding: 0.25rem;/**/
	border: #D7D7D7 1px solid;
	border-radius: 10px;
	background-color: #fff;
}

.tiles2 li img{
		border-radius: 10px;
		padding: 0.25rem;
	}

/*==================== footer =================================*/

footer{
	text-align: center;
	background-color: #222;
	color: #fff;
}


/* Media queries
-------------------------------------------------------*/

@media screen and (min-width : 768px) { /* デスクトップ用CSS */

	/* __ Header __ */

header{
	}
	
.logo{
	margin: 0 auto;
	}
	
.gnav{
	display: flex;
	flex-direction: row;
	}
	
.gnav li{
	margin-right: 6px;
	}
	
.gnav li:last-child{
	margin-right: 0;
	}
	
		
.gnav a{
		/*padding: 10px 32px;*/
		display: block;
		font-size: 1.5rem;
	}
	
.gnav .home{
	background-image: url("../images/catfaceH36.png");
	background-repeat: no-repeat;
}

.gnav .home:hover{
	background-image: url("../images/cat_home_H36.png");
	background-position: top left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
}
	

	
.gnav2 .home{
	background-image: url("../images/catfaceH36.png");
	background-repeat: no-repeat;
}

.gnav2 .home:hover{
	background-image: url("../images/cat_home_H36.png");
	background-position: bottom left 10%;
	background-repeat: no-repeat;
	background-color: transparent;
}

	
	
.gnav3 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap:nowrap;/**/
	padding-top: 0.8em;
	width: 98vw;
	background-color: transparent;
}
	
.gnav3 .part3{
	border: #fff double 3px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom: none;
	padding: 0.2em 0.3em 0;
	background-color: #ffc0cb;
}
	
.gnav3 .part3:hover{
	background-color: transparent;
	border: #ffc0cb double 3px;
	border-bottom: none;
	}


.gnav3 li{
	padding: 36px 1em 0;
	width: 45%;
	background-color: transparent;
}
	

/*==================== Contents =================================*/

.container{
	display: flex;
	width: 100vw;
	}
	
.sidebar{
	width: 260px;
	}
	
.main, footer{
	padding: 5px 20px 5px 5px;
}
	
.main{
	flex: 1;
	order: 2;
	background-color: #FFE4E1;
	}
	
.main .news{
	background-color: #FFF5EE;
	margin: 0 0 10px 0;
	padding: 1em;
	border-radius: 10px;
	}
	
.main .news p{
	border-bottom: 1px #70684C dashed;
	}

/*==================== tiles 1 Column =================================*/

.tiles1{
	display: flex;
	flex-wrap: wrap;
	}
	
.tiles1 li{
	margin: 5px;
	width: calc( 100% - 10px);
	border: #D7D7D7 1px solid;
	border-radius: 10px;
	}
.tiles1 li img{
	border-radius: 10px;
	}
	
/*==================== tiles 2 Column =================================*/
	
.tiles2{
	display: flex;
	flex-wrap: wrap;
	}
	
.tiles2 li{
	margin: 5px;
	width: calc( 50% - 10px);
	border: #D7D7D7 1px solid;
	border-radius: 10px;
	padding: 2px;
	}
	
.tiles2 li img{
	border-radius: 10px;
	}

/*==================== tiles 3 Column =================================*/

.tiles3{
	display: flex;
	flex-wrap: wrap;
	}
	
.tiles3 li{
	margin: 5px;
	width: calc( 33.3% - 10px);
	border: #D7D7D7 1px solid;
	border-radius: 10px;
	}
	
.tiles3 li img{
	border-radius: 10px;
	}
	
/*==================== tiles 4 Column =================================*/

.tiles4{
	display: flex;
	flex-wrap: wrap;
	}
	
.tiles4 li{
	margin: 5px;
	width: calc( 25% - 10px);
	border: #D7D7D7 1px solid;
	border-radius: 10px;
	}
	
.tiles4 li img{
	border-radius: 10px;
	}

}