@charset "utf-8";

/* SP：style_sp.css
 * ************************************************** */

/* Overwrite
-------------------------------- */

#layout .common-header,
#layout .sp-gnav-wrap,
#layout .common-footer {
  position: relative;
  z-index: 3;
}

/* Common
-------------------------------- */

#content {
  position: relative;
  z-index: 2;
}

/* container */
#content .container {
  background-color: rgba(255, 255, 255, .8);
  padding: 10% 4.6%;
}

#voice .container {
  background-color: rgba(255, 255, 255, 1);
  padding: 10% 4.6%;
}

/* bg */
#content .bg {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  height: -webkit-calc(100% - 10px);
  height: calc(100% - 10px);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 100%;
  z-index: -1;
}

#content .show .bg {
  opacity: 1;
}

#content #sec02 .bg {
  background-image: url(../../images/senior/bg_sec02_sp.jpg);
}

#content #sec03 .bg {
  background-image: url(../../images/senior/bg_sec03_sp.jpg);
}

#content #voice .bg {
  background-image: url(../../images/senior/bg_voice_sp.jpg);
}

/* headline */
#content h2 {
  display: table;
  font-size: 18px;
  font-size: 5.6vw;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin: 0 auto 8%;
  padding: 0 0 0.6em;
  position: relative;
  text-align: center;
}

#content h2:after {
  border-bottom: 1px solid #000000;
  content: '';
  display: inline-block;
  height: 1px;
  padding: 0 1em;
  position: absolute;
  bottom: 0;
  left: -1em;
  width: 100%;
}

/* arrow */
#content .arrow {
  margin-top: 10%;
  padding: 15% 0 0 0;
  position: relative;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 40px;
}

#content .arrow:after {
  border-right: 1px solid #231815;
  border-bottom: 1px solid #231815;
  content: '';
  display: inline-block;
  height: 20px;
  margin-left: 10px;
  position: absolute;
  top: 0;
  left: 0;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 20px;
}

/* Main Visual
-------------------------------- */

#content .mainvisual .container {
  backgrounrd-color: #ffffff;
  padding: 0;
  position: relative;
}

#content .mainvisual .container:after {
  background-color: #eef3f8;
  content: '';
  display: block;
  height: 0;
  padding-top: 134%;
  position: absolute;
  top: 4%;
  left: 0;
  width: 100%;
}

#content .mainvisual .container>img {
  position: relative;
  z-index: 1;
}

#content .mainvisual .container>img:first-child {
  margin-left: 34%;
  margin-top: -7%;
}

#content .mainvisual .container>img:nth-child(2) {
  margin-top: 62%;
  width: 60%;
}

#content .mainvisual h1 {
  position: absolute;
  top: 2.18%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 82%;
  z-index: 99999;
}

/* Section 01
-------------------------------- */

#content #sec01 ul li+li {
  margin-top: 5%;
}

#content #sec01 ul li dl {
  display: table;
  width: 100%;
}

#content #sec01 ul li dl dt,
#content #sec01 ul li dl dd {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
}

#content #sec01 ul li dl dt {
  background-color: #bfd3e5;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 13px;
  font-size: 4.06vw;
  letter-spacing: 0.2em;
  line-height: 1.7;
  text-align: center;
  width: 60%;
}

#content #sec01 ul li:nth-child(2) dl dt {
  background-color: #eef3f8;
}

#content #sec01 ul li dl dd {
  width: 40%;
}

/* Section 02
-------------------------------- */

/* paragraph */
#content #sec02 h2+p {
  font-size: 13px;
  font-size: 4.06vw;
  letter-spacing: 0.1em;
  line-height: 1.9;
  text-align: center;
}

/* chart */
#content #sec02 .chart {
  margin: 8% 0 15%;
}

#content #sec02 .chart>img {
  display: block;
  margin: 0 auto;
  width: 40%;
}

.graph-w {
  margin-top: 10%;
  width: 90%;
  max-width: 350px;
  position: relative;
}

.graph-w .graph-layers .layer {
  position: absolute;
  top: 11%;
  left: 18%;
  right: 6%;
  bottom: 37%;
}

.graph-w .graph-layers .layer svg path {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 3px;
  stroke-dasharray: 350px;
  stroke-dashoffset: 0;

  animation: graphLine 2s linear infinite;
}

.graph-w .graph-layers .layer:nth-child(1) {
  z-index: 4;
}

.graph-w .graph-layers .layer:nth-child(1) svg path {
  stroke: #f19720;
}

.graph-w .graph-layers .layer:nth-child(2) {
  z-index: 3;
}

.graph-w .graph-layers .layer:nth-child(2) svg path {
  stroke: #099146;
}

.graph-w .graph-layers .layer:nth-child(3) {
  z-index: 2;
}

.graph-w .graph-layers .layer:nth-child(3) svg path {
  stroke: #c32127;
}

.graph-w .graph-layers .layer:nth-child(4) {
  z-index: 1;
}

.graph-w .graph-layers .layer:nth-child(4) svg path {
  stroke: #086fb8;
}

@keyframes graphLine {
  0% {
    stroke-dashoffset: 350;
  }

  30% {
    stroke-dashoffset: 280;
  }

  70% {
    stroke-dashoffset: 0;
  }
}

/* strength */
#content #sec02 .item .text {
  padding: 8% 5%;
}

#content #sec02 .item:last-child .text {
  padding-bottom: 0;
}

#content #sec02 .item .text h3 {
  color: #90b3d2;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 22px;
  font-size: 6.87vw;
  letter-spacing: 0.3em;
}

#content #sec02 .item .text p {
  font-size: 3.75vw;
  letter-spacing: 0.05em;
  line-height: 1.9;
  margin: 4% 0 0 0;
}

/* Section 03
-------------------------------- */

/* item */
#content #sec03 .item+.item {
  margin-top: 15%;
}

/* trouble */
#content #sec03 .trouble {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 8% 5%;
  position: relative;
}

#content #sec03 .item:first-child .trouble {
  background-image: url(../../images/senior/img_trouble_01.jpg);
}

#content #sec03 .item:nth-child(2) .trouble {
  background-image: url(../../images/senior/img_trouble_02.jpg);
}

#content #sec03 .item:nth-child(3) .trouble {
  background-image: url(../../images/senior/img_trouble_03.jpg);
}

#content #sec03 .item:nth-child(4) .trouble {
  background-image: url(../../images/senior/img_trouble_04.jpg);
}

#content #sec03 .trouble:after {
  background-color: rgba(144, 179, 210, 0.8);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#content #sec03 .trouble ul {
  position: relative;
  z-index: 1;
}

#content #sec03 .trouble ul li {
  border: 1px solid #ffffff;
  border-radius: 5px;
  color: #ffffff;
  font-size: 13px;
  font-size: 4.06vw;
  letter-spacing: 0.05em;
  line-height: 1.4;
  padding: 0.9em 1em 0.84em;
  text-align: center;
}

#content #sec03 .trouble ul li+li {
  margin-top: 5%;
}

/* open */
#content #sec03 .open {
  margin: 16px auto 0;
  position: relative;
  text-align: center;
  width: 90.8%;
}

#content #sec03 .open:before {
  border-right: 31px solid transparent;
  border-top: 26px solid #f1b526;
  border-left: 31px solid transparent;
  content: '';
  display: block;
  margin-left: -15px;
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
  z-index: 10;
}

#content #sec03 .open a {
  background-color: #f7dB97;
  border: 1px solid #f7dB97;
  border-radius: 5px;
  color: #231815;
  display: block;
  padding: 1.1em 1em;
  width: 100%;
}

/* #content #sec03 .open a:after {
	border-bottom: 2px solid #231815;
	border-right: 2px solid #231815;
	content: '';
	display: inline-block;
	height: 1em;
	margin-left: 0.2em;
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	vertical-align: -0.15em;
	width: 1em;
} */
#content #sec03 .open a:hover {
  background-color: #ffffff;
}

/* PRENAVI
-------------------------------- */

#content #prenavi {
  background: #000000;
  color: #ffffff;
  padding: 10% 0;
}

#content #prenavi h2 {
  font-size: 16px;
  font-size: 5vw;
  letter-spacing: 0.2em;
  line-height: 1.5;
}

#content #prenavi .container {
  background: none;
  margin: 5% 0 0 0;
  padding: 0;
}

#content #prenavi .image {
  background: url(../../images/senior/img_prenavi.jpg) no-repeat center center;
  background-size: cover;
  height: 200px;
  width: 100%;
}

#content #prenavi .text {
  border: 1px solid #ffffff;
  margin: -5% auto 0;
  padding: 12% 6% 6%;
  position: relative;
  width: 90%;
  z-index: 1;
}

#content #prenavi .text p {
  display: table;
  font-size: 3.75vw;
  letter-spacing: 0.05em;
  line-height: 1.78;
  margin: 2.5em auto 0;
}

#content #prenavi .text .button {
  margin: 5% auto 0;
  width: 100%;
}

#content #prenavi .text .button a {
  background-color: #ffffff;
  display: block;
  font-weight: bold;
  height: 44px;
  line-height: 44px;
  text-align: center;
}

/* User's Voice
-------------------------------- */

#content #voice {
  background-image: url(../../images/senior/bg_voice_sp.jpg);
}

#content #voice .container h2 span {
  border: 1px solid #000000;
  display: block;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  width: 220px;
}

#content #voice h2:after {
  content: none;
}

#content #voice h2 img {
  width: 120px;
}

#content #voice .container ul li {
  display: table;
  font-size: 13px;
  font-size: 4.06vw;
  letter-spacing: 0.03em;
  line-height: 1.6;
  margin: 64px 0 0 0;
  position: relative;
}

#content #voice .container ul li:before {
  background: url(../../images/senior/icon_balloon.png) no-repeat;
  background-size: 100%;
  content: '';
  display: block;
  height: 42px;
  position: absolute;
  top: -40px;
  left: 0;
  width: 46px;
}

#content #voice .container ul li:first-child {
  margin-top: 44px;
}

#content #voice .container ul li p {
  border-bottom: 1px solid #000000;
  padding: 0 0 4% 0;
}

#content #voice .container ul li br {
  display: none;
}

#content #voice .container ul li .open {
  margin: 5% 0 0 0;
}

#content #voice .container ul li .open a {
  border: 1px solid #90b3d2;
  color: #000000;
  display: block;
  font-size: 3.75vw;
  font-weight: bold;
  height: 40px;
  line-height: 38px;
  text-align: center;
  width: 100%;
}

#content #voice .container ul li .open a:hover {
  background-color: #90b3d2;
  color: #ffffff;
}

/* popup
-------------------------------- */

#content #sec03 .popup,
#content #voice .popup {
  display: none;
}

/* method */
.mfp-container {
  color: #231815;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
  font-feature-settings: "palt";
  font-size: 3.75vw;
  letter-spacing: 0;
  line-height: 1;
}

.modaal-content-container {
  padding: 8% 5%;
}

.white-popup {
  background: #ffffff;
  position: relative;
  margin: 20px auto;
  padding: 12% 5% 8%;
  width: auto;
  max-width: 100%;
}

.mfp-content .method+.method {
  margin-top: 12%;
}

.mfp-content h3 {
  color: #90b3d2;
  font-size: 16px;
  font-size: 4vw;
  font-weight: bold;
  height: auto !important;
  line-height: 1.3;
  margin: 0 0 0.5em 0;
}

.mfp-content h3 span {
  display: inline-block;
  font-size: 0.6em;
  margin: 6px 0 0 0;
  text-align: right;
}

.mfp-content p {
  font-size: 3.75vw;
  line-height: 1.7;
  margin: 1em 0 0 0;
}

.mfp-content .button {
  margin: 5% auto 0;
  width: 100%;
}

.mfp-content .button a {
  border: 1px solid #90b3d2;
  color: #000000;
  display: block;
  font-size: 3.75vw;
  font-weight: bold;
  height: 40px;
  line-height: 38px;
  text-align: center;
  width: 100%;
}

.mfp-content .button a:hover {
  background-color: #90b3d2;
  color: #ffffff;
}

/* shop list
-------------------------------- */

.shop_list_info {
  background: #ffffff;
  padding: 4%;
  text-align: center;
}

.shop_list_info p {
  font-size: 12px;
  line-height: 1.5;
}

.adult_schoolList .tabContent .list ul li {
  width: auto;
}


/* 220621_add_web-entry-btn */
div.form_title {
  padding: 20px 0 40px;
  text-align: center;
}

div.form_title p.title {
  font-size: 35px;
  font-weight: bold;
  color: #000;
  margin: 0 auto;
}

div.form_title p.text {
  font-size: 13px;
  line-height: 1.3;
  color: #000;
  margin: 0 auto;
  padding: 0 10px;
}

div.form_title a {
  margin: 10px 0 20px;
}


.support {
  background-color: #fff;
  padding: 50px 0 0;
  position: relative;
}

.support_contents {
  margin: 0 auto;
  max-width: 1200px;
}

.support .support_box {
  background-color: #e5ecf2;
  border: 1px solid #000;
  font-weight: bold;
  padding: 56px 0;
}

.support .title {
  font-size: 26px;
  margin: 0 0 50px;
  text-align: center;
}

.support .title span {
  border-bottom: 1px solid #000;
}

.support .textWrap {
  margin: 0 auto;
  width: 80%;
}

.support .text {
  font-size: 15px;
  line-height: 33px;
  text-align: justify;
  width: 74%;
}

.support .support_img {
  position: absolute;
  right: -6%;
  bottom: 2%;
  max-width: 316px;
  width: 100%;
}

.recommend {
  background-color: #fff;
}

.recommend_head {
  margin: 0 auto;
  max-width: 1200px;
}

.recommend_bottom {
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
}

.recommend .recommend_btn {
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  left: 0;
}

.recommend .recommend_btn a {
  background-color: #000;
  color: #fff;
  display: block;
  font-size: 14px;
  margin: 0 auto;
  max-width: 60%;
  padding: 14px 0;
  text-decoration: none;
}

.space {
  background-color: #fff;
  padding: 50px 0;
}

.space .space_title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 30px;
  text-align: center;
}

.space .space_text {
  font-size: 14px;
  line-height: 23px;
  margin: 0 auto;
  text-align: center;
  width: 93%;
}

.section_contents {
  background-color: rgba(255, 255, 255, .8);
  position: relative;
  margin: -50% auto 0;
  padding: 50px 0 100px;
  width: 94%;
}

.gymarea {
  background-color: #fff;
}

.gymarea_title {
  margin: 0 auto;
  max-width: 44%;
  padding: 0 0 20px;
  width: 100%;
}

.gymarea_items {
  margin: 0 auto 20px;
  width: 80%;
}

.gymarea_item {
  display: flex;
  flex-direction: column;
  margin: 0 0 40px;
  width: 100%;
}

.gymarea_items>div:last-of-type {
  margin: 0;
}

.gymarea_img {
  margin: 0 0 10px;
}

.gymarea_head {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px;
}

.gymarea_text {
  font-size: 14px;
  line-height: 22px;
  text-align: justify;
  letter-spacing: -1px;
}

.gymarea_caption {
  font-size: 14px;
  text-align: center;
}

.relaxation {
  background-color: #fff;
}

.relaxation_title {
  margin: 0 auto;
  max-width: 60%;
  padding: 0 0 20px;
  width: 100%;
}

.maintenance {
  background-color: #fff;
}

.maintenance_title {
  margin: 0 auto;
  max-width: 88%;
  padding: 0 0 20px;
  width: 100%;
}

.maintenance_machine {
  margin: 0 auto;
  width: 100%;
}

.maintenance_head {
  margin: 0 auto 10px;
  max-width: 90%;
}

.maintenance_text {
  font-size: 14px;
  line-height: 23px;
  margin: 0 0 25px;
  text-align: center;
}

.maintenance_img {
  margin: 0 0 80px -12px;
  width: 98vw;
}

.maintenance_machine_head {
  margin: 0 auto 30px;
  max-width: 60%;
  width: 100%;
}

.maintenance_machine_img {
  margin: 0 auto 30px;
  width: 100%;
}

.maintenance .section_contents {
  padding: 50px 0;
}

.webentry {
  background-color: #fff;
  padding: 0 0 30px;
}

.webentry_contents {
  margin: 0 auto;
  max-width: 90%;
}

.webentry_img {
  margin: 0 auto;
  width: 100%;
}

.form_title {
  max-width: 100%;
  width: 100%;
}

.form_title a.oBtnCta {
  width: 100%;
}

.show_pc {
  display: none;
}

.show_sp {
  display: block;
}


#header {
  position: relative;
  z-index: 99999;
}

.common-footer {
  z-index: 99999;
  position: relative;
}