@charset "UTF-8";

/*====================================================================================================

　CSS構成

　//絶対に変更しないCSS
　- reset.css           全てのブラウザ固有CSSをリセットするCSS。基本触らないこと。
　- bootstrap.min.css   Bootstrapコンポーネントを利用するためのCSS。基本触らないこと。
　- all.min.css         Font Awesome を利用するためのCSS。基本触らないこと。
　- aos.css             AOSを利用するためのCSS。基本触らないこと。

　//基本的には変更しないCSS
　- base.css            基本の文字設定や、Webフォントの読み込みなど。基本触らなくてもOK。

　//メインで利用しているCSS
　- common.css          ヘッダー、フッター、下層ページのタイトルなど、共通ページレイアウトを記載したCSS
　- stlye.css           各ページ固有のレイアウトを記載したCSS

　//補助的に利用しているCSS
　- module.css          見出しやリスト、テーブルなど、共通利用できるパーツをまとめたCSS
　- utility.css         マージンやパディング、文字サイズや文字色など、補助的に利用できるCSS

====================================================================================================*/


/*------------------------------------------------------------------
  base
------------------------------------------------------------------*/

html {
    --bg-color: #f4f4f4;
    --primary-color: #f17fbe;
    --primary-dark-color: #d28cb3;
    --accent-color: #f17fbe;
    --red-color: #e04747;
    --white-color: #fff;
    --border-gray-color:#c7c7c7;
    --gray-color: #929292;
    --gray-dark-color: #72706a;
    --gray-light-color: #ebebeb;
    --btn-black-color: #565656;
    --black-color: #222222;
    --letter-spacing: .1em;
    --letter-spacing--en: .05em;
    --letter-spacing--ac-en: 0;

    overflow-x: hidden;
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
    --en-font:  "Lato", sans-serif;
    --ac-en-font: "Bona Nova", serif;
    font-weight: 400;
    font-size: .95rem;
    color: var(--black-color);
    line-height: 1.725;
    z-index: 1;
}

a {
    color: var(--black-color);
}

.nav-tel a {
    color: var(--white-color);
}

body {
    background-color: var(--bg-color);
    letter-spacing: var(--letter-spacing);
}

@media screen and (max-width:1599px) {
    body {
        font-size: 0.98rem;
    }
}

@media screen and (max-width:991px) {
    body {
        font-size: 0.98rem;
    }
}

@media screen and (max-width:767px) {
    body {
        font-size: 0.95rem;
    }
}

@media screen and (max-width:374px) {
    body {
        font-size: 0.9rem;
    }
}

body .en {
    letter-spacing: var(--letter-spacing--en);
    font-family: var(--en-font);
}

body .ac.en {
    letter-spacing: var(--letter-spacing--ac-en);
    font-family: var(--ac-en-font);
}

hr {
    border-top: 1px dashed #ccc;
    border-right: none;
    border-bottom: none;
    border-left: none;
}


/* input-style ----------------------------------------*/

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea {
    padding: 8px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 3px;
}

select {
    padding: 8px 25px 8px 10px;
}

input[type="text"].required:focus,
input[type="password"].required:focus,
input[type="tel"].required:focus,
input[type="email"].required:focus,
input[type="number"].required:focus,
select.required:focus,
textarea.required:focus {
    border: 1px solid #f89c9c;
}

label:hover,
select:hover {
    cursor: pointer;
}

.inputfile_box {
    margin-bottom: 15px;
}

::-webkit-input-placeholder {
    color: #aaa;
    opacity: 1;
}

:-moz-placeholder {
    color: #aaa;
}

::-moz-placeholder {
    color: #aaaaaa;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #aaa;
}


/*------------------------------------------------------------------
  section
------------------------------------------------------------------*/

/*
  section spacing system

  .section         : セクションの基本構造
  .section-top     : 上余白を付与
  .section-*       : 余白サイズ指定

  例)
  <section class="section section-large">
  <section class="section section-xxlarge section-top">
*/

.section {
    position: relative;
    --section-padding: 0;
    padding-bottom: var(--section-padding);
    z-index: 1;
}

/* container をコンテンツのレイヤー基準にする */
.section>.container {
    position: relative;
}


/* 上余白が必要なセクションに追加 */
.section-top {
    padding-top: var(--section-padding);
}


/*------------------------------------------------------------------
  section space
------------------------------------------------------------------*/

.section-xsmall {
    --section-padding: 40px;
}

.section-small {
    --section-padding: 60px;
}

.section-medium {
    --section-padding: 80px;
}

.section-large {
    --section-padding: 120px;
}

.section-xlarge {
    --section-padding: 160px;
}

.section-xxlarge {
    --section-padding: 200px;
}

.section-xxxlarge {
    --section-padding: 280px;
}


/*------------------------------------------------------------------
  responsive
------------------------------------------------------------------*/

@media screen and (max-width:1399px) {

    .section-xlarge,
    .section-xxlarge {
        --section-padding: 160px;
    }

    .section-xxxlarge {
        --section-padding: 200px;
    }
}

@media screen and (max-width:1199px) {

    .section-xlarge,
    .section-xxlarge {
        --section-padding: 120px;
    }

    .section-xxxlarge {
        --section-padding: 160px;
    }
}

@media screen and (max-width:991px) {

    .section-medium {
        --section-padding: 80px;
    }

    .section-large,
    .section-xlarge,
    .section-xxlarge {
        --section-padding: 120px;
    }

    .section-xxxlarge {
        --section-padding: 140px;
    }
}

@media screen and (max-width:767px) {

    .section-xsmall {
        --section-padding: 80px;
    }

    .section-large,
    .section-xlarge,
    .section-xxlarge {
        --section-padding: 100px;
    }

    .section-xxxlarge {
        --section-padding: 120px;
    }
}

@media print {

    .section-xlarge,
    .section-xxlarge {
        --section-padding: 100px;
    }

    .section-xxxlarge {
        --section-padding: 120px;
    }
}

/*------------------------------------------------------------------
  Custom Bootstrap
------------------------------------------------------------------*/

/*
  Bootstrapのcontainerはブレイクポイントごとに最大幅が設定されていますが、
  本プロジェクトではデザインカンプの基準幅に合わせるため、
  containerの左右余白と最大幅を上書きして調整しています。
*/

/* ----------------------------------------
  container 基本設定
---------------------------------------- */

:root {
    --container-max: 1530px;
    --container-padding: 6vw;
}

/* PCでは左右余白を固定 */
@media (min-width: 992px) {
    :root {
        --container-padding: 60px;
    }
}

/* container系すべてに共通の余白を適用 */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-fluid {
    width: 100%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ----------------------------------------
  PC表示時の最大幅
---------------------------------------- */

/* 1200px以上ではコンテンツ幅をプロジェクト基準に固定 */
@media (min-width: 1200px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: var(--container-max);
    }
}

/* ----------------------------------------
  印刷時
---------------------------------------- */

@media print {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-fluid {
        padding: 0 15px !important;
    }

}