@charset "utf-8";
@import url(https://use.fontawesome.com/releases/v5.10.0/css/all.css);
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
/*------------------------------------------------------------
共通
------------------------------------------------------------*/
body{
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.6;
    height: 100%;
    background-color: #f3f3f3;
	  min-height: 100vh;
    background-image: url(../img/bg.svg);
    background-repeat: no-repeat;
    background-position: right -0 bottom 0;
    background-size: 35%;
    position: relative;
    border: 10px solid #b7ddf4;
}
body::after{
  z-index: -1;
  position: absolute;
  background-image: url(../img/bg2.svg);
  background-repeat: no-repeat;
  background-position: left 0 top 0;
  background-size: 40%;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
}
/*------------- header -------------*/
header{
    height: 70px;
    /* background-color: #fff; */
    z-index: 2;
}
.header_logo{
    height: 100%;
}
.header_logo img{
    height: 100%;
    padding: 5px;
    filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}

/*------------- 　footer　-------------*/
footer{
    padding: 5px;
    width: 100%;
    z-index: -1;
}
footer p{
    text-align: center;
    font-size: 10px;
}
main{
	max-width: 600px;
	margin: 0 auto;
	padding-top: 80px;
  min-height: calc(100vh - 116px);
}
.contents{
	background-color: #fff;
	border-radius: 5px;
	padding: 25px;
	margin-bottom: 20px;
  min-height: 200px;
  position: relative;
}
.cnt_inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 70%;
}
/*-------------　ボタン -------------*/
.btn_area{
    margin: 0 auto;
    text-align: center;
}
.btn_area button,
.btn_area a,
.btn_area input
{
    margin: 5px auto;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a:hover{
    opacity: 0.8;
}
/*------------- メインボタン -------------*/
.main_btn{
    background-color: #001976;
    color: #fff;
    padding: 5px 20px 3px 20px;
    min-width: 120px;
    font-size: 18px;
    border-radius: 3px;
    letter-spacing: 3px;
    text-indent: 1;
}
/*------------- 入力フォーム -------------*/
input[type="text"],
input[type="password"]
{
    border-bottom: 1px solid #001976;
    text-align: left;
    padding: 3px;
    width: 100%;
    margin: 10px 0;
    transition: 0.3s;
}
input[type="text"]:focus,
input[type="password"]:focus{
    background-color: #8fcfe686;
}
input[type="text"]::placeholder,
input[type="password"]::placeholder
{
    font-size: 13px;
    color: #61636d92;
    transition: 0.3s;
}
/*------------- 改行 -------------*/
.sp_only{
  display: none;
}

@media screen and (max-width:1200px){
	.contents{
		width: 90%;
		margin: 10px auto;
        padding: 15px;
    }
}
@media screen and (max-width:820px){
  body{
    background-position: right -0 bottom 0;
    background-size: 65%;
}
body::after{
  background-size: 100%;

}
}
@media screen and (max-width:420px){
  header{
    height: auto;
    width: 100%;
  }
  .header_logo{
    text-align: center;
    height: 100%;
    width: 90%;
    margin: 0 auto;
  }
  .header_logo img{
    width: 100%;
  }
  main{
    padding-top: 20px;
  }
  .cnt_inner{
    width: 85%;
  }
  .sp_only{
    display: block;
  }
}
/*------------- エラーメッセージ -------------*/
.error_msg{
  font-size: 13px;
  color: rgb(209, 24, 24);
  margin: 10px 0;
  text-align: left;
}
.error_msg p i{
  margin-right: 3px;
}
/*------------- サクセスメッセージ -------------*/
.success_msg{
  font-size: 13px;
  color: rgb(3, 159, 107);
  margin: 10px 0;
  text-align: center;
}
.success_msg p i{
  margin-right: 3px;
}

/*------------------------------------------------------------
パスワード入力
index.html
------------------------------------------------------------*/
.pass_area{
  width:250px;
  margin: 0 auto;
}
#index .main_btn{
  font-family: "Varela Round";
  font-size: 19px;
}
@media screen and (max-width:300px){
.pass_area{
  width: 100%;
}
}
/*------------------------------------------------------------
ダウンロード
download.html
------------------------------------------------------------*/
.download_table_area table{
  width: 100%;
  margin-bottom: 10px;
}
.download_table_area table th,
.download_table_area table td{
  padding: 10px;
  word-break: break-all;
}
.download_table_area table th{
  color: #001976;
  width: 20%;
}
.download_table_area table td{
  width: 80%;
}
.file_list li{
  padding: 5px 0;
  line-height: 1.2;
  border-bottom: 1px dotted #ddd;
  text-indent: -30px;
  padding-left: 46px;
}
.file_list li span{
  min-width: 25px;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
  font-size: 14px;
  color: #2f3037a5;
}
@media screen and (max-width:420px){
.download_table_area table th,
.download_table_area table td{
  display: block;
  width: 100%;
}
.download_table_area table th{
  padding-bottom: 0;
}
.download_table_area table td{
  padding-top: 0;
}
.file_list li span{
  min-width: 15px;
}
}
/*------------------------------------------------------------
エラーページ
error.html
------------------------------------------------------------*/
#error .contents{
  background-color: inherit;
}
.error_area{
  max-width: 400px;
  margin: 0 auto;
  color: rgb(209, 24, 24);
  text-align: center;
}
.error_area img{
  width: 100%;
  filter: hue-rotate( 15deg );
}
.error_area p i{
  margin-right: 4px;
}
/*------------------------------------------------------------
ファイルを取得できませんでした
notFound.html
------------------------------------------------------------*/
.sub_ttl{
  color: #001976;
  font-size: 20px;
  text-align: center;
}
.apology_msg{
  margin: 10px 0;
  text-align: center;
  line-height: 2;
  font-size: 16px;
}

@media screen and (max-width:420px){
.apology_msg{
  text-align: left;
  line-height: 1.5;
}
}

/*------------------------------------------------------------
トップページ
top.html
------------------------------------------------------------*/
#top_page .contents{
    display:flex;
    flex-direction: column;
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: rgba(255,255,255,0.7);
    max-width: 600px;
}
.top_ttl{
    display: block;
    text-align: center;
    font-family: 'Kite One', sans-serif;
    font-size: 55px;
    color: #3b4972;
    margin-bottom: 20px;
    font-weight: bold;
}
.top_ttl span {
   opacity: 0;
   transition: .6s ease-in-out;   /* 時間 | イージング関数 */
   -webkit-transition: .6s ease-in-out;
}

.text_up{
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    text-align: center;
    color: #3b4972;
}
.animation_txt{
    opacity: 1;
    transition-duration: .6s;
    transform: translate3d(0, 0, 0);
}


@media screen and (max-width:700px){
    .top_ttl{
        font-size: 7vw;
    }
    .contents.ttl_txt_wrap{
        padding: 20px;
    }
}
@media screen and (max-width:500px){
    .top_ttl{
        font-size: 11vw;
    }
}
/* --------------------------------------------
ローディングアニメーション
https://digipress.info/tech/css-spinner-animation-demo/
----------------------------------------------- */
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center;
          transform-origin: center;
  width: 120px;
  height: 120px;
}

/* Loading テキスト */
.spinner span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 12px;
}
.spinner.type1 {
  border-radius: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: #fff rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12);
  /* ローディング要素のアニメーションを指定 */
  -webkit-animation: spinner1_1 1.5s infinite linear forwards;
          animation: spinner1_1 1.5s infinite linear forwards;
}
.spinner.type1 span {
  /* Loading テキストのアニメーションを指定 */
  animation: spinner_loading_text 1.5s infinite linear forwards reverse;
}
_::-webkit-full-page-media, _:future, :root .spinner.type1 span {
  display: none;
}
/* ローディング要素のアニメーション内容 */
@-webkit-keyframes spinner1_1 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spinner1_1 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Loading テキストのアニメーション内容 */
@-webkit-keyframes spinner_loading_text {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes spinner_loading_text {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
.box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  -webkit-transition: all 1.2s ease; /* 1.2秒でフェードアウト */
          transition: all 1.2s ease;
  color: #fff; /* ローディングアニメーションカラー */
  background-color: #333; /* 背景カラー */
}
.loaded{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}