@charset "utf-8";

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

img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

/* template /////*/
body.delicare_ms {
	min-width: 0;	
}
#delimsContainer {
	position: relative;
}
#delimsNavSP {
	width: 100%;
	height: auto;
	overflow:hidden;
	position: absolute;
	top: 0;
	z-index:3;
}
#delimsMenuSP { 
	display: block;
	background: url(../images/sp_menu.png) no-repeat top right;
	width: 50px;
	height: 50px;
	float: right;
}
#delimsMenuSP.close { 
	background: url(../images/sp_menu_on.png) no-repeat top right;
}
#delimsHeader {
	display: none;
	background: none;
	height: auto;
	width: 100%;
	position: absolute;
	top: 50px;
	z-index:2;
}
#delimsHeader ul {
	margin: 0px auto;
	width: 100%;
	height:auto;
}
#delimsHeader ul li {
	display:block;
	float: none;
	text-indent:0px;
	text-align: center;
	background-color:#3c9b3c;
}
#delimsHeader ul li a {
	display: block;
	width: 100%;
	height: auto;
	border-bottom: 2px #FFF solid;
	background: url(none);
	color:#231815;
	text-decoration:none;
	font-size:22px;
}
#delimsHeader ul li.nav00 a, #delimsHeader ul li.nav01 a, #delimsHeader ul li.nav02 a, #delimsHeader ul li.nav03 a, #delimsHeader ul li.nav04 a, #delimsHeader ul li.nav05 a { background: url(none); width: 100%; }

#delimsContainer .backTop {
	width: 92%;
	height: auto;
	margin: 4% auto;
	overflow:hidden;
}
#delimsContainer .backTop a {
	display:block;
	float:right;
	padding-right: 0;
	text-align: right;
}
#delimsContainer .backTop img {
	width: 80%;
	height: auto;
}



/* main /////*/

#delimsMain {
	background: #a4d2fc url(../images/main_img_sp.jpg) no-repeat bottom center;
	background-size: cover;
	width: 100%;
}
#delimsMain .box {
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0px auto;
	padding: 78.6% 0 0;  
	position: relative;
}
#delimsMain .box h1 {
	position: absolute;
	height: auto;
	width: 37.2%;
	left: 10px;
	bottom: 0px;
	padding: 0 0 22%;
}
#delimsMain .box p {
	margin:0;
	position: absolute;
	height: auto;
	width: 60.8%;
	top: 0px;
	left: 0px;
	padding: 5% 0 0;
}
#delimsMain .box div.badge {
	position: absolute;
	height: auto;
	width: 32%;
	top: 5px;
	right: 0px;
	padding: 10% 0 0;
}
#delimsMain .box div.badge02 {
	position: absolute;
	height: auto;
	width: 31.1%;
	top: 126px;
	right: 0px;
	padding: 10% 0 0;
}
#delimsBtnChk1 {
	background: #00aaff;
	padding: 7.8% 0;
}
#delimsBtnChk1 a {
	display:block;
	margin: 0px auto;
	height: auto;
	width: 87.9%;
}


/* movie /////*/
#movie {
  position: relative;
	background: #09146c;
  padding-top: 0px;
}
#movie .label {
	position: absolute;
  width: 30%;
	left: 0px;
	top: 0px;
	margin-left: 0;
}
#movie .movieImg {
  padding-top: 0px
}
#movie .box {
  padding-bottom: 20px;
  width: 100%;
  height: 100%;
}
#movie .box .movies {
  position: static;
  bottom: inherit;
}
#movie .box .movies li {
  position: relative;
  float: none;
  width: 90%;
  margin: 0 auto;
  padding-top: 30px;
}
#movie .box .movies li:last-child {
	margin-right: auto;
}
#movie .box .movies li.movieIc {
  margin-top: 0px;
}
#movie .box .movies li.movieIc:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0px;
  width: 75px;
	height: 75px;
	background: url(../images/movie_itemIc03_sp.png) no-repeat;
  background-size: 80%;
}
#movie .box .movies .slick-dots li button:before{
  font-size: 16px;
}
#movie .box .movies .slick-slide{
  margin: 0 0.7%;
}
#movie .box .movies .slick-arrow{
  top: 77%;
  height: 5%;
}
#movie .box .movies .slick-arrow:before{
  height: 100%;
}
#movie .box .movies .slick-next{
  right: 9%;
}
#movie .box .movies .slick-prev{
  left: 9%;
  z-index: 9998;
}
#movie .box .movies .slick-next:before{
  background: url(../images/movie_ic2.png) no-repeat center center / contain;
}
#movie .box .movies .slick-prev:before{
  background: url(../images/movie_ic1.png) no-repeat center center / contain;
}
#movie .box .movies .slick-dots{
  bottom: 27px;
}
.remo2{
	z-index: 9999;
}

.experimentMovie {
	padding-bottom: 40px;
	background: url(../images/experiment_bg_sp.jpg) no-repeat center center;
	height: auto;
}
.experimentMovie .inner {
	margin: 0px auto;
	padding: 0 !important;
	width: 100%;
	position: relative;
}
.experimentMovie h2 {
	margin: 0 auto;
	width: 67.3%;
	padding: 10.7% 0 7%;
}
.experimentMovie h2 img {
	width: 100%;
}
.experimentMovie .inner .col {
	float: none;
	width: 89.8%;
	margin: 0 auto;
	padding: 0 0 5%;
}
.experimentMovie .inner .col:nth-child(3n) {
	margin-right: auto;
}


/* blueBox /////*/
#blueBox {
	background: #00aaff;
	padding: 11% 0px 0px;
}
#blueBox .wBox {
	background: #FFF;
	width: 92%;
	margin: 0px auto;
	-moz-border-radius: 14px; /* Firefox */
	-webkit-border-radius: 14px; /* Safari and Chrome */
	border-radius: 14px;
	position: relative;
	padding: 1.8% 2% 5%;
}
	
	
/* feature /////*/
#feature h2 {
	height: auto;
	width: 105%;
	position: absolute;
	left: -2.6%;
	top: 0.8%;
}
#feature .lead {
	margin: 2% auto;
	height: auto;
	width: 93.5%;
	padding: 16% 0 0;
}
#feature .point {
	height: auto;
	width: 100%;
	position: relative;
	background: url(../images/feature_illust.jpg) no-repeat center 5%;
	background-size:contain;
}
#feature .point .item1 {
	position: relative;
	height: auto;
	width: 100%;
	top:0;
	left:0;
	padding: 45% 0 0;
}
#feature .point .item2 {
	position: relative;
	height: auto;
	width: 100%;
	top:0;
	left:0;
	padding: 4% 0 0;
}
#feature .point .item3 {
	position: relative;
	height: auto;
	width: 100%;
	top:0;
	left:0;
	padding: 2% 0 0;
}
#feature .point .item4 {
	position: relative;
	height: auto;
	width: 100%;
	top:0;
	left:0;
	padding: 2% 0 8%;
}
#feature h4 {
	height: auto;
	margin-bottom: 8%;
}
#feature .cases {
	margin: 0 auto;
	width: 60%;
	overflow: hidden;
	text-align: center;
}
#feature .cases .item1, #feature .cases .item2, #feature .cases .item3, #feature .cases .item4 {
	margin: 0 auto 12.3%;
	padding: 0;
	float: none;
	height:auto;
}
#feature .cases .item1{ width: auto; }
#feature .cases .item2, #feature .cases .item3, #feature .cases .item4 { width: auto; }
#feature .cases .item4 { margin-bottom: 0; }


/* disease /////*/
#disease h3 {
	margin-bottom: 7%;
}
#disease .icon {
	height: auto;
	width: 29.2%;
	position: absolute;
	top: 0;
	right: 0;
	padding: 18% 7% 0 0;
}
#disease .desease1 {
	margin: 0px auto;
	width: 100%;
	overflow:hidden;
}
#disease .desease1 h4 {
	margin: 0px 0 8% 5%;
	height: auto;
	width: 49.5%;
}
#disease .desease1 .item {
	position: relative;
	background: url(../images/disease1_board_sp.jpg) no-repeat;
	background-size: cover;
	margin: 0 0 6%;
	float: none;
	height: auto;
	width: 100%;
	padding: 0 0 69.7%;
}
#disease .desease1 .item img {
	position: absolute;
	height: auto;
	width: 91%;
	top:13%;
	left:4.4%;
}
#disease .desease1 .item:nth-child(odd) {
	margin-right:0;
}
#disease .dotline {
	width: 100%;
	position:absolute;
	left: 0;
	padding: 0;
	line-height:0;
}
#disease .desease2 {
	margin: 0px auto;
	width: 100%;
	overflow:hidden;
	padding-top:8.5%;
}
#disease .desease2 h4 {
	margin: 0px auto 4%;
	height: auto;
	width: 100%;
}
#disease .desease2 .item {
	position: relative;
	background: url(../images/disease2_board_sp.jpg) no-repeat;
	background-size: cover;
	margin: 0 0 6%;
	float: none;
	height: auto;
	width: 100%;
	padding: 0 0 90.2%;
}
#disease .desease2 .item img {
	position: absolute;
	height: auto;
	width: 91%;
	top:10%;
	left:4.4%;
}
#disease .desease2 .item:nth-child(odd) {
	margin-right:0;
}
#disease .txt {
	margin: 5% auto 2.5%;
	width: 94.5%;
}
#disease .delimsBtnChk2 {
	margin: 0px auto;
	height: auto;
	width: 100%;
}


/* effect /////*/
#effect h3 {
	margin-bottom: 4%;
}
#effect .lead {
	margin: 0px auto 5%;
	height: auto;
	width: 95%;
	padding:0;
}
#effect .spiral {
	height: auto;
	position:relative;
	margin-bottom:5%;
}
#effect .spiral div {
	height: auto;
	width: 100%;
	position: relative;
	left: 0px;
	top: 0px;
}
#effect .effect1 {
	width: 100%;
	height: auto;
	position: relative;
	background: url(../images/effect1_image.jpg) no-repeat center 20%;
	background-size: 65%;
	padding:0 0 91%;
	overflow: hidden;
	margin-bottom: 5%;
}
#effect h4 {
	margin: 0px auto;
	width: 100%;
	height: auto;
	text-align:center;
}
#effect .effect1 .item1 {
	height: auto;
	width: 47%;
	position: absolute;
	left: 0;
	top: 64%;
	margin:0;
}
#effect .effect1 .item2 {
	height: auto;
	width: 47%;
	position: absolute;
	right: 0;
	top: 64%;
	margin:0;
}
#effect .effect2 {
	overflow:hidden;
}
#effect .effect2 p {
	float: none;
	margin:0 auto;
}
#effect .effect2 .item1 {
	padding: 7% 0 10%;
	width: 86%;
}
#effect .effect2 .item2 {
	padding-bottom: 10%;
	width: 86%;
}
#effect .effect2 .item3 {
	padding: 0px;
	width: 86%;
}


/* question /////*/
#question h3 {
	margin-bottom: 6%;
}
#question .icon {
	height: auto;
	width: 20%;
	position: absolute;
	top: 1%;
	right: 3%;
}
#question .box {
	margin: 0px auto;
	width: 100%;
}
#question p {
	font-size:160%;
	line-height:1.7em;
	width:93%;
	margin:0 0 5%;
	padding: 2% 0 0 7%;
}
#question .qaBtn {
	margin: 0px auto;
	height: auto;
	width: 100%;
	padding-top: 2%;
}



/* products /////*/
#products {
	margin: 10% auto 0;
	width: 100%;
	padding-bottom:7%;
}
#products h3 {
	margin: 0 auto 4.6%;
	height: auto;
	width: 35.5%;
}
#products h3 img {
	width: 100%;
}
#products .prds {
	margin: 0 0 0 6%;
	width: 84.5%;
	height:auto;
	overflow: hidden;
}
#products .prds .item1 {
	float: none;
	margin: 0 0 5%;
	width: 89.4%;
	height: auto;
	position: relative;
	padding: 0 0 26%;
}
#products .prds .item2 {
	float: none;
	margin: 0 0 10% 0%;
	width: 100%;
	height: auto;
	position: relative;
	padding: 0 0 29%;
}
#products .prds .item1 h4 {
	height: auto;
	width: 76.2%;
	position: absolute;
	right: 1%;
	bottom: 0;
}
#products .prds .item2 h4 {
	height: auto;
	width: 86.5%;
	position: absolute;
	right: 3%;
	bottom: 0;
}
#products .prds .item1 p {
	margin:0;
	padding:0;
	width: 40%;
	height: auto;
}
#products .prds .item2 p {
	margin:0;
	padding:0;
	width: 35.8%;
	height: auto;
}
#products .prdBtn {
	margin: 0 auto;
	height: auto;
	width: 89.2%;
}


/* delimsFooter /////*/
#delimsFooter {
	background-image: none;
	width: 100%;
	padding-top: 7%;
}
#delimsFooter .box {
	border: 1px solid #323232;
	-moz-border-radius: 14px; /* Firefox */
	-webkit-border-radius: 14px; /* Safari and Chrome */
	border-radius: 14px;
	width: 96%;
	padding: 3%;
	box-sizing:border-box;
	margin:0 auto;
	font-size:16px;
}
#delimsFooter h5, #delimsFooter h6 {
	font-weight:bold;
}
#delimsFooter p {
	color: #646464;
	margin:0 0 8px;
}


/* checker /////*/
#checker {
	position: relative;
}
#checker .layer {
	background-color:#fff;
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	z-index:1;
	overflow: hidden;
	opacity:0;
	filter: alpha(opacity=0);
	display: none; 
}

#checker .second,
#checker .third, 
#checker .fourth,
#checker .result1,
#checker .result2 {
	display:none;
}	
#checker .first {
	background: url(../images/checker_bg1.png) no-repeat;
	background-size: contain;
	height: auto;
	width: 82%;
	padding: 20% 9% 18% 9%;
	position: relative;
}
#checker .second {
	background: url(../images/checker_bg2.png) no-repeat;
	background-size: contain;
	height: auto;
	width: 82%;
	padding: 20% 9% 13% 9%;
	position: relative;
}
#checker .third {
	background: url(../images/checker_bg3.png) no-repeat;
	background-size: contain;
	height: auto;
	width: 82%;
	padding: 20% 9% 18% 9%;
	position: relative;
}
#checker .fourth {
	background: url(../images/checker_bg4.png) no-repeat;
	background-size: contain;
	height: auto;
	width: 82%;
	padding: 20% 9% 15.2% 9%;
	position: relative;
}
#checker .result1 {
	background: url(../images/checker_bg5.png) no-repeat;
	background-size: contain;
	height: auto;
	width: 82%;
	padding: 20% 9% 17.8% 9%;
	position: relative;
}
#checker .result2 {
	background: url(../images/checker_bg6.png) no-repeat;
	background-size: contain;
	height: auto;
	width: 82%;
	padding: 20% 9% 14% 9%;
	position: relative;
}
#checker .qes {
	margin: 0;
	padding: 0;
	height: auto;
	width: 100%;
}
#checker .qes2 {
	margin: 0 0 2%;
	padding: 0;
	height: auto;
	width: 100%;
}
#checker .txt {
	font-size: 0px;
	line-height: 0px;
	margin: 0 0 2%;
	padding: 0;
}
#checker .checkList  {
	width:100%;
	overflow:hidden;
}
#checker .checkList li {
	background: url(../images/checkbox.png) no-repeat left center;
	background-size: contain;
	display: block;
	float: left;
	width: 40%;
	height: auto;
	padding: 0 0 0 7%;
	margin-bottom: 4%;
	text-align:left;
}
#checker .checkList li.checked {
	background: url(../images/checkbox_on.png) no-repeat left center;
	background-size: contain;
	height: auto;
}
#checker .checkList li.line2 {
	height: auto;
	padding: 0.4% 0 0.2% 10%;
}
#checker .checkList li.current {
	background: url(../images/checkbox_on.png) no-repeat left center;
}
#checker .checkList li a {
	color:#231815;
	text-decoration:none;
}
#checker .nextBtn {
	height: auto;
	width: 46.9%;
	position: absolute;
	bottom: 7.6%;
	left: 26.5%;
}
/* detailBtn */
#checker .detailBtn {
	height: auto;
	width: 46.9%;
	position: absolute;
	bottom: 7.6%;
	left: 26.5%;
}
#checker .remodal-detail {
}
.snsBox{
  right: 20px;
  top: 56.5%;
}
.snsBox p{
  width: 100%;
}
@media all and (orientation: landscape) {
#movie .box .movies li.movieIc:before {
	top: -5px;
	left: 15%;
} 
}


}
/*////////////////// @media */


@media screen and (max-width:640px){
#delimsMenuSP { 
	width: 34px;
	height: 34px;
	background-size: cover;
}
#delimsMenuSP.close { 
	background-size: cover;
}
#delimsHeader {
	top: 34px;
}
#delimsContainer .backTop img {
	width: 65%;
	height: auto;
}
#feature .lead {
	margin: 5% auto;
}
#feature .cases {
	width: 70%;
}
#question p {
	font-size:140%;
}
#checker .first {
	padding: 20% 9% 14% 9%;
}
#checker .second {
	padding: 20% 9% 14% 9%;
}
#checker .third {
	padding: 20% 9% 14% 9%;
}
#checker .fourth {
	padding: 20% 9% 14% 9%;
}
#checker .result1 {
	padding: 20% 9% 18% 9%;
}
#checker .result2 {
	padding: 20% 9% 12.3% 9%;
}
#checker .checkList li {
	width: 41%;
	height: auto;
	padding: 0.5% 0 0.5% 9%;
	margin-bottom: 4%;
}
#checker .checkList li.line2 {
	height: auto;
	padding: 0.2% 0 1% 10%;
}
#checker .detailBtn {
	bottom: 12%;
}

}
/*////////////////// @media */