Skip to content

sora / sanitary-net

Go to a project
Commit 26117a8b by o.kimura
Options

SPトップ調整

parent 7bc74999
Inline Side-by-side
Showing with 965 additions and 961 deletions
index_sp.html
......@@ -585,6 +585,7 @@
<ul class="main-MV">
<li class="slider-item"><img src="/sp/shared/images/showcase.jpg" alt=""></li>
<li class="slider-item"><a href="https://sanitary-net-annex.com/contest/" target="_blank"><img src="/sp/shared/images/02.jpg" alt=""></a></li>
<li class="slider-item"><a href="/news/news1572" target="_blank"><img src="/sp/shared/images/greenpt_mv.png" alt=""></a></li>
<li class="slider-item"><a href="/utsukushitoilet/"><img src="/sp/shared/images/03.jpg" alt=""></a></li>
</ul>
<div id="showcase">
......
sp/shared/css/common.css
......@@ -11,13 +11,13 @@
==========================================================*/
html {
font: 62.5%/1.6 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
color: #333;
font: 62.5%/1.6 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
color: #333;
}
body {
font-size: 140%;
font-size: 1.4rem;
font-size: 140%;
font-size: 1.4rem;
}
html,
......@@ -31,25 +31,25 @@ h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
em {
font-style: normal;
font-style: normal;
}
ul,
ol {
list-style: none;
list-style: none;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: auto;
border: none;
display: block;
max-width: 100%;
height: auto;
margin: auto;
border: none;
}
/*----------------------------------------------------------
......@@ -58,62 +58,62 @@ img {
-----------------------------------------------------------*/
@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;
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;
}
[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;
/* 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;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-keyboard_arrow_right:before {
content: "\e910";
content: "\e910";
}
.icon-keyboard_arrow_left:before {
content: "\e911";
content: "\e911";
}
.icon-faq:before {
content: "\e900";
content: "\e900";
}
.icon-home:before {
content: "\e902";
content: "\e902";
}
.icon-pt_faq:before {
content: "\e903";
content: "\e903";
}
.icon-pt_ttl:before {
content: "\e904";
content: "\e904";
}
.icon-study:before {
content: "\e905";
content: "\e905";
}
.icon-search:before {
content: "\e901";
content: "\e901";
}
/*----------------------------------------------------------
......@@ -122,13 +122,13 @@ img {
-----------------------------------------------------------*/
a {
color: #4371ba;
text-decoration: none;
color: #4371ba;
text-decoration: none;
}
a:visited {
color: #4371ba;
text-decoration: none;
color: #4371ba;
text-decoration: none;
}
/*----------------------------------------------------------
......@@ -137,15 +137,15 @@ a:visited {
-----------------------------------------------------------*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
zoom: 1;
}
/*----------------------------------------------------------
......@@ -156,392 +156,392 @@ a:visited {
/* !Margin ------------------------------------------------------------------ */
.mt00 {
margin-top: 0 !important;
margin-top: 0 !important;
}
.mt05 {
margin-top: 5px !important;
margin-top: 5px !important;
}
.mt10 {
margin-top: 10px !important;
margin-top: 10px !important;
}
.mt12 {
margin-top: 12px !important;
margin-top: 12px !important;
}
.mt15 {
margin-top: 15px !important;
margin-top: 15px !important;
}
.mt20 {
margin-top: 20px !important;
margin-top: 20px !important;
}
.mt25 {
margin-top: 25px !important;
margin-top: 25px !important;
}
.mt30 {
margin-top: 30px !important;
margin-top: 30px !important;
}
.mt35 {
margin-top: 35px !important;
margin-top: 35px !important;
}
.mt40 {
margin-top: 40px !important;
margin-top: 40px !important;
}
.mt45 {
margin-top: 45px !important;
margin-top: 45px !important;
}
.mt50 {
margin-top: 50px !important;
margin-top: 50px !important;
}
.mr00 {
margin-right: 0 !important;
margin-right: 0 !important;
}
.mr05 {
margin-right: 5px !important;
margin-right: 5px !important;
}
.mr10 {
margin-right: 10px !important;
margin-right: 10px !important;
}
.mr12 {
margin-right: 12px !important;
margin-right: 12px !important;
}
.mr15 {
margin-right: 15px !important;
margin-right: 15px !important;
}
.mr20 {
margin-right: 20px !important;
margin-right: 20px !important;
}
.mr25 {
margin-right: 25px !important;
margin-right: 25px !important;
}
.mr30 {
margin-right: 30px !important;
margin-right: 30px !important;
}
.mr35 {
margin-right: 35px !important;
margin-right: 35px !important;
}
.mr40 {
margin-right: 40px !important;
margin-right: 40px !important;
}
.mr45 {
margin-right: 45px !important;
margin-right: 45px !important;
}
.mr50 {
margin-right: 50px !important;
margin-right: 50px !important;
}
.mb00 {
margin-bottom: 0 !important;
margin-bottom: 0 !important;
}
.mb05 {
margin-bottom: 5px !important;
margin-bottom: 5px !important;
}
.mb10 {
margin-bottom: 10px !important;
margin-bottom: 10px !important;
}
.mb12 {
margin-bottom: 12px !important;
margin-bottom: 12px !important;
}
.mb15 {
margin-bottom: 15px !important;
margin-bottom: 15px !important;
}
.mb20 {
margin-bottom: 20px !important;
margin-bottom: 20px !important;
}
.mb25 {
margin-bottom: 25px !important;
margin-bottom: 25px !important;
}
.mb30 {
margin-bottom: 30px !important;
margin-bottom: 30px !important;
}
.mb35 {
margin-bottom: 35px !important;
margin-bottom: 35px !important;
}
.mb40 {
margin-bottom: 40px !important;
margin-bottom: 40px !important;
}
.mb45 {
margin-bottom: 45px !important;
margin-bottom: 45px !important;
}
.mb50 {
margin-bottom: 50px !important;
margin-bottom: 50px !important;
}
.mb100 {
margin-bottom: 100px !important;
margin-bottom: 100px !important;
}
.ml00 {
margin-left: 0 !important;
margin-left: 0 !important;
}
.ml05 {
margin-left: 5px !important;
margin-left: 5px !important;
}
.ml10 {
margin-left: 10px !important;
margin-left: 10px !important;
}
.ml12 {
margin-left: 12px !important;
margin-left: 12px !important;
}
.ml15 {
margin-left: 15px !important;
margin-left: 15px !important;
}
.ml20 {
margin-left: 20px !important;
margin-left: 20px !important;
}
.ml25 {
margin-left: 25px !important;
margin-left: 25px !important;
}
.ml30 {
margin-left: 30px !important;
margin-left: 30px !important;
}
.ml35 {
margin-left: 35px !important;
margin-left: 35px !important;
}
.ml40 {
margin-left: 40px !important;
margin-left: 40px !important;
}
.ml45 {
margin-left: 45px !important;
margin-left: 45px !important;
}
.ml50 {
margin-left: 50px !important;
margin-left: 50px !important;
}
/* !Padding ---------------------------------------------------------------- */
.pt00 {
padding-top: 0 !important;
padding-top: 0 !important;
}
.pt05 {
padding-top: 5px !important;
padding-top: 5px !important;
}
.pt10 {
padding-top: 10px !important;
padding-top: 10px !important;
}
.pt12 {
padding-top: 12px !important;
padding-top: 12px !important;
}
.pt15 {
padding-top: 15px !important;
padding-top: 15px !important;
}
.pt20 {
padding-top: 20px !important;
padding-top: 20px !important;
}
.pt25 {
padding-top: 25px !important;
padding-top: 25px !important;
}
.pt30 {
padding-top: 30px !important;
padding-top: 30px !important;
}
.pt35 {
padding-top: 35px !important;
padding-top: 35px !important;
}
.pt40 {
padding-top: 40px !important;
padding-top: 40px !important;
}
.pt45 {
padding-top: 45px !important;
padding-top: 45px !important;
}
.pt50 {
padding-top: 50px !important;
padding-top: 50px !important;
}
.pr00 {
padding-right: 0 !important;
padding-right: 0 !important;
}
.pr05 {
padding-right: 5px !important;
padding-right: 5px !important;
}
.pr10 {
padding-right: 10px !important;
padding-right: 10px !important;
}
.pr12 {
padding-right: 12px !important;
padding-right: 12px !important;
}
.pr15 {
padding-right: 15px !important;
padding-right: 15px !important;
}
.pr20 {
padding-right: 20px !important;
padding-right: 20px !important;
}
.pr25 {
padding-right: 25px !important;
padding-right: 25px !important;
}
.pr30 {
padding-right: 30px !important;
padding-right: 30px !important;
}
.pr35 {
padding-right: 35px !important;
padding-right: 35px !important;
}
.pr40 {
padding-right: 40px !important;
padding-right: 40px !important;
}
.pr45 {
padding-right: 45px !important;
padding-right: 45px !important;
}
.pr50 {
padding-right: 50px !important;
padding-right: 50px !important;
}
.pb00 {
padding-bottom: 0 !important;
padding-bottom: 0 !important;
}
.pb05 {
padding-bottom: 5px !important;
padding-bottom: 5px !important;
}
.pb10 {
padding-bottom: 10px !important;
padding-bottom: 10px !important;
}
.pb12 {
padding-bottom: 12px !important;
padding-bottom: 12px !important;
}
.pb15 {
padding-bottom: 15px !important;
padding-bottom: 15px !important;
}
.pb20 {
padding-bottom: 20px !important;
padding-bottom: 20px !important;
}
.pb25 {
padding-bottom: 25px !important;
padding-bottom: 25px !important;
}
.pb30 {
padding-bottom: 30px !important;
padding-bottom: 30px !important;
}
.pb35 {
padding-bottom: 35px !important;
padding-bottom: 35px !important;
}
.pb40 {
padding-bottom: 40px !important;
padding-bottom: 40px !important;
}
.pb45 {
padding-bottom: 45px !important;
padding-bottom: 45px !important;
}
.pb50 {
padding-bottom: 50px !important;
padding-bottom: 50px !important;
}
.pl00 {
padding-left: 0 !important;
padding-left: 0 !important;
}
.pl05 {
padding-left: 5px !important;
padding-left: 5px !important;
}
.pl10 {
padding-left: 10px !important;
padding-left: 10px !important;
}
.pl12 {
padding-left: 12px !important;
padding-left: 12px !important;
}
.pl15 {
padding-left: 15px !important;
padding-left: 15px !important;
}
.pl20 {
padding-left: 20px !important;
padding-left: 20px !important;
}
.pl25 {
padding-left: 25px !important;
padding-left: 25px !important;
}
.pl30 {
padding-left: 30px !important;
padding-left: 30px !important;
}
.pl35 {
padding-left: 35px !important;
padding-left: 35px !important;
}
.pl40 {
padding-left: 40px !important;
padding-left: 40px !important;
}
.pl45 {
padding-left: 45px !important;
padding-left: 45px !important;
}
.pl50 {
padding-left: 50px !important;
padding-left: 50px !important;
}
......@@ -551,243 +551,243 @@ a:visited {
-----------------------------------------------------------*/
#header {
position: fixed;
top: 0;
height: 85px;
width: 100%;
background-color: #fff;
line-height: 1;
z-index: 100;
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;
padding: 7px 4%;
background-color: #00b7ce;
font-size: 85.7%;
color: #fff;
}
#header .logo {
position: relative;
left: 4%;
display: block;
width: 40%;
height: 60px;
padding: 0;
position: relative;
left: 4%;
display: block;
width: 40%;
height: 60px;
padding: 0;
}
#header .logo img {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
display: block;
}
.menu-link {
position: absolute;
display: block;
top: 25px;
right: 0;
background-color: #657a85;
z-index: 10;
width: 60px;
height: auto;
padding: 22px 0 10px;
position: absolute;
display: block;
top: 25px;
right: 0;
background-color: #657a85;
z-index: 10;
width: 60px;
height: auto;
padding: 22px 0 10px;
}
.menu-link:after {
content: "MENU";
display: block;
padding: 14px 0 0;
vertical-align: middle;
text-align: center;
font-size: 10px;
color: #fff;
content: "MENU";
display: block;
padding: 14px 0 0;
vertical-align: middle;
text-align: center;
font-size: 10px;
color: #fff;
}
.menu-link span {
position: relative;
display: block;
width: 50%;
position: relative;
display: block;
width: 50%;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: #fff;
height: 4px;
margin: auto;
background-color: #fff;
height: 4px;
margin: auto;
}
.menu-link span:before,
.menu-link span:after {
position: absolute;
width: 100%;
margin-top: 10px;
content: "";
left: 0;
position: absolute;
width: 100%;
margin-top: 10px;
content: "";
left: 0;
}
.menu-link span:after {
margin-top: -10px;
margin-top: -10px;
}
.menu-link.active {
padding-top: 0;
line-height: 1;
padding-top: 0;
line-height: 1;
}
.menu-link:hover,
.menu-link.active:hover {
text-decoration: none;
text-decoration: none;
}
.menu-link.active:before {
content: "×";
display: block;
margin: 8px auto 0;
line-height: 32px;
text-align: center;
font-size: 40px;
color: #fff;
content: "×";
display: block;
margin: 8px auto 0;
line-height: 32px;
text-align: center;
font-size: 40px;
color: #fff;
}
.menu-link.active:after {
padding-top: 0;
padding-top: 0;
}
.menu-link.active span {
display: none;
display: none;
}
#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;
position: absolute;
top: 85px;
left: 0;
width: 100%;
height: 100vh;
display: none;
padding-bottom: 2em;
background-color: #00b7ce;
z-index: 10;
overflow-y: scroll;
}
#global_nav > ul {
width: 92%;
margin: auto;
width: 92%;
margin: auto;
}
#global_nav li a {
position: relative;
display: block;
padding: 16px 0;
font-weight: bold;
color: #fff;
position: relative;
display: block;
padding: 16px 0;
font-weight: bold;
color: #fff;
}
#global_nav li a span {
font-size: 80%;
font-size: 80%;
}
#global_nav > ul > li > a {
border-bottom: solid 1px #fff;
border-bottom: solid 1px #fff;
}
#global_nav > ul > li > a:before {
margin-right: 6px;
margin-left: 2%;
vertical-align: top;
font-size: 120%;
margin-right: 6px;
margin-left: 2%;
vertical-align: top;
font-size: 120%;
}
#global_nav > ul > li li {}
#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;
padding: 14px 16% 14px 4%;
background-color: #fff;
border-bottom: solid 1px #00b7ce;
line-height: 1.2;
color: #333;
}
#global_nav > ul > li li a span {
display: block;
margin-bottom: 4px;
display: block;
margin-bottom: 4px;
}
#global_nav > ul > li > a.pc_site {
margin-top: 1em;
padding: 14px 16% 14px 4%;
background-color: #657a85;
border: none;
margin-top: 1em;
padding: 14px 16% 14px 4%;
background-color: #657a85;
border: none;
}
#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;
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;
}
#global_nav > ul > li li a:after {
border-color: #00b7ce;
color: #00b7ce;
border-color: #00b7ce;
color: #00b7ce;
}
#global_nav > ul > li li:nth-child(2) a:after {
border-color: #ff7270;
color: #ff7270;
border-color: #ff7270;
color: #ff7270;
}
#search_area {
width: 92%;
margin-left: auto;
padding: 1em 4%;
background-color: #73d7e5;
width: 92%;
margin-left: auto;
padding: 1em 4%;
background-color: #73d7e5;
}
#search_area form.gsc-search-box,
#search_area table.gsc-search-box {
margin-bottom: 0;
margin-bottom: 0;
}
#search_area .gsc-input {
padding: 0;
border-spacing: 0 !important;
width: 98% !important;
height: 23px !important;
padding: 0;
border-spacing: 0 !important;
width: 98% !important;
height: 23px !important;
}
#search_area .gsc-input-box {
border: none !important;
padding: 0 !important;
margin: 0 !important;
height: 32px !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
height: 32px !important;
}
#search_area .gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0 !important;
padding-right: 0 !important;
}
#search_area table.gsc-search-box td {
vertical-align: top;
vertical-align: top;
}
/*#search_area .gsc-input-box {
......@@ -795,60 +795,60 @@ a:visited {
}*/
/*#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;
/*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;
background: none !important;
}
#search_area .gsib_b .gsst_b {
padding: 0 !important;
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;
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;*/
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;
background: none !important;
border: none !important;
}
#search_area td.gsc-clear-button {
line-height: 14px;
height: 14px;
background: #e5e5e5;
line-height: 14px;
height: 14px;
background: #e5e5e5;
}
.gsc-result .gs-title {
height: 1.5em !important;
height: 1.5em !important;
}
#search_area td.gsib_a {
padding-right: 1%;
padding-left: 1%;
padding-bottom: 4px;
padding-right: 1%;
padding-left: 1%;
padding-bottom: 4px;
}
......@@ -858,29 +858,29 @@ a:visited {
-----------------------------------------------------------*/
#footer .bnr {
padding: 2em 0;
border-top: solid 1px #ddd;
padding: 2em 0;
border-top: solid 1px #ddd;
}
#footer .bnr img {
max-width: 92%;
max-width: 92%;
}
#footer #subnavi {
text-align: center;
font-weight: bold;
text-align: center;
font-weight: bold;
}
#footer #subnavi strong,
#footer #subnavi em {
display: block;
color: #fff;
display: block;
color: #fff;
}
#footer #subnavi strong {
padding: .7em 0;
background-color: #657a85;
font-size: 128.6%;
padding: .7em 0;
background-color: #657a85;
font-size: 128.6%;
}
/*
......@@ -900,100 +900,100 @@ a:visited {
}*/
#footer #subnavi strong.active:after {
transform: rotate(-90deg);
transform: rotate(-90deg);
}
#footer #subnavi em {
padding: 1em 0;
background-color: #00b7ce;
padding: 1em 0;
background-color: #00b7ce;
}
#footer #subnavi ul:after {
content: "";
display: block;
clear: both;
content: "";
display: block;
clear: both;
}
#footer #subnavi li {
display: block;
width: 50%;
float: left;
border-bottom: solid 1px #00b7ce;
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;
border-bottom: none;
}
#footer #subnavi li a {
display: block;
padding: 1em 0;
color: #00b7ce;
display: block;
padding: 1em 0;
color: #00b7ce;
}
#footer #subnavi li:nth-child(2n+1) a {
border-right: solid 1px #00b7ce;
border-right: solid 1px #00b7ce;
}
#footer #subnavi .about {
padding: 1em 3%;
background-color: #73d7e5;
padding: 1em 3%;
background-color: #73d7e5;
}
#footer #subnavi .about li {
border: none;
border: none;
}
#footer #subnavi .about a {
width: 92%;
margin: auto;
background-color: #fff;
border: solid 1px #00b7ce;
color: #333;
width: 92%;
margin: auto;
background-color: #fff;
border: solid 1px #00b7ce;
color: #333;
}
#footer .links {
padding: 1em 4%;
margin: auto;
background-color: #f2f3f6;
padding: 1em 4%;
margin: auto;
background-color: #f2f3f6;
}
#footer .links > div {
padding: 1em;
background-color: #fff;
box-sizing: border-box;
border: solid 1px #e1e4ed;
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;
display: block;
padding-bottom: .5em;
margin-bottom: .5em;
border-bottom: solid 1px #ddd;
}
#footer .links li a {
display: block;
padding: .5em 0;
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;
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;
padding: 1em;
background-color: #00b7ce;
text-align: center;
font-size: 85.7%;
color: #fff;
}
/*----------------------------------------------------------
......@@ -1002,30 +1002,30 @@ a:visited {
-----------------------------------------------------------*/
#main {
position: relative;
margin-top: 85px;
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;
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;
width: 92%;
margin: auto;
}
#main .content .list p {
text-indent: -1em;
margin-left: 1em;
text-indent: -1em;
margin-left: 1em;
}
/*----------------------------------------------------------
......@@ -1034,621 +1034,621 @@ a:visited {
-----------------------------------------------------------*/
#main #study_index .section {
margin: 2em auto;
box-sizing: border-box;
border: solid 1px #ddd;
margin: 2em auto;
box-sizing: border-box;
border: solid 1px #ddd;
}
#main #study_index .section .content {
margin-top: 1em;
margin-bottom: 1em;
width: 88%;
margin-top: 1em;
margin-bottom: 1em;
width: 88%;
}
#main #study_index .section h2 {
margin-bottom: 1em;
padding-bottom: .5em;
border-bottom: solid 2px #00b7ce;
line-height: 1.2;
font-size: 128.6%;
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 {
display: block;
margin-bottom: 4px;
font-size: 75%;
display: block;
margin-bottom: 4px;
font-size: 75%;
}
#main #study_index .section a {
display: block;
margin-top: 1em;
display: block;
margin-top: 1em;
}
#main #study_index .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;
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;
border-color: #ff7270;
}
#main #study_index .section .pink a:before {
border-color: #ff7270;
color: #ff7270;
border-color: #ff7270;
color: #ff7270;
}
#main #study .lead {
padding: 1em 4%;
padding: 1em 4%;
}
#main #study .lead .ttl {
display: block;
line-height: 1.4;
font-size: 128.6%;
font-weight: bold;
color: #00b7ce;
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%;
display: block;
font-size: 66.6%;
}
#main #study .lead p {
margin-top: .5em;
font-size: 114.3%;
margin-top: .5em;
font-size: 114.3%;
}
#main #study .section {
padding: 2em 0;
border-top: solid 1px #ddd;
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%;
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;
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;
content: "";
display: block;
clear: both;
}
#main #study .section .lft {
width: 36%;
float: left;
width: 36%;
float: left;
}
#main #study .section .rgt {
width: 60%;
float: right;
width: 60%;
float: right;
}
#main #study .section ul {
margin-top: 1.5em;
border: solid 1px #ddd;
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;
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;
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%;
display: block;
margin-bottom: 4px;
font-size: 66.6%;
}
#main #study.study02 .box {
margin-bottom: 1em;
margin-bottom: 1em;
}
#main #study.study02 .box em {
display: block;
font-weight: bold;
display: block;
font-weight: bold;
}
#main #study.study02 table {
border-spacing: 0;
border-collapse: collapse;
font-size: 85%;
border-spacing: 0;
border-collapse: collapse;
font-size: 85%;
}
#main #study.study02 table td {
border: 1px solid #ccc;
border: 1px solid #ccc;
}
#main #study.study02 table td.tr02,
#main #study.study02 table td.tr03 {
width: 31%;
width: 31%;
}
#main #study.study02 table td.tr04 {
width: 18%;
width: 18%;
}
#main #study.study02 table .blue {
background-color: #cef9ff;
background-color: #cef9ff;
}
#main #study.study02 table .red {
background-color: #ffc5c1;
background-color: #ffc5c1;
}
#main #study.study02 table .center {
text-align: center;
text-align: center;
}
#main #study.study02 table .right {
text-align: right;
text-align: right;
}
#main #study.pink .lead .ttl,
#main #study.pink .lead p {
color: #ff7270;
color: #ff7270;
}
#main #study.pink .section .pt:before {
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9a93), to(#fd675d));
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;
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%;
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;
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;
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%;
display: block;
margin-top: 4px;
font-size: 77.7%;
}
#main #study.interview .section .box {
padding: 1em;
padding: 1em;
}
#main #study.interview .section .profile {
margin: 1em 0 3em;
border: solid 2px #ddd;
margin: 1em 0 3em;
border: solid 2px #ddd;
}
#main #study.interview .section .profile em {
font-weight: bold;
font-weight: bold;
}
#main #study.interview .section .profile p {
font-size: 85.7%;
font-size: 85.7%;
}
#main #study.interview .section .index {
position: relative;
background-color: #fff3e6;
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;
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;
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;
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;
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;
content: none;
}
#main #study.interview .section .faq .q,
#main #study.interview .section .faq .a {
font-size: 114.3%;
font-size: 114.3%;
}
#main #study.interview .section .faq .q {
margin-bottom: .5em;
font-weight: bold;
color: #00b7cc;
margin-bottom: .5em;
font-weight: bold;
color: #00b7cc;
}
#main #study.interview .section .faq .q:after {
content: "";
display: block;
clear: both;
content: "";
display: block;
clear: both;
}
#main #study.interview .section .faq .q .q_no {
display: block;
width: 14%;
float: left;
display: block;
width: 14%;
float: left;
}
#main #study.interview .section .faq .q .q_text {
display: block;
width: 86%;
float: left;
display: block;
width: 86%;
float: left;
}
#main #study.interview .section .faq .a {
margin-bottom: 1em;
margin-bottom: 1em;
}
#main #study.interview .section .faq .a p {
margin-bottom: 1em;
margin-bottom: 1em;
}
#main #study.interview .section .faq .a .sub_text {
padding: 1em;
background-color: #eee;
font-size: 87.5%;
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;
display: block;
font-weight: bold;
color: #ff7270;
}
#main #study.interview .section .faq .a .answer_ul {
margin: 0 0 1em;
padding: 1em;
border: double #ccc;
margin: 0 0 1em;
padding: 1em;
border: double #ccc;
}
#main #study.interview .section .faq .a .answer_ul li {
margin-left: 1em;
text-indent: -1em;
margin-left: 1em;
text-indent: -1em;
}
#main #study.interview .section .faq .notes {
font-size: 87.5%;
font-size: 87.5%;
}
#main #study.interview .section .faq .notes h3 {
padding: .3em;
margin: 1em 0;
background-color: #edecfc;
font-size: 100%;
color: #0244a4;
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;
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;
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;
margin: 0;
}
#main #study.interview.pink .section .page_ttl em {
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffa7a0), to(#fd5e54));
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffa7a0), to(#fd5e54));
}
#main #study.interview.pink .section .profile em {
color: #ff7270;
color: #ff7270;
}
#main #study.interview.pink .section .faq .q {
color: #ff7270;
color: #ff7270;
}
#main #study.interview .news {
padding: 1em;
border: double 3px #fcb6b4;
font-size: 114.3%;
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;
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;
display: block;
font-weight: bold;
color: #ff7270;
}
#main #study.interview .news > em {
margin: 1em 0 1em 1em;
text-indent: -1em;
margin: 1em 0 1em 1em;
text-indent: -1em;
}
#main #study.interview .news p {
margin-bottom: .5em;
margin-bottom: .5em;
}
#main #study.interview .news .box {
padding: 1em;
background-color: #eee;
font-size: 87.5%;
padding: 1em;
background-color: #eee;
font-size: 87.5%;
}
#main #study.interview .news {
margin-bottom: 1em;
margin-bottom: 1em;
}
#main #study.interview .news .notice {
font-size: 60%;
font-size: 60%;
}
#main #study.interview .news .ok {
color: #66a1cc;
color: #66a1cc;
}
#main #study.interview .news .no {
color: #ff5b4b;
color: #ff5b4b;
}
#main #study.interview .news table {
table-layout: fixed;
width: 100%;
margin-bottom: 1em;
border-collapse: collapse;
border-spacing: 0;
font-size: 60%;
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;
word-wrap: break-word;
}
#main #study.interview .news table th,
#main #study.interview .news table td {
border: solid 1px #ccc;
border: solid 1px #ccc;
}
#main #study.interview .news table td {
text-align: center;
text-align: center;
}
#main #study.interview .news .list_num:after {
content: "";
display: block;
clear: both;
content: "";
display: block;
clear: both;
}
#main #study.interview .news .list_num p {
margin-bottom: 0;
margin-bottom: 0;
}
#main #study.interview .news .list_num .num {
display: block;
float: left;
width: 14%;
text-align: right;
display: block;
float: left;
width: 14%;
text-align: right;
}
#main #study.interview .news .list_num .text {
display: block;
float: left;
width: 86%;
display: block;
float: left;
width: 86%;
}
#aside {
margin: 3em 0;
margin: 3em 0;
}
#aside .ttl {
display: block;
line-height: 1.4;
font-size: 128.6%;
font-weight: bold;
display: block;
line-height: 1.4;
font-size: 128.6%;
font-weight: bold;
}
#aside .ttl span {
display: block;
font-size: 66.6%;
display: block;
font-size: 66.6%;
}
#aside nav ul {
margin-top: 1.5em;
border: solid 1px #ddd;
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;
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;
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%;
display: block;
margin-bottom: 4px;
font-size: 66.6%;
}
#aside .pink .ttl {
color: #ff7270;
color: #ff7270;
}
#aside .pink nav li a:after {
border-color: #ff7270;
color: #ff7270;
border-color: #ff7270;
color: #ff7270;
}
.interview01 #aside nav li:first-child {
display: none;
display: none;
}
.interview02 #aside nav li:nth-child(2) {
display: none;
display: none;
}
.interview03 #aside nav li:nth-child(3) {
display: none;
display: none;
}
.interview04 #aside nav li:nth-child(4) {
display: none;
display: none;
}
......@@ -1658,330 +1658,330 @@ a:visited {
-----------------------------------------------------------*/
.qa #main .lead {
padding: 1em;
text-align: center;
padding: 1em;
text-align: center;
}
.qa #main .lead p {
font-size: 114.3%;
font-size: 114.3%;
}
.qa .submenu ul:after {
content: "";
display: block;
clear: both;
content: "";
display: block;
clear: both;
}
.qa .submenu ul {
border-right: solid 1px #e1e4ed;
border-left: solid 1px #e1e4ed;
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%;
display: block;
width: 33.33%;
border-top: solid 1px #e1e4ed;
float: left;
font-size: 85.7%;
}
.qa .submenu li a,
.qa .section .ttl {
display: block;
text-align: center;
font-weight: bold;
color: #00b7ce;
display: block;
text-align: center;
font-weight: bold;
color: #00b7ce;
}
.qa .submenu li a {
padding: 1em 0;
border-right: solid 1px #e1e4ed;
padding: 1em 0;
border-right: solid 1px #e1e4ed;
}
.qa .submenu li:nth-child(3n) a {
border-right: none;
border-right: none;
}
.qa .section .ttl {
padding: 1em 0;
background-color: #fff;
border-bottom: solid 1px #e1e4ed;
font-size: 128.6%;
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;
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;
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);
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);
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);
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);
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);
background-image: url(/sp/shared/images/icon_qa_pro.png);
}
.qa section {
background-color: #f2f3f6;
border-top: solid 1px #e1e4ed;
background-color: #f2f3f6;
border-top: solid 1px #e1e4ed;
}
.qa .section {
margin-top: -85px;
padding-top: 85px;
margin-top: -85px;
padding-top: 85px;
}
.qa .section > .content {
padding: 1em 0;
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%;
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: 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;
content: "\e900";
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;
}
.qa .section .question_list {
margin-bottom: 2em;
border-top: solid 1px #e1e4ed;
margin-bottom: 2em;
border-top: solid 1px #e1e4ed;
}
.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;
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;
}
.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;
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;
}
.qa .section h4.active {
border-bottom-color: #e1e4ed;
border-bottom-color: #e1e4ed;
}
.qa .section h4.active:after {
transform: rotate(-90deg);
transform: rotate(-90deg);
}
.qa .section ul {
display: none;
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;
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;
font-size: 18px;
color: #00b7ce;
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;
font-size: 18px;
color: #00b7ce;
}
.qa .section li .q {
display: block;
font-size: 128.6%;
font-weight: bold;
color: #00b7ce;
display: block;
font-size: 128.6%;
font-weight: bold;
color: #00b7ce;
}
.qa .section li a {
color: #333;
color: #333;
}
.qa .submenu li.pro a,
.qa .section .ttl.pro {
color: #fba800;
color: #fba800;
}
.qa .section .pro .pt:before {
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5d068), to(#eaa417))
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5d068), to(#eaa417))
}
.qa .section .pro h4 {
background-color: #ffe9bd;
color: #f97d15;
background-color: #ffe9bd;
color: #f97d15;
}
.qa .section .pro li .q {
color: #f97d15;
color: #f97d15;
}
.qa .section .pro li:after {
border-color: #f97d15;
color: #f97d15;
border-color: #f97d15;
color: #f97d15;
}
.qa .pagenation ul {
background-color: #f2f8fb;
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;
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;
content: none;
}
.qa .pagenation ul li a {
color: #4371be;
color: #4371be;
}
.qa .section .qa_box {
padding-top: 2em;
padding-bottom: 2em;
background-color: #fff;
padding-top: 2em;
padding-bottom: 2em;
background-color: #fff;
}
.qa .section .qa_box h1 {
margin-left: 2em;
text-indent: -2em;
font-size: 114.3%;
margin-left: 2em;
text-indent: -2em;
font-size: 114.3%;
}
.qa .section .qa_box h1 span {
margin-right: .5em;
color: #00b7ce;
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;
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;
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;
content: "\e903";
display: inline-block;
vertical-align: middle;
font-family: 'icomoon' !important;
font-size: 30px;
}
.qa .pro .pagenation ul {
background-color: #fdf6e9;
background-color: #fdf6e9;
}
.qa .pro .pagenation ul li {
color: #f9a700;
color: #f9a700;
}
.qa .pro .pagenation ul li a {
color: #e26700;
color: #e26700;
}
.qa .pro .section .qa_box h1 span {
color: #e26700;
color: #e26700;
}
.qa .pro .section .each h2 {
color: #e26700;
color: #e26700;
}
/*----------------------------------------------------------
......@@ -1990,199 +1990,203 @@ a:visited {
-----------------------------------------------------------*/
.toppage #showcase p {
padding: 10px 10px 0 10px;
font-size: 85.7%;
color: #00b7ce;
padding: 10px 10px 0 10px;
font-size: 85.7%;
color: #00b7ce;
}
.toppage #showcase p:nth-child(2) {
padding-bottom: 10px;
color: #333;
padding-bottom: 10px;
color: #333;
}
.toppage #showcase p:nth-child(3) {
padding-top: .5em;
padding-top: .5em;
}
.toppage .section_ttl {
padding-top: 1.5em;
text-align: center;
font-size: 171.4%;
padding-top: 1.5em;
text-align: center;
font-size: 171.4%;
}
.toppage .section_ttl:after {
content: "―";
display: block;
width: 50%;
margin: auto;
transform: scaleX(2);
line-height: 1;
color: #00b7ce;
content: "―";
display: block;
width: 50%;
margin: auto;
transform: scaleX(2);
line-height: 1;
color: #00b7ce;
}
.toppage .section.qa {
padding-bottom: 2em;
background-color: #f2f3f6;
padding-bottom: 2em;
background-color: #f2f3f6;
}
.toppage .section .tbl {
display: block;
margin: 10px auto;
display: block;
margin: 10px auto;
}
.toppage .section .tbl .row {
display: flex;
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%;
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;
text-align: center;
font-size: 110%;
color: #00b7ce;
}
.toppage .section .tbl .box .ttl.pro {
color: #fba800;
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;
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);
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);
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);
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);
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);
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;
display: block;
margin-bottom: .5em;
margin-left: 1.2em;
text-indent: -1.2em;
}
.toppage .section .tbl .box li a:before {
content: "\e910";
display: inline-block;
margin-right: 2px;
text-indent: 0;
font-family: 'icomoon' !important;
font-weight: bold;
color: #bbb;
content: "\e910";
display: inline-block;
margin-right: 2px;
text-indent: 0;
font-family: 'icomoon' !important;
font-weight: bold;
color: #bbb;
}
.toppage .section .btn {
width: 70%;
margin: 1em auto;
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;
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;
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;
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%;
padding: 1em;
background: #f2f2f2;
font-size: 86%;
}
.study03-2_line {
padding: 1em;
border: 1px solid #333;
font-size: 86%;
padding: 1em;
border: 1px solid #333;
font-size: 86%;
}
/* 20201001 */
table#table02 {
clear: both;
margin-bottom: 15px;
clear: both;
margin-bottom: 15px;
}
table#table02 th,
table#table02 td {
padding: 5px 10px;
text-align: center;
vertical-align: middle;
font-size: 77%;
padding: 5px 10px;
text-align: center;
vertical-align: middle;
font-size: 77%;
}
table#table02 th.nb {
border: none;
border: none;
}
table#table02 td.ok {
font-size: 120%;
color: #66a1cc;
font-weight: bold;
font-size: 120%;
color: #66a1cc;
font-weight: bold;
}
table#table02 td.no {
font-size: 120%;
color: #ff5b4b;
font-weight: bold;
font-size: 120%;
color: #ff5b4b;
font-weight: bold;
}
/* slilder */
.slick-dotted.slick-slider{
padding:0 0 30px 0;
height: 190px;
.slick-dotted.slick-slider {
padding: 5p 0 10px 0;
height: 190px;
}
.slick-dots{
position: relative;
}
\ No newline at end of file
.slick-dots {
position: relative;
}
.main-MV img {
height: 100%;
}
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