@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body {
  background-color: #646464;
  color: #ffffff;
  margin: 0;
  font-size: 100%;
  font-family: "Noto Sans JP", sans-serif;
  -webkit-text-size-adjust: 100%; /* アイフォンで文字サイズ固定 */
  min-width: auto;
  letter-spacing: 0.05em; /* 文字間 */
}

.text_responsive { /* 文字自動縮小 */
  line-height: 130%; /* 行の高さ */
}

/*********************************************全体********************************************/

html,body{ /*iPad・iPhone右側余白対策用1（HTML側のMETA name="viewport"〜でサイト横幅指定）*/
  width: 100%;
}

#wrapper { /*iPad・iPhone右側余白対策用2*/
  overflow: hidden;
}

.container {
  display: flex;
}

/*---------------------------------------------------------*/

img {
  image-rendering: -webkit-optimize-contrast;
}

a { /*リンク文字 */
  color: #ffffff;
  text-decoration: none;
}

a:link { /*クリックしていないリンク文字 */
  color: #ffffff;
}

a:visited { /*クリックしたリンク文字 */
  color: #ffffff;
}

a:hover { /*マウスON*/
  color: #ffffff;
  text-shadow: 3px 3px 10px rgba(255, 255, 255, 0.6),-3px 3px 10px rgba(255, 255, 255, 0.6),3px -3px 10px rgba(255, 255, 255, 0.6),-3px -3px 10px rgba(255, 255, 255, 0.6); /*横・縦・ぼかし・色*/
  transition: .5s;
}

/*---------------------------------------------------------*/

.main {
  margin-left: 280px;
  padding: 50px;
}

h1 {
  position: relative;
  line-height: 100%; /* 行の高さ */
  font-size: 250%;
}

h2 {
  position: relative;
  line-height: 100%; /* 行の高さ */
  font-size: 130%;
  padding: 0.6em;
  background: #323232;
}

h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 20px solid transparent;
  border-top: 15px solid #323232;
  width: 0;
  height: 0;
}

.content{
  position: relative;
  padding: 20px 0 20px 0;
}

.info1{
  position: relative;
  margin: auto;
  width: 90%;
  border-radius: 20px;
  position: relative;
  padding: 20px;
  top: 10px;
  margin-bottom: 20px;
  background: #505050;
}

.info2 {
  font-size: 120%;
  font-weight: bold;
}

.info3{
  font-size: 80%;
}

.color_yellow {
  color: #ffff1e;
}

.img_manual {
  position: relative;
  text-align: center;
}

.img_size {
  height: auto;
  width: 360px;
}

.bt {
  position: relative;
  text-align: center;
}

.button_support {
  background-color: rgba(225, 13, 13,0.8);
  border: 1px solid rgba(83, 4, 4,1);
  width: 60%;
  text-align: center;
  padding: 10px 10px 10px 10px;
  margin: 5px 0px 5px 0px;
  display: inline-block;
  transition: .6s;
}

.button_support:hover {
  background-color: rgba(131, 7, 7,0.8);
  border: 1px solid rgba(243, 58, 58,1);
  transition: .6s;
}

.button_hp {
  background-color: rgba(22, 80, 214,0.8);
  border: 1px solid rgba(14, 50, 135,1);
  width: 60%;
  text-align: center;
  padding: 10px 10px 10px 10px;
  margin: 5px 0px 5px 0px;
  display: inline-block;
  transition: .6s;
}

.button_hp:hover {
  background-color: rgba(14, 50, 133,0.8);
  border: 1px solid rgba(82, 129, 237,1);
  transition: .6s;
}

/***************************************メニュー**************************************/

.menu_box{
  position:fixed;
  background-color: #828282;
  height: 100%;
  width: 260px;
  padding:1rem;
  text-align: left;
  z-index: 2;
}

.menu_title { /*メニュータイトル*/
  font-size: 130%;
  position: relative;
  margin: 10px;
  line-height: 40px;
  font-weight: 800;
}

.menu_pc { /*メニューボタン*/
  font-size: 95%;
  position: relative;
  top: 0px;
  margin: auto;
  line-height: 40px;
}

.menu_sp { /*モバイルサイトメニュー*/
  display: none;
}

/******************************************フッター*******************************************/

#footer {
  width: 100%;
  height: auto;
  font-size: 80%;
  background-color: rgba(0, 0, 0, 1);
  position: sticky;
  z-index: 1;
}

/*---------------------------------------------------------*/

.estop { /*ブランドＴＯＰに戻る*/
  position: relative;
  top: 0px;
  color: #ffffff;
  line-height: 130%; /* 行の高さ */
  margin-left: 330px;
  padding: 30px;
  text-align: center;
}

.estop_bt {
  position: relative;
  width: 118px;
  height: 48px;
  margin: 0 auto;
  display:inline-block;
  overflow: hidden;
}

.estop_bt img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}

.estop_bt:hover img:nth-of-type(2) {
  opacity: 0;
}