@charset "UTF-8";
    .p-v {
margin: 72px 0 0 0;
background: #f7f7f7;
}
.p-v-list {
display: flex;
}
.p-v-item {
width: 50%;
min-width: 0;
container-type: inline-size;
}
.p-v-item a {
display: flex;
flex-direction: column;
height: 100%;
color: #fff;
text-decoration: none;
transition: .3s;
}
.p-v-img {
aspect-ratio: 240 / 320;
overflow: hidden;
}
.p-v-img img {
display: block;
width: 100%;
height: 100%;
object-position: center;
} .p-v-img img.is-portrait {
object-fit: contain;
} .p-v-img img.is-landscape {
object-fit: contain;
}
.p-v-body {
padding: 16px 16px;
}
.p-v-ttl {
margin: 0;
font-size: 6cqw;
line-height: 1.6;
font-weight: 600;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.p-v-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.p-v-tags li {
padding: 5px 8px 7px 8px;
border: 1px solid rgba(255,255,255,.7);
font-size: 5cqw;
letter-spacing: .4px;
line-height: 1;
}
@media screen and (max-width: 1439px) {
.p-v-control {
display: flex !important;
}
} .p-v-control {
display: none;
align-items: center;
justify-content: center;
gap: 30px;
margin: 20px 0 0 0;
}
.p-v-prev,
.p-v-next {
position: relative;
display: block;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid #111;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.p-v-prev span,
.p-v-next span {
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
border-top: 1px solid #111;
border-right: 1px solid #111;
}
.p-v-prev span {
transform: translate(-60%, -50%) rotate(-135deg);
}
.p-v-next span {
transform: translate(-40%, -50%) rotate(45deg);
}
.p-v-prev::after,
.p-v-next::after {
content: "";
position: absolute;
top: 50%;
width: 13px;
height: 1px;
background: #111;
transform: translateY(-50%);
}
.p-v-prev::after {
left: 12px;
}
.p-v-next::after {
right: 12px;
}
.p-v-count {
display: none;
}
@media screen and (max-width: 768px){
.p-v {
margin: 0 0 0 0;
}
} .p-top-info {
padding: 50px 40px;
background: #f7f7f7;
}
.p-top-info-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 70px;
max-width: 1280px;
margin: 0 auto;
}
.p-top-heading {
margin-bottom: 35px;
}
.p-top-heading-ja {
margin: 0 0 6px;
font-size: 1.4rem;
font-weight: 500;
color: #666;
}
.p-top-heading-en {
display: flex;
align-items: center;
gap: 20px;
margin: 0;
font-size: 3.6rem;
line-height: 1;
font-weight: 700;
}
.p-top-heading-en::after {
content: "";
flex: 1;
height: 1px;
background: #bbb;
}
.p-top-news-list {
display: flex;
flex-direction: column;
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.p-top-news-list li {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
gap: 20px;
font-size: 1.4rem;
line-height: 1.5;
}
.p-top-news-list time {
color: #777;
}
.p-top-news-list a h3{
display: block;
overflow: hidden;
color: #111;
text-decoration: underline;
white-space: nowrap;
text-overflow: ellipsis;
transition: .3s;
text-underline-offset: .3em;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
.p-top-news-list a:hover{
text-decoration: none;
}
}
.p-top-info-more {
margin: 32px 0 0;
text-align: right;
font-size: 1.4rem;
line-height: 1.5;
}
.p-top-info-more a {
display: inline-flex;
align-items: center;
gap: 14px;
color: #111;
text-decoration: none;
transition: .3s;
}
.p-top-info-more a span {
position: relative;
display: block;
width: 20px;
height: 20px;
border: 2px solid #111;
border-radius: 50%;
box-sizing: border-box;
}
.p-top-info-more a span::before {
content: "";
position: absolute;
top: 50%;
right: 4px;
width: 4px;
height: 4px;
border-top: 2px solid #111;
border-right: 2px solid #111;
transform: translateY(-50%) rotate(45deg);
}
.p-top-info-more a span::after {
content: "";
position: absolute;
top: 50%;
right: 4px;
width: 8px;
height: 2px;
background: #111;
transform: translateY(-50%);
}
.p-top-info-tabs {
display: none;
}
@media screen and (max-width: 768px) {
.p-top-info {
padding: 45px 20px 40px 20px;
}
.p-top-info-inner {
display: block;
max-width: none;
} .p-top-info-panel .p-top-heading {
display: none;
} .p-top-info-tabs {
display: flex;
justify-content: center;
margin-bottom: 28px;
border-bottom: 1px solid #bbb;
}
.p-top-info-tabs button {
position: relative;
padding: 0 20px 12px;
border: 0;
background: transparent;
color: #111;
font-size: 1.6rem;
line-height: 1.4;
font-weight: 400;
cursor: pointer;
}
.p-top-info-tabs button.is-active {
font-weight: 700;
}
.p-top-info-tabs button.is-active::after {
content: "";
position: absolute;
right: 0;
bottom: -2px;
left: 0;
height: 4px;
background: #111;
} .p-top-info-panel {
display: none;
}
.p-top-info-panel.is-active {
display: block;
} .p-top-news-list {
gap: 18px;
}
.p-top-news-list li {
grid-template-columns: 80px minmax(0, 1fr);
gap: 14px 10px;
font-size: 1.4rem;
line-height: 1.7;
}
.p-top-news-list a h3 {
display: -webkit-box;
overflow: hidden;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.p-top-info-more {
margin-top: 30px;
}
} .p-isl{
display: flex;
flex-wrap: wrap;
gap: 50px 0;
padding: 50px 0 100px 0;
background: #eee;
}
.p-isl .set{
width: 100%;
}
@media screen and (max-width: 768px) {
.p-isl{
gap: 50px 0;
padding: 20px 0 40px 0;
}
}