@charset "UTF-8";
/* CSS Document */
/* 赤 */
/* 赤 */
/* 赤 */
/* 赤 */
/* グレー */
/* グレー */
.pop {
  position: relative; }
  .pop:after {
    content: "";
    width: 30px;
    height: 30px;
    background: url("/lib/img/icon_zoom.png") no-repeat 0 0/contain;
    position: absolute;
    right: 10px;
    bottom: 10px; }

/* introduction
----------------------------------------------*/
#introduction {
  position: relative; }
  #introduction .lead {
    max-width: 60%;
    padding: 4rem 14% 4rem 4%;
    background: #F3F3F3; }
  #introduction .photo {
    max-width: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); }
  #introduction h2 {
    font-size: 2.4rem;
    margin-bottom: 2.4rem; }

@media screen and (max-width: 767px) {
  #introduction {
    position: relative; }
    #introduction .lead {
      max-width: 100%;
      padding: 4rem 4% 6rem 4%;
      background: #F3F3F3; }
    #introduction .photo {
      max-width: 80%;
      position: relative;
      right: auto;
      top: auto;
      margin: 0 0 0 auto;
      padding: 0 10px 0 0;
      transform: translateY(-20px); }
    #introduction h2 {
      font-size: 2.4rem;
      margin-bottom: 2.4rem; } }
/* message
----------------------------------------------*/
#message {
  max-width: 650px;
  margin: 0 auto; }
  #message .sig {
    text-align: right; }

/* supportInfo
----------------------------------------------*/
#supportInfo {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5rem; }
  #supportInfo h2 {
    width: 100%;
    margin-bottom: 0;
    background: #F3f3f3;
    padding: 2rem;
    font-size: 2.4rem; }
  #supportInfo h3 {
    font-size: 1.8rem;
    margin-bottom: 1.8rem;
    padding: .5rem 0;
    border-bottom: 1px solid #333;
    border-top: 1px solid #333; }
  #supportInfo > section {
    width: calc(50% - 2.5rem);
    margin: 0; }
    #supportInfo > section#stage_subtitle {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      flex-direction: row-reverse; }
      #supportInfo > section#stage_subtitle h3 {
        width: 100%; }
      #supportInfo > section#stage_subtitle > div {
        width: 48%; }
      #supportInfo > section#stage_subtitle .sampleTitle {
        margin-bottom: 5px; }
      #supportInfo > section#stage_subtitle .sample {
        display: flex;
        justify-content: space-between; }
        #supportInfo > section#stage_subtitle .sample li {
          width: 32%; }
          #supportInfo > section#stage_subtitle .sample li a {
            position: relative; }
            #supportInfo > section#stage_subtitle .sample li a:after {
              content: "";
              width: 20px;
              height: 20px;
              background: url("/lib/img/icon_zoom.png") no-repeat 0 0/contain;
              position: absolute;
              right: 5px;
              bottom: 5px; }
  #supportInfo .movie iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto; }

@media screen and (max-width: 767px) {
  #supportInfo {
    display: block; }
    #supportInfo h2 {
      margin-bottom: 2.4rem; }
    #supportInfo > section {
      width: 100%;
      margin: 0 0 2rem 0; }
      #supportInfo > section#stage_subtitle {
        display: block; }
        #supportInfo > section#stage_subtitle h3 {
          width: 100%; }
        #supportInfo > section#stage_subtitle > div {
          width: 100%; }
          #supportInfo > section#stage_subtitle > div.photo {
            margin-top: 2rem; }
    #supportInfo .movie iframe {
      aspect-ratio: 16/9;
      width: 100%;
      height: auto; } }
/* supportInfo
----------------------------------------------*/
#uservoice h2 {
  width: 100%;
  margin-bottom: 2.4rem;
  background: #F3f3f3;
  padding: 2rem;
  font-size: 2.4rem; }
#uservoice .voice {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1%; }
  #uservoice .voice > li {
    width: 48%;
    padding: 2rem;
    border-radius: 10px;
    border: 1px solid #666; }
  #uservoice .voice .sig {
    text-align: right; }

@media screen and (max-width: 767px) {
  #uservoice .voice {
    display: block; }
    #uservoice .voice > li {
      width: 100%;
      margin-bottom: 2rem; } }