@charset "UTF-8";
/*色*/
/*背景画像*/
/*メディアクエリ*/
/*width*/
/*フォントサイズ レスポンシブ*/
/*色*/
/*背景画像*/
/*メディアクエリ*/
/*width*/
/*フォントサイズ レスポンシブ*/
/*色*/
/*背景画像*/
/*メディアクエリ*/
/*width*/
/*フォントサイズ レスポンシブ*/
/*全ての要素にborder-boxを適用*/
*,
*:before,
*:after {
  box-sizing: border-box;
  font: inherit;
  color: inherit;
}

html {
  font-family: YuMincho, "游明朝体", Yu Mincho, "游明朝", serif;
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  background-image: url(../img/moji-bg.png);
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-size: 60%;
  background-position: right 10% bottom 10%;
  letter-spacing: 0.1rem;
  position: relative;
}

/*テキスト系*/
h2 {
  font-size: clamp(2.6rem, 2.8vw, 3rem);
  line-height: clamp(3rem, 3.5vw, 4rem);
  font-weight: 600;
  color: #404040;
  margin: initial;
}

h3 {
  font-size: clamp(2.1rem, 2.4vw, 2.6rem);
  line-height: clamp(2.8rem, 3vw, 3.6rem);
  color: #404040;
  font-weight: 600;
  margin-top: initial;
}

h4 {
  font-size: clamp(2.4rem, 3vw, 2.4rem);
  line-height: clamp(2.4rem, 3vw, 3.2rem);
  color: #404040;
  font-weight: 600;
  margin-top: initial;
}

h5 {
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  line-height: clamp(2rem, 3vw, 2.6rem);
  color: #404040;
  font-weight: 600;
  margin-top: initial;
}

p {
  font-size: clamp(1.4rem, 3vw, 1.6rem);
  color: #404040;
  display: block;
  margin-block-start: initial;
  margin-block-end: initial;
  margin-inline-start: initial;
  margin-inline-end: initial;
}

span{
    font-size: clamp(1.6rem, 3vw, 1.8rem);
    font-weight: 700;
}

strong{
    font-weight: 600;
}

hr{
  height: 7px;
  background-image: repeating-linear-gradient(45deg, #004e8c 0, #004e8c 1px, transparent 0, transparent 50%);
  background-size: 8px 8px;
  margin-top:1rem;
  margin-bottom: 1.5rem;
}


a {
  text-decoration: none;
}

.header_logo{
    margin-top:1em;
    margin-left: 1em;
}

.indent-none {
  text-indent: initial !important;
}

/*list系*/
ul, li {
  margin-block-start: initial;
  margin-block-end: initial;
  padding-inline-start: initial;
}

ul {
  list-style-type: none;
}

/*画像*/
img {
  max-width: 100%;
}

/*ボタン関連*/
.btn-prim {
  margin: 2rem 0;
  background-color: #ffdc35;
  border: #000 solid 2px;
  border-radius: 8px;
  padding: 1rem 3rem;
  display: inline-block;
  transition: all ease-in-out .5s;
}

.btn-prim a {
  display: block;
  color: #000;
  font-size: 1.6rem;
  text-decoration: none;
  transition: all ease-in-out .5s;
}

.btn-prim:hover {
  background-color: #ffffff;
  border: #004e8c solid 2px;
}

.btn-prim:hover a {
  color: #004e8c;
}

/*head logo*/
header {
  position: fixed;
  width: 100%;
  height: 5rem;
  background-color: #004e8c;
  z-index: 3;
}

/*footer*/
footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5rem;
  background-color: #004e8c;
}

footer p {
  color: #fff;
  font-size: 1.2rem;
}

/*色*/
/*背景画像*/
/*メディアクエリ*/
/*width*/
/*フォントサイズ レスポンシブ*/
/*hero*/
#hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url("../img/top-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin-bottom: 3rem;
}

@media screen and (max-width: 780px) {
  #hero {
    height: 100%;
  }
}

#hero .hero-inner {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: min(90%, 92rem);
  row-gap: 1rem;
  column-gap: 1rem;
}

#hero .hero-inner .img-side {
  width: calc(100% / 2);
  padding: 2rem;
}

#hero .hero-inner .img-side img {
  box-shadow: 0 0 7px rgba(0,78,140,1);
}

#hero .hero-inner .disc-side {
  width: calc(100% / 2);
  padding: 2rem;
}

#hero .hero-inner .disc-side .disc-side-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

#hero .hero-inner .disc-side .disc-side-wrap h2.title {
  margin-bottom: 1rem;
}

#hero .hero-inner .disc-side .disc-side-wrap .sub-title {
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  font-weight: 600;
  margin-bottom: 3rem;
}

#hero .hero-inner .disc-side .disc-side-wrap ul {
  flex-grow: 1;
}

#hero .hero-inner .disc-side .disc-side-wrap ul.disc-list li {
  font-size: clamp(1.3rem, 1.4vw, 1.5rem);
  margin-bottom: 0.5rem;
}

@media screen and (max-width: 780px) {
  #hero .hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  #hero .hero-inner .img-side {
    width: 100%;
  }
  #hero .hero-inner .disc-side {
    width: 100%;
  }
  #hero .hero-inner .disc-side .disc-side-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

/*はじめに*/
#intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(1rem, 3vw, 5rem);
  margin-bottom: 5rem;
}

#intro .intro-wrap {
  width: min(90%, 72rem);
}

#intro .intro-wrap h3 {
  text-align: center;
  margin-bottom: 5rem;
}

#intro .intro-wrap h4 {
  font-size: clamp(2rem, 2.5vw, 2rem);
  text-align: left;
  margin-top: 1.8rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #004e8c;
}

#intro .intro-wrap big{
  font-size: 150%;
  color: #004e8c;
  padding:2px;
}



#intro .intro-wrap p {
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  line-height: clamp(3.3rem, 3.6vh, 3.8rem);
  font-weight: 520;
}

#intro .intro-wrap p.intro-bottom {
  margin-top: 3rem;
  text-align: right;
}

/*もくじ*/
#contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(1rem, 3vw, 5rem);
  margin-bottom: 5rem;
}

#contents .contents-wrap {
  width: min(90%, 72rem);
}

#contents .contents-wrap h3 {
  text-align: center;
  margin-bottom: 5rem;
}

#contents .contents-wrap .cont-list {
  margin-bottom: 5rem;
}

#contents .contents-wrap .cont-list ul li.list-wrap h4 {
  font-size: clamp(1.8rem, 1.9vw, 2rem);
  font-weight: 600;
  border-bottom: #404040 solid 1px;
}

#contents .contents-wrap .cont-list ul li.list-wrap ul {
  margin-bottom: 3rem;
}

#contents .contents-wrap .cont-list ul li.list-wrap ul li {
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  margin-left: 2em;
  margin-bottom: 1rem;
}

/*あとがき*/
#afterword {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(1rem, 3vw, 5rem);
  margin-bottom: 5rem;
}

#afterword .afterword-wrap {
  width: min(90%, 72rem);
}

#afterword .afterword-wrap p {
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  line-height: clamp(3.3rem, 3.6vh, 3.8rem);
  font-weight: 600;
}

#afterword .afterword-wrap p.aw-bottom {
  margin-top: 3rem;
  text-align: right;
}

/*Footer-cta*/
#footer-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #c4e5fc;
  padding: clamp(1rem, 3vw, 5rem);
  padding-bottom: 5rem;
}

#footer-cta .footer-cta-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: min(90%, 92rem);

}

#footer-cta .footer-cta-wrap .img-side {
  width: calc(100% / 2);
  padding: 2rem;
}

#footer-cta .footer-cta-wrap .img-side img {
  width: min(100%, 36rem);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

#footer-cta .footer-cta-wrap .disc-side {
  width: calc(100% / 2);
  padding: 2rem;
}

#footer-cta .footer-cta-wrap .disc-side .disc-side-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

#footer-cta .footer-cta-wrap .disc-side .disc-side-wrap h2.title {
  margin-bottom: 1rem;
}

#footer-cta .footer-cta-wrap .disc-side .disc-side-wrap .sub-title {
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  font-weight: 600;
  margin-bottom: 3rem;
}

#footer-cta .footer-cta-wrap .disc-side .disc-side-wrap ul {
  flex-grow: 1;
}

#footer-cta .footer-cta-wrap .disc-side .disc-side-wrap ul.disc-list li {
  font-size: clamp(1.3rem, 1.4vw, 1.5rem);
  margin-bottom: 0.5rem;
}

@media screen and (max-width: 780px) {
  #footer-cta .footer-cta-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  #footer-cta .footer-cta-wrap .disc-side {
    width: 100%;
  }
  #footer-cta .footer-cta-wrap .disc-side .disc-side-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}