@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap');


.promise{
  height: 700px;
  position: relative;
  margin-bottom: 50px;
  overflow: hidden;
}

.promise:after{
  content: "";
  background: url(../img/philosophy/05.png) center center no-repeat;
  -webkit-filter: blur(3px);
  filter: blur(3px);
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 700px;
}

.promise .inner{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  z-index: 1;
  padding: 0 4%;
}

.promise .text2 {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  padding: 0 150px;
}
.promise ol {
  width: 100%;
  margin: 50px auto 0;
  /*counter-reset:list;*/
  counter-reset: number 0;
}
.promise ol li {
  width: 100%;
  margin: 0 auto 10px;
  padding: 5px 10px;
  text-align: left;
  /*border-bottom: dotted 1px #ccc;*/
  position:relative;
}
.promise ol li:nth-child(5) {
  margin-top: 23px;
}
.promise ol li:last-child {
  margin-top: 37px;
}
.promise ol li:before{
  /*counter-increment: list;
  content: counter(list);*/
  counter-increment: number 1;
  content: "0"counter(number);
  position: absolute;
  left: 0px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-family: 'Crimson Text', serif;
  font-weight: 200;
  font-style: italic;
  text-align: center;
  color: #fff;
  /*background: #cab7ca;*/
  border: 1px solid #e0dde2;
  border-radius: 50%;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.promise ol li .txt {
  padding-left: 50px;
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  .promise {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 700px;
    margin: 10px auto 50px;
    overflow: visible;
    margin-bottom: 30%;
  }
  .promise:after{
    height: 110%;
    vertical-align: top;
}


.promise .inner {
    top: 55%;
}

  .promise .text2 {
    position: relative;
    display: block;
    width: 100%;
    top: auto;
    left: auto;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
    /*background: -moz-radial-gradient(rgba(255, 255, 255, 0.8) 20%, rgba(196, 205, 206, 0.5) 70%);
    background: -webkit-radial-gradient(rgba(255, 255, 255, 0.8) 20%, rgba(196, 205, 206, 0.5) 70%);
    background: radial-gradient(rgba(255, 255, 255, 0.8) 20%, rgba(196, 205, 206, 0.5) 70%);*/
    margin: 0 auto 0;
    padding: 20px 0;
  }
  .promise ol {
    display: block;
    width: 100%;
    margin: 20px auto 0;
  }
  .promise ol li {
    width: 100%;
    margin: 0 auto 20px -20px;
    padding: 5px 0;
  }
  .promise ol li .txt {
    display: block;
    font-size: 100%;
    text-align: left;
  padding-left: 60px;
  }
}

#philosophy {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto 100px;
}
#philosophy .message {
  width: 60%;
  margin: auto;
}

.box-1 ul li .tit span {
  font-family: 'Noto Serif JP', 'Times New Roman', YuMincho, 'Hiragino Mincho ProN', serif;
  font-weight: 500;
  font-size: 14px;
  padding-left: 5px;
}

.copy-min {
  display: block;
  font-family: 'Noto Serif JP', 'Times New Roman', YuMincho, 'Hiragino Mincho ProN', serif;
  font-weight: 500;
  font-size: 40px;
  margin: 50px auto 0;
  text-align: center;
}
.title-en {
  color: #fff;
  margin-bottom: 30px;
  text-align: center;
}
.title-en span{
  border-bottom: 1px solid #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.5;  
}

#pages-mv{
  margin-bottom: 80px;
}

.catch{
  color: #fff;
  font-size: 50px;
  font-size: 5rem;
  line-height: 1.4;
  /*font-family: ten-mincho, serif;*/
  font-family: 'Shippori Mincho', serif;
  font-weight: lighter;
  text-align: center;
  padding: 0;
}

.title-jp {
  display: block;
  font-family: 'Noto Serif JP', 'Times New Roman', '������', YuMincho, '�q���M�m���� ProN W3', 'Hiragino Mincho ProN', serif;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text{
  color: #fff;
  text-align: center;
}

.mb20{
  margin-bottom: 20px;
}

.head{
  width: 100%;
  margin: 30px auto;
  text-align: center;
  /*font-size: 50px;
  font-size: 5.0rem;
  font-weight: 200;
  font-family: 'Noto Serif JP', 'Times New Roman', YuMincho, 'Hiragino Mincho ProN', serif;
  letter-spacing: 0.07em;*/
}
.head img {
  width: 100%;
}

.vision{
  height: 380px;
  position: relative;
  margin-bottom: 50px;
  overflow: hidden;
}

.vision:after{
  content: "";
  background: url(../img/philosophy/01.png) bottom no-repeat;
  -webkit-filter: blur(3px);
  filter: blur(3px);
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 380px;
}

.vision .inner{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  z-index: 1;
  padding: 0 5%;
}

.vision .catch{
  /*-webkit-text-stroke: 1px #a69bb7;*/
}

.mission{
  height: 480px;
  position: relative;
  margin-bottom: 50px;
  overflow: hidden;
}

.mission:after{
  content: "";
  background: url(../img/philosophy/04.png) bottom no-repeat;
  -webkit-filter: blur(3px);
  filter: blur(3px);
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 480px;
}

.mission .inner{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  z-index: 1;
  padding: 0 5%;
}

.mission .catch{
  /*-webkit-text-stroke: 1px #a9b4b7;*/
}

.value{
  height: 700px;
  position: relative;
  margin-bottom: 50px;
  overflow: hidden;
}

.value:after{
  content: "";
  background: url(../img/philosophy/02.png) center center no-repeat;
  -webkit-filter: blur(3px);
  filter: blur(3px);
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 700px;
}

.value .inner{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  z-index: 1;
  padding: 0 5%;
}

.value .catch{
  /*-webkit-text-stroke: 1px #b2c9dc;*/
  
  font-size: 30px;
  font-size: 3rem;
  padding: 20px 0 10px 0;
}

.is-pc{
  display: block;
}
.is-sp{
  display: none;
}

@media screen and (max-width: 990px) {
.catch {
    font-size: 3rem;
}
}
@media screen and (max-width: 768px) {

#pages-mv {
    margin-bottom: 40px;
}

.is-pc{
  display: none;
}
.is-sp{
  display: block;
}

.is-sp img{
  object-fit: cover;
}

#philosophy .message {
  width: 80%;
  margin: auto;
}
.head{
  font-size: 2.5rem;
}

.vision {
  height: 270px;
  margin-bottom: 30px;
  }
.mission {
  height: 200px;
  margin-bottom: 30px;
  }
.value {
  height: 600px;
  margin-bottom: 30px;
  }

.title-en span{
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;  
}

.vision .text{
  margin-top: 15px;
}

.vision:after,
.mission:after,
.value:after{
/*background: none;*/
  background-position: bottom;
}

.vision .imgWrap,
.mission .imgWrap,
.value .imgWrap{
  position: relative;
  overflow: hidden;
}

.vision .imgWrap img,
.mission .imgWrap img,
.value .imgWrap img{
  -webkit-filter: blur(3px);
  filter: blur(3px);  
}

.vision .imgWrap .title-en,
.mission .imgWrap .title-en,
.value .imgWrap .title-en{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.vision .catch,
.mission .catch,
.value .catch{
  -webkit-text-stroke: 1px transparent;
}

.text{
  padding: 0 20px;
  text-align: left;
}

.catch {
    color: #fff;
    font-size: 2.3rem;
    margin-bottom: 10px;
}

.mission .catch {
    margin-bottom: 10px;
}
.value .catch{
    font-size: 2.0rem;
  text-align: left;
}

}

@media screen and (max-width: 400px){

}


/* 250171 add */
.value {
  height: 1000px;
}
.value:after {
  height: 1000px;
}
.value .catch.title-ja {
  margin-top: 0px;
  padding: 0;
  font-size: 5rem;
  font-family: 'Shippori Mincho', serif;
}
@media screen and (max-width: 990px) {
  .value .catch.title-ja {
    font-size: 3rem;
  }
}
@media screen and (max-width: 768px){
  .value {
    height: 850px;
  }
  .value:after {
    height: 850px;
  }
  .title-en {
    margin-bottom: 10px !important;
  }
  .value .catch.title-ja {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    font-size: 2.3rem;
  }
  .sp-no {
    display: none;
  }
}