SP対応いったんコミット

7a3dacf3 · o.kimura · d10b6610 · 7a3dacf3 · 7a3dacf3 · 7a3dacf3
Commit 7a3dacf3 authored May 10, 2022 by o.kimura
Showing with 2288 additions and 687 deletions
sp/clean/css/fonts/icomoon.eot
sp/clean/css/fonts/icomoon.svg
sp/clean/css/fonts/icomoon.ttf
sp/clean/css/fonts/icomoon.woff
sp/clean/css/parts.css
sp/clean/public/index.php
sp/clean/technology.php
sp/shared/css/common.css
--- a/sp/clean/css/fonts/icomoon.eot
+++ b/sp/clean/css/fonts/icomoon.eot
--- a/sp/clean/css/fonts/icomoon.svg
+++ b/sp/clean/css/fonts/icomoon.svg
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="faq" d="M512-57.856c-279.347 0-505.856 226.509-505.856 505.856s226.509 505.856 505.856 505.856 505.856-226.509 505.856-505.856-226.509-505.856-505.856-505.856zM452.198 136.704c13.722-13.722 30.31-20.685 49.971-20.685 19.456 0 36.25 6.963 50.176 20.685s20.89 30.31 20.89 49.562c0 19.251-6.963 35.635-21.094 49.357-13.926 13.517-30.925 20.48-50.79 20.48-19.251 0-35.635-6.758-49.357-20.48-13.517-13.517-20.48-30.106-20.48-49.357 0.205-19.251 6.963-35.84 20.685-49.562zM676.659 671.232c-16.179 26.624-37.683 47.104-64.512 61.030-26.829 14.131-59.392 21.094-97.894 21.094-59.597 0-107.52-16.998-143.77-51.2-36.454-34.202-54.272-77.414-53.862-129.638h106.701c0.205 23.142 8.397 42.189 24.371 56.934s36.454 22.118 61.645 22.118c24.371 0 44.032-6.144 58.573-18.227s21.709-26.829 21.709-44.237c0-12.698-3.072-23.962-9.011-33.382s-23.347-26.829-52.224-52.224c-29.901-26.010-51.405-54.067-64.717-83.763s-20.070-62.874-20.070-99.328l0.41-18.432h110.387c1.024 26.010 3.686 46.49 7.782 61.030 4.096 14.746 9.011 26.419 15.155 35.226 5.939 8.806 20.89 23.962 44.442 45.466 24.781 22.528 40.346 38.502 46.899 48.128 11.059 16.384 19.251 32.154 24.371 47.718s7.782 31.334 7.782 47.309c0.205 29.901-7.987 57.754-24.166 84.378z" />
+<glyph unicode="&#xe901;" glyph-name="search" d="M992.262 88.604l-242.552 206.294c-25.074 22.566-51.89 32.926-73.552 31.926 57.256 67.068 91.842 154.078 91.842 249.176 0 212.078-171.922 384-384 384-212.076 0-384-171.922-384-384s171.922-384 384-384c95.098 0 182.108 34.586 249.176 91.844-1-21.662 9.36-48.478 31.926-73.552l206.294-242.552c35.322-39.246 93.022-42.554 128.22-7.356s31.892 92.898-7.354 128.22zM384 320c-141.384 0-256 114.616-256 256s114.616 256 256 256 256-114.616 256-256-114.614-256-256-256z" />
+<glyph unicode="&#xe902;" glyph-name="home" d="M839.68 459.878v-517.734h-658.842v517.734h-164.454l493.978 493.978 493.978-493.978h-164.659zM416.154-57.856h188.211v423.526h-188.211v-423.526z" />
+<glyph unicode="&#xe903;" glyph-name="pt_faq" d="M832.307 256.102c0-173.466-141.517-313.958-316.006-313.958s-316.006 140.493-316.006 313.958c0 173.466 316.006 697.754 316.006 697.754s316.006-524.288 316.006-697.754z" />
+<glyph unicode="&#xe904;" glyph-name="pt_ttl" d="M935.731 171.315c-19.251 154.010-250.88 538.419-250.88 538.419s-252.518-418.816-252.518-557.261c0-87.040 44.646-163.635 112.435-208.691-10.445-0.614-20.89-1.638-31.744-1.638-278.733 0-504.832 226.099-504.832 504.832s226.099 504.832 504.832 504.832 504.832-226.099 504.832-504.832c0-101.786-30.31-196.403-82.125-275.661z" />
+<glyph unicode="&#xe905;" glyph-name="study" d="M755.302 340.685v0h-562.79v609.894h187.597v-609.69h46.899v609.69h164.25v-609.69h46.899v609.69h187.597v-609.69h-70.451zM591.258 129.741l164.25 211.149h70.246l-316.621-398.746-316.621 398.541h70.246l164.25-211.149h164.25z" />
+<glyph unicode="&#xe910;" glyph-name="keyboard_arrow_right" d="M366 240.667l196 196-196 196 60 60 256-256-256-256z" />
+<glyph unicode="&#xe911;" glyph-name="keyboard_arrow_left" d="M658 252.667l-60-60-256 256 256 256 60-60-196-196z" />
+<glyph unicode="&#xe912;" glyph-name="technology" d="M415.594,93.344l-18.906-62.563c4.625-2.969,7.75-8.156,7.75-14.078C404.438,7.469,396.969,0,387.719,0,H129.891C112.5,0,96.609,7.094,85.25,18.5c-11.406,11.359-18.516,27.25-18.5,44.625V470.75C66.75,493.531,85.219,512,108,512h302.5,c19.188,0,34.75-15.547,34.75-34.734V127.578C445.25,110.125,432.344,95.844,415.594,93.344z M129.891,92.844,c-8.266,0-15.594-3.313-21.016-8.703c-5.406-5.453-8.719-12.766-8.719-21.016s3.313-15.578,8.719-21.016,c5.422-5.391,12.75-8.703,21.016-8.703h241.984l17.969,59.438H129.891z" />
+</font></defs></svg>
\ No newline at end of file
--- a/sp/clean/css/fonts/icomoon.ttf
+++ b/sp/clean/css/fonts/icomoon.ttf
--- a/sp/clean/css/fonts/icomoon.woff
+++ b/sp/clean/css/fonts/icomoon.woff
--- a/sp/clean/css/parts.css
+++ b/sp/clean/css/parts.css
-/*=========================================================
-
-
-	Site Name   toiletnavi
-	File Name   reform/parts.css
-
-	Create Date 2013/3/28
-	Update Date 2013/4/1
+@charset "UTF-8";

+html {
+ font: 62.5%/1.6 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
+ color: #333;
+}

-==========================================================*/
+body {
+ font-size: 140%;
+ font-size: 1.4rem;
+}

-div#container div#contents div#main_contents div.section div.content {
- width: 676px;
- margin-left: auto;
- margin-right: auto;
+html,
+body,
+ul,
+ol,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ padding: 0;
 }

-body#clean div#container div#contents div#main_contents div.section h4 {
- margin-bottom: 30px;
+em {
+ font-style: normal;
 }

-body#clean div#container div#contents div#main_contents div.section div.content div.normal {
- margin-bottom: 20px;
+ul,
+ol {
+ list-style: none;
 }

-body#clean div#container div#contents div#main_contents div.section div.content h5 {
- margin: 20px 0;
+img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ margin: auto;
+ border: none;
 }

-body#clean div#container div#contents div#main_contents div.section ul {}
+/*----------------------------------------------------------

-body#clean div#container div#contents div#main_contents div.section li {
- padding-left: 1em;
- text-indent: -1em;
+  fonts
+
+-----------------------------------------------------------*/
+@font-face {
+ font-family: 'icomoon';
+ src: url('fonts/icomoon.eot?hdlcni');
+ src: url('fonts/icomoon.eot?hdlcni#iefix') format('embedded-opentype'),
+  url('fonts/icomoon.ttf?hdlcni') format('truetype'),
+  url('fonts/icomoon.woff?hdlcni') format('woff'),
+  url('fonts/icomoon.svg?hdlcni#icomoon') format('svg');
+ font-weight: normal;
+ font-style: normal;
 }

-body#clean div#container div#contents div#main_contents div.section table {}
+[class^="icon-"],
+[class*=" icon-"] {
+ /* use !important to prevent issues with browser extensions that change fonts */
+ font-family: 'icomoon' !important;
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;

-body#clean div#container div#contents div#main_contents div.section td {
- width: 160px;
- padding: 3px;
- text-align: center;
- vertical-align: top;
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
 }

-body#clean div#container div#contents div#main_contents div.section td span {
- display: block;
- font-size: 80%;
+.icon-keyboard_arrow_right:before {
+ content: "\e910";
 }

-body#clean div#container div#contents div#main_contents div.section div.text_caution p.midashi {
- color: #ff6319;
+.icon-keyboard_arrow_left:before {
+ content: "\e911";
 }

-body#clean div#container div#contents div#main_contents div.section div.text_caution {
- width: 636px;
- margin: 20px auto;
- padding: 20px;
- border: 1px dotted #ff6319;
- /*
-		background-color: #fff8de;*/
+.icon-faq:before {
+ content: "\e900";
 }

-body#clean div#container div#contents div#main_contents h6 {
- padding-top: 15px;
- margin-bottom: 10px;
- color: #3252a6;
- font-weight: bold;
- font-size: 115%;
- padding-bottom: 2px;
- border-bottom: 1px solid #3252a6;
+.icon-home:before {
+ content: "\e902";
 }

-body#clean div#container div#contents div#main_contents div.content div.left01 {
- width: 242px;
- float: left;
- margin-bottom: 15px;
+.icon-pt_faq:before {
+ content: "\e903";
 }

-body#clean div#container div#contents div#main_contents div.content div.left01 p {
- width: 242px;
+.icon-pt_ttl:before {
+ content: "\e904";
 }

-body#clean div#container div#contents div#main_contents div.content div.left01 img {
- border: 1px solid #ccc;
+.icon-study:before {
+ content: "\e905";
 }

-body#clean div#container div#contents div#main_contents div.content div.right01 {
- margin-left: auto;
- width: 410px;
- margin-bottom: 15px;
+.icon-search:before {
+ content: "\e901";
 }

-body#clean div#container div#contents div#main_contents div.content div.right01 p {
- width: 410px;
+.icon-technology:before,
+.icon-maintenance:before,
+.icon-manual:before {
+ content: "\e912";
+}
+
+
+/*----------------------------------------------------------
+
+  Hypertext
+
+-----------------------------------------------------------*/
+a {
+ color: #4371ba;
+ text-decoration: none;
 }

-body#clean div#container div#contents div#main_contents div.content div.right01 p.line {
- padding-bottom: 5px;
- margin-bottom: 10px;
- border-bottom: 1px dotted #ccc;
+a:visited {
+ color: #4371ba;
+ text-decoration: none;
 }

-body#clean div#container div#contents div#main_contents div.content div.right01 ul.cautionsText01 {
+/*----------------------------------------------------------
+
+  Clearfix
+
+-----------------------------------------------------------*/
+.clearfix:after {
+ content: ".";
 display: block;
- font-size: 85%;
- margin-top: 5px;
- padding: 10px;
- border: 1px dotted #ff6319;
+ height: 0;
+ clear: both;
+ visibility: hidden;
 }

-body#clean div#container div#contents div#main_contents div.content div.right01 ul.cautionsText01 span.midashi {
- color: #ff6319;
+.clearfix {
+ zoom: 1;
 }

-body#clean div#container div#contents div#main_contents span.box_title {
- display: inline-block;
- padding: 1px 5px;
- background-color: #3252a6;
- color: #fff;
- font-weight: bold;
- border-radius: 3px;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- margin-bottom: 5px;
- font-size: 8pt !important;
+/*----------------------------------------------------------
+
+  space
+
+-----------------------------------------------------------*/
+
+/* !Margin ------------------------------------------------------------------ */
+.mt00 {
+ margin-top: 0 !important;
 }

-body#clean div#container div#contents div#main_contents span.box_title2 {
- display: inline-block;
- padding: 1px 3px;
- background-color: #ff6319;
- color: #fff;
- font-weight: bold;
- border-radius: 3px;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- margin-bottom: 5px;
- font-size: 8pt !important;
+.mt05 {
+ margin-top: 5px !important;
 }

-body#clean div#container div#contents div#main_contents div.content div.left02 {
- width: 300px;
- float: left;
- margin-bottom: 15px;
+.mt10 {
+ margin-top: 10px !important;
 }

-body#clean div#container div#contents div#main_contents div.content div.right02 {
- margin-left: auto;
- width: 300px;
- margin-bottom: 15px;
+.mt12 {
+ margin-top: 12px !important;
 }

-body#clean div#container div#contents div#main_contents div.content p.normal {
- margin-bottom: 15px;
+.mt15 {
+ margin-top: 15px !important;
 }

-body#clean div#container div#contents div#main_contents p.notice {
- margin-bottom: 15px;
- color: #fb0000;
+.mt20 {
+ margin-top: 20px !important;
 }

-body#clean div#container div#contents div#main_contents div.content .box410r {
- width: 410px;
- margin-left: auto;
+.mt25 {
+ margin-top: 25px !important;
 }

+.mt30 {
+ margin-top: 30px !important;
+}

-/*
-	
-	
-	
-	body#clean div#container div#contents div#main_contents div.section div.content div.left{
-		width: 325px;
-		float: left;
-		margin-bottom: 20px;
-	}
-	
-	
-	body#clean div#container div#contents div#main_contents div.section div.content h6{
-		color: #00B7CE;
-		font-size: 110%;
-		font-weight: bold;
-	}
-	
-	body#clean div#container div#contents div#main_contents div.section div.content div.left p{
-		
-	}
-	
-	body#clean div#container div#contents div#main_contents div.section div.content div.right{
-		width: 325px;
-		margin-left: auto;
-		margin-bottom: 20px;
-	}
-	
-	body#clean div#container div#contents div#main_contents div.section div.content div.right p{
-		
-	}
-	
-	
-	body#clean div#container div#contents div#main_contents div.section div.text_caution ul{
-	}
-	
-	body#clean div#container div#contents div#main_contents div.section div.text_caution img{
-		margin-top: 10px;
-	}
-	
-	body#clean div#container div#contents div#main_contents div.section div.text_caution li{
-		padding-left: 1em;
-		text-indent: -1em;		
-	}
-	
-	body#clean div#container div#contents div#main_contents div.section div.content div.left2{
-		width: 480px;
-		float: left;
-		margin-bottom: 20px;
-	}
-	
-	body#clean div#container div#contents div#main_contents div.section div.content div.right2{
-		width: 150px;
-		margin-left: auto;
-		margin-bottom: 20px;
-	}
-	*/
-
-/* manual */
-
-
-body#clean02 div#container div#contents div#main_contents div.section h4 {
- margin-bottom: 20px;
-}
-
-body#clean02 div#container div#contents div#main_contents div.section div.section div.content {
- width: 676px;
- margin: 0 auto;
-}
-
-body#clean02 div#container div#contents div#main_contents div.section div.content table {
- margin-top: 20px;
- border: 2px solid #eee;
-}
-
-body#clean02 div#container div#contents div#main_contents div.section div.content th {
- width: 160px;
- background: url(../images/clean02/th_back.jpg) repeat left center;
- padding: 5px 10px;
- font-weight: bold;
- border-right: 1px solid #eee;
- border-bottom: 1px solid #eee;
- vertical-align: center;
+.mt35 {
+ margin-top: 35px !important;
 }

-body#clean02 div#container div#contents div#main_contents div.section div.content .last {
- border-bottom: none;
+.mt40 {
+ margin-top: 40px !important;
 }

-body#clean02 div#container div#contents div#main_contents div.section div.content td {
- padding: 5px 10px;
- border-bottom: 1px solid #eee;
- vertical-align: center;
+.mt45 {
+ margin-top: 45px !important;
 }

+.mt50 {
+ margin-top: 50px !important;
+}

-/* section_a */
-body#clean02 div#container div#contents div#main_contents div#section_a div.content td {
- text-align: center;
+.mr00 {
+ margin-right: 0 !important;
 }

-body#clean02 div#container div#contents div#main_contents div#section_a div.content td.part01 {
- width: 140px;
- border-right: 1px solid #eee;
+.mr05 {
+ margin-right: 5px !important;
 }

-body#clean02 div#container div#contents div#main_contents div#section_a div.content td.part02 {
- width: 140px;
- border-right: 1px solid #eee;
+.mr10 {
+ margin-right: 10px !important;
 }

-body#clean02 div#container div#contents div#main_contents div#section_a div.content td.part03 {
- width: 140px;
+.mr12 {
+ margin-right: 12px !important;
 }

+.mr15 {
+ margin-right: 15px !important;
+}

-/* section_b */
+.mr20 {
+ margin-right: 20px !important;
+}

-body#clean02 div#container div#contents div#main_contents div#section_b div.content td.part01 {
- width: 320px;
- border-right: 1px solid #eee;
+.mr25 {
+ margin-right: 25px !important;
 }

-body#clean02 div#container div#contents div#main_contents div#section_b div.content td.part02 {
- width: 120px;
- text-align: center;
+.mr30 {
+ margin-right: 30px !important;
 }

-body#clean02 div#container div#contents div#main_contents div#section_b div.content span.tell01 {
- background: url(../images/clean02/icon_tell01.gif) no-repeat left 50%;
- padding: 8px 0 5px 37px;
- margin-left: 10px;
- font-weight: bold;
- font-size: 120%;
+.mr35 {
+ margin-right: 35px !important;
 }

-body#clean02 div#container div#contents div#main_contents div#section_b div.content span.tell02 {
- background: url(../images/clean02/icon_tell02.gif) no-repeat left 50%;
- padding: 8px 0 5px 37px;
- margin-left: 10px;
- font-weight: bold;
- font-size: 120%;
+.mr40 {
+ margin-right: 40px !important;
 }

-body#clean02 div#container div#contents div#main_contents div#section_b div.content span.tell03 {
- background: url(../images/clean02/icon_tell03.gif) no-repeat left 50%;
- padding: 8px 0 5px 37px;
- margin-left: 10px;
- font-weight: bold;
- font-size: 120%;
+.mr45 {
+ margin-right: 45px !important;
 }

-body#clean02 div#container div#contents div#main_contents div#section_b div.content span.tell03_n {
- padding: 8px 0 5px 0;
- margin-left: 10px;
- font-weight: bold;
- font-size: 120%;
+.mr50 {
+ margin-right: 50px !important;
 }

-body#clean02 div#container div#contents div#main_contents div#section_b div.content span.tell04 {
- padding: 8px 0 5px 0;
- margin-left: 10px;
- font-weight: bold;
- font-size: 120%;
+.mb00 {
+ margin-bottom: 0 !important;
 }

+.mb05 {
+ margin-bottom: 5px !important;
+}

-/* 高齢社会　*/
+.mb10 {
+ margin-bottom: 10px !important;
+}

-body#reform02 div#container div#contents div#main_contents div#section_read div.content {
- width: 638px;
- margin: 0 auto 20px auto;
+.mb12 {
+ margin-bottom: 12px !important;
 }

-body#reform02 div#container div#contents div#main_contents div#section_read div.content p {
- width: 638px;
- margin-top: 10px;
- font-size: 85%;
+.mb15 {
+ margin-bottom: 15px !important;
 }

-/* 介護 */
+.mb20 {
+ margin-bottom: 20px !important;
+}

-body#reform03 div#container div#contents div.content h6 {
- width: 676px;
- margin: 20px auto;
+.mb25 {
+ margin-bottom: 25px !important;
 }

-body#reform03 div#container div#contents div.content ul.main_text {
- width: 666px;
- margin: 0 auto 15px auto;
+.mb30 {
+ margin-bottom: 30px !important;
 }

-body#reform03 div#container div#contents div.content ul.main_text li {
- padding-left: 1em;
- text-indent: -1em;
- padding-bottom: 10px;
+.mb35 {
+ margin-bottom: 35px !important;
 }

-body#reform03 div#container div#contents div.content ul.main_text li span.bold_bluetext {
- display: block;
- font-weight: bold;
- color: #0543A3;
+.mb40 {
+ margin-bottom: 40px !important;
 }

-body#reform03 div#container div#contents div.content ul.main_text li span.s_bluetext {
- display: block;
- font-size: 85%;
- padding-left: 1em;
- color: #187ABF;
+.mb45 {
+ margin-bottom: 45px !important;
 }

-body#reform03 div#container div#contents div.content p {
- width: 666px;
- margin: 15px auto 0 auto;
+.mb50 {
+ margin-bottom: 50px !important;
 }

+.mb100 {
+ margin-bottom: 100px !important;
+}

-body#reform03 div#container div#contents div.content ul.item_list {
- width: 650px;
- margin: 0 auto 20px auto;
+.ml00 {
+ margin-left: 0 !important;
 }

-body#reform03 div#container div#contents div.content ul.item_list li {
- width: 200px;
- float: left;
- padding-right: 20px;
- margin-bottom: 30px;
- text-align: left;
+.ml05 {
+ margin-left: 5px !important;
 }

-body#reform03 div#container div#contents div.content ul.item_list li span {
- display: block;
- font-weight: bold;
- position: relative;
- top: 10px;
+.ml10 {
+ margin-left: 10px !important;
 }

-body#reform03 div#container div#contents div.content ul.item_list li.last {
- padding-right: 0;
+.ml12 {
+ margin-left: 12px !important;
 }

-body#reform03 div#container div#contents div.content p.p_bluetext {
- font-weight: bold;
- color: #0543A3;
+.ml15 {
+ margin-left: 15px !important;
 }

-body#reform03 div#container div#contents div.content ul.rent_list {
- width: 610px;
- margin: 0 auto 20px auto;
- padding: 20px;
- border: 2px solid #eee;
- background-color: #f6f6f6;
+.ml20 {
+ margin-left: 20px !important;
 }

-body#reform03 div#container div#contents div.content ul.rent_list li {
- width: 200px;
- float: left;
+.ml25 {
+ margin-left: 25px !important;
 }

-/* point */
+.ml30 {
+ margin-left: 30px !important;
+}

-div#container div#contents div#main_contents div.content p.point2 {
- width: 336px;
- color: #0543A3;
- font-weight: bold;
- font-size: 110%;
- padding-left: 90px;
- padding-top: 3px;
+.ml35 {
+ margin-left: 35px !important;
 }

-div#container div#contents div#main_contents div.content p.p00 {
- background: url(../../shared/images/common/icon_point.png) no-repeat left top;
+.ml40 {
+ margin-left: 40px !important;
 }

+.ml45 {
+ margin-left: 45px !important;
+}

-body#reform04 div#container div#contents div.content h6 {
- width: 676px;
- margin: 20px auto;
+.ml50 {
+ margin-left: 50px !important;
 }

-div#container div#contents div#main_contents div.section_menu03 li.last {
- margin-right: 0;
+/* !Padding  ---------------------------------------------------------------- */
+.pt00 {
+ padding-top: 0 !important;
 }

-div#container div#contents div#main_contents div.section_menu03 li.on {
- color: #888;
+.pt05 {
+ padding-top: 5px !important;
 }

-div#container div#contents div#main_contents div.bottom_menu_space {
- margin-bottom: 40px;
+.pt10 {
+ padding-top: 10px !important;
 }

-body#reform04 div#container div#contents div.content {
- width: 676px;
- margin: 0 auto 20px auto;
+.pt12 {
+ padding-top: 12px !important;
 }

-body#reform04 div#container div#contents div.content p {
- width: 666px;
- margin: 15px auto 0 auto;
+.pt15 {
+ padding-top: 15px !important;
 }

-body#reform04 div#container div#contents div.content div.left {
- width: 220px;
- float: left;
+.pt20 {
+ padding-top: 20px !important;
 }

-body#reform04 div#container div#contents div.content div.left span {
- display: block;
- font-weight: bold;
+.pt25 {
+ padding-top: 25px !important;
 }

-body#reform04 div#container div#contents div.content div.right {
- width: 426px;
- float: right;
+.pt30 {
+ padding-top: 30px !important;
 }

-body#reform04 div#container div#contents div.content ul.main_text {
- width: 426px;
- margin: 0 auto 15px auto;
+.pt35 {
+ padding-top: 35px !important;
 }

-body#reform04 div#container div#contents div.content ul.main_text li {
- padding-left: 1em;
- text-indent: -1em;
- padding-bottom: 10px;
+.pt40 {
+ padding-top: 40px !important;
 }

-body#reform04 div#container div#contents div.content p.p_bluetext {
- width: 426px;
- font-weight: bold;
- color: #00B7CE;
+.pt45 {
+ padding-top: 45px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list01 {
- width: 426px;
- margin: 0 auto 10px auto;
+.pt50 {
+ padding-top: 50px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list01 li {
- width: 90px;
- margin-right: 10px;
- float: left;
+.pt55 {
+ padding-top: 55px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list01 li.last {
- margin-right: 0;
+.pt60 {
+ padding-top: 60px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list01 li span {
- width: 90px;
- display: block;
- font-size: 8pt;
- text-align: center;
+.pr00 {
+ padding-right: 0 !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list02 {
- width: 426px;
- margin: 0 auto 10px auto;
+.pr05 {
+ padding-right: 5px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list02 li {
- width: 190px;
- margin-right: 10px;
- float: left;
+.pr10 {
+ padding-right: 10px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list02 li.last {
- margin-right: 0;
+.pr12 {
+ padding-right: 12px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list02 li span {
- display: block;
- font-size: 8pt;
- text-align: center;
+.pr15 {
+ padding-right: 15px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list03 {
- width: 666px;
- margin: 0 auto 10px auto;
+.pr20 {
+ padding-right: 20px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list03 li {
- width: 120px;
- margin-right: 10px;
- float: left;
+.pr25 {
+ padding-right: 25px !important;
 }

-body#reform04 div#container div#contents .content_bottom {
- width: 676px;
- margin: 20px auto;
- clear: both;
- float: none;
+.pr30 {
+ padding-right: 30px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list03 li.last {
- margin-right: 0;
+.pr35 {
+ padding-right: 35px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list03 li span {
- display: block;
- font-size: 8pt;
- text-align: center;
+.pr40 {
+ padding-right: 40px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list04 {
- width: 426px;
- margin: 0 auto 10px auto;
+.pr45 {
+ padding-right: 45px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list04 li {
- margin-right: 10px;
- float: left;
+.pr50 {
+ padding-right: 50px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list04 li.list_left {
- width: 120px;
+.pb00 {
+ padding-bottom: 0 !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list04 li.list_right {
- width: 280px;
+.pb05 {
+ padding-bottom: 5px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list04 li.last {
- margin-right: 0;
+.pb10 {
+ padding-bottom: 10px !important;
 }

-body#reform04 div#container div#contents div.content ul.rent_list04 li span {
- display: block;
- font-size: 8pt;
- text-align: center;
+.pb12 {
+ padding-bottom: 12px !important;
 }

+.pb15 {
+ padding-bottom: 15px !important;
+}

+.pb20 {
+ padding-bottom: 20px !important;
+}

-/* seat */
+.pb25 {
+ padding-bottom: 25px !important;
+}

-body#clean03 div#container div#contents div#main_contents div.section h5 {
- margin: 0 auto 15px auto;
- width: 676px;
+.pb30 {
+ padding-bottom: 30px !important;
 }

-body#clean03 div#container div#contents div#main_contents h6 {
- padding-top: 15px;
- margin-bottom: 10px;
- color: #3252a6;
- font-weight: bold;
- font-size: 115%;
- padding-bottom: 2px;
- border-bottom: 1px solid #3252a6;
+.pb35 {
+ padding-bottom: 35px !important;
 }

-body#clean03 div#container div#contents div#main_contents span.bold {
- font-weight: bold;
- font-size: 110%;
+.pb40 {
+ padding-bottom: 40px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content {
- margin-bottom: 20px;
+.pb45 {
+ padding-bottom: 45px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content p {
- width: 670px;
- margin: 10px auto;
+.pb50 {
+ padding-bottom: 50px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content p.text_caution {
- font-size: 85%;
+.pl00 {
+ padding-left: 0 !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content div.center {
- text-align: center;
+.pl05 {
+ padding-left: 5px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content div.left {
- width: 288px;
- float: left;
- text-align: left;
+.pl10 {
+ padding-left: 10px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content div.left p {
- padding-bottom: 15px;
+.pl12 {
+ padding-left: 12px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content div.right {
- margin-left: auto;
- width: 346px;
- margin-right: 10px;
+.pl15 {
+ padding-left: 15px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content div.left02 {
- width: 346px;
- float: left;
+.pl20 {
+ padding-left: 20px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content div.right02 {
- margin-left: auto;
- width: 288px;
+.pl25 {
+ padding-left: 25px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content div.right02 p {
- width: 288px;
+.pl30 {
+ padding-left: 30px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content div.left03 {
- width: 315px;
- float: left;
- margin-bottom: 15px;
+.pl35 {
+ padding-left: 35px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content div.left03 p {
- width: 315px;
+.pl40 {
+ padding-left: 40px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content div.right03 {
- margin-left: auto;
- width: 315px;
- margin-bottom: 15px;
+.pl45 {
+ padding-left: 45px !important;
 }

-body#clean03 div#container div#contents div#main_contents div.content div.right03 p {
- width: 315px;
+.pl50 {
+ padding-left: 50px !important;
 }


-body#clean03 div#container div#contents div#main_contents div.content table.fanction {
- width: 660px;
- margin: 20px auto;
-}
+/*----------------------------------------------------------

-body#clean03 div#container div#contents div#main_contents div.content table.fanction th {
- border-right: 1px solid #fff;
- border-bottom: 1px solid #fff;
- background-color: #5c79ae;
- padding: 8px;
- color: #fff;
- text-align: center;
-}
+  header

-body#clean03 div#container div#contents div#main_contents div.content table.fanction td {
- border-bottom: 1px solid #fff;
- border-right: 1px solid #fff;
- padding: 8px;
+-----------------------------------------------------------*/
+#header {
+ position: fixed;
+ top: 0;
+ height: 85px;
+ width: 100%;
+ background-color: #fff;
+ line-height: 1;
+ z-index: 100;
+}

+#header .description {
+ padding: 7px 4%;
+ background-color: #00b7ce;
+ font-size: 85.7%;
+ color: #fff;
 }

-body#clean03 div#container div#contents div#main_contents div.content table.fanction td.td01 {
- width: 18%;
- background-color: #f1f5fa;
+#header .logo {
+ position: relative;
+ left: 4%;
+ display: block;
+ width: 40%;
+ height: 60px;
+ padding: 0;
 }

-body#clean03 div#container div#contents div#main_contents div.content table.fanction td.td02 {
- width: 15%;
- background-color: #e9eff7;
+#header .logo img {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ display: block;
 }

-body#clean03 div#container div#contents div#main_contents div.content table.fanction td.td03 {
- width: 27%;
- background-color: #f1f5fa;
+.menu-link {
+ position: absolute;
+ display: block;
+ top: 25px;
+ right: 0;
+ background-color: #657a85;
+ z-index: 10;
+ width: 60px;
+ height: auto;
+ padding: 22px 0 10px;
 }

-body#clean03 div#container div#contents div#main_contents div.content table.fanction td.td04 {
- width: 40%;
- background-color: #e9eff7;
+.menu-link:after {
+ content: "MENU";
+ display: block;
+ padding: 14px 0 0;
+ vertical-align: middle;
+ text-align: center;
+ font-size: 10px;
+ color: #fff;
 }

-.small_txt {
- font-size: 77%;
+.menu-link span {
+ position: relative;
 display: block;
+ width: 50%;
 }

+.menu-link span,
+.menu-link span:before,
+.menu-link span:after {
+ background-color: #fff;
+ height: 4px;
+ margin: auto;
+}

-/* maintenance　*/
+.menu-link span:before,
+.menu-link span:after {
+ position: absolute;
+ width: 100%;
+ margin-top: 10px;
+ content: "";
+ left: 0;
+}

-body#clean04 div#container div#contents div#main_contents div.content div.center p.cap {
- width: 640px;
- text-align: left;
- margin: 0 auto 10px auto;
+.menu-link span:after {
+ margin-top: -10px;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.center p.cap span.img {
- width: 320px;
- float: left;
+.menu-link.active {
+ padding-top: 0;
+ line-height: 1;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.center p.cap span.text {
- float: right;
- width: 300px;
+.menu-link:hover,
+.menu-link.active:hover {
+ text-decoration: none;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.center p.cap span.text a {
- padding: 5px 15px;
- background-color: #00b7cc;
+.menu-link.active:before {
+ content: "×";
+ display: block;
+ margin: 8px auto 0;
+ line-height: 32px;
+ text-align: center;
+ font-size: 40px;
 color: #fff;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.center h6 {
- margin-left: 15px;
- font-weight: bold;
+.menu-link.active:after {
+ padding-top: 0;
 }

-body#clean04 div#container div#contents div#main_contents div.section div.content div.normal {
- margin-bottom: 20px;
+.menu-link.active span {
+ display: none;
 }

-body#clean04 div#container div#contents div#main_contents div.section div.content h5 {
- margin: 20px 0;
+#global_nav {
+ position: absolute;
+ top: 85px;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ display: none;
+ padding-bottom: 2em;
+ background-color: #00b7ce;
+ z-index: 10;
+ overflow-y: scroll;
 }

-body#clean04 div#container div#contents div#main_contents div.section ul {}
+#global_nav > ul {
+ width: 92%;
+ margin: auto;
+}

-body#clean04 div#container div#contents div#main_contents div.section li {
- padding-left: 1em;
- text-indent: -1em;
+#global_nav > ul > li {
+ position: relative;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.left01 {
- width: 242px;
- float: left;
- margin-bottom: 15px;
+#global_nav li a {
+ position: relative;
+ display: block;
+ padding: 16px 0;
+ font-weight: bold;
+ color: #fff;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.left01 p {
- width: 242px;
+#global_nav li a span {
+ font-size: 80%;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.left01 img {
- border: 1px solid #ccc;
+#global_nav > ul > li > a {
+ border-bottom: solid 1px #fff;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.right01 {
- margin-left: auto;
- width: 410px;
- margin-bottom: 15px;
+#global_nav > ul > li > a:before {
+ margin-right: 6px;
+ margin-left: 2%;
+ vertical-align: top;
+ font-size: 120%;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.right01 p {
- width: 410px;
+#global_nav > ul > li > a.icon-manual svg {
+ display: inline;
+ margin-left: 2%;
+ margin-right: 6px;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.right01 p.line {
- padding-bottom: 5px;
- margin-bottom: 10px;
- border-bottom: 1px dotted #ccc;
+#global_nav > ul > li li a {
+ padding: 14px 16% 14px 4%;
+ background-color: #fff;
+ border-bottom: solid 1px #00b7ce;
+ line-height: 1.2;
+ color: #333;
 }

-body#clean04 div#container div#contents div#main_contents div.content .cautionsText01 {
+#global_nav > ul > li li a span {
 display: block;
- font-size: 85%;
- margin-top: 5px;
- padding: 10px;
- border: 1px dotted #ff6319;
+ margin-bottom: 4px;
 }

-body#clean04 div#container div#contents div#main_contents div.content .cautionsText01 span.midashi {
- color: #ff6319;
+#global_nav > ul > li > a.pc_site {
+ margin-top: 1em;
+ padding: 14px 16% 14px 4%;
+ background-color: #657a85;
+ border: none;
 }

-body#clean04 div#container div#contents div#main_contents div.content .cautionsText01 .right {
- width: 173px;
- float: right;
+#global_nav > ul > li > a.icon-home:after,
+#global_nav > ul > li > a.icon-faq:after,
+#global_nav > ul > li > a.pc_site:after,
+#global_nav > ul > li li a:after {
+ content: "\e910";
+ position: absolute;
+ right: 4%;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ display: block;
+ width: 30px;
+ height: 14px;
+ padding: 8px 0;
+ border: solid 2px #fff;
+ border-radius: 50%;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ text-align: center;
+ font-family: "icomoon" !important;
 }

-body#clean04 div#container div#contents div#main_contents div.content .cautionsText01 .left {
- width: 210px;
- float: left;
+#global_nav > ul > li > a.icon-study:after,
+#global_nav > ul > li > a.icon-technology:after,
+#global_nav > ul > li > a.icon-maintenance:after,
+#global_nav > ul > li > a.icon-manual:after {
+ content: "\e910";
+ position: absolute;
+ right: 4%;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ display: block;
+ width: 30px;
+ height: 14px;
+ padding: 8px 0;
+ border: solid 2px #fff;
+ border-radius: 50%;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ text-align: center;
+ font-family: "icomoon" !important;
+ /*  transform: rotateZ(90deg);*/
 }

-body#clean04 div#container div#contents div#main_contents span.box_title {
- display: inline-block;
- padding: 1px 5px;
- background-color: #3252a6;
- color: #fff;
- font-weight: bold;
- border-radius: 3px;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- margin-bottom: 5px;
- font-size: 8pt !important;
+#global_nav > ul > li > a.icon-manual:before {
+ background-image: url(/sp/shared/images/maual.svg);
 }

-body#clean04 div#container div#contents div#main_contents span.box_title2 {
- display: inline-block;
- padding: 1px 3px;
- background-color: #ff6319;
- color: #fff;
- font-weight: bold;
- border-radius: 3px;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- margin-bottom: 5px;
- font-size: 8pt !important;
+#global_nav .study-contents,
+#global_nav .technology-contents,
+#global_nav .maintenance-contents {
+ display: none;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.left02 {
- width: 300px;
- float: left;
- margin-bottom: 15px;
+#global_nav > ul > li li a:after {
+ border-color: #00b7ce;
+ color: #00b7ce;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.right02 {
- margin-left: auto;
- width: 300px;
- margin-bottom: 15px;
+#global_nav > ul > li li:nth-child(2) a:after {
+ border-color: #ff7270;
+ color: #ff7270;
 }

-body#clean04 div#container div#contents div#main_contents div.content p.normal {
- margin-bottom: 15px;
+#global_nav img.svg {
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 15px;
+ left: 6px;
 }

-body#clean04 div#container div#contents div#main_contents div.content .box410r {
- width: 410px;
+
+#search_area {
+ width: 92%;
 margin-left: auto;
+ padding: 1em 4%;
+ background-color: #73d7e5;
 }

-body#clean04 div#container div#contents div#main_contents h6.h6midashi {
- padding-top: 15px;
- margin-bottom: 10px;
- color: #3252a6;
- font-weight: bold;
- font-size: 115%;
- padding-bottom: 2px;
- border-bottom: 1px solid #3252a6;
+#search_area form.gsc-search-box,
+#search_area table.gsc-search-box {
+ margin-bottom: 0;
 }

-body#clean04 div#container div#contents div#main_contents h6.h6midashi02 {
- padding: 8px 15px;
- margin-bottom: 10px;
- background-color: #3252a6;
- color: #fff;
- font-weight: bold;
- font-size: 115%;
- width: 30px;
- text-align: center;
- line-height: 100%;
+#search_area .gsc-input {
+ padding: 0;
+ border-spacing: 0 !important;
+ width: 98% !important;
+ height: 23px !important;
 }

-/* 20140630add */
-
-body#clean04 div#container div#contents div#main_contents div.content div.left03 {
- width: 400px;
- float: left;
- margin-bottom: 15px;
+#search_area .gsc-input-box {
+ border: none !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ height: 32px !important;
 }

-body#clean04 div#container div#contents div#main_contents div.content div.right03 {
- margin-left: auto;
- width: 250px;
- margin-bottom: 15px;
+#search_area .gsc-search-box-tools .gsc-search-box .gsc-input {
+ padding-right: 0 !important;
 }

-.font_conditioned div#container div#contents div#main_contents div#section_read02 p {
- font-size: 114%;
+#search_area table.gsc-search-box td {
+ vertical-align: top;
+}
+
+/*#search_area .gsc-input-box {
+  height:20px;
+}*/
+/*#search_area input[type="text"]*/
+#search_area #gs_tti50 {
+ /*background: url(../images/head/search_box.jpg) no-repeat center left;*/
+ border: none;
+ line-height: 20px !important;
+ /*height: 20px !important;*/
+ outline: none;
+}
+
+#search_area input[type="text"] {
+ background: none !important;
+}
+
+#search_area .gsib_b .gsst_b {
+ padding: 0 !important;
+}
+
+#search_area td.gsc-search-button {
+ width: 32px !important;
+ height: 20px !important;
+ /*background:url(../images/head/icon_search_off.jpg) no-repeat;*/
+ background: #657A85;
+ border: none;
+ line-height: 14px;
+ height: 14px;
+ outline: none;
+ /*text-indent: -9999px;*/
+ padding: 3px 0 !important;
+ margin: 9px 2px 0 2px !important;
+ border: none;
+}
+
+#search_area td.gsc-search-button input.gsc-search-button {
+ padding: 3px 8px !important;
+ /*margin-left: 5px  !important;*/
+}
+
+#search_area td.gsc-search-button input.gsc-search-button input {
+ background: none !important;
+ border: none !important;
+}
+
+#search_area td.gsc-clear-button {
+ line-height: 14px;
+ height: 14px;
+ background: #e5e5e5;
+}
+
+.gsc-result .gs-title {
+ height: 1.5em !important;
+}
+
+#search_area td.gsib_a {
+ padding-right: 1%;
+ padding-left: 1%;
+ padding-bottom: 4px;
+}
+
+
+/*----------------------------------------------------------
+
+  footer
+
+-----------------------------------------------------------*/
+#footer .bnr {
+ padding: 2em 0;
+ border-top: solid 1px #ddd;
+}
+
+#footer .bnr img {
+ max-width: 92%;
+}
+
+#footer #subnavi {
+ text-align: center;
+ font-weight: bold;
+}
+
+#footer #subnavi strong,
+#footer #subnavi em {
+ display: block;
+ color: #fff;
+}
+
+#footer #subnavi strong {
+ padding: .7em 0;
+ background-color: #657a85;
+ font-size: 128.6%;
+}
+
+/*
+#footer #subnavi strong:after {
+ content: "\e910";
+ display: inline-block;
+ width: 34px;
+ padding: 3px 0;
+ margin-left: 1em;
+ transform: rotate(90deg);
+ border: solid 3px #fff;
+ border-radius: 50%;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ text-align: center;
+ font-family: "icomoon" !important;
+}*/
+
+#footer #subnavi strong.active:after {
+ transform: rotate(-90deg);
+}
+
+#footer #subnavi em {
+ padding: 1em 0;
+ background-color: #00b7ce;
+}
+
+#footer #subnavi ul:after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+#footer #subnavi li {
+ display: block;
+ width: 50%;
+ float: left;
+ border-bottom: solid 1px #00b7ce;
+}
+
+#footer #subnavi li:nth-child(3),
+#footer #subnavi li:nth-child(4),
+#footer #subnavi ul.news li {
+ border-bottom: none;
+}
+
+#footer #subnavi li a {
+ display: block;
+ padding: 1em 0;
+ color: #00b7ce;
+}
+
+#footer #subnavi li:nth-child(2n+1) a {
+ border-right: solid 1px #00b7ce;
+}
+
+#footer #subnavi .about {
+ padding: 1em 3%;
+ background-color: #73d7e5;
+}
+
+#footer #subnavi .about li {
+ border: none;
+}
+
+#footer #subnavi .about a {
+ width: 92%;
+ margin: auto;
+ background-color: #fff;
+ border: solid 1px #00b7ce;
+ color: #333;
+}
+
+#footer .links {
+ padding: 1em 4%;
+ margin: auto;
+ background-color: #f2f3f6;
+}
+
+#footer .links > div {
+ padding: 1em;
+ background-color: #fff;
+ box-sizing: border-box;
+ border: solid 1px #e1e4ed;
+}
+
+#footer .links strong {
+ display: block;
+ padding-bottom: .5em;
+ margin-bottom: .5em;
+ border-bottom: solid 1px #ddd;
+}
+
+#footer .links li a {
+ display: block;
+ padding: .5em 0;
+}
+
+#footer .links li a:before {
+ content: "\e910";
+ display: inline-block;
+ margin-right: 5px;
+ font-family: 'icomoon' !important;
+ font-weight: bold;
+ color: #bbb;
+}
+
+#footer #copyright {
+ padding: 1em;
+ background-color: #00b7ce;
+ text-align: center;
+ font-size: 85.7%;
+ color: #fff;
+}
+
+/*----------------------------------------------------------
+
+  common style
+
+-----------------------------------------------------------*/
+#main {
+ position: relative;
+ margin-top: 85px;
+}
+
+#main .ttl_header {
+ padding: 1.5em 0;
+ background: -moz-linear-gradient(left, #00b7ce, #84e0ed);
+ background: -webkit-gradient(linear, left top, right bottom, from(#00b7ce), to(#84e0ed));
+ line-height: 1.4;
+ text-align: center;
+ font-size: 171.4%;
+ font-weight: bold;
+ color: #fff;
+}
+
+#main .content,
+#aside .content {
+ width: 92%;
+ margin: auto;
+}
+
+#main .content .list p {
+ text-indent: -1em;
+ margin-left: 1em;
+}
+
+/*----------------------------------------------------------
+
+  study,interview
+
+-----------------------------------------------------------*/
+#main #study_index .section,
+#main #index_other .section {
+ margin: 2em auto;
+ box-sizing: border-box;
+ border: solid 1px #ddd;
+}
+
+#main #study_index .section .content,
+#main #index_other .section .content {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ width: 88%;
+ background-color: #fff;
+}
+
+#main #study_index .section h2,
+#main #index_other .section h2 {
+ margin-bottom: 1em;
+ padding-bottom: .5em;
+ border-bottom: solid 2px #00b7ce;
+ line-height: 1.2;
+ font-size: 128.6%;
+}
+
+#main #study_index .section h2 span,
+#main #index_other .section h2 span {
+ display: block;
+ margin-bottom: 4px;
+ font-size: 75%;
+}
+
+#main #study_index .section a,
+#main #index_other .section a {
+ display: block;
+ margin-top: 1em;
+}
+
+#main #study_index .section a:before,
+#main #index_other .section a:before {
+ content: "\e910";
+ display: block;
+ width: 34px;
+ padding: 3px 0;
+ border: solid 3px #00b7ce;
+ border-radius: 50%;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ text-align: center;
+ font-family: "icomoon" !important;
+ font-weight: bold;
+ font-size: 18px;
+ color: #00b7ce;
+}
+
+#main #study_index .section .pink h2 {
+ border-color: #ff7270;
+}
+
+#main #study_index .section .pink a:before {
+ border-color: #ff7270;
+ color: #ff7270;
+}
+
+
+#main #study .lead {
+ padding: 1em 4%;
+}
+
+#main #study .lead .ttl {
+ display: block;
+ line-height: 1.4;
+ font-size: 128.6%;
+ font-weight: bold;
+ color: #00b7ce;
+}
+
+#main #study .lead .ttl span {
+ display: block;
+ font-size: 66.6%;
+}
+
+#main #study .lead p {
+ margin-top: .5em;
+ font-size: 114.3%;
+}
+
+#main #study .section {
+ padding: 2em 0;
+ border-top: solid 1px #ddd;
+}
+
+#main #study .section .pt {
+ margin-bottom: 1em;
+ margin-left: 2.3em;
+ text-indent: -2.3em;
+ line-height: 1;
+ font-size: 128.6%;
+}
+
+#main #study .section .pt:before {
+ content: "\e904";
+ display: inline;
+ margin-right: 8px;
+ padding: 2px 2px 1px 1px;
+ vertical-align: middle;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#7ddeeb), to(#08b9d0));
+ -webkit-text-fill-color: transparent;
+ -webkit-background-clip: text;
+ font-size: 32px;
+ font-family: 'icomoon' !important;
+}
+
+#main #study .section .block:after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+#main #study .section .lft {
+ width: 36%;
+ float: left;
+}
+
+#main #study .section .rgt {
+ width: 60%;
+ float: right;
+}
+
+#main #study .section ul {
+ margin-top: 1.5em;
+ border: solid 1px #ddd;
+}
+
+#main #study .section li a {
+ position: relative;
+ display: block;
+ padding: 1em 18% 1em 4%;
+ border: solid 1px #ddd;
+ line-height: 1.4;
+ font-weight: bold;
+ font-size: 128.6%;
+ color: #333;
+}
+
+#main #study .section li a:after {
+ content: "\e910";
+ position: absolute;
+ right: 4%;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ display: block;
+ width: 34px;
+ height: 18px;
+ padding: 8px 0;
+ border: solid 3px #00b7ce;
+ border-radius: 50%;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ text-align: center;
+ line-height: 1;
+ font-family: "icomoon" !important;
+ font-weight: bold;
+ font-size: 18px;
+ color: #00b7ce;
+}
+
+#main #study .section li a span {
+ display: block;
+ margin-bottom: 4px;
+ font-size: 66.6%;
+}
+
+#main #study.study02 .box {
+ margin-bottom: 1em;
+}
+
+#main #study.study02 .box em {
+ display: block;
+ font-weight: bold;
+}
+
+#main #study.study02 table {
+ border-spacing: 0;
+ border-collapse: collapse;
+ font-size: 85%;
+}
+
+#main #study.study02 table td {
+ border: 1px solid #ccc;
+}
+
+#main #study.study02 table td.tr02,
+#main #study.study02 table td.tr03 {
+ width: 31%;
+}
+
+#main #study.study02 table td.tr04 {
+ width: 18%;
+}
+
+#main #study.study02 table .blue {
+ background-color: #cef9ff;
+}
+
+#main #study.study02 table .red {
+ background-color: #ffc5c1;
+}
+
+#main #study.study02 table .center {
+ text-align: center;
+}
+
+#main #study.study02 table .right {
+ text-align: right;
+}
+
+#main #study.pink .lead .ttl,
+#main #study.pink .lead p {
+ color: #ff7270;
+}
+
+#main #study.pink .section .pt:before {
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9a93), to(#fd675d));
+}
+
+#main #study.pink .section li a:after {
+ border-color: #ff7270;
+ color: #ff7270;
+}
+
+#main #study.interview .section .page_ttl {
+ margin-bottom: 1em;
+ line-height: 1.4;
+ font-weight: bold;
+ font-size: 128.6%;
+}
+
+#main #study.interview .section .page_ttl:after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+#main #study.interview .section .page_ttl em {
+ display: block;
+ float: left;
+ padding: 28px 0;
+ margin-right: 10px;
+ margin-bottom: 1em;
+ width: 70px;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#7ddeeb), to(#08b9d0));
+ border-radius: 50%;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ line-height: 1;
+ text-align: center;
+ font-size: 14px;
+ color: #fff;
+}
+
+#main #study.interview .section .page_ttl span {
+ display: block;
+ margin-top: 4px;
+ font-size: 77.7%;
+}
+
+#main #study.interview .section .box {
+ padding: 1em;
+}
+
+#main #study.interview .section .profile {
+ margin: 1em 0 3em;
+ border: solid 2px #ddd;
+}
+
+#main #study.interview .section .profile em {
+ font-weight: bold;
+}
+
+#main #study.interview .section .profile p {
+ font-size: 85.7%;
+}
+
+#main #study.interview .section .index {
+ position: relative;
+ background-color: #fff3e6;
+}
+
+#main #study.interview .section .index strong {
+ position: absolute;
+ top: -1em;
+ left: 1em;
+ display: inline-block;
+ padding: .2em 1em;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9a93), to(#fd675d));
+ border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ font-size: 142.9%;
+ color: #fff;
+}
+
+#main #study.interview .section .index ul {
+ border: none;
+}
+
+#main #study.interview .section .index li a {
+ padding: 0 0 .5em 0;
+ margin-left: 2.5em;
+ text-indent: -2.5em;
+ border: none;
+ font-size: 114.3%;
+ color: #4371be;
+}
+
+#main #study.interview .section .index li a:before {
+ content: "\e910";
+ display: inline-block;
+ width: 34px;
+ padding: 6px 0;
+ margin-right: .5em;
+ transform: rotate(90deg);
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#68b7f0), to(#1d84ce));
+ border-radius: 50%;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ text-align: center;
+ text-indent: 0;
+ font-family: "icomoon" !important;
+ color: #fff;
+}
+
+#main #study.interview .section .index li a:after {
+ content: none;
+}
+
+#main #study.interview .section .faq .q,
+#main #study.interview .section .faq .a {
+ font-size: 114.3%;
+}
+
+#main #study.interview .section .faq .q {
+ margin-bottom: .5em;
+ font-weight: bold;
+ color: #00b7cc;
+}
+
+#main #study.interview .section .faq .q:after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+#main #study.interview .section .faq .q .q_no {
+ display: block;
+ width: 14%;
+ float: left;
+}
+
+#main #study.interview .section .faq .q .q_text {
+ display: block;
+ width: 86%;
+ float: left;
+}
+
+#main #study.interview .section .faq .a {
+ margin-bottom: 1em;
+}
+
+#main #study.interview .section .faq .a p {
+ margin-bottom: 1em;
+}
+
+#main #study.interview .section .faq .a .sub_text {
+ padding: 1em;
+ background-color: #eee;
+ font-size: 87.5%;
+}
+
+#main #study.interview .section .faq .a .sub_text .text {
+ display: block;
+ font-weight: bold;
+ color: #ff7270;
+}
+
+#main #study.interview .section .faq .a .answer_ul {
+ margin: 0 0 1em;
+ padding: 1em;
+ border: double #ccc;
+}
+
+#main #study.interview .section .faq .a .answer_ul li {
+ margin-left: 1em;
+ text-indent: -1em;
+}
+
+#main #study.interview .section .faq .notes {
+ font-size: 87.5%;
+}
+
+#main #study.interview .section .faq .notes h3 {
+ padding: .3em;
+ margin: 1em 0;
+ background-color: #edecfc;
+ font-size: 100%;
+ color: #0244a4;
+}
+
+#main #study.interview .section .faq .notes strong {
+ display: block;
+ margin-bottom: 1em;
+ border-bottom: 1px solid #3252a6;
+ color: #3252a6;
+}
+
+#main #study.interview .section .faq .notes dt span {
+ padding: .1em .5em;
+ background-color: #00b7cc;
+ border-radius: 3px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ font-size: 80%;
+ color: #fff;
+}
+
+#main #study.interview .section .faq .notes dd {
+ margin: 0;
+}
+
+#main #study.interview.pink .section .page_ttl em {
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#ffa7a0), to(#fd5e54));
+}
+
+#main #study.interview.pink .section .profile em {
+ color: #ff7270;
+}
+
+#main #study.interview.pink .section .faq .q {
+ color: #ff7270;
+}
+
+#main #study.interview .news {
+ padding: 1em;
+ border: double 3px #fcb6b4;
+ font-size: 114.3%;
+}
+
+#main #study.interview .news strong {
+ display: block;
+ margin-bottom: 1em;
+ text-align: center;
+ line-height: 1.4;
+ font-size: 112.5%;
+ color: #ff7270;
+}
+
+#main #study.interview .news em {
+ display: block;
+ font-weight: bold;
+ color: #ff7270;
+}
+
+#main #study.interview .news > em {
+ margin: 1em 0 1em 1em;
+ text-indent: -1em;
+}
+
+#main #study.interview .news p {
+ margin-bottom: .5em;
+}
+
+#main #study.interview .news .box {
+ padding: 1em;
+ background-color: #eee;
+ font-size: 87.5%;
+}
+
+#main #study.interview .news {
+ margin-bottom: 1em;
+}
+
+#main #study.interview .news .notice {
+ font-size: 60%;
+}
+
+#main #study.interview .news .ok {
+ color: #66a1cc;
+}
+
+#main #study.interview .news .no {
+ color: #ff5b4b;
+}
+
+#main #study.interview .news table {
+ table-layout: fixed;
+ width: 100%;
+ margin-bottom: 1em;
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 60%;
+}
+
+#main #study.interview .news table th {
+ word-wrap: break-word;
+}
+
+#main #study.interview .news table th,
+#main #study.interview .news table td {
+ border: solid 1px #ccc;
+}
+
+#main #study.interview .news table td {
+ text-align: center;
+}
+
+#main #study.interview .news .list_num:after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+#main #study.interview .news .list_num p {
+ margin-bottom: 0;
+}
+
+#main #study.interview .news .list_num .num {
+ display: block;
+ float: left;
+ width: 14%;
+ text-align: right;
+}
+
+#main #study.interview .news .list_num .text {
+ display: block;
+ float: left;
+ width: 86%;
+}
+
+#aside {
+ margin: 3em 0;
+}
+
+#aside .ttl {
+ display: block;
+ line-height: 1.4;
+ font-size: 128.6%;
+ font-weight: bold;
+}
+
+#aside .ttl span {
+ display: block;
+ font-size: 66.6%;
+}
+
+#aside nav ul {
+ margin-top: 1.5em;
+ border: solid 1px #ddd;
+}
+
+#aside nav li a {
+ position: relative;
+ display: block;
+ padding: 1em 18% 1em 4%;
+ border: solid 1px #ddd;
+ line-height: 1.4;
+ font-weight: bold;
+ font-size: 128.6%;
+ color: #333;
+}
+
+#aside nav li a:after {
+ content: "\e910";
+ position: absolute;
+ right: 4%;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ display: block;
+ width: 34px;
+ height: 18px;
+ padding: 8px 0;
+ border: solid 3px #00b7ce;
+ border-radius: 50%;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ text-align: center;
+ line-height: 1;
+ font-family: "icomoon" !important;
+ font-weight: bold;
+ font-size: 18px;
+ color: #00b7ce;
+}
+
+#aside nav li a span {
+ display: block;
+ margin-bottom: 4px;
+ font-size: 66.6%;
+}
+
+#aside .pink .ttl {
+ color: #ff7270;
+}
+
+#aside .pink nav li a:after {
+ border-color: #ff7270;
+ color: #ff7270;
+}
+
+.interview01 #aside nav li:first-child {
+ display: none;
+}
+
+.interview02 #aside nav li:nth-child(2) {
+ display: none;
+}
+
+.interview03 #aside nav li:nth-child(3) {
+ display: none;
+}
+
+.interview04 #aside nav li:nth-child(4) {
+ display: none;
+}
+
+
+/*----------------------------------------------------------
+
+  Q&A
+
+-----------------------------------------------------------*/
+.qa #main .lead {
+ padding: 1em;
+ text-align: center;
+}
+
+.qa #main .lead p {
+ font-size: 114.3%;
+}
+
+.qa .submenu ul:after {
+ content: "";
+ display: block;
+ clear: both;
 }

-.font_conditioned .section .pt {
- margin-bottom: 1em;
- margin-left: 2.3em;
- line-height: 1;
- font-size: 140%;
+.qa .submenu ul {
+ border-right: solid 1px #e1e4ed;
+ border-left: solid 1px #e1e4ed;
+}
+
+.qa .submenu li {
+ display: block;
+ width: 33.33%;
+ border-top: solid 1px #e1e4ed;
+ float: left;
+ font-size: 85.7%;
 }

-.font_conditioned .section h1.pt,
-.font_conditioned .section h2.pt,
-.font_conditioned .section h3.pt,
-.font_conditioned .section h4.pt {
+.qa .submenu li a,
+.qa .section .ttl {
+ display: block;
+ text-align: center;
 font-weight: bold;
+ color: #00b7ce;
 }

-.font_conditioned .section .pt:before {
- content: "\e904";
+.qa .submenu li a {
+ padding: 1em 0;
+ border-right: solid 1px #e1e4ed;
+}
+
+.qa .submenu li:nth-child(3n) a {
+ border-right: none;
+}
+
+.qa .section .ttl {
+ padding: 1em 0;
+ background-color: #fff;
+ border-bottom: solid 1px #e1e4ed;
+ font-size: 128.6%;
+}
+
+.qa .submenu li a:before,
+.qa .section .ttl:before {
+ content: "";
+ display: block;
+ width: 50px;
+ height: 50px;
+ margin: 0 auto .5em;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100% auto;
+}
+
+.qa .section .ttl:before {
+ width: 78px;
+ height: 78px;
+}
+
+.qa .submenu li.toilet a:before,
+.qa .section .ttl.toilet:before {
+ background-image: url(/sp/shared/images/icon_qa_toilet.png);
+}
+
+.qa .submenu li.seat a:before,
+.qa .section .ttl.seat:before {
+ background-image: url(/sp/shared/images/icon_qa_seat.png);
+}
+
+.qa .submenu li.urinal a:before,
+.qa .section .ttl.urinal:before {
+ background-image: url(/sp/shared/images/icon_qa_urinal.png);
+}
+
+.qa .submenu li.etc a:before,
+.qa .section .ttl.etc:before {
+ background-image: url(/sp/shared/images/icon_qa_etc.png);
+}
+
+.qa .submenu li.pro a:before,
+.qa .section .ttl.pro:before {
+ background-image: url(/sp/shared/images/icon_qa_pro.png);
+}
+
+.qa section {
+ background-color: #f2f3f6;
+ border-top: solid 1px #e1e4ed;
+}
+
+.qa .section > .content {
+ padding: 1em 0;
+}
+
+.qa .section .pt {
+ margin-top: .8em;
+ margin-bottom: .6em;
+ margin-left: 2.3em;
+ text-indent: -2.3em;
+ line-height: 1;
+ font-size: 128.6%;
+}
+
+.qa .section .pt:before {
+ content: "\e900";
 display: inline;
 margin-right: 8px;
 padding: 2px 2px 1px 1px;
- vertical-align: sub;
+ vertical-align: middle;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#7ddeeb), to(#08b9d0));
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
- font-size: 24px;
+ font-size: 32px;
 font-family: 'icomoon' !important;
 }

-.font_conditioned .link_type_a {
- padding: 0px 0 5px 15px;
+.qa .section .question_list {
+ margin-bottom: 2em;
+ border-top: solid 1px #e1e4ed;
 }

-.font_conditioned h3.pt {
- background: none !important;
- width: auto !important;
- height: auto !important;
- margin: auto !important;
+.qa .section h4 {
+ position: relative;
+ padding: .5em 1em;
+ background-color: #c8e9fb;
+ border-right: solid 1px #e1e4ed;
+ border-left: solid 1px #e1e4ed;
+ border-bottom: solid 1px #ddd;
+ font-size: 128.6%;
+ color: #0070b0;
 }

-.font_conditioned .section h4.label {
- background: none;
- background-color: #ececfb;
- width: 100%;
- height: 40px;
- border-radius: 5px;
- display: flex;
- align-items: center;
- padding-left: 15px;
+.qa .section h4:after {
+ content: "\e910";
+ position: absolute;
+ right: 4%;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ display: block;
+ width: 14px;
+ height: 22px;
+ padding: 3px 8px 5px;
+ transform: rotate(90deg);
+ border: solid 2px #0070b0;
+ border-radius: 50%;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ text-align: center;
+ font-family: "icomoon" !important;
+ font-size: 16px;
+ font-weight: normal;
 }

-.font_conditioned .section h4.label span {
- font-size: 14px;
+.qa .section h4.active {
+ border-bottom-color: #e1e4ed;
+}
+
+.qa .section h4.active:after {
+ transform: rotate(-90deg);
+}
+
+.qa .section ul {
+ display: none;
+}
+
+.qa .section li {
+ position: relative;
+ padding: 1em 4em 1em 1em;
+ background-color: #fff;
+ border-right: solid 1px #e1e4ed;
+ border-left: solid 1px #e1e4ed;
+ border-bottom: solid 1px #e1e4ed;
+}
+
+.qa .section li:after {
+ content: "\e910";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: .6em;
+ margin: auto;
+ display: inline-block;
+ width: 34px;
+ height: 28px;
+ padding: 3px 0;
+ border: solid 3px #00b7ce;
+ border-radius: 50%;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ text-align: center;
+ font-family: "icomoon" !important;
 font-weight: bold;
- color: #0543a3;
- margin-top: 2px;
+ font-size: 18px;
+ color: #00b7ce;
 }

-.font_conditioned .section .flex_wrapper {
- display: flex;
+.qa .section li .q {
+ display: block;
+ font-size: 128.6%;
+ font-weight: bold;
+ color: #00b7ce;
+}
+
+.qa .section li a {
+ color: #333;
+}
+
+.qa .submenu li.pro a,
+.qa .section .ttl.pro {
+ color: #fba800;
+}
+
+.qa .section .pro .pt:before {
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#f5d068), to(#eaa417))
+}
+
+.qa .section .pro h4 {
+ background-color: #ffe9bd;
+ color: #f97d15;
+}
+
+.qa .section .pro li .q {
+ color: #f97d15;
+}
+
+.qa .section .pro li:after {
+ border-color: #f97d15;
+ color: #f97d15;
+}
+
+.qa .pagenation ul {
+ background-color: #f2f8fb;
+}
+
+.qa .pagenation ul li {
+ display: inline-block;
+ padding: .5em 2em .5em 1em;
+ background: url(/faq/shared/images/page_nation_nav.png) no-repeat right top;
+ background-color: transparent;
+ background-size: auto 100%;
+ border: none;
+ font-weight: bold;
+ font-size: 85.7%;
+ color: #00b7ce;
+}
+
+.qa .pagenation ul li:after {
+ content: none;
+}
+
+.qa .pagenation ul li a {
+ color: #4371be;
+}
+
+.qa .section .qa_box {
+ padding-top: 2em;
+ padding-bottom: 2em;
+ background-color: #fff;
+}
+
+.qa .section .qa_box h1 {
+ margin-left: 2em;
+ text-indent: -2em;
+ font-size: 114.3%;
+}
+
+.qa .section .qa_box h1 span {
+ margin-right: .5em;
+ color: #00b7ce;
+}
+
+.qa .section .qa_box .a {
+ margin: 1.5em 0 0;
+ padding: 1.5em 1em 1.5em 4.5em;
+ background: url(/faq/shared/images/common/bk_a.png) no-repeat left 1em #e3e6e9;
+}
+
+.qa .section .each h2 {
+ margin-top: .5em;
+ margin-bottom: .5em;
+ font-size: 128.6%;
+ color: #00b7ce;
+}
+
+.qa .section .each h2::before {
+ content: "\e903";
+ display: inline-block;
+ vertical-align: middle;
+ font-family: 'icomoon' !important;
+ font-size: 30px;
+}
+
+.qa .pro .pagenation ul {
+ background-color: #fdf6e9;
+}
+
+.qa .pro .pagenation ul li {
+ color: #f9a700;
+}
+
+.qa .pro .pagenation ul li a {
+ color: #e26700;
+}
+
+.qa .pro .section .qa_box h1 span {
+ color: #e26700;
+}
+
+.qa .pro .section .each h2 {
+ color: #e26700;
+}
+
+/*----------------------------------------------------------
+
+  toppage
+
+-----------------------------------------------------------*/
+.toppage #showcase p {
+ padding: 10px 10px 0 10px;
+ font-size: 85.7%;
+ color: #00b7ce;
+}
+
+.toppage #showcase p:nth-child(2) {
+ padding-bottom: 10px;
+ color: #333;
+}
+
+.toppage #showcase p:nth-child(3) {
+ padding-top: .5em;
+}
+
+.toppage .section_ttl {
+ padding-top: 1.5em;
+ text-align: center;
+ font-size: 171.4%;
 }

-.font_conditioned .section .flex_wrapper div {
+.toppage .section_ttl:after {
+ content: "―";
+ display: block;
 width: 50%;
- padding: 15px;
- position: relative;
+ margin: auto;
+ transform: scaleX(2);
+ line-height: 1;
+ color: #00b7ce;
 }

-.font_conditioned .section .flex_wrapper div.max {
- width: 100%;
- padding: 15px;
- position: relative;
+.toppage .section.qa {
+ padding-bottom: 2em;
+ background-color: #f2f3f6;
 }

-.font_conditioned .section .flex_wrapper div.max span.notice {
- color: #fb0000;
+.toppage .section .tbl {
+ display: block;
+ margin: 10px auto;
+}
+
+.toppage .section .tbl .row {
+ display: flex;
+}
+
+.toppage .section .tbl .box {
+ display: table-cell;
+ padding: 10px;
+ background-color: #fff;
+ box-sizing: border-box;
+ border: solid 1px #e1e4ed;
+ width: 33.3333%;
+}
+
+.toppage .section .tbl .box .ttl {
+ text-align: center;
+ font-size: 110%;
+ color: #00b7ce;
+}
+
+.toppage .section .tbl .box .ttl.pro {
+ color: #fba800;
+}
+
+.toppage .section .tbl .box .ttl:before {
+ content: "";
+ display: block;
+ width: 50px;
+ height: 50px;
+ margin: 0 auto 8px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100% auto;
+}
+
+.toppage .section .tbl .box .ttl.toilet:before {
+ background-image: url(/sp/shared/images/icon_qa_toilet.png);
+}
+
+.toppage .section .tbl .box .ttl.seat:before {
+ background-image: url(/sp/shared/images/icon_qa_seat.png);
+}
+
+.toppage .section .tbl .box .ttl.urinal:before {
+ background-image: url(/sp/shared/images/icon_qa_urinal.png);
+}
+
+.toppage .section .tbl .box .ttl.etc:before {
+ background-image: url(/sp/shared/images/icon_qa_etc.png);
+}
+
+.toppage .section .tbl .box .ttl.pro:before {
+ background-image: url(/sp/shared/images/icon_qa_pro.png);
+}
+
+.toppage .section .tbl .box li a {
+ display: block;
+ margin-bottom: .5em;
+ margin-left: 1.2em;
+ text-indent: -1.2em;
 }

-.font_conditioned .section .flex_wrapper div a.btn {
+.toppage .section .tbl .box li a:before {
+ content: "\e910";
 display: inline-block;
- font-weight: 400;
+ margin-right: 2px;
+ text-indent: 0;
+ font-family: 'icomoon' !important;
+ font-weight: bold;
+ color: #bbb;
+}
+
+.toppage .section .btn {
+ width: 70%;
+ margin: 1em auto;
+}
+
+.toppage .section .btn a {
+ display: block;
+ padding: .5em;
+ background-color: #00b7ce;
+ text-align: center;
+ font-weight: bold;
+ font-size: 114.3%;
 color: #fff;
+}
+
+.toppage .section .btn a:after {
+ content: "\e910";
+ display: inline-block;
+ margin-right: 2px;
+ vertical-align: middle;
+ text-indent: 0;
+ font-family: 'icomoon' !important;
+}
+
+
+/* 2018.3.26 update */
+.qa .section .qa_box .a .products_ttl {
+ display: block;
+ border-bottom: solid 1px #424252;
+ margin: 2em 0 .5em;
+ line-height: 1.2;
+}
+
+/* 2018.10.16 update */
+.study03-1_gray {
+ padding: 1em;
+ background: #f2f2f2;
+ font-size: 86%;
+}
+
+.study03-2_line {
+ padding: 1em;
+ border: 1px solid #333;
+ font-size: 86%;
+}
+
+/* 20201001 */
+table#table02 {
+ clear: both;
+ margin-bottom: 15px;
+}
+
+table#table02 th,
+table#table02 td {
+ padding: 5px 10px;
 text-align: center;
 vertical-align: middle;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- background-color: transparent;
- border: 2px solid transparent;
- padding: 0.5rem 3.75rem;
- font-size: 1.4rem;
- line-height: 1.68;
- border-radius: 20px;
- box-shadow: 0 2px 4px rgb(51 51 51 / 15%) !important;
+ font-size: 77%;
 }

-.font_conditioned .section .flex_wrapper div a.btn-primary {
- color: #fff;
- background-color: #ec9734;
- border-color: #ec9734;
+table#table02 th.nb {
+ border: none;
+}
+
+table#table02 td.ok {
+ font-size: 120%;
+ color: #66a1cc;
 font-weight: bold;
- font-size: 16px;
- position: absolute;
- bottom: 0;
 }

-.font_conditioned .section .flex_wrapper div.video-wrapper {
- width: 100% !important;
- height: auto;
- padding: 0!important;
+table#table02 td.no {
+ font-size: 120%;
+ color: #ff5b4b;
+ font-weight: bold;
+}
+
+/* slilder */
+.slick-dotted.slick-slider {
+ padding: 5p 0 10px 0;
+}
+
+.slick-dots {
+ position: relative;
+}
+
+.main-MV img {
+ width: 99%;
+}
+
+/* 20220412 add */
+h2.pngfix {
+ margin: 30px 0 10px 0;
+ background-color: #01b7cd;
+ padding: 10px;
+}
+
+h3{
+ font-size: 18px;
+}
+h3.pngfix {
+ margin: 20px 0 20px 0;
+}
+
+h3.txtright,
+h4.txtright {
+ text-align: right;
+}
+
+h3.txtleft,
+h4.txtleft {
+ text-align: left;
+}
+
+#main_contents {
+ padding: 0 12px;
+}
+
+div.section {
+ margin: 15px 0;
+}
+
+.section .pt:before {
+ content: "\e904";
+ display: inline;
+ margin-right: 6px;
+ padding: 0px 2px 1px 1px;
+ vertical-align: sub;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#7ddeeb), to(#08b9d0));
+ -webkit-text-fill-color: transparent;
+ -webkit-background-clip: text;
+ font-size: 22px;
+ font-family: 'icomoon' !important;
+}
+
+p.normal {
+ margin: 5px 0;
 }

-.font_conditioned .section .flex_wrapper div.side-video {
- width: auto!important;
+h4.label {
+ font-size: 16px;
 }

-h5{
+.section h6,
+.section h5 {
 font-size: 16px;
+}
+
+p img {
+ margin: 20px auto;
+}
+
+p.notice {
+ color: #fb0000;
+}
+
+.video-wrapper {
+ margin: 15px 0;
+}
+
+.max h5 {
 color: #15c0f2;
 font-weight: bold;
+ font-size: 16px;
 }
+
+.section_menu03{
+ background-color: #ECF6F7;
+}
\ No newline at end of file
--- a/sp/clean/public/index.php
+++ b/sp/clean/public/index.php
@@ -56,7 +56,7 @@
      <p>トイレを美しく保ち、長持ちさせるために毎日のお手入れが大事です。<br>
       トイレ掃除の際は、トイレ内を十分換気するようにしましょう。<br>
       「お掃除をらくにする」新技術は、下記のページでご覧いただけます。<br>
-       <span class="link_type_a"><a href="/clean/technology.html">⇒お掃除らくらく新技術（「お掃除をらくにする」新技術の一例をご紹介しています）</a></span>
+       <span class="link_type_a"><a href="/clean/technology.php">⇒お掃除らくらく新技術（「お掃除をらくにする」新技術の一例をご紹介しています）</a></span>
      </p>
     </div>


--- a/sp/clean/technology.php
+++ b/sp/clean/technology.php
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="keywords" content="トイレ,取扱説明書,修理受付窓口,お手入れ,一般社団法人レストルーム工業会">
+ <meta name="description" content="トイレナビでは、会員各社のホームページに掲載されている取扱説明書、各社修理受付窓口のご案内をしています。トイレナビは一般社団法人レストルーム工業会が運営しています。">
+ <title>お掃除らくらく新技術－トイレのお手入れ｜トイレナビ　一般社団法人レストルーム工業会</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 -->
+
+ <!--original -->
+ <link rel="stylesheet" href="/sp/clean/css/parts.css" type="text/css" media="all">
+ 
+</head>
+
+<body class="toiletinfo clean" id="clean03">
+ <!-- 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) -->
+
+ <div id="container">
+  <?php require_once $_SERVER['DOCUMENT_ROOT'] . '/sp/shared/inc/header.php'; ?>
+
+  <div id="contents_area">
+   <div id="pan" class="pan">
+    <ul>
+     <li class="page_g"><a href="/">トイレナビHOME</a></li>
+     <li class="page_g"><a href="/clean/">トイレのお手入れ</a></li>
+     <li>お掃除らくらく新技術</li>
+    </ul>
+   </div>
+   <div id="contents" class="heightLineParent clearfix">
+    <!--maincontent -->
+    <div id="main_contents">
+     <h3 class="pngfix"><span><img src="../../shared/images/content/title_text/content_title_clean03.png" width="253" height="24" alt="お掃除らくらく新技術" class="pngfix" /></span></h3>
+     <div id="section_read02">
+      <p>お掃除のしやすいトイレは多くのユーザーが望むポイントのひとつです。<br />
+       会員各社では独自の新しい技術でそのような声にお応えしています。<br />
+       ここでは、それら「お掃除をらくにする」新技術の一例をご紹介します。<br />
+       ※詳しくは各社ホームページをご覧ください。</p>
+     </div>
+     <div class="section_menu03 pingfix">
+      <p class="index"><img src="/shared/images/common/icon_inex_blue.png" alt="" width="86" height="32" /></p>
+      <ul class="clearfix">
+       <li class="on">便器の新技術</li>
+       <li><a href="technology02.html">温水洗浄便座の新技術</a></li>
+      </ul>
+     </div>
+     <!--section_a -->
+     <div class="section clearfix" id="section_a">
+      <h3 class="pt">便器の新技術</h3>
+
+      <div class="content">
+       <div>
+        <p class="text">便器の汚れは放置しておくとなかなか取りにくいものです。「汚れがつきにくく、落としやすい便器を！」そのような要望に応えるため便器表面の状態を改良し、また、お掃除のしにくかった便器のフチ裏がない形状を開発することなどで、今ではお掃除のしやすいものが主流になっています。<br />
+         洗浄水量６リットル以下の節水便器も、これらの新しい技術によって支えられています。</p>
+       </div>
+      </div>
+
+      <!--section_b -->
+      <div id="section_b">
+       <h5><img src="images/clean03/toilet/section_a_text02.jpg" alt="汚れの付きにくい表面加工技術" width="676" height="40" /></h5>
+       <div class="content clearfix">
+        <div class="left02"><img src="images/clean03/toilet/section_b_photo01.jpg" alt="" width="346" height="235" /></div>
+        <div class="right02">
+         <p>陶器製の便器はもともと汚れの付きにくい素材ですが、最近の便器には各社の独自の技術によって、更に汚れが付きにくく、落としやすい表面改良・加工が施されています。<br />
+          また、陶器素材ではない有機ガラス系新素材の便器も登場しています。</p>
+        </div>
+       </div>
+       <div class="content clearfix">
+        <table class="fanction">
+         <tr>
+          <th scope="row">メーカー</th>
+          <th scope="row">陶器</th>
+          <th scope="row">表面加工名称</th>
+          <th scope="row">特長</th>
+         </tr>
+         <tr>
+          <td class="td01">アサヒ衛陶</td>
+          <td class="td02">陶器</td>
+          <td class="td03">トイレコート</td>
+          <td class="td04">親水性のコーティング剤により、便器表面の凹凸をガラスのように平滑にして汚れの付着を軽減し、落としやすくします。さらに細菌やカビの発生も抑制します。</td>
+         </tr>
+         <tr>
+          <td class="td01">ジャニス工業</td>
+          <td class="td02">陶器</td>
+          <td class="td03">Gコート</td>
+          <td class="td04">通常の釉薬層の上に透明な釉薬をかけることにより従来の陶器表面の粗さを3分の1に、ばらつきを5分の1にし、ガラスのようなツルツル表面を実現。汚れの付着を抑えます。</td>
+         </tr>
+         <tr>
+          <td class="td01">TOTO</td>
+          <td class="td02">陶器</td>
+          <td class="td03">セフィオンテクト</td>
+          <td class="td04">表面が非常にツルツルになる透明な釉薬を用いて焼成しています。<br />汚れがつきにくく落ちやすくなっていますので、お掃除の負荷も軽減されます。</td>
+         </tr>
+         <tr>
+          <td class="td01">パナソニック</td>
+          <td class="td02">有機ガラス系新素材</td>
+          <td class="td03">表面加工なし</td>
+          <td class="td04">撥水性の素材で水垢が表面に固着せず、簡単に落とせます。</td>
+         </tr>
+         <tr>
+          <td class="td01">LIXIL（INAX）</td>
+          <td class="td02">陶器</td>
+          <td class="td03">アクアセラミック</td>
+          <td class="td04">リング状の黒ずみや便器のくすみの原因となる水アカがこびりつかず、かんたんお掃除で新品のときの輝きが保てます。</td>
+         </tr>
+        </table>
+       </div>
+       <p class="pagetop"><a href="#container" class="pageLink">ページ上部へ</a></p>
+      </div>
+     </div>
+     <!--section_c -->
+     <div class="section" id="section_c">
+      <h5><img src="images/clean03/toilet/section_b_text01.jpg" alt="フチ形状と洗浄方式" width="676" height="40" /></h5>
+      <div class="content clearfix">
+       <p class="text">これまで便器のフチ裏は汚れが付きやすく、落としにくかったところです。各社ではこのフチを無くし、洗浄水をボウル(便鉢)面に沿って「ぐるっと回す」洗浄方式で、お掃除の手間を軽減すると共に節水化を実現しています。</p>
+       <div class="center"><img src="images/clean03/toilet/section_a_photo01.jpg" alt="" width="600" height="242" />
+       </div>
+      </div>
+      <!--asahi -->
+      <div class="content clearfix">
+       <h6>アサヒ衛陶</h6>
+       <div class="left03"><img src="images/clean03/toilet/asahi_photo01.jpg" alt="" width="315" height="235" /></div>
+       <div class="right03">
+        <p><span class="bold">パワー洗浄</span><br />洗浄水の渦作用と強力な水流により、しっかりと便器内を洗い流します。</p>
+       </div>
+      </div>
+      <p class="pagetop"><a href="#container" class="pageLink">ページ上部へ</a></p>
+      <!--ジャニス工業 -->
+      <div class="content clearfix">
+       <h6>ジャニス工業</h6>
+       <div class="left03"><img src="images/clean03/toilet/janis_photo01.jpg" alt="" width="315" height="274" />
+        <p><span class="bold">フロントスリム</span><br />
+         便器手前のフチを極限まで薄くすることで、返しがまったくなく、便器の内側と外側をつまんでひと拭き掃除ができます。</p>
+       </div>
+       <div class="right03"><img src="images/clean03/toilet/janis_photo02.jpg" alt="" width="315" height="274" />
+        <p><span class="bold">全周フチなし</span><br />フチの裏をなくすことで、従来隠れて掃除のしにくかった場所をなくし、お掃除の負担を軽減します。</p>
+       </div>
+       <br class="clear" />
+       <div class="left03"><img src="images/clean03/toilet/janis_photo03.jpg" alt="" width="315" height="319" />
+        <p><span class="bold">サイクロン洗浄</span><br />
+         「洗う」と「流す」の2つの水流で、便器内をくまなく洗いながら流すたて水流で、回転にひねりを加え効果的に汚物を流します。</p>
+       </div>
+      </div>
+      <p class="pagetop"><a href="#container" class="pageLink">ページ上部へ</a></p>
+      <!--TOTO -->
+      <div class="content clearfix">
+       <h6>TOTO</h6>
+       <div class="left03"><img src="images/clean03/toilet/toto_photo01.jpg" alt="" width="315" height="231" />
+        <p><span class="bold">フチなし形状</span><br />
+         お手入れがしにくく、汚れが溜まりやすかった便器のフチをなくし、お掃除をラクにしています。</p>
+       </div>
+       <div class="right03"><img src="images/clean03/toilet/toto_photo02.jpg" alt="" width="315" height="231" />
+        <p><span class="bold">トルネード洗浄</span><br />
+         渦を巻くようなトルネード水流が、少ない水を有効に使いながら汚れを効率よく洗浄します。</p>
+       </div>
+      </div>
+      <p class="pagetop"><a href="#container" class="pageLink">ページ上部へ</a></p>
+
+      <!--パナソニック -->
+      <div class="content clearfix">
+       <h6>パナソニック</h6>
+       <div class="mb30"><img src="images/clean03/toilet/panasonic_photo04.jpg" alt="" width="676" height="189" />
+        <p class="text"><span class="bold">トリプル汚れガード</span><br />
+         「ハネガード」は便座をあげると自動で水位が下がり、泡を投入することで、主に男性が立ちながら用を足した時のハネを抑制します。<br />
+         また「タレガード」で便器周辺に3mmの縁の立ち上がりを設け、便器外側への小便のタレを抑制し、さらに便座裏に突起をつけた「モレガード」で、座り小便時の便器外側への小便のモレにも配慮しています。</p>
+       </div>
+       <div class="left03"><img src="images/clean03/toilet/panasonic_photo01.jpg" alt="" width="315" height="224" />
+        <p><span class="bold">ひとふき形状</span><br />
+         これまで手が届きにくかったフチの裏がなく、掃除が楽になります。</p>
+       </div>
+       <div class="right03"><img src="images/clean03/toilet/panasonic_photo02.jpg" alt="" width="315" height="224" />
+        <p><span class="bold">激落ちバブル</span><br />
+         毎使用後に2種類の洗剤の泡で自動洗浄し、お掃除を楽にします。</p>
+       </div>
+       <br class="clear" />
+       <div class="left03"><img src="images/clean03/toilet/panasonic_photo03.jpg" alt="" width="315" height="229" />
+        <p><span class="bold">スパイラル水流</span><br />
+         便器を水が勢いよく旋回して、しつこい汚れも一気に流します。</p>
+       </div>
+      </div>
+      <p class="pagetop"><a href="#container" class="pageLink">ページ上部へ</a></p>
+
+      <!--LIXIL -->
+      <div class="content clearfix">
+       <h6>LIXIL（INAX）</h6>
+       <div class="left03"><img src="images/clean03/toilet/lixil_photo01.jpg" alt="" width="315" height="227" />
+        <p><span class="bold">フチレス形状</span><br />
+         フチを丸ごとなくし、サッとひと拭き、お掃除ラクラクです。</p>
+       </div>
+       <div class="right03"><img src="images/clean03/toilet/lixil_photo02.jpg" alt="" width="315" height="227" />
+        <p><span class="bold">パワーストリーム洗浄</span><br />
+         強力な水流が便器鉢内のすみずみまで回り、少ない水でもしっかり汚れを洗い流します。</p>
+       </div>
+      </div>
+      <p class="pagetop"><a href="#container" class="pageLink">ページ上部へ</a></p>
+     </div>
+
+     <!--section_c -->
+     <div class="section" id="section_c">
+      <h5><img src="images/clean03/toilet/section_c_text01.jpg" alt="清掃しやすい外観形状" width="676" height="40" /></h5>
+      <div class="content clearfix">
+       <p class="text">これまでの便器は横や後ろの形状が複雑で、床固定のビス(化粧キャップ付)が露出しているなど、ホコリが溜まりやすくお掃除がしにくい形状でした。<br />
+        最近の便器では、外観形状がシンプルでホコリ溜りも少なく、お掃除がしやすい形状のものが主流になってきています。</p>
+       <div class="center"><img src="images/clean03/toilet/section_c_photo01.jpg" alt="" width="447" height="450" />
+       </div>
+      </div>
+      <p class="pagetop"><a href="#container" class="pageLink">ページ上部へ</a></p>
+
+      <div class="section_last">
+       <div class="section_member">
+        <p>便器の新技術詳細は、各社のサイトにてご覧いただけます。</p>
+        <ul>
+         <li><a href="https://www.asahieito.co.jp/" target="_blank"><img src="../shared/images/logo/logo_asahi.png" class="pngfix" alt="アサヒ衛陶株式会社" width="205" height="61" /></a></li>
+         <!--
+ -->
+         <li><a href="https://www.janis-kogyo.co.jp/" target="_blank"><img src="../shared/images/logo/logo_janis.png" class="pngfix" alt="ジャニス工業株式会社" width="204" height="61" /></a></li>
+         <!--
+ -->
+         <li><a href="https://jp.toto.com/" target="_blank"><img src="../shared/images/logo/logo_toto.png" alt="株式会社TOTO" class="pngfix" width="204" height="61" /></a></li>
+         <!--
+ -->
+         <li><a href="https://sumai.panasonic.jp/" target="_blank"><img src="../shared/images/logo/logo_panasonic.png" class="pngfix" alt="パナソニック株式会社" width="204" height="61" /></a></li>
+         <!--
+ -->
+         <li><a href="https://inax.lixil.co.jp/" target="_blank"><img src="../shared/images/logo/logo_lixil.png" class="pngfix" alt="株式会社LIXIL" width="204" height="61" /></a></li>
+        </ul>
+       </div>
+      </div>
+      <div class="section_menu03 pingfix">
+       <p class="index"><img src="/shared/images/common/icon_inex_blue.png" alt="" width="86" height="32" /></p>
+       <ul class="clearfix">
+        <li class="on">便器の新技術</li>
+        <li><a href="technology02.html">温水洗浄便座の新技術</a></li>
+       </ul>
+      </div>
+     </div>
+    </div>
+    <!-- side toilet -->
+    <script type="text/javascript">
+     <!--
+     includeSideToilet();
+     //
+
+     -->
+    </script>
+    <noscript>
+     <p>当サイトはJavaScriptをonにしてご覧ください。</p>
+    </noscript>
+    <!-- /side toilet -->
+   </div>
+   <div id="pan_b" class="pan">
+    <ul>
+     <li class="page_g"><a href="/">トイレナビHOME</a></li>
+     <li class="page_g"><a href="/clean/">トイレのお手入れ</a></li>
+     <li>お掃除らくらく新技術</li>
+    </ul>
+   </div>
+  </div>
+  <!--/content-->
+  <!-- foot -->
+  <?php require_once $_SERVER['DOCUMENT_ROOT'] . '/sp/shared/inc/footer.php'; ?>
+  <!-- /foot -->
+ </div>
+ <script type="text/javascript" src="/shared/js/jquery.js"></script>
+ <script type="text/javascript" src="/sp/shared/js/common.js"></script>
+</body>
+
+</html>
--- a/sp/shared/css/common.css
+++ b/sp/shared/css/common.css
@@ -2333,3 +2333,7 @@ p.notice {
 font-weight: bold;
 font-size: 16px;
 }
+
+.section_menu03{
+ background-color: #ECF6F7;
+}
\ No newline at end of file