Skip to content

sora / sanitary-net

Go to a project
Commit 9790c0e1 by o.kimura
Options

T123QR入り口

parent f580f8e0
Inline Side-by-side
Showing with 843 additions and 0 deletions
select_lang/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;
}
.title_area a {
cursor: default;
}
.second h2.line {
margin-top: 0px;
}
.flx_box {
display: flex;
justify-content: center;
align-items: center;
}
.flx_box a {
width: 30%;
}
.flx_box a:hover {
text-decoration: underline;
color: #fff;
}
/*
.flx_box 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;
}
*/
.lang_box {
background-color: #e9573e;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin: 5px;
}
#use .box {
overflow: hidden;
}
#use .left {
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.sq {
width:
}
#use .right span {
display: block;
margin-top: 10px;
}
#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;
}
/* 20240321 */
.mt30 {
margin-top: 30px;
}
.second .point {
margin-bottom: 150px;
}
.second .point > div.use {
width: 880px;
margin: 30px auto 0 auto;
padding: 30px 0 0 0;
border: 3px #ec6b55 double;
position: relative;
}
.second .point > div.pict {
width: 780px;
margin: 30px 0 0 auto;
padding: 30px 5px 0 30px;
border: 3px #ec6b55 double;
position: relative;
}
.under_menu_box.manage {
margin-bottom: 45px;
}
.under_menu_box.manage a {
color: #e9573e;
background-color: transparent;
font-size: 120%;
}
.under_menu_box.manage a::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
top: 3px;
margin-left: 8px;
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%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') no-repeat center;
background-size: contain;
position: relative;
}
.under_menu_box.manage a:hover {
text-decoration: underline;
}
.second .block {
position: relative;
}
.flx_box {
display: flex;
height: 140px;
}
.lead_btm {
position: absolute;
bottom: -38px;
justify-content: center;
left: 20%;
display: flex;
}
.lead_btm2 {
position: absolute;
bottom: 110px;
justify-content: center;
left: 28%;
display: flex;
}
.point .side {
width: 200px !important;
border: none !important
}
.invisible{
visibility: hidden;
}
.pict_inner {
width: 33%;
float: left;
text-align: center;
}
.pict_inner_2 {
width: 45%;
float: left;
text-align: center;
padding: 5px;
}
.pict_inner_3 {
width: 45%;
float: left;
text-align: center;
padding: 5px;
}
.ft120 {
font-size: 120%;
}
.second .point p.txt_left {
text-align: left;
}
@media screen and (max-width:640px) {
.second .point > div.use {
width: 90%;
margin: 0 auto;
padding: 10px 10px 0px 10px;
border: 3px #ec6b55 double;
position: relative;
}
.second .point {
margin-bottom: 400px;
}
.under_menu_box.manage a {
padding: 0;
}
.second .point > div.pict {
display: table-cell;
}
.flx_box {
display: block;
margin-bottom: 25px;
}
.lead_btm {
position: absolute;
bottom: -330px;
justify-content: center;
left: 0;
display: flex;
}
.lead_btm2 {
left: auto;
bottom: 160px;
}
.point .side {
width: auto !important;
}
.ft120 {
font-size: 100% !important;
}
.second .point > div.pict {
padding: 30px 5px 0px 8px;
}
}
/* 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 .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;
}
select_lang/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>トイレ内器具の使い方 : JAPAN TOILET INFORMATION -NIPPON UTSUKUSHI TOILET-</title>
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-N4F24ZD');
</script>
<!-- End Google Tag Manager -->
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_jp.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?ver=191024"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js?ver=191024"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
</head>
<body class="second" id="howtouse">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N4F24ZD" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="pht">
<div id="head_area" class="head_area">
<div class="title_area"><a href="#"><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></div>
<div class="lang_menu">
<div id="lang">
<!--select>
<option value="">LANGUAGE</option>
<option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>
<option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>
<option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>
<option value="/utsukushitoilet/en/" id="en">ENGLISH</option>
<option value="/utsukushitoilet/" id="ja">JAPANESE</option>
</select-->
</div>
</div>
</div>
</header>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="use" class="first">
<div class="block">
<h2 class="line">Please select a language.</h2>
<div class="flx_box">
<a href=""><div class="lang_box">English ▶</div></a>
<a href=""><div class="lang_box">CHINESE(Traditional) ▶</div></a>
<a href=""><div class="lang_box">CHINESE(Simplified) ▶</div></a>
</div>
<div class="flx_box">
<a href=""><div class="lang_box">KOREAN ▶</div></a>
<a href=""><div class="lang_box">JAPANESE ▶</div></a>
<a href="" class="invisible"><div class="lang_box">JAPANESE ▶</div></a>
</div>
<div class="clear"></div>
</div>
</section>
</body>
</html>
select_lang/use.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>温水洗浄便座を使ってみましょう！ : JAPAN TOILET INFORMATION -NIPPON UTSUKUSHI TOILET-</title>
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-N4F24ZD');
</script>
<!-- End Google Tag Manager -->
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_jp.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?ver=191024"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js?ver=191024"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
</head>
<body class="second" id="">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N4F24ZD" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<script type="text/javascript">
<!--
includeHead_Ja('div');
//
-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="use" class="first">
<div class="block" id="breadcrumbs_area">
<p class="breadcrumbs"><a href="/utsukushitoilet/">TOP</a> &gt; <em>日本のトイレ事情-トイレ内の器具の使い方-温水洗浄便座を使ってみましょう！</em></p>
</div>
<div class="block">
<h1>温水洗浄便座を使ってみましょう！</h1>
<p>トイレを利用した際は、おしりが洗えてきれいになる温水洗浄便座を使ってみましょう。</p>
<h2 class="line"><span>01</span>温水洗浄便座の使い方（その1）</h2>
<div class="box">
<div class="left02">
便座の横の操作パネルか、壁のリモコンで操作します。<br>
※操作は、必ず便座に座った状態で行ってください。<br>
※洗浄は、10～20秒間程度とし、洗いすぎに注意しましょう。
</div>
<p class="right sq"><img src="images/onsui.png" alt="" width="150" height="150"></p>
</div>
<div class="point flx_box">
<div class="side">
<img src="/utsukushitoilet/howtouse/images/point1.jpg" alt="point!" width="150" height="auto">
<img src="/utsukushitoilet/howtouse/images/point2.jpg" alt="point!" width="140" height="auto">
</div>
<div class="pict">
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="pict_inner">
<img src="/utsukushitoilet/howtouse/images/stop.png" width="100" height="auto"><br>
<p class="ft120"><b>洗浄ストップ</b></p>
<p class="txt_left">このボタンを押すと、おしり洗浄、ビデ洗浄が止まります</p>
</div>
<div class="pict_inner">
<img src="/utsukushitoilet/howtouse/images/wash.png" width="100" height="auto"><br>
<p class="ft120"><b>おしり洗浄</b></p>
<p class="txt_left">このボタンを押すと、温水でおしりを洗います</p>
</div>
<div class="pict_inner">
<img src="/utsukushitoilet/howtouse/images/bidet.png" width="100" height="auto"><br>
<p class="ft120"><b>ビデ洗浄</b></p>
<p class="txt_left">このボタンを押すと、温水で女性のデリケートゾーンを洗います</p>
</div>
<div class="clear"></div>
</div>
</div>
<p class="lead_btm">温水洗浄便座を使ったあとは、備え付けのトイレットペーパーでおしりの水滴をふき取ってください。</p>
</div>
<div class="block">
<p>温水は強さや位置が調整できるものがあります。</p>
<h2 class="line"><span>02</span>温水洗浄便座の使い方（その2）</h2>
<div class="box">
<div class="left02">
温水洗浄便座を利用している最中に、便座の横の操作パネルか、<br>壁のリモコンで操作します。
</div>
<p class="right sq"><img src="images/onsui.png" alt="" width="150" height="150"></p>
</div>
<div class="point flx_box">
<div class="side">
<img src="/utsukushitoilet/howtouse/images/point1.jpg" alt="point!" width="150" height="auto">
<img src="/utsukushitoilet/howtouse/images/point2.jpg" alt="point!" width="140" height="auto">
</div>
<div class="pict">
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="pict_inner_2">
<img src="/utsukushitoilet/howtouse/images/suisei.png" width="180" height="auto"><br><br>
<p class="txt_left">温水の強さが調整できます。お好みの強さでご利用ください。</p>
</div>
<div class="pict_inner_3">
<img src="/utsukushitoilet/howtouse/images/position.png" width="180" height="auto"><br><br>
<p class="txt_left">温水の出る位置を前後に調整できるものがあります。<br>
お好みの位置でご利用ください。</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="block">
<p class="lead_btm2">※製品によって、操作部の表示が異なるものがあります。</p>
</div>
</section>
<script type="text/javascript">
<!--
includeFoot();
//
-->
</script>
</body>
</html>
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