@charset "utf-8";

.col_red{
	color: red;
	font-size: 0.9em;
}
#desiredService input[type=checkbox] {
	transform: scale(1.8);
}
#trialList01Order > .description-container, #trialList01Item > .description-container {
	flex: 1 1 50%; /* 説明文の幅を調整 */
}
#trialList01Order > .orderNum, #trialList01Stock > .orderNum {
	margin-top: 20px;
	flex: 1 1 50%; /* セレクトボックスの幅を調整 */
}
#trialOptionsList li + li {
	margin-top: 0px;
}
#trialList01Order, #trialList01Stock, #trialList01Item, #trialList01Purchase, #trialList01Converter, #trialList01Receipt {
	display: flex; /* 2カラムのレイアウト */
	align-items: center; /* チェックボックスとテキストを上下中央揃え */
	padding: 15px;
	background-color: #ffffff;
	margin: 0;
	flex-wrap: wrap; /* 要素が画面幅に合わせて折り返される */
	border: solid 1px #CBCBCB;
	border-radius: 0;
}
#trialList01Order > label, #trialList01Stock > label, #trialList01Item > label, #trialList01Purchase > label, #trialList01Converter > label, #trialList01Receipt > label {
	flex-shrink: 0; /* チェックボックスのサイズを固定 */
	width: 120px;
	margin-right: 0px; /* チェックボックスと右側コンテンツの間隔調整 */
	line-height: 1.5;
}
.description-container {
	flex: 1;
	padding-left: 20px;
}
.description {
	color: #333;
	font-size: 14px;
	margin-bottom: 10px;
	line-height: 1.5;
	text-align: left;
}
.button-container {
	display: flex;
	flex-wrap: wrap; /* ボタンが折り返す */
	justify-content: space-between; /* ボタンを均等に配置 */
	width: 100%; /* ボタンコンテナを親要素いっぱいに */
	gap: 8px;
}
.action-btn {
	background-color: #eb6da5; /* ボタンの色 */
	color: white;
	padding: 5px 10px;
	border-radius: 25px; /* 丸いボタン */
	font-size: 12px;
	text-align: center;
	display: inline-block;
	cursor: not-allowed; /* クリック不可のカーソル */
	pointer-events: none; /* クリックやホバーを無効にする */
	flex: 1 1 25%; /* 各ボタンの幅を均等にする */
}
.stockButton {
	background-color: #68b967;
}
.itemButton {
	background-color: #de9d00;
}
.purchaseButton {
	background-color: #638fb9;
}
.receiptButton {
	background-color: #9c739a;
}
.converterButton{
	background-color: #ee7d53;
}
select {
	padding: 10px;
	border-radius: 5px;
	font-size: 14px;
	width: 100%;
	max-width: 400px;
	margin-top: 10px;
}
@media (max-width: 768px) {
	#trialList01Order > label, #trialList01Stock > label, #trialList01Item > label, #trialList01Purchase > label, #trialList01Converter > label, #trialList01Receipt > label{
		width: auto;
		margin-bottom: 10px;
	}
	.spnone{
		display: none;
	}
	/* モバイル用のレイアウト */
	#trialList01Order, #trialList01Stock, #trialList01Item, #trialList01Purchase, #trialList01Converter, #trialList01Receipt {
		flex-direction: column; /* 縦並び */
	}
	#trialList01Order > .description-container, #trialList01Order > .orderNum {
		flex: 1 1 100%; /* 各要素を横幅100%で表示 */
	}
	.action-btn {
		flex: 1 1 100%; /* モバイルでボタンを1列に表示 */
		margin-right: 0; /* モバイルでは右側のマージンを消去 */
	}
	#trialList01Order > label, #trialList01Stock > label, #trialList01Item > label, #trialList01Purchase > label, #trialList01Converter > label, #trialList01Receipt > label{
		font-size: 1.2em;
	}
}
.pink_color {
	color: #e73963;
}
/*サポートの種類*/
.section-divider {
	border: none;
	border-top: 1px solid #ccc;
	margin: 10px 0;
}
.support-message {
	margin-bottom: 10px;
	font-size: 0.9em;
}
.support-options, .support-message {
	display: none;
	margin-top: 10px;
}
.support-radio-group {
	margin-bottom: 10px;
}
.support-title {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 5px;
}
/* ラジオボタンを横並びにする */
.support-radio-group label {
	display: inline-block;
	width: 190px;
}
.fontlarge {
	font-size: 1.3em !important;
}
.kakomi {
	border: solid 1px #ddd;
	text-align: center;
	padding: 1em;
	border-radius: 10px;
}
.returnTop {
	margin-top: 2em;
	display: flex;
	justify-content: center; /* 左右中央 */
	align-items: center; /* 縦方向の中央 */
	width: 100%; /* 横幅いっぱいにする */
}
.custom-button {
	background-color: #004999; /* 背景色を変更 */
	color: white !important; /* 文字色を白に */
	font-size: 16px;
	text-decoration: none;
	font-weight: bold;
	border-radius: 8px;
	padding: 15px 30px; /* ワイドにする */
	display: flex;
	align-items: center;
	gap: 15px; /* 矢印との間隔を調整 */
	transition: background-color 0.3s;
	width: 250px; /* 幅を固定してワイドに */
	justify-content: center;
	margin-bottom: 2em;
}
.custom-button:hover {
	background-color: #003377;
}
.arrow {
	background-color: white;
	width: 24px;
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}
.arrow img {
	width: 12px; /* 矢印アイコンのサイズ調整 */
	height: 12px;
}
/* ベーススタイル */
.stepTitle {
	background-color: #004999;
	color: #fff;
	width: 100%;
	display: block;
	font-size: 1.5em;
	border-radius: 90px;
	font-weight: bold;
}
h3 + p {
	text-align: left;
}
h2 {
	font-weight: bold;
	color: #004999 !important;
	font-size: 2em;
	margin-bottom: 20px;
	text-align: center;
}
.txtLeft {
	text-align: left;
}
/* 全体のボックス */
.flow-container {
	padding: 1em;
	border-radius: 8px;
	max-width: 1078px;
	margin: 2em auto;
}
/* ステップの横並びレイアウト */
.steps {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 20px;
}
/* 各ステップ */
.step {
	flex: 1;
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	text-align: center;
}
/* アイコンのスタイル */
.step-icon img {
	width: 100px;
	height: auto;
	margin: 10px 0;
}
.step-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	color: #bbb;
	user-select: none;
}
/* 見出し */
h3 {
	font-size: 20px;
	margin-bottom: 10px;
	font-weight: bold;
	color: #004999 !important;
}
.container {
	display: flex;
	max-width: 1600px;
	margin: 50px auto;
	padding: 20px;
	gap: 50px; /* ボックス間の余白 */
}
/* ボックスの共通スタイル */
.box {
	flex: 1;
}
.imgtomozi_midium {
	display: flex;
	align-items: top;
	gap: 30px;
	margin-bottom: 4em;
}
/* 画像のサイズを少し小さくするためにflexの比率を調整 */
.blockimg {
	flex: 0 0 40%; /* 画像の幅をコンテナの40%に設定 */
	max-width: 40%; /* 画像が40%を超えないようにする */
}
.blockimg_small {
	flex: 0 0 30%; /* 画像の幅をコンテナの40%に設定 */
	max-width: 30%; /* 画像が40%を超えないようにする */
}
.blockimg img {
	max-width: 100%;
	height: auto;
}
.blockimg_small img {
	max-width: 100%;
	height: auto;
}
/* テキストの幅を調整 */
.blockText {
	flex: 1; /* 残りのスペースをテキストが占有する */
}
.required_item {
	display: none;
}
.exText {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 15px;
}
.formTable a {
	color: #1a0dab;
}
.list li {
	display: none;
}
.list li {
	background-color: #FFF0F5;
	padding: 20px;
	border-radius: 5px;
	margin-top: 10px;
}
.formTable input[type=radio] {
	margin-right: 0.5em;
	margin-bottom: 5px;
}
.serchBox li {
	line-height: 1.5;
	padding: 5px 0;
}
#WhatRpay {
	font-weight: normal !important;
}
.trial_h1Title::before {
	content: "助ネコEC管理システム";
	display: block;
	font-size: 0.7em;
}
.buttonPt01 {
	border-color: #0d6d9f;
	color: #0d6d9f;
}
.buttonPt01:active, .buttonPt01:hover {
	opacity: 0.7;
	background: initial !important;
	border: #0d6d9f solid 1px !important;
	color: #0d6d9f !important;
}
#WhatSettingSupport {
	padding: 10px !important;
	background: #fff !important;
	border: solid 1px #0d6d9f !important;
	border-radius: 1000px !important;
	color: #0d6d9f !important;
	font-size: 17px;
	width: 90%;
}
#WhatSettingSupport:hover {
	opacity: 0.7;
}
#WhatFirstSupport {
	padding: 10px !important;
	background: #fff !important;
	border: solid 1px #0d6d9f !important;
	border-radius: 1000px !important;
	color: #0d6d9f !important;
	font-size: 17px;
	width: 90%;
}
#WhatFirstSupport:hover {
	opacity: 0.7;
}
#trial .guideTxt {
	border: #0d6d9f solid 3px;
}
#trial .guideTxt a {
	color: #0d6d9f;
}
.lineheight {
	line-height: 1;
	width: 95%;
	margin-top: 10px;
}
.formTableTxt01 {
	line-height: 1.7;
}
.formTable th.agreeTerms {
	text-align: center;
	padding: 30px 0 0;
}
.formTableTxt01.notep {
	color: red;
	font-size: 1.1em;
	padding: 0 0 30px;
}
/* スマホ対応（縦積みレイアウト） */
@media (max-width: 768px) {
	.steps {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
	.steps > .step-arrow {
		transform: rotate(90deg);
		margin: 10px 0;
	}
	.txtLeft {
		text-align: center;
	}
	.flow-container {
		padding: 0px;
	}
	.blockimg_small {
		max-width: 100%;
		width: 100%;
	}
	.container {
		flex-direction: column;
		margin: 0;
	}
	.box {
		width: 100%;
	}
}
@media print, screen and (min-width: 768px) {
	.blockimg {
		width: 600px;
	}
	.formTable th {
		width: 300px;
	}
	.w670 {
		width: 900px !important;
	}
	.formTableTxt01.fontbig, #trial #supportContent, .fontbig {
		font-size: 1.1em;
	}
	.formTable select {
		width: auto;
	}
	.trialList01 {
		font-size: 1.2em;
	}
	.formTable input[type=checkbox], .formTable input[type=radio] {
		transform: scale(1.5);
	}
}
#trialList01Order.grayOut, #trialList01Converter.grayOut, #trialList01Receipt.grayOut {
	background-color: #eee;
	color: #999;
}
.orderNum, .itemNum {
	margin-top: 5px;
	display: none;
}
.copy {
	text-align: center;
	margin: 2em;
	border-top: #999 dotted 1px;
	padding-top: 20px;
}
.trial_h1Title {
	background-color: #004999;
	font-size: 2.5em;
	color: #fff;
	text-align: center;
	font-weight: bold;
	margin: 0;
	padding: 0.7em 0.5em 0.5em;
	margin-bottom: 50px;
}
.centerLogo {
	margin: 2em auto 2em;
	width: 200px;
}
.formTableTxt01 {
	font-size: 70%;
}
.campainBox {
	margin-bottom: 40px;
	border: 1px solid #ddd;
	padding: 40px;
	border-radius: 5px;
}
.campainBox a {
	display: block;
	box-shadow: 0 2px 5px rgb(0 0 0 / 50%);
	transition: 0.2s all ease 0s;
	margin-top: 15px;
}
.campainBox img {
	vertical-align: middle;
}
.campainBox p {
	font-weight: bold;
}
.campainBox a:hover {
	box-shadow: none;
	transform: translate3d(0, 3px, 0);
}
#makeShopCooperate {
	display: none;
}
#makeShopCooperate.show {
	display: block;
}
#trialMallsList .branchStore {
	display: flex;
	margin-top: 20px;
	flex-wrap: nowrap;
}
#trialMallsList ul {
	width: 100%;
}
#trialMallsList li {
	padding: 1.5px 0;
	font-size: 1.2em;
}
.selectMall h3, .selectCart h3 {
	font-weight: bold;
	margin-bottom: 10px;
}
#mkSopPopup {
	display: none;
}
#Rpay_TR, #RskuPro {
	display: none;
}
#makeShopCooperate {
	display: none;
}
.descriptionBox {
	display: grid;
	grid-template-columns: 70% auto;
	grid-template-rows: auto;
	margin: 0 0 50px;
}
.descriptionText {
	margin-right: 20px;
	border: solid 2px #eee;
	padding: 15px;
	border-radius: 10px;
	position: relative;
	align-self: start;
}
.descriptionText::before {
	position: absolute;
	content: "";
	border: solid 15px transparent;
	border-left: solid 15px #fff;
	top: 21px;
	right: -28px;
	z-index: 2;
}
.descriptionText::after {
	position: absolute;
	content: "";
	border: solid 16px transparent;
	border-left: solid 16px #eee;
	top: 20px;
	right: -32px;
	z-index: 1;
}
.formTable textarea#freefield {
	font-family: inherit;
}
.submitBtn {
	background-color: #004999 !important;
	border: #004999 solid 1px !important;
}
.formTable tr:last-of-type {
	border: none;
}
.trialNav01 {
	width: 300px;
}
.trialNav01 li {
	width: 150px;
}
.formTable {
	font-size: 1.2em;
}
/*PCのスタイル*/
.termsMenu li a {
	pointer-events: none;
	text-decoration: none !important;
}
.termsScroll {
	height: 300px;
	overflow: scroll;
	padding: 30px;
	border: solid 1px #eee;
	overflow-x: hidden;
	border-radius: 10px;
}
.secWrapperWide, .w1078 {
	width: 100% !important;
}
.secWrapper.hiddennasi {
	overflow: visible;
}
.hTxt01 {
	font-size: 1.5rem !important;
}
.topText {
	background: linear-gradient(to right, #0d6d9f, #229ad7 50%, #0d6d9f);
	text-align: center;
	height: 30px;
	width: 100%;
}
.trialHeader img {
	width: 600px;
	margin: 20px auto 0;
	display: block;
}
.footerSec img {
	width: 200px;
	margin: 0px auto 20px;
	display: block;
}
.footerSec p {
	text-align: center;
}
.footerSec .copyRight {
	margin: 20px 0 0 0;
	background-color: #bbb;
	text-align: center;
	padding: 10px;
	color: #fff;
	font-size: 12px;
}
.footerSec {
	border-top: solid 1px #eee;
	padding-top: 40px;
}
#tmp_passwd {
	margin-bottom: 10px;
}
.alink {
	color: #1a0dab !important;
	text-decoration: underline !important;
}
.alink:hover {
	text-decoration: none;
}
#addr_2_1 {
	margin-top: 10px;
}
.mtop {
	margin-top: 80px;
}
textarea::placeholder {
	font-size: 0.8em;
}
.formTable textarea {
	line-height: 1.5;
	height: 6em;
	white-space: pre-wrap;
	vertical-align: top;
}
.submitBtnPare {
	margin-top: 40px;
}
.submitBtn:hover {
	background-color: #0d6d9f;
	opacity: 0.7;
	border: none;
}
.colRe {
	padding-bottom: 10px;
	font-size: 1.2em;
}
.required_item {
	background-color: red;
	color: #fff;
	padding: 3px;
	border-radius: 5px;
	font-size: 13px;
	font-weight: bold;
	vertical-align: middle;
}
.formTable {
	border-top: #ddd solid 1px;
}
.formTable tr {
	border-bottom: #ddd solid 1px;
}
.formTable tr.beforeEnd {
	border: none;
}
.formTable tbody tr td {
	max-width: calc(670px - 266px);
	padding: 25px 0;
}
.formTable tbody tr td.pding_none {
	padding: 0 0 10px;
}
.formTable input, .formTable textarea {
	padding: 0.8em;
	border-radius: 5px;
	background-color: #ddf3ff;
	font-size: 100%;
	line-height: 1.5;
	resize: vertical;
}
.tyuuigaki {
	font-size: 0.8em;
	display: block;
	margin: 10px 0px 0px;
	line-height: 1.5;
}
.submitBtn {
	background-color: #0d6d9f;
	border: none;
}
.hTxt04 {
	font-weight: bold;
	color: #004999;
	font-size: 2.5em !important;
}
.free_title {
	font-size: 3.2em;
	text-align: center;
	font-weight: bold;
	color: #0d6d9f;
	margin-top: 80px;
}
/*スマホのスタイル始まり*/
@media only screen and (max-width: 1169px) {
	.trial_h1Title {
		margin-bottom: 30px;
	}
	h2 {
		margin-top: 20px;
		font-size: 26px;
	}
	.imgtomozi_midium {
		display: block;
	}
	.blockimg {
		max-width: 100%;
		width: 100%;
	}
	.descriptionText p {
		font-size: 0.9em;
	}
	.mtop {
		margin-top: 20px;
	}
	#F9 {
		margin-top: 10px;
	}
	.formTable th {
		width: 25%;
	}
	.formTable input {
		padding: 0.5em;
	}
	.formTable label {
		font-size: 0.8em;
	}
	.pcbr {
		display: none;
	}
	.hTxt04 {
		padding-bottom: 20px;
	}
	.free_title {
		font-size: 2em;
		padding: 0px 15px;
		margin-top: 20px;
		line-height: 1.5;
	}
	.required_item {
		display: block;
		text-align: center;
		font-size: 0.5em;
	}
}
.formTable th {
	font-size: 1.2em !important;
}
#FirstSupport .urlCheckBox{
	display: none;
}