@charset "utf-8";
/* ======================================================
* sbiz.css
* ------------------------------------------------------
* @media print, screen and (min-width: 768px)
* - Override
* - Common
* - Page Component
* - Clearfix
* PC Media Queries
* @media only screen and (max-width: 767px)
* - Common
* - Page Component
* - Clearfix
* SP Media Queries
* Print
====================================================== */
/* ======================================================
* PC
====================================================== */
@media print, screen and (min-width: 768px) {
/* ------------------------------------------------------
* Override
------------------------------------------------------ */
body.sbiz .container {
max-width: 100%;
}
body#hojin .MainBody {
overflow: hidden !important;
}
/* ------------------------------------------------------
* Common
------------------------------------------------------ */
/* ------------------------------------------------------
* Page Component
------------------------------------------------------ */
/* ----- pageHead ----- */
body#hojin.sbiz .pageHead {
margin: 0;
box-shadow: 0px 0px 4px 0px #bbbbbb;
background-color: inherit;
background: url("/sbiz/img/index_hero_bg01.jpg") repeat 0 0;
}
body#hojin.sbiz .pageHead_inner {
flex-wrap: nowrap;
max-width: none;
margin: 0 auto;
padding: 0;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head {
width: 39%;
padding: 0 2%;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head .heading-lv1 {
display: flex;
align-items: center;
justify-content: center;
top: auto;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head .heading-lv1 .heading_title {
width: 100%;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head .heading-links {
position: absolute;
display: flex;
align-items: flex-end;
justify-content: flex-end;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head .link-button {
width: 53%;
margin: 0;
padding-right: 10%;
text-align: center;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head .link-button > li > a {
min-width: auto;
max-width: 200px;
width: 100%;
padding: 14px 10px 13px;
font-size: 1.8rem;
}
body#hojin.sbiz .pageHead_inner > .pageHead_img {
width: 63%;
}
/* sbiz_detail */
body#hojin.sbiz_detail .pageHead {
margin-bottom: 0;
}
body#hojin.sbiz_detail .pageHead > .pageGuide {
padding-top: 15px;
}
body#hojin.sbiz_detail .pageHead > .heading-lv1 {
padding: 25px 0 40px;
}
/* ----- LnavBody ----- */
.LnavBody {
background-color: #fff;
}
.LnavBody > .lnav-listWrap {
max-width: 1230px;
margin: 0 auto;
}
.LnavBody > .lnav-listWrap > .lnav-list {
display: flex;
align-items: center;
justify-content: center;
}
.LnavBody > .lnav-listWrap > .lnav-list > li + li {
margin-left: 30px;
}
.LnavBody > .lnav-listWrap > .lnav-list > li > * {
display: block;
padding: 30px 0;
}
.LnavBody > .lnav-listWrap > .lnav-list > li > a {
color: #333;
text-decoration: none;
}
.LnavBody > .lnav-listWrap > .lnav-list > li.is-active > span,
.LnavBody > .lnav-listWrap > .lnav-list > li > a:hover {
position: relative;
color: #1176cc;
font-weight: bold;
}
.LnavBody > .lnav-listWrap > .lnav-list > li.is-active > span::after,
.LnavBody > .lnav-listWrap > .lnav-list > li > a:hover::after {
position: absolute;
content: "";
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #1176cc;
}
/* ----- sbiz-index-wrap ----- */
.sbiz-index-wrap {
max-width: 1230px;
margin: 0 auto;
padding: 0 15px;
}
/* ----- sbiz-index-layout ----- */
[class*="sbiz-index-layout"] {
padding: 45px 0 60px;
}
[class*="sbiz-index-layout"] + [class*="sbiz-index-layout"] {
margin-top: 15px;
}
[class*="sbiz-index-layout"] .sbiz_heading {
margin-bottom: 1.5em;
}
[class*="sbiz-index-layout"] .sbiz_heading .sbiz_title {
font-size: 2.8rem;
font-weight: bold;
text-align: center;
}
[class*="sbiz-index-layout"] .sbiz_heading .sbiz_title .sbiz_title-lead {
color: #1176cc;
}
/* v1 */
.sbiz-index-layout {
}
/* v2 */
.sbiz-index-layout-v2 {
background-color: #e6f9ff;
}
/* image-set */
.sbiz-image-set {
margin-top: 3em;
}
/* ----- sbiz-button-box ----- */
.sbiz-button-box {
margin: 35px 0;
padding: 20px;
border-radius: 20px;
background-color: #dbf5ff;
}
.sbiz-button-box > .sbiz-link-button {
display: flex;
flex-wrap: wrap;
margin: 0;
border-radius: 15px;
box-shadow: 0px 0px 3px 0px #bed4dd;
background-color: #fff;
}
.sbiz-button-box > .sbiz-link-button > li {
width: 33.3%;
min-height: 110px;
margin: 0 !important;
border-right: 1px solid #ddd;
-webkit-transition: all .2s ease-out 0s;
transition: all .2s ease-out 0s;
}
.sbiz-button-box > .sbiz-link-button > li.is-ic01 { background: url("/sbiz/img/index_button_ic01.png") no-repeat 15.5% 50%; }
.sbiz-button-box > .sbiz-link-button > li.is-ic02 { background: url("/sbiz/img/index_button_ic02.png") no-repeat 8.8% 50%; }
.sbiz-button-box > .sbiz-link-button > li.is-ic03 { background: url("/sbiz/img/index_button_ic03.png") no-repeat 10% 50%; }
.sbiz-button-box > .sbiz-link-button > li.is-ic04 { background: url("/sbiz/img/index_button_ic04.png") no-repeat 13% 50%; }
.sbiz-button-box > .sbiz-link-button > li.is-ic05 { background: url("/sbiz/img/index_button_ic05.png") no-repeat 13.5% 50%; }
.sbiz-button-box > .sbiz-link-button > li.is-ic06 { background: url("/sbiz/img/index_button_ic06.png") no-repeat 10% 50%; }
.sbiz-button-box > .sbiz-link-button > li.is-ic07 { background: url("/sbiz/img/index_button_ic07.png") no-repeat 9% 50%; }
.sbiz-button-box > .sbiz-link-button > li.is-ic08 { background: url("/sbiz/img/index_button_ic08.png") no-repeat 10.5% 50%; }
.sbiz-button-box > .sbiz-link-button > li.is-ic09 { background: url("/sbiz/img/index_button_ic09.png") no-repeat 6% 50%; }
.sbiz-button-box > .sbiz-link-button > li:nth-child(3n) {
border-right: none;
}
.sbiz-button-box > .sbiz-link-button > li:nth-child(n+4) {
border-top: 1px solid #ddd;
}
.sbiz-button-box > .sbiz-link-button > li:hover {
background-color: #eafaff;
}
.sbiz-button-box > .sbiz-link-button > li > a {
display: flex;
flex-wrap: wrap;
align-items: center;
height: 100%;
width: 100%;
padding: 0 10px 0 36.5%;
color: #333;
font-size: 1.8rem;
text-decoration: none;
}
.sbiz-button-box > .sbiz-link-button > li > a .sub {
display: block;
font-size: 1.4rem;
}
/* ----- text-lead ----- */
body#hojin.sbiz_detail .sbiz-index-wrap > .text-lead:first-child {
margin-top: 0.5em;
}
/* ----- link-button ----- */
body#hojin.sbiz .link-button > li > a {
min-width: 270px;
}
/* sbiz-link-list */
.sbiz-link-list {
display: flex;
align-items: center;
justify-content: center;
}
.sbiz-link-list > li + li {
margin: 0 0 0 37px !important;
}
/* ----- sbiz-pr-list ----- */
.sbiz-pr-list {
display: flex;
align-items: center;
justify-content: center;
margin: 1.7em 0 0;
}
.sbiz-pr-list > li {
min-width: 165px;
padding: 4px 15px 5px;
border: 1px solid #1176cc;
color: #1176cc;
font-weight: bold;
text-align: center;
}
.sbiz-pr-list > li + li {
margin-left: 10px;
}
/* ----- box-layout-sbiz ----- */
.box-layout-sbiz {
margin: 35px 0 0;
padding: 50px 11%;
border-radius: 15px;
background-color: #fff;
}
.box-layout-sbiz .box-layout_inner {
margin-top: 0;
}
/* sbiz-step-layout */
.box-layout-sbiz .sbiz-step-layout > li + li {
margin-top: 3.5em;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item {
display: flex;
align-items: center;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .step {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 95px;
height: 95px;
padding-top: 0.9em;
border-radius: 50%;
background-color: #1176cc;
color: #fff;
font-weight: bold;
line-height: 1;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item.attention-item > .step {
background-color: #ef8700;
}
.box-layout-sbiz .sbiz-step-layout > li + li .sbiz-step-item > .step::before {
position: absolute;
left: 30px;
top: -35px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 15px 17.5px 0 17.5px;
border-color: #dde1e4 transparent transparent transparent;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .step > .num {
width: 100%;
margin: -0.3em 0 auto;
font-size: 2.5rem;
text-align: center;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .text {
width: calc(100% - 128px);
margin-left: 33px;
padding: 1em 0;
font-size: 2.0rem;
border-bottom: 1px solid #ddd;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item.attention-item > .text {
display: flex;
align-items: center;
font-weight: bold;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .text .inner-v1 {
margin-right: 10px;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .text .inner-v2 {
margin-left: auto;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .text .inner-v2 .link-button {
margin-top: 0;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .text .inner-v2 .link-button > li > a {
min-width: 200px !important;
font-size: 1.6rem;
}
/* ----- sbiz-layout ----- */
/* v1 */
.sbiz-layout {
margin: 40px -19px 0;
}
.sbiz-layout .index_col {
padding: 0 19px 3px;
}
.sbiz-layout .index_item {
display: block;
overflow: hidden;
border-radius: 15px;
box-shadow: 0px 1px 2px 1px #dedede;
color: #333;
text-decoration: none;
}
.sbiz-layout .index_item > .item_img {
display: block;
}
.sbiz-layout .index_item > .item_panel {
position: relative;
}
.sbiz-layout .index_item .item_panel > .item_copy_text {
position: absolute;
top: -15px;
left: 0;
right: 0;
margin: 0 auto;
}
.sbiz-layout .index_item .item_panel > .item_copy_text > .item_copy_wrap {
display: flex;
align-items: center;
justify-content: center;
}
.sbiz-layout .index_item .item_panel > .item_copy_text > .item_copy_wrap > span {
display: block;
min-width: 70px;
border-radius: 10em;
padding: 5px 15px 5px;
background-color: #1176cc;
color: #fff;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
}
.sbiz-layout .index_item .item_panel > .item_copy_text > .item_copy_wrap > span + span {
margin-left: 10px;
}
.sbiz-layout .index_item .item_panel > .item_inner {
height: 100%;
padding: 35px 20px 20px;
background-color: #fff;
-webkit-transition: all .2s ease-out 0s;
transition: all .2s ease-out 0s;
}
.sbiz-layout .index_item:hover .item_panel > .item_inner {
background-color: #eee;
}
.sbiz-layout .index_item .item_panel > .item_inner > .item_title {
margin-bottom: 0.4em;
line-height: 1.5;
font-size: 2.0rem;
font-weight: bold;
}
/* v2 */
.sbiz-layout-v2 {
display: flex;
flex-wrap: wrap;
margin: 20px 0 0;
}
.sbiz-layout-v2 > .index_col {
width: 48.5%;
border: 2px solid #1176cc;
border-radius: 10px;
overflow: hidden;
}
.sbiz-layout-v2 > .index_col:nth-child(even) {
margin-left: 3%
}
.sbiz-layout-v2 > .index_col:nth-child(n+3) {
margin-top: 30px;
}
.sbiz-layout-v2 > .index_col > .index_heading {
background-color: #dbf5ff;
text-align: center;
}
.sbiz-layout-v2 > #anc09.index_col {
width: 100%;
}
.sbiz-layout-v2 > .index_col > .index_heading > .index_title {
min-height: 70px;
padding: 14px 0 10px;
font-size: 2.4rem;
font-weight: bold;
}
.sbiz-layout-v2 > .index_col > .index_heading > .index_title::before {
display: inline-block;
content: "";
margin: 0 20px 5px 0;
vertical-align: middle;
}
.sbiz-layout-v2 > #anc01.index_col > .index_heading > .index_title::before {
width: 35px;
height: 45px;
background: url("/sbiz/supportmenu/img/index_anc_ic01.png") no-repeat 0 0;
background-size: 35px auto;
}
.sbiz-layout-v2 > #anc02.index_col > .index_heading > .index_title::before {
width: 63px;
height: 36px;
background: url("/sbiz/supportmenu/img/index_anc_ic02.png") no-repeat 0 0;
background-size: 63px auto;
}
.sbiz-layout-v2 > #anc03.index_col > .index_heading > .index_title::before {
width: 45px;
height: 44px;
background: url("/sbiz/supportmenu/img/index_anc_ic03.png") no-repeat 0 0;
background-size: 45px auto;
}
.sbiz-layout-v2 > #anc04.index_col > .index_heading > .index_title::before {
width: 51px;
height: 40px;
background: url("/sbiz/supportmenu/img/index_anc_ic04.png") no-repeat 0 0;
background-size: 51px auto;
}
.sbiz-layout-v2 > #anc05.index_col > .index_heading > .index_title::before {
width: 42px;
height: 43px;
background: url("/sbiz/supportmenu/img/index_anc_ic05.png") no-repeat 0 0;
background-size: 42px auto;
}
.sbiz-layout-v2 > #anc06.index_col > .index_heading > .index_title::before {
width: 38px;
height: 45px;
background: url("/sbiz/supportmenu/img/index_anc_ic06.png") no-repeat 0 0;
background-size: 38px auto;
}
.sbiz-layout-v2 > #anc07.index_col > .index_heading > .index_title::before {
width: 59px;
height: 47px;
background: url("/sbiz/supportmenu/img/index_anc_ic07.png") no-repeat 0 0;
background-size: 59px auto;
}
.sbiz-layout-v2 > #anc08.index_col > .index_heading > .index_title::before {
width: 52px;
height: 47px;
background: url("/sbiz/supportmenu/img/index_anc_ic08.png") no-repeat 0 0;
background-size: 52px auto;
}
.sbiz-layout-v2 > #anc09.index_col > .index_heading > .index_title::before {
width: 71px;
height: 30px;
background: url("/sbiz/supportmenu/img/index_anc_ic09.png") no-repeat 0 0;
background-size: 71px auto;
}
.sbiz-layout-v2 > .index_col > .index_item {
display: flex;
flex-wrap: wrap;
height: calc(100% - 70px);
padding: 25px 30px 40px;
}
.sbiz-layout-v2 > .index_col:not(.type-wide) > .index_item {
flex-flow: column;
justify-content: space-between;
}
.sbiz-layout-v2 > #anc09.index_col > .index_item {
flex-wrap: nowrap;
}
.sbiz-layout-v2 > .index_col > .index_item > * {
width: 100%;
}
.sbiz-layout-v2 > .index_col > .index_item > .index_box {
margin-bottom: 1.5em;
}
.sbiz-layout-v2 > .index_col > .index_item > .index_box > .item_title {
margin-bottom: 0.5em;
font-size: 1.8rem;
font-weight: bold;
}
.sbiz-layout-v2 > .index_col > .index_item > .index_box > .link-button-v3 {
margin-top: 1.1em;
}
.sbiz-layout-v2 > .index_col > .index_item > .image-set {
margin-top: auto;
}
.sbiz-layout-v2 > #anc09.index_col > .index_item > .image-set {
width: 63%;
margin: 0 0 0 3%;
}
/* v3 */
.sbiz-layout-v3 {
margin-top: 40px;
padding: 40px 35px 35px;
background-color: #f9f9f9;
}
.sbiz-layout-v3 .box-layout_inner {
margin-top: 0;
}
.sbiz-layout-v3 .box_heading {
margin-bottom: 1em;
text-align: center;
}
.sbiz-layout-v3 .box_heading .box_title {
font-size: 2.0rem;
font-weight: bold;
}
.sbiz-layout-v3 .box_heading .box_title::before {
display: inline-block;
content: "";
width: 51px;
height: 48px;
margin: 0 20px 10px 0;
background: url("/sbiz/supportmenu/img/index_box_ic01.png") no-repeat 0 0;
vertical-align: middle;
}
.sbiz-layout-v3 .box_detail > .link-button-v3 {
justify-content: center;
}
.sbiz-layout-v3 .box_detail > .link-button-v3 > li {
width: 100%;
max-width: 340px;
}
.sbiz-layout-v3 .box_detail > .link-button-v3 > li > a {
padding: 14px 20px 13px;
}
/* ----- sbiz-navi-anchor ----- */
.sbiz-navi-anchor {
margin: 30px 0 50px;
}
.sbiz-navi-anchor .navi_inner {
display: flex;
flex-wrap: wrap;
}
.sbiz-navi-anchor .navi_inner > li {
width: 11.1%;
text-align: center;
}
.sbiz-navi-anchor .navi_inner > li > a {
position: relative;
display: block;
height: 130px;
padding-bottom: 25px;
color: #333;
font-size: 1.4rem;
text-decoration: none;
}
.sbiz-navi-anchor .navi_inner > li > a::after {
position: absolute;
content: "";
bottom: 2px;
left: 0;
right: 0;
margin: 0 auto;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
width: 10px;
height: 10px;
border-top: 2px solid #333;
border-right: 2px solid #333;
}
.sbiz-navi-anchor .navi_inner > li.is-ic01 > a { background: url("/sbiz/supportmenu/img/index_anc_ic01.png") no-repeat 50% 0; }
.sbiz-navi-anchor .navi_inner > li.is-ic02 > a { background: url("/sbiz/supportmenu/img/index_anc_ic02.png") no-repeat 50% 5px; }
.sbiz-navi-anchor .navi_inner > li.is-ic03 > a { background: url("/sbiz/supportmenu/img/index_anc_ic03.png") no-repeat 50% 2px; }
.sbiz-navi-anchor .navi_inner > li.is-ic04 > a { background: url("/sbiz/supportmenu/img/index_anc_ic04.png") no-repeat 50% 5px; }
.sbiz-navi-anchor .navi_inner > li.is-ic05 > a { background: url("/sbiz/supportmenu/img/index_anc_ic05.png") no-repeat 50% 5px; }
.sbiz-navi-anchor .navi_inner > li.is-ic06 > a { background: url("/sbiz/supportmenu/img/index_anc_ic06.png") no-repeat 50% 0; }
.sbiz-navi-anchor .navi_inner > li.is-ic07 > a { background: url("/sbiz/supportmenu/img/index_anc_ic07.png") no-repeat 50% 2px; }
.sbiz-navi-anchor .navi_inner > li.is-ic08 > a { background: url("/sbiz/supportmenu/img/index_anc_ic08.png") no-repeat 50% 0; }
.sbiz-navi-anchor .navi_inner > li.is-ic09 > a { background: url("/sbiz/supportmenu/img/index_anc_ic09.png") no-repeat 50% 15px; }
.sbiz-navi-anchor .navi_inner > li > a > .link_label {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
flex-wrap: wrap;
padding-top: 82px;
line-height: 1.5;
}
.sbiz-navi-anchor .navi_inner > li.is-ic08 > a > .link_label {
padding-top: 75px;
}
.sbiz-navi-anchor .navi_inner > li > a > .link_label > .sub {
display: block;
width: 100%;
font-size: 1.2rem;
}
/* ----- slick ----- */
.sbiz-layout .slick-arrow {
position: absolute;
top: 50%;
margin-top: -40px;
width: 48px;
height: 48px;
border: none;
background-size: 48px 48px !important;
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
z-index: 1;
cursor: pointer;
}
.sbiz-layout .slick-arrow.slick-prev {
left: -5px;
background: url("/sbiz/img/index_slider_ic01.png") no-repeat 0 0;
}
.sbiz-layout .slick-arrow.slick-next {
right: -5px;
background: url("/sbiz/img/index_slider_ic02.png") no-repeat 0 0;
}
.sbiz-layout .slick-dots {
position: relative;
display: block;
bottom: auto;
width: auto;
margin: 0 10px;
text-align: center;
}
.sbiz-layout .slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 2px;
padding: 0;
cursor: pointer;
}
.sbiz-layout .slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 0;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.sbiz-layout .slick-dots li button::before {
line-height: 20px;
position: absolute;
content: '●';
top: 0;
left: 0;
width: 20px;
height: 20px;
color: #ddd;
font-size: 17px;
text-align: center;
opacity: 1;
}
.sbiz-layout .slick-dots li.slick-active button::before {
color: #00aae3;
}
/* ----- aside-layout ----- */
.aside-layout {
margin-top: 0;
}
}
@media screen and (min-width: 768px) and (max-width: 1190px) {
.sbiz-layout-v2 > .index_col > .index_heading > .index_title {
font-size: 2.1vw;
}
.sbiz-navi-anchor .navi_inner > li > a {
height: 110px;
font-size: 1.3vw;
}
.sbiz-navi-anchor .navi_inner > li > a > .link_label > .sub {
font-size: 1.0vw;
}
.sbiz-navi-anchor .navi_inner > li.is-ic01 > a { background-size: 35px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic02 > a { background-size: 58px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic03 > a { background-size: 41px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic04 > a { background-size: 45px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic05 > a { background-size: 38px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic06 > a { background-size: 39px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic07 > a { background-size: 50px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic08 > a { background-size: 48px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic09 > a { background-size: 58px auto; }
.sbiz-navi-anchor .navi_inner > li > a > .link_label {
padding-top: 50px;
}
.sbiz-navi-anchor .navi_inner > li > a > .link_label .pc-hidden {
display: block !important;
}
.sbiz-navi-anchor .navi_inner > li.is-ic01 > a > .link_label,
.sbiz-navi-anchor .navi_inner > li.is-ic09 > a > .link_label {
padding-top: 60px;
}
.sbiz-navi-anchor .navi_inner > li.is-ic08 > a > .link_label {
padding-top: 50px;
}
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
.sbiz-button-box > .sbiz-link-button > li.is-ic01 { background-size: 35px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic02 { background-size: 58px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic03 { background-size: 41px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic04 { background-size: 45px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic05 { background-size: 38px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic06 { background-size: 39px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic07 { background-size: 50px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic08 { background-size: 48px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic09 { background-size: 58px auto; }
.sbiz-button-box > .sbiz-link-button > li > a {
font-size: 1.7vw;
}
.sbiz-button-box > .sbiz-link-button > li > a .sub {
font-size: 1.2rem;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head .heading-lv1 {
top: -30px;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head .heading-links {
width: 100%;
height: auto;
top: auto;
bottom: -50px;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head .link-button {
width: 100%;
padding-right: 0;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head .link-button > li > a {
font-size: 1.6rem;
padding: 10px 10px 9px;
}
.sbiz-layout-v3 .box_detail > .link-button-v3 {
display: flex;
flex-wrap: wrap;
}
.sbiz-layout-v3 .box_detail > .link-button-v3 > li {
max-width: none;
}
.sbiz-layout-v3 .box_detail > .link-button-v3 > li + li {
margin: 20px 0 0 !important;
}
}
/* ======================================================
* SP
====================================================== */
@media only screen and (max-width: 767px) {
/* ------------------------------------------------------
* Common
------------------------------------------------------ */
/* ------------------------------------------------------
* Page Component
------------------------------------------------------ */
/* ----- pageHead ----- */
body#hojin.sbiz .pageHead {
margin: 0;
box-shadow: 0px 0px 2px 0px #bbbbbb;
}
body#hojin.sbiz .pageHead_inner {
display: block;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head {
padding: 25px 15px;
background-color: inherit;
background: url("/sbiz/img/index_hero_bg02.jpg") repeat 0 0;
background-size: cover;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head > .heading-lv1 {
max-width: 347px;
margin: 0 auto;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head > .link-button {
margin-top: 1.5em;
text-align: center;
}
body#hojin.sbiz .pageHead_inner > .pageHead_head > .link-button > li > a {
min-width: auto;
max-width: 150px;
width: 100%;
font-size: 1.6rem;
}
/* sbiz_detail */
body#hojin.sbiz_detail .pageHead {
margin-bottom: 0;
}
body#hojin.sbiz_detail .pageHead > .pageGuide {
}
body#hojin.sbiz_detail .pageHead > .heading-lv1 {
padding: 20px 15px 40px;
}
/* ----- LnavBody ----- */
.LnavBody {
background-color: #fff;
}
.LnavBody > .lnav-listWrap {
}
.LnavBody > .lnav-listWrap > .lnav-list {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.LnavBody > .lnav-listWrap > .lnav-list > li {
width: 50%;
border-bottom: 1px solid #ddd;
}
.LnavBody > .lnav-listWrap > .lnav-list > li.is-active {
text-align: center;
}
.LnavBody > .lnav-listWrap > .lnav-list > li:first-child {
width: 100%;
}
.LnavBody > .lnav-listWrap > .lnav-list > li:nth-child(even) {
border-right: 1px solid #ddd;
}
.LnavBody > .lnav-listWrap > .lnav-list > li > * {
position: relative;
display: block;
padding: 15px 20px 12px 15px;
}
.LnavBody > .lnav-listWrap > .lnav-list > li > a {
color: #333;
text-decoration: none;
}
.LnavBody > .lnav-listWrap > .lnav-list > li > *::after {
position: absolute;
content: "";
top: 0;
bottom: 0;
right: 15px;
margin: auto 0;
width: 8px;
height: 8px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-top: 2px solid #333;
border-right: 2px solid #333;
}
.LnavBody > .lnav-listWrap > .lnav-list > li.is-active > span {
color: #1176cc;
font-weight: bold;
background-color: #e6f8ff;
}
/* ----- sbiz-index-layout ----- */
[class*="sbiz-index-layout"] {
padding: 30px 0 30px;
}
.sbiz-index-layout.gp-sp-pt-0 {
padding-top: 0;
}
[class*="sbiz-index-layout"] .sbiz_heading {
margin-bottom: 1em;
}
[class*="sbiz-index-layout"] .sbiz_heading .sbiz_title {
font-size: 2.0rem;
font-weight: bold;
text-align: center;
}
[class*="sbiz-index-layout"] .sbiz_heading .sbiz_title .sbiz_title-lead {
color: #1176cc;
}
/* v1 */
.sbiz-index-layout {
}
/* v2 */
.sbiz-index-layout-v2 {
margin-right: -15px;
margin-left: -15px;
padding-right: 15px;
padding-left: 15px;
background-color: #e6f9ff;
}
/* ----- sbiz-button-box ----- */
.sbiz-button-box {
margin: 15px 0 25px;
padding: 10px;
border-radius: 20px;
background-color: #dbf5ff;
}
.sbiz-button-box > .sbiz-link-button {
display: flex;
flex-wrap: wrap;
margin: 0;
border-radius: 15px;
box-shadow: 0px 0px 3px 0px #bed4dd;
background-color: #fff;
}
.sbiz-button-box > .sbiz-link-button > li {
width: 33.3%;
margin: 0 !important;
border-right: 1px solid #ddd;
-webkit-transition: all .2s ease-out 0s;
transition: all .2s ease-out 0s;
}
.sbiz-button-box > .sbiz-link-button > li.is-ic01 { background: url("/sbiz/img/index_button_ic01.png") no-repeat 50% 30% / 25px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic02 { background: url("/sbiz/img/index_button_ic02.png") no-repeat 50% 31% / 48px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic03 { background: url("/sbiz/img/index_button_ic03.png") no-repeat 50% 30% / 31px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic04 { background: url("/sbiz/img/index_button_ic04.png") no-repeat 50% 28% / 35px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic05 { background: url("/sbiz/img/index_button_ic05.png") no-repeat 50% 28% / 28px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic06 { background: url("/sbiz/img/index_button_ic06.png") no-repeat 50% 24% / 29px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic07 { background: url("/sbiz/img/index_button_ic07.png") no-repeat 50% 20% / 40px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic08 { background: url("/sbiz/img/index_button_ic08.png") no-repeat 50% 17% / 38px auto; }
.sbiz-button-box > .sbiz-link-button > li.is-ic09 { background: url("/sbiz/img/index_button_ic09.png") no-repeat 50% 25% / 48px auto; }
.sbiz-button-box > .sbiz-link-button > li:nth-child(3n) {
border-right: none;
}
.sbiz-button-box > .sbiz-link-button > li:nth-child(n+4) {
border-top: 1px solid #ddd;
}
.sbiz-button-box > .sbiz-link-button > li:hover {
background-color: #eafaff;
}
.sbiz-button-box > .sbiz-link-button > li > a {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
padding: 50% 5px 8%;
color: #333;
font-size: 1.4rem;
line-height: 1.3;
text-decoration: none;
text-align: center;
}
.sbiz-button-box > .sbiz-link-button > li > a .sub {
display: block;
font-size: 1.2rem;
}
/* ----- link-button ----- */
body#hojin.sbiz .link-button > li > a {
min-width: 43%;
}
/* sbiz-link-list */
.sbiz-link-list {
}
.sbiz-link-list > li + li {
margin: 15px 0 0 !important;
}
/* ----- sbiz-pr-list ----- */
.sbiz-pr-list {
display: flex;
align-items: center;
justify-content: center;
margin: 1em 0 0;
}
.sbiz-pr-list > li {
min-width: 130px;
padding: 5px 10px 5px;
border: 1px solid #1176cc;
color: #1176cc;
font-weight: bold;
text-align: center;
}
.sbiz-pr-list > li + li {
margin-left: 15px;
}
/* ----- box-layout-sbiz ----- */
.box-layout-sbiz {
margin: 20px 0 0;
padding: 15px 15px;
border-radius: 15px;
background-color: #fff;
}
.box-layout-sbiz .box-layout_inner {
margin-top: 0;
}
/* sbiz-step-layout */
.box-layout-sbiz .sbiz-step-layout > li + li {
margin-top: 2.6em;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item {
display: flex;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .step {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 60px;
height: 60px;
padding-top: 0.5em;
border-radius: 50%;
background-color: #1176cc;
color: #fff;
font-size: 1.2rem;
font-weight: bold;
line-height: 1;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item.attention-item > .step {
background-color: #ef8700;
}
.box-layout-sbiz .sbiz-step-layout > li + li .sbiz-step-item > .step::before {
position: absolute;
left: 15px;
top: -25px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #dde1e4 transparent transparent transparent;
}
.box-layout-sbiz .sbiz-step-layout > li:last-child .sbiz-step-item > .step::before {
top: -50px;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .step > .num {
width: 100%;
margin: -0.3em 0 auto;
font-size: 1.6rem;
text-align: center;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .text {
width: calc(100% - 75px);
margin-left: 15px;
padding: 0.5em 0 1em;
font-size: 1.3rem;
border-bottom: 1px solid #ddd;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item.attention-item > .text {
font-weight: bold;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .text .inner-v1 {
margin-right: 10px;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .text .inner-v2 {
margin-left: auto;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .text .inner-v2 .link-button {
margin-top: 0.5em;
}
.box-layout-sbiz .sbiz-step-layout .sbiz-step-item > .text .inner-v2 .link-button > li > a {
width: 100%;
font-size: 1.6rem;
}
/* ----- sbiz-layout ----- */
/* v1 */
.sbiz-layout {
max-width: 380px;
margin: 15px auto 0;
}
.sbiz-layout .index_col {
padding: 0 3px 5px;
}
.sbiz-layout .index_item {
display: block;
overflow: hidden;
border-radius: 15px;
box-shadow: 0px 2px 4px 1px #e9e9e9;
color: #333;
text-decoration: none;
}
.sbiz-layout .index_item > .item_img {
display: block;
}
.sbiz-layout .index_item > .item_panel {
position: relative;
}
.sbiz-layout .index_item .item_panel > .item_copy_text {
position: absolute;
top: -15px;
left: 0;
right: 0;
margin: 0 auto;
}
.sbiz-layout .index_item .item_panel > .item_copy_text > .item_copy_wrap {
display: flex;
align-items: center;
justify-content: center;
}
.sbiz-layout .index_item .item_panel > .item_copy_text > .item_copy_wrap > span {
display: block;
min-width: 60px;
border-radius: 10em;
padding: 5px 15px 5px;
background-color: #1176cc;
color: #fff;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
}
.sbiz-layout .index_item .item_panel > .item_copy_text > .item_copy_wrap > span + span {
margin-left: 10px;
}
.sbiz-layout .index_item .item_panel > .item_inner {
height: 100%;
padding: 20px 20px 20px;
background-color: #fff;
-webkit-transition: all .2s ease-out 0s;
transition: all .2s ease-out 0s;
}
.sbiz-layout .index_item:hover .item_panel > .item_inner {
background-color: #eee;
}
.sbiz-layout .index_item .item_panel > .item_inner > .item_title {
margin-bottom: 0.4em;
line-height: 1.5;
font-size: 1.7rem;
font-weight: bold;
}
/* v2 */
.sbiz-layout-v2 {
margin: 20px 0 0;
}
.sbiz-layout-v2 > .index_col {
border: 2px solid #1176cc;
border-radius: 10px;
overflow: hidden;
}
.sbiz-layout-v2 > .index_col + .index_col {
margin-top: 20px;
}
.sbiz-layout-v2 > .index_col > .index_heading {
background-color: #dbf5ff;
text-align: center;
}
.sbiz-layout-v2 > .index_col > .index_heading > .index_title {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
padding: 5px 0 5px;
font-size: 1.4rem;
font-weight: bold;
}
.sbiz-layout-v2 > .index_col > .index_heading > .index_title::before {
display: inline-block;
content: "";
margin: 0 10px 0 0;
vertical-align: middle;
}
.sbiz-layout-v2 > #anc01.index_col > .index_heading > .index_title::before {
width: 25px;
height: 32px;
background: url("/sbiz/supportmenu/img/index_anc_ic01.png") no-repeat 0 0;
background-size: 25px auto;
}
.sbiz-layout-v2 > #anc02.index_col > .index_heading > .index_title::before {
width: 48px;
height: 27px;
background: url("/sbiz/supportmenu/img/index_anc_ic02.png") no-repeat 0 0;
background-size: 48px auto;
}
.sbiz-layout-v2 > #anc03.index_col > .index_heading > .index_title::before {
width: 31px;
height: 31px;
background: url("/sbiz/supportmenu/img/index_anc_ic03.png") no-repeat 0 0;
background-size: 31px auto;
}
.sbiz-layout-v2 > #anc04.index_col > .index_heading > .index_title::before {
width: 35px;
height: 28px;
background: url("/sbiz/supportmenu/img/index_anc_ic04.png") no-repeat 0 0;
background-size: 35px auto;
}
.sbiz-layout-v2 > #anc05.index_col > .index_heading > .index_title::before {
width: 28px;
height: 30px;
background: url("/sbiz/supportmenu/img/index_anc_ic05.png") no-repeat 0 0;
background-size: 28px auto;
}
.sbiz-layout-v2 > #anc06.index_col > .index_heading > .index_title::before {
width: 29px;
height: 35px;
background: url("/sbiz/supportmenu/img/index_anc_ic06.png") no-repeat 0 0;
background-size: 29px auto;
}
.sbiz-layout-v2 > #anc07.index_col > .index_heading > .index_title::before {
width: 40px;
height: 33px;
background: url("/sbiz/supportmenu/img/index_anc_ic07.png") no-repeat 0 0;
background-size: 40px auto;
}
.sbiz-layout-v2 > #anc08.index_col > .index_heading > .index_title::before {
width: 38px;
height: 35px;
background: url("/sbiz/supportmenu/img/index_anc_ic08.png") no-repeat 0 0;
background-size: 38px auto;
}
.sbiz-layout-v2 > #anc09.index_col > .index_heading > .index_title::before {
width: 48px;
height: 20px;
background: url("/sbiz/supportmenu/img/index_anc_ic09.png") no-repeat 0 0;
background-size: 48px auto;
}
.sbiz-layout-v2 > .index_col > .index_item {
padding: 15px 15px 20px;
}
.sbiz-layout-v2 > #anc09.index_col > .index_item {
flex-wrap: nowrap;
}
.sbiz-layout-v2 > .index_col > .index_item > * {
width: 100%;
}
.sbiz-layout-v2 > .index_col > .index_item > .index_box {
margin-bottom: 1.2em;
}
.sbiz-layout-v2 > .index_col > .index_item > .index_box > .item_title {
margin-bottom: 0.5em;
font-size: 1.6rem;
font-weight: bold;
}
.sbiz-layout-v2 > .index_col > .index_item > .index_box > .link-button-v3 {
margin-top: 0.8em;
}
.sbiz-layout-v2 > .index_col > .index_item > .index_box > .link-button-v3 > li > a {
width: 100%;
}
.sbiz-layout-v2 > .index_col > .index_item > .image-set {
margin-top: auto;
}
/* v3 */
.sbiz-layout-v3 {
margin-top: 20px;
padding: 18px 20px 25px;
background-color: #f9f9f9;
}
.sbiz-layout-v3 .box-layout_inner {
margin-top: 0;
}
.sbiz-layout-v3 .box_heading {
margin-bottom: 1em;
margin-right: 1em;
text-align: center;
}
.sbiz-layout-v3 .box_heading::before {
display: inline-block;
content: "";
width: 39px;
height: 38px;
margin: 0 10px 0 0;
background: url("/sbiz/supportmenu/img/index_box_ic01.png") no-repeat 0 0;
background-size: 39px auto;
}
.sbiz-layout-v3 .box_heading .box_title {
display: inline-block;
font-size: 1.6rem;
font-weight: bold;
line-height: 1.5;
}
.sbiz-layout-v3 .box_detail > .link-button-v3 {
justify-content: center;
}
.sbiz-layout-v3 .box_detail > .link-button-v3 .link_label {
width: 100%;
}
/* ----- sbiz-navi-anchor ----- */
.sbiz-navi-anchor {
margin: 20px -15px 30px;
}
.sbiz-navi-anchor .navi_inner {
display: flex;
flex-wrap: wrap;
}
.sbiz-navi-anchor .navi_inner > li {
width: 20%;
text-align: center;
}
.sbiz-navi-anchor .navi_inner > li:nth-child(n+6) {
width: 23.6%;
margin-top: 20px;
}
.sbiz-navi-anchor .navi_inner > li.is-ic08 {
width: 29.2%;
}
.sbiz-navi-anchor .navi_inner > li > a {
display: block;
position: relative;
height: 80px;
padding-bottom: 15px;
color: #333;
font-size: 1.1rem;
text-decoration: none;
}
.sbiz-navi-anchor .navi_inner > li:nth-child(n+6) > a {
height: 85px;
}
.sbiz-navi-anchor .navi_inner > li > a > .link_label::after {
position: absolute;
content: "";
bottom: 2px;
left: 0;
right: 0;
margin: 0 auto;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
width: 8px;
height: 8px;
border-top: 2px solid #333;
border-right: 2px solid #333;
}
.sbiz-navi-anchor .navi_inner > li.is-ic01 > a { background: url("/sbiz/supportmenu/img/index_anc_ic01.png") no-repeat 50% 0 / 25px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic02 > a { background: url("/sbiz/supportmenu/img/index_anc_ic02.png") no-repeat 50% 0 / 48px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic03 > a { background: url("/sbiz/supportmenu/img/index_anc_ic03.png") no-repeat 50% 0 / 31px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic04 > a { background: url("/sbiz/supportmenu/img/index_anc_ic04.png") no-repeat 50% 0 / 35px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic05 > a { background: url("/sbiz/supportmenu/img/index_anc_ic05.png") no-repeat 50% 0 / 28px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic06 > a { background: url("/sbiz/supportmenu/img/index_anc_ic06.png") no-repeat 50% 0 / 29px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic07 > a { background: url("/sbiz/supportmenu/img/index_anc_ic07.png") no-repeat 50% 0 / 40px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic08 > a { background: url("/sbiz/supportmenu/img/index_anc_ic08.png") no-repeat 50% 0 / 38px auto; }
.sbiz-navi-anchor .navi_inner > li.is-ic09 > a { background: url("/sbiz/supportmenu/img/index_anc_ic09.png") no-repeat 50% 10px / 48px auto; }
.sbiz-navi-anchor .navi_inner > li > a > .link_label {
display: flex;
align-items: flex-end;
justify-content: center;
flex-wrap: wrap;
padding-top: 35px;
line-height: 1.5;
}
.sbiz-navi-anchor .navi_inner > li:nth-child(n+6) > a > .link_label {
padding-top: 38px;
}
.sbiz-navi-anchor .navi_inner > li.is-ic01 > a > .link_label {
padding-top: 45px;
}
.sbiz-navi-anchor .navi_inner > li.is-ic08 > a > .link_label {
padding-top: 38px;
}
.sbiz-navi-anchor .navi_inner > li.is-ic09 > a > .link_label {
padding-top: 50px;
}
.sbiz-navi-anchor .navi_inner > li > a > .link_label > .sub {
display: block;
width: 100%;
font-size: 0.9rem;
}
/* ----- slick ----- */
.sbiz-layout .slick-arrow {
position: absolute;
top: 50%;
margin-top: -55px;
width: 47px;
height: 47px;
border: none;
background-size: 47px 47px !important;
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
z-index: 1;
cursor: pointer;
}
.sbiz-layout .slick-arrow.slick-prev {
left: -25px;
background: url("/sbiz/img/index_slider_ic01.png") no-repeat 0 0;
}
.sbiz-layout .slick-arrow.slick-next {
right: -25px;
background: url("/sbiz/img/index_slider_ic02.png") no-repeat 0 0;
}
.sbiz-layout .slick-dots {
position: relative;
display: block;
bottom: auto;
width: auto;
margin: 0 10px;
text-align: center;
}
.sbiz-layout .slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 2px;
padding: 0;
cursor: pointer;
}
.sbiz-layout .slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 0;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.sbiz-layout .slick-dots li button::before {
line-height: 20px;
position: absolute;
content: '●';
top: 0;
left: 0;
width: 20px;
height: 20px;
color: #ddd;
font-size: 17px;
text-align: center;
opacity: 1;
}
.sbiz-layout .slick-dots li.slick-active button::before {
color: #00aae3;
}
/* ----- aside-layout ----- */
.aside-layout {
margin-top: 0;
}}
/* ======================================================
* SP Media Queries
====================================================== */
/* ======================================================
* Print
====================================================== */
@media print {
body[data-browser="ie11"] {
zoom: 0.55;
}
body {
width: 1920px;
}
}