@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);

.Ttl-content{position:relative;margin: 0;overflow: hidden;}
.Ttl-content img{width:100%;}
.Ttl-space{position:absolute;width: 100%;top: 10vh;display: block;margin: 0 auto;overflow: hidden;}
.Ttl-space h2{margin:0 auto;width:1004px;}

main{
    overflow: hidden;
    padding-top: 5vh;
}
h2{ font-family: 'rounded-mplus-1p';
    src: url('	http://mplus-webfonts.sourceforge.jp/mplus-1c-thin.eot');
    src: url('/fonts/rounded-mplus-1p-regular.woff') format('woff'),
    url('/fonts/rounded-mplus-1p-regular.eot') format('truetype');}
h2{font-size: 2vw;color:#00aced;}
.choose h2{position:relative;margin-bottom: 5vh;margin-top: 2vh;font-size: 1.2vw;color: #7b7b7b;position: relative;text-align: left;}
.choose h2 p{position:relative; z-index:2; display:inline-block; margin:0 2.5em 0 0; padding:0 1em 0 0; background:#fff; text-align:left;}
.choose h2:before{position:absolute; top:50%; z-index:1; content:""; display:block; width:100%; height:1px; background:#ccc;}
.choose ul{display:flex;justify-content:space-between;margin-bottom: 15vh;}
.choose li{width:calc(100%/5); padding:0 1vw}
.choose a:hover{opacity: 0.7;}
.choose img{width: 90%;}

ul.shop-all{display:flex;flex-direction:column;justify-content: center;}
ul.detail{display:flex;flex-wrap: wrap;}
.detail li:last-child{width: 57%;}
/*-----------------------------------------------

導入システム一覧

-----------------------------------------------*/
.shop{border-bottom:1px solid #eee;padding: 1rem 0;display:flex;margin-bottom: 5vh;overflow: hidden;}
.shop-name{font-size: 1.2vw;margin-bottom: 2vh;}
img.shop-img{width:300px; height:200px; margin-right:2vw;}
.shop-link:before{content:"URL";margin-right: 1vw;}
.system{margin-bottom: 4vh;margin-top: 1vh;width: 100vw;display: flex;box-sizing: border-box;}
.system span:nth-child(2){}
.system span{margin-right:1vw;}
.system a{position:absolute; top:0; left:0; width:100%; height:100%;}
.system span:hover{opacity:0.7;}
.system span:nth-child(1):hover{opacity:inherit;}
.system p{display: flex;justify-content:space-between;flex-wrap: wrap;}
.system p span{display:block;/* box-sizing: border-box; */}
.address{margin-bottom:2vh;}
.shop-link{}

.kouri:after{content:"小売り・専門店";font-size: 12px;margin-left: 1rem;vertical-align: middle;background: #b7b6b6;padding: .2rem .5rem;border-radius: .2rem;color: #fff;font-weight: 500;}

span:after{font-size: 12px;/* margin-left: 1rem; */vertical-align: middle;background: #b7b6b6;padding: .2rem .5rem;border-radius: .2rem;color: #fff;font-weight: 500;box-sizing: border-box;}
span.wechat a{}

.wechat:after{content:"WeChat Pay";}
.bcpos:after{content:"BCPOS";}
.tenpo:after{content:"Tenpovisor";}
.tax:after{content:"あっと免税";}
.misemegu:after{content:"みせめぐ";}

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

IE hack

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

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	main.indexContent{margin:0 auto; width:96%;max-width:1004px; }
	.case_list,.choose{max-width:1004px; margin:0 auto; padding-top:5vh;}
	.choose h2 p{font-weight:100; }
	.choose ul{width:100%;}
	img.shop-img{width:auto; height:200px;}
	.kouri:after{content:"小売り・専門店";font-size: 1vw;margin-left: 1rem;vertical-align: middle;background: #b7b6b6;padding: .2rem .5rem;border-radius: .2rem;color: #fff;font-weight: 500;}
	span:after{font-size: 1vw;margin-left: 1rem;vertical-align: middle;background: #b7b6b6;padding: .2rem .5rem;border-radius: .2rem;color: #fff;font-weight: 500;}
}



/*--------------------------------------------------------
BCPOS
--------------------------------------------------------*/
.b1 span.bcpos ~ span{display:none;}

/*--------------------------------------------------------
BCPOS + Tenpovisor
--------------------------------------------------------*/
.b2 span.tenpo ~ span{display:none;}

/*--------------------------------------------------------
BCPOS + Tenpovisor + あっと免税
--------------------------------------------------------*/
.b3 span.tax ~ span{display:none;}

/*--------------------------------------------------------
BCPOS + Tenpovisor + あっと免税 + Wechat Pay
--------------------------------------------------------*/
.b4 span.wechat ~ span{display:none;}

/*--------------------------------------------------------
BCPOS + Tenpovisor + あっと免税 + Wechat Pay + みせめぐ
--------------------------------------------------------*/
.b5{}

/*--------------------------------------------------------
BCPOS + あっと免税
--------------------------------------------------------*/
.b6{}

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

--------------------------------------------------------*/
@media screen and (min-width: 729px) and (max-width: 920px){
	.system{position:relative;padding-bottom: 1vh;min-height: 3vh;}
	.system span:nth-child(5){position: absolute;left: 0;top:3vh;}
	.system span:nth-child(6){position:absolute;top: 3vh;left: 23%;}
	.system span:nth-child(5):after{margin-left:0;}
	.system span:nth-child(1):after{margin-left:0;}
	.system p{position:relative;/* box-sizing: border-box; */}
}

@media screen and (max-width: 410px) {/*410px以下*/
.system span:first-child{display: block; margin-bottom:1vh;}
.system p{align-items:flex-start;justify-content: initial;}
.system p{max-width: 95%!important;}
.system{margin-bottom: 1vh;}
}

@media screen and (max-width: 728px) {/*728px以下*/
h2{font-size: 5vw;}
.Ttl-space{top: 5vh;padding-left: 4vw;}
.choose h2{font-size: 3vw; margin-bottom:2vh;}
.choose ul{margin-bottom: 5vh;}
main{padding-top:0;}
.shop-name{font-size: 4vw;}
.kouri:after{font-size: 14px;}
.detail li:last-child{width: 100%;}
span:after{font-size: 14px;}
img.shop-img{max-width: 600px;max-height: 400px;width:100vw;height: auto;margin-right:2vw;}
.system{display:inline-block;margin-bottom: 2vh;}
.system p{margin-top: 2vh;width: 100vw;max-width: 85%;align-items: stretch;justify-content: inherit;}
.system p span{margin-bottom:2vh;}
.shop:last-child{border-bottom:none;}
}

@media screen and (min-width: 729px) and (max-width: 959px){/*729px以上*/
h2{font-size: 3vw;}
.Ttl-space{top: 6vh;}
.Ttl-space h2{padding-left: 5vw;}
.choose h2{font-size: 2vw;}
.shop-name{font-size: 2.5vw;}
.kouri:after{font-size: 12px;}
span:after{font-size: 12px;}
}

@media screen and (min-width: 960px) and (max-width: 1365px){/*960px以上*/
.Ttl-back{background-size: contain;}
.Ttl-back h2{padding-left:4vw; padding-top:8vh;}
.Ttl-content{position:relative;overflow: hidden;height: 300px;}
h2{font-size: 2.5vw;}
main{padding-top: 0;}
.choose h2{font-size: 1.6vw;}
.shop-name{font-size: 1.8vw;}
.Ttl-space{top: 9vh;}
.Ttl-space h2{padding-left: 5vw;}
.kouri:after{/* font-size: 1vw; */}
}

@media screen and (min-width: 1366px) {/*1366px以上*/
}