/* 共通調整-------------------------------------------------------------------- */


/* 余白等調整 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 画像サイズ調整 */
img {
    max-width: 100%;
}

/* 動画サイズ調整 */
video {
    max-width: 100%;
}

/* リンクの下線削除 */
/* リンクの文字色変更 */
a {
    text-decoration: none;
    color: #fff;
}

/* リンクポイント時の文字色変更 */
a:hover {
    color: #000;
}

/* リストの「・」削除 */
li {
    list-style-type: none;
}

/* フォントサイズ基準決定 */
/* 行間を広げる */
/* グーグルフォントの指定 */
/* 文字色の調整 */
html {
    font-size: 16px;
    line-height: 1.6;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
    color: #333333;
}

/* 背景色の指定 */
body {
    background-color: #efefef
}


/* ヘッダー------------------------------------------------------------------- */


/* 背景色指定 */
/* 幅拡張 */
/* ヘッダー固定 */
/* 重ね順TOPに */
/* ヘッダー幅調整 */
header {
    background-color: #B4A5A5;
    padding: 15px 0;
    position: fixed;
    z-index: 99;
    width: 100%;
}

/* 要素を横に並び替え */
/* 並び替えた要素をセンターに */
/* 並び替えた要素の間隔を調整 */
ul {
    display: flex;
    justify-content: center;
    gap: 120px;
}



/* ヒーロー------------------------------------------------------------------- */


/* 高さ調整 */
/* 背景画像挿入 */
/* 画像リピートなし */
/* 画像表示調整 */
/* 画像を右下基準で表示 */
/* ヒーローとメイン間の幅を広げる */
.hero {
    height: 650px;
    background-image: url(../images/hero-img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 150px;
}

/* 「PORTFORIO」の垂直位置調整 */
/* 「PORTFORIO」の水平位置調整 */
/* 右寄せに */
/* フォントサイズ調整 */
/* 文字色を白に */
/* 文字に影を */
.hero h1 {
    padding-top: 250px;
    /* padding-right: 120px; */
    text-align: center;
    font-size: 100px;
    color: rgba(255, 255, 255, 0.85);
    /* text-shadow: 1px 2px 3px #808080; */
}

/* 「Kasai Haruka」の水平位置調整 */
/* 右寄せに */
/* フォントサイズ調整 */
/* 文字色を白に */
/* 文字に影を */
.hero h2 {
    /* padding-right: 185px; */
    text-align: center;
    font-size: 40px;
    color: rgba(255, 255, 255, 0.85);
    /* text-shadow: 1px 2px 3px #808080; */
}



/* メイン--------------------------------------------------------------------- */

/* メイン全体の幅決定高さ決定 */
main {
    max-width: 1000px;
    margin: 0 auto;
}

/* 見出しのサイズ決定 */
.title {
    width: 180px;
    margin: 0 auto;
}

/* 見出しを中央に */
/* 見出しの範囲広げる */
/* 見出しに下線 */
/* 見出しと内容の幅を広げる */
/* リンクした時に見出しが見えるように調整 */
.titles {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #dbdbdb;
    margin-bottom: 40px;
    display: block;
    padding-top: 80px;
    margin-top: -80px;
}

.decolation {
    text-align: center;
    margin-bottom: 150px;
}

/* メインPROFILE----------------------------------------------- */

/* プロフ文と写真を横並びに */
/* プロフ文と写真をセンターに */
/* プロフ文と写真の幅を広げる */
/* プロフ分の行間を広げる */
/* プロフ分の余白を広げる */
/* ヒーローとプロフィール間の幅を広げる */
.profile-box {
    display: flex;
    justify-content: center;
    gap: 30px;
    line-height: 1.9;
    padding: 15px 0;
    margin-bottom: 150px;
}

/* プロフ文を垂直センターに */
.profile-text {
    align-self: center;
}

/* 名前とプロフ文の行間を広げる */
.profile-text h3 {
    margin-bottom: 15px;
}

/* プロフ文要素の行間を広げる */
.profile-text p {
    padding: 12px 0;
}

/* プロフ写真を垂直センターに */
.profile-photo {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* プロフ写真のサイズ決定 */
.profile-photo {
    width: 300px;
}


/* メインSKILL------------------------------------------------ */

/* skill-boxを横並びに */
/* 水平方向に等間隔に配置 */
/* スキルとワーク間の幅を広げる */
.skill-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-bottom: 150px;
}

/* skillsのサイズ決定 */
/* 垂直方向に配置 */
/* テキストをセンターに */
/* アイコン間の幅を広げる */
.skills {
    width: 21%;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 20px;
    padding: 10px;
}

/* アイコンのサイズ決定 */
/* アイコンをセンターに */
.skill {
    width: 47%;
    margin: 5px auto 5px auto;
    filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));

}

/* スキルタイトルを太字に */
/* テキスト同士の幅を広げる */
.skill-title {
    font-weight: bold;
    margin: 5px 0 10px 0;
}

/* スキルテキストを左寄せに */
.skill-text {
    text-align: left;
}

/* メインWORK------------------------------------------------- */

/* work-typeをセンターに */
/* work-typeとバナー間の幅を広げる */
.work-type {
    text-align: center;
    margin-bottom: 30px;
}

/* bunner-boxを横並びに */
/* 水平方向に等間隔に配置 */
/* designとmovie間の幅を広げる */
.bunner-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


/* bunnersのサイズ決定 */
/* 垂直方向に配置 */
/* 文字をセンターに */
/* バナー動詞の上下幅を広げる */
/* バナーを見やすいように線で囲む */
.bunners {
    width: 30%;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 50px;
    border: solid 1px #B4A5A5;
    border-radius: 7px;
    padding: 20px;
}

.bunner-box-leather {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 50px;
    border: solid 1px #B4A5A5;
    border-radius: 7px;
    padding: 20px;
}

.Instagram-feed-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 130px;
    border: solid 1px #B4A5A5;
    border-radius: 7px;
    padding: 20px;
}

.bunners-leather,
.Instagram-feed {
    width: 30%;
    display: flex;
    flex-direction: column;
}

.bunners-leather-text,
.Instagram-feed-text {
    text-align: center;
}

/* バナーとバナータイトルの間を広げる */
.bunner,
.feed {
    margin-bottom: 10px;
    filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}

/* バナータイトルを太字に */
/* バナータイトルとソフト名の間を広げる */
.bunner-title {
    font-weight: bold;
    margin-bottom: 3px;
}

/* ソフトタイトルを太字に */
/* フォントサイズ調整 */
/* ソフト名と説明文の間を広げる */
.bunner-soft {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 3px;
}

/* ターゲット層を太字に */
/* フォントサイズ調整 */
/* ターゲット層と説明文の間を広げる */
.bunner-target {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}

/* 説明文を左寄せ */
.bunner-text {
    text-align: left;
}

/* リンクの文字色変更 */
.bunner-text a {
    color: #2d00d1;
}

/* リンクの文字色変更（マウスオーバー時） */
.bunner-text a:hover {
    color: #fff;
}

.Instagram-icon {
    width: 50px;
}

/* チラシを横並びに */
/* 文字をセンターに */
/* バナーとLP間の幅を広げる */
.flyer-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 130px;
}

/* チラシのサムネホバー時に白く */
.flyer-box img:hover {
    opacity: 0.5
}


/* チラシのサイズ決定 */
.flyers {
    width: 47%;
}

.flyer {
    filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}

/* チラシタイトルを太字に */
/* チラシタイトルと説明文の間を広げる */
.flyer-title {
    font-weight: bold;
    margin: 20px 0;
}

/* チラシテキストを左寄せに */
.flyer-text {
    text-align: left;
}


/* movieの横並びに */
/* 文字をセンターに */
/* movieとLP間の幅を広げる */
.movie-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 130px;
}

/* 動画のサイズ決定 */
/* 動画を見やすいように線で囲む */
.movies {
    width: 47%;
    border: solid 1px #B4A5A5;
    border-radius: 7px;
    padding: 20px;
}

.movies video {
    filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}

/* ムービータイトルを太字に */
/* ムービータイトルと説明文の間を広げる */
.movie-title {
    font-weight: bold;
    margin: 20px 0;
}

/* ムービーテキストを左寄せに */
.movie-text {
    text-align: left;
}

/* リンクの文字色変更 */
.movie-text a {
    color: #2d00d1;
}

/* リンクの文字色変更（マウスオーバー時） */
.movie-text a:hover {
    color: #fff;
}

/* LPの横並びに */
/* 文字をセンターに */
/* LPとEC-CUBE間の幅を広げる */
.lp-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 130px;
}

/* LPのサムネホバー時に白く */
.lp-box img:hover {
    opacity: 0.5
}

/* LPのサムネ角丸に */
.lp img {
    border-radius: 10px;
    filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}


/* LPのサイズ決定 */
.lps {
    width: 45%;
}

/* LPタイトルを太字に */
/* LPタイトルと説明文の間を広げる */
.lp-title {
    font-weight: bold;
    margin: 20px 0;
}

/* LPテキストを左寄せに */
.lp-text {
    text-align: left;
}

/* EC-CUBEとWordpress間の幅を広げる */
.ECCUBE-box {
    margin-bottom: 80px;
}

/* EC-CUBEのサムネホバー時に白く */
.ECCUBE-box img:hover {
    opacity: 0.5
}

/* EC-CUBEのサムネ角丸に */
.ECCUBE img {
    border-radius: 10px;
    filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}

/* EC-CUBEタイトルを太字に */
/* EC-CUBEタイトルと説明文の間を広げる */
.ECCUBE-title01 {
    font-weight: bold;
    margin: 20px 0;
    text-align: center;
}

/* EC-CUBEログイン情報を見やすく */
.ECCUBE-title02 {
    border-bottom: solid 2px #dbdbdb;
    margin-bottom: 10px;
}

/* 担当箇所を少し右に */
.ECCUBE-text {
    padding: 20px;
}

/* WordPressとイラスト間の幅を広げる */
.wordpress-box {
    margin-bottom: 130px;
}

/* WordPressのサムネホバー時に白く */
.wordpress-box img:hover {
    opacity: 0.5
}

/* WordPressのサムネ角丸に */
.wordpress img {
    border-radius: 10px;
    filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}

/* WordPressタイトルを太字に */
/* WordPressタイトルと説明文の間を広げる */
.wordpress-title01 {
    font-weight: bold;
    margin: 20px 0;
    text-align: center;
}

/* WordPressログイン情報を見やすく */
.wordpress-title02 {
    border-bottom: solid 2px #dbdbdb;
    margin-bottom: 10px;
}

/* イラストとフッター間の幅を広げる */
.illust-box {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 40px;
    border-bottom: solid 2px #dbdbdb;
    margin-bottom: 40px;
}

/* リンクの文字色変更 */
.illust-text a {
    color: #2d00d1;
}


/* イラストのサイズ調整 */
.illusts {
    width: 30%;
    border: solid 1px #B4A5A5;
    border-radius: 7px;
    padding: 20px;
}

.illust {
    filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}


.illust-text {
    margin-bottom: 100px;
}


/* フッター------------------------------------------------------------------ */

/* ロゴのサイズ決定 */
.pagetop {
    width: 250px;
    text-align: center;
    margin: 0 auto 50px auto;
}

/* 背景色指定 */
/* 幅拡張 */
/* 文字色変更 */
/* テキストをセンターに */
footer {
    background-color: #B4A5A5;
    padding: 15px 0;
    color: #fff;
    text-align: center;
}



/* モバイル対応------------------------------------------------------------------ */

@media (max-width: 767px) {

    /* リンクホバー打ち消し */
    a:hover {
        color: #fff;
    }

    /* ulの間隔を調整 */
    ul {
        gap: 50px;
    }

    /* メインに余白作成 */
    main {
        padding: 0 4%;
    }

    /* 画像をセンターに表示 */
    .hero {
        background-position: center;
    }

    /* 「PORTFORIO」の垂直位置調整 */
    /* 「PORTFORIO」の水平位置調整 */
    /* センターに */
    /* フォントサイズ調整 */
    .hero h1 {
        padding: 280px 30px 0 30px;
        text-align: center;
        font-size: 32px;
    }

    /* 「Kasai Haruka」の水平位置調整 */
    /* センターに */
    /* フォントサイズ調整 */
    .hero h2 {
        padding: 0 30px;
        text-align: center;
        font-size: 27px;
    }

    /* プロフ文と写真を縦並びに */
    /* プロフ文と写真の幅を調整 */
    .profile-box {
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }

    /* プロフ文と写真の順番を入れ替え */
    /* プロフ分を中央寄せに */
    .profile-text {
        order: 1;
        text-align: center;
    }

    /* プロフ文と写真の順番を入れ替え */
    /* 写真の位置調整、プロフ分との幅を広げる */
    .profile-photo {
        order: 0;
        margin: 0 auto 20px auto;
    }

    /* 改行brを無効に */
    br {
        display: none;
    }

    /* 行間を広げる */
    html {
        line-height: 1.8;
    }

    /* アイコン間の幅を広げる（横） */
    .skill-box {
        justify-content: space-between;
    }

    /* アイコンが2つ並びになるように調整 */
    /* アイコン間の幅を広げる（縦） */
    .skills {
        width: 47%;
        padding: 0px;
        margin-bottom: 50px;
    }

    /* work-typeをセンターに */
    /* work-typeとバナー間の幅を広げる */
    .work-type {
        margin-bottom: 40px;
    }

    /* bunnerのサイズ決定 */
    .bunners {
        width: 92%;
    }

    .bunner-box-leather {
        padding: 20px 10px;
        margin: 0 13px;
        margin-bottom: 50px;
    }

    .Instagram-feed-box {
        padding: 20px 10px;
        margin: 0 13px;
        margin-bottom: 130px;
    }

    .bunners-leather,
    .Instagram-feed {
        width: 92%;
    }

    /* LPのサイズ決定 */
    .flyers {
        width: 90%;
        margin: 0 auto;
    }

    .flyer-title {
        margin: 10px 0;
    }

    /* LP同士の間隔調整 */
    .flyer-text {
        margin-bottom: 50px;
    }

    /* movieのサイズ決定 */
    .movies {
        width: 90%;
        margin: 0 auto 20px auto;
    }

    .movie-title {
        margin: 10px 0;
    }

    /* movie同士の間隔調整 */
    .movie-text {
        margin-bottom: 50px;
    }

    /* LPのサイズ決定 */
    .lps {
        width: 90%;
        margin: 0 auto;
    }

    .lp-title {
        margin: 10px 0;
    }

    /* LP同士の間隔調整 */
    .lp-text {
        margin-bottom: 50px;
    }

    /* フッターの文字を1行に収まるように調整 */
    .footer-text {
        font-size: 11px;
    }

    .illust-box {
        padding: 20px;
    }

    .illusts {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 20px;
    }


}