@charset "UTF-8";

* { box-sizing:border-box }
:after { box-sizing:border-box }
:before { box-sizing:border-box }

body {
  width: 100%;
  font-size: 14px;
  font-family: 'ＭＳ Ｐゴシック';
  color: #333;
  line-height: 21px;
  margin: 0;
  background-color: #E8ECEF;
}

/*  include  */
#produce_only object{
  width: 100%;
  height: 585px;
}
#event iframe,
#content iframe,
#media iframe,
#produce iframe{
  width: 100%;
  height: 537px;
  overflow: scroll;
}
/*  タブの切り替え  */
.tab{
  overflow:hidden;
}
.tab li.select{
  opacity: 0.7;
}
.hide{
  display: none;
}
#nav{
  margin: 0;
}
#nav ul{
  width: 770px;
  margin-bottom:2px;
  padding-left: 0;
  display: flex;
}
#nav ul li{
  list-style-type: none;
  text-indent: -9999px;
  width: 24.9999%;
  height: 33px;
}
#nav ul #nav_event{
  background-image: url('/modals/portfolio/img/nav_event.png');
  background-repeat: no-repeat;
}
#nav ul #nav_content{
  background-image: url('/modals/portfolio/img/nav_content.png');
  background-repeat: no-repeat;
}
#nav ul #nav_media{
  background-image: url('/modals/portfolio/img/nav_media.png');
  background-repeat: no-repeat;
}
#nav ul #nav_produce{
  background-image: url('/modals/portfolio/img/nav_produce.png');
  background-repeat: no-repeat;
}
#nav ul li:hover{
  cursor: pointer;
}
.item-box{
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px dotted #3682b4;
}
.item-box-last{
  margin-bottom: 40px;
}

.data{
  margin-bottom: 10px;
  color: #3482b4;
}
#wrap {
  padding: 0 10px 10px;
  line-height: 20px;
  overflow: hidden;
}

.tableLike__h {
  padding: 12px;
  background-color: #3482b4;
  color: #FFF;
  border: 0;
  font-size: 113%;
  font-weight: 700;
  text-align: center;
}

h3 {
  font-size: 128.6%;
  border-bottom: solid 1px #296a97;
  color: #333;
  padding: 15px;
  margin: 0;
  font-family: inherit;
  font-weight: bold;
  line-height: 1.1;
}
h4{
  font-size: 114.3%;
  border-bottom: solid 3px #296a97;
  color: #333;
  padding: 15px 15px 15px 40px;
  font-family: inherit;
  font-weight: bold;
  line-height: 1.1;
  background: url('../img/h4_icon.png') no-repeat;
  background-position: 10px;
  text-indent: 0px;
}

h5{
  width: 100%;
  display: inline-block;
}
.text-h{
  font-size: 107.2%;
  font-weight: bold;
  padding-left: 10px;
  border-left: 5px solid #296a97;
}


h6{
  position: relative;
  font-size: 100%;
  font-weight: bold;
  margin: 30px 0 20px;
  padding-left: 15px;
  padding-bottom: 5px;
  border-bottom: 2px dotted #8dbee0;
}
h6:after {
  position: absolute;
  top: 0.4em;
  left: 0em;
  z-index: 2;
  content: '';
  width: 10px;
  height: 10px;
  border: 3px solid #3498db;
  border-radius: 100%
}

img {
  vertical-align: middle;
  border: 0;
}
p {
  margin: 0 0 10px;
}

iframe{
  text-align: center;
}






/*********************************/
/*              box              */
/*********************************/
.cf {
  justify-content: space-between;
  zoom: 1;
}
.cf:first-of-type{
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
}

.box-m {
  box-sizing: border-box;
  /* padding: 0 10px; */
}

.box-m + .box-m {
  margin-left: 20px;
}

.box-m img{
  max-width: 100%;
  height: auto;
}

.width1{
  width: 8.3333%;
}

.width2{
  width: 16.6666%;
}

.width3{
  width: 24.9999%;
}

.width4{
  width: 33.3333%;
}

.width5{
  width: 41.6666%;
}

.width6{
  width: 50%;
}

.width7{
  width: 58.3333%;
}

.width8{
  width: 66.6666%;
}

.width9{
  width: 75%;
}

.width10{
  width: 83.3333%;
}

.width11{
  width: 91.6666%;
}

.width12{
  width: 100%;
}


/*********************************/
/*              img              */
/*********************************/
.cf > .spImgBox,
.cf > .spMovieBox,
.cf > .imgMov{
  margin: 0;
}
.spMovieBox,.spImgBox,.imgMov{
  display: flex;
  width: 100%;
}
.spMovieBox{
  width: 100%;
}
.image2{
  display: inline-block;
  width: auto;
  height: auto;
  text-align: center;
}
.image{
  display: inline-block;
  width: 100%;
  height: auto;
  text-align: center;
}
.box-m p a img:hover{
  opacity: 0.7;
}

.img_waku{
  border: 1px solid #3482b4;
}

.caption{
  font-size: 80%;
  text-align: left;
}
.tr{
  text-align: right;
}
.linkList{
  padding-left: 5px;
}
.linkList li {
  list-style: none;
  padding-bottom: 8px;
  margin-bottom: 0.5em;
  padding-left: 1em;
}
.linkList li:before{
  font-family: "Font Awesome 5 Free";
  font-size: 0.9em;
  content: '\f061';
  color: #3482b4;
  font-weight: 900;
  padding-right: 6px;
  display:inline-block;
  width:1.5em;
  margin-left:-1.5em;
}
.linkList li a{
  color: #000;
}
.linkList li a:hover{
  color: #2f7eab;
}

.p0{
  padding: 0px;
}
.mt-0{
  margin-top: 0px;
}
.mt-10{
  margin-top: 10px;
}
.mt-15{
  margin-top: 15px;
}
.mt-20{
  margin-top: 20px;
}
.mt-30{
  margin-top: 30px;
}
.mt-40{
  margin-top: 40px;
}

.mb-0{
  margin-bottom: 0px;
}
.mb-10{
  margin-bottom: 10px;
}
.mb-15{
  margin-bottom: 15px;
}
.mb-20{
  margin-bottom: 20px;
}
.mb-30{
  margin-bottom: 30px;
}
.mb-40{
  margin-bottom: 40px;
}

.ml-0{
  margin-left: 0px;
}
.ml-10{
  margin-left: 10px;
}
.ml-15{
  margin-left: 15px;
}
.ml-20{
  margin-left: 20px;
}
.ml-30{
  margin-left: 30px;
}
.ml-40{
  margin-left: 40px;
}
.tc{
  text-align: center;
}
.intro{
  padding: 0 10px 20px;
}

.imgOnly {
  width: auto;
  height: auto;
  margin: auto;
}
.spNav{
  display: none;
}
a.outLink:after{
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  color: #3482b4;
  font-weight: 900;
  padding-left: 6px;
  font-size: 0.7rem;
}