:root {
--color-main: #0E2674;
--color-main02: #283F95;
--color-main03: #89C4FF;
--color-main04: #80B9F5;
--color-sub: #E8630A;
--color-sub02: #E8330A;
--color-yellow: #FFD501;
--color-wh: #FFFFFF;
--color-bk: #232323;
--color-dark: #383838;
--color-dark02: #656565;
--color-dark03: #c2c2c2;
--color-bg: #EEFBFB;
--color-bg02: #F2F3F7;
--color-bg03: #E9EAEF;
--color-bg04: #F7F8FC;
--color-bg05: #F1F8FF;
--color-bg06: #EAF1F5;
--color-bg07: #F5F7FF;
--color-bg08: #FFF1E7;
--color-bg09: #E0E2EE;
--color-step01: #85BFFB;
--color-step02: #5986C9;
--color-step03: #2C4D97;
--color-step04: #122C79;
--color-hover: #ECEEF6;
--color-hover02: #F5F9FD;
--color-border: #6A7ECB;
--color-border02: #D9D9D9;
--color-border03: #E4E8FA;
--color-border04: #C5C6C9;
--color-border05: #DFE2EE;
--color-feature-yellow: #FFF2B0;
--font-main: "Noto Sans JP", sans-serif;
--font-num: "Agdasima", sans-serif;
--leading-trim: calc((1rem - 1lh) / 2);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
padding: 1px 0;
background-color: var(--color-border03);
}
::-webkit-scrollbar-thumb {
background-color: var(--color-border);
border: none;
border-radius: 5rem;
}
@media (hover: none) {
* {
pointer-events: auto; 
}
*:hover {
transform: none !important;
transition: none !important;
opacity: 1 !important;
}
}
.entry-content {
> p:first-of-type {
line-height: calc(28/15);
}
.no-post {
padding: 3rem 0;
}
}
.mgb-res8060 {
margin-bottom: 5rem;
@media (768px > width) {
margin-bottom: 3.75rem;
}
}
.site-branding {
width: 100%;
max-width: 392px;
@media (768px > width) {
width: calc(100% - 140px);
}
}
.c-logo {
& .c-logo__text {
color: var(--color-main);
@media (768px > width) {
font-size: 1.125rem;
}
}
& .c-logo__textEn {
letter-spacing: .01rem;
font-size: .75rem;
font-weight: 500;
white-space: nowrap;
color: var(--color-sub);
}
}
.breadcrumb {
text-align: right;
width: 70%;
margin-left: auto;
padding-top: 1rem;
@media (768px > width) {
width: 100%;
margin-left: 0;
padding-top: .875rem;
}
#breadcrumbs {
display: flex;
justify-content: right;
align-items: center;
}
a, span {
font-size: .875rem;
color: var(--color-dark03);
@media (768px > width) {
font-size: .75rem;
}
}
.breadcrumb_last { color: var(--color-main);
}
}
.l-pageHeader {
z-index: 2;
position: relative;
margin-top: 5.625rem;
padding: 6.125rem 0 4.625rem;
@media (768px > width) {
margin-top: 4rem;
padding: 2.5rem 0 1.875rem;
}
&::before {
position: absolute;
content: "";
top: -10%;
left: -2%;
width: 1014px;
height: 790px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/bg_pc.webp) top center / contain no-repeat;
z-index: -1;
@media (1024px > width) {
width: 100%;
}
@media (768px > width) {
left: 0;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/bg_sp.webp) top center / contain no-repeat;
}
}
& .l-pageHeader__inner {
box-sizing: content-box;
max-width: 1100px;
margin: 0 auto;
padding: 0 1.25rem;
}
& .l-pageHeader__title {
position: relative;
display: inline-block;
margin: 0;
font-size: 3rem;
font-weight: 600;
color: var(--color-main);
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.2rem;
@media (768px > width) {
font-size: 1.875rem;
}
&::before {
position: absolute;
content: "";
bottom: 8px;
left: 0;
width: 28px;
height: 3px;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
@media (768px > width) {
width: 18px;
bottom: 10px;
}
}
&::after {
content: attr(data-en);
display: block;
padding: 0 0 0 3rem;
font-size: 1.125rem;
font-weight: 500;
color: var(--color-main);
-webkit-background-clip: text;
-webkit-text-fill-color: var(--color-main);
letter-spacing: 0.1rem;
@media (768px > width) {
padding: 0 0 0 2rem;
font-size: .9375rem;
}
}
}
}
.c-link {
position: relative;
display: flex;
align-items: center;
font-size: 1.25rem;
font-weight: 700;
color: var(--color-main);
@media (768px > width) {
justify-content: right;
font-size: .9375rem;
}
> p {
position: relative;
display: inline-block;
margin-right: 1rem;
&::before {
position: absolute;
content: "";
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: transparent;
transition: .3s ease;
}
}
> span {
position: relative;
&.circle {
will-change: transform;
transform-origin: left;
transition: .3s ease;
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
@media (768px > width) {
width: 40px;
height: 40px;
}
&::before {
position: absolute;
content: "";
top: 50%;
left: 0;
transform: translateY(-50%);
width: 0;
height: 1px;
background: transparent;
transition: .3s ease;
}
& .arrow {
will-change: transform;
transform-origin: left;
position: absolute;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
span {
display: inline-block;
vertical-align: middle;
color: #333;
line-height: 1;
position: relative;
width: 18px;
height: 18px;
transform: translateX(-25%) rotate(45deg);
transition: .3s ease;
@media (768px > width) {
width: 9px;
height: 8px;
}
&::before,
&::after {
content: '';
position: absolute;
background: var(--color-wh);
border-radius: 0.5rem;
}
&::before {
top: -1px;
left: 0;
right: 0;
height: 0.1em;
transform: rotate(5deg);
@media (768px > width) {
top: -2px;
left: -2px;
right: 1px;
}
}
&::after {
top: 0;
right: -.5px;
bottom: 0;
width: 0.1em;
transform: rotate(-5deg);
@media (768px > width) {
top: -1px;
right: 1px;
bottom: -1px;
}
}
}
}
}
}
&:hover {
> p {
position: relative;
display: inline-block;
&::before {
position: absolute;
content: "";
bottom: -4px;
left: 0;
width: 100%;
height: 1px;
background: var(--color-main);
transition: .3s ease;
}
}
> span {
@media (768px < width) {
transform-origin: left;
transform: scale(1.5);
}
&.circle {
&::before {
top: 51%;
width: calc(50% + 10px);
height: 2px;
background: var(--color-wh);
@media (768px > width) {
width: calc(50% + 4.5px);
}
}
}
& .arrow {
@media (768px < width) {
transform: translate(-50%, -50%);
}
span {
@media (768px < width) {
transform: rotate(45deg);
}
&::before,
&::after {
content: '';
position: absolute;
background: var(--color-wh);
border-radius: 0.5rem;
}
&::before {
top: -1px;
left: -2px;
right: 2px;
height: 0.1em;
@media (768px > width) {
top: -2px;
left: -2px;
right: 1px;
}
}
&::after {
top: 0;
right: 0;
bottom: -1px;
width: 0.1em;
@media (768px > width) {
top: -1px;
right: 1px;
bottom: -1px;
}
}
}
}
}
}
}
.c-title {
z-index: 3;
position: relative;
display: inline-block;
margin-left: 3.125rem;
line-height: 1;
font-size: 1.5rem;
color: var(--color-main);
@media (768px > width) {
margin-left: 2.125rem;
font-size: 1.1225rem;
}
&::before {
content: attr(data-en);
display: block;
margin: -.625rem 0 0 -3.125rem;
font-size: 4rem;
font-weight: 500;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.2rem;
@media (768px > width) {
margin: -.625rem 0 0 -2.25rem;
font-size: 2.875rem;
}
}
p {
position: relative;
margin-top: 1.125rem;
letter-spacing: 0.05rem;
font-weight: 600;
&::before {
position: absolute;
content: "";
top: 50%;
left: -48px;
transform: translateY(-50%);
width: 36px;
height: 3px;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
@media (768px > width) {
left: -32px;
width: 20px;
}
}
}
}
.l-inner {
box-sizing: border-box;
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 1.25rem;
}
.l-inner--content {
box-sizing: border-box;
width: 100%;
max-width: 1040px;
margin: 0 auto;
padding: 0;
}
.l-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--color-wh);
z-index: 9999;
box-shadow: 0 4px 4px #00000040;
& .l-header__inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 90px;
padding-left: calc(50/1400 * 100vw);
@media (768px > width) {
height: 64px;
}
.main-navigation {
display: flex;
justify-content: right;
height: 100%;
@media (1280px > width) {
flex-direction: row-reverse;
}
@media (768px > width) {
width: auto;
}
#menu-header-top {
justify-content: right;
line-height: 1.25;
& .menu-item {
align-content: center;
&:not(:last-of-type) {
border-right: 1px solid #D9D9D9;
}
a {
padding: 0 1.25rem;
font-size: .75rem;
font-weight: 500;
color: var(--color-bk);
&:hover {
color: var(--color-sub);
}
}
}
}
#menu-header-bottom { & .menu-item {
align-content: center;
> ul.sub-menu {
flex-direction: column;
width: calc(100% + 100px);
border-bottom-left-radius: .625rem;
border-bottom-right-radius: .625rem;
border-top: 5px solid var(--color-sub);
background: var(--color-wh);
&::before {
position: absolute;
content: "";
background: var(--color-sub);
transform: translateX(-50%);
left: 50%;
top: -8px;
border-radius: 30px 30px 0 0;
padding: 3px 24px 1px;
line-height: 1;
letter-spacing: 0.05em
}
li {
&:not(:last-of-type) {
background-image : linear-gradient(to right, var(--color-border02), var(--color-border02) 4px, transparent 2px, transparent 8px); background-size: 10px 2px; background-position: left bottom; background-repeat: repeat-x;
}
}
a {
position: relative;
width: 100%;
padding: 1.125rem 1.25rem 1.125rem 1rem;
font-size: .9375rem;
&::after {
position: absolute;
content: "";
top: 50%;
left: unset;
right: 1rem;
transform: translateY(-50%);
width: 7px;
height: 12px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-org-button.png), top center / contain no-repeat;
}
}
}
a {
position: relative;
padding: .85rem 1.25rem;
font-size: .9375rem;
font-weight: 700;
color: var(--color-bk);
&:hover {
opacity: 1;
color: var(--color-sub);
&::after {
position: absolute;
content: "";
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 5px;
border-radius: 1.875rem;
background: var(--color-sub);
}
}
}
&:last-of-type {
a {
padding: .85rem 1.25rem;
}
}
&.menu-item-has-children {
&::after {
position: absolute;
content: "";
top: 50%;
right: 0;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/icon-org-children.png), top center / contain no-repeat;
cursor: pointer;
}
&:hover {
opacity: 1;
&::after {
position: absolute;
content: "";
top: 50%;
right: 0;
transform: translateY(-50%);
width: 12px;
height: 2px;
background: var(--color-sub);
border-radius: 2px;
}
}
}
}
}
& .l-header__contactButton {
text-align: center;
align-content: center;
width: 100px;
font-size: .875rem;
color: var(--color-wh);
background: var(--color-sub);
@media (768px > width) {
width: 64px;
font-size: .6375rem;
}
img {
display: block;
width: 30px;
margin: 0 auto .5rem;
}
&:hover {
opacity: .75;
}
}
& .l-header__contactMenu {
position: relative;
display: none;
text-align: center;
align-content: center;
width: 100px;
padding: 0;
font-size: .875rem;
border: none;
border-radius: 0;
color: var(--color-wh);
background: var(--color-main);
@media (1280px > width) {
display: block;
}
@media (768px > width) {
width: 64px;
font-size: .6375rem;
}
span { display: block;
width: 28px;
height: 1px;
margin: 6px auto 0;
background: var(--color-wh);
&:first-of-type {
margin: 0 auto;
}
}
p {
margin: .625rem auto 0;
@media (768px > width) {
font-size: .7125rem;
}
}
img {
display: block;
word-break: 30px;
margin: 0 auto .5rem;
}
}
& .l-headerColumn {
padding-right: 2.75rem;
display: flex;
flex-direction: column;
justify-content: end;
@media (1280px > width) {
display: none;
}
#menu-item-178 {
position: relative;
a {
padding: 0 1.25rem 0 2.5rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--color-main);
&:hover {
opacity: .8;
color: var(--color-main);
}
}
&::before {
position: absolute;
content: "";
top: 51%;
left: 10%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/icon-tel-navy.png), top center / contain no-repeat;
}
}
& .sp-menu {
display: none;
}
}
&.toggled {
& .l-header__contactMenu {
p {
margin: 1rem auto 0;
}
span {
&:first-of-type {
transform: rotate(30deg) translate(1px, 5px);
}
&:nth-of-type(2) {
display: none;
}
&:last-of-type {
transform: rotate(-30deg) translate(0px, -2px);
}
}
}
& .l-headerColumn {
position: fixed;
content: "";
top: 90px;
display: block;
width: 100%;
height: 100vh;
padding: 1.5rem 1.5rem 6rem;
background: var(--color-wh);
overflow-y: scroll;
@media (768px > width) {
top: 64px;
}
& .sp-menu {
display: block;
& .c-cta__link {
margin-top: 2.5rem;
& .c-cta__button.tel {
background: var(--color-wh);
border: 2px solid var(--color-sub);
color: var(--color-sub);
> div {
&::before {
position: absolute;
content: "";
top: 50%;
left: 85%;
transform: translateY(-50%);
width: 0;
height: 2px;
background: transparent;
transition: .3s ease;
}
&::after {
position: absolute;
content: "";
top: 50%;
right: 1rem;
transform: translateY(-50%);
width: 7px;
height: 12px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-org-button.png), top center / contain no-repeat;
}
}
&::before {
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/icon-tel-orange.png), top center / contain no-repeat;
}
}
}
& #menu-header-sp {
li {
padding: .875rem 0 1rem;
border-bottom: 1px solid var(--color-border);
a {
position: relative;
font-size: .9375rem;
font-weight: 600;
color: var(--color-main);
&::after {
position: absolute;
content: "";
top: 50%;
right: .5rem;
transform: translateY(-50%);
width: 7px;
height: 12px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-navy-next.png), top center / contain no-repeat;
}
}
&.menu-item-has-children {
position: relative;
a {
&::after {
position: absolute;
content: "";
top: 50%;
right: 0.375rem;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/icon-navy-parent.svg), center top / contain no-repeat;
}
}
& .sub-menu {
li {
a {
&::after {
position: absolute;
content: "";
top: 50%;
right: 1rem;
transform: translateY(-50%);
width: 7px;
height: 12px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-navy-next.png), center top / contain no-repeat;
}
}
}
}
}
}
& .sub-menu {
@media (1280px > width) {
position: static;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
list-style: none;
box-shadow: none;
}
}
& .open {
& .sub-menu {
margin-top: 1rem;
float: none;
transform: translateX(0);
li {
position: relative;
margin: 3px 0;
padding: 0;
border-radius: .75rem;
border-bottom: none;
background: #f5f5f5; a {
width: 100%;
padding: .75rem 0 1rem 1rem;
color: var(--color-main);
}
}
}
}
}
}
& .menu-header-top-container,
& .menu-header-bottom-container {
display: none;
}
}
}
}
}
& .l-header__logo {
width: 400px;
@media (1280px > width) {
width: 320px;
}
@media (1024px > width) {
width: 236px;
}
@media (768px > width) {
max-width: calc(100% - 140px);
}
& .c-logo__textEn {
@media (1280px > width) {
font-size: .625rem;
}
@media (768px > width) {
font-size: .5rem;
}
}
& .c-logo__text {
font-size: 1.375rem;
@media (1280px > width) {
font-size: 1.125rem;
}
@media (768px > width) {
font-size: .8125rem;
}
}
}
}
.l-footLink {
& .l-footLink__list {
display: grid;
grid-template-columns: 1fr 1fr;
box-shadow: 0 -5px 10px 0px #7D8FD080;
@media (768px > width) {
grid-template-columns: 1fr;
}
& .l-footLink__item {
z-index: 2;
position: relative;
text-align: center;
border-right: 2px solid var(--color-bg);
&:not(:last-of-type) {
@media (768px > width) {
border-bottom: 2px solid var(--color-bg02);
}
}
& .l-footLink__link {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 2.5rem;
padding: 1.625rem 1.25rem;
font-size: 1.125rem;
font-weight: 600;
background: var(--color-wh);
color: var(--color-main);
@media (1024px > width) {
font-size: 1rem;
}
@media (768px > width) {
position: relative;
justify-content: flex-start;
padding: 1.625rem 1.25rem 1.625rem 2.5rem;
}
p {
> span {
position: absolute;
top: 51%;
right: 0;
transform: translateY(-50%);
span {
position: relative;
&::before {
position: absolute;
content: "";
top: 50%;
right: 0;
transform: translateY(-50%);
width: 0;
height: 2px;
background: transparent;
transition: .3s ease;
}
&::after { position: absolute;
content: "";
top: 50%;
right: -2.5rem;
transform: translateY(-50%);
width: 8px;
height: 16px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-navy.png), top center / contain no-repeat; }
}
}
}
img {
display: inline-block;
width: 48px;
margin-left: -5.375rem;
@media (1024px > width) {
width: 40px;
margin-left: -3.25rem;
}
@media (768px > width) {
position: absolute;
margin-left: 0;
}
}
p {
position: relative;
display: inline-block;
@media (768px > width) {
display: block;
margin: 0 auto;
}
}
&:hover {
@media (768px < width) {
background: var(--color-hover);
}
p {
> span {
span {
&::before {
@media (768px < width) {
right: -2.375rem;
width: 28px;
background: var(--color-main);
}
}
}
}
}
}
}
}
}
} .l-footer {
border-radius: 1.875rem;
margin-top: -2rem;
position: relative;
z-index: 999;
background: #fff;
& .l-footer__inner {
display: flex;
gap: clamp(1rem, 4vw, 8.125rem);
padding-top: 5.75rem;
padding-bottom: 5rem;
@media (960px > width) {
flex-direction: column;
align-items: center;
gap: 3.625rem;
padding-top: 3.5rem;
padding-bottom: 3.75rem;
}
& .l-footer__logo {
margin-bottom: 2.5rem;
@media (768px > width) {
text-align: center;
margin-bottom: 2.25rem;
}
}
& .l-footer__title {
color: var(--color-main);
@media (768px > width) {
text-align: center;
margin-bottom: 2.25rem;
}
}
& .l-footerTable {
margin-top: 1.25rem;
}
& .l-footer__content {
width: 100%;
max-width: 500px;
& .c-logo {
max-width: 450px;
}
}
& .l-footerSnS {
display: flex;
gap: 1.25rem;
margin-top: 3.75rem;
@media (768px > width) {
display: none;
margin-top: 0;
}
&.sp {
display: none;
@media (768px > width) {
display: flex;
justify-content: center;
gap: 1.25rem;
}
}
& .l-footerSnS__item {
& .l-footerSnS__link {
img {
width: 40px;
height: 40px;
}
}
}
}
& .l-footerCredit {
width: 100%;
max-width: 430px;
margin: 3.125rem 0 0 auto;
border: 1px solid var(--color-bg02);
@media (768px > width) {
margin: -1.875rem 0 0 auto;
}
& .l-footerCredit__title {
text-align: center;
font-size: .875rem;
font-weight: 500;
background: var(--color-bg02);
padding: .5rem 0;
color: var(--color-bk);
@media (768px > width) {
font-size: .75rem;
}
}
p {
padding: .5rem 1rem;
line-height: 1;
@media (768px > width) {
padding: .375rem 1rem;
}
img {
width: 100%;
}
}
}
& .l-footer__list {
min-width: 410px;
width: calc(100% - 500px);
@media (768px > width) {
width: 100%;
min-width: auto;
}
& .menu {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: right;
align-items: center;
gap: 1.25rem 5rem;
max-width: 430px;
margin-left: auto;
@media (768px > width) {
justify-content: center;
gap: 1.125rem clamp(1.875rem, calc(-0.1427rem + 0.3571vw), 5rem);
margin: auto;
}
li {
position: relative;
display: flex;
cursor: pointer;
&::after {
position: absolute;
content: "";
top: 50%;
right: 0;
transform: translateY(-50%);
width: 6px;
height: 12px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-bk.png), top center / cover no-repeat;
}
&:hover {
a {
@media (768px < width) {
color: var(--color-sub);
}
}
&::after {
@media (768px < width) {
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-org-button.png), top center / contain no-repeat;
}
}
}
a {
width: 100%;
font-size: .9375rem;
font-weight: 600;
color: var(--color-bk);
transition: .3s ease;
@media (768px > width) {
font-size: .75rem;
}
}
}
}
}
}
& .l-footer__copy {
width: 100vw;
margin: 0 calc(50% - 50vw);
padding: 1.25rem 0;
background-color: var(--color-main02);
@media (768px > width) {
padding: 1rem 0;
}
& .l-inner {
display: flex;
justify-content: space-between;
@media (768px > width) {
flex-direction: column;
align-items: center;
gap: 0.9375rem;
}
}
a, p {
font-size: .75rem;
font-weight: 600;
color: var(--color-wh);
}
p {
@media (768px > width) {
font-size: .625rem;
}
}
}
}
.c-pageTitle {
margin-bottom: 3.625rem;
@media (768px > width) {
margin-bottom: 2.5rem;
}
p {
position: relative;
margin-bottom: 1.125rem;
padding-left: 1.375rem;
padding-bottom: .25rem;
border-bottom: 3px solid var(--color-bg02);
color: var(--color-main);
text-transform:uppercase;
@media (768px > width) {
margin-bottom: .375rem;
padding-bottom: .5rem;
}
&::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
padding: 3px;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
top: 48%;
left: 0;
transform: translateY(-50%);
width: 14px;
height: 14px;
@media (768px > width) {
top: 41.5%;
}
}
}
h2 {
font-size: 2rem;
font-weight: 600;
@media (768px > width) {
font-size: 1.625rem;
}
}
}
.c-cta {
z-index: 2;
position: relative;
padding: 3.75rem 0 5.25rem;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
@media (768px > width) {
padding: 3.25rem 0 5.75rem;
}
& .c-cta__inner {
container-type: inline-size;
display: flex;
justify-content: center;
gap: clamp(3.125rem, 8vw, 112px);
color: var(--color-wh);
@media (768px > width) {
flex-direction: column;
align-items: center;
}
@container (max-width: 820px) {
.c-cta__link {
flex-wrap: wrap;
align-items: center;
}
}
}
}
& .c-cta__title {
font-weight: 600;
@media (768px > width) {
font-size: 1.25rem;
}
span {
display: inline-block;
width: 17px;
height: 17px;
margin-right: .5rem;
transform: rotate(30deg);
border-radius: 50%;
background: linear-gradient(to right, var(--color-wh) 0%, var(--color-wh) 49.9%, var(--color-yellow) 50%, var(--color-yellow) 100%);
&.navy {
background: linear-gradient(to right, var(--color-main) 0%, var(--color-main) 49.9%, var(--color-yellow) 50%, var(--color-yellow) 100%);
}
}
}
& .c-cta__text {
margin-top: .75rem;
font-size: 1rem;
font-weight: 500;
@media (768px > width) {
font-size: .9375rem;
}
}
.c-cta__link {
display: flex;
align-items: flex-start;
gap: 1.125rem;
@media (768px > width) {
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
}
.c-cta__button {
position: relative;
display: block;
text-align: center;
align-content: center;
width: 245px;
padding: 1.625rem 0;
border-radius: 3.125rem;
font-weight: 500;
color: var(--color-wh);
border: 1px solid var(--color-sub);
background: var(--color-sub);
@media (768px > width) {
width: 295px;
}
p {
position: relative;
display: inline-block;
color: var(--color-wh);
&::before {
position: absolute;
content: "";
top: 52%;
left: -30px;
transform: translateY(-50%);
width: 20px;
height: 12px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/icon-pc.webp) top center / contain no-repeat;
}
}
& .arrow {
position: absolute;
content: "";
top: 50%;
right: 1.25rem;
transform: translateX(-50%);
&::before,
&::after {
content: ""; 
width: 8px; 
height: 2px; 
display: inline-block; 
border-radius: 2px; 
background: var(--color-wh);
position: absolute; 
right: -2px; 
}
&::before {
top: calc(50% - 3px);
transform: rotate(50deg);
}
&::after {
bottom: calc(50% - 4px);
transform: rotate(-50deg);
}
> span {
position: relative;
&::before {
position: absolute;
content: "";
top: 50%;
right: 20px;
transform: translateY(-50%);
width: 0;
height: 2px;
background: transparent;
transition: .3s ease;
}
}
}
&:hover {
@media (768px < width) {
opacity: .75;
}
& .arrow {
&::before,
&::after {
@media (768px < width) {
background: var(--color-wh);
}
}
span {
&::before {
@media (768px < width) {
right: 0;
width: 20px;
background: var(--color-wh);
}
}
}
}
}
&.tel {
padding: .5rem 0;
border: 2px solid var(--color-wh);
background: transparent;
line-height: 1.25;
&.main {
color: var(--color-main);
border: 2px solid var(--color-main);
&::before {
width: 18px;
height: 18px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/icon-tel-navy.png), top center / contain no-repeat;
}
& .arrow {
position: absolute;
content: "";
top: 50%;
right: 1.25rem;
transform: translateX(-50%);
&::before,
&::after {
content: ""; 
width: 8px; 
height: 2px; 
display: inline-block; 
border-radius: 2px; 
background: var(--color-main);   
position: absolute; 
right: -2px; 
}
&::before {
top: calc(50% - 3px);
transform: rotate(50deg);
}
&::after {
bottom: calc(50% - 4px);
transform: rotate(-50deg);
}
> span {
position: relative;
&::before {
position: absolute;
content: "";
top: 50%;
right: 20px;
transform: translateY(-50%);
width: 0;
height: 2px;
background: transparent;
transition: .3s ease;
}
}
}
&:hover {
@media (768px < width) {
color: var(--color-wh);
background: var(--color-main);
}
&::before {
@media (768px < width) {
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/icon-tel-button.png), top center / cover no-repeat;
}
}
& .arrow {
&::before,
&::after {
@media (768px < width) {
background: var(--color-wh);
}
}
span {
&::before {
@media (768px < width) {
right: 0;
width: 20px;
background: var(--color-wh);
}
}
}
}
}
}
&::before {
position: absolute;
content: "";
top: 52%;
left: 9.5%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/icon-tel-button.png), top center / contain no-repeat;
@media (768px > width) {
left: 14%;
}
}
span {
display: block;
&:first-of-type {
font-size: .75rem;
font-weight: 500;
}
&:nth-of-type(2) {
font-size: 1.375rem;
font-weight: 700;
}
&:last-of-type {
font-size: .75rem;
font-weight: 500;
}
}
}
&.access {
padding: 1.0625rem 0;
&::before {
position: absolute;
content: "";
top: 50%;
left: 2rem;
transform: translateY(-50%);
width: 20px;
height: 20px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/icon-access.png), top center / contain no-repeat;
}
} }
.c-table {
display: table;
width: 100%;
margin: 0;
border-collapse: collapse;
tr {
border-bottom: 1px solid var(--color-border);
color: var(--color-main);
&:first-of-type {
border-top: 1px solid var(--color-border);
}
th {
text-align: center;
padding: 1.25rem .375rem;
font-size: .875rem;
font-weight: 700;
@media (768px > width) {
padding: .75rem .25rem;
}
&:first-of-type {
width: 168px;
}
&.head {
@media (768px > width) {
width: 130px;
font-size: .75rem;
}
}
}
td {
text-align: center;
padding: 1.25rem .375rem;
font-size: 1.25rem;
color: var(--color-sub);
@media (768px > width) {
padding: .5625rem .25rem;
}
&.col {
color: var(--color-main);
}
}
& .head.col {
text-align: left;
width: 168px;
padding: 1.25rem .375rem 1.25rem .8125rem;
font-size: .875rem;
font-weight: 500;
@media (768px > width) {
width: 120px;
padding: .25rem .375rem;
text-align: left;
white-space: nowrap;
}
> span {
white-space: nowrap;
padding-right: 1rem;
font-weight: 700;
@media (768px > width) {
padding-right: .25rem;
writing-mode: vertical-lr;
white-space: nowrap;
vertical-align: middle;
}
}
> p {
width: calc(100% - 50px);
@media (768px > width) {
font-size: .8125rem;
line-height: 1.25;
}
}
& .last {
white-space: nowrap;
font-size: .75rem;
@media (768px > width) {
font-size: .625rem;
}
}
}
&:last-of-type {
& .head.col {
display: flex;
align-items: center;
padding: .90625rem .375rem .90625rem .8125rem;
@media (768px > width) {
padding: .5625rem .375rem;
}
}
td {
padding: .9375rem .375rem;
@media (768px > width) {
padding: .625rem .375rem;
}
}
}
}
&.--departments {
margin-bottom: 1.875rem;
@media (768px > width) {
margin-bottom: 1.25rem;
}
tr {
border-bottom: 2px solid var(--color-border05);
&:first-of-type {
border-top: 2px solid var(--color-border05);
}
th {
width: 220px;
color: var(--color-main);
background: var(--color-bg04);
@media (768px > width) {
width: 120px;
}
&.ster {
background: var(--color-bg09);
}
&.ope {
@media (768px > width) {
width: 67px;
}
}
}
td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.625rem 1.875rem 1.625rem 3.5rem;
font-size: 1rem;
color: #000000;
@media (768px > width) {
padding: 1.75rem .75rem 1.75rem 1.25rem;
font-size: .875rem;
}
&.sp-col {
@media (768px > width) {
flex-direction: column;
align-items: flex-start;
gap: .25rem;
padding: .875rem .75rem .875rem 1.25rem;
}
}
span {
&:first-of-type {
font-weight: 600;
}
}
&:last-of-type {
padding: 1.625rem 1.875rem 1.625rem 3.5rem;
@media (768px > width) {
padding: .875rem .75rem;
}
}
}
}
}
}
.c-button {
position: relative;
display: block;
text-align: center;
width: 300px;
padding: 1.25rem 0;
border-radius: 5.625rem;
font-weight: 500;
color: var(--color-wh);
transition: .3s ease;
z-index: 0;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
&::before {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
border-radius: 5.625rem;
top: 0;
left: 0;
z-index: -1;
background: linear-gradient(to right, var(--color-main) 0%, var(--color-main03) 100%);
opacity: 0;
transition: .3s;
}
&::after {
position: absolute;
content: "";
top: 50%;
right: 1.25rem;
transform: translateY(-50%);
width: 7px;
height: 12px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-white-button.png), top center / contain no-repeat;
}
&.map {
img {
position: absolute;
left: 2.25rem;
width: 16px;
height: 25px;
}
}
&.departments {
display: flex;
justify-content: center;
align-items: center;
width: 380px;
margin-bottom: 1.25rem;
padding: 1.5rem 0;
@media (768px > width) {
width: 300px;
margin: 0 auto;
}
&.reha {
@media (768px > width) {
width: 100%;
}
& .icon {
img {
left: -2.75rem;
width: 27px;
height: 27px;
}
}
}
&.orth { & .icon {
img {
left: -2.75rem;
width: 26px;
height: 26px;
@media (768px > width) {
width: 22px;
height: 22px;
}
}
}
}
span {
&.icon {
position: relative;
img {
position: absolute;
top: 50%;
left: -3.375rem;
transform: translateY(-50%);
display: inline-block;
width: 15px;
height: 19px;
}
}
}
&::after {
content: none;
}
& .arrow {
position: absolute;
content: "";
top: 50%;
right: 1.25rem;
transform: translateX(-50%);
&::before,
&::after {
content: ""; 
width: 8px; 
height: 2px; 
display: inline-block; 
border-radius: 2px; 
background: var(--color-wh);
position: absolute; 
right: -2px; 
}
&::before {
top: calc(50% - 3px);
transform: rotate(50deg);
}
&::after {
bottom: calc(50% - 4px);
transform: rotate(-50deg);
}
> span {
position: relative;
&::before {
position: absolute;
content: "";
top: 50%;
right: 20px;
transform: translateY(-50%);
width: 0;
height: 2px;
background: transparent;
transition: .3s ease;
}
}
}
&:hover {
opacity: .75;
& .arrow {
span {
&::before {
right: 0;
width: 20px;
background: var(--color-wh);
}
}
}
}
}
&.recruit {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
border: 3px solid #FFFFFF75;
border-radius: .4375rem;
background: #FFC64C;
text-shadow: -1px -1px 0 #FFB004A6, 1px -1px 0 #FFB004A6, -1px 1px 0 #FFB004A6, 1px 1px 0 #FFB004A6;
img {
width: 16px;
margin-right: .5rem;
}
&:hover {
&::before {
content: none;
}
opacity: .8;
background: #FFC64C;
}
}
> p {
position: relative;
img {
position: absolute;
top: 50%;
left: 2.1875rem; display: inline-block;
width: 21px;
height: 24px;
}
}
&:hover {
&::before {
opacity: 1;
}
}
}
.c-button--wh {
container-type: inline-size; 
position: relative;
display: block;
text-align: center;
width: 100%;
max-width: 466px;
padding: 2.25rem 0;
border-radius: .625rem;
font-size: 1.125rem;
font-weight: 500;
border: 1px solid var(--color-main);
color: var(--color-bk);
background: var(--color-wh);
transition: .3s ease;
@media (768px > width) {
padding: 1.625rem 0;
font-size: 1rem;
}
.arrow {
position: relative;
}
> img  {
position: absolute;
top: 50%;
left: 4.125rem;
transform: translateY(-50%);
display: inline-block;
width: 50px;
height: 50px;
&.hover {
visibility: hidden;
}
}
> span {
position: relative;
&.icon{
&::before,
&::after {
content: none;
}
}
&.arrow {
position: absolute;
content: "";
top: 50%;
right: calc(3.5rem - 2px);
transform: translateX(-50%);
&::before,
&::after {
content: "";
width: 11.5px;
height: 2px;
display: inline-block;
border-radius: 2px;
background: var(--color-main);
position: absolute;
right: -2px;
}
&::before {
top: calc(50% - 5px);
transform: rotate(50deg);
}
&::after {
bottom: calc(50% - 5px);
transform: rotate(-50deg);
}
span {
position: relative;
&::before {
position: absolute;
content: "";
top: 50%;
right: 28px;
transform: translateY(-50%);
width: 0;
height: 2px;
background: transparent;
transition: .3s ease;
}
}
}
}
&:hover {
color: var(--color-wh);
background: var(--color-main);
img {
visibility: hidden;
&.hover {
visibility: visible;
}
}
& .arrow {
&::before,
&::after {
background: var(--color-wh);
}
span {
&::before {
right: 0;
width: 28px;
background: var(--color-wh);
}
}
}
}
@container (max-width: 355px) {
padding: 1.625rem 0;
img {
left: 1.25rem;
width: 50px;
height: 50px;
@media (1024px > width) {
width: 40px;
height: 40px;
}
}
> span.arrow {
right: 1.625rem;
}
}
}
.c-button--back {
position: relative;
display: block;
text-align: center;
width: 100%;
max-width: 400px;
padding: 1.75rem 0;
border-radius: .625rem;
font-size: 1.125rem;
font-weight: 500;
border: 1px solid var(--color-main);
color: var(--color-wh );
background: var(--color-main);
transition: .3s ease;
.arrow {
position: relative;
}
> span {
position: relative;
&.icon{
&::before,
&::after {
content: none;
}
}
&.arrow {
position: absolute;
content: "";
top: 50%;
left: calc(3.5rem - 2px);
transform: translateX(-50%);
&::before,
&::after {
content: "";
width: 11.5px;
height: 2px;
display: inline-block;
border-radius: 2px;
background: var(--color-wh);
position: absolute;
right: -2px;
}
&::before {
top: calc(50% - 5px); transform: rotate(130deg); }
&::after {
bottom: calc(50% - 5px); transform: rotate(-130deg); }
span {
position: relative;
&::before {
position: absolute;
content: "";
top: 50%;
left: 22px;
transform: translateY(-50%);
width: 0;
height: 2px;
background: transparent;
transition: .3s ease;
}
}
}
}
&:hover {
color: var(--color-wh);
background: var(--color-main);
img {
visibility: hidden;
&.hover {
visibility: visible;
}
}
& .arrow {
&::before,
&::after {
background: var(--color-wh);
}
span {
&::before {
left: -6px;
width: 28px;
background: var(--color-wh);
}
}
}
}
}
.p-departments__bnr {
&:hover {
opacity: .8;
}
}
.c-pagination {
display: flex;
justify-content: center;
gap: 1.25rem;
text-align: center;
margin-top: 6.25rem;
@media (768px > width) {
margin-top: 3.75rem;
}
a {
display: block;
align-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
border: 1px solid var(--color-main);
background: var(--color-wh);
color: var(--color-main);
&.current {
background: var(--color-main);
color: var(--color-wh);
}
}
span {
display: block;
align-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
&.current {
background: var(--color-main);
color: var(--color-wh);
}
}
}
.c-category__title {
padding-bottom: 2.125rem;
text-align: center;
font-size: 1.375rem;
color: var(--color-main);
}
.c-category__list {
position: relative;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: .75rem;
padding-bottom: 2.125rem;
border-bottom: 2px solid var(--color-bg02);
&::before {
position: absolute;
content: "";
bottom: -2px;
left: 0;
width: 80px;
height: 2px;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
}
& .c-category__item {
a {
display: inline-block;
padding: .625rem .9375rem;
border: 1px solid var(--color-main);
border-radius: 1.875rem;
font-weight: 600;
background: var(--color-wh);
color: var(--color-bk);
@media (768px > width) {
padding: .375rem .875rem;
}
&:hover {
background: var(--color-main);
color: var(--color-wh);
}
}
}
}
.p-topBlog {
padding: 7rem 0;
@media (768px > width) {
padding: 3.75rem 0 7.5rem;
}
}
.p-blog {
padding: 0 0 6.75rem;
@media (768px > width) {
padding: 0 0 4.125rem;
}
.p-blog__list {
margin: 6.25rem auto 0;
@media (768px > width) {
margin: 2.5rem auto 0;
}
}
}
.p-blog__title {
display: flex;
justify-content: space-between;
@media (768px > width) {
flex-direction: column;
gap: 1.125rem;
}
}
.p-blog__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3.75rem 2.5rem;
max-width: 980px;
margin: 3.75rem auto 0;
@media (1024px > width) {
gap: 2rem;
margin: 1.5rem auto 0;
}
@media (768px > width) {
grid-template-columns: repeat(1, 1fr);
place-items: center;
}
& .p-blog__item {
overflow: hidden;
max-width: 300px;
border-radius: .625rem;
box-shadow: 0 0 .625rem #00000040;
@media (768px > width) {
width: 90%;
}
& .p-blog__link {
display: flex;
flex-direction: column;
font-size: .875rem;
transition: .4s ease;
> div {
&:first-of-type {
width: 100%;
height: 200px;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: .4s ease;
}
& .p-blog__content {
padding: 0 1.375rem .8125rem;
& .p-blog__subject {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
height: 72px;
margin-top: .8125rem;
color: var(--color-bk);
@media (768px > width) {
height: 48px;
-webkit-line-clamp: 2;
}
}
& .p-blog__date {
position: relative;
display: block;
margin-top: .75rem;
color: var(--color-dark02);
transition: .4s ease;
&::before {
position: absolute;
content: "";
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 2px;
background: transparent;
transition: .3s ease;
}
&::after {
transition: .4s ease;
position: absolute;
content: "";
top: 50%;
right: 0;
transform: translateY(-50%);
width: 8px;
height: 16px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-navy.png), top center / contain no-repeat;
}
}
}
&:hover {
img {
@media (768px < width) {
transform: scale(1.05);
}
}
& .p-blog__content {
@media (768px < width) {
background: var(--color-hover02);
}
}
& .p-blog__date {
&::before {
@media (768px < width) {
width: 24px;
height: 2px;
background: var(--color-main);
}
}
}
}
}
}
}
.c-ud--yellow {
background: linear-gradient(to bottom, var(--color-wh) 0%, var(--color-wh) 69.9%, var(--color-feature-yellow) 70%, var(--color-feature-yellow) 100%);
}
.c-caption {
text-align: left;
padding-top: .875rem;
font-size: .75rem;
font-weight: 500;
&.last {
padding-top: .25rem;
}
}
.u-color--wh {
color: var(--color-wh);
}
.u-color--main {
color: var(--color-main);
} .u-fw-400 {
font-weight: 400;
}
.u-mx-auto {
margin: 0 auto;
}
.u-text--center {
text-align: center;
}
.u-text--right {
text-align: right;
}
.u-text-spLeft {
text-align: center;
@media (768px > width) {
text-align: left;
}
}
.u-text-spCenter {
@media (768px > width) {
margin: 0 auto;
}
}
.u-text-spCenter {
text-align: left;
@media (768px > width) {
text-align: center;
}
}
.u-pc--hidden {
display: none!important;
@media (768px > width) {
display: block!important;
}
}
.u-sp--hidden {
display: block!important;
@media (768px > width) {
display: none!important;
}
}
.right-left {
text-align: right;
@media (768px > width) {
text-align: left;
}
}
.center-left {
text-align: center;
@media (768px > width) {
text-align: left;
}
}