@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/**
 * おためし購入フォーム Phase3用 Styles
 * @author ISHII Shunsuke
 */
.giftcard-form div,
.giftcard-form span,
.giftcard-form object,
.giftcard-form iframe,
.giftcard-form h1,
.giftcard-form h2,
.giftcard-form h3,
.giftcard-form h4,
.giftcard-form h5,
.giftcard-form h6,
.giftcard-form p,
.giftcard-form blockquote,
.giftcard-form pre,
.giftcard-form abbr,
.giftcard-form address,
.giftcard-form cite,
.giftcard-form code,
.giftcard-form del,
.giftcard-form dfn,
.giftcard-form em,
.giftcard-form img,
.giftcard-form ins,
.giftcard-form kbd,
.giftcard-form q,
.giftcard-form samp,
.giftcard-form small,
.giftcard-form strong,
.giftcard-form sub,
.giftcard-form sup,
.giftcard-form var,
.giftcard-form b,
.giftcard-form i,
.giftcard-form dl,
.giftcard-form dt,
.giftcard-form dd,
.giftcard-form ol,
.giftcard-form ul,
.giftcard-form li,
.giftcard-form fieldset,
.giftcard-form form,
.giftcard-form label,
.giftcard-form legend,
.giftcard-form table,
.giftcard-form caption,
.giftcard-form tbody,
.giftcard-form tfoot,
.giftcard-form thead,
.giftcard-form tr,
.giftcard-form th,
.giftcard-form td,
.giftcard-form article,
.giftcard-form aside,
.giftcard-form canvas,
.giftcard-form details,
.giftcard-form figcaption,
.giftcard-form figure,
.giftcard-form footer,
.giftcard-form header,
.giftcard-form hgroup,
.giftcard-form menu,
.giftcard-form nav,
.giftcard-form section,
.giftcard-form summary,
.giftcard-form time,
.giftcard-form mark,
.giftcard-form audio,
.giftcard-form video {
  font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,
    "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.giftcard-form {
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.giftcard-form__stage__step {
  max-width: 640px;
  width: 100vw;
  min-height: calc(100vh - 112px);
  box-sizing: border-box;
  padding: 0 16px;
  margin: 0 auto;
}
@media screen and (min-width: 641px) {
  .giftcard-form__stage__step {
    /* padding: 0 2%; */
  }
}

/* ■上書きCSS
--------------------------------------------------------- */
body {
	width: auto !important;
}
article.giftcard-form__stage{
	padding-top: 0;
	display: block;
}
footer.giftcard-form__footer{
	display: none !important;
}
.giftcard-form__stage__step {
	max-width: 780px;
	min-height: auto;
	padding: 0;
}
.giftcard-form__stage__step .giftcard-form__input {
	display: block;
}




/* ROOT設定
--------------------------------------------------------- */
:root {
	--main: #3F6944;
	--main-light: #BCBD1D;
	--sub: #76952F;
	--form-border: #AAAAAA;
	--glay-color: #959595;
	--glay-bg: #F7F7F7;
	--olive-light: #D9E5DA;
	--f-fam: Verdana, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans Japanese", sans-serif;
}
/* テキストリンク
--------------------------------------------------------- */
a{
	text-decoration: none;
	color: #0000FF;
}
a:hover{
	text-decoration: none;
	opacity:0.65;
}
/* 画像
--------------------------------------------------------- */
figure{
	margin: 0;
	padding: 0;
}
img{
	max-width: 100%;
}


/* PC・SP出し分け
--------------------------------------------------------- */
@media screen and (min-width: 769px) {
	.hid-pc{/* PCのみ非表示 */
		display: none !important;
	}
}
@media screen and ( max-width: 768px) {
	.hid-sp{/* SPのみ非表示 */
		display: none !important;
	}
}
/* コンテンツ幅
--------------------------------------------------------- */
@media screen and (min-width: 769px) {/* PC */
	.inner{
		padding: 0 32px;
	}
}
@media screen and ( max-width: 768px) {/* sp */
	.inner{
		padding: 0 16px;
	}
}
/* 特殊フォント
--------------------------------------------------------- */
.font-YuMincho{
	font-family: YuMincho, "游明朝", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "MS PMincho", serif;
}
header, main, footer{
	margin: 0 auto;
	background: #fff;
}
main{
	padding-bottom: 24px;
	max-width: 798px;
}


/* ---------------------------------------------------------
 　■ 共通ヘッダー
--------------------------------------------------------- */
header{
	position: relative;
	height: 72px;
	border-bottom: 1px solid #DDDDDD;
	display: flex;
	justify-content: center;
	align-items: center;
}
header h1{
	margin: 0;
}
header .btn-login{
	position: absolute;
	left: 24px;
	top: 16px;
}
header .btn-login a{
	font-size: 11px;
	font-weight: normal;
	letter-spacing: -1px;
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 26px;
	color: #333333;
	line-height: 1;
}
header .btn-login a span{
	white-space: nowrap;/* 改行禁止 */
	margin-top: 3px;
    font-size:11px;
}
header .btn-login a::before {
	background-image: url(../images/login_b.svg);
	background-position: 0 0;
	background-repeat: no-repeat;
	width: 26px;
	height: 26px;
	content: "";
	display: inline-block;
}


/* ---------------------------------------------------------
 　■ フッター
--------------------------------------------------------- */
footer{
	height: 72px;
	background: #231815;
	text-align: center;
	/* margin-top: 80px; */
	display: flex;
	justify-content: center;
	align-items: center;
}
footer .inner{
	color: #FFFFFF !important;
    font-size: 14px;
}

.footerNav {
	background-color: #333333;
}
.footerNavList {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 780px;
	margin: 0 auto;
	padding: 30px 0;
}
.footerNavListItem:not(:last-child)::after {
	font-size: 16px;
	content: '｜';
	color: #fff;
}
.footerNavListLink {
	line-height: 1.6;
	font-size: 16px;
	color: #fff !important;
}

@media screen and (max-width: 768px) {
	footer {
		width: 100vw;
	}
	.footerNavList {
		max-width: 100vw;
	}
}

/* ---------------------------------------------------------
 　■ 共通パーツ
--------------------------------------------------------- */
section + section{
	margin: 24px 0 0;
}

/* === フロー === */
.flow ol {
	counter-reset: number;
	list-style-type: none;
	display: flex;
	justify-content: space-around;
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 100%;
}
.flow ol li {
	position: relative;
	width: calc( 100% * 100 / 375 );
	height: 72px;
	text-align: center;
	font-weight: 300;
}
.flow ol li:nth-child(2) {
	width: calc( 100% * 175 / 375 );
}
.flow ol li span{
	font-size: 14px;
	letter-spacing: -2px;
	color: var(--main);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	padding-top: 42px;
	box-sizing: border-box;
}
.flow ol li.current{
	background: var(--main-light);
	color: #fff;
}
.flow ol li.current span{
	color: #fff;
}
.flow ol li:before{
	counter-increment: number;
	content: counter(number);
	display: block;
	font-weight: bold;
	text-align: center;
	font: normal normal normal 24px/50px Times New Roman;
}
@media screen and (min-width: 769px) {
	.flow ol li {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.flow ol li span{
		font-size: 16px;
		position: relative;
		top: auto;
		left: auto;
		padding: 0 0 0 1em;
		width: auto;
		height: auto;
	}
	.flow ol li:before {
		margin-top: -2px;
	}
}


/* === タイトルバー === */
.ttl-colorBar{
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--main);
	color: #fff;
	font-size: 20px;
	line-height: 1.5;
	font-weight: bold;
	padding: 19px 0;
	margin: 0;
}
.ttl-colorBg{
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--main);
	font-size: 20px;
	line-height: 1.5;
	font-weight: normal;
	padding: 19px 0;
	margin: 0;
	border-top: 1px solid var(--main);
	border-bottom: 1px solid var(--main);
}



/* スライダー
--------------------------------------------------------- */
.slick-slider div {
	transition: none;
}
.slick-slide {
	height: auto;
}
.slider {
	margin: 0 auto;
	padding: 0 0 20px;
	width: 100%;
	position: relative;
	max-width: 768px;
}
.slider img {
	height: auto;
	width: 100%;
	box-shadow: 0 0 10px -5px #999;
}
.slider .slide-img {
	position: relative;
	height: auto;
	padding: 10px 0;
}
/* 下部ドット */
.slider button {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.slider .slide-dots {
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
.slider .slide-dots li {
	display: flex;
	align-items: flex-end;
	margin: 0 4px;
	padding: 0;
	width: 8px;
	height: 20px;
}
.slider .slide-dots li button {
	position: relative;
	text-indent: -9999px;
	cursor: pointer;
	transition: 0.3s;
	width: 8px;
	height: 8px;
	background: #C7C7C7;
	border-radius: 50%;
}
.slider .slide-dots li.slick-active button {
	background: var(--sub);
}
/* 左右矢印 */
.slider .slick-arrow{
	position: absolute;
	top: 50%;
	margin-top: -20px;
	width: 40px;
	height: 40px;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
}
.slider .slick-arrow.btn-prev{
	left: 0;
}
.slider .slick-arrow.btn-next{
	right: 0;
}
.slider .slick-arrow span{
	position: relative;
	background: #fff;
	border-radius: 50%;
	width: 32px;
	height: 32px;
}
.slider .slick-arrow span::after{
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	margin-top: -5px;
}
.slider .slick-arrow.btn-prev span::after{
	border-bottom: solid 2px var(--main);
	border-left: solid 2px var(--main);
	left: 12px;
}
.slider .slick-arrow.btn-next span::after{
	border-top: solid 2px var(--main);
	border-right: solid 2px var(--main);
	right: 12px;
}
/* テキストを載せる場合 */
.slider .slide-img p {
	font-size: 24px;
	color: #ffffff;
	text-align: center;
	line-height: 1.3;
	margin: 0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 40px;
	box-sizing: border-box;
}

@media screen and (min-width: 769px) {
.slider {
	/* width: 448px; */
}
.slider .slide-img {
	padding: 5px;
}
.slider img {
	box-shadow: 3px 3px 10px -5px #999;
}
}

.designThumbnails {
	position: relative;
	width: 85%;
	margin: 0 auto;
}
.designThumbnails__item {
	padding: 0 5px;
}
.designThumbnails__item:not(.slick-current) {
	opacity: .5;
}
.designThumbnails__item.slick-current img {
	border: solid 2px var(--main-light);
}
.designThumbnails .slick-arrow {
	z-index: 1;
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	appearance: none;
	background-color: var(--main-light);
	border: none;
	border-radius: 50%;
	transition-duration: .4s;
}
.designThumbnails .slick-arrow:hover {
	opacity: .6;
}
.designThumbnails .slick-arrow::before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 0;
	height: 0;
	content: '';
	border-style: solid;
}
.designThumbnailsBtn-prev {
	left: -18px;
}
.designThumbnailsBtn-prev::before {
	border-width: 4px 6px 4px 0;
	border-color: transparent #ffffff transparent transparent;

}
.designThumbnailsBtn-next {
	right: -18px;
}
.designThumbnailsBtn-next::before {
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent #ffffff;
}

/* アコーディオン
--------------------------------------------------------- */
.accordionBox, .accordionBox dt, .accordionBox dd{
	margin: 0;
	padding: 0;
}
.accordionBox dt{
	position: relative;
	background: #ffffff;
	display: block;
	overflow: hidden;
	border: 1px solid var(--form-border);
	border-radius: 4px;
	height: auto;
	padding: 7px 64px 7px 16px;
}
.accordionBox dt::before {
	padding: 0;
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	z-index: 0;
	content: '';
	display: block;
	right: 18px;
	transform: translateY(-50%) rotate(45deg);
	border-bottom: solid 2px var(--main);
	border-right: solid 2px var(--main);
}
.accordionBox dt::after {
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	right: 48px;
	width: 1px;
	height: 32px;
	background: var(--form-border);
	z-index: 0;
}
.accordionBox dt span {
	display: flex;
	height: auto;
	align-items: center;
}
.accordionBox dd{
	display: block;
	height: 0;
	background: #ddd;
	transition-duration: .4s;
}
.accordionBox dd.active {
	height: auto;
}
.faqSec .accordionBox dd p {
	margin: 0;
	opacity: 0;
	transition-duration: .4s;
}
.faqSec .accordionBox dd p a {
	color: var(--main);
	text-decoration: underline;
	word-break: break-all;
}
.faqSec .accordionBox dd.active p {
	opacity: 1;
}
.faqSec .accordionBox dd img {
	display: block;
	width: 90%;
	max-width: 470px;
	margin: 1em auto;
}

/* ---------------------------------------------------------
 　■ 共通フォームパーツ
--------------------------------------------------------- */
/* note */
.form--renewal__form__content .note,
.inputText .note,
.radioBox .note,
.checkBox .note,
.selectBox .note,
.selectWrap .note,
.textareaBox .note{
	display: block;
	color: #959595;
	margin-top: 10px;
}

/* text input */
.inputText{
	margin: 24px 0;
}
.inputText input[type="text"] ,
.inputText input[type="email"] ,
.inputText input[type="tel"] ,
.inputText input[type="password"] {
	border: 1px solid #aaa;
	border-radius: 4px;
	outline: none;
	padding: 0 8px;
	line-height: 52px;
	box-sizing: border-box;
	width: 100%;
	box-shadow: none;
	font-size: 16px;
}
/* textarea */
.textareaBox{
	margin: 24px 0;
}
.textareaBox textarea {
	border: 1px solid #aaa;
	border-radius: 4px;
	outline: none;
	padding: 16px;
	box-sizing: border-box;
	width: 100%;
	height: 207px;
	font-size: 16px;
	font-family: var(--f-fam);
	color: #333;
	resize: none;
}
/* Radio */
.radioBox *{
	color: #333333;
	font-size: 15px;
	line-height: 1.5;
}
.radioBox {
	margin: 24px 0;
}
.radioBox label {
	display: inline-block;
}
.radioBox input[type="radio"] {
	display: none !important;
}
.radioBox input + span {
	padding-left: 40px;
	position: relative;
	margin-right: 30px;
	display: flex;
	align-items: center;
	height: 40px;/* beforeと高さを合わせて中央揃えにする */
}
.radioBox input + span::before ,
.radioBox input:checked + span::after {
	content: "";
	display: block;
	position: absolute;
	border-radius: 50%;
}
.radioBox input + span::before {
	top: 50%;
	left: 0;
	margin-top: -16px;
	width: 32px;
	height: 32px;
	border: 1px solid #C7C7C7;
}
.radioBox input:checked + span::after {
	top: 50%;
	left: 4px;
	margin-top: -12px;
	width: 24px;
	height: 24px;
	background: var(--main);
}

/* CheckBox */
.checkBox {
	margin: 24px 0;
}
.checkBox label {
	display: inline-block;
}
.checkBox input {
	display: none;
}
.checkBox input + span {
	padding-left: 40px;
	position: relative;
	margin-right: 30px;
	display: flex;
	align-items: center;
	height: 40px;/* beforeと高さを合わせて中央揃えにする */
}
.checkBox input + span::before ,
.checkBox input:checked + span::after {
	content: "";
	display: block;
	position: absolute;
}
.checkBox input + span::before {
	top: 4px;
	left: 0;
	width: 32px;
	height: 32px;
	background-color: var(--main);
	border-radius: 4px;
}
.checkBox input:checked + span::after {
	top: 8px;
	left: 10px;
	width: 11px;
	height: 20px;
	transform: rotate(40deg);
	border-bottom: 3px solid #FFF;
	border-right: 3px solid #FFF;
}

/* select */
.selectBox {
	position: relative;
	background: #ffffff;
	display: block;
	overflow: hidden;
	border: 1px solid var(--form-border);
	border-radius: 4px;
	margin: 24px 0;
	width: 100%;
}
.selectBox::before {
	content: '';
	display: block;
	position: absolute;
	top: 18px;
	right: 18px;
	width: 10px;
	height: 10px;
	padding: 0;
	transform: rotate(45deg);
	border: solid 2px var(--main);
	border-left: none;
	border-top: none;
	z-index: 0;
}
.selectBox::after {
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	right: 48px;
	width: 1px;
	height: 32px;
	background: var(--form-border);
	z-index: 0;
}
.selectBox select {
	width: 100%;
	line-height: 52px;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	padding: 0 64px 0 16px;
	position: relative;
	z-index: 1;
}
.selectBox select::-ms-expand {
	display: none;
}
/* ▼バージョン */
.selectWrap{
	display: flex;
	align-items: center;
	margin: 24px 0;
}
.selectSmall {
	position: relative;
	background: #ffffff;
	overflow: hidden;
	border: 1px solid var(--form-border);
	border-radius: 4px;
	margin: 0 4px;
}
.selectSmall::before {
	content: '';
	display: block;
	position: absolute;
	top: 18px;
	right: 8px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 16px 9px 0 9px;
	border-color: var(--main) transparent transparent transparent;
	z-index: 0;
}
.selectSmall::after {
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	right: 32px;
	width: 1px;
	height: 32px;
	background: var(--form-border);
	z-index: 0;
}
.selectSmall select {
	width: 100%;
	line-height: 52px;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	padding: 0 40px 0 8px;
	position: relative;
	z-index: 1;
}
.selectSmall select::-ms-expand {
	display: none;
}
/* エラーメッセージ */
.x-input-error {
	color: #ff0000;
}

/* ボタン類
--------------------------------------------------------- */
.btns-wrap{
	margin-top: 40px;
}

/* === 矢印ボタン === */
/* === 通常ボタン === */
.btnBox{
	text-align: center;
}
.btnBox.arr-btn input[type="submit"],
.btnBox.arr-btn input[type="button"],
.btnBox.arr-btn button,
.btnBox.arr-btn .btn span,
.btnBox.normal-btn input[type="submit"],
.btnBox.normal-btn input[type="button"],
.btnBox.normal-btn button,
.btnBox.normal-btn .btn span{
	display: inline-block;
	border: none;
	outline: 0;
	cursor: pointer;
	color: #fff;
	background: var(--main);
	height: 48px;
	line-height: 48px;
	font-size: 15px;
	width: 100%;
	border-radius: 4px;
	transition: 0.3s;
	text-align: center;
}
.btnBox.arr-btn .btn,
.btnBox.normal-btn .btn{
	display: block;
	color: #fff;
	position: relative;
	transition: 0.5s;
}
.btnBox.arr-btn .btn::after{
	transition: 0.3s;
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 18px;
	margin: auto;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.btnBox.fix-btn input[type="button"], .btnBox.fix-btn .btn {
	display: inline-block;
	border: none;
	outline: 0;
	cursor: pointer;
	color: #fff;
	background: #666;
	height: 48px;
	line-height: 48px;
	font-size: 15px;
	width: 180px;
	border-radius: 4px;
	transition: 0.3s;
	text-align: center;
}

@media screen and (min-width: 769px) {
	.btnBox.arr-btn .btn,
	.btnBox.normal-btn .btn{
			width: 343px;
		display: inline-block;
	}
	.btnBox.arr-btn input[type="submit"],
	.btnBox.arr-btn button,
	.btnBox.arr-btn .btn span{
	}
}

/* === blank === */
.btnBox{
	margin: 24px;
	text-align: center;
}
.btnBox.blank-btn .btn span, .btnBox.blank-btn .btn a{
	display: inline-block;
	border: none;
	outline: 0;
	cursor: pointer;
	color: var(--main);
	background: #fff;
	height: 48px;
	line-height: 48px;
	font-size: 15px;
	width: 100%;
	border: 1px solid var(--main);
	border-radius: 4px;
	transition: 0.3s;
	text-align: center;
}
.btnBox.blank-btn .btn input[type="button"]{
	appearance: none;
	display: inline-block;
	border: none;
	outline: 0;
	cursor: pointer;
	color: var(--main);
	background: #fff;
	height: 48px;
	line-height: 48px;
	font-size: 15px !important;
	width: 100%;
	border: 1px solid var(--main);
	border-radius: 4px;
	transition: 0.3s;
	text-align: center;
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.btnBox.blank-btn .btn{
	display: block;
	color: var(--main);
	position: relative;
	transition: 0.5s;
}
.btnBox.blank-btn .btn::after{
	background-image: url(../images/icon_blank.svg);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	margin: auto;
	position: absolute;
	top: 0px;
	bottom: 0;
	width: 12px;
	height: 12px;
	transition: 0.3s;
	content: "";
	right: 18px;
}
@media screen and (min-width: 769px) {
	.btnBox.blank-btn {
		text-align: center;
	}
	.btnBox.blank-btn .btn {
		width: 343px;
		display: inline-block;
	}
}

/* === back === */
.btnBox{
	margin: 24px;
	text-align: center;
}
.btnBox.white-btn .btn span{
	display: inline-block;
	border: none;
	outline: 0;
	cursor: pointer;
	color: var(--main);
	background: #fff;
	height: 48px;
	line-height: 48px;
	font-size: 15px;
	width: 100%;
	border: 1px solid var(--main);
	border-radius: 4px;
	transition: 0.3s;
	text-align: center;
}
.btnBox.white-btn .btn input[type="button"]{
	appearance: none;;
	display: inline-block;
	border: none;
	outline: 0;
	cursor: pointer;
	color: var(--main);
	background: #fff;
	height: 48px;
	line-height: 48px;
	font-size: 15px !important;
	width: 100%;
	border: 1px solid var(--main);
	border-radius: 4px;
	transition: 0.3s;
	text-align: center;
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.btnBox.white-btn .btn{
	display: block;
	color: var(--main);
	position: relative;
	transition: 0.5s;
}
@media screen and (min-width: 769px) {
	.btnBox.blank-btn {
		text-align: center;
	}
	.btnBox.white-btn .btn {
		width: 343px;
		display: inline-block;
	}
}

/* ■ モーダル
--------------------------------------------------------- */
.modalBox {
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 1 !important;
	z-index: 5;
}
.modalBox__bg {
	background: rgba(0, 0, 0, 0.8);
	height: 100vh;
	position: fixed;
	left: 0;
	width: 100%;
}
.modalBox__content {
	background: #fff url('../images/modal_card_bg.jpg') center top/cover no-repeat;
	left: 50%;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
	max-height: 90vh;
	overflow-y: scroll;
}
/* === modalのなかみ === */
.modalBox__content.cardWP{
	overflow-y: scroll;
}
.modalBox__content.cardWP .card-img{
	position: relative;
}
.modalBox__content.cardWP .card-img figure{
	margin: 0;
}
.modalBox__content.cardWP .card-img figure img{
	width: 100%;
}
.modalBox__content.cardWP .card-message{
	padding: 15px 40px 15px;
	text-align: center;
}
.modalBox__content.cardWP .card-message p.recipientName {
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 15px;
	line-height: 1.3;
}
.modalBox__content.cardWP .card-message p.recipientName span {
	font-size: inherit;
}
.modalBox__content.cardWP .card-message p.message{
	/* text-align: left; */
	font-size: 14px;
	line-height: 1.8;
	margin: 0;
	background-image: linear-gradient(transparent 0, transparent 97%, #cccccc 100%);
	background-size: 100% 1.8em;
	white-space: pre-line;
}
.modalBox__content.cardWP .card-message p.name{
	font-size: 16px;
	font-weight: bold;
	margin: 15px 0 0;
	line-height: 1.3;
}
.modalBox__content.cardWP .card-message p.name span {
	font-size: inherit;
}
.modalBox__content.cardWP .card-message .btnBox{
	margin: 15px 0 0;
}
@media screen and (min-width: 769px) {
	.modalBox__content.cardWP{
		width: 638px;
	}
	.modalBox__content {
		padding: 40px 0;
	}
	.modalBox__content.cardWP .card-img{
		width: 448px;
		margin: 0 auto;
	}
	.modalBox__content.cardWP .card-message p.recipientName {
		margin: 30px 0 15px;
	}
	.modalBox__content.cardWP .card-message p.message{
		text-align: center;
		font-size: 15px;
	}
	.modalBox__content.cardWP .card-message p.name{
		margin: 30px 0 0;
	}
	.modalBox__content.cardWP .card-message .btnBox{
		margin: 30px 0 0;
	}
}

@media screen and (max-width: 768px) {
	.form--renewal {
		width: 100vw;
		overflow: hidden;
	}
}

/* ---------------------------------------------------------
 　■ カードを作る
--------------------------------------------------------- */
.chooseCard h3{
	margin: 24px 0;
}
.giverName{
	padding-bottom: 40px;
}
.giftcardNameInput {
	display: flex;
	align-items: center;
}
.giftcardNameInput__preText {
	display: block;
	margin-top: 13px;
	padding-right: .5em;
	text-align: right;
	font-size: 15px;
}
.giftcardNameNote {
	margin-top: 15px;
	line-height: 1.3;
	font-size: 15px;
}
@media screen and (min-width: 769px) {
	.giftcardNameNote {
		text-align: center;
	}	
}

/* ---------------------------------------------------------
 　■ 金額を選び決済する
--------------------------------------------------------- */
/* === 上書きCSS === */
.giftcard-form__input--delivery_radio_btns--dummy {
	position: relative;
	top: auto;
	left: auto;
	height: auto;
}
.giftcard-form__input--delivery_radio_btns{
	display: block;
	min-height: auto;
}
.giftcard-form__input--delivery_radio_btns label {
	display: block;
	position: relative;
	width: auto;
	height: auto;
	margin-bottom: 0;
}

/* 贈りたい金額をお選びください
--------------------------------------------------------- */
.amountMoney *{
	box-sizing: border-box;
}
.amountMoney .ttl{
	font-size: 20px;
	line-height: 1.5;
	text-align: center;
	margin: 20px 0;
}
.amountMoney .radioBox label {
	display: block;
	padding-left: 16px;
	height: 52px;
	background: var(--glay-bg);
}
.amountMoney .radioBox label + label{
	margin-top: 24px;
}
.amountMoney .radioBox input + span{
	height: 100%;
	font-size: 18px;
	justify-content: center;
}
.amountMoney .radioBox input:checked + span::after {
	left: 5px;
	margin-top: -11px;
}
.amountMoney .leadText {
	line-height: 1.5;
	margin: 36px 0;
	text-align: center;
}


/* お届けするセットの例を見てみる
--------------------------------------------------------- */
.setSample {
	margin-bottom: 64px;
}
.setSample *{
	box-sizing: border-box;
}
.setSample__note {
	margin: 50px auto;
	text-align: center;
	line-height: 1.5;
	font-size: 15px;
}
.setSample__note--large {
	font-size: 22px;
	font-weight: bold;
}
body:not(.top) .setSample .sampleList > div:not(:nth-child(3)) {
	display: none;
}
.setSample .sampleList .leadText {
	margin: 30px 0;
	text-align: center;
}
.setSample .sampleList .leadText .lead01{
	font-size: 20px;
	font-weight: bold;
}
.setSample .sampleList .leadText .lead02{
	font-size: 15px;
	margin-top: 16px;
}
.setSample .sampleList .setContent {
	height: auto;
}
.setSample .sampleList .setContent + section {
	margin: 0;
}
.setSample .sampleList > div .setMain {
	margin-bottom: 30px;
}
.send.top .setSample .sampleList > div .setMain {
	height: 470px;
}
.setSample .sampleList > div .setMain h3{
	font-size: 26px;
	text-align: center;
	margin: 16px 0 0;
	line-height: 1.5;
}
.setSample .sampleList > div .setMain p{
	margin: 16px 0 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
}
.setSample .setLabel {
	display: block;
	max-width: 50px;
	margin: 0 auto !important;
	padding: 2px 5px;
	text-align: center !important;
	font-size: 12px !important;
	border: solid 1px #ccc;
}
.gift.top .setSample .setLabel {
	margin: 0 !important;
}
.setSample .sampleList > div .setMain figure img{
	width: 100%;
}
.setSample .sampleList > div h4{
	font-size: 20px;
	margin: 24px 0;
	text-align: center;
}
.setSample .sampleList .setItems {
	position: relative;
	margin-bottom: 50px;
}
.setSample .sampleList .setItems__btn {
	z-index: 1;
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	padding-top: 50px;
	font-size: 16px;
	letter-spacing: 0.05em;
	text-align: center;
	color: #000;
	background: linear-gradient(180deg, rgb(255, 255, 255, 0) 0%, rgb(255, 255, 255, 1) 70%);
	transition: bottom 0.2s;
	cursor: pointer;
}
.setSample .sampleList .setItems__btn:hover {
	opacity: 1;
}
.setSample .sampleList > div .setDetail__area {
	height: 170px;
	padding-bottom: 30px;
	overflow: hidden;
}
.setSample .sampleList > div ul.setDetail{
	display: flex;
	flex-wrap: wrap;
	margin-left: -5.733vw;
}
.setSample .sampleList > div ul.setDetail li{
	width: 26.667vw;
	margin-left: 5.733vw;
	text-align: center;
}
.setSample .sampleList > div ul.setDetail li figure img{
	width: 100%;
}
.setSample .sampleList > div ul.setDetail li figure figcaption{
	margin: 16px 0 24px;
    line-height: 1.3;
}
.setSample .sampleList p.note{
	font-size: 13px;
}
@media screen and (min-width: 769px) {
	.setSample {
		margin-bottom: 96px;
	}
	.setSample .sampleList > div .setMain h3{
		text-align: left;
		margin: 0;
	}
	.setSample .sampleList > div .setMain p{
		text-align: left;
	}
	.setSample .sampleList p.note{
		text-align: right;
	}
}

/* モーダル */
.setDetail_modal .modalBox__content{
	padding: 16px;
}
.modalBox__title {
  margin-bottom: 50px;
  line-height: 1.2;
  text-align: center;
  font-size: 15px;
}
.modalBox__descTitle {
  line-height: 1.2;
  font-size: 15px;
  font-weight: bold;
}
.modalBox__descTitle::before {
  content: "■";
}
.modalBox__descContent {
  margin-bottom: 1em;
  line-height: 1.2;
  font-size: 15px;
}

@media screen and (min-width: 769px) {
	.setSample .sampleList > div ul.setDetail{
		margin-left: 0;
		justify-content: center;
	}
	.setSample .sampleList > div ul.setDetail li {
		width: 100px;
		margin: 0 8px;
	}
	.setSample .sampleList > div .setMain{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.send.top .setSample .sampleList > div .setMain {
		height: 260px;
	}
	.setSample .sampleList > div .setMain > div{
		width: 350px;
	}
	.send.top .setSample .sampleList > div .setMain > div {
		width: 400px;
		padding-right: 40px;
	}
	.setSample .sampleList > div .setMain figure img{
		width: 343px;
	}
	.setSample .setLabel {
		margin: 0 !important;
	}
}

/* Oisixの会員でない方は以下情報を入力してください
--------------------------------------------------------- */
.non-member *{
	box-sizing: border-box;
	font-size: 15px;
	line-height: 1.5;
}
.non-member .for-member-login {
	margin-bottom: 6.4rem;
}
.non-member .non-member-ttl{
	font-size: 20px;
	text-align: center;
	margin: 32px 10px;
}
.non-member .lead {
	margin: 0 10px 32px;
	font-size: 15px;
	text-align: center;
}
.non-member .inputText,
.non-member .checkBox {
	margin: 0 0 24px;
}
.non-member .form--renewal__form__title{
	margin: 0;
}
.non-member .giftcard-form__input__help{
	color: var(--glay-color)
}
/* 
.non-member .form--renewal__form__content__select--birthday__wrapper:before,
.non-member .form--renewal__form__content__select__wrapper:before{
	background: transparent;
	bottom: auto;
}
.non-member .form--renewal__form__content__select--birthday__wrapper:after,
.non-member .form--renewal__form__content__select__wrapper:after{
	bottom: auto;
	border: none;
}
 */
.non-member .form--renewal__form__content__select__wrapper select{
	width: 110px;
	cursor: pointer;
	border: 1px solid #aaa;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	padding: 8px 40px 8px 8px;
}
.selectBox select::-ms-expand {
	display: none;
}
.non-member .inputText.mb0{
	margin-bottom: 0;
}
.non-member .checkBox input:checked + span::after {
	top: 5px;
}

/* ログイン後
--------------------------------------------------------- */

.member {
	margin-top: 50px;
	margin-bottom: 32px;
}
.member-attention .member-attention__text {
	padding: 1em;
	border-left: solid 1px #ff0000;
	border-right: solid 1px #ff0000;
	border-top: solid 1px #ff0000;
	line-height: 1.6;
	font-size: 14px;
	text-align: center;
	color: #ff0000;
}
.member-attention .member-attention__text:last-of-type {
	border-bottom: 1px solid #ff0000;
}

@media screen and (max-width: 768px) {
	.member-attention {
		padding: 0 16px;
	}
	.member-attention .member-attention__text {
		text-align: left;
	}
}

/* ご注文金額合計
--------------------------------------------------------- */
.orderTotal *{
	box-sizing: border-box;
	font-size: 15px;
	line-height: 1.5;
}
.orderTotal .bg-wrap{
	background: var(--glay-bg);
	padding: 30px 0 16px;
	text-align: center;
}
.orderTotal h3,
.orderTotal p,
.orderTotal p span{
	font-size: 16px;
	font-weight: bold;
}
.orderTotal p{
	margin-top: 16px;
}
.orderTotal .price .num{
	font-size: 24px;
}
.oisixCard,.giftcard-form__btn__notes {
    line-height: 1.5;
    margin: 0 24px;
}
@media screen and (min-width: 769px) {
	.orderTotal .bg-wrap{
		/* max-width: 448px; */
		margin: 0 auto;
	}
}

/* お支払い方法の選択
--------------------------------------------------------- */
.selectPay {
	margin-top: 40px;
	padding-bottom: 80px;
}
.selectPay .giftcard-form__input__paymentlist {
	border-bottom: none;
	margin: 0;
}
.selectPay .giftcard-form__input__paymentlist__item{
	padding: 0;
	border: none;
}
.selectPay .form--renewal__form__title{
	margin-bottom: 20px;
	font-size: 20px;
	text-align: center;
}
.selectPay .form--renewal__form__title:after{
	display: none;
}
.selectPay .giftcard-form__input__paymentlist__item__title{
	font-size: 17px;
	font-weight: bold;
	margin: 0;
	line-height: 1.2;
}
.selectPay .giftcard-form__input__paymentlist__item__title span{
	width: 35px;
	margin-right: 5px;
}
.selectPay .giftcard-form__input__paymentlist__item__notes{
	text-align: center;
	font-size: 15px;
}
.selectPay .giftcard-form__input__paymentlist__item__notes__cardNum{
	white-space: nowrap;
}
.selectPay .giftcard-form__input__paymentlist__item__notes + figure{
	width: 161px;
}
.selectPay .giftcard-form__btn--confirm.is-creditcard-inner {
	padding: 0;
}
.selectPay .form--renewal__form__content__addition:before{
	display: none;
}
.selectPay .giftcard-form__btn__notes{
	text-align: left;
	font-size: 15px;
}
.selectPay .oisixCard, .error{
	color: #DB4F43;
	font-size: 15px;
	text-align: center;
	margin: 24px 0;
	padding: 8px;
	line-height: 1.5;
	border: 1px solid currentColor;
}
.selectPay .giftcard-form__input__paymentlist__item input[type="radio"]:after{
	background: var(--main);
}
.selectPay .giftcard-form__input__paymentlist__item__detail {
	margin-left: 0;
}
.selectPay .form--renewal__form__content__select--birthday__wrapper:before {
	background: transparent;
	bottom: auto;
}
.selectPay .form--renewal__form__content__select--birthday__wrapper:after {
	bottom: auto;
	border: none;
}
.selectPay .inputText{
	margin: 0;
}
.selectPay .selectWrap{
	margin: 12px 0 0;
}
.selectPay .selectWrap > span{
	font-size: 15px;
}
.selectPay .form--renewal__form__content__addition__title {
	margin-top: 24px;
}
.selectPay .form--renewal__form__content__addition{
	padding: 1px 0 24px;
}
.selectPay .radioCredit_input{
	display: none;
	margin: 0 0 20px;
}
.selectPay .radioBox label {
	display: block;
	padding-left: 16px;
	height: 52px;
	background: var(--glay-bg);
}
.selectPay .radioBox label + label{
	margin-top: 24px;
}
.selectPay .radioBox input + span{
	height: 100%;
	font-size: 18px;
	justify-content: center;
}
.selectPay .radioBox input:checked + span::after {
	left: 5px;
	margin-top: -11px;
}

@media screen and (min-width: 769px) {
	.selectPay .giftcard-form__btn__notes{
		text-align: center;
	}
	.selectPay .oisixCard, .error {
		width: 343px;
		margin: 24px auto;
	}
}

.buyInputInfo .form--renewal__form__content__addition {
	background-color: var(--glay-bg);
}

/* 確認画面
--------------------------------------------------------- */
#outputContents {
	display: none;
	margin-top: 60px;
}


/* ---------------------------------------------------------
 　■ 相手に送る
--------------------------------------------------------- */
/* 上部
--------------------------------------------------------- */
.compHead *{
	box-sizing: border-box;
	font-size: 15px;
	line-height: 1.5;
}
.compHead__logo {
	display: block;
	max-width: 280px;
	margin: 50px auto 20px;
}
.compHead .ttl {
	font-size: 20px;
	line-height: 1.5;
	text-align: center;
	margin: 20px 0;
}
.compHead .bg-wrap {
	background: var(--glay-bg);
	padding: 16px 0;
	text-align: center;
	border-radius: 4px;
}
.compHead h3,
.compHead p{
	font-size: 20px;
	font-weight: bold;
}
.compHead p{
	margin-top: 20px;
}
.compHead .num{
	font-size: 24px;
}
.compHead .limit{
	color: var(--main);
}
.compHead .btns-wrap {
	margin-top: 24px;
}
@media screen and (min-width: 769px) {
	.compHead .bg-wrap{
		max-width: 448px;
		margin: 0 auto;
	}
}

/* ギフトを贈る手順
--------------------------------------------------------- */
.giftProcedure *{
	box-sizing: border-box;
	font-size: 15px;
	line-height: 1.5;
}
.giftProcedure{
	margin-top: 40px;
	padding-bottom: 80px;
}
.giftProcedure .ttl-colorBg{
	font-weight: bold;
	font-size: 20px;
}
.giftProcedure dl dt{
	margin: 24px 0;
}
.giftProcedure dl dt span{
	font-size: 18px;
	text-align: center;
	display: block;
}
.giftProcedure dl dt span.step{
	color: var(--main);
	font-weight: bold;
}
.giftProcedure dl.step1{
	margin-top: 16px;
}
.giftProcedure dl.step1 dd .url{
	width: 100%;
	overflow: hidden;
}
.giftProcedure dl.step1 dd .url input {
	border: none;
	border-radius: 4px;
	outline: none;
	margin: 0;
	padding: 0 8px;
	line-height: 52px;
	box-sizing: border-box;
	width: 100%;
	box-shadow: none;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	background: var(--glay-bg);
}
.giftProcedure dl.step2{
	margin-top: 50px;
}
.giftProcedure dl.step2 dd .s-note{
	display: block;
	font-size: 11px;
	text-align: center;
}
.giftProcedure dl.step2 dd figure{
	width: 230px;
	margin: 24px auto 0;
}
.giftProcedure-attention {
	margin-bottom: 30px;
	padding: 1em;
	border: solid 1px #ff0000;
}
.giftProcedure-attention__text {
	font-size: 14px;
	text-align: center;
	color: #ff0000;
}
@media screen and (min-width: 769px) {
	.giftProcedure dl.step1 dd .url{
		width: 343px;
		margin: 0 auto;
	}
}

/* ---------------------------------------------------------
 　■ ご注文ありがとうございました
--------------------------------------------------------- */
.giftcompHead{
	padding-bottom: 80px;
}
.giftcompHead .ttl{
	font-size: 20px;
	line-height: 1.35;
	margin: 24px 0 44px;
	text-align: center;
	font-weight: bold;
}
.giftcompHead figure{
	max-width: 327px;
	margin: 0 auto;
}



















/* ---------------------------------------------------------
 　■ トップページ
--------------------------------------------------------- */
/* メインビジュアル
--------------------------------------------------------- */
.send.top .animate {
	opacity: 0;
}
.send.top .animate__animated.animate__delay-halfs{
	-webkit-animation-delay:.5s;
	animation-delay:.5s;
}
.send.top .animate__animated.animate__delay-half3s{
	-webkit-animation-delay:1.5s;
	animation-delay:1.5s;
}
.send.top .animate.animate__animated {
	transition: all ease-in-out 1s;
	opacity: 1;
}
body.send.top  {
	background-color: #F1F1F1;
}
.send.top main {
    margin-bottom: 65px;
    padding: 0;
	max-width: 100%;
}
.send.top header {
    height: auto;
    border: none;
	position: relative;
}
.send.top header .btn-login {
	position: absolute;
    background: #ffffff;
    width: 42px;
    height: 42px;
    top: 0;
    right: 0;
    left: auto;
    z-index: 100;
	text-align: center;
}
.send.top header .btn-login::before {
    content: "";
    background-image: url(../images/index/ico_login_top.svg);
    background-position: 0 4px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 26px;
    height: 100%;
}
/* メインビジュアル
--------------------------------------------------------- */
@media screen and (min-width: 769px) {
	.send.top .inner {
		max-width: 798px;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}
}

/* 母の日 */

.top-fv {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	height: 477px;
}
.top-fv__item {
	display: flex;
	justify-content: center;
	align-items: center;
	/* width: 100vw !important; */
	height: 477px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
}
.top-fv.slick-initialized .top-fv__item {
	opacity: 1;
}
.top-fv__item--christmas {
	background-image: url('../images/christmas2022/chirstmas_mv_bg_pc.jpg');
}
.top-fv__item--01 {
	background-image: url('../images/mothersday2022/top_fv_mothersday_bg01_sp.jpg');
}
.top-fv__item--02 {
		background-color: #f7f1db;
}
.top-fv__item--03 {
	background-image: url('../images/mothersday2022/top_fv_mothersday_bg03_sp.jpg');
}
.top-fv__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 477px;
}
.top-fv__pic--01, .top-fv__img--01 {
	width: 473px;
}
.top-fv__pic--02, .top-fv__img--02 {
	width: 672px;
}
.top-fv__pic--03, .top-fv__img--03 {
	width: 321px;
}
.top-fv__readmore {
	width: 113px;
}

.top-fv__text--christmas {
	width: 255px;
	margin: 0 auto;
}
.top-fv__img--christmas {
	width: 100%;
}
.top-fv__logo--christmas {
	width: 209px;
	margin: 22px auto 0;
}
.top-fv__readmore--christmas {
	width: 81px;
	margin: 72px auto 0;
}

@media screen and (min-width: 769px) {
	.top-fv {
		height: 672px;
	}
	.top-fv__item {
		height: 672px;
	}
	.top-fv__item--01 {
		background-image: url('../images/mothersday2022/top_fv_mothersday_bg01_pc.jpg');
	}
	.top-fv__item--02 {
		background-color: #f7f1db;
	}
	.top-fv__item--03 {
		background-image: url('../images/mothersday2022/top_fv_mothersday_bg03_pc.jpg');
	}
	.top-fv__inner {
		height: 672px;
	}
	.top-fv__pic--01, .top-fv__img--01 {
		width: 759px;
	}
	.top-fv__pic--02, .top-fv__img--02 {
		width: 926px;
	}
	.top-fv__pic--03, .top-fv__img--03 {
		width: 434px;
	}
	.top-fv__scroll {
		margin-top: 50px;
	}
	.top-fv__scrollLink {
		width: 144px;
	}
	.top-fv__readmore {
		width: 162px;
		margin-top: -40px;
	}
	.top-fv__text--christmas {
		width: 567px;
	}
	.top-fv__img--christmas {
		width: 100%;
	}
	.top-fv__logo--christmas {
		width: 466px;
	}
	.top-fv__readmore--christmas {
		width: 162px;
		margin: 95px auto 0;
	}
}

.floating-button--mothersday {
	z-index: 10;
	position: fixed;
	right: 8px;
	bottom: 8px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition-duration: .4s;
}
.floating-button--mothersday.active {
	pointer-events: all;
	opacity: 1;
}
.floating-button__link--mothersday {
	display: block;
	width: 113px;
	height: 154px;
	transition-duration: .4s;
}
.floating-button__link--mothersday:hover {
	opacity: .65;
}
.floating-button__img--mothersday {
	width: 100%;
}
@media screen and (min-width: 769px) {
	.floating-button--mothersday {
		right: 20px;
		bottom: 20px;
	}
	.floating-button__link--mothersday {
		width: 142px;
		height: 194px;
	}
}

/* === lead === */
.send.top .mainimg .lead{
	background-image: url(../images/index/txt_bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	display: flex;
	/* font-weight: 600; */
	justify-content: center;
	align-items: center;
	padding-top: 20px;
}
.send.top .mainimg .lead p {
	text-align: center;
	line-height: 2;
	margin: 0;
	position: relative;
}
.send.top .mainimg .lead p::before {
	content: "";
	display: block;
	background-image: url(../images/index/txt_oisix_egift.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	position: absolute;
	left: -30px;
	top: -55px;
	width: 169px;
	height: 82px;
}
@media screen and (min-width: 769px) {
	.send.top .mainimg .lead{
		padding-top: 30px;
	}
}
/* special　gift背景テキスト
--------------------------------------------------------- */
.send.top .bgSpecialgift {
	text-align: center;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.6;
}
.send.top .bgSpecialgift span {
	display: inline-block;
	position: relative;
	width: 100%;
}
.send.top .bgSpecialgift span::before {
	content: "";
	background-image: url(../images/index/txt_special_gift.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	position: absolute;
	top: -60px;
	left: 15px;
	width: 210px;
	height: 90px;
}
@media screen and (min-width: 769px) {
	.send.top .bgSpecialgift {
		font-size: 30px;
	}
	.send.top .bgSpecialgift span::before {
		top: -35px;
		left: 75px;
	}
}
/* Oisixとは？
--------------------------------------------------------- */
/* === SEND・GIFT共通 === */
.aboutSec{
	background: var(--olive-light);
	padding: 35px 24px 48px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	margin-top: 0;
	display: block;
}
.aboutSec h2 {
	margin: 0 0 35px;
	font-weight: normal;
	font-family: Verdana, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans Japanese", sans-serif;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.aboutSec h2 span {
	font-size: 22.5px;
}
.aboutSec img{
	width: 130px;
}
.aboutSec p{
	line-height: 2;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	font-family: Verdana, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans Japanese", sans-serif;
}
.aboutSec h2,
.aboutSec p{
	opacity: 0;
}
.aboutSec.isAnimate h2,
.aboutSec.isAnimate p{
	opacity: 0;
	animation-name: anim02;
	animation-fill-mode: forwards;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-delay: 0.3s;
}
@keyframes anim02 {
	  0% { opacity: 0; }
	100% { opacity: 1; }
}

@media screen and (min-width: 769px) {
	.aboutSec {
		padding: 30px 24px 40px;
	}
	.aboutSec h2 {
		margin: 0 0 17px;
	}
}
/* Oisix eGiftで できること
--------------------------------------------------------- */

.send.top .specialgiftSec{
	background: var(--main);
	color: #ffffff;
	overflow: hidden;
	margin-top: 0;
    padding-top: 40px;
	padding-bottom: 30px;
}
.send.top .specialgiftList{
    display: flex;
    justify-content: space-evenly;
		align-items: flex-start;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    text-align: center;
    margin: 30px auto auto;
}
.send.top .specialgiftList li{
	width: 49%;
	margin-bottom: 10px;
}
.send.top .specialgiftList li figure{
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    align-items: flex-end;
    /* height: 100%; */
	font-weight: 300;
}
.send.top .specialgiftList li figure figcaption {
    margin-bottom: 10px;
	line-height: 1.6;
	width: 100%;
}
.send.top .specialgiftList li figure img {
	flex: none;
	height: auto;
}
@media screen and (min-width: 769px) {
	.send.top .specialgiftSec {
		padding-bottom: 45px;
	}
	.send.top .specialgiftList {
		width: 95%;
	}
	.send.top .specialgiftList li {
		width: 25%;
		margin-bottom: auto;
	}
}
/* こんな時に贈りませんか？
--------------------------------------------------------- */
.send.top .bgUseScene {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
	margin: 45px auto 20px;
}
.send.top .bgUseScene span {
	display: inline-block;
	position: relative;
	width: 100%;
}
.send.top .bgUseScene span::before {
	content: "";
	background-image: url(../images/index/txt_use_scene.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	position: absolute;
	top: -42px;
	left: 15px;
	width: 210px;
	height: 90px;
}
@media screen and (min-width: 769px) {

	.send.top .bgUseScene {
		margin: 55px auto 35px;
	}
	.send.top .bgUseScene span::before {
		top: -47px;
		left: 125px;
	}
}


.send.top .slideSec{
	background-color: var(--olive-light);
	overflow: hidden;
	text-align: center;
	margin-top: 0;
    padding-top: 17px;
	padding-bottom: 30px;
}
.send.top .sendTopSlider {
    margin: 20px auto 0;
    padding: 0 0 15px;
    width: 61%;
    position: relative;
    max-width: 768px;
}
.send.top .sendTopSlider + p {
	margin-top: 5px;
	line-height: 1.6;
}
.send.top .sendTopSlider img {
	height: auto;
	width: 100%;
}
.send.top .sendTopSlider .slide-img {
	position: relative;
	margin: 0 5px;
}

/* 下部ドット */
.send.top .sendTopSlider button, .setWrapper button {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.send.top .sendTopSlider .slide-dots, .setWrapper .slide-dots {
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
.send.top .sendTopSlider .slide-dots li, .setWrapper .slide-dots li {
	display: flex;
	align-items: flex-end;
	margin: 0 4px;
	padding: 0;
	width: 8px;
	height: 20px;
}
.send.top .sendTopSlider .slide-dots li button, .setWrapper .slide-dots li button {
	position: relative;
	text-indent: -9999px;
	cursor: pointer;
	transition: 0.3s;
	width: 8px;
	height: 8px;
	background: #C7C7C7;
	border-radius: 50%;
}
.send.top .sendTopSlider .slide-dots li.slick-active button, .setWrapper .slide-dots li.slick-active button {
	background: var(--sub);
}
/* 左右矢印 */
.send.top .sendTopSlider .slick-arrow, .setWrapper .slick-arrow {
	position: absolute;
	top: calc(50% - 4.5em);
	width: 40px;
	height: 40px;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
}
.setWrapper .slick-arrow {
	top: 100px;
}
.send.top .sendTopSlider .slick-arrow.btn-prev, .setWrapper .slick-arrow.btn-prev {
	left: 0px;
}
.send.top .sendTopSlider .slick-arrow.btn-next, .setWrapper .slick-arrow.btn-next {
	right: 0px;
}
.send.top .sendTopSlider .slick-arrow span, .setWrapper .slick-arrow span{
	position: relative;
	background: #fff;
	border-radius: 50%;
	width: 32px;
	height: 32px;
}
.send.top .sendTopSlider .slick-arrow span::after, .setWrapper .slick-arrow span::after{
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	margin-top: -5px;
}
.send.top .sendTopSlider .slick-arrow.btn-prev span::after, .setWrapper .slick-arrow.btn-prev span::after {
	border-bottom: solid 2px var(--main);
	border-left: solid 2px var(--main);
	left: 12px;
}
.send.top .sendTopSlider .slick-arrow.btn-next span::after, .setWrapper .slick-arrow.btn-next span::after{
	border-top: solid 2px var(--main);
	border-right: solid 2px var(--main);
	right: 12px;
}
.send.top .sendTopSlider .slide-img figure{
	max-width: 360px;
	margin: auto;
}
.send.top .sendTopSlider .slide-img figure figcaption {
	margin-top: 2em;
}
.send.top .sendTopSlider .slide-img p {
    font-size: 15px;
    color: #333333;
    text-align: center;
    line-height: 1.3;
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    display: block;
    padding: 0;
}
@media screen and (min-width: 769px) {
	.send.top .slideSec {
		padding-bottom: 20px;
	}
	.send.top .sendTopSlider {
		width: 95%;
	}
	.send.top .sendTopSlider .slide-img {
		padding: 0 5px;
	}
	.send.top .sendTopSlider .slide-img figure{
		max-width: 360px;
	}
	.send.top .sendTopSlider .slide-img figure figcaption {
		margin-top: 2em;
	}
	.send.top .sendTopSlider .slide-img img{
		width: 360px;
	}
	.send.top .sendTopSlider .slick-arrow.btn-next {
		right: -20px;
	}
	.send.top .sendTopSlider .slick-arrow.btn-prev {
		left: -20px;
	}
	.setWrapper .slick-arrow.btn-next, .setWrapper .slick-arrow.btn-prev {
		top: 80px;
	}
}
/* Oisix eGiftの贈り方
--------------------------------------------------------- */
/* === SEND・GIFT共通 === */
.howtoSec {
	color: #ffffff;
	background-color: #658369;
	background-image: url(../images/index/bg_rock_g_sp.jpg);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 0;
	padding-top: 70px;
	padding-bottom: 50px;
	overflow: hidden;
}
.howtoSec .howtoList {
	text-align: center;
	list-style: none;
	padding: 0;
	margin-top: 40px;
}
.howtoSec .howtoList li {
	margin-bottom: 40px;
}
.howtoSec .aniBox li{
	opacity: 0;
}
.howtoSec .isAnimate li{
	opacity: 0;
	animation-name: anim01;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
}
.howtoSec .isAnimate li:nth-of-type(1) { animation-delay: 0s }
.howtoSec .isAnimate li:nth-of-type(2) { animation-delay: 0.5s }
.howtoSec .isAnimate li:nth-of-type(3) { animation-delay: 1s }
.howtoSec .isAnimate li:nth-of-type(4) { animation-delay: 1.5s }

@keyframes anim01 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.howtoSec .howtoList li .txtBox{
    margin-top: 6px;
}
.howtoSec .howtoList li .txtBox h3 {
	font-size: 20px;
	margin: 0;
	padding-top: 1em;
	padding-bottom: 8px;
	position: relative;
	color: #ffffff;
}
.howtoSec .howtoList li .txtBox h3::before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
    background-position: top left 7%;
    top: -5%;
}
.howtoSec .howtoList li:first-child .txtBox h3::before {
	background-image: url(../images/index/txt_step1.svg);
}
.howtoSec .howtoList li:nth-child(2) .txtBox h3::before {
	background-image: url(../images/index/txt_step2.svg);
}
.howtoSec .howtoList li:nth-child(3) .txtBox h3::before {
	background-image: url(../images/index/txt_step3.svg);
}
.howtoSec .howtoList li:nth-child(4) .txtBox h3::before {
	background-image: url(../images/index/txt_step4.svg);
}
.howtoSec .howtoList li .txtBox p{
	line-height: 2;
	margin-top: 0;
	margin-bottom: 18px;
	font-size: 15px;
	color: #ffffff;
}
.howtoSec .accordionBox {
	margin-top: 50px;
	border-radius: 4px;
	overflow: hidden;
}
.howtoSec .accordionBox,
.howtoSec .accordionBox dt,
.howtoSec .accordionBox dd {
	 background-color: #ffffff;
}
.howtoSec .accordionBox dt {
	border: none;
	color: #558D5C;
    padding: 10px 35px 10px 16px;
	font-weight: 600;
}
.howtoSec .accordionBox dt::after {
	display: none;
}
.howtoSec .accordionBox dt span {
	justify-content: center;
}
.howtoSec .accordionBox .howtoList {
	margin-top: 20px;
}
.howtoSec .accordionBox .howtoList li .txtBox h3{
	color: #558D5C;
}
.howtoSec .accordionBox .howtoList li .txtBox p{
	color: #333333;
	font-weight: 300;
	line-height: 1.5;
}
.howtoSec .accordionBox .howtoList li:first-child .txtBox h3::before {
	background-image: url(../images/index/txt_stepg1.svg);
}
.howtoSec .accordionBox .howtoList li:nth-child(2) .txtBox h3::before {
	background-image: url(../images/index/txt_stepg2.svg);
}
.howtoSec .accordionBox .howtoList li:nth-child(3) .txtBox h3::before {
	background-image: url(../images/index/txt_stepg3.svg);
}
.howtoSec .accordionBox .howtoList li:nth-child(4) .txtBox h3::before {
	background-image: url(../images/index/txt_stepg4.svg);
}


@media screen and (min-width: 769px) {
	.howtoSec {
		background-image: url(../images/index/bg_rock_g.jpg);
		padding-top: 30px;
		padding-bottom: 60px;
	}
	.howtoSec .inner {
		max-width: 798px;
		margin: auto;
		padding: 0;
	}
	.howtoSec .howtoList {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.howtoSec .howtoList li {
		width: 50%;
		margin-bottom: 20px;
	}
	.howtoSec .accordionBox {
		margin: 20px auto auto;
		max-width: 95%;
	}
	.howtoSec .accordionBox dt {
		padding: 10px 35px 10px 25px;
	}
}
/* お届けイメージ
--------------------------------------------------------- */
.send.top .deliverySec {
	padding-top: 24px;;
}
.send.top .bgDelivery {
	text-align: center;
    font-size: 26px;
    font-weight: 600;
	line-height: 1.6;
}
.send.top .bgDelivery span {
	display: inline-block;
	position: relative;
	width: 100%;
}
.send.top .bgDelivery span::before {
	content: "";
	background-image: url(../images/index/txt_delivery_image.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	position: absolute;
    top: -60px;
    left: 15px;
	width: 233px;
	height: 90px;
}
.send.top .deliveryList {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    text-align: center;
    list-style: none;
    padding-left: 0;
	margin: 40px auto 30px;
}
.send.top .deliveryList li {
	width: 48%;
	margin-bottom: 20px;
}
.send.top .deliveryList figure {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: center; */
    /* height: 100%; */
}
.send.top .deliveryList figure a {
	position: relative;
	display: block;
}
.send.top .deliveryList .deliveryList__icon.--zoom {
	position: absolute;
	right: 9px;
	bottom: 8px;
	display: block;
	width: 57px;
	height: 57px;
}
.send.top .deliveryList figcaption {
	width: 100%;
	margin-top: 5px;
}
.send.top .deliveryList figure img {
	flex: none;
	height: auto;
}
@media screen and (min-width: 769px) {
	.send.top .deliverySec {
		padding-top: 40px;
	}
	.send.top .bgDelivery span::before {
		left: 230px;
	}
	.send.top .deliveryList {
		margin: 50px auto;
	}
	.send.top .deliveryList figure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* height: 100%; */
}
	.send.top .deliveryList li {
		width: 25%;
	}
}
/* PresentForDear 
--------------------------------------------------------- */
.send.top .messageSec {
	background-image: url(../images/index/bg_message_sec_sp.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	color: #ffffff;
	overflow: hidden;
}
.send.top .messageSec .bgPresentForDear {
    padding-top: 130px;
}
.send.top .messageSec .mask {
    background: rgba(35, 24, 21, .5);
    padding: 1px 13px 1px 30px;
    line-height: 2;
    margin-right: 17px;
    position: relative;
}
.send.top .messageSec .mask::before {
    content: "";
    background: url(../images/index/txt_present_for_dear.svg) no-repeat;
    display: block;
    height: 90px;
    width: 223px;
    position: absolute;
    top: -85px;
    left: 20px;
}
.send.top .messageSec .mask p{
	font-size: 20px;
}
.send.top .messageSec .btnBox {
    margin: 53px auto 53px 0;
    max-width: 270px;
	width: 80%;
}
.send.top .messageSec .btnBox.arr-btn .btn span {
    background-image: url(../images/index/ico_gift.svg);
    background-repeat: no-repeat;
    background-position: center left 25px;
    height: 65px;
    line-height: 65px;
}
.send.top .flexWrap {
	display: flex;
}
.send.top .arrowWrap {
	width: 20%;
	padding: 30px 0;
}
.send.top .arrowWrap > div {
	width: 53px;
	height: 53px;
	border-radius: 28px;
	background: rgba(63,105,68,.5);
	margin: auto 0 auto auto;
}
.send.top .arrowWrap > div a{
    display: block;
    height: 100%;
    width: 100%;
}
.send.top .arrowWrap .arrowUp{
	margin-bottom: 10px;
	position: relative;
}
.arrowUp::before {
    content: "";
    display: block;
    border-top: solid;
    border-right: solid;
    height: 10px;
    width: 10px;
    position: absolute;
    top: calc(50%);
    left: 50%;
    transform: translate(-50% , -50%) rotate(-45deg);
}
.send.top .arrowWrap .arrowDown{
	position: relative;
}
.arrowDown::before {
    content: "";
    display: block;
    border-bottom: solid;
    border-right: solid;
    height: 10px;
    width: 10px;
    position: absolute;
    top: calc(50%);
    left: 50%;
    transform: translate(-50% , -50%) rotate(45deg);
}
@media screen and (min-width: 769px) {
	.send.top .messageSec{
		background-image:url(../images/index/bg_message_sec.jpg);
	}
	.send.top .messageSec .bgPresentForDear {
		padding-top: 95px;
	}
	.send.top .messageSec .mask {
		text-align: center;
		max-width: 500px;
		margin: auto;
		padding: 17px;
	}
	.send.top .messageSec .mask::before {
		top: -35px;
		left: -20px;
	}
	.send.top .arrowWrap {
		display: none;
	}
	.send.top .messageSec .btnBox {
		margin: 53px auto 53px;
	}
	.send.top .messageSec .btnBox.arr-btn .btn {
		width: 270px;
	}
}
/* よくある質問 
--------------------------------------------------------- */

.top .faqSec {
	margin-top: 0;
	overflow: hidden;
	padding-top: 24px;
	background-color: #F1F1F1;
}
.top .faqSec h2 {
	font-size: 24px;
	font-weight: 300;
	text-align: center;
	margin-bottom: 30px;
}
.top .faqSec .accordionBox dt {
	background-color: #F1F1F1;
	border-color: #dddddd;
    color: var(--main);
    font-size: 14px;
    font-weight: 300;
    border-radius: 0;
    border-left: none;
    border-right: none;
	border-bottom: none;
}
.top .faqSec .accordionBox:last-child dt {
	border-bottom: solid 1px #dddddd;
}
.top .faqSec .accordionBox dt.active {
	border-bottom: solid 1px #dddddd;
}
.top .faqSec .accordionBox dt::after {
	display: none;
}
.top .faqSec .accordionBox dd {
	position: relative;
	background-color: #F1F1F1;
	padding: 0 1em;
}
.top .faqSec .accordionBox dd:not(:first-of-type) {
	z-index: 1;
}
.top .faqSec .accordionBox dd.active {
	padding: 1em;
}
.top .faqSec .accordionBox dd .faqSec__attention {
	font-style: normal;
	font-weight: bold;
}
.top .faqSec .accordionBox dd .faqSec__payment {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.faqSec .accordionBox dd .faqSec__payment__img.--01 {
	width: 60px;
}
.faqSec .accordionBox dd .faqSec__payment__img.--02 {
	width: 110px;
}
.faqSec .accordionBox dd .faqSec__payment__img.--03 {
	width: 60px;
}
.faqSec .accordionBox dd .faqSec__payment__img.--04 {
	width: 90px;
}
.faqSec .accordionBox dd .faqSec__payment__img.--05 {
	width: 90px;
}

@media screen and (max-width: 768px) {
	.top .faqSec .accordionBox dd .faqSec__payment__item:not(:nth-child(3n + 1)) {
		margin-left: 1em;
	}
}
@media screen and (min-width: 769px) {
	.top .faqSec .accordionBox {
		max-width: 540px;
		margin: auto;
	}
	.top .faqSec .accordionBox dd .faqSec__payment {
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 0 0.5em;
	}
}



/* ------------------------------------------------------------------------------------------------------------------
 　■ 受け取り側ページ ■
------------------------------------------------------------------------------------------------------------------ */

/* ---------------------------------------------------------
 　■ お客様情報／ギフトのお届け先を入力してください
--------------------------------------------------------- */
.giftcordHead{
	margin-top: 32px;
}
.giftcordHead .bg-wrap {
	line-height: 1;
	background: var(--glay-bg);
	padding: 16px 0;
	text-align: center;
	border-radius: 4px;
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.giftcordHead .ttl {
	line-height: 1.5;
	text-align: center;
	margin: 20px 0;
}
.giftcordHead p{
	font-size: 24px;
	font-weight: bold;
	margin: 0;
}
.giftcordHead p.name{
	font-size: 20px;
}
.giftcordHead .limit{
	color: var(--main);
}
@media screen and (min-width: 769px) {
	.giftcordHead .bg-wrap{
		max-width: 448px;
		margin: 0 auto;
	}
}

.giftcordInput{
	margin-top: 36px;
	padding-bottom: 80px;
}
.giftcordInput .inputText{
	margin-top: 0;
}
.giftcordInput .btmNote *{
	font-size: 15px;
	line-height: 1.5;
}
.giftcordInput .btmNote ul{
	margin: 1em 0 0;
}
.giftcordInput .btmNote ul li{
	padding-left:1em;
	text-indent:-1em;
}

/* ---------------------------------------------------------
 　■ 受け取りTOP
--------------------------------------------------------- */
.giftcard .cardWP{
}
.giftcard .cardWP .card-img{
	position: relative;
}
.giftcard .cardWP .card-img figure{
	margin: 0;
}
.giftcard .cardWP .card-img figure img{
	width: 100%;
}
.giftcard .cardWP .card-img p{
	font-size: 30px;
	color: #fff;
	line-height: 1.33;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0;
}
.giftcard .cardWP .card-message{
	padding: 30px 40px 0;
	text-align: center;
}
.giftcard .cardWP .card-message p.recipientName {
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 15px;
	line-height: 1.3;
}
.giftcard .cardWP .card-message p.recipientName span {
	font-size: inherit;
}
.giftcard .cardWP .card-message p.message{
	text-align: center;
	font-size: 14px;
	line-height: 1.8;
	margin: 0;
	padding-bottom: 1px;
	background-image: linear-gradient(transparent 0, transparent 97%, #cccccc 100%);
	background-size: 100% 1.8em;
	white-space: pre-line;
}
.giftcard .cardWP .card-message p.name{
	font-size: 16px;
	font-weight: bold;
	margin: 30px 0 0;
}
.giftcard .cardWP .card-message .btnBox{
	margin: 30px 0 0;
}
@media screen and (min-width: 769px) {
	.giftcard .cardWP{
		padding: 40px 0;
	}
	.giftcard .cardWP .card-img{
		width: 448px;
		margin: 0 auto;
	}
	.giftcard .cardWP .card-message .recipientNamePrefix {
		display: none;
	}
	.giftcard .cardWP .card-message p.message{
		text-align: center;
	}
}
/* === 受け取りボタン === */
.gitcard-get{
	padding-bottom: 40px;
}
.gitcard-get .btnBox{
	margin: 24px 0 !important;
}
.gitcard-get .btnBox.arr-btn .btn button {
	background-color: #fff;
	background-image: url(../images/icon_present_gr.svg);
	background-position: center left 25px;
	background-repeat: no-repeat;
	color: var(--main);
	border: 1px solid var(--main);
	font-weight: bold;
}
.gitcard-get .btnBox.arr-btn .btn::after{
	border-top: 2px solid var(--main);
	border-right: 2px solid var(--main);
}

#recieve-top .giftcard-form__stage__step {
	background: #fff url(../images/modal_card_bg.jpg) center top/cover no-repeat;
}

.gitcard-get__attention {
	text-align: center;
	font-size: 12px;
}

@media screen and (max-width: 768px) {
	.gitcard-get__attention {
		margin-top: 30px;
		padding: 0 16px;
		line-height: 1.2;
	}	
}

/* ---------------------------------------------------------
 　■ 商品選択画面
--------------------------------------------------------- */

/* Oisixとは？
--------------------------------------------------------- */
.gift.top .aboutSec{
	background: var(--olive-light);
}

/* Oisix eGiftの受け取り方
--------------------------------------------------------- */
.gift.top .bgHowtouse {
	margin-top: 0.83em;
	margin-bottom: 0.83em;
	text-align: center;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.6;
}
.gift.top .bgHowtouse .bgHowtouse__inner {
	display: inline-block;
	position: relative;
	width: 100%;
	font-size: 26px;
	color: #ffffff;
}
.gift.top .bgHowtouse .bgHowtouse__inner::before {
	background-image: url(../images/gift/txt_how_to_use.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	position: absolute;
	left: 15px;
	top: -60px;
	width: 176px;
	height: 84px;
	content: "";
}
.bgHowtouse__sm {
	color: #ffffff;
}
@media screen and (min-width: 769px) {
	.gift.top .bgHowtouse {
		font-size: 30px;
	}
}

.gift.top .howtoSec{
	padding-bottom: 0;
}
.gift.top .howtoSec .howtoList{
	margin-bottom: 1em;
}
.gift.top .howtoSec .howtoList li .txtBox {
	margin: 12px auto 0;
	width: 240px;
}
.gift.top .howtoSec .howtoList li .txtBox h3::before{
	display: none;
}

@media screen and (min-width: 769px) {
	.gift.top .howtoSec .howtoList{
		flex-wrap: nowrap;
		justify-content: space-evenly;
	}
	.gift.top .howtoSec .howtoList li {
		width: 230px;
	}
	.gift.top .howtoSec .howtoList li .txtBox {
		width: 100%;;
	}
	.gift.top .howtoSec{
		padding-bottom: 0;
	}
}



/* 4種類の中からお好きなギフトをえらんでください。
--------------------------------------------------------- */
.gift.top .select_giftSec{
}
.gift.top .select_giftSec h2{
	font-size: 22px;
	line-height: 2;
	margin: 50px 0 30px;
	text-align: center;
}
.gift.top .select_giftSec h2 span{
	font-size: inherit;
}
.gift.top .select_giftSec ul.anc_list{
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	font-size: 14px;
	max-width: 327px
}
.gift.top .select_giftSec ul.anc_list li + li{
	margin-top: 16px;
}
.gift.top .select_giftSec ul.anc_list li a{
	background-image: url(../images/icon_arrow.svg);
	background-position: 95% center;
	background-repeat: no-repeat;
	display: block;
	border: 1px solid var(--main);
	font-size: 14px;
	color: var(--main);
	border-radius: 4px;
	padding: 10px 0 9px 16px;
}
.gift.top .select_giftSec ul.anc_list li a span{
	display: inline-block;
	font-size: inherit;
	color: inherit;
}
.gift.top .select_giftSec ul.anc_list li a span.num{
	margin-right: 24px;
}
@media screen and (min-width: 769px) {
	.gift.top .select_giftSec ul.anc_list{
		margin-bottom: 40px;
	}
}
/* === GIFT === */
.gift.top .select_giftSec .anc_content{
	background: var(--glay-bg);
	margin-top: 24px;
	padding: 45px 0 60px;
}
.gift.top .select_giftSec .anc_content .gift_head{
	padding: 0 24px;
}
.gift.top .select_giftSec .anc_content .gift_head .gift_img{
	position: relative;
	align-items: center;
}
.gift.top .select_giftSec .anc_content .gift_head .gift_img img{
	width: 100%;
}
.gift.top .select_giftSec .anc_content .gift_head .gift_img figcaption{
	text-align: center;
	font-size: 20px;
	color: #FFF;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}
.gift.top .select_giftSec .anc_content .gift_head .gift_img::after {
	background-position: 0px 0px;
	background-repeat: no-repeat;
	position: absolute;
	left: 12px;
	top: 21px;
	width: 107px;
	height: 65px;
	content: "";
	display: block;
}
.gift.top .select_giftSec #gift01 .gift_head .gift_img::after {
	background-image: url(../images/gift/txt_gift01.png);
}
.gift.top .select_giftSec #gift02 .gift_head .gift_img::after {
	background-image: url(../images/gift/txt_gift02.png);
}
.gift.top .select_giftSec #gift03 .gift_head .gift_img::after {
	background-image: url(../images/gift/txt_gift03.png);
}
.gift.top .select_giftSec #gift04 .gift_head .gift_img::after {
	background-image: url(../images/gift/txt_gift04.png);
}
.gift.top .select_giftSec .anc_content .gift_head dl{
	margin-top: 65px;
}
.gift.top .select_giftSec .anc_content .gift_head dl dt{
	margin-bottom: 37px;
	font-weight: bold;
}
.gift.top .select_giftSec .anc_content .gift_head dl dt .gift_num{
	font-size: 20px;
	display: block;
}
.gift.top .select_giftSec .anc_content .gift_head dl dt .ttl{
	font-size: 24px;
	display: block;
	/* margin-top: 10px; */
}
.gift.top .select_giftSec .anc_content .gift_head dl dd{
	margin: 0 0 .5em;
	font-size: 15px;
	line-height: 2;
}
.gift.top .select_giftSec .anc_content .gift_detail {
	margin: 56px auto 48px;
	padding: 0 32px;
}
.gift.top .select_giftSec .anc_content .gift_detail p.ttl, .setDetail__ttl {
	font-size: 16px;
	font-weight: bold;
}
.gift.top .select_giftSec .anc_content .gift_detail .gift_detail__note, .setDetail__note {
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: 12px;
}
.gift.top .select_giftSec .anc_content .gift_detail ul{
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 40px 0;
	padding: 0;
}
.gift.top .select_giftSec .anc_content .gift_detail ul li{
	margin: 0;
	width: calc( 100% / 3 );
	text-align: center;
}
.gift.top .select_giftSec .anc_content .gift_detail ul li:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
	margin-top: 30px;
}
.gift.top .select_giftSec .anc_content .gift_detail ul li figcaption{
	margin-top: 20px;
	font-size: 15px;
	color: #333;
}
.gift.top .select_giftSec .anc_content .gift_detail p.note{
	font-size: 11px;
}
.gift.top .select_giftSec .anc_content .btnBox{
	margin: 15px auto 0;
}
.gift.top main{
	padding-bottom: 0;
	max-width: 100%;
}
@media screen and (min-width: 769px) {
	.gift.top .inner {
		max-width: 798px;
		margin: auto;
		padding: 0;
	}
	.gift.top .select_giftSec .anc_content .gift_head{
		display: flex;
		justify-content: space-between;
		padding: 0 56px;
	}
	.gift.top .select_giftSec .anc_content .gift_head .gift_img{
		width: 327px;
	}
	.gift.top .select_giftSec .anc_content .gift_head dl {
		margin: 0;
		width: calc( 100% - 327px );
		padding-left: 30px;
	}
	.gift.top .select_giftSec .anc_content .gift_detail {
		padding: 0 56px;
		margin-top: 35px;
	}
	.gift.top .select_giftSec .anc_content .gift_detail p.ttl, .setDetail__ttl {
		text-align: center;
		font-size: 20px;
		margin: 0;
	}
	.gift.top .select_giftSec .anc_content .gift_detail .gift_detail__note, .setDetail__note {
		text-align: center;
	}
	.gift.top .select_giftSec .anc_content .gift_detail ul{
		margin: 40px 0 0;
	}
	.gift.top .select_giftSec .anc_content .gift_detail ul li {
		width: calc( 100% / 6 );
		text-align: center;
		margin-top: 0 !important;
	}
	.gift.top .select_giftSec .anc_content .gift_detail ul li:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)):not(:nth-child(6)) {
		margin-top: 30px !important;
	}
	.gift.top .select_giftSec .anc_content .gift_detail p.note{
		text-align: center;
		margin: 34px 0 0;
	}
	.gift.top .select_giftSec .anc_content{
	}
}

.gift.top .receive-attention-register {
	margin-top: 50px;
	margin-bottom: 50px;
	text-align: center;
	font-size: 14px;
}