[class^=icon] {
position: relative;
display: inline-block;
vertical-align: middle;
}
@media (hover: hover) and (width >= 768px) {
a:has(i[class^=icon]) i::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: 0.25s opacity;
}
a:has(i[class^=icon]) i.reverse::after {
opacity: 1;
}
}
.icon-mail {
background: url(../images/common/icon_mail.svg) center/contain no-repeat;
width: 1.8rem;
height: 1.2rem;
}
.icon-tel {
background: url(../images/common/icon_tel.svg) center/contain no-repeat;
width: 1.75rem;
aspect-ratio: 1;
}
.icon-tel.white {
background-image: url('data:image/svg+xml;charset=utf8, ');
width: 1.5rem;
}
.icon-youtube {
background: url(../images/common/icon_youtube.svg) center/contain no-repeat;
width: 2rem;
height: 1.4rem;
}
.icon-youtube.black {
background-image: url('data:image/svg+xml;charset=utf8, ');
}
.icon-youtube.reverse::after {
background-image: url('data:image/svg+xml;charset=utf8, ');
}
.icon-facebook {
background: url(../images/common/icon_facebook.svg) center/contain no-repeat;
width: 2rem;
height: 2rem;
}
.icon-facebook.black {
background-image: url('data:image/svg+xml;charset=utf8, ');
}
.icon-facebook.reverse::after {
background-image: url('data:image/svg+xml;charset=utf8, ');
}
.icon-instagram {
background: url(../images/common/icon_instagram.svg) center/contain no-repeat;
width: 2rem;
height: 2rem;
display: inline-block;
}
.icon-instagram.black {
background-image: url('data:image/svg+xml;charset=utf8, ');
}
.icon-instagram.reverse::after {
background-image: url('data:image/svg+xml;charset=utf8, ');
}
.icon-arrow {
width: 2.1rem;
aspect-ratio: 1;
background: url(../images/common/nav_arrow.svg) center/contain no-repeat;
}
.icon-arrow.back {
background-image: url('data:image/svg+xml;charset=utf8, ');
}
.icon-arrow.reverse::after {
background-image: url('data:image/svg+xml;charset=utf8, ');
}
.icon-ankerlink {
background: url('data:image/svg+xml;charset=utf8, ') center/contain no-repeat;
width: 2rem;
height: 2rem;
}
.icon-popup {
background: url('data:image/svg+xml;charset=utf8, ') center/contain no-repeat;
width: 1.8rem;
height: 1.8rem;
}
.icon-blank {
background: url('data:image/svg+xml;charset=utf8, ') center/contain no-repeat;
width: 1.3rem;
height: 1.3rem;
}
.icon-search {
background: url('data:image/svg+xml;charset=utf8, ') center/contain no-repeat;
width: 1.8rem;
height: 1.8rem;
}
.icon-request {
background: url('data:image/svg+xml;charset=utf8, ') center/contain no-repeat;
width: 1.2rem;
aspect-ratio: 12/15;
}
.icon-calendar {
background: url('data:image/svg+xml;charset=utf8, ') center/contain no-repeat;
width: 1.5rem;
aspect-ratio: 15/16;
}
.icon-work {
background: url('data:image/svg+xml;charset=utf8, ') center/contain no-repeat;
width: 2.65rem;
height: 2.6rem;
}
.icon-list {
background: url('data:image/svg+xml;charset=utf8, ') center/contain no-repeat;
width: 1.2rem;
height: 1.2rem;
}
.news__container {
margin: 0 2.5rem;
margin-top: 4rem;
margin-bottom: 14rem;
}
@media (768px <= width) {
.news__container {
margin-top: 8rem;
margin-left: max(50% - 60rem, 5rem);
margin-right: max(50% - 60rem, 5rem);
max-width: 120rem;
}
}
.news__content {
border-top: 1px solid var(--color-gray-soft);
}
.news__item-link {
display: grid;
border-bottom: 1px solid var(--color-gray-soft);
grid-template-columns: 8rem 10rem auto 2.1rem;
align-items: first baseline;
gap: 0.5rem 0;
padding: 1.5rem 1rem;
}
@media (768px <= width) {
.news__item-link {
padding: 2.5rem 2rem;
gap: 0 3rem;
}
}
@media (hover: hover) and (width >= 768px) {
.news__item-link {
transition: all var(--speed) ease-in-out;
}
.news__item-link .icon-arrow {
transition: translate 0.25s;
}
.news__item-link:hover {
background-color: var(--color-gray-soft);
}
.news__item-link:hover .icon-arrow {
translate: 0.3rem 0;
}
}
.news__item-time {
font-size: 1.3rem;
font-weight: 700;
font-family: var(--ff-roboto);
color: var(--color-gold-muted);
line-height: 200%;
}
@media (768px <= width) {
.news__item-time {
font-size: 1.5rem;
}
}
.news__item-category {
font-size: 1.2rem;
color: #fff;
line-height: 166%;
background: var(--color-gold-muted);
text-align: center;
}
.news__item-title {
font-size: 1.5rem;
font-weight: 700;
line-height: 200%;
}
@media (width < 768px) {
.news__item-title {
grid-row: 2/3;
grid-column: 1/4;
}
}
.news__item .icon-arrow {
background-image: url('data:image/svg+xml;charset=utf8, ');
align-self: center;
}
.news__item .icon-arrow.reverse::after {
content: none;
}
.newspost {
margin-top: 5.5rem;
margin-bottom: 14rem;
}
.newspost__container {
display: grid;
margin: 0 2.5rem;
}
@media (768px <= width) {
.newspost__container {
margin-left: max(50% - 48rem, 5rem);
margin-right: max(50% - 48rem, 5rem);
max-width: 96rem;
}
}
.newspost__post-info {
display: flex;
align-items: center;
gap: 1rem;
}
.newspost__post-info .category {
background: var(--color-gold-muted);
color: #fff;
font-size: 1.2rem;
line-height: 166%;
padding: 0.2rem 0.8rem;
}
.newspost__post-info time {
font-size: 1.3rem;
font-weight: 700;
font-family: var(--ff-roboto);
color: var(--color-lighttext);
line-height: 1;
}
.newspost__post-title {
margin-top: 1.5rem;
font-size: 2.4rem;
font-weight: 700;
line-height: 166%;
}
@media (768px <= width) {
.newspost__post-title {
margin-top: 2rem;
font-size: 4rem;
}
}
.newspost__post-thumbnail {
margin-top: 2rem;
}
@media (768px <= width) {
.newspost__post-thumbnail {
margin-top: 4rem;
}
}
.newspost__post-thumbnail img {
width: 100%;
}
.newspost__post-contents {
margin-top: 2.5rem;
}
@media (768px <= width) {
.newspost__post-contents {
margin-top: 5rem;
}
}
.newspost__backbutton {
margin-top: 10rem;
padding-top: 5rem;
border-top: 1px solid var(--color-gray-soft);
text-align: center;
}