a {
overflow-wrap: anywhere;
word-break: break-word;
}
.common-button.-beige {
background-color: #99797c;
}
.common-button.-blue {
background-color: #8394ad;
}
.common-button.-green {
background-color: #6eaf8f;
}
@media screen and (min-width: 768px) {
.page.-two aside nav {
position: sticky;
top: 150px;
}
}
@media screen and (min-width: 768px) and (max-width: 1140px) {
.page.-two {
grid-template-columns: 200px 1fr;
}
} .co section:nth-of-type(n + 2) {
margin-top: 80px;
} .co-list {
display: flex;
flex-direction: column;
}
.co-list li > dl {
padding: 25px 0;
display: grid;
grid-template-columns: 150px 1fr;
gap: 40px;
border-top: 1px solid var(--color-border-beige);
}
.co-list dt {
font-weight: var(--font-weight-medium);
}
.co-list dd {
font-weight: var(--font-weight-regular);
} .co-list-yakuin {
display: grid;
grid-template-columns: 80px 1fr;
gap: 10px 30px;
}
.co-list-yakuin dt {
color: var(--text-sub-color);
font-weight: var(--font-weight-regular);
} .co-list-link {
margin-top: 5px;
display: inline-block;
position: relative;
color: var(--color-main);
transition: 0.3s ease;
}
.co-list-link:hover {
opacity: 0.5;
}
.co-list-link.-map {
padding-left: 21px;
}
.co-list-link.-map::before {
content: "";
display: block;
width: 16px;
height: 16px;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/index/icon-googlemap.svg) no-repeat center
center / contain;
position: absolute;
top: 3px;
left: 0;
}
.co-list-link.-other {
padding-right: 22px;
}
.co-list-link.-other::after {
content: "";
width: 12px;
height: 12px;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/index/icon-otherlink.svg) no-repeat center
center / contain;
position: absolute;
top: 5px;
left: auto;
right: 0;
}
.co-list-tel-attention {
margin-top: 5px;
display: block;
font-size: 14px;
color: var(--text-sub-color);
}
.co-list-pmark {
margin-top: 5px;
display: block;
max-width: 81px;
}
@media screen and (max-width: 1140px) { .co-list li > dl {
grid-template-columns: 80px 1fr;
gap: 20px;
}
}
@media screen and (max-width: 767px) {
.co section:nth-of-type(n + 2) {
margin-top: 60px;
} .co-list li > dl {
padding: 15px 0;
grid-template-columns: 60px 1fr;
} .co-list-yakuin {
grid-template-columns: 70px 1fr;
gap: 5px 10px;
} .co-list-link {
font-size: 12px;
}
.co-list-link.-map {
padding-left: 19px;
}
.co-list-link.-map::before {
width: 14px;
height: 14px;
top: 2px;
}
.co-list-link.-other {
padding-right: 15px;
}
.co-list-link.-other::after {
width: 10px;
height: 10px;
top: 4px;
}
.co-list-tel-attention {
font-size: 12px;
}
} .co-solution-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}
.co-solution-list .box {
padding-left: 50px;
padding-right: 100px;
display: grid;
align-items: center;
width: 330px;
height: 120px;
background-color: var(--color-back-dark);
border-radius: 999px;
font-size: 20px;
font-weight: var(--font-weight-bold);
position: relative;
transition: 0.3s ease;
}
.co-solution-list a.box:hover {
opacity: 0.5;
}
.co-solution-list .box::after {
content: "";
display: block;
width: 80px;
height: 80px;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 20px;
left: auto;
right: 20px;
z-index: 2;
}
.co-solution-list .box[data-icon="1"]::after {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/index/solution-system.png);
}
.co-solution-list .box[data-icon="2"]::after {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/index/solution-design.png);
}
.co-solution-list .box[data-icon="3"]::after {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/index/solution-consultant.png);
}
@media screen and (max-width: 767px) {
.co-solution-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.co-solution-list .box {
padding-left: 40px;
padding-right: 80px;
width: 100%;
max-width: 333px;
height: 95px;
font-size: 18px;
}
.co-solution-list .box::after {
width: 60px;
height: 60px;
top: 15px;
right: 15px;
}
} .co-product-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 40px;
}
.co-product-list li {
max-width: 317px;
}
.co-product-list li a {
transition: 0.3s ease;
}
.co-product-list li a:hover {
opacity: 0.5;
}
.co-product-list dt {
display: grid;
place-items: center;
height: 150px;
border-radius: 15px;
box-shadow:
0 0 3px rgba(247, 234, 218, 1),
0 0 3px rgba(247, 234, 218, 1),
0 0 3px rgba(247, 234, 218, 1);
text-align: center;
}
.co-product-list dt img {
max-width: 200px;
}
.co-product-list dd {
margin-top: 10px;
font-weight: var(--font-weight-regular);
font-size: 12px;
}
@media screen and (max-width: 767px) {
.co-product-list {
gap: 30px;
}
.co-product-list li {
width: 100%;
max-width: 500px;
}
.co-product-list dt {
height: 113px;
}
.co-product-list dt img {
max-width: 155px;
}
} .co-client-attention {
font-size: 12px;
color: var(--text-sub-color);
}
.co-client-list {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 40px;
}
.co-client-list li {
padding: 20px 0;
border-bottom: 1px solid var(--color-border-beige);
font-weight: var(--font-weight-regular);
}
.co-client-list li:nth-of-type(1) {
border-top: 1px solid var(--color-border-beige);
}
@media screen and (min-width: 1141px) {
.co-client-list li:nth-of-type(2) {
border-top: 1px solid var(--color-border-beige);
}
}
@media screen and (max-width: 1140px) {
.co-client-list {
grid-template-columns: repeat(1, 1fr);
}
}
@media screen and (max-width: 767px) {
.co-client-list li {
padding: 15px 0;
}
}  .coPhi-philosophy {
text-align: center;
}
.coPhi-philosophy-en {
margin-top: 20px;
font-size: 20px;
font-weight: var(--font-weight-bold);
color: var(--color-main);
letter-spacing: 0.05em;
}
.coPhi-philosophy-ja {
margin-top: 5px;
margin-inline: auto;
width: fit-content;
font-size: 48px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
position: relative;
}
.coPhi-philosophy-ja::after {
content: "";
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/common/deco.png) center center / contain no-repeat;
width: 27px;
height: 33px;
position: absolute;
top: -14px;
right: -16px;
left: auto;
}
.coPhi-philosophy-text {
margin-top: 40px;
font-size: 18px;
letter-spacing: 0.15em;
line-height: 2;
position: relative;
z-index: 0;
}
.coPhi-philosophy-text::after {
content: "";
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/philosophy/philosophy-heart.svg) center
center / contain no-repeat;
width: 192px;
height: 136px;
position: absolute;
top: 0;
left: calc(50% - 300px);
z-index: -1;
}
@media screen and (max-width: 768px) {
.coPhi-philosophy-en {
margin-top: 10px;
font-size: 14px;
}
.coPhi-philosophy-ja {
font-size: 24px;
}
.coPhi-philosophy-ja::after {
width: 17px;
height: 20px;
top: -8px;
right: -12px;
}
.coPhi-philosophy-text {
margin-top: 20px;
font-size: 12px;
}
.coPhi-philosophy-text::after {
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/philosophy/philosophy-heart-sp.svg)
center center / contain no-repeat;
width: 120px;
height: 108px;
left: -20px;
}
} @media screen and (min-width: 1141px) {
.coPhi-strengths .hidden-pc {
display: none !important;
}
}
@media screen and (max-width: 1140px) {
.coPhi-strengths .hidden-sp {
display: none !important;
}
}
.coPhi-strengths {
margin-top: 80px;
border-top: 1px solid var(--color-border-beige);
font-weight: var(--font-weight-regular);
}
.coPhi-strengths-title {
margin-top: 60px;
font-size: 36px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.coPhi-strengths-list {
margin-top: 47px;
}
.coPhi-strengths-list li:nth-of-type(n + 2) {
margin-top: 60px;
padding-top: 60px;
border-top: 1px solid var(--color-border-beige);
}
.coPhi-strengths-num {
width: fit-content;
font-size: 18px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
color: var(--color-main);
position: relative;
}
.coPhi-strengths-num::after {
content: "";
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/common/deco.png) center center / contain no-repeat;
width: 12px;
height: 15px;
position: absolute;
top: -14px;
right: -16px;
left: auto;
}
.coPhi-strengths-ptitle {
font-size: 24px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.coPhi-strengths-ptext {
margin-top: 26px;
}
.coPhi-strengths-btnbox {
margin-top: 40px;
display: flex;
flex-direction: row;
justify-content: center;
gap: 20px;
}
@media screen and (max-width: 1140px) {
.coPhi-strengths {
margin-top: 60px;
}
.coPhi-strengths-title {
margin-top: 40px;
font-size: 24px;
}
.coPhi-strengths-list {
margin-top: 40px;
}
.coPhi-strengths-list li:nth-of-type(n + 2) {
margin-top: 40px;
padding-top: 40px;
}
.coPhi-strengths-num {
font-size: 14px;
}
.coPhi-strengths-num::after {
width: 8px;
height: 9px;
top: -3px;
right: -9px;
}
.coPhi-strengths-ptitle {
font-size: 16px;
}
.coPhi-strengths-ptext {
margin-top: 15px;
}
.coPhi-strengths-btnbox {
margin-top: 20px;
flex-direction: column;
align-items: center;
}
} .coPhi-strengths-01 {
display: grid;
grid-template-columns: 1fr 416px;
gap: 70px;
}
.coPhi-strengths-01-btn {
margin-top: 40px;
}
.coPhi-strengths-01-box {
padding: 25px;
background-color: #fefaf6;
border-radius: 10px;
}
.coPhi-strengths-01-box dt {
text-align: center;
font-weight: var(--font-weight-bold);
}
.coPhi-strengths-01-box dt span {
margin-left: 10px;
display: inline-block;
font-family: 12px;
font-weight: var(--font-weight-medium);
color: var(--text-sub-color);
}
.coPhi-strengths-01-box dd {
margin-top: 24px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 37px;
}
.coPhi-strengths-01-box-h {
font-size: 18px;
font-weight: var(--font-weight-medium);
}
.coPhi-strengths-01-box-num {
text-align: center;
font-family: 32px;
font-weight: var(--font-weight-bold);
color: var(--color-main);
}
.coPhi-strengths-01-box-num span {
font-size: 60px;
}
.coPhi-strengths-01-box-img {
max-width: 180px;
}
@media screen and (max-width: 1140px) {
.coPhi-strengths-01 {
grid-template-columns: 1fr;
gap: 15px;
}
.coPhi-strengths-01-btn {
margin-top: 5px;
}
.coPhi-strengths-01-box {
padding: 20px;
}
.coPhi-strengths-01-box dt span {
margin-left: 5px;
font-family: 10px;
}
.coPhi-strengths-01-box dd {
margin-top: 15px;
gap: 24px;
}
.coPhi-strengths-01-box-h {
font-size: 14px;
}
.coPhi-strengths-01-box-num span {
font-size: 50px;
}
.coPhi-strengths-01-box-img {
max-width: 120px;
}
} .coPhi-strengths-02-box {
margin-top: 30px;
padding: 25px;
background-color: #fefaf6;
border-radius: 10px;
}
.coPhi-strengths-02-text {
font-size: 14px;
}
.coPhi-strengths-02-process {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.coPhi-strengths-02-process dl {
display: flex;
flex-direction: column;
border: 1px solid #99797c;
border-radius: 10px;
background: var(--color-white);
overflow: hidden;
}
.coPhi-strengths-02-process dt {
padding: 6px 10px;
background: #99797c;
color: var(--color-white);
font-size: 14px;
font-weight: var(--font-weight-bold);
text-align: center;
}
.coPhi-strengths-02-process dd {
padding: 0 15px;
display: flex;
flex-direction: column;
flex: 1;
}
.coPhi-strengths-02-process dd p {
padding: 10px 0;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
min-height: 34px;
border-bottom: 1px solid var(--color-border-beige);
font-size: 14px;
text-align: center;
}
.coPhi-strengths-02-process dd p:last-child {
border-bottom: none;
}
.coPhi-strengths-02-process dd p.is-empty {
visibility: hidden;
}
@media screen and (max-width: 1140px) {
.coPhi-strengths-02-box {
margin-top: 15px;
padding: 20px;
}
.coPhi-strengths-02-text {
font-size: 12px;
}
.coPhi-strengths-02-process-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.coPhi-strengths-02-process {
margin-top: 15px;
width: max-content;
}
.coPhi-strengths-02-process dt {
font-size: 12px;
}
.coPhi-strengths-02-process dd {
padding: 0 15px;
display: flex;
flex-direction: column;
flex: 1;
}
.coPhi-strengths-02-process dd p {
padding: 5px 0;
min-height: 27px;
font-size: 12px;
}
.coPhi-strengths-02-process-scroll-nav {
margin-top: 5px;
padding-right: 15px;
display: block;
text-align: right;
color: #99797c;
font-size: 12px;
font-weight: var(--font-weight-medium);
position: relative;
}
.coPhi-strengths-02-process-scroll-nav::after {
content: "";
display: inline-block;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/philosophy/icon-scrollnav.svg) center
center / contain no-repeat;
width: 10px;
height: 10px;
position: absolute;
top: 3px;
left: auto;
right: 0;
}
} .coPhi-strengths-03-box {
margin-top: 30px;
padding: 25px;
background-color: #fefaf6;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 41px;
}
.coPhi-strengths-03-case {
display: flex;
flex-direction: column;
gap: 50px;
}
.coPhi-strengths-03-case dl {
padding: 20px;
display: grid;
grid-template-columns: 35px 1fr;
align-items: center;
gap: 30px;
border-radius: 10px;
font-size: 14px;
position: relative;
}
.coPhi-strengths-03-case dl:nth-of-type(n + 2)::after {
content: "";
display: block;
width: 20px;
height: 20px;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/philosophy/icon-arrow.svg) center center /
contain no-repeat;
position: absolute;
top: -35px;
left: calc(50% - 10px);
}
.coPhi-strengths-03-case dt {
font-weight: var(--font-weight-medium);
letter-spacing: 0.15em;
}
.coPhi-strengths-03-case dd {
position: relative;
min-height: 2rem;
}
.coPhi-strengths-03-case dd::before {
content: "";
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: -17px;
}
.coPhi-strengths-03-link {
margin-top: 10px;
font-size: 14px;
color: var(--text-sub-color);
}
.coPhi-strengths-03-link a {
color: var(--color-main);
}
.coPhi-strengths-03-case dl:nth-of-type(1) {
background-color: #edeff2;
}
.coPhi-strengths-03-case dl:nth-of-type(1) dd::before {
background-color: #8394ad;
}
.coPhi-strengths-03-case dl:nth-of-type(2) {
background-color: var(--color-white);
}
.coPhi-strengths-03-case dl:nth-of-type(2) dd::before {
background-color: #99797c;
}
.coPhi-strengths-03-case dl:nth-of-type(3) {
background-color: #6eaf8f;
}
.coPhi-strengths-03-case dl:nth-of-type(3) dt {
font-weight: var(--font-weight-bold);
color: var(--color-white);
}
.coPhi-strengths-03-case dl:nth-of-type(3) dd {
font-weight: var(--font-weight-medium);
color: var(--color-white);
}
.coPhi-strengths-03-case dl:nth-of-type(3) dd::before {
background-color: var(--color-white);
}
.coPhi-strengths-03-btn {
margin-top: 25px;
}
@media screen and (max-width: 1140px) {
.coPhi-strengths-03-box {
margin-top: 15px;
padding: 0;
grid-template-columns: 1fr;
gap: 20px;
background-color: none;
}
.coPhi-strengths-03-box > div {
padding: 20px;
background-color: #fefaf6;
border-radius: 10px;
}
.coPhi-strengths-03-case {
gap: 40px;
}
.coPhi-strengths-03-case dl {
padding: 15px 10px;
grid-template-columns: 30px 1fr;
gap: 20px;
font-size: 12px;
}
.coPhi-strengths-03-case dl:nth-of-type(n + 2)::after {
top: -29px;
}
.coPhi-strengths-03-case dd::before {
left: -17px;
}
.coPhi-strengths-03-link {
font-size: 12px;
}
.coPhi-strengths-03-btn {
margin-top: 20px;
}
} .coPhi-strengths-04-box {
margin-top: 30px;
padding: 25px;
background-color: #fefaf6;
border-radius: 10px;
display: grid;
grid-template-columns: 370px 1fr;
align-items: center;
gap: 60px;
}
.coPhi-strengths-04-graph dl {
display: grid;
grid-template-columns: 145px 1fr;
align-items: center;
gap: 40px;
}
.coPhi-strengths-04-graph dl:nth-of-type(n + 2) {
margin-top: 10px;
}
.coPhi-strengths-04-graph dt {
margin-top: 21px;
font-weight: var(--font-weight-bold);
}
.coPhi-strengths-04-graph dd {
text-align: right;
font-weight: var(--font-weight-medium);
}
.coPhi-strengths-04-graph dd span {
display: inline-block;
margin: 0 5px;
font-size: 45px;
font-weight: var(--font-weight-bold);
color: var(--color-main);
}
.coPhi-strengths-04-graph p {
margin-top: -10px;
text-align: right;
font-size: 12px;
color: var(--text-sub-color);
}
.coPhi-strengths-04-text {
font-size: 14px;
}
@media screen and (max-width: 1140px) {
.coPhi-strengths-04-box {
margin-top: 15px;
padding: 20px;
grid-template-columns: 1fr;
gap: 20px;
}
.coPhi-strengths-04-graph dl {
grid-template-columns: 1fr 170px;
gap: 10px;
}
.coPhi-strengths-04-graph dd span {
font-size: 40px;
}
.coPhi-strengths-04-graph p {
font-size: 10px;
}
.coPhi-strengths-04-text {
font-size: 12px;
}
} .coPhi-strengths-01,
.coPhi-strengths-02,
.coPhi-strengths-03,
.coPhi-strengths-04 {
position: relative;
}
.coPhi-strengths-01 .coPhi-anchor,
.coPhi-strengths-02 .coPhi-anchor,
.coPhi-strengths-03 .coPhi-anchor,
.coPhi-strengths-04 .coPhi-anchor {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
left: 0;
top: -100px;
}
.coPhi-strengths-01 .coPhi-anchor {
top: -250px;
}
@media screen and (max-width: 767px) {
.coPhi-strengths-01 .coPhi-anchor,
.coPhi-strengths-02 .coPhi-anchor,
.coPhi-strengths-03 .coPhi-anchor,
.coPhi-strengths-04 .coPhi-anchor {
top: -70px;
}
.coPhi-strengths-01 .coPhi-anchor {
top: -200px;
}
} .comEx-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.comEx-list ~ .comEx-list {
margin-top: 30px;
}
.comEx-list dt {
padding: 25px 20px;
background-color: #fcf8f4;
border-radius: 15px;
box-shadow: 0 0 3px rgba(247, 234, 218, 1);
color: var(--text-sub-color);
font-size: 14px;
font-weight: var(--font-weight-medium);
}
.comEx-list dt span {
display: block;
font-size: 20px;
letter-spacing: 0.15em;
color: var(--text-main-color);
}
.comEx-list.-pickup {
grid-template-columns: repeat(2, 1fr);
column-gap: 40px;
}
.comEx-list.-pickup dt {
border-top-left-radius: 0;
border-top-right-radius: 0;
position: relative;
}
.comEx-list.-pickup dt::after {
content: "";
width: 45px;
height: 45px;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/executive/icon-link.svg) no-repeat center
center / contain;
display: block;
position: absolute;
top: calc(50% - 22px);
left: auto;
right: 20px;
transition: transform 0.3s ease;
}
.comEx-list.-pickup dd {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.comEx-list.-pickup a {
transition: 0.3s ease;
}
.comEx-list.-pickup a:hover {
opacity: 0.5;
}
.comEx-list.-pickup a:hover dt::after {
transform: scale(1.2);
}
@media screen and (max-width: 1140px) {
.comEx-list {
margin-inline: auto;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
max-width: 500px;
}
.comEx-list ~ .comEx-list {
margin-top: 20px;
}
.comEx-list dt {
padding: 10px 15px;
border-radius: 10px;
font-size: 12px;
}
.comEx-list dt span {
font-size: 16px;
}
.comEx-list.-pickup {
grid-template-columns: 1fr;
column-gap: 20px;
}
.comEx-list.-pickup dt::after {
width: 45px;
height: 45px;
top: calc(50% - 22px);
right: 10px;
}
.comEx-list.-pickup dd {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
} .page-template-executive-detail {
overflow-x: clip;
}
.comExDe {
margin-bottom: 120px;
} .comExDe-catch {
margin-top: 60px;
display: grid;
grid-template-columns: 50% 1fr;
gap: 60px;
}
.comExDe-catch-img img {
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}
.comExDe-catch-cnt {
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 60px;
}
.comExDe-catch-profile {
display: flex;
flex-direction: row;
gap: 21px;
align-items: flex-end;
}
.comExDe-catch-catchcopy {
max-width: 480px;
}
.comExDe-catch-catchcopy img {
width: 100%;
}
.comExDe-catch-profile-name {
font-size: 16px;
color: var(--text-sub-color);
}
.comExDe-catch-profile-name span {
margin-top: 5px;
display: block;
font-size: 36px;
letter-spacing: 0.15em;
font-weight: var(--font-weight-bold);
color: var(--text-main-color);
}
.comExDe-catch-profile-sns {
margin-bottom: 11px;
display: block;
width: 36px;
height: 36px;
background-repeat: no-repeat;
background-size: contain;
}
.comExDe-catch-profile-sns.-facebook {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/executive/icon-facebook.svg);
} .comExDe-message {
margin-top: 120px;
line-height: 2rem;
position: relative;
}
.comExDe-message:before {
content: "";
display: block;
width: min(34.324vw, 508px);
aspect-ratio: 508 / 401;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/executive/message.svg) no-repeat center
center / contain;
position: absolute;
top: -50px;
right: calc((100vw - min(100% - 40px, 1080px)) / -2);
z-index: -1;
} .comExDe-career {
margin-top: 120px;
display: grid;
grid-template-columns: 490px 1fr;
gap: 40px;
}
.comExDe-career-title {
font-size: 28px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.comExDe-career-list {
margin-top: 27px;
position: relative;
}
.comExDe-career-list::before {
content: "";
position: absolute;
top: 9px;
bottom: 10px;
left: 15px;
width: 2px;
background: #f8dcdd;
}
.comExDe-career-list li {
position: relative;
display: grid;
grid-template-columns: 60px 1fr;
column-gap: 10px;
align-items: center;
padding: 0 0 20px 37px;
}
.comExDe-career-list li:last-child {
padding-bottom: 0;
}
.comExDe-career-list li::before {
content: "";
position: absolute;
top: 7px;
left: 12px;
z-index: 1;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-main);
}
.comExDe-career-list time {
display: block;
color: var(--text-sub-color);
font-size: 14px;
}
.comExDe-career-list .comExDe-career-list-red {
color: var(--color-main);
font-weight: var(--font-weight-bold);
}
.comExDe-career-img img {
border-radius: 10px;
} .comExDe-profile {
margin-top: 120px;
padding: 40px;
background-color: #fefaf6;
border-radius: 15px;
box-shadow: 0 0 3px rgba(247, 234, 218, 1);
}
.comExDe-profile-title {
font-size: 28px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.comExDe-profile-list {
margin-top: 25px;
}
.comExDe-profile-list > li {
padding: 25px 0;
border-bottom: 1px solid var(--color-border-beige);
}
.comExDe-profile-list > li:nth-of-type(1) {
border-top: 1px solid var(--color-border-beige);
}
.comExDe-profile-list dl {
display: grid;
grid-template-columns: 300px 1fr;
align-items: center;
gap: 40px;
}
.comExDe-profile-list dt {
font-size: 14px;
color: var(--text-sub-color);
font-weight: var(--font-weight-medium);
}
.comExDe-profile-list dd span {
font-weight: var(--font-weight-bold);
}
.comExDe-profile-list-ul {
display: grid;
grid-template-columns: 230px 1fr;
gap: 5px 40px;
}
.comExDe-profile-list-ul li {
padding-left: 13px;
position: relative;
}
.comExDe-profile-list-ul li::before {
content: "";
display: block;
width: 5px;
height: 5px;
border-radius: 999px;
position: absolute;
top: 8px;
left: 0;
}
.comExDe-profile-imglist {
margin-top: 25px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.comExDe-profile-imglist img {
border-radius: 15px;
}
.comExDe-profile-imglist figcaption {
margin-top: 10px;
font-size: 14px;
font-weight: var(--font-weight-regular);
} .comExDe-backbtn {
margin-top: 120px;
text-align: center;
}  .comExDe.-kudo .comExDe-profile-list dd span {
color: var(--color-green);
}
.comExDe.-kudo .comExDe-profile-list-ul li::before {
background-color: var(--color-green);
} .comExDe.-watanabe .comExDe-profile-list dd span {
color: #a48ab4;
}
.comExDe.-watanabe .comExDe-profile-list-ul li::before {
background-color: #a48ab4;
}
@media screen and (max-width: 1000px) { .comExDe-career {
margin-top: 60px;
grid-template-columns: 1fr;
}
.comExDe-career-img {
margin-inline: auto;
max-width: 500px;
} .comExDe-profile-list dl {
grid-template-columns: 1fr;
gap: 10px;
}
.comExDe-profile-list-ul {
grid-template-columns: 1fr;
gap: 5px;
}
}
@media screen and (max-width: 767px) {
.comExDe {
margin-bottom: 60px;
} .comExDe-catch {
margin-top: 30px;
width: min(100% - 40px, 1080px);
margin-inline: auto;
grid-template-columns: 1fr;
gap: 20px;
}
.comExDe-catch-img {
order: 2;
}
.comExDe-catch-img img {
border-radius: 10px;
}
.comExDe-catch-cnt {
margin-right: 0;
}
.comExDe-catch-profile {
justify-content: space-between;
}
.comExDe-catch-catchcopy.hidden-pc {
margin-top: 30px;
margin-inline: auto;
display: block;
width: min(100% - 40px, 1080px);
}
.comExDe-catch-profile-name {
font-size: 12px;
}
.comExDe-catch-profile-name span {
font-size: 24px;
}
.comExDe-catch-profile-sns {
margin-bottom: 8px;
width: 30px;
height: 30px;
} .comExDe-message {
margin-top: 60px;
}
.comExDe-message:before {
width: min(71.756vw, 282px);
aspect-ratio: 282 / 230;
top: -20px;
} .comExDe-career-title {
font-size: 24px;
}
.comExDe-career-list {
margin-top: 16px;
}
.comExDe-career-list li {
grid-template-columns: 50px 1fr;
padding: 0 0 15px 26px;
}
.comExDe-career-list time {
font-size: 12px;
}
.comExDe-career-img img {
border-radius: 15px;
} .comExDe-profile {
margin-top: 80px;
padding: 30px 15px;
background-color: #fefaf6;
}
.comExDe-profile-title {
font-size: 24px;
}
.comExDe-profile-list {
margin-top: 20px;
}
.comExDe-profile-list > li {
padding: 15px 0;
}
.comExDe-profile-list dt {
font-size: 12px;
}
.comExDe-profile-imglist {
margin-top: 30px;
margin-inline: auto;
grid-template-columns: 1fr;
gap: 20px;
max-width: 500px;
}
.comExDe-profile-imglist img {
border-radius: 10px;
}
.comExDe-profile-imglist figcaption {
margin-top: 5px;
font-size: 12px;
} .comExDe-backbtn {
margin-top: 60px;
}
} .coHis-list {
display: flex;
flex-direction: column;
}
.coHis-list li {
padding: 25px 0;
border-bottom: 1px solid var(--color-border-beige);
}
.coHis-list li:nth-of-type(1) {
border-top: 1px solid var(--color-border-beige);
}
.coHis-list dl {
display: grid;
grid-template-columns: 150px 1fr;
align-items: center;
gap: 40px;
}
.coHis-list dd {
font-weight: var(--font-weight-regular);
}
.coHis-list dd span {
color: var(--color-green);
}
@media screen and (max-width: 1040px) {
.coHis-list dl {
grid-template-columns: 1fr;
gap: 5px;
}
}
@media screen and (max-width: 767px) {
.coHis-list li {
padding: 15px 0;
}
} .coNum {
--coNum-unit: clamp(8px, 0.675676vw, 10px);
}
.coNum-fl {
display: grid;
gap: clamp(10px, 2.703vw, 40px);
}
.coNum-fl.-two {
grid-template-columns: repeat(2, 1fr);
}
.coNum-fl.-three {
grid-template-columns: repeat(3, 1fr);
}
.coNum-fl:nth-of-type(n + 2) {
margin-top: clamp(10px, 2.703vw, 40px);
}
.coNum-box {
padding: calc(var(--coNum-unit) * 3) calc(var(--coNum-unit) * 2)
calc(var(--coNum-unit) * 2);
background-color: #fefaf6;
border-radius: 15px;
}
.coNum-title {
margin-bottom: calc(var(--coNum-unit) * 1.5);
text-align: center;
font-size: calc(var(--coNum-unit) * 2);
font-weight: var(--font-weight-bold);
letter-spacing: 0.1em;
}
.coNum-num-h {
text-align: center;
font-size: calc(var(--coNum-unit) * 1.8);
}
.coNum-num-num {
text-align: center;
}
.coNum-num-num span {
margin: 0 calc(var(--coNum-unit) * 0.5);
display: inline-block;
color: var(--color-main);
font-size: calc(var(--coNum-unit) * 7);
font-weight: var(--font-weight-bold);
}
.coNum-text {
padding-top: calc(var(--coNum-unit) * 2);
font-weight: var(--font-weight-regular);
}
.coNum-box img {
width: 100%;
display: block;
}
@media screen and (max-width: 1140px) {
.coNum-fl.-two.-two-sp {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 1000px) {
.coNum {
font-size: 14px;
}
.coNum-fl {
gap: 30px;
}
.coNum-fl.-two,
.coNum-fl.-three {
grid-template-columns: 1fr;
}
.coNum-fl:nth-of-type(n + 2) {
margin-top: 30px;
}
.coNum-box {
margin-inline: auto;
max-width: 500px;
width: 100%;
padding: 20px 15px;
}
.coNum-title {
margin-bottom: 10px;
font-size: 16px;
}
.coNum-num-h {
font-size: 14px;
}
.coNum-text {
padding-top: 10px;
}
} :is(.coNum-box.-n01, .coNum-box.-n02) .coNum-cnt {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: calc(var(--coNum-unit) * 2);
}
:is(.coNum-box.-n01, .coNum-box.-n02) img {
width: calc(
100% - calc(var(--coNum-unit) * 13) - calc(var(--coNum-unit) * 2)
);
max-width: calc(var(--coNum-unit) * 18);
}
:is(.coNum-box.-n01, .coNum-box.-n02) .coNum-num-num {
white-space: nowrap;
} .coNum-box.-n01 .coNum-num-num {
font-size: calc(var(--coNum-unit) * 3.2);
}
.coNum-box.-n01 .coNum-num-num span {
font-size: calc(var(--coNum-unit) * 8.5);
} .coNum-box.-n02 .coNum-num-h {
margin-bottom: calc(var(--coNum-unit) * -1.5);
}
.coNum-box.-n02 .coNum-num-num {
font-size: calc(var(--coNum-unit) * 3.2);
}
.coNum-box.-n02 .coNum-num-num span {
font-size: calc(var(--coNum-unit) * 6);
}
@media screen and (max-width: 1000px) { :is(.coNum-box.-n01, .coNum-box.-n02) .coNum-cnt {
gap: 20px;
}
:is(.coNum-box.-n01, .coNum-box.-n02) img {
width: calc(100% - 127px - 20px);
max-width: 127px;
} .coNum-box.-n01 .coNum-num-num {
font-size: 18px;
}
.coNum-box.-n01 .coNum-num-num span {
font-size: 70px;
} .coNum-box.-n02 .coNum-num {
margin-bottom: -10px;
}
.coNum-box.-n02 .coNum-num-h {
margin-bottom: -15px;
}
.coNum-box.-n02 .coNum-num-num {
font-size: 32px;
}
.coNum-box.-n02 .coNum-num-num span {
font-size: 60px;
}
} .coNum-box.-n03 .coNum-title {
margin-bottom: calc(var(--coNum-unit) * 3);
}
.coNum-box.-n03 .coNum-cnt {
display: flex;
flex-direction: row;
justify-content: center;
gap: calc(var(--coNum-unit) * 2.3);
}
.coNum-box.-n03 img {
width: calc(
100% - calc(var(--coNum-unit) * 42) - calc(var(--coNum-unit) * 2.3)
);
max-width: calc(var(--coNum-unit) * 55);
height: auto;
object-fit: contain;
}
.coNum-box.-n03 .coNum-cnt dl {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n03 dl:nth-of-type(n + 2) {
margin-top: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n03 .coNum-num-h {
text-align: left;
}
.coNum-box.-n03 .coNum-num-h span {
display: block;
font-size: calc(var(--coNum-unit) * 1.2);
color: var(--text-sub-color);
}
.coNum-box.-n03 .coNum-num-num {
padding-right: calc(var(--coNum-unit) * 3);
position: relative;
color: var(--color-main);
}
.coNum-box.-n03 .coNum-num-num::after {
content: "";
display: block;
background-repeat: no-repeat;
background-size: contain;
width: calc(var(--coNum-unit) * 2.2);
height: calc(var(--coNum-unit) * 2.2);
position: absolute;
top: auto;
bottom: calc(var(--coNum-unit) * 2);
right: 0;
}
.coNum-box.-n03 .coNum-num-num[data-arrow="up"]::after {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/03_arrow-up.svg);
}
.coNum-box.-n03 .coNum-num-num[data-arrow="stay"]::after {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/03_arrow-stay.svg);
}
.coNum-box.-n03 .coNum-num-num[data-arrow="down"]::after {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/03_arrow-down.svg);
}
.coNum-box.-n03 .coNum-num-num span {
font-size: calc(var(--coNum-unit) * 6);
}
.coNum-box.-n03 .coNum-text {
margin-top: calc(var(--coNum-unit) * 2.5);
}
@media screen and (max-width: 1000px) { .coNum-box.-n03 .coNum-title {
margin-bottom: 20px;
}
.coNum-box.-n03 .coNum-cnt {
flex-direction: column;
gap: 20px;
}
.coNum-box.-n03 img {
margin-inline: auto;
width: 100%;
max-width: 303px;
}
.coNum-box.-n03 .coNum-cnt dl {
align-items: flex-end;
gap: 20px;
}
.coNum-box.-n03 dl:nth-of-type(n + 2) {
margin-top: 10px;
}
.coNum-box.-n03 .coNum-num-h {
margin-bottom: 10px;
}
.coNum-box.-n03 .coNum-num-h span {
font-size: 10px;
}
.coNum-box.-n03 .coNum-num-num {
padding-right: calc(var(--coNum-unit) * 3);
}
.coNum-box.-n03 .coNum-num-num::after {
width: 16px;
height: 16px;
bottom: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n03 .coNum-num-num span {
font-size: 40px;
}
.coNum-box.-n03 .coNum-text {
margin-top: 0;
padding-top: 0;
}
} .coNum-box.-n04 .coNum-title {
margin-bottom: calc(var(--coNum-unit) * 3);
}
.coNum-box.-n04 .coNum-cnt {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n04 dl {
padding: calc(var(--coNum-unit) * 1.5);
width: calc(var(--coNum-unit) * 14.9);
height: calc(var(--coNum-unit) * 13.8);
background-color: var(--color-white);
border-radius: 10px;
box-shadow: 0 0 3px rgba(247, 234, 218, 1);
text-align: center;
}
.coNum-box.-n04 dt {
padding-top: calc(var(--coNum-unit) * 2.5);
font-size: calc(var(--coNum-unit) * 1.6);
font-weight: var(--font-weight-medium);
position: relative;
}
.coNum-box.-n04 dt::before {
content: "";
display: block;
background-repeat: no-repeat;
background-size: contain;
width: calc(var(--coNum-unit) * 2.5);
height: calc(var(--coNum-unit) * 2.5);
position: absolute;
top: 0;
left: calc(50% - calc(var(--coNum-unit) * 1.2));
}
.coNum-box.-n04 dt[data-i="1"]::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/04_icon-01.svg);
}
.coNum-box.-n04 dt[data-i="2"]::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/04_icon-02.svg);
}
.coNum-box.-n04 dt[data-i="3"]::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/04_icon-03.svg);
}
.coNum-box.-n04 dt[data-i="4"]::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/04_icon-04.svg);
}
.coNum-box.-n04 dt[data-i="5"]::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/04_icon-05.svg);
}
.coNum-box.-n04 dt[data-i="6"]::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/04_icon-06.svg);
}
.coNum-box.-n04 dt[data-i="7"]::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/04_icon-07.svg);
}
.coNum-box.-n04 dt[data-i="8"]::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/04_icon-08.svg);
}
.coNum-box.-n04 dt[data-i="9"]::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/04_icon-09.svg);
}
.coNum-box.-n04 dt[data-i="10"]::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/04_icon-10.svg);
}
.coNum-box.-n04 dt[data-i="11"]::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/company/number/04_icon-11.svg);
}
.coNum-box.-n04 dd.coNum-num-num {
font-size: calc(var(--coNum-unit) * 1.2);
}
.coNum-box.-n04 dd.coNum-num-num span {
font-size: calc(var(--coNum-unit) * 4.5);
}
.coNum-box.-n04 .coNum-text {
margin-top: calc(var(--coNum-unit) * 2.5);
}
@media screen and (max-width: 1000px) {
.coNum-box.-n04 .coNum-title {
margin-bottom: 20px;
}
.coNum-box.-n04 .coNum-cnt {
gap: 9px;
}
.coNum-box.-n04 dl {
padding: 10px 5px;
width: 94px;
height: 111px;
}
.coNum-box.-n04 dt {
padding-top: 29px;
font-size: 12px;
}
.coNum-box.-n04 dt::before {
width: 25px;
height: 25px;
left: calc(50% - 12px);
}
.coNum-box.-n04 dd.coNum-num-num {
font-size: 10px;
}
.coNum-box.-n04 dd.coNum-num-num span {
font-size: 35px;
}
.coNum-box.-n04 .coNum-text {
margin-top: 20px;
}
} .coNum-box.-n05 .coNum-num-num {
font-size: calc(var(--coNum-unit) * 1.8);
}
.coNum-box.-n05 .coNum-num-num span {
font-size: calc(var(--coNum-unit) * 8.5);
}
.coNum-box.-n05 img {
margin-inline: auto;
max-width: calc(var(--coNum-unit) * 15);
}
@media screen and (max-width: 1000px) { .coNum-box.-n05 .coNum-num-num {
font-size: 18px;
}
.coNum-box.-n05 .coNum-num-num span {
font-size: 70px;
}
.coNum-box.-n05 img {
max-width: 150px;
}
.coNum-box.-n05 .coNum-text {
padding-top: 20px;
}
} .coNum-box.-n06 img {
margin-inline: auto;
max-width: calc(var(--coNum-unit) * 30.5);
}
@media screen and (max-width: 1000px) {
.coNum-box.-n06 img {
max-width: 278px;
}
.coNum-box.-n06 .coNum-text {
padding-top: 15px;
}
} .coNum-box.-n07 .coNum-num-num span {
font-size: calc(var(--coNum-unit) * 7);
}
.coNum-box.-n07 img {
margin-inline: auto;
max-width: calc(var(--coNum-unit) * 21.2);
}
@media screen and (max-width: 1000px) {
.coNum-box.-n07 .coNum-num-num span {
font-size: 60px;
}
.coNum-box.-n07 img {
max-width: 198px;
}
.coNum-box.-n07 .coNum-text {
padding-top: 20px;
}
} .coNum-box.-n08 .coNum-title {
margin-bottom: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n08 .coNum-cnt {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
gap: calc(var(--coNum-unit) * 4.2);
}
.coNum-box.-n08 img {
width: calc(
100% - calc(var(--coNum-unit) * 10.5) - calc(var(--coNum-unit) * 4.2)
);
max-width: calc(var(--coNum-unit) * 30);
height: auto;
object-fit: contain;
}
.coNum-box.-n08 .coNum-num {
margin-bottom: calc(var(--coNum-unit) * -1);
}
.coNum-box.-n08 .coNum-num-h {
margin-bottom: calc(var(--coNum-unit) * -1.5);
font-size: calc(var(--coNum-unit) * 1.6);
}
.coNum-box.-n08 .coNum-num-num {
font-size: calc(var(--coNum-unit) * 1.8);
}
.coNum-box.-n08 .coNum-num-num span {
font-size: calc(var(--coNum-unit) * 8.5);
}
@media screen and (max-width: 1000px) {
.coNum-box.-n08 .coNum-title {
margin-bottom: 20px;
}
.coNum-box.-n08 .coNum-cnt {
flex-direction: column;
align-items: center;
gap: 0;
}
.coNum-box.-n08 img {
width: 100%;
max-width: 300px;
}
.coNum-box.-n08 .coNum-num {
margin-bottom: calc(var(--coNum-unit) * -1);
display: flex;
flex-direction: row;
align-items: center;
gap: 25px;
}
.coNum-box.-n08 .coNum-num-h {
margin-bottom: 0;
font-size: 16px;
}
.coNum-box.-n08 .coNum-num-num {
font-size: 16px;
}
.coNum-box.-n08 .coNum-num-num span {
font-size: 70px;
}
.coNum-box.-n08 .coNum-text {
padding-top: 20px;
}
} .coNum-box.-n09 .coNum-title {
margin-bottom: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n09 .coNum-cnt {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: calc(var(--coNum-unit) * 3.1);
}
.coNum-box.-n09 .coNum-cnt img {
width: calc(
100% - (calc(var(--coNum-unit) * 10.5) * 2) - calc(var(--coNum-unit) * 3.1)
);
max-width: calc(var(--coNum-unit) * 14.5);
height: auto;
object-fit: contain;
}
.coNum-box.-n09 .coNum-num-h {
margin-bottom: calc(var(--coNum-unit) * -1);
}
.coNum-box.-n09 .coNum-num-num {
font-size: calc(var(--coNum-unit) * 3.2);
}
.coNum-box.-n09 .coNum-num-num span {
font-size: calc(var(--coNum-unit) * 7);
}
.coNum-box.-n09 .coNum-cnt-l .coNum-num-num {
color: #be491f;
font-weight: var(--font-weight-bold);
}
.coNum-box.-n09 .coNum-cnt-l .coNum-num-num span {
color: #be491f;
}
.coNum-box.-n09 .coNum-cnt-r .coNum-num-num {
color: var(--color-main);
font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 1000px) { .coNum-box.-n09 .coNum-title {
margin-bottom: 20px;
}
.coNum-box.-n09 .coNum-cnt {
gap: 12px;
}
.coNum-box.-n09 .coNum-cnt img {
width: 100%;
max-width: 110px;
}
.coNum-box.-n09 .coNum-num-h {
margin-bottom: -10px;
}
.coNum-box.-n09 .coNum-num-num {
font-size: 30px;
}
.coNum-box.-n09 .coNum-num-num span {
font-size: 40px;
}
} .coNum-box.-n10 .coNum-cnt {
display: grid;
grid-template-columns: calc(var(--coNum-unit) * 43.5) 1fr;
gap: calc(var(--coNum-unit) * 5);
}
.coNum-box.-n10 .coNum-cnt-l {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.coNum-box.-n10 .coNum-cnt-l img {
max-width: calc(var(--coNum-unit) * 22.8);
width: calc(100% - calc(var(--coNum-unit) * 17));
}
.coNum-box.-n10 .coNum-num-h {
margin-bottom: calc(var(--coNum-unit) * -1);
}
.coNum-box.-n10 .coNum-num-l {
margin-right: calc(var(--coNum-unit) * 2.4);
}
.coNum-box.-n10 .coNum-num-l .coNum-num-h {
font-size: calc(var(--coNum-unit) * 1.6);
font-weight: var(--font-weight-regular);
}
.coNum-box.-n10 .coNum-num-l .coNum-num-num {
font-size: calc(var(--coNum-unit) * 2);
}
.coNum-box.-n10 .coNum-num-l .coNum-num-num span {
font-size: calc(var(--coNum-unit) * 3);
color: var(--text-main-color);
}
.coNum-box.-n10 .coNum-num-r .coNum-num-num {
font-size: calc(var(--coNum-unit) * 3.2);
}
.coNum-box.-n10 .coNum-num-r .coNum-num-num span {
font-size: calc(var(--coNum-unit) * 6);
color: var(--color-main);
}
.coNum-box.-n10 .coNum-before dl {
margin-top: calc(var(--coNum-unit) * 2.5);
padding: calc(var(--coNum-unit) * 1.5);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: calc(var(--coNum-unit) * 1);
background-color: var(--color-white);
border-radius: 10px;
}
.coNum-box.-n10 .coNum-before dt {
padding-bottom: calc(var(--coNum-unit) * 0.5);
width: 100%;
text-align: center;
font-size: calc(var(--coNum-unit) * 1.4);
font-weight: var(--font-weight-medium);
}
.coNum-box.-n10 .coNum-before dd {
padding: calc(var(--coNum-unit) * 0.2) calc(var(--coNum-unit) * 1);
border: 1px solid var(--color-border-beige);
border-radius: 5px;
text-align: center;
font-size: calc(var(--coNum-unit) * 1.4);
color: #99797c;
}
@media screen and (max-width: 1000px) { .coNum-box.-n10 .coNum-title {
margin-bottom: 20px;
}
.coNum-box.-n10 .coNum-cnt {
grid-template-columns: 1fr;
gap: 20px;
}
.coNum-box.-n10 .coNum-cnt-l img {
max-width: 137px;
width: 100%;
}
.coNum-box.-n10 .coNum-num-h {
margin-bottom: -10px;
}
.coNum-box.-n10 .coNum-num-l {
margin-right: 13px;
}
.coNum-box.-n10 .coNum-num-l .coNum-num-h {
font-size: 12px;
}
.coNum-box.-n10 .coNum-num-l .coNum-num-num {
font-size: 15px;
}
.coNum-box.-n10 .coNum-num-l .coNum-num-num span {
font-size: 25px;
}
.coNum-box.-n10 .coNum-num-r .coNum-num-num {
font-size: 30px;
}
.coNum-box.-n10 .coNum-num-r .coNum-num-num span {
font-size: 40px;
}
.coNum-box.-n10 .coNum-text {
padding-top: 0;
}
.coNum-box.-n10 .coNum-before dl {
margin-top: 20px;
padding: 10px;
gap: 10px;
}
.coNum-box.-n10 .coNum-before dt {
padding-bottom: 10px;
font-size: 14px;
}
.coNum-box.-n10 .coNum-before dd {
padding: 2px 10px;
font-size: 14px;
}
} :is(
.coNum-box.-n11,
.coNum-box.-n12,
.coNum-box.-n13,
.coNum-box.-n14,
.coNum-box.-n15,
.coNum-box.-n16,
.coNum-box.-n17,
.coNum-box.-n18
)
img {
margin-inline: auto;
max-width: calc(var(--coNum-unit) * 27.8);
} :is(.coNum-box.-n13, .coNum-box.-n14) .coNum-num-num {
font-size: calc(var(--coNum-unit) * 3.2);
}
:is(.coNum-box.-n13, .coNum-box.-n14) .coNum-num-num span {
color: var(--color-main);
font-weight: var(--font-weight-bold);
} .coNum-box.-n17 .coNum-num-num span {
font-size: calc(var(--coNum-unit) * 8.5);
}
@media screen and (max-width: 1000px) { :is(
.coNum-box.-n11,
.coNum-box.-n12,
.coNum-box.-n13,
.coNum-box.-n14,
.coNum-box.-n15,
.coNum-box.-n16,
.coNum-box.-n17,
.coNum-box.-n18
)
img {
max-width: 278px;
} :is(.coNum-box.-n13, .coNum-box.-n14) .coNum-num-num {
font-size: 32px;
} .coNum-box.-n17 .coNum-num-num span {
font-size: 70px;
}
}