/* masterモジュール調整
-------------------------------------------------- */
main {
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  color: #000;
  background: #00b5e2;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}
main:lang(zh),main:lang(zh){
font-family: "Noto Sans SC", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", meiryo, "MS PGothic", "Helvetica Neue", arial, verdana, sans-serif;
}
main:lang(en),main:lang(en){
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", meiryo, "MS PGothic", "Helvetica Neue", arial, verdana, sans-serif;
}
main h1, main h2{
letter-spacing: 0em;
}

.m-panel-article__body {
    background-color: #e5f7fc;
}
.m-media__wrap,
.m-media__wrap:link, .m-media__wrap:visited {
  color: #002f6c;/* 変更 */
}
@media print, screen and (min-width:760px) {
  .m-media__caption {
    /* font-size: .875rem; 変更*/
  }
}
.m-box-type2 {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 1));
  padding: 32px 16px;
  margin-bottom: 2em;
}
.m-box-type2:last-child{
  margin-bottom: 0;
}
.m-box-type2__content [class^=m-heading] {
  margin-bottom: 32px;
  margin-top: 32px
}
@media print, screen and (min-width:760px) {
  .m-box-type2 {
    padding: 40px;
    margin-bottom: 6em;
  }
  .m-box-type2__heading {
    font-size: 2rem
  }
}

/* other
-------------------------------------------------- */
.m-text-lead span {
  color: #002f6c;
  margin: 10px;
}
.m-button {
  background-color: #002f6c;
}
/*=============================================
 * reset - custom
 *=============================================*/
main{
overflow:clip;/* はみ出た背景を横スクロールしなくし、 stickyを有効にする*/
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
._pc { display: block !important; }
._sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
._pc { display: none !important; }
._sp { display: block !important; }
}
/*========= Loading ===============*/

#splash {/* Loading背景画面設定　*/
  position: fixed;/*fixedで全面に固定*/
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #00b5e2;
  text-align: center;
  color: #fff;
}
#splash_text {/* Loadingバー中央配置　*/
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fff;
}
#splash_text svg {/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
  height: 2px;
}

.intro {
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 0;
  background: #00b5e2 url("/purpose/images/intro_back.png") top;
}
.intro-img li {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 1800px;/*これが無いと表示されない*/
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);

  background-position: center top;
  background-repeat: no-repeat;
  z-index: 1;
}
@media screen and (max-width:1800px) {
.intro-img li {
  background-size:100% 100%;
  width: 100%;/*これが無いと表示されない*/
}
}
@media screen and (max-width:72em) {
.intro-img li {
background-position-x: 60%;
}
}
@media screen and (max-width:62em) {
/*.intro-img li {
  background-size:150% 100%;
background-position-x: 70%;
}*/
.intro-img li{
 background-size: contain;
}
.intro {
  background: #00b5e2 url("/purpose/images/intro_back_sp.png") top;
  background-size: 100%;
}
}

.intro-img li:nth-child(1) {
  background-image: url(/purpose/images/intro01.png); 
}
.intro-img li:nth-child(2) {
  background-image: url(/purpose/images/intro02.png); 
}
.intro-img li:nth-child(3) {
  background-image: url(/purpose/images/intro03.png); 
}
.intro-img li:nth-child(4) {
  background-image: url(/purpose/images/intro04.png); 
}
.intro-img li:nth-child(5) {
  background-image: url(/purpose/images/intro05.png); 
}
.intro-img li:nth-child(6) {
  background-image: url(/purpose/images/intro06.png); 
}
.intro-img li:nth-child(7) {
  background-image: url(/purpose/images/intro07.png); 
}
.intro-img li:nth-child(8) {
  background-image: url(/purpose/images/intro08.png);
}
.intro-img li:nth-child(9) {
  background-image: url(/purpose/images/intro09.png); 
}
.intro-img li:nth-child(10) {
  background-image: url(/purpose/images/intro10.png); 
}
/* intro-text
-------------------------------------------------- */
.intro-text {
  position: sticky;
  z-index: 2;
  margin: auto;
  padding: 9em 20px 12em;
  display: inline-block;
  transform: translateX(-100px);
  -webkit-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
}
.intro-text img {
  box-sizing: border-box;
  display: inline-block;
  height: auto;
  max-width: 100%;
}
.intro-text_text {
}
@media (max-width: 70em) {
.intro-text:lang(en),
.intro-text:lang(zh){
  width: 80%;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
}
}
@media (max-width: 52em) {
.intro-text {
  width: 80%;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
}
}
@media (max-width: 34em) {
.intro-text {
  padding: 7em 20px 10em;
  transform: translateX(-20px);
  -webkit-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
}
}
/* 中国語 */
.intro .m-box-type2{
margin-top: 3em;
text-align: left;
color: #002f6c;
}
@media (max-width: 34em) {
.intro .m-box-type2{
margin-top: 2em;
    padding: 20px 16px;
}
.intro .m-box-type2 .m-text{
font-size: 0.85em;
}
}
/* section
-------------------------------------------------- */
.contents .pad {
  margin: auto;
  padding: 80px 20px 200px;
  max-width: 1260px;
}
@media screen and (max-width:32em) {
contents .pad {
  padding: 60px 20px 160px;
}
}
section.contents._white-area,section.contents._light-blue_area,section.contents._blue-area,section.contents._gray-area  {
    clear: both;
    margin: auto;
    width: 100%;
    position: relative;
}
section.contents._white-area {
  background-color: rgba(255, 255, 255);
}
section.contents._light-blue_area {
  background-color: rgba(51, 196, 232);
}
section.contents._blue-area {
  background-color: rgba(0, 181, 226);
}
section.contents._gray-area {
  background: #F6F6F4;
}
section.contents._gray-area::before, section.contents._white-area::before, section.contents._blue-area::before, section.contents._light-blue_area::before {
  position: absolute;
  content: "";
  width: 120%;
  height: 180px;
  top: -80px;
  left: -10%;
  transform: rotate(-4deg);
  background-color: rgba(51, 196, 232);
}
@media screen and (max-width:32em) {
section.contents._gray-area::before, section.contents._white-area::before, section.contents._blue-area::before, section.contents._light-blue_area::before {
  height: 90px;
  top: -50px;
}
}
section.contents._blue-area::before {
  background-color: rgba(0, 181, 226);
}
section.contents._white-area::before {
  background-color: rgba(255, 255, 255);
}
section.contents._gray-area::before {
  background: #F6F6F4;
}
/* 見出し
-------------------------------------------------- */
.contents_title{
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
}
.contents_title._A h2 {
  position: relative;
  color: #002f6c;
  font-size: 3.2em;
  font-weight: 700;
  z-index: 5;
  margin-bottom: 50px;
  text-align: center;
}
@media screen and (max-width:32em) {
.contents_title._A h2 {
  font-size: 2.2em;
}
}
._light-blue_area .contents_title._A h2, ._blue-area .contents_title._A h2 {
  color: #fff;
}
.contents_title._B h2 {
  position: relative;
  color: #002f6c;
  font-size: 2.4em;
  text-align: center;
  font-weight: 700;
  margin: 10px auto 50px auto;
}
.contents_title._B h2 span._attach {
  font-size: 0.5em;
  display: block;
}
@media screen and (max-width:32em) {
.contents_title._B h2 {
  font-size: 2em;
}
}
.contents_title._C h2 {
  color: #002f6c;
  font-size: 2em;
  position: relative;
  text-align: center;
  margin: 10px auto 50px auto;
  font-weight: 700;
}
.contents_title._C h2 span {
  font-size: 0.5em;
  display: block;
}
.contents_title._B h2:before, .contents_title._C h2:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  background: #7fdaf0;
}
.contents_title._B h2:before {
  background: #4dcbeb;
}
/* 画像の背景に白ボカシを入れる*/
.m-media__media._white {
  position: relative;
}
.m-media__media._white:before {
  position: absolute;
  content: "";
  top: -100px;
  left: 0;
  --sample-color: 255 255 255;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgb(var(--sample-color)), rgba(var(--sample-color) / 0%));
  border-radius: 100%;
  filter: blur(30px);
  width: min(100%, 400px);
  z-index: 1;
}
.m-media__media._white img {
  position: relative;
  z-index: 200;
}
.contents, .l-content-area {
  margin: auto;
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
.contents:lang(ja) {
  font-weight: 600;
}
/* 企業理念
-------------------------------------------------- */
/*左と右を囲う全体のエリア*/
#wrapper {
  position: relative; /*position stickyの基点にするため relativeをかける*/
  display: flex; /*左エリア、右エリア横並び指定*/
  flex-wrap: wrap; /*ボックスの折り返し可*/
}
/*左エリア*/
#fixed-area {
  /*左固定記述*/
  position: -webkit-sticky; /*Safari用*/
  position: sticky;
  top: 30%;
  /*横半分50%　縦を100vhにする*/
  width: 40%;
  height: 100vh;
  padding-right: 5%;
}
/*右エリア*/
#container {
  /*横半分50%にする*/
  width: 55%;
}
/*768px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:768px) {
  #wrapper {
    display: block; /*display:flex;を解除*/
  }
  #fixed-area {
    position: relative !important; /*position stickyを解除*/
    width: 100%; /*横幅を100%にして1列に見せる*/
    height:auto; /*縦幅を100vh⇒40vh　※任意の高さに設定可能*/
	margin-bottom: 32px;
  }
  #container {
    width: 100%; /*横幅を100%にして1列に見せる*/
  }
}

/* 動画
-------------------------------------------------- */
.wrap {
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 56.25%;

}
.wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}