@charset "UTF-8";
/* ========================================================================

  study24

======================================================================== */
.sp-only { display:none; }
/* ============ smart phone ============ */
@media (max-width:750px){
.sp-only { display:initial; }
}
/************************************************************************
  main
************************************************************************/
main * { font-weight:500; font-family:var(--noto-sans); }
main p:last-of-type { margin-bottom:0 !important; }
/* ============ smart phone ============ */
@media (max-width:750px){
main { overflow:hidden; }
}
/************************************************************************
  .container
************************************************************************/
/* ============ smart phone ============ */
@media (max-width:750px){
.container { padding-right:calc(25/390*100vw); padding-left:calc(25/390*100vw); }
}
/************************************************************************
  .fv
************************************************************************/
.fv { margin:auto auto 74px; padding:0; width:100%; /*height:min(calc(694/1920*100vw), 694px);*/ height:calc(694/1920*100vw); background:url('img/fv-image_pc.jpg') no-repeat; background-size:auto 100%; aspect-ratio:initial; top:74px; }
.fv-content { padding:0; aspect-ratio:initial; font-size:0; display:block; max-inline-size:initial; }
.fv-content::before { display:none; }
.fv-title { margin:auto; /*width:min(calc(1626.5/1920*100vw), 1626.5px);*/ width:calc(1626.5/1920*100vw); display:block; aspect-ratio:initial; font-size:0; position:relative; top:min(calc(140/1920*100vw),140px); }
/* ============ smart phone ============ */
@media (max-width:750px){
.fv { margin-bottom:0; height:calc(325/390*100vw); background-image:url('img/fv-image_sp.jpg'); top:0; }
.fv-title { width:calc(362.5/390*100vw); top:calc(65/390*100vw); }
}
/************************************************************************
  .intro
************************************************************************/
.intro { margin:auto; padding:min(calc(100/1920*100vw), 100px); width:min(calc(950/1920*100vw), 950px); }
.intro .container { padding:0; }
.intro p.txt { color:#1875BC; font-size:min(calc(20/1920*100vw), 20px); }
/* ============ smart phone ============ */
@media (max-width:750px){
.intro { margin:auto; padding:calc(30/390*100vw) 0 calc(50/390*100vw); width:calc(350/390*100vw); }
.intro p.txt { font-size:calc(16/390*100vw); }
}
/************************************************************************
  .bg1
************************************************************************/
.bg1 { background:url('img/bg1.svg') no-repeat; background-size:100% auto; }
/* ============ smart phone ============ */
@media (max-width:750px){
.bg1 { background-image:url('img/bg1_sp.svg'); }
}
/************************************************************************
  .bg2
************************************************************************/
.bg2 { /*height:min(calc(5903/1920*100vw), 5903px);*/ background:url('img/bg2.svg') no-repeat; background-size:100% auto; }
/* ============ smart phone ============ */
@media (max-width:750px){
.bg2 { height:auto; background-image:none; }
}
/************************************************************************
  .illust
************************************************************************/
.illust { margin:auto; font-size:0; }
.illust img { max-width:100%; }
#illust-001 { width:min(calc(195/1920*100vw), 195px); }
/* ============ smart phone ============ */
@media (max-width:750px){
#illust-001 { width:calc(195/390*100vw); }
}
/************************************************************************
  .photo
************************************************************************/
.photo { margin:auto; font-size:0; }
.photo img { max-width:100%; }
#photo-001 { margin:auto; padding:min(calc(110/1920*100vw), 110px) 0; width:min(calc(1663/1920*100vw), 1663px); position:relative; left:max(calc(-151.5/1920*100vw), -151.5px); }
#photo-003 { width:min(calc(454/1920*100vw), 454px); }
#photo-007 { width:min(calc(210/1920*100vw), 210px); }
/* ============ smart phone ============ */
@media (max-width:750px){
#photo-001 { margin:auto; padding:calc(60/390*100vw) 0 0; width:100%; left:auto; }
#photo-003 { width:calc(276.35/390*100vw); }
#photo-007 { width:calc(168/390*100vw); }
}
/************************************************************************
  .seminar
************************************************************************/
.seminar { padding-bottom:0; }
.seminar .container { width:min(calc(1360/1920*100vw), 1360px); max-width:initial; }
.seminar .seminar-title h2 { font-weight:700; }
.seminar .seminar-title h2 span { font-weight:700; }
.seminar .seminar-title span { background-color:#3B3B3B; }
/* .seminar-contents ====== */
.seminar .seminar-contents { padding:min(calc(25/1920*100vw), 25px) min(calc(30/1920*100vw), 30px); width:min(calc(620/1920*100vw), 620px); max-width:initial; background-color:#F0F7FC; border-top:1px solid #707070; border-bottom:1px solid #707070; border-radius:0; display:flex; justify-content:space-between; align-items:center; }
.seminar .seminar-contents ul { margin:0; width:min(calc(350/1920*100vw), 350px); }
.seminar .seminar-contents li { margin-bottom:0.8em; margin-left:0; text-indent:initial; position:relative; display:flex; align-items:center; }
.seminar .seminar-contents li::before { content:''; width:min(calc(22/1920*100vw), 22px); height:min(calc(22/1920*100vw), 22px); border-radius:min(calc(5/1920*100vw), 5px);  display:inline-block; }
.seminar .seminar-contents li:nth-child(2n-1)::before { background-color:#379AE6; }.seminar .seminar-contents li:nth-child(2n)::before { background-color:#FEB202; }
.seminar .seminar-contents li::after { content:''; margin:auto; width:min(calc(12.99/1920*100vw), 12.99px); height:min(calc(9.73/1920*100vw), 9.73px); background:url('img/icon_arrow.svg') no-repeat; background-size:100%; display:inline-block; position:absolute; top:0; bottom:0; left:min(calc(5/1920*100vw), 5px); z-index:1; }
.seminar .seminar-contents li a { padding-left:0.2em; }
.seminar .seminar-contents ul { order:2; }
.seminar .seminar-contents p.illust { order:1; margin:0; }
/* .seminar-profile ====== */
.seminar-profile { margin-bottom:min(calc(110/1920*100vw), 110px); display:block; }
.seminar-profile-text { width:auto; }
.seminar-profile-text > p { border-bottom:1px solid #707070; }
.seminar-profile-text > h3 { padding:0.4em 1em; background-color:#3B3B3B; font-weight:700; }
/* .seminar-intro ====== */
/*.seminar-intro { margin-bottom:calc(95/390*100vw); }*/
.seminar-intro h3 { font-weight:700; }
.seminar-intro p { font-weight:400; }
/* ============ smart phone ============ */
@media (max-width:750px){
.seminar { margin-bottom:calc(-40/390*100vw); padding-bottom:calc(120/390*100vw); }
.seminar .container { padding:0; width:100%; }
.seminar .seminar-title h2 { font-size:calc(24/390*100vw); }
.seminar .seminar-title span { font-size:calc(20/390*100vw); }
/* .seminar-contents ====== */
.seminar .seminar-contents { margin:0 0 calc(45/390*100vw); padding:calc(25/390*100vw) calc(20/390*100vw); width:auto; flex-direction:column; }
.seminar .seminar-contents p.illust { margin-bottom:calc(25/390*100vw) !important; }
.seminar .seminar-contents ul { width:auto; }
.seminar .seminar-contents li { font-size:calc(18/390*100vw); }
.seminar .seminar-contents li::before { width:calc(22/390*100vw); height:calc(22/390*100vw); border-radius:calc(5/390*100vw); }
.seminar .seminar-contents li::after { width:calc(13/390*100vw); height:calc(10/390*100vw); left:calc(5/390*100vw); }
.seminar .seminar-contents li:last-child { margin-bottom:0; }
/* .seminar-profile ====== */
.seminar-profile { margin:auto calc(20/390*100vw); }
.seminar-profile-text > h3 { font-size:calc(20/390*100vw); }
.seminar-profile-text > p { padding:0 0 calc(15/390*100vw); font-size:calc(16/390*100vw); }
/* .seminar-intro ====== */
.seminar-intro { margin-top:calc(25/390*100vw); margin-bottom:calc(95/390*100vw); }
.seminar-intro h3 { text-align:left; font-size:calc(24/390*100vw); font-feature-settings:'palt'; }
.seminar-intro p { font-size:calc(16/390*100vw); }
}
/************************************************************************
  #overview
************************************************************************/
#overview { margin:auto; width:min(calc(930/1920*100vw), 930px); }
/* ============ smart phone ============ */
@media (max-width:750px){
#overview { width:auto; }
}
/************************************************************************
  #keyword
************************************************************************/
#keyword { margin:auto; padding:min(calc(50/1920*100vw), 50px) min(calc(80/1920*100vw), 80px); width:min(calc(1360/1920*100vw), 1360px); background:url('img/bg_keyword.svg') no-repeat #F0F7FC center top; background-size:cover; border-radius:min(calc(40/1920*100vw), 40px); }
#keyword h3.seminar-keyword-title { margin-bottom:min(calc(60/1920*100vw), 60px); padding:0; font-weight:700; font-size:min(calc(20/1920*100vw), 20px); gap:initial; justify-content:flex-start; align-items:flex-start; max-inline-size:initial; position:relative; }
#keyword h3.seminar-keyword-title::after { content:''; margin:auto; width:min(calc(197/1920*100vw), 197px); height:min(calc(137/1920*100vw), 137px); background:url('img/illust_005.png') no-repeat; background-size:100% auto; display:inline-block; position:absolute; right:0;  }
#keyword h3.seminar-keyword-title span { margin-top:min(calc(5/1920*100vw), 5px); font-weight:700; font-size:min(calc(40/1920*100vw), 40px); }
/* .seminar-keyword-item */
#keyword .seminar-keyword-item { margin-right:auto; margin-left:auto; padding:min(calc(45/1920*100vw), 45px) min(calc(40/1920*100vw), 40px); width:min(calc(1200/1920*100vw), 1200px); background-color:#ffffff; border:1px solid #898989; border-radius:min(calc(15/1920*100vw), 15px); }
#keyword .seminar-keyword-item h4 { font-weight:700; font-size:min(calc(36/1920*100vw), 36px); gap:initial; }
#keyword .seminar-keyword-item h4 span { padding-right:0.5em; font-weight:700; font-size:min(calc(40/1920*100vw), 40px); }
#keyword .seminar-keyword-item:nth-child(2n-1) h4 span { color:#32A6FD; }
#keyword .seminar-keyword-item:nth-child(2n) h4 span { color:#FCCD61; }
#keyword .seminar-keyword-item p { margin-right:auto; margin-left:auto; width:min(calc(930/1920*100vw), 930px); font-size:min(calc(16/1920*100vw), 16px); }
/* .seminar-keyword-content */
#keyword .seminar-keyword-content { padding:0; background-color:transparent; }
#keyword .seminar-keyword-content:last-of-type { margin-bottom:0; }
/* ============ smart phone ============ */
@media (max-width:750px){
#keyword { padding:calc(40/390*100vw) calc(15/390*100vw) calc(35/390*100vw); width:calc(350/390*100vw); background-image:url('img/bg_keyword_sp.svg'); background-position:center; background-size:cover; border-radius:calc(30/390*100vw); }
#keyword h3.seminar-keyword-title { margin-bottom:min(calc(60/1920*100vw), 60px); font-size:calc(16/390*100vw); }
#keyword h3.seminar-keyword-title::after { margin:auto; width:calc(100/390*100vw); height:calc(69/390*100vw); top:calc(-85/390*100vw); right:0; left:0; }
#keyword h3.seminar-keyword-title span { margin-top:calc(5/390*100vw); font-size:calc(24/390*100vw); }
/* .seminar-keyword-item */
#keyword .seminar-keyword-item { margin-bottom:calc(40/390*100vw); padding:calc(20/390*100vw) calc(15/390*100vw); width:calc(320/390*100vw); border-radius:calc(15/390*100vw); }
#keyword .seminar-keyword-item:last-child { margin-bottom:0; }
#keyword .seminar-keyword-item h4 { margin-bottom:1em; line-height:calc(28/22); font-size:calc(22/390*100vw); align-items:flex-start; }
#keyword .seminar-keyword-item h4 span { font-size:calc(28/390*100vw); }
#keyword .seminar-keyword-item p { font-weight:400; width:auto; line-height:calc(27/15); font-size:calc(14/390*100vw); }
}
/************************************************************************
  #chat-room
************************************************************************/
#chat-room { margin-bottom:min(calc(200/1920*100vw), 200px); }
#chat-room .container { width:min(calc(1360/1920*100vw), 1360px); max-width:initial; }
#chat-room h3 { margin:auto auto min(calc(60/1920*100vw), 60px); width:min(calc(259/1920*100vw), 259px); }
#chat-room h3 + p { margin-bottom:min(calc(80/1920*100vw), 80px) !important; }
/* .chat-room ====== */
.chat-room { margin:auto; width:min(calc(1360/1920*100vw), 1360px); border-radius:min(calc(40/1920*100vw), 40px); background-color:#C7DFEF; overflow:hidden; }
/* .chat-title */
.chat-title { padding:min(calc(40/1920*100vw), 40px) 0 min(calc(35/1920*100vw), 35px); background-color:#263147; color:#ffffff; text-align:center; font-size:min(calc(36/1920*100vw), 36px); line-height:1; position:relative; }
.chat-title strong { font-weight:700; }
.chat-title::before { content:''; margin:auto; width:min(calc(30/1920*100vw), 30px); height:min(calc(30/1920*100vw), 30px); border-top:solid 3px #ffffff; border-right:solid 3px #ffffff; display:block; position:absolute; top:0; bottom:0; left:min(calc(80/1920*100vw), 80px); transform:rotate(-135deg); }
.chat-title::after { content:''; margin:auto; width:min(calc(30/1920*100vw), 30px); height:min(calc(30/1920*100vw), 30px); border-top:solid 3px #ffffff; border-right:solid 3px #ffffff; display:block; position:absolute; top:0; bottom:0; right:min(calc(80/1920*100vw), 80px); transform:rotate(135deg); }
.chat-title strong { line-height:1; display:flex; justify-content:center; align-items:center; }
.chat-title strong::after { content:''; margin-left:min(calc(100/1920*100vw), 100px); width:min(calc(52/1920*100vw), 52px); height:min(calc(52/1920*100vw), 52px); background:url('img/icon_tel.svg') no-repeat; background-size:100% auto; display:inline-block; vertical-align:middle; } 
/* .chat-contents */
.chat-contents { padding:min(calc(75/1920*100vw), 75px) min(calc(80/1920*100vw), 80px); background-color:#C7DFEF; background:url('img/bg_chat_room.svg') no-repeat bottom center; background-size:100% auto; position:relative; }
/* .talk */
.chat-contents .talk { margin-bottom:min(calc(75/1920*100vw), 75px); width:min(calc(690/1920*100vw), 690px); display:flex; align-items:flex-start; }
.chat-contents .talk:last-of-type { margin-bottom:0; }
.chat-contents .talk .fukidashi { order:2; margin-left:min(calc(35/1920*100vw), 35px);  padding:min(calc(35/1920*100vw), 35px); width:min(calc(500/1920*100vw), 500px); background-color:#ffffff; border-radius:min(calc(30/1920*100vw), 30px); font-size:min(calc(28/1920*100vw), 28px); position:relative; font-feature-settings:'halt'; }
.chat-contents .talk .fukidashi::after { content:""; width:min(calc(40/1920*100vw), 40px); height:min(calc(50/1920*100vw), 50px); border-radius:0 0 20px 8px/0 20px 20px 3px; box-shadow:-3px -20px 0px -6px #ffffff inset; position:absolute; top:0; left:-20px; transform:scale(-1, 1); }
.chat-contents .talk .user { order:1; width:min(calc(154/1920*100vw), 154px); text-align:center; }
.chat-contents .talk .user .icon { width:100%; }
.chat-contents .talk .user .name { color:#555555; font-size:min(calc(20/1920*100vw), 20px); }
/* .photo */
.chat-contents .photo { margin-left:min(calc(189/1920*100vw), 189px); margin-bottom:min(calc(75/1920*100vw), 75px); width:min(calc(500/1920*100vw), 500px); }
.chat-contents .photo:last-of-type { margin-bottom:0; }
/* .user-A */
.chat-contents .talk.user-A { margin-right:0; margin-left:auto; }
.chat-contents .talk.user-A .fukidashi { order:1; margin-right:min(calc(35/1920*100vw), 35px); background-color:#8AFAA4; }
.chat-contents .talk.user-A .fukidashi::after { box-shadow:-3px -20px 0px -6px #8AFAA4 inset; left:auto; right:-20px; transform:scale(1, 1); }
.chat-contents .talk.user-A .user { order:2; }
/* .btn-scroll */
.chat-contents .btn-scroll { position:absolute; top:min(calc(335/1920*100vw), 335px); right:min(calc(60/1920*100vw), 60px); }
/* ============ smart phone ============ */
@media (max-width:750px){
#chat-room { margin-bottom:calc(100/390*100vw); }
#chat-room .container { padding-right:calc(15/750*100vw); padding-left:calc(15/750*100vw); width:auto; }
#chat-room h3 { margin-bottom:calc(20/390*100vw); width:calc(176/390*100vw); }
#chat-room h3 + p { text-align:center; font-size:calc(14/390*100vw); }
/* .chat-room */
.chat-room { width:calc(350/390*100vw); border-radius:calc(10/390*100vw); }
/* .chat-title */
.chat-title { padding:min(calc(40/1920*100vw), 40px) 0 min(calc(35/1920*100vw), 35px); font-weight:400; font-size:calc(16/390*100vw); }
.chat-title::before { width:calc(12/390*100vw); height:calc(12/390*100vw); border-top-width:calc(2/390*100vw); border-right-width:calc(2/390*100vw); }
.chat-title::after { width:calc(12/390*100vw); height:calc(12/390*100vw); border-top-width:calc(2/390*100vw); border-right-width:calc(2/390*100vw); }
.chat-title strong { line-height:1.4; font-weight:400; }
.chat-title strong::after { margin-left:0; width:calc(14.37/390*100vw); height:calc(14.39/390*100vw); position:relative; right:calc(-25/390*100vw); }
/* .chat-contents */
.chat-contents { padding:calc(25/390*100vw) calc(15/390*100vw); background-image:url('img/bg_chat_room_sp.svg'); background-size:cover; }
/* .talk */
.chat-contents .talk { margin-bottom:calc(20/390*100vw); width:calc(295/390*100vw); display:flex; align-items:flex-start; }
.chat-contents .talk:last-of-type { margin-bottom:0; }
/* .fukidashi */
.chat-contents .talk .fukidashi { margin-left:calc(15/390*100vw); padding:calc(5/390*100vw) calc(10/390*100vw); width:calc(215/390*100vw); border-radius:calc(10/390*100vw); font-weight:400; font-size:calc(13/390*100vw); }
.chat-contents .talk .fukidashi:after { width:calc(20/390*100vw); height:calc(30/390*100vw); left:calc(-10/390*100vw); box-shadow:calc(-4/390*100vw) calc(-15/390*100vw) 0 calc(-8/390*100vw) #ffffff inset; }
/* .user */
.chat-contents .talk .user { width:calc(60/390*100vw); }
.chat-contents .talk .user .name { color:#000000; white-space:nowrap; font-weight:400; font-size:calc(12/390*100vw); }
/* .photo */
.chat-contents .photo { margin-left:0; margin-bottom:calc(20/390*100vw); width:calc(276.35/390*100vw); }
/* .user-A */
.chat-contents .talk.user-A .fukidashi { margin-right:calc(15/390*100vw); }
.chat-contents .talk.user-A .fukidashi::after { box-shadow:calc(-4/390*100vw) calc(-15/390*100vw) 0 calc(-8/390*100vw) #8AFAA4 inset; right:calc(-10/390*100vw); }
/* .btn-scroll */
.chat-contents .btn-scroll { width:calc(34.42/390*100vw); height:calc(34.42/390*100vw); top:calc(450/390*100vw); right:calc(15/390*100vw); }
}
/************************************************************************
  #recommended
************************************************************************/
#recommended { margin-bottom:min(calc(140/1920*100vw), 140px); padding:0 0 min(calc(450/1920*100vw), 450px); background:url('img/bg_recommended.svg') no-repeat #379AE6; background-size:100% auto; position:relative; top:min(calc(140/1920*100vw), 140px); }
#recommended::before { content:''; margin:auto; width:100%; height:min(calc(140/1920*100vw), 140px); background:url('img/bg_recommended_b.svg') no-repeat; background-size:100% auto; display:block; position:relative; top:max(calc(-140/1920*100vw), -140px); }
#recommended .container { margin-bottom:max(calc(-140/1920*100vw), -140px); padding:min(calc(45/1920*100vw), 45px) 0 0; width:min(calc(1360/1920*100vw), 1360px); max-width:initial; position:relative; top:max(calc(-140/1920*100vw), -140px); }
#recommended h3 { margin-bottom:1em; color:#ffffff; text-align:center; line-height:1; font-weight:700; font-size:min(calc(36/1920*100vw), 36px); position:relative; }
#recommended h3::before { content:''; margin:auto; width:min(calc(193.027/1920*100vw), 193.027px); height:min(calc(195.178/1920*100vw), 195.178px); background:url('img/illust_002.svg') no-repeat; background-size:100% auto; display:block; position:absolute; top:max(calc((-195.178 - 40)/1920*100vw), calc(-195.178px - 40px)); right:0; left:0; }
/* .lead */
#recommended .lead { margin:auto; width:min(calc(770/1920*100vw), 770px); position:relative; }
#recommended .lead::before,
#recommended .lead::after { content:''; margin:auto; background-repeat:no-repeat; background-size:100% auto; position:absolute; }
#recommended .lead::before { width:min(calc(193.027/1920*100vw), 193.027px); height:min(calc(195.178/1920*100vw), 195.178px); background-image:url('img/illust_003.svg'); top:max(calc(-80/1920*100vw), -80px); left:max(calc((-193.027 - 40)/1920*100vw), calc(-193.027px - 40px)); }
#recommended .lead::after { width:min(calc(193.027/1920*100vw), 193.027px); height:min(calc(195.178/1920*100vw), 195.178px); background-image:url('img/illust_004.svg'); top:0; bottom:0; right:max(calc((-193.027 - 40)/1920*100vw), calc(-193.027px - 40px)); }
#recommended .lead h4 { margin-bottom:1em; padding:0.8em 0; height:min(calc(86/1920*100vw), 86px); background-color:#ffffff; border-radius:min(calc(86/1920*100vw), 15px); text-align:center; line-height:1; font-weight:700; font-size:min(calc(36/1920*100vw), 36px); position:relative; overflow:hidden; }
#recommended .lead h4::before, 
#recommended .lead h4::after { content:''; background-repeat:no-repeat; background-size:auto 100%; display:inline-block; position:absolute; top:0; bottom:0; }
#recommended .lead h4::before { width:min(calc(90/1920*100vw), 90px); height:min(calc(86/1920*100vw), 86px); background-image:url('img/h4_recommended_b.svg'); left:0; }
#recommended .lead h4::after { width:min(calc(90/1920*100vw), 90px); height:min(calc(86/1920*100vw), 86px); background-image:url('img/h4_recommended_a.svg'); right:0; }
#recommended .lead p.txt { color:#ffffff; font-size:min(calc(18/1920*100vw), 18px); }
/* .gallery */
#recommended ul.gallery { margin:auto; padding:min(calc(60/1920*100vw), 60px) 0; width:100%; list-style:none; display:flex; justify-content:space-between; position:relative; }
#recommended ul.gallery li { margin:0; padding:0; font-size:0; }
#recommended ul.gallery li img { width:min(calc(384/1920*100vw), 384px); }
#recommended ul.gallery li p.attention { margin:auto; position:absolute; white-space:nowrap; }
#recommended ul.gallery li:nth-of-type(1) p.attention { width:100%; text-align:center; top:min(calc((370 + 60)/1920*100vw), calc(370px + 60px)); }
#recommended ul.gallery li:nth-of-type(2) p.attention { top:min(calc((510 + 60)/1920*100vw), calc(510px + 60px)); left:0; }
#recommended ul.gallery li:nth-of-type(3) p.attention { top:min(calc((550 + 60)/1920*100vw), calc(510px + 60px)); right:0; }
/* .attention */
#recommended .attention span { color:#ffffff; font-size:min(calc(28/1920*100vw), 28px); position:relative; display:inline-block; }
#recommended .attention span::before,
#recommended .attention span::after { content:''; margin:auto; width:min(calc(2/1920*100vw), 2px); height:min(calc(43/1920*100vw), 43px); background-color:#ffffff; display:block; position:absolute; top:0; bottom:0; }
#recommended .attention span::before { transform:rotate(-30deg); left:max(calc(-20/1920*100vw), -20px); }
#recommended .attention span::after { transform:rotate(30deg); right:max(calc(-20/1920*100vw), -20px); }
/*
#recommended .attention:nth-of-type(1) { text-align:center; }
#recommended .attention:nth-of-type(2) { text-align:left; }
#recommended .attention:nth-of-type(3) { text-align:right; }
*/
/* ============ smart phone ============ */
@media (max-width:750px){
#recommended { margin-bottom:calc(71/390*100vw); padding-bottom:calc(40/390*100vw); background-image:url('img/bg_recommended_sp.svg'); top:calc(71/390*100vw); }
#recommended::before { height:calc(71/390*100vw); background-image:url('img/bg_recommended_b_sp.svg'); top:calc(-70/390*100vw); }
#recommended .container { margin-bottom:calc(-71/390*100vw); padding:calc(25/390*100vw) 0 0; width:auto; top:calc(-70/390*100vw); }
#recommended h3 { font-size:calc(20/390*100vw); }
#recommended h3::before { width:calc(101/390*100vw); height:calc(102/390*100vw); top:calc(-140/390*100vw); }
/* .lead */
#recommended .lead { margin-bottom:calc(30/390*100vw); width:calc(350/390*100vw); }
#recommended .lead::before { width:calc(101.79/390*100vw); height:calc(102.93/390*100vw); top:calc(-150/390*100vw); left:0; }
#recommended .lead::after { width:calc(101.79/390*100vw); height:calc(102.93/390*100vw); top:calc(-150/390*100vw); bottom:auto; right:0; }
#recommended .lead h4 { height:calc(40/390*100vw); font-size:calc(16/390*100vw); }
#recommended .lead h4::before { width:calc(40.77/390*100vw); height:calc(40/390*100vw); }
#recommended .lead h4::after { width:calc(44.94/390*100vw); height:calc(40/390*100vw); }
#recommended .lead p.txt { line-height:calc(27/15); font-weight:400; font-size:calc(16/390*100vw); }
/* .gallery */
#recommended ul.gallery { padding:0; flex-direction:column; }
#recommended ul.gallery li { margin:auto auto calc(35/390*100vw); width:calc(323/390*100vw); text-align:center; }
#recommended ul.gallery li:last-child { margin-bottom:0; }
#recommended ul.gallery li img { margin:auto; width:100%; }
#recommended ul.gallery li p.photo { margin-bottom:calc(30/390*100vw); }
#recommended ul.gallery li p.attention { position:static; }
/* .attention */
#recommended .attention span { font-weight:500; font-size:calc(14/390*100vw); }
#recommended .attention span::before,
#recommended .attention span::after { width:calc(2/390*100vw); height:calc(28.75/390*100vw); }
#recommended .attention span::before { left:calc(-15/390*100vw); }
#recommended .attention span::after { right:calc(-15/390*100vw); }

#recommended ul.gallery li:nth-of-type(1) p.attention { margin-left:calc(25/390*100vw); text-align:left; }
#recommended ul.gallery li:nth-of-type(2) p.attention { margin-right:calc(25/390*100vw); text-align:right; }
#recommended ul.gallery li:nth-of-type(3) p.attention { margin-left:calc(25/390*100vw); text-align:left; }
}
/************************************************************************
  #next-episode
************************************************************************/
#next-episode { padding:min(calc(160/1920*100vw), 160px) 0 0; text-align:center; }
#next-episode h3 { margin-bottom:min(calc(25/1920*100vw), 25px); font-size:min(calc(24/1920*100vw), 24px); position:relative; }
#next-episode h3 span { letter-spacing:0.4em; font-size:min(calc(40/1920*100vw), 40px); display:inline-block; position:relative; }
#next-episode h3 span::before,
#next-episode h3 span::after { content:''; margin:auto; width:min(calc(36.42/1920*100vw), 36.42px); height:min(calc(57.98/1920*100vw), 57.98px); background-repeat:no-repeat; background-size:100% auto; display:block; position:absolute; top:min(calc(10/1920*100vw), 10px); bottom:0; }
#next-episode h3 span::before { /*transform:rotate(-30deg);*/background-image:url('img/h3_next_episode_b.svg'); left:max(calc(-50/1920*100vw), -50px); }
#next-episode h3 span::after { /*transform:rotate(30deg);*/background-image:url('img/h3_next_episode_a.svg'); right:max(calc(-35/1920*100vw), -35px); }
#next-episode h3 small { font-weight:400; font-size:min(calc(24/1920*100vw), 24px); display:block; }
#next-episode h3 + p.txt { margin-bottom:min(calc(15/1920*100vw), 15px) !important; font-size:min(calc(18/1920*100vw), 18px); }
/* .box */
#next-episode .box { margin:auto auto min(calc(35/1920*100vw), 35px); padding:min(calc(15/1920*100vw), 15px) 0; width:min(calc(545/1920*100vw), 545px); border:1px solid #707070; }
#next-episode .box p.photo { margin-bottom:min(calc(10/1920*100vw), 10px); }
#next-episode .box h4 { margin:auto auto min(calc(10/1920*100vw), 10px); padding:0.4em 1.5em; background-color:#000000; color:#ffffff; border-radius:min(calc(20/1920*100vw), 20px); line-height:1; font-weight:bold; font-size:min(calc(18/1920*100vw), 18px); display:inline-block; }
#next-episode .box p.txt strong { line-height:1.5; font-weight:bold; font-size:min(calc(28/1920*100vw), 28px); }
#next-episode .box p.txt strong small { font-weight:bold; font-size:min(calc(20/1920*100vw), 20px); display:block; }

#next-episode h5 { margin:auto auto min(calc(10/1920*100vw), 10px); padding:0.4em 1.5em; background-color:#000000; color:#ffffff; border-radius:min(calc(30/1920*100vw), 30px); line-height:1; font-weight:400; font-size:min(calc(24/1920*100vw), 24px); display:inline-block; }
/* ============ smart phone ============ */
@media (max-width:750px){
#next-episode { padding:calc(50/390*100vw) 0 0; text-align:center; }
#next-episode h3 { margin-bottom:calc(25/390*100vw); font-size:calc(20/390*100vw); }
#next-episode h3 span { padding-top:calc(10/390*100vw); font-size:calc(30/390*100vw); }
#next-episode h3 span::before, 
#next-episode h3 span::after { width:calc(32.21/390*100vw); height:calc(51.08/390*100vw); top:calc(10/390*100vw) }
#next-episode h3 span::before { left:calc(-40/390*100vw); }
#next-episode h3 span::after { right:calc(-30/390*100vw); }
#next-episode h3 small { font-size:calc(20/390*100vw); }
#next-episode h3 + p.txt { margin-bottom:calc(20/390*100vw) !important; font-weight:400; font-size:calc(14/390*100vw); }
/* .box */
#next-episode .box { margin:auto auto calc(20/390*100vw); padding:calc(20/390*100vw) 0; width:calc(320/390*100vw); }
#next-episode .box h4 { border-radius:calc(20/390*100vw); font-size:calc(16/390*100vw); }
#next-episode .box p.txt strong { font-size:calc(28/390*100vw); }
#next-episode .box p.txt strong small { font-size:calc(20/390*100vw); }
#next-episode h5 { border-radius:calc(25/390*100vw); font-size:calc(20/390*100vw); }
}
/************************************************************************
  .chat-room-end
************************************************************************/
a.chat-room-end.hide { opacity:0; visibility:hidden; }
a.chat-room-end.show { opacity:1; visibility:visible; }