@charset "utf-8";
/*************************************************************
 *
 * Copyright (c) 2025 ysrock Co., Ltd.	<info@ysrock.co.jp>
 * Copyright (c) 2025 Yasuo Sugano	<sugano@ysrock.co.jp>
 *
 * Version	: 1.0.0
 * Update	  : 2025.05.16
 *
 *************************************************************/

#event > div.eventWrap > a {
  position: relative;
}
#event > div.eventWrap > div.title {
  position: relative;
  padding-top: 10%;
}
#event > div.eventWrap > div.title > div.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(./imgs/headline.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#event > div.eventWrap > div.title > div.wrap > h3 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#event > div.eventWrap > div.image {
  text-align: center;
}
#event > div.eventWrap > div.image > img {
  max-width: 100%;
}
@media print, screen and (min-width: 1025px) {
  /* px */

  #event {
    width: 1000px;
    margin: 20px auto;
  }

  #event > div.eventWrap {
    margin-top: 30px;
  }
  #event > div.eventWrap > a {
    top: -68px; /* nav + 10px */
  }
  #event > div.eventWrap > div.title > div.wrap > h3 {
    padding: 0 30px;
    font-size: 24px;
  }
  #event > div.eventWrap > div.image {
    margin-top: 30px;
  }
  #event > div.eventWrap > div.body {
    margin-top: 20px;
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px){
	/* px/8.5 */

  #event {
    width: 95vw;
    margin: 2.3419vw auto;
  }

  #event > div.eventWrap {
    margin-top: 3.5128vw;
  }
  #event > div.eventWrap > a {
    top: -7.9625vw; /* nav + 1.1709vw */
  }
  #event > div.eventWrap > div.title > div.wrap > h3 {
    padding: 0 3.5128vw;
    font-size: 2.8103vw;
  }
  #event > div.eventWrap > div.image {
    margin-top: 3.5128vw;
  }
  #event > div.eventWrap > div.body {
    margin-top: 2.3419vw;
  }
}
@media screen and (max-width: 640px){
	/* px/4 */

  #event {
    width: 95vw;
    margin: 5vw auto;
  }

  #event > div.eventWrap {
    margin-top: 7.5vw;
  }
  #event > div.eventWrap > a {
    top: -2.5vw;
  }
  #event > div.eventWrap > div.title {
    padding-top: 15%;
  }
  #event > div.eventWrap > div.title > div.wrap > h3 {
    padding: 0 5vw;
    font-size: 6vw;
  }
  #event > div.eventWrap > div.image {
    margin-top: 7.5vw;
  }
  #event > div.eventWrap > div.body {
    margin-top: 5vw;
  }
  #event > div.eventWrap > div.body * {
    font-size: 5vw;
    line-height: 1.4em;
  }
}