@charset "UTF-8";
@media print, screen and (min-width: 751px) { 
  .mainImage { background: url("../img/course/main-image_pc.jpg") 50% 0 no-repeat; background-size: cover; }
  #reserve      { padding-top: 0px; margin: 0 auto 0; padding-bottom: 50px; text-align: center; overflow: hidden; }
  #reserve .title { font-size: 42px; color: #018a2f; margin: 80px auto 15px; }
  #reserve .title:before { content: ''; width: 100%; height: 15px; background: url("../img/common/diamond-icon-green.svg") 50% 0 no-repeat; display: block; }
  #reserve .sub { color: #018a2f; font-size: 14px; margin-bottom: 40px; }
  #reserve .caption { font-size: 26px; margin: 100px auto 0; line-height:1.8; }
  #reserve .caption span { color: #018a2f; }
  #reserve .online { max-width:346px; margin:0 auto 20px; }
  #reserve p { text-align: left; font-size: 14px; line-height: 2; }
  #reserve .under { text-decoration:underline; }
  #reserve .pass { width:940px; margin:50px auto 0; text-align:center; }
  #reserve .n_pass { width:450px; height:300px; margin:10px; padding:30px 15px; float:left; border: solid 1px #008D1B; text-align:center; line-height:1.8; }
  #reserve .n_pass .cap{ font-size:24px; margin:20px auto 5px; color:#008D1B; }
  #reserve .a_pass { width:450px; height:300px; margin:10px; padding:15px; float:left; border: solid 1px #D75C10; text-align:center; line-height:1.8; }
  #reserve .a_pass .cap{ font-size:24px; margin:20px auto 5px; color:#D75C10; }
  #reserve .btn_green             { width: 100%; height:72px; margin:48px auto 20px; }
  #reserve .btn_green a           { padding: 25px 0; display: block; text-align: center; font-size: 1rem; font-weight: normal; color: #fff; background: #008a2f url('../img/common/arrow.svg') 92% 50% no-repeat; background-size: 6px;}
  #reserve .btn_orange            { width: 100%; height:72px; margin:20px auto; }
  #reserve .btn_orange a          { padding: 25px 0; display: block; text-align: center; font-size: 1rem; font-weight: normal; color: #fff; background: #D75C10 url('../img/common/arrow.svg') 92% 50% no-repeat; background-size: 6px;}
  #reserve .tel { margin: 20px auto 50px; }
  #reserve .please                { margin-top:150px; }
  #reserve .reserve_line          { color: #000; font-size: 28px; display: flex; align-items: center; }
  #reserve .reserve_line:before, .reserve_line:after   { content: ""; flex-grow: 1; height: 1px; background: #e5e5e5; display: block; }
  #reserve .reserve_line:before   { margin-right: .8em; }
  #reserve .reserve_line:after    { margin-left: .8em; }
  #reserve .reserve_line_text     { margin: 10px auto; text-align:center }
  #reserve .please p              { width:800px; margin:70px auto 0; }
  #reserve .please p a            { text-decoration:underline; }
}

@media screen and (max-width: 750px) {
  .mainImage { background: url("../img/course/main-image_sp.jpg") 50% 0 no-repeat; background-size: cover; }
  #reserve { margin: 0 auto 0; text-align: center; overflow: hidden; }
  #reserve .title { font-size: 30px; color: #018a2f; margin: 30px auto 15px; }
  #reserve .title:before { content: ''; width: 100%; height: 15px; background: url("../img/common/diamond-icon-green.svg") 50% 0 no-repeat; display: block; }
  #reserve .sub { color: #018a2f; font-size: 14px; margin-bottom: 20px; }
  #reserve .caption { font-size: 20px; margin: 10% auto 0; line-height:1.6; }
  #reserve .caption span { color: #018a2f; }
  #reserve .online { width:100%; margin:0 auto 5%; }
  #reserve p { text-align: left; font-size: 14px; line-height: 2; }
  #reserve .under { text-decoration:underline; }
  #reserve .pass { width:100%; margin:50px auto 0; text-align:center; }
  #reserve .n_pass { width:100%; margin-bottom:5%; padding:15px; border: solid 1px #008D1B; text-align:center; line-height:1.8; }
  #reserve .n_pass .cap{ font-size:18px; margin:10px auto 5px; color:#008D1B; }
  #reserve .a_pass { width:100%; padding:15px; border: solid 1px #D75C10; text-align:center; line-height:1.8; }
  #reserve .a_pass .cap{ font-size:18px; margin:10px auto 5px; color:#D75C10; }
  #reserve .btn_green          { width: 100%; height:62px; margin:5% auto; }
  #reserve .btn_green a        { padding: 20px 0; display: block; text-align: center; font-size: 1rem; font-weight: normal; color: #fff; background: #008a2f url('../img/common/arrow.svg') 92% 50% no-repeat; background-size: 6px;}
  #reserve .btn_orange         { width: 100%; height:62px; margin:5% auto; }
  #reserve .btn_orange a       { padding: 20px 0; display: block; text-align: center; font-size: 1rem; font-weight: normal; color: #fff; background: #c8632b url('../img/common/arrow.svg') 92% 50% no-repeat; background-size: 6px;}
  #reserve .tel { margin: 5% auto 50px; text-align: center; }
  #reserve .please                { margin-top:20%; }
  #reserve .reserve_line          { color: #000; font-size: 20px; display: flex; align-items: center; }
  #reserve .reserve_line:before, .reserve_line:after   { content: ""; flex-grow: 1; height: 1px; background: #e5e5e5; display: block; }
  #reserve .reserve_line:before   { margin-right: .8em; }
  #reserve .reserve_line:after    { margin-left: .8em; }
  #reserve .reserve_line_text     { margin: 10px auto; text-align:center }
  #reserve .please p              { width:100%; margin:10% auto 0; line-height:1.8; }
  #reserve .please p a            { text-decoration:underline; }
}