/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.66666667vw;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
figure,
figcaption,
button,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

body {
  color: #000;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  body {
    min-width: initial;
    min-width: auto;
  }

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

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

ul,
ol {
  padding-left: 0;
}

li {
  list-style: none;
}

small,
em {
  font-style: normal;
}

img {
  border: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

@media screen and (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
}

/* ヘッダー ここから */
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 6rem;
  background-color: #fff;
  z-index: 100;
}
@media screen and (max-width: 768px) {
  header.open::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -2;
  }
}

header::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-image: url(../img/texture01.png);
  z-index: -1;
}
@media screen and (max-width: 768px) {
  header::before {
    width: 100%;
  }
}

.header__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
  padding: 0 3rem;
  margin: auto;
  max-width: 86rem;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .header__container {
    display: block;
    padding: 0;
  }
}

.header__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
	-ms-flex-align: center;
  align-items: center;
  padding-right: 3rem;
  width: 30%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .header__title {
    padding-right: 0;
    margin-left: 5rem;
    width: 61%;
  }
}

.header__btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 6rem;
  height: 100%;
  background-color: #fff;
  z-index: 1;
}

.header__btn span {
  display: inline-block;
  position: absolute;
  left: 2rem;
  width: 2rem;
  height: 0.1rem;
  background-color: #000;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.header__btn span:nth-child(1) {
  top: 2.35rem;
}

.header__btn.open span:nth-child(1) {
  top: 2.95rem;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

.header__btn span:nth-child(2) {
  top: 2.95rem;
}

.header__btn.open span:nth-child(2) {
  opacity: 0;
}

.header__btn span:nth-child(3) {
  top: 3.55rem;
}

.header__btn.open span:nth-child(3) {
  top: 2.95rem;
  -webkit-transform: rotate(-225deg);
  transform: rotate(-225deg);
}

.header__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
	-ms-flex-align: start;
  align-items: flex-start;
  padding: 1.6rem 0;
  width: 70%;
  height: 100%;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .header__nav {
    display: block;
    padding: 0;
    width: 100%;
    height: auto;
    max-height: 100vh;
    -webkit-transform: translateY(-100vh);
    transform: translateY(-100vh);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }

  .header__nav.open {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.header__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
	-ms-flex-align: center;
  align-items: center;
  margin: 0 2.5rem;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .header__list {
    display: block;
    margin: 0;
    height: auto;
  }

  .header__list--image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: calc(100vw / 3);
  }
}

.header__item {
  margin: 0 2.5rem;
  height: 100%;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .header__item {
    padding: 2rem 3rem;
    margin: 0;
    border-top: 0.5px solid #c9caca;
    font-size: 1.4rem;
  }

  .header__item--image {
    padding: 0;
    width: calc(100% / 3);
  }
}

.header__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
  -webkit-box-align: center;
	-ms-flex-align: center;
  align-items: center;
  position: relative;
  padding-right: 1rem;
  width: 100%;
  height: 100%;
  color: #000;
}
@media screen and (max-width: 768px) {
  .header__item a {
    padding-right: 0;
  }

  .header__item--image a {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    color: #fff;
  }

  .header__item--image:nth-child(1) a {
    background-image: url(../img/bg_nav01.jpg);
  }

  .header__item--image:nth-child(2) a {
    background-image: url(../img/bg_nav02.jpg);
  }

  .header__item--image:nth-child(3) a {
    background-image: url(../img/bg_nav03.jpg);
  }
}

.header__item a::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 4.5px solid #000;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
@media screen and (max-width: 768px) {
  .header__item a::after {
    border-top: 4.3px solid transparent;
    border-bottom: 4.3px solid transparent;
    border-left: 6.3px solid #000;
  }

  .header__item--image a::after {
    content: none;
  }
}

.header__item a:hover::after {
  right: -0.5rem;
}

.accordion {
  background-color: #fff;
  border: 0.5px solid #c9caca;
}
@media screen and (max-width: 768px) {
  .accordion {
    margin: 3.5rem 6.9rem 3rem;
  }
}

.accordion__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
  -webkit-box-align: center;
	-ms-flex-align: center;
  align-items: center;
  width: 9rem;
  height: 2.6rem;
}
@media screen and (max-width: 768px) {
  .accordion__btn {
    margin: auto;
    width: 23.5rem;
    height: 3.2rem;
  }
}

.accordion__btn span {
  position: relative;
  padding-right: 1rem;
  color: #000;
  font-size: 1rem;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transform-origin: center;
  transform-origin: center;
}
@media screen and (max-width: 768px) {
  .accordion__btn span {
    padding-right: 1.5rem;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.accordion__btn span::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  border-top: 4px solid #c9caca;
  border-right: 2.8px solid transparent;
  border-left: 2.8px solid transparent;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
@media screen and (max-width: 768px) {
  .accordion__btn span::after {
    border-top: 4.8px solid #c9caca;
    border-right: 3.25px solid transparent;
    border-left: 3.25px solid transparent;
  }
}

.accordion__btn.open span::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
  -webkit-transform-origin: center;
  transform-origin: center;
}

.accordion__content {
  display: none;
  padding: 1rem 0;
}

.accordion__content li {
  text-align: center;
}

.accordion__content li:not(:last-child) {
  margin-bottom: 1rem;
}

.accordion__content a {
  display: block;
  padding: 0.5rem 0;
  width: 100%;
  color: #000;
  font-size: 1rem;
  text-align: center;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transform-origin: center;
  transform-origin: center;
}
/* ヘッダー ここまで */

/* フッター ここから */
.footer_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
	-ms-flex-align: end;
  align-items: flex-end;
  padding: 2rem 3rem;
  margin: auto;
  max-width: 116rem;
}
@media screen and (max-width: 768px) {
  .footer_container {
    display: block;
  }
}

.footer__logo {
  display: block;
  width: 24%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
@media screen and (max-width: 768px) {
  .footer__logo {
    margin: auto;
    width: 53%;
  }
}

.footer__logo:hover {
  opacity: 0.8;
}

.footer__text {
  font-size: 1rem;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transform-origin: left top;
  transform-origin: right bottom;
}
@media screen and (max-width: 768px) {
  .footer__text {
    margin: 1rem 0;
    text-align: center;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transform-origin: center;
    transform-origin: center;
  }
}
/* フッター ここまで */

/* 共通 ここから */
main {
  margin-top: 6rem;
}

.target {
  padding-top: 6rem;
  margin-top: -6rem;
}

.container {
  position: relative;
  padding: 0 1.7rem;
  margin: 0 auto;
  width: 100%;
  max-width: 83.4rem;
}

.container--middle {
  max-width: 89.4rem;
}

.container--large {
  max-width: 103.4rem;
}

@media screen and (max-width: 768px) {
  .container--spfull {
    padding: 0;
  }
}

.root__decoration {
  position: relative;
  z-index: 0;
}

.root__decoration::before, .root__decoration::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 14rem;
  height: 5.6rem;
  background-image: url(../img/icon_triangle03.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .root__decoration::before, .root__decoration::after {
    width: 9.8rem;
    height: 3.9rem;
  }
}

.root__decoration::before {
  top: 25rem;
  left: -5rem;
}
@media screen and (max-width: 768px) {
  .root__decoration::before {
    top: 20rem;
    left: -3.4rem;
  }
}

.root__decoration::after {
  top: -2rem;
  right: -12rem;
}
@media screen and (max-width: 768px) {
  .root__decoration::after {
    top: auto;
    bottom: -4rem;
    right: -5.1rem;
  }
}

.root__decoration--pconly::before {
  top: -2rem;
}
@media screen and (max-width: 768px) {
  .root__decoration--pconly::before {
    content: none;
  }
}

.root__decoration--pconly::after {
  content: none;
}

.edge {
  padding: 3rem;
}
@media screen and (max-width: 768px) {
  .edge {
    padding: 1.3rem;
  }
}

.edge--yel {
  background-image: url(../img/texture01.png);
}

.edge--blu {
  background-image: url(../img/texture02.png);
}

.inner {
  padding: 9rem 0;
  background-color: #fff;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .inner {
    padding: 6rem 0;
  }
}

.inner--blu {
  background-image: url(../img/texture03.png);
}

.inner--spread {
  padding-bottom: 35rem;
}
@media screen and (max-width: 768px) {
  .inner--spread {
    padding-bottom: 50rem;
  }
}

.inner--interval {
  padding: 0;
  overflow: visible;
}

.inner--interval-last {
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .inner--tminus {
    margin-top: -9rem;
  }
}

.inner--interval .bg-clear {
  position: relative;
  padding: 5rem 0;
  background-color: rgba(255, 255, 255, 0.5);
}

.inner--decoration {
  position: relative;
  z-index: 0;
}

.inner--decoration::before, .inner--decoration::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 50%;
  max-width: 52rem;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

.inner--decoration::before {
  left: 0;
  background-image: url(../img/bg_decoration01_l.png);
  background-position: left top;
}
@media screen and (max-width: 768px) {
  .inner--decoration::before {
    background-image: url(../img/bg_decoration01_l_sp.png);
  }
}

.inner--decoration::after {
  right: 0;
  background-image: url(../img/bg_decoration01_r.png);
  background-position: right top;
}
@media screen and (max-width: 768px) {
  .inner--decoration::after {
    background-image: url(../img/bg_decoration01_r_sp.png);
  }
}

.inner--decoration02::before {
  background-image: url(../img/bg_decoration02_l.png);
}
@media screen and (max-width: 768px) {
  .inner--decoration02::before {
    background-image: url(../img/bg_decoration02_l_sp.png);
  }
}

.inner--decoration02::after {
  background-image: url(../img/bg_decoration02_r.png);
}
@media screen and (max-width: 768px) {
  .inner--decoration02::after {
    background-image: url(../img/bg_decoration02_r_sp.png);
  }
}

.inner--root {
  padding-bottom: 5rem;
}
@media screen and (max-width: 768px) {
  .inner--root {
    padding-bottom: 4rem;
  }
}

.inner--pad0 {
  padding: 0;
}

.fv {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.fv--course01 {
  height: 27rem;
  background-image: url(../img/bg_course01.jpg);
}

.fv--course02 {
  height: 27rem;
  background-image: url(../img/bg_course02.jpg);
}

.fv--course03 {
  height: 27rem;
  background-image: url(../img/bg_course03.jpg);
}

.fv__title {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35%;
  -webkit-transform: translateX(-50%)translateY(-50%);
  transform: translateX(-50%)translateY(-50%);
}
@media screen and (max-width: 768px) {
  .fv__title {
    top: 35%;
    width: 68%;
  }
}

.fv__title--small {
  width: auto;
  max-width: 27rem;
}

.title {
  margin-bottom: 4.5rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .title {
    margin-bottom: 3rem;
  }
}

.title p {
  margin-bottom: 1.5em;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .title p {
    font-size: 1.2rem;
  }
}

.title h2 {
  display: inline-block;
  position: relative;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .title h2 {
    font-size: 1.8rem;
  }
}

.title h2::before, .title h2::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 3.5rem;
  height: 6rem;
  background-image: url(../img/icon_title.png);
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .title h2::before, .title h2::after {
    width: 2.5rem;
    height: 4.5rem;
  }
}

.title h2::before {
  left: -7rem;
  background-position: right center;
}
@media screen and (max-width: 768px) {
  .title h2::before {
    left: -5rem;
  }
}

.title--root h2::before {
  left: -5rem;
}
@media screen and (max-width: 768px) {
  .title--root h2::before {
    left: -3.5rem;
  }
}

.title h2::after {
  right: -7rem;
  background-position: left center;
  transform: translateY(-50%) scale(-1, 1);
}
@media screen and (max-width: 768px) {
  .title h2::after {
    right: -5rem;
  }
}

.title--root h2::after {
  right: -5rem;
}
@media screen and (max-width: 768px) {
  .title--root h2::after {
    right: -3.5rem;
  }
}

.frame-bg {
  position: relative;
  z-index: 0;
}

.frame-bg::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-image: url(../img/texture01.png);
  z-index: -1;
}

.frame-bg--right::after {
  left: 0;
}
@media screen and (min-width: 769px) {
  .frame-bg--right::after {
    content: none;
  }
}
@media screen and (max-width: 768px) {
  .frame-bg--right::after {
    left: auto;
    right: 0;
  }
}

.frame-bg--left::after {
  right: 0;
}
@media screen and (min-width: 769px) {
  .frame-bg--left::after {
    content: none;
  }
}
@media screen and (max-width: 768px) {
  .frame-bg--left::after {
    right: auto;
    left: 0;
  }
}

.frame-space {
  position: relative;
  height: 26rem;
}

.frame {
  position: relative;
  padding: 3rem;
  margin: auto;
  width: 81.25%;
  background-color: #fff;
}

.frame::before, .frame::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.frame::before {
  bottom: 100%;
  background-image: url(../img/img_head.png);
  background-position: center bottom;
}

.frame::after {
  top: 100%;
  background-image: url(../img/img_foot.png);
  background-position: center top;
}

.frame--yel {
  background-image: url(../img/texture01.png);
}

.frame--yel::before {
  background-image: url(../img/img_head_yel.png);
}

.frame--yel::after {
  background-image: url(../img/img_foot_yel.png);
}

.frame--follow {
  padding: 8rem 0 8rem 8rem;
  margin: 0 0 30rem auto;
  width: 69.125%;
}
@media screen and (max-width: 768px) {
  .frame--follow {
    padding: 6rem 0 6rem 3rem;
    margin-bottom: 40rem;
    width: 91%;
  }
}

.frame--follow::before, .frame--follow::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  width: 5rem;
  height: 5rem;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .frame--follow::before, .frame--follow::after {
    width: 3rem;
    height: 3rem;
  }
}

.frame--follow::before {
  top: 0;
  bottom: auto;
  background-image: url(../img/img_corner_head.png);
  background-position: left top;
}

.frame--follow::after {
  top: auto;
  bottom: 0;
  background-image: url(../img/img_corner_foot.png);
  background-position: left bottom;
}

.frame--float {
  position: absolute;
  top: -21rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .frame--float {
    top: -40rem;
  }
}

.frame--right {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin: 0 0 0 auto;
  width: 68.6%;
}
@media screen and (max-width: 768px) {
  .frame--right {
    padding: 11rem 0 4rem 1.7rem;
    width: 96.8%;
  }
  
  .frame--right::before {
    top: 0;
    bottom: auto;
    width: 2.5rem;
    height: 2.5rem;
    background-image: url(../img/img_corner_head.png);
    background-position: left top;
  }

  .frame--right::after {
    top: auto;
    bottom: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-image: url(../img/img_corner_foot.png);
    background-position: left bottom;
  }
}

.frame--left {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin: 0 auto 0 0;
  width: 68.6%;
}
@media screen and (max-width: 768px) {
  .frame--left {
    padding: 11rem 1.7rem 4rem 0;
    width: 96.8%;
  }
  
  .frame--left::before {
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
    width: 2.5rem;
    height: 2.5rem;
    background-image: url(../img/img_corner_head.png);
    background-position: right top;
    transform: scale(-1, 1);
  }

  .frame--left::after {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-image: url(../img/img_corner_foot.png);
    background-position:  right bottom;
    transform: scale(-1, 1);
  }
}

.frame__photos {
  position: absolute;
  top: 50%;
  right: 66%;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .frame__photos {
    top: auto;
    bottom: 78%;
    right: 0;
    width: 115%;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.frame--left .frame__photos {
  left: 66%;
  right: auto;
}
@media screen and (max-width: 768px) {
  .frame--left .frame__photos {
    left: 0;
    right: auto;
  }
}

@media screen and (min-width: 769px) {
  .frame__photos--wide {
    width: 103.4%;
  }
}

@media screen and (min-width: 769px) {
  .frame__photos--xwide {
    left: 47.4% !important;
    width: 118.6%;
  }
}

@media screen and (min-width: 769px) {
  .frame__photos--narrow {
    width: 93.7%;
  }
}

@media screen and (min-width: 769px) {
  .frame__photos--top {
    top: -10rem;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .frame__photos--wide.frame__photos--top {
    top: -16rem;
  }

  .frame__photos--top-s {
    top: -7rem;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.wrapper {
  margin: auto;
  max-width: 50rem;
}

.frame--follow .wrapper {
  margin: 0 0 0 auto;
}

.frame---follow-right .wrapper {
  margin-right: 7rem;
}

.wrapper--w400 {
  max-width: 40rem;
}

.wrapper--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .frame--float .wrapper--flex {
    display: block;
  }
}

.wrapper--decoration {
  position: relative;
}

.wrapper--right {
  position: relative;
  margin: 0 4rem 0 auto;
  width: 52%;
}
@media screen and (max-width: 768px) {
  .wrapper--right {
    margin: auto;
    width: 81.3%;
  }
}

.wrapper--left {
  position: relative;
  margin: 0 auto 0 5rem;
  width: 52%;
}
@media screen and (max-width: 768px) {
  .wrapper--left {
    margin: auto;
    width: 81.3%;
  }
}

@media screen and (min-width: 769px) {
  .wrapper--left-narrow {
    width: 47.2%;
  }
}

.frame__decoration {
  position: absolute;
  top: -11rem;
  left: -18%;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .frame__decoration {
    top: -9rem;
    left: -4.8rem;
    width: 78.9%;
  }
}

.frame__decoration2 {
  top: -15.4rem;
  left: auto;
  right: -26.2%;
  width: 43%;
}
@media screen and (max-width: 768px) {
  .frame__decoration2 {
    top: -10rem;
    right: -5.6rem;
    width: 61.8%;
  }
}

.frame__icon {
  position: absolute;
  left: 0;
  bottom: 107%;
  width: 17.5rem;
}
@media screen and (max-width: 768px) {
  .frame__icon {
    position: static;
    margin-bottom: 1rem;
    width: 54%;
  }
}

.frame__icon--wide {
  width: 21rem;
}
@media screen and (max-width: 768px) {
  .frame__icon--wide {
    width: 64.5%;
  }
}

.frame__text {
  width: 56.6%;
}
@media screen and (max-width: 768px) {
  .frame--float .frame__text {
    width: 100%;
  }
}

.text {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .text {
    font-size: 1.2rem;
  }
}

.text--small {
  font-size: 1.2rem;
}

.text--center {
  text-align: center;
}

.text--justify {
  text-align: justify;
}

.text--decoration {
  position: relative;
  z-index: 0;
}

.text--decoration::before, .text--decoration::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 14rem;
  height: 5.6rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .text--decoration::before, .text--decoration::after {
    width: 9.8rem;
    height: 3.9rem;
  }
}

.text--decoration::before {
  top: 3.5rem;
  left: 3rem;
  background-image: url(../img/icon_triangle01.png);
}
@media screen and (max-width: 768px) {
  .text--decoration::before {
    top: 0;
    left: -4.3rem;
  }
}

.text--decoration::after {
  right: -2.5rem;
  bottom: -4.8rem;
  background-image: url(../img/icon_triangle02.png);
}
@media screen and (max-width: 768px) {
  .text--decoration::after {
    right: -3.9rem;
    bottom: -1.5rem;
  }
}

.marker {
  background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0.7) 60%);
}

.marker--yel {
  background: linear-gradient(transparent 60%, #ffe870 60%);
}

.marker span {
  letter-spacing: -0.5em;
}

.caption {
  margin-bottom: 2rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  .caption {
    margin-bottom: 1rem;
    font-size: 1.2rem;
  }
}

@media screen and (min-width: 769px) {
  .caption--large {
    font-size: 1.6rem;
  }
}

.caption--xlarge {
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .caption--xlarge {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 768px) {
  .caption--splarge {
    font-size: 1.5rem;
  }
}

.caption--clear {
  color: rgba(0, 0, 0, 0.7);
}

.caption--vertical {
  margin-bottom: 0;
  font-size: 1.9rem;
  line-height: 2;
  letter-spacing: 0.3em;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .caption--vertical {
    font-size: 1.3rem;
  }
}

.caption--vertical span {
  padding-top: 0.5em;
  background-color: #fff;
}

.frame__image {
  flex-shrink: 0;
  width: 36.4%;
}
@media screen and (max-width: 768px) {
  .frame__image {
    margin: 1.5rem auto 0;
    width: 58%;
  }
}

.frame__image--wide {
  width: 38.4%;
}
@media screen and (max-width: 768px) {
  .frame__image--wide {
    width: 64.4%;
  }
}

.frame__link {
  margin: 2.5rem auto 0;
  max-width: 22rem;
}
@media screen and (max-width: 768px) {
  .frame__link {
    margin-top: 3rem;
  }
}

.frame__link a {
  display: block;
  position: relative;
  padding: 1rem 0;
  width: 100%;
  background-image: url(../img/texture01.png);
  color: #000;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
}

.frame__link a::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 11.25%;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 4px solid #000;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.frame__link a:hover::after {
  right: 7%;
}

.frame__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
  justify-content: center;
  position: relative;
  padding: 1.5rem 0;
  margin-top: 3rem;
  width: 16rem;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .frame__btn {
    margin: 2rem auto 0;
  }
}

.frame__btn--column {
  margin-top: 3rem;
}
@media screen and (max-width: 768px) {
  .frame__btn--column {
    margin-top: 1.5rem;
  }
}

@media screen and (min-width: 769px) {
  .frame__btn--column-magt0 {
    margin-top: 0;
  }
}

.frame__btn::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 11.25%;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 4px solid #000;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.frame__btn:hover::after {
  right: 7%;
}

.frame__btn span {
  color: #000;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}

.tab__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
	-ms-flex-align: end;
  align-items: flex-end;
  position: relative;
  margin-top: 6rem;
}

.tab__list::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0.4rem;
  background-image: url(../img/texture01.png);
}
@media screen and (max-width: 768px) {
  .tab__list::after {
    height: 0.6rem;
  }
}

.tab__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
	-ms-flex-align: center;
  align-items: center;
  margin: 0 0.6%;
  width: 38%;
  height: 5.5rem;
  border-top: 1px solid #ddcba7;
  border-left: 1px solid #ddcba7;
  border-right: 1px solid #ddcba7;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .tab__item {
    margin: 0 1.4%;
    width: 45%;
    height: 4.2rem;
  }
}

.tab__item.active {
  border: none;
  background-image: url(../img/texture01.png);
}

.tab__item span {
  position: relative;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .tab__item span {
    font-size: 1.2rem;
  }
}

.tab__item--beginner span {
  padding-left: 2em;
}
@media screen and (max-width: 768px) {
  .tab__item--beginner span {
    padding-left: 4em;
  }
}

.tab__item span::before, .tab__item span::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
}

.tab__item span::before {
  left: -43.75%;
  width: 2.6rem;
  height: 2.6rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .tab__item span::before {
    left: -35%;
    width: 1.9rem;
    height: 1.9rem;
  }
}

.tab__item--amateur span::before {
  background-image: url(../img/icon_amateur.png);
}

.tab__item--beginner span::before {
  width: 7.4rem;
  background-image: url(../img/icon_beginner.png);
}
@media screen and (max-width: 768px) {
  .tab__item--beginner span::before {
    left: -7%;
    width: 5.4rem;
  }
}

.tab__item span::after {
  right: -25%;
  border-top: 7px solid #000;
  border-right: 4.8px solid transparent;
  border-left: 4.8px solid transparent;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
@media screen and (max-width: 768px) {
  .tab__item span::after {
    border-top: 4.6px solid #000;
    border-right: 3.2px solid transparent;
    border-left: 3.2px solid transparent;
  }
}

.tab__item.active span::after {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -webkit-transform-origin: center;
  transform-origin: center;
}

@media screen and (max-width: 768px) {
  .tab__item--beginner span::after {
    right: -7%;
  }
}

.tab__content, .tab__content-map {
  height: 0;
  overflow: hidden;
}

.tab__content.show, .tab__content-map.show {
  height: auto;
}
/* 共通 ここまで */

/* TOP ここから */
.overview {
  position: relative;
}

.overview::before, .overview::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 14rem;
  height: 5.6rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .overview::before, .overview::after {
    width: 9.8rem;
    height: 3.9rem;
  }
}

.overview::before {
  top: -4.5rem;
  left: 3rem;
  background-image: url(../img/icon_triangle01.png);
}
@media screen and (max-width: 768px) {
  .overview::before {
    top: -4.5rem;
    left: -5rem;
  }
}

.overview::after {
  top: 9.4rem;
  right: -3rem;
  background-image: url(../img/icon_triangle02.png);
}
@media screen and (max-width: 768px) {
  .overview::after {
    top: auto;
    bottom: -7rem;
    right: -2.5rem;
  }
}

.overview__title {
  margin-bottom: 3rem;
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .overview__title {
    margin-bottom: 2.5rem;
    font-size: 1.5rem;
  }
}

.overview__description {
  font-size: 1.5rem;
  line-height: 1.9;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .overview__description {
    font-size: 1.25rem;
  }
}

.cycring {
  position: relative;
  margin: auto;
  width: 100%;
  height: 12rem;
  max-width: 110rem;
}
@media screen and (max-width: 768px) {
  .cycring {
    height: 10rem;
  }
}

.cycring__image {
  position: absolute;
  top: 200%;
  left: -3rem;
  width: 90%;
  z-index: 1;
}
@media screen and (max-width: 910px) {
  .cycring__image {
    top: 230%;
  }
}
@media screen and (max-width: 768px) {
  .cycring__image {
    top: 440%;
    left: 0;
    width: 100%;
  }
}

.cycring__parent {
  position: relative;
  z-index: 0;
}

.cycring__parent::before, .cycring__parent::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 14rem;
  height: 5.6rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .cycring__parent::before, .cycring__parent::after {
    width: 9.8rem;
    height: 3.9rem;
  }
}

.cycring__parent::before {
  left: 16%;
  bottom: 14%;
  background-image: url(../img/icon_triangle01.png);
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .cycring__parent::before {
    left: -6.5%;
    bottom: 37%;
  }
}

.cycring__parent::after {
  right: 15%;
  bottom: 4%;
  background-image: url(../img/icon_triangle02.png);
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .cycring__parent::after {
    right: 6%;
    bottom: 4.8%;
  }
}

.cycring__child {
  position: absolute;
  top: -35%;
  left: 22%;
  width: 24%;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .cycring__child {
    top: -94%;
    left: 0;
    width: 42%;
  }
}

.cycring__child::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: -6rem;
  bottom: 0;
  width: 14rem;
  height: 5.6rem;
  background-image: url(../img/icon_triangle02.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .cycring__child::after {
    bottom: -3rem;
    width: 9.8rem;
    height: 3.9rem;
  }
}

.bicycle__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
	-ms-flex-align: start;
  align-items: flex-start;
  margin: 3rem auto 0;
  max-width: 66rem;
}
@media screen and (max-width: 768px) {
  .bicycle__list {
    margin-top: 2.5rem;
  }
}

.bicycle__list--mag-t60 {
  margin-top: 6rem;
}
@media screen and (max-width: 768px) {
  .bicycle__list--mag-t60 {
    margin-top: 4rem;
  }
}

.bicycle__list--text {
  padding: 4rem 0;
  margin-top: 0;
}
@media screen and (max-width: 768px) {
  .bicycle__list--text {
    padding: 3rem 0;
  }
}

.bicycle__item {
  width: 25%;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.67;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .bicycle__item {
    width: 45%;
  }
}

.bicycle__image dt {
  margin-bottom: 2.5em;
  min-height: 3rem;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .bicycle__image dt {
    margin-bottom: 1em;
    min-height: 2rem;
    font-size: 1.2rem;
  }
}

.bicycle__image .small {
  font-size: 1rem;
  letter-spacing: -0.07em;
}

.bicycle__image .small span:nth-child(-n+7):not(:first-child) {
  font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
  .bicycle__image .small span:nth-child(-n+7):not(:first-child) {
    font-size: 1rem;
  }
}

.bicycle__image dd {
  margin: auto;
  width: 72%;
}
@media screen and (max-width: 768px) {
  .bicycle__image dd {
    width: 66%;
  }
}

.belt {
  background-color: #fff;
}

.belt--blue {
  background-image: url(../img/texture03.png);
}

.interval {
  width: 100%;
  height: 29rem;
  background-image: url(../img/bg_view01.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.interval--view02 {
  background-image: url(../img/bg_view02.jpg);
}

.goods__wrapper {
  position: relative;
}

.goods__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
	-ms-flex-align: start;
  align-items: flex-start;
  padding: 1.5rem 0;
  margin: 0 7.5% 0 auto;
  width: 76.875%;
}
@media screen and (max-width: 768px) {
  .goods__list {
    margin-right: 3rem;
    width: 67.62%;
  }
}

.goods__list--mag-t60 {
  margin-top: 6rem;
}
@media screen and (max-width: 768px) {
  .goods__list--mag-t60 {
    margin-top: 2rem;
  }
}

.goods__list--small {
  margin: auto;
  width: 60.6%;
}
@media screen and (max-width: 768px) {
  .goods__list--small {
    padding-top: 3rem;
    width: 49.5%;
  }
}

.goods__item {
  width: 21%;
}
@media screen and (max-width: 768px) {
  .goods__item {
    width: 45%;
  }
}

.goods__image dt {
  margin-bottom: 1.5rem;
}

.goods__image dd {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.29;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .goods__image dd {
    font-size: 1rem;
  }
}

.degree {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  position: absolute;
  top: 50%;
  left: calc(50% - 375px);
  height: 80%;
  background: linear-gradient(to bottom, #ffb958,  #ffcf6c);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media screen and (min-width: 769px) and (max-width: 899px) {
  .degree {
    left: 5%;
  }
}
@media screen and (max-width: 768px) {
  .degree {
    left: 3.5rem;
    height: 91%;
  }
}

.degree--level {
  left: 1rem;
}

.degree__triangle {
  position: relative;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 900;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .degree__triangle {
    font-size: 1.4rem;
  }
}

.degree--small .degree__triangle {
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .degree--small .degree__triangle {
    font-size: 1.4rem;
  }
}

.degree__triangle::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 38.5px 50px 38.5px;
  border-color: transparent transparent #ffb958 transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .degree__triangle::before {
    border-width: 0 6vw 8vw 6vw;
  }
}

.degree--small .degree__triangle::before {
  border-width: 0 30px 40px 30px;
}
@media screen and (max-width: 768px) {
  .degree--small .degree__triangle::before {
    border-width: 0 7vw 9vw 7vw;
  }
}

.degree__triangle--down::before {
  top: 0;
  bottom: auto;
  border-width: 50px 38.5px 0 38.5px;
  border-color: #ffcf6c transparent transparent transparent;
}
@media screen and (max-width: 768px) {
  .degree__triangle--down::before {
    border-width: 8vw 6vw 0 6vw;
  }
}

.degree--small .degree__triangle--down::before {
  border-width: 40px 30px 0 30px;
}
@media screen and (max-width: 768px) {
  .degree--small .degree__triangle--down::before {
    border-width: 9vw 7vw 0 7vw;
  }
}

.degree__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  padding: 0 1rem;
  height: 100%;
  color: #ff8715;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .degree__text {
    padding: 0 0.8rem;
    font-size: 1.2rem;
  }
}

.degree--small .degree__text {
  font-size: 1.5rem;
  height: 90%;
}
@media screen and (max-width: 768px) {
  .degree--small .degree__text {
    font-size: 1.2rem;
  }
}

.goods__other {
  position: relative;
  margin-top: 6rem;
  z-index: 0;
}

.goods__other::before, .goods__other::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 14rem;
  height: 5.6rem;
  background-image: url(../img/icon_triangle01.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .goods__other::before, .goods__other::after {
    width: 9.8rem;
    height: 3.9rem;
  }
}

.goods__other::before {
  bottom: -4rem;
  left: -3rem;
}
@media screen and (max-width: 768px) {
  .goods__other::before {
    bottom: -2.5rem;
    left: -5.2rem;
  }
}

.goods__other::after {
  top: -3.5rem;
  right: 5rem;
}
@media screen and (max-width: 768px) {
  .goods__other::after {
    top: -4.5rem;
    right: -5.7rem;
  }
}

.goods__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
	-ms-flex-align: center;
  align-items: center;
  max-width: 48.5rem;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .goods__title {
    padding:  0 2.8rem;
  }
}

.goods__title span {
   display: inline-block;
   width: 100%;
   height: 0.1rem;
   background-color: #000;
}

.goods__title em {
  margin: 0 1.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .goods__title em {
    font-size: 1.2rem;
  }
}

.course__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
	-ms-flex-align: center;
  align-items: center;
  padding: 0 1.8rem;
}
@media screen and (max-width: 768px) {
  .course__list {
    display: block;
  }
}

.course__item {
  width: 26.29vw;
  max-width: 29.2rem;
  height: 26.29vw;
  max-height: 29.2rem;
}
@media screen and (max-width: 768px) {
  .course__item {
    margin: auto;
    width: 58.7vw;
    max-width: none;
    height: 58.7vw;
    max-height: none;
  }

  .course__item:not(:last-child) {
    margin-bottom: 3rem;
  }
}

.course__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
	-ms-flex-align: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.course__item a::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
} 

.course__item a:hover::after {
  opacity: 1;
} 

.course__item--kojima a {
  background-image: url(../img/bg_course_link01.jpg);
}

.course__item--tamashima a {
  background-image: url(../img/bg_course_link02.jpg);
}

.course__item--mabi a {
  background-image: url(../img/bg_course_link03.jpg);
}

.course__item span {
  width: 60%;
}

.level {
  margin: 5.5rem auto 0;
  width: 81.25%;
}
@media screen and (max-width: 768px) {
  .level {
    margin: 8.5rem auto 4rem;
    width: 100%;
  }
}

.level__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  height: 6.5rem;
  background-image: url(../img/texture01.png);
  border-radius: 30px 30px 0 0;
}
@media screen and (max-width: 768px) {
  .level__title {
    height: 8rem;
    border-radius: 22px 22px 0 0;
  }
}

.level__title span {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.3em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .level__title span {
    font-size: 1.3rem;
  }
}

.level__description {
  padding: 2rem 4rem;
  background-color: #fff;
  border-radius: 0 0 30px 30px;
}
@media screen and (max-width: 768px) {
  .level__description {
    padding: 3rem;
    border-radius: 0 0 22px 22px;
  }
}

.level__inner {
  position: relative;
}

.level__list {
  margin-left: auto;
  width: 86%;
}
@media screen and (max-width: 768px) {
  .level__list {
    margin-left: auto;
    width: 73%;
  }
}

.level__item:not(:last-child) {
  margin-bottom: 3rem;
}
@media screen and (max-width: 768px) {
  .level__item:not(:last-child) {
    margin-bottom: 6rem;
  }
}

.level__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
@media screen and (max-width: 768px) {
  .level__content {
    display: block;
  }
}

.level__content dt {
  flex-shrink: 0;
  position: relative;
  padding-top: 3.5rem;
  width: 9rem;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .level__content dt {
    padding-top: 3rem;
    width: 100%;
    font-size: 1.2rem;
  }
}

.level__content dt::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 3rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .level__content dt::before {
    width: 2rem;
    height: 2rem;
  }
}

.level__content--amateur dt::before {
  background-image: url(../img/icon_amateur.png);
}

.level__content--beginner dt::before {
  width: 8.5rem;
  background-image: url(../img/icon_beginner.png);
}
@media screen and (max-width: 768px) {
  .level__content--beginner dt::before {
    width: 5.7rem;
  }
}

.level__content dd {
  padding-left: 1.9rem;
  margin-left: 1.9rem;
  border-left: 2px dotted #000;
  font-size: 1.2rem;
  line-height: 1.67;
}
@media screen and (max-width: 768px) {
  .level__content dd {
    padding-top: 1.5rem;
    padding-left: 0;
    margin-top: 2rem;
    margin-left: 0;
    border-top: 2px dotted #000;
    border-left: none;
  }
}
/* TOP ここまで */

/* 下層 ここから */
.root__overview {
  padding: 3rem 3.5rem 3.5rem;
  margin-top: 4rem;
  background-color: #fdcd6c;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .root__overview {
    padding: 2rem 2rem 1.5rem;
    margin-top: 2rem;
  }
}

.root__title {
  display: inline-block;
  position: relative;
  margin-bottom: 3.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
  .root__title {
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
  }
}

.root__title--beginner {
  padding-left: 3em;
}

.root__title::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: -4rem;
  width: 3rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .root__title::before {
    left: -2.5rem;
    width: 2rem;
    height: 2rem;
  }
}

.root__title--amateur::before {
  background-image: url(../img/icon_amateur.png);
}

.root__title--beginner::before {
  width: 8.5rem;
  background-image: url(../img/icon_beginner.png);
}
@media screen and (max-width: 768px) {
  .root__title--beginner::before {
    width: 5.4rem;
  }
}

.root__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
@media screen and (max-width: 768px) {
  .root__list {
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
  }
}

.root__item {
  padding: 0 2rem 1rem;
}
@media screen and (max-width: 768px) {
  .root__item {
    position: relative;
    padding: 0 0 0.5rem;
    margin: 1.5rem 0;
    width: 50%;
  }
}

@media screen and (min-width: 769px) {
  .root__item:not(:last-child) {
    border-right: 1px solid #000;
  }
}
@media screen and (max-width: 768px) {
  .root__item:nth-child(odd) {
    border-right: 1px solid #000;
  }

  .root__item:nth-child(-n + 2)::after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -1.5rem;
    left: 0;
    width: calc(100% + 1px);
    height: 1px;
    background-color: #000;
  }
}

.root__content dt {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .root__content dt {
    font-size: 1.1rem;
  }
}

.root__content dd {
  font-size: 2rem;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .root__content dd {
    font-size: 1.6rem;
  }
}

.root__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
	-ms-flex-align: center;
  align-items: center;
  margin: 5.5rem auto 5rem;
  max-width: 55rem;
}
@media screen and (max-width: 768px) {
  .root__link {
    display: block;
    width: 74.6%;
    margin: 3rem auto 2rem;
  }
}

.root__link li {
  width: 47%;
}
@media screen and (max-width: 768px) {
  .root__link li {
    width: 100%;
  }

  .root__link li:not(:last-child) {
    margin-bottom: 2rem;
  }
}

.root__link a {
  display: block;
  position: relative;
  padding: 1.5rem 0;
  width: 100%;
  background-image: url(../img/texture01.png);
  color: #000;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .root__link a {
    padding: 1.2rem 0;
    font-size: 1.1rem;
    letter-spacing: 0.2em;
  }
}

.root__link a::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 7%;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 4px solid #000;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.root__link a:hover::after {
  right: 4%;
}

.shokusanpolink {
  display: block;
  position: relative;
  padding: 1.5rem 0;
  margin: auto;
  width: 40%;
  background-image: url(../img/texture04.png);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.3em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .shokusanpolink {
    padding: 1rem 0;
    width: 81.6%;
    font-size: 1.3rem;
  }
}

.shokusanpolink--tamashima {
  margin-top: 2rem;
}

.shokusanpolink::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 6%;
  border-top: 3.3px solid transparent;
  border-bottom: 3.3px solid transparent;
  border-left: 5px solid #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.shokusanpolink:hover::after {
  right: 4%;
}

.root__image {
  position: relative;
  margin: 13.5rem auto 8rem;
  max-width: 65rem;
}
@media screen and (max-width: 768px) {
  .root__image {
    margin: 6.5rem auto 3.5rem;
  }
}

.root__copy {
  position: absolute;
  top: 3.8rem;
  right: 4.6rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.3em;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
@media screen and (max-width: 768px) {
  .root__copy {
    top: 0;
    right: 2.5rem;
    font-size: 1.4rem;
  }
}

.root__copy--reverse {
  left: 4.6rem;
  right: auto;
}
@media screen and (max-width: 768px) {
  .root__copy--reverse {
    left: 2.5rem;
  }
}

.root__copy span {
  padding: 0.5rem 0.2rem;
  background-color: #fff;
}

.root__description {
  margin-top: 2.5rem;
  font-size: 1.2rem;
  line-height: 1.83;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .root__description {
    margin-top: 3rem;
  }
}

.root-end {
  position: relative;
}

.root-end::before, .root-end::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 14rem;
  height: 5.6rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .root-end::before, .root-end::after {
    width: 9.8rem;
    height: 3.9rem;
  }
}

.root-end::before {
  top: 9.3rem;
  left: 7.5rem;
  background-image: url(../img/icon_triangle02.png);
}
@media screen and (max-width: 768px) {
  .root-end::before {
    top: 22rem;
    left: auto;
    right: -3.9rem;
  }
}

.root-end--goal::before {
  top: 11.8rem;
  left: auto;
  right: 2rem;
}
@media screen and (max-width: 768px) {
  .root-end--goal::before {
    top: 14.5rem;
    left: auto;
    right: -3.9rem;
  }
}

@media screen and (min-width: 769px) {
  .root-end--goal-ma::before {
    top: 13rem;
    left: 14rem;
  }
}

@media screen and (min-width: 769px) {
  .root-end--middle::before {
    top: 10rem;
    left: 4rem;
  }
}

.root-end::after {
  top: 6rem;
  right: -4.4rem;
  background-image: url(../img/icon_triangle01.png);
}
@media screen and (max-width: 768px) {
  .root-end::after {
    top: 8.5rem;
    right: auto;
    left: -4.2rem;
  }
}

.root-end--goal::after {
  top: 2.2rem;
  left: 7.5rem;
  right: auto;
}
@media screen and (max-width: 768px) {
  .root-end--goal::after {
    top: 5.5rem;
    left: -4.2rem;
    right: auto;
  }
}

@media screen and (min-width: 769px) {
  .root-end--goal-ma::after {
    top: -2rem;
    left: auto;
    right: 1.5rem;
  }
}

@media screen and (min-width: 769px) {
  .root-end--middle::after {
    content: none;
  }
}

.root__point {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
	-ms-flex-align: center;
  align-items: center;
  margin: auto;
  width: 16.9rem;
  height: 5.4rem;
  border: 1px solid #000;
}
@media screen and (max-width: 768px) {
  .root__point {
    width: 13.5rem;
    height: 4.3rem;
  }
}

.root__point--goal {
  margin-bottom: 15rem;
}
@media screen and (max-width: 768px) {
  .root__point--goal {
    margin-bottom: 9rem;
  }
}

.root__point span {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .root__point span {
    font-size: 1.5rem;
  }
}

.root__distance-container {
  position: relative;
  padding: 7rem 0 11rem;
  margin: 3rem 0 5rem;
  background-image: url(../img/img_distance01.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .root__distance-container {
    padding: 4rem 0 9rem;
    margin: 1rem 0 14rem;
    background-image: url(../img/img_distance01_sp.png);
  }
}

.root__distance-container::before, .root__distance-container::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 14rem;
  height: 5.6rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .root__distance-container::before, .root__distance-container::after {
    width: 9.8rem;
    height: 3.9rem;
  }
}

.root__distance-container::before {
  top: 9rem;
  left: 6.5rem;
  background-image: url(../img/icon_triangle02.png);
}
@media screen and (max-width: 768px) {
  .root__distance-container::before {
    top: 0;
    left: -3.2rem;
  }
}

@media screen and (min-width: 769px) {
  .root__distance-container--ta::before {
    top: 100%;
    left: 10rem;
  }

  .root__distance-container--ta2::before {
    top: 11rem;
    left: auto;
    right: 4rem;
  }

  .root__distance-container--tb::before {
    top: auto;
    bottom: 0;
    left: 10rem;
  }

  .root__distance-container--ma::before, .root__distance-container--mb::before {
    top: auto;
    left: 2rem;
    bottom: 4rem;
  }

  .root__distance-container--mb2::before {
    top: auto;
    left: 0;
    bottom: 4rem;
  }
}

.root__distance-container::after {
  top: 10rem;
  right: 0;
  background-image: url(../img/icon_triangle01.png);
}
@media screen and (max-width: 768px) {
  .root__distance-container::after {
    top: 9rem;
    right: -4rem;
  }
}

@media screen and (min-width: 769px) {
  .root__distance-container--ta::after {
    top: 3.3rem;
    right: 6.6rem;
  }

  .root__distance-container--ta2::after {
   content: none;
  }

  .root__distance-container--tb::after {
    top: 3.3rem;
    right: 6.6rem;
  }

  .root__distance-container--ma::after {
    top: 3rem;
    right: 8rem;
  }

  .root__distance-container--mb::after {
    top: 4rem;
    right: 3rem;
  }

  .root__distance-container--mb2::after {
    top: -8rem;
    right: -5rem;
  }
}

.root__distance-container--type2 {
  padding: 2rem 0 11.5rem;
  background-image: url(../img/img_distance02.png);
}
@media screen and (max-width: 768px) {
  .root__distance-container--type2 {
    padding: 0.8rem 0 10rem;
    background-image: url(../img/img_distance02_sp.png);
  }
}

.root__distance-container--type2::before {
  top: 7rem;
  left: auto;
  right: -4rem;
}
@media screen and (max-width: 768px) {
  .root__distance-container--type2::before {
    top: 12rem;
    left: auto;
    right: -3.9rem;
  }
}

@media screen and (min-width: 769px) {
  .root__distance-container--type2-kb::before {
    top: 10rem;
    left: 1.7rem;
    right: auto;
  }

  .root__distance-container--type2-ta::before, .root__distance-container--type2-tb::before {
    content: none;
  }
}

.root__distance-container--type2::after {
  content: none;
}
@media screen and (max-width: 768px) {
  .root__distance-container--type2::after {
    content: "";
    top: 4rem;
    left: -4.2rem;
    right: auto;
  }
}

@media screen and (min-width: 769px) {
  .root__distance-container--type2-kb::after {
    content: "";
    top: 2rem;
    right: 3.5rem;
  }

  .root__distance-container--type2-ta::after {
    content: "";
    top: 4.5rem;
    right: 1rem;
  }

  .root__distance-container--type2-tb::after {
    content: "";
    top: 5rem;
    right: 26rem;
  }
}

.root__distance-container--type3 {
  padding: 5rem 0 8rem;
  background-image: url(../img/img_distance03.png);
}
@media screen and (max-width: 768px) {
  .root__distance-container--type3 {
    padding: 3.5rem 0 5rem;
    background-image: url(../img/img_distance03_sp.png);
  }
}

.root__distance-container--type3::before {
  content: none;
}
@media screen and (max-width: 768px) {
  .root__distance-container--type3::before {
    content: "";
    top: 8rem;
    left: auto;
    right: -3.9rem;
  }
}

@media screen and (min-width: 769px) {
  .root__distance-container--type3-tb::before {
    content: "";
    top: calc(100% - 3rem);
    left: 10rem;
  }

  .root__distance-container--type3-ma::before {
    content: "";
    top: 6rem;
    left: auto;
    right: 2rem;
  }

  .root__distance-container--type3-mb::before {
    content: none;
  }
}

.root__distance-container--type3::after {
  top: -1rem;
  left: 6rem;
  right: auto;
}
@media screen and (max-width: 768px) {
  .root__distance-container--type3::after {
    top: 0.4rem;
    left: -4.2rem;
    right: auto;
  }
}

@media screen and (min-width: 769px) {
  .root__distance-container--type3-kb::after {
    top: 4rem;
    left: 21.5rem;
  }

  .root__distance-container--type3-tb::after {
    top: 3rem;
    left: auto;
    right: 2rem;
    background-image: url(../img/icon_triangle02.png);
  }

  .root__distance-container--type3-ma::after {
    content: none;
  }

  .root__distance-container--type3-mb::after {
    content: "";
    top: 5rem;
    left: auto;
    right: 7rem;
  }
}

.root__distance-container--type4 {
  padding: 5.5rem 0 7rem;
  background-image: url(../img/img_distance04.png);
}
@media screen and (max-width: 768px) {
  .root__distance-container--type4 {
    padding: 1rem 0 7rem;
    background-image: url(../img/img_distance04_sp.png);
  }
}

.root__distance-container--type4::before {
  top: 15.5rem;
  left: -1.5rem;
}
@media screen and (max-width: 768px) {
  .root__distance-container--type4::before {
    top: 7rem;
    left: auto;
    right: -3.9rem;
  }
}

@media screen and (min-width: 769px) {
  .root__distance-container--type4-ta::before {
    top: -7rem;
    left: auto;
    right: 1rem;
  }

  .root__distance-container--type4-tb::before {
    top: -12rem;
    left: 3rem;
  }

  .root__distance-container--type4-ma::before {
    top: 3rem;
    left: auto;
    right: 2rem;
  }

  .root__distance-container--type4-ma2::before, .root__distance-container--type4-mb2::before {
    content: none;
  }

  .root__distance-container--type4-mb::before {
    top: 0;
    left: 9rem;
  }
}

.root__distance-container--type4::after {
  top: 5.5rem;
  right: 5rem;
}
@media screen and (max-width: 768px) {
  .root__distance-container--type4::after {
    top: -0.75rem;
    right: auto;
    left: -4rem;
  }
}

@media screen and (min-width: 769px) {
  .root__distance-container--type4-ta::after {
    top: 2.4rem;
    left: 3rem;
    right: auto;
  }

  .root__distance-container--type4-tb::after {
    content: none;
  }

  .root__distance-container--type4-ma::after, .root__distance-container--type4-mb::after {
    content: none;
  }

  .root__distance-container--type4-ma2::after {
    top: 0;
    right: 2.5rem;
  }

  .root__distance-container--type4-mb2::after {
    top: auto;
    left: 3rem;
    right: auto;
    bottom: -3rem;
  }
}

.root__distance-container--type4-2::before {
  content: none;
}
@media screen and (max-width: 768px) {
  .root__distance-container--type4-2::before {
    content: "";
    top: 13rem;
    left: auto;
    right: -3.9rem;
  }
}

@media screen and (min-width: 769px) {
  .root__distance-container--type4-2-ta::before {
    content: "";
    top: 1.4rem;
    left: 20rem;
  }

  .root__distance-container--type4-2-tb::before {
    content: none;
  }
}

.root__distance-container--type4-2::after {
  top: 0rem;
  right: 7rem;
}
@media screen and (max-width: 768px) {
  .root__distance-container--type4-2::after {
    top: 6rem;
    left: -4.2rem;
    right: auto;
  }
}

@media screen and (min-width: 769px) {
  .root__distance-container--type4-2-ta::after {
    content: none;
  }

  .root__distance-container--type4-2-tb::after {
    content: none;
  }
}

.root__distance-container--type5 {
  padding: 2.5rem 0 12rem;
  background-image: url(../img/img_distance05.png);
}
@media screen and (max-width: 768px) {
  .root__distance-container--type5 {
    padding: 1rem 0 8.5rem;
    background-image: url(../img/img_distance05_sp.png);
  }
}

.root__distance-container--type5::before {
  top: 2rem;
  right: 14rem;
}
@media screen and (max-width: 768px) {
  .root__distance-container--type5::before {
    top: 10rem;
    left: auto;
    right: -3.9rem;
  }

  .root__distance-container--type5-kb::before {
    top: -9rem;
  }
}

@media screen and (min-width: 769px) {
  .root__distance-container--type5-kb::before {
    content: none;
  }

  .root__distance-container--type5-ta::before {
    top: 3.5rem;
    left: auto;
    right: -3rem;
  }

  .root__distance-container--type5-ta2::before {
    top: 8.5rem;
    left: 6rem;
  }

  .root__distance-container--type5-ma::before {
    top: 6rem;
    left: auto;
    right: -3rem;
  }

  .root__distance-container--type5-mb::before {
    top: 4rem;
    left: auto;
    right: -3rem;
  }
}

.root__distance-container--type5::after {
  content: none;
}
@media screen and (max-width: 768px) {
  .root__distance-container--type5::after {
    content: "";
    top: 1.7rem;
    left:  -4.2rem;
    right: auto;
  }
}

@media screen and (min-width: 769px) {
  .root__distance-container--type5-kb::after {
    content: "";
    top: 5rem;
    left:  -7rem;
  }

  .root__distance-container--type5-ta::after {
    content: "";
    top: -8.8rem;
    left: 2rem;
    right: auto;
  }

  .root__distance-container--type5-ma::after {
    content: "";
    top: 3rem;
    left: 6rem;
    right: auto;
  }

  .root__distance-container--type5-mb::after {
    content: "";
    top: -2rem;
    left: 6rem;
    right: auto;
  }
}

.plus {
  padding: 5rem 0;
}
@media screen and (max-width: 768px) {
  .plus {
    padding: 0;
  }
}

.plus--t0 {
  padding-top: 0;
}

.plus--b0 {
  padding-bottom: 0;
}

.plus--110 {
  padding: 8rem 0;
}

.plus--120 {
  padding: 8.5rem 0;
}

@media screen and (min-width: 769px) {
  .plus--t20 {
    padding-top: 7rem;
  }

  .plus--t30 {
    padding-top: 8rem;
  }

  .plus--t50 {
    padding-top: 10rem;
  }

  .plus--t60 {
    padding-top: 11rem;
  }
  
  .plus--t80 {
    padding-top: 13rem;
  }

  .plus--t90 {
    padding-top: 14rem;
  }

  .plus--t100 {
    padding-top: 15rem;
  }

  .plus--t120 {
    padding-top: 17rem;
  }

  .plus--b10 {
    padding-bottom: 6rem;
  }
  
  .plus--b20 {
    padding-bottom: 7rem;
  }

  .plus--b30 {
    padding-bottom: 8rem;
  }
  
  .plus--b40 {
    padding-bottom: 9rem;
  }

  .plus--b60 {
    padding-bottom: 11rem;
  }

  .plus--b70 {
    padding-bottom: 12rem;
  }
  
  .plus--b90 {
    padding-bottom: 14rem;
  }

  .plus--b100 {
    padding-bottom: 15rem;
  }
}

@media screen and (max-width: 768px) {
  .plus--t10sp {
    padding-top: 1rem;
  }

  .plus--t20sp {
    padding-top: 2rem;
  }

  .plus--t30sp {
    padding-top: 3rem;
  }

  .plus--t100sp {
    padding-top: 10rem;
  }

  .plus--b10sp {
    padding-bottom: 1rem;
  }

  .plus--b30sp {
    padding-bottom: 3rem;
  }

  .plus--b40sp {
    padding-bottom: 4rem;
  }

  .plus--b50sp {
    padding-bottom: 5rem;
  }

  .plus--b60sp {
    padding-bottom: 6rem;
  }

  .plus--b100sp {
    padding-bottom: 10rem;
  }

  .plus--b160sp {
    padding-bottom: 16rem;
  }

  .plus--b180sp {
    padding-bottom: 18rem;
  }
}

.root__distance {
  padding-left: 4rem;
  margin-left: auto;
  width: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.3em;
}
@media screen and (max-width: 768px) {
  .root__distance {
    padding-left: 0;
    width: 100%;
    text-align: center;
  }
}

.root__distance--end {
  padding: 3rem 0 4rem 4rem;
  margin: 1.5rem 0 18% auto;
  width: 50%;
  border-left: 1px dashed #2f201b;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .root__distance--end {
    padding: 3.5rem 0 5rem 1rem;
    margin: 0.7rem 0 80% auto;
  }
}

.root__distance--end .magt40 {
  margin-top: 4rem;
}

@media screen and (max-width: 768px) {
  .root__distance--end-start {
    margin-bottom: 60%;
  }
}

.root__distance--end-middle {
  padding: 6rem 0 10rem 4rem;
  margin: 7.5rem 0 2rem auto;
}
@media screen and (max-width: 768px) {
  .root__distance--end-middle {
    padding: 7rem 0 8rem 1rem;
    margin: 2.5rem 0 4rem auto;
  }
}

.root__distance--end-goal {
  padding: 2.5rem 0 14rem 4rem;
  margin: 9rem 0 1.5rem auto;
}
@media screen and (max-width: 768px) {
  .root__distance--end-goal {
    padding: 7rem 0 8rem 1rem;
    margin-top: 1.5rem;
  }
}

@media screen and (min-width: 769px) {
  .root__distance--end-goal2 {
    margin-top: 3rem;
  }

  .root__distance--end-goal3 {
    margin-top: 13rem;
  }
}

.root__distance a {
  display: block;
  position: relative;
  padding: 0.5rem 0;
  margin-bottom: 1.5rem;
  width: 16rem;
  background-image: url(../img/texture01.png);
  color: #000;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-align: center;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .root__distance a {
    width: 14.5rem;
    font-size: 1.1rem;
  }
}

.root__distance a::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 1rem;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 4px solid #000;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.root__distance a:hover::after {
  right: 0.5rem;
}

.root__column-cover {
  position: relative;
  margin-top: -5rem;
  width: 100%;
  height: 5rem;
}

.root__column-cover div {
  position: absolute;
  top: 0;
  left: 50%;
  width: 34.9rem;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .root__column-cover div {
    width: 100%;
  }
}

@media screen and (min-width: 769px) {
  .root__column-cover::before, .root__column-cover::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    width: calc(50% - 17rem);
    height: 100%;
    background-color: #fff;
  }

  .root__column-cover::before {
    left: 0;
  }
  
  .root__column-cover::after {
    right: 0;
  }
}

.root__column {
  position: relative;
  margin: auto;
  max-width: 51rem;
}

.root__column--wide {
  max-width: 57.5rem;
}

.root__column--decoration::before, .root__column--decoration::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 14rem;
  height: 5.6rem;
  background-image: url(../img/icon_triangle03.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .root__column--decoration::before, .root__column--decoration::after {
    width: 9.8rem;
    height: 3.9rem;
  }
}

.root__column--decoration::before {
  top: -1rem;
  left: -13.7rem;
}
@media screen and (max-width: 768px) {
  .root__column--decoration::before {
    top: 6.6rem;
    left: -4.2rem;
  }
}

.root__column--decoration::after {
  top: 7rem;
  right: -17.5rem;
}
@media screen and (max-width: 768px) {
  .root__column--decoration::after {
    top: 15.4rem;
    right: -3.9rem;
  }
}

.root__column-decoration {
  position: absolute;
  top: -8rem;
  left: -9rem;
  width: 49%;
}
@media screen and (max-width: 768px) {
  .root__column-decoration {
    top: -8rem;
    left: -0.5rem;
    width: 55%;
  }
}

.root__column-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
	-ms-flex-align: start;
  align-items: flex-start;
}

.root__column-wrapper--reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .root__column-wrapper--reverse {
    display: block;
  }
}

.root__column-text {
  margin-right: 3rem;
}
@media screen and (max-width: 768px) {
  .root__column-wrapper--reverse .root__column-text {
    padding: 0 2.7rem;
    margin-right: 0;
  }
}

@media screen and (min-width: 769px) {
  .root__column-text--narrow {
    margin-right: 5rem;
  }
}

@media screen and (max-width: 768px) {
  .root__column-text--decoration {
    position: relative;
  }

  .root__column-text--decoration::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 21.7rem;
    left: -4.2rem;
    width: 9.8rem;
    height: 3.9rem;
    background-image: url(../img/icon_triangle03.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

.root__column-image {
  flex-shrink: 0;
  width: 36%;
}
@media screen and (max-width: 768px) {
  .root__column-image {
    margin-top: 3.5rem;
    width: 40%;
  }

  .root__column-wrapper--reverse .root__column-image {
    margin: 0 auto 3rem;
    width: 43%;
  }
}

@media screen and (min-width: 769px) {
  .root__column-image--float {
    position: relative;
    margin-top: -11rem;
  }

  .root__column-image--float-type2, .root__column-image--float-type4 {
    margin-top: -3rem;
  }

  .root__column-image--float-type3 {
    margin-top: -7rem;
  }
}

.root__column-image--float div {
  position: absolute;
  right: -5.4rem;
  bottom: -7.3rem;
  width: 65.6%;
}
@media screen and (max-width: 768px) {
  .root__column-image--float div {
    display: none;
  }
}

.root__column-image--float-type2 div {
  right: -8.9rem;
  bottom: -3.5rem;
}

.root__column-image--float-type3 .second, .root__column-image--float-type4 .second {
  top: -2.3rem;
  right: -12.4rem;
  bottom: auto;
}

@media screen and (min-width: 769px) {
  .root__column-image--wide {
    width: 38.8%;
  }
}

@media screen and (min-width: 769px) {
  .root__column-image--xwide {
    width: 50%;
  }
}

.root__column-title {
  text-align: center;
}

.root__column-title p {
  display: inline-block;
  position: relative;
  margin-bottom: 3rem;
  font-size: 1.4rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .root__column-title p {
    font-size: 1.1rem;
  }
}

.root__column-title p::before, .root__column-title p::after {
  content: "";
  display: inline-block;
  position: absolute;
  height: 0.1rem;
  width: 2.4rem;
  background-color: #000;
}
@media screen and (max-width: 768px) {
  .root__column-title p::before, .root__column-title p::after {
    width: 1.9rem;
  }
}

.root__column-title p::before {
  left: -1.2em;
  bottom: -0.9em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.root__column-title p::after {
  right: -1.2em;
  bottom: -0.9em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.root__column-title h3 {
  padding-bottom: 0.5rem;
  margin-bottom: 5rem;
  color: #00a8d2;
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
  .root__column-title h3 {
    margin-bottom: 3rem;
    font-size: 1.9rem;
  }
}

.root__column-title h3 span {
  border-bottom: 2px dotted #00a8d2;
}

.root__column-border {
  padding-top: 5rem;
  margin-top: 5rem;
  border-top: 3px dashed #4e8fbb;
}
@media screen and (max-width: 768px) {
  .root__column-border {
    padding-top: 3rem;
    margin-top: 3rem;
  }
}

.float-decoration {
  position: absolute;
  left: 4rem;
  bottom: -7rem;
  width: 20.9rem;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .float-decoration {
    top: 1rem;
    left: -1rem;
    bottom: auto;
    width: 9rem;
  }
}

.float-decoration--b0 {
  top: auto;
  bottom: 0;
}

.float-decoration--b20 {
  top: auto;
  bottom: 2rem;
}
@media screen and (max-width: 768px) {
  .float-decoration--b20 {
    bottom: 4rem;
  }
}

@media screen and (min-width: 769px) {
  .float-decoration--b20 {
    left: 11rem;
  }
}

.float-decoration--b40 {
  bottom: 4rem;
}

.float-decoration--type2 {
  width: 30rem;
  left: 3rem;
  bottom: -2rem;
}
@media screen and (max-width: 768px) {
  .float-decoration--type2 {
    width: 14rem;
    top: -9rem;
    left: 0rem;
    bottom: auto;
  }
}

.gourmet-link {
  position: absolute;
  top: 0;
  left: 11rem;
  width: 14rem;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .gourmet-link {
    top: -1.5rem;
    left: auto;
    right: -1rem;
    width: 11rem;
  }
}

.gourmet-link:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.gourmet-link--l20 {
  left: 2rem;
}
@media screen and (max-width: 768px) {
  .gourmet-link--l20 {
    left: 0;
  }
}

.gourmet-link--ta {
  left: 14rem;
}
@media screen and (max-width: 768px) {
  .gourmet-link--ta {
    top: auto;
    left: auto;
    right: 0;
    bottom: -4rem;
  }
}

.gourmet-link--tb {
  top: -5rem;
  left: auto;
  right: 5rem;
}
@media screen and (max-width: 768px) {
  .gourmet-link--tb {
    top: 3rem;
    left: auto;
    right: 0;
  }
}

.gourmet-link--mb {
  top: 5rem;
  left: auto;
  right: 0;
}

.gmap {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}

.gmap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
/* 下層 ここまで */