@charset "UTF-8";

/*====================
common
====================*/
img {
  display: block;
  margin: 0 auto;
}
#GFoot {
  padding: 10px 0;
}
#GFoot ul.caution{
  width: 100%;
  max-width: 600px;
  margin: 0 auto 50px;
  padding: 0 16px;
  line-height: 1.4;
  box-sizing: border-box;
  font-size: 11px;
}
#GFoot ul li{
  position: relative;
}
#contents section{
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
@media all and (min-width: 601px){
  #GFoot {
    padding: 30px 0 160px;
  }
  .notes{
    font-size: 14px;
    line-height: 1.4;
  }
  #section_second ul{
    width: 88%;
    display: block;
    margin: 17px auto 31px;
  }
  #section_second ul li{
    margin-bottom: 0px;
  }
}
@media only screen and (max-width: 600px){
  #GFoot .copyBlock {
      margin-top: 70px;
      /* padding-bottom: 120px; */
      font-size: 10px;
      font-size: 1rem;
  }
}
  @media only screen and (min-width: 601px), print {
  #GFoot .copyBlock {
      margin-top: 50px;
      /* padding-bottom: 220px; */
      font-size: 12px;
      font-size: 1.2rem;
  }
}

/*====================
scroll_header
====================*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #000;
}
.header img {
  width: 65%;
  height: auto;
  display: block;
  margin: 13px auto 12px;
  max-width: 470px;
}
.max_content {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
	padding-top: 86px;
}


/*====================
add
====================*/
.bottom_txt {
  background-color: #fff;
}
.bottom_txt img {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}
.btn_re {
  position: relative;
}
.btn_ab {
  position: absolute;
  margin: 0 auto;
  right: 0;
  left: 0;
}
.btn01{
  width: 80%;
  max-width: 520px;
}
.btn02{
  width: 76.5%;
  max-width: 520px;
}
.btn01 {
  top: 85%;
}
.btn02 {
  top: 82.8%;
}
.btn01 label,
.btn02 label{
  transition: .3s;
  font-size: 360%;
  font-weight: 400;
}
.btn01 label:hover,
.btn02 label:hover {
  opacity: .7;
}

/*====================
リンク（こちらの下に下線）
====================*/
/* リンク要素 */
.link {
  position: relative;
}

/* マウスオーバー時の線 */
.link::after {
  content: ""; 
  position: absolute;
  bottom: 4%;
  left: 49.5%;
  width: 9%;
  height: 2.5px;
  background-color: #000;
  transform: scaleX(0);
  transform-origin: center; 
  transition: transform 0.3s ease;
}
/* 画面幅が600px以下の時の線の太さ */
@media (max-width: 600px) {
  .link::after {
    display: none;
  }
}
/* ホバー時の線の表示 */
.link:hover::after {
  transform: scaleX(1);
}


/*====================
画面下部追従
====================*/
.download_wrapper {
  position: relative;
}
.download {
  position: absolute;
  max-width: 660px;
  width: 100%;
  z-index: 10;
}
.download.on {
  position: fixed;
  width: 100%;
  bottom: -1px;
  top: auto;
  z-index: 10;
}
/* googleplay / appstore */
.googleplay {
  position: absolute;
  bottom: 14%;
  left: 10%;
  width: 40%;
  height: 50%;
}
.appstore {
  position: absolute;
  bottom: 14%;
  right: 10%;
  width: 34%;
  height: 50%;
}

/*====================
footer上部のgoogleplay / appstore
====================*/
.footer-btn {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4%;
}
.google {
  position: absolute;
	top: 37%;
	left: 10.3%;
	width: 40%;
	height: 39%;
}
.app {
  position: absolute;
  top: 37%;
  right: 11%;
  width: 32%;
  height: 39%;
}