@charset "utf-8";

/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* 共通 ------------------------*/
.fruit-campaign {
	background: linear-gradient(
		to right,
		rgba(217, 59, 51, 0.1),
		rgba(252, 131, 34, 0.1),
		rgba(0, 155, 98, 0.1)
	);
	font-size: 24px !important;
	letter-spacing: 1px;
}
.fruit-campaign .margin-30 {
	margin-top: 30px !important;
}
.fruit-campaign .margin-100 {
	margin-top: 100px !important;
}
.fruit-campaign .content {
	margin-top: 60px !important;
}
.fruit-campaign p {
	line-height: 1.5;
}
.fruit-campaign .center {
	text-align: center !important;
}
.fruit-campaign .font-medium {
	font-size: 1.2em;
	font-weight: bold;
}
.fruit-campaign .font-large {
	font-size: 1.6em;
	font-weight: bold;
}
.fruit-campaign .font-big {
	font-size: 2.2em;
	font-weight: bold;
}
.fruit-campaign .bold {
	font-weight: bold;
}
.fruit-campaign .font-note {
	color: #999999;
	font-size: 0.8em;
	margin: 0 auto;
    text-align: left;
    max-width: 90%;
	margin-top: 10px;
}
.fruit-campaign .title-01 {
	font-weight: bold;
}
.fruit-campaign .bubble {
	position: relative;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #4d4d4d;
	color: #4d4d4d;
	text-align: center;
	display: inline-block;
}
.fruit-campaign .bubble:before {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) skew(-25deg);
	height: 20px;
	width: 10px;
	border-right: 1px solid #4d4d4d;
	background-color: #fcf2eb;
	content: "";
}
.fruit-campaign .title {
	font-weight: bold;
	color: #fc8322;
	display: inline-block;
	border-top: 2px solid #fc8322;
	border-bottom: 2px solid #fc8322;
	padding-top: 20px;
	padding-bottom: 20px;
}

.fruit-campaign .greeting, .fruit-campaign .target-product, .fruit-campaign .winning-product, .fruit-campaign .apply {
	max-width: 90%;
	margin: 0 auto;
}

/* 応募期間 ------------------------*/
.fruit-campaign .application-period {
	text-align: center;
	margin-top: 20px;
}
.fruit-campaign .application-period .text {
	color: #009b62;
	opacity: 0.6;
}
.fruit-campaign .application-period .period {
    position: relative;
    display: inline-block;
    padding: 0px 30px;
    color: #fff;
	margin-top: 20px;
}
.fruit-campaign .application-period .period::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border-radius: 6px;
    background-color: #009b62;
    transform: skewX(-20deg);
	box-shadow: 3px 3px 0px 0 rgb(0, 155, 98, 0.3);
}
.fruit-campaign .application-period .period .circle {
	background-color: #FFF;
	border-radius: 9999px;
	color: #009b62;
	font-size: 0.8em;
    padding: 4px;
}

/* 農家さんとの写真 ------------------------*/
.fruit-campaign .farmer-img1 {
	text-align: center;
}
/* 文章 ------------------------*/
.fruit-campaign .greeting {
	margin: 0 auto;
}

/* アンカーリンク ------------------------*/
.fruit-campaign .menus {
	margin: 0 auto;
}
.fruit-campaign .menus .menu-container .menu {
	display: flex;
	list-style: none;
    max-width: 80%;
    margin: 0 auto;
}
.fruit-campaign .menus .menu-container .menu .menu-item {
	width: calc(100% / 3);
}
.fruit-campaign .menus .menu-container .menu .line {
	display: block;
    width: 1px;
    height: auto;
    background-color: #4d4d4d;
    margin: 10px;
}
.fruit-campaign .menus .menu-container .menu .thick {
	width: 2px !important;
}
.fruit-campaign .menus .menu-container .menu .menu-item_last{
	margin-right: 0 !important;
}
.fruit-campaign .menus .menu-container .menu .menu-item a {
	display: table;
	position: relative;
	padding: 0.5em 0 1em;
	text-decoration: none;
	box-sizing: border-box;
	transition: 0.5s;
	text-align: center;
	position: relative;
	height: 100%;
	width: 100%
}
.fruit-campaign .menus .menu-container .menu .menu-item a::after {
	position: absolute;
	top: 80%;
	right: 50%;
	width: 0.5em;
	height: 0.5em;
	transform: translateY(-50%) rotate(135deg);
	border-right: 1px solid #4d4d4d;
	border-top: 1px solid #4d4d4d;
	content: "";
}

/* 対象商品 ------------------------*/
.fruit-campaign .target-product {
}
.fruit-campaign .target-product .content .explanation {
}
.fruit-campaign .target-product .content .product {
	background: #FFF;
    width: 80%;
    margin: 0 auto;
    border-radius: 20px;
    border: 2px solid #fc8322;
    padding: 40px 0;
	margin-top: 60px;
}
.fruit-campaign .target-product .content .product .title {
	font-weight: bold;
    color: #FFF;
    background: #fc8322;
    display: inline-block;
    border-radius: 9999px;
    padding: 2px 40px;
}
.fruit-campaign .target-product .content .product .name {
	font-weight: bold;
	margin-top: 20px;
}
.fruit-campaign .target-product .content .product img {
	max-width: 70%;
    margin: 40px 0;
}
.fruit-campaign .target-product .content .product .font-note {
	text-align: center;
}

/* 当選賞品 ------------------------*/
.fruit-campaign .winning-product {
}
.fruit-campaign .winning-product .content .fruit-period {
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    place-content: center;
    place-items: center;
    margin: 40px 0;
}
.fruit-campaign .winning-product .content .card {
	width: 100%;
    max-width: 400px;
	height: auto;
	background: #FFF;
	border-radius: 20px;
	position: relative;
	padding: 24px;
	box-sizing: border-box;
}
.fruit-campaign .winning-product .content .period {
	background: #f58220;
	color: #fff;
	border-radius: 999px;
	font-weight: bold;
	font-size: 14px;
	display: flex;
	justify-content: center;
    align-items: center;
	gap: 10px;
}
.fruit-campaign .winning-product .content .period .frame {
	border: 2px solid #FFF;
    border-radius: 9999pc;
    margin-right: 10px;
    font-size: 1em;
	padding: 0 10px;
}
.fruit-campaign .winning-product .content .period span {
	font-size: 22px;
}
.fruit-campaign .winning-product .content .fruit-name {
	color: #f58220;
	font-weight: bold;
	margin-top: 10px;
}
.fruit-campaign .winning-product .content .fruit-img {
	width: 80%;
}
.fruit-campaign .winning-product .content .number {
	position: absolute;
    width: 70px;
    height: 70px;
    background: #ff8a00;
    border-radius: 50%;
    bottom: -5px;
    right: -5px;
    color: #FFF;
    z-index: 1;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
	font-size: 1.2em;
}
.fruit-campaign .winning-product .content .card::after {
	content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    background: #FFF;
    border-radius: 50%;
    bottom: -10px;
    right: -10px;
}

/* 農家さんとの写真 ------------------------*/
.fruit-campaign .farmer-img2 {
	text-align: center;
}

/* 応募方法 ------------------------*/
.fruit-campaign .apply {
}
.fruit-campaign .apply .content .step {
	display: flex;
	justify-content: center;
    align-items: center;
	margin: 40px 0;
	font-size: 0.8em;
}
.fruit-campaign .apply .content .step .step1, .fruit-campaign .apply .content .step .step2, .fruit-campaign .apply .content .step .step3 {
	width: calc(100% / 3);
    background: #FFF;
    border-radius: 20px;
    border: 1px solid #fc8322;
    padding: 2px;
}
.fruit-campaign .apply .content .step img {
    width: auto;
    height: 120px;
    padding: 20px 0;
}
.fruit-campaign .apply .content .step .number {
	background: #fc8322;
    border-radius: 20px 20px 0 0;
    color: #FFF;
    font-weight: bold;
}
.fruit-campaign .apply .content .step .detail {
	padding: 20px 0;
}
.fruit-campaign .apply .content .step .detail .underline {
	border-bottom: 2px solid #999999;
    padding-bottom: 2px;
}
.fruit-campaign .apply .content .step .triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #fc8322;
	border-right: 0;
	margin: 0 10px;
}

/* 発送目安時期 ------------------------*/
.fruit-campaign .delivery {
	text-align: center;
	background: rgba(255, 255, 255, 0.5);
	padding: 60px 0;
}
.fruit-campaign .delivery .font-medium {
	background: linear-gradient(to bottom, transparent 50%, rgba(252, 131, 34, 0.2) 50%);
    padding: 0 20px;
	display: inline-block;
}
.fruit-campaign .delivery .annual-schedule {
	background: #FFF;
	border-radius: 20px;
	border: #999998 solid 0.5px;
	padding: 40px;
	max-width: 80%;
	margin: 40px auto 0;
}

/* LINEで応募ボタン ------------------------*/
.fruit-campaign .apply-btn {
}
.fruit-campaign .apply-btn a {
	color: #fff;
	background: linear-gradient(
		90deg,
		rgba(252, 131, 34, 0.6) 0%,
		rgba(252, 131, 34, 1) 50%,
		rgba(217, 59, 51, 0.9) 100%
	);
	margin: 0 auto;
	max-width: 80%;
	text-align: center;
	font-weight: bold;
	padding: 10px 0;
    border-radius: 9999px;
	box-shadow: 2px 2px 0px 0 #b3b3b3;
	position: relative;
	display: block;
}
.fruit-campaign .apply-btn a::after {
	position: absolute;
	top: 50%;
	right: 1em;
	width: 0.5em;
	height: 0.5em;
	transform: translateY(-50%) rotate(405deg);
	border-right: 3px solid #FFF;
	border-top: 3px solid #FFF;
	content: "";
}
.fruit-campaign .apply-btn a:hover {
	transform: translateY(-5px);
}

/* 注意事項 ------------------------*/
.fruit-campaign .note {
	background-color: rgb(252 131 34 / 0.6);
	padding: 40px 20px;
	border-top: 10px solid #fc8322;
	color: #4d4d4d;
	font-size: 0.8em;
}
.fruit-campaign .note .content {
	font-size: 0.8em;
	margin-top: 10px !important;
}

/* お問い合わせ先 ------------------------*/
.fruit-campaign .address {
	padding: 0 20px;
	font-size: 0.8em;
}
.fruit-campaign .address .content {
	font-size: 0.8em;
	margin-top: 10px !important;
}

/* スマホ 画面幅767px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
	/* 共通 ------------------------*/
	.fruit-campaign { font-size: 20px !important; }
	.fruit-campaign .font-large { font-size: 1.4em; }
	.fruit-campaign .font-big { font-size: 1.6em; }
	.fruit-campaign .bubble { width: 90%; }
	/* 応募期間 ------------------------*/
	.fruit-campaign .application-period .period { box-sizing: border-box; width: 90%; font-size: 0.8em; max-width: 400px; }
	/* アンカーリンク ------------------------*/
	.fruit-campaign .menus .menu-container .menu { max-width: 100%; }
	.fruit-campaign .menus .menu-container .menu .menu-item a { padding: 0.5em 0 1em; }
	/* 対象商品 ------------------------*/
	.fruit-campaign .target-product .content .product { width: 100%; }
	/* 当選賞品 ------------------------*/
	.fruit-campaign .winning-product .content .fruit-period { display: block; margin: 40px auto 20px; }
	.fruit-campaign .winning-product .content .card { width: 90%; margin: 0 auto 30px; }
	/* 応募方法 ------------------------*/
	.fruit-campaign .apply .content .step { display: block; width: 90%; margin: 40px auto; max-width: 400px; }
	.fruit-campaign .apply .content .step .step1, .fruit-campaign .apply .content .step .step2, .fruit-campaign .apply .content .step .step3 { width: 100%; }
	.fruit-campaign .apply .content .step .font-note { text-align: center; }
	.fruit-campaign .apply .content .step .triangle {
		width: 0;
		height: 0;
		border-style: solid;
		border-right: 20px solid transparent;
		border-left: 20px solid transparent;
		border-top: 20px solid #fc8322;
		border-bottom: 0;
		margin: 10px auto;
	}
	/* 発送目安 ------------------------*/
	.fruit-campaign .delivery { padding: 60px 20px; }
	.fruit-campaign .delivery .annual-schedule { padding: 20px 10px; max-width: 100%; }
	.fruit-campaign .delivery .annual-schedule .font-note { font-size: 0.6em; max-width: 100%; text-align: left !important; }
}