@charset "UTF-8";

/*CSSで Noto Sans JP を適用するための基本ルール。*/
.noto-sans-jp-<uniquifier > {
    /*ここに具体的な値を自分で入れてね*/
    font-family:
        "Noto Sans JP", sans-serif; /*読み込めなかった場合は汎用の `sans-serif`を使う*/
    font-optical-sizing: auto; /*フォントのサイズに応じて文字の太さやバランスを自動的に微調整*/
    font-weight: <weight>; /*ここに具体的な値を自分で入れてね*/
    font-style: normal;
}

html * {
    box-sizing: border-box;
}

/*すべてのWebページに適用される*/
body {
    background-color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto; /* 必要であれば追加 */
    font-weight: 100; /* Bold */
    font-size: 16px;
    text-align: center;
}

/*見出しのフォント*/
h1 {
    font-family: "Noto Sans JP", sans-serif; /* bodyで指定済みの場合は省略可 */
    font-weight: 900; /* Bold */
    font-size: 48px;
}
h2 {
    font-family: "Noto Sans JP", sans-serif; /* bodyで指定済みの場合は省略可 */
    font-weight: 800; /* Bold */
    font-size: 48px;
}
h3 {
    font-family: "Noto Sans JP", sans-serif; /* bodyで指定済みの場合は省略可 */
    font-weight: 700; /* Bold */
    font-size: 48px;
}
h4 {
    font-family: "Noto Sans JP", sans-serif; /* bodyで指定済みの場合は省略可 */
    font-weight: 600; /* Bold */
    font-size: 48px;
}
h5 {
    font-family: "Noto Sans JP", sans-serif; /* bodyで指定済みの場合は省略可 */
    font-weight: 500; /* Bold */
    font-size: 28px;
    margin-top: 280px;
}
h6 {
    font-family: "Noto Sans JP", sans-serif; /* bodyで指定済みの場合は省略可 */
    font-weight: 400; /* Bold */
    font-size: 48px;
    margin-bottom: 5px;
}

/*段落*/
p {
    font-family: "Noto Sans JP", sans-serif; /* bodyで指定済みの場合は省略可 */
    font-weight: 100; /* Bold */
}

/*リンクの設定*/
a:link {
    color: #000000;
}
a:visited {
    color: #000000;
}
a:hover {
    color: #808080;
}
a:active {
    color: #dcdcdc;
}
a {
    text-decoration: none;
}

/*ロゴ*/
.logo {
    margin: 250px 0 40px 0;
    line-height: 0;
}

.scroll-text {
    margin-top: 120px; /* 例: karulu inc. との間に30pxの余白を作る */
}

/* .about テーブルに幅とmargin: auto; を指定して中央寄せ */
.about {
    width: 80%; /* 例: 親要素の80%の幅に設定 */
    /* または固定値: width: 600px; */
    margin: 30px auto 40px auto;

    /* 必要であれば他のテーブルスタイル */
    border-collapse: collapse; /* セルの境界線を結合 */
}

/*会社情報のテーブル*/

/* .about テーブルに幅とmargin: auto; を指定して中央寄せ */
.about {
    width: 80%; /* 例: 親要素の80%の幅に設定 */
    /* または固定値: width: 600px; */
    margin: 10px auto 20px auto;
    /* 必要であれば他のテーブルスタイル */
    border-collapse: collapse; /* セルの境界線を結合 */
    border: 0px solid #000000; /* ここに罫線を追加 */
}
.about td,
.about th {
    padding: 10px 12px; /* 上下8px、左右12pxのパディング */
    text-align: initial; /* または left, center など */
    vertical-align: top; /* セル内のコンテンツを上下中央に配置 */
    border: 0px solid #000000; /* ここに罫線を追加 */
}

/* .about テーブルの1列目 (tdとth) を右寄せ */
.about td:nth-child(1),
.about th:nth-child(1) {
    width: 12%;
    padding: 8px 8px;
    text-align: center;
}

/* .about テーブルの2列目 (tdとth) を左寄せ */
.about td:nth-child(2),
.about th:nth-child(2) {
    width: 30%;
    padding: 8px 8px;
    text-align: left;
}

/* マップの設定 */
.map {
    margin-top: 80px; /* 余白を作る */
}
.google-map {
    width: 100%; /* 親要素の幅いっぱいに広げる */
    /* max-width: 100%; は width: 100%; があれば不要 */
    height: 400px; /* 必要に応じて高さを調整 */
    /* HTMLのheight属性よりもCSSのheightプロパティが優先されます */
}

/* レスポンシブル関連 */
img {
    max-width: 100%;
    height: auto;
}
video {
    max-width: 100%;
    height: auto;
}
/* PC表示用のテキストはデフォルトで表示 */
.text-pc {
    display: inline; /* spanなのでinline、h5などの場合はblock */
}

/* スマホ表示用のテキストはデフォルトで非表示 */
.text-sp {
    display: none;
}

@media (max-width: 767px) {
    .wrapper {
        margin: 0 8px;
    }
    /* スマホ表示ではPC用の改行を非表示にし、スマホ用の改行テキストを表示 */
    .text-pc {
        display: none;
    }
    .text-sp {
        display: inline; /* spanなのでinline、必要に応じてblockなどに */
    }
}

/* フッター */
.logo-j {
    margin: 140px 0 80px 0;
    line-height: 0;
}