@charset "UTF-8";
  html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
i,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
figure,
figcaption,
input,
textarea,
select,
i {
border: 0;
font-style: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
font-family: inherit;
color: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
line-height: 1.5;
}
html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
scroll-padding-top: 12rem !important;
@media screen and (max-width: 767px) {
scroll-padding-top: 10rem !important;
}
}
@media (prefers-reduced-motion: no-preference) {
html:focus-within {
scroll-behavior: smooth;
}
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type="submit"],
button {
-webkit-appearance: none;
}
body {
font-size: 20px;
font-size: 2rem;
line-height: 1.5;
background: #fff;
color: #333333;
overflow-y: scroll;
font-family: 'Noto Sans JP', sans-serif;
}
ul,
li {
list-style: none;
}
table {
border-collapse: collapse;
width: 100%;
}
a:hover,
a:active,
a:focus {
outline: 0;
}
a {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity .2s ease-in;
-webkit-transition: opacity .2s ease-in;
transition-property: opacity, color, background, transform, box-shadow;
-webkit-transition-property: opacity, color, background, transform, box-shadow;
opacity: 1;
line-height: inherit;
}
img,
input[type="image"] {
border: 0;
height: auto;
max-width: 100%;
}
input[type="submit"] {
cursor: pointer;
-webkit-appearance: none;
border-radius: 0;
}
strong {
font-weight: bold;
}
a {
text-decoration: none;
}
a:hover,
input[type="image"]:hover {
opacity: 0.7;
}
p * {
line-height: inherit;
}
.m_ft {
font-family: YuMincho, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
} .ft_e {
font-family: 'Roboto', sans-serif;
font-weight: 500;
}
.ft_os {
font-family: 'Oswald', sans-serif;
font-weight: 500;
}
.ft_i {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 500;
}
.c_ttl {
font-size: 5rem;
text-align: center;
color: #07307b;
font-weight: 600;
margin-bottom: 1em;
}
@media screen and (max-width: 767px) {
.c_ttl {
font-size: 3.6rem;
margin-bottom: .7em;
}
}
.c_scroll ::-webkit-scrollbar {
width: .5em;
}
.c_scroll ::-webkit-scrollbar-track {
background: #ededed;
}
.c_scroll ::-webkit-scrollbar-thumb {
background: #07307b;
}
.c_banner {
overflow: hidden;
margin-top: -2em;
}
@media screen and (min-width: 768px) {
.c_banner {
padding-top: 2em;
}
}
@media screen and (max-width: 767px) {
.c_banner {
background: #1a42ab !important;
margin-top: 0;
}
}
.c_banner dt {
text-align: right;
color: #fff;
font-size: 3.4rem;
padding: .6em 0 .35em;
font-weight: bold;
position: relative;
z-index: 2;
}
@media screen and (max-width: 767px) {
.c_banner dt {
z-index: 4;
}
}
.c_banner dt:before {
content: '';
position: absolute;
background: #1a42ab;
height: 100%;
left: -300%;
width: 600%;
top: 0;
z-index: -1;
}
.c_banner dt em {
font-size: 135%;
line-height: 1;
font-weight: 700;
letter-spacing: -.03em;
}
.c_banner dt a {
font-size: 1.8rem;
background: #f0003c;
font-weight: normal;
border-radius: .3em;
padding: .7em 1.6em .6em 1em;
display: inline-block;
vertical-align: 40%;
margin-left: .3em;
position: relative;
}
.c_banner dt a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.389em;
right: 0.8em;
}
@media screen and (max-width: 767px) {
.c_banner dt {
text-align: center;
font-size: 2.4rem;
padding: .8em 4% .89em;
}
.c_banner dt:before {
content: none;
}
.c_banner dt a {
display: block;
margin-left: auto;
margin-top: .2em;
width: 18em;
padding: .4em .5em .5em 0;
box-shadow: 0 5px 3px 0 rgba(78, 78, 78, 0.1);
}
}
.c_banner dd {
position: relative;
padding: 1.2em 0;
z-index: 3;
}
.c_banner dd:before {
content: '';
position: absolute;
background: #ffef3e;
height: 100%;
left: -300%;
width: 600%;
top: 0;
z-index: -1;
}
.c_banner .box {
width: 35.1em;
margin-left: auto;
}
.c_banner .img {
position: absolute;
bottom: 0;
width: 20.7em;
left: -2.3em;
}
.c_banner .web {
background: #3667c1;
border-radius: .5em;
text-align: center;
margin-top: .3em;
}
.c_banner .web a {
display: block;
padding: .4em 0 .3em;
padding-left: 1em;
font-size: 2.7rem;
text-align: center;
color: #fff;
font-weight: bold;
}
.c_banner .web em {
color: #f7fa07;
font-size: 1.8rem;
}
.c_banner .web i {
font-size: 4.1rem;
line-height: 1;
vertical-align: -9%;
}
.c_banner .web small {
font-size: 1.45rem;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat right center;
background-size: .427em;
padding-right: 1em;
font-weight: 500;
margin-left: 1em;
}
.c_banner .web img {
width: 2.037em;
margin-right: .3em;
vertical-align: -5%;
}
@media screen and (max-width: 767px) {
.c_banner .web {
margin: .5em 4% 0;
box-shadow: 0 5px 3px 0 rgba(78, 78, 78, 0.1);
}
.c_banner .web a {
position: relative;
padding: .3em .5em .3em 0;
}
.c_banner .web a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.4em;
right: 0.5em;
}
.c_banner .web span {
display: inline-block;
text-align: left;
font-size: 1.92rem;
}
.c_banner .web span em {
display: block;
font-size: 2.46rem;
}
.c_banner .web em {
margin: 0;
}
.c_banner .web em.b {
margin-left: .2em;
display: inline-block;
vertical-align: 20%;
font-size: 1.92rem;
}
.c_banner .web i {
font-size: 5.52rem;
}
}
@media screen and (max-width: 767px) {
.c_banner .box {
width: auto;
}
.c_banner .tel {
margin-top: -4em;
position: relative;
}
.c_banner .tel img {
width: 100%;
}
.c_banner .tel a {
position: absolute;
color: transparent;
left: 4%;
bottom: 9.5%;
height: 28%;
width: 84%;
}
}
.c_mail {
position: relative;
padding: 1em 0;
background: #ffd500;
}
.c_mail dt {
background: #fff;
font-size: 2.4rem;
color: #189e03;
font-weight: bold;
display: inline-block;
letter-spacing: -.07em;
position: relative;
padding: .5em .5em .4em 1.9em;
border-radius: .3em;
}
.c_mail dt:before {
content: '';
border-style: solid;
border-width: .5em .5em 0 0;
border-color: #fff transparent transparent transparent;
}
.c_mail dt img {
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 1.7917em;
left: .5em;
}
@media screen and (min-width: 768px) {
.c_mail dt:before {
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: -.4em;
}
.c_mail dd {
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 0;
width: 15.6em;
}
}
@media screen and (max-width: 767px) {
.c_mail dt {
font-size: 2.16rem;
text-align: center;
padding: .5em 0 .4em;
display: block;
margin: 0 .5em .5em;
}
.c_mail dt:before {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: -.5em;
border-width: 0 .5em .5em 0;
border-color: transparent #fff transparent transparent;
}
.c_mail dt img {
display: none;
}
}
.c_mail dd {
background: #189e03;
box-shadow: 0 5px 3px 0 rgba(78, 78, 78, 0.1);
border-radius: .3em;
}
.c_mail dd a {
text-align: center;
padding: .6em 0 .4em;
padding-left: 1.8em;
font-size: 1.9rem;
position: relative;
color: #fff;
display: block;
line-height: 1;
font-weight: bold;
}
.c_mail dd a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.35em;
right: 0.3em;
font-size: 2.375rem;
}
.c_mail dd small {
display: block;
font-size: 81.25%;
font-weight: normal;
}
.c_mail dd img {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: .8em;
width: 1.625em;
}
@media screen and (max-width: 767px) {
.c_mail dd a {
font-size: 2.52rem;
}
.c_mail dd a:before {
width: .4em;
right: .5em;
}
}
.c_price {
position: relative;
}
.c_price dl {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 5.5em;
}
.c_price dt {
font-weight: bold;
font-size: 4.4rem;
color: #07307b;
}
.c_price p {
font-size: 1.6rem;
margin: .5em 0 1.3em;
}
@media screen and (max-width: 767px) {
.c_price {
margin: 0 -.2em 2.5em;
}
.c_price dl {
left: 0;
width: 100%;
padding: 0 1.2em .3em;
}
.c_price dt {
font-size: 3.6rem;
line-height: 1.2;
margin-bottom: .5em;
}
.c_price .btn {
display: block;
text-align: center;
}
}
.c_note {
font-size: 1.4rem;
line-height: 1.71;
}
.c_note a {
text-decoration: underline;
}
.c_note li {
line-height: inherit;
}
.c_txt {
font-size: 1.6rem;
line-height: 1.625;
}
.c_txt small {
display: block;
font-size: 1.4rem;
}
.c_lead2 {
margin-bottom: 3em;
}
.c_lead2 p {
line-height: 2;
}
@media screen and (max-width: 767px) {
.c_lead2 p {
font-size: 1.8rem;
line-height: 1.6;
}
}
.c_lead {
position: relative;
}
@media screen and (min-width: 768px) {
.c_lead.b .box {
margin-left: auto;
}
.c_lead.b .box:before {
border-width: 0 2em 1.5em 0;
border-color: transparent #E6F6FD transparent transparent;
right: auto;
left: -1.8em;
z-index: 1;
}
.c_lead.b img {
right: auto;
}
.c_lead.b .txt {
margin-left: auto;
}
}
.c_lead .box {
position: relative;
width: 39.5em;
max-width: 100%;
background: #E6F6FD;
border-radius: .55em;
z-index: 1;
}
.c_lead .box:before {
content: '';
position: absolute;
border-style: solid;
border-width: 1.5em 2em 0 0;
border-color: #E6F6FD transparent transparent transparent;
right: -1.8em;
top: 40%;
}
.c_lead .box p {
font-size: 3.2rem;
font-style: italic;
font-weight: 900;
color: #1955c4;
position: relative;
z-index: 1;
}
.c_lead .box p small {
display: block;
font-weight: normal;
font-size: 1.3rem;
margin-top: .6em;
}
.c_lead .box p b {
font-size: 127%;
font-weight: inherit;
line-height: 1;
}
.c_lead .box p em {
color: #ff7b01;
}
@media screen and (min-width: 768px) {
.c_lead {
padding-bottom: 2.5em;
}
.c_lead img {
position: absolute;
right: 0;
width: 11.15em;
bottom: 0;
}
.c_lead .box {
height: 9.5em;
text-align: center;
}
.c_lead .box p {
position: relative;
top: 50%;
transform: translate(0, -50%);
display: inline-block;
text-align: left;
}
.c_lead .txt {
line-height: 2;
margin-top: 1.8em;
width: 37em;
}
}
@media screen and (max-width: 767px) {
.c_lead {
margin-bottom: 1em;
}
.c_lead img {
width: 10em;
display: block;
margin-left: auto;
}
.c_lead .box {
padding: 1.1em 1.4em 1em;
}
.c_lead .box:before {
border-width: 0 1.5em 1.5em 0;
border-color: transparent #E6F6FD transparent transparent;
right: 50%;
bottom: -1em;
top: auto;
}
.c_lead .box p {
font-size: 2.6rem;
}
.c_lead .box p br {
display: none;
}
.c_lead .txt {
font-size: 1.6rem;
line-height: 1.6;
position: absolute;
margin-top: 1.6em;
margin-right: 11em;
}
.c_lead .txt br {
display: none;
}
}
.c_list {
position: relative;
margin-bottom: 1em;
}
.c_list.a {
margin-left: -1.8%;
}
.c_list.a>* {
margin-left: 1.8%;
width: 23.2%;
float: left;
}
@media screen and (max-width: 767px) {
.c_list.a {
margin-left: -3%;
}
.c_list.a>* {
margin-left: 3%;
width: 47%;
}
}
.c_list.b {
margin-left: -2.7%;
}
.c_list.b>* {
margin-left: 2.7%;
width: 30.63333%;
float: left;
}
@media screen and (max-width: 767px) {
.c_list.b {
margin-left: -3%;
}
.c_list.b>* {
margin-left: 3%;
width: 47%;
}
}
@media screen and (min-width: 768px) {
.c_list.b>* {
margin-bottom: 2.7%;
}
.c_list.b p {
padding: .5em 6% 0;
}
.c_list.b .btn {
width: 64%;
left: 18%;
}
}
.c_list>* {
position: relative;
display: block;
background: #fff;
border-radius: .5em;
box-shadow: 2px 2px 1px 0 rgba(78, 78, 78, 0.1);
height: 11.5em;
margin-bottom: 1.8%;
padding-bottom: 3.5em;
}
@media screen and (max-width: 767px) {
.c_list>* {
margin-bottom: 3%;
}
}
.c_list dt {
background: #1955c4;
border-radius: .3em .3em 0 0;
text-align: center;
font-weight: bold;
color: #fff;
padding: 1em;
}
.c_list p {
font-size: 1.6rem;
padding: .5em 8% 0;
}
.c_list .btn {
text-align: center;
border: solid 1px #07307b;
border-radius: 2em;
font-size: 1.6rem;
color: #07307b;
padding: .3em 0 .5em;
margin-top: .6em;
position: absolute;
bottom: 1.2em;
width: 84%;
left: 8%;
}
.c_list .btn:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow02.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.3125em;
right: 1em;
}
.c_list img {
width: 100%;
}
@media screen and (min-width: 768px) {
.c_list p {
padding: .5em 8% 0;
}
.c_list .btn {
width: 84%;
left: 8%;
}
}
@media screen and (max-width: 767px) {
.c_list dt {
font-size: 1.8rem;
}
.c_list p {
font-size: 1.5rem;
padding: .5em 5% 0;
}
.c_list .btn {
width: 90%;
left: 5%;
}
.c_list dt {
height: 3.5em;
}
.c_list dt span {
display: block;
position: relative;
top: 50%;
transform: translate(0, -50%);
line-height: 1.2;
}
}
.c_banner2 {
position: relative;
}
.c_banner2 img {
display: block;
width: 100%;
}
.c_banner2 .price {
position: absolute;
display: block;
color: transparent;
border-radius: .4em;
right: 4.2%;
top: 45.8%;
height: 15.25%;
width: 64.5%;
background: #fff;
opacity: 0;
}
.c_banner2 .price:hover {
opacity: .2;
}
.c_banner2 .tel {
position: absolute;
display: block;
color: transparent;
right: 4.2%;
bottom: 12%;
height: 16%;
width: 64.5%;
}
.c_banner2 .mail {
position: absolute;
right: 4.2%;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow02.svg) no-repeat left center;
background-size: .35em;
font-size: 1.6rem;
color: #0099cc;
padding-left: 1em;
bottom: 3.2%;
}
@media screen and (max-width: 767px) {
.c_banner2 .mail {
font-size: 2.2vw;
}
}
.c_tbl {
border-top: solid 1px #d9d9d9;
}
.c_tbl th {
background: #f7fafb;
font-weight: bold;
}
.c_tbl tr>* {
border-bottom: solid 1px #d9d9d9;
padding: 1.5em 2em;
font-size: 1.6rem;
line-height: 1.625;
}
.c_tbl td img.addr {
display: block;
width: 17.625em;
}
@media screen and (max-width: 767px) {
.c_tbl tr>* {
padding: 1em !important;
border-bottom: none;
float: left;
width: 100% !important;
}
}
.c_tbl th {
text-align: left;
width: 32%;
padding: 1.5em 1.5em;
vertical-align: middle;
}
.c_tbl2 caption {
text-align: left;
font-weight: bold;
color: #07307b;
margin-bottom: .8em;
}
.c_tbl2 thead th {
background: #07307b;
color: #fff;
}
.c_tbl2 th {
background: #f7fafb;
font-weight: bold;
}
.c_tbl2 tr>* {
border-bottom: solid 1px #d9d9d9;
padding: 1em 1.5em;
font-size: 1.6rem;
line-height: 1.625;
}
.c_tbl2 th {
text-align: left;
width: 32%;
vertical-align: middle;
} #header {
position: fixed;
width: 100%;
top: 0;
height: 12rem;
background: #fff;
z-index: 100;
border-bottom: solid 1px #e5e5e5;
}
@media screen and (max-width: 767px) {
#header {
height: 10rem;
border: none;
}
}
header a {
display: block;
}
.h_logo {
width: 17.25em;
margin-top: .6em;
}
@media screen and (max-width: 767px) {
.h_logo {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: .5em;
margin-top: 0.5em;
width: 11.2em;
}
}
@media screen and (min-width: 768px) {
.h_inner {
height: 5.5em;
padding-top: .5em;
position: relative;
}
.h_tel {
position: absolute;
left: 17.8em;
top: .6em;
}
.h_tel .txt1 {
font-size: 1.35rem;
color: #07307b;
}
.h_tel .txt2 {
font-size: 1.3rem;
font-weight: bold;
color: #07307b;
line-height: 1;
}
.h_tel .txt2 i {
font-size: 1.8rem;
}
.h_tel .tel {
color: #f0003c;
margin: 0 .5em -.3em;
}
.h_tel .tel span {
font-size: 3.4rem;
vertical-align: -18%;
font-weight: 600;
}
.h_tel .tel em {
font-size: 4.65rem;
line-height: 1;
vertical-align: -5%;
}
.h_tel .tel small {
font-size: 1.6rem;
border: solid 1px #f0003c;
padding: .35em .5em;
vertical-align: middle;
margin-right: .5em;
}
.h_tel .tel img {
width: 2.75em;
vertical-align: middle;
margin-right: .3em;
}
.h_link {
border-radius: .3em;
}
.h_link a {
position: relative;
}
.h_link a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.35em;
right: 0.3em;
font-size: 2rem;
}
.h_mail {
background: #189e03;
box-shadow: 0 5px 3px 0 rgba(78, 78, 78, 0.1);
margin-bottom: .3em;
}
.h_mail a {
padding: .6em 0 .4em;
padding-left: 1.4em;
display: block;
font-size: 1.6rem;
text-align: center;
line-height: 1;
font-weight: bold;
}
.h_mail small {
display: block;
font-size: 81.25%;
font-weight: normal;
}
.h_mail img {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: .65em;
width: 1.625em;
}
.h_web {
background: #3667c1;
box-shadow: 0 5px 3px 0 rgba(78, 78, 78, 0.1);
}
.h_web a {
padding: .4em 0 .3em;
padding-left: 1em;
font-size: 1.3rem;
text-align: center;
}
.h_web em {
color: #f7fa07;
}
.h_web i {
font-size: 2.2rem;
line-height: 1;
vertical-align: -10%;
}
.h_web img {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: .7em;
width: 1.46154em;
}
.h_right {
width: 13em;
position: absolute;
right: 0;
top: .5em;
color: #fff;
}
.h_nav_wrap {
box-shadow: 0 5px 3px 0 rgba(78, 78, 78, 0.1);
position: absolute;
width: 100%;
z-index: 99;
top: 6.2em;
height: 2.85em;
}
.h_nav {
display: table;
width: 84%;
padding-top: 1em;
font-weight: 600;
}
.h_nav>li {
display: table-cell;
font-size: 1.6rem;
color: #07307b;
text-align: center;
line-height: 1.2;
}
.h_nav>li+li {
position: relative;
}
.h_nav>li+li:before {
content: '';
height: 1.2em;
border-left: solid 1px #c4c9d1;
position: absolute;
left: 0;
}
.h_nav>li>a {
height: 2.3em;
}
.h_nav>li:hover ul {
display: block;
}
.h_nav ul {
position: absolute;
font-size: 1.4rem;
text-align: left;
background: #fff;
padding: .5em 1em;
box-shadow: 2px 2px 1px 0 rgba(78, 78, 78, 0.1);
white-space: nowrap;
display: none;
}
.h_nav ul li {
border-top: solid 1px #c4c9d1;
}
.h_nav ul li:nth-child(1) {
display: none;
}
.h_nav ul li:nth-child(2) {
border: none;
}
.h_nav ul a {
padding: .5em 1em;
}
.h_rash {
position: absolute;
right: 0;
top: .3em;
background: #f0003c;
width: 9em;
text-align: center;
border-radius: .3em;
box-shadow: 0 5px 3px 0 rgba(78, 78, 78, 0.1);
}
.h_rash a {
color: #fff;
font-size: 1.8rem;
padding: .5em 0 .5em;
}
}
@media screen and (max-width: 767px) {
.h_tel {
background: #f9e93d;
border-radius: .3em;
box-shadow: 2px 2px 1px 0 rgba(78, 78, 78, 0.5);
margin: 1em 0 .8em;
}
.h_tel a {
text-align: center;
padding: .6em 0;
color: #07307b;
font-size: 2.4rem;
font-weight: bold;
}
.h_tel img {
width: 1.7em;
vertical-align: -10%;
margin-right: .4em;
}
.h_rash {
background: #f0003c;
}
.h_rash a {
color: #fff;
font-weight: bold;
position: relative;
font-size: 2.4rem;
padding: .5em 1.2em .6em;
}
.h_rash a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow05.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.42em;
right: 1em;
font-size: 2rem;
}
.f_nav_sp a {
display: block;
}
.h_nav {
font-weight: 600;
background: #fff;
border-top: solid 1px #07307b;
}
.h_nav>li {
border-bottom: solid 1px #07307b;
}
.h_nav>li>a {
position: relative;
font-size: 1.8rem;
padding: .8em 1.6em .9em;
}
.h_nav>li>a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow04.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.35em;
right: 1em;
font-size: 2rem;
}
.h_nav ul {
border-top: solid 1px #07307b;
padding: .4em 0;
display: none;
}
.h_nav ul li {
margin-left: 1.6em;
}
.h_nav ul a {
font-size: 1.68rem;
color: #666666;
padding: .8em 1em;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow04.svg) no-repeat left center;
background-size: .35em;
}
.h_nav p {
font-size: 1.8rem;
padding: .8em 1.6em .9em;
position: relative;
cursor: pointer;
}
.h_nav p:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_open.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 2em;
right: 0.65em;
}
.h_nav p.open:before {
background-image: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_close.svg);
}
.h_nav p.open+ul {
display: block;
}
.h_close {
background: #07307b;
text-align: center;
color: #fff;
font-size: 1.92rem;
padding: .8em 0 1em;
margin-top: 2em;
}
.h_close img {
width: 1em;
margin-right: .6em;
vertical-align: middle;
}
.f_nav_sp .h_nav ul {
background: #f2f7ff;
}
}
@media all and (min-width: 768px) {
.h_sp_inner {
height: auto !important;
}
#toggle_menu {
display: block !important;
}
}
@media all and (max-width: 767px) {
.h_menu {
position: absolute;
right: 0;
bottom: 0;
width: 3.9em;
height: 84%;
z-index: 10;
cursor: pointer;
text-align: center;
padding-top: .8em;
}
.h_menu:before {
content: 'メニュー';
position: absolute;
width: 100%;
text-align: center;
font-size: 1.56rem;
font-weight: bold;
left: 0;
bottom: .8em;
color: #07307b;
}
.h_menu span {
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/h_menu.svg) no-repeat;
background-size: contain;
display: inline-block;
width: 1.5em;
height: 1.5em;
}
.h_mail {
position: absolute;
right: 3.9em;
bottom: 0;
background: #189e03;
width: 6.3em;
height: 83%;
color: #fff;
text-align: center;
}
.h_mail a {
display: block;
font-size: 1.56rem;
height: 100%;
padding-top: .8em;
font-weight: bold;
}
.h_mail img {
display: block;
margin: 0 auto .2em;
width: 2.4em;
}
#toggle_menu {
display: none;
position: fixed;
top: 4.9em;
z-index: 9;
left: 0;
width: 100%;
height: 100%;
background: #def8ff;
}
.h_sp_inner {
overflow-y: auto;
}
body.open {
overflow-y: hidden;
}
body.open .h_menu {
background: #def8ff;
}
body.open .h_menu:before {
content: '閉じる';
}
body.open .h_menu span {
width: 1.2em;
background-image: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/h_close.svg);
}
}
#gototop {
position: fixed;
right: 1em;
bottom: 1em;
z-index: 8;
}
#gototop img {
width: 3.5em;
display: block;
}
#gototop a {
display: block;
}
@media screen and (max-width: 767px) {
#gototop {
right: 2%;
bottom: 20vw;
}
}
@media screen and (min-width: 768px) {
#footer {
position: relative;
background: #07307b;
}
}
@media screen and (max-width: 767px) {
#footer {
margin-top: 3em;
margin-bottom: 18.5vw;
}
}
.fix_footer {
position: fixed;
bottom: 0;
width: 100%;
z-index: 100;
}
.fix_footer img {
width: 100%;
display: block;
}
.fix_footer a {
display: block;
}
@media screen and (min-width: 768px) {
.fix_footer {
display: none !important;
}
}
.f_nav {
color: #fff;
padding: 2.5em 0 4.5em;
}
@media screen and (min-width: 768px) {
.f_nav {
margin-left: -4%;
}
.f_nav>* {
margin-left: 4%;
width: 21%;
float: left;
}
}
.f_nav a {
display: block;
}
.f_nav p {
font-size: 1.6rem;
font-weight: bold;
border-bottom: solid 1px #7c91b9;
}
.f_nav p a {
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow03.svg) no-repeat right center;
padding: .9em 0;
}
.f_nav ul {
margin-top: .6em;
}
.f_nav ul li {
font-size: 1.4rem;
}
.f_nav ul a {
padding: .25em 0;
}
.f_copy {
font-size: 1.2rem;
color: #07307b;
padding: 1.5em 0;
text-align: center;
background: #fff;
}
@media screen and (min-width: 768px) {
.f_privacy {
position: relative;
background: #07307b;
height: 3em;
}
.f_privacy a {
width: 6.25em;
position: absolute;
left: 50%;
margin-left: 20em;
bottom: 1em;
}
}
@media screen and (max-width: 767px) {
.f_privacy {
text-align: center;
margin-top: 1.5em;
}
.f_privacy a {
display: inline-block;
width: 4em;
}
} .evt {
visibility: hidden;
}
.c_anchor {
position: absolute;
width: 100%;
left: 0;
margin-top: -5.65em;
}
@media screen and (max-width: 767px) {
.c_anchor {
margin-top: -3.9em;
}
} .top_main {
margin-top: 9em;
position: relative;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.top_main {
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/mv_bg.jpg) no-repeat center bottom;
background-size: cover;
}
.top_main img.pc {
position: relative;
display: block;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
max-width: 110%;
}
.top_main img.sp {
display: none;
}
}
@media screen and (max-width: 767px) {
.top_main {
margin-top: 4.9em;
}
.top_main img.pc {
display: none;
}
.top_main img.sp {
display: block;
}
}
.top_catch {
overflow: hidden;
}
.top_catch dt {
text-align: center;
background: #1a42ab;
color: #fff;
font-size: 3rem;
padding: .2em;
font-weight: 900;
}
.top_catch dt em {
font-size: 150%;
line-height: 1;
font-weight: 700;
letter-spacing: -.03em;
}
@media screen and (max-width: 767px) {
.top_catch dt {
font-size: 1.8rem;
}
}
.top_catch .tel {
position: relative;
}
@media screen and (min-width: 768px) {
.top_catch .tel {
width: 41.65em;
top: -1.5em;
left: -1.4em;
margin-bottom: -.5em;
}
}
.top_catch .tel img {
display: block;
width: 100%;
}
.top_catch .web {
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: -.8em;
width: 14.15em;
}
.top_three {
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/top_bg01.jpg) no-repeat center center;
background-size: cover;
color: #fff;
padding-top: 1.8em;
}
@media screen and (min-width: 768px) {
.top_three {
height: 16.5em;
}
.top_three.b {
padding-top: 3em;
}
.top_three .c {
position: absolute;
right: 0;
top: 0;
width: 31.5em;
}
}
.top_three .a {
width: 21.35em;
margin-bottom: .5em;
}
.top_three .b {
font-size: 1.6rem;
}
.top_three .b strong {
font-size: 1.2rem;
display: block;
margin-top: .7em;
font-weight: normal;
}
.top_three .btn {
margin-top: .7em;
}
.top_three .btn a {
display: inline-block;
background: #360200;
color: #fff;
font-size: 1.4rem;
width: 14.285em;
text-align: center;
padding: .6em 0 .8em;
border-radius: .35em;
box-shadow: 1px 1px 0 0 #000;
position: relative;
}
.top_three .btn a:before {
content: '';
position: absolute;
border: .3em solid transparent;
border-left: .5em solid #fff;
right: 1em;
top: 47%;
transform: translate(0, -50%);
}
@media screen and (max-width: 767px) {
.top_three {
background-image: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/top_bg01_sp.jpg?v=1);
background-position: bottom center;
padding: 1.2em 0 40%;
text-align: center;
white-space: nowrap;
}
.top_three.b {
padding: 1.4em 0 42%;
}
.top_three .a {
width: 17.4em;
margin: 0 auto .5em;
}
.top_three .btn {
margin-top: .5em;
}
.top_three .btn a {
padding-bottom: .6em;
}
}
.top_tosen {
background: #f1fcff;
padding: 3em;
}
.top_tosen a {
display: block;
}
.top_tosen img {
width: 100%;
}
@media screen and (max-width: 767px) {
.top_tosen {
padding-top: 1em;
margin-bottom: -1em;
}
}
.top_service {
padding: 4em 0;
background: #f1fcff url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/top_bg02.jpg) no-repeat top center;
background-size: 100% auto;
}
@media screen and (max-width: 1400px) {
.top_service {
background-size: 70em;
}
}
@media screen and (max-width: 767px) {
.top_service {
padding: 1.6em 0 1em;
background-image: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/top_bg02_sp.jpg);
background-size: contain;
}
}
.top_first {
padding: 4em 0 5em;
position: relative;
background: #e5f9ff url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/top_bg03.jpg) no-repeat top center;
background-size: 100% auto;
}
.top_first:before {
content: '';
position: absolute;
width: 100%;
height: 50%;
bottom: 0;
left: 0;
background: #e5f9ff url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/top_bg04.jpg) no-repeat bottom center;
background-size: 100% auto;
}
@media screen and (max-width: 1400px) {
.top_first {
background-size: 70em;
}
.top_first:before {
background-size: 70em;
}
}
@media screen and (max-width: 767px) {
.top_first {
padding: 2.2em 0 0;
background-image: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/top_bg03_sp.jpg);
background-size: contain;
}
.top_first:before {
background-image: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/top_bg04_sp.jpg);
background-size: contain;
}
}
.top_first .ttl {
color: #07307b;
font-weight: bold;
font-size: 4rem;
position: relative;
border-left: solid 0.25em #07307b;
padding-left: .5em;
line-height: 1.3;
margin-bottom: 1.2em;
}
.top_first .ttl small {
font-size: 3rem;
}
.top_first .ttl .top_btn {
display: block;
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 0;
font-weight: normal;
}
@media screen and (max-width: 767px) {
.top_first .ttl {
border: none;
text-align: center;
padding: 0;
font-size: 3.6rem;
}
.top_first .ttl .top_btn {
display: none;
}
.top_first .ttl small {
display: block;
font-size: 2.4rem;
}
}
.top_btn {
display: inline-block;
position: relative;
color: #07307b;
background: #fff;
font-size: 1.6rem;
font-weight: normal;
border-radius: 2em;
padding: .6em 2.5em .7em 2em;
border: solid 2px #07307b;
line-height: 1.5;
}
.column_btn {
display: inline-block;
position: relative;
color: #07307b;
background: #fff;
font-size: 1.6rem;
font-weight: normal;
border-radius: 2em;
padding: .6em 2.5em .7em 2em;
border: solid 2px #07307b;
line-height: 1.5;
}
.top_btn:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow02.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 5px;
right: 0.8em;
}
.column_btn:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow02.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 5px;
right: 0.8em;
}
@media screen and (max-width: 767px) {
.top_btn {
font-size: 1.92rem;
border: solid 1px #07307b;
}
.column_btn {
font-size: 1.92rem;
border: solid 1px #07307b;
}
}
.top_price {
margin: 0 -.2em 5em;
}
.top_flow .txt1 {
text-align: center;
color: #07307b;
font-size: 3.3rem;
font-weight: bold;
margin-bottom: 1.5em;
}
.top_flow .txt1 small {
display: block;
font-weight: normal;
font-size: 1.6rem;
}
.top_flow .txt1 em {
color: #ff7500;
}
@media screen and (max-width: 767px) {
.top_flow .txt1 {
font-size: 2.4rem;
}
.top_flow .txt1 small {
font-size: 1.44rem;
}
}
.top_flow .box {
background: #c0e9f5;
border-radius: .5em;
}
@media screen and (min-width: 768px) {
.top_flow .box {
width: 33em;
max-width: 100%;
padding: 1.5em .45em 1em;
}
.top_flow .box li {
width: 33.33%;
}
}
@media screen and (max-width: 767px) {
.top_flow .box {
padding: 1em;
}
.top_flow .msg {
text-align: center;
margin: 2rem 0 0;
}
.top_flow .msg img {
width: 86%;
}
}
@media screen and (min-width: 768px) {
.top_flow .sub {
position: absolute;
width: 21.2em;
right: -.45em;
bottom: 1em;
}
}
@media screen and (max-width: 767px) {
.top_flow .sub {
padding: 1em;
}
}
.top_flow .list {
position: relative;
margin-bottom: 5em;
}
@media screen and (min-width: 768px) {
.top_flow .list ul {
display: table;
width: 100%;
}
.top_flow .list li {
display: table-cell;
padding: 0 .45em;
}
}
.top_flow .list dt {
font-weight: bold;
font-size: 2.4rem;
text-align: center;
color: #07307b;
margin: .7em 0 .3em;
}
.top_flow .list dd {
font-size: 1.6rem;
}
.top_flow .list .img {
background: #fff;
border-radius: .5em;
width: 9.7em;
height: 9.7em;
margin: 0 auto;
position: relative;
}
.top_flow .list i {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background: #ff9000;
font-size: 3.4rem;
color: #fff;
font-style: italic;
display: block;
width: 1.7em;
height: 1.7em;
border-radius: 100%;
text-align: center;
line-height: 1.7;
}
.top_flow .list .sub i {
background: #07307b;
}
@media screen and (max-width: 767px) {
.top_flow .list li {
min-height: 6.2em;
}
.top_flow .list li+li {
margin-top: 1.5em;
}
.top_flow .list dl {
margin-left: 7em;
}
.top_flow .list dt {
font-size: 2.76rem;
text-align: left;
}
.top_flow .list .img {
width: 6.2em;
height: 6.2em;
position: absolute;
}
.top_flow .list i {
font-size: 2.16rem;
}
.top_flow .list .btn {
text-align: center;
margin-top: .5em;
}
}
@media screen and (min-width: 768px) {
.top_flow .nav li {
float: left;
width: 49%;
}
.top_flow .nav li:nth-child(even) {
float: right;
}
}
.top_flow .nav a {
display: block;
}
.top_flow .nav li {
background: #fff;
border-radius: .3em;
box-shadow: 2px 2px 1px 0 rgba(78, 78, 78, 0.1);
margin-bottom: 2%;
position: relative;
}
.top_flow .nav img {
display: block;
float: right;
width: 37.8%;
}
.top_flow .nav dl {
float: left;
width: 61%;
padding: 1.5em;
}
.top_flow .nav dt {
font-weight: bold;
color: #07307b;
margin-bottom: 1em;
}
.top_flow .nav dd {
font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
.top_flow .nav li {
margin-bottom: 4em;
}
.top_flow .nav dl {
padding: 1em;
}
.top_flow .nav dt {
position: absolute;
top: -2em;
width: 100%;
text-align: center;
left: 0;
font-size: 2.4rem;
}
.top_flow .nav .more {
position: absolute;
right: 40%;
bottom: .5em;
font-size: 1.44rem;
color: #0099cc;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow02.svg) no-repeat left center;
padding-left: .8em;
}
}
.top_area {
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/bn_area_bg.jpg) no-repeat center center;
background-size: cover;
overflow: hidden;
}
.top_area .box {
position: relative;
}
.top_area .top_btn {
position: absolute;
z-index: 1;
bottom: 4.3em;
left: 34.5%;
}
@media screen and (min-width: 768px) {
.top_area .box {
width: 57.4em;
max-width: 100%;
left: 50%;
margin-left: -27em;
}
.top_area img.pc {
display: block;
}
.top_area img.sp {
display: none;
}
}
@media screen and (max-width: 767px) {
.top_area {
margin-bottom: 2em;
}
.top_area .top_btn {
left: 50%;
transform: translate(-50%, 0);
white-space: nowrap;
bottom: 1.4em;
}
.top_area img.pc {
display: none;
}
.top_area img.sp {
display: block;
width: 100%;
}
}
.top_news {
margin-bottom: 3.5em;
}
.top_news .ttl {
font-size: 3rem;
font-weight: bold;
color: #07307b;
border-bottom: solid 2px #07307b;
position: relative;
margin-bottom: 1.2em;
}
.top_news .ttl a {
position: absolute;
right: 0;
font-size: 1.6rem;
color: #0099cc;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow02.svg) no-repeat left center;
padding-left: .8em;
bottom: .4em;
}
.top_news li {
position: relative;
min-height: 4em;
}
.top_news li+li {
margin-top: 1em;
}
.top_news li a {
display: block;
padding-left: 8em;
}
.top_news p {
font-size: 1.4rem;
line-height: 1.7;
}
.top_news p span {
display: block;
color: #7a7a7a;
margin-bottom: .4em;
}
.top_news p i {
background: #5089f3;
color: #fff;
margin-left: 1em;
border-radius: .3em;
padding: .2em .3em .1em;
min-width: 6.5em;
display: inline-block;
text-align: center;
font-size: 1.3rem;
}
.top_news img {
position: absolute;
width: 6.5em;
left: 0;
}
@media screen and (max-width: 767px) {
.top_news .ttl {
margin-bottom: 2.2em;
}
.top_news li+li {
margin-top: 3em;
}
.top_news li a {
padding-left: 7.3em;
}
.top_news p span {
position: absolute;
top: -2.4em;
left: 0;
}
.top_news p i {
padding: .1em .3em .1em;
line-height: 1.3;
}
.top_news img {
top: .3em;
}
}
.top_banner {
margin-bottom: 3.5em;
}
.top_banner a {
display: block;
}
.top_banner img {
width: 100%;
display: block;
}
.top_banner li+li {
margin-top: .5em;
}
@media screen and (max-width: 767px) {
.top_banner {
margin-bottom: 3em;
}
.top_banner li+li {
margin-top: 1em;
}
}
@media screen and (min-width: 768px) {
.top_news {
float: left;
width: 65%;
margin-top: 2.5em;
}
.top_banner {
float: right;
width: 30.7%;
margin-top: 3.4em;
}
}
.top_movie {
padding: 3.5em 0 4.5em;
background: #e5f9ff;
}
@media screen and (min-width: 768px) {
.top_movie ul {
margin-left: -4.3%;
}
.top_movie ul>* {
margin-left: 4.3%;
width: 29.03333%;
float: left;
}
}
.top_movie li p {
text-align: center;
}
.top_movie a {
display: block;
text-align: center;
}
@media screen and (max-width: 767px) {
.top_movie {
padding: 2.5em 0 2em;
}
.top_movie li+li {
margin-top: 1em;
}
}
.top_notice {
padding: 3em 0 8em;
}
@media screen and (min-width: 768px) {
.top_notice {
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/bg_wave.jpg) no-repeat bottom center;
background-size: 100% auto;
}
}
.top_notice dt {
font-size: 3rem;
font-weight: bold;
color: #07307b;
padding-bottom: .4em;
margin-bottom: .8em;
line-height: 1.3;
border-bottom: solid 2px #07307b;
}
.top_notice dd {
margin-bottom: 3.5em;
max-height: 19em;
overflow-y: auto;
}
.top_notice .ttl {
font-weight: bold;
margin-top: 3.2em;
}
.top_notice p {
font-size: 1.6rem;
line-height: 1.875;
}
.top_notice p+p {
margin-top: .5em;
}
@media screen and (max-width: 767px) {
.top_notice {
padding: 3em 0 0;
}
.top_notice dt {
margin-bottom: .5em;
}
.top_notice dd {
max-height: 12em;
margin-bottom: 2.5em;
}
.top_notice .ttl {
margin-top: 2em;
}
}
.top_app {
margin-top: 5em;
}
.top_app img {
width: 100%;
}
.top_app a {
display: block;
}
@media screen and (max-width: 767px) {
.top_app {
margin-top: 3em;
}
}
.top_bnr {
text-align: center;
margin-top: 5rem;
}
.top_bnr a {
display: block;
}
.top_bnr .img {
padding: 3rem 0 2.5rem;
background: -moz-linear-gradient(50% 0% -90deg, white 0%, #efefef 100%);
background: -webkit-linear-gradient(-90deg, white 0%, #efefef 100%);
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, white), color-stop(1, #efefef));
background: linear-gradient(180deg, white 0%, #efefef 100%);
border: solid 2px #e5e5e5;
margin-bottom: .5rem;
}
.top_bnr p {
font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
.top_bnr p {
font-size: 1.74rem;
}
.top_bnr .img {
padding: 2.4rem 0 1.5rem;
}
.top_bnr li+li {
margin-top: 2rem;
}
}
@media screen and (min-width: 768px) {
.top_bnr {
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.top_bnr>* {
width: 51.4rem;
}
}
.top_corona {
margin: 3rem 0 5rem;
}
.top_corona img {
display: block;
width: 100%;
}
@media screen and (max-width: 767px) {
.top_corona {
margin: 2.5rem 0;
}
}
#overlay {
display: none;
position: fixed;
width: 100%;
height: 100%;
z-index: 100;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
}
#overlay .movie {
position: relative;
width: 640px;
padding-top: 360px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#overlay iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
@media screen and (max-width: 767px) {
#overlay .movie {
width: 94%;
padding-top: 56.25%;
margin-top: -2em;
}
}
.low {
margin-top: 9.2em;
padding-bottom: 8em;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.low {
margin-top: 4.9em;
padding-bottom: 1.8em;
}
}
@media screen and (min-width: 768px) {
.low {
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/bg_wave.jpg) no-repeat bottom center;
background-size: 100% auto;
}
}
.low_header {
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/bg_hd01.jpg) no-repeat center center;
background-size: cover;
height: 10em;
position: relative;
}
.low_header.b {
background-image: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/bg_hd02.jpg);
height: 7.5em;
}
.low_header.b .ttl {
font-size: 4rem;
color: #fff;
}
.low_header .ttl {
width: 100%;
text-align: center;
color: #07307b;
font-size: 5rem;
font-weight: 600;
position: absolute;
top: 50%;
transform: translate(0, -50%);
letter-spacing: .05em;
}
@media screen and (max-width: 767px) {
.low_header {
height: 8em;
}
.low_header.b {
height: 6.5em;
}
.low_header.b .ttl {
font-size: 3.6rem;
}
.low_header .ttl {
font-size: 4rem;
line-height: 1.2;
}
}
.low_ttl {
border-left: solid 0.2em #07307b;
font-size: 3rem;
font-weight: bold;
padding: .1em 0;
padding-left: .6em;
line-height: 1.4;
color: #07307b;
}
@media screen and (max-width: 767px) {
.low_ttl {
font-size: 2.7rem;
padding-left: .5em;
}
}
.low_ttl.b {
border-width: .36em;
}
.low_ttl2 {
background: #f0f7fa;
font-size: 2.6rem;
font-weight: bold;
color: #07307b;
border-bottom: solid 1px #07307b;
padding: .4em 1em;
margin-bottom: 1.5em;
}
@media screen and (max-width: 767px) {
.low_ttl2 {
font-size: 2.4rem;
padding-left: .6em;
}
}
.low_body {
padding-top: 3em;
}
.low_body.b section {
margin-bottom: 5em;
}
.low_body.b section:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
.low_body.b section {
margin-bottom: 3em;
}
}
.low_body .low_ttl {
margin-bottom: 1.2em;
}
@media screen and (max-width: 767px) {
.low_body {
padding-top: 2em;
}
.low_body .low_ttl {
margin-bottom: .8em;
}
}
.low_col {
margin-bottom: 5em;
}
.low_col.last {
margin-bottom: 0;
}
.low_col p {
font-size: 1.6rem;
line-height: 1.875;
}
.low_col p+p {
margin-top: .7em;
}
@media screen and (min-width: 768px) {
.low_col>p {
float: left;
width: 66%;
}
.low_col .box {
float: left;
width: 66%;
}
.low_col dl {
float: left;
width: 66%;
}
.low_col img {
float: right;
width: 16.55em;
}
}
@media screen and (max-width: 767px) {
.low_col {
margin-bottom: 4em;
}
.low_col img {
display: block;
margin: 1.5em auto 0;
}
}
.pay_list dt {
background: #f0f7fa;
font-size: 2.6rem;
font-weight: bold;
color: #07307b;
padding: .3em 1em;
border-bottom: solid 1px #07307b;
margin-bottom: 1.5em;
}
.pay_list dd {
margin-bottom: 2.5em;
}
.pay_list .paypay {
width: 33em;
}
.pay_list .img {
border: solid 1px #d7d7d7;
display: inline-block;
padding: .8em 1em;
width: 13.5em;
}
@media screen and (max-width: 767px) {
.pay_list .img {
font-size: 1.4rem;
}
}
.pay_list .img+.img {
margin-left: 1em;
}
.pay_list .img img {
vertical-align: -50%;
width: 3.25em;
margin-right: 1.6em;
}
.area_body .c_lead .box:after {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/area_img02.png) no-repeat;
background-size: contain;
width: 24.05em;
height: 28.95em;
right: 58%;
top: -.5em;
}
@media screen and (min-width: 768px) {
.area_body .c_lead {
margin-bottom: 4em;
}
.area_body .c_lead .box {
width: 38.5em;
}
.area_body .c_lead img {
right: 2em;
}
}
@media screen and (max-width: 767px) {
.area_body .c_lead .box:after {
right: 35%;
}
}
.area_ttl {
position: relative;
text-align: center;
font-size: 3rem;
color: #07307b;
font-weight: bold;
margin-bottom: .8em;
z-index: 1;
}
@media screen and (max-width: 767px) {
.area_ttl {
font-size: 2.8rem;
}
}
.area_list {
position: relative;
margin-left: -1.8%;
margin-bottom: 1em;
z-index: 1;
}
.area_list>* {
margin-left: 1.8%;
width: 23.2%;
float: left;
}
@media screen and (max-width: 767px) {
.area_list {
margin-left: -4%;
}
.area_list>* {
margin-left: 4%;
width: 46%;
}
}
.area_list>li {
background: #fff;
border-radius: .5em;
box-shadow: 2px 2px 1px 0 rgba(78, 78, 78, 0.1);
height: 11.5em;
margin-bottom: 1.8%;
}
.area_list>li li {
font-size: 1.6rem;
color: #0099cc;
display: inline-block;
width: 48%;
line-height: 2;
}
.area_list>li ul {
padding: .6em .4em;
}
@media screen and (max-width: 767px) {
.area_list>li {
margin-bottom: 4%;
}
.area_list>li li {
font-size: 1.4rem;
}
.area_list>li ul {
padding: .6em .4em .6em .7em;
}
}
.area_list a {
display: block;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow02.svg) no-repeat left center;
background-size: .3em;
padding-left: 1em;
white-space: nowrap;
}
.area_list p {
background: #1955c4;
border-radius: .3em .3em 0 0;
text-align: center;
font-weight: bold;
color: #fff;
padding: 1em 0;
}
.area_list p a {
padding-left: 0;
}
.area_main {
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/mv_bg.jpg) no-repeat center bottom;
background-size: cover;
position: relative;
overflow: hidden;
}
.area_main .ttl {
width: 1164px;
margin: 0 auto;
position: relative;
}
.area_main em {
position: absolute;
font-size: 2.4rem;
font-weight: 900;
color: #fff;
top: 22.5%;
left: 0;
width: 8.6em;
text-align: center;
}
@media screen and (max-width: 1164px) {
.area_main .ttl {
width: auto;
}
.area_main em {
font-size: 3.72vw;
}
}
@media screen and (min-width: 768px) {
.area_main img.pc {
display: block;
margin: 0 auto;
}
.area_main img.sp {
display: none;
}
}
@media screen and (max-width: 767px) {
.area_main em {
top: 9.65%;
left: 4.9%;
font-size: 4.7vw;
width: 4.6em;
}
.area_main img.pc {
display: none;
}
.area_main img.sp {
display: block;
}
}
.area_header {
margin-bottom: 3em;
}
.area_header.b {
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
.area_header {
margin-bottom: 2em;
}
}
.area_header .top_catch {
overflow: hidden;
}
.area_header .top_catch dd {
position: relative;
}
.area_header .top_catch dd:before {
content: '';
width: 500%;
height: 100%;
position: absolute;
left: -50%;
background: #ffef3e;
z-index: -1;
}
.area_support {
margin-bottom: 4em;
}
.area_support ::-webkit-scrollbar {
width: .3em;
}
.area_support .box {
margin: 2em 0 .5em;
border: solid 1px #dfdfdf;
padding: .5em .5em .5em 1.3em;
} .area_support dl>* {
line-height: 1.8;
}
.area_support dt {
font-size: 1.8rem;
font-weight: bold;
color: #07307b;
}
.area_support dd {
font-size: 1.6rem;
padding-right: 1em;
}
@media screen and (max-width: 767px) {
.area_support {
margin-bottom: 3em;
}
.area_support .box {
margin-top: 1.5em;
padding: .2em .2em .2em .8em;
}
.area_support dl>* {
line-height: 1.5;
}
.area_support dt {
margin-bottom: .3em;
}
.area_support dd {
margin-bottom: 1em;
} .area_support .txt {
line-height: 1.6;
font-size: 1.8rem;
margin-top: 1em;
}
}
.area_serv {
margin-bottom: 4.5em;
}
.area_serv .low_ttl {
margin-bottom: 1.5em;
}
.area_voice .low_ttl {
margin-bottom: 1.2em;
}
.area_voice dl {
max-height: 48em;
overflow-y: auto;
padding-right: 1em;
}
.area_voice dt {
font-size: 2.4rem;
font-weight: bold;
color: #07307b;
margin-bottom: .5em;
}
.area_voice dd {
margin-bottom: 1.5em;
padding-bottom: 1.5em;
border-bottom: solid 1px #888888;
}
.area_voice p {
font-size: 1.6rem;
line-height: 1.875;
}
.area_voice p em {
font-weight: bold;
display: block;
margin-bottom: .5em;
}
@media screen and (max-width: 767px) {
.area_voice .low_ttl {
margin-bottom: .8em;
}
.area_voice dl {
max-height: 45em;
}
.area_voice dt {
font-size: 2.2rem;
}
.area_voice p {
font-size: 1.6rem;
line-height: 1.6;
}
}
.area_voice .txt {
line-height: 2;
margin-top: 3em;
font-size: 1.8rem;
}
.area_txt {
font-size: 1.4rem;
line-height: 1.71;
margin-top: 3em;
}
.area_detail h2 {
font-weight: bold;
margin-top: -3em;
padding-top: 6em;
}
@media screen and (max-width: 767px) {
.area_detail h2 {
padding-top: 4.5em;
}
}
.area_detail h2+h3 {
margin-top: -6em;
}
@media screen and (max-width: 767px) {
.area_detail h2+h3 {
margin-top: -3.5em;
}
}
.area_detail h3 {
font-weight: bold;
font-size: 1.6rem;
margin-top: -3em;
padding-top: 7.5em;
}
@media screen and (max-width: 767px) {
.area_detail h3 {
margin-top: -3em;
padding-top: 5em;
}
}
.area_detail .box {
margin-left: 1.5em;
}
.area_detail dl>* {
font-size: 1.6rem;
}
.area_detail dt {
font-weight: bold;
margin-top: 1.5em;
}
.area_detail dd {
font-size: 1.4rem;
}
.area_detail .c_note {
margin-top: 2em;
}
.blog_body {
margin-top: 3.5em;
}
.blog_main td a {
color: #0099cc;
}
@media screen and (min-width: 768px) {
.blog_main {
width: 72.7%;
float: left;
}
.blog_side {
width: 22.3%;
float: right;
}
}
@media screen and (max-width: 767px) {
.blog_main {
margin-bottom: 2em;
}
}
.blog_list li {
position: relative;
margin-top: 3em;
}
@media screen and (max-width: 767px) {
.blog_list li {
margin-top: 2em;
}
}
.blog_list img {
display: block;
width: 12.1em;
}
@media screen and (min-width: 768px) {
.blog_list img {
float: left;
margin-right: 1.5em;
}
}
@media screen and (max-width: 767px) {
.blog_list img {
margin: 0 auto .8em;
}
}
@media screen and (min-width: 768px) {
.blog_list .btn {
position: absolute;
left: 13.6em;
bottom: -.5em;
}
.blog_list .btn>* {
font-size: 1.6rem;
color: #0099cc;
display: inline-block;
position: relative;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow02.svg) no-repeat 0.4em center;
background-size: .35em;
padding-left: 1.4em;
}
}
@media screen and (max-width: 767px) {
.blog_list .btn {
display: none;
}
}
.blog_list p {
font-size: 2.2rem;
font-weight: bold;
}
@media screen and (min-width: 768px) {
.blog_list p {
position: relative;
top: -.3em;
}
}
.blog_list span {
display: block;
margin-bottom: .5em;
font-weight: normal;
font-size: 1.4rem;
}
.blog_list a {
display: block;
}
i.cate {
margin-left: 1.4em;
background: #5d97d4;
color: #fff;
padding: .35em .8em;
border-radius: .3em;
font-size: 1.3rem;
min-width: 12em;
display: inline-block;
text-align: center;
}
i.staff {
background: #5d97d4;
}
i.media {
background: #5dcdd4;
}
i.camp {
background: #f1bd5a;
}
i.useful {
background: #3a69c1;
}
.wp-pagenavi {
text-align: center;
margin-top: 4em;
}
@media screen and (max-width: 767px) {
.wp-pagenavi {
margin-top: 2em;
}
}
.wp-pagenavi a,
.wp-pagenavi span {
display: inline-block;
vertical-align: top;
width: 2.6em;
height: 2.6em;
text-align: center;
padding-top: .45em;
font-size: 1.6rem;
margin: 0 .2em;
border: solid 1px #000;
color: #07307b;
}
.wp-pagenavi .current {
background: #07307b;
color: #fff;
}
.wp-pagenavi .previouspostslink {
position: relative;
color: transparent;
background: none;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_prev.svg) no-repeat center center;
background-size: .4375em;
}
.wp-pagenavi .nextpostslink {
position: relative;
color: transparent;
background: none;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_next.svg) no-repeat center center;
background-size: .4375em;
}
.blog_side dl>*:nth-child(1) {
margin-top: 0;
}
.blog_side dt {
background: #eef7fc;
font-size: 1.8rem;
font-weight: 600;
color: #07307b;
text-align: center;
padding: 1em 0;
border-bottom: solid 1px #07307b;
margin-top: 2em;
}
.blog_side dd.a li {
border-bottom: solid 1px #e6e6e6;
font-size: 1.6rem;
color: #0099cc;
}
.blog_side dd.a li ul {
margin: -.4em 0 1em;
}
.blog_side dd.a li li {
border: none;
padding-left: 1em;
}
.blog_side dd.a li li a {
padding: .2em 0;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_hyphen.svg) no-repeat left center;
background-size: .4375em;
padding-left: 1em;
}
.blog_side dd.a a {
display: block;
padding: 1em;
}
.blog_ttl {
font-size: 2.6rem;
font-weight: bold;
}
.blog_sub {
color: #07307b;
margin-bottom: .8em;
font-size: 1.6rem;
}
.blog_img {
margin-bottom: 2em;
}
.blog_img img {
width: 100%;
}
.blog_article {
margin: 1.5em 0 5em;
font-size: 1.6rem;
line-height: 1.875em;
}
@media screen and (max-width: 767px) {
.blog_article {
margin: 2em 0 5em;
}
}
.blog_article p {
margin-bottom: 2em;
line-height: inherit;
}
.blog_article h2 {
font-size: 2.4rem;
color: #07307b;
font-weight: bold;
border-left: solid 0.25em #07307b;
padding-left: 1em;
margin: 3em 0 1em;
}
.blog_article h2.fcB {
font-size: 14pt;
color: #0000ff;
padding-left: 0;
border-left: solid 0 #fff;
}
.blog_article h3 {
font-size: 2rem;
color: #07307b;
font-weight: bold;
margin: 2.5em 0 1em;
position: relative;
padding-left: 1em;
}
.blog_article h3:before {
content: '';
position: absolute;
left: 0;
width: .3em;
height: .3em;
background: #07307b;
top: 50%;
transform: translate(0, -50%);
}
.blog_article h3.fwB {
font-size: 12pt;
color: #000;
padding-left: 0;
}
.blog_article h3.fwB:before {
display: none;
}
a.link_under {
text-decoration: underline;
}
.blog_article h4 {
font-size: 1.8rem;
color: #07307b;
font-weight: bold;
margin: 2.5em 0 1em;
position: relative;
padding-left: 1em;
}
.blog_article h4:before {
content: '';
position: absolute;
left: 0;
width: .55em;
border-bottom: solid 2px #07307b;
top: 50%;
transform: translate(0, -50%);
}
.blog_btn {
text-align: center;
}
.blog_btn a {
display: inline-block;
padding: .8em 0;
font-weight: bold;
color: #07307b;
font-size: 1.6rem;
width: 13em;
border: solid 1px #07307b;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow06.svg) no-repeat 1em center;
}
.blog_sns {
margin-left: -2%;
text-align: center;
color: #fff;
margin-top: 4em;
margin-bottom: 4em;
}
.blog_sns>* {
margin-left: 2%;
width: 31.33333%;
float: left;
}
.blog_sns a {
display: block;
font-size: 1.8rem;
padding: 1.3em 0 1em;
position: relative;
padding-left: 2em;
}
.blog_sns a img {
width: 2em;
position: absolute;
left: 3em;
top: .9em;
}
@media screen and (max-width: 767px) {
.blog_sns {
margin-top: 3em;
margin-bottom: 3em;
}
.blog_sns a {
font-size: 3.4vw;
}
.blog_sns a img {
left: .8em;
}
}
.blog_sns .tw a {
background: #1ea1f2;
}
.blog_sns .fb a {
background: #395b9a;
}
.blog_sns .line a {
background: #01b833;
}
.hurry_banner {
position: relative;
margin-bottom: 2.5em;
}
.hurry_banner:before {
content: '';
position: absolute;
width: 1000%;
height: 100%;
left: -50%;
z-index: -1;
background: #ffef3e;
}
.hurry_banner img {
display: block;
width: 100%;
}
.hurry_banner .web {
position: absolute;
display: block;
color: transparent;
border-radius: .4em;
left: .4%;
bottom: 12%;
height: 15.25%;
width: 64.4%;
background: #fff;
opacity: 0;
}
.hurry_banner .web:hover {
opacity: .2;
}
.hurry_banner .tel {
position: absolute;
display: block;
color: transparent;
left: .4%;
bottom: 36.5%;
height: 15.25%;
width: 64.4%;
}
.hurry_flow .wrap {
background: #dff5fb;
border-radius: .4em;
margin: 2em 0 5em;
padding: 1.5em 0 3em;
}
.hurry_flow li+li {
margin-top: 1.2em;
}
.hurry_flow p {
text-align: center;
font-weight: bold;
font-size: 2.6rem;
color: #fff;
padding: .6em;
}
.hurry_flow p.a {
font-size: 3.3rem;
color: #07307b;
}
.hurry_flow p.b {
background: #ff9000;
margin-bottom: 1.3em;
}
.hurry_flow p.c {
background: #07307b;
}
.hurry_flow .inner {
width: 33.5em;
margin: 0 auto;
max-width: 90%;
}
.hurry_flow .box {
position: relative;
padding-left: 6em;
margin-bottom: 1.5em;
}
@media screen and (max-width: 767px) {
.hurry_flow .box {
padding-left: 20%;
}
}
.hurry_flow .arrow {
position: absolute;
left: 0;
height: 100%;
}
.hurry_flow .arrow:before {
content: '';
height: 96%;
width: .8em;
background: #f0003c;
position: absolute;
left: .7em;
top: 0;
}
.hurry_flow .arrow:after {
content: '';
position: absolute;
border-style: solid;
border-width: 1.8em 1.1em 0 1.1em;
border-color: #f0003c transparent transparent transparent;
bottom: 0;
left: 0;
}
.hurry_flow .arrow em {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-size: 3rem;
font-weight: bold;
color: #f0003c;
position: relative;
top: 50%;
transform: translate(0, -50%);
padding-left: 1.5em;
}
.hurry_flow dt {
font-size: 3rem;
font-weight: bold;
color: #07307b;
margin-bottom: .8em;
padding-top: .1em;
}
.hurry_flow dd {
font-size: 1.6rem;
line-height: 1.7;
}
.hurry_flow img {
float: left;
width: 8em;
margin-right: 1em;
}
@media screen and (max-width: 767px) {
.hurry_flow .wrap {
margin: 1.5em 0 4em;
padding: 1em 0 2em;
}
.hurry_flow p {
font-size: 2.2rem;
}
.hurry_flow p.a {
font-size: 3rem;
}
.hurry_flow .arrow {
font-size: 3vw;
}
.hurry_flow .arrow em {
font-size: 5vw;
padding-left: 1em;
}
.hurry_flow dt {
font-size: 4.2vw;
white-space: nowrap;
margin-bottom: .5em;
}
.hurry_flow dd {
font-size: 1.5rem;
line-height: 1.5;
}
.hurry_flow img {
font-size: 3vw;
}
}
.hurry_pay {
margin-bottom: 3em;
}
.hurry_pay .box {
position: relative;
max-width: 100%;
background: #7192AC;
border-radius: .55em;
text-align: center;
}
.hurry_pay .box:before {
content: '';
position: absolute;
border-style: solid;
border-width: .7em 0 .5em 2em;
border-color: transparent transparent transparent #7192AC;
right: -1em;
top: 54%;
z-index: 1;
}
.hurry_pay .box p {
display: inline-block;
font-weight: 900;
color: #fff;
text-align: left;
font-size: 3rem;
line-height: 1.3;
}
.hurry_pay .box p em {
font-size: 133%;
display: block;
}
@media screen and (max-width: 767px) {
.hurry_pay .box p {
font-size: 2.4rem;
}
.hurry_pay .box p br {
display: none;
}
}
.hurry_pay .worry {
position: relative;
z-index: 1;
}
@media screen and (max-width: 767px) {
.hurry_pay .worry {
margin: 1.5em 0 0;
}
.hurry_pay .worry p {
padding: 1em 1em;
}
.hurry_pay .worry img {
margin-top: -.5em;
position: relative;
width: 10em;
display: block;
margin-left: auto;
}
}
@media screen and (min-width: 768px) {
.hurry_pay .worry {
padding-left: 14.35em;
margin: 3em 0 2.4em;
}
.hurry_pay .worry p {
padding: 1.6em 1em;
}
.hurry_pay .worry .box {
width: 27em;
}
.hurry_pay .worry img {
position: absolute;
right: 4.8em;
width: 12.35em;
top: -4.5em;
z-index: 1;
}
}
.hurry_pay .relief {
position: relative;
margin-bottom: 2em;
}
.hurry_pay .relief p {
padding: 1.1em 1em;
}
.hurry_pay .relief .box {
background: #FFA200;
width: 35.75em;
}
@media screen and (min-width: 768px) {
.hurry_pay .relief {
padding-left: 15.9em;
padding-bottom: 2em;
}
.hurry_pay .relief .box:before {
border-width: .7em 2em .5em 0;
border-color: transparent #FFA200 transparent transparent;
right: auto;
left: -1em;
z-index: 1;
top: 30%;
}
.hurry_pay .relief img {
position: absolute;
width: 15.15em;
bottom: 0;
left: 0;
}
}
@media screen and (max-width: 767px) {
.hurry_pay .relief .box:before {
border-width: 1.5em 1.5em 0 0;
border-color: #FFA200 transparent transparent transparent;
}
.hurry_pay .relief img {
position: relative;
width: 10em;
display: block;
}
}
@media screen and (max-width: 767px) {
.hurry_pay {
margin-bottom: 2em;
}
.hurry_pay .box:before {
border-width: 0 1.5em 1.5em 0;
border-color: transparent #7192AC transparent transparent;
right: 50%;
bottom: -1em;
top: auto;
}
}
.form_body {
padding-top: 3.5em;
}
@media screen and (min-width: 768px) {
.form_body .c_lead {
margin-bottom: 1.5em;
}
.form_body .c_lead img {
width: 15.7em;
}
}
@media screen and (max-width: 767px) {
.form_body .c_lead img {
width: 12em;
}
}
@media screen and (max-width: 767px) {
.form_body {
padding-top: 2em;
}
}
.form {
padding: 2em 0 0;
position: relative;
z-index: 1;
}
.form div.wpcf7 .ajax-loader {
position: absolute;
background-color: transparent;
}
.form div.wpcf7 .ajax-loader:before {
content: none;
}
.form .wpcf7c-conf:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.form input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.form table {
margin-bottom: 3em;
border-top: solid 1px #d9d9d9;
position: relative;
z-index: 1;
}
@media screen and (max-width: 767px) {
.form table {
border: none;
margin-bottom: 2em;
}
}
.form tr>* {
padding: 1.5em 1.4em;
font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
.form tr>* {
position: relative;
}
.form tr>*:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
width: 100%;
border-bottom: solid 1px #d9d9d9;
}
}
@media screen and (max-width: 767px) {
.form tr>* {
padding: 1em;
float: left;
width: 100% !important;
}
}
.form th {
text-align: left;
width: 32%;
vertical-align: middle;
background: #f7fafb;
font-weight: bold;
}
.form th a {
border-bottom: solid 1px #888;
}
.form th em {
background: #ff0000;
color: #fff;
padding: 0 .4em;
font-weight: normal;
font-weight: 700;
position: absolute;
right: 1.5em;
font-size: 1.4rem;
}
.form td input[type="text"],
.form td input[type="email"],
.form td input[type="tel"],
.form td textarea,
.form td select {
padding: .4em .5em;
border-radius: .2em;
border: solid 1px #d9d9d9;
width: 100%;
}
.form td select {
width: auto;
}
.form td textarea {
width: 100%;
height: 12em;
}
@media screen and (min-width: 768px) {
.form td.name input {
width: 80%;
}
.form td.mail input {
width: 50%;
}
.form td.tel input {
width: 50%;
}
.form td.addr input {
width: 86%;
}
}
.form td.addr {
white-space: nowrap;
}
.form td.addr p+p {
margin-top: .7em;
}
.form td.addr label {
margin-right: .5em;
width: 5.5em;
display: inline-block;
}
.form td.addr .zip label {
width: auto;
}
.form td.addr .zip input {
width: 6.5em;
margin-right: .5em;
}
@media screen and (max-width: 767px) {
.form td.addr label {
display: block;
margin-bottom: .3em;
}
.form td.addr .zip label {
display: inline;
margin-bottom: 0;
}
}
.form td.date p {
margin-bottom: .6em;
}
.form td.date p+p {
white-space: nowrap;
}
.form td.date label {
margin-right: .8em;
}
.form td.date input {
width: 11em;
margin-right: 1em;
}
@media screen and (max-width: 767px) {
.form td.date input {
width: 6.5em;
}
}
.form td.check label {
display: inline-block;
margin-right: 1em;
padding: .3em 0;
}
.form td.check input {
margin-right: .5em;
vertical-align: middle;
}
.form td ul {
margin-top: 1em;
}
.form td li {
font-size: 1.4rem;
color: #888888;
margin-left: 1.25em;
text-indent: -1.25em;
}
.form .btn {
text-align: center;
}
.form .btn span {
display: inline-block;
width: 13.3em;
background: #189e03;
border-radius: .2em;
font-weight: bold;
font-size: 3rem;
position: relative;
box-shadow: 2px 2px 1px 0 rgba(78, 78, 78, 0.1);
}
.form .btn span:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.25em;
right: 1em;
}
.form .btn input {
background: transparent;
width: 100%;
padding: .6em 0;
color: #fff;
}
@media screen and (max-width: 767px) {
.form .btn span {
font-size: 2.6rem;
width: 100%;
}
}
.form_msg {
text-align: center;
padding: 5em 0;
}
@media all and (max-width: 767px) {
.form_msg {
text-align: left;
}
.form_lead {
padding: 2em 0 1em;
white-space: normal;
}
.form_lead .box {
border-radius: .3em;
width: 70%;
padding: .6em 1em 1em;
}
.form_lead img {
right: -2em;
width: 9em;
margin-right: 0;
}
.form_lead .txt1 {
font-size: 2.2rem;
margin-bottom: 1.4em;
}
.form_lead .txt2 {
font-size: 1.6rem;
padding: .4em 1em .6em;
margin-top: .5em;
text-align: left;
}
.form_lead .tel {
font-size: 2rem;
}
.form_lead .tel em {
font-size: 3rem;
}
}
@media screen and (min-width: 768px) {
.guide_body .c_lead img {
width: 12.9em;
}
}
@media screen and (min-width: 768px) {
.serv_body .c_lead {
padding-bottom: 3em;
margin-bottom: 1.3em;
}
.serv_body .c_lead img {
width: 15.1em;
}
.serv_body .c_lead .box {
width: 39em;
}
.serv_body .c_lead p {
font-size: 3.6rem;
}
}
.serv_body .ttl {
text-align: center;
font-weight: bold;
color: #07307b;
font-size: 3rem;
margin-bottom: 1em;
}
@media screen and (max-width: 767px) {
.serv_body .ttl {
font-size: 2.6rem;
}
}
.serv_list {
margin-left: -1.8%;
}
.serv_list>* {
margin-left: 1.8%;
width: 23.2%;
float: left;
}
@media screen and (max-width: 767px) {
.serv_list {
margin-left: -3.5%;
}
.serv_list>* {
margin-left: 3.5%;
width: 46.5%;
}
}
.serv_list li:nth-child(4n + 1) {
clear: both;
}
.serv_list a {
display: block;
}
.serv_list .box {
padding: .5em 1em 1em;
text-align: center;
}
.serv_list p {
font-size: 1.4rem;
font-weight: bold;
}
.serv_list p em {
font-size: 4.7rem;
color: #f0003c;
margin: 0 .1em;
vertical-align: -3%;
}
.serv_list .web {
background: #3667c1;
border-radius: .3em;
font-size: 1.3rem;
color: #fff;
padding: .2em 0;
}
.serv_list .web em {
color: #f7fa07;
}
.serv_list .web i {
font-size: 2.2rem;
line-height: 1;
vertical-align: -6%;
}
.serv_list .btn {
border: solid 1px #07307b;
border-radius: 2em;
font-size: 1.6rem;
color: #07307b;
padding: .3em 0 .5em;
margin-top: .6em;
position: relative;
}
.serv_list .btn:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow02.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.3125em;
right: 1em;
}
@media screen and (max-width: 767px) {
.serv_list .box {
padding: 0 .7em .8em;
}
.serv_list p {
margin: -.5em -1em 0;
}
.serv_list p em {
font-size: 4.2rem;
margin: 0 .05em;
vertical-align: -7%;
}
.serv_list .web {
font-size: 1rem;
}
.serv_list .web i {
font-size: 1.68rem;
}
.serv_list .btn {
padding: .1em 0 .2em;
}
}
.serv_list li {
background: #fff;
border-radius: .3em;
box-shadow: 2px 2px 1px 0 rgba(78, 78, 78, 0.1);
overflow: hidden;
margin-bottom: 2%;
}
.serv_list li img {
display: block;
width: 100%;
}
.serv_list dt {
text-align: center;
font-weight: bold;
color: #fff;
font-size: 2.4rem;
white-space: nowrap;
padding: .7em 0;
}
@media screen and (max-width: 767px) {
.serv_list dt {
padding: .4em 0;
height: 2.4em;
}
.serv_list dt.two {
line-height: 1;
}
.serv_list dt.two i {
display: block;
line-height: 1;
}
}
.serv_list dt small {
font-size: 58%;
margin-left: .3em;
}
.serv_list.nav {
margin-left: 0;
}
.serv_list.nav>li {
margin-left: 0;
}
@media screen and (min-width: 768px) {
.serv_list.nav li {
float: left;
width: 49%;
}
.serv_list.nav li+li {
float: right;
}
}
.serv_list.nav img {
float: right;
width: 52%;
}
.serv_list.nav dl {
float: left;
width: 48%;
}
.serv_list.nav dd {
font-size: 1.6rem;
padding: .6em 1em;
}
@media screen and (max-width: 767px) {
.serv_list.nav>li {
width: 100%;
}
.serv_list.nav img {
width: 48%;
}
.serv_list.nav dl {
width: 52%;
}
}
.cl_a {
background: #558ad1;
}
.cl_b {
background: #f26482;
}
.cl_c {
background: #55a7d1;
}
.cl_d {
background: #f6a030;
}
.cl_e {
background: #e575ac;
}
.cl_f {
background: #4bb348;
}
.cl_g {
background: #ded20f;
}
.cl_h {
background: #7e64c9;
}
.cl_i {
background: #ff6d1e;
}
.cl_j {
background: #135681;
}
.cl_k {
background: #47bdb9;
}
.serv_web1 {
background: #3667c1;
box-shadow: 0 5px 3px 0 rgba(78, 78, 78, 0.1);
border-radius: .5em;
text-align: center;
margin-bottom: 1em;
}
.serv_web1 a {
display: block;
padding: .2em 0 .2em;
font-size: 3rem;
color: #fff;
font-weight: bold;
}
.serv_web1 small {
font-size: 1.6rem;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat right center;
background-size: .4375em;
padding-right: 1em;
font-weight: 500;
}
.serv_web1 em {
font-size: 2rem;
color: #f7fa07;
margin-right: 1em;
margin-left: .3em;
}
.serv_web1 i {
font-size: 4.6rem;
line-height: 1;
vertical-align: -5%;
}
.serv_web1 img {
width: 1.833em;
margin-right: .5em;
vertical-align: -5%;
}
@media screen and (max-width: 767px) {
.serv_web1 {
margin-bottom: 1em;
box-shadow: 0 5px 3px 0 rgba(78, 78, 78, 0.1);
}
.serv_web1 a {
position: relative;
padding-right: .5em;
}
.serv_web1 a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.4em;
right: 0.5em;
}
.serv_web1 span {
display: inline-block;
text-align: left;
font-size: 1.92rem;
}
.serv_web1 span em {
display: block;
font-size: 2.46rem;
}
.serv_web1 em {
margin: 0;
}
.serv_web1 em.b {
margin-left: .2em;
display: inline-block;
vertical-align: 20%;
font-size: 1.92rem;
}
.serv_web1 i {
font-size: 5.52rem;
}
}
.serv_note {
margin-top: .5em;
}
.serv_note p {
font-size: 1.4rem;
text-indent: -1em;
margin-left: 1em;
}
@media screen and (max-width: 767px) {
.serv_note p {
margin-bottom: .5em;
}
}
.works_body {
padding-top: 3em;
}
@media screen and (max-width: 767px) {
.works_body {
padding-top: 2em;
}
}
.work_list {
margin-left: -2%;
}
.work_list>* {
margin-left: 2%;
width: 23%;
float: left;
}
@media screen and (max-width: 767px) {
.work_list {
margin-left: -2%;
}
.work_list>* {
margin-left: 2%;
width: 48%;
}
}
.work_list li {
margin-bottom: 2em;
}
.work_list li:nth-child(4n + 1) {
clear: both;
}
@media screen and (max-width: 767px) {
.work_list {
margin-bottom: -1.5em;
}
.work_list li {
margin-bottom: 1.5em;
}
.work_list li:nth-child(2n + 1) {
clear: both;
}
}
.work_list p {
font-size: 1.6rem;
font-weight: bold;
margin-top: .5em;
}
.work_list p span {
display: block;
font-size: 1.4rem;
font-weight: normal;
margin-bottom: .5em;
}
.work_list p i {
color: #0099cc;
margin-left: 1em;
}
.work_cate {
margin-bottom: 2em;
}
.work_cate>* {
display: inline-block;
vertical-align: middle;
font-size: 1.6rem;
}
.work_cate dt {
color: #07307b;
font-weight: bold;
margin-right: .5em;
}
.work_cate select {
padding: .4em .5em;
border-radius: .2em;
border: solid 1px #d9d9d9;
min-width: 16em;
}
.work_body {
margin-top: 3.5em;
}
.work_body th {
width: 25%;
}
.work_body td img {
width: 48.5%;
margin-bottom: 3%;
}
.work_body td img:nth-child(odd) {
clear: both;
float: left;
}
.work_body td img:nth-child(even) {
float: right;
}
.work_body .blog_btn {
margin-top: 3em;
}
.work_body .c_banner2 {
margin-top: 3em;
}
.work_ttl {
font-size: 2.6rem;
font-weight: bold;
margin-bottom: 1.5em;
}
.work_sub {
color: #07307b;
margin-bottom: .8em;
font-size: 1.6rem;
}
.work_sub i {
color: #0099cc;
margin-left: 1em;
}
.work_img {
margin-bottom: 2em;
}
.work_img img {
width: 100%;
}
.blog_side dd.b li {
margin-top: 1.5em;
}
.blog_side dd.b a {
display: block;
}
.blog_side dd.b img {
float: left;
width: 33.3%;
}
.blog_side dd.b p {
float: right;
font-size: 1.4rem;
line-height: 1.3;
width: 63%;
}
.blog_side dd.b p i {
color: #0099cc;
}
.blog_side dd.b p span {
display: block;
font-size: 1.2rem;
margin-bottom: .21em;
}
@media screen and (min-width: 768px) {
.corp_body .c_lead img {
width: 12.75em;
}
}
.com_nav {
background: #e6efff;
padding: 1.2em 0;
text-align: center;
}
.com_nav ul {
margin-left: -2%;
}
.com_nav ul>* {
margin-left: 2%;
width: 23%;
float: left;
}
@media screen and (max-width: 767px) {
.com_nav ul {
margin-left: -3%;
}
.com_nav ul>* {
margin-left: 3%;
width: 47%;
}
}
.com_nav li {
background: #fff;
border-radius: 2em;
box-shadow: 2px 2px 1px 0 rgba(78, 78, 78, 0.1);
color: #07307b;
}
.com_nav a {
display: block;
font-size: 1.8rem;
position: relative;
padding: .8em 0;
}
.com_nav a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow07.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.65em;
right: 1em;
}
@media screen and (max-width: 767px) {
.com_nav ul {
margin-bottom: -3%;
}
.com_nav li {
margin-bottom: 3%;
}
.com_nav a {
font-size: 1.6rem;
}
}
.com_body .c_txt {
margin-bottom: 2.5em;
}
@media screen and (max-width: 767px) {
.com_body .c_txt {
margin-bottom: 1.5em;
}
}
.com_body .map {
position: relative;
height: 0;
padding-top: 14.5em;
overflow: hidden;
font-size: 2rem;
margin-top: 1em;
}
.com_body .map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.com_body .map_link {
color: #0099cc;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow02.svg) no-repeat left center;
background-size: .35em;
padding-left: .9em;
margin-left: 1.5em;
}
.com_lead p {
font-size: 1.6rem;
line-height: 1.875;
}
.com_lead p+p {
margin-top: 2em;
}
.com_lead p.sign {
font-weight: bold;
}
.com_lead p.sign em {
font-size: 2.4rem;
margin-left: .5em;
}
@media screen and (min-width: 768px) {
.com_lead .box {
float: left;
width: 25.5em;
}
.com_lead img {
float: right;
width: 25.5em;
}
}
@media screen and (max-width: 767px) {
.com_lead img {
width: 100%;
margin-top: 1.5em;
}
}
.com_manage .txt1 {
text-align: center;
font-weight: bold;
color: #07307b;
font-size: 3rem;
margin-bottom: 1em;
line-height: 1.3;
}
.com_manage .txt2 {
text-align: center;
line-height: 1.6;
}
.com_manage ul {
text-align: center;
margin-top: 2em;
}
.com_manage li {
display: inline-block;
vertical-align: top;
width: 10em;
margin: 0 2.5em;
}
.com_manage li p {
color: #07307b;
font-weight: bold;
margin-top: .3em;
}
@media screen and (min-width: 768px) {
.com_manage li p {
height: 3em;
}
.com_manage li p i {
display: block;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
}
@media screen and (max-width: 767px) {
.com_manage .txt1 {
font-size: 2.6rem;
}
.com_manage .txt2 {
font-size: 1.8rem;
}
.com_manage li+li {
margin-top: 1em;
}
.com_manage li p {
height: auto;
}
}
.rec_body section {
margin-bottom: 5em;
}
@media screen and (max-width: 767px) {
.rec_body section {
margin-bottom: 3em;
}
}
.rec_body table {
margin-bottom: 3em;
}
.rec_body .c_txt {
margin: -1.5em 0;
}
.rec_contact {
position: relative;
}
.rec_contact img {
display: block;
}
.rec_contact dl {
color: #fff;
text-align: center;
width: 43.25em;
position: absolute;
top: 50%;
transform: translate(0, -50%);
padding-top: 1.3em;
}
.rec_contact dt {
font-size: 3rem;
font-weight: bold;
margin-bottom: .8em;
}
.rec_contact dd small {
font-size: 1.8rem;
}
.rec_contact dd em {
font-size: 5.6rem;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_tel.png) no-repeat left center;
background-size: .57em;
padding-left: .8em;
font-weight: 700;
line-height: 1;
}
@media screen and (max-width: 767px) {
.rec_contact dl {
width: 67%;
font-size: 2.4vw;
}
.rec_contact dt {
font-size: 2.5vw;
}
.rec_contact dd small {
font-size: 2vw;
}
.rec_contact dd em {
font-size: 5.5vw;
}
}
.train_col {
margin-bottom: 5em;
}
.train_col.a {
margin-top: -2em;
}
@media screen and (min-width: 768px) {
.train_col.b img {
float: right;
width: 47.2%;
}
.train_col .right {
float: right;
width: 47.2%;
}
.train_col .left {
float: left;
width: 47.2%;
}
}
@media screen and (max-width: 767px) {
.train_col {
margin-bottom: 3em;
}
.train_col img {
margin-top: 1.5em;
width: 100%;
}
}
.train_col.last {
margin-bottom: 0;
}
.train_col p,
.train_col dd {
font-size: 1.6rem;
line-height: 1.875;
}
.train_col dt {
font-weight: bold;
margin-bottom: 1.5em;
}
.train_col dt.b {
margin: 1em 0;
}
.perm_txt {
font-size: 1.6rem;
line-height: 1.875;
margin-bottom: 2em;
}
.perm_tab {
text-align: center;
}
.perm_tab li {
float: left;
width: 12.5%;
}
.perm_tab li+li {
border-left: solid 1px #fff;
}
.perm_tab a {
display: block;
padding: 1.5em 0;
background: #def3fa;
font-size: 1.6rem;
color: #07307b;
font-weight: bold;
}
.perm_tab a.active {
background: #07307b;
color: #fff;
}
@media screen and (max-width: 767px) {
.perm_tab li {
width: 25%;
}
.perm_tab a {
padding: 1em 0;
}
}
.perm_box {
border: solid 1px #d9d9d9;
padding: 1.5em 1.5em 0;
}
.perm_box table {
margin-bottom: 1.5em;
}
.perm_box>div {
display: none;
}
.perm_box>div:nth-child(1) {
display: block;
}
.privacy_body dl>* {
font-size: 1.6rem;
line-height: 1.875;
}
.privacy_body dl>* * {
line-height: inherit;
}
.privacy_body dt {
font-weight: bold;
}
.privacy_body dd {
margin-bottom: 2.5em;
}
.privacy_body dd.last {
margin-bottom: 0;
}
.privacy_body dd li {
margin-top: .5em;
}
.privacy_body dd p+p {
margin-top: .8em;
}
.privacy_body .txt {
font-size: 1.6rem;
line-height: 1.875;
margin-bottom: 2.5em;
}
.sitemap table {
border: solid 1px #d9d9d9;
border-bottom: none;
}
.sitemap tr>* {
border-bottom: solid 1px #d9d9d9;
font-size: 1.6rem;
padding: .4em 1.5em;
vertical-align: middle;
}
@media screen and (max-width: 767px) {
.sitemap tr>* {
padding: .4em 1.2em;
font-size: 1.5rem;
}
}
.sitemap th {
text-align: left;
border-right: solid 1px #d9d9d9;
font-weight: bold;
width: 28%;
white-space: nowrap;
}
.contact_tel {
margin-bottom: 4.5em;
}
@media screen and (max-width: 767px) {
.contact_tel {
margin-bottom: 2.5em;
}
}
.cool_body table {
border-top: solid 1px #d9d9d9;
}
.cool_body th {
background: #f7fafb;
font-weight: bold;
}
.cool_body tr>* {
border-bottom: solid 1px #d9d9d9;
padding: 1.5em 2em;
font-size: 1.6rem;
line-height: 1.625;
}
.cool_body th {
text-align: left;
vertical-align: middle;
position: relative;
}
@media screen and (max-width: 767px) {
.cool_body tr>* {
padding: 1em 1.2em;
}
}
.app_head {
position: relative;
margin-bottom: 3em;
}
.app_head img {
display: block;
}
.app_head a {
display: block;
position: absolute;
color: transparent;
top: 74%;
height: 15%;
border-radius: .3em;
}
.app_head a.a {
left: 24%;
width: 18.5%;
}
.app_head a.b {
left: 43.4%;
width: 16.8%;
}
.app_head a:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.2);
}
.app_lead {
position: relative;
color: #fff;
}
.app_lead .box {
position: relative;
max-width: 100%;
background: #7192AC;
border-radius: .55em;
text-align: center;
background: #FFA200;
width: 42.5em;
padding: 1.5em 0;
}
.app_lead .box:before {
content: '';
position: absolute;
border-style: solid;
border-width: .7em 2em .5em 0;
border-color: transparent #FFA200 transparent transparent;
top: 30%;
left: -1em;
z-index: 1;
}
.app_lead .inner {
display: inline-block;
text-align: left;
}
.app_lead p {
font-weight: 900;
font-size: 2.5rem;
line-height: 1.3;
margin-bottom: .5em;
font-style: italic;
}
.app_lead p em {
font-size: 133%;
display: block;
}
.app_lead li {
font-weight: bold;
line-height: 1.3;
margin-left: .5em;
}
.app_lead li+li {
margin-top: .3em;
}
@media screen and (min-width: 768px) {
.app_lead {
padding: 3em 0 3em;
padding-right: .5em;
}
.app_lead .box {
margin-left: auto;
}
.app_lead img {
position: absolute;
width: 12.7em;
bottom: 0;
left: 0;
}
}
@media screen and (max-width: 767px) {
.app_lead {
margin-top: 2em;
}
.app_lead li {
text-indent: -1em;
margin-left: 1.5em;
}
.app_lead .box {
padding: 1.2em;
}
.app_lead .box:before {
border-width: 1.5em 1.5em 0 0;
border-color: #FFA200 transparent transparent transparent;
left: 50%;
bottom: -1em;
top: auto;
}
.app_lead img {
position: relative;
width: 10em;
display: block;
}
}
.app_menu {
margin-bottom: 4em;
margin-left: -1.9%;
}
.app_menu>* {
margin-left: 1.9%;
width: 23.1%;
float: left;
}
@media screen and (max-width: 767px) {
.app_menu {
margin-left: -4%;
}
.app_menu>* {
margin-left: 4%;
width: 46%;
}
}
.app_search {
width: 32em;
max-width: 100%;
margin: 1.5em auto 2em;
font-weight: 500;
}
.app_search dt {
background: #305ebe;
color: #fff;
position: absolute;
font-size: 1.6rem;
height: 3em;
padding: .7em 1em;
}
.app_search dt:before {
content: '';
position: absolute;
border-style: solid;
border-width: 1.5em 0 1.5em .7em;
border-color: transparent transparent transparent #305ebe;
right: -.69em;
top: 0;
}
.app_search dd {
margin-left: 10em;
border: solid 2px #d5d5d5;
border-radius: .1em;
position: relative;
height: 2.4em;
padding-top: .3em;
padding-left: 1.5em;
}
.app_search dd img {
right: .5em;
width: 1.45em;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
@media screen and (max-width: 767px) {
.app_search dt {
font-size: 1.2rem;
padding: .7em .7em;
}
.app_search dd {
margin-left: 9.5em;
font-size: 1.5rem;
height: 2.4em;
padding-left: .5em;
padding-top: .4em;
}
}
.app_sp {
width: 20.65em;
margin: 0 auto 3em;
position: relative;
}
.app_sp a {
display: block;
position: absolute;
color: transparent;
left: 0;
width: 49%;
border-radius: .3em;
}
.app_sp a.a {
top: 13%;
height: 17.2%;
}
.app_sp a.b {
top: 36%;
height: 20%;
}
.app_sp a:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 767px) {
.app_sp {
margin: 0 auto 2em;
}
.app_sp+.c_note li {
margin-left: 1em;
text-indent: -1em;
}
}
.reason_list {
margin-left: -2.5%;
}
.reason_list>* {
margin-left: 2.5%;
width: 22.5%;
float: left;
}
@media screen and (max-width: 767px) {
.reason_list {
margin-left: -5%;
}
.reason_list>* {
margin-left: 5%;
width: 45%;
}
}
.reason_list li {
margin-bottom: 1.5em;
}
@media screen and (max-width: 767px) {
.reason_list li:nth-child(odd) {
clear: both;
}
}
.reason_list .img {
background: #fff;
border-radius: 100%;
width: 11em;
height: 11em;
margin: 0 auto;
position: relative;
}
@media screen and (max-width: 767px) {
.reason_list .img {
width: 9.5em;
height: 9.5em;
}
}
.reason_list i {
position: absolute;
left: -.4em;
background: #37c0de;
font-size: 4.2rem;
color: #fff;
font-style: italic;
display: block;
width: 1.7em;
height: 1.7em;
border-radius: 100%;
text-align: center;
line-height: 1.7;
}
@media screen and (max-width: 767px) {
.reason_list i {
font-size: 3.6rem;
}
}
.reason_list dt {
text-align: center;
font-weight: bold;
color: #07307b;
margin: 1em 0 .8em;
height: 3em;
}
.reason_list dt.b {
padding-top: .7em;
}
.reason_list dt em {
color: #f0003c;
}
@media screen and (max-width: 767px) {
.reason_list dt {
font-size: 1.6rem;
}
}
.reason_list dd {
font-size: 1.6rem;
}
.reason_list+.btn {
text-align: center;
margin-bottom: 2.5em;
}
.reason_list a {
display: block;
}
@media screen and (min-width: 768px) {
.reason_body .c_lead img {
width: 14.35em;
}
.reason_body .c_lead .txt {
padding-right: 2em;
}
}
@media screen and (max-width: 767px) {
.reason_body .c_lead {
margin-bottom: 0;
}
.reason_body .c_lead img {
width: 8em;
}
}
.reason_nav {
padding: 3em 0 1em;
background: #e5f9ff;
margin-bottom: 3.5em;
}
.reason_nav .reason_list dd {
display: none;
}
@media screen and (max-width: 767px) {
.reason_nav {
margin-bottom: 2.5em;
padding: 2em 0 0;
}
}
.reason_detail li {
margin-top: 3em;
}
@media screen and (min-width: 768px) {
.reason_detail img {
float: right;
width: 16.5em;
}
.reason_detail p {
float: left;
width: 43.75em;
}
}
.reason_detail dt {
font-size: 2.6rem;
color: #07307b;
font-weight: bold;
position: relative;
padding-left: 3.5em;
margin-bottom: 1em;
}
.reason_detail dt em {
font-size: 153.8%;
color: #f0003c;
}
.reason_detail p {
font-size: 1.6rem;
line-height: 1.875;
}
.reason_detail i {
position: absolute;
left: 0;
top: -.1em;
background: #37c0de;
font-size: 4.2rem;
color: #fff;
font-style: italic;
display: inline-block;
width: 1.7em;
height: 1.7em;
border-radius: 100%;
text-align: center;
line-height: 1.7;
margin-right: .5em;
}
@media screen and (max-width: 767px) {
.reason_detail i {
font-size: 3.6rem;
}
}
@media screen and (max-width: 767px) {
.reason_detail dt {
font-size: 2.4rem;
padding-left: 3em;
}
.reason_detail li {
margin-top: 2em;
}
.reason_detail img {
display: block;
margin: 1em auto;
}
.reason_detail i {
top: 0;
}
}
.price_body .c_lead {
margin: 3em 0 4em;
}
.price_body .c_lead .box em {
color: #f0003c;
}
@media screen and (min-width: 768px) {
.price_body .c_lead img {
width: 16.6em;
bottom: auto;
top: -1em;
}
.price_body .c_lead .txt {
padding-left: 3em;
}
}
@media screen and (max-width: 767px) {
.price_body .c_lead img {
width: 9em;
}
}
@media screen and (min-width: 768px) {
.price_body .serv_web1 {
box-shadow: 2px 2px 1px 0 rgba(78, 78, 78, 0.1);
}
.price_body .serv_web1 a {
font-size: 4rem;
}
.price_body .serv_web1 em {
font-size: 2.6rem;
}
.price_body .serv_web1 i {
font-size: 6rem;
}
}
.price_body .pay_list {
margin: 2em auto -2.5em;
}
@media screen and (min-width: 768px) {
.price_list {
margin-left: -4%;
}
.price_list>* {
margin-left: 4%;
width: 29.33333%;
float: left;
}
}
.price_list li {
background: #07307b;
color: #fff;
border-radius: .5em;
padding: 1.5em;
margin-bottom: 2em;
}
.price_list li:nth-child(1) dd {
text-align: center;
font-weight: bold;
}
.price_list li:nth-child(3) {
background: #37c0de;
}
.price_list li+li {
position: relative;
}
.price_list li+li:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_plus.svg) no-repeat;
background-size: contain;
width: 1.2em;
height: 1.2em;
left: -1.75em;
}
@media screen and (min-width: 768px) {
.price_list li+li:before {
top: 50%;
transform: translate(0, -50%);
}
}
.price_list dt {
text-align: center;
font-size: 3rem;
font-weight: bold;
margin-bottom: .5em;
}
.price_list dd {
font-size: 1.4rem;
line-height: 1.7;
}
.price_list dd em {
font-size: 5rem;
line-height: 1;
}
.price_list dd i {
font-size: 3rem;
line-height: 1;
}
@media screen and (max-width: 767px) {
.price_list li+li:before {
left: 50%;
transform: translate(-90%, 0);
top: -1.6em;
}
}
@media screen and (min-width: 768px) {
.price_list li {
height: 10em;
}
.price_list dl {
position: relative;
top: 50%;
transform: translate(0, -50%);
}
}
.price_nav {
margin-bottom: 1.5em;
margin-left: -2%;
}
.price_nav>* {
margin-left: 2%;
width: 23%;
float: left;
}
@media screen and (max-width: 767px) {
.price_nav {
margin-left: -4%;
}
.price_nav>* {
margin-left: 4%;
width: 46%;
}
}
.price_nav li {
margin-bottom: 2%;
}
.price_nav a {
display: block;
position: relative;
border-radius: .3em;
overflow: hidden;
}
.price_nav p {
position: absolute;
top: 50%;
transform: translate(0, -50%);
color: #fff;
font-weight: bold;
width: 94%;
left: 0;
padding-left: 52%;
line-height: 1.2;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow08.svg) no-repeat right center;
background-size: .65em;
}
.price_nav img {
display: block;
width: 47.5%;
}
@media screen and (max-width: 767px) {
.price_nav p {
font-size: 1.8rem;
}
}
.price_sec {
margin-bottom: 5em;
}
.price_sec .ttl {
color: #fff;
font-size: 4.6rem;
font-weight: bold;
padding: .5em .5em .3em;
border-bottom: solid .12em #165cb9;
margin-bottom: .8em;
line-height: 1;
}
.price_sec .ttl small {
font-size: 65.22%;
}
.price_sec .ttl.cl_a {
border-bottom-color: #165cb9;
}
.price_sec .ttl.cl_b {
border-bottom-color: #ce4e69;
}
.price_sec .ttl.cl_c {
border-bottom-color: #3481a9;
}
.price_sec .ttl.cl_d {
border-bottom-color: #d38622;
}
.price_sec .ttl.cl_e {
border-bottom-color: #c85d91;
}
.price_sec .ttl.cl_f {
border-bottom-color: #3d903a;
}
.price_sec .ttl.cl_g {
border-bottom-color: #ada410;
}
.price_sec .ttl.cl_h {
border-bottom-color: #5f48a2;
}
.price_sec .price {
font-weight: bold;
margin-bottom: 1em;
}
.price_sec .price i {
display: inline-block;
font-size: 2.2rem;
border: solid 1px #000;
width: 4em;
height: 4em;
text-align: center;
line-height: 1.2;
vertical-align: 50%;
margin-right: .8em;
padding-top: .7em;
}
.price_sec .price em {
font-size: 11rem;
color: #f0003c;
line-height: 1;
vertical-align: -10%;
}
.price_sec .web {
background: #3667c1;
border-radius: .3em;
color: #f7fa07;
font-weight: bold;
text-align: center;
padding: .25em 0;
margin-bottom: 1em;
}
.price_sec .web em {
font-size: 200%;
vertical-align: -10%;
}
@media screen and (min-width: 768px) {
.price_sec .left {
margin-top: -1em;
width: 47.2%;
float: left;
}
.price_sec .right {
width: 47.2%;
float: right;
}
}
.price_sec p {
font-size: 1.6rem;
line-height: 1.875;
}
.price_sec img {
display: block;
}
.price_sec .btn a {
font-size: 2.4rem;
text-align: center;
display: block;
background: #07307b;
color: #fff;
border-radius: 2em;
padding: 1em 0;
position: relative;
margin-top: 1em;
}
.price_sec .btn a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow10.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.55em;
right: 1em;
}
.price_sec table {
margin-top: 2em;
border-top: solid 1px #d9d9d9;
}
.price_sec thead th {
font-weight: bold;
background: #f7fafb;
text-align: center;
}
.price_sec tr>* {
font-size: 1.6rem;
padding: 1.1em 2em;
border-bottom: solid 1px #d9d9d9;
}
.price_sec tr>*+* {
border-left: solid 1px #d9d9d9;
}
.price_sec th {
text-align: left;
}
.price_sec td {
text-align: right;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.price_sec {
margin-bottom: 3.5em;
}
.price_sec .right {
margin-top: 1.5em;
}
.price_sec .ttl {
font-size: 4rem;
}
.price_sec .price {
font-size: 1.8rem;
}
.price_sec .price i {
font-size: 2rem;
}
.price_sec .price em {
font-size: 9rem;
}
.price_sec .web {
font-size: 1.75rem;
}
.price_sec .btn a {
font-size: 2rem;
}
.price_sec tr>* {
padding: .6em .8em;
}
}
.flow_banner {
position: relative;
margin: -4em 0 5em;
}
.flow_banner img {
display: block;
}
.flow_banner a {
position: absolute;
background: #fff;
opacity: 0;
color: transparent;
}
.flow_banner a:hover {
opacity: .3;
}
@media screen and (max-width: 767px) {
.flow_banner {
margin: -3em 0 4em;
}
.flow_banner .tel {
display: block;
left: 18.2%;
display: block;
top: 40%;
width: 48.5%;
height: 34%;
}
}
.flow_banner .mail {
right: 2.8%;
top: 40%;
width: 28%;
height: 48.5%;
border-radius: .3em;
}
.flow_catch {
background: #ff9000;
text-align: center;
font-weight: bold;
padding: 1.5em 0 2em;
margin: -2em 0 5em;
}
.flow_catch p {
color: #fff;
font-size: 3rem;
margin-bottom: .8em;
}
.flow_catch p em {
font-size: 166%;
line-height: 1;
}
.flow_catch li {
background: #fff;
display: inline-block;
color: #ff9000;
border-radius: .3em;
white-space: nowrap;
font-size: 2.6rem;
width: 19%;
padding-bottom: .3em;
margin: 0 .1em;
}
.flow_catch li em {
font-size: 253.8%;
line-height: 1;
}
@media screen and (max-width: 767px) {
.flow_catch {
margin: -1em 0 4em;
}
.flow_catch li {
font-size: 2.3rem;
width: 46%;
margin-bottom: .3em;
}
}
.flow_last .arrow {
display: block;
margin: -2em auto 1.6em;
width: 5.3em;
}
.flow_last .c_lead {
margin-bottom: 0;
}
@media screen and (min-width: 768px) {
.flow_last .c_lead img {
width: 11.15em;
right: 1.5em;
}
}
@media screen and (max-width: 767px) {
.flow_last .c_lead {
margin-bottom: 0;
}
}
.faq_body .price_nav {
margin-bottom: 0;
}
.faq_list {
border-bottom: solid 1px #d9d9d9;
margin-bottom: 5em;
}
.faq_list dt {
border-top: solid 1px #d9d9d9;
background: #f7fafb;
color: #07307b;
padding: 1.4em 3em 1.3em 3.5em;
position: relative;
}
.faq_list dd {
position: relative;
padding: 1.5em 4.5em 3.5em 4.5em;
font-size: 1.6rem;
line-height: 1.6;
}
.faq_list dd i {
color: #ff9000;
}
.faq_list i {
font-size: 3rem;
font-weight: bold;
position: absolute;
left: 1em;
top: .45em;
}
@media screen and (max-width: 767px) {
.faq_list {
margin-bottom: 4em;
}
.faq_list dt {
padding: 1em 1em 1em 3em;
}
.faq_list dd {
padding: 1em 2em 3em 3.7em;
}
.faq_list i {
left: .7em;
}
}
.camp_ttl {
text-align: center;
color: #1955c4;
font-weight: 900;
font-style: italic;
font-size: 4rem;
margin-bottom: .8em;
line-height: 1.3;
}
.camp_web {
background: #3667c1;
color: #fff;
font-weight: bold;
text-align: center;
border-radius: .3em;
margin-bottom: 2em;
white-space: nowrap;
}
.camp_web img {
width: 7.95em;
margin-right: .6em;
}
.camp_web em {
color: #f7fa07;
}
.camp_web span {
font-size: 5rem;
display: inline-block;
line-height: 1;
letter-spacing: .03em;
}
.camp_web span em {
font-size: 78%;
letter-spacing: 0;
}
.camp_web small {
font-size: 4.4rem;
}
.camp_web i {
font-size: 12rem;
}
@media screen and (max-width: 767px) {
.camp_web {
padding: .8em 0;
}
.camp_web img {
width: 5.7em;
}
.camp_web span {
font-size: 3.8rem;
}
.camp_web small {
font-size: 4rem;
}
.camp_web i {
font-size: 10rem;
line-height: 1;
}
.camp_web>em {
display: block;
}
}
.camp_line {
background: #f6f3ee;
}
.camp_line .box {
width: 35.3em;
max-width: 100%;
}
.camp_line .inner {
padding: 3.2em 0;
}
@media screen and (min-width: 768px) {
.camp_line .inner {
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/camp_bg.jpg) no-repeat;
background-size: contain;
height: 44.05em;
}
}
@media screen and (max-width: 767px) {
.camp_line .inner {
padding: 2em 0;
}
}
.camp_line .catch {
color: #00b900;
font-weight: 900;
font-size: 2.6rem;
margin-bottom: .8em;
white-space: nowrap;
}
.camp_line .catch em {
font-size: 138.4%;
background: #fffc00;
}
@media screen and (max-width: 767px) {
.camp_line .catch {
font-size: 1.5rem;
}
}
.camp_line .toku {
margin: 1em 0;
}
.camp_line .toku dt {
color: #00b900;
font-weight: bold;
position: relative;
z-index: 1;
margin-bottom: .2em;
}
.camp_line .toku dt span {
background: #f6f3ee;
padding-right: .8em;
}
.camp_line .toku dt:before {
content: '';
position: absolute;
border-bottom: solid 1px #00b900;
width: 100%;
top: 50%;
z-index: -1;
}
.camp_line .toku .c_note {
margin-top: .8em;
}
.camp_line .btn {
margin-bottom: 1.5em;
}
.camp_line .btn a {
display: block;
background: #00b900;
border-radius: .5em;
font-size: 2.8rem;
font-weight: bold;
color: #fff;
position: relative;
padding: .5em .3em;
box-shadow: 2px 2px 1px 0 rgba(78, 78, 78, 0.1);
}
.camp_line .btn a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow10.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.45em;
right: 1em;
}
.camp_line .btn img {
width: 3.154em;
vertical-align: -80%;
margin-right: .3em;
}
@media screen and (max-width: 767px) {
.camp_line .btn a {
font-size: 2.2rem;
}
.camp_line .btn span {
display: inline-block;
line-height: 1.3;
}
.camp_line .btn img {
vertical-align: -30%;
}
}
.camp_line .c_scroll {
padding: .5em;
background: #fff;
}
.camp_line .c_scroll ::-webkit-scrollbar {
width: .25em;
}
.camp_line .kiyaku {
overflow-y: scroll;
height: 6em;
padding: .8em;
}
.camp_line .kiyaku>dt {
font-size: 1.6rem;
margin-bottom: .8em;
}
.camp_line .kiyaku dd {
font-size: 1.4rem;
}
.camp_line .kiyaku dd dt {
margin: 1em 0 .5em;
}
.camp_banner {
background: #ffef3e;
padding: 3em 0;
}
@media screen and (max-width: 767px) {
.camp_banner {
padding: 5% 0;
}
}
.camp_banner img {
display: block;
}
.camp_banner a {
display: block;
}
.staff_list {
margin-left: -1.8%;
margin-bottom: -1.8em;
}
.staff_list>* {
margin-left: 1.8%;
width: 23.2%;
float: left;
}
@media screen and (max-width: 767px) {
.staff_list {
margin-left: -4%;
}
.staff_list>* {
margin-left: 4%;
width: 46%;
}
}
.staff_list li {
margin-bottom: 1.8em;
}
.staff_list li:nth-child(4n + 1) {
clear: both;
}
@media screen and (max-width: 767px) {
.staff_list li:nth-child(2n + 1) {
clear: both;
}
}
.staff_list img {
width: 100%;
}
.staff_list dl {
margin-top: .5em;
}
.staff_list dt {
text-align: center;
font-weight: bold;
margin-bottom: .5em;
}
.staff_list dt small {
font-size: 1.4rem;
font-weight: normal;
display: block;
}
.staff_list dd {
font-size: 1.6rem;
}
.voice_list {
margin-bottom: -3.5em;
}
.voice_list dt {
font-size: 2.4rem;
font-weight: bold;
color: #07307b;
margin-bottom: 1.2em;
}
.voice_list p {
font-size: 1.6rem;
line-height: 1.875;
}
.voice_list p em {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
.voice_list dd img {
width: 25.3%;
float: left;
}
.voice_list dd p {
float: right;
width: 71%;
}
.voice_list li {
margin-bottom: 3.5em;
}
@media screen and (min-width: 768px) {
.voice_list dl {
float: left;
width: 66%;
}
.voice_list li>img {
float: right;
width: 16.55em;
}
}
@media screen and (max-width: 767px) {
.voice_list {
margin-bottom: -2.5em;
}
.voice_list li {
margin-bottom: 2.5em;
}
.voice_list li>img {
display: block;
margin: 1.5em auto 0;
}
}
.support_lead {
position: relative;
}
.support_lead .box img {
margin-bottom: 1em;
}
@media screen and (max-width: 767px) {
.support_lead .c_lead2 {
margin-right: 7.5em;
margin-bottom: 2em;
}
.support_lead>img {
position: absolute;
right: 0;
top: 9vh;
display: block;
margin-left: auto;
width: 7em;
}
}
@media screen and (min-width: 768px) {
.support_lead .c_lead2 {
margin-bottom: 0;
}
.support_lead .box {
float: left;
width: 40em;
}
.support_lead .box img {
width: 37.3em;
}
.support_lead>img {
float: right;
margin-top: -1em;
width: 13.35em;
}
}
.support_nav {
margin-bottom: 4.5em;
margin-left: -2%;
}
.support_nav>* {
margin-left: 2%;
width: 23%;
float: left;
}
@media screen and (max-width: 767px) {
.support_nav {
margin-left: -3%;
}
.support_nav>* {
margin-left: 3%;
width: 47%;
}
}
.support_nav a {
display: block;
background: #37c1de;
font-size: 2.6rem;
font-weight: bold;
border-radius: .3em;
color: #fff;
height: 5em;
text-align: center;
}
.support_nav a span {
display: block;
position: relative;
top: 50%;
transform: translate(0, -50%);
line-height: 1.2;
}
@media screen and (max-width: 767px) {
.support_nav {
margin-bottom: 3em;
}
.support_nav li {
margin-bottom: 3%;
}
.support_nav a {
font-size: 2rem;
height: 4em;
}
}
.serv2_body .serv_web1 {
margin-bottom: 2em;
}
.serv2_body .low_col {
position: relative;
}
.serv2_body .low_col dt {
font-size: 3rem;
font-weight: bold;
line-height: 1;
position: relative;
top: -.5em;
}
.serv2_body .low_col dt em {
color: #f0003c;
font-size: 233%;
line-height: 1;
vertical-align: -15%;
}
@media screen and (min-width: 768px) {
.serv2_body .low_col {
margin-bottom: 4em;
}
}
@media screen and (max-width: 767px) {
.serv2_body .low_col {
margin-bottom: 2em;
}
.serv2_body .low_col img {
position: absolute;
width: 10em;
top: -.5em;
right: 0;
margin: 0;
}
.serv2_body .low_col dt {
font-size: 2.5rem;
top: 0;
padding: 1.5em 0;
margin-bottom: .6em;
}
}
.serv_pay {
margin-bottom: 5em;
}
.serv_pay .pay_list {
margin-top: 2em;
}
@media screen and (max-width: 767px) {
.serv_pay {
margin-bottom: 3em;
}
}
.serv_flow {
background: #e5f9ff url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/bg_ripple01.jpg) no-repeat top center;
background-size: contain;
margin-bottom: 2.5em;
padding: 2em 0 0;
}
.serv_flow .low_ttl {
position: relative;
}
.serv_flow .low_ttl a {
position: absolute;
right: 0;
}
.serv_flow .reason {
background: #fff;
margin-bottom: 1em;
box-shadow: 2px 2px 1px 0 rgba(78, 78, 78, 0.1);
position: relative;
}
@media screen and (max-width: 767px) {
.serv_flow .reason {
margin-bottom: 4em;
}
}
@media screen and (min-width: 768px) {
.serv_flow {
padding: 4em 0 2em;
}
.serv_flow .nav dt {
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow13.svg) no-repeat left center;
background-size: .4em;
padding-left: .8em;
white-space: nowrap;
}
.serv_flow .reason {
margin-top: -1em;
}
.serv_flow .reason img {
width: 50%;
}
.serv_flow .reason dl {
width: 50%;
}
.serv_flow .reason dt {
background-size: .3em;
font-size: 3rem;
margin-bottom: .3em;
}
}
.serv_area {
margin-bottom: 5em;
}
@media screen and (max-width: 767px) {
.serv_area {
margin-bottom: 3em;
}
}
.serv_faq .faq_list {
border-bottom: none;
margin-bottom: 2em;
}
@media screen and (max-width: 767px) {
.serv_faq .faq_list {
margin-bottom: 1em;
}
}
.serv_voice {
margin-bottom: 4.5em;
}
.serv_voice dl {
max-height: 47.5em;
overflow-y: auto;
padding-right: 1em;
}
.serv_voice dt {
font-size: 2.4rem;
font-weight: bold;
color: #07307b;
margin-bottom: .5em;
}
.serv_voice dt span {
color: #333333;
display: block;
font-size: 1.6rem;
margin-top: 1em;
}
.serv_voice dd {
border-bottom: solid 1px #888888;
padding-bottom: 2em;
margin-bottom: 2.5em;
font-size: 1.6rem;
line-height: 1.875;
}
@media screen and (max-width: 767px) {
.serv_voice {
margin-bottom: 3em;
}
}
.serv_check:last-child {
margin-bottom: 0;
}
.serv_check .ttl {
font-size: 3rem;
font-weight: bold;
color: #07307b;
margin-bottom: .5em;
padding-bottom: .3em;
border-bottom: solid 2px #07307b;
}
.serv_check .box {
max-height: 19.3em;
overflow-y: auto;
margin-bottom: 3em;
}
.serv_check p {
font-size: 1.6rem;
line-height: 1.875;
}
.serv_check p+p {
margin-top: .8em;
}
.serv_check dt {
font-weight: bold;
font-size: 1.8rem;
margin: 2.5em 0 .5em;
}
.biz_body {
padding-top: 2em;
}
.biz_main {
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/mv_bg02.jpg) no-repeat center center;
background-size: cover;
}
.biz_main img {
display: block;
margin: 0 auto;
}
.biz_merit {
margin-left: -1.8%;
margin-bottom: 4em;
}
.biz_merit>* {
margin-left: 1.8%;
width: 23.2%;
float: left;
}
@media screen and (max-width: 767px) {
.biz_merit {
margin-left: -4%;
}
.biz_merit>* {
margin-left: 4%;
width: 46%;
}
}
@media screen and (max-width: 767px) {
.biz_merit li:nth-child(n + 3) {
margin-top: 1.5em;
}
.biz_merit li:nth-child(2n + 1) {
clear: both;
}
}
.biz_merit dl {
margin-top: .8em;
}
.biz_merit dt {
font-weight: bold;
color: #07307b;
margin-bottom: .6em;
text-align: center;
}
.biz_merit dd {
font-size: 1.6rem;
line-height: 1.875;
}
.biz_nav {
margin-left: -0.5%;
margin-bottom: 2em;
text-align: center;
}
.biz_nav>* {
margin-left: 0.5%;
width: 24.5%;
float: left;
}
@media screen and (max-width: 767px) {
.biz_nav {
margin-left: -1%;
}
.biz_nav>* {
margin-left: 1%;
width: 49%;
}
}
.biz_nav a {
display: block;
background: #135681;
color: #fff;
position: relative;
padding: 1.5em 0;
}
.biz_nav a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow08.png) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.6em;
right: 1em;
}
@media screen and (max-width: 767px) {
.biz_nav li:nth-child(n + 3) {
margin-top: 1%;
}
.biz_nav a {
font-size: 1.8rem;
}
}
.biz_case {
background: #e5f9ff;
padding: 2.3em 0 3em;
}
.biz_case .ttl {
text-align: center;
font-weight: bold;
color: #07307b;
font-size: 2.6rem;
margin-bottom: 1.2em;
}
.biz_case .tab {
margin-left: -0.5%;
text-align: center;
}
.biz_case .tab>* {
margin-left: 0.5%;
width: 24.5%;
float: left;
}
@media screen and (max-width: 767px) {
.biz_case .tab {
margin-left: -1%;
}
.biz_case .tab>* {
margin-left: 1%;
width: 49%;
}
}
.biz_case .tab a {
display: block;
background: #fff;
padding: 1em 0;
border: solid 1px #135681;
font-weight: bold;
color: #135681;
}
.biz_case .tab a.active {
background: #135681;
color: #fff;
}
@media screen and (max-width: 767px) {
.biz_case .tab li:nth-child(n + 3) {
margin-top: 1%;
}
.biz_case .tab a {
font-size: 1.8rem;
}
}
.biz_case .box {
border-top: solid .15em #135681;
background: #fff;
}
.biz_case .box li {
padding: 2em;
}
.biz_case .box li+li {
display: none;
}
@media screen and (max-width: 767px) {
.biz_case .box li {
padding: 1.5em;
}
}
@media screen and (min-width: 768px) {
.biz_case .box img {
float: left;
width: 16.5em;
margin-right: 2em;
}
}
@media screen and (max-width: 767px) {
.biz_case .box img {
display: block;
margin: 0 auto 1em;
}
}
.biz_case .box p {
font-size: 1.6rem;
line-height: 1.875;
}
.biz_banner {
margin-top: 1em;
}
.biz_banner img {
display: block;
margin: 0 auto;
}
.biz_banner a {
display: block;
}
.gene_ttl {
text-align: center;
font-size: 3rem;
font-weight: bold;
position: relative;
padding-bottom: .7em;
margin-bottom: 1.8em;
}
.gene_ttl:before {
content: '';
width: 8em;
border-bottom: solid 2px #000;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
bottom: 0;
}
@media screen and (max-width: 767px) {
.gene_ttl {
font-size: 2.6rem;
}
}
.gene_about {
text-align: center;
padding: 3em 0;
}
.gene_about img {
width: 48em;
}
@media screen and (max-width: 767px) {
.gene_about {
padding: 2em 0;
}
}
.gene_image p {
text-align: center;
font-size: 1.6rem;
}
.gene_image dl {
margin: 2.5em 0 -3.5em;
}
@media screen and (max-width: 767px) {
.gene_image dl {
margin: 1.5em 0 -2.5em;
}
}
.gene_image dt {
text-align: center;
font-size: 2.8rem;
background-image: -moz-linear-gradient(90deg, #0050a3 0%, #003a77 100%);
background-image: -webkit-linear-gradient(90deg, #0050a3 0%, #003a77 100%);
background-image: -ms-linear-gradient(90deg, #0050a3 0%, #003a77 100%);
color: #fff;
padding: .4em 0;
border-radius: .3em;
margin-bottom: 1.7em;
}
.gene_image dt small {
font-size: 85.7%;
}
@media screen and (max-width: 767px) {
.gene_image dt {
font-size: 2.6rem;
margin-bottom: 1.2em;
}
.gene_image dt small {
display: block;
}
}
.gene_image dd {
margin-bottom: 3.5em;
}
@media screen and (max-width: 767px) {
.gene_image dd {
margin-bottom: 2.5em;
}
}
.gene_image dd table {
border-top: solid 1px #d3d6d7;
}
.gene_image dd tr>* {
border-bottom: solid 1px #d3d6d7;
vertical-align: middle;
}
.gene_image dd th {
text-align: left;
}
.gene_image dd td {
text-align: right;
}
.gene_image dd thead tr>* {
background: #fffc00;
font-size: 1.6rem;
padding: .65em .9em;
}
.gene_image dd thead th {
font-weight: bold;
}
.gene_image dd thead em {
color: #0050a3;
font-size: 2.3rem;
font-weight: bold;
}
.gene_image dd tbody tr>* {
font-size: 1.4rem;
padding: .71em 1em;
}
@media screen and (max-width: 767px) {
.gene_image dd table {
margin-top: .6em;
}
}
@media screen and (min-width: 768px) {
.gene_image dd img {
float: left;
width: 33em;
}
.gene_image dd table {
float: right;
width: 18.8em;
}
} .u_wrap {
overflow: hidden;
}
.u_inner {
width: 56em;
margin: 0 auto;
padding: 0 1em;
max-width: 100%;
}
#max {
width: 56em;
}
#min {
width: 22.5em;
}
.u_clearfix:after,
.u_clearfix>li:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
* html .u_clearfix,
* html .u_clearfix>li {
zoom: 1;
}
*+html .u_clearfix,
*+html .u_clearfix li {
zoom: 1;
}
.u_switch_img {
opacity: 1;
}
.u_left {
float: left;
}
.u_right {
float: right;
}
.u_center {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.u_col,
.u_tbl {
display: table;
width: 100%;
}
.u_col>*,
.u_tbl>* {
vertical-align: middle;
display: table-cell;
}
.u_relative {
position: relative;
}
@media all and (min-width: 768px) {
.u_visible_sp {
display: none;
}
}
@media all and (max-width: 767px) {
.u_visible_pc {
display: none;
}
.u_inner {
width: auto;
margin: 0 4%;
padding: 0;
}
.u_inner.sp {
margin: 0;
}
.u_left {
float: none;
width: auto !important;
}
.u_right {
float: none;
width: auto !important;
}
.u_col {
display: block;
}
.u_col>* {
display: block;
width: auto !important;
}
}  .area_voice_in {
max-height: 48em;
overflow-y: auto;
padding-right: 1em;
}
.area_voice h3.area_voice_inttl {
font-size: 2.4rem;
font-weight: bold;
color: #07307b;
margin-bottom: .5em;
}
.area_voice .area_voice_intext {
margin-bottom: 1.5em;
padding-bottom: 1.5em;
border-bottom: solid 1px #888888;
}
@media screen and (max-width: 767px) {
.area_voice .area_voice_in {
max-height: 45em;
}
.area_voice h3.area_voice_inttl {
font-size: 2.2rem;
}
}  .works_body h2.low_ttl {
margin-bottom: 2%;
}  .blogall_ttlarea {
display: block;
margin-bottom: .5em;
font-weight: normal;
font-size: 1.4rem;
}
h3.blogall_mainttl {
font-weight: bold;
font-size: 2.2rem;
}
.blog_side h2 {
background: #eef7fc;
font-size: 1.8rem;
font-weight: 600;
color: #07307b;
text-align: center;
padding: 1em 0;
border-bottom: solid 1px #07307b;
margin-top: 2em;
}
.blog_side div.a li {
border-bottom: solid 1px #e6e6e6;
font-size: 1.6rem;
color: #0099cc;
}
.blog_side div.a a {
display: block;
padding: 1em;
}  section.page-area_top_three {
margin: 3% 0;
}
.area_body h2.c_ttl {
position: relative;
z-index: 1;
}
@media screen and (max-width: 767px) {
section.page-area_top_three {
margin: 5% 0 0;
}
}  #breadcrumbs {
width: 71em;
font-size: 15px;
margin: 2% auto;
}
.breadcrumb_last {
color: #3667c1;
}
@media screen and (max-width: 767px) {
#breadcrumbs {
width: auto;
margin: 2% 5%;
}
}  .long-text {
font-size: 2.2rem;
top: 23.5%;
width: 9em;
line-height: 1.2;
}
.works_voicearea h3 {
font-size: 2.4rem;
font-weight: bold;
color: #07307b;
margin-bottom: .5em;
margin-top: 3%;
}
.works_voicearea .name {
color: #333333;
display: block;
font-size: 1.6rem;
margin: 1em 0 0.8%;
font-weight: bold;
}
.works_voicearea .voive_text {
margin-bottom: 2.5em;
font-size: 1.6rem;
}
ul.cityin-worksarea {
display: flex;
align-items: flex-start;
}
li.cityin-works {
margin-left: 2%;
width: 23%;
float: left;
}
li.cityin-works img {
width: 100%;
height: 206px;
}
li.cityin-works .flex-container {
display: flex;
align-items: baseline;
}
li.cityin-works .date {
font-size: 1.4rem;
font-weight: normal;
margin-bottom: .5em;
margin-right: 5%;
}
li.cityin-works .works_categoryB {
color: #0099cc;
font-size: 0.7em;
}
@media screen and (max-width: 1000px) {
li.cityin-works img {
height: 176px;
}
}
@media screen and (max-width: 767px) {
.long-text {
top: 11.65%;
left: 1.9%;
font-size: 3vw;
}
ul.cityin-worksarea {
display: flex;
align-items: flex-start;
flex-direction: column;
}
li.cityin-works {
margin-left: 2%;
width: 97%;
float: left;
}
li.cityin-works img {
width: 100%;
height: 312px;
}
}  .top_container {
background: #167ac6;
color: #fff;
font-size: 0.5em;
padding: 0.1%;
}
.top_container h1 {
max-width: 1084px;
width: 90%;
margin: 0 auto;
}
.top_satisfaction img {
margin: 0 auto 4%;
max-width: 500px;
width: 90%;
display: block;
}  .blog_article h2.fcB {
font-size: 1.5em;
color: #fff;
background: #167ac6;
padding: 1%;
margin: 3% 0 1%;
}
.blog_article h3.fwB {
font-size: 1.3em;
color: #3667c1;
margin: 3% 0 1%;
}
.blog_sub_title {
font-size: 1.3em;
} .blog_body .toc_container {
margin-bottom: 4%;
}
.blog_body .toc_title {
margin-bottom: 2%;
font-weight: bold;
font-size: 1.3em;
color: #167ac6;
border-bottom: solid 3px;
text-align: left;
padding-left: 2%;
}
.blog_body .toc_list li {
line-height: 2em;
}
.blog_body .toc_list li a {
text-decoration: underline;
}
.blog_body .toc_list li ul {
display: none;
}  .blog_ctaarea {
position: relative;
padding: 5% 0 10%;
}
.blog_ctaarea .h_tel {
position: absolute;
left: 0;
top: .6em;
}
.blog_ctaarea .h_tel .txt1 {
margin-bottom: 0;
font-size: 1.35rem;
color: #07307b;
}
.blog_ctaarea .h_tel .tel {
color: #f0003c;
margin: 0 .5em -.3em;
}
.blog_ctaarea .h_tel .tel img {
width: 2.75em;
vertical-align: middle;
margin-right: .3em;
}
.blog_ctaarea .h_tel .tel small {
font-size: 1.6rem;
border: solid 1px #f0003c;
padding: .35em .5em;
vertical-align: middle;
margin-right: .5em;
}
.blog_ctaarea .h_tel .tel span {
font-size: 3.4rem;
vertical-align: -18%;
font-weight: 600;
}
.blog_ctaarea .h_tel .tel em {
font-size: 4.65rem;
line-height: 1;
vertical-align: -5%;
}
.blog_ctaarea .h_tel .txt2 {
font-size: 1.3rem;
font-weight: bold;
color: #07307b;
line-height: 1;
}
.blog_ctaarea .h_right {
width: 20em;
position: absolute;
right: 0;
top: .5em;
color: #fff;
}
.blog_ctaarea .h_mail {
background: #189e03;
box-shadow: 0 5px 3px 0 rgba(78, 78, 78, 0.1);
margin-bottom: .3em;
}
.blog_ctaarea .h_mail a {
padding: .6em 0 .4em;
padding-left: 1.4em;
display: block;
font-size: 1.6rem;
text-align: center;
line-height: 1;
font-weight: bold;
}
.blog_ctaarea .h_mail img {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: .65em;
width: 1.625em;
}
.blog_ctaarea .h_mail small {
display: block;
font-size: 81.25%;
font-weight: normal;
}
.blog_ctaarea .h_web {
padding: 1%;
background: #3667c1;
box-shadow: 0 5px 3px 0 rgba(78, 78, 78, 0.1);
}
.blog_ctaarea .h_web a {
padding: .4em 0 .3em;
padding-left: 5em;
font-size: 1.3rem;
text-align: center;
}
.blog_ctaarea .h_web img {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: .7em;
width: 1.46154em;
}
.blog_ctaarea .h_link a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.35em;
right: 0.6em;
font-size: 2rem;
}
.blog_ctaarea .h_web a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.35em;
right: -1.9em;
font-size: 2rem;
}
.blog_ctaarea .h_link a.blogcta02_link:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.35em;
right: -1.9em;
font-size: 2rem;
}
@media all and (max-width: 767px) {
.blog_ctaarea {
padding: 49% 0 30%;
}
.blog_ctaarea .h_tel {
position: absolute;
left: 0;
top: 1.6em;
background: #0000;
box-shadow: 2px 2px 1px 0 #4e4e4e00;
}
.blog_ctaarea .h_tel .tel em {
font-size: 3.8rem;
}
.blog_ctaarea .h_tel .txt2 {
font-size: 1.2rem;
font-weight: bold;
color: #07307b;
line-height: 1;
}
.blog_ctaarea .h_right {
width: 26em;
position: absolute;
right: 0;
top: 10.5em;
color: #fff;
}
.blog_ctaarea .h_web {
padding: 5%;
background: #3667c1;
box-shadow: 0 5px 3px 0 rgba(78, 78, 78, 0.1);
}
.blog_ctaarea .h_web img {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: .7em;
width: 1.46154em;
}
.blog_ctaarea .h_web a {
padding: .4em 0 .3em;
padding-left: 3.5em;
font-size: 2rem;
text-align: center;
}
.blog_ctaarea .h_link a.blogcta02_link:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.5em;
right: 1.1em;
font-size: 2rem;
}
.blog_ctaarea .h_mail {
position: absolute;
right: -0.1em;
top: 108%;
background: #189e03;
width: 26.3em;
height: 75%;
color: #fff;
text-align: center;
}
.blog_ctaarea .h_mail img {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 1em;
width: 1.625em;
}
.blog_ctaarea .h_link a:before {
content: '';
position: absolute;
background: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/ico_arrow01.svg) no-repeat center center;
background-size: contain;
top: 50%;
transform: translate(0, -50%);
height: 100%;
width: 0.6em;
right: 1.2em;
font-size: 2rem;
}
}  .blog_writer_flexbox {
background: #e5f4ff;
padding: 3%;
max-width: 500px;
width: 90%;
display: flex;
align-items: center;
margin: 2% auto;
gap: 4%;
}
.blog_writer_flexbox img {
width: 10%;
}
.writer_flexboxin p {
font-size: 0.8em;
}
@media screen and (max-width: 767px) {
.blog_writer_flexbox {
width: 90%;
}
.blog_writer_flexbox img {
width: 14%;
}
}  ul.work_list_anypage {
display: flex;
align-items: flex-start;
}
li.work_list_in {
margin-left: 2%;
width: 23%;
float: left;
}
li.work_list_in h3 {
font-size: 0.85em;
}
li.work_list_in .flex-container {
display: flex;
align-items: baseline;
}
li.work_list_in .date {
font-size: 1.4rem;
font-weight: normal;
margin-bottom: .5em;
margin-right: 5%;
}
li.work_list_in .works_categoryB {
color: #0099cc;
font-size: 0.7em;
}
li.work_list_in .works_thumbnail-container {
width: 100%; height: 206px; overflow: hidden;
}
li.work_list_in .works_thumbnail-container img {
width: 100%;
height: 100%;
object-fit: cover; }
@media screen and (max-width: 767px) {
.works_inworks h2 {
margin: 10% 0 4% !important;
}
ul.work_list_anypage {
display: flex;
align-items: flex-start;
flex-direction: column;
}
li.work_list_in {
margin-left: 0;
width: 100%;
margin-bottom: 8%;
}
li.work_list_in .works_thumbnail-container img {
height: 250px;
}
.works_detailbtn {
width: 82%;
padding: 4%;
margin: 2% auto 12%;
}
}  .map-image {
max-width: 400px;
margin: auto;
width: 100%;
} .mizutoracolumn img {
width: 100%;
}
.mizutoracolumn span {
font-size: 14px;
}
.mizutoracolumn i.useful {
background: inherit !important;
color: #3a69c1;
} section.worksDetail h2.low_ttl {
margin-top: 35px;
}
.imagesBefore div,
.imagesAfter div {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 10px;
}
.imagesBefore div img,
.imagesAfter div img {
width: 48%;
height: fit-content;
margin-bottom: 10px;
} .postalcodelist {
display: block;
margin: auto;
width: fit-content;
}
.postalcodelist label {
font-size: 20px;
display: block;
font-weight: bold;
margin: 10px 0 5px;
}
.postalcodelist input#postal-code {
border: 2px solid #0069b7;
padding: 2px 14px;
margin: 1px 0;
}
.postalcodelist p#result {
text-align: center;
color: #0168b7;
font-weight: bold;
}
.city_accordion dd.open a:after {
content: "/";
list-style: none;
display: inline-block;
padding: 0 10px;
}
.low_col dd>h4 {
font-size: 16px;
font-weight: bold;
margin-top: 15px;
} .area_reason {
margin-bottom: 3.5em;
}
.area_reason .low_ttl {
margin-bottom: 1.5em;
position: relative;
}
.area_reason .reason_list {
background-color: #e6f3ff;
padding: 30px 20px 10px;
border-radius: 10px;
margin: auto;
}
.area_reason .top_btn {
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 0;
font-weight: normal;
margin-right: 1rem;
}
@media screen and (max-width: 767px) {
.area_reason .reason_list {
padding: 20px 10px 10px;
}
.area_reason .reason_list li {
margin-left: 0;
width: 50%;
padding: 10px;
}
.area_reason .reason_list .img {
width: 9em;
height: 9em;
}
.area_reason .top_btn {
position: relative;
top: 0;
transform: none;
right: 0;
font-weight: normal;
margin: 30px 0 0;
}
}
.area_voice .low_ttl {
margin-bottom: 1.2em;
}
.area_voice dl {
max-height: 48em;
overflow-y: auto;
padding-right: 1em;
}
.area_voice dt {
font-size: 2.4rem;
font-weight: bold;
color: #07307b;
margin-bottom: .5em;
}
.area_voice dd {
margin-bottom: 1.5em;
padding-bottom: 1.5em;
border-bottom: solid 1px #888888;
}
.area_voice p {
font-size: 1.6rem;
line-height: 1.875;
}
.area_voice p em {
font-weight: bold;
display: block;
margin-bottom: .5em;
}
@media screen and (max-width: 767px) {
.area_voice .low_ttl {
margin-bottom: .8em;
}
.area_voice dl {
max-height: 45em;
}
.area_voice dt {
font-size: 2.2rem;
}
.area_voice p {
font-size: 1.6rem;
line-height: 1.6;
}
} .serv_mokuji {
margin: 0 auto 50px;
max-width: 850px;
width: 100%;
}
.serv_mokuji ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.serv_mokuji ul a {
width: 20%;
text-align: center;
padding: 5px;
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
.serv_mokuji ul a p {
color: #fff;
background: #3667c1;
padding: 5px;
border-radius: 50px;
}
.serv_mokuji ul a img {
width: 25%;
margin-bottom: 4px;
}
.serv_mokuji ul a p {
position: relative;
color: #fff;
background: #3667c1;
padding: 5px;
border-radius: 50px;
}
.serv_mokuji ul a p::after {
background-image: url(//mizu-support.com/wp/wp-content/themes/mizu-support/img/serv_mokuji-icon.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
bottom: 0;
content: "";
margin: auto;
position: absolute;
right: 6px;
top: -1px;
width: 16px;
}
#page01,
#page02,
#page03,
#page04,
#page05,
#page06,
#page07,
#page08 {
padding-top: 200px;
margin-top: -200px;
}
@media screen and (max-width: 767px) {
.serv_mokuji {
margin: 15px auto 30px;
}
.serv_mokuji ul a {
width: 32%;
padding: 3px;
font-size: 11px;
margin-bottom: 5px;
}
.serv_mokuji ul a p::after {
right: 4px;
width: 11px;
}
#page01,
#page02,
#page03,
#page04,
#page05,
#page06,
#page07,
#page08 {
padding-top: 100px;
margin-top: -100px;
}
} .works-top_service {
padding: 3em 0;
margin: 6em 0 2em;
background: #f1fcff;
}
@media screen and (max-width: 1400px) {
.works-top_service {
padding: 2em 0;
margin: 3em 0 0em;
}
} .num_list {
margin-top: 3.5rem;
}
.nl_wrap {
padding: 10px;
margin-bottom: 3.5em
}
.nl_table {
box-sizing: border-box;
border-left: solid 1px #000;
display: flex;
flex-wrap: wrap;
}
.nl_table dl {
border-left: none;
display: flex;
line-height: normal;
width: calc(100% / 3);
border-top: solid 1px #000;
border-bottom: solid 1px #000;
border-right: solid 1px #000;
}
.nl_table dl:nth-of-type(n+4) {
border-top: none;
}
.nl_table dt {
font-size: 1.3rem;
padding: 0.5vw 1.25vw;
background-color: #b2dbff;
width: 50%;
text-align: center;
border-right: solid 1px #000;
}
.nl_table dd {
font-size: 1.3rem;
padding: 0.5vw 1.25vw;
width: 50%;
text-align: center;
}
.nl_table dd:nth-of-type(3n) {
border-right: none;
}
@media screen and (max-width: 767px) {
.num_list {
margin-top: 3.5rem;
}
.nl_wrap {
padding: 10px;
margin-bottom: 3.5em
}
.nl_table {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
}
.nl_table dl {
border-left: none;
display: flex;
line-height: normal;
width: 100%;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
border-right: solid 1px #000;
}
.nl_table dl:nth-of-type(n+2) {
border-top: none;
}
.nl_table dt {
font-size: 1.7rem;
padding: 1.5vw 1.25vw;
background-color: #b2dbff;
width: 50%;
text-align: center;
border-right: solid 1px #000;
}
.nl_table dd {
font-size: 1.7rem;
padding: 1.5vw 1.25vw;
width: 50%;
text-align: center;
}
.nl_table dd:nth-of-type(3n) {
border-right: none;
}
} .location_info {
margin-top: 3.5rem;
}
.location_info p {
font-size: 1.6rem;
}
.info_url {
color: #0099cc;
}
.low_ttl3 {
background: #f0f7fa;
font-size: 2.6rem;
font-weight: bold;
color: #07307b;
border-bottom: solid 1px #07307b;
padding: .4em 1em;
margin-bottom: 1em;
} .top_flow .list h3.flow_tit {
font-weight: bold;
font-size: 2.4rem;
text-align: center;
color: #07307b;
margin: .7em 0 .3em;
}
.top_flow .list p.flow_txt {
font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
.top_flow .list div.flow_box {
margin-left: 7em;
}
.top_flow .list h3.flow_tit {
font-size: 2.76rem;
text-align: left;
}
} .top_first2 {
padding: 4em 0 0.1em;
position: relative;
background: #e5f9ff;
background-size: 100% auto;
}
@media screen and (max-width: 1400px) {
.top_first2 {
background-size: 70em;
}
.top_first2:before {
background-size: 70em;
}
}
.top_first2 .ttl {
color: #07307b;
font-weight: bold;
font-size: 4rem;
position: relative;
border-left: solid 0.25em #07307b;
padding-left: .5em;
line-height: 1.3;
margin-bottom: 1.2em;
}
.top_first2 .ttl small {
font-size: 3rem;
}
.top_first2 .ttl .top_btn {
display: block;
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 0;
font-weight: normal;
}
@media screen and (max-width: 767px) {
.top_first2 .ttl {
border: none;
text-align: center;
padding: 0;
font-size: 3.6rem;
}
.top_first2 .ttl .top_btn {
display: none;
}
.top_first2 .ttl small {
display: block;
font-size: 2.4rem;
}
}  .area_support::before,
.area_serv::before,
.top_flow::before,
.area_voice.c_scroll::before,
.pay_list::before {
content: "";
display: block;
height: 124px;
margin-top: -124px;
visibility: hidden;
}
.section-nav {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
text-align: center;
padding: 1.5rem 0;
position: relative;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
flex: 1;
} .nav-item:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 100%;
background-color: #07307b;
}
.nav-icon {
width: 60px;
height: 60px;
margin-bottom: -0.6rem;
}
.nav-button {
display: inline-flex;
align-items: center;
justify-content: center;
color: #07307b;
text-decoration: none;
font-size: 1.4rem;
gap: 0.5rem;
background: none;
border: none;
padding: 0.4rem 0;
cursor: pointer;
}
.nav-arrow {
display: inline-block;
width: 1.6rem;
height: 1.6rem;
background-color: #07307b;
border-radius: 50%;
position: relative;
}
.nav-arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0.4em;
height: 0.4em;
border: 0.1em solid white;
border-left: 0;
border-bottom: 0;
transform: translate(-50%, -70%) rotate(135deg);
box-sizing: border-box;
} @media screen and (max-width: 767px) {
.section-nav {
flex-direction: row;
flex-wrap: wrap; gap: 1rem;
}
.nav-item {
width: calc(50% - 0.5rem);
border: 1px solid #07307b;
border-radius: 8px;
padding-inline: 1rem;
background: #fff;
flex-direction: row;
flex: none;
justify-content: center;
}
.nav-item:not(:last-child)::after {
display: none;
}
.nav-icon {
width: 80%;
}
.nav-button {
font-size: 1.56rem;
font-weight: bold;
}
.nav-arrow {
margin-left: auto;
min-width: 1.6rem;
min-height: 1.6rem;
}
.nav-arrow {
display: inline-block;
width: 1.6rem;
height: 1.6rem;
background-color: #07307b;
border-radius: 50%;
position: relative;
}
.nav-arrow::before {
min-width: 0.3em;
min-height: 0.3em;
border: 0.09em solid white;
border-left: 0;
border-bottom: 0;
}
.nav-outer {
position: relative;
background: #e5f9ff;
background-size: 100% auto;
}
}  .text-image-section {
display: flex; align-items: center;
justify-content: space-between;
gap: 2rem;
max-width: 100%;
margin: 2rem auto;
padding: 1rem;
}
.text-block {
flex: 1 1 50%;
font-size: 1.6rem;
}
.text-block p {
line-height: 2;
}
.image-block {
flex: 1 1 50%;
max-width: 100%;
}
.image-block img {
width: 100%;
height: auto;
aspect-ratio: 339 / 226; object-fit: cover;
} @media screen and (max-width: 768px) {
.text-image-section {
flex-direction: column;
}
.text-block,
.image-block {
flex: 1 1 100%;
}
}
.wpcf7-spinner {
display: none !important;
} li.worksDetail-corporation .box .text,
li.worksDetail-reform .box .text,
li.worksDetail-ohter .box .text {
font-weight: normal;
font-size: 1.6rem;
padding: .6em 1em;
}
.serv_list p.text {
font-weight: normal !important;
font-size: 1.6rem !important;
text-align: left !important;
padding: 0 !important;
margin-bottom: 10px !important;
}
.serv_list p.text b {
font-size: 1.4rem !important;
}
.serv_list p.text span.red {
color: #f0003c;
}
@media (max-width: 767px) {
.serv_list p.text {
padding: .6em 1em !important;
}
} .serv_list.serv_list--works {
display: flex;
flex-wrap: wrap;
gap: 1.8%;
margin-left: 0;
padding: 0;
list-style: none;
}
.serv_list.serv_list--works>li {
flex: 1 1 calc(33.333% - 1.8%);
display: flex;
flex-direction: column;
background: #fff;
border-radius: .3em;
box-shadow: 2px 2px 1px 0 rgba(78, 78, 78, 0.1);
overflow: hidden;
margin: 0 0 2% 0;
}
.serv_list.serv_list--works>li>a {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.serv_list.serv_list--works li img {
display: block;
width: 100%;
}
.serv_list.serv_list--works .box {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.serv_list.serv_list--works .btn {
margin-top: auto;
}
.serv_list.serv_list--works .web {
margin-bottom: 10px !important;
}
@media (max-width: 767px) {
.serv_list.serv_list--works>li {
flex: 0 0 100%;
width: 100%;
margin: 0 0 1.20px;
}
.serv_list.serv_list--works .na_contents {
display: flex;
flex-direction: row-reverse;
align-items: stretch;
gap: 10px;
padding: 0;
}
.serv_list.serv_list--works .na_contents img {
flex: 0 0 40%;
max-width: 40%;
width: auto !important;
height: auto;
display: block;
margin: 0;
padding: 0;
object-fit: cover;
}
.serv_list.serv_list--works .na_contents .box {
flex: 1 1 0%;
display: flex;
flex-direction: column;
padding: .6em 0 .8em .7em;
}
.serv_list.serv_list--works .na_contents .btn {
margin-top: auto;
}
}
.blog_main #ez-toc-container {
margin-bottom: 50px;
padding: 20px min(40px, 20px + 2vw);
border-radius: 3px;
border: 0;
background-color: #F0F7FC;
}
.blog_main .ez-toc-title-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
width: 100%;
}
.blog_main div#ez-toc-container .ez-toc-title {
font-weight: 700;
color: #00165F;
font-size: 16px;
}
.blog_main #ez-toc-container .ez-toc-toggle {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
width: fit-content;
margin-inline-end: 0;
border: 0;
text-decoration: none;
}
.blog_main #ez-toc-container .ez-toc-toggle::after {
font-size: 12px;
color: #00165F;
content: "開く";
}
.blog_main #ez-toc-container .ez-toc-toggle::before {
rotate: 135deg;
display: block;
width: 0.6em;
height: 0.6em;
margin-top: -.1em;
margin-right: 0.5em;
border-top: 2px solid #000;
border-right: 2px solid #000;
content: "";
}
.blog_main #ez-toc-container.toc_close .ez-toc-toggle::after {
content: "閉じる";
}
.blog_main #ez-toc-container.toc_close .ez-toc-toggle::before {
rotate: -45deg;
margin-top: .4em;
}
.blog_main #ez-toc-container .ez-toc-js-icon-con {
display: none;
}
.blog_main #ez-toc-container nav ul {
font-size: 14px;
}
.blog_main #ez-toc-container nav ul li a {
padding: 15px 0;
border-bottom: 1px solid #CCD8E3;
color: #0099CC;
width: 100%;
}
.blog_main .ez-toc-counter nav ul li a::before {
margin-right: 1em;
color: #000;
content: counters(item, "-", decimal) " ";
}
.f_nav_area {
width: 65%;
font-size: 10px;
color: #fff;
a:not(:last-child) {
display: inline-block;
border-right: 1px solid rgb(255, 255, 255, 0.3);
padding-right: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p {
font-size: 1.6rem;
padding: .9em 0;
margin-bottom: .9em;
font-weight: bold;
border-bottom: solid 1px #7c91b9;
}
} p.Kagosima_dspNon {
display: none;
} .nav-outer-top {
margin-block: 2rem;
}
@media screen and (max-width: 767px) {
.nav-outer-top {
margin-bottom: -2rem;
}
} .faq_contents {
width: 56em;
margin: 7% auto;
padding: 0 1em;
max-width: 100%;
}
.faq_contents .faq_list {
border-bottom: none;
margin: 2em 0 2em;
}
.box_a {
transition: .2s;
cursor: pointer;
margin-bottom: 15px;
}
.box_a:hover {
box-shadow: 0px 0px 7px #aaa;
}
.box_content {
margin-top: 20px;
}
.faq_list h3.qes {
border-top: solid 1px #d9d9d9;
background: #f7fafb;
color: #07307b;
padding: 1.4em 4.5em 1.3em 3.5em;
position: relative;
}
.faq_list h3.qes::after,
.faq_list h3.qes::before {
content: "";
position: absolute;
top: calc(50% - 10px);
right: 35px;
width: 4px;
height: 1em;
background-color: #07307b;
transition: all 0.3s;
}
.faq_list h3.qes::after {
transform: rotate(90deg);
}
.faq_list .open h3.qes::before {
transform: rotate(90deg) !important;
}
.faq_list div.ans {
position: relative;
padding: 1.5em 4.5em 3.5em 4.5em;
font-size: 1.6rem;
line-height: 1.6;
display: none;
}
.faq_list div.ans i {
color: #ff9000;
}
.faq_list .open div.ans {
display: block;
}
.postalcodelist{
width: 100%;
}
.postalcodelist h3 {
text-align: center;
font-size: 20px;
margin: -20px auto 0;
padding: 10px 0;
width: 100%;
background: #07307b;
color: #fff;
}
.postalcodelist_inner {
padding: 15px;
margin-bottom: 35px;
}
.postalcodelist_inner label {
display: block;
text-align: center;
font-weight: bold;
color: #07307b;
}
.postalcodelist input#postal-code,.postalcodelist input#postal-code2 {
border: 2px solid #0069b7;
padding: 2px 14px;
display: block;
margin: 6px auto 0;
}
.postalcodelist p#result,.postalcodelist p#result2 {
text-align: center;
color: #0168b7;
font-weight: bold;
}
@media screen and (max-width: 767px) {
.postalcodelist h3 {
margin: 0 auto 0;
}
.postalcodelist input#postal-code, .postalcodelist input#postal-code2 {
width: 90%;
}
.faq_contents .faq_list {
margin-bottom: 2em;
}
.faq_list h3.qes {
padding: 1em 3em 1em 3em;
}
.faq_list div.ans {
padding: 1em 2em 3em 3.7em;
}
} .faq-link-wrapper { width: 56em;
margin: 0 auto; padding: 0 1em;
max-width: 100%;
margin-bottom: 40px; }
.btn_faq { text-align: left;
margin-top: 10px;
}
.btn_faq a {
display: inline;
padding: 0;
color: #0099cc;
font-size: 2rem;
font-weight: bold;
text-decoration: none;
border: none;
background-color: transparent;
transition: color 0.3s;
}
.btn_faq a:hover {
color: #006699;
} @media screen and (max-width: 767px) {
.faq-link-wrapper {
width: auto;
padding: 0 10px;
margin-bottom: 20px;
}
.btn_faq {
text-align: center;
}
.btn_faq a {
font-size: 2rem;
}
}
.top_pagelink_body {
margin-bottom: 2rem;
} .top-works-section .works-container {
padding: 20px 0;
}
.works-category {
margin-bottom: 30px;
border: 1px solid #07307b; }
.works-ttl {
font-size: 1.8rem;
font-weight: bold;
color: #fff;
padding: 10px 20px;
text-align: center;
margin: 0;
}
.works-ttl-corp {
background-color: #07307b; }
.works-ttl-public {
background-color: #07307b;
}
.works-logos, .works-list {
padding: 20px 10px;
text-align: center;
} .logo-item {
float: left;  padding: 10px;
box-sizing: border-box;
}
.logo-item img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
} .public-works-list p {   font-size: 1.6rem;
font-weight: bold;
text-align: center;
padding: 10px 5px;
box-sizing: border-box;
} .top-maker-section {
padding-bottom: 40px; }
.maker_box {     border: 1px solid #167ac6;
padding-bottom: 1rem;
}
.maker_box h3 {
font-size: 2.0rem;
font-weight: bold;
color: #fff;
background-color: #167ac6;
padding: 10px 0;
text-align: center;
margin: 0 0 15px 0;
}
.maker_box div {
text-align: center;
}
.maker_box img.pc {
max-width: 90%;
height: auto;
display: block;
margin: 0 auto;
}
.maker_box img.sp {
display: none; }
.maker_box p {
font-size: 1.5rem;
color: #07307b;
margin: 15px 0 0;
font-weight: bold;
} @media screen and (max-width: 767px) {
.maker_box img.pc {
display: none;
}
.maker_box img.sp {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
display: inline; }
} .trouble-list-container {
padding-top: 10px;
padding-bottom: 40px;
}
.trouble-column {
float: left;
width: 31%; margin: 0 1.15%;
border: 1px solid #d9d9d9;
box-sizing: border-box;
min-height: 323px;
}
.trouble-column-ttl {
font-weight: bold;
color: #fff;
padding: 10px 0;
text-align: center;
margin: 0;
}
.trouble-clog {
background-color: #07307b; }
.trouble-leak {
background-color: #0069b7; }
.trouble-other {
background-color: #ff9000; }
.trouble-items,
.trouble-items-first {
list-style: none;
padding: 15px 5px 15px 5px;
margin: 0;
font-size: 1.5rem;
}
.trouble-items-first li {
position: relative;
padding-left: 15px;
line-height: 1.6;
margin-bottom: 5px;
color: #07307b;
}
.trouble-items li {
position: relative;
padding-left: 15px;
line-height: 2.6;
margin-bottom: 5px;
color: #07307b;
} .trouble-items li::before,
.trouble-items-first li::before {
content: "・";
color: #07307b;
font-weight: bold;
position: absolute;
left: 0;
} .top-satisfaction-qualifcation {
padding-bottom: 40px;
} .top-satisfaction-qualifcation .u_inner {
display: flex;
justify-content: space-between;
align-items: flex-start;
} .qualifcation-box h2.qualifcation-ttl,
.top_satisfaction h2.satisfaction-ttl {
font-size: 4rem; color: #07307b;
margin: 0 0 15px 0 !important;
font-weight: bold;
} .qualifcation-box {
width: 52%;
box-sizing: border-box;
padding-bottom: 20px;
padding-right: 1rem;
border-right: 1px solid #d9d9d9;
} .qualifcation-box h2.qualifcation-ttl {
margin: 0 0 15px 0 !important;
} .qualifcation-list {
list-style: none;
margin: 0;
padding: 0 20px;
}
.qualifcation-list li {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.6rem;
line-height: 1.5;
color: #333;
padding: 8px 0;
} .qualifcation-list li:last-child {
border-bottom: none;
} .qualifcation-list li .qual-name {
color: #333; font-weight: normal;
} .qualifcation-list li .qual-num {
color: #07307b; font-weight: bold;
font-size: 1.7rem; } @media screen and (max-width: 767px) {
.qualifcation-box {
border-right: none;
}
.qualifcation-list {
padding: 0 10px;
}
.qualifcation-list li {
font-size: 1.4rem;
padding: 6px 0;
}
.qualifcation-list li .qual-num {
font-size: 1.5rem;
}
} .top_satisfaction {
width: 48%; text-align: left; 
margin: 0;
box-sizing: border-box;
padding: 0;
} .top_satisfaction h2.satisfaction-ttl {
margin-bottom: 15px;
}
.top_satisfaction img {
max-width: 100%;
height: auto;
margin-bottom: 20px; display: block; 
} .btn_voice {
margin-top: 15px;
}
.btn_voice a {
display: inline; padding: 0;
background-color: transparent; 
color: #0099cc; font-size: 1.6rem;
font-weight: bold;
text-decoration: none;
border: none; border-radius: 0;
transition: color 0.3s;
}
.btn_voice a:hover {
color: #006699; background-color: transparent;
opacity: 1;
} @media screen and (max-width: 767px) {
.top-satisfaction-qualifcation .u_inner {
flex-direction: column;
}
.qualifcation-box,
.top_satisfaction {
width: 100%;
margin-bottom: 30px; text-align: center; 
}
.qualifcation-box {
padding-bottom: 10px;
}
.qualifcation-list {
padding: 0 10px;
}
.qualifcation-list li {
font-size: 1.4rem;
line-height: 1.6; padding-left: 0; 
} .qualifcation-box h2.qualifcation-ttl,
.top_satisfaction h2.satisfaction-ttl {
padding: 1em 1em 1em 1em; 
}
.top_satisfaction img {
margin-bottom: 15px; margin-left: auto;
margin-right: auto;
} .btn_voice {
text-align: center;
}
.btn_voice a {
display: inline; }
} @media screen and (max-width: 767px) { .logo-item, .public-works-list p {
width: 100%;
float: none;
display: inline-block;
vertical-align: top;
}
.works-logos, .works-list {
text-align: center;
} .trouble-column {
float: none;
width: 90%;
margin: 20px auto 0;
min-height: auto;
}
.trouble-items,
.trouble-items-first {
padding-inline: 20px;
}
.trouble-items li {
font-size: 1.4rem;
}
}  .top_notice .c_ttl {
color: #07307b;
font-weight: bold;
text-align: center;
padding: 0 0 30px 0;
} .top-useful-info {
padding-bottom: 50px;
} .info-item { border: 1px solid #d9d9d9; margin-bottom: 1rem; 
padding: 20px; background-color: #fff;    } .info-item:last-child {
margin-bottom: 0;
} .info-img {
float: left;
width: 30%;
margin-right: 30px;
}
.info-img img {
width: 100%;
height: auto;
display: block;
} .info-text {
overflow: hidden;
} .info-text .info-ttl {
font-size: 1.8rem;
color: #07307b;
font-weight: bold;
margin-top: 0;
margin-bottom: 10px;
line-height: 1.4;
} .info-text p {
font-size: 1.5rem;
line-height: 1.6;
color: #333;
margin-top: 0;
} @media screen and (max-width: 767px) {
.top_notice .c_ttl {
padding: 0 0 20px 0;
}
.info-item {
margin-bottom: 1rem; padding: 15px; } .info-img {
float: none;
width: 100%;
margin-right: 0;
margin-bottom: 15px;
}
.info-text {
overflow: visible;
}
.info-text .info-ttl {
font-size: 2rem;
text-align: center;
}
.info-text p {
font-size: 1.4rem;
}
}
.top-flow {
margin-bottom: 3rem;
padding-bottom: 1rem; !important;
} .newyear_intro img.pc {
display: block;
margin: 10px auto;
}
.newyear_intro img.sp {
display: none;
}
@media screen and (max-width: 767px) {
.newyear_intro img.sp {
display: block;
margin: 0 auto;
}
.newyear_intro img.pc {
display: none;
}
}