/**
 * EF入力画面のスタイル
 * EFの埋め込み先のCSSの干渉を防ぐため
 * 固有のIDを指定かつimportant属性を付与している
 */

/**
 * リセットCSS
 */
#ef-wrapper html, #ef-wrapper body, #ef-wrapper div, #ef-wrapper span, #ef-wrapper applet, #ef-wrapper object, #ef-wrapper iframe,
#ef-wrapper h1, #ef-wrapper h2, #ef-wrapper h3, #ef-wrapper h4, #ef-wrapper h5, #ef-wrapper h6, #ef-wrapper p, #ef-wrapper blockquote, #ef-wrapper pre,
#ef-wrapper a, #ef-wrapper abbr, #ef-wrapper acronym, #ef-wrapper address, #ef-wrapper big, #ef-wrapper cite, #ef-wrapper code,
#ef-wrapper del, #ef-wrapper dfn, #ef-wrapper em, #ef-wrapper img, #ef-wrapper ins, #ef-wrapper kbd, #ef-wrapper q, #ef-wrapper s, #ef-wrapper samp,
#ef-wrapper small, #ef-wrapper strike, #ef-wrapper strong, #ef-wrapper sub, #ef-wrapper sup, #ef-wrapper tt, #ef-wrapper var,
#ef-wrapper b, #ef-wrapper u, #ef-wrapper i, #ef-wrapper center,
#ef-wrapper dl, #ef-wrapper dt, #ef-wrapper dd, #ef-wrapper ol, #ef-wrapper ul, #ef-wrapper li,
#ef-wrapper fieldset, #ef-wrapper form, #ef-wrapper label, #ef-wrapper legend,
#ef-wrapper table, #ef-wrapper caption, #ef-wrapper tbody, #ef-wrapper tfoot, #ef-wrapper thead, #ef-wrapper tr, #ef-wrapper th, #ef-wrapper td,
#ef-wrapper article, #ef-wrapper aside, #ef-wrapper canvas, #ef-wrapper details, #ef-wrapper embed,
#ef-wrapper figure, #ef-wrapper figcaption, #ef-wrapper footer, #ef-wrapper header, #ef-wrapper hgroup,
#ef-wrapper menu, #ef-wrapper nav, #ef-wrapper output, #ef-wrapper ruby, #ef-wrapper section, #ef-wrapper summary,
#ef-wrapper time, #ef-wrapper mark, #ef-wrapper audio, #ef-wrapper video {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 100% !important;
	font: inherit !important;
	vertical-align: baseline !important;
	line-height: 24px !important;
}
#ef-wrapper form > div dd:has(img.input-image) {
    display: grid;
    grid-template-columns: repeat(5, calc(100% / 5));
    gap: 10px;
}
#ef-wrapper form div dd img.input-image {
	width : 80% !important;
}
#ef-wrapper label:has(.checks-label-content):has(.radio-label) {
	margin-bottom: 5px !important;
}
/* HTML5 display-role reset for older browsers */
#ef-wrapper article, #ef-wrapper aside, #ef-wrapper details, #ef-wrapper figcaption, #ef-wrapper figure,
#ef-wrapper footer, #ef-wrapper header, #ef-wrapper hgroup, #ef-wrapper menu, #ef-wrapper nav, #ef-wrapper section {
	display: block !important;
}
#ef-wrapper ol, #ef-wrapper ul {
	list-style: none !important;
}
#ef-wrapper blockquote, #ef-wrapper q {
	quotes: none !important;
}
#ef-wrapper blockquote:before, #ef-wrapper blockquote:after,
#ef-wrapper q:before, #ef-wrapper q:after {
	content: '' !important;
	content: none !important;
}
#ef-wrapper table {
	border-collapse: collapse !important;
	border-spacing: 0 !important;
}

/**
 * EF用スタイル
 */
#ef-wrapper {
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif !important;
	text-align: left !important;
	max-width: 1000px !important;
}
#ef-wrapper * {
	margin: 0 !important;
	padding: 0 !important;
}

#ef-wrapper table {
	border-spacing:10px 0px !important;
	border-collapse:separate !important;
}

#ef-wrapper th, #ef-wrapper td {
	padding : 8px 3px !important;
}

#ef-wrapper input,#ef-wrapper select, #ef-wrapper textarea{
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif !important;
}

#ef-wrapper .button-wrapper {
	text-align: center !important;
	margin: 20px 0 !important;
}
#ef-wrapper .button-wrapper p {
	display: inline !important;
}
#ef-wrapper input#cf_submit,
#ef-wrapper input#cf_cancel{
	margin-top:0.5em !important;
	width:270px !important;
	height: 64px !important;
	display:inline-block !important;
	letter-spacing:2px !important;
	text-align:center !important;
	line-height:60px !important;
	font-weight:bold !important;
	font-size:30px !important;
	cursor:pointer !important;
	-moz-box-sizing:border-box !important;
	-webkit-box-sizing:border-box !important;
	box-sizing:border-box !important;
	-moz-border-radius:10px !important;
	-webkit-border-radius:10px !important;
	border-radius:5px !important;
	outline: 0 !important;
	text-indent: 0 !important;
	box-shadow: 0 4px 0 rgb(0 0 0 / 10%) !important;
}
@media (max-width: 710px) {
	#ef-wrapper input#cf_submit,
	#ef-wrapper input#cf_cancel{
		margin:30px 0 0 0 !important;
	}
}

#ef-wrapper input[type="submit"],
#ef-wrapper input[type="button"]{
	margin:60px auto 0 auto !important;
	padding: 0 !important;
	height:88px !important;
	display:block !important;
	letter-spacing:2px !important;
	text-align:center !important;
	line-height:88px !important;
	font-weight:bold !important;
	font-size:34px !important;
	cursor:pointer !important;
	-moz-box-sizing:border-box !important;
	-webkit-box-sizing:border-box !important;
	box-sizing:border-box !important;
	-moz-border-radius:10px !important;
	-webkit-border-radius:10px !important;
	border-radius:10px !important;
	-webkit-appearance: none !important;
}
#ef-wrapper input[type="submit"]:hover,
#ef-wrapper input[type="button"]:hover {
	-webkit-filter: brightness(1.1) !important;
	filter: brightness(1.1) !important;
}
#ef-wrapper input#cf_submit {
	background:#ff871b !important;
	color: #fff !important;
	border: 2px solid #ff871b !important;
}
#ef-wrapper input#cf_cancel {
	background:#ffffff !important;
	color: #888 !important;
	border: 2px solid #888 !important;
}
#wonder_efblock {
	width: 80% !important;
    margin: 15px auto !important;
}

#ef-wrapper input[type="text"],
#ef-wrapper input[type="tel"],
#ef-wrapper input[type="url"]{
	-webkit-appearance:none !important;
	outline:none !important;
	display:inline !important; /* レスポンシブ用に追加 */
	border:1px solid #dddddd !important;
	font-size:14px !important;
	color:#4c4c4c !important;
	-moz-box-sizing:border-box !important;
	-webkit-box-sizing:border-box !important;
	box-sizing:border-box !important;
	-moz-border-radius:5px !important;
	-webkit-border-radius:5px !important;
	border-radius:5px
}
#ef-wrapper input#last_name,
#ef-wrapper input#last_name_kana,
#ef-wrapper input#name_alphabet1 {
	width: 98% !important;
	display: block !important;
}
#ef-wrapper input#first_name,
#ef-wrapper input#first_name_kana,
#ef-wrapper input#name_alphabet2 {
	width: 98% !important;
	display: block !important;
}
#ef-wrapper .ef-if-wide-horizontal {
	width: 49.5% !important;
	display: inline !important;
}
@media (max-width: 700px) {
	#ef-wrapper .ef-if-wide-horizontal {
	  width: 100% !important;
		display: block !important;
	}
	#ef-wrapper input#last_name,
	#ef-wrapper input#last_name_kana,
	#ef-wrapper input#name_alphabet1 {
		width: 100% !important;
	}
	#ef-wrapper input#first_name,
	#ef-wrapper input#first_name_kana,
	#ef-wrapper input#name_alphabet2 {
		width: 100% !important;
	}
}

#ef-wrapper select{
	outline:none !important;
	padding:10px !important;
	display:inline !important; /* レスポンシブ用に追加 */
	border:1px solid #dddddd !important;
	font-size:16px !important;
	color:#4c4c4c !important;
	-moz-box-sizing:border-box !important;
	-webkit-box-sizing:border-box !important;
	box-sizing:border-box !important;
	-moz-border-radius:5px !important;
	-webkit-border-radius:5px !important;
	border-radius:5px
}

#ef-wrapper textarea{
	-webkit-appearance:none !important;
	outline:none !important;
	padding:10px !important;
	display:inline !important; /* レスポンシブ用に追加 */
	border:1px solid #dddddd !important;
	font-size:16px !important;
	color:#4c4c4c !important;
	-moz-box-sizing:border-box !important;
	-webkit-box-sizing:border-box !important;
	box-sizing:border-box !important;
	-moz-border-radius:5px !important;
	-webkit-border-radius:5px !important;
	border-radius:5px !important;
	max-width:100% !important;
	min-width:100% !important;
}

#ef-wrapper input[type="checkbox"]{
	width:25px !important;
	height:25px !important;
	vertical-align:bottom !important;
	margin: 0 5px 2px 0 !important;
}

#ef-wrapper [type="radio"]{
	width:25px !important;
	height:25px !important;
	vertical-align:bottom !important;
	margin: 0 5px 2px 0 !important;
}

#ef-wrapper .input-zip,
#ef-wrapper .input-tel,
#ef-wrapper .input-fax {
	width: 38% !important;
}
#ef-wrapper .ef-character-type-attention {
	margin: 0 0 0 10px !important;
	font-weight: normal !important;
	font-size: 14px !important;
}

#ef-wrapper #form-info-area{
	text-align: left !important;
	width:170px !important;
	margin: 10px auto 10px 680px !important;
	border:1px #6bb34e solid !important;
	color:#6bb34e !important;
	background: #FFF !important;
	border-radius:5px !important;
}

#ef-wrapper #form-info-area p{
	margin: 5px 10px !important;
}
#ef-wrapper .ok-icon,
#ef-wrapper .ng-icon{
	width: 15px !important;
	margin: 0 3px 2px !important;
	vertical-align: middle !important;
	display: none !important;
}

#ef-wrapper .cf_req_icon_style{
	/* 必須アイコンの色合いを柔らかな感じに修正 */
	display: block !important;
	padding: 0px 6px !important;
	color: #fff !important;
	font-size: 1em !important;
	background: #ff871b !important; /*レスポンシブ用に追加*/
	margin-right: 10px !important;
	float: right !important;
}

#ef-wrapper .required {
	white-space: normal !important;
}

#ef-wrapper .wcf-err-line{
	font-size: 14px !important;
	display: none !important; /*レスポンシブ用に追加*/
	background-color: #FF5F5F !important;
	color: #FFFFFF !important;
	margin: 0 auto 10px !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
	padding-bottom: 5px !important;
	padding-top: 5px !important;
	white-space: nowrap !important;
	text-align: center !important;
	position: relative !important;
}

#ef-wrapper .wcf-err-line::after {
    position: absolute;
    display: block;
    border-width: 0;
    background-color: black;
    border-radius: 2px;
    content: "";
    transform: rotate(45deg);
}
#ef-wrapper .wcf-err-line::after {
	position: absolute !important;
	background-color: #FF5F5F !important;
	width: 8px !important;
	height: 8px !important;
	left: 50% !important;
}
#ef-wrapper .wonder-terms-block {
	margin-bottom: 30px !important;
	padding: 15px !important;
	background: #eee !important;
	text-align: left !important;
}
#ef-wrapper .wonder-terms-block .terms-inner{
	height: 180px !important;
	margin-top: 10px !important;
	margin-bottom: 15px !important;
	padding: 15px !important;
	overflow-y: scroll !important;
	line-height: 1.7 !important;
	font-size: 12px !important;
	background: #fff !important;
	border: 1px solid #ccc !important;
}
#ef-wrapper .wonder-terms-block p.center strong {
    font-weight: bold !important;
    font-size: 17px !important;
    border: none !important;
	text-align: center !important;
}
#ef-wrapper .wonder-terms-block p {
    margin-bottom: 0 !important;
    margin: 0 0 10px !important;
}
#ef-wrapper .wonder-terms-block p strong {
    font-weight: bold !important;
    border-bottom: 1px dotted #ddd !important;
    display: block !important;
    margin: 0 0 5px !important;
    padding: 0 0 5px !important;
}

/**
 * 以下はform.phpのタグに直接指定されているstyle属性を抜き出したもの
 */
#ef-wrapper input[type=text].ef-normal-input {
	ime-mode: active !important;
}
#ef-wrapper input[type=url] {
	ime-mode: inactive !important;
}
#ef-wrapper input.ime-mode-active {
	ime-mode: active !important;
}
#ef-wrapper input.ime-mode-inactive {
	ime-mode: inactive !important;
}

/**
 * 以下はtableからdivに変更するにあたって追加した項目
 */
#ef-wrapper form > div dt {
	float: left !important;
	vertical-align: middle !important;
	width: 40% !important;
}
#ef-wrapper form > div dt.zip-label {
	width: 19px !important;
	margin-right: 10px !important;
}
#ef-wrapper form > div dd {
	width: 60% !important;
}
#ef-wrapper form > div dd span {
	margin: 0 5px !important;
	width: 100%;
}
#ef-wrapper form > div dd span.left-margin-cancel {
	margin: 0px !important;
}
#ef-wrapper * {
	box-sizing: border-box !important;
}
#ef-wrapper .required-label {
	margin-right: 10px !important;
	float: right !important;
}

/**
 * 画面上部のプログレスのスタイル
 */
#ef-wrapper .cd-breadcrumb {
	background-color: #edeff0 !important;
	border-radius: 0 !important;
	line-height: 1.5 !important;
	margin: 0 0 20px 0 !important;
}
#ef-wrapper .cd-breadcrumb:after {
	content: "" !important;
	display: table !important;
	clear: both !important;
}
#ef-wrapper .cd-breadcrumb li {
	display: block !important;
	float: left !important;
	margin: 0.5em 0 !important;
}
#ef-wrapper .cd-breadcrumb li::after {
	/* this is the separator between items */
	display: inline-block !important;
	content: '\00bb' !important;
	margin: 0 .6em !important;
	color: #959fa5 !important;
}
#ef-wrapper .cd-breadcrumb li > * {
	/* single step */
	display: inline-block !important;
	font-size: 14px !important;
	color: #2c3f4c !important;
	text-align: center !important;
}
#ef-wrapper .cd-breadcrumb li.current > * {
	/* selected step */
	color: #96c03d !important;
}
#ef-wrapper .cd-breadcrumb.triangle {
	/* reset basic style */
	background-color: transparent !important;
	padding: 0 !important;
	display: flex !important;
    justify-content: center !important;
	transform: translateZ(0px);
	-webkit-transform: translateZ(0px);
}
#ef-wrapper .cd-breadcrumb.triangle li {
	position: relative !important;
	padding: 0 !important;
	margin: 4px 4px 4px 0 !important;
	border: 1px solid #bbb !important;
}
#ef-wrapper .cd-breadcrumb.triangle li:last-of-type {
	margin-right: 0 !important;
}
#ef-wrapper .cd-breadcrumb.triangle li > * {
	width: 210px !important;
	position: relative !important;
	padding: 6px 10px 6px 25px !important;
	color: #2c3f4c !important;
	background-color: #edeff0 !important;
	/* the border color is used to style its ::after pseudo-element */
	border-color: #edeff0 !important;
}
#ef-wrapper .cd-breadcrumb.triangle li.current > * {
	/* selected step */
	color: #ffffff !important;
	background-color: #6bb34e !important;
	border-color: #6bb34e !important;
}
#ef-wrapper .no-touch .cd-breadcrumb.triangle a:hover {
	/* steps already visited */
	color: #ffffff !important;
	background-color: #2c3f4c !important;
	border-color: #2c3f4c !important;
}
#ef-wrapper .cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after {
	/*
	li > *::after is the colored triangle after each item
	li::after is the white separator between two items
	*/
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 100% !important;
	content: '' !important;
	height: 0 !important;
	width: 0 !important;
	/* 48px is the height of the <a> element */
	border: 18px solid transparent !important;
	border-right-width: 0 !important;
	border-left-width: 20px !important;
}
#ef-wrapper .cd-breadcrumb.triangle li::after {
	/* this is the white separator between two items */
	z-index: 1 !important;
	-webkit-transform: translateX(4px) !important;
	-moz-transform: translateX(4px) !important;
	-ms-transform: translateX(4px) !important;
	-o-transform: translateX(4px) !important;
	transform: translateX(1px) !important;
	border-left-color: #bbb !important;
	/* reset style */
	margin: 0 !important;
}
#ef-wrapper .cd-breadcrumb.triangle li:last-of-type::after {
	border-left-color: #bbb !important;
}
#ef-wrapper .cd-breadcrumb.triangle li > *::after {
	/* this is the colored triangle after each element */
	z-index: 2 !important;
	border-left-color: inherit !important;
}
@-moz-document url-prefix() {
	#ef-wrapper .cd-breadcrumb.triangle li::after,
	#ef-wrapper .cd-breadcrumb.triangle li > *::after {
		/* fix a bug on Firefix - tooth edge on css triangle */
		border-left-style: dashed !important;
	}
}

/**
 * bootstrapの必要な部分だけ抽出し
 * 本フォームだけに動作するようIDを付与してある
 */
#ef-wrapper .img-responsive {
  	display: block !important;
  	max-width: 100% !important;
  	height: auto !important;
}
#ef-wrapper.ef-container {
  	margin-right: auto !important;
  	margin-left: auto !important;
}
#ef-wrapper .ef-clearfix:before,
#ef-wrapper .ef-clearfix:after,
#ef-wrapper.ef-container:before,
#ef-wrapper.ef-container:after {
  	content: " " !important;
  	display: table !important;
}
#ef-wrapper .ef-clearfix:after,
#ef-wrapper.ef-container:after {
  	clear: both !important;
}

#ef-wrapper .ef-center-block {
  	display: block !important;
  	margin-left: auto !important;
  	margin-right: auto !important;
}
#ef-wrapper .ef-pull-right {
  	float: right !important;
}
#ef-wrapper .ef-pull-left {
  	float: left !important;
}
#ef-wrapper .wcf-err-line {
	width: 180px !important;
	cursor: pointer !important;
}
#ef-wrapper #prefectures {
	width: 300px !important;
}
#ef-wrapper #phone_number {
	width: 300px !important;
}
#ef-wrapper #fax {
	width: 300px !important;
}
#ef-wrapper #postal_code {
	width: 270px !important;
}
#ef-wrapper #company_name_vmessage {
	width: 227px !important;
}
#ef-wrapper #name_kana_vmessage {
    width: 243px !important;
}
#ef-wrapper #name_alphabet_vmessage {
    width: 270px !important;
}
#ef-wrapper #fax_vmessage {
    width: 210px !important;
    margin-right: 56% !important;
}
#ef-wrapper #company_url_vmessage {
    width: 245px !important;
}
#ef-wrapper #name_vmessage {
	width: 215px !important;
}
#ef-wrapper #mail_address_vmessage {
	width: 286px !important;
}
#ef-wrapper #memo_vmessage {
	width: 274px !important;
}
#ef-wrapper #street_address_vmessage {
	width: 215px !important;
	margin-right: 55% !important;
}
#ef-wrapper #phone_number_vmessage {
	width: 244px !important;
	margin-right: 55% !important;
}

#ef-wrapper .ef-form-control {
  	display: block !important;
  	width: 100% !important;
  	height: 40px !important;
  	padding: 6px 12px !important;
  	font-size: 14px !important;
  	line-height: 1.42857143 !important;
  	color: #555555 !important;
  	background-color: #ffffff !important;
  	background-image: none !important;
  	border: 1px solid #dddddd !important;
  	border-radius: 4px !important;
  	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
  	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
  	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s !important;
  	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !important;
  	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !important;
}
#ef-wrapper .ef-form-control.address-input {
    margin-left: auto !important;
}
#ef-wrapper textarea.ef-form-control {
	height: 200px !important;
}
#ef-wrapper .ef-form-control-short {
  	display: block !important;
  	height: 40px !important;
  	padding: 6px 12px !important;
  	font-size: 14px !important;
  	line-height: 1.42857143 !important;
  	color: #555555 !important;
  	background-color: #ffffff !important;
  	background-image: none !important;
  	border: 1px solid #dddddd !important;
  	border-radius: 4px !important;
  	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
  	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
  	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s !important;
  	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !important;
  	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !important;
}	
#ef-wrapper .ef-form-control:focus {
  	border-color: #66afe9 !important;
  	outline: 0 !important;
  	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
  	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
}
#ef-wrapper .ef-form-control-short:focus {
  	border-color: #66afe9 !important;
  	outline: 0 !important;
  	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
  	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
}
#ef-wrapper .ef-form-group:not(.address-ef-form-group) {
  	all: initial;
  	padding: 15px 0 !important;
  	border-top: #ddd 1px dotted !important;
  	text-align: left !important;
  	display: flex !important;
  	justify-content: flex-end !important;
  	align-items: center !important;
}
#ef-wrapper .ef-form-group.address-ef-form-group {
	all: initial;
	padding: 10px 0 !important;
	border-top: #ddd 1px dotted !important;
	text-align: left !important;
	display: block !important;
	justify-content: space-between !important;
	align-items: center !important;
}
#ef-wrapper .zip-form-group {
	display: block !important;
	width: 60% !important;
	align-items: center !important;
}
#ef-wrapper .address-form-group {
	display: flex !important;
	width: 100% !important;
	justify-content: flex-end !important;
	align-items: center !important;
}
#ef-wrapper .address-label-pc {
	display: block !important;
}
#ef-wrapper .address-label-sp {
	display: none !important;
}
#ef-wrapper .address-item {
	justify-content: flex-end !important;
}
#ef-wrapper .ef-form-group.continuous-form-group-style {
	border: none !important;
	padding-top: 0 !important;
}
#ef-wrapper .ef-form-group dd::before {
	/* Windows FireFox の場合デザインが崩れるため以下を記載 */
	display: none !important;
}
#ef-wrapper dt {
	font-weight: 600 !important;
	text-align: left !important;
}
:placeholder-shown {
	color: #bbb !important;
}
/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
	color: #bbb !important;
}
/* Firefox 18- */
:-moz-placeholder {
	color: #bbb !important;
	opacity: 1 !important;
}
/* Firefox 19+ */
::-moz-placeholder {
	color: #bbb !important;
	opacity: 1 !important;
}
/* IE 10+ */
:-ms-input-placeholder {
	color: #bbb !important;
}

/**
 * 入力内容確認画面で必要なスタイル
 */
#ef-wrapper.wallpaper h2 {
	text-align: center !important;
	font-size: 44px !important;
	color: #96c03d !important;
	font-weight: normal !important;
	margin: 30px 0 !important;
}
#ef-wrapper.wallpaper .center {
	text-align: center;
}
#ef-wrapper .form-confirm-value {
	word-break: break-all;
	margin: 0;
}
#ef-wrapper .ef-adjust-dom-bottom {
	margin-bottom: 15px !important;
}
#ef-wrapper.ef-confirm .ef-form-group {
	margin-left: 80px !important;
	margin-right: 80px !important;
}
@media (max-width: 860px) {
	#ef-wrapper.ef-confirm .ef-form-group {
		margin-left: 0px !important;
		margin-right: 0px !important;
	}

	#form-info-area {
		margin: 10px auto !important;
	}
}
@media (max-width: 370px) {
	#ef-wrapper.wallpaper h2 {
		font-size: 38px !important;
	}
}
@media (max-width: 400px) {
	#enter-customer-information {
		font-size: 12px !important;
	}
	#wonder_efblock {
		font-size: 12px !important;
	}
}
@media (max-width: 460px) {
	#ef-wrapper form > div dt {
		font-size: 11px !important;
	}
	#ef-wrapper form > div dd {
		width: 50% !important;
	}
	#ef-wrapper .zip-form-group {
		width: 60% !important;
	}
}
@media (max-width: 960px) {
	#ef-wrapper #street_address_vmessage {
		margin-right: 41% !important;
	}
	#ef-wrapper #fax_vmessage {
		margin-right: 42% !important;
	}
	#ef-wrapper .ef-form-group-container #phone_number_vmessage {
		margin: 0 auto 10px !important;
	}
	#ef-wrapper #phone_number {
		width: 100% !important;
	}
	#ef-wrapper #fax {
		width: 100% !important;
	}
}
@media (max-width: 560px) {
	#wonder_efblock {
		width: 100% !important;
    	margin: 15px auto !important;
	}
	#ef-wrapper {
		width: 80% !important;
		margin: auto;
	}
	#ef-wrapper #street_address_vmessage {
		left: 40% !important;
	}
	#ef-wrapper.wallpaper h2 {
		font-size: 28px !important;
	}
	#ef-wrapper .wcf-err-line {
		font-size: 12px !important;
	}
	#ef-wrapper .ef-form-label {
		margin-bottom: 3px !important;
	}
	#ef-wrapper .address-item {
		flex-direction: column;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		width: 100% !important;
	}
	#ef-wrapper .ef-form-group:not(.address-ef-form-group) {
		justify-content: flex-start !important;
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	#ef-wrapper .ef-form-group.address-ef-form-group {
		display: flex !important;
		justify-content: flex-start !important;
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	#ef-wrapper .address-form-group {
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}
	#ef-wrapper .address-label-pc {
		display: none !important;
	}
	#ef-wrapper .address-label-sp {
		display: block !important;
	}
	#ef-wrapper #prefectures {
		max-width: 370px !important;
		width: 100% !important;
	}
	#ef-wrapper #phone_number {
		width: 100% !important;
	}
	#ef-wrapper #fax {
		width: 100% !important;
	}
	#ef-wrapper #postal_code {
		max-width: 370px !important;
		width: 100% !important;
	}
	#ef-wrapper #memo {
		max-width: 370px !important;
		width: 100% !important;
	}
	#ef-wrapper form > div dt {
		width: 101% !important;
	}
	#ef-wrapper form > div dd {
		width: 100% !important;
	}
	#ef-wrapper #company_name_vmessage {
		width: 100% !important;
	}
	#ef-wrapper #name_kana_vmessage {
		width: 100% !important;
	}
	#ef-wrapper #name_alphabet_vmessage {
		width: 100% !important;
	}
	#ef-wrapper #fax_vmessage {
		width: 100% !important;
		margin-right: 56% !important;
	}
	#ef-wrapper #company_url_vmessage {
		width: 100% !important;
	}
	#ef-wrapper #name_vmessage {
		width: 100% !important;
	}
	#ef-wrapper #mail_address_vmessage {
		width: 100% !important;
	}
	#ef-wrapper #memo_vmessage {
		width: 100% !important;
	}
	#ef-wrapper #street_address_vmessage {
		width: 100% !important;
		margin-right: 55% !important;
	}
	#ef-wrapper #phone_number_vmessage {
		width: 100% !important;
		margin-right: 55% !important;
	}	
	#ef-wrapper #phone_number_vmessage {
		margin: 0 auto 10px !important;
		width: 100% !important;
	}
	#ef-wrapper .ef-form-group-container #mail_address_vmessage {
		width: 100% !important;
	}
}

#ef-wrapper .breadcrumb-wrapper {
	max-width: 650px !important;
}
@media (max-width: 700px) {
	#ef-wrapper .cd-breadcrumb.triangle li span {
		width: 134px !important;
		font-size: 8px !important;
		padding: 6px 0px 6px 2px !important;
		white-space: nowrap;
	}
	#ef-wrapper .cd-breadcrumb.triangle li > * {
		width: 305px !important;
	}
}
@media (max-width: 480px) {
	#ef-wrapper .breadcrumb-wrapper {
		width: unset !important;
	}
}

/* lpbuilderで使用 */
#ef-wrapper .ef-form-label .content-editable {
	display: inline-block;
	margin: 5px !important;
}
#ef-wrapper .ef-form-label .content-editable:hover{
	outline: 2px solid #F0654F;
}

.wonder-ef-tab-container {
	display: flex;
	font-size: 20px;
	font-weight: bold;
	color: #343638;
	justify-content: space-between;
}
.wonder-ef-tab-container .wonder-ef-tab {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #e9e9e9;
	cursor: pointer;
	line-height: 30px;
	width: 49.9%;
	height: 45px;
	border: 1px solid #c5c5c5;
	border-bottom: none;
}
.wonder-ef-tab-container .wonder-ef-tab.left-tab {
	border-left: none;
}
.wonder-ef-tab-container .wonder-ef-tab.right-tab {
	border-right: none;
}
.wonder-ef-tab-container .wonder-ef-tab.is-selected {
	background-color: white;
}
.wonder-ef-tab-container .wonder-ef:hover {
	opacity: 50%;
}
@media (max-width: 560px) {
	#form-info-area .wcf-info-line #cnt_area {
		text-size-adjust: unset !important;
		-webkit-text-size-adjust: unset !important;
	}
}

.is_coupon {
	position: relative !important;
}

.is_coupon::after {
	position: absolute !important;
	background-color: #FF5F5F !important;
	width: 8px !important;
	height: 8px !important;
	left: 50% !important;
	top: 88% !important;
	background-color: #7ed957 !important;
	content: "";
	transform: rotate(45deg);
}

@media (max-width: 560px) {
    .is_coupon {
        width: 60% !important;
    }
    .is_coupon::after {
        left: 50% !important;
        bottom: 47.5% !important;
    }
}

.ef-form-group-container #coupon-notification-tooltip {
	line-height: 15px !important;
	font-size: 11px !important;
	background-color: #FF5F5F !important;
	color: #ffffff !important;
	padding: 10px !important;
	border-radius: 4px !important;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
	margin: 0 auto !important;
	display: inline-block;
	flex-shrink: 0;
}

.ef-form-group:has(#coupon-notification-tooltip) dd {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ef-form-group:has(#coupon-notification-tooltip) dd {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ef-form-group:has(#coupon-notification-tooltip) .form-confirm-value {
    margin: 0;
    flex-shrink: 0;
}

@media (max-width: 560px) {
	.ef-form-group-container #coupon-notification-tooltip {
		font-size: 11px !important;
		padding: 6px 12px !important;
		margin-top: 5px !important;
		width: 100%;
		white-space: unset;
	}

	.ef-form-group:has(#coupon-notification-tooltip) dd {
		display: block;
	}
}

/**
 * design_type: 0のスタイル ~ここから~
 */
#ef-wrapper .ef-form-group[data-design-type="0"][data-is-coupon="1"] dd:not(:has(img)), 
#ef-wrapper .ef-form-group[data-design-type="0"] dd:has(img.input-image) {
	display: block !important;
}
/**
 * design_type: 0のスタイル ~ここまで~
 */

/**
 * 編集ページ用design_type: 1と2のdd共通スタイル ~ここから~
*/
#ef-wrapper .ef-form-group[data-design-type="1"] dd:has(img.input-image),
#ef-wrapper .ef-form-group[data-design-type="2"] dd:has(img.input-image) {
	display: flex !important;
	flex-wrap: wrap;
}
/**
 * 編集ページ用design_type: 1と2のdd共通スタイル ~ここまで~
*/

/**
* design_type: 1と2の共通スタイル ~ここから~
*/
#ef-wrapper .ef-form-group[data-design-type="1"] .choice-label-container,
#ef-wrapper .ef-form-group[data-design-type="2"] .choice-label-container {
	width: 665px !important;
	flex-wrap: wrap;
}

#ef-wrapper .ef-form-group[data-design-type="1"] .checks-label-content,
#ef-wrapper .ef-form-group[data-design-type="2"] .checks-label-content {
    display: flex;
    flex-direction: row;
	justify-content: center;
    align-items: center;
    text-align: center;
	width: 200px;
    padding: 15px !important;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    margin: auto;
    order: 2;
}
/* ボタンスタイル */
#ef-wrapper .ef-form-group[data-design-type="1"] .checks-label-content,
#ef-wrapper .ef-form-group[data-design-type="2"] .checks-label-content {
    display: flex;
    align-items: center;
    height: auto;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #212529;
	height: auto;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #212529;
    background-color: white;
    border: 2px solid #ced4da;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 300px; /* ボタンの幅を調整 */
    text-align: center;
    justify-content: center;
}
/* 画像スタイル */
#ef-wrapper .ef-form-group[data-design-type="1"] img,
#ef-wrapper .ef-form-group[data-design-type="2"] img {
    width: 80%;
    max-width: 200px;
    margin-bottom: 15px;
	height: 100%;
	object-fit: contain;
}
/* テキストスタイル */
#ef-wrapper .ef-form-group[data-design-type="1"] .check-label,
#ef-wrapper .ef-form-group[data-design-type="2"] .check-label {
    font-size: 18px;
    color: #495057;
    margin-bottom: 20px;
}
#ef-wrapper form .ef-form-group[data-design-type="1"] dd span,
#ef-wrapper form .ef-form-group[data-design-type="2"] dd span {
	margin: 0 5px !important;
	width: unset !important;
}
#ef-wrapper form .ef-form-group[data-design-type="1"] dd label,
#ef-wrapper form .ef-form-group[data-design-type="2"] dd label {
	display: flex !important;
    align-items: center;
	width: 220px !important;
    align-items: center;
	flex-direction: column;
	background: #f8f9fa;
	padding: 10px !important;
    zoom: 0.8;
}
#ef-wrapper .ef-form-group[data-design-type="1"] .checks-label-content p,
#ef-wrapper .ef-form-group[data-design-type="2"] .checks-label-content p {
    font-size: 18px;
    color: #212529;
}
#ef-wrapper .ef-form-group[data-design-type="1"] .checks-label-content:hover,
#ef-wrapper .ef-form-group[data-design-type="2"] .checks-label-content:hover {
    background-color: #e9ecef;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}
#ef-wrapper .ef-form-group[data-design-type="1"] .checks-label-content:active,
#ef-wrapper .ef-form-group[data-design-type="2"] .checks-label-content:active {
    background-color: #dee2e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: scale(0.98);
}
/* 利用登録済みのスタイル */
#ef-wrapper .ef-form-group[data-design-type="1"] .checks-label-content.disabled,
#ef-wrapper .ef-form-group[data-design-type="2"] .checks-label-content.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
#ef-wrapper .ef-form-group[data-design-type="1"] .checks-label-content img.ok-icon,
#ef-wrapper .ef-form-group[data-design-type="2"] .checks-label-content img.ok-icon {
	display: none !important;
}
@media screen and (min-width: 561px) {
    #ef-wrapper .ef-form-group[data-design-type="1"] .checks-label-content,
    #ef-wrapper .ef-form-group[data-design-type="2"] .checks-label-content {
        width: 160px !important;
    }
	[data-design-type="1"] .choice-label-container,
	[data-design-type="2"] .choice-label-container {
		display: flex;
		gap: 10px;
	}
}
@media screen and (max-width: 560px) {
    #ef-wrapper .ef-form-group[data-design-type="1"] .checks-label-content,
    #ef-wrapper .ef-form-group[data-design-type="2"] .checks-label-content {
        width: 200px !important;
    }
}
/**
 * design_type: 1と2の共通のスタイル ~ここまで~
*/

/**
 * design_type: 2のスタイル ~ここから~
*/
#ef-wrapper .ef-form-group[data-design-type="2"] .checks-label-content input {
	display: none;
}
/**
 * design_type: 2のスタイル ~ここまで~
*/

.ef-form-group[data-design-type="1"] dd,
.ef-form-group[data-design-type="2"] dd {
	gap: 45px !important;
}

.purchased {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.coupon-checkbox-container {
    display: flex;
    align-items: center;
}
/* ボタンスタイル */
.coupon-button {
    height: auto;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #212529;
    background-color: white;
    border: 2px solid #ced4da;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 300px; /* ボタンの幅を調整 */
    text-align: center;
    justify-content: center;
}
@media screen and (min-width: 561px) {
    .coupon-button {
      width: 160px !important;
    } 
}
@media screen and (max-width: 560px) {
    .coupon-button {
      width: 200px !important;
    } 
}
.coupon-button p {
    font-size: 18px;
    color: #212529;
}
.coupon-button:hover {
    background-color: #e9ecef;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}
.coupon-button:active {
    background-color: #dee2e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: scale(0.98);
}
/* 利用登録済みのスタイル */
.checks-label-content.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
#checks-label-content:has(input#coupon-usage-check:checked) {
    opacity: 0.4;
}
[data-is-coupon="1"] .choice-label-container label span {
	font-size: 18px !important;
    font-weight: bold !important;
}

/**
* is_coupon: 1用スタイル ~ここから~
*/
.ef-form-group[data-is-coupon="1"][data-is-purchased="0"] .coupon-unpurchased-message-container {
	display: flex;
}
#ef-wrapper form .ef-form-group[data-is-coupon="1"][data-is-purchased="0"] dd label {
	display: none !important;
}
.ef-form-group[data-is-coupon="1"][data-is-purchased="1"] .coupon-unpurchased-message-container {
	display: none;
}
#ef-wrapper form .ef-form-group[data-is-coupon="1"][data-is-purchased="1"] dd label {
	display: none !important;
}
#ef-wrapper form .ef-form-group[data-is-coupon="1"][data-is-purchased="1"] dd label:last-of-type {
	display: flex !important;
}
.ef-form-group[data-is-coupon="1"] .coupon-unpurchased-message-container {
	align-items: center;
	justify-content: center;
    background: #e9e9e9;
	height: 40px;
	width: 120px;
}
/**
* is_coupon: 1用スタイル ~ここまで~
*/

/**
 * クーポンが獲得された時のスタイル ~ここから~
 */
#ef-wrapper .ef-form-group[data-design-type="2"] dd label {
    opacity: 1;
}
#ef-wrapper .ef-form-group[data-design-type="2"] dd label:has(input[type="checkbox"]:checked),
#ef-wrapper .ef-form-group[data-design-type="1"] dd label:has(input[type="checkbox"]:checked),
#ef-wrapper .ef-form-group[data-design-type="1"] dd label:has(input[type="radio"]:checked),
#ef-wrapper .ef-form-group[data-design-type="2"] dd label:has(input[type="radio"]:checked) {
    opacity: 0.5;
}
/**
 * クーポンが獲得された時のスタイル ~ここから~
 */
#ef-wrapper form .ef-form-group[data-is-coupon="1"][data-is-purchased="1"] dd label {
	opacity: 0.5;
}

/**
* クーポン用のspデザイン ~ここから~
*/
@media screen and (max-width: 560px) {
	#ef-wrapper .ef-form-group[data-design-type="1"] .choice-label-container,
	#ef-wrapper .ef-form-group[data-design-type="2"] .choice-label-container {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		gap: 10px;
		flex-wrap: wrap;
		width: 100% !important;
	}
}
/**
* クーポン用のspデザイン ~ここまで~
*/