@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;box-sizing:border-box}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}


@font-face {
font-family: "M PLUS 1p";
src: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/font/MPLUS1p-Regular.ttf) format("truetype");
}
@font-face {
font-family: "M PLUS 1p Black";
src: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/font/MPLUS1p-Black.ttf) format("truetype");
}
@font-face {
font-family: "M PLUS 1p Bold";
src: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/font/MPLUS1p-Bold.ttf) format("truetype");
}
@font-face {
font-family: "M PLUS 1p ExtraBold";
src: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/font/MPLUS1p-ExtraBold.ttf) format("truetype");
}
@font-face {
font-family: "M PLUS 1p Medium";
src: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/font/MPLUS1p-Medium.ttf) format("truetype");
}
@font-face {
font-family: "M PLUS 1p Light";
src: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/font/MPLUS1p-Light.ttf) format("truetype");
}
@font-face {
font-family: "M PLUS 1p Thin";
src: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/font/MPLUS1p-Thin.ttf) format("truetype");
}
:root {
--main-color: #FFED59;
--cvbtn-color: #2B7DC2;
--nav-color: #333232e6;
--text-link-color: #2D2D41;
--font-color: #333333;
--font-nav-size: 16px;
--font-fnav-size: 14px;
--font-size: 16px;
--font-sub-size: 18px;
--font-h1-size: 48px;
--font-h1-sub-size: 36px;
--font-h1-remarks-size: 24px;
--font-title-size: 36px;
--font-sub-title-size: 14px;
--font-erit-title-size: 24px;
--font-cta-size: 24px;
--max-width: 1000px;
--bordaer-color: #D0D0D0;
--font-family: 'M PLUS 1p', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
--font--Black-family: 'M PLUS 1p Black', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
--font--blod-family: 'M PLUS 1p Bold', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
--font--ExtraBold-family: 'M PLUS 1p ExtraBold', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
--font--Medium-family: 'M PLUS 1p Medium', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
--font--slim-family: 'M PLUS 1p Light', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
--font--Thin-family: 'M PLUS 1p Thin', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
@media screen and (min-width: 1090px) {
.sp {
display: none;
}
.sp-only {
display: none;
}
}
@media screen and (min-width: 728px) and (max-width: 1089px) {
.sp-only {
display: none;
}
}
@media screen and (max-width: 728px) {
.tab-pc {
display: none;
}
}
@media screen and (max-width: 1089px) {
.pc {
display: none;
}
:root {
--font-nav-size: 14px;
--font-fnav-size: 14px;
--font-size: 16px;
--font-sub-size: 18px;
--font-h1-size: 38px;
--font-h1-sub-size: 24px;
--font-h1-remarks-size: 18px;
--font-title-size: 28px;
--font-sub-title-size: 12px;
--font-erit-title-size: 18px;
--font-cta-size: 18px;
}
}
body {
font-family: var(--font-family);
line-height: 1.5;
font-size: var(--font-size);
}
.bggray {
background: #F6F6F6;
}
.bgyellow {
background: var(--main-color);
}
b {
font-family: var(--font--Medium-family);
}
h1,
h2,
h3,
p,
td,
th,
dt,
dd {
transform: rotate(0.05deg);
}
.btn {
width: fit-content;
margin: 1em auto;
}
.btn a {
display: block;
width: 100%;
background: #323332;
color: #fff;
padding: .5em 2em;
border-radius: 30px;
text-align: center;
text-decoration: none;
box-sizing: border-box;
}
@media screen and (max-width: 1089px) {
.btn {
width: 80%;
margin: 1em auto;
}
}
.btnbox {
max-width: 360px;
width: 90%;
text-align: center;
position: relative;
}
.btnbox a {
display: block;
background: var(--cvbtn-color);
color: #fff;
text-decoration: none;
padding: 1em;
border-radius: 30px;
}
.btnbox a::after {
content: "\f061";
font-weight: 900;
font-family: "Font Awesome 6 Free";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
display: inline-block;
margin-left: .5em;
position: absolute;
top: 50%;
right: 2em;
transform: translateY(-50%);
}
header {
position: fixed;
width: 100%;
z-index: 999;
transition: all .5s ease;
}
header.active {
background: #fff;
}
.headerbox {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.headerbox .rogobox {
margin-left: 80px;
max-width: 250px;
}
.headerbox .rogobox img {
width: 100%;
}
.headerbox .nav_wrap ul {
display: flex;
align-items: center;
}
.headerbox .nav_wrap ul li .copo {
position: relative;
}
.headerbox .nav_wrap ul li .copo a::after {
content: "\f35d";
font-weight: 900;
font-family: "Font Awesome 6 Free";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
display: inline-block;
margin-left: .5em;
}
.headerbox .nav_wrap ul li a,
.headerbox .nav_wrap ul li .s-title {
display: block;
padding: 2em 1.5em;
color: var(--font-color);
text-decoration: none;
font-size: clamp(0.75rem, -0.548rem + 1.9vw, 1rem);
}
.headerbox .nav_wrap ul li .upper-page-nav {
padding: 2em;
}
.headerbox .nav_wrap ul li .upper-page-nav::after {
content: "\f107";
font-weight: 900;
font-family: "Font Awesome 6 Free";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
display: inline-block;
margin-left: .5em;
}
.headerbox .nav_wrap ul li .lower-page-nav {
position: absolute;
top: 88px;
left: 0;
background: var(--nav-color);
width: 100%;
display: none;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox {
width: fit-content;
margin: auto;
display: flex;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox .s-title {
color: #fff;
margin-top: 1em;
padding: 1em 0 0;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox .othersbox li:nth-child(1) {
width: 8em;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox .othersbox li:nth-child(2) {
width: 14em;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox .othersbox li:nth-child(3) {
width: 10em;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox .othersbox li:nth-child(4) {
width: 13em;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox ul {
margin: 0 auto;
flex-wrap: wrap;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox ul li {
width: fit-content;
margin-right: 2em;
margin-left: 0;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox ul li a {
color: #fff;
padding: 1em 0;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox ul li a::before {
content: "\f105";
font-weight: 900;
font-family: "Font Awesome 6 Free";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
display: inline-block;
margin-right: .5em;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox ul li:last-child {
margin-right: 0;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox ul:first-child {
margin-top: 1em;
}
.headerbox .nav_wrap ul li .lower-page-nav .setbox ul:last-child {
margin-bottom: 1em;
}
.headerbox .nav_wrap ul li.hover-nav:hover .upper-page-nav::after {
content: "\f106";
}
.headerbox .nav_wrap ul li.hover-nav:hover .lower-page-nav {
display: block;
}
.headerbox .nav_wrap ul li.contact-free {
margin-left: 1em;
}
.headerbox .nav_wrap ul li.contact-free a {
padding: 2em 3em;
background: #E00200;
color: #fff;
}
.headerbox .nav_wrap ul li.contact a {
padding: 2em 3em;
background: var(--cvbtn-color);
color: #fff;
}
@media screen and (max-width: 1125px) {
.headerbox {
padding: 1em;
}
.headerbox .rogobox {
margin-left: 0;
max-width: 150px;
}
.headerbox .nave-opne {
font-size: 2em;
}
.headerbox .gnav {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 0;
opacity: 0;
background: #fff;
transition: all 0.5s 0s ease;
}
.headerbox .gnav .nave-close {
font-size: 2em;
padding: .5em;
text-align: right;
}
.headerbox .gnav .nav_wrap {
overflow-y: auto;
height: calc(100% - 65px);
}
.headerbox .gnav .nav_wrap ul {
display: block;
}
.headerbox .gnav .nav_wrap ul .hover-nav {
padding: 1em 0 0;
}
.headerbox .gnav .nav_wrap ul li {
border-top: 1px solid var(--bordaer-color);
}
.headerbox .gnav .nav_wrap ul li a {
position: relative;
width: 100%;
display: block;
box-sizing: border-box;
padding: 1em;
}
.headerbox .gnav .nav_wrap ul li a::before {
content: "\f105";
font-weight: 900;
font-family: "Font Awesome 6 Free";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
display: inline-block;
margin-left: .5em;
position: absolute;
top: 50%;
right: 2em;
transform: translateY(-50%);
}
.headerbox .gnav .nav_wrap ul li .copo a::before {
content: "\f35d";
}
.headerbox .gnav .nav_wrap ul li .copo a::after {
display: none;
}
.headerbox .gnav .nav_wrap ul li .upper-page-nav {
padding: 1em;
}
.headerbox .gnav .nav_wrap ul li .upper-page-nav::after {
display: none;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav {
position: initial;
top: inherit;
left: inherit;
background: inherit;
width: 100%;
display: block;
margin-top: 1em;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox {
width: 100%;
display: block;
border-top: 1px solid var(--bordaer-color);
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox .banabox {
width: 100%;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox .banabox .s-title {
color: var(--font-color);
padding: 1em 1em 1em 2em;
margin-top: 0;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox .banabox ul li {
margin-left: 0;
padding-left: 1em;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox .banabox ul li a {
padding-bottom: 1em;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox ul {
margin: 0 auto;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox ul li {
width: 100%;
margin-right: 0;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox ul li a {
color: var(--font-color);
padding: 1em 1em 1em 2em;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox ul li a::before {
margin-right: 0;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox ul li:nth-child(1) {
width: 100%;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox ul li:nth-child(2) {
width: 100%;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox ul li:nth-child(3) {
width: 100%;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox ul li:nth-child(4) {
width: 100%;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox ul:first-child {
margin-top: 0;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox ul:first-child li:first-child {
border-top: none;
}
.headerbox .gnav .nav_wrap ul .lower-page-nav .setbox ul:last-child {
margin-bottom: 0;
}
.headerbox .gnav .nav_wrap ul li.contact-free {
margin-left: 0;
}
.headerbox .gnav .nav_wrap ul li.contact-free a {
padding: 1em;
}
.headerbox .gnav .nav_wrap ul li.contact {
margin-left: 0;
}
.headerbox .gnav .nav_wrap ul li.contact a {
padding: 1em;
}
.headerbox .gnav.active {
width: 80%;
opacity: 1;
}
}
.footerbg {
background: #333333;
color: #fff;
}
.footerbg a {
color: #fff;
}
.footerbox {
max-width: var(--max-width);
width: 100%;
margin: auto;
padding: 2em 0;
display: flex;
justify-content: space-between;
font-size: var(--font-fnav-size);
}
.footerbox .rogo {
max-width: 200px;
}
.footerbox .rogo img {
width: 100%;
}
.footerbox .fnav_wrap>ul {
list-style: none;
display: flex;
font-family: var(--font--blod-family);
}
.footerbox .fnav_wrap>ul>li {
margin-left: 5em;
}
.footerbox .fnav_wrap>ul>li .lower-page-nav {
font-family: var(--font-family);
margin-left: 1em;
}
.footerbox .fnav_wrap>ul>li .lower-page-nav .banabox {
margin-top: 1em;
}
.footerbox .fnav_wrap>ul>li .lower-page-nav .banabox p {
font-family: var(--font--blod-family);
}
.footerbox .fnav_wrap>ul>li .lower-page-nav .banabox ul {
margin-left: 1em;
}
.footerbox .fnav_wrap>ul>li .lower-page-nav li {
margin-top: 1em;
}
.footerbox .fnav_wrap>ul>li a {
text-decoration: none;
}
.footerbox .bottomnav {
list-style: none;
display: flex;
}
.footerbox .bottomnav li::before {
content: "／";
display: inline-block;
margin: 0 1em;
}
.footerbox .bottomnav li:first-child::before {
display: none;
}
.footerbox .bottomnav a {
text-decoration: none;
}
.footerbox .bottomnav .copo {
position: relative;
}
.footerbox .bottomnav .copo a::after {
content: "\f35d";
font-weight: 900;
font-family: "Font Awesome 6 Free";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
display: inline-block;
margin-left: .5em;
}
.footerbox02 {
border-top: 1px solid #707070;
}
@media screen and (max-width: 1089px) {
.footerbox {
display: block;
padding-bottom: 0;
}
.footerbox .rogo {
text-align: center;
margin: 0em auto 2em;
}
.footerbox .fnav_wrap>ul {
display: block;
width: 90%;
margin: auto;
}
.footerbox .fnav_wrap>ul .hover-nav p {
padding: 0 0 1em;
}
.footerbox .fnav_wrap>ul .hover-nav .lower-page-nav {
margin-left: 0;
}
.footerbox .fnav_wrap>ul .hover-nav .lower-page-nav .banabox {
width: 100%;
}
.footerbox .fnav_wrap>ul .hover-nav .lower-page-nav .banabox .s-title {
padding-left: 1em;
}
.footerbox .fnav_wrap>ul .hover-nav .lower-page-nav .banabox ul {
margin-left: 0;
padding-top: 0;
}
.footerbox .fnav_wrap>ul .hover-nav .lower-page-nav .banabox ul li {
padding-left: 2em;
}
.footerbox .fnav_wrap>ul>li {
margin-left: 0;
padding: 1em 0;
border-top: 1px solid #707070;
}
.footerbox .fnav_wrap>ul>li a {
position: relative;
width: 100%;
display: block;
box-sizing: border-box;
}
.footerbox .fnav_wrap>ul>li a::before {
content: "\f105";
font-weight: 900;
font-family: "Font Awesome 6 Free";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
display: inline-block;
margin-left: .5em;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.footerbox .fnav_wrap>ul>li .lower-page-nav li {
padding: 1em 0 1em 1em;
margin-top: 0;
border-top: 1px solid #707070;
}
.footerbox .fnav_wrap>ul>li .lower-page-nav li:last-child {
padding-bottom: 0;
}
.footerbox .fnav_wrap .other {
padding: 0;
}
.footerbox .fnav_wrap .other li {
border-top: 1px solid #707070;
padding: 1em 0;
margin: 0 !important;
}
.footerbox .fnav_wrap .other li:first-child {
border: none;
}
.footerbox02 {
text-align: center;
width: 90%;
margin: auto;
}
.footerbox02 .bottomnav {
padding: 1em;
width: inherit;
margin: auto;
flex-wrap: wrap;
justify-content: center;
}
}
.ctabox {
max-width: var(--max-width);
width: 90%;
margin: auto;
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/cta-img.webp) bottom right no-repeat;
background-size: 20%;
}
.ctabox .title {
padding: 0 0 .5em;
font-size: var(--font-title-size);
text-align: center;
font-family: var(--font--Medium-family);
letter-spacing: .1em;
}
.ctabox .title::after {
content: "";
display: block;
height: 2px;
width: 100px;
background: #707070;
margin: auto;
margin-top: .2em;
}
.ctabox .text {
font-size: var(--font-cta-size);
text-align: center;
}
.ctabox .btnbox {
margin: 3em auto 0;
}
@media screen and (max-width: 767px) {
.ctabox {
width: 100%;
padding: 0 0 10em;
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/cta-img.webp) bottom center no-repeat;
background-size: 30%;
}
}
@media screen and (max-width: 500px) {
.ctabox {
background-size: 50%;
}
}
.middle-ctabox {
background: #FFD800;
max-width: 100%;
width: 100%;
padding: 3em;
}
.middle-ctabox .middle-set {
max-width: var(--max-width);
width: 90%;
margin: auto;
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/top/cta-img.webp) bottom right no-repeat;
background-size: 18%;
}
.middle-ctabox .middle-set .imgbox {
max-width: 640px;
width: 90%;
margin: auto;
}
.middle-ctabox .middle-set .imgbox img {
width: 100%;
}
.middle-ctabox .middle-set .btnbox {
margin-top: 0;
}
.middle-ctabox .middle-set .btnbox .text {
font-size: 20px;
margin: 1em auto;
font-family: var(--font--Medium-family);
}
.middle-ctabox .middle-set .btnbox a {
background: #E00200;
}
@media screen and (max-width: 767px) {
.middle-ctabox {
padding: 3em 1em;
}
.middle-ctabox .middle-set {
width: 100%;
padding: 0 0 10em;
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/top/cta-img.webp) bottom center no-repeat;
background-size: 45%;
}
.middle-ctabox .middle-set .imgbox {
max-width: 640px;
width: 90%;
margin: auto;
}
.middle-ctabox .middle-set .imgbox img {
width: 100%;
}
.middle-ctabox .middle-set .btnbox {
margin-top: 0;
}
.middle-ctabox .middle-set .btnbox .text {
font-size: 20px;
margin: 1em auto;
font-family: var(--font--Medium-family);
}
.middle-ctabox .middle-set .btnbox a {
background: #E00200;
}
}
.cvabox {
padding: 3em 0;
text-align: center;
color: #fff;
}
.cvabox p {
font-size: 30px;
}
.cvabox .btnbox {
margin: 2em auto;
}
.cvabox .btnbox a {
display: block;
background: #fff;
font-size: var(--font-size);
}
@media screen and (max-width: 1089px) {
.cvabox p {
font-size: 20px;
}
}
.servicebox {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.servicebox>div {
width: calc(33% - 1em);
margin-top: 1em;
margin-bottom: 1em;
background: #fff;
padding: 1em;
}
.servicebox>div .img {
margin: 0;
width: 100%;
}
.servicebox>div .img img {
width: 100%;
}
.servicebox>div .name {
font-size: var(--font-sub-size);
margin: 1em auto;
text-align: center;
font-family: var(--font--blod-family);
}
.servicebox>div .text {
margin-bottom: 2em;
}
.servicebox>div:nth-child(3n) {
margin-left: 1em;
}
.servicebox>div:nth-child(3n + 1) {
margin-right: 1em;
}
.servicebox>div:nth-child(3n + 2) {
margin-right: .5em;
margin-left: .5em;
}
.other-services.sectionbox .subtitle {
color: var(--main-color);
}
.other-services.sectionbox .servicebox {
display: block;
width: 100%;
}
.other-services.sectionbox .servicebox .slick-slide {
box-sizing: border-box;
margin: 1em;
}
.other-services.sectionbox .servicebox .slick-prev:before,
.other-services.sectionbox .servicebox .slick-next:before {
color: #939393;
line-height: 0;
}
.other-services.sectionbox .servicebox .slick-next:before {
content: '>';
}
.other-services.sectionbox .servicebox .slick-prev:before {
content: '<';
}
.other-services.sectionbox .servicebox .slick-prev {
left: -40px;
}
.other-services.sectionbox .servicebox .slick-next {
right: -40px;
}
.other-services.sectionbox .servicebox>div {
width: auto;
margin: auto 1em !important;
padding: 0 !important;
}
.other-services.sectionbox .servicebox .boxset {
border: 1px solid #E5E5E5;
background: #fff;
padding: 1em;
border-radius: 10px;
}
.other-services.sectionbox .servicebox .boxset .img {
margin: 0;
width: 100%;
}
.other-services.sectionbox .servicebox .boxset .img img {
width: 100%;
}
.other-services.sectionbox .servicebox .boxset .name {
font-size: var(--font-sub-size);
margin: 1em auto;
text-align: center;
font-family: var(--font--Medium-famil);
}
.breadcrumb {
background: #434343;
color: #fff;
width: 100%;
overflow-x: auto;
}
.breadcrumb .box {
max-width: var(--max-width);
width: 95%;
margin: auto;
}
.breadcrumb .breadcrumbbox {
padding: 1em 0;
list-style: none;
display: flex;
margin-left: auto;
width: fit-content;
}
.breadcrumb .breadcrumbbox li {
white-space: nowrap;
display: flex;
align-items: center;
}
.breadcrumb .breadcrumbbox li::before {
content: "\f105";
font-weight: 900;
font-family: "Font Awesome 6 Free";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
display: inline-block;
margin: 0 1em;
}
.breadcrumb .breadcrumbbox li:first-child::before {
display: none;
}
.breadcrumb .breadcrumbbox a {
color: #fff;
}
@media screen and (max-width: 767px) {
.breadcrumb .breadcrumbbox {
margin-left: 0;
}
}

.floatingbox {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #ffffffc5;
}
.floatingbox a {
max-width: 630px;
margin: auto;
display: block;
text-decoration: none;
}
.floatingbox .box {
display: flex;
align-items: center;
border: 1px solid #2B7DC2;
background: #fff;
padding: .5em;
margin: .5em 0;
border-radius: 5px;
}
.floatingbox .box .text {
text-align: center;
font-size: 20px;
font-family: var(--font--blod-family);
color: #2B7DC2;
margin: 0;
width: 70%;
}
.floatingbox .box .btn {
width: 30%;
text-align: center;
background: #D60001;
color: #fff;
padding: .3em 1em;
border-radius: 5px;
margin: 0 auto;
}
.floatingbox .box .btn .icon {
font-size: 24px;
}
.floatingbox .box .btn .btntext i {
margin-left: .5em;
}
.blogfooter {
padding-bottom: 110px;
}
@media screen and (max-width: 631px) {
.floatingbox a {
width: 100%;
}
.floatingbox .box {
width: 100%;
border-radius: 0;
margin: 0;
padding: 0;
border-left: none;
border-right: none;
}
.floatingbox .box .text {
width: 55%;
font-size: 10px;
}
.floatingbox .box .btn {
width: 45%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0;
padding: .8em 0;
}
.floatingbox .box .icon {
margin-right: .5em;
}
.blogfooter {
padding-bottom: 65px;
}
}

.fvbox {
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/top/fv-bg.webp) center center no-repeat;
background-size: cover;
display: flex;
align-items: center;
padding: 10em 2em 4em;
}
.fvbox .fvtextbox {
max-width: var(--max-width);
width: 100%;
margin: auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.fvbox .fvtextbox .textbox {
max-width: 620px;
}
.fvbox .fvtextbox .remarks {
font-size: var(--font-h1-remarks-size);
margin-bottom: .5em;
}
.fvbox .fvtextbox .title {
max-width: 500px;
width: 90%;
margin: 1.5em 0;
}
.fvbox .fvtextbox .title img {
width: 100%;
}
.fvbox .fvtextbox .titlesub {
font-size: 14px;
width: 100%;
max-width: 500px;
margin-bottom: 2em;
}
.fvbox .fvtextbox .subtitle {
font-size: var(--font-h1-sub-size);
margin-bottom: .5em;
}
.fvbox .fvtextbox .catchbox {
max-width: 600px;
}
.fvbox .fvtextbox .catchbox img {
width: 100%;
}
.fvbox .fvtextbox .iconbox {
display: flex;
align-items: center;
max-width: 600px;
}
.fvbox .fvtextbox .iconbox div {
width: calc(20% - 1em);
margin-right: 1em;
}
.fvbox .fvtextbox .iconbox div img {
width: 100%;
}
.fvbox .fvtextbox .btnbox {
margin-top: 3em;
}
.fvbox .btnbox p {
margin-bottom: 1em;
}
.fvbox .btnbox .note {
text-align: center;
font-size: 12px;
margin: 0;
}
.fvbox .btnbox a {
background: #E00200;
font-size: 20px;
}
.fvctabox {
background: #FFED58;
}
.fvctabox > div {
max-width: var(--max-width);
width: 100%;
margin: auto;
padding: 2em 1em;
}
.fvctabox > div h2 {
font-size: var(--font-title-size);
text-align: center;
margin: 1em 0;
}
.fvctabox > div .text {
text-align: center;
padding: 0 0 1em;
font-size: var(--font-size);
}
.fvctabox > div .banabox {
list-style: none;
display: flex;
margin: 1em auto;
width: 100%;
}
.fvctabox > div .banabox li {
width: calc(25% - 1em);
margin: 0 .5em;
}
.fvctabox > div .banabox li img {
width: 100%;
}
.fvctabox > div .btnbox {
margin: 0 auto 1em;
}
.fvctabox > div .btnbox p {
margin-bottom: 1em;
}
.fvctabox > div .btnbox .note {
text-align: center;
font-size: 12px;
margin: 0;
}
.fvctabox > div .btnbox a {
background: #E00200;
font-size: 20px;
}
.fvctabox .box {
position: relative;
padding: 0 2em 2em;
}
.fvctabox .box .bottomboder {
font-family: var(--font--blod-family);
}
.fvctabox .box .bottomboder span {
border-bottom: 5px solid #D6AD00;
padding-bottom: .2em;
}
.fvctabox .box .text {
font-size: var(--font-h1-remarks-size);
font-family: var(--font--blod-family);
text-align: center;
}
.fvctabox .box .img {
position: absolute;
right: -10%;
top: 8%;
width: 180px;
}
.fvctabox .box .img img {
width: 100%;
}
.sectionbox {
max-width: var(--max-width);
width: 90%;
margin: auto;
padding: 4.5em 0;
}
.sectionbox .title {
font-size: var(--font-title-size);
text-align: center;
}
.sectionbox .subtitle {
font-size: var(--font-sub-title-size);
color: #F0D630;
margin-bottom: 2em;
text-align: center;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #F0D630;
}
.sectionbox .titletext {
text-align: center;
margin-bottom: 1em;
}
.sectionbox .textbox {
margin: 1em auto;
}
.sectionbox .textbox p {
margin-bottom: 1em;
}
.sectionbox .sectionbox01 {
max-width: 630px;
width: 63%;
margin-right: auto;
}
.sectionbox .sectionbox01 .title, .sectionbox .sectionbox01 .subtitle {
text-align: left;
}
.sectionbox .servicebox {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.sectionbox .servicebox > div {
width: calc(25% - 1em);
margin: 1em .5em;
background: #fff;
padding: 1em;
}
.sectionbox .servicebox > div .img {
margin: 0;
width: 100%;
}
.sectionbox .servicebox > div .img img {
width: 100%;
}
.sectionbox .servicebox > div .name {
font-size: var(--font-sub-size);
margin: 1em auto;
text-align: center;
font-family: var(--font--Medium-family);
}
.sectionbox .servicebox > div .text {
margin-bottom: 2em;
}
.sectionbox .meritbox {
display: flex;
margin: 5em 0 0;
}
.sectionbox .meritbox img {
max-width: 100%;
}
.sectionbox .meritbox .meritimgbox {
width: 34%;
}
.sectionbox .meritbox .meritimgbox .meritimg {
display: flex;
justify-content: center;
}
.sectionbox .meritbox .merittextbox {
width: 66%;
}
.sectionbox .meritbox .merittextbox .merittitlebox {
display: flex;
align-items: center;
}
.sectionbox .meritbox .merittextbox .merittitlebox .meriticon {
width: 80px;
}
.sectionbox .meritbox .merittextbox .merittitlebox .meriticon img {
width: 100%;
}
.sectionbox .meritbox .merittextbox .merittitlebox .merittitle {
font-size: var(--font-erit-title-size);
font-family: var(--font--Medium-family);
width: calc(100% - 80px);
}
.sectionbox .meritbox .merittextbox .merittext {
padding: 1em;
}
.sectionbox .meritbox:nth-child(2n) {
flex-direction: row-reverse;
}
.sectionbox .newsbox .newslist {
list-style: none;
margin-bottom: 3em;
}
.sectionbox .newsbox .newslist li {
position: relative;
}
.sectionbox .newsbox .newslist li a {
display: flex;
align-items: center;
border-bottom: 1px solid var(--bordaer-color);
text-decoration: none;
color: var(--text-link-color);
}
.sectionbox .newsbox .newslist li a .data {
padding: 2em;
}
.sectionbox .newsbox .newslist li a .title {
font-size: var(--font-size);
padding-right: 5em;
}
.sectionbox .newsbox .newslist li::after {
content: "\f061";
font-weight: 900;
font-family: "Font Awesome 6 Free";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
display: inline-block;
margin-left: .5em;
position: absolute;
top: 50%;
right: 1em;
transform: translateY(-50%);
}
.sectionbox .voice .note {
text-align: center;
}
.sectionbox .voice .voicebox .fb {
margin: auto;
display: flex;
align-items: center;
border-bottom: 1px solid #D4D4D4;
padding: 1em 0;
}
.sectionbox .voice .voicebox .fb .imgbox {
width: 180px;
height: 220px;
}
.sectionbox .voice .voicebox .fb .imgbox img {
height: 100%;
margin: auto;
display: block;
}
.sectionbox .voice .voicebox .fb .textbox {
width: calc(100% - 180px - 1em);
margin-left: 1em;
}
.sectionbox .voice .voicebox .fb .textbox .number {
font-size: 14px;
color: #1785BC;
font-family: var(--font--ExtraBold-family);
margin: 0;
}
.sectionbox .voice .voicebox .fb .textbox .number span {
font-family: var(--font--blod-family);
font-size: 30px;
margin-left: .2em;
}
.sectionbox .voice .voicebox .fb .textbox .title {
font-size: 24px;
text-align: left;
font-family: var(--font--Medium-family);
}
.sectionbox .voice .voicebox .fb .textbox .text {
line-height: 1.8;
margin: 0;
}
.bgimg {
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/top/bg-02.webp) right center no-repeat;
background-size: contain;
}
@media screen and (max-width: 1089px) {
.fvbox {
padding: 5em 0;
position: relative;
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/top/fv-bg-sp.webp) right center no-repeat;
background-size: cover;
}
.fvbox .fvtextbox {
position: relative;
z-index: 2;
width: 90%;
display: block;
margin: auto;
}
.fvbox .fvtextbox .textbox {
width: 100%;
max-width: inherit;
}
.fvbox .fvtextbox .imgbox {
margin: 1em 0;
max-width: inherit;
}
.fvbox .fvtextbox .imgbox img {
width: 50%;
margin: 0 25%;
}
.fvbox .fvtextbox .catchbox {
margin: auto;
}
.fvbox .fvtextbox .remarks, .fvbox .fvtextbox .title, .fvbox .fvtextbox .subtitle {
text-align: center;
}
.fvbox .fvtextbox .title, .fvbox .fvtextbox .titlesub {
width: 90%;
margin: 1em auto 2em;
}
.fvbox .fvtextbox .subtitle {
margin-bottom: 1em;
}
.fvbox .fvtextbox .iconbox {
justify-content: center;
margin: auto;
}
.fvbox .fvtextbox .iconbox div {
width: calc(20% - 1%);
margin-right: 0;
margin: .5%;
}
.fvbox .fvtextbox .iconbox div img {
width: 100%;
}
.fvbox .fvtextbox .imgbox {
width: 100%;
margin-top: 2em;
}
.fvbox .fvtextbox .imgbox img {
width: 50%;
margin: 0 25%;
}
.fvbox .fvtextbox .btnbox {
margin: 3em auto 0;
}
.fvctabox .box {
overflow-x: hidden;
}
.fvctabox .box .img {
right: -5%;
top: 20%;
width: 150px;
}
.bgimg {
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/top/bg-02-sp.webp) right center no-repeat;
background-size: contain;
}
.sectionbox {
position: relative;
z-index: 2;
}
.sectionbox .titletext {
text-align: left;
}
.sectionbox .sectionbox01 {
max-width: initial;
width: 100%;
}
.sectionbox .sectionbox01 .title, .sectionbox .sectionbox01 .subtitle {
text-align: left;
}
.sectionbox .meritbox .meritimgbox {
width: 100%;
}
.sectionbox .meritbox .meritimgbox .meritimg {
justify-content: center;
}
.sectionbox .meritbox .merittextbox {
width: 100%;
}
.sectionbox .meritbox .merittextbox .meriticon {
width: 100px;
}
.sectionbox .meritbox .merittextbox .merittitle {
width: calc(100% - 100px - 1em);
}
.sectionbox .newsbox .newslist {
list-style: none;
margin-bottom: 3em;
}
.sectionbox .newsbox .newslist li {
position: relative;
}
.sectionbox .newsbox .newslist li a {
display: block;
padding-right: 3em;
}
.sectionbox .newsbox .newslist li a .data {
padding: .5em 0;
}
.sectionbox .newsbox .newslist li a .title {
padding-right: 0;
padding: .5em 0;
text-align: left;
}
.bgimg {
background-size: contain;
background-position: bottom right;
position: relative;
}
.bgimg::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
}
}
@media screen and (max-width: 767px) {
.sectionbox .servicebox, .sectionbox .meritbox {
display: block;
margin-top: 2em;
}
.sectionbox .meritbox .meritimg {
padding: 1em;
}
.sectionbox .servicebox > div {
width: 100%;
margin: 1em auto !important;
}
.sectionbox .servicebox > div .img img {
width: 100%;
}
.sectionbox .voice .title {
text-align: left;
}
.sectionbox .voice .note {
text-align: left;
}
.sectionbox .voice .voicebox .fb {
flex-direction: column-reverse;
margin-top: 2em;
}
.sectionbox .voice .voicebox .fb .imgbox {
width: 100%;
}
.sectionbox .voice .voicebox .fb .textbox {
width: 100%;
margin-left: 0;
}
.fvbox {
background: linear-gradient(180deg, #faf096 0%, #faf096 50%, #f6f6f6 50%, #f6f6f6 100%);
}
.fvbox .fvtextbox .imgbox {
width: 100vw;
margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);
}
.fvbox .fvtextbox .imgbox img {
width: 100%;
margin: 0;
}
.fvctabox > div {
padding: 0;
}
.fvctabox > div h2, .fvctabox > div .text {
text-align: left;
}
.fvctabox > div .text {
text-align: center;
}
.fvctabox > div .banabox {
flex-wrap: wrap;
}
.fvctabox > div .banabox li {
width: calc(50% - 1em);
margin: 1em .5em;
}
.fvctabox > div .btnbox a::after {
right: 1em;
}
.fvctabox .box {
padding: 2em 3em 4em;
overflow: hidden;
}
.fvctabox .box .bottomboder {
line-height: 2.0;
}
.fvctabox .box .text {
text-align: left;
}
.fvctabox .box .img {
top: 75%;
width: 150px;
}
}