.c-single {
padding: 0 0 8.75rem;
@media (768px > width) {
padding: 0 0 5.375rem;
}
.entry-content {
position: relative;
z-index: 2;
padding: 0 0 5.625rem;
h2 {
margin: 2.5rem 0 1rem;
@media (768px > width) {
margin: 2rem 0 .75rem;
}
}
h3 {
margin: 2rem 0 .75rem;
@media (768px > width) {
margin: 1.5rem 0 .5rem;
}
}
h4 {
margin: 1.5rem 0 .5rem;
@media (768px > width) {
margin: 1.25rem 0 .4375rem;
}
}
p {
margin: 0 0 1rem;
line-height: calc(30/16);
@media (768px > width) {
line-height: calc(28/15);
}
}
td {
line-height: calc(30/16);
}
.wp-block-media-text__content {
padding: 0 8% 0 0;
@media (768px > width) {
padding: 0;
}
}
}
& .nav-links {
justify-content: center;
margin-bottom: 5.625rem;
padding: 4.375rem 0;
border-top: 3px solid var(--color-bg02);
border-bottom: 3px solid var(--color-bg02);
@media (768px > width) {
gap: 3.125rem;
margin-bottom: 2.125rem;
padding: 1.875rem;
}
& .nav-previous {
width: auto;
padding: 0 5.625rem;
flex: none;
font-size: 1.25rem;
@media (768px > width) {
padding: 0;
font-size: 1rem;
}
& .nav-subtitle {
position: relative;
font-weight: 700;
color: var(--color-main);
}
a {
display: flex;
align-items: center;
gap: 1.25rem;
font-weight: 700;
color: var(--color-main);
@media (768px > width) {
flex-direction: column-reverse;
align-items: center;
}
span {
position: relative;
&::before {
position: absolute;
content: "";
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: var(--color-main);
transition: .3s ease;
}
}
img {
width: 54px;
@media (768px > width) {
width: 44px;
}
}
&:hover {
span {
&::before {
width: 100%;
}
}
img {
width: 54px;
content: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/icon-prev-hover.png);
}
}
}
span.arrow {
position: absolute;
top: unset;
content: "";
top: 50%;
left: -4rem;
transform: translateY(-50%);
width: 54px;
height: 54px;
border: 1.5px solid var(--color-main);
border-radius: 50%;
background: var(--color-wh);
transition: .3s ease;
&::after {
position: absolute;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 7px;
height: 12px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-navy-prev.png), top center / contain no-repeat;
}
}
&:hover {
span.arrow {
background: var(--color-main);
&::after {
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-navy-prev-white.png), top center / contain no-repeat;
}
}
}
}
& .nav-next {
width: auto;
padding: 0 5.625rem;
flex: none;
font-size: 1.25rem;
@media (768px > width) {
padding: 0;
font-size: 1rem;
}
& .nav-subtitle {
position: relative;
font-weight: 700;
color: var(--color-main);
}
a {
display: flex;
align-items: center;
gap: 1.25rem;
font-weight: 700;
color: var(--color-main);
transition: .3s ease;
@media (768px > width) {
flex-direction: column;
align-items: center;
}
span {
position: relative;
&::before {
position: absolute;
content: "";
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: var(--color-main);
transition: .3s ease;
}
}
img {
width: 54px;
@media (768px > width) {
width: 44px;
}
}
&:hover {
span {
&::before {
width: 100%;
}
}
img {
width: 54px;
content: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/icon-next-hover.png);
}
}
}
span.arrow {
position: absolute;
top: unset;
content: "";
top: 50%;
right: -4rem;
transform: translateY(-50%);
width: 54px;
height: 54px;
border: 1.5px solid var(--color-main);
border-radius: 50%;
background: var(--color-wh);
transition: .3s ease;
&::after {
position: absolute;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -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;
}
}
&:hover {
span.arrow {
background: var(--color-main);
&::after {
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-navy-next-white.png), top center / contain no-repeat;
}
}
}
}
}
& .entry-title {
margin-bottom: 3.75rem;
padding-bottom: 1.375rem;
border-bottom: 1px solid var(--color-bg03);
font-size: 2.25rem;
color: var(--color-main);
@media (768px > width) {
padding-bottom: .9375rem;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
}
& .entry-meta {
@media (768px > width) {
display: flex;
align-items: center;
gap: .75rem;
}
}
& .entry-date {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-bk);
@media (768px > width) {
font-size: .875rem;
white-space: nowrap;
}
}
& .entry-categories {
@media (768px > width) {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
a {
display: inline-block;
padding: .125rem .375rem;
border-radius: .1875rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-wh);
background: var(--color-main02);
word-break: keep-all;
pointer-events: none;
@media (768px > width) {
padding: .25rem .375rem;
font-size: .8125rem;
}
&:not(:last-of-type) {
margin-right: .5rem;
}
}
}
& .post, & .news {
ul {
list-style: disc;
list-style-position: inside;
li {
&::marker {
line-height: 1;
color: var(--color-main);
}
}
}
h2 {
position: relative;
padding-left: 1.375rem;
&::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;
}
}
h3 {
position: relative;
margin-left: 3.125rem;
&::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%);
}
}
p {
}
}
}
.p-departmentsSpecial {
display: flex;
align-items: center;
gap: clamp(1.875rem, 5vw, 4.625rem);
margin-bottom: 8.25rem;
padding: 0 3.125rem;
@media (768px > width) {
flex-direction: column;
margin-bottom: 3.75rem;
padding: 0;
}
&.preventive {
align-items: flex-start;
margin-bottom: 0;
padding: 0 0 5.625rem;
@media (768px > width) {
align-items: center;
padding: 0 0 5.625rem;
}
&.ster {
@media (768px > width) {
padding: 0 0 3.75rem;
}
}
}
&.bg-full {
display: block;
width: 100vw;
margin: 0 calc(50% - 50vw);
padding: 6.25rem 0 7.625rem;
background: var(--color-bg02);
@media (768px > width) {
padding: 3.625rem 0 4.625rem;
}
& .p-departmentsSpecial__featTitle {
margin-bottom: 4rem;
text-align: center;
font-size: 1.875rem;
color: var(--color-main);
@media (768px > width) {
margin-bottom: 2.5rem;
font-size: 1.5rem;
}
&::first-letter {
color: #6A7ECB;
}
}
& .p-departmentsSpecial__featList {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.375rem 3.375rem;
max-width: 1000px;
margin: 0 auto;
@media (768px > width) {
grid-template-columns: 1fr;
gap: 1.25rem;
}
& .p-departmentsSpecial__featItem {
overflow: hidden;
border-radius: .625rem;
line-height: 1;
}
& .p-departmentsSpecial__featLink {
position: relative;
display: inline-block;
&::before {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
background: #000F4259;
transition: .3s ease;
}
> span {
position: relative;
&.icon{
&::before,
&::after {
content: none;
}
}
&.arrow {
position: absolute;
content: "";
top: 50%;
right: calc(1.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(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;
}
}
}
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
font-size: 1.5rem;
color: var(--color-wh);
@media (768px > width) {
font-size: .9375rem;
}
}
&:hover {
&::before {
background: #000F4280;
}
& .arrow {
&::before,
&::after {
background: var(--color-wh);
}
span {
&::before {
right: 0;
width: 28px;
background: var(--color-wh);
}
}
}
}
}
}
}
&.general {
margin-bottom: 3.75rem;
}
> img {
width: 40vw;
max-width: 450px;
flex-shrink: 1;
flex-basis: auto;
@media (768px > width) {
width: calc(100% - 2rem);
max-width: 100%;
}
}
& .p-departmentsSpecial__content {
min-width: 320px;
@media (768px > width) {
min-width: auto;
}
}
& .p-departmentsSpecial__text {
margin-bottom: 1.875rem;
line-height: calc(28/16);
@media (768px > width) {
font-size: 1rem;
}
&:not(:last-of-type) {
margin-bottom: 1.25rem;
}
}
& .p-departmentsSpecial__list {
display: flex;
align-items: center;
gap: 3rem;
margin-top: 1.875rem;
padding: 1.25rem 2.125rem;
border-radius: .625rem;
background: var(--color-bg03);
@media (768px > width) {
flex-direction: column;
gap: .625rem;
margin-top: 2.125rem;
padding: 1.25rem 1.5rem;
}
& .p-departmentsSpecial__item {
&.icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 60px;
@media (768px > width) {
margin-top: -2.5rem;
}
img {
width: 44px;
}
span {
white-space: nowrap;
font-size: .875rem;
font-weight: 600;
color: var(--color-main);
@media (768px > width) {
font-size: 1.125rem;
}
}
}
& .p-departmentsSpecial__name {
display: flex;
flex-wrap: wrap;
gap: .625rem .9375rem;
& .p-departmentsSpecial__nameList {
font-size: .9375rem;
span {
padding-right: .125rem;
color: var(--color-main);
}
}
}
}
}
}
.p-departmentsSpecial__button {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
padding: 6.25rem 0 7.25rem;
@media (1024px > width) {
grid-template-columns: repeat(2, 1fr);
}
@media (768px > width) {
grid-template-columns: 1fr;
padding: 3.75rem 0 5rem;
}
}
.p-speciality__inner {
padding-top: 6rem;
@media (768px > width) {
padding-top: 5.625rem;
}
&.l-inner {
@media (768px > width) {
padding: 5.625rem 0 0;
}
}
}
.p-specialityOrth__title {
margin-bottom: 1.875rem;
font-size: 1.5rem;
color: var(--color-main);
@media (768px > width) {
font-size: 1.375rem;
}
}
.p-departmentsGeneral__inner {
width: 100vw;
margin: 0 calc(50% - 50vw);
padding: 10rem 0 7rem;
background: var(--color-bg02);
@media (768px > width) {
padding: 6.875rem 0 3.75rem;
}
} .p-department__button {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
padding: 7.5rem 1.25rem;
@media (1024px > width) {
grid-template-columns: 1fr;
place-items: center;
}
@media (768px > width) {
grid-template-columns: repeat(1, 1fr);
gap: 1.25rem;
padding: 4.375rem 1.25rem 5rem;
}
}
.p-featuresLink {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0 4rem;
margin: 5.875rem 0 6.125rem;
padding: 0 3.625rem;
@media (768px > width) {
grid-template-columns: repeat(1, 1fr);
gap: 0 2rem;
margin-bottom: 5.625rem;
padding: 0 1.125rem;
}
& .p-featuresLink__item {
position: relative;
border-bottom: 2px solid var(--color-border02);
&::after {
position: absolute;
content: "";
bottom: -2px;
left: 0;
width: calc(36/284 * 100%);
height: 2px;
transition: .3s ease;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
}
&:hover {
&::after {
width: 100%;
}
& .p-featuresLink__link {
&::before {
width: 28px;
height: 28px;
background: var(--color-main);
}
&::after {
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-bottom-hover.png), top center / contain no-repeat;
}
}
}
& .p-featuresLink__link {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem 0;
font-size: 1.125rem;
font-weight: 600;
transition: .3s ease;
color: var(--color-bk);
@media (768px > width) {
padding: 1.25rem 0;
}
&::before {
position: absolute;
content: "";
top: 50%;
right: 0;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
background: transparent;
transition: .3s ease;
}
&::after {
position: absolute;
content: "";
top: 51%;
right: 7px;
transform: translateY(-50%);
width: 14.5px;
height: 7px;
background: url(//fujiidera-ah.com/wp-content/themes/bridging-the-gap-hybrid-themes-main/assets/images/arrow-bottom-navy.png), top center / contain no-repeat;
}
}
}
}
.p-departmentsGeneral__careItem {
padding: 0 5.25rem 2.75rem;
border-radius: 1.875rem;
background: var(--color-wh);
@media (768px > width) {
padding: 0 1.5rem 4.5rem;
}
&:not(:last-of-type) {
margin-bottom: 6.875rem;
@media (768px > width) {
margin-bottom: 5rem;
}
}
& .p-departmentsGeneral__careTitle {
text-align: center;
transform: translateY(-3rem);
margin-bottom: -1rem;
img {
width: 100px;
margin-bottom: 1.25rem;
}
h2 {
font-size: 1.75rem;
color: var(--color-main);
@media (768px > width) {
font-size: 1.5rem;
}
}
}
& .p-departmentsGeneral__careText {
margin-bottom: 1.875rem;
padding-bottom: 1.875rem;
line-height: calc(30/16);
font-size: 1rem;
border-bottom: 2px solid var(--color-bg02);
}
& .p-departmentsGeneral__subjectList {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5.25rem;
padding: 0 2.375rem;
@media (768px > width) {
grid-template-columns: 1fr;
gap: 1.875rem;
padding: 0;
}
& .p-departmentsGeneral__subjectItems {
position: relative;
&:first-of-type {
@media (768px > width) {
padding-right: 0;
border-right: none;
border-bottom: 2px solid var(--color-bg02);
}
&::after {
position: absolute;
content: "";
top: 0;
right: -2.625rem;
width: 2px;
height: 100%;
background: var(--color-bg02);
@media (768px > width) {
content: none;
}
}
}
&:not(:last-of-type) {
& .p-departmentsGeneral__subjectText {
@media (768px > width) {
padding-bottom: 1.875rem;
}
}
}
}
& .p-departmentsGeneral__subjectTitle {
display: flex;
justify-content: center;
align-items: center;
gap: .75rem;
margin-bottom: 1.625rem;
padding: .875rem 0;
font-size: 1rem;
color: var(--color-main02);
background: var(--color-bg07);
> img {
width: 30px;
height: 26px;
}
&.treatment {
color: var(--color-sub);
background: var(--color-bg08);
> img {
width: 20px;
height: 25px;
}
}
}
}
}
.p-departmentsPreventive {
padding-top: 6rem;
@media (768px > width) {
padding-top: 5.625rem;
}
}
.p-departmentsPreventive__inner {
padding-bottom: 7.5rem;
@media (768px > width) {
padding-bottom: 5.625rem;
}
& .p-departmentsPreventive__item {
display: flex;
align-items: center;
gap: 1.25rem;
width: calc(100% - 40px);
margin-bottom: .625rem;
padding: 1.25rem 1.125rem;
border-radius: .625rem;
background: var(--color-bg03);
@media (768px > width) {
width: 100%;
align-items: flex-start;
}
&:last-of-type {
margin-bottom: 1.125rem;
}
img {
width: 44px;
}
& .p-departmentsPreventive__contentTitle {
font-size: .875rem;
color: var(--color-main);
}
& .p-departmentsPreventive__contentText {
font-size: .9375rem;
}
}
& .p-departmentsPreventive__detail {
margin-bottom: 5.625rem;
@media (768px > width) {
margin-bottom: 3.75rem;
}
& .p-departmentsPreventive__detailItem {
position: relative;
display: flex;
align-items: center;
padding: 3.75rem 0;
border-top: 2px solid var(--color-bg02);
@media (768px > width) {
flex-direction: column;
gap: 1.25rem;
padding: 1.375rem 0 2.5rem;
}
&:last-of-type {
border-bottom: 2px solid var(--color-bg02);
@media (768px > width) {
padding: 1.375rem 0 4.125rem;
}
}
&::after {
position: absolute;
content: "";
top: -2px;
left: 0;
width: 36px;
height: 2px;
transition: .3s ease;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
}
& .p-departmentsPreventive__detailImg {
text-align: center;
width: 275px;
margin: 0;
img {
width: 80px;
margin-bottom: 1.125rem;
@media (768px > width) {
margin-bottom: 1rem;
}
}
figcaption {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-main);
@media (768px > width) {
font-size: 1.125rem;
}
}
}
& .p-departmentsPreventive__detailText {
width: calc(100% - 275px);
padding: 0 3.125rem 0 1.5rem;
line-height: calc(30/16);
@media (768px > width) {
width: 100%;
padding: 0;
}
}
}
}
}
.p-departmentsPreventive__price {
margin-bottom: 5.625rem;
@media (768px > width) {
margin-bottom: 3.75rem;
}
& .p-departmentsPreventive__priceTitle {
margin-bottom: 1.875rem;
font-size: 1.5rem;
color: var(--color-main);
}
& .c-caption {
padding-top: 0;
line-height: 2;
}
}
.p-departmentsSter {
width: 100vw;
margin: 0 calc(50% - 50vw);
padding: 7.375rem 0;
@media (768px > width) {
padding: 3.625rem 0 3.75rem;
}
background: var(--color-bg02);
& .p-departmentsPreventive__price {
margin-bottom: 0;
}
& .p-departmentsPreventive__sickList {
margin-top: 3.25rem;
@media (768px > width) {
margin-top: 3rem;
}
& .p-departmentsPreventive__sickItem {
position: relative;
display: flex;
gap: 2.5rem;
padding: 1.25rem 0 1.75rem;
font-size: 1.125rem;
color: var(--color-bk);
background-image : linear-gradient(to right, var(--color-border), var(--color-border) 4px, transparent 2px, transparent 8px); background-size: 10px 2px;
background-position: left bottom;
background-repeat: repeat-x;
@media (1024px > width) {
gap: 1.5rem;
}
@media (768px > width) {
flex-direction: column;
gap: .5rem;
padding: 1.125rem 0 1rem;
}
&:first-of-type {
background-image: 
linear-gradient(to right, var(--color-border), var(--color-border) 4px, transparent 2px, transparent 8px),
linear-gradient(to right, var(--color-border), var(--color-border) 4px, transparent 2px, transparent 8px);
background-position: left top, left bottom;
background-repeat: repeat-x, repeat-x;
background-size: 10px 2px, 10px 2px;
}
h4 {
text-align: center;
align-content: center;
width: 210px;
height: 35px;
border-radius: 3px;
font-size: 1rem;
font-weight: 700;
color: var(--color-wh);
background: #1483B5;
}
& .p-departmentsPreventive__sickContent {
margin-top: 0;
li {
font-size: 1rem;
font-weight: 500;
&:not(:last-of-type) {
margin-bottom: .5rem;
}
&.attention {
font-size: .75rem;
font-weight: 400;
}
}
}
.c-ud--yellow {
font-weight: 700;
background: linear-gradient(to bottom, var(--color-bg02) 0%, var(--color-bg02) 69.9%, var(--color-feature-yellow) 70%, var(--color-feature-yellow) 100%);
}
}
}
}
.p-departmentsCta {
width: 100vw;
margin: 0 calc(50% - 50vw);
padding: 4.625rem 0;
background: var(--color-bg05);
@media (768px > width) {
padding: 3.75rem 0;
}
& .p-departmentsCta__inner {
& .p-departmentsCta__title {
margin-bottom: 1.25rem;
font-size: 1.5rem;
color: var(--color-main);
@media (768px > width) {
text-align: center;
margin-bottom: 2.5rem;
font-size: 1.375rem;
}
}
& .p-departmentsCta__content {
display: flex;
align-items: center;
gap: 3.875rem;
@media (1024px > width) {
gap: 1.875rem;
}
@media (768px > width) {
flex-direction: column;
}
> img {
width: calc(450/1100 * 100vw);
max-width: 450px;
@media (768px > width) {
width: 100%;
}
}
& .p-departmentsCta__text {
margin-bottom: 1.75rem;
line-height: calc(30/16);
span {
color: var(--color-sub);
}
}
}
}
&.reha {
}
& .c-cta__button {
width: 380px;
&.tel {
color: var(--color-sub);
border: 2px solid var(--color-sub);
&::before {
left: 9%;
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;
}
&::after {
content: none;
}
> 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;
}
}
&:hover {
> div {
position: relative;
&::before {
width: calc(7% + 2.5px);
height: 2px;
background: var(--color-sub);
}
}
}
}
}
} .p-reha__inner {
padding: 0 0 7.875rem;
@media (768px > width) {
padding: 0 0 4.875rem;
}
}
.p-reha__content {
padding-bottom: 9.25rem;
@media (768px > width) {
padding-bottom: 4.875rem;
}
}
.p-reha__detail {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin-bottom: 2.375rem;
@media (768px > width) {
flex-direction: column;
align-items: flex-start;
}
> img {
@media (768px > width) {
margin: 0 auto;
}
}
}
.p-reha__title {
text-align: center;
margin-bottom: 2.5rem;
font-size: 1.875rem;
color: var(--color-main);
@media (768px > width) {
margin-bottom: 1.875rem;
font-size: 1.5rem;
}
}
.p-reha__item {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-main);
@media (768px > width) {
font-size: 1.125rem;
}
&:not(:last-of-type) {
margin-bottom: 1.375rem;
}
> img {
width: 1.125rem;
height: 1.125rem;
margin: 0 .625rem .125rem 0;
vertical-align: middle;
}
}
.p-reha__box {
position: relative;
display: flex;
width: 100%;
max-width: 820px;
margin: 0 auto;
padding: 2rem 3rem;
border-radius: .4375rem;
border: 1px solid var(--color-main);
@media (768px > width) {
padding: 1.25rem 1.25rem 7rem;
}
> p {
width: calc(100% - 9.5rem);
font-size: 1.125rem;
font-weight: 400;
line-height: calc(30/18);
@media (768px > width) {
width: 100%;
font-size: .9375rem;
}
span {
}
}
> img {
position: absolute;
bottom: -2px;
right: 1.875rem;
width: 122px;
height: 105px;
@media (768px > width) {
right: 50%;
transform: translateX(50%);
}
}
&.--hasTitle {
@media (768px > width) {
padding: 2rem 1.25rem 7rem;
}
h3 {
position: absolute;
content: "";
top: -1.875rem;
left: 50%;
transform: translateX(-50%);
padding: .5rem 1rem;
font-size: 1.625rem;
color: var(--color-main);
background: var(--color-wh);
white-space: nowrap;
@media (768px > width) {
font-size: 1.5rem;
}
}
p {
width: calc(100% - 7.25rem);
@media (768px > width) {
width: 100%;
}
}
}
}
.p-reha__detailContent {
padding: 0 0 6.75rem;
@media (768px > width) {
padding: 0 0 1.5rem;
}
& .p-reha__detailItem {
position: relative;
display: flex;
align-items: center;
padding: 3.75rem 0;
border-top: 2px solid var(--color-bg02);
@media (768px > width) {
flex-direction: column;
gap: 1.25rem;
padding: 1.375rem 0 2.5rem;
}
h3 {
width: 297px;
padding: 0 0 0 1.875rem;
font-size: 1.5rem;
color: var(--color-main);
@media (768px > width) {
text-align: center;
width: 100%;
padding: 0;
font-size: 1.125rem;
}
span {
font-size: 1.125rem;
}
}
& .p-reha__detailText {
width: calc(100% - 297px);
line-height: calc(30/16);
@media (768px > width) {
width: 100%;
}
}
&:last-of-type {
border-bottom: 2px solid var(--color-bg02);
&::before {
position: absolute;
content: "";
bottom: -2px;
left: 0;
width: 36px;
height: 2px;
transition: .3s ease;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
}
}
&::after {
position: absolute;
content: "";
top: -2px;
left: 0;
width: 36px;
height: 2px;
transition: .3s ease;
background: linear-gradient(to right, var(--color-main03) 0%, var(--color-main) 100%);
}
}
}
.p-rehaAttempt__title {
margin-bottom: 7.25rem;
}
.p-rehaAttempt__detail {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .9375rem;
padding-bottom: 6rem;
@media (1024px > width) {
grid-template-columns: repeat(2, 1fr);
gap: 5rem .9375rem;
}
@media (768px > width) {
grid-template-columns: repeat(1, 1fr);
padding-bottom: 3rem;
}
h3 {
margin-bottom: 1rem;
font-size: 1.375rem;
letter-spacing: .001rem;
color: var(--color-main);
@media (768px > width) {
font-size: 1.25rem;
}
}
& .p-rehaAttempt__item {
text-align: center;
padding: 0 1.25rem 1.375rem;
border-radius: .625rem;
background: var(--color-bg02);
@media (768px > width) {
padding: 0 1.25rem 2.25rem;
}
> img {
margin-top: -3.125rem;
margin-bottom: 2.375rem;
@media (768px > width) {
margin-bottom: 1.125rem;
}
}
& .p-rehaAttempt__text {
text-align: left;
}
}
} .p-orthArchivements {
padding: 2.25rem 3.375rem 3.5rem;
background: var(--color-bg02);
border-radius: .625rem;
@media (768px > width) {
padding: 2.25rem 1.25rem 3.75rem;
}
& .p-orthArchivements__title {
text-align: center;
margin-bottom: 2.25rem;
font-size: 1.875rem;
color: var(--color-main02);
@media (768px > width) {
font-size: 1.5rem;
}
span {
color: var(--color-border);
}
}
}
.p-orthAchivements__title {
margin-bottom: 3.625rem;
@media (768px > width) {
margin-bottom: 2.625rem;
}
}
.p-orthContent {
padding: 0 0 7.5rem;
@media (768px > width) {
padding: 0 0 5.625rem;
}
}
.p-orthAchivements__detail {
display: flex;
justify-content: space-around;
gap: 2.75rem;
margin-bottom: 7rem;
@media (768px > width) {
flex-direction: column;
align-items: center;
gap: 1.25rem;
margin-bottom: 3.75rem;
}
& .p-orthAchivements__item {
> img {
width: calc(500 / 1100 * 100vw);
max-width: 500px;
@media (768px > width) {
width: 100%;
}
}
& .p-orthAchivements__text {
font-weight: 400;
line-height: calc(30/16);
}
}
& .p-orthAchivements__content {
display: flex;
align-items: flex-end;
margin-bottom: 2.5rem;
line-height: 1;
p {
text-align: center;
align-content: center;
width: 81px;
height: 81px;
margin-right: .5rem;
line-height: 1.25;
font-size: 1.25rem;
border-radius: 5px;
color: var(--color-wh);
background: var(--color-main04);
@media (768px > width) {
width: 71px;
height: 71px;
font-size: 1.125rem;
}
}
span {
&.num {
font-size: 105px;
font-weight: 900;
background: linear-gradient(to right, var(--color-main03) 0%, #537EC2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@media (768px > width) {
font-size: 100px;
}
}
&.unit {
font-size: 3.375rem;
font-weight: 700;
background: linear-gradient(to right, #4B74B9 0%, #395DA5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.3;
}
&.vertiacal {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(to right, #4B74B9 0%, var(--color-main) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
letter-spacing: .25rem;
}
}
}
}
.p-orthAchievements__detail {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(auto-fill, auto auto auto);
gap: 0 2.25rem;
@media (1024px > width) {
grid-template-columns: repeat(2, 1fr);
}
@media (768px > width) {
grid-template-columns: repeat(1, 1fr);
}
& .p-orthAchievements__item {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
place-items: center;
padding: 1.5rem;
border-radius: .625rem;
background: var(--color-wh);
&:nth-of-type(-n+3) {
margin-bottom: 1.875rem;
}
&:nth-of-type(-n+6) {
@media (768px > width) {
margin-bottom: 1.875rem;
}
}
&:last-of-type {
@media (768px > width) {
margin-bottom: 0;
}
}
& .p-orthAchievements__name {
display: inline-block;
text-align: center;
align-self: end;
margin-bottom: .25rem;
font-size: 1.375rem;
color: var(--color-main02);
}
span {
display: block;
align-self: start;
min-height: 1.5em;
&.en {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-main02);
}
&.att {
font-size: .875rem;
font-weight: 600;
color: var(--color-main02);
}
}
& .p-orthAchievements__text {
text-align: left;
align-self: start;
padding-top: .375rem;
margin-top: .375rem;
line-height: 2;
border-top: 3px solid var(--color-bg02);
}
}
}