@charset 'utf-8';

/* topimg
--------------------------------------------------*/
#topimg {
  width: 100%;
  height: 60vh;
  min-height: 400px;
  background-image: url(../images/topimg202602.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto ;
  z-index: 1;
  position:relative;
}

@media screen and (max-width: 8100px) {
#topimg {
  background-size: cover ;
}
}

@media screen and (max-width: 568px) {
#topimg {
  min-height: 300px;
}
}

.box-top{
  color:#FFF;
  font-family: 'Noto Sans Japanese', sans-serif;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top:-80px;
  width: 100%;
}

.box-top p{
  text-align: center;
  text-shadow:1px 1px 1px #000;
  font-size:1.5em;
  font-weight: 600;
}

.box-top h2{
  text-align: center;
  text-shadow:1px 1px 1px #000;
  margin-bottom:15px;
  font-size:3em;
  font-weight: 600;
}

@media screen and (max-width: 810px) {
.box-top p{
  font-size:1.3em;
}

.box-top h2{
  font-size:2em;
}
}

@media screen and (max-width: 568px) {
.box-top p{
  font-size:1.15em;
  font-weight: 500;
}

.box-top h2{
  font-size:1.5em;
  line-height:1.5
}
}

/* top-contents
--------------------------------------------------*/
#top-contents {
  position: relative;
  overflow: hidden;
  margin-top:-35px;
  z-index: 0;
}

/* top_info
--------------------------------------------------*/
.top_info{
  width:100%;
  padding:2%;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  z-index:2;
  margin:25px auto;
}

.top_info h3 {
  font-weight:600;
  font-size:2.5em;
  margin-bottom:2%;
  color:#DD2300;
  font-family: 'Noto Sans Japanese', sans-serif;
}


@media only screen and  (max-width: 810px) {
.top_info h3 {
  margin-bottom:15px;
  font-size:2em;
  line-height:1.4;
  }
}

@media only screen and  (max-width: 568px) {
.top_info h3 {
  margin-bottom:10px;
  font-weight:500;
  font-size:1.25em;
  }
}

.top_info p{
  line-height:2;
  font-size:1.1em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
  color:#1A0E5A;
}

@media screen and (max-width: 810px) {
.top_info p{
  font-size:1.15em;
  line-height:1.8;
  text-align: left;
  padding:0 1%;
}
}

@media screen and (max-width: 568px) {
.top_info p{
  font-size:1em;
  line-height:1.6;
}
}

.mar-gin{
  width:60%;
  margin:2% auto;
}

.mar-gin img{
  width:100%;
  height:auto;
}

.top_info ul{
  width:100%;
  max-width:950px;
  margin:3% auto 2%;
}

.top_info li {
  display:inline-block;
  width: 50%;
}

@media screen and (max-width: 650px) {
.top_info li {
  display:block;
  width: 100%;
  margin-bottom:1px;
}
}

.top_info li a {
  position: relative;
  display: block;
  height: 270px;
  padding-top: 33px;
  color: #424242;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
  font-size: 1.5em;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.4;
}

@media screen and (max-width: 810px) {
.top_info li a {
  padding-top: 15px;
  font-size: 1.25em;
  height: 220px;
}
}

.top_info li a .btm {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px 0 20px 0;
  color: #fff;
}
.top_info li a .btm span {
  display: inline-block;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
  font-size: 18px;
  text-align: left;
  vertical-align: middle;
}

@media screen and (max-width: 810px) {
.top_info li a .btm span {
  font-size: 15px;
}
}

.top_info li a .btm:after {
  display: inline-block;
  content: "\f0a9";
  margin-left: 20px;
  font-family: FontAwesome;
  font-size: 30px;
  vertical-align: middle;
}
.top_info li a img {
  position: absolute;
  top: 113px;
  left: 0;
  right: 0;
  margin: auto;
  width:auto;
  height:67px;
}

@media screen and (max-width: 810px) {
.top_info li a img {
  top: 80px;
}
}

.top_info li a:hover {
  opacity: 0.7;
}

.top_info .rde{color:#000;}
.top_info .grn{color:#000;}

.top_info li:nth-child(2) a {
  background: #FDAE48;
}
.top_info li:nth-child(2) a .btm {
  background: #F78B00;
}
.top_info li:nth-child(1) a {
  background: #6BD1D0;
}
.top_info li:nth-child(1) a .btm {
  background: #03A8A6;
}
.top_info li:nth-child(3) a {
  background: #a3c5e2;
}
.top_info li:nth-child(3) a .btm {
  background: #8cb7db;
}

/* category_list
--------------------------------------------------*/
.category_list {
  width: 100%;
  margin:0 auto 3%;
  position: relative;
  z-index:1;
}

@media screen and (max-width: 810px) {
.category_list {
  padding:0 2%;
  box-sizing: border-box;
  margin:0 auto 1%;
}
}

.category_list .sv_ttl{
  font-size: 2.4em;
  background:#3CA803;
  color:#FFF;
  padding:10px 30px;
  display:block;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
  margin-bottom:3%;
  position: relative;
  text-align: center;
}

@media only screen and  (max-width: 810px) {
.category_list .sv_ttl{
  font-size:1.7em;
  
}
}

@media only screen and  (max-width: 568px) {
.category_list .sv_ttl{
  font-size:1.25em;
  padding:10px 2px;
  display:block;
}
}

.category_list .sv_ttl::after {
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 content: ' ';
 border: 10px solid transparent;
 border-top-color: #3CA803;
}

.category_list .sv_text{
  line-height:2;
  font-size:1.25em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
  color:#1A0E5A;
  text-align: center;
  margin-bottom:2%;
}

@media screen and (max-width: 810px) {
.category_list .sv_text{
  font-size:1.15em;
  line-height:1.8;
  text-align: left;
  padding:10px 1% 0;
}
}

@media screen and (max-width: 568px) {
.category_list .sv_text{
  font-size:1em;
  line-height:1.6;
}
}

.category_list li{
  box-sizing: border-box;
  -webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
  background:#FFF;
  display:inline-block;
  vertical-align:top;
  position: relative;
  overflow: hidden;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
}

.category_list a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 100%;
  z-index: 2;
}

.category_list a:hover {
  opacity: 0.7;
  z-index: 2;
}

.category_list .w50{
  width: 48%;
  margin:1%;
}

.category_list .w50 a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 100%;
}

.category_list .w50 a:hover {
  background-color: #fff;
  opacity: 0.4;
  z-index: 1;
}

.category_list .w30{
    width: 31.3333%;
	margin:1%;
}

.category_list .w30 a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 100%;
}

.category_list .w30 a:hover {
  background-color: #fff;
  opacity: 0.4;
  z-index: 1;
}

@media screen and (max-width: 810px) {
.category_list .w50{
  width: 47%;
  margin:1.5%;
}

.category_list .w30{
  width: 47%;
  margin:1.5%;
}
}

@media screen and (max-width: 568px) {
.category_list .w50{
  width: 96%;
  margin:2%;
}

.category_list .w30{
  width: 96%;
  margin:2%;
}
}

.ct-wrapper {
  width:100%;
  height:auto;
  position: relative;
  overflow: hidden;
 display:block;
}

.ct-wrapper .h_photo{
  width: 100%;
  height:auto;
  margin:0;
  position: relative;
  overflow: hidden;
}

.ct-wrapper .h_photo img{
  width: 100%;
  height:auto;
}

.category_list li .h_photo {
  position: relative;
  overflow: hidden;
}

.cat_txt {
  width:100%;
  position: relative;
  overflow: hidden;
  display:block;
  box-sizing: border-box;
  padding:5px 15px 15px;
}

@media screen and (max-width: 568px) {
.cat_txt {
  width: 100%;
  height:auto;
  padding:5px 10px 10px;
}
}

.cat_txt h3{
  font-size:1.25em;
  margin-top:8px;
  margin-bottom:6px;
  line-height:1.4;
  color:#D22300;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
}

@media screen and (max-width: 810px) {
.cat_txt h3{
  font-size:1.15em;
}
}

.cat_txt p{
  font-size:13px;
  line-height:1.6;
}

/* contact-box
--------------------------------------------------*/
.contact-box {
  width: 100%;
  margin:0 auto 5%;
  position: relative;
  z-index:1;
  text-align: center;
}

@media screen and (max-width: 810px) {
.contact-box {
  padding:0 2%;
  box-sizing: border-box;
}
}

.contact-box dl{
  width:100%;
  max-width:800px;
  margin:3% auto;
}

@media screen and (max-width: 810px) {
.contact-box dl{
  width:96%;
}
}

.contact-box dt{
  width:50%;
  display:inline-block;
  vertical-align:top;
  position: relative;
  padding:2%;
  box-sizing: border-box;
  background-color: #E42901;
  color:#FFF;
}

@media screen and (max-width: 810px) {
.contact-box dt{
  width:100%;
}
}

.contact-box dt a {
  color:#FFF;
  text-decoration: none;
}

.contact-box dt a:hover {
  color:#FFF;
  text-decoration: none;
}

.contact-box dd{
  width:50%;
  display:inline-block;
  vertical-align:top;
  position: relative;
  padding:2%;
  box-sizing: border-box;
  background: #12044D;
  color:#FFF;
}

@media screen and (max-width: 810px) {
.contact-box dd{
  width:100%;
}
}

.contact-box dd a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 100%;
}

.contact-box dd a:hover {
  opacity: 0.4;
  z-index: 1;
  background-color: #FFF;
}

.contact-box .nmb{
  font-size:1.25em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
}

@media screen and (max-width: 810px) {
.contact-box .nmb{
  font-size:1.15em;
}
}

.contact-box .ml{
  font-size:1.25em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
}

@media screen and (max-width: 810px) {
.contact-box .ml{
  font-size:1.15em;
}
}

.contact-box .fas{
  margin-right:5px;
}

.contact-box .tm{
  margin-top:5px;
  font-size:14px;
}


@media screen and (max-width: 810px) {
.contact-box .tm{
  font-size:13px;
}
}