/* ------------------------

COLOURS:

#00233B - dark blue
#E84333 - orange
#009FE3 - blue
#E4E4E4 - grey bg

-------------------------------*/

/* ------------------------ BASE -------------------------------*/


/*
 * Font smoothing
 * http://www.icondeposit.com/blog:how-to-properly-smooth-font-using-css3
 * http://stackoverflow.com/questions/8053389/how-to-reduce-font-weight-in-firefox-on-mac-with-css
 */

html,
html a {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}



/* ------------------------ LAYOUT -------------------------------*/



body {
    /* DUPLICATE blog.css */
    font-family: 'Montserrat', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 93%;
    line-height: 1.6em;
    color: #00233B;
    letter-spacing: 0.005em;
    /* END DUPLICATE blog.css */
    padding: 0;
    margin: 0 auto;
    background-color: #00233B;
}

.page_width {
    max-width: 1210px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.narrow_width {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

#page {
    margin: 0 auto;
    padding-top: 0px;
    padding-bottom: 30px;
}

#page_wrap {
    background: #fff;
    overflow: hidden;
}

.no_js_message {
    text-align: center;
    padding: 40px 15px 15px 15px;
    color: #fff;
    z-index: 2000;
    position: fixed;
    font-size: 1.8em;
    line-height: 1.5em;
    background: #888;
    opacity: 0.9;
    top: 0px;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    right: 0;
}
.no_js_message a {
    color: #fff;
}

.flex {
	display: flex;
}

.space_around {
    justify-content: space-around;
}

.space_between {
    justify-content: space-between;
}

.videoWrapper {
    position: relative;
    padding-bottom: 47.25%;
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

h1, .main_content {
    opacity: 0;
    transform: translateY(-25px);
    transition: all 500ms ease-in-out;
}

header.with_fade {
  opacity: 0;
  transition: all 500ms ease-in-out;
}

header.with_fade.showing ,h1.active, .main_content.active {
    opacity: 1;
    transform: translateY(0px);
}

.fade_in {
    animation: fadeIn ease 2s;
    animation-iteration-count: infinite;
}

@keyframes fadeIn {
    0% {opacity:0;}
    50% {opacity:1;}
    100% {opacity:0;}
}

.wrapper .fade_in {
    transition: all 250ms ease-in-out;
    opacity: 0;
    transform: scale(0);
    height: 0px;
}

.wrapper.active .fade_in {
    opacity: 1;
    transform: scale(0.5);
    height: auto;
}

/* ------------------------ LINK Styles -------------------------------*/

a {
    color: #E84333;
    text-decoration: underline;
    transition: all 500ms ease-in-out;
}

a:hover {
    color: #00233B;
    text-decoration: underline;
}

/* ------------------------ TYPE Styles -------------------------------*/

b, strong {
	font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* DUPLICATE to title__input above */
    font-weight: normal;
    font-size: 2.5em;
    margin: 25px 0;
    line-height: 1.1em;
    letter-spacing: 0.03em;
    /* END - DUPLICATE to title__input above  */
}

h1 {
    margin-top: 0;
    letter-spacing: 0;
}

h2 {
    font-size: 1.8em;
    line-height: 1.2em;
}

h3,
h4,
h6 {
    font-size: 1.5em;
    color: #E84333;
}

h5 {
    font-size: 12px;
    line-height: 1.3em;
}

::-moz-selection { background: #0A3856; color: #fff; text-shadow: none; }
::selection { background: #0A3856; color: #fff; text-shadow: none; }

ul,
ol {
    list-style: disc;
    list-style-position: outside;
}

b,
strong {
    font-weight: bold;
}

strong.shatai {
  font-style: italic;
}

p,
pre {
    margin: 17px 0 17px 0;
}

dl,
ul,
ol,
address {
    margin: 15px 0 15px 0;
    padding: 0 0 0 40px;
}

dt,
li:not(.blocks-gallery-item) {
    margin: 10px 0 10px 0;
}

dl dd {
    margin-left: 10px;
}

address {
    font-style: italic;
}

pre {
    white-space: pre;
}

cite {
    font-style: normal;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

blockquote {
    background: #ccc;
    padding: 10px;
    font-size: 1.1em;
    margin: 0 25px;
    width: auto;
    border: none !important;
}

small {
    font-size: 0.9em;
}

big {
    font-size: 1.1em;
}

.red {
    color: #FF1923;
}

em {
    font-style: italic;
}

.nowrap {
    white-space: nowrap;
}



/* ------------------------ TABLES Styles -------------------------------*/

table {
    margin: 15px 0 15px 0;
    border-collapse: collapse;
    border: 1px #ebebeb solid;
}

td, .wp-block-table td, .wp-block-table th {
    padding: 10px;
    vertical-align: top;
}

tr td {
    border: 1px #ebebeb solid;
}



/* ------------------------ MISC -------------------------------*/

hr {
    border: none;
    border-bottom: 1px solid #f4f4f4;
    color: #f4f4f4;
    height: 1px;
    padding: 0;
    margin: 15px 0 15px 0;
    clear: both;
}

hr.dotted {
  border-bottom: none;
  border-bottom-style: dotted;
  border-bottom-width: 2px;
  border-bottom-color: #cecfce;
  margin: 30px 0;
  position: relative;
}

img {
    max-width: 100%;
    height: auto;
}

/* ------------------------ BUTTON STYLES - DUPLICATE TO blog.css wp-block-file__button -------------------------------*/

button,
.button,
.wp-block-file__button,
.wp-block-file .wp-block-file__button,
.wp-block-button__link {
    border: none;
    background-color: #0A3856;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 15px;
    /* change in IE STYLES  */
    color: #fff !important;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    width: auto;
    /* IE FIX  */
    overflow: visible;
    /* IE FIX  */
    font-size: 1em;
    text-decoration: none;
    transition: all 250ms ease-in-out;
    letter-spacing: 0.05em;
    font-weight: bold;
    display: inline-block;
    border-radius: 0;
    line-height: 1.15;
    box-sizing: border-box;
    text-align: center;
}

button:hover,
.button:hover,
.wp-block-file__button:hover,
.wp-block-button__link:hover {
    background-color: #878787;
    text-decoration: none;
}

blockquote {
    box-sizing: border-box;
    box-shadow: 0px 3px 5px 3px rgba(0,0,0,0.075);
    padding: 2px 20px;
    position: relative;
    background: #fff;
    font-size: 28px;
    margin: 40px 0;
    line-height: 1.25em;
}

blockquote.float_left {
  float:left;
  width:50%;
  margin: 20px;
}

.main_content {
    max-width: 750px;
    margin: 0 auto;
    position: relative;
}

.main_content.full_width {
  max-width: none;
}

.inner_750 {
  max-width: 750px;
  margin: 0 auto;
  position: relative;
}

.has_banner .main_content {
    top: -50px;
}

.home-202203 .has_banner .main_content,
.home-202210 .has_banner .main_content,
.home-202303 .has_banner .main_content,
.home-202309 .has_banner .main_content,
.home-202403 .has_banner .main_content  {
  top: 20px;
}

.id-home .main_content, .id-archive .main_content {
    max-width: none;
}

.has_banner h1 {
    position: relative;
    top: -93px;
    left: 0px;
    font-size: 40px;
    margin: 0;
    padding: 7px 15px;
    background: rgba(255,255,255,0.8);
    display: inline-block;
}

.banner_image_credit {
  position: relative;
  top: -64px;
  right: 0;
  text-align: right;
  font-size: 0.8em;
  line-height: 1.4em;
}

.top_image_credit {
  position: absolute;
  right: 10px;
  margin-top: -8px;
  font-size: 0.8em;
}

.id-home .has_banner h1{
    display: none;
}

.id-contents .entries h3 {
    margin-bottom: 2px;
}

.id-contents .entries p {
    margin-top: 4px;
}

.id-archive #content_wrap {
  position: relative;
}

.id-archive .has_banner h1 {
  position: absolute;
  top: 10px;
  left: 0px;
}

.id-international_schools .no_banner h1, .id-esg .no_banner h1{
    margin-top: 60px;
}

.id-atsumi_sakai .has_banner h1:before, .id-international_schools h1:after, .id-lessonsearthquake h1:before, .id-roadtozero h1:before, .id-esg h1:after, .id-nishimachi h1:before, .id-dubai2020osakakansai2025 h1:before, .id-tokyo2020osakakansai2025 h1:before, .id-apowerofgood h1:before, .id-makingwaves h1:before, .id-digitalgardencitypartone h1:before, .id-digitalgardencityparttwo h1:before, .id-ahealthyinvestment h1:before{
    content: 'Advertising Feature';
    background: #FDB812;
    padding: 9px 15px;
    text-transform: uppercase;
    font-size: 14px;
    color: #00233B;
    position: absolute;
    top: -32px;
    left: 0;
    line-height: 1em;
    font-weight: bold;
    letter-spacing: 0.025em;
    display: block;
}

.id-atsumi_sakai .has_banner h1:before {
    content: 'Partner content by Atsumi & Sakai';
}

.id-international_schools h1:after {
    content: 'Partner content by MEES/NEW IS';
}

.id-lessonsearthquake h1:before {
  content: 'Partner content by The Government of Japan';
}

.id-roadtozero h1:before {
  content: 'Partner content by The Government of Japan';
}

.id-international_schools h1:after {
    top: -40px;
}

.id-esg h1:after {
  top: -40px;
  content: 'PARTNER CONTENT BY KOMATSU/NYK LINE/RICOH/TORAY/TSUBAKIMOTO CHAIN/UCHIDA YOKOs';
}

.id-nishimachi h1:before {
  width: 500px;
  content: 'Partner content by Nishimachi International School';
}

.id-apowerofgood h1:before {
  width: 400px;
  content: 'Partner content by Tokyu Land Corporation';
}

.id-makingwaves h1:before {
  width : 340px;
  content: 'Partner content by Mitsui O.S.K. Lines';
}

.id-digitalgardencitypartone h1:before, .id-digitalgardencityparttwo h1:before {
  content: 'Partner content by The Government of Japan';
}

.id-ahealthyinvestment h1:before {
  content:'METI’s recent forum in Thailand demonstrated the values of investing in health';
}

.id-ahealthyinvestment h1:before {
  top: -44px;
}

.id-dubai2020osakakansai2025 .has_banner h1, .id-tokyo2020osakakansai2025 .has_banner h1{
  top: -68px;
}

.id-dubai2020osakakansai2025 h1:before, .id-tokyo2020osakakansai2025  h1:before{
  content: 'Live and learn';
  background-color: #E84333;
  color: #fff;
}

.id-dubai2020osakakansai2025 h1:after, .id-tokyo2020osakakansai2025  h1:after {
  content: 'Partner content by The Government of Japan';
  background: #FDB812;
  padding: 9px 15px;
  text-transform: uppercase;
  font-size: 14px;
  color: #00233B;
  position: absolute;
  bottom: -32px;
  left: 0;
  line-height: 1em;
  font-weight: bold;
  letter-spacing: 0.025em;
  display: block;
}


.no_banner h1 {
    font-size: 50px;
    margin-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 15px;
    border-bottom: 3px #E84333 solid;
    display: inline-block;
}

.no_banner h1:before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    background: no-repeat center center url('../images/unlock-print.svg');
    background-size: contain;
    position: relative;
    top: 3px;
    margin-right: 15px;
}

.id-atsumi_sakai h5 {
    margin-top: -13px;
}


/* ------------------------ HEADER STYLES -------------------------------*/


header {
    position: relative;
    padding: 35px 0;
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 10px;
    z-index: 10;
}

#logo a {
    display: inline-block;
}

#logo {
    display: inline-block;
    vertical-align: top;
}

#nav {
    display: inline-block;
    vertical-align: top;
    float: right;
    text-align: right;
    position: relative;
    top: 22px;
}

#nav .current_page {
    opacity: 0.5;
}

#nav ul, #nav li {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}

#nav > ul > li {
    display: inline-block;
}

#nav li a, #nav li span {
    display: inline-block;
    padding: 5px 15px;
    color: #00233B;
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}

#nav .has_sub {
    position: relative;
}

#nav .has_sub:after {
    content: '';
    display: inline-block;
    position: relative;
    border-top: 7px #00233B solid;
    border-left: 5px transparent solid;
    border-right: 5px transparent solid;
    left: -10px;
    top: 0px;
    transition: all 250ms ease-in-out;
    transform: rotate(0deg);
}

#nav .sub_menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 57px;
    z-index: 500;
    right: 11px;
    transition: all 500ms ease-in-out;
    background: #E84333;
    padding: 13px 8px;
    width: 271px;
}

#nav .has_sub:hover .sub_menu {
    visibility: visible;
    opacity: 1;
    top: 44px;
}

#nav .has_sub:hover:after {
    transform: rotate(180deg);
}

#nav .has_sub .sub_menu li {
    display: block;
    text-align: left;
}

#nav .has_sub .sub_menu li a {
    color: #fff;
    display: block;
    line-height: 1.5em;
}

.asian_review {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 90px;
}

.asian_review_footer {
    width: 105px;
    float: right;
    position: relative;
    top: 1px;
}

#nav:after {
    content: '';
    display: inline-block;
    width: 9px;
    height: 29px;
    background: #E84333;
    position: relative;
    top: 9px;
}

.view_menu_btn {
    display: none;
    cursor: pointer;
    margin: 0 auto;
    position: absolute;
    top: 73px;
    width: 27px;
    right: 0px;
}
.bar1, .bar2, .bar3 { width: 27px; height: 1px; background-color: #00233B; margin: 6px 0; transition: 0.4s; display: block; }
.active .bar1 { transform: rotate(-45deg) translate(-5px, 4px); }
.active .bar2 { opacity: 0; }
.active .bar3 { transform: rotate(45deg) translate(-6px, -5px); }

/* ------------------------ PAGE STYLES -------------------------------*/

.banner_image {
    transition: opacity 700ms ease-in-out;
    opacity: 0;
}

.id-home .banner_image, .id-archive .banner_image {
    margin-left: calc(-100vw / 2 + 1180px / 2);
    margin-right: calc(-100vw / 2 + 1180px / 2);
}

.banner_image.show {
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 50%;
    background-position: center center;
    position: relative;
    top: -10px;
}

.id-dubai2020osakakansai2025 .banner_image.show{
  background-size: contain;
  padding-bottom: 65%;
}

.id-tokyo2020osakakansai2025 .banner_image.show {
  background-size: contain;
}

.id-ahistoryofinnovation .banner_image.show {
  margin-top: -4%;
  background-size: contain;
  padding-bottom: 120%;
}

.banner_image.active {
    opacity: 1;
}

.id-tomohiro_kaneko .main_content img, .id-takuya_miyata .main_content img, .id-kazuhiko_yoshimatsu .main_content img, .id-etiquette_guide .main_content img  {
    max-width: 200px;
    border-radius: 50%;
}

.id-etiquette_guide .main_content img  {
    top: -30px;
}

.orange_block {
    color: #fff;
    padding: 10px 20px 10px 20px;
    background: #E84333;
    max-width: 400px;
    position: relative;
    margin-bottom: 45px;
    margin-top: 25px;
}

.orange_block:after {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    background: no-repeat center center url(../images/unlock-print-white.svg);
    background-size: contain;
    position: relative;
    margin-left: auto;
    top: -1px;
    left: 7px;
}

.orange_block:before {
    content: '';
    border-top: 20px solid #E84333;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    bottom: -16px;
    right: 13px;
}

.orange_block p, .orange_block h2, .orange_block h3, .grey_block p, .grey_block h2, .grey_block h3 {
    margin: 12px 0;
}

.orange_block, .orange_block h2, .orange_block h3 {
    font-size: 20px;
}

.orange_block a {
    color: #fff;
}

.grey_block {
    max-width: 400px;
    background: #E4E4E4;
    padding: 5px 20px 10px 20px;
    margin-left: auto;
    position: relative;
    margin: 35px 0 35px auto;
}

.grey_block:after {
    content: '';
    display: block;
    width: 7px;
    height: 22px;
    background: #E84333;
    position: absolute;
    top: 15px;
    left: 0px;
}

.grey_block.add_credit {
   margin: 35px 0 0px auto;
}

.grey_block_credit {
  max-width: 400px;
  font-size: 12px;
  margin-left: auto;
  position: relative;
  margin: 4px 0 35px auto;
  text-align: right;
}

.id-greenindustry .grey_block:after {
  display: none;
}

.grey_block h2, .grey_block h3 {
    font-weight: bold;
    color: #E84333;
}

.grey_block p, .grey_block h2, .grey_block h3 {
    font-size: 14px;
    line-height: 1.5em;
}

.col_block {
    vertical-align: top;
    box-sizing: border-box;
    display: inline-block;
}

.col_2 .col_block {
    width: 49%;
}

.id-comingattractions .col_2 .col_block:first-child {
    width: 40%;
}

.id-comingattractions .col_2 .col_block:last-child {
    width: 59%;
}

.id-foodtechjl .col_2.profile .col_block {
  width: 220px;
}

.col_2 .col_block:first-child {
    padding-right: 15px;
}

.col_2 .col_block:last-child {
    padding-left: 15px;
}

.col_block blockquote, .col_block .grey_block {
    margin-top: 25px;
}

.profile_box{
  position: relative;
  margin: 30px 0;
  font-size: 1.4em;
  font-weight: bold;
  font-style: italic;
}

.id-comingattractions .profile_box {
  font-size: 0.7em;
  line-height: 1.4em;
  margin: 40px 0;
}

.grey_block .profile_box {
  color: #0A3856;
  margin: 30px 0 20px;
}

.id-dubai2020osakakansai2025 .profile_box, .id-tokyo2020osakakansai2025 .profile_box {
 font-size: 0.9em;
 line-height: 1.4em;
}

.id-drivingforces .profile_box {
  font-size: 1em;
  font-weight: normal;

}

.profile_box img {
  max-width: 100px;
  border-radius: 50%;
  margin-right:20px;
  margin-top:-10px;
  float: left;
}

.id-drivingforces .profile_box img {
  border : 2px solid #666;
  margin-top:0px;
}

.id-comingattractions .profile_box img {
  max-width: 80px;
  margin-right:10px;
}

.id-digitalgardencitypartone .profile_box img {
    max-width: 300px;
    border-radius: 0;
    margin-top: 0;
}

.profile_box:after {
    content:" ";
    display:block;
    clear:both;
}

.id-talkingtravel .profile_box {
  margin: 40px 0;
  font-size:1em;
}

.id-talkingtravel .profile_box img {
  max-width: 80px;
}

.id-esg .profile_box {
 font-size:1em;
}

.id-esg .profile_box img {
  max-width: 160px;
  border: 4px solid #E84333;
}

.with_credit {
  text-align: right;
}

.with_credit em {
  font-size: 12px;
}

.orange_bold {
  font-weight: bold;
  color : #E84333;
}

.id-tomohiro_kaneko h2:nth-of-type(1), .id-takuya_miyata h2:nth-of-type(1), .id-kazuhiko_yoshimatsu h2:nth-of-type(1), .id-etiquette_guide h2:nth-of-type(1) {
    padding-left: 150px;
    position: relative;
    margin: 50px 0;
}

.id-takuya_miyata h2:nth-of-type(1) {
    font-size: 1.6em;
}

.id-tomohiro_kaneko h2 img, .id-takuya_miyata h2 img, .id-kazuhiko_yoshimatsu h2 img, .id-etiquette_guide h2 img {
    position: absolute;
    width: 130px;
    top: -10px;
    left: 0;
}

h4 {
    font-size: 16px;
    font-weight: bold;
    max-width: 600px;
    line-height: 1.2em;
}

.id-atsumi_sakai .main_content h2:last-child img {
    max-width: 200px;
}

.id-atsushi_kato .grey_block {
}

.id-atsushi_kato .grey_block em {
    font-size: 12px;
}

.id-atsushi_kato .grey_block img {
    border-radius: 50%;
    max-width: 150px;
    display: block;
    margin: 0px auto -4px auto;
    position: relative;
    left: 0px;
}

.id-atsushi_kato .grey_block h3 {
    text-align: center;
}

.id-financial_capitals .main_content {
    max-width: none;
}

.infog_wrap {
    margin-top: -250px;
    margin-left: -40px;
    margin-right: -20px;
    background: no-repeat center center url(../images/Global-financial-cities-final-v3.svg?v=2);
    background-size: 100%;
    padding-bottom: 70%;
}

.id-international_schools .grey_block:nth-of-type(2) p:last-child img {
    max-width: 150px;
}

.id-international_schools .grey_block:nth-of-type(3) p:last-child img {
    max-width: 100px;
}

.center_logo {
  width: 300px;
  margin : 0 auto;
  text-align: center;
}

.center_logo img {
  width: 150px;
}

.center_logo p {
  margin : 10px;
}

.float_profile {
  float:right;
  width: 200px;
}

.float_profile img {
  border-radius: 200px;
}

.id-foodtechjl .float_profile {
  float:none;
}

.id-esg .company_logo {
  width: 40%;
}

.img_left {
  max-width: 400px;
  padding: 5px 20px 10px 20px;
  margin: 35px auto 35px 0;
}


/* ------------------------ FOOTER STYLES -------------------------------*/

#footer {
    border-top: 2px solid #E84333;
}

#footer, #footer a {
    color: #fff;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.05em;
}

.imprint {
    padding-top: 20px;
    padding-bottom: 20px;
}

.imprint:before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background: no-repeat center center url('../images/unlock-print.svg');
    background-size: contain;
    float: left;
    margin-right: 15px;
    position: relative;
    top: -7px;
    left: -2px;
}

.imprint .nowrap:after {
    content: '\02022';
    display: inline-block;
    margin: 0 7px;
    font-size: 18px;
}

.imprint .nowrap:nth-of-type(4):after {
    display: none;
}

.home_btn {
    text-decoration: none;
    display: block;
    text-align: center;
    font-weight: bold;
    position: relative;
    margin: 0;
    opacity: 0;
}

.home_btn.active {
    margin: 50px 0 30px 0;
    opacity: 1;
}

.home_btn:after {
    content: '';
    transition: all 240ms ease-out;
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background: no-repeat center center url(../images/unlock-print.svg);
    background-size: contain;
    position: relative;
    top: 1px;
    margin: 0 auto;
}

.home_btn:hover {
    text-decoration: none;
    color: #E84333;
}

.home_btn:hover:after {
    transform: scale(1.1);
}

#footer .copyright {
  padding: 1em 15px 1.5em;
  text-align: center;
}

/* ------------------------ MASONRY STYLES -------------------------------*/

.masonry {
    margin: 0 auto;
}

.masonry-sizer,
.masonry .block {
    width: calc(33.3% - 15px);
}

/* 2 columns */
.masonry .block.grid-item--width2 {
    width: calc(66.6% - 10px);
}


.masonry .block {
    margin-bottom: 20px;
    box-sizing: border-box;
    box-shadow: 0px 3px 5px 3px rgba(0,0,0,0.075);
    padding: 0 20px 2px 20px;
    position: relative;
    background: #fff;
}

.masonry .block:before, .masonry .inner_block:after, blockquote:before {
    content: '';
    width: 7px;
    height: 22px;
    background: #E84333;
    position: absolute;
    top: 15px;
    left: 0;
}

blockquote:before {
    top: 23px;
}

.masonry .inner_block:after {
    top: auto;
    bottom: -40px;
    left: -20px;
}

.masonry .block p {
    margin-top: 0;
}

.home-202203 .masonry .block .description,
.home-202210 .masonry .block .description,
.home-202303 .masonry .block .description,
.home-202309 .masonry .block .description,
.home-202403 .masonry .block .description,
.home-202409 .masonry .block .description {
    height: 6em;
}

.masonry .block img {
    margin: 0 -20px;
    max-width: calc(100% + 40px);
    vertical-align: bottom;
}

.masonry .block a img {
    margin: 0;
    max-width: 100%;
}

/* .masonry .block:last-child:before {
    display: none;
}

.masonry .block:last-child p {
    margin: 0;
}

.masonry .block:last-child img {
    vertical-align: bottom;
    width: 100%;
}

.masonry .block:last-child {
    padding: 0;
}

.masonry .block:last-child a {
    margin: 0;
}

.masonry .block:last-child a:after {
    display: none;
} */

.masonry .inner_block {
    position: relative;
}

.masonry .inner_block .inner_block {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.masonry .inner_block h2, .masonry .inner_block h3 {
    float: right;
    font-size: 22px;
    margin: 0 -20px 0 0;
    padding: 7px 15px;
    background: rgba(255,255,255,0.8);
}
.masonry .block:nth-of-type(2) h2, .block:nth-of-type(2) h3 {
    position: absolute;
    top: -107px;
    left: 0px;
    font-size: 32px;
    margin: 0;
    padding: 7px 15px;
    background: rgba(255,255,255,0.8);
}

.masonry .inner_block h3, .block:nth-of-type(2) h3 {
    background: #E84333;
    color: #fff;
    font-size: 12px;
    bottom: 0;
    clear: both;
}

.home-202403 .masonry .block:nth-of-type(6) h3{
   background: #FDB812;
}

.home-202303 .masonry .block:nth-of-type(4) h3,
.home-202303 .masonry .block:nth-of-type(5) h3{
   background: #FDB812;
}


.home-202210 .masonry .block:nth-of-type(10) h3{
   background: #FDB812;
}

.home-202203 .masonry .block:nth-of-type(3) h3, .home-202203 .masonry .block:nth-of-type(6) h3, .home-202203 .masonry .block:nth-of-type(17) h3{
   background: #FDB812;
}

.home-202107 .masonry .block:nth-of-type(3) h3, .home-202107 .masonry .block:nth-of-type(5) h3{
   background: #FDB812;
}

.archive-202012 .masonry .block:nth-of-type(6) h3, .archive-202012 .masonry .block:nth-of-type(12) h3{
   background: #FDB812;
}

.archive-202103 .masonry .block:nth-of-type(3) h3, .archive-202103 .masonry .block:nth-of-type(6) h3, .archive-202103 .masonry .block:nth-of-type(9) h3, .archive-202103 .masonry .block:nth-of-type(12) h3 {
    background: #FDB812;
}

.block:nth-of-type(2) h3 {
    bottom: auto;
    top: -55px;
    font-size: 15px;
}

.masonry .block:nth-of-type(2) {
    padding-top: 15px;
}

.masonry .block:nth-of-type(2), .masonry .block:nth-of-type(4), .masonry .block:nth-of-type(5), .masonry .block:nth-of-type(7), .masonry .block:nth-of-type(8), .masonry .block:nth-of-type(10), .masonry .block:nth-of-type(11), .masonry .block:nth-of-type(13), .masonry .block:nth-of-type(14), .masonry .block:nth-of-type(16), .masonry .block:nth-of-type(17), .masonry .block:nth-of-type(19), .masonry .block:nth-of-type(20), .masonry .block:nth-of-type(22), .masonry .block:nth-of-type(23) {
    transform: translateY(-120px);
}

.masonry .block p a {
    display: block;
    text-align: right;
    color: #E84333;
    text-decoration: none;
    font-weight: bold;
    margin: -20px -4px 22px 0;
}

.masonry .block p a:hover:after {
    transform: scale(1.1);
}

.masonry .block p a:after {
    transition: all 240ms ease-out;
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
/*    background: no-repeat center center url('../images/unlock-print-blue.svg');*/
    background: no-repeat center center url('../images/unlock-print.svg');
    background-size: contain;
    position: relative;
    top: 16px;
    margin-left: 10px;
}

.masonry .block .orange_block:before {
    display: none;
}

.masonry .block .orange_block {
    margin: 0 -20px -2px -20px;
}

.masonry .block .orange_block h2 {
    font-size: 15px;
    margin: 10px 0;
}

.infographic-sp { display: none;}

.sp_only {
  display: none;
}

/* ------------------------ RESPONSIVE STYLES -------------------------------*/

/* Stops iphone trying to resize text when rotating */

html { -webkit-text-size-adjust:none; }

/* smartphones, touchscreens */

@media (hover: none) and (pointer: coarse) {

}

@media all and (min-width: 1000px) {
.home-202203 .banner_image.show, .home-202210 .banner_image.show, .home-202303 .banner_image.show, .home-202309 .banner_image.show, .home-202403 .banner_image.show, .home-202409 .banner_image.show {
  background-position: center bottom;
  padding-bottom: 40%;
}
}

@media all and (max-width: 1659px) {
.home-202203 .has_banner .main_content, .home-202210 .has_banner .main_content, .home-202303 .has_banner .main_content, .home-202309 .has_banner .main_content, .home-202403 .has_banner .main_content, .home-202409 .has_banner .main_content {
  top: 30px;
}
}

@media all and (max-width: 1210px) {
    .banner_image, .id-home .banner_image,  .id-archive .banner_image {
        margin-left: -15px;
        margin-right: -15px;
    }
}

@media all and (max-width: 1040px) {
    .banner_image_credit {
      right: -8px;
    }
    .asian_review_footer {
        display: block;
        float: none;
    }
    .nowrap {
        display: block;
        margin: 4px 0;
    }
    .imprint .nowrap:after {
        display: none;
    }
    .imprint:before {
        float: none;
    }
    .imprint .nowrap:nth-of-type(4) {
        margin-bottom: 8px;
    }
}

@media all and (max-width: 930px) {
    .infog_wrap {
        margin-top: 0px;
        margin-left: 0px;
        margin-right: -20px;
        background: no-repeat center center url(../images/Global-financial-cities-final-v3-mob.svg?v=2);
        padding-bottom: 0;
        height: 2783px;
        background-size: 450px;
    }
}

@media all and (max-width: 800px) {
  .id-esg h1:after {
    top: -60px;
  }
}

@media all and (max-width: 902px) {
  .home-202107 .masonry .block:nth-of-type(2) h2{
    top: -145px;
  }
}


@media all and (max-width: 767px) {
    /** NAV **/
    .view_menu_btn { display: inline-block; }
	#nav {
        transition: all 500ms ease-in-out;
        position: absolute;
        box-sizing: border-box;
        background: #E84333;
        margin-bottom: 20px;
        top: 138px;
        right: -320px;
        padding: 10px 0;
        z-index: 1000;
        padding: 10px 8px;
        width: 290px;
        box-shadow: 0px 3px 5px 3px rgba(0,0,0,0.075);
    }
	#nav.active { right: -20px; }
    #nav > ul > li {
        display: block;
        text-align: left;
    }
    #nav li a, #nav li span {
        color: #fff;
        display: block;
    }
	#nav ul {
        display: block;
    }
    #nav .sub_menu {
        visibility: visible;
        opacity: 1;
        position: relative;
        width: calc(100% - 20px);
        top: 0;
        left: 16px;
        padding: 0;
    }
    #nav .has_sub:hover .sub_menu {
        top: 0px;
    }
    #nav:after {
        height: 10px;
    }
    /** END NAV **/
    .masonry-sizer, .masonry .block {
        width: calc(50% - 15px);
    }
    .masonry .block.grid-item--width2 {
        width: 100%;
    }
    .masonry .block {
        transform: translateY(-0px) !important;
    }
    .home-202107 .masonry .block:nth-of-type(2) h2{
      top: -107px;
    }

    .home-202203 .has_banner .main_content, .home-202210 .has_banner .main_content, .home-202303 .has_banner .main_content, .home-202309 .has_banner .main_content, .home-202403 .has_banner .main_content, .home-202409 .has_banner .main_content {
      top: 30px;
    }
    #nav .has_sub:after {
        display: none;
    }
    #nav .sub_menu:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #fff;
    }

    #footer .copyright {
      padding: 1em 15px;
      text-align: left;
    }
}

@media all and (max-width : 764px) {
  .id-dubai2020osakakansai2025 .has_banner h1,
  .id-tokyo2020osakakansai2025 .has_banner h1{
      margin-top: 100px;
  }

  .id-dubai2020osakakansai2025 .banner_image_credit,
  .id-tokyo2020osakakansai2025 .banner_image_credit {
    top: -200px;
  }
}

@media all and (max-width : 630px) {
    .col_2 .col_block {
        width: auto;
        padding: 0 !important;
        display: inline;
    }
    .col_block blockquote {
        margin-top: 40px;
    }
    .col_block .grey_block {
        margin-top: 35px;
    }
    .id-foodtechjl .col_2.profile .col_block {
      width:120px;
      display: inline-block;
    }

    .has_banner h1 {
        top: 0;
        margin-top: 22px;
        font-size: 31px;
        padding: 0;
    }

    .has_banner.long-credit h1{
      top: 10px;
    }

    .has_banner.long-long-credit h1{
      top: 28px;
    }

    .no_banner h1 {
        font-size: 40px;
    }
    .no_banner h1:before {
        width: 35px;
        height: 35px;
        top: 5px;
        margin-right: 10px;
    }
    .has_banner .main_content {
        top: 0px;
    }

    .id-businessmatters2 .banner_image_credit, .id-etiquetteguide4 .banner_image_credit,
    .id-etiquetteguide5 .banner_image_credit {
      top: -96px;
    }

    .id-etiquetteguide6 .banner_image_credit, .id-etiquetteguide7 .banner_image_credit {
      top: -64px;
    }

    .id-home .has_banner .main_content, .id-archive .has_banner .main_content {
        top: 20px;
    }
    .id-home.home-202203 .has_banner .main_content , .home-202210 .has_banner .main_content,
    .home-202303 .has_banner .main_content, .home-202309 .has_banner .main_content, .home-202403 .has_banner .main_content, .home-202409 .has_banner .main_content {
      top: 40px;
    }
    blockquote {
        font-size: 24px;
    }
    blockquote.float_left {
      float:none;
      width:100%;
      margin: 40px 0;
    }
    .orange_block, .orange_block h2, .orange_block h3 {
        font-size: 18px;
    }
    h3, h6 {
        font-size: 1.4em;
    }

    .profile_box {
      font-size: .8em;
    }

    .grey_block .profile_box {
      font-size: .8em;
      margin : 20px 0 10px;
    }

    .profile_box img {
      margin-top: -5px;
      margin-right : 12px;
      max-width: 80px;
    }

    .id-drivingforces .grey_block .profile_box {
      font-size: 1em;
    }

    .grey_block .profile_box img {
      margin-top: -1px;
    }

    .id- .grey_block .profile_box
    .id-atsumi_sakai .has_banner h1:before, .id-international_schools h1:after, .id-lessonsearthquake .has_banner h1:after, .id-roadtozero h1:after, .id-digitalgardencitypartone .has_banner h1:before, .id-digitalgardencityparttwo .has_banner h1:before {
        margin-bottom: 5px;
        font-size: 11px;
    }

    .id-atsumi_sakai .has_banner h1:before {
        margin-top: 15px;
    }

    .id-nishimachi .has_banner h1{
      margin-top: 32px;
    }

    .id-apowerofgood .has_banner h1, .id-makingwaves .has_banner h1{
      top: 32px;
    }

    .id-digitalgardencitypartone .has_banner h1,
    .id-digitalgardencityparttwo .has_banner h1{
      top: 40px;
    }

    .id-digitalgardencitypartone .has_banner h1::after,
    .id-digitalgardencityparttwo .has_banner h1::after{
      bottom: -28px;
    }


    .id-atsumi_sakai .has_banner h1 {
        padding-top: 20px;
    }
    .id-lessonsearthquake .has_banner h1 {
        margin-top: 58px;
    }
    .id-lessonsearthquake h1:before, .id-roadtozero h1:before {
        top: -54px;
    }

    .id-dubai2020osakakansai2025 .has_banner h1, .id-tokyo2020osakakansai2025 .has_banner h1{
        margin-top: 120px;
    }

    .id-dubai2020osakakansai2025 .banner_image_credit, .id-tokyo2020osakakansai2025 .banner_image_credit {
      top : -180px
    }

    .id-dubai2020osakakansai2025 h1:after, .id-tokyo2020osakakansai2025 h1:after {
      font-size: 10px;
      bottom: -28px;
    }

    .id-dubai2020osakakansai2025 .has_banner .main_content, .id-tokyo2020osakakansai2025 .has_banner .main_content {
        top: -80px;
    }

    .id-dubai2020osakakansai2025 .has_banner h1, .id-tokyo2020osakakansai2025 .has_banner h1  {
      padding: 10px 0;
    }

    .id-digitalgardencitypartone .has_banner .main_content,
    .id-digitalgardencityparttwo .has_banner .main_content{
      top: 40px;
    }

    .id-digitalgardencitypartone .banner_image_credit,
    .id-digitalgardencityparttwo .banner_image_credit{
      top: -80px;
    }

    .id-ahealthyinvestment h1:before {
      top:-76px;
    }

    .id-ahealthyinvestment .has_banner h1 {
      top:96px;
    }

    .id-ahealthyinvestment .has_banner .main_content{
      top: 54px;
    }


    .id-esg h1:after {
      top: -70px;
    }

    .id-roadtozero .has_banner h1 {
        width: 100%;
        margin-top: 60px;
    }

    .float_profile {
      float:right;
      width: 140px;
    }

    .float_profile img {
      border-radius: 140px;
    }

    .id-foodtechjl .float_profile {
      width:100px;
    }

    .id-foodtechjl .float_profile img {
      border-radius: 100px;
    }

    .masonry .block:nth-of-type(2) h2 {
        font-size: 24px;
        position: static;
        padding: 2px 0 15px 0;
    }
    .masonry .block:nth-of-type(2) h3 {
        position: static;
        margin-bottom: 15px;
    }
    .masonry {
        margin-top: -15px;
    }

    .home-202203 .masonry {
        margin-top: 0;
    }



    .infographic-sp { display: block;}
    .infographic-pc { display: none;}

    .id-esg .company_logo {
      width: 60%;
    }

    .pc_only {
      display: none;
    }

    .sp_only {
      display: block;
    }
}

@media all and (max-width: 550px) {
  .id-dubai2020osakakansai2025 .banner_image_credit, .id-tokyo2020osakakansai2025 .banner_image_credit{
    top : -216px
  }
}

@media all and (max-width : 530px) {
    .imprint .nowrap:after {
    }
    .masonry-sizer, .masonry .block {
        width: 100%;
    }

    .home-202203 .masonry .block .description, .home-202210 .masonry .block .description,
    .home-202303 .masonry .block .description, .home-202309 .masonry .block .description,
    .home-202403 .masonry .block .description, .home-202409 .masonry .block .description  {
        min-height: 6em;
    }

    .imprint:before {
        float: none;
    }

    .id-nishimachi .has_banner h1{
      width: 100%;
      margin-top: 48px;
    }

    .id-nishimachi h1:before{
      width: auto;
      top: -50px;
    }

    .id-ahistoryofinnovation .has_banner h1 {
      top: 20px;
    }

}

@media all and (max-width : 526px) {
  .id-etiquetteguide6 .banner_image_credit, .id-etiquetteguide7 .banner_image_credit {
    top: -94px;
  }
}


@media all and (max-width : 513px) {
  .id-wellbeing .banner_image_credit {
    top: -90px;
  }
}

@media all and (max-width : 479px) {
    #logo svg {
        transform: scale(0.8);
        transform-origin: left center;
    }
    .asian_review {
        right: auto;
        left: 0;
    }
    header {
        padding-bottom: 13px;
    }
    .view_menu_btn {
        top: 68px;
    }
    .id-tomohiro_kaneko h2:nth-of-type(1), .id-takuya_miyata h2:nth-of-type(1), .id-kazuhiko_yoshimatsu h2:nth-of-type(1), .id-etiquette_guide h2:nth-of-type(1) {
        padding-left: 50px;
    }
    .id-tomohiro_kaneko h2:nth-of-type(1) img, .id-takuya_miyata h2:nth-of-type(1) img, .id-kazuhiko_yoshimatsu h2:nth-of-type(1) img, .id-etiquette_guide h2:nth-of-type(1) img {
        display: block;
        position: relative;
        top: -15px;
        left: -50px;
    }
    .infog_wrap {
        padding-bottom: 638%;
        height: 0px;
        background-size: 100%;
        margin-right: -10px;
        margin-top: -25px;
    }

    .img_left {
      max-width: 100%;
      padding: 10px 0;
    }
}

@media all and (max-width : 479px) {
  .id-apowerofgood .has_banner h1, .id-makingwaves .has_banner h1{
    top: 70px;
  }
  .id-apowerofgood .has_banner h1:before, .id-makingwaves .has_banner h1:before {
    width:auto;
    top: -50px;
  }
  .id-apowerofgood .has_banner .main_content, .id-makingwaves .has_banner .main_content {
    top: 20px;
  }
  
}

@media all and (max-width : 420px) {
  .id-digitalgardencitypartone .banner_image_credit,
  .id-digitalgardencityparttwo .banner_image_credit {
    top: -130px;
  }

  .id-digitalgardencitypartone h1:before,
  .id-digitalgardencityparttwo h1:before {
    top: -44px;
  }

}

@media all and (max-width : 414px) {
  .id-businessmatters2 .banner_image_credit{
    top: -124px;
  }
  
  .id-etiquetteguide4 .banner_image_credit,  .id-etiquetteguide5 .banner_image_credit, .id-etiquetteguide6 .banner_image_credit, .id-etiquetteguide7 .banner_image_credit{
    top: -90px;
  }

  .id-ahistoryofinnovation .has_banner h1 {
    top: 30px;
  }

  .has_banner.long-credit h1{
    top: 20px;
  }
  .has_banner.long-long-credit h1{
    top: 30px;
  }
}

@media all and (max-width : 396px) {
  .id-etiquetteguide5 .banner_image_credit {
    top: -130px;
  }
}

@media all and (max-width : 390px) {
  .id-etiquetteguide4 .banner_image_credit, .id-etiquetteguide5 .banner_image_credit {
    top: -124px;
  }

  .id-preparingfortheworst .banner_image_credit, .id-etiquetteguide6 .banner_image_credit, 
  .id-etiquetteguide7 .banner_image_credit {
    top: -94px;
  }
}

@media all and (max-width : 380px) {
  .id-ahistoryofinnovation .has_banner h1 {
    top: 30px;
    font-size: 27px;
  }
  .id-howtosavetheplanet .banner_image_credit, .id-etiquetteguide3 .banner_image_credit {
    top: -96px;
  } 

  .id-apowerforgood .has_banner.long-credit h1 {
    top: 32px;
  }
}

@media all and (max-width : 350px) {
  .id-esg .no_banner h1 {
    margin-top: 80px;
  }
  .id-esg h1:after {
    top: -80px;
  }

  .id-nishimachi .has_banner h1{
    margin-top: 70px;
  }

  .id-nishimachi h1:before {
    top: -64px;
  }

  .id-dubai2020osakakansai2025 .has_banner h1, .id-tokyo2020osakakansai2025 .has_banner h1{
    font-size: 24px;
  }

  .id-dubai2020osakakansai2025 h1:after, .id-tokyo2020osakakansai2025 h1:before  {
    padding: 8px;
  }

  .id-dubai2020osakakansai2025 .banner_image_credit, .id-tokyo2020osakakansai2025 .banner_image_credit {
    top : -202px;
    font-size: .4em;
  }

  .id-ahistoryofinnovation .has_banner h1 {
    font-size: 25px;
  }

  .id-awelcomechange .banner_image_credit {
    top: -94px;
  }
}

@media all and (max-width : 330px) {
  .id-howtosaveatown .has_banner h1 {
    margin-top: 0;
  }
  .id-blastfromthepast .has_banner h1 {
    margin-top: 28px;
    top: 20px;
    font-size: 25px;
  }
}

/*** prevents FOUC ****/

html {
    visibility: visible;
    opacity: 1;
}



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}