@charset "utf-8";

/* CSS Document */
body{
	margin: 0;
}
section{
	font-family: Shuei NijimiMin L, serif;
}
footer{
	font-family: A1 Gothic M, sans-serif;
}

p,
ul,
ol,
li,
dl,
dt,
dd{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
}

a{
	text-decoration: none;
	color: #000;
	transition: .3s;
}
a:hover{
	opacity: .7;
}

h1,
h2,
h3,
h4,
th{
	font-weight: normal;
	margin: 0;
}
	iframe{
		border: 0;
	}
img{
	width: 100%;
	vertical-align: bottom;
}

#firstview{
	width: 100%;
	height: 100vh;
	position: relative;
}
#firstview .shade{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.3);
}
#firstview a{
	display: block;
	position: absolute;
	width: 130px;
	bottom: 110px;
	left: calc(50% - 65px);
}
#firstview a:hover{
	transform: translateY(10px);
}
#firstview::after{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4vw;
	background: url("../images/fv_kazari_pc.png") no-repeat;
	background-size: contain;
	background-position: bottom;
}

main{
	opacity: 0;
	visibility: hidden;
	transition: 4s;
}
main.loaded{
	opacity: 1;
	visibility: visible;
}

.actn{
	opacity: 0;
	visibility: hidden;
	transform: translateY(40px);
	transition: 2s;
	}
.actn.visible{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

footer{
	background: url("../images/gara_sasa.png");
}
footer #navifooter{
	display: flex;
	justify-content: center;
	padding: 10px 0;
	background: #fff;
	margin-bottom: 40px;
}
footer #navifooter li{
	font-size: 1.1em;
	padding: 0 1em;
	border-left: solid 1px #002b68;
}
footer #navifooter li:first-child{
	border-left: none;
}
footer #navifooter li a{
	color: #002b68;
}
footer #shopinfo .name{
	font-size: 1.8em;
}
footer #shopinfo .address{
	font-size: 1.1em;
}
footer #shopinfo .address a{
	color: #fff;
}
footer #copuright{
	font-size: 1em;
	text-align: center;
	padding: 1em 0;
	color: #fff;
}


@media screen and (max-width: 567px){
html{
	font-size: 12px;
}

/**************** 以下、ハンバーガーボタンのスタイリング ****************/
button {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  border: 0;
  outline: 0;
  background: transparent;
  border-radius: 0;
  text-align: inherit;
}

button:hover {
  cursor: pointer;
}

.btn {
  /* ボタンの配置位置  */
  position: fixed;
  top: 16px;
  right: 16px;
  /* ボタンの大きさ  */
  width: 58px;
  height: 48px;
  /* バーガーの線をボタン範囲の中心に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 最前面に */
  z-index: 999;
}

/***** 真ん中のバーガー線 *****/
.btn-line {
  /* 線の長さと高さ */
  width: 100%;
  height: 4px;
  /* バーガー線の色 */
  background-color: #fff;
  /* バーガー線の位置基準として設定 */
  position: relative;
  transition: .2s;
	box-shadow: 0 0 8px gray;
}

/***** 上下のバーガー線 *****/
.btn-line::before,
.btn-line::after {
  content: "";
  /* 基準線と同じ大きさと色 */
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: .2s;
	box-shadow: 0 0 8px gray;
}

.btn-line::before {
  /* 上の線の位置 */
  transform: translateY(-16px);
}
.btn-line::after {
  /* 下の線の位置 */
  transform: translateY(16px);
}

/***** メニューオープン時 *****/
.btn-line.open {
  /* 真ん中の線を透明に */
  background-color: transparent;
}

.btn-line.open::before,
.btn-line.open::after {
  content: "";
  transition: .2s;
}

.btn-line.open::before {
  /* 上の線を傾ける */
  transform: rotate(45deg);
}

.btn-line.open::after {
  /* 上の線を傾ける */
  transform: rotate(-45deg);
}

/* ボタンフォーカス時の装飾 */
.btn:focus .btn-line ,
.btn:focus .btn-line::before ,
.btn:focus .btn-line::after {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .7);
}

.btn:focus .btn-line.open {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
    
.btn:focus .btn-line.open::before ,
.btn:focus .btn-line.open::after {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .7);
}
/**************** ここまで、ハンバーガーボタンのスタイリング ****************/

#navimenu nav .menu{
	position: fixed;
	top: 50px;
	z-index: 1;
	transform : translateX(160%);
	height: 100vh;
	display: flex;
	flex-direction: column;
	transition: transform .3s;
}
	#navimenu nav .menu.open{
		transform: translateX(60%)
	}
#navimenu nav ul li{
	width: 100%;
}
#navimenu nav ul li.top{
	background: url("../images/hmb_top.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.tks{
	background: url("../images/hmb_takesui.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.ssy{
	background: url("../images/hmb_sasaya.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.spp{
	background: url("../images/hmb_shoppage.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.rcr{
	background: url("../images/hmb_recruit.png") no-repeat;
	background-size: contain;
}

#firstview::after{
	height: 10vw;
	background: url("../images/fv_kazari_sp.png") no-repeat;
	background-size: contain;
	background-position: bottom;
}
	
footer{
	padding: 40px 0 20px;
}
footer #navifooter{
	display: none;
}
footer #shopinfo{
	width: 100%;
	padding-top: 140px;
	box-sizing: border-box;
	margin: 0 auto;
	color: #fff;
	background: url("../images/mark_shinsen_wht.png") no-repeat;
	background-size: 110px 118px;
	background-position: top left 50%;
	text-align: center;
	line-height: 2em;
}
footer #shopinfo .name{
	font-size: 1.4em;
}
footer #shopinfo .address{
	font-size: 1em;
}
	
	
	.pd{display: none;}
	.pc{display: none;}
	.pdpc{display: none;}

}

@media screen and (min-width: 568px) and (max-width: 1024px){
html{
	font-size: 10px;
}

header{
	position: fixed;
	width: 100%;
	top: 5%;
	z-index: 1;
}
#navimenu{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}
#navimenu button{
	display: none;
}
#navimenu nav ul{
	width: 100%;
	margin: 0 auto;
	display: flex;
}
#navimenu nav ul li{
	width: 20%;
}
#navimenu nav ul li.top{
	background: url("../images/gm_top.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.top:hover{
	background: url("../images/gm_top_on.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.tks{
	background: url("../images/gm_takesui.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.tks:hover{
	background: url("../images/gm_takesui_on.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.ssy{
	background: url("../images/gm_sasaya.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.ssy:hover{
	background: url("../images/gm_sasaya_on.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.spp{
	background: url("../images/gm_shoppage.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.spp:hover{
	background: url("../images/gm_shoppage_on.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.rcr{
	background: url("../images/gm_recruit.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.rcr:hover{
	background: url("../images/gm_recruit_on.png") no-repeat;
	background-size: contain;
}

footer #shopinfo{
	width: calc(32em + 120px);
	height: 110px;
	padding-left: 120px;
	box-sizing: border-box;
	margin: 0 auto 10px;
	color: #fff;
	background: url("../images/mark_shinsen_wht.png") no-repeat;
	background-size: contain;
	background-position: top 50% left;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
	
	
	.sp{display: none;}
	.pc{display: none;}

}

@media screen and (min-width: 1025px){
html{
	font-size: 10px;
}

header{
	position: fixed;
	width: 100%;
	top: 5%;
	z-index: 1;
}
#navimenu{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}
#navimenu button{
	display: none;
}
#navimenu nav ul{
	width: 100%;
	margin: 0 auto;
	display: flex;
}
#navimenu nav ul li{
	width: 20%;
}
#navimenu nav ul li.top{
	background: url("../images/gm_top.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.top:hover{
	background: url("../images/gm_top_on.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.tks{
	background: url("../images/gm_takesui.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.tks:hover{
	background: url("../images/gm_takesui_on.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.ssy{
	background: url("../images/gm_sasaya.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.ssy:hover{
	background: url("../images/gm_sasaya_on.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.spp{
	background: url("../images/gm_shoppage.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.spp:hover{
	background: url("../images/gm_shoppage_on.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.rcr{
	background: url("../images/gm_recruit.png") no-repeat;
	background-size: contain;
}
#navimenu nav ul li.rcr:hover{
	background: url("../images/gm_recruit_on.png") no-repeat;
	background-size: contain;
}

footer #shopinfo{
	width: calc(32em + 120px);
	height: 110px;
	padding-left: 120px;
	box-sizing: border-box;
	margin: 0 auto 10px;
	color: #fff;
	background: url("../images/mark_shinsen_wht.png") no-repeat;
	background-size: contain;
	background-position: top 50% left;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
	
	
	.sp{display: none;}
	.pd{display: none;}
	.sppd{display: none;}

}