@charset "UTF-8";
.image-container {
    overflow-x: auto; /* 横方向にスクロール可能 */
    -webkit-overflow-scrolling: touch; /* スムーズなスクロールを有効化 */
    white-space: nowrap; /* 画像が横に並ぶようにする */
    scroll-snap-type: x mandatory; /* スクロールスナップを有効化 */
	text-align: center;
}

.mangaimage {
    display: inline-block; 
    width: 400px; 
    max-width: 100%;
    margin-right: 5px;
    scroll-snap-align: center;
}

.mangaimage img {
    width: 100%!important;
	max-width: inherit!important;
	display: inline!important;
}

@media (max-width:575px){
	.mangaimage {
    	display: inline-block; 
    	width: 300px; 
    	max-width: 100%;
    	margin-right: 5px;
    	scroll-snap-align: center;
	}
}

/*----------------------------------------------------------- */
section {
  padding: 120px 0;
}

footer {
  padding: 30px 0;
}

/*----------------------------------------------------------- */
.bg_cl1 {
  background-color: #eeeef5;
}

.bg_cl2 {
  background-color: #f3f2f2;
}

.cl_base {
  color: #ff00cc;
}

.cl_main {
  color: #ef3300;
}

.cl_accent {
  color: #4265a1;
}

.cl_other1 {
  color: #4265a1;
}

.cl_other2 {
  color: #4265a1;
}

/*----------------------------------------------------------- */
.highlight {
  background: -webkit-linear-gradient(transparent 60%, #ffd200 50%);
  background: -o-linear-gradient(transparent 60%, #ffd200 50%);
  background: linear-gradient(transparent 60%, #ffd200 50%);
  font-weight: bold;
}

/*----------------------------------------------------------- */
a:link,
a:visited {
  color: #162bee;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/*----------------------------------------------------------- */
.wic_wrap {
  overflow-x: hidden;
}
.wic img {
  width: auto;
  max-width: unset;
}
.wic1 {
  margin-left: calc(50% - 650px);
}
.wic1 img {
  width: 1300px;
  max-width: 1300px;
}

.wic2 {
  margin-left: calc(50% - 1000px);
}

.wic2 img {
  width: 2000px;
  max-width: 2000px;
}

.wic3 {
  margin-left: calc(50% - 800px);
}

.wic3 img {
  width: 1600px;
  max-width: 1600px;
}

/*Page Top----------------------------------------------------------- */
.pagetop a {
  background-color: #54c2bd;
  filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.3));
}
.pagetop02 a {
  background-color: #54c2bd;
  filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.3));
}


/*MV----------------------------------------------------------- */


/*CTA----------------------------------------------------------- */
.cta {
  background: url(../../images/vln/pc_cta_bg.png);
}
.cta_wrap {
  position: relative;
}
.cta_main {
  margin-left: -48px;
}
.cta_btn {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 8%;
}
#fixCta3 {
    width: 500px;
    position: fixed;
    bottom: 0px;
    right: 0;
    z-index: 998;
}

/*yoyaku01----------------------------------------------------------- */
.yoyaku01 {
  background-color: #DA6466;
}

/*sec00----------------------------------------------------------- */
.sec00 {
  padding-top:50px;
  background: url(../../images/vln/pc_bg.png);
}

/*sec01----------------------------------------------------------- */
.sec01 {
  background: url(../../images/vln/pc_bg.png);
}

/*sec02----------------------------------------------------------- */
.sec02 {
  background: url(../../images/vln/pc_bg.png);
}


/*sec03----------------------------------------------------------- */
.sec03 {
  background: #ddf1f1;
}
.sec03 .white_box {
  border-radius: 0 20px 0 20px;
  background: url(../../images/vln/pc_sec03_bg.png) no-repeat right 60px top 60px;
  background-color: #fff;
}
.sec03 .checked-counter {
  text-align: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.sec03 .bmiCalc__area {
  max-width: 640px;
  margin: 0 auto;
}
.sec03 .checked-counter .btn-result {
  border: none;
  background-color: transparent;
  margin: 0 auto;
  cursor: pointer;
}
.sec03 .checked-counter .list-result {
  width: 100%;
  display: flex;
  margin: 20px auto;
  padding: 0;
  list-style: none;
}
.sec03 .checked-counter .list-result>li {
  text-align: center;
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 2px;
  padding: 0;
  border: 2px solid #54c2bd;
}
.sec03 .checked-counter .list-result>li>p:last-child {
  padding-top: 5px;
}
.sec03 .checked-counter .title {
  margin: 0;
  color: white;
  font-size: 24px;
  background: #54c2bd;
  font-weight: bold;
  padding-top: 3px;
}
.sec03 .checked-counter .view-count {
  margin: 0;
  font-size: 30px;
  font-weight: bold;
  white-space: nowrap;
  padding-top: 5px;
}
.sec03 .list-checkbox {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sec03 .list-checkbox>li {
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: bold;
}
.sec03 .list-checkbox>li>p:last-of-type {
  padding-top: 5px;
}
.sec03 .list-checkbox input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  cursor: default;
  box-sizing: border-box;
  position: relative;
  padding: 0;
  margin: 0;
  margin-left: 0.4rem;
  margin-right: 0.5rem;
  border: 2px solid #a6a6a6;
  border-radius: 4px;
  display: inline-block;
  width: 21px;
  height: 21px;
  min-width: 21px;
  min-height: 21px;
  top: -2px;
}
.sec03 .list-checkbox input:checked {
  border: none;
  background: #54c2bd;
}
.sec03 .list-checkbox input:checked::before {
  color: #fff;
  content: "";
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(-45deg);
  transform: translateX(-50%) rotate(-45deg);
  box-sizing: border-box;
  height: 7.5px;
  width: 15px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  margin: 0;
  padding: 0;
}
.sec03_ko {
  font-size: 30px;
}
.sec03 .list-checkbox>li .btn {
  display: flex;
}
.sec03 .list-checkbox>li .btn span {
  margin-left: 10px;
}
.sec03 .list-checkbox input {
  top: 6px;
}

/*sec04----------------------------------------------------------- */


/*sec05----------------------------------------------------------- */
.sec05 {
  background: url(../../images/vln/pc_bg.png);
}


/*sec06----------------------------------------------------------- */
.sec06 {
  background: url(../../images/da/pc_sec06_bg_ogura3.png) no-repeat center bottom/cover;
  padding-bottom: 160px;
}
.sec06 [class*="fx-col"] {
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 0px;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

/*sec07----------------------------------------------------------- */
.sec07_but {
  margin-top: -240px;
}
.sec07 {
  background: url(../../images/vln/pc_sec07_bg.png) no-repeat center top/cover;
  padding-bottom: 160px;
}

/*sec08----------------------------------------------------------- */
.sec08_heart {
  margin-top: -240px;
}
.sec08 {
  background: #fff9ed;
}
.sec08_main {
  margin-left: -68px;
}

/*sec09----------------------------------------------------------- */


/*sec10----------------------------------------------------------- */
.sec10 {
  background: url(../../images/vln/pc_sec10_bg.png);
}
.sec10 p {
  margin-left: -17px;
}

/*sec11----------------------------------------------------------- */
.sec11_arrow {
  margin-top: -180px;
}
.sec11 h2 p {
  margin-left: -110px;
}

/*sec12----------------------------------------------------------- */


/*Footer----------------------------------------------------------- */
.footer_nav1 {
  font-size: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  -ms-align-items: flex-end;
  align-items: flex-end;
  margin-top: -15px;
}

.footer_nav1 > * {
  padding-top: 15px;
}

footer .copy {
  text-align: center;
}

footer a:link, footer a:visited {
  color: #000;
  transition: all .3s;
}

footer a:hover, footer a:focus {
  color: #000;
  opacity: .7;
}

footer ul li {
  display: inline-block;
  margin: 0 5px;
  white-space: nowrap;
}

footer .copy {
  font-size: 90%;
}