@charset "UTF-8";

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* ヘッダー */
:root {
  --background-navbar: rgb(238, 230, 227);
  --text: rgb(41, 35, 31);
}

.header {
  display: flex;
  background: var(--background-navbar);
  position: fixed;
  width: 100%;
  height: 52px;
  z-index: 1;
}

/* ヘッダーロゴコンテナー */
.headerlogo-container {
  display: flex;
  width: 100%;
  height: 52px;
  justify-content: center;
  align-items: center;
  border-bottom: 3px solid;
  border-color: var(--text);
  z-index: 1;
}

/* ヘッダーロゴ */
.header-logo {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 20px;
  z-index: 1;
}

.header-logo a {
  text-decoration: none;
  color: var(--text);
  transition: color 0.2s ease;
  /* フワッと変わるアニメーション */
}

.header-logo a:hover {
  color: rgb(168, 127, 83);
  /* マウスオーバー時の色指定 */
}

/* ハンバーガーメニュに関する記述 */
/* チェックボックス */

/* .check-btn {
  display: none;
} */

.non {
  display: none;
}


input[type="checkbox"]:checked ~ .nav {
  margin-left: 260px;
  /* border: 1px solid blue; */
  z-index: 1;
}

input[type="checkbox"]:checked ~ .back {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  transition: color 0.2s ease;
  z-index: 1;
}



/* ハンバーガーメニュ */
.hamburger-area {
  display: inline-block;
  position: fixed;
  cursor: pointer;
  right: 0;
  padding: 23px 14px;
  z-index: 1;
}

.hamburger-icon {
  background: var(--text);
  display: block;
  height: 3px;
  width: 22px;
  position: relative;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.hamburger-icon:before,
.hamburger-icon:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background: var(--text);
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.hamburger-icon:before {
  top: 7px;
}

.hamburger-icon:after {
  bottom: 7px;
}

/* ハンバーガーメニュのアニメーション */
.check-btn:checked~.header .hamburger-icon:before {
  transform: rotate(-45deg);
}

.check-btn:checked~.header .hamburger-icon:after {
  transform: rotate(45deg);
}

.check-btn:checked~.header:not(.steps) .hamburger-icon:before {
  top: 0;
}

.check-btn:checked~.header:not(.steps) .hamburger-icon:after {
  bottom: 0;
}


.check-btn:checked~.header .hamburger-icon {
  background: #00000000;
  transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

/* ハンバーガーメニュのアニメーション終了 */

/* ハンバーガーのチェックボタン */
#check-btn:checked~.nav-main-container .sidebar-area {
  left: 0;
  /* transform: scale(1, 1);
  transform-origin: left 0; */
  /* transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s; */
}

/* ヘッダーとナビバー終了 */

/* pc表示時のindexボタン */
.index-btn-container {
  display: none
}

/* ナビとメインのコンテナー */
.nav-main-container {
  display: flex;
  width: 100%;
  background: var(--background-navbar);

}

/* サイドバー */
nav {
  position: fixed;
  width: 250px;
  height: 100vh;
  left: -255px;
  font-family: 'Poppins', sans-serif;
  background: var(--background-navbar);
  transition: 0.4s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  z-index: 1;
}

.sidebar {
  min-width: 250px;
  height: 100vh;
  text-align: right;
  padding: 38px 38px;
  font-weight: 300;
  font-size: 18px;
  /* text-decoration: none; */
  color: var(--text);
  z-index: 1;
}

.sidebar ul {
  /* flex-direction: column; */
}

.sidebar li {
  margin-bottom: 1.5rem;
}

.sidebar a {
  text-decoration: none;
  color: var(--text);
  transition: color 0.2s ease;
  /* フワッと変わるアニメーション */
  
}

.sidebar a:hover {
  color: rgb(168, 127, 83);
  /* マウスオーバー時の色指定 */
}


/* メインエリア */


main {
  display: flex;
  width: 100%;
  margin-top: 52px;
  background-color: #ffffff;
  flex-direction: column;
}

.main-content {
  padding: 0px 25px 0;
  color: var(--text);
  /* opacity: 1; */
}

/* /*CSSスライドショー設定
---------------------------------------------------------------------------
１枚目 */
@keyframes top001 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	40% {}
	50% {opacity: 1;}
	60% {opacity: 0;}
	100% {opacity: 0;}
}
/*２枚目 */
@keyframes top002 {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	65% {}
	75% {opacity: 1;}
	85% {opacity: 0;}
	100% {opacity: 0;}
}
/*3枚目 */
@keyframes top003 {
	0% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 1;}
	80% {opacity: 1;}
	90% {opacity: 0;}
	100% {opacity: 0;}
}


/*画像ブロック */

#mainimg {
	clear: left;
	text-indent: -9999px;
	/* /*position: fixed;	スクロールしても固定表示させる指定 */
	position: relative;
	top: 0px;
	width: 100%;
	height: 100%;
}

#mainimg:before {
  content: "";
  display: block;
  padding-top: 45%;
}

/*土台画像 */
.top000 {
	background: url(../img/top001.png) no-repeat center center/cover;
	position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
}

/*３枚画像の共通設定 */
.top001,.top002,.top003 {
	animation-duration: 36s;	/*実行する時間。「s」は秒の事。 */
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。 */
	position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-delay: 3s;
}

/*１枚目 */
.top001 {
	background: url(../img/top000.png) no-repeat center center/cover;
	animation-name: top001;		/*上で設定しているキーフレーム（keyframes）の名前 */
}
 /*２枚目 */
.top002 {
	background: url(../img/top002.jpg) no-repeat center center/cover;
	animation-name: top002;		/*上で設定しているキーフレーム（keyframes）の名前 */
}
/*３枚目 */
.top003 {
	background: url(../img/top003.jpg) no-repeat center center/cover;
	animation-name: top003;
}


 /* ページ遷移時のフェードアウト・フェードイン用のCSS */
.fade-out {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.1s ease-in-out;
}

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

h1 {
  font-family: 'Poppins', 'Noto Sans JP', sans-serif;
  font-weight: 200;
  font-size: 24px;
  padding: 30px 30px 10px;
}

h2 {
  font-family: 'Poppins', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 15px;
  margin-top: 4rem;
  margin-bottom: 1rem;
}

h3 {
  font-family: 'Poppins', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 2rem;
}

.info {
  margin-top: 100px;
}

.underline {
  text-decoration: underline;
}

a {
  color: var(--text);
}

a:hover {
  transition: color 0.2s ease;
  /* フワッと変わるアニメーション */
  color: rgb(168, 127, 83);
  /* マウスオーバー時の色指定 */
}

.info-more {
  font-size: 12px;
  margin-left: 0.5rem;
}

.application-btn {
  text-decoration: none;
  color: var(--text);
  padding: 5px;
  background-color: var(--background-navbar);
}

.main-list {
  padding: 0px 1rem 0px;
}

.main-list li {
  margin-bottom: 1.5rem;
}

.sub-list {
  list-style-type: circle;
  font-size: 0.8rem;
  padding: 0px 1rem 0px;
  
}

table {
  border-collapse: collapse;
  border: 1px solid;
  font-size: 0.8rem;
  text-align: center;
  width: 100%;
  table-layout: fixed;
  
}

table th {
  font-weight: 300;
  text-decoration: none;
  border: 1px solid;
  padding: 10px 0px;
  font-size: 0.8rem;
}

table td {
  border: 1px solid;
  padding: 10px;
}

footer {
  width: 100%;
  height: 40px;
  margin-top: 200px;
  background-color: #ffffff;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
}

/* PC用のCSSをメディアクエリの中に記述する */
@media screen and (min-width: 900px) {

  body {
    box-sizing: border-box;
    background-color: #ffffff;
  }

  h1 {
    padding: 30px 85px 10px;
  }

  nav {
    position: sticky;
    top: 0px;
    float: left;
    left: 0px;
  }

  .sidebar {
    padding: 110px 38px;
  }

  main {
    width: 900px;
    min-width: 700px;
    margin: 0 auto;
  }

  .main-content {
    flex: 1;
    padding: 0px 100px 0;
  }

  .header {
    position: absolute;
    top: -55px;
  }

  .index-btn-container {
    display: flex;
    width: 250px;
    padding: 20px 30px;
    position: absolute;
  }
  .index-btn {
    width: 180px;
    height: 55px;
    border: 3px solid;
    border-color: var(--text);
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    line-height: 49px;
  }

  .index-btn a {
    text-decoration: none;
    color: var(--text);
    transition: color 0.2s ease;
    /* フワッと変わるアニメーション */
  }

  .index-btn a:hover {
    color: rgb(168, 127, 83);
    /* マウスオーバー時の色指定 */
  }

  .info {
    display: none;
  }

}