@charset "utf-8";

div.visual-image { overflow: hidden; height: 24vw; position: relative; background-image: url(../images/visual-image.png); background-size: cover; background-repeat: no-repeat; background-position: bottom right; }

div.bg-darkgray { background:#555555; margin:0 0 ;}
h2.course_title { margin:80px 0 0 0; padding:20px 20px 20px 20px; text-align:left; font-size: 20px; }
h2.course_title img { width:40px; vertical-align: -7px; margin:0 10px 0 0; }
@media screen and (max-width: 1260px) {
h2.course_title { margin:70px 0 0 0; font-size: 18px; }
}


div.bg-gray { background:#f6f6f6; margin:0 0; }

div.map { width: 100%; max-width: 1340px; margin: 0 auto 5pxpx; text-align:center; padding:0 0 5px 0; }
div.map img { width: 100%; }


@media only screen and (max-width: 900px) {
/*div.map { width: 800px; overflow-x: scroll; display: flex; }*/

div.map { display: flex; width: 98%; margin:0 auto 10px auto; overflow-x: scroll; }
div.map div { width: 190%; flex-shrink: 0; }
div.map::-webkit-scrollbar { height: 12px; }
 
div.map::-webkit-scrollbar-thumb { background: #aaaaaa; border-radius: 10px; }
div.map::-webkit-scrollbar-track { background: #dfdfdf; border-radius: 10px; }

}


table.course { border: 1px #7f8354 solid; border-collapse: collapse; border-spacing: 0; width: 80%; margin: 50px auto; }

table.course th { border: 1px #7f8354 solid; text-align: center; padding:10px;  background: #a1a57b; font-weight:normal; }
table.course th.name { white-space: nowrap; }
table.course td { border: 1px #7f8354 solid; padding:10px; }
table.course td.place { text-align:center; white-space: nowrap; }
table.course tr:nth-child(even) { background: #f5f6ef; }
table.course tr:nth-child(odd) { background: #dbddc2; }

@media only screen and (max-width: 760px) {
table.course { width: 96%; }
table.course th { padding:6px; }
table.course td { padding:6px; }
}


h3 { width:98%; position: relative; padding: 1rem 1rem; border-bottom: 3px solid #a1a57b; margin:60px auto 60px auto; font-size:22px; }
h3:before { position: absolute; bottom: -14px; left: 4em; width: 0; height: 0; content: ''; border-width: 14px 12px 0 12px; border-style: solid; border-color: #a1a57b transparent transparent transparent; }
h3:after { position: absolute; bottom: -11px; left: 4em; width: 0; height: 0; content: ''; border-width: 14px 12px 0 12px; border-style: solid; border-color: #fff transparent transparent transparent; }
h3 img { width:36px; vertical-align: -5px; margin: 0 8px 0 0; }




div.recommended { width:94%; margin:0 auto 0; height:260px;}
div.recommended div.left { float:left; width:47%; margin:0 1.5%; }
div.recommended div.right { float:right; width:47%; margin:0 1.5%; }
div.recommended div.photo { float:left; width:50%; margin: 0 3% 0 0; }
div.recommended div.photo img { width:100%; border-radius: 20px; }
div.recommended div.text { float:right; width:47%;  }
div.recommended h4 { font-size:20px; margin:0 0 30px 0; }
div.button { width:94%; margin:0 auto 50px; height:100px; }
div.button div.left { float:left; width:47%; margin:0 1.5%; text-align:center; }
div.button div.right  { float:right; width:47%; margin:0 1.5%; text-align:center; }
div.last { width:94%; margin:0 auto 30px; height:380px;}