@charset "UTF-8";


/*スマホ*/
@media screen and (max-width:1024px){
	
.planslide {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    padding: 0 0 20px 0;
    position: relative;
    font-family: Arial, sans-serif;
}

.slider {
    width: 100%;
    position: relative;
}

/* メイン画像の設定 */
.slides img {
    width: 100%;
    height: auto;
    display: block;
}

.slick-slide {
    display: none;
}

.slick-slide.slick-active {
    display: block;
}

/* 矢印コンテナ：位置を両端3pxに調整 */
.plan-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
    padding: 0 3px; /* 15pxから3pxに変更 */
    box-sizing: border-box;
}

/* 矢印のデザイン：サイズを50pxから25pxに変更 */
.plan-arrow {
    display: grid;
    place-items: center;
    width: 25px;       /* 50pxの半分 */
    height: 25px;      /* 50pxの半分 */
    background-color: #a29c97;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    user-select: none;
    transition: all 0.3s ease;
    border: none;
}

/* ホバー時 */
.plan-arrow:hover {
    background-color: #fff;
    transform: scale(1.1);
}

/* 左矢印SVG：サイズを縮小 */
.plan-arrow.prev::after {
    content: '';
    display: block;
    width: 18px;      /* 36pxから18pxに縮小 */
    height: 8px;       /* 16pxから8pxに縮小 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='38' y1='7' x2='2' y2='7'/%3E%3Cpolyline points='10 2 2 7 10 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: all 0.3s ease;
}

/* 右矢印SVG：サイズを縮小 */
.plan-arrow.next::after {
    content: '';
    display: block;
    width: 18px;      /* 36pxから18pxに縮小 */
    height: 8px;       /* 16pxから8pxに縮小 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='7' x2='38' y2='7'/%3E%3Cpolyline points='30 2 38 7 30 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: all 0.3s ease;
}

/* ホバー時のSVG色変更（パスはそのまま） */
.plan-arrow.prev:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' fill='none' stroke='%23a29c97' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='38' y1='7' x2='2' y2='7'/%3E%3Cpolyline points='10 2 2 7 10 12'/%3E%3C/svg%3E");
}

.plan-arrow.next:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' fill='none' stroke='%23a29c97' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='7' x2='38' y2='7'/%3E%3Cpolyline points='30 2 38 7 30 12'/%3E%3C/svg%3E");
}

/* サムネイルの設定 */
.thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 10px;
}

/* サムネイルの設定 */
.thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 10px;
}

.thumbnail {
    flex: 0 0 16.66%; /* 6枚で100%（100 / 6 = 16.66） */
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid transparent;
    overflow: hidden;
}

.thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.thumbnail.active {
    border-color: #000;
}

.thumbnail:hover img {
    transform: scale(1.1);
}

}

/*PC*/
@media print, screen and (min-width:1025px){

.planslide {
    max-width: 1200px;
    width: 95%;
    margin: 0 auto;
    padding: 0 0 20px 0;
    position: relative;
    font-family: Arial, sans-serif;
}

.slider {
    width: 100%;
    position: relative;
}

/* メイン画像の設定 */
.slides img {
    width: 100%;
    height: auto;
    display: block;
}

.slick-slide {
    display: none;
}

.slick-slide.slick-active {
    display: block;
}

/* 矢印コンテナ：位置の微調整 */
.plan-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
    padding: 0 15px;
    box-sizing: border-box;
}

/* 矢印のデザイン（丸型） */
.plan-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #a29c97; /* ベージュグレー */
    color: #fff;               /* 矢印を白に */
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    font-size: 1.5rem;
    user-select: none;
    transition: all 0.3s ease;
    border: none;
}

/* ホバー時：反転（白背景 × #a29c97文字） */
.plan-arrow:hover {
    background-color: #fff;
    color: #a29c97;
    transform: scale(1.1);
}

/* アイコン自体の位置微調整 */
.plan-arrow span {
    display: block;
    line-height: 1;
}
	
/* 矢印のデザイン（丸型） */
.plan-arrow {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    background-color: #a29c97;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    user-select: none;
    transition: all 0.3s ease;
    border: none;
}

.plan-arrow:hover {
    background-color: #fff;
    transform: scale(1.1);
}

/* 左矢印SVG */
.plan-arrow.prev::after {
    content: '';
    display: block;
    width: 36px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='38' y1='7' x2='2' y2='7'/%3E%3Cpolyline points='10 2 2 7 10 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: all 0.3s ease;
}

/* 右矢印SVG */
.plan-arrow.next::after {
    content: '';
    display: block;
    width: 36px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='7' x2='38' y2='7'/%3E%3Cpolyline points='30 2 38 7 30 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: all 0.3s ease;
}

/* ホバー時：矢印色を#a29c97に */
.plan-arrow.prev:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' fill='none' stroke='%23a29c97' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='38' y1='7' x2='2' y2='7'/%3E%3Cpolyline points='10 2 2 7 10 12'/%3E%3C/svg%3E");
}

.plan-arrow.next:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' fill='none' stroke='%23a29c97' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='7' x2='38' y2='7'/%3E%3Cpolyline points='30 2 38 7 30 12'/%3E%3C/svg%3E");
}

/* サムネイルの設定 */
.thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 10px;
}

/* サムネイルの設定 */
.thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 10px;
}

.thumbnail {
    flex: 0 0 16.66%; /* 6枚で100%（100 / 6 = 16.66） */
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid transparent;
    overflow: hidden;
}

.thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.thumbnail.active {
    border-color: #000;
}

.thumbnail:hover img {
    transform: scale(1.1);
}
}