@charset "UTF-8";
* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
html {-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,th,td,img{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
table {border-collapse:collapse;border-spacing:0;}
ol,ul {list-style:none;}
li {display: inline-block;*display: inline;*zoom: 1;}
img{max-width: 100%;}
a {color:#008000;text-decoration:none;-webkit-touch-callout:none;outline:none;}
a:link{color:#008000;}
a:visited{color:#008000;}
a:hover{color:#FFB800;}
a:focus{outline:0}
a:hover,a.selected,a:link{text-decoration:none;}
a,img{vertical-align:top; border-style:none;//IE8}
.clrfx:before,.clrfx:after {content: " ";display: table;clear: both;}
.clrfx {*zoom: 1;}
.fl {float: left;}
.fr {float: right;}
.vh{visibility: hidden;}
.tal{text-align: left;}
.tac{text-align: center;}
.ml_05 {margin-left: -0.5em;}
.hoverOp:hover{filter: alpha(opacity=60);opacity: 0.6;}
.forPc{display:block;}
.forSp{display:none;}

/* Common
 * --------------------------------------------------------*/
body {
  background: #D2FFD2;
  letter-spacing: 0.05em;
  font:normal 16px/32px "秀英丸ゴシック B", "Shuei MaruGo B", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.wrap {
  width: 800px;
  margin: 20px auto;
  background: #FFF;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow:0px 0px 8px 2px #868686;
  -moz-box-shadow:0px 0px 8px 2px #868686;
  -webkit-box-shadow:0px 0px 8px 2px #868686;
  padding: 20px 30px;
}
/* header */
header {
  position: relative;
  margin-top: -15px;
  margin-bottom: 34px;
}
header h1 {
}

#yodogawa {
  width: 720px;
  margin: 0 auto;
}
#yodogawa .fl {
  padding-left: 70px;
}

#yodogawa .prof02{
  padding-bottom: 20px;
}
      /* profile */
      .prof_pc{display: block;}
      .prof_sp{display: none;}
      .prof_pc_box{display: none;}
      #profile{
        margin: 0 auto;
        width: 550px;
        padding: 30px 0;
      }
      #profile h3,
      #profile p {
        padding:0 30px;
        text-align: left;
      }
      #profile h3 {
        font-size: 110%;
        padding-bottom: 15px;
      }
      #profile .btn_close {
        display: none;
      }


#youtubeArea {
  background: #008000;
  box-shadow:0px 0px 8px 2px #868686;
  -moz-box-shadow:0px 0px 8px 2px #868686;
  -webkit-box-shadow:0px 0px 8px 2px #868686;
  margin: 30px auto 20px auto;
  color:#FFF;
  border-radius: 20px;
  padding-top: 20px;
}
.update {
  font-size: 13px;
}
#info {
  font-size: 14px;
  padding-bottom: 12px;
}

#info p {
  padding-top: 15px;
  padding-left: 15px;
}
#youtubeArea a {color:#FFB800;}
#youtubeArea a:link{color:#FFB800;}
#youtubeArea a:visited{color:#FFB800;}

#youtubeArea .movie {
  text-align: center;
  margin: 20px 0;
}
#youtubeArea .txt {
  padding: 10px 25px 40px 40px;
}
#youtubeArea .txt span {
  font-size: 13px;
}
.update {
  font-size: 13px;
  padding-top: 20px;
  padding-bottom: 20px;
}
#flipPage{
  text-align: center;
}
#flipPage li.btn_top{
	padding: 0 86px;
}
#flipPage li a:hover{
	filter: alpha(opacity=60);
	opacity: 0.6;
}
/* footer */
footer {
  padding: 30px 0;
  width: 800px;
  margin: 0 auto;
  text-align: center;
}
footer ul {
  padding-top: 10px;
  padding-bottom: 36px;
}
footer li {
  padding: 0 32px;
}

footer li.ft_home {
  padding-left: 170px;
}


/* sp
 * --------------------------------------------------------------------------- */
@media only screen and (max-width: 479px) {
  body {width: 95%;margin: 0 auto;}
  img{max-width:100%;height:auto;}
  .fl,.fr {float: none;}
  .forPc{display:none;}
  .forSp{display:block;}
  .hoverOp:hover{filter: alpha(opacity=100);opacity: 100;}
  .wrap{width: 100%;
    border-radius: 10px;
    box-shadow:0px 0px 8px 2px #868686;
    -moz-box-shadow:0px 0px 8px 2px #868686;
    -webkit-box-shadow:0px 0px 8px 2px #868686;
    padding: 0;
  }
  .mainArea {width: 95%;margin: 0 auto;}


  header {
    margin-top: 0;
    margin-bottom: 34px;
    padding-top: 15px;
  }
  #yodogawa {width: 95%;margin: 0 auto;}
  #yodogawa .fl {
    padding-left: 0;
  }
  #yodogawa .profileArea {
    text-align: center;
    padding-top: 10px;
  }
  #yodogawa .prof02{
    padding-bottom: 5px;
  }

        /* [sp] profile */
        .prof_pc{display: none;}
        .prof_sp{display: block;}
        .prof_pc_box{display: block;}
        #profile{
          width: 100%;
          padding: 20px 0 30px 0;
          display: none;
        }
        #profile h3,
        #profile p {
          font-size: 14px;
          line-height: 24px;
          text-align: left;
          padding-left: 25px;
        }
        #profile h3 {
          font-size: 110%;
          padding-bottom: 10px;
        }
        #profile .btn_close {
          padding-top: 10px;
          font-size: 14px;
          display: block;
        }
  #youtubeArea {
    margin: 30px auto 30px auto;
    padding-top: 10px;

  }
  #youtubeArea .movie {
    margin: 10px auto 20px auto;
    width: 95%;
    position: relative;
    height: 0;
    padding: 30px 0 56.25%;
    overflow: hidden;
    }

  #youtubeArea .movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }

  #youtubeArea .txt {
    padding: 0 15px 20px 15px;
  }

  #info p {
    width: 92%;
    margin: 0 auto;
    display: table;
    padding: 10px 0 15px 0;
  }

  /* [sp] flipPage */
  #flipPage{
    text-align: center;
  }
  #flipPage{
    margin: 0 auto;
    width: 100%;
  }
  #flipPage li {
    display: inline-table;
    width: 18%;
    vertical-align: middle;
  }
  #flipPage li.btn_top{
    padding: 0;
    width: 30%;
    padding: 0 10px
  }
  #flipPage li img {
    padding: 0;
  }
  /* [sp] footer */
  footer {
    width: 100%;
  }
  footer li{
    display: inline-block;
    padding: 0;
  }
  footer li{
    width: 20%;
  }
  footer li.ft_home {
    padding-left: 0;
  }

}