@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: 48px;
--font-lower-page-fv-text-size: 24px;
--font-14: 14px;
--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: 768px) 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);
}
}
@media screen and (max-width: 767px) {
:root {
--font-lower-page-h1-size: 38px;
--font-lower-page-fv-text-size: 18px;
--font-24: 22px;
--font-30: 25px;
--font-36: 26px;
--font-48: 30px;
--font-60: 35px;
--font-72: 38px;
--font-96: 40px;
--font-100: 45px;
}
}
.fv {
padding-top: 88px;
}
.fvbox {
background: url(//subsc-designoffice.jp/wp-content/themes/subsc-designoffice/libs/img/common/fvbg.webp) center center no-repeat;
background-size: cover;
height: 300px;
display: flex;
align-items: center;
}
.fvbox .fvtext {
max-width: var(--max-width);
width: 95%;
margin: auto;
}
.fvbox .fvtext .subtitle {
font-size: var(--font-24);
font-family: var(--font--Medium-family);
margin-bottom: .5em;
}
.fvbox .fvtext .title {
font-size: var(--font-lower-page-h1-size);
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: left;
}
.sectionbox .deta {
font-size: 12px;
color: #ACACB4;
font-family: var(--font--Medium-family);
margin-bottom: 1em;
}
.sectionbox h1 {
font-size: var(--font-30);
font-family: var(--font--Medium-family);
margin-bottom: 1em;
}
.sectionbox .content {
padding-bottom: 2em;
margin-top: 3em;
}
.sectionbox .content h2,
.sectionbox .content h3,
.sectionbox .content h4,
.sectionbox .content h5,
.sectionbox .content h6 {
margin: 2em 0 0.8em;
font-family: var(--font--blod-family);
line-height: 1.4;
white-space: normal;
}
.sectionbox .content h2+h3,
.sectionbox .content h3+h4,
.sectionbox .content h4+h5,
.sectionbox .content h5+h6 {
margin-top: 0.5em;
}
.sectionbox .content h2 {
font-size: 30px;
background: #FFFCDE;
border-bottom: 3px solid #FFED59;
padding: .2em .5em;
}
.sectionbox .content h3 {
font-size: 24px;
border-bottom: 3px solid #2B7DC2;
}
.sectionbox .content h4 {
font-size: 20px;
border-left: 7px solid #FFED58;
padding-left: .5em;
}
.sectionbox .content h5 {
font-size: 18px;
}
.sectionbox .content h6 {
font-size: 16px;
}
.sectionbox .content p {
margin-bottom: 1.5em;
line-height: 1.8;
}
.sectionbox .content a {
color: #2A7DC2;
}
.sectionbox .content ul,
.sectionbox .content ol {
margin: 1em;
}
.sectionbox .content ul li,
.sectionbox .content ol li {
line-height: 1.8;
margin-bottom: 0.5em;
}
.sectionbox .content img,
.sectionbox .content figure {
margin-bottom: 16px;
}
.sectionbox .content h2+figure,
.sectionbox .content h3+figure,
.sectionbox .content h4+figure,
.sectionbox .content h5+figure {
margin-top: 16px;
}
.sectionbox .content .has-fixed-layout {
margin: 0 0 1em;
}
.sectionbox .content .has-fixed-layout td {
border: 1px solid #E1E1E1;
line-height: 1.6;
}
.sectionbox .content .has-fixed-layout td:first-child {
background: #F3F3F3;
padding: 1em;
transform: rotate(0);
}
.sectionbox .content .wp-block-button {
max-width: 360px;
width: 90%;
text-align: center;
position: relative;
margin: 1em 0;
}
.sectionbox .content .wp-block-button a {
background: #2B7DC2;
color: #fff;
display: block;
}
.sectionbox .content .wp-block-button 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%);
}
.sectionbox .content .mokuji_wrap {
background: #ECECEC;
padding: 2em 2.5em;
border-radius: 5px;
}
.sectionbox .content .mokuji_wrap .mokuji {
font-size: 30px;
border-bottom: 1px solid #E1E1E1;
padding-bottom: 16px;
font-family: var(--font--blod-family);
}
.sectionbox .content .mokuji_wrap ul {
list-style: none;
margin: 1em 1em 1em 0;
}
.sectionbox .content .mokuji_wrap ul a {
color: #333333;
text-decoration: none;
}
.sectionbox .content .mokuji_wrap ul a:hover {
border-bottom: 1px solid;
color: #2A7DC2;
}
.sectionbox .content .mokuji_wrap ul ul {
margin-top: 0;
margin-left: 1em;
}
.sectionbox .content .mokuji_wrap>ul>li:last-child {
border-top: 1px solid #E1E1E1;
margin-top: 1em;
padding-top: 1em;
}
.sectionbox .btnbox {
margin: 2em auto;
max-width: inherit;
width: fit-content;
}
.sectionbox .btnbox a {
background: #323332;
padding: 1em 3em;
}
.sectionbox .btnbox a::after {
display: none;
}
.sectionbox .banabtn {
margin: 0 auto 2em;
}
.sectionbox .banabtn p {
width: 100%;
}
.sectionbox .banabtn p a {
background: #2B7DC2;
color: #fff;
display: block;
padding: .5em 3em;
}
.sectionbox .banabtn p 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: 1em;
transform: translateY(-50%);
}
.sectionbox .category {
display: flex;
}
.sectionbox .category p {
background: #ECECEC;
padding: .5em 1em;
font-family: var(--font--ExtraBold-family);
color: #2D2D41;
font-size: 12px;
width: fit-content;
margin-right: .5em;
border-radius: 3px;
}
.sectionbox .bottom_category {
border-top: 1px solid #D0D0D0;
border-bottom: 1px solid #D0D0D0;
padding: 1em;
}
.sectionbox .posted {
display: flex;
width: 100%;
background: #ECECEC;
margin-top: 2em;
}
.sectionbox .posted .note {
width: 260px;
padding: 2em 0 2em 3em;
display: flex;
align-items: center;
}
.sectionbox .posted .note .img {
width: 75px;
margin-right: 1em;
}
.sectionbox .posted .note .img img {
width: 100%;
}
.sectionbox .posted .note .name {
font-size: 20px;
}
.sectionbox .posted .note .post {
font-size: 14px;
}
.sectionbox .posted .text {
width: calc(100% - 240px - 3em);
padding: 2em;
}
.bottombox {
max-width: var(--max-width);
width: 90%;
margin: 1em auto 3em;
}
.bottombox .title {
font-size: var(--font-title-size);
text-align: center;
}
.bottombox .subtitle {
font-size: var(--font-sub-title-size);
color: #F0D630;
margin-bottom: 2em;
text-align: center;
font-family: var(--font--ExtraBold-family);
}
.bottombox .connection {
display: flex;
}
.bottombox .connection .article-box {
width: calc(33% - 2em);
margin: 1em;
}
.bottombox .connection .article-box a {
text-decoration: none;
}
.bottombox .connection .article-box img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 5px;
}
.bottombox .connection .article-box .article-fb {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-top: .5em;
}
.bottombox .connection .article-box .article-fb .article-data {
font-size: 30px;
font-family: var(--font--blod-family);
color: #2D2D41;
}
.bottombox .connection .article-box .article-fb .article-data span {
font-size: 12px;
color: #626271;
margin-right: .5em;
}
.bottombox .connection .article-box .article-fb .articl-category {
display: flex;
flex-wrap: wrap;
}
.bottombox .connection .article-box .article-fb .articl-category p {
background: #ECECEC;
padding: .5em;
font-family: var(--font--ExtraBold-family);
color: #2D2D41;
font-size: 10px;
margin-left: .2em;
margin-top: .2em;
}
.bottombox .connection .article-box .article-title {
font-size: 14px;
font-family: var(--font--Medium-family);
color: #333333;
}
.fbbox {
display: flex;
align-items: flex-start;
max-width: var(--max-width);
margin: auto;
}
.sidebox {
width: 300px;
margin-left: 1em;
padding: 4.5em 0;
}
.sidebox .search-form-box {
border-bottom: 1px solid #ECECEC;
padding: 1em 0 .5em;
}
.sidebox .search-form-box form {
display: flex;
}
.sidebox .search-form-box form button {
background: inherit;
border: none;
margin: 0;
padding: 0;
width: 20px;
}
.sidebox .search-form-box form input {
border: none;
padding: .5em .1em;
width: calc(100% - 20px - .5em);
}
.sidebox .categorybox {
padding: 1em 0;
width: 100%;
border-bottom: 1px solid #ECECEC;
}
.sidebox .categorybox ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.sidebox .categorybox ul li {
width: fit-content;
margin: .1em;
}
.sidebox .categorybox ul li a {
color: #2D2D41;
text-decoration: none;
background: #ECECEC;
padding: .5em;
font-family: var(--font--ExtraBold-family);
color: #2D2D41;
font-size: 12px;
display: block;
}
.rankingbox {
margin-top: 2em;
}
.rankingbox .ranking_title {
display: flex;
align-items: center;
border-bottom: 1px solid #ECECEC;
padding-bottom: .5em;
}
.rankingbox .ranking_title .img {
width: 20px;
display: flex;
}
.rankingbox .ranking_title .img img {
width: 100%;
}
.rankingbox .ranking_title .text {
font-size: 20px;
}
.rankingbox .ranking .ranking-list a {
display: flex;
border-bottom: 1px solid #ECECEC;
padding: 1em 0;
color: #333333;
text-decoration: none;
}
.rankingbox .ranking .ranking-list a .ranking-imgbox img {
width: 50px;
height: 50px;
object-fit: cover;
}
.rankingbox .ranking .ranking-list a .ranking-text {
font-size: 12px;
margin-left: 1em;
}
.ctabox .title {
text-align: center;
}
@media screen and (max-width: 767px) {
.sectionbox .posted {
display: block;
width: 100%;
margin-top: 2em;
}
.sectionbox .posted .note {
width: 100%;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
}
.sectionbox .posted .text {
width: 100%;
padding: 0 2em 1em;
}
.bottombox {
max-width: var(--max-width);
width: 90%;
margin: 1em auto 3em;
}
.bottombox .title {
font-size: var(--font-title-size);
text-align: center;
}
.bottombox .subtitle {
font-size: var(--font-sub-title-size);
color: #F0D630;
margin-bottom: 2em;
text-align: center;
font-family: var(--font--ExtraBold-family);
}
.bottombox .connection {
display: block;
}
.bottombox .connection .article-box {
width: 100%;
margin: 1em 0;
}
.bottombox .connection .article-box a {
display: flex;
border-bottom: 1px solid #ECECEC;
padding: 1em 0;
color: #333333;
text-decoration: none;
}
.bottombox .connection .article-box a .article-imgbox img {
width: 80px;
height: 80px;
object-fit: cover;
}
.bottombox .connection .article-box a .article-fb {
margin-left: 1em;
font-size: 12px;
display: block;
}
.bottombox .connection .article-box a .article-fb .article-data {
font-size: 12px;
margin-bottom: .5em;
}
.bottombox .connection .article-box a .article-title {
font-size: 12px;
margin: .5em 0 0 1em;
}
.fbbox {
display: block;
}
.sidebox {
width: 90%;
margin: auto;
padding: 0 0 2em;
}
.sidebox .search-form-box {
border-bottom: 1px solid #ECECEC;
padding: 1em 0 .5em;
}
.sidebox .search-form-box button {
background: inherit;
border: none;
margin: 0;
padding: 0;
width: 20px;
}
.sidebox .search-form-box input {
border: none;
padding: .5em .1em;
width: calc(100% - 20px - .5em);
}
.sidebox .categorybox {
padding: 1em 0;
width: 100%;
border-bottom: 1px solid #ECECEC;
}
.sidebox .categorybox ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.sidebox .categorybox ul li {
width: fit-content;
margin: .1em;
}
.sidebox .categorybox ul li a {
color: #2D2D41;
text-decoration: none;
background: #ECECEC;
padding: .5em;
font-family: var(--font--ExtraBold-family);
color: #2D2D41;
font-size: 12px;
display: block;
}
.rankingbox {
margin-top: 2em;
}
.rankingbox .ranking_title {
display: flex;
align-items: center;
border-bottom: 1px solid #ECECEC;
padding-bottom: .5em;
}
.rankingbox .ranking_title .img {
width: 20px;
}
.rankingbox .ranking_title .img img {
width: 100%;
}
.rankingbox .ranking_title .text {
font-size: 20px;
}
.rankingbox .ranking .ranking-list a {
display: flex;
border-bottom: 1px solid #ECECEC;
padding: 1em 0;
color: #333333;
text-decoration: none;
}
.rankingbox .ranking .ranking-list a .ranking-imgbox img {
width: 50px;
height: 50px;
object-fit: cover;
}
.rankingbox .ranking .ranking-list a .ranking-text {
font-size: 12px;
margin-left: 1em;
}
}
@media screen and (min-width: 768px) {
.sectionbox .content p,
.sectionbox .content ul li,
.sectionbox .content ol li {
font-size: 17px;
}
}
@media screen and (min-width: 1090px) {
.sectionbox .content {
max-width: 750px;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 767px) {
.sectionbox .content p,
.sectionbox .content ul li,
.sectionbox .content ol li {
font-size: 16px;
}
}
.is-style-mb1 {
margin-bottom: 1em;
}
.is-style-mb2 {
margin-bottom: 2em;
}
.is-style-mb3 {
margin-bottom: 3em;
}
.is-style-mb4 {
margin-bottom: 4em;
}
.is-style-mb5 {
margin-bottom: 5em;
}
.is-style-mt1 {
margin-top: 1em;
}
.is-style-mt2 {
margin-top: 2em;
}
.is-style-mt3 {
margin-top: 3em;
}
.is-style-mt4 {
margin-top: 4em;
}
.is-style-mt5 {
margin-top: 5em;
}
.mokuji_advertisement img {
width: 100%;
}