@charset "utf-8";
/* フォント・見出し・ボタン設定 */

/* パーツ参考 */
https://pote-chil.com/html-maker/accordion





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

　フォント・

=================================================================================================== */
/*-----------------------------------------------
▼ 文字の大きさの基準（ここだけ編集）
rem＝ページ全体の基準サイズに対する倍率
-----------------------------------------------*/
html {font-size: 16px;   /* PC：1rem = 16px */}
@media screen and (max-width:1280px){html { font-size: 15px; }  /* タブレット */}
@media screen and (max-width:768px){html { font-size: 14px; } /* スマホ */}

/*-----------------------------------------------
▼ 文字サイズ：rem指定なのでここは固定（触らなくてOK）
-----------------------------------------------*/
.t1 { font-size: 0.8rem;   line-height:1.6; font-weight:400; } /* 14px相当 */
.t2 { font-size: 1rem;     line-height:1.6; font-weight:400; } /* 16px相当 */
.t3 { font-size: 1.125rem; line-height:1.6; font-weight:400; } /* 18px相当 */
.t4 { font-size: 1.25rem;  line-height:1.6; font-weight:400; } /* 20px相当 */
.t5 { font-size: 1.375rem; line-height:1.6; font-weight:400; } /* 22px相当 */

/*-----------------------------------------------
▼  太字を太くする場合はこれを追加（触らなくてOK）
-----------------------------------------------*/
.tb { font-weight:900; }

/*-----------------------------------------------
▼  文字色：文字の色の指定はこれで追加（触らなくてOK）
-----------------------------------------------*/
.t-black  { color:#0E0000; }
.t-white  { color:#FFFFFF; }
.t-gray   { color:#898989; }
.t-red    { color:#B81C2B; }
.t-yellow { color:#DEB971; }

/*-----------------------------------------------
▼ 文字揃え
-----------------------------------------------*/
.tc { text-align: center; }/* 中央揃え＝text-center */
.tr { text-align: right; }/* 右揃え＝text-right */
.tl { text-align: left; }/* 左揃え＝text-left */


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

　余白指定

=================================================================================================== */
/*-----------------------------------------------
▼ アイテム外の余白指定 ※mt＝margin-top
-----------------------------------------------*/
.mt-05rem { margin-top: 0.5rem!important; }
.mt-1rem { margin-top: 1rem!important;}
.mt-2rem { margin-top: 2rem!important;}
.mt-4rem { margin-top: 4rem!important;}
.mt-6rem { margin-top: 6rem!important;}
.mt-8rem { margin-top: 8rem!important;}
.mt-12rem { margin-top:12rem!important;}



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

　罫線

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

/*-----------------------------------------------
▼  デフォルトの線を消す
-----------------------------------------------*/
hr {
  border: none;margin: 0;/* デフォルトの線を消す */
  width: 100%; box-sizing: border-box;/* Flexボックス内でも横幅を確保させる */
  }

/*-----------------------------------------------
▼  罫線の種類
-----------------------------------------------*/
.hr-sol { border-top-style: solid; }   /* 実線 */
.hr-dot { border-top-style: dotted; }  /* 点線 */
.hr-das { border-top-style: dashed; }  /* 破線 */
.hr-dou { border-top-style: double; }  /* 二重線 */

/*-----------------------------------------------
▼  罫線の太さ
-----------------------------------------------*/
.hr-1px { border-top-width: 1px; }
.hr-2px { border-top-width: 2px; }
.hr-3px { border-top-width: 3px; }
.hr-5px { border-top-width: 5px; }


/*-----------------------------------------------
▼  罫線の色
-----------------------------------------------*/
.hr-black  { border-top-color:#0E0000; }
.hr-white  { border-top-color:#FFFFFF; }
.hr-gray   { border-top-color:#898989; }
.hr-red    { border-top-color:#B81C2B; }
.hr-yellow { border-top-color:#DEB971; }




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

　ボタン　※参考＝https://pote-chil.com/html-maker/button

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

/*-----------------------------------------------
▼ ボタンの核
-----------------------------------------------*/
.btn{
  display:block;                 /* 幅を確実に効かせる */
  box-sizing:border-box;
  font-weight:bold;
  text-align:center;
  text-decoration:none;
  border-radius:50px;
  cursor:pointer;
  transition:.2s;
  white-space:nowrap;
}

/* ▽ 中身を中央にしたいので a 自体を flex にする */
.btn{
  display:flex;
  justify-content:center;
  align-items:center;
}

/*-----------------------------------------------
▼ 色
-----------------------------------------------*/
.btn-black{background:#3F3B3A;color:#fff!important;}
.btn-black:hover{background:#898989;}

.btn-gray{background:#898989;color:#fff!important;}
.btn-gray:hover{background:#F8B73D;}

/*-----------------------------------------------
▼ サイズ
-----------------------------------------------*/
.btn-small{font-size:0.75rem;padding:3px 1.2em;} /* 左右0はやめる */
.btn-big{font-size:1rem;padding:6px 1.6em;}

/*-----------------------------------------------
▼ 幅
-----------------------------------------------*/
.btn-w300{width:300px;max-width:100%;}  /* SPで溢れない */
.btn-half{width:50%;}  /* SPで溢れない */
.btn-full{width:100%;}

/*-----------------------------------------------
▼ 中央寄せ（displayは絶対触らない）
-----------------------------------------------*/
.btn-center{margin:0 auto;}




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

　見出し
https://pote-chil.com/html-maker/heading
https://find-a.jp/seotimes/css-headline-design/
https://jajaaan.co.jp/css/css-headline/

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

/*-----------------------------------------------
▼ 見出し：上にアイコン
-----------------------------------------------*/
.h_icon01{
  font-size: 1.8rem; line-height:2; font-weight:bold; 
  text-align: center;
  color: #DEB971;/* 文字の色 */
  /* ↓ 文字の下のアンダーライン*/
  text-decoration:underline;/* アンダーライン:テキストの上に引く場合は「overline;」 */
  text-decoration-color:#DEB971;/* アンダーラインの色 */
  text-decoration-thickness: 1px; /* アンダーラインの太さ */
  text-decoration-style: dashed; /* アンダーラインのスタイル:波線「wavy」/二重線「double」/点線「dashed」 */
  text-underline-offset: 30%;/* アンダーラインと文字との距離*/
  }

.h_icon01:before {/* 下につける場合はafter */
  content: '';/*何も入れない*/
  width: 70px;/*画像の幅*/
  height: 50px;/*画像の高さ*/
  background-image: url("img/title_icon.png");/*画像のURL*/
  background-repeat:  no-repeat; /*画像を繰り返さない*/
  background-size: contain;/*画像の縦横比は維持したまま、疑似要素いっぱいに広げる*/
  display: block;/*幅高さを指定出来るようにする。横に並べるときはinline-block/改行を入れる場合はblock*/
  margin: 0px auto 5px;/*アイコン周りの余白*/
  }


/*-----------------------------------------------
▼ 見出し：文字の下に線
-----------------------------------------------*/
.h_line{
  font-size: 1.3rem; line-height:1.5; font-weight:bold; 
  text-align: left;
  color: #DEB971;/* 文字の色 */
  /* ↓ 文字の下のアンダーライン*/
  text-decoration:underline;/* アンダーライン:テキストの上に引く場合は「overline;」 */
  text-decoration-color:#DEB971;/* アンダーラインの色 */
  text-decoration-thickness: 1px; /* アンダーラインの太さ */
  text-decoration-style: dashed; /* アンダーラインのスタイル:波線「wavy」/二重線「double」/点線「dashed」 */
  text-underline-offset: 20%;/* アンダーラインと文字との距離*/
  }






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

　改行設定

=================================================================================================== */
/* ***************************************************************************************
レスポンシブ設定
****************************************************************************************** */
/* ▼ スマホ：760px以下の幅の場合に適応される////////////////////////////////*/
@media screen and (max-width:760px){
.pc_br{display: none;}
.ho_br{display: none;}
}/*//////////////////////////////////////////////////////////////////////*/

/* ▼ タブレット：760pxから1280pxまでの幅の場合に適応される///////////////////*/
@media screen and (min-width:761px) and (max-width:1280px){
.pc_br{display: none;}
.sp_br{display: none;}
}/*//////////////////////////////////////////////////////////////////////*/

/* ▼ パソコン：1281px以上の幅の場合に適応される///////////////////////*/
@media screen and (min-width: 1281px){
.sp_br{display: none;}
.ho_br{display: none;}
}/*//////////////////////////////////////////////////////////////////////*/