* {
	font-family:'Roboto',Arial, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

html{
	height: 100%;
	font-size: 1vw;
}

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

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

body{
	width: 100%;
	height: 100%;
}

body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td  {
	border:0px;
	padding:0px;
	margin:0px;
	font-weight: normal;
	vertical-align:baseline;
	word-wrap:break-word;
	box-sizing: border-box;
}
#container{
	//min-width: 1060px;/* 最小幅 */
	min-width: 768px;/* 最小幅 */
	max-width: 1440px;/* 最大幅 */
	margin: auto;
	min-height: 100vh;
}

#header {
	margin-top: 10px;
}
#header .headerImageBox {
	position: relative;
}

.headerImageBox p.title {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-weight: bold;
	font-size: 2.5rem;
	color: #FFF;
}
.headerImageBox .selectPage {
	position: absolute;
	top: 80%;
	left: 50%;
	//transform: translate(-50%,-50%);
	transform: translateX(-50%);
}
.headerImageBox .selectPage a.button {
	display: inline-block;
	color: #13d0ca;
	background-color: #FFF;
	//padding: 2px 20px 2px 20px;
	//line-height: 1.8em;
	font-size: 2rem;
	text-align: center;
	width: 222px;
	text-decoration: none;
    margin: 0 20px 0 20px;
}
.headerImageBox .selectPage a.selected {
	color: #FFF;
	background-color: #13d0ca;
}
.headerImage {
	width: 100%;
	height: auto;
}
.selectPage {
	width: max-content;
}
#footer {
	margin-top: 20px;
	background-color: #000;
	width: 100%;
	height: 2.5rem;
	line-height: 2.5rem;
	text-align: center;
}
#footer p {
	color: #fff;
	padding-bottom: 8px;
}

.tabbar {
	margin-top: 10px;
	height: 80px;
	//border-bottom: 1px solid #868686;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}
.tabbar a.tab {
	display: block;
	height: 80px;
	width: 238px;
	background-color: #D9D9D9;
	border: 1px solid #868686;
	border-bottom: none;
	margin-right: 2px;
	border-radius: 5px 5px 0 0 / 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0 / 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0 / 5px 5px 0 0;
}
.tabbar a.selected {
	background-color: #F5F5F5;
}
.brandIcons {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.brandIcons img {
	height: 65px;
	width: auto;
}
.searchBox {
	border: 1px solid #868686;
	background-color: #F5F5F5;
	width: 100%;
}
.iframeBox {
	margin: 10px;
	background-color: #FFF;
}
.iframeBox iframe {
	border: none;
	width: 100%;
	height: 600px;
}


:root {
	--progress-circle: 28px;
	--progress-line: 6px;
	--base-color: #00bfc4;
}

.progress {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 40px auto;
	width: 90%;
}

.progress::before {
	content: "";
	position: absolute;
	top: calc(var(--progress-circle)/2 - var(--progress-line)/2);
	left: calc(var(--progress-circle)/2);
	right: calc(var(--progress-circle)/2);
	height: var(--progress-line);
	background: transparent;
	border-top: var(--progress-line) solid #ddd;
	border-radius: 4px;
}

.progress-fill {
	position: absolute;
	top: calc(var(--progress-circle)/2 - var(--progress-line)/2);
	left: calc(var(--progress-circle)/2);
	height: var(--progress-line);
	background: var(--base-color);
	border-radius: 4px;
}

.progress-step {
	text-align: center;
}

.progress-circle {
	display: inline-block;
	width: var(--progress-circle);
	height: var(--progress-circle);
	border-radius: 50%;
	background: var(--base-color);
	border: none;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}

.sell-header-message {
	white-space: pre-line;
	width: 60%;
	margin: 0 auto;
	padding-bottom: 20px;
	font-size: 1.2rem;
}

.sell-header {
	margin: 0 auto;
	width: 60%;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	padding-bottom: 20px;
}

.error-message {
	margin: 0 auto;
	width: 60%;
	text-align: center;
	padding-bottom: 10px;
	font-size: 1.2rem;
	color: red;
	font-weight: 600;
	white-space: pre-line;
	line-height: 1.5;
}

.form-list {
	width: 60%;
	margin: 0 auto;
	padding-bottom: 20px;
}

.form-row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 12px;
	align-items: center;
	margin: 12px 0;
	position: relative;
}

.form-row label {
	font-weight: 600;
	font-size: 14px;
	padding-left: 8px;
}

.form-row input[type="text"],
.form-row select,
.form-row textarea {
	height: 40px;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1.5px solid #cfcfcf;
	background: #fff;
	box-sizing: border-box;
	font-size: 14px;
	outline: none;
	transition: box-shadow .12s, border-color .12s;
	resize: vertical;
}

.form-row textarea {
	height: 85px;
}

.form-row input[type="text"]:focus,
.form-row select:focus,
.form-row textarea:focus {
	border-color: var(--base-color);
	box-shadow: 0 0 0 3px rgba(0,191,196,0.08);
}

.confirm-row{
	gap: 50px;	
}

.confirm-row label,
.confirm-row p {
	font-size: 18px;
}

.select-wrap select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
}

.select-wrap::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid rgb(127,127,127);
	pointer-events: none;
}

.btn-area{
	display: flex;
	justify-content: center;
	gap: 50px;
	margin-bottom: 50px;
}

.btn{
	padding: 6px 16px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	cursor:pointer;
}

.btn-back{
	border: 2px solid var(--base-color);
	background: #fff;
	color: var(--base-color);
}

.btn-action{
	border:2px solid var(--base-color);
	background: var(--base-color);
	color: #fff;
}