@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Noto+Serif+JP&family=Roboto:wght@500&family=Yusei+Magic&display=swap');

/*
header,footer {
display: none;
}
.footer__sns {
  display: none;
}
.recommend {
  display: none;
}
*/

.pc {
  display: none;
}
.sp {
  display: block;
}
.ttl-area,
.ttl-area .ttl01 {
  height:150px;
}

.rabilet {
}
.rabilet * {
  color:#fff;
}

/* common.css reset */
.page-container p, .page-container li, .page-container dt, .page-container dd {
  font-size: .875rem;
  line-height: 1.75;
}
/* @mixin fontsize($size) {
    font-size: ($size / 16) * 1rem;
} */
.page-container .rabilet p,
.page-container .rabilet li,
.page-container .rabilet dt,
.page-container .rabilet dd {
  font-size: .875rem;
}
/* end */


.rabilet .kv {
  background-color: #0b3196;
  background-image: url(../images/bg-kv.png);
  background-repeat:no-repeat repeat;
  background-size:auto;
  background-position: center top;
  height:310px;
}
.bg01 {
  background: #060054;
  background: -moz-linear-gradient(top,  #0a50b4 0%, #060054 180px);
  background: -webkit-linear-gradient(top,  #0a50b4 0%,#060054 180px);
  background: linear-gradient(to bottom,  #0a50b4 0%,#060054 180px);
}
.rabilet h1.kv-ttl {
  padding: 0;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 310px;
  max-width:352px;
}
.rabilet h1.kv-ttl .kv-img {
  margin:1rem 0 0 0;
}
.rb-container {
  max-width:900px;
  width:90%;
  margin:0 auto;
}
.rb-container.short {
  max-width:710px;
  margin:auto;
}

.sec {
}
/* common.css reset */
.page-container p, .page-container li, .page-container dt, .page-container dd {
  font-size: .875rem;
  line-height: 1.75;
}
/* @mixin fontsize($size) {
    font-size: ($size / 16) * 1rem;
} */

/* end */

.rabilet h2 {
  text-align: center;
}
#read-area {
  padding-top:2rem;
}
#read-area h2 {
  margin: 0 auto 1.8rem;
}
#read-area h2 img {
  width:162px;
}

#section01 {
}


.ttl-area {
  margin-top:2rem;
  background: url(../images/ttl-bg.svg)no-repeat center top;
  background-size:cover;
  height:85px;
  min-height: 85px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin-bottom:2rem;
}
.ttl-area .ttl01 {
  width: 140px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}


#section02 .ttl01 {
  width:112px;
}
#section03 .ttl01 {
  width:224px;
}
.read01 {
  padding:0 2em;
  margin-bottom: 1.5rem;
  text-align: left;
}
.read01 p {
  text-align: left;
}
.lineup-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
}
.lineup-flex li {
  width:46.8%;
  max-width:420px;
  margin:0 0 4rem;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  line-height: 1;
  padding-bottom: 4rem;
  flex-wrap:wrap;
}
.lineup-flex li a {
  color:#fff;
}
.sec {
  margin:3rem 0;
}

.lineup-img-area {
  position: relative;
  text-align: center;
  max-width:271px;
  max-height:231px;
  margin:0 auto;
}
.lineup-icn {
  position: absolute;
  right: -8%;
  top: 1%;
  z-index: 1;
}
.lineup-icn {
  width:41%;
}
/* .lineup-flex a:hover .lineup-icn img {
  opacity: 1;
} */
.posi01 {
  right: -1%;
  top: 2%;
}
.posi02 {
  right: -6%;
  top: -6%;
}
.posi03 {
  right: -1%;
  top: 2%;
}
.posi04 {
  right: -10%;
  top: 0;
}
.lineup-img-area.new:before {
  content:"";
  position: absolute;
  top:-2rem;
  left:0;
  right:0;
  margin:auto;
  background: url(../images/icn-new.svg)no-repeat 0 0;
  width:100%;
  height:284px;
  background-size:contain;
}
.lineup-img {
  position: relative;
  z-index: 0;
}
.lineup-detail {
  margin:0.5rem 0;
}
.page-container .rabilet .lineup-detail dt {
  font-size: 1.125rem;
  font-size: 1.0625rem; /*17px*/
  text-align: center;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 1rem;
}
.color-area {
  display: flex;
  justify-content: flex-start;
  flex-wrap:wrap;
  margin:auto;
  max-width:100%;
}
.color-area .color {
  margin:0.3rem 0;
  position: relative;
  padding:0 0 0 1.5rem;
  font-size:12px;
	text-align: left;
}
.new-icon {
	background-color: #FFD400;
	color: #DE0003;
	padding: 2px;
	border-radius: 2px;
	margin: 0 0 0 5px;
	font-weight: bold;
}
.color-area .color:before {
  content:"";
  position: absolute;
  left:0;
  top:1px;
  background: #ffffe9;
  width:16px;
  height:16px;
}
.color-area .color.pink:before {
  background: #faa2a9;
}

#section01 .detail-txt {
  margin: 1.5rem 0;
}
.detail-txt {
  margin: 1.5rem 0 0;
}

.detail-spec {
  border-top:1px solid #fff;
  padding-top: 1.5rem;
}

.btn01 {
  width:145px;
  max-width:100%;
  text-align:center;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
}
.bnr-area {
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
  margin:0 auto;
}
.bnr-area.col2 {
  justify-content: space-between;
  margin:0 auto;
  max-width:812px;
}
.bnr-area li {
  width:100%;
  margin:0 0 2rem;
}
.bnr-area.col2 li {
  margin-bottom:2rem;
}

a.btn-bnr,
div.btn-bnr {
  font-size:1.375rem;
  font-family: 'Kiwi Maru', serif;
  color:#060054;
  background: url(../images/bnr-bg.svg)no-repeat 0 0;
  background-size:391px 114px;
  max-width:345px;
  height:100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  line-height: 1.2;
  padding: 2rem 0 0 4rem;
  font-weight: 500;
  padding: 2.5rem 0 0 4.4rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  position: relative;
  flex-wrap:wrap;
}
a.btn-bnr:before,
div.btn-bnr:before {
  content:"";
  position: absolute;
  left: 3.2rem;
  top: 63%;
  background: url(../images/arrow01.svg) no-repeat 0 0;
  width:13px;
  height:15px;
  background-size:contain;
}
a.btn-bnr .txt-small,
div.btn-bnr .txt-small {
  color:#060054;
  font-size: 0.9375rem;
  margin-left: 0.5rem;
}
.bnr-area.col2.bnr-other {
  margin-top:3.5rem;
}
#section02 .read01 {
  margin-bottom:3rem;
}
#section02 {
}
#section03  {
  margin-bottom:3rem;
}
#section03 .read01 {
  padding: 0 1em;
  margin-bottom:3.3rem;
}
.lineup-detail.mt {
  margin-top:1.8rem;
}
#section03 li {
  margin-bottom:3rem;
}
#section04 {
  padding-bottom:2.5rem;
}

/* newが付いたら以下調整 */
/* .lineup-img-area {
  margin-bottom:2rem;
} */