/*複数で使われるCSS*/
* {
  box-sizing: border-box;
  text-decoration: none;
}

/*基準を1rem=10pxに設定*/
html {
  font-size: 62.5%;
  font-family: 'source-han-sans-japanese', sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 30px;
}

input::placeholder,
textarea::placeholder {
  color: gray;
  opacity: 0.7;
}
/*bodyの余計な余白を削除*/
body {
  margin: 0;
  padding: 0;
  font-family:
    Noto Sans JP,
    ヒラギノ角ゴ ProN W3,
    Meiryo,
    sans-serif;
}

/*ヘッダーを固定*/
header {
  position: fixed !important;
}

/*ヘッダーのcssを記述*/
header {
  position: fixed;
  height: 55px;
  width: 100%;
  top: 0;
  background-color: white;
  z-index: 1000;
}
.Small-header {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 6px -2px var(--shadow-medium-2);
  position: relative;
  z-index: 1000;
}

.Small-header img {
  width: 57px;
  height: auto;
  margin-left: var(--spacing-5);
}

.Small-header .space {
  /* これより後の要素を右寄せ */
  margin-left: auto;
}

.Small-header .Small-header-txt {
  font-weight: 500;
  color: var(--primary-blue);
  border: 1px solid var(--primary-blue);
  margin-left: 4vw;
  padding: var(--spacing-1) var(--spacing-2);
}

/*メインコンテンツのcssを記述*/
#main-contents {
  margin-top: var(--spacing-14);
}

#junior-main-contents {
  margin-top: var(--spacing-14);
}

/*ハンバーガーメニューのcssを記述*/
.hamburger {
  height: 100%;
  margin: 0;
}

.hamburger-menu {
  height: 100%;
  aspect-ratio: 1 / 1;
  /*高さに対する相対サイズ*/
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: none;
  background-color: var(--color-gray-light);
  appearance: none;
  padding: 0;
  cursor: pointer;
  margin-right: 2vw;
}

.hamburger-menu__bar {
  display: inline-block;
  width: 44%;
  height: clamp(1px, 6%, 10%);
  background: var(--color-primary);
  position: absolute;
  transform: translateX(-50%);
  transition: 0.2s;
}

#hamburger-txt {
  position: absolute;
  color: var(--color-primary);
  font-weight: bold;
  top: 45%;
  left: 15%;
}

.hamburger-menu__bar:first-child {
  top: 25%;
}

.hamburger-menu__bar:nth-child(2) {
  top: 40%;
}

.hamburger-menu__bar:last-child {
  top: 55%;
}

.hamburger-menu--open .hamburger-menu__bar {
  top: 45%;
}

.hamburger-menu--open .hamburger-menu__bar:first-child {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.hamburger-menu--open .hamburger-menu__bar:last-child {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
  display: none;
}

#main-navigation .navigation__list {
  background-color: var(--color-blue-light);
  height: 100vh;
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0;
}

#main-navigation .navigation__list-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-gray);
}

#main-navigation .navigation__link {
  display: inline-flex;
  align-items: center;
  color: black;
  font-weight: 550;
  text-decoration: none;
  width: 100%;
  padding: var(--spacing-4) 0 var(--spacing-4) var(--spacing-4);
  transition: 0.2s;
}

#main-navigation .navigation__link .material-icons {
  margin-right: var(--spacing-1);
  color: var(--primary-blue);
}

.navigation {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  z-index: 999;
  transition: right 0.3s ease-in-out;
  margin-top: var(--spacing-14);
}

.navigation.is-open {
  right: 0;
}

.navigation__link .material-icons {
  vertical-align: middle;
}

.navigation__list-official {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  padding-top: var(--spacing-6);
  color: white;
}

.navigation__list-official .navigation__list-freetrial {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--free-trial);
  border-color: var(--free-trial);
  border-radius: 30px;
  width: 90%;
  padding: var(--spacing-4) 0;
  box-shadow: 0 6px 6px 0 var(--shadow-light);
  text-decoration: none;
  margin-bottom: var(--spacing-4);
}

.navigation__list-official .navigation__list-line {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--official-line);
  border-color: var(--official-line);
  border-radius: 30px;
  width: 90%;
  padding: var(--spacing-4) 0;
  box-shadow: 0 6px 6px 0 var(--shadow-light);
  text-decoration: none;
}

.navigation__list-official .chevron {
  position: absolute;
  right: 10vw;
}

.navigation__list-official .free-trial-logo,
.navigation__list-official .official-line-logo {
  margin-right: var(--spacing-1);
}

.Navigation-now::after {
  /* 現在利用しているコンテンツ */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(1) !important;
  transform-origin: center;
  width: 100%;
  height: 5px;
  background-color: var(--primary-blue);
  transition: transform 0.3s ease;
}
/*svg読み込み*/
.free-trial-logo {
  width: 19px;
  height: 14px;
  content: '';
  display: inline-block;
  vertical-align: middle;
  background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDM3Ny40IDI3NS4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNzcuNCAyNzUuMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZT5wYXRoIHsgZmlsbDogI2ZmZjt9PC9zdHlsZT48Zz4gPHBhdGggZD0iTTM3NS44LDI1Ni4xbC0zNS43LTUwLjRjMS43LTMsMi44LTYuNSwyLjktMTAuMmMwLTAuNCwwLTAuOCwwLTEuMlY4NC44VjIzLjNjMC0xMi45LTEwLjUtMjMuMy0yMy4zLTIzLjNINTggQzQ1LjIsMCwzNC43LDEwLjUsMzQuNywyMy4zdjE3MWMwLDAuNCwwLDAuOCwwLDEuMmMwLjIsMy43LDEuMiw3LjIsMywxMC4zTDIsMjU2LjFjLTIuNCwzLjQtMi43LDcuNi0wLjgsMTEuMyBjMi42LDUuMSw4LjgsNy44LDEzLjUsNy44aDM0OC40YzMuNywwLDYuOS0yLjIsOC4yLTUuNGMwLjgtMC4zLDEuNi0wLjcsMi4zLTEuMkMzNzcuNywyNjUuOCwzNzguNiwyNjAuMiwzNzUuOCwyNTYuMXogTTUyLjcsMjMuMyBjMC0yLjksMi40LTUuMyw1LjMtNS4zaDI2MS43YzIuOSwwLDUuMywyLjQsNS4zLDUuM3Y2MS41djEwOS41YzAsMC4zLDAsMC43LTAuMSwxYzAsMCwwLDAuMSwwLDAuMWMtMC4xLDAuMy0wLjEsMC41LTAuMiwwLjcgYzAsMC4xLTAuMSwwLjItMC4yLDAuNGMtMC4xLDAuMi0wLjIsMC4zLTAuMywwLjVjLTAuMSwwLjItMC4yLDAuMy0wLjMsMC41Yy0wLjEsMC4xLTAuMiwwLjItMC4zLDAuM2MtMC4xLDAuMS0wLjMsMC4zLTAuNCwwLjQgYy0wLjEsMC4xLTAuMywwLjItMC40LDAuM2MtMC4xLDAuMS0wLjIsMC4xLTAuMywwLjJjLTAuMiwwLjEtMC41LDAuMy0wLjcsMC40YzAsMC0wLjEsMC0wLjEsMGMtMC42LDAuMy0xLjMsMC40LTIsMC40IGMtMC4xLDAtMC4yLDAtMC4zLDBINTguMmMtMC4xLDAtMC4yLDAtMC4zLDBjLTAuNywwLTEuNC0wLjItMi0wLjRjLTAuMSwwLTAuMS0wLjEtMC4yLTAuMWMtMC4yLTAuMS0wLjQtMC4yLTAuNi0wLjMgYy0wLjEtMC4xLTAuMy0wLjItMC40LTAuM2MtMC4xLTAuMS0wLjItMC4yLTAuMy0wLjNjLTAuMi0wLjEtMC4zLTAuMy0wLjUtMC41Yy0wLjEtMC4xLTAuMi0wLjItMC4yLTAuM2MtMC4xLTAuMi0wLjItMC4zLTAuNC0wLjUgYy0wLjEtMC4xLTAuMi0wLjMtMC4yLTAuNGMtMC4xLTAuMS0wLjEtMC4yLTAuMi0wLjRjLTAuMS0wLjItMC4yLTAuNS0wLjItMC43YzAsMCwwLTAuMSwwLTAuMWMtMC4xLTAuMy0wLjEtMC43LTAuMS0xVjIzLjN6IE01MS45LDIxNi45YzIsMC41LDQsMC44LDYuMSwwLjhoMGgyNjEuN2gwYzAsMCwwLDAsMCwwYzIuMSwwLDQuMi0wLjMsNi4yLTAuOGwyOC42LDQwLjRIMjMuM0w1MS45LDIxNi45eiIvPiA8cGF0aCBkPSJNMTE5LjUsMTkzLjFjNSwwLDktNCw5LTl2LTE0YzAtNi40LDguMi0xMy45LDIyLTE5LjljMTMuOC02LDMwLTkuMiwzOC40LTkuMnMyNC42LDMuMiwzOC40LDkuMmMxMy44LDYsMjIsMTMuNCwyMiwxOS45djE0IGMwLDUsNCw5LDksOWM1LDAsOS00LDktOXYtMTRjMC0xMC4xLTUuNy0yNC41LTMyLjktMzYuNGMtNi41LTIuOC0xMy4yLTUtMTkuNi02LjdjMTAuNy03LjksMTcuNy0yMC43LDE3LjctMzV2LTEuMyBjMC0yNC0xOS42LTQzLjUtNDMuNy00My41cy00My43LDE5LjUtNDMuNyw0My41VjkyYzAsMTQuMyw3LDI3LDE3LjcsMzVjLTYuNCwxLjctMTMuMSwzLjktMTkuNiw2LjcgYy0yNy4yLDExLjgtMzIuOSwyNi4zLTMyLjksMzYuNHYxNEMxMTAuNSwxODksMTE0LjUsMTkzLjEsMTE5LjUsMTkzLjF6IE0xNjMuMiw5MC44YzAtMTQuMSwxMS41LTI1LjUsMjUuNy0yNS41IHMyNS43LDExLjUsMjUuNywyNS41VjkyYzAsMTQuMS0xMS41LDI1LjUtMjUuNywyNS41cy0yNS43LTExLjUtMjUuNy0yNS41VjkwLjh6Ii8+PC9nPjwvc3ZnPg==)
    no-repeat center;
}

.official-line-logo {
  width: 13px;
  height: 21px;
  content: '';
  display: inline-block;
  vertical-align: middle;
  background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEyMy41IDIwMy4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMjMuNSAyMDMuMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IC5zdDB7ZmlsbDogI2ZmZjt9PC9zdHlsZT48Zz4gPHBhdGggY2xhc3M9InN0MCIgZD0iTTExOC45LDEzOC43bC0yLjYtMi4ybDUuMy02LjRjMy0zLjcsMi41LTkuMS0xLjItMTIuMWwtMy41LTIuOWw0LjctNS43YzMtMy43LDIuNS05LjEtMS4yLTEyLjFsLTMuNS0yLjkgbDQuNy01LjdjMy0zLjcsMi41LTkuMS0xLjItMTIuMWwtNC0zLjJjLTEtMC45LTIuMy0xLjUtMy42LTEuN1YxMC4yYzAtNS42LTQuNi0xMC4yLTEwLjItMTAuMkgyOC43QzIzLDAsMTguNCw0LjYsMTguNCwxMC4ydjY5LjcgYy0wLjctMC42LTEuNC0xLjEtMi4xLTEuNWMtMi45LTEuNy02LjQtMi05LjctMWMtMiwwLjYtMy44LDEuOC00LjgsMy4ybC0wLjEsMC4xYy0wLjIsMC4zLTAuNSwwLjctMC43LDEuMmMtMS43LDMuNS0xLDgtMC40LDEyIGMwLjEsMC42LDAuMiwxLjMsMC4zLDEuOWMyLjQsMTcuMSwxLjIsMjUuOCwwLjMsMzIuOGMtMC43LDUuMy0xLjMsOS45LDAsMTYuMWMxLjUsNy40LDQuMiwxMi42LDYuMywxNi44bDAuMSwwLjFsLTUuOCw5LjJsNS4xLDMuMiBsNi43LTEwLjZjMC42LTAuOSwwLjYtMiwwLjEtM2MtMC4zLTAuNS0wLjUtMS4xLTAuOS0xLjdjLTIuMS00LTQuNS04LjYtNS44LTE1LjJjLTEtNS4zLTAuNS05LjIsMC4xLTE0LjJjMS03LjQsMi4xLTE2LjUtMC4zLTM0LjQgYy0wLjEtMC42LTAuMi0xLjMtMC4zLTJjLTAuNC0yLjgtMS02LjYtMC4xLTguNGMwLjEtMC4xLDAuMS0wLjIsMC4yLTAuM2MwLjMtMC40LDEtMC44LDEuOC0xLjFjMC44LTAuMiwyLjgtMC43LDQuOSwwLjUgYzIuMiwxLjMsNCw0LjEsNS4xLDguM3Y1Ny40YzAsNS42LDQuNiwxMC4yLDEwLjIsMTAuMmg3MC44YzAuNCwwLjMsMC44LDAuNiwxLjMsMC45Yy0xLjMsMS42LTIuNywzLjUtNC41LDUuNyBjLTE0LjgsMTguOC0yMy4zLDIxLjEtMzAuMSwyM2MtMSwwLjMtMS45LDAuNS0yLjgsMC44Yy0wLjYsMC4yLTEuMSwwLjYtMS41LDEuMWwtNi40LDguN2w0LjgsMy42bDUuOC03LjljMC42LTAuMiwxLjEtMC4zLDEuNy0wLjUgYzcuNi0yLjEsMTcuMS00LjgsMzMuMi0yNS4xYzIuMy0yLjksNC4zLTUuNSw2LTcuNmMyLjUsMCw0LjYtMSw2LjItMi45bDYuOS04LjVjMS41LTEuOCwyLjEtNCwxLjktNi4zIEMxMjEuNywxNDIuMiwxMjAuNiwxNDAuMSwxMTguOSwxMzguN3ogTTEwNi44LDE1Ni4yYy0yLjIsMC01LjMtMi4yLTYuNC00LjVjLTAuNy0xLjUtMC4zLTIuMywwLjEtMi44bDYuMi03LjYgYzIsMC4zLDMuNywwLjEsNS4yLTAuNmwzLjIsMi42YzAuNSwwLjQsMC45LDEuMSwwLjksMS44YzAuMSwwLjctMC4xLDEuNC0wLjYsMS45bC02LjksOC41QzEwOC4xLDE1NiwxMDcuNSwxNTYuMiwxMDYuOCwxNTYuMnogTTI0LjUsOTEuMlYyNi44aDgyLjN2NDUuNWMtMSwwLjUtMS44LDEuMi0yLjUsMi4xbC02LjksOC41Yy0yLjEsMi41LTIuNCw1LjktMC44LDkuMWMxLjEsMi40LDMuMSw0LjUsNS41LDZsLTQuNiw1LjYgYy0yLjEsMi41LTIuNCw1LjktMC44LDkuMWMxLjEsMi40LDMuMSw0LjUsNS41LDZsLTQuNiw1LjZjLTEuMywxLjYtMS45LDMuNS0xLjgsNS42aC03MVY5Mi40bDAuMy0wLjFMMjQuNSw5MS4yeiBNMTAxLjksMTI4LjEgbDYuMS03LjRjMS43LDAuMSwzLjQtMC40LDQuNy0xLjNsMy44LDMuMWMxLjEsMC45LDEuMywyLjYsMC40LDMuN2wtNi45LDguNWMtMC40LDAuNS0wLjksMC43LTEuNywwLjdjLTIuMiwwLTUuMy0yLjItNi40LTQuNSBDMTAxLjEsMTI5LjQsMTAxLjUsMTI4LjYsMTAxLjksMTI4LjF6IE0xMDguMywxMTQuN2MtMi4yLDAtNS4zLTIuMi02LjQtNC41Yy0wLjctMS41LTAuMy0yLjMsMC4xLTIuOGw2LjEtNy40IGMxLjcsMC4xLDMuNC0wLjQsNC43LTEuM2wzLjgsMy4xYzAuNSwwLjQsMC45LDEuMSwwLjksMS44YzAuMSwwLjctMC4xLDEuNC0wLjYsMS45bC02LjksOC41QzEwOS41LDExNC41LDEwOSwxMTQuNywxMDguMywxMTQuN3ogTTExNi45LDg0LjhsLTYuOSw4LjVjLTAuNCwwLjUtMC45LDAuNy0xLjcsMC43Yy0yLjIsMC01LjMtMi4yLTYuNC00LjVjLTAuNy0xLjUtMC4zLTIuMywwLjEtMi44bDYuOS04LjVjMC41LTAuNiwxLjItMSwyLTEgYzAuNiwwLDEuMiwwLjIsMS43LDAuNmw0LDMuM2MwLjUsMC40LDAuOSwxLjEsMC45LDEuOFMxMTcuMyw4NC4yLDExNi45LDg0Ljh6IE05NC43LDE1My41aC02NmMtMi4zLDAtNC4yLTEuOS00LjItNC4ydi0xMy4zSDk4IGMwLjgsMS4xLDEuOSwyLDMsMi45bC01LjEsNi4zQzkzLjksMTQ3LjQsOTMuNSwxNTAuNSw5NC43LDE1My41eiBNMjQuNSwyMC44VjEwLjJjMC0yLjMsMS45LTQuMiw0LjItNC4yaDczLjggYzIuMywwLDQuMiwxLjksNC4yLDQuMnYxMC42SDI0LjV6Ii8+IDxyZWN0IHg9IjYwLjIiIHk9IjE0MS41IiBjbGFzcz0ic3QwIiB3aWR0aD0iMTAuOCIgaGVpZ2h0PSI2Ii8+IDxyZWN0IHg9IjU1IiB5PSIxMS44IiBjbGFzcz0ic3QwIiB3aWR0aD0iMjEuMiIgaGVpZ2h0PSI0Ii8+PC9nPjwvc3ZnPg==)
    no-repeat center;
}

.scroll-to-top {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  width: 100%;
  height: 34px;
  background-color: var(--primary-deep-blue);
}

.scroll-to-top .material-icons {
  color: white;
  padding-top: var(--spacing-1);
  font-weight: 700;
}

.x-logo {
  display: block;
  background-color: black;
}

#copyright-notice {
  text-align: center;
  width: 100vw;
  color: white;
  margin: 0;
  padding: var(--spacing-6) var(--spacing-2);
  background-color: var(--primary-deep-blue);
}

/*bigfooter*/
#big-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-20);
}

#big-footer .footer-img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

#big-footer .footer-img .footer-logo {
  width: 180px;
  height: auto;
}

#big-footer .footer-img .footer-sns {
  display: flex;
  justify-content: center;
  gap: 20px;
}

#big-footer .footer-img .footer-sns img {
  width: auto;
  height: 40px;
  border-radius: 50%;
}

#big-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-right: var(--spacing-10);
}

#big-footer .footer-grid a {
  display: flex;
  align-items: center;
  color: black;
  font-weight: 500;
  padding: var(--spacing-1) var(--spacing-1);
}

/*jrヘッダーのスタイル*/
#header-jr {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 6px -2px var(--shadow-medium-2);
  position: relative;
  z-index: 1000;
}

#header-jr img {
  width: 80px;
  height: auto;
  margin: var(--spacing-2) 0 0 var(--spacing-5);
}

#header-jr .space {
  /* これより後の要素を右寄せ */
  margin-left: auto;
}

#header-jr .hamburger-menu__bar:first-child {
  top: 35%;
}

#header-jr .hamburger-menu__bar:nth-child(2) {
  top: 50%;
}

#header-jr .hamburger-menu__bar:last-child {
  top: 65%;
}

#header-jr .hamburger-menu--open .hamburger-menu__bar {
  top: 50%;
}

#header-jr .hamburger-menu {
  background-color: transparent;
}

#header-jr .hamburger-menu__bar {
  background: var(--color-gray-dark);
}

#jr-navigation .navigation__list {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: var(--color-gray-lighter);
  height: 100vh;
  list-style: none;
  padding: 0;
  margin: 0;
}

#jr-navigation .navigation__list-item {
  width: 90%;
  display: flex;
  align-items: center;
  border-bottom: solid 1px var(--color-gray-dark);
}

#jr-navigation .navigation__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-gray-dark);
  font-weight: 550;
  text-decoration: none;
  width: 100%;
  padding: var(--spacing-4) 0 var(--spacing-4) var(--spacing-4);
  transition: 0.2s;
}

#jr-navigation .navigation__link .material-icons {
  color: var(--color-gray-dark);
  margin-right: var(--spacing-1);
}

#jr-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100px;
  background-color: var(--color-gray-medium-2);
}

#jr-footer a {
  color: black;
  border-bottom: 1px solid black;
  font-size: var(--font-size-sm);
}

#jr-footer a:hover {
  opacity: 0.6;
}

#jr-footer p {
  margin: var(--spacing-1) 0;
  font-size: var(--font-size-sm);
}

#jr-footer .jr-footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

#jr-big-footer {
  width: 100vw;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-gray-lighter-2);
  border-top: 1px solid var(--color-gray-dark);
  padding: var(--spacing-8) var(--spacing-25);
}

#jr-big-footer img {
  width: 200px;
  height: auto;
  margin-top: auto;
}

#jr-big-footer .jr-big-footer-right {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
}

#jr-big-footer .jr-big-footer-right a {
  color: black;
}

#jr-big-footer .jr-big-footer-right a:hover {
  color: var(--color-orange);
}

.big-scroll-to-top {
  display: none;
}
/* メインコンテンツ */
.blue-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  font-size: var(--font-size-3xl);
  font-weight: bold;
  color: white;
  background-color: var(--official-line);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 100px,
      var(--color-primary-dark) 100px,
      var(--color-primary-dark) 101px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 100px,
      var(--color-primary-dark) 100px,
      var(--color-primary-dark) 101px
    );
}

.orange-line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  color: white;
  font-size: var(--font-size-3xl);
  font-weight: bold;
  background-color: var(--junior-primary-color);
}

.white-line {
  width: 100%;
  height: 50px;
}

.top-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 80px;
  background-color: white;
}

.top-link .top-link-txt {
  margin-left: var(--spacing-13);
  display: block;
  font-size: var(--font-size-base);
  color: var(--junior-primary-color);
}

.top-link .top-link-txt:hover {
  opacity: 0.6;
}

/* 共通セレクタ */
.title {
  text-align: center;
  padding: var(--spacing-13) 0 var(--spacing-8);
  font-size: var(--font-size-2xl);
  font-weight: bold;
  letter-spacing: var(--spacing-1);
}
.title-main {
  padding-bottom: var(--spacing-10);
}
.title-underline {
  width: 50px;
  height: 10px;
  background-color: var(--color-orange);
  margin: 0 auto;
}

.button {
  padding: var(--spacing-13);
}
.button a {
  padding: var(--spacing-4) var(--spacing-8);
  background-color: var(--color-orange);
  border: 1px solid var(--color-orange);
  border-radius: 70px;
  color: white;
  font-weight: bold;
  position: relative;
  transition: all 0.3s ease;
}
.button a:hover {
  opacity: 0.6;
}

.button-2 {
  padding: var(--spacing-13);
}
.button-2 a {
  margin: 0 auto;
  text-align: center;
  display: block;
  padding: var(--spacing-4) var(--spacing-13);
  width: 350px;
  background-color: var(--color-green-bright);
  border: 1px solid var(--color-green-bright);
  border-radius: 70px;
  color: white;
  font-weight: bold;
  position: relative;
  transition: all 0.3s ease;
}
.button-2 a:hover {
  opacity: 0.6;
}
.button-2-link::after {
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  width: 13px;
  height: 13px;
  border-top: 3px solid var(--color-white);
  border-right: 3px solid var(--color-white);
  transform: rotate(45deg);
}

.button-emp {
  margin-top: var(--spacing-13);
  font-weight: bold;
  font-size: var(--font-size-base);
  letter-spacing: 5px;
}
.button-emp-inner {
  display: flex;
  justify-content: center;
  margin: var(--spacing-5) auto var(--spacing-25);
}
.button-emp-inner a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  border-radius: 20px;
  padding: var(--spacing-13) var(--spacing-13);
  background-color: var(--color-green-bright);
  border: 1px solid var(--color-green-bright);
  color: white;
  position: relative;
  transition: all 0.3s ease;
}
.button-emp-inner a:hover {
  opacity: 0.6;
}
.button-emp-inner a em {
  font-size: var(--font-size-2xl);
}
.button-emp-inner-link::after {
  content: '';
  margin: auto var(--spacing-4) auto auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  width: 20px;
  height: 20px;
  border-top: 5px solid var(--color-white);
  border-right: 5px solid var(--color-white);
  transform: rotate(45deg);
}

.Jr-logo {
  float: left;
  width: 10vw;
  min-width: 100px;
  padding: var(--spacing-5) 0 var(--spacing-1);
  transition: all 0.3s ease;
}
.Jr-logo:hover {
  opacity: 0.6;
}

.header-left {
  line-height: normal !important;
}

/* ここからメイン */
main {
  padding-top: 12rem;
  height: auto;
}

.top {
  background-image: url('../../../img/junior/top/top-image.png');
  background-size: cover;
  height: 750px;
  padding: var(--spacing-25);
  position: relative;
}
.top-message {
  font-size: var(--font-size-4xl);
  font-weight: bold;
}
.top-message p:first-child {
  display: inline-block;
  font-size: var(--font-size-xl);
  font-weight: 450;
  color: var(--color-white);
  background-color: var(--color-orange);
  text-align: center;
  border-radius: 10px;
  padding: var(--spacing-5);
  margin-bottom: var(--spacing-13);
}
.top-message img {
  padding-top: var(--spacing-4);
  width: 45%;
}
.top-image {
  position: absolute;
  bottom: 80px;
}
.top-image img {
  margin-right: var(--spacing-5);
  width: 200px;
}

/* ここからお知らせ */
.news {
  padding-bottom: var(--spacing-10);
  text-align: center;
}
.news-contents {
  width: 65vw;
  margin: 0 auto;
}
.news-contents-inner {
  display: flex;
  border-bottom: 3px solid var(--color-gray-medium-2);
}
.news-contents-inner a {
  transition: all 0.3s ease;
}
.news-contents-inner a:hover {
  opacity: 0.6;
}
.news-contents-inner-1 {
  padding-right: var(--spacing-5);
  display: flex;
}
.news-contents span:nth-child(2) {
  width: 100px;
  position: relative;
  color: white;
}
.news-contents span:nth-child(2)::before {
  content: '';
  display: block;
  width: 90px;
  height: 25px;
  background-color: var(--color-orange);
  position: absolute;
  z-index: -1;
}
.news-contents span:nth-child(3) {
  width: 400px;
  text-align: left;
  justify-content: left;
  padding-left: var(--spacing-2);
}
.news span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  color: var(--color-orange);
}

.main-message {
  background-image: url('../../../img/junior/top/message-bg.png');
  position: relative;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 98;
}
.main-message-contents {
  padding-top: var(--spacing-13);
  margin: 0 auto;
  width: 80%;
  overflow: hidden;
  position: relative;
}
.main-message-contents-inner {
  top: 20vh;
  left: 9vw;
}
.main-message-contents-inner-image {
  position: absolute;
  z-index: -1;
  left: 15vw;
}
.main-message-contents-inner-sentence {
  margin: 0 auto;
  text-align: center;
  width: 60%;
}
.main-message-contents-inner-sentence span {
  font-weight: bold;
  color: var(--color-blue-medium-2);
}
.main-message-contents-inner-title {
  font-weight: bold;
  font-size: var(--font-size-xl);
  text-align: center;
  letter-spacing: var(--spacing-1);
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
  margin: 0 auto;
  transform: skew(-10deg);
}
.main-message-contents-inner-title span {
  background: linear-gradient(transparent 80%, var(--color-yellow-highlight) 60%);
}

.merit {
  text-align: center;
  margin: 0 auto;
  padding-bottom: var(--spacing-18);
}
.merit-inner {
  display: flex;
  justify-content: space-around;
}
.merit-inner-card {
  border-radius: 20px;
  margin-top: var(--spacing-8);
  padding: var(--spacing-10);
  width: 30%;
  background-color: var(--color-white);
}
.merit-inner-card-number {
  margin: 0 auto;
  padding: var(--spacing-1);
  color: var(--color-white);
  font-weight: bold;
  background-color: var(--color-orange);
  width: 8vw;
}
.merit-inner-card-title {
  letter-spacing: 1px;
  padding-top: var(--spacing-2);
  font-weight: bold;
  font-size: var(--font-size-base);
}
.merit-inner-card-sentence {
  margin-top: var(--spacing-4);
  text-align: justify;
}
.merit-inner-card img {
  margin-top: var(--spacing-5);
  width: 80%;
}
.merit-inner-card-image {
  padding-top: var(--spacing-13);
}
.merit-inner-card-image-2 {
  padding: var(--spacing-2) var(--spacing-8) var(--spacing-8);
}

.reason {
  padding-top: var(--spacing-13);
  text-align: center;
  height: auto;
}
.reason-inner {
  text-align: left;
}
.reason-inner-sub {
  margin-top: var(--spacing-10);
  border-radius: 0 200px 200px 0;
  background-color: var(--color-orange-medium);
  display: inline-block;
  padding-left: 15vw;
  text-align: left;
}
.reason-inner-title {
  margin: var(--spacing-4) var(--spacing-13) var(--spacing-4) 0;
  display: inline-block;
  text-align: center;
}
.reason-inner-title-re {
  background-color: white;
  color: var(--color-orange-medium);
  border-radius: 10px;
  padding: var(--spacing-1) var(--spacing-2);
  font-weight: bold;
}
.reason-inner-title-number {
  font-weight: bold;
  font-size: var(--font-size-xl);
  color: white;
}
.reason-inner-title-sentence {
  line-height: 40px;
  display: inline-block;
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: white;
  text-align: left;
  padding-right: var(--spacing-25);
}
.reason-pack {
  padding-top: var(--spacing-6);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.reason-pack-bubble {
  position: absolute;
  top: -15vw;
  left: 50vw;
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 1.3s 0s ease-out;
}
.reason-pack-bubble img {
  width: 85%;
}
.reason-pack-sentence {
  padding-left: 5vw;
  text-align: left;
  width: 45vw;
}
.reason-pack-sentence span {
  font-size: var(--font-size-xs);
}
.reason-pack-sentence em {
  font-weight: bold;
  color: var(--color-orange);
}
.reason-point {
  border-radius: 20px;
  padding: 0 var(--spacing-13);
  display: flex;
  position: relative;
  background-color: var(--color-yellow-lightest);
  margin-top: var(--spacing-13);
}
.reason-point img {
  padding-top: var(--spacing-5);
  height: 250px;
  margin-right: var(--spacing-5);
}
.reason-point-kumehara {
  margin: auto 0;
  text-align: left;
  padding-right: var(--spacing-5);
}
.reason-point-kumehara-title {
  color: var(--color-orange);
  font-weight: bold;
  font-size: var(--font-size-base);
}
.reason-point-kumehara-sentence {
  padding-top: var(--spacing-5);
  background-size: 100%;
  background-repeat: no-repeat;
}
.reason-merit {
  width: 80vw;
  padding: var(--spacing-6) var(--spacing-13);
  background-color: var(--color-orange-lightest);
  border-radius: 50px;
  margin: var(--spacing-13) auto;
}
.reason-merit-subtitle {
  color: var(--color-orange);
}
.reason-merit-title {
  color: var(--color-orange);
  font-size: var(--font-size-xl);
  font-weight: bold;
}
.reason-merit-pack {
  display: flex;
  justify-content: space-around;
  margin: var(--spacing-13) 0;
}
.reason-merit-pack-inner {
  padding: var(--spacing-6);
  background-color: white;
  width: 20vw;
  border-radius: 50px;
}
.reason-merit-pack-inner-number {
  font-size: var(--font-size-xl);
  color: var(--color-orange-medium);
  font-weight: bold;
}
.reason-merit-pack-inner-sentence p {
  display: inline;
  background: linear-gradient(transparent 60%, var(--color-yellow-highlight) 60%);
}
.reason-voice {
  margin: var(--spacing-13) auto 0;
  border-radius: 20px;
  background-color: var(--color-yellow-lightest);
  padding-bottom: var(--spacing-13);
}
.reason-voice h2 {
  color: var(--color-orange);
  padding-top: var(--spacing-13);
  font-weight: bold;
  font-size: 2vw;
}
.reason-voice-pack {
  padding: var(--spacing-13) var(--spacing-25);
  text-align: left;
}
.reason-voice-pack-inner {
  border-radius: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: var(--color-white);
  padding: var(--spacing-8) var(--spacing-13);
}
.reason-voice-pack-inner:first-child {
  margin-bottom: var(--spacing-6);
}
.reason-voice-pack-inner-image img {
  width: 100px;
}
.reason-voice-pack-inner-sentence {
  width: 750px;
}
.reason-button {
  padding: var(--spacing-5);
}
.reason-button a {
  padding: var(--spacing-5) var(--spacing-20);
  background-color: var(--color-green-bright);
  border: 1px solid var(--color-green-bright);
  border-radius: 70px;
  color: white;
  position: relative;
  transition: all 0.3s ease;
}
.reason-button a:hover {
  opacity: 0.7;
}

.course {
  text-align: center;
  height: auto;
  padding-bottom: var(--spacing-10);
  background-color: var(--color-orange-light);
}
.course-inner {
  padding-top: var(--spacing-13);
  margin: 0 auto;
}
.course-inner-title {
  padding-bottom: var(--spacing-10);
  font-size: var(--font-size-2xl);
  font-weight: bold;
  letter-spacing: var(--spacing-1);
}
.course-inner-underline {
  width: 50px;
  height: 10px;
  background-color: var(--color-orange);
  margin: 0 auto var(--spacing-13);
}
.course-inner-sentence {
  padding-bottom: var(--spacing-13);
}
.course-inner-pack {
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
}
.course-inner-pack-sub {
  width: 23vw;
  border: 5px solid var(--color-pink-light);
  border-radius: 50px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.course-inner-pack-sub-subtitle {
  background-color: var(--color-orange-light);
  border-radius: 50px;
  width: 22vw;
  margin: calc(-1 * var(--spacing-2)) auto;
}
.course-inner-pack-sub-title {
  background-color: var(--color-pink-light);
  padding: var(--spacing-2);
  width: 20vw;
  font-size: 1.5vw;
  font-weight: bold;
  color: white;
  margin: var(--spacing-5) auto;
  flex-shrink: 0;
}
.course-inner-pack-sub-title::after {
  content: '';
  border-top: 25px solid var(--color-pink-light);
  border-right: 20px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 20px solid transparent;
  position: absolute;
  right: 165px;
}
.course-inner-pack-sub-sentence {
  text-align: left;
  width: 20vw;
  margin: 0 auto;
  padding-top: var(--spacing-2);
}
.course-inner-pack-sub-img {
  width: 20vw;
  padding: var(--spacing-5) var(--spacing-2) 0 var(--spacing-2);
  margin: 0 auto;
}
.course-inner-pack-1-img {
  flex-shrink: 0;
}
.course-inner-pack-2 {
  border: 5px solid var(--color-cyan);
}
.course-inner-pack-2-title {
  background-color: var(--color-cyan);
}
.course-inner-pack-2-title::after {
  border-top: 25px solid var(--color-cyan);
}
.course-inner-pack-3 {
  border: 5px solid var(--color-yellow-bright);
}
.course-inner-pack-3-title {
  background-color: var(--color-yellow-bright);
}
.course-inner-pack-3-title::after {
  border-top: 25px solid var(--color-yellow-bright);
}
.course-inner-pack-3-img {
  flex-shrink: 0;
}

.course .button-2 {
  padding: var(--spacing-13) 0;
}
.course .button-2 a {
  margin: 0 auto;
  width: 220px;
  padding: var(--spacing-4) var(--spacing-8);
}

.trial {
  text-align: center;
  height: auto;
  background-color: var(--color-orange);
  padding-bottom: var(--spacing-22);
}
.trial-inner {
  padding-top: var(--spacing-13);
  position: relative;
}
.trial-inner-bubble {
  position: absolute;
  width: 15vw;
  right: 13vw;
  top: -5vw;
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 1.3s 0s ease-out;
}
.trial-inner .title {
  color: var(--color-orange-light);
}
.trial-inner .title-underline {
  background-color: var(--color-white);
}
.trial-inner-sentence {
  color: white;
}
.trial-inner-contact {
  margin: var(--spacing-13) auto 0;
  padding: var(--spacing-8) var(--spacing-6);
  background-color: white;
  width: 70vw;
  border: 12px solid var(--color-orange-light);
}
.trial-inner-contact-title {
  color: white;
}
.trial-inner-contact hr {
  border-top: 1px solid rgb(83, 80, 80);
  height: 2em;
  text-align: center;
  overflow: visible;
}
.trial-inner-contact hr::after {
  content: 'お問い合わせはこちら';
  background: white;
  color: black;
  display: inline-block;
  height: 2vw;
  position: relative;
  top: -2.5vh;
  padding: 0 var(--spacing-4);
  font-weight: bold;
  font-size: var(--font-size-2xl);
}
.trial-inner-contact-pack {
  margin: var(--spacing-5) var(--spacing-5);
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.trial-inner-contact-pack-number {
  font-weight: bold;
  font-size: var(--font-size-3xl);
  text-align: left;
}
.trial-inner-contact-pack p {
  text-align: left;
  position: relative;
  font-size: var(--font-size-md);
}
.trial-inner-contact-pack-button {
  text-align: right;
}
.trial-inner-contact-pack-button a {
  font-weight: bold;
  font-size: var(--font-size-2xl);
  padding: var(--spacing-5) var(--spacing-10);
  background-color: var(--color-green-bright);
  border: 1px solid var(--color-green-bright);
  border-radius: 70px;
  color: white;
  position: relative;
  transition: all 0.3s ease;
}
.trial-inner-contact-pack-button a:hover {
  opacity: 0.6;
}
.trial-inner-contact-pack-button-link::after {
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: clamp(1rem, 2vw, 2rem);
  width: clamp(0.5rem, 1vw, 1rem);
  height: clamp(0.5rem, 1vw, 1rem);
  border-top: 3px solid var(--color-white);
  border-right: 3px solid var(--color-white);
  transform: rotate(45deg);
}
.trial-inner-pack {
  display: flex;
  justify-content: space-around;
  margin: var(--spacing-13);
}
.trial-inner-pack-c {
  background-color: var(--color-orange-light);
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.trial-inner-pack-c-icon {
  text-align: center;
}
.trial-inner-pack-c-icon-sentence {
  font-weight: bold;
  font-size: var(--font-size-md);
  display: inline;
  background: linear-gradient(transparent 60%, var(--color-yellow-highlight) 60%);
}
.trial-inner-pack-c-icon-image {
  height: 8vw;
  padding-top: 1vw;
  display: block;
  margin: 0 auto;
}

.question {
  height: auto;
  padding-bottom: var(--spacing-10);
}
.question-inner {
  padding-top: var(--spacing-13);
  text-align: center;
  /* 質問 */
  /* 答え */
  /* 質問を開いた時の仕様 */
  /* --答えの高さ */
  /* 質問をクリックした時のアイコンの動き */
}
.question-inner-title {
  padding-bottom: var(--spacing-10);
  font-size: var(--font-size-2xl);
  font-weight: bold;
  letter-spacing: var(--spacing-1);
}
.question-inner-underline {
  width: 50px;
  height: 10px;
  background-color: var(--color-orange);
  margin: 0 auto;
}
.question-inner-pack,
.question-inner-pack:before .question-inner-pack::after {
  box-sizing: border-box;
}
.question-inner-pack {
  text-align: left;
  border-top: 1px solid var(--color-gray-medium);
  margin: var(--spacing-13) 15rem;
}
.question-inner-pack-actab p,
.question-inner-pack-actab-content p {
  padding-left: var(--spacing-15);
}
.question-inner-pack-actab-content {
  display: flex;
  align-items: center;
}
.question-inner-pack-actab-content::before {
  content: url('../../../img/junior/faq/A.png');
  display: block;
  flex-shrink: 0;
  margin-left: 16px;
  margin-right: var(--spacing-2);
}
.question-inner-pack .question-inner-pack-actab {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 1px;
  color: var(--color-navy-darker);
}
.question-inner-pack .question-inner-pack-actab input {
  position: absolute;
  opacity: 0;
}
.question-inner-pack .question-inner-pack-actab label {
  font-weight: bold;
  position: relative;
  display: block;
  margin: 0 0 0 0;
  padding: var(--spacing-4) var(--spacing-8) var(--spacing-4) var(--spacing-4);
  cursor: pointer;
  border-bottom: 1px solid var(--color-gray-medium);
}
.question-inner-pack .question-inner-pack-actab .question-inner-pack-actab-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease;
  background: var(--color-gray-lightest);
}
.question-inner-pack .question-inner-pack-actab .question-inner-pack-actab-content p {
  margin: var(--spacing-4);
}
.question-inner-pack .question-inner-pack-actab input:checked ~ .question-inner-pack-actab-content {
  max-height: 40em;
}
.question-inner-pack .question-inner-pack-actab input[type='checkbox'] + label span::before,
.question-inner label span::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: var(--color-gray-medium);
  width: 20px;
  height: 2px;
  transition:
    transform 0.3s ease-in,
    opacity 0.5s;
}
.question-inner-pack .question-inner-pack-actab input[type='checkbox'] + label span::after {
  transform: rotate(90deg);
}
.question-inner-pack
  .question-inner-pack-actab
  input[type='checkbox']:checked
  + label
  span::before {
  transform: rotate(180deg);
}
.question-inner-pack .question-inner-pack-actab input[type='checkbox']:checked + label span::after {
  transform: rotate(180deg);
  opacity: 0;
}
.question-inner label::before {
  content: url('../../../img/junior/faq/Q.png');
  display: flex;
  position: absolute;
  left: 16px;
  bottom: 1px;
}

.reason-pack-sentence-res {
  display: none;
}

.title-res {
  display: none;
}

.main-message-res {
  display: none;
}

.res {
  display: none;
}

.question-inner-pack-actab-content p {
  padding-left: 0 !important;
}

@media (min-width: 1001px) {
}

@media (max-width: 1000px) {
  .title {
    font-size: var(--font-size-xl);
  }
  .footer-list {
    width: auto;
    padding: 0 var(--spacing-25);
  }
  .top {
    padding: var(--spacing-13);
    height: 630px;
  }
  .top-message {
    font-size: var(--font-size-3xl);
  }
  .top-message p:first-child {
    font-size: var(--font-size-base);
    width: 30vw;
  }
  .top-image {
    bottom: 50px;
  }
  .main-message-contents-inner-sentence {
    width: 70%;
  }
  .main-message-contents-inner-title {
    font-weight: bold;
    font-size: var(--font-size-base);
  }
  .merit {
    width: auto;
  }
  .merit-inner {
    display: block;
  }
  .merit-inner-card {
    margin: var(--spacing-6) auto;
    width: 500px;
  }
  .reason-inner-title-sentence span {
    font-size: var(--font-size-sm);
  }
  .reason-inner-sub {
    padding-left: var(--spacing-5);
  }
  .reason-pack {
    display: block;
    width: auto;
  }
  .reason-pack-sentence {
    padding: var(--spacing-13) var(--spacing-25);
    width: auto;
  }
  .reason-point {
    padding: var(--spacing-6) var(--spacing-6) 0 var(--spacing-6);
    width: auto;
    margin-right: var(--spacing-25);
    margin-left: var(--spacing-25);
  }
  .reason-point-image {
    top: -87px;
    left: -1vw;
  }
  .reason-point-image img {
    width: 80%;
  }
  .reason-voice {
    width: 80vw;
  }
  .reason-voice-pack {
    padding: var(--spacing-6) var(--spacing-13);
  }
  .reason-voice-pack-inner {
    padding: var(--spacing-4) var(--spacing-6);
  }
  .reason-voice-pack-inner-image {
    margin-right: var(--spacing-2);
  }
  .course-inner {
    width: auto;
    margin: 0 auto;
  }
  .course-inner-pack {
    display: block;
  }
  .course-inner-pack-sub {
    margin: 0 auto var(--spacing-13) auto;
    width: 50vw;
  }
  .course-inner-pack-sub-subtitle {
    width: 40vw;
  }
  .course-inner-pack-sub-title {
    width: 30vw;
  }
  .course-inner-pack-sub-title::after {
    right: 232px;
  }
  .course-inner-pack-sub-sentence {
    width: 30vw;
  }
  .course-inner-pack-sub-img {
    width: 30vw;
  }
  .course .button-2 a {
    margin: 0 auto;
    width: 250px;
    font-size: var(--font-size-sm);
  }
  .trial-inner-pack-c-icon-sentence {
    font-size: var(--font-size-xs);
  }
  .trial-inner-contact hr::after {
    top: -1.5vh;
  }
  .trial-inner-contact-pack {
    display: block;
    text-align: center;
  }
  .trial-inner-contact-pack p {
    padding-left: var(--spacing-13);
  }
  .trial-inner-contact-pack-number {
    text-align: center;
    font-size: var(--font-size-2xl);
  }
  .trial-inner-contact-pack-button {
    text-align: center;
    margin: var(--spacing-6) 0;
  }
  .trial-inner-contact-pack-button a {
    padding: var(--spacing-2) var(--spacing-8);
    font-size: var(--font-size-base);
  }
  /* 768px以下のスタイル */
  .top {
    height: 460px;
  }
  .top-message {
    font-size: var(--font-size-lg);
  }
  .top-message p:first-child {
    padding: var(--spacing-2);
    font-size: var(--font-size-xs);
  }
  .top-image img {
    width: 120px;
  }
  .main-message-contents {
    width: 100%;
  }
  .main-message-contents-inner-sentence {
    width: 75%;
  }
  .main-message-contents-inner-title {
    font-size: var(--font-size-md);
  }
  .news-contents {
    width: 90vw;
  }
  .merit-inner {
    padding: var(--spacing-6) var(--spacing-13);
  }
  .merit-inner-icon-mv-inner-number {
    width: 20vw;
  }
  .reason-inner-title {
    margin: var(--spacing-4) var(--spacing-6) var(--spacing-4) 0;
  }
  .reason-inner-title-sentence {
    padding-right: var(--spacing-2);
    font-size: var(--font-size-base);
  }
  .reason-pack-sentence {
    padding: var(--spacing-13) 6.8rem;
  }
  .reason-point {
    flex-direction: column-reverse;
  }
  .reason-point img {
    width: 30vw;
  }
  .reason-merit-pack {
    display: block;
  }
  .reason-merit-pack-inner {
    width: 50vw;
    margin: var(--spacing-4) auto;
  }
  .reason-voice h2 {
    font-size: var(--font-size-base);
  }
  .course-inner-pack {
    flex-direction: column;
    align-items: center;
  }
  .course-inner-pack-1,
  .course-inner-pack-2,
  .course-inner-pack-3 {
    width: 85vw;
    margin-bottom: var(--spacing-13);
  }
  .course-inner-pack-1-button,
  .course-inner-pack-2-button,
  .course-inner-pack-3-button {
    margin: var(--spacing-2);
  }
  .course-inner-pack-1-button a,
  .course-inner-pack-2-button a,
  .course-inner-pack-3-button a {
    font-size: var(--font-size-sm);
  }
  .course-inner-pack-1-subtitle,
  .course-inner-pack-2-subtitle,
  .course-inner-pack-3-subtitle {
    width: 70vw;
    font-size: var(--font-size-sm);
  }
  .course-inner-pack-1-title,
  .course-inner-pack-2-title,
  .course-inner-pack-3-title {
    width: 65vw;
    font-size: var(--font-size-base);
  }
  .course-inner-pack-1-title::after,
  .course-inner-pack-2-title::after,
  .course-inner-pack-3-title::after {
    right: 135px;
  }
  .course-inner-pack-1-sentence,
  .course-inner-pack-2-sentence,
  .course-inner-pack-3-sentence {
    width: 65vw;
  }
  .course-inner-pack-1-img,
  .course-inner-pack-2-img,
  .course-inner-pack-3-img {
    width: 100%;
  }
  .question-inner-pack {
    margin: var(--spacing-13) var(--spacing-15);
  }
  .footer-sentence {
    font-size: var(--font-size-xs);
  }
  .trial-inner-contact-pack {
    display: block;
    text-align: center;
  }
  .trial-inner-contact-pack p {
    padding: 0;
  }
  .trial-inner-contact-pack-number {
    text-align: center;
    font-size: var(--font-size-xl);
  }
  .trial-inner-contact-pack-button {
    margin: var(--spacing-2) 0;
    text-align: center;
  }
  .trial-inner-contact-pack-button a {
    padding: var(--spacing-2) var(--spacing-8);
    font-size: var(--font-size-sm);
  }
  /* 480px以下のスタイル */
  .non-res {
    display: none;
  }
  .res {
    display: block;
  }
  .Jr-logo {
    height: 80px;
    width: 60px;
  }
  main {
    padding-top: var(--spacing-15);
  }
  .title {
    font-size: var(--font-size-xl);
  }
  .title-underline {
    width: 30px;
    height: 5px;
  }
  .title-res {
    padding-bottom: var(--spacing-6);
    display: block;
    font-weight: 900;
    font-size: var(--font-size-lg);
    width: 100%;
    padding-top: var(--spacing-6);
    letter-spacing: 1px;
    transform: skew(-10deg);
    text-align: center;
    margin: 0 auto;
  }
  .title-res span {
    background: linear-gradient(transparent 80%, var(--color-yellow-highlight) 60%);
  }
  .top {
    padding: var(--spacing-6) 0 0 var(--spacing-5);
    height: 240px;
  }
  .top-message {
    font-size: var(--font-size-sm);
    background-size: cover;
  }
  .top-message p:first-child {
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-sm);
  }
  .top-message img {
    padding: 0;
  }
  .top-image {
    bottom: 0;
  }
  .top-image img {
    margin: 0;
    width: 70px;
  }
  .news {
    padding-bottom: var(--spacing-10);
  }
  .news-inner {
    padding-top: var(--spacing-6);
  }
  .news-contents {
    width: auto;
    padding: 0 var(--spacing-10);
  }
  .news-contents-inner {
    flex-direction: column;
    border-bottom: 1px solid var(--color-gray-medium-2);
  }
  .main-message-res {
    padding-bottom: var(--spacing-13);
    display: block;
    font-size: var(--font-size-base);
  }
  .main-message-res span {
    font-weight: bold;
    color: var(--color-blue-medium-2);
  }
  .main-message-contents {
    text-align: center;
    padding: 0;
    width: auto;
  }
  .main-message-contents-inner-title {
    display: none;
  }
  .main-message-contents-inner-image {
    left: 0;
  }
  .main-message-contents-inner-sentence {
    display: none;
  }
  .merit {
    margin-top: calc(-1 * var(--spacing-8));
    padding: 0 0 var(--spacing-6) 0;
  }
  .merit-inner {
    padding: 0;
    margin: var(--spacing-6);
  }
  .merit-inner-card {
    width: auto;
  }
  .merit-inner-card-number {
    width: 25vw;
  }
  .merit-inner-card-title {
    font-size: var(--font-size-lg);
  }
  .reason {
    padding: 0;
  }
  .reason-title {
    padding-bottom: var(--spacing-5);
    font-size: var(--font-size-base);
  }
  .reason-underline {
    width: 30px;
    height: 5px;
    margin-bottom: var(--spacing-6);
  }
  .reason-inner {
    width: 99vw;
  }
  .reason-inner-sub {
    display: flex;
    align-items: center;
    width: 96vw;
    margin: 0;
  }
  .reason-inner-title {
    margin: var(--spacing-1);
  }
  .reason-inner-title-re {
    font-size: var(--font-size-xs);
  }
  .reason-inner-title-number {
    font-size: var(--font-size-base);
  }
  .reason-inner-title-sentence {
    line-height: 25px;
    font-size: var(--font-size-lg);
    padding-right: var(--spacing-10);
    padding-left: var(--spacing-2);
  }
  .reason-inner-title-sentence span {
    font-size: var(--font-size-xs);
  }
  .reason-pack {
    display: block;
  }
  .reason-pack-sentence {
    padding: 0 var(--spacing-6) var(--spacing-2);
    font-size: var(--font-size-sm);
  }
  .reason-pack-sentence em {
    font-weight: bold;
    color: var(--color-orange);
  }
  .reason-pack-bubble {
    top: -49vw;
    left: 65vw;
  }
  .reason-point {
    display: block;
    padding: 0;
    margin: var(--spacing-6);
  }
  .reason-point img {
    display: none;
  }
  .reason-point-title {
    padding-top: var(--spacing-6);
    font-size: var(--font-size-xs);
  }
  .reason-point-kumehara {
    padding: var(--spacing-6);
  }
  .reason-point-kumehara-title {
    font-size: var(--font-size-xs);
  }
  .reason-point-kumehara img {
    width: 50vw;
  }
  .reason-merit {
    padding: var(--spacing-6);
    width: 85vw;
  }
  .reason-merit-title {
    font-size: var(--font-size-lg);
  }
  .reason-merit-pack {
    display: block;
    margin: var(--spacing-6) 0;
  }
  .reason-merit-pack-inner {
    padding: var(--spacing-6) 0;
    width: 100%;
    margin-bottom: var(--spacing-2);
  }
  .reason-merit-pack-inner-image {
    width: 50%;
    margin: 0 auto;
  }
  .reason-merit-pack-inner-number {
    font-size: var(--font-size-base);
  }
  .reason-voice {
    width: 85vw;
    padding-bottom: var(--spacing-6);
  }
  .reason-voice h2 {
    padding-top: var(--spacing-6);
  }
  .reason-voice-pack {
    padding: 0 var(--spacing-5);
    display: block;
  }
  .reason-voice-pack-inner {
    padding: var(--spacing-4) var(--spacing-6) var(--spacing-4) var(--spacing-8);
    display: block;
    margin: 5vw auto;
    border-radius: 5vw;
  }
  .reason-voice-pack-inner-image {
    width: 55px;
  }
  .reason-voice-pack-inner-sentence {
    width: auto;
  }
  .course-inner {
    padding-top: var(--spacing-6);
  }
  .course-inner-title {
    padding-bottom: var(--spacing-5);
    font-size: var(--font-size-base);
  }
  .course-inner-underline {
    width: 30px;
    height: 5px;
    margin-bottom: var(--spacing-6);
  }
  .course-inner-sentence {
    font-size: var(--font-size-sm);
    padding: 0 var(--spacing-6) var(--spacing-6) var(--spacing-6);
  }
  .course-inner-pack {
    flex-direction: column;
    margin-top: var(--spacing-6);
  }
  * > .course-inner-pack-sub {
    width: 90vw;
    margin-bottom: var(--spacing-18);
  }
  * > .course-inner-pack-sub-subtitle {
    padding: 0;
    width: 70vw;
    font-size: var(--font-size-base);
    margin-top: calc(-1 * var(--spacing-5));
  }
  * > .course-inner-pack-sub-title {
    width: 80vw;
    font-size: var(--font-size-base);
  }
  * > .course-inner-pack-sub-title::after {
    right: 144px;
  }
  * > .course-inner-pack-sub-sentence {
    width: 75vw;
    font-size: var(--font-size-sm);
  }
  * > .course-inner-pack-sub-img {
    width: 75vw;
  }
  * > .course-inner-pack-sub-button {
    padding: var(--spacing-6);
  }
  .trial {
    padding-bottom: var(--spacing-8);
  }
  .trial-inner {
    padding-top: var(--spacing-6);
  }
  .trial-inner-bubble {
    right: 0;
    width: 30vw;
    top: -15vw;
  }
  .trial-inner-title {
    padding-bottom: var(--spacing-5);
    font-size: var(--font-size-base);
  }
  .trial-inner-underline {
    width: 30px;
    height: 5px;
  }
  .trial-inner-sentence {
    padding: 0 var(--spacing-6);
    font-size: var(--font-size-sm);
  }
  .trial-inner-pack {
    display: flex;
    flex-wrap: wrap;
  }
  .trial-inner-pack-c {
    margin: var(--spacing-2) auto;
    width: 40vw;
    height: 40vw;
  }
  .trial-inner-pack-c-icon-image {
    height: 15vw;
  }
  .trial-inner-pack-c-icon-sentence {
    font-size: var(--font-size-sm);
  }
  .trial-inner-contact {
    margin-top: var(--spacing-6);
    padding: var(--spacing-2) var(--spacing-6) var(--spacing-6);
    width: 85vw;
  }
  .trial-inner-contact-pack {
    margin: 0 auto;
    display: block;
  }
  .trial-inner-contact-pack-number {
    font-size: var(--font-size-xl);
    text-align: center;
  }

  .trial-inner-contact-pack p {
    margin-left: var(--spacing-5);
    text-align: center;
  }
  .trial-inner-contact-pack-button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
  }
  .trial-inner-contact-pack-button a {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-5);
    display: block;
    width: 230px;
  }
  .trial-inner-contact hr::after {
    font-size: var(--font-size-lg);
    top: -31px;
    padding: var(--spacing-4) var(--spacing-3);
  }
  .question {
    background-color: var(--color-yellow-lightest);
    padding-bottom: var(--spacing-13);
  }
  .question-inner {
    padding-top: var(--spacing-6);
  }
  .question-inner-title {
    padding-bottom: var(--spacing-6);
    font-size: var(--font-size-base);
  }
  .question-inner-underline {
    width: 30px;
    height: 5px;
    margin-bottom: var(--spacing-6);
  }
  .question-inner-pack {
    background-color: white;
    margin: 0;
  }
  .question-inner-pack-actab {
    margin-bottom: 0;
  }
  .question-inner-pack-actab label::before {
    display: block;
    position: relative;
    float: left;
    padding-right: var(--spacing-8);
  }
  .question-inner-pack-actab span {
    padding-left: 0;
  }
  .question-inner-pack .question-inner-pack-actab label p {
    padding-left: 0;
  }
  .question-inner-pack .question-inner-pack-actab label {
    display: flex;
    align-items: center;
  }
  .footer-list {
    display: none;
  }
  .footer-sentence {
    font-size: var(--font-size-xs);
  }
  .button-2 a {
    width: 200px;
    padding: var(--spacing-4) var(--spacing-6);
  }

  .question-inner-pack .question-inner-pack-actab label {
    padding: var(--spacing-6);
    padding-left: 0;
  }

  .question-inner label::before {
    left: 16px;
    bottom: -2px;
  }

  .question-inner-pack-actab-content {
    display: flex;
    justify-content: left;
    align-items: center;
  }

  .question-inner-pack-actab p,
  .question-inner-pack-actab-content p {
    font-size: var(--font-size-base);
    margin-right: var(--spacing-8);
  }

  .question-inner-pack-actab-content p {
    padding-left: var(--spacing-5);
  }

  footer {
    margin-bottom: 0 !important;
  }

  .top-link {
    justify-content: center;
  }

  .top-link .top-link-txt {
    margin-left: 0;
  }

  .merit-inner-card-sentence {
    text-align: center;
    font-size: var(--font-size-sm);
  }

  .reason-inner-title-re {
    padding: var(--spacing-0) var(--spacing-2);
  }

  .reason-merit-subtitle,
  .reason-merit-pack-inner-sentence,
  .reason-voice-pack-inner-sentence {
    font-size: var(--font-size-sm);
  }

  .button-emp-inner a {
    width: 300px;
    padding: var(--spacing-6) var(--spacing-6);
  }

  .button-emp-inner-link::after {
    width: 10px;
    height: 10px;
    border-top: 3px solid var(--color-white);
    border-right: 3px solid var(--color-white);
  }

  .button-emp-inner a em {
    font-size: var(--font-size-base);
  }

  .button-2-link::after {
    width: 10px;
    height: 10px;
    border-top: 3px solid var(--color-white);
    border-right: 3px solid var(--color-white);
  }

  .reason-point-kumehara-sentence {
    padding: 0;
  }

  .title-main {
    font-size: var(--font-size-2xl);
  }
}

@media (min-width: 1280px) {
}

@media (min-width: 1001px) and (max-width: 1279px) {
  .question-inner-pack .question-inner-pack-actab label {
    padding: var(--spacing-6);
  }

  .question-inner label::before {
    left: 16px;
    bottom: 5px;
  }

  .question-inner-pack-actab-content {
    display: flex;
    justify-content: left;
    align-items: center;
  }

  .question-inner-pack-actab p,
  .question-inner-pack-actab-content p {
    font-size: var(--font-size-lg);
  }

  .top {
    background-position: -200px center;
  }

  .course-inner-pack-sub-subtitle,
  .course-inner-pack-sub-sentence {
    font-size: var(--font-size-xs);
  }

  .main-message-contents-inner-sentence,
  .merit-inner-card-sentence,
  .reason-pack-sentence,
  .reason-point-kumehara-sentence,
  .reason-merit-subtitle,
  .reason-merit-pack-inner-sentence {
    font-size: var(--font-size-base);
  }

  .trial-inner-sentence,
  .course-inner-sentence,
  .merit-inner-card-title,
  .reason-merit-title {
    font-size: var(--font-size-xl) !important;
  }

  .reason-point-kumehara-title {
    font-size: var(--font-size-lg);
  }

  .course .button-2 a {
    width: 200px;
    font-size: var(--font-size-base);
  }

  .reason-voice-pack-inner-sentence {
    padding-left: var(--spacing-4);
    font-size: var(--font-size-base);
  }

  .jr-big-footer-right {
    font-size: var(--font-size-md);
  }

  .navigation__link {
    font-size: var(--font-size-lg);
  }

  .about-message-pack-inner {
    font-size: var(--font-size-base);
  }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .top {
    height: 460px;
  }

  .top-message {
    font-size: var(--font-size-2xl);
  }

  .top-image img {
    width: 120px;
  }

  .jr-big-footer-right {
    font-size: var(--font-size-base);
  }

  .merit-inner-card img {
    width: 50%;
  }

  .trial-inner-contact-pack-button a {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    display: block;
    width: 250px;
  }
}

@media (max-width: 767px) {
  .trial-inner-pack {
    margin: var(--spacing-10) var(--spacing-6);
  }

  .trial-inner-pack-c-icon-sentence {
    font-size: var(--font-size-xs);
  }

  .reason-inner-title-sentence {
    font-size: var(--font-size-base);
  }
}

@media (min-width: 1001px) {
  .about-message-pack-inner {
    margin-right: var(--spacing-8);
  }
  .top-link-txt {
    font-size: var(--font-size-md);
  }
}