/* Gallery共通 */

.text_mg {
    margin-top: 10px;
}


/* メインビジュアル */

.mv_container {
    position: relative;
}

.mv_img {
    min-height: 150px;
    max-height: 300px;
    width: 100%;
    object-fit: cover;
}

.mv_text {
    position: absolute;
    top: 39%;
    right: clamp(16px, 6vw, 12.5vw);
    color: #f4efeb;
    font-size: clamp(26px, 6vw, 67px);
}

/* 内部リンク */
.link_container {
    padding-top: 50px;
}

.link_btn {
    position: relative;
    display: inline-block;
    width: clamp(112px, 28vw, 300px);
    height: clamp(30px, 7vw, 80px);
    background-size: cover;
    background-repeat: no-repeat;
    color: #f4efeb;
    font-weight: 700;
    font-size: clamp(14px, 2.5vw, 30px);
    transition: .8s;
}

.link_btn:hover {
    opacity: .5;
}

.link_btn::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bg_fish {
    background-image: url(../../img/gallery/fish_button.jpg);
}

.bg_fish::before {
    content: '熱帯魚';
}

.bg_plants {
    background-image: url(../../img/gallery/plants_button.jpg);
}

.bg_plants::before {
    content: '水草';
}

.bg_aquarium {
    background-image: url(../../img/gallery/Aquarium_button.jpg);
}

.bg_aquarium::before {
    content: '水草水槽';
}

.link_btn::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 7%;
    border-top: clamp(6.9px, 1.2vw, 17.3px) solid #f4efeb;
    border-right: clamp(4px, .8vw, 10px) solid transparent;
    border-left: clamp(4px, .8vw, 10px) solid transparent;
    transform: translateY(-50%);
}

/* 熱帯魚 */
.fish_container {
    padding-top: 100px;
}

.fish_inner {
    display: grid;
    gap: 30px 20px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: repeat(8, 1fr);
}

.fish_area {
    width: 100%;
}

.fish_name {
    width: 61%;
    font-size: 14px;
}

.text_mg {
    align-items: center;
}

.fish_category {
    padding: 7px 10px;
    border-radius: 50px;
    color: #fff;
    font-weight: 500;
    font-size: 11px;
}

.tetra {
    background-color: #72b4bd;
}

.corydoras {
    background-color: #bd7272;
}

.betta_gourami {
    background-color: #7872bd;
}

.carp {
    background-color: #bdba72;
}

.others {
    background-color: #72bd99;
}

.Shrimp {
    background-color: #bd729a;
}

/* 水草 */
.plants_inner {
    display: grid;
    gap: 30px 20px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: repeat(3, 1fr);
}

.plants_area {
    width: 100%;
}

.plants_name {
    font-size: 14px;
}

/* 水草水槽 */
.aquarium_inner {
    display: grid;
    gap: min(2.7vw, 40px);
    margin: 40px auto 0;
    max-width: 1360px;
    width: 97%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.aquarium_area {
    width: 100%;
}

.service_link {
    margin: 80px auto 0;
}

.service_link_text {
    text-align: center;
    font-size: clamp(18px, 2.9vw, 24px);
}

.service_link_btn {
    position: relative;
    display: inline-block;
    padding: 18px 70px;
    border-radius: 50px;
    background-color: #64b47a;
    color: #f4efeb;
    font-size: clamp(15px, 2.41vw, 24px);
    transition: .8s;
}

.service_link_btn:hover {
    background-color: #72b4bd;
}

.service_link_btn::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 24px;
    display: inline-block;
    width: 20px;
    height: 6px;
    border-right: 1.3px solid #f4efeb;
    border-bottom: 1.3px solid #f4efeb;
    transition: .8s;
    transform: skew(45deg) translateY(-50%);
}

.service_link_btn:hover::after {
    right: 15px;
    width: 30px;
}

/* レスポンシブ 1000px */

@media (max-width: 1000px) {
    .mv {
        margin-top: 120px;
    }
}

/* レスポンシブ 632px */

@media (max-width: 632px) {

    /* 熱帯魚と水草 */
    .fish_inner.wraper_1400,
    .plants_inner.wraper_1400 {
        width: 81%;
    }

    /* 水草水槽 */
    .aquarium_inner {
        width: 81%;
        grid-template-columns: repeat(1, 1fr);
    }
}

/* レスポンシブ 620px */

@media (max-width: 620px) {
    /* 余白 */

    .fish_container {
        padding-top: 50px;
    }

    .pd_top_150 {
        padding-top: 100px;
    }

    /* メインビジュアル */

    .mv {
        margin-top: 70px;
    }

    .service_link_btn {
        padding: 20px 63px;
    }

    /* 水草水槽 */

    .service_link {
        margin: 40px auto 0;
    }
}

/* レスポンシブ 550px */

@media (max-width: 550px) {
    .service_link_text {
        margin: 0 auto;
        width: 252px;
        line-height: 150%;
    }
}


/* レスポンシブ 428px */

@media (max-width: 428px) {
    .mv_text {
        right: 9%;
    }
}