/*
 * user.css
 *
 * Since:   2023-12-08
 * Update:  2025-12-26
 *
 */

.schedule-custom-field-container {
	display: grid;
	grid-template-columns: repeat(3, calc((100% - 30px) / 3));
    gap: 5px 15px;
	border: 1px solid #a5a5a5;
    border-radius: 0.25rem;
    margin: 30px 0 2px 0;
    padding: 10px 15px 15px;
}
.schedule-custom-field-container > .field > * {
	height: 100%;
}
.schedule-custom-field-container > .field .mt-draggable__content {
	display: flex;
	align-items: flex-end;
}
.schedule-custom-field-container > .field[id*=text-field] {
	grid-column: 1 / 4;
	grid-row: 3 / 4;
}
.schedule-custom-field-container > .field[id*=url-field] {
	grid-column: 1 / 4;
	grid-row: 4 / 5;
}
.schedule-custom-field-container__label {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    font-weight: bold;
    font-size: 14px;
}

.cf-opencampus-list-wrapper-class {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid #a5a5a5;
    border-radius: 0.25rem;
    margin: 30px 0 2px 0;
    padding: 10px 15px 15px;
}

.cf-opencampus-list-wrapper-class > .field {
    width: 48%;
}


/*-----------------------------------------
   オープンキャンパス　２１世紀アカデメイア案件
-----------------------------------------*/

.m-21bannar {
	width: 100%;
    max-width: 965px;
    display: block;
    margin: 5rem auto 0;
    border-radius: 10px;
    overflow: hidden;
}

/* ===== modal base ===== */
.m-21modal {
  width: min(900px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  margin: auto;
}
.m-21modal::backdrop { background: rgba(0,0,0,.6); }

.m-21modal__wrap {
  position: relative;
  background: #fff;
  max-height: min(84vh, 860px);
  display: flex;
  flex-direction: column;
}

.m-21modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0rem 5px 1px;
}

.m-21modal__body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.m-21modal__h { margin: 0 0 10px; text-align: center; }

.m-21modal picture,
.m-21modal img { display: block; width: 100%; height: auto; }

.m-21modal__block_txt02 { 
	background-color: #F6F4E7;
    padding: 12px 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.m-21modal__block_img01 {
	padding: 35px 10% 10px;
}

.m-21modal__block--mt { 
	padding: 12px 10%;
    margin-top: 170px;
    background: #314895;
}
.m-21modal__block--mt picture {
	position: relative;
    top: -85px;
}

.m-21modal__block_img03 {
	background: #F6F4E7;
    padding: 30px 10%;
}

/* ===== questions layout ===== */

.m-q {
  margin-top: 12px;
  display: flex;
  align-items: center;
  padding: 18px;
  gap: 14px;
}

/* 背景（元LPの雰囲気に近い） */
.m-q--q1 { background: rgba(235, 97, 0, 0.2); }
.m-q--q2 { background: rgba(217, 27, 94, 0.2); }
.m-q--q3 { background: rgba(18, 123, 85, 0.2); }
.m-q--q4 { background: rgba(0, 122, 177, 0.2); }
.m-q--q5 { background: rgba(19, 79, 126, 0.2); }
.m-q--q6 { background: rgba(126, 49, 142, 0.2); }
.m-q--q7 { background: rgba(106, 57, 6, 0.2); }
.m-q--q8 { background: rgba(19, 79, 126, 0.2); }
.m-q--q9 { background: rgba(126, 49, 142, 0.2); }
.m-q--q10 { background: rgba(18, 123, 85, 0.2); }
.m-q--q11 { background: rgba(235, 97, 0, 0.2); }
.m-q--q12 { background: rgba(217, 27, 94, 0.2); }

.m-q__img {
	flex: 1 1 auto;
    border-left: 1px solid;
    border-right: 1px solid;
    padding: 20px;
}

.m-q--q1 .m-q__img { border-color: rgb(235, 97, 0); }
.m-q--q2 .m-q__img { border-color: rgb(217, 27, 94); }
.m-q--q3 .m-q__img { border-color: rgb(18, 123, 85); }
.m-q--q4 .m-q__img { border-color: rgb(0, 122, 177); }
.m-q--q5 .m-q__img { border-color: rgb(19, 79, 126); }
.m-q--q6 .m-q__img { border-color: rgb(126, 49, 142); }
.m-q--q7 .m-q__img { border-color: rgb(106, 57, 6); }
.m-q--q8 .m-q__img { border-color: rgb(19, 79, 126); }
.m-q--q9 .m-q__img { border-color: rgb(126, 49, 142); }
.m-q--q10 .m-q__img { border-color: rgb(18, 123, 85); }
.m-q--q11 .m-q__img { border-color: rgb(235, 97, 0); }
.m-q--q12 .m-q__img { border-color: rgb(217, 27, 94); }



.m-q__no { flex: 0 0 100px; }
.m-q__img { flex: 1 1 auto; border-left: 1px solid #000; padding-left: 14px; }
.m-q__answer { border: none; }



/* ===== 21modal：PC時の区切り線（ラジオボタン周り） ===== */
@media screen and (min-width: 768px){

  .m-21modal__form .m-q{
    display: flex;
    align-items: center;
    padding: 26px;
    margin: 12px 5%;
  }

}
/* ===== 21modal：区切り線カラー（PC/SP共通） ===== */
:root{
  --m21-sep: #f1ead2; /* 背景(#fffcf0)より少し濃い生成り：必要なら微調整OK */
}

.m-radio { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.m-radio input { transform: scale(1.1); }

/* 視覚的に隠す（legend用） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ===== CTA ===== */
.m-21modal__cta {
  background: #fff;
  padding: 12px 15% 16px;
  border-top: 1px solid rgba(0,0,0,.1);
}
.m-21modal__cta a { display: block; }
.m-21modal__cta img { display:block; width:100%; height:auto; }

/* ===== SP ===== */
@media screen and (max-width: 767px) {
.m-21bannar { margin: 2rem auto 0; border-radius: 5px; }
	.m-21modal { width: calc(100% - 20px); border-radius: 10px; }
	.m-21modal img { margin: 0!important; }
	.m-21modal__wrap { max-height: 78vh; }
	.m-21modal__block_txt02 { padding: 12px 30%; }
	.m-21modal__block_img01 { padding: 0 2%; }
	.m-q { margin: 10px; padding: 10px 10px 10px 0; gap: 1px; }
	.m-q__no { display: none; }
	.m-q__img { padding-left: 0; padding: 0 15px; border-left: 0; }
	.m-radio input { transform: scale(1.2,1); }
	.m-radio { font-size: 13px; white-space: nowrap; transform: scale(0.8, 1); font-weight: bold; }
	.m-21modal__block--mt { margin-top: 32px; padding: 0 5%; }
	.m-21modal__block--mt picture { top: -20px; }
	.m-21modal__block_img03 { padding: 0 0 30px; }
	.m-21modal__cta { padding: 12px 8% 16px; }
}

/* banner button */
.oc-banner-btn { padding:0; border:0; background:transparent; cursor:pointer; display:block; }
.oc-banner-btn img { display:block; width:100%; height:auto; }