@charset "UTF-8";
/* --------------------------------
  変数
-------------------------------- */
/* --------------------------------
  about
-------------------------------- */
/* line 32, app/assets/stylesheets/about.scss */
.about {
  font-family: "YakuHanJP", "Noto Sans JP", "Meiryo", sans-serif;
  letter-spacing: 0.06em;
  font-size: 16px;
  color: #555;
  background: #111;
}

/* line 40, app/assets/stylesheets/about.scss */
section {
  padding: 0;
  margin: 0;
}

/* line 44, app/assets/stylesheets/about.scss */
.item__icon {
  width: 43px;
  height: 43px;
  min-width: 43px;
}

/* line 49, app/assets/stylesheets/about.scss */
.imgBox {
  padding: 0;
  margin: 0;
  display: inline-block;
  line-height: 0;
}

/* line 54, app/assets/stylesheets/about.scss */
.imgBox.sankaku {
  display: block;
  text-align: center;
  margin: clamp(20px, 5vw, 40px) auto 0;
}

/* line 60, app/assets/stylesheets/about.scss */
img {
  max-width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  background-color: inherit;
}

/* line 69, app/assets/stylesheets/about.scss */
h3 {
  font-size: clamp(14px, 2.5vw, 18px);
}

/* --------------------------------
page-about-XXX
-------------------------------- */
/* line 76, app/assets/stylesheets/about.scss */
.page-about-section {
  width: 100%;
  padding: 0 0 clamp(20px, 5vw, 60px);
  position: relative;
}

/* line 80, app/assets/stylesheets/about.scss */
.page-about-section::before {
  z-index: -1;
  width: 2300px;
  height: 800px;
  max-height: 800px;
  border-radius: 50%;
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* line 93, app/assets/stylesheets/about.scss */
.page-about-section::after {
  z-index: -1;
  width: 100%;
  height: 70%;
  margin: 30% 0 0;
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
}

/* line 105, app/assets/stylesheets/about.scss */
.page-about-section > .inner {
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}

/* line 113, app/assets/stylesheets/about.scss */
.page-about-titleWrapper {
  padding: clamp(40px, 5vw, 90px) 0 35px;
  text-align: center;
}

/* line 117, app/assets/stylesheets/about.scss */
.page-about-subTxt {
  margin: clamp(8px, 3.5vw, 15px) auto;
  font-size: 16px;
  line-height: 1.3;
  font-weight: bold;
  text-align: center;
  color: #22bdb1;
}

/* line 124, app/assets/stylesheets/about.scss */
.page-about-subTxt.white {
  color: #fff;
}

@media screen and (max-width:  768px ) {
  /* line 117, app/assets/stylesheets/about.scss */
  .page-about-subTxt {
    transform: scale(0.8);
  }
}

/* line 131, app/assets/stylesheets/about.scss */
.page-about-title {
  font-size: clamp(24px, 3.5vw, 35px);
  line-height: 1;
  letter-spacing: 0.01em;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #555;
}

/* line 141, app/assets/stylesheets/about.scss */
.page-about-title.white {
  color: #fff;
}

@media screen and (max-width:  768px ) {
  /* line 131, app/assets/stylesheets/about.scss */
  .page-about-title {
    padding-bottom: clamp(8px, 1.5vw, 10px);
  }
}

/* line 148, app/assets/stylesheets/about.scss */
.page-about-shilchikaSearchImg {
  width: 43px;
  min-width: 43px;
  height: 43px;
  margin: 0 5px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width:  768px ) {
  /* line 148, app/assets/stylesheets/about.scss */
  .page-about-shilchikaSearchImg {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 1px 0 0;
  }
}

/* line 163, app/assets/stylesheets/about.scss */
.screens-item {
  width: 100%;
  max-width: 470px;
  padding: 0;
  margin: clamp(20px, 5vw, 40px) auto;
  border-radius: 25px;
  line-height: 0;
  overflow: hidden;
  position: relative;
  border: 3px solid #e6e5db;
  background-color: #f8f7f1;
}

/* line 174, app/assets/stylesheets/about.scss */
.screens-item .imgBox {
  margin: 0 auto;
  text-align: center;
  display: block;
}

/* line 179, app/assets/stylesheets/about.scss */
.screens-item .screens-item__img {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* 遷移ボタン-横 */
/* line 187, app/assets/stylesheets/about.scss */
.btn_member {
  text-align: center;
}

/* line 189, app/assets/stylesheets/about.scss */
.btn_member .btn_member_link {
  width: 320px;
  height: 60px;
  margin: clamp(40px, 5vw, 60px) auto;
  border: 2px solid #fff;
  overflow: hidden;
  display: inline-block;
  position: relative;
  border-radius: 50px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  /* シマー効果 */
}

/* line 199, app/assets/stylesheets/about.scss */
.btn_member .btn_member_link:hover {
  opacity: 1;
}

@media screen and (max-width:  768px ) {
  /* line 189, app/assets/stylesheets/about.scss */
  .btn_member .btn_member_link {
    width: 300px;
  }
}

/* line 205, app/assets/stylesheets/about.scss */
.btn_member .btn_member_link img {
  width: 150%;
  max-width: max-content;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* line 215, app/assets/stylesheets/about.scss */
.btn_member .btn_member_link > .inner {
  z-index: 1;
  width: 100%;
  max-width: 380px;
  height: 82px;
  border-radius: 50px;
  display: block;
  margin: auto;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* line 229, app/assets/stylesheets/about.scss */
.btn_member .btn_member_link > .inner::after {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  transform: skewX(-25deg);
  opacity: 0;
}

@media screen and (max-width:  650px ) {
  /* line 229, app/assets/stylesheets/about.scss */
  .btn_member .btn_member_link > .inner::after {
    display: none;
  }
}

/* line 244, app/assets/stylesheets/about.scss */
.btn_member .btn_member_link > .inner:hover {
  /* ③ hover時にアニメーション開始 */
}

/* line 246, app/assets/stylesheets/about.scss */
.btn_member .btn_member_link > .inner:hover::after {
  opacity: 1;
  animation: shimmer .7s forwards;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* 遷移ボタン-丸 */
/* line 264, app/assets/stylesheets/about.scss */
.btn_member_follow {
  width: clamp(135px, 20vw, 240px);
  z-index: 1;
  display: block;
  position: fixed;
  bottom: clamp(10px, 2.5vw, 100px);
  left: clamp(10px, 2.5vw, 50px);
}

/* line 271, app/assets/stylesheets/about.scss */
.btn_member_follow .btn_member_follow_link {
  display: inline-block;
  position: relative;
  /* シマー効果 */
}

/* line 274, app/assets/stylesheets/about.scss */
.btn_member_follow .btn_member_follow_link:hover {
  opacity: 1;
}

/* line 277, app/assets/stylesheets/about.scss */
.btn_member_follow .btn_member_follow_link img {
  display: block;
}

/* line 281, app/assets/stylesheets/about.scss */
.btn_member_follow .btn_member_follow_link > .inner {
  z-index: 1;
  width: 165px;
  height: 165px;
  border-radius: 50%;
  display: block;
  margin: auto;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* line 294, app/assets/stylesheets/about.scss */
.btn_member_follow .btn_member_follow_link > .inner::after {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  transform: skewX(-25deg);
  opacity: 0;
}

@media screen and (max-width:  650px ) {
  /* line 294, app/assets/stylesheets/about.scss */
  .btn_member_follow .btn_member_follow_link > .inner::after {
    display: none;
  }
}

/* line 309, app/assets/stylesheets/about.scss */
.btn_member_follow .btn_member_follow_link > .inner:hover {
  /* ③ hover時にアニメーション開始 */
}

/* line 311, app/assets/stylesheets/about.scss */
.btn_member_follow .btn_member_follow_link > .inner:hover::after {
  opacity: 1;
  animation: shimmer .7s forwards;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 150%;
  }
}

/* モーダル */
/* line 330, app/assets/stylesheets/about.scss */
.btn_member-openBtn {
  display: inline-block;
  cursor: pointer;
}

/* line 334, app/assets/stylesheets/about.scss */
.modal-bg {
  z-index: 1001;
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* line 344, app/assets/stylesheets/about.scss */
.closeBtn {
  display: none;
  transition: all 0.1s ease-in-out;
}

/* line 347, app/assets/stylesheets/about.scss */
.closeBtn:hover {
  opacity: 0.7;
}

/* line 351, app/assets/stylesheets/about.scss */
.toggleBox {
  z-index: 1001;
  display: none;
  width: 100%;
  height: 0;
}

/* line 358, app/assets/stylesheets/about.scss */
.about-active ~ .toggleBox {
  display: block;
  width: 100%;
  height: auto;
}

/* line 363, app/assets/stylesheets/about.scss */
.about-active ~ .modal-bg {
  display: block;
}

/* line 366, app/assets/stylesheets/about.scss */
.about-active ~ .closeBtn {
  display: block;
}

/* 改行切り替え */
/* line 372, app/assets/stylesheets/about.scss */
.spOnly {
  display: none;
}

/* line 375, app/assets/stylesheets/about.scss */
.pcOnly {
  display: inherit;
}

@media screen and (max-width:  768px ) {
  /* line 380, app/assets/stylesheets/about.scss */
  .spOnly {
    display: inherit;
  }
  /* line 383, app/assets/stylesheets/about.scss */
  .pcOnly {
    display: none;
  }
}

/* 装飾 */
/* line 389, app/assets/stylesheets/about.scss */
.linear01 {
  background: linear-gradient(transparent 60%, #fff285 40%);
  padding: 0px 2px 2px;
}

/* line 393, app/assets/stylesheets/about.scss */
.border-radius-basic {
  border-radius: clamp(42px, 4vw, 48px);
}

/* line 396, app/assets/stylesheets/about.scss */
.border-radius-2clm {
  border-radius: clamp(24px, 6.5vw, 48px);
}

/* line 399, app/assets/stylesheets/about.scss */
.center {
  text-align: center;
}

/* line 402, app/assets/stylesheets/about.scss */
.align-left {
  text-align: left;
}

/* line 405, app/assets/stylesheets/about.scss */
.align-right {
  text-align: right;
}

/* --------------------------------
  apperArea btmArea
-------------------------------- */
/* line 412, app/assets/stylesheets/about.scss */
.apperArea,
.btmArea {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* line 418, app/assets/stylesheets/about.scss */
.apperArea {
  background: #f8f7f1;
}

/* line 421, app/assets/stylesheets/about.scss */
.btmArea {
  position: relative;
  background: #f8f7f1;
}

/* --------------------------------
  key
-------------------------------- */
/* line 429, app/assets/stylesheets/about.scss */
.key {
  padding: 0 0 520px;
  overflow: visible;
}

@media screen and (max-width:  980px ) {
  /* line 429, app/assets/stylesheets/about.scss */
  .key {
    padding-bottom: calc( 520px + 3.7vw);
    padding-left: calc(30 * 0.15vw);
    padding-right: calc(30 * 0.15vw);
  }
}

@media screen and (max-width:  768px ) {
  /* line 429, app/assets/stylesheets/about.scss */
  .key {
    padding-bottom: calc( 520px + 1.7vw);
  }
}

@media screen and (max-width:  445px ) {
  /* line 429, app/assets/stylesheets/about.scss */
  .key {
    padding-bottom: calc( 520px + 1.7vw);
  }
}

/* line 443, app/assets/stylesheets/about.scss */
.key::before, .key::after {
  display: none;
}

/* line 447, app/assets/stylesheets/about.scss */
.key > .inner {
  width: 100%;
  width: 880px;
  padding: 0;
  margin: 0 auto;
  position: relative;
}

/* line 455, app/assets/stylesheets/about.scss */
.key .key-txtBox .logo {
  width: clamp(150px, 5vw, 165px);
  margin: clamp(25px, 5vw, 60px) 0 0;
}

/* line 459, app/assets/stylesheets/about.scss */
.key .key-txtBox .key-title {
  max-width: clamp(315px, 5vw, 460px);
  font-size: 45px;
  padding: 0;
  margin: clamp(20px, 5vw, 40px) 0;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: left;
  display: block;
  color: #22bdb1;
}

/* line 470, app/assets/stylesheets/about.scss */
.key .key-txtBox .key-desc {
  font-size: clamp(15px, 2.5vw, 27px);
  font-weight: 500;
  line-height: 2;
}

/* line 476, app/assets/stylesheets/about.scss */
.key .key-images {
  z-index: 1;
  width: 100%;
  max-width: 754px;
  margin: 0 0 0 -85px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-1%) translateY(254px);
}

@media screen and (max-width:  980px ) {
  /* line 476, app/assets/stylesheets/about.scss */
  .key .key-images {
    width: 600px;
    top: 0;
    bottom: inherit;
    left: 64%;
    right: inherit;
    transform: translateX(0) translateY(28vw);
  }
}

@media screen and (max-width:  768px ) {
  /* line 476, app/assets/stylesheets/about.scss */
  .key .key-images {
    left: 34%;
    transform: scale(65%) translateX(6.5vw) translateY(41vw);
  }
}

@media screen and (max-width:  445px ) {
  /* line 476, app/assets/stylesheets/about.scss */
  .key .key-images {
    left: 31%;
    transform: scale(65%) translateX(20.5vw) translateY(17vw);
  }
}

/* --------------------------------
  asFor
-------------------------------- */
/* line 507, app/assets/stylesheets/about.scss */
.asFor {
  position: relative;
}

/* line 509, app/assets/stylesheets/about.scss */
.asFor::before, .asFor::after {
  background-color: #fff;
}

@media screen and (max-width:  768px ) {
  /* line 514, app/assets/stylesheets/about.scss */
  .asFor::before {
    display: none;
  }
}

/* line 518, app/assets/stylesheets/about.scss */
.asFor > .inner {
  padding: 0;
  margin: 0 auto 0;
  transform: translateY(-200px);
  position: relative;
}

@media screen and (max-width:  445px ) {
  /* line 518, app/assets/stylesheets/about.scss */
  .asFor > .inner {
    transform: translateY(-77vw);
  }
}

@media screen and (max-width:  390px ) {
  /* line 518, app/assets/stylesheets/about.scss */
  .asFor > .inner {
    padding-bottom: 50px;
  }
}

/* line 529, app/assets/stylesheets/about.scss */
.asFor > .inner::before {
  z-index: -1;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 100% 0 0;
  height: auto;
  border-radius: 50%;
  display: block;
  background-color: #22bdb1;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width:  980px ) {
  /* line 529, app/assets/stylesheets/about.scss */
  .asFor > .inner::before {
    width: 900px;
    padding: 0;
    height: auto;
    display: block;
  }
}

@media screen and (max-width:  445px ) {
  /* line 529, app/assets/stylesheets/about.scss */
  .asFor > .inner::before {
    width: 930px;
  }
}

/* line 553, app/assets/stylesheets/about.scss */
.asFor > .inner > .inner {
  width: 100%;
  max-width: 640px;
  padding: 0;
  margin: auto;
  text-align: center;
}

@media screen and (max-width:  980px ) {
  /* line 553, app/assets/stylesheets/about.scss */
  .asFor > .inner > .inner {
    padding-left: calc(30 * 0.15vw);
    padding-right: calc(30 * 0.15vw);
  }
}

/* line 565, app/assets/stylesheets/about.scss */
.asFor .key-center_image {
  width: 510px;
  height: 540px;
  position: absolute;
  bottom: 100%;
  left: 165px;
  transform: translateY(138px);
}

@media screen and (max-width:  768px ) {
  /* line 565, app/assets/stylesheets/about.scss */
  .asFor .key-center_image {
    left: 40%;
    transform: scale(65%) translateY(37%) translateX(-75%);
  }
}

@media screen and (max-width:  445px ) {
  /* line 565, app/assets/stylesheets/about.scss */
  .asFor .key-center_image {
    left: 40%;
    transform: scale(55%) translateY(62%) translateX(-75%);
  }
}

/* line 580, app/assets/stylesheets/about.scss */
.asFor .key-center_image > .inner {
  width: 100%;
  position: relative;
}

/* line 584, app/assets/stylesheets/about.scss */
.asFor .key-center_image .key-pointMaru {
  width: 150px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  line-height: 1;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  letter-spacing: 1px;
  color: #fff;
  background-color: #22bdb1;
  position: absolute;
  top: 150px;
  left: 0;
}

/* line 603, app/assets/stylesheets/about.scss */
.asFor .key-center_image .key-pointMaru img {
  padding: 1% 0 0 0.1%;
}

@media screen and (max-width:  445px ) {
  /* line 584, app/assets/stylesheets/about.scss */
  .asFor .key-center_image .key-pointMaru {
    width: 180px;
    top: calc( 150px - 7.5vw);
    left: -20px;
  }
}

/* line 613, app/assets/stylesheets/about.scss */
.asFor .key-center_image .key-pointMaru b {
  margin: 0 0 8px;
}

/* line 617, app/assets/stylesheets/about.scss */
.asFor .key-center_image .key-image {
  z-index: 1;
  max-width: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

/* line 626, app/assets/stylesheets/about.scss */
.asFor .page-about-shilchikaSearchImg {
  width: 60px;
  height: 60px;
  margin: 0 auto 0;
}

/* line 631, app/assets/stylesheets/about.scss */
.asFor .page-about-subTxt {
  display: inline-block;
  text-align: center;
  color: #fff;
}

/* line 636, app/assets/stylesheets/about.scss */
.asFor .page-about-title {
  text-align: center;
}

/* line 639, app/assets/stylesheets/about.scss */
.asFor .txt {
  font-size: clamp(16px, 3.5vw, 17px);
  line-height: 1.8;
  color: #fff;
  margin: 0 0 40px;
  text-align: left;
}

@media screen and (max-width:  390px ) {
  /* line 639, app/assets/stylesheets/about.scss */
  .asFor .txt {
    font-size: 15px;
  }
}

/* --------------------------------
  attention
-------------------------------- */
/* line 654, app/assets/stylesheets/about.scss */
.attention {
  z-index: 1;
  width: 100%;
}

@media screen and (max-width:  650px ) {
  /* line 654, app/assets/stylesheets/about.scss */
  .attention {
    padding: clamp(20px, 5vw, 60px) calc(30 * 0.15vw) 40px;
    margin-top: clamp(-65px, -9vw, -16vw);
  }
}

@media screen and (max-width:  445px ) {
  /* line 654, app/assets/stylesheets/about.scss */
  .attention {
    padding-top: 0;
    margin-top: -60vw;
  }
}

/* line 665, app/assets/stylesheets/about.scss */
.attention::before {
  display: none;
}

/* line 668, app/assets/stylesheets/about.scss */
.attention::after {
  height: 100%;
}

/* line 672, app/assets/stylesheets/about.scss */
.attention > .inner {
  max-width: 640px;
  padding: clamp(30px, 5vw, 48px);
  padding-bottom: clamp(40px, 21vw, 60px);
  margin: 0 auto;
  text-align: center;
  position: relative;
  background: #fff283;
}

@media screen and (max-width:  650px ) {
  /* line 672, app/assets/stylesheets/about.scss */
  .attention > .inner {
    padding-left: calc(30 * 0.15vw);
    padding-right: calc(30 * 0.15vw);
  }
}

/* line 685, app/assets/stylesheets/about.scss */
.attention .attentionImg {
  display: block;
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
}

/* line 692, app/assets/stylesheets/about.scss */
.attention .txt {
  margin: 0 auto;
  font-size: 15px;
  text-align: left;
  color: #555;
}

/* line 697, app/assets/stylesheets/about.scss */
.attention .txt a {
  color: #22bdb1;
}

/* --------------------------------
  howToUse
-------------------------------- */
/* line 706, app/assets/stylesheets/about.scss */
.howToUse {
  padding: 0;
  margin: -3px 0 0;
  overflow: hidden;
  background: #fff;
}

/* line 711, app/assets/stylesheets/about.scss */
.howToUse::before {
  background-color: #f8f7f1;
}

@media screen and (max-width:  650px ) {
  /* line 711, app/assets/stylesheets/about.scss */
  .howToUse::before {
    width: 1000px;
  }
}

/* line 717, app/assets/stylesheets/about.scss */
.howToUse::after {
  background-color: #f8f7f1;
}

/* line 720, app/assets/stylesheets/about.scss */
.howToUse > .inner {
  position: relative;
}

/* line 723, app/assets/stylesheets/about.scss */
.howToUse .page-about-titleWrapper {
  padding-bottom: clamp(20px, 5vw, 40px);
}

/* line 726, app/assets/stylesheets/about.scss */
.howToUse .page-about-title {
  margin: 0 0 clamp(20px, 5vw, 35px);
}

/* line 729, app/assets/stylesheets/about.scss */
.howToUse .img_member_fuki {
  width: clamp(230px, 22vw, 330px);
}

/* line 732, app/assets/stylesheets/about.scss */
.howToUse .howToUse-list {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}

/* line 737, app/assets/stylesheets/about.scss */
.howToUse .howToUse-list .howToUse-list-item {
  width: 100%;
  max-width: calc(33% - 15px);
  padding: 30px;
  margin: 0 0 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  position: relative;
  background: #fff;
}

/* line 745, app/assets/stylesheets/about.scss */
.howToUse .howToUse-list .howToUse-list-item .howToUse-itemMaru {
  width: clamp(50px, 2.5vw, 60px);
  height: clamp(50px, 2.5vw, 60px);
  line-height: clamp(50px, 2.5vw, 60px);
  font-size: 28px;
  overflow: hidden;
  border-radius: 50%;
  font-weight: bold;
  display: block;
  text-align: center;
  color: #22bdb1;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff283;
}

/* line 760, app/assets/stylesheets/about.scss */
.howToUse .howToUse-list .howToUse-list-item .howToUse-itemMaru img {
  padding-bottom: 1px;
  display: inline-block;
  margin: auto;
}

/* line 766, app/assets/stylesheets/about.scss */
.howToUse .howToUse-list .howToUse-list-item .howToUse-item-imgBox {
  width: 100%;
  max-width: 100px;
  margin: -2px auto 0;
  text-align: center;
  display: block;
}

/* line 772, app/assets/stylesheets/about.scss */
.howToUse .howToUse-list .howToUse-list-item .howToUse-item-imgBox img {
  width: 100%;
}

/* line 776, app/assets/stylesheets/about.scss */
.howToUse .howToUse-list .howToUse-list-item .howToUse-list-item-desc {
  font-size: clamp(20px, 2.5vw, 24px);
  line-height: 1.7;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: center;
}

/* line 782, app/assets/stylesheets/about.scss */
.howToUse .howToUse-list .howToUse-list-item .howToUse-list-item-desc .linear01 {
  font-weight: bold;
  text-decoration: none;
  color: #22bdb1;
}

@media screen and (max-width:  980px ) {
  /* line 732, app/assets/stylesheets/about.scss */
  .howToUse .howToUse-list {
    margin: 0 calc(30 * 0.15vw);
  }
}

@media screen and (max-width:  768px ) {
  /* line 732, app/assets/stylesheets/about.scss */
  .howToUse .howToUse-list {
    flex-direction: column;
  }
  /* line 794, app/assets/stylesheets/about.scss */
  .howToUse .howToUse-list .howToUse-list-item {
    max-width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* line 799, app/assets/stylesheets/about.scss */
  .howToUse .howToUse-list .howToUse-list-item .howToUse-itemMaru {
    position: absolute;
    top: -2px;
    left: -2px;
  }
  /* line 803, app/assets/stylesheets/about.scss */
  .howToUse .howToUse-list .howToUse-list-item .howToUse-itemMaru img {
    margin-top: -1px;
  }
  /* line 807, app/assets/stylesheets/about.scss */
  .howToUse .howToUse-list .howToUse-list-item .howToUse-item-imgBox {
    margin: 0 20px 0 40px;
  }
}

@media screen and (max-width:  768px ) and (max-width:  650px ) {
  /* line 807, app/assets/stylesheets/about.scss */
  .howToUse .howToUse-list .howToUse-list-item .howToUse-item-imgBox {
    width: 80px;
    margin: 0 clamp(13px, 2.5vw, 15px) 0 0;
  }
}

@media screen and (max-width:  768px ) {
  /* line 814, app/assets/stylesheets/about.scss */
  .howToUse .howToUse-list .howToUse-list-item .howToUse-list-item-desc {
    text-align: left;
  }
}

/* --------------------------------
  screens
-------------------------------- */
/* line 826, app/assets/stylesheets/about.scss */
.screens {
  padding-bottom: 0;
}

@media screen and (max-width:  980px ) {
  /* line 826, app/assets/stylesheets/about.scss */
  .screens {
    padding-left: calc(30 * 0.15vw);
    padding-right: calc(30 * 0.15vw);
  }
}

/* line 832, app/assets/stylesheets/about.scss */
.screens::before, .screens::after {
  display: none;
}

/* line 837, app/assets/stylesheets/about.scss */
.screens .screensCont-list .screensCont-list__item {
  width: 100%;
  max-width: 880px;
  padding: clamp(20px, 5vw, 40px) 0;
  margin: 0 auto;
  border: 3px solid #22bdb1;
  background: #fff;
}

@media screen and (max-width:  980px ) {
  /* line 837, app/assets/stylesheets/about.scss */
  .screens .screensCont-list .screensCont-list__item {
    padding-left: calc(30 * 0.15vw);
    padding-right: calc(30 * 0.15vw);
  }
}

/* line 848, app/assets/stylesheets/about.scss */
.screens .screensCont-list .screensCont-list__item .screens-item {
  width: 100%;
  max-width: 540px;
  height: 100%;
  aspect-ratio: 1 / 0.57;
  padding: 0;
  margin: 0 auto;
}

/* --------------------------------
  aboutMember
-------------------------------- */
@media screen and (max-width:  980px ) {
  /* line 863, app/assets/stylesheets/about.scss */
  .aboutMember {
    padding-left: calc(30 * 0.15vw);
    padding-right: calc(30 * 0.15vw);
  }
}

/* line 868, app/assets/stylesheets/about.scss */
.aboutMember::before, .aboutMember::after {
  background-color: #22bdb1;
}

@media screen and (max-width:  650px ) {
  /* line 872, app/assets/stylesheets/about.scss */
  .aboutMember::before {
    width: 1000px;
  }
}

/* line 877, app/assets/stylesheets/about.scss */
.aboutMember::after {
  margin-top: 10%;
  height: 90%;
}

/* line 881, app/assets/stylesheets/about.scss */
.aboutMember > .inner {
  position: relative;
}

/* line 884, app/assets/stylesheets/about.scss */
.aboutMember .page-about-titleWrapper {
  padding-bottom: clamp(20px, 5vw, 40px);
}

/* line 887, app/assets/stylesheets/about.scss */
.aboutMember .page-about-title {
  margin: 0 0 clamp(30px, 5vw, 55px);
}

/* line 890, app/assets/stylesheets/about.scss */
.aboutMember .img_howtouse_fuki {
  width: clamp(230px, 22vw, 330px);
}

/* line 893, app/assets/stylesheets/about.scss */
.aboutMember .aboutMemberCont-list {
  display: block;
}

/* line 895, app/assets/stylesheets/about.scss */
.aboutMember .aboutMemberCont-list .aboutMemberCont-list__item {
  width: 100%;
  max-width: 640px;
  padding: clamp(20px, 5vw, 40px) 15px 20px;
  margin: 0 auto 50px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  position: relative;
  background: #fff;
}

/* line 903, app/assets/stylesheets/about.scss */
.aboutMember .aboutMemberCont-list .aboutMemberCont-list__item:last-child {
  margin-bottom: 0;
}

@media screen and (max-width:  980px ) {
  /* line 895, app/assets/stylesheets/about.scss */
  .aboutMember .aboutMemberCont-list .aboutMemberCont-list__item {
    padding-left: calc(30 * 0.15vw);
    padding-right: calc(30 * 0.15vw);
  }
}

/* line 910, app/assets/stylesheets/about.scss */
.aboutMember .aboutMemberCont-list .aboutMemberCont-list__item .item__title {
  font-size: clamp(21px, 2.5vw, 29px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* line 920, app/assets/stylesheets/about.scss */
.aboutMember .aboutMemberCont-list .aboutMemberCont-list__item .imgBox {
  margin: 0 auto;
}

/* line 922, app/assets/stylesheets/about.scss */
.aboutMember .aboutMemberCont-list .aboutMemberCont-list__item .imgBox.item__icon {
  margin: 3px clamp(5px, 1.5vw, 10px) 0 0;
}

@media screen and (max-width:  650px ) {
  /* line 922, app/assets/stylesheets/about.scss */
  .aboutMember .aboutMemberCont-list .aboutMemberCont-list__item .imgBox.item__icon {
    width: 35px;
    min-width: 35px;
    height: 35px;
  }
}

/* --------------------------------
  howToSignUp
-------------------------------- */
/* line 938, app/assets/stylesheets/about.scss */
.howToSignUp {
  text-align: center;
}

/* line 940, app/assets/stylesheets/about.scss */
.howToSignUp .btn_member_modallink {
  /* .openBtn */
  display: inline-block;
  margin: 0 auto 0;
}

@media screen and (max-width:  650px ) {
  /* line 940, app/assets/stylesheets/about.scss */
  .howToSignUp .btn_member_modallink {
    transform: scale(0.94);
    margin: 0 auto 15px;
  }
}

/* line 948, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox {
  width: 100%;
  max-width: 800px;
  height: 88vh;
  max-height: 730px;
  padding: 0 clamp(20px, 5vw, 54px) clamp(0px, 1.5vw, 30px);
  overflow-y: scroll;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}

@media screen and (max-width:  768px ) {
  /* line 948, app/assets/stylesheets/about.scss */
  .howToSignUp .howToSignUp__modalBox {
    height: 86vh;
    min-height: 420px;
    max-height: inherit;
  }
}

/* line 966, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox > .inner {
  width: 100%;
  height: 100%;
  border-radius: 50px;
}

@media screen and (max-width:  650px ) {
  /* line 966, app/assets/stylesheets/about.scss */
  .howToSignUp .howToSignUp__modalBox > .inner {
    height: auto;
  }
}

/* line 974, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .closeBtn {
  cursor: pointer;
  width: 65px;
  aspect-ratio: 1 / 1;
  display: block;
  position: absolute;
  top: 30px;
  right: 30px;
}

@media screen and (max-width:  650px ) {
  /* line 974, app/assets/stylesheets/about.scss */
  .howToSignUp .howToSignUp__modalBox .closeBtn {
    width: 40px;
    height: 40px;
    top: 10px;
    right: 10px;
  }
}

/* line 989, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .page-about-titleWrapper {
  padding: clamp(10px, 5vw, 20px) 0;
  margin: 0 auto;
  transform: scale(0.8);
}

@media screen and (max-width:  650px ) {
  /* line 989, app/assets/stylesheets/about.scss */
  .howToSignUp .howToSignUp__modalBox .page-about-titleWrapper {
    padding: 0 0 10px;
  }
}

/* line 996, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .page-about-titleWrapper .page-about-subTxt {
  margin: 0 auto 0;
}

@media screen and (max-width:  650px ) {
  /* line 996, app/assets/stylesheets/about.scss */
  .howToSignUp .howToSignUp__modalBox .page-about-titleWrapper .page-about-subTxt {
    transform: scale(0.5);
  }
}

/* line 1003, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list {
  max-width: 550px;
  margin: 0 auto;
  padding-bottom: clamp(60px, 3.5vw, 80px);
  position: relative;
}

@media screen and (max-width:  650px ) {
  /* line 1003, app/assets/stylesheets/about.scss */
  .howToSignUp .howToSignUp__modalBox .howToSignUp-list {
    width: 300px;
  }
}

/* line 1011, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-list__item {
  text-align: center;
  margin: 0 clamp(20px, 5vw, 40px);
}

/* line 1014, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-list__item img {
  width: 100%;
  margin: 0 auto;
}

/* line 1018, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-list__item.item05 {
  display: none;
}

@media screen and (max-width:  768px ) {
  /* line 1018, app/assets/stylesheets/about.scss */
  .howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-list__item.item05 {
    display: inherit;
  }
}

/* line 1025, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-modal-arrowLeft,
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-modal-arrowRight {
  z-index: 1;
  width: 60px;
  height: 60px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.1s ease-in-out;
}

/* line 1035, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-modal-arrowLeft:hover,
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-modal-arrowRight:hover {
  opacity: 0.7;
}

@media screen and (max-width:  650px ) {
  /* line 1025, app/assets/stylesheets/about.scss */
  .howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-modal-arrowLeft,
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-modal-arrowRight {
    width: 40px;
    height: 40px;
    top: 46%;
  }
}

/* line 1044, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-modal-arrowLeft {
  left: -30px;
}

@media screen and (max-width:  650px ) {
  /* line 1044, app/assets/stylesheets/about.scss */
  .howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-modal-arrowLeft {
    left: 0;
  }
}

/* line 1050, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-modal-arrowRight {
  right: -30px;
}

@media screen and (max-width:  650px ) {
  /* line 1050, app/assets/stylesheets/about.scss */
  .howToSignUp .howToSignUp__modalBox .howToSignUp-list .howToSignUp-modal-arrowRight {
    right: 0;
  }
}

/* line 1056, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .slick-dots {
  bottom: 25px;
}

/* line 1059, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .slick-dots li button {
  text-align: center;
}

/* line 1061, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .slick-dots li button::before, .howToSignUp .howToSignUp__modalBox .howToSignUp-list .slick-dots li button::after {
  opacity: 1;
  width: 13px;
  height: 13px;
  line-height: 13px;
  content: '';
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

/* line 1073, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .slick-dots li button::before {
  background: #22bdb1;
}

/* line 1076, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .slick-dots li button::after {
  transform: scale(0.5);
  background: #fff;
}

/* line 1083, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .howToSignUp-list .slick-dots li.slick-active button::after {
  background: #22bdb1;
}

/* line 1091, app/assets/stylesheets/about.scss */
.howToSignUp .howToSignUp__modalBox .btn_member .btn_member_link {
  margin-top: 0;
  margin-bottom: 0;
}

/* line 1097, app/assets/stylesheets/about.scss */
.howToSignUp .about-active ~ .toggleBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* --------------------------------
  aboutColumn
-------------------------------- */
/* line 1109, app/assets/stylesheets/about.scss */
.aboutColumn {
  background-color: #22bdb1;
}

/* line 1111, app/assets/stylesheets/about.scss */
.aboutColumn::before, .aboutColumn::after {
  background-color: #f8f7f1;
}

@media screen and (max-width:  650px ) {
  /* line 1115, app/assets/stylesheets/about.scss */
  .aboutColumn::before {
    width: 1000px;
  }
}

/* line 1120, app/assets/stylesheets/about.scss */
.aboutColumn > .inner {
  position: relative;
}

/* line 1123, app/assets/stylesheets/about.scss */
.aboutColumn .miniTxt {
  margin: -10px auto clamp(calc(30 * 0.15vw), 2.5vw, 30px);
  font-size: clamp(17px, 1.5vw, 19px);
  text-align: center;
  font-weight: bold;
}

/* line 1129, app/assets/stylesheets/about.scss */
.aboutColumn .aboutColumn-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

@media screen and (max-width:  980px ) {
  /* line 1129, app/assets/stylesheets/about.scss */
  .aboutColumn .aboutColumn-list {
    padding-left: calc(30 * 0.15vw);
    padding-right: calc(30 * 0.15vw);
  }
}

/* line 1140, app/assets/stylesheets/about.scss */
.aboutColumn .aboutColumn-list .aboutColumn-list__item {
  width: 100%;
  max-width: calc(33% - 15px);
  padding: clamp(8px, 2.5vw, 30px);
  padding-bottom: clamp(20px, 2.5vw, 30px);
  margin: 0 0 clamp(15px, 2.5vw, 30px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  position: relative;
  background: #fff;
}

@media screen and (max-width:  768px ) {
  /* line 1140, app/assets/stylesheets/about.scss */
  .aboutColumn .aboutColumn-list .aboutColumn-list__item {
    width: 48%;
    max-width: 640px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
}

/* line 1156, app/assets/stylesheets/about.scss */
.aboutColumn .aboutColumn-list .aboutColumn-list__item .item__imgBox {
  overflow: hidden;
  border-radius: 15px;
  margin: 0 auto;
}

/* line 1161, app/assets/stylesheets/about.scss */
.aboutColumn .aboutColumn-list .aboutColumn-list__item .item__cat {
  padding: 3px;
  margin: clamp(5px, 0.5vw, 8px) 0;
  display: inline-block;
  border-radius: 3px;
  white-space: nowrap;
  font-size: clamp(11px, 2.5vw, 13px);
  color: #fff;
}

/* line 1169, app/assets/stylesheets/about.scss */
.aboutColumn .aboutColumn-list .aboutColumn-list__item .item__cat.color01 {
  background: #15b1f2;
}

/* line 1172, app/assets/stylesheets/about.scss */
.aboutColumn .aboutColumn-list .aboutColumn-list__item .item__cat.color02 {
  background: #fe8abb;
}

/* line 1175, app/assets/stylesheets/about.scss */
.aboutColumn .aboutColumn-list .aboutColumn-list__item .item__cat.color03 {
  background: #fea086;
}

/* line 1178, app/assets/stylesheets/about.scss */
.aboutColumn .aboutColumn-list .aboutColumn-list__item .item__cat.color04 {
  background: #c08ee0;
}

/* line 1181, app/assets/stylesheets/about.scss */
.aboutColumn .aboutColumn-list .aboutColumn-list__item .item__cat.color05 {
  background: #2d76d9;
}

/* line 1184, app/assets/stylesheets/about.scss */
.aboutColumn .aboutColumn-list .aboutColumn-list__item .item__cat.color06 {
  background: #9c7b65;
}

/* --------------------------------
  socialMedia
-------------------------------- */
@media screen and (max-width:  980px ) {
  /* line 1197, app/assets/stylesheets/about.scss */
  .socialMedia {
    padding-left: calc(30 * 0.15vw);
    padding-right: calc(30 * 0.15vw);
  }
}

/* line 1202, app/assets/stylesheets/about.scss */
.socialMedia::before, .socialMedia::after {
  background: #22bdb1;
}

@media screen and (max-width:  650px ) {
  /* line 1206, app/assets/stylesheets/about.scss */
  .socialMedia::before {
    width: 1000px;
  }
}

/* line 1211, app/assets/stylesheets/about.scss */
.socialMedia::after {
  height: 90%;
  margin: 10% 0 0;
}

/* line 1215, app/assets/stylesheets/about.scss */
.socialMedia > .inner {
  position: relative;
}

/* line 1218, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list {
  padding-top: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

@media screen and (max-width:  768px ) {
  /* line 1218, app/assets/stylesheets/about.scss */
  .socialMedia .socialMedia-list {
    flex-direction: column;
  }
}

/* line 1227, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list .socialMedia-list__item {
  width: 50%;
  max-width: calc(50% - 30px);
  margin: 0 auto clamp(30px, 3vw, 60px);
  display: flex;
  align-items: stretch;
  flex-direction: column;
  flex-grow: 1;
  white-space: nowrap;
}

@media screen and (max-width:  768px ) {
  /* line 1227, app/assets/stylesheets/about.scss */
  .socialMedia .socialMedia-list .socialMedia-list__item {
    width: 100%;
    max-width: 640px;
  }
}

/* line 1240, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list .socialMedia-list__item > .inner {
  display: block;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  flex-grow: 1;
}

/* line 1246, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list .socialMedia-list__item > .inner:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* line 1251, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list .socialMedia-list__item .c {
  padding-top: clamp(50px, 2.5vw, 73px);
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 30px;
  margin: clamp(30px, 2.5vw, 43px) 0 0;
  position: relative;
  text-align: center;
  border: 3px solid #fff;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  flex-grow: 1;
}

/* line 1265, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list .socialMedia-list__item .item__icon {
  width: 86px;
  height: 86px;
  line-height: 86px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
}

/* line 1279, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list .socialMedia-list__item .item__icon img {
  width: 70%;
}

@media screen and (max-width:  768px ) {
  /* line 1265, app/assets/stylesheets/about.scss */
  .socialMedia .socialMedia-list .socialMedia-list__item .item__icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    top: -40px;
  }
}

/* line 1289, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list .socialMedia-list__item .imgBox {
  margin: 0 auto;
}

/* line 1292, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list .socialMedia-list__item .item__title {
  margin: 0 auto 20px;
  color: #fff;
  font-size: clamp(27px, 2.5vw, 32px);
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.08em;
}

/* line 1300, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list .socialMedia-list__item .txt01 {
  padding: 2px 4px;
  margin: 0 auto 13px;
  font-size: clamp(17px, 2.5vw, 19px);
  line-height: 1.3;
  letter-spacing: 0;
  color: #22bdb1;
  border-radius: 4px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  text-align: center;
  background: #fff283;
}

@media screen and (max-width:  768px ) {
  /* line 1300, app/assets/stylesheets/about.scss */
  .socialMedia .socialMedia-list .socialMedia-list__item .txt01 {
    padding: 2px 5px;
    letter-spacing: -0.01em;
  }
}

/* line 1318, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list .socialMedia-list__item .txt02 {
  margin: 0 auto 35px;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.09em;
}

@media screen and (max-width:  768px ) {
  /* line 1318, app/assets/stylesheets/about.scss */
  .socialMedia .socialMedia-list .socialMedia-list__item .txt02 {
    letter-spacing: 0;
  }
}

@media screen and (max-width:  768px ) {
  /* line 1328, app/assets/stylesheets/about.scss */
  .socialMedia .socialMedia-list .socialMedia-list__item .item__imgBox {
    padding: 0 calc(30 * 0.15vw);
  }
}

/* line 1335, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list .socialMedia-list__item.item-Instagram:nth-child(1) .item__title {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width:  768px ) {
  /* line 1335, app/assets/stylesheets/about.scss */
  .socialMedia .socialMedia-list .socialMedia-list__item.item-Instagram:nth-child(1) .item__title {
    margin-top: -1.5%;
  }
}

/* line 1348, app/assets/stylesheets/about.scss */
.socialMedia .socialMedia-list .socialMedia-list__item.item-Instagram:nth-child(2) .item__title {
  display: none;
}

/* --------------------------------
  silchikaSns
-------------------------------- */
/* line 1360, app/assets/stylesheets/about.scss */
.silchikaSns {
  background: #22bdb1;
}

@media screen and (max-width:  980px ) {
  /* line 1360, app/assets/stylesheets/about.scss */
  .silchikaSns {
    padding-left: calc(30 * 0.15vw);
    padding-right: calc(30 * 0.15vw);
  }
}

/* line 1367, app/assets/stylesheets/about.scss */
.silchikaSns::before, .silchikaSns::after {
  background-color: #fff283;
}

@media screen and (max-width:  650px ) {
  /* line 1371, app/assets/stylesheets/about.scss */
  .silchikaSns::before {
    width: 1000px;
  }
}

/* line 1376, app/assets/stylesheets/about.scss */
.silchikaSns::after {
  height: 60%;
  margin: 40% 0 0;
}

@media screen and (max-width:  768px ) {
  /* line 1376, app/assets/stylesheets/about.scss */
  .silchikaSns::after {
    height: 50%;
    margin: 50% 0 0;
  }
}

/* line 1384, app/assets/stylesheets/about.scss */
.silchikaSns > .inner {
  position: relative;
}

/* line 1387, app/assets/stylesheets/about.scss */
.silchikaSns .page-about-titleWrapper {
  padding-bottom: clamp(20px, 2.5vw, 35px);
}

/* line 1390, app/assets/stylesheets/about.scss */
.silchikaSns .miniTxt {
  margin: 0 auto clamp(20px, 5vw, 40px);
  font-size: clamp(18px, 2.5vw, 22px);
  line-height: 2;
  font-weight: 500;
  text-align: center;
}

/* line 1397, app/assets/stylesheets/about.scss */
.silchikaSns .silchikaSns-list {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width:  768px ) {
  /* line 1397, app/assets/stylesheets/about.scss */
  .silchikaSns .silchikaSns-list {
    flex-wrap: wrap;
  }
}

/* line 1405, app/assets/stylesheets/about.scss */
.silchikaSns .silchikaSns-list .silchikaSns-list__item {
  width: 100%;
  max-width: 100px;
  margin: 0 15px;
  text-align: center;
}

@media screen and (max-width:  768px ) {
  /* line 1405, app/assets/stylesheets/about.scss */
  .silchikaSns .silchikaSns-list .silchikaSns-list__item {
    min-height: 16%;
    max-width: 16%;
    margin: 0 auto;
  }
}

/* line 1415, app/assets/stylesheets/about.scss */
.silchikaSns .silchikaSns-list .silchikaSns-list__item > .inner {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 0 clamp(20px, 5vw, 30px);
}

/* line 1422, app/assets/stylesheets/about.scss */
.silchikaSns .silchikaSns-list .silchikaSns-list__item > .inner:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* line 1426, app/assets/stylesheets/about.scss */
.silchikaSns .silchikaSns-list .silchikaSns-list__item > .inner .item__imgBox {
  width: clamp(50px, 5vw, 100px);
  height: clamp(50px, 5vw, 100px);
  line-height: clamp(50px, 5vw, 100px);
  font-size: 28px;
  border-radius: 50%;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: #fff;
}

/* line 1439, app/assets/stylesheets/about.scss */
.silchikaSns .silchikaSns-list .silchikaSns-list__item > .inner .item__imgBox img {
  width: 70%;
  margin: 0 auto;
}

/* line 1444, app/assets/stylesheets/about.scss */
.silchikaSns .silchikaSns-list .silchikaSns-list__item > .inner .txt {
  margin: 8px 0;
  font-size: clamp(10px, 2.5vw, 20px);
  font-weight: bold;
  white-space: nowrap;
  color: #555;
}

@media screen and (max-width:  650px ) {
  /* line 1444, app/assets/stylesheets/about.scss */
  .silchikaSns .silchikaSns-list .silchikaSns-list__item > .inner .txt {
    letter-spacing: 0;
  }
}

/* --------------------------------
  important
-------------------------------- */
/* line 1462, app/assets/stylesheets/about.scss */
.important {
  padding-bottom: 80px;
}

@media screen and (max-width:  980px ) {
  /* line 1462, app/assets/stylesheets/about.scss */
  .important {
    padding-left: calc(30 * 0.15vw);
    padding-right: calc(30 * 0.15vw);
  }
}

/* line 1468, app/assets/stylesheets/about.scss */
.important::before, .important::after {
  background-color: #f8f7f1;
}

@media screen and (max-width:  650px ) {
  /* line 1472, app/assets/stylesheets/about.scss */
  .important::before {
    width: 1000px;
  }
}

/* line 1477, app/assets/stylesheets/about.scss */
.important p {
  margin: 0 0 13px;
}

/* line 1479, app/assets/stylesheets/about.scss */
.important p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width:  650px ) {
  /* line 1477, app/assets/stylesheets/about.scss */
  .important p {
    margin: 0 0 calc(30 * 0.15vw);
  }
}

/* line 1486, app/assets/stylesheets/about.scss */
.important > .inner {
  position: relative;
}

/* line 1489, app/assets/stylesheets/about.scss */
.important .important__contBox {
  padding: 30px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
  background: #fff;
}