@charset "UTF-8";
/* css : mobile first               */
/* breakpoint : pc min-width: 850px */
/*              TB min-width: 600px */
/*              SP 599px以下　　　 　*/
/**********************************************
  base
***********************************************/
:root {/*var(--window-color)*/
  /*color*/
  --base-color: #002a5b;
  --sub-color: #eaf6fd;
  --accent-color: #d7000f;
  --balance-color: #e6e5ef;
  --non-target-color: #cccccc;
  --hover-color: rgba(162, 153, 127, 0.3);
  --header-color: rgba(255, 255, 255, 1);
  --window-color: rgba(0, 0, 0, 0.6);
  /*font（emで設定すると、子要素に影響があり）*/
  --font-serif: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, serif;
  --font-sans-serif: "Verdana",Arial,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","ヒラギノ角ゴ ProN",sans-serif;
  --font-size-vl: 3rem;/*48px*/
  --font-size-xxl: 2.25rem;/*36px*/
  --font-size-xl: 2rem;/*32px*/
  --font-size-l: 1.5rem;/*24px*/
  --font-size-m: 1.15rem;/*18.4px*/
  --font-size-s: 1rem;/*16px standard*/
  --font-size-xs: 0.75rem;/*12px*/
  --font-size-xxs: 0.625rem;/*10px*/
}
html {
	width: 100%;
	height: 100%;
	color: #000;
	margin: 0;
	padding: 0;
	font-feature-settings: "palt" 1;/*OpenTypeの自動カーニング指定*/
  font-size: 16px;/*--font-size-s*/
  line-height: 1.5;
  scroll-behavior: smooth;/*スムーススクロールはCSS*/
}
body {
	font-family: var(--font-sans-serif);
	line-height: 1.8;
  height: 100%;
	text-align: justify;
}
iframe {
  vertical-align: bottom;
}
a {
  color: #000;
  text-decoration: none;
  transition: all 0.3s;
}
a:hover {
  opacity: 0.8;
}
ul, li {
  list-style: none;
}
img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: bottom;
}
button {
  display: block;
  font-size: 100%;
  font-family: inherit;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
}
button:hover,
button:focus {
  background: var(--base-color);
}
button:focus {
  outline: none;
}

/**********************************************
  utility
***********************************************/
/*text*/
.fwb { font-weight: bold; }
.fwn { font-weight: normal; }

/*padding*/
.pb-120 {
  padding-bottom: 120px;
}
/*icon*/
.blank {
  position: relative;
}
.blank::after {
  position: absolute;
  content: url(../images/icon_blank.svg);
  width: 1em;
  height: 1em;
  top: 0;
  right: -1.3em;
  margin: auto;
}

/*　注釈　*/
.ant-black {
  font-size: var(--font-size-xs);
  color: #000;
  margin-left: 1em;
}
.ant-black._ml0 {
  margin-left: 0;
}
.ant-red {
  font-size: var(--font-size-xs);
  color: var(--accent-color);
  margin-left: 1em;
}

/*　アンカーリンク着地点　*/
.anc-basic {
  scroll-margin-top: 100px;
}

/*各デバイス特有の変更*/
a.tel {
  color: #fff;/*iOS電話番号と思しき数字にAタグを貼る*/
}
@media screen and (max-width: 599px) {
  .pc {
    display: none;
  }
}
@media screen and (min-width: 600px) {
  .sp {
    display: none;
  }
}

/*/////////////////////////////////////////////////////////////////////*/
/*  boxstyle                                                           */
/*/////////////////////////////////////////////////////////////////////*/

/**********************************************
  wrapper
***********************************************/
.wrapper {
  overflow: hidden;
}

/**********************************************
  logo
***********************************************/
.logo__rink {
  display: block;
}

/**********************************************
  header
***********************************************/
/* SP 599px以下 */
.header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: var(--header-color);
  z-index: 900;/*モーダルのためこの数値を超えない*/
}
.header__logo {
  width: 120px;
  height: auto;
  margin-left: 20px;
}
.header__logoImg {
  vertical-align: middle;
}
@media screen and (min-width: 600px) {
  /* TB・PC */
  .header {
    width: calc((828 / 1990)* 100vw);
    max-width: 828px;
    min-width: 500px;
  }
}

/**********************************************
  footer
***********************************************/
/* SP 599px以下 */
footer {
  width: 100%;
  margin: 0 auto;
  background-color: var(--base-color);
}
.footer__inner {
  padding: 100px 0 120px;
}
.footer__sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.footer__item {
  width: fit-content;
}
.sns__icon {
  width: 45px;
  height: auto;
}
.footer__logo {
  margin-top: 52px;
}
.logo__img {
  margin: 0 auto;
  border: 1px solid #fff;
}
.footer__txt {
  color: #fff;
  text-align: center;
  margin: 40px 40px 0;
}
.footer__policy {

  text-align: center;
  margin-top: 60px;
}
.policy__link {
  color: #fff;
}
.footer__coppy {
  color: #fff;
  margin-top: 60px;
}
@media screen and (min-width: 600px) {
  /* TB・PC */
  footer {
    width: calc((828 / 1990)* 100vw);
    max-width: 828px;
    min-width: 500px;
  }
}

/**********************************************
  pcFix
***********************************************/
.pcFix {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: -1;/*0だとfooterが隠れる*/
}
.pcFix__paint {
  min-height: 100vh;
  object-fit: cover;
}
.pcFix__txt {
  font-size: 0;
}

/**********************************************
  mainContents
***********************************************/
/* SP 599px以下 */
.mainContents {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #fff;
}
@media screen and (min-width: 600px) {
  /* TB・PC */
  .mainContents {
    width: calc((828 / 1990)* 100vw);
    max-width: 828px;
    min-width: 500px;
  }
}

/**********************************************
  mainView
***********************************************/
.mainView {
  width: 100%;
  position: relative;
}

/**********************************************
  innerView
***********************************************/
.innerView {
  width: 100%;
  height: 294px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.innerView__ttl {
  color: #fff !important;
}

/**********************************************
  section
***********************************************/
/* SP 599px以下 */
.section__inner {
  width: 100%;
  margin: 120px auto 0;
  padding: 0 20px;
}
@media screen and (min-width: 600px) {
  /* TB・PC */
  .section__inner {
    width: calc((828 / 1990)* 100vw);
    max-width: 828px;
    min-width: 500px;
  }
}

/*/////////////////////////////////////////////////////////////////////*/
/*  component                                                          */
/*/////////////////////////////////////////////////////////////////////*/

/**********************************************
  navBtn
***********************************************/
.navBtn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0;
  right: -1px;/*謎の白ライン削除のため*/
  width: 50px;
  height: 50px;
  background-color: var(--base-color);
  cursor: pointer;
  z-index: 9999;
}
.navBtn__bor {
  display: block;
  width: 30px;
  height: 2px;
  background-color: #fff;
  transition: all .4s;
}
.navBtn__bor._middle,
.navBtn__bor._bottom {
  margin-top: 10px;
}
/*ボタン開閉*/
.navBtn__bor._top.active {
  transform: rotate(-45deg);
  margin-top: 0;
}
.navBtn__bor._middle.active {
  opacity: 0;
}
.navBtn__bor._bottom.active {
  transform: rotate(45deg);
  margin-top: -14px;
}

/**********************************************
  nav
***********************************************/
.nav {
  position: fixed;
  z-index: 900;
  top: 0;
  right: -120%;
  width: 100%;
  height: 100vh;/*ナビの高さ*/
  background-color: var(--window-color);
  /*動き*/
  transition: all 0.6s;
}
.nav.active {
  right: 0;
}
.nav__list {
  width: fit-content;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.nav__item {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-top: 1px solid var(--sub-color);
}
.nav__item:last-child {
  border-bottom: 1px solid var(--sub-color);
}
.nav__link {
  display: block;
  color: var(--sub-color);
  line-height: 1;
  padding: 1em;
}
@media screen and (min-width: 1200px) {/*navのみ切り替えポイント*/
  .nav {
    width: calc(50% - ((828 / 1990)* 50vw));
    height: 100vh;
  }
}

/**********************************************
  map
***********************************************/
.map {
  max-width: 100%;
  height: 440px;
  margin: auto;
}
.map__iframe {
  width: 100%;
  height: 100%;
}

/**********************************************
  coppy
***********************************************/
.coppy {
  display: block;
  text-align: center;
}

/**********************************************
  newsTicker
***********************************************/
.newsTicker {
  width: 100%;
  background-color: var(--sub-color);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
}
.newsTicker__item {
  padding: 20px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newsTicker__rink {
  color: #000;
}
.newsTicker__date {
  color: #000;
  position: relative;
}
.newsTicker__date::after {
  position: absolute;
  content: "|";
  top: 0.05em;
  right: -1em;
}
.newsTicker__rink {
  margin-left: 1.5em;
}
/*newsティッカー固有のCSS改編*/
.bx-wrapper {
  width: 100%;
  position: absolute;
  margin-bottom: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  background: transparent;
  bottom: 0;
  z-index: 10;
}

/**********************************************
  btn
***********************************************/
.btn {
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-m);
  text-align: center;
  line-height: 1;
  display: block;
  cursor: pointer;

}
.btn._darkBlue {
  color: #fff;
  background-color: var(--base-color);
}
.btn._red {
  color: #fff;
  background-color: var(--accent-color);
}

/**********************************************
  ttl
***********************************************/
/* PC/TB/SP */
.ttl {
  position: relative;
  font-family: var(--font-sans-serif);
  color: #000;
  font-weight: bold;
  line-height: 1;
}
.ttl._vl {
  font-size: var(--font-size-vl);
}
.ttl._xxl {
  font-size: var(--font-size-xxl);
}
.ttl._xl {
  font-size: var(--font-size-xl);
}
.ttl._l {
  font-size: var(--font-size-l);
}
.ttl._m {
  font-size: var(--font-size-m);
}
.ttl._s {
  font-size: var(--font-size-s);
}
.ttl._center {
  text-align: center;
}
.ttl._left {
  text-align: left;
}
.ttl._right {
  text-align: right;
}
.ttl._outline {
  color: #fff;
}
.ttl._vLine {
  border-left: 4px solid var(--base-color);
  padding-left: 1em;
}
.ttl._underline::after {
  position: absolute;
  content: "";
  width: 85px;
  height: 1px;
  left: 0;
  right: 0;
  bottom: -1em;
  margin: auto;
  background-color: #002a5b;
}
.ttl._note::before {
  position: absolute;
  content: "";
  background-image: url(../images/beginners/note.png);
  width: 22px;
  height: auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

/**********************************************
  ttlView
***********************************************/
.ttlView {
  width: 100%;
  height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.innerView__sub {
  display: block;
  color: #fff;
  text-align: center;
  margin-bottom: 16px;
}

/**********************************************
  intro
***********************************************/
.intro__inner {
  margin-top: 60px;
}
.intro__simpleTxt {
  text-align: center;
}

/**********************************************
  catch
***********************************************/
.catch {
  text-align: center;
}

/**********************************************
  inList（）
***********************************************/
/* PC/TB/SP */
.inList__item {
  margin-bottom: 20px;
  white-space: nowrap;
}
.inList__rink {
  position: relative;
  display: block;
}
.inList__rink::before{
  position: absolute;
  content: "-";
  top: 0;
  bottom: 0;
  left: -0.8em;
}

/**********************************************
  simpleTxt
***********************************************/
.simpleTxt {
  font-size: 16px;
  line-height: 1.8;
}

/**********************************************
  imgBox
***********************************************/
.imgBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.imgBox__item._col2 {
  width: calc(50% - 10px);
}

/**********************************************
  flexbox
***********************************************/
.flexbox {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;/*基準値　変更の場合は各ページで指定*/
}
.flexbox__item {
  position: relative;
}
.flexbox__link {
  display: block;
}
.flexbox__item._col2 {
  width: calc((100% - 20px) / 2);
}
.flexbox__item._col3 {
  width: calc((100% - 40px) / 3);
}
.flexbox__item._col4 {
  width: calc((100% - 60px) / 4);
}

/**********************************************
  dList(description list)
***********************************************/
.dList__ttl {
  width: fit-content;
  padding: 1.5rem 0 0.4rem;
  border-bottom: 1px solid var(--accent-color);
}
.dList__txt {
  width: 100%;
  padding: 1rem 0 0.6rem;
  border-bottom: 1px solid var(--base-color);
}

/**********************************************
  accordion
***********************************************/
.accordion {
  width: 100%;
}
.accordion__item{
  margin: 20px 0;
}

/**********************************************
  required
***********************************************/
.required {
  position: relative;
}
.required.required::after {
  position: absolute;
  content: "※必須";
  font-size: var(--font-size-xs);
  color: var(--accent-color);
  font-weight: bold;
  text-align: center;
  width: 3rem;
  bottom: 0;
  padding-left: 0.5rem;
  margin: auto;
  line-height: 1;
}

/**********************************************
  ant
***********************************************/
.ant {
  font-size: var(--font-size-xs);
  margin-left: 1em;
  vertical-align: text-top;
}
.ant._accent {
  color: var(--accent-color);
}
.ant__rink {
  text-decoration: underline;
}

/**********************************************
  submit
***********************************************/
.submit {
  font-size: var(--font-size-m);
  color: #fff;
  font-weight: bold;
  padding: 20px;
  background-color: var(--accent-color);
}

/**********************************************
  numberlist
***********************************************/
.numberlist {
  margin-left: 2.5em;
}
.numberlist-item {
  margin-top: 1em;
  list-style-type: decimal;
}
.numberlist-txt {
  font-weight: normal;
}

/***********************************************
  inNumberlist
***********************************************/
.inNumberlist {
  margin-left: 2em;
}
.inNumberlist-item {
  margin-top: 0.5em;
  list-style-type: decimal;
}