/*@media screen and (min-width:769px) {

}

@media screen and (max-width: 768px) {

}*/

/*=====================================================================================================================
section--program
=====================================================================================================================*/


.section--program {
  display: block;
  position: relative;
}

.section--program::before {
  content: '';
  display: block;
  background: url(../img/common/bg.png);
  transform: skewY(8deg);
  height: 40vw;
  min-height: 480px;
}

.section--program::after {
  content: '';
  display: block;
  background: #fff;
  transform: skewY(8deg);
  height: 20vw;
  width: 100%;
}

.section--program--inner {
  position: absolute;
  top: 0;
  width: 80vw;
  right: 0;
  left: 0;
  margin: auto;
  height: 40vw;
  min-height: 480px;
}

.section--program--inner::before {
  content: 'program';
  position: absolute;
  top: 0;
  color: #ddd;
  font-family: 'Playfair Display', serif;
  font-size: 22vw;
  line-height: 0;
  left: -10vw;
  top: 7vw;
  font-style: italic;
}

.section--program--content {
  position: relative;
  text-align: left;
  width: 46vw;
}

.section--program--title {
  display: block;
  font-size: 7vw;
  line-height: 1.1;
  border-bottom: #000 solid 6px;
  padding-bottom: 20px;
  position: relative;
  letter-spacing: 0.7vw;
}

.section--program--title::after {
  content: '';
  position: absolute;
  background: #d00;
  width: 10vw;
  height: 6px;
  bottom: -6px;
  left: 0;
}

.section--program--text {
  margin-top: 20px;
}

.section--program--img {
  position: absolute;
  right: 0;
  top: 0;
  width: 30vw;
}

.section--program--button {
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
}


.program--section--button {
  margin-bottom: 50px;
}

.program__container,
.archive__container{
  width:100%;
  max-width:1200px;
  margin:0 auto 60px;
  display:flex;
  flex-wrap:wrap;
}

h3{ 
font-size: 130%;
font-weight: bold;
padding-bottom: 5px;
border-bottom: dotted 1px #444343;
display: block;
margin: 0 auto 20px;
width: 92vw;
}

.archive_pro { width: 32%; /*min-height: 400px;*/ background: #1e1e1e; color: #fff; border: 2px #1e1e1e solid; margin: 0.5%; text-align: left;}
.archive_pro img{ width:100%;}
.archive_pro p{ padding: 5%; font-size: 80%;}
.archive_pro span{ display: inline-block; color: #ff5655; border: dotted 1px #fb3939; font-size: 70%; padding: 0 10px;}

.message--section--stage::before { content: 'PROGRAM'!important;}
.message--section--stage .loop--wrap img{ display:none;}

.program--section--text{ text-align:left; width: 80vw; margin: 40px auto; font-size: 90%; max-width: 1200px;}
.program--section--text h4 { font-size: 40px; font-weight: bold; line-height: 10vw;}
.program--section--text h5 { font-size: 120%; font-weight: bold; color: #dd0200; padding: 40px 0 7px;}
.program--section--text .button { width:100%; max-width: 400px; height: 60px; line-height: 60px; text-align: center;}
.program--section--text .button a{ letter-spacing: 0.05em;}

@media screen and (max-width: 768px){
.archive_pro { width: 90%; min-height: 300px; margin:2.5% 5%;}
.archive_pro p{ font-size: 70%;}

.program--section--text{ width: 90vw; font-size: 70%; max-width: 1200px;}
.program--section--text h4 { font-size: 4.5vw; margin: 1em 0;}
.program--section--text .button {font-size: 5vw;}
}

.l_pro {
text-decoration: underline;
font-weight: bold;
 color: #d00;
}