@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&display=swap");
* {
border: 0;
outline: 0;
margin: 0;
padding: 0;
font-size: 100%;
font-weight: inherit;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
html {
font-size: 62.5%;
line-height: 1;
text-rendering: optimizeLegibility
}
body, html {
width: 100%;
height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
body {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt"
}
article, aside, figure, footer, header, main, nav, section {
display: block
}
ol, ul {
list-style: none
}
blockquote, q {
quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none
}
input, select {
vertical-align: middle
}
table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
table-layout: auto
}
a {
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
address {
font-style: normal
}
img, video, object {
max-width: 100%;
height: auto;
vertical-align: bottom;
border: none
}
img {
display: block;
width: 100%
}
input[type="radio"] {
border: 0px !important
}
input[type="radio"], input[type="submit"], label {
cursor: pointer
}
input, button, textarea, select {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
select::-ms-expand {
display: none
}
input:focus, textarea:focus {
border-color: #ccc;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2)
}
input[type="submit"] {
position: relative;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
width: 100%
}
input[type="submit"]:hover {
opacity: .6
}
.bold {
font-weight: bold
}
.normal {
font-weight: normal
}
.underline {
text-decoration: underline
}
.center {
text-align: center
}
.ta_right {
text-align: right
}
.ta_left {
text-align: left
}
section {
clear: both
}
.wrapper, section {
position: relative
}
.wrapper, .inner {
margin-left: auto;
margin-right: auto
}
#wrapper {
overflow: hidden
}
@media screen and (max-width: 767px) {
.sp {
display: block
}
.pc {
display: none
}
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%
}
}
@media screen and (min-width: 768px) {
.sp {
display: none
}
.pc {
display: block
}
a[href^="tel:"] {
pointer-events: none
}
.over a, .over a img {
-webkit-transition: opacity .5s;
transition: opacity .5s
}
.over a:hover {
opacity: .6
}
}
ul.ul-default {
padding-left: 1.6em
}
ul.ul-default li {
list-style-type: disc
}
ul.ul-normal li {
position: relative;
padding-left: 1em;
list-style: none
}
ul.ul-normal li::before {
content: '・';
position: absolute;
left: 0.2em
}
ul.ul-normal ul {
padding-left: 1em
}
ul.list_note li, .txt_note {
position: relative;
padding-left: 1.1em
}
ul.list_note li::before, .txt_note::before {
content: '※';
position: absolute;
left: 0;
top: 0
}
ol.ol-default {
padding-left: 1.6em
}
ol.ol-default li {
list-style-type: decimal
}
ol.ol-counter {
counter-reset: li
}
ol.ol-counter>li {
list-style: none;
position: relative;
padding-left: 2em;
font-size: 1.2rem;
line-height: 2
}
ol.ol-counter>li::before {
counter-increment: li;
content: counter(li);
margin-right: 1em;
background: #5288df;
color: #fff;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
left: 0;
top: 2px;
border-radius: 2px;
font-size: 1.1rem;
line-height: 18px
}
.swiper-container {
width: 100%;
height: 100%
}
.swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
.swiper-slide img {
width: 100%
}
.fadein {
-webkit-transition: opacity 1s, -webkit-transform 1s;
transition: opacity 1s, -webkit-transform 1s;
transition: transform 1s, opacity 1s;
transition: transform 1s, opacity 1s, -webkit-transform 1s;
opacity: 0
}
.fadein.show {
opacity: 1
}
.fadein_up {
-webkit-transform: translateY(30px);
transform: translateY(30px)
}
.fadein_down {
-webkit-transform: translateY(-30px);
transform: translateY(-30px)
}
.fadein_up.show, .fadein_down.show {
-webkit-transform: translateY(0);
transform: translateY(0)
}
.tab_area .hide {
display: none
}
.tab_area .tab_btn {
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none
}
.tab_area .tab_btn li {
cursor: pointer;
position: relative;
color: #ccc;
-webkit-transition: .5s;
transition: .5s
}
.tab_area .tab_btn li.select, .tab_area .tab_btn li:hover {
color: #c00
}
.tab_area .tab_btn li::after {
content: " | ";
color: #333;
margin: 0 10px
}
.toggle .toggle_body {
display: none
}
.toggle .toggle_body.open {
display: block
}
.modal {
visibility: hidden;
overflow-y: scroll;
opacity: 0;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 20px;
-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
transition: opacity 0.3s, visibility 0s 0.3s;
background: rgba(0, 0, 0, 0.8)
}
.modal.is-active {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.3s, visibility 0s 0s;
transition: opacity 0.3s, visibility 0s 0s
}
.modal_container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-height: 100%;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.modal_container _:-ms-lang(x)::-ms-backdrop, .modal_container {
min-height: 100vh
}
.modal_container::after {
content: '';
min-height: inherit;
font-size: 0
}
.modal_inner {
margin: 20px auto;
width: auto
}
.modal_content {
display: none;
border-radius: 2px;
background: #fff
}
.is-active .modal_content {
display: block
}
#wrapper.is-locked {
position: fixed;
width: 100%
}
.modal {
z-index: 2000;
background: rgba(0, 0, 0, 0.6)
}
.modal a.modal-close-top, .modal a.modal-close-bottom {
content: "";
position: absolute;
display: block;
text-indent: -9999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url(./../image/close-modal.png)
}
.modal a.modal-close-top {
position: absolute;
top: -42px;
right: -2px;
width: 26px;
height: 32px
}
.modal a.modal-close-bottom {
position: absolute;
margin: auto;
top: calc(100% + 14px);
right: 0;
left: 0;
width: 39px;
height: 34px
}
@media screen and (max-width: 767px) {
.modal {
padding: 80px 12.5px 90px;
padding: 40px 12.5px 60px
}
}
@media screen and (min-width: 768px) {
.modal {
padding: 60px 60px 80px
}
.modal a.modal-close-top, .modal a.modal-close-bottom {
-webkit-transition: .3s;
transition: .3s
}
.modal a.modal-close-top:hover, .modal a.modal-close-bottom:hover {
opacity: .6
}
.modal a.modal-close-top {
width: 34px;
height: 36px;
top: -46px;
right: -16px
}
.modal a.modal-close-bottom {
width: 46px;
height: 44px;
top: calc(100% + 18px)
}
}
.modal_inner {
margin: 20px auto;
width: 100%
}
.modal_content {
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 800px;
border-radius: 6px;
background: #fff;
padding: 20px
}
@media screen and (min-width: 768px) {
.modal-google .modal_content {
max-width: 700px
}
}
body {
color: #222;
background-color: white;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, sans-serif;
letter-spacing: 0.05rem
}
a {
color: #222;
text-decoration: none;
display: inline-block
}
@media screen and (max-width: 767px) {
body {
font-size: 1.4rem;
line-height: 1.7143
}
.wrapper {
padding-left: 12.5px;
padding-right: 12.5px
}
}
@media screen and (min-width: 768px) {
html, body, #wrapper, #header, #main {
min-width: 1140px
}
body {
font-size: 1.6rem;
line-height: 2
}
a {
-webkit-transition: .2s;
transition: .2s
}
.wrapper {
width: 1100px
}
}
@media screen and (max-width: 767px) {
#header_sp {
/*
* ヘッダーの固定位置を解除する場合にコメントアウトを外す、20240621 ヘッダーが追従しないようにするための修正
* position: fixed;
*/
top: 0;
left: 0;
line-height: 1;
width: 100%;
background-color: white;
-webkit-box-shadow: 0px 1px 8px 0px rgba(3, 0, 0, 0.16);
box-shadow: 0px 1px 8px 0px rgba(3, 0, 0, 0.16);
z-index: 1100;
-webkit-transition: .3s;
transition: .3s
}
#header_sp img {
width: 100%;
max-height: 48px;
max-width: max-content
}
#header_sp .header_wrap {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
height: 48px
}
#header_sp .header_wrap .header_left {
width: calc(100% - 48px)
}
#header_sp .header_wrap .header_left .header_logo {
position: absolute;
top: 0;
left: 12px;
width: 78.4%
}
#header_sp .header_wrap .header_left .header_logo a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 48px
}
.drawer-btn_sp {
position: fixed;
top: 0;
right: 0;
width: 48px;
height: 48px;
background-size: 100% auto;
background-image: url(./../image/gnav_btn_menu.png);
-webkit-transition: .3s;
transition: .3s;
z-index: 1200
}
.drawer-btn_sp.active {
background-image: url(./../image/gnav_btn_close.png)
}
body.active {
position: fixed
}
#nav_sp {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
z-index: -1;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
color: white;
background-color: rgba(0, 0, 0, 0.4)
}
#nav_sp .drawer_nav_sp {
-webkit-overflow-scrolling: touch;
position: fixed;
top: 0;
right: 0;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
height: 100%;
-webkit-transition: all 0.2s;
transition: all 0.2s;
background-color: white;
padding: 48px 0 50px
}
#nav_sp .drawer_nav_sp .drawer_nav_inner {
position: fixed;
top: 48px;
width: 100%;
height: calc(100% - 48px);
overflow-y: auto
}
#nav_sp .drawer_nav_sp .drawer_nav_menu_sp ul li a {
position: relative;
width: 100%;
font-weight: bold;
font-size: 1.6rem;
padding: 10px 20px 10px 33px;
border-bottom: solid 1px #E6E6E6
}
#nav_sp .drawer_nav_sp .drawer_nav_menu_sp ul li ul {
background-color: #f0f0f0;
border-bottom: solid 1px #E6E6E6;
padding-top: 6px;
padding-bottom: 6px
}
#nav_sp .drawer_nav_sp .drawer_nav_menu_sp ul li ul li {
padding-left: 22px
}
#nav_sp .drawer_nav_sp .drawer_nav_menu_sp ul li ul li a {
position: relative;
border-bottom: none;
font-weight: normal;
font-size: 1.4rem;
padding: 12px 20px 12px 24px
}
#nav_sp .drawer_nav_sp .drawer_nav_menu_sp ul li ul li a::before {
content: "";
width: 5px;
height: 5px;
border-top: 2px solid #ffa524;
border-right: 2px solid #ffa524;
position: absolute;
left: 8px;
top: 19px;
margin: auto;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
#nav_sp .drawer_nav_sp .drawer_nav_menu_sp .drawer_nav li a {
display: block;
position: relative;
line-height: 2
}
#nav_sp .drawer_nav_sp .drawer_nav_menu_sp .drawer_nav li a.icon::after {
content: "";
width: 5px;
height: 5px;
border-top: 2px solid #ffa524;
border-right: 2px solid #ffa524;
position: absolute;
left: 16px;
top: 18px;
margin: auto;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
#nav_sp .drawer_nav_sp .drawer_nav_menu_sp .drawer_nav li a.open.icon::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px
}
#nav_sp .drawer_nav_sp .drawer_nav_menu_sp .tel {
max-width: 285px;
margin: 30px auto 20px
}
#nav_sp .drawer_nav_sp .drawer_nav_menu_sp .contact {
max-width: 252px;
margin: auto
}
}
@media screen and (min-width: 768px) {
#header {
background-color: white
}
#header .header_wrap, #header .header_menu {
margin-left: auto;
margin-right: auto;
width: 1100px
}
#header .header_wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
#header .header_wrap .header_left {
width: 528px;
padding-top: 12px
}
#header .header_wrap .header_right {
width: 347px;
height: 80px;
padding-top: 10px;
margin-right: 90px
}
.header_privacy {
position: absolute;
top: 7px;
right: 0
}
.header_privacy img {
max-width: 66px
}
#header .header_menu ul {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%
}
#header .header_menu ul::before {
content: "";
display: block;
position: absolute;
margin: auto;
left: 0;
top: 0;
bottom: 0;
width: 1px;
height: 20px;
background-color: #c2cbd3
}
#header .header_menu ul li {
width: calc(100% / 7)
}
#header .header_menu ul li a {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
height: 50px;
font-size: 1.4rem;
line-height: 1.286;
border-bottom: solid 4px transparent;
-webkit-transform: .3s;
transform: .3s
}
#header .header_menu ul li a:hover {
color: #888;
border-bottom: solid 4px #ffa524
}
#header .header_menu ul li a::before {
content: "";
display: block;
position: absolute;
margin: auto;
right: 0;
top: 0;
bottom: 0;
width: 1px;
height: 20px;
background-color: #c2cbd3
}
}
/* Apoo（202105）privacy(sp) */
@media screen and (max-width: 767px) {
.sp-tel-wrap {
display: flex;
justify-content: center;
align-items: center;
}
#nav_sp .drawer_nav_sp .drawer_nav_menu_sp .sp-tel-wrap>.tel {
margin: 30px 16px 20px 0;
}
.sp-tel-wrap .privacy {
position: relative;
top: -4px;
width: 62px;
}
}
/* Apoo（202105）privacy(sp) */
@media screen and (max-width: 360px) {
#nav_sp .drawer_nav_sp .drawer_nav_menu_sp .sp-tel-wrap>.tel {
max-width: 250px;
margin-right: 8px;
}
.sp-tel-wrap .privacy {
width: 50px;
}
}
#footer {
position: relative;
color: #222;
background-color: white
}
#footer a {
color: #222
}
#footer table th, #footer table td {
text-align: left;
vertical-align: top
}
#footer table th {
color: #666;
padding-right: 1em
}
#footer .link li a {
position: relative;
text-decoration: underline;
padding-left: 1em
}
#footer .link li a::before {
content: '';
position: absolute;
left: 3px;
top: 8px;
width: 4px;
height: 4px;
border-top: 1px solid #222;
border-right: 1px solid #222;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
@media screen and (max-width: 767px) {
#footer .footer-top {
padding-top: 50px
}
#footer .footer-top .box .box-left {
padding-bottom: 10px
}
#footer .footer-top .logo {
width: 220px;
margin: 0 auto 26px
}
#footer .footer-top th, #footer .footer-top td {
padding-bottom: 10px;
line-height: 1.714
}
#footer .footer-top th {
min-width: 95px
}
#footer .footer-top .gmap {
padding-bottom: 52%
}
#footer .footer-bottom {
padding-top: 26px;
padding-bottom: 76px
}
#footer .footer-bottom ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
#footer .footer-bottom ul li {
margin: 0 10px;
font-size: 1.2rem
}
#footer .footer-bottom .copyright {
display: block;
text-align: center;
font-size: 1rem;
margin-top: 20px
}
}
@media screen and (min-width: 768px) {
#footer .link li a::before {
left: 0px;
top: 11px;
width: 5px;
height: 5px;
border-top: 2px solid #222;
border-right: 2px solid #222
}
#footer .link li a:hover {
color: #f69408
}
#footer .footer-top {
padding-top: 50px;
padding-bottom: 45px
}
#footer .footer-top .box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
#footer .footer-top .box .box-left {
width: 660px
}
#footer .footer-top .box .box-right {
width: 420px
}
#footer .footer-top .logo {
width: 294px;
margin-bottom: 25px
}
#footer .footer-top th, #footer .footer-top td {
line-height: 2
}
#footer .footer-top th {
min-width: 120px
}
#footer .footer-bottom {
background-color: #f0f0f0;
padding-top: 16px;
padding-bottom: 38px
}
#footer .footer-bottom .box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
#footer .footer-bottom ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 700px
}
#footer .footer-bottom ul li {
margin-right: 24px;
font-size: 1.2rem
}
#footer .footer-bottom ul a:hover {
text-decoration: underline
}
#footer .footer-bottom .copyright {
width: 380px;
text-align: right;
font-size: 1.2rem
}
}
.footer-nav-sp {
display: none
}
@media screen and (max-width: 767px) {
.footer-nav-sp {
background-color: white;
-webkit-box-shadow: 0px 2px 8px 0px rgba(3, 0, 0, 0.2);
box-shadow: 0px 2px 8px 0px rgba(3, 0, 0, 0.2);
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 100;
height: 47px;
}
.footer-nav-sp ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.footer-nav-sp ul li a {
display: block
}
}
@media screen and (min-width: 768px) {
.footer-nav-sp {
display: none
}
}
@media screen and (max-width: 767px) {
.pagetop {
background-repeat: no-repeat;
background-image: url(./../image/pagetop_sp.png);
background-size: 23px auto;
background-position: left center;
width: 40px;
height: 70px
}
}
@media screen and (min-width: 768px) {
.pagetop {
cursor: pointer;
position: fixed;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
right: 0;
bottom: 0;
z-index: 90;
background-repeat: no-repeat;
background-image: url(./../image/pagetop.png);
background-size: cover;
width: 64px;
height: 80px;
-webkit-transition: 0.3s;
transition: 0.3s
}
.pagetop::before {
content: "";
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 15px;
width: 9px;
height: 9px;
border-top: 2px solid #666;
border-right: 2px solid #666;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.pagetop:hover {
background-image: url(./../image/pagetop_over.png)
}
.pagetop:hover::before {
top: 10px;
border-top: 2px solid #ffa524;
border-right: 2px solid #ffa524
}
}
.fixed-side-btn {
display: none
}
@media screen and (max-width: 767px) {
.fixed-side-btn {
display: none
}
}
@media screen and (min-width: 768px) {
.fixed-side-btn {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
position: fixed;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 48px;
height: 180px;
z-index: 100
}
.fixed-side-btn a {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-weight: bold;
background-color: #ffa524;
color: #222;
border-radius: 8px 0 0 8px;
width: 48px;
height: 176px;
font-size: 1.8rem;
padding: 10px 10px;
-webkit-box-shadow: 0 4px #b86e04;
box-shadow: 0 4px #b86e04
}
.fixed-side-btn a:hover {
-webkit-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: none;
box-shadow: none;
background-color: #f69408
}
.fixed-side-btn a span {
position: relative;
padding-bottom: 1em
}
.fixed-side-btn a span::after {
content: "";
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
}
/* 20240621 ヘッダーが追従しないようにするための修正 start */
/*
@media screen and (max-width: 767px) {
#main {
padding-top: 48px
}
}
*/
/* 20240621 ヘッダーが追従しないようにするための修正 end */
.sec-lead {
margin-left: auto;
margin-right: auto;
text-align: center
}
.sec-lead span {
display: inline-block;
color: white;
background-color: #133250
}
@media screen and (max-width: 767px) {
.sec-lead {
font-size: 1.4rem;
font-weight: bold;
line-height: 1.667;
margin-bottom: 10px
}
.sec-lead span {
border-radius: 10px;
padding: 4px 14px;
width: 100%;
}
.sec-lead.row2 span {
border-radius: 10px;
padding: 8px 28px
}
}
@media screen and (min-width: 768px) {
.sec-lead {
font-size: 1.8rem;
margin-bottom: 20px
}
.sec-lead span {
border-radius: 20px;
padding: 2px 24px
}
}
.sec-head {
position: relative;
text-align: center;
font-weight: bold;
color: #133250;
font-size: 2rem;
line-height: 1.7;
padding-bottom: 16px;
margin-bottom: 30px
}
.sec-head::after {
content: '';
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
background-color: #c4c5c8;
width: 48px;
height: 4px;
border-radius: 2px
}
.block-head {
font-weight: bold;
color: #5288df;
font-size: 1.8rem;
line-height: 1.5
}
@media screen and (min-width: 768px) {
.sec-head {
font-size: 2.8rem;
line-height: 1.714;
padding-bottom: 23px;
margin-bottom: 28px
}
.block-head {
font-size: 2.4rem
}
}
.highlighter {
font-weight: bold;
background: -webkit-gradient(linear, left top, left bottom, color-stop(84%, transparent), color-stop(84%, #ffa524));
background: -webkit-linear-gradient(transparent 84%, #ffa524 84%);
background: linear-gradient(transparent 84%, #ffa524 84%)
}
.arrow-right a {
position: relative;
padding-left: 1em
}
.arrow-right a::before {
content: "";
position: absolute;
margin: auto;
left: 4px;
top: 10px;
width: 4px;
height: 4px;
border-top: 1px solid #000;
border-right: 1px solid #000;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
@media screen and (min-width: 768px) {
.arrow-right a::before {
top: 12px
}
}
.btn-push {
text-align: center
}
.btn-push a {
font-weight: bold;
background-color: #ffa524;
background-color: #ffa524;
color: #222;
-webkit-box-shadow: 0 4px #b86e04;
box-shadow: 0 4px #b86e04;
border-radius: 4px;
width: 100%;
line-height: 1;
padding: 10px
}
@media screen and (max-width: 767px) {
.btn-push a {
max-width: 320px;
border-radius: 6px;
font-size: 1.6rem;
padding: 17px 10px
}
}
@media screen and (min-width: 768px) {
.btn-push a {
border-radius: 15px;
width: 360px;
font-size: 1.8rem;
padding: 23px 10px
}
.btn-push a:hover {
-webkit-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: none;
box-shadow: none;
background-color: #f69408
}
}
@media screen and (max-width: 767px) {
.modal_btn {
text-align: center
}
.modal_btn a {
background-repeat: no-repeat;
background-image: url(./../image/icon-modal.svg);
background-size: 14px auto;
background-position: right center;
padding-right: 20px
}
}
@media screen and (min-width: 768px) {
.modal_btn {
text-align: right
}
.modal_btn a {
background-repeat: no-repeat;
background-image: url(./../image/icon-modal.svg);
background-size: 16px 20px;
background-position: right 2px center;
padding-right: 26px
}
.modal_btn a:hover {
color: #ffa524;
background-image: url(./../image/icon-modal_over.svg)
}
}
@media screen and (max-width: 767px) {
.swiper-button-next, .swiper-button-prev {
width: 16px;
height: 26px
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 28px
}
.swiper-button-next {
right: -70px;
top: 100px;
padding: 70px
}
.swiper-button-prev {
left: -70px;
top: 100px;
padding: 70px;
}
}
@media screen and (min-width: 768px) {
.swiper-button-next, .swiper-button-prev {
width: 16px;
height: 26px;
-webkit-transition: .3s;
transition: .3s
}
.swiper-button-next:hover, .swiper-button-prev:hover {
opacity: .5
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 30px
}
.swiper-button-next {
right: -40px
}
.swiper-button-prev {
left: -40px
}
}
.button-type1 a {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
background-color: white;
margin-left: auto;
margin-right: auto;
font-size: 1.2rem;
border-radius: 8px;
-webkit-box-shadow: 0px 2px 2px 0px rgba(3, 0, 0, 0.08);
box-shadow: 0px 2px 2px 0px rgba(3, 0, 0, 0.08);
width: 100%;
height: 110px
}
.button-type1 a::after {
content: "";
position: absolute;
margin: auto;
right: 6px;
top: 0;
bottom: 0;
width: 4px;
height: 4px;
border-top: 2px solid #ffa524;
border-right: 2px solid #ffa524;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.button-type1 span {
display: block
}
@media screen and (max-width: 767px) {
.button-type1 .bold {
font-size: 1.6rem;
line-height: 1.75;
margin-top: 4px
}
}
@media screen and (min-width: 768px) {
.button-type1 a {
font-size: 1.4rem;
border-radius: 8px;
-webkit-box-shadow: 0px 4px 4px 0px rgba(3, 0, 0, 0.08);
box-shadow: 0px 4px 4px 0px rgba(3, 0, 0, 0.08);
width: 600px;
height: 80px
}
.button-type1 a::after {
content: "";
position: absolute;
margin: auto;
right: 9px;
top: 0;
bottom: 0;
width: 6px;
height: 6px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.button-type1 a:hover {
color: #646464
}
.button-type1 a:hover::after {
right: 6px
}
.button-type1 .bold {
font-size: 1.8rem
}
}
ul.ul-normal li::before {
color: #adadad
}
ol.ol-counter>li::before {
font-family: "Barlow Condensed", sans-serif
}
@media screen and (max-width: 767px) {
ol.ol-counter>li {
margin-bottom: 10px
}
ol.ol-counter>li::before {
counter-increment: li;
content: counter(li);
margin-right: 1em;
background: #5288df;
color: #fff;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
left: 0;
top: 2px;
border-radius: 2px;
font-size: 1.1rem;
line-height: 18px
}
}
@media screen and (min-width: 768px) {
ol.ol-counter>li {
font-size: 1.8rem;
line-height: 2.667;
padding-left: 40px
}
ol.ol-counter>li::before {
width: 28px;
height: 28px;
top: 8px;
font-size: 1.8rem;
line-height: 28px
}
}
.flow-counter {
counter-reset: li
}
.flow-counter .color {
color: #5288df
}
.flow-counter dl dt {
border-radius: 6px;
background-color: #f0f0f0;
list-style: none;
position: relative;
padding: 3px 10px 3px 30px;
font-size: 1.6rem;
line-height: 1.75;
min-height: 36px
}
.flow-counter dl dt::before {
counter-increment: li;
content: counter(li);
margin-right: 1em;
background: #5288df;
color: #fff;
text-align: center;
width: 18px;
height: 18px;
position: absolute;
left: 6px;
top: 8px;
border-radius: 2px;
font-size: 1.1rem;
line-height: 18px;
font-family: "Barlow Condensed", sans-serif
}
.flow-counter dl dd {
background-repeat: no-repeat;
background-image: url(./../image/flow-counter.svg);
background-position: 3px bottom;
background-size: 21px auto;
padding: 10px 0 15px 30px;
margin-bottom: 7px
}
.flow-counter dl:last-of-type dd {
background-image: none
}
@media screen and (min-width: 768px) {
.flow-counter dl dt {
font-size: 2rem;
line-height: 1.6;
padding: 7px 10px 7px 52px
}
.flow-counter dl dt::before {
width: 28px;
height: 28px;
left: 10px;
top: 10px;
font-size: 1.8rem;
line-height: 28px
}
.flow-counter dl dd {
background-position: 9px bottom;
background-size: 28px auto;
padding: 12px 0 8px 52px;
margin-bottom: 4px
}
}
.table table {
margin-left: auto;
margin-right: auto;
width: 100%;
border-top: solid 1px #4d4d4d
}
.table th, .table td {
text-align: left;
vertical-align: top;
font-size: 1.36rem;
line-height: 1.91;
padding: 16px 0;
border-bottom: solid 1px #4d4d4d
}
.table th {
padding-right: 10px
}
@media screen and (min-width: 768px) {
.table th, .table td {
font-size: 1.6rem;
line-height: 2.125;
padding: 16px 6px
}
.table th {
padding-right: 10px
}
}
.table-type1 table {
width: 100%
}
.table-type1 table th, .table-type1 table td {
vertical-align: top;
text-align: left;
font-size: 1.4rem;
line-height: 1.857
}
@media screen and (max-width: 767px) {
.table-type1 table tr, .table-type1 table th, .table-type1 table td {
display: block
}
.table-type1 table th {
font-weight: bold
}
.table-type1 table td {
padding-bottom: 15px;
border-bottom: solid 1px #E4E4E4;
margin-bottom: 15px
}
}
@media screen and (min-width: 768px) {
.table-type1 table th, .table-type1 table td {
border-bottom: solid 1px #E4E4E4;
padding-top: 14px;
padding-bottom: 14px
}
.table-type1 table th {
padding-right: 10px
}
}
.toggle .toggle_body {
display: none
}
.toggle .toggle_body.open {
display: block
}
.toggle .toggle_head .toggle_more {
cursor: pointer;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-weight: bold;
margin-left: auto;
margin-right: auto;
text-align: center;
border-radius: 8px;
background-color: #fff;
-webkit-box-shadow: 0px 1px 4px 0px rgba(3, 0, 0, 0.24);
box-shadow: 0px 1px 4px 0px rgba(3, 0, 0, 0.24);
width: 240px;
height: 44px;
-webkit-transition: .3s;
transition: .3s
}
.toggle .toggle_head .toggle_more::before {
font-weight: bold;
content: "続きを見る";
-webkit-transition: .3s;
transition: .3s
}
.toggle .toggle_head .toggle_more::after {
content: "";
width: 4px;
height: 4px;
border-top: 1px solid #ffa524;
border-right: 1px solid #ffa524;
position: absolute;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
.toggle .toggle_head.open .toggle_more::before {
content: "続きを閉じる"
}
.toggle .toggle_head.open .toggle_more::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.toggle .toggle_body .toggle_more {
cursor: pointer;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-weight: bold;
margin-left: auto;
margin-right: auto;
text-align: center;
border-radius: 8px;
background-color: #fff;
-webkit-box-shadow: 0px 1px 4px 0px rgba(3, 0, 0, 0.24);
box-shadow: 0px 1px 4px 0px rgba(3, 0, 0, 0.24);
width: 240px;
height: 44px;
-webkit-transition: .3s;
transition: .3s
}
.toggle .toggle_body .toggle_more::before {
font-weight: bold;
content: "続きを閉じる";
-webkit-transition: .3s;
transition: .3s
}
.toggle .toggle_body .toggle_more::after {
content: "";
width: 4px;
height: 4px;
border-top: 1px solid #ffa524;
border-right: 1px solid #ffa524;
position: absolute;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
@media screen and (max-width: 767px) {
.toggle .toggle_head {
margin-top: 24px;
margin-bottom: 24px
}
.toggle .toggle_body {
margin-bottom: 24px
}
.toggle .toggle_body .toggle_more {
margin-top: 24px
}
}
@media screen and (min-width: 768px) {
.toggle .toggle_head {
margin-top: 40px;
margin-bottom: 44px
}
.toggle .toggle_head .toggle_more {
-webkit-box-shadow: 0px 4px 4px 0px rgba(3, 0, 0, 0.08);
box-shadow: 0px 4px 4px 0px rgba(3, 0, 0, 0.08);
width: 400px;
height: 48px
}
.toggle .toggle_head .toggle_more:hover::before {
opacity: .5
}
.toggle .toggle_head .toggle_more::after {
width: 5px;
height: 5px;
border-top: 2px solid #ffa524;
border-right: 2px solid #ffa524;
right: 10px
}
.toggle .toggle_body {
margin-bottom: 44px
}
.toggle .toggle_body .toggle_more {
-webkit-box-shadow: 0px 4px 4px 0px rgba(3, 0, 0, 0.08);
box-shadow: 0px 4px 4px 0px rgba(3, 0, 0, 0.08);
width: 400px;
height: 48px;
margin-top: 40px
}
.toggle .toggle_body .toggle_more:hover::before {
opacity: .5
}
.toggle .toggle_body .toggle_more::after {
width: 5px;
height: 5px;
border-top: 2px solid #ffa524;
border-right: 2px solid #ffa524;
right: 10px
}
}
@media screen and (max-width: 767px) {
.toggle-sp .toggle_body {
display: none
}
.toggle-sp .toggle_body.open {
display: block
}
.toggle-sp .toggle_head {
margin-top: 24px;
margin-bottom: 24px
}
.toggle-sp .toggle_head .toggle_more {
cursor: pointer;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-weight: bold;
margin-left: auto;
margin-right: auto;
text-align: center;
border-radius: 8px;
background-color: #fff;
-webkit-box-shadow: 0px 1px 4px 0px rgba(3, 0, 0, 0.24);
box-shadow: 0px 1px 4px 0px rgba(3, 0, 0, 0.24);
width: 240px;
height: 44px;
-webkit-transition: .3s;
transition: .3s
}
.toggle-sp .toggle_head .toggle_more::before {
font-weight: bold;
content: "続きを見る";
-webkit-transition: .3s;
transition: .3s
}
.toggle-sp .toggle_head .toggle_more::after {
content: "";
width: 4px;
height: 4px;
border-top: 1px solid #ffa524;
border-right: 1px solid #ffa524;
position: absolute;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
.toggle-sp .toggle_head.open .toggle_more::before {
content: "続きを閉じる"
}
.toggle-sp .toggle_head.open .toggle_more::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.toggle-sp .toggle_body {
margin-bottom: 24px
}
.toggle-sp .toggle_body .toggle_more {
margin-top: 24px;
cursor: pointer;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-weight: bold;
margin-left: auto;
margin-right: auto;
text-align: center;
border-radius: 8px;
background-color: #fff;
-webkit-box-shadow: 0px 1px 4px 0px rgba(3, 0, 0, 0.24);
box-shadow: 0px 1px 4px 0px rgba(3, 0, 0, 0.24);
width: 240px;
height: 44px;
-webkit-transition: .3s;
transition: .3s
}
.toggle-sp .toggle_body .toggle_more::before {
font-weight: bold;
content: "続きを閉じる";
-webkit-transition: .3s;
transition: .3s
}
.toggle-sp .toggle_body .toggle_more::after {
content: "";
width: 4px;
height: 4px;
border-top: 1px solid #ffa524;
border-right: 1px solid #ffa524;
position: absolute;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
}
.main-bottom {
position: relative;
background-color: #4f86e2;
color: white
}
.main-bottom .box {
background-repeat: no-repeat
}
.main-bottom .box.safe {
background-image: url(./../image/main-icon-safe.png)
}
.main-bottom .box.staff {
background-image: url(./../image/main-icon-staff.png)
}
.main-bottom .box.map {
background-image: url(./../image/main-icon-map.png)
}
.main-bottom .txt {
color: #ffca3b;
font-weight: bold
}
@media screen and (max-width: 767px) {
.main-bottom {
font-size: 1.4rem;
line-height: 2.1
}
.main-bottom .ttl {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: -10px;
width: 280px
}
.main-bottom .box-wrap {
padding-top: 55px;
padding-bottom: 1px
}
.main-bottom .box-wrap .box {
padding-left: 65px;
background-position: left top;
margin-bottom: 20px;
margin-top: -2px;
}
.main-bottom .box-wrap .box.safe {
background-size: 39px auto
}
.main-bottom .box-wrap .box.staff {
background-size: 37px auto
}
.main-bottom .box-wrap .box.map {
background-size: 48px auto
}
}
@media screen and (min-width: 768px) {
.main-bottom {
height: 180px;
font-size: 1.6rem;
line-height: 1.75
}
.main-bottom .ttl {
position: absolute;
left: 0;
top: -18px;
width: 544px
}
.main-bottom .box-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding-top: 30px
}
.main-bottom .box-wrap .box {
width: 33%;
padding: 0px 30px 0 80px;
background-position: left top
}
.main-bottom .box-wrap .box.safe {
background-size: 60px auto;
background-position: left 10px
}
.main-bottom .box-wrap .box.staff {
background-size: 58px auto;
background-position: left 6px
}
.main-bottom .box-wrap .box.map {
background-size: 74px auto;
padding: 0 30px 0 85px
}
}
.second_sec {
background-color: #f0f0f0
}
@media screen and (max-width: 767px) {
.second_sec .modal_btn {
padding-top: 10px;
padding-bottom: 20px
}
}
@media screen and (min-width: 768px) {
.second_sec {
padding-bottom: 40px
}
.second_sec .modal_btn {
padding-top: 15px;
padding-bottom: 15px
}
}
.modal-covid19 .ttl {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-weight: bold;
font-size: 2rem;
line-height: 1.7;
margin-bottom: 10px
}
.modal-covid19 .ttl::before, .modal-covid19 .ttl::after {
content: "";
height: 1px;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background-color: #cdcfd2
}
.modal-covid19 .ttl::before {
margin-right: 1rem
}
.modal-covid19 .ttl::after {
margin-left: 1rem
}
.modal-covid19 .txt1 {
text-align: center
}
@media screen and (max-width: 767px) {
.modal-covid19 .sec-head {
margin-bottom: 26px
}
.modal-covid19 .txt1 {
margin-bottom: 24px
}
.modal-covid19 .block1 {
margin-bottom: 26px
}
.modal-covid19 .ttl {
font-size: 2rem;
line-height: 1.7;
margin-bottom: 5px
}
.modal-covid19 .txt2 {
margin-bottom: 30px
}
.modal-covid19 .block-head {
font-size: 1.6rem;
margin-top: 20px;
margin-bottom: 10px
}
.modal-covid19 .ul-normal li {
margin-bottom: 10px
}
.modal-covid19 .txt3 {
margin-bottom: 10px
}
.modal-covid19 .flow-counter dd {
font-size: 1.2rem;
line-height: 1.667
}
.modal-covid19 .textarea p {
margin-bottom: 10px
}
}
@media screen and (min-width: 768px) {
.modal-covid19 .txt1 {
margin-bottom: 50px
}
.modal-covid19 .block1 {
margin-bottom: 45px
}
.modal-covid19 .ttl {
font-size: 2.4rem;
line-height: 1.7;
margin-bottom: 5px
}
.modal-covid19 .txt2 {
margin-bottom: 30px
}
.modal-covid19 .block-head {
font-size: 2rem;
margin-top: 26px;
margin-bottom: 7px
}
.modal-covid19 .ul-normal li {
margin-bottom: 9px
}
.modal-covid19 .txt3 {
margin-bottom: 10px
}
.modal-covid19 .flow-counter dd {
font-size: 1.4rem;
line-height: 2;
min-height: 36px
}
.modal-covid19 .textarea p {
font-size: 1.6rem;
line-height: 1.75;
margin-bottom: 13px
}
}
.form_table input[type="text"], .form_table select {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, sans-serif;
letter-spacing: 0.05rem;
border: none;
background-color: #fff;
width: 100%;
padding: 10px;
font-size: 16px;
line-height: 1.5;
box-shadow: 0 5px 7px 0 rgb(0 0 0 / 19%)
}
.form_table select {
background-image: url(./../image/form_select.png);
background-repeat: no-repeat;
background-position: right center;
background-size: 26px auto
}
@media screen and (max-width: 767px) {
.form_table input[type="text"], .form_table select {
font-size: 18px
}
}
.contact-01 {
position: relative;
overflow: hidden;
background-repeat: no-repeat;
border: solid 4px #4f86e2;
border-radius: 8px;
background-color: white
}
.contact-01 h3 {
font-weight: bold;
color: #4f86e2
}
.contact-01 .contact-01_form {
background-color: #efeae4
}
@media screen and (max-width: 767px) {
.contact-01 .contact-01_block {
background-color: white;
}
.contact-01 .contact-01_block h2 {
padding: 4px
}
.contact-01 .contact-01_block .tel {
margin: 25px auto 25px;
width: 82.2%
}
.contact-01 .contact-01_block .txt1, .contact-01 .contact-01_block .txt2 {
padding-left: 15px;
padding-right: 15px
}
.contact-01 .contact-01_block .txt1 {
font-size: 1.9rem;
line-height: 1.6;
margin-top: 30px;
margin-bottom: 10px;
text-align: center;
}
.contact-01 .contact-01_block .tag {
padding: 23px 5px 10px
}
.contact-01 .contact-01_block .txt3 {
padding: 5px 15px 22px 15px
}
.contact-01 .contact-01_form {
padding: 28px 18px 30px
}
.contact-01 .contact-01_form .txt4 {
font-size: 1.8rem;
line-height: 1.5;
margin-bottom: 20px
}
.contact-01 .contact-01_form .step dt {
background-repeat: no-repeat;
background-image: url(./../image/contact_step1_sp.png);
background-size: 51px auto;
background-position: left 4px;
padding-left: 60px;
min-height: 27px;
margin-bottom: 10px
}
.contact-01 .contact-01_form .step dd {
margin-bottom: 25px
}
.contact-01 .contact-01_form .step.step1 dt {
background-image: url(./../image/contact_step1_sp.png)
}
.contact-01 .contact-01_form .step.step2 dt {
background-image: url(./../image/contact_step2_sp.png)
}
.contact-01 .contact-01_form .pass {
width: 250px;
margin-left: auto;
margin-right: auto
}
.contact-01 .contact-01_form .pass a {
position: relative;
display: block;
text-align: center;
font-weight: bold;
background-color: #ffa524;
color: #222;
border-radius: 8px;
width: 100%;
line-height: 1.2;
padding: 8px 10px 5px;
-webkit-box-shadow: 0 4px #b86e04;
box-shadow: 0 4px #b86e04;
min-height: 51px
}
.contact-01 .contact-01_form .pass a .form-btn-txt1 {
display: block;
color: #ffa524;
background-color: white;
font-size: 1rem;
padding: 1px 3px 1px;
border-radius: 7px;
margin-bottom: 7px;
width: 122px;
margin-left: auto;
margin-right: auto
}
.contact-01 .contact-01_form .pass a .form-btn-txt2 {
display: block;
font-size: 1.6rem
}
.contact-01 .contact-01_form .pass a .form-btn-txt3 {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: auto;
top: 0;
bottom: 0;
right: 0;
color: white;
font-size: 1.4rem;
min-height: 55px
}
.contact-01 .contact-01_form .pass a .form-btn-txt3 span {
position: relative;
padding-right: 18px
}
.contact-01 .contact-01_form .pass a .form-btn-txt3 span::after {
content: "";
position: absolute;
margin: auto;
right: 8px;
top: 0;
bottom: 0;
width: 4px;
height: 4px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
}
@media screen and (min-width: 768px) {
.contact-01 {
border-radius: 16px
}
.contact-01 .txt1 {
text-align: center;
font-size: 1.8rem;
line-height: 1.5
}
.contact-01 .contact-01_block {
background-color: white;
background-image: url(./../image/contact_bg1.jpg);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
min-height: 540px;
padding-bottom: 23px
}
.contact-01 .contact-01_block h2 {
padding: 4px
}
.contact-01 .contact-01_block .txt1 {
text-align: center;
font-size: 2.7rem;
line-height: 1.5;
margin-top: 34px;
margin-bottom: 25px
}
.contact-01 .contact-01_block .txt2 {
text-align: center;
line-height: 1.75;
font-size: 1.9rem;
}
.contact-01 .contact-01_block .tel {
margin: 45px auto 0px;
width: 470px
}
.white-shadow {
text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.contact-01 .contact-01_block .tag {
padding: 0 116px;
margin-bottom: 25px
}
.contact-01 .contact-01_block .tag img {
width: 664px;
padding-top: 40px;
}
.contact-01 .contact-01_block .txt3 {
line-height: 1.75;
padding: 0 116px
}
.contact-01 .contact-01_form {
padding: 20px 116px 34px
}
.contact-01 .contact-01_form .txt4 {
text-align: center;
font-size: 2rem;
line-height: 1.6;
margin-bottom: 17px
}
.contact-01 .contact-01_form .mailform {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.contact-01 .contact-01_form .mailform .step {
width: 296px;
background-repeat: no-repeat;
background-size: 100% auto;
background-image: url(./../image/contact_step1.png);
padding-top: 26px
}
.contact-01 .contact-01_form .mailform .step dt {
text-align: center;
font-size: 1.4rem;
margin-bottom: 7px
}
.contact-01 .contact-01_form .mailform .step.step1 {
background-image: url(./../image/contact_step1.png)
}
.contact-01 .contact-01_form .mailform .step.step2 {
background-image: url(./../image/contact_step2.png)
}
.contact-01 .contact-01_form .mailform .pass {
width: 220px
}
.contact-01 .contact-01_form .mailform .pass a {
position: relative;
display: block;
text-align: center;
font-weight: bold;
background-color: #ffa524;
color: #222;
border-radius: 8px;
width: 100%;
line-height: 1.2;
padding: 10px 10px;
-webkit-box-shadow: 0 4px #b86e04;
box-shadow: 0 4px #b86e04
}
.contact-01 .contact-01_form .mailform .pass a:hover {
-webkit-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: none;
box-shadow: none;
background-color: #f69408
}
.contact-01 .contact-01_form .mailform .pass a .form-btn-txt1 {
display: block;
color: #ffa524;
background-color: white;
font-size: 1.2rem;
padding: 3px;
border-radius: 10px;
margin-bottom: 10px
}
.contact-01 .contact-01_form .mailform .pass a .form-btn-txt2 {
display: block;
font-size: 1.8rem;
margin-bottom: 10px
}
.contact-01 .contact-01_form .mailform .pass a .form-btn-txt3 {
position: relative;
display: block;
color: white;
font-size: 1.6rem
}
.contact-01 .contact-01_form .mailform .pass a .form-btn-txt3 span {
position: relative
}
.contact-01 .contact-01_form .mailform .pass a .form-btn-txt3 span::after {
content: "";
position: absolute;
margin: auto;
right: -14px;
top: 0;
bottom: 0;
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
}
.pro_sec {
background-color: #f0f0f0
}
@media screen and (max-width: 767px) {
.pro_sec {
padding: 20px 12.5px 30px
}
.pro_sec .txt {
position: relative;
font-weight: bold;
font-size: 1.6rem;
line-height: 1.625;
border-radius: 20px;
background-color: white;
-webkit-box-shadow: 0px 1px 4px 0px rgba(3, 0, 0, 0.16);
box-shadow: 0px 1px 4px 0px rgba(3, 0, 0, 0.16);
min-height: 100px;
padding: 10px 20px 10px;
margin-top: 14px;
margin-bottom: 14px
}
.pro_sec .txt::after {
content: "";
background-size: contain;
background-image: url(./../image/icon-anshin.png);
width: 43px;
height: 43px;
position: absolute;
right: -10px;
bottom: -10px
}
}
@media screen and (min-width: 768px) {
.pro_sec {
background-repeat: no-repeat;
background-image: url(./../image/pro_bg.gif);
background-position: center top;
text-align: center;
height: 424px;
padding-top: 170px;
font-weight: bold;
font-size: 2.4rem;
line-height: 1.667;
margin-top: 50px;
}
}
.trouble_sec {
background-color: #f0f0f0
}
.trouble_sec .box {
background-repeat: no-repeat;
background-image: url(./../image/icon-trouble.svg);
border-style: solid;
border-width: 4px;
border-color: #ffa524;
border-radius: 8px;
background-color: #fff
}
@media screen and (max-width: 767px) {
.trouble_sec .box {
background-size: 35px auto;
background-position: center 18px;
padding: 64px 15px 20px;
margin-top: 40px
}
.trouble_sec .txt {
font-size: 1.4rem;
line-height: 1.714;
margin-bottom: 16px
}
.trouble_sec .modal_btn a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
background-color: #ffa524;
background-position: right 6px center;
width: 250px;
height: 42px;
font-size: 1.4rem
}
}
@media screen and (min-width: 768px) {
.trouble_sec {
padding-top: 40px
}
.trouble_sec .box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
width: 960px;
min-height: 112px;
border-radius: 16px;
background-size: 50px auto;
background-position: 25px center;
padding: 15px 26px 15px 95px
}
.trouble_sec .txt {
font-size: 1.8rem;
line-height: 1.778;
width: 530px
}
.trouble_sec .modal_btn a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 4px;
background-color: #ffa524;
background-position: right 6px center;
width: 276px;
height: 36px;
font-size: 1.6rem
}
.trouble_sec .modal_btn a:hover {
color: white;
background-color: #f69408;
background-image: url(./../image/icon-modal_white.svg)
}
}
.modal-trouble .modal_content {
background-repeat: no-repeat;
background-image: url(./../image/icon-trouble.svg);
background-size: 35px auto;
background-position: center 16px;
padding: 52px 20px 16px
}
.modal-trouble .modal_content .ul-normal {
border-style: solid;
border-width: 4px;
border-color: #ffa524;
border-radius: 8px;
background-color: #fff
}
@media screen and (max-width: 767px) {
.modal-trouble .modal_content .block-head {
font-size: 1.6rem;
line-height: 1.6875;
margin-bottom: 8px
}
.modal-trouble .modal_content .txt1 {
margin-bottom: 30px
}
.modal-trouble .modal_content .ul-normal {
padding: 16px 10px 10px;
margin-bottom: 25px
}
.modal-trouble .modal_content .ul-normal li {
font-size: 1.4rem;
line-height: 1.714;
margin-bottom: 10px
}
.modal-trouble .modal_content .textarea p {
font-size: 1.4rem;
line-height: 1.714;
margin-bottom: 10px
}
}
@media screen and (min-width: 768px) {
.modal-trouble .modal_content {
background-size: 50px auto;
background-position: center 40px;
padding: 97px 50px 10px
}
.modal-trouble .modal_content .block-head {
font-size: 2rem;
line-height: 1.6;
margin-bottom: 26px
}
.modal-trouble .modal_content .txt1 {
margin-bottom: 12px
}
.modal-trouble .modal_content .ul-normal {
padding: 16px 14px 8px;
margin-bottom: 34px
}
.modal-trouble .modal_content .ul-normal li {
font-size: 1.6rem;
line-height: 1.754;
margin-bottom: 7px
}
.modal-trouble .modal_content .textarea p {
font-size: 1.6rem;
line-height: 1.754;
margin-bottom: 30px
}
}
.comment_sec {
background-color: #f0f0f0
}
@media screen and (max-width: 767px) {
.comment_sec {
padding-top: 50px;
padding-bottom: 50px
}
.comment_sec .list-link-right {
margin-top: 14px;
margin-bottom: 24px
}
.comment_sec .button-type1 {
margin-top: 28px
}
}
@media screen and (min-width: 768px) {
.comment_sec {
padding-top: 100px;
padding-bottom: 100px
}
.comment_sec .list-link-right {
margin-top: 44px;
margin-bottom: 40px
}
}
.arrow-right a {
position: relative;
padding-left: 1em
}
.arrow-right a::before {
content: "";
position: absolute;
margin: auto;
left: 4px;
top: 10px;
width: 4px;
height: 4px;
border-top: 1px solid #000;
border-right: 1px solid #000;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
@media screen and (min-width: 768px) {
.arrow-right a::before {
top: 12px
}
}
ul.list-link-right {
text-align: right
}
ul.list-link-right li {
margin-bottom: 10px
}
ul.list-link-right a {
position: relative;
text-decoration: underline;
padding-right: 1em;
font-size: 1.4rem;
line-height: 1.7143
}
ul.list-link-right a::before {
content: "";
position: absolute;
margin: auto;
right: 4px;
top: 10px;
width: 4px;
height: 4px;
border-top: 2px solid #000;
border-right: 2px solid #000;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
@media screen and (min-width: 768px) {
ul.list-link-right li {
margin-bottom: 4px
}
ul.list-link-right a {
font-size: 1.6rem
}
ul.list-link-right a::before {
right: 4px;
top: 10px;
width: 6px;
height: 6px;
border-top: 2px solid #000;
border-right: 2px solid #000;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
ul.list-link-right a:hover {
color: #ffa524
}
ul.list-link-right a:hover::before {
border-top: 2px solid #ffa524;
border-right: 2px solid #ffa524
}
}
.slide01-wrap {
position: relative
}
.slide01-wrap .slide01 a {
background-color: white;
margin-bottom: 12px
}
.slide01-wrap .slide01 a figure {
overflow: hidden;
width: 100%
}
.slide01-wrap .slide01 a .box-txt {
position: relative;
padding: 13px 13px
}
.slide01-wrap .slide01 a .box-txt .txt-comment {
background-repeat: no-repeat;
background-position: left top, right bottom;
background-image: url(./../image/comment_icon-start.png), url(./../image/comment_icon-end.png);
background-size: 17px auto;
-webkit-transition: 0.4s;
transition: 0.4s;
font-size: 1.8rem;
line-height: 1.556;
padding: 12px 17px
}
.slide01-wrap .slide01 a .box-txt .txt-name {
-webkit-transition: 0.4s;
transition: 0.4s;
font-size: 1.2rem;
padding: 4px 17px
}
.slide01-wrap .slide01 a .box-txt .slide-btn {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
right: 8px;
bottom: -12px;
text-align: center;
width: 112px;
height: 32px;
border-radius: 2px;
font-size: 1.2rem;
background-color: #ffa524;
-webkit-transition: 0.4s;
transition: 0.4s
}
.slide01-wrap .slide01 a .box-txt .slide-btn::before {
content: "続きを読む"
}
.slide01-wrap .slide01 a .box-txt .slide-btn::after {
content: "";
position: absolute;
margin: auto;
right: 6px;
top: 0;
bottom: 0;
width: 4px;
height: 4px;
border-top: 1px solid #000;
border-right: 1px solid #000;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
@media screen and (max-width: 767px) {
.slide01-wrap .slide01 {
overflow: visible
}
.slide01-wrap .slide01 a {
-webkit-box-shadow: 0px 1px 8px 0px rgba(3, 0, 0, 0.08);
box-shadow: 0px 1px 8px 0px rgba(3, 0, 0, 0.08)
}
.slide01-wrap .slide01 a .box-txt {
position: relative;
padding: 13px 13px 24px
}
.slide01-wrap .slide01 a .box-txt .txt-comment {
font-size: 1.4rem;
line-height: 1.7143;
padding: 12px 14px 2px
}
.slide01-wrap .slide01 a .box-txt .txt-name {
font-size: 1.2rem;
padding: 4px 17px;
text-align: right;
}
.slide01-wrap .slide01 a:hover figure img {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1)
}
.slide01-wrap .slide01 a:hover .txt-comment, .slide01-wrap .slide01 a:hover .txt-name {
opacity: .5
}
.slide01-wrap .slide01 a:hover .txt-box .slide-btn {
color: white
}
.slide01-wrap .slide01 a:hover .txt-box .slide-btn::after {
border-top: 2px solid white;
border-right: 2px solid white
}
}
@media screen and (min-width: 768px) {
.slide01-wrap .slide01 .swiper-slide {
width: 340px
}
.slide01-wrap .slide01 a {
-webkit-box-shadow: 0px 2px 16px 0px rgba(3, 0, 0, 0.08);
box-shadow: 0px 2px 16px 0px rgba(3, 0, 0, 0.08);
background-color: white;
margin-bottom: 12px
}
.slide01-wrap .slide01 a figure {
overflow: hidden;
width: 340px;
height: 190px
}
.slide01-wrap .slide01 a figure img {
width: 340px;
display: block;
-webkit-transition: 0.4s;
transition: 0.4s
}
.slide01-wrap .slide01 a .box-txt {
position: relative;
padding: 13px 13px
}
.slide01-wrap .slide01 a .box-txt .txt-comment {
background-repeat: no-repeat;
background-position: left top, right bottom;
background-image: url(./../image/comment_icon-start.png), url(./../image/comment_icon-end.png);
background-size: 17px auto;
-webkit-transition: 0.4s;
transition: 0.4s;
font-size: 1.8rem;
line-height: 1.556;
padding: 12px 17px
}
.slide01-wrap .slide01 a .box-txt .txt-name {
-webkit-transition: 0.4s;
transition: 0.4s;
font-size: 1.4rem;
padding: 4px 17px
}
.slide01-wrap .slide01 a .box-txt .slide-btn {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
right: 6px;
bottom: -12px;
text-align: center;
width: 112px;
height: 32px;
border-radius: 2px;
font-size: 1.4rem;
background-color: #ffa524;
-webkit-transition: 0.4s;
transition: 0.4s
}
.slide01-wrap .slide01 a .box-txt .slide-btn::before {
content: "続きを読む"
}
.slide01-wrap .slide01 a .box-txt .slide-btn::after {
content: "";
position: absolute;
margin: auto;
right: 6px;
top: 0;
bottom: 0;
width: 5px;
height: 5px;
border-top: 2px solid #000;
border-right: 2px solid #000;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.slide01-wrap .slide01 a:hover figure img {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1)
}
.slide01-wrap .slide01 a:hover .txt-comment, .slide01-wrap .slide01 a:hover .txt-name {
opacity: .5
}
.slide01-wrap .slide01 a:hover .box-txt .slide-btn {
color: white
}
.slide01-wrap .slide01 a:hover .box-txt .slide-btn::after {
border-top: 2px solid white;
border-right: 2px solid white
}
}
.slide02-wrap {
position: relative;
margin-top: 50px
}
.slide02-wrap .box .box-img {
background-color: #b8d8f7
}
.slide02-wrap .box .box-txt {
position: relative;
background-color: white;
padding: 13px 12px 13px
}
.slide02-wrap .box .txt-comment {
background-repeat: no-repeat;
background-position: left top, right bottom;
background-image: url(./../image/comment_icon-start.png), url(./../image/comment_icon-end.png);
background-size: 17px auto;
-webkit-transition: 0.4s;
transition: 0.4s;
font-size: 1.4rem;
line-height: 1.7143;
padding: 8px 10px;
width: 100%
}
@media screen and (max-width: 767px) {
.slide02-wrap .slide02 {
overflow: visible
}
}
@media screen and (min-width: 768px) {
.slide02-wrap .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 10px
}
.slide02-wrap .swiper-wrapper .swiper-slide {
display: block;
width: 530px;
margin-bottom: 40px
}
.slide02-wrap .swiper-button-next, .slide02-wrap .swiper-button-prev {
display: none
}
.slide02-wrap .box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.slide02-wrap .box div {
width: 50%
}
.slide02-wrap .box .box-txt {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 4px 24px
}
.slide02-wrap .box .txt-comment {
font-size: 1.8rem;
line-height: 1.556;
padding: 12px 16px
}
}
.slide03-wrap {
position: relative
}
.slide03-wrap .box .box-img {
background-color: #b8d8f7
}
.slide03-wrap .box .box-txt {
position: relative;
background-color: white;
padding: 13px 12px 13px
}
.slide03-wrap .box .txt-comment {
background-repeat: no-repeat;
background-position: left top, right bottom;
background-image: url(./../image/comment_icon-start.png), url(./../image/comment_icon-end.png);
background-size: 17px auto;
-webkit-transition: 0.4s;
transition: 0.4s;
font-size: 1.4rem;
line-height: 1.7143;
padding: 8px 10px;
width: 100%
}
@media screen and (max-width: 767px) {
.slide03-wrap .slide03 {
overflow: visible
}
}
@media screen and (min-width: 768px) {
.slide03-wrap .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.slide03-wrap .swiper-wrapper .swiper-slide {
display: block;
width: 252px
}
.slide03-wrap .swiper-button-next, .slide03-wrap .swiper-button-prev {
display: none
}
}
.google_sec{
background-color: #4f86e2;
color: white;
overflow: visible;
}
.google_sec .sec-lead span{
color: #4f86e2;
background-color: white;
}
.google_sec .sec-head{
color: #ffca3b;
padding-bottom: 16px;
margin-bottom: 30px;
}
.google_sec .sec-head:: after{
background-color: #3a69af;
}
.google_sec .txt2{
font-weight: bold;
color: #ffca3b;
}
.google_sec .slide03-wrap .swiper-container{
overflow: visible;
}
.google_sec .slide03-wrap .swiper-slide{
position: relative;
}
.google_sec .slide03-wrap .img{
position: relative;
overflow: hidden;
-webkit-transition: .2s;
transition: .2s;
}
.google_sec .slide03-wrap .img a{
position: relative;
background-color: white;
-webkit-box-shadow: 0px 2px 16px 0px rgba(3,0,0,0.08);
box-shadow: 0px 2px 16px 0px rgba(3,0,0,0.08);
-webkit-transition: .2s;
transition: .2s;
border-radius: 6px;
padding: 10px 8px 10px 4px;
min-height: 250px;
}
.google_sec .slide03-wrap .icon{
content: "";
position: absolute;
right: -10px;
top: 185px;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: white;
background-repeat: no-repeat;
background-image: url(./../image/icon-glass_yellow.svg);
background-size: 42% auto;
background-position: 56% 54%;
-webkit-box-shadow: 0px 1px 8px 0px rgba(3,0,0,0.2);
box-shadow: 0px 1px 8px 0px rgba(3,0,0,0.2);
}
.google_sec .star{
font-size: 1.0em;
padding-left: 12px;
padding-right: 4px;
background: none;
letter-spacing: 0.16em;
}
.google_sec .star:before{
content: "★★★★★";
position: absolute;
color: #ffca3b;
width: calc(6em - .1*(7.5em - .5em));
overflow: hidden;
white-space: nowrap;
}
@media screen and (max-width: 767px){
.google_sec{
padding: 50px 0 5px;
}
.google_sec .slide03-wrap .swiper-slide{
position: relative;
}
.google_sec .slide03-wrap .img{
height: 225px;
}
.google_sec .slide03-wrap .img a{
padding: 10px 8px 10px 4px;
min-height: 250px;
}
.google_sec .txt1{
text-align: center;
margin: 50px 10px;
font-size: 1.8rem;
}
}
@media screen and (min-width: 768px){
.google_sec{
padding: 100px 0 10px;
}
.google_sec .wrapper{
width: auto;
}
.google_sec .txt1{
text-align: center;
margin: 50px;
font-size: 2.4rem;
}
.google_sec .txt2{
font-size: 2.4rem;
}
.google_sec .slide03-wrap{
margin-left: auto;
margin-right: auto;
width: 1140px;
padding-left: 20px;
padding-right: 20px;
height: 310px;
}
.google_sec .slide03-wrap .swiper-container{
overflow: visible
}
.google_sec .slide03-wrap .img{
-webkit-transition: .2s;
transition: .2s;
height: 310px;
}
.google_sec .slide03-wrap .img a{
padding: 10px 8px 10px 4px;
min-height: 400px;
top: 10px;
}
.google_sec .slide03-wrap .img a: hover{
top: 0;
}
.google_sec .slide03-wrap .icon{
right: -10px;
top: 270px;
}
.google_sec .slide03-wrap .icon: hover{
background-color: #ffa524;
background-image: url(./../image/icon-glass_hover.svg);
background-size: 42% auto;
background-position: 56% 54%;
top: 270px;
}
}
.casestady_sec {
background-color: #f0f0f0
}
@media screen and (max-width: 767px) {
.casestady_sec {
padding-top: 60px;
padding-bottom: 50px
}
.casestady_sec .txt2 {
font-size: 1rem;
margin-bottom: 24px
}
.casestady_sec .button-type1 {
margin-top: 30px
}
}
@media screen and (min-width: 768px) {
.casestady_sec {
padding-top: 100px;
padding-bottom: 40px
}
.casestady_sec .txt1 {
text-align: center;
font-size: 1.8rem;
margin-bottom: 2px
}
.casestady_sec .txt2 {
text-align: center;
font-size: 1.4rem;
margin-bottom: 40px
}
.casestady_sec .button-type1 {
margin-top: 50px
}
}
.slide04-wrap {
position: relative
}
.slide04-wrap .slide04 .swiper-slide {
display: block;
background-color: white;
padding: 7px
}
.slide04-wrap .slide04 figure {
overflow: hidden;
width: 100%
}
.slide04-wrap .slide04 .box-txt th, .slide04-wrap .slide04 .box-txt td {
text-align: left
}
.slide04-wrap .slide04 .box-txt th {
padding-right: 10px
}
@media screen and (max-width: 767px) {
.slide04-wrap .slide04 {
overflow: visible
}
.slide04-wrap .slide04 .box-txt {
padding: 8px 8px 2px
}
.slide04-wrap .slide04 .box-txt th {
width: 78px
}
}
@media screen and (min-width: 768px) {
.slide04-wrap .slide04 .swiper-slide {
width: 340px
}
.slide04-wrap .slide04 .box-txt {
padding: 13px 20px 16px
}
.slide04-wrap .slide04 .box-txt th, .slide04-wrap .slide04 .box-txt td {
font-size: 1.4rem
}
.slide04-wrap .slide04 .box-txt th {
width: 90px
}
}
.contact_sec {
background-color: #fffee6
}
@media screen and (max-width: 767px) {
.contact_sec {
padding-top: 50px;
padding-bottom: 50px
}
}
@media screen and (min-width: 768px) {
.contact_sec {
padding-top: 50px;
padding-bottom: 50px
}
}
.contact-02 {
position: relative;
overflow: hidden;
background-repeat: no-repeat;
border: solid 4px #4f86e2;
border-radius: 8px;
background-color: white
}
.contact-02 h3 {
font-weight: bold;
color: #4f86e2
}
@media screen and (max-width: 767px) {
.contact-02 .contact-02_block {
background-color: white;
padding: 20px 0 24px
}
.contact-02 .contact-02_block .tag {
margin: 0 auto 16px;
width: 94%
}
.contact-02 .contact-02_block .txt-tag {
font-size: 1.2rem;
line-height: 1.667;
padding-left: 15px;
padding-right: 15px;
margin-top: -5px;
margin-bottom: 10px
}
.contact-02 .contact-02_block .txt-tag+.tel {
margin: 15px auto 15px;
width: 84%
}
.contact-02 .contact-02_block .txt1, .contact-02 .contact-02_block .txt2 {
padding-left: 15px;
padding-right: 15px
}
.contact-02 .contact-02_block .txt1 {
font-size: 1.8rem;
line-height: 1.5;
margin-bottom: 10px
}
.contact-02 .contact-02_block .btn {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0 14px;
margin-top: 24px
}
.imgbtnsp {
margin: 15px 0px 10px;
text-align: center;
}
.imgbtnsp img {
box-shadow: 0px 1px 3px 1px rgb(4 0 0 / 35%);
border-radius: 3.5vw;
}
.contact-02 .contact-02_block .btn a {
position: relative;
display: block;
text-align: center;
font-weight: bold;
background-color: #ffa524;
color: #222;
border-radius: 4px;
width: 100%;
line-height: 1.2;
padding: 9px 8px 12px;
-webkit-box-shadow: 0 4px #b86e04;
box-shadow: 0 4px #b86e04;
min-height: 50px
}
.contact-02 .contact-02_block .btn a .btn-txt1 {
display: inline-block;
color: #ffa524;
background-color: white;
font-size: 1rem;
padding: 1px 12px 1px;
border-radius: 7px;
margin-bottom: 7px;
margin-left: auto;
margin-right: auto
}
.contact-02 .contact-02_block .btn a .btn-txt2 {
display: block;
font-size: 1.6rem
}
.contact-02 .contact-02_block .btn a::after {
content: "";
position: absolute;
margin: auto;
right: 8px;
top: 0;
bottom: 0;
width: 4px;
height: 4px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
}
@media screen and (min-width: 768px) {
.contact-02 {
border-radius: 16px
}
.contact-02 .contact-02_block {
background-color: white;
background-image: url(./../image/contact_bg.jpg);
background-repeat: no-repeat;
background-position: right bottom;
padding-bottom: 30px
}
.contact-02 .contact-02_block .tag {
margin: 10px auto 26px;
width: 826px
}
.contact-02 .contact-02_block .txt-tag {
text-align: center;
font-size: 1.6rem;
line-height: 1.75;
padding-top: 20px;
margin-bottom: 17px
}
.contact-02 .contact-02_block .txt1 {
text-align: center;
font-size: 2.4rem;
line-height: 1.5;
margin-bottom: 18px
}
.contact-02 .contact-02_block .txt2 {
text-align: center;
line-height: 1.75
}
.contact-02 .contact-02_block .box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-left: auto;
margin-right: auto;
width: 870px;
padding-right: 35px;
margin-top: 22px
}
.contact-02 .contact-02_block .box .tel {
width: 402px
}
.contact-02 .contact-02_block .btn {
width: 400px;
padding: 0
}
.contact-02 .contact-02_block .btn a {
position: relative;
display: block;
text-align: center;
font-weight: bold;
background-color: #ffa524;
color: #222;
border-radius: 8px;
width: 100%;
line-height: 1.2;
padding: 9px 10px 1px;
-webkit-box-shadow: 0 4px #b86e04;
box-shadow: 0 4px #b86e04
}
.contact-02 .contact-02_block .btn a:hover {
-webkit-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: none;
box-shadow: none;
background-color: #f69408
}
.contact-02 .contact-02_block .btn a .btn-txt1 {
display: inline-block;
color: #ffa524;
background-color: white;
font-size: 1.2rem;
padding: 3px 20px;
border-radius: 10px;
margin-bottom: 10px
}
.contact-02 .contact-02_block .btn a .btn-txt2 {
display: block;
font-size: 1.8rem;
margin-bottom: 10px
}
.contact-02 .contact-02_block .btn a::after {
content: "";
position: absolute;
margin: auto;
right: 8px;
top: 0;
bottom: 0;
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
}
.box-trouble {
background-repeat: no-repeat;
background-image: url(./../image/icon-trouble.svg);
border-style: solid;
border-width: 4px;
border-color: #ffa524;
border-radius: 8px;
background-color: #fff
}
@media screen and (max-width: 767px) {
.box-trouble {
background-size: 35px auto;
background-position: center 20px;
padding: 64px 15px 20px
}
}
@media screen and (min-width: 768px) {
.box-trouble {
margin-left: auto;
margin-right: auto;
width: 960px;
border-radius: 16px;
background-size: 50px auto;
background-position: 25px 28px;
padding: 15px 26px 15px 95px
}
}
/*.table_sec{background-color:#f0f0f0}*/
.table_sec .txt1 {
font-weight: bold
}
.table_sec .ttl span {
color: white;
background-color: #133250;
padding: 4px 10px
}
@media screen and (max-width: 767px) {
.table_sec {
padding-top: 50px;
padding-bottom: 50px
}
.table_sec .textarea p {
margin-bottom: 10px
}
.table_sec .table-scroll {
margin-top: 23px;
margin-bottom: 28px
}
.table_sec .box-trouble {
padding-bottom: 10px
}
.table_sec .txt1 {
font-size: 1.6rem;
line-height: 1.75
}
.table_sec .ttl {
margin-top: 23px;
margin-bottom: 13px
}
.table_sec .ul-normal li {
margin-bottom: 10px
}
.table_sec .txt2 {
margin-top: 23px;
margin-bottom: 18px
}
}
@media screen and (min-width: 768px) {
.table_sec {
padding-top: 100px;
padding-bottom: 30px
}
.table_sec .textarea p {
font-size: 1.8rem;
margin-bottom: 18px
}
.table_sec .table-scroll {
margin-top: 36px;
margin-bottom: 50px
}
.table_sec .box-trouble {
padding-bottom: 30px
}
.table_sec .txt1 {
font-size: 1.8rem;
line-height: 1.75;
margin-top: 20px;
margin-bottom: 36px
}
.table_sec .ttl {
margin-top: 23px;
margin-bottom: 13px
}
.table_sec .ttl span {
padding: 6px 14px
}
.table_sec .txt2 {
line-height: 2;
margin-top: 22px;
margin-bottom: 18px
}
}
.table-scroll table {
display: block;
position: relative
}
.table-scroll table th, .table-scroll table td {
vertical-align: top;
text-align: left;
border-right: solid 1px #ccc;
border-bottom: solid 1px #ccc;
background-color: white;
background-repeat: no-repeat;
background-position: 10px 9px;
background-size: 26px auto;
letter-spacing: 0
}
.table-scroll table th {
background-color: #eef4ff
}
.table-scroll table td.batsu {
background-image: url(./../image/icon-batsu.svg)
}
.table-scroll table td.circle {
background-image: url(./../image/icon-circle.svg);
background-color: #fff3d4;
border-left: solid 3px #4f86e2;
border-right: solid 3px #4f86e2;
}
.table-scroll table td.circle_under {
background-image: url(./../image/icon-circle.svg);
background-color: #fff3d4;
border-left: solid 3px #4f86e2;
border-right: solid 3px #4f86e2;
border-bottom: solid 3px #4f86e2;
}
.table-scroll table td.guide {
background-color: #fff3d4;
border-top: solid 3px #4f86e2;
border-left: solid 3px #4f86e2;
border-right: solid 3px #4f86e2;
}
.table-scroll table td.triangle {
background-image: url(./../image/icon-triangle.svg)
}
.table-scroll table tr:nth-child(1) th, .table-scroll table tr:nth-child(1) td {
text-align: center
}
.table-scroll table tr:nth-child(1) td {
font-weight: bold
}
@media screen and (max-width: 767px) {
.table-scroll {
position: relative;
overflow-x: auto;
padding-bottom: 20px
}
.table-scroll::-webkit-scrollbar {
width: 6px;
height: 6px
}
.table-scroll::-webkit-scrollbar-track {
background: #fff;
border-radius: 3px
}
.table-scroll::-webkit-scrollbar-thumb {
background-color: #ffa524;
border-radius: 3px
}
.table-scroll table {
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
width: 200%
}
.table-scroll table th, .table-scroll table td {
font-size: 1.2rem;
line-height: 1.667
}
.table-scroll table th {
width: 115px;
padding: 5px 10px
}
.table-scroll table td {
padding: 5px 10px 5px 46px
}
.table-scroll table th:nth-child(1) {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1
}
.table-scroll table tr:nth-child(1) th, .table-scroll table tr:nth-child(1) td {
padding: 5px 10px
}
}
@media screen and (min-width: 768px) {
.table-scroll table {
border-left: solid 1px #ccc
}
.table-scroll table th, .table-scroll table td {
font-size: 1.6rem;
line-height: 1.5;
background-position: 16px 21px;
background-size: 22px auto;
padding: 17px 10px
}
.table-scroll table th {
width: 196px
}
.table-scroll table td {
width: 300px;
padding-left: 55px
}
.table-scroll table td:nth-child(3) {
background-color: #fff3d4;
border-left: solid 6px #4f86e2;
border-right: solid 6px #4f86e2
}
.table-scroll table tr:nth-child(1) th, .table-scroll table tr:nth-child(1) td {
padding: 17px 10px;
border-top: solid 1px #ccc
}
.table-scroll table tr:nth-child(1) td {
font-size: 1.8rem
}
.table-scroll table tr:nth-child(1) td:nth-child(3) {
border-top: solid 6px #4f86e2
}
.table-scroll table tr:last-of-type td:nth-child(3) {
border-bottom: solid 6px #4f86e2
}
}
/* -----------------------------------------------
* agent
----------------------------------------------- */
.agent{
margin-top: 100px;
text-align: center;
}
.agent .block-head{
margin-bottom: 44px;
}
.agent img{
width: 65%;
display: inline;
margin-bottom: 50px;
}
.agent .txt{
margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
.agent{
margin-top: 50px;
}
.agent .block-head{
margin-bottom: 24px;
}
.agent img{
width: 100%;
}
.agent .txt{
text-align: left;
}
}
/*.best_sec{background-color:#fffee6}*/
@media screen and (max-width: 767px) {
.best_sec {
padding-top: 50px;
padding-bottom: 50px
}
.best_sec .bg {
margin-left: -5px;
margin-right: -5px
}
.best_sec .box {
margin-top: 26px
}
.best_sec .box .box-txt {
margin-bottom: 23px
}
}
@media screen and (min-width: 768px) {
.best_sec {
padding-top: 100px;
padding-bottom: 90px;
background-repeat: no-repeat;
background-position: center 308px;
background-image: url(./../image/best_bg.jpg)
}
.best_sec .box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 610px
}
.best_sec .box .box-txt {
width: 520px;
font-size: 1.8rem
}
.best_sec .box .box-img {
width: 520px
}
}
.step_sec {
background-color: #f0f0f0
}
.step_sec .sec-head .step {
color: #ffa524
}
.step_sec .box3 {
border: solid 1px #ccc;
border-radius: 10px;
background-color: white;
padding: 24px 18px 6px
}
.step_sec .box3 .toggle_body .toggle_more {
margin-bottom: 24px
}
@media screen and (min-width: 768px) {
.step_sec .box3 {
font-size: 1.8rem;
line-height: 2;
padding: 24px 40px 24px
}
.step_sec .box3 .block-head {
text-align: center;
margin-bottom: 12px
}
}
.step_sec .box2 img {
border-radius: 10px
}
.step1_sec .box1 {
position: relative;
border: solid 6px #5288df;
background-color: white;
margin-left: auto;
margin-right: auto
}
.step1_sec .box1::after {
content: "";
background-size: contain;
background-image: url(./../image/icon-anshin.png);
width: 58px;
height: 58px;
position: absolute;
right: -15px;
top: -15px
}
.step1_sec .block-head {
text-align: center
}
.step1_sec .box2 figcaption {
text-align: center
}
@media screen and (max-width: 767px) {
.step1_sec {
padding-top: 50px;
padding-bottom: 50px
}
.step1_sec .txt1 {
margin-bottom: 58px
}
.step1_sec .box1 {
padding: 22px 14px 6px;
margin-bottom: 30px
}
.step1_sec .box1 .block-head {
margin-bottom: 24px
}
.step1_sec .box1 .toggle_body .toggle_more {
margin-bottom: 24px
}
.step1_sec .box2 figure {
margin-bottom: 24px
}
.step1_sec .box2 figure:last-of-type {
margin-bottom: 14px
}
.step1_sec .box2 figure img {
margin-bottom: 10px
}
.step1_sec .list-link-right a {
font-size: 1.2rem
}
.step1_sec .box-trouble {
margin-top: 24px
}
}
@media screen and (min-width: 768px) {
.step1_sec {
padding-top: 100px;
padding-bottom: 100px
}
.step1_sec .txt1 {
text-align: center;
font-size: 1.8rem;
margin-bottom: 40px
}
.step1_sec .box1 {
width: 820px;
padding: 24px 24px 22px;
margin-bottom: 50px
}
.step1_sec .box1::after {
width: 96px;
height: 96px;
right: -31px;
top: -31px
}
.step1_sec .box1 .block-head {
margin-bottom: 20px
}
.step1_sec .box2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 30px
}
.step1_sec .box2 figure {
width: 530px
}
.step1_sec .box2 figure img {
margin-bottom: 10px
}
.step1_sec .box-trouble {
margin-top: 40px;
font-size: 1.8rem
}
}
@media screen and (max-width: 767px) {
.step2_sec {
padding-bottom: 50px
}
.step2_sec .txt1 {
margin-bottom: 20px
}
}
@media screen and (min-width: 768px) {
.step2_sec {
padding-bottom: 100px
}
.step2_sec .txt1 {
font-size: 1.8rem;
line-height: 2;
margin-bottom: 40px
}
}
@media screen and (max-width: 767px) {
.step3_sec {
padding-bottom: 50px
}
.step3_sec .txt1 {
margin-bottom: 20px
}
}
@media screen and (min-width: 768px) {
.step3_sec {
padding-bottom: 50px
}
.step3_sec .txt1 {
font-size: 1.8rem;
line-height: 2;
margin-bottom: 40px
}
}
.network1_sec {
background-color: white
}
.network1_sec .block2 {
border: solid 1px #ccc;
background-color: white;
border-radius: 10px
}
@media screen and (max-width: 767px) {
.network1_sec {
padding-top: 50px;
padding-bottom: 50px
}
.network1_sec .block1 {
padding-bottom: 5px
}
.network1_sec .block1 .box-img {
padding-right: 8%;
margin-bottom: 24px
}
.network1_sec .block1 .textarea p, .network1_sec .block1 .textarea li {
margin-bottom: 10px
}
.network1_sec .block1 .textarea .txt1 {
margin-bottom: 3px
}
.network1_sec .block1 .textarea .txt2 {
font-size: 1rem
}
.network1_sec .block2 {
padding: 24px 18px 6px
}
.network1_sec .block2 .block-head {
margin-bottom: 10px
}
.network1_sec .block2 .list-img1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 14px;
margin-bottom: 26px
}
.network1_sec .block2 .list-img1 li {
width: 48%
}
.network1_sec .block2 .list-img1 li:nth-child(1) {
margin-right: 2%;
margin-bottom: 10px
}
.network1_sec .block2 .list-img1 li:nth-child(2) {
margin-left: 2%;
margin-bottom: 10px
}
.network1_sec .block2 .list-img2 {
margin-top: 14px;
margin-bottom: 26px
}
.network1_sec .block2 .list-img2 li {
margin-bottom: 20px
}
}
@media screen and (min-width: 768px) {
.network1_sec {
padding-top: 50px;
padding-bottom: 100px
}
.network1_sec .block1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
font-size: 1.8rem;
line-height: 2;
margin-top: 30px;
margin-bottom: 40px
}
.network1_sec .block1 .box-img {
width: 502px
}
.network1_sec .block1 .box-txt {
width: 550px
}
.network1_sec .block1 .textarea p {
margin-bottom: 17px
}
.network1_sec .txt1 {
font-size: 1.8rem;
line-height: 2
}
.network1_sec .txt2 {
font-size: 1.4rem;
margin-bottom: 42px
}
.network1_sec .block2 {
border-radius: 16px;
padding: 24px 40px 30px;
font-size: 1.8rem;
line-height: 2
}
.network1_sec .block2 .block-head {
text-align: center;
margin-bottom: 14px
}
.network1_sec .block2 .list-img1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
width: 940px;
margin-top: 20px;
margin-bottom: 44px
}
.network1_sec .block2 .list-img1 li {
width: 300px
}
.network1_sec .block2 .list-img2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 20px
}
.network1_sec .block2 .list-img2 li {
width: 480px
}
}
.safe_sec {
background-color: #fffee6
}
.safe_sec .block2 {
border: solid 1px #ccc;
border-radius: 10px;
background-color: white;
padding: 24px 18px 6px
}
@media screen and (max-width: 767px) {
.safe_sec {
padding-top: 50px;
padding-bottom: 50px
}
.safe_sec .block1 .box-txt p {
margin-bottom: 10px
}
.safe_sec .block1 .list-link-right a {
font-size: 1.2rem
}
.safe_sec .block2 {
margin-top: 30px;
margin-bottom: 30px
}
.safe_sec .block2 .toggle_body .toggle_more {
margin-bottom: 24px
}
}
@media screen and (min-width: 768px) {
.safe_sec {
padding-top: 100px;
padding-bottom: 100px
}
.safe_sec .block1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
margin-top: 40px
}
.safe_sec .block1 .box-img {
width: 530px
}
.safe_sec .block1 .box-txt {
width: 530px
}
.safe_sec .block1 .box-txt p {
font-size: 1.8rem;
line-height: 2;
margin-bottom: 16px
}
.safe_sec .block1 .list-link-right {
text-align: left;
margin-top: 30px
}
.safe_sec .block2 {
font-size: 1.8rem;
line-height: 2;
padding: 24px 40px 24px;
margin-top: 50px;
margin-bottom: 44px
}
.safe_sec .block2 .block-head {
text-align: center;
margin-bottom: 14px
}
}
.media_sec {
background-color: #f0f0f0
}
.media_sec .list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
@media screen and (max-width: 767px) {
.media_sec {
padding-top: 50px;
padding-bottom: 34px
}
.media_sec .txt1 {
margin-bottom: 22px
}
.media_sec .list {
margin-bottom: 3px
}
.media_sec .list li {
width: 43.7%;
margin-bottom: 20px;
margin-left: 3%;
margin-right: 3%
}
}
@media screen and (min-width: 768px) {
.media_sec {
padding-top: 100px;
padding-bottom: 90px
}
.media_sec .txt1 {
font-size: 1.8rem;
line-height: 2;
margin-bottom: 38px
}
.media_sec .list {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 40px
}
.media_sec .list li {
width: 245px
}
}
.corpration_sec {
background-color: #f0f0f0
}
.corpration_sec .block2 {
text-align: right
}
@media screen and (max-width: 767px) {
.corpration_sec {
padding-bottom: 40px
}
.corpration_sec .block {
text-align: center
}
.corpration_sec .block .box {
margin-bottom: 30px
}
.corpration_sec .block .block-head {
margin-bottom: 16px
}
.corpration_sec .toggle_body .toggle_more {
margin-bottom: 24px
}
}
@media screen and (min-width: 768px) {
.corpration_sec {
padding-bottom: 90px
}
.corpration_sec .block-head {
font-size: 2rem
}
.corpration_sec .block {
float: left;
width: 100%;
margin-top: 26px;
margin-bottom: 50px
}
.corpration_sec .block .block-head {
margin-bottom: 12px
}
.corpration_sec .block .box {
float: left;
width: 360px;
border-left: solid 1px #ccc;
padding: 0 20px
}
.corpration_sec .block .box ul {
font-size: 1.6rem;
line-height: 2.25
}
.corpration_sec .block2 {
clear: both
}
}
.support_sec {
background-color: white
}
.support_sec .box-prezent {
background-color: #5288df;
border-radius: 10px
}
.support_sec .box-prezent .ttl {
text-align: center;
font-weight: bold;
color: #ffca3b
}
.support_sec .box-prezent figcaption {
text-align: center;
font-weight: bold;
background-color: white;
color: #5288df
}
.support_sec .box-prezent figcaption small {
display: block;
font-weight: normal
}
.support_sec .box-prezent img {
border-top-left-radius: 7px;
border-top-right-radius: 7px
}
.support_sec .bolck2 {
border-style: solid;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
background-color: #fff
}
.support_sec .bolck2 .list-img {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.support_sec .bolck2 .list-img li {
width: 48%;
margin-bottom: 10px
}
@media screen and (max-width: 767px) {
.support_sec {
padding-top: 50px;
padding-bottom: 50px
}
.support_sec .bolck1 {
margin-bottom: 30px
}
.support_sec .bolck1 .block-head {
margin-bottom: 24px
}
.support_sec .bolck1 .img1 {
margin-bottom: 30px
}
.support_sec .bolck1 .box-prezent {
padding: 15px 16px 5px
}
.support_sec .bolck1 .box-prezent .ttl {
font-size: 2rem;
line-height: 1.3;
margin-bottom: 10px
}
.support_sec .bolck1 .box-prezent figure {
margin-bottom: 12px;
border-radius: 3px
}
.support_sec .bolck1 .box-prezent figcaption {
font-size: 1.4rem;
border-radius: 0 0 3px 3px;
padding: 6px 2px
}
.support_sec .bolck1 .box-prezent figcaption small {
font-size: 1rem
}
.support_sec .bolck2 {
margin-bottom: 30px;
padding: 20px 20px 24px
}
.support_sec .bolck2 .block-head {
margin-bottom: 12px
}
.support_sec .bolck2 .txt1 {
margin-bottom: 24px
}
.support_sec .bolck2 .box2 .box-left {
margin-bottom: 24px
}
.support_sec .bolck2 .box2 .box-right img {
margin-bottom: 10px
}
.support_sec .bolck2 .box2 .caption {
text-align: center;
font-size: 1.2rem;
line-height: 1.667
}
}
@media screen and (min-width: 768px) {
.support_sec {
padding-top: 100px;
padding-bottom: 25px
}
.support_sec .bolck1 {
margin-bottom: 50px
}
.support_sec .bolck1 .block-head {
text-align: center;
margin-bottom: 44px
}
.support_sec .bolck1 .img1 {
margin-bottom: 50px
}
.support_sec .bolck1 .box1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.support_sec .bolck1 .flow-counter {
width: 640px
}
.support_sec .bolck1 .box-right {
width: 420px
}
.support_sec .bolck1 .box-prezent {
width: 420px;
padding: 16px 20px 5px
}
.support_sec .bolck1 .box-prezent .ttl {
font-size: 2.4rem;
line-height: 1.333;
margin-bottom: 18px
}
.support_sec .bolck1 .box-prezent figure {
margin-bottom: 14px;
border-radius: 8px
}
.support_sec .bolck1 .box-prezent figcaption {
font-size: 1.6rem;
border-radius: 0 0 8px 8px;
padding: 6px 2px
}
.support_sec .bolck1 .box-prezent figcaption small {
font-size: 1.2rem
}
.support_sec .bolck2 {
margin-bottom: 50px;
padding: 25px 40px 36px
}
.support_sec .bolck2 .block-head {
text-align: center;
margin-bottom: 15px
}
.support_sec .bolck2 .txt1 {
font-size: 1.8rem;
line-height: 2;
margin-bottom: 10px
}
.support_sec .bolck2 .box2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.support_sec .bolck2 .box2 .box-left {
width: 604px
}
.support_sec .bolck2 .box2 .list-img {
margin-bottom: 6px
}
.support_sec .bolck2 .box2 .list-img li {
width: 300px;
margin-bottom: 4px
}
.support_sec .bolck2 .box2 .box-right {
width: 411px
}
.support_sec .bolck2 .box2 .box-right img {
margin-bottom: 10px
}
.support_sec .bolck2 .box2 .caption {
text-align: center;
font-size: 1.6rem;
line-height: 1.75
}
}
.network2_sec {
background-color: #f0f0f0
}
.network2_sec .block2 {
border: solid 1px #ccc;
background-color: white;
border-radius: 10px
}
@media screen and (max-width: 767px) {
.network2_sec {
padding-top: 50px;
padding-bottom: 50px
}
.network2_sec .block1 {
padding-bottom: 5px
}
.network2_sec .block1 .box-img {
padding-right: 8%;
margin-bottom: 24px
}
.network2_sec .block1 .textarea p, .network2_sec .block1 .textarea li {
margin-bottom: 10px
}
.network2_sec .block2 {
padding: 24px 18px 6px
}
.network2_sec .block2 .block-head {
margin-bottom: 10px
}
.network2_sec .block2 .textarea p {
margin-bottom: 10px
}
}
@media screen and (min-width: 768px) {
.network2_sec {
padding-top: 100px;
padding-bottom: 50px
}
.network2_sec .block1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
font-size: 1.8rem;
line-height: 2;
margin-top: 40px;
margin-bottom: 20px
}
.network2_sec .block1 .box-img {
width: 502px
}
.network2_sec .block1 .box-txt {
width: 550px
}
.network2_sec .block1 .textarea p {
margin-bottom: 17px
}
.network2_sec .block2 {
border-radius: 16px;
padding: 24px 40px 30px;
font-size: 1.8rem;
line-height: 2
}
.network2_sec .block2 .block-head {
text-align: center;
margin-bottom: 14px
}
.network2_sec .block2 .textarea p {
margin-bottom: 17px
}
.network2_sec .block2 .textarea p:last-of-type {
margin-bottom: 0
}
}
.example_sec {
background-color: #f0f0f0
}
@media screen and (max-width: 767px) {
.example_sec {
padding-bottom: 50px
}
.example_sec .box .box-img {
margin-bottom: 30px
}
.example_sec .box .box-img ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.example_sec .box .box-img ul li {
width: 48%;
margin-bottom: 10px
}
.example_sec .box .box-img ul li img {
border: solid 2px white;
border-radius: 4px;
background-color: #ccd3d2;
-webkit-box-shadow: 0px 2px 6px 0px rgba(3, 0, 0, 0.38);
box-shadow: 0px 2px 6px 0px rgba(3, 0, 0, 0.38)
}
.example_sec .box .box-txt p {
margin-bottom: 10px
}
.example_sec .box .box-txt p:last-of-type {
margin-bottom: 0
}
}
@media screen and (min-width: 768px) {
.example_sec {
padding-top: 50px;
padding-bottom: 100px
}
.example_sec .box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 40px
}
.example_sec .box .box-img {
width: 525px;
padding-right: 15px
}
.example_sec .box .box-img ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.example_sec .box .box-img ul li {
width: 244px;
margin-bottom: 20px
}
.example_sec .box .box-img ul li img {
border: solid 4px white;
border-radius: 8px;
background-color: #ccd3d2;
-webkit-box-shadow: 0px 4px 12px 0px rgba(3, 0, 0, 0.38);
box-shadow: 0px 4px 12px 0px rgba(3, 0, 0, 0.38)
}
.example_sec .box .box-txt {
width: 540px
}
.example_sec .box .box-txt p {
font-size: 1.8rem;
line-height: 2;
margin-bottom: 17px
}
.example_sec .box .box-txt p:last-of-type {
margin-bottom: 0
}
}
.check_sec {
background-color: #fffee6
}
.check_sec .img1 img {
border-radius: 10px
}
@media screen and (max-width: 767px) {
.check_sec {
padding-top: 50px;
padding-bottom: 40px
}
.check_sec .txt1 {
margin-bottom: 20px
}
.check_sec .img1 {
margin-bottom: 30px
}
.check_sec .slide05-wrap {
margin-bottom: 24px
}
.check_sec .box .box-txt {
margin-bottom: 30px
}
.check_sec .box .box-txt p {
margin-bottom: 10px
}
.check_sec .box .box-txt p:last-of-type {
margin-bottom: 0
}
.check_sec .box .box-img {
padding-right: 9%
}
}
@media screen and (min-width: 768px) {
.check_sec {
padding-top: 100px;
padding-bottom: 90px
}
.check_sec .txt1 {
text-align: center;
font-size: 1.8rem;
line-height: 2;
margin-bottom: 40px
}
.check_sec .img1 {
margin-left: auto;
margin-right: auto;
width: 940px;
margin-bottom: 50px
}
.check_sec .box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.check_sec .box .box-txt {
width: 540px
}
.check_sec .box .box-txt p {
font-size: 1.8rem;
line-height: 2;
margin-bottom: 17px
}
.check_sec .box .box-txt p:last-of-type {
margin-bottom: 0
}
.check_sec .box .box-img {
width: 523px
}
}
.slide05-wrap {
position: relative
}
.slide05-wrap ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
border: solid 1px #ccc;
border-radius: 8px;
background-color: white;
padding: 10px
}
.slide05-wrap ul li {
width: 48%;
border-radius: 6px;
font-size: 1.2rem;
line-height: 1.667
}
.slide05-wrap ul li .txt {
background-repeat: no-repeat;
background-size: 26px auto;
background-position: center 10px;
border-radius: 6px;
padding: 40px 14px 10px
}
.slide05-wrap ul li:nth-child(1) {
background-color: #e3eeff
}
.slide05-wrap ul li:nth-child(1) .txt {
background-image: url(./../image/icon-circle.svg)
}
.slide05-wrap ul li:nth-child(2) {
background-color: #dcdcdc
}
.slide05-wrap ul li:nth-child(2) .txt {
background-image: url(./../image/icon-triangle.svg)
}
.slide05-wrap .box .box-img {
background-color: #b8d8f7
}
.slide05-wrap .box .box-txt {
position: relative;
background-color: white;
padding: 13px 12px 13px
}
.slide05-wrap .box .txt-comment {
background-repeat: no-repeat;
background-position: left top, right bottom;
background-image: url(./../image/comment_icon-start.png), url(./../image/comment_icon-end.png);
background-size: 17px auto;
-webkit-transition: 0.4s;
transition: 0.4s;
font-size: 1.4rem;
line-height: 1.7143;
padding: 8px 10px;
width: 100%
}
@media screen and (min-width: 768px) {
.slide05-wrap .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 10px
}
.slide05-wrap .swiper-wrapper .swiper-slide {
display: block;
width: 534px;
margin-bottom: 40px
}
.slide05-wrap .swiper-button-next, .slide05-wrap .swiper-button-prev {
display: none
}
.slide05-wrap ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
border: solid 1px #ccc;
border-radius: 16px;
background-color: white;
padding: 20px
}
.slide05-wrap ul li {
width: 242px;
border-radius: 6px;
font-size: 1.6rem;
line-height: 1.75
}
.slide05-wrap ul li .txt {
background-position: center 16px;
border-radius: 6px;
padding: 52px 20px 20px
}
.slide05-wrap .box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.slide05-wrap .box div {
width: 50%
}
.slide05-wrap .box .box-txt {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 4px 24px
}
.slide05-wrap .box .txt-comment {
font-size: 1.8rem;
line-height: 1.556;
padding: 12px 16px
}
}
.message_sec {
background-color: #f0f0f0
}
.message_sec .block1 p:last-of-type {
margin-bottom: 0
}
@media screen and (max-width: 767px) {
.message_sec {
padding-top: 50px;
padding-bottom: 50px
}
.message_sec .block1 {
font-size: 1.4rem;
line-height: 1.714;
margin-bottom: 30px
}
.message_sec .block1 p {
margin-bottom: 10px
}
.message_sec .box-message {
margin-bottom: 10px
}
.message_sec .box-message .box-img {
width: 190px;
margin-left: auto;
margin-right: auto;
margin-bottom: 24px
}
}
@media screen and (min-width: 768px) {
.message_sec {
padding-top: 100px;
padding-bottom: 30px
}
.message_sec .block1 {
margin-left: auto;
margin-right: auto;
width: 900px;
font-size: 1.8rem;
line-height: 2;
margin-bottom: 40px
}
.message_sec .block1 p {
margin-bottom: 17px
}
.message_sec .box-message {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
margin-bottom: 20px
}
.message_sec .box-message .box-img {
width: 380px
}
.message_sec .box-message .box-txt {
width: 480px
}
}
.message_sec .box-message .box-img img {
border-radius: 15px
}
.staff_sec {
background-color: white
}
.staff_sec figcaption {
text-align: center;
line-height: 2
}
@media screen and (max-width: 767px) {
.staff_sec {
padding-top: 50px;
padding-bottom: 40px
}
.staff_sec .sec-lead {
margin-bottom: 10px
}
.staff_sec .sec-lead span {
max-width: 330px
}
.staff_sec figcaption {
font-size: 1rem;
margin-top: 4px
}
}
@media screen and (min-width: 768px) {
.staff_sec {
padding-top: 100px;
padding-bottom: 90px
}
.staff_sec .sec-lead {
margin-bottom: 20px
}
.staff_sec .sec-lead span {
max-width: 360px
}
.staff_sec .sec-head {
margin-bottom: 50px
}
.staff_sec figure {
margin-left: -100px;
margin-right: -100px
}
.staff_sec figcaption {
font-size: 1.8rem;
margin-top: 10px
}
}
.sitemap_sec {
background-color: #f0f0f0
}
.sitemap_sec .block {
background-color: white;
border-radius: 8px;
padding: 16px 20px 10px;
margin-bottom: 30px
}
.sitemap_sec .block ul li {
position: relative
}
.sitemap_sec .block-head {
text-align: center;
font-weight: bold;
color: #4d83e5;
font-size: 1.8rem;
line-height: 1.7;
border-bottom: solid 1px #ccc;
padding-bottom: 5px;
margin-bottom: 16px
}
.sitemap_sec .btn {
text-align: center
}
.sitemap_sec .btn a {
font-weight: bold;
background-color: #ffa524;
color: #222;
-webkit-box-shadow: 0 4px #b86e04;
box-shadow: 0 4px #b86e04;
border-radius: 4px;
width: 100%;
line-height: 1;
padding: 10px
}
.sitemap_sec .link {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.sitemap_sec .link li {
margin: 0 10px
}
.sitemap_sec .link li a {
text-decoration: underline
}
@media screen and (max-width: 767px) {
.sitemap_sec {
padding-top: 42px;
padding-bottom: 56px
}
.sitemap_sec .block ul li {
margin-bottom: 10px
}
.sitemap_sec .block ul a::before {
left: 2px;
top: 9px
}
.sitemap_sec .btn {
margin-bottom: 20px
}
.sitemap_sec .btn a {
max-width: 320px;
border-radius: 6px;
font-size: 1.6rem;
padding: 17px 10px
}
}
@media screen and (min-width: 768px) {
.sitemap_sec {
padding-top: 94px;
padding-bottom: 92px
}
.sitemap_sec .sec-head {
font-size: 2.4rem;
line-height: 1.667;
padding-bottom: 23px;
margin-bottom: 30px
}
.sitemap_sec .block {
padding: 14px 30px 10px;
margin-bottom: 20px
}
.sitemap_sec .block ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.sitemap_sec .block ul li {
width: 50%;
font-size: 1.4rem;
margin-bottom: 8px
}
.sitemap_sec .block ul a:hover {
color: #ffa524;
text-decoration: underline
}
.sitemap_sec .block ul a::before {
left: 2px;
top: 11px
}
.sitemap_sec .block-head {
font-size: 2rem;
line-height: 1.7;
border-bottom: solid 1px #ccc;
padding-bottom: 10px;
margin-bottom: 16px
}
.sitemap_sec .btn {
margin-top: 50px;
margin-bottom: 28px
}
.sitemap_sec .btn a {
border-radius: 15px;
width: 360px;
font-size: 1.8rem;
padding: 23px 10px
}
.sitemap_sec .btn a:hover {
-webkit-transform: translateY(4px);
transform: translateY(4px);
-webkit-box-shadow: none;
box-shadow: none
}
.sitemap_sec .link li a::before {
left: 2px;
width: 5px;
height: 5px;
border-top: 2px solid #000;
border-right: 2px solid #000
}
}
.clearfix:after {
content: "";
display: block;
clear: both
}
.mainVisual {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
background: url(./../image/main_visual_bg.png) no-repeat center top;
background-size: cover
}
.mainVisual .content {
margin: 0 auto;
padding-left: 46px;
width: 1100px;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.mainVisual .lBox {
padding-top: 38px;
float: left;
text-align: center
}
.mainVisual .lBox>div {
opacity: 0;
-webkit-transition: opacity 0.75s;
transition: opacity 0.75s
}
.mainVisual .lBox img {
margin: 0 auto
}
.mainVisual .lBox .txt01 {
margin: 0 0 13px 3px;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s
}
.mainVisual .lBox .txt02 {
margin: 0 0 18px 3px;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s
}
.mainVisual .lBox .txt03 {
margin-bottom: 23px;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s
}
.mainVisual .lBox .txt04 {
margin-right: 1px;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s
}
.mainVisual.on {
opacity: 1
}
.mainVisual.on .lBox .txt01, .mainVisual.on .lBox .txt02, .mainVisual.on .lBox .txt04 {
opacity: 1
}
.mainVisual.on .lBox .txt01 img {
width: 405px
}
.mainVisual.on .lBox .txt03 {
-webkit-animation: bounceIn 0.75s 0.3s forwards;
animation: bounceIn 0.75s 0.3s forwards
}
.mainVisual.on .lBox .txt03 img {
width: 563px
}
@-webkit-keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3)
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9)
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97)
}
to {
opacity: 1;
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
@keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3)
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9)
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97)
}
to {
opacity: 1;
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.mainVisual .rBox {
padding: 0 65px 0 73px;
position: relative;
width: 350px;
height: 520px;
overflow: hidden;
float: right;
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
.mainVisual .rBox .img {
position: absolute;
z-index: 10
}
.mainVisual .rBox .img span {
position: absolute;
width: 100%;
height: 100%;
z-index: 10
}
.mainVisual.on .rBox {
opacity: 1
}
@media all and (-ms-high-contrast: none) {
.mainVisual .rBox .img span {
border-radius: 50%;
overflow: hidden;
-webkit-mask-image: none !important
}
}
.mainVisual .rBox .img.shiny span::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
-webkit-animation: shiny-btn 2s ease-in-out;
animation: shiny-btn 2s ease-in-out
}
.mainVisual .rBox .img02.shiny span::before {
-webkit-animation-delay: 1s;
animation-delay: 1s
}
@-webkit-keyframes shiny-btn {
0% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0
}
80% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0.5
}
81% {
-webkit-transform: scale(4) rotate(45deg);
opacity: 1
}
100% {
-webkit-transform: scale(50) rotate(45deg);
opacity: 0
}
}
@keyframes shiny-btn {
0% {
-webkit-transform: scale(0) rotate(45deg);
transform: scale(0) rotate(45deg);
opacity: 0
}
80% {
-webkit-transform: scale(0) rotate(45deg);
transform: scale(0) rotate(45deg);
opacity: 0.5
}
81% {
-webkit-transform: scale(4) rotate(45deg);
transform: scale(4) rotate(45deg);
opacity: 1
}
100% {
-webkit-transform: scale(50) rotate(45deg);
transform: scale(50) rotate(45deg);
opacity: 0
}
}
.mainVisual .rBox .img01 {
left: 0;
bottom: 25px
}
.mainVisual .rBox .img01 img {
width: 140px
}
.mainVisual .rBox .img01 span {
-webkit-mask-image: url(./../image/img01.png);
mask-image: url(./../image/img01.png);
-webkit-mask-size: 140px auto;
mask-size: 140px auto
}
.mainVisual .rBox .img02 {
right: 2px;
top: 20px
}
.mainVisual .rBox .img02 img {
width: 141px
}
.mainVisual .rBox .img02 span {
-webkit-mask-image: url(./../image/img02.png);
mask-image: url(./../image/img02.png);
-webkit-mask-size: 141px auto;
mask-size: 141px auto
}
.mainVisual .slickBox img {
width: 329px
}
.mainVisual .slick-slide {
margin: 0 0 27px;
border: none;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s
}
.mainVisual .slick-slide div {
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.mainVisual .slick-center {
-webkit-transform: none;
transform: none
}
@media screen and (max-width: 767px) {
.mainVisual {
background: url(./../image/sp_main_visual_bg.png) no-repeat center top;
background-size: cover
}
.mainVisual .content {
padding-left: 0;
width: auto
}
.mainVisual .lBox {
padding: 20px 13px 7px 12px;
float: none
}
.mainVisual .lBox .txt01 {
margin: 0 0 7px 5px
}
.mainVisual .lBox .txt01 img {
width: 247px
}
.mainVisual .lBox .txt02 {
margin: 0 0 15px 1px
}
.mainVisual .lBox .txt03 {
margin-bottom: 12px
}
.mainVisual .lBox .txt03 img {
width: 343px
}
.mainVisual .lBox .txt04 {
margin: 0 0 0 5px
}
.mainVisual .rBox {
padding: 2px 0 22px;
width: auto;
height: auto;
float: none
}
.mainVisual .rBox .img01 {
left: 13px;
bottom: 23px
}
.mainVisual .rBox .img01 img {
width: 87px
}
.mainVisual .rBox .img01 span {
-webkit-mask-image: url(./../image/img01.png);
mask-image: url(./../image/img01.png);
-webkit-mask-size: 87px auto;
mask-size: 87px auto
}
.mainVisual .rBox .img02 {
right: 13px;
top: 3px
}
.mainVisual .rBox .img02 img {
width: 88px
}
.mainVisual .rBox .img02 span {
-webkit-mask-image: url(./../image/img02.png);
mask-image: url(./../image/img02.png);
-webkit-mask-size: 88px auto;
mask-size: 88px auto
}
.mainVisual .slick-slide {
margin: 0 7px 0 6px
}
.mainVisual .slick-slide>div {
padding: 6px 6px 5px
}
.mainVisual .slick-center {
-webkit-transform: none;
transform: none
}
}
/*# sourceMappingURL=style.css.map */
/**
* -------------------------------------------
* Apoo(20210707) ここから一番下まで。。
*
* TOP MainVisual
* --------------------------------------------
*/
.top-mainVisual {
overflow: hidden;
background: url(./../image/sp_main_visual_bg2.png) no-repeat center top/cover;
}
.top-mainVisual_content {
padding: 0 12px;
}
.top-mainVisual_badges {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: .5em;
padding: 1em 0 0;
}
.top-mainVisual_badges img {
width: 100%;
}
.top-mainVisual_tags {
position: relative;
top: -.8rem;
}
.top-mainVisual_tags img.sp {
margin: auto;
width: 100%;
}
.top-mainVisual_title img.sp {
margin: auto;
width: 100%;
}
.top-mainVisual_prices img.sp {
margin: auto;
width: 66%;
}
.top-mainVisual_text img.sp {
margin: auto;
width: 100%;
}
.top-mainVisual_images-bottom {
margin: 0.1em 0 1em;
}
.top-mainVisual_images-bottom img.sp {
width: 375px;
}
@media screen and (min-width: 768px) {
.top-mainVisual {
min-height: auto;
background-image: url(./../image/main_visual_bg_pc.png);
padding-bottom: 30px;
}
.top-mainVisual_inner {
display: flex;
justify-content: space-between;
/* align-items: center; */
}
.top-mainVisual_content>* {
display: flex;
justify-content: center;
}
.top-mainVisual_badges img {
width: 100%;
}
.main-bottom .ttl {
left: 50%;
transform: translateX(-50%);
}
}
@media screen and (min-width: 1300px) {
.top-mainVisual {
max-height: 620px;
}
.top-mainVisual_inner {
position: relative;
min-width: 1600px;
justify-content: center;
left: 50%;
-webkit-transform: translate(-50%, -0%);
transform: translate(-50%, -0%);
-ms-transform: translate(-50%, -0%);
}
.top-mainVisual_content {
margin: 0 1rem;
}
.top-mainVisual_images-right {
margin-top: -9px;
}
.top-mainVisual_images-left {
margin-top: -9px;
}
.top-mainVisual_badges img {
width: auto;
}
}
@media screen and (max-width: 767px) {
.top-mainVisual_tags {
width: 70%;
margin: auto;
}
}
/* Will(20240419)追加 */
.top-mainVisual_badges picture {
width: calc(33.33333% - 0.5em);
}
/* ここまで */
/* Apoo(20210712)ここから一番したまで */
@media screen and (min-width: 768px) {
#footer .footer-bottom {
padding: .5rem 0;
}
#footer .footer-bottom .box {
align-items: center;
}
.footer_privacy {
flex-shrink: 0;
margin-right: 20px;
}
.footer_privacy img {
width: 66px;
}
}
/* CLS修正 */
@media screen and (min-width: 1025px) {
.top-mainVisual {
width: 591px;
/**min-height:470px;
height:470px;**/
min-width: 100%;
}
.top-mainVisual_content {
width: 605px;
/**height:437px;**/
}
.top-mainVisual_images-left {
width: 505.99px;
}
.top-mainVisual_images-right {
width: 512px;
height: 379px;
}
}
@media screen and (min-width: 1281px) {
.top-mainVisual {
/**min-height:542px;
height:542px;**/
min-width: 100%;
}
.top-mainVisual_content {
width: 591px;
/**height:542px;**/
}
.top-mainVisual_images-right {
width: 505px;
/**height:541px;**/
}
}
/* CLS修正
@media screen and (min-width: 2048px) {
.top-mainVisual{
min-height:522px;
height:522px;
min-width:100%;
}
.top-mainVisual_content{
}
.top-mainVisual_images-left img{
width:506px;
height:541px;
}
.top-mainVisual_badges {
width:567px;
height:181px;
}
.top-mainVisual_badges .pc{
width:160px;
height:165px;
}
.top-mainVisual_title {
width:567px;
height:144px;
}
.top-mainVisual_tags pc{
width:385px;
height:28px;
}
.contact-01 {
width:1100px;
height:771px;
}
.top-mainVisual_prices {
width:567px;
height:104px;
}
.top-mainVisual_prices pc {
width:385px;
height:104px;
}
.top-mainVisual_text {
width:567px;
height:89px;
}
.top-mainVisual_images-right img {
width:505px;
height:541px;
}
.header_left {
width:528px;
height:86px;
}
.header_right {
width:347px;
height:80px;
}
}
*/
@media screen and (max-width: 767px) {
#footer .footer-bottom {
padding-top: 16px;
}
.footer-bottom .box {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
#footer .footer-bottom ul {
order: -1;
justify-content: flex-start;
}
#footer .footer-bottom ul li:first-child {
margin-left: 0;
}
#footer .footer-bottom .copyright {
width: 100%;
margin-top: 16px;
}
.footer_privacy {
width: 14%;
}
}
@media screen and (max-width: 360px) {
.footer_privacy {
width: 12%;
}
#footer .footer-bottom ul li {
font-size: 1rem
}
/* CLS修正 */
.top-mainVisual {
width: 360px;
height: 573px;
}
}
/* CLS修正 */
@media screen and (max-width: 320px) {
.top-mainVisual {
width: 320px;
height: 490px;
}
.top-mainVisual_prices {
width: 296px;
height: 57px;
}
.top-mainVisual_content {
width: 320px;
height: 295px;
}
}
/* nakano(20211209) mainbottomに解体種別リストの追加 */
@media screen and (min-width: 768px) {
.c-mv-bottom {
position: relative;
width: 100%;
padding: 18px 0;
padding-top: 30px;
/* background-color: #f0f0f0; */
}
.c-mv-bottom__inner .pc {
position: absolute;
top: 13px;
width: 480px;
left: 50%;
transform: translateX(-50%);
}
.c-mv-bottom-list {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
width: 1070px;
}
.c-mv-bottom-list__item {
width: 144px;
}
.c-mv-bottom-list__item img {
display: inline;
}
.c-mv-bottom h3 {
text-align: center;
font-size: 2rem;
line-height: 1.5;
margin-bottom: 20px;
font-weight: bold;
color: #4f86e2;
}
}
@media screen and (max-width: 767px) {
.c-mv-bottom {
padding: calc(40 / 750 * 100vw) calc(25 / 750 * 100vw) calc(60 / 750 * 100vw);
/* background-color: #f0f0f0; */
}
.c-mv-bottom-list__item:nth-of-type(n+4) {
margin-top: calc(40 / 750 * 100vw);
}
.c-mv-bottom-list {
flex-wrap: wrap;
align-items: center;
margin: calc(40 / 750 * 100vw) auto 0;
width: 100%;
display: flex;
justify-content: space-between;
}
.c-mv-bottom-list__item {
width: calc(216 / 750 * 100vw);
}
.c-mv-bottom h3 {
text-align: center;
font-size: 1.4rem;
line-height: 1.5;
margin-bottom: 20px;
font-weight: bold;
color: #4f86e2;
}
}
.contact-01_block {
background-repeat: no-repeat;
background-position: center 73px;
background-size: 100.2% auto !important;
min-height: 532px !important;
padding-bottom: 0px !important;
}
.txt5 {
font-size: 1.4rem;
letter-spacing: 0.05em;
margin-top: 27px;
}
.contact-01_block .cap1 {
color: #4f86e2;
font-size: 2.2rem;
font-weight: bold;
letter-spacing: 0.05em;
line-height: 1.5;
text-align: center;
}
.contact-01_block .tag img {
width: 842px !important;
padding-top: 0px !important;
}
.contact-01_block .txt1 {
text-align: center;
font-size: 2.4rem;
line-height: 1.5;
margin-top: 28px;
margin-bottom: 8px;
letter-spacing: 0.05em;
}
.contact-01_block .tel {
margin: 15px auto 20px !important;
width: 456px;
}
.second_sec {
padding-top: 50px;
}
.c-mv-bottom {
position: relative;
width: 100%;
padding: 18px 0;
background-color: #4f86e2;
}
.main-bottom .ttl {
left: 50%;
transform: translateX(-50%);
margin: -10px 0px 0px;
width: auto;
}
@media screen and (max-width: 767px) {
.contact-01_block {
/* --- background-image:url(./../image/sp/contact_bg.jpg); --- */
background-repeat: no-repeat;
background-position: right bottom;
background-size: 56% auto !important;
padding-bottom: calc(15 / 750 * 100vw);
}
.second_sec {
padding-top: 30px;
}
.top-mainVisual_tags {
width: 100%;
}
.top-mainVisual_tags img {
width: 100%;
margin: auto;
}
.top-mainVisual_prices img {
width: 100% !important;
margin: auto;
}
.main-bottom .ttl {
position: absolute;
margin: auto;
left: 0 !important;
transform: translateX(0%);
right: 0;
top: 15px;
width: 100%;
}
.c-mv-bottom {
padding: 40px 0px 25px 0px;
}
.c-mv-bottom-list__item {
width: calc(216 / 750 * 100vw);
}
.contact-01_block .tel {
margin: 15px auto 10px !important;
width: 100%;
}
.contact-01_block .txt1 {
text-align: center;
font-size: 2.4rem;
line-height: 1.5;
margin-top: 10px !important;
margin-bottom: 8px;
letter-spacing: 0.05em;
}
.contact-01_block .cap1 {
color: #4f86e2;
font-size: calc(33 / 750 * 100vw);
font-weight: bold;
letter-spacing: 0.05em;
margin-top: calc(26 / 750 * 100vw);
padding: 0 15px;
line-height: 1.5;
text-align: center;
}
.contact-01_block .txt3 {
padding: calc(10 / 750 * 100vw) 34% 22px 15px !important;
font-size: calc(28 / 750 * 100vw) !important;
line-height: 1.71;
}
.top-mainVisual_images-bottom {
margin: -1.3em 0 1em 0.1em;
}
}
/* 20230823 中野 クヌギ施策 フォーム上にテキスト追加 */
.txt_formtop {
text-align: center;
font-size: 2.7rem;
line-height: 1.5;
font-weight: bold;
color: #d0111b;
margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
.txt_formtop {
font-size: 2.1rem;
}
}
/* -----------------------------------------------
* margin-top
----------------------------------------------- */
.mgt-pc--0 {
margin-top: 0;
}
.mgt-pc--5 {
margin-top: 5px;
}
.mgt-pc--10 {
margin-top: 10px;
}
.mgt-pc--15 {
margin-top: 15px;
}
.mgt-pc--20 {
margin-top: 20px;
}
.mgt-pc--25 {
margin-top: 25px;
}
.mgt-pc--30 {
margin-top: 30px;
}
.mgt-pc--35 {
margin-top: 35px;
}
.mgt-pc--40 {
margin-top: 40px;
}
.mgt-pc--45 {
margin-top: 45px;
}
.mgt-pc--50 {
margin-top: 50px;
}
.mgt-pc--55 {
margin-top: 55px;
}
.mgt-pc--60 {
margin-top: 60px;
}
.mgt-pc--65 {
margin-top: 65px;
}
.mgt-pc--70 {
margin-top: 70px;
}
.mgt-pc--75 {
margin-top: 75px;
}
.mgt-pc--80 {
margin-top: 80px;
}
.mgt-pc--85 {
margin-top: 85px;
}
.mgt-pc--90 {
margin-top: 90px;
}
.mgt-pc--95 {
margin-top: 95px;
}
.mgt-pc--100 {
margin-top: 100px;
}
@media screen and (max-width: 767px) {
.mgt-sp--0 {
margin-top: 0;
}
.mgt-sp--5 {
margin-top: 0.66667vw;
}
.mgt-sp--10 {
margin-top: 1.33333vw;
}
.mgt-sp--15 {
margin-top: 2vw;
}
.mgt-sp--20 {
margin-top: 2.66667vw;
}
.mgt-sp--25 {
margin-top: 3.33333vw;
}
.mgt-sp--30 {
margin-top: 4vw;
}
.mgt-sp--35 {
margin-top: 4.66667vw;
}
.mgt-sp--40 {
margin-top: 5.33333vw;
}
.mgt-sp--45 {
margin-top: 6vw;
}
.mgt-sp--50 {
margin-top: 6.66667vw;
}
.mgt-sp--55 {
margin-top: 7.33333vw;
}
.mgt-sp--60 {
margin-top: 8vw;
}
.mgt-sp--65 {
margin-top: 8.66667vw;
}
.mgt-sp--70 {
margin-top: 9.33333vw;
}
.mgt-sp--75 {
margin-top: 10vw;
}
.mgt-sp--80 {
margin-top: 10.66667vw;
}
.mgt-sp--85 {
margin-top: 11.33333vw;
}
.mgt-sp--90 {
margin-top: 12vw;
}
.mgt-sp--95 {
margin-top: 12.66667vw;
}
.mgt-sp--100 {
margin-top: 13.33333vw;
}
}
/* -----------------------------------------------
* マージン-ボトム
----------------------------------------------- */
.mgb-pc--0 {
margin-bottom: 0;
}
.mgb-pc--5 {
margin-bottom: 5px;
}
.mgb-pc--10 {
margin-bottom: 10px;
}
.mgb-pc--15 {
margin-bottom: 15px;
}
.mgb-pc--20 {
margin-bottom: 20px;
}
.mgb-pc--25 {
margin-bottom: 25px;
}
.mgb-pc--30 {
margin-bottom: 30px;
}
.mgb-pc--35 {
margin-bottom: 35px;
}
.mgb-pc--40 {
margin-bottom: 40px;
}
.mgb-pc--45 {
margin-bottom: 45px;
}
.mgb-pc--50 {
margin-bottom: 50px;
}
.mgb-pc--55 {
margin-bottom: 55px;
}
.mgb-pc--60 {
margin-bottom: 60px;
}
.mgb-pc--65 {
margin-bottom: 65px;
}
.mgb-pc--70 {
margin-bottom: 70px;
}
.mgb-pc--75 {
margin-bottom: 75px;
}
.mgb-pc--80 {
margin-bottom: 80px;
}
.mgb-pc--85 {
margin-bottom: 85px;
}
.mgb-pc--90 {
margin-bottom: 90px;
}
.mgb-pc--95 {
margin-bottom: 95px;
}
.mgb-pc--100 {
margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
.mgb-sp--0 {
margin-bottom: 0;
}
.mgb-sp--5 {
margin-bottom: 0.66667vw;
}
.mgb-sp--10 {
margin-bottom: 1.33333vw;
}
.mgb-sp--15 {
margin-bottom: 2vw;
}
.mgb-sp--20 {
margin-bottom: 2.66667vw;
}
.mgb-sp--25 {
margin-bottom: 3.33333vw;
}
.mgb-sp--30 {
margin-bottom: 4vw;
}
.mgb-sp--35 {
margin-bottom: 4.66667vw;
}
.mgb-sp--40 {
margin-bottom: 5.33333vw;
}
.mgb-sp--45 {
margin-bottom: 6vw;
}
.mgb-sp--50 {
margin-bottom: 6.66667vw;
}
.mgb-sp--55 {
margin-bottom: 7.33333vw;
}
.mgb-sp--60 {
margin-bottom: 8vw;
}
.mgb-sp--65 {
margin-bottom: 8.66667vw;
}
.mgb-sp--70 {
margin-bottom: 9.33333vw;
}
.mgb-sp--75 {
margin-bottom: 10vw;
}
.mgb-sp--80 {
margin-bottom: 10.66667vw;
}
.mgb-sp--85 {
margin-bottom: 11.33333vw;
}
.mgb-sp--90 {
margin-bottom: 12vw;
}
.mgb-sp--95 {
margin-bottom: 12.66667vw;
}
.mgb-sp--100 {
margin-bottom: 13.33333vw;
}
}
/* -----------------------------------------------
* No.1表記の但し書き
----------------------------------------------- */
.c-mv-bottom .description {
font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
.c-mv-bottom .description {
font-size: 0.8rem;
}
}
/* -----------------------------------------------
* 補助金申請サービス-2カラム
----------------------------------------------- */
.c-section-2 {
margin-top: 19px;
}
@media screen and (max-width: 768px) {
.c-section-2 {
margin-top: 6.67vw;
}
}
.c-section-2__container {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.c-section-2__container {
display: block;
margin-top: 2.3vw;
}
}
@media screen and (min-width: 769px) {
.c-section-2__txt {
margin-top: -8px;
width: 560px;
}
}
@media screen and (max-width: 768px) {
.c-section-2__txt {
margin-top: 0;
width: 100%;
}
}
.c-section-2__txt--interview {
width: 665px;
}
@media screen and (max-width: 768px) {
.c-section-2__txt--interview {
width: 100%;
}
}
.c-section-2__ttl {
font-size: 2.4rem;
font-weight: bold;
color: #4f86e2;
line-height: 1.75;
letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
.c-section-2__ttl {
font-size: 4.8vw;
line-height: 1.5;
}
}
.c-section-2__img {
width: 510px;
flex-shrink: 0;
}
@media screen and (max-width: 768px) {
.c-section-2__img {
margin-top: 6.67vw;
width: 100%;
}
}
.c-section-2__img--interview {
width: 400px;
}
@media screen and (max-width: 768px) {
.c-section-2__img--interview {
width: 100%;
}
}
.c-section-2__img--voice {
width: 408px;
}
@media screen and (max-width: 768px) {
.c-section-2__img--voice {
width: 100%;
}
}
.c-section-2__img img {
width: 100%;
border-radius: 16px;
}
@media screen and (max-width: 768px) {
.c-section-2__img img {
border-radius: 2.13vw;
}
}
.c-section-2__img-txt {
margin-top: 20px;
font-size: 1.4rem;
letter-spacing: 0.05em;
text-align: center;
}
@media screen and (max-width: 768px) {
.c-section-2__img-txt {
margin-top: 2.667vw;
font-size: 3.2vw;
}
}
.c-list-counter {
counter-reset: li;
}
.c-list-counter__item {
position: relative;
padding-left: 40px;
}
@media screen and (max-width: 768px) {
.c-list-counter__item {
padding-left: 8vw;
}
}
.c-list-counter__item:before {
content: counter(li);
counter-increment: li;
display: inline-block;
position: absolute;
font-size: 1.8rem;
top: 3px;
left: 0;
border-radius: 2px;
color: #fff;
background: #5288df;
width: 28px;
height: 28px;
line-height: 28px;
font-family: "Barlow Condensed",sans-serif;
text-align: center;
}
@media screen and (max-width: 768px) {
.c-list-counter__item:before {
font-size: 3.2vw;
top: 0.3vw;
border-radius: 0.53vw;
width: 5.6vw;
height: 5.6vw;
line-height: 5.6vw;
}
}
.c-list-counter__item + .c-list-counter__item {
margin-top: 12px;
}
@media screen and (max-width: 768px) {
.c-list-counter__item + .c-list-counter__item {
margin-top: 3.5vw;
}
}
.c-list-counter__txt {
font-size: 1.8rem;
line-height: 2;
letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
.c-list-counter__txt {
font-size: 3.73vw;
line-height: 1.71;
}
}
/* MV直下に協会スローガンの帯を追加する */
.c-mv-bottom-top img {
margin: auto;
}
.c-mv-bottom-top img.publication {
margin: 20px auto;
border-radius: 3.5vw;
box-shadow: 0px 1px 3px 1px rgb(4 0 0 / 35%);
}
.c-mv-bottom-top a.book {
display: contents;
}
.c-mv-bottom-top a.book img {
display: block;
width: revert-layer
}
@media screen and (min-width: 768px) {
.c-mv-bottom-top img {
position: relative;
margin-left: -70px;
left: 50%;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
}
.c-mv-bottom-top img.publication {
margin: 20px 0;
border-radius: 1vw;
box-shadow: 0px 1px 3px 1px rgb(4 0 0 / 35%);
}
.c-mv-bottom-top {
width: 100%;
/* --- height: 64px; --- */
padding: 4px 0px;
background-color: #133250;
}
}
@media screen and (max-width: 767px) {
.c-mv-bottom-top {
padding: calc(25 / 750 * 100vw) calc(20 / 750 * 100vw) calc(25 / 75 0 * 100vw);
}
.c-mv-bottom-top {
width: 100%;
height: auto;
padding: 3px 0px;
background-color: #133250;
}
}