@charset "UTF-8";

html,
body,
div,
span,
p,
blockquote,
pre,
a,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	font-size: 18px;
	height: 100%;
}

@media screen and (max-width:480px) {
	html {
		font-size: 14px;
	}
}

body {
	background-color: #fff;
	color: #5d5d5d;
	font-family: 'メイリオ', 'Meiryo', 'Meiryo UI', 'ヒラギノ角ゴ Pro W3', 'Osaka', Arial;
	-webkit-font-smoothing: antialiased;
	height: 100%;
}

h1 {
	background: transparent;
	border: 0;
	font-size: 133%;
	/* 24px(18px=100%) */
	font-weight: bold;
	margin: 30px 10px 18px 10px;
	vertical-align: baseline;
}

h2,
h3 {
	background: transparent;
	border: 0;
	font-size: 100%;
	font-weight: bold;
	margin: 0 0 10px 0;
	vertical-align: baseline;
}

input {
	-webkit-appearance: none;
	font-family: 'メイリオ', 'Meiryo', 'Meiryo UI', 'ヒラギノ角ゴ Pro W3', 'Osaka', Arial;
	-webkit-tap-highlight-color: transparent;
}

/*IEのinputタグの×ボタンをオフ*/
input::-ms-clear {
	visibility: hidden;
}

a {
	color: #f27935;
	-webkit-tap-highlight-color: transparent;
	text-decoration: none;
}

.main a:hover {
	border-bottom: solid 1pt #5d5d5d;
	border-bottom-color: #f27935;
}

img {
	border: none;
}

ul li {
	list-style-type: none;
}

/* ヘッダー */
.header {
	background-color: #009688;
	color: #ffffff;
	min-width: 320px;
	display: flex;
}

.header-wrap {
	margin: 10px auto;
	max-width: 1024px;
	min-width: 320px;
	width: 100%;
}

/* ヘッダータイトル */
.header-title {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	background-color: transparent;
	border: none;
	cursor: pointer;
}

/* ヘッダーロゴ */
.header-logo {
	height: 54px;
}

/* ヘッダーテキスト */
.header-text {
	height: 54px;
	line-height: 54px;
	margin-left: 10px;
	font-size: 27px;
	color: #fff;
	text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
}

.page_address {
	color: white;
	font-size: 12px;
	padding: 12px 0 0 12px;
}

@media screen and (max-width:480px) {
	.page_address {
		display: none;
	}
}

.bold {
	font-weight: bold;
}

.comments {
	font-size: 15px;
}

.wrap {
	margin: 0 auto;
	max-width: 1024px;
	min-width: 320px;
	width: 90%;
}

@media screen and (max-width:1024px) {
	.wrap {
		width: 100%;
	}
}

.footer {
	font-size: 0.7em;
	font-weight: bold;
	height: 60px;
	margin-top: -60px;
	text-align: center;
}

@media screen and (max-width:480px) {
	.footer {
		font-size: 10px;
		min-width: 320px;
	}
}

.copyright {
	padding-top: 8px;
}

.container {
	min-height: 100%;
}

.main {
	padding-bottom: 60px;
}

.indexLink {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.indexLink a {
	border-bottom: solid 1px #ccc;
	color: #5d5d5d;
	display: block;
	margin-right: 1em;
}

.sideways {
	/* macOSのChromeでtext-orientationがデフォルトの「mixed」だと縦書きにならない文字があるので、
	「sideways（全行を横書きで書いて90°回転したようにレイアウトする）」をその文字に使用する。
	ただし、FireFoxだと「sideways」で位置がおかしくなるためChromeのみの対応とする。 */
	-webkit-text-orientation: sideways;
}

section {
	padding: 15px 0 15px 12px;
}

.tips {
	background-color: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 10px;
	margin: 10px 10px 30px 10px;
	padding: 15px 12px;
}

@media screen and (max-width:480px) {
	.tips {
		margin: 8px 8px 24px 8px;
		padding: 12px 9px;
	}
}

.tips img {
	max-width: 100%;
}

.tips-link {
	padding: 8px 12px;
}

.tips-link li {
	padding: 8px;
}

.tips-link li a {
	background-size: 1.5em 1.5em;
	background-image: url(../img/link-arrow.svg);
	background-repeat: no-repeat;
	color: #5d5d5d;
	display: block;
	font-weight: bold;
	padding-left: 2em;
	padding-top: 0.1em;
}

@media screen and (max-width:480px) {
	.tips-link {
		padding: 6px 9px;
	}

	.tips-link li {
		padding: 6px;
	}
}

.store-image {
	height: 100%;
	width: 150px;
}

a.anker-style-off:hover {
	border: none;
	cursor: pointer;
}

.block-section {
	display: inline-block;
}

.backButton {
	background-color: #eeeeee;
	border-radius: 10px;
	border-style: none;
	cursor: pointer;
	margin-bottom: 30px;
	margin-left: 10px;
	padding: 8px 10px;
}

.inline-image {
	vertical-align: middle;
}

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

	/*　画面サイズが1024pxより小さい　*/
	.btnTop {
		height: 34px;
	}

	.btnTop p {
		display: none;
	}

	.btn_top {
		padding-top: 34px;
	}
}

.img-portfolio-detail {
	margin-bottom: 20px;
	border: none;
}

a.img-portfolio-detail:hover {
	border: none;
}

.img-responsive {
	max-width: 100%;
	height: auto;
}

.function-image {
	margin: 15px auto;
	max-height: 600px;

}

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

	/*　画面サイズが1024pxより小さい　*/
	.function-image {
		max-height: 500px;
	}
}

@media screen and (max-width: 768px) {
	.function-image {
		max-height: 400px;
	}
}

@media screen and (max-width:768px) {
	/*　画面サイズが768pxより小さい　*/
}

/* 支払秘書の導入メリット */
.merit {
	width: 100%;
	border-spacing: 0px;
}

.merit-title {
	padding: 10px;
	text-align: left;
	font-weight: normal;
	color: white;
	background-color: #68c3a3;
}

.merit-detail {
	padding-bottom: 10px;
	font-size: 14px;
	text-align: left;
	background-color: #e1f4ed;
}

.merit-detail-title {
	margin-top: 10px;
}

.merit-detail-description {
	text-indent: 2em;
}

.merit-caution {
	margin-top: 5px;
	font-size: 12px;
}

.qr_trademark_display {
	margin: 20px 0 20px 10px;
}