@media (min-width: 768px) { .course_main_box { width: 100%; margin: 0 0 80px 0; }
  .course_main_box .course_main { display: flex; width: 1010px; height: 370px; margin: 40px auto 0; position: relative; right: 25px; }
  .course_main_box .course_main .photo { position: relative; width: calc(100% - 200px); }
  .course_main_box .course_main .photo::before { content: ""; background-color: #eeefef; display: block; width: 200vw; height: 100%; position: absolute; right: 50px; }
  .course_main_box .course_main .photo picture { position: absolute; z-index: 1; }
  .course_main_box .course_main .photo picture img { border: 7px solid #fff; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2); }
  .course_main_box .course_main .photo .pic1 { width: 340px; height: auto; top: -20px; z-index: 3; }
  .course_main_box .course_main .photo .pic2 { width: 200px; height: auto; bottom: -20px; left: 10px; z-index: 3; }
  .course_main_box .course_main .photo .pic3 { width: 200px; height: auto; top: 200px; left: 178px; z-index: 2; }
  .course_main_box .course_main .photo .pic4 { width: 155px; height: auto; top: 35px; right: 290px; z-index: 3; }
  .course_main_box .course_main .photo .pic5 { width: 150px; height: auto; top: 260px; right: 300px; z-index: 1; }
  .course_main_box .course_main .photo .pic6 { width: 160px; height: auto; top: 10px; right: 110px; z-index: 2; }
  .course_main_box .course_main .photo .pic7 { width: 210px; height: auto; top: 206px; right: 70px; z-index: 1; }
  .course_main_box .course_main .text { width: 200px; }
  .course_main_box .course_main .text h3 { font-size: 18px; border: 1px solid #000; width: 200px; height: 45px; display: flex; justify-content: center; align-items: center; margin: 0; }
  .course_main_box .course_main .text .main_lead { font-size: 16px; padding: 20px 0; display: flex; justify-content: center; align-items: center; }
  .course_main_box .course_main .text ul { list-style: none; margin: 0; padding: 0; width: 200px; }
  .course_main_box .course_main .text ul li { padding: 0 5px; position: relative; margin: 0 0 10px 0; }
  .course_main_box .course_main .text ul li:after { content: ""; background-image: url("../../common/images/arrow_b.svg"); width: 6px; height: 12px; background-size: 6px 12px; display: block; position: absolute; right: 5px; top: calc(50% - 6px); }
  .course_main_box .course_main .text ul li a { text-decoration: none; color: #000; width: 100%; display: block; }
  .course_main_box .course_main .text ul li.super { border-bottom: 2px solid #be5442; }
  .course_main_box .course_main .text ul li.advanced { border-bottom: 2px solid #e2872c; }
  .course_main_box .course_main .text ul li.semi { border-bottom: 2px solid #4f9850; }
  .course_main_box .course_main .text ul li.academic { border-bottom: 2px solid #3767b0; }
  .course_box .course_flex { display: flex; font-size: 12px; line-height: 1.6; position: relative; margin: 0 0 20px 0; }
  .course_box .course_flex > div { display: flex; justify-content: center; flex-direction: column; text-align: left; background-color: #eeefee; width: 100%; }
  .course_box .course_flex > div:last-child { margin: 0; }
  .course_box .course_flex .photo { width: 14%; }
  .course_box .course_flex .name { width: 15%; align-items: center; }
  .course_box .course_flex .name h4 { font-size: 14px; margin: 0 0 5px 0; }
  .course_box .course_flex .name small { display: block; font-size: 12px; text-align: center; margin: 0 0 7px 0; }
  .course_box .course_flex .name .maru_btn { background-color: #bd263a; color: #fff; border-radius: 50px; width: 100px; height: 24px; display: flex; justify-content: center; align-items: center; margin: 0 auto; text-decoration: none; padding: 0 0 2px 0; }
  .course_box .course_flex .leadt { width: 19.5%; font-size: 13px; line-height: 1.8; align-items: center; }
  .course_box .course_flex .memo1 { width: 20.5%; }
  .course_box .course_flex .memo1 ul { margin: 0; padding: 0 0 0 20px; }
  .course_box .course_flex .memo1 ul li { text-indent: -0.5em; }
  .course_box .course_flex .memo2 { width: 28%; padding: 0 10px 0 0; }
  .course_box .course_flex .yajirushi { width: 3%; height: 100%; background-color: #737373; display: flex; justify-content: center; align-items: center; position: absolute; right: 0; top: 0; }
  .course_box .course_flex .yajirushi .arrow { position: relative; width: 11px; height: 19px; }
  .course_box .course_flex .yajirushi .arrow:before { content: ""; background-image: url("../../common/images/arrow_w.svg"); width: 11px; height: 19px; background-size: 11px 19px; display: block; }
  .course_box .course_flex h5 { font-size: 12px; margin: 0 0 5px 0; }
  .course_box .course_flex.super .name { background-color: #dcab96; }
  .course_box .course_flex.super .leadt { color: #be5442; }
  .course_box .course_flex.advanced .name { background-color: #f1c58f; }
  .course_box .course_flex.advanced .leadt { color: #e2872c; }
  .course_box .course_flex.semi .name { background-color: #adc99f; }
  .course_box .course_flex.semi .leadt { color: #4f9850; }
  .course_box .course_flex.academic .name { background-color: #9bacd5; }
  .course_box .course_flex.academic .leadt { color: #3767b0; }
  .page_ttl_02 p { position: absolute; right: 0; top: 0; font-size: 12px; }
  .course_bottom_box { width: 100%; margin: 0 0 30px 0; }
  .course_bottom_box .course_main { display: flex; justify-content: flex-end; width: 1028px; height: 370px; margin: 90px auto 0; position: relative; right: 0; }
  .course_bottom_box .course_main .photo { position: relative; width: calc(100% - 200px); }
  .course_bottom_box .course_main .photo::before { content: ""; background-color: #eeefef; display: block; width: 200vw; height: 100%; position: absolute; left: 0; }
  .course_bottom_box .course_main .photo picture { position: absolute; z-index: 1; }
  .course_bottom_box .course_main .photo picture img { border: 7px solid #fff; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4); }
  .course_bottom_box .course_main .photo .pic8 { width: 164px; height: auto; left: -104px; bottom: -20px; z-index: 3; }
  .course_bottom_box .course_main .photo .pic9 { width: 200px; height: auto; top: -15px; left: -60px; z-index: 3; }
  .course_bottom_box .course_main .photo .pic10 { width: 225px; height: auto; top: 175px; right: 565px; z-index: 2; }
  .course_bottom_box .course_main .photo .pic11 { width: 270px; height: auto; top: 20px; left: 160px; z-index: 3; }
  .course_bottom_box .course_main .photo .pic12 { width: 270px; height: auto; top: 170px; right: 280px; z-index: 1; }
  .course_bottom_box .course_main .photo .pic13 { width: 200px; height: auto; bottom: -15px; right: 88px; z-index: 2; }
  .course_bottom_box .course_main .photo .pic14 { width: 270px; height: auto; top: -15px; right: 0; z-index: 3; }
  #super-advanced, #advanced, #semi-advanced, #academic { margin-top: -80px; padding-top: 80px; } }
@media (max-width: 767.98px) { .course_main_box { width: 100%; margin: 0 0 60px 0; }
  .course_main_box .course_main { display: flex; width: 100%; flex-wrap: wrap; flex-direction: column-reverse; margin: 20px auto 0; position: relative; }
  .course_main_box .course_main .photo { position: relative; width: 375px; height: 500px; margin: 40px auto 0; }
  .course_main_box .course_main .photo::before { content: ""; background-color: #eeefef; display: block; width: 200vw; height: 100%; position: absolute; right: 50px; }
  .course_main_box .course_main .photo picture { position: absolute; z-index: 1; }
  .course_main_box .course_main .photo picture img { border: 5px solid #fff; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2); }
  .course_main_box .course_main .photo .pic1 { width: 230px; height: auto; top: -20px; z-index: 3; }
  .course_main_box .course_main .photo .pic2 { width: 160px; height: auto; top: 150px; left: 30px; z-index: 3; }
  .course_main_box .course_main .photo .pic3 { width: 170px; height: auto; top: 90px; left: 190px; z-index: 2; }
  .course_main_box .course_main .photo .pic4 { width: 125px; height: auto; top: 220px; right: 30px; z-index: 3; }
  .course_main_box .course_main .photo .pic5 { width: 100px; height: auto; top: 260px; left: 10px; z-index: 1; }
  .course_main_box .course_main .photo .pic6 { width: 130px; height: auto; bottom: -20px; right: 110px; z-index: 2; }
  .course_main_box .course_main .photo .pic7 { width: 160px; height: auto; top: 360px; left: 0; z-index: 1; }
  .course_main_box .course_main .text { width: 100%; padding: 0 20px; }
  .course_main_box .course_main .text h3 { font-size: 18px; border: 1px solid #000; width: 200px; height: 45px; display: flex; justify-content: center; align-items: center; margin: 0 auto; }
  .course_main_box .course_main .text .main_lead { font-size: 16px; padding: 20px 0; display: flex; justify-content: center; align-items: center; }
  .course_main_box .course_main .text ul { list-style: none; margin: 0 auto; padding: 0; width: 200px; }
  .course_main_box .course_main .text ul li { padding: 0 5px; position: relative; margin: 0 0 10px 0; }
  .course_main_box .course_main .text ul li:after { content: ""; background-image: url("../../common/images/arrow_b.svg"); width: 6px; height: 12px; background-size: 6px 12px; display: block; position: absolute; right: 5px; top: calc(50% - 6px); }
  .course_main_box .course_main .text ul li a { text-decoration: none; color: #000; width: 100%; display: block; }
  .course_main_box .course_main .text ul li.super { border-bottom: 2px solid #be5442; }
  .course_main_box .course_main .text ul li.advanced { border-bottom: 2px solid #e2872c; }
  .course_main_box .course_main .text ul li.semi { border-bottom: 2px solid #4f9850; }
  .course_main_box .course_main .text ul li.academic { border-bottom: 2px solid #3767b0; }
  .course_box .course_flex { display: flex; flex-wrap: wrap; font-size: 12px; line-height: 1.6; position: relative; margin: 0 0 30px 0; }
  .course_box .course_flex:last-child { margin: 0; }
  .course_box .course_flex > div { display: flex; justify-content: center; flex-direction: column; text-align: left; background-color: #eeefee; width: 100%; }
  .course_box .course_flex > div:last-child { margin: 0; }
  .course_box .course_flex .photo { width: 50%; }
  .course_box .course_flex .name { width: 50%; align-items: center; }
  .course_box .course_flex .name h4 { font-size: 14px; margin: 0 0 5px 0; }
  .course_box .course_flex .name small { display: block; font-size: 12px; text-align: center; margin: 0 0 7px 0; }
  .course_box .course_flex .name .maru_btn { background-color: #bd263a; color: #fff; border-radius: 50px; width: 100px; height: 24px; display: flex; justify-content: center; align-items: center; margin: 0 auto; text-decoration: none; padding: 0 0 2px 0; }
  .course_box .course_flex .leadt { width: 100%; font-size: 13px; line-height: 1.8; align-items: center; padding: 10px; text-align: center; }
  .course_box .course_flex .memo1 { width: 100%; padding: 10px; }
  .course_box .course_flex .memo1 ul { margin: 0; padding: 0 0 0 20px; display: flex; flex-wrap: wrap; }
  .course_box .course_flex .memo1 ul li { width: 100%; text-indent: -0.5em; }
  .course_box .course_flex .memo2 { width: 100%; padding: 10px; }
  .course_box .course_flex .yajirushi { width: 100%; height: 30px; background-color: #737373; display: flex; justify-content: center; align-items: center; }
  .course_box .course_flex .yajirushi .arrow { position: relative; width: 9px; height: 17px; }
  .course_box .course_flex .yajirushi .arrow:before { content: ""; background-image: url("../../common/images/arrow_w.svg"); width: 9px; height: 17px; background-size: 9px 17px; display: block; }
  .course_box .course_flex h5 { font-size: 12px; margin: 0 0 5px 0; }
  .course_box .course_flex.super .name { background-color: #dcab96; }
  .course_box .course_flex.super .leadt { color: #be5442; }
  .course_box .course_flex.advanced .name { background-color: #f1c58f; }
  .course_box .course_flex.advanced .leadt { color: #e2872c; }
  .course_box .course_flex.semi .name { background-color: #adc99f; }
  .course_box .course_flex.semi .leadt { color: #4f9850; }
  .course_box .course_flex.academic .name { background-color: #9bacd5; }
  .course_box .course_flex.academic .leadt { color: #3767b0; }
  .page_ttl_02 p { position: relative; font-size: 12px; margin: 5px 0 10px 0; }
  .course_bottom_box { width: 100%; margin: 0 0 20px 0; }
  .course_bottom_box .course_main { display: flex; justify-content: flex-end; width: 100%; margin: 30px auto 0; position: relative; right: 0; }
  .course_bottom_box .course_main .photo { position: relative; width: 375px; height: 500px; margin: 40px auto; }
  .course_bottom_box .course_main .photo::before { content: ""; background-color: #eeefef; display: block; width: 200vw; height: 100%; position: absolute; left: 50px; }
  .course_bottom_box .course_main .photo picture { position: absolute; z-index: 1; }
  .course_bottom_box .course_main .photo picture img { border: 5px solid #fff; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4); }
  .course_bottom_box .course_main .photo .pic8 { width: 130px; height: auto; left: 30px; top: 60px; z-index: 3; }
  .course_bottom_box .course_main .photo .pic9 { width: 150px; height: auto; top: -20px; left: -5px; z-index: 3; }
  .course_bottom_box .course_main .photo .pic10 { width: 145px; height: auto; bottom: -50px; right: 120px; z-index: 2; }
  .course_bottom_box .course_main .photo .pic11 { width: 210px; height: auto; top: 20px; left: 160px; z-index: 3; }
  .course_bottom_box .course_main .photo .pic12 { width: 180px; height: auto; top: 300px; left: -20px; z-index: 1; }
  .course_bottom_box .course_main .photo .pic13 { width: 150px; height: auto; bottom: -15px; right: 0; z-index: 2; }
  .course_bottom_box .course_main .photo .pic14 { width: 220px; height: auto; top: 185px; right: -20px; z-index: 3; } }