@charset "UTF-8";

html {
    /* フォントサイズ 100% */
    font-size: 100%;
}
body {
    /* フォントカラー #2d2d2d */
    color: #2d2d2d;
    /* フォント Crimson Text', serif */
    font-family: 'Crimson Text', serif;
}
img {
    /* 最大幅100% */
    max-width: 100%;
    /* インライン要素の縦位置の指定。下に */
    vertical-align: bottom;
}
ul {
    /* スタイルなし */
    list-style: none;
}
a {
    /* 色を#2d2d2d */
    color: #2d2d2d;
    /* スタイルなし */
    text-decoration: none;
}

/* メインとフッターのコンテンツ幅設定 */
.container {
    /* 最大幅1000px */
    max-width: 1000px;
    /* 中央揃え */
    margin: 0 auto;
    /* 上余白なし、左右18 */
    padding: 0 18px;
}


/* ===========================
メインビジュアル　画面幅の90％
============================*/
#main-visual {
    /* 画面幅の90％ */
    width: 90vw;
    /* 上余白4％、左右センタリング、下なし */
    margin: 4% auto 0 auto;
}

/* ===========================
ヘッダー
============================*/
/* ヘッダー全体 */
#header {
    /* 画面幅90％ */
    width: 90vw;
    /* ロゴとナビの横並び */
    display: flex;
    /* flex-box内の縦のセンタリング */
    align-items: center;
    /* 余白、上下32、左右なし */
    padding: 32px 0;
    /* 左右センタリング */
    margin: 0 auto 30px auto;
}

/* ヘッダーロゴ */
.site-ttl {
    width: 110px;
    line-height: 1px;
    margin-right: 50px;
}

/* ナビ */
#header ul {
    /* 横並び */
    display: flex;
}
#header li {
    /* 文字サイズ 0.875rem */
    font-size: 0.875rem;
    /* 右余白を30 */
    margin-right: 30px;
}
#header li:last-child {
    /* 最後のliには右余白を設定しない */
    margin-right: 0;
}


/* ===========================
セクション部分
============================*/
/* セクション単位の設定 */
.content {
    /* 画像部分とテキスト部分横並び */
    display: flex;
    /* 縦方向センタリング */
    align-items: center;
    /* セクション下の余白60 */
    margin-bottom: 60px;
}
/* セクション内の画像 */
.content .img {
    /* 幅50％ */
    width: 50%;
}
/* セクション内のテキスト */
.content .text {
    /* 幅50％ */
    width: 50%;
    /* 上下余白なし、左右7％ */
    padding: 0 7%;
}
/* セクションのタイトル */
.section-ttl {
    /* フォントサイズ1.5rem */
    font-size: 1.5rem;
    /* フォント太さはノーマル */
    font-weight: normal;
    /* 下余白4 */
    margin-bottom: 4px;
}

/* セクションタイトル下の第2タイトル部分*/
/* spanタグを使用し、
「display: inline-block;」を設定することで、
改行されてmargin-bottomが使用できるようにする。
pタグを使用してもよいが、文章ではないため今回はspanを使用*/
.section-ttl-en {
    /* インライン要素→インラインブロック要素へ */
    display: inline-block;
    /* 舌余白25。インラインブロック要素なので上下margin指定可能。 */
    margin-bottom: 25px;
}

/* ===========================
フッター
============================*/
#footer {
    /* ロゴとナビの横並び */
    display: flex;
    /* 横位置。先頭は左端、最後は右端、その他は均等 */
    justify-content: space-between;
    /* フォントサイズ 0.875rem */
    font-size: 0.875rem;
    /* 余白上下20、左右なし */
    padding: 20px 0;
}
#footer .logo {
    /* 幅110 */
    width: 110px;
}

/* ===========================
レスポンシブ
============================*/
@media screen and (max-width: 767px) {
    .section-ttl {
        /* フォント 1.25rem */
        font-size: 1.25rem;
    }

    /*========================
     レス・メインビジュアル
    ======================= */
    #main-visual {
        /* 枠をいっぱいに取る？ */
        width: 100%;
        /* 余白なし */
        margin: 0;
    }
    #main-visual img {
        /* 幅は100% */
        width: 100%;
        /* 高さを50vh指定で画面高さ基準とする */
        height: 50vh;
        /* 拡大縮小時にアスペクト比合わない場合は切り取り */
        object-fit: cover;
    }

    /*========================
     レス・セクション
    ======================= */
    .content {
        /* 縦並びに */
        flex-direction: column;
    }
    #work {
        /*縦並びの逆順に */
        flex-direction: column-reverse;
    }
    .content .img {
        /* 当初幅50%→100% */
        width: 100%;
        /* 下余白10へ */
        margin-bottom: 10px;
    }
    .content .text {
        width: 100%;
        padding: 0;
    }
}