@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

.asean-wrapper {
  padding-bottom: 60px;
  font-family: "Noto Serif","Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN",serif;
}

@media (max-width: 767px) {
  .asean-wrapper {
    padding-bottom: 40px;
  }
}

.asean-main-visual {
  min-height: 420px;
  background: url(/jp/headline/asean_jp/img/kv.jpg) no-repeat 50% 50% / auto 100%;
  overflow: hidden;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .asean-main-visual {
    background-image: url(/jp/headline/asean_jp/img/kv_tb.jpg);
    background-position: calc(50% + 58px) 50%;
  }
}

@media (max-width: 767px) {
  .asean-main-visual {
    min-height: 0;
    height: calc(360vw / 3.75);
    padding-bottom: 330px;
    box-sizing: content-box;
    background-image: url(/jp/headline/asean_jp/img/kv_sp.jpg);
    background-position: 40% 0;
    background-size: 100% auto;
    background-color: #b10223;
  }
}

.asean-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 30px;
}

@media (max-width: 767px) {
  .asean-container {
    padding: 0 15px;
  }
}

.asean-container--main-visual {
  position: relative;
  min-height: 420px;
  text-align: center;
}

@media (max-width: 767px) {
  .asean-container--main-visual {
    min-height: 0;
    height: calc(360vw / 3.75);
    padding-bottom: 330px;
    box-sizing: content-box;
  }
}

.asean-main-visual-title {
  display: inline-block;
  margin-top: 53px;
  font-family: "Noto Sans JP","HiraKakuPro",-apple-system,"Lucida Grande","Helvetica Neue","メイリオ",meiryo,"Hiragino Kaku Gothic ProN",sans-serif;
  font-size: 50px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: calc(70 / 50);
  text-shadow:
    -0.5px -0.5px 0 #292929,
    0.5px -0.5px 0 #292929,
    -0.5px 0.5px 0 #292929,
    0.5px 0.5px 0 #292929;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .asean-main-visual-title {
    margin-top: 102px;
    font-size: 36px;
    line-height: calc(50 / 36);
  }
}

@media (max-width: 767px) {
  .asean-main-visual-title {
    margin-top: calc(178vw / 3.75);
    font-size: calc(34vw / 3.75);
    line-height: calc(47.6 / 34);
  }
}

.asean-main-visual-title__sub {
  display: block;
  margin: 20px -6% 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 40px;
  font-weight: normal;
  letter-spacing: 0.27em;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .asean-main-visual-title__sub {
    margin: 18px -3% 0;
    padding-top: 1px;
    font-size: 29px;
    line-height: calc(67 / 29);
  }
}

@media (max-width: 767px) {
  .asean-main-visual-title__sub {
    margin: 15px -10% 0;
    padding-top: 12px;
    font-size: calc(28vw / 3.75);
  }
}

.asean-main-visual-btn-list {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -10px;
  padding: 0 10px;
}

@media (max-width: 1150px) {
  .asean-main-visual-btn-list {
    position: static;
    margin-bottom: 10px;
  }
}

@media (max-width: 767px) {
  .asean-main-visual-btn-list {
    bottom: calc(40vw / 3.75);
    display: block;
    margin: 0;
    padding: 0;
  }
}

.asean-main-visual-btn-list__item {
  padding: 0 10px;
}

@media (min-width: 768px) and (max-width: 1150px) {
  .asean-main-visual-btn-list__item {
    flex-basis: 50%;
    margin-bottom: 20px;
  }

  .asean-main-visual-btn-list__item:nth-child(1) {
    flex-basis: 100%;
  }
}

@media (max-width: 767px) {
  .asean-main-visual-btn-list__item {
    margin-top: 20px;
    padding: 0;
  }
}

.asean-main-visual-btn-list__btn {
  display: block;
  width: 353px;
  padding: 16px 20px;
  background: url(/jp/headline/asean_jp/img/icon_arrow.svg) no-repeat right 16px top 50%;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  font-size: 16px;
  font-weight: bold;
  color: #725E1D;
  text-decoration: none;
}

@media (min-width: 768px) and (max-width: 1150px) {
  .asean-main-visual-btn-list__item:nth-child(1) .asean-main-visual-btn-list__btn {
    margin-left: auto;
    margin-right: auto;
  }

  .asean-main-visual-btn-list__item:nth-child(2) .asean-main-visual-btn-list__btn {
    margin-left: auto;
  }

  .asean-main-visual-btn-list__item:nth-child(3) .asean-main-visual-btn-list__btn {
    margin-right: auto;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .asean-main-visual-btn-list__btn {
    width: 330px;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .asean-main-visual-btn-list__btn {
    width: auto;
    max-width: 345px;
    margin: 0 auto;
  }
}

.asean-section {
  padding: 60px 0;
}

@media (max-width: 767px) {
  .asean-section {
    padding: 40px 0;
  }
}

.asean-section--bg-grad {
  background: linear-gradient(to bottom, #FFFAED, rgba(255, 255, 255, 0.7));
}

@media (max-width: 767px) {
  .asean-section--bg-grad {
    background: linear-gradient(to bottom, #FDF5DD, rgba(255, 255, 255, 0.7));
  }
}

.asean-section--bg-cream {
  background-color: #FFF9EB;
}

.asean-section-title {
  margin: 0;
  padding-bottom: 35px;
  background: url(/jp/headline/asean_jp/img/radial_lines.svg) no-repeat 50% 100%;
  font-size: 28px;
  color: #725E1D;
  text-align: center;
  line-height: calc(42 / 28);
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .asean-section-title {
    padding-bottom: 28px;
    background-size: 100px 15px;
    font-size: 22px;
  }
}

.asean-message-text {
  margin-top: 25px;
  font-size: 18px;
  color: #000;
  text-align: center;
  line-height: calc(37 / 18);
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .asean-message-text {
    margin-top: 20px;
  }
}

.asean-history {
  position: relative;
  margin-top: 57px;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .asean-history {
    margin-top: 28px;
  }
}

.asean-history::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  background: linear-gradient(to bottom, #7B600C, rgba(188, 155, 52, 0.57));
  border-radius: 5px;
}

@media (max-width: 767px) {
  .asean-history::before {
    left: 15px;
    transform: none;
    width: 4px;
  }
}

.asean-history__item {
  position: relative;
  max-width: calc(536% / 10.8);
  padding-right: 80px;
}

@media (max-width: 767px) {
  .asean-history__item {
    padding-right: 0;
    padding-left: 62px;
    max-width: none;
  }
}

.asean-history__item:nth-child(odd) {
  text-align: right;
}

@media (max-width: 767px) {
  .asean-history__item:nth-child(odd) {
    text-align: left;
  }
}

.asean-history__item:nth-child(even) {
  margin-left: auto;
  padding-left: 80px;
  padding-right: 0;
}

@media (max-width: 767px) {
  .asean-history__item:nth-child(even) {
    padding-left: 62px;
  }
}

.asean-history__item:nth-child(2) {
  margin-top: -150px;
}

.asean-history__item:nth-child(3) {
  margin-top: -10px;
}

.asean-history__item:nth-child(4) {
  margin-top: -10px;
}

.asean-history__item:nth-child(5) {
  margin-top: -180px;
}

.asean-history__item:nth-child(6) {
  margin-top: -380px;
}

@media (max-width: 767px) {
  .asean-history__item:nth-child(2),
  .asean-history__item:nth-child(3),
  .asean-history__item:nth-child(4),
  .asean-history__item:nth-child(5),
  .asean-history__item:nth-child(6) {
    margin-top: 25px;
  }
}

.asean-history__item::before {
  content: '';
  position: absolute;
  z-index: 1;
  width: 32px;
  height: 32px;
  background-color: #fff;
  border: 8px solid;
  border-radius: 50%;
}

@media (max-width: 767px) {
  .asean-history__item::before {
    width: 26px;
    height: 26px;
    border-width: 6px;
  }
}

.asean-history__item:nth-child(odd)::before {
  top: 12px;
  right: -20px;
}

.asean-history__item:nth-child(even)::before {
  top: 8px;
  left: -20px;
}

@media (max-width: 767px) {
  .asean-history__item:nth-child(odd)::before,
  .asean-history__item:nth-child(even)::before {
    top: 5px;
    right: auto;
    left: 4px;
  }
}

.asean-history__item:nth-child(1)::before {
  top: 0;
  right: -32px;
  width: 56px;
  height: 56px;
  border-color: #7D620E;
  border-width: 14px;
}

@media (max-width: 767px) {
  .asean-history__item:nth-child(1)::before {
    right: auto;
    left: 1px;
    width: 32px;
    height: 32px;
    border-width: 8px;
  }
}

.asean-history__item:nth-child(2)::before {
  border-color: #8B711F;
}

.asean-history__item:nth-child(3)::before {
  border-color: #AA9247;
}

.asean-history__item:nth-child(4)::before {
  border-color: #B19A51;
}

.asean-history__item:nth-child(5)::before {
  border-color: #BAA35C;
}

.asean-history__item:nth-child(6)::before {
  border-color: #C3AE6A;
}

.asean-history__year {
  font-size: 45px;
  line-height: calc(45 / 32);
}

.asean-history__year {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  font-size: 32px;
  color: #725E1D;
  line-height: calc(40 / 32);
}

@media (max-width: 767px) {
  .asean-history__year {
    font-size: 22px;
  }
}

.asean-history__year::before {
  display: none;
}

.asean-history__year::after {
  content: '';
  position: absolute;
  width: 52px;
  height: 2px;
  background-image : linear-gradient(to right, #725E1D, #725E1D 4px, transparent 4px, transparent 4px);
  background-size: 8px 2px;
  background-position: left bottom;
  background-repeat: repeat-x;
}

@media (max-width: 767px) {
  .asean-history__year::after {
    width: 20px;
  }
}

.asean-history__item:nth-child(odd) .asean-history__year::after {
  top: calc(50% + 4px);
  right: -60px;
}

.asean-history__item:nth-child(even) .asean-history__year::after {
  top: calc(50%);
  left: -60px;
}

.asean-history__item:nth-child(1) .asean-history__year::after {
  right: -46px;
  width: 36px;
}

@media (max-width: 767px) {
  .asean-history__item:nth-child(odd) .asean-history__year::after,
  .asean-history__item:nth-child(even) .asean-history__year::after,
  .asean-history__item:nth-child(1) .asean-history__year::after {
    top: 17px;
    right: auto;
    left: -25px;
    width: 20px;
  }
}

@media (max-width: 767px) {
  .asean-history__item:nth-child(1) .asean-history__year::after {
    top: 15px;
    left: -22px;
  }
}

.asean-year-value {
  font-size: 45px;
  line-height: calc(40 / 45);
}

@media (max-width: 767px) {
  .asean-year-value {
    font-size: 34px;
  }
}

.asean-history__title {
  margin-top: 15px;
  margin-bottom: 0;
  font-size: 24px;
  color: #725E1D;
  line-height: calc(33.6 / 24);
}

@media (max-width: 767px) {
  .asean-history__title {
    margin-top: 13px;
    font-size: 18px;
    line-height: calc(28.8 / 18);
  }
}

.asean-history__text {
  margin-top: 15px;
  font-size: 16px;
  line-height: calc(27.2 / 16);
  color: #000;
  text-align: left;
}

@media (max-width: 767px) {
  .asean-history__text {
    margin-top: 13px;
  }
}

.asean-history__text a {
  color: #725E1D;
}

.asean-history__img {
  margin: 27px 0 0;
}

@media (max-width: 767px) {
  .asean-history__img {
    margin-top: 20px;
  }
}

.asean-history__img img {
  width: 100%;
  max-width: 333px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

@media (max-width: 767px) {
  .asean-history__img img {
    max-width: 100%;
  }
}

.asean-media {
  margin-top: 37px;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .asean-media {
    margin-top: 20px;
  }
}

.asean-media__item {
  display: flex;
  margin-top: 24px;
  padding: 32px 16px;
  background-color: #fff;
}

@media (max-width: 767px) {
  .asean-media__item {
    display: block;
    padding: 16px;
  }
}

.asean-media__item:nth-child(1) {
  margin-top: 0;
}

.asean-media__col {
  padding: 0 16px;
}

@media (max-width: 767px) {
  .asean-media__col {
    padding: 0;
  }
}

.asean-media__col--img {
  width: calc(302% / 10.48);
}

.asean-media__col--text {
  width: calc(746% / 10.48);
}

@media (max-width: 767px) {
  .asean-media__col--img,
  .asean-media__col--text {
    width: auto;
  }
}

.asean-media__img {
  margin: 0;
}

@media (max-width: 767px) {
  .asean-media__img {
    text-align: center;
  }
}

.asean-media__img img {
  vertical-align: top;
}

.asean-media__title {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  font-size: 20px;
  line-height: calc(28 / 20);
}

@media (max-width: 767px) {
  .asean-media__title {
    margin-top: 16px;
  }
}

.asean-media__title::before {
  display: none;
}

.asean-media__title a {
  color: #725E1D;
}

.asean-media__date {
  margin-top: 4px;
  margin-left: 3px;
  font-size: 16px;
  color: #666;
  line-height: calc(27.2 / 16);
}

.asean-media__text {
  margin-top: 12px;
  margin-left: 3px;
  font-size: 16px;
  color: #000;
  line-height: calc(27.2 / 16);
}

.asean-section-text {
  margin-top: 28px;
  font-size: 18px;
  text-align: center;
  line-height: calc(28.8 / 18);
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .asean-section-text {
    margin-top: 20px;
  }
}

.asean-youtube-wrap {
  max-width: 800px;
  margin: 28px auto 0;
}

.asean-youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 6px;
  overflow: hidden;
}

.asean-youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.asean-sns {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.asean-sns__item {
  padding: 0 15px;
}

@media (max-width: 767px) {
  .asean-sns__item {
    padding: 0 11px;
  }
}

.asean-sns__item a {
  display: block;
  width: 56px;
  height: 56px;
  transition: opacity .3s;
}

@media (max-width: 767px) {
  .asean-sns__item a {
    width: 38px;
    height: 38px;
  }
}

.asean-sns__item a:hover {
  opacity: 0.8;
}

.asean-nowrap {
  white-space: nowrap;
  display: inline-block;
}

@media (max-width: 767px) {
  .asean-pc-block {
    display: none;
  }
}

/* additional elements 12/15 */

.asean-movie {
  width: 74%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}
@media (max-width: 767px) {
  .asean-movie {
    width: 100%;
    margin-top: 40px;
  }
}

.asean-col2 {
  display: flex;
  justify-content: space-between;
  width: 69.074074%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}
.asean-col2-item {
  width: 47.319035%;
}
.asean-result-button {
  display: block;
  background: #725E1D;
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
  width: 100%;
  text-align: center;
  padding: 10px 30px;
  text-decoration: none;
  border-radius: 8px;
}
.asean-result-button:hover {
  opacity: 0.8;
}
.asean-result-translation,
.asean-result-other {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1;
}
.asean-result-translation::before,
.asean-result-other::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 6px;
  margin-right: 6px;
  transform: rotate(-90deg);
  background: url(/jp/n5-common/img/r_icon_arrow_brown.svg) no-repeat;
}
.asean-result-translation a,
.asean-result-other a {
  color: #000;
  text-decoration: none;
}
.asean-result-translation a:hover,
.asean-result-other a:hover {
  text-decoration: underline;
}
.asean-result-other {
  margin-top: 40px;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .asean-col2 {
    width: 100%;
    flex-direction: column;
    margin-top: 20px;
  }
  .asean-col2-item {
    width: 100%;
  }
  .asean-col2-item + .asean-col2-item {
    margin-top: 30px;
  }
  .asean-result-other {
    margin-top: 30px;
  }
}


.asean-article-container {
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .asean-article-container {
    margin-top: 15px;
  }
}

.asean-article-tab-list {
  display: flex;
}

.asean-article-tab-list > button {
  height: 80px;
  margin-left: 5px;
  padding-top: 10px;
  background-color: #fcf6e7;
  flex: 1 1 270px;
  font-size: 1.125rem;
  font-weight: bold;
  color: #78631f;
  transition: opacity 0.3s;
}

.asean-article-tab-list > button:hover {
  opacity: 0.8;
}

@media screen and (max-width: 767px) {
  .asean-article-tab-list > button:hover {
    opacity: 1;
  }
}

@media screen and (max-width: 767px) {
  .asean-article-tab-list > button {
    height: 90px;
    padding-top: 0;
    flex: 1 1 90px;
    font-size: 1rem;
  }
}

.asean-article-tab-list > button:first-of-type {
  margin-left: 0;
}

.asean-article-tab-list > button[aria-selected='true'] {
  background-color: #efe2bf;
  border-top: 5px solid #78631f;
}

.asean-article-tab-list > button:disabled {
  color: #b2b2b2;
  background-color: #efefef;
  cursor: default;
}

.asean-article-tab-list > button:disabled > svg {
  fill: #b2b2b2;
}

.asean-article-tab-list > button > svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 5px auto 0;
  fill: #78631f;
}

.asean-article-content {
  background-color: #fcf9f2;
  border: 10px solid #efe2bf;
  padding: 10px;
}

@media screen and (max-width: 767px) {
  .asean-article-content {
    padding: 5px;
  }
}

.asean-article-tabpanel[aria-hidden='true'] {
  display: none;
}

.asean-article-tabpanel .module-article-list__body {
  margin-top: -20px;
  margin-left: -20px;
}

@media screen and (max-width: 767px) {
  .asean-article-tabpanel .module-article-list__body {
    margin-top: -5px;
    margin-left: 0;
  }
}

.asean-article-tabpanel .module-article-list__item {
  width: calc(33.33% - 20px);
  max-width: 340px;
  margin-top: 20px;
  margin-left: 20px;
}

@media screen and (max-width: 767px) {
  .asean-article-tabpanel .module-article-list__item {
    width: 100%;
    max-width: 100%;
    margin-top: 5px;
    margin-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .asean-article-tabpanel .module-article-list__item:nth-child(n + 4) {
    display: none;
  }
}

.asean-article-tabpanel .module-article-list__item:nth-child(n + 7) {
  display: none;
}

.asean-article-tabpanel .module-article-list__item.is-visible {
  display: flex;
}

.asean-article-tabpanel .module-article-list__item-main {
  height: 100%;
}

.asean-article-tabpanel .module-article-list__item-main > a {
  height: 100%;
  padding-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .asean-article-tabpanel .module-article-list__item-main > a {
    display: flex;
    padding: 5px;
    background-color: #fff;
  }
}

@media screen and (max-width: 767px) {
  .asean-article-tabpanel .module-article-list__item-head {
    width: 29.3333333333vw;
    height: 17.6vw;
    flex: 0 0 29.3333333333vw;
    padding-top: 0;
    margin-right: 16px;
  }
}

@media screen and (max-width: 767px) {
  .asean-article-tabpanel .module-article-list__item-img {
    background-size: 50px auto;
  }
}

.asean-article-tabpanel .module-article-list h2 {
  font-size: 1rem;
  font-weight: bold;
  margin: 18px 20px 0;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .asean-article-tabpanel .module-article-list h2 {
    margin: 0;
  }
}

.asean-article-tabpanel .module-article-list__item-update {
  margin: 4px 20px 0;
}

@media screen and (max-width: 767px) {
  .asean-article-tabpanel .module-article-list__item-update {
    margin: 10px 0 0;
  }
}

.asean-article-tabpanel .module-article-list .module-more {
  margin-top: 20px;
}