/*============
#logo
=============*/
.logo {
  display: block;
  position: fixed;
  z-index: 3;
  top: 31px;
  left: 31px;
  width: 240px;
 -webkit-filter: drop-shadow(0px 2px 3px rgba(0,0,0,.7));
 filter: drop-shadow(0px 2px 3px rgba(0,0,0,.7));
}
.logo2 {
  display: block;
  position: fixed;
  z-index: 3;
  top: 20px;
  left: 25px;
  width: 180px;
 -webkit-filter: drop-shadow(0px 2px 3px rgba(0,0,0,.7));
 filter: drop-shadow(0px 2px 3px rgba(0,0,0,.7));
}
@media screen and (max-width: 1400px) {
.logo {
  display: block;
  position: fixed;
  z-index: 3;
  top: 31px;
  left: 31px;
  width: 180px;
 -webkit-filter: drop-shadow(0px 2px 3px rgba(0,0,0,.7));
 filter: drop-shadow(0px 2px 3px rgba(0,0,0,.7));
}
.logo2 {
  display: block;
  position: fixed;
  z-index: 3;
  top: 20px;
  left: 25px;
  width: 180px;
 -webkit-filter: drop-shadow(0px 2px 3px rgba(0,0,0,.7));
 filter: drop-shadow(0px 2px 3px rgba(0,0,0,.7));
}
}
@media screen and (max-width: 320px) {
.logo {
  display: block;
  position: fixed;
  z-index: 3;
  top: 25px;
  left: 31px;
  width: 135px;
 -webkit-filter: drop-shadow(0px 2px 3px rgba(0,0,0,.7));
 filter: drop-shadow(0px 2px 3px rgba(0,0,0,.7));
}
}

/*============
nav
=============*/
@media screen and (max-width: 960px) {
.navbg {
  display: block;
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0px;
  background: #3f2212;
background-color:rgba(63,34,18,0.5);
  width: 100%;
  height: 14vh;
}
.sa {
  opacity: 0;
  transition: all .5s ease;
}
.sa.show {
  opacity: 1;
  transform: none;
}
.sa--down {
  transform: translate(0, -100px);
}
}

nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
.open nav {
  left: 0;
  opacity: 1;
}
nav .inner {
  padding: 25px;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 0px solid #eee;
}
nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .inner ul li a:hover {
  background: #eee;
}
@media screen and (max-width: 1400px) {
  nav {
    left: -220px;
    width: 220px;
  }
}
.navbg2 {
  display: block;
  position: fixed;
  overflow: hidden;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 90px;
}
.navbg2 video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 3px;
  background-color: #fff;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}

/*============
body
=============*/
body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: 'Shippori Mincho B1', serif;
  font-size: 1rem;
  font-weight: 400;
}

a {
color: #000;
  text-decoration: none;
}

:focus {
    outline: none;
}

.gengo_selectbox_area {
  display: block;
  position: fixed;
  top: 31px;
  right: 110px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}

.gengo_selectbox_area::after {
  pointer-events: none;
  position: absolute;
  color: #ccc;
  top: 50%;
  left: 3.2em;
  transform: translateY(-50%); 
  content: "▼";
  font-size: 0.9em;
}

.gengo_selectbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 4.2em;
  height: 1.8em;
  border: none;
  border-radius: 8px;
  font-size: 1em;
  padding: 0em 0.8em 0em 0.8em;
}

/*=============
slick
=============*/

.full div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
  z-index: 2;
}
.full div.img01 {
    background-image: url(../images/slick/slide01.jpg);
}
.full div.img02 {
    background-image: url(../images/slick/slide02.jpg);
}
.full div.img03 {
    background-image: url(../images/slick/slide03.jpg);
}
.full .slick-dots {
  bottom: 4%;
  z-index: +1;
}

/*============
main
=============*/
.pc { display: block !important; }
.sp { display: none !important; }
@media screen and (max-width: 1400px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

a.gd:link,a.gd:visited {
  color:#998547;
  font-weight:bold;
  text-decoration:none;
  cursor:pointer;
}

a.gd:active,a.gd:hover {
  color:#ff3300;
}

hr {border: 0; border-top: 1px solid #998547;margin: 20px 0;}

.main {
  width: 90%;
  max-width: 1400px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: 30px;
}
.main2 {
  width: 90%;
  max-width: 1400px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: 30px;
  padding-top: 100px;
}
.main3 {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: 30px;
  padding-top: 100px;
  text-align: left;
}
.mdob {
  font-size: 1.5rem;
  color:#998547;
  padding: 5px 0 8px 0;
  border-top: 1px solid #998547;
  border-bottom: 1px solid #998547;
  margin-bottom: 20px;
}
.pad {
  padding: 1%;
}

.wright {
  text-align: right;
}
.width100 img {
  width: 100%;
}

.flex {
display: flex;
column-gap: 50px;
align-items: stretch;
}
.flex_m {
  width: 950px;
  flex: auto;
}
.flex_s {
  width: 400px;
}
.flex_f1 {
  width: 950px;
 font-size: 0.8rem; 
}
.flex_f2 {
  width: 400px;
 font-size: 0.8rem; 
display: flex;
align-items: stretch;
align-items: end;
justify-content: flex-end;
}
@media screen and (max-width: 1400px) {
.flex {
  display: block;
}
.flex img {
  width: 100%;
}
.flex_m {
  width: 100%;
}
.flex_s {
  width: 100%;
}
.flex_f1 {
  width: 100%;
}
.flex_f2 {
  width: 100%;
}
}

.flex_m img {
  max-width: 950px;
}

.cattit {
  font-size: 3rem;
  line-height:3.2rem;
  font-family: 'Lexend', sans-serif;
  font-weight: 700;
}
.gold { color: #998547; }
.red { color: #cc0000; }

.step3 {
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  width: 100%;
  color: #998547;
  background-color:#eeeee3;
  border: 1px solid #998547;
  padding: 0.2em ;
  box-sizing: border-box;
}

.step {
  font-size:18px;
  line-height:11px;
  color:#998547;
  font-weight:bold;
  background-color:#000;
  padding:10px;
  margin-right: 100px;
}

.stepwd {
 font-size: 1.3rem; 
  color: #998547;
  padding-left: 10px;
}

table{
	border-collapse:collapse;
}

td.l_Cel{
                                width: 25%;
	background-color:#998547;
	color:#000;
	border:1px solid #998547;
                                font-weight: 700;
                                font-size: 1.2rem;
	padding:10px;
}

td.l_Cel2{
                                width: 25%;
	background-color:#998547;
	color:#000;
	border-bottom:1px #ffffff solid;
	border-top:1px #998547 solid;
                                font-weight: 700;
                                font-size: 1.2rem;
	padding:10px;
}

td.sky{
	background-color:#eeeee3;
	color:#000;
	border:1px solid #998547;
	padding:10px;
}

.stepimg img {
float:right;
margin-left:10px;
width: 340px;
height: 160px;
}
@media screen and (max-width: 1400px) {
.stepimg img { display: none; }
}

.obi1{
                                box-sizing: border-box;
                                width: 100%;
	background-color:#998547;
	color:#fff;
                                font-weight: 700;
                                font-size: 1.1rem;
	padding:2px 0px 4px 10px;
}



/*============
news
=============*/
.newstit {
  width: 100%;
  border-bottom: 1px solid #8ec8b8;
  font-size: 2rem;
  font-family: 'Lexend', sans-serif;
  font-weight: 700;
}

.newsbox {
  width: 100%;
  border-bottom: 1px solid #ddd;
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 400;
  padding: 1.2em 0em ;
}
.newsbox_d { font-size: 1rem; }
.newsbox_r { font-size: 1.3rem;   margin-bottom: 20px; }
.newsbox_w { font-size: 1rem; }
.newsbox_b {
font-size: 0.8rem;
display: inline-block;
 text-align: center;
color: #ffffff ;
background-color:#8ec8b8;
padding:5px 8px;
}
.newsbox_w img {
  max-width:100%;
}

/*============
member news
=============*/
.mnews {
  box-sizing: border-box;
  width: 100%;
  background-color:#eeeee3;
  font-size: 1rem;
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 400;
  padding: 1em ;
}
.mnewstit {
  font-size: 1.2rem;
  font-family: 'Lexend', sans-serif;
  font-weight: 700;
}
.mnews_l {
  border: 0;
  border-top: 2px dotted #aaa;
}
.mnews_d { font-size: 0.8rem; }
.mnews_s { font-size: 0.9rem; }
.side_bn {
  margin-bottom: 10px ;
}
.side_login {
  color: #ffffff ;
  box-sizing: border-box;
  width: 100%;
  background-color:#3f2212;
  font-size: 1rem;
  font-family: 'Lexend', sans-serif;
  font-weight: 700;
  padding: 0.5em ;
  margin-bottom: 10px ;
}


/*============
glossary
=============*/
a.bt{
display:block;
padding-top:10px;
padding-bottom:10px;
text-align:center;
background:#000000;
  color:#998547;
  font-weight:bold;
  cursor:pointer;
}

a.bt:hover{
background:#998547;
  color:#000000;
  cursor:pointer;
}

a.bton{
display:block;
padding-top:10px;
padding-bottom:10px;
text-align:center;
background:#998547;
  color:#000000;
  font-weight:bold;
  cursor:pointer;
}

.menu{
display: flex;
}
.menu div{
  width: 19.7%;
border-top:0px;
border-bottom:1px solid #998547;
border-left:0px;
border-right:1px solid #998547;
}
@media screen and (max-width: 1400px) {
.menu{
display: flex;
flex-wrap: wrap;
}
}

td.catw{
	border:1px solid #998547;
	background-color:#000000;
	padding:3px 8px;
	font-weight:bold;
	color:#998547;
}

td.mean{
	border:1px solid #998547;
	background-color:#f5f3eb;
	padding:8px;
	color:#000;
}

td.word1{
	width:35%;
	background-color:#998547;
	padding:8px;
	color:#000;
	border-bottom:1px #ffffff solid;
	line-height:18px;
}

td.word2{
	width:35%;
	background-color:#998547;
	padding:8px;
	color:#000;
	border:1px solid #998547;
	line-height:18px;
}

#sml {
  font-size:13px;
  line-height:15px;
}

#xml {
  font-size:11px;
  line-height:16px;
}


/*============
login
=============*/
.login {
  color: #ffffff ;
  box-sizing: border-box;
  width: 100%;
  background-color:#998547;
  margin-top: 30px;
  padding: 3em ;
  -webkit-border-radius: 5px;
  border-radius: 10px;
}

input[type="button"] { 
	cursor:pointer;
	-webkit-appearance: none;
	border-style:none;
	background:#3f2212;
	padding:10px 15px;
                                -webkit-border-radius: 5px;
	border-radius: 5px;
                                font-size:100%;
                                color: #fff;
                                margin-top: 20px;
}
.loginbut {
 display: flex;
 justify-content: flex-end;
}
.loginfrm {
-webkit-appearance: none;
border-style:none;
width:80%;
height:50px;
margin:10px 0;
padding:0 15px;
border-radius:5px;
font-size:120%;
}


/*============
shop
=============*/
.shop_back{ 
                                margin-top: 10px;
                                display: inline-block;
	background:#998547;
                                color: #fff;
	padding:5px 8px;
                                font-size:90%;
}
.flex_shop_cat {display:block;}
.shop_pref{ 
                                width:160px;
	background:#998547;
	padding:5px;
                                font-size:100%;
                                box-sizing: border-box;
                                text-align: center;
}
.shop_type{ 
                                width:160px;
	background:#3f2212;
                                color: #fff;
	padding:5px;
                                font-size:100%;
                                box-sizing: border-box;
                                text-align: center;
}
.shop_name{ font-size:150%; margin-top: -5px;}
.flex_shop {
display: flex;
column-gap: 15px;
align-items: center;
border:1px solid #998547;
}
.flex_shop2 {
display: flex;
column-gap: 30px;
}
.flex_shop2 div {
 width:100%;
}
.flex_shop_pho {
 width:100%;
}
.flex_shop_pho img {
 width:100%;
margin-bottom: 5px;
}
.flex_shop_pho2 {
display: flex;
column-gap: 10px;
}
@media screen and (max-width: 1400px) {
.flex_shop_cat {display: flex;}
.shop_name{ font-size:120%; margin-top: 10px;}
.flex_shop {
display:block;
border:none;
}
.flex_shop2 {
display: flex;
flex-direction: column-reverse;
}
}
.shop_news { display: table; width: 100%; margin-bottom: 10px;}
.shop_newstit{ display: table-cell; text-align: left; font-size: 1.3rem; color: #998547;}
.shop_newdate{display: table-cell; text-align: right;}
.news_data img { max-width: 100%;}

/*============
footer
=============*/
.footer_wrap {
  color: #ffffff ;
  box-sizing: border-box;
  width: 100%;
  background-color:#3f2212;
  margin-top: 30px;
}
.footer {
  width: 90%;
  max-width: 1400px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 2em 0 ;
}
.footcp {font-size: 1.5rem;}

/*============
pagenation
=============*/
/* ページネーションのデザインを変更 */
ul.pagination {
  margin-top: 5%;
  display: flex;
  justify-content: center;
  padding-left: 0;
  list-style: none;
}

ul.pagination li {
  margin: 0 3px;
}

ul.pagination li a {
  padding: 5px 10px;
  color: #998547;
  text-decoration: none;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  background-color: #fff;
}

ul.pagination li.active a {
  background-color: #ceb595;
  color: white;
  border-color: #8b6027;
}

ul.pagination li.disabled a {
  color: #6c757d;
  pointer-events: none;
}

.card-img-top {
  max-height: 200px;
  object-fit: cover;
}