Skip to content

sora / sanitary-net

Go to a project
Commit a61921d1 by o.kimura
Options

ジェイティップスソース取り込み・メニュー制御・リンク付加

parent 074d9991
Expand all
Inline Side-by-side
Showing with 4145 additions and 294 deletions
utsukushitoilet/cn_s/css/style.css
......@@ -158,3 +158,169 @@
}
}
/* 2020.2.19 update */
.showcase {
position: relative;
height: 640px;
background: url(/utsukushitoilet/images/main_visual0.jpg) no-repeat top center;
background-size: cover;
}
.inner-showcase {
position: relative;
height: 100%;
}
.inner-showcase .menu_box {
position: absolute;
left: 0;
right: 0;
bottom: -2.5em;
margin: auto;
}
.inner-showcase .menu_box .header_nav,
.inner-showcase .menu_box .latest {
box-shadow: 0 0 1.5em 0 rgba(0,0,0,.3);
}
.inner-showcase .menu_box .manage a {
color: #e9573e;
}
.inner-showcase .menu_box .manage a::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E');
}
.inner-showcase .header_nav li:first-child {
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
}
.inner-showcase .header_nav li {
border-color: #ccc;
}
.showcase_phrase {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.showcase_phrase img {
display: block;
width: 100%;
}
#situation {
padding-top: 0;
margin-top: 8em;
background: none;
}
@media screen and (max-width:640px){
.showcase {
height: 100vw;
}
.showcase_phrase {
width: 90%;
margin: auto;
}
#situation {
margin-top: 20vw;
}
}
#owner > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#owner h2 {
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
line-height: 1.2em;
}
.owner_menu {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3em;
}
.owner_menu li {
display: block;
width: 23.8%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
.owner_menu li a {
display: block;
padding: 8px;
border: solid 2px #f5b5aa;
text-align: center;
font-weight: bold;
color: #e9573e;
}
.owner_menu li p {
margin-top: 1em;
text-align: left;
}
.inner-showcase .menu_box .latest b {
display: block;
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
text-align: center;
font-size: 14px;
color: #fff;
}
.header_flxpc .latest a {
padding: 2.532em 4em 2.532em 6em;
}
.inner-showcase .menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #e9573e;
color: #fff;
}
.inner-showcase .menu_box .manage a::before {
content: none;
}
.inner-showcase .menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
br.sp{
display: none;
}
@media screen and (max-width:640px){
.inner-showcase .menu_box .latest b {
font-size: 2.5vw;
}
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
}
.owner_menu li {
display: block;
width: 100%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
br.sp{
display: block;
}
}
utsukushitoilet/cn_s/howtouse/css/style.css 0 → 100644
@charset "UTF-8";
h2.line {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 24px;
font-weight: bold;
padding: 36px 0;
position: relative;
margin-top: 60px;
line-height: 1.4;
clear: both;
}
h2.line span {
color: #e9573e;
font-weight: normal;
font-size: 40px;
position: absolute;
left: 0;
right: 0;
top: -32px;
}
h3 {
font-weight: bold;
font-size: 20px;
}
#kind ul {
padding: 50px 0;
}
#kind ul:after {
content: "";
display: block;
clear: both;
}
#kind li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
background-color: #f7f6f2;
}
#kind li:first-child {
margin-left: 0;
}
#kind li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind li img {
width: 100%;
}
#kind li p {
padding: 20px;
margin-bottom: 10px;
}
#kind li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
}
#use .left {
text-align: left;
padding: 40px 0;
}
#use h3 {
text-align: left;
padding-bottom: 10px;
}
#use ul {
margin-bottom: 20px;
}
#use li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
margin-bottom: 40px;
}
#use li:first-child {
margin-left: 0;
}
#use li img {
width: 100%;
}
#operation img {
border: solid 1px #ccc;
}
.bisection {
margin-top: 40px;
margin-bottom: 100px;
}
.bisection02 {
margin-top: 40px;
margin-bottom: 40px;
}
.bisection:after {
content: "";
display: block;
clear: both;
}
.bisection p,
.bisection .lft {
float: left;
width: 48%;
text-align: left;
}
.bisection div {
float: right;
width: 50%;
}
.bisection div img {
width: 100%;
max-width: 472px;
border: solid 1px #ccc;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
h2.line {
margin-left: 4%;
margin-right: 4%;
}
#kind li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind li:first-child {
margin-left: auto;
}
#kind li:after {
content: "";
display: block;
clear: both;
}
#kind li span {
padding: 6px;
font-size: inherit;
}
#kind li strong {
position: absolute;
display: block;
}
#use h3 {
margin: 0 4%;
}
#use li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 30px auto;
}
#use li p {
margin: 10px 0;
}
#use li:first-child {
margin-left: auto;
}
#use li h3 {
margin: 0;
}
.bisection {
margin: 0 4%;
}
.bisection p,
.bisection .lft {
float: none;
width: inherit;
padding: 20px 0;
margin-bottom: 0;
}
.bisection div {
float: none;
width: inherit;
margin-bottom: 40px;
}
.bisection div img {
max-width: 578px;
}
}
#use .box{
overflow: hidden;
}
#use .left{
padding: 0;
text-align: left;
}
#use .left02{
text-align: left;
padding: 40px 0;
width: 76%;
float: left;
}
#use .right {
text-align: left;
padding: 40px 0;
margin-top: 40px;
margin-left: auto;
width: 18%;
padding: 10px;
border: 1px solid #e1e0db;
text-align: center;
}
#use .right span{
display: block;
margin-top: 10px;
}
@media screen and (max-width:640px){
#use .left02{
width: 92%;
float: none;
margin: auto;
}
#use .left.01{
width: 100%;
float: none;
}
#use .right{
width: 90%;
margin: auto;
margin-top: 0;
margin-bottom: 40px;
}
}
#kind ul#toilet li {
display: block;
width: 48.4%;
float: left;
text-align: left;
margin-right: 3%;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul#toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul#toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul#toilet li img {
width: 100%;
}
#kind ul#toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul#toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul#toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul#toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul#toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul#toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul#toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul#toilet li strong {
position: absolute;
display: block;
}
}
/* 20200109updata */
#use span.point_txt01{
display: block;
padding-left: 1em;
text-indent: -1em;
}
#use .txt_list {
list-style: disc;
margin-bottom: 0;
}
#use .txt_list li {
display: list-item;
width: auto;
margin: 0 0 0 1.2em;
float: none;
}
utsukushitoilet/cn_s/howtouse/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>洗手间用具的使用方法 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="howtouse">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="use" class="first">
<div class="block">
<h1><span>日本洗手间情况</span>洗手间内器具的使用方法</h1>
<p>日本的洗手间里有很多功能。<br>
这里跟各位介绍「马桶的洗净方法」「温水洗净便座的使用方法」「拟音装置」「紧急求助铃」的使用方法。</p>
<h2 class="line"><span>01</span>坐便器的冲水方法</h2>
<div class="box"><div class="left02">
根据马桶设备型态，各有不同的洗净方式。<br>
<ul class="txt_list">
<li>水箱型马桶：旋转储水箱旁的冲水把洗净。</li>
<li>无水箱型马桶：按压冲水把洗净。</li>
<li>其他型态：利用设置在墙壁上的按钮或是非接触型感应器(手遮)来洗净，也有设置在遥控器内的形式。</li>
</ul>
最新型的智能马桶是当使用者结束后站立时自动洗净。
</div>
<p class="right"><img src="/utsukushitoilet/howtouse/images/3609.gif" alt=""><span>这个符号是冲洗马桶的按钮</span></p>
</div>
<h3>冲水手柄等的位置</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use01_img01.jpg" alt=""><p>旋转冲水把</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img02.jpg" alt=""><p>按压冲水把</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img03.jpg" alt=""><p>按压冲水把</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>按下按键</h3><img src="/utsukushitoilet/howtouse/images/use01_img04.jpg" alt=""><p>往下按冲水按钮</p></li>
<li><h3>遥控器</h3><img src="/utsukushitoilet/howtouse/images/use01_img06.jpg" alt=""><p>请按压温水洗净便座遥控器里的某个按键</p></li>
<li><h3>冲水感应装置</h3><img src="/utsukushitoilet/howtouse/images/use01_img05.jpg" alt=""><p>手遮感应器</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="box"><img src="/utsukushitoilet/howtouse/images/point_img01.png" alt="">
<ul class="txt_list">
<li>为了带给下一位使用者舒适感，请在使用完毕后立即冲水洗净。</li>
<li>日本的厕纸是溶水性的，请擦拭完毕后直接丢入马桶内冲掉。<br>
* 厕所内会随水冲掉的厕纸，只限于厕所卫生纸以及可溶性面纸。<br>
* 生理用品或是其他以外的物品，请丢弃在厕所内设置的垃圾桶。</li>
</ul>
</div><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>智能坐便器的使用方法</h2>
<p class="left bisection02">使用智能坐便器的时候，请操作坐便器侧面的按钮。<br />
如果坐便器侧面没有的话，请操作墙壁上的遥感按钮。<br />
按钮所表示的意思，如下所示。</p>
<h3>操作部的位置</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use02_img01.jpg" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>操作部插图的意思</h3>
<ul id="operation">
<li><img src="/utsukushitoilet/howtouse/images/use02_img03.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img04.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>遮音装置</h2>
<div class="bisection">
<div class="lft">
在日本的公共洗手间里，为了掩盖如厕时的排泄声音，设置了发出流水声的『厕所拟音装置』。根据不同型态有下列不同操作。拟音装置的音乐会在一定时间后自动停止。
<ul class="txt_list">
<li>感应型：伸手感应立即发出音乐。</li>
<li>按键型：按下按钮立即发出音乐。</li>
<li>自动型：一进厕所感应有人立即发出音乐。</li>
</ul>
</div>
<div><img src="images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>紧急呼叫按钮</h2>
<div class="bisection">
<p>洗净操作按键附近设置了如照片所示的紧急求助铃。如果在洗手间内感觉身体不适的话请按铃，相关人员会即刻赶来。除了紧急情况以外请不要按此铃。</p>
<div><img src="/utsukushitoilet/howtouse/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/cn_s/index.html
......@@ -47,22 +47,47 @@ $(document).ready(function(){
<body id="top">
<script type="text/javascript" >
<!--
includeHead('h1');
includeHead2('h1');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<div class="showcase">
<div class="inner-showcase">
<div class="showcase_phrase">
<img src="/utsukushitoilet/images/mv_phrase.svg" alt="Welcome to Japan Toilet">
</div>
<div class="menu_box">
<div class="header_flxpc">
<ul class="header_nav">
<li>日本的洗手间情况</li>
<li class="situation"><a href="/utsukushitoilet/cn_s/situation/">有洗手间的地方</a></li>
<li class="sign"><a href="/utsukushitoilet/cn_s/sign/">洗手间指南</a></li>
<li class="type"><a href="/utsukushitoilet/cn_s/type/">洗手间种类和使用方法</a></li>
<li class="howtouse"><a href="/utsukushitoilet/cn_s/howtouse/">洗手间用具的使用方法</a></li>
</ul>
<div class="latest">
<b>洗手间的资讯</b>
<a href="/utsukushitoilet/cn_s/latest/">日本最新的洗手间</a>
</div>
</div>
</div>
</div>
</div>
<section id="situation">
<div>
<h2>日本的洗手间情况</h2>
<p>在旅行的时候，难免遇到一些尴尬的事情。比如寻找洗手间等。<br />
日本的大多数洗手间都十分干净卫生。而且基本可以免费使用，并配备有卫生纸。</p>
<p>欢迎光临日本！！<br>
在旅行途中上洗手间时会遇到困扰的事吗？<br>
日本的洗手间提供各位免费舒适贴心清洁的卫生空间。<br>
在此网站中，集齐日本洗手间的相关资讯。<br>
希望在日本的旅途中，共同体验日本洗手间的舒适感！</p>
<ul>
<li><div><img src="../images/situation01.jpg" alt=""><strong>洗手间位置</strong><p>旅游的目的地在很多地方都设有洗手间。洗手间配备有各种设施。</p><span class="button"><a href="situation/">详细情况</a></span></div></li>
<li><div><img src="../images/situation02.jpg" alt=""><strong>洗手间指南</strong><p>在日本，表示洗手间的语言很多。</p><span class="button"><a href="situation/#guide">详情</a></span></div></li>
<li><div><img src="../images/situation02.jpg" alt=""><strong>洗手间指南</strong><p>在日本，表示洗手间的语言很多。</p><span class="button"><a href="sign/">详情</a></span></div></li>
<li><div><img src="../images/situation03.jpg" alt=""><strong>洗手间种类和使用方法</strong><p>日本洗手间主要有和式洗手间，洋式洗手间，多功能洗手间三类。其使用方法也各不相同。</p><span class="button"><a href="type/">详细情况</a></span></div></li>
<li><div><img src="../images/situation04.jpg" alt=""><strong>洗手间用具的使用方法</strong><p>根据坐便器设备的不同，冲水的方法也各异。比如有上完厕所站起来就自动冲洗的坐便器。</p><span class="button"><a href="type/#use">详细情况</a></span></div></li>
<li><div><img src="../images/situation04.jpg" alt=""><strong>洗手间用具的使用方法</strong><p>根据坐便器设备的不同，冲水的方法也各异。比如有上完厕所站起来就自动冲洗的坐便器。</p><span class="button"><a href="howtouse/">详细情况</a></span></div></li>
</ul><div class="clear"></div>
</div>
</section>
......
utsukushitoilet/cn_s/latest/02.html
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta http-equiv="refresh" content="0;URL=/utsukushitoilet/cn_s/latest/">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
......
utsukushitoilet/cn_s/latest/css/style.css
......@@ -422,3 +422,11 @@ p, .second .block > p {
}
#_01,
#_02,
#_03,
#_04 {
padding-top: 5px;
margin-top: -5px;
}
utsukushitoilet/cn_s/latest/images/latest01_graph01.gif
utsukushitoilet/cn_s/latest/images/latest01_graph01.gif

12.6 KB | W: | H:

utsukushitoilet/cn_s/latest/images/latest01_graph01.gif

11.7 KB | W: | H:

utsukushitoilet/cn_s/latest/images/latest01_graph01.gif
utsukushitoilet/cn_s/latest/images/latest01_graph01.gif
utsukushitoilet/cn_s/latest/images/latest01_graph01.gif
utsukushitoilet/cn_s/latest/images/latest01_graph01.gif
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/cn_s/latest/index.html
......@@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>01.智能坐便器：日本最新的洗手间 - NIPPON UTSUKUSHI TOILET</title>
<title>日本最新的洗手间 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
......@@ -34,7 +34,7 @@ $(document).ready(function(){
<body class="second">
<script type="text/javascript" >
<!--
includeHead('div');
includeHead2('div');
//-->
</script>
<noscript>
......@@ -47,9 +47,9 @@ includeHead('div');
追求安心・安全・舒适的同时，不断创新中。</p>
<ul>
<li><span>01</span><a href="./#_01">智能坐便器</a></li>
<li><span>02</span><a href="02.html#_02">超级节水智能坐便器</a></li>
<li><span>03</span><a href="02.html#_03">节水装置</a></li>
<li><span>04</span><a href="02.html#_04">放置婴幼儿设备</a></li>
<li><span>02</span><a href="./#_02">超级节水智能坐便器</a></li>
<li><span>03</span><a href="./#_03">节水装置</a></li>
<li><span>04</span><a href="./#_04">放置婴幼儿设备</a></li>
</ul><div class="clear"></div>
</div>
</section>
......@@ -65,8 +65,8 @@ includeHead('div');
</ul><div class="clear"></div>
<div id="spread">
<div>
<h3>日本普及率：77.5％（2015年数据）</h3>
<p>根据平成25年“内阁府消费动向调查”，家庭普及率约77.5％，基本和电脑（78.0%）的普及率一样。</p>
<h3>在日本的普及率：80.4%<small>(2019年3月现在)</small></h3>
<p>根据日本内阁府的调查结果显示世代普及率年年增加约为80%，比电脑的普及率更高。</p>
</div>
<div><img src="./images/latest01_graph01.gif" alt=""></div>
</div><div class="clear"></div>
......@@ -99,13 +99,62 @@ includeHead('div');
</div>
</div>
</section>
<section id="_02">
<div class="block">
<h2 class="line"><span>02</span>超级节水智能坐便器</h2>
<p>根据近几年趋势，采用漩动力技术的超级节水智能坐便器越来越有人气。<br />
注重坐便器本身的简约典雅，追求释放空间的自由感等，各公司争相开发各具特色的超级节水智能坐便器。</p>
<ul>
<li><strong>品牌</strong><div>外观</div><span>商品名</span></li>
<li><strong>asahi卫陶</strong><div><img src="../../latest/images/latest02_img01.jpg" alt=""></div><span>one-piece</span></li>
<li><strong>JANIS工业</strong><div><img src="../../latest/images/latest02_img02.jpg" alt=""></div><span>smartclean</span></li>
<li><strong>TOTO</strong><div><img src="../../latest/images/latest02_img03.jpg" alt=""></div><span>诺锐斯特・间</span></li>
<li><strong>松下</strong><div><img src="../../latest/images/latest02_img04.jpg" alt=""></div><span>A La Uno</span></li>
<li><strong>LIXIL</strong><div><img src="../../latest/images/latest02_img05.jpg" alt=""></div><span>Satis</span></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_03">
<div class="block">
<h2 class="line"><span>03</span>节水装置</h2>
<h3>节水型坐便器</h3>
<p>日本洋式坐便器一次的洗净用水量（大）在6升以下。<br />
而且冲水时水流沿着池壁呈旋涡状，既达到节水目标，又有效清洗。</p>
<ul>
<li><img src="../../latest/images/latest03_img01.jpg" alt=""></li>
<li><img src="../../latest/images/latest03_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<ul id="small">
<li><h3>自动冲洗小便器</h3><p>考虑到儿童，设计了儿童容易接近，便池较低的小便器。</p></li>
<li><img src="../../latest/images/latest03_img03.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>洗手台（自动水龙头，自动洗手液，烘手机）</h3>
<ul id="auto">
<li><img src="../../latest/images/latest03_img04.jpg" alt=""><p>基本都是自动出水装置。</p></li>
<li><img src="../../latest/images/latest03_img05.jpg" alt=""><p>商业设施等地还会有自动洗手液。</p></li>
<li><img src="../../latest/images/latest03_img06.jpg" alt=""><p>配备有用风力吹走水滴的烘手机。</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_04">
<div class="block">
<h2 class="line"><span>04</span>放置婴幼儿设备</h2>
<p>在商业设施呀交通设施等地，婴幼儿安全带・婴幼儿坐席等考虑到婴幼儿的装置，方便给婴幼儿更换衣服时使用的躺板等装置在不断增加中。<br />
带着孩子一起出游的家庭也可以安心放心地使用洗手间。</p>
<ul>
<li><img src="../../latest/images/latest04_img01.jpg" alt=""><p>给婴幼儿更换尿布的地方</p></li>
<li><img src="../../latest/images/latest04_img02.jpg" alt=""><p>带有婴幼儿的人们在上厕所时，可安置婴幼儿的座椅。</p></li>
<li><img src="../../latest/images/latest04_img03.jpg" alt=""><p>更换儿童衣服或纸尿布时使用的薄型板材。</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section class="latest_menu foot_menu">
<div class="block">
<ul>
<li><span>01</span><a href="./#_01">智能坐便器</a></li>
<li><span>02</span><a href="02.html#_02">超级节水智能坐便器</a></li>
<li><span>03</span><a href="02.html#_03">节水装置</a></li>
<li><span>04</span><a href="02.html#_04">放置婴幼儿设备</a></li>
<li><span>02</span><a href="./#_02">超级节水智能坐便器</a></li>
<li><span>03</span><a href="./#_03">节水装置</a></li>
<li><span>04</span><a href="./#_04">放置婴幼儿设备</a></li>
</ul><div class="clear"></div>
</div>
</section>
......
utsukushitoilet/cn_s/shared/js/common_parts.js
/* 2020.2.19 update */
function includeHead2(tag) {
document.write(
'<div class="overlay"><img src="/utsukushitoilet/shared/images/main_visual0_002.png" width="100%" height="auto" class="back_img"></div>\n'+
'<header class="pht">\n'+
'<div id="head_area" class="head_area">\n'+
'<'+tag+' class="title_area"><a href="/utsukushitoilet/cn_s/"><img src="/utsukushitoilet/shared/images/logo.svg" alt="JAPAN TOILET INFORMATION"><span class="logo_line"><img src="/utsukushitoilet/shared/images/logo_line.svg" alt="NIPPON UTSUKUSHI TOILET"></span></a></'+tag+'>\n'+
'<div class="lang_menu">\n'+
'<div id="lang">\n'+
'<select>\n'+
'<option value="">LANGUAGE</option>\n'+
'<option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
'<option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
'<option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
'<option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
'<option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
'</select>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'<nav>\n'+
'<div class="inner-toggle">\n'+
'<a href="" id="toggle_btn" class="toggle_btn">\n'+
'<div class="toggle"><span></span></div>\n'+
'</a>\n'+
'</div>\n'+
'<div id="toggle_menu" class="toggle_menu">\n'+
'<div class="inner-menu">\n'+
'<div class="menu_box">\n'+
'<div class="header_flxpc">\n'+
'<ul class="header_nav">\n'+
'<li>日本的洗手间情况</li>\n'+
'<li class="situation"><a href="/utsukushitoilet/cn_s/situation/">有洗手间的地方</a></li>\n'+
'<li class="sign"><a href="/utsukushitoilet/cn_s/sign/">洗手间指南</a></li>\n'+
'<li class="type"><a href="/utsukushitoilet/cn_s/type/">洗手间种类和使用方法</a></li>\n'+
'<li class="howtouse"><a href="/utsukushitoilet/cn_s/howtouse/">洗手间用具的使用方法</a></li>\n'+
'</ul>\n'+
'<div class="latest"><b>洗手间的资讯</b><a href="/utsukushitoilet/cn_s/latest/">日本最新的洗手间</a></div>\n'+
'</div>\n'+
'</div>\n'+
'<div class="search">\n'+
'<gcse:searchbox-only></gcse:searchbox-only>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'</nav>\n'+
'</header>\n'
);
}
/* 共通 ページメニュー　ヘッダ */
function includeHead(tag) {
document.write(
......@@ -53,25 +103,30 @@ document.write(
'</div>\n'+
'<footer>\n'+
'<div id="footer_div1">\n'+
'<div id="footer_menu1">\n'+
'<div id="footer_menu1" class="list_wt">\n'+
'<strong>日本的洗手间情况</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/cn_s/situation/">洗手间位置</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/situation/#guide">洗手间指南</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/sign/">洗手间指南</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/type/">洗手间种类和使用方法</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/type/#use">洗手间用具的使用方法</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/howtouse/">洗手间用具的使用方法</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_menu2">\n'+
'<div id="footer_menu2" class="list_wt">\n'+
'<strong>日本最新的洗手间</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/cn_s/latest/#_01">智能坐便器</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/latest/02.html#_02">超级节水智能坐便器</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/latest/02.html#_03">节水装置</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/latest/02.html#_04">放置婴幼儿设备</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/latest/#_02">超级节水智能坐便器</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/latest/#_03">节水装置</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/latest/#_04">放置婴幼儿设备</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div class="clear"></div>\n'+
'<div id="footer_banner">\n'+
'<ul>\n'+
' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="TOILET NAVIGATION"></a></li>\n'+
' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="Japan Tourism Agency"></a></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<div id="copyright">\n'+
'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+
......
utsukushitoilet/cn_s/sign/css/style.css 0 → 100644
@charset "UTF-8";
#facility ul {
padding: 50px 0;
}
#facility ul:after {
content: "";
display: block;
clear: both;
}
#facility li {
display: inline-block;
width: 16.6%;
float: left;
text-align: center;
}
#facility li div {
width: 99%;
}
#facility li strong {
display: block;
}
#facility li img {
width: 100%;
}
#cleaning {
border: solid 1px #ec6b55;
position: relative;
text-align: left;
padding: 20px;
background: url(/utsukushitoilet/situation/images/bg_cleaning.gif) no-repeat 94% center;
background-size: 224px auto;
margin-top: 50px;
margin-bottom: 50px;
}
#cleaning:after {
content: "";
display: block;
position: absolute;
z-index:-1;
top: 3px;
left: 3px;
right: -5px;
bottom: -5px;
border: 1px solid #dcdcdc;
}
#cleaning h2 {
font-size: 20px;
font-weight: bold;
}
#cleaning p {
width: 66%;
}
#guide h2 {
background-color: #7f7f7f;
color: #fff;
width: 110px;
margin-bottom: 0;
margin-top: 20px;
}
#guide .guide_eg {
border: solid 1px #ccc;
padding: 30px 10px 20px 10px;
margin-bottom: 20px;
position: relative;
}
#guide #letter li {
display: inline-block;
width: 17%;
padding-bottom: 20px;
}
#guide #letter li img {
max-width: 116px;
width: 100%;
}
#guide #letter li:before {
content: "-";
color: #ed638a;
font-weight: bold;
margin-right: 6px;
}
#guide ul#sign {
display: block;
height: 115px;
}
#guide #sign li {
display: block;
position: absolute;
background-color: #f4f4f4;
padding: 14px 0;
width: 106px;
border-radius: 5px;
}
#guide #sign li img {
width: 58%;
}
#guide #sign li:first-child {
left: 30px;
}
#guide #sign li:nth-child(2) {
left: 152px;
}
#guide #sign li:nth-child(3) {
width: 185px;
left: 274px;
height: 77px;
}
#guide #sign li:nth-child(3) img {
width: 95%;
margin-top: 12px;
}
#guide #sign li:nth-child(4) {
width: 272px;
left: 476px;
height: 77px;
background-color: #666;
}
#guide #sign li:nth-child(4) img {
width: 67%;
margin-top: 12px;
}
#guide #sign li:nth-child(5) {
left: 152px;
}
#guide #sign li:nth-child(6) {
left: 274px;
}
#guide #sign li:nth-child(7) {
left: 396px;
}
#guide #sign li:nth-child(8) {
left: 518px;
}
#guide #sign li:nth-child(9) {
left: 641px;
width: 186px;
}
#guide #sign li:nth-child(9) img {
width: 90%;
}
#guide #sign li:nth-child(10) {
right: 28px;
clear: both;
}
#guide ul#sign:after {
content: "";
display: block;
clear: both;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
#facility li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto;
}
#facility li:after {
content: "";
display: block;
clear: both;
}
#facility li strong {
position: absolute;
display: block;
text-shadow: 1px 1px 2px #fff;
}
#facility li img {
display: block;
width: 30%;
float: left;
margin-right: 1px;
}
#facility li img:first-child {
margin-left: 39%;
}
#cleaning {
background-position: center 95%;
width: 86%;
padding-bottom: 200px;
}
#cleaning p {
width: initial;
margin: 0 auto;
}
#guide h2 {
margin-left: 4%;
}
#guide .guide_eg {
margin-left: 4%;
margin-right: 4%;
}
#guide #letter li {
width: 48%;
}
#guide ul#sign {
height: inherit;
}
#guide #sign li {
position: inherit;
display: inline-block;
width: 42%;
margin-bottom: 12px;
pading: 4% 0;
}
#guide #sign li:nth-child(3), #guide #sign li:nth-child(4), #guide #sign li:nth-child(9) {
width: 85.2%;
height: auto;
}
#guide #sign li:nth-child(3) img, #guide #sign li:nth-child(4) img {
margin-top: 0;
}
#guide #sign li:nth-child(10) {
margin-left: 7.4%;
float: left;
}
}
utsukushitoilet/cn_s/sign/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>洗手间指南 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#facility li strong").autoHeight();
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="sign">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="guide" class="first">
<div class="block">
<h1><span>日本的洗手间情况</span>洗手间指南</h1>
<p>在日本，表示洗手间的语言很多。有直接表示的，也有间接表示的。根据场所・TPO不同，表达方法也不一样。<br />
比如在吃饭的时候，比起直接说“卫生间”，用“化妆室”表达更优雅。为防止尴尬，提前了解各种洗手间的图案吧。<br />
表示洗手间的代表图案</p>
<h2>文字</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="../../situation/images/letter01.gif" alt="お手洗い"></li>
<li><img src="../../situation/images/letter02.gif" alt="お手洗"></li>
<li><img src="../../situation/images/letter03.gif" alt="御手洗"></li>
<li><img src="../../situation/images/letter04.gif" alt="洗面所"></li>
<li><img src="../../situation/images/letter05.gif" alt="化粧室"></li>
<li><img src="../../situation/images/letter06.gif" alt="Toilet"></li>
<li><img src="../../situation/images/letter07.gif" alt="lavatory"></li>
<li><img src="../../situation/images/letter08.gif" alt="W.C"></li>
<li><img src="../../situation/images/letter09.gif" alt="RestRoom"></li>
<li><img src="../../situation/images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>サイン</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="../../situation/images/sign01.gif" alt=""></li>
<li><img src="../../situation/images/sign02.gif" alt=""></li>
<li><img src="../../situation/images/sign03.gif" alt="TOILET"></li>
<li><img src="../../situation/images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/cn_s/situation/index.html
......@@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>有洗手间的地方・洗手间指南 - NIPPON UTSUKUSHI TOILET</title>
<title>有洗手间的地方 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
......@@ -31,10 +31,10 @@ $(document).ready(function(){
</script>
<!-- //google analytics -->
</head>
<body class="second">
<body class="second" id="situation">
<script type="text/javascript" >
<!--
includeHead('div');
includeHead2('div');
//-->
</script>
<noscript>
......@@ -71,38 +71,6 @@ includeHead('div');
如果您发现它了，请查看下一天内打扫检查的次数吧。</p>
</div>
</section>
<section id="guide">
<div class="block">
<h1><span>日本的洗手间情况</span>洗手间指南</h1>
<p>在日本，表示洗手间的语言很多。有直接表示的，也有间接表示的。根据场所・TPO不同，表达方法也不一样。<br />
比如在吃饭的时候，比起直接说“卫生间”，用“化妆室”表达更优雅。为防止尴尬，提前了解各种洗手间的图案吧。<br />
表示洗手间的代表图案</p>
<h2>文字</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="../../situation/images/letter01.gif" alt="お手洗い"></li>
<li><img src="../../situation/images/letter02.gif" alt="お手洗"></li>
<li><img src="../../situation/images/letter03.gif" alt="御手洗"></li>
<li><img src="../../situation/images/letter04.gif" alt="洗面所"></li>
<li><img src="../../situation/images/letter05.gif" alt="化粧室"></li>
<li><img src="../../situation/images/letter06.gif" alt="Toilet"></li>
<li><img src="../../situation/images/letter07.gif" alt="lavatory"></li>
<li><img src="../../situation/images/letter08.gif" alt="W.C"></li>
<li><img src="../../situation/images/letter09.gif" alt="RestRoom"></li>
<li><img src="../../situation/images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>サイン</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="../../situation/images/sign01.gif" alt=""></li>
<li><img src="../../situation/images/sign02.gif" alt=""></li>
<li><img src="../../situation/images/sign03.gif" alt="TOILET"></li>
<li><img src="../../situation/images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
......
utsukushitoilet/cn_s/type/css/style.css
......@@ -24,6 +24,9 @@ h3 {
font-weight: bold;
font-size: 20px;
}
#kind{
margin-bottom: 70px;
}
#kind ul {
padding: 50px 0;
}
......@@ -195,3 +198,83 @@ h3 {
}
#kind ul.toilet {
display: flex;
align-items: stretch;
justify-content: space-between;
padding: 20px 0;
}
#kind ul.toilet li {
display: block;
width: 48.4%;
float: none;
text-align: left;
margin-right: 0;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul.toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul.toilet:after {
content: none;
}
#kind ul.toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul.toilet li img {
width: 100%;
}
#kind ul.toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul.toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul.toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul.toilet {
display: block;
}
#kind ul.toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul.toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul.toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul.toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul.toilet li strong {
position: absolute;
display: block;
}
}
utsukushitoilet/cn_s/type/index.html
......@@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>洗手间种类和使用方法・洗手间用具的使用方法 - NIPPON UTSUKUSHI TOILET</title>
<title>洗手间种类和使用方法 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
......@@ -13,13 +13,6 @@
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
......@@ -33,10 +26,10 @@ $(document).ready(function(){
</script>
<!-- //google analytics -->
</head>
<body class="second">
<body class="second" id="type">
<script type="text/javascript" >
<!--
includeHead('div');
includeHead2('div');
//-->
</script>
<noscript>
......@@ -45,13 +38,21 @@ includeHead('div');
<section id="kind" class="first">
<div class="block">
<h1><span>日本的洗手间情况</span>洗手间种类及使用方法</h1>
<p>日本洗手间主要有和式洗手间，洋式洗手间，多功能洗手间三类。根据情况不同类型也会有所差异。<br />
在旅游景点多和式洗手间，但根据游客要求，洋式洗手间也在增加中。 </p>
<h2 class="line"><span>01</span>交通设施・商业设施等的洗手间</h2>
<ul id="toilet">
<p>有和式、洋式和多功能三种型态的洗手间。<br>
目前积极将和式形态改装为方便使用的洋式型态。</p>
<h2 class="line"><span>01</span>公共洗手间</h2>
<ul class="toilet 01">
<li><h3>和式洗手间</h3><img src="../../type/images/type01_washiki01.jpg" alt=""><p>日本自古便使用的跨式便器。公共洗手间内多设置这类和式便器。</p><div><span>使用方法</span><img src="./images/type01_washiki02.gif" alt=""></div></li>
<li><h3>洋式洗手间</h3><img src="../../type/images/type01_yoshiki01.jpg" alt=""><p>现在最普及的洗手间。</p><div><span>使用方法</span><img src="./images/type01_yoshiki02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>多功能洗手间</h3><img src="../../type/images/type01_takino01.jpg" alt=""><p>残障人士，人工膀胱持有者，带婴幼儿的人等优先使用的设计的较宽敞的洗手间。当然老年人等一般人也可以使用。</p><div><span>表示多功能洗手间的图案</span><img src="../../type/images/type01_takino02.gif" alt=""></div></li>
<li><h3>小便池</h3><img src="images/type01_urinal.jpg" alt=""><p>不需用手碰触洗净按键就会自动洗净，十分舒适卫生。</p><div><span>冲水阀和自动洗净的使用方法</span><img src="../../type/images/type01_urinal02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>自动水龙头</h3><img src="images/type01_autofaucet.jpg" alt=""><p>不需用手碰触手龙头，肥皂泡和水就会自动跑出，卫生舒适。</p><div><span>自动水龙头和自动给皂机的使用方法</span><img src="images/type01_autofaucet02.gif" alt=""></div></li>
<li><h3>烘手机</h3><img src="images/type01_handdryer.jpg" alt=""><p>是洗完手后利用风吹干方式的装置。<br>将手靠近出风口自动出风。</p>
<div><span>简易型和长型的使用方法</span><img src="images/type01_handdryer02.gif" alt=""></div></li>
</ul>
<h2 class="line"><span>02</span>宾馆・客房内的洗手间</h2>
<ul>
......@@ -62,67 +63,11 @@ includeHead('div');
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>使用宾馆浴室时的注意点<br />
宾馆浴室一般配有淋浴器，但请在浴缸内使用。<br />
同时，使用时请将浴室门关闭。不然会导致火警警报器误判误响。<br />
淋浴时，请关好浴室门。配有防水帘的情况下，请拉好帘子，以防弄湿马坐便器周边。</p><div class="clear"></div>
</div>
</div>
</section>
<section id="use">
<div class="block">
<h1><span>日本洗手间情况</span>洗手间内器具的使用方法</h1>
<h2 class="line"><span>01</span>坐便器的冲水方法</h2>
<p class="left">根据坐便器设备的不同，冲水的方法也各异。<br />
水箱式坐便器的话，冲水时请转动水箱旁的手柄。<br />
公共洗手间或和式洗手间等没有水箱的便器的话，冲洗时请拉下便器背面的手柄。<br />
其他还有使用设置在墙壁上的按钮，手柄，非接触型感应器(手遮）等冲洗的，还有遥感控制的。<br />
最先进的坐便器则是，你使用完站起来变自动冲洗的智能坐便器。</p>
<h3>冲水手柄等的位置</h3>
<ul>
<li><img src="../../type/images/use01_img01.jpg" alt=""><p>转 或者 拧 冲水手柄</p></li>
<li><img src="../../type/images/use01_img02.jpg" alt=""><p>将手柄往下拉</p></li>
<li><img src="../../type/images/use01_img03.jpg" alt=""><p>将手柄往下拉</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>冲水按钮</h3><img src="../../type/images/use01_img04.jpg" alt=""><p>往下按冲水按钮</p></li>
<li><h3>冲水感应装置</h3><img src="../../type/images/use01_img05.jpg" alt=""><p>将手罩在感应处前方</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>在日本，使用过的卫生纸请仍在便器中，随排泄物一起冲走。<br />
※可以一起冲水的，仅限卫生纸・之前说过的可溶性纸巾。<br />
卫生巾或其他杂物，请仍在卫生间内的垃圾箱里。<br />
离开前请确认有没有垃圾遗漏，为了下一位使用者，请一定冲洗干净，保持清洁。</p><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>智能坐便器的使用方法</h2>
<p class="left">使用智能坐便器的时候，请操作坐便器侧面的按钮。<br />
如果坐便器侧面没有的话，请操作墙壁上的遥感按钮。<br />
按钮所表示的意思，如下所示。</p>
<h3>操作部的位置</h3>
<ul>
<li><img src="../../type/images/use02_img01.jpg" alt=""></li>
<li><img src="../../type/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>操作部插图的意思</h3>
<ul id="operation">
<li><img src="../../type/images/use02_img03.gif" alt=""></li>
<li><img src="../../type/images/use02_img04.gif" alt=""></li>
<li><img src="../../type/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>遮音装置</h2>
<div class="bisection">
<p>在日本，为了掩盖上厕所时发出的声音，一般设置有可发出流水声的“遮音装置”。有一进入隔间边自动播音的装置，也有用手遮下感应处，或按下按钮播音的装置。和冲水按钮功能并不一样，不要按错了。</p>
<div><img src="./images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>紧急呼叫按钮</h2>
<div class="bisection">
<p>冲洗按钮的旁边，一般有紧急呼叫按钮。身体不舒服的紧急情况时用的按钮，所以带有“呼出”文字的按钮，请注意在紧急情况外不要按。</p>
<div><img src="../../type/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
<p><img src="/utsukushitoilet/type/images/point_img01.png" alt="">
<span>&lt;利用饭店浴室时的注意事项&gt;</span>
<span class="point_txt01">* 整体浴室内配有莲蓬头，但只限于浴缸内使用。</span>
<span class="point_txt01">* 如果浴室里附有防水浴帘的话，为了避免弄湿马桶周围，请拉起浴帘使用。</span>
<span class="point_txt01">* 如果打开浴室的门来使用的话，容易误引火灾警报器，请务必关上浴室的门来使用。</span></p><div class="clear"></div>
</div>
</div>
</section>
......
utsukushitoilet/cn_t/css/style.css
......@@ -158,3 +158,169 @@
}
}
/* 2020.2.19 update */
.showcase {
position: relative;
height: 640px;
background: url(/utsukushitoilet/images/main_visual0.jpg) no-repeat top center;
background-size: cover;
}
.inner-showcase {
position: relative;
height: 100%;
}
.inner-showcase .menu_box {
position: absolute;
left: 0;
right: 0;
bottom: -2.5em;
margin: auto;
}
.inner-showcase .menu_box .header_nav,
.inner-showcase .menu_box .latest {
box-shadow: 0 0 1.5em 0 rgba(0,0,0,.3);
}
.inner-showcase .menu_box .manage a {
color: #e9573e;
}
.inner-showcase .menu_box .manage a::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E');
}
.inner-showcase .header_nav li:first-child {
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
}
.inner-showcase .header_nav li {
border-color: #ccc;
}
.showcase_phrase {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.showcase_phrase img {
display: block;
width: 100%;
}
#situation {
padding-top: 0;
margin-top: 8em;
background: none;
}
@media screen and (max-width:640px){
.showcase {
height: 100vw;
}
.showcase_phrase {
width: 90%;
margin: auto;
}
#situation {
margin-top: 20vw;
}
}
#owner > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#owner h2 {
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
line-height: 1.2em;
}
.owner_menu {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3em;
}
.owner_menu li {
display: block;
width: 23.8%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
.owner_menu li a {
display: block;
padding: 8px;
border: solid 2px #f5b5aa;
text-align: center;
font-weight: bold;
color: #e9573e;
}
.owner_menu li p {
margin-top: 1em;
text-align: left;
}
.inner-showcase .menu_box .latest b {
display: block;
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
text-align: center;
font-size: 14px;
color: #fff;
}
.header_flxpc .latest a {
padding: 2.532em 4em 2.532em 6em;
}
.inner-showcase .menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #e9573e;
color: #fff;
}
.inner-showcase .menu_box .manage a::before {
content: none;
}
.inner-showcase .menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
br.sp{
display: none;
}
@media screen and (max-width:640px){
.inner-showcase .menu_box .latest b {
font-size: 2.5vw;
}
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
}
.owner_menu li {
display: block;
width: 100%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
br.sp{
display: block;
}
}
utsukushitoilet/cn_t/howtouse/css/style.css 0 → 100644
@charset "UTF-8";
h2.line {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 24px;
font-weight: bold;
padding: 36px 0;
position: relative;
margin-top: 60px;
line-height: 1.4;
clear: both;
}
h2.line span {
color: #e9573e;
font-weight: normal;
font-size: 40px;
position: absolute;
left: 0;
right: 0;
top: -32px;
}
h3 {
font-weight: bold;
font-size: 20px;
}
#kind{
margin-bottom: 70px;
}
#kind ul {
padding: 50px 0;
}
#kind ul:after {
content: "";
display: block;
clear: both;
}
#kind li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
background-color: #f7f6f2;
}
#kind li:first-child {
margin-left: 0;
}
#kind li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind li img {
width: 100%;
}
#kind li p {
padding: 20px;
margin-bottom: 10px;
}
#kind li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
}
#use .left {
text-align: left;
padding: 40px 0;
}
#use h3 {
text-align: left;
padding-bottom: 10px;
}
#use ul {
margin-bottom: 20px;
}
#use li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
margin-bottom: 40px;
}
#use li:first-child {
margin-left: 0;
}
#use li img {
width: 100%;
}
#operation img {
border: solid 1px #ccc;
}
.bisection {
margin-top: 40px;
margin-bottom: 100px;
}
.bisection02 {
margin-top: 40px;
margin-bottom: 40px;
}
.bisection:after {
content: "";
display: block;
clear: both;
}
.bisection p,
.bisection .lft {
float: left;
width: 48%;
text-align: left;
}
.bisection div {
float: right;
width: 50%;
}
.bisection div img {
width: 100%;
max-width: 472px;
border: solid 1px #ccc;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
h2.line {
margin-left: 4%;
margin-right: 4%;
}
#kind li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind li:first-child {
margin-left: auto;
}
#kind li:after {
content: "";
display: block;
clear: both;
}
#kind li span {
padding: 6px;
font-size: inherit;
}
#kind li strong {
position: absolute;
display: block;
}
#use h3 {
margin: 0 4%;
}
#use li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 30px auto;
}
#use li p {
margin: 10px 0;
}
#use li:first-child {
margin-left: auto;
}
#use li h3 {
margin: 0;
}
.bisection {
margin: 0 4%;
}
.bisection p,
.bisection .lft {
float: none;
width: inherit;
padding: 20px 0;
margin-bottom: 0;
}
.bisection div {
float: none;
width: inherit;
margin-bottom: 40px;
}
.bisection div img {
max-width: 578px;
}
}
#use .box{
overflow: hidden;
}
#use .left{
padding: 0;
text-align: left;
}
#use .left02{
text-align: left;
padding: 40px 0;
width: 76%;
float: left;
}
#use .right {
text-align: left;
padding: 40px 0;
margin-top: 40px;
margin-left: auto;
width: 18%;
padding: 10px;
border: 1px solid #e1e0db;
text-align: center;
}
#use .right span{
display: block;
margin-top: 10px;
}
@media screen and (max-width:640px){
#use .left02{
width: 92%;
float: none;
margin: auto;
}
#use .left.01{
width: 100%;
float: none;
}
#use .right{
width: 90%;
margin: auto;
margin-top: 0;
margin-bottom: 40px;
}
}
#kind ul#toilet li {
display: block;
width: 48.4%;
float: left;
text-align: left;
margin-right: 3%;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul#toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul#toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul#toilet li img {
width: 100%;
}
#kind ul#toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul#toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul#toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul#toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul#toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul#toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul#toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul#toilet li strong {
position: absolute;
display: block;
}
}
/* 20200109updata */
#use span.point_txt01{
display: block;
padding-left: 1em;
text-indent: -1em;
}
#use .txt_list {
list-style: disc;
margin-bottom: 0;
}
#use .txt_list li {
display: list-item;
width: auto;
margin: 0 0 0 1.2em;
float: none;
}
utsukushitoilet/cn_t/howtouse/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>洗手間種類和使用方法・洗手間用具的使用方法 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="howtouse">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="use" class="first">
<div class="block">
<h1><span>日本洗手間情況</span>洗手間內器具的使用方法</h1>
<p>日本的洗手間裡有很多功能。<br>
這裡跟各位介紹「馬桶的洗淨方法」「溫水洗淨便座的使用方法」「擬音裝置」「緊急求助鈴」的使用方法。</p>
<h2 class="line"><span>01</span>馬桶的沖水方法</h2>
<div class="box"><div class="left02">
根據馬桶設備型態，各有不同的洗淨方式。
<ul class="txt_list">
<li>水箱型馬桶：旋轉儲水箱旁的沖水把洗淨。</li>
<li>無水箱型馬桶：按壓沖水把洗淨。</li>
<li>其他型態：利用設置在牆壁上的按鈕或是非接觸型感應器(手遮)來洗淨，也有設置在遙控器內的形式。</li>
</ul>
最新型的智能馬桶是當使用者結束後站立時自動洗淨。
</div>
<p class="right"><img src="/utsukushitoilet/howtouse/images/3609.gif" alt=""><span>這個符號是沖洗馬桶的按鈕</span></p>
</div>
<h3>沖水手柄等的位置</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use01_img01.jpg" alt=""><p>旋轉沖水把</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img02.jpg" alt=""><p>按壓沖水把</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img03.jpg" alt=""><p>按壓沖水把</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>冲水按钮</h3><img src="/utsukushitoilet/howtouse/images/use01_img04.jpg" alt=""><p>按下按鍵</p></li>
<li><h3>遙控器</h3><img src="/utsukushitoilet/howtouse/images/use01_img06.jpg" alt=""><p>請按壓溫水洗淨便座遙控器裡的某個按鍵</p></li>
<li><h3>沖水感應裝置</h3><img src="/utsukushitoilet/howtouse/images/use01_img05.jpg" alt=""><p>手遮感應器</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="box"><img src="/utsukushitoilet/howtouse/images/point_img01.png" alt="">
<ul class="txt_list">
<li>為了帶給下一位使用者舒適感，請在使用完畢後立即沖水洗淨。</li>
<li>日本的廁紙是溶水性的，請擦拭完畢後直接丟入馬桶內沖掉。<br>
* 廁所內會隨水沖掉的廁紙，只限於廁所衛生紙以及可溶性面紙。<br>
* 生理用品或是其他以外的物品，請丟棄在廁所內設置的垃圾桶。</li>
</ul>
</div><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>溫水洗淨便座的使用方法</h2>
<p class="left bisection02">使用溫水洗淨便座的時候，請操作坐馬桶側面的按鈕。<br />
如果側面沒有的話，請操作牆壁上的遙感按鈕。<br />
按鈕所表示的意思，如下所示。</p>
<h3>操作部的位置</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use02_img01.jpg" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>操作部插圖的意思</h3>
<ul id="operation">
<li><img src="/utsukushitoilet/howtouse/images/use02_img03.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img04.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>遮音裝置</h2>
<div class="bisection">
<div class="lft">在日本的公共洗手間裡，為了掩蓋如廁時的排泄聲音，設置了發出流水聲的『廁所擬音裝置』。根據不同型態有下列不同操作。擬音裝置的音樂會在一定時間後自動停止。
<ul class="txt_list">
<li>感應型：伸手感應立即發出音樂。</li>
<li>按鍵型：按下按鈕立即發出音樂。</li>
<li>自動型：一進廁所感應有人立即發出音樂。</li>
</ul>
</div>
<div><img src="./images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>緊急呼叫按鈕</h2>
<div class="bisection">
<p>洗淨操作按鍵附近設置了如照片所示的緊急求助鈴。如果在洗手間內感覺身體不適的話請按鈴，相關人員會即刻趕來。除了緊急情況以外請不要按此鈴。</p>
<div><img src="/utsukushitoilet/howtouse/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/cn_t/index.html
......@@ -47,21 +47,47 @@ $(document).ready(function(){
<body id="top">
<script type="text/javascript" >
<!--
includeHead('h1');
includeHead2('h1');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<div class="showcase">
<div class="inner-showcase">
<div class="showcase_phrase">
<img src="/utsukushitoilet/images/mv_phrase.svg" alt="Welcome to Japan Toilet">
</div>
<div class="menu_box">
<div class="header_flxpc">
<ul class="header_nav">
<li>日本的洗手間情況</li>
<li class="situation"><a href="/utsukushitoilet/cn_t/situation/">有洗手間的地方</a></li>
<li class="sign"><a href="/utsukushitoilet/cn_t/sign/">洗手間指南</a></li>
<li class="type"><a href="/utsukushitoilet/cn_t/type/">洗手間種類和使用方法</a></li>
<li class="howtouse"><a href="/utsukushitoilet/cn_t/howtouse/">洗手間用具的使用方法</a></li>
</ul>
<div class="latest">
<b>洗手間的資訊</b>
<a href="/utsukushitoilet/cn_t/latest/">日本最新的洗手間</a>
</div>
</div>
</div>
</div>
</div>
<section id="situation">
<div>
<h2>日本的洗手間情況</h2>
<p>在旅行的時候，難免遇到一些尷尬的事情。比如尋找洗手間等。日本的大多數洗手間都十分乾淨衛生。而且基本可以免費使用，並配備有衛生紙。</p>
<p>歡迎蒞臨日本！！<br>
在旅行途中上洗手間時會遇到困擾的事嗎？<br>
日本的洗手間提供各位免費舒適貼心清潔的衛生空間。<br>
在此網站中，集齊日本洗手間的相關資訊。<br>
希望在日本的旅途中，共同體驗日本洗手間的舒適感！</p>
<ul>
<li><div><img src="../images/situation01.jpg" alt=""><strong>洗手間位置</strong><p>旅遊目的地在很多地方都設有洗手間。洗手間配備有各種設施。</p><span class="button"><a href="situation/">詳細情況</a></span></div></li>
<li><div><img src="../images/situation02.jpg" alt=""><strong>洗手間指南</strong><p>在日本，表示洗手間的語言有很多。</p><span class="button"><a href="situation/#guide">詳情</a></span></div></li>
<li><div><img src="../images/situation02.jpg" alt=""><strong>洗手間指南</strong><p>在日本，表示洗手間的語言有很多。</p><span class="button"><a href="sign/">詳情</a></span></div></li>
<li><div><img src="../images/situation03.jpg" alt=""><strong>洗手間種類和使用方法</strong><p>日本洗手間主要有和式洗手間、洋式洗手間、多功能洗手間三類。其使用方法也各不相同。</p><span class="button"><a href="type/">詳細情況</a></span></div></li>
<li><div><img src="../images/situation04.jpg" alt=""><strong>洗手間用具的使用方法</strong><p>根據抽水馬桶設備的不同，沖水的方法也各有不同。比如有上完廁所站起來就自動沖洗的馬桶。</p><span class="button"><a href="type/#use">詳細情況</a></span></div></li>
<li><div><img src="../images/situation04.jpg" alt=""><strong>洗手間用具的使用方法</strong><p>根據抽水馬桶設備的不同，沖水的方法也各有不同。比如有上完廁所站起來就自動沖洗的馬桶。</p><span class="button"><a href="howtouse/">詳細情況</a></span></div></li>
</ul><div class="clear"></div>
</div>
</section>
......
utsukushitoilet/cn_t/latest/02.html
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta http-equiv="refresh" content="0;URL=/utsukushitoilet/cn_t/latest/">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
......
utsukushitoilet/cn_t/latest/css/style.css
......@@ -422,3 +422,11 @@ p, .second .block > p {
}
#_01,
#_02,
#_03,
#_04 {
padding-top: 5px;
margin-top: -5px;
}
utsukushitoilet/cn_t/latest/images/latest01_graph01.gif
utsukushitoilet/cn_t/latest/images/latest01_graph01.gif

12.8 KB | W: | H:

utsukushitoilet/cn_t/latest/images/latest01_graph01.gif

11.8 KB | W: | H:

utsukushitoilet/cn_t/latest/images/latest01_graph01.gif
utsukushitoilet/cn_t/latest/images/latest01_graph01.gif
utsukushitoilet/cn_t/latest/images/latest01_graph01.gif
utsukushitoilet/cn_t/latest/images/latest01_graph01.gif
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/cn_t/latest/index.html
......@@ -31,10 +31,10 @@ $(document).ready(function(){
</script>
<!-- //google analytics -->
</head>
<body class="second">
<body class="second" id="latest">
<script type="text/javascript" >
<!--
includeHead('div');
includeHead2('div');
//-->
</script>
<noscript>
......@@ -48,9 +48,9 @@ includeHead('div');
</p>
<ul>
<li><span>01</span><a href="./#_01">溫水洗淨便座</a></li>
<li><span>02</span><a href="02.html#_02">水壓式坐便器</a></li>
<li><span>03</span><a href="02.html#_03">節水裝置</a></li>
<li><span>04</span><a href="02.html#_04">放置嬰幼兒設備</a></li>
<li><span>02</span><a href="./#_02">水壓式坐便器</a></li>
<li><span>03</span><a href="./#_03">節水裝置</a></li>
<li><span>04</span><a href="./#_04">放置嬰幼兒設備</a></li>
</ul><div class="clear"></div>
</div>
</section>
......@@ -66,8 +66,8 @@ includeHead('div');
</ul><div class="clear"></div>
<div id="spread">
<div>
<h3>日本普及率：77.5％（2015年數據）</h3>
<p>根據平成25年「內閣府消費動向調查」，家庭普及率約77.5％，基本和電腦（78.0%）的普及率一樣。</p>
<h3>在日本的普及率：80.4%<small>(2019年3月現在)</small></h3>
<p>根據日本内閣府的調査結果顯示世代普及率年年增加約為80%，比電腦的普及率更高。</p>
</div>
<div><img src="./images/latest01_graph01.gif" alt=""></div>
</div><div class="clear"></div>
......@@ -100,13 +100,61 @@ includeHead('div');
</div>
</div>
</section>
<section id="_02">
<div class="block">
<h2 class="line"><span>02</span>水壓式坐便器</h2>
<p>根據近幾年趨勢，「水壓式馬桶」越來越有人氣。<br />
著重馬桶本身的設計、可追求自由開放的優雅空間感等，促使各公司爭相開發各具特色的水壓式馬桶。</p>
<ul>
<li><strong>品牌</strong><div>外觀</div><span>商品名</span></li>
<li><strong>asahi衛陶</strong><div><img src="../../latest/images/latest02_img01.jpg" alt=""></div><span>one-piece</span></li>
<li><strong>JANIS工業</strong><div><img src="../../latest/images/latest02_img02.jpg" alt=""></div><span>smartclean</span></li>
<li><strong>TOTO</strong><div><img src="../../latest/images/latest02_img03.jpg" alt=""></div><span>諾銳斯特・間</span></li>
<li><strong>松下</strong><div><img src="../../latest/images/latest02_img04.jpg" alt=""></div><span>A La Uno</span></li>
<li><strong>LIXIL</strong><div><img src="../../latest/images/latest02_img05.jpg" alt=""></div><span>Satis</span></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_03">
<div class="block">
<h2 class="line"><span>03</span>節水裝置</h2>
<h3>節水型馬桶</h3>
<p>日本洋式馬桶一次的洗淨用水量（大）在6升以下。而且沖水時水流沿著池壁呈漩渦狀，既達到節水目標，又有效清洗。</p>
<ul>
<li><img src="../../latest/images/latest03_img01.jpg" alt=""></li>
<li><img src="../../latest/images/latest03_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<ul id="small">
<li><h3>自動沖洗小便器</h3><p>考慮到兒童，設計了兒童容易接近，便池較低的小便器。</p></li>
<li><img src="../../latest/images/latest03_img03.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>洗手台（自動水龍頭，自動洗手液，烘手機）</h3>
<ul id="auto">
<li><img src="../../latest/images/latest03_img04.jpg" alt=""><p>基本都是自動出水裝置。</p></li>
<li><img src="../../latest/images/latest03_img05.jpg" alt=""><p>商業設施等地還會有自動洗手液。</p></li>
<li><img src="../../latest/images/latest03_img06.jpg" alt=""><p>配備有用風力吹走水滴的烘手機。</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_04">
<div class="block">
<h2 class="line"><span>04</span>放置嬰幼兒設備</h2>
<p>在商業設施、交通設施等地，嬰幼兒安全帶、嬰幼兒坐席等考慮到嬰幼兒的裝置，方便給嬰幼兒更換衣服時使用的躺板等裝置在不斷增加中。<br />
帶著孩子一起出遊的家庭也可以安心、放心地使用洗手間。</p>
<ul>
<li><img src="../../latest/images/latest04_img01.jpg" alt=""><p>給嬰幼兒更換尿布的地方</p></li>
<li><img src="../../latest/images/latest04_img02.jpg" alt=""><p>帶有嬰幼兒的人們在上廁所時，可安置嬰幼兒的座椅。</p></li>
<li><img src="../../latest/images/latest04_img03.jpg" alt=""><p>更換兒童衣服或紙尿布時使用的薄型板材。</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section class="latest_menu foot_menu">
<div class="block">
<ul>
<li><span>01</span><a href="./#_01">溫水洗淨便座</a></li>
<li><span>02</span><a href="02.html#_02">水壓式坐便器</a></li>
<li><span>03</span><a href="02.html#_03">節水裝置</a></li>
<li><span>04</span><a href="02.html#_04">放置嬰幼兒設備</a></li>
<li><span>02</span><a href="./#_02">水壓式坐便器</a></li>
<li><span>03</span><a href="./#_03">節水裝置</a></li>
<li><span>04</span><a href="./#_04">放置嬰幼兒設備</a></li>
</ul><div class="clear"></div>
</div>
</section>
......
utsukushitoilet/cn_t/shared/js/common_parts.js
/* 2020.2.19 update */
function includeHead2(tag) {
document.write(
'<div class="overlay"><img src="/utsukushitoilet/shared/images/main_visual0_002.png" width="100%" height="auto" class="back_img"></div>\n'+
'<header class="pht">\n'+
'<div id="head_area" class="head_area">\n'+
'<'+tag+' class="title_area"><a href="/utsukushitoilet/cn_t/"><img src="/utsukushitoilet/shared/images/logo.svg" alt="JAPAN TOILET INFORMATION"><span class="logo_line"><img src="/utsukushitoilet/shared/images/logo_line.svg" alt="NIPPON UTSUKUSHI TOILET"></span></a></'+tag+'>\n'+
'<div class="lang_menu">\n'+
'<div id="lang">\n'+
'<select>\n'+
'<option value="">LANGUAGE</option>\n'+
'<option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
'<option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
'<option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
'<option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
'<option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
'</select>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'<nav>\n'+
'<div class="inner-toggle">\n'+
'<a href="" id="toggle_btn" class="toggle_btn">\n'+
'<div class="toggle"><span></span></div>\n'+
'</a>\n'+
'</div>\n'+
'<div id="toggle_menu" class="toggle_menu">\n'+
'<div class="inner-menu">\n'+
'<div class="menu_box">\n'+
'<div class="header_flxpc">\n'+
'<ul class="header_nav">\n'+
'<li>日本的洗手間情況</li>\n'+
'<li class="situation"><a href="/utsukushitoilet/cn_t/situation/">有洗手間的地方</a></li>\n'+
'<li class="sign"><a href="/utsukushitoilet/cn_t/sign/">洗手間指南</a></li>\n'+
'<li class="type"><a href="/utsukushitoilet/cn_t/type/">洗手間種類和使用方法</a></li>\n'+
'<li class="howtouse"><a href="/utsukushitoilet/cn_t/howtouse/">洗手間用具的使用方法</a></li>\n'+
'</ul>\n'+
'<div class="latest"><b>洗手間的資訊</b><a href="/utsukushitoilet/cn_t/latest/">日本最新的洗手間</a></div>\n'+
'</div>\n'+
'</div>\n'+
'<div class="search">\n'+
'<gcse:searchbox-only></gcse:searchbox-only>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'</nav>\n'+
'</header>\n'
);
}
/* 共通 ページメニュー　ヘッダ */
function includeHead(tag) {
document.write(
......@@ -53,25 +103,30 @@ document.write(
'</div>\n'+
'<footer>\n'+
'<div id="footer_div1">\n'+
'<div id="footer_menu1">\n'+
'<div id="footer_menu1" class="list_wt">\n'+
'<strong>日本的洗手間情況</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/cn_t/situation/">洗手間位置</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/situation//#guide">洗手間指南</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/sign/">洗手間指南</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/type/">洗手間種類和使用方法</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/type/#use">洗手間用具的使用方法</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/howtouse/">洗手間用具的使用方法</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_menu2">\n'+
'<div id="footer_menu2" class="list_wt">\n'+
'<strong>日本最新的洗手間</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/cn_t/latest/#_01">溫水洗淨便座</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/latest/02.html#_02">水壓式坐便器</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/latest/02.html#_03">節水裝置</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/latest/02.html#_04">放置嬰幼兒設備</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/latest/#_02">水壓式坐便器</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/latest/#_03">節水裝置</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/latest/#_04">放置嬰幼兒設備</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div class="clear"></div>\n'+
'<div id="footer_banner">\n'+
'<ul>\n'+
' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="TOILET NAVIGATION"></a></li>\n'+
' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="Japan Tourism Agency"></a></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<div id="copyright">\n'+
'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+
......
utsukushitoilet/cn_t/sign/css/style.css 0 → 100644
@charset "UTF-8";
#facility ul {
padding: 50px 0;
}
#facility ul:after {
content: "";
display: block;
clear: both;
}
#facility li {
display: inline-block;
width: 16.6%;
float: left;
text-align: center;
}
#facility li div {
width: 99%;
}
#facility li strong {
display: block;
}
#facility li img {
width: 100%;
}
#cleaning {
border: solid 1px #ec6b55;
position: relative;
text-align: left;
padding: 20px;
background: url(/utsukushitoilet/situation/images/bg_cleaning.gif) no-repeat 94% center;
background-size: 224px auto;
margin-top: 50px;
margin-bottom: 50px;
}
#cleaning:after {
content: "";
display: block;
position: absolute;
z-index:-1;
top: 3px;
left: 3px;
right: -5px;
bottom: -5px;
border: 1px solid #dcdcdc;
}
#cleaning h2 {
font-size: 20px;
font-weight: bold;
}
#cleaning p {
width: 66%;
}
#guide h2 {
background-color: #7f7f7f;
color: #fff;
width: 110px;
margin-bottom: 0;
margin-top: 20px;
}
#guide .guide_eg {
border: solid 1px #ccc;
padding: 30px 10px 20px 10px;
margin-bottom: 20px;
position: relative;
}
#guide #letter li {
display: inline-block;
width: 17%;
padding-bottom: 20px;
}
#guide #letter li img {
max-width: 116px;
width: 100%;
}
#guide #letter li:before {
content: "-";
color: #ed638a;
font-weight: bold;
margin-right: 6px;
}
#guide ul#sign {
display: block;
height: 115px;
}
#guide #sign li {
display: block;
position: absolute;
background-color: #f4f4f4;
padding: 14px 0;
width: 106px;
border-radius: 5px;
}
#guide #sign li img {
width: 58%;
}
#guide #sign li:first-child {
left: 30px;
}
#guide #sign li:nth-child(2) {
left: 152px;
}
#guide #sign li:nth-child(3) {
width: 185px;
left: 274px;
height: 77px;
}
#guide #sign li:nth-child(3) img {
width: 95%;
margin-top: 12px;
}
#guide #sign li:nth-child(4) {
width: 272px;
left: 476px;
height: 77px;
background-color: #666;
}
#guide #sign li:nth-child(4) img {
width: 67%;
margin-top: 12px;
}
#guide #sign li:nth-child(5) {
left: 152px;
}
#guide #sign li:nth-child(6) {
left: 274px;
}
#guide #sign li:nth-child(7) {
left: 396px;
}
#guide #sign li:nth-child(8) {
left: 518px;
}
#guide #sign li:nth-child(9) {
left: 641px;
width: 186px;
}
#guide #sign li:nth-child(9) img {
width: 90%;
}
#guide #sign li:nth-child(10) {
right: 28px;
clear: both;
}
#guide ul#sign:after {
content: "";
display: block;
clear: both;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
#facility li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto;
}
#facility li:after {
content: "";
display: block;
clear: both;
}
#facility li strong {
position: absolute;
display: block;
text-shadow: 1px 1px 2px #fff;
}
#facility li img {
display: block;
width: 30%;
float: left;
margin-right: 1px;
}
#facility li img:first-child {
margin-left: 39%;
}
#cleaning {
background-position: center 95%;
width: 86%;
padding-bottom: 200px;
}
#cleaning p {
width: initial;
margin: 0 auto;
}
#guide h2 {
margin-left: 4%;
}
#guide .guide_eg {
margin-left: 4%;
margin-right: 4%;
}
#guide #letter li {
width: 48%;
}
#guide ul#sign {
height: inherit;
}
#guide #sign li {
position: inherit;
display: inline-block;
width: 42%;
margin-bottom: 12px;
pading: 4% 0;
}
#guide #sign li:nth-child(3), #guide #sign li:nth-child(4), #guide #sign li:nth-child(9) {
width: 85.2%;
height: auto;
}
#guide #sign li:nth-child(3) img, #guide #sign li:nth-child(4) img {
margin-top: 0;
}
#guide #sign li:nth-child(10) {
margin-left: 7.4%;
float: left;
}
}
utsukushitoilet/cn_t/sign/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>洗手間指南 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#facility li strong").autoHeight();
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="sign">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="guide" class="first">
<div class="block">
<h1><span>日本的洗手間情況</span>洗手間指南</h1>
<p>在日本，表示洗手間的語言很多。有直接表示的，也有間接表示的。根據場所、TPO不同，表達方法也不一樣。<br />
比如在吃飯的時候，比起直接說「廁所」，用「洗手間」表達更優雅。為防止尷尬，請事先瞭解各種洗手間的圖案吧。<br />
表示洗手間的代表圖案</p>
<h2>文字</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="../../situation/images/letter01.gif" alt="お手洗い"></li>
<li><img src="../../situation/images/letter02.gif" alt="お手洗"></li>
<li><img src="../../situation/images/letter03.gif" alt="御手洗"></li>
<li><img src="../../situation/images/letter04.gif" alt="洗面所"></li>
<li><img src="../../situation/images/letter05.gif" alt="化粧室"></li>
<li><img src="../../situation/images/letter06.gif" alt="Toilet"></li>
<li><img src="../../situation/images/letter07.gif" alt="lavatory"></li>
<li><img src="../../situation/images/letter08.gif" alt="W.C"></li>
<li><img src="../../situation/images/letter09.gif" alt="RestRoom"></li>
<li><img src="../../situation/images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>サイン</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="../../situation/images/sign01.gif" alt=""></li>
<li><img src="../../situation/images/sign02.gif" alt=""></li>
<li><img src="../../situation/images/sign03.gif" alt="TOILET"></li>
<li><img src="../../situation/images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/cn_t/situation/index.html
......@@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>有洗手間的地方・洗手間指南 - NIPPON UTSUKUSHI TOILET</title>
<title>有洗手間的地方 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
......@@ -31,10 +31,10 @@ $(document).ready(function(){
</script>
<!-- //google analytics -->
</head>
<body class="second">
<body class="second" id="situation">
<script type="text/javascript" >
<!--
includeHead('div');
includeHead2('div');
//-->
</script>
<noscript>
......@@ -69,38 +69,6 @@ includeHead('div');
如果您發現它了，請查看下一天內打掃檢查的次數吧。</p>
</div>
</section>
<section id="guide">
<div class="block">
<h1><span>日本的洗手間情況</span>洗手間指南</h1>
<p>在日本，表示洗手間的語言很多。有直接表示的，也有間接表示的。根據場所、TPO不同，表達方法也不一樣。<br />
比如在吃飯的時候，比起直接說「廁所」，用「洗手間」表達更優雅。為防止尷尬，請事先瞭解各種洗手間的圖案吧。<br />
表示洗手間的代表圖案</p>
<h2>文字</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="../../situation/images/letter01.gif" alt="お手洗い"></li>
<li><img src="../../situation/images/letter02.gif" alt="お手洗"></li>
<li><img src="../../situation/images/letter03.gif" alt="御手洗"></li>
<li><img src="../../situation/images/letter04.gif" alt="洗面所"></li>
<li><img src="../../situation/images/letter05.gif" alt="化粧室"></li>
<li><img src="../../situation/images/letter06.gif" alt="Toilet"></li>
<li><img src="../../situation/images/letter07.gif" alt="lavatory"></li>
<li><img src="../../situation/images/letter08.gif" alt="W.C"></li>
<li><img src="../../situation/images/letter09.gif" alt="RestRoom"></li>
<li><img src="../../situation/images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>サイン</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="../../situation/images/sign01.gif" alt=""></li>
<li><img src="../../situation/images/sign02.gif" alt=""></li>
<li><img src="../../situation/images/sign03.gif" alt="TOILET"></li>
<li><img src="../../situation/images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
......
utsukushitoilet/cn_t/type/css/style.css
......@@ -24,6 +24,9 @@ h3 {
font-weight: bold;
font-size: 20px;
}
#kind{
margin-bottom: 70px;
}
#kind ul {
padding: 50px 0;
}
......@@ -195,3 +198,83 @@ h3 {
}
#kind ul.toilet {
display: flex;
align-items: stretch;
justify-content: space-between;
padding: 20px 0;
}
#kind ul.toilet li {
display: block;
width: 48.4%;
float: none;
text-align: left;
margin-right: 0;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul.toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul.toilet:after {
content: none;
}
#kind ul.toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul.toilet li img {
width: 100%;
}
#kind ul.toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul.toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul.toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul.toilet {
display: block;
}
#kind ul.toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul.toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul.toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul.toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul.toilet li strong {
position: absolute;
display: block;
}
}
utsukushitoilet/cn_t/type/index.html
......@@ -33,10 +33,10 @@ $(document).ready(function(){
</script>
<!-- //google analytics -->
</head>
<body class="second">
<body class="second" id="type">
<script type="text/javascript" >
<!--
includeHead('div');
includeHead2('div');
//-->
</script>
<noscript>
......@@ -45,13 +45,21 @@ includeHead('div');
<section id="kind" class="first">
<div class="block">
<h1><span>日本的洗手間情況</span>洗手間種類及使用方法</h1>
<p>日本洗手間主要有和式洗手間，洋式洗手間，多功能洗手間三類。根據情況不同類型也會有所差異。<br />
本在旅遊景點多是和式洗手間，但根據遊客要求，洋式洗手間也持續增加中。 </p>
<h2 class="line"><span>01</span>交通設施・商業設施等的洗手間</h2>
<ul id="toilet">
<p>有和式、洋式和多功能三種型態的洗手間。<br>
目前積極將和式形態改裝為方便使用的洋式型態。</p>
<h2 class="line"><span>01</span>公共洗手間</h2>
<ul class="toilet 01">
<li><h3>和式洗手間</h3><img src="../../type/images/type01_washiki01.jpg" alt=""><p>日本自古便使用跨式便器。公共洗手間內多設置這類和式便器。</p><div><span>使用方法</span><img src="./images/type01_washiki02.gif" alt=""></div></li>
<li><h3>洋式洗手間</h3><img src="../../type/images/type01_yoshiki01.jpg" alt=""><p>現在最普及的洗手間。</p><div><span>使用方法</span><img src="./images/type01_yoshiki02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>多功能洗手間</h3><img src="../../type/images/type01_takino01.jpg" alt=""><p>為了殘障人士、人工膀胱持有者，帶嬰幼兒的人等可優先使用而設計的較寬敞的洗手間。當然老年人等一般人也可以使用。</p><div><span>表示多功能洗手間的圖案</span><img src="../../type/images/type01_takino02.gif" alt=""></div></li>
<li><h3>小便池</h3><img src="images/type01_urinal.jpg" alt=""><p>不需用手碰觸洗淨按鍵就會自動洗淨，十分舒適衛生。</p><div><span>沖水閥和自動洗淨的使用方法</span><img src="images/type01_urinal02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>自動水龍頭</h3><img src="images/type01_autofaucet.jpg" alt=""><p>不需用手碰觸手龍頭，肥皂泡和水就會自動跑出，衛生舒適。</p><div><span>自動水龍頭和自動給皂機的使用方法</span><img src="images/type01_autofaucet02.gif" alt=""></div></li>
<li><h3>烘手機</h3><img src="images/type01_handdryer.jpg" alt=""><p>是洗完手後利用風吹乾方式的裝置。<br>將手靠近出風口自動出風。</p>
<div><span>簡易型和長型的使用方法</span><img src="images/type01_handdryer02.gif" alt=""></div></li>
</ul>
<h2 class="line"><span>02</span>賓館・客房內的洗手間</h2>
<ul>
......@@ -62,65 +70,11 @@ includeHead('div');
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>使用賓館浴室時的注意點<br />
賓館浴室一般配有淋浴器，但請在浴缸內使用。<br />
同時，使用時請將浴室門關閉，不然會導致火警警報器誤判誤響。<br />
淋浴時，請關好浴室門。配有防水簾的情況下，請拉好簾子，以防弄濕馬桶周邊。</p><div class="clear"></div>
</div>
</div>
</section>
<section id="use">
<div class="block">
<h1><span>日本洗手間情況</span>洗手間內器具的使用方法</h1>
<h2 class="line"><span>01</span>馬桶的沖水方法</h2>
<p class="left">根據抽水馬桶設備的不同，沖水的方法也各異。<br />
水箱式馬桶的話，沖水時請轉動水箱旁的手柄。公共洗手間或和式洗手間等沒有水箱的便器的話，沖洗時請拉下便器背面的手柄。<br />
其他還有使用設置在牆壁上的按鈕、手柄、非接觸型感應器(手遮）等沖洗方式，還有遙感控制的。最先進的馬桶則是，你使用完站起來變自動沖洗的智能馬桶。</p>
<h3>沖水手柄等的位置</h3>
<ul>
<li><img src="../../type/images/use01_img01.jpg" alt=""><p>轉 或者 擰 沖水手柄</p></li>
<li><img src="../../type/images/use01_img02.jpg" alt=""><p>將手柄往下拉</p></li>
<li><img src="../../type/images/use01_img03.jpg" alt=""><p>將手柄往下拉</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>冲水按钮</h3><img src="../../type/images/use01_img04.jpg" alt=""><p>往下按沖水按鈕</p></li>
<li><h3>沖水感應裝置</h3><img src="../../type/images/use01_img05.jpg" alt=""><p>將手放在感應處前方</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>在日本，使用過的衛生紙請仍在馬桶中，隨排泄物一起沖走。<br />
※可以一起沖水的，僅限衛生紙・之前說過的可溶性紙巾。<br />
衛生巾或其他雜物，請仍在衛生間內的垃圾箱裡。<br />
離開前請確認有沒有垃圾遺漏，為了下一位使用者，請一定沖洗乾淨，保持清潔。</p><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>溫水洗淨便座的使用方法</h2>
<p class="left">使用溫水洗淨便座的時候，請操作坐馬桶側面的按鈕。<br />
如果側面沒有的話，請操作牆壁上的遙感按鈕。<br />
按鈕所表示的意思，如下所示。</p>
<h3>操作部的位置</h3>
<ul>
<li><img src="../../type/images/use02_img01.jpg" alt=""></li>
<li><img src="../../type/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>操作部插圖的意思</h3>
<ul id="operation">
<li><img src="../../type/images/use02_img03.gif" alt=""></li>
<li><img src="../../type/images/use02_img04.gif" alt=""></li>
<li><img src="../../type/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>遮音裝置</h2>
<div class="bisection">
<p>在日本，為了掩蓋上廁所時發出的聲音，一般設置有可發出流水聲的「遮音裝置」。有一進入隔間邊自動播音的裝置，也有用手遮下感應處，或按下按鈕播音的裝置。和沖水按鈕功能並不一樣，不要按錯了。</p>
<div><img src="./images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>緊急呼叫按鈕</h2>
<div class="bisection">
<p>沖洗按鈕的旁邊，一般有緊急呼叫按鈕。身體不舒服的緊急情況時用的按鈕，所以帶有「呼出」文字的按鈕，請注意在緊急情況外不要按。</p>
<div><img src="../../type/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
<p><img src="/utsukushitoilet/type/images/point_img01.png" alt="">
<span>&lt;利用飯店浴室時的注意事項&gt;</span>
<span class="point_txt01">* 整體浴室內配有蓮蓬頭，但只限於浴缸內使用。</span>
<span class="point_txt01">* 如果浴室裡附有防水浴帘的話，為了避免弄濕馬桶周圍，請拉起浴帘使用。</span>
<span class="point_txt01">* 如果打開浴室的門來使用的話，容易誤引火災警報器，請務必關上浴室的門來使用。</span></p><div class="clear"></div>
</div>
</div>
</section>
......
utsukushitoilet/css/style_191023.css 0 → 100644
@charset "UTF-8";
/* toppage */
#situation {
background: url(../images/main_visual.jpg) no-repeat center top;
padding-top: 490px;
margin-bottom: 50px;
}
#situation > div, #latest > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#situation h2, #latest h2 {
font-size: 30px;
font-weight: bold;
display: inline-block;
}
#situation h2 {
border-bottom: solid 1px #e8392d;
}
#latest h2 {
border-bottom: solid 1px #fff;
color: #fff;
margin: 50px 0 10px 0;
}
#situation h2 + p, #latest h2 + p {
padding: 20px 0 30px 0;
}
#situation li {
display: block;
float: left;
width: 25%;
/*max-width: 218px;
margin-left: 36px;*/
position: relative;
}
#situation li div {
width: 90%;
margin: 0 auto;
}
#situation li .button {
display: block;
border: solid 2px #e9573e;
padding: 5px;
font-size: 12px;
}
#situation li .button a {
display: block;
color: #e9573e;
}
#situation li img {
width: 100%;
}
#situation li strong {
display: block;
text-align: center;
font-size: 20px;
padding: 16px 0 10px 0;
}
#situation li p {
text-align: left;
}
#latest h2 + p {
color: #fff;
}
#latest {
/*background: url(../images/bg_new.jpg) no-repeat center top;*/
min-height: 328px;
margin-bottom: 50px;
position: relative;
}
#latest div div a {
color: #fff;
display: block;
padding: 12px;
border: solid 2px #fff;
max-width: 330px;
margin: 0 auto;
}
#latest .bx-controls {
display: none;
}
#latest .latest {
position: absolute;
top: 0;
left: 0;
right: 0;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
/* toppage */
#situation {
background-size: auto 213px;
padding-top: 240px;
margin-bottom: 50px;
}
#situation > div, #latest > div {
/*padding: 0 15px;*/
}
#situation h2 + p {
text-align: left;
border-bottom: solid 1px #ccc;
padding-bottom: 20px;
margin: 0 4% 20px 4%;
}
#situation ul {
margin: 0 3%;
}
#situation li {
width: 46%;
max-width: 275px;
margin: 0;
padding: 2%;
}
#situation li:first-child, #situation li:nth-child(2) {
border-bottom: solid 1px #ccc;
margin-bottom: 10px;
padding-bottom: 30px;
}
#situation li:first-child {
margin: 0;
}
#latest {
/*background-size: auto 300px;
background-position: center top;
padding-top: 340px;
margin-bottom: 0;*/
}
#latest h2, #latest h2 + p {
color: #000;
}
#latest h2 + p {
margin: 0 4%;
}
#latest h2 {
border-bottom: solid 1px #e8392d;
margin-top: 0;
}
#latest div div a {
color: #e9573e;
border: solid 2px #e9573e;
width: 80%;
margin: 0 auto;
}
#latest .bx-viewport {
margin-bottom: 20px;
}
#latest .latest {
position: relative;
}
#latest .bxslider li img {
width: 100%;
}
}
\ No newline at end of file
utsukushitoilet/css/style_200109.css 0 → 100644
@charset "UTF-8";
/* toppage */
#situation {
background: url(../images/main_visual.jpg) no-repeat center top;
padding-top: 490px;
margin-bottom: 50px;
}
#situation > div, #latest > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#situation h2, #latest h2 {
font-size: 30px;
font-weight: bold;
display: inline-block;
}
#situation h2 {
border-bottom: solid 1px #e8392d;
}
#latest h2 {
border-bottom: solid 1px #fff;
color: #fff;
margin: 50px 0 10px 0;
}
#situation h2 + p, #latest h2 + p {
padding: 20px 0 30px 0;
}
#situation li {
display: block;
float: left;
width: 25%;
/*max-width: 218px;
margin-left: 36px;*/
position: relative;
}
#situation li div {
width: 90%;
margin: 0 auto;
}
#situation li .button {
display: block;
border: solid 2px #e9573e;
padding: 5px;
font-size: 12px;
}
#situation li .button a {
display: block;
color: #e9573e;
}
#situation li img {
width: 100%;
}
#situation li strong {
display: block;
text-align: center;
font-size: 20px;
padding: 16px 0 10px 0;
}
#situation li p {
text-align: left;
}
#latest h2 + p {
color: #fff;
}
#latest {
/*background: url(../images/bg_new.jpg) no-repeat center top;*/
min-height: 328px;
margin-bottom: 50px;
position: relative;
}
#latest div div a {
color: #fff;
display: block;
padding: 12px;
border: solid 2px #fff;
max-width: 330px;
margin: 0 auto;
}
#latest .bx-controls {
display: none;
}
#latest .latest {
position: absolute;
top: 0;
left: 0;
right: 0;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
/* toppage */
#situation {
background-size: auto 213px;
padding-top: 240px;
margin-bottom: 50px;
}
#situation > div, #latest > div {
/*padding: 0 15px;*/
}
#situation h2 + p {
text-align: left;
border-bottom: solid 1px #ccc;
padding-bottom: 20px;
margin: 0 4% 20px 4%;
}
#situation ul {
margin: 0 3%;
}
#situation li {
width: 46%;
max-width: 275px;
margin: 0;
padding: 2%;
}
#situation li:first-child, #situation li:nth-child(2) {
border-bottom: solid 1px #ccc;
margin-bottom: 10px;
padding-bottom: 30px;
}
#situation li:first-child {
margin: 0;
}
#latest {
/*background-size: auto 300px;
background-position: center top;
padding-top: 340px;
margin-bottom: 0;*/
}
#latest h2, #latest h2 + p {
color: #000;
}
#latest h2 + p {
margin: 0 4%;
}
#latest h2 {
border-bottom: solid 1px #e8392d;
margin-top: 0;
}
#latest div div a {
color: #e9573e;
border: solid 2px #e9573e;
width: 80%;
margin: 0 auto;
}
#latest .bx-viewport {
margin-bottom: 20px;
}
#latest .latest {
position: relative;
}
#latest .bxslider li img {
width: 100%;
}
}
/* 2019.10.23 */
.showcase {
position: relative;
height: 640px;
background: url(../images/main_visual0.jpg) no-repeat top center;
background-size: cover;
}
.inner-showcase {
position: relative;
height: 100%;
}
.inner-showcase .menu_box {
position: absolute;
left: 0;
right: 0;
bottom: -5.5em;
margin: auto;
}
.inner-showcase .menu_box .header_nav,
.inner-showcase .menu_box .latest {
box-shadow: 0 0 1.5em 0 rgba(0,0,0,.3);
}
.inner-showcase .menu_box .manage a {
color: #e9573e;
}
.inner-showcase .menu_box .manage a::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E');
}
.inner-showcase .header_nav li:first-child {
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
}
.inner-showcase .header_nav li {
border-color: #ccc;
}
.showcase_phrase {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.showcase_phrase img {
display: block;
width: 100%;
}
#situation {
padding-top: 0;
margin-top: 8em;
background: none;
}
@media screen and (max-width:640px){
.showcase {
height: 100vw;
}
.showcase_phrase {
width: 90%;
margin: auto;
}
#situation {
margin-top: 20vw;
}
}
utsukushitoilet/css/style_200131.css 0 → 100644
@charset "UTF-8";
/* toppage */
#situation {
background: url(../images/main_visual.jpg) no-repeat center top;
padding-top: 490px;
margin-bottom: 50px;
}
#situation > div, #latest > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#situation h2, #latest h2 {
font-size: 30px;
font-weight: bold;
display: inline-block;
}
#situation h2 {
border-bottom: solid 1px #e8392d;
}
#latest h2 {
border-bottom: solid 1px #fff;
color: #fff;
margin: 50px 0 10px 0;
}
#situation h2 + p, #latest h2 + p {
padding: 20px 0 30px 0;
}
#situation li {
display: block;
float: left;
width: 25%;
/*max-width: 218px;
margin-left: 36px;*/
position: relative;
}
#situation li div {
width: 90%;
margin: 0 auto;
}
#situation li .button {
display: block;
border: solid 2px #e9573e;
padding: 5px;
font-size: 12px;
}
#situation li .button a {
display: block;
color: #e9573e;
}
#situation li img {
width: 100%;
}
#situation li strong {
display: block;
text-align: center;
font-size: 20px;
padding: 16px 0 10px 0;
}
#situation li p {
text-align: left;
}
#latest h2 + p {
color: #fff;
}
#latest {
/*background: url(../images/bg_new.jpg) no-repeat center top;*/
min-height: 328px;
margin-bottom: 50px;
position: relative;
}
#latest div div a {
color: #fff;
display: block;
padding: 12px;
border: solid 2px #fff;
max-width: 330px;
margin: 0 auto;
}
#latest .bx-controls {
display: none;
}
#latest .latest {
position: absolute;
top: 0;
left: 0;
right: 0;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
/* toppage */
#situation {
background-size: auto 213px;
padding-top: 240px;
margin-bottom: 50px;
}
#situation > div, #latest > div {
/*padding: 0 15px;*/
}
#situation h2 + p {
text-align: left;
border-bottom: solid 1px #ccc;
padding-bottom: 20px;
margin: 0 4% 20px 4%;
}
#situation ul {
margin: 0 3%;
}
#situation li {
width: 46%;
max-width: 275px;
margin: 0;
padding: 2%;
}
#situation li:first-child, #situation li:nth-child(2) {
border-bottom: solid 1px #ccc;
margin-bottom: 10px;
padding-bottom: 30px;
}
#situation li:first-child {
margin: 0;
}
#latest {
/*background-size: auto 300px;
background-position: center top;
padding-top: 340px;
margin-bottom: 0;*/
}
#latest h2, #latest h2 + p {
color: #000;
}
#latest h2 + p {
margin: 0 4%;
}
#latest h2 {
border-bottom: solid 1px #e8392d;
margin-top: 0;
}
#latest div div a {
color: #e9573e;
border: solid 2px #e9573e;
width: 80%;
margin: 0 auto;
}
#latest .bx-viewport {
margin-bottom: 20px;
}
#latest .latest {
position: relative;
}
#latest .bxslider li img {
width: 100%;
}
}
/* 2019.10.23 */
.showcase {
position: relative;
height: 640px;
background: url(../images/main_visual0.jpg) no-repeat top center;
background-size: cover;
}
.inner-showcase {
position: relative;
height: 100%;
}
.inner-showcase .menu_box {
position: absolute;
left: 0;
right: 0;
bottom: -5.5em;
margin: auto;
}
.inner-showcase .menu_box .header_nav,
.inner-showcase .menu_box .latest {
box-shadow: 0 0 1.5em 0 rgba(0,0,0,.3);
}
.inner-showcase .menu_box .manage a {
color: #e9573e;
}
.inner-showcase .menu_box .manage a::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E');
}
.inner-showcase .header_nav li:first-child {
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
}
.inner-showcase .header_nav li {
border-color: #ccc;
}
.showcase_phrase {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.showcase_phrase img {
display: block;
width: 100%;
}
#situation {
padding-top: 0;
margin-top: 8em;
background: none;
}
@media screen and (max-width:640px){
.showcase {
height: 100vw;
}
.showcase_phrase {
width: 90%;
margin: auto;
}
#situation {
margin-top: 20vw;
}
}
/* 2020.1.9 */
#owner > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#owner h2 {
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
line-height: 1.2em;
}
.owner_menu {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3em;
}
.owner_menu li {
display: block;
width: 23.8%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
.owner_menu li a {
display: block;
padding: 8px;
border: solid 2px #f5b5aa;
text-align: center;
font-weight: bold;
color: #e9573e;
}
.owner_menu li p {
margin-top: 1em;
text-align: left;
}
.inner-showcase .menu_box .latest b {
display: block;
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
text-align: center;
font-size: 14px;
color: #fff;
}
.header_flxpc .latest a {
padding: 2.532em 4em 2.532em 6em;
}
.inner-showcase .menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #e9573e;
color: #fff;
}
.inner-showcase .menu_box .manage a::before {
content: none;
}
.inner-showcase .menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
@media screen and (max-width:640px){
.inner-showcase .menu_box .latest b {
font-size: 2.5vw;
}
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
}
}
utsukushitoilet/en/css/style.css
......@@ -158,3 +158,169 @@
}
}
/* 2020.2.19 update */
.showcase {
position: relative;
height: 640px;
background: url(/utsukushitoilet/images/main_visual0.jpg) no-repeat top center;
background-size: cover;
}
.inner-showcase {
position: relative;
height: 100%;
}
.inner-showcase .menu_box {
position: absolute;
left: 0;
right: 0;
bottom: -2.5em;
margin: auto;
}
.inner-showcase .menu_box .header_nav,
.inner-showcase .menu_box .latest {
box-shadow: 0 0 1.5em 0 rgba(0,0,0,.3);
}
.inner-showcase .menu_box .manage a {
color: #e9573e;
}
.inner-showcase .menu_box .manage a::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E');
}
.inner-showcase .header_nav li:first-child {
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
}
.inner-showcase .header_nav li {
border-color: #ccc;
}
.showcase_phrase {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.showcase_phrase img {
display: block;
width: 100%;
}
#situation {
padding-top: 0;
margin-top: 8em;
background: none;
}
@media screen and (max-width:640px){
.showcase {
height: 100vw;
}
.showcase_phrase {
width: 90%;
margin: auto;
}
#situation {
margin-top: 20vw;
}
}
#owner > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#owner h2 {
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
line-height: 1.2em;
}
.owner_menu {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3em;
}
.owner_menu li {
display: block;
width: 23.8%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
.owner_menu li a {
display: block;
padding: 8px;
border: solid 2px #f5b5aa;
text-align: center;
font-weight: bold;
color: #e9573e;
}
.owner_menu li p {
margin-top: 1em;
text-align: left;
}
.inner-showcase .menu_box .latest b {
display: block;
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
text-align: center;
font-size: 14px;
color: #fff;
}
.header_flxpc .latest a {
padding: 2.532em 4em 2.532em 6em;
}
.inner-showcase .menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #e9573e;
color: #fff;
}
.inner-showcase .menu_box .manage a::before {
content: none;
}
.inner-showcase .menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
br.sp{
display: none;
}
@media screen and (max-width:640px){
.inner-showcase .menu_box .latest b {
font-size: 2.5vw;
}
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
}
.owner_menu li {
display: block;
width: 100%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
br.sp{
display: block;
}
}
utsukushitoilet/en/howtouse/css/style.css 0 → 100644
@charset "UTF-8";
h2.line {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 24px;
font-weight: bold;
padding: 36px 0;
position: relative;
margin-top: 60px;
line-height: 1.4;
clear: both;
}
h2.line span {
color: #e9573e;
font-weight: normal;
font-size: 40px;
position: absolute;
left: 0;
right: 0;
top: -32px;
}
h3 {
font-weight: bold;
font-size: 20px;
}
#kind ul {
padding: 50px 0;
}
#kind ul:after {
content: "";
display: block;
clear: both;
}
#kind li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
background-color: #f7f6f2;
}
#kind li:first-child {
margin-left: 0;
}
#kind li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind li img {
width: 100%;
}
#kind li p {
padding: 20px;
margin-bottom: 10px;
}
#kind li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
}
#use .left {
text-align: left;
padding: 40px 0;
}
#use h3 {
text-align: left;
padding-bottom: 10px;
}
#use ul {
margin-bottom: 20px;
}
#use li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
margin-bottom: 40px;
}
#use li:first-child {
margin-left: 0;
}
#use li img {
width: 100%;
}
#operation img {
border: solid 1px #ccc;
}
.bisection {
margin-top: 40px;
margin-bottom: 100px;
}
.bisection02 {
margin-top: 40px;
margin-bottom: 40px;
}
.bisection:after {
content: "";
display: block;
clear: both;
}
.bisection p,
.bisection .lft {
float: left;
width: 48%;
text-align: left;
}
.bisection div {
float: right;
width: 50%;
}
.bisection div img {
width: 100%;
max-width: 472px;
border: solid 1px #ccc;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
h2.line {
margin-left: 4%;
margin-right: 4%;
}
#kind li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind li:first-child {
margin-left: auto;
}
#kind li:after {
content: "";
display: block;
clear: both;
}
#kind li span {
padding: 6px;
font-size: inherit;
}
#kind li strong {
position: absolute;
display: block;
}
#use h3 {
margin: 0 4%;
}
#use li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 30px auto;
}
#use li p {
margin: 10px 0;
}
#use li:first-child {
margin-left: auto;
}
#use li h3 {
margin: 0;
}
.bisection {
margin: 0 4%;
}
.bisection p,
.bisection .lft {
float: none;
width: inherit;
padding: 20px 0;
margin-bottom: 0;
}
.bisection div {
float: none;
width: inherit;
margin-bottom: 40px;
}
.bisection div img {
max-width: 578px;
}
}
#use .box{
overflow: hidden;
}
#use .left{
padding: 0;
text-align: left;
}
#use .left02{
text-align: left;
padding: 40px 0;
width: 76%;
float: left;
}
#use .right {
text-align: left;
padding: 40px 0;
margin-top: 40px;
margin-left: auto;
width: 18%;
padding: 10px;
border: 1px solid #e1e0db;
text-align: center;
}
#use .right span{
display: block;
margin-top: 10px;
}
@media screen and (max-width:640px){
#use .left02{
width: 92%;
float: none;
margin: auto;
}
#use .left.01{
width: 100%;
float: none;
}
#use .right{
width: 90%;
margin: auto;
margin-top: 0;
margin-bottom: 40px;
}
}
#kind ul#toilet li {
display: block;
width: 48.4%;
float: left;
text-align: left;
margin-right: 3%;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul#toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul#toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul#toilet li img {
width: 100%;
}
#kind ul#toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul#toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul#toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul#toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul#toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul#toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul#toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul#toilet li strong {
position: absolute;
display: block;
}
}
/* 20200109updata */
#use span.point_txt01{
display: block;
padding-left: 1em;
text-indent: -1em;
}
#use .txt_list {
list-style: disc;
margin-bottom: 0;
}
#use .txt_list li {
display: list-item;
width: auto;
margin: 0 0 0 1.2em;
float: none;
}
utsukushitoilet/en/howtouse/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Using the Toilet Utilities:Japan's Toilet Situation - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/en/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="howtouse">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>Please enable Javascript to view this site.</p>
</noscript>
<section id="use" class="first">
<div class="block">
<h1><span>Japan's Toilet Situation</span>Using the Toilet Utilities</h1>
<p>The toilets in Japan have many functions.<br>
We will explain the following here, "Flushing the Toilet", "Using the Spray seat", "Flushing Sound Device", and "Emergency Call Button".</p>
<h2 class="line"><span>01</span>How to Flush the Toilet</h2>
<div class="box"><div class="left02">
Flushing the toilet will differ according to what type of toilet is installed.
<ul class="txt_list">
<li>For the Tank Type: Turning the lever on the side of the tank will flush.</li>
<li>For the Tank-less Toilet: Pressing the lever will flush.</li>
<li>Other Types: Flush button on wall, non-contact type flushing (holding your hand over the sensor), and flush button on a remote control.</li>
</ul>
Some of the newest toilets will automatically flush when you get up off the toilet seat.
</div>
<p class="right"><img src="/utsukushitoilet/howtouse/images/3609.gif" alt=""><span>This mark indicates the flushing switch.</span></p>
</div>
<h3>Location of lever handles, etc.</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use01_img01.jpg" alt=""><p>Turn lever handle</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img02.jpg" alt=""><p>Press lever to lower it</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img03.jpg" alt=""><p>Press lever to lower it</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>Button</h3><img src="/utsukushitoilet/howtouse/images/use01_img04.jpg" alt=""><p>Press button</p></li>
<li><h3>Remote control</h3><img src="/utsukushitoilet/howtouse/images/use01_img06.jpg" alt=""><p>Press the button on the remote control of the Spray seat</p></li>
<li><h3>Sensor</h3><img src="/utsukushitoilet/howtouse/images/use01_img05.jpg" alt=""><p>Hover hand over sensor</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="box"><img src="/utsukushitoilet/howtouse/images/point_img01.png" alt="">
<ul class="txt_list">
<li>Please make sure to flush the toilet after use in consideration of the next person.</li>
<li>When using toilets in Japan, leave toilet paper in the toilet bowl and flush the toilet after use.<br>
* Papers that can be flushed down the toilet are only toilet paper and other paper that can be flushed.<br>
* Please dispose of sanitary napkins and tampons in the wastebasket installed on the side of the toilet.</li>
</ul>
</div><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>How to Use the Spray seat</h2>
<p class="left bisection02">When using the spray seat, the operation buttons located on the side of the toilet is used for operations.<br />
Additionally, if there are no operation buttons on the side, there will be a remote control located on the wall.<br />
The meanings of the buttons are as follows.</p>
<h3>Location of Operation Areas</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use02_img01.jpg" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>Meaning of Operation Area Illustrations</h3>
<ul id="operation">
<li><img src="/utsukushitoilet/howtouse/images/use02_img03.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img04.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>Toilet Sound Effects Device</h2>
<div class="bisection">
<div class="lft">Some public toilets in Japan may be equipped with "Flushing Sound Devices" that provide the sound of running water to mask body function sounds. <br>
The operation of each according to the type is as follows. The cover sound will play for a set period of time then automatically turn off.
<ul class="txt_list">
<li>Sensor Type: Placing your hand over the sensor will turn on the sound.</li>
<li>Button Type: Pressing the button will start the sound.</li>
<li>Automatic Type: When the toilet is entered, it will sense the presence of a person and automatically turn on the sound.</li>
</ul>
</div>
<div><img src="./images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>Emergency Call Button</h2>
<div class="bisection">
<p>An Emergency Call Button similar to the photo may be found near the flush button.
If you press this button when you are feeling ill inside the toilet, some will come to your aid. Please take care not to press this button unless it is an emergency.</p>
<div><img src="/utsukushitoilet/howtouse/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/en/index.html
......@@ -5,9 +5,9 @@
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Japan’s Toilet Situation NIPPON UTSUKUSHI TOILET</title>
<title>Japan's Toilet Situation NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/en/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
......@@ -47,23 +47,47 @@ $(document).ready(function(){
<body id="top">
<script type="text/javascript" >
<!--
includeHead('h1');
includeHead2('h1');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
<p>Please enable Javascript to view this site.</p>
</noscript>
<div class="showcase">
<div class="inner-showcase">
<div class="showcase_phrase">
<img src="/utsukushitoilet/images/mv_phrase.svg" alt="Welcome to Japan Toilet">
</div>
<div class="menu_box">
<div class="header_flxpc">
<ul class="header_nav">
<li>Japan's Toilet Situation</li>
<li class="situation"><a href="/utsukushitoilet/en/situation/">Toilet Installation Locations</a></li>
<li class="sign"><a href="/utsukushitoilet/en/sign/">Toilet Guide Signs</a></li>
<li class="type"><a href="/utsukushitoilet/en/type/">Types of Toilets and Usage</a></li>
<li class="howtouse"><a href="/utsukushitoilet/en/howtouse/">Using the Toilet Utilities</a></li>
</ul>
<div class="latest">
<b>Restroom Information</b>
<a href="/utsukushitoilet/en/latest/">Japan's Latest Toilets</a>
</div>
</div>
</div>
</div>
</div>
<section id="situation">
<div>
<h2>Japan’s Toilet Situation </h2>
<p>One problem you may encounter while travelling is the toilet.<br />
Most of Japan’s toilets are kept clean so that people can use them comfortably.<br />
In addition, basically toilet paper is installed so that everyone can use them for free.</p>
<h2>Japan's Toilet Situation</h2>
<p>Welcome to Japan!!<br>
Have you ever had trouble regarding restrooms during your travels?<br>
The majorities of restrooms in Japan are kept clean to allow you to use them in comfort and basically are free.<br>
This site summarizes information regarding restrooms in Japan.<br>
Along with your travels in Japan, please experience the comfortable restrooms of Japan!</p>
<ul>
<li><div><img src="/utsukushitoilet/images/situation01.jpg" alt=""><strong>Toilet Installation Locations</strong><p>Toilets can be found in various locations where you visit. The hospitable toilets are adapted to the various facilities.</p><span class="button"><a href="situation/">See details</a></span></div></li>
<li><div><img src="/utsukushitoilet/images/situation02.jpg" alt=""><strong>Toilet Navigation Signs</strong><p>In Japan, there are many expressions that represent the toilet. </p><span class="button"><a href="situation/#guide">See details</a></span></div></li>
<li><div><img src="/utsukushitoilet/images/situation02.jpg" alt=""><strong>Toilet Navigation Signs</strong><p>In Japan, there are many expressions that represent the toilet. </p><span class="button"><a href="sign/">See details</a></span></div></li>
<li><div><img src="/utsukushitoilet/images/situation03.jpg" alt=""><strong>Types of Toilets and Usage</strong><p>Most of toilets in Japan are the following three types, the Japanese-style toilets, Western-style toilets, and multi-function toilets. How they are used will differ according to the type.</p><span class="button"><a href="type/">See details</a></span></div></li>
<li><div><img src="/utsukushitoilet/images/situation04.jpg" alt=""><strong>Using the Toilet Utilities</strong><p>Depending on what kind of toilet is installed, the way to flush will differ. There are also some that will automatically flush after getting up after sitting on the toilet.</p><span class="button"><a href="type/#use">See details</a></span></div></li>
<li><div><img src="/utsukushitoilet/images/situation04.jpg" alt=""><strong>Using the Toilet Utilities</strong><p>Depending on what kind of toilet is installed, the way to flush will differ. There are also some that will automatically flush after getting up after sitting on the toilet.</p><span class="button"><a href="howtouse/">See details</a></span></div></li>
</ul><div class="clear"></div>
</div>
</section>
......@@ -76,7 +100,7 @@ In addition, basically toilet paper is installed so that everyone can use them f
<li><img src="/utsukushitoilet/images/slide05.jpg" /></li>
</ul>
<div class="latest">
<h2>Japan’s Latest Toilets</h2>
<h2>Japan's Latest Toilets</h2>
<p>The latest toilets in Japan filled with state-of-the-art technologies, starting with the Spray seat.<br />
They are continuing to evolve so that they can be used at ease, safely, and comfortably.</p>
<div>
......
utsukushitoilet/en/latest/02.html
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta http-equiv="refresh" content="0;URL=/utsukushitoilet/en/latest/">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
......
utsukushitoilet/en/latest/css/style.css
......@@ -422,3 +422,10 @@ p, .second .block > p {
}
#_01,
#_02,
#_03,
#_04 {
padding-top: 5px;
margin-top: -5px;
}
utsukushitoilet/en/latest/images/latest01_graph01.gif
utsukushitoilet/en/latest/images/latest01_graph01.gif

14.3 KB | W: | H:

utsukushitoilet/en/latest/images/latest01_graph01.gif

12.3 KB | W: | H:

utsukushitoilet/en/latest/images/latest01_graph01.gif
utsukushitoilet/en/latest/images/latest01_graph01.gif
utsukushitoilet/en/latest/images/latest01_graph01.gif
utsukushitoilet/en/latest/images/latest01_graph01.gif
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/en/latest/index.html
......@@ -5,9 +5,9 @@
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Japan’s Latest Toilet - NIPPON UTSUKUSHI TOILET</title>
<title>Japan's Latest Toilet - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/en/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
......@@ -31,25 +31,25 @@ $(document).ready(function(){
</script>
<!-- //google analytics -->
</head>
<body class="second">
<body class="second" id="latest">
<script type="text/javascript" >
<!--
includeHead('div');
includeHead2('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
<p>Please enable Javascript to view this site.</p>
</noscript>
<section class="first latest_menu">
<div class="block">
<h1>Japan’s Latest Toilet</h1>
<h1>Japan's Latest Toilet</h1>
<p>The latest toilets in Japan filled with state-of-the-art technologies, starting with the spray seats.<br />
They are continuing to evolve so that they can be used at ease, safely, and comfortably.</p>
<ul>
<li><span>01</span><a href="./#_01">Spray seat</a></li>
<li><span>02</span><a href="02.html#_02">Low Silhouette Toilet</a></li>
<li><span>03</span><a href="02.html#_03">Water-saving Device</a></li>
<li><span>04</span><a href="02.html#_04">Devices for People with Children</a></li>
<li><span>02</span><a href="./#_02">Low Silhouette Toilet</a></li>
<li><span>03</span><a href="./#_03">Water-saving Device</a></li>
<li><span>04</span><a href="./#_04">Devices for People with Children</a></li>
</ul><div class="clear"></div>
</div>
</section>
......@@ -65,8 +65,8 @@ Additionally, it has a timer to conserve electricity and a learning function to
</ul><div class="clear"></div>
<div id="spread">
<div>
<h3>Proliferation rate in Japan: 77.5％ (As of 2015)</h3>
<p>The proliferation rate in households according to the "Cabinet Office Consumption Survey" of fiscal 2013 was 77.5% and is roughly the same as the proliferation rate of personal computers.</p>
<h3>Penetration Rate in Japan: 80.4% <small>(As of March 2019)</small></h3>
<p>The household penetration rate is increasing yearly reaching about 80% according to survey results by the Cabinet Office, which is a higher rate than personal computers.</p>
</div>
<div><img src="./images/latest01_graph01.gif" alt=""></div>
</div><div class="clear"></div>
......@@ -79,14 +79,14 @@ Their opinions after using are as follows.</p>
<li><img src="./images/latest01_comment01_pc.gif" alt="Think it is sanitary"></li>
<li><img src="./images/latest01_comment02_pc.gif" alt="Good in that it enables you to wash your posterior"></li>
<li><img src="./images/latest01_comment03_pc.gif" alt="Good in that toilet paper is not used"></li>
<li><img src="./images/latest01_comment04_pc.gif" alt="Would recommend to those who haven’t used them"></li>
<li><img src="./images/latest01_comment04_pc.gif" alt="Would recommend to those who haven't used them"></li>
<li><img src="./images/latest01_comment05_pc.gif" alt="Easy to use"></li>
</ul>
<ul id="comment_sp">
<li><img src="./images/latest01_comment01.gif" alt="Think it is sanitary"></li>
<li><img src="./images/latest01_comment02.gif" alt="Good in that it enables you to wash your posterior"></li>
<li><img src="./images/latest01_comment03.gif" alt="Good in that toilet paper is not used"></li>
<li><img src="./images/latest01_comment04.gif" alt="Would recommend to those who haven’t used them"></li>
<li><img src="./images/latest01_comment04.gif" alt="Would recommend to those who haven't used them"></li>
<li><img src="./images/latest01_comment05.gif" alt="Easy to use"></li>
</ul>
</div>
......@@ -99,13 +99,61 @@ Their opinions after using are as follows.</p>
</div>
</div>
</section>
<section id="_02">
<div class="block">
<h2 class="line"><span>02</span>Low Silhouette Toilet</h2>
<p>In recent years, the “Low Silhouette” design for toilets has been gaining popularity.<br>
Each company has a characteristic lineup such as types that assert the design of the toilet by itself or products that allow freedom to interpret the space where it is situated.</p>
<ul>
<li><strong>Manufacturers</strong><div>Appearance</div><span>Product Names</span></li>
<li><strong>ASAHI EITO Corporation</strong><div><img src="/utsukushitoilet/latest/images/latest02_img01.jpg" alt=""></div><span>Onepiece</span></li>
<li><strong>Janis Ltd.</strong><div><img src="/utsukushitoilet/latest/images/latest02_img02.jpg" alt=""></div><span>Smart Clean</span></li>
<li><strong>TOTO LTD. </strong><div><img src="/utsukushitoilet/latest/images/latest02_img03.jpg" alt=""></div><span>NEOREST</span></li>
<li><strong>Panasonic Corporation</strong><div><img src="/utsukushitoilet/latest/images/latest02_img04.jpg" alt=""></div><span>A-La-Uno</span></li>
<li><strong>LIXIL Corporation</strong><div><img src="/utsukushitoilet/latest/images/latest02_img05.jpg" alt=""></div><span>SATIS</span></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_03">
<div class="block">
<h2 class="line"><span>03</span>Water-saving Device</h2>
<h3>Water-saving Toilet</h3>
<p>The volume of water used when a Western-style toilet is flushed once (large flush) is 6 liters or less. <br>
In addition, by the flow of the wash water "circling around" the bowl (toilet bowl), it effectively cleans the soil and conserves water.</p>
<ul>
<li><img src="/utsukushitoilet/latest/images/latest03_img01.jpg" alt=""></li>
<li><img src="/utsukushitoilet/latest/images/latest03_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<ul id="small">
<li><h3>Automatic Flushing Urinals</h3><p>After your use, the toilet will be flushed automatically.<br>Children friendly, easy to approach, low receptacle urinals are common.</p></li>
<li><img src="/utsukushitoilet/latest/images/latest03_img03.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>Wash Basin Area (Automatic Faucet, Automatic Liquid Soap, Air Towel)</h3>
<ul id="auto">
<li><img src="/utsukushitoilet/latest/images/latest03_img04.jpg" alt=""><p>Faucets with water that automatically turn on are common.</p></li>
<li><img src="/utsukushitoilet/latest/images/latest03_img05.jpg" alt=""><p>In places like commercial facilities, there also are automatic liquid soap dispenser types.</p></li>
<li><img src="/utsukushitoilet/latest/images/latest03_img06.jpg" alt=""><p>There are air towel types that blow away moisture.</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_04">
<div class="block">
<h2 class="line"><span>04</span>Devices for People with Children</h2>
<p>Baby seats, baby chairs, and other items in consideration of babies, fitting boards for changing children and other devices have been increasingly installed in commercial and transportation facilities. People with children can also use toilets with peace of mind.</p>
<ul>
<li><img src="/utsukushitoilet/latest/images/latest04_img01.jpg" alt=""><p>This is a table for changing baby diapers.</p></li>
<li><img src="/utsukushitoilet/latest/images/latest04_img02.jpg" alt=""><p>People with babies can sit the infant in the seat while using the toilet.</p></li>
<li><img src="/utsukushitoilet/latest/images/latest04_img03.jpg" alt=""><p>It is a thin shaped board so that pants-type diapers can be conveniently changed.</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section class="latest_menu foot_menu">
<div class="block">
<ul>
<li><span>01</span><a href="./#_01">Spray seat</a></li>
<li><span>02</span><a href="02.html#_02">Low Silhouette Toilet</a></li>
<li><span>03</span><a href="02.html#_03">Water-saving Device</a></li>
<li><span>04</span><a href="02.html#_04">Devices for People with Children</a></li>
<li><span>02</span><a href="./#_02">Low Silhouette Toilet</a></li>
<li><span>03</span><a href="./#_03">Water-saving Device</a></li>
<li><span>04</span><a href="./#_04">Devices for People with Children</a></li>
</ul><div class="clear"></div>
</div>
</section>
......
utsukushitoilet/en/shared/js/common_parts.js
/* 2020.2.19 update */
function includeHead2(tag) {
document.write(
'<div class="overlay"><img src="/utsukushitoilet/shared/images/main_visual0_002.png" width="100%" height="auto" class="back_img"></div>\n'+
'<header class="pht">\n'+
'<div id="head_area" class="head_area">\n'+
'<'+tag+' class="title_area"><a href="/utsukushitoilet/en/"><img src="/utsukushitoilet/shared/images/logo.svg" alt="JAPAN TOILET INFORMATION"><span class="logo_line"><img src="/utsukushitoilet/shared/images/logo_line.svg" alt="NIPPON UTSUKUSHI TOILET"></span></a></'+tag+'>\n'+
'<div class="lang_menu">\n'+
'<div id="lang">\n'+
'<select>\n'+
'<option value="">LANGUAGE</option>\n'+
'<option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
'<option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
'<option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
'<option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
'<option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
'</select>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'<nav>\n'+
'<div class="inner-toggle">\n'+
'<a href="" id="toggle_btn" class="toggle_btn">\n'+
'<div class="toggle"><span></span></div>\n'+
'</a>\n'+
'</div>\n'+
'<div id="toggle_menu" class="toggle_menu">\n'+
'<div class="inner-menu">\n'+
'<div class="menu_box">\n'+
'<div class="header_flxpc">\n'+
'<ul class="header_nav">\n'+
'<li>Japan\'s Toilet Situation</li>\n'+
'<li class="situation"><a href="/utsukushitoilet/en/situation/">Toilet Installation Locations</a></li>\n'+
'<li class="sign"><a href="/utsukushitoilet/en/sign/">Toilet Guide Signs</a></li>\n'+
'<li class="type"><a href="/utsukushitoilet/en/type/">Types of Toilets and Usage</a></li>\n'+
'<li class="howtouse"><a href="/utsukushitoilet/en/howtouse/">Using the Toilet Utilities</a></li>\n'+
'</ul>\n'+
'<div class="latest"><b>Restroom Information</b><a href="/utsukushitoilet/en/latest/">Japan\'s Latest Toilets</a></div>\n'+
'</div>\n'+
'</div>\n'+
'<div class="search">\n'+
'<gcse:searchbox-only></gcse:searchbox-only>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'</nav>\n'+
'</header>\n'
);
}
/* 共通 ページメニュー　ヘッダ */
function includeHead(tag) {
document.write(
......@@ -32,7 +82,7 @@ document.write(
' <li><a href="/utsukushitoilet/en/situation/#guide">Toilet Guide Signs</a></li>\n'+
' <li><a href="/utsukushitoilet/en/type/">Types of Toilets and Usage</a></li>\n'+
' <li><a href="/utsukushitoilet/en/type/#use">Using the Toilet Utilities</a></li>\n'+
' <li><a href="/utsukushitoilet/en/latest/">Japan’s Latest Toilets</a></li>\n'+
' <li><a href="/utsukushitoilet/en/latest/">Japan\'s Latest Toilets</a></li>\n'+
'</ul><div class="clear"></div>\n'+
'</nav>\n'+
'</header>\n'
......@@ -46,28 +96,28 @@ document.write(
'</div>\n'+
'<footer>\n'+
'<div id="footer_div1">\n'+
'<div id="footer_menu1">\n'+
'<strong>Japan’s Toilet Situation</strong>\n'+
'<div id="footer_menu1" class="list_wt">\n'+
'<strong>Japan\'s Toilet Situation</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/en/situation/">Toilet Installation Locations</a></li>\n'+
' <li><a href="/utsukushitoilet/en/situation//#guide">Toilet Guide Signs</a></li>\n'+
' <li><a href="/utsukushitoilet/en/sign/">Toilet Guide Signs</a></li>\n'+
' <li><a href="/utsukushitoilet/en/type/">Types of Toilets and Usage</a></li>\n'+
' <li><a href="/utsukushitoilet/en/type/#use">Using the Toilet Utilities</a></li>\n'+
' <li><a href="/utsukushitoilet/en/howtouse/">Using the Toilet Utilities</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_menu2">\n'+
'<strong>Japan’s Latest Toilets</strong>\n'+
'<div id="footer_menu2" class="list_wt">\n'+
'<strong>Japan\'s Latest Toilets</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/en/latest/#_01">Spray seats</a></li>\n'+
' <li><a href="/utsukushitoilet/en/latest/02.html#_02">Low Silhouette Toilets</a></li>\n'+
' <li><a href="/utsukushitoilet/en/latest/02.html#_03">Water-saving Toilets</a></li>\n'+
' <li><a href="/utsukushitoilet/en/latest/02.html#_04">Child Support Equipment</a></li>\n'+
' <li><a href="/utsukushitoilet/en/latest/#_02">Low Silhouette Toilets</a></li>\n'+
' <li><a href="/utsukushitoilet/en/latest/#_03">Water-saving Toilets</a></li>\n'+
' <li><a href="/utsukushitoilet/en/latest/#_04">Child Support Equipment</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_banner">\n'+
'<ul>\n'+
' <li><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="トイレナビ"></a></li>\n'+
' <li><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="観光庁"></a></li>\n'+
' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="TOILET NAVIGATION"></a></li>\n'+
' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="Japan Tourism Agency"></a></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
......
utsukushitoilet/en/sign/css/style.css 0 → 100644
@charset "UTF-8";
#facility ul {
padding: 50px 0;
}
#facility ul:after {
content: "";
display: block;
clear: both;
}
#facility li {
display: inline-block;
width: 16.6%;
float: left;
text-align: center;
}
#facility li div {
width: 99%;
}
#facility li strong {
display: block;
}
#facility li img {
width: 100%;
}
#cleaning {
border: solid 1px #ec6b55;
position: relative;
text-align: left;
padding: 20px;
background: url(/utsukushitoilet/situation/images/bg_cleaning.gif) no-repeat 94% center;
background-size: 224px auto;
margin-top: 50px;
margin-bottom: 50px;
}
#cleaning:after {
content: "";
display: block;
position: absolute;
z-index:-1;
top: 3px;
left: 3px;
right: -5px;
bottom: -5px;
border: 1px solid #dcdcdc;
}
#cleaning h2 {
font-size: 20px;
font-weight: bold;
}
#cleaning p {
width: 66%;
}
#guide h2 {
background-color: #7f7f7f;
color: #fff;
width: 110px;
margin-bottom: 0;
margin-top: 20px;
}
#guide .guide_eg {
border: solid 1px #ccc;
padding: 30px 10px 20px 10px;
margin-bottom: 20px;
position: relative;
}
#guide #letter li {
display: inline-block;
width: 17%;
padding-bottom: 20px;
}
#guide #letter li img {
max-width: 116px;
width: 100%;
}
#guide #letter li:before {
content: "-";
color: #ed638a;
font-weight: bold;
margin-right: 6px;
}
#guide ul#sign {
display: block;
height: 115px;
}
#guide #sign li {
display: block;
position: absolute;
background-color: #f4f4f4;
padding: 14px 0;
width: 106px;
border-radius: 5px;
}
#guide #sign li img {
width: 58%;
}
#guide #sign li:first-child {
left: 30px;
}
#guide #sign li:nth-child(2) {
left: 152px;
}
#guide #sign li:nth-child(3) {
width: 185px;
left: 274px;
height: 77px;
}
#guide #sign li:nth-child(3) img {
width: 95%;
margin-top: 12px;
}
#guide #sign li:nth-child(4) {
width: 272px;
left: 476px;
height: 77px;
background-color: #666;
}
#guide #sign li:nth-child(4) img {
width: 67%;
margin-top: 12px;
}
#guide #sign li:nth-child(5) {
left: 152px;
}
#guide #sign li:nth-child(6) {
left: 274px;
}
#guide #sign li:nth-child(7) {
left: 396px;
}
#guide #sign li:nth-child(8) {
left: 518px;
}
#guide #sign li:nth-child(9) {
left: 641px;
width: 186px;
}
#guide #sign li:nth-child(9) img {
width: 90%;
}
#guide #sign li:nth-child(10) {
right: 28px;
clear: both;
}
#guide ul#sign:after {
content: "";
display: block;
clear: both;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
#facility li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto;
}
#facility li:after {
content: "";
display: block;
clear: both;
}
#facility li strong {
position: absolute;
display: block;
text-shadow: 1px 1px 2px #fff;
}
#facility li img {
display: block;
width: 30%;
float: left;
margin-right: 1px;
}
#facility li img:first-child {
margin-left: 39%;
}
#cleaning {
background-position: center 95%;
width: 86%;
padding-bottom: 200px;
}
#cleaning p {
width: initial;
margin: 0 auto;
}
#guide h2 {
margin-left: 4%;
}
#guide .guide_eg {
margin-left: 4%;
margin-right: 4%;
}
#guide #letter li {
width: 48%;
}
#guide ul#sign {
height: inherit;
}
#guide #sign li {
position: inherit;
display: inline-block;
width: 42%;
margin-bottom: 12px;
pading: 4% 0;
}
#guide #sign li:nth-child(3), #guide #sign li:nth-child(4), #guide #sign li:nth-child(9) {
width: 85.2%;
height: auto;
}
#guide #sign li:nth-child(3) img, #guide #sign li:nth-child(4) img {
margin-top: 0;
}
#guide #sign li:nth-child(10) {
margin-left: 7.4%;
float: left;
}
}
utsukushitoilet/kr/latest/images/latest01_graph01.gif
utsukushitoilet/kr/latest/images/latest01_graph01.gif

12.1 KB | W: | H:

utsukushitoilet/kr/latest/images/latest01_graph01.gif

11.4 KB | W: | H:

utsukushitoilet/kr/latest/images/latest01_graph01.gif
utsukushitoilet/kr/latest/images/latest01_graph01.gif
utsukushitoilet/kr/latest/images/latest01_graph01.gif
utsukushitoilet/kr/latest/images/latest01_graph01.gif
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/latest/images/latest01_graph01.gif
utsukushitoilet/latest/images/latest01_graph01.gif

15.7 KB | W: | H:

utsukushitoilet/latest/images/latest01_graph01.gif

11.7 KB | W: | H:

utsukushitoilet/latest/images/latest01_graph01.gif
utsukushitoilet/latest/images/latest01_graph01.gif
utsukushitoilet/latest/images/latest01_graph01.gif
utsukushitoilet/latest/images/latest01_graph01.gif
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/owner/images/pdf/sahou.pdf 0 → 100644
No preview for this file type
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment