/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}

html{
    width: 100%;
}

body {

    width: 100%;
    background-image: url(bg.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
}

.wrap{
  overflow: hidden;
}

.p1img img{
    margin-left:-53px;
    margin-right:-30px;
    justify-content: center;
    margin-top: -8px;
    width:143%
}
/*p208*/
.itemlist img{
    width: 66px;
    height: 77.2px;
    justify-content: center;
    overflow:hidden;
    transition: 0.5s;
    margin:16px 10px 53px;
}

.itemlist img:hover {
  transform: scale(1.1,1.1);
}

#title-inteview{
  width: 160px;
  height:auto;
  justify-content: center;
}

#title-webcm{
  width: 77px;
  height:auto;
  justify-content: center;
}

#content-webcm{
  width: 300px;
  height:auto;
  justify-content: center;
  margin-bottom: 30px;
}

#content-guest{
  margin-left:-41px;
  margin-right:-30px;
  justify-content: center;
  margin-top: -70px;
  width:120%
}

#content-inteview{
  margin-left:-7px;
  margin-right:-30px;
  justify-content: center;
  margin-top: 30px;
  width:72%
}

#content-webcm{
  margin-left:-31px;
  margin-right:-30px;
  justify-content: center;
  margin-top: 30px;
  width:82%
}

#title-otherevents{
  width: 118px;
  height: auto;
  justify-content: center;
}

#content-otherevents{
  width: 350px;
  height:auto;
  justify-content: center;
  margin-left:-35px;
  margin-bottom: 100px;
}

 .about img {
   width: 60px;
   height: auto;
   justify-content: center;
 }

 .guest img{
   width: 400px;
   height: auto;
   justify-content: center;
 }

 .title img{
   width: 80px;
   height: auto;
   justify-content: center;
 }
h1{
  font-weight:bold;
  font-size:1.5rem;
  color:#ffffff;
  text-align: center;
  position:relative;
  bottom:-62vw;
}
 .content img{
   margin-left:-23px;
   margin-right:0px;
   justify-content: center;
   margin-top: 44px;
   width:133vw;
 }
 .content1 img{
  margin-left:11px;
  margin-right:12px;
  justify-content: center;
  margin-top: 44px;
  width:24vw;
}
 .line img{
   width: 333px;
   height: auto;
   justify-content: center;
   margin: 25px 0 45px;
 }
 header {
  padding:10px;
  background: #ffffff00;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #ffffff;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #106A8F;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 298px;/*最大幅（お好みで調整を）*/
  height: 100%;
  background: #106A8F;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}
.moji10{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  color:#ffffff;
  line-height:19vw;
}
.header10{
    font-weight:bold;
    color:#090446;
    line-height:18vw;
}
/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.header-logo-menu{
 text-align: center;
 display: flex;
 display: -moz-flex;
 display: -o-flex;
 display: -webkit-flex;
 display: -ms-flex;
 flex-direction: row;
 -moz-flex-direction: row;
 -o-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
}

/*ロゴやサイトタイトルをセンタリング*/
.logo-area{
    margin-left:37vw;
    
  }