@charset "utf-8";

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
}

/*//////////////////////////// ローディング画面の設定 ////////////////////////////*/
#loading {
  position: fixed;
  inset: 0;     /* top/right/bottom/left: 0;の省略形 */
  background-color: #007AB7;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
#loading img {
  animation: fadeInOut 2.5s ease-in forwards;
  z-index: 1010;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/*//////////////////////////// ヘッダーの設定 ////////////////////////////*/
header {
  width: 1366px;
  height: 94px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 100;
}
#headerContainer {
  display: flex;
  margin: 20px 103px;
  justify-content: space-between;
  align-items: center; /* ロゴとnavを上下中央に揃える */
  color: #fff;
}

#drawerOpenButton {
  display: none;
}
#drawerMenu{
  display: none;
}
#pcHeaderNav{
  width: 644px;
  font-weight: bold;
  align-items: center; /* nav内の<ul>を上下中央に揃える */
}
#pcHeaderNav ul{
  display: flex;
  justify-content: space-between;
}
#pcHeaderNav ul li:not(:first-child) { /* 最初のli以外の左に余白 */
  margin-left: 20px;
}



/*//////////////////////////// フッターの設定 ////////////////////////////*/
footer {
  width: 1366px;
  /* height: 489px; */
  background-color: #007AB7;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#taiwanFlag {
  margin-top: 40px;
  padding-top: 40px;
  text-align: center;
}

#footerLinks {
  display: flex;
  margin-top: 80px;
  border-bottom: 1px #03A9F4 solid;
  padding-bottom: 20px;
}
#footerNav{
  margin-left: 103px;
  margin-right: 120px;
  line-height: 20px;
}
#spOnlyListItem{
  display: none;
}

#footerNav ul li:not(:first-child) { /* 最初のli以外の左に余白 */
  margin-top: 20px;
}

#footerNav ul li::after {/* navメニューの下線 */
  content: "";
  display: block;
  width: 332px; /* 線の長さ */
  height: 1px;  /* 線の太さ */
  background-color: #fff; /* 線の色 */
  margin-top: 12px; /* 上に余白 */
}
#footerLogoArea {
  display: flex;
  align-items: end;
}
#footerLogoArea picture img{
  margin-right: 269px;
}
#footerSocialIcons {
  display: flex;
  justify-content: space-between; 
  width: 183px;
  
}
#footerSocialIcons a img{
  display: inline-block;
}

#copyright {
  padding-top: 20px;
  text-align: center;
  font-size: 12px;
  height: 52px;
}



/*//////////////////////////// RWDヘッダーの設定 ////////////////////////////*/
@media screen and (max-width: 768px) {
  header {
    width: 375px;
    height: 94px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    z-index: 100;
  }
  #headerContainer {
      margin-top: 8px;
      margin-right: 4px;
      margin-bottom: 0;
      margin-left: 20px;
  }
  #drawerOpenButton {
    display: inline-block;
    position: fixed;
    top: 4px;
    right: calc((100% - 375px) / 2 + 4px);  /*375px幅のbody右上に固定*/
    z-index: 200;
  }
  #drawerMenu {
    display: none;
    position: fixed;
    z-index: 300;
    top: 0;
    right: calc((100% - 375px) / 2);  /*375px幅のbody右上に固定*/
    width: 225px;
    height: 667px;
    background-color: rgba(0, 122, 183, 0.9);/*#007AB7のrgba表記*/
    background-image: url(../images/drawerLogo.png);
    background-repeat: no-repeat;
    background-position: 12px 8px;
    font-size: 20px;
    font-weight: bold;
    transform: translateX(100%); /* 初期状態：画面の外（右）に移動 */
    transition: transform 0.3s ease-in-out;
  }

  #drawerMenu.open {
    display: block;
    transform: translateX(0); /* 開いたときに表示位置へ */
  }
  #drawerClose{
    margin-top: 4px;
    margin-right: 4px;
    text-align: end;
  }
  #spHeaderNav {
    margin-top: 80px;
    text-align: center;
  }
  #spHeaderNav h2{
    font-size: 24px;
  }
  #spHeaderNav ul {
    margin-top: 60px;
  }
  #spHeaderNav ul li {
    margin-bottom: 40px;
  }
  #spHeaderNav ul li.spDrawerLinks {
    margin-bottom: 20px;
  }
  #pcHeaderNav {
    display: none;
  }


/*//////////////////////////// RWDフッターの設定 ////////////////////////////*/
  footer {
    width: 375px;
  }
  #taiwanFlag {
    padding-top: 20px;
  }
  #footerLinks {
    display: block;
    margin-top: 20px;
    border-bottom: 1px #03A9F4 solid;
    padding-bottom: 12px;
  }
  #footerNav {
    width: 195px;
    margin: 0 auto;
    margin-bottom: 40px;
  }
  #spOnlyListItem{
    display: list-item;   /* スマホの時だけ、リスト項目として表示 */
  }
  #footerNav ul li:not(:first-child) {
    margin-top: 12px;
  }
  #footerNav ul li::after {
    width: 195px;
    height: 1px;
    margin-top: 6px;
  }
  #footerLogoArea picture img {
    margin-left: 20px;
    margin-right: 24px;
  }  
  #footerSocialIcons {
    justify-content: space-between;
    width: 143px;
  }
  #copyright {
    padding-top: 12px;
    font-size: 10px;
    height: 32px;
  }
}