@charset "utf-8";
/* ==========================================================
	スマホ 640px以下
========================================================== */

@media (max-width: 640px) {


/* ==========================================================
	共通パーツ
========================================================== */	
/*　----メインエリア----　*/
#service .mainArea {
	padding: 3%;
}
#service .mainArea .leftText .catch {
	font-size: 130%;
	font-weight: bold;
	margin-bottom: 20px;
}
#service.credit .mainArea .rightImg,
#service.service1 .mainArea .rightImg,
#service.convenience .mainArea .rightImg,
#service.ccheck .mainArea .rightImg,
#service.emoney .mainArea .rightImg,
#service.webaccout .mainArea .rightImg,
#service.maillink .mainArea .rightImg,
#service.payeasy .mainArea .rightImg,
#service.dcmodule .mainArea .rightImg,
#service.ec .mainArea .rightImg,
#service.ticketpay .mainArea .rightImg,
#service.booking .mainArea .rightImg {
	width: 100%;
	float: none;
	margin: 10px 0;
}

/*#service .section.leftIconArea .subIcon {
	width: 18%;
	float: left;
	margin: 0 5px 5px 0;
}
#service .section.leftIconArea .rightBox {
	float: none;
	width: 100%;
}
#service .section.leftIconArea .rightBox .subTitle {
	font-size: 110%;
	font-weight: bold;
}
#service .section.leftIconArea .rightBox .subText {
	float: left;
}
#service .section.leftIconArea .rightBox ul li {
	width: 46%;
	margin: 0 5px 10px;
}*/
#service .grayLine {
	margin: 0 0 20px;
	padding: 20px 0 0;
}

/*　----メリット----　*/

#service .meritArea ul li {
	float: none;
	width: 100%;
	margin: 0 0 10px 0;
	display: block;
}

/*　----h4が左右に並ぶレイアウト(webaccout)----　*/
#service .h4row .h4left,
#service .h4row .h4right {
	width: 100%;
	float: none;
	font-size: 120%;
}
#service .h4row .h4left {
	margin-right: 0;
}

/*　----ご利用の流れ(credit,maillink)----　*/

#service .flowArea ul {
	width: 100%;
}
#service .flowArea ul li {
	float: none;
	width: 100%;
	margin: 0 0 10px;
	display: block;
}

/*　----ご購入について(credit,c-check)----　*/

#service table.howtoBuy{
	margin-bottom: 10px;
	line-height: 1.3;
}
#service .section table.howtoBuy th {
	font-size: 100%;
	font-weight: bold;
	padding: 5px;
}
#service table.howtoBuy td {
	padding: 5px;
	font-size: 90%;
}

#service table.howtoBuy .shopText p,
#service table.howtoBuy .right_th p {
	padding-left: 5px;
}
#service table.howtoBuy .shopName {
	width: 0;
	padding: 0;
}
#service table.howtoBuy .shopName p {
	display: none;
	padding: 0;
}
#service table.howtoBuy .left_th {
	width: 30%;
}
#service table.howtoBuy .shopIcon {
	width: 30%;
	margin: 0 auto;
}

/*　----幅の広いフロー(ticketpay,booking)----　*/
#service .wideFlowArea .flowImg {
	width: 100%;
  margin: 0;
}

/*　----横幅いっぱいに画像が二つ並ぶレイアウト(maillink,booking)----　*/
#service .featureArea ul li,
#service .exampleArea ul li {
	float: none;
	width: 100%;
	display: block;
}
#service .featureArea ul li:first-child,
#service .exampleArea ul li:first-child {
	margin-right: 0;
  margin-bottom: 10px;
}

/*　------------ 決済タイル (authorized,ec) ------------　*/

#service #content .contentInner .service_tileArea .tile {
	width: 100%;
	float: none;
	margin: 0 auto 10px;
}
#service #content .contentInner .service_tileArea .tile a {
	height: auto!important;
}
#service #content .contentInner .service_tileArea a .title {
	height: auto!important;
}

/* ===========================
	/service/credit.html
==============================*/


/*　----共通パーツ----　*/

#service .widelyArea .leftBox,
#service .secureArea .leftBox,
#service .codeArea .leftBox,
#service .widelyArea .rightBox, 
#service .secureArea .rightBox, 
#service .codeArea .rightBox {
	float: none;
	width: 100%;
	margin-right: 0;
}
#service .balloonArea,
#service .secureArea .balloonArea ul {
	width: 96%;
	height: auto!important;
	margin: 0 auto 10px;
}

/*　----事業の形態を問わず幅広くご利用いただけます----　*/

#service.credit .widelyArea .leftBox .grayBox ul li,
#service.credit .leftBox .balloonArea ul li {
	float: none;
	width: 100%;
	margin-right: 0	;
	background: url(/images/common/list_blue.png) 0 center no-repeat;
	-moz-background-size: 6px 6px;
	background-size: 6px 6px;
}
#service.credit .widelyArea .rightBox img {
	width: 100%;
}

/*　----3Dセキュアとは？----　*/


#service.credit .secureArea .balloonArea ul li {
	font-size: 100%;
	font-weight: bold;
}



/*　----○○でのお支払い方法----　*/

#service .payArea .payIcon {
	width: 18%;
	float: left;
	margin: 0 5px 5px 0;
}
#service .payArea .payWay {
	float: none;
	width: 100%;
}
#service .payArea .payWay .payTitle {
	font-size: 110%;
	font-weight: bold;
}
#service .payArea .payWay ul li {
	width: 46%;
	margin: 0 5px 10px;
}
#service .payArea .grayLine {
	margin: 0 0 20px;
	padding: 20px 0 0;
}
#service .payserviceArea .grayBox {
	width: 96%;
	float: none;
	margin: 0 auto 10px;
	padding: 2%;
}
#service .payserviceArea_02 .grayBox {
	padding: 2%;
}
#service .payserviceArea_02 ul li.store_01 { width: 77.2%;}
#service .payserviceArea_02 ul li.store_02 { width: 46.6%;}
#service .payserviceArea_02 ul li.store_03 { width: 40.5%;}



/* ===========================
	/service/service1.html
==============================*/

/*　----メインエリア----　*/
#service.service1 .mainArea .leftText .creditBrand .creditImg {
	width: 70%;
}


/* ===========================
	/service/convenience.html
==============================*/

/*　----メインエリア----　*/


#service.convenience .mainArea .mainAreaBtn {
	width: 97%;
  margin-top: 10px;
}
/*　----コンテンツ----　*/
#service.convenience .cvOnline {
	margin-bottom: 50px;
}
#service.convenience .payTitle img {
  display: none;
}
#service.convenience .h4sub {
  font-size: 120%;
  margin: 35px 0 15px;
  clear: both;
  overflow: hidden;
}

/* ===========================
	/service/c-check.html
==============================*/



/* ===========================
	/service/e-money.html
==============================*/



/* ===========================
	/service/webaccout.html
==============================*/

#service.webaccout .mainArea .mainAreaBtn {
	width: 97%;
  margin-top: 10px;
}


/*===========================
	/service/maillink.html
==============================*/


#service.maillink .featureArea dt {
	font-size: 110%;
	color: #0085ca;
	font-weight: bold;
	line-height: 1.3;
	margin-top: 20px;
}
#service.maillink .featureArea .numberImg {
	width: 13%;
	margin-right: 2%;
    display: inline-block;
    vertical-align: middle;
}
#service.maillink .featureArea dt p {
	display: inline-block;
    vertical-align: middle;
    width: 84%;
}
#service.maillink .featureArea dd a {
	display: inline-block;
    text-decoration: underline;
}

#service.maillink .listBlue02 dd {
    padding-left: 15px;
}
#service.maillink .listBlue02 dt {
	line-height: 130%;
	margin: 20px 0 0;
    font-size: 110%;
}
#service.maillink .grayBox {
	width: 100%;
	margin: 20px auto 0;
}

#service.maillink .security .pmark {
	width: 80%;
	padding: 10%;
}

/* ===========================
	/service/payeasy.html
==============================*/

/*　----メインエリア----　*/



#service.payeasy .mainArea {
	position: relative;
}
#service.payeasy .mainArea .rightImg {
	position: static;
}
#service.payeasy .mainArea .leftText {
	width: 100%;
}
#service.payeasy .mainArea ul.mainAreaBtn li a img {
	width: 96%;
	float: none;
}
#service.payeasy .mainArea ul.mainAreaBtn li a img:first-child {
	margin-right: 0;
	margin-bottom: 3%;
}

/* ===========================
	/service/dcmodule.html
==============================*/

/*　----ショップ様に合った決済方法をお選びいただけます----　*/

#service.dcmodule .choice .point {
	line-height: 140%;
}
#service.dcmodule .choice .point .fontBig {
	line-height: 130%;
}
#service.dcmodule .choice .choiceImg p {
	margin: 20px auto;
	float: none;
}
#service.dcmodule .choice .choiceImg p.img01 {
	width: 100%;
}
#service.dcmodule .choice .choiceImg p.img02 {
	width: 9.8%;
}
#service.dcmodule .choice .choiceImg p.img03 {
	width: 100%;
}
#service.dcmodule .choice p.img04 {
	width: 13%;
	margin: 15px auto;
}
#service.dcmodule .choice .grayBox .boldText {
	font-weight: bold;
	text-align: center;
	font-size: 120%;
	margin: 20px 0;
}
#service.dcmodule .choice .grayBox.ec .ecIcon {
	width: 90%;
	margin: 0 auto;
}
#service.dcmodule .choice .grayBox.pd .pdIcon {
	width: 40%;
	margin: 0 auto 15px;
}
#service.dcmodule .choice .grayBox.pd .serviceIcon {
	font-weight: bold;
	font-size: 90%;
	line-height: 130%;
	width: 100%;
	clear: both;
}
#service.dcmodule .choice .grayBox.pd .serviceIcon {
	margin-bottom: 15px;
}
#service.dcmodule .choice .grayBox.pd .serviceIcon img {
	width: 25%;
	margin: 0 5px 0 10px;
	float: left;
}
#service.dcmodule .choice .grayBox.pd .serviceIcon p {
	padding: 2%;
}
#service.dcmodule .choice .grayBox.pd .serviceIcon span {
	font-size: 120%;
}

/*　----ECパッケージ決済モジュール----　*/

#service.dcmodule .ecPack ul.dlArea li.last {
	margin-top: 15px;
}
#service.dcmodule .ecPack .rightBox {
	width: 100%;
	float: none;
	margin: 10px 0;
}
#service.dcmodule .ecPack .leftBox {
	width: 100%;
	margin: 0 3% 45px 0;
}

#service.dcmodule .ecBanner {
	width: 54%;
}
#service.dcmodule .ecPack ul.dlArea li {
	float: none;
	width: 100%;
	font-size: 130%;
}
#service.dcmodule .ecPack ul.dlArea li:first-child {
	margin-bottom: 15px;
}
#service.dcmodule .ecPack ul.dlArea li img {
	width: 9.6%;
}
#service a.summary {
	padding: 3px 0 2px 25px;
	margin: 20px 0 0 0;
}

/* ==========================================================
	/service/authorized.html
========================================================== */

#service.authorized .mainBtmArea {
	padding: 0;
	width: 100%;
	margin: 0 auto 0;
}
#service.authorized .mainBtmArea .mbImg_01,
#service.authorized .mainBtmArea .mbImg_02 {
	display: block;
	width: 100%;
}

#service.authorized .systemArea {
	border: 1px solid #32a300;
	width: 100%;
	margin: 20px auto 0;
}
#service.authorized .systemArea .leftArea,
#service.authorized .systemArea .rightArea {
	height: auto!important;
}
#service.authorized .systemArea .leftArea {
	width: 100%;
	display: block;
}
#service.authorized .systemArea .leftArea p {
	width: 95%;
	margin: 0 auto;
}
#service.authorized .systemArea .rightArea {
	width: 100%;
	display: block;
}
#service.authorized .systemArea .rightArea p {
	display: block;
}
#service.authorized .systemArea .rightArea p.system_img {
	width: 92%;
	margin: 0 2%;
	padding: 10px 7px 0;
}
#service.authorized .systemArea .rightArea p.system_btn {
	width: 50%;
	padding: 10px 0;
	margin: 0 auto;
}

/* ==========================================================
	/service/ec.html
========================================================== */

#service.ec .functionArea ul li {
	float: none;
	width: 100%;
	margin: 0 0 1.5% 0;
	display: inline-block;
}



/* ==========================================================
	/service/ticketpay.html
========================================================== */


#service.ticketpay .spImplementFlow .title {
  margin-top: 10px;
}
#service.ticketpay .spImplementFlow .step {
	width: 70%;
  margin: 10px auto;
}
#service.ticketpay .spImplementFlow .arrow {
	width: 13%;
  margin: 0 auto;
}
#service.ticketpay .applyImg {
	width: 100%;
}
#service.ticketpay .payArea .payBlock {
	width: 100%;
	float: none;
	margin: 0;
}
#service.ticketpay .payArea .payIcon {
	width:15%;
}
#service.ticketpay .payArea .payWay {
	width: 80%;
}

/* ==========================================================
	/service/booking.html
========================================================== */

#service.booking .flowArrow {
	width: 12.4%;
} 
#service.booking .point {
	font-size: 170%;
  margin-bottom: 10px;
}


}/* ▲max-width: 640px end▲*/