@charset "UTF-8";
/* CSS Document */


/*==============================
コンテンツ設定
==============================*/

main{
	margin: 0 auto;
	width: 1100px;
}

/*------------------------------
メインフォト設定
------------------------------*/

.mainPhoto{
	margin: 0 auto;
	width: 100%;
}

/*------------------------------
イントロ設定
------------------------------*/

#intro .inner{
	margin: 12px auto 0;
	width: 870px;
}

#intro .inner .txt{
	margin: 30px auto 0;
	font-size: 1.8rem;
	line-height: 34px;
	font-weight: bold;
	text-align: justify;
	font-feature-settings: "palt";
}

/*------------------------------
胡蝶蘭ができあがるまで設定
------------------------------*/

#about{
	margin: 46px auto 0;
}

#about .inner{
	width: 870px;
}

#about .aboutBox{
	padding: 38px 45px;
	width: 100%;
	background: #f8f4e6;
	border-radius: 20px;
}

#about .box{
	margin: 36px 0 0 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#about .box .leftBox{
	width: 300px;
}

#about .box .rightBox{
	width: 455px;
}

#about .box .rightBox .txt{
	margin: -6px 0 0 0;
	font-size: 1.8rem;
	line-height: 32px;
	font-weight: bold;
	text-align: justify;
}

#about .box .rightBox .photo{
	margin: 18px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#about .box .rightBox .photo li{
	width: 50%;
}

#about .flow{
	margin: 50px 0 0 0;
	width: 100%;
}

.flowList{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.flowList02{
	margin: -20px 0 0 0;
	flex-direction: row-reverse;
	align-items: flex-end;
}

.flowList li{
	width: 256px;
	font-size: 1.4rem;
	line-height: 22px;
	text-align: center;
	font-weight: bold;
	position: relative;
}

.flowList02 li:nth-of-type(3){
	padding: 0 0 26px 0;
}

.flowList li::after{
	content: "";
	display: block;
	width: 20px;
	height: 24px;
	background: url(../img/img_arrow_pink_yoko.svg) no-repeat center center / cover;
	position: absolute;
	top: 90px;
	right: -40px;
}

.flowList01 li:nth-of-type(3)::after{
	transform: rotate(90deg);
	top: auto;
	right: auto;
	left: calc(50% - 20px / 2);
	bottom: -36px;
}

.flowList02 li::after{
	transform: rotate(180deg);
	right: auto;
	left: -40px;
}

.flowList02 li:last-of-type::after{
	display: none;
}

.flowList li img{
	margin: 0 0 6px 0;
}

/*------------------------------
育成環境・施設について設定
------------------------------*/

#environment{
	margin: 76px auto 0;
}

#environment .inner{
	width: 870px;
}

#environment h2{
	position: relative;
}

#environment h2::after{
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	background: #d83473;
	position: absolute;
	bottom: -22px;
}

#environment .photo{
	margin: 60px 0 0 0;
	width: 100%;
}

#environment .txt{
	margin: 12px 0 0 0;
	font-size: 1.8rem;
	line-height: 34px;
	font-weight: bold;
	text-align: justify;
}

/*------------------------------
スペック設定
------------------------------*/

#spec{
	margin: 78px 0 0 0;
	padding: 82px 0;
	width: 100%;
	background: #fbeaf1;
	position: relative;
}

#spec::after{
	content: "";
	display: block;
	width: 120px;
	height: 120px;
	background: #fbeaf1;
	transform: rotate(45deg);
	position: absolute;
	left: calc(50% - 84px / 2);
	bottom: -60px;
}

#spec .inner{
	width: 100%;
}

/*------------------------------
ラインアップ設定
------------------------------*/

#lineup{
	padding: 12px 42px 50px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#lineup li{
	width: 334px;
}

#lineup li dl{
	margin: 0 auto;
	padding: 24px 0;
	width: 284px;
	background: #FFF;
	text-align: center;
	border-radius: 10px;
}

#lineup li:nth-of-type(3) dl{
	padding: 12px 0 12px;
	background: #e60012;
}

#lineup li dl dt{
	color: #000;
	font-size: 2.2rem;
	font-weight: bold;
}

#lineup li:nth-of-type(3) dl dt{
	color: #fff;
}

#lineup li dl dd{
	margin: 10px 0 0 0;
	color: #e60012;
	font-size: 3.4rem;
	font-weight: bold;
}

#lineup li:nth-of-type(3) dl dd{
	margin: 6px 0 0 0;
	color: #ffff00;
	position: relative;
}

#lineup li:nth-of-type(3) dl dd::after{
	content: "※受注生産、数量限定商品";
	display: block;
	margin: 6px 0 0 0;
	color: #fff;
	font-size: 2rem;
	font-weight: normal;
	text-align: center;
}

#lineup li dl dd span{
	font-size: 2rem;
}

/*------------------------------
ラッピング設定
------------------------------*/

#rapping{
	margin: 0 auto;
	padding: 60px;
	width: 930px;
	border: 8px solid #d83473;
	border-radius: 12px;
}

#rapping h3{
	margin: 100px 0 0 0;
	color: #d83473;
	font-size: 3.2rem;
	font-weight: bold;
	text-align: center;
	position: relative;
}

#rapping h3::before{
	content: "";
	display: block;
	width: 108px;
	height: 84px;
	background: url(../img/top/ico_ribbon.gif) no-repeat center center / cover;
	position: absolute;
	top: -105px;
	left: calc(50% - 108px / 2);
}

#rapping .desc{
	margin: 20px 0 0 0;
	color: #000;
	font-size: 2rem;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
}

.ribbonList{
	margin: 18px auto 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.ribbonList li{
	padding: 0 0 24px 0;
	width: 260px;
}

/*------------------------------
木札設定
------------------------------*/

#woodenTag{
	margin: 48px auto 0;
	padding: 48px;
	width: 930px;
	background: #fff;
	border-radius: 10px;
}

.woodenTagBox{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.woodenTagBox .leftBox{
	width: 350px;
}

.woodenTagBox .rightBox{
	padding: 45px 0 0 0;
	width: 438px;
}

.woodenTagBox .rightBox h3{
	color: #d83473;
	font-size: 3.4rem;
	line-height: 48px;
	font-weight: bold;
}

.woodenTagBox .rightBox .desc{
	margin: 30px 0 0 0;
	color: #000;
	font-size: 2.2rem;
	line-height: 34px;
	font-weight: bold;
}

#woodenTag .btn{
	margin: 30px auto 0;
}

/*------------------------------
ご注文から発送までの流れ設定
------------------------------*/

#order .inner{
	padding: 148px 0 118px 0;
	width: 870px;
}

#order h2{
	position: relative;
}

#order h2::after{
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	background: #d83473;
	position: absolute;
	bottom: -24px;
}

#order .inner > .desc{
	margin: 52px 0 0 0;
	color: #000;
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
}

#order .inner > .desc span{
	color: #d83473;
}

.orderFlow{
	margin: 44px 0 0 0;
}

.orderFlow .rute{
	padding: 52px 54px;
	background: #fbeaf1;
	position: relative;
}

.orderFlow .desc{
	color: #000;
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
	position: relative;
}

.rute .desc::after{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: #000;
	position: absolute;
	bottom: -22px;
}

.orderFlowList{
	margin: 48px 0 0 0;
	padding: 0 72px;
}

.orderFlowList li{
	margin: 0 0 40px 0;
	color: #000;
	font-size: 2.4rem;
	line-height: 32px;
	font-weight: bold;
	font-feature-settings: "palt";
	position: relative;
}

.orderFlowList li:last-of-type{
	margin: 0;
}

.orderFlowList li span{
	display: block;
	margin: 6px 0 0 0;
	font-weight: normal;
	text-indent: 2.4rem;
}

.orderFlowList li::after{
	content: "↓";
	color: #000;
	font-size: 2.4rem;
	line-height: 32px;
	font-weight: bold;
	position: absolute;
	bottom: -34px;
	left: 0;
}

.orderFlowList li em{
	color: #d83473;
	font-style: normal;
}

.orderFlowList li:last-of-type::after{
	display: none;
}

.orderFlow .flow{
	margin: 92px 0 0 0;
	padding: 22px 0;
	color: #000;
	font-size: 2.4rem;
	line-height: 34px;
	font-weight: bold;
	text-align: center;
	background: #fbeaf1;
	position: relative;
}

.orderFlow .rute::after,
.orderFlow .flow::after{
	content: "";
	display: block;
	width: 24px;
	height: 20px;
	background: url(../img/img_arrow_pink_tate.svg) no-repeat center center / cover;
	position: absolute;
	bottom: -60px;
	left: calc(50% - 24px / 2);
}

.orderFlow .arrived{
	color: #fff;
	font-size: 3rem;
	background: #d83473;
}

.orderFlow .arrived::after{
	display: none;
}

.faq{
	margin: 88px auto 0;
	width: 350px;
	height: 125px;
}

.faq a{
	display: block;
	width: 100%;
	height: 100%;
	color: #000;
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 125px;
	text-align: center;
	background: #e5e5e5;
	border-radius: 5px;
}

.faq a:hover{
	opacity: 0.7;
}

/*------------------------------
ご注文ボタン設定
------------------------------*/

.orderBtn{
	margin: 100px auto 0;
	width: 520px;
	height: 140px;
}

.orderBtn a{
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 2.8rem;
	font-weight: bold;
	text-align: center;
	line-height: 140px;
	background: #d83473;
	outline: 1px solid #fff;
	outline-offset: -10px;
	filter: drop-shadow(8px 8px 0 #d6d6d6);
	transition: 0.1s ease-in-out;
	position: relative;
}

.orderBtn a::before,
.orderBtn a::after{
	content: "";
	display: inline-block;
}

.orderBtn a::before{
	width: 38px;
	height: 36px;
	background: url(../img/ico_cart.svg) no-repeat center center / cover;
	position: relative;
	top: 5px;
	left: -10px;
}

.orderBtn a::after{
	width: 20px;
	height: 24px;
	background: url(../img/img_arrow_white_yoko.svg) no-repeat center center / cover;
	position: absolute;
	top: 58px;
	right: 38px;
}

.orderBtn a:hover{
	transform: translate(8px,8px);
	filter: drop-shadow(0 0 0 #d6d6d6);
	transition: 0.2s ease-in-out;
}