@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap');
@media screen and (max-width: 769px) {

  /*----------------------------------------
    #prologue
  ----------------------------------------*/
  header {
background: url(../images/background.jpg) no-repeat center top fixed;
background-size: contain;
}
  #prologue h3 {
    padding: 3rem  14rem 3rem 2rem;
    /*background: url(../images/back-prologue.jpg) no-repeat center center;
    background-size: cover;*/
  }
  #prologue .text {
    padding: 3rem 1.5rem;
background: rgb(0 0 0 / 75%);
   /* background: #fff;*/
  }
  #prologue .text h4 span{
		font-family: Kosugi, sans-serif;
		font-size: 5vw;
		line-height: 130%;
		margin-bottom: 20px;
		font-weight: 900;
		background:linear-gradient(transparent 75%, #ffdc00 75%);
  }
  #prologue .text h5{
    background: linear-gradient(90deg, rgb(101 6 6) 0%, rgb(211 16 17) 50%, rgb(101 6 6) 100%);
    color: #fff;
    padding: 3%;
    font-size: 4.6vw;
    font-weight: 600;
    line-height: 130%;
    border: 2px solid #97693b;
    border-image: linear-gradient(325deg, rgb(251 255 0) 0%, rgb(255 132 0) 100%);
    border-image-slice: 1;
    box-shadow: inset 0 0 6px #18110a, 0 0 7px #ffe000e8;
    text-shadow: 0 0 2px #1e1902, 0 0 4px #1e1902, 0 0 6px #1e1902, 0 0 6px #1e1902, 0 0 1px #1e1902, 0 0 1px #1e1902;
    font-family: 'Noto Serif JP', serif;
    z-index: 5;
    position: relative;
  }
  #prologue ul.result-list {
  }
  #prologue ul.result-list li{
		margin-bottom: 2%;
  }

  /*----------------------------------------
    #cross
  ----------------------------------------*/
  #cross h3 {
    background: url(../images/back-cross.jpg) no-repeat center top;
    background-size: cover;
  }
  #cross h3 img{
    padding: 3rem;
		background-color: rgba(0,0,0,0.4);
  }
  #cross .text {
    padding: 3rem;
    background: #fff;
  }
  /*----------------------------------------
    #epilogue
  ----------------------------------------*/
  #epilogue h3 {
    background: url(../images/back-epilogue.jpg) no-repeat center center;
    background-size: cover;
  }
  #epilogue h3 img {
    padding: 5rem 5rem;
    background: rgba(0, 0, 0, 0.5);
  }
  #epilogue .text {
    padding: 3rem;
    background: #fff;
  }
}

body{
  background: url(../images/background.jpg) no-repeat center top fixed;
  background-size: cover;
  }

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

  /*----------------------------------------
    #prologue
  ----------------------------------------*/
  #prologue {
    padding: 5% 0 5%;

    /*background: url(../images/back-prologue.jpg) no-repeat center top fixed;
    background-size: cover;*/
  }
  #prologue .inner {
    margin: 0 auto;
    width: 70%;
  }
  #prologue h3 {
    margin-bottom: 5%;
  }
  #prologue .text {
    padding: 8% 10%;
    background: rgba(0, 0, 0, .9);
  }
  #prologue .text h4 span{
		font-family: Kosugi, sans-serif;
		font-size: 3vw;
		line-height: 130%;
		margin-bottom: 20px;
		font-weight: 900;
		background:linear-gradient(transparent 75%, #ffdc00 75%);
  }
  #prologue .text h5{
    font-size: 1.4vw;
    line-height: 1.5em;
    font-weight: 600;
    background: linear-gradient(90deg, rgb(159 111 10) 0%, rgb(255 218 82) 44%, rgb(197 164 50) 71%, rgb(143 118 0) 100%);
    color: #fff;
    padding: 2%;
    border: 2px solid #513604;
    text-shadow: 0 0 4px #554502, 0 0 9px #554502, 0 0 12px #554502;
    font-family: 'Noto Serif JP', serif;
  }

  

  /*----------------------------------------
    #cross
  ----------------------------------------*/
  #cross {
    padding: 10% 0 5%;
    background: url(../images/back-cross.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #cross .inner {
    margin: 0 auto;
    width: 70%;
  }
  #cross h3 {
    margin: 5% 10%;
		padding: 5%;
		background-color: rgba(0,0,0,.8);
  }
  #cross .text {
    padding: 10%;
    background: #fff;
  }
  /*----------------------------------------
    #epilogue
  ----------------------------------------*/
  #epilogue {
    padding: 10% 0 5%;
    background: url(../images/back-epilogue.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #epilogue .inner {
    margin: 0 auto;
    width: 70%;
  }
  #epilogue h3 {
    margin-bottom: 5%;
  }
  #epilogue .text {
    padding: 10%;
    background: #fff;
  }
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}