@charset "UTF-8";
* {
  outline: none !important;
  box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: 100%; }

ul,ol {
  margin:0;
  padding:0;
  list-style: none; }

p{
  text-align: justify;
  text-justify:
  inter-ideograph;
}

img{
  display: block;
  max-width: 100%;
  height: auto; }

p,
figure,
dl,dd,dt{
  padding: 0;
  margin: 0;
}

.text-center{ text-align: center; }
.bg-white{ background: #FFF; }
.text-black { color:#000; }
.text-red { color:#c00; }
.text-yellow { color:#FFEB3B; }
.text-gold { color:#ca4; }
.font-bold { font-weight: 700; }


/* **************************************************
  リンク色
************************************************** */
a {
  color: #000;
  text-decoration: none;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear; }

a:hover,
a:focus {
  color: #fff;
  text-decoration: none; }


/* **************************************************
	layout
************************************************** */
html {
  font-size: 62.5%;
  height: 100%;
 }

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo', sans-serif;
  color: #fff;
  -webkit-font-smoothing: subpixel-antialiased;
  line-height: 1.8;
  background: transparent !important;
  font-variant-ligatures: none;
}

.layout {
  width: 100%;
  max-width: 500px;
  background: #12161b;
  height: auto !important;
  margin:0 auto;
  position: relative;
  }


/* **************************************************
	header
************************************************** */

.header{
  width:100%;
  height: 45px;
  position: relative;
  display: flex;
  align-items: center;
  padding:0.5rem 1rem;
  background: #0b1a39;
}

.header .login {
  height:auto;
  margin-left:auto;}

.header .login a{
  position: relative;
  color:#fff;
  font-size: 1.2rem;
  display:flex;
  align-items: center;

}
.header .login a:after{
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  left: -15px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  transform: rotate(45deg);
}

.contents{
  padding-left: 2rem;
  padding-right: 2rem;
}

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

.main{
  position: relative;
}

.mainTitle{
  font-size:6.2vw;
  line-height:1.2;
  text-align: justify;
  margin:0 0 1.5rem;
}

.main_card{
  position: absolute;
  left:auto;
  right:auto;
  bottom:0em;
  display: block;
  padding:0 2rem 0;
  font-size:1.2rem;
}


@media screen and (min-width: 480px) {
  .mainTitle{
    font-size:2.5rem;}
}


/* **************************************************
  category
************************************************** */
.category{
  padding:2rem 2rem 0;
  position: relative;
  z-index: 1;
}

.category:after{
  content:"";
  display: block;
  width: 100%;
  padding-top: 55%;
  background: url('/asset/image/lp/adlp37/img_mock.png') no-repeat 50% 0;
  background-size: 55% auto;
  z-index: -1;
}

.webp .category:after{
  background: url('/asset/image/lp/adlp37/img_mock.png.webp') no-repeat 50% 0;
  background-size: 55% auto;
  z-index: -1;
}

.categoryTitle{
  margin:0 0 3rem;
  line-height:1.2;
  text-align:center;
  font-size:2.6rem;
  color:#eee;
}

.category_dl{
  margin:2rem 0;
  border:1px solid #d1b7dc;
  border-radius: 6px;
}
.category_dl dt{
  padding: 1rem 2rem;
  margin:0.8rem 0 1rem -0.8rem;
  background: #d1b7dc;
  background: linear-gradient(130deg, rgba(127,180,243,1) 0%, rgba(209,183,220,1) 25%, rgba(248,188,194,1) 50%, rgba(252,199,165,1) 75%, rgba(253,225,152,1) 100%);
  display: inline-flex;
  font-weight: 700;
  color: #000;
}

.category_dl dd{
  padding:0.5rem;
}
.category_ul{
  padding: 1rem;
}
.category_ul li{
  position: relative;
  padding-left: 0.5em;
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
}


.category_ul li:before {
  content: "";
  width: 5px;
  height: 12px;
  margin-right:1rem;
  border-right: 3px solid #d1b7dc;
  border-bottom: 3px solid #d1b7dc;
  transform: rotate(50deg);

}

/* **************************************************
  media
************************************************** */
.media{
  padding: 2rem;
  background: #f6f5f7;
  color:#222;
}

.media:before,
.media:after{
  content:"";
  display: block;
  left:auto;
  right:auto;
  width: 100%;
  padding-top: 10%;
  background: url('/asset/image/lp/adlp37/img_border.png') no-repeat 50% 50%;
  background-size: 60% auto;
}

.webp .media:before,
.webp .media:after{
  background: url('/asset/image/lp/adlp37/img_border.png.webp') no-repeat 50% 50%;
  background-size: 60% auto;
}

.media:before{
  margin: 2rem 0;
}
.media:after{
  margin: 4rem 0 2rem;
}

.mediaTitle{
  font-size:2.1rem;
  margin:0 0 2rem;
  text-align:center;
}


/*  video */
.video_media {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0px;
  margin: 2rem 0;
  position: relative;
}

.video_media .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* **************************************************
  teller
************************************************** */
.teller{
  padding:2rem;
  background: url('/asset/image/lp/adlp37/bg.jpg') repeat 50% 50%;
  background-size: contain;
}


.webp .teller{
  padding:2rem;
  background: url('/asset/image/lp/adlp37/bg.jpg.webp') repeat 50% 50%;
  background-size: contain;
}


.tellerTitle{
  font-size:2.1rem;
  margin:0 0 2rem;
  text-align:center;
  color:#FFF;
}


.tellerCard_ul{
  display: flex;
  flex-flow:row wrap;
  justify-content: space-between;
  gap: 1.5rem 1rem;
}

.tellerCard_ul li{
  width: calc(50% - 0.7rem);
}

.tellerCard_ul li:last-child{
  margin:0 auto;
}


.tellerCard {
  border-radius: 6px;
  color:#000;
  background: #fff;
}
.tellerCard img {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.tellerCard_note{
  padding:0 0.5rem 0.5rem;
}

.tellerCard_catch{
  font-size:1.2rem;
  font-weight:700;
  padding:0.3rem 0.5rem;
  background-color:#e2dffe;
  color:#0b1a39;
}

.tellerCard_name {
  font-weight: 700;
  margin-bottom: 5px;
}

.tellerCard_dl {
  width:100%;
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.tellerCard_dl > dt {
  line-height: 1;
  padding: 2px 5px 3px;
  margin-right: 5px;
  border-radius: 3px;
  background: #003399;
  color: #fff;
  white-space: nowrap;
}

.tellerCard_dl > dd {
  width:100%;
  height: 100%;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
}


.tellerCard_dl > dd img {
  width: 1.2rem;
  margin-right: 1px;
  display: block;
}

.tellerCard_score{
  margin-left:5px;
  color: #cc0000;
}


/* **************************************************
  suggest
************************************************** */
.suggestTitle{
  padding: 1rem 0 2rem;
  font-size:2.1rem;
  text-align:center;
}

.suggest{
  padding:2rem;
  position: relative;
  background:#e2dffe;
  background: linear-gradient(170deg, rgba(244,217,255,1) 0%, rgba(226,223,254,1) 65%);
  color:#000;
}

.suggest_img{
  margin:0 auto;
  position: relative;
}

.suggest_img:before{
  content:"";
  display: block;
  width:100%;
  padding-top: 60%;
  background: url('/asset/image/lp/adlp37/img_suggest.png') no-repeat 50% 50%;
  background-size: contain;
}

.webp .suggest_img:before{
  content:"";
  background: url('/asset/image/lp/adlp37/img_suggest.png.webp') no-repeat 50% 50%;
  background-size: contain;
}

.suggest_ul {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-around;
  align-items: center;
}

.suggest_box {
  position: relative;
  padding: 15px;
  background: #fff;
  border-radius: 6px;
  text-align:center;
  box-shadow: 3px 1px 33px 0px rgba(95,82,160,0.4);
  z-index: 1;
}

.suggest_box:before,
.suggest_box:after{
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
  box-shadow: 3px 1px 33px 0px rgba(95,82,160,0.4);
  z-index: 0;
}

.suggest_box.left{
  margin: 2rem 0 2rem 3em;
}

.suggest_ul li:first-child .suggest_box.left{
  margin: 0 0 2rem 3em;
}


.suggest_box.right{
  margin: 2rem 3em 2rem 0;
}

.suggest_box.left:before {
  width: 13px;
  height: 12px;
  top: 0;
  left: -45px;
}

.suggest_box.left:after {
  width: 20px;
  height: 18px;
  top: 3px;
  left: -28px;

}

.suggest_box.right:before {
  width: 13px;
  height: 12px;
  top: 0;
  right: -45px;
}

.suggest_box.right:after {
  width: 20px;
  height: 18px;
  top: 3px;
  right: -28px;
}



/* **************************************************
  reason
************************************************** */
.reason{
  padding:2rem;
  background: #fff;
  color:#000;
}

.reason:before,
.reason:after{
  content:"";
  display: block;
  left:auto;
  right:auto;
  width: 100%;
  padding-top: 10%;
  /* margin: 2rem 0; */
  background: url('/asset/image/lp/adlp37/img_border.png') no-repeat 50% 50%;
  background-size: 60% auto;
}


.webp .reason:before,
.webp .reason:after{
  background: url('/asset/image/lp/adlp37/img_border.png.webp') no-repeat 50% 50%;
  background-size: 60% auto;
}

.reasonTitle{
  font-size:2.1rem;
  margin:1rem 0 3rem;
  text-align:center;
}

.reason_ul{
  position: relative;
}

.reason_ul li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-bottom: 4rem;

}

.reason_ul h3{
  color:#b40f67;
  font-size: 1.6rem;
}

.reason_ul li picture{
  width: 27%;
}
.reason_ul li img{
  filter: drop-shadow(2px 1px 8px rgb(95, 82, 160));
}
.reason_ul li > div{
  width: calc(100% - 28%);
  font-size: 1.2rem;
}

/* **************************************************
  howto
************************************************** */

.howto{
  padding: 0;
  background: #f6f5f7;
  color:#000;
}


.howtoTitle{
  padding:3rem 0;
  font-size:2.1rem;
  text-align:center;
  background: #e2dffe;
}

.howto_box {
  overflow-x: auto;
  height: auto;
}

.howto_box > div {
  visibility: visible;
  display: block;
  overflow-y: hidden;
  margin-bottom: 1rem;
}

.howto_ul {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  flex-flow: row nowrap;
  margin-bottom:6rem;
  padding:3rem 2rem 2rem;
}


.howto_ul::-webkit-scrollbar{
  width: 10px;
}
.howto_ul::-webkit-scrollbar-track{
  background-color: #f1f1f1;
  border-radius: 10px;
}
.howto_ul::-webkit-scrollbar-thumb{
  background-color: #cecece;
  border-radius: 10px;
}

.howto_ul li {
  margin-right: 5rem;
  width: 100%;
  max-width: 480px;
  flex:1 0 calc(100% - 5rem);
}


.howto h3{
  display: flex;
  flex-flow:column nowrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1;
}

.howto p{
  margin-bottom: 1rem;
  height:9.5em;

}
.howto h3 > span:nth-of-type(odd){
  font-size: 1.5rem;
}
.howto h3 > span:nth-of-type(even){
  font-size: 3rem;
  align-items: center;
}

.howto .bg_round{
  max-width: 340px;
  margin: 0 auto 3rem;
  background: #fff;
  border-radius: 22px;
  padding:20px 16px 26px;
  border: 1px solid #eee;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.2);
}

.howto img{
  margin: 0 auto;
  border-radius: 11px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}




/* acc */
.acc_ul > li:first-child {
  border-top: 0.1rem solid #eee;
}
.acc_ul > li {
  border-bottom: 0.1rem solid #eee;
}

.acc .label_acc {
  position: relative;
  padding: 2rem 2.5rem;
  margin: 0;
  display: block;
  /* color:#0e3785; */
  background: #e2dffe;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.acc .label_acc:after {
  content: "";
  width: 1em;
  height: 1em;
  display: block;
  background-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="%23000000" xmlns="http://www.w3.org/2000/svg"><path d="M10.9,7.4L6.4,2.9C6.2,2.7,6,2.6,5.8,2.6c0,0,0,0,0,0c-0.2,0-0.5,0.1-0.6,0.3l0,0c-0.3,0.3-0.3,0.9,0,1.2L9,8 l-3.9,3.9c-0.3,0.3-0.3,0.9,0,1.2c0.2,0.2,0.4,0.3,0.6,0.3s0.4-0.1,0.6-0.3l4.5-4.5C11.2,8.3,11.2,7.7,10.9,7.4z"/></svg>');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.acc .check_acc:checked + .label_acc:after {
  content: "";
  background-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="%23000000" xmlns="http://www.w3.org/2000/svg"><path d="M8.6,10.9l4.5-4.5c0.2-0.2,0.3-0.4,0.3-0.6c0,0,0,0,0,0c0-0.2-0.1-0.5-0.3-0.6l0,0c-0.3-0.3-0.9-0.3-1.2,0L8,9 L4.1,5.1c-0.3-0.3-0.9-0.3-1.2,0C2.7,5.3,2.6,5.5,2.6,5.8s0.1,0.4,0.3,0.6l4.5,4.5C7.7,11.2,8.3,11.2,8.6,10.9z"/></svg>');
}

.acc_box {
  margin: 0;
  position: relative;
}
.acc_box > label {
  margin: 0 1rem 0 0;
}
.acc_box > input {
  display: none;
}
.acc_box_inner {
  height: 0;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}
.check_acc:checked + .label_acc + .acc_box_inner {
  height: auto;
  max-height: 500vh;
  display: block;
  opacity: 1;
  visibility: visible;
}


/* **************************************************
  review
************************************************** */

.review{
  padding:2rem;
  background-color:#FFF;
  color:#000;
}

.reviewTitle{
  font-size:2.1rem;
  margin:0 0 3rem;
  text-align:center;
}

.review_card{
  display: flex;
  justify-content:space-around;
  gap: 1rem;
  margin-bottom:3rem;
}

.review_card figure{
  width: 4rem;
  margin-right:1rem;

}

.review_balloon {
  position: relative;
  background: #f6f5f7;
  height: auto;
  width: 100%;
  padding: 1.4rem;
  border-radius: 1rem;
  line-height: 1.35;
  font-size:1.4rem;
}

.review_balloon:after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  left: -2rem;
  top: 1rem;
  border: 1rem solid transparent;
  border-right: 1.5rem solid #f6f5f7;
}


.review_balloon p > span{
  display: block;
  text-align: right;
}



/* **************************************************
  faq
************************************************** */
.faq{
  padding:2rem;
  background:#f6f5f7;
  color:#000;
}

.faqTitle{
  font-size:2.1rem;
  margin:0 0 2rem;
  text-align:center;
}

.faq_card{
  display: flex;
  margin-bottom:2rem;
  font-size:1.3rem;
  align-items: baseline;
}

.faq_ul li {
  border-bottom:1px solid #e6e6e6;
  margin-bottom:2rem;
}

.faq_q,
.faq_a{
  width: 30px;
  height: 30px;
  margin: 0px 10px 0px 0px;
  background: #ab9ed4;
  color:#fff;
  border-radius: 4px;
  font-weight:700;
  display: flex;
  align-items:center;
  justify-content:center;
  box-shadow: 3px 1px 20px 0px #e6e6e6;
}

.faq_a{
  background: #fff;
  color:#ab9ed4;
}


.faq_card p{
  flex:0 1 calc(100% - 30px);
}



/* **************************************************
  footer
************************************************** */
.footer{
  padding: 10px 0;
  background: #000;
}

.footer_ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
 }
.footer_ul > li{ width: 50%;
   flex: 0 0 50%;
 }
.footer_ul > li > a{
  display: block;
   padding: 10px 0;
   text-decoration: none;
   color: #fff;
   font-size: 1.1rem;
   text-align: center;
 }

.footer-p {
  font-size: 1rem;
  text-align: center;
  color: #ddd;
}

.footer-p a { color: #fff; text-decoration: none; }


/* **************************************************
  button
************************************************** */

.registBtn_area{
  padding:2rem 2rem 3rem;
  background: #FFF;
  color:#000;
}

.registBtn_area.bg-dark{
  background: transparent;
  color:#fff;
}

.registBtn_area.bg-purple{
  background: #e2dffe;
}


.btn {
	display: block;
	font-weight: 400;
	color: #212529;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	transition: all .2s ease-in-out;
}

.btn_regist {
	color: #fff;
	background-color: #b40f67;
	font-weight: 700;
  border-radius:6px;
	position: relative;
	padding: 1.0rem 0;
	letter-spacing: 0.1rem;
	font-size:1.4rem;
}

.registBtn_alert{
  text-align:center;
}

.registBtn_alert{
  position: relative;
  display: flex;
  align-items:center;
  justify-content: center;
  text-align:center;
}

.registBtn_alert > span{
  padding:0 0.2rem;
  font-size: 1.8rem;
}


.registBtn_alert:before,
.registBtn_alert:after{
  content: '';
  width: 1px;
  height: 1.8rem;
  background: #000;
  margin:0 10px;
 }

.bg-dark .registBtn_alert:before,
.bg-dark .registBtn_alert:after{
  content: '';
  width: 1px;
  height: 1.8rem;
  background: #FFF;
  margin:0 10px;
 }

.registBtn_alert:before {  transform: rotate(-25deg); }
.registBtn_alert:after {  transform: rotate(25deg); }

.btn_regist:after {
	content: '';
	display: block;
	width: 2rem;
  height: 2rem;;
  background-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="%23fff" xmlns="http://www.w3.org/2000/svg"><path d="M10.9,7.4L6.4,2.9C6.2,2.7,6,2.6,5.8,2.6c0,0,0,0,0,0c-0.2,0-0.5,0.1-0.6,0.3l0,0c-0.3,0.3-0.3,0.9,0,1.2L9,8 l-3.9,3.9c-0.3,0.3-0.3,0.9,0,1.2c0.2,0.2,0.4,0.3,0.6,0.3s0.4-0.1,0.6-0.3l4.5-4.5C11.2,8.3,11.2,7.7,10.9,7.4z"/></svg>');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-0.9rem);
}

.btn_regist:hover {
	color: #fff;
	background: #7e0043;
}

.btn_regist:focus,
.btn_regist:active,
.btn_regist.active {
	color: #fff;
	box-shadow: none;
	background-color: #650036;
	transform: translate(0, 0.3rem);
}