@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main {margin:0;padding:0;border:0;font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
body {font-family:Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
wbr:after {content:"\00200B";}

/*	TBS reset
============================== */
.alt {position:absolute;top:-5000px;left:-9999px;}
.clearfix:after {content:"";clear:both;display:block;}
.hide-txt {text-indent:110%;white-space:nowrap;overflow:hidden;}
.fp-causion {display:none;}
.nocontxt {-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;-webkit-user-drag:none;}
.nocontxt img {pointer-events: none;}
@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
div.embed-tbsplayer {
background-color:#000;
position:relative;
height:0;
padding-top:56.25%;
}
div.embed-tbsplayer .tbs-player {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
div.embed-tbsplayer-audio {
background-color:#fff;
}
div.embed-tbsplayer-audio .tbs-player {
height:46px;
}
div.lbx-overlay {
z-index:10000;position:absolute;background-color:#000;width:100%;height:100%;left:0;top:0;right:0;bottom:0;opacity:0.9;
}

/* -----------------------------------------------------------
   COMMON
------------------------------------------------------------*/

a { text-decoration:none;}
a:hover { text-decoration:none;}
a:visited { text-decoration:none;}

.alt{
    position: absolute;
    top: -5000px;
    left: -9999px;
}
.small{
    font-size: 80%;
}
img.img{
  width: 100%;
}
@media screen and (min-width: 768px) {
    .smp-br{
        display: none;
    }
}
@media screen and (max-width: 767px) {
  .pc-br{
      display: none;
  }
}


/* -----------------------------------------------------------
   BASE
------------------------------------------------------------*/
html{
    font-size: 62.5%;
}
body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-feature-settings: "palt";
    font-family: 'Noto Sans JP', sans-serif;
    color: #1A1A1A;
    letter-spacing: 0.08em;
}

.l-container{
  overflow: hidden;
}

.l-main .l-main-inner > section{
  padding: min(63px, 3.8vw) 0;
  margin: 0 auto;
}
.l-main > .l-main-inner  > section  .l-inner h2.common-ttl,
.l-main > section  .l-inner h2.common-ttl{
  text-align: center;
  margin-bottom: min(40px,2.4vw);
}
.l-main > .l-main-inner  > section  > .l-inner h2.common-ttl .ttl-en,
.l-main > section  > .l-inner h2.common-ttl .ttl-en{
  width: 100%;
  display: block;
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 3.5rem;
  letter-spacing: 0.04em;
  color: #0050FF;
  position: relative;
}
.l-main > .l-main-inner  > section  .l-inner h2.common-ttl .ttl{
  width: 100%;
  display: block;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 3.5rem;
  letter-spacing: 0.1em;
  color: #0050FF;
  position: relative;
}
.l-main > .l-main-inner  > section  > .l-inner h2.common-ttl .ttl-en:after,
.l-main > section  > .l-inner h2.common-ttl .ttl-en:after,
.l-main > .l-main-inner  > section  .l-inner h2.common-ttl .ttl:after{
  content: "";
  display: block;
  background-color: #0050FF;
  width: 60px;
  height: 1px;
  margin: 0.4em auto 0;
}

.l-main > .l-main-inner  > section  > .l-inner h2.common-ttl .ttl-jp,
.l-main > section  > .l-inner h2.common-ttl .ttl-jp{
  display: inline-block;
  color: #0050FF;
  font-weight: 400;
  font-size: clamp(1.4rem , 1.2vw , 1.6rem);
  margin-top: 2.0em;
  letter-spacing: 0.06em;
  line-height: 1.8;
}


@media screen and (min-width: 1024px) {
  .wrap{
    position: relative;
    overflow: hidden;
    padding-left: min(23%,300px);
  }

	.l-main > section  > .l-inner,
  .l-main > .l-main-inner  > section  > .l-inner,
  .l-main > .bn-wrap  > section  > .l-inner{
		max-width: 1260px;
		margin: 0 auto;
		position: relative;
	}

}
@media screen and (max-width : 1023px) {
  .l-main .l-main-inner > section{
    padding: min(40px, 10.66vw) 0;
    margin: 0 auto;
  }
	.l-main > section  > .l-inner,
  .l-main > .l-main-inner  > section  > .l-inner,
  .l-main > .bn-wrap  > section  > .l-inner{
		width: 90%;
		margin: 0 auto;
		position: relative;
    padding-right:0;
    padding-left: 0;
	}
  .l-main > .l-main-inner  > section  > .l-inner h2.common-ttl,
  .l-main > section  .l-inner h2.common-ttl{
    text-align: center;
    line-height: 1.4;
  }
  .l-main > .l-main-inner  > section  > .l-inner h2.common-ttl .ttl-en,
  .l-main > section  > .l-inner h2.common-ttl .ttl-en,
  .l-main > section  > .l-inner h2.common-ttl .ttl,
  .l-main > .l-main-inner > section .l-inner h2.common-ttl .ttl{
    font-size: clamp(2.0rem ,5.3vw , 3.6rem);
    letter-spacing: 0.04em;
  }
  .l-main > .l-main-inner  > section  > .l-inner h2.common-ttl .ttl-jp,
  .l-main > section  > .l-inner h2.common-ttl .ttl-jp{
    font-size: clamp(1.0rem ,2.6vw , 1.4rem);
    line-height: 1.6;
    margin-bottom: 0.6em;
    margin-top: 1.5em;
  }
}
/* -----------------------------------------------------------
   NAV
------------------------------------------------------------*/
@media screen and (min-width: 1024px) {
  .l-nav{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #E8EBEB;
    height: 100%;
    width: min(23%,300px);
  }
  .l-nav.is-active{
    animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  }
  .l-nav::before{
    content: "";
    display: block;
    position: absolute;
    top: 170px;
    right: 0;
    background-image: url(../img/nv_bg_image1.png);
    background-size: cover;
    width: 50%;
    height: 0;
    padding-top: calc(77.3% * 0.5);
  }
  .l-nav::after{
    content: "";
    display: block;
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-image: url(../img/nv_bg_image2.png);
    background-size: cover;
    width: 36.6%;
    height:0;
    padding-top: calc(100% * 0.366);
  }
  .l-nav .l-nav-inner{
    padding: 22px;
  }
  .l-nav .l-nav-inner .l-tbslogo{
    width: 55px;
    margin-bottom: 30px;
  }
  .l-nav .l-nav-inner .l-tbslogo img{
    width: 100%;
    height: 0;
    padding-top:45%;
    background-image: url(../img/logo_tbs.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .l-nav .l-nav-inner .l-logo{
    margin-bottom: min(85px,5.0vw);
  }
  .l-nav .l-nav-inner .l-logo img{
    width: 100%;
    height: 0;
    padding-top:47.61%;
    background-image: url(../img/logo_aec.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .l-nav .l-nav-inner .l-logo h1{
    text-indent: -9999px;
  }
  .l-nav .l-nav-inner nav{
    padding: 0 min(60px , 2.4vw);
    position: relative;
    z-index: 100;
  }
  .l-nav .l-nav-inner nav ul.nav li.nav-btn{
    margin-bottom: 3.0em;
  }
  .l-nav .l-nav-inner nav ul.nav li.nav-btn a{
    color: #0050FF;
    font-size: clamp(1.7rem,1.4vw,2.0rem);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .3s;
  }
  .l-nav .l-nav-inner nav ul.nav li.nav-btn a .arrow{
    content: "";
    display: inline-block;
    position: relative;
    color: #0050FF;
    width: 0.4em;
    height: 0.4em;
    transform: translateX(-25%) rotate(45deg);
    text-indent: -9999px;
    transition: .3s;
    right: 0;
  }
  .l-nav .l-nav-inner nav ul.nav li.nav-btn a .arrow:before,
  .l-nav .l-nav-inner nav ul.nav li.nav-btn a .arrow:after{
    content: '';
    position: absolute;
    background: currentColor;
  }
  .l-nav .l-nav-inner nav ul.nav li.nav-btn a .arrow:before{
    top: 0;
    left: 0;
    right: 0;
    height: 0.06em;
  }
  .l-nav .l-nav-inner nav ul.nav li.nav-btn .arrow:after {
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.06em;
  }
  .l-nav .l-nav-inner nav ul.nav li.nav-btn a:hover .arrow{
    right: -10px;
  }
  .l-nav .l-nav-inner nav .sns-list{
    display: flex;
    list-style: none;
  }
  .l-nav .l-nav-inner nav .sns-list li{
    margin-right: 6%;
  }
  .l-nav .l-nav-inner nav .sns-list li:last-child{margin-right: 0;}
  .l-nav .l-nav-inner nav .sns-list a{
    display: block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    text-indent: -9999px;
    background-size: cover;
    transition: 0.6s ;
    opacity: 1.0;
    transition: .3s;
    position: relative;
    top: 0;
    background-color: #0050FF;
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .l-nav .l-nav-inner nav .sns-list .x a{
    background-image:url(../img/logo_x.svg);

  }
  .l-nav .l-nav-inner nav .sns-list .ig a{
    background-image:url(../img/logo_ig.svg);
  }
  .l-nav .l-nav-inner nav .sns-list a:hover{
    top: 5px;
    transition: all 200ms ease-out;
  }
  .l-nav .l-nav-inner nav .cop-list{
    display: none;
  }
}
@media screen and (max-width : 1023px) {

  .l-nav .l-nav-inner{
    position: relative;
    width: 100%;
    height: max(65px,17.33vw);
    background-color: #FFF;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 3.4%;
  }
  .l-nav .l-nav-inner .l-tbslogo{
    width: 14%;

  }
  .l-nav .l-nav-inner .l-tbslogo img{
    width: 70%;
    height: 0;
    padding-top: calc(44.99% * 0.7);
    background-image: url(../img/logo_tbs.svg);
    background-repeat: no-repeat;
  }
  .l-nav .l-nav-inner .l-logo{
    width: 54%;
  }
  .l-nav .l-nav-inner .l-logo span,
  .l-nav .l-nav-inner .l-logo a{
    width: 100%;
    display: flex;;
    justify-content: flex-end;
    border-left: #707070 solid 1px;
  }
  .l-nav .l-nav-inner .l-logo img{
    width: 90%;
    height: 0;
    padding-top: calc(24.17% * 0.9);
    background: url(../img/logo_aec_smp.svg) no-repeat;
    background-position:  center right;
    background-size: contain;

  }
  .l-nav .l-nav-inner .l-logo h1{
    text-indent: -9999px;
  }
  .l-nav .nav-inner nav{
    transition: all .6s;
    overflow-y: auto;
    padding: min(50vw , 188px) 0 0;
    width: 50%;
    z-index: 200;
    top: 0;
    right: -100%;
    position: fixed;
    text-align: center;
    box-sizing: border-box;
  }
  .l-nav .l-nav-inner .l-logo h1{
    text-indent: -9999px;
  }
  .nav_open .l-nav .nav-inner nav {
    right: 0;
    background-color: #1A1A1A;
    height: 88vh;
  }
  .nav_open .l-nav .nav-inner nav ul.nav{
    margin-bottom: min(13vw,50px);
    padding: 0 14%;
  }
  .nav_open .l-nav .l-nav-inner nav ul.nav li.nav-btn{
    margin-bottom: 3em;
  }
  .nav_open .l-nav .l-nav-inner nav ul.nav li.nav-btn a{
    color: #FFF;
    font-size: 1.4rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .3s;
  }
  .nav_open .l-nav .l-nav-inner nav ul.nav li.nav-btn a .arrow{
    content: "";
    display: inline-block;
    position: relative;
    color: #FFF;
    width: 0.5em;
    height: 0.5em;
    transform: translateX(-25%) rotate(45deg);
    text-indent: -9999px;
    transition: .3s;
    right: 0;
  }
  .nav_open .l-nav .l-nav-inner nav ul.nav li.nav-btn a .arrow:before,
  .nav_open .l-nav .l-nav-inner nav ul.nav li.nav-btn a .arrow:after{
    content: '';
    position: absolute;
    background: currentColor;
  }
  .nav_open .l-nav .l-nav-inner nav ul.nav li.nav-btn a .arrow:before{
    top: 0;
    left: 0;
    right: 0;
    height: 0.06em;
  }
  .nav_open .l-nav .l-nav-inner nav ul.nav li.nav-btn .arrow:after {
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.06em;
  }
  .nav_open .l-nav .l-nav-inner nav ul.nav li.nav-btn a:hover .arrow{
    right: -10px;
  }
  .l-nav .l-nav-inner .oc_btn {
    background-color: #1A1A1A;
    width: 50px;
    height: 50px;
    z-index: 300;
    top: 0;
    right: 0;
    cursor: pointer;
    position: fixed;

  }

  .hamburger_line {
    transition: all .6s;
    width: 22px;
    height: 1px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    background-color: #FFF;
    position: absolute;
  }

  .hamburger_line1 { top: 28px; }
  .hamburger_line2 { top:	20px; }

  .nav_open .hamburger_line1 {
    transform: rotate(45deg);
    top: 25px;
    left: 25%;
  }
  .nav_open .hamburger_line2 {
    transform: rotate(-45deg);
    top: 25px;
    left: 25%;
  }
  .nav_open #header .btn-top{
    left: 5%;

  }
  .l-nav .l-nav-inner nav .sns-list{
    display: flex;
    justify-content: center;
    list-style: none;
    margin-bottom: min(12vw,40px);
  }
  .l-nav .l-nav-inner nav .sns-list li{
    margin-right: 6%;
  }
  .l-nav .l-nav-inner nav .sns-list li:last-child{margin-right: 0;}
  .l-nav .l-nav-inner nav .sns-list a{
    display: block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    text-indent: -9999px;
    background-size: cover;
    transition: 0.6s ;
    opacity: 1.0;
    transition: .3s;
    top: 0;
    background-color: #FFF;
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .l-nav .l-nav-inner nav .sns-list .x a{
    background-image:url(../img/logo_x_smp.svg);

  }
  .l-nav .l-nav-inner nav .sns-list .ig a{
    background-image:url(../img/logo_ig_smp.svg);
  }
  .l-nav .l-nav-inner nav .cop-list{
    width: 94%;
    margin: 0 auto;
    display: flex;

    list-style: none;
  }
  .l-nav .l-nav-inner nav .cop-list li{
    text-align: center;
  }
  .l-nav .l-nav-inner nav .cop-list li.tbs{
    width: 30%;
  }
  .l-nav .l-nav-inner nav .cop-list li.tbs a{
    display: block;
    width: 100%;
  }
  .l-nav .l-nav-inner nav .cop-list li.tbs img{
    width: 50%;
    height: 50%;
  }
  .l-nav .l-nav-inner nav .cop-list li.policy{
    width: 70%;
    border-left: 1px solid #FFF;
  }
  .l-nav .l-nav-inner nav .cop-list li a{
    color: #FFF;
    font-size: 1.1rem;
  }
}

/* -----------------------------------------------------------
   HEADER
------------------------------------------------------------*/
#l-header,
#l-header-2nd{
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #DFE4E4;
}

#l-header .l-header-container{
  width: 90%;
  max-width: 1060px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  padding: 74px 0 56px;
}
#l-header-2nd .l-header-inner{
  width: 100%;
  height: 130px;
  background-image: url(../img/header_bg.png);
  background-size: cover;
  display: grid;
  grid-template: auto auto / auto;
  grid-gap: .5em;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-content: center;
}
#l-header-2nd .l-header-inner h1{
  font-family: "Roboto", serif;
  font-weight: 500;
  font-size: clamp(3.6rem,2.3vw,4.0rem);
  color: #FFF;
  text-align: center;
}
#l-header-2nd .l-header-inner .pagecaption {
  color: #ffffff;
  font-size: clamp(1.5rem, 1.3vw , 2rem);
  text-align: center;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media screen and (min-width: 1024px) {
  #l-header::before{
    content: "";
    display: block;
    background: url(../img/top_bg_image1.png) no-repeat;
    background-size: cover;
    position: absolute;
    right: 30%;
    top: 0;
    width: 8%;
    height: 0;
    padding-top: calc(3.95%* 0.8);
  }
  #l-header::after{
    content: "";
    display: block;
    background: url(../img/top_bg_image2.png) no-repeat left bottom;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 6px;
    width: 9%;
    height: 0;
    padding-top: calc(3.815%* 0.9);
  }
}
@media screen and (max-width : 1023px) {
  #l-header{
    padding: 0 ;
    background-color: #FFF;
  }
  #l-header::before{
    content: "";
    display: block;
    background: url(../img/top_bg_image_smp1.png) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26%;
    height: 0;
    padding-top: calc(45%* 0.26);
    opacity: 0.6;
  }
  #l-header::after{
    width: 50%;
    padding-top: calc(101.4%* 0.50);
    top: -1%;
  }
  #l-header .l-header-container{
    width: 90%;
    padding: 0 0 18vw;
  }
  #l-header-2nd .l-header-inner{
    height: 30vw;
    background-image: url(../img/header_bg_smp.png);
    padding: 0 20px;
    justify-content: flex-start;
  }
  #l-header-2nd .l-header-inner h1{
    font-family: "Roboto", serif;
    font-weight: 500;
    font-size: 2.7rem;
    color: #FFF;
    text-align: left;
  }
  #l-header-2nd .l-header-inner .pagecaption {
    text-align: left;
  }
}
/* -----------------------------------------------------------
   CAROUSEL SLIDER
------------------------------------------------------------*/

#l-header .l-header-container .carousel-swiper{
  overflow: visible;
}
.carousel-swiper .swiper-slide a{
  opacity: .3;
  display: block;
}
.carousel-swiper .swiper-wrapper .swiper-slide.swiper-slide-active a{
  opacity: 1.0;
}
.carousel-swiper .swiper-wrapper .swiper-slide img{
  width: 100%;
  aspect-ratio: 1060 / 590;
  background-size: cover;
}
/* pagerv */

@media screen and (min-width : 1024px) {

  .swiper-pagination{
    bottom: 26px !important;
  }
  .smp-swiper .carousel-swiper{
    display: none;
  }
}
@media screen and (max-width : 1023px) {

  .pc-swiper .carousel-swiper{
    display: none;
  }

  .carousel-swiper .swiper-wrapper .swiper-slide img{
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  /* pagerv */
  .swiper-pagination{
    bottom: 13px !important;
  }
}
/* -----------------------------------------------------------
   MODAL
------------------------------------------------------------*/
.modaal-container{
  max-width: none;
  background: transparent;
}
.modaal-wrapper .modaal-close{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #FFF;
}
.modaal-close:after,
.modaal-close:before{
  width: 2px;
  top: 13px;
  left: 18px;
  height: 12px;
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#0050FF
}
/* -----------------------------------------------------------
   ANIMATION
------------------------------------------------------------*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeup {
	0% {
	  transform: translate(0,30px);
	  opacity: 0;
	}
	80% {
	  opacity: 1;
	}
	100% {
	  opacity: 1;
	  transform: translate(0,0);
	}
}

@media screen and (max-width : 1023px) {
  @keyframes fadeup {
    0% {
      transform: translate(0,10px);
      opacity: 0;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: translate(0,0);
    }
  }
}

/* -----------------------------------------------------------
   TOPICS
------------------------------------------------------------*/

#l-topics .l-inner.is-active{
	animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
#l-topics .l-inner .topics-list{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: min(63px, 3.8vw);
}
#l-topics .l-inner .topics-list li{
  width: 22%;
  margin-right: 4%;
  letter-spacing: 0.14em;
}
#l-topics .l-inner .topics-list li:nth-child(4){
  margin-right: 0;
}
#l-topics .l-inner .topics-list li figure{
  margin-bottom: 18px;
}
#l-topics .l-inner .topics-list li figure img{
  width: 100%;
  height: 100%;
  transition: .3s ease;
}
#l-topics .l-inner .topics-list li a:hover figure img{
  transform:scale(1.1,1.1);
  transition:  .3s ease;
}
#l-topics .l-inner .topics-list li .tag-name{
  display: inline-block;
  background-color: #005AFF;
  color: #FFF;
  font-size: clamp(1.1rem , 1.1vw , 1.6rem);
  padding: 0.3em;
  margin-bottom: 0.8em;
}
#l-topics .l-inner .topics-list li .tpc-ttl{
  color: #000;
  font-size: clamp(1.2rem , 1.2vw , 1.8rem);
  line-height: 1.4;
  margin-bottom: 0.2em;
}
#l-topics .l-inner .topics-list li .tpc-txt{
  color: #1A1A1A;
  font-size: clamp(1.1rem , 1.1vw , 1.6rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 1em;
}
#l-topics .l-inner .topics-list li .tpc-date{
  color: #808080;
  font-size: clamp(1.2rem , 1.2vw , 1.8rem);
}
#l-topics .l-inner .topics-list li a:hover .tag-name,
#l-topics .l-inner .topics-list li a:hover .tpc-ttl,
#l-topics .l-inner .topics-list li a:hover .tpc-txt,
#l-topics .l-inner .topics-list li a:hover .tpc-date{
  opacity: .5;
  transition: .3s;
}

@media screen and (min-width : 1024px) {

  #l-topics .l-inner{
    width: 80%;
    max-width: 1260px;
    margin:0 auto ;
  }
}

@media screen and (max-width : 1023px) {
  #l-topics:after{
    content: "";
    display: block;
    background: url(../img/top_bg_image5.png) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    bottom: 13px;
    width: 16%;
    height: 0;
    padding-top: calc(100% * 0.16);
  }
  #l-topics .l-inner .topics-list{
    justify-content: space-between;
  }
  #l-topics .l-inner .topics-list li{
    width: 48%;
    margin-right: 0;
    margin-bottom: 4%;
  }
  #l-topics .l-inner .topics-list li:nth-child(2){
    margin-right: 0;
  }
  #l-topics .l-inner .topics-list li .tag-name{
    font-size: 1.0rem;
  }
  #l-topics .l-inner .topics-list li .tpc-ttl{
    font-size: clamp(1.3rem , 2.2vw , 1.8rem);

  }
  #l-topics .l-inner .topics-list li .tpc-txt{
    font-size: clamp(1.1em , 2.0vw , 1.6rem);
  }
  #l-topics .l-inner .topics-list li .tpc-date{
    font-size: 1.1rem;
  }
}

/* -----------------------------------------------------------
   BTN
------------------------------------------------------------*/

.btn-more{
  text-align: center;
}
.btn-more a{
  color: #0050FF;
  font-family: "Roboto", serif;
  font-weight: 500;
  font-size: 1.8rem;
  text-align: center;
  position: relative;
  display: inline-block;
  transition: .3s;
}
.btn-more a .arrow{
  position: absolute;
  display: inline-block;
  width: 15px;
  height: 1px;
  margin-top: 5px;
  border-radius: 9999px;
  background-color: #0050ff;
  text-indent: -9999px;
  bottom: 0.4em;
  right: -25px;
  transition: .3s;
}
.btn-more a:hover .arrow{
  right: -35px;
}
.btn-more a .arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 8px;
  height: 1px;
  border-radius: 9999px;
  background-color: #0050FF;
  transform: rotate(40deg);
  transform-origin: calc(100% - 0.5px) 50%;
}

.list-more button{
  color: #0050FF;
  font-family: "Roboto", serif;
  font-weight: 500;
  font-size: 1.8rem;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: .3s;
  border: none;
  cursor: pointer;
  outline: none;
  background-color: transparent;
  margin: 0 auto;
}
.list-more button .arrow{
  display: flex;
  position: relative;
  color: #0050FF;
  width: 0.4em;
  height: 0.4em;
  transform: translateX(-25%) rotate(135deg);
  text-indent: -9999px;
  transition: .3s;
  bottom: 0;
  margin-left: 0.6em;
}
.list-more button .arrow:before,
.list-more button .arrow:after{
  content: '';
  position: absolute;
  background: currentColor;
}
.list-more button .arrow:before{
  top: 0;
  left: 0;
  right: 0;
  height: 0.06em;
}
.list-more button .arrow:after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.06em;
}
.list-more button a:hover .arrow{
  bottom: -10px;
}
.btn-common{
  width: 46%;
  margin: 0 auto;
}
.btn-common a{
  background-color: #0050FF;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1.3rem , 1.3vw , 1.8rem);
  transition: .3s;
  text-align: center;
  padding: 1em 0;
  position: relative;
}
.btn-common a:hover{
  background-color: #DDD;
}
.btn-common a .arrow{
  content: "";
  display: inline-block;
  position: absolute;
  color: #FFF;
  width: 0.5em;
  height: 0.5em;
  transform: translateX(-25%) rotate(45deg);
  text-indent: -9999px;
  transition: .3s;
  right: 20px;
}
.btn-common a .arrow:before,
.btn-common a .arrow:after{
  content: '';
  position: absolute;
  background: currentColor;
}
.btn-common a .arrow:before{
  top: 0;
  left: 0;
  right: 0;
  height: 0.06em;
}
.btn-common .arrow:after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.06em;
}
.btn-common a:hover .arrow{
  right: 10px;
}
@media screen and (max-width : 1023px) {
  .btn-common{
    width: 100%;
  }
}


/* -----------------------------------------------------------
   FOOTER
------------------------------------------------------------*/
footer.l-footer{
    background-color: #1A1A1A;
    padding: min(50px ,3.3vw) 0;
    text-align: center;
}

footer.l-footer .l-inner p{
  font-size: 1.2rem;
  color: #FFF;
}
@media screen and (min-width : 1024px) {
  footer.l-footer .cop-list{
    width: 20%;
    min-width: 220px;
    margin: 0 auto 2em;
    display: flex;
    list-style: none;
  }
  footer.l-footer .cop-list li{
    text-align: center;
  }
  footer.l-footer .cop-list li.tbs{
    width: 30%;
  }
  footer.l-footer .cop-list li.tbs a{
    display: block;
    width: 100%;
  }
  footer.l-footer .cop-list li.tbs img{
    width: 50%;
    height: 50%;
  }
  footer.l-footer .cop-list li.policy{
    width: 70%;
    border-left: 1px solid #FFF;
  }
  footer.l-footer .cop-list li a{
    color: #FFF;
    font-size: 1.4rem;
  }
}
@media screen and (max-width : 1023px) {
  footer.l-footer{
    padding: 0;
  }
  footer.l-footer .l-inner{
    width: 90%;
    padding: 6vw 0;
    margin: 0 auto;
  }
  footer.l-footer .cop-list{
    width: 45%;
    margin: 0 auto 1.5em;
    display: flex;
    list-style: none;
  }
  footer.l-footer .cop-list li.tbs{
    width: 30%;
  }
  footer.l-footer .cop-list li.tbs a{
    display: block;
    width: 100%;
  }
  footer.l-footer .cop-list li.tbs img{
    width: 50%;
    height: 50%;
  }
  footer.l-footer .cop-list li.policy{
    width: 70%;
    border-left: 1px solid #FFF;
  }
  footer.l-footer .cop-list li a{
    color: #FFF;
    font-size: 1.0rem;
  }
  footer.l-footer .l-inner p{
    text-align: left;
    line-height: 1.4;
    padding-left: 2rem;
  }
}