@charset "utf-8";
/* CSS Document */
@media only screen and (max-width: 1100px) {
	img {
		max-width: 100%;
		height: auto;
	}
	body {
		font-size: 1.5rem;
		line-height: 1.8;
	}
	main {
		margin: 0 0 80px;
		padding: 10% 4% 0 4%;
	}
	main img {
		max-width: 100%;
		height: auto;
	}
	main:before {
		position: absolute;
		top: 0;
		right: 0;
		width: 45%;
		height: 45%;
		content: "";
		background-size: 80%;
	background-position: top right;
	}
	main:after {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 38%;
		height: 58%;
		content: "";
	background-position: bottom left;
	background-size: 90%;
	}
	ul.icon {
		margin: 0 3%;
	}
	ul.icon li {
		list-style: none;
		margin: 0px 1% 20px;
	}
	ul.icon li a {
		padding: 2px;
	}
	ul.icon li:nth-child(odd) {
		margin-top: 25px;
	}
	/* 香ガチャについて */
	section.outline {
		margin: 50px auto;
		flex-wrap: wrap;
	}
	section.outline div {
		width: 100%;
	}
	section.outline div.outline_photo {
		justify-content: center;
		width: 100%;
		text-align: center;
	}
	h1.h1_red {
		font-size: 2.4rem;
		margin-bottom: 30px;
	}
	.outline p {
		margin-bottom: 20px;
		line-height: 1.8;
	}
	.rotation {
		top: -30px;
		left: 70%;
		width: 20%;
	}
	.gacha1 img {
		margin-top: 20px;
		border-radius: 10px;
		width: 90%;
	}
	.gacha2 img {
		border-radius: 10px;
		margin-top: 70px;
		width: 90%;
	}
	/* フレグランスマップ */
	.map {
		margin: 50px auto;
		padding: 0 4%;
		flex-direction: column;
		align-items: flex-start;
	}
	.map h1 {
		width: 50%;
		margin-bottom: 20px;
	}
	.map p {
		width: 100%
	}
	/* 楽しみかた */
	.enjoy {
		margin: 50px auto;
	}
	.enjoy h1 {
		margin: 0 0 30px 0;
	}
	.enjoy h1 img {
		width: 50%;
	}
	ul.use {
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	ul.use li {
		width: 47%;
		margin: 0 0 40px 0;
	}
	ul.use li span {
		font-size: 2.4em;
	}
	ul.use li img {
		width: 100%;
		height: auto;
		background-color: #FFF;
		padding: 20px;
		border-radius: 100%;
		box-sizing: border-box;
	}
	h2.notes_h2 {
		padding-top: 10px;
		font-size: 1.5rem;
	}
	ul.notes {
		font-size: 1.4rem;
	}
	/* 取扱い店舗 */
	.shoplist {
		margin: 50px auto;
		padding: 0 4%;
	}
	.shop h2 {
		font-size: 1.8rem;
		margin-bottom: 10px;
	}
}
/* 768px以下
-------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
	.br {
		display: none;
	}
	.map h1 {
		top: -110px;
	}
	/* 商品紹介 */
	.item {
		border-radius: 10px;
	}
	.item a {
		padding: 20px 15px 50px 15px;
	}
	.item:after {
		border-bottom: 80px solid #053168;
		border-left: 80px solid transparent;
	}
	.item.item2:after {
		border-bottom: 80px solid #aa6221;
	}
	.item.item3:after {
		border-bottom: 80px solid #d7ba69;
	}
	.item.item4:after {
		border-bottom: 80px solid #bc0b19;
	}
	.item.item5:after {
		border-bottom: 80px solid #5a712b;
	}
	.item a dl {
		flex-direction: column;
		text-align: center;
	}
	.item dl dt {
		width: 100%;
	}
	.item dl dd {
		width: 100%;
		line-height: 1.4;
	}
	.item dl dd i {
		display: block;
		margin-left: 0;
	}
	.item dl h2 {
		font-size: 2rem;
		margin-top: 10px;
		margin-bottom: 10px;
		font-weight: 700;
	}
	.btn_online {
		position: absolute;
		bottom: 20px;
		right: 15px;
		font-size: 14px;
		line-height: 1.1;
	}
	.btn_online span {
		display: block;
		margin-left: 0px;
	}
	/* 取扱い店舗 */
	ul.shop_navi {
		justify-content: space-between;
	}
	ul.shop_navi li {
		margin: 0 0 10px;
		width: 48%;
		font-size: 1.4rem;
		line-height: 1.4;
		text-align: left;
	}
	ul.shop_navi li span {
		display: block;
		margin-left: 0;
	}
	ul.shop_navi li a {
		display: block;
		padding: 5px 25px 5px 15px;
		color: #514840;
		text-decoration: none;
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 50px;
		position: relative;
	}
	ul.shop_navi li a:hover {
		background-color: rgba(255, 255, 255, 1);
		color: #f23e3c;
	}
	ul.shop_navi li a:before {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 10px;
		margin: auto;
		content: "";
		width: 14px;
		height: 14px;
	}
	ul.shop_navi li a:after {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 14px;
		margin: auto;
		content: "";
		width: 5px;
		height: 5px;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.shop {
		flex-direction: column;
		margin-top: 50px;
	}
	.shop picture {
		width: 100%;
		margin-right: 0;
	}
	.shop picture img {
		margin-bottom: 10px;
		border-radius: 10px;
	}
	.shop div {
		width: 100%;
	}
	.shop dl {
		display: flex;
		flex-wrap: wrap;
		line-height: 1.5;
		font-size: 1.5rem;
	}
	.shop dl dt {
		width: 90px;
	}
	.shop dl dd {
		width: calc(100% - 90px);
	}
	/* footer
------------------------------------------------- */
	footer {
		padding: 30px 4% 30px;
		font-size: 1.4rem;
	}
	.copy {
		font-size: 1.3rem;
	}
	#page-top {
		position: fixed;
		bottom: 20px;
		right: 3%;
	}
	#page-top a {
		width: 40px;
		height: 40px;
		border-radius: 40px;
	}
	#page-top a:before {
		width: 12px;
		height: 12px;
	}
}