@charset "utf-8";

html {
  height: 100%;
}

body {
  -webkit-text-size-adjust: 100%;
  height: 100%;
  color: #fff;
  font-family: "Noto Sans Japanese", sans-serif;
}

@media all and (-ms-high-contrast:none) {
  body {
    font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
}

#pagepiling {
  height: 100%;
}

/* -------------------------------------------------------------------
   header
------------------------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  z-index: 999;
}

header h1 {
  position: relative;
  font-size: 1.6rem;
  line-height: 50px;
  text-align: center;
  z-index: 90;
  margin: 0 auto;
}

header h1 img {
  max-width: 92%;
}

/* -------------------------------------------------------------------
   Menu
------------------------------------------------------------------- */
#menu {
  width: 95%;
  margin: 15px auto 0;
  padding: 0;
  text-align: center;
  z-index: 70;
}

#menu li {
  display: block;
  background: #fff;
  border-bottom: 1px solid #abb2ff;
  margin: 0 5px;
  font-size: 1.4rem;
}

#menu li:nth-last-child(2) {
  border-bottom: 0;
}

#menu li:last-child {
  position: relative;
  margin-top: 30px;
  background: #00b900;
  border: 1px solid #00b900;
  font-size: 1.8rem;
}

#menu li:last-child .fa-line {
  margin-right: 5px;
}

#menu li:last-child span {
  font-size: 1.4rem;
}

#menu li.active {
  background: #2A4194;
}

#menu li:hover {
  background: #2A4194;
}

#menu li a {
  position: relative;
  display: block;
  padding: 12px 18px;
  color: #2A4194;
  text-decoration: none;
}

#menu li.active a,
#menu li:hover a {
  color: #fff;
}

#menu li:last-child a {
  color: #fff;
}

#menu li:last-child a:hover {
  color: #00b900;
  background: #fff;
}

#file {
  position: absolute;
  bottom: 0;
  margin: 9px 10%;
  text-align: center;
  border: 1px solid #fff;
  padding: 5px 10px;
  width: 80%;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.3);
}

#file a {
  color: #fff;
  text-decoration: none;
}
.fixed {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 99;
}
.fixed p {
  margin-bottom: 5px;
}
/* -------------------------------------------------------------------
   #section1,2,3,4,5,6 padding
------------------------------------------------------------------- */
#section1,
#section2,
#section2-1,
#section3,
#section3-1,
#section4,
#section4-1,
#section5,
#section5-1,
#section5-10,
#section6-1,
#section6-2,
#section8,
#section8-1,
#section9-1,
#section10,
#section10-1,
#section11,
#section11-1,
#section16,
#section16-1,
#section17,
#section17-1,
#container {
  padding: 3% 0 5% 220px;
  width: 100%;
}
#section7 {
  padding: 3% 0 0 220px;
}
#section6 {
  padding: 0 0 5% 220px;
}
#section2-1,
#section3-1,
#section4-1,
#section5-1,
#section6-1,
#section6-2,
#section7.section7-1,
#section8-1,
#section9-1,
#section10-1,
#section11-1,
#section16-1,
#section17-1,
#container {
  padding: 0 0 0 220px;
}

.page_head {
  position: relative;
}

.page_head::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 3%;
  left: 0px;
  width: 100%;
  height: 1px;
  background: #fff;
}

.page_head h2 {
  font-size: 3.6rem;
  font-weight: 700;
  color: #fff;
  position: absolute;
  bottom: 5%;
  left: 5%;
  text-shadow: 2px 2px 0 #666, 2px 2px 10px #666;
}

.page_head img {
  max-width: 100%;
}

/* -------------------------------------------------------------------
  #section1,2,3,4,5,6,7,8 > .intro
------------------------------------------------------------------- */
.intro {
  display: block;
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
}

.intro::after {
  /* greater than IE 8 */
  content: "";
  display: block;
  clear: both;
}

/* -------------------------------------------------------------------
  #section1,2,3,4,5,6,7,8 > .intro > article
------------------------------------------------------------------- */
article {
  display: block;
  text-align: left;
  font-size: 1.6rem;
  line-height: 1.75;
  margin: 30px 0 60px;
  color: #333;
}

article h2,
.top_pro h2,
h2.comments-open-header {
  position: relative;
  font-size: 3.4rem;
  padding: 8px 15px 0;
  margin: 10px 0 20px;
  color: #333;
  font-weight: 500;
}

article h2::before,
.top_pro h2::before,
h2.comments-open-header::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 5px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: #5ad7b2;
  background: -moz-linear-gradient(bottom left, #5a9dd7 0%, #5ad7b2 100%);
  background: -webkit-gradient(linear, left bottom, right top, from(#5a9dd7), to(#5ad7b2));
  background: -webkit-linear-gradient(bottom left, #5a9dd7 0%, #5ad7b2 100%);
  background: -o-linear-gradient(bottom left, #5a9dd7 0%, #5ad7b2 100%);
  background: linear-gradient(to top right, #5a9dd7 0%, #5ad7b2 100%);
}

#section2-1 article > h2,
#section4-1 article > h2,
#section8-1 article > h2,
.section7-1 article > h2 {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #2A4194;
  color: #fbc828;
  font-weight: 700;
  font-size: 3.6rem;
  text-align: center;
}

#section2-1 article > h2::before,
#section4-1 article > h2::before,
#section8-1 article > h2::before,
.section7-1 article > h2::before{
  position: absolute;
  top: -7px;
  left: -7px;
  width: 99.6%;
  height: 96%;
  content: '';
  border: 2px solid #fbc828;
  background: transparent;
}
#section7.section7-1 .yt h2 span {
  position: relative;
  background: #f00;
  color: #fff;
  font-size: 16px;
  padding: 5px 10px 5px 40px;
  top: -5px;
  left: -10px;
  margin: 0;
}
.section7-1 .yt h2 span::before {
  font-family: "Font Awesome 5 Brands";
  content: '\f167';
  font-weight: 600;
  position: absolute;
  top: 0px;
  left: 10px;
  font-size: 20px;
}
#section1 article h2::before,
#section6 article h2::before,
#section9 article h2::before {
  content: none;
}

article h3 {
  margin: 30px 0;
  font-size: 2.7rem;
  font-weight: bold;
}

article h4 {
  display: inline-block;
  color: #fff;
  font-weight: bold;
  margin: 5px 0 5px;
  padding: 5px 10px;
  letter-spacing: 1px;
  border-radius: 3px;
  background: #7b9ad4;
  background: -moz-linear-gradient(left, #2580B3 0%, #7b9ad4 100%);
  background: -webkit-gradient(linear, left center, right center, from(#2580B3), to(#7b9ad4));
  background: -webkit-linear-gradient(left, #2580B3 0%, #7b9ad4 100%);
  background: -o-linear-gradient(left, #2580B3 0%, #7b9ad4 100%);
  background: linear-gradient(to right, #2580B3 0%, #7b9ad4 100%);
}

/* -------------------------------------------------------------------
  p.to_sub / p.to_home
------------------------------------------------------------------- */
p.to_sub {
  margin: 30px 0 20px !important;
  font-size: 16px;
}

p.to_home {
  margin: 0 !important;
  padding: 50px 0 70px !important;
  font-size: 16px;
}

/* -------------------------------------------------------------------
  a.to_other / :hover effect
------------------------------------------------------------------- */
a.to_other {
  position: relative;
  display: inline-block;
  padding: 0.62em 1em;
  border: 2px solid rgba(66, 66, 66, 0.6);
  color: rgba(66, 66, 66, 0.6);
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  outline: none;
  transition: all .9s;
}

a.to_other::before,
a.to_other::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 0;
  height: 0;
  border: 2px solid transparent;
  z-index: 2;
}

a.to_other:hover {
  color: #04c;
}

a.to_other:hover::before,
a.to_other:hover::after {
  width: 100%;
  height: 100%;
}

a.to_other:hover::before {
  border-top-color: #04c;
  border-right-color: #04c;
  transition: width .3s, height .3s .3s;
}

a.to_other:hover::after {
  border-bottom-color: #04c;
  border-left-color: #04c;
  transition: height .3s, width .3s .3s;
}

/* -- .to_other + .yellow ---------------------- */
a.to_other.yellow {
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}

a.to_other.yellow:hover {
  color: #fd0;
}

a.to_other.yellow:hover::before {
  border-top-color: #fd0;
  border-right-color: #fd0;
}

a.to_other.yellow:hover::after {
  border-bottom-color: #fd0;
  border-left-color: #fd0;
}

/* -------------------------------------------------------------------
  ruby
------------------------------------------------------------------- */
rt {
  position: relative;
  top: 4px;
  left: -1px;
  font-size: 50%;
  letter-spacing: -3px;
}

/*ページトップボタン*/
#page-top {
  position: fixed;
  right: 20px;
  bottom: 60px;
  width: 140px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #fff;
  border: 2px solid #666;
}

#page-top a {
  display: block;
  text-decoration: none;
  color: #666;
  font-size: 12px;
}