@charset "UTF-8";

/* -----------------------------------------------
FileName: botanique.css
----------------------------------------------- */
/* WEBフォント */
@import url("https://use.typekit.net/ekz6amd.css");

/*
font-family: "new-atten", sans-serif;
font-weight: 300;
font-style: normal;
*/
img {
    max-width: 100%;
    height: auto;
    border: none;
    vertical-align:bottom;
	image-rendering: -webkit-optimize-contrast;
}

#botanique {
    font-size: 20px;
    color: #00517F;
}

#botanique .mhg_container {
    padding: 120px 0 120px 0;
    position: relative;
}


#botanique .mhg_container.bg1 {
    background-image: linear-gradient(#d3e5f1, #f2f8ff);
}



#botanique .mhg_container.bg2 {
    background-image:url("../../../img/usr/lp/botanique/bg2.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}




#botanique .contents {
	width: 1200px;
	margin: 0 auto;
    box-sizing: border-box;
}


#botanique dl.title {
	margin: 0 0 3em 0;
}

#botanique dl.title.x2 {
	text-align: center;
}

#botanique dl.title dt {
	line-height: 1em;
	font-family: "new-atten", sans-serif;
	font-weight: 300;
	font-size: 2em;
	letter-spacing: .1em;
	margin: 0 0 .35em 0;
}

#botanique dl.title dd {
	line-height: 1em;
}

#botanique dl.title dd h2 {
	line-height: 1em;
	background: none;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	font-weight: 400;
	font-size: 0.9em;
	letter-spacing: .05em;
}


#botanique #keyImg figure {
    position: relative;
}

#botanique #keyImg figure img {
    width: 100%;
    height: auto;
}

#botanique #aboutArea {
	display: flex;
	justify-content: space-between;
	margin: 0 0 80px 0;
}

#botanique #aboutArea article {
	width: 54.167%;
	padding: 1em 0 0 0;
}

#botanique #aboutArea article h3 {
	display: flex;
	flex-direction: column;
	gap:10px 0;
	font-size: 2.1em;
	font-weight: 700;
	margin: 0 0 1.2em 0;
	padding: 0 0 0 0;
	background: none;
	line-height: 1em;
}

#botanique #aboutArea article h3 span {
	display: block;
	line-height: 1em;
	background: #fff;
	width: fit-content;
	padding: .3em .5em .4em .5em;
	white-space: nowrap;
	
}

#botanique #aboutArea article p {
	letter-spacing: .05em;
	line-height: 2.2em;
}

#botanique #aboutArea figure {
	width: 41.667%;
	position: relative;
}

#botanique #aboutArea figure img {
	width: 100%;
	height: auto;
	border-radius: 9999px;
}

#botanique #aboutArea figure figcaption {
	display: flex;
	flex-direction: column;
	gap:6px 0;
	line-height: 1em;
	margin-top: -3em ;
}

#botanique #aboutArea figure figcaption span {
	display: block;
	line-height: 1em;
	width: fit-content;
	color: #fff;
	font-size: 1.1em;
	font-weight: 400;
	background: #00517F;
	padding: .4em .5em .5em .5em;
	white-space: nowrap;
}

#botanique .itemArea {
	margin: 0 0 110px 0;
}

#botanique .itemArea article {
	display: flex;
	margin: 0 0 1em 0;
}

#botanique .itemArea article figure {
	width: 39.167%;
}

#botanique .itemArea article aside {
	width: calc(100% - 39.167%);
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#botanique .itemArea article aside header {
	padding: 0% 8%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

#botanique .itemArea article aside header h3 {
	padding: 0 0 0 0;
	margin: 0 0 .7em 0;
	background:none;
	font-size: 1.7em;
	font-weight: 700;
	line-height: 1em;
}
#botanique .itemArea article aside header p {
	line-height: 1em;
	font-size: 1.2em;
	font-weight: 500;
	margin: 0 0 1.8em 0;
}

#botanique .itemArea article aside header dl {
	display: flex;
	flex-direction: column;
	gap:1em 0;
	line-height: 1em;
}

#botanique .itemArea article aside header dl dt {
	font-size: 0.8em;
	font-weight: 700;
}

#botanique .itemArea article aside header dl dt strong {
	font-weight: 500;
	font-size: 2.25em;
	font-family: "new-atten", sans-serif;
}

#botanique .itemArea article aside header dl dt small {
	font-size: 0 0 0 .3em;
}

#botanique .itemArea article aside header dl dd {
	font-size: 0.85em;
}

#botanique .itemArea .notice {
	display: flex;
	flex-direction: column;
	gap:.2em 0;
}

#botanique .itemArea .notice li {
	font-size: 0.75em;
	padding-left:1em;
	text-indent:-1em;
}

#botanique .moreBtn {
	width: 60.833%;
	text-align: center;
	margin: auto;
}

#botanique .moreBtn a {
	display: block;
	width: 100%;
	line-height: 1em;
	color: #fff;
	background: #00517F;
	border-radius: 9999px;
	font-size: 1.2em;
	font-weight: 500;
	padding: 1.4em 0;
	text-decoration: none;
}

#botanique .moreBtn a:hover {
	opacity: .8;
}

#botanique .moreBtn a i {
	font-size: 1.25em;
	margin: 0 .5em 0 0 ;
}

#botanique .itemArea .moreBtn {
	width: 100%;
	margin: 0 0 0 0;
}

#botanique .itemArea .moreBtn a {
	border-radius: 0;
}

#botanique #recommendArea {
	display: flex;
	flex-wrap: wrap;
	gap:30px 30px;
}

#botanique #recommendArea article {
	width: calc(33.33333% - 20px);
	box-sizing: border-box;
	padding: 2.5% 0%;
	position: relative;
	background: #fff;
	border-radius: 9999px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

#botanique #recommendArea article::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 30%;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #ffffff transparent transparent;
  translate: calc(-50% - 0.4px) 100%;
}

#botanique #recommendArea article p {
	font-size: 1.2em;
	line-height: 1.6em;
}

#botanique #featureArea {
	display: flex;
	justify-content: space-between;
}

#botanique #featureArea article {
	width: 47.917%;
}

#botanique #featureArea article figure {
	margin: 0 0 2em 0;
}

#botanique #featureArea article dl {
	line-height: 1em;
}

#botanique #featureArea article dl dt {
	font-weight: 700;
	font-size: 1.5em;
	line-height: 1em;
	margin: 0 0 1em 0;
}

#botanique #featureArea article dl dd {
	line-height: 2em;
}

#botanique #featureArea article .notice {
	font-size: 0.75em;
	margin: 1.8em 0 0 0;
}

#botanique #campaignArea {
	display: flex;
	justify-content: space-between;
	margin: 0 0 110px 0;
}

#botanique #campaignArea header {
	width: 55.25%;
}

#botanique #campaignArea header h3 {
	display: flex;
	flex-direction: column;
	gap:10px 0;
	margin: 0 0 2em 0;
	font-size: 1em;
	padding: 0 0 0 0;
}

#botanique #campaignArea header h3 span {
	display: block;
	width: fit-content;
	line-height: 1em;
	background: #fff;
	font-size: 2.1em;
	font-weight: 700;
	white-space: nowrap;
	padding: .3em .5em .4em .5em;
}

#botanique #campaignArea header p {
	line-height: 2.2em;
}

#botanique #campaignArea article {
	width: 41.667%;
	position: relative;
}

#botanique #campaignArea article figure {
	position: relative;
}

#botanique #campaignArea article figure img {
	border-radius: 120px 20px 20px 20px;
}

#botanique #campaignArea article figure figcaption {
	width: 130px;
	height: 130px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-radius: 9999px;
	color: #fff;
	background: #00517F;
	line-height: 1.4em;
	font-size: 1.3em;
	font-weight: 700;
	position: absolute;
	right: -20px;
	bottom: -20px;
}

#botanique #campaignArea article #tokuten {
	width: 245px;
	position: absolute;
	left: -20px;
	bottom: -80px;
}

#botanique #commentArea {
	display: flex;
	flex-direction: column;
	gap:60px 0;
	margin: 0 0 110px 0;
}

#botanique #commentArea article {
	display: flex;
	justify-content: space-between;
}

#botanique #commentArea article figure {
	width: 15%;
}

#botanique #commentArea article figure img {
	border-radius: 9999px;
}

#botanique #commentArea article aside {
	width: 80.833%;
	display: flex;
	flex-direction: column;
	gap:1em 0;
}

#botanique #commentArea article aside p {
	position: relative;
	background: #fff;
	border-radius: 20px;
	box-sizing: border-box;
	padding: 3% 3%;
	font-size: 0.9em;
	line-height: 1.8em;
}

#botanique #commentArea article aside p::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 12.5px 27px 12.5px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: -100% -50%;
}

#botanique #commentArea article aside dt {
	font-size: 0.75em;
	margin: 0 0 .8em 0;
}

#botanique #commentArea article aside dd {
	line-height: 1em;
	font-weight: 700;
}




@media screen and (max-width: 640px) {

    #botanique {
        font-size: 14px;
    }
    
    #botanique .mhg_container {
        padding: 50px 0 50px 0;
    }


    #botanique .contents {
        width: 92%;
        margin: 0 auto;
    }


	#botanique dl.title {
		margin: 0 0 2em 0;
		font-size: 3.4vw;
	}


	#botanique #aboutArea {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin: 0 0 45px 0;
		gap:2em 0;
	}

	#botanique #aboutArea article {
		width: 100%;
		padding: 0 0 0 0;
	}

	#botanique #aboutArea article h3 {
		font-size: 5.8vw;
		margin: 0 0 1em 0;
	}



	#botanique #aboutArea figure {
		width: 100%;
		position: relative;
		text-align: center;
	}

	#botanique #aboutArea figure img {
		width: 80%;
		margin: auto;
	}

	#botanique #aboutArea figure figcaption span {
		font-size: 3.8vw;
	}

	#botanique .itemArea {
		margin: 0 0 50px 0;
	}

	#botanique .itemArea article {
		display: flex;
		flex-direction: column;
		margin: 0 0 1em 0;
	}

	#botanique .itemArea article figure {
		width: 100%;
	}

	#botanique .itemArea article aside {
		width: calc(100% - 0%);
		justify-content: flex-start;
		font-size: 3.6vw;
	}
	#botanique .itemArea article aside header {
		padding: 8% 8%;
	}

	#botanique .itemArea article aside header p {
		font-size: 1em;
	}

	#botanique .itemArea .notice {
		font-size: 3.2vw;
	}

	#botanique .moreBtn {
		width: 100%;
		font-size: 3.8vw;
	}

	#botanique .moreBtn a {
		padding: 1.25em 0;
	}


	#botanique #recommendArea {
		display: flex;
		justify-content: center;
		gap:30px 10px;
	}

	#botanique #recommendArea article {
		width: calc(50% - 5px);
		padding: 3% 3%;
		font-size: 2.6vw;
	}

	#botanique #featureArea {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap:30px 0;
	}

	#botanique #featureArea article {
		width: 100%;
		font-size: 3.5vw;
	}

	#botanique #featureArea article figure {
		margin: 0 0 1.3em 0;
	}


	#botanique #featureArea article dl dt {
		margin: 0 0 .6em 0;
		font-size: 1.3em;
	}

	#botanique #featureArea article .notice {
		margin: 1em 0 0 0;
	}

	#botanique #campaignArea {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin: 0 0 80px 0;
		gap:2em 0;
	}

	#botanique #campaignArea header {
		width: 100%;
	}

	#botanique #campaignArea header h3 {
		margin: 0 0 2em 0;
		font-size:2.75vw;
		padding: 0 0 0 0;
	}


	#botanique #campaignArea article {
		width: 100%;
		position: relative;
	}

	#botanique #campaignArea article figure {
		position: relative;
	}

	#botanique #campaignArea article figure img {
		border-radius: 90px 20px 20px 20px;
	}

	#botanique #campaignArea article figure figcaption {
		width: 26vw;
		height: 26vw;
		font-size: 4.5vw;
		right: -2vw;
		bottom: -20px;
	}

	#botanique #campaignArea article #tokuten {
		width: 45%;
		left: -3vw;
		bottom: -50px;
	}


	#botanique #commentArea {
		display: flex;
		flex-direction: column;
		gap:2em 0;
		margin: 0 0 50px 0;
	}

	#botanique #commentArea article {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
		gap:1.8em 0;
	}

	#botanique #commentArea article figure {
		width: 30%;
	}

	#botanique #commentArea article figure img {
		border-radius: 9999px;
	}

	#botanique #commentArea article aside {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap:1em 0;
	}

	#botanique #commentArea article aside p {
		border-radius: 15px;
		padding: 5% 6%;
	}

	#botanique #commentArea article aside p::after {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 15%;
	  border-style: solid;
	  border-width: 0 8.5px 15px 8.5px;
	  border-color: transparent transparent #ffffff;
	  translate: -50% -100%;
	}

	#botanique #commentArea article aside dl {
		position: absolute;
		top: 1.5em;
		left: calc(30% + 15px);
		font-size: 3.2vw;
	}

	#botanique #commentArea article aside dd {
		font-size: 1.25em;
	}









}


@media screen and (max-width: 320px) {

    #botanique {
        font-size: 12px;
    }



	
}