@charset "UTF-8";

@media print, screen and (max-width:1199px) {

#indexMain {
width: 100%;
}

#indexDate {
position: relative;
width: 89%;
margin: 20px auto;
margin-top: -10px;
}

#indexMain img,
#indexDate img {
width: 100%;
}

.wrap {
position: relative;
width: 100%;
margin: 0 auto;
padding: 30px 0 0;
}

.wrap .inner {
position: relative;
width: 88%;
margin: 0 auto;
z-index: 1;
}

#indexBg {
position: absolute;
width: 100%;
left: 0;
top: 30px;
z-index: 0;
}

#indexH1 {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.3;
}

#indexTxt {
font-size: 1.4rem;
}

#topImg {
position: relative;
width: 96%;
margin: 0 auto;
z-index: 1;
}

#newsXflex {
position: relative;
width: 90%;
margin: 0 auto;
margin-top: 40px;
z-index: 1;
}

.newsX {
width: 100%;
font-size: 1.6rem;
font-weight: 700;
}

.newsX h2 img {
width: auto;
height: 60px;
margin-bottom: 20px;
}

.newsX .inner {
background: #fff;
width: 100%;
/*height: 800px;*/
font-size: 1.4rem;
text-align: justify;
margin-bottom: 30px;
padding: 25px 25px 10px;
border: 2px solid #000;
overflow-y: scroll;
line-height: 1.8;
}

.newsX .inner dt {
padding: 0;
}

.newsX .inner dd {
margin-bottom: 20px;
padding: 0;
}

.wrapCo {
position: relative;
background: url("../img/bg_wrap.jpg") repeat-y;
background-size: 100%;
width: 88%;
text-align: justify;
color: #fff;
margin: 0 auto;
margin-top: -50px;
padding: 60px 25px 30px;
z-index: 0;
}

.wrapCo a {
color: #fff;
text-decoration: underline;
}

#titleCo {
text-align: center;
margin: 0 auto;
margin-bottom: 30px;
}

#titleCo img {
width: auto;
height: 60px;
}

.detailTxt {
font-size: 1.6rem;
text-align: center;
line-height: 1.6;
}

.titleLaTxt {
font-size: 2rem;
text-align: center;
color: #c7a546;
margin: 30px auto;
line-height: 1.5;
}

.titleMiTxt {
font-size: 1.6rem;
color: #c7a546;
}

.detailMl {
margin-left: 16px;
margin-bottom: 20px;
}

.headAlignment dt {
float: left;
padding: 0;
}

.headAlignment dd {
padding: 0 0 0 70px;
}

.colorGo {
color: #c7a546;
}

.headAlignment2 dt {
float: left;
padding: 0;
}

.headAlignment2 dd {
padding: 0 0 0 16px;
}

.headAlignment3 dt {
float: left;
padding: 0;
}

.headAlignment3 dd {
padding: 0 0 0 16px !important;
}

#miraithingsOnlineStore {
font-size: 1.6rem;
text-align: center;
margin-top: 0px;
letter-spacing: .05em;
}

#miraithingsOnlineStore img {
width: 100%;
margin-bottom: 10px;
}

#miraithingsOnlineStore a {
color: #29a2d9;
}

#bgIcon01,
#bgIcon02,
#bgIcon03,
#bgIcon04 {
display: none;
}

#goodsWrap {
}

.goods {
position: relative;
width: 100%;
text-align: center;
margin-bottom: 30px;
}

.goodsName,
.goodsNameW {
position: absolute;
font-size: 1.1rem;
color: #000;
line-height: 1.2;
padding: 0 10px;
z-index: 1;
left: 0;
right: 0;
bottom: 8px;
margin: auto;
}

.goodsNameW {
font-size: 1rem;
color: #fff;
bottom: 20px;
}

#goodsBag {
width: 100%;
margin: 0 auto;
margin-bottom: 30px;
}

#christmasCard,
#valentineCard {
width: 90%;
text-align: center;
margin: 0 auto;
}

/**/

footer {
position: relative;
width: 100%;
color: #fff;
margin: 0 auto;
padding: 20px 0 30px;
line-height: 1;
}

#globalNavF {
position: relative;
width: 100%;
margin: 0 auto;
}

#globalNavF li {
margin: 20px auto;
}

#globalNavF li a {
font-size: 1.4rem;
font-weight: 700;
color: #000;
}

#logoF {
width: 200px;
margin: 0 auto;
margin-bottom: 20px;
}

#copyright {
width: 100%;
font-size: 1rem;
color: #666;
line-height: 1.5;
}

.pagetop {
position: fixed;
background: url("../img/hamburger_bg.png") no-repeat;
background-size: 62px;
width: 62px;
height: 62px;
bottom: -100px;
right: 10px;
transition: .3s;
z-index: 500;
}

.arrowRoundUp {
position: absolute;
display: block;
width: 4px;
height: 20px;
border-radius: 5px;
background-color: #000;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: 201;
}

.arrowRoundUp::before {
content: "";
position: absolute;
top: 0;
right: -1px;
display: block;
width: 12px;
height: 4px;
border-radius: 5px;
background-color: #000;
transform: rotate(-45deg);
}

.arrowRoundUp::after {
content: "";
position: absolute;
top: 0;
left: -1px;
display: block;
width: 12px;
height: 4px;
border-radius: 5px;
background-color: #000;
transform: rotate(45deg);
}

.orderBox { 
display: flex;
flex-direction: column;
}

.order1 { order: 1; }
.order2 { order: 2; }
.order3 { order: 3; }
.order4 { order: 4; }
.order5 { order: 5; }

}