@charset "UTF-8";
body {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
  font-family: "MS PGothic", sans-serif;
}

body.fixed {
  width: 100%;
  height: 100%;
  position: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "franklin-gothic-atf", sans-serif;
  font-weight: 800;
  font-style: normal;
}

p,
th,
td {
  font-family: iroha-23kaede-stdn, sans-serif;
  font-weight: 400;
  font-style: normal;
}

html {
  padding: 0;
  width: 100% !important;
  margin: 0 !important;
  height: 100% !important;
}

html::-webkit-scrollbar {
  display: none;
}

style {
  margin: 0 !important;
}

a {
  display: block !important;
}

img {
  width: 100%;
}

.pointer {
  pointer-events: none;
}

.opacity0 {
  opacity: 0;
  pointer-events: none;
}

.anchor {
  padding: 30px;
  margin-top: -50px;
}

/**********************************
header
***********************************/
header {
  background-color: #8cc63f;
}

.top-space {
  margin-top: 6%;
}

.head-box {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.472);
  display: flex;
  width: 100%;
  position: fixed;
  top: 0%;
  left: 0%;
  z-index: 50;
  background-color: #8cc63f;
}
.head-box .h1-box {
  flex: 7%;
  position: relative;
  top: 0%;
  left: 0%;
  z-index: 10;
}
.head-box .h1-box .logo {
  width: 70%;
  background-color: white;
  border-radius: 50%;
  padding: 3%;
  margin: 7%;
}
.head-box .h2-box {
  flex: 93%;
  display: flex;
  justify-content: right;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 1%;
  position: relative;
  top: 0%;
  left: 0%;
  z-index: 10;
}
.head-box .h2-box .menu-flex {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: right;
  align-items: flex-end;
  position: relative;
  top: 0%;
  left: 0%;
  z-index: 10;
}
.head-box .h2-box .menu-flex img {
  display: block;
  width: 70%;
  border-radius: 50%;
  margin-left: 20%;
}
.head-box .h2-box .menu-flex a {
  display: block;
  text-decoration: none;
  color: white;
  font-family: iroha-23kaede-stdn, sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 100%;
  white-space: nowrap;
  font-size: 1.2vw;
}
.head-box .h2-box .menu-flex a:hover {
  transform: scale(1.04, 1.04);
}
.head-box .h2-box .menu-flex .opacity0 {
  opacity: 0;
}
.head-box .h2-box .menu-flex .entry {
  background-color: white;
  color: #006837;
  font-family: "corporate-logo-ver2", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  padding: 10% 3% 10% 3%;
  text-align: center;
}
.head-box .h2-box .menu-flex .menu-entry {
  flex: 20%;
}
.head-box .h2-box .menu-flex .menu {
  margin-right: 1.7%;
  position: relative;
  z-index: 5;
  width: 10%;
}
.head-box .h2-box .menu-flex .menu .sub-menu {
  display: none;
  opacity: 0;
}
.head-box .h2-box .menu-flex .menu:hover .sub-menu {
  display: block;
  position: absolute;
  z-index: -10;
  top: 0;
  left: -10%;
  background-color: #8cc63f;
  padding: 0% 10% 5% 10%;
  opacity: 1;
  transition: 0.5s;
}
.head-box .h2-box .menu-flex .menu:hover .sub-menu a {
  font-size: 1.2vw;
  color: white;
  margin-bottom: 2%;
}
.head-box .h2-box .menu-flex .menu-long {
  padding-right: 2%;
}
.head-box .h2-box .menu-flex .menu-long2 {
  padding-right: 4%;
}

/**********************************
footer
***********************************/
.footer {
  background-color: #8cc63f;
}
.footer .footer-grid {
  display: grid;
  width: 80%;
  margin: 0 auto;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  padding-top: 3%;
  font-size: 1.2vw;
}
.footer .footer-grid a {
  color: white;
  text-decoration: none;
  font-family: iroha-23kaede-stdn, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.footer .footer-grid a:hover {
  transform: scale(1.04, 1.04);
}
.footer .footer-grid .menu1 {
  grid-column: 1/2;
  grid-row: 1/2;
}
.footer .footer-grid .menu2 {
  grid-column: 2/3;
  grid-row: 1/2;
}
.footer .footer-grid .menu3 {
  grid-column: 3/4;
  grid-row: 1/2;
  margin-left: -20%;
}
.footer .footer-grid .menu4 {
  grid-column: 4/5;
  grid-row: 1/3;
  margin-left: -55%;
}
.footer .footer-grid .menu5 {
  grid-column: 5/6;
  grid-row: 1/3;
  margin-bottom: 15%;
  margin-left: -25%;
}
.footer .footer-grid .menu5 .s-menu {
  margin-top: 0;
}
.footer .footer-grid .menu5-5 {
  grid-column: 6/7;
  grid-row: 1/3;
  margin-left: 10%;
}
.footer .footer-grid .menu5-5 .s-menu {
  margin-top: 0;
  margin-bottom: 15%;
}
.footer .footer-grid .menu6 {
  grid-column: 1/4;
  grid-row: 2/3;
  white-space: nowrap;
}
.footer .footer-grid .menu6 .entry-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6%;
  margin-bottom: 3%;
}
.footer .footer-grid .menu6 .entry-box .menu-entry {
  flex: 60%;
}
.footer .footer-grid .menu6 .entry-box .menu-entry .entry {
  background-color: white;
  color: #006837;
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
  padding: 4% 6% 4% 6%;
  margin: 0% 10% 0% 0%;
  text-align: center;
}
.footer .footer-grid .menu6 .insta .logo {
  margin-top: 1%;
  width: 11%;
  border-radius: 50%;
  transform: scale(1, 1);
  margin-left: 5%;
}
.footer .footer-grid .menu6 .insta a:hover {
  transform: scale(1, 1);
}
.footer .footer-grid .menu6 .place {
  color: #006837;
}
.footer .footer-grid .s-menu {
  margin-top: 2%;
}
.footer .footer-grid .footer-title {
  color: #006837;
}

.copy {
  text-align: center;
  font-family: iroha-23kaede-stdn, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #006837;
  font-size: 1.1vw;
  margin-top: 1%;
}

.to-top-img {
  position: fixed;
  bottom: 8%;
  right: 5%;
  width: 5%;
  background-color: white;
  border-radius: 50%;
  padding: 1%;
  border: solid 7px #8cc63f;
  z-index: 500;
}

.to-top {
  position: fixed;
  bottom: 8%;
  right: 8%;
  text-align: center;
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #006837;
  font-size: 1.3vw;
  z-index: 510;
}

.footer-sp {
  display: none;
}

/**********************************
body
***********************************/
.top h1,
.top h2,
.top h3,
.top h4,
.top h5,
.top h6 {
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.top a:hover {
  transform: scale(1.05, 1.05);
}

.top-new-img {
  display: block;
  margin-top: 7.5%;
  padding-bottom: 2%;
}

@media screen and (max-width: 900px) {
  .top-new-img {
    margin-top: 0%;
  }
}
/**********************************
news
***********************************


.news-box {
    background-color: $lightgreen;
    width: 100%;
    position: relative;
    height: 100px;
    border-top: solid 4px $green;
    border-bottom: solid 4px $green;
    margin-bottom: 6%;

    .news {
        position: absolute;
        top: -50%;
        left: 50%;
        transform: translate(-60%, 0);

        h1 {
            span {
                font-size: 2.5vw;
                background-color: #009245;
                color: white;
                padding: 10% 20% 10% 20%;
                letter-spacing: 0.05em;
            }
        }
    }
}*/
.news-title {
  position: absolute;
  width: 100%;
  top: 0px !important;
  transform: translate(0, -50%);
  text-align: center;
  z-index: 10;
}
.news-title .h1 span {
  font-size: 2.5vw;
  background-color: #009245;
  color: white;
  padding: 1.3% 3% 1.3% 3%;
  letter-spacing: 0.05em;
  font-weight: 800;
}

.news a:hover {
  transform: scale(1, 1) !important;
}

.swiper-slide {
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3vw;
}

.news-box #app {
  position: static;
  height: 100%;
}

.bg-box1 {
  margin-top: -3%;
  background-color: #8cc63f;
  padding-bottom: 2%;
  border-bottom: solid 4px #009245;
}

.box1 {
  width: 80%;
  margin: 0 auto;
  padding-top: 3%;
}
.box1 h1 {
  margin: 10px;
  font-size: 1.5em;
  text-align: center;
}
.box1 .box2 {
  width: 94%;
  margin: 0 auto;
  height: 165px;
  overflow-y: scroll;
  /*縦方向はスクロール可*/
  overflow-x: hidden;
  /*横方向はスクロール不可*/
}
.box1 .box2::-webkit-scrollbar {
  display: none;
}
.box1 hr {
  margin-top: 0;
  border: solid 1px #009245;
}
.box1 .border1 {
  margin: 0 auto;
  width: 70%;
  padding: 0.3em;
  border: solid 5px #009245;
  height: 155px;
  background-color: white;
}
.box1 ul {
  counter-reset: number;
  /*数字をリセット*/
  list-style-type: none !important;
  /*数字を一旦消す*/
  padding-inline-start: 0px;
  margin: 0;
}
.box1 a {
  text-decoration: none !important;
}
.box1 ul.news li {
  position: relative;
  padding: 0.5em 0.5em 0.2em 40px;
  line-height: 1.5em;
  color: #009245;
  font-size: 20px;
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-weight: 800;
  /*
  &:hover {
      color: rgb(75, 126, 255);
  }*/
}
.box1 ul.news li:before {
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display: inline-block;
  background: #009245;
  color: white;
  font-weight: bold;
  font-size: 15px;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  transform: translateY(-50%);
}
.box1 ul li:last-of-type {
  border-bottom: none;
  /*最後のliの線だけ消す*/
}

/**********************************
insta
***********************************/
.instagram-media {
  max-width: none !important;
  width: 50% !important;
  margin: 2% !important;
}

.insta-box h2 {
  text-align: center;
}
.insta-box hr {
  width: 50%;
  border: solid 2px #fcee21;
}

.insta-box {
  background-image: url("../../src/home/bg1.webp");
  background-size: 100% 100%;
  background-size: cover;
  height: auto;
}
.insta-box h2 {
  font-size: 2.7vw;
  color: white;
  margin-bottom: 0;
  padding-top: 2%;
  letter-spacing: 0.1em;
}
.insta-box .insta-flex {
  width: 90%;
  margin: 0 auto;
  align-items: center;
  overflow-x: scroll;
  max-width: 100%;
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.insta-box .insta-flex #sb_instagram #sbi_images .sbi_item {
  width: 250px;
}
.insta-box .insta-flex::-webkit-scrollbar {
  width: 10px;
}
.insta-box .insta-flex::-webkit-scrollbar-track {
  background: none;
}
.insta-box .insta-flex::-webkit-scrollbar-thumb {
  background: #fcee21;
}
.insta-box .insta-flex::-webkit-scrollbar-thumb:hover {
  background: #f7931e;
}
.insta-box .insta-flex img {
  width: 18%;
}
.insta-box .more-btn {
  text-align: center;
  padding: 2%;
  padding-top: 1%;
}
.insta-box .more-btn a {
  text-decoration: none;
}
.insta-box .more-btn a span {
  background-color: white;
  color: #f7931e;
  padding: 1% 5% 1% 5%;
  font-size: 1.4vw;
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/**********************************
movie
***********************************/
.mission-box.movie-box .mission-flex {
  display: block;
  position: static;
  transform: translate(0, 0);
  margin: 50px auto !important;
  width: 40%;
  min-width: 500px;
  padding-bottom: 2%;
}
.mission-box.movie-box .mission-flex iframe {
  aspect-ratio: 16/9;
  display: block;
  margin: 50px auto !important;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  box-shadow: 0.3em 0.3em 0.8em rgba(0, 0, 0, 0.6);
}
.mission-box.movie-box .mission-bg {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: -1;
  opacity: 0.6;
}
.mission-box.movie-box .mission-title {
  top: 0%;
  right: 0;
  left: auto;
}
.mission-box.movie-box .mission-title {
  width: 35%;
}

/**********************************
mission
***********************************/
.mission-box {
  position: relative;
  margin-top: 5%;
  margin-bottom: 3%;
}
.mission-box .mission-flex {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0, -50%);
  display: flex;
  justify-content: center;
  padding-top: 2%;
}
.mission-box .mission-flex a {
  width: 30%;
}
.mission-box .mission-flex a .mission1 {
  margin-top: 7%;
}
.mission-box .mission-flex a .mission3 {
  margin-top: -7%;
}
.mission-box .mission-title {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 40%;
  text-align: center;
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-top: -1.5%;
}
.mission-box .mission-title h3 {
  font-size: 4.5vw;
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fbb03b;
  margin-top: 5%;
}
.mission-box .mission-title h4 {
  font-size: 2.5vw;
  margin: 0;
  color: #f7931e;
  display: flex;
  align-items: center;
  /* 垂直中心 */
  justify-content: center;
  /* 水平中心 */
}
.mission-box .mission-title h4:before,
.mission-box .mission-title h4:after {
  border-top: 3px solid #f7931e;
  content: "";
  width: 2em;
  /* 線の長さ */
}
.mission-box .mission-title h4:before {
  margin-right: 1em;
  /* 文字の右隣 */
}
.mission-box .mission-title h4:after {
  margin-left: 1em;
  /* 文字の左隣 */
}
.mission-box .challenge-title {
  position: absolute;
  bottom: -5%;
  right: 0%;
  width: 40%;
  text-align: center;
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.mission-box .challenge-title h4 {
  font-size: 4.5vw;
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #8cc63f;
}
.mission-box .challenge-title h3 {
  font-size: 2.5vw;
  margin: 0;
  color: #009245;
  display: flex;
  align-items: center;
  /* 垂直中心 */
  justify-content: center;
  /* 水平中心 */
}
.mission-box .challenge-title h3:before,
.mission-box .challenge-title h3:after {
  border-top: 3px solid #009245;
  content: "";
  width: 2em;
  /* 線の長さ */
}
.mission-box .challenge-title h3:before {
  margin-right: 1em;
  /* 文字の右隣 */
}
.mission-box .challenge-title h3:after {
  margin-left: 1em;
  /* 文字の左隣 */
}

.challenge-box {
  background-image: url("../../src/home/bg3.webp");
  background-size: 100% 100%;
}
.challenge-box .challenge-flex {
  display: flex;
  width: 90%;
  margin: 0 auto;
  padding-top: 2%;
  padding-bottom: 1%;
  justify-content: center;
}
.challenge-box .challenge-flex img {
  width: 90%;
}

/**********************************
occupation
***********************************/
.occ-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5%;
  margin-bottom: 1%;
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.occ-title .occ1 {
  flex: 45%;
}
.occ-title .occ1 h3 {
  font-size: 2.2vw;
  margin: 0;
  color: #f7931e;
  display: flex;
  align-items: center;
  /* 垂直中心 */
  justify-content: right;
  padding-right: 2%;
  /* 水平中心 */
}
.occ-title .occ1 h3:before,
.occ-title .occ1 h3:after {
  border-top: 3px solid #f7931e;
  content: "";
  width: 2em;
  /* 線の長さ */
}
.occ-title .occ1 h3:before {
  margin-right: 1em;
  /* 文字の右隣 */
}
.occ-title .occ1 h3:after {
  margin-left: 1em;
  /* 文字の左隣 */
}
.occ-title .occ2 {
  flex: 55%;
  font-size: 5vw;
  color: #fbb03b;
  text-align: left;
}
.occ-title .occ2 h4 {
  margin: 0;
  margin-left: 5%;
  letter-spacing: 0.05em;
}

/*
.occ-box {
    background-image: url(../../src/home/bg1.webp);
    background-size: 100% 100%;

    .coming {
        width: 40%;
        padding: 4%;
        display: block;
        margin: 0 auto;
    }
}*/
.occ-box {
  background-image: url(../../src/home/bg1.webp);
  background-size: 100% 100%;
}
.occ-box .occ-flex {
  display: flex;
  width: 90%;
  margin: 0 auto;
  padding-top: 2%;
  padding-bottom: 2%;
  justify-content: center;
}
.occ-box .occ-flex a {
  width: 100%;
  flex: 33.333%;
  margin: 0 auto;
}
.occ-box .occ-flex .pointer img {
  width: 45%;
  margin: 0 auto;
  display: block;
}
.occ-box .occ-flex img {
  width: 90%;
  display: block;
  margin: 0 auto;
}
.occ-box .occ-flex .training1 {
  width: 40%;
}
.occ-box .occ-training-flex a {
  flex: 40%;
  width: 40%;
  margin: 2.5%;
}
.occ-box .occ-training-flex a .training1 {
  width: 100%;
}

/**********************************
how to
***********************************/
.howto-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5%;
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-bottom: 1%;
}
.howto-title .howto1 {
  flex: 60%;
}
.howto-title .howto1 h3 {
  font-size: 2.2vw;
  margin: 0;
  color: #009245;
  display: flex;
  align-items: center;
  /* 垂直中心 */
  justify-content: right;
  padding-right: 2%;
  /* 水平中心 */
}
.howto-title .howto1 h3:before,
.howto-title .howto1 h3:after {
  border-top: 3px solid #009245;
  content: "";
  width: 2em;
  /* 線の長さ */
}
.howto-title .howto1 h3:before {
  margin-right: 1em;
  /* 文字の右隣 */
}
.howto-title .howto1 h3:after {
  margin-left: 1em;
  /* 文字の左隣 */
}
.howto-title .howto2 {
  flex: 40%;
  font-size: 5vw;
  color: #8cc63f;
}
.howto-title .howto2 h4 {
  margin: 0;
  margin-left: 5%;
  letter-spacing: 0.05em;
}

/*
.howto-box {
    background-image: url("../../src/home/bg4.webp");
    background-size: 100% 100%;

    .coming {
        width: 40%;
        padding: 4%;
        display: block;
        margin: 0 auto;
    }
}
*/
.howto-box {
  background-image: url(../../src/home/bg3.webp);
  background-size: 100% 100%;
}
.howto-box .howto-flex {
  display: flex;
  width: 90%;
  margin: 0 auto;
  padding-top: 2%;
  padding-bottom: 2%;
  justify-content: center;
  align-items: center;
}
.howto-box .howto-flex a {
  width: 100%;
  margin: 0 auto;
}
.howto-box .howto-flex a img {
  display: block;
  margin: 0 auto;
  width: 80%;
}

.more-btn {
  text-align: center;
}
.more-btn a {
  text-decoration: none;
}
.more-btn a span {
  background-color: #f7931e;
  color: white;
  padding: 1% 7% 1% 7%;
}

/**********************************
infograph
***********************************/
.graph-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5%;
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-bottom: 1%;
}
.graph-title .graph-t1 {
  flex: 45%;
}
.graph-title .graph-t1 h3 {
  font-size: 2.2vw;
  margin: 0;
  color: #f7931e;
  display: flex;
  align-items: center;
  /* 垂直中心 */
  justify-content: right;
  padding-right: 2%;
  /* 水平中心 */
}
.graph-title .graph-t1 h3:before,
.graph-title .graph-t1 h3:after {
  border-top: 3px solid #f7931e;
  content: "";
  width: 2em;
  /* 線の長さ */
}
.graph-title .graph-t1 h3:before {
  margin-right: 1em;
  /* 文字の右隣 */
}
.graph-title .graph-t1 h3:after {
  margin-left: 1em;
  /* 文字の左隣 */
}
.graph-title .graph-t2 {
  flex: 55%;
  font-size: 5vw;
  color: #fbb03b;
}
.graph-title .graph-t2 h4 {
  margin: 0;
  margin-left: 5%;
  letter-spacing: 0.05em;
}

.graph-box {
  display: grid;
  width: 90%;
  margin: 0 auto;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(17, 1fr);
}
.graph-box a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: white;
  font-family: "corporate-logo-ver2", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.graph-box a:hover {
  transform: scale(1, 1);
}
.graph-box .graph-card:hover {
  transform: scale(1.02, 1.02);
}
.graph-box .graph1 {
  grid-column: 1/10;
  grid-row: 1/5;
  background-color: #009245;
  margin: 2.5%;
}
.graph-box .graph1 img {
  width: 80%;
}
.graph-box .graph2 {
  grid-column: 10/17;
  grid-row: 1/7;
  background-color: #f15a24;
  margin: 2.5%;
}
.graph-box .graph3 {
  grid-column: 17/21;
  grid-row: 1/12;
  background-color: #fcee21;
  margin: 2.5%;
}
.graph-box .graph4 {
  grid-column: 1/10;
  grid-row: 5/8;
  background-color: #fcee21;
  margin: 2.5%;
}
.graph-box .graph5 {
  align-self: center;
  grid-column: 10/17;
  grid-row: 7/12;
  margin: 2.5%;
  background-image: url(../../src/home/bg5.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.graph-box .graph6 {
  grid-column: 1/10;
  grid-row: 8/12;
  background-color: #f15a24;
  margin: 2.5%;
}
.graph-box .graph7 {
  grid-column: 1/21;
  grid-row: 12/14;
  background-color: #009245;
  margin: 0.5% 0.7% 0.5% 0.7%;
}
.graph-box .graph8 {
  grid-column: 1/13;
  grid-row: 14/17;
  margin: 1.5% 1.2% 1% 1.2%;
  background-image: url(../../src/home/bg6.webp);
  background-size: 100% 100%;
}
.graph-box .graph9 {
  grid-column: 13/21;
  grid-row: 14/17;
  margin-top: 5%;
}
.graph-box .graph9 .fb3d-thumbnail-lightbox-mode {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.graph-box .graph9 .fb3d-thumbnail-lightbox-mode .book-thumbnail {
  width: 35%;
  margin: 0 auto;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4), -1px -1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 5%;
  position: relative;
}
.graph-box .graph9 .fb3d-thumbnail-lightbox-mode::after {
  font-size: max(10px, 1vw);
  content: "▲▲デジタルパンフレットはこちら▲▲";
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #006837;
  color: white;
  padding: 1% 2.5%;
  height: 2em;
  border-radius: 0.5em;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), -0.5px -0.5px 1px rgba(0, 0, 0, 0.2);
}

.update {
  margin-top: 20%;
  font-size: 1vw;
  white-space: nowrap;
}

.update2 {
  margin-top: 5%;
  font-size: 1vw;
  white-space: nowrap;
  padding-right: 6%;
}

.update3 {
  margin-top: 20%;
  font-size: 1vw;
  white-space: nowrap;
  color: #009245;
}

.update4 {
  margin-top: 10%;
  font-size: 1vw;
  white-space: nowrap;
  color: #009245;
  margin-left: -20%;
}

.update5 {
  margin-top: 10%;
  font-size: 1vw;
  white-space: nowrap;
  margin-left: -25%;
}

.update6 {
  margin-top: 20%;
  font-size: 1vw;
  white-space: nowrap;
  margin-left: -35%;
}

.update7 {
  margin-top: 10%;
  font-size: 1vw;
  white-space: nowrap;
  margin-left: -25%;
}

.update8 {
  margin-top: 10%;
  font-size: 1vw;
  white-space: nowrap;
  margin-left: -50%;
  color: #009245;
}

.graph1-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  padding: 3%;
  place-content: center;
  place-items: center;
  margin-top: 6%;
}
.graph1-box .graph1-b1 {
  grid-column: 1/2;
  grid-row: 1/2;
  white-space: nowrap;
  width: 50%;
}
.graph1-box .graph1-b1 span {
  background-color: #fcee21;
  color: #f15a24;
  padding: 15% 30% 15% 30%;
  font-size: 1.7vw;
  margin-left: -20%;
}
.graph1-box .graph1-b2 {
  grid-column: 2/5;
  grid-row: 1/2;
  font-size: 2.7vw;
}
.graph1-box .graph1-b2 .new-a {
  text-align: right;
  font-size: 1.2vw;
  margin-top: 2%;
}
.graph1-box .graph1-b3 {
  grid-column: 1/3;
  grid-row: 2/4;
  padding-top: 10%;
}
.graph1-box .graph1-b3 img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.graph1-box .graph1-b4 {
  grid-column: 3/4;
  grid-row: 2/4;
}
.graph1-box .graph1-b4 img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.graph1-box .graph1-b5 {
  grid-column: 4/5;
  grid-row: 2/4;
  font-size: 1.2vw;
  margin-top: 50%;
  line-height: 150%;
  text-align: right;
}
.graph1-box .graph1-b6 {
  grid-column: 1/4;
  grid-row: 4/6;
  font-size: 1.3vw;
}
.graph1-box .graph1-b7 {
  grid-column: 4/5;
  grid-row: 5/6;
}
.graph1-box .graph-btn span {
  width: 100%;
  background-color: #fcee21;
  color: #f15a24;
  font-size: 1vw;
  padding: 7% 10% 7% 10%;
  border-radius: 5px;
  margin: 0;
  white-space: nowrap;
}

.graph2-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  padding: 3%;
  place-content: center;
  place-items: center;
}
.graph2-box .graph2-b1 {
  grid-column: 1/5;
  grid-row: 1/2;
  white-space: nowrap;
  align-self: end;
}
.graph2-box .graph2-b1 span {
  margin-top: 5%;
  background-color: #fcee21;
  color: #009245;
  padding: 5% 10% 5% 10%;
  font-size: 1.7vw;
  margin-left: -10%;
}
.graph2-box .graph2-b1 h5 {
  font-size: 3.5vw;
  margin: 0;
  text-align: center;
  padding-top: 15%;
  padding-bottom: 5%;
}
.graph2-box .graph2-b2 {
  grid-column: 1/3;
  grid-row: 2/3;
}
.graph2-box .graph2-b2 img {
  width: 70%;
  display: block;
  margin-left: auto;
}
.graph2-box .graph2-b3 {
  grid-column: 3/5;
  grid-row: 2/3;
}
.graph2-box .graph2-b3 img {
  padding-left: 10%;
  width: 60%;
  display: block;
  margin-right: auto;
}
.graph2-box .graph2-b3 .name-box {
  text-align: right;
  padding-right: 10%;
  font-size: 1.2vw;
  line-height: 150%;
}
.graph2-box .graph2-b4 {
  grid-column: 1/5;
  grid-row: 3/4;
  align-self: start;
}
.graph2-box .graph2-b4 p {
  padding-top: 10%;
  font-size: 1.5vw;
  padding-left: 7%;
  padding-right: 7%;
}
.graph2-box .graph2-b4 span {
  width: 100%;
  background-color: #fcee21;
  color: #009245;
  font-size: 1vw;
  padding: 1% 2.5% 1% 2.5%;
  border-radius: 5px;
  margin: 0;
  white-space: nowrap;
  margin-right: 10%;
}
.graph2-box .graph2-b4 .graph-btn {
  display: block;
  text-align: right;
}

.graph3-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(11, 1fr);
  padding: 3%;
  place-content: center;
  place-items: center;
  /*
      .graph3-b3 {
          grid-column: 1/4;
          grid-row: 2/4;

          h5 {
              font-size: 3.5vw;
              margin: 0;
              text-align: center;
              color: $green;

          }
      }
  */
}
.graph3-box .graph3-b1 {
  grid-column: 1/2;
  grid-row: 1/2;
  width: 50%;
}
.graph3-box .graph3-b1 span {
  background-color: #f15a24;
  color: white;
  padding: 15% 30% 15% 30%;
  font-size: 1.7vw;
  white-space: nowrap;
  margin-left: 20%;
}
.graph3-box .graph3-b2 {
  grid-column: 1/4;
  grid-row: 2/5;
  width: 90%;
}
.graph3-box .graph3-b2 img {
  width: 80%;
  display: block;
  margin: 0 auto;
  padding-top: 10%;
}
.graph3-box .graph3-b2 h5 {
  font-size: 2.5vw;
  margin: 0;
  text-align: center;
  color: #009245;
  padding-bottom: 10%;
}
.graph3-box .graph3-b2 h5 span {
  font-size: 4.5vw;
}
.graph3-box .graph3-b4 {
  grid-column: 1/4;
  grid-row: 5/9;
  writing-mode: vertical-rl;
}
.graph3-box .graph3-b4 p {
  font-size: 1.5vw;
  color: #009245;
  line-height: 200%;
}
.graph3-box .graph3-b5 {
  grid-column: 1/3;
  grid-row: 9/11;
  width: 90%;
}
.graph3-box .graph3-b5 img {
  margin-left: 4%;
  width: 80%;
  margin-bottom: 10%;
}
.graph3-box .graph3-b6 {
  grid-column: 3/4;
  grid-row: 9/11;
}
.graph3-box .graph3-b6 h5 {
  line-height: 150%;
  font-size: 1.2vw;
  color: #f15a24;
  text-align: left;
  margin-left: -35%;
  white-space: nowrap;
}
.graph3-box .graph3-b7 {
  align-self: start;
  grid-column: 1/4;
  grid-row: 11/12;
}
.graph3-box .graph3-b7 span {
  width: 100%;
  background-color: #f15a24;
  color: white;
  font-size: 1vw;
  padding: 5% 12% 5% 13%;
  border-radius: 5px;
  margin: 0;
  white-space: nowrap;
  margin-right: 10%;
  margin-left: 20%;
}

.graph4-box {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  padding: 3%;
  place-content: center;
  place-items: center;
}
.graph4-box .graph4-b1 {
  grid-column: 1/2;
  grid-row: 1/2;
  align-self: start;
  padding-top: 20%;
  width: 50%;
}
.graph4-box .graph4-b1 span {
  background-color: #f15a24;
  color: white;
  padding: 15% 40% 15% 40%;
  font-size: 1.7vw;
  white-space: nowrap;
  margin-left: -40%;
}
.graph4-box .graph4-b2 {
  grid-column: 2/6;
  grid-row: 1/2;
  padding-top: 5%;
}
.graph4-box .graph4-b2 p {
  font-size: 1.5vw;
  color: #009245;
  margin-left: 2%;
  padding-right: 12%;
}
.graph4-box .graph4-b3 {
  grid-column: 1/2;
  grid-row: 2/3;
}
.graph4-box .graph4-b4 {
  grid-column: 2/4;
  grid-row: 2/3;
  font-size: 2.7vw;
  line-height: 130%;
  color: #009245;
}
.graph4-box .graph4-b5 {
  grid-column: 4/5;
  grid-row: 2/3;
  margin-left: -15%;
}
.graph4-box .graph4-b5 img {
  width: 90%;
}
.graph4-box .graph4-b6 {
  grid-column: 5/6;
  grid-row: 2/3;
}
.graph4-box .graph4-b6 h5 {
  font-size: 1.2vw;
  white-space: nowrap;
  line-height: 150%;
  color: #009245;
}
.graph4-box .graph4-b6 span {
  width: 100%;
  background-color: #f15a24;
  color: white;
  font-size: 1vw;
  padding: 4% 7% 4% 7%;
  border-radius: 5px;
  margin: 0;
  white-space: nowrap;
  margin-left: -10%;
}

.graph5-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 3%;
  place-content: center;
  place-items: center;
  padding-top: 10%;
}
.graph5-box .graph5-b1 {
  grid-column: 2/4;
  grid-row: 1/2;
}
.graph5-box .graph5-b1 span {
  white-space: nowrap;
  background-color: #fcee21;
  color: #f15a24;
  padding: 15% 30% 15% 30%;
  font-size: 1.7vw;
  text-align: center;
  margin-left: -30%;
}
.graph5-box .graph5-b2 {
  grid-column: 1/2;
  grid-row: 1/2;
  align-self: end;
}
.graph5-box .graph5-b2 img {
  display: block;
  margin-left: auto;
  width: 70%;
  margin-top: 20%;
  margin-right: -20%;
}
.graph5-box .graph5-b3 {
  grid-column: 2/5;
  grid-row: 1/2;
  font-size: 5vw;
}
.graph5-box .graph5-b3 h5 {
  margin: 0;
  margin-top: 10%;
  margin-left: -10%;
  margin-bottom: 5%;
}
.graph5-box .graph5-b3 span {
  white-space: nowrap;
  background-color: #fcee21;
  color: #f15a24;
  padding: 6% 8% 6% 8%;
  font-size: 1.7vw;
  text-align: left;
  margin-bottom: 5%;
}
.graph5-box .graph5-b4 {
  grid-column: 1/5;
  grid-row: 2/3;
}
.graph5-box .graph5-b4 p {
  width: 90%;
  font-size: 1.4vw;
  margin: 0 auto;
}
.graph5-box .graph5-b5 {
  grid-column: 2/3;
  grid-row: 3/4;
  align-self: start;
  margin-top: -20%;
}
.graph5-box .graph5-b6 {
  grid-column: 3/4;
  grid-row: 3/4;
  align-self: start;
}
.graph5-box .graph5-b6 h5 {
  margin: 0;
  font-size: 1.2vw;
  margin-bottom: 10%;
  line-height: 150%;
  margin-top: -15%;
}
@media screen and (max-width: 800px) {
  .graph5-box .graph5-b6 h5 {
    margin-bottom: 0%;
  }
}
.graph5-box .graph5-b6 span {
  width: 100%;
  background-color: #fcee21;
  color: #f15a24;
  font-size: 1vw;
  padding: 5% 8% 5% 8%;
  border-radius: 5px;
  margin: 0;
  white-space: nowrap;
}

.graph6-box {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  padding: 3%;
  place-content: center;
  place-items: center;
  margin-top: 5%;
}
.graph6-box .graph6-b1 {
  grid-column: 1/4;
  grid-row: 1/2;
  align-self: start;
}
.graph6-box .graph6-b1 span {
  white-space: nowrap;
  background-color: #fcee21;
  color: #009245;
  padding: 7% 14% 7% 14%;
  font-size: 1.7vw;
  text-align: center;
  margin-left: -40%;
  margin-top: 15%;
}
.graph6-box .graph6-b2 {
  grid-column: 2/5;
  grid-row: 1/2;
}
.graph6-box .graph6-b2 img {
  width: 60%;
  margin-bottom: -20%;
}
.graph6-box .graph6-b3 {
  grid-column: 5/7;
  grid-row: 1/2;
  font-size: 3.5vw;
  margin-left: -20%;
  white-space: nowrap;
  line-height: 130%;
}
.graph6-box .graph6-b4 {
  grid-column: 1/6;
  grid-row: 2/3;
}
.graph6-box .graph6-b4 p {
  padding-right: 3%;
  font-size: 1.1vw;
  margin: 0;
}
.graph6-box .graph6-b4 span {
  background-color: #fcee21;
  color: #009245;
  font-size: 1vw;
  padding: 3% 5% 3% 5%;
  border-radius: 5px;
  margin: 0;
  white-space: nowrap;
}
.graph6-box .graph6-b4 .graph-btn {
  display: block;
  margin-left: 70%;
}

.graph6-b5 {
  font-size: 1.2vw;
  white-space: nowrap;
  line-height: 150%;
}

.graph7-box {
  display: flex;
  flex-wrap: nowrap;
  padding: 3%;
  place-content: center;
  place-items: center;
}
.graph7-box .graph7-b1 {
  flex: 20%;
  align-self: start;
}
.graph7-box .graph7-b1 span {
  white-space: nowrap;
  background-color: #fcee21;
  color: #f15a24;
  padding: 2% 5% 2% 5%;
  font-size: 1.7vw;
  text-align: center;
}
.graph7-box .graph7-b1 h6 {
  font-size: 4vw;
  margin: 0;
  margin-top: 10%;
}
.graph7-box .graph7-b2 {
  flex: 20%;
}
.graph7-box .graph7-b3 {
  flex: 35%;
}
.graph7-box .graph7-b3 p {
  padding-left: 3%;
  margin: 0;
  font-size: 1.4vw;
}
.graph7-box .graph7-b4 {
  flex: 8%;
}
.graph7-box .graph7-b5 {
  flex: 7%;
}
.graph7-box .graph7-b5 h5 {
  line-height: 150%;
  text-align: right;
  margin-right: 5%;
  font-size: 1.2vw;
  white-space: nowrap;
}
.graph7-box .graph7-b5 span {
  width: 100%;
  background-color: #f15a24;
  color: white;
  font-size: 1vw;
  padding: 4% 7% 4% 7%;
  border-radius: 5px;
  margin: 0;
  white-space: nowrap;
}

.graph8-box {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(1, 1fr);
  padding: 3%;
  place-content: center;
  place-items: center;
  margin-top: 5%;
}
.graph8-box .graph8-b1 {
  grid-column: 4/8;
  grid-row: 1/2;
}
.graph8-box .graph8-b2 {
  grid-column: 1/3;
  grid-row: 1/2;
}
.graph8-box .graph8-b2 img {
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: 5%;
}
.graph8-box .graph8-b3 {
  grid-column: 3/9;
  grid-row: 1/2;
}
.graph8-box .graph8-b3 .span8 {
  background-color: #f15a24;
  color: white;
  padding: 3% 6% 3% 6%;
  font-size: 1.7vw;
  text-align: center;
  white-space: nowrap;
  margin-left: 10%;
}
.graph8-box .graph8-b3 p {
  color: #009245;
  font-size: 1.4vw;
  margin-bottom: 0;
  margin-top: 10%;
}
.graph8-box .graph8-b3 .graph-btn {
  text-align: right;
}
.graph8-box .graph8-b3 .graph-btn span {
  width: 100%;
  background-color: #f15a24;
  color: white;
  font-size: 1vw;
  padding: 1.5% 3% 1.5% 3%;
  border-radius: 5px;
  margin: 0;
  white-space: nowrap;
}
.graph8-box .graph8-b4 {
  grid-column: 9/11;
  grid-row: 1/2;
}
.graph8-box .graph8-b4 img {
  width: 80%;
}
.graph8-box .graph8-b4 h5 {
  line-height: 150%;
  font-size: 1.2vw;
  color: #009245;
  text-align: right;
  margin: 0;
  margin-right: 20%;
  margin-top: -5%;
  padding-bottom: 10%;
}
.graph8-box .graph8-b4 .day {
  font-size: 4vw;
  margin-left: -50%;
  color: #f15a24;
  padding-bottom: 5%;
}

.graph9-box {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(2, 1fr);
  padding: 3%;
  place-content: center;
  place-items: center;
  padding-top: 10%;
}
.graph9-box .graph9-b1 {
  grid-column: 1/6;
  grid-row: 1/2;
}
.graph9-box .graph9-b1 span {
  margin-top: -3%;
  margin-bottom: 3%;
  margin-left: 5%;
  white-space: nowrap;
  background-color: #fcee21;
  color: #009245;
  padding: 2% 5% 2% 5%;
  font-size: 1.7vw;
  text-align: center;
}
.graph9-box .graph9-b1 .graph9-flex {
  display: flex;
  align-items: center;
  margin-top: 3%;
}
.graph9-box .graph9-b1 .graph9-flex .graph9-b3 {
  flex: 30%;
}
.graph9-box .graph9-b1 .graph9-flex .graph9-b3 img {
  width: 70%;
  margin-left: auto;
  margin-top: 5%;
}
.graph9-box .graph9-b1 .graph9-flex .graph9-b4 {
  flex: 70%;
  font-size: 3.5vw;
}
.graph9-box .graph9-b2 {
  grid-column: 6/8;
  grid-row: 1/2;
  margin-top: -10%;
}
.graph9-box .graph9-b2 img {
  width: 70%;
}
.graph9-box .graph9-b2 h5 {
  line-height: 150%;
  margin: 0;
  font-size: 1.2vw;
}
.graph9-box .graph9-b5 {
  grid-column: 1/8;
  grid-row: 2/3;
}
.graph9-box .graph9-b5 p {
  font-size: 1.5vw;
  margin: 0;
}
.graph9-box .graph9-b5 .graph-btn {
  text-align: right;
}
.graph9-box .graph9-b5 .graph-btn span {
  width: 100%;
  background-color: #fcee21;
  color: #009245;
  font-size: 1vw;
  padding: 1% 2% 1% 2%;
  border-radius: 5px;
  margin: 0;
  white-space: nowrap;
}

.graph-time {
  text-align: right;
  font-size: 1.2vw;
  margin-top: -5%;
  margin-right: 5%;
  margin-bottom: 10%;
}

/**********************************
レスポンシブ
***********************************/
.pc {
  display: block;
}

.sp {
  display: none;
}

@media screen and (max-width: 1000px) {
  .news-title {
    top: -10%;
  }
  .graph-card {
    align-self: center;
  }
}
@media screen and (max-width: 900px) {
  /**********************************
  header
  ***********************************/
  .head-box {
    width: 100%;
    position: fixed;
    align-items: center;
    height: 50px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.483);
    z-index: 900;
  }
  .head-box .h1-box .logo {
    width: 35px;
    margin: 0%;
    margin-left: 5px;
  }
  .head-box .h2-box .menu-flex {
    align-items: center;
    padding-right: 40px;
  }
  .head-box .h2-box .menu-flex .menu {
    width: auto;
  }
  .head-box .h2-box .menu-flex img {
    height: 30px;
    width: 30px;
    margin-left: 0;
  }
  .head-box .h2-box .menu-flex .entry {
    padding: 0;
    width: 100px;
    height: 25px;
    text-align: center;
    font-size: 18px;
    padding-top: 9px;
    border-radius: 5px;
    margin-left: -20%;
  }
  .head-box .h2-box .menu-flex .menu-entry {
    flex: 0;
  }
  .head-box .h2-box {
    margin-bottom: 0;
  }
  .head-box .menu.pc {
    display: none;
  }
}
@media screen and (max-width: 800px) {
  .news-title {
    top: -15%;
  }
  .news-box .swiper-slide {
    padding-bottom: 7%;
  }
  /**********************************
  footer
  ***********************************/
  .footer .footer-grid {
    display: none;
  }
  .footer-sp {
    display: block;
    background-color: #8cc63f;
  }
  .footer-sp .footer-flex {
    display: flex;
    width: 40%;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    padding-top: 5%;
    padding-bottom: 5%;
    opacity: 0;
    pointer-events: none;
  }
  .footer-sp .footer-flex .menu-entry {
    flex: 65%;
  }
  .footer-sp .footer-flex .menu-entry a {
    text-decoration: none;
  }
  .footer-sp .footer-flex .menu-entry .entry {
    background-color: white;
    color: #006837;
    font-family: "corporate-logo-ver2", sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 4% 2% 4% 2%;
    margin: 0% 10% 5% 0%;
    text-align: center;
    font-size: 4vw;
    border-radius: 5px;
  }
  .footer-sp .footer-flex .insta {
    flex: 35%;
    display: flex;
    align-items: center;
  }
  .footer-sp .footer-flex .insta img {
    margin-left: 10%;
    width: 45%;
    border-radius: 50%;
  }
  .footer-sp .place {
    font-size: 13px;
    text-align: center;
    padding-bottom: 3%;
    color: #006837;
  }
  .graph8-box .graph8-b4 h5 {
    margin-right: 10%;
  }
}
@media screen and (max-width: 700px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .top-space {
    margin-top: 50px;
  }
  .top {
    width: 100%;
    overflow-x: hidden;
  }
  .news-title {
    top: -15%;
  }
  .news-title .h1 span {
    font-size: 15px;
  }
  .news-box .swiper-pagination-bullets {
    bottom: 0% !important;
  }
  .news-box .swiper-button-next,
  .news-box .swiper-button-prev {
    margin-top: -5%;
  }
  .box1 .border1 {
    width: 90%;
  }
  ul.news li {
    font-size: 15px;
    padding-bottom: 0;
  }
  .box1 ul.news li {
    font-size: 14px;
  }
  /**********************************
  movie
  ***********************************/
  .mission-box.movie-box .mission-title {
    top: 0%;
    right: 0%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
  }
  .mission-box.movie-box .mission-title h3 {
    font-size: 35px;
  }
  .mission-box.movie-box .mission-title h4 {
    font-size: 19px;
  }
  .mission-box.movie-box .mission-flex {
    margin-top: 0 !important;
    padding-top: 50px;
    min-width: auto;
    width: 500px;
    max-width: 90%;
  }
  .mission-box.movie-box .mission-bg {
    width: 200%;
  }
  /**********************************
  insta
  ***********************************/
  .insta-box h2 {
    font-size: 19px;
    padding-top: 4%;
  }
  .insta-box .more-btn {
    padding-top: 5%;
    padding-bottom: 5%;
  }
  .insta-box .more-btn a span {
    font-size: 15px;
  }
  /**********************************
  title
  ***********************************/
  .top-sub-title {
    position: static;
    width: 100%;
    text-align: center;
    font-family: "corporate-logo-ver2", sans-serif;
    font-weight: 700;
    font-style: normal;
    margin-top: 5%;
    margin-bottom: 2%;
  }
  .top-sub-title h3 {
    font-size: 35px;
    margin: 0;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fbb03b;
    margin-top: 8%;
  }
  .top-sub-title h4 {
    font-size: 18px;
    margin: 0;
    color: #f7931e;
    display: flex;
    align-items: center;
    /* 垂直中心 */
    justify-content: center;
    /* 水平中心 */
  }
  .top-sub-title h4:before,
  .top-sub-title h4:after {
    border-top: 3px solid #f7931e;
    content: "";
    width: 2em;
    /* 線の長さ */
  }
  .top-sub-title h4:before {
    margin-right: 1em;
    /* 文字の右隣 */
  }
  .top-sub-title h4:after {
    margin-left: 1em;
    /* 文字の左隣 */
  }
  .top-sub-title.green h3 {
    color: #8cc63f;
  }
  .top-sub-title.green h4 {
    color: #009245;
  }
  .top-sub-title.green h4:before,
  .top-sub-title.green h4:after {
    border-top: 3px solid #009245;
  }
  /**********************************
  occupation
  ***********************************/
  .occ-box {
    background-size: cover;
  }
  .occ-box .coming {
    width: 80%;
  }
  /**********************************
  how to
  ***********************************/
  .howto-box {
    background-size: cover;
  }
  .howto-box .coming {
    width: 80%;
  }
  .graph-time {
    font-size: 10px;
  }
  .graph-time {
    font-size: 10px;
  }
  section.book {
    width: 70%;
    margin: 0 auto;
    margin-bottom: 100px;
  }
  .fb3d-thumbnail-lightbox-mode {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .fb3d-thumbnail-lightbox-mode .book-thumbnail {
    width: 100%;
    margin: 0 auto;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4), -1px -1px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 5%;
    position: relative;
  }
  .fb3d-thumbnail-lightbox-mode::after {
    font-size: 12px;
    content: "▲▲デジタルパンフレットはこちら▲▲";
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #006837;
    color: white;
    padding: 1% 2.5%;
    height: 2em;
    border-radius: 0.5em;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), -0.5px -0.5px 1px rgba(0, 0, 0, 0.2);
  }
  .occ-box .occ-flex .training1 {
    width: 80%;
    margin: 5% auto;
  }
  .occ-box .occ-training-flex {
    flex-direction: column;
    width: 98%;
    padding: 5% 0;
  }
  .occ-box .occ-training-flex a {
    width: 90%;
    flex: 90%;
    margin: 0px 5%;
  }
}
@media screen and (max-width: 600px) {
  .news-title {
    top: -16%;
  }
}
@media screen and (max-width: 500px) {
  .news-title {
    top: -20%;
  }
  .news-box .swiper-slide {
    font-size: 18px;
    padding-top: 8%;
    padding-bottom: 8%;
  }
  .news-box .swiper-button-next,
  .news-box .swiper-button-prev {
    margin-top: -7.5%;
  }
  .to-top-img {
    width: 10%;
  }
  .to-top {
    right: 10%;
    font-size: 10px;
  }
  .copy {
    font-size: 10px;
  }
}
@media screen and (max-width: 400px) {
  .news-title {
    top: -23%;
  }
}
#vdbanner {
  display: none !important;
}/*# sourceMappingURL=index.css.map */