@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&family=Noto+Sans+JP:wght@100&display=swap");
/* CSS Document */
/*============================
body style
============================*/
body {
  position: relative;
  margin: 0 auto;
  padding-top: 50px;
  height: 5000px;
  background: #333333;
  transition: 1s;
  font-family: 'Montserrat','Noto Sans JP',semplicitapro, sans-serif;
  font-weight: 200px; }

/*-----LOADING-------*/
.loading {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #333333; }

.loading.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms; }
  .loading.hide .circle {
    display: none; }

.loading .circle {
  display: block;
  position: relative;
  top: calc( 50% - 20px );
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 8px solid #e0e0e0;
  border-top: 7px solid #ffcccc;
  border-radius: 50px;
  animation: loading 700ms linear 0ms infinite normal both; }

@keyframes loading {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
/*---------/LOADING------------*/
h1 {
  font-family: 'Montserrat','Noto Sans JP',semplicitapro, sans-serif;
  font-weight: 100;
  color: #ffffff; }

h2 {
  font-family: 'Montserrat','Noto Sans JP',semplicitapro, sans-serif;
  font-weight: 100;
  color: #ffffff;
  font-size: 45px;
  padding: 20px 5px;
  text-align: left; }

p {
  font-weight: 200;
  color: #ffffff;
  padding: 0 5px; }

main {
  margin-top: 60px; }

img {
  max-width: 100%; }

.innerbox {
  width: 100%;
  max-width: 800px;
  margin: 0 auto; }

.flex-box-2 {
  display: flex;
  justify-content: space-between;
  padding-top: 100px;
  margin-top: -100px; }

.flex-box-2 div:first-child {
  flex-basis: 70%; }

.box-mar {
  margin-bottom: 100px; }

@media (max-width: 768px) {
  .innerbox {
    width: 100%;
    padding: 0 5%; }

  .flex-box-2 {
    display: block; }

  .flex-box-2 div:first-child {
    flex-basis: 70%; } }
/*============================
グロナビ
============================*/
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: #000000;
  z-index: 99; }

.header_inner {
  position: relative;
  padding: 15px; }

.logo {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 15px; }

.title {
  font-size: 2rem;
  font-weight: 400; }

/* header固定のため余白をつける。メニューのCSSには関係ない
.main{  
  margin-top: 60px;
} */
@media only screen and (max-width: 768px) {
  .nav {
    position: fixed;
    right: -320px;
    /* 右から出てくる */
    top: 0;
    width: 300px;
    /* スマホに収まるサイズ */
    height: 100vh;
    padding-top: 60px;
    background-color: #000;
    color: #fff;
    transition: all .6s;
    z-index: 200;
    overflow-y: auto;
    /* メニューが多くなったらスクロールできるように */ }

  .hamburger {
    position: absolute;
    right: 15px;
    top: 8px;
    width: 40px;
    /* クリックしやすい幅 */
    height: 40px;
    /* クリックしやすい高さ */
    cursor: pointer;
    z-index: 300; }

  .nav_list {
    margin: 0;
    padding: 0;
    list-style: none; }

  .nav_item {
    text-align: center;
    padding: 0 14px; }

  .nav_item a {
    display: block;
    padding: 9px 0 3px;
    border-bottom: 1px solid #eee;
    text-decoration: none; }

  .nav_item a:hover {
    background-color: #eee; }

  .hamburger_border {
    position: absolute;
    left: 11px;
    width: 18px;
    height: 2px;
    background-color: #ffffff;
    transition: all .6s;
    border-radius: 2px; }

  .hamburger_border_top {
    top: 14px; }

  .hamburger_border_center {
    top: 20px; }

  .hamburger_border_bottom {
    top: 26px; }

  .black_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer; }

  /* 表示された時用のCSS */
  .nav-open .nav {
    right: 0; }

  .nav-open .black_bg {
    opacity: .8;
    visibility: visible; }

  .nav-open .hamburger_border_top {
    transform: rotate(45deg);
    top: 20px; }

  .nav-open .hamburger_border_center {
    width: 0;
    left: 50%; }

  .nav-open .hamburger_border_bottom {
    transform: rotate(-45deg);
    top: 20px; } }
/* sp */
@media only screen and (min-width: 769px) {
  .header_inner {
    max-width: 980px;
    width: 100%;
    padding: 15px 30px;
    margin-left: auto;
    margin-right: auto; }

  .logo {
    padding: 12px 30px; }

  .nav_list {
    text-align: right; }

  .nav_list li {
    display: inline-block;
    text-align: right;
    padding-left: 20px; }

  .nav_list li a {
    color: #fff;
    font-weight: 400; } }
/* pc */
a {
  display: block;
  transition: 0.5s; }

a:hover {
  transform: translateY(-5px);
  transition: 0.5s; }

.turn {
  width: 90%;
  margin: 200px auto;
  border: solid 1px;
  padding: 30px; }
  .turn #_turn {
    width: 952px;
    height: 674px;
    margin: 0 auto; }
  .turn ul {
    text-align: center;
    list-style: none;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 0;
    margin-bottom: 30px; }
    .turn ul li {
      width: 50%;
      float: left;
      color: #fff;
      font-size: 14px;
      font-weight: bold; }
    .turn ul::after {
      content: "";
      display: block;
      clear: both; }
  .turn #prevpage, .turn #nextpage {
    cursor: pointer; }

#topics_list ul {
  display: flex;
  justify-content: center; }
  #topics_list ul li {
    width: 24%;
    max-width: 250px; }

.sec-topics {
  color: #fff;
  line-height: 2;
  background-color: #000;
  padding: 50px 0; }
  .sec-topics h3 {
    font-size: 16px;
    font-weight: bold; }
  .sec-topics h4 {
    color: #747474;
    background-color: #fff;
    display: inline;
    padding: 0 3px;
    font-size: 12px;
    font-weight: bold; }
  .sec-topics p {
    padding-right: 30px; }
  .sec-topics .txt-small a {
    text-decoration: underline;
    padding: 0 5px; }
  .sec-topics img {
    max-width: 150px !important; }

.topic-box {
  display: flex;
  justify-content: center; }
  .topic-box .topic-text {
    width: 40%; }
  .topic-box .topic-img img {
    width: 150px !important;
    height: 150px !important;
    margin: 10px; }