:root {
  /* --color-main: #97F4A4; */
  --color-main: #8ec63f; 
  /* 79, 139, 194 */
  --color-main-light: color-mod(var(--color-main) tint(15%));
  --color-main-dark: color-mod(var(--color-main) shade(15%));
  --color-main-bg: color-mod(var(--color-main) alpha(20%));
  
  --color-sub1: #8546F8;
  --color-sub1-light: color-mod(var(--color-sub1) tint(15%));
  --color-sub1-dark: color-mod(var(--color-sub1) shade(15%));
  --color-sub1-bg: color-mod(var(--color-sub1) alpha(20%));

  --color-sub2: #F0784D;
  --color-sub2-light: color-mod(var(--color-sub2) tint(15%));
  --color-sub2-dark: color-mod(var(--color-sub2) shade(15%));
  --color-sub2-bg: color-mod(var(--color-sub2) alpha(20%));

  --gray-7: #777777;
}

/*全体の設定*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #eeeeee;
}

@font-face {
  font-family: 'NotoSansJP-Bold.otf';
  src: url("../font/NotoSansJP-Bold.otf");
}

@font-face {
  font-family: 'NotoSansJP-Medium.otf';
  src: url("../font/NotoSansJP-Medium.otf");
}

@font-face {
  font-family: 'NotoSansJP-Light.otf';
  src: url("../font/NotoSansJP-Light.otf");
}

@font-face {
  font-family: 'JosefinSlab-Medium.ttf';
  src: url("../font/JosefinSlab-Medium.ttf");
}

@font-face {
  font-family: 'Fredoka-Medium.ttf';
  src: url("../font/Fredoka-Medium.ttf");
}

@font-face {
  font-family: 'font-article';
  src: url("../font/NotoSansJP-Medium.otf");
}

@font-face {
  font-family: 'GenJyuuGothic-Monospace-Bold';
  src: url("../font/GenJyuuGothic-Monospace-Bold.ttf");
}
@font-face {
  font-family: 'GenJyuuGothic-Monospace-Medium';
  src: url("../font/GenJyuuGothic-Monospace-Medium.ttf");
}
@font-face {
  font-family: 'KaiseiTokumin-ExtraBold';
  src: url("../font/KaiseiTokumin-ExtraBold.ttf");
}




h1 {
  font-family: "GenJyuuGothic-Monospace-Medium";
  margin: 10px 0px 0px 0px;
  font-size: 20px;
  text-align: center;

  color: #363636;
}

h2 {
  font-family: "GenJyuuGothic-Monospace-Medium";
  margin: 0px 0px 0px 0px;
  font-size: 16px;
  text-align: center;

  color: #363636;
}

p {
  font-family: "GenJyuuGothic-Monospace-Medium";
  margin: 10px 0px 0px 0px;
  font-size: 16px;
  /* text-align: center; */
  margin-left: auto;
  margin-right: auto;
  width: 60%;

  color: #363636;
}

a {
  font-family: "GenJyuuGothic-Monospace-Medium";
  color: var(--gray-7);
  margin: 10px 0px 0px 0px;
  font-size: 16px;
  text-align: center;
  /* margin-left: auto;
  margin-right: auto; */
  width: 60%;
}

a:hover {
  color: var(--color-sub2);
}

.green_line {
  margin: 20px auto 0;
  border: solid 2px var(--color-main);
  width: 80%;
  text-align: center;
  /* border-top: solid 1px red;
	border-bottom: solid 1px red; */
  /* height:10px; */
}

.orange_line {
  margin: 40px auto 0;
  border: solid 2px var(--color-sub2);
  width: 80%;
  text-align: center;
  /* border-top: solid 1px red;
border-bottom: solid 1px red; */
  /* height:10px; */
}


img {
  width: 60%;
  /* height: 150px; */
  /* object-fit: cover; */
  /* text-align: center; */
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin: 40px auto 0;
  border-radius: 4px;
  
}


.main {
  padding-top: 40px;
  display: block;
  z-index: 10;
  position: relative;
  text-align: center;
}

.article_text {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  width: 920px;
}

.space {
  height: 30vh;
}


/* header関係　ここから */
.header {
  font-family: "GenJyuuGothic-Monospace-Medium";
  height: 40px;
  width: 100%;
  /* padding: 15px 0; */
  /* background-color: #97F4A4; */
  background-color: #2cb573;
  color: #666666;

  /* float: right; */

  position: fixed;
  top: 0;
  z-index: 100;
}

/* .header .headline {
    line-height: 40px;
    float: right;
    font-size: 30px;
    margin-left: 100px;
} */

.footer {
  height: 80px;
  width: 100%;
  background-color: #2cb573;
  color: #777777;
  /* position: fixed; */
  /* top: 0;
  z-index: 100; */
  position:sticky;
	top:100vh;
  bottom: 0;
  
}


.nav-list {
  line-height: 20px;
  float: right;
  margin-right: 30px;
  list-style: none;
}

.nav-list-item {
  list-style: none;
  display: inline-block;
  margin: 10px 8px;
}

.nav-list li a {
  /*線の基点とするためrelativeを指定*/
  position: relative;
  text-decoration: none;
  font-family: 'Fredoka-Medium.ttf';
  color: var(--gray-7);
}

.nav-list li.current a,
.nav-list li a:hover {
  color: var(--color-sub2);
}

.nav-list li a::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: -10%;
  /*線の形状*/
  width: 120%;
  height: 2px;
  background: var(--color-sub2);
  /*アニメーションの指定*/
  transition: all .3s;
  transform: scale(0, 1);
  /*X方向0、Y方向1*/
  transform-origin: center top;
  /*上部中央基点*/
}

/*現在地とhoverの設定*/
.nav-list li.current a::after,
.nav-list li a:hover::after {
  transform: scale(1, 1);
  /*X方向にスケール拡大*/
}

/* header関係　ここまで */

/* スマホ　767px以下 */
@media only screen and (max-width: 1280px) {

  h1 {
    font-size: 28px;
  }
  h2 {
    font-size: 24px;
  }

  p {
    width: 80%;
    font-family: "NotoSansJP-Medium.otf";
    font-size: 22px;
  }

  a {
    font-family: "NotoSansJP-Medium.otf";
    font-size: 22px;
  }
  
  img {
    width: 80%;
  }

  .fit-picture {
    flex-direction: column;
  }

  .nav-list li a {
    font-size: 28px;
  }

}

/* pc　768px以上 */
@media only screen and (min-width: 1280px),
print {

  p {
    width: 60%;
  }

  img {
    width: 60%;
  }

}

.background {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 1;
}

.fit-picture {
  width: 80%;

  display: -webkit-box;
	display: -ms-flexbox;
  display:flex;
  justify-content: center;
  align-items: center;
  /* height: 150px; */
  /* object-fit: cover; */
  border-radius: 4px;

  margin-left: auto;
  margin-right: auto;
  margin: 10px auto 0;

  
}

.fit-picture img{
  width: 98%;
  height: 550px;
  object-fit: cover;
  
  /* transition-duration: 0.5s; */
}

/* .fit-picture img:hover{
  transform: scale(1.2) rotate(9deg);
  transition-duration: 0.5s;
} */

.main img{
  /* position:relative;
  overflow: hidden; */
  transition-duration: 0.5s;
}

.main img:hover{
  transform: scale(1.05) rotate(-0.3deg);
  transition-duration: 0.5s;
}