/* about.css */

/* index */
#about-index {
  text-align: center;
}
#about-index img[src$=".svg"] {
  display: block;
  width: 100%;
}
.about-index-heading {
  text-align: center;
}
.about-index-heading .ttl {
  font-weight: 700;
}
.about-index-bnrs {
  width: 92%;
  max-width: 960px;
  margin: 0 auto;
}
.about-index-bnrs .bnr {
  position: relative;
  display: block;
  background-color: #eff0f0;
  overflow: hidden;
}
.about-index-bnrs .reason-number {
  position: relative;
}
.about-index-bnrs .reason-number .ico {
  position: absolute;
  top: 0;
}
.about-index-bnrs .reason-number .ico img {
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  max-width: none;
  height: 100%;
}
.about-index-bnrs .reason-ttl {
  padding-bottom: .2em;
  margin-bottom: .2em;
  font-weight: 900;
  line-height: 1.17;
  border-bottom: 4px solid #ef3340;
}
.about-index-bnrs .reason-ttl-sub {
  margin-bottom: .5em;
  font-weight: 700;
  line-height: 1.37;
}
.about-index-bnrs .reason-text {
  line-height: 1.75;
}
.about-index-bnrs .reason-text-note {
  margin: .5em 0;
  line-height: 1.3;
  text-indent: -1em;
  text-align: left;
  padding-left: 1em;
}
.about-index-bnrs .reason-more > span {
  display: inline-block;
  width: 14em;
  font-weight: 700;
  text-align: center;
  line-height: 1.7;
  background : linear-gradient(90deg, rgba(5, 173, 202, 1) 0%, rgba(5, 176, 202, 1) 36.19%, rgba(5, 184, 202, 1) 59.44%, rgba(5, 199, 202, 1) 79.05%, rgba(5, 220, 202, 1) 96.53%, rgba(5, 225, 202, 1) 100%);
  border-radius : 5em;
  color: #fff;
}
/** pc and tablet **/
@media print,screen and (min-width: 701px) {
  #about-index {
    padding-bottom: 125px;
  }
  .about-index-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
  }
  .about-index-heading .ttl {
    font-size: 30px;
    margin-right: .5em;
  }
  .about-index-heading .membership {
    width: 306px;
  }
  .about-index-bnrs .item + .item {
    margin-top: 30px;
  }
  .about-index-bnrs .bnr {
    display: flex;
    justify-content: space-between;
    border-radius: 6px;
    transition: background-color .15s linear;
  }
  .about-index-bnrs .reason-number {
    width: 33.125%;
  }
  .about-index-bnrs .reason-number .number {
    width: 84.3%;
    margin-bottom: 19.8%;
  }
  .about-index-bnrs .reason-number .ico {
    width: 40.25%;
    padding-bottom: 40.25%;
    right: 0;
    margin-top: 27.67%;
  }
  .about-index-bnrs .reason-info {
    width: 62.5%;
    padding: 2% 3.43% 2% 0;
    text-align: left;
  }
  .about-index-bnrs .reason-ttl {
    font-size: 30px;
  }
  .about-index-bnrs .reason-ttl-sub {
    font-size: 24px;
  }
  .about-index-bnrs .reasonText,
  .about-index-bnrs .reason-more {
    font-size: 14px;
    max-width: 538px;
  }
  .about-index-bnrs .reason-text-note {
    padding-bottom: .5em;
    font-size: 11px;
  }
  .about-index-bnrs .reason-more {
    text-align: right;
    margin-top: 5px;
  }
  .about-index-bnrs .bnr:hover {
    background-color: #ddd;
  }
  .about-index-bnrs .bnr:hover .reason-more > span {
    text-decoration: underline;
  }
}
/** smartphone **/
@media screen and (max-width: 700px) {
  #about-index {
    padding-bottom: 16%;
  }
  .about-index-heading {
    padding: 4.66% 0 10.66%;
  }
  .about-index-heading .ttl {
    font-size: 26px;
    font-size: 7.06vw;
  }
  .about-index-heading .membership {
    width: 71.3%;
    margin: 2% auto 0;
  }
  .about-index-bnrs .item + .item {
    margin-top: 30px;
  }
  .about-index-bnrs .bnr {
    border-radius: 5px;
    padding-bottom: 8%;
  }
  .about-index-bnrs .reason-number {
    padding-bottom: 9.4%;
  }
  .about-index-bnrs .reason-number .number {
    width: 57.82%;
  }
  .about-index-bnrs .reason-number .ico {
    width: 33.06%;
    padding-bottom: 33.06%;
    right: 6%;
    margin-top: 3%;
  }
  .about-index-bnrs .reason-info {
    width: 93.55%;
    margin: 0 auto;
  }
  .about-index-bnrs .reason-ttl {
    padding-bottom: .3em;
    margin-bottom: .6em;
    font-size: 28px;
    font-size: 7.86vw;
    white-space: nowrap;
  }
  .about-index-bnrs .item:first-of-type .reason-ttl {
    font-feature-settings: "palt";
  }
  .about-index-bnrs .reason-ttl-sub {
    font-size: 26px;
    font-size: 7.06vw;
  }
  .about-index-bnrs .reason-text {
    font-size: 15px;
    font-size: 4vw;
    text-align: left;
  }
  .about-index-bnrs .reason-text-note {
    font-size: 10px;
    font-size: 2.67vw;
  }
  .about-index-bnrs .reason-more {
    text-align: center;
    margin-top: 8.5%;
    font-size: 12px;
    font-size: 3.2vw;
  }
  .about-index-bnrs .reason-more > span {
    line-height: 1.9;
  }
}

/* sub page heading, sub page nav */
.about-sub-heading {
  max-width: 960px;
  margin: 0 auto;
}
.about-sub-heading img[src$=".svg"] {
  display: block;
  width: 100%;
}
.about-sub-heading .heading-number {
  position: relative;
}
.about-sub-heading .ico {
  position: absolute;
  top: 0;
}
.about-sub-heading .ico img {
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  max-width: none;
  height: 100%;
}
.about-sub-heading .ttl {
  padding-bottom: .2em;
  margin-bottom: .2em;
  font-weight: 900;
  line-height: 1.17;
  border-bottom: 4px solid #ef3340;
}
.about-sub-heading .ttl-sub {
  margin-bottom: .5em;
  font-weight: 700;
  line-height: 1.37;
}
.about-sub-heading .palt {
  font-feature-settings: "palt";
}
.about-sub-bnr-nav {
  width: 93%;
  max-width: 960px;
  margin: 0 auto;
}
.about-sub-bnr-nav .bnr {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: #eff0f0;
}
.about-sub-bnr-nav .number {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.about-sub-bnr-nav .number img {
  width: 100%;
}
.about-sub-bnr-nav .ttl,
.about-sub-bnr-nav .more {
  position: relative;
  z-index: 5;
}
.about-sub-bnr-nav .ttl {
  font-weight: 900;
}
.about-sub-bnr-nav .more > span {
  display: inline-block;
  width: 14em;
  font-weight: 700;
  text-align: center;
  line-height: 1.7;
  background : linear-gradient(90deg, rgba(5, 173, 202, 1) 0%, rgba(5, 176, 202, 1) 36.19%, rgba(5, 184, 202, 1) 59.44%, rgba(5, 199, 202, 1) 79.05%, rgba(5, 220, 202, 1) 96.53%, rgba(5, 225, 202, 1) 100%);
  border-radius : 5em;
  color: #fff;
}
/** pc and tablet **/
@media print,screen and (min-width: 701px) {
  .about-sub-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
  }
  .about-sub-heading .heading-number {
    width: 38.125%;
  }
  .about-sub-heading .number {
    width: 73.42%;
  }
  .about-sub-heading .ico {
    width: 34.5%;
    padding-bottom: 34.5%;
    right: 0;
    margin-top: 5.48%;
  }
  .about-sub-heading .heading-text {
    width: 58.67%;
    margin-top: 4.16%;
  }
  .about-sub-heading .ttl {
    font-size: 30px;
  }
  .about-sub-heading .ttl-sub {
    font-size: 24px;
  }
  .about-sub-bnr-nav {
    padding: 40px 0;
    display: flex;
    flex-wrap: wrap;
  }
  .about-sub-bnr-nav .bnr {
    width: 48.75%;
    display: flex;
    flex-direction: column;
    transition: background-color .15s linear;
  }
  .about-sub-bnr-nav .bnr:nth-of-type(even) {
    margin-left: 2.5%;
  }
  .about-sub-bnr-nav .bnr:nth-of-type(n+3) {
    margin-top: 1.5625%;
  }
  .about-sub-bnr-nav .number {
    width: 35.9%;
  }
  .about-sub-bnr-nav .ttl {
    padding: 3% 0 3% 34.83%;
    line-height: 1.2;
    font-size: 24px;
  }
  .about-sub-bnr-nav .more {
    padding: 0 4.27% 2.5% 34.83%;
    text-align: right;
    margin-top: auto;
  }
  .about-sub-bnr-nav .more > span {
    font-size: 14px;
  }
  .about-sub-bnr-nav .bnr:hover {
    background-color: #ddd;
  }
  .about-sub-bnr-nav .bnr:hover .more > span {
    text-decoration: underline;
  }
}
/** smartphone **/
@media screen and (max-width: 700px) {
  .about-sub-heading {
    margin-bottom: 5.33%;
  }
  .about-sub-heading .heading-number {
    margin-bottom: 2.67%;
  }
  .about-sub-heading .number {
    width: 53.2%;
    padding-bottom: 4.53%;
  }
  .about-sub-heading .ico {
    width: 33.06%;
    padding-bottom: 33.06%;
    right: 10.26%;
    top: auto;
    bottom: 0;
  }
  .about-sub-heading .heading-text {
    width: 86%;
    margin: 0 auto;
    text-align: center;
  }
  .about-sub-heading .ttl {
    padding-bottom: .4em;
    margin-bottom: .6em;
    font-size: 28px;
    font-size: 7.86vw;
    white-space: nowrap;
  }
  .about-sub-heading .ttl-sub {
    font-size: 26px;
    font-size: 7.06vw;
  }
  .about-sub-bnr-nav {
    padding: 8% 0;
  }
  .about-sub-bnr-nav .bnr {
    display: block;
    border-radius: 5px;
  }
  .about-sub-bnr-nav .bnr + .bnr {
    margin-top: 6.67%;
  }
  .about-sub-bnr-nav .number {
    width: 44.5%;
  }
  .about-sub-bnr-nav .ttl {
    display: flex;
    align-items: center;
    margin: 4.3% 0 3.6%;
    padding-left: 34.5%;
    line-height: 1.26;
    font-size: 21px;
    font-size: 5.6vw;
    height: 2.52em;
  }
  .about-sub-bnr-nav .more {
    text-align: center;
    padding-bottom: 2.15%;
  }
  .about-sub-bnr-nav .more > span {
    font-size: 12px;
    font-size: 3.2vw;
  }
}

/* about image section */
.about-img-sec .ttl {
  margin-bottom: .6em;
  font-weight: 900;
  color: #221551;
  line-height: 1.525;
}
.about-img-sec a {
  color: #00f;
  text-decoration: underline;
}
.about-img-sec .note {
  padding-top: 1.5em;
}
.about-img-sec .ph .caption {
  display: block;
  padding-top: .6em;
}
.about-img-sec .note .kome {
  padding-left: 1em;
  text-indent: -1em;
}
/** pc and tablet **/
@media print,screen and (min-width: 701px) {
  .about-img-sec {
    width: 92%;
    max-width: 960px;
    margin: 0 auto 30px;
  }
  .about-img-sec.d-flex {
    display: flex;
    justify-content: space-between;
  }
  .about-img-sec.has-banner {
    margin-bottom: 80px;
  }
  .about-img-sec.d-flex .ph {
    width: 43.75%;
  }
  .about-img-sec .info {
    width: 100%;
    max-width: 750px;
    margin: 24px auto 0;
  }
  .about-img-sec.d-flex .info {
    width: 51.875%;
  }
  .about-img-sec .ttl {
    margin-top: -0.2625em;
    font-size: 24px;
    margin-right: -1em;
  }
  .about-img-sec .text {
    font-size: 14px;
    line-height: 1.75;
  }
  .about-img-sec .note,
  .about-img-sec .ph .caption {
    font-size: 11px;
    line-height: 1.3;
  }
  .about-img-sec a:hover {
    text-decoration: none;
  }
}
/** smartphone **/
@media screen and (max-width: 700px) {
  .about-img-sec {
    margin: 0 auto 6.67%;
  }
  .about-img-sec.has-banner {
    margin-bottom: 14.67%;
  }
  .about-img-sec .info {
    width: 82.67%;
    margin: 3.33% auto 0;
  }
  .about-img-sec .ttl {
    font-size: 20px;
    font-size: 5.33vw;
    margin-bottom: .75em;
  }
  .about-img-sec .text {
    font-size: 15px;
    font-size: 4vw;
    line-height: 1.63;
  }
  .about-img-sec .note,
  .about-img-sec .ph .caption {
    font-size: 10px;
    font-size: 2.67vw;
    line-height: 1.4;
  }
  .about-img-sec .ph .caption {
    width: 82.67%;
    margin: 0 auto;
  }
}

/* about more */
.about-more {
  max-width: 960px;
	margin: 0 auto 40px;
}
.about-more input {
	display: none;
}
.about-more .open-btn {
	width: 100%;
	position: relative;
	text-align: center;
	padding: 128px 16px 80px;
	background: url("../img/about/2021/facility/open-btn.jpg") center;
	background-size: cover;
	border-radius: 16px;
}
.about-more .icon {
	position: absolute;
	right: 16px;
	bottom: 16px;
}
.about-more .contents {
	display: none;
	border-radius: 16px;
}
.about-more #open-close:checked ~ .open-btn {
	display: none;
}
.about-more #open-close:checked ~ .contents {
	display: block;
}
.about-more .contents .text {
	background: #e2e2e2;
	border-radius: 16px 16px 0 0;
	padding: 40px 16px;
}
.about-more .contents .text .block {
	max-width: 700px;
	margin: 0 auto 24px;
	overflow: hidden;
	clear: both;
}
.about-more .contents .text .block .float-r {
	float: right;
	width: 40%;
	margin-left: 1%;
}
.about-more .contents .text h2 {
	max-width: 700px;
	border-bottom: #00adcf solid 6px;
	margin: 0 auto 40px;
	text-align: center;
	font-size: 1.8rem;
	padding: 0 0 16px;
}
.about-more .contents .text h3 {
	max-width: 480px;
	margin: 0 auto 40px;
	text-align: center;
	font-size: 1.8rem;
	padding: 16px;
	background: #fff;
	border-radius: 16px;
}
.about-more .contents .text p,
.about-more .contents .text ol,
.about-more .contents .text img {
	padding-bottom: 40px;
}
.about-more .contents .text ol li {
	margin-left: -32px;
}
.about-more .contents .text ol li span {
	padding-right: 16px;
}
.about-more .contents .text strong {
	font-weight: bold;
}
.about-more .close-btn {
	width: 100%;
	position: relative;
	text-align: center;
	height: 440px;
	background: url("../img/about/2021/facility/close-btn.jpg") center;
	background-size: cover;
	border-radius: 0 0 16px 16px;
	font-size: 0;
}
.about-more .close-btn .more-close {
	position: absolute;
	bottom: 16px;
	right: 0;
	left: 0;
	margin: auto;
}
.about-more .close-btn:before {
	position: absolute;
	bottom: 0;
	content: "";
	display: block;
	width: 100%;
	height: 80px;
	background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);
	border-radius: 0 0 16px 16px;
}

/** pc and tablet **/
@media print,screen and (min-width: 701px) {
  .about-more {
    width: 92%;
  }
}
@media screen and (max-width: 1170px) {
}
/** smartphone **/
@media screen and (max-width: 700px) {
	.about-more .open-btn {
		padding: 72px 16px 56px;
	}
	.about-more .close-btn {
		height: 200px;
	}
	.about-more .contents .text h2,
	.about-more .contents .text h3 {
		font-size: 1.6rem;
	}
	.about-more .contents .text ol li {
		margin-left: -28px;
	}
	.about-more .contents .text ol li span {
		padding-right: 8px;
	}
}

/* value */

/** pc and tablet **/
@media print,screen and (min-width: 701px) {
}
/** smartphone **/
@media screen and (max-width: 700px) {
}


/* Story banner */
.story-bnr {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.story-bnr .bnr a {
  display: block;
  position: relative;
  border: 1px solid #ddd;
}
.story-bnr .link {
  padding-top: 1.2em;
}
.story-bnr .link a {
  color: #000;
}
/** pc and tablet **/
@media print,screen and (min-width: 701px) {
  .story-bnr {
    padding: 30px 0 40px;
  }
  /* .story-bnr .bnr img {
    display: block;
    transition: transform .3s ease;
  }
  .story-bnr .bnr a:hover img {
    transform: scale(1.02);
  } */
  .story-bnr .bnr a {
    display: block;
    transition: transform .3s ease;
  }
  .story-bnr .bnr a:hover {
    transform: scale(1.02);
  }
  .story-bnr .link {
    padding-top: 1.6em;
    font-size: 18px;
  }
  .story-bnr .link a:hover {
    text-decoration: underline;
  }
}
/** smartphone **/
@media screen and (max-width: 700px) {
  .story-bnr {
    width: 93%;
    padding: 20px 0 30px;
  }
  .story-bnr .link {
    font-size: 13px;
  }
}

/* join button */
.page-join-btn {
  text-align: center;
  width: 80%;
  max-width: 400px;
  margin: 0 auto;
}
.page-join-btn a {
  position: relative;
  display: block;
  color: #fff;
  line-height: 1.2;
  background: #7c61a7;
  background:-moz-linear-gradient(0% 50% 0deg,rgba(124, 97, 167, 1) 0%,rgba(122, 98, 168, 1) 38.14%,rgba(115, 103, 170, 1) 54.35%,rgba(102, 110, 174, 1) 66.4%,rgba(85, 121, 179, 1) 76.39%,rgba(62, 135, 187, 1) 85.1%,rgba(34, 152, 195, 1) 92.79%,rgba(1, 172, 206, 1) 99.81%,rgba(0, 172, 206, 1) 99.95%);
  background:-webkit-linear-gradient(0deg, rgba(124, 97, 167, 1) 0%, rgba(122, 98, 168, 1) 38.14%, rgba(115, 103, 170, 1) 54.35%, rgba(102, 110, 174, 1) 66.4%, rgba(85, 121, 179, 1) 76.39%, rgba(62, 135, 187, 1) 85.1%, rgba(34, 152, 195, 1) 92.79%, rgba(1, 172, 206, 1) 99.81%, rgba(0, 172, 206, 1) 99.95%);
  background:-webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(124, 97, 167, 1) ),color-stop(0.3814,rgba(122, 98, 168, 1) ),color-stop(0.5435,rgba(115, 103, 170, 1) ),color-stop(0.664,rgba(102, 110, 174, 1) ),color-stop(0.7639,rgba(85, 121, 179, 1) ),color-stop(0.851,rgba(62, 135, 187, 1) ),color-stop(0.9279,rgba(34, 152, 195, 1) ),color-stop(0.9981,rgba(1, 172, 206, 1) ),color-stop(0.9995,rgba(0, 172, 206, 1) ));
  background:linear-gradient(90deg, rgba(124, 97, 167, 1) 0%, rgba(122, 98, 168, 1) 38.14%, rgba(115, 103, 170, 1) 54.35%, rgba(102, 110, 174, 1) 66.4%, rgba(85, 121, 179, 1) 76.39%, rgba(62, 135, 187, 1) 85.1%, rgba(34, 152, 195, 1) 92.79%, rgba(1, 172, 206, 1) 99.81%, rgba(0, 172, 206, 1) 99.95%);
  border-radius: 10em;
}
.page-join-btn a:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.4em 0 0.4em 0.5em;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	right: 16px;
	top: 0;
	bottom: 0;
	margin: auto;
}
/** pc and tablet **/
@media print,screen and (min-width: 701px) {
  .page-join-btn {
    padding-bottom: 20px;
  }
  .page-join-btn a {
    font-size: 18px;
    padding: 11px 0;
    transition: opacity .15s linear;
  }
  .page-join-btn a:hover {
    opacity: 0.75;
  }
}
/** smartphone **/
@media screen and (max-width: 700px) {
  .page-join-btn {
	  width: 92%;
    margin: 0 auto;
    padding-bottom: 30px;
  }
  .page-join-btn a {
    font-size: 13px;
    padding: 9px 0;
  }
}

.about-back-link {
  text-align: center;
}
.about-back-link a {
  color: #7c61a7;
  text-decoration: underline;
}
/** pc and tablet **/
@media print,screen and (min-width: 701px) {
  .about-back-link {
    padding: 0 0 80px;
  }
  .about-back-link a:hover {
    text-decoration: none;
  }
}
/** smartphone **/
@media screen and (max-width: 700px) {
  .about-back-link {
    padding: 0 0 16%;
  }
}

.about-more-banner input[type="checkbox"] {
  display: none;
}
.about-more-banner svg {
  width: 100%;
  display: block;
}
.about-more-banner label {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.about-more-banner .open-label {
  position: relative;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
}
.about-more-banner .open-label::after {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  right: -20px;
  bottom: -20px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0iIzYyNDRiYiI+PGc+PHBvbHlnb24gcG9pbnRzPSIyMSA4LjY3IDEyLjMzIDguNjcgMTIuMzMgMCA4LjY3IDAgOC42NyA4LjY3IDAgOC42NyAwIDEyLjMzIDguNjcgMTIuMzMgOC42NyAyMSAxMi4zMyAyMSAxMi4zMyAxMi4zMyAyMSAxMi4zMyAyMSA4LjY3Ii8+PC9nPjwvc3ZnPg==") no-repeat center center #fff;
  background-size: 21px auto;
  border: 2px solid #6244bb;
  border-radius: 50%;
}
.about-more-banner .label-image {
  border-radius: 10px;
  overflow: hidden;
}
.about-more-banner .open-label img {
  display: block;
  transition: transform .5s ease;
}
.about-more-banner .label-image,
.about-more-banner .label-info {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
.about-more-banner .open-label > span {
  display: block;
}
.about-more-banner .label-info {
  position: relative;
  align-self: center;
  color: #fff;
  text-align: center;
}
.about-more-banner .label-info::before,
.about-more-banner .label-info::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .64;
}
.about-more-banner .label-info::after {
  mix-blend-mode: multiply;
}
.about-more-banner .open-label.machine .label-info::before,
.about-more-banner .open-label.machine .label-info::after {
  background-color: #05adca;
}
.about-more-banner .open-label.functional .label-info::before,
.about-more-banner .open-label.functional .label-info::after {
  background-color: #ff9800;
}
.about-more-banner .label-title {
  font-weight: 700;
}
.about-more-banner .label-info > span {
  position: relative;
  z-index: 5;
}
.about-more-banner .label-more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  line-height: 1;
}
.about-more-banner .label-more > i,
.about-more-banner .close-label > span > i {
  display: block;
  width: 3.25em;
  margin-right: 1em;
}
.about-more-banner .close-label {
  display: none;
  padding: .5em 1.5em;
  border-radius: 0 0 10px 10px;
  color: #fff;
}
.about-more-banner .close-label.machine {
  background-color: #05adca;
}
.about-more-banner .close-label.functional {
  background-color: #ff9800;
}
.about-more-banner .close-label > span {
  display: flex;
  align-items: center;
  line-height: 1;
}
.about-more-banner .close-label > span > i {
  transform: rotate(180deg);
}
.about-more-banner .close-label::after {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  right: -20px;
  bottom: -20px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0iI2Q4ZDlkOSI+PHJlY3QgeT0iOC42NyIgd2lkdGg9IjIxIiBoZWlnaHQ9IjMuNjYiLz48L3N2Zz4=") no-repeat center center #fff;
  background-size: 21px auto;
  border: 2px solid #6244bb;
  border-radius: 50%;
}
.about-more-contens {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  background-color: #d8d9d9;
}
.about-functional-catch,
.about-more-title {
  color: #221551;
  font-weight: 900;
  text-align: center;
}
.about-more-title {
  background-color: #fff;
}
.about-functional-list {
  margin: 0;
  padding: 0;
  line-height: 1.3125;
}
.about-functional-list li {
  position: relative;
  font-weight: 700;
  padding-left: 1.5em;
}
.about-functional-list li + li {
  margin-top: .5em;
}
.about-functional-list li > span {
  position: absolute;
  left: 0;
  top: 0;
}
.about-machine-imgs a {
  display: block;
  margin-bottom: 1em;
}
.about-more-note {
  margin-top: 1.325em;
  color: #424242;
}
.about-more-banner input[type="checkbox"]:checked ~ .open-label {
  display: block;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
.about-more-banner input[type="checkbox"]:checked ~ .open-label.label-info::before,
.about-more-banner input[type="checkbox"]:checked ~ .open-label.label-info::after {
  opacity: 1;
  mix-blend-mode: normal;
}
.about-more-banner input[type="checkbox"]:checked ~ .open-label .label-image,
.about-more-banner input[type="checkbox"]:checked ~ .open-label .label-more,
.about-more-banner input[type="checkbox"]:checked ~ .open-label::after {
  display: none;
}
.about-more-banner input[type="checkbox"]:checked ~ .about-more-contens {
  max-height: none;
  visibility: visible;
  opacity: 1;
  transition: all .5s ease;
}
.about-more-banner input[type="checkbox"]:checked ~ .close-label {
  display: block;
}
/** pc and tablet **/
@media print,screen and (min-width: 701px) {
  .about-more-banner {
    padding-top: 45px;
  }
  .about-more-banner .open-label:hover img {
    transform: scale(1.08);
  }
  .about-more-banner .label-info {
    padding: 1.2em 1.5em;
    font-size: 19px;
  }
  .about-more-banner .label-more {
    margin-top: 16px;
    font-size: 18px;
  }
  .about-more-banner .open-label:hover .label-more {
    text-decoration: underline;
  }
  .about-more-banner .close-label {
    font-size: 18px;
  }
  .about-more-banner .close-label:hover {
    text-decoration: underline;
  }
  .about-more-contens-block {
    padding: 20px 20px 25px;
    font-size: 14px;
    line-height: 1.75;
  }
  .about-more-contens-block .d-flex {
    display: flex;
    justify-content: space-between;
  }
  .about-more-contens-block .d-flex > .text-block {
    width: 38%;
  }
  .about-more-contens-block .d-flex > .img-block {
    width: 60%;
  }
  .about-more-contens-block .d-flex > .img-block img {
    width: 100%;
    height: auto;
  }
  .about-functional-catch {
    padding: 20px 0 0;
    margin: 0;
    font-size: 18px;
    line-height: 1.75;
  }
  .about-more-title {
    padding: .25em 0;
    font-size: 18px;
    margin: 0 0 .5em;
  }
  .about-functional-mv {
    display: flex;
  }
  .about-functional-mv > div:first-child {
    position: relative;
    width: 46%;
    z-index: 5;
  }
  .about-functional-mv > div:nth-child(2) {
    width: 71.4%;
    margin-left: -17.4%;
  }
  .about-functional-list {
    margin-top: 1em;
    font-size: 16px;
  }
  .about-machine-imgs {
    padding: 0 25px 25px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .about-machine-imgs a {
    width: 49%;
  }
  .about-machine-imgs a:nth-child(2n) {
    margin-left: 2%;
  }
  .about-more-banner input[type="checkbox"]:checked ~ .open-label .label-info {
    padding-top: .6em;
    padding-bottom: .6em;
  }
}
/** smartphone **/
@media screen and (max-width: 700px) {
  .about-more-banner {
    padding-top: 8%;
    margin-left: -3.25%;
    margin-right: -3.25%;
  }
  .about-more-banner .open-label::after,
  .about-more-banner .close-label::after {
    width: 32px;
    height: 32px;
    right: -10px;
    bottom: -10px;
    background-size: 13px auto;
  }
  .about-more-banner .label-image {
    border-radius: 5px;
  }
  .about-more-banner .label-info {
    padding: .5em 1.5em;
    font-size: 15px;
    font-size: 3.86vw;
  }
  .about-more-banner .label-more {
    margin-top: 10px;
    font-size: 12px;
    font-size: 3.2vw;
  }
  .about-more-banner .label-more > i,
  .about-more-banner .close-label > span > i {
    width: 2.3em;
    margin-right: 0.5em;
  }
  .about-more-banner .close-label {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    font-size: 12px;
    font-size: 3.2vw;
    border-radius: 0 0 5px 5px;
  }
  .about-more-contens-block {
    padding: 4.5%;
    font-size: 15px;
    font-size: 4vw;
    line-height: 1.63;
  }
  .about-functional-catch {
    padding: 1em 0;
    font-size: 18px;
    font-size: 4.8vw;
    line-height: 1.7;
  }
  .about-more-title {
    padding: .5em 0;
    font-size: 15px;
    font-size: 4vw;
    margin: 0 0 .5em;
  }
  .about-functional-mv > div:nth-child(2) {
    width: 70%;
    margin: 0 auto;
  }
  .about-functional-list {
    margin-top: 1.5em;
    line-height: 1.5;
    font-size: 15px;
    font-size: 4vw;
  }
  .about-more-note {
    font-size: 12px;
    font-size: 3.2vw;
  }
  .about-machine-imgs {
    padding: 0 6% 6%;
  }
  .about-more-banner input[type="checkbox"]:checked ~ .open-label {
    border-radius: 5px 5px 0 0;
  }
}