@charset "UTF-8";
/* CSS Document */

/*---------------------

page: index.html  


---------------------*/

/* top ///////////////////////// */

.top-slider {
  position: relative;
}

.logo-yg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.bottom-copy {
  position: absolute;
  top: 80%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  margin-bottom: 2rem;
}

.bottom-copy p {
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.logo-yg-size {
  width: 24rem;
}

/* ///////////////////////// top */

/* gallery-1 ///////////////////////// */

.gallery_1-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 70vh;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... top    top    ...... ...... ..." 90px
    "... ...... main   main   main   ...... ...... ..." 1fr
    / auto 20px 45px 1fr 1fr 45px 20px auto;
}

.section-title {
  grid-area: top;
}

.main-copy {
  grid-area: main;
}

/* ///////////////////////// gallery-1 */

/* gallery-2 ///////////////////////// */

.gallery_2-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 120vh;
  display: grid;
  grid-template:
    "... top    top    top    top    top    top    ..." 1fr
    "... bottom bottom bottom bottom bottom bottom ..." 1fr
    / auto 20px 45px 1fr 1fr 45px 20px auto;
}

.top-img {
  grid-area: top;
  background-image: url("../img/gallery-2/c-1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.img-text {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: var(--dark-clr);
  font-size: var(--primary-tittle-font-size-en);
}

.bottom-img {
  grid-area: bottom;
  background-image: url("../img/gallery-2/ts-1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* ///////////////////////// gallery-2 */

/* workflow ///////////////////////// */

.workflow-grid-container {
  width: 100%;
  background-color: var(--dark-clr);
  margin: 0 auto;
  /* min-height: 100vh; */
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... top    top    ...... ...... ..." 90px
    "... ...... main   main   main   main   ...... ..." 0.5fr
    "... ...... middle middle middle middle ...... ..." 5fr
    "... ...... ...... ...... ...... ...... ...... ..." 120px
    / auto 20px 45px 1fr 1fr 45px 20px auto;
}

.section-steps {
  grid-area: middle;
}

.link-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step-img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
/* 中央揃えにしたい場合はmargin0 autoも入れる */

.step-details {
  display: flex;
  justify-content: space-evenly;
  padding-top: 3.6rem;
}
/* ///////////////////////// workflow */

/* about ///////////////////////// */

.about-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background-image: url("../img/common/about-sp.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  color: var(--light-clr);
  grid-template:
    "... ...... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... top    top    ...... ...... ..." 146px
    "... ...... main   main   main   main   ...... ..." 1fr
    "... ...... bottom bottom ...... ...... ...... ..." 0.5fr
    "... ...... ...... ...... ...... ...... ...... ..." 30px
    / auto 20px 45px 1fr 1fr 45px 20px auto;
}

.about-details {
  grid-area: main;
}

.bottom-link {
  grid-area: bottom;
}

/* ///////////////////////// about */

/* plan-price ///////////////////////// */

.plan-price-grid-container {
  width: 100%;
  min-height: 120vh;
  background-color: var(--dark-clr);
  margin: 0 auto;
  /* min-height: 100vh; */
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... top    top    ...... ...... ..." 90px
    "... ...... main   main   main   main   ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ...... ..." 10px
    "... ...... middle middle middle middle ...... ..." 3fr
    / auto 20px 45px 1fr 1fr 45px 20px auto;
}

.plan-detail {
  grid-area: middle;
}
.plan-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.plan-card {
  width: 24rem;
  height: 8rem;
  display: flex;
  border: 2px solid #ffffff;
  border-radius: 4rem;
  margin: 1rem 0rem;
  padding: 2rem;
  justify-content: center;
  align-items: center;
}

.plan-card h2 {
  font-family: var(--sub-font-family-jp);
}
.button-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 2;
}
.location {
  position: relative;
}
.location ul {
  position: absolute;
  top: 10%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid white;
  padding-top: 7rem;
  width: 24rem;
  height: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  list-style: none;
  border-radius: 4rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.4s ease;
  z-index: 1;
}
li.border-radius_bottom {
  border-radius: 0 0 4rem 4rem;
}

.location img {
  cursor: pointer;
  width: 20%;
}

.plancard-location a,
.plancard-location a:visited {
  text-decoration: none;
  font-size: var(--small-font-size-en);
}

.location li {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* //////////////////////////// */

/* .location li:hover {
  background-color: rgba(29, 54, 67, 0.3);
} */

.location button:focus + ul,
.location button:active + ul {
  opacity: 1;
  pointer-events: all;
}

/* ///////////////////////// plan-price */

/*  join ///////////////////////// */

.join-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... top    top    ...... ...... ..." 90px
    "... ...... main   main   main   main   ...... ..." 1fr
    "... ...... bottom bottom bottom bottom ...... ..." 2fr
    "... ...... ...... ...... ...... ...... ...... ..." 30px
    / auto 20px 45px 1fr 1fr 45px 20px auto;
}

.bottom-img.join {
  background-image: url("../img/common/join-sp.jpg");
  padding-top: 4rem;
}

.main-copy.dark p {
  color: var(--dark-clr);
}

.explain-en span {
  font-family: var(--main-font-family-jp);
}
.main-copy.dark p:first-of-type {
  padding-top: 3rem;
}
.main-copy.dark p:last-of-type {
  padding-top: 2rem;
  margin-bottom: 4rem;
}

/* ///////////////////////// join */

/* footer ///////////////////////// */
.footer-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ...... ..." 240px
    "... ...... main   main   main   main   ...... ..." 1fr
    "... ...... bottom bottom bottom bottom ...... ..." 0.5fr
    "... ...... link   link   link   link   ...... ..." 0.5fr
    "... ...... ...... ...... ...... ...... ...... ..." 30px
    / auto 20px 45px 1fr 1fr 45px 20px auto;
}
.footer-link {
  grid-area: link;
}

.footer-detail {
  grid-area: bottom;
}
.middle-title-jp {
  font-family: var(--main-font-family-jp);
  font-size: var(--small-font-size-jp);
  color: var(--dark-clr);
}
.request {
  width: 100%;
  position: relative;
  height: 3rem;
  overflow: hidden;
  margin-bottom: 6rem;
}
/* hiddenでlabelのラインを消す */

.submit {
  position: absolute;
  width: 2rem;
  top: 50%;
  right: 0%;
}
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

.request input {
  width: 100%;
  height: 100%;
  color: #595f6e;
  border: none;
  outline: none;
}

.request label {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-bottom: 1px solid var(--dark-clr);
}

.request label::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -2px;
  height: 100%;
  width: 100%;
  border-bottom: 3px solid var(--strong-yellow-clr);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.nav-bar i {
  color: white;
}

/* pointer-eventでinput areaがignoreされずに入力ができる 
afterはlabel や pなどでしか使えないので、inputでは使えない*/

.request input:focus + .label-email .content-email,
.request input:valid + .label-email .content-email {
  transform: translateY(-150%);
  color: var(--strong-yellow-clr);
}

.request input:focus + .label-email::after,
.request input:valid + .label-email::after {
  transform: translateX(0%);
}

.footer-link li {
  padding-top: 1.5rem;
}

/* ///////////////////////// footer */

/*---------------------

page: gallery-1_1.html


---------------------*/
/* g1-1-top ///////////////////////// */

.g1-1-top-grid-container {
  font-size: 1rem;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background-image: url("../img/gallery-1/g1-top-sp.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... top    top    top    ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ......	...... center ...... ...... ..." 1fr
    "... ...... ...... bottom ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 20px
    / auto 20px 45px 1fr 45px 20px auto;
}

/* g1-1-7pictures ///////////////////////// */

.g1-1-7pic-grid-container {
  font-size: 1rem;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 60px
    "... first  first  first  first  first  ..." 1.5fr
    "... ......	...... ...... ...... ...... ..." 75px
    "... second second second second second ..." 1.5fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... third  third  third  third  third  ..." 0.8fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... fourth fourth fourth fourth fourth  ..." 1.5fr
    "... ......	...... ...... ...... ...... ..." 75px
    "... fifth  fifth  fifth  fifth  fifth  ..." 0.8fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... sixth  sixth  sixth  sixth  sixth  ..." 0.8fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... last   last   last   last   last   ..." 0.8fr
    "... ...... ...... bottom ...... ...... ..." 156px
    / auto 20px 45px 1fr 45px 20px auto;
}

.first {
  grid-area: first;
  margin: 0 auto;
}

.second {
  grid-area: second;
  margin: 0 auto;
}

.third {
  grid-area: third;
  margin: 0 auto;
}

.fourth {
  grid-area: fourth;
  margin: 0 auto;
}

.fifth {
  grid-area: fifth;
  margin: 0 auto;
}

.sixth {
  grid-area: sixth;
  margin: 0 auto;
}

.last {
  grid-area: last;
  margin: 0 auto;
}

.page-nr {
  grid-area: bottom;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.page-nr span {
  color: var(--strong-yellow-clr);
}

/*---------------------

page: gallery-1_2.html


---------------------*/

.g1-2-top-grid-container {
  font-size: 1rem;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background-image: url("../img/gallery-1/g1-2top.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... top    top    top    ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ......	...... center ...... ...... ..." 1fr
    "... ...... ...... bottom ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 20px
    / auto 20px 45px 1fr 45px 20px auto;
}

.g1-2-7pic-grid-container {
  font-size: 1rem;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 60px
    "... first  first  first  first  first  ..." 0.8fr
    "... ......	...... ...... ...... ...... ..." 75px
    "... second second second second second ..." 0.8fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... third  third  third  third  third  ..." 0.4fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... fourth fourth fourth fourth fourth ..." 0.8fr
    "... ......	...... ...... ...... ...... ..." 75px
    "... fifth  fifth  fifth  fifth  fifth  ..." 0.4fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... sixth  sixth  sixth  sixth  sixth  ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... last   last   last   last   last   ..." 0.8fr
    "... ...... ...... bottom ...... ...... ..." 156px
    / auto 20px 45px 1fr 45px 20px auto;
}

/*---------------------

page: gallery-1_3.html


---------------------*/

.g1-3-top-grid-container {
  font-size: 1rem;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background-image: url("../img/gallery-1/g1-3-top.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... top    top    top    ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ......	...... center ...... ...... ..." 1fr
    "... ...... ...... bottom ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 20px
    / auto 20px 45px 1fr 45px 20px auto;
}

.g1-3-7pic-grid-container {
  font-size: 1rem;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 60px
    "... first  first  first  first  first  ..." 0.8fr
    "... ......	...... ...... ...... ...... ..." 75px
    "... second second second second second ..." 0.8fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... third  third  third  third  third  ..." 0.4fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... fourth fourth fourth fourth fourth ..." 0.4fr
    "... ......	...... ...... ...... ...... ..." 75px
    "... fifth  fifth  fifth  fifth  fifth  ..." 0.8fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... sixth  sixth  sixth  sixth  sixth  ..." 0.4fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... last   last   last   last   last   ..." 0.4fr
    "... ...... ...... bottom ...... ...... ..." 156px
    / auto 20px 45px 1fr 45px 20px auto;
}

/*---------------------

page: gallery-2_1.html


---------------------*/

.g2-nav {
  padding: 8rem 3rem 0rem;
  font-family: var(--main-font-family-jp);
}

.nav-list {
  display: flex;
  justify-content: space-around;
}

.nav-list span {
  color: var(--strong-yellow-clr);
}

.g2-details {
  padding-top: 4rem;
}

.next-page {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.link-arrow {
  padding-top: 4.2rem;
}

.text-center {
  text-align: center;
}

/* .swiper-slide {
} */

/* .swiper-container {
  width: 100%;
  height: 50vh;
} */

.text-container {
  padding-right: 3rem;
  padding-left: 3rem;
}

.g2-details {
  padding-right: 4rem;
  padding-left: 4rem;
}

/*---------------------

page: workflow.html


---------------------*/

.workflow-page-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background-image: url("../img/workflow/workflow-top.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... top    top    top    ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ......	...... center ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 20px
    / auto 20px 45px 1fr 45px 20px auto;
}

.page-title {
  grid-area: center;
}

.workflow-step-grid-container {
  width: 100%;
  background-color: var(--dark-clr);
  margin: 0 auto;
  /* min-height: 100vh; */
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ...... ..." 30px
    "... ...... top    top    top    top    ...... ..." 400px
    "... ...... main   main   main   main   ...... ..." 0.8fr
    "... ...... qa     qa     qa     qa     ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ...... ..." 30px
    / auto 20px 45px 1fr 1fr 45px 20px auto;
}

.step {
  grid-area: top;
  padding-top: 10rem;
  margin-bottom: 10rem;
}

.step-details-section {
  grid-area: main;
}

.qa-section {
  grid-area: qa;
}

.step-info:first-of-type,
.qa-info:first-of-type {
  padding-top: 7.5rem;
}

.step-info,
.qa-info {
  padding-top: 5rem;
  margin-bottom: 7.5rem;
}

.detail-title {
  font-size: var(--general-font-size-jp);
  font-family: var(--sub-font-family-jp);
  font-weight: 500;
  margin-bottom: 2.5rem;
}

.line-yellow {
  width: 100%;
  border: 0.6px solid rgba(243, 227, 181, 0.5);
}

.line-white {
  width: 100%;
  border: 0.6px solid rgba(255, 255, 255, 0.5);
}

/*---------------------

　page: privacy.html  

---------------------*/

.privacy-grid-container {
  width: 100%;
  background-color: var(--dark-clr);
  margin: 0 auto;
  /* min-height: 100vh; */
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ...... ..." 30px
    "... ...... top    top    top    top    ...... ..." 300px
    "... ...... main   main   main   main   ...... ..." 0.8fr
    "... ...... ...... ...... ...... ...... ...... ..." 30px
    / auto 20px 45px 1fr 1fr 45px 20px auto;
}

/*---------------------

　page: plan-light.html  

---------------------*/
.pd-light-top-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background-image: url("../img/plan-detail/pd-light-top.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ......	...... center ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 20px
    / auto 20px 45px 1fr 45px 20px auto;
}

/*---------------------

　page: plan-standard.html  

---------------------*/

.pd-standard-top-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background-image: url("../img/plan-detail/pd-standard-top.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ......	...... center ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 20px
    / auto 20px 45px 1fr 45px 20px auto;
}

/*---------------------

　page: plan-premium.html  

---------------------*/

.pd-premium-top-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background-image: url("../img/plan-detail/pd-premium-top.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ......	...... center ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 20px
    / auto 20px 45px 1fr 45px 20px auto;
}

/*---------------------

　page: plan-studio.html  

---------------------*/

.pd-studio-top-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background-image: url("../img/plan-detail/pd-studio-top.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ......	...... center ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 20px
    / auto 20px 45px 1fr 45px 20px auto;
}

/*---------------------

　page: plan-online.html  

---------------------*/

.pd-online-top-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background-image: url("../img/plan-detail/pd-online-top.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ......	...... center ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 20px
    / auto 20px 45px 1fr 45px 20px auto;
}

.page-title {
  grid-area: center;
}

/*   main///////////////////////// */

.pd-main-grid-container {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 50px
    "... ...... top    top    top    ...... ..." 400px
    "... ...... ...... ...... ...... ...... ..." 40px
    "... ...... main   main   main   ...... ..." 2fr
    / auto 20px 45px 1fr 45px 20px auto;
}

.top-img-container {
  grid-area: top;
  margin: 0 auto;
}

.main-detail-container {
  grid-area: main;
}

.point-cards {
  display: flex;
  flex-wrap: wrap;
  padding-top: 3rem;
  margin-bottom: 6rem;
}

.point-card {
  width: 15rem;
  height: 3rem;
  display: flex;
  border: 1.5px solid var(--dark-clr);
  border-radius: 4rem;
  margin: 0 0.5rem 1rem;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  font-family: var(--sub-font-family-jp);
  font-size: var(--s-small-font-size-jp);
}

.point-card.long {
  width: 20rem;
}

.point-card.long-l {
  width: 23rem;
}
.point-card.long-ll {
  width: 25rem;
}

.point-card.short {
  width: 12rem;
}

.main-detail-container form {
  background: white;
  width: 85%;
  border-radius: 5px;
  padding-top: 4rem;
  margin: 0 auto;
}

.price-box,
.form-box {
  width: 100%;
  border: 1.5px solid #b6b4b4;
  border-radius: 0.5rem;
  background-color: var(--light-clr);
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  text-align: center;
}

.notice {
  font-family: var(--sub-font-family-jp);
  color: #b6b4b4;
  line-height: 2rem;
  margin-bottom: 3rem;
}

.price-box,
.form-box p {
  font-family: var(--main-font-family-jp);
  font-size: 1.8rem;
}

.form-element_radio {
  display: flex;
  justify-content: space-around;
  padding-top: 1rem;
  margin-bottom: 1rem;
}
.form-element {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.radio_r,
.radio_c {
  display: flex;
  align-items: center;
}

input,
textarea {
  border: 1px solid #d0d2e2;
  line-height: 2;
  padding: 5px;
  border-radius: 5px;
  color: var(--dark-clr);
  font-size: var(--small-font-size-jp);
}

textarea {
  resize: none;
}

input::placeholder,
textarea::placeholder {
  color: #c4c4c4;
  font-size: var(--s-small-font-size-jp);
}

.submit-button {
  width: 100%;
  padding: 0.5rem;
  color: white;
  background-color: var(--light-yellow-clr);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  border: none;
  font-size: var(--small-font-size-jp);
}

/* radio-button */

.radio-button {
  padding-left: 4rem;
}

.form-parts {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: solid 1px #999;
  font-size: 1.6rem;
  outline: none;
}

.form-parts__radio {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #ffffff;
  vertical-align: -3px;
  outline: none;
}

.form-parts__radio:checked {
  background-color: var(--light-yellow-clr);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--light-yellow-clr);
}

/* ////////radio-button */

.extra-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.extra-info p {
  padding-top: 1.6rem;
  margin-bottom: 1.6rem;
}

/*---------------------

　page: contact.html  

---------------------*/
.contact-top-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background-image: url("../img/contact/contact-top-sp.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ......	...... center ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 20px
    / auto 20px 45px 1fr 45px 20px auto;
}

.page-title {
  grid-area: center;
}

/*   main///////////////////////// */

.pd-light-main-grid-container {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 120px
    "... ...... top    top    top    ...... ..." 400px
    "... ...... ...... ...... ...... ...... ..." 20px
    "... ...... main   main   main   ...... ..." 2fr
    / auto 20px 45px 1fr 45px 20px auto;
}

.form-box {
  margin-top: 6rem;
}

/*---------------------

　page: about.html  sp

---------------------*/

/* top about :ta///////////////////////// */

.at-grid-container {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ......	...... center ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 20px
    / auto 20px 45px 1fr 45px 20px auto;
}

.section-about-logo {
  grid-area: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section-about-logo img {
  margin-bottom: 3rem;
}

/* about-main:am///////////////////////// */
.am-grid-container {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ...... ..." 130px
    "... ...... top    top    ...... ...... ...... ..." 60px
    "... ......	img    img    img    img    ...... ..." 0.3fr
    "... ......	center center center center ...... ..." 0.2fr
    "... ...... ...... ...... ...... ...... ...... ..." 100px
    "... ...... text   text   text   text   ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ...... ..." 110px
    "... ...... vision vision vision vision ...... ..." 0.2fr
    "... ...... vi-l   vi-l   vi-r   vi-r   ...... ..." 0.5fr
    "... ...... ...... ...... ...... ...... ...... ..." 130px
    / auto 20px 45px 1fr 1fr 45px 20px auto;
}

.top-title {
  grid-area: top;
}

.profile-section-img {
  grid-area: img;
}
.profile-section-text {
  grid-area: center;
}
.profile-detail {
  grid-area: text;
}
.vision-section {
  grid-area: vision;
  /* padding-top: 12rem; */
}

.vision-img-r {
  grid-area: vi-r;
  padding-top: 6rem;
}

.vision-img-l {
  grid-area: vi-l;
}

.profile-detail p:first-of-type {
  margin-bottom: 2rem;
}

.vision-section p:first-of-type {
  margin-bottom: 2.5rem;
}

.vision-section h2:last-of-type {
  margin-bottom: 8rem;
}

/* about-picture :ap///////////////////////// */

.ap-6pic-grid-container {
  font-size: 1rem;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template:
    "... ...... top    top    ...... ...... ..." 90px
    "... first  first  first  first  first  ..." 0.5fr
    "... ......	...... ...... ...... ...... ..." 75px
    "... second second second second second ..." 0.5fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... third  third  third  third  third  ..." 1.5fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... fourth fourth fourth fourth fourth  ..." 0.5fr
    "... ......	...... ...... ...... ...... ..." 75px
    "... fifth  fifth  fifth  fifth  fifth  ..." 1.5fr
    "... ...... ...... ...... ...... ...... ..." 75px
    "... sixth  sixth  sixth  sixth  sixth  ..." 0.5fr
    / auto 20px 45px 1fr 45px 20px auto;
}

.first {
  grid-area: first;
  margin: 0 auto;
}

.second {
  grid-area: second;
  margin: 0 auto;
}

.third {
  grid-area: third;
  margin: 0 auto;
}

.fourth {
  grid-area: fourth;
  margin: 0 auto;
}

.fifth {
  grid-area: fifth;
  margin: 0 auto;
}

.sixth {
  grid-area: sixth;
  margin: 0 auto;
}

.last {
  grid-area: last;
  margin: 0 auto;
}

/*---------------------

　page: pran-price.html  

---------------------*/

.pp-top-grid-container {
  width: 100%;
  min-height: 100vh;
  background-image: url("../img/plan-price/pp-top.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template:
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ......	...... center ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 1fr
    "... ...... ...... ...... ...... ...... ..." 30px
    "... ...... ...... ...... ...... ...... ..." 20px
    / auto 20px 45px 1fr 45px 20px auto;
}

.bottom-sub-copy {
  padding-top: 3rem;
}

.top-img-container {
  grid-area: top;
  margin: 0 auto;
}

.main-detail-container {
  grid-area: main;
}

.sub-copy-en {
  display: flex;
  justify-content: space-between;
}

/*   main///////////////////////// */

.pp-main-grid-container {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template:
    "... ...... link-l ...... ...... ...... ...... ...... ..." 130px
    "... ...... top    top    ...... ...... ...... ...... ..." 60px
    "... ......	loc    loc    loc    ...... ...... ...... ..." 1fr
    "... ...... loc-d  loc-d  loc-d  loc-d  ...... ...... ..." 0.5fr
    "... ...... ...... ...... ...... ...... ...... ...... ..." 80px
    "... ...... ...... ...... lp-i   lp-i   lp-i   ...... ..." 0.5fr
    "... ...... ...... ...... lp-d   lp-d   lp-d   ...... ..." 0.5fr
    "... ...... sp-i   sp-i   sp-i   ...... ...... ...... ..." 0.3fr
    "... ...... sp-d   sp-d   sp-d   ...... ...... ...... ..." 0.5fr
    "... ...... pp-i   pp-i   pp-i   pp-i   pp-i   ...... ..." 0.5fr
    "... ...... pp-d   pp-d   pp-d   pp-d   ...... ...... ..." 0.5fr
    "... ...... link-o ...... ...... ...... ...... ...... ..." 120px
    "... ...... top-o  top-o  ...... ...... ...... ...... ..." 50px
    "... ......	onl    onl    onl    ...... ...... ...... ..." 1fr
    "... ...... onl-d  onl-d  onl-d  onl-d  ...... ...... ..." 0.5fr
    "... ...... link-s ...... ...... ...... ...... ...... ..." 120px
    "... ...... top-s  top-s  ...... ...... ...... ...... ..." 50px
    "... ......	stu    stu    stu    stu    stu    ...... ..." 0.5fr
    "... ...... stu-d  stu-d  stu-d  stu-d  ...... ...... ..." 0.5fr
    / auto 20px 45px 0.2fr 0.6fr 0.2fr 45px 20px auto;
}

.location-topic-container {
  grid-area: loc;
}

.location-detail-container {
  grid-area: loc-d;
}

.lp-img-container {
  grid-area: lp-i;
}
.lp-detail-container {
  grid-area: lp-d;
}

.sp-img-container {
  grid-area: sp-i;
}
.sp-detail-container {
  grid-area: sp-d;
}

.pp-img-container {
  grid-area: pp-i;
}
.pp-detail-container {
  grid-area: pp-d;
}

.top-o {
  grid-area: top-o;
}

.online-topic-container {
  grid-area: onl;
}

.online-detail-container {
  grid-area: onl-d;
}

.top-s {
  grid-area: top-s;
}

.studio-topic-container {
  grid-area: stu;
}

.studio-detail-container {
  grid-area: stu-d;
}

.link-location {
  grid-area: link-l;
}

.link-online {
  grid-area: link-o;
}

.link-studio {
  grid-area: link-s;
}

/*   voice ///////////////////////// */

.voice-grid-container {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template:
    "... ...... link-v ...... ...... ...... ...... ..." 76px
    "... ...... top    top    ...... ...... ...... ..." 90px
    "... ...... ...... ...... ...... ...... ...... ..." 50px
    "... ......	...... ...... vi-1   vi-1   ...... ..." 0.5fr
    "... ...... vd-1   vd-1   vd-1   ...... ...... ..." 2.6fr
    "... ...... ...... ...... ...... ...... ...... ..." 120px
    "... ......	vi-2   vi-2   ...... ...... ...... ..." 0.5fr
    "... ...... ...... vd-2   vd-2   vd-2   ...... ..." 2.2fr
    "... ...... ...... ...... ...... ...... ...... ..." 120px
    "... ......	...... ...... vi-3   vi-3   ...... ..." 0.5fr
    "... ...... vd-3   vd-3   vd-3   ...... ...... ..." 3.8fr
    "... ...... ...... ...... ...... ...... ...... ..." 120px
    "... ......	vi-4   vi-4   ...... ...... ...... ..." 0.5fr
    "... ...... ...... vd-4   vd-4   vd-4   ...... ..." 3.3fr
    "... ...... ...... ...... ...... ...... ...... ..." 120px
    "... ......	...... ...... vi-5   vi-5   ...... ..." 0.5fr
    "... ...... vd-5   vd-5   vd-5   ...... ...... ..." 2.3fr
    / auto 20px 48px 1fr 1fr 45px 20px auto;
}

.voice-img-1 {
  grid-area: vi-1;
  z-index: 2;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.voice-detail-1 {
  grid-area: vd-1;
  position: relative;
}

.bg-container {
  background-color: var(--dark-clr);
  border-radius: 0.5rem;
  position: absolute;
  top: -5%;
  left: 0;
  padding: 5rem 2rem 5.5rem 4.5rem;
}

.bg-container-3 {
  background-color: var(--dark-clr);
  border-radius: 0.5rem;
  position: absolute;
  top: -5%;
  left: 0;
  padding: 5rem 2rem 5.5rem 4.5rem;
}

.voice-topic {
  margin-bottom: 2rem;
}

.voice-text {
  margin-bottom: 0.8rem;
}

.i-account {
  display: flex;
  justify-self: end;
  padding-right: 1rem;
}

.voice-img-2 {
  grid-area: vi-2;
  z-index: 2;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.voice-detail-2 {
  grid-area: vd-2;
  position: relative;
}

.voice-img-3 {
  grid-area: vi-3;
  z-index: 2;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.voice-detail-3 {
  grid-area: vd-3;
  position: relative;
}

.voice-img-4 {
  grid-area: vi-4;
  z-index: 2;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.voice-detail-4 {
  grid-area: vd-4;
  position: relative;
}

.voice-img-5 {
  grid-area: vi-5;
  z-index: 2;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.voice-detail-5 {
  grid-area: vd-5;
  position: relative;
}

.link-voice {
  grid-area: link-v;
}

/* @media screen and (min-width:768px) and (max-width:1024px){}
 

    */

@media screen and (min-width: 768px) {
  /* {
		grid-template: 
			"header"  150px
			"center" 1fr
			"left  "
			"right "
			"footer" 300px;
	} */

  /*---------------------

　page: index.html  

---------------------*/

  /*   top ///////////////////////// */

  .logo-yg-size {
    width: 50rem;
  }

  /*  gallery-1 ///////////////////////// */

  .gallery_1-grid-container {
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template:
      "... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... ...... ...... ...... top    ...... ...... ..." 90px
      "... ...... ...... ...... ...... ...... ...... ...... ...... ..." 0.5fr
      "... ...... ......  main   main  main   ...... ...... ...... ..." 2fr
      / auto 30px 50px 1fr 1fr 1fr 1fr 50px 30px auto;
  }

  /*  gallery-2 ///////////////////////// */

  .gallery_2-grid-container {
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template:
      "... top    top    top    top    bottom bottom bottom bottom ..." 100px
      "... top    top    top    top    bottom bottom bottom bottom ..." 90px
      "... top    top    top    top    bottom bottom bottom bottom ..." 150px
      "... top    top    top    top    bottom bottom bottom bottom ..." 2fr
      / auto 30px 50px 1fr 1fr 1fr 1fr 50px 30px auto;
  }

  /*  workflow ///////////////////////// */

  .workflow-grid-container {
    grid-template:
      "... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... ...... ...... top    top    ...... ...... ..." 90px
      "... ...... ...... ...... ...... ...... ...... ...... ...... ..." 50px
      "... ...... ...... main   main   main   ...... ...... ...... ..." 0.5fr
      "... ...... ...... middle middle middle middle ...... ...... ..." 2fr
      "... ...... ...... ...... ...... ...... ...... ...... ...... ..." 300px
      / auto 30px 50px 1fr 1fr 1fr 1fr 50px 30px auto;
  }
  .section-steps {
    position: relative;
  }

  .step-figure.display-pc {
    position: absolute;
    top: 50%;
    padding: 0 5rem;
    /* padding-top: 5rem; */
  }

  /*  about ///////////////////////// */
  .about-grid-container {
    min-height: 80vh;
    background-image: url("../img/common/about-pc.jpg");
    grid-template:
      "... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... ...... ...... top    top    ...... ...... ..." 90px
      "... ...... ...... ...... ...... ...... ...... ...... ...... ..." 50px
      "... ...... ...... main   main   ...... ...... ...... ...... ..." 2fr
      "... ...... ...... bottom bottom bottom bottom ...... ...... ..." 1fr
      / auto 30px 50px 1fr 1fr 1fr 1fr 50px 30px auto;
  }

  /*  plan-price ///////////////////////// */
  .plan-price-grid-container {
    grid-template:
      "... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... ...... ...... top    top    ...... ...... ..." 90px
      "... ...... ...... ...... ...... ...... ...... ...... ...... ..." 50px
      "... ...... ...... main   main   main   ...... ...... ...... ..." 0.5fr
      "... ...... ...... middle middle middle middle ...... ...... ..." 1fr
      "... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      / auto 30px 50px 1fr 1fr 1fr 1fr 50px 30px auto;
  }

  .plan-cards {
    flex-direction: row;
    justify-content: space-around;
    padding-top: 4rem;
  }

  .plan-card {
    width: 22rem;
    height: 7rem;
    border-radius: 4rem;
  }

  .location ul {
    width: 22rem;
  }

  .join-grid-container {
    grid-template:
      "... ...... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... ...... ...... ...... top    top    ...... ...... ..." 90px
      "... ...... ...... ...... ...... ...... ...... ...... ...... ...... ..." 70px
      "... ...... ......  main   main  ...... bottom bottom ...... ...... ..." 1fr
      / auto 30px 50px 1fr 1.3fr 80px 1fr 1fr 50px 30px auto;
  }

  .bottom-img.join {
    background-image: url("../img/common/join-pc.jpg");
  }

  /*  footer ///////////////////////// */
  .footer-grid-container {
    grid-template:
      "... ...... ...... ...... ...... ...... ...... ...... ...... ...... ..." 240px
      "... ...... ......  main   main  ...... ...... ...... ...... ...... ..." 2fr
      "... ...... ...... bottom bottom link   link   link   ...... ...... ..." 1fr
      / auto 30px 50px 1fr 0.5fr 1fr 1fr 1fr 50px 30px auto;
  }

  .footer-link ul {
    display: flex;
    justify-content: flex-end;
  }

  .footer-link li {
    padding-left: 2rem;
    font-size: var(--small-font-size-en);
  }

  /*---------------------

　page: gallery-1_1.html  


---------------------*/

  .g1-1-top-grid-container {
    background-image: url("../img/gallery-1/g1-1-top-pc.jpg");
  }

  .g1-1-7pic-grid-container {
    grid-template:
      "... ...... ...... ...... ...... ...... ..." 130px
      "... first  first  first  first  first  ..." 0.8fr
      "... ......	...... ...... ...... ...... ..." 130px
      "... second second second second second ..." 1.5fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... third  third  third  third  third  ..." 1.5fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... fourth fourth fourth fourth fourth  ..." 1.5fr
      "... ......	...... ...... ...... ...... ..." 130px
      "... fifth  fifth  fifth  fifth  fifth  ..." 1.5fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... sixth  sixth  sixth  sixth  sixth  ..." 0.8fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... last   last   last   last   last   ..." 0.8fr
      "... ...... ...... bottom ...... ...... ..." 200px
      / auto 30px 50px 1fr 50px 30px auto;
  }

  .g1-2-top-grid-container {
    background-image: url("../img/gallery-1/g1-2top-pc.jpg");
  }

  .g1-2-7pic-grid-container {
    grid-template:
      "... ...... ...... ...... ...... ...... ..." 130px
      "... first  first  first  first  first  ..." 1.5fr
      "... ......	...... ...... ...... ...... ..." 130px
      "... second second second second second ..." 0.8fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... third  third  third  third  third  ..." 0.8fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... fourth fourth fourth fourth fourth  ..." 1.5fr
      "... ......	...... ...... ...... ...... ..." 130px
      "... fifth  fifth  fifth  fifth  fifth  ..." 0.8fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... sixth  sixth  sixth  sixth  sixth  ..." 1.5fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... last   last   last   last   last   ..." 0.8fr
      "... ...... ...... bottom ...... ...... ..." 200px
      / auto 30px 50px 1fr 50px 30px auto;
  }

  .g1-3-top-grid-container {
    background-image: url("../img/gallery-1/g1-3-top-pc.jpg");
  }

  .g1-3-7pic-grid-container {
    grid-template:
      "... ...... ...... ...... ...... ...... ..." 130px
      "... first  first  first  first  first  ..." 1.5fr
      "... ......	...... ...... ...... ...... ..." 130px
      "... second second second second second ..." 1.5fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... third  third  third  third  third  ..." 0.8fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... fourth fourth fourth fourth fourth  ..." 0.8fr
      "... ......	...... ...... ...... ...... ..." 130px
      "... fifth  fifth  fifth  fifth  fifth  ..." 1.5fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... sixth  sixth  sixth  sixth  sixth  ..." 0.8fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... last   last   last   last   last   ..." 1.5fr
      "... ...... ...... bottom ...... ...... ..." 200px
      / auto 30px 50px 1fr 50px 30px auto;
  }

  .page-nr {
    justify-content: space-evenly;
  }

  /*---------------------

page: gallery-2_1.html


---------------------*/

  .g2-nav {
    padding: 10rem 10rem 0rem;
    font-family: var(--main-font-family-jp);
  }

  .nav-list {
    justify-content: space-evenly;
  }

  h2.text-left,
  p.text-left {
    text-align: left;
  }

  .text-container {
    padding: 0rem 20rem 0rem;
  }

  .g2-details p {
    margin-bottom: 5rem;
  }

  /*---------------------

　page: workflow.html  

---------------------*/

  .workflow-page-grid-container {
    background-image: url("../img/workflow/workflow-top-pc.jpg");
    grid-template:
      "... ...... ...... ...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... center ...... ...... ...... ...... ..." 1fr
      "... ...... ...... ...... ...... ...... ...... ...... ..." 1fr
      / auto 30px 50px 1fr 0.5fr 1fr 50px 30px auto;
  }

  .workflow-step-grid-container {
    grid-template:
      "... ...... ...... top    ...... ...... ...... ..." 400px
      "... ...... ...... img-s1 main   ...... ...... ..." 1fr
      "... ...... ...... img-s2 main   ...... ...... ..." 1fr
      "... ...... ...... qa     img-q1 ...... ...... ..." 1fr
      "... ...... ...... qa     img-q2 ...... ...... ..." 1fr
      / auto 30px 50px 1fr 1fr 50px 30px auto;
  }
  .step-details-section {
    padding-left: 4rem;
  }

  .qa-section {
    grid-area: qa;
    padding-right: 4rem;
  }

  .step-img-container-top {
    grid-area: img-s1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step-img-1,
  .step-img-2,
  .qa-img-1,
  .qa-img-2 {
    width: 80%;
  }
  .step-img-container-bottom {
    grid-area: img-s2;
  }

  .qa-img-container-top {
    grid-area: img-q1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .qa-img-container-bottom {
    grid-area: img-q2;
    display: flex;
    flex-direction: row-reverse;
    align-items: self-start;
  }

  /*---------------------

　page: privacy.html  

---------------------*/

  .privacy-grid-container {
    width: 100%;
    background-color: var(--dark-clr);
    margin: 0 auto;
    /* min-height: 100vh; */
    display: grid;
    grid-template:
      "... ...... ...... ...... top    ...... ...... ...... ...... ..." 300px
      "... ...... ...... ...... main   ...... ...... ...... ...... ..." 1fr
      "... ...... ...... ...... main   ...... ...... ...... ...... ..." 1fr
      / auto 30px 50px 0.2fr 1fr 0.2fr 50px 30px auto;
  }

  /*---------------------

　page: about.html  

---------------------*/

  .at-grid-container {
    grid-template:
      "... ...... ...... ...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... ...... center ...... ...... ...... ..." 1fr
      "... ...... ...... ...... ...... ...... ...... ...... ..." 1fr
      / auto 30px 50px 0.3fr 1fr 0.3fr 50px 30px auto;
  }

  .section-about-logo {
    flex-direction: row;
    justify-content: space-around;
  }
  .am-grid-container {
    grid-template:
      "... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... top    top    img    ...... ...... ..." 50px
      "... ...... ...... center center img    ...... ...... ..." 0.3fr
      "... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... text   text   ...... ...... ...... ..." 1fr
      "... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... vision vision ...... ...... ...... ..." 0.3fr
      "... ...... ...... vi-l   ...... vi-r   ...... ...... ..." 0.5fr
      "... ...... ...... ...... ...... ...... ...... ...... ..." 300px
      / auto 30px 50px 1fr 0.2fr 1fr 50px 30px auto;
  }

  .profile-detail {
    padding-right: 4rem;
  }

  .vision-img-r {
    padding-top: 20rem;
  }

  .ap-6pic-grid-container {
    grid-template:
      "... ...... ...... top    ...... ...... ..." 130px
      "... first  first  first  first  first  ..." 0.5fr
      "... ......	...... ...... ...... ...... ..." 130px
      "... second second second second second ..." 0.5fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... third  third  third  third  third  ..." 1.5fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... fourth fourth fourth fourth fourth  ..." 0.5fr
      "... ......	...... ...... ...... ...... ..." 130px
      "... fifth  fifth  fifth  fifth  fifth  ..." 1.5fr
      "... ...... ...... ...... ...... ...... ..." 130px
      "... sixth  sixth  sixth  sixth  sixth  ..." 0.5fr
      / auto 30px 50px 1fr 50px 30px auto;
  }

  /*---------------------

　page: plan-price.html  

---------------------*/
  .pp-top-grid-container {
    background-image: url("../img/plan-price/pp-top-pc.jpg");
    grid-template:
      "... ...... ...... ...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... center ...... ...... ...... ...... ..." 1fr
      "... ...... ...... ...... ...... ...... ...... ...... ..." 1fr
      / auto 30px 50px 1fr 1fr 1fr 50px 30px auto;
  }

  .pp-main-grid-container {
    grid-template:
      "... ...... ...... link-l ...... ...... ...... ...... ..." 50px
      "... ...... ...... loc    ...... top    ...... ...... ..." 50px
      "... ...... ...... loc    ...... loc-d  ...... ...... ..." 1fr
      "... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... ...... ...... lp-i   ...... ...... ..." 0.8fr
      "... ...... ...... sp-i   ...... lp-d   ...... ...... ..." 0.8fr
      "... ...... ...... sp-d   ...... ...... ...... ...... ..." 0.3fr
      "... ...... ...... ...... pp-i   pp-i   pp-i   pp-i   ..." 0.5fr
      "... ...... ...... ...... pp-d   pp-d   ...... ...... ..." 0.3fr
      "... ...... ...... link-o ...... ...... ...... ...... ..." 150px
      "... ...... ...... onl    ...... top-o  ...... ...... ..." 50px
      "... ...... ...... onl    ...... onl-d  ...... ...... ..." 1fr
      "... ...... ...... link-s ...... ...... ...... ...... ..." 150px
      "... ...... ...... top-s  ...... stu    ...... ...... ..." 50px
      "... ...... ...... stu-d  ...... stu    ...... ...... ..." 1fr
      "... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      / auto 30px 50px 1fr 0.2fr 1fr 50px 30px auto;
  }
  .title-bottom-pc {
    padding-top: 5rem;
  }

  .sp-img-container {
    align-self: end;
  }

  .voice-grid-container {
    grid-template:
      "... ...... ...... ...... link-v ...... ...... ...... ...... ...... ..." 50px
      "... ...... ...... ...... top    ...... vi-1   vi-1   ...... ...... ..." 0.5fr
      "... ...... ...... ...... ...... vd-1   vd-1   ...... ...... ...... ..." 2fr
      "... ...... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... vi-2   vi-2   ...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... ...... vd-2   vd-2   ...... ...... ...... ...... ..." 2fr
      "... ...... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... ...... ...... ...... vi-3   vi-3   ...... ...... ..." 1fr
      "... ...... ...... ...... ...... vd-3   vd-3   ...... ...... ...... ..." 3fr
      "... ...... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... vi-4   vi-4   ...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... ...... vd-4   vd-4   ...... ...... ...... ...... ..." 2.5fr
      "... ...... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... ...... ...... ...... vi-5   vi-5   ...... ...... ..." 1fr
      "... ...... ...... ...... ...... vd-5   vd-5   ...... ...... ...... ..." 2fr
      / auto 30px 50px 0.1fr 1fr 0.2fr 1fr 0.1fr 50px 30px auto;
  }

  .voice-img-1,
  .voice-img-3,
  .voice-img-5 {
    justify-self: end;
  }

  .voice-grid-container img {
    width: 310px;
    height: 310px;
  }

  .bg-container,
  .bg-container-3 {
    padding: 5rem;
  }

  .voice-topic {
    padding-top: 6rem;

    margin-bottom: 4rem;
  }
  p.voice-topic {
    font-size: var(--page-tittle-font-size-jp);
  }
  .i-account {
    justify-content: flex-end;
  }

  .i-account-4 {
    text-align: right;
  }
  /*---------------------

　page: plan-light.html  

---------------------*/

  .pd-light-top-grid-container {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    background-image: url("../img/plan-detail/pd-light-top-pc.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    grid-template:
      "... ......	...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... center ...... ...... ...... ..." 1fr
      / auto 30px 50px 1fr 1fr 50px 30px auto;
  }

  /*---------------------

　page: plan-standard.html  

---------------------*/

  .pd-standard-top-grid-container {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    background-image: url("../img/plan-detail/pd-standard-top-pc.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    grid-template:
      "... ......	...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... center ...... ...... ...... ..." 1fr
      / auto 30px 50px 1fr 1fr 50px 30px auto;
  }

  /*---------------------

　page: plan-premium.html  

---------------------*/

  .pd-premium-top-grid-container {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    background-image: url("../img/plan-detail/pd-premium-top-pc.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    grid-template:
      "... ......	...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... center ...... ...... ...... ..." 1fr
      / auto 30px 50px 1fr 1fr 50px 30px auto;
  }

  /*---------------------

　page: plan-studio.html  

---------------------*/

  .pd-studio-top-grid-container {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    background-image: url("../img/plan-detail/pd-studio-top-pc.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    grid-template:
      "... ......	...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... center ...... ...... ...... ..." 1fr
      / auto 30px 50px 1fr 1fr 50px 30px auto;
  }

  /*---------------------

　page: plan-online.html  

---------------------*/

  .pd-online-top-grid-container {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    background-image: url("../img/plan-detail/pd-online-top-pc.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    grid-template:
      "... ......	...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... center ...... ...... ...... ..." 1fr
      / auto 30px 50px 1fr 1fr 50px 30px auto;
  }

  /*   main///////////////////////// */

  .pd-main-grid-container {
    min-height: 100vh;
    grid-template:
      "... ......	...... ...... ...... ...... ...... ...... ..." 50px
      "... ......	...... top    ...... main   ...... ...... ..." 1fr
      "... ...... ...... top    ...... main   ...... ...... ..." 1fr
      / auto 30px 50px 1fr 3rem 1fr 50px 30px auto;
  }

  .main-detail-container form {
    margin: 0;
  }

  .extra-info {
    padding-top: 5rem;
  }

  /*---------------------

　page: contact.html  

---------------------*/

  .contact-top-grid-container {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    background-image: url("../img/contact/contact-top-pc.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    grid-template:
      "... ......	...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... center ...... ...... ...... ..." 1fr
      / auto 30px 50px 1fr 1fr 50px 30px auto;
  }

  .form-element_radio {
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (min-width: 1024px) {
  .voice-grid-container {
    grid-template:
      "... ...... ...... ...... link-v ...... ...... ...... ...... ...... ..." 50px
      "... ...... ...... ...... top    ...... vi-1   vi-1   ...... ...... ..." 1fr
      "... ...... ...... ...... ...... vd-1   vd-1   ...... ...... ...... ..." 1.5fr
      "... ...... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... vi-2   vi-2   ...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... ...... vd-2   vd-2   ...... ...... ...... ...... ..." 1.5fr
      "... ...... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... ...... ...... ...... vi-3   vi-3   ...... ...... ..." 1fr
      "... ...... ...... ...... ...... vd-3   vd-3   ...... ...... ...... ..." 2fr
      "... ...... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... vi-4   vi-4   ...... ...... ...... ...... ...... ..." 1fr
      "... ...... ...... ...... vd-4   vd-4   ...... ...... ...... ...... ..." 1.5fr
      "... ...... ...... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... ...... ...... ...... vi-5   vi-5   ...... ...... ..." 1fr
      "... ...... ...... ...... ...... vd-5   vd-5   ...... ...... ...... ..." 1.5fr
      / auto 30px 50px 0.1fr 1fr 0.2fr 1fr 0.1fr 50px 30px auto;
  }
  .am-grid-container {
    grid-template:
      "... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... top    top    img    ...... ...... ..." 50px
      "... ...... ...... center center img    ...... ...... ..." 0.3fr
      "... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... text   text   ...... ...... ...... ..." 0.5fr
      "... ...... ...... ...... ...... ...... ...... ...... ..." 100px
      "... ...... ...... vision vision ...... ...... ...... ..." 0.3fr
      "... ...... ...... vi-l   ...... vi-r   ...... ...... ..." 0.5fr
      "... ...... ...... ...... ...... ...... ...... ...... ..." 300px
      / auto 30px 50px 1fr 0.2fr 1fr 50px 30px auto;
  }
}

@media screen and (min-width: 942px) {
  .text-container {
    padding: 0rem 30rem 0rem;
  }
}