/* PC 表示とSP 非表示の切り替え */
.hide-pc-by {
  display: block !important;
}
.hide-tab-by {
  display: none !important;
}
.hide-sp-by {
  display: none !important;
}



@media screen and (max-width: 768px) {
  .hide-pc-by {
    display: none !important;
  }
  .hide-tab-by {
    display: none !important;
  }
  .hide-sp-by {
    display: block !important;
  }
}

/* JSなどで使用 */
.block-by {
  display: block !important;
}
.hide-by {
  display: none !important;
}

/* front-page.phpの#contentの横幅を消す */
#content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}


/*******************************************************
サイト全体の設定
*******************************************************/

/* htmlにあるpadding-bottomを消す */
html {
    padding-bottom: 0 !important;
}


/* 本文にフォントを設定する＆行間の設定 */
a,
p,
div  {
    font-family: var(--ff_text-by) !important;
    line-height: var(--lh-by);
}


/* リンクテキスト */
.link_text-by {
  color: var(--accent_color-by) !important;
  text-decoration: underline !important;

}

/* 外部リンクのアイコンを表示 */
.another_site-icon-by:after {
    content: "\f08e";
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    margin-left: 4px;
    margin-right: 2px;
}


/* 上部に戻るボタンの位置 */
@media (max-width: 768px){
  .p-fixBtnWrap {
    bottom: 5em !important;
  }
}


/* reCAPTCHAバッジを消す */	
.grecaptcha-badge {
  visibility: hidden;
}


/*******************************************************
短縮プロパティ
*******************************************************/

/* 強調 */
.b-by {
  font-weight: bold;
}
/* 強調+カラー追加 */
.b-c-by {
  font-weight: bold;
  color: var(--sub_color-by);
}


/* センター寄せ */
.ta-c-by {
  text-align: center;
}


/* 要素の存在を残しつつ、非表示にする */
.vh-by {
  visibility: hidden;
}


/* display: flex;の向きを右からにする（レスポンシブで解除する） */
.fd-rr {
  flex-direction: row-reverse;
}
@media (max-width: 768px){
  .fd-rr {
    flex-direction: row;
  }
}


/*******************************************************
セクション
*******************************************************/

/* デフォルトのmainに横幅を設定 */
/* 使用箇所はfront-pageと各page */
.l-main {
    min-width: 1120px;
}
@media (max-width: 1024px){
  .l-main {
    min-width: 820px;
}
}
@media (max-width: 768px){
  .l-main {
    min-width: 310px;
}
}

/* セクションの横幅 */
.sec-m-by {
  width: 80%;
  margin: auto;
}
@media (max-width: 768px){
  .sec-m-by {
  width: 90%;
}
}

/* セクション(共通) */
.sec_2-by,
.sec_3-by {
  padding: 90px 0;
}
@media (max-width: 768px){
  .sec_2-by,
  .sec_3-by {
    padding: 50px 0;
  }
}

/* セクション(青色) */
.sec_1-by {
  padding: 90px 0 0 0;
}
@media (max-width: 768px){
  .sec_1-by {
    padding: 50px 0 30px 0;
  }
}

/* セクション(青色) */
.sec_1-by {
  background-color: var(--main_color-by);
}

/* セクション(白色) */
.sec_2-by {
  background-color: var(--white_color-by);
}

/* セクション(クリーム色) */
.sec_3-by {
  background-color: #FBF7EB;
}

/* 固定ページ用のマージン */
.sec-page-by {
  margin-bottom: 90px;
}
@media (max-width: 768px){
  .sec-page-by {
    margin-bottom: 40px;
  }
}



/* 波のSVGのposition */
/* アニメーションのためz-indexを付与 */
.sec_2-by,
.sec_3-by {
  position: relative;
  z-index: 8;
}

.sec-svg-poka {
  position: relative;
  margin-bottom: 40px;
  z-index: 9;
}
@media (max-width: 768px){
  .sec-svg-poka {
  margin-bottom: 0px;
}
}
.svg-position-poka {
  position: absolute;
  z-index: 5;
}
@media (max-width: 768px){
  .svg-position-poka {
  bottom: 0;
  transform: translateY(50%);
  }
}

/* 波の下のセクションにはマージントップを付ける */
.sec-mt70-poka {
  margin-top: 70px;
}
@media (max-width: 768px){
  .sec-mt70-poka {
    margin-top: 0px;
  }
}


/*******************************************************
セクションごとにアニメーションを付ける
*******************************************************/

.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}


/*******************************************************
パンくずリスト
*******************************************************/

/* パンくずリストのセクション */
.sec-breadcrumb-by {
  min-width: 1120px;
}
@media screen and (max-width: 768px) {
  .sec-breadcrumb-by {
  min-width: 310px;
}
}

/* 以下はデフォルト */
.-body-solid .p-breadcrumb.-bg-on {
    box-shadow: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.p-breadcrumb.-bg-on {
    background: none;
    margin-bottom: 40px;
}
.p-breadcrumb__list {
  padding: 0;
  width: 80%;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .p-breadcrumb__list {
  width: 90%;
}
}
.l-container {
  max-width: none !important;
}


/*******************************************************
見出し
*******************************************************/

/* サイト全体のh1 */



/* サイト全体のh2 */
.h2-by {
    color: var(--black_color-by);
    font-size:var(--fs-big-by);
    text-align: center;
    margin-bottom: 60px;
    font-family: var(--ff_h-by) !important;
    font-weight: bold;

    position: relative;
}
@media (max-width: 768px){
  .h2-by {
    margin-bottom: 40px;
  }
}

.h2-by:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 40px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color:  var(--sub_color-by);
  border-radius: 2px;
}


/* 左線の見出し */
.h-left_line-by {
  padding: 6px 11px;
  border-left: solid 5px var(--sub_color-by);
  color: var(--black_color-by);
}


/* 下線の見出し */
.h-bottom_line-by {
  position: relative;
  display: inline-block;
  margin: 0 auto 22px;
  color: var(--black_color-by);
}
.h-bottom_line-by:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: var(--black_color-by);
  border-radius: 2px;
}


/*******************************************************
ボタン
*******************************************************/

/* アイコン付きボタン */
.icon_btn_r-by {
    display: block;
    width: 15%;
    max-width: 240px;
    color: #fff;
    font-weight: bold;
    font-size: var(--fs-small-by);
    text-align: center;
    border-radius: 100vh;
    padding: 12px;
    position: relative;
    background-color: var(--accent_color-by);
    border: solid 1px #fff;
    margin: 64px auto 0;
}
@media (max-width: 768px){
  .icon_btn_r-by {
    width: 100%;
  }
}
.icon_btn_r-by:hover {
  opacity: var(--opa_color-by);
  transition: var(--opa_tra-by);
}

/* ボタン内の右端にアイコンを置く(親要素にposition: relative;を入れる) */
.icon_r-by {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 13px;
  transform: translateY(-50%);
}


/* アイコンなしボタン */
.btn-by {
    display: block;
    width: 15%;
    max-width: 240px;
    color: #fff;
    font-weight: bold;
    font-size: var(--fs-small-by);
    text-align: center;
    border-radius: 100vh;
    padding: 12px;
    position: relative;
    background-color: var(--accent_color-by);
    border: solid 1px #fff;
    margin: 64px auto 0;
}
@media (max-width: 768px){
  .btn-by {
    width: 100%;
  }
}
.btn-by:hover {
  opacity: var(--opa_color-by);
  transition: var(--opa_tra-by);
}

/*******************************************************
テーブル
*******************************************************/

/* 基本のテーブル */

.table-by {
  width: 100%;
  margin: 20px 0 0;
  font-size: 16px;
  text-align: center;
  border-spacing: 5px;
  border-collapse: separate;
}

.table-by th,
.table-by td {
  border: 1px solid #ccc;
  padding: 12px 20px;
  line-height: 1.5;
  background-color: #fff;
  border-radius: 5px;
}

.table-by th {
  background-color: var(--sub_color-by);
  font-weight: bold;
  color: var(--white_color-by);
  border: none;
}

.table-by tr:nth-child(even) td {
  background-color: #f9f9f9;
}

.table-by td {
  font-size: var(--fs-text-by);
  color: #333;
  line-height: var(--lh-by);
}

/* 基本のテーブルレスポンシブ対応あり(tableに.table-res-byを付ける) */
@media (max-width: 768px){
  .table-by.table-res-by th,
  .table-by.table-res-by td {
    display: block;
    width: 100%;
  }
  .table-by.table-res-by tr:nth-child(even) td {
    background-color: #fff;
  }
  .table-by.table-res-by th {
    border-radius: 5px 5px 0 0;
  }
  .table-by.table-res-by td {
    border-radius: 0 0 5px 5px;
  }
  .table-by.table-res-by {
    border-spacing: 0px 10px;
  }
}


/*******************************************************
ここからCSS変数(カスタムプロパティ)
*******************************************************/
:root {


/*******************************************************
フォントを指定する
*******************************************************/

    /* 見出し */
    --ff_h-by: "Zen Kaku Gothic New", sans-serif;

    /* 本文 */
    --ff_text-by: "Noto Sans", sans-serif;


/*******************************************************
色を指定する
*******************************************************/

    /* 黒色 */
    --black_color-by: #0D3048;

    /* 白色 */
    --white_color-by: #fff;

    /* 青色 */
    --blue_color-by: #292DAF;

    /* 赤色 */
    --red_color-by: #FF151F;

    /* メインカラー */
    --main_color-by: #E2F9FF;

    /* サブカラー */
    --sub_color-by: #1BA2DE;

    /* アクセントカラー */
    --accent_color-by: #FF8B76;


/*******************************************************
文字間の高さ
*******************************************************/

    /* line-height */
    --lh-by: 1.8;

/*******************************************************
ホバーの濃さ、早さを指定する
*******************************************************/

    /* 濃さ */
    --opa_color-by: 0.8;

    /* 早さ */
    --opa_tra-by: opacity 0.3s;


}


/*******************************************************
フォントサイズ(レスポンシブ含む)を指定する
*******************************************************/
:root {

    /* 大サイズ */
    --fs-big-by: 32px;

    /* 中サイズ */
    --fs-middle-by: 24px;

    /* 小サイズ */
    --fs-small-by: 18px;

    /* テキストサイズ */
    --fs-text-by: 16px;

    /* ミニサイズ */
    --fs-mini-by: 12px;

}
@media screen and (max-width: 768px) {
:root {
    /* 大サイズ */
    --fs-big-by: 26px;

    /* 中サイズ */
    --fs-middle-by: 18px;

    /* 小サイズ */
    --fs-small-by: 16px;

    /* テキストサイズ */
    --fs-text-by: 14px;

    /* ミニサイズ */
    --fs-mini-by: 12px;
}
}