@charset "utf-8";


@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-weight: 700;
  src: url('/fonts/ZenKakuGothicNew-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-weight: 900;
  src: url('/fonts/ZenKakuGothicNew-Black.ttf') format('truetype');
}


.noscroll { position: fixed; overflow: hidden; }

#top_sbj { background-image: url('/subject/images/diagonal-lines.svg'); background-size: 8px; border-top: solid 2px #e5e5e5; }
#top_sbj h1 { color: #007fc3; font-weight: 700; font-family: 'Zen Kaku Gothic New', sans-serif; text-align: center; padding-top: 10px; padding-bottom: 30.54%; width: 100%; background-image: url('/subject/images/sbj_top_img.png'), url('/subject/images/illust_top_under.png'); background-repeat: no-repeat, repeat-x; background-position: center bottom, center bottom; background-size: contain, contain; }
#top_sbj h1 .em { font-weight: 900; font-size: 30px; letter-spacing: 1px; display: block; margin-bottom: 15px; }

#choice_sbj { padding: 20px 10px 22px; background-color: #fcf6e5; }
#grouplist { display: flex; }
#grouplist li { width: calc(50% - 5px); }
#grouplist li + li { margin-left: 5px; }
#grouplist li a { font-size: 16px; text-align: center; display: block; padding-top: 77px; width: 100%; height: 120px; background-repeat: no-repeat; background-position: center 5px; background-size: 70px 65px; }
#grouplist li:nth-child(1) a { background-image: url('../subject/images/sbj_icon_dr_1.png?v=202403140644'); }
#grouplist li:nth-child(2) a { background-image: url('../subject/images/sbj_icon_dr_2.png?v=202403140612'); }
#grouplist li:nth-child(3) a { background-image: url('../subject/images/sbj_icon_dr_3.png?v=202403140638'); }
#choice_sbj .modal { position: fixed; top: 0; left: 0; overflow-y: scroll; width: 100%; height: 100%; background-color: #fcf6e5; }
#choice_sbj .mod_btn_back { margin-top: 5px; margin-left: 15px; padding: 12px 25px 12px 35px; background-position: 15px center; background-size: 8px 14px; }
#choice_sbj .ttl { text-align: center; margin-bottom: 5px; }
#choice_sbj .balloon { position: relative; display: inline-block; padding: 8px 0; width: 122px; background-color: #ffec00; border-radius: 50px; }
#choice_sbj .balloon:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -12px; border: 12px solid transparent; border-top-color: #ffec00; }
#choice_sbj .subjectlist { display: flex; flex-wrap: wrap; gap: 5px; padding: 15px 5px; }
#choice_sbj .subjectlist li { width: calc(100% / 2 - 5px); }
#choice_sbj .subjectlist li a { font-size: 16px; text-align: center; padding-top: 11px; padding-bottom: 11px; width: 100%; }

#browse_sbj { padding: 22px 7px 10px; }
#browse_sbj ul > li { margin-bottom: 20px; padding: 15px 10px 30px 15px; background-color: #fff; border-radius: 6px; box-shadow: 0 2px 6px rgb(0 0 0 / 15%); }
#browse_sbj img { margin-right: 15px; }
#browse_sbj h2 { font-weight: bold; line-height: 60px; display: inline-block; }
#browse_sbj ol > li { margin-top: 15px; }
#browse_sbj ol > li:first-child { margin-top: 30px; }
#browse_sbj ol > li a:before { vertical-align: middle; content: ''; display: inline-block; margin-right: 12px; width: 10px; height: 14px; background-image: url('/subject/images/arrow.png'); background-size: contain; }
#browse_sbj .address { color: #009900; text-indent: 22px; display: block; }

#bar_sbj { padding-bottom: 35px; }
#bar_sbj a { color: #5dbaec; display: block; padding: 25px 10px; border-top: solid 10px #a1d7f4; border-bottom: solid 10px #a1d7f4; }
#bar_sbj a:after { vertical-align: middle; content: ''; display: inline-block; margin-left: 11px; width: 11px; height: 18px; background: url('../subject/images/modoru.svg') no-repeat left center; background-size: contain; }
#bar_sbj .subject { font-weight: bold; font-size: 18px; }