@charset "utf-8";

a.current
{
  pointer-events: none;
}

#rwd-content .rwd-large-keyvisual-caption, 
#rwd-content .rwd-mainvisual-video-caption {
    background-color: rgba(0, 0, 0, 0.5);
}
#rwd-content .rwd-large-keyvisual-caption-title-jp, 
#rwd-content .rwd-mainvisual-video-caption-title-jp {
    margin-left: 0!important;
}

#rwd-content .rwd-main-header::after
/*{
  display: none;
}*/

/***  背景スケッチ画像 ***/
.bg-object-wrapper {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow-x: clip;  
}


.bg-object
 {
  position: absolute;
  width: 35vw;
  height: auto;
  object-fit: contain;
  opacity: 1.0; /* 透明度 */
  
}

.sns_wrapper {
	background: black;
	padding-bottom: 20px;
}

#brush-01
{
  width: min(675px, calc(675 / 1340* 100vw));
  top: calc(150px + 585 / 1020* 100vw + 5vw);
  left: calc(0 / 1340* 100vw + 50vw - 900px);
}

#brush-02
{

  width: min(645px, calc(645 / 1340* 100vw));
  top:  calc(480px + 585 / 1020* 100vw);
  right: max(-2000px, calc(-650 / 1340* 100vw + 100vw - 750px));
}

#brush-03
{
  width: min(643px, calc(643 / 1340* 100vw));
  top: calc(850px + 585 / 1020* 100vw + 5vw);
  left: calc(0 / 1340* 100vw + 50vw - 390px);
}

#brush-04
{
  width: min(603px, calc(603 / 1340* 100vw));
  top: calc(70px + 0 / 1340* 100vw + 0vw);
  left: calc(0 / 1340* 100vw + 50vw - 590px);  
}

#brush-05
{
  width: min(1186px, calc(1186 / 1340* 100vw));
  top: calc(750px + 0 / 1340* 100vw + 0vw);
  left: calc(0 / 1340* 100vw + 50vw - 550px);
}

#brush-06
{
  width: min(1325px, calc(1325 / 1340* 100vw));
  top: calc(1780px + 0 / 1340* 100vw + 0vw);
  left: calc(0 / 1340* 100vw + 50vw - 1330px);
}

#sketch-01
{

    width: min(621px, calc(621 / 1340 * 100vw));
    top: calc(1120  / 1340 * 100vw);
    top: min(10120px, calc(360px + 585 / 1020* 100vw));
    right: 0;
    right: max(-200px, calc(-200 / 1340* 100vw));
    right: max(-2000px, calc(-650 / 1340* 100vw + 100vw - 870px));
    mix-blend-mode: multiply;
}

#sketch-02
{
  width: min(329px, calc(329 / 1340* 100vw));
  top: min(10120px, calc(950px + 585 / 1020* 100vw + 5vw));
  left: calc(0 / 1340* 100vw + 50vw - 650px + 150px);
  mix-blend-mode: multiply;
}



#sketch-03 {
  width: min(444px, calc(444 / 1340* 100vw));
  top: calc( 50 / 1340 * 100vw );
  right: calc(-650 / 1340* 100vw + 100vw - 800px);
  mix-blend-mode: screen;
}



#sketch-04 {
  width: min(540px, calc(540 / 1340* 100vw));
  top: calc(930px);  
  left: calc(80px + (0 / 1340 * 100vw) + 50% - 1340px / 2);
  mix-blend-mode: screen;
}


#sketch-05
{
  width: min(720px, calc(720 / 1340* 100vw));
  bottom: 80px;
  right: calc(-650 / 1340* 100vw + 100vw - 750px);
  mix-blend-mode: screen;  
}

@media screen and (max-width: 1280px)
{
  #brush-01
  {
    left: -260px;
  }

  #brush-02
  {
    right: -190px;
  }

  #brush-03
  {
    left: +250px;
  }

  #brush-06
  {
    left: -660px;
    top: 1770px;
  }


  #sketch-01
  {  
    right: -160px;
  }

  #sketch-02 {
    left: 140px;
    top: min(10120px, calc(600px + 950 / 1020* 100vw + 0vw));
  }

  #sketch-03
  {  
    right: -140px;
  } 

  #sketch-04
  {  
    left: 40px;
  }

  #sketch-05
  {  
    right: -30px;
  } 


}


.plus_wrapper {
  pointer-events: none;
  position: relative;
  position: absolute;
  left: 0;
  right: 0;  
  width: 100% !important;
  height: 26px;
}

.plus_wrapper_1 
{ 
  position: absolute;

  margin-top: -50px !important;

}

.plus_wrapper_2
{
  margin-top: 20px !important;
}

.plus_wrapper_3
{
  margin-top: 0px !important;
}

.plus {
  position: absolute;
  width: 26px;
  height: 26px;
}

.plus.left {
  left: 85px;;
}

.plus.right {
  right: 85px;;
}

/* 767px未満 */
@media screen and (max-width: 767px)
{
  #brush-01
  {
    top: calc(-200px + 320vw);    
    width: min(675px, calc(675 / 320* 100vw));
    left: calc(50vw - 320px);    
  }

  #brush-02
  {
    width: min(644px, calc(644 / 320 * 100vw));
    top: calc(540px + 300vw);
    right: -355px;
  }

  #brush-03
  {
    width: min(389px, calc(389 / 320* 100vw));
    top: calc(750px + 585 / 1020* 100vw + 5vw);
    top: calc(900px + 320vw);
    left: 80px;
  }

  #brush-04
  {
    top: 90px;
    left: -160px;
    width: min(362px, calc(362 / 320* 100vw));
  }

  #brush-05
  {
    width: min(362px, calc(362 / 320* 100vw));
    left: 100px;
  }

  #brush-06
  {
    width: min(663px, calc(663 / 320* 100vw));
    left: -350px;
    bottom: 150px;
    top: auto;
  }

  #sketch-01
  {
    width: min(306px, calc(306 / 320* 100vw));
    top: calc(500px + 300vw);
    right: -180px;
  }

  #sketch-02
  {
    width: min(164px, calc(164 / 320* 100vw));
    right: -50px;
    top: 3000px;
    left: 40px;
    top: calc(900px + 330vw);
  }

  #sketch-03
   {
      width: min(221px, calc(221 / 320* 100vw));
      right: -40px;
      top: 20px;
   }

   #sketch-04
   {
      width: min(540px, calc(270 / 320* 100vw));
      left: 140px;    
      top: calc(-20vw + 850px);
   }

   #sketch-05
   {
      bottom: 20px;
      width: min(360px, calc(360 / 320* 100vw));
      right: -150px;
   }

  .plus_wrapper_1 
  {
    /*
    margin-top: calc(20vw + 3em) !important;
    margin-top: calc(-15vw ) !important;
    margin-top: calc(-10vw ) !important;
    */
    margin-top: -30px !important;
  }

  .plus_wrapper_2
  {
    margin-top:20px !important;
  }
    
  .plus_wrapper_3
  {
    margin-top: 30px !important;
  }

  .plus {
    position: absolute;
    width: 17px;
    height: 17px;
  }

  .plus.left {
    left: 35px;;
  }
  
  .plus.right {
    right: 35px;;
  }
}


#rwd-content .rwd-block-keyvisual
{
  position: relative;
  margin-top: 0;/*53px;*/
  /*padding-bottom: 10px;*/
  background-color: #000; 
}

#rwd-content .rwd-mainvisual-video .rwd-box-content.title_image_wrapper {
  top: 23%;
}

#rwd-content .rwd-mainvisual-video .rwd-box-content
{
  max-width: none;
  padding: 0;
}


#rwd-content .rwd-mainvisual-video video
{
  display: block;
  width:100%;
}


.keyvisual_dot
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/bg_transparent.png);
  background-position: 30px 6px;
  /*opacity: 0.5;*/
}

#rwd-content .rwd-mainvisual-video .keyvisual_lines
{
  width: 100%;
}

#rwd-content .rwd-mainvisual-video .title_image
{
  display: block;
  width: 100%;
}

#rwd-content .rwd-mainvisual-video .rwd-box-content.lead 
{ 
  top: 45%;
  text-align: center;
}

.smaller-text {
  font-size: calc(18 / 1340 * 100vw);
}


#rwd-content .rwd-mainvisual-video .rwd-box-content.lead .title
{
  display: inline-block;
  padding: 4px 30px 0 !important;
  margin: 0 !important;
  line-height: 1;
  background-color: #ff0000;
  font-size: calc(28 / 1340 * 100vw);
  font-weight: bold;
}


#rwd-content .rwd-mainvisual-video .rwd-box-content.lead .text
{
  margin-top: 1em;
  font-size: calc(16 / 1340 * 100vw);
  font-weight: bold;
  /*letter-spacing: 0.1em;*/
  line-height: 1.8;
}

.text .larger-text
{
  font-size : xx-large;
}

/* 767px未満 */
@media screen and (max-width: 767px)
{
  #rwd-content .rwd-block-keyvisual
  {
    margin-top: 0;
    padding-bottom: 0;
  } 

  #rwd-content .rwd-mainvisual-video video
  {
/*    
    width: 280%;
    margin-left: -90%; 
    margin-top: -10px;
*/
    margin-top: -10px;
    width: 370%;
    margin-left: -135%;
    /*
    margin-top: -60px;
    */
    width: 350%;
    margin-left: -125%;    
  }

  #rwd-content .rwd-mainvisual-video .keyvisual_lines
  {
    margin-top: 55px;
    margin-top: 0;
    /*
    width: 90%;
    left: 5%;
    */
  }

  #rwd-content .rwd-mainvisual-video .rwd-box-content.title_image_wrapper {
    top: 20%;
  }

  #rwd-content .rwd-mainvisual-video .title_image
  {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
  }

  #rwd-content .rwd-mainvisual-video .rwd-box-content.lead 
  {
    /*top: 86%;*/
  }

  #rwd-content .rwd-mainvisual-video .rwd-box-content.lead .title
  {  
    font-size: calc(18 / 320 * 100vw);
    padding: 4px 5px 0 5px !important;
  }

  .smaller-text {
    font-size: calc(13 / 320 * 100vw);
  }

  #rwd-content .rwd-mainvisual-video .rwd-box-content.lead .text
  {
    font-size: calc(12 / 320 * 100vw);
    /*white-space: pre-line; */
    margin-top: 1em;
  }

  .text .larger-text
  {
    font-size: calc(24 / 320 * 100vw);
    line-height: 1.1em;
  }
}




/*** INTORODUCTION ***/
#rwd-content .introduction_wrapper
{
  display: flex;
  position: relative;
  justify-content: center;
  
  /*margin-top: -50px;*/
  height: 48vw;
  max-height: 560px;
}



#rwd-content .introduction
{ 
  position:relative; 
  /*padding-top: 10vw;;*/
  /*padding-top: 135px;*/
  padding-top: 60px;
  
  /*width:95%;*/
  width:93%;
  max-height: 450px;
  color: #1f1f1f;
}

#rwd-content .introduction::before
{
  pointer-events: none;
  content:'';
  /*margin-top: -10vw;*/
  padding: 25px;
  top: 25%;
  width: 100%;
  height: 50%;
  position: absolute;
  border-left: 2px solid #c7c7c7;
  border-right: 2px solid #c7c7c7;
}

#rwd-content .introduction::after
{
  pointer-events: none;
  content:'';
  /*
  margin-top: -10vw;
  margin-top:  -120px;
  */
  margin-top: -140px;
  padding-bottom: 90px;
  
  width: 100%;
  height: 100%;
  position: absolute;  
  border-left: 1px solid #b10000;
  border-right: 1px solid #b10000;
}

.scroll
{
  position: absolute;
  width: 22px;
  height: 118px;
  z-index: 100;
  /*top: -42px;*/
  top: -118px;
  right: -2px;
}

.scroll-icon
{
  position: absolute;
  left: 0;
  width: 9px;
}

.scroll-bar
{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 3px;
  height: 100px;
  border-radius: 1px;
  background-color: #fff;

  animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;

}

@keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

.introduction_keyart
{
  text-align: center;
  width: 30% !important;
}

.introduction_keyart_imge
{
  width: 324px !important;
  filter: drop-shadow(25px 25px 20px rgba(80, 80, 80, 0.2))
}


.introduction_title {
  display: flex;
  width: min(466px, calc(466 / 1340 * 100vw)) !important;
}

.introduction_text {
  display: flex;
  /*width:80%;*/
  margin: 0.5em;
  margin-top: 1em;
  
  line-height: 1.6em;
  font-size: min(14px, calc(14 / 1220 * 100vw)); 
  /*font-weight: bold;*/

}

.introduction_detail  {
  position: relative;
  width: 70%;
}

.introduction .staff
{
  margin-top: 1em;
  color: #4e4e4e;
}


.introduction .staff dt, .introduction .staff dd
{
  font-size: clamp(9px, calc(12 / 1220 * 100vw), 12px); 
}

.introduction .staff dl {

}

.introduction .staff dt {
  float: left;
  font-weight: bold;
}

.introduction .staff dd {
  margin-bottom: 0.3em;
}

.button-netflix {
  display: block;
  position: absolute;
  margin-top: 1.5em;
  width: min(286px, (286 / 1220 * 100vw)); 
  /*translate: 40% 0;*/
}

/* 767px未満 */
@media screen and (max-width: 767px)
{
  #rwd-content .introduction_wrapper
  {  
    height: auto;
    /*margin-top: 40px;*/
    max-height: none;
  }

  #rwd-content .introduction
   {
    max-height: none;
    padding-top: 40px;
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 7px;
    padding-right: 7px;
  }

  #rwd-content .introduction::before
  {
    padding: 7px;
  }

  #rwd-content .introduction::after 
  {
    pointer-events: none;
    margin-top: -100px;
    padding-bottom: 120px;
  }

  .scroll
  {
    width: 13px;
    height: 107px;
    /*
    top: auto;    
    margin-top: -107px;
    margin-top: calc(10vw - 135px);
    */
    top: -107px;
    right: -2px;
    /*bottom: 0px*/    
  }
  
  .scroll-icon
  {
    width: 7px;
  }

  .scroll-bar
  {
    bottom: 0;
    width: 3px;
  }

 .introduction_keyart
{
  width: 100% !important;
}

.introduction_keyart_imge {
  width: 100% !important;
}

  .introduction_title
  {
    width: 273px !important;
    margin: 0 auto;
    margin-top: 2em;
  }

  .introduction_text
   {
    margin: 0.2em;
    margin-top: 2em;
    font-size: min(12px, calc(12 / 320 * 100vw)); 
  }

  .introduction .staff dt, .introduction .staff dd
  {
    font-size: clamp(9px, calc(11 / 320 * 100vw), 12px); 
    letter-spacing: 0.04em;
  }
  
  .button-netflix {
    display: block;
    width: 275px;
    /*
    margin: 0 auto;
    */
    margin-top: 1.5em;
    
    left: 50% ;
     transform: translateX(-50%) ;
    /*
    position: absolute;
    margin-top: 1em;
    width: min(286px, (286 / 1220* 100vw)); 
    translate: 40% 0;*/
    translate: none;
  }
  
}


/*** NEWS  ***/
.news_wrapper {  
  display: flex;  
  flex-wrap: nowrap !important;
  justify-content: center;
  margin-top: 40px;
  /*margin-top: 5em;;*/
}

.news 
{
  position: relative;
  display: flex;
  width: 80%;
  max-width: 1000px;
  margin-top: 2em;
  flex-direction: column;
  align-items: center;
  color: #1f1f1f;
  
}

.news_title img {
  width: 195px;
}

.news .news_body
{
  margin: 2em;
}

.news .news_body li
{
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  /*white-space:nowrap;*/
  margin-bottom: 1.5em;
  font-size: 14px;
  /*list-style-type: disc;*/
}

.news_date
{
  font-weight: bold;
  white-space: nowrap;
}

.news_text
{
  flex: 1;
  margin-left: 40px;
}

/* 767px未満 */
@media screen and (max-width: 767px)
{
  

  .news_wrapper 
  {
   margin-top: 120px; 
  }

  .news_title img {
    width: 114px;
  }

  .news .news_body
  {
    margin: 1em;
  }
  
  .news_left {
    margin-left: 25px;
  }

  .news_right {
    margin-right: 25px;
  }  

  .news .news_body li
  {
    flex-direction: column;
  }

  .news .news_body li .news_text
  {
    text-indent: 0;
    margin-left: 0;
    margin-top: 8px;
  }
}


/*** Article Block ***/

/*--- Common ---*/
.article_block_wrapper {
  position: relative;
  padding-bottom: 80px;
}

.article_block
{
  position: relative;
  display: flex;
  justify-content: center;

  width: 100%;
  max-width: min(85vw, 1012px) !important;
}

.article_block .title-area
{
  position: absolute;
  right: 0;
}

.article_block .title_text
{
  /*margin-left: 100px;*/
  margin-bottom: 3px;
  
  /*font-size: 28px;*/
  line-height: 1.2em;  
  /*
  background-color: blue;  
  */
}

.article_block .title_text span
{
  /*margin-bottom: 2px;*/
  display: inline-block;
  padding:2px 40px 2px 2px ;
  font-size: min(28px, calc(28 / 1340 * 100vw));
  font-weight: bold;
  line-height: 1.1em;  
  background-color: #1029db;
}

.article_block .title_image 
{
  display: block;
  /*position: absolute;*/
  margin-top: 5px;
  /*margin-left: 100px;*/
  z-index: -1;
}

.article_block .content_wrapper
{
  display: block;
  position: absolute;
      margin-top: 10px;
  
  top: min(130px, calc(19px + ((110) / 1340)* 100vw));
  /*top: min(120px, calc(32px + ((90) / 1340)* 100vw));*/
  
}

.article_block .content
{
/*  
  width: 99%;
  max-width: 1012px;
*/
  width: 100%;
  max-width: min(85vw, 1012px);  
}

.article_block .content .content-bottom-area
{
  display: flex;
  justify-content: center !important;
  align-items: center;
  padding: 20px;
}

#rwd-content .article_block .content  .description-area
{
  width: 54%;
}

#rwd-content .article_block .content  .button-area
{
  width: 34%;  
}

.article_block .content .description p
{
  color: #999999;
  font-size: max(13px, min(16px, calc(16 / 1340 * 100vw)));
}


.button-more {
  display: block;
  position: absolute;
  margin-top: 1em;
  width: min(286px, (286 / 1220 * 100vw)); 
  /*translate: 40% 0;*/
}


/*--- DISCUSSION ---*/
.discussion_wrapper
{
  height: 30vw;
  height: 55vw;
  max-height: 650px; 
}


.article_block.discussion .content_wrapper
{
  display: flex;
  /*width: 90%;*/
  width: 100%;
  max-width: 1300px;  
  /*border: solid 1px red;*/
/*
  top: 130px;
  top: calc(-16px + ((100 + 60 + 16) / 1340)* 100vw);
  top: min(130px, calc(16px + ((114) / 1340)* 100vw));
  top: min(130px, calc(19px + ((129) / 1340)* 100vw));
  */
}

.discussion .content_wrapper::after
{
  pointer-events: none;
  content:'';
  /*margin-top: -10vw;*/
  /*padding: 25px;*/
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  border-left: 2px solid #1029db;
  border-right: 2px solid #1029db;
  /*filter: drop-shadow(0 0 4px #1029db) drop-shadow(0 0 4px #1029db);*/
  filter: drop-shadow(0 0 6px rgb(16, 41, 219, 0.7))  drop-shadow(0 0 6px rgb(46, 41, 219, 0.7)) ;

  width: 90vw;
  max-width: 1220px;  
}

.discussion.article_block .title_image
{
  width: min(452px, calc(452 / 1340 * 100vw));
  max-width: 452px !important;
}

.discussion.article_block .title-area
{
  
}



/* CONCEPT */
.concept_wrapper
{
  display: flex;
  justify-content: center;
  height: 30vw;
  height: 55vw;
  max-height: 650px; 

    height: 70vw;
    max-height: 750px;
    min-height: 700px;
}


#rwd-content .concept.article_block
{
  margin: 0;
  max-width: min(85vw, 800px) !important;
}


/*---  Concept Side line ---*/
.concept-left-line, .concept-right-line 
{
  height: 100%;
  filter: drop-shadow(0 0 6px rgb(253, 206, 1, 0.7))  drop-shadow(0 0 6px rgb(253, 206, 1, 0.7));
}

.concept-left-line 
{
  margin-right: 100px;
}

.concept-right-line 
{
  margin-left: 100px;
}


/* 1280px未満 */
@media screen and (max-width: 1280px)
{
  .concept-left-line 
  {
    /*width: 20px;*/
    /*clip-path: inset(0 0 0 50%);*/
    
    margin-right: max(10px, calc(300 / 1280* 100vw - 200px));
  }

  .concept-right-line 
  {
    /*width: 20px;*/
    margin-left: max(10px, calc(300 / 1280* 100vw - 200px));
  }  
}

@media screen and (max-width: 960px)
{
  .concept-left-line 
  {
    /*clip-path: inset(0 0 0 50%);*/
    margin-left:calc(-50 / 960* 100vw - 50px);
  }

  .concept-right-line 
  {
    /*clip-path: inset(0 50% 0 0);*/
    margin-right:calc(-50 / 960* 100vw - 50px);
  }

}
/*---  /Concept Side line ---*/

.concept.article_block .title-area
{  
  left: 0;
}

.concept.article_block .title_text span
{
  background-color: #fdce01; 
  font-size: min(28px, calc(28 / 1340 * 100vw));
  /*font-weight: 100;*/
}


.concept.article_block .title_image
{
  width: min(830px, calc(830 / 1340 * 100vw));
  max-width: 830px !important;
}

.concept .rwd-youtube-layout
{
  width: 100%;
}

#rwd-content .rwd-youtube-layout .rwd-youtube-container {
  /*
  display: flex;
  flex-direction: column;
  */
  width: 100%;
}

#rwd-content .concept .rwd-youtube iframe {
  /*width: min(800px, calc(800 / 1340 * 100vw));*/
  width:100% !important;
  /*height: 40vw !important;*/
  max-height: 450px;  
}

.concept.article_block  .description p
{
  font-size: max(13px, min(14px, calc(14 / 1340 * 100vw)));
}

/* SOUND RECORDING */
.sound-recording_wrapper
{
  display: flex;
  justify-content: center;

  height: 30vw;
  height: 55vw;
  max-height: 650px; 
}

#rwd-content .sound-recording.article_block {
  margin: 0;
  max-width: min(85vw, 1020px) !important;
}


.sound-recording.article_block .title_text span
{
  background-color: #29c383; 
}

.sound-recording.article_block .content_wrapper
{
  top: min(90px, calc(16px + ((72) / 1340) * 100vw));
}


.sound-recording.article_block .title_image
{
  width: min(599px, calc(599 / 1340 * 100vw));
  max-width: 599px !important;
}

/*---  SOUND Side line ---*/
.sound-left-line,
.sound-right-line
{
  margin-top: min(90px, calc(16px + ((72) / 1340)* 100vw));
  height: max(375px, calc(100% - (16px + ((100) / 1340)* 100vw))); 
  min-height: 100px;

  filter: drop-shadow(0 0 6px rgb(41, 195, 131, 0.7))  drop-shadow(0 0 6px rgb(41, 195, 131, 0.7));
}

.sound-left-line
{
  margin-right: -30px; 
}

.sound-right-line 
{
  margin-left: -30px;
}




@media screen and (max-width: 960px)
{
  /*
  .sound-left-line 
  {
    clip-path: inset(0 0 0 50%);
    margin-left:calc(-50 / 960* 100vw - 50px);
  }

  .sound-right-line 
  {
    clip-path: inset(0 50% 0 0);
    margin-right:calc(-50 / 960* 100vw - 50px);
  }
*/
}
/*---  /SOUND Side line ---*/


/* EXHIBITIONS */
.exhibitions_wrapper
{
  display: flex;
  justify-content: center;
  padding-bottom: 0;
  height: 30vw;
  height: 55vw;
  max-height: 650px; 
}

#rwd-content .exhibitions.article_block {
  margin: 0;
  max-width: min(85vw, 1020px) !important;
}


.exhibitions.article_block .title_text span
{
  background-color: #f00; 
}

.exhibitions.article_block .content_wrapper
{
  top: min(90px, calc(16px + ((72) / 1340) * 100vw));
}


.exhibitions.article_block .title_image
{
  width: min(392px, calc(392 / 1340 * 100vw));
  max-width: 392px !important;
}

/*---  exhibitions Side line ---*/
.exhibitions-left-line,
.exhibitions-right-line
{
  margin-top: 0;/*min(90px, calc(16px + ((72) / 1340)* 100vw));*/
  height: max(375px, calc(100% - (16px + ((50) / 1340)* 100vw))); 
  min-height: 100px;

  filter: drop-shadow(0 0 6px rgb(200, 0, 18, 0.7))  drop-shadow(0 0 6px rgb(200, 0, 18, 0.7));
}

.exhibitions-left-line
{
  margin-right: +30px; 
}

.exhibitions-right-line 
{
  margin-left: +30px;
}


/*** Slant Line (斜め線) ***/

.slant_line_wrapper
{
  display: flex; 
  justify-content: center;
  
  margin-top: -13px !important;
  padding-bottom: 60px !important;
}

.slant_line_wrapper .spacer
{
  width: 40%;
  max-width:640px;
}

.slant_line
{
  width: 25vw;
    max-width: 300px;
}



/* 767px未満 */
@media screen and (max-width: 767px)
{
  .discussion_wrapper {
    /*height: 500px;;*/
    height: calc(100vw);
    min-height: 500px;
  }
}


/* 767px未満 */
@media screen and (max-width: 767px)
{
  .article_block .title-area
  {
    position: absolute;
    left: 0;
  }  
  
  .article_block .title_text span
  {
    padding:2px 10px 2px 2px ;
    font-size: min(24px, calc(24 / 320 * 100vw));    
  }

  .discussion.article_block .title_image
  {
    width:  calc(197 / 320* 100vw);
    max-width: none !important;
  }

  .article_block .content_wrapper {
    top: min(130px, calc(19px + ((110) / 320) * 100vw)) !important;
  } 
  
  #rwd-content .article_block .content  .description-area
  {
    width: 100%;
    padding: 10px;
  }


  .button-more {
    margin-top: 1em;
    width: min(272px,(272 / 320 * 100vw));
  }

  /*--- SP Discussion ---*/
  .discussion.article_block .content_wrapper {
    top: 125px !important;
  }
  .discussion.article_block .title_image {
    width:  197px;
  }

  .discussion.article_block .content .description p
  {
    font-size: min(14px, calc(12 / 320 * 100vw));
  }

  /*--- SP Concept ---*/
  .concept_wrapper {
    min-height: 500px;
  }

  .concept.article_block .content_wrapper {
    top: 120px !important;
  }

  html[lang="en"] .concept.article_block .content_wrapper {
    top: 112px !important;
  }  

  .concept.article_block .title_text span
  {
    padding:2px 0px 2px 2px ;
    font-size: min(22px, calc(21 / 320 * 100vw));
  }

  html[lang="en"] .concept.article_block .title_text span
  {
    font-size: min(18px, calc(18 / 320 * 100vw));
  }



  .concept.article_block .title_image
  {
    width: calc(224 / 320 * 100vw);
    width:  224px;
  }  

  .concept.article_block .content .description p
  {
    font-size: min(14px, calc(14 / 320 * 100vw));
  }

  /*--- SP Sound Recording ---*/


  .sound-recording_wrapper {
    height: 145vw;
    height: calc(400px + 30vw);
  }

  .sound-recording.article_block .content_wrapper {
    top: 125px !important;
  }

  html[lang="en"] .sound-recording.article_block .content_wrapper {
    top: 115px !important;
  }

  html[lang="en"] .sound-recording.article_block .title_text span {
    font-size: min(19px, calc(19 / 320* 100vw));
  }

  .sound-recording.article_block .title_image
  {
    width: calc(158 / 320 * 100vw);
    width: 158px;
  }

  .sound-recording.article_block .content .description p
  {
    font-size:  16px;/*min(16px, calc(16 / 320 * 100vw));*/
  }

  html[lang="en"] .sound-recording.article_block .content .description p
  {
    font-size:  14px;/*min(14px, calc(14 / 320 * 100vw));*/
  }

  #rwd-content .sound-recording.article_block .content .button-area {
    margin-top: 20px;
  }


  /*---  SOUND Side line ---*/
  .sound-left-line,
  .sound-right-line
  {
    /*margin-top: min(90px, calc(16px + ((72) / 1340)* 100vw));*/
    margin-top: 125px;
    height: calc(100% - ( 16px + ((72) / 1340)* 100vw));

    width: 25px;
    height: 374px;

  }

  .sound-left-line
  {
    margin-right: -10px; 
  }

  .sound-right-line 
  {
    margin-left: -10px;
  }  


    /*--- SP EXHIBITIONS ---*/


    .exhibitions_wrapper {
      height: 145vw;
      height: calc(400px + 30vw);
    }
  
    .exhibitions.article_block .content_wrapper {
      top: 75px !important;
    }
  
    html[lang="en"] .exhibitions.article_block .content_wrapper {
      top: 75px !important;
    }
  
    .exhibitions.article_block .title_text span {
      font-size: min(19px, calc(19 / 320* 100vw));
    }

    html[lang="en"] .exhibitions.article_block .title_text span {
      font-size: min(19px, calc(19 / 320* 100vw));
    }
  
    .exhibitions.article_block .title_image
    {
      width: calc(158 / 320 * 100vw);
      width: 158px;
    }
  
    .exhibitions.article_block .content .description p
    {
      font-size:  16px;/*min(16px, calc(16 / 320 * 100vw));*/
    }
  
    html[lang="en"] .exhibitions.article_block .content .description p
    {
      font-size:  14px;/*min(14px, calc(14 / 320 * 100vw));*/
    }
  
    #rwd-content .exhibitions.article_block .content .button-area {
      margin-top: 20px;
    }
  
  
    /*--- exhibitions Side line ---*/
    .exhibitions-left-line,
    .exhibitions-right-line
    {
      /*margin-top: min(90px, calc(16px + ((72) / 1340)* 100vw));*/
      margin-top: 0;/*125px;*/
      height: calc(100% - ( 0px + ((0) / 1340)* 100vw));
  
      width: 25px;
      height: 374px;
  
    }
  
    .exhibitions-left-line
    {
      margin-right: 10px; 
    }
  
    .exhibitions-right-line 
    {
      margin-left: 10px;
    }  

    /*---*/
  .slant_line_wrapper
  {
    margin-top: 50px !important;
    padding-bottom: 180px !important;
  }
}

@media screen and (min-width: 520px) and (max-width: 767px) {

  .concept_wrapper {
    margin-bottom: 40px;
  }

  .sound-left-line, .sound-right-line {
      width: 30px;
      height: 450px;

      width: 33px;
      height: 495px; 
  }
}

/*** page links ***/
.buttons_area {
  position: relative;
  display: flex;
  padding-bottom: 80px;
  width: 600px !important;
  justify-content: space-around;
}

/*** SNS ***/
.rwd-snslist-area
{
  background-color: #000;
  padding-top: 60px;
  height: 140px;
  height: 80px;
}

#rwd-content .rwd-snslist-cassette
{
  width: 42px;
  height: 42px;
}

#rwd-content .rwd-snslist-cassette img {
  filter: brightness(2.0);
}

#rwd-content .rwd-snslist-area-title {
  margin-top: 20px;
  font-size: 12px;
  font-weight: bold;
}

.rwd-snslist-area-title
{
  background-color: #000;
}

/* 767px未満 */
@media screen and (max-width: 767px)
{
  .buttons_area {
    max-width: 90%;
  }

  .buttons_area img {
      scale: 0.8;
  }

  .rwd-snslist-area
  {
    margin-bottom: 10px;
  }

  #rwd-content .rwd-snslist-area-title {
    margin-top: 0;
  }
  
}


body {
  /*
  background: #f8f8f8;
  background-image: url(../img/bg_light.png);
*/
  background-color: #fff;
  overflow: hidden;
  
}

#contents_area
{
  background: #f8f8f8;
  background-image: url(../img/bg_light.png);
}

/*  #rwd-content .rwd-main-header {
    background: #000;
  }*/

  
  #rwd-content .rwd-main-header .header_separator
  {
/*    width: auto;
    height: 1px;
    border-bottom: 1px solid #3b3b3b;
    border-bottom: 1px solid #919395;
    border-bottom: 1px solid #c7c7c7;
    opacity: 0.5;
    
    margin: 0 30px;*/
    
  }

  #rwd-content main {
    overflow: hidden;
  }


/* 台形 */
  .trapezoid {
    position: relative;;
    padding-top: calc(250px + 10vw);
    margin-top: 40px;
    width: 100%; 
    height: auto; 
    color: white;
    background-color: #1f1f1f;
    background-image: url(../img/bg_dark.png);    
    
    
    /*clip-path: polygon(0 30%, 100% 0, 100% 100%, 0% 100%);*/

    clip-path: polygon(0 20vw, 100% 0, 100% 100%, 0% 100%);
  }


/* ================================================
画面幅が768px未満の場合の表示設定
================================================ */

@media screen and (max-width: 767px)
{
/*  #rwd-content .rwd-main-header .header_separator
  {
    margin: 0 14px;
  }

  .trapezoid {
    margin-top: 100px;
    padding-top: 200px;
  }
}


#contents_area
{
  display: none;
}*/


/* 767px未満 */
@media screen and (max-width: 767px)
{

}