@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


/* reset */

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Fix mobile Safari increase font-size on landscape mode */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
    cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu, summary {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-inline-size: 100%;
    max-block-size: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
    -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
    -webkit-appearance: revert;
    appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
    all: revert;
    box-sizing: border-box;
}

/* reset default text opacity of input placeholder */
::placeholder {
    color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
    display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
    all: revert;
    box-sizing: border-box;
}

/* Remove details summary webkit styles */
::-webkit-details-marker {
    display: none;
}

/* common */
:root {
    --padding: 80px;
    --base-color: #f3f2f2;
    --primary-color: #f450f7;
    --blue:#52a0ff;
    --purple:#a38dff;
    --navy:#013b76;
    --darkblue:#036cc5;
    --lightpink:#ffc1fa;
    --lightblue:#bdd6ff;
    --lightpurple:#d9ceff;
    --text-color: #1a1c1c;
    --darkredgray:#2f3131;
    --mediumgray:#454747;
    --lightgray:#e2e3e3;
    --darkpurple:#16055d;
}

html{
  scroll-behavior: smooth;
}
  
body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  background:var(--purple);
  color: var(--text-color);
  font-size:16px;
  overflow-x: hidden;
  position:relative;
}


@media screen and (max-width: 768px) {
  body {
    font-size:14px;
  }
}
  
a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

img {
  object-fit: cover;
}

main{
  width:100%;
}

section{
  width:100%;
  border-top: 4px solid white;
}

section:first-child{
  margin-top:-100px;
}

.inner{
  width:1000px;
  max-width:90%;
  padding:100px 0 160px 0;
  margin:0 auto;
}

@media screen and (max-width: 768px) {
  .inner{
    padding:100px 0;
  }
}


/*  button */

.button {
  overflow:hidden;
  text-transform: none;
  margin: 0;
  padding: 0;
  max-width:320px;
  width:100%;
  color: white;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, var(--blue), var(--navy));
  cursor: pointer;
  font-size:2em;
  font-weight: bold;
  height: 80px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  padding-bottom: 4px;
  position: relative;
  z-index: 1;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  position:relative;
  box-shadow:2px 2px 8px var(--darkpurple);
  border: 2px solid var(--blue);
  
  &.shiny:after{
    position:absolute;
    top:-200%;
    left:-150%;
    content:"";
    height:500%;
    width:70px;
    background:linear-gradient(90deg, rgba(255,255,255,0),rgba(255,255,255,0.6) 40%,rgba(255,255,255,0),rgba(255,255,255,0.6),rgba(255,255,255,0));
    transform: rotate(60deg);
    animation:3s shine infinite linear;
  }
}


@media screen and (max-width: 1050px) {
  .button{
    height:70px;
    padding-top:0;
    max-width:300px;
  }
}

@keyframes shine{
  0%{
    left:-100%;
  }
  80%{
    left:150%;
  }
  100%{
    left:150%;
  }
}

.button:hover{
  text-decoration:none;
  background-image: linear-gradient(to bottom, var(--blue), var(--darkblue));
}

/* header */

header{
  width:1200px;
  max-width:100%;
  margin:0 auto 60px auto;
  position:relative;
}

header div.copy-area{
  position:relative;
  z-index:1;
  width:100%;
  height:705px;
  margin:0 auto;
  padding:40px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
}

img.overlay{
  position: absolute;
  top: 0;
  width: calc(100% + 40px);
  height:387px;
  opacity: .5;
  left: 0;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
}

header div.target{
  width:100%;
  height:90px;
  background:white;
  padding:0;
}

p.call{
  width:1000px;
  max-width:100%;
  color:var(--navy);
  font-weight:600;
  padding:20px 60px;
}

img.top-img{
  position:absolute;
  top:0;
  right:0;
  width:590px;
  margin-top:-135px;
  animation: shakeAnimation 2s ease-in-out infinite; /* アニメーション */
}

@keyframes shakeAnimation {
  0% {
    transform: translateY(0); /* 初期位置 */
  }
  50% {
    transform: translateY(-5px); /* 上方向に5px移動 */
  }
  100% {
    transform: translateY(0); /* 元の位置に戻る */
  }
}

.copy-text{
  position:relative;
}

.copy-text span{
  font-size:2em;
  font-weight:800;
  color:var(--navy);
  background:white;
  padding:0 15px;
  margin:0 10px;
}

img.copy{
  width:650px;
  max-width:100%;
  margin:28px 0 40px 0;
  filter: drop-shadow(4px 4px 20px var(--darkpurple));
}

header div.logo-area{
  width: 100%;
  max-width: 90%;
  z-index: 10;
  position: absolute;
  bottom:140px;
  left: 40px;
}

p.sub span{
  color:white;
  font-size:1.5em;
  font-weight:600;
}

p.sub{
  margin-bottom:20px;
}

img.logo{
  filter: drop-shadow(2px 2px 20px var(--primary-color))
}

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

  header div.target{
    height:70px;
  }

  p.call{
    font-size:0.8em;
  }

  header div.copy-area{
    height:auto;
    padding-bottom:330px;
  }

  img.overlay{
    height:310px;
  }

  img.top-img{
    width:50%;
    margin-top:-12%;
  }

  .copy-text span{
    font-size:1.5em;
  }

  img.copy{
    width:500px;
  }

  header div.logo-area{
    bottom:190px;
  }

}

.sp{
  display:none;
}

@media screen and (max-width: 768px) {
  header div.target{
    background:var(--navy);
    position:relative;
    z-index:10;
    height:55px;
  }

  p.call{
    color:white;
    padding:10px 20px;
  }

  header div.copy-area{
    padding:150px 20px 400px 20px;
  }

  img.overlay{
    border-bottom-left-radius:80px;
    border-bottom-right-radius:80px;
    height:385px;
  }

  img.top-img{
    width:80%;
  }

  .button{
    height:60px;
    width:280px;
  }

  header div.logo-area{
    left:20px;
    bottom:140px;
  }

  p.sub span{
    font-size:1em;
  }

  .sp{
    display:block;
  }

  .pc{
    display:none;
  }

}

@media screen and (max-width: 500px) {
  
  header div.copy-area{
    padding:50px 20px 290px 20px;
  }

  img.top-img{
    opacity:.8;
  }

  img.overlay{
    height:400px;
  }

  header div.logo-area{
    bottom:100px;
  }

  img.copy{
    filter: drop-shadow(2px 2px 5px #2f3131);
    max-width:85%;
    margin-top:10px;
  }

  .copy-text span{
    margin:0;
  }

  header .button{
    font-size:1.5em;
    width:210px;
    height:50px;
  }

}


/* title */

h2{
  font-size:2.5em;
  font-weight: 600;
  line-height:1.2;
  color:var(--navy);
  text-align:center;
  margin:-104px 0 40px 0;
  background:rgb(255 255 255 / 44%);
  padding-bottom: 20px;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;
  border: 4px solid white;
  border-top:0;
  position:relative;
  padding-top:40px;
}

h2 p{
  position:absolute;
  top:-10px;
  left:0;
  right:0;
}

h2 p span{
  font-size:0.5em;
  font-weight:600;
  padding:10px 20px;
  background:var(--navy);
  color:white;
  border-radius:24px;
}

@media screen and (max-width: 768px) {
  h2 {
    font-size:1.6em;
    padding: 28px 0 16px 0;
  }
  h2 p span{
    font-size:0.6em;
  }
}



/* about */
#about{
  background:var(--lightpurple);
}

.intro{
  font-size:2.5em;
  font-weight:800;
  color:var(--navy);
  text-align:center;
  margin-bottom:40px;
}

.intro span{
  color:var(--primary-color);
  background:white;
  padding:0 15px;
  margin:0 10px;
}

.two-clm{
  width:100%;
  display:flex;
  gap:40px;
  margin:0 auto 40px auto;
}

.withx{
  width:80%;
  gap:100px;
}

.two-clm div{
  position:relative;
}

.two-clm > div img{
  width:100%;
}

.withx > div img{
  height:200px;
  border-top-left-radius:40px;
  border-top-right-radius:40px;
}

.two-clm > div .text{
  position:absolute;
  top:30%;
  left:-120px;
  width:200px;
  height: 200px;
  border-radius:100px;
  text-align:center;
  font-size:1.5em;
  font-weight:600;
  line-height:1.2;
  background:var(--primary-color);
  color:white;
  padding: 20px;
  display:flex;
  justify-content: center;
  align-items: center;
}

.two-clm > div .blue{
  background:var(--blue);
  position:absolute;
  left:auto;
  right:-120px;
}

.withx > div:first-child::after{
  position:absolute;
  top:20%;
  right:-71px;
  content:"X";
  font-size:5em;
  color:var(--navy);
}

.request{
  text-align: center;
}

.request a:hover{
  opacity:.8;
}

.request img{
  width:900px;
  max-width:100%;
  margin:100px auto 0 auto;
  box-shadow:0 0 10px var(--primary-color);
  border-radius:10px;
  animation: scaleAnimation 2s ease-in-out infinite; /* アニメーション */
}

@keyframes scaleAnimation {
  0% {
    transform: scale(1); /* 初期状態 */
  }
  50% {
    transform: scale(1.02); /* 中間で少し拡大 */
  }
  100% {
    transform: scale(1); /* 元のサイズに戻る */
  }
}

.pcx{
  display:none;
}

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

  .intro{
    font-size:1.8em;
  }
}

  @media screen and (max-width: 768px) {
  .two-clm{
    display:block
  }

  .two-clm > div{
    width:100%;
  }

  .two-clm > p:first-child,
  .two-clm > div:first-child{
    margin-bottom:40px;
  }

  #about .two-clm > p:first-child,
  #about .two-clm > div:first-child{
    margin-bottom:100px;
  }

  .withx > div:first-child::after{
    top:auto;
    bottom:-100px;
    left:0;
    right:0;
    font-size:5em;
    text-align: center;
  }
}

@media screen and (max-width: 640px) {
  .pcx{
    display:block;
  }
}

@media screen and (max-width: 500px) {
  .two-clm > div .text{
    position:static;
    width:100%;
    height:auto;
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-bottom-left-radius:40px;
    border-bottom-right-radius:40px;
  }

  .withx > div img{
    height:150px;
  }

  .intro span{
    padding:0 5px;
    margin:0 5px;
  }

  .intro {
    font-size: 1.6em;
  }

  .spx{
    display:none;
  }

  .pcx{
    display:none;
  }

}

/* market */
#market{
  background:var(--base-color);
}

.kakomi{
  width:100%;
  background:white;
  border-radius:20px;
  padding:20px 40px;
  text-align:center;
  color: var(--navy);
  font-size:1.5em;
  font-weight:500;
}

.kakomi span{
  background:var(--primary-color);
  color:white;
  padding:0 5px;
  margin:0 5px;
}

@media screen and (max-width: 500px) {
  .kakomi{
    font-size:1.1em;
    padding:20px;
  }
}

/* nayami */

#nayami{
  background: linear-gradient(180deg, var(--darkpurple), var(--purple));
}

#nayami h2{
  color:white;
}

.voice{
  background:var(--lightpurple);
  padding:12px 24px;
  border-radius:20px;
  position:relative;
}

.voice:after{
  content: "";
  position: absolute;
  background:var(--lightpurple);
  height: calc(tan(60deg)* 60px / 2);
  width: 24px;
  height: 24px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  bottom: -20px;
  left:0;
  right: 0;
  margin:0 auto;
}

.voice span{
  background:var(--blue);
  padding:0 5px;
  color:white;
  font-weight:500;
  margin:0 3px;
}

.people{
  text-align:center;
  margin-top:60px;
}

.people img{
  width:250px;
  height:250px;
  border-radius:125px;
  object-position: 70% 0;
  box-shadow: 0 5px 40px rgba(0, 0, 0, 0.6);
}

#nayami .inner{
  padding:100px 0 50px 0;
}

/* solve */

#solve{
  background:var(--lightblue);
  border-top:none;
  position:relative;
}

#solve:after{
  content: "";
  position: absolute;
  background:var(--purple);
  height: calc(tan(60deg)* 60px / 2);
  width:400px;
  max-width: 100%;
  height:80px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  top: -1px;
  left:0;
  right: 0;
  margin:0 auto;
}

#solve img{
  position:absolute;
  top:0;
  width:100%;
  height:100%;
}

#solve p{
  text-align:center;
  font-size:2em;
  font-weight:600;
  color:white;
  margin-top:40px;
  position:relative;
  text-shadow:0 0 10px black;
}

/* merit */

#merit{
  background:var(--lightblue);
}

.three-clm{
  width:100%;
  display:flex;
  gap:40px;
  margin-top:100px;
}

.three-clm div{
  position:relative;
  width:calc(100% / 3);
}


@media screen and (max-width: 768px) {
  
  .three-clm{
    display:block;
  }
  
  .three-clm div{
    width:100%;
    margin-bottom:80px;
  }
  
  .three-clm div:last-child{
    margin-bottom:0;
  }
}

.point{
  width:80px;
  height:80px;
  color:white;
  text-align:center;
  font-family: roboto, sans-serif;
  border-radius:40px;
  background:var(--darkblue);
  line-height:1;
  padding-top:8px;
  position:absolute;
  top:-40px;
  left:0;
  right:0;
  margin:0 auto;
}

.point span{
  font-size:3em;
  font-weight:700;
}

.three-clm div h3{
  background:rgb(255 255 255 / 70%);
  width:100%;
  height:120px;
  padding:50px 20px 30px 20px;
  text-align:center;
  font-size:1.2em;
  line-height:1.2;
  font-weight:600;
  color:var(--navy);
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}

.three-clm .detail{
  padding:20px 0;
  border-top:4px solid var(--darkblue);
}

.three-clm .detail img{
  margin-top:20px;
  border-radius:8px;
}

.business{
  color:var(--darkblue);
  background:white;
  padding-left:5px;
  font-weight:500;
}

.fan{
  color:var(--primary-color);
  background:white;
  padding-left:5px;
  font-weight:500;
}

.top-left{
  position:absolute;
  top:-30px;
  left:0;
  width:60px;
}

.top-right{
  position:absolute;
  top:10px;
  right:0;
  width:60px;
}


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

.point{
  width:65px;
  height:65px;
}

.point span{
  font-size:2.5em;
}
.three-clm div h3{
  height:100px;
  padding:40px 20px 30px 20px;
}

}


/* function */

#function {
  background:var(--blue);
}

#function h2{
  margin-bottom:0;
}


.kakomi02{
  margin-bottom:40px;
  color:white;
  padding:40px 60px;
  background:var(--navy);
  border-radius:20px;
  margin-top:20px;
}

.kakomi02 h3{
  font-size:1.5em;
  line-height:1.2;
  font-weight:600;
  margin-bottom:20px;
  padding-bottom:20px;
  border-bottom:1px dashed var(--blue);
  text-align:center;
}

.kakomi02 p{
  color:var(--lightblue);
  font-size:0.9em;
}

.kakomi02 span{
  background:var(--primary-color);
  color:white;
  margin:0 10px;
}

#function .two-clm > div{
  background:var(--lightblue);
  width:50%;
  border:2px solid var(--darkblue);
  padding:20px;
  border-radius:8px;
}

#function .arrow{
  display:flex;
  align-items: flex-start;
  gap:12px;
  margin-top:20px;
  color:var(--darkblue);
  font-weight:500;
  font-size:1.1em
}

#function .arrow p:first-child{
  font-weight:900;
}

@media screen and (max-width: 768px) {
  
  #function .two-clm > div{
    width:100%;
  }
}

.item-title{
  display:flex;
  gap:12px;
  align-items: center;
  margin-bottom:12px;
}

.function{
  font-size: 1.5em;
  line-height: 1.2;
  font-family: roboto, sans-serif;
  font-weight: 600;
  color: var(--navy);
  background: white;
  padding: 5px;
  border-radius: 4px;
}

#function .two-clm h3{
  font-size:1.2em;
  line-height:1.2;
  font-weight:600;
  color:var(--navy);
}

#function .two-clm .detail{
  font-size:0.9em;
}

.original span{
  background:var(--navy);
  color:white;
  font-weight:500;
  padding:0 10px 0 24px;
  position:relative;
  display:block;
  width:100px;
  margin-bottom:8px;
}

.original span:after{
  content:"★";
  position:absolute;
  color:var(--primary-color);
  top:0;
  left:4px;
}

#function .long{
  margin:0 auto;
}

#function .long > div{
  width:100%;
}

#function .long > div img{
  padding:20px;
}

.profit{
  margin-top:100px;
}

.profit h3{
  font-size:2em;
  line-height:1.2;
  font-weight:600;
  color:var(--navy);
  text-align:center;
  margin-bottom:20px;
}

.kakomi03{
  width:100%;
  padding:40px 20px;
  text-align:center;
  font-size:1.5em;
  font-weight:700;
  margin:20px auto 0 auto;
  position:relative;
  color: var(--navy);
}

.kakomi03 img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  mix-blend-mode: soft-light;
  border-radius:16px;
}

.kakomi03 p{
  position:relative;
  z-index:2;
}

@media screen and (max-width: 768px) {
  
  .kakomi03{
    font-size:1.2em;
  }
}

/* example */
#example{
  background:var(--lightpink);
  position:relative;
}


/* パーティクルエリア */
.particle-container {
  top: 0;
  left: 0;
  pointer-events: none; /* ユーザー操作を無効化 */
  overflow: hidden;
}

/* ハートの基本スタイル */
.heart {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
  transform: rotate(-45deg); /* 下をとがらせる形 */
  bottom: 0; /* 下からスタート */
  opacity: 0; /* 初期状態は透明 */
  animation: fly 5s linear infinite; /* アニメーション速度をゆっくりに変更 */
}

/* ハートの疑似要素で形を作る */
.heart::before,
.heart::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%; /* 丸みを持たせる */
}

.heart::before {
  top: -10px;
  left: 0;
}

.heart::after {
  top: 0;
  left: 10px;
}

/* ハートのアニメーション */
@keyframes fly {
  0% {
    transform: translateY(0) scale(0.5) rotate(-45deg);
    opacity: 0; /* 透明で開始 */
  }
  30% {
    opacity: 1; /* 徐々に表示 */
  }
  70% {
    opacity: 1; /* 完全に表示されたまま維持 */
  }
  100% {
    transform: translateY(-100vh) scale(1.2) rotate(-45deg);
    opacity: 0; /* 再び透明に */
  }
}


.flow{
  width:100%;
  display:flex;
  gap:50px;
}

.flow p{
  background:white;
  position:relative;
  padding:12px 20px 24px 20px;
  width:25%;
  box-shadow: -2px 2px 5px var(--lightpurple);
}

.flow p:after{
  content:"";
  position:absolute;
  background: #ffffff;
  width: 40px;
  height:100%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  top:0;
  right:-40px;
}

.flow p:last-child{
  background:var(--primary-color);
  color:white;
  font-weight:600;
  text-align: center;
  display:flex;
  align-items: center;
  border-radius: 20px;
}

.flow p:last-child:after{
  content:none;
}

.flow p:last-child span{
  display:block;
  margin:0 auto;
  z-index:2;
}

.flow p img{
  padding-bottom:12px;
}


@media screen and (max-width: 768px) {
  .flow{
    display:block;
  }

  .flow p{
    width:100%;
    margin-bottom:60px;
    text-align:center;
    box-shadow: 0px 0px 15px var(--lightpurple);
  }

  .flow p:after{
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    top:auto;
    bottom:-39px;
    left:0;
    right:0;
    width:100%;
    height:40px;
  }

  .flow p:last-child{
    padding-top:20px;
    min-height:150px;
    font-size:1.5em;
  }


}

/* nft */
#nft{
  background:var(--darkpurple);
  position:relative;
  color:white;
}

.background {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
  opacity:.3;
}

#nft .inner{
  position:relative;
  z-index:1;
}

#nft h2{
  color:white;
}

.img-text{
  display:flex;
  gap:60px;
  align-items: center;
  margin-bottom:80px;
}

.img-text img{
  width:160px;
  max-width:100%;
}

  .img-text img.tilt{
  /* transform: rotate(10deg); /* 時計回りに10度回転 */
  animation: tilt 2s infinite;
  box-shadow:4px 4px 8px white;
  }

  /* アニメーション定義 */
  @keyframes tilt {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(10deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

#nft h3{
  font-size:1.5em;
  line-height:1.2;
  font-weight:600;
  margin-bottom: 12px;
  border-bottom: 1px dotted var(--blue);
  padding-bottom: 12px;
}

#nft .kakomi{
  color:var(--darkpurple);
}

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

  #nft .img-text{
    display:block;
    text-align:center;
  }

  #nft .img-text img{
    margin-bottom:30px;
  }

  #nft .img-text p{
    text-align: left;
  }


}

/* faq */
#faq{
  background:var(--base-color);
}

.question-box{
  width:100%;
  background:white;
  margin-bottom:40px;
  border: 1px solid var(--darkblue);
  border-radius:16px;
}

.question-box div{
  width:calc(100% - 40px);
  margin:0 auto;
  display:flex;
  padding:20px;
  align-items: center;
  gap:20px;
}

.question-box div:last-child{
  align-items: flex-start;
}

.question-box div:first-child{
  border-bottom: 1px solid var(--darkblue);
  font-weight:600;
  color:var(--darkblue);
}

.question{
  font-size:2.5em;
  font-weight:800;
  font-family: roboto, sans-serif;
  color:var(--darkblue);
}

.answer{
  font-size:2.5em;
  font-weight:800;
  font-family: roboto, sans-serif;
  color:var(--primary-color);
}

#faq .inner:first-child{
  padding-bottom:0;
}

#faq h3{
  font-size:1.5em;
  line-height:1.2;
  font-weight:600;
  margin-bottom: 12px;
  color:var(--navy);
  border-bottom: 1px solid var(--navy);
  padding-bottom: 12px;
}

@media screen and (max-width: 768px) {
  #faq .img-text{
    display:block;
    text-align:center;
  }

  #faq .img-text img{
    margin-bottom:20px;
  }

  #faq .img-text p{
    text-align:left;
  }

}

/* conclusion */
#conclusion {
  background:var(--lightpurple);
}

#conclusion .two-clm{
  padding-top:80px;
}

#conclusion .two-clm div{
  position:relative;
}

#conclusion img{
  position:absolute;
  top:-60px;
  left:0;
  right:0;
  margin:0 auto;
  width:120px;
  height:120px;
  border-radius:60px;
}

#conclusion h3{
  font-size:1.5em;
  line-height:1.2;
  font-weight:600;
  color:white;
  margin-bottom:12px;
  background:white;
  text-align:center;
  padding:64px 20px 16px 20px;
}

#conclusion .fan-area h3{
  background:var(--primary-color);
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}

#conclusion .business-area h3{
  background:var(--blue);
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}

#conclusion .fan-area,
#conclusion .business-area{
  width:50%;
  background:white;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
}

@media screen and (max-width: 768px) {
  
  #conclusion .fan-area,
  #conclusion .business-area{
    width:100%;
  }
  
  #conclusion .fan-area{
    margin-bottom:100px;
  }

}

#conclusion .fan-area .copy{
  font-size:2em;
  font-weight:600;
  line-height:1.2;
  padding:20px 0;
  text-align: center;
  color:var(--primary-color);
}

#conclusion .business-area .copy{
  font-size:2em;
  font-weight:600;
  line-height:1.2;
  padding:20px 0;
  text-align: center;
  color:var(--darkblue);
}

#conclusion .two-clm > div ul{
  padding:0 20px 40px 20px;
}

#conclusion .two-clm > div ul li{
  margin-bottom:20px;
  padding-left:32px;
  position:relative;
}

#conclusion .two-clm > div ul li:after{
  position:absolute;
  top:-5px;
  left:5px;
  content:"✓";
  font-size:1.2em;
  font-weight:600;
}

#conclusion .two-clm > div.fan-area ul li:after{
  color:var(--primary-color);
}

#conclusion .two-clm > div.business-area ul li:after{
  color:var(--blue);
}

#conclusion .price{
  text-align:center;
  font-size:1.5em;
  line-height:1.2;
  font-weight:600;
  background:var(--navy);
  color:white;
  padding:20px;
  position:relative;
}

#conclusion .triangle {
  position:absolute;
  bottom:-51px;
  background: var(--navy);
  height: calc(tan(60deg) * 60px / 2);
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin-left:-20px;
}



/* form */
#form{
  background:var(--base-color);
}

#form .two-clm div{
  width:50%;
}

@media screen and (max-width: 768px) {
  
  #form .two-clm div{
    width:100%;
  }
}


form{
  width:800px;
  max-width:100%;
  margin:80px auto 0 auto;
}

label{
  width:100%;
  font-weight:600;
  display:block;
  margin-bottom:12px;
}

label span{
  font-size:0.8em;
  opacity:.6;
  padding:0 8px;
}

.required{
  font-size:0.8em;
  color:red;
}

textarea,
input{
  width:100%;
  background:white;
  padding:8px 12px;
  border:1px solid var(--lightgray);
  border-radius:4px;
}

.send{
  margin:80px auto 0 auto;
}

.send .button{
  margin:0 auto;
  font-size:1.5em;
}

.send button:hover{
  cursor:pointer;
}

#thankyouMessage p{
  text-align:center;
  font-size:1.2em;
  font-weight:600;
  color:var(--navy);
}

@media screen and (max-width: 768px) {
  form{
    margin:40px auto 0 auto;
  }
}

/* footer */
footer{
  background:var(--navy);
  padding:40px 0 100px 0;
}

footer ul{
  width:1000px;
  max-width:100%;
  text-align:center;
  margin:0 auto 40px auto;
}

footer ul li {
  margin-bottom:12px;
}

footer ul li a{
  color:white;
}

footer p{
  font-size:0.6em;
  color:white;
  text-align:center;
}