@charset "utf-8";
/*
特別講習（special_course_guidance.html）用css

ここでは以下を定義
   ・
*/

main {
   max-width: var(--common_max_width);
}


table.headline_table {
   position: relative;
   /* padding: 0.25em 0 0em 1em; */
   /* font-size: 2em; */
   /* text-align: left; */
   /* border: solid red; */
   width: 100%;
   margin: 1rem auto;
   margin: 1rem auto 1.5rem auto;
   margin: 1.5rem auto;
   /* margin: 2em auto; */
   border-collapse: collapse;
}
table.headline_table::after {
   /* border: solid blue; */
   content: '';
   position: absolute;
   left: 0;
   display: block;
   width: 100%;
   height: 3px;
   margin-top: 5px;
   background: linear-gradient(to right, orangered, transparent);
}
@media screen and (max-width: 767px){
   table.headline_table {
   }
}

table.headline_table th {
   display: block;
   /* width: 100%; */
   font-weight: normal;
   font-size: .9em;
   box-sizing: border-box;
   /* margin-left: 1rem; */
   padding-left: 1rem;
   /* border: solid blue; */
}
table.headline_table th span {
   display: inline-block;
}
table.headline_table th span.data {
   margin-right: .5em;
}
table.headline_table th span.tag {
   border-radius: 10px;
   background: lightgreen;
   padding: 0 1em;
   margin-left: .5em;
}

table.headline_table td {
   display: block;
   padding: 0;
   /* padding-top: 1px; */
}
table.headline_table td .headline {
   padding-left: 1rem;
   font-size: 2em;
   text-align: left;
   margin: 0;
   color: deeppink;
}
@media screen and (max-width: 767px){
   table.headline_table th {
      padding-left: .3rem;
   }
   table.headline_table td .headline {
      padding-left: .3rem;
      font-size: 1.7em;
   }
}







div.course_place {
   flex: 1;
   display: flex;
   flex-direction: column;
   border: solid sandybrown;
   margin: 0 auto 2em auto; 
   box-sizing: border-box;
   width: 90%;
}

h4.place_name {
   margin-block-start: 0;
   margin-block-end: 0;
   background: white;
   background: linear-gradient(to bottom, orange, orangered 50%, orange);
   color: white;
   text-shadow: 0 0 1px black, 0 1px 1px black,
             1px 0 1px black, 1px 1px 1px black;
   line-height: 2.5em;
   border-bottom: solid sandybrown;
   font-size: 1.5em;
   text-align: center;
   border-top: none;
   padding: 0;
   width: 90%;
   margin: 0 auto;
}
@media screen and (max-width: 767px){
   div.course_place {
      width: 100%;
   }
   h4.place_name {
      width: 100%;
   }
}



.space {
   letter-spacing: .2em;
}
@media screen and (max-width: 767px){
   .space {
      letter-spacing: .1em;
   }
}


.style_scg1 {
   display: block;
   text-align: center;
}



ul.course_list {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   text-align: center;
   padding: 0;
   /*margin: 0;*/
   justify-content: center;
   box-sizing: border-box;
   /*border: solid blue;*/
}

ul.course_list li {
   display: inline-table;
   float: left;
   width: 300px;
   min-height: 100px;
   margin: 10px;
   box-sizing: border-box;
   /*border: solid;*/
}
@media screen and (max-width: 767px){
   ul.course_list{
      padding: 0;
   }
   ul.course_list li {
      width: 90%;
      margin: 10px auto;
      /*margin: 0 ;*/
   }
}

ul.course_list a {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   text-decoration: none;
   /*border: solid red;*/

   font-size: 24px;
   font-weight: bold;
}

ul.course_list a:hover {
   opacity: 0.8;
}

a.course_name {
   filter: drop-shadow(5px 5px 4px gray);
   border-radius: 20px;
   text-shadow: 0 0 2px black, 0 1px 2px black,
             1px 0 2px black, 1px 1px 2px black;
}

.course_name_es {
   color: white;
   background-color: gold;
   border: orange solid;
}

.course_name_jhs {
   color: white;
   background-color: deepskyblue;
   border: blue solid;
}

.course_name_hs {
   color: white;
   background-color: pink;
   border: orangered solid;
}

.course_name_tutor {
   color: black;
   text-shadow: none;
   background-color: lightyellow;
   border: yellow solid;
}

h2.course_name {
   border: red solid 5px;
}

/* 2020_2 ~ */
/*
h3.headline.tag1::after {
   content: '生徒募集中!!\Aお問い合わせはこちらから\Aもう一行';
   white-space: pre;
   text-align: center;
   font-size: .5em;
   padding: .5em;
   letter-spacing: initial;
   border-radius: 1em;
   position: absolute;
   display: inline-block;
   right: 0;
   color: white;
   background: red;
   border: solid gold;
}
 */

table.headline_table td.flex {
   display: flex;
   align-items: center;
   /* justify-content: space-between; */
}

table.headline_table td.flex > h3 {
   display: inline-block;
   margin-right: 2em;
}


table.headline_table td.flex > .prop {
   text-align: center;
   font-size: 1em;
   font-weight: bold;
   padding: 1em;
   border-radius: 1em;
   color: white;
   background: red;
   /* border: solid gold; */
   animation: blink 1s ease-in infinite alternate;
}
@keyframes blink {
   0% {
      opacity: .2;
   }
   100% {
      opacity: 1;
   }
}

@media screen and (max-width: 767px){
   table.headline_table td.flex {
      justify-content: space-between;
   }
   table.headline_table td.flex > h3 {
      margin-right: 0;
   }
   table.headline_table td.flex > .prop {
      font-size: .8em;
      padding: .8em;
      border-radius: 1em;
   }
}



div.heading {
   text-align: center;
   box-sizing: border-box;
}

.heading > span {
   display: inline-block;
   padding: .5em;
   margin: 0 auto;
   border: double red 6px;
   text-align: center;
   font-size: 1.5em;
}

.heading > span strong {
   font-size: 1.2em;
   color: blue;
   font-weight: bold;
}

a.link_gaa {
   /* text-decoration: none; */
}

p.em_line {
   font-size: 1.2em;
   text-decoration: underline;
}




h4.subsection {
   /* margin: initial; */
   /* padding: initial; */
   margin: 1.5em .5em .5em .5em;
   padding: .5em 0;
   padding-left: .5em;
   border-top: dashed;
   border-bottom: dashed;
   font-size: 1.5em;
}
@media screen and (max-width: 767px){
   p.em_line {
   font-size: 1.1em;
   }
   .heading > span {
      font-size: 1.2em;
   }
   h4.subsection {
      margin: 1.5em 0 0 0;
      /* font-size: 1.7em; */
   }
}



/* 

   カレンダー

 */
div.cal_frame {
   height: 62%;
   height: 600px;
   margin-top: 10px;
   display: flex;
   flex-direction: column;
}
div.cal_frame iframe.calendar {
   width: 100%;
   flex: 1;
   box-sizing: border-box;
}
@media screen and (max-width: 767px){
   div.cal_frame {
      /* height: 50vh; */
      height: 80vh;
   }
}


.course_list li.online_course_button {
   width: 60%;
   min-height: 100px;
}

.link_to_online_course {
   color: deepskyblue;
   font-weight: bold;
   letter-spacing: 2px;
   text-indent: 2px;
   /*background: orange;*/
   border: double 5px deepskyblue;
   border-radius: 3px;
   transition: .3s;
}
.link_to_online_course:hover {
   background: lightcyan;
}

@media screen and (max-width: 767px){
   li.online_course_button {
      width: 100%;
   }
}