@charset "utf-8";

/* -------------------- fv-contents ------------------- */
.css-reset .top-fv__contents {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.css-reset .top-fv__band {
  width: 1610px;
  margin-left: calc(50% - 805px);
}

.css-reset .top-fv__wrapper {
  position: absolute;
  transform: translate(-50%, -50%);
  justify-content: space-between;
  gap: 20px clamp(40px,11vw,110px);
  text-align: start;
  flex-wrap: wrap;
}



.css-reset .top-fv__ttl {
  width: fit-content;
  font-size: var(--FONT_SIZE_TITLE_S);
}

.css-reset .top-fv__ttl span.gold{
  color: var(--MAIN_GOLD);
}
.css-reset .top-fv__ttl span.green{
  color: #59794a;
}
.css-reset .top-fv__ttl span.inline{
  display: inline-block;
}
.css-reset .top-fv__textContainer {
  font-size: var(--FONT_SIZE_S);
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  flex-basis: 375px;
  font-weight: 500;
}
span.n-font {
  color: #666;
}


@media screen and (min-width: 768px){
  .css-reset .top-fv__wrapper {
    top: 50%;
  }
	.css-reset .top-fv__ttl {
	  line-height: 1.8;
	}
	.css-reset .top-fv__textContainer{
	  line-height: 2;
	  letter-spacing: .05em;
	}
	span.n-font {
    font-size: 30px;
	}
	.css-reset .top-fv__wrapper {
	  left: 50%;
	}
	.css-reset .top-fv__textContainer > .local+.local{
	  margin-top: .5em;
	}
}
@media screen and (max-width: 767px){
  .css-reset .top-fv__wrapper {
    top: 50%;
  }
  .css-reset .top-fv__band img{
    height: 300px;
  }
  .css-reset .top-fv__ttl {
    line-height: 1.4;
    /* font-weight: bold; */
	}
	.css-reset .top-fv__textContainer{
    line-height: 1.8;
    letter-spacing: .1em;
	}
	span.n-font {
    font-size: 18px;
	}
	.css-reset .top-fv__wrapper {
	  left: 53%;
	}
	.css-reset .top-fv__textContainer > .local+.local{
	  margin-top: 1em;
	}
}
/* -------------------- top-board__section ------------------- */
.css-reset .top-boardList > *+*{
  margin-top: 10px;
}
.css-reset .top-boardList > li{
  display: flex;
  flex-wrap: wrap-reverse;
}
.css-reset .top-boardList > li:nth-child(even){
  flex-direction: row-reverse;
}
.css-reset .top-boardList > li > *{
  width: 50%;
  flex: 1;
  flex-basis: 430px;
  min-height: 250px;
}
.css-reset .top-board__movieContainer > img{
  object-fit: cover;
  height: 100%;
}
.css-reset .top-board__movieContainer > video{
  width: 100%;
  height: 100%;
  object-fit: cover;

}
.css-reset .top-boardList > li:nth-child(1){
  --container_color:var(--MAIN_GOLD);
}
.css-reset .top-boardList > li:nth-child(2){
  --container_color:var(--MAIN_GREEN);
}
.css-reset .top-boardList > li:nth-child(3){
  --container_color:var(--MAIN_BLUE);
}
.css-reset .top-board__txtContainer{
  background-color: var(--container_color);
  color: var(--MAIN_WHITE);
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
}


.css-reset .top-board__txtContainer::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--BLUR_WHITE);
}
.css-reset .top-board__txtContainer > *{
  position: relative;
  z-index: 1;
}
.css-reset .top-board__ttl {
  margin-bottom: var(--contents_mgb);
}
.css-reset .top-board__ttl span{
  display: flex;
  gap: 1em;
  align-items: center;
  line-height: 1.8;
}
.css-reset .top-board__ttl span.sub{
  font-size: var(--FONT_SIZE_S);
}
.css-reset .top-board__ttl span.sub:before{
  content: "/";
  display: block;
}
.css-reset .top-board__ttl span.min{
  font-size: var(--FONT_SIZE_TITLE);
}
.css-reset .top-board__tags{
/*   font-size: var(--FONT_SIZE_XS); */
  row-gap: .5em;
  margin-bottom: var(--contents_mgb);

}

.css-reset .top-board__tags > li:not(:last-child):after{
  content: "/";
  padding-inline: .5em;
}
.top-board__btn{
  --btn_color_hover:var(--container_color);
  --btn_bg_hover:var(--MAIN_WHITE);
}
@media screen and (min-width: 768px){
  .top-board__section{
    --contents_mgb:40px;
    padding-bottom: 75px;
  }
  .css-reset .top-board__txtContainer{
    padding-block: 110px;
  
  }
  .css-reset .top-board__txtContainer{
    padding-inline:8%;
  }
	.css-reset .top-board__tags{
	  font-size: 18px;
	}

}
@media screen and (max-width: 767px){
  .top-board__section{
    --contents_mgb:30px;
    padding-bottom: 60px;
  }
  .top-board__wrap{
    --wrapper_width:100%;
  }
  .css-reset .top-board__txtContainer{
    padding-block: 50px;
  
  }
  .css-reset .top-board__txtContainer{
    padding-inline:5%;
  }
	.css-reset .top-board__tags{
	  font-size: 16px;
	}
}
/* -------------------- top-media__section ------------------- */
.css-reset .top-media__section{
  background-color: var(--BG_GRAY);
}
.css-reset .top-media__ttl{
  font-size: var(--FONT_SIZE_L);
  margin-bottom: 2em;
}
.css-reset .top-media__ttl span{
  display: block;
}
.css-reset .top-media__ttl span.sub{
  color: var(--MAIN_GOLD);
  font-size: var(--FONT_SIZE_M);
}

.css-reset .top-media__list{
  margin-bottom: var(--contents_mgb);
}
.css-reset .top-media__list > li > a{
  display: flex;
  gap: 20px;
}
.css-reset .top-media__list > li:not(:last-child) > a{

  margin-bottom: var(--PUBLIC_MARGIN_XM);
}
.css-reset .top-media__list:has(+*) > li:last-child > a{
  margin-bottom: var(--PUBLIC_MARGIN_XM);
}
.css-reset .top-media__listContainer{
  display: flex;
  gap: 1em;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  font-weight: 500;
}
.css-reset .top-media__btn > a{
  --btn_color:var(--MAIN_BLACK);
  --btn_color_hover:var(--MAIN_WHITE);
  --btn_bg_hover:var(--MAIN_BLACK);
  margin-left: auto;
}
.css-reset .top-media__listDate{
  font-size: var(--FONT_SIZE_M);
}
.css-reset .top-media__listTtl{
  font-size: var(--FONT_SIZE_S);
  line-height: 2;
}

@media screen and (min-width: 768px){
  .top-media__section{
    --contents_mgb:40px;
    --pdb:100px;
  }
  .css-reset .top-media__listThumb img{
    width: 169px;
    aspect-ratio: 169/112;
    object-fit: cover;
    object-position: center;
  }
  
}
@media screen and (max-width: 767px){
  .top-media__section{
    --contents_mgb:20px;
    --pdb:75px;
  }
  .css-reset .top-media__listThumb img{
    width: 90px;
    height: 90px;
    object-fit: cover;
  }
}
/* 追記 */
h2.top-board__ttl img {
  width: 80%;
}
span.sub {
  color: #000;
  margin-top: 5px;
}
span.sub::before {
  content: "" !important;
  background: #000;
  width: 45%;
  height: 1px;
}
.top-board-vintage span.sub::before {
  width: 30%;
}
.top-board__txtContainer.top-board-kml::after,
.top-board__txtContainer.top-board-vintage::after,
.top-board__txtContainer.top-board-mellow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}
p.top-board__btn.g-btn.g-btn > a {
  line-height: 1.4;
}
p.top-board__btn.g-btn .font-cormorant{
	font-size: 24px;
}
.top-board__txtContainer.top-board-kml::after{
  border-top: 22vw solid #d3bb9f;
	
}
.top-board__txtContainer.top-board-vintage::after{
  border-top: 22vw solid #a4a9a2;
	
}
.top-board__txtContainer.top-board-mellow::after{
  border-top: 22vw solid #9cb1b2;
}
@media screen and (max-width: 440px){
	.top-board__txtContainer.top-board-kml::after{
	  border-top: 32vw solid #d3bb9f;
		
	}
	.top-board__txtContainer.top-board-vintage::after{
	  border-top: 32vw solid #a4a9a2;
		
	}
	.top-board__txtContainer.top-board-mellow::after{
	  border-top: 32vw solid #9cb1b2;
	}
}

@media screen and (max-width: 767px){
	h2.top-board__ttl img {
	  max-width: 260px;
	}
	.top-board__txtContainer.top-board-kml::after,
	.top-board__txtContainer.top-board-vintage::after,
	.top-board__txtContainer.top-board-mellow::after {
	  border-right: 98vw solid transparent;
	}
	p.top-board__btn.g-btn.g-btn > a {
	  background-color: var(--btn_bg_hover,var(--MAIN_WHITE));
		color: var(--btn_color_hover,var(--MAIN_BLACK));
	}
	p.top-board__btn.g-btn .g-btn > a:hover{
		color: var(--btn_color,var(--MAIN_WHITE));
		background-color: var(--btn_bg,transparent);
	}
	p.top-board__btn.g-btn .font-cormorant{
		font-size: 22px;
	}
}
@media screen and (max-width: 800px){
	.top-board__txtContainer.top-board-kml p.top-board__btn.g-btn.g-btn > a,
	.top-board__txtContainer.top-board-mellow p.top-board__btn.g-btn.g-btn > a {
  flex-direction: column;
	}
	.top-board__txtContainer.top-board-kml .g-btn > a > span.small,
	.top-board__txtContainer.top-board-mellow .g-btn > a > span.small {
    margin-left: 0;
	}
}
@media screen and (max-width: 1200px){
	.top-board__txtContainer.top-board-vintage p.top-board__btn.g-btn.g-btn > a
	 {
  flex-direction: column;
	}
	.top-board__txtContainer.top-board-vintage .g-btn > a > span.small {
    margin-left: 0;
	}
}
@media screen and (min-width: 768px){
	h2.top-board__ttl img {
	  max-width: 310px;
	}
	.top-board__txtContainer.top-board-kml::after,
	.top-board__txtContainer.top-board-vintage::after,
	.top-board__txtContainer.top-board-mellow::after {
	  border-right: 93vw solid transparent;
	}
	p.top-board__btn.g-btn.g-btn > a {
		flex-direction: column;
	  background-image: url(/renewal2023/images/category/magiquehat/link-icon.svg);
	  background-repeat: no-repeat;
	  background-size: 10px;
	  background-position: right 20px center;
	}
}
@media screen and (min-width: 921px){
	.top-board__txtContainer.top-board-kml::after,
	.top-board__txtContainer.top-board-vintage::after,
	.top-board__txtContainer.top-board-mellow::after {
	  border-right: 47vw solid transparent;
	}
}
@media screen and (min-width: 1391px){
	.top-board__txtContainer.top-board-kml::after,
	.top-board__txtContainer.top-board-vintage::after,
	.top-board__txtContainer.top-board-mellow::after {
	  border-right: 650px solid transparent;
	}
}