/* CSS Document */

/* ----- リセット ----- */
*,
*::before,
*::after{
  box-sizing:border-box
}
body,
h1,h2,h3,h4,
p,figure,blockquote,dl,dd{
  margin:0
}
ul[role="list"],
ol[role="list"]{
  list-style:none
}
html:focus-within{
  scroll-behavior:smooth
}
body{
  min-height:100vh;
  text-rendering:optimizeSpeed;
  line-height:1.5
}
a:not(
  [class]){
    text-decoration-skip-ink:auto
  }
  img,picture{
    max-width:100%;
    display:block
  }
  input,button,textarea,select{
    font:inherit
  }
  @media(prefers-reduced-motion:reduce){
    html:focus-within{
      scroll-behavior:auto
    }
    *,
    *::before,
    *::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important
    }
  }
/* ----- リセット ----- */

.container {
  background: linear-gradient(to left, orange, white);
  background-size: 10%;
  background-repeat: repeat-y;
  height: 100vh;
}

.container {
  width: 900px;
  box-sizing: border-box;
  margin: 0 auto;
}

.sub_container {
  width: 90%;
  margin-left: 10%;
}

.header {
  font-family: 'Noto Serif JP', serif;
  color: rgb(6, 138, 35);
  width: 100%;
}

.header h1 {
  padding: 2rem;
  font-size: 3rem;
}

.bg_img {
  background-image: url(../common_img/bg.jpg);
}

.intro {
    width: 100%;
    padding: 1rem;
    margin-bottom: 2rem;
}

.main h2 {
  padding: 1rem 2rem;
  background:  linear-gradient(rgb(255, 162, 158),white,rgb(255, 162, 158));
  color: rgb(102, 0, 51);
}