@charset "UTF-8";

/* ---------------------------------------------------------
 　■ トップページ
--------------------------------------------------------- */
/* メインビジュアル
--------------------------------------------------------- */
.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: #fff;
}
.send.top main {
    margin-bottom: 65px;
    padding: 0;
	max-width: 100%;
}
.send.top header {
    height: auto;
    border: none;
	position: relative;
}
.send.top header .headerLogin a:hover {
	opacity: 1;
}
.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%;
}
.send.top header .headerLogin a:hover .btn-login {
	opacity: .8;
}
/* メインビジュアル
--------------------------------------------------------- */
.send.top .mainimg .wp{
	font-weight: bold;
	color: #fff;
	background-image: url(../images/send/mainimg01_sp_.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	position: relative;
	height: 430px;
}
.send.top .mainimg .wp .bgImg{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity    : 0;
	animation  : bgAnime 15s infinite;   /* 3画像 × 各5s = 15s */
}
.send.top .mainimg .wp .src1 {
  background-image : url(../images/send/mainimg01_sp.jpg);
}
.send.top .mainimg .wp .src2 {
  background-image : url(../images/send/mainimg02_sp.jpg);
  animation-delay  : 5s;
}
.send.top .mainimg .wp .src3 {
  background-image : url(../images/send/mainimg03_sp.jpg);
  animation-delay  : 10s;
}
@keyframes bgAnime {
   0% { opacity: 0 }
   3% { opacity: 1 }
  33% { opacity: 1 }
  36% { opacity: 0 }
 100% { opacity: 0 }
}

.send.top .mainimg .ttl-txt{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.send.top .mainimg .ttl-txt .logo img{
	width: 220px;
	filter: drop-shadow(0 0 5px #ffffff);
}
.send.top .mainimg .txt01{
	opacity: 0;
	font-size: 30px;
	margin: 20px 0 20px;
}
.send.top .mainimg .txt02{
	opacity: 0;
	font-size: 60px;
	letter-spacing: 1.5px;
	margin: 0;
}
@media screen and (min-width: 769px) {
	.send.top .inner {
		max-width: 798px;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}
	.send.top .mainimg .wp{
		font-weight: bold;
		color: #fff;
		background-image: url(../images/send/mainimg01_pc_.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;
		position: relative;
		height: 600px;
	}
	.send.top .mainimg .wp .src1 {
	  background-image : url(../images/send/mainimg01_pc.jpg);
	}
	.send.top .mainimg .wp .src2 {
	  background-image : url(../images/send/mainimg02_pc.jpg);
	}
	.send.top .mainimg .wp .src3 {
	  background-image : url(../images/send/mainimg03_pc.jpg);
	}
	.send.top .mainimg .ttl-txt .logo {
		margin-top: 15px;
	}
	.send.top .mainimg .ttl-txt .logo img{
		width: 430px;
	}
	.send.top .mainimg .txt01{
		font-size: 36px;
		margin: 20px 0 20px;
	}
	.send.top .mainimg .txt02 {
		font-size: 72px;
	}
}
/* === 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;
	flex-direction: column;
	/* font-weight: 600; */
	justify-content: center;
	align-items: center;
	padding-top: 50px;
	/* padding-bottom: 50px; */
}
.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;
}
.send.top .lead .btnBox {
	margin: 30px auto;
	width: 270px;
}

@media screen and (min-width: 769px) {
	.send.top .lead .btnBox {
		margin: 30px auto;
		width: 343px;
	}
	}
/* 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-weight: 600;
	margin-top: 0;
	display: block;
}
.aboutSec h2 {
	margin: 0 0 35px;
	font-weight: normal;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.aboutSec img{
	width: 130px;
}
.aboutSec p{
	line-height: 2;
	margin: 0;
}
.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%;
}
@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;
	height: auto;
	margin: 0 5px;
}

/* 下部ドット */
.send.top .sendTopSlider 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 {
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
.send.top .sendTopSlider .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 {
	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 {
	background: var(--sub);
}
/* 左右矢印 */
.send.top .sendTopSlider .slick-arrow{
	position: absolute;
	top: calc(50% - 4.5em);
	width: 40px;
	height: 40px;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
}
.send.top .sendTopSlider .slick-arrow.btn-prev{
	left: -32px;
}
.send.top .sendTopSlider .slick-arrow.btn-next{
	right: -32px;
}
.send.top .sendTopSlider .slick-arrow span{
	position: relative;
	background: #fff;
	border-radius: 50%;
	width: 32px;
	height: 32px;
}
.send.top .sendTopSlider .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{
	border-bottom: solid 2px var(--main);
	border-left: solid 2px var(--main);
	left: 12px;
}
.send.top .sendTopSlider .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%;
		max-width: 1124px;
	}
	.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: -10px;
	}
	.send.top .sendTopSlider .slick-arrow.btn-prev {
		left: -10px;
	}
}
/* 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: 15px 0 0;
	padding-top: 1.5em;
	padding-bottom: 0.5em;
	position: relative;
}
.howtoSec .howtoList li .txtBox h3::before {
	content: "";
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-position: top left;
	left: 50%;
	top: -5%;
	transform: translateX(-50%) rotate(8deg);
}
.howtoSec .howtoList li:first-child .txtBox h3::before {
	width: 66px;
	height: 38px;
	background-image: url(../images/index/txt_step1.svg);
}
.howtoSec .howtoList li:nth-child(2) .txtBox h3::before {
	width: 76px;
	height: 40px;
	background-image: url(../images/index/txt_step2.svg);
}
.howtoSec .howtoList li:nth-child(3) .txtBox h3::before {
	width: 75px;
	height: 40px;
	background-image: url(../images/index/txt_step3.svg);
}
.howtoSec .howtoList li:nth-child(4) .txtBox h3::before {
	width: 75px;
	height: 40px;
	background-image: url(../images/index/txt_step4.svg);
}
.howtoSec .howtoList li .txtBox p{
	line-height: 2;
	margin-top: 0;
}
.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 dd {
	display: none;
	height: auto;
	transition-duration: 0s;
}
.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%;
	height: auto;
	margin-bottom: 20px;
}
.send.top .deliveryList figure {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: center; */
    /* height: 100%; */
}
.send.top .deliveryList figcaption {
	width: 100%;
	margin-top: 5px;
}
@media screen and (max-width: 768px) {
	.send.top .deliveryList {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	.send.top .deliveryList figure img {
		width: 100%;
		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 li {
		width: calc(100% / 3);
	}
	.send.top .deliveryList li img {
		width: 230px;
		height: 230px;
	}
}
/* PresentForDear 
--------------------------------------------------------- */
.send.top .messageSec {
	background-image: url(../images/send/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: 0 auto 0 0;
	max-width: 270px;
	width: 80%;
}
.send.top .messageSec .btnBox.arr-btn .btn span, .send.top .lead .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 .messageSec .flexWrap {
	display: flex;
	align-items: center;
	margin: 53px 0;
}
.send.top .arrowWrap {
	width: 20%;
	padding: 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{
	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/send/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 {
	background-color: #F1F1F1;
	padding: 0 1em;
}
.top .faqSec .accordionBox dd.active {
	padding: 1em;
}
@media screen and (min-width: 769px) {
	.top .faqSec .accordionBox {
		max-width: 540px;
		margin: auto;
	}
}
.top .faqSec.--last {
	padding: 0 0 60px 0;
}








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

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

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



/* 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 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);
	color: var(--main);
	border-radius: 4px;
	padding: 10px 0 9px 16px;
}
.gift.top .select_giftSec ul.anc_list li a span{
	display: inline-block;
}
.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{
	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: 37px 0 0;
	font-size: 15px;
	line-height: 2;
}
.gift.top .select_giftSec .anc_content .gift_detail {
	margin: 56px auto 0;
	padding: 0 32px;
}
.gift.top .select_giftSec .anc_content .gift_detail p.ttl{
	font-size: 16px;
	font-weight: bold;
}
.gift.top .select_giftSec .anc_content .gift_detail ul{
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	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;
	color: #333;
}
.gift.top .select_giftSec .anc_content .gift_detail p.note{
	font-size: 11px;
}
.gift.top .select_giftSec .anc_content .btnBox{
	margin: 48px 0 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{
		text-align: center;
		font-size: 20px;
		margin: 0;
	}
	.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{
	}
}



/* === フローティングボタン === */
.floating-button a{
	/* background-color: var(--main); */
	background-color: #a2cd4e;
	background-image: url(../images/index/ico_gift.svg);
	background-repeat: no-repeat;
	background-position: center 10px;
	z-index: 10;
	position: fixed;
	right: 8px;
	bottom: -100px;
	font-size: 15px;
	color: #fff;
	text-align: center;
	width: 93px;
	height: 93px;
	cursor: pointer;
	transition: .3s;
	opacity: 0;
	visibility: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	padding-top: 18px;
}
.floating-button.active a{
	bottom: 8px;
	opacity: 1;
	visibility: visible;
}

.floating-button span::after{
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

@media screen and (min-width: 769px) {
	.floating-button a {
		background-size: 30px auto;
		width: 120px;
		height: 120px;
		line-height: 1.2;
		font-size: 18px;
	}
}

.useScene {
	max-width: 100%;
	margin-top: 0 !important;
	background-color: var(--olive-light);
	overflow: hidden;
}
.useSceneTitle {
	font-size: 26px;
	text-align: center;
	color: #496847;
}
.useSceneList {
	list-style: none;
	padding-left: 0;
}
.useSceneList__item {
	display: flex;
	align-items: center;
}
.useSceneList__text {
	font-size: 20px;
	font-weight: bold;
	color: #496847;

}

@media screen and (max-width: 768px) {
	.useSceneTitle {
		margin: 40px 0;
	}
	.useSceneList {
		margin: 40px 0;
	}
	.useSceneList__item {
		gap: 0 10px;
	}
	.useSceneList__item:nth-child(2n + 1) {
		flex-direction: row-reverse;
		transform: translateX(24px);
	}
	.useSceneList__item:nth-child(2n) {
		transform: translateX(-24px);
	}
	.useSceneList__img {
		width: 213px;
	}
	.useSceneList__item:nth-child(2n + 1) .useSceneList__text {
		text-align: right;
	}
	.useSceneList__text {
		white-space: nowrap;
	}
}
@media screen and (min-width: 769px) {
	.useSceneInner {
		max-width: 1175px;
		margin: 60px auto;
	}
	.useSceneTitle {
		font-size: 30px;
	}
	.useSceneList {
		display: flex;
		justify-content: space-between;
		gap: 0 37px;
	}
	.useSceneList__item {
		flex-direction: column;
		justify-content: center;
		width: 204px;
	}
	.useSceneList__text {
		font-size: 19px;
		text-align: center;
	}
}

.setSampleExample {
	padding-left: 0;
	list-style: none;
}
.setSampleExample__item {
	position: relative;
	width: 100%;
}
.setSampleExample__figure {
	width: 100%;
	margin: 0;
	padding: 0 0 20px;
}
.setSampleExample__caption {
	z-index: 1;
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 220px;
	height: 98px;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	background-color: rgba(73, 104, 71, .7);
}

@media screen and (max-width: 768px) {
	.setSampleExample {
		margin: 0 calc(50% - 50vw) 50px;
	}
	.setSampleExample__item:not(:last-child) {
		margin-bottom: 40px;
	}
	.setSampleExample__img {
		display: block;
		width: calc(320 / 390 * 100vw);
	}
	.setSampleExample__item:nth-child(2) .setSampleExample__img {
		margin-left: auto;
	}
	.setSampleExample__item:nth-child(2) .setSampleExample__caption {
		left: 0;
		right: auto;
	}
}
@media screen and (min-width: 769px) {
	.setSampleExample {
		display: flex;
		justify-content: center;
		gap: 0 48px;
		margin-bottom: 60px;
	}
	.setSampleExample__item {
		flex: none;
		width: 360px;
	}
	.setSampleExample__figure {
		padding: 0 40px 20px 0;
	}
}

.costomerVoice {
	max-width: 100%;
	margin-top: 0 !important;
	background-color: var(--olive-light);
}
.costomerVoiceInner {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}
.costomerVoiceTtl {
	text-align: center;
	color: #496847;
}
.costomerVoiceList {
	margin: 0 auto;
	padding-left: 0;
	list-style: none;
}
.costomerVoiceList__item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20px;
	background-color: #496847;
}
.costomerVoiceList__item::after {
	position: absolute;
	left: 50%;
	bottom: -22px;
	transform: translateX(-50%);
	display: block;
	width: 0;
	height: 0;
	content: '';
	border-style: solid;
	border-width: 32px 11px 0 11px;
	border-color: #496847 transparent transparent transparent;
}
.costomerVoiceList__ttl {
	text-align: center;
	color: #fff;
}
.costomerVoiceList__text {
	font-size: 12px;
	text-align: center;
	color: #fff;
}
.costomerVoiceList__marker {
  background: linear-gradient(transparent 70%, #9EA100 0%);
  padding: 0 2px;
}
.costomerVoiceList__bold {
	font-weight: bold;
}
.costomerVoiceList__figure {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.costomerVoiceList__img {
	width: 60px;
	margin-bottom: 5px;
}
.costomerVoiceList__caption {
	font-size: 12px;
	text-align: center;
	color: #fff;
}

@media screen and (max-width: 768px) {
	.costomerVoice {
		padding: 40px 0 60px;
	}
	.costomerVoiceInner {
		padding: 0 25px;
	}
	.costomerVoiceTtl {
		margin: 0 0 26px;
		font-size: 26px;
	}
	.costomerVoiceList__item:not(:first-child) {
		margin-top: 60px;
	}
}
@media screen and (min-width: 769px) {
	.costomerVoice {
		padding: 60px 0 62px;
	}
	.costomerVoiceTtl {
		margin: 0 0 40px;
		font-size: 30px;
	}
	.costomerVoiceList {
		display: flex;
		justify-content: space-between;
	}
	.costomerVoiceList__item {
		width: 340px;
	}
}