@charset "utf-8";
    @import url("https://fonts.googleapis.com/css2?family=Hurricane&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Oswald:wght@200..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap");
:root { --color-background: #E8FAFE;
--color-font: #242422;
--color-primary: #007BC7;
--color-primary-shade: #1055B1;
--color-primary-tint: #007BC7;
--color-secondary: #D21F14;
--color-secondary-tint: #D21F14;
--color-table-border: #ccc;
--body-font-size: min(calc(1.6rem + (1vw - 1.92rem) * 0.1294), 1.6rem); --body-font-family: 'Noto Sans JP', sans-serif;
--content-max-width: 1240px; --header-background: #FFF;
--header-color-font: #242422;
--header-color-primary: #007BC7;
--header-color-primary-shade: #007BC7;
--header-color-primary-tint: #007BC7; --footer-background: #f5f5f5;
--footer-color-font: #242422;
--footer-color-primary: #007BC7; --font-family01: 'Noto Sans JP', sans-serif;
--font-family02: "Noto Serif JP", serif;
--font-family03: "Oswald", serif;
--font-family04: "Sawarabi Mincho", serif;
--font-family05: "Cormorant Garamond", serif;
--font-awesome: "Font Awesome 6 Free"; --top-padding: min(calc(180px + (1vw - 19.2px) * 14.7698), 180px);  --color-gray: #626262;
} .post h2 {
font-size: var(--rem30);
font-family: var(--font-family02);
font-weight: 500;
text-align: left;
letter-spacing: 0.02em;
padding: 0 0 var(--px14) 0;
margin: 0 0 var(--px40) 0;
display: block;
border-bottom: 1px solid #ccc;
line-height: 1.5;
&::before {
content: '';
visibility: visible;
display: inline-block;
width: 3px;
height: 20px;
background: var(--color-primary);
margin-right: 10px;
}
&::after {
content: none;
}
span.en_ttls {
font-family: var(--font-family05);
font-size: var(--rem20);
vertical-align: middle;
font-weight: 400;
margin-left: 7px;
}
&:is(.cc_white) {
color: #fff;
&::before {
background: #fff;
}
& span.en_ttls {
color: #fff;
}
}
}
@media print,
screen and (max-width: 768px) {
.post h2 span.en_ttls {
display: block;
}
}
.post h3 {
font-size: var(--rem20);
font-family: var(--font-family02);
background: var(--color-primary-shade);
border: none;
color: #fff;
padding: var(--rem18) var(--rem14);
position: relative;
margin-block: var(--px40) var(--px20);
line-height: 1;
&::before {
content: '';
background: #fff;
width: 3px;
height: 14px;
display: inline-block;
margin-right: 8px;
}
&:is(.cc_white) {
background: #fff;
color: var(--color-primary-shade);
&::before {
background: var(--color-primary-shade);
}
& span.en_ttls {
color: var(--color-primary-shade);
}
}
}
.ttl {
&.ttl--primary {
letter-spacing: 0;
line-height: 1.3;
margin: 0;
display: flex;
flex-direction: column;
font-family: var(--font-family04);
font-weight: normal;
font-size: var(--rem40);
color: var(--color-font);
text-align: center;
padding: 0;
border: none;
&::before {
display: none;
}
&::after {
display: none;
}
& .en_ttls {
font-size: 2.2rem; font-family: var(--font-family05);
font-weight: 600;
display: inline-block;
color: var(--color-primary);
}
& .ja_ttls {}
&.ccwhite {
color: #fff;
& span {
color: #fff;
}
}
}
}
.mintxt {
font-size: 80%;
}
.infotxt {
font-size: 90%;
}
.ccblue {
color: var(--color-primary);
}
.ccwhite {
color: #fff;
}
.font_min {
font-family: var(--font-family02) !important;
}
p {
line-height: 2;
}
.m-auto {
margin-left: auto !important;
margin-right: auto !important;
}
#scrollUp {
bottom: 30px !important;
background: var(--color-font) !important;
}
@media print,
screen and (max-width: 768px) {
#scrollUp {
bottom: 70px !important;
}
}
ul.flowimage_arrownavi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 50px;
& li {
position: relative;
line-height: 1.5;
& p {
text-align: center;
margin-top: var(--px14);
}
& img {}
&:not(:last-of-type)::before {
content: '\f0da';
position: absolute;
display: inline-block;
font-family: 'Font Awesome 6 Free';
font-weight: 600;
right: -30px;
top: 50%;
transform: translateY(-50%);
font-size: var(--px40);
color: var(--color-primary);
@media print,
screen and (max-width: 768px) {
right: 50%;
transform: translate3d(50%, 0, 0);
top: auto;
bottom: -40px;
content: '\f0d7';
}
}
}
} .bg_wide {
position: relative;
}
.bg_wide::before,
.bg_wide.bg_after::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100vw;
height: 100%;
margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);
content: "";
z-index: -1;
}
.box_w2_sp {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box_w2_sp.rev {
flex-direction: row-reverse;
}
.box_w2_sp.vtop {
align-items: flex-start;
}
.box_w2_sp.vcen {
align-items: center;
}
.box_w2_sp.vbtm {
align-items: flex-end;
}
.box_pad {
padding: 20px;
box-sizing: border-box;
}
.box_w2 .column2_50:not(.cen) {
text-align: left;
}
@media print,
screen and (min-width: 641px) { .bg_fix::before {
background-attachment: fixed !important;
}
.box_w2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box_w2.rev {
flex-direction: row-reverse;
}
.box_w2.vtop {
align-items: flex-start;
}
.box_w2.vcen {
align-items: center;
}
.box_w2.vbtm {
align-items: flex-end;
}
.box_pad {
padding: 30px;
}
.box_w2 .column3_33 {
width: 32%;
}
.box_w2 .column2_50 {
width: 48.5%;
}
.box_w2 .column2_60 {
width: 57%;
}
.box_w2 .column2_70 {
width: 67%;
}
.box_w2 .column2_80 {
width: 77%;
}
}
@media print,
screen and (min-width:769px) { .box_pad {
padding: 50px;
}
} .box_w2 .column3_33 img,
.box_w2 .column2_30 img,
.box_w2 .column2_40 img,
.box_w2 .column2_50 img {
max-width: 100%;
} .w100 {
width: 100vw;
margin-left: calc(((100vw - 100%) / 2) * -1) !important;
margin-right: calc(((100vw - 100%) / 2) * -1) !important;
}
.w600,
.w800,
.w900 {
width: 600px;
max-width: 100%;
margin: auto;
}
.w800 {
width: 800px;
}
.w900 {
width: 900px;
}
.max-w {
margin-left: auto;
margin-right: auto;
&.max-w--960 {
max-width: 960px;
}
&.max-w--1000 {
max-width: 1000px;
}
} #wrapper {
position: relative;
}
.fw_contents {
margin-top: 0;
margin-bottom: 0;
}
#content:has(.fw_contents),
body:not(.home) #content:has(.fw_contents).wide {
padding: 0;
}
.page_contents_inner+.page_contents_inner {
margin-top: var(--px100);
}
.fw_contents .page_contents_inner {
padding-block: var(--px100);
margin-top: 0;
} .anchorLink-view {
padding-top: 100px;
margin-top: -100px;
}
#content,
body:not(.home) #content.wide {
padding: var(--px100w) 0 var(--px120);
} .link_btn {
max-width: 100%;
width: auto;
padding: 0;
transition: all ease 0.6s;
& a {
color: #fff;
font-size: min(calc(1.6rem + (1vw - 1.92rem) * 0.2589), 1.6rem); display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: var(--px14) var(--px40);
letter-spacing: 0;
&::after {
content: "\f138";
display: inline-block;
font-family: var(--font-awesome);
font-weight: 600;
margin-left: 4px;
font-size: 90%;
}
}
&::after {
content: none;
}
&:hover {
opacity: 0.6;
}
&:is(.ccwhite) {
background: #fff;
& a {
color: var(--color-primary-shade);
}
}
} #breadcrumb {
position: relative;
} .post table td {
background: #fff;
} .postlist li {
border-bottom: 1px solid #999;
}
.postlist li:first-child {
border-top: 1px solid #999;
}
.postlist .post_text {
padding-block: var(--px30);
} @media print,
screen and (min-width: 1024px) {
#header {
height: 100px;
& #header-layout {
& .logo {
& a {
& img {
max-height: none;
max-width: min(calc(250px + (1vw - 19.2px) * 22.3214), 250px); }
}
}
& .header__nav-contact {
flex-grow: 1;
& nav#mainNav {
& ul li a {
color: var(--header-color-font);
font-size: min(calc(1.5rem + (1vw - 1.92rem) * 0.5580), 1.5rem); padding-inline: min(calc(10px + (1vw - 19.2px) * 0.2232), 10px); flex-direction: row;
& b {
font-weight: 700;
}
&:hover {
opacity: 0.6;
}
}
}
& nav#mainNav ul li:has(.sub-menu) {
&>a {
position: relative;
&:after {
content: '\f107';
display: inline-block;
font-family: 'FontAwesome';
font-size: 1rem;
margin-left: 6px;
}
}
& ul.sub-menu li a:hover {
background-color: #eee;
opacity: 1;
}
}
}
}
}
nav#mainNav ul.sub-menu>li:has(ul.sub-menu)>a::after {
content: '\f105' !important;
}
body:not(.home) {
#header {
& #header-layout {
.header__nav-contact {
& nav#mainNav {
& ul li a {}
}
}
}
}
}
nav#mainNav ul li a:active,
nav#mainNav ul li a:hover,
nav#mainNav ul li.current-menu-ancestor a,
nav#mainNav ul li.current-menu-item a,
nav#mainNav ul li.current-menu-parent a {
background: transparent;
opacity: 1;
}
nav#mainNav ul li.current-menu-item a b,
nav#mainNav ul li a:hover b,
nav#mainNav ul li a:active b,
nav#mainNav ul li.current-menu-parent a b {
color: inherit;
}
nav#mainNav ul li li.current-menu-item a,
nav#mainNav ul li.current-menu-ancestor li.current-menu-item a {
background: rgba(255, 255, 255, 1);
color: var(--color-font);
}
nav#mainNav ul li ul.sub-menu li a:hover {
background: rgba(255, 255, 255, 0.6);
color: #242422;
}
#header ul.header__contact {
margin-left: auto;
& li {
height: auto;
&:is(.head_tel) a {
display: flex;
flex-direction: column;
align-items: center;
& span.num {
font-size: var(--rem24);
font-weight: 900;
position: relative;
display: inline-block;
line-height: 1;
&::before {
content: '\f095';
font-family: var(--font-awesome);
font-size: 70%;
display: inline-block;
transform: translateY(-2px);
margin-right: 2px;
}
}
& span.txts {
font-size: min(calc(1.4rem + (1vw - 1.92rem) * 0.4464), 1.4rem); font-weight: 600;
}
}
&:is(.head_btn) a {
position: relative;
display: inline-block;
color: #fff;
background: #1055B1;
padding: 20px var(--px20);
border-radius: 100px;
line-height: 1;
font-weight: 500;
font-size: min(calc(1.6rem + (1vw - 1.92rem) * 0.6696), 1.6rem); &::after {
content: '\f0e0';
font-family: var(--font-awesome);
font-weight: 600;
display: inline-block;
margin-left: 5px;
}
}
&:is(.head_recruit) a {
background: var(--color-primary);
&::after {
content: '\f2c2';
}
}
&:is(.head_mail) {
margin-left: 10px;
}
&:is(.head_recruit) {
margin-left: 5px;
}
&:is(.head_schedule) {
height: 100%;
position: relative;
margin-left: 10px;
&::before {
content: '';
width: 100px;
height: 20px;
background-color: #ac1108;
clip-path: polygon(50% 20px, 0% 0%, 100px 0%);
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
& a {
position: relative;
display: flex;
height: 100%;
background: linear-gradient(180deg, #E8170A, #AC1108);
color: #fff;
text-align: center;
font-size: min(calc(2.4rem + (1vw - 1.92rem) * 1.2277), 2.4rem); line-height: 1.2;
font-weight: 800;
align-items: center;
padding-inline: var(--px20);
&::after {
content: '\f073';
font-family: var(--font-awesome);
display: flex;
width: min(calc(50px + (1vw - 19.2px) * 2.2321), 50px); background: #fff;
color: var(--color-secondary);
justify-content: center;
align-items: center;
border-radius: 50%;
margin-left: 5px;
aspect-ratio: 1 / 1;
}
}
}
}
}
body.sticky-header {
& #header {
& #header-layout {
& .logo {}
& .header__nav-contact {
& nav#mainNav {}
& ul.header__contact {
& li.head_schedule::before {
display: none;
}
}
}
}
}
}
}
@media print,
screen and (max-width: 1023px) {
nav#mainNav ul li a {
color: var(--color-font);
}
}
@media print,
screen and (max-width: 769px) {
body.mobile #header .logo img {
max-height: 35px;
}
nav#mainNav ul li {
a {
display: block;
position: relative;
}
a[href]::after {
content: "\f061";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
right: 5%;
color: var(--color-primary);
}
}
} body:not(.home) {
background: linear-gradient(90deg, #0166e6, #0c50a7);
}
header#h1Header {
background: transparent;
height: auto;
z-index: 0;
overflow: visible;
&::before {
background: rgba(255, 255, 255, 0.1);
clip-path: polygon(0 0, 100% 0, 0 100%);
width: 45%;
height: 30vh;
position: absolute;
left: 0;
top: 0;
z-index: 0;
opacity: 1;
}
}
header#h1Header h1.title {
position: relative;
padding-block: var(--px80) calc(7rem + (1vw - 1.92rem) * 2.5890);
padding-inline: 5%;
transform: none;
color: #fff;
font-size: var(--rem36);
font-weight: 500;
font-family: var(--font-family02);
letter-spacing: 0.02em;
&::before {
content: "";
position: absolute;
bottom: 0px;
width: min(1500px, 90%);
height: 1px;
left: 50%;
transform: translateX(-50%);
max-width: 1500px;
background: rgb(204, 204, 204);
}
}
#breadcrumb ul li, #breadcrumb ul li a {
color: #fff;
} #footers {
background: var(--footer-background);
& .inners {
max-width: 1460px;
width: min(1460px, 90%);
margin-inline: auto;
padding-block: var(--px100) var(--px140);
display: flex;
align-items: center;
& .foot_logo a img {
max-height: min(calc(50px + (1vw - 19.2px) * 2.2321), 50px); }
& .footnav ul {
display: flex;
gap: 20px;
margin-left: 30px;
& li a {
position: relative;
font-size: var(--rem14);
font-weight: 500;
&:hover {
text-decoration: underline;
}
&::before {
content: '\f0da';
font-family: var(--font-awesome);
font-weight: 600;
color: var(--color-primary);
padding-right: 5px;
display: inline-block;
}
}
}
& #copyright {
margin-block: 0;
margin-inline: auto 0;
font-size: var(--rem12);
font-weight: 500;
}
}
}
@media print,
screen and (max-width: 769px) {
#footers .inners {
flex-direction: column;
& .foot_logo a img {
max-height: 28px;
}
& .footnav ul {
flex-direction: column;
gap: 5px;
margin-inline: 0;
margin-block: 10px;
}
& #copyright {
margin-inline: auto;
}
}
} #MESY_FTMFM_footer_bar-wrapper ul#MESY_FTMFM_footer_bar li {
background-color: var(--color-primary-shade);
}
#MESY_FTMFM_footer_bar-wrapper ul#MESY_FTMFM_footer_bar li.sptab_recruit {
background-color: var(--color-primary);
}
#MESY_FTMFM_footer_bar-wrapper ul#MESY_FTMFM_footer_bar li.sptab_sokutei {
background-color: var(--color-secondary);
}  ul.detailsmenulist {
display: flex;
gap: var(--px14);
& li a {
font-size: min(calc(1.7rem + (1vw - 1.92rem) * 0.4464), 1.7rem);
font-weight: 600;
position: relative;
transition: all ease 0.6s;
&:hover {
text-decoration: underline;
}
&::before {
content: '\f138';
color: var(--color-primary);
font-family: var(--font-awesome);
margin-right: 4px;
display: inline-block;
}
}
}
@media print,
screen and (max-width: 769px) {
ul.detailsmenulist {
flex-direction: column;
gap: 10px;
& li {
line-height: 1;
& a {
font-size: 1.4rem;
}
}
}
}
.warpsec {
overflow: hidden;
}
.warpsec .warpinner {
min-height: 200px;
border-top-right-radius: 3000px 200px;
border-top-left-radius: 3000px 200px;
margin-left: -200px;
margin-right: -200px;
padding-left: 200px;
padding-right: 200px;
background: var(--color-background);
} .top_loopslide {
background: #0160E2;
padding-bottom: 90px;
& li a {
position: relative;
display: inline-block;
font-size: 1.7rem;
font-weight: 600;
&::before {
content: '\f138';
font-family: var(--font-awesome);
color: var(--color-primary);
margin-right: 3px;
}
}
}
.n2-ss-showcase-slides .n2-ss-slide {
border-radius: 20px !important;
}
@media print,
screen and (max-width: 769px) {
.top_loopslide {
background: #51aefb;
padding-top: 20px;
}
} .top_newswrap {
margin-top: -50px;
position: relative;
z-index: 10;
}
.top_newswrap .inners {
max-width: 1100px;
width: min(1100px, 90%);
margin-inline: auto;
padding-top: var(--px80);
margin-bottom: var(--px120);
} .top_aboutwrap {
position: relative;
}
.topaboutimage {
& figure {
position: absolute;
border-radius: 100%;
overflow: hidden;
aspect-ratio: 1 / 1;
}
& figure.abtsimg {
border-radius: 0;
aspect-ratio: auto;
}
&:is(.leftside) {
& figure.abtsimg {
top: calc(-12rem + (1vw - 1.92rem) * -18.9732);
left: 0;
width: min(calc(100px + (1vw - 19.2px) * 7.8125), 100px); }
& figure.img01 {
top: calc(-8rem + (1vw - 1.92rem) * -2.2321);
left: calc(29rem + (1vw - 1.92rem) * 20.0893);
width: min(calc(260px + (1vw - 19.2px) * 14.5089), 260px); }
& figure.img02 {
top: calc(17rem + (1vw - 1.92rem) * 11.1607);
left: calc(12.5rem + (1vw - 1.92rem) * 7.2545);
width: min(calc(200px + (1vw - 19.2px) * 11.1607), 200px); }
& figure.img03 {
top: -10px;
left: calc(12rem + (1vw - 1.92rem) * 11.1607);
width: min(calc(140px + (1vw - 19.2px) * 6.6964), 140px); }
}
&:is(.rightside) {
& figure.abtsimg {
top: calc(-12rem + (1vw - 1.92rem) * -18.9732);
right: 0;
width: min(calc(100px + (1vw - 19.2px) * 7.8125), 100px); }
& figure.img01 {
top: calc(-8rem + (1vw - 1.92rem) * -2.2321);
right: calc(29rem + (1vw - 1.92rem) * 20.0893);
width: min(calc(260px + (1vw - 19.2px) * 14.5089), 260px); }
& figure.img02 {
top: calc(17rem + (1vw - 1.92rem) * 11.1607);
right: calc(12.5rem + (1vw - 1.92rem) * 7.2545);
width: min(calc(200px + (1vw - 19.2px) * 11.1607), 200px); }
& figure.img03 {
top: -10px;
right: calc(12rem + (1vw - 1.92rem) * 11.1607);
width: min(calc(140px + (1vw - 19.2px) * 6.6964), 140px); }
}
}
.top_aboutwrap .inners {
max-width: 1200px;
margin-inline: auto;
width: min(1200px, 90%);
padding-bottom: var(--px120);
& p.ttlscopy {
text-align: center;
font-family: var(--font-family02);
font-size: var(--rem20);
font-weight: 600;
}
}
.top_servlistwrap {
margin-top: var(--px80);
display: flex;
justify-content: space-between;
& .top_servlistbox {
width: 50%;
padding-inline: 5%;
padding-block: var(--px60);
background: var(--color-primary-shade);
border-radius: 30px 0 0 30px;
& h3 {
color: #fff;
text-align: center;
font-family: var(--font-family04);
font-weight: normal;
display: flex;
flex-direction: column;
line-height: 1.5;
border: none;
padding: 0;
margin: 0 0 var(--px30) 0;
font-size: var(--rem36);
background: transparent;
&::before {
display: none;
}
& span.en_ttls {
font-family: var(--font-family05);
font-size: var(--rem20);
}
}
& ul {
border-top: 1px solid #fff;
& li {
border-bottom: 1px solid #fff;
padding-block: 10px;
& span {
color: #fff;
position: relative;
display: block;
font-family: var(--font-family02);
font-size: var(--rem24);
font-weight: 500;
line-height: 1.7;
}
&:has(a) span::before {
content: '\f0ab';
display: inline-block;
font-family: var(--font-awesome);
font-weight: 600;
margin-right: 5px;
}
&:has(a) span:hover {
text-decoration: underline;
}
}
}
&.top_serv_b {
border-radius: 0 30px 30px 0;
background: url(//www.unisol-fan.jp/wp-content/uploads/topabout_forbus_bgbig.jpg) no-repeat;
background-size: cover;
& h3,
ul,
li,
span {
color: var(--color-primary-shade);
border-color: var(--color-primary-shade);
}
}
}
}
@media print,
screen and (max-width: 769px) {
.topaboutimage {
&:is(.leftside) {
& figure.abtsimg {
display: none;
}
& figure.img01 {
width: 22%;
left: 9%;
top: -45px;
}
& figure.img02 {
width: 15%;
left: 2%;
top: 5px;
}
& figure.img03 {
display: none;
}
}
&:is(.rightside) {
& figure.abtsimg {
display: none;
}
& figure.img01 {
width: 22%;
right: 9%;
top: -45px;
}
& figure.img02 {
width: 15%;
right: 2%;
top: 5px;
}
& figure.img03 {
display: none;
}
}
}
.top_servlistwrap {
flex-direction: column;
align-items: center;
margin-top: 20px;
filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.15));
& .top_servlistbox {
width: 100%;
border-radius: 20px 20px 0 0;
&.top_serv_b {
border-radius: 0 0 20px 20px;
}
}
}
} .top_customerservice {
margin-top: -40px;
}
.top_service_wrap .warpinner {
background: linear-gradient(0deg, #1B53C0, #1790FF, #1B53C0);
position: relative;
overflow: hidden;
&>.inners {
position: relative;
padding-top: var(--px140);
padding-bottom: var(--px200);
}
&::before {
content: '';
position: absolute;
display: inline-block;
background: url(//www.unisol-fan.jp/wp-content/uploads/top_servbg01.png) no-repeat;
top: 0;
width: 100vw;
aspect-ratio: 384 / 329;
background-size: contain;
z-index: 0;
}
&::after {
content: '';
position: absolute;
display: inline-block;
background: url(//www.unisol-fan.jp/wp-content/uploads/top_servbg03.png) no-repeat;
bottom: 0;
width: 100vw;
aspect-ratio: 96 / 59;
background-size: contain;
z-index: 0;
}
}
ul.top_service_aboutlist {
position: relative;
z-index: 5;
&>li {
position: relative;
& .txtarea {
position: absolute;
width: min(calc(700px + (1vw - 19.2px) * 22.3214), 700px); background: #fff;
padding-block: var(--px100);
padding-inline: var(--px80);
left: min(calc(23rem + (1vw - 1.92rem) * 22.3214), 23rem); bottom: -30px;
border-radius: 30px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
z-index: 10;
& h3 {
margin: 0 0 var(--px24) 0;
padding: 0 0 0 calc(var(--px100) + 10px);
border: none;
font-family: var(--font-family04);
font-weight: normal;
font-size: min(calc(3.6rem + (1vw - 1.92rem) * 1.2277), 3.6rem); line-height: 1.4;
position: relative;
background: transparent;
color: var(--color-font);
&::before {
content: '';
background: url(//www.unisol-fan.jp/wp-content/uploads/blueicon_insole.png) no-repeat center / contain;
width: var(--px100);
aspect-ratio: 1 / 1;
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(calc(-50% - 5px));
left: 0;
height: 100%;
margin-right: 0;
}
& span {
font-size: min(calc(1.8rem + (1vw - 1.92rem) * 0.3348), 1.8rem); display: block;
letter-spacing: 0;
}
}
& p.txts {
font-size: min(calc(1.7rem + (1vw - 1.92rem) * 0.5580), 1.7rem); font-feature-settings: 'palt';
letter-spacing: 0.02em;
margin-bottom: calc(1.8rem + (1vw - 1.92rem) * 1.4509);
}
& ul.servabout_links {
display: flex;
gap: 0 10px;
flex-wrap: wrap;
& li a {
line-height: 1;
font-size: min(calc(1.7rem + (1vw - 1.92rem) * 0.5580), 1.7rem); font-weight: 700;
position: relative;
display: inline-block;
&::before {
content: '\f138';
display: inline-block;
font-family: var(--font-awesome);
color: var(--color-primary);
margin-right: 4px;
}
&:hover {
text-decoration: underline;
}
}
}
& .sokuteikai_box {
margin-top: var(--px30);
& a {
display: flex;
gap: 20px;
align-items: center;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding-block: var(--px20);
padding-inline: var(--px12);
position: relative;
&::after {
content: '\f054';
display: inline-block;
font-family: var(--font-awesome);
font-weight: 600;
color: var(--color-primary);
position: absolute;
right: var(--px12);
font-size: var(--px20);
}
& figure {
width: min(calc(90px + (1vw - 19.2px) * 4.4643), 90px); aspect-ratio: 1 / 1;
}
& p.sokuteitxts {
font-size: calc(calc(1.6rem + (1vw - 1.92rem) * 0.4464), 1.6rem); font-weight: 800;
line-height: 1.5;
& span {
font-size: min(calc(1.6rem + (1vw - 1.92rem) * 0.4464), 1.6rem); display: block;
font-weight: 500;
}
}
}
}
}
&>figure {
width: 58vw;
margin-left: auto;
z-index: 5;
position: relative;
& img {
border-radius: 30px 0 0 30px;
}
}
&+li {
margin-top: var(--px100);
}
}
& li.reverse {
& .txtarea {
left: auto;
right: min(calc(23rem + (1vw - 1.92rem) * 22.3214), 23rem);
}
& figure {
margin-left: 0;
& img {
border-radius: 0 30px 30px 0;
}
}
}
& li.wigg {
&::before {
content: '';
position: absolute;
display: inline-block;
background: url(//www.unisol-fan.jp/wp-content/uploads/top_servbg02.png) no-repeat;
width: 100vw;
aspect-ratio: 16 / 13;
right: 0;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
& .txtarea h3::before {
background-image: url(//www.unisol-fan.jp/wp-content/uploads/blueicon_wigg.png);
}
}
& li.shop {
& .txtarea h3::before {
background-image: url(//www.unisol-fan.jp/wp-content/uploads/blueicon_store.png);
}
}
& li.medical {
& .txtarea h3::before {
background-image: url(//www.unisol-fan.jp/wp-content/uploads/blueicon_medical.png);
}
}
& li.rentroom {
& .txtarea h3::before {
background-image: url(//www.unisol-fan.jp/wp-content/uploads/blueicon_lentroom.png);
}
}
}
.top_busservice {
margin-top: -40px;
& .warpinner {
background: #fff;
&::before {
background-image: url(//www.unisol-fan.jp/wp-content/uploads/top_servbg_bus01.png);
aspect-ratio: 24 / 17;
}
&::after {
background-image: url(//www.unisol-fan.jp/wp-content/uploads/top_servbg_bus02.png);
aspect-ratio: 64 / 37;
}
}
}
@media print,
screen and (max-width: 769px) {
.top_service_wrap .warpinner {
&::before {
content: none;
}
&::after {
content: none;
}
}
ul.top_service_aboutlist {
&>li {
&+li {
margin-top: 20px;
}
& .txtarea {
position: static;
width: 90%;
margin-inline: auto;
border-radius: 20px 20px 0 0;
padding-inline: 5%;
padding-block: 30px;
& h3::before {
transform: translateY(-50%);
}
& p.txts {
font-size: 1.2rem;
margin-bottom: 5px;
}
& ul.servabout_links {
& li a {
font-size: 1.2rem;
}
}
& .sokuteikai_box {
& a {
gap: 10px;
& figure {
width: 20%;
margin-inline: 0;
}
& p.sokuteitxts {
font-size: 1.4rem;
& span {
font-size: 1rem;
}
}
}
}
}
&>figure {
width: 90%;
margin-inline: auto;
& img {
border-radius: 0 0 20px 20px;
}
}
}
& li.reverse {
& figure {
margin-inline: auto;
& img {
border-radius: 0 0 20px 20px;
}
}
}
& li.wigg {
&::before {
content: none;
}
}
}
.top_busservice {
& .warpinner {
background: #F0F0F0;
}
}
} .top_recruit_wrap {
margin-top: -40px;
position: relative;
& .warpinner {
background: linear-gradient(180deg, #1B53C0, #1790FF);
}
& .inners {
display: flex;
justify-content: space-between;
align-items: center;
padding-block: var(--px160);
& .txtarea {
margin-left: var(--top-padding);
& h2 {
text-align: left;
margin-bottom: var(--px40);
& .en_ttls {}
}
& p.leadtxts {
font-family: var(--font-family02);
font-size: var(--rem40);
font-weight: 500;
line-height: 1.5;
margin-bottom: var(--px24);
color: #fff;
}
& p.txts {
font-size: min(calc(1.6rem + (1vw - 1.92rem) * 0.3348), 1.6rem);
margin-bottom: var(--px50);
line-height: 2.5;
font-feature-settings: 'palt';
letter-spacing: 0.05rem;
color: #fff;
}
}
& .imgarea {
position: relative;
flex-grow: 1;
& p.img01 {
position: absolute;
right: min(calc(58rem + (1vw - 1.92rem) * 29.0179), 58rem);
top: 80px;
width: min(calc(350px + (1vw - 19.2px) * 22.3214), 350px); aspect-ratio: 1;
& img {
border-radius: 20px;
width: 100%;
}
}
& p.img02 {
position: absolute;
right: min(calc(40rem + (1vw - 1.92rem) * 18.9732), 40rem);
top: min(calc(29rem + (1vw - 1.92rem) * 10.0446), 29rem);
width: min(calc(350px + (1vw - 19.2px) * 16.7411), 350px); aspect-ratio: 1;
& img {
border-radius: 20px;
width: 100%;
}
}
& p.img03 {
width: min(calc(530px + (1vw - 1.92rem) * 25.6696), 530px); margin-left: auto;
& img {
border-radius: 20px 0 0 20px;
width: 100%;
}
}
}
}
}
@media print,
screen and (max-width: 769px) {
.top_recruit_wrap {
& .inners {
flex-direction: column;
text-align: center;
padding-block: 40px;
& .txtarea {
margin-inline: auto;
width: 90%;
& h2 {
text-align: center;
}
& p.txts {
text-align: left;
margin-bottom: 20px;
}
}
& .imgarea {
width: 90%;
margin-inline: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 30px;
& p.img01,
& p.img02 {
position: static;
width: 100%;
}
& p.img03 {
margin-left: 0;
width: 100%;
aspect-ratio: 1;
overflow: hidden;
& img {
width: 100%;
border-radius: 20px;
object-fit: cover;
height: 100%;
}
}
}
}
}
}  .page_contents_inner .inners {
padding-inline: var(--px20);
}
dl.page_contentsdetailbox {
background: #f5f5f5;
padding: var(--px30);
dd {
font-size: var(--rem14);
line-height: 1.5;
}
}
.lpagetopcopy {
text-align: center;
font-size: var(--rem30);
font-family: var(--font-family02);
font-weight: 600;
line-height: 1.8;
margin-bottom: var(--px30);
}
.pagefront_section p.leadcopys {
font-size: var(--rem30);
margin-bottom: var(--px14);
}
.lpage_commonctawrap {
background: #e8fafe;
text-align: center;
padding-block: var(--px60);
width: 90%;
margin-inline: auto;
border-radius: 20px;
& p.leadttl {
font-size: var(--rem28);
font-weight: 800;
position: relative;
margin-bottom: var(--px20);
padding-bottom: var(--px12);
line-height: 1.7;
&::before {
content: '';
position: absolute;
width: 120px;
height: 2px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: var(--color-primary);
}
}
& .link_btn {
width: 40%;
margin-top: var(--px20);
}
}
.fw_contents .page_contents_inner:nth-child(even) {
background: var(--color-background);
}
.lpage_fixbg {
margin-right: calc(((100vw - 100%) / 2) * -1);
margin-left: calc(((100vw - 100%) / 2) * -1);
padding: min(calc(120px + (1vw - 19.2px) * 2.5890), 120px) calc((100vw - 100%) / 2) min(calc(150px + (1vw - 19.2px) * 3.2362), 150px);
margin-top: min(calc(120px + (1vw - 19.2px) * 2.5890), 120px);
position: relative;
.parallax_inner {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
clip-path: inset(0);
z-index: -1;
.parallax {
position: fixed;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100vw;
height: 100vh;
background: #fefefe;
}
}
.lpfixbg_contbox {
&+.lpfixbg_contbox {
margin-top: var(--px50);
}
.inners {
background: #fff;
padding-block: var(--px50);
padding-inline: var(--px30);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
}
}
@media print,
screen and (max-width: 768px) {
.lpage_commonctawrap {
width: 100%;
padding-inline: 5%;
& .link_btn {
width: 100%;
}
}
.page_contents_inner .inners {
padding-inline: 0;
}
} .anchor {
display: flex;
align-items: flex-start;
justify-content: center;
gap: var(--px18);
margin-bottom: var(--px80);
flex-wrap: wrap;
flex-direction: column;
li {
border-bottom: 1px dashed #fff;
width: 100%;
padding-bottom: var(--px18);
a.anchor_link {
font-size: var(--rem18);
color: #fff;
font-weight: 400;
display: block;
transition: all .3s;
line-height: 1;
font-family: var(--font-family03);
&::before {
content: "\f0ab";
display: inline-block;
font-family: 'Font Awesome 5 Free';
margin-right: 10px;
font-weight: 600;
font-size: 80%;
}
&:hover {
text-decoration: underline;
}
}
}
} h2 {
&.ttl--secondary {
font-size: var(--rem28);
margin: 0 auto var(--px40);
text-align: left;
border: 1px solid #ccc;
border-left: 5px solid var(--color-primary);
padding: var(--px30) var(--px24);
line-height: 1;
font-weight: 800;
background: #fff;
&::after {
display: none;
}
}
} .post p.txt20 {
font-size: var(--rem20);
}
.post p.txt24 {
font-size: var(--rem24w);
}
.post .read p {
font-size: var(--rem16);
margin-bottom: 1em;
} .post dl.flex_list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.post dl.flex_list dt {
width: 40%;
font-weight: 400;
color: var(--color-gray);
font-size: var(--rem28);
letter-spacing: .3rem;
padding: 0 0 var(--px40) 0;
margin: var(--px40) 0 0 0;
border-bottom: 1px solid var(--color-table-border);
}
.post dl.flex_list dd {
width: 60%;
padding: 0 0 var(--px40) 0;
margin: var(--px40) 0 0 0;
border-bottom: 1px solid var(--color-table-border);
}
@media print,
screen and (max-width: 768px) {
.post dl.flex_list dt,
.post dl.flex_list dd {
width: 100%;
}
.post dl.flex_list dt {
border: none;
padding-bottom: var(--px30);
}
.post dl.flex_list dd {
padding-top: 0;
margin: 0;
}
} .post dl.privacy_list dt {
margin-bottom: .2em;
}
.post dl.privacy_list dd {
margin-bottom: 1em;
} #page_sitemap {
& .inners {
max-width: 1460px;
width: min(1460px, 90%);
margin-inline: auto;
& h2.ttls {
font-size: var(--rem20);
font-weight: 600;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
position: relative;
line-height: 1;
margin: 0 0 var(--px20) 0;
text-align: left;
padding: 0 0 var(--px18) 15px;
color: #fff;
&::before {
content: '';
display: inline-block;
background: #fff;
width: 5px;
height: 20px;
position: absolute;
left: 0;
}
&::after {
content: none;
}
}
}
}
ul.foot_servicelist_wrap {
display: grid;
gap: var(--px24);
grid-template-columns: 1fr 1fr 2fr;
&>li {
background: #fff;
padding: var(--px30) var(--px24);
& h3.ttls {
font-size: 1.7rem;
font-weight: 600;
border-left: 5px solid var(--color-primary);
border-bottom: none;
line-height: 1;
background: transparent;
color: var(--color-font);
padding: 0 0 0 5px;
margin: 0 0 var(--px20) 0;
& a:hover {
text-decoration: underline;
}
}
& figure {
margin-bottom: 10px;
& img {
width: 100%;
height: 100px;
object-fit: cover;
}
}
}
}
ul.foot_servicelist {
& li {
line-height: 1;
border-bottom: 1px solid #ccc;
padding-bottom: 8px;
padding-left: 2px;
position: relative;
font-size: var(--rem14);
font-weight: 500;
&:hover {
text-decoration: underline;
color: #fff;
}
&+li {
margin-top: 8px;
}
&::before {
content: '\f0da';
font-family: var(--font-awesome);
font-weight: 600;
color: var(--color-primary);
display: inline-block;
margin-right: 4px;
}
}
}
ul.foot_servicelist_sub {
background: #f5f5f5;
margin-top: var(--px14);
padding: 10px;
& li {
font-size: 1.2rem;
position: relative;
&:hover {
text-decoration: underline;
}
&+li {
margin-top: 2px;
padding-top: 2px;
border-top: 1px #ccc dashed;
}
&::before {
content: '\f0da';
font-family: var(--font-awesome);
font-weight: 600;
color: var(--color-primary);
margin-right: 4px;
display: inline-block;
}
}
}
.foot_servicelist_col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--px18);
}
.foot_service_lowerwrap {
margin-top: var(--px40);
display: grid;
grid-template-columns: 1fr 1fr;
& .foot_service_lowerbox {
&:last-of-type {
margin-left: var(--px24);
}
& ul.foot_servicelist_wrap {
grid-template-columns: 1fr 1fr;
}
& ul.foot_servicelist li {
&+li {
margin-top: 0;
}
}
& ul.foot_servicelist.others {
& li {
border: none;
&::before {
color: #fff;
}
& a {
color: #fff;
}
}
}
}
}
@media print,
screen and (max-width: 769px) {
ul.foot_servicelist_wrap {
grid-template-columns: 1fr;
}
.foot_servicelist_col {
grid-template-columns: 1fr;
}
.foot_service_lowerwrap {
grid-template-columns: 1fr;
& .foot_service_lowerbox {
&:last-of-type {
margin-top: 20px;
margin-left: 0;
}
& ul.foot_servicelist_wrap {
grid-template-columns: 1fr;
}
}
}
} .post .subimitarea .linkBtn {
padding: 0;
border-radius: 100px;
}
.page-contact .wpcf7 {
background: #fff;
padding: var(--px40);
} ul.lpagerecruit_list li+li {
margin-top: var(--px30);
}
#lpage_recruit02 {
background: #fff;
padding: var(--px40);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
.anchorlist {
display: flex;
margin-bottom: var(--px50);
justify-content: center;
gap: var(--px30);
a {
position: relative;
display: inline-block;
font-size: var(--rem18);
font-weight: 600;
align-items: center;
&::before {
content: '\f13a';
font-family: var(--font-awesome);
margin-right: 5px;
transform: translateY(1px);
color: var(--color-primary-shade);
display: inline-block;
}
&:hover {
text-decoration: underline;
}
}
}
}
#lpage_recruit03 {
background: #fff;
text-align: center;
padding-block: var(--px50);
margin-top: var(--px30);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
padding-inline: 5%;
& .lpage_rec_entrywrap {
& p.leadttl {
font-size: var(--rem30);
font-weight: 800;
display: inline-block;
position: relative;
margin-bottom: var(--px12);
padding-bottom: var(--px12);
line-height: 1.5;
&::before {
content: '';
position: absolute;
background: var(--color-primary);
height: 2px;
width: 120px;
bottom: 0;
left: 50%;
display: inline-block;
transform: translateX(-50%);
}
}
& .link_btn {
width: 100%;
margin-block: 20px 10px;
max-width: 560px;
& a {
padding-block: var(--px24);
}
}
p.txts {
font-size: var(--rem14);
font-weight: 500;
}
}
& .lpage_rec_mybestjob {
background: var(--color-background);
width: 80%;
margin-inline: auto;
padding-block: var(--px30);
margin-top: var(--px40);
border: 2px solid var(--color-primary);
& p.leadttl {
font-size: var(--rem18);
font-weight: 700;
margin-bottom: var(--px20);
line-height: 1;
}
}
}  .sec01 {
background: #f1f1f1;
}
.toptxtarea {
max-width: 960px;
width: 94%;
margin: 0 auto;
position: relative;
z-index: 1;
}
.column01 {
position: relative;
margin: var(--px60) 0 0;
}
.column01_wrap {
position: relative;
max-width: 1600px;
width: 94%;
margin: 0 auto;
z-index: 1;
}
.column01 .txtarea {
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: var(--px80) var(--px40);
margin: 0;
}
.column01 .txtarea .txtinner {
max-width: 540px;
}
.column01 .imgarea {
overflow: hidden;
line-height: 0;
margin: 0;
}
.column01 .imgarea img {
width: 100%;
height: 100%;
object-fit: cover;
} .post .txtstyle02,
.txtstyle02 {
font-family: var(--font-family01);
font-size: var(--rem20);
font-weight: 600;
text-align: left;
margin: var(--rem20) auto 10px;
background: transparent;
color: #111;
line-height: 1.4;
padding: 0;
}
.post .txtstyle02:before,
.post .txtstyle02:after,
.txtstyle02:before,
.txtstyle02:after {
content: none;
}
.post .column01 .txtstyle02,
.column01 .txtstyle02 {
font-size: var(--rem20);
margin: var(--rem20) 0;
}
.post .txtstyle04,
.txtstyle04 {
font-family: var(--font-family02);
font-size: var(--rem36);
font-weight: 600;
text-align: left;
margin: var(--rem36) auto;
background: transparent;
border: none;
color: #111;
line-height: 1.4;
padding: 0;
}
.post .txtstyle04:before,
.txtstyle04:before {
content: none;
}
.post .column01 .txtstyle04,
.column01 .txtstyle04 {
font-size: var(--rem36);
}
.post .column01 .txtstyle04:after,
.column01 .txtstyle04:after {
content: '';
position: relative;
visibility: visible;
display: block;
width: var(--px80);
height: 3px;
background: #111;
margin: var(--rem30) 0 0 0.5rem;
}
ul.top_servicelist_wrap.lpage {
& h3.ttl {
border: none;
padding: 0 0 var(--px14) 0;
margin: 0 0 var(--px20) 0;
line-height: 1.3;
&::before {
content: '';
position: absolute;
background: var(--color-primary);
width: 100px;
height: 2px;
bottom: 0;
left: 0;
}
& span.sub_ttls {
display: block;
font-size: var(--rem18);
}
& span.main_ttls {
font-size: var(--rem36);
font-weight: 800;
}
}
} ul.flowlist02 {
counter-reset: flow_list;
}
ul.flowlist02>li,
.lpage_tocus01 ul.flowlist02>li .flowlist_top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row-reverse;
gap: min(calc(40px + (1vw - 19.2px) * 1.6181), 40px);
width: 100%;
padding: var(--px30);
border-radius: 10px;
background: #f2f2f2;
position: relative;
}
.flowlist02>li:not(:last-child) {
margin-bottom: 60px;
}
.flowlist02 .flow_img,
.lpage_tocus01 ul.flowlist02>li .flowlist_top .flow_img {
width: 35%;
}
.post .flowlist02>li>dl,
.lpage_tocus01 ul.flowlist02>li .flowlist_top>dl {
width: calc(65% - min(calc(40px + (1vw - 19.2px) * 1.6181), 40px));
line-height: 1.8;
}
.flowlist02>li:not(:last-child) dl::before,
.flowlist02>li:not(:last-child) dl::after {
content: "";
border: solid transparent;
position: absolute;
top: calc(100% + 20px);
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.flowlist02>li:not(:last-child) dl::before {
border-width: 22px;
border-top-color: var(--color-primary-shade);
}
.flowlist02>li:not(:last-child) dl::after {
border-width: 20px;
}
.post .flowlist02>li>dl dt,
.lpage_tocus01 ul.flowlist02>li .flowlist_top>dl dt {
position: relative;
display: flex;
align-items: center;
font-size: min(calc(2.4rem + (1vw - 19.2px) * 0.4531), 2.4rem); font-weight: 600;
padding: 0 0 1rem 0;
margin-bottom: var(--px18);
border-bottom: dotted 1px;
}
.flowlist02>li dl dt .icon:before,
.lpage_tocus01 ul.flowlist02>li .flowlist_top>dl dt .icon:before {
content: counter(flow_list, decimal-leading-zero);
counter-increment: flow_list;
line-height: 1;
color: #fff;
background: var(--color-primary-shade);
padding: 5px 10px;
margin-right: 10px;
position: relative;
z-index: 100;
}
.post .flowlist02>li>dl dd,
.lpage_tocus01 ul.flowlist02>li .flowlist_top>dl dd {
padding: 0;
}
.lpage_tocus01 ul.flowlist02 dl dd .link_txts a {
position: relative;
color: var(--color-primary-shade);
font-weight: 700;
&::before {
content: '\f0ab';
display: inline-block;
font-family: var(--font-awesome);
font-size: 80%;
margin-right: 3px;
}
&:hover {
text-decoration: underline;
}
}
@media print,
screen and (max-width: 768px) {
.post .flowlist02>li>dl,
.flowlist02 .flow_img,
.lpage_tocus01 ul.flowlist02>li .flowlist_top>dl,
.lpage_tocus01 ul.flowlist02>li .flowlist_top .flow_img {
width: 100%;
}
.flow_img::before {
padding-top: calc(360px + (1vw - 7.68px) * 35.6234);
}
} .post .col2_list {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
flex-wrap: wrap;
}
.post .col2_list>li {
width: 49%;
margin-bottom: 2%;
}
@media print,
screen and (max-width: 414px) {
.post .col2_list>li {
width: 100%;
}
.post .col2_list>li:last-child {
margin-bottom: 0;
}
} .post .col3_list {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
flex-wrap: wrap;
}
.post .col3_list>li {
width: 32%;
margin-bottom: 20px;
& p.txts {
font-size: min(calc(1.5rem + (1vw - 1.92rem) * 0.1294), 1.5rem);
}
}
.post .col3_list::before {
content: "";
display: block;
width: 32%;
height: 0;
order: 1;
}
.post .col3_list:after {
content: "";
display: block;
width: 32%;
height: 0;
}
@media print,
screen and (max-width: 768px) {
.post .col3_list>li {
width: 49%;
}
.post .col3_list::before,
.post .col3_list:after {
content: none;
}
}
@media print,
screen and (max-width: 414px) {
.post .col3_list>li {
width: 100%;
}
.post .col3_list>li:last-child {
margin-bottom: 0;
}
}
.lpage_serv01 {
.aboutBox {
p.leadcopy {
font-family: var(--font-family02);
font-weight: 500;
font-size: var(--rem30);
line-height: 1.4;
position: relative;
margin-bottom: var(--px40);
padding-bottom: var(--px40);
display: inline-block;
span {
display: block;
font-size: var(--rem40);
}
&::before {
content: '';
position: absolute;
background: #ccc;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 150px;
display: inline-block;
height: 1px;
}
}
p.productname {
font-family: var(--font-family04);
font-size: var(--rem36);
line-height: 1.5;
span {
font-size: var(--rem18);
display: block;
}
}
}
ul.pageserv_point_list {
display: flex;
flex-direction: column;
gap: 20px;
&>li {
background: #fff;
border-radius: 20px;
padding: var(--px30);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
figure img {
border-radius: 10px;
}
.txtarea {
p.point {
font-family: var(--font-family04);
font-size: var(--rem20);
color: var(--color-primary);
}
p.ttls {
font-family: var(--font-family04);
font-size: var(--rem28);
color: var(--color-primary);
line-height: 1.5;
}
p.txts {
margin-top: var(--px14);
font-size: var(--rem16);
}
}
}
}
}
.lpage_serv03 {
ul.lpage_material_list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--px40);
li {
h3 {
background: transparent;
color: var(--color-font);
padding: 0;
margin: var(--px24) 0 10px;
font-size: var(--rem28);
font-weight: 500;
font-family: var(--font-family04);
&::before {
content: none;
}
}
p.txts {
font-size: var(--rem16);
}
}
}
}
.lpage_serv04 {
&>p.leadcopy {
font-size: var(--rem30);
font-family: var(--font-family04);
color: #fff;
line-height: 1.3;
}
ul.lpageserv_hosho_list {
display: flex;
flex-direction: column;
gap: var(--px30);
margin-block: var(--px30) var(--px50);
li {
color: #fff;
h3 {
margin-bottom: 10px;
&::before {
content: none;
}
}
p.txts {
font-size: var(--rem16);
line-height: 1.8;
font-weight: 300;
}
dl {
margin-top: 10px;
border: 1px solid #fff;
padding: var(--px20);
dd {
padding: 0;
font-size: var(--rem14);
font-weight: 300;
line-height: 1.7;
}
}
}
}
.lpageserv_4tokuten {
margin-top: var(--px30);
background: var(--color-background);
border-radius: 20px;
text-align: center;
padding: var(--px50);
p.leadcopy {
color: var(--color-font);
font-size: var(--rem24);
font-weight: 600;
font-family: var(--font-family02);
line-height: 1.6;
span {
color: var(--color-primary-shade);
}
}
ul {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px 10px;
li {
background: #fff;
border: 2px solid var(--color-primary-shade);
border-radius: 20px;
position: relative;
padding: var(--px30) 8%;
p.nums {
display: inline-block;
position: absolute;
background: var(--color-primary-shade);
color: #fff;
padding-inline: 10px;
line-height: 1;
padding-block: 8px;
font-size: var(--rem18);
font-family: var(--font-family02);
font-weight: 600;
left: 50%;
transform: translateX(-50%);
top: -20px;
}
p.txts {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
width: 100%;
line-height: 1.5;
font-size: var(--rem18);
font-weight: 700;
span.hosoku {
font-size: var(--rem14);
text-align: left;
font-weight: 600;
line-height: 1.5;
margin-top: 5px;
font-feature-settings: 'palt';
}
}
}
}
}
}
ul.lpage_products_pointlist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--px20);
margin-top: var(--px50);
& li {
background: #f5f5f5;
padding: var(--px24);
border-radius: 20px;
& p.nums {
background: var(--color-primary);
display: flex;
width: 60px;
height: 60px;
justify-content: center;
align-items: center;
border-radius: 100%;
color: #fff;
font-family: var(--font-family03);
font-size: var(--rem30);
margin-inline: auto;
}
& p.ttls {
text-align: center;
margin-block: var(--px12) 8px;
line-height: 1.5;
font-weight: 700;
font-size: var(--rem18);
}
& p.txts {
font-size: var(--rem14);
}
}
}
.lpage_serv05 {
ul.lpageserv_stafflist {
display: flex;
flex-direction: column;
gap: var(--px50);
&>li {
display: flex;
justify-content: space-between;
figure {
width: 27%;
figcaption {
margin-top: var(--px18);
p.name {
font-size: var(--rem24);
line-height: 1.5;
margin-bottom: var(--px12);
span.job {
font-size: var(--rem14);
display: block;
}
}
p.about {
font-size: var(--rem14);
line-height: 1.8;
}
}
}
ul.comentlist {
width: 70%;
display: flex;
flex-direction: column;
gap: var(--px30);
li {
h3 {
margin-bottom: var(--px14);
}
p.txts {
font-size: min(calc(1.5rem + (1vw - 1.92rem) * 0.1942), 1.5rem); font-feature-settings: 'palt';
line-height: 1.9;
}
}
}
}
}
}
.lpage_serv06 {
p.txts {
color: #fff;
font-size: var(--rem14);
font-feature-settings: 'palt';
line-height: 1.9;
}
}
.lpage_serv02 ul.flowlist02 {
&>li {
display: flex;
justify-content: space-between;
gap: 20px;
padding: var(--px60);
background: var(--color-background);
& .flow_img {
display: grid;
overflow: visible;
width: 70%;
grid-template-columns: 1fr 1fr;
gap: 15px;
& iframe {
aspect-ratio: 16 / 9;
object-fit: cover;
width: 100%;
height: 100%;
}
}
&>dl {
width: calc(30% - 20px);
}
}
}
@media print,
screen and (max-width: 768px) {
.lpage_serv02 ul.flowlist02>li {
flex-direction: column;
& .flow_img {
width: 100%;
grid-template-columns: 1fr;
order: 2;
}
&>dl {
width: 100%;
}
}
.lpage_serv03 {
ul.lpage_material_list {
grid-template-columns: 1fr;
}
}
.lpage_serv05 {
ul.lpageserv_stafflist {
&>li {
flex-direction: column;
gap: 20px;
figure {
width: 100%;
figcaption {
p.name {
font-size: 1.6rem;
}
}
}
ul.comentlist {
width: 100%;
}
}
}
}
} #lowpage_tocustomer {
.parallax_inner .parallax {
background: url(//www.unisol-fan.jp/wp-content/uploads/tocustomer_fixbg.jpg) no-repeat right center / cover;
}
}
.lpage_tocus01 ul.flowlist02>li {
background: #fff;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.lpage_tocus01 ul.flowlist02>li .flowlist_top {
padding: 0;
background: transparent;
}
.lpage_tocus03>dl {
background: #f5f5f5;
padding: var(--px20);
margin-top: var(--px30);
}
.lpage_tocus05 .link_btn {
display: block;
width: 60%;
margin-inline: auto;
}  .num_list01 {
counter-reset: number; list-style-type: none !important; }
.num_list01 .imgarea {
position: relative;
margin-bottom: var(--px20);
}
.num_list01 .imgarea:before { position: absolute;
counter-increment: number;
content: "0"counter(number);
display: inline-block;
background: #ffffff;
color: var(--color-font);
font-family: var(--font-family02);
font-weight: 400;
font-size: 20px;
border-radius: 50%;
left: 50%;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
bottom: -25px;
transform: translateX(-50%);
box-shadow: 0 0 8px grey;
}
.num_list01 .num_listttl {
text-align: center;
font-weight: bold;
padding: 25px 0 5px;
position: relative;
font-size: 1.7rem;
line-height: 1.8;
} .post .col4_list {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
flex-wrap: wrap;
}
.post .col4_list>li {
width: 24%;
margin-bottom: 30px;
}
.post .col4_list::before {
content: "";
display: block;
width: 24%;
height: 0;
order: 1;
}
.post .col4_list:after {
content: "";
display: block;
width: 24%;
height: 0;
}
@media print,
screen and (max-width: 768px) {
.post .col4_list>li {
width: 49%;
}
.post .col4_list::before,
.post .col4_list:after {
content: none;
}
}
@media print,
screen and (max-width: 414px) {
.post .col4_list>li {
width: 100%;
}
.post .col4_list>li:last-child {
margin-bottom: 0;
}
}
.measure_entrywrap ul.postlist p.date {
display: none;
}
body.category-event .postlist p.date {
display: none;
}
body.category-event .postlist p.cat-event,
.measure_entrywrap .postlist p.cat-event {
display: none;
}
body.category-event .postlist p.time:nth-of-type(2),
.measure_entrywrap .postlist p.time:nth-of-type(2) {
width: 12%;
min-width: max-content;
background: var(--color-primary-shade);
border: none;
color: #fff;
}
body.single.cat-event p.dateLabel time {
display: none;
}
.lpage_measure03 .inners {
background: #fff;
padding: var(--px40);
} #lowpage_column {
.parallax_inner .parallax {
background: url(//www.unisol-fan.jp/wp-content/uploads/lpagecolumn_fixbg.jpg) no-repeat right center / cover;
}
}
ul.pagevoice_list {
margin-top: var(--px50);
& li {
background: #F6F6F6;
padding: var(--px60);
border-radius: 10px;
& .txtarea {
& p.voice_prof {
font-weight: 700;
font-size: var(--rem18);
line-height: 1.8;
margin-bottom: var(--px20);
}
& p.txts {
background: #fff;
padding: var(--px20);
}
}
&+li {
margin-top: var(--px30);
}
}
} body.page-unicowig, body.page-shoesunico, body.page-refletunico {
&::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url(//www.unisol-fan.jp/wp-content/uploads/lpagewig_fixbg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
pointer-events: none;
}
header#h1Header::before {
display: none;
}
header#h1Header h1.title {
color: var(--color-font);
&::before {
background-color: rgba(0, 0, 0, 0.5);
}
}
#breadcrumb ul li, #breadcrumb ul li a {
color: var(--color-font);
}
}
body.page-shoesunico::before {
background-image: url(//www.unisol-fan.jp/wp-content/uploads/lpageshoes_fixbg.jpg);
}
body.page-refletunico::before {
background-image: url(//www.unisol-fan.jp/wp-content/uploads/lpagewhite_fixbg.jpg);
}
figure.lpshop_aboutarea {
text-align: center;
margin-block: var(--px50);
}
.lpshop_contwrap {
background: #fff;
padding: var(--px60) var(--px50);
}
#content:has(.lpshop_contwrap), body:not(.home) #content:has(.lpshop_contwrap).wide {
padding: 0 0 var(--px100);
}
.lpwig_accesswrap {
text-align: center;
.inners {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--px40);
margin-bottom: var(--px40);
.accessbox {
figure img {
aspect-ratio: 4 / 3;
object-fit: cover;
overflow: hidden;
width: 100%;
}
}
}
}
@media print,
screen and (max-width: 768px) {
figure.lpshop_aboutarea img {
width: 80%;
}
.lpwig_accesswrap .inners {
grid-template-columns: 1fr;
}
} .link_btn.walkinglink {
display: block;
width: 300px;
margin-inline: auto;
@media print,
screen and (max-width: 768px) {
width: 80%;
}
} .lpage_lentroom01 .inners {
background: #fff;
padding: var(--px40);
} #lowpage_medical {
.parallax_inner .parallax {
background: url(//www.unisol-fan.jp/wp-content/uploads/lpagemedical_fixbg.jpg) no-repeat right center / cover;
}
}
.lpagemedical_coreflexarea {
width: 100vw;
margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);
background: #fff;
.inners {
align-items: stretch;
figure {
overflow: hidden;
margin: 0;
display: flex;
img {
object-fit: cover;
height: 100%;
width: 100%;
display: block;
}
}
.txtarea {
background: #fff;
padding: var(--px40);
h2 {
padding: 0;
margin: 0;
border: none;
&::before {
content: none;
}
span.abouttxts {
display: block;
font-size: var(--rem18);
}
span.entxts {
font-size: var(--rem16);
display: block;
font-family: var(--font-family05);
}
}
h3 {
padding: 0;
margin: var(--px24) 0 var(--px14);
background: transparent;
color: var(--color-font);
&::before {
content: none;
}
span {
font-size: 60%;
margin-left: 3px;
}
}
dl {
padding: var(--px20);
}
ol {
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
list-style: none;
font-size: var(--rem14);
p.ttls {
font-weight: 700;
line-height: 1.3;
}
p.txts {
line-height: 1.6;
}
}
}
}
}
} .lpage_comp01 {
.txtarea {
.leadcopys {
font-size: var(--rem28);
font-weight: 500;
line-height: 1.5;
margin-bottom: var(--px14);
}
.txts {
p {
font-size: min(calc(1.6rem + (1vw - 1.92rem) * 0.2589), 1.6rem); font-feature-settings: 'palt';
&+p {
margin-top: 10px;
}
}
}
p.names {
text-align: right;
line-height: 1.7;
margin-top: var(--px20);
font-size: var(--rem18);
}
}
}
.lpage_comp02 dl.lpcomp_rinen {
color: #fff;
dt {
font-family: var(--font-family02);
font-size: var(--rem28);
font-weight: 500;
margin-bottom: var(--px14);
}
dd {
font-weight: 300;
font-size: min(calc(1.6rem + (1vw - 1.92rem) * 0.1942), 1.6rem); border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
padding-bottom: var(--px30);
margin-bottom: var(--px30);
&:last-of-type {
margin-bottom: 0;
}
}
}
.lpage_comp03 table {
border: none;
th {
background: transparent;
border: none;
border-bottom: 1px solid #ccc;
width: 20%;
}
td {
background: transparent;
border: none;
border-bottom: 1px solid #ccc;
a {
position: relative;
display: inline-block;
font-weight: 700;
&:hover {
text-decoration: underline;
}
&::before {
content: '\f138';
display: inline-block;
font-family: var(--font-awesome);
font-weight: 600;
color: var(--color-primary);
margin-right: 2px;
}
}
}
}
.lpage_comp04 {
position: relative;
&::before {
content: '';
position: absolute;
background: url(//www.unisol-fan.jp/wp-content/uploads/lpcomp_accessbg.jpg) no-repeat;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: cover;
}
.inners {
position: relative;
}
} #lowpage_tomonokai {
.lpagebox {
background: #fff;
padding: var(--px40);
&+.lpagebox {
margin-top: var(--px30);
}
}
.tomonokai_kaihi {
background: var(--color-primary);
width: 80%;
margin-inline: auto;
text-align: center;
color: #fff;
padding: var(--px30);
p.maincopy {
font-size: var(--rem40);
font-weight: 800;
line-height: 1.2;
}
p.subcopy {
font-size: var(--rem18);
line-height: 1.3;
}
}
ul.tomonokai_tokutenlist {
display: flex;
flex-direction: column;
gap: var(--px30);
margin-top: var(--px50);
}
}
#lpage_tomonokai02 {
p.leadcopy {
font-size: var(--rem18);
font-weight: 600;
margin-bottom: var(--px14);
}
ul.tomonokai_entryinfo {
margin-bottom: var(--px30);
display: flex;
flex-direction: column;
gap: var(--px20);
li {
.telbox {
border: 1px solid #ccc;
margin-top: var(--px12);
padding: var(--px20);
p {
line-height: 1.8;
}
p.ttls {
font-weight: 700;
line-height: 1.2;
}
p.nums {
font-size: var(--rem30);
font-weight: 800;
line-height: 1.5;
}
p.times, p.others {
font-size: var(--rem14);
}
}
}
}
} .qa_list {
cursor: pointer;
}
.qa_list .qa_list_inner dt {
position: relative;
font-weight: normal;
margin: 1rem 0 0 0;
display: flex;
align-items: stretch;
padding: 0rem 1rem 0rem 0rem;
background: #ffffff;
border: 1px solid #cccccc;
}
.qa_list .qa_list_inner dd .ans_flex {
position: relative;
font-weight: normal;
margin: 0;
display: flex;
align-items: stretch;
padding: 0;
background: #ffffff;
}
.qa_list .qa_list_inner .a_ico {
color: #ffffff;
background: var(--color-primary);
line-height: 1.0;
padding: 1rem 1rem 1rem 1rem;
font-size: 2.2rem;
border-right: 1px solid #cccccc;
width: 100%;
text-align: center;
max-width: 90px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--body-font-family);
}
.qa_list .qa_list_inner .q_ico {
background: #f2f2f2;
line-height: 1.0;
padding: 1rem 1rem 1rem 1rem;
font-size: 2.2rem;
font-weight: bold;
width: 100%;
text-align: center;
max-width: 90px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--body-font-family);
border-right: 1px solid #cccccc;
}
.qa_list .qa_list_inner .q_desc, .qa_list .qa_list_inner .a_desc {
padding: 1.5rem 1.5rem 1.5rem 2rem;
line-height: 1.7;
}
.qa_list .qa_list_inner .a_desc {
line-height: 1.8;
width: 100%;
}
.qa_list .qa_list_inner dt:after {
content: '';
position: absolute;
top: 46%;
right: 3rem;
width: 12px;
height: 12px;
border-right: 1px solid #494949;
border-bottom: 1px solid #494949;
-webkit-transform: rotate(45deg) translateY(-50%);
transform: rotate(45deg) translateY(-50%);
}
.qa_list .qa_list_inner .active:after {
top: 43%;
right: 2rem;
-webkit-transform: rotate(-135deg) translateY(-50%);
transform: rotate(-135deg) translateY(-50%);
}
.qa_list .qa_list_inner dd {
display: none;
position: relative;
padding: 0;
margin: 0 0 1rem 0;
border: 1px solid #cccccc;
border-top: 0;
}
@media only screen and (max-width: 959px) {
.qa_list .qa_list_inner {
margin-bottom: 8rem;
}
}
@media only screen and (max-width: 768px) {
.qa_list .qa_list_inner .q_desc, .qa_list .qa_list_inner .a_desc {
padding: 0.5rem 1rem 0.5rem 1rem;
}
.qa_list .qa_list_inner dt {
padding: 0rem 1rem 0rem 0rem;
}
.qa_list .qa_list_inner .a_ico, .qa_list .qa_list_inner .q_ico {
max-width: 50px;
padding: 1.2rem 1.0rem;
}
.qa_list .qa_list_inner dt:after {
right: 1.5rem;
width: 6px;
height: 6px;
}
.qa_list .qa_list_inner .active:after {
right: 1.0rem;
}
}
@media only screen and (max-width: 559px) {
.qa_list .qa_list_inner dd {
font-size: 1.4rem;
}
.qa_list .qa_list_inner {
margin-bottom: 6rem;
}
.qa_list .qa_list_inner dt {
font-size: 1.4rem;
}
} #cat-post {
background: #fff;
padding: var(--px40);
}
body.single .type-post {
background: #fff;
padding: var(--px40);
}
.pagenav span, .pagenav span a {
color: #fff;
}
.post p+p {
margin-top: var(--px20);
}
.post .postlist p+p {
margin-top: 0;
}