@charset "utf-8";
/* ------ Settings ------ */
:root {
--base-color: 145 48% 47%; /* 青/緑 */
--base-pale-color: 145 48% 52%;
--base-light-color: 145 48% 42%;
--base-dark-color: 145 48% 32%;
--seigaiha: url(/img/seigaiha-play.webp); /* play */
}
/* -------------------- ★play-list ★ -------------------- */
.play-list {
display: grid;
grid-template-columns: 140px 1fr;
grid-template-rows: auto auto auto auto;
gap: 10px 15px;
margin-top: 40px;
padding-bottom: 10px;
background-image: url(../img/paper.jpg);
border: 1px solid #a6dba6;
border-radius: 12px;
}
/* 名称 */
.play-list h3 {
margin: 0;
padding: 0;
color: #fff;
font-size: 24px;
text-align: center;
text-shadow: 0 0 5px #999, 0 0 5px #73c963, 0 0 5px #73c963, 0 0 5px #73c963, 0 0 5px #73c963, 0 0 5px #73c963, 0 0 5px #73c963;
line-height: 0;
grid-column: 1 / 3;
grid-row: 1 / 2;
border-bottom: 17px solid #73c963;
border-radius: 12px 12px 0 0;
}
.play-list h3 a {
color: #fff;
text-decoration: none;
}
/* 画像 */
.play-photo {
margin-left: 10px;
width: 100%;
height: auto;
border-radius: 12px;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
/* マーク */
.play-star {
margin: -6px 3px 0 auto;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
/* 住所・電話・HP */
.play-info {
display: grid;
gap: 2px;
grid-column: 2;
grid-row: 2 / 3;
margin: auto 10px auto 1px;
font-size: 14px;
}
.play-map:before, .play-tel:before, .play-onsen:before, .play-hp:before {
margin-right: 3px;
font-family: 'icomoon';
}
.play-map:before {
content: "\e92b";
}
.play-tel:before {
content: "\e942";
}
.play-onsen:before {
content: "\e92a：";
}
.play-hp:before {
content: "\e92e";
}
/* コメント */
.play-comment {
margin: 0 10px;
text-align: justify;
grid-column: 1 / 3;
grid-row: 3 / 4;
font-size: 15px;
line-height: 1.6;
}
/* 予約ボタン */
.play-reserve {
margin: 0 10px 2px 10px;
padding: 2px 0 1px 0;
font-size: 17px;
font-weight: 700;
text-align: center;
letter-spacing: 4px;
border-radius: 10px;
background: #ffee00;
grid-column: 1 / 3;
}
.play-reserve a {
text-decoration: none;
}
.play-reserve a:before {
margin-right: 3px;
font-family: 'icomoon';
content: "\ea04";
}
/* ------ ad 広告 ------ */
.ad-main2, .ad-main3{
margin-top: 39px;
}
/* -------------------- ★★★★★ 768 ★★★★★ -------------------- */
@media (min-width: 768px) {
/* -------------------- ★ play-list ★ -------------------- */
.play-list {
grid-template-columns: 200px 1fr;
}
.play-list h3 {
font-size: 34px;
letter-spacing: 2px;
border-bottom: 22px solid #73c963;
}
.play-star {
margin: 0 10px 0 auto;
}
.play-info {
gap: 5px;
margin: auto 10px auto 5px;
font-size: 19px;
}
.play-map:before, .play-tel:before, .play-onsen:before, .play-hp:before {
margin-right: 10px;
}
.play-map:after {
content: "（地図）";
}
.play-comment {
font-size: 18px;
}
.play-reserve {
padding: 5px 0 3px 0;
font-size: 20px;
}
}
/* -------------------- ★★★★★ 1024 ★★★★★ -------------------- */
@media (min-width: 1024px) {
/* -------------------- ★ play-list ★ -------------------- */
.play-list h3 {
font-size: 32px;
}
.play-info {
font-size: 17px;
}
.play-comment {
font-size: 17px;
}
.play-reserve {
font-size: 18px;
}
}
/* -------------------- ★★★★★ 1200 ★★★★★ -------------------- */