:root{
	--color-mainblue:#004B6C;
	--color-gray:#DBDCE1;
	
  /* 0. 極小：（10px → 12px） */
  --text-xxs: clamp(1rem, 0.917rem + 0.221vw, 1.2rem);
  /* 1. 小：（12px → 14px） */
  --text-xs: clamp(1.2rem, 1.117rem + 0.221vw, 1.4rem);
	/* 2. 標準：（SP 13px → PC 12px） */
	--text-base: clamp(1.2rem, 1.341rem - 0.11vw, 1.3rem);
  /* 2. 中小：（14px → 16px） */
  --text-ms: clamp(1.4rem, 1.317rem + 0.221vw, 1.6rem);
  /* 3. 中：（16px → 20px） */
  --text-md: clamp(1.6rem, 1.434rem + 0.442vw, 2rem);
  /* 3.5 中大：（20px → 24px） */
  --text-ml: clamp(2rem, 1.834rem + 0.442vw, 2.4rem);
  /* 4. 大：（24px → 32px） */
  --text-lg: clamp(2.4rem, 2.069rem + 0.884vw, 3.2rem);
  /* 4.5 準特大：（28px → 36px） */
  --text-mlg: clamp(2.8rem, 2.469rem + 0.884vw, 3.6rem);
  /* 5. 特大：（32px → 48px） */
  --text-xl: clamp(3.2rem, 2.538rem + 1.768vw, 4.8rem);
}

.bg_gray			{background-color:var(--color-gray);}
.bg_grayblue	{background-color:#678CA7;}

.text_l	{font-size:1.5em;}
.text_white	{color:#fff;}


@media screen and (min-width: 768px) {
	.image_pc_half{
		width:70%;
		margin:auto;
	}
}

.btn_readmore {
  display: inline-flex;
  align-items: center;
	justify-content:center;
  gap: 8px;
  padding: 0.5em 1em;
	font-size:1.2rem;
  color: var(--color-mainblue);
  border: 1px solid var(--color-mainblue);
  border-radius: 5px;
  background-color: #ffffff;
  transition: background-color 0.3s ease, color 0.3s ease;
	min-width:140px;
  .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
  }
  &:hover {
    background-color: var(--color-mainblue);
    color: #ffffff;
    .arrow {
      transform: translateX(6px);
    }
  }
}

.en_title{
	font-weight:500;
	font-size:var(--text-ml);
}
.en_title_sub{
	margin-top:-1em;
	font-size:var(--text-ms);
}

.business_card {
	--padding-size:14px;
	
  display: block;
  padding: var(--padding-size);
  background-color: #ffffff;

  .business_card_title {
    margin: 0 0  var(--padding-size);;
    font-size: var(--text-md);
    font-weight: 500;
    text-align: center;
  }

  .business_card_img_wrap {
    position: relative;
    margin: 0 calc(var(--padding-size) * -1);
		.business_card_img {
			display:block;
		}
    .icon_circle_arrow {
      position: absolute;
      top: 12px;
      right: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background-color: #ffffff;
      border-radius: 50%;
      font-size: 1.8rem;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }
  }
  .business_card_link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top:  var(--padding-size);
    font-size: var(--text-ms);
    .link_arrow {
      transition: transform 0.3s ease;
    }
  }

  &:hover {
    .icon_circle_arrow {
      transform: translateX(6px);
      background-color: var(--color-mainblue);
      color: #ffffff;
    }
    .link_arrow {
      transform: translateX(6px);
    }
  }
}

.bgimage_text{
	background-size:cover;
	background-position:center center;
	padding:16px;
	&.top_sustinability{
		background-image:url("/en/images/top/top_sustainability_bg.webp");
	}
}
@media screen and (min-width: 768px) {
	.bgimage_text{
		&.top_sustinability{
			padding:5% 15%;
		}
	}
}


.award_card{
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  grid-template-areas: "text image";
  gap: 24px;
  align-items: top;
	background-color:#D9E2E5;
	border-radius:10px;
	padding:20px;

  .award_card_text {
    grid-area: text;
		.award_card_text_title{
			font-size:var(--text-ms);
			font-weight:500;
			margin-bottom:0.5em;
		}
  }

  .award_card_image {
    grid-area: image;
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  @media (max-width: 767px) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "text";
    gap: 20px;
  }
}

.en_products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;

  .product_card {
    display: grid;
    .product_card_img_wrap,
    .product_card_title {
      grid-area: 1 / 1;
    }
    .product_card_img_wrap {
      display: block;
      width: 100%;
      height: auto;
    }
    .product_card_title {
      z-index: 1;
      margin: 8% 5% 0;
      font-size: var(--text-md);
      font-weight: 500;
      text-align: center;
			line-height:1.5;
    }
  }
  @media (max-width: 767px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}


.en_footer{
	padding:0;
	.en_foot_menu{
		background-color:var(--color-mainblue);
		display:flex;
		justify-content:center;
		gap:20px;
		padding:30px 0;
		a{
			color:#fff;
			font-weight:400;
			font-size:var(--text-base);
			transition: transform 0.3s ease;
			&:hover{
				color:#e74f17;
				transition: transform 0.3s ease;
			}
		}
	}
}


.cookie_popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 10;

  max-width: 800px;
  margin: 0 auto;

  background: #fff;
  border: 1px solid var(--color-mainblue);
  color: var(--color-mainblue);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

  &.is_hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .cookie_popup_inner {
    padding: 18px 24px 17px;
  }

  .cookie_popup_text {
    margin: 0;
    line-height: 1.3;
  }

  .cookie_popup_buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 19px;
    margin-top: 10px;
  }

  .cookie_accept,
  .cookie_privacy {
    display: flex;
    align-items: center;
    justify-content: center;
		font-size:var(--text-base);
    width: 150px;
    min-height: 35px;
    border: 1px solid var(--color-mainblue);
    border-radius: 5px;
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }

  .cookie_accept {
    background: var(--color-mainblue);
    color: #fff;
    &:hover {
      background: #003f57;
    }
  }

  .cookie_privacy {
    background: #fff;
    color: var(--color-mainblue);
    &:hover {
      background: var(--color-mainblue);
      color: #fff;
    }
  }
}
@media (max-width: 768px) {
  .cookie_popup {
    left: 10px;
    right: 10px;
    bottom: 10px;

    .cookie_popup_inner {
      padding: 18px;
    }

    .cookie_popup_text {
      font-size: 14px;
      line-height: 1.5;
    }

    .cookie_popup_buttons {
      gap: 10px;
    }

    .cookie_accept,
    .cookie_privacy {
      width: 50%;
    }
  }
}