/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */


/* ----------------------------------------------------------
Style for PCs
---------------------------------------------------------- */
@media screen and (min-width: 1025px) {

  /* Toptitle */
  .toptitle {
    width:100%;
    height: auto;
    display: block;
    text-align: center;
    font-size: clamp(1.5rem, 1rem + 1.5vw, 2.4rem);
    font-weight: 700;
    color:var(--color-1st);
  margin-bottom:0.25em;
    background-image: url(../img/company/img-charactor.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 150px;
    padding-top:155px;
  }

  /* Philosophy */
.philosophylist {
  width:100%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin:0 auto;
}
.philosophylist li {
  width:29.33333333%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding:3em 2em;
  border-radius: 20px;
  background-color: var(--color-f8);
  margin:0 2% 4%!important;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}
.philosophylist li h3 {
  font-size: clamp(1.5rem, 1rem + 2vw, 10rem);
  font-weight: 700;
  color:var(--color-black);
  line-height: 1em;
  text-align: center;
  margin-bottom:0.3em;
}
.philosophylist li h4 {
  font-size: clamp(1rem, 0.75rem + 0.4vw, 1.2rem);
  font-weight: 400;
  color:var(--color-1st);
  line-height: 1em;
  text-align: center;
  margin-bottom:0.5em;
}
.philosophylist li p {
  font-size: clamp(0.8rem, 0rem + 1vw, 1.1rem);
  color:var(--color-black);
  text-align: center;
  margin-bottom:0em;
}

/* CEOimage */
.ceoimage {
  width:100%;
  height: auto;
  display: block;
  border-radius: 30px;
}

/* Concept text */
.conceptmm {
  width:100%;
  height: auto;
  display: block;
  background-color: var(--color-black);
  background-image: url(../img/company/img-concept.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.ccm_cov {
  width:100%;
  height: auto;
  display: block;
  background: #009938;
background: linear-gradient(90deg, rgba(0, 153, 56, 0.7) 0%, rgba(0, 85, 196, 0.7) 100%);
}
.ccm_border01 {
  background-image: url(../img/company/border_t-company.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
.ccm_border02 {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding:10em 5%;
  background-image: url(../img/company/border-chara01.webp);
  background-repeat: no-repeat;
  background-position: 0 100.1%;
  background-size: 100% auto;
}
.conceptmm h2 {
  font-size: clamp(1.5rem, 1rem + 2vw, 10rem);
  color:var(--color-white);
  text-shadow: 0px 2px 10px rgba(0,0,0,0.5);
}
.concepttxt {
  font-size: clamp(1rem, 0.75rem + 0.4vw, 1.2rem);
  font-weight: 700;
  color:var(--color-white);
  text-shadow: 0px 2px 10px rgba(0,0,0,0.5);
  line-height: 4em;
  text-align: center;
  margin:0;
}

/* particular */
.particularline {
  width:100%;
  height: auto;
  display: flex;
  justify-content: space-between;
}
.particularline li {
  flex: 1;
  margin:0 2%;
  list-style: none!important;
  padding:2em 2em 2em 2em;
  border-radius: 40px;
  box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}
.particularline li .pl_img {
  width:70%;
  height: auto;
  display: block;
  margin:0 auto;
}
.particularline li .pl_cc {
  width:100%;
  height: auto;
  display: block;
  padding:1em 0em 1em 0em;
  margin:0 auto;
}
.particularline li .pl_cc p {
  margin:0;
}

.company-img-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto 80px;
}

.company-img-col {
  width: 46%;
  margin: 0 2%;
}

.company-img-col img {
  border-radius: 20px;
}

}

/* ----------------------------------------------------------
Style for iPad Pro
---------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {

  /* Philosophy */
.philosophylist {
  width:100%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin:0 auto;
}
.philosophylist li {
  width:29.33333333%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding:2em 1em;
  border-radius: 20px;
  background-color: var(--color-f8);
  margin:0 2% 4%!important;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}
.philosophylist li h3 {
  font-size: clamp(1.5rem, 1rem + 2vw, 10rem);
  font-weight: 700;
  color:var(--color-black);
  line-height: 1em;
  text-align: center;
  margin-bottom:0.3em;
}
.philosophylist li h4 {
  font-size: clamp(1rem, 0.75rem + 0.4vw, 1.2rem);
  font-weight: 400;
  color:var(--color-1st);
  line-height: 1em;
  text-align: center;
  margin-bottom:0.5em;
}
.philosophylist li p {
  font-size: clamp(0.8rem, 0rem + 1vw, 1.1rem);
  color:var(--color-black);
  text-align: center;
  margin-bottom:0em;
}

/* CEOimage */
.ceoimage {
  width:100%;
  height: auto;
  display: block;
  border-radius: 30px;
}

/* Concept text */
.conceptmm {
  width:100%;
  height: auto;
  display: block;
  background-color: var(--color-black);
  background-image: url(../img/company/img-concept.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.ccm_cov {
  width:100%;
  height: auto;
  display: block;
  background: #009938;
background: linear-gradient(90deg, rgba(0, 153, 56, 0.7) 0%, rgba(0, 85, 196, 0.7) 100%);
}
.ccm_border01 {
  background-image: url(../img/company/border_t-company.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
.ccm_border02 {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding:10em 5%;
  background-image: url(../img/company/border-chara01.webp);
  background-repeat: no-repeat;
  background-position: 0 100.1%;
  background-size: 100% auto;
}
.conceptmm h2 {
  font-size: clamp(1.5rem, 1rem + 2vw, 10rem);
  color:var(--color-white);
  text-shadow: 0px 2px 10px rgba(0,0,0,0.5);
}
.concepttxt {
  font-size: clamp(1rem, 0.75rem + 0.4vw, 1.2rem);
  font-weight: 700;
  color:var(--color-white);
  text-shadow: 0px 2px 10px rgba(0,0,0,0.5);
  line-height: 4em;
  text-align: center;
  margin:0;
}

/* particular */
.particularline {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
.particularline li {
  width:100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin:0 0 30px;
  list-style: none!important;
  padding:2em 2em 2em 2em;
  border-radius: 40px;
  box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}
.particularline li .pl_img {
  width:30%;
  height: auto;
  display: block;
  margin:0 auto;
}
.particularline li .pl_cc {
  width:65%;
  height: auto;
  display: block;
  padding:1em 0em 1em 0em;
  margin:0 auto;
}
.particularline li .pl_cc p {
  margin:0;
}

.company-img-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto 80px;
}

.company-img-col {
  width: 46%;
  margin: 0 2%;
}

.company-img-col img {
  border-radius: 20px;
}

}


/* ----------------------------------------------------------
Style for Smartphone
---------------------------------------------------------- */
@media screen and (max-width: 768px) {

  /* Philosophy */
  .philosophylist {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin:0 auto 50px;
}
.philosophylist li {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding:2em 1em;
  border-radius: 10px;
  background-color: var(--color-f8);
  margin:0 0 4%!important;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
}
.philosophylist li h3 {
  font-size: clamp(1.5rem, 1rem + 2vw, 10rem);
  font-weight: 700;
  color:var(--color-black);
  line-height: 1em;
  text-align: center;
  margin-bottom:0.3em;
}
.philosophylist li h4 {
  font-size: clamp(1rem, 0.75rem + 0.4vw, 1.2rem);
  font-weight: 400;
  color:var(--color-1st);
  line-height: 1em;
  text-align: center;
  margin-bottom:0.5em;
}
.philosophylist li p {
  font-size: clamp(0.8rem, 0rem + 1vw, 1.1rem);
  color:var(--color-black);
  text-align: center;
  margin-bottom:0em;
}

/* CEOimage */
.ceoimage {
  width:100%;
  height: auto;
  display: block;
  border-radius: 30px;
}


/* Concept text */
.conceptmm {
  width:100%;
  height: auto;
  display: block;
  background-color: var(--color-black);
  background-image: url(../img/company/img-concept.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.ccm_cov {
  width:100%;
  height: auto;
  display: block;
  background: #009938;
background: linear-gradient(90deg, rgba(0, 153, 56, 0.7) 0%, rgba(0, 85, 196, 0.7) 100%);
}
.ccm_border01 {
  background-image: url(../img/company/border_t-company.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
.ccm_border02 {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding:10em 5%;
  background-image: url(../img/company/border-chara01.webp);
  background-repeat: no-repeat;
  background-position: 0 100.1%;
  background-size: 100% auto;
}
.conceptmm h2 {
  font-size: 24px;
  color:var(--color-white);
  text-shadow: 0px 2px 10px rgba(0,0,0,0.5);
}
.concepttxt {
  font-size: 16px;
  font-weight: 700;
  color:var(--color-white);
  text-shadow: 0px 2px 10px rgba(0,0,0,0.5);
  line-height: 3em;
  text-align: center;
  margin:0;
}

/* particular */
.particularline {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
.particularline li {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin:0 0 30px;
  list-style: none!important;
  padding:2em 2em 2em 2em;
  border-radius: 40px;
  box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}
.particularline li .pl_img {
  width:50%;
  height: auto;
  display: block;
  margin:0 auto;
}
.particularline li .pl_cc {
  width:100%;
  height: auto;
  display: block;
  padding:0.5em 0em 1em 0em;
  margin:0 auto;
}
.particularline li .pl_cc p {
  margin:0;
}

.company-img-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto 80px;
}

.company-img-col {
  width: 100%;
  margin: 0 0 4%;
}

.company-img-col img {
  border-radius: 10px;
}

}