@charset "UTF-8";
:root {
  --main-color: #0063A0;
  --sub-color:  #00A7EB;
  --color-gray: #878787;
  --color-sky:  #4FBBEA;
}

.block-footer { margin-top: 0;}
.block-footer--top-frame,
.block-footer--bottom-frame { display: none;}
div.wrapper_ > div.container_ { width: 100%;}

@media only screen and (min-width: 751px) {
  #freedelivery .forSP { display: none;}
}
@media only screen and (max-width: 750px) {
  #freedelivery .forPC { display: none;}
}

/*-----------------------------------------
  Common
-----------------------------------------*/
#freedelivery { width: 100%; min-width: 1220px; padding: 0; color: #000000;}
#freedelivery * { letter-spacing: 0.06em; box-sizing: border-box;}
#freedelivery h1,
#freedelivery h2,
#freedelivery h3,
#freedelivery h4 { padding: 0; margin: 0; font-weight: normal;}
#freedelivery a  { text-decoration: none; color: inherit; transition: all .3s;}
#freedelivery a:hover { text-decoration: none; opacity: 0.8;}
#freedelivery img { max-width: 100%; height: auto; vertical-align: bottom;}
#freedelivery sup { font-size: 0.7em; line-height: 1; vertical-align: text-top;}
#freedelivery .contents_inner { width: 100%; max-width: 1220px; margin: 0 auto;}

@media only screen and (max-width: 750px) {
  #freedelivery { min-width: unset; padding: 0;}
}

/*-----------------------------------------
  Background
-----------------------------------------*/
#freedelivery .freedelivery_bg_frame {
	background: url(/cms/img/usr/freedelivery202508/bg.png) no-repeat center top;
	-webkit-background-size: cover;
	background-size: cover;
}
@media only screen and (max-width: 750px) {
	#freedelivery .freedelivery_bg_frame {
		background: url(/cms/img/usr/freedelivery202508/bg_sp.jpg) no-repeat center top;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
}

/*-----------------------------------------
  HeadTitle
-----------------------------------------*/
#freedelivery .mv { text-align: center;}

/*-----------------------------------------
  Navi
-----------------------------------------*/
#freedelivery .nav { padding: 40px auto 0; margin: 60px auto 0;}
#freedelivery .nav ul { display: flex; justify-content: center; gap: 0 17px;}
#freedelivery .nav li { width: 340px; height: 80px; border-radius: 5px; position: relative;}
#freedelivery .nav a  {
  width: 100%;
  height: 100%;
	border: var(--sub-color) 1px solid;
	border-radius: 5px;
  font-size: 14px;
  color: var(--color-gray);
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
}
#freedelivery .nav li::before {
  content: '';
  width: 100%;
  height: 100%;
	border-radius: 5px;
	background: #F3F8FB;
  position: absolute;
  bottom: -4px;
  right: -4px;
}
#freedelivery .nav a::after {
  content: '';
  width: 9px;
  height: 9px;
  border-top: var(--sub-color) 1px solid;
  border-right: var(--sub-color) 1px solid;
  position: absolute;
  transform: rotate(135deg);
  top: 33px;
  right: 2em;
}
#freedelivery .nav a strong { font-size: 18px; font-weight: bold; color: var(--main-color);}
#freedelivery .nav li:first-child a { border-color: var(--main-color); background: var(--main-color); color: #CDE8F9;}
#freedelivery .nav li:first-child a::after { border-color: #FFF;}
#freedelivery .nav li:first-child a strong { color: #FFFFFF;}

@media only screen and (max-width: 750px) {
  #freedelivery .nav { padding: 40px 20px 20px; margin: 0 auto;}
	#freedelivery .nav ul { flex-direction: column; gap: 14px;}
	#freedelivery .nav li { width: 100%; height: 66px;}
  #freedelivery .nav a { width: 100%; height: 66px; font-size: 14px;}
  #freedelivery .nav a::after { top: 25px; right: 1.2em;}
  #freedelivery .nav a strong { font-size: 16px;}
}

/*-----------------------------------------
  Message
-----------------------------------------*/
#freedelivery .message {
  margin: 46px 0 0;
  text-align: center;
  background-image: url(/cms/img/usr/freedelivery202508/message_bg.png);
	background-repeat: no-repeat;
	background-position: center top;
  position: relative;
}
#freedelivery .message p { font-size: 16px; line-height: 2.5;}
#freedelivery .message p + p { margin-top: 1em;}
#freedelivery .message p strong { font-size: 18px; font-weight: bold; color: var(--main-color);}
#freedelivery .message p .line  { background: linear-gradient(transparent 50%, #F3F8FB 50%);}

@media only screen and (max-width: 750px) {
  #freedelivery .message {
		padding: 60px 0; 
		margin: 0;
		background-image: url(/cms/img/usr/freedelivery202508/message_bg_sp.png);
		background-position: center top;
		-webkit-background-size: 90% auto;
		background-size: 90% auto;
	}
  #freedelivery .message p { font-size: 14px; line-height: 2;}
  #freedelivery .message p strong { font-size: 16px;}
}

/*-----------------------------------------
  Item
-----------------------------------------*/
#freedelivery #item { padding: 0 0 95px; margin: 75px 0 0; position: relative;}
#freedelivery #item .limited { position: relative;}
#freedelivery #item .limited span {
  width: 280px;
  height: 60px;
  margin: auto;
  border: 1px solid var(--main-color);
  border-radius: 30px;
  font-size: 26px;
  text-align: center;
  line-height: 60px;
  color: var(--main-color);
  display: block;
  background: #F4FBFE;
  position: relative;
  z-index: 1;
}
#freedelivery #item .limited::after { content: ''; width: 100%; height: 1px; background: var(--main-color); position: absolute; top: 50%; z-index: 0;}
#freedelivery #item .item_tit h2 { margin: 40px 0 0; font-size: 50px; text-align: center; line-height: 1.4; color: #555;}
#freedelivery #item .item_tit h2 span { font-size: inherit; color: var(--main-color);}
#freedelivery #item .item_warap { margin: 50px 0 28px; display: flex; flex-wrap: wrap; justify-content: space-between;}
#freedelivery #item .item_warap .item_list { width: calc((100% - 106px)/ 2); margin: 0 0 70px; display: flex; flex-direction: column;}
#freedelivery #item .item_ex { padding: 50px 0 0 0; margin: 0 auto 38px; display: flex; position: relative;}
#freedelivery #item .item_genre {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  font-size: 14px;
	text-align: center;
  line-height: 1.28;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--sub-color);
	position: absolute;
	top: 0;
	left: 0;
}
#freedelivery #item .list02 .item_genre { background: #0088EB;}
#freedelivery #item .list03 .item_genre { background: #27CCCC;}
#freedelivery #item .list04 .item_genre { background: #27CCCC;}
#freedelivery #item .item_ex figure { flex-shrink: 0; position: relative; z-index: 2;}
#freedelivery #item .list01 .item_ex figure { width: 90px; padding: 0  1px 0  0px; top: 25px;}
#freedelivery #item .list02 .item_ex figure { width: 90px; padding: 0  1px 0  1px; top: 20px;}
#freedelivery #item .list03 .item_ex figure { width: 90px; padding: 0  7px 0  6px; top: 26px;}
#freedelivery #item .list04 .item_ex figure { width: 90px; padding: 0 12px 0 11px; top: 35px;}
#freedelivery #item .item_lead { min-width: 280px; margin: 0 0 16px; font-size: 14px; line-height: 1.85; color: #555;}
#freedelivery #item .item_lead::before,
#freedelivery #item .item_lead::after  { content: ''; width: 20px; border-top: var(--sub-color) 1px solid; display: inline-block; position: relative; top: -6px;}
#freedelivery #item .item_lead::before { margin: 0 5px 0 0; transform: rotate(45deg);}
#freedelivery #item .item_lead::after  { margin: 0 0 0 5px; transform: rotate(-45deg);}
#freedelivery #item .item_exTxt { padding: 20px 0 0;}
#freedelivery #item .item_exTxt p {
  padding-left: 27px;
  font-size: 14px;
  line-height: 1.428;
  letter-spacing: 0;
  white-space: nowrap;
  background: url(/cms/img/usr/freedelivery202503/ico_check.png) no-repeat left top / 19px;
}
#freedelivery #item .item_exTxt p + p { margin: 15px 0 0;}
#freedelivery #item .item_detail { margin: auto 0 0 0; font-size: 16px; text-align: center;}
#freedelivery #item .item_detailTxt { min-height: calc(16px * 1.625 * 3); margin: 0 0 8px; font-size: 16px; line-height: 1.625;}
#freedelivery #item .item_detailPrice { margin: 0 0 24px;}
#freedelivery #item .item_detailPrice small { font-size: 12px;}
#freedelivery #item .item_list.list04 .item_detailPrice { position: relative; top: -1.5em;}
#freedelivery #item .item_detailCatch { max-width: calc(50% - 5px); margin: 0 auto 12px 0; color: var(--main-color); line-height: 1;}
#freedelivery #item .item_detailCatch::before,
#freedelivery #item .item_detailCatch::after  { content: ''; width: 20px; border-top: var(--main-color) 1px solid; display: inline-block; position: relative; top: -6px;}
#freedelivery #item .item_detailCatch::before { margin: 0 5px 0 0; transform: rotate(45deg);}
#freedelivery #item .item_detailCatch::after  { margin: 0 0 0 5px; transform: rotate(-45deg);}
#freedelivery #item .item_btn { padding: 0 0 24px; display: flex; gap: 10px; position: relative;}
#freedelivery #item .btn_base a {
  width: 100%;
  height: 60px;
  margin: 0 auto;
  color: var(--color-gray);
	display: flex;
	justify-content: center;
	align-items: center;
  background: #fff;
  border: var(--color-gray) 1px solid;
  border-radius: 8px;
}
#freedelivery #item .btn_base > div { width: calc(50% - 5px);}
#freedelivery #item .btn_base a span { font-weight: bold; position: relative;}
#freedelivery #item .btn_base a span::after {
  content: '';
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: var(--color-gray) 1px solid;
  border-right: var(--color-gray) 1px solid;
  transform: rotate(135deg);
  position: absolute;
  top: 4px;
  right: -1.5em;
}
#freedelivery #item .btn_base a.btn_cart { border: var(--main-color) 1px solid; color: #fff; background: var(--main-color);}
#freedelivery #item .btn_base a.btn_cart span::after { border-top: #fff 1px solid; border-right: #fff 1px solid; top: 7px; transform: rotate(45deg);}
#freedelivery #item .btn_base .ruby { font-size: 9px; color: var(--color-gray); position: absolute; right: 0; bottom: 0;}
#freedelivery #item .note_txt { font-size: 12px; text-align: right; color: #555;}

@media only screen and (max-width: 750px) {
  #freedelivery #item { padding: 0 0 40px; margin: 0;}
  #freedelivery #item .limited span { width: 150px; height: 40px; font-size: 18px; line-height: 40px;}
  #freedelivery #item .item_tit h2 { margin: 26px 0 0; font-size: clamp(22px,6.1vw,26px); line-height: 1.5;}
  #freedelivery #item .item_warap { max-width: 430px; padding: 0 20px; margin: 34px auto 18px; flex-direction: column; gap: 40px;}	
	#freedelivery #item .item_warap .item_list  { width: 100%; margin: 0; display: flex; flex-direction: column;}
  #freedelivery #item .list01 .item_ex figure { top: 10px;}
  #freedelivery #item .list02 .item_ex figure { top: 20px;}
  #freedelivery #item .list03 .item_ex figure { top: 20px;}
  #freedelivery #item .list04 .item_ex figure { top: 25px;}
	#freedelivery #item .item_ex { margin: 0 auto 20px;}
	#freedelivery #item .item_genre { left: -5px;}
  #freedelivery #item .item_lead { min-width: unset; font-size: clamp(12px,3.27vw,14px);}
  #freedelivery #item .item_exTxt p { font-size: clamp(12px,3.27vw,14px);}
  #freedelivery #item .item_exTxt p + p { margin: min(15px,3.5vw) 0 0;}
	#freedelivery #item .item_list.list04 .item_detailPrice { top: 0;}
  #freedelivery #item .item_detail { margin: 18px 0 0;}
  #freedelivery #item .item_detailTxt { min-height: unset; margin: 0 0 10px;}
  #freedelivery #item .item_detailCatch { width: 100%; max-width: 100%; padding: 0; margin: 30px 0 12px;}
  #freedelivery #item .item_btn { padding: 0 12%; flex-direction: column; gap: 8px;}
  #freedelivery #item .item_btn > div { width: 100%;}
	#freedelivery #item .btn_base .ruby { margin-top: 10px; font-size: 10px; text-align: right; position: relative; right: auto; bottom: auto;}
  #freedelivery #item .note_txt { max-width: fit-content; padding: 0 20px; margin: 0 auto; font-size: 12px; text-align: left;}
}

/*-----------------------------------------
  Yorisoi
-----------------------------------------*/
#freedelivery #yorisoi {
	padding: 60px 0;
	background: url(/cms/img/usr/freedelivery202508/yorisoi_bg.png) no-repeat center top;
	-webkit-background-size: cover;
	background-size: cover;
}
#freedelivery #yorisoi h2 { margin: 0 0 38px; font-size: 36px; font-weight: 700; text-align: center; color: #707070;}
#freedelivery #yorisoi ul { margin: 0 0 38px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;}
#freedelivery #yorisoi ul li {
  width: 126px;
  height: 126px;
  border-radius: 126px;
  font-size: 15px;
  text-align: center;
	line-height: 1.4;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-sky);
}
#freedelivery #yorisoi ul li .small { font-size: 11px; text-align: center; color: #FFF; display: block;}
#freedelivery #yorisoi .note_txt { padding: 0 65px 0 0; font-size: 10px; text-align: right; color: #707070; display: block;}

@media only screen and (max-width: 750px) {
	#freedelivery #yorisoi h2 { margin: 0 0 25px; font-size: 24px; font-weight: 400; letter-spacing: -0.04em;}
	#freedelivery #yorisoi .note_txt { padding: 0; font-size: 10px; text-align: center;}
	#freedelivery #yorisoi ul { max-width: 450px; margin: 0 auto 38px;}
	#freedelivery #yorisoi ul li { width: 105px; height: 105px; border-radius: 105px; font-size: 14px; letter-spacing: -1px; word-break: keep-all;}
	#freedelivery #yorisoi ul li div { font-size: 14px; letter-spacing: -1px;}
	#freedelivery #yorisoi ul li .small { font-size: 10px; letter-spacing: -1px;}
}

/*-----------------------------------------
  Visumo
-----------------------------------------*/
#freedelivery #visumoFrame { padding: 60px 0; background: #EEF9FF;}
#freedelivery #visumoFrame .contents_tit h2 { margin: 0; font-size: 36px; font-weight: 700; text-align: center; line-height: 1.36; color: #555555;}
#freedelivery #visumoFrame .contents_tit p { margin: 25px 0 0; font-size: 16px; text-align: center; line-height: 2;}

.visumo_title img { width: 34px; margin: 0px 16px 6px 0px;}
.vsm-slider .ecbn-selection-wrapper .ecbn-selection-title,
.vsm-slider .ecbn-selection-wrapper .ecbn-selection-description { display: none;}
.ecbn-selection-widget { max-width: 1220px !important; margin: 30px 0 0 !important;}
.vsm-slider .ecbn-selection-wrapper .ecbn-selection-slide-wrapper { width: 100% !important;}
.vsm-slider .ecbn-selection-widget-new div.ecbn-selection-wrapper { margin: 0 !important;}
.vsm-slider .ecbn-selection-wrapper .ecbn-selection-slider-controls-direction a { top: 50% !important; transform: translateY(-50%); z-index: 1 !important;}
.vsm-slider .ecbn-selection-to-nextpage { display: none;}

@media (min-width: 751px) {
  .vsm-slider .ecbn-selection-wrapper li.ecbn-selection-item { margin-right: 20px !important;}
  .vsm-slider .ecbn-selection-wrapper li.ecbn-selection-item > div > a { width: 290px !important; height: 290px !important;}
}
@media only screen and (max-width: 750px) {
  #freedelivery #visumoFrame .contents_tit h2 { margin: 10px 0 0; font-size: 26px; font-weight: 400;}
  #freedelivery #visumoFrame .contents_tit p  { margin: 15px 0 0;}
  .visumo_title img { margin-bottom: 0;}
  .vsm-slider .ecbn-selection-wrapper .ecbn-selection-slide-wrapper { overflow: visible !important;}
  .vsm-slider .ecbn-selection-wrapper .ecbn-selection-slide-wrapper .ecbn-selection-snap { margin-left: 22px;}
  .vsm-slider .ecbn-selection-wrapper li.ecbn-selection-item { width: calc(100vw - 44px) !important;}
}

/*-----------------------------------------
  Howto
-----------------------------------------*/
#freedelivery #howto { 
	padding: 60px 0;
	margin: 0;
	background-color: #D0E9FE;
	background-image: url(/cms/img/usr/freedelivery202508/howto_bg.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	-webkit-background-size: cover;
	background-size: cover;
}
#freedelivery #howto h2 { font-size: 36px; font-weight: 700; text-align: center; color: var(--main-color);}
#freedelivery #howto h2 span { font-size: 26px; font-weight: 400; text-align: center; color: var(--color-gray); display: block;}
#freedelivery #howto h2 span::before,
#freedelivery #howto h2 span::after  { content: ''; width: 30px; border-top: var(--color-gray) 1px solid; display: inline-block; position: relative; top: -8px;}
#freedelivery #howto h2 span::before { margin: 0 5px 0 0; transform: rotate(45deg);}
#freedelivery #howto h2 span::after  { margin: 0 0 0 5px; transform: rotate(-45deg);}
#freedelivery #howto .howto_list { margin: 50px 0 0; display: flex; gap: 40px;}
#freedelivery #howto .howto_list li { flex: 1;}
#freedelivery #howto .howto-video { padding-top: 56.25%; margin: 16px 0 0; position: relative;}
#freedelivery #howto .howto-video iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

#freedelivery #trialset { padding: 60px 0 0; margin: 60px 0 0; border-top: #E1E1E1 1px solid;}
#freedelivery #trialset h3 {
	width: 100%;
	max-width: 800px;
	height: 50px;
	padding: 0;
	margin: 0 auto 40px;
	border: var(--main-color) 1px solid;
	border-radius: 50px;
	font-size: 22px;
	color: #555;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
#freedelivery #trialset h3::before {
	content: '';
	width: 24px;
	border-top: var(--main-color) 1px solid;
	display: block;
	position: absolute;
	left: calc(50% - 12px);
	bottom: -4px;
	transform: rotate(45deg);
}
#freedelivery #trialset ul { max-width: 740px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 40px;}
#freedelivery #trialset ul > li { width: calc(50% - 20px); margin: 0 0 46px;}
#freedelivery #trialset .trialset_head { margin: 0 0 20px; font-size: 19px; text-align: center; color: #555;}
#freedelivery #trialset .trialset_head::before,
#freedelivery #trialset .trialset_head::after  { content: ''; width: 20px; border-top: #555 1px solid; display: inline-block; position: relative; top: -6px;}
#freedelivery #trialset .trialset_head::before { margin: 0 5px 0 0; transform: rotate(45deg);}
#freedelivery #trialset .trialset_head::after  { margin: 0 0 0 5px; transform: rotate(-45deg);}
#freedelivery #trialset figure { margin: 0 0 8px; text-align: center;}
#freedelivery #trialset .trialset_Txt { margin: 0 -30px; font-size: 14px; text-align: center; line-height: 1.4; letter-spacing: -0.3px;}

@media (min-width: 751px) {
	#freedelivery #trialset ul li.list01 .trialset_head { margin: 0 calc(-100% - 40px) 20px 0;}
	#freedelivery #trialset ul li.list02 .trialset_head { min-height: 28.5px; font-size: 0;}
	#freedelivery #trialset ul li.list02 .trialset_head::before,
	#freedelivery #trialset ul li.list02 .trialset_head::after  { display: none;}
}
@media only screen and (max-width: 750px) {
	#freedelivery #howto { 
		padding: 40px 0 80px;
		background-image: url(/cms/img/usr/freedelivery202508/howto_bg_sp.jpg);
		-webkit-background-size: cover;
		background-size: cover;
	}
	#freedelivery #howto h2 { font-weight: 400;}
  #freedelivery #howto .howto_list  { margin: 25px 0 0; display: block; position: relative;}
  #freedelivery #howto .slick-slide { margin: 0 8px;}
	#freedelivery #howto .slick-list,
	#freedelivery #howto .slick-slide,
  #freedelivery #howto .howto-video { -ms-touch-action: pan-y; touch-action: pan-y;}
  #freedelivery #howto .slick-arrow {
    width: 42px;
    height: 42px;
    border: none;
    outline: 0;
    background: #fff;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    transform: translateY(-50%);
    opacity: 0.7;
  }
  #freedelivery #howto .slick-arrow::before {
    content: '';
    width: 9px;
    height: 9px;
    margin: auto;
    border-right: #333 3px solid;
    border-top: #333 3px solid;
    position: absolute;
    left: 17px;
    top: 9px;
    bottom: 0;
    transform: rotate(45deg) translate(-50%);
  }
  #freedelivery #howto .slick-prev { left: 0; right: auto; transform: scale(-1,1) translateY(-50%);}
	
	#freedelivery #trialset { padding: 50px 0 0; margin: 50px 20px 0;}
	#freedelivery #trialset h3 { height: 82px; border-radius: 82px; margin: 0 auto 30px; font-size: 20px; line-height: 1.4;}
	#freedelivery #trialset ul { padding: 0; flex-direction: column; gap: 0;}
	#freedelivery #trialset ul > li { width: 100%; margin: 0 0 30px;}
	#freedelivery #trialset ul li figure { padding: 0 20px;}
	#freedelivery #trialset .trialset_head { margin: 0 0 10px;}
	#freedelivery #trialset ul li.list02 .trialset_head { display: none;}
	#freedelivery #trialset .trialset_Txt { margin: 0 -20px;}
	
}