.tanpopo-plinks {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-start;
margin: 2em 0;
padding: 16px;
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.tanpopo-plinks__image {
flex: 0 0 120px;
text-align: center;
}
.tanpopo-plinks__image img,
.tanpopo-plinks__img {
display: block;
width: 120px;
max-width: 100%;
height: auto;
margin: 0 auto;
box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.tanpopo-plinks__body {
flex: 1 1 280px;
min-width: 0;
}
.tanpopo-plinks__title {
font-weight: 700;
font-size: .95em;
line-height: 1.5;
margin-bottom: 12px;
}
.tanpopo-plinks__title a {
color: inherit;
text-decoration: none;
}
.tanpopo-plinks__title a:hover {
text-decoration: underline;
}
.tanpopo-plinks__btns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.tanpopo-plinks__btnwrap {
position: relative;
}
.tanpopo-plinks__btn {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 8px 10px;
border-radius: 40px;
background: var(--tanpopo-plinks-btn, #5c7cfa);
color: #fff !important;
font-size: .9em;
font-weight: 700;
line-height: 1.3;
text-align: center;
text-decoration: none !important;
box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
transition: opacity .2s, transform .2s;
}
.tanpopo-plinks__btn:hover {
opacity: .85;
transform: translateY(1px);
}
.tanpopo-plinks__pixel {
position: absolute;
width: 1px;
height: 1px;
border: 0;
opacity: 0;
pointer-events: none;
}
.tanpopo-plinks__notice {
flex-basis: 100%;
margin: 0;
font-size: .8em;
color: #b32d2e;
}
@media (max-width: 599px) {
.tanpopo-plinks {
flex-direction: column;
align-items: center;
}
.tanpopo-plinks__image {
flex-basis: auto;
}
.tanpopo-plinks__body {
flex-basis: auto;
width: 100%;
}
.tanpopo-plinks__title {
text-align: center;
}
.tanpopo-plinks__btns {
grid-template-columns: 1fr;
}
}