@charset "utf-8";

.loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  z-index: 10000;
}

.loading__inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.loading__img {
  width: 50%;
  height: 50%;
  max-width: 500px;
  max-height: 500px;
  background: url(../../images/main/tz/loading_catch@2x.png) center/auto 100% no-repeat;
  position: relative;
}

.loading__img::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  transform-origin: top left;
  animation: loadingText 2.5s linear .5s both;
}

@keyframes loadingText {
  0% {
    transform: scale(1, 1)
  }
  100% {
    transform: scale(0, 1)
  }
}

.topSection {
  background: url(../../images/main/tz2/top_bg.jpg) center/cover no-repeat;
  text-align: center;
  padding-top: 50px;
}

#header {
  background: #fff;
}

#contents {
  padding: 0 0em;
}

#contents::before {
  content: "";
  position: fixed;
  display: block;
  width: 100%;
  /* height:100vh; */
  background: url(../../images/main/tz2/top_bg.jpg) bottom center/100% auto no-repeat;
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
}

.sectionWrap {
  padding: 0 1em;
}

.mainSection {
  text-align: center;
  position: relative;
}


@media screen and (max-width:767px) {
  .sectionWrap {
    padding: 0 0em;
  }
  .topSection {
    padding-top: 8vw;
  }
}


/* ==========================================
*
*  ONAIR
*
========================================== */

.mainSection#onair {}

.mainSection#onair p {
  line-height: 2.3;
  font-size: 3rem;
  margin: 0 0 0.5em;
  color: #5b2b77;
}

.mainSection#onair p.notice {
  font-size: 1.3rem;
  color: #353535;
  font-weight: normal;
}

.mainSection#onair p span {
  display: inline-block;
  margin: 0 0.3em 0;
}

.mainSection#onair p span:last-child {
  margin: 0 0.0em 0;
}

.mainSection#onair .whatsRugby {
  text-align: left;
  background: rgba(255, 255, 255, 0.8);
  padding: 2em 3em;
  margin: 3em 0 0 0;
}

.mainSection#onair .whatsRugby p {
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', sans-serif;
  color: #000;
}

.mainSection#onair .whatsRugby div.whatsRugby_head {
  font-size: 2.4rem;
  margin: 0 0 1em;
  color: #642786;
}

.mainSection#onair .whatsRugby div.whatsRugby_head span {
  display: inline-block;
  font-size: 50%;
  margin: 0 0 0 1em;
}

@media screen and (max-width:767px) {
  .mainSection#onair {}

  .mainSection#onair p {
    font-size: 7.5vw;
    line-height: 1.8;
  }

  .mainSection#onair p span {
    margin: 0;
  }

}


/* ==========================================
*
*  INTRODUCTION
*
========================================== */

.mainSection#intro {
  margin: 0 0 1.0em;
}

.mainSection#intro p {
  line-height: 2.3;
  font-size: 2.2rem;
  margin: 0 0 1em;
  color: #5b2b77;
}

.mainSection#intro p span {
  display: inline-block;
}

.mainSection#intro h2.mainSection__head {
  margin: 1em 0 1em;
}

.mainSection#intro .whatsRugby {
  text-align: left;
  background: rgba(255, 255, 255, 0.8);
  padding: 2em 3em;
  margin: 3em 0 0 0;
}

.mainSection#intro .whatsRugby p {
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', sans-serif;
  color: #000;
}

.mainSection#intro .whatsRugby div.whatsRugby_head {
  font-size: 2.4rem;
  margin: 0 0 1em;
  color: #642786;
  font-weight: bold;
}

.mainSection#intro .whatsRugby div.whatsRugby_head span {
  display: inline-block;
  font-size: 50%;
  margin: 0 0 0 1em;
}

@media screen and (max-width:767px) {
  .mainSection#intro p {
    font-size: 4.5vw;
  }

  .mainSection#intro .whatsRugby {
    padding: 1em 1em;
  }

  .mainSection#intro .whatsRugby p {
    font-size: 3.5vw;
  }
  .mainSection#intro .whatsRugby div.whatsRugby_head {
    font-size: 2.4rem;
  }
  .mainSection#intro .whatsRugby div.whatsRugby_head span {
    font-size: 50%;
  }
}

/* ==========================================
*
*  STAFF
*
========================================== */

.mainSection#staff {}

.mainSection__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1em;
  position: relative;
  z-index: 1;
}

h2.mainSection__head {
  margin: 3em 0 1em;
}

h2.mainSection__head img {
  width: 100%;
  max-width: 350px;
  vertical-align: baseline;
}

h3.mainSection__head {
  margin: 2.5em 0 2.5em;
}

h3.mainSection__head img {
  width: 100%;
  max-width: 347px;
  vertical-align: baseline;
}


.mainImg {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 0 0em;
}

.mainImg__massage {
  position: absolute;
  left: 5%;
  bottom: 23%;
  width: 36%;
}

.mainImg__massage button {
  transition: .3s;
}

.mainImg__massage button:hover {
  opacity: .6;
}

.mainImg__twitter {
  position: absolute;
  left: 0;
  bottom: 1%;
  right: 0;
  margin: 0 auto;
}

@media screen and (max-width:767px) {
  .mainImg {
    padding: 0 0 0vw;
  }
}

/* ==========================================
*
*  
*
========================================== */

.modalArea {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
}

.modalArea__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, .9);
  overflow-y: auto;
  padding: 20px 0;
}

@media screen and (max-height: 650px) {
  .modalArea__inner {
    display: block;
  }
}

.authorMessage {
  width: 90%;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
  border: 2px solid #dfce88;
  outline: 2px solid rgba(255, 253, 242, .8);
  border-radius: 2px;
  padding: 1.6em;
  background: repeating-linear-gradient(-45deg, rgba(255, 254, 248, .8), rgba(255, 254, 248, .8) 15px, rgba(255, 253, 241, .8) 15px, rgba(255, 253, 241, .8) 30px) center;
}

.authorMessage__head {
  font-size: 1.6rem;
  margin: 0 0 1em;
  letter-spacing: .1em;
  line-height: 1.4;
}

.authorMessage__head b {
  color: #642786;
}

.authorMessage__text {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 3;
}

@media screen and (min-width: 600px) {
  .authorMessage__head {
    font-size: 1.67rem;
  }

  .authorMessage__text {
    font-size: 1.32rem;
  }
}

.js-closeModalMessage {
  width: 70px;
  height: 70px;
  position: relative;
}

.js-closeModalMessage::before,
.js-closeModalMessage::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #000;
  margin: auto;
  transition: .6s;
}

.js-closeModalMessage::before {
  transform: rotate(45deg);
}

.js-closeModalMessage::after {
  transform: rotate(-45deg);
}

.js-closeModalMessage:hover::before,
.js-closeModalMessage:hover::after {
  transform: rotate(0deg);
}

/* ==========================================
*
*  
*
========================================== */

.storyText {
  font-size: 1.2rem;
  line-height: 3;
  text-shadow: 1px 1px 2px #000;
}

@media screen and (min-width: 600px) {
  .storyText {
    font-size: 1.8rem;
    line-height: 3.5;
  }
}

/* ==========================================
*
*  
*
========================================== */

ul.staffList {
  width: 100%;
  line-height: 1.2;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 780px;
  margin: 0 auto;
}

ul.staffList li {
  margin: 0 0;
}

ul.staffList.column5 {
  margin-bottom: 3em;
}

ul.staffList.column5 li {
  margin: 0 2em;
}

ul.staffList.column4 {
  margin-bottom: 2em;
}

ul.staffList.column4 li {
  margin: 0 2em;
}

ul.staffList.column3 {
  margin-bottom: 2em;
}

ul.staffList.column3 li {
  margin: 0 2em;
}

ul.staffList.column2 {
  margin-bottom: 2em;
}

ul.staffList.column2 li {
    margin: 0 2em;
}

ul.staffList.column1 {
  margin-bottom: 2em;
}

ul.staffList.column1 li {}

.staffList p {
  margin: 0 0 0.5em;
  letter-spacing: 0.2em;
  line-height: 1.4;
}

.staffList p.ls0,
.staffList p span {
  display: block;
  letter-spacing: 0.0em;
}

.staffList p:first-child {
  font-size: 1.1rem;
  font-weight: 500;
  color: #64009b;
}

.staffList p:last-child {
  font-size: 1.7rem;
  font-weight: 500;
  color: #000000;
}


.staffList dt {
  font-size: 1.1rem;
  margin: 0 0 .2em;
}

.staffList dd {
  margin: 0 0 1.5em;
  font-size: 1.8rem;
}

@media screen and (max-width: 767px) {
  ul.staffList.column5 {
    /* max-width: 100%; */
    margin: 0;
  }
  ul.staffList.column5 li {
    width: 50%;
    margin: 0 0 2em;
  }

  ul.staffList.column4 {
    max-width: 100%;
    margin: 0;
  }
  ul.staffList.column4 li {
    width: 50%;
    margin: 0 0 2em;
  }

  ul.staffList.column3 {
    max-width: 100%;
    margin: 0;
  }
  ul.staffList.column3 li {
    width: 50%;
    margin: 0 0 2em;
  }

  ul.staffList.column2 {
    max-width: 100%;
    margin: 0;
  }
  ul.staffList.column2 li {
    width: 50%;
    margin: 0 0 2em;
  }

  ul.staffList.column1 {
    max-width: 100%;
    margin: 0;
  }
  ul.staffList.column1 li {
    width: 100%;
    margin: 0 0 2em;
  }

  .staffList p {
    margin: 0 0 0.5em;
    letter-spacing: -0.0em;
    line-height: 1.4;
  }
  .staffList p:first-child {
    font-size: 3.0vw;
  }

  .staffList p:last-child {
    font-size: 5vw;
  }
}

/* ==========================================
*
*  mfp
*
========================================== */

.mfp-bg {
  background: rgba(0, 0, 0, .8) !important;
}

.mfp-fade.mfp-bg {
  opacity: 0;
  transition: .5s;
}

/* overlay animate in */

.mfp-fade.mfp-bg.mfp-ready {
  opacity: 1;
}

/* overlay animate out */

.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */

.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: .5s;
}

/* content animate it */

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

/* content animate out */

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}