@charset "UTF-8";

/*
    Adobe Skills ページ専用
    カンプ: Figma「福井　ポートフォリオ」node-id 254-66（フレーム幅 1440px）
    カンプ上の主な基準位置
      ・見出し帯 … 幅 600px（x 420〜1020）中央
      ・before / after の写真 … 272px + 16px + 272px = 560px 中央
      ・大きい図版（Photoshop 画面 / LP） … 幅 1002px 中央
    数値は px 直値で書く（この案件では vw を使わない）。
*/


/* ===== ヘッダー =====
   カンプにナビは無く「KISAKO FUKUI / Adobe Skills」の2行だけ。
   base.css の .header は position: fixed なので、このページだけ静的に戻す。
   （5100px 近い縦長のページなので、追従すると本文にずっと重なるため） */

.header--adobe {
    position: static;
    padding-top: 93px;

    pointer-events: auto;
}

.header--adobe .header__inner {
    display: block;
}

.header--adobe .header__logo {
    line-height: 1.45;
    color: #ec5a11;
}

.header__page {
    font-size: 35px;
    font-weight: 700;
    line-height: 1.45;
    color: #252525;
}


/* ===== ツール別のセクション（Photoshop / Illustrator） ===== */

.tool--photoshop {
    padding-top: 131px;
}

.tool--illustrator {
    padding-top: 106px;
    padding-bottom: 307px;
}

.tool__title {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.167;
    text-align: center;
}

.tool--photoshop .tool__title {
    color: #168ae0;
}

.tool--illustrator .tool__title {
    color: #ff9a00;
}


/* ===== スキル1項目（濃色の帯 + 説明文 + 図版） ===== */

/* 帯は Photoshop が #001e36、Illustrator が #330000 */
.skill__head {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    height: 59px;
    margin-inline: auto;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    text-align: center;
}

.tool--photoshop .skill__head {
    background-color: #001e36;
}

.tool--illustrator .skill__head {
    background-color: #330000;
}

.skill__body {
    margin-top: 20px;
    margin-inline: auto;
}

.skill__text {
    font-size: 16px;
    line-height: 1.45;
    color: #111;
}

.skill__text--bold {
    font-weight: 700;
    color: #000;
}

.skill__text + .skill__text {
    margin-top: 5px;
}

/* 注釈（※比較写真掲載の許可〜） */
.skill__notes {
    margin-top: 15px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    color: #a0a0a0;
    text-align: center;
}

/* 説明文の折り返し位置はカンプに合わせて項目ごとに幅を決める */
.skill--bg .skill__body {
    width: fit-content;
}

.skill--bg .skill__text {
    color: #272727;
}

.skill--ai .skill__body {
    width: 525px;
}

.skill--ai .skill__text + .skill__text {
    margin-top: 10px;
}

.skill--retouch .skill__body {
    width: 470px;
}

.skill--basic .skill__body {
    width: 600px;
    margin-top: 25px;
}

/* 3行を続けて読ませるので行間だけで並べる（カンプどおり） */
.skill--basic .skill__text + .skill__text {
    margin-top: 0;
}

.skill--link .skill__body,
.skill--paper .skill__body,
.skill--appearance .skill__body {
    margin-top: 24px;
}

.skill--link .skill__body {
    width: 460px;
}

.skill--paper .skill__body,
.skill--appearance .skill__body {
    width: 446px;
}

/* 項目どうしの間隔はカンプの実測値。規則的ではないので個別に指定する */
.skill--bg {
    margin-top: 52px;
}

.skill--ai {
    margin-top: 83px;
}

.skill--retouch {
    margin-top: 50px;
}

.skill--basic {
    margin-top: 110px;
}

.skill--link {
    margin-top: 35px;
}

.skill--paper {
    margin-top: 33px;
}

.skill--appearance {
    margin-top: 36px;
}


/* ===== before / after の比較写真 ===== */

.compare {
    display: flex;
    gap: 16px;
    width: 560px;
    margin-top: 25px;
    margin-inline: auto;
}

/* 背景合成は2組を縦に並べる。2組目にラベルは無い */
.compare + .compare {
    margin-top: 30px;
}

.compare__item {
    width: 272px;
}

.compare__label {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    color: #001e36;
    text-align: center;
}

.compare__img {
    width: 100%;
}


/* ===== 制作例（Photoshop の作業画面 / 紙デザイン） ===== */

.example--workspace {
    margin-top: 67px;
}

.example--paper {
    margin-top: 116px;
}

.example__label {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    color: #000;
    text-align: center;
}

.example--paper .example__label {
    margin-bottom: 22px;
    color: #330000;
}

.example__figure {
    width: 1002px;
    margin-inline: auto;
}

.example__img {
    width: 100%;
}

/* 手動加工例の録画動画。poster（2004×1128）と動画（1920×1080）の比率差で
   読み込み前後に高さが変わらないよう、16:9 に固定する */
.example__video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.example__list {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

.example__item--poster {
    width: 222px;
}

.example__item--card {
    width: 352px;
}


/* ===== LP の図版 + 矢印つきの解説 =====
   PC は矢印が画像の該当箇所を指すので、図版を基準に絶対配置する。
   数値はカンプの矢印のバウンディングボックス（下記）から出した中心位置。
     短い矢印 … 図版左上から x 238〜277 / y 499〜559
     長い矢印 … 図版左上から x 608〜740 / y 372〜559 */

.point {
    position: relative;
    width: 1002px;
    margin-top: 35px;
    margin-inline: auto;

    /* 解説文を絶対配置している分の高さを確保する */
    padding-bottom: 108px;
}

.point__img {
    width: 100%;
}

.point__arrow {
    position: absolute;
    transform-origin: center;
}

.point__arrow--short {
    top: 510.5px;
    left: 220.5px;
    width: 74px;
    height: 37px;
    transform: rotate(-56.98deg);
}

.point__arrow--long {
    top: 447px;
    left: 558.5px;
    width: 231px;
    height: 37px;
    transform: rotate(-125.22deg);
}

.point__text {
    position: absolute;
    top: 573px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    color: #001e36;
}

.point__text--left {
    left: 75px;
    width: 175px;
}

.point__text--right {
    left: 723px;
    width: 169px;
    font-weight: 600;
}


/* ===== SP ===== */

@media (max-width: 768px) {

    /* 幅の固定をやめ、左右の余白はセクション側で持つ */
    .tool {
        padding-inline: 7%;
    }

    .header--adobe {
        padding-top: 40px;
    }

    .header--adobe .header__logo,
    .header__page {
        font-size: 26px;
    }

    .tool--photoshop {
        padding-top: 60px;
    }

    .tool--illustrator {
        padding-top: 70px;
        padding-bottom: 80px;
    }

    .tool__title {
        font-size: 28px;
    }

    .skill__head {
        width: auto;
        height: auto;
        padding: 12px 16px;
        font-size: 16px;
    }

    .skill__text {
        font-size: 14px;
    }

    .skill__notes {
        font-size: 12px;
    }

    /* PC で決めた折り返し用の幅はすべて解除する */
    .skill--bg .skill__body,
    .skill--ai .skill__body,
    .skill--retouch .skill__body,
    .skill--basic .skill__body,
    .skill--link .skill__body,
    .skill--paper .skill__body,
    .skill--appearance .skill__body {
        width: auto;
        margin-top: 16px;
    }

    .skill--bg {
        margin-top: 32px;
    }

    .skill--ai {
        margin-top: 50px;
    }

    .skill--retouch {
        margin-top: 40px;
    }

    .skill--basic {
        margin-top: 60px;
    }

    .skill--link {
        margin-top: 24px;
    }

    .skill--paper,
    .skill--appearance {
        margin-top: 28px;
    }

    .compare {
        gap: 10px;
        width: auto;
        margin-top: 20px;
    }

    .compare + .compare {
        margin-top: 20px;
    }

    .compare__item {
        width: auto;
        flex: 1;
        min-width: 0;
    }

    .compare__label {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .example--workspace {
        margin-top: 40px;
    }

    .example--paper {
        margin-top: 60px;
    }

    .example__label {
        font-size: 14px;
    }

    .example--paper .example__label {
        margin-bottom: 16px;
    }

    .example__figure {
        width: auto;
    }

    .example__list {
        gap: 10px;
    }

    .example__item--poster {
        width: 35.5%;
    }

    .example__item--card {
        width: 56.3%;
    }

    .point {
        width: auto;
        margin-top: 24px;
        padding-bottom: 0;
    }

    /* SP は画像が縮んで矢印の指し先がずれるので、矢印は出さず解説だけ下に並べる */
    .point__arrow {
        display: none;
    }

    .point__body {
        display: flex;
        gap: 16px;
        margin-top: 16px;
    }

    .point__text {
        position: static;
        width: auto;
        flex: 1;
        min-width: 0;
        font-size: 13px;
    }
}