@charset "utf-8";

/*=======================================================

	YOKOHAMA Display Museum CSS
	ATHR : Assiette Ltd.
	DATE : 2024/05

=======================================================*/

/* form */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="date"],
select,
textarea {
    height: 4rem;
	background-color: #f1f5f9;
	border: 1px solid #9fb1c3;
    border-radius: 5px;
    vertical-align: baseline;
}
input[type="checkbox"],
input[type="radio"] {
	accent-color: #013161;
    inline-size: 2.2rem;
    block-size: 2.2rem;
}
input:required:placeholder-shown { background:#fffae6;}
select:invalid { background:#fffae6;}
select option:first-child { background:#fffae6;}

.btn.small { min-width: 0;}
.btn .rose { color: #EA3F4C; font-weight: bold;}

/* common */
header.notFixed { position: static;}
#logo { padding-left: 0; text-align: center;}

main.registerMem { padding-top: 3rem; min-height: calc(100vh - 15.5rem);}
main.registerMem section { max-width: 144rem;}

main.registerMem h1 { font-size: 2.4rem;}
main.registerMem h2 + .right { margin: -1rem 0 2rem;}
main.registerMem .right:first-child { margin: 0 0 1rem;}

.underline { padding: 0 0.1rem; background: linear-gradient(transparent 60%, rgba(71, 184, 255, 0.4) 60%);}

@media (hover: hover) {
.acd:hover { cursor: pointer;}
}
.tabs { display: none;}

/* flex */
#registSteps,
#industryType .btn,
.typeDetail { display: -webkit-box; display: -ms-flexbox; display: flex; }

#industryType .btn { align-items: center;}

/* registSteps */
#registSteps { margin: 0 -2rem 3rem; width: calc(100% + 4rem); overflow: auto;}
#registSteps li { position: relative; padding: 0 2rem; min-width: 15rem; color: #013161; font-size: 1.6rem; text-align: center;}
#registSteps li::before,
#registSteps li::after {
	content: "";
	position: absolute;
	top: 3.5rem;
	left: 50%;
	width:  calc(100% - .5rem);
	height: .3rem;
	background: #013161;
}
#registSteps li::after {
	left: 50%;
	width: 1.8rem;
	height: 1.8rem;
	border: .4rem solid #FFF;
	border-radius: 50%;
	transform: translate(-0.9rem, -0.75rem);
}
#registSteps li:first-child { margin-left: auto;}
#registSteps li:last-child { margin-right: auto;}
#registSteps li:last-child::before { display: none;}
#registSteps small { display: block; font-size: 1.4rem;}
#registSteps img { margin: 3rem auto 1rem; width: 4rem;}
#registSteps span { display: block; white-space: nowrap;}

#registSteps li.current { font-weight: bold;}
#registSteps li.current ~ li { color: #9fb1c3;}
#registSteps li.current::before,
#registSteps li.current ~ li::before,
#registSteps li.current ~ li::after { background: #9fb1c3;}
#registSteps li.current img { opacity: 1;}
#registSteps li.current ~ li img { opacity: .4;}

/* industryType */
#industryType { margin: 0 0 3rem;}
#industryType .btn {
	margin: 3rem 0;
	padding: 2rem 6rem 2rem 2rem;
	background-image: url("/images/common/arrowR.svg");
	background-position: right 2rem center;
	background-repeat: no-repeat;
	background-size: 2.4rem;
}
#industryType li:nth-child(3) .btn { margin-top: 6rem;}
#industryType .btn:hover { background-position: right 3rem center;}
#industryType .btn .imageIcon { margin: 0 2rem 0 0; width: min(20vw, 12rem);}
#industryType .btn strong { font-size: 120%;}

.registExplain { margin: 2rem 0; line-height: 1.6;}
.registExplain ~ h2 { margin-top: 6rem;}

.bordered { margin: 6rem 0 0; padding: 3rem 0 0; text-align: center; border-top: 1px solid #9fb1c3;}
.bordered a:not(.btn) { display: inline-block; margin: 3rem 2rem 0; text-decoration: none;}
.bordered a:not(.btn) img { position: relative; top: -0.2rem; margin: 0 .3rem 0 0; width: 2.4rem; vertical-align: middle;}
@media (hover: hover) {
.bordered a:not(.btn):hover { text-decoration: underline;}
}

/* modal */
.modalLink { cursor: pointer;}

.modal { display: none; position: relative; z-index: 900; }
.modalBG { position: fixed; top: 0; left: 0; margin: 0; height: 100%; width: 100%; background: #001b36; opacity: .5; z-index: 999; }

.modalBlock {
	position: fixed;
	top: 10%;
	left: 50%;
	margin: -4rem 0 0;
	padding: 3rem 0;
	width: 80%;
	height: auto;
	max-height: 80%;
	background: #fff;
	box-shadow: 0 1rem 3rem rgba(1, 49, 97, 0.5);
	overflow: hidden;
	overflow-y: auto;
	z-index: 1000;
	transform: translateX(-50%);
	transition: all 0.3s ease-in-out;
}
.modalBlock p { margin: 0 0 2rem; font-size: 1.6rem; text-align: left;}

.modal .closeBtn { position: fixed; top: 0.5rem; right: 0.5rem; cursor: pointer; opacity: .6; z-index: 1000;}
.modal .closeBtn a { display: block; padding: 0.5rem; width: 4rem; height: 4rem; background: #FFF;}
.modal .closeBtn a:hover { cursor: pointer; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
.modal .closeBtn img { width: 100%; opacity: 1 !important;}

.modal.show .modalBlock { margin-top: 0 !important; }

.industryList .modalBlock { padding-bottom: 0; max-width: 60rem;}
.industryList h2,
.industryList .acd { margin: 0; padding: 1.5rem 2rem; font-size: 2rem; border-bottom: 1px solid #000;}
.industryList h2 { margin: 0 !important; padding: .5rem 2rem 3rem; font-size: 2.6rem;}
.industryList .acd { padding: 1.5rem 2rem; text-align: left;}
.industryList .acd::after,
.industryList h3 a::after,
.industryList li a::after {
	content: "";
	position: absolute;
    top: calc(50% - 1.5rem);
    right: 1.5rem;
	width:  3rem;
	height: 3rem;
	background: url("/images/common/icon-plus.svg") no-repeat;
	background-size: contain;
	transition: .3s;
}
@media (hover: hover) {
.industryList .acd:hover { background: rgba(1, 49, 97, 0.1);}
}
.industryList .acd.open:after { background-image: url("/images/common/icon-minus.svg"); transform: rotate(180deg);}

.industryList ul { background: #f1f5f9;}
.industryList ul li { border-bottom: 1px solid #FFF;}
.industryList ul li:last-child { border-bottom: 1px solid #000;}
.industryList h3 { margin: 0;}
.industryList h3 a,
.industryList li a { display: block; position: relative; padding: 1.5rem 2rem; text-decoration: none;}
.industryList h3 a { padding: 1.5rem 6rem 1.5rem 2rem; font-size: 2rem; text-align: left; border-bottom: 1px solid #000;}
.industryList h3 a::after,
.industryList li a::after {
    top: calc(50% - .7rem);
    right: 2.4rem;
    width: 1.4rem;
    height: 1.4rem;
	background-image: url("/images/common/arrowR.svg");
	transition: .3s;
}
.industryList h3 a span { display: inline-block; font-weight: normal;}
@media (hover: hover) {
.industryList h3 a:hover,
.industryList li a:hover { background: rgba(1, 49, 97, 0.1);}
}

.roseBtn { padding: 4rem 2rem 2rem; text-align: center;}
.roseBtn .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 6rem 2rem 2rem;
	background-image: url("/images/common/arrowR.svg");
	background-position: right 2rem center;
	background-repeat: no-repeat;
	background-size: 2rem;
}
.roseBtn li:nth-child(3) .btn { margin-top: 6rem;}
.roseBtn .btn:hover { background-position: right 3rem center;}
.roseBtn .btn .imageIcon { margin: 0 1rem 0 0; width: min(13vw, 10rem);}
.roseBtn .btn strong { font-size: 120%;}

/* upload */
.industryCheck { margin: 0 0 2rem; font-weight: bold;}

.typeDetail { justify-content: center; margin: 0 0 4rem;}
.cardImg { margin: 0 2rem 0 0;}
.cardImg img { max-width: min(40vw, 30rem);}
.memberPrice { display: flex; align-items: center; padding: 1rem; line-height: 1.8; border: 1px solid #000; white-space: nowrap;}

.attention { margin: 0 0 2rem; padding: 2rem; color: #001b36; background: #ecf7fe;}
.attention li { margin: 0 0 1rem 2.6rem; list-style: disc;}
.attention li:last-child { margin-bottom: 0;}
.attention .kome { margin-left: 0; padding-left: 2.6rem; color: #F00; list-style: none;}
.attention .kome::before{ content: "※"; position: absolute; left: 0;}
.attention .borderB { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #013161;}

.attention.rose { background: url(/images/common/image-rose-bg.svg); border: 5px solid #ffe7e8;}
.attention.rose h3 {
	margin: 0 0 1rem;
	color: #EA3F4C;
	text-shadow: -1px -1px 4px #fff, -1px 0 4px #fff, -1px 1px 4px #fff,0 -1px 4px #fff,
	0 1px 4px #fff,1px -1px 4px #fff, 1px 0 4px #fff,1px 1px 4px #fff;
}
.attention.rose h3 img { position: relative; top: -0.2rem; margin: 0 1rem 0 0; width: 2.2rem; vertical-align: middle;}
.attention.rose p {
	font-size: 1.6rem;
	font-weight: bold;
	color: #EA3F4C;
	line-height: 1.6;
	text-align: center;
	text-shadow: -1px -1px 4px #fff, -1px 0 4px #fff, -1px 1px 4px #fff,0 -1px 4px #fff,
	0 1px 4px #fff,1px -1px 4px #fff, 1px 0 4px #fff,1px 1px 4px #fff;
}
.attention.rose p.long { text-align: left;}
.attention.rose a { color: #EA3F4C !important; text-decoration: none; border-bottom: 1px solid #EA3F4C; transition: none;}
a:has(.attention.rose) { text-decoration: none;}
@media (hover: hover) {
.attention.rose a:hover { border-bottom: none;}
a:has(.attention.rose):hover { opacity: .6;}
}

.formBody { margin: 0 0 4rem; padding: 2rem 0 0; font-size: 1.8rem; text-align: left; border-top: 1px solid #000; border-bottom: 1px solid #000;}
.formBody dt { position: relative; margin: 0 0 1rem; font-weight: bold; line-height: 1.4;}
.formBody dt::after,
.privacyCheck label::after {
	content: "任意";
	display: inline-block;
	position: relative;
	top: -2px;
	margin: 0 0 0 .8rem;
	padding: .5rem .8rem;
	right: 0;
	color: #555;
	font-size: 1.2rem;
	font-weight: normal;
	background: #DDD;
}
.formBody dt.required::after,
.privacyCheck label::after { content: "必須"; color: #FFF; background: #F00;}
.privacyCheck label::after { display: inline-block; position: relative; top: -.3rem; margin: 0 0 0 1rem;}
.formBody dd { position: relative; margin: 0 0 2rem; word-break: break-word;}
.formBody dd span { position: relative;}
.formBody .url { text-align: right;}
.formBody .url .btn { margin: 1rem 0 0;}
.formBody .zipNum input { max-width: 20rem;}
.formBody .addDetail span { display: block; margin: 1.5rem 0 1rem;}
.formBody .telNum input { max-width: 10rem;}
.cautionBefore {
	margin: 1.5rem 0 0;
	padding: 0 0 0 2.6rem;
	color: #F00;
	font-weight: bold;
	background: url(/images/common/icon-alert.svg) left center no-repeat;
	background-size: auto 2.2rem;
}
.cautionBefore.center { display: inline-block; width: auto;}
.formBody .cautionTip {
	position: absolute;
    bottom: 5rem;
    right: 0;
    padding: .8rem 1rem .5rem;
    max-width: 70%;
	color: #FFF;
	line-height: 1.2;
	text-align: center;
	background: #013161;
	border-radius: 4px;
	opacity: .8;
}
.formBody .cautionTip:before {
	content: "";
	position: absolute;
    bottom: -2.3rem;
    right: calc(50% - 1rem);
	border: 1rem solid transparent;
	border-top: 1.5rem solid #013161;
}
.formBody .cautionTip.red { background: #F00;}
.formBody .cautionTip.red:before { border-top-color: #F00;}

.upImg {
	display: block;
	position: relative;
	padding: 11rem 2rem 3rem;
	text-align: center;
	border: 2px dashed rgba(191, 205, 219, 0.8);
	transition: .3s;
}
.upImg::after {
	content: "";
	position: absolute;
	top: 2rem;
	left: calc(50% - 4rem);
	width: 8rem;
	height: 8rem;
	background: url("/images/common/icon-image.svg") center no-repeat;
	background-size: contain;
	opacity: .2;
}
.upImg input { display: none;}
.upImg .btn { margin: 1rem auto 0;}
.upImg .kome { display: block; margin: 2rem 0 0;}
@media (hover: hover) {
.upImg:hover { background: #f1f5f9;}
.upImg:hover .btn:after { top: 0.2rem; left: 0.2rem; width: calc(100% - 0.4rem); height: calc(100% - 0.4rem);}
.upImg:hover .btn .icon.plus { left: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg);}
}

.fileName { margin: 1rem 0 0;}
.fileName .btn { margin: 0 0 0 1rem;}

.btns { margin: 3rem 0 0;}
.btns .btn ~ .btn { margin: 0 0 0 2rem;}

.formBody dt.long { padding-right: 5rem;}
.formBody dt.long::after { display: block; position: absolute; top: calc(50% - 1.4rem);}
.formBody dd.choise { padding-bottom: 1rem; border-bottom: 1px solid #000;}
.formBody dd.choise:last-of-type { margin-bottom: 1rem; padding-bottom: 0; border: none;}
.formBody dd.choise label { margin: .5rem 2rem 1rem 0;}
.formBody input[type=date] { margin-right: 2rem; padding: 0 0.5rem 0 1rem;}
.formBody .time { margin: 0 1rem; width: 5rem;}
.formBody .kome2 { margin: 1rem 0 0; padding-left: 2.2rem; list-style: none;}
.formBody .kome2::before{ content: "※"; position: absolute; left: 0;}

.privacyText { margin: 0 0 3rem; padding: 2rem; height: 30rem; overflow: auto; background: #f1f5f9; border: 1px solid #000;}
.privacyText h4 { text-align: left;}
.privacyText p,
.privacyText li { margin: 0 0 2rem; line-height: 1.4;}

.formBody.conf dd { padding-bottom: 1rem; min-height: 4rem; line-height: 1.6; border-bottom: 1px solid #9fb1c3;}
.formBody.conf dd:last-of-type { padding-bottom: 0; min-height: 0; border: none;}

.compText { display: inline-block; margin: 3rem auto 3rem; line-height: 1.6;}

@media screen and (min-width:428px) {

#industryType .btn { justify-content: center;}
#industryType .btn .imageIcon + div { width: min(42rem, 100%);}

.memberPrice { padding: 2rem;}
}

@media screen and (min-width:767px) {

#industryType { display: flex; flex-wrap: wrap; margin: 3rem 0;}
#industryType li { margin: 0 2rem 0 0; width: calc(50% - 2rem);}
#industryType li:nth-child(2n) { margin: 0 0 0 2rem;}
#industryType li:nth-child(3),
#industryType li:nth-child(4) { margin-top: 6rem;}
#industryType .btn { margin: 0 !important; height: 100%;}

.bordered { padding: 0;}
.bordered a:not(.btn) { margin: 6rem 3rem 0;}
.bordered a:not(.btn) img { top: -0.1rem;}
}

@media screen and (min-width:1023px) {

/* common */
input[type="checkbox"],
input[type="radio"] { margin: 0 1rem 0 0;}


/* common */
#logo { padding: 3rem;}

footer { padding: 3rem 0;}
#copy { width: 100%; text-align: center;}

main.registerMem { padding-top: 0; min-height: calc(calc(100vh - 23.4rem));}
main.registerMem section { padding: 6rem 4rem;}
main.registerMem h1 { margin: 0 0 6rem; font-size: 3.2rem;}
main.registerMem h2 { margin: 0 0 3rem; font-size: 2.8rem;}
main.registerMem h2 + .right { margin: -7rem 0 2rem;}
main.registerMem .right:first-child { margin: 0 0 2rem;}

/* parts */
#registSteps { margin-bottom: 8rem;}
#registSteps li { padding: 0 4rem; min-width: 20rem; font-size: 1.8rem;}
#registSteps small { font-size: 1.6rem;}
#registSteps img { margin: 3rem auto 1rem; width: 5rem;}

.registExplain { text-align: center;}
.registExplain ~ h2 { margin: 6rem 0 !important;}

#industryType { margin: 0 0 6rem;}
#industryType .btn { padding: 4rem 7rem 4rem 3rem;}
#industryType .btn div { font-size: 2rem;}

.bordered { margin: 5rem 0 0; padding: 5rem 0 0;}
.bordered a:not(.btn) { margin: 5rem 3rem 0;}

.industryCheck { margin: -3rem 0 3rem;}
.typeDetail { margin: -3rem 0 6rem;}
.industryCheck ~ .typeDetail { margin: 0 0 6rem;}
.cardImg { margin: 0 4rem 0 0;}
.memberPrice { padding: 3rem;}

.attention { margin: 0 0 4rem; padding: 4rem;font-size: 2rem;}
.attention .borderB { margin-bottom: 2.5rem; padding-bottom: 2.5rem;}

.attention.rose { background-size: 20rem auto;}
.attention.rose h3 { margin: 0 0 2rem; font-size: 2.6rem;}
.attention.rose h3 img { width: 3.2rem;}
.attention.rose p { font-size: 2rem;}
.attention.rose p.long { text-align: center;}

.formBody { display: flex; flex-wrap: wrap; margin: 0 0 6rem; padding: 3rem 0;}
.formBody dt { margin: 0 3rem 4rem 0; width: 41rem; font-size: 2rem; line-height: 4rem;}
.formBody dd { margin: 0 0 4rem; width: calc(100% - 44rem);}
.formBody dt:last-of-type,
.formBody dd:last-of-type { margin-bottom: 0;}
.formBody dt::after { display: block; position: absolute; top: calc(50% - 1.4rem); padding: .5rem 1rem .3rem ; line-height: 1.3; font-size: 1.4rem;}
.formBody.doc dt::after { top: .5rem;}
.formBody.doc dt { width: 27rem; }
.formBody.doc dd {  width: calc(100% - 30rem);}
.formBody .url .btn,
.upImg .btn { margin: 2rem 0 0;}
.upImg { padding: 13rem 4rem 5rem;}
.upImg::after { top: 4rem;}
.upImg .kome { margin: 3rem 0 0;}
.fileName { margin: 2rem 0 0;}
.fileName .btn { margin: 0 0 0 2rem;}
.formBody dt::after,
.privacyCheck label::after { top: .7rem;}
.formBody .addDetail { display: flex; flex-wrap: wrap; align-items: center; margin: -1.5rem 0 3rem;}
.formBody .addDetail span { margin: 1.5rem 0; width: calc(100% - 20rem);}
.formBody .addDetail span.type { width: 20rem;}
.formBody dd.choise:last-of-type { margin: 0;}
.formBody dd.choise label { margin: 0 4rem 0 0;}
.formBody .cautionTip { right: auto; left: 0;}

.formBody.questionnaireNew dt { margin: 0 0 2rem; width: 100%; line-height: 1.4;}
.formBody.questionnaireNew dd { margin: 0 0 3rem; padding: 0 0 2rem; width: 100%; font-size: 2rem;}

.privacyText { margin: 0 0 6rem; padding: 6rem;}
.privacyText h3 { font-size: 2.4rem;}
.privacyText h4 { font-size: 2rem;}
.privacyText p,
.privacyText li { margin: 0 0 4rem;}
.privacyCheck { font-size: 2rem;}
.privacyCheck label::after { top: -.5rem; margin: 0 0 0 2rem;}

.btns { margin: 6rem 0 0;}
.btns .btn ~ .btn { margin: 0 0 0 6rem;}

.formBody.conf dt,
.formBody.conf dd { margin: 0 0 3rem !important; padding-left: 3rem; padding-bottom: 3rem; min-height: 6rem; line-height: 1.6; border-bottom: 1px solid #9fb1c3;}
.formBody.conf dt { margin-right: 0; padding: 0 3rem 0 0; width: 44rem; line-height: 1.4;}
.formBody.conf dt::after { top: .1rem;}
.formBody.conf dt:last-of-type,
.formBody.conf dd:last-of-type,
.formBody.conf ~ .formBody.questionnaireNew dd:last-of-type { margin-bottom: 0 !important; padding-bottom: 0; min-height: 0; border: none;}
.formBody.conf .addDetail span:first-child,
.formBody.conf .addDetail span:nth-child(2) { margin-top: 0;}
.formBody.conf .addDetail span:nth-child(5),
.formBody.conf .addDetail span:nth-child(6) { margin-bottom: 0;}
.formBody.conf ~ .formBody.questionnaireNew dd { padding-bottom: 3rem; border-bottom: 1px solid #9fb1c3;}

.compText { margin: 0 auto 6rem; font-size: 2rem; text-align: center;}
}

/*-------------------------------------
			CSS end
-------------------------------------*/