@charset "UTF-8";

/* ----------------------------------------------------------------------------------------------------
*  LOGIN
* --------------------------------------------------------------------------------------------------*/

.shareholder #contact .contact--loginText {
	text-align: center;
	margin-bottom: 3rem;
}

/* ----------------------------------------------------------------------------------------------------
*  CONTACT
* --------------------------------------------------------------------------------------------------*/
.shareholder #contact {
	margin-top: 4.5rem;
}
.shareholder #contact .contact__form {
	margin-bottom: 5rem;
}
.shareholder #contact .contact__form--shareholderLogin,
.shareholder #contact .contact__form--shareholderSelect {
	margin-top: 5rem;
}
.contact__form--shareholderLogin tr th,
.contact__form--shareholderLogin tr td {
	display: inline-block;
	min-width: unset;
}
.contact__form--shareholderLogin tr th {
	width: min(39.286%, 33rem);
}
.contact__form--shareholderLogin tr td {
	width: min(32.143%, 27rem);
}
.shareholder .contact__form tr {
	transition: all 0.2s;
}
.shareholder .contact__form tr th span:nth-of-type(2) {
	color: #787878;
}
.shareholder .contact__form tr td input,
.shareholder .contact__form tr td select {
	width: 100%;
	height: 6rem;
	padding: 0 15px;
	border-radius: var(--corner-circle);
	border: 1px solid var(--color-gray);
}
.shareholder .contact__form tr td textarea {
	width: 100%;
	height: 16rem;
	padding: 15px;
	border-radius: var(--corner-largeround);
	border: 1px solid var(--color-gray);
}
.shareholder .contact__form tr td.bisection > input,
.shareholder .contact__form tr td.bisection > select,
.shareholder .contact__form tr td.bisection > .icon--arrow {
	width: 48.148%;
}
.shareholder .contact__form tr td.trisection > input,
.shareholder .contact__form tr td.trisection > select,
.shareholder .contact__form tr td.trisection > .icon--arrow {
	width: 30.864%;
}
.shareholder .contact__form tr td.bisection > input + input {
	margin-left: calc(100% - (48.148% * 2));
}
.shareholder .contact__form tr td.trisection > input + input {
	margin-left: calc((100% - (30.864% * 3)) / 2);
}
.shareholder .contact__form tr td.bisection.--withHyphen > input {
	width: 47.222%;
}
.shareholder .contact__form tr td.trisection.--withHyphen > input {
	width: 29.63%;
}
.shareholder .contact__form tr td.bisection.--withHyphen > input + span {
	margin-left: calc((100% - ((47.222% * 2) + 0.5em)) / 2);
	margin-right: calc((100% - ((47.222% * 2) + 0.5em)) / 2);
}
.shareholder .contact__form tr td.trisection.--withHyphen > input + span {
	margin-left: calc((100% - ((29.63% * 3) + (0.5em * 2))) / 4);
	margin-right: calc((100% - ((29.63% * 3) + (0.5em * 2))) / 4);
}
.shareholder .contact__form tr td.bisection.--withHyphen span,
.shareholder .contact__form tr td.trisection.--withHyphen span {
	display: inline-block;
	text-align: center;
	width: 0.5em;
}
.shareholder .contact__form tr td > .icon--arrow {
	position: relative;
}
.shareholder .contact__form tr td > .icon--arrow::after {
	width: 0.5em;
	height: 0.8em;
	background: var(--color-gray);
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%) rotate(90deg);
	transition: all 0.2s;
	-webkit-mask-size: cover;
	        mask-size: cover;
}
.shareholder .contact__form tr td .contact__form__error {
	font-size: 1.4rem;
}
.shareholder .contact__form input::placeholder,
.shareholder .contact__form textarea::placeholder {
	color:#C8C8C8;
}
.shareholder .contact-pege-telephoneArea + .contact__button__area {
	align-items: inherit;
}
.shareholder .contact__box .contact__form__error,
.shareholder .benefit__decline + .contact__form__error {
	font-size: 1.4rem;
    color: var(--color-base);
	text-align: center;
    line-height: 1.4;
	margin-top: 1rem;
}
@media screen and (max-width: 1099px) {
	.shareholder #contact {
		margin-top: 10rem;
	}
}
@media screen and (max-width: 767px) {
	.shareholder #contact {
		margin-top: 8rem;
	}
	.shareholder #contact .contact__form {
		margin-bottom: 4rem;
	}
	.shareholder #contact .contact__form--shareholderLogin,
	.shareholder #contact .contact__form--shareholderSelect {
		margin-top: 4rem;
	}
	.contact__form--shareholderLogin tr th,
	.contact__form--shareholderLogin tr td {
		width: 100%;
	}
	.shareholder .contact__form tr td input,
	.shareholder .contact__form tr td select {
		height: 5rem;
	}
	.shareholder .contact__form tr td .contact__form__error {
		font-size: 1.2rem;
	}
	.shareholder .contact__form tr td.bisection > input,
	.shareholder .contact__form tr td.bisection > select,
	.shareholder .contact__form tr td.bisection > .icon--arrow,
	.shareholder .contact__form tr td.bisection.--withHyphen > input {
		width: 47.015%;
	}
	.shareholder .contact__form tr td.trisection > input,
	.shareholder .contact__form tr td.trisection > select,
	.shareholder .contact__form tr td.trisection > .icon--arrow,
	.shareholder .contact__form tr td.trisection.--withHyphen > input {
		width: 29.254%;
	}
	.shareholder .contact__form tr td.bisection > input + input {
		margin-left: calc(100% - (47.015% * 2));
	}
	.shareholder .contact__form tr td.trisection > input + input {
		margin-left: calc((100% - (29.254% * 3)) / 2);
	}
	.shareholder .contact__form tr td.bisection.--withHyphen > input + span {
		margin-left: calc((100% - ((47.015% * 2) + 0.5em)) / 2);
		margin-right: calc((100% - ((47.015% * 2) + 0.5em)) / 2);
	}
	.shareholder .contact__form tr td.trisection.--withHyphen > input + span {
		margin-left: calc((100% - ((29.254% * 3) + (0.5em * 2))) / 4);
		margin-right: calc((100% - ((29.254% * 3) + (0.5em * 2))) / 4);
	}
	.shareholder .contact__box .contact__form__error,
	.shareholder .benefit__decline + .contact__form__error {
		font-size: 1.2rem;
	}
}

/* ----------------------------------------------------------------------------------------------------
*  株主優待品選択
* --------------------------------------------------------------------------------------------------*/
.shareholder .contact__box .button--check {
	margin-top: 2rem;
}
.contact__box--shareholderSelect {
	background-color: var(--bg-recipe);
}
.contact__box--shareholderDetail {
	background-color: var(--bg-recipe);
	margin: 5rem 0 3rem;
}
.contact__box--shareholderDetail + .contact--text {
	margin-bottom: 3rem;
}
.shareholder .button--check {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
#address_section,
.addressSection {
	margin-top: 9rem;
}
.benefit__items {
	display: grid;
	grid-template-columns: 48.81% 48.81%;
	gap: 0 min(2.38%, 2rem);
}
.benefit__items + .contact--text {
	margin-top: 3rem;
}
.benefit__items + .contact__button__area {
	margin-top: 5rem;
}
.contact--text--shareholderDetail {
	margin-bottom: 5rem;
}
.benefit__item {
	display: grid;
	gap: 1rem 1rem;
	padding: 1.5rem 2rem;
	background-color: #FFF;
	border: 2px solid var(--color-gray);
	border-radius: var(--corner-largeround);
	cursor: pointer;
	transition: all 0.2s;
}
.benefit__item:hover {
	border-color: var(--color-base);
}
.benefit__item:has(input[type="radio"]:checked),
.benefit__item--selected {
	background-color: #fef6f5;
	border-color: var(--color-base);
}
.benefit__item:not(.benefit__item--selected):hover {
	border: 2px solid var(--color-gray);
}
.benefit__item.is-hover-disabled {
	cursor: default;
}
.benefit__item:has(input[type="radio"]:checked) .item__name,
.benefit__item--selected .item__name {
	color: var(--color-base);
}
.item__name {
	font-size: 1.8rem;
	line-height: 1.4;
}
.benefit__item--shareholderSelectHigh {
	grid-template-rows: subgrid;
	grid-template-columns: 1fr;
	grid-row: span 3;
}
.benefit__item--shareholderSelectHigh .item__name {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
.benefit__item--shareholderSelectHigh .item__description {
	grid-row: 3 / 4;
	grid-column: 1 / 2;
}
.benefit__item--shareholderSelectHigh .item__image {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
}
.benefit__item--shareholderSelectLow {
	grid-template-rows: 1fr;
	grid-template-columns: min(54.645%, 20rem) 1fr;
}
.benefit__item--shareholderSelectLow .item__name {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
}
.benefit__item--shareholderSelectLow .item__description {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
.benefit__item--shareholderSelectLow .item__image {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	align-content: center;
}
@media screen and (max-width: 767px) {
	.benefit__items {
		display: flex;
		flex-direction: column;
		gap: 2rem 0;
	}
	.item__name {
		font-size: 1.4rem;
	}
}