/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700');
@import url('https://fonts.googleapis.com/css?family=Oswald:300,600');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

/* 共通CSS */
body {
  background-color: #CDE1FF;
  background-image: url(background3.png);
  /* background-color: #dedede; */
  /* background-size: cover; */
  background-attachment: fixed;
  font-family: 'Noto Sans JP', sans-serif;
  padding: 5px 0px 0px 0px;
  margin: 0;
  color: #333;
}

h1 a {
  text-decoration: none;
  color: #20557C;
}

.material-icons{
  color: #166CAC;
}

.torikeshi{
  text-decoration: line-through;
}

/* テキストの文字色アニメーション */
article p a{
  animation: text-color-anime-1 1.5s ease-in infinite alternate;
}
@keyframes text-color-anime-1{
    100% { color: white;}
}

/* スクロールアニメーション */
.scroll-anime{
  opacity: 0;
  transition: all 1s ease;
  transform: translate(100px, 0);
}

.scroll-anime.show {
  opacity: 1;
  transform: none;
}

/* パソコン向け表示 */
@media screen and ( min-width:641px )
{
  body {
    font-size: 16px;
  }
  
  header {
    position: fixed;
    top: -8px;
    left:0;
    /* background-color: white; */
    background-image: url(header2.png);
    filter: drop-shadow(0px 0px 3px rgba(100,100,100,0.8));
    width: 100%;
    height: 128px;
    padding: 0px 0px 0px 16px;
  }

  .container {
    display: -webkit-flex;
    display: flex;
  }

  nav {
    width: 231px;
    color: #ffffff;
    padding: 170px 0px 0px 0px;
    flex-shrink: 0;
  }

  article {
    width: 950px;
    order: 2;
    background-color: rgba(255,255,255,0.8);
    box-shadow: 0px -3px 4px 4px rgba(120,120,120,0.6);
    padding: 100px 0px 100px 0px;
  }

  h1 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: #20557C;
    font-weight: bolder;
    margin: 0px;
    padding: 20px 12px 12px 12px;
  }
  
  h2 {
    background-color: rgba(205,205,205,0.4);
    font-size: 28px;
    color: #1f1f1f;
    margin: 16px 0px;
    padding: 4px 14px;
  }
  
  p {
    margin: 30px;
    line-height: 1.8em;
  }

  p.media_bar {
    background-color: rgba(220,220,220,0.5);
    text-align: right;
    margin: 0px;
    padding: 10px;
  }

  ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
  }

  li{
    background-color: rgba(255,255,255,0.6);
    font-size: 16px;
    padding: 8px 8px;
    margin: 0px;
    border-left: solid 10px #166CAC;
    border-bottom: solid 1px #FFFFFF;
    color: #303030;
    transition: 1s all ease 0s;
  }
    
  li:hover{
    background-color: rgba(34,144,255,1.0);
    font-size: 16px;
    margin: 0px;
    border-left: solid 10px #003080;
    border-bottom: solid 1px #FFFFFF;
  }
    
  li a{
    text-decoration: none;
    display: block;
    color: #404040;
    transition: 1s all ease 0s;
  }
    
  li a:hover{
    color: #FFFFFF;
  }

    
  li.home{
    background-color: rgba(255,255,255,0.9);
    font-size: 16px;
    margin: 0px;
    border-left: solid 10px #0050A0;
    border-bottom: none;
    transition: 1s all ease 0s;
  }
    
  li.home:hover{
    background-color: rgba(34,144,255,1.0);
    font-size: 16px;
    margin: 0px;
    border-left: solid 10px #003080;
    border-bottom: none;
  }
    
  ul.second-li{
    border-left: 0px;
    display: none;
  }
    
  ul.second-li li{
    background:none;
    font-size: 14px;
    border-left: solid 0px #166CAC;
    border-bottom: solid 0px;
  }
    
  li.nav-tab:hover ul.second-li{
    font-size: 14px;
    border-left: 0px;
    display: block;
  }
    
  dl{
    margin: 24px;
    line-height: 1.8em;
  }

  dt{
    border-left: solid 8px #555555;
    padding-left: 6px;
  }
    
  .article-nav{
    text-align: center;
  }
     
  div.hensei-door {
    display: -webkit-flex;
    display: flex;
    height: 240px;
    color: #000000;
  }
    
  div.hensei-door p {
    font-size: 20px;
    color: #343434;
  }
    
  span.hensei-door {
    font-size: 42px;
    font-weight: bold;
    letter-spacing: 0.2em;
  }
  
  span.hensei-door2 {
    font-family: 'Oswald', 'Noto Sans JP', sans-serif;
    font-size: 24px;
    letter-spacing: 0.1em;
  }
  
  .containerbox{
    background-color: rgba(235,245,255,0.7);
    font-size:0;
    display: inline-block;
    width: 100%;
    height: 64px;
    padding: 0px;
  }
  
  .yamanote{
    background-color: rgba(255,255,255,0.5);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 8px #99cc00;
    border-left: solid 1px #dfdfdf;
    border-right: solid 1px #dfdfdf;
    border-bottom: solid 2px #cfcfcf;
    margin: 0px;
  }

  .chuo{
    background-color: rgba(255,255,255,0.5);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 8px #f15a22;
    border-right: solid 1px #dfdfdf;
    border-bottom: solid 2px #cfcfcf;
    margin: 0px;
  }

  .soubu{
    background-color: rgba(255,255,255,0.5);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 8px #ffd400;
    border-right: solid 1px #dfdfdf;
    border-bottom: solid 2px #cfcfcf;
    margin: 0px;
  }

  .keihin{
    background-color: rgba(255,255,255,0.5);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 8px #00bae8;
    border-right: solid 1px #dfdfdf;
    border-bottom: solid 2px #cfcfcf;
    margin: 0px;
  }

  .keiyo{
    background-color: rgba(255,255,255,0.5);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 8px #c9252f;
    border-right: solid 1px #dfdfdf;
    border-bottom: solid 2px #cfcfcf;
    margin: 0px;
  }
  
  .saikyo{
    background-color: rgba(255,255,255,0.5);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 8px #00ac9a;
    border-right: solid 1px #dfdfdf;
    border-bottom: solid 2px #cfcfcf;
    margin: 0px;
  }
  
  .musashino{
    background-color: rgba(255,255,255,0.5);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 8px #ff4500;
    border-right: solid 1px #dfdfdf;
    border-bottom: solid 2px #cfcfcf;
    margin: 0px;
  }
  
  .nambu{
    background-color: rgba(255,255,255,0.5);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 8px #ffd400;
    border-right: solid 1px #dfdfdf;
    border-bottom: solid 2px #cfcfcf;
    margin: 0px;
  }

  .yamanote:hover{
    background-color: rgba(255,255,255,1.0);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 12px #99cc00;
    border-left: solid 1px #efefef;
    border-right: solid 1px #efefef;
    margin: 0px;
  }

  .chuo:hover{
    background-color: rgba(255,255,255,1.0);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 12px #f15a22;
    border-right: solid 1px #efefef;
    margin: 0px;
  }

  .soubu:hover{
    background-color: rgba(255,255,255,1.0);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 12px #ffd400;
    border-right: solid 1px #efefef;
    margin: 0px;
  }

  .keihin:hover{
    background-color: rgba(255,255,255,1.0);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 12px #00bae8;
    border-right: solid 1px #efefef;
    margin: 0px;
  }

  .keiyo:hover{
    background-color: rgba(255,255,255,1.0);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 12px #c9252f;
    border-right: solid 1px #efefef;
    margin: 0px;
  }

  .saikyo:hover{
    background-color: rgba(255,255,255,1.0);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 12px #00ac9a;
    border-right: solid 1px #efefef;
    margin: 0px;
  }
  
  .musashino:hover{
    background-color: rgba(255,255,255,1.0);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 12px #ff4500;
    border-right: solid 1px #efefef;
    margin: 0px;
  }
  
  .nambu:hover{
    background-color: rgba(255,255,255,1.0);
    display: inline-block;
    font-size:16px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 64px;
    color: #444444;
    height: 60px;
    width: 92px;
    border-top: solid 12px #ffd400;
    border-right: solid 1px #efefef;
    margin: 0px;
  }
  
  .img {
    margin: 10px;
  }
  
  .top-img {
    margin: 0px 0px 8px 0px;
  }
    
  i.material-icons{
    padding-right: 24px;
  }
  
  footer {
    width: 100%;
    background-color: #efefef;
    border-top: solid 3px #ababab;
  }
  
  footer div.container {
    width: 950px;
    padding: 0px 0px 0px 250px;
    flex-wrap:wrap;
  }
  
  footer div.footerul {
    width: 25%;
    padding: 20px 0px;
  }
    
  div.footerul h2 a{
    text-decoration: none;
    color: #444;
  }
    
  div.footerul h2 a:hover{
    color: #166CAC;
  }
   
  div.footerul li:hover{
    background: none;
    border: 0px;
  }
    
  div.footerul li a{
    text-decoration: none;
    color: #404040;
  }
    
  div.footerul li a:hover{
    color: #166CAC;
  }
    
  ul.footerul li{
    font-size: 14px;
  }
  
  footer h2 {
    background: none;
    font-size: 20px;
    padding: 0px;
  }
  
  footer ul {
    line-height: 2.0em;
  }
  
  footer li {
    background: none;
    font-size: 16px;
    padding: 2px;
    border: solid 0px;
  }
  
  footer p {
    width: 100%;
    font-size: 16px;
  }
    
  #nav-drawer {
    display: none;    
  }
  
  /* 撮影地ガイド関連　ここから */
     article.guide{
        background-color: #FFFFFF;
     }
     h1.guide{
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,45484d+100 */
        background: rgb(0,0,0); /* Old browsers */
        background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%, rgba(69,72,77,1) 100%); /* FF3.6-15 */
        background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%,rgba(69,72,77,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: radial-gradient(ellipse at center,  rgba(0,0,0,1) 0%,rgba(69,72,77,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#45484d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        border-style: solid;
        border-width: 0px 0px 0px 16px;
        border-color: gray gray gray #00bae8;
        box-shadow: none;
        border-radius: 0px;
        font-family:  'Noto Sans Japanese',"游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
        font-size: 28px;
        font-weight: 200;
        letter-spacing: 0.3em;
        color: white;
        padding: 0px 0px 0px 16px;
        margin: 30px 20px 10px 20px;
        height: 40px;
     }
     h2.guide{
        background: none;
        margin: 10px 20px;
        padding:0px;
        font-size:20px;
        letter-spacing: 0.1em;
        border-left:0px;
        border-bottom:#BFBFBF dotted 1px;
     }
     h2.guide:first-letter{
        font-size:30px;
        color:#325A8C;
     }
     h3.guide{
        margin: 16px 20px;
        padding: 16px;
        font-size:20px;
        color: #fff;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.75);
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2c539e+0,2c539e+100;Blue+3D+%232 */
        background: rgb(44,83,158); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
        border:1px solid #325A8C;
        box-shadow:inset 1px 1px 0 rgba(255,255,255,0.25);
        letter-spacing: 0.1em;
     }
     h3.guide a{
        color: #fff;
        text-decoration: none;
     }
     img.top-img-guide {
        margin: 10px 0px;
        padding-left: 20px;
     }
    
     main.guide {
      display: flex;
      flex-wrap: wrap;
      margin: 0px 20px 20px 20px;
     }
     div.guide {
      width: 186px;
      margin: 10px;
      background-color: rgba(240, 240,240, 0.5);
      border-left: solid 4px #c0c0c0;
      border-right: solid 4px #c0c0c0;
      border-top: 0px;
      border-bottom: 0px;
      box-shadow: 0px 0px 16px -8px #808080;
      overflow: hidden;
     }
    
     div.guide:hover{
      background-color: rgba(200, 200,200, 0.5);
     }
    
     div.guide a{
      text-decoration: none;
      color: #444444;
     }

     div.guide h4{
      font-size: 14px;
      margin: 4px 0px;
      text-align: center;
     }
     div.guide img{
      height: 124px;
      width: 186px;
      vertical-align: bottom;
      transition: 0.5s all ease 0s;
     }
    
     div.guide img:hover{
      transform: scale(1.1,1.1) translateY(5px);
     }
    
     table.guide {
      font-size: 14px;
      margin: 18px;
      border-spacing: 8px 8px;
     }
    
     td.guide {
      background-color: #333344;
      color: #ffffff;
     }
    
     .guide-Y1 {
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      background-color: #99cc00;
      color: #ffffff;
      letter-spacing: 0.1em;
      padding: 10px 15px;
     }

     .guide-Y2 {
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      background-color: #aaaaaa;
      color: #ffffff;
      letter-spacing: 0.1em;
      padding: 10px 15px;
     }
    
     .ekidori {
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+5,28343b+100 */
      background: rgb(181,189,200); /* Old browsers */
      background: -moz-linear-gradient(top,  rgba(181,189,200,1) 0%, rgba(130,140,149,1) 5%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 5%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 5%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
      color: #ffffff;
      font-size: 18px;
      letter-spacing: 0.2em;
      padding: 5px 10px;
     }
    
     .ensen {
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#606c88+1,3f4c6b+100;Grey+3D+%232 */
      background: rgb(96,108,136); /* Old browsers */
      background: -moz-linear-gradient(top,  rgba(96,108,136,1) 1%, rgba(63,76,107,1) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  rgba(96,108,136,1) 1%,rgba(63,76,107,1) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  rgba(96,108,136,1) 1%,rgba(63,76,107,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
      color: #ffffff;
      font-size: 18px;
      letter-spacing: 0.2em;
      padding: 5px 21px;
     }
    
     .gozen {
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#87e0fd+0,53cbf1+7,05abe0+100 */
      background: rgb(135,224,253); /* Old browsers */
      background: -moz-linear-gradient(top,  rgba(135,224,253,1) 0%, rgba(83,203,241,1) 7%, rgba(5,171,224,1) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 7%,rgba(5,171,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 7%,rgba(5,171,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
      font-size: 18px;
      letter-spacing: 0.2em;
      padding: 5px 10px;
     }
    
     .gogo {
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e6f0a3+0,d2e638+10,d2e638+16,c3d825+99,dbf043+100 */
      background: rgb(230,240,163); /* Old browsers */
      background: -moz-linear-gradient(top,  rgba(230,240,163,1) 0%, rgba(210,230,56,1) 10%, rgba(210,230,56,1) 16%, rgba(195,216,37,1) 99%, rgba(219,240,67,1) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 10%,rgba(210,230,56,1) 16%,rgba(195,216,37,1) 99%,rgba(219,240,67,1) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 10%,rgba(210,230,56,1) 16%,rgba(195,216,37,1) 99%,rgba(219,240,67,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
      font-size: 18px;
      letter-spacing: 0.2em;
      padding: 5px 10px;
      margin-right: 10px;
     }
  /* 撮影地ガイド関連　ここまで */
}

/* スマホ向け表示 */
@media screen and ( max-width: 640px)
{
  body {
    font-size: 14px;
    margin: 0px;
  }
  
  header {
    /* ハンバーガーリスト対応 */
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left:0;
    background-color: #FFFFFF;
    border-bottom: solid 1px #cdcdcd;
    width: 100%;
    margin: 0px;
  }
    
  header img{
    width: 75%;
  }
    
  .header-phrase {
    display: none;
  }
     
  div.hensei-door {
    display: -webkit-flex;
    display: flex;
    height: 240px;
    color: #000000;
  }
    
  div.hensei-door p {
    text-align: left;
    font-size: 22px;
    color: #343434;
  }
    
  span.hensei-door {
    font-weight: bold;
    letter-spacing: 0.2em;
  }
  
  span.hensei-door2 {
    font-family: 'Oswald', 'Noto Sans JP', sans-serif;
    font-size: 18px;
    letter-spacing: 0.1em;
  }
  
  .container {
    margin: 0px;
    padding: 0px;
  }

  nav {
    display: none;
    width: 100%;
    color: #ffffff;
    background-color: #efefef;
    padding: 0px;
    margin: 0px;
  }

  article {
    width: 100%;
    background-color: rgba(255,255,255,1.0);
    padding: 64px 0px 10px 0px;
    margin: 0px;
  }

  h1 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: #20557C;
    font-weight: bolder;
    margin: 10px 0px;
    padding: 0% 2%;
  }
    
  h2{
    font-size: 16px;
    text-align: center;
    margin: 10px 0px;
    padding: 0px;
    width: 100%;
  }
  
  p {
    font-size: 14px;
    width: 94%;
    box-shadow: 0px 0px 2px 2px rgba(200,200,200,0.6);
    padding: 2%;
    margin: auto;
  }

  p.media_bar {
    background-color: #FFFFFF;
    box-shadow: none;
    text-align: end;
    margin: 0px;
    padding: 2% 2%;
  }

  ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
  }

  li {
    background-color: rgba(255,255,255,0.6);
    font-size: 20px;
    padding: 8px 0px;
    margin: 0px;
    border-bottom: solid 1px #166CAC;
    color: #404040;
  }
    
  dl {
    font-size: 14px;
    width: 92%;
    box-shadow: 0px 0px 2px 2px rgba(200,200,200,0.6);
    padding: 2%;
    margin: auto;
  }

  dt{
    border-left: solid 0.5em #555555;
    padding-left: 0.5em;
  }
  
  .article-nav{
    text-align: center;
  }
    
  div.hensei-door {
    color: #000000;
    text-align: center;
  }
    
  div.hensei-door p {
    font-size: 18px;
    color: #343434;
    box-shadow: none;
  }
    
  span.hensei-door {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.2em;
  }
  
  span.hensei-door2 {
    font-family: 'Oswald', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    letter-spacing: 0.1em;
  }
    
  .containerbox{
    display: -webkit-inline-flex;
    display: inline-flex;
    flex-wrap: wrap;
    background-color: #dedede;
    width: 94%;
  }
  
  .yamanote{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f5f5f5+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #f5f5f5 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#f5f5f5 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #ffffff 0%,#f5f5f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    font-family: YuGothicM,YuGothic,Meiryo,sans-serif;
    font-size:12px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: #121212;
    height: 50px;
    width: 21%;
    border-top: solid 14px #99cc00;
    margin: 2%;
  }
  
  .chuo{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f5f5f5+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #f5f5f5 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#f5f5f5 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #ffffff 0%,#f5f5f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    font-family: YuGothicM,YuGothic,Meiryo,sans-serif;
    font-size:12px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: #121212;
    height: 50px;
    width: 21%;
    border-top: solid 14px #f15a22;
    margin: 2%;
  }
  
  .soubu{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f5f5f5+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #f5f5f5 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#f5f5f5 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #ffffff 0%,#f5f5f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    font-family: YuGothicM,YuGothic,Meiryo,sans-serif;
    font-size:12px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: #121212;
    height: 50px;
    width: 21%;
    border-top: solid 14px #ffd400;
    margin: 2%;
  }

  .keihin{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f5f5f5+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #f5f5f5 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#f5f5f5 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #ffffff 0%,#f5f5f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    font-family: YuGothicM,YuGothic,Meiryo,sans-serif;
    font-size:12px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: #121212;
    height: 50px;
    width: 21%;
    border-top: solid 14px #00bae8;
    margin: 2%;
  }
  
  .keiyo{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f5f5f5+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #f5f5f5 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#f5f5f5 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #ffffff 0%,#f5f5f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    font-family: YuGothicM,YuGothic,Meiryo,sans-serif;
    font-size:12px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: #121212;
    height: 50px;
    width: 21%;
    border-top: solid 14px #c9252f;
    margin: 2%;
  }
  
  .saikyo{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f5f5f5+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #f5f5f5 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#f5f5f5 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #ffffff 0%,#f5f5f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    font-family: YuGothicM,YuGothic,Meiryo,sans-serif;
    font-size:12px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: #121212;
    height: 50px;
    width: 21%;
    border-top: solid 14px #00ac9a;
    margin: 2%;
  }

  .musashino{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f5f5f5+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #f5f5f5 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#f5f5f5 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #ffffff 0%,#f5f5f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    font-family: YuGothicM,YuGothic,Meiryo,sans-serif;
    font-size:12px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: #121212;
    height: 50px;
    width: 21%;
    border-top: solid 14px #ff4500;
    margin: 2%;
  }
  
  .nambu{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f5f5f5+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #f5f5f5 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#f5f5f5 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #ffffff 0%,#f5f5f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    font-family: YuGothicM,YuGothic,Meiryo,sans-serif;
    font-size:12px;
    font-weight: 100;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: #121212;
    height: 50px;
    width: 21%;
    border-top: solid 14px #ffd600;
    margin: 2%;
  }
  
  img.img {
    width: 100%;
    text-align: center;
  }
    
  img.top-img {
    max-width: 100%;
    height:auto;
    text-align: center;
  }
  
  i.material-icons{
    display:none;
  }
    
  footer {
    background-color: #DFDFDF;    
  }
  
  footer li {
    background: none;
    font-family: YuGothicM,YuGothic,Meiryo,sans-serif;
    font-size: 14px;
    padding: 4px 10px;
    border-bottom: solid 1px #FFFFFF;
  }
    
  footer h2 {
    background-color: #EFEFEF;
    text-align: left;
    font-family: YuGothicM,YuGothic,Meiryo,sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin: 0px;
    padding: 10px 0px 10px 5px;
    box-sizing: border-box;
  }
    
  footer p {
    box-shadow: 0px 0px 0px 0px;  
  }
  
  /* ハンバーガーリスト関連　ここから */
     #nav-drawer {
      position: relative;
      padding: 5px;
      background-color: #efefef;
    }

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

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

    /*ハンバーガーアイコンをCSSだけで表現*/
    #nav-open span, #nav-open span:before, #nav-open span:after {
      position: absolute;
      height: 3px;/*線の太さ*/
      width: 25px;/*長さ*/
      border-radius: 3px;
      background: #555;
      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: black;
      opacity: 0;
      transition: .3s ease-in-out;
    }

    /*中身*/
    #nav-content {
      overflow: auto;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;/*最前面に*/
      width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
      max-width: 330px;/*最大幅（調整してください）*/
      height: 100%;
      background: #fff;/*背景色*/
      transition: .3s ease-in-out;/*滑らかに表示*/
      -webkit-transform: translateX(-105%);
      transform: translateX(-105%);/*左に隠しておく*/
    }
    
    #nav-content img {
      height: 64px;
      width: 140px;
    }

    /*チェックが入ったらもろもろ表示*/
    #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);
    }
    
    .nav-ul {
      background-color: #dedede;
    }
    
    .nav-ul li {
      font-size: 14px;
      padding-left: 15px;
      border-bottom: solid 1px #ffffff;
    }
    
    .nav-ul li a {
      text-decoration: none;
      color: #444444;
    }
  /* ハンバーガーリスト　ここまで */
    
    
  /* 撮影地ガイド関連　ここから */
     article.guide{
        background-color: #FFFFFF;
     }
     h1.guide{
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,45484d+100 */
        background: rgb(0,0,0); /* Old browsers */
        background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%, rgba(69,72,77,1) 100%); /* FF3.6-15 */
        background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%,rgba(69,72,77,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: radial-gradient(ellipse at center,  rgba(0,0,0,1) 0%,rgba(69,72,77,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#45484d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        border-style: solid;
        border-width: 0px 0px 0px 10px;
        border-color: gray gray gray #00bae8;
        box-shadow: none;
        border-radius: 0px;
        font-family:  'Noto Sans Japanese',"游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
        font-size: 18px;
        font-weight: 200;
        letter-spacing: 0.3em;
        color: white;
        padding: 0px 0px 0px 10px;
        margin: 15px 0px 0px 0px;
     }
     h2.guide{
        background: none;
        margin: 10px 20px;
        padding:0px;
        font-size:20px;
        letter-spacing: 0.1em;
        border-left:0px;
        border-bottom:#BFBFBF dotted 1px;
     }
     h2.guide:first-letter{
        font-size:30px;
        color:#325A8C;
     }
     h3.guide{
        margin: 16px 20px;
        padding: 16px;
        font-size:20px;
        color: #fff;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.75);
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2c539e+0,2c539e+100;Blue+3D+%232 */
        background: rgb(44,83,158); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
        border:1px solid #325A8C;
        box-shadow:inset 1px 1px 0 rgba(255,255,255,0.25);
        letter-spacing: 0.1em;
     }
     h3.guide a{
        color: #fff;
        text-decoration: none;
     }
     img.top-img-guide {
        margin: 0px 0px;
        padding: 0px;
        max-width: 100%;
     }
    
     main.guide {
      display: flex;
      flex-wrap: wrap;
      margin: 0px 20px 20px 20px;
     }
     div.guide {
      margin: 10px 5px;
      background-color: rgba(220, 220,220, 0.5);
      border-left: solid 4px #c0c0c0;
      border-right: solid 4px #c0c0c0;
      border-top: 0px;
      border-bottom: 0px;
      box-shadow: 0px 0px 16px -8px #808080;
     }
    
     div.guide h4{
      font-size: 14px;
      margin: 4px 0px;
      text-align: center;
     }
     div.guide img{
      vertical-align: bottom;
      max-width: 100%;
     }

  /* 撮影地ガイド関連　ここまで */
    
}