/*
Template:ystandard
Theme Name:ystandard-child
Theme URI: https://wp-ystandard.com
Author: yosiakatsuki
Author URI: https://yosiakatsuki.net
Description:「自分色に染めた、自分だけのサイトを作る楽しさ」を感じてもらうために作った一風変わったWordPressテーマ「ystandard」の子テーマ
Version: 4.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
.container-ryukyu{
    max-width: 100%!important;
}
.is-transparent .ban-header{
   padding: 15px 0 15px 15px;
   width: 28%;
}
.ban-header{
   padding: 15px 0 15px 15px;
   width: 230px;
}
.ban-btn{
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.ban-btn a{
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.ban-btn a:hover{
    opacity: 0.8;
}
.ban-btn img {
    display: block;
    width: 100%;
    height: auto;
}
.top-news-slider .splide__slide {
    height: auto;
}
.top-news-slider ul li .news-card{
    border-radius: 8px;
    text-decoration: unset;
    color: #222;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.top-news-slider .splide__track{
    padding-bottom: 1rem;
}
.top-news-slider ul li .news-card img{
    border-radius: 8px 8px 0px 0px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.top-news-slider ul li .news-card .news-card__body{
    padding: 16px;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
    border-radius: 0px 0px 8px 8px;
    flex: 1;
}
.top-news-slider ul li .news-card .news-card__body .news-card__date{
    color: #98A6B5;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}
.top-news-slider ul li .news-card .news-card__body .news-card__meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: space-between;
}

.top-news-slider ul li .news-card .news-card__body .news-card__cat {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.4;
    background: #eee;
    color: #777;
    border-radius: 4px;
}
.top-news-slider ul li .news-card .news-card__body .news-card__title{
    font-size: clamp(1rem, 0.956rem + 0.1408vw, 1.125rem);
    margin: 0 0 16px 0;
    font-weight: bold;
}
.top-news-slider ul li .news-card .news-card__body .news-card__excerpt{
    font-size: 12px;
}
br.sp{
	display: none;
}
.calendar-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}


/* =========================
   カレンダーカード
========================= */
.calendar-card {
	position: relative;
	width: 100%;
	aspect-ratio: 325 / 223;
	background: #fff;
	overflow: hidden;
	color: #302D2C;
    corner-shape: scoop;
    border-radius: 16px;
}
/* corner-shape 非対応ブラウザ用 */
@supports not (corner-shape: scoop) {
.calendar-card {
    --r: 16px;

    clip-path: polygon(
      var(--r) 0,
      calc(100% - var(--r)) 0,
      100% var(--r),
      100% calc(100% - var(--r)),
      calc(100% - var(--r)) 100%,
      var(--r) 100%,
      0 calc(100% - var(--r)),
      0 var(--r)
    );
  }
}

/* =========================
   四隅の黒丸
========================= */
.calendar-card__corner {
	position: absolute;
	width: 54px;
	aspect-ratio: 1;
	background: #ffffff00;
	border-radius: 50%;
	z-index: 2;
}

.calendar-card__corner--tl {
	top: -27px;
	left: -27px;
}

.calendar-card__corner--tr {
	top: -27px;
	right: -27px;
}

.calendar-card__corner--bl {
	bottom: -27px;
	left: -27px;
}

.calendar-card__corner--br {
	right: -27px;
	bottom: -27px;
}


/* =========================
   年 2026
========================= */
.calendar-card__year {
	position: absolute;
	top: 39%;
	left: 2%;
	font-size: clamp(14px, 1.4vw, 21px);
	line-height: 1;
	font-weight: 500;
	writing-mode: vertical-rl;
}


/* =========================
   月
========================= */
.calendar-card__month {
	position: absolute;
	top: 15%;
	left: 16%;
	font-size: clamp(1.875rem, 1.4349rem + 1.4085vw, 3.125rem);
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.06em;
    white-space: nowrap;
}


/* =========================
   斜線
========================= */
.calendar-card__slash {
	position: absolute;
	top: 22%;
	left: 47%;
	width: 1px;
	height: 53%;
	background: #777;
	transform: rotate(33deg);
	transform-origin: top center;
}


/* =========================
   日・曜日
========================= */
.calendar-card__week_day{
    position: absolute;
    top: 15%;
    left: 45%;
    width: 100px;
}

.calendar-card__week {
	font-size: clamp(1rem, 0.8019rem + 0.6338vw, 1.5625rem);
	line-height: 1;
	font-weight: 700;
    text-align: right;
	color: #009fe3;
    margin-bottom: .5rem;
}

.calendar-card__day {
    font-size: clamp(3.125rem, 2.4648rem + 2.1127vw, 5rem);
    line-height: .72;
    font-weight: 700;
    letter-spacing: -0.04em;
	white-space: nowrap;
    text-align: right;
}


/* =========================
   琉リハ祭 同時開催！
========================= */
.calendar-card__fes {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 8px 0 auto;
    height: 100%;
    font-size: clamp(0.75rem, 0.706rem + 0.1408vw, 0.875rem);
    line-height: 1.15;
    font-weight: 700;
    color: #e6007e;
    writing-mode: vertical-rl;
}


/* =========================
   時間
========================= */
.calendar-card__time {
	position: absolute;
	left: 50%;
    bottom: 10%;
	transform: translateX(-50%);
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.03em;
	white-space: nowrap;
   font-size: clamp(1.125rem, 0.8609rem + 0.8451vw, 1.875rem);
}

.calendar-card__time span {
	margin-left: .05em;
}
.top-news-slider .splide__arrow{
    background: #0397de;
}
.top-news-slider .splide__arrow svg{
    fill: #fff;
}
@media screen and (min-width: 768px) {
.calendar-card__month {
    width: 55px;
    text-align: center;
}
}
@media screen and (max-width: 991px) {
	.calendar-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
.calendar-card__week_day{
    width: 75px;
}
    .ban-header{
        display: none;
}
}

@media screen and (max-width: 599px) {
    .calendar-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .calendar-card {
        aspect-ratio: 1 / 1;
    }
    .calendar-card__month {
    top: 17%;
}
.calendar-card__slash {
    top: 23%;
}
.calendar-card__week_day {
    top: 24%;
    width: 55px;
}
.calendar-card__day{
    text-align: center;
}
}
@media screen and (max-width: 768px) {
    br.sp {
        display: block;
    }
    br.pc {
        display: none;
    }
}