@charset "UTF-8";
/* //////////////////////////////////////////////////

　エヌ・シィ・ティ30周年ページのスタイル

////////////////////////////////////////////////// */
#contents {
  background-image: url("../img/service/30th/bg_01.png"), url("../img/service/30th/bg_02.png");
  background-position: right top 200px, left bottom 15%;
  background-repeat: no-repeat;
  padding-bottom: 150px;
}
@media screen and (max-width: 768px) {
  #contents {
    background-size: 390px, 300px;
    padding-bottom: 100px;
  }
}

.btn.border {
  border-color: #000;
  background-image: url("../img/service/30th/mrk_right.png");
  color: #000;
  text-align: center;
}
.btn.border:hover {
  background-color: #000;
  color: #fff;
}

.ffH {
  font-family: "Hannari", serif;
}

/*
  top
-------------------------------------------------- */
#top {
  margin-bottom: 60px;
}
#top .headerTop{
  margin-bottom: 0;
  font-size: 1.4em;
  line-height: 1.4;
  text-align: center;
}
#top h2 {
  /*padding: 40px 0 30px;*/
  padding: 20px 0 30px 0;
  text-align: center;
}
#top .lead {
  background: url("../img/service/30th/mrk_lead.png") no-repeat 40px center/129px;
  padding: 15px 0;
  padding-left: 190px;
  font-size: 1.375em;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  #top {
    margin-bottom: 40px;
  }
  #top .headerTop{
    font-size: 1.1em;
  }
  #top h2 {
    /*padding: 30px 0 20px;*/
    padding: 5px 0 20px 0;
  }
  #top .lead {
    background-position: left center;
    background-size: 80px;
    padding: 5px 0;
    padding-left: 90px;
  }
}
@media screen and (max-width: 600px) {
  #top .lead {
    font-size: 1.125em;
  }
}

/*
  menu
-------------------------------------------------- */
#page_menu {
  text-align: center;
}
#page_menu ul {
  margin: 80px 0 0;
  border-right: 1px solid #000;
}
#page_menu ul li {
  /*width: 20%;*/
  width: 16.6%;
  border-left: 1px solid #000;
}
#page_menu ul li a {
  display: block;
  padding: 5px 0 20px;
  background: url("../img/service/30th/mrk_down.png") no-repeat center bottom/18px;
  font-size: 0.875em;
  line-height: 1.3;
}
#page_menu ul li a .ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin-bottom: 10px;
}
#page_menu ul li a .date {
  color: #888;
}
@media screen and (max-width: 768px) {
  #page_menu ul {
    margin: 40px 0 0;
    border-right: none;
    border-bottom: 1px solid #000;
    flex-direction: column;
  }
  #page_menu ul li {
    width: 100%;
    border-left: none;
    border-top: 1px solid #000;
  }
  #page_menu ul li a {
    padding: 10px 0 20px;
    background-position: center bottom 5px;
    background-size: 12px;
    font-size: 0.875em;
    line-height: 1.3;
  }
  #page_menu ul li a .ttl {
    display: block;
    height: inherit;
    margin-bottom: 5px;
  }
}

/*
  detail
-------------------------------------------------- */
.detail {
  padding-top: 80px;
  flex-direction: row-reverse;
}
.detail .text, .detail .image {
  width: 50%;
}
.detail .text {
  padding-left: 60px;
}
.detail .text h3 {
  margin-bottom: 0.4em;
  font-size: 1.875em;
}
.detail .text p {
  line-height: 1.7;
}
.detail .text dl {
  margin-top: 0.7em;
}
.detail .text dl dt, .detail .text dl dd {
  display: inline;
}
.detail .text dl dd + dt::before {
  content: "\A";
  white-space: pre-wrap;
}
.detail .text .btn {
  margin-top: 2em;
  font-size: 0.875em;
  width: 270px;
  padding: 15px;
}
.detail .image img {
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 768px) {
  .detail {
    padding-top: 60px;
    flex-direction: column-reverse;
  }
  .detail .text, .detail .image {
    width: 100%;
  }
  .detail .text {
    padding: 20px 0 0;
  }
  .detail .text .btn {
  width: 100%;
}
}

/*
  各レポート　追加
-------------------------------------------------- */
.eventreport{
  padding-top: 10px;
  font-size: 13px;
}
.to30btn{
  text-align: center;
  padding: 100px 0 20px;
}
.to30btn a{
  padding: 10px 35px;
  border-radius: 50px;
  border: solid 1px;
  color: #1f4d9a;
  width: 200px;
  /* height: 60px; */
  /* padding: 30px 0; */
  font-size: 18px;
}
.to30btn a:hover{
  background-color:#1f4d9a; 
    color: white;
    text-decoration: none;
}
/*
  日本酒道場レポート　追加
-------------------------------------------------- */
.ndreport{
  font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif;
  background-color: rgba(255,255,255,0.5);
}
.ndreport h1{
  text-align: center;
  font-size: 35px;
  padding-bottom: 15px;
  margin: 70px 0;
  border-bottom: solid 1px black;
}
.ndreporttext{
  padding: 0 50px;
}
.ndreporttext h2{
  font-size: 22px;
  padding: 50px 0 20px;
  font-weight: bold;
}
.ndreporttext p{
  font-size: 17px;
  text-align: justify;
}
.ndreporttext figure{
  width: 300px;
  padding: 20px 0;
  display: inline-block;
  margin-right: 50px;
}
@media screen and (max-width: 767px) {
  .ndreport h1{
    font-size: 21px;
  }
  .ndreporttext{
  padding: 0 10px;
  }
  .ndreporttext p{
  font-size: 15px;
  }
  .ndreporttext figure{
  width: 100% !important;
  padding: 10px 0;
  display: block;
  margin-right: 0px;
  }

}

/*
  ひなた　追加
-------------------------------------------------- */
#hinata h1{
    font-size: 50px;
    text-align: center;
    margin: 50px 0;
    font-weight: bold;
}
#hinata p{
    text-align: center;
    margin: 50px 0;
    font-size: 30px;
    line-height: 1.5;
}
#hinata .movie{
    text-align: center;
    margin: 100px 0;
}
#hinata .note{
    font-size: 18px;
    text-align: center;
    margin-top: 20px;
}
#hinata .blocka{
  float: left;
  width: 30%;
  margin: 0px 35px;
}
#hinata .blockb{
  float: left;
  width: 30%;
  margin: 0px 35px;
}
#hinata .lyrics{
  margin-bottom: 150px;
}
#hinata .lyrics figure{
  width: 300px;
  margin: 40px auto;
}
#hinata .lyrics p{
  text-align: left;
  margin: 0;
  font-size: 15px;
}
#hinata .songtitle{
  font-weight: bold;
  font-size: 35px;
}
#hinata .songlogo{
  width: 200px;
  margin: 0 auto;
}
.movie iframe {
    width: 80%;
    height: 450px;
  }
@media screen and (max-width: 900px) {
  #hinata .lyrics p{
  font-size: 11px;
  }
  #hinata .blocka{
  float: left;
  width: 30%;
  margin: 0 20px;
  }
  #hinata .blockb{
    float: left;
    width: 30%;
    margin: 0 20px;
  }
}
@media screen and (max-width: 767px) {
  #hinata .lyrics p{
  font-size: 12px;
  }
  #hinata .movie{
    margin: 50px 0;
  }
  #hinata .blocka{
    display: block;
    width: 100%;
    margin: 0;
  }
  #hinata .blockb{
    display: block;
    width: 100%;
    margin: 0;
  }
  #hinata h1 {
      font-size: 32px;
      margin: 30px 0;
  }
  #hinata p {
    margin: 30px 0;
    font-size: 15px;
  }
  #hinata .songtitle{
  font-size: 25px;
  }
  #hinata .songlogo{
  width: 150px;
  }
  .movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  }
  .movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }
  #hinata .lyrics{
  margin-bottom: 50px;
}
  #hinata .lyrics p{
  width: 250px;
  margin: 10px auto;
  }
}



/*
.hinamainning{
    background-image: url(../img/service/30th/hinata/hinata_top.png);
    background-repeat: no-repeat;
    background-position: right 20px bottom;
}
.hinataaudio{
  margin: 10px 0 -10px;
}
.hinalink{
  padding-top: 5px;
}
.songaudio{
  text-align: center;
  margin: 0 auto;
}
.hinatasong p{
  margin-top: 50px;
  text-align: center;
}
.hinatasong figure{
  width: 800px;
  margin: 0 auto;
  padding-top: 50px;
}
@media screen and (max-width: 768px) {
.hinatasong figure{
  width: 100%;
  margin: 0 auto;
  padding-top: 50px;
}
}
*/

/*
  アルビレポート　追加
-------------------------------------------------- */
.bbreport {
  font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif;
}
.bbreport h1{
  text-align: center;
  font-size: 35px;
  padding-bottom: 15px;
  margin: 70px 0;
  border-bottom: solid 1px black;
}
.bbreport h2{
  text-align: center;
  font-size: 17px;
  padding-bottom: 50px;
}
.bbreporttext{
  overflow: hidden;
}
.bbreport figure{
  padding-bottom: 50px;
}
.bbreport p{
  font-size: 17px;
  padding: 0px 26px;
  text-align: justify;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
}
.bbreport .bbreporttext .right{
  float: right;
  height: 333px;
  margin-bottom: 40px;
  width: 50%;
}
.bbreport .bbreporttext .left{
  float: left;
  height: 333px;
  margin-bottom: 40px;
  width: 50%;
}
.bbreport .bbreporttext .center{
  text-align: center;
  display: block;
}
@media screen and (max-width: 767px) {
  .bbreport h1{
    font-size: 21px;
  }
  .bbreport h2{
    font-size: 15px;
    padding-bottom: 30px;
  }
  .bbreport p{
  width: 100%;
  font-size: 15px;
  height: 100%;
  padding: 0px;
  text-align: justify;
}
  .bbreport figure{
  width: 100%;
  padding: 10px 0 10px;
  }
    .bbreport .bbreporttext .right{
    float: none;
    width: 100%;
    height: 100%;
    margin-bottom: 5px;
  }
  .bbreport .bbreporttext .left{
    float: none;
    width: 100%;
    height: 100%;
    margin-bottom: 5px;
  }
  .bbreport .bbreporttext .center{
  text-align: left;
  }
}
@media screen and (width: 768px) {
.bbreport .bbreporttext .right{
  height: 250px;
}
.bbreport .bbreporttext .left{
  height: 250px;
}
}

/*
  30周年NCTまつりレポート　追加
-------------------------------------------------- */
/*
.ncteventreport{
  font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif;
}
.ncteventreport h1{
  text-align: center;
  font-size: 35px;
  padding-bottom: 15px;
  margin: 70px 0 50px;
  border-bottom: solid 1px black;
}
.ncteventreporttext{
  background-color: rgba(255,255,255,0.5);
  padding: 0 50px;
}
.ncteventreporttext h2{
  font-size: 22px;
  padding: 50px 0 20px;
  font-weight: bold;
}
.ncteventreporttext .intro{
  text-align: center;
}
.ncteventreporttext .day{
  text-align: center;
  border: solid 1px;
  padding: 20px;
  margin: 40px 0;
  font-size: 20px;
  border-radius: 4px;
}
.ncteventreporttext p a{
  text-decoration: underline;
}
.nctevent_blue{
  color: #1e4d9a;
}
.nctevent_red{
  color: #f72323;
}
.ncteventreporttext p{
  font-size: 17px;
  text-align: justify;
}
.ncteventreporttext figure{
  width: 300px;
  padding: 20px 0;
  display: inline-block;
  margin-right: 20px;
}
@media screen and (max-width: 767px) {
  .ncteventreport h1{
    font-size: 21px;
  }
  .ncteventreporttext{
  padding: 0 10px;
  }
  .ncteventreporttext p{
  font-size: 15px;
  }
  .ncteventreporttext figure{
  width: 100% !important;
  padding: 10px 0;
  display: block;
  margin-right: 0px;
  }
  .ncteventreporttext .intro{
  font-size: 17px;
  text-align: justify;
}
}
*/
.ncteventreport h1{
  text-align: center;
  font-size: 35px;
  padding-bottom: 15px;
  margin: 70px 0 50px;
  border-bottom: solid 1px black;
}
.ncteventreporttext{
  background-color: rgba(255,255,255,0.5);
  padding: 0 50px;
}
.ncteventreporttext h2{
  font-size: 22px;
  padding: 50px 0 20px;
  font-weight: bold;
}
.ncteventreporttext .day{
  text-align: center;
  border: solid 1px;
  padding: 20px !important;
  margin: 40px 0;
  font-size: 20px;
  border-radius: 4px;
}
.ncteventreporttext p a{
  text-decoration: underline;
}
.nctevent_blue{
  color: #1e4d9a;
}
.nctevent_red{
  color: #f72323;
}
.ncteventreporttext p{
  font-size: 17px;
  text-align: justify;
}
@media screen and (max-width: 767px) {
  .ncteventreport h1{
    font-size: 21px;
  }
  .ncteventreporttext{
  padding: 0 10px;
  }
  .ncteventreporttext p{
  font-size: 15px;
  }
  .ncteventreporttext .intro{
  font-size: 17px;
  text-align: justify;
}
}




.ncteventreport h1{
  text-align: center;
  font-size: 35px;
  padding-bottom: 15px;
  margin: 70px 0 40px;
  border-bottom: solid 1px black;
}
.ncteventreport h2{
  text-align: center;
  font-size: 17px;
  padding-bottom: 50px;
}
.ncteventreporttext{
  overflow: hidden;
}
.ncteventreport figure{
  padding-bottom: 50px;
}
.ncteventreport .ncteventreporttext p{
  font-size: 17px;
  padding: 0px 26px;
  text-align: justify;
  height: 90%;
  /*
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  */
}
.ncteventreporttext .intro p{
  text-align: center !important;
  display: block;
}
.ncteventreport .ncteventreporttext .right{
  float: right;
  height: 333px;
  margin-bottom: 40px;
  width: 50%;
}
.ncteventreport .ncteventreporttext .left{
  float: left;
  height: 333px;
  margin-bottom: 40px;
  width: 50%;
}
.ncteventreport p a{
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  .ncteventreporttext .intro p{
  text-align: center !important;
  display: flow-root;
}
  .ncteventreport h1{
    font-size: 21px;
  }
  .ncteventreport h2{
    font-size: 15px;
    padding-bottom: 30px;
  }
    .ncteventreport .ncteventreporttext p{
  width: 100%;
  font-size: 12px;
  height: 100%;
  padding: 0px;
  text-align: justify;
}
  .ncteventreport figure{
  width: 100%;
  padding: 10px 0 10px;
  }
    .ncteventreport .ncteventreporttext .right{
    float: none;
    width: 100%;
    height: 100%;
    margin-bottom: 5px;
  }
  .ncteventreport .ncteventreporttext .left{
    float: none;
    width: 100%;
    height: 100%;
    margin-bottom: 5px;
  }
}
@media screen and (width: 768px) {
  .ncteventreport .ncteventreporttext .right{
    height: 250px;
  }
  .ncteventreport .ncteventreporttext .left{
    height: 250px;
  }
  .ncteventreport .ncteventreporttext p{
    font-size: 13px;
      padding: 0px 15px;
  }
}


/*
  ＮＣＴアンコール　追加
-------------------------------------------------- */
.encoretitle{
  font-size: 18px;
  font-weight: bold;
}
.scheduleindent{
  padding-left: 64px;
}
.past{
  padding-top: 20px;
  font-size: 13px;
}
.past span{
  font-weight: bold;
  font-size: 16px;
}
.ncten .modaal_content{
  overflow: hidden;
}
.ncten .modaal_content .left{
  float: left;
  width: 50%;
}
.ncten .modaal_content .right{
  float: right;
  width: 50%;
  padding-left: 15px;
}
@media screen and (max-width: 768px) {
  .encoretitle{
  font-size: 16px;
  }
  .scheduleindent{
  padding-left: 0px;
  }
  .ncten .modaal_content .left{
  width: 100%;
  float: none;
  }
  .ncten .modaal_content .right{
  float: none;
  width: 100%;
  padding-left: 0px;
  }
}

/*
  ポップアップ
-------------------------------------------------- */
.modaal-wrapper .modaal_content {
  position: relative;
}
.modaal-wrapper .modaal_content h6 {
  margin-bottom: .9em;
  font-size: 1.875em;
  font-weight: 900;
  text-align: center;
}
.modaal-wrapper .modaal_content img {
  margin-bottom: 10px;
}
.modaal-wrapper .modaal-content-container {
  padding: 60px;
}

.justify {
  text-align: justify;
  text-justify: inter-ideograph;
}

@media screen and (max-width: 768px) {
  .modaal-wrapper .modaal-content-container {
    padding: 50px 20px 30px;
  }
}
.modaal-wrapper .modaal-close {
  background: url("../img/service/mobile/btn_close.png") no-repeat center;
  background-size: 26px;
  width: 26px;
  height: 26px;
  text-indent: -9999px;
  bottom: inherit;
  left: inherit;
  top: 15px;
  right: 15px;
  transform: none;
}

@media screen and (max-width: 768px) {
  .modaal-wrapper .modaal-close {
    top: 10px;
    right: 10px;
  }
}


/*
  お問い合わせフォーム
-------------------------------------------------- */
#contact_form .form {
  background: ;
  padding: 60px 75px 65px;
}
#contact_form .form .required {
  background: #121d48;
  color: #6cb4dd;
}
#contact_form .form dt::before {
  background: #76accb;
}
#contact_form .form .submit {
  -webkit-appearance: none;
  background: #64b1d5;
  box-shadow: 0 8px 0 #2272a2;
}
#contact_form .form .submit:hover {
  box-shadow: 0 2px 0 #2272a2;
}
#contact_form .t-link{
  text-decoration:underline;
  color:#64b1d5;
}

@media screen and (max-width: 768px) {
  #contact_form .form {
    padding: 30px 20px 35px;
  }
}


/*
  記念講演会レポート　追加
-------------------------------------------------- */
.kouenreport {
  font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif;
}
.kouenreport h1{
  text-align: center;
  font-size: 35px;
  padding-bottom: 15px;
  margin: 70px 0;
  border-bottom: solid 1px black;
}
.kouenreport h2{
  text-align: center;
  font-size: 17px;
  padding-bottom: 50px;
}
.kouenreporttext{
  overflow: hidden;
}
.kouenreport figure{
  padding-bottom: 50px;
}
.kouenreport p{
  font-size: 17px;
  padding: 0px 26px;
  text-align: justify;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
}
.kouenreport .kouenreporttext .in_out{
  margin-bottom:60px;
  text-align: center;
}
.kouenreport .kouenreporttext .in_out p{
  display: block;
  text-align: center;
}
.kouenreport .kouenreporttext .right{
  float: right;
  height: 300px;
  margin-bottom: 40px;
  width: 50%;
}
.kouenreport .kouenreporttext .left{
  float: left;
  height: 300px;
  margin-bottom: 40px;
  width: 50%;
}
@media screen and (max-width: 767px) {
  .kouenreport h1{
    font-size: 21px;
    margin: 30px 0;
  }
  .kouenreport h2{
    font-size: 15px;
    padding-bottom: 30px;
  }
  .kouenreport p{
  width: 100%;
  font-size: 15px;
  height: 100%;
  padding: 0px;
  text-align: justify;
  }
  .kouenreport figure{
  width: 100%;
  padding: 10px 0 10px;
  }
    .kouenreport .kouenreporttext .right{
    float: none;
    width: 100%;
    height: 100%;
    margin-bottom: 5px;
  }
  .kouenreport .kouenreporttext .left{
    float: none;
    width: 100%;
    height: 100%;
    margin-bottom: 5px;
  }
  .kouenreport .kouenreporttext .in_out{
  margin:20px 0 20px;
  }
  .kouenreport .kouenreporttext .in_out p{
  text-align: justify;
  }
}
@media screen and (width: 768px) {
.kouenreport .kouenreporttext .right{
  height: 250px;
}
.kouenreport .kouenreporttext .left{
  height: 250px;
}
}

.entryend{
  margin-top: 20px;
  color: orange;
}


/*
  記念講演会申し込みフォーム　追加
-------------------------------------------------- */

@media screen and (max-width: 767px) {
  #pagettl h2 .thform{
    font-size: 1.5em !important;
  }
}