@charset "UTF-8";

/*-----------------------------------------------------
 * Reset
 *----------------------------------------------------*/
body, h1, h2, h3, h4, h5, h6, p, li, ul {
  margin: 0;
  padding: 0;
  text-align: left;
  color: #333;
  font-family: "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
}
html,body {
  font-size: 62.5%;
}
#wrap {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.test {
  border: 1px solid #f00;
  margin: 0 auto;
  max-width: 75rem;
}

/*-----------------------------------------------------
 * 基本
 *----------------------------------------------------*/
* { margin:0;  padding:0; }
header, article, section { display: block; }
.img_c { margin: 0 auto; max-width: 100%; display: block; }
div.img-right { max-width: 40%; margin: 0 0 2rem 2rem; max-width: 100%; display: block; float:right; }
.img100 {  width: 100%; display: block; }
ol, ul { list-style-type: none; }
input:focus::-webkit-input-placeholder{color:transparent;}
input:focus:-moz-placeholder{color:transparent;}
input:focus::-moz-placeholder{color:transparent;}

/*-----------------------------------------------------
 * 文字サイズ
 *----------------------------------------------------*/
.f200 { font-size:200%; }
.f180 { font-size:180%; }
.f170 { font-size:170%; }
.f160 { font-size:160%; }
.f150 { font-size:150%; }
.f140 { font-size:140%; }
.f130 { font-size:130%; }
.f120 { font-size:120%; }
.f115 { font-size:115%; }
.f110 { font-size:110%; }
.f80 { font-size:80%; }

/*-----------------------------------------------------
 * 文字装飾
 *----------------------------------------------------*/
.b { font-weight:bold; }
.r { color:#c00; }
.u { text-decoration:underline; }
.y { color:#fba91a; }
.ym { background:#f8ff2f; }
.yu { background: linear-gradient(transparent 50%, #fdf387 50%); }

/*-----------------------------------------------------
 * マージンスペース
 *----------------------------------------------------*/
.mt0 {  margin-top: 0 !important; }
.mt1 {  margin-top: 1rem !important; }
.mt2 {  margin-top: 2rem !important; }
.mt3 {  margin-top: 3rem !important; }
.mt4 {  margin-top: 4rem !important; }
.mt5 {  margin-top: 5rem !important; }
.mt6 {  margin-top: 6rem !important; }
.mt7 {  margin-top: 7rem !important; }
.mt8 {  margin-top: 8rem !important; }
.mt9 {  margin-top: 9rem !important; }
.mt10 {  margin-top: 10rem !important; }

.mb0 {  margin-bottom: 0 !important; }
.mb1 {  margin-bottom: 1rem !important; }
.mb2 {  margin-bottom: 2rem !important; }
.mb3 {  margin-bottom: 3rem !important; }
.mb4 {  margin-bottom: 4rem !important; }
.mb5 {  margin-bottom: 5rem !important; }
.mb6 {  margin-bottom: 6rem !important; }
.mb7 {  margin-bottom: 7rem !important; }
.mb8 {  margin-bottom: 8rem !important; }
.mb9 {  margin-bottom: 9rem !important; }
.mb10 {  margin-bottom: 10rem !important; }

/*-----------------------------------------------------
 * 幅指定
 *----------------------------------------------------*/
.mw10 { margin: 0 auto; width: 10%; }
.mw15 { margin: 0 auto; width: 15%; }
.mw20 { margin: 0 auto; width: 20%; }
.mw25 { margin: 0 auto; width: 25%; }
.mw30 { margin: 0 auto; width: 30%; }
.mw33 { margin: 0 auto; width: 33%; }
.mw40 { margin: 0 auto; width: 40%; }
.mw45 { margin: 0 auto; width: 45%; }
.mw50 { margin: 0 auto; width: 50%; }
.mw55 { margin: 0 auto; width: 55%; }
.mw60 { margin: 0 auto; width: 60%; }
.mw65 { margin: 0 auto; width: 65%; }
.mw70 { margin: 0 auto; width: 70%; }
.mw75 { margin: 0 auto; width: 75%; }
.mw80 { margin: 0 auto; width: 80%; }
.mw85 { margin: 0 auto; width: 85%; }
.mw90 { margin: 0 auto; width: 90%; }
.mw95 { margin: 0 auto; width: 95%; }
.mw100 { margin: 0 auto; width: 100%; }


/*-----------------------------------------------------
 * スマホ・PC切り替え表示
 *----------------------------------------------------*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
  .pc { display: none !important; }
  .sp { display: block !important; }
}
