@import url("style_btn.css");

/* global */
.wrap {width:100%; position:relative; display:inline-block; margin-top:100px;}

.mainStr {width:1400px; margin:0 auto; max-width:calc(100% - 30px);}
.contStr {margin-left:auto; margin-right:auto; width:1400px; max-width:calc(100% - 30px);}

.contTitle {width:100%; margin:2.5rem 0 2rem; font-size:1.7rem; text-align:left;}
.contTitle span { position: relative; font-weight: 700; }
.contTitle span:after { content: ""; display: block; position: absolute; right: -35px; top: 0px; width: 24px; height: 27px; background: url("/images/common/title_rimg.png") no-repeat 0 0; }
.contTitle:hover span:after{animation:wind 1s 1;}

.subTitle {width:100%; margin:2.5rem 0 1.5rem; font-size:1.4rem; text-align:left; font-weight:600;}
.subTitle:before {content: "\f4d8";  left:0; top: 0; font-family: "Font Awesome 5 Free"; font-weight:600; font-size:1em; color:#ef8203; margin-right:0.5rem;}

.subTitle1 {width:100%; margin:2.5rem 0 1.5rem; font-size:1.4rem; text-align:left; font-weight:600;}
.subTitle1:before {content: "\f4d8";  left:0; top: 0; font-family: "Font Awesome 5 Free"; font-weight:600; font-size:1em; color:#ef8203; margin-right:0.5rem;}

.subTitle2 {width:100%; margin:2.5rem 0 1.5rem; font-size:1.3rem; text-align:left; font-weight:600; color:#b17f47;}
.subTitle2:before {content: "\f06c";  left:0; top: 0; font-family: "Font Awesome 5 Free"; font-weight:600; font-size:0.8em; color:#f7b263; margin-right:0.3rem;}

.pc_only {display:block;}
.mb_only {display:none;}

/* ¸ÞÀÎ ºñÁÖ¾ó */
.mainVisual {width:100%; display:inline-block; background:url('/images/main/main_visual.jpg'); background-size: cover; background-position: center;}
.mainVisualStr {width:1200px; max-width:calc(100% - 40px); margin:0 auto; margin-top:60px; position:relative; height:440px; font-size:1rem;}
.mainVisualStr .cont1 {font-size:2em; color:#6b6444;}
.mainVisualStr .cont1 div {line-height:1.3;}
.mainVisualStr .cont1 span {font-size:1.2em; color:#4a6a42; font-weight:700;}
.mainVisualStr .cont2 {font-size:1.5em; position:absolute; bottom:25px; color:#fff;}
.mainVisualStr .cont2 span {font-size:1.2em; font-weight:700;}

.mainVisualStr .cont2:hover  {animation:updown 1s 1;}


/* ¸ÞÀÎÄü ¿µ¿ª */
.mainQuickArea {width:100%; position:relative; display:inline-block; margin-top:2rem; font-size:1.6rem;}
.mainQuickArea ul { display:flex;  flex-wrap:wrap;  width:100%; gap:1.5rem;}
.mainQuickArea li {  flex:calc((100% / 3) - 1.5rem); -webkit-box-shadow:2px 2px 3px 0px rgba(0, 0, 0, 0.3); box-shadow:2px 2px 3px 0px rgba(0, 0, 0, 0.3); border-radius:0.5em; background-image: url('/images/main/main_quickbg02.jpg');  background-repeat: repeat;}
.mainQuickArea li:first-child {background-image: url('/images/main/main_quickbg01.jpg');}
.mainQuickArea li:last-child {background-image: url('/images/main/main_quickbg03.jpg');}
.mainQuickArea i {margin-right:0.5rem;}
.mainQuickArea a {color:#fff;  font-weight:700; position:relative; z-index:0; display:flex; width:100%; height:6em; text-align:center; -webkit-box-pack:center; justify-content:center; -webkit-box-align:center; align-items:center; -webkit-transition: all 0.2s ease-out;   transition: all 0.2s ease-out;}
.mainQuickArea a:hover  i {animation:wind 1s 1;}
.mainQuickArea a:hover  {animation:zoom 1s 1;}


/* ¸ÞÀÎ Á¤º¸ ¿µ¿ª */
.mainInfoArea {width:100%; position:relative; display:inline-block; margin-top:2rem; font-size:1rem;}
.mainInfoArea > ul { margin-left:-1.5rem;}
.mainInfoArea > ul > li {float:left; width:calc((100% - 4.5rem) / 3); margin-left:1.5rem; text-align:center;}
.mainInfoArea > ul > li .box { border-radius:0.5em; border:1px solid #ddd; width:100%; margin-top:1em; height:439px;}


/* ¸ÞÀÎ °øÁö»çÇ× */
.mainNotice {padding:30px 20px; font-size:1rem;}
.mainNotice > ul {width:100%; }
.mainNotice > ul > li {width:100%; border-bottom:1px solid #ddd; display:block;position:relative;}
.mainNotice > ul > li:last-child {border-bottom:0px;}
.mainNotice > ul > li > a {display:block; width:100%; padding:20px 0; overflow:hidden;}
.mainNotice > ul > li:last-child > a {padding-bottom:0px;}
.mainNotice > ul > li:first-of-type a {padding-top:0;}
.mainNotice > ul > li > a > .date {display:inline-block; float:left; width:80px; margin-right:10px; font-size:0.9em; color:#aaa; text-align:center; padding-top:30px;}
.mainNotice > ul > li > a > .date > span{display:block; color:#ef8203; font-size:1.5rem; font-weight:700; font-style:normal; position:absolute; margin-top:-50px; width:80px;}
.mainNotice > ul > li > a > .text {display:inline-block; float:left; width:calc(100% - 90px); font-style:normal; text-align:left; line-height:1.2}
.mainNotice > ul > li > a > .text > .subject{font-size:1.1rem; font-weight:400; max-height: 50px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mainNotice > ul > li > a > .text > p{font-size:1rem; color:#555; font-style:normal; margin-top:10px; max-height: 45px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.mainNotice > ul > li:hover {animation:zoom 1s 1;}


/* ¸ÞÀÎ Æ˾÷ */
.mainPopup {overflow:hidden; position:relative; width:100%;}
.mainPopup .popup_swiper {overflow:hidden; font-size:0;}
.mainPopup .popup_swiper img {width:100%; min-height:100%;}



/* ¸ÞÀÎ °üÇÒ±¸¿ª */
.mainCover {position:relative; text-align:center; overflow:hidden;}
.mainCover p { display: grid; align-items: center; min-height:440px;}
.mainCover img {max-width:100%;margin:auto;}
.mainCover:hover img {animation:zoom 1s 1;}


/* ¸ÞÀÎSNSÆ˾÷ */
.mainSnsPop {position:fixed; left:50%; margin-left:720px; top:150px;}
.mainSnsPop  li {border-radius:50px; overflow:hidden; width:100px; height:100px; margin-bottom:10px; position:relative;}
.mainSnsPop  li span {  position: absolute;  width: calc(100% + 2px);  height: calc(100% + 2px);  border: 3px solid #62ad2c;  border-radius: 100%;  border-top-color: #fef200;  border-bottom-color: #fef200;  animation: spin 4s infinite cubic-bezier(0.55, 0.15, 0.45, 0.85);  left:50%;  top:50%; }
.mainSnsPop  li:hover img {animation:wind 1s 1;}


/* ¸ÞÀΠŸÀÌƲ */
.mainTitle {text-align:center; font-size:1.8rem; width:100%; display:inline-block;}
.mainTitle span { position: relative; padding: 0px 0px 0px 0px; font-weight: 600;  border-bottom:2px solid #ddd;}
.mainTitle span:after { content: ""; display: block; position: absolute; right: -30px; top: 5px; width: 24px; height: 27px; background: url("/images/common/title_rimg.png") no-repeat 0 0; }
.mainTitle:hover span:after{animation:wind 1s 1;}


/* ¼­ºêºñÁÖ¾ó */
#subVisual {height:261px; position:relative; background: url("/images/common/sub_visualimg.jpg") no-repeat 0 0; background-position: center; width:100%;  border-bottom:1px solid #ddd;}
#subVisual > .subVisualStr {width:1260px; max-width:calc(100% - 40px); margin-left:auto; margin-right:auto; position:relative; vertical-align: middle; top:50%; transform: translateY(-50%);}
#subVisual > .subVisualStr > .subject {font-size:2rem; font-weight:700; color:#8c5c25;}
#subVisual > .subVisualStr > .subject:after {content:"\f004"; position:absolute; padding-left:0.2em; top: -0.1em;  font-family: "Font Awesome 5 Free"; font-weight:600; font-size:0.7em; color:#ca9291; -webkit-transform:rotate(20deg);transform:rotate(20deg);}
#subVisual > .subVisualStr > .text {padding-top:0.5rem; color:#cfa574;}


/* ¼­ºê¸Þ´º */
.subList {display:flex;   -webkit-box-shadow:2px 2px 5px 0px rgba(0, 0, 0, 0.1); box-shadow:2px 2px 5px 0px rgba(0, 0, 0, 0.3); border-radius:0.5rem;  border-top:1px solid #ddd;  overflow:hidden;}
.subList  > li {-webkit-box-flex:1; flex-grow:1;  padding:1.25rem 0; }
.subList  > li > a {position:relative; z-index:0; display:flex; width:100%; height:1.5rem; text-align:center; -webkit-box-pack:center; justify-content:center; -webkit-box-align:center; align-items:center;  border-left:1px solid #ddd;}
.subList  > li > a:before {content:''; top:50%; transform:translateY(-50%); position:absolute; left:0; z-index:-1; width:0; height:0;    -webkit-transition:all 0.2s; transition:all 0.2s;background:linear-gradient(180deg, #FAA61B 0%, #F36A22 100%); }

.subList  > li:hover a:before {width:calc(100% + 1px); height:4rem;}
.subList  > li.on a:before {width:calc(100% + 1px); height:4rem;}
.subList  > li:first-child > a {border-left:0px;}

.subList  > li.on > a, .subList  > li > a:hover {color:#fff;}


/* Ä«Å×°í¸®¸Þ´º */
#cateMenuLayer  {width: 100%; display:block; background:#fff; text-align:center; height:50px; overflow:hidden; border-bottom:1px solid #ddd; font-size:1rem; color:#000;}
#cateMenuLayer .cateMenuStr       {width:100%; max-width:1400px; display:inline-block;}

#cateMenuLayer button{position:relative;padding:0 10px;height:50px;text-align:left; font-size:1rem; background:#fff;  color:#000; box-sizing:border-box;width:100%;border-right:1px solid #ddd; font-weight:600;}
#cateMenuLayer button:after{content:'';position:absolute;top:50%;right:13px;margin:-3px 0 0 -5px;width:11px;height:6px;}
#cateMenuLayer ul {position:absolute;-webkit-box-sizing:border-box;z-index:20; width:201px; margin-top:-1px; margin-left:-1px; background:#fff; border:1px solid #ddd; }

.cateMenu1 button:after, .cateMenu2 button:after {background:url('/images/icon/select_arrow.png') no-repeat 95% 50%;-webkit-transform:rotate(180deg);transform:rotate(180deg); -webkit-transition: all 0.2s ease-out;   transition: all 0.2s ease-out;}
.cateMenu1:hover button:after, .cateMenu2:hover button:after{-webkit-transform:rotate(0deg);transform:rotate(0deg);}

.cateMenu0 {width:50px; z-index:20; text-align:center; float:left; height:50px; border-right:1px solid #ddd; border-left:1px solid #ddd;}
.cateMenu0 i {line-height:50px;}
.cateMenu0:hover i {animation:wind 1s 1;}
.cateMenu0 a {display:block;}

.cateMenu1{width:200px; z-index:20; text-align:left; float:left; height:50px;}
.cateMenu1 ul { display: none; }
.cateMenu1:hover ul{display:block;}

.cateMenu1 .cateList1 a{display:block;padding:0 10px;line-height:40px;text-decoration:none;}
.cateMenu1 .cateList1 a:hover{background-color:#ef8203; color:#fff;}

.cateMenu2{width:200px;z-index:20; text-align:left; float:left;  height:50px;}
.cateMenu2 ul { display: none; }
.cateMenu2:hover ul{display:block;}

.cateMenu2 .cateList2 a{display:block;padding:0 10px;line-height:40px;text-decoration:none;}
.cateMenu2 .cateList2 a:hover{background-color:#ef8203; color:#fff;}


/* footer */
#footerArea  {width:100%; position:relative; display:inline-block; font-size:1rem; line-height:150%; border-top:1px solid #ddd; padding-bottom:40px; color:#000; margin-top:3rem;}
#footerArea > .footerT {background:#959595;  text-align:center; }
#footerArea > .footerT > ul {display:table; margin-left:auto;  margin-right:auto;}
#footerArea > .footerT > ul > li {float:left;  text-align:center; position:relative;}
#footerArea > .footerT > ul > li  > a {color:#fff; font-size:1.1rem; padding:1.5rem 0.5rem; display:block;}
#footerArea > .footerT > ul > li  > a:before {content:''; left:0; top:50%; transform: translateY(-50%); position:absolute; height:1rem; width:1px; background:#fff;}
#footerArea > .footerT > ul > li:first-child > a:before {display:none;}
#footerArea > .footerS       {width:1400px; position:relative; margin:0 auto; padding-top:30px; text-align:center;  max-width:calc(100% - 30px);}
#footerArea > .footerS > p > span{margin-left:1rem;}
#footerArea > .footerS > p > span:after {content:":"; padding-left:0.25rem;  margin-right:0.25rem;}
#footerArea > .footerS > p > span:first-child{margin-left:0;}


/* ǥ */
.tablebox             {width:100%; position:relative; overflow:hidden;}
.tableline             {border-top:3px solid #ef8203; border-collapse:collapse; background:#FFFFFF; position:relative; width:calc(100% + 1px); font-size:1rem; margin-left:-1px; text-align:center;}
.tableline th          {border-left:1px solid #ddd; border-bottom:1px solid #ddd; background-color:#F5F5F5; padding:1.2rem 0;}
.tableline td          {border-left:1px solid #ddd; border-bottom:1px solid #ddd; padding:1.2rem 0.5rem;}


@media (max-width: 1700px) {
  /* ¸ÞÀÎSNSÆ˾÷ */
  .mainSnsPop { left:auto; margin-left:0px; top:150px; right:20px;}
  .mainSnsPop  li {border-radius:40px; width:80px; height:80px; margin-bottom:5px;}
  .mainSnsPop  li img {width:100%;}
}


@media (max-width: 1400px) {
  /* Àüü */
  .wrap {margin-top:80px;}

  .mainQuickArea {font-size:1.4rem;}
  .mainQuickArea a {height:4em;}

  /* Á¤º¸¿µ¿ª */
  .mainInfoArea > ul > li {width:calc((100% - 3rem) / 2); margin-top:2rem;}
  .mainInfoArea > ul > li:first-child {width:calc(100% - 1.5rem); margin-top:0; }
  .mainInfoArea > ul > li:first-child .box {height:auto;  min-height:auto;}

  /* ¼­ºê ºñÁÖ¾ó */
   #subVisual {background: url("/images/common/sub_visualimg_mb.jpg") no-repeat 0 0; background-size: cover; background-position: right;}
  #subVisual {height:220px;}

  /* ¼­ºê¸Þ´º */
.subList  > li {padding:0.75rem 0; }
  .subList  > li > a:hover:before {height:3rem;}
  .subList  > li.on > a:before {height:3rem;}
  .subList.shot {display: flex; flex-wrap: wrap;gap: 0.25em;  -webkit-box-shadow:none; box-shadow:none; border-top:0px solid #ddd;}
  .subList.shot > li { flex: 1 1 calc((100% / 2) - 0.25em); border:1px solid #ddd;border-radius:0.5rem; overflow:hidden; }
  .subList.shot > li > a {border-left:0px;}
  .subList.shot > li.on > a:before {width:100%; height:auto; height:3rem;}
  .subList.shot > li > a:hover:before {width:100%; height:auto; height:3rem;}

}


@media (max-width: 1200px) {

}



@media (max-width: 1024px) {
  /* Àüü */
  .wrap {margin-top:60px;}
  .contTitle span:after {right: -25px; top: 0px; width: 17px; height: 20px; background-size: cover; background-position: center;}

  /* ¸ÞÀκñÁÖ¾ó */
  .mainVisualStr {margin-top:30px; height:370px;}
  .mainVisualStr .cont2 {bottom:15px;}

  /* ¸ÞÀÎÄü¿µ¿ª */
  .mainQuickArea ul {gap:0.5rem; }
  .mainQuickArea li {flex:100%;}
  .mainQuickArea a {height:4em;}

  /* °øÁö»çÇ× */
  .mainNotice {padding:15px 15px;}
  .mainNotice > ul > li > a > .date {width:100%; margin-right:0px; font-size:1.1em; text-align:left;  padding-top:0px; color:#000; margin-bottom:10px;font-weight:700;}
  .mainNotice > ul > li > a > .date > span{position:relative; margin-top:0px; display:inline; width:auto; font-size:1rem; color:#000; padding-left:3px;}
  .mainNotice > ul > li > a > .date > span:after { content: "."; display: block; position: absolute; left: 0px; top:0px; width: 10px; height: 10px;}
  .mainNotice > ul > li > a > .text {width:100%;}

  /* ¸ÞÀÎÁ¤º¸¿µ¿ª */
  .mainInfoArea > ul {margin-left:0;}
  .mainInfoArea > ul > li {width:100%; margin-left:0;}
  .mainInfoArea > ul > li:first-child {width:100%; margin-left:0; }
  .mainInfoArea > ul > li .box {height:auto;  min-height:auto;}


  /* °üÇÒ±¸¿ª */
  .mainCover p {  min-height:auto;}
  .mainCover img {position:relative;}


  /* ¸ÞÀÎSNSÆ˾÷ */
 .mainSnsPop  li {border-radius:30px; width:60px; height:60px}

  /* ¸ÞÀΟÀÌƲ */
  .mainTitle {font-size:1.6rem;}
  .mainTitle span:after {right: -20px; top: 1px; width: 15px; height: 17px; background: url("/images/common/title_rimg.png") no-repeat 0 0; background-size: cover; background-position: center;}

  /* ¼­ºê ºñÁÖ¾ó */
  #subVisual {height:180px;}
  #subVisual > .subVisualStr > .subject {font-size:1.6rem;}
  #subVisual > .subVisualStr > .text {padding-top:0.2rem;}

  /* Å×À̺í */
  .tableline th          { padding:0.9rem 0; }
  .tableline td          { padding:0.9rem 0.2rem; }
}


@media (max-width: 768px) {
  /* Àüü */
  .contTitle {font-size:1.5rem;}
  .mb_only {display:block;}
  .pc_only {display:none;}

  /* ¸ÞÀκñÁÖ¾ó */
  .mainVisualStr {height:190px; font-size:0.6rem;}
  .mainVisualStr .cont2 {bottom:10px;}

  /* ¸ÞÀÎÄü¿µ¿ª */
  .mainQuickArea {font-size:1.4rem;}

  /* ¸ÞÀÎSNSÆ˾÷ */
  .mainSnsPop {display:none;}

  /* ¼­ºê ºñÁÖ¾ó */
  #subVisual {height:130px;}

  /* footer */
  #footerArea > .footerT > ul > li  > a {font-size:1em; letter-spacing:-1; padding:1rem 0.5rem;}


  /* Ä«Å×°í¸® ¸Þ´º */
  #cateMenuLayer {min-width:auto;}
  .cateMenuStr {width:100%;}
  .cateMenu0 {display:none;}
  .cateMenu1,   .cateMenu2 {width:50%;}
  #cateMenuLayer ul {width:calc(50% + 1px);}

  /* Å×À̺í */
  .tableline th          { padding:0.7rem 0; }
  .tableline td          { padding:0.7rem 0.2rem; }
}


@media (max-width: 480px) {
}