/* common */
:root {
	--margin-xl: 120px;
	--margin-l: 80px;
	--margin-m: 40px;
	--margin-s: 20px;
    --red-color: 224 55 49;
    --main-color: 0 150 92;
    --gray-color: 238 238 238;
}
.flex {
    display: flex;
}
.tag {
	background: rgb(var(--main-color));
	color: #fff;
	width: auto !important;
	padding: .2rem .5rem;
	font-size: .9rem;
	font-weight: bold;
	list-style: none;
}
#jumbotron img {
    object-position: right !important;
	@media screen and (max-width: 834px){
		object-position: left 80% bottom 0% !important;
	}
}
body .entry-content section .indent {
	padding: 60px !important;
	@media screen and (max-width: 834px){
		padding: 40px !important;
	}
	@media screen and (max-width: 600px){
		padding: 20px 20px 40px !important;
	}
}

/* reset */
.wpcf7-list-item {
    margin: 0;
}
.wpcf7-checkbox,.wpcf7-radio {
    display: flex;
    flex-direction: column;
}
label {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: .5em;
	@media screen and (max-width: 600px){
		align-items: flex-start;
	}
}
[type="checkbox"], [type="radio"] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
	@media screen and (max-width: 834px){
		top: .3rem;
		position: relative;
	}
}
.wpcf7-not-valid-tip {
    display: inline-block;
    margin-left: var(--margin-s);
    font-weight: bold;
	font-size: .9em;
	padding-left: 1rem;
}
.wpcf7-form-control-wrap[data-name='your-attr']{
    display: flex;
    min-width: 350px;
}
.wpcf7-text,.wpcf7-radio {
    max-width: 350px;
	@media screen and (max-width: 834px){
		max-width: unset;
	}
}
.entry-content .wpcf7 form .wpcf7-response-output {
	margin: 0 0 var(--margin-m) 0 !important;
    padding: var(--margin-s);
    font-weight: bold;
    border: none;
    background: rgb(var(--red-color)/ 10%);
    color: rgb(var(--red-color));
}
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
	display: inline-block;
}
p:has(.wpcf7-submit.has-spinner){
    display: flex;
    align-items: center;
    gap: var(--margin-s);
}
.wpcf7-spinner {
    background-color: transparent;
}
.wpcf7-spinner::before {
    background-color: rgb(var(--main-color));
}
.entry-body * {
	line-height: 1.5;
}
.entry-body p {
	margin: 0 !important;
    max-width: unset;
}
input,textarea {
	padding: .2em .5em !important;
	margin: 0 !important;
	cursor: pointer;
    font-size: 16px !important;
}
input + span {
	cursor: pointer;
}

/* forms */
form .flex:nth-of-type(2) {
	border-top: none;
}
form .flex {
    gap: var(--margin-m);
    padding: var(--margin-s) 0;
    border-top: thin solid rgb(0,0,0,8%);
}
form .flex .flex {
    gap: var(--margin-s);
    border: none;
    padding: 0;
}
form .flex h5{
    width: 280px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 !important;
    font-size: 1rem !important;
}
form .flex h5::before {
	display: none;
}
form .flex h4 {
    margin-top: 0;
    color: rgb(var(--main-color));
    display: flex;
    align-items: center;
}
form .flex h4::before {
    content: "";
    width: 5px;
    height: 1.2em;
    display: inline-block;
    margin-right: .8em;
    background: rgb(var(--main-color));
}
form .flex  > *:last-child{
    flex: 1;
	@media screen and (max-width: 834px) {
		width: 100%;
	}
}
form .flex.row {
    gap: var(--margin-l);
}
form h5 span.tag{
    margin-left: 1rem;
    font-size: .8rem;
}
form h5 span.tag.required {
    background: var(--hb-red-color);
	@media screen and (max-width: 834px) {
		line-height: 1;
		padding: .3em .6em;
		font-size: .6rem;
	}
}
form p.note {
    padding: .2rem 0 0 0 !important;
    font-size: .8rem;
	background: none !important;
}
form p.note.margin {
    padding-top: 1rem;
}
form .acceptance {
    padding: var(--margin-m) 0;
    display: flex;
    flex-direction: column;
    gap: var(--margin-m);
}
input.button.wpcf7-submit {
	padding: .8rem 2rem !important;
	border-radius: 30px;
	background: rgb(var(--hb-main-color));
	font-size: 1.2rem;
	font-weight: 600;
	border: none;
	transition: .2s;
	color: #fff;
	width: auto;
}
.wpcf7 .wpcf7-submit:disabled,
.wpcf7 .wpcf7-submit:disabled:hover{
	background: #ccc;
}
input.button.wpcf7-submit:hover {
	background: rgb(var(--hb-main-color));
}
a.textlink {
	color: rgb(var(--hb-main-color));
	transition: .2s;
	font-weight: 600;
	text-decoration: underline;
}
form .flex p,
div.acceptance p{
	margin: 0 !important;
	@media screen and (max-width: 834px){
		width: 100%;
	}
}
#entryform {
    margin-top: 150px;
}
.cf::after{
	display: none !important;
}
.qr-list {
	padding: 0 !important;
	gap: 60px !important;
	justify-content: space-between !important;
	position: relative;
	width: 100% !important;
	max-width: unset !important;
	@media screen and (max-width: 600px){
		flex-direction: column;
	}
}
.qr-list .mynavi, .qr-list .recnavi {
	padding: 0 !important;
	gap: 20px !important;
}
.qr-list .mynavi {
	border: none !important;
}
.qr-list::before {
	content: "";
	width: 1px;
	height: 100%;
	display: block;
	position: absolute;
	right: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: rgb(0,0,0,8%);
	@media screen and (max-width: 600px) {
		height: 1px;
		width: 100%;
		right: unset;
		left: 50%;
	}
}

@media screen and (max-width: 1280px) {
	section .qr-list a.external-site {
		width: calc((100% - 140px)/2) !important;
	}
	.qr-list .mynavi,.qr-list .recnavi {
		width: 50%;
	}
	.qr-list img {
		width: 100%;
		min-width: 80px;
	}
}
@media screen and (max-width: 1024px) {
	.qr-list > div {
		flex-wrap: wrap;
		justify-content: center;
	}
	.qr-list > div::before {
		width: 100% !important;
		height: 40px !important;
		margin: 0 !important;
		background-size: 120px !important;
	}
	section .qr-list a.external-site {
		width: auto !important;
	}
}
@media screen and (max-width: 834px){
	.entry-content > section {
		padding-right: 40px;
	}
	#entryform {
		margin-top: 80px;
	}
	.entry-body p.has-text-align-center {
		text-align: left;
	}
	section .qr-list a.external-site {
		width: calc((100% - 20px)/2) !important;
	}
	form .flex {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 1rem;
	}
	body form .flex h5 {
		margin: 0 !important;
		justify-content: flex-start;
		align-items: center;
		gap: 1rem;
	}
	.wpcf7-text,.wpcf7-radio {
		width: 100%;
	}
	.entry-body p {
		width: 100%;
	}
	.wpcf7-not-valid-tip {
		margin-left: 0;
		margin-top: .5rem;
		display: block;
		font-size: .8rem;
	}
}
@media screen and (max-width: 600px){
	section .qr-list a.external-site {
		width: 100% !important;
	}
}