/*----------------------------------------------------------------------------------------------------
	Common
---------------------------------------------------------------------------------------------------- */
#zi {
	text-align: center;
	background: url(https://jp.rohto.com/-/Media/com/zi/2018/images/bg.jpg) repeat-y center top #082fa6;
	}

#zi * {
    -webkit-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}

.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
	}

.pcnone{
	display:none;
	}



/*----------------------------------------------------------------------------------------------------
	PC　
---------------------------------------------------------------------------------------------------- */

/*———————————–
　Navigation
———————————–*/
#zi-Navi{
	width: 100%;
	min-width: 940px;
	height: 61px;
	background: url(data:image/gif;base64,R0lGODlhFAA9AMQAAAElnwAeigEmoQAdiAAdhwEmowAfiwEknAEjmgAfjAEjlwAgjQAjlgAhjwAhkAAikwAikQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMjEgNzkuMTU1NzcyLCAyMDE0LzAxLzEzLTE5OjQ0OjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjk1QjU5RjA5RTFDOEU0MTFBQTFCRjUyRjFBMkI1OUQxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU0MkQ2NUQ3RENFRDExRTRCNzhFOTE2MTA3RjdBMEI0IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU0MkQ2NUQ2RENFRDExRTRCNzhFOTE2MTA3RjdBMEI0IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmE2MmM2MDgyLWZjNmQtNDBkZC1hMmRiLTc1MGYyZmNlYmE5NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5NUI1OUYwOUUxQzhFNDExQUExQkY1MkYxQTJCNTlEMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAAUAD0AAAX/IOQszOM8ZKI0S+OcTCI2bPI0yekqCrRAK9kCAWkwTosF72YA+EgLQcOASggeEAPj+MMhkjvGQZFgKBwIBu5BQCAeZ4TiiIWYFIvDtqEw2CFfJm9FAwkADQ8PB18nEAEyBydaIjFvDj1+EE4kfQEOAA4udgIOJUWRoQFcMRCtKw0HmnhFpTYMCDQKD2U2Y4ChVxCVCza1DyV8DUQ0tjbMScJginJADhAHLkkOCXkmU4ihDXYLh8eIeOIHNza61gaXAcIMSXk+odt2uzcMAGMm2yxO3Ghlwg6qRkcMqDgyR8+1BqCUHGlFREmAFfGsNUoEq84PTjl80BBTKpwVLFq4/xRJ8IXYnBu6tpTK5eZNogRTWhAxQGPBO0T6ZvRrpW5Nuyzw5NFL1GOIOlPiEuR4V9HBIhMycJJ4MSsBlRjWhhShk2TJlE3IrM5b0YOIjFtHIiGSVydnRWyJEJQyo2UAoGOA0ui1ZibRGDLIxHxRg4KcHFzyDMSa+cKIHRferKnTJEKXOCD8IJCylsjMpS3zfjAQBmBirAdpZLBYgIUOnqeq82xRDaAdYCAtyoRC9QeFKwR+qBV0AZBGLquhYG9BoQBADkRvTLvAriURIETbbaQ4keOHCSqookJSw6dmol05xc1dMEIHnh6fiAHhkQYMCX61FDEQEALgcssLwgi4R7ARbegSzw2ViYdAAWlMUh9MHf0wBx/vHGAAJ7RNVEcZEORgAmMv7AaNAX7wwA1LPJFhhTg3IJICAh4eURiJDFCByDzyfXKEC4pVs48ItDmQ0TYrlMjAAAjCEl0aJShh3ZTHYHKTK3PQdoV4SsjgQCaRxHDfCDqe5kcdwijwhkJSGYGhAXqB4QQuc/TwjzAzefLCMXXI0Qdix1QywjnhtELDmmj8YE2drfhQEAIB0AdBCAA7) repeat-x;
	position: relative;
	z-index: 100;
	}

#navi{
	width: 940px;
	height: 61px;
	background:url(/-/Media/com/zi/202006/top/images/navi.gif) no-repeat;
	margin: 0 auto;
	text-align: left;
	position: relative;
	}

#navi ul {
	width: 940px;
	height: 61px;
	}

#navi ul li {
	float: left;
	margin: 0;
	}

#navi ul li a {
	width:470px;
	display: block;
	height: 61px;
	margin: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}
#navi ul li.soon a {
	cursor: default;
	pointer-events: none;
}
#navi ul li a:hover{
	background:url(/-/Media/com/zi/202006/top/images/navi_on.png) no-repeat;
	position: absolute;
	z-index: 1;
	top: 0;
	height: 61px;
	cursor: pointer;
	width: 491px;
	}

#nav1:hover {
	left: 0;
	}

#navi ul li a#nav2:hover {
	left: 450px;
	background-position:center bottom;
	}
#navi ul li.soon a:hover {
	background: none!important;
	}

/*———————————–
　Main
———————————–*/
#main{
	width:100%;
	background:url(/-/Media/com/zi/20240907/images/main_bg.jpg) no-repeat center top #0000bb;
	height: 432px;
}
.zi-main-mv {
	transition: all 0.2s linear;
}
.zi-main-mv:hover {
	opacity: 0.8;
}
#main-in{
	width: 940px;
	margin: auto;
	position:relative;
	padding-top:21px;
	}

/* #main h1{
	padding: 0 0 0 0px;
	width:689px;
	height:79px;
	background: url(/-/Media/com/zi/20230327/images/main_copy.png) no-repeat center bottom;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
	text-align: center;
	} */
#main h1 {
	display: none;
}





/*———————————–
　About
———————————–*/
#about{
	clear: both;
	padding: 67px 0 0px 0;
	min-height: 2040px;
	background: url(https://jp.rohto.com/-/Media/com/zi/2018/images/about_bg.jpg) no-repeat center top -140px;
	}

#about .top_bnr{
	max-width: 940px;
	margin: 0 auto 50px;
	}

#about h2 img{
	width:253px;
	height:117px;
	margin: auto;
	}

#about h3 img{
	width:627px;
	height:113px;
	margin:27px auto 37px auto;
	}

/*---Lineup---*/
#lineup{
	width:940px;
	margin:40px auto 0;
	padding: 70px 0 60px 0;
	text-align: left;
	background:
        url(https://jp.rohto.com/-/Media/com/zi/2018/images/corner_left-top.png) left top no-repeat,
		url(https://jp.rohto.com/-/Media/com/zi/2018/images/corner_left-bottom.png) left bottom no-repeat,
		url(https://jp.rohto.com/-/Media/com/zi/2018/images/corner_right-top.png) right top no-repeat,
        url(https://jp.rohto.com/-/Media/com/zi/2018/images/corner_right-bottom.png) right bottom no-repeat,
		rgba(255,255,255,0.25);
	}


/*---Product_b---*/
#product_b{
	background:url(/-/Media/com/zi/20230327/images/about_product_image_b.png) no-repeat 66px 133px,url(https://jp.rohto.com/-/Media/com/zi/2018/images/dot_line_l.gif) no-repeat center bottom;
	background-size: 290px auto,auto auto;
	padding:0 0 56px 0;
	margin-bottom: 44px;
	}

#product_b h4 img{
	width: 346px;
	height: 95px;
	margin: 0 auto 29px auto;
	}

#product_b ul{
	width:528px;
	float: right;
	}

#product_b ul li{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background-repeat: no-repeat;
	}

#product_b_01{
	background-image: url(https://jp.rohto.com/-/Media/com/zi/2018/images/about_refresh_01.png);
	width:389px;
	height: 90px;
	margin-bottom: 21px;
	}

#product_b_02{
	background-image: url(https://jp.rohto.com/-/Media/com/zi/2018/images/about_refresh_02.png);
	width:498px;
	height: 90px;
	margin-bottom: 7px;
	}

#product_b_03{
	background-image: url(/-/Media/com/zi/2020/images/about_refresh_03.png);
	width:491px;
	height: 235px;
	}

#product_b .product-in{
	width: 412px;
	padding: 250px 0 0 0 ;
	float: left;
	}

#product_b .name{
	padding: 0 0 15px 222px;
	}

#product_b .name img{
	width:90px;
	height:auto;
	}

#product_b .effect{
	background: url(https://jp.rohto.com/-/Media/com/zi/2018/images/about_product_effect_b.png) no-repeat left top;
	background-size: 230px 22px;
	width: 230px;
	height: 22px;
	margin: 9px 0 32px 97px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}

#product_b .level{
	background: url(https://jp.rohto.com/-/Media/com/zi/2018/images/about_product_level_8.png) no-repeat left top;
	width: 304px;
	height: 36px;
	background-size: 100% auto;
	margin: 0 0 19px 65px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}

#product_b .btn-detail{
	margin:0 0 0 77px;
	}

#product_b .btn-detail_sp {
	display: none;
	}


/*---Product_pro---*/
#product_pro{
	background:url(/-/Media/com/zi/20230327/images/about_product_image_pro.png) no-repeat 80px 123px,url(https://jp.rohto.com/-/Media/com/zi/2018/images/dot_line_v.gif) repeat-y right;
	background-size: 283px auto,auto auto;
	width: 470px;
	float: left;
	padding:0 0 0 33px;
	}

#product_pro h4 img{
	width: 380px;
	height: auto;
	margin: 5px 0 20px 34px;
	}

#product_pro .product-in,
#product_a .product-in{
	padding:245px  41px  0 41px;
	}

#product_pro .name img{
	width: 117px;
	height: auto;
	margin: 0px 0 25px 150px;
	}

#product_pro .copy img{
	width: 328px;
	height: auto;
	margin: 0px 0 14px 11px;
	}

#product_pro .effect{
	background: url(https://jp.rohto.com/-/Media/com/zi/2018/images/about_product_effect_pro.png) no-repeat left top;
	background-size: 282px auto;
	width: 282px;
	height: 42px;
	margin: 0px 0 14px 27px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}

#product_pro .level,
#product_a .level{
	background: url(https://jp.rohto.com/-/Media/com/zi/2018/images/about_product_level_8-plus.png) no-repeat left top;
	background-size: 354px auto;
	width: 354px;
	height: 36px;
	margin: 0 0 35px 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}

#product_a .contact {
	margin: -25px 0 20px;
}

#product_pro .btn-detail{
	margin:0 0 0 36px;
	}

.text{
	line-height: 1.8;
	}

/*---Product_a---*/
#product_a{
	background:url(/-/Media/com/zi/20230327/images/about_product_image_a.png) no-repeat 44px 126px;
	background-size: 286px auto;
	width: 470px;
	float: right;
	padding:0 33px 0 0;
	}

#product_a h4 img{
	width: 407px;
	height: auto;
	margin: 3px 0 29px 27px;
	}

#product_a .name img{
	width: 152px;
	height: auto;
	margin: 0px 0 25px 133px;
	}

#product_a .copy img{
	width: 398px;
	height: auto;
	margin: 0px 0 18px 0;
	}

#product_a .effect{
	background: url(https://jp.rohto.com/-/Media/com/zi/2018/images/about_product_effect_a.png) no-repeat left top;
	background-size: 279px auto;
	width: 279px;
	height: 21px;
	margin: 0px 0 28px 23px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}

#product_a .contact img{
	width: 354px;
	height: auto;
	margin:11px 0 0 0 ;
	}

#product_a .btn-detail{
	margin:0 0 0 30px;
	}


/*---Detail-Btn---*/
#product_pro .btn-detail,
#product_a .btn-detail{
	padding:23px 0 36px 0;
	}

.btn-detail a{
	width: 281px;
	height: 42px;
	display: block;
	background: url(https://jp.rohto.com/-/Media/com/zi/2018/images/btn_detail.png) no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}

.btn-detail a:hover{
	background-position: 0 -42px;
	}

/*---Annotation---*/
.annotation{
	clear: both;
	padding: 19px 0 0 0;
	}

.annotation li {
	font-size: 80%;
	padding: 10px 19px 0 19px;
	-webkit-transform: skewX(-15deg);
	transform: skewX(-15deg);
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.26794919243112214, M21=0, M22=1, SizingMethod='auto expand')";
	}


/*———————————–
　Scene
———————————–*/
#scene{
	background: url(https://jp.rohto.com/-/Media/com/zi/2018/images/scene_bg.png) no-repeat center bottom;
	padding: 0;
	}

#scene h2 img{
	width:607px;
	height:117px;
	margin: auto;
	}

#scene h3 img{
	width:680px;
	height:166px;
	margin:-31px auto 31px auto;
	}

#scene #situation{
	width:940px;
	margin:auto;
	font-size:0;
	padding:0 0 122px 0;
	text-align: left;
	}

#scene #situation li{
	width:215px;
	height:338px;
	margin:0 26px 24px 0;
	display:inline-block;
	background-repeat:no-repeat;
	background-image:url(https://jp.rohto.com/-/Media/com/zi/2018/images/situation.png);
	cursor:pointer;
	}

#scene #situation li#situation04,
#scene #situation li#situation08,
#scene #situation li#situation10{
	margin:0 0 24px 0;
	}

#scene #situation li#situation09{
	margin:0 26px 24px 242px;
	}

#scene #situation02{
	background-position:-215px top;
	}

#scene #situation03{
	background-position:-430px top;
	}

#scene #situation04{
	background-position:-645px top;
	}

#scene #situation05{
	background-position:-860px top;
	}

#scene #situation06{
	background-position:-1075px top;
	}

#scene #situation07{
	background-position:-1290px top;
	}

#scene #situation08{
	background-position:-1505px top;
	}

#scene #situation09{
	background-position:-1720px top;
	}

#scene #situation10{
	background-position:-1935px top;
	}

/*hover*/
#scene #situation01:hover{
	background-position:0 -338px;
	}
#scene #situation02:hover{
	background-position:-215px -338px;
	}

#scene #situation03:hover{
	background-position:-430px -338px;
	}

#scene #situation04:hover{
	background-position:-645px -338px;
	}

#scene #situation05:hover{
	background-position:-860px -338px;
	}

#scene #situation06:hover{
	background-position:-1075px -338px;
	}

#scene #situation07:hover{
	background-position:-1290px -338px;
	}

#scene #situation08:hover{
	background-position:-1505px -338px;
	}

#scene #situation09:hover{
	background-position:-1720px -338px;
	}

#scene #situation10:hover{
	background-position:-1935px -338px;
	}

/*———————————–
　bnn_cp
———————————–*/
.bnn_cp {
	padding: 10px 0 50px;
	text-align: center;
	clear: both;
}
.bnn_cp a {
	display: inline-block;
	background: #fff;
}
.bnn_cp img.sp {
	display: none;
}
.bnn_cp a:hover img {
	opacity: 0.8;
}

/*----------------------------------------------------------------------------------------------------
	Modal
---------------------------------------------------------------------------------------------------- */
.modal-content{
	margin:auto;
	padding:0;
	z-index:700000;
	clear:both;
	display: none;
	position: fixed;
	right: 0;
	left: 0;
	top:0;
	bottom: 0;
	width: 940px;
	height: 328px;
	}

.modal-out{
	position:fixed;
	display:none;
	z-index:600000;
	text-align:center;
	top:0;
	margin: auto;
	left: 0;
	right: 0;
	}

.modal-overlay{
	z-index:500000;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background: url(../../2019/images/20190620/modal_bg.png) center top repeat-y;
	background-size: 100% auto;
	}

.modal-out h3{
	padding: 17px 0 64px 0;
  	}

 .modal-out .con1 h3 img{
	 width: 583px;
	 height: auto;
	 margin: auto;
  	}

 .modal-out .con2 h3 img{
	 width: 587px;
	 height: auto;
	 margin: auto;
  	}

 .modal-out dl{
	 width: 300px;
	 height: 198px;
	 display: inline-block;
	 vertical-align: top;
 	}

 .modal-out dt{
	 width: 100%;
	 height: 133px;
	 text-indent: 100%;
	 white-space: nowrap;
	 overflow: hidden;
 	}

 .modal-out .buy_01 dt{
	 background: url(../../2019/images/20190620/modal_product_01.png) center top no-repeat;
 	}

 .modal-out .buy_02 dt{
	 background: url(../../2019/images/20190620/modal_product_02.png) center top no-repeat;
 	}

 .modal-out .buy_03 dt{
	 background: url(../../2019/images/20190620/modal_product_03.png) center top no-repeat;
 	}

 .modal-out  dd a{
	 display: block;
	 background: url(../../2019/images/20190620/modal_buy_btn.png) center top no-repeat;
	 width: 272px;
	 height: 65px;
	 text-indent: 100%;
	 white-space: nowrap;
	 overflow: hidden;
 	}

 .modal-out  dd a:hover{
	opacity: 0.8;
	}


/* Close-btn */
.btn-close{
	text-align: right;
	z-index: 100000000000;
	position: absolute;
	top:0px;
	right: 0px;
	}

.btn-close img{
	width: 72px;
	height: auto;
	text-align: right;
	margin: 0 0 20px 0;
	}

.btn-close:hover{
	opacity:0.8;
	cursor: pointer;
	}


#cp_banner_content {
	background: url(/-/Media/com/zi/202006/top/images/banner-bg.jpg) repeat-y center top;
	padding: 50px 0 0;
	position: relative;
	z-index: 5;
}
#cp_banner_content + #about {
	margin-top: -7px;
}
#cp_banner {
	background: url(/-/Media/com/zi/202006/top/images/banner.jpg) no-repeat center center;
	background-size: contain;
	display: block;
	height: 350px;
	margin: auto;
	overflow: hidden;
	text-indent: -999em;
	width: 960px;
}
#cp_banner:hover {
	opacity: 0.9;
}
#cp_banner span {
	display: none;
}
.dazn {
  padding: 50px 0 0;

}
.dazn__box {
  max-width: 960px;
  background: #000;
  padding: 50px 0;
  margin: auto;
  text-align: center;
}
.dazn h2 img {
  margin: auto;
}
.dazn_btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 30px;
}
.dazn_btn {
  margin: 0 10px;
}

@media screen and (min-width: 769px) {
  .pcnone{
    display:none;
  }
  .spnone{
    display:block;
  }
  .dazn_btn:hover img {
    opacity: .8;
  }

  #about .top_bnr .sp {
	  display: none;
  }
  #about .top_bnr a:hover img {
	  opacity: 0.8;
  }
}

/*----------------------------------------------------------------------------------------------------
	Smartphone
---------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	#zi {
		background: url(https://jp.rohto.com/-/Media/com/zi/2018/images/sp/bg.jpg) repeat-y center top #082fa6;
		background-size: 100% auto;
		}

.pcnone{
	display:block;
  }
  .spnone{
    display:none;
    }


	/*———————————–
	 Navigation
	———————————–*/
	#zi-Navi{
		min-width: 100%;
		height:0;
		padding-top:17%;
		}

	#navi{
		width: 100%;
		min-width: 100%;
		top:0;
		position: absolute;
		height: 0;
		background:url(/-/Media/com/zi/202006/top/images/sp/navi.jpg) no-repeat;
		background-size: 100% auto;
		padding-top:17%;
		}

	#navi ul {
		width: 100%;
		height: auto;
		padding-top:17%;
		position: absolute;
		top:0;
		}


	#navi li {
		position: absolute;
		top:0;
		width: 50%;
		padding-top:17%;
		}

	#navi li:nth-child(2) {
		left: 50%;
		}
	/*#navi li:nth-child(3) {
		left:66.6666%;
		}*/

	#navi ul li a {
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left: 0!important;
		margin: 0;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		}

	#navi ul li a:hover{
		background-image:none!important;
		width: 100%;
		height: 100%;
		}


	/*———————————–
	 Main
	———————————–*/
	/*---main---*/
	#zi #main{
		background-image:url(/-/Media/com/zi/20240907/images/sp/main_bg.jpg);
		background-size: 100% auto;
		height: 0px;
		/* padding-top: 95%; */
		padding-top: 104%;
		position: relative;
		}

	#main-in{
		width: 100%;
		position: absolute;
		top:0;
		height: 0px;
		padding-top: 143.75%;
		}

/* 	#main h1{
		background-image: url(/-/Media/com/zi/20230327/images/sp/main_copy.png);
		background-size: 100% auto;
		width:93%;
		height: 0;
		padding-top:33%;
		position: absolute;
		top:-12%;
		left:4.53%;
		} */
		#main h1 {
			display: none;
		}





	/*———————————–
	 About
	———————————–*/
	#about{
		padding: 7.03% 0 0 0;
		background: none;
		}
	#about .top_bnr{
		width: 93.75%;
		}
	#about .top_bnr .pc{
		display: none;
		}
	#about h2 img{
		width:29.375%;
		height:auto;
		}

	#about h3 img{
		width:77.03%;
		height:auto;
		margin:2.968% auto 3.906% auto;
		}

	/*---Lineup---*/
	#lineup{
		width:93.75%;
		padding: 5.46% 0 17.4% 0;
		background-size: 12px auto,12px auto,12px auto,12px auto;
		margin-top: 8%;
		}

	#product_b,
	#product_pro,
	#product_a{
		width: 90%;
		margin: auto;
		}


	/*---Product_b---*/
	#product_b{
		background:url(https://jp.rohto.com/-/Media/com/zi/2018/images/sp/dot_line_l.gif) repeat-x center bottom;
		background-size:2px auto;
		padding:0 0 11.29% 0;
		margin-bottom: 0;
		position: relative;
		}

	.bg{
		background:url(https://jp.rohto.com/-/Media/com/zi/2018/images/sp/about_refresh_bg.png) no-repeat center top;
		background-size: 100% auto;
		width: 100%;
		}

	#product_b h4 img{
		width: 72.22%;
		height: auto;
		margin: 0 auto 5% auto;
		}

	#product_b .product-in{
		background: url(/-/Media/com/zi/20230327/images/about_product_image_b.png) no-repeat 36.39% top;
		background-size: 60.74% auto;
		width: 100%;
		padding: 49.8% 0 0 0 ;
		float:none;
		margin: auto;
		}

	#product_b .name{
		padding: 0 0 0 0 ;
		}

	#product_b .name img{
		width:19.4%;
		margin: auto;
		margin-left: 48%;
		}

	#product_b .effect{
		background-size: 100% auto;
		width: 51.85%;
		height: 0;
		padding-top: 4.81%;
		margin: 2.77% auto 4.07% auto;
		}

	#product_b .level{
		background-image: url(https://jp.rohto.com/-/Media/com/zi/2018/images/sp/about_product_level_8.png);
		width: 90.74%;
		background-size:100% auto;
		padding-top: 11%;
		height: 0;
		margin: 0 auto 5.74% auto;
		}

	#product_b ul{
		width:100%;
		float:none;
		}

	#product_b ul li{
		width:100%;
		height: 0;
		background-position: center top;
		}

	#product_b_01{
		background-image: url(https://jp.rohto.com/-/Media/com/zi/2018/images/sp/about_refresh_01.png);
		background-size: 82.96% auto;
		padding-top: 17.77%;
		margin:0 auto 4.07% auto;
		}

	#product_b_02{
		background-image: url(https://jp.rohto.com/-/Media/com/zi/2018/images/sp/about_refresh_02.png);
		background-size: 93.5% auto;
		padding-top: 17.96%;
		margin-bottom: 2.777%;
		}

	#product_b_03{
		background-image: url(/-/Media/com/zi/2020/images/sp/about_refresh_03.png);
		background-size: 88.33% auto;
		padding-top: 56.111%;
		}

	#product_b .btn-detail{
		margin:0 0 0 0;
		display: none;
		}

	#product_b .btn-detail_sp{
		display: block;
		}

	/*---Product_pro---*/
	#product_pro{
		background:url(https://jp.rohto.com/-/Media/com/zi/2018/images/sp/dot_line_l.gif) repeat-x center bottom;
		background-size:2px auto;
		float: none;
		padding:5.925% 0 14.25% 0;
		}

	#product_pro h4 img{
		width: 86.6%;
		margin:0 auto 4.62% auto;
		}

	#product_pro .product-in{
		background: url(/-/Media/com/zi/20230327/images/about_product_image_pro.png) no-repeat 36.39% top;
		background-size: 58.333% auto;
		width: 100%;
		padding: 50% 0 0 0 ;
		}

	#product_pro .name img{
		width: 22.2%;
		margin: 0px auto 0 46%;
		}

	#product_pro .copy img{
		width: 76.29%;
		margin: 1.85% auto 2.77% auto;
		}

	#product_pro .effect{
		background-size: 100% auto;
		width: 65.185%;
		height: 0;
		padding-top: 9%;
		margin: 2.77% auto 4.62% auto;
		}

	#product_pro .level,
	#product_a .level{
		background-image: url(https://jp.rohto.com/-/Media/com/zi/2018/images/sp/about_product_level_8-plus.png);
		background-size: 100% auto;
		width: 90.74%;
		height: 0;
		padding-top: 10%;
		margin: 7.96% auto 5.92% auto;
		}


	/*---Product_a---*/
	#product_a{
		background: none;
		float:none;
		padding:7.59% 0 0 0;
		}

	#product_a h4 img{
		width: 90.185%;
		margin: 0 auto 5% auto;
		}

	#product_a .product-in{
		background: url(/-/Media/com/zi/20230327/images/about_product_image_a.png) no-repeat 36.39% top;
		background-size: 58.18% auto;
		width: 100%;
		padding: 49.8% 0 0 0 ;
		float:none;
		}

	#product_a .name img{
		width: 28.8%;
		margin: 0px auto 0 43%;
		}

	#product_a .copy img{
		width: 90%;
		margin: 1.11% auto 4.07% auto;
		}

	#product_a .effect{
		background-size: 100% auto;
		width: 64.8%;
		height: 0;
		padding-top: 4.81%;
		margin: 4% auto 5% auto;
		}

	#product_a .level{
		margin-top: 5%;
		margin-bottom: 2.96%
		}

	#product_a .contact {
		margin: 3% auto 6%;
	}

	#product_a .contact img{
		width: 90.74%;
		margin:2.777% auto 0 auto ;
		}

	.text{
		text-align: left;
		width: 90.74%;
		margin: auto;
		}


	/*---Detail-Btn---*/
	#product_pro .btn-detail,
	#product_a .btn-detail{
		padding:0;
		margin:0 auto 0 auto;
		}

	#product_b .btn-detail_sp a,
	.btn-detail a{
		display: block;
		background:url(https://jp.rohto.com/-/Media/com/zi/2018/images/sp/btn_detail.png) no-repeat;
		background-size: 100% auto;
		width: 82.03%;
		height: 0;
		padding-top: 10%;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		margin: 6.851% auto 0 auto;
		}

	.btn-detail a:hover{
		background-position: 0 0;
		}

	/*---Annotation---*/
	ul.annotation{
		padding:4.2% 0 0% 0;
		}

	ul.annotation li{
		font-size: 65%;
		display: block;
		padding: 0;
		-webkit-transform: skewX(0deg);
		transform: skewX(0deg);
		}


	/*———————————–
	 Scene
	———————————–*/
	/*---Situation---*/
	#scene{
		padding-top:12%;
		background: url(https://jp.rohto.com/-/Media/com/zi/2018/images/sp/scene_bg.png) no-repeat center bottom;
		background-size: 100% auto;
		}

	#scene h2 img{
		width:95.74%;
		height:auto;
		}

	#scene h3 img{
		width:88.28%;
		height:auto;
		margin:-3.75% auto 4.84% auto;
		}

	#scene #situation{
		width:84.375%;
		height:auto;
		padding:0 0 13.43% 0;
		}

	#scene #situation li{
		width:47.2%;
		padding-top:64.444%;
		margin:0 0 5.18% 0;
		height: 0;
		background-image:url(https://jp.rohto.com/-/Media/com/zi/2018/images/sp/situation.png);
		background-size: 100% auto;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		display:block;
		}

	#scene #situation li#situation04,
	#scene #situation li#situation08,
	#scene #situation li#situation10{
		margin:0 0 5.18% 0;
		}

	#scene #situation li#situation01,
	#scene #situation li#situation03,
	#scene #situation li#situation05,
	#scene #situation li#situation07,
	#scene #situation li#situation09{
		margin:0 5% 5.18% 0;
		float:left;
		}

	#scene #situation01,
	#scene #situation01:hover{
		background-position: 0 0;
		}

	#scene #situation02,
	#scene #situation02:hover{
		background-position: 0 10.526316%;
		}

	#scene #situation03,
	#scene #situation03:hover{
		background-position: 0 21.052632%;
		}

	#scene #situation04,
	#scene #situation04:hover{
		background-position: 0 31.578947%;
		}

	#scene #situation05,
	#scene #situation05:hover{
		background-position: 0 42.105263%;
		}

	#scene #situation06,
	#scene #situation06:hover{
		background-position: 0 52.631579%;
		}

	#scene #situation07,
	#scene #situation07:hover{
		background-position: 0 63.157895%;
		}

	#scene #situation08,
	#scene #situation08:hover{
		background-position: 0 73.684211%;
		}

	#scene #situation09,
	#scene #situation09:hover{
		background-position: 0 84.210526%;
		}

	#scene #situation10,
	#scene #situation10:hover{
		background-position: 0 94.736842%;
		}

	/*hover*/
	#scene #situation01.hover{
		background-position: 0 5.263158%;
		}
	#scene #situation02.hover{
		background-position: 0 15.789474%;
		}

	#scene #situation03.hover{
		background-position: 0 26.315789%;
		}

	#scene #situation04.hover{
		background-position: 0 36.842105%;
		}

	#scene #situation05.hover{
		background-position: 0 47.368421%;
		}

	#scene #situation06.hover{
		background-position: 0 57.894737%;
		}

	#scene #situation07.hover{
		background-position: 0 68.421053%;
		}

	#scene #situation08.hover{
		background-position: 0 78.947368%;
		}

	#scene #situation09.hover{
		background-position: 0 89.473684%;
		}

	#scene #situation10.hover{
		background-position: 0 100%;
		}

	#scene #situation:after{
		content: ".";
		display: block;
		height: 0;
		font-size:0;
		clear: both;
		visibility:hidden;
		}

	/*———————————–
　bnn_cp
	———————————–*/
	.bnn_cp {
		width: 93.75%;
		padding: 3% 0 8%;
		margin: 0 auto;
		text-align: center;
		clear: both;
	}
	.bnn_cp img.pc {
		display: none;
	}
	.bnn_cp img.sp {
		display: block;
	}
	.bnn_cp a:hover img {
		opacity: 1;
	}

	/*———————————–
	 Modal
	———————————–*/
	.modal-content{
		width: 94.66%;
		height: 0;
		padding-top: 58.2%;
		position: fixed !important;
		position: absolute;
		top: 30%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		}

	.modal-overlay{
		background: url(../../2019/images/20190620/modal_bg_sp.png) center top repeat-y;
		}

	.modal-out h3{
		position: absolute;
		padding: 0;
		top:24.74%;
	  	}

	 .modal-out .con1 h3 img{
		 width: 88.49%;
	  	}

	 .modal-out .con2 h3 img{
		 width: 88.87%;
	  	}

	 .modal-out dl{
		 width: 33%;
		 height: 0;
		 padding-top: 30%;
		 position: absolute;
		 top:51.25%;
	 	}

	 .modal-out dt{
		 position: absolute;
		 top:0;
		 width: 100%;
		 height: 0;
		 padding-top: 64.7%;
		 text-indent: 100%;
		 white-space: nowrap;
		 overflow: hidden;
	 	}


	 .modal-out .buy_01{
		 left: 0;
	 }

	 .modal-out .buy_02{
		 left: 33%;
	 }

	 .modal-out .buy_03{
		 left: 66%;
	 }

	 .modal-out .buy_01 dt{
		 background: url(../../2019/images/20190620/modal_product_01_sp.png) center top no-repeat;
		 background-size: 55.69% auto;
	 	}

	 .modal-out .buy_02 dt{
		 background: url(../../2019/images/20190620/modal_product_02_sp.png) center top no-repeat;
		 background-size: 100% auto;
	 	}

	 .modal-out .buy_03 dt{
		 background: url(../../2019/images/20190620/modal_product_03_sp.png) center top no-repeat;
		 background-size: 76.28% auto;
	 	}

	 .modal-out  dd a{
		 display: block;
		 background: url(../../2019/images/20190620/modal_buy_btn_sp.png) center top no-repeat;
		 background-size: 100% auto;
		 width: 100%;
		 height: 0;
		 padding-top: 34.9%;
		 position: absolute;
		 bottom: 0;
	 	}

	 .modal-out  dd a:hover{
		opacity: 1.0;
		}



	.btn-close{
		position: absolute;
		top:0;
		right: 0;
		width: 9.868%;
		}

	.btn-close img{
		width: 100%;
		margin: 0 0 0 0;
		}

	.btn-close:hover{
		opacity:1.0;
		}


	#cp_banner_content {
		background: none;
		padding: 20px 0 0;
	}
	#cp_banner_content + #about {
		margin-top: 0;
	}
	#cp_banner {
		background: url(/-/Media/com/zi/202006/top/images/sp/banner.jpg) no-repeat center center;
		background-size: contain;
		height: auto;
		text-indent: -999em;
		text-align: left;
		width: 93.75%;
	}
	#cp_banner:before {
		content: "";
		display: block;
		padding-bottom: 66.6666%;
		width: 100%;
	}
	#cp_banner:hover {
		opacity: 1;
  }
  .dazn {
    width: 93.75%;
    margin: auto;
    padding-top: 20px;
  }
  .dazn h2 {
    margin-bottom: 10px;
  }
  .dazn__box {
    padding: 30px 10px 20px;
  }
  .dazn_btns {
    display: block;
    margin-top: 20px;
  }
  .dazn_btn {
    display: inline-block;
    margin: 10px auto 0;
  }


}


/*----------------------------------------------------------------------------------------------------
	SP　Landscape
---------------------------------------------------------------------------------------------------- */
@media screen and (max-width:768px) and (orientation:landscape) {
	.modal-content{
		width: 50%;
		padding-top: 25%;
		top: 50%;
		}

}