@charset "UTF-8";

/*****************************
  top
*****************************/
.topmain{
  margin-top: 100px;
}
.topsec{
  padding: 10rem 0;
}
@media only screen and (max-width: 1200px) {
  .topmain{
    margin-top: 90px;
  }
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec{
    padding: 8rem 0;
  }
  /* .topmain{
    margin-top: 0;
  } */
}

/*****************************
topsec-firstview
*****************************/
.topsec-firstview{
  padding: 0;
}
.topsec-firstview .topslider{
  height: calc(65vh - 100px);
}
.topsec-firstview .topslider .slick-list,
.topsec-firstview .topslider .slick-track,
.topsec-firstview .topslider .slick-slide{
  height: 100%;
}
.topsec-firstview .bg{
  height: 100%;
  position: relative;
  margin-left: auto;
  width: 60%;
}
.topsec-firstview .catch{
  background: #0ae;
  clip-path: polygon(0 0, 70% 0, 90% 100%, 0% 100%);
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 60%;
}
.topsec-firstview .catch .catchttl,
.topsec-firstview .catch .catchttl span{
  color: #fff;
  font-weight: bold;
}
.topsec-firstview .catch .catchttl{
  font-size: 2vw;
  padding-left: 1.5vw;
}
.topsec-firstview .catch .catchttl span{
  display: inline-block;
  font-size: 3vw;
  line-height: 1.2;
}
.topsec-firstview .catch .catchttl1 span,
.topsec-firstview .catch .catchttl3 span{
  font-size: 3.4vw;
}
.topsec-firstview .catch .catchttl2 span{
  margin-bottom: 1vw;
}
.topsec-firstview .catch .catchttl2{
  font-size: 1.6vw;
}
.topsec-firstview .catch .catchttl4{
  line-height: 1.4;
}
.topsec-firstview .catch .catchttl4 span{
  margin: 1vw 0;
}
.topsec-firstview .catch .catchttl5{
  line-height: 1.4;
}
.topsec-firstview .catch .catchttl5 span{
  margin: 1vw 0;
}
.topsec-firstview .catch .catchttl6{
  line-height: 1.4;
}
.topsec-firstview .catch .catchttl6 span{
  margin: 1vw 0;
}

.topsec-firstview .slidecredit{
  background: rgba(0, 0, 0,.4);
  color: #fff;
  font-size: 0.7vw;
  padding: 0 1rem;
  position: absolute;
  right: 0;
  bottom: 0;
}

@media only screen and (max-width: 1280px) {
  .topsec-firstview .topslider {
    height: calc(90vh - 100px);
  }
}
@media only screen and (max-width: 1200px) {
  .topsec-firstview .topslider {
    height: calc(80vh - 90px);
  }
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .topsec-firstview .bg {
    width: 100%;
  }
  .topsec-firstview .catch{
    clip-path: none;
    top: auto;
    bottom: 0;
    height: 35%;
    width: 90%;
  }
  .topsec-firstview .catch .catchttl{
    font-size: 3vw;
    line-height: 1.4;
    padding-left: 3rem;
  }
  .topsec-firstview .catch .catchttl span{
    font-size: 4.6vw;
    margin: .8vw 0;
  }
  .topsec-firstview .catch .catchttl1 .br2,
  .topsec-firstview .catch .catchttl4 .br4{
    display: none;
  }
  .topsec-firstview .slidecredit{
    font-size: 1rem;
    top: 0;
    bottom: auto;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec-firstview .topslider {
    height: 400px;
  }
  .topsec-firstview .bg {
    height: 250px;
    width: 100%;
  }
  .topsec-firstview .catch {
    padding: 0 3vw;
    position: static;
    height: 150px;
    width: 100%;
  }
  .topsec-firstview .catch .catchttl{
    padding: 0;
  }
  .topsec-firstview .catch .catchttl1{
    font-size: 4.5vw;
  }
  .topsec-firstview .catch .catchttl1 span{
    font-size: 5.5vw;
    margin: .5rem 0;
  }
  .topsec-firstview .catch .catchttl2 {
    font-size: 3.9vw;
  }
  .topsec-firstview .catch .catchttl2 span {
    font-size: 6.5vw;
    margin: 0 0 .5rem;
  }
  .topsec-firstview .catch .catchttl3 {
    font-size: 5vw;
  }
  .topsec-firstview .catch .catchttl3 span {
    font-size: 6.5vw;
    margin: .5rem 0 0 ;
  }
  .topsec-firstview .catch .catchttl4 {
    font-size: 4.5vw;
  }
  .topsec-firstview .catch .catchttl4 span {
    font-size: 5.8vw;
    margin: 0 0 .5rem ;
  }
  .topsec-firstview .catch .catchttl5 {
    font-size: 4.5vw;
  }
  .topsec-firstview .catch .catchttl5 span {
    font-size: 5.8vw;
    margin: 0 0 .5rem ;
  }
  .topsec-firstview .catch .catchttl6 {
    font-size: 4.5vw;
  }
  .topsec-firstview .catch .catchttl6 span {
    font-size: 5.8vw;
    margin: 0 0 .5rem ;
  }
  .topsec-firstview .catch .catchttl4 .br4{
    display: block;
  }
  .topsec-firstview .slidecredit{
    top: auto;
    bottom: 0;
  }
}

/*****************************
topsec-pickup
*****************************/
.topsec-pickup{
  padding-bottom: 3rem;
}
.topsec-pickup .pickuplist {
  gap: 2rem;
}
.topsec-pickup .pickuplist li{
  width: calc(100% / 3 - 1.5rem);
}
.topsec-pickup .pickuplist li a {
  border-radius: 6px 6px 0 0 ;
  display: flex;
  flex-direction: column;
  opacity: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
}
.topsec-pickup .pickuplist li a p{
  border-bottom: 1px solid #707070;
  background: #fff;
  display: flex;
  align-items: center;
  opacity: 1 !important;
  padding: 1rem 3rem 1rem 1rem;
  position: relative;
  text-decoration: none;
  transition: .5s;
  height: 100%;
  width: 100%;
}
.topsec-pickup .pickuplist li a span{
  background: #fff;
  border: 1px solid #0B97D2;
  border-radius: 50%;
  padding: .7rem;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  transition: .5s;
}
.topsec-pickup .pickuplist li a span::before{
  content: "";
  background: #0B97D2;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 4px;
  width: 4px;
}
.topsec-pickup .pickuplist li a:hover p{
  background: #0B97D2;
  border-color: #fff;
  color: #fff;
}
.topsec-pickup .pickuplist li a:hover span{
  background: #fff;
  padding: 1rem;
  right: 7px;
}
.topsec-pickup .pickuplist li a:hover span::before{
  background: transparent;
  border-radius: 0;
  border-style: solid;
  border-color: transparent transparent transparent #0B97D2;
  border-width: 5px 0px 5px 8.66px;
  height: 0;
  width: 0;
}

@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .topsec-pickup .pickuplist{
    margin: 0 auto;
    width: 80%;
  }
  .topsec-pickup .pickuplist li{
    width: 100%;
  }
  .topsec-pickup .pickuplist li a{
    border-radius: 6px 0 0 6px;
    display: flex;
    flex-direction: row;
    height: 100%;
  }
  .topsec-pickup .pickuplist li a .imgbox{
    width: 160px;
  }
  .topsec-pickup .pickuplist li a .imgbox img{
    object-fit: cover;
    height: auto;
    width: 100%;
  }
  .topsec-pickup .pickuplist li a p{
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    padding: 0 3rem 0 1.5rem;
    width: calc(100% - 80px);
    position: static;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-pickup .pickuplist{
    width: 100%;
  }
  .topsec-pickup .pickuplist li a .imgbox{
    width: 80px;
  }
  .topsec-pickup .pickuplist li a .imgbox img{
    aspect-ratio: 1/1;
    height: 100%;
    object-fit: contain;
  }
  .topsec-pickup .pickuplist li a p{
    font-size: 1.6rem;
  }
}

/*****************************
topsec-about
*****************************/
.topsec-about .box1{
  margin-top: 1rem;
  padding-top: 1rem;
}
.topsec-about .box1 .aboutmain{
  /* background-image: repeating-linear-gradient(-45deg, rgba(0, 170, 238, .05), rgba(0, 170, 238, .05) 3px, transparent 0, transparent 14px); */
  background: #e8f8ff;
  border: 2px solid #0ae;
  padding: 2rem;
  text-shadow: 1px 1px 0px #fff, -2px 1px 0px #fff, 1px -2px 0px #fff, -2px -2px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff, -2px -1px 0px #fff, -1px -2px 0px #fff, 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, -1px 2px 1px #fff, -2px -1px 1px #fff, -1px -2px 1px #fff;
}
.topsec-about .box1 .aboutmain > p{
  font-weight: bold;
}
.topsec-about .box1 .aboutmain ul{
  margin: 2rem 0 1rem;
}
.topsec-about .box1 .aboutmain ul li{
  font-weight: 500;
}
.topsec-about .box1 .morebtn1{
  margin-top: 3rem;
}

.topsec-about .box2 .area{
  margin-top: 2rem;
}
.topsec-about .box2 .fimgbox{
  margin: 0 auto;
  width: 600px;
}
.topsec-about .box2 .fbox{
  max-width: 300px;
  width: calc(100% - 630px);
}
.topsec-about .areatbl .at1,
.topsec-about .areatbl .at2,
.topsec-about .areatbl .at3{
  border: 1px solid #56bae5;
}
.topsec-about .areatbl .at2{
  margin: .5rem 0;
}
.topsec-about .areatbl .at1 > dt,
.topsec-about .areatbl .at2 dt,
.topsec-about .areatbl .at3 dt{
  background: #56bae5;
  color: #fff;
  padding: .5rem 1rem;
}
.topsec-about .areatbl .at1 dl dt,
.topsec-about .areatbl .at2 dt,
.topsec-about .areatbl .at3 dt{
  padding: .5rem 1rem;
  width: 180px;
}
.topsec-about .areatbl .at1 dl dt{
  background: #edf8fd;
}
.topsec-about .areatbl .at1 dl dd,
.topsec-about .areatbl .at2 dd,
.topsec-about .areatbl .at3 dd{
  padding: .5rem 1rem;
  text-align: center;
  width: calc(100% - 180px);
}
.topsec-about .staff{
  margin-top: 1rem;
}
.topsec-about .staff dt{
  margin-right: 1rem;
}
.topsec-about .box3 .fimgbox{
  width: 30%;
}
.topsec-about .box3 .fbox{
  width: 65%;
}
.topsec-about .box3 .fbox ul{
  margin: 3rem 0;
}
.topsec-about .box3 .fbox ul li{
  font-size: 1.8rem;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec-about .box1 .morebtn1{
    text-align: right;
  }
  .topsec-about .box2 .fimgbox {
    margin: 0 auto 2rem;
    width: 55%;
  }
  .topsec-about .box2 .fbox {
    width: 40%;
  }
  .topsec-about .box3 .fbox ul li{
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec-about .ttlbox1{
    text-align: center;
  }
  .topsec-about .box2 .fimgbox ,
  .topsec-about .box2 .fbox ,
  .topsec-about .box3 .fbox{
    width: 100%;
  }
  .topsec-about .box3 .fimgbox{
    margin: 2rem auto 0;
    width: 80%;
  }
}

/*****************************
topsec-content
*****************************/
.topsec-content{
  background: #F9F6F4;
}
.topsec-content .fbgbox{
  aspect-ratio: 16/9;
  background: url(../images/top/content_bg.webp) no-repeat center / cover;
  background-position-x: 5%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 48%;
}
.topsec-content .fbgbox span{
  color: #fff;
  font-size: 1.4rem;
  position: absolute;
  right: 5px;
  bottom: 2px;
  transform: none;
  text-align: left;
  text-shadow: 2px 2px #000;
  width: auto;
}
.topsec-content .fbox {
  margin-left: auto;
}
.topsec-content .fbox dl > div:not(:last-of-type){
  margin-bottom: 3rem;
}
.topsec-content .fbox dt{
  margin-bottom: 1rem;
}
.topsec-content .fbox dt .ttl{
  font-size: 2.4rem;
  font-weight: bold;
}
.topsec-content .morebtn1{
  margin-top: 1rem;
  text-align: right;
}
@media only screen and (max-width: 1180px) {
  .topsec-content .fbgbox{
    aspect-ratio: 4/3;
  }
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec-content .fbgbox{
    aspect-ratio: 16/9;
    margin: 0 auto 2rem;
    top: 0;
    position: relative;
    transform: none;
    width: 80%;
  }
  .topsec-content .fbox{
    margin: 0 auto;
    width: 80%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec-content .fbgbox,
  .topsec-content .fbox{
    width: 100%;
  }
  .topsec-content .fbgbox span{
    font-size: 1.2rem;
  }
}

/*****************************
topsec-news
*****************************/
.topsec-news .ttlbox .ttl{
  color: #afafaf;
  font-family: "Cormorant Garamond", serif;
  font-size: 11rem;
  line-height: 1;
}
.topsec-news input[type="radio"] {
  display: none;
}
.tnewsarea .tab_area {
  width: 180px;
}
.tnewsarea .selectarea {
  display: none;
}
.tnewsarea .panel_area_tnews{
  width: calc(100% - 220px);
}
.topsec-news .tab_area .ftab{
  background: #919191;
  color: #fff;
  margin-bottom: 1rem;
  position: relative;
  text-align: center;
  width: 100%;
}
.topsec-news .tab_area .ftab::before{
  content: "";
  aspect-ratio: 1/1;
  background: #fff;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  position: absolute;
  top: -1px;
  right: -1px;
  width: 20px;
}
.topsec-news .tab_area .ftab-activity-site{
  background: #5cb85c;
}
.topsec-news .tab_area .ftab-statements{
  background: #337ab7;
}
.topsec-news .tab_area .ftab-notice{
  /* background: #e156db; */
  background: #bd62f1;
}
.topsec-news .tab_area .ftab-emergency-support-and-appeals{
  background: #f39;
}
.topsec-news .tab_area .ftab-events{
  background: #f1a500;
}
.topsec-news .tab_area .ftab label{
  cursor: pointer;
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  padding: .3rem 0;
  position: relative;
  width: 100%;
  z-index: 1;
}
.topsec-news .tab_panel{
  display: none;
}
.topsec-news .tab_area .ftab:hover,
.topsec-news #tnewstab1:checked ~ .tnewsarea .tab_area .tnewsftab1,
.topsec-news #tnewstab2:checked ~ .tnewsarea .tab_area .tnewsftab2,
.topsec-news #tnewstab3:checked ~ .tnewsarea .tab_area .tnewsftab3,
.topsec-news #tnewstab4:checked ~ .tnewsarea .tab_area .tnewsftab4,
.topsec-news #tnewstab5:checked ~ .tnewsarea .tab_area .tnewsftab5,
.topsec-news #tnewstab6:checked ~ .tnewsarea .tab_area .tnewsftab6,
.topsec-news #tnewstab7:checked ~ .tnewsarea .tab_area .tnewsftab7{
  background: #0ae;
}

.topsec-news #tnewstab1:checked ~ .tnewsarea .panel_area #tnewspanel1,
.topsec-news #tnewstab2:checked ~ .tnewsarea .panel_area #tnewspanel2,
.topsec-news #tnewstab3:checked ~ .tnewsarea .panel_area #tnewspanel3,
.topsec-news #tnewstab4:checked ~ .tnewsarea .panel_area #tnewspanel4,
.topsec-news #tnewstab5:checked ~ .tnewsarea .panel_area #tnewspanel5,
.topsec-news #tnewstab6:checked ~ .tnewsarea .panel_area #tnewspanel6,
.topsec-news #tnewstab7:checked ~ .tnewsarea .panel_area #tnewspanel7{
  display:block;
}
.topsec-news .morebtn1{
  margin-top: 2rem;
  text-align: right;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec-news .ttlbox .ttl{
    font-size: 7rem;
  }
  .tnewsarea .tab_area{
    width: 150px;
  }
  .tnewsarea .panel_area_tnews{
    width: calc(100% - 180px);
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec-news .ttlbox .ttl{
    font-size: 5rem;
  }
  .tnewsarea .tab_area{
    display: none;
  }
  .tnewsarea .selectarea,
  .tnewsarea .panel_area_tnews{
    width: 100%;
  }
  .tnewsarea .selectarea{
    display: block;
    position: relative;
    margin-bottom: 2rem;
  }
  .tnewsarea .selectarea::before{
    content: "";
    aspect-ratio: 3/2;
    background: #0ae;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    width: 1.5rem;
  }
  .tnewsarea .selectarea select{
    border: 2px solid #0ae;
    border-radius: 50px;
    padding: 1rem 2rem;
    position: relative;
    width: 100%;
    z-index: 1;
  }
  .topsec-news .tab_panel.close{
    display: none !important;
  }
  .topsec-news .tab_panel.open{
    display: block !important;
  }
}

/*****************************
topsec-support
*****************************/
.topsec-support{
  background: #F9F6F4;
}
.topsec-support .ttlbox3 .enttl{
  color: #EFE6D8;
  opacity: 1;
}
.topsec-support .txt{
  margin: 4rem auto;
  max-width: 800px;
  text-align: center;
}
.topsec-support .support {
  gap: 2rem;
}
.topsec-support .support .fbox{
  background: #fff;
  border: 1px solid #ccc;
  padding: 1rem;
  width: calc(100% / 3 - 1.5rem);
}
.topsec-support .support .fbox > p{
  padding: 1rem;
}
.topsec-support .support .fbox img{
  border-radius: 3px;
}
.topsec-support .supportlinks {
  gap: 2rem;
}
.topsec-support .supportlinks li{
  width: calc(100% / 3 - 1.5rem);
}

@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec-support .txt {
    margin: 3rem 0 0;
    padding: 0 1rem;
    text-align: left;
  }
  .topsec-support .support .fbox,
  .topsec-support .supportlinks li{
    width: 100%;
  }
  .topsec-support .support .fbox .imgbox img{
    aspect-ratio: 2 / 1;
    object-fit: cover;
    height: auto;
    width: 100%;
  }
}

/*****************************
topsec-links
*****************************/
.topsec-links{
  padding: 0;
}
.topsec-links .toplinks .flink{
  height: 50vh;
  min-height: 450px;
  width: 33%;
}
.topsec-links .toplinks .flinkgr{
  width: 67%;
}
.topsec-links .toplinks .flinkgr .toplink{
  height: 50%;
}
.topsec-links .toplinks .toplink a{
  background: url(../images/top/links1.webp) no-repeat center / cover;
  background-position-x: 30%;
  display: block;
  opacity: 1;
  position: relative;
  height: 100%;
}
.topsec-links .toplinks .toplink2 a{
  background: url(../images/top/links2.webp) no-repeat center / cover;
}
.topsec-links .toplinks .toplink3 a{
  background: url(../images/top/links3.webp) no-repeat center / cover;
}
.topsec-links .toplinks .toplink a::before{
  content: "";
  background: rgba(0, 0, 0, .4);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: .5s;
}
.topsec-links .toplinks .toplink a span{
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  text-align: center;
  text-shadow: 2px 2px #000;
  width: 100%;
  z-index: 1;
}
.topsec-links .toplinks .toplink a:hover::before{
  opacity: 0;
}

.topsec-links .toplinks .toplink a .credit{
  font-size: 1rem;
  top: auto;
  right: 5px;
  bottom: 0;
  left: auto;
  transform: none;
  text-align: left;
  width: auto;
}
@media only screen and (max-width: 1180px) {
  .topsec-links .toplinks .flink{
    min-height: auto;
    height: 400px;
    width: 40%;
  }
  .topsec-links .toplinks .flinkgr{
    width: 60%;
  }
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec-links .toplinks .flink{
    height: 350px;
    width: 45%;
  }
  .topsec-links .toplinks .flinkgr{
    width: 55%;
  }
  .topsec-links .toplinks .toplink a span{
    font-size: 2.4rem;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .topsec-links .toplinks .flink,
  .topsec-links .toplinks .flinkgr{
    width: 100%;
  }
  .topsec-links .toplinks .toplink{
    height: 150px !important;
  }
  .topsec-links .toplinks .toplink a{
    background-position: center;
  }
  .topsec-links .toplinks .toplink a span{
    font-size: 2.2rem;
  }
}

/*****************************
  TOP READ
*****************************/
.topresdflex{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.topreadfbox1{
  width: 40%;
  margin-right: 20px;
}
.topreadfbox2{
  width: 57%;
}
.topreadfbox2 p{
  color: #0ae;
  font-size: 40px;
  font-weight: bold;
}
@media only screen and (max-width: 1024px) {
  .topreadfbox2 p{
    font-size: 36px;
  }
}
@media only screen and (max-width: 820px) {
  .topreadfbox2 p{
    font-size: 28px;
  }
}
@media only screen and (max-width: 767px) {
  .topreadfbox1 {
    width: 100%;
    margin-right: 0;
  }
  .topreadfbox2{
    width: 100%;
  }
  .topreadfbox2 p{
    font-size: 22px;
  }
}