@charset "UTF-8";
 .vertmiddle:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.vertmiddle > * {
display: inline-block;
vertical-align: middle;
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: 0;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-list, .slick-slider .slick-track {
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:after, .slick-track:before {
display: table;
content: "";
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir=rtl] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
} .slick-loading .slick-list {
background: #fff url(/common/css/ajax-loader.gif) center center no-repeat;
} @font-face {
font-family: "slick";
font-weight: normal;
font-style: normal;
src: url(/common/css/fonts/slick.eot);
src: url(/common/css/fonts/slick.eot?#iefix) format("embedded-opentype"), url(/common/css/fonts/slick.woff) format("woff"), url(/common/css/fonts/slick.ttf) format("truetype"), url(/common/css/fonts/slick.svg#slick) format("svg");
} .slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
z-index: 10;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
opacity: 0.75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -25px;
}
[dir=rtl] .slick-prev {
right: -25px;
left: auto;
}
.slick-prev:before {
content: "←";
}
[dir=rtl] .slick-prev:before {
content: "→";
}
.slick-next {
right: -25px;
}
[dir=rtl] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
content: "→";
}
[dir=rtl] .slick-next:before {
content: "←";
} .slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
font-family: "slick";
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: "";
text-align: center;
opacity: 0.25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: 0.75;
color: black;
}
html {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, verdana, "メイリオ", "Meiryo", "Osaka", sans-serif; font-size: 100px;
}
@media print, screen and (min-width: 461px) {
html {
font-feature-settings: "palt";
line-height: 1.5;
}
}
@media screen and (max-width: 460px) {
html {
-webkit-text-size-adjust: 100%;
}
}
html.ie {
font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", verdana, "メイリオ", "Meiryo", "Osaka", sans-serif;
}
html { }
@media print, screen and (min-width: 1366px) and (max-width: 1439px) {
html {
font-size: 85px;
}
}
@media print, screen and (min-width: 1280px) and (max-width: 1365px) {
html {
font-size: 80px;
}
}
@media print, screen and (min-width: 461px) and (max-width: 1279px) {
html {
font-size: 75px;
}
}
html { }
@media screen and (min-width: 400px) and (max-width: 460px) {
html {
font-size: 110px;
}
}
html.edge {
-ms-text-size-adjust: 100%;
}
html.safari {
-webkit-font-smoothing: antialiased;
}
@media print, screen and (min-width: 461px) {
html.safari {
font-feature-settings: "pkna";
}
}
body {
position: relative;
margin: 0;
padding: 0;
font-size: 0.11rem;
}
@media print, screen and (min-width: 461px) {
body {
min-width: 1024px;
}
}
.touchevents * {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.chrome body {
image-rendering: -webkit-optimize-contrast;
}
h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, td, th, figure {
margin: 0;
padding: 0;
}
article, aside, footer, header, main, nav, section, figcaption, figure {
display: block;
}
img {
-ms-interpolation-mode: bicubic;
border-style: none;
vertical-align: bottom;
}
svg:not(:root) {
overflow: hidden;
}
hr {
height: 0;
overflow: visible;
box-sizing: border-box;
}
b, strong {
font-weight: inherit;
font-weight: bolder;
}
a {
outline: 0;
text-decoration: none;
color: inherit;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
li {
list-style: none;
}
sub, sup {
position: relative;
vertical-align: baseline;
line-height: 0;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
audio, video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
canvas {
display: inline-block;
}
input, select, button, optgroup, textarea {
font-family: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: none;
outline: 0;
margin: 0;
padding: 0;
}
button, input {
overflow: visible;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
button:-moz-focusring,
input:-moz-focusring {
outline: 1px dotted ButtonText;
}
button, select {
cursor: pointer;
text-transform: none;
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
border: none;
}
select::-ms-expand {
display: none;
} [data-hidePrintMessageArea] {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
pointer-events: none;
opacity: 0;
}
@media print {
body {
position: relative;
top: 100px;
}
body:before {
content: "ページを印刷する際は一番下までスクロールして下さい。";
display: none;
white-space: pre;
font-size: 20px;
padding: 10px 10px;
border: 3px solid #000;
background-color: #FFF;
color: #000;
position: absolute;
top: -100px;
left: 0px;
right: 0px;
text-align: center;
box-sizing: border-box;
}
.chrome body:before {
content: "ページを印刷する際は一番下までスクロールして下さい。\a画像を表示させる場合は、「基本設定」→「背景のグラフィック」を有効にして下さい。";
}
.ie body:before {
content: "ページを印刷する際は一番下までスクロールして下さい。\a画像を表示させる場合は、「印刷プレビュー」→「ページ設定」→「背景の色とイメージを印刷する」を有効にして下さい。";
}
.safari body:before {
content: "ページを印刷する際は一番下までスクロールして下さい。\a画像を表示させる場合は、「詳細を表示」→「背景をプリント」を有効にして下さい。";
}
.edge body:before {
content: "※Microsoft Edgeは背景や画像を印刷できません。";
}
.addPrintMessage body:before {
display: block;
}
* {
background-attachment: scroll !important;
}
} @media print, screen and (min-width: 461px) {
[data-sc-sp] {
display: none !important;
}
} @media screen and (max-width: 460px) {
[data-sc-pc] {
display: none !important;
}
}
.mod_main {
overflow: hidden;
}
.device-tablet .mod_main {
width: calc(100% + 1px);
} [data-autoheight],
[data-pc-autoheight],
[data-sp-autoheight] {
transition: none !important;
} [data-lf] {
opacity: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover; }
[data-lf][src],
[data-lf][style*=background-image],
[data-lf].load_view {
opacity: 1;
}  @media print, screen and (min-width: 461px) {
@supports (display: flow-root) {
.col_base.col_1 {
display: flow-root;
}
}
@supports not (display: flow-root) {
.col_base.col_1 {
display: block;
}
.col_base.col_1:after {
content: "";
display: block;
clear: both;
}
}
.ie .col_base.col_1 {
display: block;
width: calc(100% + 1px);
}
.ie .col_base.col_1:after {
content: "";
display: block;
clear: both;
}
.col_base.col_1 > * {
margin: 0px 0 0 0px;
width: calc(100% / 1 - 0px);
float: left;
}
.ie .col_base.col_1 > * {
width: calc((100% - 1px) / 1 - 0px);
}
.col_base.col_1 > *:nth-child(1n+1) {
margin-left: 0;
}
.col_base.col_1 > *:nth-child(-n+1) {
margin-top: 0;
}
}
@media print, screen and (min-width: 461px) {
@supports (display: flow-root) {
.col_base.col_2 {
display: flow-root;
}
}
@supports not (display: flow-root) {
.col_base.col_2 {
display: block;
}
.col_base.col_2:after {
content: "";
display: block;
clear: both;
}
}
.ie .col_base.col_2 {
display: block;
width: calc(100% + 1px);
}
.ie .col_base.col_2:after {
content: "";
display: block;
clear: both;
}
.col_base.col_2 > * {
margin: 0px 0 0 0px;
width: calc(100% / 2 - 0px);
float: left;
}
.ie .col_base.col_2 > * {
width: calc((100% - 1px) / 2 - 0px);
}
.col_base.col_2 > *:nth-child(2n+1) {
margin-left: 0;
}
.col_base.col_2 > *:nth-child(-n+2) {
margin-top: 0;
}
}
@media print, screen and (min-width: 461px) {
@supports (display: flow-root) {
.col_base.col_3 {
display: flow-root;
}
}
@supports not (display: flow-root) {
.col_base.col_3 {
display: block;
}
.col_base.col_3:after {
content: "";
display: block;
clear: both;
}
}
.ie .col_base.col_3 {
display: block;
width: calc(100% + 1px);
}
.ie .col_base.col_3:after {
content: "";
display: block;
clear: both;
}
.col_base.col_3 > * {
margin: 0px 0 0 0px;
width: calc(100% / 3 - 0px);
float: left;
}
.ie .col_base.col_3 > * {
width: calc((100% - 1px) / 3 - 0px);
}
.col_base.col_3 > *:nth-child(3n+1) {
margin-left: 0;
}
.col_base.col_3 > *:nth-child(-n+3) {
margin-top: 0;
}
}
@media print, screen and (min-width: 461px) {
@supports (display: flow-root) {
.col_base.col_4 {
display: flow-root;
}
}
@supports not (display: flow-root) {
.col_base.col_4 {
display: block;
}
.col_base.col_4:after {
content: "";
display: block;
clear: both;
}
}
.ie .col_base.col_4 {
display: block;
width: calc(100% + 1px);
}
.ie .col_base.col_4:after {
content: "";
display: block;
clear: both;
}
.col_base.col_4 > * {
margin: 0px 0 0 0px;
width: calc(100% / 4 - 0px);
float: left;
}
.ie .col_base.col_4 > * {
width: calc((100% - 1px) / 4 - 0px);
}
.col_base.col_4 > *:nth-child(4n+1) {
margin-left: 0;
}
.col_base.col_4 > *:nth-child(-n+4) {
margin-top: 0;
}
}
@media print, screen and (min-width: 461px) {
@supports (display: flow-root) {
.col_base.col_5 {
display: flow-root;
}
}
@supports not (display: flow-root) {
.col_base.col_5 {
display: block;
}
.col_base.col_5:after {
content: "";
display: block;
clear: both;
}
}
.ie .col_base.col_5 {
display: block;
width: calc(100% + 1px);
}
.ie .col_base.col_5:after {
content: "";
display: block;
clear: both;
}
.col_base.col_5 > * {
margin: 0px 0 0 0px;
width: calc(100% / 5 - 0px);
float: left;
}
.ie .col_base.col_5 > * {
width: calc((100% - 1px) / 5 - 0px);
}
.col_base.col_5 > *:nth-child(5n+1) {
margin-left: 0;
}
.col_base.col_5 > *:nth-child(-n+5) {
margin-top: 0;
}
}
.clearfix {
content: "";
display: block;
clear: both;
}
a {
transition: all 0.3s;
}
a:hover {
opacity: 0.7;
}  .flowbottomSP {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: auto;
display: table;
text-align: center;
transition: transform 1s;
transform: translateY(100%);
z-index: 999;
display: flex;
}
.flowbottomSP.active {
transform: none;
}
.flowbottomSP .reform {
width: 20%;
background: #48c0c0;
}
.flowbottomSP .reform a {
background-position: top center;
display: block;
line-height: 1.25;
color: #fff;
font-weight: bold;
background-position: center 0.07rem;
background-size: 0.18rem 0.35rem;
font-size: 0.1rem;
padding-top: 0.09rem;
position: relative;
height: 100%;
box-sizing: border-box;
}
@media screen and (max-width: 460px) {
.flowbottomSP .reform a {
background-size: 0.305rem 0.315rem;
}
}
@media screen and (max-width: 350px) {
.flowbottomSP .reform a {
font-size: 0.1rem;
}
}
.flowbottomSP .reform a:after {
content: "";
background-image: url(//renovation-r.co.jp/common/img/reform_icon.png);
width: 0.3rem;
height: 0.3rem;
position: absolute;
bottom: 0.07rem;
left: 0;
right: 0;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
}
.flowbottomSP .sideList {
width: 66.6666666667%;
background: #2cb3b3;
display: flex;
}
.flowbottomSP .sideList li {
width: 33.3333333333%;
padding: 0;
}
@media screen and (max-width: 460px) {
.flowbottomSP .sideList li {
width: 50%;
padding: 0;
}
}
.flowbottomSP .sideList li a {
background-position: top center;
display: block;
border-right: 1px solid #4dabdc;
line-height: 1;
color: #fff;
font-weight: bold;
font-size: 0.1rem;
position: relative;
height: 0.62rem;
box-sizing: border-box;
}
.flowbottomSP .sideList li a:hover {
opacity: 0.7;
}
.flowbottomSP .sideList li a:after {
content: "";
width: 0.3rem;
height: 0.3rem;
position: absolute;
bottom: 0.07rem;
left: 0;
right: 0;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
}
.flowbottomSP .sideList li .mail {
background-position: center 0.07rem;
background-size: 0.31rem 0.22rem;
padding-top: 0.09rem;
padding-bottom: 0;
}
@media screen and (max-width: 460px) {
.flowbottomSP .sideList li .mail {
background-size: 0.31rem 0.235rem;
}
}
.flowbottomSP .sideList li .mail:after {
background-image: url(//renovation-r.co.jp/common/img/mail_icon.png);
}
.flowbottomSP .sideList li .address {
background-size: 0.3rem 0.3rem;
padding-top: 0.09rem;
padding-bottom: 0;
}
@media screen and (max-width: 460px) {
.flowbottomSP .sideList li .address {
background-size: 0.305rem 0.295rem;
}
}
.flowbottomSP .sideList li .address:after {
background-image: url(//renovation-r.co.jp/common/img/address_icon.png);
}
.flowbottomSP .sideList li .consult {
background-position: center 0.04rem;
background-size: 0.3rem 0.27rem;
padding-top: 0.09rem;
padding-bottom: 0;
}
@media screen and (max-width: 460px) {
.flowbottomSP .sideList li .consult {
background-size: 0.305rem 0.285rem;
line-height: 1.25;
}
}
.flowbottomSP .sideList li .consult:after {
background-image: url(//renovation-r.co.jp/common/img/consult_icon.png);
}
.flowbottomSP .sideList li:first-child a {
background: linear-gradient(to bottom, #f6c88f, #ed9220);
}
.flowbottomSP .menu .txt {
padding-top: 0.07rem;
font-size: 0.1rem;
color: #FFF;
font-weight: bold;
}
.flowbottomSP .menu .open {
height: 100%;
position: relative;
bottom: 0.14rem;
left: 0;
}
.flowbottomSPinview {
position: absolute;
top: 105vh;
bottom: 0;
pointer-events: none;
width: 0;
} .pagetopbtn {
position: fixed;
bottom: 60px;
right: 10px;
width: 44px;
height: 44px;
border-radius: 50%;
filter: opacity(0%);
pointer-events: none;
transition: filter 1s, opacity 0.2s;
background-color: #fff;
z-index: 999;
border: 2px solid #48c0c0;
}
.pagetopbtn.active {
filter: opacity(100%);
pointer-events: auto;
}
.no-touchevents .pagetopbtn:hover {
opacity: 0.6;
}
.pagetopbtn:before {
content: "\f106";
color: #48c0c0;
font-family: FontAwesome;
font-size: 0.24rem;
left: 50%;
position: absolute;
top: 45%;
transform: translate(-50%, -50%);
}
.pagetopbtnInview {
position: absolute;
top: 200vh;
bottom: 0;
pointer-events: none;
width: 0;
} .mod_header {
background-color: #FFF;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.mod_header .row01 .in {
width: 100%;
min-width: 1024px;
height: auto;
margin: auto;
padding-left: 0.3rem;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-right: 0.12rem;
border-bottom: 1px solid #CCC;
}
.mod_header .row01 .in .logo_wrap {
display: flex;
gap: 0.12rem;
}
.mod_header .row01 .in .logo {
margin-top: 0;
}
.mod_header .row01 .in .logo a img {
width: 2.69rem;
height: auto;
transition: 0.3s;
}
.mod_header .row01 .in .badge_15th img {
width: 1.73rem;
height: auto;
transition: 0.3s;
}
.mod_header .row01 .in .header-top {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.1rem;
padding-bottom: 0.26rem;
transition: 0.3s;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap {
display: flex;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .menu01 {
display: flex;
height: 100%;
align-items: center;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .menu01 li a {
font-size: 0.16rem;
letter-spacing: 0.05em;
font-weight: bold;
line-height: 1.2;
padding: 0 0.11rem;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .contact {
display: flex;
margin-left: 0.22rem;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .contact .contact_box_tel {
margin-right: 0.16rem;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .contact .contact_box_tel .txt {
font-size: 0.11rem;
letter-spacing: 0.04em;
font-weight: bold;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .contact .contact_box_tel .tel {
font-size: 0.3rem;
letter-spacing: 0;
position: relative;
font-family: "小塚ゴシック Pro", "Kozuka Gothic Pro", futura-pt-condensed, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, verdana, "メイリオ", "Meiryo", "Osaka", sans-serif-serif;
font-weight: 700;
padding-left: 0.43rem;
margin-top: -0.05rem;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .contact .contact_box_tel .tel:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
background-image: url(//renovation-r.co.jp/common/img/free_icon.png);
width: 0.34rem;
height: 0.2rem;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .contact .contact_btn {
display: flex;
align-items: center;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .contact .contact_btn a {
width: 1.23rem;
height: 0.38rem;
background-color: #2cb3b3;
background-size: contain;
background-position: 0 0;
display: flex;
align-items: center;
color: #FFF;
font-size: 0.14rem;
box-sizing: border-box;
padding-left: 0.26rem;
justify-content: center;
position: relative;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .contact .contact_btn a:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0.08rem;
margin: auto;
width: 0.2rem;
height: 0.2rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .contact .contact_btn.req {
margin-left: 0.04rem;
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .contact .contact_btn.req a:after {
background-image: url(//renovation-r.co.jp/common/img/mail_icon.png);
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .contact .contact_btn.inq a {
background: linear-gradient(to bottom, #f6c88f, #ed9220);
}
.mod_header .row01 .in .header-top .header-navMenuBox01 .wrap .contact .contact_btn.inq a:after {
background-image: url(//renovation-r.co.jp/common/img/consult_icon.png);
}
.mod_header .row01 .in .header-bottom {
width: 100%;
padding-bottom: 0.14rem;
}
.mod_header .row01 .in .header-bottom .menu02 {
display: flex;
justify-content: center;
}
.mod_header .row01 .in .header-bottom .menu02 li a {
font-size: 0.16rem;
line-height: 1;
letter-spacing: 0.05em;
font-weight: bold;
padding: 0 0.22rem;
border-left: 1px solid #000;
}
.mod_header .row01 .in .header-bottom .menu02 li:last-child a {
border-right: 1px solid #000;
}
.mod_header .row01 .in .wrapper {
line-height: 1;
letter-spacing: 0.05em;
font-weight: bold;
width: 73%;
max-width: 10.84rem;
}
@media screen and (max-width: 1100px) {
.mod_header .row01 .in .wrapper {
width: 77%;
}
}
.mod_header .row01 .in .wrapper .wrap {
display: flex;
justify-content: flex-end;
border: 1px solid #f2f2f2;
border-top: none;
max-width: 11rem;
float: right;
}
.mod_header .row01 .in .wrapper .wrap .navMenu01 {
padding: 0.145rem 0;
margin-left: 0.15rem;
}
.mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li {
display: inline-block;
margin-right: 0.15rem;
line-height: 1.2;
}
@media screen and (max-width: 1439px) {
.mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li {
line-height: 1.1;
}
}
@media screen and (max-width: 1365px) {
.mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li {
line-height: 1;
}
}
@media screen and (max-width: 1279px) {
.mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li {
line-height: 1.2;
}
}
@media screen and (max-width: 1100px) {
.mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li {
margin-right: 0.09rem;
}
}
.mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li a {
font-size: 0.14rem;
color: #999;
}
.mod_header .row01 .in .wrapper .wrap .contact {
display: flex;
}
.mod_header .row01 .in .wrapper .wrap .contact .txt {
font-size: 0.14rem;
vertical-align: top;
padding: 0.155rem 0;
}
.mod_header .row01 .in .wrapper .wrap .contact .tel {
font-family: futura-pt-condensed, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, verdana, "メイリオ", "Meiryo", "Osaka", sans-serif-serif;
font-weight: 700;
font-size: 0.28rem;
letter-spacing: 0.05em;
margin: 0 0.18rem 0 0.15rem;
vertical-align: top;
padding: 0.085rem 0;
width: 1.46rem;
height: 0.35rem;
overflow: hidden;
font-display: auto;
}
@media screen and (max-width: 460px) {
.mod_header .row01 .in .wrapper .wrap .contact .tel {
cursor: pointer;
}
}
.mod_header .row01 .in .wrapper .wrap .contact .tel a:hover {
opacity: 1;
}
.mod_header .row01 .in .wrapper .wrap .contact .snsList {
display: flex;
font-size: 0;
}
.mod_header .row01 .in .wrapper .wrap .contact .snsList .snsItem {
width: 0.45rem;
height: 0.45rem; }
.mod_header .row01 .in .wrapper .wrap .contact .snsList .snsItem a {
display: block;
width: 1005;
height: 100%;
position: relative;
}
.mod_header .row01 .in .wrapper .wrap .contact .snsList .snsItem a:after {
font-family: FontAwesome;
font-size: 0.25rem;
line-height: 1;
position: absolute;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.mod_header .row01 .in .wrapper .wrap .contact .snsList .fb {
background: #0086cd;
}
.mod_header .row01 .in .wrapper .wrap .contact .snsList .fb a:after {
content: "\f09a";
}
.mod_header .row01 .in .wrapper .wrap .contact .snsList .tw {
background: #007cbe;
}
.mod_header .row01 .in .wrapper .wrap .contact .snsList .tw a:after {
content: "\f099";
}
.mod_header .row01 .in .wrapper .wrap .contact .snsList .ins {
background: #0071ad;
}
.mod_header .row01 .in .wrapper .wrap .contact .snsList .ins a:after {
content: "\f16d";
}
.mod_header .row01 .in .wrapper .navMenu02 {
padding-top: 0.23rem;
clear: both;
}
.mod_header .row01 .in .wrapper .navMenu02 .menu02 {
display: flex;
justify-content: space-between;
margin-right: 0.3rem;
}
.mod_header .row01 .in .wrapper .navMenu02 .menu02 .item {
font-size: 0.16rem;
}
.mod_header .row02 {
background-color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 1000;
padding-left: 0.15rem;
box-sizing: border-box;
}
@media screen and (max-width: 460px) {
.mod_header .row02 .logo img {
vertical-align: top;
position: relative;
top: 0.1rem;
}
}
@media screen and (max-width: 460px) {
.mod_header .row02 .badge_15th {
position: absolute;
bottom: -0.28rem;
left: 0;
}
}
@media screen and (max-width: 460px) {
.mod_header .row02 .badge_15th img {
width: 1.2rem;
height: 0.28rem;
}
}
.mod_header .row02 .tel_icon {
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
.mod_header .row02 .tel_icon .tel {
display: block;
width: 50px;
height: 50px;
position: relative;
background-color: #48c0c0;
}
.mod_header .row02 .tel_icon .tel:after {
content: "";
position: absolute;
background-image: url(//renovation-r.co.jp/common/img/tel_icon.png);
width: 22px;
height: 22px;
top: 6px;
left: 0;
right: 0;
background-size: cover;
margin: auto;
}
.mod_header .row02 .tel_icon .txt {
position: absolute;
left: 0;
bottom: 4px;
width: 50px;
text-align: center;
font-size: 0.12rem;
line-height: 1.25;
color: #fff;
font-weight: bold;
}
.mod_header .row02 .tel_icon .txt:after {
content: "";
position: absolute;
bottom: 0.09rem;
left: -0.24rem;
margin: auto;
background-image: url(//renovation-r.co.jp/common/img/free_icon.png);
width: 0.22rem;
height: 0.13rem;
background-size: contain;
}
.mod_header .row02 .tel_icon .ttl {
margin-left: -0.12rem;
}
.mod_header .row03 {
background-color: #FFF;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: auto;
opacity: 0;
z-index: 1000;
pointer-events: none;
transition: opacity 0.6s;
margin-top: 50px;
border-top: 1px solid #f2f2f2;
}
.mod_header .row03.active {
opacity: 1;
pointer-events: auto;
}
.mod_header .row03 .navMenu01 li {
text-align: center;
font-size: 0.13rem;
font-weight: bold;
line-height: 1;
letter-spacing: 0.05em;
padding: 0.14rem 0;
border-bottom: 1px solid #f2f2f2;
}
@media screen and (max-width: 350px) {
.mod_header .row03 .navMenu01 li {
padding: 0.12rem 0;
font-size: 0.11rem;
}
}
.mod_header .row03 .navMenu01 .current {
color: #000000;
}
@media screen and (max-width: 460px) {
.mod_header .row03 .navMenu02 {
display: flex;
flex-wrap: wrap;
}
}
.mod_header .row03 .navMenu02 li {
text-align: center;
font-size: 0.13rem;
font-weight: bold;
line-height: 1;
letter-spacing: 0.05em;
padding: 0.14rem 0;
border-bottom: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
width: 49.24%;
display: inline-block;
color: #000000;
}
@media screen and (max-width: 460px) {
.mod_header .row03 .navMenu02 li {
box-sizing: border-box;
width: 50%;
}
}
@media screen and (max-width: 350px) {
.mod_header .row03 .navMenu02 li {
padding: 0.12rem 0;
font-size: 0.11rem;
width: 49.1%;
}
}
.mod_header .row03 .navMenu02 .current {
color: #999;
}
.mod_header .row03 .contact {
text-align: center;
line-height: 1;
letter-spacing: 0.05em;
padding: 0.25rem 0;
}
@media screen and (max-width: 350px) {
.mod_header .row03 .contact {
padding: 0.08rem 0 0.08rem;
}
}
.mod_header .row03 .contact .txt {
font-size: 0.12rem;
font-weight: bold;
}
@media screen and (max-width: 350px) {
.mod_header .row03 .contact .txt {
font-size: 0.11rem;
}
}
.mod_header .row03 .contact .tel {
font-family: futura-pt-condensed, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, verdana, "メイリオ", "Meiryo", "Osaka", sans-serif-serif;
font-weight: 700;
font-size: 0.3rem;
margin-top: 0.15rem;
border-bottom: 1px solid #f2f2f2;
padding-bottom: 0.25rem;
width: 1.59rem;
height: 0.42rem;
overflow: hidden;
margin: 0 auto;
font-display: auto;
}
@media screen and (max-width: 350px) {
.mod_header .row03 .contact .tel {
font-size: 0.23rem;
margin-top: 0.12rem;
padding-bottom: 0.12rem;
width: 1.13rem;
height: 0.3rem;
overflow: hidden;
}
}
.mod_header .row03 .contact .sns {
margin-top: 0.2rem;
}
@media screen and (max-width: 350px) {
.mod_header .row03 .contact .sns {
margin-top: 0.1rem;
}
}
.mod_header .row03 .contact .sns li {
height: 0.3rem;
width: 0.3rem;
display: inline-block;
}
.mod_header .row03 .contact .sns li + li {
margin-left: 0.1rem;
}
.mod_header .row03 .contact .sns li a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.mod_header .row03 .contact .sns li a:after {
font-family: FontAwesome;
font-size: 0.25rem;
line-height: 1;
position: absolute;
color: #0086cd;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.mod_header .row03 .contact .sns li .fb:after {
content: "\f09a";
}
.mod_header .row03 .contact .sns li .tw:after {
content: "\f099";
}
.mod_header .row03 .contact .sns li .ins:after {
content: "\f16d";
}
.mod_header .menu {
width: 50px;
height: 50px;
position: fixed;
top: 0;
right: 0;
background-color: #0086cd;
z-index: 1000;
}
.mod_header .menu .open .bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 25px;
height: 2px;
margin: auto;
background-color: #fff;
transition: 0.3s;
}
.mod_header .menu .open .bar:nth-child(1) {
top: -16px;
}
.mod_header .menu .open .bar:nth-child(3) {
bottom: -16px;
}
.mod_header .menu .close .bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 0;
height: 2px;
margin: auto;
background-color: #fff;
transition: 0.3s;
}
.mod_header .menu .close .bar:nth-child(1) {
transform: rotate(45deg);
}
.mod_header .menu .close .bar:nth-child(2) {
transform: rotate(-45deg);
}
.mod_header .menu.active .open .bar {
width: 0;
}
.mod_header .menu.active .close .bar {
width: 24px;
bottom: -0.2rem;
}
.nav_min .mod_header .row01 .in .logo img {
width: 2.3rem;
}
.nav_min .mod_header .row01 .in .header-top {
padding-top: 0.05rem;
padding-bottom: 0.1rem;
transition: 0.3s;
}
.nav_min .mod_header .row01 .in .header-bottom {
padding-bottom: 0.1rem;
transition: 0.3s;
}
.footerArea .inforArea {
background: #178888;
border-bottom: 1px solid #2cb3b3;
}
.footerArea .inforArea .group {
padding: 0.42rem 0 0.39rem;
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group {
box-sizing: border-box;
padding: 0.42rem 5.33% 0.37rem;
}
}
.footerArea .inforArea .group .top {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .top {
flex-direction: column;
}
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .top .logo {
text-align: center;
}
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .top .logo img {
height: 0.35rem;
width: 2.425rem;
}
}
.footerArea .inforArea .group .linkArea {
display: flex;
padding: 0 0 0 0.15rem;
border: 1px solid #2cb3b3;
box-sizing: border-box;
height: 0.5rem;
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .linkArea {
width: 100%;
padding: 0;
flex-wrap: wrap;
height: auto;
}
}
.footerArea .inforArea .group .linkArea .item {
text-align: center;
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .linkArea .item {
padding-left: 0.15rem;
box-sizing: border-box;
}
}
.footerArea .inforArea .group .linkArea .item .link {
color: #fff;
font-size: 0.14rem;
display: block;
font-weight: bold;
position: relative;
line-height: 0.48rem;
padding-left: 0.1rem;
letter-spacing: 0.05em;
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .linkArea .item .link {
font-size: 0.12rem;
line-height: 0.48rem;
padding-left: 0.3rem;
}
}
@media screen and (max-width: 350px) {
.footerArea .inforArea .group .linkArea .item .link {
padding-left: 0.2rem;
}
}
.footerArea .inforArea .group .linkArea .item .link:before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
.footerArea .inforArea .group .linkArea .item .link:hover {
opacity: 0.7;
}
.footerArea .inforArea .group .linkArea .item1 {
width: 1.8rem;
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .linkArea .item1 {
width: 45%;
}
}
.footerArea .inforArea .group .linkArea .item1 .link:before {
background: url(//renovation-r.co.jp/common/img/mail_icon.png);
background-size: cover;
background-repeat: no-repeat;
height: 0.23rem;
width: 0.31rem;
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .linkArea .item1 .link:before {
height: 0.175rem;
width: 0.225rem;
}
}
.footerArea .inforArea .group .linkArea .item1 .link:after {
content: "";
position: absolute;
right: 0.3rem;
background: #2cb3b3;
height: 0.3rem;
width: 1px;
top: 50%;
transform: translate(0, -50%);
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .linkArea .item1 .link:after {
right: -0.03rem;
}
}
.footerArea .inforArea .group .linkArea .item2 {
width: 1.755rem;
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .linkArea .item2 {
width: 50%;
}
}
.footerArea .inforArea .group .linkArea .item2 .link:before {
background: url(//renovation-r.co.jp/common/img/address_icon.png);
background-size: cover;
background-repeat: no-repeat;
height: 0.29rem;
width: 0.31rem;
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .linkArea .item2 .link:before {
height: 0.215rem;
width: 0.225rem;
}
}
.footerArea .inforArea .group .linkArea .item2 .link:after {
content: "";
position: absolute;
right: 0.3rem;
background: #2cb3b3;
height: 0.3rem;
width: 1px;
top: 50%;
transform: translate(0, -50%);
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .linkArea .item2 .link:after {
right: -0.03rem;
display: none;
}
}
.footerArea .inforArea .group .linkArea .item3 {
width: 2.2368rem;
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .linkArea .item3 {
width: 55%;
}
}
.footerArea .inforArea .group .linkArea .item3 .link {
padding-left: 0.25rem;
}
.footerArea .inforArea .group .linkArea .item3 .link:before {
background: url(//renovation-r.co.jp/common/img/consult_icon.png);
background-size: cover;
background-repeat: no-repeat;
height: 0.29rem;
width: 0.33rem;
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .linkArea .item3 .link:before {
height: 0.205rem;
width: 0.225rem;
}
}
.footerArea .inforArea .group .info {
color: #fff;
font-size: 0.16rem;
letter-spacing: 0.05em;
line-height: 1.75;
margin-top: 0.25rem;
}
@media screen and (max-width: 460px) {
.footerArea .inforArea .group .info {
font-size: 0.13rem;
line-height: 1.538;
margin: 0.2rem 0 0.27rem;
text-align: center;
letter-spacing: 0.003rem;
}
}
.footerArea .pageArea {
background: #178888;
}
.footerArea .pageArea .list {
padding: 0.38rem 0.6rem 0.36rem;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
@media print, screen and (min-width: 461px) {
.footerArea .pageArea .list {
justify-content: center;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list {
padding: 0.26rem 5.33% 0.34rem;
}
}
.footerArea .pageArea .list .item {
margin: 0 0.15rem;
line-height: 2.1;
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item {
margin: 0 0 0.04rem 0;
width: 50%;
}
}
.footerArea .pageArea .list .item .link {
color: #fff;
font-size: 0.14rem;
display: block;
font-weight: bold;
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item .link {
font-size: 0.12rem;
}
}
.footerArea .pageArea .list .item .link:hover {
opacity: 0.7;
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item1 {
order: 1;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item2 {
order: 3;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item3 {
order: 5;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item4 {
order: 7;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item5 {
order: 9;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item6 {
order: 11;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item7 {
order: 13;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item8 {
order: 2;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item9 {
order: 4;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item10 {
order: 6;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item11 {
order: 8;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item12 {
order: 10;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item13 {
order: 12;
}
}
@media screen and (max-width: 460px) {
.footerArea .pageArea .list .item14 {
order: 14;
}
}
.footerArea .sosialArea {
background: #2cb3b3;
border-bottom: 1px solid #178888;
}
.footerArea .sosialArea .sosial {
display: flex;
padding: 0.38rem 0;
}
@media screen and (max-width: 460px) {
.footerArea .sosialArea .sosial {
box-sizing: border-box;
padding: 0.32rem 5.33% 0.31rem;
flex-direction: column;
}
}
.footerArea .sosialArea .sosial .item {
width: 3.8rem;
}
@media screen and (max-width: 460px) {
.footerArea .sosialArea .sosial .item {
width: 100%;
}
}
.footerArea .sosialArea .sosial .item + .item {
margin-left: 0.3rem;
}
@media screen and (max-width: 460px) {
.footerArea .sosialArea .sosial .item + .item {
margin-left: 0;
margin-top: 0.265rem;
}
}
.footerArea .sosialArea .sosial .item .ttl {
color: #fff;
font-size: 0.2rem;
display: block;
font-weight: bold;
margin-bottom: 0.2rem;
letter-spacing: 0.05em;
}
@media screen and (max-width: 460px) {
.footerArea .sosialArea .sosial .item .ttl {
font-size: 0.12rem;
margin-bottom: 0.17rem;
}
}
.footerArea .sosialArea .sosial .item .insta, .footerArea .sosialArea .sosial .item .youtube {
width: 100%;
}
.footerArea .sosialArea .sosial .item .insta .ph img, .footerArea .sosialArea .sosial .item .youtube .ph img {
height: 1.4rem;
width: auto;
}
@media screen and (max-width: 460px) {
.footerArea .sosialArea .sosial .item .insta .ph img, .footerArea .sosialArea .sosial .item .youtube .ph img {
height: 1.24rem;
width: 100%;
}
}
.footerArea .sosialArea .sosial .item .youtube {
margin-top: 0.34rem;
margin-top: 0;
}
@media screen and (max-width: 460px) {
.footerArea .sosialArea .sosial .item .youtube {
margin-top: 0.26rem;
}
}
@media screen and (max-width: 460px) {
.footerArea .sosialArea .sosial .note {
margin-top: 0.18rem !important;
}
}
.footerArea .fbArea {
width: 100% !important;
padding: 12px 0.12rem !important;
background: #fff;
overflow: hidden;
}
@media print, screen and (min-width: 461px) {
.footerArea .fbArea {
box-sizing: border-box;
}
}
@media screen and (max-width: 460px) {
.footerArea .fbArea {
margin: 0 auto;
width: 95% !important;
border: 0.08rem solid #fff;
padding: 0 !important;
}
}
.footerArea { }
.footerArea .twitter iframe {
padding: 0 0.12rem !important;
background: #fff;
box-sizing: border-box;
}
@media screen and (max-width: 460px) {
.footerArea .twitter iframe {
height: 3.35 !important;
padding: 0.09rem !important;
width: 100% !important;
box-sizing: border-box;
}
}
.footerArea .copyArea {
background: #2cb3b3;
padding: 0.23rem 0;
}
@media screen and (max-width: 460px) {
.footerArea .copyArea {
box-sizing: border-box;
padding: 0.16rem 0;
margin-bottom: 0.62rem;
}
}
.footerArea .copyArea .copy {
color: #fff;
font-size: 0.14rem;
font-weight: bold;
text-align: center;
}
@media screen and (max-width: 460px) {
.footerArea .copyArea .copy {
font-size: 0.12rem;
}
}
.side_navi {
position: fixed;
top: 1.7rem;
right: 0;
z-index: 10000;
width: 1.1rem;
text-align: center;
color: #fff;
font-size: 0.14rem;
font-weight: bold;
line-height: 1;
letter-spacing: 0.05em;
}
.side_navi .reform {
background: #48c0c0;
box-sizing: border-box;
line-height: 1.28;
padding: 0.18rem 0 0.14rem;
font-size: 0.13rem;
}
.side_navi .reform a {
background-size: 0.43rem 0.49rem;
padding-top: 0.64rem;
background-position: top center;
display: block;
letter-spacing: 0.01rem;
}
.side_navi .sideList {
background: #2cb3b3;
box-sizing: border-box;
padding: 0.07rem 0;
margin-top: 0.3rem;
}
.side_navi .sideList li {
border-bottom: 1px solid #4dabdc;
padding: 0.2rem 0;
}
.side_navi .sideList li a {
background-position: top center;
display: block;
}
.side_navi .sideList li .mail {
background-size: 0.43rem 0.32rem;
padding-top: 0.47rem;
}
.side_navi .sideList li .address {
background-size: 0.43rem 0.4rem;
padding-top: 0.52rem;
}
.side_navi .sideList li .consult {
background-size: 0.43rem 0.38rem;
padding-top: 0.5rem;
line-height: 1.4;
}
.side_navi .sideList li:last-child {
border-bottom: none;
}
.menu {
width: 33.3333333333%;
height: 0.62rem;
position: fixed;
bottom: 0;
right: 0;
background-color: #178888;
z-index: 1000;
}
.menu .open .bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 25px;
height: 2px;
margin: auto;
background-color: #fff;
transition: 0.3s;
}
.menu .open .bar:nth-child(1) {
top: -16px;
}
.menu .open .bar:nth-child(3) {
bottom: -16px;
}
.menu .close {
position: relative;
height: 100%;
bottom: auto;
left: 0;
top: -0.76rem;
}
.menu .close .bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 0;
height: 2px;
margin: auto;
background-color: #fff;
transition: 0.3s;
}
.menu .close .bar:nth-child(1) {
transform: rotate(45deg);
}
.menu .close .bar:nth-child(2) {
transform: rotate(-45deg);
}
.menu.active .open .bar {
width: 0;
}
.menu.active .close .bar {
width: 24px;
}
.mod_w1210 {
margin: 0 auto;
width: 12.1rem;
}
@media screen and (max-width: 460px) {
.mod_w1210 {
box-sizing: border-box;
padding: 0 0.2rem;
width: 100%;
}
}
.mod_w1200 {
margin: 0 auto;
width: 12rem;
}
@media screen and (max-width: 460px) {
.mod_w1200 {
box-sizing: border-box;
padding: 0 0.2rem;
width: 100%;
}
}
.mod_w1040 {
margin: 0 auto;
width: 10.4rem;
}
@media screen and (max-width: 460px) {
.mod_w1040 {
box-sizing: border-box;
margin: 0 0.2rem;
width: auto;
}
}
.mod_w960 {
margin: 0 auto;
width: 9.6rem;
}
@media screen and (max-width: 460px) {
.mod_w960 {
box-sizing: border-box;
padding: 0 0.2rem;
width: 100%;
}
}
.breadcrumb {
position: relative;
z-index: 2;
}
.breadcrumb ul li {
color: #666;
font-size: 0.13rem;
line-height: 1;
letter-spacing: 0.1em;
position: relative;
display: inline-block;
}
@media screen and (max-width: 460px) {
.breadcrumb ul li {
font-size: 0.12rem;
line-height: 1.66666;
letter-spacing: 0;
}
}
.breadcrumb ul li:after {
content: "\f105";
font-family: FontAwesome;
position: absolute;
font-size: 0.18rem;
top: 41%;
right: -0.16rem;
transform: translate(0%, -50%);
}
@media screen and (max-width: 460px) {
.breadcrumb ul li:after {
font-size: 0.16rem;
right: -0.12rem;
}
}
.breadcrumb ul li:last-child:after {
display: none;
}
.breadcrumb ul li a {
border-bottom: 1px solid;
}
.breadcrumb ul li + li {
margin-left: 0.22rem;
}
@media screen and (max-width: 460px) {
.breadcrumb ul li + li {
margin-left: 0.17rem;
}
}
.subtitle {
font-family: aktiv-grotesk, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, verdana, "メイリオ", "Meiryo", "Osaka", sans-serif-serif;
font-weight: 700;
font-size: 0.6rem;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
position: relative;
padding-left: 0.6rem;
}
@media screen and (max-width: 460px) {
.subtitle {
font-size: 0.3rem;
padding-left: 0.3rem;
position: relative;
z-index: 2;
}
}
.subtitle:after {
background: url(/common/img/ie_icon_gray.png);
background-size: cover;
content: "";
height: 1.02rem;
left: 0;
position: absolute;
top: -0.82rem;
width: 1.1rem;
}
@media screen and (max-width: 460px) {
.subtitle:after {
height: 0.51rem;
top: -0.42rem;
width: 0.55rem;
}
}
.title {
font-size: 0.18rem;
line-height: 1;
letter-spacing: 0.1em;
margin-top: 0.06rem;
padding-left: 0.6rem;
}
@media screen and (max-width: 460px) {
.title {
font-size: 0.13rem;
padding-left: 0.3rem;
}
}
.mod-btn {
line-height: 0.45rem;
text-align: center;
width: 2.6rem;
}
@media screen and (max-width: 460px) {
.mod-btn {
line-height: 0.5rem;
width: 100%;
}
}
.mod-btn a {
background: #178888;
color: #fff;
display: block;
font-size: 0.18rem;
font-weight: bold;
position: relative;
}
@media screen and (max-width: 460px) {
.mod-btn a {
font-size: 0.13rem;
}
}
.line {
height: 1px;
position: relative;
width: 100%;
}
.line:before {
border-radius: 50%;
background: #000;
content: "";
height: 0.06rem;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0.06rem;
}
@media screen and (max-width: 460px) {
.line:before {
height: 0.04rem;
width: 0.04rem;
}
}
.line:after {
border-radius: 50%;
background: #000;
content: "";
height: 0.06rem;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 0.06rem;
}
@media screen and (max-width: 460px) {
.line:after {
height: 0.04rem;
width: 0.04rem;
}
}
.slick-prev, .slick-next {
background: #999;
height: 0.5rem;
width: 0.5rem;
}
@media screen and (max-width: 460px) {
.slick-prev, .slick-next {
height: 0.25rem;
width: 0.25rem;
}
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
background: #999;
opacity: 0.7;
}
.slick-prev {
left: -0.57rem;
}
@media screen and (max-width: 460px) {
.slick-prev {
left: -0.16rem;
}
}
.slick-prev:before {
content: "\f104";
font-family: FontAwesome;
font-size: 0.2rem;
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
@media screen and (max-width: 460px) {
.slick-prev:before {
font-size: 0.15rem;
}
}
.slick-next {
right: -0.57rem;
}
@media screen and (max-width: 460px) {
.slick-next {
right: -0.16rem;
}
}
.slick-next:before {
content: "\f105";
font-family: FontAwesome;
font-size: 0.2rem;
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
@media screen and (max-width: 460px) {
.slick-next:before {
font-size: 0.15rem;
}
}
.conceptArea .in {
position: relative;
}
@media screen and (max-width: 460px) {
.conceptArea .in .list {
margin-top: 0.5rem;
}
}
.conceptArea .in .list .item .l-left {
display: inline-block;
vertical-align: bottom;
}
@media screen and (max-width: 460px) {
.conceptArea .in .list .item .l-left {
display: block;
width: 100%;
}
}
.conceptArea .in .list .item .l-left .ph {
height: 3.2rem;
width: 5.7rem;
}
@media screen and (max-width: 460px) {
.conceptArea .in .list .item .l-left .ph {
height: 1.87rem;
width: 100%;
}
}
.conceptArea .in .list .item .l-right {
height: 3.2rem;
letter-spacing: 0.1em;
width: 5.9rem;
}
@media print, screen and (min-width: 461px) {
.conceptArea .in .list .item .l-right {
float: right;
}
}
@media screen and (max-width: 460px) {
.conceptArea .in .list .item .l-right {
height: auto;
margin-top: -0.05rem;
width: 100%;
}
}
@media screen and (max-width: 1366px) {
.conceptArea .in .list .item .l-right .point img {
height: 1.2rem;
width: auto;
}
}
@media screen and (max-width: 460px) {
.conceptArea .in .list .item .l-right .point img {
height: 0.73rem;
width: auto;
}
}
.conceptArea .in .list .item .l-right .tit {
font-size: 0.24rem;
line-height: 1;
margin-top: -0.05rem;
padding-left: 0.45rem;
line-height: 1.4;
}
@media screen and (max-width: 460px) {
.conceptArea .in .list .item .l-right .tit {
font-size: 0.15rem;
padding-left: 0.22rem;
margin-top: -0.09rem;
}
}
.conceptArea .in .list .item .l-right .txt {
font-size: 0.17rem;
line-height: 1.764;
margin-top: 0.25rem;
padding-left: 0.45rem;
text-align: justify;
color: #333;
width: 4.4rem;
}
@media screen and (max-width: 460px) {
.conceptArea .in .list .item .l-right .txt {
font-size: 0.13rem;
line-height: 1.538;
margin-top: 0.15rem;
padding-left: 0;
width: auto;
}
}
.conceptArea .in .list .item:nth-child(2) {
margin: 0.65rem 0;
}
@media screen and (max-width: 460px) {
.conceptArea .in .list .item:nth-child(2) {
margin: 0.35rem 0;
}
}
@media print, screen and (min-width: 461px) {
.conceptArea .in .list .item:nth-child(2) .l-left {
float: right;
}
}
.conceptArea .in .list .item:nth-child(2) .l-right {
float: none;
}
@media screen and (max-width: 460px) {
.conceptArea .subtitle:after {
top: -0.38rem;
}
}
.caseArea {
background-size: 100% 3.77rem;
background-position: top left;
padding: 1.05rem 0 1.2rem;
margin-top: 0.8rem;
}
@media screen and (max-width: 460px) {
.caseArea {
background-size: 100% 1.95rem;
padding: 0.44rem 0 0.5rem;
margin-top: 0.5rem;
}
}
.caseArea .subtitle {
padding: 0;
}
.caseArea .subtitle:after {
display: none;
}
.caseArea .title {
margin: 0.15rem 0 0.25rem;
padding: 0;
}
@media screen and (max-width: 460px) {
.caseArea .title {
margin: 0.08rem 0 0.2rem;
}
}
.caseArea .line {
background: #000;
}
.caseArea .listCase {
margin: 0.7rem auto 0;
width: 12.33rem;
}
@media screen and (max-width: 460px) {
.caseArea .listCase {
box-sizing: border-box;
margin: 0.3rem auto 0;
padding: 0 0.2rem;
width: auto;
}
}
.caseArea .listCase .slick-slide {
box-sizing: border-box;
padding: 0 0.115rem;
}
@media screen and (max-width: 460px) {
.caseArea .listCase .slick-slide {
padding: 0 0.15rem;
}
}
.caseArea .listCase .slick-prev {
left: -0.6rem;
}
@media screen and (max-width: 460px) {
.caseArea .listCase .slick-prev {
left: 0.05rem;
}
}
.caseArea .listCase .slick-next {
right: -0.6rem;
}
@media screen and (max-width: 460px) {
.caseArea .listCase .slick-next {
right: 0.05rem;
}
}
.caseArea .listCase .itemCase {
display: inline-block;
border: 1px solid #f2f2f2;
}
.caseArea .listCase .itemCase + .itemCase {
margin-left: 0.265rem;
}
.caseArea .listCase .itemCase .ph img {
height: 1.9rem;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
@media screen and (max-width: 460px) {
.caseArea .listCase .itemCase .ph img {
height: 2.03rem;
}
}
.caseArea .listCase .itemCase .content {
font-size: 0.17rem;
line-height: 1;
letter-spacing: 0.05em;
padding: 0.3rem;
}
@media screen and (max-width: 460px) {
.caseArea .listCase .itemCase .content {
font-size: 0.12rem;
padding: 0.2rem 0.15rem 0.25rem;
}
}
.caseArea .listCase .itemCase .content .date {
color: #9b9b9b;
}
.caseArea .listCase .itemCase .content .cap {
font-size: 0.24rem;
margin: 0.1rem 0 0.16rem;
}
@media screen and (max-width: 460px) {
.caseArea .listCase .itemCase .content .cap {
font-size: 0.2rem;
margin: 0.05rem 0 0.1rem;
}
}
.caseArea .listCase .itemCase .content .price {
border-bottom: 1px solid #f2f2f2;
margin: 0 0 0.25rem;
padding-bottom: 0.25rem;
font-feature-settings: "palt";
font-size: 0.16rem;
font-weight: normal;
}
@media screen and (max-width: 460px) {
.caseArea .listCase .itemCase .content .price {
font-size: 0.14rem;
margin: 0 0 0.2rem;
padding-bottom: 0.18rem;
}
}
.caseArea .listCase .itemCase .content .list li {
color: #666;
position: relative;
padding-left: 0.1rem;
}
@media screen and (max-width: 460px) {
.caseArea .listCase .itemCase .content .list li {
font-size: 0.13rem;
}
}
.caseArea .listCase .itemCase .content .list li + li {
margin-top: 0.1rem;
}
@media screen and (max-width: 460px) {
.caseArea .listCase .itemCase .content .list li + li {
margin-top: 0.07rem;
}
}
.caseArea .listCase .itemCase .content .list li:before {
content: "";
background: #333;
height: 0.03rem;
width: 0.03rem;
border-radius: 50%;
position: absolute;
top: 0.085rem;
transform: translateY(-50%);
left: 0;
}
.caseArea .mod-btn {
line-height: 0.46rem;
margin: 0.5rem auto 0;
width: 3.4rem;
}
@media screen and (max-width: 460px) {
.caseArea .mod-btn {
line-height: 0.48rem;
margin: 0.4rem auto 0;
width: 100%;
}
}
.caseArea .mod-btn.add {
width: 4rem;
line-height: 0.6rem;
}
@media screen and (max-width: 460px) {
.caseArea .mod-btn.add {
line-height: 0.5rem;
width: 100%;
}
}
.caseArea .mod-btn.add a {
font-size: 0.2rem;
}
@media screen and (max-width: 460px) {
.caseArea .mod-btn.add a {
font-size: 0.15rem;
}
}
.caseArea.bgWhite {
padding-bottom: 0.6rem;
}
@media screen and (max-width: 460px) {
.caseArea.bgWhite {
padding-bottom: 0.25rem;
}
}
.contentsArea {
background: #e8e7e5;
padding: 1.15rem 0 1.13rem;
position: relative;
}
@media screen and (max-width: 460px) {
.contentsArea {
padding: 0.78rem 0 0.5rem;
}
}
.contentsArea:after {
background: #e1e0de;
content: "";
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
@media screen and (max-width: 460px) {
.contentsArea:after {
display: none;
}
}
.contentsArea .subtitle:after {
background: url(/common/img/ie_icon_white.png);
background-size: cover;
}
.contentsArea .list {
margin-top: 0.69rem;
position: relative;
z-index: 2;
}
@media screen and (max-width: 460px) {
.contentsArea .list {
margin-top: 0.29rem;
}
}
.contentsArea .list .item {
display: inline-block;
width: 3.8rem;
}
@media screen and (max-width: 460px) {
.contentsArea .list .item {
display: flex;
width: 100%;
}
}
.contentsArea .list .item + .item {
margin-left: 0.3rem;
}
@media screen and (max-width: 460px) {
.contentsArea .list .item + .item {
margin: 0.11rem 0 0 0;
}
}
.contentsArea .list .item a {
display: block;
}
@media screen and (max-width: 460px) {
.contentsArea .list .item a {
display: flex;
}
}
.contentsArea .list .item .ph {
align-items: center;
color: #fff;
display: flex;
justify-content: center;
font-size: 0.2rem;
font-weight: bold;
height: 2.41rem;
line-height: 1;
width: 100%;
}
@media screen and (max-width: 460px) {
.contentsArea .list .item .ph {
font-size: 0.13rem;
height: 100%;
width: 53.5%;
}
}
.contentsArea .list .item .txt {
background: #fff;
color: #666666;
font-size: 0.17rem;
line-height: 1.76;
padding: 0.25rem;
}
@media screen and (max-width: 460px) {
.contentsArea .list .item .txt {
font-size: 0.13rem;
line-height: 1.538;
padding: 0.142rem 0.18rem;
width: 46.5%;
}
}
@media screen and (max-width: 350px) {
.contentsArea .list .item .txt {
padding: 0.142rem;
}
}
.bannerArea {
padding: 0.7rem 0 0.3rem;
background: #f7f6f5;
position: relative;
}
@media screen and (max-width: 460px) {
.bannerArea {
padding: 0.41rem 0 0.18rem;
}
}
@media screen and (max-width: 460px) {
.bannerArea .mod_w1210 {
padding: 0;
}
}
.bannerArea:after {
background: #f0efed;
content: "";
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.bannerArea .mv {
margin-bottom: 0.28rem;
padding: 0.6rem 0;
position: relative;
z-index: 2;
}
@media screen and (max-width: 460px) {
.bannerArea .mv {
margin-bottom: 0.18rem;
padding: 0.3rem 0;
}
}
.bannerArea .mv .head {
background: #fff;
margin: 0 auto;
padding: 0.33rem 0 0.29rem;
text-align: center;
width: 4.6rem;
width: 5.2rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 460px) {
.bannerArea .mv .head {
padding: 0.24rem 0 0.18rem;
width: 2.8rem;
}
}
.bannerArea .mv .head .subtitle {
display: inline-block;
padding: 0;
order: 2;
}
@media print, screen and (min-width: 461px) {
.bannerArea .mv .head .subtitle {
font-size: 0.5rem;
margin-top: 0.1rem;
font-size: 0.18rem;
width: 100%;
}
}
@media screen and (max-width: 460px) {
.bannerArea .mv .head .subtitle {
font-size: 0.16rem;
margin-top: 0.04rem;
width: 100%;
}
}
.bannerArea .mv .head .subtitle:after {
display: none;
height: 0.7rem;
left: -0.4rem;
top: -0.55rem;
width: 0.75rem;
}
@media screen and (max-width: 460px) {
.bannerArea .mv .head .subtitle:after {
height: 0.51rem;
left: -0.29rem;
top: -0.4rem;
width: 0.55rem;
}
}
.bannerArea .mv .head .title {
margin-top: 0.1rem;
padding: 0;
margin-top: 0;
font-size: 0.44rem;
order: 1;
position: relative;
letter-spacing: 0.01em;
font-weight: 700;
}
@media screen and (max-width: 460px) {
.bannerArea .mv .head .title {
font-size: 0.24rem;
}
}
.bannerArea .mv .head .title:after {
background: url(/common/img/ie_icon_gray.png);
background-size: cover;
content: "";
height: 1.02rem;
left: 0;
position: absolute;
top: -0.82rem;
width: 1.1rem;
}
@media screen and (max-width: 460px) {
.bannerArea .mv .head .title:after {
height: 0.51rem;
top: -0.42rem;
width: 0.55rem;
}
}
.bannerArea .mv .head .title:after {
height: 0.7rem;
left: -0.4rem;
top: -0.55rem;
width: 0.75rem;
}
@media screen and (max-width: 460px) {
.bannerArea .mv .head .title:after {
height: 0.51rem;
left: -0.29rem;
top: -0.4rem;
width: 0.55rem;
}
}
@media screen and (max-width: 460px) {
.bannerArea .breadcrumb {
padding: 0 0.2rem;
}
}
.bannerArea.add_tit .mv .head .subtitle {
font-size: 0.24rem;
}
@media screen and (max-width: 460px) {
.bannerArea.add_tit .mv .head .subtitle {
font-size: 0.16rem;
}
}
.bannerArea.add_tit .mv .head .title {
font-size: 0.3rem;
}
@media screen and (max-width: 460px) {
.bannerArea.add_tit .mv .head .title {
font-size: 0.24rem;
}
}
.bannerArea.add_tit .mv .head .title:after {
height: 0.46rem;
left: -0.23rem;
top: -0.4rem;
width: 0.49rem;
}
.bannerArea.add_tit_own .mv .head .title {
font-size: 0.4rem;
}
@media screen and (max-width: 460px) {
.bannerArea.add_tit_own .mv .head .title {
font-size: 0.23rem;
}
}
.bannerArea.add_tit_own .mv .head .title:after {
left: 0.4rem;
}
@media screen and (max-width: 460px) {
.bannerArea.add_tit_own .mv .head .title:after {
left: 0.2rem;
}
}
.pagination {
display: flex;
text-align: center;
justify-content: center;
width: 100%;
}
.pagination .item {
background: #e8e7e5;
width: 0.5rem;
height: 0.5rem;
margin: 0 0.05rem !important;
}
@media screen and (max-width: 460px) {
.pagination .item {
width: 0.3rem;
height: 0.3rem;
margin: 0 0.03rem !important;
}
}
.pagination .item a {
display: block;
width: 0.5rem;
line-height: 0.5rem;
height: 0.5rem;
font-size: 0.18rem;
color: #000;
font-weight: bold;
}
@media screen and (max-width: 460px) {
.pagination .item a {
width: 0.3rem;
line-height: 0.3rem;
height: 0.3rem;
font-size: 0.12rem;
}
}
.pagination .item a:hover {
background: #2cb3b3;
color: #fff;
}
.pagination .preview {
margin-right: 0.15rem;
}
@media screen and (max-width: 460px) {
.pagination .preview {
margin-right: 0.06rem;
}
}
.pagination .preview a {
position: relative;
}
.pagination .preview a:after {
content: "";
position: absolute;
right: 0.19rem;
top: 50%;
display: block;
border-right: 0.02rem solid #000;
border-top: 0.02rem solid #000;
width: 0.08rem;
height: 0.08rem;
float: right;
transform: translate(0, -50%) rotate(-135deg);
}
@media screen and (max-width: 460px) {
.pagination .preview a:after {
right: 0.1rem;
width: 0.06rem;
height: 0.06rem;
}
}
.pagination .preview a:hover:after {
border-right: 0.02rem solid #fff;
border-top: 0.02rem solid #fff;
}
.pagination .next {
margin-left: 0.15rem;
}
@media screen and (max-width: 460px) {
.pagination .next {
margin-left: 0.06rem;
}
}
.pagination .next a {
position: relative;
}
.pagination .next a:after {
content: "";
position: absolute;
left: 0.19rem;
top: 50%;
display: block;
border-right: 0.02rem solid #000;
border-top: 0.02rem solid #000;
width: 0.08rem;
height: 0.08rem;
float: right;
transform: translate(0, -50%) rotate(45deg);
}
@media screen and (max-width: 460px) {
.pagination .next a:after {
left: 0.1rem;
width: 0.06rem;
height: 0.06rem;
}
}
.pagination .next a:hover:after {
border-right: 0.02rem solid #fff;
border-top: 0.02rem solid #fff;
}
.pagination .active a {
background: #178888;
color: #fff;
}
.pagination .active .extend {
background-color: #FFF;
content: "";
position: relative;
color: #000;
}
.pagination .active .extend:after {
position: relative;
content: "…";
}
.pagination .active .extend:hover {
color: #000;
background-color: #FFF;
opacity: 1;
}
.ie .pagination .item a {
line-height: 0.55rem;
}
.pagerArea {
padding-top: 0.7rem;
}
@media screen and (max-width: 460px) {
.pagerArea {
padding-top: 0.4rem;
}
}
.pagerArea ul {
display: flex;
justify-content: space-between;
}
.pagerArea ul li {
background: #999;
box-sizing: border-box;
color: #fff;
font-size: 0.18rem;
font-weight: bold;
height: 0.5rem;
line-height: 0.5rem;
padding: 0 0.2rem;
text-align: center;
width: 2rem;
}
@media screen and (max-width: 460px) {
.pagerArea ul li {
font-size: 0;
line-height: 0.3rem;
height: 0.3rem;
padding: 0;
width: 0.3rem;
}
}
.pagerArea ul li a {
display: block;
height: 100%;
position: relative;
width: 100%;
}
.pagerArea ul .bgc_none {
background-color: transparent;
}
.pagerArea ul li.list {
background: #2cb3b3;
width: 3.38rem;
}
@media screen and (max-width: 460px) {
.pagerArea ul li.list {
color: #fff;
font-size: 0.13rem;
width: 2.15rem;
}
}
@media print, screen and (min-width: 461px) {
.pagerArea ul li.prev a:hover:after {
left: -0.1rem;
}
}
.pagerArea ul li.prev a:after {
content: "\f104";
font-family: FontAwesome;
left: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
transition: all 0.3s;
}
@media screen and (max-width: 460px) {
.pagerArea ul li.prev a:after {
font-size: 0.15rem;
left: 50%;
transform: translate(-50%, -50%);
}
}
@media print, screen and (min-width: 461px) {
.pagerArea ul li.next a:hover:after {
right: -0.1rem;
}
}
.pagerArea ul li.next a:after {
content: "\f105";
font-family: FontAwesome;
right: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
transition: all 0.3s;
}
@media screen and (max-width: 460px) {
.pagerArea ul li.next a:after {
font-size: 0.15rem;
right: auto;
left: 50%;
transform: translate(-50%, -50%);
}
}
.contact-bottom {
border: 0.04rem solid #f2f2f2;
padding: 0.4rem 0.15rem 0.42rem;
text-align: center;
}
@media screen and (max-width: 460px) {
.contact-bottom {
border: 0.02rem solid #f2f2f2;
padding: 0.22rem 0.13rem 0.27rem;
}
}
.contact-bottom .title {
font-size: 0.24rem;
line-height: 1.5;
letter-spacing: 0.05em;
margin: 0;
padding: 0;
}
.contact-bottom .title a {
text-decoration: underline;
}
.contact-bottom .title a:hover {
color: #2cb3b3;
}
@media screen and (max-width: 460px) {
.contact-bottom .title {
font-size: 0.15rem;
line-height: 1.6666;
letter-spacing: 0;
}
}
@media screen and (max-width: 360px) {
.contact-bottom .title {
font-size: 0.13rem;
}
}
.contact-bottom .box {
align-items: center;
display: flex;
justify-content: center;
margin: 0.33rem 0 0.34rem;
}
@media screen and (max-width: 460px) {
.contact-bottom .box {
flex-wrap: wrap;
justify-content: space-between;
margin: 0.26rem 0 0.17rem;
}
}
.contact-bottom .box .box_item {
background: #999;
color: #fff;
font-size: 0.18rem;
font-weight: bold;
height: 0.5rem;
line-height: 0.5rem;
letter-spacing: 0.05em;
width: 1.6rem;
}
@media screen and (max-width: 460px) {
.contact-bottom .box .box_item {
font-size: 0.13rem;
width: 47.8%;
}
}
.contact-bottom .box .box_item a {
display: block;
}
.contact-bottom .box .box_item + .box_item {
margin-left: 0.1rem;
}
@media print, screen and (min-width: 461px) {
.contact-bottom .box .box_item.box_item:first-child {
width: 2.6rem;
}
}
@media screen and (max-width: 460px) {
.contact-bottom .box .box_item.box_item:first-child {
line-height: 1.5;
}
}
@media screen and (max-width: 460px) {
.contact-bottom .box .box_item.box_item:first-child a {
padding-top: 0.05rem;
}
}
.contact-bottom .box .box_tel {
margin-left: 0.24rem;
}
@media screen and (max-width: 460px) {
.contact-bottom .box .box_tel {
margin: 0.2rem 0 0;
width: 100%;
}
}
.contact-bottom .box .box_tel p {
font-weight: bold;
font-size: 0.14rem;
line-height: 1;
letter-spacing: 0.05em;
}
@media screen and (max-width: 460px) {
.contact-bottom .box .box_tel p {
font-size: 0.12rem;
}
}
.contact-bottom .box .box_tel p.tel {
font-family: futura-pt-condensed, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, verdana, "メイリオ", "Meiryo", "Osaka", sans-serif-serif;
font-weight: 700;
font-size: 0.458rem;
font-display: auto;
}
@media screen and (max-width: 460px) {
.contact-bottom .box .box_tel p.tel {
font-size: 0.3rem;
margin-top: 0.1rem;
}
}
.contact-bottom .box .box_tel p.tel a:hover {
opacity: 1;
}
.contact-bottom .text {
font-size: 0.17rem;
line-height: 1;
letter-spacing: 0.1em;
}
@media screen and (max-width: 460px) {
.contact-bottom .text {
font-size: 0.13rem;
line-height: 1.538;
text-align: left;
}
}
@media print, screen and (min-width: 461px) {
.contact-bottom .text {
max-width: 8.3rem;
margin: 0 auto;
}
}
.renoContactArea {
padding: 0 0 1.2rem;
}
@media screen and (max-width: 460px) {
.renoContactArea {
padding: 0 0 0.2rem;
}
}
.renoContactArea .contact-bottom {
background-color: #FFF;
}
@media screen and (max-width: 460px) {
.renoContactArea .contact-bottom {
padding: 0.22rem 0.11rem 0.27rem;
}
}
.renoContactArea .contact-bottom .box {
justify-content: center;
}
.renoContactArea.bgWhite {
padding-top: 0.6rem;
}
@media screen and (max-width: 460px) {
.renoContactArea.bgWhite {
padding-top: 0.25rem;
}
}
.detailArea {
font-size: 0.17rem;
line-height: 1.764;
}
.detailArea .cms_img img {
width: 100%;
}
.detailArea .cms_cont h1, .detailArea .cms_cont h2, .detailArea .cms_cont h3, .detailArea .cms_cont h4, .detailArea .cms_cont h5, .detailArea .cms_cont h6, .detailArea .cms_cont p {
display: block;
}
.detailArea .cms_cont h1, .detailArea .cms_cont h2, .detailArea .cms_cont h3, .detailArea .cms_cont h4, .detailArea .cms_cont h5, .detailArea .cms_cont h6 {
font-weight: bold;
}
.detailArea .cms_cont h1 {
font-size: 0.36rem;
}
.detailArea .cms_cont h2 {
font-size: 0.32rem;
}
.detailArea .cms_cont h3 {
font-size: 0.28rem;
}
.detailArea .cms_cont h4 {
font-size: 0.24rem;
}
.detailArea .cms_cont h5 {
font-size: 0.2rem;
}
.detailArea .cms_cont h6 {
font-size: 0.17rem;
}
.detailArea .cms_cont p .aligncenter {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
.detailArea .cms_cont p .alignleft {
float: left;
margin: 0.05rem 0.1rem 0.05rem 0;
max-width: 100%;
height: auto;
}
.detailArea .cms_cont p .alignright {
float: right;
margin: 0.05rem 0 0.05rem 1rem;
max-width: 100%;
height: auto;
}
.detailArea .cms_cont p .alignnone {
max-width: 100%;
height: auto;
}
.detailArea .cms_cont ul {
padding-left: 40px;
}
.detailArea .cms_cont ul li {
list-style: disc;
}
.detailArea .cms_cont ol {
padding-left: 40px;
}
.detailArea .cms_cont ol li {
list-style: decimal;
}
.detailArea .cms_cont a {
color: #4dabdc;
text-decoration: underline;
}
.slick-track {
margin: 0;
}
.ie .mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li {
margin-right: 0.23rem;
}
.edge .mod_header .row01 .in .wrapper .wrap .contact .tel,
.ie .mod_header .row01 .in .wrapper .wrap .contact .tel {
width: 1.6rem;
}
.ie .mod_header .row01 .in .wrapper .wrap .contact .txt {
line-height: 1.4;
}
.edge .mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li {
line-height: 2.2;
}
.ie .mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li a {
line-height: 1.5;
}
@media screen and (max-width: 1439px) {
.ie .mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li a {
line-height: 1.4;
}
}
@media screen and (max-width: 1365px) {
.not-safari.not-chrome.not-ie .mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li {
line-height: 1.2;
}
.ie .mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li a {
line-height: 1.6;
}
}
@media screen and (max-width: 1279px) {
.not-safari.not-chrome.not-ie .mod_header .row01 .in .wrapper .wrap .navMenu01 .menu01 li {
line-height: 1.1;
}
}