@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap");
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:after, blockquote:before, q:after, q:before {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

ins {
  text-decoration: none;
}

mark {
  font-style: italic;
  font-weight: 700;
}

del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

img {
  vertical-align: bottom !important;
  image-rendering: auto !important;
}

.forpc, .nosp {
  display: inline-block;
}

.nopc, .forsp {
  display: none;
}

@media (max-width: 900px) {
  .nopc, .forsp {
    display: inline-block;
  }

  .forpc, .nosp {
    display: none;
  }
}
.mgt0 {
  margin-top: 0 !important;
}

.mgt5 {
  margin-top: 5px !important;
}

.mgt10 {
  margin-top: 10px !important;
}

.mgt20 {
  margin-top: 20px !important;
}

.mgt30 {
  margin-top: 30px !important;
}

.mgt40 {
  margin-top: 40px !important;
}

.mgt50 {
  margin-top: 50px !important;
}

.mgt60 {
  margin-top: 60px !important;
}

.mgt80 {
  margin-top: 80px !important;
}

.mgt100 {
  margin-top: 100px !important;
}

.mgb0 {
  margin-bottom: 0 !important;
}

.mgb5 {
  margin-bottom: 5px !important;
}

.mgb10 {
  margin-bottom: 10px !important;
}

.mgb15 {
  margin-bottom: 15px !important;
}

.mgb20 {
  margin-bottom: 20px !important;
}

.mgb30 {
  margin-bottom: 30px !important;
}

.mgb40 {
  margin-bottom: 40px !important;
}

.mgb50 {
  margin-bottom: 50px !important;
}

.mgb60 {
  margin-bottom: 60px !important;
}

.mgb80 {
  margin-bottom: 80px !important;
}

.mgb100 {
  margin-bottom: 100px !important;
}

.pdt0 {
  padding-top: 0 !important;
}

.pdt10 {
  padding-top: 10px !important;
}

.pdt20 {
  padding-top: 20px !important;
}

.pdt30 {
  padding-top: 30px !important;
}

.pdt40 {
  padding-top: 40px !important;
}

.pdt50 {
  padding-top: 50px !important;
}

.pdt60 {
  padding-top: 60px !important;
}

.pdb0 {
  padding-bottom: 0 !important;
}

.pdb10 {
  padding-bottom: 10px !important;
}

.pdb15 {
  padding-bottom: 15px !important;
}

.pdb20 {
  padding-bottom: 20px !important;
}

.pdb30 {
  padding-bottom: 30px !important;
}

.pdb40 {
  padding-bottom: 40px !important;
}

.pdb50 {
  padding-bottom: 50px !important;
}

.pdb60 {
  padding-bottom: 60px !important;
}

.pdb100 {
  padding-bottom: 100px !important;
}

.pd10 {
  padding: 10px;
}

.pd20 {
  padding: 20px !important;
}

.pd30 {
  padding: 30px;
}

.pdl10 {
  padding-left: 10px !important;
}

.pdlr3 {
  padding-right: 3%;
  padding-left: 3%;
}

.pdlr5 {
  padding-right: 5%;
  padding-left: 5%;
}

.pdl0 {
  padding-left: 0 !important;
}

.pdr0 {
  padding-right: 0 !important;
}

.mgl0 {
  margin-left: 0 !important;
}

.mgr0 {
  margin-right: 0 !important;
}

.kchBlock {
  font-size: 14px;
  line-height: 1;
  color: #434343;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  position: relative;
  scroll-behavior: smooth;
}

#headerBlock {
  background-color: #009944;
  width: 100%;
  height: 150px;
  position: absolute;
  z-index: 102;
  top: 0;
}

#headerBlock.show {
  display: none;
}

#headerContent {
  display: grid;
  grid-template-columns: 250px 50px 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "gnavtitle gnavicon gnavi";
  align-items: flex-end;
  width: 86%;
  max-width: 1000px;
  margin: auto;
  padding-top: 30px;
}

@media (max-width: 1040px) {
  #headerContent {
    grid-template-columns: 220px 40px 1fr;
    width: 92%;
  }
}
@media (max-width: 900px) {
  #headerBlock {
    height: 90px;
    z-index: 101;
  }

  #headerBlock.active {
    position: fixed;
  }

  #headerContent {
    width: 86%;
    grid-template-columns: 140px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "gnavtitle gnavicon";
    padding-top: 20px;
  }
}
#gNavTitle {
  grid-area: gnavtitle;
}

#gNavTitle h1 {
  color: #fefefe;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding-bottom: 10px;
}

#gNavTitle img {
  width: 220px;
  height: auto;
}

@media (max-width: 1040px) {
  #gNavTitle img {
    width: 200px;
  }
}
@media (max-width: 900px) {
  #gNavTitle {
    position: relative;
    background-color: #009944;
    z-index: 101;
  }

  #gNavTitle h1 {
    font-size: 11px;
    letter-spacing: 0;
  }

  #gNavTitle img {
    width: 126px;
  }
}
#gNavIcon {
  grid-area: gnavicon;
}

#gNavIcon img {
  width: 46px;
  height: auto;
  padding-bottom: 2px;
}

@media (max-width: 1040px) {
  #gNavIcon {
    position: relative;
    z-index: 100;
  }

  #gNavIcon img {
    width: 36px;
  }
}
#spBg {
  display: none;
}

@media (max-width: 900px) {
  #spBg {
    display: block;
    position: absolute;
    background-color: #009944;
    width: 100%;
    height: 90px;
    top: 0;
    left: 0;
    z-index: 100;
  }
}
#gNav {
  grid-area: gnavi;
  display: flex;
  flex-direction: column;
  top: 90px;
}

#firstNav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 8px;
  margin-bottom: 14px;
}

#firstNav a {
  font-size: 13px;
  color: #fefefe;
  letter-spacing: 1px;
  display: inline-block;
  position: relative;
}

#firstNav a.firsttimeMenu::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 23px;
  background: url("../image/icon16.png");
  background-size: contain;
  background-repeat: no-repeat;
  left: -23px;
  top: -3px;
}

#firstNav a::after {
  width: 100%;
  height: 1px;
  bottom: -5px;
  left: 0;
  background-color: #fefefe;
  content: "";
  position: absolute;
  transform: scale(0, 1);
  transition: all 0.6s ease-in-out;
  transform-origin: left bottom;
}

#firstNav a:hover::after {
  transform: scale(1, 1);
}

#firstNav a.navLink {
  color: #434343;
  border: solid 1px #fefefe;
  background: linear-gradient(to right, #009944 50%, #fefefe 50%);
  background-size: 200% 100%;
  background-position: top right;
  letter-spacing: 2px;
  font-weight: 600;
  display: inline-block;
  padding: 8px 44px 10px;
  border-radius: 20px;
  transition: all 0.6s ease-in-out;
  box-sizing: border-box;
}

#firstNav a.navLink:hover {
  color: #fefefe;
  background-position: left top;
}

#firstNav a.navLink:hover::after {
  transform: scale(0, 1);
}

#firstNav li > ul {
  display: none;
}

#secondTitle {
  display: none;
}

#secondNav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#secondNav > li {
  margin-left: 25px;
}

#secondNav a {
  font-size: 16px;
  color: #fefefe;
  letter-spacing: 0.5px;
}

#secondNav a > img {
  width: 24px;
  height: auto;
}

#secondNav > li > a:hover {
  cursor: pointer;
}

#thirdBanner {
  display: none;
}

@media (max-width: 900px) {
  #gNav {
    width: 100%;
    height: calc(100vh - 90px);
    background-color: #fefefe;
    position: fixed;
    top: 90px;
    left: 0;
    transform: translateX(100%);
    transition: all 0.6s ease-in-out;
    z-index: 11;
  }

  #gNav > div {
    height: 100%;
    overflow-y: scroll;
  }

  #gNav.active {
    transform: translateX(0);
  }

  #firstNav {
    flex-direction: column;
    order: 1;
    gap: 0;
    border-bottom: solid 1px #ddd;
    width: 86%;
    height: auto;
    margin: 30px auto;
  }

  #firstNav li {
    border-top: solid 1px #ddd;
    width: 100%;
    position: relative;
  }

  #firstNav li::after {
    content: "";
    background-color: #009944;
    width: 15px;
    height: 15px;
    border-radius: 8px;
    position: absolute;
    top: 18px;
    right: 1em;
  }

  #firstNav li.dLink::after {
    display: none;
  }

  #firstNav li:last-child {
    border-bottom: solid 1px #ddd;
  }

  #firstNav li a {
    color: #009944;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    line-height: 1;
    display: inline-block;
    width: 100%;
    padding: 17px 0 18px;
    position: relative;
  }

  #firstNav li a::before {
    content: "";
    background-color: #fefefe;
    width: 8px;
    height: 1px;
    position: absolute;
    top: 25px;
    right: calc(1em + 2.2px);
    z-index: 6;
  }

  #firstNav li a::after {
    content: "";
    background-color: #fefefe;
    width: 1px;
    height: 8px;
    position: absolute;
    top: 21.5px;
    right: calc(1em + 6px);
    z-index: 7;
    transform: scale(1, 1);
    transform-origin: center;
    left: auto;
    bottom: auto;
  }

  #firstNav li div.is-open a::after {
    transform: scale(1, 1) rotate(90deg);
  }

  #firstNav li.dLink > a::before {
    content: "";
    border-bottom: solid 1px #009944;
    border-right: solid 1px #009944;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 25px;
    right: calc(1.3em);
    transform: rotate(-45deg);
    z-index: 6;
  }

  #firstNav li.dLink > a::after {
    display: none;
  }

  #firstNav li.dLink > a.firsttimeMenu::before {
    display: none;
  }

  #firstNav li.dLink > a.firsttimeMenu::after {
    display: block;
    content: "";
    background: none;
    border-bottom: solid 1px #009944;
    border-right: solid 1px #009944;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 25px;
    right: calc(1.3em);
    transform: rotate(-45deg);
    z-index: 6;
  }

  /*
  #firstNav li > a.firsttimeMenu::before { content:""; background-color:$whiteColor; width:8px; height:1px; border-radius: 8px; position:absolute; top:25px; right:calc(1em + 2.2px); z-index: 11; left:auto; }
  #firstNav li > a.firsttimeMenu::after { content:""; background-color:$whiteColor; width:1px; height:8px; position:absolute; top:21.5px; right:calc(1em + 6px); z-index: 12; transform: scale(1,1); left:auto; bottom:auto; }
  */
  #firstNav li > ul {
    display: block;
  }

  #secondTitle {
    display: block;
    width: 86%;
    margin: 10px auto 20px;
    order: 2;
  }

  #secondTitle > p {
    font-size: 14px;
    font-weight: 700;
    position: relative;
    padding-left: 1.5em;
  }

  #secondTitle > p::before {
    content: "";
    width: 17px;
    height: 17px;
    background: url("../image/iconSearch_black.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
  }

  #secondNav {
    margin-top: 50px;
    flex-direction: column;
    order: 3;
    gap: 0;
    border-bottom: solid 1px #ddd;
    width: 86%;
    height: auto;
    margin: 0 auto;
  }

  #secondNav > li {
    border-top: solid 1px #ddd;
    width: 100%;
    margin-left: 0;
  }

  #secondNav > li::after {
    content: "";
    background-color: #009944;
    width: 15px;
    height: 15px;
    border-radius: 8px;
    position: absolute;
    top: 18px;
    right: 1em;
  }

  #secondNav > li:last-child {
    border-bottom: solid 1px #ddd;
  }

  #secondNav > li > a {
    color: #009944;
    font-size: 15px;
    font-weight: 600;
    display: inline-block;
    width: 100%;
    line-height: 1;
    padding: 17px 0 18px;
    position: relative;
  }

  #secondNav > li > a::before {
    content: "";
    background-color: #fefefe;
    width: 8px;
    height: 1px;
    position: absolute;
    top: 25px;
    right: calc(1em + 2.2px);
    z-index: 6;
    border: none;
  }

  #secondNav > li > a::after {
    content: "";
    background-color: #fefefe;
    width: 1px;
    height: 8px;
    position: absolute;
    top: 21.5px;
    right: calc(1em + 6px);
    z-index: 7;
    transform: scale(1, 1);
    left: auto;
    bottom: auto;
    border: none;
    transition: all 0.6s ease-in-out;
  }

  #secondNav > li > a.is-open::after {
    transform: scale(1, 1) rotate(90deg);
  }

  #firstNav li > div.js-ac:hover {
    cursor: pointer;
  }

  #firstNav li > div.js-ac > a {
    pointer-events: none;
  }

  #firstNav li > ul {
    transform: scale(1, 0);
    display: none;
    transform-origin: top left;
    transition: all 0.6s ease-in-out;
    padding-left: 20px;
  }

  #firstNav li > ul.is-open {
    transform: scale(1, 1);
    display: block;
  }

  #firstNav li > ul > li::after {
    display: none;
  }

  #firstNav li > ul > li a {
    color: #009944 !important;
    background-color: #fefefe;
    transition: opacity 0.3s;
    position: relative;
    font-size: 14px !important;
    font-weight: 400;
    display: inline-block;
    width: 100%;
    line-height: 1;
    padding: 14px 0 15px;
    position: relative;
  }

  #firstNav li > ul > li a::before {
    display: none;
  }

  #firstNav li > ul > li a::after {
    content: "";
    border-bottom: solid 1px #009944;
    border-right: solid 1px #009944;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 22px;
    right: calc(1.3em);
    transform: rotate(-45deg);
    z-index: 6;
  }

  #firstNav li > ul > li a:hover::after {
    transform: rotate(-45deg);
  }

  #firstNav li > ul > li:last-child {
    border-bottom: none;
  }

  #thirdBanner {
    display: block;
    width: 86%;
    margin: 30px auto 60px;
    order: 4;
  }

  #thirdBanner > a {
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.05em;
    font-weight: 600;
    display: block;
    width: 80%;
    max-width: 280px;
    margin: 10px auto 20px;
    background-color: #009944;
    color: #fefefe;
    text-align: center;
    line-height: 39px;
    height: 40px;
    border-radius: 20px;
  }
}
/* ドロップダウンメニュー */
.drop-menu {
  position: relative;
  z-index: 10;
}

.drop-menu > a {
  position: relative;
  line-height: 2.2;
}

.drop-menu > a::after {
  content: "";
  position: absolute;
  top: 5px;
  right: -12px;
  width: 6px;
  height: 6px;
  border-bottom: solid 1px #fefefe;
  border-right: solid 1px #fefefe;
  transform: rotateZ(45deg);
}

.drop-menu-list {
  top: 100%;
  left: 0;
  position: absolute;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.3s;
  width: max-content;
  z-index: 10;
  background-color: #fefefe;
  padding: 15px 30px !important;
  border: solid 2px #009944;
  border-radius: 20px;
}

.drop-menu:hover > a {
  transition: background-color 0.3s;
}

.drop-menu:hover .drop-menu-list {
  transform: scaleY(1);
  top: 32px;
}

.drop-menu-item:hover {
  opacity: 0.7;
  transition: opacity 0.3s;
}

.drop-menu-item > a {
  line-height: 2;
  color: #009944 !important;
  background-color: #fefefe;
  transition: opacity 0.3s;
  position: relative;
}

.drop-menu-item > a::before {
  content: "-";
  position: relative;
  padding-right: 3px;
}

@media (max-width: 900px) {
  .drop-menu:hover .drop-menu-list {
    transform: none;
    top: 0;
  }

  .drop-menu-list {
    top: 0;
    left: 0;
    position: relative;
    transform: none;
    transform-origin: center top;
    transition: transform 0.3s;
    width: max-content;
    z-index: 10;
    background-color: #fefefe;
    width: 100%;
    padding: 0 0 0 20px !important;
    border: none;
    transform: scale(1, 0);
    display: none;
    transform-origin: top left;
    transition: all 0.6s ease-in-out;
  }

  .drop-menu-list.is-open {
    transform: scale(1, 1);
    display: block;
  }

  .drop-menu-item {
    border-top: solid 1px #ddd;
  }

  .drop-menu-item > a {
    color: #009944 !important;
    background-color: #fefefe;
    transition: opacity 0.3s;
    position: relative;
    font-size: 14px !important;
    font-weight: 400;
    display: inline-block;
    width: 100%;
    line-height: 1;
    padding: 14px 0 15px;
    position: relative;
  }

  .drop-menu-item > a::before {
    content: "";
    position: relative;
    padding-right: 0;
  }

  .drop-menu-item > a::after {
    content: "";
    border-bottom: solid 1px #009944;
    border-right: solid 1px #009944;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 22px;
    right: calc(1.3em);
    transform: rotate(-45deg);
    z-index: 6;
  }
}
.header__hamburger {
  position: absolute;
  top: 24px;
  right: 14px;
  width: 48px;
  height: 48px;
  border: none;
  background-color: transparent;
  display: none;
  z-index: 101;
}

.header__hamburger:hover {
  cursor: pointer;
}

.header__hamburger span {
  width: 100%;
  height: 1px;
  background-color: #fefefe;
  position: relative;
  transition: ease .4s;
  display: block;
}

.header__hamburger span:nth-child(1) {
  top: 0;
}

.header__hamburger span:nth-child(2) {
  margin: 10px 0;
}

.header__hamburger span:nth-child(3) {
  top: 0;
}

.header__hamburger.active span:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}

.header__hamburger.active span:nth-child(2) {
  opacity: 0;
}

.header__hamburger.active span:nth-child(3) {
  top: -14px;
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .header__hamburger {
    display: block;
  }
}
#breadcrumbsTxt {
  width: 86%;
  max-width: 1020px;
  margin: auto;
  margin-top: 170px;
}

#breadcrumbsTxt > p a {
  font-size: 13px;
  letter-spacing: 1px;
  color: #434343;
  padding: 0 10px;
}

#breadcrumbsTxt > p a:hover {
  color: #009944;
}

#breadcrumbsTxt > p a:first-child {
  padding-left: 0;
}

@media (max-width: 900px) {
  #breadcrumbsTxt {
    margin-top: 100px;
  }

  #breadcrumbsTxt > p {
    font-size: 10px;
  }

  #breadcrumbsTxt > p a {
    font-size: 10px;
    padding: 0 3px;
  }
}
#dormitoryArea {
  padding-top: 80px;
  padding-bottom: 80px;
  color: #fefefe;
  background-color: #009944;
}

@media (max-width: 900px) {
  #dormitoryArea {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
#searchBlock {
  margin: auto;
}

#searchBlock > h3 {
  font-size: 32px;
  color: #fefefe;
  letter-spacing: 0.1em;
  text-align: center;
  width: fit-content;
  position: relative;
  margin: auto;
}

#searchBlock > h3::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: url("../image/icon04.png");
  background-size: contain;
  background-repeat: no-repeat;
  left: -68px;
  top: -12px;
}

@media (max-width: 900px) {
  #searchBlock > h3 {
    font-size: 24px;
  }

  #searchBlock > h3::before {
    width: 40px;
    height: 40px;
    left: -54px;
    top: -8px;
  }
}
.tab-container {
  width: 800px;
  margin: 40px auto 0;
}

.tab-menu {
  display: flex;
  list-style: none;
  padding: 0;
}

.tab-menu li {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  width: 399px;
  text-align: center;
  padding: 14px 0 15px;
  background-color: #009944;
  border: solid 2px #fefefe;
  border-radius: 20px 20px 0 0;
  cursor: pointer;
  box-sizing: border-box;
  margin-left: 2px;
  position: relative;
  top: 2px;
}

.tab-menu li:first-child {
  margin-left: 0;
}

.tab-menu li.active {
  color: #009944;
  background-color: #fefefe;
}

.tab-content {
  background-color: #fefefe;
  border-radius: 0 0 20px 20px;
}

.tab-content > div {
  width: 100%;
  padding: 40px 0;
  box-sizing: border-box;
}

.tab-content > div:last-child {
  display: none;
}

@media (max-width: 900px) {
  .tab-container {
    width: 90%;
    margin: 30px auto 0;
  }

  .tab-menu li {
    font-size: 12px;
    width: 50%;
  }
}
div#categoryCampus {
  display: flex;
  justify-content: center;
  gap: 20px;
}

div#categoryCampus > div {
  width: 210px;
}

div#categoryCampus > div a {
  transition: all 0.6s ease-in-out;
}

div#categoryCampus > div a:hover {
  filter: opacity(0.7);
}

div#categoryCampus > div img {
  width: 100%;
  object-fit: contain;
  border-radius: 20px;
}

div#categoryCampus > div p {
  font-size: 13px;
  color: #020202;
  padding-top: 10px;
  text-align: center;
  letter-spacing: 1px;
  margin: auto;
  padding-left: 12px;
  width: fit-content;
  position: relative;
}

div#categoryCampus > div p::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 7px;
  width: 16px;
  height: 20px;
  background: url("../image/icon15.png");
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 900px) {
  div#categoryCampus {
    flex-direction: column;
  }

  div#categoryCampus > div {
    width: 86%;
    margin: auto;
  }

  div#categoryCampus > div img {
    display: none;
  }

  div#categoryCampus > div p {
    color: #fefefe;
    background-color: #009944;
    width: 86%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 16px;
  }

  div#categoryCampus > div p::before {
    left: 10%;
    top: 6px;
    background: url("../image/icon15_white.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
div#categoryType {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px;
  width: 90%;
  margin: 10px auto;
}

div#categoryType div {
  margin: 10px 0;
}

div#categoryType div p > a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fefefe;
  background-color: #009944;
  padding: 8px 50px;
  border-radius: 20px;
  display: inline-block;
}

div#categoryType div p > a:hover {
  filter: opacity(0.7);
}

@media (max-width: 900px) {
  div#categoryType {
    width: 92%;
    column-gap: 15px;
    margin: 0 auto;
  }

  div#categoryType div {
    margin: 10px 0;
  }

  div#categoryType div p > a {
    font-size: 12px;
    letter-spacing: 0.02em;
    padding: 8px 40px;
  }
}
#benefitsBlock {
  padding: 100px 0 100px;
  margin: auto;
}

#benefitsBlock > h3 {
  font-size: 48px;
  color: #009944;
  letter-spacing: 0.03em;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
}

#benefitsBlock > h3::before {
  content: "";
  width: 132px;
  height: 20px;
  background: url("../image/icon05.png");
  background-size: contain;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

#benefitsBlock > h4 {
  font-size: 18px;
  color: #009944;
  letter-spacing: 0.1em;
  text-align: center;
}

div#benefitsTxt {
  width: 720px;
  margin: 50px auto;
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
}

div#benefitsTxt::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 12px;
  background: repeating-linear-gradient(-65deg, #009944 0 2px, #fefefe 2px 8px);
  top: 0;
  left: 0;
}

div#benefitsTxt::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 12px;
  background: repeating-linear-gradient(-65deg, #009944 0 2px, #fefefe 2px 8px);
  bottom: 0;
  left: 0;
}

div#benefitsTxt > p {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.8;
  text-align: center;
}

@media (max-width: 900px) {
  #benefitsBlock {
    padding: 80px 0 50px;
  }

  #benefitsBlock > h3 {
    font-size: 40px;
  }

  #benefitsBlock > h4 {
    font-size: 14px;
  }

  div#benefitsTxt {
    width: 86%;
    margin: 40px auto;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  div#benefitsTxt > p {
    font-size: 14px;
    width: 90%;
    margin: auto;
    text-align: left;
  }
}
#benefitsFlex {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 840px;
  margin: auto;
}

div.benefitsContent {
  width: 260px;
  margin: 0;
  margin-bottom: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

div.benefitsImg {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: #009944;
  margin: auto;
  position: relative;
}

div.benefitsImg > img {
  width: 68px;
  height: auto;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div.benefitsTxt h5 {
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  color: #009944;
  letter-spacing: 0.05em;
  margin: 20px auto 10px;
}

div.benefitsTxt p {
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

div#benefitsLink {
  width: 300px;
  margin: auto;
  margin-top: 40px;
}

div#benefitsLink > a {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 40px;
  width: 100%;
  height: 40px;
  border-radius: 20px;
  color: #fefefe;
  border: solid 1px #009944;
  background: linear-gradient(to right, #fefefe 50%, #009944 50%);
  background-size: 200% 100%;
  background-position: top right;
  text-align: center;
  transition: all 0.6s ease-in-out;
  display: inline-block;
}

div#benefitsLink > a:hover {
  color: #009944;
  background-position: left top;
}

@media (max-width: 900px) {
  #benefitsFlex {
    flex-direction: column;
    width: 86%;
  }

  div.benefitsContent {
    width: 100%;
    flex-direction: row;
    margin: auto;
    align-items: center;
    gap: 20px;
  }

  div.benefitsImg {
    width: 70px;
    height: 70px;
  }

  div.benefitsImg > img {
    width: 42px;
  }

  div.benefitsTxt {
    width: calc(100% - 100px);
    text-align: left;
  }

  div.benefitsTxt h5 {
    margin: 0 auto 5px;
  }

  div.benefitsTxt p {
    font-size: 12px;
  }

  div#benefitsLink {
    width: 280px;
  }

  div#benefitsLink > a {
    font-size: 14px;
  }
}
#supportBlock {
  padding-top: 80px;
  padding-bottom: 120px;
}

#supportBlock > h3 {
  font-size: 28px;
  color: #009944;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  text-align: center;
  padding-bottom: 10px;
}

#supportBlock > h4 {
  font-size: 48px;
  color: #009944;
  text-align: center;
  letter-spacing: 0.1em;
  padding-bottom: 30px;
}

#supportBlock > p {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

div#supportFlex {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}

div#supportFlex > div {
  width: 220px;
  border: solid 2px #009944;
  border-radius: 10px;
  box-sizing: border-box;
}

div#supportFlex > div:hover {
  filter: opacity(0.7);
}

div#supportFlex > div a {
  display: inline-block;
  width: 100%;
  padding: 12px 0 20px;
  margin: auto;
  text-align: center;
}

div#supportFlex > div a:hover {
  filter: opacity(0.7);
}

div#supportFlex > div a > div {
  margin: auto;
  text-align: center;
  height: 58px;
  margin: auto;
  vertical-align: middle;
}

div#supportFlex > div a > div > img {
  margin: auto;
}

img#supportIcon01 {
  width: 50px;
  height: auto;
  object-fit: contain;
}

img#supportIcon02 {
  width: 48px;
  height: auto;
  object-fit: contain;
  position: relative;
  top: 3px;
}

img#supportIcon03 {
  width: 58px;
  height: auto;
  object-fit: contain;
}

img#supportIcon04 {
  width: 54px;
  height: auto;
  object-fit: contain;
  position: relative;
  top: 2px;
}

div#supportFlex > div a > p {
  font-size: 18px;
  font-weight: 600;
  color: #009944;
  text-align: center;
  letter-spacing: 1px;
}

@media (max-width: 900px) {
  #supportBlock {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #supportBlock > h3 {
    font-size: 18px;
  }

  #supportBlock > h4 {
    font-size: 32px;
    letter-spacing: 0.05em;
  }

  #supportBlock > p {
    font-size: 15px;
  }

  div#supportFlex {
    flex-direction: column;
    gap: 0;
  }

  div#supportFlex > div {
    width: 86%;
    max-width: 460px;
    margin: auto;
    margin-bottom: 20px;
  }

  div#supportFlex > div a {
    padding: 0;
  }

  div#supportFlex > div a > div {
    width: 70px;
    height: 50px;
    display: inline-block;
    box-sizing: border-box;
  }

  img#supportIcon01 {
    width: 45px;
  }

  img#supportIcon02 {
    width: 43px;
  }

  img#supportIcon03 {
    width: 53px;
  }

  img#supportIcon04 {
    width: 49px;
  }

  div#supportFlex > div a > p {
    width: calc(100% - 114px);
    display: inline-block;
    box-sizing: border-box;
    text-align: left;
    position: relative;
    top: 2px;
  }
}
#blogBlock {
  padding: 80px 0 80px;
  background-color: #f1f1f1;
}

#blogBlock > h3 {
  font-size: 48px;
  color: #009944;
  letter-spacing: 0.03em;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
}

#blogBlock > h4 {
  font-size: 18px;
  color: #009944;
  letter-spacing: 0.1em;
  text-align: center;
}

@media (max-width: 900px) {
  #blogBlock {
    padding: 60px 0 60px;
  }

  #blogBlock > h3 {
    font-size: 40px;
    margin-bottom: 5px;
  }

  #blogBlock > h4 {
    font-size: 14px;
    font-weight: normal;
  }
}
div#blogFlex {
  margin: 40px auto;
}

div.blogSwiper {
  width: 100%;
  overflow: hidden;
}

div.blogSwiper .swiper-slide {
  width: 240px !important;
  height: 300px;
  position: relative;
}

div.blogSwiper .swiper-slide > a {
  display: inline-block;
  height: 100%;
  transition: all 0.5s ease-in-out;
}

div.blogSwiper .swiper-slide > a::before {
  content: "";
  position: absolute;
  width: 15%;
  height: 1px;
  background-color: #020202;
  bottom: 0;
  right: 0;
  transition: all 0.5s ease-in-out;
}

div.blogSwiper .swiper-slide > a::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 1px;
  background-color: #020202;
  bottom: 3px;
  right: 0;
  transform: rotateZ(45deg);
  transition: all 0.5s ease-in-out;
}

div.blogSwiper .swiper-slide > a:hover {
  filter: opacity(0.7);
}

div.blogSwiper .swiper-slide > a:hover::before {
  background-color: #009944;
  right: -5px;
}

div.blogSwiper .swiper-slide > a:hover::after {
  background-color: #009944;
  right: -5px;
}

div.blogImg {
  margin-bottom: 20px;
}

div.blogImg > img {
  width: 100%;
  object-fit: contain;
  border-radius: 20px;
}

div.blogDate {
  margin-bottom: 10px;
}

div.blogDate > p {
  font-size: 14px;
  line-height: 1;
  color: #020202;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

div.blogTxt > p {
  font-size: 15px;
  color: #020202;
  line-height: 1.6;
}

@media (max-width: 900px) {
  div.blogSwiper .swiper-slide {
    height: 260px;
  }

  div#blogFlex {
    margin: 30px auto;
  }

  div.blogImg {
    margin-bottom: 15px;
  }

  div.blogDate {
    margin-bottom: 5px;
  }

  div.blogDate > p {
    font-size: 12px;
  }

  div.blogTxt > p {
    font-size: 13px;
  }
}
div#blogLink {
  width: 300px;
  margin: auto;
  margin-top: 60px;
}

div#blogLink > a {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 40px;
  width: 100%;
  height: 40px;
  border-radius: 20px;
  color: #fefefe;
  border: solid 1px #009944;
  background: linear-gradient(to right, #fefefe 50%, #009944 50%);
  background-size: 200% 100%;
  background-position: top right;
  text-align: center;
  transition: all 0.6s ease-in-out;
  display: inline-block;
}

div#blogLink > a:hover {
  color: #009944;
  background-position: left top;
}

@media (max-width: 900px) {
  div#blogLink {
    width: 280px;
  }

  div#blogLink > a {
    font-size: 14px;
  }
}
#brochureBlock {
  background-color: #009944;
  padding: 80px 0 80px;
}

#brochureBlock > h3 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.4;
  color: #fefefe;
  text-align: center;
}

div#brochureLink {
  width: 400px;
  margin: auto;
  margin-top: 30px;
}

div#brochureLink > a {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 40px;
  width: 100%;
  height: 40px;
  border-radius: 20px;
  color: #009944;
  border: solid 1px #fefefe;
  background: linear-gradient(to right, #009944 50%, #fefefe 50%);
  background-size: 200% 100%;
  background-position: top right;
  text-align: center;
  transition: all 0.6s ease-in-out;
  display: inline-block;
}

div#brochureLink > a:hover {
  color: #fefefe;
  background-position: top left;
}

@media (max-width: 900px) {
  #brochureBlock {
    padding: 40px 0 50px;
  }

  #brochureBlock > h3 {
    font-size: 16px;
  }

  div#brochureLink {
    width: 280px;
    margin-top: 20px;
  }

  div#brochureLink > a {
    font-size: 16px;
  }
}
#aboutTUSD {
  padding: 80px 0 80px;
  background-color: #f1f1f1;
  margin: auto;
}

#aboutTitle {
  width: 180px;
  margin: auto;
  margin-bottom: 30px;
}

#aboutTitle > img {
  width: 100%;
}

#aboutTxt {
  width: 540px;
  margin: auto;
  margin-bottom: 30px;
}

#aboutTxt > p {
  font-size: 18px;
  line-height: 1.6;
  color: #009944;
}

#aboutImg {
  width: 200px;
  margin: auto;
}

#aboutImg > img {
  width: 100%;
}

@media (max-width: 900px) {
  #aboutTUSD {
    padding: 50px 0 50px;
  }

  #aboutTitle {
    width: 125px;
    margin-bottom: 20px;
  }

  #aboutTxt {
    width: 86%;
  }

  #aboutTxt > p {
    font-size: 14px;
  }

  #aboutImg {
    width: 160px;
  }
}
#footerCampus {
  background-color: #009944;
  padding: 80px 0 80px;
}

#footerCampus > h3 {
  font-size: 20px;
  font-weight: 600;
  color: #fefefe;
  letter-spacing: 1px;
  width: 720px;
  margin: auto;
  margin-bottom: 30px;
}

div.campusFlex {
  display: flex;
  width: 720px;
  margin: 20px auto;
  gap: 15px;
  padding-left: 2em;
}

div.campusTitle {
  font-size: 16px;
  color: #fefefe;
  width: 136px;
}

div.campusTitle > p {
  width: 100%;
}

div.campusLine {
  width: 80px;
  background-color: #fefefe;
  height: 1px;
  position: relative;
  top: 8px;
}

div.campusDormitory {
  text-align: left;
  width: calc(100% - 136px - 80px);
}

div.campusDormitory > a {
  color: #fefefe;
  margin-right: 16px;
  display: inline-block;
  width: fit-content;
  position: relative;
}

div.campusDormitory > a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fefefe;
  bottom: -5px;
  left: 0;
  transform: scale(0, 1);
  transform-origin: left bottom;
  transition: all 0.6s ease-in-out;
}

div.campusDormitory > a:hover::after {
  transform: scale(1, 1);
}

@media (max-width: 900px) {
  #footerCampus {
    padding: 60px 0 50px;
  }

  #footerCampus > h3 {
    font-size: 16px;
    width: 86%;
    margin: auto;
  }

  div.campusFlex {
    width: 86%;
    flex-wrap: wrap;
    padding-left: 0;
  }

  div.campusTitle {
    font-size: 14px;
    width: 8.1em;
  }

  div.campusLine {
    width: calc(100% - 11em);
  }

  div.campusDormitory {
    padding-left: 2em;
    width: 100%;
  }

  div.campusDormitory > a {
    font-size: 13px;
    display: block;
    line-height: 2;
  }

  div.campusDormitory > a::after {
    bottom: 0;
  }
}
#footer {
  padding: 60px 0 80px;
}

div#footerMenu {
  width: 720px;
  margin: auto;
  display: flex;
  gap: 80px;
}

div#footerMenu h4 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #009944;
  margin-bottom: 20px;
}

div#footerMenu p {
  font-size: 15px;
  letter-spacing: 1px;
  padding-left: 2em;
  line-height: 2;
}

div#footerMenu p::before {
  content: "-";
  color: #009944;
  padding-right: 0.3em;
}

div#footerMenu p a {
  color: #009944;
  display: inline-block;
  width: fit-content;
  position: relative;
}

div#footerMenu p a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #009944;
  bottom: 3px;
  left: 0;
  transform: scale(0, 1);
  transform-origin: left bottom;
  transition: all 0.6s ease-in-out;
}

div#footerMenu p a:hover::after {
  transform: scale(1, 1);
}

@media (max-width: 900px) {
  #footer {
    padding: 40px 0 50px;
  }

  div#footerMenu {
    width: 86%;
    gap: 30px;
  }

  div#footerMenu h4 {
    font-size: 15px;
  }

  div#footerMenu p {
    font-size: 12px;
    padding-left: 1em;
  }
}
div#secondFlex {
  display: flex;
  gap: 0;
}

div#secondFlex p.firstTimeUsers > a {
  padding-left: 1.5em;
}

div#secondFlex p.firstTimeUsers > a::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 22px;
  top: 5px;
  left: 0;
  background: url("../image/icon16.png");
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 900px) {
  div#secondFlex {
    flex-direction: column;
  }

  div#secondFlex p.firstTimeUsers > a::before {
    width: 15px;
    height: 20px;
    top: 2px;
  }
}
div#footerSubMenu {
  margin: 50px auto 30px;
  display: flex;
  justify-content: center;
  gap: 40px;
}

div#footerSubMenu div > a {
  font-size: 13px;
  color: #020202;
  width: fit-content;
  display: inline-block;
  position: relative;
  transition: all 0.6s ease-in-out;
}

div#footerSubMenu div > a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #009944;
  bottom: -5px;
  left: 0;
  transition: all 0.6s ease-in-out;
  transform: scale(0, 1);
  transform-origin: left bottom;
}

div#footerSubMenu div > a:hover {
  color: #009944;
}

div#footerSubMenu div > a:hover::after {
  transform: scale(1, 1);
}

@media (max-width: 900px) {
  div#footerSubMenu {
    margin: 40px auto 20px;
    gap: 30px;
  }

  div#footerSubMenu div > a {
    font-size: 12px;
  }
}
#footer small {
  font-size: 11px;
  text-align: center;
  margin: auto;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  display: block;
}

@media (max-width: 900px) {
  #footer small {
    font-size: 10px;
  }
}
#footerLogo {
  width: 120px;
  margin: 20px auto;
}

#footerLogo img {
  width: 100%;
}

@media (max-width: 900px) {
  #footerLogo {
    width: 110px;
  }
}
#subMenuSticky {
  position: relative;
  padding-top: 150px;
}

@media (max-width: 900px) {
  #subMenuSticky {
    position: relative;
    padding-top: 90px;
  }
}
.swiper-button-prev.voiceSwiper {
  display: block;
  border-bottom: solid 2px #009944;
  border-left: solid 2px #009944;
  width: 16px;
  height: 16px;
  left: 30px;
  top: 55%;
  transition: all 0.6s ease-in-out;
  position: absolute;
  z-index: 11;
  transform: translateY(-50%) rotateZ(45deg);
}

.swiper-button-prev.voiceSwiper:hover {
  cursor: pointer;
  opacity: 0.8;
}

.swiper-button-next.voiceSwiper {
  display: block;
  border-bottom: solid 2px #009944;
  border-right: solid 2px #009944;
  width: 16px;
  height: 16px;
  right: 30px;
  top: 55%;
  transition: all 0.6s ease-in-out;
  position: absolute;
  z-index: 11;
  transform: translateY(-50%) rotateZ(-45deg);
}

.swiper-button-next.voiceSwiper:hover {
  cursor: pointer;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .swiper-button-prev.voiceSwiper {
    display: none;
  }

  .swiper-button-next.voiceSwiper {
    display: none;
  }
}