header {
  background-image: url("../img/header_bg.jpg");
  background-repeat: no-repeat;
  background-size: auto;
  width: 100%;
  height: 360px;
  overflow-x: hidden;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 40px;
}
header h1 {
  margin-left: 2em;
  font-size: 3.5em;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
header h1 a {
  color: white;
  transition: all 0.5s;
}
header h1 a:hover {
  color: #014997;
  transition: all 0.5s;
}
header .tree {
  position: absolute;
  top: 0;
  left: 0;
}
header .bird {
  position: absolute;
  bottom: 50px;
  left: 66%;
  z-index: 1;
}
header .huku {
  position: absolute;
  bottom: 50px;
  left: 78%;
  z-index: 1;
}

.bread_crumbs {
  background-image: url("../img/pan_bg.png");
  background-size: auto;
  width: 100%;
  height: 80px;
  position: relative;
  bottom: 0;
  left: 0;
  margin-top: -80px;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 0 40px;
}
.bread_crumbs span {
  font-size: 1.2em;
  color: white;
  font-weight: 600;
}
.bread_crumbs span a {
  color: white;
  transition: all 0.5s;
}
.bread_crumbs span a:hover {
  color: yellow;
  transition: all 0.5s;
}

footer {
  border-top: none;
}

#top_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/top_bg.png);
  background-repeat: no-repeat;
  overflow-x: hidden;
  height: 300px;
  padding: 0 40px;
}
#top_wrapper div {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  max-width: 400px;
  width: 100%;
  padding: 2em;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
#top_wrapper div hr {
  display: block;
  height: 1px;
  width: 80%;
  color: #555555;
}

main {
  background-color: white;
  margin: 20px;
  padding: 20px;
}

.icon_box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -moz-column-gap: 2em;
       column-gap: 2em;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.icon_box .icon_bg {
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5s;
}
.icon_box .icon_bg .icon {
  border-radius: 50%;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.icon_box .icon_bg span {
  font-size: 2em;
  font-weight: 600;
  margin-bottom: 0.5em;
  transition: all 0.5s;
}
.icon_box .icon_bg:hover .icon.color_1 {
  background-color: rgb(16, 193.5428571429, 255);
  transition: all 0.5s;
}
.icon_box .icon_bg:hover span.c_1 {
  color: rgb(11.0163934426, 113.8360655738, 212.9836065574);
  transition: all 0.5s;
}
.icon_box .icon_bg:hover .icon img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(3%) saturate(7438%) hue-rotate(296deg) brightness(112%) contrast(102%);
}
.icon_box .icon_bg:hover .icon.color_2 {
  background-color: rgb(26.7857142857, 223.2142857143, 218.75);
  transition: all 0.5s;
}
.icon_box .icon_bg:hover span.c_2 {
  color: rgb(0, 209.1621621622, 213);
  transition: all 0.5s;
}
.icon_box .icon_bg:hover .icon.color_3 {
  background-color: rgb(255, 16, 234.5142857143);
  transition: all 0.5s;
}
.icon_box .icon_bg:hover span.c_3 {
  color: rgb(221.661971831, 22.338028169, 194.1690140845);
  transition: all 0.5s;
}
.icon_box .icon_bg:hover .icon.color_4 {
  background-color: rgb(255, 36.4857142857, 16);
  transition: all 0.5s;
}
.icon_box .icon_bg:hover span.c_4 {
  color: rgb(218.2666666667, 85.2666666667, 63.7333333333);
  transition: all 0.5s;
}
.icon_box .color_1 {
  background-color: #dcf6ff;
  transition: all 0.5s;
}
.icon_box .c_1 {
  color: #063e74;
  transition: all 0.5s;
}
.icon_box .color_2 {
  background-color: #cdf9f8;
  transition: all 0.5s;
}
.icon_box .c_2 {
  color: #006d6f;
  transition: all 0.5s;
}
.icon_box .color_3 {
  background-color: #ffdcfc;
  transition: all 0.5s;
}
.icon_box .c_3 {
  color: #810d71;
  transition: all 0.5s;
}
.icon_box .color_4 {
  background-color: #ffdfdc;
  transition: all 0.5s;
}
.icon_box .c_4 {
  color: #972e1d;
  transition: all 0.5s;
}

.mobile {
  display: none;
}/*# sourceMappingURL=common.css.map */