@charset "UTF-8";
header#pages { height: 163px; }
@media screen and (min-width: 768px) { header#pages { height: 268px; } }
header#pages .inner.pages h2 { position: absolute; top: inherit; bottom: 33px; left: 0; color: #fff; text-align: left; font-size: 2.2rem; line-height: 112%; font-weight: 500; }
@media screen and (min-width: 768px) { header#pages .inner.pages h2 { top: inherit; bottom: 50px; font-size: 3rem; } }
header#pages .inner.pages h2::after { position: absolute; display: block; content: ''; width: 50px; height: 1px; background: #FFF; left: 0px; bottom: -10px; }
@media screen and (min-width: 768px) { header#pages .inner.pages h2::after { width: 80px; height: 3px; bottom: -15px; } }
header#pages .inner.pages p { position: absolute; bottom: 63px; left: 0; color: #fff; text-align: left; font-size: 1rem; line-height: 130%; font-family: 'Roboto', sans-serif; font-weight: 500; }
@media screen and (min-width: 768px) { header#pages .inner.pages p { font-size: 1.4rem; bottom: 93px; } }
header#pages .inner.pages p.en { text-transform: uppercase; }
header#pages .slider { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
header#pages .slider .slide1 { width: 100%; height: 163px; background: url("../images/page-about-main-pc.jpg") no-repeat center center; background-size: cover; }
@media screen and (min-width: 768px) { header#pages .slider .slide1 { width: 100%; height: 268px; background: url("../images/page-about-main-pc.jpg") no-repeat center center; background-size: cover; } }

section#companyData { position: relative; }
section#companyData .inner { width: 90%; margin: 0 auto; padding: 40px 0 0 0; position: relative; }
section#companyData .inner .en { font-family: 'Roboto', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.4rem; color: #6BC1B1; margin-bottom: 1em; }
section#companyData .inner h3 { font-weight: 500; font-size: 2.6rem; margin-bottom: 3em; position: relative; }
section#companyData .inner h3::after { display: block; position: absolute; content: ""; width: 80px; height: 2px; background: #6BC1B1; bottom: -20px; left: 50%; margin-left: -40px; }
section#companyData .inner .box { width: 100%; margin: 0 auto; position: relative; z-index: 1; }
@media screen and (min-width: 768px) { section#companyData .inner { width: 1200px; padding: 75px 0 0 0; }
  section#companyData .inner h3 { font-size: 3rem; }
  section#companyData .inner .box { width: 600px; } }
section#companyData .companyData { width: 100%; margin: 5px auto 80px auto; border-collapse: collapse; }
section#companyData .companyData th { display: block; text-align: left; vertical-align: top; font-size: 1.4rem; line-height: 1.6; font-weight: bold; border-bottom: #6BC1B1 solid 1px; padding: 1em; background: #DCF4DD; }
section#companyData .companyData td { display: block; text-align: left; vertical-align: top; font-size: 1.4rem; line-height: 1.6; border-bottom: #6BC1B1 solid 1px; padding: 1em; }
@media screen and (min-width: 768px) { section#companyData .companyData { width: 600px; margin: 10px auto 120px auto; }
  section#companyData .companyData th { display: table-cell; border-bottom: #6BC1B1 solid 1px; padding: 1em 2em 1em 0; white-space: nowrap; background: none; }
  section#companyData .companyData td { display: table-cell; border-bottom: #6BC1B1 solid 1px; padding: 1em; } }
section#companyData .locatonBox { text-align: left; margin-top: 60px; }
section#companyData .locatonBox .txt h4 { font-size: 1.6rem; line-height: 1.6; font-weight: bold; }
section#companyData .locatonBox .txt h4 span { color: #6BC1B1; }
section#companyData .locatonBox .txt p { font-size: 1.4rem; line-height: 1.6; }
section#companyData .locatonBox .txt .img img { width: 150px; height: auto; }
section#companyData .locatonBox .gmap { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; border: #707070 solid 1px; margin: 30px 0 10px 0; }
section#companyData .locatonBox .gmap iframe, section#companyData .locatonBox .gmap object, section#companyData .locatonBox .gmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section#companyData .locatonBox p.cap { font-size: 1.2rem; line-height: 1.6; }
@media screen and (min-width: 768px) { section#companyData .locatonBox .data { display: flex; justify-content: space-between; }
  section#companyData .locatonBox .txt { width: 420px; }
  section#companyData .locatonBox .img { width: 150px; } }

section#businessIndexData { position: relative; background: #DCF4DD; }
section#businessIndexData .inner { width: 90%; margin: 0 auto; padding: 40px 0 10px 0; position: relative; }
section#businessIndexData .inner .box { margin: 0 auto; position: relative; z-index: 1; }
section#businessIndexData .inner .box .businessIndexBox { text-align: left; margin-bottom: 40px; }
section#businessIndexData .inner .box .businessIndexBox .img { width: 100%; margin-bottom: 15px; }
section#businessIndexData .inner .box .businessIndexBox .img img { width: 100%; height: auto; }
section#businessIndexData .inner .box .businessIndexBox h4 { font-size: 1.5rem; font-weight: 500; position: relative; margin: 0 0 0.5em 31px; }
section#businessIndexData .inner .box .businessIndexBox h4::after { display: block; content: ""; position: absolute; background: #6BC1B1; width: 21px; height: 1px; left: -31px; top: 0.75rem; }
section#businessIndexData .inner .box .businessIndexBox p { font-size: 1.2rem; line-height: 1.8; margin: 0 0 0.5em 31px; }
section#businessIndexData .inner .box .businessIndexBox .button { width: 100%; height: 50px; background: #FFF; border: #6BC1B1 solid 1px; font-size: 1.5rem; font-weight: 400; position: relative; display: table; transition: .2s; text-align: center; }
section#businessIndexData .inner .box .businessIndexBox .button a { display: table-cell; vertical-align: middle; }
section#businessIndexData .inner .box .businessIndexBox .button::after { display: block; position: absolute; content: ""; width: 19px; height: 45px; background: url("../images/arrow.svg") no-repeat center right; background-size: cover; top: 2px; right: 10px; transition: .2s; }
section#businessIndexData .inner .box .businessIndexBox a { color: #6BC1B1; text-decoration: none; }
@media screen and (min-width: 768px) { section#businessIndexData .inner { width: 1200px; padding: 75px 0 45px 0; }
  section#businessIndexData .inner .box { width: 780px; display: flex; justify-content: space-between; flex-wrap: wrap; }
  section#businessIndexData .inner .box .businessIndexBox { width: 362px; }
  section#businessIndexData .inner .box .businessIndexBox .button a:hover { opacity: 0.8; }
  section#businessIndexData .inner .box .businessIndexBox .button::after { right: 5px; } }

/* vision */
section#visionData { position: relative; }
section#visionData .inner { width: 90%; margin: 0 auto; padding: 40px 0 50px 0; position: relative; }
section#visionData .inner .en { font-family: 'Roboto', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.4rem; color: #6BC1B1; margin-bottom: 1em; }
section#visionData .inner h3 { font-weight: 500; font-size: 2.6rem; margin-bottom: 3em; position: relative; }
section#visionData .inner h3::after { display: block; position: absolute; content: ""; width: 80px; height: 2px; background: #6BC1B1; bottom: -20px; left: 50%; margin-left: -40px; }
section#visionData .inner .box { width: 100%; margin: 0 auto; position: relative; z-index: 1; }
@media screen and (min-width: 768px) { section#visionData .inner { width: 1200px; padding: 75px 0 85px 0; }
  section#visionData .inner h3 { font-size: 3rem; }
  section#visionData .inner .box { width: 740px; } }

.visionChart .txt { text-align: left; }
.visionChart .txt h4 { font-size: 2.4rem; font-weight: 500; color: #019EA7; margin-bottom: 0.5em; }
.visionChart .txt p { font-size: 1.4rem; line-height: 1.6; }
.visionChart .img { width: 90%; margin: 15px auto 0 auto; }
.visionChart .img img { width: 100%; height: auto; }
@media screen and (min-width: 768px) { .visionChart { display: flex; justify-content: space-between; align-items: center; }
  .visionChart .txt { width: 300px; }
  .visionChart .txt h4 { font-size: 2.1rem; }
  .visionChart .txt p { font-size: 1.5rem; }
  .visionChart .img { width: 430px; margin: 0; }
  .visionChart .img img { width: 430px; height: auto; } }

#visionDetails { position: relative; background: #000 url("../images/vision-pc.jpg") center center; background-size: cover; }
#visionDetails .inner { width: 90%; margin: 0 auto; padding: 40px 0 50px 0; position: relative; }
#visionDetails .inner ol { text-align: left; width: 100%; margin: 0 auto; position: relative; counter-reset: number; /*数字をリセット*/ list-style-type: none !important; /*数字を一旦消す*/ z-index: 1; }
#visionDetails .inner ol li { color: #FFF; margin-bottom: 50px; position: relative; }
#visionDetails .inner ol li h4 { font-size: 2.1rem; line-height: 1.6; font-weight: 500; margin-bottom: 0.5rem; padding: 0 0 0 30px; }
#visionDetails .inner ol li p { font-size: 1.4rem; line-height: 1.6; }
#visionDetails .inner ol li:last-child { margin-bottom: 0; }
#visionDetails .inner ol li:before { position: absolute; counter-increment: number; content: counter(number); /*数字のデザイン変える*/ display: inline-block; border: #B0EAB2 solid 1px; color: #B0EAB2; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.8rem; left: 0; width: 25px; height: 25px; line-height: 25px; text-align: center; /*以下上下中央寄せのため*/ top: 15%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
@media screen and (min-width: 768px) { #visionDetails .inner { width: 1200px; padding: 75px 0 85px 0; }
  #visionDetails .inner ol { width: 600px; }
  #visionDetails .inner ol li h4 { font-size: 2.4rem; }
  #visionDetails .inner ol li p { font-size: 1.6rem; }
  #visionDetails .inner ol li:before { top: 20%; } }

/* message */
section#messageData { position: relative; }
section#messageData .inner { width: 90%; margin: 0 auto; padding: 40px 0 50px 0; position: relative; }
section#messageData .inner .en { font-family: 'Roboto', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.4rem; color: #6BC1B1; margin-bottom: 1em; }
section#messageData .inner h3 { font-weight: 500; font-size: 2.6rem; margin-bottom: 3em; position: relative; }
section#messageData .inner h3::after { display: block; position: absolute; content: ""; width: 80px; height: 2px; background: #6BC1B1; bottom: -20px; left: 50%; margin-left: -40px; }
section#messageData .inner h4 { text-align: left; font-size: 2rem; line-height: 1.4; margin-bottom: 1.5em; }
section#messageData .inner p { font-size: 1.4rem; line-height: 2; margin-bottom: 2em; text-align: left; }
section#messageData .inner .box { width: 100%; margin: 0 auto; position: relative; z-index: 1; }
section#messageData .inner .box .img { margin-bottom: 20px; }
section#messageData .inner .box .img img { width: 100%; height: auto; }
@media screen and (min-width: 768px) { section#messageData .inner { width: 1200px; padding: 75px 0 85px 0; }
  section#messageData .inner h3 { font-size: 3rem; }
  section#messageData .inner h4 { text-align: center; line-height: 1; }
  section#messageData .inner .box { width: 690px; }
  section#messageData .inner .box .img { margin-bottom: 20px; }
  section#messageData .inner .box .img img { width: 100%; height: auto; } }

/* history */
section#historyData { position: relative; }
section#historyData .inner { width: 90%; margin: 0 auto; padding: 40px 0 50px 0; position: relative; }
section#historyData .inner .en { font-family: 'Roboto', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.4rem; color: #6BC1B1; margin-bottom: 1em; }
section#historyData .inner h3 { font-weight: 500; font-size: 2.6rem; margin-bottom: 3em; position: relative; }
section#historyData .inner h3::after { display: block; position: absolute; content: ""; width: 80px; height: 2px; background: #6BC1B1; bottom: -20px; left: 50%; margin-left: -40px; }
section#historyData .inner .box { width: 100%; margin: 0 auto; position: relative; z-index: 1; }
section#historyData .inner .box table { width: 100%; border-collapse: collapse; border-top: #6BC1B1 solid 1px; }
section#historyData .inner .box table th { display: block; font-size: 1.4rem; line-height: 1.8; font-weight: 500; text-align: left; border-bottom: none; background: #DCF4DD; padding: 1em; }
section#historyData .inner .box table td { display: block; font-size: 1.4rem; line-height: 1.8; text-align: left; border-bottom: #6BC1B1 solid 1px; padding: 1em; }
@media screen and (min-width: 768px) { section#historyData .inner { width: 1200px; padding: 75px 0 85px 0; }
  section#historyData .inner h3 { font-size: 3rem; }
  section#historyData .inner .box { width: 600px; }
  section#historyData .inner .box table { border-top: none; }
  section#historyData .inner .box table th { display: table-cell; background: none; padding: 1em 1.5em 1em 0; border-bottom: #6BC1B1 solid 1px; white-space: nowrap; }
  section#historyData .inner .box table td { display: table-cell; padding: 1em 0 1em 1.5em; border-bottom: #6BC1B1 solid 1px; } }

/* privacy */
section#privacyData { position: relative; }
section#privacyData .inner { width: 90%; margin: 0 auto; padding: 40px 0 50px 0; position: relative; }
section#privacyData .inner .en { font-family: 'Roboto', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.4rem; color: #6BC1B1; margin-bottom: 1em; }
section#privacyData .inner h3 { font-weight: 500; font-size: 2.6rem; margin-bottom: 3em; position: relative; }
section#privacyData .inner h3::after { display: block; position: absolute; content: ""; width: 80px; height: 2px; background: #6BC1B1; bottom: -20px; left: 50%; margin-left: -40px; }
section#privacyData .inner .box { width: 100%; margin: 0 auto; position: relative; z-index: 1; text-align: left; }
section#privacyData .inner .box h4 { font-size: 2.1rem; line-height: 1.6; font-weight: 500; margin-top: 0.5em; margin-bottom: 1.2em; margin-left: 15px; position: relative; }
section#privacyData .inner .box h4::after { display: block; content: ""; position: absolute; left: -15px; top: 15px; background: #6BC1B1; width: 7px; height: 7px; }
section#privacyData .inner .box h4::before { display: block; content: ""; position: absolute; left: -15px; bottom: -10px; background: #999; width: 100%; height: 1px; }
section#privacyData .inner .box p { font-size: 1.4rem; line-height: 1.8; margin-bottom: 2em; }
section#privacyData .inner .box p.right { text-align: right; }
section#privacyData .inner .box ol { list-style: decimal; }
section#privacyData .inner .box ol li { font-size: 1.4rem; line-height: 1.8; margin-bottom: 2em; margin-left: 1em; }
section#privacyData .inner .box ol li ol { margin-top: 1em; margin-left: 1em; }
section#privacyData .inner .box ol li ol li { margin-bottom: 0; }
section#privacyData .inner .box strong { display: block; font-size: 1.8rem; font-weight: 500; }
@media screen and (min-width: 768px) { section#privacyData .inner { width: 1200px; padding: 75px 0 85px 0; }
  section#privacyData .inner h3 { font-size: 3rem; }
  section#privacyData .inner .box { width: 690px; } }