/*
================================================================
aem.css for mi aem component

Mar. 2020 | masida@studio-uni
rev. 2022.02
================================================================
*/

@media screen and (min-width:801px) {
html { font-size: 16px !important;}
}


/*
================================================================
overriding
================================================================
*/

.sub_position,
.topic_list { border: none ;}
.topic_title, .topic_title *
{
	font-size: 38px;
	font-weight: normal;
	line-height: 1.3;
}

/* responce style added 2022.02*/

@media only screen and (max-width: 800px) {
 .topic_title, .topic_title *
  {
  height: 1.3rem;
  font-size: .38rem;
  padding-left: 0;
  }
}


/*
----------------------------------------------------------------
for aem componrnt overriding
----------------------------------------------------------------
*/

/*
--------------------------------
store info (store home page)
--------------------------------
*/

.store_info .store_title { width: 100% ; margin-bottom: 20px; text-align: center; font-weight: bold;}
.store_info a { display: inline-block; margin-left: 15px;}
.store_info .note p { margin-top: 0 !important; font-size: 12px; }

/*
--------------------------------
topic (store home page)
--------------------------------
*/

.topic_title h2
{
	font-size: 42px;
	line-height: 1.3;
	text-align: center;
}

.component.col__slider { padding-top: .52rem;}

@media only screen and (max-width: 800px) {

  .topic_title h2 {	font-size: .52rem; }
  .component.col__slider { padding-top: .55rem;}

}

.store_news { margin: 15px 10px 5px; }

.Sjk .store_news { color: #023894;}
.Nhb .store_news,
.Gnz .store_news {color: #b8833a;}

/*
================================================================
common styling
================================================================
*/

.fit img { width: 100%; height: auto;}

/*
----------------------------------------------------------------
text
----------------------------------------------------------------
*/



/*
================================================================
component styling
================================================================
*/

/*
----------------------------------------------------------------
content wrapper
----------------------------------------------------------------
*/

article.page-content { margin-top: 70px; border-top: 1px solid #BFBFBF; box-sizing: border-box;}

@media screen and (max-width: 800px) {
article.page-content { margin-top: 1rem; }
}


/*
----------------------------------------------------------------
breadcrumb
----------------------------------------------------------------
*/

.component.breadcrumb { padding-top: 10px; padding-bottom: 20px;}

.component.breadcrumb ul {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-top: 10px;
list-style-type: none;
display: flex;
flex-direction: row;
}

@media only screen and (min-width:800px) and (max-width:1200px){
.component.breadcrumb ul { 
width: 100%;
padding: 10px 20px 0;
box-sizing: border-box;}
}

@media only screen and (max-width: 800px) {
.component.breadcrumb ul {
width: 100%;
padding: .05rem .2rem;
box-sizing: border-box;}
}

.component.breadcrumb ul a { color: #999;}

.component.breadcrumb li a:after { content: ' > '; display: inline-block; margin: 0 12px 0 8px; color:#999;}

/*
----------------------------------------------------------------
sectioning wrapper
----------------------------------------------------------------
*/

.content-outer { padding: 0; }

.content-inner
{
	 max-width: 1200px; width: auto; margin: 0 auto; padding: 0 15px !important ;
}

.content-inner.single
{
	 max-width: 890px;
}

/*
----------------------------------------------------------------
article list setting
----------------------------------------------------------------
*/

.col__items,
.col__slider,
.col .post-list__items
{
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: center;
	align-items: center;
}

/*
--------------------------------
box setting
--------------------------------
*/

.col__item,
.col__slide,
.col .post-list__item { position: relative; }

.col__item .col__img img,
.col__slide col__slide__img img,
.col .post-list__item .post-list__img img
{
	display: inline-block;
	margin-bottom: 10px;
}

/* "3column" */

.col__item .col__title,
.col__slide__infomation,
.col .post-list__item .post-list__title

{
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	margin-top: 10px;
}


/*
--------------------------------
columns
--------------------------------
*/

/* columns */

.col-2.col__item,
.col-2.col__slide,
.col-2 .post-list__item
{
	width: calc(50% - 30px);
	padding: 15px;
	margin: 0 0px;
}


.col-3.col__item,
.col-3.col__slide,
.col-3 .post-list__item
{
	width: calc(33.3% - 30px);
	padding: 15px;
	margin: 0 0;
}

.col-4.col__item,
.col-4.col__slide,
.col-4 .post-list__item
{
	width: calc(25% - 30px);
	padding: 15px;
	margin: 0 0;
}

.col-5.col__item,
.col-5.col__slide,
.col-5 .post-list__item
{
	width: calc(20% - 30px);
	padding: 15px;
	margin: 0 0;
}

/* response setting */

@media screen and (max-width: 768px)
{
  .col-3.col__item,
  .col-3.col__slide,
  .col-3 .post-list__item
  {
    width: 100%;
  }

  .col-4.col__item,
  .col-4.col__slide,
  .col-4 .post-list__item
  {
    width: 100%;
  }

  .col-5.col__item,
  .col-5.col__slide,
  .col-5 .post-list__item
  {
    width: 100%;
  }
}


/*
--------------------------------
card list setting
--------------------------------
*/

.card.outer { padding: 15px; }

.card.inner
{
	padding: 30px 30px 20px;
	background-color: #fff;
	position: relative;
}

.card .h,
.card .h p { margin-bottom: 0; }

/* biz */
.biz .icon { margin-bottom: 0; }

.biz .icon img
{
	max-width: 160px;
	width: 100%;
	height: auto;
}

/* icons list setting */

.icons {margin-bottom: 50px;}

.icons .card.outer { padding: 0; }

.icons .card.inner { padding: 0;}

.icons .icon img
{
	max-width: 128px;
	width: 100%;
	height: auto;
}

.icons .card .h { margin-bottom: 1rem;}

/*
--------------------------------
condition list (news)
--------------------------------
*/

/* list top border */
.news .news__items { border-top: 1px solid #ccc;}

.news .news__entry, 
.news .news__item { border-bottom: 1px solid #ccc; padding: 15px 0; position: relative;}
.news .news__date { display: inline-block; margin-right: 1.5rem;}
.news .news__title { display: inline-block; font-size: 1.5rem; margin-bottom: 0;}

.news .news__entry p, 
.news .news__item p,
.news .news__date p,
.news .news__title p { margin-bottom: 0;}

/*
--------------------------------
article list box link setting
--------------------------------
*/

.col__item .box-link,
.col__slide .box-link,
.news__entry .box-link,
.news__item .box-link,
.card.inner .box-link,
.post-list__item .box-link,
.item .box-link
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
	border: none;
}

.col__item .box-link:hover,
.col__slide .box-link:hover,
.news__entry .box-link:hover,
.news__item .box-link:hover,
.card.inner .box-link:hover,
.post-list__item .box-link:hover,
.item .box-link:hover
{
  background-color: rgba(0,0,0,.1) ;
  transition: all .25s ease-out;
}

/*
--------------------------------
column img apearance option
--------------------------------
*/

.col img { border: 1px solid #eee;}

/*
--------------------------------
table style
--------------------------------
*/

.table { /*border-top: 1px solid #ccc;*/ margin: 0 0;  border-top: 1px solid #ddd;}

.table .thead { border-bottom: 2px solid #ddd; font-weight: 500;}

.table .tr { border-bottom: 1px solid #ddd; text-align: left;}

.table .th { font-weight: bold;}

.table .tr p,
.table .th p { font-size: ; margin: 10px;}

@media screen and (max-width: 768px) {

.table .thead { display: none;}

}

/*
--------------------------------
pagenation
--------------------------------
*/

.pagination {
  margin-top: 40px;
}

.pagination__inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: center;
  -ms-flex-align: stretch;

  -webkit-align-items: stretch;
          align-items: stretch;
  -webkit-justify-content: center;
          justify-content: center;
}

.pagination__prev,
.pagination__next {
  position: relative;
  width: 44px;
  height: 44px;
}
.pagination__prev >a,
.pagination__prev >span,
.pagination__next >a,
.pagination__next >span {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%; 
  color: #fff;
}
.pagination__prev >a:before,
.pagination__prev >span:before,
.pagination__next >a:before,
.pagination__next >span:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: auto; 
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
}
.pagination__prev >a,
.pagination__next >a {
  background-color: #023894;
  transition-delay: 0s; 
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-duration: 0.4s;
  transition-property: background-color;
}
.pagination__prev >span,
.pagination__next >span {
  background-color: #e5e5e5;
}
@media only screen and (min-width: 48em) {
  .pagination__prev,
  .pagination__next {
    width: 70px;
  }
  .pagination__prev:hover >a,
  .pagination__next:hover >a {
    background-color: #012269;
  }
}

.pagination__prev {
  margin-right: 8px;
}
.pagination__prev >a:before,
.pagination__prev >span:before {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
@media only screen and (min-width: 48em) {
  .pagination__prev {
    margin-right: 15px;
  }
}

.pagination__next {
  margin-left: 8px;
}
.pagination__next >a:before,
.pagination__next >span:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
@media only screen and (min-width: 48em) {
  .pagination__next {
    margin-left: 15px;
  }
}

.pagination__btn {
  margin-right: 2px; 
  margin-left: 2px;
  width: 36px;
  height: 44px;
}
.pagination__btn >a,
.pagination__btn >span {
  display: block;
  padding-top: 14px;
  padding-bottom: 14px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent; 
  text-align: center;
  line-height: 1.07;
}
.pagination__btn >a {
  border-color: #e5e5e5;
  transition-delay: 0s; 
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-duration: 0.4s;
  transition-property: border-color;
}
.pagination__btn.is-active >span {
  font-weight: bold;
}
@media only screen and (min-width: 48em) {
  .pagination__btn {
    margin-right: 3px; 
    margin-left: 3px;
    width: 44px;
  }
  .pagination__btn:hover >a {
    border-color: #808080;
  }
}

/*
================================================================
main single
================================================================
*/

.article.topic_detailed { padding: 70px 0 200px 0;}

.article .content-head .topic_title * { font-size: 28px; font-weight: bold;}

.article .content-head .text p { font-size: 18px; line-height: 1.8;}

.article .content-body .text p { font-size: 16px; line-height: 1.8; margin: 30px 0;}

.article .content-body .figure { text-align: center;}

.article .content-body .figure img { display: inline-block; width: 100%; max-width: 540px; height: auto;}

/*
================================================================
news
================================================================
*/

body.News { letter-spacing: 1px;}

/*
----------------------------------------------------------------
breadcrumb
----------------------------------------------------------------
*/

.News .breadcrumb.header-breadcrumb { padding: 0; margin-top: 70px; border-top: 1px solid #BFBFBF;}

@media only screen and (max-width: 800px) {
.News .breadcrumb.header-breadcrumb { margin-top : 1rem;}
}
@media screen and (max-width: 768px) {
.News .breadcrumb.header-breadcrumb { display: block;}
}

.News .header-breadcrumb .breadcrumb__item * { font-size: 13px;}

.News .breadcrumb__item+.breadcrumb__item:before { content: none;}

.News .footer-breadcrumb { display: none;}

@media only screen and (min-width: 48em) {
.News .breadcrumb .ci-wrapper { padding-left: 0; padding-right: 0;}
}

@media only screen and (min-width:800px) and (max-width:1200px){
.News .breadcrumb .ci-wrapper { width: 100%; }
}

@media only screen and (max-width: 800px) {

.News .breadcrumb .ci-wrapper { padding-left: 0; padding-right: 0;}

}

/*
----------------------------------------------------------------
header
----------------------------------------------------------------
*/

.News .article-header .article-header__category * { font-size: 20px; line-height: 1.4;}
.News .article-header .article-header__head-title * { font-size: 24px; line-height: 1.5;}

/*
----------------------------------------------------------------
footer
----------------------------------------------------------------
*/

.News .component.page__footer { padding: 0;}

/*
----------------------------------------------------------------
page content
----------------------------------------------------------------
*/

.News .item-list__title { font-size: 15px;}

.News .item-list__text, 
.News .item-list__price { font-size: 14px;}

.News button.item-list__btn, 
.News .item-list__btn a { font-size: 13px;}

/*
================================================================
taxfree
================================================================
*/

.Page.Tax .content-inner
{
	padding: 100px 0 100px 0;
}

/*
================================================================
button
================================================================
*/

/*
----------------
button
----------------
*/

button, a.btn
{
	margin: 1rem .5rem !important;
	padding: .5rem 1rem !important;
	border: 1px solid #222;
	display: inline-block;
	text-align: center;
	background-color: transparent;
	transition-property: all;
	transition: 0.3s linear;
	letter-spacing: .1rem !important;
	font-size: 14px !important;
	min-width: 220px;
}

button:hover, a.btn:hover
{
	background-color: rgba(10,10,10, 0.2);
	color: #222;
}

button.center, a.button.center { display: block; min-width: 220px; margin-left: auto !important; margin-right: auto !important;}

/*
----------------
button black
----------------
*/

button.btn-bg-black, a.btn.btn-bg-black
{
	background-color: rgba(10,10,10, 1);
	color: #fff;
}

button.btn-bg-black:hover, a.btn.btn-bg-black:hover
{
	background-color: rgba(10,10,10, .5);
	border: 1px solid #999;
}

/*
----------------
button white
----------------
*/

button.btn-white, a.btn.btn-white
{
	border: 1px solid #fff;
	color: #fff;
}

/*
----------------
button large
----------------
*/

button.large { padding: 15px !important;}

/*
----------------
external link
----------------
*/

button.ex:after,
a.btn.ex:after { font-family: "Font Awesome 5 Free"; content: "\f360"; display: inline-block; margin-left: .25rem;}


/*
================================================================
mod-2023.css for MI Inbound
Aug. to Sept. 2023
================================================================
*/

  .sns-block { width: 100%; max-width: 1100px; margin: 0 auto; padding: 105px 0 145px 0;}
  .sns-title { margin-bottom: 54px;}
  .sns-block ul.boxes { display: flex; flex-wrap: wrap; width: 100%; max-width: 1100px; box-sizing: border-box; padding: 10px; } 
  .sns-block li.box { width: 100%; padding: 10px 15px; position: relative; background-color: #fff;}
  .sns-block li.box div.hide { position: absolute; border: 1px dotted #ccc; width: 240px; height: 240px; top: 60; left: 10; transform: translateY(20%); transition-property: all; transition: transform .5s; z-index: 10;}
  .sns-block li.box:hover { background-color: #eee;}
  .sns-block li.box:hover a:hover { text-decoration: none;}
  .sns-block li.box.show { overflow: hidden;}
  .sns-block li.box.show:hover { overflow: visible; cursor: pointer;}
  .sns-block li.box.show:hover div.hide { transform: translateY(0);}
  .sns-block .col-3 li.box { max-width: calc(33% - 39px); border: 1px solid #ccc; margin: 5px;}
  .sns-block figure.l-img { display: flex;}
  .sns-block figure.l-img img { max-width: 64px;}
  .sns-block figure.l-img figcaption { align-self: center; margin-left: 15px; font-size: 16px;}
  .sns-block a figure * { color: #333;}

  @media only screen and (max-width: 1100px) { 
    .sns-block .col-3 li.box { max-width: calc(50% - 42px);}
  }
  @media only screen and (max-width: 768px) { 
    .sns-block .col-3 li.box { max-width: calc(100% - 42px);}
  }

/*
================================================================
mod 2025 Map for MI Inbound
May 29 2025
================================================================
*/

.isetan_distribution14{position:absolute;}

/* en */

@media only screen and (min-width: 1200px) {
.isetan_distribution07{top:124px;left:144px;}
.isetan_distribution14{top:180px;left:144px;}
}

@media only screen and (min-width:800px) and (max-width:1200px){
.isetan_distribution07{top:110px; left:162px;}
.isetan_distribution14{top:160px; left:162px;}
}

@media only screen and (max-width:800px){
.isetan_distribution07{top:1.2rem; left:1.4rem;}
.isetan_distribution14{top:1.75rem; left:1.4rem;}
}

/* ko */

@media only screen and (min-width: 1200px) {
html[lang=ko_kr] .isetan_distribution06{left:144px;}
}

@media only screen and (min-width:800px) and (max-width:1200px){
html[lang=ko_kr] .isetan_distribution07{top:123px;}
html[lang=ko_kr] .isetan_distribution14{top:180px;}

html[lang=ko_kr] .isetan_distribution06,
html[lang=ko_kr] .isetan_distribution07,
html[lang=ko_kr] .isetan_distribution14 {left: 158px;}
}

/* zs */

@media only screen and (min-width: 1200px) {
html[lang=zh_cn] .isetan_distribution06{left:144px;}
html[lang=zh_cn] .isetan_distribution07{top:126px;}
html[lang=zh_cn] .isetan_distribution14{top:182px;}
}

@media only screen and (min-width:800px) and (max-width:1200px){
html[lang=zh_cn] .isetan_distribution07{top:126px;}
html[lang=zh_cn] .isetan_distribution14{top:182px;}

html[lang=zh_cn] .isetan_distribution06,
html[lang=zh_cn] .isetan_distribution07,
html[lang=zh_cn] .isetan_distribution14 {left:158px;}
}

@media only screen and (max-width:800px){
html[lang=zh_cn] .isetan_distribution06,
html[lang=zh_cn] .isetan_distribution07,
html[lang=zh_cn] .isetan_distribution14 {left:1.4rem;}
}

/* zt */

@media only screen and (min-width: 1200px) {
html[lang=zh_tw] .isetan_distribution06{left:144px;}
html[lang=zh_tw] .isetan_distribution07{top:126px;}
html[lang=zh_tw] .isetan_distribution14{top:182px;}
}

@media only screen and (min-width:800px) and (max-width:1200px){
html[lang=zh_tw] .isetan_distribution07{top:126px;}
html[lang=zh_tw] .isetan_distribution14{top:182px;}

html[lang=zh_tw] .isetan_distribution06,
html[lang=zh_tw] .isetan_distribution07,
html[lang=zh_tw] .isetan_distribution14 {left:158px;}
}

@media only screen and (max-width:800px){
html[lang=zh_tw] .isetan_distribution06,
html[lang=zh_tw] .isetan_distribution07,
html[lang=zh_tw] .isetan_distribution14 {left:1.4rem;}
}

/*
[EOF]
*/