:root {
  --m-color: #0d64b4;
}

.mainVisual {width: 100%; padding-bottom: calc(100% * 300 / 450); position: relative; overflow: visible; box-sizing: border-box;}
.mainVisual .swiper-wrapper {height: 100%; position: absolute; top: 0; left: 0;}
.mainVisual .swiper-slide { box-sizing: border-box; display: block; height: 100%;}
.mainVisual .swiper-slide img {display: block; width: 100%; height: 100%;}

.swiper-controls {position: absolute; right: 18px; bottom: 8px; z-index: 998; display: flex;  justify-content: center; align-items: center;
  width: 102px; height: 35px; background: rgba(0, 0, 0, 0.5); border-radius: 20px;}
.swiper-controls > * {flex: none; width: auto; display: block;}
.swiper-controls a {color: #fff;}
.swiper-controls a.swiper-prev,
.swiper-controls a.swiper-next {display: block; width: 8px; height: 13px;}
.swiper-controls a.swiper-prev {background: url(/img/main/v_prev.png) 50% 50% no-repeat; background-size: 100% auto;}
.swiper-controls a.swiper-next {background: url(/img/main/v_next.png) 50% 50% no-repeat; background-size: 100% auto; margin: 0 10px 0 0;}
.swiper-controls a.swiper-button-play {margin: 0 10px; display: none; width: 9px; height: 10px; background: url(/img/main/play.png) 50% 50% no-repeat; background-size: 100% auto;}
.swiper-controls a.swiper-button-pause {margin: 0 5px; display: block; width: 8px; height: 10px; background: url(/img/main/pause.png) 50% 50% no-repeat; background-size: 100% auto;}
.swiper-controls span {color: #fff; font-size: 15px; font-weight: 800; font-family: 'Lato', sans-serif; letter-spacing: -0.03em;}
.mainVisual .swiper-slide img {display: block; width: 100%; height: 100%;}

.main {width: 100%; padding: 0 18px 50px; box-sizing: border-box;}

.notice_area {margin: 36px 0 0; position: relative;}
.notice_area h3 {font-size: 20px; font-weight: 700; margin: 0 0 16px;}
.notice-more {position: absolute; right: 0; top: 0;}
.notice_lst {margin: 20px 0 0;}
.notice_lst li {position: relative; width: 100%; font-size: 15px; line-height: 30px; font-weight: 400; display: flex; justify-content: space-between; align-items: center;}
.notice_lst li::before {content: ''; display: block; width: 4px; height: 4px; border-radius: 2px; background: var(--m-color); position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
.notice_lst li a {padding: 0 12px 0 15px; box-sizing: border-box; display: block; width: calc(100% - 74px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; color: #252525; flex: none;}
.notice_lst li span {flex: none; text-align: right; font-size: 14px; color: #777; font-weight: 400;}
.notice_box {border-bottom: 1px solid #d9d9d9; box-sizing: border-box; padding: 0 0 16px; margin: 0 0 16px;}
.notice_box > a{width: 100%; display: flex; justify-content: space-between; align-items: flex-start; align-content: flex-start;}
.notice_box .notice_left {flex: none; margin: 0 14px 0 0;}
.notice_box .notice_left .date_box {font-size: 13px; color: #777; font-weight: 500; text-align: center; width: 72px; height: 72px; background: #f3f3f3; border-radius: 50%; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap;}
.notice_box .notice_left .date_box b {width: 100%; text-align: center; font-size: 22px; color: #000; font-weight: bold;}
.notice_box .notice_right {width: calc(100% - 86px); flex: none;}
.notice_box .notice_right h3 {margin: 4px 0 0; font-size: 16px; font-weight: 500; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; letter-spacing: -0.065em;}
.notice_box .notice_right p {margin: 4px 0 0; height: 45px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; font-weight: 400; color: #777; line-height: 22px; overflow: hidden; text-overflow: ellipsis; width: 100%; letter-spacing: -0.065em;}


.goods_area {margin: 32px 0 0; border-radius: 20px; width: 100%; background: #f1f1f1; padding: 20px; box-sizing: border-box;}
.goods_area h3 {font-size: 18px; color: #222; font-weight: 500; padding: 0 0 0 42px; box-sizing: border-box; position: relative; margin: 0 0 22px;}
.goods_area h3::before {content : ''; display: block; width: 35px; height: 35px; background: #fff url(/img/main/best.png) 50% 50% no-repeat; background-size: 23px auto; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: 0; }
.goods_area ul {display: block;}
.goods_area li {flex-wrap: wrap; margin: 0 0 16px; display: flex; justify-content: flex-start; align-items: stretch; width: 100%; min-height: 70px; background: #fff; }
.goods_area li h4 {flex: none; width: 80px; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -0.065em;}
.goods_area li .cont {padding: 10px; box-sizing: border-box; flex: none; width: calc(100% - 80px); display: flex; justify-content: flex-start; align-items: center; align-content: center; flex-wrap: wrap;}
.goods_area li:first-of-type h4 {background: #f24365;}
.goods_area li:nth-of-type(2) h4 {background: #f243b6;}
.goods_area li:nth-of-type(3) h4 {background: #f29e43;}
.goods_area li span {display: inline-block; text-align: left; font-weight: 700; color: #777; letter-spacing: -0.065em; font-size: 15px; line-height: 30px; padding: 0 0 0 14px; box-sizing: border-box;}
.goods_area li span b {color: #222; font-weight: 500; display: inline-block; margin: 0 0 0 6px;}
.goods_area li:first-of-type span:first-of-type {color: #ff5050;}
.goods_area li:nth-of-type(2) span:first-of-type {color: #f243b6;}
.goods_area li:nth-of-type(3) span:first-of-type {color: #f29e43;}
.notice_list { overflow: hidden; margin: 4px 0}
.notice_list .subject { background: url(/img/ic_dot.gif) no-repeat 0 10px; float: left; font-size: 15px; font-weight: 500; letter-spacing: -1px}
.notice_list .date { float: right}
.left_bn { margin: 30px 0 0 0}
.left_bn li { text-align: center; margin: 0 0 10px 0;}

.contents_box {width: 100%; padding: 0 18px calc(100% * 225 / 410); box-sizing: border-box;}
.contents_box.program_box { background: url(/m/img/sub/sub_bg.png) 50% 100% no-repeat; background-size: calc(100% - 40px) auto; }
.contents_box.login_inner { padding: 0 18px 80px; }
.contents_title { font-size: 22px; color: #222; letter-spacing: -0.065em; font-weight: 700; line-height: 22px; margin: 36px 0 28px;}
.table_wrap {width: 100%; background: #f3f3f3; border-radius: 10px; overflow: hidden;}
.table_wrap + .table_wrap {margin: 20px 0 0;}
.table_wrap table {width: 100%; }
.table_wrap thead,
.table_wrap tbody {width: 100%;}
.table_wrap tr {width: 100%;}
.table_wrap th {padding: 16px 8px; box-sizing: border-box; font-size: 15px; color: #222; font-weight: 700; letter-spacing: -0.065em; text-align: center; vertical-align: middle; width: 25%; border-bottom: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; box-sizing: border-box;}
.table_wrap th:last-of-type {border-right: 0;}
.table_wrap td {padding: 16px 8px; box-sizing: border-box; font-size: 15px; color: #222; font-weight: 500; letter-spacing: -0.065em; text-align: center; vertical-align: middle; width: 25%; border-bottom: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; box-sizing: border-box;}
.table_wrap td:last-of-type {border-right: 0;}
.table_wrap tr:last-of-type td {border-bottom: 0;}
.table_wrap tr.color td {color: var(--m-color);}

@media all and (max-width: 350px) {
  .table_wrap th {font-size: 14px; word-break: keep-all; width: calc((100% - 50px) / 3);}
  .table_wrap th:first-of-type {width: 50px; padding: 16px 0;}
  .table_wrap td:first-of-type {width: 50px; padding: 16px 0;}
  .table_wrap td {font-size: 14px; word-break: keep-all; width: calc((100% - 50px) / 3);}

  .contents_title {font-size: 18px; margin: 28px 0 20px;}
}
@media all and (max-width: 320px) {
  .table_wrap th {font-size: 13px;}
  .table_wrap td {font-size: 13px;}
}

.point_table {width: 100%; margin: 36px 0 0;}
.point_table tbody {width: 100%;}
.point_table tr {width: 100%;}
.point_table td {width: 50%; font-size: 14px; color: #444; letter-spacing: -0.065em; font-weight: 400;}
.point_table td[colspan="2"] {width: 100%;}
.point_table td.date {text-align: right; font-family: 'Lato', sans-serif; color: #777;}
.point_table td.sub_ttl em {font-family: 'Lato', sans-serif; font-weight: 800;}
.point_table td.ttl {font-size: 16px; font-weight: 700; color: #222; line-height: 30px;}
.point_table .table_div {margin: 0 0 30px; padding: 0 18px; flex-wrap: wrap; align-content: center; display: flex; justify-content: space-between; align-items: center; width: 100%; border: 1px solid #eee; box-sizing: border-box; border-radius: 12px; min-height: 45px;}
.point_table .table_div span {display: block; flex: none;}
.point_table .table_div span b {color: var(--m-color); font-weight: 500;}


.login_inner ul {margin: 0 auto;}
.login_inner ul li {display: block; text-align: center;}
.login_inner ul.left {margin: 10px 0 0;}
.login_inner ul.left li {text-align: left;}
.login_inner table {width: 280px; margin: 30px auto 0;}
.login_inner table th,
.login_inner table td {vertical-align: middle;}
.login_inner table td .input01 {padding: 0 8px; width: 200px; height: 42px; box-sizing: border-box; margin: 1px 0; border: 1px solid #d9d9d9; background: #fff; font-family: inherit;}
.login_inner table td button {width: 80px; justify-content: center; display: flex; border: 0; background: var(--m-color); font-family: inherit; height: 86px; text-align: center; align-items: center; color: #fff;
font-size: 15px; }
.id_chk_div {width: 100%; max-width: 260px; margin: 4px auto 0;}
.id_chk_div label {font-size: 14px; color: #777; letter-spacing: -0.065em;}


@media all and (max-width: 320px) {
  .login_inner table {width: 220px;}
  .login_inner table td .input01 {width: 160px;}
  .id_chk_div {max-width: 220px;}

}

#member_tab ul {width: 100%; display: flex; justify-content: center; align-items: center; font-family: inherit;}
#member_tab ul li {flex: none; width: 50%; height: 36px;}
#member_tab ul li a {background: #fff; letter-spacing: -0.045em; font-weight: 500; color: #777; font-size: 15px; text-align: center; line-height: 36px; display: block; width: 100%; border: 1px solid #eeee; box-sizing: border-box;  }
#member_tab ul li.ui-tabs-active a {color: var(--m-color); font-weight: 700; border-color: var(--m-color);}
#member_tab ul li.ui-state-active a {color: var(--m-color); font-weight: 700; border-color: var(--m-color);}


@media all and (max-width: 320px) {
  #member_tab ul li {width: 80px;}
}



.contents_box.awards_area {padding: 0 18px 205px; box-sizing: border-box;}
.awards_area .contents_title {margin: 52px 0 84px;}
.awards_flex {width: 100%; }
.awards_flex .awards_box {position: relative; margin: 30px auto 0; width: 100%; padding: 0 16px; flex: none; max-width: 300px; height: 189px; border: 1px solid #ddd; box-sizing: border-box; border-top-left-radius: 20px; border-bottom-right-radius: 20px;}
.awards_flex h3 {color: #ccc; border-bottom: 1px solid #ddd; height: 80px; width: 100%; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 18px; font-weight: 700; letter-spacing: -0.065em;}
.awards_cont {width: 100%; height: calc(100% - 80px); padding: 22px 5px 0; box-sizing: border-box; }
.awards_cont::after {position: absolute; top: 70px; right: 20px; content: ''; display: block; width: 120px; height: 97px; background: url(/img/sub/stamp_off.png) 50% 50% no-repeat; background-size: 100% auto;}
.awards_cont p {display: flex; justify-content: flex-start; align-items: center; width: 100%;}
.awards_cont p + p {margin: 14px 0 0;}
.awards_cont b {display: inline-block; width: 50px; flex: none; font-size: 15px; font-weight: 700; letter-spacing: -0.065em; color: #ccc;}
.awards_cont em {display: none; font-size: 15px; letter-spacing: -0.065em;font-weight: 400; color: #ccc;}
.awards_cont span {display: none; font-family: 'Lato', sans-serif; font-size: 14px;  font-weight: 400; color: #ccc;}
.awards_box.active .awards_cont b {color: #222;}
.awards_box.active .awards_cont em {display: inline-block; color: #222;}
.awards_box.active .awards_cont span {display: inline-block; color: #222;}
.awards_box.active {border-color: var(--m-color);}
.awards_box.active h3 {border-color: var(--m-color); color: var(--m-color);}
.awards_box.active .awards_cont::after { background: url(/img/sub/stamp_active.png) 50% 50% no-repeat; background-size: 100% auto;}

.awards_area ol {max-width: 410px; margin: 0 auto; position: relative; padding: 20px 0 0; box-sizing: border-box; width: 100%; display: flex; justify-content: center; align-items: center; background: #eee; height: 30px; border-radius: 25px;}
.awards_area ol li {flex: none; width: 100px; margin: 0 26px 0 0;}
.awards_area ol li:last-of-type {margin: 0;}
.awards_area ol li .bar {background: #eee; position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ''; display: block;
   height: 30px; border-radius: 25px; z-index: 4; width: 45%;}
.awards_area ol li:nth-of-type(2) .bar {width: 85%;}
.awards_area ol li:nth-of-type(3) .bar {width: 100%;}
.awards_area ol li.active {}
.awards_area ol li .bg {z-index: 8; position: relative; width: 100%; height: 100px; border-radius: 50%; border: 4px solid #eee; box-sizing: border-box; background: #fff url(/img/sub/bell_off.png) 50% 50% no-repeat; background-size: 45% auto;}
.awards_area ol li.active .bg {background: #fff url(/img/sub/bell.png) 50% 50% no-repeat; background-size: 45% auto; border-color: #fab11d; }
.awards_area ol li.active {}
.awards_area ol li.active .bg {}
.awards_area ol li.active .bar {background: #fab11d; z-index: 5;}
.awards_area ol li h4 {white-space: nowrap; text-align: center; font-size: 16px; letter-spacing: -0.065em; font-weight: 500; color: #eee; margin: 20px 0 0;}
.awards_area ol li.active h4 {color: #fab11d;}

@media all and (max-width: 420px) {
  .awards_area ol li {width: 80px; margin: 0 13px 0 0;}
  .awards_area ol li:last-of-type {margin: 0;}
  .awards_area ol li .bg {height: 80px;}
  .awards_area ol li h4 {font-size: 15px;}
}


@media all and (max-width: 320px) {
  .awards_area ol li {width: 70px; margin: 0 10px 0 0;}
  .awards_area ol li:last-of-type {margin: 0;}
  .awards_area ol li .bg {height: 70px;}
  .awards_area ol li h4 {font-size: 13px;}

}

.partner_container {width: 100%; position: relative; box-sizing: border-box; border-left: 0; border-right: 0; padding: 20px 0;}
.partner_container ul {}
.partner_container ul:after {content:''; display:block; clear:both;}
.partner_container ul li {float:left; width: 50%; padding-left:3%; box-sizing: border-box; height: 60px; display: flex; justify-content: center; align-items: center;}
.partner_container ul li:first-child {padding-left:0;}
.partner_container ul li img {display: block; border: 1px solid #c8c8c8; max-width: 100%; max-height: 55px; width: auto; height: auto;}