@charset "utf-8";
/*@import url("fontawesome-free/css/fontawesome-all.min.css");*/
@import url("fontawesome-free-6.0.0-web/css/all.min.css");
@import url("framework.css");

/* Rows
--------------------------------------------------------------------------------------------------------------- */

.row0, .row0 a {}

.row1 {
  padding: 40px 0 0 0;  /* イントロの写真 */
}

.row2, .row2 a {}

.row3, .row3 a {}

.row4, .row4 a {}

.row5, .row5 a {}


/* Header
--------------------------------------------------------------------------------------------------------------- */

#header {
  padding: 0 15px;
  border: solid;
  border-width: 0 0 2px 0;
}


/* メニューの下線 */

#header #logo {
  margin: 28px 0 0 0;
}

#header #logo h1 {
  margin: 0;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

/* Box
---------------------------------------------------------------------------------- */
.box_1{
  border:1px dashed #C1C2C4;
  background-color:#F4F4F4;
  margin:0.5em 0;
  padding:5px;
}

.box_2{
    background-color:#f0f0f0;
    border:1px dotted #ccc;
    color:#191919;
    margin:16px 0 0 0;
    padding:5px;
    overflow: auto;
}


/* Page Intro トップ画像上の文字 index.html
--------------------------------------------------------------------------------------------------------------- */

#pageintro {
  padding: 180px 0;
}

#pageintro .heading {
  margin-bottom: 20px;
	font-size: 5rem;
	font-weight: 900;
}

#pageintro p {
  margin: 0 auto;
}

/* サブページのタイトル */

#sub-pageintro {
  line-height: normal;
  padding-top: 200px; /* サブページの写真の上からのスペース */
  padding-bottom: 40px; /* サブページの写真の下からのスペース */
  text-align: center;
}

#sub-pageintro .heading {
  margin-bottom: 40px;  /* サブページ文字の下からの位置 */
  font-size: 5rem;
	font-weight: 900;
}

/* Content Area */

.container {
  padding: 50px 0;
}

.sectiontitle {
  display: block;
  max-width: 80%;
  margin: 0 auto 20px;
  text-align: center;
}


/* タイトル_一番上_上のスペースなし */

.sectiontitle .heading {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.sectiontitle2 {
  display: block;
  max-width: 55%;
  margin: 50px auto 20px;
  text-align: center;
}


/* タイトル_2番目_上のスペース50pt */

.sectiontitle2 .heading {
  margin: 0;
  padding: 0;
  line-height: 1;
}


/* Intro Block Index.html のアイコン付きリンク */

#introblocks .heading {
  margin-bottom: 20px;
  font-size: 1rem;
}

#introblocks ul {
  text-align: center;
}

#introblocks ul li i {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 30px
}


/* 左右２コラム（日付・年号用）
--------------------------------------------------------------------------------------------------------------- */

dl.information dt {
  clear: left;
  float: left;
  width: 11rem;
}

dl.information dd {  /* 2行以上続く場合に行間を狭くしたいとき */
  margin: 0 0 0 11rem;
}

dl.information dd.last {  /* 最後の行に下にスペースを入れる */
  margin: 0 0 0.8rem 11rem;

}

dl.information p {
  margin: 0 0 0.5rem;
}

/* 文献
--------------------------------------------------------------------------------------------------------------- */
.reference ul {
  list-style-type: none;
}

.reference li {
  margin: 0 0 0.7rem -0.7rem;
  text-indent: -2em;
  list-style-type: none;
}

/* Footer
--------------------------------------------------------------------------------------------------------------- */

#footer {
  padding: 30px 0;
}

#footer .heading {
  margin-bottom: 30px;
  font-size: 1.2rem;
}

#footer .latestimg {}

#footer .latestimg>li {
  display: inline-block;
  float: left;
  width: 30%;
  margin: 0 0 5% 5%;
}

#footer .latestimg>li:nth-last-child(-n+3) {
  margin-bottom: 0;
}


/* Removes bottom margin from the last three items - margin is restored in the media queries when items stack */

#footer .latestimg>li:nth-child(3n+1) {
  margin-left: 0;
  clear: left;
}


/* Removes the need to add class="first" */

#footer .latestimg>li img {
  width: 100%;
}


/* Force the image to resize to take the full space - may have to be changed for tablets, depends on personal preference */

#footer .latestimg>li a.imgover {
  display: block;
}

#footer a:link {
  color: #FFFFFF;
}

#footer a:visited {
  color: #FFFFFF;
}

#footer a:hover {
  text-decoration: underline;
}


/* Copyright 最下部コピーライト
--------------------------------------------------------------------------------------------------------------- */

#copyright {
  padding: 10px 0;
}

#copyright * {
  margin: 0;
  padding: 0;
}


/* Transition Fade
This gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devices
If you don't want it to fade all elements, you have to list the ones you want to be faded individually
Delete it completely to stop fading
--------------------------------------------------------------------------------------------------------------- */

#nav * {
  transition: none !important;
}


/* Navigation
--------------------------------------------------------------------------------------------------------------- */

nav ul, nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav {
  line-height: normal;
}


/* nav-links */

.nav-links {
  display: flex;
  margin-left: auto;
}

.nav-links li {
  list-style: none;
  text-align: center;
  display: inline-block;
  margin: 0 15px 0 0;
  padding: 3px 0;  /*3pxの太さに合わせる*/
}

.nav-links li a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.nav-links li a:hover {
  display: inline-block;
  background-color: inherit;
  margin: 0 0 -3px 0;
  font-weight: bold;
  color: #000000;
  text-shadow: 1px 1px 2px #FFFFFF, -1px 1px 2px #FFFFFF, 1px -1px 2px #FFFFFF, -1px -1px 2px #FFFFFF;
}

.nav-links .active {
  display: inline-block;
  background-color: inherit;
  border-bottom: solid;  /*表示しているページに下線*/
  border-width: 3px;  /*3pxの太さにする*/
}


/* menu */

.menu {
  cursor: pointer;
  border: none;
  outline: none;
  display: none;
}

/* ハンバーガー1本目 */
.menu .bar {
  width: 32px;  /* ハンバーガー長さ */
  height: 4px;  /* ハンバーガー太さ */
  background: #ffffff;  /* ハンバーガー色 */
  border-radius: 5px;
  opacity: 1;
  visibility: visible;
  transition: 0.5s ease;
  transform-origin: right;
  position: relative;
  z-index: 30;
}
/* ハンバーガー2本目 */
.menu .bar1 {
  margin-bottom: 7px;
  position: relative;
  z-index: 30;
}
/* ハンバーガー3本目 */
.menu .bar3 {
  margin-top: 7px;
  position: relative;
  z-index: 30;
}
/* 閉じるメニュー */
.menu.toggle .bar1 {
  transform-origin: left;
  transform: rotate(45deg);
  position: relative;
  z-index: 30;
}
/* 閉じるメニューで2本目を隠す */
.menu.toggle .bar2 {
  opacity: 0;
  visibility: hidden;
  position: relative;
  z-index: 30;
}
/* 閉じるメニュー */
.menu.toggle .bar3 {
  transform-origin: left;
  transform: rotate(-45deg);
  position: relative;
  z-index: 30;
}

/* ページ内ナビ 上部固定
--------------------------------------------------------------------------------------------------------------- */

.fix_nav {
  background-color: #2A2D34;  /** row5と同じ色 **/
  text-align: center;
}

.fix_nav li {
  display: inline-block;
  margin: 0 10px;
  padding: 0;
}

.fix_nav a {
  display: block;
  padding: 0.5em 0;
  text-decoration: none;
  color: #C1C2C4;
}

  /** グローバルナビを画面の上の部分にくっつける **/
.fixed ul {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.anchor {
  display: block;
  padding-top: 70px;
  margin-top: -70px;
}


/* Back to Top */

#backtotop {
  z-index: 999;
  display: inline-block;
  position: fixed;
  visibility: hidden;
  bottom: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  text-align: center;
  opacity: .2;
}

#backtotop i {
  display: block;
  width: 100%;
  height: 100%;
  line-height: inherit;
}

#backtotop.visible {
  visibility: visible;
  opacity: .6;
}

#backtotop:hover {
  opacity: 1;
  text-decoration:none; 
}

/* Gallery
--------------------------------------------------------------------------------------------------------------- */

#gallery {
  display: block;
  width: 100%;
  margin-bottom: 50px;
}

#gallery figure figcaption {
  display: block;
  width: 100%;
  clear: both;
}

#gallery li {
  margin-bottom: 30px;
}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */

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

.faico li {
  display: inline-block;
  margin: 8px 5px 0 0;
  padding: 0;
  line-height: normal;
}

.faico li:last-child {
  margin-right: 0;
}

.faico a {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 18px;
  text-align: center;
}

.faico a {
  color: #474747;
  background-color: #DBE5E7;
}

.faico a:hover {
  color: #FFFFFF;
}


/* Colors
--------------------------------------------------------------------------------------------------------------- */

a:active, a:focus {
  background: transparent;
}


/* IE10 + 11 Bugfix - prevents grey background */

.overlay {
  color: #FFFFFF;
  background-color: inherit;
}

/* 写真の濃さの調整 */
.overlay::after {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.2); 
}


/* バナー */
.imgover:hover::before {
  background: rgba(130, 157, 162, .5);  /* #829DA2 */
}

.imgover, .imgover:hover::after {
  color: #FFFFFF;
}


/* Rows rowの色指定*/

.row0, .row0 a {}

.row1, .row1 a {}

.row2 {
  color: #474747;
  background-color: #F4F4F4;
}

.row3 {
  color: #474747;
  background-color: #FFFFFF;
}

.row4 {
  color: #C1C2C4;
  background-color: #4B5156;
}

.row5, .row5 a {
  color: #C1C2C4;
  background-color: #2A2D34;
}


/* Header */

#header {
  border-color: rgba(255, 255, 255, .5);
}


/* メニューの線の色と透明度 */

#header #logo h1 a {
  color: inherit;
}


/* Page Intro index.htmlページの表題文字*/

#pageintro {
  color: #FFFFFF;
  z-index: 50
}


/* Footer */

#footer .heading {
  color: #FFFFFF;
}

#footer hr, #footer .borderedbox, #footer .linklist li, #footer {
  border-color: rgba(255, 255, 255, .5);
}

#backtotop {
  color: #FFFFFF;
  background-color: #829DA2;
}

/* YouTube
--------------------------------------------------------------------------------------------------------------- */
.video-container {
  position:relative;
  width: 100%;
  max-width: 560px;
  margin: 0px auto;
}

.video-container::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
}

.video-container iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1140px) {
  .hoc {
    max-width: 1140px;
  }
}

@media screen and (min-width:978px) and (max-width:1140px) {
  .hoc {
    max-width: 95%;
  }
  #pageintro .heading {
    font-size: 3.0rem;
  }
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width:978px) {
  .hoc {
    max-width: 90%;
  }

  #pageintro .heading {
    font-size: 3rem;
  }

  #nav ul {
    float: none;
  }
}

@media screen and (max-width:750px) {
  .imgl, .imgr {
    display: inline-block;
    float: none;
    margin: 0 0 10px 0;
  }
  .fl_left, .fl_right {
    display: block;
    float: none;
  }
  .group .group>*:last-child, .clear .clear>*:last-child, .clear .group>*:last-child, .group .clear>*:last-child {
    margin-bottom: 0;
  }
  /* Experimental - Needs more testing in different situations, stops double margin when stacking */
  .one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 30px 0;
    padding: 0;
  }
  #header {
    padding: 30px 0;
    text-align: center;
  }
  #header #logo {
    margin: 0 0 20px 0;
  }
  #pageintro p {
    max-width: none;
    margin: auto;
  }
  #pageintro .heading {
    font-size: 3rem;
  }

  .sectiontitle {
    max-width: none;
    margin-bottom: 50px;
  }
  .sectiontitle, #introblocks ul {
    text-align: left;
  }

#header {
  padding: 0 15px;
  border: none;
}

#sub-pageintro {
  line-height: normal;
  padding-top: 200px; /* サブページの写真の大きさ */
  padding-bottom: 150px; /* サブページの写真の大きさ */
  text-align: center;
}

#sub-pageintro .heading {
  margin-bottom: 40px;  /* サブページ文字の下からの位置 */
  font-size: 3rem;
}

  #footer {
    padding-bottom: 50px;
  }
  #footer .latestimg>li {
    display: inline-block;
    float: none;
    width: auto;
    margin: 0 5% 5% 0;
  }
  #footer .latestimg>li img {
    width: auto;
  }	

/* ハンバーガーナビの設定 */
  .nav-links {
    flex-direction: column;
    position: fixed;
    top: 0px;  /* メニューの上からの位置 */
    right: 100%;  /* 100％でメニューを隠す */
    width: 140px;
    height: 100%;
    background: rgba(42, 45, 52, 1);
	z-index: 10;
  }
  .nav-links li {
    position: relative;
    font-weight: bold;
    text-align: left;
    top: 80px;  /* メニューの上からの位置 */
	margin: 6px;  /* メニューの下の間隔 */
	padding-left: 18px; /* メニューの左からの間隔 */
  }

.nav-links li a:hover {
  font-weight: bold;
  color: #000000;
  text-shadow: 1px 1px 2px #FFFFFF, -1px 1px 2px #FFFFFF, 1px -1px 2px #FFFFFF, -1px -1px 2px #FFFFFF;
  }
  .nav-links li a:hover::after {
    font-weight: normal;
    color: #FFFFFF;
  }
  .nav-links .active {
    display: inline-block;
    border-bottom: none;
    color: #FFFFFF;
  }
  .nav-links .active::before {
    position: absolute;
    text-align: left;
    left: 3px;  /* ▶︎の左からの位置 */
	color: #FFFFFF;
	content: "▶︎ ";
	animation: blinkEffect 1s ease-in-out infinite alternate; /* 矢印点滅ｙ*/
	}
    @keyframes blinkEffect {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

  .menu {
    display: block;
    margin-left: auto;
  }
/* ハンバーナビをクリックしたらX軸でメニューを反転 */
  .menu.toggle+.nav-links {
    transform: translateX(100%);
  }
}

  @media screen and (max-width:450px) {
    #pageintro footer form {
      max-width: none;
      width: 100%;
    }
    #description article {
      padding-left: 0;
    }
    #description article:first-of-type {
      margin-bottom: 50px;
    }
    #description article img {
      position: relative;
      top: inherit;
      left: inherit;
      margin-bottom: 20px;
    }
}