@charset "utf-8";

/**
 * ***************************************
 * ページ全体に関わるCSSの設定
 * ***************************************
 */
html *,
::before,
::after {
  box-sizing: border-box;
}
/* フォント */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400; /* Noto Sans JPのレギュラーウェイトを指定 */
}
/* おもな太字タグのフォントウェイト設定 */
/*h1, h2, h3, h4, h5, h6, th, strong {
  font-weight: 700;
}*/
/* ベースのリンクカラー */
a {
  color: rgb(0, 132, 255);
}

/* レスポンシブイメージと画像下スペース防止 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */
}
/*アンダーライン（黄色）*/
mark {
  background: linear-gradient(transparent 70%,#ffff7c 70%);
}
/*----------------------ここまで--------------------*/
/*フォントの強調*/
.f_weight{font-weight: 600;}

/*ヘッダーの設定*/
.header-container{
  width: 100%;
  background-color: rgb(246, 244, 242);
  text-align: center;
  padding:20px 20px ;
}
/*フッターの設定*/
.footer-container{
  width: 100%;
  background-color: white;
  color:back;
  text-align: center;
  padding: 20px 20px;
}
/*題字 h1の切り替え*/
.sumaho{display: block;}
.pc{display: none;}
@media(min-width:768px){
.sumaho{display: none;}
.pc{display: block;}
}
/*ここからメイン*/
main{background-image:url(../images/bg023.gif) ;}
.main-container{
  padding: 20px 4% 20px 4%;
  max-width:100%;
  /*background-color: rgb(247, 244, 236);*/
}
@media(min-width:768px){
  .main-container{
    max-width:800px;
    margin: auto;
    padding: 20px 20px 20px 20px;
  }
}
/*メイン画像の設定*/
.moca{
  
  justify-items: center;
  align-items:center;
  margin-bottom: 50px;
}
.moca2{
  text-align: center;
}
.decoration1{
  text-align: center;
}
.decoration2{
  border-left: solid 5px blue;
}