@charset "utf-8";


.container {width: 100%}


/* firtst-view */

.first-view {
  position: relative;
  margin: 0 auto 100px;
  display: block;
}

.logo {
  position: absolute;
  top: 40px;
  left: 112px;
  z-index: 100;
}

.logo > img {
  width: 140px;
}

.logo-sp {display:none}

.first-view {width: calc(100% - 140px);}

.first-view__img {margin: 0 auto;}

.first-view__img > img {
  width: 100%;
  line-height: 1;
} 

.first-view > h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  color: #fff;
  text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 3px #333;
  transform: translate(-50%, -50%);
  font-size: 32px;
  line-height: 1.7;
  text-align: center;
  -webkit-text-stroke: 1px #3d3d3d;
  text-stroke: 1px #3d3d3d;
}

.first-view__mh-title,
.first-view__sc-title,
.first-view__ph-title {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: var(--wht);
  font-weight: 600;
  text-align: center;
  text-shadow: 0 0 1px var(--sc-blue);
}

.first-view__mh-title > h1,
.first-view__sc-title > h1,
.first-view__ph-title > h1 {
  margin-bottom: 28px;
  font-size: clamp(3.2rem, 0.439rem + 3.25vw, 4.6rem);
}

.first-view__sc-title > h1 {
  margin-bottom: 0;
  line-height: 1.3;
}
.first-view__ph-title > h1 br {display: none;}

.first-view__mh-title > p {
  font-size: clamp(2.3rem, 0.483rem + 1.86vw, 3rem);
  line-height: 2;
}

.first-view__sc-title > p {font-size: 24px;}


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

  .first-view {width: 100%;}
  .first-view__mh-title,
  .first-view__sc-title,
  .first-view__ph-title {padding-top: 60px;}

}


/* /first-view */


.container__intro, .container__inner {
  margin: 0 auto 170px;
  width: 100%;
  max-width: 1200px;
}

.container__inner.mh {max-width: 1036px;}

.container__intro.sc, .container__inner.sc,
.container__intro.ph, .container__inner.ph {
  max-width: 1100px;
}

.container__intro.sc {position: relative;}

.container__intro.sc::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 27.454545%;
  padding-top: 95.689189%;
  display: block;
}

.container__intro.sc::after {
  content: '';
  position: absolute;
  top: 50px;
  right: 20px;
  width: 27.454545%;
  height: 500px;
  background: url(../img/solarcircuit/ill01.svg)no-repeat;
  background-size: contain;
  display: block;
}

.container__intro.mh {
  display: grid;
  grid-template-columns: 26% 48% 26%;
  grid-auto-rows: minmax(456px, auto);
  color: var(--gray);
}

.container__intro.sc > div h2,
.container__inner.sc > h2 {
  margin-bottom: 50px;
  font-size: clamp(3.5rem, 2.764rem + 1.53vw, 4.2rem);/* max42px */
  color: var(--sc-blue);
  line-height: 1.5;
}

.container__intro.ph {
  display: grid;
  grid-template-columns: 62% 37.090909%;
  place-content: start space-between;
}

.intro-txt__ph {
  color: var(--dgray);
  font-size: clamp(2rem, 1.579rem + 0.88vw, 2.4rem);/*max24px*/
  font-weight: 600;
  line-height: 2.2;
}

.container__intro.ph > div {
  display: grid;
  grid-template-rows: auto 168px;
  justify-items: center;
  row-gap: 20px;
  margin-top: -20px;
}

.container__intro.ph > div img {
  max-width: 376px;
}

.container__intro.ph > div p {
  color: var(--sc-green);
  font-size: 36px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.container__intro.ph > div p > span {
  display: block;
  color: var(--blk);
  font-size: 62px;
  font-weight: 600;
}

.container__intro > div picture img {
  max-width: 312px;
  width: 100%;
  border-radius: 10px;
}

.container__intro.mh > div:last-child {
  margin-top: 50px;
}

.intro-txt.mh {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-txt.mh > p {
  margin-top: -10px;
  max-width: 400px;
  font-size: clamp(1.9rem, 0.741rem + 0.93vw, 2.3rem);
  font-weight: 600;
  letter-spacing: 0.3rem;
  line-height: 2.2;
}
.intro-txt.mh > p:first-of-type {
  margin-bottom: 28px;
}

.intro-txt.sc > p {
  margin-bottom: 35px;
  font-size: 24px;
  font-weight: 600;
  color: var(--dgray);
  letter-spacing: 0.3rem;
  line-height: 1.9;
}

.intro-txt.sc > p:last-child {margin-bottom: 18px;}

.sc-exp {font-size: 16px;}

.container__inner.mh > h2,
.container__inner.more-sc > h2 {
  margin-bottom: 90px;
  color: var(--gray);
  font-size: 34px;
  text-align: center;
}

.container__inner.more-sc > h2 {color: var(--sc-green);}


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

  .first-view {padding-top: 60px;}
  .first-view__img {width: 100%;}

  .container__intro, .container__inner {margin: 0 auto 120px;}

  .container__inner.mh > h2,.container__inner.more-sc > h2 {
    margin-bottom: 58px;
    font-size: 31px;
  }
  
  .container__intro.mh {
    position: relative;
    margin-top: -140px;
    margin-bottom: 200px;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: auto;
    z-index: 10;
  }
  
  .container__intro.mh > div:first-of-type,
  .container__intro.mh > div:last-child {
    grid-column-start: 1;
    grid-column-end: 4;
    height: 144px;
    justify-self: end;
  }
  
  .container__intro.mh > div:first-of-type {
    grid-row-start: 1;
    grid-row-end: 2;
  }
  
  .container__intro.mh > div:last-child {
    margin-top: 40px;
    justify-self: start;
  }
 
  .container__intro.mh > div:first-of-type img,
  .container__intro.mh > div:last-child img {
    width: 214px;
    height: 214px;
  }
  
  .container__intro.mh > div:nth-child(2) {
    padding-top: 100px;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  
  .intro-txt.mh {
    margin: 0;
    align-items: flex-start;
  }
  
  .intro-txt.mh > p {
    margin-left: 100px;
    font-size: 20px;
  }
  
  .container__intro > div picture img {
    max-width: 312px;
    width: 100%;
    border-radius: 10px;
  }
  
    
  .container__intro.sc > div h2,
  .container__inner.sc > h2 {
    margin-bottom: 31px;
    font-size: 30px;
  }
  
  .intro-txt.sc > p {
    margin-bottom: 20px;
    font-size: 19px;
    line-height: 1.9;
  }

  .sc-exp {font-size: 14px;}
  
  .container__intro.sc::after {
    top: -15px;
    right: 8px;
    width: 24%;
  }  

}


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

  .first-view__ph-title > h1 br {display: inline;}

}


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

  .container__inner {margin: 0 auto 80px;}
  
  .first-view__mh-title > h1 {
    margin-bottom: 18px;
    line-height: 1.5;
  }
  
  .first-view__mh-title > p {
    font-size: 17px;
    letter-spacing: 0.05rem;
    line-height: 1.8;
  }
  
  .container__intro.mh {
    margin-top: -120px;
    margin-bottom: 100px;
  }
  
  .container__intro.mh > div:first-of-type,
  .container__intro.mh > div:last-child {
    height: 144px;
  }
 
  .container__intro.mh > div:first-of-type img,
  .container__intro.mh > div:last-child img {
    width: 144px;
    height: 144px;
  }
  
  .intro-txt.mh > p {
    margin-left: 18px;
    font-size: 17px;
  }
  
  .container__intro > div picture img {
    max-width: 312px;
    width: 100%;
    border-radius: 10px;
  }
  
  .container__inner.mh > h2,.container__inner.more-sc > h2 {
    margin-bottom: 58px;
    font-size: 24px;
  }
  
  .container__inner.mh > h2 {font-size: 26px;}
    
  .container__inner.more-sc > h2 {margin-bottom: 34px;}
  
  .container__intro.sc {margin-bottom: 300px;}

  .container__intro.sc::before {display: none;}
  
  .container__intro.sc::after {
    top: unset;
    right: unset;
    bottom: -208px;
    left: 50%;
    width: 60%;
    height: 171px;
    transform: translate(-50%, 0);
  }
  
  .container__intro.sc > div h2,
  .container__inner.sc > h2 {
    margin-bottom: 37px;
    font-size: 24px;
    line-height: 1.7;
  }
  
  .intro-txt.sc > p {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 2;
  }
  
  .intro-txt.sc > p:last-child {margin-bottom: 20px;}

}


/* model house start */

.mh-contents {
  display: grid;
  grid-template-columns: repeat(3, 312px);
  column-gap: 4.82625%;
  row-gap: 48px;
}

.mh-contents > div {
  max-width: 312px;
  color: var(--dgray);
}

.mh-contents > div > img {
  margin-bottom: 18px;
  width: 100%;
  max-width: 312px;
}

.mh-contents__txt >  h3 {
  margin-bottom: 10px;
  font-size: 21px;
  line-height: 1.4;
}

.mh-contents__txt > p {
  font-size: 16px;
  text-align: justify;
  font-feature-settings: "palt";
  line-height: 1.9;
}

.mh-contents__txt > p:nth-child(2) {
  margin-bottom: 6px;
}

.mh-bnr {
  margin-bottom: 60px !important;
  max-width: 850px;
}

/*----- BASIC / NEXT アクセスマップ -----*/

.sc-next-access-map {
  margin: 0 auto;
  padding: 0 0 40px;
  text-align: center;
}

.sc-next-access-map > h2 {
  font-size: 28px;
}

.sc-next-access-map p.info br {
  display: none;
}

.welcome {font-size: 20px;}
.welcome br {display: none;}

.sc-next-access-map > .info {font-size: 14px;}

.ggl-map {
  position: relative;
  margin: 20px auto 0px;
  padding-top: 40%;
  width: 80%;
  max-width: 850px;
  height: 0;
  overflow: hidden;
}

.ggl-map iframe,
.ggl-map object,.ggl-Map embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* model house end */


/* solar circuit start */

.sc-contents.problem {
  display: grid;
  grid-template-columns: repeat(3, 340px);
  column-gap: 40px;
  row-gap: 45px;
  margin-bottom: 260px;
}

.sc-contents.problem > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 30px;
  width: 100%;
  border: 4px solid #22ac38;
  border-radius: 22px;
}

.sc-contents.problem > div img {
  margin-bottom: 18px;
  width: 100%;
  max-width: 267px;
}

.problem__txt > h3 {
  margin-bottom: 10px;
  color: var(--sc-blue);
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.07rem;
}

.problem__txt >  p {
  font-size: 14px;
  letter-spacing: 0.07rem;
}

.sc-contents.answer {
  position: relative;
  width: 100%;
}

.sc-contents.answer::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 133px;
  height: 136px;
  background: url(../img/solarcircuit/arrow.svg)no-repeat;
  background-size: contain;
}

.sc-contents.answer div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-contents.answer div::before {
  content: "";
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: 75.60975%;
  background: #fcedd6;
  border-radius: 30px;
  z-index: -100;
}

.sc-contents.answer div > h3 {
  margin:22px 3.636363% 0 0;
  color: var(--sc-blue);
  font-size: 28px;
}

.sc-contents.answer div > img {
  width: 33.454545%;
  max-width: 368px;
}

.sc-contents.explain {
  margin-bottom: 170px;
  padding: 48px 0;
  background: #f1f4f8;
}

.sc-contents.explain > div > img {
  margin: 0 auto 21px;
  display: block;
  width: 27.545454%;
  max-width: 303px;
}

.exp-head,
.exp-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 108px;
  padding: 100px 0;
  width: 100%;
  background: url(../img/solarcircuit/sc02.jpg)no-repeat;
  background-size: cover;
  border-radius: 20px;
}

.exp-head > h3 {
  margin-right: 68px;
  color: var(--wht);
  font-size: 28px;
}

.exp-head > a img,
.exp-head > video {
  max-width: 530px;
  border-radius: 12px;
  filter: brightness(95%);
  transition: filter 0.4s;
}

.exp-head > a img:hover {
  filter: brightness(105%);
}

.exp-links {margin-bottom: 150px;}

.exp-links > h3 {
  margin-bottom: 68px;
  color: var(--sc-blue);
  font-size: 42px;
  text-align: center;
}

.exp-links > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 25px;
  place-content: center;
  margin: 0 auto;
  width: 90.909090%;
  max-width: 1000px;
}

.exp-links > ul li a {
  position: relative;
  display: grid;
  place-content: center;
  height: 71px;
  color: var(--sc-blue);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  border: 1px solid var(--sc-blue);
  background: var(--wht);
  transition: all 0.4s;
}

.exp-links > ul li a:hover {
  color: var(--wht);
  background: var(--sc-blue);
}

.exp-links > ul li a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  background: url(../img/solarcircuit/btn-arrow.svg)no-repeat;
  width: 14px;
  height: 8px;
  display: inline-block;
  filter: brightness(100%);
  transition: filter 0.4s;
}

.exp-links > ul li a:hover::before {
  filter: brightness(200%);
}

.exp-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: var(--sc-blue);
  background: #cbe1fc;
}

.exp-foot > div h3 {
  margin-bottom: 20px;
  font-size: 28px;
}

.exp-foot > div a {
  display: block;
  padding: 10px 0;
  width: 200px;
  color: var(--sc-blue);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background: var(--wht);
  transition: all 0.4s;
}

.exp-foot > div a:hover {
  color: var(--wht);
  background: var(--sc-blue);
}

.exp-foot > img {
  max-width: 368px;
}

.sc-interview {
  max-width: 100%;
  margin-bottom: 170px;
}

.sc-interview-inner {
  margin: 0 auto 40px;
  max-width: 1100px;
}

.sc-interview-inner > h2 {
  color: var(--sc-blue);
  font-size: 38px;
}

.swiper-container {position: relative;}

.swiper-slide > a {
  filter: brightness(92%);
  transition: all 0.4s;
}

.swiper-slide > a:hover {filter: brightness(105%);}
 
.swiper-slide > a p {
  padding: 20px 0 22px;
  width: 100%;
  color: var(--blk);
  font-size: clamp(1.3rem, 1.138rem + 0.69vw, 1.7rem);
  text-align: center;
  border-left: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  transition: all 0.4s;
}

.swiper-button-container {
  position: absolute;
  top: -70px !important;
  right: 200px;
  left: auto !important;
}

.swiper-button-prev > svg,
.swiper-button-next > svg {display: none}

.swiper-button-prev,
.swiper-button-next {
  width: 30px;
  height: 30px;
  left: 0 !important;
  right: 0 !important;
}

.swiper-button-next {margin-left: 30px;}

.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  margin: auto;
  width: 30px;
  height: 30px;
  z-index: 100;
}

.swiper-button-prev::after {background-image: url(../img/solarcircuit/prev-arrow.svg);}
.swiper-button-next::after {background-image: url(../img/solarcircuit/next-arrow.svg);}

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

  .sc-interview-inner {width: calc(100% - 140px);}

}


/* solar circuit end */



/* philosophy start */

.ph-content {
  color: var(--wht);
  font-weight: 600;
  line-height: 2;
  text-align: center;
  text-shadow: 1px 1px 1px var(--dgray);
}

.ph-content.ph-s,
.ph-content.ph-w {
  display: grid;
  place-content: center;
  margin-bottom: 20px;
  padding: 13.2% 40px;
  width: 100%;
  min-height: 398px;
  background: url(../img/philosophy/ph02.jpg)no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}
.ph-content.ph-s:last-child {
  margin-bottom: 0;
  padding: 12.45%;
  background: url(../img/philosophy/ph04.jpg)no-repeat;
}

.ph-content.ph-w {
  padding: 13.36% 0;
  width: 100%;
  min-height: 398px;
  background: url(../img/philosophy/ph03.jpg)no-repeat;
}

.ph-content > h2 {
  margin-bottom: 20px;
  font-size: clamp(2.8rem, 1.748rem + 2.19vw, 3.8rem);
  line-height: 1.5;
}
.ph-content > p {font-size: clamp(1.7rem, 1.384rem + 0.66vw, 2rem);}

.ph-works {
  margin: 0 auto 170px;
  width: 100%;
  max-width: 1000px;
}

.ph-works > h2 {
  margin-bottom: 60px;
  color: var(--sc-green);
  font-size: 34px;
  text-align: center;
}

.ph-works > div {
  display: grid;
  grid-template-columns: repeat(3, 31.3%);
  column-gap: 3.05%;
  row-gap: 30px;
  width: 100%;
}

.ph-works > div a {
  filter: brightness(95%);
  transition: all 0.4s;
}

.ph-works > div a:hover {
  filter: brightness(105%);
}

.ph-works > div a div figure img {
  max-width: 340px;
}

.ph-works > div a div figure figcaption {
  margin-top: 10px;
  color: var(--blk);
  font-size: 15px;
}

.ph-works__btn > a {
  display: block;
  margin: 50px auto 0;
  padding: 8px 0 10px;
  width: 245px;
  color: var(--blk);
  font-size: 14px;
  text-align: center;
  border: 1px solid #aaa;
  transition: all 0.4s;
}

.ph-works__btn > a:hover {
  color: var(--wht);
  background: var(--sc-green);
  border: 1px solid var(--sc-green);
}


/* philosophy end */

  


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

  /* .container__intro {
    width: calc(100% - 140px);
  } */

}


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

  .container__intro.mh, .container__inner.mh,
  .container__intro.sc, .container__inner.sc,
  .container__intro.ph, .container__inner.ph {
    max-width: calc(100% - 140px);
  }
  
}


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

  .container__intro.mh, .container__inner.mh,
  .container__intro.sc, .container__inner.sc,
  .container__intro.ph, .container__inner.ph {
    max-width: 90%;
  }
  
  .mh-contents {
    grid-template-columns: repeat(2, 312px);
    column-gap: 4.82625%;
    row-gap: 48px;
    place-content: center;
  }

  .mh-bnr, .ggl-map {width: 86%;}
  

  /* solar circuit start */

  .sc-contents.problem {
    grid-template-columns: repeat(2, 47.5%);
    column-gap: 5%;
    row-gap: 40px;
    place-content: center;
    margin-bottom: 160px;
  }

  .sc-contents.answer::before {
    top: -114px;
    width: 93.1px;
    height: 95.2px;
  }

  .sc-contents.answer div > h3 {
    margin: 50px 0 0;
    font-size: 25px;
  }
  
  .sc-contents.answer div > img {
    margin-top: 20px;
    width: 34%;
  }
  
  .sc-contents.explain {
    margin-bottom: 170px;
    padding: 24px 0 10px;
  }
  
  .sc-contents.explain > div > img {margin: 0 auto 16px;}
  
  .exp-head,
  .exp-foot {
    flex-direction: column;
    margin: 0 auto 78px;
    padding: 50px 0;
    background-position: center;
  }

  .exp-head > h3 {
    margin-right: 0;
    margin-bottom: 20px;
    font-size: 25px;
  }

  .exp-head > a img,
  .exp-head > video {max-width: 360px;}
  .exp-links {margin-bottom: 100px;}
  
  .exp-links > h3 {
    margin-bottom: 46px;
    font-size: 30px;
  }
  
  .exp-links > ul {
    grid-template-columns: repeat(2, 1fr); 
    gap: 25px;
  }
  
  .exp-links > ul li a {height: 74px;}
  
  .exp-foot > div {margin-bottom: 20px;}
  
  .exp-foot > div h3 {
    margin-bottom: 14px;
    font-size: 25px;
  }
  
  .exp-foot > img {max-width: 314px;}
  
  .sc-interview-inner > h2 {font-size: 30px;}
  
  .swiper-slide > a p {font-size: 14px;}
  
  .swiper-button-container {
    top: -65px !important;
    right: 150px !important;
  }

/* solarcircuit end */


/* philosophy start */

  .container__intro.ph {
    margin-bottom: 100px;
    max-width: 100%;
    grid-template-columns: none;
    grid-template-rows: auto;
    place-content: center;
  }

  .container__intro.ph > p,
  .container__intro.ph > div {
    grid-column-start: 1;
    grid-column-end: 3;
  }
  
  .container__intro.ph > p {font-size: 23px;}

  .container__intro.ph > div {
    margin-top: 55px;
    row-gap: 40px;
  }
  
  .container__intro.ph > div img {max-width: 318px;}
  .container__intro.ph > div p {font-size: 30px;}
  .container__intro.ph > div p > span {
    margin: 9px auto 14px;
    font-size: 52px;
    font-weight: 400;
    line-height: 1;
  }

  .ph-works {
    margin-bottom: 110px;
    width: 100%;
  }

  .ph-works > h2 {
    margin-bottom: 48px;
    font-size: 31px;
  }

}

@media screen and (max-width: 600px) {
    
  .ph-works > div {
    display: grid;
    grid-template-columns: repeat(2, 48%);
    column-gap: 4%;
    row-gap: 30px;
  }
    
}


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

  .first-view {margin-bottom: 68px;}
  .container__intro,.container__inner.sc {width: 85%;}
  .container__intro.ph {
    margin-bottom: 64px;
  }
  
  
/* modelhouse start */

  .mh-contents {
    display: grid;
    grid-template-columns: repeat(1, 312px);
    column-gap: 0;
    row-gap: 48px;
    place-content: center;
  }
  
  .mh-contents__txt >  h3 {
    margin-bottom: 10px;
    font-size: 19px;
    line-height: 1.4;
  }

  .mh-contents__txt > p {font-size: 15px;}
  
  .mh-bnr, .ggl-map {width: 312px;}
  .mh-bnr {margin-bottom: 40px !important;}
  .welcome {
     margin-bottom: 5px;
    font-size: 17px;
  }
  
  .info {font-size: 14px;}
  .welcome br, .sc-next-access-map p.info br {display: inline;}
  
  .ggl-map {padding-top: 84%;}
  

/* modelhouse end */  


/* solar circuit start */

  .sc-contents.problem {
    grid-template-columns: repeat(1, 100%);
    column-gap: 5%;
    row-gap: 10px;
    place-content: center;
    margin-bottom: 160px;
    border: 3px solid var(--sc-green);
    border-radius: 22px;    
  }
  
  .sc-contents.problem > div {
    border: none;
    border-bottom: 3px dashed var(--sc-green);
    border-radius: 0;
  }
  
  .sc-contents.problem > div:last-child {border: none;}
  
  .sc-contents.answer::before {width: 74.1px;}
  .sc-contents.answer div {
    flex-direction: column;
    margin-bottom: 130px;
  }
  .sc-contents.answer div::before {height: 92%;}

  .sc-contents.answer div > h3 {
    margin: 0 auto;
    width: 77%;
    font-size: 20px;
  }
  .sc-contents.answer div > img {
    margin: 20px auto 0;
    width: 75%;
  }
  
  .sc-contents.explain > div > img {width: 61%;}
  
  .sc-contents.explain {
    margin-bottom: 130px;
    padding: 38px 0 5px;
  }
  
  .exp-head {
    background: transparent;
    flex-direction: column;
    margin: 0 auto 68px;
    padding: 16px 0 0;
  }
  
  .exp-head > h3,.exp-head > video {
    margin-bottom: 28px;
    color: var(--sc-blue);
    font-size: 22px;
  }
  
  .exp-head > a img {border: 3px solid var(--sc-blue);}
  
  .exp-links > h3 {
    margin-bottom: 31px;
    font-size: 22px;
  }
  
  .exp-links > ul {
    grid-template-columns: repeat(1, 1fr); 
    gap: 10px;
    width: 100%;
  }
  
  .exp-foot {
    margin-top: 148px;
    padding: 70px 0 30px;
  }
  
  .exp-foot > div {margin: 0 0 50px 47px;}
  
  .exp-foot > div h3 {
    margin: -150px 0 20px;
    width: 320px;
    font-size: 22px;
  }
  
  .exp-foot > img {width: 252px;}
  
  .sc-interview {
    margin-top: -44px;
    margin-bottom: 120px;
  }
  
  .sc-interview-inner {width: 81%;}
  .sc-interview-inner > h2 {font-size: 22px;}
  
  .swiper-button-container {
    top: -60px !important;
    right: 100px !important;
    z-index: 1001;
  }

  .container__intro.ph > p {font-size: 18px;}
  .container__intro.ph > div img {max-width: 234px;}
  .container__intro.ph > div p {
    font-size: 24px;
    line-height: 1;
  }

  .container__intro.ph > div {
    margin-top: 62px;
    row-gap: 54px;
  }
  
  .ph-content.ph-s,
  .ph-content.ph-w {
    margin-bottom: 45px;
    padding: 0;
    width: 100%;
    min-height: 0;
    background: transparent;
  }

  .ph-content.ph-s:last-child {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
  }

  .ph-content.ph-w {
    padding: 0;
    width: 100%;
  }
  
  .ph-content > h2 {
    position: relative;
    padding-top: 52px;
    font-size: 23px;
    height: 140px;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  
  .ph-content:last-child > h2 {padding-top: 35px;}
  
  .ph-content > h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-image: url(../img/philosophy/ph02sp.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 330px;
    height: 140px;
    border-radius: 5px;
    z-index: -100;
  }
  
  .ph-content:nth-child(2) > h2::before {
    background-image: url(../img/philosophy/ph03sp.jpg);
  }
  
  .ph-content:nth-child(3) > h2::before {
    background-image: url(../img/philosophy/ph04sp.jpg);
  }
  
  .ph-content > p {
    font-size: 15px;
    color: var(--sc-green);
    text-shadow: none;
  }
  
  .ph-works > h2 {
    margin-bottom: 30px;
    font-size: 24px;
  }
  
  .ph-works > div {
    row-gap: 20px;
    margin: 0 auto;
    width: 100%;
  }

  .ph-works > div a div figure figcaption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1;
  }

}


/* more-sc start */

.more-sc {max-width: 855px;}

.more-sc__contents {
  display: grid;
  grid-template-columns: repeat(3, 27.25146%);
  column-gap: 9.12280701%;
}

.more-sc__contents > article {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--dgray);
}

.more-sc__contents > article::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -17%;
  background:  #aaa;
  height: 102%;
  width: 1px;
}

.more-sc__contents > article:nth-child(3)::before {display: none;}

.more-sc__contents > article div {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
  height: 85px;
}

.more-sc__contents > article div img {
  margin-right: 20px;
  max-width: 61px;
}

.more-sc__contents > article:nth-child(2) div img {max-width: 85px;}

.more-sc__contents > article div h3 {
  margin-bottom: 3px;
  font-size: 20px;
  line-height: 1.4;
}

.more-sc__contents > article p {
  height: 190px;
  font-size: 15px;
  font-weight: 600;
  text-align: justify;
}

.more-sc__contents > article a {
  padding: 5px 0;
  color: var(--sc-green);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--sc-green);
  border-radius: 20px;
  transition: all 0.4s;
}

.more-sc__contents > article a:hover {
  color: var(--wht);
  background: var(--sc-green);
}


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

  .more-sc {max-width: 90%;}
  
  .more-sc__contents {
    grid-template-columns: repeat(3, 200px);
    column-gap: 44px;
    place-content: center;
  }
  
  .more-sc__contents > article::before {right: -11.6%;}
  
  .more-sc__contents > article div img {
    margin-right: 16px;
    max-width: 48px;
  }
    
  .more-sc__contents > article:nth-child(2) div img {max-width: 68px;}
  .more-sc__contents > article p {font-size: 14px;}

}


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

  .more-sc__contents {
    grid-template-columns: repeat(1, 68%);
    column-gap: 0;
    row-gap: 44px;
    place-content: center;
  }
  
  .more-sc__contents > article::before {display: none;}
  
  .more-sc__contents > article div {
    align-items: flex-end;
    margin-bottom: 20px;
    height: 85px;
  }

  .more-sc__contents > article div h3 {margin-bottom: -2px;}

  .more-sc__contents > article p {
    margin-bottom: 20px;
    height: auto;
  }
  
  .more-sc__contents > article a {font-size: 15px;}

}


/* more-sc end */