@charset "UTF-8";

/* CSS Document */
.flex {
  display: flex;
	justify-content: space-between;
  flex-wrap: wrap;
}

.flex .left {
  width: 40%;
}

.flex .right {
  width: 58%;
}

.flex .right img{
  width: 100%;
}
.flex .right figure figcaption{
  text-align: center;
  font-weight: bold;
  padding-bottom: 10px;
}



section {
  margin-bottom: 80px;
}

section section {
  margin-bottom: 40px;
}

/* ナビゲーションタブ */
section nav {
  margin: 0 0 40px;
}

section nav dl {
  margin: 0 0 1px;
}

section nav dt {
  margin: 0;
  float: left;
  height: 40px;
  width: 96px;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}

section nav dd {
  margin: 0;
  float: left;
  height: 40px;
  width: 864px;
}

section nav ul {
  margin: 0;
  padding: 0;
}

section nav li {
  height: 40px;
  width: 96px;
  float: left;
}

section nav a {
  display: block;
  height: 40px;
  width: 96px;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: url(../img/course/tab_course.gif) no-repeat;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
  transition: all .5s;
}

nav .out-course dt a {
  background-position: 0 0;
}

nav .out-course dt a:hover,
nav .out-course dt a:active {
  background-position: 0 -41px;
}

nav .in-course dt a {
  background-position: 0 -82px;
}

nav .in-course dt a:hover,
nav .in-course dt a:active {
  background-position: 0 -123px;
}

.tab_hole01 a {
  background-position: -96px 0;
}

.tab_hole01 a.on,
.tab_hole01 a:hover,
.tab_hole01 a:active {
  background-position: -96px -41px;
}

.tab_hole02 a {
  background-position: -192px 0;
}

.tab_hole02 a.on,
.tab_hole02 a:hover,
.tab_hole02 a:active {
  background-position: -192px -41px;
}

.tab_hole03 a {
  background-position: -288px 0;
}

.tab_hole03 a.on,
.tab_hole03 a:hover,
.tab_hole03 a:active {
  background-position: -288px -41px;
}

.tab_hole04 a {
  background-position: -384px 0;
}

.tab_hole04 a.on,
.tab_hole04 a:hover,
.tab_hole04 a:active {
  background-position: -384px -41px;
}

.tab_hole05 a {
  background-position: -480px 0;
}

.tab_hole05 a.on,
.tab_hole05 a:hover,
.tab_hole05 a:active {
  background-position: -480px -41px;
}

.tab_hole06 a {
  background-position: -576px 0;
}

.tab_hole06 a.on,
.tab_hole06 a:hover,
.tab_hole06 a:active {
  background-position: -576px -41px;
}

.tab_hole07 a {
  background-position: -672px 0;
}

.tab_hole07 a.on,
.tab_hole07 a:hover,
.tab_hole07 a:active {
  background-position: -672px -41px;
}

.tab_hole08 a {
  background-position: -768px 0;
}

.tab_hole08 a.on,
.tab_hole08 a:hover,
.tab_hole08 a:active {
  background-position: -768px -41px;
}

.tab_hole09 a {
  background-position: -864px 0;
}

.tab_hole09 a.on,
.tab_hole09 a:hover,
.tab_hole09 a:active {
  background-position: -864px -41px;
}

.tab_hole10 a {
  background-position: -96px -82px;
}

.tab_hole10 a.on,
.tab_hole10 a:hover,
.tab_hole10 a:active {
  background-position: -96px -123px;
}

.tab_hole11 a {
  background-position: -192px -82px;
}

.tab_hole11 a.on,
.tab_hole11 a:hover,
.tab_hole11 a:active {
  background-position: -192px -123px;
}

.tab_hole12 a {
  background-position: -288px -82px;
}

.tab_hole12 a.on,
.tab_hole12 a:hover,
.tab_hole12 a:active {
  background-position: -288px -123px;
}

.tab_hole13 a {
  background-position: -384px -82px;
}

.tab_hole13 a.on,
.tab_hole13 a:hover,
.tab_hole13 a:active {
  background-position: -384px -123px;
}

.tab_hole14 a {
  background-position: -480px -82px;
}

.tab_hole14 a.on,
.tab_hole14 a:hover,
.tab_hole14 a:active {
  background-position: -480px -123px;
}

.tab_hole15 a {
  background-position: -576px -82px;
}

.tab_hole15 a.on,
.tab_hole15 a:hover,
.tab_hole15 a:active {
  background-position: -576px -123px;
}

.tab_hole16 a {
  background-position: -672px -82px;
}

.tab_hole16 a.on,
.tab_hole16 a:hover,
.tab_hole16 a:active {
  background-position: -672px -123px;
}

.tab_hole17 a {
  background-position: -768px -82px;
}

.tab_hole17 a.on,
.tab_hole17 a:hover,
.tab_hole17 a:active {
  background-position: -768px -123px;
}

.tab_hole18 a {
  background-position: -864px -82px;
}

.tab_hole18 a.on,
.tab_hole18 a:hover,
.tab_hole18 a:active {
  background-position: -864px -123px;
}

.bottom-nav dl {
  float: left;
  width: 50%;
}

.bottom-nav dt {
  margin: 0;
  float: left;
  height: 30px;
  width: 48px;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.bottom-nav dd {
  margin: 0;
  float: left;
  height: 30px;
  width: 432px;
}

.bottom-nav li {
  height: 30px;
  width: 48px;
  float: left;
}

.bottom-nav a {
  display: block;
  height: 30px;
  width: 48px;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-image: url(../img/course/tab_course-bottom.gif);
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
  transition: all .5s;
}

.bottom-nav .out-course dt a:hover,
.bottom-nav .out-course dt a:active {
  background-position: 0 -31px;
}

.bottom-nav .in-course dt a:hover,
.bottom-nav .in-course dt a:active {
  background-position: 0 -113px;
}

h4 {
  border-bottom: 3px solid #ECB5B7;
  font-size: 125%;
  margin: 0 0 20px;
  height: 1.4em;
}

.in-course h4,
#in-course h4 {
  border-bottom: 3px solid #BEE2E4;
}

h4 span {
  margin: 0 0.5em 0 0;
  position: relative;
  color: #D25258;
  height: 1.4em;
  float: left;
}

.in-course h4 span,
#in-course h4 span {
  color: #39A7AC;
}

h4 span:after {
  display: block;
  height: 3px;
  width: 100%;
  position: absolute;
  bottom: -3px;
  left: 0;
  content: "";
  background: #D25258;
}

.in-course h4 span:after,
#in-course h4 span:after {
  background: #39A7AC;
}

/* コーストップ */
.layout h3 {
  width: 320px;
  border: none;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: -20px;
}

.layout .designer {
  margin: 0;
  width: 100%;
  position: absolute;
  margin: 0 auto;
  top: 28px;
  left: 0;
  text-align: center;
  font-weight: bold;
}

.layout .designer dt {
  display: inline;
}

.layout .designer dt:after {
  content: "：";
}

.layout .designer dd {
  margin: 0;
  display: inline;
}

.hole {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hole li {
  position: absolute;
  width: 24px;
  height: 24px;
}

.point_hole01 {
  top: 262px;
  left: 800px;
}

.point_hole02 {
  top: 348px;
  left: 794px;
}

.point_hole03 {
  top: 253px;
  left: 701px;
}

.point_hole04 {
  top: 261px;
  left: 600px;
}

.point_hole05 {
  top: 116px;
  left: 324px;
}

.point_hole06 {
  top: 51px;
  left: 287px;
}

.point_hole07 {
  top: 117px;
  left: 484px;
}

.point_hole08 {
  top: 158px;
  left: 576px;
}

.point_hole09 {
  top: 212px;
  left: 570px;
}

.point_hole10 {
  top: 288px;
  left: 806px;
}

.point_hole11 {
  top: 350px;
  left: 794px;
}

.point_hole12 {
  top: 254px;
  left: 701px;
}

.point_hole13 {
  top: 262px;
  left: 600px;
}

.point_hole14 {
  top: 117px;
  left: 324px;
}

.point_hole15 {
  top: 52px;
  left: 287px;
}

.point_hole16 {
  top: 118px;
  left: 484px;
}

.point_hole17 {
  top: 159px;
  left: 576px;
}

.point_hole18 {
  top: 212px;
  left: 570px;
}

.hole a {
  display: block;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
  transition: all .5s;
}

.lt-ie9 .hole a {
  background: url(../img/common/blank.png);
}

.hole a:hover,
.hole a:active {
  background: #fff;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
}

.lt-ie9 .hole a:hover,
.lt-ie9 .hole a:active {
  background: url(../img/common/blank.png);
}

.layout section {
  position: absolute;
  width: 465px;
  bottom: 20px;
  left: 20px;
  margin: 0;
}

.layout h4 {
  font-size: 93.8%;
  margin: 0 0 10px;
  padding: 0 0 5px;
}

.layout h4 span {
  padding: 0 0 5px;
}

h4 strong {
  font-size: 133.3%;
  margin: 0 0.3em 0 0;
}

.layout table {
  font-size: 68.8%;
}

.layout th,
.layout td {
  padding: 5px;
  text-align: center;
}

.layout thead th {
  background: #F4D4D5;
  font-weight: bold;
}

#in-course thead th {
  background: #CDE9EA;
}

.layout tbody th {
  background: #fff;
}

/* 各コース */
.course header {
  position: relative;
  margin: 0 0 45px;
}

.course h3 {
  position: absolute;
  top: 370px;
  bottom: 20px;
  left: 20px;
  border: none;
}

.data {
  color: #fff;
  position: absolute;
  font-size: 112.5%;
  font-weight: bold;
  bottom: 20px;
  left: 120px;
  margin: 0;
}

.data dt {
  float: left;
  clear: left;
  width: 4.5em;
}

.data dd {
  margin: 0;
  float: left;
}

.data dd:before {
  content: ":";
  margin-right: 0.2em;
}

.course .designer {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-weight: bold;
}

.course .designer dt {
  display: inline;
  color: #D25258;
}

.in-course .designer dt {
  color: #39A7AC;
}

.course .designer dt:after {
  content: "：";
}

.course .designer dd {
  display: inline;
  margin: 0;
}

.commentary {
  margin: 0 0 10px;
}

.commentary dt {
  display: inline;
  color: #d25258;
  font-weight: bold;
}

.in-course .commentary dt {
  color: #39A7AC;
}

.commentary dt:after {
  content: "：";
}

.commentary dd {
  display: inline;
  margin: 0;
}

.commentary .title {
  margin: 0 0.5em 0 0;
}

.text {
  min-height: 80px;
  margin: 0 0 20px;
}

.text p {
  margin: 0 0 10px;
}

.annotation {
  color: #D25258;
}

p.annotation:before {
  content: "※";
}

.annotation strong:before {
  content: "<";
  margin-left: 0.5em;
}

.annotation strong:after {
  content: ">";
}

.flowering-tree {
  /* position: absolute;
  right: 10px;
  bottom: 430px; */
	display: block;
	margin: auto;
}