*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

body{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.bg{
  background:url(/wp-content/themes/lightning_child_sample/img/smart_rakushu/bg.png);
  padding-top:20px;
}

p{line-height: 2;}

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

.yellow{
  display: inline;
  background:linear-gradient(to bottom,transparent 60%,#ffef78 60%);
  padding:0 0.2em;}
.shadow{
  text-shadow: 5px 5px 0 #fff;
}
.inner{
  max-width: 1200px;
  width:100%;
  margin: 0 auto;
  padding: 0 20px;
}

header.inner > div{
  position: relative;
  padding-top:15%;
}
header.inner h1{
  position: absolute;
  top:0;
  left:0;
}

header.inner > div > div{
  background: #abedffaa;
  border-radius: 70px;
  padding-top:20%;
}

header.inner div p.lead{
  font-size: 48px;
  font-weight: 900;
  text-align: center;
  line-height: 1.1;
}
header.inner div p.lead span.price{
  font-size: 72px
}
header.inner div p.lead span.saiyasu{
  display: block;
  font-size: 30px;
  text-align: left;
  margin-left: 7%;
  margin-top: 10px;
}
header.inner div p.lead span.line{
  display: inline-block;
}
header.inner div p.lead span.hasline::after{
  content:"｜";
}
header.inner div p.lead + p{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding: 1em 0;
}

.btn a{
  background: #b7ff51;
  border-radius: 60px;
  padding:14px 16px 18px;
  font-size: 64px;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 5px 5px 0 #fff;
  box-shadow: 10px 10px 0 #708f4455;
  text-align: center;
  display: block;
  margin:60px 50px;
  position: relative;
}
.btn a::after{
  content:"";
  display: block;
  position: absolute;
  top:calc(50% - 16px);
  right:30px;
  border-left:24px solid #000;
  border-top:16px solid transparent;
  border-bottom:16px solid transparent;
  filter: drop-shadow(5px 5px 0 #fff);
}
.btn a:hover{
  transform: translate(6px,6px);
  box-shadow: 4px 4px 0 #708f4455;
}
.col1{
  margin-top:100px;
}
.col1 h2{
  font-size: 38px;
  text-align: center;
}
.col1 ul{
  width: 75%;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap:50px 40px;
  list-style: none;
  padding: 0;
}
.col1 ul li{
  background:#fff;
  border:5px solid #000;
  width:30%;
  position: relative;
  padding:25px 10px;
  text-align: center;
  line-height: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.col1 ul li::after{
  content:"";
  display: block;
  position: absolute;
  border-top: 22px solid #fff;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  bottom:-20px;
  left: calc(50% - 22px);
}
.col1 ul li::before{
  content:"";
  display: block;
  position: absolute;
  border-top: 27px solid #000;
  border-left: 27px solid transparent;
  border-right: 27px solid transparent;
  bottom:-27px;
  left: calc(50% - 27px);
}

.col2{
  background: #abedff;
  margin-top: 80px;
}
.col2 .inner{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.col2 p{
  font-size: 38px;
  font-weight: bold;
  padding: 52px 0 20px;
  line-height: 1.8;
}
.col2 p .shadow{
  font-size: 54px;
  margin-right: 5px;
  line-height: 1.2;
}

.col3{
  margin-top:100px;
  padding-bottom: 80px;
}
.col3 .about{
  max-width: 980px;
  margin: 100px auto;
}
.col3 .about h3{
  font-size: 36px;
  display: inline;
  padding-bottom: 10px;
}
.col3 .about .flex{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap:60px;
}
.col3 .about:nth-child(2) .flex{
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.col3 .about .flex:nth-child(2) img{
  margin-top: 40px;
}
.col3 .about p{
  font-weight: bold;
  font-size: 22px;
  margin-top: 30px;
}
.col3 .about .orange{
  color:#e83c00;
}
.col3 .about:nth-child(3) h3{
  position: relative;
}
.col3 .about:nth-child(3) h3 span.saiyasu{
  position: absolute;
  right: 15px;
  top:-35px;
  font-size: 24px;
}
.col3 .attention p{
  font-size: 14px;
  text-align: center;
}

.col4{
  margin: 100px auto 0;
  padding-bottom: 100px;
  width:90%;
}
.col4 h2{
  font-size: 36px;
  text-align: center;
}

.col4 .voice{
  position: relative;
  margin-top: 20px;
}

.col4 .voice > img{
  position: absolute;
  top:0;
  left: 20px;
}

.col4 .voice .age{
  position: absolute;
  top:200px;
  left:74px;
  font-weight: bold;
  font-size: 18px;
}

.col4 .voice .career{
  font-weight: bold;
  font-size: 18px;
  padding:20px 26px 14px 240px;
}

.col4 .voice .career span{
  font-size: 24px;
}

.col4 .voice .bgb{
  background:#e5f8ff;
  padding:26px 26px 26px 240px;
}

.col4 .voice .bgb p:first-child{
  font-size:20px;
  font-weight: bold;
}
.col4 .voice .bgb p:last-child{
  font-size:18px;
}

.col4 .lead p{
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin:40px 0;
}

.col4 .lead p span{
  font-size: 36px;
}

.col5{
  border:10px solid #58c3e0;
  position: relative;
  padding: 12px 12px 40px;
}

.col5::after{
  content:"";
  display: block;
  position: absolute;
  height:100px;
  width:10px;
  bottom:-63px;
  left:calc(50% - 5px);
  background:#58c3e0;
}
.col5::before{
  content:"";
  display: block;
  position: absolute;
  border-top: 21px solid #58c3e0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  bottom:-80px;
  left:calc(50% - 18px);
}

.col5 .chance{
  position: absolute;
  top:0;
  left:0;
}
.col5 .chance::before{
  content:"";
  display: block;
  border-top: 135px solid #58c3e0;
  border-left:  135px solid #58c3e0;
  border-bottom: 135px solid transparent;
  border-right: 135px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.col5 .chance p{
  transform: translate(10px,48px) rotate(-45deg);
  color:#fff;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

.col5 .flex{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap:50px;
}

.col5 .flex > img{
  margin-left: 50px;
  margin-bottom: 10px;
}

.col5 .flex div img{
  position: relative;
  left:-50px;
}
.col5 .flex .flow {
  margin-top:24px;
}
.col5 .flex .flow div{
  background:#abedff;
  position: relative;
  display: inline-block;
  padding: 20px;
  margin-right: 30px;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1px;
}
.col5 .flex .flow div::after{
  content:"";
  position: absolute;
  border-left:15px solid #abedff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  right:-15px;
  top:calc(50% - 15px);
}
.col5 .flex .flow div:last-child::after{
  border:none;
}
.col5 .right{
  font-size:24px;
  text-align: right;
  font-weight: bold;
  margin:5px 0 10px;
}

.col5 .right + p{
  font-size:24px;
  font-weight: bold;
  line-height: 1.8;
}

.col5 .orange{
  color:#e73c00;
  font-size: 42px;
}

.col6{
  margin-top:120px;
}
.col6 p{
  text-align: center;
}
.col6 p:first-child{
  font-size: 40px;
  font-weight: bold;
}
.col6 p:nth-child(2){
  font-size: 24px;
}
.col6 .btn a{
  margin-bottom: 20px;
  margin-top: 40px;
}

footer{
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  margin-top: 5rem;
  font-size: 12px;
  align-items: center;
  gap:16px;
  background: #ececec;
}
footer div p{line-height: 1.6;}
footer > p{ margin-left: auto; color: #1c2953;font-size: 10px;font-weight: 600;}
footer > p img{margin: 0 auto;}

@media screen and (max-width:1120px){
  header.inner div p.lead{
    padding: 0 1em;
  }
  header.inner div p.lead span.hasline::after{
    display: none;
  }
  header.inner div p.lead{
    line-height: 1.4;
  }
  header.inner div p.lead span.saiyasu{
    margin-top:20px;
    margin-bottom: -14px;
    margin-left: 0;
    text-align: center;
  }
  .btn a{
    font-size: 44px;
  }
  .col1 ul li{
    width:40%;
  }
  .col2 p{
    font-size: 28px;
  }
  .col2 p .shadow{
    font-size: 48px;
  }
  .col2 img{
    width:30%;
  }
  .col3 .about h3{
    line-height: 1.6;
  }
  .col3 .about:nth-child(3) h3 span.saiyasu{
    right:auto;
    left:0;
    top:-30%;
    width:50vw;
  }
  .col3 .about:nth-child(3) h3 br.sp,
  .col5 .right + p br.sp{
    display: inline;
  }
  .col5 .chance::before{
    border-top: 90px solid #58c3e0;
    border-left: 90px solid #58c3e0;
    border-bottom: 90px solid transparent;
    border-right: 90px solid transparent;
  }
  .col5 .chance p{
    transform: translate(0px, 23px) rotate(-45deg);
    font-size: 24px;
  }
  .col5 .flex{
    gap:30px;
  }
  .col5 .flex > img{
    width:23%;
    margin-left: 10px;
  }
  .col5 .flex .flow div{
    font-size: 22px;
    padding:15px;
    margin-right: 20px;
  }
}

@media screen and (max-width:767px){
  .pc{display: none;}
  .sp{display: inline;}

  header.inner div p.lead{
    font-size: 6vw; /* 24px */
    margin-top: 20px;
  }
  header.inner div p.lead span.price{
    font-size: 9vw /* 50px */
  }
  header.inner div p.lead span.saiyasu{
    font-size: 4.2vw; /* 18px */
    margin-top: 0;
  }

  header.inner div p.lead + p{
    font-size: 3.8vw; /* 16px */
  }
  .btn a{
    font-size: 6vw; /* 24px */
    text-shadow:3px 3px 0 #fff;
    margin:30px 10px;
  }
  .btn a::after{
    border-left: 12px solid #000;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    filter: drop-shadow(3px 3px 0 #fff);
    top: calc(50% - 8px);
    right:15px;
  }
  .col1,.col2,.col3,.col4{
    margin-top: 50px;
  }
  .col1 h2,
  .col4 h2{
    font-size: 6vw; /* 24px */;
    line-height: 1.4;
  }
  .col1 ul{
    width:100%;
    gap:30px 20px;
    margin-bottom:0;
  }
  .col1 ul li{
    padding:10px 5px;
    width:46%;
    font-size:3.2vw;
  }
  .col1 ul li::before{
    border-top: 20px solid #000;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    bottom: -20px;
    bottom: -20px;
    left: calc(50% - 20px);
  }
  .col1 ul li::after{
    border-top: 14px solid #fff;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    bottom: -14px;
    left: calc(50% - 14px);
    }
  .col2 .inner{
    flex-direction: column;
    align-items: center;
  }
  .col2 p{
    text-align: center;
    font-size: 5.2vw; /* 22px */
  }
  .col2 p .shadow{
    font-size: 8vw;
  }
  .col2 img{
    width:auto;
  }
  .col3{padding-bottom: 30px;}
  .col3 .about{
    margin:50px auto;
  }
  .col3 .about .flex{
    gap:20px;
  }
  .col3 .about .flex:nth-child(2) img{
    margin-top: 30px;
  }
  .col3 .about h3{
    font-size: 5.2vw; /* 22px */
    padding-bottom: 4px;
  }
  .col3 .about p{
    font-size: 16px;
    margin-top:20px;
  }
  .col3 .about .flex img{
    width:30%;
  }
  .col3 .about:nth-child(3) h3 span.saiyasu{
    font-size:3.8vw; /* 16px */
    top:-30%;
  }
  .col3 .attention p{
    font-size: 12px;
  }
  .col4{
    width:100%;
    padding-bottom: 50px;
  }
  .col4 .voice .bgb{
    padding: 15px 20px;
  }
  .col4 .voice .age{
    font-size: 14px;
    top:0;
    left:140px;
  }
  .col4 .voice .career span{
    font-size:  4.2vw; /* 20px */
    display: inline;
  }
  .col4 .voice .career{
    font-size: 16px;
    line-height: 1.8;
    padding:30px 20px 14px 140px;
  }
  .col4 .voice .bgb p:first-child{
    font-size: 16px;
    line-height: 1.8;
  }
  .col4 .voice .bgb p:last-child{
    font-size: 14px;
    line-height: 1.8;
  }
  .col4 .voice > img{
    width:100px;
    height:auto;
  }
  .col4 .lead p{
    font-size: 4.4vw;
  }
  .col4 .lead p span{
    font-size: 6.6vw; /* 28px */
    line-height: 1;
  }
  .col5{
    border:6px solid #58c3e0
  }
  .col5 .chance::before{
    border-top: 65px solid #58c3e0;
    border-left: 65px solid #58c3e0;
    border-bottom: 65px solid transparent;
    border-right: 65px solid transparent;
  }
  .col5 .chance p{
    font-size: 18px;
    line-height: 1.2;
  }
  .col5 .flex{
    gap:20px;
    flex-direction: column-reverse;
  }
  .col5 .flex > img{
    margin: 0 auto;
    width:200px;
  }
  .col5 .flex div img{
    left:80px;
    width:calc(100% - 80px);
  }
  .col5 .flex .flow{
    text-align: center;
    display:flex;
    flex-direction: column;
    justify-content: center;
    width:80%;
    gap:20px;
    margin: 30px auto 0;
  }
  .col5 .flex .flow div{
    font-size: 4.2vw; /* 18px */
    padding: 10px;
    margin-right: 0;
  }
  .col5 .flex .flow div::after{
    border-top: 10px solid #abedff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: transparent;
    right: calc(50% - 10px);;
    bottom:-10px;
    top: auto;
  }
  .col5 .right,
  .col5 .right + p{
    font-size: 4.8vw; /* 20px */
    text-align: center;
  }
  .col5 .orange{
    font-size:  6.6vw; /* 28px */
    letter-spacing: -1px;
  }
  .col5::after{
    height:80px;
  }
  .col6 p:first-child{
    font-size:  6.6vw; /* 28px */
  }
  .col6 p:nth-child(2){
    font-size: 4.8vw;
  }
  .col6 p.center{
    font-size: 12px;
  }
}

@media screen and (max-width:500px){
  .col5 .chance::before {
      border-top: 45px solid #58c3e0;
      border-left: 45px solid #58c3e0;
      border-bottom: 45px solid transparent;
      border-right: 45px solid transparent;
    }
  .col5 .chance p{
    font-size: 13px;
    transform: translate(-4px, 14px) rotate(-45deg);
  }
}


/* 診断 */
#shindan header.inner > div{
  padding-top:5%;
}
#shindan header.inner h1{
  left:5%;
  margin:0 auto;
}
#shindan header.inner > div > div{
  padding-top:22%;
  padding-bottom: 5%;
}
#shindan header.inner div p.lead{
  text-align: left;
  width:90%;
  margin:0 auto;
  padding: 0;
}
#shindan .question dl {
  max-width: 1200px;
  font-size: 20px;
  margin: 50px auto;
  padding: 30px;
  box-sizing: border-box;
  align-items: center;
  background: #fff;
}

#shindan .question dl div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

#shindan .question dl div:nth-of-type(2n-1) {
  background: #e5f8ff;
}

#shindan .question dt {
  flex-basis: auto;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
	border-left: none;
}

#shindan .question dt span {
  background: #29c2ff;
  color: #fff;
  min-width: 40px;
  height: 40px;
  margin-right: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#shindan .question dd {
  flex-basis: 320px;
  box-sizing: border-box;
  text-align: right;
  line-height: 40px;
	border-left: none;
}

#shindan .question dd input[type=radio]{
margin-left:10px;
margin-right:5px;
}

#shindan .question .thank{
  font-size: 32px;
  font-weight: bold;
  line-height: 2;
  text-align: center;
  position: relative;
  padding-bottom: 120px;
}
#shindan .question .thank span{
  font-size: 42px;
  font-weight: 900;
}
#shindan .question .thank::after{
  content:"";
  position: absolute;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #b1f058;
  width:240px;
  height:30px;
  bottom:26px;
  left:calc(50% - 120px);
}

#shindan .question .area04::before{
  content:"";
  position: absolute;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: #e5f8ff;
  width:50%;
  height:100px;
  top:-100px;
  left: 0;
}
#shindan .question .area04::after{
  content:"";
  position: absolute;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: #e5f8ff;
  width:50%;
  height:100px;
  top:-100px;
  right: 0;
}
#shindan .question .area04 {
  background: #e5f8ff;
  position: relative;
  padding:20px 0 100px;
}

#shindan .question .inner {
  padding: 0 20px;
}

#shindan .question .form {
  background: #fff;
  border-radius: 20px;
  margin: 7vh auto 0;
  max-width: 980px;
  padding: 6vh 20px;
}

#shindan .question .info {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: -40px;
}

#shindan .question .info img {
  width: 13%;
  margin-right: 30px;
}

#shindan .question .info p {
  line-height: 2em;
  padding-bottom: 14px;
}

#shindan .question table {
  margin: 0 auto;
  width:90%;
}

#shindan .question table th {
  padding: 14px;
  text-align: right;
  font-weight: normal;
}

#shindan .question table td {
  padding: 14px;
}

#shindan .question table td input[type=text],
#shindan .question table td input[type=email],
#shindan .question table td input[type=tel],
#shindan .question table td input[type=number]{
  padding: 5px;
  width:100%;
}

#shindan .question table td select{
  padding: 5px;
}

#shindan .question table td input#touroku_tel,
#shindan .question table td input#touroku_zip{
  width:10em;
}

#shindan .question table td input#touroku_free1{
  width:4em;
}

#shindan .question table td input.input_sm {
  width:20%;
}

#shindan .question table .require{
  color:#f00;
}

#shindan .question .btn {
	display:block;
  text-align: center;
  margin-top: 4vh;
}

#shindan .question .btn input[type=submit] {
  background: #b1f058;
  font-size: 36px;
  font-weight: bold;
  color: #000;
  border: none;
  border-radius: 10px;
  margin: 0 auto;
  padding: 1vh 8vw;
}

#shindan footer{
  margin-top: 0;
}

@media screen and (max-width:767px){
  #shindan .question dl{
    padding:15px;
  }
  #shindan .question dl div{
    flex-direction: column;
    padding: 10px;
  }
  #shindan .question dl div > *{
    width:100%;
    font-size: 16px;
  }
  #shindan .question dd{
    flex-basis:auto;
    text-align: center;
  }
  #shindan .question .thank span{
    font-size: 28px;
  }
  #shindan .question .thank{
    font-size: 20px;
    padding-bottom: 80px;
  }
  #shindan .question .thank::after{
    width:120px;
    height: 15px;
    left: calc(50% - 60px);
  }
  #shindan .question .area04{
    width:100vw;
    position: relative;
    left:50%;
    transform: translateX(-50%);
    padding-bottom:50px;
  }
  #shindan .question .area04::before,
  #shindan .question .area04::after{
    height: 30px;
    top:-30px;
  }
  #shindan .question .info{
    flex-direction: column;
    font-size: 16px;
    align-items: center;
  }
  #shindan .question table tr{
    display: flex;
    flex-direction: column;
  }
  #shindan .question .info{
    margin-top: -10%;
  }
  #shindan .question .info img{
    width:30%;
    max-width: 100px;
    margin:0 auto;
    z-index: 2;
  }
  #shindan .question .info p{
    text-align: center;
  }
  #shindan .question table{
    width: 100%;
  }
  #shindan .question table th{
    padding:8px;
    font-size: 14px;
    text-align: left;
  }
  #shindan .question table td{
    padding:8px;
    font-size: 14px;
  }
  #shindan .question .btn input[type=submit]{
    font-size: 28px;
  }
}