@charset "utf-8";
/* CSS Document */
@font-face {
 font-family: "noto";
 font-style: normal;
 font-weight:normal; line-height:100%;
 src: url('../fonts/notosans_regular.woff') format('woff'), url('../fonts/notosans_regular.ttf') format('truetype');
}
.noto { font-family:"noto" !important; }

@font-face {
 font-family: "noto";
 font-style: normal;
 font-weight:bold; line-height:100%;
 src: url(../fonts/notosans_bold.ttf) format('woff'), url('.../fonts/notosans_bold.ttf') format('truetype');
}
.noto { font-family:"noto" !important; }
.sp {  display: none;}
.pc {  display: block;}
a { text-decoration:none; }
ul{ list-style:none }
html{ width:100vw !important; overflow-x:hidden; margin:0 !important; padding:0 !important}
body{ width:100vw !important; overflow-x:hidden; margin:0 !important; padding:0 !important}
img {vertical-align: bottom;}
section{ margin:0; padding:0; width:100vw}
.banner{ margin:50px auto; text-align:center;}
.news{height:420px; margin:50px auto; width:80%; display: flex; flex-flow: row wrap;
justify-content: space-between;}
.newsline { width: 70% !important; height:100%;  padding: 0 5px; background-color: #8CC11F;  box-sizing: border-box;}
.newsline>div { padding: 10px 15px; height:100%; background-color: #fff; border-radius: 15px; box-sizing: border-box; }
.newsline .ttl{ font-family:"noto" !important; color: #8CC11F; margin:20px auto 0 auto; text-align:center; font-size:20px !important; 
font-weight:bold;}
.newsline .ttlline{border-top:3px solid #8CC11F; width:70px; margin:5px auto; height:20px; display:block !important }
.newsline dl{ width:90%; margin:10px auto; padding:0 10px; box-sizing:border-box; display: flex; border-bottom:#8CC11F 2px dotted; font:"noto" !important; font-weight:bold; font-size:16px; line-height:24px }
.newsline dl dt{ width:30%;color: #8CC11F; }
/*.newsline dl dt.new::before {content: "NEW"; margin-right: 14px; color: #f39800;}*/
/*.newsline dl dt.old::before {content: ""; margin-right: 54px; color: #f39800;}*/
.newsline dl dd{ width:90%; margin-inline-start:auto;}
.newsline dl dd a{color:#000;  }
.newsline dl dd::before{ content: "/"; padding:0 10px; box-sizing:border-box; color: #8CC11F; }
.newssns { width: 24% !important; height:420px;  padding:20px !important; box-sizing: border-box; background:#8CC11F}
.newssns .ttl{ font-family:"noto" !important; color:#FFF; margin:0 auto; text-align:center; font-size:20px !important; 
font-weight:bold;}
.newssns .ttlline{border-top:3px solid #FFF; width:70px; margin:5px auto; height:20px; display:block !important }
.snsbt{  width:100%; margin:10px 0 0 0; padding:0; box-sizing:border-box; background-color:#FFF;
color: #8CC11F;font-family:"noto" !important; font-size:12px; text-align:center}
.snsbt a{color: #8CC11F; display:block; width:90%; margin:0 auto; padding:15px;
 box-sizing:border-box; background:url(../img/top/arrow.jpg) center right no-repeat}
 .newsbt{  width:200px !important; margin:50px auto 20px auto !important;  background-color:#8CC11F !important;}
 .newsbt a{color:#FFF !important;  background:url(../img/top/arrow1.png) center right no-repeat !important;}
 .newsspace{ height:235px;}
 
.field{margin:0 auto !important; padding:0 !important; text-align:center !important; border:none !important; }
.hougan {  padding:0 0 30px 0 !important; margin:0 !important;  position: relative;  width:100%; 
 background-image: linear-gradient(#F3994D 2px, transparent 0),
                    linear-gradient(90deg, #F3994D 2px, transparent 0),
                    linear-gradient(#F3994D 1px, transparent 0),
                    linear-gradient(90deg, #F3994D 1px, transparent 0);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
.pickupbase { display: flex; width:100vw; margin:0; padding:50px 0 10px 0 !important;align-items: center; position:relative; z-index:10;
 overflow: hidden; background: linear-gradient(180deg, #FFF 0%, #FFF 20%, #8CC11F 20%, #8CC11F 100%)}
.pickupicon{ position:absolute; z-index:100; top:0; left:15% }

.message{ display: flex; width:80%; margin:50px auto !important; padding:0;justify-content: center; }
.message li{ margin:10px; width:25%; text-align:center;  } 
.message li img{ width:100%; max-width:280px; height: 100%;}
@keyframes loop-slide {
  from { transform: translateX(0);  }
  to { transform: translateX(-100%); }
} 

.department { display: flex;  flex-flow: row wrap; width:100%; padding:50px 0 0 0 !important;align-items: center; }
.department li { width:50%; padding:0 !important;align-items: center; background-repeat:no-repeat; background-size:100%; text-align:center; }
.department li h3{ color:#FFF;font-size:14px !important; line-height:24px !important; padding:10% 0 0 0 !important; margin:0 !important }
.department li h2{ color:#FFF;font-size:40px !important; line-height:40px !important; padding:5% 0 0 0 !important; margin:0 !important } 
.department li .bt{ display:inline-block; padding:15px 0 !important; margin:10px auto 20px auto !important; width:150px; height:40px; 
font-size:14px; line-height:14px; font-weight:bold; color:#000; background-image:url(../img/top/dp_grade.png); background-repeat:no-repeat } 

.bg_dot{ margin : 0; display: flex; width:100%;
  background-color:#FFF;
  background-image : radial-gradient(#CCC 13%, transparent 16%), 
  radial-gradient(#CCC 13%, transparent 16%);
   background-position: 0 0, 8px 8px; background-size: 16px 16px;}
.bg_dot div{ width:28vw; margin:50px 0} /*修正202203*/
.bg_dot div img{ width:100%; max-width:600px}

/*=======================================================
　　header
=======================================================*/
/* top nav */
header{ width:100%; margin:0; padding:0; z-index:1000; position:fixed; top:0; left:0; background-color:#FFF } /*修正202203*/
header .nav1{ background:#000;display: flex;  justify-content: flex-end; height:40px; font-size:12px; line-height:12px; margin:0; padding:0} 
header .nav1 img{ width:30px; margin:8px 25px 8px 0;} /*修正202203*/
header .nav1text{ margin:0; height:40px; padding:0 30px !important; display:block; background-color:#525252; color:#FFF; border-left:1px #000000 solid; box-sizing:border-box; line-height: 40px;} /*修正202203*/
/* global nav */
header .gnav {height:100px; min-width:1024px; width:80vw;  margin: 0 auto;  padding:0; font-size:12px !important; list-style:16px !important; 
font-weight:bold;  display: flex; justify-content: space-between;  position: static; }
header .gnav #logo{ margin:0; } /*修正202203*/
header .gnav #logo img{ margin:25px 0; } /*修正202203*/
header .gnavttl{ text-align:center; margin:0; padding:0; } /*修正202203*/
header .gnavttl a { display: block; } /*修正202203*/
header .gnavttl a { opacity: 1 !important; } /*修正202203*/
header .gnavttl img{ margin:0; } /*修正202203*/
header .gnavttl { width:8vw}
header .gnavttl:hover { background: rgba(143, 192, 49, 0.75);}
header .gnav p { display: block; color: black; margin:0 !important; padding:0 !important; height:32px  }
header .gnav2nd:not(.searchIcon) { 
  position: absolute; top: 140px; left: 0; z-index: 999; background: rgba(143, 192, 49, 0.75);
  width: 100%;  transition: .4s ease;  visibility: hidden;  opacity: 0; } /*修正202203*/
header .gnav2nd ul {  width: 980px;  margin: 0 auto;  padding: 20px 0 0;display:flex;  flex-flow: row wrap;justify-content: flex-start !important;}
header .gnav li:hover > div:not(.searchIcon) { visibility: visible;  opacity: 1;}
header .gnav2nd ul li { margin: 0 30px 20px 0; font-size:14px; line-height:24px; font-weight:normal}
header .gnav2nd ul li a {  color: black; padding:5px } /*修正202203*/
header .gnav2nd ul li a:hover {  color:#F60 !important; background:#FFF; }
header form, input {  margin: 0; }
header form {  position: relative; }
header .search{ display: flex; flex-flow: row wrap !important;justify-content: flex-start !important; 
width:342px; box-sizing:border-box; margin:0 !important; padding:0 !important;  } /*修正202203*/
header .search div{ box-sizing:border-box; margin:0 !important; padding:0 !important; height:40px !important }
header .search img{ width:104px; margin:10px 5px !important; padding:0 !important; } /*修正202203*/
header input[type="search"] { border:#999 1px solid !important;   border: 0;  height:30px; width:100%;  padding: 0 0 0 40px; position: absolute;  left:0;  top: 0; font-size:12px !important } /*修正202203*/
header input[type="image"] {  border: 0;  padding: 0;  width:20px;  height:20px;   position: absolute; left:10px; top:5px; font-size:12px !important} /*修正202203*/
header .spnav{ display:none}
/*=======================================================
　　slider
=======================================================*/
.bx-viewport{ width:100vw; margin:0 !important; padding:0 !important; box-sizing:border-box;}
.bxslider{ width:100vw; margin:0 !important; padding:0 !important; box-sizing:border-box }
.bxslider_1 .bxslider_2 .bxslider_3 { margin:0 !important; padding:0 !important; display: block!important; }
.bx-viewport .bxslider li .bxslider_1 li .bxslider_2 li .bxslider_3 li { display: block!important;}
.bxslider_1{ width:100vw; margin:0 !important; padding:0;}
.bxslider_2{ width:100vw; margin:0; padding:0;}
.bxslider_3{ width:100vw; height: 150px; margin:0; padding:0; }

.bxslider_1 li{ width:100vw; text-align:center !important; background:#000}
.bxslider_2 li{ width:25vw !important;}
.bxslider_3 li{ width:50vw !important; }
.bxslider_1 li img { width: auto; height:52vh; margin:0 auto 0 auto}
.bxslider_2 li img{ width:25vw; height:auto; object-fit: cover;}
.bxslider_3 li img{ width:50vw; height:auto; object-fit: cover;}

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

footer a {  color: black;}

#group {  background: #8CC11F;  font-weight: bold;}
#group .inner { width:1024px;  display: flex; align-items: center; justify-content: center; padding: 10px 0; margin: 0 auto;}
#group .inner > p {  position: relative; font-size:14px; width:200px; text-align:right}
#group .inner > p::before,
#group .inner > p::after {  content: ' ';  position: absolute;  width: 30px;  height: 30px;  border-right: 1px solid black;
  right: -10px; }
#group .inner > p::before {  transform: rotate(-25deg);  top: calc(50% - 21px);}
#group .inner > p::after {  transform: rotate(25deg);  top: calc(50% - 7px);}
#group h3{ display:none}
#group .inner ul { width:830px; font-size:10px !important; line-height:20px !important; }
#group .inner ul li { display: inline-block; padding:0 !important; margin:0 10px 0 0 !important; }



#footerMenu { padding: 30px 0; background:#000}
#footerMenu a { color:#FFF !important}
#footerMenu .inner { display: flex;  width: 980px;  margin: 0 auto;}
#footerMenu dl {  width: 20%;  border-left: 1px solid #FFF; color:#000;  padding-left: 10px;  font-size: 1.1rem;} 
#footerMenu dl:first-child {  width: 22%;}
#footerMenu dl dt { font-size:16px !important; line-height:26px !important; font-weight:bold; margin:0 0 10px 0; padding:0}
#footerMenu dl dd { font-size:12px !important; line-height:24px !important; padding:0; margin:0 } 
#footerMenu dl dd:last-child {  margin-bottom: 0;}

footer address { background:#FFF; /*width:100vw*/} /*修正202203*/
address dl {  display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding: 10px 0; max-width: 980px; width:100vw; margin: 0 auto !important; }
address dl dd + dd {  margin:0 0 0 10px !important; padding:0 !important}

.topfooternav {  padding: 20px 0; text-align: center; background-color:#FFF !important;}
.topfooternav ul {  display: flex;  justify-content: center;  margin: 0;}
.topfooternav ul li { margin: 0; padding:0; width:15%; max-width:120px}
.topfooternav a { color:#000 !important; font-size:11px;}
.topfooternav small {  font-size: 10px;  letter-spacing: 1px;}

@media print, screen and (max-width: 1024px) {
.news{height:auto;}
.newsline { width: 100% !important; }
.newssns { width: 49% !important; margin-top:20px}
.department li h3{ padding:5% 0 0 0 !important;}
.department li h2{font-size:26px !important;padding:3% 0 0 0 !important; margin:0 !important } 
.message{flex-flow: row wrap;}
.message li{ margin:0; width:50%; min-width:50%} 
.pc { display:none;}
.newssns { width: 90% !important; height:auto; margin:20px auto 0 auto }
.department li { width:100%;}
.nav1{ display:none !important}
.gnav{ display:none !important}
.spnav{ display:block !important; box-sizing:border-box; width :  -webkit-calc(100vw - 70px); height:60px; position:fixed; top:0; left:0; background-color:#FFF;
padding:0 !important; font-size:10px !important; line-height:11px !important; margin:0 !important ;}
.spnav a{ color:#8EBF37; display:block; text-align:center; }
.spnav p{ margin:0 !important; padding:0 !important}
.spnav img{ width: 100%; /*! margin-top: 5px; */}
header #logo{ padding: 10px;} /*修正202203*/
header #logo img{ height: 40px;}
#oc{float:right; padding:5px 20px}
#oc img{ width:30px; }
#shiryo{float:right; padding:5px 0}
#shiryo img{ width:30px;}
#group .inner { width:90vw !important;  display:block !important;}
#group p{ display:none}
#group h3{ display:block !important; font-size:14px !important; line-height:24px !important; margin:10px; padding:0}
#group .inner ul { width:100vw; margin:10px; padding:0; display: block !important; }
#group .inner ul li { display: block !important; padding:0 20px 0 0 !important; margin:0 !important; font-size:12px !important; line-height:24px !important; font-weight:normal }
address dl { flex-flow: row wrap; }
address dl dt { width:100vw; margin:0 0 10px 10px}

.bxslider_1{ margin:0 0 0 0 !important;}
.bxslider_2 li{ width:50vw !important;}
.bxslider_3 li{ width:70vw !important; }
.bxslider_1 li img { width:100vw; height:auto; margin:0 auto}
.bxslider_2 li img{ width:50vw !important;}
.bxslider_3 li img{ width:70vw !important; }

}
@media print, screen and (max-width: 868px) {
.message li{ margin:10px; width:80%;} 
.bg_dot { display:block; padding:30px 0}
.bg_dot div{ width:100% !important; margin:0 }
.bg_dot div img{  max-width:auto;}
.pc{ display:none !important}
address dl { width:90vw !important; margin:10px auto }
address dl dd { width:100vw; margin:0 0 10px 10px}
.bxslider_3 li{ width:100vw !important; }
.bxslider_3 li img{ width:100vw !important; }
.topfooternav { text-align:left;}
.topfooternav ul { flex-flow: row wrap;}
.topfooternav ul li { width:100vw; max-width:868px}
.topfooternav small{ padding:30px 0 !important; text-align:center; display:block }
/*.newsline dl dt.new::before {content: "NEW"; margin-right: 0px; color: #f39800; display:block}*/
/*.newsline dl dt.old::before {content: ""; margin-right: 0px; color: #f39800; display:block}*/
.newsline dl dd{ width:60%; margin-inline-start:auto;}
}


/*=====================================================================================
TOP slider thumbnail

=====================================================================================*/

.bxslider_thumbnail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  margin: 0 auto;
  padding: 10px 0 0 0;
  width: 70%;
}

.bxslider_thumbnail > li {
  width: calc(100% / 4 - 15px);
}

.bxslider_thumbnail > li > a {
  display: block;
  padding-top: 14px;
}

.bxslider_thumbnail > li > a > img {
  width: 100%;
}

.bxslider_thumbnail a.active,
.bxslider_thumbnail a:hover {
    background:url(/20017/images/active.png) no-repeat center top;
}

@media print, screen and (max-width: 1024px) {

.bxslider_thumbnail {
  justify-content: unset;
  padding: 10px 10px 0 10px;
}
.bxslider_thumbnail > li {
  width: calc(100% / 4 - 4px);
  margin-right: 5px;
}
.bxslider_thumbnail > li:nth-of-type(4n) {
  margin-right: 0;
}
ul#btmMenu {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  background: white;
  padding: 5px 0;
  margin: 0;
  z-index: 1000;
}
ul#btmMenu a {
  display: block;
  text-align: center;
}
ul#btmMenu li {
  width: 25%;
}
ul#btmMenu li + li {
  border-left: 2px solid #999;
}
ul#btmMenu li img {
  max-width: 80px;
}

}

@media print, screen and (max-width: 320px) {
	ul#btmMenu li img {
		max-width: 70px;
	}
}