@charset "utf-8";

/* ==========================================
*
*  introduction
*
========================================== */

/* ///////////////////////////////////////////////////////////////////

  監督コメント

/////////////////////////////////////////////////////////////////// */


.comment {font-size: 3.5rem;text-align: center;}

.comment .contHead{
  margin-bottom: 0.3em;
  margin-top: 2em;
}

.comment .contHead span{
  display:inline-block;  
}

.comment .comment__name {
  font-weight: 400;
  font-size: 100%;
  margin: 1.5em 0 1em;
  letter-spacing: 0.2em;
  color: #000;
  }

.comment .comment__name span {display: block;font-size: 30%;letter-spacing: 0.7em;margin-top: 2em;color: #7d7d7d;font-weight: 300;}

.comment .comment__role {
    font-size: 50%;
    letter-spacing: 0.5em;
    /* color: #60838a; */
    font-weight: 300;
    margin: 0;
}

.comment .comment__text {
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 2.6;
  text-align: left;
  }


@media screen and (max-width:900px) {
  .comment {
    font-size: 3.5rem;
    text-align: center;
    }
  .comment .contHead{
    text-align: center;
  }
}

@media screen and (max-width:767px) {
  .comment {
    font-size: 7vw;
    text-align: center;
    }
  .comment .contHead{
    text-align: center;
  }
  .comment .comment__role {
    font-size: 50%;
  }
  .comment .comment__text {
    line-height: 2.0;
    font-size: 4vw;
  }
}



/*
  lead
======================== */

.introLead {
  font-family: YakuHanMPs, "Hannari", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMincho, serif;
  font-size: 6vw;
  font-weight: 500;
  margin: 0 0 1em;
  letter-spacing: -.01em;
  line-height: 1.8;
  color: #00AAF4;
  white-space: nowrap;
  position: relative;
}

@media screen and (min-width: 415px){
  .introLead {
    font-size: 4.5vw;
    color: #000;
  }
}


@media screen and (min-width: 900px){
  .introLead {
    font-size: 5rem;
    line-height: 1.7;
  }

  .introLead--large {
    font-size: 5.3rem;
  }
}

.introText+.introLead {
  margin-top: 2em;
}

[data-browser="IE"] .introLead,
[data-browser="Edge"] .introLead {
  white-space: normal;
}

/*
  lead before
======================== */

.introLead::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -80px;
  width: 153px;
  height: 153px;
  background: url(../../images/main/tz2/ling.png) center / contain no-repeat;
  mix-blend-mode: darken;
}


@media screen and (min-width: 900px){
  .introLead::before {
    width: 210px;
    height: 210px;
    top: -50px;
    left: -80px;
  }
}


/*
  body
======================== */

.introText {
  font-size: 4vw;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 2.0;
}

@media screen and (min-width: 768px){
  .introText {
    font-family: YakuHanMPs, Hannari, "Noto Serif JP", "ヒラギノ明朝 ProN W3", "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMincho, serif;
    font-size: 2.1rem;
    line-height: 2.6;
  }
}

.introText__katakana {
  letter-spacing: -.04em;
}

/*
  body - large
======================== */

.introText--large {
  font-family: YakuHanMPs, "Hannari", "Noto Serif JP", "ヒラギノ明朝 ProN W3", "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMincho, serif;
  font-size: 4.5vw;
  font-weight: 400;
  margin: 2.5em -10px 1em;
  letter-spacing: -.01em;
  line-height: 2;
  color: #00AAF4;
  text-align: center;
  position: relative;
}

@media screen and (min-width: 415px){
  .introText--large {
    font-size: 3vw;
  }
}

@media screen and (min-width: 900px){
  .introText--large {
    text-align: left;
    color: inherit;
    font-size: 3rem;
    margin-right: 0;
    margin-left: 0;
  }
}

/*
  body - large before
======================== */

.introText--large::before,
.introText--large::after {
  content: "";
  position: absolute;
  width: 57px;
  height: 80px;
  background: 
    url(../../images/main/tz2/ling.png) top center / 57px auto no-repeat,
    url(../../images/main/tz2/ling.png) bottom center / 27px auto no-repeat;
  mix-blend-mode: darken;
}

.introText--large::before {
  top: -20px;
  left: -20px;
}

.introText--large::after {
  right: -20px;
  bottom: -20px;
  background-position: bottom center, top left;
  height: 60px
}

@media screen and (min-width: 900px){
  .introText--large::before {
    width: 132px;
    height: 132px;
    top: -30px;
    left: -40px;
    background-size: cover, 66px;
    background-position: center, right 20px bottom 10px;
  }

  .introText--large::after {
    right: 80px;
    bottom: -20px;
    width: 90px;
    height: 90px;
    background-size: cover, 46px;
    background-position: center, right 40px bottom 0px;
    transform: rotate(90deg);
  }
}