﻿@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
-----------------------------------------*/
div.wrapper_ > .container_ {
	background: #F5FCFF url(/cms/img/usr/freedelivery202604/bg.png) center top / cover no-repeat;
}
@media only screen and (max-width: 750px) {
	div.wrapper_ > .container_ {
		background: none;
	}
  div.wrapper_ .forcms_block:has(> #freedelivery) {
		background: #F5FCFF url(/cms/img/usr/freedelivery202604/bg.png) center bottom / 100% auto no-repeat;
	}
}

/*-----------------------------------------
  HeadTitle
-----------------------------------------*/
#freedelivery .mv { text-align: center;}
#freedelivery .mv img { width: 100%;}

/*-----------------------------------------
  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;}
}

/*-----------------------------------------
  Campaign
-----------------------------------------*/
#freedelivery .campaign {
  margin: 70px 0;
  text-align: center;
}
#freedelivery .campaign .campaign_top {
  margin: 0 0 25px;
}
#freedelivery .campaign .campaign_top p {
  font-size: 26px;
  color: var(--main-color);
}
#freedelivery .campaign .campaign_top p::before,
#freedelivery .campaign .campaign_top p::after {
  position: relative;
  display: inline-block;
  width: 50px;
  top: -12px;
  border-top: var(--sub-color) 2px solid;
  content: '';
}
#freedelivery .campaign .campaign_top p::before { margin-left: -5px; transform: rotate(60deg);}
#freedelivery .campaign .campaign_top p::after  { margin-right: -5px; transform: rotate(-60deg);}
#freedelivery .campaign .campaign_period_name {
  position: relative;
  margin: 0 0 20px;
}
#freedelivery .campaign .campaign_period_name::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--main-color);
  z-index: 1;
  content: '';
}
#freedelivery .campaign .campaign_period_name span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 290px;
  height: 60px;
  margin: 0 auto;
  border: 1px solid var(--main-color);
  border-radius: 30px;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  color: var(--main-color);
  background: #FFF;
  z-index: 2;
}
#freedelivery .campaign .campaign_period_text {
  font-size: 28px;
  font-weight: 500;
  color: var(--main-color);
}
#freedelivery .campaign .campaign_period_text span {
  font-size: 20px;
}

@media only screen and (max-width: 750px) {
  #freedelivery .campaign {
    margin: 40px 0;
  }
  #freedelivery .campaign .campaign_period_name span {
    width: 200px;
    height: 40px;
    font-size: 18px;
  }
  #freedelivery .campaign .campaign_top p {
    position: relative;
    padding: 0 20px;
    font-size: 16px;
  }
  #freedelivery .campaign .campaign_top p::before,
  #freedelivery .campaign .campaign_top p::after {
    position: absolute;
    width: 40px;
    top: calc(50% - 3px);
    border-top: var(--sub-color) 2px solid;
    content: '';
  }
  #freedelivery .campaign .campaign_top p::before {
    left: 0;
    margin: 0;
    transform: rotate(60deg);
  }
  #freedelivery .campaign .campaign_top p::after  {
    right: 0;
    margin: 0;
    transform: rotate(-60deg);
  }
}

/*-----------------------------------------
  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: var(--main-color);
  background: url(/cms/img/usr/freedelivery202604/tit_bg.png) center bottom / auto auto no-repeat;
}
#freedelivery #item .item_tit h2 span { font-size: inherit; color: var(--main-color);}
#freedelivery #item .item_wrap { margin: 50px 0 28px; display: flex; flex-wrap: wrap; justify-content: space-between;}
#freedelivery #item .item_wrap .item_list { position: relative; width: calc((100% - 106px)/ 2); margin: 0 0 70px; display: flex; flex-direction: column; z-index: 2;}
#freedelivery #item .item_wrap .item_list::before {
  position: absolute;
  top: 66px;
  left: -62px;
  width: 557px;
  height: 557px;
  background: url(/cms/img/usr/freedelivery202604/item_bg.png) center center / 100% auto no-repeat;
  z-index: -1;
  content: "";
}
#freedelivery #item .item_header_popup {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 297px;
  height: 116px;
  margin: 0 auto 16px;
  font-size: 16px;
  color: #FFF;
  text-align: center;
  background: url(/cms/img/usr/freedelivery202604/item_popup1.png) center center / 100% auto no-repeat;
}
#freedelivery #item .item_list.list01 .item_header_popup { background: url(/cms/img/usr/freedelivery202604/item_popup1.png) center center / 100% auto no-repeat;}
#freedelivery #item .item_list.list02 .item_header_popup { background: url(/cms/img/usr/freedelivery202604/item_popup2.png) center center / 100% auto no-repeat;}
#freedelivery #item .item_list.list03 .item_header_popup { background: url(/cms/img/usr/freedelivery202604/item_popup3.png) center center / 100% auto no-repeat;}
#freedelivery #item .item_list.list04 .item_header_popup { background: url(/cms/img/usr/freedelivery202604/item_popup4.png) center center / 100% auto no-repeat;}
#freedelivery #item .item_header_text {
  font-size: 20px;
  text-align: center;
  color: #707070;
}
#freedelivery #item .item_ex {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 30px auto;
  z-index: 2;
}
#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: 163px; top: 0;}
#freedelivery #item .list02 .item_ex figure { width: 110px; top: 0;}
#freedelivery #item .list03 .item_ex figure { width: 107px; top: 0;}
#freedelivery #item .list04 .item_ex figure { width: 74px; top: -32px;}
#freedelivery #item .list01 .item_ex figure + .item_exTxt { width: calc(100% - 163px); top: 0;}
#freedelivery #item .list02 .item_ex figure + .item_exTxt { width: calc(100% - 110px); top: 0;}
#freedelivery #item .list03 .item_ex figure + .item_exTxt { width: calc(100% - 107px); top: 0;}
#freedelivery #item .list04 .item_ex figure + .item_exTxt { width: calc(100% - 74px); top: 0;}
#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 li {
  padding-left: 27px;
  font-size: 14px;
  line-height: 1.428;
  letter-spacing: 0;
  background: url(/cms/img/usr/freedelivery202503/ico_check.png) no-repeat left top / 19px;
}
#freedelivery #item .item_exTxt li + li { 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_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;
    background: url(/cms/img/usr/freedelivery202604/tit_bg.png) center bottom / auto clamp(6px, 1.9vw, 8px) no-repeat;
  }
  #freedelivery #item .item_wrap { max-width: 430px; padding: 0 20px; margin: 34px auto 18px; flex-direction: column; gap: 40px; overflow: hidden;}
	#freedelivery #item .item_wrap .item_list { position: relative; width: 100%; margin: 0; display: flex; flex-direction: column;}
  #freedelivery #item .item_wrap .item_list::before {
    top: 36vw;
    left: -25vw;
    width: 100vw;
    height: 100vw;
  }
  #freedelivery #item .list01 .item_ex figure { top: 10px;}
  #freedelivery #item .list02 .item_ex figure { top: 0;}
  #freedelivery #item .list03 .item_ex figure { top: 12px;}
  #freedelivery #item .list04 .item_ex figure { top: -5px;}
  #freedelivery #item .item_header_popup {
    width: calc(100vw - 40px);
    height: calc((100vw - 40px) * 0.390573);
    max-width: 297px;
    max-height: 116px;
  }
  #freedelivery #item .item_list.list01 .item_header_popup { background: url(/cms/img/usr/freedelivery202604/item_popup1.png) center center / 100% auto no-repeat;}
  #freedelivery #item .item_list.list02 .item_header_popup { background: url(/cms/img/usr/freedelivery202604/item_popup2.png) center center / 100% auto no-repeat;}
  #freedelivery #item .item_list.list03 .item_header_popup { background: url(/cms/img/usr/freedelivery202604/item_popup3.png) center center / 100% auto no-repeat;}
  #freedelivery #item .item_list.list04 .item_header_popup { background: url(/cms/img/usr/freedelivery202604/item_popup4.png) center center / 100% auto no-repeat;}
	#freedelivery #item .item_ex { margin: 0 auto}
	#freedelivery #item .item_genre { left: -5px;}
  #freedelivery #item .item_lead { min-width: unset; font-size: clamp(12px,3.27vw,14px);}
  #freedelivery #item .item_exTxt li { font-size: clamp(12px,3.27vw,14px);}
  #freedelivery #item .item_exTxt li + li { margin: min(15px,3.5vw) 0 0;}
	#freedelivery #item .item_list.list04 .item_detailPrice { top: 0;}
  #freedelivery #item .item_detail { margin: 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 5%; 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;}
	
}
