@charset "utf-8";

.image-container {
    width: 100%;
    max-width: 860px;
    height: 120px;
    overflow: hidden;
    cursor: pointer;
    transition: height 0.3s ease;
    position: relative;
}

.image-container.expanded {
    height: 220px;
}

.image-container img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: -30.5px;
    transition: top 0.3s ease;
}

.image-container.expanded img {
    top: 0;
}

/* Icon */
.image-container::after {
    content: "⛶";
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255,255,255,0.8); 
    color: #000; 
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: opacity 0.3s ease;
}

/* Icon none */
.image-container.expanded::after {
    opacity: 0;
}

/* Hover */
.image-container:hover::after {
 background: rgba(255,255,255,0.9);
}




/* Text&Photo wrap around */
.image-container.float-right {
    float: right;
    margin: 0 0 1rem 1rem;
    max-width: 20%;         
    height: 370px;          
    overflow: hidden;
    cursor: pointer;
    transition: max-width 0.3s ease, height 0.3s ease;  /* max-widthも追加 */
    position: relative;
}

.image-container.float-right.expanded {
    max-width: 30%;
    height: 420px;          
}

.image-container.float-right img {
    width: 250px;           /* 固定幅に変更 */
    height: 420px;           
    object-fit: cover;
    object-position: top right;
    position: absolute;
    top: 0;
    right: 0;
    transition: none;
}

.clear {
clear: both;
}


/*Grid-Layout*/
.grid-container {
    display: grid;
    grid-template-columns: 1fr 35%;
    gap: 1rem;
    align-items: start;
}

.grid-text {
    grid-column: 1;
}

.grid-image {
    grid-column: 2;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
.image-container img {
    top: -10.5px;
}
/* Text&Photo wrap around */
.image-container.float-right {
    max-width: 30%;         
    height: 400px;        
}

.image-container.float-right.expanded {
    max-width: 40%;
    height: 550px;          
}

.image-container.float-right img {
    width: 225px;
    height: 495px;
}
}