@charset "UTF-8";
/* login
------------------------------- */

.pointer {
  cursor: pointer;
}



.bg-brownlogin{
    background: url(../images/bg01.png) no-repeat center center;
    background-size: cover;
    min-height: 100vh;
}


/*タイトル画像*/
.title_appdownload {
  width: auto;
  height: auto;
  padding: 0;
  margin: 5% auto 2% auto;
  max-width: 65%;
  text-align: center;
}

.textbox p{
  text-align: center;
  font-size: clamp(7px, 2vw, 20px);
  font-weight:bold;
  color: #371d03;
}

.appbox{
  display: flex;
  margin: 5% 20% 10% 20%;;
}


.icon{
  width: 40%;
  margin: 0em 0em 0em 0em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.iconImage{
  max-width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.download{
  width: 60%;
  display:block;
}

.downloadButton{
  margin: 0% 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.explanationbox{
  /* display: flex; */
  margin: 5% 10% 10% 10%;
}

.explanation1{
  width: 100%;
  margin: 5% auto;
  display: block;
  justify-content: center;
  align-items: center;
  position: relative;
  
  content: url("../images/C_1_infoAndroid_1.png");
}

.explanation2{
  width: 100%;  
  margin: 5% auto;
  display: block;
  justify-content: center;
  align-items: center;
  position: relative;
  
  content: url("../images/C_1_infoiOS_1.png");
}

.explanation3{
  width: 100%;
  margin: 5% auto;
  display: block;
  justify-content: center;
  align-items: center;
  position: relative;
  
  content: url("../images/C_1_infoWindows_1.png");
}

.explanation1_en{
  width: 100%;
  margin: 5% auto;
  display: block;
  justify-content: center;
  align-items: center;
  position: relative;
  
  content: url("../images_en/C_1_infoAndroid_1.png");
}

.explanation2_en{
  width: 100%;  
  margin: 5% auto;
  display: block;
  justify-content: center;
  align-items: center;
  position: relative;
  
  content: url("../images_en/C_1_infoiOS_1.png");
}

.explanation3_en{
  width: 100%;
  margin: 5% auto;
  display: block;
  justify-content: center;
  align-items: center;
  position: relative;
  
  content: url("../images_en/C_1_infoWindows_1.png");
}

/*********************************************************
 モバイル版 命令
 800px以下の場合の処理
 *********************************************************/
@media (max-width: 800px) {

  .contentswidth{
    width: 100%;
   }


   .explanationbox{
    display: block;
    margin: 5% 20% 10% 20%;;
  }

  .explanation1{
    width: 100%;
    margin: 10% auto;
    display: block;
    justify-content: center;
    align-items: center;
    position: relative;

    content: url("../images/C_1_infoAndroid.png");
  }
  
 .explanation2{
    width: 100%;
    margin: 10% auto;
    display: block;
    justify-content: center;
    align-items: center;
    position: relative;

    content: url("../images/C_1_infoiOS.png");
  }

   .explanation3{
    width: 100%;
    margin: 10% auto;
    display: block;
    justify-content: center;
    align-items: center;
    position: relative;

    content: url("../images/C_1_infoWindows.png");
  }

   .explanation1_en{
    width: 100%;
    margin: 10% auto;
    display: block;
    justify-content: center;
    align-items: center;
    position: relative;

    content: url("../images_en/C_1_infoAndroid.png");
  }
  
 .explanation2_en{
    width: 100%;
    margin: 10% auto;
    display: block;
    justify-content: center;
    align-items: center;
    position: relative;

    content: url("../images_en/C_1_infoiOS.png");
  }

   .explanation3_en{
    width: 100%;
    margin: 10% auto;
    display: block;
    justify-content: center;
    align-items: center;
    position: relative;

    content: url("../images_en/C_1_infoWindows.png");
  }
}