@charset "utf-8";

:root {
  --main-font-size: clamp(12px, 3.5vw, 16px);
  --main-gutter: min(7vw,70px);
  --main-background: #fff;
  --main-color: #e000ee;
  --main-color-bk: #131313;
  --btn-padding: min(1.4vw, 8px) min(4vw, 20px);
  --btn-border: solid min(0.5vw, 2px) #fff;
  --btn-radisu: 50vw;
  --btn-color: #fff;
  --main-lh: 1.8;
  --menu-font-size: clamp(14px, 1.5vw, 18px);
  --menu-background: #f6ecf7;
  --common-radius: min(1.5vw, 10px);
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
  width: 100%;
  min-height: 100%;
  background-color: var(--main-background);
  color: var(--main-color-bk);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--main-font-size);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.15em;
  word-break: break-all;
}

a {
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
  color: var(--main-color);
  transition: filter 0.5s;
}

a:active,
a:hover,
.btn:active,
.btn:hover {
  filter: brightness(1.1);
}

a:visited {
  color: var(--main-color);
}

img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

#page-header h1,
h2,
h2 + p {
  color: var(--main-color);
  text-align: center;
}

#page-header h1,
h2 {
  margin-bottom: 5.5vw;
  position: relative;
  font-size: min(6vw, 30px);
}

#page-header h1::before,
h2::before {
  position: absolute;
  content: "";
  width: min(20vw, 72px);
  height: 1px;
  margin: auto;
  background-color: var(--main-color);
  bottom: -2.5vw;
  left: 0;
  right: 0;
}

h2 + p {
  font-size: min(4vw, 24px);
}

h2.white {
  color: #fff;
}

h2.white::before {
  background-color: #fff;
}

h3 {
  padding: min(5vw, 40px) 0;
  font-size: min(4vw, 24px);
}

li {
  list-style: none;
}

.sp {
  display: block;
}

.pc {
  display: none;
}

.spacer80-top {
  margin-top: min(10vw, 80px);
}

.bg-purple {
  background-color: #f6ecf7;
}

.white-frame {
  margin: min(40px) 0 min(20px);
  padding: min(5vw, 45px);
  background-color: #fff;
  border-radius: var(--common-radius)
}

.iframe-wrap {
  overflow: hidden;
  width: 100%;
  height: min(50vw, 450px);
  border-radius: var(--common-radius)
}

iframe {
  width: 100%;
  height: 100%;
}

.round {
  border-radius: min(1.667vw, 20px);
}

img.round {
  overflow: hidden;
  width: 100%;
  height: auto;
}

table {
  width: 100%;
}

td {
  display: block;
  width: 100%;
  padding-bottom: .5em;
}

tr td:first-of-type {
  padding-top: 1em;
  font-weight: 700;
  vertical-align: top;
}

tr td:last-of-type {
  padding-left: .5em;
}

form > p {
  padding-top: 1em;
}

label {
  font-weight: 700;
}

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: white;
  border: none;
  border-radius: 0;
  font: inherit;
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0.2em 0;
  padding: min(2vw, 6px) min(4vw, 12px);
  outline: none;
}

input,
textarea {
  width: 100%;
  border: solid 1px #b7b7b7;
  border-radius: min(1.4vw, 5px);
}

textarea {
  resize:vertical;
}

select {
  /* 初期化 */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  color: #333;
  font-size: 16px;
  width: 100%;
  height: 100%;
  padding: min(2vw, 6px) min(4vw, 12px);
}

.select {
  margin-top: 1em;
}

.select > p {
  position: relative;
  background: white;
  width: 100%;
  border-radius: min(1.4vw, 5px);
  z-index: 1;
}

.select > p::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-bottom: 2px solid #4b4b4b;
  border-right: 2px solid #4b4b4b;
  z-index: -1;
}

input[type="submit"] {
  display: block;
  min-width: 150px;
  margin: 0 auto;
  cursor: pointer;
  border: none;
  line-height: 2.6;
}

.required {
  padding-left: .2em;
  color: #d90048;
}

address {
  font-style: normal;
}

main#sub-wrap {
  padding-top : min(10vw, 80px) 
}

.content-inner {
  width: min(90%, 1000px);
  margin: 0 auto;
  padding: min(10vw, 80px) 0 min(8.333vw, 100px);
}

.shape, .shape svg {
  width: 100%;
  height: 100%;
  vertical-align: top;
}

input[type="submit"],
.btn,
.btn a {
  width: auto;
  height: auto;
  padding: 0.15em 0.5em;
  background-color: var(--main-color);
  border-radius: 50vw;
  color: #fff;
  font-weight: 700;
}

.btn-wrap {
  width: 100%;
  text-align: center;
}

.btn2 {
  position: relative;
  display: inline-block;
  margin-top: min(8vw, 60px);
  padding: 0.5em 4.6em;
  background-color: rgba(255,255,255,0);
  border: var(--btn-border);
  border-radius: var(--btn-radisu);
  color: var(--btn-color);
  transition: background-color .25s;
}

.btn2::after {
  position: absolute;
  content: "";
  width: min(1.5vw, 6px);
  height: min(2.5vw, 10px);
  margin: auto;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 32"><path fill="%23ffffff" d="M2.108 31.659l-1.768-1.768c-0.47-0.47-0.47-1.216 0-1.671l12.213-12.213-12.213-12.213c-0.454-0.47-0.454-1.216 0-1.687l1.768-1.768c0.47-0.454 1.216-0.454 1.687 0l14.808 14.824c0.47 0.47 0.47 1.216 0 1.671l-14.808 14.824c-0.47 0.47-1.216 0.47-1.671 0z"></path></svg>');
  background-repeat: no-repeat;
  top: 0;
  bottom: 0;
  right: min(5vw, 18px);
}

.btn2:visited {
  color: var(--btn-color);
}

.btn2:hover {
  background-color: rgba(255,255,255,0.15);
}

#header {
  position: fixed;
  width: 100%;
  background-color: var(--menu-background);
  font-weight: 500;
  top: 0;
  left: 0;
  z-index: 5;
}

#header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(100%,1200px);
  margin: 0 auto;
  padding: min(1.667vw, 20px) min(3vw, 30px);
}

#menu-list {
  width: 100%;
  font-size: var(--menu-font-size);
}

#menu-list ul {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 80%;
  padding-top: 20vw;
  background-color: var(--menu-background);
  top: 0;
  bottom: 0;
  right: -100vw;
  transition: all .25s;
}

#menu-list.open ul {
  right: 0;
}

#menu-list li {
  width: 90%;
}

#menu-list li a {
  padding: 3vw;
  border-top: solid 1px var(--main-color);
  text-align: center;
}

#menu-list li:last-child {
  margin-top: 5vw;
}

#menu-list li:first-child a,
#menu-list li:last-child a {
  border-top: none;
}

#nav-sp {
  position: relative;
  display: grid;
  align-content: center;
  place-items: center;
  width: 40px;
  height: 40px;
  transition: all .25s;
  z-index: 10;
  cursor: pointer;
}

#nav-sp:is(:focus,:focus-visible) {
  outline-offset: -2px
}

#nav-sp .line {
  position: relative;
  inline-size: 28px;
  block-size: 16px
}

#nav-sp .line span {
  position: absolute;
  display: block;
  inline-size: 100%;
  block-size: 2px;
  background: var(--main-color);
  transition: .5s
}

#nav-sp .line span:nth-of-type(1) {
  transform: rotate(0) translateZ(0)
}

#nav-sp .line span:nth-of-type(2) {
  transform: rotate(0) translate3d(0,6px,0)
}

#nav-sp .line span:nth-of-type(3) {
  transform: rotate(0) translate3d(0,12px,0)
}

#nav-sp.is-open .line span:nth-of-type(1) {
  transform: rotate(27deg) translate3d(3px,6px,0)
}

#nav-sp.is-open .line span:nth-of-type(2) {
  transform: rotate(0) translate3d(0,8px,0);
  opacity: 0
}

#nav-sp.is-open .line span:nth-of-type(3) {
  transform: rotate(-27deg) translate3d(-3px,6px,0)
}

.header-logo {
  position: relative;
  flex: none;
  width: min(33.625vw, 200px);
  height: min(3.75vw,22px);
  z-index: 1;
}

#top-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 160vw;
}

#top-hero::after {
  position: fixed;
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(52,0,58,0.05) 0%,rgba(52,0,58,0.4) 100%);
  top: 0;
  left: 0;
}

.top-img {
  position: fixed;
}

#top-main {
  position: fixed;
  width: min(90%, 1200px);
  margin: auto;
  color: #fff;
  text-shadow: 0 0 10px rgb(82 10 104 / 50%);
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  top: 20vw;
}

#top-catch-txt {
  margin-bottom: min(6vw, 40px);
  font-size: min(8vw, 42px);
  font-weight: 700;
  letter-spacing: 0.18em;
}

#top-point {
  display: flex;
  flex-wrap: wrap;
  margin-top: min(15vw, 50px);
  font-size: min(4.6vw, 24px);
  font-weight: 700;
}

#top-point li {
  position: relative;
  margin-right: min(4.346vw, 35px);
  padding-left: min(6.456vw, 52px);
}

#top-point li::before {
  position: absolute;
  content: "";
  width: min(4vw, 32px);
  height: min(4vw, 32px);
  margin: auto;
  border: solid 1px #fff;
  border-radius: 100%;
  top: 0;
  bottom: 0;
  left: 0;
}

#top-point li::after {
  position: absolute;
  content: "";
  width: min(3.58vw, 29px);
  height: min(2.476vw, 20px);
  margin: auto;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.83 19.95"><polygon fill="%23fff" points="26.71 0 10.54 16.17 1.54 10.77 0 13.35 11 19.95 28.83 2.12 26.71 0"></polygon></svg>');
  background-repeat: no-repeat;
  top: -0.993vw;
  bottom: 0;
  left: 1vw;
}

.scrolldown {
  position:absolute;
  bottom: 5vw;
  left: 50%;
  z-index: 1;
}

.scrolldown span {
  position: absolute;
  left: 10px;
  bottom: 0;
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  word-break: normal;
}

.scrolldown:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -1vw;
  width: min(2.5vw, 10px);
  height: min(2.5vw, 10px);
  border-radius: 50%;
  background:#eee;
  animation:
  circlemove 1.6s ease-in-out infinite,
  cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove {
  0%{bottom: 11vw;}
  100%{bottom: -1.2vw;}
}

@keyframes cirlemovehide {
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

.scrolldown:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(0.5vw, 2px);
  height: min(12vw, 50px);
  background:#eee;
}

a.scroll-btn {
  display: inline;
  position: absolute;
  width: auto;
  height: auto;
  padding: var(--btn-padding);
  background: linear-gradient(to bottom, rgba(153,0,197,0.6) 0%,rgba(58,0,103,0.7) 100%);
  border: var(--btn-border);
  border-radius: var(--btn-radisu);
  color: var(--btn-color);
  text-align: center;
  bottom: 17vw;
  left: 50%;
  right: -30%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  z-index: 1;
  cursor: pointer;
}

.scroll-btn:hover {
  filter: brightness(1.1);
}

#container {
  position: relative;
  z-index:1;
  background-color: var(--main-background);
  line-height: var(--main-lh);
}

.content-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: min(5.833vw, 70px) 0;
  border-bottom: solid 1px #f6ecf7;
}

.content-list li:first-child {
  padding-top: 0;
}

.content-list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.content-list li:nth-child(even) {
  flex-direction: row-reverse;
}

.content-list li > div {
  width: 100%;
}

#cono-system {
  position: relative;
  background: linear-gradient(30deg, rgba(224,0,238,1) 0%,rgba(202,145,203,1) 50%,rgba(252,183,200,1) 100%);
  color: #fff;
}

#cono-system .deco {
  position: absolute;
  display: block;
  width: min(38vw, 456px);
  height: min(37.167vw, 446px);
  top: -11.5vw;
  left: -7.5vw;
  opacity: 0.5;
}

#cono-system .content-inner {
  padding-bottom: 0;
}

#cono-system .content-inner > div {
  display: flex;
  flex-direction: column;
  gap: min(5vw, 100px);
  margin-top: 13vw;
}

.img-about-system {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

.img-about-system > img {
  position: relative;
}

.img-about-system > img:first-of-type {
  width: min(34vw, 341px);
  height: min(27vw, 269px);
}

.img-about-system > img:last-of-type {
  width: min(38vw, 366px);
  height: min(39vw, 377px);
}

.txt-about-system {
  padding-bottom: min(10vw, 80px);
}

#access .white-frame {
  display: flex;
  gap: 1em;
}

#access .white-frame p {
  font-weight: 700;
}

.icon_access {
  display: block;
  width: min(5vw, 23px);
  height: min(6vw, 29px);
}

.contact-form-wrap {
  width: min(100%, 580px);
  margin: 0 auto;
  padding-top: min(2vw, 10px);
}

footer {
  position: relative;
  padding: min(6vw, 70px);
  background-color: #a88eba;
  color: #fff;
}

footer a,
footer a:visited {
  color: #fff;
}

/*////////// PC //////////*/

@media screen and (min-width:750px) {

  h2 {
    margin-bottom: 60px;
  }

  h2::before {
    bottom: -30px;
  }

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

  td {
    display: table-cell;
    width: auto;
  }

  tr td:first-of-type {
    padding-left: 2em;
  }

  tr td:last-of-type {
    padding-top: 1em;
  }

  img.round {
    overflow: hidden;
    width: min(30vw, 360px);
    height: min(25vw, 300px);
  }

  #menu-list {
    display: block;
  }

  #menu-list ul {
    position: relative;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 40px;
    width: 100%;
    padding-top: 0;
    right: auto;
  }

  #menu-list li {
    width: auto;
  }
  
  #menu-list li a {
    padding: 0;
    border-top: none;
  }

  #menu-list li.btn a {
    padding: 0.15em 0.5em;
  }
  
  #menu-list li:last-child {
    margin-top: 0;
  }

  #nav-sp {
    display: none;
  }

  #top-hero {
    height: 100vh;
    min-height: 750px;
  }

  .top-img {
    position: fixed;
    width: auto;
    height: auto;
    top: 10%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    -webkit-transform: translate(-50%, -10%);
    transform: translate(-50%, -10%);
  }

  #top-main {
    top: 130px;
  }

  #top-point li::after {
    top: -8px;
    left: 8px;
  }

  .scrolldown {
    bottom: 26px;
  }

  .scrolldown:before {
    left: -4px;
  }

  @keyframes circlemove {
    0%{bottom:45px;}
    100%{bottom:-5px;}
  }
  
  @keyframes cirlemovehide {
    0%{opacity:0}
    50%{opacity:1;}
    80%{opacity:0.9;}
    100%{opacity:0;}
  }

  a.scroll-btn {
    right: auto;
    bottom: 76px;
  }

  .content-list li > div {
    width: min(48.583vw, 583px);
  }

  #cono-system .content-inner > div {
    flex-direction: row;
    margin-top: 0;
  }

  #cono-system .deco {
    top: -226px;
    left: -150px;
  }

  .img-about-system {
    justify-content: space-around;
    align-self: flex-end;
    gap: min(7.917vw, 95px);
  }

}

/*////////// タブレット //////////*/

@media (750px <= width <= 960px )  {

  #header-inner {
    flex-direction: column;
    gap: 2.4vw;
  }

  #menu-list ul {
    justify-content: center;
    gap: min(3vw, 30px);
  }

}