@charset "UTF-8";

/* Reset
------------------------------------------------------------*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;

    scroll-behavior: smooth;

    line-height: 1.8;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td {margin: 0;padding: 0;}
address,em { font-style: normal; }
th { font-weight: normal; }
b, strong{font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;}
table {border-collapse: collapse;border-spacing: 0;border: 4px solid #CCCCCC;}
tbody tr td {padding: 8px;border-bottom: 1px solid #CCCCCC;border-right: 1px solid #CCCCCC;}
th { text-align: left; }
hr,legend { display: none;	}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; }
img,fieldset { border: 0; }
li { list-style-type: none; }

/* Table sp
------------------------------------------------------------*/
.table-scroll-wrapper{width:100%;}
.responsive-table{width:100%;border-collapse:collapse;border-spacing:0;border:4px solid #CCC;font-size:14px;}
.responsive-table td{border-bottom:1px solid #CCC;border-right:1px solid #CCC;text-align:center;vertical-align:middle;padding:10px 8px;}
.responsive-table tr:first-child td{background-color:#f0f0f0;font-weight:700;}
.text-pink{color:#E85694;font-weight:700;}
.scroll-hint{display:none;font-size:12px;color:#666;text-align:right;margin-bottom:5px;}

@media screen and (max-width: 767px) {
  .table-scroll-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .responsive-table{width:auto;min-width:800px;}
  .responsive-table td{white-space:nowrap;}
}

/* Fonts
------------------------------------------------------------*/
body {
	font-size: 75%; /* IE */
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	min-width: 1024px;
	margin: 0px;
}
html>/**/body {
font-size: 12px;
} /* Except IE */
a:link { color:#333; }
a:visited{ color:#333; }
a:active{color:#804626;}

.error{background:#ff6699;padding: 20px;text-align:center;}

/* header
------------------------------------------------------------*/
#header {
	background-image: url(../img/header_bg.jpg);
	border-top: 2px solid #80442B;
	background-position: center top;
  background-size: cover;
  height: 500px;
  position: relative;
}

#utility {
	max-width: 1000px; margin: auto;
}

/* utility
-------------------------------------------*/
#utilityR {
	padding-top: 20px;
	height: 50px;
}

/* gNav
-------------------------------------------*/
#gNav{display: flex; align-items: center; width: 1000px; justify-content: center; margin: 0 auto; background-color: #CEC36C; border-radius: 5px; position: absolute; bottom: 0; transform: translateY(50%);z-index: 9999;}
#gNav li{flex: 1 0 auto; border-right: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.4);}
#gNav li:last-child { border-right: none; box-shadow: none;}
#gNav li h3 a{display: block; padding-block: 1.8rem 1.8rem; text-decoration: none; text-align: center; color: #333; font-size: .9rem; font-family: sans-serif; font-weight: bold; letter-spacing: 1px; transition: all .3s ease;}
#gNav li h3 a span{display: block; font-size: .5rem; font-weight: normal;}
#gNav li h3 a img{height: 1.2rem;}
#gNav li h3 a:hover{filter: brightness(0) invert(100%);}

#hamburger,#telBtn { display: none;}

.sub-menu li{width:100%;border:none;box-shadow:none;border-top:1px solid rgba(255,255,255,0.4); font-family: sans-serif;}
.sub-menu li a{display:block;color:#333;text-decoration:none;font-size:13px;text-align:left;transition:background .3s;padding:12px 10px;}
.sub-menu li a:hover{background-color:rgba(255,255,255,0.3);}

/* logo
------------------------------------------------------------*/
#logo {width: 168px;}

/* page
------------------------------------------------------------*/

#page {max-width: 1000px; margin: 60px auto;display: flex;justify-content: space-between;}
#con {width: 100%; max-width: 767px; line-height: 20px; font-size: 14px; letter-spacing: 1px;}
.center_btn{ margin-left: 283.5px;}

.ttl{display:flex;align-items:center;font-size:16px;font-weight:700;color:#333;letter-spacing:.05em;width: 100%;margin: 20px 0;}
.ttl::before{content:'';display:block;width:16px;height:100%;min-height:24px;background-color:#8a4b32;margin-right:12px;border-radius:2px;}
.ttl::after{content:'';display:block;flex-grow:1;height:2px;background-color:#e0e0e0;margin-left:15px;}

/* footer
------------------------------------------------------------*/
footer { background-image: url(../img/footer_bg.jpg); height: 339px; width: 100%; margin-top: 70px;}
#footerCon { width: 1000px; margin-right: auto; margin-left: auto;}
#footerCon address { font-size: 11px; color: #333; width: 100%; margin-left: auto; margin-right: auto; float: left; padding-top: 50px; text-align: center; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;}
#footLogo {width: 700px;}
#footLogo a img{width: 300px;}
#footerCon {display: flex; justify-content: space-between; align-items: center; padding-top: 170px; background-image: url(../img/footer_con_bg.jpg); background-repeat: no-repeat;}
#footR {display: flex; justify-content: space-between; align-items: end; gap: 20px;}
#footLink { float: left; width: 140px;}
#topUp { text-align: right; width: 1024px; margin-left: auto; margin-right: auto;}

address{text-align: center; padding-block: 60px 40px;}

.footer-banner{height: 100px; aspect-ratio: 16/9;  display: block; border-radius: 4px; background: no-repeat center/contain;}
.fb01{height: 60px; background-image:  url("../img/footer_banner02.png");border: 1px solid #ddd;}
.fb02{background: no-repeat bottom center/contain url("../img/footer_contact.png");}

/* btn
------------------------------------------------------------*/
.btn{background-color:#c4ba67;border-radius:4px;width:200px;text-align:center; padding:1rem;display: block; text-decoration: none;font-weight: bold;}
.btn a{display:block;text-decoration:none;color:#FFF;}
#banner{width:220px;}
#contact{float:left;width:80%;}
.footR_left{float:left;height:41px;padding-top:41px;padding-left:14px;font-size:11px;text-align:left;width:52%;}
.footR_right{float:right;width:100%;}
#footer_link{float:left;width:100%;margin-top:30px;}
.fb-like-box{float:right;width:24%;height:60px;text-align:right;}


@media screen and (max-width: 767px) {

  img{width: 100%;}

  #page{display: block;}

  :root { --btn-size: 50px; --btn-gap: 10px; --page-margin: 15px; }

  #telBtn { display: flex; justify-content: center; align-items: center; position: fixed; top: var(--page-margin); right: calc(var(--page-margin) + var(--btn-size) + var(--btn-gap)); width: var(--btn-size); height: var(--btn-size); background: #fff; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; z-index: 2000; text-decoration: none; box-sizing: border-box; }
  #telBtn svg { width: 22px; height: 22px; fill: #333; }
  #hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; top: var(--page-margin); right: var(--page-margin); width: var(--btn-size); height: var(--btn-size); background: #CEC36C; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; cursor: pointer; z-index: 2000; padding: 0; box-sizing: border-box; }
  #hamburger p { margin: 0 0 4px 0; font-size: 10px; font-weight: bold; color: #333; line-height: 1; font-family: sans-serif; }
  #hamburger span { display: block; width: 24px; height: 2px; background: #333; margin: 2px auto; transition: all 0.3s ease-in-out; }
  #hamburger.active span:nth-child(2) { transform: translateY(6px) rotate(45deg); }
  #hamburger.active span:nth-child(3) { opacity: 0; }
  #hamburger.active span:nth-child(4) { transform: translateY(-6px) rotate(-45deg); }
  #gNav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; flex-direction: column; margin: 0; border-radius: 0; background-color: #CEC36C; z-index: 1000; padding-top: 80px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.3s ease; gap: 0; }
  #gNav.active { opacity: 1; visibility: visible; transform: translateY(0); }
  #gNav li { width: 100%; flex: 0 0 auto; border-right: none; box-shadow: none; border-bottom: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
  #gNav li:last-child { border-bottom: none; box-shadow: none; }
  #gNav li h3 a { padding-block: 1.5rem; }

  #gNav li.has-child > h3 > a{position:relative;}
  #gNav li.has-child > h3 > a::after{position:absolute;top:50%;right:20px;margin-top:-3px;}
  .sub-menu{position:static;width:100%;box-shadow:inset 0 3px 10px rgba(0,0,0,0.15);background-color:#c4ba67;}
  .sub-menu li a{padding-left:2em;text-align:center;font-size:14px;}
  #gNav li.has-child.active > h3 > a::after{transform:rotate(180deg);}


  body { min-width: auto; width: 100%; overflow-x: hidden; }
  #utility, #page, #footerCon, #topUp { width: 100%; max-width: 100%; box-sizing: border-box; padding-left: 15px; padding-right: 15px; }
  #header { height: 400px; background-size: cover; }
  #logo { width: 100px; }
  #page { display: block; }
  #con { width: 100%; max-width: 100%; justify-content: center; }
  .pickup img,.topics_tt img,#logo img { width: 100%; }
  #banner { width: 100%; float: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
  #banner h5 { width: 48%; max-width: 220px; }
  #banner h5:nth-of-type(1) { order: 1; } #banner h5:nth-of-type(2) { order: 5; } #banner h5:nth-of-type(3) { order: 2; } #banner h5:nth-of-type(4) { order: 3; } #banner h5:nth-of-type(5) { order: 6; } #banner h5:nth-of-type(6) { order: 4; }
  #banner img { width: 100%; height: auto; }
  .center_btn { margin-left: 0; }
  footer { height: auto; padding-bottom: 20px; background: none; border-top: thin solid #ddd; }
  #footerCon { display: block; padding-top: 40px; background: none; }
  #footLogo { width: 100%; margin-top: 0; margin-bottom: 30px; text-align: center; }
  #footLogo a img{width: 60%; margin-bottom: 10px;}
  #footR { width: 100%; justify-content: center; margin: auto; text-align: center; float: none; background: none;}
  .fb01{height: 14vw;}
  .fb02{height: 24vw;}
  .footR_right { float: none; width: 100%; display: flex; justify-content: center; }
  address { width: 100%; padding-block: 20px 10px; margin-top: 40px; box-sizing: border-box; border-top: thin solid #ddd; }

  .btn{font-size: 2.2vw;}

}


#gNav li.has-child{position:relative;}
#gNav li.has-child > h3 > a{position:relative;display:block;}
#gNav li.has-child > h3 > a::after{content:''; position: absolute; top: 80%; left: 50%; transform: translateX(-50%); width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #333;vertical-align:middle;transition:transform .3s;}
.sub-menu{display:none;background-color:#CEC36C;list-style:none;z-index:9999;margin:0;padding:0;}
.sub-menu li{border:none!important;box-shadow:none!important;border-top:1px solid rgba(255,255,255,0.4)!important;}
.sub-menu li a{display:block;color:#333;text-decoration:none;font-size:13px;text-align:left;padding:12px 10px;}
.sub-menu li a:hover{background-color:rgba(255,255,255,0.4);}

@media screen and (min-width: 767px) {
  #gNav li.has-child:hover .sub-menu{display:block;position:absolute;top:100%;left:0;width:100%;min-width:200px;box-shadow:0 5px 10px rgba(0,0,0,0.2);}
   #gNav li.has-child:hover > h3 > a::after{transform:translateX(-50%) rotate(180deg);}
}
@media screen and (max-width: 767px) {
  #gNav li.has-child > h3 > a::after{position:absolute;top:50%;right:20px; left: auto; margin-top:-3px;margin-left:0;}
  .sub-menu{position:static;width:100%;box-shadow:inset 0 3px 8px rgba(0,0,0,0.15);background-color:#c4ba67;}
  .sub-menu li a{text-align:center;}
  #gNav li.has-child.active > h3 > a::after{transform:rotate(180deg);}

}