/* sp */
main, .page-ttl__container { background: none;}
.movetxt mark { background: none; color: var(--blue);}
.sp-bg {
    background-image: url('../img/sp/bg_sp-main.svg');
    background-size: 75.81vw auto;
    background-repeat: no-repeat;
    background-color: var(--bg);
}
.page-ttl--sp { margin-top: 32px;}
.page-ttl__sp-sub {
    color: var(--blue);
    font-size: 1.4rem;
    grid-column: 1 / 1;
    font-weight: 500;
    margin: 0 auto;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.page-ttl__sp-ttl {
    min-height: 184px;
    font-size: clamp(2.4rem, 2.5vw/*960*/, 2.6rem);
    font-family: var(--serif);
    line-height: 1.5;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.page-ttl__img--sp { position: relative;}
.page-ttl__img--sp div{
    position: absolute;
    bottom:-4px; right:8px;
    font-size: clamp(2.4rem, 2.5vw/*960*/, 4rem);
    color: var(--bg);
    opacity: .8;
}

.sp { margin-top: 64px;}
.sp__copy {
    grid-column: 1 / -1;
    font-size: clamp(1.8rem, 1.87566vw/*960*/, 2rem);
    font-family: var(--serif);
    text-align: center;
    line-height: 2;
    padding: 0 8px 100px 16px;
}
.sp__copy--faq { padding-bottom: 0;}

.staff__item,
.connected__item { padding: 0 16px 110px;}
.staff__item:nth-of-type(odd),
.connected__item:nth-of-type(odd) {background: url('../img/sp/bg_sp-double.svg') top right -16px / 100vw no-repeat; }
.staff__item:nth-of-type(even),
.connected__item:nth-of-type(even){background: url('../img/sp/bg_sp-triple.svg') top 8px right -16px / 110vw no-repeat;}

.staff__hl,
.connected__hl {
    grid-column: 1 / -1;
    background: url('../img/nav/bg_copy.svg') top left / 48px no-repeat;
    font-size: clamp(1.8rem, 1.87566vw/*960*/, 2rem);
    font-family: var(--serif);
    padding: 8px 0 0 24px;
}
.staff__photo {
    grid-column: 1 / span 8;
    border-top-right-radius: 16px;
    margin: 16px 0 16px -16px;
}
.staff__photo img {
    position: relative;
    width: 256px;
    aspect-ratio: 256 / 171;
    object-fit: cover;
    border-top-right-radius: 16px;
    filter: drop-shadow(1px 1px 0px rgba(214, 199, 195, .4));
}
.staff__name {
    position: absolute;
    left: 216px;
    bottom: -16px;
    color: var(--blue);
    font-size: clamp(1.6rem, 1.6666vw/*960*/, 2rem);
    font-weight: 500;
    line-height: calc(1em + 1px);
    display: grid;
    gap:8px;
    margin-block:var(--leading-trim);
    white-space: nowrap;
}
.staff__name span:first-of-type {
    font-size: clamp(1.4rem, 1.4583vw/*960*/, 1.6rem);
    line-height: 1.5;
}
.staff__name span:last-of-type {
    font-size: 1.4rem;
    line-height: calc(1em + 1px);
    color: var(--gray);
    padding-top: 2px;
}
.staff__txt {
    grid-column: 1 / -1;
    margin-top: 16px;
}

.connected__name {
    grid-column: 1 / -1;
    font-size: clamp(1.6rem, 1.6666vw/*960*/, 2rem);
    font-weight: 500;
    text-align: right;
    color: var(--blue);
    line-height: calc(1em + 1px);
    margin-top: 16px;
}
.connected__name span {
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: calc(1em + 1px);
    color: var(--gray);
    margin-top: 8px;
}
.connected__photo {
    grid-column: 1 / -1;
    border-top-right-radius: 16px;
    margin-bottom: 16px;
}
.connected__photo img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-top-right-radius: 16px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.connected__txt { grid-column: 1 / -1; }

.faq__ttl {
    font-size: 1.6rem!important;
    color: var(--blue);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  line-height: 1.75;
  background: var(--box-line);
  border-radius: 3px;
  cursor: pointer;
}
.faq__item summary::before {
  content:'Q';
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  font-size: 2rem;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: var(--pink01);
  border-radius: 50%;
}
.faq__item summary::-webkit-details-marker { display: none;}
.faq__item summary::after {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z' fill='%23e4007f'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  content: '';
  transition: transform .3s;
  opacity: .7;
  margin-left: auto;
  flex-shrink: 0;
}
.faq__item[open] summary::after {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11H19V13H5V11Z' fill='%23e4007f'%3E%3C/path%3E%3C/svg%3E");
}

.faq__item div {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 2;
  padding: 24px 0 32px 8px;
  margin: 0;
  transform: translateY(-10px);
  opacity: 0;
  transition: transform .5s ease, opacity .5s ease;
  @starting-style {
    transform: translateY(-10px);
    opacity: 0;
  }
}
.faq__item[open] div p { padding-top: 4px;}
.faq__item[open] div {
  transform: translateY(0);
  opacity: 1;
}
.faq__item[open] div::before {
  content: 'A';
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  color: var(--pink01);
  line-height: calc(1em + 1px);
}
@media (max-width: 599px){
.sp-bg { background-position: top -40px left -64px;}
.page-ttl__img--sp { margin: 16px -16px 0;}
.faq section { padding-left: 8px;}
.faq__item summary { gap:4px; padding: 36px 6px 12px 10px; margin-block: var(--leading-trim);}
.faq__item summary::before {
    position: absolute;
    top: 8px;
    width: 1em;
    }
}
@media (min-width:600px) {
.sp-bg { background-position: top -64px left -64px;}
.page-ttl--sp { margin-top: 0;}
.page-ttl__sp-sub { margin-top: 24px;}
.page-ttl__sp-ttl { margin-top: 24px; margin-right: auto;}
.page-ttl__sp-ttl br,
.sp__copy--staff br:first-of-type,.sp__copy--staff br:last-of-type,
.sp__copy--connected br:first-of-type,.sp__copy--connected br:last-of-type,
.sp__copy--faq br:first-of-type,.sp__copy--faq br:last-of-type{ display: none;}
.sp__copy {text-align: right;}
.staff__item:nth-of-type(even){ background-position: top 8px left -24px;}
.staff__hl,
.connected__hl {
    grid-area: 1 / 1 / 3 / 3;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    padding: 24px 0 0 24px;
    margin: 0 auto;
}
.staff__item:nth-of-type(odd),
.connected__item:nth-of-type(odd) {background-size: 53.44vw; background-position: top 8px right -24px;}
.staff__item:nth-of-type(even),
.connected__item:nth-of-type(even){background-size: 77.75vw; background-position: top right -24px;}
.staff__photo {
    grid-area: 1 / 3 / 2 / 9;
    margin: 48px 0 0;
}
.staff__txt { grid-area: 2 / 3 / 3 / 9;}
.connected__photo {
    grid-area: 1 / 3 / 2 / 8;
    margin: 48px 0 0;
}
.connected__name { grid-column: 3 / -1; text-align: left; margin-top: 8px;}
.connected__txt { grid-area: 4 / 3 / 3 / 9;}

.faq__item summary { gap:8px;}
.faq__item summary { padding: 16px;}
.faq__item div { padding: 16px 16px 32px;}
}

@media (min-width: 768px) {
.page-ttl__sp-sub { font-size: 1.6rem;}
.page-ttl__sp-ttl { grid-column: 2 / 2; margin-left: auto;}
.staff__item,
.connected__item {
    padding-left: 24px;
    padding-right: 24px;
}
.staff__hl {
    grid-area: 1 / 1 / 3 / 5;  
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.staff__item:nth-of-type(even) .staff__hl { grid-area: 1 / 3 / 3 / 5;  }
.staff__photo {
    grid-area: 1 / 4 / 2 / 13;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1;
    grid-column: 4 / 8;
}
.staff__item:nth-of-type(even) .staff__photo { grid-column: 5 / 9; }
.staff__photo img {
    width: 352px;
    aspect-ratio: 352 / 235;
}
.staff__txt { grid-area: 2 / 4 / 3 / 13;}
.staff__item:nth-of-type(even) .staff__txt { grid-column: 5 / 13;}
.connected__hl {
    grid-area: 1 / 1 / 4 / 5;  
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.connected__photo {
    grid-area: 1 / 4 / 2 / 13;
    grid-column: 4 / 9;
}
.connected__photo img { aspect-ratio: 16 / 9;}
.connected__name{grid-area: 2 / 4 / 3 / 13;}
.connected__txt { grid-area: 3 / 4 / 3 / 13;}
.faq__item div { padding: 32px 16px 16px;}
}
@media (min-width: 960px) {
.page-ttl__sp-sub,.page-ttl__sp-ttl { margin-top: 48px;}
.staff__hl,
.connected__hl { background-size: 64px; padding: 40px 0 0 32px;}
.staff__item:nth-of-type(odd),
.connected__item:nth-of-type(odd){ background-position: top 40px right -16px;}
.staff__photo,
.connected__photo { margin: 88px 0 0;}
.staff__name { left: 240px;}
}
@media (min-width: 1100px) {.staff__name { left: 284px;}}
@media (min-width: 1120px) {.staff__name { left: 304px;}}
@media (min-width: 1366px) {
    .sp-bg { background-size: 1036px;}
    .staff__item,.connected__item { padding: 0 0 136px;}
    .staff__item:nth-of-type(odd),
    .connected__item:nth-of-type(odd) { background-size: 729px;}
    .staff__item:nth-of-type(even),
    .connected__item:nth-of-type(even){ background-size: 1061px;}
}