@charset "UTF-8";
/* ///////////////////////////////////////////
  value.scss
  変数・mixinに関する設定
/////////////////////////////////////////// */
/*====================================
  カラー
=====================================*/
/*
$color1: #1f3134; //黒っぽい緑
$color2: #ff0033; //赤
$color3: #b40034; //エンジ色
$color4: #0f3784; //青

//2022～
$color5: #aac467; //黄緑
$color7: #595757; //濃グレー

$mainColor: $color1;
$accentColor: #fff; //白

//2022～
$fontColor: $color7;

$bgColor1: #f8eef7; //薄ピンク
$bgColor2: #e0eff2; //水色
$bgColor3: #f4efe4; //ベージュ
$bgColor4: #f5f2ef; //グレーっぽいベージュ
$bgColor5: #fffee6; //薄黄色

$bdColor1: #d5d7d6; //グレー

$pastelColor1: #e3a7c8;
$pastelColor2: #f3efa1;
$pastelColor3: #a8cae5;
$pastelColor4: #ed7986;

$pastelColor1-dark: #eca1ca;
$pastelColor2-dark: #e6d223;
$pastelColor3-dark: #7ebded;

$mkColor1: #f6d1e5; //薄ピンク
$mkColor2: #c6e0f6; //水色
$mkColor3: #faf3b1; //黄色

//2022～
$boysColor: #5aa7ab;
$girlsColor: #ab226d;
$boysBgColor: #d4e5e6;
$girlsBgColor: #eadfe4;

$btnColor: #9fa0a0;
*/
/*====================================
  画像
=====================================*/
/*====================================
  font
=====================================*/
/*--------------------
～2021用フォント設定
--------------------*/
@font-face {
  font-family: "HoshizoraMincho";
  src: url(./../images/font/StarSkyMincyou-Regular.woff2) format("woff2");
  src: url(./../images/font/StarSkyMincyou-Regular.woff) format("woff");
}
/*--------------------
2022～フォント設定
--------------------*/
/*====================================
  レイアウト・パーツ
=====================================*/
/* /////////////////////////////////
  Media Queries
///////////////////////////////// */
/* /////////////////////////////////
  margin-top
///////////////////////////////// */
/* ///////////////////////////////////////////
  online.scss
　ランドセル貸出しサービス
/////////////////////////////////////////// */
/*=================================
  online
=================================*/
.page--online {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, Arial, sans-serif;
}
@media only screen and (max-width: 768px) {
  .page--online {
    margin-bottom: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online {
    margin-bottom: 100px;
  }
}
.page--online .page__title {
  position: relative;
  background-image: url("../images/common/pagetitle-bg_b.png");
}
@media only screen and (max-width: 768px) {
  .page--online .page__title {
    margin-bottom: 200px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .page__title {
    margin-bottom: 500px;
  }
}
.page--online .page__title::after {
  width: 100%;
  content: "";
  display: block;
  background: url(../images/page/online/pagetitle-after.jpg) center top no-repeat #e7eaee;
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .page--online .page__title::after {
    height: 200px;
    bottom: -200px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .page__title::after {
    height: 500px;
    bottom: -500px;
  }
}
.page--online .online {
  /*=================================
    申し込みフォームエラー表示
  =================================*/
  /*=================================
   コンテンツ
  =================================*/
  /*=================================
    申し込みフォーム
  =================================*/
}
.page--online .online__container {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .page--online .online__container {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--online .online__container {
    padding: 0 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--online .online__container {
    padding: 0 80px;
  }
}
.page--online .online__error {
  display: none;
  max-width: 900px;
  margin: 0 auto;
  color: #ffd8d6;
  font-size: 1.2em;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .page--online .online__error {
    padding: 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__error {
    padding: 30px;
  }
}
.page--online .online__error a {
  color: #ffd8d6;
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets {
    padding-top: 30px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__contets {
    padding-top: 50px;
  }
}
.page--online .online__contets figure {
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets figure {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__contets figure {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    margin-top: 50px;
    margin-bottom: 50px;
  }
  .page--online .online__contets figure > * {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
  }
  .page--online .online__contets figure > * {
    width: 50%;
    margin: 0;
  }
  .page--online .online__contets figure > *:nth-child(2n) {
    margin-right: 0;
  }
}
.page--online .online__contets figure img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets figure img:nth-child(n+2) {
    margin-top: 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__contets figure img {
    width: 50%;
  }
}
.page--online .online__contets .box {
  background-color: #f8eef7;
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets .box {
    padding: 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__contets .box {
    padding: 50px 20px;
  }
}
.page--online .online__contets .box p {
  margin: 0;
}
.page--online .online__contets h2 {
  text-align: center;
  font-family: "HoshizoraMincho", "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro W3", "HiraMinPro-W3", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets h2 {
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 1.8rem;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__contets h2 {
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 3rem;
  }
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets p {
    margin-top: 10px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__contets p {
    margin-top: 0px;
    text-align: center;
    font-size: 1.8rem;
  }
}
.page--online .online__contets dl {
  width: 100%;
  border-bottom: 1px solid #ccc;
  font-family: "HoshizoraMincho", "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro W3", "HiraMinPro-W3", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets dl {
    margin-top: 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__contets dl {
    margin-top: 50px;
  }
}
.page--online .online__contets dl dt,
.page--online .online__contets dl dd {
  line-height: 1.4;
  border-top: 1px solid #ccc;
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets dl dt,
.page--online .online__contets dl dd {
    padding: 15px 0;
    font-size: 1.5rem;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__contets dl dt,
.page--online .online__contets dl dd {
    font-size: 1.8rem;
    padding: 20px;
  }
}
.page--online .online__contets dl dt p,
.page--online .online__contets dl dd p {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, Arial, sans-serif;
  margin-top: 0;
  text-align: left !important;
  margin-top: 0.4em !important;
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets dl dt p,
.page--online .online__contets dl dd p {
    font-size: 1.4rem;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__contets dl dt p,
.page--online .online__contets dl dd p {
    font-size: 1.6rem;
  }
}
.page--online .online__contets dl dt {
  width: 30%;
}
.page--online .online__contets dl dd {
  width: 70%;
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets dl dd {
    padding-left: 10px;
  }
}
.page--online .online__contets dl dl {
  border-bottom: none;
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets dl dl {
    margin-top: 15px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__contets dl dl {
    margin-top: 20px;
  }
}
.page--online .online__contets dl dl dt {
  padding-left: 0;
}
.page--online .online__contets ol {
  max-width: 400px;
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets ol {
    margin: 20px auto;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__contets ol {
    margin: 30px auto;
  }
}
.page--online .online__contets ol li {
  font-family: "HoshizoraMincho", "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro W3", "HiraMinPro-W3", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
@media print, screen and (min-width: 769px) {
  .page--online .online__contets ol li {
    font-size: 1.8rem;
  }
}
.page--online .online__contets ol li:nth-child(n+2) {
  margin-top: 0.5em;
}
.page--online .online__contets ol li p {
  text-align: left;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, Arial, sans-serif;
}
@media only screen and (max-width: 768px) {
  .page--online .online__contets ol li p {
    margin-top: 5px;
  }
}
.page--online .online__movie {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
.page--online .online__movie:after {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.page--online .online__movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.page--online .online__button {
  width: 100%;
  max-width: 100%;
  height: 50px;
  color: #f7a1cb;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  border: 1px solid #f7a1cb;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s linear;
  position: relative;
  margin: 0 auto;
  margin: 0 auto;
  max-width: 400px;
}
.page--online .online__button::after {
  width: 0;
  height: 0;
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #f7a1cb;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 17px;
  margin: auto 0;
}
@media print, screen and (min-width: 769px) {
  .page--online .online__button:hover {
    color: #fff;
    background-color: #f7a1cb;
    text-decoration: none;
  }
  .page--online .online__button:hover::after {
    border-color: transparent transparent transparent #fff;
  }
}
@media only screen and (max-width: 768px) {
  .page--online .online__button {
    margin-top: 20px;
    padding: 0 15px 0 10px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__button {
    font-size: 1.8rem;
    margin-top: 30px;
  }
}
@media only screen and (max-width: 768px) {
  .page--online .online__button + p {
    margin-top: 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__button + p {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve {
    padding: 0 0 30px 0;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve {
    padding: 0 0 100px 0;
  }
}
.page--online .online__reserve h2 {
  text-align: center;
  font-family: "HoshizoraMincho", "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro W3", "HiraMinPro-W3", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve h2 {
    font-size: 1.8rem;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve h2 {
    font-size: 3.6rem;
  }
}
.page--online .online__reserve .message {
  display: block;
  max-width: 1060px;
  margin: 0 auto;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, Arial, sans-serif;
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve .message {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--online .online__reserve .message {
    padding: 0 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--online .online__reserve .message {
    padding: 0 80px;
  }
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve .message {
    margin-top: 30px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve .message {
    margin-top: 50px;
  }
  .page--online .online__reserve .message p {
    text-align: center;
  }
}
.page--online .online__reserve--stop {
  position: relative;
  padding: 15px;
}
.page--online .online__reserve--stop::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.page--online .online__reserve--stop::after {
  white-space: pre-wrap;
  content: "オンライン接客サービスは現在休止しております。\a再開の際は改めてWEBサイトでご案内申し上げます。";
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  color: #ef4396;
  font-weight: bold;
}
.page--online .online__reserve--stop input,
.page--online .online__reserve--stop select,
.page--online .online__reserve--stop label,
.page--online .online__reserve--stop a {
  pointer-events: none;
}
.page--online .online__reserve .reserve__form {
  display: block;
  max-width: 1060px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve .reserve__form {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--online .online__reserve .reserve__form {
    padding: 0 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--online .online__reserve .reserve__form {
    padding: 0 80px;
  }
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve .reserve__form {
    margin-top: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve .reserve__form {
    margin-top: 90px;
  }
}
.page--online .online__reserve .reserve__form dd .mwform-radio-field,
.page--online .online__reserve .reserve__form dd .mwform-checkbox-field {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, Arial, sans-serif;
  display: inline-block;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve .reserve__form dd .mwform-radio-field,
.page--online .online__reserve .reserve__form dd .mwform-checkbox-field {
    margin-right: 20px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve .reserve__form dd .mwform-radio-field,
.page--online .online__reserve .reserve__form dd .mwform-checkbox-field {
    margin-right: 35px;
  }
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve .reserve__form dd .mwform-radio-field:nth-of-type(n + 2),
.page--online .online__reserve .reserve__form dd .mwform-checkbox-field:nth-of-type(n + 2) {
    margin-left: 0px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve .reserve__form dd .mwform-radio-field:nth-of-type(n + 2),
.page--online .online__reserve .reserve__form dd .mwform-checkbox-field:nth-of-type(n + 2) {
    margin-left: 0px;
  }
}
.page--online .online__reserve.input .online__container {
  border-top: solid 1px #ccc;
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve.input .online__container {
    margin-top: 50px;
    padding: 40px 0 0;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve.input .online__container {
    margin-top: 100px;
    padding-top: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve.confirm .online__container {
    padding-top: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve.confirm .online__container {
    padding-top: 100px;
  }
}
.page--online .online__reserve.confirm .message {
  margin: 0 auto 50px;
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve.complete .online__container {
    padding-top: 50px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve.complete .online__container {
    padding-top: 100px;
  }
}
.page--online .online__reserve.complete .message {
  margin-top: 0;
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve.complete .message__heading {
    margin-bottom: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve.complete .message__heading {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve.complete .message__heading::after {
    max-width: 150px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve.complete .message__heading::after {
    max-width: 200px;
  }
}
.page--online .online__reserve.complete .message p {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, Arial, sans-serif;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve.complete .message p:nth-child(n+2) {
    margin-top: 1em;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve.complete .message p:nth-child(n+2) {
    margin-top: 2em;
  }
}
.page--online .online__reserve.complete .message a {
  width: 100%;
  max-width: 100%;
  height: 50px;
  color: #f7a1cb;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  border: 1px solid #f7a1cb;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s linear;
  position: relative;
  margin: 0 auto;
}
.page--online .online__reserve.complete .message a::after {
  width: 0;
  height: 0;
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #f7a1cb;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 17px;
  margin: auto 0;
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve.complete .message a:hover {
    color: #fff;
    background-color: #f7a1cb;
    text-decoration: none;
  }
  .page--online .online__reserve.complete .message a:hover::after {
    border-color: transparent transparent transparent #fff;
  }
}
@media only screen and (max-width: 768px) {
  .page--online .online__reserve.complete .message a {
    margin-top: 25px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--online .online__reserve.complete .message a {
    max-width: 300px;
    margin: 50px auto 0 auto;
  }
}/*# sourceMappingURL=online.css.map */