@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&subset=japanese");

html {
	font-size: 62.5%;
	-webkit-font-smoothing: antialiased;
}
body {
	color: #333333;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1;
	background-color: #ffffff;
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
@media screen and (min-width: 769px) {
	body {
		min-width: 1000px;
	}
}
#wrap * {
	-webkit-tap-highlight-color: transparent;
}
#wrap a {
	color: inherit;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#wrap p, #wrap dt, #wrap dd, #wrap li {
	word-break: break-word;
	word-wrap: normal;
}
#wrap ol, #wrap ul, #wrap li {
	list-style: none;
}
#wrap img {
	max-width: 100%;
	vertical-align: top;
}
#wrap textarea {
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
}
.cf:after {
	content: "";
	display: block;
	clear: both;
}
.ib {
	display: inline-block;
	line-height: inherit;
	font-weight: inherit;
}
.accordionTrigger {
	cursor: pointer;
	display: block;
}
.accordionContent {
	display: none;
}
.contentInner {
	position: relative;
	width: 100%;
}

/* mainVisual */
#mainVisual {
	padding: 62px 0 0 0;
}
#mainVisual h1 {
}
/* キャンペーン終了 **********/
.end_cp {
	background-color: #e50012;
	text-align: center;
	padding: 28px 0;
}


/* area */
#area .content {
	background-color: #fcde00;
	padding: 80px 0 0 0;
}
#area .contentInner {
}
#area .board {
	width: calc(1034 / 1165 * 100%);
	max-width: 1034px;
	background-image: url(/softdrink/cclemon/campaign/img/bg_board.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto 128px auto;
	box-shadow: 0 0 30px #d07000;
}
#area .lineWrap {
	padding: 42px;
	box-shadow: 0 0 30px #000000 inset;
}
#area .lineWrap:before {
	content: "";
	display: block;
	width: 100%;
	height: 7px;
	background-image: url(/softdrink/cclemon/campaign/img/frame_top@2x.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
#area .lineWrap:after {
	content: "";
	display: block;
	width: 100%;
	height: 7px;
	background-image: url(/softdrink/cclemon/campaign/img/frame_bottom@2x.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
}
#area .lineWrap .line {
	position: relative;
	padding: 72px 40px 81px 40px;
}
#area .lineWrap .line:before {
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	bottom: 0;
	left: 0;
	width: 8px;
	background-image: url(/softdrink/cclemon/campaign/img/frame_middle2@2x.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#area .lineWrap .line:after {
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	bottom: 0;
	right: 0;
	width: 8px;
	background-image: url(/softdrink/cclemon/campaign/img/frame_middle2@2x.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#area h2 {
	width: calc(625 / 870 * 100%);
	margin: 0 auto 45px auto;
}
#area .read {
	width: calc(512 / 870 * 100%);
	margin: 0 auto 4px auto;
}
#area .message {
	width: calc(820 / 870 * 100%);
	margin: 0 auto 58px auto;
	padding: 0 0 0 calc(50 / 870 * 100%);
}
#area .period {
	width: calc(640 / 870 * 100%);
	margin: 0 auto 81px auto;
	padding: 0 calc(26 / 870 * 100%) 0 0;
}
#area .parts01 {
	position: absolute;
	top: -38px;
	left: calc(31 / 870 * 100%);
	width: calc(91 / 870 * 100%);
	background-image: url(/softdrink/cclemon/campaign/img/parts01@2x.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	padding: calc(133 / 870 * 100%) 0 0 0;
}
#area .parts_finish {
	position: absolute;
	top: 572px;
	left: 0;
	right: 0;
	width: calc(518 / 950 * 100%);
	background-image: url(/softdrink/cclemon/campaign/img/txt_finish@2x.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: auto;
	padding: calc(138 / 950 * 100%) 0 0 0;
}

/* movieArea */
#area #movieArea {
}
#area #movieArea .title {
	width: calc(864 / 870 * 100%);
	margin: 0 auto 56px auto;
}
#area #movieArea .movie {
	position: relative;
	width: calc(717 / 870 * 100%);
	background-image: url(/softdrink/cclemon/campaign/img/bg_movie@2x.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 auto 19px auto;
	padding: calc(412 / 870 * 100%) 0 0 0;
}
#area #movieArea .movie iframe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
}
#area #movieArea .movieTitle {
	color: #ffffff;
	font-size: 18px;
	font-size: 1.8rem;
	margin: 0 auto 91px auto;
}

/* methodArea */
#area #methodArea {
}
#area #methodArea .title {
	width: calc(864 / 870 * 100%);
	margin: 0 auto 38px auto;
}
#area #methodArea .listWrap {
	width: calc(700 / 870 * 100%);
	margin: 0 auto 100px auto;
}
#area #methodArea .listWrap .list {
}
#area #methodArea .listWrap .item {
	position: relative;
}
#area #methodArea .listWrap .item:after {
	content: "";
	display: block;
	width: 100%;
	background-image: url(/softdrink/cclemon/campaign/img/arrow@2x.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 auto 20px auto;
	padding: 25px 0 0 0;
}
#area #methodArea .listWrap .item:nth-child(2):after {
	margin: 0 auto 7px auto;
}
#area #methodArea .listWrap .item:last-child:after {
	display: none;
}
#area #methodArea .listWrap .item dl {
}
#area #methodArea .listWrap .item dt {
}
#area #methodArea .listWrap .item dd {
}
#area #methodArea .listWrap .item dd .followButton {
	width: calc(368 / 700 * 100%);
	margin: 0 auto 26px auto;
}
#area #methodArea .listWrap .item dd .selectButton {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: calc(670 / 700 * 100%);
	margin: auto;
	padding: 16px 0 11px 0;
}
#area #methodArea .listWrap .item dd .selectButton li {
	flex-basis: calc(325 / 670 * 100%);
	margin: 0 0 22px 0;
}
#area #methodArea .listWrap .item dd .selectButton li img+img {
	display: none;
}
#area #methodArea .listWrap .item dd .selectButton li.current img {
	display: none;
}
#area #methodArea .listWrap .item dd .selectButton li.current img+img {
	display: block;
}
#area #methodArea .listWrap .item dd textarea {
	display: block;
	opacity: 0.8;
	min-width: 100%;
	max-width: 100%;
	height: 104px;
	color: #1f3923;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.4;
	background-color: #ffffff;
	margin: 20px 0 30px 0;
	padding: 23px 26px;
	box-sizing: border-box;
	border-radius: 5px;
}
#area #methodArea .listWrap .item dd textarea.on {
	opacity: 1.0;
}
#area #methodArea .listWrap .item .parts02 {
	position: absolute;
	bottom: 11px;
	right: calc(-60 / 700 * 100%);
	width: calc(162 / 700 * 100%);
	background-image: url(/softdrink/cclemon/campaign/img/parts02@2x.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	padding: calc(159 / 700 * 100%) 0 0 0;
}
#area #methodArea .listWrap .item .parts03 {
	position: absolute;
	top: -58px;
	right: calc(-20 / 700 * 100%);
	width: calc(80 / 700 * 100%);
	background-image: url(/softdrink/cclemon/campaign/img/parts03@2x.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	padding: calc(115 / 700 * 100%) 0 0 0;
}
#area #methodArea .buttonArea a {
	opacity: 0.5;
}
#area #methodArea .buttonArea a.on {
	opacity: 1.0;
}

/* guideArea */
#area #guideArea {
}
#area #guideArea .title {
	width: calc(864 / 870 * 100%);
	margin: 0 auto 65px auto;
}
#area #guideArea .guideWrap {
	overflow: auto;
	width: calc(810 / 870 * 100%);
	height: 400px;
	text-align: left;
	margin: auto;
}
#area #guideArea .guideWrap .guideTitle {
	color: #214e31;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	background-image: url(/softdrink/cclemon/campaign/img/bg_title@2x.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 30px 0 10px 0;
	padding: calc(5 / 810 * 100%) 0 calc(7 / 810 * 100%) 0;
}
#area #guideArea .guideWrap .guideTitle:first-child {
	margin-top: 0;
}
#area #guideArea .guideWrap .list {
}
#area #guideArea .guideWrap .item {
	color: #ffffff;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.8;
	text-indent: -1em;
	padding: 0 0 0 1em;
}
#area #guideArea .guideWrap .note {
	color: #ffffff;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.8;
}
#area #guideArea .guideWrap .date {
	color: #ffffff;
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 1.8;
	font-weight: 700;
}
#area #guideArea .guideWrap .text {
	color: #ffffff;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.8;
}
#area #guideArea .guideWrap .mb {
	margin-bottom: 20px;
}

/* area2 */
#area2 .content {
	background-color: #fcde00;
	padding: 80px 0 0 0;
}
#area2 .contentInner {
}
#area2 .board {
	width: calc(1034 / 1165 * 100%);
	max-width: 1034px;
	background-image: url(/softdrink/cclemon/campaign/img/bg_board.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto 0 auto;
	box-shadow: 0 0 30px #d07000;
}
#area2 .lineWrap {
	padding: 42px;
	box-shadow: 0 0 30px #000000 inset;
}
#area2 .lineWrap:before {
	content: "";
	display: block;
	width: 100%;
	height: 7px;
	background-image: url(/softdrink/cclemon/campaign/img/frame_top@2x.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
#area2 .lineWrap:after {
	content: "";
	display: block;
	width: 100%;
	height: 7px;
	background-image: url(/softdrink/cclemon/campaign/img/frame_bottom@2x.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
}
#area2 .lineWrap .line {
	position: relative;
	padding: 72px 40px 66px 40px;
}
#area2 .lineWrap .line:before {
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	bottom: 0;
	left: 0;
	width: 8px;
	background-image: url(/softdrink/cclemon/campaign/img/frame_middle2@2x.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#area2 .lineWrap .line:after {
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	bottom: 0;
	right: 0;
	width: 8px;
	background-image: url(/softdrink/cclemon/campaign/img/frame_middle2@2x.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#area2 h2 {
	width: calc(625 / 870 * 100%);
	margin: 0 auto 70px auto;
}
#area2 .read {
	width: calc(739 / 870 * 100%);
	margin: 0 auto 76px auto;
}
#area2 .parts01 {
	position: absolute;
	top: -38px;
	left: calc(31 / 870 * 100%);
	width: calc(98 / 870 * 100%);
	background-image: url(/softdrink/cclemon/campaign/img/parts04@2x.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	padding: calc(133 / 870 * 100%) 0 0 0;
}
#area2 .parts02 {
	position: absolute;
	top: -38px;
	left: calc(20 / 870 * 100%);
	width: calc(159 / 870 * 100%);
	background-image: url(/softdrink/cclemon/campaign/img/badge@2x.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	padding: calc(159 / 870 * 100%) 0 0 0;
}

/* bookArea */
#area2 #bookArea {
	position: relative;
}
#area2 #bookArea .title {
	width: calc(477 / 870 * 100%);
	margin: 0 auto 36px auto;
}
#area2 #bookArea .bookWrap {
	
}
#area2 #bookArea .bookTitle {
	color: #ffffff;
	font-size: 18px;
	font-size: 1.8rem;
	margin: 40px auto 0 auto;
}