#contents {
background-image: linear-gradient(45deg, #FFF9E0 0%, #FEEDF8 100%);
}

/* CONTAINER */
#TITLE {
margin-bottom: 3.467vw;
padding: 5.867vw 0 0 0;
text-align: center;
}
#TITLE h1 {
position: relative;
margin-bottom: 0.533vw;
font-weight: 700;
font-size: 5.6vw;
letter-spacing: 0.1em;
line-height: 1.3;
color: var(--color-base);
}
#TITLE p {
margin-top: 0;
font-family: 'LoveloBlack', 'Zen Kaku Gothic New', sans-serif;
font-size: 2.667vw;
letter-spacing: 0.05em;
line-height: 1.3;
color: var(--color-base);
}
@media (min-width: 768px) {
	#TITLE {
	position: relative;
	margin: 0 auto;
	padding: 22px 0 0 0;
	width: 1040px;
	text-align: left;
	}
	#TITLE .cont {
	position: absolute;
	left: 0;
	top: 0;
	padding: 124px 0 42px 0;
	}
	#TITLE h1 {
	margin-bottom: 6px;
	font-size: 42px;
	}
	#TITLE p {
	font-size: 20px;
	}
}

#INFO {
margin: 0 5.333vw 0 5.333vw;
padding: 17.6vw 0 16vw 0;
}
#INFO .cont {
position: relative;
padding: 0 5.333vw 0 5.333vw;
}
#INFO .cont h3 {
position: absolute;
left: 0;
top: -16vw;
background: url("../img/info_bg.svg") no-repeat center center;
background-size: contain;
width: 23.467vw;
height: 20vw;
font-family: 'LoveloBlack', 'Zen Kaku Gothic New', sans-serif;
font-size: 4.267vw;
line-height: 20.8vw;
color: #fff;
text-align: center;
}
#INFO .list {
background-color: #fff;
border-radius: 8vw;
padding: 2.933vw 5.333vw 8vw 5.333vw;
}
#INFO .block {
box-sizing: border-box;
background-image : linear-gradient(to right, #c9c9c9 2px, transparent 2px);
background-size: 2.133vw 0.533vw;
background-repeat: repeat-x;
background-position: left bottom;
padding: 5.6vw 2.667vw 4.533vw 2.667vw;
}
#INFO .icon {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 2.133vw;
margin-bottom: 1.6vw;
}
#INFO .icon .new {
font-weight: 700;
font-size: 3.467vw;
line-height: 1;
color: #E3007E;
}
#INFO .icon .date {
font-weight: 700;
font-size: 3.467vw;
line-height: 1;
}
@media (min-width: 768px) {
	#INFO {
	position: relative;
	padding: 78px 0 50px 0;
	margin: 0 auto;
	width: 1040px;
	text-align: left;
	}
	#INFO .cont {
	margin: 0 -100px 0 auto;
	padding: 0 20px 0 20px;
	width: 600px;
	}
	#INFO .cont h3 {
	left: -100px;
	top: -15px;
	width: 151px;
	height: 129px;
	font-size: 28px;
	line-height: 129px;
	}
	#INFO .list {
	background-color: #fff;
	border-radius: 30px;
	padding: 26px 85px 40px 85px;
	}
	#INFO .block {
	display: flex;
	gap: 35px;
	background-image : linear-gradient(to right, #c9c9c9 2px, transparent 2px);
	background-size: 8px 2px;
	padding: 17px 0 19px 0;
	line-height: 0;
	}
	#INFO .icon {
	position: relative;
	margin: 0;
	padding-left: 60px;
	}
	#INFO .icon .new {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 16px;
	line-height: 1.5;
	}
	#INFO .icon .date {
	font-size: 16px;
	line-height: 1.5;
	}
	#INFO .title {
	font-size: 16px;
	line-height: 1.5;
	}
}

#LIST {
margin: 0 5.333vw 0 5.333vw;
padding: 0 0 13.333vw 0;
}
#LIST .list {
display: flex;
flex-wrap: wrap;
gap: 13.333vw;
padding: 0 5.333vw 8vw 5.333vw;
}
#LIST .block {
box-sizing: border-box;
width: 100%;
}
#LIST .image {
margin-bottom: 5.867vw;
}
#LIST .image img {
display: block;
border-radius: 8vw;
width: 100%;
height: auto;
}
#LIST .icon {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 2.133vw;
margin-bottom: 1.867vw;
}
#LIST .icon .new {
font-weight: 700;
font-size: 3.467vw;
line-height: 1;
color: #E3007E;
}
#LIST .icon .date {
font-weight: 700;
font-size: 3.467vw;
line-height: 1;
}
#LIST .title {
font-weight: 700;
font-size: 5.6vw;
line-height: 1.7;
color: var(--color-base);
}
#LIST .price {
margin-bottom: 3.2vw;
font-weight: 700;
font-size: 5.6vw;
line-height: 1;
color: var(--color-base);
text-align: right;
}
#LIST .price span {
font-size: 3.467vw;
}
#LIST .explan {
margin-bottom: 1.333vw;
font-weight: 500;
font-size: 3.467vw;
line-height: 1.85;
}
#LIST .more {
font-weight: 700;
font-size: 3.467vw;
text-align: right;
}
#LIST .more a {
color: var(--color-base);
}
#LIST .more a::after {
transition: color 0.5s ease;
content: "\e900";
position: relative;
margin-right: 0.533vw;
font-family: 'icf' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 2.667vw;
line-height: 1;
color: var(--color-base);
}
#LIST .more span {
display: inline-block;
border: solid 1px var(--color-base);
border-radius: 1.867vw;
margin-left: 2.667vw;
padding: 0 2.667vw;
font-size: 3.467vw;
line-height: 5.6vw;
color: var(--color-base);
}
#LIST .pagination {
padding: 5.333vw 0 0 0;
font-size: 0;
line-height: 0;
list-style: none;
text-align: center;
}
#LIST .nav-links span,
#LIST .nav-links a {
display: inline-block;
border-radius: 50%;
width: 10.133vw;
height: 10.133vw;
color: var(--color-base);
overflow: hidden;
margin: 0 0.267vw;
font-weight: 700;
font-size: 4.267vw;
line-height: 10.133vw;
text-align: center;
}
#LIST .nav-links span.current,
#LIST .nav-links a:hover {
background-color: var(--color-base);
color: #fff;
}
#LIST a.prev,
#LIST a.next {
position: relative;
text-indent: -2666.4vw;
display: inline-block;
background-color: transparent;
border: none;
border-radius: 50%;
padding: 0;
width: 10.133vw;
height: 10.133vw;
color: var(--color-base);
overflow: hidden;
}
#LIST a.prev::after {
transition: all 0.5s ease;
transform: translateY(-50%) rotate(-45deg);
content: '';
display: block;
position: absolute;
left: 3.733vw;
top: 50%;
box-sizing: border-box;
border-top: solid 2px var(--color-base);
border-left: solid 2px var(--color-base);
width: 3.2vw;
height: 3.2vw;
}
#LIST a.next::after {
transition: all 0.5s ease;
transform: translateY(-50%) rotate(45deg);
content: '';
display: block;
position: absolute;
right: 3.733vw;
top: 50%;
box-sizing: border-box;
border-top: solid 2px var(--color-base);
border-right: solid 2px var(--color-base);
width: 3.2vw;
height: 3.2vw;
}

@media (min-width: 768px) {
	#LIST {
	margin: 0 auto;
	padding: 20px 0 100px 0;
	width: 1004px;
	}
	#LIST .list {
	display: block;
	gap: 0;
	padding: 0 20px 60px 20px;
	}
	#LIST .block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 50px;
	position: relative;
	width: 100%;
	padding: 50px 0 50px;
	}
	#LIST .block::before {
	transform: translateY(50%);
    content: '';
	position: absolute;
	left: 0;
	bottom: 0;
    background: radial-gradient(circle farthest-side, #fff, #fff 30%, transparent 30%, transparent);
    background-size: 17px;
    display: inline-block;
    height: 17px;
    width: 100%;
	}
	#LIST .block:nth-of-type(even) {
	flex-direction : row-reverse;
	}
	#LIST .image {
	margin-bottom: 0;
	width: 445px;
	}
	#LIST .image img {
	border-radius: 40px;
	}
	#LIST .pack {
	flex: 1;
	}
	#LIST .icon {
	gap: 0 8px;
	margin-bottom: 15px;
	}
	#LIST .icon .new {
	font-size: 14px;
	}
	#LIST .icon .date {
	font-size: 14px;
	}
	#LIST .title {
	font-size: 24px;
	line-height: 1.63;
	}
	#LIST .price {
	margin-bottom: 25px;
	font-size: 24px;
	}
	#LIST .price span {
	font-size: 16px;
	}
	#LIST .explan {
	margin-bottom: 19px;
	font-size: 16px;
	line-height: 2;
	}
	#LIST .more {
	font-size: 14px;
	}
	#LIST .more a::after {
	margin-right: 2px;
	font-size: 12px;
	}
	#LIST .more a:hover,
	#LIST .more a:hover::after {
	color: #E3007E;
	}
	#LIST .more span {
	border-radius: 7px;
	margin-left: 10px;
	padding: 0 13px;
	font-size: 14px;
	line-height: 22px;
	}
	#LIST .pagination {
	padding: 25px 0 0 0;
	}
	#LIST .nav-links span,
	#LIST .nav-links a {
	margin: 0 4px;
	font-size: 22px;
	line-height: 48px;
	}
	#LIST .nav-links span,
	#LIST .nav-links a {
	width: 48px;
	height: 48px;
	}
	#LIST a.prev,
	#LIST a.next {
	position: relative;
	text-indent: -9999px;
	display: inline-block;
	background-color: transparent;
	border: none;
	border-radius: 50%;
	padding: 0;
	width: 48px;
	height: 48px;
	color: var(--color-base);
	overflow: hidden;
	}
	#LIST a.prev::after {
	left: 20px;
	width: 16px;
	height: 16px;
	}
	#LIST a.next::after {
	right: 20px;
	width: 16px;
	height: 16px;
	}
	#LIST a.prev:hover::after {
	border-top: solid 2px #fff;
	border-left: solid 2px #fff;
	}
	#LIST a.next:hover::after {
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	}
}

#DETAIL {
margin: 0 5.333vw 0 5.333vw;
padding: 8vw 0 13.333vw 0;
}
#DETAIL .box {
background-color: #fff;
border-radius: 8vw;
padding: 5.333vw;
}
#DETAIL .icon {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 2.667vw;
margin-bottom: 4.267vw;
}
#DETAIL .icon .new {
font-weight: 700;
font-size: 3.467vw;
line-height: 1;
color: #E3007E;
}
#DETAIL .icon .date {
font-weight: 700;
font-size: 3.467vw;
line-height: 1;
}
#DETAIL .icon .category {
line-height: 1;
}
#DETAIL .icon .category span {
display: inline-block;
background-color: var(--color-base);
border-radius: 26666.4vw;
padding: 0 2.667vw;
font-weight: 700;
font-size: 2.667vw;
line-height: 4.8vw;
text-align: center;
color: #fff;
}
#DETAIL .title {
margin-bottom: 4.8vw;
font-weight: 700;
font-size: 4.8vw;
line-height: 1.56;
color: var(--color-base);
}
#DETAIL .image {
padding: 0.533vw 0 4.8vw 0;
}
#DETAIL .image img {
display: block;
width: 100%;
height: auto;
}
#DETAIL .paragraph {
font-weight: 500;
font-size: 3.467vw;
line-height: 1.85;
}
#DETAIL .paragraph img {
max-width: 100%;
height: auto;
}
#DETAIL .paragraph h3 {
margin-bottom: 0.8vw;
font-weight: 700;
font-size: 4.8vw;
line-height: 1.34;
color: #E3007E;
}
#DETAIL .paragraph h4 {
font-weight: 700;
font-size: 3.467vw;
line-height: 1.85;
}
#DETAIL .paragraph .block {
margin-bottom: 5.6vw;
}
#DETAIL .paragraph figure,
#DETAIL .paragraph img,
#DETAIL .paragraph p {
margin-bottom: 1.5em;
}
#DETAIL .paragraph figure {
font-size: 85%;
}
#DETAIL .paragraph figure img {
margin-bottom: 1.5em;
}
#DETAIL .paragraph ul {
margin-bottom: 1.5em;
padding-left: 1em;
list-style: none;
}
#DETAIL .paragraph ul li {
padding-right: 1em;
text-indent: -1em;
}
#DETAIL .paragraph ul li::before {
content: '○';
}
#DETAIL .paragraph ol {
margin-bottom: 1.5em;
padding-left: 1em;
}
#DETAIL .paragraph .note {
font-size: 3.2vw;
line-height: 2;
}
#DETAIL .paragraph .block:last-child,
#DETAIL .paragraph figure:last-child,
#DETAIL .paragraph img:last-child,
#DETAIL .paragraph p:last-child,
#DETAIL .paragraph ul:last-child,
#DETAIL .paragraph ol:last-child {
margin-bottom: 0;
}
#DETAIL .paragraph a {
color: #E3007E;
}
#DETAIL .paragraph a:hover {
text-decoration: underline;
text-underline-offset: 1.333vw;
}
#DETAIL .paragraph a::after {
transition: color 0.5s ease;
content: "\e900";
position: relative;
margin-right: 0.533vw;
font-family: 'icf' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 2.667vw;
line-height: 1;
color: #E3007E;
}
@media (min-width: 768px) {
	#DETAIL {
	margin: 0 auto;
	padding: 80px 0 100px 0;
	width: 1000px;
	}
	#DETAIL .box {
	padding: 60px 120px;
	}
	#DETAIL .icon {
	gap: 0 30px;
	margin-bottom: 32px;
	}
	#DETAIL .icon .new {
	font-size: 22px;
	}
	#DETAIL .icon .date {
	font-size: 22px;
	}
	#DETAIL .icon .category span {
	padding: 0 15px;
	font-size: 14px;
	line-height: 28px;
	}
	#DETAIL .title {
	margin-bottom: 27px;
	font-size: 36px;
	line-height: 1.45;
	}
	#DETAIL .image {
	padding: 4px 0 28px 0;
	}
	#DETAIL .paragraph {
	font-size: 16px;
	line-height: 2;
	}
	#DETAIL .paragraph h3 {
	margin-bottom: 3px;
	font-size: 24px;
	}
	#DETAIL .paragraph .block {
	margin-bottom: 29px;
	}
	#DETAIL .paragraph figure,
	#DETAIL .paragraph img,
	#DETAIL .paragraph p,
	#DETAIL .paragraph figure img ,
	#DETAIL .paragraph ul,
	#DETAIL .paragraph ol {
	margin-bottom: 1.8em;
	}
}