@charset "UTF-8";

/*****************************
topccmn
*****************************/
.topsec{
  padding: 10rem 0;
}

@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;
  }
}

/*****************************
topsec-fv
*****************************/
.topsec-fv{
  /* aspect-ratio: 64 / 51; */
  background: url(../images/top/fv_pc.webp) no-repeat center / cover;
  padding: 0;
  height: 100vh;
  width: 100%;
}
.topsec-fv .maincatch{
  position: absolute;
  right: 12%;
  bottom: 27%;
  width: 40%;
}
.topsec-fv .links{
  background: rgba(0,75,120,.8);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.topsec-fv .links ul{
  gap: 1rem;
  margin: 0 auto;
  max-width: 1100px;
  position: relative;
  top: -2rem;
}
.topsec-fv .links li{
  width: calc(100% / 5 - 1rem);
}
.topsec-fv .links li a{
  background: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 1.5rem;
  line-height: 1.2;
  opacity: 1;
  padding: 2rem 1rem 1.5rem 0.5rem;
  transition: .5s;
}
.topsec-fv .links li a::before,
.topsec-fv .links li a::after{
  content: "";
  position: absolute;
  transition: .5s;
}
.topsec-fv .links li a::before{
  border-top: 1px solid #004b78;
  border-left: 1px solid #004b78;
  top: .5rem;
  left: .5rem;
  height: calc(100% - .5rem);
  width: calc(100% - .5rem);
}
.topsec-fv .links li a::after{
  content: "\f105";
  font: var(--fa-font-solid);
  top: 50%;
  right: 1.3rem;
  transform: translateY(-50%);
}
.topsec-fv .links li a span{
  display: inline-block;
  font-size: 1.7rem;
  font-weight: bold;
}
.topsec-fv .links li a span span{
  font-size: 1.5rem;
}
.topsec-fv .links li a:hover {
  background: #f29600;
  color: #fff;
  transform: translateY(-1rem);
}
.topsec-fv .links li a:hover::before{
  opacity: 0;
}

@media only screen and (max-width: 1180px) {
  .topsec-fv .maincatch {
    right: 7%;
    bottom: 24%;
    width: 45%;
  }
  .topsec-fv .links ul {
    max-width: 950px;
  }
  .topsec-fv .links li a,
  .topsec-fv .links li a span span{
    font-size: 1.3rem;
  }
  .topsec-fv .links li a span{
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 949px) {
  .topsec-fv .maincatch {
    right: 2%;
    bottom: 11%;
    width: 50%;
  }
  .topsec-fv .links{
    max-width: 320px;
    padding: 2rem;
  }
  .topsec-fv .links ul{
    top: 0;
  }
  .topsec-fv .links li{
    width: 100%;
  }
  .topsec-fv .links li a{
    flex-direction: row;
    justify-content: center;
  }
  .topsec-fv .links li a:hover {
    transform: none;
  }
}
@media only screen and (max-width: 820px) {
  .topsec-fv .maincatch {
    right: 0;
    bottom: 7%;
    width: 60%;
  }
  .topsec-fv .links {
    max-width: 300px;
  }
  .topsec-fv .links li a::after {
    right: 1rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-fv{
    background: url(../images/top/fv_sp.webp) no-repeat center / cover;
    height: 900px;
    width: 100%;
  }
  .topsec-fv .maincatch {
    bottom: 35rem;
    width: 85%;
  }
  .topsec-fv .links{
    max-width: 100%;
  }
  .topsec-fv .links ul {
    max-width: 300px;
  }
  .topsec-fv .links li a span {
    font-size: 1.6rem;
  }
}

/*****************************
topsec-topics
*****************************/
.topsec-topics .imgttl picture{
  margin: 0 auto 5rem;
  max-width: 380px;
}
.topsec-topics .topics{
  gap: 2rem;
}
.topsec-topics .topics li{
  width: calc(100% / 3 - 2rem);
}
.topsec-topics .topics li a{
  border-bottom: 1px solid #004b78;
  display: block;
  opacity: 1;
  transition: .5s;
}
.topsec-topics .topics li a:hover{
  background: #004b78;
  color: #fff;
}
.topsec-topics .topics li img{
  aspect-ratio: 1/1;
  object-fit: cover;
  height: auto;
  width: 100%;
}
.topsec-topics .topics li p{
  padding: .5rem 3rem .5rem .5rem;
  position: relative;
}
.topsec-topics .topics li p::before{
  content: "\f138";
  font: var(--fa-font-solid);
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}

@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-topics .imgttl picture{
    margin: 0 auto 3rem;
    max-width: 200px;
    max-width: 60%;
  }
  .topsec-topics .topics li{
    width: 90%;
  }
  .topsec-topics .topics li a{
    border: none;
  }
  .topsec-topics .topics li p{
    font-weight: 500;
  }
  .topsec-topics .topics li p::before{
    content: "\f105";
  }
}

/*****************************
topsec-oc
*****************************/
.topsec-oc .imgttl{
  margin: 0 auto 4rem;
  max-width: 680px;
}
.topsec-oc .catch{
  text-align: center;
}
.topsec-oc .catch .ttl{
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.topsec-oc .catch .txt p{
  font-weight: 500;
}

.ocbox .ttlbox{
  margin: 4rem 0;
  text-align: center;
}
.ocbox .ttlbox::before,
.ocbox .ttlbox::after{
  content: "";
  background: url(../images/top/ob_oc_ttl_pc.svg) repeat-x center / cover;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 40%;
  width: calc((100% - 350px) / 2);
}
.ocbox .ttlbox::after{
  left: auto;
  right: 0;
}
.ocbox .ttlbox .ttl{
  display: inline-block;
  font-size: 2.4rem;
  font-weight: 500;
  z-index: 1;
}

.ocslider li{
  background: #fff;
  padding: 0 .5rem .5rem 0;
  transition: .5s;
}
.ocslider li .ocarea{
  border-right: 1px solid #004b78;
  border-bottom: 1px solid #004b78;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.ocslider li .imgbox img{
  aspect-ratio: 3/2;
  object-fit: cover;
  height: auto;
  width: 100%;
}
.ocslider li .infotxt{
  line-height: 1.3;
  padding: 0 2rem;
}
.ocslider li .time,
.ocslider li .ttl{
  font-size: 2rem;
  font-weight: bold;
  padding: 1rem 0;
}
.ocslider li .time{
  border-bottom: 1px solid #004b78;
  font-size: 2.2rem;
  padding: 1rem 0;
}
.ocslider li .txt{
  line-height: 1.5;
}
.ocslider li .btnbox{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}
.ocslider li .btn a{
  background: #004b78;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-weight: bold;
  opacity: 1;
  padding: .5rem 2rem;
  position: relative;
  text-align: center;
  transition: .5s;
  width: 100%;
}
.ocslider li .blogbtn a{
  background: #e6ebf0;
  color: #004b78;
}
.ocslider li .btn a::before{
  content: "\f105";
  font: var(--fa-font-solid);
  position: absolute;
  top: 50%;
  right: 1.3rem;
  transform: translateY(-50%);
}
.ocslider li .btn a:hover{
  background: #fff;
  color: #004b78;
}
.ocslider li:has(.btn a:hover){
  background: #f29600;
  color: #fff;
}

.topsec-oc .mbtn1{
  margin-top: 5rem;
}
.topsec-oc .mbtn1 a .sp{
  display: none;
}

.topsec-oc .bnr{
  margin-top: 4rem;
  text-align: center;
}
.topsec-oc .bnr a{
  display: inline-block;
  opacity: 1;
  position: relative;
}
.topsec-oc .bnr a picture{
  transition: .5s;
}
.topsec-oc .bnr a .hov{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.topsec-oc .bnr a:hover picture{
  opacity: 0;
}
.topsec-oc .bnr a:hover .hov{
  opacity: 1;
}

@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-oc .imgttl{
    max-width: 340px;
  }
  .topsec-oc .catch .txt p{
    font-size: 3.8vw;
  }
  .ocbox .ttlbox {
    margin: 4.5rem 0 2rem;
    padding-top: 2rem;
  }
  .ocbox .ttlbox::before{
    background: url(../images/top/ob_oc_ttl_sp.svg) repeat-x center / cover;
    top: 0;
    left: 0;
    height: 1rem;
    width: 100%;
  }
  .ocbox .ttlbox::after{
    display: none;
  }
  .ocbox .ttlbox .ttl {
    font-size: 1.8rem;
  }
  .ocslider li .time{
    font-size: 2rem;
  }
  .ocslider li .ttl{
    font-size: 1.8rem;
    padding: 1rem 0 1.5rem;
  }
  .topsec-oc .mbtn1 a .pc{
    display: none;
  }
  .topsec-oc .mbtn1 a .sp{
    display: inline-block;
  }
  .topsec-oc .bnr {
    margin-left: -2rem;
    width: calc(100% + 2rem);
  }

}

/*****************************
topsec-cl
*****************************/
.topsec-cl{
  background-image: url();
  padding: 0;
}
.topsec-cl .photos{
  background: #fff;
  gap: .4rem;
  width: 30%;
}
.topsec-cl .photos > div{
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: calc(50% - .2rem);
}
.topsec-cl .main{
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4rem;
  padding: 2rem;
  width: 40%;
}
.topsec-cl .main .txt p{
  font-weight: 500;
  text-align: center;
}
.topsec-cl .main .imgttl{
  margin: 0 auto;
  width: 68%;
}
.topsec-cl .main ul {
  gap: 2rem;
  margin: 0 auto;
  max-width: 80%;
}
.topsec-cl .main ul li{
  text-align: center;
  width: 80%;
}
.topsec-cl .main ul li a{
  background: url(../images/top/bg_cl_link1.webp) no-repeat center / cover;
  color: #fff;
  display: block;
  font-size: 2rem;
  opacity: 1;
  padding: 1rem 2rem;
  position: relative;
  text-align: center;
}
.topsec-cl .main ul li:nth-of-type(2) a{
  background: url(../images/top/bg_cl_link2.webp) no-repeat center / cover;
}
.topsec-cl .main ul li:nth-of-type(3) a{
  background: url(../images/top/bg_cl_link3.webp) no-repeat center / cover;
}
.topsec-cl .main ul li a::before,
.topsec-cl .main ul li a::after{
  content: "";
  position: absolute;
}
.topsec-cl .main ul li a::before{
  background: rgba(0,75,120,.7);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: .5s;
}
.topsec-cl .main ul li a::after{
  content: "\f105";
  font: var(--fa-font-solid);
  top: 50%;
  right: 1.3rem;
  transform: translateY(-50%);
}
.topsec-cl .main ul li a span{
  font-weight: bold;
  position: relative;
  z-index: 1;
}
.topsec-cl .main ul li a:hover::before{
  background: rgba(242, 150, 0, .7);
}
@media only screen and (max-width: 1250px) {
  .topsec-cl .photos {
    width: 28%;
  }
  .topsec-cl .main {
    gap: 3rem;
    width: 44%;
  }
}
@media only screen and (max-width: 1180px) {
  .topsec-cl .main {
    justify-content: space-between;
    padding: 5rem 2rem;
  }
  .topsec-cl .main ul {
    gap: 1rem;
  }
}
@media only screen and (max-width: 1110px) {
  .topsec-cl .photos {
    width: 26%;
  }
  .topsec-cl .main {
    width: 48%;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .topsec-cl .photos,
  .topsec-cl .main{
    width: 100%;
  }
  .topsec-cl .photos{
    gap: .3rem;
  }
  .topsec-cl .photos > div{
    width: calc(100% / 3 - .2rem);
  }
  .topsec-cl .photos > div:not(:nth-child(-n+3)){
    display: none;
  }
  .topsec-cl .main{
    gap: 4rem;
    padding: 5rem 2rem 7rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-cl .main {
    gap: 2rem;
  }
  .topsec-cl .main .imgttl {
    max-width: 340px;
    width: 100%;
  }
  .topsec-cl .main .txt p{
    font-size: 3.7vw;
  }
  .topsec-cl .main ul{
    margin-top: 2rem;
    max-width: 100%;
  }
  .topsec-cl .main ul li{
    width: 90%;
  }
  .topsec-cl .main ul li a {
    font-size: 1.8rem;
    padding: 1.5rem 2rem;
  }
}

/*****************************
topsec-sns
*****************************/
.topsec-sns{
  color: #fff;
}
.topsec-sns .main .imgttl{
  margin-bottom: 3rem;
  max-width: 500px;
}
.topsec-sns .main .txt{
  max-width: 480px;
}
.topsec-sns .sns .fbox{
  background: #fff;
  flex-direction: column;
  gap: 1rem;
  padding: 3rem 2rem 2rem;
  width: 49%;
}
.topsec-sns .sns .fbox .ttl{
  margin: 0 auto;
  max-width: 350px;
}
.topsec-sns .sns .fbox .ttl img{
  width: 100%;
}
.topsec-sns .sns .fbox.yt .content {
  gap: 3rem;
  text-align: center;
}
.topsec-sns .sns .fbox.yt .item{
  width: 100%;
}
.topsec-sns .sns .fbox.yt .mov{
  margin: 0 auto;
  max-width: 400px;
}
.topsec-sns .sns .fbox.yt .mov .playbtn{
  background-color: #000;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.topsec-sns .sns .fbox.yt .mov .playbtn::before{
  content: "";
  aspect-ratio: 1/1;
  background: url(../images/ob/btn_playbtn.svg) no-repeat center / contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 75px;
}
.topsec-sns .sns .fbox.yt iframe{
  aspect-ratio: 16/9;
  height: auto;
  width: 100%;
}
.topsec-sns .sns .fbox.yt p{
  font-weight: 500;
  line-height: 1.4;
  margin-top: .8rem;
}
.topsec-sns .sns .mbtn2{
  margin-top: 2rem;
}

@media only screen and (max-width: 1180px) {
  .topsec-sns .sns .fbox.yt .mov {
    max-width: 370px;
  }
  .topsec-sns .sns .fbox.yt .mov .playbtn::before {
    width: 60px;
  }
  .topsec-sns .sns .fbox.yt p {
    font-size: 1.4vw;
  }
}
@media only screen and (max-width: 1080px) {
  .topsec-sns .main .imgttl {
    max-width: 460px;
  }
  .topsec-sns .main .txt {
    max-width: 450px;
  }
  .topsec-sns .main .txt p{
    font-size: 1.5rem;
  }
  .topsec-sns .sns .fbox.yt .mov {
    max-width: 310px;
  }
  .topsec-sns .sns .fbox .ttl {
    max-width: 250px;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .topsec-sns .main {
    margin-bottom: 4rem;
    text-align: center;
  }
  .topsec-sns .main .fimgbox{
    display: none;
  }
  .topsec-sns .main .fbox{
    width: 100%;
  }
  .topsec-sns .main .imgttl {
    margin: 0 auto 3rem;
    max-width: 260px;
    padding-right: 1.5rem;
  }
  .topsec-sns .main .txt{
    max-width: 100%;
  }
  .topsec-sns .sns {
    gap: 4rem;
    justify-content: center;
  }
  .topsec-sns .sns .fbox{
    padding: 3rem 2rem 4rem;
    width: 80%;
  }
  .topsec-sns .sns .fbox.yt .content {
    margin-top: 2rem;
  }
  .topsec-sns .sns .fbox.yt .mov {
    max-width: 90%;
  }
  .topsec-sns .sns .fbox.yt p {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-sns .main .imgttl {
    max-width: 220px;
  }
  .topsec-sns .sns .fbox {
    padding: 3rem 2rem 4rem;
    width: 95%;
  }
  .topsec-sns .sns .fbox .ttl {
    max-width: 180px;
  }
  .topsec-sns .sns .fbox.yt .mov {
    max-width: 100%;
  }
  .topsec-sns .sns .fbox.yt p {
    display: none;
  }
}

/*****************************
topsec-line
*****************************/
.topsec-line .ttlbox{
  margin-bottom: 2rem;
  text-align: center;
}
.topsec-line .ttlbox .ttl{
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 500;
  padding: 0 2rem;
  position: relative;
}
.topsec-line .ttlbox .ttl span{
  font-size: 2.3rem;
  font-weight: 500;
}
.topsec-line .ttlbox .ttl::before,
.topsec-line .ttlbox .ttl::after{
  content: "";
  background: #004b78;
  position: absolute;
  top: 50%;
  height: 50%;
  width: 1px;
}
.topsec-line .ttlbox .ttl::before{
  left: 0;
  transform: translateY(-50%) rotate(-45deg);
}
.topsec-line .ttlbox .ttl::after{
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}
.topsec-line .bnr{
  margin: 0 auto;
  max-width: 1000px;
  text-align: center;
}
.topsec-line .bnr .pc .cls-1 ,
.topsec-line .bnr .sp .cls-1 {
  fill: #06c755;
}
.topsec-line .bnr .pc .cls-2,
.topsec-line .bnr .pc .cls-3,
.topsec-line .bnr .pc .cls-4,
.topsec-line .bnr .pc .cls-5,
.topsec-line .bnr .sp .cls-2
.topsec-line .bnr .sp .cls-3
.topsec-line .bnr .sp .cls-4 {
  stroke: #004b78;
}
.topsec-line .bnr .pc .cls-2,
.topsec-line .bnr .pc .cls-3,
.topsec-line .bnr .pc .cls-4,
.topsec-line .bnr .pc .cls-6,
.topsec-line .bnr .sp .cls-2,
.topsec-line .bnr .sp .cls-3,
.topsec-line .bnr .sp .cls-4,
.topsec-line .bnr .sp .cls-5 {
  fill: none;
}
.topsec-line .bnr .pc .cls-2,
.topsec-line .bnr .pc .cls-4,
.topsec-line .bnr .sp .cls-2,
.topsec-line .bnr .sp .cls-4 {
  stroke-miterlimit: 10;
}
.topsec-line .bnr .pc .cls-2,
.topsec-line .bnr .pc .cls-6 {
  stroke-width: 3px;
}
.topsec-line .bnr .pc .cls-3,
.topsec-line .bnr .pc .cls-5,
.topsec-line .bnr .pc .cls-6,
.topsec-line .bnr .sp .cls-3,
.topsec-line .bnr .sp .cls-5 {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topsec-line .bnr .pc .cls-7 {
  fill: url(#linebnr_wb_pc-2);
}
.topsec-line .bnr .pc .cls-8 {
  fill: url(#linebnr_wb_pc-3);
}
.topsec-line .bnr .pc .cls-9 ,
.topsec-line .bnr .sp .cls-8 {
  fill: #fff;
}
.topsec-line .bnr .pc .cls-5,
.topsec-line .bnr .pc .cls-10,
.topsec-line .bnr .sp .cls-9 {
  fill: #004b78;
}
.topsec-line .bnr .pc .cls-6 {
  stroke: #fff;
}
.topsec-line .bnr .pc .cls-11,
.topsec-line .bnr .sp .cls-10 {
  fill: #f0e6dc;
}
.topsec-line .bnr .pc .cls-12 {
  fill: url(#linebnr_wb_pc);
}
.topsec-line .bnr .sp .cls-5 {
  stroke: #fff;
}
.topsec-line .bnr .sp .cls-6 {
  fill: url(#linebnr_wb_sp-2);
}
.topsec-line .bnr .sp .cls-7 {
  fill: url(#linebnr_wb_sp-3);
}
.topsec-line .bnr .sp .cls-11 {
  fill: url(#linebnr_wb_sp);
}
.topsec-line .bnr .sp {
  display: none;
}
.topsec-line .bnr a{
  opacity: 1;
}
.topsec-line .bnr .pc a .btn .cls-5,
.topsec-line .bnr .pc a .btn .cls-6,
.topsec-line .bnr .pc a .btn .cls-9,
.topsec-line .bnr .sp a .btn .cls-5,
.topsec-line .bnr .sp a .btn .cls-8,
.topsec-line .bnr .sp a .btn .cls-9{
  transition: .5s;
}

.topsec-line .bnr .pc a:hover .btn .cls-6,
.topsec-line .bnr .sp a:hover .btn .cls-5{
  stroke: #004b78;
}
.topsec-line .bnr .pc a:hover .btn .cls-9,
.topsec-line .bnr .sp a:hover .btn .cls-8{
  fill: #004b78;
}
.topsec-line .bnr .pc a:hover .btn .cls-5,
.topsec-line .bnr .sp a:hover .btn .cls-9{
  fill: #fff;
}

@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-line{
    padding: 5rem 0;
  }
  .topsec-line .ttlbox .ttl{
    font-size: 1.6rem;
  }
  .topsec-line .ttlbox .ttl span {
    font-size: 2.1rem;
  }
  .topsec-line .bnr .pc{
    display: none;
  }
  .topsec-line .bnr .sp{
    display: block;
  }
}