@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/** -----------------------------------------------------------------------------
// 共通項目
// ----------------------------------------------------------------------------*/

:root {
	--coop-green-color: 				#094;
	--coop-green-background-color: 	#00b953;
	--coop-green-highlight-color: 	#f3faf6;
	--text-background-color: 		#fbfbfa;
	--text-border-color: 			#f3f1ee;
	--error-color: 					#fd3c40;
	--error-background-color: 		#fff2f3;
	--warning-color: 				#fd3c40;
	--warning-background-color: 		#fff2f3;
	--caution-color: 				#fb8a06;
	--caution-background-color:		#fff3e6;
}

html {
    font-family: Noto Sans JP, sans-serif;
	line-height: 1.5;
	tab-size: 4;
}

body {
	color: #333;
	font-size: 1.25rem;
	line-height: inherit;
	margin: 0;
}

*, :after, :before {
    border: 0 solid #e5e7eb;
    box-sizing: border-box;
}

img, video {
    height: auto;
    max-width: 100%;
}

audio, canvas, embed, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle;
}

/** -----------------------------------------------------------------------------
// 部品項目
// ----------------------------------------------------------------------------*/

/*-------------------------
  ボタン
-------------------------*/

button {
	cursor: pointer;
}

button.btn-submit,
button.btn-next,
button.btn-cancel {
	color: #fff;
	background-color: var(--coop-green-background-color);
	border: none;
	border-radius: .25rem;
	text-align: center;
	font-size: .75rem;
	font-weight: 700;
	min-height: 2.75rem;
	width: 100%;
}

@media (min-width: 768px) {
	button.btn-submit,
	button.btn-next,
	button.btn-cancel {
/*		font-size:1.25rem;*/
		font-size: 1.8rem;
		min-height: 3rem
    }
}

button.btn-next:disabled {
	color: #fff;
	background-color: #999;
}

button.btn-cancel {
	background-color: var(--warning-color);
}

button#btn-search-adr {
	color: var(--coop-green-color);
	background-color: transparent;
	border: 1px solid var(--coop-green-color);
	border-radius: 4px;
	font-size: .875rem;
	font-weight: 700;
	padding-left: .75rem;
	padding-right: .75rem;
	margin-top: .75rem;
	width: 100%;
	height: 44px !important;
}

button#btn-search-adr:disabled {
	color: #999;
	border-color: #999;
}

button.btn-edit {
	display: flex;
	color: var(--coop-green-color);
	background-color: transparent;
	border: 1px solid var(--coop-green-color);
	border-radius: 2px;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.25rem;
	padding-left: .5rem;
	padding-right: .5rem;
	align-items: center;
}

button.btn-edit:before {
	content: url(images/edit.svg);
	margin-right: 4px;
	height: 14px;
	width: 14px;
}

/*-------------------------
  テキスト・パスワード
-------------------------*/

input[type='text'],
input[type='number'],
input[type='password'] {
	display: block;
	color: #555;
	border: 1px solid #999;
	border-radius: .25rem;
	padding: 1rem;
	height: 2.5rem;
	width: 100%;
	box-sizing: border-box;
}

input[type='text']::placeholder,
input[type='number']::placeholder,
input[type='password']::placeholder {
	color: #ccc;
}

input[type='text'].error,
input[type='number'].error,
input[type='password'].error {
	background-color: var(--warning-background-color);
	border-color: var(--warning-color);
}

@media (min-width: 768px) {
	input[type='text'],
	input[type='number'],
	input[type='password'] {
		font-size: 24px;
        height: 2.75rem;
    }
}

/* 郵便番号
-------------------------*/
span.postal-mark {
	display: flex;
	position: absolute;
	border-right-color: #999;
	border-right-width: 1px;
	line-height: 1.5rem;
	padding-left: .75rem;
	padding-right: .75rem;
	margin-bottom: .5rem;
	margin-top: .5rem;
	top: 0;
	bottom: 0;
	left: 0;
	align-items: center;
}

input#txt-postNumber {
	padding-left: 52px;
}

/*-------------------------
  ラジオボタン
-------------------------*/

label.label-radio {
	display: flex;
	position: relative;
	background-color: #fff;
	border: 1px solid #555;
	border-radius: 4px;
	font-size: .75rem;
	gap: .5em;
	height: 2.5rem;
	margin-top: .75rem;
	padding: .5em .7em;
	max-width: 100%;
	align-items: center;
	cursor: pointer;
}

@media (min-width: 768px) {
	label.label-radio {
		font-size: 1.25rem;
	}
}

label.label-radio:has(:disabled) {
	color: #d1d5db;
}

label.label-radio:has(:checked) {
	color: var(--coop-green-color);
	background-color: #fff;
	border-color: var(--coop-green-color);
}

input.input-radio {
	position: relative;
	appearance: none;
	border: 1px solid #999;
	border-radius: 9999px;
	width: 16px;
	height: 16px;
}

@media (min-width: 768px) {
	input.input-radio {
		width: 20px;
		height: 20px;
	}
}

input.input-radio:checked {
	border: 1px solid var(--coop-green-color);
}

input.input-radio:checked::after {
	content: '';
	position: absolute;
	border-radius: 9999px;
	background-color: var(--coop-green-color);
	inset: 0;
	margin: auto;
	width: 12px;
	height: 12px;
}

@media (min-width: 768px) {
	input.input-radio:checked::after {
		width: 16px;
		height: 16px;
	}
}

/*-------------------------
  チェックボックス
-------------------------*/

label.checkbox {
	display: flex;
	accent-color: var(--coop-green-color);
	border: 1px solid #999;
	border-radius: .25rem;
	gap: .75rem;
	column-gap: 4px;
	margin-top: 1rem;
	padding: 1rem;
	line-height: 1;
	align-items: center;
	cursor: pointer;
}

label.checkbox .check-title {
	font-size: .875rem;
	font-weight: 700;
	line-height: 1rem;
}

@media (min-width: 768px) {
    label.checkbox .check-title {
        font-size:1.25rem;
		line-height:1.25rem;
    }
}

label.checkbox .check-text {
	font-size: .75rem;
	margin-top: .75rem;
}

@media (min-width: 768px) {
    label.checkbox .check-text {
        font-size:.875rem;
		line-height:1rem;
    }
}

label.checkbox.checked {
	border-color: var(--coop-green-color);
}

label.checkbox.checked .check-title {
	color: var(--coop-green-color);
}

label.checkbox.checked .check-text {
	color: var(--coop-green-color);
}

input[type='checkbox'] {
	appearance: none;
	position: relative;
	border: 1px solid #999;
	border-radius: 2px;
	margin-right: 1rem;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

input[type='checkbox']:checked {
	border-color: var(--coop-green-color);
	background-color: var(--coop-green-color);
}

input[type='checkbox']:checked::after {
	content: '';
	position: absolute;
	border-bottom: 2px solid #ffffff;
	border-left: 2px solid #ffffff;	
	width: 12px;
	height: 6px;
	top: 4px;
	left: 3px;
	transform: rotate(-45deg);
}

/*-------------------------
  セレクトボックス
-------------------------*/

select {
	display: flex;
	background-color: #fff;
	border: 1px solid #999;
	border-radius: .25rem;
	padding: .5rem 1rem;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

@media (min-width: 768px) {
	select {
		font-size: 1.25rem;
	}
}

select option {
	font-size: 1rem;
}

select.selected {
	color: var(--coop-green-color);
	border-color: var(--coop-green-color);
}

select.selected option {
	color: #000;
}

/*-------------------------
  見出し
-------------------------*/

label.left-border-label {
    border-color: var(--coop-green-color);
	border-left: 5px;
    border-style: solid;
    color: var(--coop-green-color);
    display: block;
    font-weight: 700;
    padding-left: .5rem
}

@media (min-width: 768px) {
	label.left-border-label {
		font-size: 1.8rem;
	}
}

/*-------------------------
  リンク
-------------------------*/

a {
	color: var(--coop-green-color);
	text-decoration-line: none;
	cursor: pointer;
}

span.link-back {
	color: #555;
	font-size: .875rem;
	text-decoration-line: underline;
	cursor: pointer;
}

/*-------------------------
  リスト
-------------------------*/

ul {
	margin: 0;
	padding: 0;
}

/*-------------------------
  罫線
-------------------------*/

hr.hr-check {
	border: 1px solid var(--text-border-color);
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	width: 100%;
}

hr.hr-title {
	border: 1.5px solid var(--coop-green-color);
	margin-top: 0;
	margin-bottom: 1.25rem;
	width: 100%;
}

/*-------------------------
  必須マーク
-------------------------*/

span.required {
	display: inline-block;
	color: #fff;
	background-color: var(--coop-green-background-color);
	border-radius: 10px;
	font-size: 10px;
	margin-left: .5rem;
	padding: .125rem .75rem
}

@media (min-width: 768px) {
    span.required {
		font-size: 1rem;
/*		padding: .1rem .75rem;*/
    }
}

/** -----------------------------------------------------------------------------
// ページレイアウト
// ----------------------------------------------------------------------------*/

div#wrap{
	display: flex;
	flex-direction: column;
 	min-height: 100vh;
}

/*-------------------------
  メール送信画面
-------------------------*/

.coop-title {
	align-items: center;
 	background-color: #fafafa;
	border-bottom-color: #f6f4f4;
	border-bottom-width: 1px;
	display: flex;
	justify-content: center;
	padding-top: 1rem;
	padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
	.coop-title {
		background-color: #fff;
		border-style: none;
		padding-top: 2.5rem;
		padding-bottom: 1.5rem;
	}
}

.coop-title img {
	height: 18px;
}

@media (min-width: 768px) {
	.coop-title img {
		height: 28px;
	}
}

.coop-title span {
    display: inline-block;
    font-weight: 700;
    margin-left: .5rem;
}

@media (min-width: 768px) {
	.coop-title span {
/*		font-size: 1.5rem;*/
		font-size: 1.8rem;
		margin-left: 1.75rem;
    }
}

/*-------------------------
  ご加入お申し込み画面
-------------------------*/

@media (min-width: 768px) {
    .step-ctn {
        background-color: #fafafa;
        border-bottom-color: #f6f4f4;
        border-bottom-width: 1px;
        border-top-color: #f6f4f4;
        border-top-width: 1px;
        display: flex;
        justify-content: center;
        padding-bottom: 1.5rem;
        padding-top: 1.5rem
    }
}

.step {
    align-items: center;
    display: flex;
    font-family: Mukta,sans-serif;
    height: 3rem;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1.75rem;
    position: relative;
    width: 3rem
}

@media (min-width: 768px) {
    .step {
        margin-left:0;
        margin-right: 0;
        margin-top: 0
    }
}

.step {
    background-color: #fff;
    border-radius: 9999px
}

.step-title {
    display: flex;
    justify-content: center;
    margin-top: .75rem
}

@media (min-width: 768px) {
    .step-title {
        font-size:1.5rem
    }
}

.step-title>div {
	border-bottom-color: #d2ebdd;
    border-bottom-width: 8px;
    color: var(--coop-green-color);
    display: inline-block;
    font-weight: 700;
    margin-left: auto;
    margin-right: auto
}

@media (min-width: 768px) {
    .step-title>div {
        border-style: none;
		font-size: 1.8rem;
        margin-left: 1.25rem
    }
}

.step-title>div>div {
    line-height: 1rem;
    margin-bottom: -.25rem;
    padding-left: .5rem;
    padding-right: .5rem
}

@media (min-width: 768px) {
    .step-title>div>div {
        padding-left:0;
        padding-right: 0
    }
}

.sub-label {
    color: #555;
    font-size: .75rem;
    font-weight: 700;
}

@media (min-width: 768px) {
	.sub-label {
	    font-size: 1.5rem;
	}
}

div#area-notfound {
	background-color: var(--error-background-color);
	font-size: .75rem;
	padding: 1rem;
	margin-top: .75rem;
}

div#area-contact {
	background-color: var(--coop-green-highlight-color);
	font-size: .75rem;
	padding: 1rem;
	margin-top: .75rem;
}

@media (min-width: 768px) {
	div#area-notfoun,
	div#area-contact {
	    font-size: .875rem;
	}
}

div.area-entry-confirm {
	background-color: var(--text-background-color);
	border: 2px solid var(--text-border-color);
	font-size: .875rem;
	padding: 1.25rem .75rem;
}

@media (min-width: 768px) {
    div.area-entry-confirm {
		font-size: 1.25rem;
        padding:1.5rem 1rem 1.75rem
    }
}

/*-------------------------
  エラーメッセージ
-------------------------*/

ul.error-messages {
	position: relative;
	background-color: var(--error-background-color);
	border-radius: .25rem;
	line-height: 1.5rem;
	margin-top: .875rem;
	margin-bottom: .875rem;
	padding-bottom: .5rem;
	padding-left: 2.25rem;
	padding-top: .5rem;
}

ul.error-messages::before {
	position: absolute;
	content: url('images/error.png');
	left: .5rem;
	top: .625rem;
}

ul.error-messages li {
	position: relative;
	color: var(--error-color);
	font-size: .875rem;
	font-weight: 700;
	list-style-type: none;
}

/*-------------------------
  フッター
-------------------------*/

footer {
	margin-top: auto;
}

.footer {
	background-color: var(--text-background-color);
	border-top: 1px solid var(--text-border-color);
	border-bottom: 1px solid var(--text-border-color);
	margin-top: 2rem;
	padding-bottom: 2rem;
}

.copyright {
    color: #333;
    font-size: .75rem;
    line-height: .75rem;
    text-align: center
}

/*-------------------------
  モーダル
-------------------------*/

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
}

.modal:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

.modal.active {
	opacity: 1;
	visibility: visible;
}

.modal-body {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 650px;
	width: 90%;
	max-height: 750px;
}

.modal-content {
	background: #fff;
	text-align: left;
	padding: 30px;
}

/** 郵便番号検索 住所一覧 */
div#radio-select-postNumber {
	min-height: 100px;
	max-height: 200px;
	overflow-y: scroll;
}

/*-------------------------
  生協選択
-------------------------*/

.sm-list {
	margin-top: 1rem;
	width: 100%;
}

@media (min-width: 768px) {
	.sm-list {
		-moz-column-gap: 2rem;
		column-gap: 2rem;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 1.25rem;
	}
}

.select-btn:first-child {
	margin-top: 0;
}

.select-btn {
	align-items: center;
	border: 1px solid #999;
	border-radius: .25rem;
	color: #555;
	display: flex;
	font-size: .875rem;
	height: 3rem;
	margin-top: 1.25rem;
	padding-left: 1rem;
	padding-right: 1rem;
	text-decoration: none;
}

@media (min-width: 768px) {
	.select-btn {
		font-size: 1.25rem;
		margin-top: 0;
	}
}

/** -----------------------------------------------------------------------------
// 調整用項目
// ----------------------------------------------------------------------------*/

.text-base {
    font-size: 1.25rem;
}

.text-xs {
    font-size: .75rem;
}

.text-sm {
    font-size: .875rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.8rem;
}

.text-2xl {
    font-size: 2rem;
}

.underline {
	text-decoration-line: underline;
}

.bold {
	font-weight: 700;
}

.text-coop-green {
    color: var(--coop-green-color);
}

.text-error {
    color: var(--error-color);
}

.text-warning {
    color: var(--warning-color);
}

.text-caution {
    color: var(--caution-color);
}

.text-\[\#FFFFFF\] {
    color: #FFF;
}

.text-\[\#555555\] {
    color: #555;
}

.text-\[\#666666\] {
    color: #666;
}

.bg-text {
	background-color: var(--text-background-color);
}

.bg-coop-green {
	background-color: var(--coop-green-color);
}

.bg-green-highlight {
	background-color: var(--coop-green-highlight-color);
}

.bg-error {
	background-color: var(--error-background-color);
}

.bg-warning {
	background-color: var(--warning-background-color);
}

.bg-caution {
	background-color: var(--caution-background-color);
}

.bg-white {
	background-color: #FFF;
}

.bg-\[\#FBFBFA\] {
	background-color: #fbfbfa;
}

.border-2 {
	border-width: 2px;
}

.border-\[\#F3F1EE\] {
	border-color: #f3f1ee;
}

.pointer {
	cursor: pointer;
}

.flex {
	display: flex;
}

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

.inline {
    display: inline
}

.none {
	display: none;
}

.hidden {
	display: none;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

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

.text-align-right {
	display: block;
	text-align: right;
}

.items-center {
	align-items: center;
}

.items-start {
    align-items: flex-start;
}

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

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.inset-y-0 {
    bottom: 0;
    top: 0
}

.left-0 {
    left: 0
}

.left-1\/2 {
    left: 50%
}

.left-2 {
    left: .5rem
}

.left-\[20\%\] {
    left: 20%
}

.top-0 {
    top: 0
}

.top-2 {
    top: .5rem
}

.z-10 {
    z-index: 10
}

.w-1\/2 {
    width: 50%
}

.w-1\/3 {
    width: 33.3%
}

.w-1\/4 {
    width: 25%
}

.w-6 {
    width: 1.5rem
}

.w-8 {
    width: 2rem
}

.w-\[20px\] {
    width: 20px
}

.w-\[30px\] {
    width: 30px
}

.w-\[76px\] {
    width: 76px;
}

.w-\[128px\] {
    width: 128px
}

.w-\[224px\] {
    width: 224px
}

.w-full {
    width: 100%
}

.min-w-min {
    min-width: min-content
}

.max-w-3xl {
    max-width: 48rem
}

.h-screen {
    height: 100vh;
}

.flex-1 {
    flex: 1 1 0%
}

.flex-shrink-0 {
    flex-shrink: 0
}

.flex-left-right {
	display: flex;
	justify-content: space-between;
}

.flex-grow {
    flex-grow: 1
}

.flex-col {
    flex-direction: column;
}

.leading-3 {
    line-height: .75rem
}

.leading-4 {
    line-height: 1rem
}

.leading-5 {
    line-height: 1.25rem
}

.leading-6 {
    line-height: 1.5rem
}

.leading-7 {
    line-height: 1.75rem
}

.leading-9 {
    line-height: 2.25rem
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

.gap-5 {
    gap: 1.25rem
}

.gap-7 {
    gap: 1.75rem
}

.gap-\[10px\] {
    gap: 10px
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-5 {
    margin-bottom: 1.25rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mb-20 {
    margin-bottom: 5rem
}

.ml-1 {
    margin-left: .25rem
}

.ml-2 {
    margin-left: .5rem
}

.ml-3 {
    margin-left: .75rem
}

.ml-4 {
    margin-left: 1rem
}

.ml-5 {
    margin-left: 1.25rem
}

.ml-6 {
    margin-left: 1.5rem
}

.ml-8 {
    margin-left: 2rem
}

.ml-auto {
    margin-left: auto
}

.mr-1 {
    margin-right: .25rem
}

.mr-2 {
    margin-right: .5rem
}

.mr-4 {
    margin-right: 1rem
}

.mt-0 {
    margin-top: 0
}

.-mt-0\.5 {
    margin-top: -.125rem
}

.mt-0\.5 {
    margin-top: .125rem
}

.mt-1 {
    margin-top: .25rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-3 {
    margin-top: .75rem
}

.mt-4 {
    margin-top: 1rem
}

.mt-5 {
    margin-top: 1.25rem
}

.mt-6 {
    margin-top: 1.5rem
}

.mt-7 {
    margin-top: 1.75rem
}

.mt-8 {
    margin-top: 2rem
}

.mt-9 {
    margin-top: 2.25rem
}

.mt-10 {
    margin-top: 2.5rem
}

.mt-20 {
    margin-top: 5rem
}

.p-0 {
    padding: 0
}

.p-3 {
    padding: .75rem
}

.p-4 {
    padding: 1rem
}

.p-5 {
    padding: 1.25rem
}

.p-6 {
    padding: 1.5rem
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem
}

.py-1 {
    padding-bottom: .25rem;
    padding-top: .25rem
}

.py-10 {
    padding-bottom: 2.5rem;
    padding-top: 2.5rem
}

.py-2 {
    padding-bottom: .5rem;
    padding-top: .5rem
}

.py-3 {
    padding-bottom: .75rem;
    padding-top: .75rem
}

.py-4 {
    padding-bottom: 1rem;
    padding-top: 1rem
}

.py-5 {
    padding-bottom: 1.25rem;
    padding-top: 1.25rem
}

.py-6 {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem
}

.py-7 {
    padding-bottom: 1.75rem;
    padding-top: 1.75rem
}

.pb-10 {
    padding-bottom: 2.5rem
}

.pb-2 {
    padding-bottom: .5rem
}

.pb-3 {
    padding-bottom: .75rem
}

.pb-5 {
    padding-bottom: 1.25rem
}

.pb-6 {
    padding-bottom: 1.5rem
}

.pb-8 {
    padding-bottom: 2rem
}

.pl-2 {
    padding-left: .5rem
}

.pl-9 {
    padding-left: 2.25rem
}

.pt-4 {
    padding-top: 1rem
}

.pt-5 {
    padding-top: 1.25rem
}

.pt-6 {
    padding-top: 1.5rem
}

.pt-7 {
    padding-top: 1.75rem
}

/** タブレット用 */
@media (min-width: 768px) {

    .md\:-top-24 {
        top:-6rem
    }

    .md\:mx-0 {
        margin-left: 0;
        margin-right: 0
    }

    .md\:mx-6 {
        margin-left: 1.5rem;
        margin-right: 1.5rem
    }

    .md\:\!mt-0 {
        margin-top: 0!important
    }

    .md\:mb-\[20px\] {
        margin-bottom: 20px
    }

    .md\:ml-4 {
        margin-left: 1rem
    }

    .md\:ml-6 {
        margin-left: 1.5rem
    }

    .md\:mr-0 {
        margin-right: 0
    }

    .md\:mt-0 {
        margin-top: 0
    }

	.md\:mt-3 {
	    margin-top: .75rem
	}

    .md\:mt-4 {
        margin-top: 1rem
    }

    .md\:mt-5 {
        margin-top: 1.25rem
    }

    .md\:mt-6 {
        margin-top: 1.5rem
    }

    .md\:mt-8 {
        margin-top: 2rem
    }
	
	.md\:mt-10 {
	    margin-top: 2.5rem
	}
	
	.md\:mt-20 {
	    margin-top: 5rem
	}

    .md\:inline-block {
        display: inline-block
    }

    .md\:flex {
        display: flex
    }

    .md\:grid {
        display: grid
    }

    .md\:hidden {
        display: none
    }

    .md\:\!h-10 {
        height: 2.5rem!important
    }

    .md\:h-14 {
        height: 3.5rem
    }

    .md\:h-\[80px\] {
        height: 80px
    }

    .md\:w-1\/2 {
        width: 50%
    }

    .md\:w-1\/3 {
        width: 33.333333%
    }

	.md\:w-\[114px\] {
        width: 114px;
    }
	
    .md\:w-\[172px\] {
        width: 172px
    }

    .md\:w-\[175px\] {
        width: 175px
    }

    .md\:w-auto {
        width: auto
    }

    .md\:basis-2\/5 {
        flex-basis: 40%
    }

    .md\:basis-3\/5 {
        flex-basis: 60%
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .md\:flex-row {
        flex-direction: row
    }

    .md\:gap-12 {
        gap: 3rem
    }

    .md\:gap-4 {
        gap: 1rem
    }

    .md\:gap-x-8 {
        column-gap: 2rem
    }

    .md\:p-10 {
        padding: 2.5rem
    }

    .md\:p-6 {
        padding: 1.5rem
    }

    .md\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .md\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .md\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem
    }

    .md\:px-\[20px\] {
        padding-left: 20px;
        padding-right: 20px
    }

    .md\:px-\[62px\] {
        padding-left: 62px;
        padding-right: 62px
    }

    .md\:py-7 {
        padding-bottom: 1.75rem;
        padding-top: 1.75rem
    }

    .md\:py-8 {
        padding-bottom: 2rem;
        padding-top: 2rem
    }

    .md\:py-\[28px\] {
        padding-bottom: 28px;
        padding-top: 28px
    }

    .md\:pt-8 {
        padding-top: 2rem
    }

    .md\:text-center {
        text-align: center
    }

    .md\:text-\[16px\] {
        font-size: 16px
    }

    .md\:text-\[18px\] {
        font-size: 18px
    }

    .md\:text-\[2\.625rem\] {
        font-size: 2.625rem
    }

    .md\:text-\[20px\] {
        font-size: 20px
    }

    .md\:text-\[28px\] {
        font-size: 28px
    }

    .md\:text-\[32px\] {
        font-size: 32px
    }

    .md\:text-base {
        font-size: 1.25rem
    }

	.md\:text-sm {
	    font-size: .875rem
	}
	
    .md\:text-lg {
        font-size: 1.125rem
    }

    .md\:text-xl {
        font-size: 1.8rem
    }
	.md\:text-2xl {
	    font-size: 2rem
	}
	
    .md\:leading-7 {
        line-height: 1.75rem
    }
}

/** ローディング */
#loader-bg {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #fff;
	z-index: 200001;
	opacity:0.85;
}

#loader {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-left: -100px;
	text-align: center;
	color: #000;
	z-index: 200002;
}

#loader-message {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	min-width: 300px;
	text-align: center;
	color: #000;
}

@media (min-width: 768px) {
	#loader-message {
		min-width: 700px;
	}
}

/** Thanks画面 */
.title-kumCd {
	border-bottom-color: #d2ebdd;
	border-bottom-width: 8px;
	display: inline-block;
	line-height: 1rem;
	margin-bottom: -.25rem;
	padding-left: .5rem;
	padding-right: .5rem;
}

.title-service {
	border-bottom-color: #e2ddd6;
	border-bottom-width: 8px;
	display: inline-block;
	line-height: 1rem;
	margin-bottom: -.25rem;
	padding-left: .5rem;
	padding-right: .5rem;
}

.link-btn {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	color: #fff;
	background-color: #fb8a06;
	border-radius: .25rem;
	font-weight: 700;
	text-align: center;
	height: 3rem;
	width: 100%;
	margin-top: 1.25rem;
}

.icon-round {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	background-color: #b69c76;
	border-radius: 9999px;
	width: 50px;
	height: 50px;
}

hr.section-divide {
	border-bottom-width: 0;
	border-style: dashed;
	border-top-width: 1px;
	border-color: #b69c76;
	margin-top: 2rem;
	padding-top: 2rem;
}

.w-\[30px\] {
    width: 30px;
}

.w-\[95px\] {
    width: 95px;
}

.w-\[109px\] {
    width: 109px;
}

.w-\[127px\] {
    width: 127px;
}

.w-\[134px\] {
    width: 134px;
}

.w-\[300px\] {
    width: 300px;
}

@media (min-width: 768px) {
	
	.icon-round {
		width: 80px;
		height: 80px;
	}
	
    .md\:w-\[50px\] {
        width: 50px;
    }
	
	.md\:w-\[52px\] {
	    width: 52px;
	}
	
	.md\:w-\[190px\] {
	    width: 190px;
	}
	
	.md\:w-\[500px\] {
	    width: 500px;
	}
	
	.md\:w-\[344px\] {
	    width: 344px;
	}
	
	.md\:w-\[516px\] {
	    width: 516px;
	}
}