@charset 'utf-8';

/*----------------------------------------
	このCSSファイルには前ページ共通して使用されるCSSを記載する
----------------------------------------*/

/*----------------------------------------
	base ベースルール
----------------------------------------*/

/* 標準的なフォント（本文などに使用） */
html {
    font-size: 62.5%; /* フォントサイズを10pxに揃える　基本の16px*62.5%で10pxにする 後でremで管理できるので*/
    font-family: Roboto, "Noto Sans JP", "Noto Serif JP", Arial, sans-serif;
    font-weight: 400;/*標準的なweight*/
    line-height: 1.5;/*行間16×1.5＝24px*/
    color: #000;
}

/* 全体の背景色（今回はwrapperでもいい） */
body {
    background-color: #fff;
}

/* 画像が荒くならないように対策（これ決め打ちで） */
img {
    max-width: 100%;
    height: auto;
}

/* リンク用の画像のアニメーション（これぐらいで大丈夫） */
a > img {
    transition: 0.25s;
}

/* ヘッダー下のフォントサイズ （ヘッダーの全ての子要素＝ヘッダー下の全て）*/
header * {
    font-size: 1.8rem;
}

/* フッター下のフォントサイズ（フッターの全ての子要素＝フッター下の全て */
footer * {
    font-size: 1.4rem;
}

/*これはリセットCSSによっては必要*/
/* ul,ol{
    list-style: none;
} */


/*----------------------------------------
	layout レイアウトルール
----------------------------------------*/

/* main */

.main {
    display: block;
    width: 100%;/*画面幅を親要素いっぱいにする。外側から枠を考えて作る*/
    margin-bottom: 120px;
}

/* service */

.service,
.access {
    margin-top: 120px;
    margin-left: auto;/*中央揃え、個別で記述（ショートハンドだとうまくいかない）*/
    margin-right: auto;/*中央揃え*/
    text-align: center;
}

/* main内のコンテンツに使用するinnerクラス */

.inner {
    max-width: 1040px;/*コンテンツが入る中身の部分*/
    padding-left: 16px;
    padding-right: 16px;
    margin-right: auto;
    margin-left: auto;
}

@media (width>992px) {/*992pxより大きいとき*/
    .inner {
        padding-left: 0px;/*PC版は余白をなくす*/
        padding-right: 0px;
    }
}

/*header ヘッダーとフッターに関してはレイアウト部分だけでなく、パーツも同時に記述する場合もある
-----------------------------------*/

.header {
    width: 100%;
    background-color: #fff;
}

/*innerを分けて書いている、ほぼ一緒*/
.header_inner {
    max-width: 1040px;/*最大1040px*/
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 20px;/*スクロールバーの分20px必要*/
    padding-left: 20px;/*余白は必要*/
    margin-right: auto;/*中央寄せ*/
    margin-left: auto;/*中央寄せ*/
    display: flex;
    justify-content: space-between;
    align-items: center;/*中央揃え*/
}

@media (width>992px) {
    .header_inner {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

/* hamburger */

.hamburger {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: 0;
}
.hamburger__line {
    position: relative;
    width: 25px;
    height: 2px;
    background: #333;
}
.hamburger__line::before,
.hamburger__line::after {
    position: absolute;
    content: "";
    display: block;
    width: 25px;
    height: 2px;
    background: #333;
    transition: transform 0.3s;
}
.hamburger__line::before {
    top: -8px;
}
.hamburger__line::after {
    bottom: -8px;
}
/* hamburge-close*/

.hamburger:hover .hamburger__line {
    background: transparent;
}
.hamburger:hover .hamburger__line::before {
    top: 0;
    transform: rotate(45deg);
}
.hamburger:hover .hamburger__line::after {
    bottom: 0;
    transform: rotate(-45deg);
}

/* PC版にするとハンバーガーメニューは非表示になる */

@media (width>992px) {
    .hamburger {
        display: none;
    }
}

/*	gnav */

/* SP版の状態であればグローバルナビゲーションは非表示になる */

.g-nav {
    display: none;
}

@media (width>992px) {
    .g-nav {
        display: block;
        flex-grow: 1;/*余ったスペースいっぱいに広がる*/
    }

    .g-nav > ul {
        display: flex;
        justify-content: flex-end;/*左側に*/
        gap: 38px;/*隙間*/
    }
}

/*footer ヘッダーとフッターに関してはレイアウト部分だけでなく、パーツも同時に記述する場合もある
-----------------------------------*//*←この書き方、中見出し*/
/*（補足）ヘッダー、フッターを共通しているので、共通に書きたくなるが、後で個別のメンテナンスがしにくくなるので分けて書いておいた方がラク*/

.footer {
    width: 100%;/*書いといた方がわかりやすい*/
    background-color: #ccc;
}

.footer_inner {
    max-width: 1040px;
    padding-top: 60px;
    padding-bottom: 20px;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.footer_logo {
    margin-left: auto;
    margin-right: auto;
}

.footer_nav {
    margin-top: 40px;
    margin-bottom: 80px;
}

.footer_nav li {
    border-bottom: 1px solid #333;/*下線*/
    padding-bottom: 32px;
}

.footer_nav li + li {/*隣接セレクタ*/
    margin-top: 32px;
}

@media (width>992px) {
    .footer_inner {
        padding-top: 36px;
        padding-bottom: 40px;
    }

    /* PC版では横並びのレイアウトになるためにここでflex */
    .footer_area {
        display: flex;
        justify-content: space-between;
        align-items: start;/*上揃え*/
    }

    .footer_nav {
        margin-top: 0px;
        margin-bottom: 0px;
        flex-grow: 1;/*余った部分を全部取って右に*/
    }

    .footer_nav > ul {
        display: flex;
        justify-content: flex-end;
        gap: 38px;
    }

    .footer_nav li {
        border-bottom: none;/*スマホ版は下線があったので、PC版ではなしにする*/
        padding-bottom: 0px;
    }

    .footer_nav li + li {
        margin-top: 0px;/*スマホ版をPC版では打ち消す*/
    }
}

/*header,footer 共通パーツ
-----------------------------------*/

.header_logo,
.footer_logo {
    width: 93px;
}

@media (width>992px) {
    .header_logo,
    .footer_logo {
        width: 181px;
    }
}

.copyright {
    margin-top: 40px;
    text-align: center;
}

/*----------------------------------------
	module 他のページでも使用するパーツをここで記載
----------------------------------------*/
/*共通パーツ、ボタン、見出しなどをここに書いておく（他のページでも使うやつ）*/

/* 写真画像全般、または .photo-placeholder img などに適用 */
img {
  /* ベンダープレフィックス付き（Chrome, Safari, Edgeなどでドラッグ不可） */
  -webkit-user-drag: none;
  
  /* テキスト・要素の選択を禁止 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  /* スマホの長押しメニューを抑制 */
  -webkit-touch-callout: none;
  
  /* 画像に対するクリックやドラッグなどのマウス操作自体を完全に無効化する（推奨） */
  pointer-events: none;
}