@charset "UTF-8";

/* 基本設定 */

* {
    margin: 0;
}

img {
    width: 100%;
    height: auto;
}


/* ページ全体の設定 */
html {
    font-size: 62.5%;
}

body {
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    grid-template-rows:
        [head] auto [menu] auto [title] auto [sub] auto [recent] auto [foot] 100px;
    grid-row-gap: 20px;
    row-gap: 20px;
    /* font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; */
    /* font-family: 'Sawarabi Mincho', sans-serif; */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

/* パーツの配置 */
body>* {
    grid-column: 2 / -2;
}

/* ヘッダー */
header {
    grid-row: head;
    justify-self: center;
    align-self: center;
    color: #8ca3ad;
}

/* ナビゲーションメニュー */
nav {
    grid-row: menu;
    justify-self: center;
    align-self: end;
    font-family: 'Kite One', sans-serif;
    /* font-family: 'Charmonman', cursive; */
    /* font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; */
}

nav ul {
    list-style-type: none;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    /* grid-column-gap: 20px;
    column-gap: 20px; */
}

nav li {
    padding: 0px 30px 0px 30px;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
}

li+li {
    border-left: 0;
    border-right: 1px solid #333;
}

nav a {
    color: #8ca3ad;
    text-decoration: none;
    font-size: 14px;
    /* font-weight: bold; */
}


/* li+li {
    border-left: 0;
    border-right: 1px solid #333;
} */

nav a:hover {
    color: #705c67;
}

a:hover {
    color: #f786c2;
}

/* ヒーローイメージ */
figure.hero {
    grid-column: 1 / -1;
    grid-row: title / span 2;
}

figure.hero img {
    height: 547px;
    object-fit: cover;
    vertical-align: bottom;
    filter: brightness(90%);
    z-index: -1;
    position: relative;
    /* Edge 用の設定 */
}

h1 {
    grid-column: 1 / -1;
    justify-self: center;
    align-self: end;
    font-size: 1.6rem;
    font-weight: normal;
    color: #637177;
}

h2 {
    color: #637177;
    font-size: 1.4rem;
    font-weight: normal;
}


/* TOPページロゴの設定 */
.top_logo {
    width: 200px;
    padding: 10px 0 0 0;
    margin: auto;
    margin-top: 50px;
}

.logo_copy {
    font-size: 1.6rem;
    font-weight: normal;
}

/* タイトル */
#top_h1 {
    width: 300px;
    justify-self: center;
    text-align: center;
    align-self: center;
    grid-row: title;
    color: #fefefe;
    font-size: 12px;
    font-weight: normal;
    font-family: 'Charmonman', cursive;
    /* font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; */
    line-height: 1.2;
    text-shadow: 0 0 5px #444444;
    padding: 70px 0 0 0;
}

/* サブタイル */
p {
    grid-row: sub;
    text-align: center;
    align-self: end;
    color: #637177;
    /* padding: 0 0 20px 0; */
}

/* p a {
    color: #fefefe;
    text-decoration: none;
    border: solid 1px #fefefe;
    padding: 10px 10px;
    display: inline-block;
    margin-top: 10px;
    border-radius: 10px;
    background-color: rgba(85, 93, 107, 0.4);
} */

/* p a:hover {
    background-color: #2fb497;
} */


/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#cardlayout-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 2em auto;
    max-width: 960px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

/* リンクテキストの下線を非表示 */
a.card-link {
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    margin: auto;
    padding: 1.2em;
}

/* カードレイアウト内の画像を幅いっぱいに表示 */
#cardlayout-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.card-figure {
    margin: 0;
    padding: 0;
}

/* カードレイアウトのタイトル部分 */
.card-title {
    margin: 0.6em 0 0;
    color: #333;
    text-align: center;
    font-size: 1.8em;
}

/* カードレイアウトの説明文部分 */
.card-text-tax {
    margin: 0;
    padding: 1em;
    color: #818181;
}

/* カードレイアウトを1カラムで配置 */
.card-list {
    margin: 0.5em auto;
    padding: 0;
    width: 96%;
    background: #fefefe;
}

/* 画面幅768px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 768px) {
    .card-list {
        width: calc(96% / 2);
        /* 96%幅を2で割るという指定 */
    }
}

/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 992px) {
    .card-list {
        width: calc(96% / 3);
        /* 96%幅を3で割るという指定 */
    }

    /* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
    #cardlayout-wrap::after {
        content: "";
        display: block;
        width: calc(96% / 3);
    }
}

.colorfilter-base {
    /* background-color: blue; */
    /* カラーフィルタ効果の色を指定 */
    /* display: inline-block; */
    /* (任意：インラインブロック化したい場合) */
}

.colorfilter-image {
    /* opacity: 0.6;     */
    /* カラーフィルタ効果の度合いを指定(※) */
    /* display: block; */
    backdrop-filter: blur(3px);
}




p img {
    width: 250px;
    opacity: 0.8;
    /* vertical-align: baseline; */
}


p img {
    width: 250px;
    /* vertical-align: baseline; */
}

.illustrator_icon {
    width: 18px;
}

.php_icon {
    width: 25px;
}

.card_box {
    margin: 20px 20px 50px 10px;
}

.logo {
    box-shadow: 1px 1px 2px gray;
    width: 150px;
    margin: 30px 25px 50px 25px;
}

.todolist {
    box-shadow: 1px 1px 2px gray;
    margin: 10px 10px 50px 10px;
}

.works_font {
    font-size: 1rem;
}

.ChromeExpansion {
    box-shadow: 1px 1px 2px gray;
}

#works_h1 {
    font-size: 14px;
}

/* .illustrator_icon {
    width: 18px;
}

.php_icon {
    width: 25px;
}

.work_img {
    margin: 0 0 20px 0;
} */

/* 記事一覧 */
section {
    grid-row: recent;
    display: grid;
    grid-column: 1 / -1;
    justify-self: center;
    align-self: center;
    grid-gap: 20px;
    gap: 20px;
}

section a {
    color: #637177;
    text-decoration: none;
}

section a:hover {
    text-decoration: none;
}

section h2 {
    grid-column: 1 / -1;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    padding: 20px 0 10px 0;

}

article {
    justify-self: center;
    align-self: center;
    text-align: center;
    font-size: 14px;
    margin: 20px;
}

article img {
    width: 300px;
}

#about {
    margin-top: 50px;
}

/* ページTOPに戻る */
#page_top {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 30px;
    bottom: 50px;
    /* background: #65c4d9; */
    background: #8ca3ad;
    opacity: 0.6;
    border-radius: 50%;
}

#page_top a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
}

#page_top a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f102';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -5px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

/* ボタン */
.button {
    display: inline-block;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-size: 1.2rem;
    height: 32px;
    line-height: 32px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    width: 100px;
    border-radius: 5px;
}

.button::before,
.button::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    box-sizing: border-box;
    transition: all 0.3s ease 0s;
}

.contents .button {
    margin-top: 24px;
}

.button01 {
    background: #fff;
    border: 1px solid #8ca3ad;
    color: #8ca3ad;
}

.button01:hover {
    background: #8ca3ad;
    background-color: #8ca3ad;
    color: #fff;
}

/* フッター */
footer {
    grid-row: foot;
    justify-self: center;
    align-self: center;
    font-size: 13px;
}

body::after {
    content: "";
    background-color: rgba(245, 250, 250, 0.4);
    grid-column: 1 / -1;
    grid-row: foot;
    z-index: -1;
}

/* ===== PC版の設定 ===== */
@media (min-width: 768px) {

    /* PC版：ページ全体の設定 */
    body {
        grid-template-columns: 0.2fr repeat(6, 1fr) 0.2fr;
        grid-column-gap: 5%;
        column-gap: 5%;
        grid-template-rows:
            [head] auto [menu] auto [title sub] auto [recent] auto [foot] 100px;
    }

    /* PC版：ヒーローイメージ */
    figure.hero {
        grid-row: title;
        margin-top: -20px;
    }

    /* PC版：タイトル */
    h1 {
        grid-column: 1 / -1;
        justify-self: center;
        align-self: end;
    }

    /* PC版：サブタイトル */
    p {
        grid-column: 1 / -1;
        align-self: end;
        padding: 10px;
    }

    /* PC版：ヘッダー */
    header {
        grid-row: head;
        justify-self: center;
    }

    /* PC版：ナビゲーションメニュー */
    nav {
        grid-row: menu;
        justify-self: center;
        padding: 0 0 20px 0;
    }

    /* PC版：記事一覧 */
    section {
        grid-template-columns: repeat(1, 1fr);
    }
}

.yoko {
    max-width: 1080px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    height: 100%;  
}


/* ===== PC版の設定ここまで ===== */