/*

  layout

================================================================
*/
#wrapper {
  position: relative;
  width: 675px;
  margin: 0 auto;}
.inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 30px;
  margin: 0 auto;}
#container {
  position: relative;}
/* ------------------------------------------------------- sp */
@media (max-width: 675px) {
#wrapper {
  max-width: 100%;
  min-width: 100%;
  width: 100%;}
.inner {
  padding: 0 3vw;}}


.mv {
  position: relative;}
.mv .cta {
  bottom: 30px;
  position: absolute;}
@media (max-width: 675px) {
.mv .cta {
  bottom: 5vw;}
}
/*

  cta

================================================================
*/
.cta {
  position: absolute;
  left: 50%;
  width: 615px;
  height: 150px;
  transform: translateX(-50%);}
.cta img {
  width: 100%;
  height: 100%;}
.kira {
  display: inline-block;
  position: relative;
  border-radius: 100vh;
  font-weight: bold;
  overflow: hidden;
  transition: 300ms;
  height: 151px;
}
.kira::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -170px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #b5e7ff;
  transition: 300ms;
  animation: shinyshiny 2.5s ease-in-out infinite;}
@-webkit-keyframes shinyshiny {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }}
/* ------------------------------------------------------- sp */
@media (max-width: 675px) {
.cta {
  width: 90vw;
  height: 22vw;
}
.cta img {
  width: 100%;}
.cta a {
  width: 80vw;
  height: 23vw;}
.kira {  height: 24vw;}
}

/*

  sec03

================================================================
*/
.sec03 {
  padding-top: 80px;}
@media (max-width: 675px) {
.sec03 {
  padding-top: 8vw;}
}

/*

  sec04

================================================================
*/
.sec04 {
  position: relative;}
.sec04 .cta {
  bottom: 120px;
  width: 430px;
  height: 105px;
  position: absolute}
.sec04 .cta img {
  width: 100%;}
@media (max-width: 675px) {
.sec04 .cta {
  width: 68vw;
  bottom: 15vw;
  height: 18vw;}
}
/*

  sec05

================================================================
*/
.sec05 {
  position: relative;
  z-index: 2;}

/*

  sec06

================================================================
*/
.sec06 {
  margin-top: -50px;}
@media (max-width: 675px) {
.sec06 {
  margin-top: -8vw;
}
}
/*

  sec08

================================================================
*/
.sec08 {
  position: relative;}
.sec08 .cta {
  bottom: 100px;
  position: absolute;}
@media (max-width: 675px) {
.sec08 .cta {
  bottom: 16vw;}
}
/*

  sec09

================================================================
*/
.sec09 {
  padding: 60px 0 80px;}
.sec09 .head {
  text-align: center;}
.sec09 dl {
  font-size: 24px;
  width: 100%;
  margin-top: 20px;
  letter-spacing: .08em;}
.sec09 dt {
  position: relative;
  background-color: #e7f5f6;}
.sec09 dt::before {
  content: "";
  background: url(../img/sec09-q.png) center center / cover no-repeat;
  position: absolute;
  top: 50%;
  left: 20px;
  width: 53px;
  height: 53px;
  transform: translateY(-50%);}
.sec09 dt:not(:first-child) {
  margin-top: 30px;}
.sec09 dt label {
  display: block;
  position: relative;
  padding: 35px 35px 35px 90px;
  cursor: pointer;}
.sec09 dt::after {
  content: "+";
  position: absolute;
  right: 30px;
  top: 50%;
  color: #51c5bd;
  transform: translateY(-50%);
  font-size: 28px;
  transition: transform 0.3s;}
.sec09 input[type="checkbox"] {
  display: none;}
.sec09 dd {
  max-height: 0;
  width: 92%;
  line-height: 1.5;
  overflow: hidden;
  margin: 0;
  padding-top: 20px;
  transition: max-height 0.4s ease, padding 0.3s ease;}
.sec09 input[type="checkbox"]:checked + dt::after {
  content: "−";}
.sec09 input[type="checkbox"]:checked + dt + dd {
  max-height: 5em;}
@media (max-width: 675px) {
.sec09 {
  padding: 8vw 0 12vw;}
.sec09 dl {
  margin-top: 3vw;
  font-size: 4vw;}
.sec09 dt::before {
  left: 3vw;
  width: 8vw;
  height: 8vw;}
.sec09 dt:not(:first-child) {
  margin-top: 4vw;}
.sec09 dt label {
  padding: 6vw 6vw 6vw 14vw;}
.sec09 dt::after {
  right: 4vw;
  font-size: 6vw;}
.sec09 dd {
  padding-top: 3vw;}
.sec09 input[type="checkbox"]:checked + dt + dd {
  max-height: 24vw;
}
}