/*
Theme Name: Go Child
Template: go
Version: 1.0
*/

/* =========================
   Main Visual
========================= */


.main-visual {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    padding: 0;
}

.wp-block-group.main-visual > .wp-block-group__inner-container {
    max-width: none;
}

.portfolio-mv {
    max-width: none;
    margin: 0;
}

.portfolio-mv h2 {
    margin-bottom: 48px;
}

@media screen and (max-width: 600px) {
	 .portfolio-mv {
        min-height: 520px !important;
    }

    .portfolio-mv .wp-block-cover__image-background {
        background-attachment: scroll !important;
    }
	 
    .portfolio-mv h2 {
        font-size: 1.7rem;
	}

}


/* =========================
   Skills
========================= */

.skills h3 {
    margin-bottom: 10px;
}

.skill-card {
    height: 100%;
}





/* =========================
   Works
========================= */

/* Works見出し */
.works h3 {
    margin-bottom: 10px;
}


/* -------------------------
   カード全体
------------------------- */

.work-card {
    position: relative;
    height: 100%;
    transition: transform 0.3s ease;
	box-shadow: 3px 3px 21px -9px var(--wp--preset--color--primary);
}

.work-card:hover {
    transform: translateY(-4px);
}


/* -------------------------
   カード画像
------------------------- */

.work-card .wp-block-image {
    margin-bottom: 0;
}


/* -------------------------
   カード本文
------------------------- */

/*
 * ブロックエディタで
 * work-card-body を付けたグループ
 */
.work-card-body > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* WordPress標準のmarginをリセット */
.work-card-body > .wp-block-group__inner-container > * {
    margin-top: 0;
    margin-bottom: 0;
}


/* -------------------------
   ↗リンク
------------------------- */

/*
 * この段落自体は表示位置に使わない。
 * 中のaタグをカード全面リンクとして利用する。
 */
.work-card-arrow {
    margin: 0;
}

/* 実際の「↗」文字は非表示 */
.work-card-arrow a {
    font-size: 0;
}

/*
 * a::afterをカード全面に広げる
 * .work-card が position:relative なので
 * カード全体が基準になる
 */
.work-card-arrow a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
}


/* -------------------------
   右下の↗（見た目）
------------------------- */

/*
 * クリック用リンクとは別に、
 * カード自身の疑似要素で↗を表示
 */
.work-card::after {
    content: "↗";
    position: absolute;
    right: 16px;
    bottom: 16px;
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}



@media screen and (max-width: 600px) {
    .post__title {
        font-size: 8vw;
    }
}