@charset "utf-8";

/******************************
	City Area
******************************/

.cityArea {display:block; position:relative; font-size:calc((20 / 17) * 1em); padding-bottom:3em; border-bottom:1px solid #D0D0DD;}
.cityArea + .cityArea {margin-top:11.8em;}
.cityArea .visual {display:block; position:relative; border-radius:1.5em; height:20em; margin:0 -5em 3em; background:no-repeat 50% 50% / cover;}
.cityArea .visual span {display:block; position:absolute; bottom:-7.25em; right:0; left:0; height:12.5em; background:no-repeat right bottom / contain; text-indent:-999px; overflow:hidden;}
.cityArea h4 {font-size:1.5em; padding-left:calc((104 / 30) * 1em); margin-bottom:calc((40 / 30) * 1em);}
.cityArea h4:before {display:none;}
.cityArea h4:after {content:""; display:block; position:absolute; width:calc((180 / 30) * 1em); height:calc((164 / 30) * 1em); background:no-repeat 50% 50% / contain; left:calc((52 / 30) * -1em); top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.cityArea p {margin-bottom:calc((70 / 17) * 1em); word-break:keep-all; font-size:.85em;}
.cityArea .detail {margin:-.75em;}
.cityArea .detail ul {display:flex; flex-wrap:wrap;}
.cityArea .detail ul li {display:flex; padding:.75em; width:33.33%;}
.cityArea .detail ul li > * {display:flex; justify-content:center; padding:1.8em .5em; min-height:12em; align-items:center; flex-direction:column; border-radius:1em; width:100%;}
.cityArea .detail ul li a {flex-direction:row;}
.cityArea .detail ul li a:after {content:""; display:block; position:relative; width:1.25em; height:1.25em; background:url(../img/common/ico_blank_w.svg) no-repeat 50% 50%  / contain; margin-left:.6em;}
.cityArea .detail ul li a strong {display:block; font-size:1.1em; font-family:'RiaSans'; font-weight:600;}
.cityArea .detail .item {text-align:center; background:#F8F8FC;}
.cityArea .detail .item i {display:block; position:relative; width:4em; height:4em; margin-bottom:.8em; background:url(../img/sub/02/spr_icons.svg) no-repeat 0 0 / auto 100%;}
.cityArea .detail .item i.ty1 {background-position-x:0;}
.cityArea .detail .item i.ty2 {background-position-x:-4em;}
.cityArea .detail .item i.ty3 {background-position-x:-8em;}
.cityArea .detail .item i.ty4 {background-position-x:-12em;}
.cityArea .detail .item strong {display:block; position:relative; font-size:1.1em; color:#17212D; font-family:'RiaSans'; font-weight:600; margin-bottom:calc((11 / 22) * 1em);}
.cityArea .detail .item span {display:block; position:relative; font-size:.85em; color:#4F5869; word-break:keep-all;}

@media all and (max-width:1024px) {
	.cityArea .visual {margin:0 0 3em; height:16em;}
	.cityArea .visual span {font-size:.7em; right:-2em;}
	
	.cityArea .detail ul li {width:50%; flex-grow:1;}
	.cityArea .detail ul li > * {min-height:0;}
}
@media all and (max-width:640px) {
	.cityArea .visual {height:13em;}
	.cityArea .visual span {font-size:.5em;}
}
@media all and (max-width:540px) {
	.cityArea .visual {height:9em;}
	.cityArea .detail ul li {width:100%;}
}

.cityArea.korea .visual {background-image:url(../img/sub/02/img_korea.png);}
.cityArea.korea .visual span {background-image:url(../img/sub/02/txt_korea.svg);}
.cityArea.korea h4:after {background-image:url(../img/sub/02/img_flag_korea.png);}

.cityArea.china .visual {background-image:url(../img/sub/02/img_china1.png);}
.cityArea.china .visual.ty2 {background-image:url(../img/sub/02/img_china2.png);}
.cityArea.china .visual span {background-image:url(../img/sub/02/txt_china.svg);}
.cityArea.china h4:after {background-image:url(../img/sub/02/img_flag_china.png);}

.cityArea.japan .visual {background-image:url(../img/sub/02/img_japan.png);}
.cityArea.japan .visual span {background-image:url(../img/sub/02/txt_japan.svg);}
.cityArea.japan h4:after {background-image:url(../img/sub/02/img_flag_japan.png);}