@charset 'UTF-8';
@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;
}
}

:root {
--font-lower-page-h1-size: 72px;
--font-lower-page-fv-text-size: 22px;
--youtube-seo-color: #D8201C;
--cvbtn-youtube-seo-colo: #00B7BC;
--font-18: 18px;
--font-20: 20px;
--font-24: 24px;
--font-30: 30px;
--font-36: 36px;
--font-48: 48px;
--font-60: 60px;
--font-72: 72px;
--font-96: 96px;
--font-100: 100px;
}
@media screen and (min-width: 728px) and (max-width: 1089px) {
:root {
--font-lower-page-h1-size: clamp(2.375rem, -1.91rem + 9.42vw, 4.5rem);
--font-lower-page-fv-text-size: clamp(1.125rem, 0.621rem + 1.11vw, 1.375rem);
--font-24: clamp(1.375rem, 1.123rem + 0.55vw, 1.5rem);
--font-30: clamp(1.563rem, 0.932rem + 1.39vw, 1.875rem);
--font-36: clamp(1.625rem, 0.365rem + 2.77vw, 2.25rem);
--font-48: clamp(1.875rem, -0.394rem + 4.99vw, 3rem);
--font-60: clamp(2.188rem, -0.963rem + 6.93vw, 3.75rem);
--font-72: clamp(2.5rem, -1.533rem + 8.86vw, 4.5rem);
--font-96: clamp(2.5rem, -3.802rem + 13.85vw, 5.625rem);
--font-100: clamp(2.813rem, -4.12rem + 15.24vw, 6.25rem);
}
}
.topsection {
padding-top: 88px;
}
.youtube-seo .btnbox a {
background: var(--cvbtn-youtube-seo-color);
font-size: var(--font-24);
padding: .7em;
}
.bg {
background: #FFEFEF;
}
.bg02 {
background: #F25855;
}
.marker {
background: linear-gradient(transparent 70%, #F3BBBA 30%);
width: fit-content;
}
.cvabox {
background: var(--youtube-seo-color);
}
.cvabox .btnbox a {
color: var(--youtube-seo-color);
font-size: var(--font-24);
padding: .5em;
font-family: var(--font--blod-family);
}
@media screen and (max-width: 1089px) {
.topsection {
padding-top: 60px;
}
}
.text_link {
border-bottom: 1px;
color: var(--youtube-seo-color);
}
.fvbox {
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/youtube-seo/fv-bg.webp) center center no-repeat;
background-size: cover;
padding: 2em 2em 4em;
}
.fvbox .fbbox {
display: flex;
justify-content: space-around;
align-items: end;
width: var(--max-width);
margin: auto;
margin-top: 3em;
}
.fvbox .textbox {
max-width: 520px;
width: 52%;
}
.fvbox .textbox .note {
padding: .5em 1em;
width: fit-content;
color: #fff;
margin-bottom: 1em;
border-radius: 5px;
font-family: var(--font--ExtraBold-family);
position: relative;
display: inline-block;
border-radius: 8px;
background-color: #D8201C;
}
.fvbox .textbox .note::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: #D8201C transparent transparent;
translate: -50% 100%;
}
.fvbox .textbox .price {
font-size: 18px;
font-family: var(--font--blod-family);
}
.fvbox .textbox .price .red {
color: #E21E1D;
font-size: 22px;
}
.fvbox .textbox .price .small {
font-size: 12px;
}
.fvbox .textbox .title {
font-size: 36px;
font-family: var(--font--Medium-family);
margin: 0;
}
.fvbox .textbox .text {
margin: 1em 0;
}
.fvbox .textbox .unit {
font-size: 18px;
background: #D8201C;
padding: 0 .5em;
width: fit-content;
color: #fff;
font-family: var(--font--Medium-family);
margin-bottom: 1.5em;
}
.fvbox .textbox .unit spna {
font-size: 12px;
}
.fvbox .textbox .list {
font-size: 14px;
list-style: none;
font-family: var(--font--blod-family);
}
.fvbox .textbox .list li {
margin-bottom: 1em;
text-indent: -1.5em;
padding-left: 1em;
}
.fvbox .textbox .list li .dli-check-circle {
display: inline-block;
background: #D8201C;
vertical-align: sub;
color: #fff;
line-height: 1;
position: relative;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
box-sizing: content-box;
margin-right: .5em;
}
.fvbox .textbox .list li .dli-check-circle > span {
width: 0.58em;
height: 0.261em;
border: 0.1em solid currentColor;
border-top: 0;
border-right: 0;
box-sizing: border-box;
transform: translateY(-25%) rotate(-45deg);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.fvbox .imgbox {
max-width: 480px;
width: 48%;
}
.fvbox .imgbox img {
width: 100%;
}
.fvcta {
background: #D8201C;
padding: 2em 1em;
}
.fvcta .fvctawrap {
max-width: var(--max-width);
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.fvcta .fvctawrap .textbox {
color: #fff;
width: fit-content;
}
.fvcta .fvctawrap .textbox .subtitle {
font-size: 24px;
text-align: center;
font-family: var(--font--blod-family);
margin-bottom: .2em;
}
.fvcta .fvctawrap .textbox .title {
font-size: 50px;
text-align: center;
font-family: var(--font--blod-family);
}
.fvcta .fvctawrap .textbox .title span {
background: #FFED59;
color: #454436;
margin: .1em;
padding: 0 .2em;
border-radius: 5px;
}
.fvcta .fvctawrap .textbox .note {
font-size: 12px;
margin-top: 1em;
}
.fvcta .fvctawrap .btnwrap {
max-width: 360px;
width: 36%;
}
.fvcta .fvctawrap .btnwrap .btnbox a {
background: #FFED59;
color: #454436;
font-size: 20px;
font-family: var(--font--blod-family);
}
.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: var(--youtube-seo-color);
margin-bottom: 2em;
text-align: center;
font-family: var(--font--ExtraBold-family);
}
.sectionbox .titletext {
text-align: center;
margin-bottom: 1em;
}
.sectionbox .sectionbox01 .fbbox {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
margin: auto;
}
.sectionbox .sectionbox01 .fbbox > div {
width: 25%;
}
.sectionbox .sectionbox01 .fbbox > div img {
width: 100%;
}
.sectionbox .sectionbox01 .fbbox > ul {
width: fit-content;
margin-left: 4em;
list-style: none;
}
.sectionbox .sectionbox01 .fbbox > ul li {
margin-bottom: 1em;
font-family: var(--font--Medium-family);
font-size: var(--font-18);
text-indent: -.7em;
padding-left: 1em;
}
.sectionbox .sectionbox01 .fbbox > ul li::before {
content: "\f058";
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;
color: var(--youtube-seo-color);
}
.sectionbox .sectionbox02 h2 {
font-size: var(--font-36);
text-align: center;
margin-bottom: 1em;
font-family: var(--font--Medium-family);
}
.sectionbox .sectionbox02 .textbox {
text-align: center;
margin-bottom: 2em;
font-family: var(--font--blod-family);
}
.sectionbox .sectionbox02 .textbox p {
margin: .5em 0;
font-size: var(--font-24);
}
.sectionbox .sectionbox02 .marker {
margin: .2em auto;
font-size: var(--font-30);
color: var(--youtube-seo-color);
}
.sectionbox .sectionbox02 .pricelistbox {
width: 100%;
margin: 1em auto;
background: #fff;
padding: 1em 2em;
font-size: var(--font-18);
}
.sectionbox .sectionbox02 .pricelistbox .fbbox {
display: flex;
}
.sectionbox .sectionbox02 .pricelistbox .fbbox ul {
width: 50%;
padding: 1em;
}
.sectionbox .sectionbox02 .pricelistbox .fbbox ul li {
margin-bottom: .5em;
}
.sectionbox .sectionbox03 .marker {
color: var(--youtube-seo-color);
}
.sectionbox .sectionbox03 .fbbox {
display: flex;
justify-content: space-between;
align-items: center;
width: fit-content;
margin: 5em auto 0;
}
.sectionbox .sectionbox03 .fbbox .imgbox {
width: 25%;
}
.sectionbox .sectionbox03 .fbbox .imgbox img {
width: 100%;
}
.sectionbox .sectionbox03 .fbbox .textbox {
width: calc(75% - 3em);
}
.sectionbox .sectionbox03 .fbbox .m-number {
font-size: var(--font-30);
color: var(--youtube-seo-color);
font-family: var(--font--blod-family);
}
.sectionbox .sectionbox03 .fbbox .m-number span {
font-size: .4em;
margin-right: .5em;
}
.sectionbox .sectionbox03 .fbbox .m-title {
font-size: var(--font-24);
margin: .5em 0 1em;
font-family: var(--font--Medium-family);
}
.sectionbox .sectionbox03 .fbbox .note {
list-style: none;
margin: 1em 0;
background: #FEF1DF;
}
.sectionbox .sectionbox03 .fbbox .note li {
padding: 1em;
}
.sectionbox .sectionbox03 .fbbox .note li span {
color: var(--youtube-seo-color);
}
.sectionbox .sectionbox03 .fbbox .note li:first-child {
padding-bottom: 0;
}
.sectionbox .sectionbox03 .fbbox:nth-child(2n + 1) {
flex-direction: row-reverse;
}
.sectionbox .sectionbox03 .staffbox {
background: #FFE7E6;
border-radius: 5px;
padding: 2em 1em 1em;
margin: 5em auto 2em;
width: 100%;
}
.sectionbox .sectionbox03 .staffbox .title {
font-size: var(--font-36);
color: var(--youtube-seo-color);
}
.sectionbox .sectionbox03 .staffbox .text {
margin: 1em auto;
text-align: center;
}
.sectionbox .sectionbox03 .staffbox .staff {
margin: 1em auto;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.sectionbox .sectionbox03 .staffbox .staff li {
background: #fff;
color: #333333;
font-size: 16px;
width: calc(33% - 2em);
margin: 0 1em 1em;
padding: .5em;
}
.sectionbox .sectionbox03 .achievements {
max-width: var(--max-width);
background: #E9F8F8;
margin: 1em auto;
padding: 2em;
}
.sectionbox .sectionbox03 .achievements .title {
font-size: var(--font-20);
font-family: var(--font--ExtraBold-family);
color: var(--youtube-seo-color);
}
.sectionbox .sectionbox03 .achievements .list {
padding: 1em 1em 0;
}
.sectionbox .sectionbox03 .achievements .list li {
margin-bottom: .5em;
}
.sectionbox .sectionbox03 .service {
margin-top: 5em;
}
.sectionbox .sectionbox03 .service .title {
margin-bottom: 1em;
}
.sectionbox .sectionbox03 .service .servicebox {
display: flex;
align-items: flex-start;
}
.sectionbox .sectionbox03 .service .servicebox > div {
width: calc(33% - 1em);
margin: 1em .5em;
background: #fff;
padding: 1em;
box-shadow: 0 0 5px #0000005c;
border-radius: 10px;
}
.sectionbox .sectionbox03 .service .servicebox > div .img {
margin: 0;
width: 100%;
}
.sectionbox .sectionbox03 .service .servicebox > div .img img {
width: 100%;
}
.sectionbox .sectionbox03 .service .servicebox > div .name {
font-size: var(--font-sub-size);
margin: 1em auto;
text-align: center;
font-family: var(--font--Medium-family);
}
.sectionbox .sectionbox03 .service .servicebox > div .name span {
font-size: .8em;
}
.sectionbox .sectionbox03 .service .servicebox > div .text {
margin-bottom: 2em;
}
.sectionbox .sectionbox04 .r-box {
display: flex;
justify-content: space-between;
background: #fff;
padding: 2em 1em;
}
.sectionbox .sectionbox04 .r-box > div {
width: 33%;
padding: 1em;
border-right: 1px solid #DEDEDE;
}
.sectionbox .sectionbox04 .r-box > div img {
width: 100%;
}
.sectionbox .sectionbox04 .r-box > div .r-title {
font-size: var(--font-18);
margin-top: 1em;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: var(--font--Medium-family);
}
.sectionbox .sectionbox04 .r-box > div .r-text {
margin-top: 1em;
}
.sectionbox .sectionbox04 .r-box > div .r-text.small {
font-size: .8em;
}
.sectionbox .sectionbox04 .r-box div:last-child {
border: none;
}
.sectionbox .sectionbox05 .subtext {
text-align: center;
margin: 3em auto;
font-family: var(--font--Medium-family);
}
.sectionbox .sectionbox05 .schedulebox {
width: 100%;
display: table;
}
.sectionbox .sectionbox05 .schedulebox tbody {
display: table-row-group;
}
.sectionbox .sectionbox05 .schedulebox th, .sectionbox .sectionbox05 .schedulebox td {
padding: 1em;
border: 1px solid #fff;
border-top: none;
border-bottom: none;
display: table-cell;
vertical-align: middle;
}
.sectionbox .sectionbox05 .schedulebox th {
background: var(--youtube-seo-color);
color: #fff;
text-align: center;
}
.sectionbox .sectionbox05 .schedulebox td {
height: 0;
}
.sectionbox .sectionbox05 .schedulebox th:first-child, .sectionbox .sectionbox05 .schedulebox td:first-child {
width: 60%;
}
.sectionbox .sectionbox05 .schedulebox th:last-child, .sectionbox .sectionbox05 .schedulebox td:last-child {
width: 40%;
text-align: center;
}
.sectionbox .sectionbox05 .schedulebox tr {
display: none;
}
.sectionbox .sectionbox05 .schedulebox tr:first-child, .sectionbox .sectionbox05 .schedulebox tr.active {
display: table-row;
}
.sectionbox .sectionbox05 .schedulebox .teble-title {
text-align: center;
color: var(--youtube-seo-color);
font-size: var(--font-20);
background: #fff !important;
border-bottom: 1px solid #DEDEDE;
display: table-row;
}
.sectionbox .sectionbox05 .schedulebox .teble-title td {
width: 100%;
position: relative;
}
.sectionbox .sectionbox05 .schedulebox .teble-title td::after {
content: "\f067";
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;
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
color: var(--font-color);
}
.sectionbox .sectionbox05 .schedulebox .teble-title.active {
border-bottom: none;
}
.sectionbox .sectionbox05 .schedulebox .teble-title.active td::after {
content: "\f068";
}
.sectionbox .sectionbox05 .schedulebox tr:nth-child(2n + 1) {
background: #FEEFEF;
}
.sectionbox .sectionbox05 .schedulebox tr:nth-child(2n) {
background: #FEF5F5;
}
.sectionbox .sectionbox05 .ecbox {
background: #FFF6EC;
padding: 1em;
margin: 5em 0 0;
}
.sectionbox .sectionbox05 .ecbox .title {
background: var(--youtube-seo-color);
color: #fff;
font-size: var(--font-24);
padding: .5em 0;
}
.sectionbox .sectionbox05 .ecbox .subtitle {
margin: 1em;
font-size: var(--font-24);
color: #333333;
}
.sectionbox .sectionbox05 .ecbox .text {
text-align: center;
margin-bottom: 1em;
line-height: 1.8;
}
.sectionbox .sectionbox05 .ecbox .notebox {
background: #fff;
}
.sectionbox .sectionbox05 .ecbox .notebox .notetitle {
padding: .5em;
background: #333333;
color: #fff;
text-align: center;
font-size: var(--font-24);
font-family: var(--font--Medium-family);
}
.sectionbox .sectionbox05 .ecbox .notebox .fbbox {
display: flex;
}
.sectionbox .sectionbox05 .ecbox .notebox .fbbox .note {
margin: 1em;
padding: 1.5em 0;
width: calc(50% - 2em);
background: var(--youtube-seo-color);
color: #fff;
display: flex;
align-items: center;
border-radius: 5px;
}
.sectionbox .sectionbox05 .ecbox .notebox .fbbox .note div {
width: 100%;
}
.sectionbox .sectionbox05 .ecbox .notebox .fbbox .note .noteplan {
text-align: center;
font-size: var(--font-24);
font-family: var(--font--blod-family);
}
.sectionbox .sectionbox05 .ecbox .notebox .fbbox .note .noteplan span {
font-size: .75em;
}
.sectionbox .sectionbox05 .ecbox .notebox .fbbox .note .notenumber {
margin-top: .5em;
font-size: var(--font-30);
text-align: center;
font-family: var(--font--blod-family);
}
.sectionbox .sectionbox05 .ecbox .notebox .fbbox .note .notenumber span {
font-size: .8em;
}
.sectionbox .sectionbox05 .ecbox .remarks {
text-align: center;
margin: 1em 0 0;
}
.sectionbox .sectionbox06 .monitor-plan-box {
width: 100%;
background: #fff;
padding: 1em 1em 2em;
}
.sectionbox .sectionbox06 .monitor-plan-box .plantitle {
background: var(--font-color);
color: #fff;
text-align: center;
padding: .5em;
font-size: var(--font-30);
}
.sectionbox .sectionbox06 .monitor-plan-box .pricebox {
display: flex;
align-items: center;
justify-content: center;
padding: 1em;
}
.sectionbox .sectionbox06 .monitor-plan-box .pricebox .imgbox {
width: 100px;
}
.sectionbox .sectionbox06 .monitor-plan-box .pricebox .imgbox img {
width: 100%;
}
.sectionbox .sectionbox06 .monitor-plan-box .pricebox .planprice {
color: var(--design-color);
margin: 2em 0;
}
.sectionbox .sectionbox06 .monitor-plan-box .pricebox .planprice .marker {
margin: 0 .1em;
font-size: var(--font-60);
line-height: 1;
font-family: var(--font--blod-family);
color: #D8201C;
}
.sectionbox .sectionbox06 .monitor-plan-box .pricebox .planprice .marker span {
font-size: var(--font-100);
}
.sectionbox .sectionbox06 .monitor-plan-box .pricebox .planprice .note {
font-size: 36px;
color: var(--font-color);
font-family: var(--font--ExtraBold-family);
}
.sectionbox .sectionbox06 .monitor-plan-box .conditions {
padding: 1em 3em;
border-top: 1px solid #D8D8D8;
}
.sectionbox .sectionbox06 .monitor-plan-box .conditions .maintext {
font-size: 24px;
font-family: var(--font--blod-family);
text-align: center;
margin-top: 1em;
}
.sectionbox .sectionbox06 .monitor-plan-box .conditions .subtext {
font-size: 20px;
font-family: var(--font--blod-family);
margin: 0 auto 1em;
text-align: center;
}
.sectionbox .sectionbox06 .monitor-plan-box .conditions .monthbox {
display: flex;
justify-content: space-around;
list-style: none;
width: 100%;
}
.sectionbox .sectionbox06 .monitor-plan-box .conditions .monthbox li {
width: calc(50% - 1em);
text-align: center;
font-family: var(--font--blod-family);
color: #fff;
padding: 1em;
}
.sectionbox .sectionbox06 .monitor-plan-box .conditions .monthbox li p.title {
font-size: 30px;
}
.sectionbox .sectionbox06 .monitor-plan-box .conditions .monthbox li p.text {
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font--Medium-family);
}
.sectionbox .sectionbox06 .monitor-plan-box .conditions .monthbox .month-1 {
margin-right: 1em;
background: #E3625F;
}
.sectionbox .sectionbox06 .monitor-plan-box .conditions .monthbox .month-3 {
margin-right: 1em;
background: #D8201C;
}
.sectionbox .sectionbox06 .optionbox .plus {
position: relative;
width: 100%;
height: 80px;
}
.sectionbox .sectionbox06 .optionbox .plus .plus-01, .sectionbox .sectionbox06 .optionbox .plus .plus-02 {
display: block;
width: 10px;
height: 10px;
background: #333333;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sectionbox .sectionbox06 .optionbox .plus .plus-01 {
width: 50px;
}
.sectionbox .sectionbox06 .optionbox .plus .plus-02 {
height: 50px;
}
.sectionbox .sectionbox06 .optionbox .title {
font-size: var(--font-36);
font-family: var(--font--blod-family);
text-align: center;
margin: 1em auto;
}
.sectionbox .sectionbox06 .optionbox .text {
margin: 1em 0;
font-size: var(--font-18);
text-align: center;
}
.sectionbox .sectionbox06 .optionbox .list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
list-style: none;
}
.sectionbox .sectionbox06 .optionbox .list li {
background: #D8201C;
width: calc(25% - .5em);
text-align: center;
padding: .5em 1em;
margin-bottom: .5em;
margin-right: .5em;
color: #fff;
font-size: 18px;
font-family: var(--font--Medium-family);
}
.sectionbox .sectionbox07 .flowbox {
display: flex;
align-items: center;
margin-bottom: 2em;
}
.sectionbox .sectionbox07 .flowbox .imgbox {
width: 30%;
}
.sectionbox .sectionbox07 .flowbox .imgbox img {
width: 100%;
}
.sectionbox .sectionbox07 .flowbox .textbox {
width: calc(70% - 3em);
margin-left: 3em;
}
.sectionbox .sectionbox07 .flowbox .textbox .flowtitle {
font-size: var(--font-24);
font-family: var(--font--blod-family);
}
.sectionbox .sectionbox07 .flowbox .textbox .flowtext {
margin: 1em 0;
}
.sectionbox .sectionbox08 {
color: #fff;
}
.sectionbox .sectionbox08 .stepbox {
display: flex;
}
.sectionbox .sectionbox08 .stepbox > div {
width: 32%;
padding: 2em 1em 1em;
}
.sectionbox .sectionbox08 .stepbox > div .imgbox {
width: 80%;
margin: 2em auto 1em;
}
.sectionbox .sectionbox08 .stepbox > div .imgbox img {
width: 100%;
}
.sectionbox .sectionbox08 .stepbox > div .step {
color: #fff;
text-align: center;
font-family: var(--font--ExtraBold-family);
}
.sectionbox .sectionbox08 .stepbox > div .s-title {
font-size: var(--font-20);
margin: 1em auto;
text-align: center;
font-family: var(--font--Medium-family);
}
.sectionbox .sectionbox09 .faqbox {
background: #fff;
margin-bottom: 1em;
}
.sectionbox .sectionbox09 .faqbox dt, .sectionbox .sectionbox09 .faqbox dd {
padding: 1em 0;
margin: 0 1em;
text-indent: -3em;
padding-left: 3em;
}
.sectionbox .sectionbox09 .faqbox dt {
position: relative;
border-bottom: 1px solid #E9F8F8;
}
.sectionbox .sectionbox09 .faqbox dd {
display: none;
}
.sectionbox .sectionbox09 .faqbox dt::before, .sectionbox .sectionbox09 .faqbox dd::before {
content: "";
display: inline-block;
width: 35px;
height: 35px;
vertical-align: middle;
margin-right: 1em;
}
.sectionbox .sectionbox09 .faqbox dt::before {
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/youtube-seo/img-icon-q.webp) center center no-repeat;
background-size: cover;
}
.sectionbox .sectionbox09 .faqbox dt::after {
content: "\f067";
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;
position: absolute;
top: 50%;
right: -1em;
transform: translateY(-50%);
color: var(--font-color);
}
.sectionbox .sectionbox09 .faqbox dd::before {
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/youtube-seo/img-icon-a.webp) center center no-repeat;
background-size: cover;
}
.sectionbox .sectionbox10 .note {
text-align: center;
}
.sectionbox .sectionbox10 .voicebox .fb {
margin: auto;
display: flex;
align-items: center;
border-bottom: 1px solid #D4D4D4;
padding: 1em 0;
}
.sectionbox .sectionbox10 .voicebox .fb .imgbox {
width: 180px;
height: 220px;
}
.sectionbox .sectionbox10 .voicebox .fb .imgbox img {
height: 100%;
margin: auto;
display: block;
}
.sectionbox .sectionbox10 .voicebox .fb .textbox {
width: calc(100% - 180px - 1em);
margin-left: 1em;
}
.sectionbox .sectionbox10 .voicebox .fb .textbox .number {
font-size: 14px;
color: #1785BC;
font-family: var(--font--ExtraBold-family);
margin: 0;
}
.sectionbox .sectionbox10 .voicebox .fb .textbox .number span {
font-family: var(--font--blod-family);
font-size: 30px;
margin-left: .2em;
}
.sectionbox .sectionbox10 .voicebox .fb .textbox .title {
font-size: 24px;
text-align: left;
font-family: var(--font--Medium-family);
margin-bottom: .5em;
}
.sectionbox .sectionbox10 .voicebox .fb .textbox .text {
line-height: 1.8;
margin: 0;
}
.sectionbox .sectionbox10 .voicebox .fb:last-child {
border-bottom: none;
}
@media screen and (max-width: 1089px) {
.fvbox .fvtextbox .iconbox {
width: 55%;
}
.fvbox .fvtextbox .imgbox {
right: -50px;
width: 50%;
bottom: -50px;
}
}
@media screen and (max-width: 728px) {
.excluding::before {
font-size: 10px !important;
}
:root {
--font-lower-page-h1-size: 38px;
--font-lower-page-fv-text-size: 18px;
--font-18: 18px;
--font-20: 20px;
--font-24: 22px;
--font-30: 25px;
--font-36: 26px;
--font-48: 30px;
--font-60: 35px;
--font-72: 38px;
--font-96: 40px;
--font-100: 45px;
}
.fvbox {
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/youtube-seo/fv-bg-sp.webp) center center no-repeat;
background-size: cover;
padding: 2em 1em 4em;
}
.fvbox .fbbox {
display: block;
margin: 1em auto;
width: 100%;
}
.fvbox .fbbox .textbox {
width: 100%;
}
.fvbox .fbbox .textbox .count {
margin: 1em auto 0;
}
.fvbox .fbbox .textbox .note {
width: 100%;
text-align: center;
}
.fvbox .fbbox .textbox .text {
text-align: center;
}
.fvbox .fbbox .imgbox {
width: 100%;
margin: 2em auto;
}
.fvbox .fbbox .imgbox img {
width: 100%;
}
.fvbox .fbbox .list {
font-size: 18px;
width: 90%;
margin: auto;
}
.fvbox .btnbox .note {
font-size: 18px;
}
.fvbox .btnbox a::after {
right: 1em;
}
.fvcta .fvctawrap {
display: block;
}
.fvcta .fvctawrap .textbox {
margin: auto;
}
.fvcta .fvctawrap .textbox .subtitle {
font-size: 16px;
text-align: center;
}
.fvcta .fvctawrap .textbox .note {
text-align: center;
margin-top: 0;
}
.fvcta .fvctawrap .btnwrap {
margin: 1em auto;
max-width: 360px;
width: 100%;
}
.fvcta .fvctawrap .btnwrap .btnbox {
width: 100%;
}
.sectionbox .sectionbox01 .fbbox {
display: block;
}
.sectionbox .sectionbox01 .fbbox > div {
width: 50%;
margin: 1em auto;
}
.sectionbox .sectionbox01 .fbbox > ul {
margin-left: 1em;
}
.sectionbox .sectionbox02 .textbox {
text-align: left;
}
.sectionbox .sectionbox02 .pricelistbox {
padding: 1em;
}
.sectionbox .sectionbox02 .pricelistbox .fbbox {
display: block;
}
.sectionbox .sectionbox02 .pricelistbox .fbbox ul {
width: 100%;
padding: 0 1em;
}
.sectionbox .sectionbox03 .fbbox {
display: block;
margin: 2em auto;
}
.sectionbox .sectionbox03 .fbbox .textbox {
width: 100%;
}
.sectionbox .sectionbox03 .fbbox .imgbox {
width: 50%;
margin: 1em auto;
}
.sectionbox .sectionbox03 .fbbox .m-number span {
font-size: .6em;
}
.sectionbox .sectionbox03 .fbbox .m-title {
margin: 0 0 .5em;
}
.sectionbox .sectionbox03 .staffbox .text {
text-align: left;
}
.sectionbox .sectionbox03 .staffbox .staff {
display: block;
}
.sectionbox .sectionbox03 .staffbox .staff li {
font-size: 14px;
width: 100%;
margin: 0 0 1em;
}
.sectionbox .sectionbox03 .service .servicebox {
display: block;
}
.sectionbox .sectionbox03 .service .servicebox > div {
width: 100%;
margin: 1em 0;
}
.sectionbox .sectionbox04 .r-box {
display: block;
}
.sectionbox .sectionbox04 .r-box > div {
width: 100%;
padding: 1em;
border-bottom: 1px solid #DEDEDE;
border-right: none;
}
.sectionbox .sectionbox05 .ecbox {
background: #FFF6EC;
padding: 1em;
margin: 5em 0 0;
}
.sectionbox .sectionbox05 .ecbox .text {
text-align: left;
}
.sectionbox .sectionbox05 .ecbox .notebox {
background: #fff;
}
.sectionbox .sectionbox05 .ecbox .notebox .fbbox {
display: block;
}
.sectionbox .sectionbox05 .ecbox .notebox .fbbox .note {
width: calc(100% - 2em);
}
.sectionbox .sectionbox06 .monitor-plan-box .pricebox {
padding: .5em;
}
.sectionbox .sectionbox06 .monitor-plan-box .pricebox .imgbox {
width: 80px;
}
.sectionbox .sectionbox06 .monitor-plan-box .conditions {
padding: 1em;
}
.sectionbox .sectionbox06 .monitor-plan-box .conditions .monthbox {
display: block;
}
.sectionbox .sectionbox06 .monitor-plan-box .conditions .monthbox li {
width: 100%;
margin-bottom: 1em;
}
.sectionbox .sectionbox06 .optionbox .notebox {
display: block;
}
.sectionbox .sectionbox06 .optionbox .notebox .notetitle {
text-align: center;
border-bottom: 1px solid #a08d77;
padding-bottom: .5em;
}
.sectionbox .sectionbox06 .optionbox .notebox .notetextbox {
width: 100%;
border: none;
padding: 1em 1em 0;
}
.sectionbox .sectionbox06 .optionbox .list {
display: block;
padding: 0 1em;
font-size: 14px;
}
.sectionbox .sectionbox06 .optionbox .list li {
width: 100%;
margin: .5em 0;
display: block;
}
.sectionbox .sectionbox07 .flowbox {
display: block;
}
.sectionbox .sectionbox07 .flowbox .imgbox, .sectionbox .sectionbox07 .flowbox .textbox {
width: 100%;
margin: 0;
}
.sectionbox .sectionbox07 .preparation .preparationbox {
display: block;
}
.sectionbox .sectionbox07 .preparation .preparationbox > div {
width: 100%;
box-sizing: border-box;
}
.sectionbox .sectionbox08 .stepbox {
display: block;
}
.sectionbox .sectionbox08 .stepbox > div {
width: 100%;
box-sizing: border-box;
padding: 0;
}
.sectionbox .sectionbox08 .stepbox > div .imgbox {
width: 50%;
}
.sectionbox .sectionbox09 .faqbox dt, .sectionbox .sectionbox09 .faqbox dd {
padding-right: 2em;
}
.sectionbox .sectionbox09 .faqbox dt::after {
right: -2em;
}
.sectionbox .sectionbox10 .title {
text-align: left;
}
.sectionbox .sectionbox10 .note {
text-align: left;
}
.sectionbox .sectionbox10 .voicebox .fb {
flex-direction: column-reverse;
margin-top: 1em;
}
.sectionbox .sectionbox10 .voicebox .fb .imgbox {
width: 100%;
}
.sectionbox .sectionbox10 .voicebox .fb .textbox {
width: 100%;
margin-left: 0;
}
}
@media screen and (max-width: 1089px) {
.other-services.sectionbox .servicebox .slick-prev {
left: 0;
}
.other-services.sectionbox .servicebox .slick-next {
right: 0;
}
.other-services.sectionbox .servicebox .slick-prev, .other-services.sectionbox .servicebox .slick-next {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
}
}
.excluding {
position: relative;
}
.excluding::before {
content: "(税抜)";
display: block;
font-size: .3em;
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: max-content;
color: #333333;
}
@media screen and (max-width: 728px) {
.excluding::before {
font-size: 10px !important;
}
}
.cvbox {
background: #D8201C;
color: #fff;
padding: 0 2em;
}
.cvbox .box {
max-width: var(--max-width);
position: relative;
margin: auto;
padding: 2em 0;
}
.cvbox .box .text {
font-size: 30px;
text-align: center;
line-height: 2em;
}
.cvbox .box .text .dot-text-number {
font-size: 36px;
padding-top: .2em;
background-position: top left -2px;
background-repeat: repeat-x;
background-size: .8em .3em;
background-image: radial-gradient(0.15em 0.15em at center center, #9A0300, #9A0300 100%, transparent);
}
.cvbox .box .text .dot-text-text {
font-size: 36px;
padding-top: .2em;
background-position: top left -3em;
background-repeat: repeat-x;
background-size: 1em .3em;
background-image: radial-gradient(0.15em 0.15em at center center, #9A0300, #9A0300 100%, transparent);
}
.cvbox .box .small {
font-size: 20px;
text-align: center;
line-height: 1.5em;
}
.cvbox .box .limited {
background: #FBE9E9;
position: relative;
width: fit-content;
border-radius: 5px;
margin: 1em auto 0;
display: flex;
align-items: center;
padding: .5em 1em;
font-size: 20px;
font-family: var(--font--blod-family);
color: #333333;
}
.cvbox .box .limited .red {
background: #B50400;
border-radius: 5px;
padding: .2em .5em;
width: fit-content;
font-size: 15px;
margin-right: 1em;
color: #fff;
}
.cvbox .box .limited .number {
font-size: 24px;
}
.cvbox .box .limited .company {
font-size: 12px;
}
.cvbox .box .limited::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: #FEF5E6 transparent transparent;
translate: -50% 100%;
}
.cvbox .box .btnbox {
margin: 2em auto;
}
.cvbox .box .btnbox a {
color: #333333;
background: #FFED59;
}
.cvbox .box::before, .cvbox .box::after {
content: "";
position: absolute;
display: block;
width: 160px;
height: 154px;
bottom: 0;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
}
.cvbox .box::before {
left: 0;
background-image: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/banner/cta-img-left.webp);
}
.cvbox .box::after {
right: 0;
background-image: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/banner/cta-img-right.webp);
}
@media screen and (min-width: 729px) and (max-width: 1089px) {
.cvbox .sp {
display: none;
}
.cvbox .pc {
display: block;
}
.cvbox .cv-main-box .cv-imgbox {
display: flex;
align-items: center;
}
.cvbox .cv-main-box .cv-imgbox .icon {
width: 100px;
top: 10px;
right: -20px;
}
}
@media screen and (max-width: 728px) {
.cvbox .box {
padding-bottom: 4em;
}
.cvbox .box .text {
font-size: 20px;
}
.cvbox .box .text .dot-text {
font-size: 28px;
background-size: .9em .3em;
}
.cvbox .box .limited {
display: block;
}
.cvbox .box .limited .red {
margin: auto;
}
.cvbox .box .limited p {
text-align: center;
}
.cvbox .box .small {
font-size: 18px;
text-align: left;
margin-top: 1em;
}
.cvbox .box::before, .cvbox .box::after {
width: 100px;
height: 90px;
}
}.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0
}
.slick-list:focus {
outline: none
}
.slick-list.dragging {
cursor: pointer;
cursor: hand
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto
}
.slick-track:before,
.slick-track:after {
display: table;
content: ''
}
.slick-track:after {
clear: both
}
.slick-loading .slick-track {
visibility: hidden
}
.slick-slide {
display: none;
float: left;
min-height: 1px
}
[dir='rtl'] .slick-slide {
float: right
}
.slick-slide img {
display: block
}
.slick-slide.slick-loading img {
display: none
}
.slick-slide.dragging img {
pointer-events: none
}
.slick-initialized .slick-slide {
display: block
}
.slick-loading .slick-slide {
visibility: hidden
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent
}
.slick-arrow.slick-hidden {
display: none
}

.slick-loading .slick-list {
background: #fff url(https://subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/slider/ajax-loader.gif) center center no-repeat
}
@font-face {
font-family: 'slick';
font-weight: 400;
font-style: normal;
src: url(https://subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/slider/fonts/slick.eot);
src: url(https://subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/slider/fonts/slick.eot?#iefix) format('embedded-opentype'), url(https://subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/slider/fonts/slick.woff) format('woff'), url(https://subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/slider/fonts/slick.ttf) format('truetype'), url(https://subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/slider/fonts/slick.svg#slick) format('svg')
}
.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
z-index: 3;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: .25
}
.slick-prev:before,
.slick-next:before {
font-family: 'slick';
font-size: 50px;
line-height: 1;
opacity: .75;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.slick-prev {
left: 50px
}
[dir='rtl'] .slick-prev {
right: -25px;
left: auto
}
.slick-prev:before {
content: '←'
}
[dir='rtl'] .slick-prev:before {
content: '→'
}
.slick-next {
right: 50px
}
[dir='rtl'] .slick-next {
right: auto;
left: -25px
}
.slick-next:before {
content: '→'
}
[dir='rtl'] .slick-next:before {
content: '←'
}
.slick-dotted.slick-slider {
margin-bottom: 30px
}
.slick-dots {
position: absolute;
bottom: -10px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
display: flex;
}
.slick-dots li {
position: relative;
width: 100%;
height: 10px;
margin: 0;
padding: 0;
cursor: pointer
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 100%;
height: 100%;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1
}
.slick-dots li button:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
background-color: color-mix(in srgb, var(--main-color) 30%, #fff);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.slick-dots li.slick-active button:before {
background-color: color-mix(in srgb, var(--main-color) 70%, #fff);
}