@charset "utf-8";
/*RMS template*/
#header_frame {
    width: 100%;
    height:2500px;
    margin: -45px 0 0;
}
#header_frame2 {
    width: 100%;
    height:3400px;
    margin: -45px 0 0;
}
#footer_frame {
    width: 100%;
    height: 1000px;
}
#leftnavi_frame {
    width: 300px;
    height: 3750px;
}
table.calbase_rakuten {
    margin: auto;
}
/*side area*/
#leftNavi{
	float:left;
}
.navi{
	line-height:18px;
}
.navi h4{
	font-size: 24px;
    text-align: center;
	position:relative;
    padding: 0 0 20px;
    border-bottom: 2px solid #B8CFD8;
    font-family: ten-mincho, serif;
    font-weight: 400;
    font-style: normal;
}
.navi h4 .tokki{
	position:absolute;
	top:-4px;
	left:0;
}





/*-------------
自治体バナー
-------------*/
.side_bnr {
margin: 0 0 40px;
}
.side_bnr li {
margin: 0 0 15px;
}

.cautionbox {
    border: double 3px #f5a31b;
    padding: 25px;
    background-color: #fff;
    width: 898px;
    margin: 20px auto 15px;
}
p.cautiontitle{
	font-weight:bold;
	font-size:18px;
	text-align:center;
	color: #9c0803!important;
}
.cautionbox p{
	color: #000;
    font-size:16px;
	text-align: center;
	line-height: 30px;
}
/*--------------------------

カテゴリ・価格から探す

--------------------------*/




/* CSS reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}
html, body {
  margin: 0;
  padding: 0;
}
table {
  /*border-collapse: collapse;
  border-spacing: 0;*/
}
fieldset, img {
  border: 0;
  vertical-align: bottom;
}
address, caption, cite, code, dfn, th, var {
  font-style: normal;
  font-weight: normal;
}
ol, ul {
  list-style: none;
}
caption, th {
  text-align: left;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
q:before, q:after {
  content: '';
}
abbr, acronym {
  border: 0;
}
/* common */
html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}
body {
  font-family: 游ゴシック体, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック, 'Yu Gothic', メイリオ, Meiryo, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}
.ie7 body {
  overflow: hidden;
}
/* CSS Document */
img {
height: auto;
}
 .pc {
    display: block;
  }
  .sp {
    display: none;
  }
  a img {
  opacity: 1;
  transition: 0.3s;
  }
 
  a:hover img {
  opacity: 0.7;
  transition: 0.3s;
  }
  
/*--------------------------

グローバルナビ

--------------------------*/
.globalnavi_wrap{
	width:100%;
	background: #397DA0;
	position:fixed;
    z-index: 99998;
	top: 56px;
	left: 0;
    transition: 1s;
}
.globalnavi_wrap.fixed  {
position: fixed;
opacity: 0;
transition: 0.5s;
z-index: -9999;
}
.globalnavi_wrap .globalnavi_area{
	width:1100px;
	margin:0 auto;
	display: flex;
	align-items: center; 
	height:45px;
}
.globalnavi_wrap .globalnavi_area .h_logo {
	margin: 0 166px 0 0;
}

.globalnavi_wrap .globalnavi_area .globalnavi {
	display: flex;
	align-items: center; 
	justify-content: space-between;
	width:816px;
}
.globalnavi_wrap .globalnavi_area .globalnavi .top_right_navi {
	display: flex;
	align-items: center; 
}
.globalnavi_wrap .globalnavi_area .globalnavi .top_right_navi li {
	margin: 0 20px 0 0;
}
.globalnavi_wrap .globalnavi_area .globalnavi .top_right_navi li:last-child {
	margin: 0;
}
.globalnavi_wrap .globalnavi_area .globalnavi .top_right_navi a {
  display: block;
  padding: 0 0 5px;
  position: relative;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.08em;

}
.globalnavi_wrap .globalnavi_area .globalnavi .top_right_navi a::before,
.globalnavi_wrap .globalnavi_area .globalnavi .top_right_navi a::after {
  border-bottom: solid 2px #ffffff;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
.globalnavi_wrap .globalnavi_area .globalnavi .top_right_navi a::before {
  left: 50%;
}
.globalnavi_wrap .globalnavi_area .globalnavi .top_right_navi a::after {
  right: 50%;
}
.globalnavi_wrap .globalnavi_area .globalnavi .top_right_navi a:hover::before,
.globalnavi_wrap .globalnavi_area .globalnavi .top_right_navi a:hover::after {
  width: 50%;
}
.globalnavi_wrap .globalnavi_area .globalnavi .top_right_navi a span {
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
	color: #ffffff;
}
.globalnavi_wrap .globalnavi_area .globalnavi .top_right_navi a:hover span {
	color:#ffffff;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

/*-------------
メニューアイコン
-------------*/

.globalnavi ul.top_right_icon {
	margin-left: auto;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
.globalnavi ul.top_right_icon li {
	margin: 0 10px 0 0;
}
.globalnavi ul.top_right_icon li:last-child {
	margin: 0;
}
.globalnavi ul.top_right_icon li a{
	width: 34px;
	height: 34px;
	display: block;
	transition: 0.5s;
}

.globalnavi ul.top_right_icon li a:hover {
	transition : all 0.3s;
}
.globalnavi ul.top_right_icon li a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
	transition : all 0.3s;
}

/*-------------
グローバルナビ検索ボックス
-------------*/
.globalnavi_inputBox{
	position:relative;
	width: 195px;
}

.globalnavi_inputBox input[type="image"] {
	position:absolute;
	top: 3px;
	right:8px;
}

.globalnavi_inputBox input[type="text"] {
	width:195px;
	height: 28px;
	background-color: #ffffff;
	border: none;
	box-sizing: border-box;
	padding: 0 45px 0 15px;
	margin:0;
}  
  

/*========= ナビゲーションのためのCSS ===============*/
.menu_bg {
position: fixed;
top: 0;
left: 0;
width: 80px;
height: 74px;
display: block;
z-index:10000;
background-color: #397da0;
opacity: 0;
transition: 0.3s;
}
.menu_bg.active {
transition: 0.3s;
opacity: 1;
}
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 90000;
    /*ナビのスタート位置と形状*/
	top:0;
    left: -120%;
	width:450px;
    height: 100vh;/*ナビの高さ*/
	background:#fff;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    left: 0;
}


/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width:450px;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}


/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center; 
}
#g-nav-list {
padding: 70px 75px;
box-sizing: border-box;
}
#g-nav-list ul.top_bnr {
margin: 0 0 50px;
}
#g-nav-list ul.top_bnr li {
margin: 0 0 15px;
}
#g-nav-list ul.top_bnr li a{
width: 300px;
background: #397DA0;
display: block;
color: #fff;
font-size: 15px;
text-decoration: none;
padding: 22px 0;
position: relative;
transition: 0.3s;
box-sizing: border-box;
border: 1px solid #397DA0;
}
#g-nav-list ul.top_bnr li a:hover{
background: #fff;
color: #397DA0;
transition: 0.3s;
}

#g-nav-list ul.top_bnr li a::before{
  content: '';
  width: 5px;
  height: 5px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -4px;
  transition: 0.3s;
}

#g-nav-list ul.top_bnr li a:hover::before{
  border-top: solid 2px #397DA0;
  border-right: solid 2px #397DA0;
  transition: 0.3s;
}

#g-nav-list .cate_nav.nav_list {
margin: 0 0 60px;
}
#g-nav-list .nav_list h2 {
margin: 0 0 30px;
}
#g-nav-list .nav_list li {
border-bottom: 1px solid #E7E7E7;
}
#g-nav-list .nav_list li a {
text-decoration: none;
color: #397DA0;
padding: 18px 20px;
text-align: left;
display: block;
transition: 0.3s;
}
#g-nav-list .nav_list li a:hover {
transition: 0.3s;
color: #333;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 99999;/*ボタンを最前面に*/
	top:10px;
	left: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
}
.openbtn span {
position: relative;
}
.openbtn span img {
position: absolute;
top: 0;
left: 0;
}
.openbtn span:nth-child(2) img {
opacity: 0;
}
/*×に変化*/
.openbtn.active span:nth-child(1) img {
opacity: 0;
transition: 0.5s;
} 
.openbtn.active span:nth-child(2) img {
opacity: 1;
transition: 0.5s;
}


#main_visual {
height: 714px;
background-image: url("../img/common/main_visual.jpg");
background-size:cover;
background-position: top center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

#main_visual h3{
position: absolute;
bottom: 30px;
width: 100%;
margin: auto;
text-align: center;
    animation-name:updown1;   /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 3s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite; 
}
 
@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}


header {
width:100%;
top: 0;
left: 0;
position: absolute;
z-index: 9999;
}
header .wrap {
width: 1100px;
position: relative;
margin: auto;
}
header .wrap h1 {
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -87px;
}
header .wrap h2 {
position: absolute;
top:16px;
right: -50px;
}

header .wrap .head_search_box {
position: absolute;
top:70px;
right: -50px;
background: #DBDBDB;
padding: 5px 10px;
border-radius: 100vh;
transition: 0.3s;
opacity: 0;
}
header .wrap .head_search_box.active {
transition: 0.3s;
opacity: 1;
}
header .wrap .head_search_box form {
display: flex;
}
header .wrap .head_search_box form input.formbox {
border: none;
width: 160px;
background: none;
}
header .wrap .head_search_box form::before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 13px 10px;
border-color: transparent transparent #DBDBDB transparent;
position: absolute;
top: -10px;
right: 14px;
}

header .inn {
width: 1100px;
margin: auto;
display: flex;
justify-content: space-between;
position: relative;
}
header .inn ul {
display: flex;
align-items: center;
margin: 26px 0 0;
justify-content: flex-start;
}
header .inn ul:nth-child(2) {
justify-content: flex-end;
}
header .inn ul li {
text-align: center;
}
header .inn ul:nth-child(1) li:nth-child(1),
header .inn ul:nth-child(2) li:nth-child(3){
width:200px;
}
header .inn ul:nth-child(1) li:nth-child(3),
header .inn ul:nth-child(2) li:nth-child(1){
width: 250px;
}
header .inn ul:nth-child(1) li:nth-child(2),
header .inn ul:nth-child(2) li:nth-child(2) {
width: 1px;
background-color: #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.75);
height: 22px;
}
header .inn ul li a {
color: #fff;
font-size: 14px;
text-decoration: none;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.75);
font-weight: bold;
transition: 0.3s;
}
header .inn ul li a:hover {
color: #ccc;
transition: 0.3s;
}
/*--------------------------

2022/11/29
ヘッダーのアイテムボックス

--------------------------*/
#header-box {
/*  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  box-sizing: border-box;
  grid-template-rows: auto;*/
  width: 1180px;
  background: #7F9EBD;
  margin: 0 auto;
  padding: 10px 10px 0 10px;
}

/*#header-box div {
  overflow: hidden;
  border:1px solid #fff;
  box-sizing:border-box;
  background:#fff;
}

.div1 { grid-area: 1 / 1 / 2 / 11; }
.div2 { grid-area: 2 / 1 / 3 / 6; }
.div3 { grid-area: 2 / 6 / 3 / 11; }
.div4 { grid-area: 3 / 1 / 4 / 6; }
.div5 { grid-area: 3 / 6 / 4 / 11; }
.div6 { grid-area: 4 / 1 / 5 / 2; }
.div7 { grid-area: 4 / 1 / 5 / 3; }
.div8 { grid-area: 4 / 3 / 5 / 5; }
.div9 { grid-area: 4 / 5 / 5 / 7; }
.div10 { grid-area: 4 / 7 / 5 / 9; }
.div11 { grid-area: 4 / 9 / 5 / 11; }
.div12 { grid-area: 5 / 1 / 6 / 3; }
.div13 { grid-area: 5 / 3 / 6 / 5; }
.div14 { grid-area: 5 / 5 / 6 / 7; }
.div15 { grid-area: 5 / 7 / 6 / 9; }
.div16 { grid-area: 5 / 9 / 6 / 11; }
.div17 { grid-area: 6 / 1 / 7 / 3; }
.div18 { grid-area: 6 / 3 / 7 / 5; }
.div19 { grid-area: 6 / 5 / 7 / 7; }
.div20 { grid-area: 6 / 7 / 7 / 9; }
.div21 { grid-area: 6 / 9 / 7 / 11; }*/

#header-box ul {
  display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#header-box ul li {
	border: 1px solid #fff;
  box-sizing: border-box;
	margin-bottom: 10px;
}
#header-box ul.box1 {
}
#header-box ul.box1 li {
	width: 100%;
}
#header-box ul.box2 {
}
#header-box ul.box2 li {
  width: calc((100% - 10px) / 2);
}
#header-box ul.box3 {
}
#header-box ul.box3 li {
  width: calc((100% - 40px) / 5);
}
#header-box li img {
	width:100%;
}
/*#header-box {
  display: grid;
  grid-template-rows: 184px 146.6px 146.6px 146.6px 146.6px 146.6px 146.6px 146.6px;
  grid-template-columns: 146.6px 146.6px 146.6px 146.6px 146.6px 146.6px;
  grid-template-areas:
  "itemA itemA itemA itemA itemA itemA"
  "itemA itemA itemA itemA itemA itemA"
  "itemB-1 itemB-1 itemB-2 itemB-2 itemB-3 itemB-3"
  "itemB-1 itemB-1 itemB-2 itemB-2 itemB-3 itemB-3"
  "itemB-4 itemB-4 itemB-5 itemB-5 itemB-6 itemB-6"
  "itemB-4 itemB-4 itemB-5 itemB-5 itemB-6 itemB-6"
  "itemC-1 itemC-2 itemC-3 itemC-4 itemC-5 itemC-6"
  "itemC-7 itemC-8 itemC-9 itemC-10 itemC-11 itemC-12"
  ;
  gap:10px;
  width: 950px;
  background:#A00000;
  padding:10px;
  box-sizing:border-box;
  margin:0 auto;
}*/
/* 
・ポイント
一番上のバナー画像の大きさは横930px・縦184pxがベストです。
画像の大きさはボックスの幅に100%になるように設定していますので
大きなバナーの高さが930px×184pxの比率より小さくなる場合や
サムネイル画像の高さが999px以下の場合、白の余白ができますのでご注意ください。
 */

.itemA {
  grid-area:itemA;
  overflow: hidden;
  border:1px solid #fff;
  box-sizing:border-box;
  background:#fff;
}

.itemB {
  overflow: hidden;
  border:1px solid #fff;
  box-sizing:border-box;
  background:#fff;
}

.itemC {
  overflow: hidden;
  border:1px solid #fff;
  box-sizing:border-box;
  background:#fff;
}

.itemB-1 {grid-area:itemB-1;}
.itemB-2 {grid-area:itemB-2;}
.itemB-3 {grid-area:itemB-3;}
.itemB-4 {grid-area:itemB-4;}
.itemB-5 {grid-area:itemB-5;}
.itemB-6 {grid-area:itemB-6;}
.itemC-1 {grid-area:itemC-1;}
.itemC-2 {grid-area:itemC-2;}
.itemC-3 {grid-area:itemC-3;}
.itemC-4 {grid-area:itemC-4;}
.itemC-5 {grid-area:itemC-5;}
.itemC-6 {grid-area:itemC-6;}
.itemC-7 {grid-area:itemC-7;}
.itemC-8 {grid-area:itemC-8;}
.itemC-9 {grid-area:itemC-9;}
.itemC-10 {grid-area:itemC-10;}
.itemC-11 {grid-area:itemC-11;}
.itemC-12 {grid-area:itemC-12;}

.itemA img,
.itemB img,
.itemC img {
  width: 100%;
}

.itemA a:hover img,
.itemB a:hover img,
.itemC a:hover img {
  width: 100%;
  height: auto;
}


/*----------------------------------------------------------

レフトナビ

----------------------------------------------------------*/
#leftnavi {
width: 300px;
}

#leftnavi li{
	list-style: none;
    text-align: center; 
}
#leftnavi ul.top_bnr {
margin: 0 0 40px;
}
#leftnavi ul.top_bnr li {
margin: 0 0 15px;
}
#leftnavi ul.top_bnr li a{
width: 300px;
background: #397DA0;
display: block;
color: #fff;
font-size: 15px;
text-decoration: none;
padding: 22px 0;
position: relative;
transition: 0.3s;
box-sizing: border-box;
border: 1px solid #397DA0;
}
#leftnavi ul.top_bnr li a:hover{
background: #fff;
color: #397DA0;
transition: 0.3s;
}

#leftnavi ul.top_bnr li a::before{
  content: '';
  width: 5px;
  height: 5px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -4px;
  transition: 0.3s;
}

#leftnavi ul.top_bnr li a:hover::before{
  border-top: solid 2px #397DA0;
  border-right: solid 2px #397DA0;
  transition: 0.3s;
}

#leftnavi .side_search {
margin: 0 0 50px;
}
#leftnavi .side_search form {
display: flex;
}
#leftnavi .side_search form input.formbox {
border: 1px solid #E1E1E1;
width: 250px;
box-sizing: border-box;
padding: 8px;
margin: 0 10px 0 0;
background: none;
}

#leftnavi .nav_list {
margin: 0 0 60px;
}
#leftnavi .nav_list h2 {
margin: 0 0 30px;
}
#leftnavi .nav_list li {
border-bottom: 1px solid #E7E7E7;
}
#leftnavi .nav_list li a {
text-decoration: none;
color: #397DA0;
padding: 18px 20px;
text-align: left;
display: block;
transition: 0.3s;
}
#leftnavi .nav_list li a:hover {
transition: 0.3s;
color: #333;
}

#leftnavi .rank_list {
margin: 0 0 95px;
}
#leftnavi .rank_list li {
margin: 50px 0 0;
position: relative;
}
#leftnavi .rank_list li::after {
display: block;
width: 30px;
height: 30px;
background-color: #CCBD7F;
position: absolute;
top: -13px;
left: 0;
z-index: 9999;
border-radius: 50%;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 20px;
line-height: 30px;
}
#leftnavi .rank_list li:nth-child(1)::after {
content: '1';
}
#leftnavi .rank_list li:nth-child(2)::after {
content: '2';
}
#leftnavi .rank_list li:nth-child(3)::after {
content: '3';
}
#leftnavi .rank_list li:nth-child(4)::after {
content: '4';
}
#leftnavi .rank_list li:nth-child(5)::after {
content: '5';
}
#leftnavi .rank_list li p {
text-align: left;
margin:8px 0 0;
line-height: 1.2;
}
#leftnavi .rank_list li p.price {
text-align: right;
font-weight: bold;
font-size: 18px;
}



/*----------------------------------------------------------

フッター

----------------------------------------------------------*/
#shoppingGuide{
background-color:#EAEDEF;
padding: 70px 45px 40px;
box-sizing: border-box;
margin: auto;
}
#shoppingGuide h3 {
width: 1200px;
margin: auto;
}
#shoppingGuide .info_inn {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
width: 1200px;
margin: auto;
}
#shoppingGuide .info_inn .area {
width: 376px;
}

#shoppingGuide h3{
    margin-bottom: 25px;
	text-align: left;
}

#shoppingGuide h4{
	font-weight: bold;
	margin-bottom: 8px;
	border-bottom: 1px solid #808080;
}

#shoppingGuide p{
	font-size: 13px;
	line-height: 18px;
    text-align: justify;
}
#shoppingGuide p.card {
	margin:8px 0 16px;
	}
#shoppingGuide p.mb {
	margin:0 0 30px;
	}
#shoppingGuide p.fbo {
font-weight: bold;
margin: 0;
	}
#shoppingGuide h4.mt {
margin-top: 80px;
}
#shoppingGuide p.time {
font-weight: bold;
font-size: 16px;
margin: 20px 0;
}
#shoppingGuide .caution{
	margin-bottom: 20px;
	color: #E32326;
	font-weight: bold;
}

#shoppingGuide .area1 img{
	margin: 10px 0;
}


#shoppingGuide .area4{
	text-align:center;
	margin:30px auto 0;
	padding:16px 0;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 20px;
	background-color:#fff;
	clear: both;
	color: #000;
    width: 1200px;
}

/*-------------
ボタン
-------------*/
#shoppingGuide .button{
	text-align:right;
	margin: 30px 0 0;
}
#shoppingGuide .button.button2{
	text-align:left;
	margin: -10px 0 35px;
}

#shoppingGuide .button a{
	font-size: 10px;
	padding:4px 0;
	font-weight: bold;
	border:1px solid #4d4d4d;
	color: #4d4d4d;
	text-align: center;
	display: inline-block;
    width: 135px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
	border-radius: 4px;
    background-color: #fff;
    text-decoration: none;
}

#shoppingGuide .button a:hover {
	color:#fff;
	background-color: #4d4d4d;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}
#shoppingGuide .button a span {
font-size: 1px;
padding: 0 0 0 6px;
color: #4d4d4d;
-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}
#shoppingGuide .button a:hover span {
color: #fff;
-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

/*--------------------------

コピーライト

--------------------------*/
/*-------------
1列　中央揃え
-------------*/
#copyright01{
	position: relative;
	width:100%;
	padding:24px 0px 50px;
	font-size:14px;
	line-height:18px;
	text-align:center;
	color:#fff;
	background-color:#397DA0;
}

#copyright_area01 p{
font-size: 14px;
font-weight: bold;
color: #fff;
}

#copyright01 ul{
	display:inline-block;
    margin-bottom: 30px;
}

#copyright01 ul li{
	float:left;
	padding:0 30px;
	border-right:1px solid #fff;
	color:#fff;
}

#copyright01 ul li a{
	color:#fff;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
	position: relative;
    text-decoration: none;
}

#copyright01 ul li a:hover{
	color: #fff;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

#copyright01 ul li:last-child{
	border-right:none;
}

#copyright01 ul li a::before,
#copyright01 ul li a::after {
  border-bottom: solid 1px #fff;
  bottom: -4px;
  content: "";
  display: block;
  position: absolute;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
#copyright01 ul li a::before {
  left: 50%;
}
#copyright01 ul li a::after {
  right: 50%;
}
#copyright01 ul li a:hover::before,
#copyright01 ul li a:hover::after {
  width: 50%;
}
#copyright01 ul li a:hover {
	color:#fff;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

/* animation */
.animation {
visibility: hidden;
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:3s;
 -ms-animation-duration:3s;
 animation-duration:3s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0;  }
 100% { opacity: 1;  }
}
@keyframes fadeInDown {
 0% { opacity: 0;  }
 100% { opacity: 1; }
}


/* ページトップ */
#page-top{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 20px;
  right: 30px;
  padding: 20px 10px;
  text-align: center;
  text-decoration: none;
  transform: rotateY(270deg);
  transition: .5s;
}
#page-top:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
}
@media only screen and (max-width: 786px) {
body {
  font-size: 13px;
}
 .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  img {
  width: 100%;
  height: auto;
  }
  
  
  /*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 10000;
    /*ナビのスタート位置と形状*/
	top:0;
    left: -120%;
	width:80%;
	background:#fff;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    left: 0;
}


/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width:80%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}


/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center; 
}
#g-nav-list {
padding: 100px 6% 6%;
box-sizing: border-box;
}
#g-nav-list ul.top_bnr {
margin: 0 0 10%;
}
#g-nav-list ul.top_bnr li {
margin: 0 0 3%;
}
#g-nav-list ul.top_bnr li a{
width: 100%;
font-size: 15px;
padding: 4% 0;
}
#g-nav-list .cate_nav.nav_list {
margin: 0 0 10%;
}
#g-nav-list .nav_list h2 {
margin: 0 0 4%;
}
#g-nav-list .nav_list li a {
padding:4%;
}


/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 99999;/*ボタンを最前面に*/
	top:10px;
	left: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
}
.openbtn span {
position: relative;
}
.openbtn span img {
position: absolute;
top: 0;
left: 0;
width:60px
}
.openbtn span:nth-child(2) img {
opacity: 0;
}
/*×に変化*/
.openbtn.active span:nth-child(1) img {
opacity: 0;
transition: 0.5s;
} 
.openbtn.active span:nth-child(2) img {
opacity: 1;
transition: 0.5s;
}

header {
width:100%;
position: relative;
z-index: 9999;
}


#main_visual {
background: none;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
display: block;
}
#main_visual h2 {
width: 65%;
    margin: auto;
    padding: 48% 0 0;
}
#main_visual h3 {
width: 8%;
    margin: auto;
    padding: 35% 0 0;
    position: relative;
}





/*----------------------------------------------------------

フッター

----------------------------------------------------------*/
#shoppingGuide{
background-color:#EAEDEF;
padding: 70px 45px 40px;
box-sizing: border-box;
margin: auto;
display: none;
}
#shoppingGuide h3 {
width: 1200px;
margin: auto;
}
#shoppingGuide .info_inn {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
width: 1200px;
margin: auto;
}
#shoppingGuide .info_inn .area {
width: 376px;
}

#shoppingGuide h3{
    margin-bottom: 25px;
	text-align: left;
}

#shoppingGuide h4{
	font-weight: bold;
	margin-bottom: 8px;
	border-bottom: 1px solid #808080;
}

#shoppingGuide p{
	font-size: 13px;
	line-height: 18px;
    text-align: justify;
}
#shoppingGuide p.card {
	margin:8px 0 16px;
	}
#shoppingGuide p.mb {
	margin:0 0 30px;
	}
#shoppingGuide p.fbo {
font-weight: bold;
margin: 0;
	}
#shoppingGuide h4.mt {
margin-top: 80px;
}
#shoppingGuide p.time {
font-weight: bold;
font-size: 16px;
margin: 20px 0;
}
#shoppingGuide .caution{
	margin-bottom: 20px;
	color: #E32326;
	font-weight: bold;
}

#shoppingGuide .area1 img{
	margin: 10px 0;
}


#shoppingGuide .area4{
	text-align:center;
	margin:30px auto 0;
	padding:16px 0;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 20px;
	background-color:#fff;
	clear: both;
	color: #000;
    width: 1200px;
}

/*-------------
ボタン
-------------*/
#shoppingGuide .button{
	text-align:right;
	margin: 30px 0 0;
}
#shoppingGuide .button.button2{
	text-align:left;
	margin: -10px 0 35px;
}

#shoppingGuide .button a{
	font-size: 10px;
	padding:4px 0;
	font-weight: bold;
	border:1px solid #4d4d4d;
	color: #4d4d4d;
	text-align: center;
	display: inline-block;
    width: 135px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
	border-radius: 4px;
    background-color: #fff;
    text-decoration: none;
}

#shoppingGuide .button a:hover {
	color:#fff;
	background-color: #4d4d4d;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}
#shoppingGuide .button a span {
font-size: 1px;
padding: 0 0 0 6px;
color: #4d4d4d;
-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}
#shoppingGuide .button a:hover span {
color: #fff;
-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

/*--------------------------

コピーライト

--------------------------*/
/*-------------
1列　中央揃え
-------------*/
#copyright01{
	position: relative;
	width:100%;
	padding:4% 0;
	font-size:12px;
}

#copyright_area01 p{
font-size: 14px;
font-weight: bold;
color: #fff;
}

#copyright01 ul{
    display: none;
}
#float_cont {
display: none;
}
}

/*--------------------------
サイドバナー
--------------------------*/
.floatingBanner01 li {
    width: 180px;
    height: 130px;
    top: 225px;
    z-index: 9999;
    position: fixed;
    right: 0;
    list-style: none;
}

.floatingBanner01 li a img {
    margin-top: 5px;
    width: 180px;
}

.floatingBanner02 li {
    width: 180px;
    height: 130px;
    top: 455px;
    z-index: 9999;
    position: fixed;
    right: 0;
    list-style: none;
}

.floatingBanner02 li a img {
    margin-top: 5px;
    width: 180px;
}