@charset "utf-8";
/* CSS Document */

/*==================================================
 common
==================================================*/
:root {
  --height_header: 0px;
  --height_fix_footer: 0px;
  --section: 100px;

  --base_width: 375px;
  --base_color: var(--black);
  --base_bg: var(--white);

  --font: "Noto Sans", "Noto Sans Devanagari", "Noto Sans SC", sans-serif;
  --icons: "Material Symbols Outlined";

  --transition: 0.3s;

  --black: #6f6e6f;
  --white: #ffffff;
  --gray: #ccc;

  --c_en: #007738;
  --c_chi: #39b54a;
  --c_bt: #22b573;
  --c_np: #7ebf45;
  --c_in: #31813a;
}
@media (max-width: 520px) {
  :root {
    --section: 50px;
    --base_width: 100%;
  }
}

body {
  font-family: var(--font);
  font-weight: 500;
  background: url(../images/bg.jpg) no-repeat center / cover;
  background-attachment: fixed;
}

footer {
  font-size: 1.2rem;
  text-align: center;
  padding: 20px 0;
}

main {
  position: relative;
  z-index: 5;
  overflow: visible;
  width: var(--base_width);
  min-height: 100vh;
  padding: 0;
  margin: 0 auto;
  background: var(--white);
  color: var(--base_color);
}

.tabs header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "en chi"
    "bt np"
    "in in";
}

.tabs input[type="radio"] {
  display: none;
}

.tabs header label {
  display: grid;
  grid-template-columns: 1fr 1em;
  align-items: center;
  justify-content: center;
  background: var(--c);
  padding: 5px;
  font-size: 2.6rem;
  text-align: center;
  color: var(--white);
  user-select: none;
}
.tabs header label:after {
  content: "arrow_right";
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 1em;
  height: 1em;
  border-radius: 50px;
  background: var(--white);
  color: var(--c);
  font-family: var(--icons);
  line-height: 1;
}

.tabs header label:hover {
  opacity: 0.8;
}

.tabs #en:checked ~ #content_en,
.tabs #chi:checked ~ #content_chi,
.tabs #bt:checked ~ #content_bt,
.tabs #np:checked ~ #content_np,
.tabs #in:checked ~ #content_in {
  display: block;
}

.en {
  grid-area: en;
  --c: var(--c_en);
}
.chi {
  grid-area: chi;
  --c: var(--c_chi);
}
.bt {
  grid-area: bt;
  --c: var(--c_bt);
}
.np {
  grid-area: np;
  --c: var(--c_np);
}
.in {
  grid-area: in;
  --c: var(--c_in);
}

.tabs .tab-content {
  display: none;
  padding: 16px;
  word-break: normal;
}

.tabs .tab-content .logo {
  width: 126px;
  height: auto;
  padding: 0 0 5px;
}

.tabs .tab-content :is(h2, h3) {
  color: var(--c);
  padding: 10px 5px 0;
}

.tabs .tab-content h2 {
  font-size: 2.5rem;
  line-height: 1.3;
}

.tabs .tab-content h3 {
  font-size: 1.8rem;
}

.tabs .tab-content .img-ul {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 15px auto;
  font-size: 1.7rem;
}

.tabs .tab-content picture {
  flex: none;
  width: 173px;
}

.tabs .tab-content .img-ul li {
  margin: 0 0 0.3em;
  line-height: 1.4;
}
.tabs .tab-content.in .img-ul li {
  font-size: 1.4rem;
}
.tabs .tab-content .img-ul li:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 3px 0 0;
  border-radius: 50px;
  background: var(--c);
  vertical-align: middle;
}

.tabs .tab-content .img-ul li p {
}

.tabs .tab-content .btn {
  display: block;
  margin: 15px auto;
  padding: 15px 0;
  border-radius: 20px;
  background: var(--c);
  color: var(--white);
  text-align: center;
  font-size: 2.8rem;
  box-shadow: 7px 7px 0 var(--gray);
  transition: var(--transition);
}

.tabs .tab-content .btn:hover {
  transform: translate(2px, 7px);
  box-shadow: 1px 1px 0 var(--gray);
  opacity: 1;
}