@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');


/* リセット */
body {
	margin: 0;
	padding: 0;
}
#contents_outer {
	margin:0!important;
	padding:0!important;
	width:100%!important;
}
#contents {
	padding-top: 0!important;
	padding-bottom: 0!important;
}
#main_contents{
	width:100%!important;
	float: none!important;
}

.manga a:link,
.manga a:visited {
	color: unset;
	text-decoration: none;
}

/* 漫画LP */

.manga {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	text-align: center;
	overflow: hidden;
}
.manga.story01 {
	background: #e6f3fa url(../img/HC_STORY_201225/story01_bg.png) repeat-y center top;
}
.manga.story02 {
	background: #fdf0da url(../img/HC_STORY_201225/story02_bg.png) repeat-y center top;
}
.manga.story03 {
	background: #ffecec url(../img/HC_STORY_201225/story03_bg.png) repeat-y center top;
}
.manga.story04 {
	background: #f8ebf3 url(../img/HC_STORY_201225/story04_bg.png) repeat-y center top;
}
.manga * {
	margin: 0;
	padding: 0;
}
.manga img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.manga .pc {
	display: inline-block;
}
.manga .sp {
	display: none;
}

.manga__ttl {
	padding: 30px 20px 40px;
	background: #fff;
}
.manga .manga__ttl img {
	max-width: 1169px;
}
.manga img.manga__ttl__cats {
	display: none;
}
.manga__story {
	width: 486px;
	margin: 0 auto;
	padding: 0 100px;
	background: #fff;
}
.manga__story__scene {
	list-style: none;
}
.manga__story img {
	width: 100%;
	height: auto;
}
.manga__nav {
	padding: 50px 0 35px;
	background: #fff;
	display: flex;
	justify-content: center;
}
.manga__nav__btn {
	width: 310px;
}
.manga__nav__btn a:hover img {
	-ms-filter: "alpha( opacity=70 )";
	filter: alpha( opacity=70 );
	opacity: 0.7;
	transition: all .4s;
}

/* 経口補水サプリメント */
.hydracare .manga__hydracare {
	padding: 1.5em 0 1.2em;
	font-size: 30px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	line-height: 1em;
	letter-spacing: 0.2em;
}
.manga + .hydracare .hydracare__mv {
	min-height: 0;
}
.hydracare .manga__hydracare__point {
	width: 800px;
	margin: -1em auto 1em;
	text-align: left;
}
.hydracare .manga__hydracare__point__txt {
	margin: 0 0 0 1em;
	text-indent: -1em;
	font-size: 14px;
	line-height: 1.7em;
}
.hydracare .manga__hydracare__point__txt:before {
	content: "●";
	color: #72b2dc;
}
.hydracare .manga__hydracare__point__txt small {
	text-indent: 1em;
	font-size: 14px;
	display: inline-block;
}

/* 下部リンク */
.manga__other {
	padding: 30px 0;
	background: #ffff73;
	text-align: center;
}
.manga__other .pc {
	display: inline-block;
}
.manga__other .sp {
	display: none;
}
.manga__other__ttl {
	padding: 0 0 1em;
	font-size: 24px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
	line-height: 1.428em;
	color: #81c2e4;
	display: inline-block;
}
.manga__other__ttl small {
	font-size: 20px;
	font-weight: 900;
}
.manga__other__ttl small.nocolor {
	color: #666;
}
.manga__other__ttl u {
	text-decoration: none;
	border-bottom: 2px dashed #666;
}
.manga__other__icon {
	position: relative;
}
.manga__other__icon:before {
	content: "";
	position: absolute;
	left: -77px;
	top: -10px;
	width: 58px;
	height: 52px;
	background: url(../img/HC_STORY_201225/other_icon.png) no-repeat center center;
	background-size: contain;
	display: inline-block;
}
.manga__other img {
	vertical-align: bottom;
}





/* ----------------------------------------------------------------- */
/* smartphone */
/* ----------------------------------------------------------------- */

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

/* リセット */
#benesse-header,
.pagetop,
.ad_area,
#search_keyword,
#menu_sp,
#product-info,
#gfooter{
display: none!important;
}

.manga .pc {
	display: none;
}
.manga .sp {
	display: inline-block;
}

.manga.story01,
.manga.story02,
.manga.story03,
.manga.story04 {
	background: #fff;
}
.manga__ttl {
	position: relative;
	padding: 0;
}
.manga img.manga__ttl__cats {
	position: absolute;
	left: 50%;
	bottom: -5vw;
	transform: translateX(-50%);
	width: 61%;
	display: inline-block;
}
.manga__story {
	width: auto;
	margin: 0 auto;
	padding: 0;
	font-size: 0;
	line-height: 0;
}
.manga__nav {
	padding: 3vw 0 5vw;
	flex-wrap: wrap;
}
.manga__nav__btn {
	width: 100%;
	margin: 0 0 -1vw;
}

/* 経口補水サプリメント */
.hydracare .manga__hydracare {
	font-size: 5.2vw;
	letter-spacing: 0.15em;
}
.hydracare .manga__hydracare__point {
	width: auto;
	padding: 5vw 5% 10vw;
}
.hydracare .manga__hydracare__point__txt {
	font-size: 3.4vw;
	line-height: 1.6em;
}
.hydracare .manga__hydracare__point__txt small {
	text-indent: 0;
	font-size: 2.7vw;
	line-height: 1.4em;
}

/* 下部リンク */
.manga__other {
	padding: 5vw 0 3vw;
}
.manga__other .pc {
	display: none;
}
.manga__other .sp {
	display: inline-block;
}
.manga__other__ttl {
	padding: 0 0 0.5em;
	font-size: 8vw;
	line-height: 1.4em;
}
.manga__other__ttl small {
	font-size: 6vw;
}
.manga__other__ttl u {
	border-bottom: 0.6vw dashed #666;
}
.manga__other__icon:before {
	left: -2vw;
	top: -1vw;
	width: 13.4vw;
	height: 12vw;
}
.manga__other img {
	width: 100%;
	height: auto;
}

}