﻿/* LPヘッダーなしの考慮 */
html {
scroll-padding-top: 0px;
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: 0px;
  }
}

/* --------------------------------
  Form override
-------------------------------- */
.vnl26-un_formArea {
  position: relative;
  z-index: var(--vnl26-stacking-base);
  padding: 4.0625rem 0 0;
  background-color: var(--vnl26-color-bg_beige_light);
}
@media (min-width: 768px) {
  .vnl26-un_formArea {
    padding: 4rem 0 0;
  }
}

.vnl26-un_formArea_header {
  position: relative;
}
@media (min-width: 768px) {
  .vnl26-un_formArea_header {
    margin-top: 0;
  }
}

.vnl26-un_formArea_inner {
  position: relative;
}
@media (min-width: 768px) {
  .vnl26-un_formArea_inner {
    max-width: calc(1040px + var(--vnl26-content-inline-padding) * 2);

    margin-inline: auto;
    padding-inline: var(--vnl26-content-inline-padding);
  }
}

.vnl26-un_formArea_body {
  margin-top: 2.5rem;
}
.vnl26-un_formArea_body .vnl26-bl_info_section-formField_list {
  background-color: var(--vnl26-color-white);
}
@media (max-width: 767.98px) {
  .vnl26-un_formArea_body .vnl26-bl_info_section-formField_descDetail {
    padding: 0 1rem;
  }
}
.vnl26-un_formArea_body .vnl26-bl_info_section-formField_productItem_name {
  line-height: 1.4;
}
.vnl26-un_formArea_body .vnl26-el_selectBox.vnl26-el_selectBox__delivery {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.vnl26-un_formArea_body .vnl26-el_radioButtonGroup.vnl26-el_radioButtonGroup__payment {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.vnl26-un_formArea_body .vnl26-el_fieldset:is(.vnl26-el_caption_list + *) {
  margin-top: 1rem;
}

.vnl26-un_formAreaTtl_info {
  margin: 0 auto;
  width: 18.875rem;
}
@media (max-width: 767.98px) {
  .vnl26-un_formAreaTtl_info {
    position: absolute;
    top: -1.125rem;
    left: 50%;

    translate: -50% -100%;
  }
}
@media (min-width: 768px) {
  .vnl26-un_formAreaTtl_info {
    width: 29.5rem;
  }
}

.vnl26-un_formAreaTtl {
  text-align: center;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .vnl26-un_formAreaTtl {
    font-size: 2.25rem;
  }
}

.vnl26-un_formArea_bottom {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 3rem 0 4.5rem;
  background-color: var(--vnl26-color-white);
}
@media (min-width: 768px) {
  .vnl26-un_formArea_bottom {
    padding: 3rem 0 6.5rem;
    background-color: var(--vnl26-color-bg_beige_light);
  }
}

.vnl26-un_submitBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.25rem 2.25rem 0.25rem 1.875rem;
  border-radius: 0.25rem;
  width: 18rem;
  min-height: 4rem;
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background-color: var(--_vnl26-btn-bg-color);
  text-align: center;
  text-decoration: none;
  color: var(--vnl26-color-white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;

  --_vnl26-btn-bg-color: var(--vnl26-color-lp_red);
  --_vnl26-btn-icon-size: 1rem;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .vnl26-un_submitBtn {
    border-radius: 0.375rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .vnl26-un_submitBtn:where(:-webkit-any-link, :enabled, summary):hover {
    -webkit-transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: var(--_vnl26-btn-bg-color);

    --_vnl26-btn-bg-color: var(--vnl26-color-lp_red_70);
    --_vnl26-btn-color: var(--vnl26-color-white);
  }
  .vnl26-un_submitBtn:where(:-moz-any-link, :enabled, summary):hover {
    -moz-transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: var(--_vnl26-btn-bg-color);

    --_vnl26-btn-bg-color: var(--vnl26-color-lp_red_70);
    --_vnl26-btn-color: var(--vnl26-color-white);
  }
  .vnl26-un_submitBtn:where(:any-link, :enabled, summary):hover {
    transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: var(--_vnl26-btn-bg-color);

    --_vnl26-btn-bg-color: var(--vnl26-color-lp_red_70);
    --_vnl26-btn-color: var(--vnl26-color-white);
  }
}

.vnl26-un_submitBtn_icon {
  display: inline-grid;
  position: absolute;
  right: 0.75rem;
  width: var(--_vnl26-btn-icon-size);
  height: var(--_vnl26-btn-icon-size);
  background-color: currentColor;

  place-content: center;
  -webkit-mask: url(../../assets/img/common/icon_arrow.svg) no-repeat center/contain;
          mask: url(../../assets/img/common/icon_arrow.svg) no-repeat center/contain;
}
.vnl26-el_btn__back .vnl26-un_submitBtn_icon {
  right: auto;
  left: 0.75rem;

  rotate: 180deg;
}

/* custom override */
.vnl26-un_formArea {
  background-color: var(--vnl26-color-white);
}
@media (min-width: 768px) {
  .vnl26-un_formArea_bottom {
    padding: 3rem 0 6.5rem;
    background-color: var(--vnl26-color-white);
  }
}


/* --------------------------------
  from style.css
-------------------------------- */
@media (max-width: 767.98px) {

	body {
		min-width: 0 !important;
	    width: 100%;
	    overflow-x: hidden;
	}

	.vnl26-un_page_mainArea {
		#main_content {
			margin-top: 0;
			min-width: 0;
		}
		#main_content2 {
			margin-top: 0;
			min-width: 0;
		}
		.fv{
		  width: auto;
		}

		.block_img {
			width: 100%;
		}

		
		/*============================
		common
		===============================*/
		.clearfix:after,
		.top_block__list:after,
		.block01__list:after,
		.block01_error__list:after,
		.block01_turn__list:after,
		.block02__list_4step:after {
		    display: block;
		    clear: both;
		    content: "";
		}
		
		.rap {
		    overflow: hidden;
		    clear: both;
		}
		
		img {
		    display: block;
		    vertical-align: bottom;
		    width: 100%;
		    max-width: 100%;
		}
		
		html,
		body {
		    height: 100%;
		    padding: 0;
		    margin: 0;
		    background-color: #ffffff;
		}
		
		body {
		    width: 100%;
		    overflow-x: hidden;
		}
		
		/*============================
		main
		===============================*/
		/*fv
		---------------------------------------*/
		#fv {
		    text-align: center;
		    border-top: 6px solid #ff913d;
		    
		}
		
		
		/*block_conver
		------------------------------------------------*/
		.pl {
		    position: relative;
		}
		
		.limited-cv-btn {
		    position: absolute;
		    top: 20%;
		    right: 0;
		    left: 0;
		    margin: 0 auto;
		    width: 75%;
		}
		
		.block_conver {
		    position: relative;
		}
		
		.mb10 {
		    margin-bottom: 10%;
		}
		
		.block_conver__97 {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 16%;
		    margin-left: 0.5%;
		    height: auto;
		}
		
		.block_conver__btm_block02 {
		    background: #303d64;
		    background-size: 100% auto;
		    padding: 4px 17.9% 3%;
		}
		
		
		
		/*block_img
		-------------------------------------*/
		.block_img {
		    width: 100%;
		    margin: 0 auto;
		    text-align: center;
		}
		
		
		/*other_item
		-------------------------------------*/
		.other_item {
		    width: 100%;
		    margin: 0 auto 100px;
		    text-align: center;
		}
		
		.other_item>img {
		    margin-bottom: 30px;
		}
		
		.other_item a {
		    display: block;
		    margin-bottom: 10px;
		}
		
		.other_item a:hover {
		    filter: alpha(opacity=80);
		    -moz-opacity: 0.8;
		    opacity: 0.8;
		}
		
		
		
		/*----------------------------------------
		 footer 
		----------------------------------------*/
		footer {
		    margin-top: 16px;
		}
		
		footer li {
		    text-align: center;
		    margin-bottom: 6px;
		    font-size: 12px;
		}
		
		footer li a {
		    color: #1f1f1f;
		    text-decoration: none;
		}
		
		footer .copy {
		    text-align: center;
		    padding: .9em;
		    line-height: 1.2em;
		    font-size: 10px;
		    color: #1f1f1f;
		    background-color: #ff913d;
		}
		
		/* スライダー */
		.slider01 {
		    background: #FFFDFF;
		    padding-bottom: 8%;
		}
		
		.slider02 {
		    background: url(images/slider02.jpg);
		    background-size: cover;
		    background-position: center center;
		    background-repeat: no-repeat;
		    padding-bottom: 8%;
		}
		
		.slider03 {
		    background: url(images/slider03.jpg);
		    background-size: cover;
		    background-position: center center;
		    background-repeat: no-repeat;
		    padding-bottom: 8%;
		}
		
		.slider04 {
		    background: url(images/slider04.jpg);
		    background-size: contain;
		    background-color: #FFFCFE;
		    background-position: top center;
		    background-repeat: no-repeat;
		    padding-bottom: 8%;
		}
		
		.slider_back {
		    margin: 0 5%;
		    display: flex;
		    align-items: center;
		    height: 500px;
		}
		
		.slider video {
		    width: 100%;
		}
		
		.prev.slick-arrow {
		    position: absolute;
		    width: 5%;
		    left: 7%;
		    top: 45%;
		    z-index: 1;
		}
		
		.next.slick-arrow {
		    position: absolute;
		    width: 5%;
		    right: 7%;
		    top: 45%;
		    z-index: 1;
		}
		
		
		.slick-slide {
		    outline: none;
		}
		
		
		/*----------------------------------------
		 movie
		----------------------------------------*/
		.fv{
		  position: relative;
		  height: 151vw;
		}
		
		.fv__movie{
		  width: 100%;
		}
		
		.fv__img{
		  position: absolute;
		  top: 0%;
		  left: 0%;
		  width: 100%;
		  height: auto;
		}
		
		.inner01{
		  position: relative;
		}
		
		.inner01__movie{
		  position: absolute;
		  top: 43.5%;
		  left: 9%;
		  width: 84%;
		}
		 
		.inner02{
		  position: relative;
		}
		
		.inner02__movie{
		  position: absolute;
		  top: 32.8%;
		  left: 9%;
		  width: 80%; 
		}
	}

}