@charset "UTF-8";
/* ======================================== default */

body {
  font-size: 13px;
  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: #5e5e5e;
  letter-spacing: 0.1em;
  padding-top: 170px;
}
@media only screen and (max-width: 950px) {
  body {
    padding-top: 44px !important;
  }
}
::-moz-selection {
  background: #f3f001;
}
::selection {
  background: #f3f001;
}
img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}
a {
  display: inline-block;
  color: inherit;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  outline: none;
  word-break: break-all;
}
.formReset {
  outline: none;
  border: 1px solid transparent;
  padding: 0;
  margin: 0;
  background-color: #f5f5f5;
  border-radius: 5px;
  padding: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 12px;
  vertical-align: middle;
}
input,select {
  outline: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 3px;
  vertical-align: middle;
  max-width: 100%;
}
button {
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.1em;
  outline: none;
}
input:focus {
  border-color: #00a439;
}

/* ======================================== icons */
@font-face {
  font-family: 'icomoon';
  src:url('../icons/icomoon.eot?-dxcve3');
  src:url('../icons/icomoon.eot?#iefix-dxcve3') format('embedded-opentype'),
    url('../icons/icomoon.ttf?-dxcve3') format('truetype'),
    url('../icons/icomoon.woff?-dxcve3') format('woff'),
    url('../icons/icomoon.svg?-dxcve3#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-about_company:before {
  content: "\e600";
}
.icon-about_itec:before {
  content: "\e601";
}
.icon-address:before {
  content: "\e602";
}
.icon-agreement:before {
  content: "\e603";
}
.icon-arrow_circle_bottom:before {
  content: "\e604";
}
.icon-arrow_circle_right:before {
  content: "\e605";
}
.icon-arrow_circle_top:before {
  content: "\e606";
}
.icon-arrow_down:before {
  content: "\e607";
}
.icon-arrow_left:before {
  content: "\e608";
}
.icon-arrow_right:before {
  content: "\e609";
}
.icon-arrow_up:before {
  content: "\e60a";
}
.icon-arrow:before {
  content: "\e60b";
}
.icon-autumn:before {
  content: "\e60c";
}
.icon-bar:before {
  content: "\e60d";
}
.icon-battery:before {
  content: "\e60e";
}
.icon-blog:before {
  content: "\e60f";
}
.icon-board:before {
  content: "\e610";
}
.icon-book:before {
  content: "\e611";
}
.icon-business_outline:before {
  content: "\e612";
}
.icon-calender:before {
  content: "\e613";
}
.icon-category_store:before {
  content: "\e614";
}
.icon-category:before {
  content: "\e615";
}
.icon-check:before {
  content: "\e616";
}
.icon-check02:before {
  content: "\e617";
}
.icon-circle_search:before {
  content: "\e618";
}
.icon-circle:before {
  content: "\e619";
}
.icon-close_box:before {
  content: "\e61a";
}
.icon-close:before {
  content: "\e61b";
}
.icon-correspondence_course:before {
  content: "\e61c";
}
.icon-courselist:before {
  content: "\e61d";
}
.icon-coursetree:before {
  content: "\e61e";
}
.icon-curriculum:before {
  content: "\e61f";
}
.icon-ebook:before {
  content: "\e620";
}
.icon-entry:before {
  content: "\e621";
}
.icon-facebook_news:before {
  content: "\e622";
}
.icon-facebook:before {
  content: "\e623";
}
.icon-feature:before {
  content: "\e624";
}
.icon-flag_long:before {
  content: "\e625";
}
.icon-flag:before {
  content: "\e626";
}
.icon-folder:before {
  content: "\e627";
}
.icon-groval:before {
  content: "\e628";
}
.icon-heart:before {
  content: "\e629";
}
.icon-home_pan:before {
  content: "\e62a";
}
.icon-home_recommend:before {
  content: "\e62b";
}
.icon-home:before {
  content: "\e62c";
}
.icon-house:before {
  content: "\e62d";
}
.icon-icon_circle_mailmaga:before {
  content: "\e62e";
}
.icon-imgfile:before {
  content: "\e62f";
}
.icon-last_entry:before {
  content: "\e630";
}
.icon-last_entry2:before {
  content: "\e631";
}
.icon-learning:before {
  content: "\e632";
}
.icon-logo:before {
  content: "\e633";
}
.icon-mail_maga:before {
  content: "\e634";
}
.icon-mail:before {
  content: "\e635";
}
.icon-minus:before {
  content: "\e636";
}
.icon-more:before {
  content: "\e637";
}
.icon-movie:before {
  content: "\e638";
}
.icon-must_read:before {
  content: "\e639";
}
.icon-mycorse:before {
  content: "\e63a";
}
.icon-myhome:before {
  content: "\e63b";
}
.icon-mypage_menu:before {
  content: "\e63c";
}
.icon-mypage:before {
  content: "\e63d";
}
.icon-news_2:before {
  content: "\e63e";
}
.icon-news:before {
  content: "\e63f";
}
.icon-no1:before {
  content: "\e640";
}
.icon-no2:before {
  content: "\e641";
}
.icon-no3:before {
  content: "\e642";
}
.icon-no4:before {
  content: "\e643";
}
.icon-no5:before {
  content: "\e644";
}
.icon-no6:before {
  content: "\e645";
}
.icon-pickup_seminor:before {
  content: "\e646";
}
.icon-pickup:before {
  content: "\e647";
}
.icon-plus:before {
  content: "\e648";
}
.icon-pretest:before {
  content: "\e649";
}
.icon-pretestnavi:before {
  content: "\e64a";
}
.icon-privilege:before {
  content: "\e64b";
}
.icon-profile:before {
  content: "\e64c";
}
.icon-readmore:before {
  content: "\e64d";
}
.icon-recommend:before {
  content: "\e64e";
}
.icon-record:before {
  content: "\e64f";
}
.icon-recruit:before {
  content: "\e650";
}
.icon-report:before {
  content: "\e651";
}
.icon-save-file:before {
  content: "\e652";
}
.icon-search_nav:before {
  content: "\e653";
}
.icon-search:before {
  content: "\e654";
}
.icon-search02:before {
  content: "\e655";
}
.icon-seminor:before {
  content: "\e656";
}
.icon-spring:before {
  content: "\e657";
}
.icon-stamp:before {
  content: "\e658";
}
.icon-store_cart:before {
  content: "\e659";
}
.icon-store:before {
  content: "\e65a";
}
.icon-style:before {
  content: "\e65b";
}
.icon-such_one:before {
  content: "\e65c";
}
.icon-tel:before {
  content: "\e65d";
}
.icon-time:before {
  content: "\e65e";
}
.icon-time2:before {
  content: "\e65f";
}
.icon-tool:before {
  content: "\e660";
}
.icon-track:before {
  content: "\e661";
}
.icon-ttl_home:before {
  content: "\e662";
}
.icon-ttl_learning:before {
  content: "\e663";
}
.icon-ttl_mypage:before {
  content: "\e664";
}
.icon-ttl_store:before {
  content: "\e665";
}
.icon-twitter_news:before {
  content: "\e666";
}
.icon-twitter:before {
  content: "\e667";
}
.icon-txtfile:before {
  content: "\e668";
}
.icon-voice:before {
  content: "\e669";
}
.icon-webcourse:before {
  content: "\e66a";
}
.icon-yen:before {
  content: "\e66b";
}
.icon-external_link:before {
  content: "\e66c";
}
.icon-glossary:before {
  content: "\e66d";
}
.icon-html:before {
  content: "\e66e";
}
.icon-learning_contents:before {
  content: "\e66f";
}
.icon-questionnaire:before {
  content: "\e670";
}
.icon-submission:before {
  content: "\e671";
}
.icon-test:before {
  content: "\e672";
}



/* ======================================== utility */

.none {
  display: none;
}
.bold {
  font-weight: bold;
}
.alignC {
  text-align: center;
}
.alignR {
  text-align: right;
}
.floatL {
  float: left;
  width: 50%;
}
.floatR {
  float: right;
  width: 45%;
}
/* additional css */
.clearboth {
  clear: both;
}
@media only screen and (max-width: 950px) {
  .floatL,.floatR {
    float: none;
    width: auto;
  }
}
@media only screen and (min-width: 951px) {
  .sp {
    display: none !important;
  }
}
@media only screen and (max-width: 950px) {
  .pc {
    display: none !important;
  }
}
@media only screen and (max-width: 340px) {
  .min {
    display: none;
  }
}
.fz12 {
  font-size: 12px;
}
.underline {
  text-decoration: underline;
}
.textGreen {
  color: #00a439;
}

/* ======================================== component */

/* --------------------layout */

.inner {
  width: 950px;
  padding-left: 25px;
  padding-right: 25px;
  margin: auto;
}
@media only screen and (max-width: 950px) {
  .inner {
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
    margin: auto;
  }
}
.main {
  margin: 32px auto 50px;
}
.mainHome {
  margin-top: 0;
}
.content800 {
  width: 800px;
  margin: auto;
}
.content720 {
  width: 720px;
}
.content490 {
  width: 490px;
}
.content680 {
  width: 680px;
  margin-right: 20px;
}
@media only screen and (max-width: 950px) {
  .main {
    padding-top: 20px;
    margin-top: 0;
  }
  .mainHome {
    margin-top: -20px;
  }
  .content720 {
    width: auto;
  }
  .content490 {
    width: auto;
  }
  .content680 {
    margin-right: auto;
    width: auto;
  }
  .content800 {
    width: auto;
  }
}
.sidebar {
  width: 215px;
  font-size: 11px;
}
@media only screen and (max-width: 950px) {
  .sidebar {
    width: auto;
  }
}
.bgGray {
  background-color: #f5f5f5;
}

/* --------------------mv */

.mv {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right;
  border-bottom: 1px solid #eee;
}
.mvBody{
  min-height: 130px;
  display: table;
  width: 100%;
  vertical-align: middle;
  height: 130px;
}
.mvText {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  line-height: 1.8;
  font-weight: normal;
}
.mvImg01 {
  background-image: url(../img/learning/img_learning_smartphone.jpg);
}
.mvImgMain {
  background-image: url(../img/common/img_visual.jpg);
  padding-top: 10px;
  padding-bottom: 10px;
}
@media only screen and (max-width: 1200px) {
  .mvImgMain {
    background-position: center center;
  }
}
@media only screen and (max-width: 950px) {
  .mvBody {
    min-height: inherit;
    padding: 30px 0;
    height: auto;
  }
  .mvText {
    font-size: 18px;
    text-shadow: 0 0 1px rgba(255,255,255,1),0 0 1px rgba(255,255,255,1),0 0 1px rgba(255,255,255,1),0 0 1px rgba(255,255,255,1);
  }
  .mvImgMain {
    /*background: #fff;
    background-image: none;*/
  }
  .mvImgMain > div > img {/* for ie8  */
    display: none;
  }
}
.recommendSlider li {
  text-align: center;
}


/* --------------------single component */

.cover {
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
  top: 0;
}

/* ----- btn -----*/

.btn {
  display: inline-block;
  text-align: center;
  padding: 10px 10px 7px;
  border-radius: 4px;
}
.btnBlock {
  display: block;
  box-sizing: border-box;
  width: 100%;
}
.btnBlock button{
  font-size: 14px;
}
.btnGreen {
  background-color: #00a439;
  color: #fff;
}
.btnGreen:hover {
  color: #3b3b3b;
  background-color: #f3f001;
}
.btnOrange {
  background-color: #ffbe10;
  color: #fff;
}
.btnOrange:hover {
  background-color: #FF6464;
  color: #fff;
}
.btnOrange2 {
  background-color: #ff7901;
  color: #fff;
}
.btnOrange2:hover {
  background-color: #FFBE10;
}
.btnYellow {
  background-color: #f3f001;
  color: #3b3b3b;
}
.btnYellow:hover {
  background-color: #00a439;
  color: #fff;
}
.btnGray {
  background-color: #e9e9e9;
}
.btnGray:hover {
  color: #3b3b3b;
  background-color: #f3f001;
}
.btnRed {
  background-color: #ff6262;
  color: #fff;
}
.btnRed:hover {
  color: #ff6262;
  background-color: #fff;
}
.btnRed2 {
  background-color: #ff6464;
  color: #fff;
}
.btnRed2:hover {
  color: #3b3b3b;
  background-color: #f3f001;
}
.btnWhite {
  background-color: #fff;
  color: #00a439;
}
.btnWhite:hover {
  color: #fff;
  background-color: #00a439;
}
.btnLarge {
  font-size: 16px;
  padding: 10px 38px 7px;
  font-weight: bold;
  letter-spacing: 0.2em;
}
.btnLarge .icon {
  font-size: 23px;
  margin-right: 5px;
}
.btnLarge2 {
  font-size: 16px;
  padding: 20px 38px 17px;
  font-weight: bold;
  letter-spacing: 0.2em;
}
.btnLarge2 .icon {
  font-size: 18px;
  margin-right: 10px;
  left: -4px;
  position: relative;
  top: -1px;
}
.btnMid {
  padding: 10px 40px;
}
.btnMid .icon {
  font-size: 30px;
}
.btnSmall {
  font-size: 10px;
  padding: 3px 10px;
}
.btnSmall2 {
  padding: 10px 3px 9px;
  font-size: 12px;
}
.btnMenu {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  border-radius: 4px;
}
.btnGhostGreen {
  border: 1px solid #00a439;
  color: #00a439;
}
.btnGhostGreen:hover {
  background-color: #f3f001;
  border-color: #f3f001;
}
.btnGhostWhite {
  border: 2px solid #fff;
  color: #fff;
}
.btnGhostWhite:hover {
  background-color: rgba(0,0,0,0.4);
  border-color: #fff;
}
.btnGhostOrange {
  border: 2px solid #ff7901;
  color: #ff7901;
}
.btnGhostOrange:hover {
  background-color: #ff7901;
  border-color: #ff7901;
  color: #fff;
}
.btnIcon {
  margin-right: 5px;
  font-size: 140%;
}
.icon-check02 {
  position: relative;
  top: -2px;
}
.btnSquare {
  font-size: 9px;
  padding: 5px;
}
.btnSquare .icon {
  display: block;
  font-size: 20px;
  margin-bottom: 4px;
}
.btnSquareMid {
  background-color: #fff;
  border-radius: 4px;
  text-align: center;
  line-height: 1.3;
  padding: 7px 16px;
  position: relative;
}
.btnSquareMid:hover {
  background: rgba(255,255,255,0.9);
}
.btnSquareMid .icon {
  color: #00a439;
  font-size: 30px;
  margin-top: 8px;
}
.btnSquareMidGray {
  background-color: #eee;
}
.btnSquare .icon-arrow_right {
  position: absolute;
  font-size: 9px;
  right: 3px;
  top: 43%;
  color: #888;
  margin-top: 0;
}
.btnPretty {
  padding: 7px 3px;
  overflow: hidden;
}
.btnPretty1,
.btnPretty2 {
  display: block;
  float: left;
}
.btnPretty1 {
  float: left;
  width: 38%;
  font-size: 22px;
  position: relative;
  top: 2px;
}
.btnPretty2 {
  float: right;
  text-align: left;
  width: 61%;
  padding-left: 3px;
  box-sizing: border-box;
  font-size: 10px;
  line-height: 1.3;
  position: relative;
}
.secondNav .btnPretty2 {
  top: -2px;
}
.btnPretty2Detail {
  width: 54%;
}
@media only screen and (min-width: 951px) {
  .btnPretty1.icon-readmore {
    text-align: right;
    width: 48%;
  }
  .btnPretty2Detail {
    width: 52%;
  }
}
@media only screen and (max-width: 950px) {
  .btnPretty1 {
    text-align: right;
    width: 42%;
  }
  .btnPretty2 {
    width: 57%;
  }
  .btnPretty2Detail {
    width: 54%;
  }
}
.btnRadius {
  display: inline-block;
  background-color: #ccc;
  color: #fff;
  border-radius: 10px;
  padding: 4px 13px 3px;
  margin: 0 5px;
}
.btnRadius.active,
.btnRadius:hover {
  background-color: #00a439;
}
.btnRadiusOrange.active,
.btnRadiusOrange:hover {
  background-color: #fd7923;
}
.btnBiggest {
  display: block;
  position: relative;
  padding: 0;
  letter-spacing: 0.17em;
}
.btnBiggestBody {
  display: block;
  position: relative;
  z-index: 10;
  top: -4px;
  left: -3px;
  text-align: left;
  background-color: #f3f001;
  position: relative;
  border-radius: 4px;
  padding: 20px 10px;
  z-index: 3;
  transition: all 0.3s ease;
  color: #343434;
  font-weight: bold;
  font-size: 24px;
}
.btnBiggestBody:hover {
  top: 0;
  left: 0;
}
.btnBiggest:after {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  z-index: 1;
  height: 100%;
  background-color: #00a439;
  border-radius: 4px;
  top: 0;
  left: 0;
}
.btnBiggest .icon {
  color: #00a439;
  font-size: 60px;
}
.btnBiggestIcon {
  float: left;
  width: 20%;
}
.btnBiggestText {
  float: right;
  padding-top: 5px;
  width: 78%;
}
.btnBiggestTextS {
  font-size: 10px;
  display: block;
  margin-bottom: 13px;
  letter-spacing: 0.18em;
}
.btnBiggestTextL {
  font-size: 23px;
}
.btnBiggestTextG {
  color: #00a439;
}
@media only screen and (max-width: 950px) {
  .btnBiggestBody {
    top: -2px;
    left: -2px;
    padding: 10px 8px;
    font-size: 18px;
    text-align: center;
  }
  .btnBiggestIcon {
    display: none;
  }
  .btnBiggestText {
    float: none;
    padding-top: 0;
    width: auto;
  }
  .btnBiggestTextS {
    font-size: 10px;
    margin-bottom: 10px;
    letter-spacing: 0;
  }
  .btnBiggestTextL {
    font-size: 18px;
  }
}
.btnArrow {
  position: relative;
}
.btnArrow .icon-arrow_right {
  position: absolute;
  font-size: 10px;
  top: 50%;
  margin-top: -5px;
  right: 5px;
}

.btnCircle {
  width: 145px;
  height: 145px;
  border: 3px solid #00a439;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
}
.btnCircleTtl {
  background-color: #00a439;
  color: #fff;
  padding: 5px 0 3px;
  font-size: 15px;
  margin-bottom: 5px;
  transition: all 0.5s ease;
}
.btnCircleIcon {
  font-size: 45px;
  color: #3c3c3c;
}
.btnCircleIcon.icon-category_store {
  position: relative;
  left: 8px;
}
.btnCircleText {
  font-size: 10px;
  line-height: 1.4;
  margin-top: 3px;
}
.btnCircle .icon-arrow_circle_bottom,
.btnCircle .icon-arrow_circle_right {
  color: #00a439;
  font-size: 25px;
  transition: all 0.5s ease;
}
.btnCircleSmall {
  width: 118px;
  height: 118px;
  padding: 10px 0;
}
.btnCircleSmall .btnCircleTtl {
  font-size: 12px;
  margin-bottom: 8px;
}
.btnCircleSmall .icon {
  display: block;
  margin-bottom: 3px;
}
.btnCircle:hover {
  border-color: #f4f11a;
}
.btnCircle:hover .btnCircleTtl {
  background-color: #f4f11a;
  color: #333;
}
.btnCircle:hover .icon-arrow_circle_bottom,
.btnCircle:hover .icon-arrow_circle_right {
  color: #f4f11a;
}
/* ----- ttl -----*/

.ttlBorder .icon {
  font-size: 40px;
  margin-right: 5px;
}
.ttlBorder {
  border-left: 5px solid #00a439;
  color: #00a439;
  font-size: 18px;
  padding:  3px 10px 2px 18px;
  position: relative;
  margin-bottom: 30px;
  line-height: 1.5;
}
.ttlBorder:after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: #00a439;
  position: absolute;
  left: 0;
  bottom: -8px;
}
.ttlBorderBottom {
  border-left: none;
  padding-left: 0;
}
.ttlBorderBottom .icon {
  position: relative;
  top: -2px;
}
.ttlBorderBottom:after {
  bottom: -4px;
}
.ttlBorderSmall {
  font-size: 15px;
}
.ttlBorderSmall .icon {
  font-size: 33px;
  position: relative;
  top: -2px;
}
.ttlBorderSmall:after {
  height: 2px;
  bottom: -2px;
}
.iconPencil:after {
  width: 600px;
}
.iconPencil .icon {
  position: absolute;
  top: inherit;
  bottom: -1px;
  right: 1px;
}
.ttlOrange {
  border-bottom: 2px solid #ffbe10;
  padding-bottom: 3px;
  margin-bottom: 10px;
  font-weight: normal;
  font-size: 16px;
}
.ttlOrange .icon {
  font-size: 24px;
  position: relative;
  top: -2px;
  margin-right: 3px;
}
.ttlOrange .icon.icon-category_store {
  margin-left: 0;
}
@media only screen and (max-width: 950px) {
  .ttlBorder {
    font-size: 15px;
  }
  .iconPencil {
    padding-right: 0;
  }
  .iconPencil:after {
    width: 100%;
  }
  .iconPencil .icon {
    display: none;
  }
  .ttlBorderSmall {
    font-size: 13px;
  }
}
@media only screen and (max-width: 645px) {
  .ttlHasIcon {
    padding-left: 54px;
    position: relative;
    min-height: 2.5em;
  }
  .ttlHasIcon .icon {
    left: 0;
    top: 6px;
    position: absolute;
  }
  .storeMegaMenuTtl.ttlHasIcon {
    padding-left: 44px;
    text-align: left;
  }
}
.ttlGray {
  font-size: 13px;
  background-color: #f8f8f8;
  padding: 8px 10px 6px;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* ----- page component -----*/

.text {
  line-height: 1.7;
}
.sidebarText {
  line-height: 1.3;
}
.paragraph {
  margin-bottom: 1em;
}
.section {
  margin-bottom: 42px;
}
.sectionInner {
  padding: 0 15px;
}
@media only screen and (max-width: 950px) {
  .sectionInner {
    padding: 0 10px;
  }
}
.normalLink {
  color: #20a8ff;
  text-decoration: underline;
}
.normalLink:hover {
  text-decoration: none;
}

/* --------------------green block */

.gBlock {
  border-radius: 4px;
  border: 2px solid #00a439;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.gBlockHeader {
  background-color: #00a439;
  color: #fff;
  text-align: center;
  font-size: 14px;
  height: 44px;
  box-sizing: border-box;
  padding: 11px 0 0;
  position: relative;
}
.gBlockHeaderSingle {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.gBlockHeaderBtn {
  display: block;
  position: absolute;
  left: 1px;
  top: 3px;
}
.gBlockHeaderBtn .icon:before {
  font-size: 13px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.gBlockHeaderBtn:hover .icon:before {
  left: -2px;
}
.gBlockHeader .icon {
  font-size: 24px;
  vertical-align: middle;
  padding: 0 0.5em 0 0;
  position: relative;
  top: -2px;
}
.gBlockHeader .icon-mycorse {
  font-size: 30px;
  display: inline-block;
  margin-top: -3px;
}
.gBlockBodyL {
  padding: 18px 17px 0;
}
.gBlockBodySidebar {
  padding: 8px 8px 14px;
}
.gBlockBodySidebarInterval {
  padding: 20px 20px;
}
.gBlockBodySingle {
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 10px;
}
.gBlockClose a {
  display: block;
  background-color: #00a439;
  color: #fff;
  text-align: center;
  font-size: 20px;
  padding: 4px 0 1px;
}
.gBlockClose a .icon {
  position: relative;
  top: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.gBlockClose a:hover .icon {
  top: -2px;
}
.close .gBlockClose a .icon {
  top: -2px;
}
.close .gBlockClose a:hover .icon {
  top: 1px;
}

/* --------------------green header */

.gHeader {
  background-color: #00a439;
  color: #fff;
  border-radius: 4px;
  font-size: 17px;
  padding: 20px 18px 17px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.gHeader .icon {
  font-size: 28px;
  vertical-align: middle;
  margin-right: 10px;
  position: relative;
  top: -1px;
}
.headingUnderline {
  font-size: 16px;
  font-weight: normal;
  border-bottom: 2px solid #00a439;
  padding: 4px 10px 0;
  margin-bottom: 10px;
  overflow: hidden;
}
.headingUnderline .icon {
  color: #00a439;
  font-size: 34px;
  margin-right: 5px;
  position: relative;
  top: -1px;
}
.headingUnderlineText {
  font-weight: normal;
  float: left;
}
.headingUnderlineCaption {
  text-align: right;
  margin-top: 11px;
}
@media only screen and (max-width: 950px) {
  .gHeader {
    padding: 10px;
  }
  .headingUnderlineCaption {
    text-align: right;
    margin-top: 0;
    clear: both;
    margin-bottom: 8px;
  }
}
.headingEj {
  text-align: center;
  margin-bottom: 30px;
}
.headingEjEn {
  color: #00a439;
  font-size: 40px;
  font-weight: normal;
  margin-bottom: 8px;
}
.headingEjEn img {
  width: auto;
  height: 30px;
}
.headingEjJa {
  font-size: 11px;
}

/* --------------------itemBox */

.itemBox {
  background-color: #f8f8f8;
  padding: 20px;
}
.itemBoxTtl {
  font-size: 20px;
  line-height: 1.5;
  border-bottom: 1px solid #d1d1d1;
  padding-bottom: 7px;
  margin-bottom: 10px;
}
.itemBoxImg {
  position: relative;
  float: left;
}
.itemBoxImg img {
  border: 1px solid #d1d1d1;
}
.itemBoxTag {
  display: inline-block;
  text-align: center;
  padding: 7px 8px 5px;
  border-radius: 4px;
  font-size: 13px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.itemBoxContent {
  float: right;
  width: 360px;
}
.itemBoxPrice {
  font-size: 18px;
  color: #ff4d4d;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.5em;
}
.itemBoxPriceTextSmall {
  font-size: 12px;
}
.itemBoxPriceTextLarge {
  font-size: 22px;
}
.itemBoxNormalPrice {
  color: #7d7d7d;
  font-size: 12px;
  margin-bottom: 1.2em;
}
.itemBoxCord {
  font-size: 14px;
  margin-bottom: 1.2em;
}
.itemBoxForm + p {
  margin-top: 15px;
}
.itemBoxForm li {
  line-height: 1.5;
  margin-bottom: 10px;
}
.itemBoxForm li:last-child {
  margin-bottom: 0;
}
.itemBoxForm input,
.itemBoxForm select {
  margin-left: 20px;
}
.itemBoxForm input {
  width: 30px;
}
.itemBoxForm .btn {
  margin-left: 10px;
}
.iconCircle {
  color: #00a439;
  margin-right: 5px;
}

@media screen and (max-width: 950px){
  .itemBox {
    padding: 12px;
  }
  .itemBoxContent {
    float: none;
    width: auto;
  }
  .itemBoxImg {
    float: none;
    width: 70%;
    max-width: 300px;
    margin: 0 auto 10px;
  }
  .itemBoxImg img {
    width: 100%;
  }
  .itemBoxTtl {
    font-size: 14px;
  }
  .itemBoxPrice {
    font-size: 13px;
  }
  .itemBoxCord {
    font-size: 13px;
  }
  .itemBox .btn {
    display: block;
    margin-left: 0;
  }
}

/* --------------------item list */

.itemList > li {
  margin-bottom: 20px;
}
.itemList .itemBoxTtl {
  font-size: 18px;
}
.itemList .itemBoxPrice {
  font-size: 15px;
}
.itemList .itemBoxImg {
  width: 218px;
}
.itemList .itemBoxContent {
  width: 400px;
}
@media screen and (max-width: 950px){
  .itemList .itemBoxTtl {
    font-size: 14px;
  }
  .itemList .itemBoxPrice {
    font-size: 13px;
  }
  .itemList .itemBoxImg {
    width: 70%;
  }
  .itemList .itemBoxContent {
    width: auto;
  }
  .itemBoxForm .btnSmall {
    margin-top: 10px;
    padding-top: 8px;
    padding-bottom: 7px;
    font-size: 12px;
  }
  .itemBoxForm .btnSmall .icon {
    font-size: 18px;
    margin-right: 5px;
    position: relative;
    top: -1px;
  }
}

/* --------------------card */

.card li {
  float: left;
  width: 48%;
  margin-right: 4%;
  margin-bottom: 4%;
  display: table;
  position: relative;
  line-height: 1.5;
  box-sizing: border-box;
  letter-spacing: 0.03em;
}
.card li:nth-child(2n) {
  float: left;
  margin-right: 0;
}
.card a {
  display: table-cell;
  border: 1px solid #ddd;
  vertical-align: middle;
  text-align: center;
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  width: 100%;
}
.card li:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 3px;
  left: 3px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.card li:hover a,
.card li:hover:before {
  border-color: #00a439;
}
.card4 li {
  width: 23.4%;
  margin-right: 2%;
  margin-bottom: 2%;
}
.card4 li:nth-child(2n) {
  float: left;
  margin-right: 2%;
}
.card4 li:nth-child(4n) {
  margin-right: 0;
}
.card4 li {
  min-height: 100px;
}
.card3 li {
  width: 32%;
  margin-right: 2%;
}
.card3 li:nth-child(2n) {
  float: left;
  margin-right: 2%;
}
.card3 li:nth-child(3n) {
  margin-right: 0;
}
.card6 li {
  width: 13%;
  margin-right: 2%;
  margin-bottom: 2%;
}
.card6 li:nth-child(2n) {
  float: left;
  margin-right: 2%;
}
.card6 li:last-child {
  float: left;
  margin-right: 0;
}
@media only screen and (max-width: 950px) {
  .card4 li {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 4%;
  }
  .card4 li:nth-child(2n) {
    float: left;
    margin-right: 0;
  }
  .card4 li.slvzr-nth-child402n41 {
    margin-right: 0 !important;
  }
  .card3 li {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 4%;
  }
  .card3 li:nth-child(3n) {
    margin-right: 4%;
  }
  .card3 li.slvzr-nth-child403n41 {
    margin-right: 4% !important;
  }
  .card3 li:nth-child(2n) {
    float: left;
    margin-right: 0;
  }
  .card3 li.slvzr-nth-child402n41 {
    margin-right: 0 !important;
  }
  .card6 li {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 4%;
  }
  .card6 li:nth-child(3n) {
    margin-right: 4%;
  }
  .card6 li:nth-child(2n) {
    float: right;
    margin-right: 0;
  }
  .card6 li.slvzr-nth-child402n41 {
    margin-right: 0 !important;
  }
}
.cardFull a {
  padding: 20px 0 25px;
  color: #00a439;
  vertical-align: top;
}
.cardFull .icon {
  font-size: 60px;
}
@media only screen and (max-width: 950px) {
  .cardFull a {
    padding: 10px 0 12px;
    color: #00a439;
  }
}
.card3 .icon {
  font-size: 60px;
}
/*.card3 .cardIconLarge {
  padding-bottom: 0;
}*/
.cardHeading {
  background-color: #f4f4f4;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-bottom: 15px;
  padding: 6px 0 5px;
  font-size: 16px;
  letter-spacing: 0.1em;
}
.cardHeadingLarge {
  font-size: 18px;
}
.cardHeadingSmall {
  font-size: 13px;
  display: table;
  width: 100%;
  height: 35px;
}
.cardHeadingSmallL {
  height: 48px;
}
.cardHeadingSmallText {
  display: table-cell;
  vertical-align: middle;
}
.cardHeadingGreen {
  color: #00a439;
}
@media only screen and (max-width: 950px) {
  .cardHeading {
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
}
.cardTextBlack {
  color: #000;
}
.cardTextBorder {
  color: #585858;
  line-height: 1.8;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  padding: 10px 0;
  margin: auto;
  width: 80%;
}
.cardTextBorder2 {
  text-align: left;
  font-size: 12px;
}
.cardTextProf {
  font-size: 10px;
  color: #585858;
  padding-bottom: 10px;
}
.cardTextProf .icon {
  font-size: 16px;
  margin-right: 10px;
}
.iconMale {
  color: #5dc1b6;
}
.iconFemale {
  color: #ff9fc8;
}
@media only screen and (max-width: 340px) {
  .cardTextBorder {
    text-align: left;
  }
  .cardTextBorder2 {
    font-size: 10px;
    padding: 8px !important;
    margin: 0;
    width: auto !important;
  }
  .cardTextProf {
    font-size: 8px;
    letter-spacing: -1px;
  }
  .cardTextProf .icon {
    font-size: 12px;
    margin-right: 3px;
    margin-left: -5px;
  }
}
.cardFull a:hover .cardHeading {
  background-color: #00a439;
  color: #fff;
}
.cardIcon {
  width: 80%;
  margin: auto;
  padding-bottom: 14px;
}
.cardIconBorder {
  border-bottom: 1px solid #ededed;
}
@media only screen and (max-width: 950px) {
  .card3 .cardIcon .icon {
    font-size: 40px;
  }
}
.abbrText {
  font-size: 54px;
  color: #f3f001;
}
.cardInline {
  text-align: center;
}
.secondNavBody .cardInline {
  margin-left: -20px;
  margin-right: -20px;
}
.cardInline li {
  width: 180px;
  height: 80px !important;
  min-height: 80px;
  margin: 4px 4px 6px;
  display: inline-block;
  float: none !important;
}
.cardInline li:nth-child(2n) {
  margin-right: 4px;
}
.cardPaper li a {
  position: relative;
  z-index: 2;
}
.cardPaper li:after {
  content: "";
  display: block;
  width: 18px;
  height: 20px;
  background: url(../img/common/headernavi_bg_mark.png) 0 0 no-repeat;
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 1;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cardPaper li:hover:after {
  top: -13px;
}
.cardInline a {
  padding: 10px 0;
  display: table;
  height: 80px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.cardInlineLeft,
.cardInlineRight {
  display: table-cell;
  vertical-align: middle;
}
.cardInlineLeft {
  width: 37%;
  margin-right: 2%;
  font-size: 20px;
  color: #f4f11a;
}
.cardInlineRight {
  width: 61%;
  background-color: #f4f4f4;
  padding: 8px 2px;
  box-sizing: border-box;
  font-weight: bold;
}
.cardMid {
  width: 80%;
  margin: auto;
}
@media only screen and (max-width: 950px) {
  .cardMid {
    width: auto;
  }
  .secondNavBody .cardInline {
    margin-left: auto;
    margin-right: auto;
  }
}
.storeMegaMenu {
  position: absolute;
  width: 3000px;
  margin: auto;
  left: 50%;
  top: 184px;
  margin-left: -1500px;
}
.headerFixed .storeMegaMenu {
  top: 202px;
}
.storeMegaMenu .inner {
  padding: 0;
}
.storeMegaMenuTtl {
  color: #00a439;
  text-align: center;
  font-size: 18px;
  margin-bottom: 18px;
}
@media only screen and (min-width: 951px) {
  .storeMegaMenuTtl .icon {
    font-size: 38px;
    position: relative;
    top: -1px;
  }
  .storeMegaMenuTtl .iconMr {
    margin-right: 12px;
  }
}
@media only screen and (max-width: 950px) {
  .storeMegaMenuTtl {
    font-size: 12px;
    line-height: 1.5;
  }
  .storeMegaMenuTtl .icon {
    font-size: 28px;
  }
}
.storeMegaMenuSection {
  padding: 26px 0;
  background-color: #f4f4f4;
  display: none;
  margin-top: -1px;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
.cardReverce li:before {
  top: -3px;
  box-shadow: 1px -1px 3px rgba(0,0,0,0.1);
}
.cardReverce li:hover:before {
  top: -3px;
  box-shadow: 1px -1px 3px rgba(0,0,0,0);
}
.caption {
  display: inline-block;
  font-size: 9px;
  color: #b1b1b1;
  margin: 0 3px;
}
.caption2 {
  display: block;
  font-size: 10px;
}
.card + .card {
  border-top: 1px dashed #acacac;
  padding-top: 10px;
}
.card + .cardInline {
  border-top: none;
  padding-top: 0;
}
@media only screen and (max-width: 950px) {
  .card {
    font-size: 11px;
  }
}
.cardLarge li a {
  padding-top: 50px;
  padding-bottom: 50px;
}
.cardTape {
  background: url(../img/common/bg_tape_yellow.png) 0 0 no-repeat;
  background-size: 91px;
  width: 91px;
  height: 91px;
  position: absolute;
  left: -4px;
  top: -3px;
  text-align: center;
}
.cardTapeGray {
  background-image: url(../img/common/bg_tape_gray.png);
}
.cardTapeText {
  display: block;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  position: absolute;
  top: 50px;
  left: 3px;
  width: 65px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0;
}
.cardTapeSmall {
  background-size: 60px;
  width: 60px;
  height: 60px;
  font-size: 9px;
  top: -5px;
}
.cardTapeSmall .cardTapeText {
  left: -7px;
  top: 38px;
}
.cardTapeTextSmall {
  font-size: 11px;
  top: 53px;
}
.cardTapeText2l {
  top: 46px;
}
@media only screen and (max-width: 950px) {
  .cardTapeSmall .cardTapeText,
  .cardTapeSmallSp .cardTapeText {
    font-size: 8px;
  }
  .cardTapeSmallSp {
    background-size: 60px;
    width: 60px;
    height: 60px;
    font-size: 9px;
    top: -5px;
  }
  .cardTapeSmallSp .cardTapeText {
    left: -7px;
    top: 38px;
  }
}

@media only screen and (max-width: 1000px) {
  .secondNav {
    clear: both;
    position: fixed;
    top: inherit;
    bottom: 0;
    left: inherit;
    right: -100%;
    width: 75%;
    height: 100%;
    margin: auto;
    overflow-y: scroll;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .secondNav.open {
    right: 0;
  }
  .secondNavBody {
    display: none;
    padding: 59px 0 10px;
    box-sizing: border-box;
    margin-top: 0;
    min-height: 100%;
    background-color: #fff;
  }
  .secondNavBodyPadding {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* --------------------panel */

.panel {
  position: relative;
  z-index: 2
}
.panelBody {
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  z-index: 2;
  box-sizing: border-box;
  position: relative;
  padding: 20px;
}
.panel:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -3px;
  left: 3px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
}

/* --------------------panel tab */

.panelTab {
  border: 1px solid #ebebeb;
  background-color: #f8f8f8;
  padding: 10px 8px;
  font-size: 10px;
  width: 16%;
  box-sizing: border-box;
  float: left;
  position: relative;
  top: 30px;
  right: -1px;
  box-sizing: border-box;
}
.panelTabTtl {
  font-weight: bold;
  float: left;
}
.panelTabTtlNum {
  font-size: 13px;
  padding: 0 4px;
}
.panelTabTag {
  float: right;
  width: 40px;
  background-color: #d6d6d6;
  text-align: center;
  padding: 3px 0;
}
.panelTabTag01 {
  background-color: #a1e6ff;
}
.panelTabTag02 {
  background-color: #ffcccc;
}
.panelTabPoint {
  clear: both;
  padding-top: 10px;
}
.panelTabPoint dd {
  text-align: right;
  font-size: 12px;
  padding: 12px 0 18px;
}
.panelTabPointNum {
  font-size: 18px;
  font-weight: bold;
}
.panelTabFlag {
  text-align: right;
  letter-spacing: 0;
}
.panelTabFlag .icon {
  margin-right: 3px;
}
.panelTabFlagOff .icon {
  color: #ff8c8c;
}
.hasFlag .panelTabFlagOn {
  display: none;
}
.panelTabFlagOff {
  display: none;
}
.hasFlag .panelTabFlagOff {
  display: inline;
}
@media only screen and (max-width: 950px) {
  .panelTab {
    position: static;
    float: none;
    width: auto;
    overflow: hidden;
    margin-bottom: 5px;
  }
  .panelTabTtl {
    font-size: 12px;
  }
  .panelTabTtlNum {
    font-size: 14px;
  }
  .panelTabTag {
    width: 70px;
    float: left;
    margin-left: 10px;
    margin-top: -3px;
  }
  .panelTabPoint {
    padding-top: 0;
    width: 50%;
    float: right;
    clear: none;
  }
  .panelTabPoint dt {
    float: left;
  }
  .panelTabPoint dd {
    float: right;
    padding: 0;
  }
  .panelTabFlag {
    text-align: right;
    clear: both;
    padding: 8px 0 0;
  }
}

/* --------------------pretest */

.pretest {
  margin-bottom: 30px;
  position: relative;
}
.pretestTtl {
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.5;
  position: relative;
  padding-left: 38px;
}
.pretestTtl .icon {
  font-size: 26px;
  vertical-align: middle;
  margin-right: 5px;
  position: absolute;
  top: -2px;
  left: 0;
}
.pretestImg {
  margin-bottom: 15px;
  padding: 10px 10px 10px 35px;
}
.pretestImg img {
  max-width: 100%;
}
.pretestChoice {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.5;
  font-size: 12px;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  padding-top: 20px;
  padding-bottom: 5px;
  margin-bottom: 20px;
}
.pretestChoice li {
  margin-bottom: 15px;
  padding-left: 30px;
  position: relative;
}
.pretestChoice li:before {
  position: absolute;
  left: 0;
  top: 0;
}
.pretestChoice .pretestChoice01:before {
  content: "ア";
}
.pretestChoice .pretestChoice02:before {
  content: "イ";
}
.pretestChoice .pretestChoice03:before {
  content: "ウ";
}
.pretestChoice .pretestChoice04:before {
  content: "エ";
}
.pretestChoice .pretestChoice05:before {
  content: "オ";
}
.pretestRadio {
  margin-bottom: 15px;
}
.pretestRadio li {
  float: left;
  margin-right: 2em;
}
.pretestRadio label {
  cursor: pointer;
}
.pretestRadio input {
  margin-right: 8px;
  position: relative;
  top: -2px;
  outline: none;
  border: none;
}
@media only screen and (max-width: 950px) {
  .pretestRadio li {
    margin-right: 0;
    width: 25%;
    margin-bottom: 6px;
  }
}
.pretestCheck {
  display: inline-block;
  border-radius: 4px;
  background-color: #f1f1f1;
  padding: 8px 20px;
  text-align: center;
  font-weight: bold;
}
.pretestCheck .icon {
  font-size: 20px;
  margin-right: 10px;
}
.pretestCheck:hover {
  color: #fff;
  background-color: #00a439;
}
.pretestCode {
  text-align: right;
  display: block;
}
.pretestBtn {
  text-align: right;
}
@media only screen and (max-width: 950px) {
  .pretestBtn {
    text-align: center;
  }
}
.pretest .panel {
  width: 84%;
  float: right;
  box-sizing: border-box;
}
@media only screen and (max-width: 950px) {
  .pretest .panel {
    width: auto;
    float: none;
  }
}
.pretestNavWrap {
  position: fixed;
  width: 215px;
}
@media only screen and (min-width: 951px) {
  .pretestNavWrap {
    display: block !important;
    height: auto !important;
  } 
}
@media only screen and (max-width: 950px) {
  .mainPretest {
    position: relative;
  }
  .pretestNavWrap {
    position: fixed;
    width: auto;
    margin: 0 15px;
    z-index: 4;
    top: 60px;
    left: 0;
    right: 0;
    background-color: #fff;
    display: none;
  }
}
.pretestNavTtl {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
}
.pretestNav li {
  float: left;
  text-align: center;
  width: 12.5%;
  padding: 3px;
  box-sizing: border-box;
}
.pretestNav a {
  display: block;
  border: 1px solid #ebebeb;
  background-color: #f8f8f8;
  padding: 3px 0;
  font-size: 10px;
}
.pretestNav a.hasFlag {
  background-image: url(../img/common/icon_flag_nav.png);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 5px;
}
.pretestNav a:hover {
  background-color: #d8d8d8;
}
.pretestNavBtn {
  font-weight: bold;
  font-size: 13px;
  margin-top: 10px;
}
.pretestNavOpenBtn {
  display: none;
}
.pretestNavClose {
  display: none;
}
@media only screen and (max-width: 950px) {
  .pretestNavOpenBtn {
    color: #fff;
    display: block;
    float: right;
    text-align: center;
    font-size: 8px;
    background-color: #00a439;
    border-radius: 3px;
    padding: 3px 6px;
    margin-top: 1px;
    position: relative;
    float: right;
    z-index: 10;
  }
  .pretestNavOpenBtn .icon {
    display: block;
    font-size: 20px;
    margin-bottom: 3px;
  }
  .pretestNavClose {
    display: block;
    float: right;
    position: relative;
    margin-top: -23px;
  }
  .pretestNavClose .icon {
    font-size: 20px;
  }
}

.hasFlag .panelBody:after {
  display: block;
  content: "";
  background: url(../img/common/icon_flag.png) 0 0 no-repeat;
  background-size: 45px 34px;
  width: 45px;
  height: 34px;
  position: absolute;
  right: 20px;
  top: -6px;
  z-index: 3;
}
@media only screen and (max-width: 950px) {
  .hasFlag .panelBody:after {
    background-size: 25px 18px;
    width: 25px;
    height: 18px;
    top: -3px;
  }
}
.panelAlert {
  width: 550px;
  margin-left: auto;
  margin-right: 0;
  margin-top: -15px;
  margin-bottom: 30px;
}
@media only screen and (max-width: 950px) {
  .panelAlert {
    width: auto;
  }
}
.panelAlert .panelBody {
  padding: 10px;
}
.panelAlertTag {
  display: inline-block;
  border-radius: 4px;
  padding: 5px;
  text-indent: 0.5em;
  font-size: 12px;
  font-weight: bold;
  margin-right: 1.5em;
}
.panelAlertText {
  float: left;
}
.panelAlertPoint {
  text-align: right;
  padding-top: 5px;
  font-size: 12px;
}
.panelAlertPoint dt,
.panelAlertPoint dd {
  display: inline-block;
}
.panelAlertRight .panelBody,
.panelAlertRight:before {
  border-color: #f3f001;
}
.panelAlertRight .panelAlertTag {
  background-color: #f3f001;
}
.panelAlertWrong .panelBody,
.panelAlertWrong:before {
  border-color: #ffcccc;
}
.panelAlertWrong .panelAlertTag {
  background-color: #ffcccc;
  text-indent: 0;
}

/* --------------------sidebar item */

.sidebarLink {
  line-height: 1.3;
}
.sidebarLink > li > a {
  display: block;
  border-bottom: 1px solid #e6e6e6;
  padding: 17px 0 14px 23px;
}
.sidebarLink > li > .icon-arrow_right + a{
  padding: 17px 0 14px 0;  
}
.sidebarLink > li > a:hover {
  background-color: #f9f9f9;
}
.sidebarLink > li > a > .icon {
  font-size: 20px;
  vertical-align: middle;
  color: #00a439;
  display: inline-block;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  top: -2px;
}
@media only screen and (min-width: 951px) {
  .sidebarLink > li > a:hover > .icon {
    color: #f4f11a;
  }
}
.sidebarLink > li > a.open > .icon {
  color: #f4f11a;
}
.sidebarLink > li > a > .icon-bar{
  margin-left: -29px;
}
.sidebarLink > li > a > .icon-circle{
  margin-left: -24px;
}
.sidebarLinkInnerS {
  display: none;
}
.sidebarLinkInnerS.noAcco {
  display: block !important;
}
.sidebarLinkInnerS > li > a {
  display: block;
  border-bottom: 1px solid #e6e6e6;
  padding: 17px 10px 17px 17px;
  background-color: #fafafa;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media only screen and (min-width: 951px) {
  .sidebarLinkInnerS > li > a:hover {
    background-color: #f1f1f1;
  } 
}
.sidebarLinkInnerS .sidebarLinkInnerS > li > a {
  padding: 10px 10px 10px 34px;
}
.sidebarLinkInnerArrow > li > a {
  background: url(../img/common/icon_arrow_right.png) 10px center no-repeat;
  background-size: 6px;
  padding-left: 22px;
}
.sidebarLinkInnerArrow > li > a.open {
  background-image: url(../img/common/icon_arrow_bottom.png);
}
.sidebarLinkInnerS .sidebarLinkInnerArrow > li > a {
  background-position: 20px center;
}
a:hover .sidebarLinkCount {
  color: #f4f11a;
}
.sidebarLinkCount {
  color: #00a439;
  font-weight: bold;
  vertical-align: middle;
  font-size: 13px;
  padding: 0 8px;
  margin-left: -26px;
  position: relative;
  top: 0px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/* --------------------tree list */

.treeList ul {
  margin-left: 1em;
  position: relative;
}
.treeList ul ul {margin-left: .5em}
.treeList ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 1px solid;
}
.treeList li {
  margin: 0;
  padding: 0 1.5em;
  line-height: 2em;
  position: relative;
}
.treeList {
  padding-left: 20px;
}
.treeList > li {
  list-style: disc;
  padding-left: 0;
}
.treeList ul li:before {
  content: "";
  display: block;
  width: 10px;
  height: 0;
  border-top: 1px solid;
  margin-top: -1px;
  position: absolute;
  top: 1em;
  left: 0;
}
.treeList ul li:last-child:before {
  background: white;
  height: auto;
  bottom: 0;
}
.treeList a:hover {
  color: #1cdbe7;
}
.sidebarTtl {
  color: #00a439;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: normal;
}
.borderBottomDashed {
  border-bottom: 1px dashed #d7d7d7;
  padding-bottom: 18px;
  margin-bottom: 18px;
}
.sidebarComponent {
  margin-bottom: 10px;
}
.priceSearch1 {
  display: inline-block;
  width: 40%;
}
.priceSearch2 {
  display: inline-block;
  width: 20%;
  text-align: center;
}
.priceSearch1 input {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
/* --------------------to top btn */

.totop {
  background: url(../img/common/bg_top.png) center center repeat-x;
  height: 76px;
}
.totop .inner {
  position: relative;
}
.totopBtn {
  display: block;
  background: url(../img/common/img_top.png) center center no-repeat;
  background-size: 108px 75px;
  width: 108px;
  height: 75px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  padding-top: 20px;
  position: absolute;
  right: 188px;
  line-height: 1.5;
}
.totopBtn:hover {
  background-image: url(../img/common/img_top_on.png);
  color: #333;
}
@media only screen and (min-width: 951px) and (max-width: 1000px) {
  .totop {
    background-position: -105px 0;
  }
}
@media only screen and (max-width: 950px) {
  .totop {
    background: url(../img/common/img_top_sp.png) center top repeat-x;
    background-size: auto 38px;
    height: 38px;
  }
  .totop .inner {
    line-height: 1;
    vertical-align: bottom;
  }
  .totopBtn {
    width: 54px;
    height: 38px;
    background-size: 54px auto;
    padding: 0;
    font-size: 9px;
    padding-top: 7px;
    position: static;
    margin: auto;
  }
}

.breadcrumb {
  background-color: #f6f6f6;
  font-size: 10px;
}
.breadcrumb li {
  float: left;
}
.breadcrumb li:last-child {
  background: none;
  padding: 8px 20px 7px 18px;
}
.breadcrumb a {
  padding: 8px 20px 7px 18px;
  display: block;
  position: relative;
}
.breadcrumb a:before,
.breadcrumb a:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  border: 13px solid transparent;
  position: absolute;
  top: 0;
  right: -20px;
  border-left-color: #ccc;
  border-left-width: 7px;
  z-index: 3;
}
.breadcrumb a:after {
  right: -19px;
  border-left-color: #f6f6f6;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.breadcrumb a:hover {
  background-color: #e8e8e8;
}
.breadcrumb a:hover:after {
  border-left-color: #e8e8e8;
}
@media only screen and (max-width: 950px) {
  .breadcrumb {
    box-shadow: none;
  }
  .open .breadcrumb {
    opacity: 0;
  }
  .breadcrumb .inner {
    padding: 0;
    overflow: hidden;
  }
  .breadcrumb li {
    background-size: 7px 25px;
    font-size: 9px;
    position: relative;
    height: 25px;
    box-sizing: border-box;
  }
  .breadcrumb li:after {
    content: "";
    display: block;
    width: 9999px;
    height: 1px;
    background-color: #bdbdbd;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.lightIconList li {
  padding-left: 35px;
  position: relative;
}
.lightIconList .icon {
  position: absolute;
  left: 0;
  top: -3px;
  font-size: 25px;
  color: #00a439;
}

/* ======================================== common */

/* --------------------header */

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  box-shadow: 0 2px 7px rgba(0,0,0,0.1);
  background-color: #fff;
}
@media only screen and (max-width: 1000px) {
  .header .inner {
    width: 100%;
    box-sizing: border-box;
  }
}
.header.open {
  left: -75%;
}
@media only screen and (max-width: 950px) {
  .header {
    background-image: none;
    background-color: transparent;
    height: auto;
    position: static;
  }
}
.headerCommon {
  padding: 5px 0 10px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 11;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background: url(../img/common/img_visual.jpg) center top no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 950px) {
  .headerCommon {
    position: static;
    padding-top: 0;
    background-image: none;
  }
  .headerCommon .inner {
    padding: 0;
  }
  .headerCommon > div > img {/* for ie8 */
    display: none;
  }
}
.headerCommon a {
  color: #fff;
}
.logo {
  float: left;
  margin-top: 8px;
}
.logo a {
  display: block;
  width: 59px;
}
.logo a:hover {
  opacity: 0.8;
}
.logo .icon {
  font-size: 48px;
}
@media only screen and (max-width: 950px) {
  .logo {
    display: none;
  }
}
.headerSns {
  float: left;
  font-size: 31px;
  margin: 18px 0 0 25px;
}
.headerHomePadding .headerSns {
  margin: 18px 0 0 5px;
}
.headerSns li {
  float: left;
  position: relative;
}
.headerSns .icon {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.headerSnsFacebook:hover .icon {
  color: #729cff;
}
.headerSnsTwitter:hover .icon {
  color: #51d0ff;
}
.headerSnsBlog:hover .icon {
  color: #f3f001;
}
.headerSnsMail:hover .icon {
  color: #00a439;
}
.headerSnsBalloon:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  position: absolute;
  top: -25px;
  left: 13px;
  border-bottom: #fff 18px solid;
}
.headerSnsBalloon {
  position: absolute;
  background-color: #fff;
  border-radius: 5px;
  padding: 5px;
  font-size: 13px;
  width: 430px;
  top: 54px;
  left: 0;
  border: 1px solid #f1f1f1;
  display: none;
}
.headerSnsBalloonBlog {
  background-color: #f3f001;
  width: auto;
  border-radius: 30px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  padding: 8px 15px 6px;
  width: 140px;
  color: #5e5e5e;
  border: none;
}
.headerSnsBalloonBlog:before {
  border-bottom-color: #f3f001;
}
.headerSnsBalloonMail {
  background-color: #00a439;
  width: auto;
  border-radius: 30px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  padding: 8px 15px 6px;
  width: 170px;
  border: none;
  color: #fff;
}
.headerSnsBalloonMail:before {
  border-bottom-color: #00a439;
}
@media only screen and (max-width: 950px) {
  .headerSns {
    float: none;
    margin: auto;
    text-align: center;
    padding: 10px 0 10px;
    border-bottom: 1px dashed #00a439;
  }
  .headerSns a {
    color: #00a439;
  }
  .headerSns li {
    float: none;
    display: inline-block;
    margin: 0;
  }
  .headerSnsBalloon {
    display: none !important;
  }
}
.headerSnsSearchBtn {
  color: #fff;
  font-size: 31px;
  line-height: 1;
  position: relative;
  margin-top: -2px;
  transition: all 0.5s ease;
}
.headerHomePadding .headerSnsSearch{
  display: block;
}
.headerSnsSearch{
  display: none;
}
.headerSnsSearch .formReset {
  border-radius: 20px;
  position: relative;
  float: left;
  top: -1px;
  width: 0;
  padding: 8px 30px 10px 10px;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  border-width: 0;
}
.headerSnsSearch:hover .formReset {
  width: 200px;
  border: 2px solid #00a439;
  padding: 8px 30px 10px 10px;
}
.headerSnsSearch:hover .headerSnsSearchBtn {
  font-size: 20px;
  color: #00a439;
  margin-left: -30px;
  margin-top: 0;
  top: -3px;
  -webkit-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
@media only screen and (max-width: 950px) {
  .headerSnsSearchBtn {
    color: #00a439;
    margin-top: 15px;
  }
  .headerSnsSearch .formReset {
    width: auto;
    margin: 15px 0 0;
    border: 2px solid #00a439;
    padding: 8px 30px 10px 10px;
    box-sizing: border-box;
    width: 70%;
    margin-left: 7px;
  }
  .headerSnsSearch:hover .formReset {
    width: 170px;
  }
  .headerSnsSearch:hover .headerSnsSearchBtn {
    font-size: inherit;
    margin-left: 0;
    margin-top: 15px;
    top: 0;
  }
}

.headerNav {
  float: right;
  font-size: 28px;
}
.headerNav li {
  float: left;
  margin-left: 5px;
  position: relative;
  padding-top: 11px;
  top:-3px;
}
.headerNav li:before {
  content: "";
  display: block;
  background: url('../img/common/headernavi_bg_mark.png') 0 0 no-repeat;
  background-size: 9px 10px;
  width: 9px;
  height: 10px;
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 2;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.headerNav li.active:before,
.headerNav li:hover:before  {
  top: 2px;
  opacity: 1;
  display: block;
}
.headerNav li a:after {
  display: block;
  font-size: 10px;
  text-align: center;
  background: #F3F001;
  background-size: 9px 10px;
  width: 0px;
  height: 42px;
  padding-top: 16px;
  z-index: 3;
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: 0;
  color: #666;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  letter-spacing: -2em;
}
.headerNav li.headerNav01 a:after {
  content: "HOME";
}
.headerNav li.headerNav02 a:after {
  content: "STORE";
}
.headerNav li.headerNav03 a:after {
  content: "LEARNING";
}
.headerNav li.headerNav04 a:after {
  content: "MYPAGE";
}
.headerNav li a:hover:after {
  width: 55px;
  opacity: 1;
  letter-spacing: 0;
}

.headerNav a {
  display: block;
  background: url(../img/common/headernavi_bg_off.png) center center no-repeat;
  background-size: 63px 50px;
  height: 50px;
  width: 63px;
  box-sizing: border-box;
  text-align: center;
  padding-top: 8px;
  position: relative;
  z-index: 3;
}
.headerNav li.active a,
.headerNav li:hover a  {
  background-image: url(../img/common/headernavi_bg_on.png);
}
@media only screen and (max-width: 950px) {
  .headerNav {
    float: none;
  }
  .headerNav li {
    float: none;
    margin-left: 0;
    padding-top: 0;
  }
  .headerNav li:before {
    background: none;
  }
  .headerNav a {
    background: none;
    height: auto;
    width: auto;
    text-align: left;
    padding-top: 18px;
    font-size: 12px;
    color: #00a439;
    font-weight: bold;
    color: #00a439;
    display: block;
    border-bottom: 1px dashed #00a439;
    padding: 10px 0 3px;
  }
  .headerNav a span {
    color: #00a439;
  }
  .headerNav li.active a,
  .headerNav li:hover a{
    background: none;
  }
  .headerNav .icon {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    text-align: center;
    font-size: 24px;
    margin: 0 8px;
    position: relative;
    bottom: 2px;
    padding: 3px 0;
  }
  .headerNav .icon-learning {
    font-size: 19px;
  }
  .headerNav .icon-mypage {
    font-size: 29px;
  }
}
.headerTitle {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  color: #fff;
}
.headerTitle .icon {
  position: relative;
  z-index: 20;
}
.icon-ttl_learning {
  font-size: 34px;
  top:5px;
  left:15px;
}
.icon-ttl_home {
  font-size: 45px;
  top:-5px;
  right: -20px;
}
.icon-ttl_store {
  font-size: 38px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  top:2px;
  left:15px;
}
.icon-ttl_mypage {
  font-size: 45px;
  top: -3px;
  left:15px;
}
@media only screen and (max-width: 950px) {
  .headerTop {
    background: url(../img/common/img_visual.jpg);
    padding: 3px 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    z-index: 9;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
  }
  .headerTop.open {
    left: -75%;
  }
  .headerTitle {
    padding: 10px 0px 10px 15px;
    float: left;
    position: static;
  }
  .icon-ttl_learning,
  .icon-ttl_store ,
  .icon-ttl_home ,
  .icon-ttl_mypage {
    font-size: 18px;
  }
  .icon-ttl_home {
    top:0;
    right: 0;
  }
}
.headerContents {
  position: relative;
  z-index: 2;
}
.headerMenu {
  /*box-shadow: 0 2px 7px rgba(0,0,0,0.1);*/
  padding: 83px 0 5px;
  border-bottom: 1px solid #eee;
  position: relative;
  z-index: 10;
  transition: padding ease 0.3s;
}

.headerMenuHeading {
  display: none;
}
@media only screen and (max-width: 950px) {
  .headerMenu {
    padding: 0;
    box-shadow: none;
    border-bottom: none;
  }
  .headerMenuHeading {
    display: block;
    background-color: #00a439;
    overflow: hidden;
    padding: 12px 15px;
    margin-bottom: 10px;
    position: relative;
    z-index: 100;
  }
  .headerMenuTtl {
    width: 85px;
    float: left;
  }
  .headerMenuHeading .headerClose {
    float: right;
    color: #fff;
    font-size: 20px;
    margin-top: 2px;
  }
  .headerMenuHeading:after {
    content: "";
    display: block;
    clear: both;
  }
}
.contentsNav {
  float: left;
  font-size: 12px;
  width: 75%;
  font-weight: bold;
}
.contentsNav.learningHeaderNav{
  width: 35%;
}
@media only screen and (max-width: 950px) {
  .contentsNav.learningHeaderNav{
    width: auto;
  }
}
.contentsNavLarge {
  margin-top: 9px;
  width: 530px;
}
@media only screen and (max-width: 980px) and (min-width: 951px) {
  .contentsNavLarge {
    width: 600px;
  }
}
@media only screen and (min-width: 951px) {
  .contentsNav {
    margin-right: -30px;
  }
}
.contentsNav li {
  float: left;
  text-align: center;
  width: 16.5%;
}
.learningHeaderNav li {
  width: 25%;
}
.learningHeaderNav li:last-child {
  width: 45%;
}
@media only screen and (min-width: 951px) {
  .contentsNavLarge .icon {
    font-size: 50px;
    margin-top: 3px;
  }
  .contentsNavLarge li{
    width: 25%;
    color: #00a439;
    position: relative;
    font-size: 11px;
  }
  .contentsNavLarge li:after {
    content: "";
    display: none;
    background: url(../img/common/icon_slash.png) center center no-repeat;
    width: 17px;
    height: 31px;
    background-size: contain;
    position: absolute;
    top: 23px;
    right: 0;
  }
  .contentsNavLarge li:last-child:after {
    content: none;
  }
  .contentsNav li:first-child {
    margin-left: -2.5em;
  }
  .contentsNavLarge li:first-child {
    margin-left: 0;
  }
}
@media only screen and (min-width: 951px) {
  .headerFixed .contentsNavLarge {
    width: 53%;
  }
  .headerFixed .contentsNavLarge li {
    font-size: 10px;
    width: 25%;
  }
}
.contentsNavStore li a {
  position: relative;
}
.contentsNavStore li a:after {
  content: "";
  display: block;
  background: url(../img/store/bg_tri.png) center bottom no-repeat;
  width: 17px;
  height: 13px;
  position: absolute;
  top: 43px;
  left: 50%;
  margin-left: -38px;
  z-index: 10;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  padding: 30px 30px 0;
}
.contentsNavStore li a:hover:after,
.contentsNavStore li a.active:after {
  opacity: 1;
}
@media only screen and (max-width: 950px) {
  .contentsNavStore li a:after {
    content: none;
  }
}
.contentsNavIcon {
  display: block;
  font-size: 30px;
  color: #00a439;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  padding: 3px 0;
  margin-bottom: 6px;
}
.contentsNav a.active ,
.contentsNav a.active .contentsNavIcon,
.contentsNav a:hover ,
.contentsNav a:hover .contentsNavIcon {
  color: #ff4141;
}
@media only screen and (max-width: 950px) {
  .headerMenu .inner {
    padding: 0;
  }
  .contentsNav {
    float: none;
    width: auto;
  }
  .contentsNav li,
  .learningHeaderNav,
  .learningHeaderNav li:last-child{
    float: none;
    text-align: left;
    width: auto;
  }
  .contentsNav li:first-child {
    margin-left: 0;
  }
  .contentsNavIcon {
    display: inline-block;
    vertical-align: middle;
    width: 35px;
    text-align: center;
    font-size: 24px;
    margin: 0 8px;
  }
  .secondNavTrigger .icon.icon-category_store{
    margin-left: 8px;
  }
  .contentsNavIcon.icon-mail {
    font-size: 18px;
    top:-2px;
    position: relative;
  }
  .contentsNav li:nth-of-type(7) .contentsNavIcon.icon-mail {
    font-size: 18px;
    top:-4px;
  }
  .contentsNavIcon.icon-entry {
    font-size: 20px;
  }
  .contentsNav a {
    color: #00a439;
    display: block;
    border-bottom: 1px dashed #00a439;
    padding: 10px 0 3px;
  }
}
.headerProfile {
  width: 200px;
  float: right;
}
.mypageHeader .headerProfile {
  width: 47%;
  padding-left: 10px;
  float: right;
}
@media only screen and (max-width: 950px) {
  .headerProfile {
    width: auto;
    float: none;
    max-width: 200px;
    margin: auto;
  }
  .headerProfileLarge {
    max-width: 225px;
  }
  .mypageHeader .headerProfile {
    width: 90%;
    padding-left: 0;
    margin: auto;
    max-width: inherit;
  }
}
.headerProfileCategory {
  font-size: 11px;
  background-color: #f7f7f7;
  display: inline-block;
  text-align: center;
  padding: 3px 10px;
  position: relative;
  top: -1px;
}
.mypageHeader .headerProfileCategory {
  background-color: #fff;
}
.headerProfileName {
  display: inline-block;
  font-size: 13px;
}
.headerProfileData {
  min-width: 135px;
  padding-top: 10px;
  float:left;
}
.mypageHeader .headerProfileData {
  min-width: 165px;
  padding-top: 0px;
}
.headerProfileBtn{
  width: 100%;
  font-size: 11px;
  display: inline-block;
  text-align: center;
  background: #eee;
  box-sizing: border-box;
  border-radius: 20px;
  margin-top: 5px;
  padding: 5px 10px;
}
.headerProfileBtn:hover{
  background: #bbb;
  color: #fff;
}

.mypageHeader .icon-myhome {
  font-size: 15px;
}
.headerProfileImg {
  float: right;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #d6d6d6;
  box-sizing: border-box;
  text-align: center;
  display: block;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.mypageHeader .headerProfileImg {
  position: relative;
  top: 0px;
}
.headerProfileImg:hover {
  border-color: #00a439;
}
.headerProfileImg img {
  border: 3px solid #fff;
  border-radius: 50%;
  max-width: 48px;
}
.headerCart {
  width: 432px;
  float: right;
  border: 3px solid #e9e9e9;
  border-radius: 5px;
  padding: 11px 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  display: none;
}
@media only screen and (min-width: 641px) {
  .headerFixed .headerCart {
    display: block;
  }
}
@media only screen and (max-width: 950px) {
  .mypageHeader .headerProfileData {
    float: left;
    text-align: left;
    padding-top: 8px;
    min-width: inherit;
  }
  .mypageHeader .headerProfileData .headerProfileName {
    display: inline;
  }
  .mypageHeader .headerProfileImg {
    position: absolute;
    top:65px;
    right:6%;
  }
}
.profileImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #d6d6d6;
  box-sizing: border-box;
  text-align: center;
  display: block;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.profileImg:hover {
  border-color: #00a439;
}
.profileImg img {
  border: 3px solid #fff;
  border-radius: 50%;
  max-width: 42px;
}
.headerCartCategory {
  font-size: 10px;
  background-color: #f7f7f7;
  display: inline-block;
  text-align: center;
  padding: 3px 10px;
  margin-top: 7px;
}
.headerCartprofileImg {
  float: left;
  margin-right: 10px;
}
.headerCartName {
  display: block;
  font-size: 11px;
  margin-top: 8px;
}
.headerCartAccount {
  float: left;
  width: 150px;
  border-right: 2px solid #e9e9e9;
  margin-right: 10px;
}
.headerCartBody {
  font-size: 10px;
  float: left;
  text-align: right;
  padding-top: 3px;
}
.headerCartBody p {
  line-height: 1.7;
}
.headerCartNum {
  font-size: 14px;
}
.headerCartAttention {
  color: #ff5757;
}
.headerCartBtn {
  float: right;
}
@media only screen and (max-width: 950px) {
  .headerCart {
    width: auto;
    float: none;
    margin: 0 8px -10px;
    display: block;
  }
  .headerCartAccount {
    float: none;
    width: auto;
    border-right: none;
    margin-right: 0;
  }
  .headerCartBody {
    float: none;
    margin-top: 15px;
    padding-top: 5px;
    border-top: 1px solid #e9e9e9;
    clear: both;
  }
  .headerCartBtn {
    float: none;
    margin-top: 6px;
  }
  .headerCartBtn a {
    display: block;
  }
}


.headerMenuInnerLarge {
  padding-top: 5px;
  padding-bottom: 5px;
}
/* -----------header search */
.headerSearch div,
.headerSearch p,
.headerSearch input,
.headerSearch select {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.headerSearch .headerSearchBody {
  -webkit-transition: none;
  transition: none;
}
.headerSearch {
  width: 43%;
  float: right;
  margin-top: 3px;
}
.headerSearchBody {
  display: table;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
  font-size: 12px;
}
.headerSearchBody:first-child {
  margin-bottom: 7px;
}
.headerSearchBody > div,
.headerSearchBody > label {
  display: table-cell;
  vertical-align: middle;
}
.headerSearchBodyLeft > label {
  font-size: 11px;
  font-weight: bold;
  text-align: right;
  padding-right: 10px;
  float:left;
  padding:10px 10px 0;
}
.headerSearchBodyLeft {
  width: 46%;
  background-color: #f5f5f5;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.headerSearchBodyLeft2 {
  box-sizing: border-box;
  padding: 3px 8px 7px;
  width: 88%;
}
.headerSearchBodyLeft input {
  border: 1px solid transparent;
  width: 100%;
  display: block;
  box-sizing: border-box;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 12px;
}
.headerSearchBodyLeft input:focus {
  border: 1px solid #00a439;
  border-right: none;
}
.headerSearchBodyRight {
  width: 12%;
  position: relative;
}
.headerSearchBtn {
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: #fff;
  background-color: #00a439;
  font-size: 15px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
.headerSearchBtn:hover {
  color: #00a439;
  background-color: #f3f001;
  cursor: pointer;
}
.headerSearchBtn .icon {
  position: relative;
  top: -2px;
}
.headerSearchBody .headerSearchBtn {
  height: 36px;
  width: 50px;
}
.headerSearchTtl {
  color: #00a439;
}
.headerSearchTtlFreeword {
  display: none;
}
.headerSearchInput {
  height: 27px;
  box-sizing: border-box;
}
.headerSearchInput.typeStore{
  height: 36px;
}
.headerSelect {
  background-color: #fff;
  padding: 1px 28px 1px 8px;
  cursor: pointer;
  border-radius: 10px;
  box-sizing: border-box;
  background: #fff url(../img/common/icon_arrow_select.png) 92% center no-repeat;
  max-height: 100%;
  width: 105px;
}
.headerSearchSelectWrap .headerPrice {
  background-color: #fff;
  padding: 1px 8px;
  border-radius: 10px;
  box-sizing: border-box;
  max-height: 100%;
  width: 105px;
  display: inline-block;
}
.headerSearchSelectWrap .headerPrice:focus {
  border: 1px solid #00a439 !important;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.headerSelect::-ms-expand {
  display: none;
}
.headerSearchSelectWrap {
  margin-top: 5px;
}
.categorySelect{
  height: 36px;
  border: 1px solid #CCC;
  padding: 0.5em;
  box-shadow: none;
  box-sizing: border-box;
  width: 95%;
  background: #FFF url("../img/common/icon_arrow_select.png") no-repeat scroll 92% center;
  cursor: pointer;
}
.categorySelect:focus{
  border: 1px solid #00A439;
}


@media only screen and (max-width: 950px) {
  .headerSearch {
    width: auto;
    float: none;
    margin: 10px 10px 0;
  }
  .headerSearchBodyleft {
    width: auto;
  }
  .headerSearchBodyRight {
    width: 25px;
    position: relative;
  }
  .headerSearchBodyLeft {
    width: 55%;
  }
  .headerSelect {
    min-width: inherit;
    background-image: url(../img/common/icon_arrow_select_sp.png);
    background-size: 9px 8px;
    padding: 1px 28px 1px 8px;
    width: 75px;
  }
  .headerSearchSelectWrap .headerPrice {
    min-width: inherit;
    background-size: 9px 8px;
    padding: 1px 8px;
    width: 75px;
  }
  .categorySelect{
    height: 56px;
  }
  .headerSearchBody .headerSearchBodySelect{
    width: 30%;
  }
  .headerSearchBody .headerSearchBtn {
    height: 36px;
    width: inherit;
  }
  .headerSearchBodyLeft > label {
    font-size: 11px;
    font-weight: bold;
    text-align: right;
    float:none;
    padding:10px 3px;
  }
  .headerSearchBodyLeft2 {
    box-sizing: border-box;
    padding: 11px 8px 7px;
    width: 100%;
  }
  .headerSearchBody .headerSearchBtn {
    height: 56px;
    width: inherit;
  }
}
@media only screen and (min-width: 951px) {
  .headerFixed .headerNav li .sp {
    font-size: 10px;
  }
  .headerFixed .contentsNavStore li a:after {
    content: none;
  }
  .headerFixed .headerSearch {
    float: none;
    clear: both;
    display: block;
    width: 100%;
    border-left: 1px solid #00a439;
    border-right: 1px solid #00a439;
    overflow: hidden;
    padding-top: 4px;
  }
  .headerFixed .headerSearchBody {
    display: table;
    width: 48%;
    border-radius: 0;
    vertical-align: middle;
    float: left;
    box-sizing: border-box;
    margin:0 2%;
    height: 37px;
    margin-right: 0;
  }
  .headerFixed .headerSearchBody:first-child {
    padding-right:13px;
    border-right: 1px solid #00a439;
    margin-bottom: 0;
    margin-right: 0;
  }
  .headerFixed .headerSearchBodyLeft {
/*    width: 90%;*/
    background-color: #fff;
/*    float: left;*/
    table-layout: fixed;
  }
  .headerFixed .headerSearchBodyLeft2 {
    padding: 0;
  }
  .headerFixed .headerSearchBodyLeft input {
    border: 1px solid transparent;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-left: 6px;
    padding-right: 6px;
  }
  .headerFixed .headerSearchBodyLeft input:focus {
    border: 1px solid #00a439;
    border-right: none;
  }
  .headerFixed .headerSearchBodyRight {
    width: 8%;
    position: relative;
/*    float: left;*/
    display: table-cell;
    height: 30px;
  }
  .headerFixed .headerSearchBtn {
    width: 30px;
    position: static;
  }
  .headerFixed .headerSearchBtn .icon {
    position: relative;
    top: -2px;
  }
  .headerFixed .headerSearchBtn:hover {
    color: #00a439;
    background-color: #f3f001;
    cursor: pointer;
  }
  .headerFixed .headerSearchTtl {
    display: table-cell;
    font-size: 10px;
    font-weight: bold;
    width: 30%;
    padding-left: 10px;
  }
  .headerFixed .headerSearchFixedCell {
    display: table-cell;
  }
  .headerFixed .headerSearchSelectWrap {
    margin-top: 0;
    background-color: #f5f5f5;
    padding: 9px 0 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-left: 20px;
    box-sizing: border-box;
    height: 36px;
  }
  .headerFixed .headerSearchBodyLeft > label{
    padding: 14px ;

  }
  .headerFixed .headerSearchBody .headerSelect,
  .headerFixed .headerSearchBody .headerPrice{
    width: 130px;
    border-radius: 10px;
  }
  .headerFixed .headerSearchFixedCell {
    width: 100%;
    box-sizing: border-box;
    display: block;
  }
  .headerFixed .headerCommon {
    background-image: none;
  }
  .headerFixed .headerCommon > div > img {/* for ie8 */
    display: none;
  }
  .headerFixed .headerCommon {
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 5px;
  }
  .headerFixed .icon-ttl_store {
    font-size: 20px;
    color: #00a439;
  }
  .headerFixed .icon-logo {
    color: #000;
    font-size: 35px;
  }
  .headerFixed .icon-facebook {
    color: #305097;
    font-size: 25px;
  }
  .headerFixed .icon-twitter {
    color: #00aced;
    font-size: 25px;
  }
  .headerFixed .icon-blog {
    color: #00a439;
    font-size: 25px;
  }
  .headerFixed .headerNav li {
    font-size: 10px;
    border-left: 1px solid #000;
    padding: 0 5px 0 8px;
    margin: 0 5px;
  }
  .headerFixed .headerNav {
    border-right: 1px solid #000;
    margin-top: 17px;
  }
  .headerFixed .headerNav li:before {
    content: none;
  }
  .headerFixed .headerNav li a {
    height: auto;
    width: auto;
    background: none;
    color: #000;
    padding: 0;
  }
  .headerFixed .headerNav li a:hover {
    color: #00a439;
  }
  .headerFixed .headerNav li .sp {
    display: inline-block !important;
    margin-left: 3px;
  }
  .headerFixed .headerSns {
    margin-top: 5px;
  }
  .headerFixed .logo {
    margin-top: 2px;
    margin-bottom: 2px;
  }
  .headerFixed .headerTitle {
    margin-top: -2px;
  }
  .headerFixed .headerMenu {
    padding-top: 55px;
  }

}

.secondNavCloseBtnPc {
  display: block;
  text-align: right;
  clear: both;
  color: #00a439;
}
.secondNavCloseBtnPc .icon {
  position: relative;
  top: -1px;
  margin-right: 3px;
}
.secondNavCloseBtn,
.headerCloseBtn {
  text-align: center;
  border-radius: 4px;
  display: block;
  width: 90%;
  margin: auto;
  border: 2px solid #00a439;
  color: #00a439;
  padding: 10px 0 8px;
  clear: both;
}
.secondNavCloseBtn .icon,
.headerCloseBtn .icon {
  margin-right: 5px;
  position: relative;
  top: -1px;
}
.headerOpenBtn {
  display: none;
}
@media only screen and (max-width: 950px) {
  .headerBody {
    position: absolute;
    width: 75%;
    height: 100%;
    background: #fff;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    border-left: 2px solid #00a439;
    top: 0;
    right: -77%;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    box-sizing: content-box;
    padding: 0 0 44px;
    margin-top: -44px;
    overflow-x: hidden;
  }
  .headerBody.open {
    right: -75%;
    z-index: 10;
  }
  .wrapper {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    position: relative;
    left: 0;
  }
  .wrapper.open {
    left: -75%;
    max-height: 100%;
    overflow: visible !important;
  }
  .open .container {
    -webkit-filter: blur(3px);
    filter: blur(3px);
  }
  .headerOpenBtn {
    color: #00a439;
    display: block;
    float: right;
    text-align: center;
    font-size: 8px;
    background-color: #fff;
    border-radius: 3px 0 0 3px;
    padding: 3px;
    margin-top: 1px;
    position: relative;
    z-index: 10;
    right: -2px;
  }
  .headerOpenBtn .icon {
    display: block;
    font-size: 20px;
    margin-bottom: 3px;
  }
}
/* sp menu style */
.container {
  position: static;
  top: 0;
}
@media only screen and (max-width: 950px) {
  body, html {
    overflow-x: hidden;
  }
  .scrollNone {
    overflow-y: hidden;
    height: 100%;
    box-sizing: border-box;
  }
  .container {
    position: static;
    top: 0;
  }
  .open .container {
    position: relative;
  }
}


/* --------------------footer */

.footer {
  background-color: #00a439;
  color: #fff;
  padding: 30px 0 15px;
}
.copyright {
  text-align: center;
  font-size: 14px;
}
.footerNav {
  text-align: center;
  margin:15px auto 0;
}
.footerNav li{
  display: inline-block;
  font-size: 10px;
  padding:5px; 
}
.footerNav li:hover{
  color: #f3f001;
}
.footerNav li:after,
.footerNav li:first-child:before{
  content: "";
  display: inline-block;
  padding:5px;
  width: 1px;
  height: 0.1em;
  border-right:1px solid rgba(255,255,255,0.5);
  position: relative;
  top:1px;
}
.footerNav li:first-child:before{
  border-right:0;
  border-left:1px solid rgba(255,255,255,0.5);
}

/* ======================================== content */

.sp-button {
  border: none !important;
  background-color: #c9c9c9 !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 8px !important;
}
.sp-selected-button {
  background-color: #00a439 !important;
}
.acountCart {
  margin-bottom: 10px;
}
.ttlBtn {
  text-align: center;
  color: #00a439;
  background-color: #f7f7f7;
  padding: 11px 0 9px;
  font-size: 13px;
}
.ttlBtn .icon {
  font-size: 20px;
  position: relative;
  top: -1px;
}
.acountCartContents {
  background-color: #f7f7f7;
  margin-top: 1px;
  padding: 14px 10px 14px;
  font-size: 12px;
  margin-bottom: 10px;
}
.acountCartContents .icon {
  color: #00a439;
  font-size: 18px;
  position: relative;
  top: -2px;
}
.acountCartContents li {
  line-height: 20px;
  margin-bottom: 15px;
}
.acountCartContents li span {
  vertical-align: middle;
}
.acountCartContentsNum {
  font-size: 20px;
}
.acountCartContentsAttention {
  color: #ff5757;
  margin-left: 25px;
}
.acountCartName {
  font-size: 13px;
  margin-top: 10px;
}
.acountCartWrap .btn {
  padding-top: 11px;
  padding-bottom: 11px;
}
@media only screen and (min-width: 951px) {
  .gBlockBodySingleMv {
    min-height: 358px;
    box-sizing: border-box;
  }
}
@media only screen and (max-width: 950px) {
  .gBlockBodySingleMv {
    margin-bottom: 10px;
  }
}

/* --------------------news */

.news {
  background: url(../img/common/bg_news.png) 49% top repeat-x;
  margin: 10px auto;
}
.newsContents {
  width: 854px;
  margin-left: auto;
  margin-right: 0;
  background-color: #fff;
}
.newsContentsTopic {
  width: 741px;
}
.newsTtl {
  float: left;
}
.newsList {
  height: 158px;
  overflow-y: scroll;
  padding: 20px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.newsDate {
  font-size: 11px;
  margin-bottom: 5px;
}
.tag {
  font-size: 12px;
  display: inline-block;
  border-radius: 4px;
  background-color: #ccc;
  padding: 5px;
  text-align: center;
  min-width: 106px;
}
.tagPink {
  background-color: #fcc;
}
.tagPink2 {
  background-color: #f96e9f;
  color: #fff;
}
.tagBlue {
  background-color: #a1e6ff;
}
.tagRed {
  background-color: #cf2700;
  color: #fff;
}
.newsHead {
  float: left;
  text-align: center;
  margin-right: 20px;
}
.newsBody {
  float: left;
  line-height: 1.5;
}
.newsList > section {
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 15px;
}
.newsList a {
  display: block;
  padding-bottom: 13px;
}
.newsList a:hover .newsBody {
  text-decoration: underline;
}
.newsBody h1 {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 5px;
}
.newsBody p {
  font-size: 12px;
}


@media only screen and (max-width: 950px) {
  .news {
    background: none;
  }
  .newsContents {
    width: auto;
    padding-bottom: 10px;
  }
  .newsTtl {
    float: none;
    background-color: #00a439;
    color: #fff;
    text-align: center;
    font-size: 14px;
    height: 44px;
    box-sizing: border-box;
    padding: 16px 0 0;
    position: relative;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .newsTtl img {
    width: 44px;
  }
  .newsDate {
    text-align: left;
  }
  .tag {
    font-size: 12px;
    display: inline-block;
    border-radius: 4px;
    background-color: #ccc;
    padding: 5px;
    text-align: center;
    min-width: 106px;
  }
  .tagPink {
    background-color: #fcc;
  }
  .tagBlue {
    background-color: #a1e6ff;
  }
  .newsHead {
    float: left;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 10px;
  }
  .newsBody {
    float: left;
  }
  .newsList {
    padding: 0 10px;
    background-color: #f8f8f8;
    border-bottom: 11px solid #F8F8F8;
    border-top: 11px solid #F8F8F8;
  }
  .newsList > section {
    border-bottom: 1px solid #e7e7e7;
    margin-bottom: 15px;
  }
  .newsList a {
    display: block;
    background-color: #fff;
    padding: 10px 10px 13px;
  }
  .newsList a:hover .newsBody {
    text-decoration: underline;
  }
  .newsBody h1 {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 5px;
  }
  .newsBody p {
    font-size: 12px;
  }
}
/* -------------------- card single component */

.cardItem {
  position: relative;
  line-height: 1.5;
  box-sizing: border-box;
}
.cardItem > a,
.cardItem > .cardItemBody {
  display: block;
  border: 1px solid #ddd;
  text-align: center;
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px 0 15px;
  width: 100%;
  box-sizing: border-box;
}
.cardItem > .cardItemBody {
  text-align: left;
  padding: 20px;
}
.cardItem:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -3px;
  left: 3px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cardItem:hover a,
.cardItem:hover:before {
  border-color: #00a439;
}
.cardItem.noChange:hover:before {
  border-color: #ddd;
}
.cardSliderWrapL {
  width: 90%;
  margin: 0 auto 30px;
}
.cardSlider {
  margin: auto;
}
.cardSlider > li {
  width: 32%;
  margin-top: 5px;
  padding-bottom: 5px;
}
.cardSlider a:hover .cardHeading {
  background-color: #00a439;
  color: #fff;
}
.cardSliderData {
  margin: 10px 0;
  line-height: 1.5;
}
@media only screen and (max-width: 950px) {
  .cardSliderData {
    height: auto !important;
  }
}
.cardSliderPrice {
  font-size: 10px;
  background-color: #f8f8f8;
  border-radius: 10px;
  height: 18px;
  box-sizing: border-box;
  padding-top: 1px;
}
.cardSliderPriceYen {
  display: inline-block;
  background-color: #ebebeb;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  box-sizing: border-box;
  padding-top: 4px;
  margin-right: 6px;
  margin-top: -1px;
  font-size: 12px;
}
.cardSliderBtn {
  margin: 20px 0 0;
  position: relative;
  top: -10px;
}
@media only screen and (max-width: 950px) {
  .cardSliderBtn {
    margin: 30px 0 0;
    position: relative;
    top: -20px;
  }
}
.cardSliderBtn li {
  width: 47%;
  float: left;
}
.cardSliderBtn li:nth-child(2n) {
  float: right;
}
.cardSliderWrap .sp-mask {
  width: calc(100% + 5px) !important;
}
@media only screen and (min-width: 951px) {
  .cardSliderWrap .sp-mask {
    padding-bottom: 20px;
  }
}
.cardSliderWrap .sp-previous-arrow {
  border: none !important;
  left: -30px;
}
.cardSliderWrap .sp-next-arrow {
  border: none !important;
  right: -30px;
}
.topicWindow .sp-arrow {
  -webkit-transition:all ease 0.3s;
  transition:all ease 0.3s;
}
.topicWindow .sp-previous-arrow {
  border: none !important;
  left: 0px;
  top: 15px;
}
.topicWindow .sp-next-arrow {
  border: none !important;
  right: 0px;
  top: 15px;
}
.topicWindow .sp-previous-arrow:hover {  
  left: -3px;
}
.topicWindow .sp-next-arrow:hover {
  right: -3px;
}
.sliderArrows .sp-arrow.sp-previous-arrow:before,
.topicWindow .sp-arrow.sp-previous-arrow:before,
.cardSliderWrap .sp-arrow.sp-previous-arrow:before {
  font-family: 'icomoon';
  content: "\e608";
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  font-size: 15px;
  color: #00a439;  
}
.sliderArrows .sp-arrow.sp-next-arrow:before,
.topicWindow .sp-arrow.sp-next-arrow:before,
.cardSliderWrap .sp-arrow.sp-next-arrow:before {
  font-family: 'icomoon';
  content: "\e609";
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  font-size: 15px;
  color: #00a439;
}
.sliderArrows .sp-arrow.sp-next-arrow:before,
.topicWindow .sp-arrow.sp-next-arrow:before,
.cardSliderWrap .sp-arrow.sp-next-arrow:before,
.sliderArrows .sp-arrow.sp-previous-arrow:before,
.topicWindow .sp-arrow.sp-previous-arrow:before,
.cardSliderWrap .sp-arrow.sp-previous-arrow:before {
  background-color: transparent;
}
.sliderArrows .sp-arrow.sp-next-arrow:after,
.topicWindow .sp-arrow.sp-next-arrow:after,
.cardSliderWrap .sp-arrow.sp-next-arrow:after,
.sliderArrows .sp-arrow.sp-previous-arrow:after,
.topicWindow .sp-arrow.sp-previous-arrow:after,
.cardSliderWrap .sp-arrow.sp-previous-arrow:after {
  content: none !important;
}
.slider-pro .btnPretty {
  -webkit-transition: all 0.3s ease !important;
  transition: all 0.3s ease !important;
}
.recommendList li {
  width: 32%;
  margin-right: 2%;
  float: left;
  margin-bottom: 2%;
}
.recommendList li:last-child {
  margin-right: 0;
}
.cardItemBodyLeft {
  width: 36%;
  float: left;
}
.cardItemBodyRight {
  width: 60%;
  float: right;
}
.cardItemTtl {
  color: #00a439;
  background-color: #f4f4f4;
  padding-top: 4px;
  height: 53px;
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 13px;
  text-align: center;
}
.cardItemTtlBody {
  display: table-cell;
  vertical-align: middle;
  padding: 0 13px;
  letter-spacing: 0.1em;
}
.cardItemBodyRight .cardSliderPriceYen {
  padding-top: 0;
}
.cardItemBodyRight .cardSliderBtn {
  margin: 13px 0 0;
  top: 0;
}
@media only screen and (max-width: 950px) {
  .recommendList li {
    width: auto;
    margin-right: 0;
    float: none;
    margin-bottom: 10px;
  }
  .recommendList li:last-child {
    margin-right: 0;
  }
  .cardItemBodyLeft {
    width: auto;
    float: none;
    text-align: center;
    margin-bottom: 10px;
  }
  .cardItemBodyRight {
    width: auto;
    float: none;
  }
  .cardItemTtl {
    color: #00a439;
    background-color: #f4f4f4;
    padding-top: 4px;
    height: 53px;
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 13px;
    text-align: center;
  }
  .cardItemTtlBody {
    display: table-cell;
    vertical-align: middle;
    padding: 0 13px;
    letter-spacing: 0.1em;
  }
  .cardItemBodyRight .cardSliderPriceYen {
    padding-top: 0;
  }
  .cardItemBodyRight .cardSliderBtn {
    margin: 13px 0 0;
    top: 0;
  }
}
.cardItemBodyRight .cardSliderBtn li {
  width: 47%;
  float: left;
}
.cardItemBodyRight .cardSliderBtn li:nth-child(2n) {
  float: right;
}
.cardItemBodyRight .cardSliderBtn .icon {
  font-size: 17px;
  position: relative;
  top: 0px;
}
.cardItemBodyRight .cardSliderBtn .btnPretty2 {
  padding-top: 4px;
}
/* -------------------- form component */
.inputBlock {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
button.btnSmall2 {
  padding: 5px 3px 5px;
}

/* -------------------- circleList */

.circleList li {
  line-height: 1.5;
  margin-bottom: 0.5em;
  position: relative;
  padding-left: 20px;
}
.circleList .icon {
  color: #00a439;
  font-size: 17px;
  position: absolute;
  top: -1px;
  left: 0;
}

/* -------------------- boxRibbon */

.boxRibbon {
  background-color: #f9f9f9;
  padding: 0 0 20px;
  font-size: 15px;
  width: 90%;
  margin: auto;
}
.boxRibbonTitle {
  position: relative;
  text-align: center;
}
.boxRibbonTitleText {
  display: block;
  background-color: #faf741;
  border: 1px solid #fff;
  position: relative;
  z-index: 2;
  padding: 10px 0 8px;
  line-height: 1.5;
}
.boxRibbonTitle:before,
.boxRibbonTitle:after {
  content: "";
  background-repeat: no-repeat;
  background-size: 51px 31px;
  background-position: 0 0;
  width: 51px;
  height: 31px;
  position: absolute;
  bottom: -10px;
  z-index: 1;
}
.boxRibbonTitle:before {
  background-image: url(../img/common/img_ribbon_l.png);
  left: -30px;
}
.boxRibbonTitle:after {
  background-image: url(../img/common/img_ribbon_r.png);
  right: -30px;
}
.boxRibbonBody {
  text-align: center;
  padding: 20px 10px 0;
}
.btnWrap {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
}
.btnWrap .btn {
  margin: 0 10px 10px;
}
@media screen and (max-width: 950px){
  .boxRibbon {
    font-size: 13px;
  }
  .boxRibbonTitleText {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* -------------------- grayBox */
.grayBox {
  border: 2px solid #f1f1f1;
  border-radius: 4px;
}
.grayBoxHeader {
  background-color: #f1f1f1;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  font-size: 14px;
  color: #00a439;
  padding: 15px;
}
.grayBoxBody {
  padding: 15px;
  line-height: 1.5;
}
.grayBoxBodyFull {
  padding-left: 0;
  padding-right: 0;
}
.grayBoxBodyStatic {
  height: 35px;
}
.grayBoxList li {
  width: 49%;
  float: left;
  margin-bottom: 2%;
}
.grayBoxList li:nth-child(2n) {
  margin-left: 2%;
}
.grayBoxLeft {
  float: left;
  width: 270px;
  padding-left: 7px;
  border-right: 1px solid #f1f1f1;
  padding-right: 8px;
}
.grayBoxRight {
  float: right;
  padding-right: 8px;
}
.grayBoxSquare {
  background-color: #f8f8f8;
  padding: 16px 28px;
}
@media screen and (max-width: 950px){
  .grayBoxList li {
    width: auto;
    float: none;
    margin-bottom: 2%;
  }
  .grayBoxList li:nth-child(2n) {
    margin-left: 0;
  }
  .grayBoxBodyStatic {
    height: auto;
  }
  .grayBoxLeft {
    float: none;
    width: auto;
    padding-left: 0;
    border-right: none;
    padding-right: 0;
    padding: 5px 10px;
  }
  .grayBoxRight {
    float: none;
    padding-right: 0;
    padding: 5px 10px;
  }
}

/* -------------------- flagList */

.flagList dd {
  margin-left: 34px;
  margin-bottom: 20px;
}
.flagList dt .icon {
  color: #f3f001;
  margin-right: 5px;
}
@media screen and (max-width: 950px){
  .flagList dt {
    margin-bottom: 0.7em;
  }
  .flagList dd {
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 11px;
  }
  .flagList dt .icon {
    color: #f3f001;
    margin-right: 5px;
  }
}

/* -------------------- table */

.table {
  table-layout: fixed;
  width: 100%;
}
.table.type02{
    table-layout:auto;
    word-break: break-word;
}
.table,
.table th,
.table td {
  border: 1px solid #ddd;
}
.table th,
.table td {
  padding: 10px 13px;
  vertical-align: middle;
  line-height: 1.5;
}
.table th {
  color: #00a439;
  font-size: 15px;
  background-color: #f9f9f9;
}
thead th {
  border-bottom-color: #fff !important;
}
thead th:first-child {
  border-right-color: #fff !important;
}
thead th:last-child {
  border-left-color: #fff !important;
}
.requiredRow {
  background-color: #fff3f3;
}
.requiredText {
  font-size: 12px;
  color: #ff5151;
}
.table .requiredText,
.table .bold {
  margin-left: 10px;
}
.simpleList {
  margin: 10px;
  font-size: 11px;
}
.simpleDl {
  line-height: 1.5;
  margin-bottom: 1em;
}
.simpleDl dt {
  font-weight: bold;
  text-indent: -0.5em;
  margin-bottom: 0.5em;
}
.simpleDl dd {
  list-style: disc;
  display: list-item;
}

/* -------------------- listHeader */

.listHeader {
  background-color: #f8f8f8;
  margin-bottom: 20px;
  padding: 8px 14px 7px;
  position: relative;
}
.listHeaderSide {
  width: 28%;
  float: left;
  padding-top: 5px;
}
.listItemLength {
  font-size: 17px;
  color: #ff5757;
}
.listHeaderPager {
  width: 44%;
  float: left;
  text-align: center;
}
.listHeaderBtn {
  text-align: right;
}
@media screen and (max-width: 950px){
  .listHeaderSide {
    width: 48%;
    float: none;
  }
  .listHeaderBtn {
    position: absolute;
    top: 8px;
    right: 14px;
  }
  .listHeaderBtn .btnRadius {
    font-size: 10px;
    margin: 0 1px;
  }
  .listItemLength {
    font-size: 13px;
  }
  .listHeaderPager {
    width: auto;
    float: none;
    margin-top: 5px;
  }
}

/* -------------------- pager */

.pagerBtn {
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
}
.pagerBtn:hover {
  color: #00a439;
}
.pager {
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
}
.pager li {
  display: inline-block;
  font-size: 17px;
  vertical-align: middle;
  margin: 0 4px;
}
.pagerItem {
  display: block;
  border: 1px solid transparent;
  font-weight: bold;
  background-color: #ccc;
  color: #fff;
  padding: 4px 6px;
}
.pagerItem.current {
  border-color: #ccc;
  color: #424242;
  background-color: #fff;
}
.pagerItem:hover {
  color: #424242;
  background-color: #f3f001;
}

/* -------------------- decsription list */

.decsriptionList {
  font-size: 12px;
  line-height: 1.6;
}
.decsriptionList dt {
  font-weight: bold;
  background-color: #f8f8f8;
  padding: 8px 10px 6px;
  margin-bottom: 10px;
  font-size: 13px;
}
.decsriptionList dd {
  padding: 0 15px 25px;
}
.listOutside li {
  text-indent: -1.3em;
  margin-left: 0.7em;
}

/* -------------------- sidebarSearch */

.sidebarSearch {
  padding: 5px 2px;
}
.sidebarSearch .btn {
  width: 80%;
  margin: auto;
}
.sidebarSearch input {
  padding-top: 6px;
  padding-bottom: 6px;
}
.sideSearchBodySelect{
  width: 100%;
  margin: 10px 0 7px;
}
.sideSearchBodySelect .categorySelect {
    width: 100%;
}
@media only screen and (max-width: 950px) {
  .sideSearchBodySelect .categorySelect {
      height: inherit;
  }
}
/* -------------------- headerHome */

/* --------headerHome Layout */
.headerHome {
  position: static;
  background: url(../img/home/bg_img_home.jpg) center top no-repeat;
  background-size: cover;
}
.headerHome .inner {
  width: 1090px;
  box-sizing: border-box;
  padding: 0;
}
.headerHome .headerTitle {
  display: none;
}
.headerHome .headerCommon {
  background-image: none;
}
.headerHome .headerCommon > div > img {
  display: none;
}
.headerHome .headerNav {
  display: none;
}
.headerHome .headerSns {
  margin-top: 100px;
}

.headerHomePadding {
  padding-top: 0 !important;
}
.headerHomeBody {
  padding-top: 146px;
  background: url(../img/home/bg_home.png) center 20px no-repeat;
}
.headerHomeBodyInner {
  width: 950px;
  padding: 60px 24px 24px;
  margin: auto;
  position: relative;
}
@media only screen and (min-width: 951px) {
  .headerHome .headerMenu {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: none;
    z-index: 12;
  }
  .headerHome .exception {
    display: none;
  }
}
@media only screen and (max-width: 950px) {
  .headerHome .headerTop {
    background: none;
    box-shadow: none;
  }
  .headerHome .inner {
    width: auto;
  }
  .headerHome .headerBody {
    margin-top: 0;
    padding-bottom: 0;
  }
  .spPadding .headerBody.open {
    margin-top: 0;
  }
  .headerHome .headerNav {
    display: block;
  }
  .headerHome .headerSns {
    margin-top: 0;
  }
  .headerHomeBody {
    padding-top: 20px;
    background-image: url(../img/home/bg_home_sp.png);
    background-size: cover;
    opacity: 0;
  }
  .headerHome .headerHomeBody {
    opacity: 1;
  }
  .headerHomeBodyInner {
    width: auto;
    padding: 20px 24px 24px;
    margin: auto;
  }
}




.headerHomeBodyTtl {
  text-align: center;
}
.headerHomebtnWrap {
  margin: 25px 0;
  padding-left: 4px;
}
.headerHomebtnWrap li {
  float: left;
  width: 50%;
}
.headerHomebtnWrap li:first-child {
  width: 45%;
  margin-right: 5%;
}
.headerHomebtnWrap li:first-child .icon {
  margin-left: -4px;
}
.headerHomebtnWrap li:last-child .icon {
  margin-left: 6px;
}
.headerHomebtnWrap li:last-child .btnBiggestText {
  position: relative;
  left: 10px;
}
.headerHomeTtl2 {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #fff;
  margin-left: -10px;
}
.headerHomeTtl2 .icon {
  font-size: 37px;
  margin-right: 3px;
}
.headerHomeTtl2 img {
  vertical-align: middle;
  margin-right: 20px;
}
.headerHomeTtl2Text {
  position: relative;
  top:3px;
}
@media only screen and (max-width: 950px) {
  .headerHomeBodyTtl {
    margin-top: 80px;
  }
  .headerHomebtnWrap {
    margin: 15px 0 5px;
  }
  .headerHomebtnWrap li {
    float: none;
    width: auto;
    margin-bottom: 10px;
    width: 80%;
    margin: 0 auto 10px;
  }
  .headerHomebtnWrap li:first-child {
    width: 80%;
    margin: 0 auto 10px;
  }
  .headerHomeTtl2 {
    text-align: center;
    margin-left: 0;
  }
  .headerHomeTtl2Text {
    display: block;
    margin-top: 8px;
    line-height: 1.5;
    font-size: 9px;
  }
  .headerHomeTtl2 .icon {
    font-size: 18px;
  }
  .headerHomeTtl2 img {
    margin-right: 0;
    width: 122px;
  }
  .headerHomebtnWrap li:first-child .btnBiggestText {
    left: 0;
  }
  .headerHomebtnWrap li:last-child .btnBiggestText {
    position: relative;
    left: 0;
  }
  .headerHome .headerCloseBtn,
  .spPadding .headerCloseBtn {
    margin-bottom: 44px;
  }
}
@media only screen and (max-width: 450px) {
  .headerHomebtnWrap li,
  .headerHomebtnWrap li:first-child  {
    width: 100%;
  }
}
@media only screen and (max-width: 390px) {
  .headerHomeBodyTtl {
    margin-top: 30px;
  }
}
.headerHomeNav {
  margin-top: 20px;
}
.headerHomeNav li {
  float: left;
  width: 15.6%;
  margin-right: 1.28%;
}
.headerHomeNav li:last-child {
  margin-right: 0;
}
.headerHomeNav a {
  display: block;
  background: url('../img/home/bg_nav_home.png') center 0 no-repeat;
  background-size: contain;
}
.headerHomeNav a:hover {
  background-image: url('../img/home/bg_nav_home_on.png');
}
@media only screen and (max-width: 950px) {
  .headerHomeNav {
    margin-top: 10px;
    text-align: center;
  }
  .headerHomeNav li {
    float: none;
    width: 26%;
    display: inline-block;
    margin-right: 0;
    margin: 3px;
  }
}
.headerProfileHome {
  position: static;
  width: 247px;
  float: right;
}
.headerHome .headerProfileHome {
  position: absolute;
  top: 0;
  left: 54%;
  z-index: 20;
  width: 247px;
}
.headerProfileHomeHeader {
  background-color: #00a439;
  color: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-sizing: border-box;
  padding: 13px 10px 0;
  font-size: 12px;
  margin-top: -12px;
  display: none;
}
.headerHome .headerProfileHomeHeader {
  display: block;
}
.messageStatic {
  text-align: center;
  padding-bottom: 10px;
}
.headerProfileHomeBody .icon-myhome {
  font-size: 35px;
  color: #e2e2e2;
  display: block;
  height: 48px;
  width: 48px;
  padding-top: 5px;
  box-sizing: border-box;
}
.headerProfileHome .headerProfileImg {
  float: left;
  margin-right: 13px;
}
.headerProfileHome .headerProfileImg img {
  box-sizing: border-box;
}
.headerProfileHomeBody {
  display: block;
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 5px 8px;
  position: relative;
}
.headerProfileHomeBody:hover .circleRight {
  right: 2px;
}
.headerProfileHomeG {
  color: #00a439;
  margin-top: 5px;
  font-size: 12px;
}
.chain {
  display: none;
}
.headerHome .chain {
  display: block;
  margin: auto;
}
.profileDefault {
  font-size: 12px;
  margin-bottom: 10px;
  text-align: center;
}
.profileDefault2 {
  font-size: 10px;
}

@media only screen and (max-width: 950px) {
  .headerProfileHome {
    position: static !important;
    width: 90% !important;
    margin: auto;
    float: none;
  }
  .headerProfileHomeHeader {
    margin-top: 0;
    height: 30px !important;
    padding-top: 10px;
    display: block;
  }
  .headerProfileHome .headerProfileImg {
    float: left;
    margin-right: 5px;
    background-color: #fff;
  }
  .headerProfileHomeBody {
    background-color: #f1f1f1;
  }
  .chain {
    display: none !important;
  }
  .profileDefault {
    font-size: 11px;
    margin-bottom: 4px;
    margin-top: -4px;
  }
  .profileDefault2 {
    font-size: 11px;
  }
  .headerProfileHomeBody .icon-myhome {
    font-size: 21px;
    color: #e2e2e2;
    display: block;
    height: 30px;
    width: 30px;
    padding-top: 5px;
    box-sizing: border-box;
  }
}
.headerContact {
  position: absolute;
  top: 46px;
  right: 70px;
  z-index: 30;
}
.headerContact.pc {
  display: none;
}
.headerHomePadding .headerContact.pc {
  display: block;
}
.headerContactTtl {
  position: absolute;
  top: 27px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  color: #00a439;
  opacity: 1;
  transition: all 0.3s ease;
  z-index: 10;
  font-weight: bold;
  font-size: 12px;
}
.headerContact:hover .headerContactTtl {
  opacity: 0;
}
.headerContactBtn li {
  display: inline-block;
  margin-top: 1px;
}
@media only screen and (max-width: 950px) {
  .headerContactBtn {
    text-align: center;
    margin-bottom: 10px;
  }
}
.headerContactBody {
  position: relative;
  left: 3px;
  height: 118px;
  cursor: pointer;
}
.headerContactBody > li {
  float: left;
}
.headerContactTrigger {
  font-size: 27px;
  color: #00a439;
  background-color: #fff;
  width: 60px;
  text-align: center;
  height: 118px;
  box-sizing: border-box;
  transition: all 0.5s ease;
}
.headerContactBody > li:hover .headerContactTrigger {
  background: #f3f001 url(../img/home/bg_attention.png) 0 0 no-repeat;
}
.headerContactTrigger .icon {
  transition: all 0.5s ease;
}
.headerContactBody > li:hover .headerContactTrigger .icon {
  transform: rotate(-30deg);
  display: block;
}
.headerContactTrigger .icon-tel {
  font-size: 33px;
}
.headerContactLeft {
  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
  padding: 51px 0 40px 10px;
  float: left;
}
.headerContactRight {
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
  padding: 49px 10px 40px 0;
  float: right;
  background-color: #f2f2f2;
}
.headerContactInnerBody {
  background-color: #f3f001;
  box-sizing: border-box;
  height: 118px;
  font-size: 11px;
  width: 0;
  overflow: hidden;
  transition: all 0.5s ease;
  padding: 17px 0 0;
}
.headerContactLeftBody {
  float: left;
}
.headerContactRightBody {
  float: right;
}
.headerContactLeftBody p {
  margin-bottom: 5px;
  font-weight: bold;
  margin-left: -20px;
}
.headerContactTel {
  font-weight: bold;
  font-size: 20px;
  margin: 20px 0;
}
.headerContact1 .headerContactInnerBody2 {
  width: 180px;
}
.headerContact2 .headerContactInnerBody2 {
  width: 206px;
}
.headerContact1 .headerContactInnerBody {
  padding-top: 12px;
}
.headerContact1:hover .headerContactInnerBody {
  padding: 12px 10px 0;
  width: 180px;
}
.headerContact2:hover .headerContactInnerBody {
  padding: 17px 10px 0;
  width: 206px;
}
.circleRight {
  position: absolute;
  color: #00a439;
  font-size: 25px;
  right: 5px;
  top: 50%;
  margin-top: -12px;
  transition: all 0.5s ease;
}
.headerContactFooter {
  width: 128px;
  float: right;
}
.headerContactFooterHeader {
  background-color: #00a439;
  color: #fff;
  text-align: center;
  font-size: 11px;
  padding: 4px 0;
  letter-spacing: 0.2em;
}
.headerContactFooterBody a {
  display: block;
  position: relative;
  background-color: #fff;
  font-size: 10px;
  line-height: 1.3;
  padding: 5px 25px 5px 12px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.headerContactFooterBody a:hover .circleRight  {
  right: 2px;
}
.headerBtnCircle {
  position: absolute;
  left: 22px;
  top: 60px;
}
.icon-arrow_circle_right {
  transition: all 0.5s ease;
}
.headerBtnCircle:hover .icon-arrow_circle_bottom,
.headerBtnCircle:hover .icon-arrow_circle_right {
  margin-left: 5px;
}
.headerContactSp {
  padding: 10px 5px 0;
}
.headerContactSp li {
  float: left;
  width: 50%;
  padding: 0 10px;
  box-sizing: border-box;
}
.headerContactSpIcon {
  font-size: 14px;
  margin-left: -10px;
  margin-right: 5px;
}
@media only screen and (max-width: 950px) {
  .headerBtnCircle {
    position: static;
    width: 80%;
    margin: auto;
    margin-bottom: 10px;
    margin-top: -7px;
  }
  .headerBtnCircle .btnCircleTtl {
    margin-bottom: 4px;
  }
  .headerBtnCircle .btnCircle {
    border-radius: 5px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    padding-bottom: 5px;
  }
  .headerBtnCircle .btnCircleIcon {
    display: inline-block;
    font-size: 25px;
  }
  .headerBtnCircle .icon-arrow_circle_right {
    position: relative;
    top: 1px;
  }
  .headerBtnCircle .btnCircleText {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    vertical-align: middle;
  }
  .secondNavTrigger{
    height: 36px;
  }
  .headerContactSp li:nth-of-type(2) .secondNavTrigger{
    padding-top:9px;
    padding-left: 13px;
  }
  .icon-tel.headerContactSpIcon {
    font-size: 20px;
    position: relative;
    top:-1px;
    margin-left: -20px;
  }
  .headerContactSp li:nth-of-type(1) .secondNavTrigger{
    padding-top:12px;
    padding-left: 13px;
  }
  .icon-mail.headerContactSpIcon{
    position: relative;
    top:0px;
    padding-right: 2px;
    margin-left: -10px;
  }
}
@media only screen and (max-width: 450px) {
  .headerBtnCircle {
    width: 100%;
  }
}
.topicWindow {
  width: 648px;
  float: left;
}
.topicImg {
  position: relative;
  float: left;
  margin-right: 10px;
}
.topicImg:after {
  content: "";
  display: block;
  position: absolute;
  background: url(../img/home/img_newswindow.png) center center no-repeat;
  width: 223px;
  height: 153px;
  top: 0;
  left: 0;
}
.topicHeader {
  display: table;
  table-layout: fixed;
  width: 240px;
}
.topicHeaderInner {
  display: table-row;
}
.topicHeader .icon {
  display: table-cell;
  font-size:45px;
  color: #00a439;
  width: 60px;
  position: relative;
  top: -3px;
  left: -10px;
}
.topicHeader h1 {
  display: table-cell;
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.5;
}
.topicBody {
  border-top: 1px solid #00a439;
  margin-top: 6px;
  padding-top: 10px;
  font-size: 12px;
}
.topicContent {
  width: 343px;
  float: right;
  padding-top: 20px;
}
.topic {
  width: 584px;
  margin: auto;
  position: relative;
}
.topicBtn {
  position: absolute;
  top: 25px;
  right: 0;
}
.topicBtn a {
  font-weight: bold;
  padding:10px 15px;
  transition: all 0.5s ease !important;
}

@media only screen and (max-width: 950px) {
  .topicWindow {
    width: auto;
    float: none;
  }
  .topicImg:after {
    content: "";
    display: block;
    position: absolute;
    background: url(../img/home/img_newswindow.png) center center no-repeat;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 100%;
  }
}
@media only screen and (max-width: 700px) {
  .topicImg img {
    width: 100%;
  }
  .topicImg {
    width: 50%;
    margin-right: 0;
    float: none;
    margin: 10px auto 0;
  }
  .topicHeader {
    width: auto;
  }
  .topicHeader .icon {
    font-size:25px;
    width: 30px;
    top: -3px;
    left: 0;
  }
  .topicHeader h1 {
    font-size: 11px;
  }
  .topicBody {
    font-size: 9px;
  }
  .topicContent {
    width: auto;
    float: none;
    padding-top: 10px;
  }
  .topic {
    width: 90%;
    margin: auto;
  }
  .topicBtn {
    position: static;
  }
  .topicBtn a {
    display: block;
    margin-top: 10px;
  }
  .topicWindow .sp-previous-arrow {
    margin-left: -13px;
  }
  .topicWindow .sp-next-arrow {
    margin-right: -10px;
  }
}
/*  

*/

/* -------------------- navi2 */
.menuNavi {
  line-height:60px;
  margin-top: 20px;
  margin-right: 1.28%;
  height: 100px;
}
.menuNavi li {
  float: left;
  text-align: center;
  width: 15.6%;
/*  width: 143px; */
  height: 60px;
  position: relative;
  background-color: #fff;
  color: #00a439;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  margin-bottom: 5px;
  margin-right: 8px;
}
@media only screen and (max-width: 950px) {
  .menuNavi{
    margin-left: 1.28px;
  }
  .menuNavi li {
/*    width: 115px; */
    width: 30%;
  }
}
@media only screen and (max-width: 450px) {
  .menuNavi li {
    width: 40%;
    height: 55px;
  }
}
.menuNavi li:last-child {
  margin-right: 0;
}
.menuNavi li:hover {
  background-color: #00a439;
  color: #fff;
}
/* -------------------- menuNaviTape */
.menuNaviTape{
  background: url(../img/common/bg_tape_yellow.png) 0 0 no-repeat;
  background-size: 45px;
  width: 45px;
  height: 45px;
  position: absolute;
  left: -1px;
  top: -1px;
  color: #333;
  text-align: center;
}
.menuNaviTapeText {
  display: block;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  position: absolute;
  top: 20px;
  left: -30px;
  width: 65px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0;
  font-size: 13px;
}

/* -------------------- home */

.homeSection {
  padding: 50px 0 30px;
}
/* home01 */
.homeSection01 {
  position: relative;
  border-top: 1px solid #e8e8e8;
}
.homeSection01:after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  background: url(../img/home/img_home_section_01.jpg) 0 0 no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
}
.homeSection01Content {
  width: 50%;
  padding: 75px 50px 30px 0;
  box-sizing: border-box;
}
.homeSectionTtl {
  font-size: 30px;
  color: #00a439;
  font-weight: normal;
  margin-bottom: 20px;
  letter-spacing: 0.17em;
}
.homeSectionTtl .icon {
  font-size: 50px;
  position: relative;
  top: -2px;
  margin-left: -13px;
}
.sectionHgroup {
  margin-bottom: 20px;
}
.sectionHgroup .homeSectionTtl {
  float: left;
  margin-right: 40px;
}
#home06 .sectionHgroup .homeSectionTtl {
  width: 210px;
}
.sectionHgroup .text {
  float: left;
  margin-top: -14px;
}
.homeSection .content680 {
  margin: auto;
}
@media only screen and (max-width: 950px) {
  .homeSection {
    padding: 20px 0 30px;
  }
  .homeSection01 {
    position: relative;
    border-top: 1px solid #e8e8e8;
    padding: 10px 0;
  }
  .homeSection01:after {
    content: none;
  }
  .homeSection01Content {
    width: auto;
    padding: 0;
  }
  .sectionHgroup .homeSectionTtl {
    float: none;
    margin-right: 0;
  }
  .homeSectionTtl {
    font-size: 15px;
    margin-top: 5px;
  }
  #home01 .homeSectionTtl,
  #home04 .homeSectionTtl {
    margin-bottom: 5px;
  }
  #home01 .homeSectionTtl{
    margin-top: 15px;
  }
  .homeSectionTtl .icon {
    margin-left: -7px;
    font-size: 30px;
  }
}

.homeSection03 {
  background: url(../img/home/img_home_section_03.jpg) 0 0 no-repeat;
  background-size: cover;
}
.homeSection03Ttl {
  text-indent: -9999px;
  background: url(../img/home/homeSection03Ttl.png) center 0 no-repeat;
  height: 237px;
}
.homeSection03 .alignC .text {
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  line-height: 2;
  font-size: 14px;
}
.homeSection03Img {
  background: url(../img/home/figure.png) center center no-repeat;
  height: 492px;
  padding: 30px 0;
}
.homeSection03Img > div {
  display: none;
}

@media only screen and (max-width: 950px) {
  .homeSection03Ttl {
    background-image: url(../img/home/homeSection03Ttl_sp.png);
    background-size: contain;
    height: 150px;
    margin-bottom: 20px;
  }
  .homeSection03 .alignC .text {
    font-size: 10px;
    letter-spacing: 0;
  }
  .homeSection03Img {
    background-image: url(../img/home/figure_sp.png);
    background-size: contain;
    height: 299px;
    padding: 30px 0;
  }
}
.homeSection04 {
  background: url(../img/home/img_home_section_04.jpg) 0 0 no-repeat;
  background-size: cover;
  padding-bottom: 0;
  overflow: hidden;
}
.homeSection04Img {
  margin-top: -50px;
  position: relative;
}
.homeSection04Img img {
  position: relative;
  z-index: 1
}
.homeSection04Img:after {
  content: "";
  display: block;
  width: 300%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: -100%;
  background-color: #fff;
}
@media only screen and (max-width: 950px) {
  .homeSection04Img {
    margin-top: 20px;
    position: relative;
  }
  .homeSection04Img img {
    position: relative;
    z-index: 1
  }
  .homeSection04Img:after {
    content: none;
  }
}

.homeTrail .inner {
  background: url(../img/home/img_trial.jpg) 80% center no-repeat;
  padding: 60px 0;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
.homeTrailBody {
  width: 50%;
  text-align: center;
  line-height: 1.8;
  font-size: 14px;
}
.homeTrail .icon {
  font-size: 60px;
  color: #00a439;
  display: block;
  margin-bottom: 20px;
}
.homeTrail .btn {
  margin-top: 14px;
  padding: 10px 30px 8px 42px;
}
@media only screen and (max-width: 950px) {
  .homeTrail .inner {
    background: none;
    padding: 30px 0;
  }
  .homeTrailBody {
    width: auto;
    font-size: 12px;
  }
}


.cardHome .btn {
  width: 90%;
  margin: 15px auto 0;
  color: #333;
  transition: all 0.5s ease;
  padding: 14px 0 13px 15px;
  font-size: 14px;
  letter-spacing: 0.1em;
}
.cardHome .cardTape {
  color: #333;
  top: -6px;
}
.cardHome .cardHeading {
  height: 50px;
  display: table;
  width: 100%;
}
.cardHome .cardHeadingText {
  display: table-cell;
  vertical-align: middle;
  line-height: 1.3;
  padding:3px 0 0 15px; 
}
.cardHome a:hover .cardHeading {
  background-color: #00a439;
  color: #fff;
}
.cardHome .cardTextBorder {
  width: 90%;
  padding: 10px 20px;
  box-sizing: border-box;
}
.cardHome li:hover:before,
.cardHome li:hover a {
  border-color: #00a439;
}
.cardHome li:hover .btnGray{
  background-color: #F3F001;
}
@media only screen and (max-width: 640px) {

  .cardHome .btn {
    margin: 10px auto 0;
    padding: 14px 0 13px;
    font-size: 10px;
  }
  .cardHome .cardHeading {
    font-size: 11px;
    padding-left: 30px;
  }
  .cardHome .cardHeadingText {
    display: table-cell;
    vertical-align: middle;
    padding:1px 0 0 0; 
  }
  .cardHome a:hover .cardHeading {
    background-color: #f4f4f4;
    color: #00a439;
  }
  .cardHome .cardTextBorder {
    width: 90%;
    padding: 10px 20px;
    box-sizing: border-box;
  }
  .cardHome li:hover:before,
  .cardHome li:hover a {
    border-color: #ddd;
  }
}










/* -------------------- xxx */
/* -------------------- xxx */
/* -------------------- xxx */

/* -------------------- others */

.circleList .icon.black{
  color: #666;
}
.subttl{
  font-weight: normal;
  padding-left: 10px;
}
.twitterTimeline{
  max-width: 520px;
  width: 100%;
  position: relative;
}
.fb-page{
  max-width: 340px;
  width: 100%;
  position: relative;
}
.headerProfileHomeHeader div{
  width: 100%;
}



/* -------------------- arrowHead */

.sidebarLink.arrowHead li{
  display: table; 
  width: 100%;
  transition:all ease 0.3s;
}
.sidebarLink.arrowHead li:hover{
  background: #F9F9F9;
}
.sidebarLink.arrowHead a{
  display: table-cell;
  width: 100%;
}
.sidebarLink.arrowHead .icon{
  display: table-cell;
  font-size: 10px;
  border-bottom: 1px solid #E6E6E6;
  padding: 0 5px 0 8px;
  color: #00A439;
}

/* -------------------- btn */

.btnMid2 {
  padding: 10px 40px 8px;
}
.btnMid2 .icon{
  font-size: 13px;
  right:-15px;
  top:-1px;
  position: relative;

}


/* -------------------- orderList */

.orderList{
  padding-left: 10px;
  line-height: 1.5;
  margin-left: 25px;
}
.orderList:before{
  content: "1）";
  margin-left: -25px;
  margin-right: 3px;
}
.orderList.order02:before{
  content: "2）";
}
.orderList.order03:before{
  content: "3）";
}
.orderListNatural {
  margin:15px auto 30px;
}
.orderListNatural li {
  line-height: 1.5;
  margin-bottom: 0.5em;
  list-style: decimal;
  margin-left: 20px;
}



/* -------------------- iconEdit */

.icon.icon-search {
  padding:  0 0.4em 0 0 ;
  top:-1px;
  position: relative;
  margin-left: -5px;      
}
.icon.icon-search_nav {
  padding:  0 0.4em 0 0 ;
  top:-2px;
}
.icon.icon-home_recommend {
  top:0;
  margin-left: -5px;
}
.icon.icon-pickup_seminor {
  top:-1px;
}
.icon.icon-privilege {
  padding:  0 0.2em 0 0 ;
  margin-left: -20px;
}
.icon.icon-category_store {
  padding:  0 0.2em 0 0 ;
  top:-1px;
  margin-left:-5px;
}
.icon.icon-mail_maga {
  padding:  0 0.2em 0 0 ;
  margin-left: -5px;
}
.icon.icon-twitter_news {
  padding: 0 0.3em 0 0 ;
  margin-left: -10px;
}
.icon.icon-facebook_news {
  padding: 0;
  margin-left: -10px;
}
.gBlockHeader .icon-txtfile {
  padding-right: 0px;
  margin-left: -12px;
}
/* -------------------- contentsNavHome */
@media only screen and (min-width: 951px) {
  .contentsNavHome{
    margin-top: 1px;
  }
  .contentsNavHome .icon-house{
    font-size: 30px;
  }
  .contentsNavHome .icon-myhome{
    font-size: 34px;
    margin-bottom: 3px;
  }
  .contentsNavHome .icon-entry{
    font-size: 34px;
    margin-bottom: 3px;
  }
  .contentsNavHome .icon-home{
    font-size: 38px;
    margin-bottom: 3px;
    margin-top: -3px;
  }
  .contentsNavHome .icon-mycorse{
    font-size: 42px;
    margin-top: -3px;
    margin-bottom: -1px;
  }
  .contentsNavHome .icon-mail{
    font-size: 28px;
    margin-top: 4px;
    margin-bottom: 6px;
  }
}
/* -------------------- sideBannerWrap */

.sideBannerWrap {
  position:relative;
  margin:30px auto 25px;
  width:100%;
}
.sideBannerWrap .sideBanner li {
  width:100%;
  height: auto;
  padding-top: 10px;
}
.sideBannerWrap a{
  display: block;
}
.sideBannerWrap.sp-vertical .sp-arrows {
  position: absolute;
  width: 100%;
  height:149%;
  left: 0;
  top: -28px;
  margin: 0 auto;
}
.sp-arrows{
  z-index: 1;
}
.topicWindow .sp-arrows{
  z-index: 3;
}
.sp-mask{
  z-index: 2;
}
.sp-image-container img:hover{
  -webkit-transition:all ease 0.3s;
  transition:all ease 0.3s;
}
.sp-image-container img:hover{
  opacity: 0.8;
}
@media only screen and (max-width: 950px) {
  .sideBannerWrap.sp-vertical .sp-arrows {
    height:106%;
    margin-top: 7%;
  }
  .sideBannerWrap .sp-mask{
    margin-top: -7%;
  }
}
@media only screen and (min-width: 561px) and (max-width: 950px){
  .sideBannerWrap .sp-image{
    margin-left: 40px !important ;
    margin-top: 38px !important ;
  }
}
@media only screen and (min-width: 400px) and (max-width: 560px){
  .sideBannerWrap.sp-vertical .sp-arrows {
    height:110%;
    margin-top: 5%;
  }
  .sideBannerWrap .sp-mask{
    margin-top: -5%;
  }
}
@media only screen and (max-width: 400px){
  .sideBannerWrap.sp-vertical .sp-arrows {
    height:125%;
    margin-top: 2%;
  }
  .sideBannerWrap .sp-mask{
    margin-top: -1%;
  }
}
.sideBannerWrap .sp-arrow {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 5px 0;
  background: #ededed;
  cursor: pointer;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  height:10px;
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  -webkit-transition: all 0.3s ease;
  transition:all .3s ease;
}
.sideBannerWrap .sp-arrow:hover {
  background: #f3f001;
}
.sideBannerWrap .sp-arrow:before,
.sideBannerWrap .sp-arrow:after {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  background: none;
  width: auto;
  height: auto;
  position: static;
  display: inline-block;
}
.sideBannerWrap .sp-arrow:after {
  display: none;
}
.sideBannerWrap .sp-previous-arrow:before{
  content: "\e60a";
}
.sideBannerWrap .sp-next-arrow:before{
  content: "\e607";
}
.sideBannerWrap .sp-previous-arrow {
  top: 0px;
}
.sideBannerWrap .sp-next-arrow {
  bottom: 0px;
}
.scrollHome {
  padding-top: 136px;
  margin-top: -136px;
}
@media only screen and (max-width: 950px) {
  .scrollHome {
    padding-top: 44px;
    margin-top: -44px;
  }
}

.headerHomePadding .backTop {
  right: -250px;
}
.backTop {
  position: fixed;
  top: 180px;
  right: -177px;
  z-index: 1000;
  color: #fff;
  background-color: #00a439;
  border-radius: 4px;
  padding: 2px 15px 2px 10px;
  font-size: 11px;
}
.backTop:hover {
  right: -2px;
}
.backTop .icon {
  font-size: 27px;
  margin-right: 10px;
}
.backTop.type02 {
  right: 20px;
  background: none;
}
.backTop.type02:hover {
  top: 165px;
}
@media only screen and (max-width: 950px) {
  .backTop {
    display: none;
  }
}


/* -------------------- login form */

.loginFormWrap {
  display: none;
}
.loginForm {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: table;
  table-layout: fixed;
}
.loginFormCover {
  position: absolute;
  width: 100%;
  height: 400%;
  background-color: #65c15d;
  background-color: rgba(101, 193, 93,0.4);
  opacity: 0;
  top: 0;
  bottom: 0;
}
.loginFormBody {
  display: table-cell;
  position: relative;
  width: 100%;
  vertical-align: middle;
  opacity: 0;
  transition: 0.5s ease all;
}
.show .loginFormBody , .show .loginFormCover {
  opacity: 1;
}
.loginFormContent {
  background-color: #fff;
  width: 490px;
  margin: auto;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 25px;
  position: relative;
  z-index: 101;
}
.loginFormInput dt {
  font-size: 14px;
  margin-bottom: 4px;
}
.loginFormInput dd {
  margin-bottom: 20px;
}
.loginFormInput input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  font-size: 14px;
  padding: 14px 10px 9px;
  line-height: 1;
  border-color: #e8e8e8;
}
.loginFormInput input:focus {
  border-color: #00a439;
}
.keepLogin {
  font-size: 12px;
  margin-top: -10px;
  margin-bottom: 20px;
}
.loginForm .btn {
  font-size: 15px;
  padding-top: 14px;
  padding-bottom: 13px;
  margin-bottom: 15px;
}
.loginFormTextlink {
  color: #00a439;
  font-size: 12px;
}
.loginFormTextlink a:hover {
  text-decoration: underline;
}
.loginFormTextlink img {
  vertical-align: middle;
  margin-right: 10px;
}
.loginFormContentBtn {
  display: block;
  margin-top: 12px;
  padding-top: 17px;
  padding-bottom: 14px;
  position: relative;
}
.loginFormContentBtn:hover {
  background: #f3f001;
}
.loginFormContentBtn .icon-arrow_right {
  position: absolute;
  right: 10px;
  top: 42%;
}
.loginFormTextlinkSpan {
  position: relative;
  top:1px;
}
.loginFormTextlinkSpan img{
  position: relative;
  top:-3px;
}
.loginFormTextlink .loginFormTextlinkSpan img{
  position: relative;
  top:-1px;
}
.loginFormTextlinkSpan .icon {
  font-size: 50px;
  position: relative;
  left: -5px;
  line-height: 27px;
  top: -1px;
}
@media only screen and (max-width: 950px) {
  .loginForm {
    position: static;
    display: block;
  }
  .loginFormCover {
    position: static;
    display: none !important;
  }
  .loginFormBody {
    display: block;
    opacity: 1;
  }
  .loginFormContent {
    width: auto;
    margin: -10px auto 0;
    padding: 20px;
  }
  .loginFormInput dt {
    font-size: 13px;
    margin-bottom: 5px;
  }
  .loginFormInput input {
    font-size: 14px;
    padding: 10px 10px 9px;
  }
  .loginFormTextlink a {
    text-decoration: none;
    display: table;
  }
  .loginFormTextlinkSpan {
    display: table-cell;
    line-height: 1.5;
    vertical-align: middle;
  }
  .loginFormTextlink .loginFormTextlinkSpan:first-of-type {
    padding-right: 10px;
  }
  .loginFormContentBtn {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 20px;
  }
  .loginFormContentBtn .icon-arrow_right {
    display: none;
  }
}

/* -------------------- mypage header */

.headerLeftContents{
  width: 92.5%;
  float:left;
}
.headerAccount > div,
.headerAccount > a{
  background: #f3f3f3;
  margin:2px 5px;
  box-sizing: border-box;
  padding: 10px 5px 8px;
  letter-spacing: 0.1em;
  width: 27%;
  text-align: center;
  display: table;
  vertical-align: middle;
  border-radius: 5px;
  font-size: 11px;
  float: left;
  display: table;
}

.headerAccount .loginInfo{
  margin-left: 0;
  padding-left: 15px;
}
.loginInfoDate {
  font-size: 10px;
  position: relative;
  top:-1px;
}
.loginInfo .icon {
  font-size: 14px;
  margin-right: 3px;
  position: relative;
  top: -1px;
}
.loginInfoNum,
.mailNumber {
  font-size: 15px;
  margin:0 3px;
  position: relative;
  top:1px;
}
.newMessage .mailNumber{
  color: #ff6464;
}
.headerAccount .headerMail{
  width: 23%;
  padding-left: 10px;
}
.headerAccount .headerMail:hover{
  background: #F3F001;
}
.mypageHeader .headerProfileBtn {
  padding: 0;
  margin:0;
  background: none;
}
.mypageHeader .headerProfileBtn:hover {
  background: none;
}
.mypageHeader .headerProfileBtn .icon{
  margin-right: 5px;
  font-size: 15px;
  display: inline-block;
  position: relative;
  top:-1px;
}
.mypageHeader .headerProfileBtn.newMessage .icon:after{
  content: "●";
  display: block;
  position: absolute;
  top:-12px;
  left: -4px;
  color: #ff6464;
  font-size: 20px;
}
@media only screen and (max-width: 950px) {
  .headerLeftContents{
    width: 100%;
    float:none;
    padding:0 3%;
    box-sizing: border-box;
  }
  .headerAccount > div,
  .headerAccount .headerMail,
  .mypageHeader .headerProfile{
    width: 100%;
    margin:1% 0;
    padding:10px 5% 8px;
  }
  .mypageHeader .headerProfile{
    padding:5px 5% 8px;
  }
  .loginInfoDate{
    display: block;
    margin-top: 5px;
  }
}
.headerNews {
  font-size: 11px;
  margin:10px 0 5px ;
}
.headerNewsBody {
  float: left;
  width: 81.3%;
  margin-right: 10px;
}
.headerNewsBody p{
  display: inline-block;
}
.headerNewsBody .icon{
  font-size: 20px;
  position: relative;
  top:-1px;
}
.newsIndexDetail{
  text-decoration: underline;
}
.newsIndexDetail:hover{
  text-decoration: none;
}
.headerNewsMoreWrap {
  float: left;
  width: 17%;
  position: relative;
  top:-1px;
}
.headerNewsMore {
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0;
  width: 100%;
  padding: 5px 10px 4px;
  box-sizing: border-box;
  background: #777;
  color:#fff;
  border-radius: 5px;
  letter-spacing: 0.1em;
}
.headerNewsMore:hover {
  background: #ff6464;
}
@media only screen and (max-width: 950px) {
  .headerNews {
    background-color: #F3F3F3;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5%;
  }
  .headerNewsBody {
    width: auto;
    margin: 0;
    height: auto;
    max-height: inherit;
    padding: 0;
    line-height: 1.4;
  }
  .headerNewsBody .sp{
    font-weight: bold;
    margin-left: 5px;
  }
  .headerNewsBody p {
    display: block;
    margin: 5px 0;
    border-top: 1px #aaa dotted;
    padding: 7px 5px 5px;
  }
  .headerNewsMoreWrap {
    width: 100%;
  }
  .headerNewsMore {
    padding:5% 0;
  }
}

.mypageLogoutWrap{
  position: absolute;
  top:43px;
  float:right;
  right:15px;
}
.mypageLogoutBtn{
  width: 100%;
  font-size: 10px;
  display: inline-block;
  text-align: center;
  background: #eee;
  box-sizing: border-box;
  border-radius: 20px;
  margin-top: 5px;
  padding: 5px 10px;
}
.mypageLogoutBtn:hover{
  background: #bbb;
  color: #fff;
}
@media only screen and (max-width: 950px) {
  .mypageLogoutWrap{
    position: static;
    float:none;
    width: 95%;
    margin:0 auto 4%;
  }
  .mypageLogoutBtn{
    border-radius: 5px;
    padding:5% 0;
  }
}
.mypageMvBtn1 {
  float: left;
  position: relative;
  z-index: 8;
}
.mypageMvBtn2 {
  float: right;
  z-index: 8;
  position: relative;
}

.bookItem {
  width: 607px;
  height: 421px;
  box-sizing: border-box !important;
  background-size: contain;
  position: relative;
}
.bookItem .bookItemClear {
  display: none;
}
.bookItem.clear .bookItemClear {
  display: block;
  position: absolute;
  top: 40px;
  right: 24px;
  z-index: 3;
}
.bookItemContent {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  box-sizing: border-box;
  padding: 11% 5% 3%;
}
.bookItemBg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.roundabout-in-focus .bookItemContent {
  background: url(../img/mypage/bg_bookItem.png) 0 0 no-repeat;
  background-size: cover;
}
.bookItem.active:before {
  content: none;
}
.bookItemHeader {
  color: #00a439;
  font-size: 123%;
  text-align: center;
  border-bottom: 2px solid #00a439;
  padding-bottom: 1%;
  margin-bottom: 2%;
}
.bookItemContentBody {
  max-width: 470px;
  margin: auto;
}
.bookItemImg {
  float: left;
  width: 30%;
  border: 1px solid #eaeaea;
  margin-right: 5%;
  margin-top: 3%;
}
.bookItemDataWrap {
  width: 64%;
  float: left;
}
.bookItemData {
  line-height: 1.2;
  display: table;
  width: 100%;
  border-bottom: 1px solid #eaeaea;
  padding: 3% 0 2%;
}
.bookItemDataHasCaption {
  border-bottom: none;
}
.bookItemDataCaption {
  border-bottom: 1px solid #eaeaea;
  font-size: 11px;
  padding-bottom: 2%;
}
.captionNum {
  float: right;
}
.bookItemData dt {
  font-size: 95%;
  display: table-cell;
  vertical-align: middle;
}
.bookItemData dd {
  text-align: right;
  display: table-cell;
  vertical-align: middle;
  font-size: 108%;
}
.bookItemData dt .icon {
  color: #ffbe10;
  font-size: 20px;
  width: 30px;
  display: inline-block;
  position: relative;
  top: -2px;
  margin-right: 2px;
}
.bookItemData dt .icon-stamp {
  font-size: 24px;
}
.bookItemData dt .icon-time2 {
  font-size: 24px;
  position: relative;
  left: -3px;
}
.bookItemDataNumLarge {
  font-size: 200%;
}
.bookItemDataMin {
  font-size: 10px;
}
.bookItemBtns {
  clear: both;
  padding-top: 2%;
}
.bookItemBtnsItem {
  display: table-cell;
  text-align: center;
  padding: 0 1%;
  vertical-align: top;
  min-width: 119px;
}
.bookItemBtnsText {
  font-size: 80%;
  text-align: center;
  padding-top: 2.5%;
  clear: both;
}
.bookItemBtnsText p {
  display: inline-block;
  margin: 0 10px;
}
.bookItemBtnsItem .btn {
  font-size: 11px;
}
.bookItemBtnsItem .icon {
  font-size: 210%;
  margin-right: 9px;
  display: inline-block;
}
.bookItemBtnsItem .table {
  border: none;
}
.bookItemBtnsItem .table .icon {
  display: block;
  float: left;
}
.bookItemBtnsItem .table .tableCell {
  text-align: left;
  display: table;
}
.bookItemBtnsItem .table .tableCell.alignC{
  text-align: center;
}
.bookItemBtnsItem .icon-learning {
  font-size: 185%;
  padding-bottom: 1%;
}
.bookItemBtnsItem .btnGray {
  padding-left: 20px;
}
.bookItemBtns {
  display: table;
  width: 100%;
  vertical-align: top;
}
.bookItemBtnsItem .btnGoalEdit2 {
  font-size: 14px;
}
.bookWindow {
  padding-top: 50px;
  position: relative;
}
.btnBook a {
  color: #00a439;
  font-size: 18px;
  z-index: 8;
}
.btnBook a:hover {
  color: #fffd39;
}
.btnBookPrev {
  position: absolute;
  top: 60%;
  left: 0;
}
.btnBookNext {
  position: absolute;
  top: 60%;
  right: 0;
}

@media only screen and (max-width: 950px) {
  .bookItem {
    width: 100%;
    height: auto;
    background: #fff;
    padding: 7px;
    top: 10px !important;
    box-shadow: 0 0 12px rgba(0,0,0,0.2);
  }
  .bookItemContent {
    position: static;
    padding: 7px;
    border: 2px solid transparent;
  }
  .bookItemBg {
    display: none !important;
  }
  .roundabout-in-focus {
    left: 0 !important;
  }
  .bookItemContent {
    background: #fff;
    border: 2px solid #f4f11a;
    margin-bottom: 10px;
  }
  .bookItemHeader {
    color: #00a439;
    line-height: 1.3;
  }
  .bookItemContentBody {
    max-width: inherit;
  }
  .bookItemImg {
    float: none;
    width: 60%;
    margin: 10px auto;
  }
  .bookItemImg img {
    width: 100%;
  }
  .bookItemDataWrap {
    width: auto;
    float: none;
  }
  .bookItemData {
    font-size: 80%;
  }
  .bookItemBtns {
    padding-top: 5%;
    display: block;
  }
  .bookItemBtnsText {
    font-size: 80%;
    margin-bottom: 3px;
    line-height: 1.5;
    margin-top: 5px;
  }
  .bookItemBtnsItem {
    font-size: 9px;
    min-width: inherit;
    display: block;
    margin-bottom: 10px;
  }
  .bookItemBtnsItem .icon {
    font-size: 160%;
    margin-right: 5px;
    display: inline-block;
  }
  .bookItemBtnsItem .btn {
    display: table;
    height: auto;
  }
  .bookItemBtnsItem .table .icon {
    display: inline-block;
    float: none;
  }
  .bookItemBtnsItem .table .tableCell {
    display: inline-block;
  }
  .bookWindow {
    padding-top: 120px;
    height: auto;
    position: relative;
  }
  .bookList {
    padding-bottom: 30px !important;
  }
  .btnBook {
    display: none !important;
  }
  .btnBook a {
    color: #00a439;
    font-size: 18px;
  }
  .btnBook a:hover {
    color: #00a439;
  }
  .btnBookPrev {
    left: -10px;
    z-index: 10;
  }
  .btnBookNext {
    right: -10px;
    z-index: 10;
  }
}

.shelf {
  float: left;
  width: 270px;
  overflow: hidden;
}
.shelfItem {
  font-size: 9px;
  -webkit-perspective: 400;
  -ms-perspective: 1400px;
  -o-perspective: 400;
  -moz-perspective: 400px;
  perspective: 400;
}
.shelfItem a {
  display: block;
  background-color: #fff;
  padding: 18px 9px;
  margin: 12px;
  letter-spacing: 0;
  text-align: left;
  border-radius: 4px;
  position: relative;
  z-index: 2;
  line-height: 1.3;
  position: relative;
  /*
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
  */
}
.shelfItem a:hover {
  background-color: #f3f001;
  /*
  transform: matrix3d(1,0,0.00,0,0.00,0.94,-0.34,0.0004,0,0.34,0.94,0,0,12,0,1);
  -webkit-transform: matrix3d(1,0,0.00,0,0.00,0.94,-0.34,0.0004,0,0.34,0.94,0,0,12,0,1);
  -moz-transform: matrix3d(1,0,0.00,0,0.00,0.94,-0.34,0.0004,0,0.34,0.94,0,0,12,0,1);
  -o-transform: matrix3d(1,0,0.00,0,0.00,0.94,-0.34,0.0004,0,0.34,0.94,0,0,12,0,1);
  -ms-transform: matrix3d(1,0,0.00,0,0.00,0.94,-0.34,0.0004,0,0.34,0.94,0,0,12,0,1);
  */
  /*
  -webkit-transform: rotateX(-20deg);
  transform: rotateX(-20deg);
  */
}
/*
.shelfItem a:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-color: #ccc;
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: rotateX(90deg) translateZ(80px);
-ms-transform: rotateX(90deg) translateZ(80px);
transform: rotateX(90deg) translateZ(80px);
}
*/
.shelfTtl {
  text-align: center;
  background-color: #fff;
  background-color: rgba(255,255,255,0.8);
  font-size: 12px;
  font-weight: normal;
  padding: 13px 0 11px;
  color: #fff;
}
.shelfItemWrap {
  border: 7px solid #fff;
  border: 7px solid rgba(255,255,255,0.8);
  border-top: none;
  box-sizing: border-box !important;
  padding: 0 !important;
  max-height: 100%;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.shelfA .shelfItem a:hover,
.shelfA .shelfTtl {
  background-color: #a3ffc3;
  background-color: rgba(163, 255, 195, 0.7);
}
.shelfA .shelfItemWrap {
  border-color: #a3ffc3;
  border-color: rgba(163, 255, 195, 0.7);
}
.shelfB .shelfItem a:hover,
.shelfB .shelfTtl {
  background-color: #ffc28b;
  background-color: rgba(255, 194, 139, 0.7);
}
.shelfB .shelfItemWrap {
  border-color: #ffc28b;
  border-color: rgba(255, 194, 139, 0.7);
}
.shelfC .shelfItem a:hover,
.shelfC .shelfTtl {
  background-color: #ffadad;
  background-color: rgba(255, 173, 173, 0.7);
}
.shelfC .shelfItemWrap {
  border-color: #ffadad;
  border-color: rgba(255, 173, 173, 0.7);
}
.shelfD .shelfItem a:hover,
.shelfD .shelfTtl {
  background-color: #add6ff;
  background-color: rgba(173, 214, 255, 0.7);
}
.shelfD .shelfItemWrap {
  border-color: #add6ff;
  border-color: rgba(173, 214, 255, 0.7);
}
.shelfE .shelfItem a:hover,
.shelfE .shelfTtl {
  background-color: #b87fe3;
  background-color: rgba(184, 127, 227, 0.7);
}
.shelfE .shelfItemWrap {
  border-color: #b87fe3;
  border-color: rgba(184, 127, 227, 0.7);
}
.taketori-col {
  padding: 0 !important;
}
.btnShelfClose {
  font-size: 11px;
  margin-bottom: 10px;
}
.btnShelfClose .icon {
  margin-right: 4px;
}
.shelfWindow .bx-next,
.shelfWindow .bx-prev {
  color: #fff;
}
.shelfWindow .bx-next:hover,
.shelfWindow .bx-prev:hover {
  color: #fffd39;
}
.shelfWindow .bx-wrapper {
  height: 450px;
}
.shelfWindow .bx-viewport {
  height: auto !important;
}
.bookNewsText {
  font-weight: bold;
  font-size: 13px;
  line-height: 1.8;
}
.bookNewsTextDate {
  text-align: right;
  margin-top: 10px;
}
.bookNewsBtn {
  text-align: center;
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: auto;
}
.bookNewsBtn .icon {
  font-size: 20px;
  margin-right: 5px;
}
.bookNewsBtn .btn {
  padding: 10px 40px 9px;
  font-size: 14px;
}
@media only screen and (max-width: 950px) {
  .bookListNews .bookItemContent {
    padding-bottom: 80px;
  }
  .bookNewsBtn {
    bottom: 20px;
  }
}
.btnNewsClose {
  font-size: 11px;
  margin-bottom: 10px;
  position: absolute;
  top: 10px;
  left: 20%;
}
.btnNewsClose .icon {
  margin-right: 4px;
}
@media only screen and (max-width: 950px) {
  .bookListNewsWrap {
    padding-bottom: 60px;
  }
  .btnNewsClose {
    bottom: 0px;
    top: inherit;
    left: inherit;
    right: 0;
  }
}

/* -------------------- mypageMenuList */

.mypageMenuList > li {
  width: 30%;
  margin-right: 5%;
  float: left;
}
.mypageMenuList > li:nth-child(3n) {
  margin-right: 0;
}
.mypageMenuListContent {
  padding-bottom: 10px;
  height: 234px;
}

@media only screen and (max-width: 950px) {
  .mypageMenuList > li {
    width: auto;
    margin: 0 auto 30px;
    float: none;
  }
  .mypageMenuListContent {
    text-align: center;
    height: inherit;
    margin-bottom: 5px;
  }
}







.reportList li {
  text-align: center;
}
.reportList li p {
  font-weight: bold;
  font-size: 12px;
  padding: 10px 0 20px;
  line-height: 1.3;
  min-height: 60px;
  box-sizing: border-box;
}
.reportListSlider .sp-previous-arrow {
  left: -30px;
  top: 30px;
}
.reportListSlider .sp-next-arrow {
  right: -30px;
  top: 30px;
}
.reportListSlider .sp-buttons {
  padding-top: 20px;
}

.graphReport {
  margin: auto;
}
.stamp {
  background-color: #f5f5f5;
  padding: 7px 0px;
  text-align: center;
  font-size: 0;
}
.stampCell {
  display: inline-block;
  background-color: #fff;
  width: 47px;
  height: 47px;
  margin: 2px;
  border: 2px solid #e8e8e8;
  border-radius: 7px;
  border-bottom-left-radius: 0;
  position: relative;
  counter-increment: stampCount;
  /*cursor: pointer;*/
  transition: all 0.5s ease;
}
.stampCell:hover {
  /*background-color: #feffee;*/
}
.stampCell:before {
  font-size: 13px;
  color: #e8e8e8;
  content: counter(stampCount);
  display: block;
  position: absolute;
  bottom: 3px;
  right: 3px;
}
.stampCell.stampPressed:before {
  content: none;
}
.stampCell.stampPressed:after {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e658";
  font-size: 35px;
  color: #00a439;
  position: absolute;
  left: 3px;
  top: 5px;
  display: inline-block;
}
.stampCell.level01.stampPressed:after {
  color: #ac8c6b;
}
.stampCell.level02.stampPressed:after {
  color: #aab4bb;
}
.stampCell.level03.stampPressed:after {
  color: #ddc000;
}
.mypageRecommendList li {
}
.mypageRecommendImg {
  text-align: center;
  position: relative;
  width: 75%;
  margin: auto;
}
.mypageRecommendImgCover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128,128,128,0.5);
  opacity: 0;
  transition: all 0.5s ease;
}
.mypageRecommendImg:hover .mypageRecommendImgCover {
  opacity: 1;
}
.mypageRecommendImgCover .btn {
  background-color: #f3f001;
}
.mypageRecommendImg .btn {
  width: 60%;
  position: absolute;
  top: 40%;
  margin: auto;
  left: 0;
  right: 0;
}
.mypageRecommendImg img {
  margin: auto;
  width: 100%;
}
.mypageRecommendTtl {
  line-height: 1.5;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  margin: 9px 0;
  padding: 5px 0 3px;
}
.mypageRecommendPrice {
  font-size: 10px;
  margin-bottom: 10px;
}
.bx-viewport {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}
.bx-next,
.bx-prev {
  font-family: 'icomoon';
  text-indent: 0 !important;
  width: auto !important;
  color: #00a439;
}
.bx-prev {
  left: -50px !important;
}
.bx-next {
  right: -50px !important;
}
@media only screen and (max-width: 950px) {
  .bx-prev {
    left: -20px !important;
  }
  .bx-next {
    right: -20px !important;
  }
}
.bx-prev:after {
  content: "\e608";
}
.bx-next:after {
  content: "\e609";
}
.hidden {
  display: none;
}
.mvImgMainMypage {
  position: relative;
  overflow: hidden;
}
.mvImgMainMypage > div > img {
  left: 0 !important;
  width: 100% !important;
}
.loadingArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 8;
}
.loadingArea img {
  width: 66px !important;
  max-width: 66px;
  height: 66px;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  margin: auto;
  display: block !important;
}
@media only screen and (max-width: 640px) {
  .loadingArea img {
    width: 33px !important;
    height: 33px !important;
    max-width: 33px;
  }
}
.headerMenuInner {
  position: relative;
}


/*===================================  add demo Style  ================================ */


/*=====  dammyNavSection  ====== */
 
@media only screen and (min-width: 769px) {
  .dammyNavSection{
    text-align: center;
    display: none;
    padding: 10px 0;
  }
  .dammyNavSection02{
    border-top: 1px solid #eee;
  }
  .dammyNavSection li{
    display: inline-block;
    font-size: 10px;
    padding:0 5px; 
  }
  .dammyNavSection li a{
    padding: 10px 0;
  }
  .dammyNavSection li:hover{
    color: #f3f001;
  }
  .dammyNavSection li:after,
  .dammyNavSection li:first-child:before{
    content: "";
    display: inline-block;
    padding:5px;
    width: 1px;
    height: 0.1em;
    border-right:1px solid rgba(0,0,0,0.5);
    position: relative;
    top:2px;
  }
  .dammyNavSection li:first-child:before{
    border-right:0;
    border-left:1px solid rgba(0,0,0,0.5);
  }
}
@media only screen and (max-width: 768px) {
  .dammyNavSection .inner {
    padding: 0;
  }
  .dammyNavSection a {
    color: #00a439;
    display: block;
    border-bottom: 1px dashed #00a439;
    padding: 10px 0 3px;
    font-weight: bold;
    padding: 15px 10px 14px;
  }
  .closeNav {
    text-align: center;
    margin: 20px auto 0;
    color: #00a439;
    width: 80%;
    padding: 10px;
    border-radius: 4px;
    border: 2px solid #00a439;
  }
  .closeNav .icon:before {
    color: #00a439 !important;
  }
  .closeNav .icon {
    position: relative;
    top: -2px;
  }
}

/*=====  loginFormContent  ====== */
.loginFormCover{
  background-color: #999;
  background-color: rgba(0,0,0, 0.4);
  z-index: 50;
}
.loginFormContent {
  border-top-left-radius: 0; 
  border-top-right-radius: 0;
}
.loginFormContent.offCanvas {
  background-color: #00A439;
  text-align: center;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0; 
  border-bottom-right-radius: 0;
}
.loginFormContent.loginFormContentBtn{
  border-radius: 4px;
}
.welcomeMessage{
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.5;
}
.welcomeMessage.subTxt{
  font-size: 12px;
}


/*=====  blogWrap  ====== */

.blogWrap .gBlockHeader,
.blogWrap .btnGreen,
.blogWrap .ttlBorder:after{
  background-color: #0091A4;
}
.blogWrap .btnGreen:hover {
  color: #3b3b3b;
  background-color: #f3f001;
}
.blogWrap .gBlock,
.blogWrap .sidebarSearch input:focus,
.blogWrap .ttlBorder{
  border-color: #0091A4;
}
.blogWrap .sidebarLink.arrowHead .icon,
.blogWrap .sidebarLink > li > a > .icon,
.blogWrap .ttlBorder{
  color: #0091A4;
}
.blogWrap .sidebarSearch input{
  color: #0091A4 !important;
}
.blogWrap .sidebarLink.arrowHead li:hover .icon,
.blogWrap .sidebarLink > li > a.open > .icon,
.blogWrap .sidebarLink > li:hover > a > .icon{
  color: #F4F11A;
}
.blogWrap .listHeaderSide {
  width: 100%;
}
.blogWrap .ttlBorder.type02{
  margin-bottom: 15px;
}
.blogCategory {
  width: 70%;
  float: left;
}
.blogCategory > li{
  float: left;
}
.blogDateTime{
  float: right;
}
.pagerBlogEntry .btnRadius{
  padding: 10px 20px 8px;
  border-radius: 20px;
}
.pagerBlogEntry .btnRadius.active,
.pagerBlogEntry .btnRadius:hover {
  background-color: #F4F11A;
  color: #666;
}
.pagerBlogEntry .icon{
  position: relative;
  top:-1px;
}
.pagerBlogEntry .icon.icon-arrow_right:before{
  left:7px;
  position: relative;
}
.pagerBlogEntry .icon.icon-arrow_left:before{
  right:7px;
  position: relative;
}
.mvSubTxt{
  display: block;
  font-size: 12px;
  margin-top: -5px;
}
.blogHead{
  background-color: #0091A4;
  width: 100%;
  text-align:left;
  padding: 30px 0 25px 30px; 
  font-size: 16px;
  border-radius: 4px;
  color: #fff;
}

/*=====  learning login  ====== */

.loginFormLearning {
  max-width: 460px;
  padding-top: 30px;
  margin: 0 auto 100px;
  z-index: 1;
  position: relative;
}
@media only screen and (max-width: 950px) {
  .loginFormLearning {
    margin-bottom: 40px;
  }
}
.loginFormContentBorder {
  border: 1px solid #eee;
  border-radius: 4px;
}
.loginFormContentBtn {
  margin-top: 12px;
  padding-top: 17px;
  padding-bottom: 14px;
}
.headerAlert {
  font-size: 14px;
  padding: 13px 0 11px;
}
.headerAlertWarning {
  background-color: #ff4141;
  color: #fff;
}
.headerAlertAttention {
  background-color: #f4ef3c;
}
@media only screen and (min-width: 951px) {
  .headerMenuNone {
    padding-top: 75px;
    padding-bottom: 0;
  }
}




/*=====  home mvImg  ====== */

.homeMvImg01 {
  background-image: url(../img/home/mvImg/h1_bgImg_01.jpg);
}
.homeMvImg02 {
  background-image: url(../img/home/mvImg/h1_bgImg_02.jpg);
}
.homeMvImg03 {
  background-image: url(../img/home/mvImg/h1_bgImg_03.jpg);
}
.homeMvImg04 {
  background-image: url(../img/home/mvImg/h1_bgImg_04.jpg);
}
.homeMvImg05 {
  background-image: url(../img/home/mvImg/h1_bgImg_05.jpg);
}
.homeMvImgFooter {
  background-image: url(../img/home/mvImg/h1_bgImg_footer.jpg);
}

/* orange table */

.tableReport {
  float: left;
  width: 424px;
}
.tableReport.type02 {
  width: 24%;
  margin-right: 19px;
}


.tableOrange {
  border: 1px solid #ff7901;
  border-radius: 5px;
  border-collapse: separate;
  font-size: 12px;
  border-left: none;
  overflow: hidden;
  width: 100%;
}
.tableOrange th,
.tableOrange td {
  text-align: left;
  padding: 10px 10px 8px;
  vertical-align: middle;
}
.tableOrange th {
  background-color: #ff7901;
  border-bottom: 1px solid #fff;
  color: #fff;
  font-weight: normal;
}
.tableOrange th.type02 {
  border-color: #ff7901;
}
.tableOrange td {
  border-bottom: 1px solid #ff7901;
}
.tableOrange td.type02 {
  border-bottom: 0;
}
.tableOrange tr:last-child th,
.tableOrange tr:last-child td {
  border-bottom: none;
}
.tableOrange .alignR {
  text-align: right;
}
.tableOrangeNum {
  font-size: 16px;
}
.tableOrangeCaption {
  font-size: 11px;
  margin: 5px 0;
  display: block;
}
.tableOrangeBtnRank {
  font-size: 11px;
  margin: 0;
  display: block;
  position: relative;
}
.tableOrangeBtnRank .icon {
  position: absolute;
  right: 10px;
  top: 10px;
}
.searchReportInputHeader {
  margin: 0 0 5px;
  font-size: 12px;
  background-color: #FF7901;
  border-radius: 3px ;
  box-sizing: border-box;
  padding:7px 10px 4px;
  color:#fff;
}
.searchReportInputHeader .icon{
  font-size: 20px;
  position: relative;
  top:-2px;
  padding-right: 5px;
}
.searchReport {
  float: left;
  width: 47%;
  margin: 0 19px 0 0;
  background-color: #f6f6f6;
  border-radius: 4px;
  padding: 18px 13px;
  box-sizing: border-box;
}
.searchReport2 {
  margin-right: -20px;
}
.searchReportText {
  padding: 14px 15px 13px;
  background-color: #f7f7f7;
  font-size: 11px;
  line-height: 1.5;
  max-height: 48px;
}
.inputSearch {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transition: all 0.5s ease;
  border: 1px solid #ff7901;
  box-sizing: border-box;
  padding: 5px 6px 5px;
  height: 27px;
  vertical-align: middle;
  width: 84%;
}
.inputSearch:focus {
  border-color: #00A439;
}
.inputSearchBtn {
  background-color: #ff7901;
  color: #fff;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 27px;
  width: 25px;
  font-size: 17px;
  line-height: 1;
  vertical-align: middle;
}
.inputSearchBtn:hover,
.inputSearchBtn.active  {
  background-color: #00A439;
}
.ttlBorderOrange {
  color: #ff7901;
  border-color: #ff7901;
  padding-bottom: 0;
  margin: 55px 0;
  font-size: 35px;
  line-height: 1.2;
}
.ttlBorderOrange .icon {
  top: -5px;
}
.ttlBorderOrange:after {
  background-color: #ff7901;
}
.ttlCenter {
  text-align: center;
  font-size: 30px;
  font-weight: normal;
  color: #ff7901;
  margin: 70px auto 10px;
}
.ttlCenter .icon {
  font-size: 40px;
  margin-right: 10px;
  position: relative;
  top: -3px;
}
.btnOrangeStatic {
  background-color: #ff7901;
  color: #fff;
  padding-left: 30px;
  padding-right: 30px;
}
.searchReportBtn{
  width: 30%;
  float: left;
  margin-left: 15px;
}
.searchReportBtn .searchReportInputHeader {
  margin-bottom: 6px;
}
.searchReportBtn .btnRadius {
  font-size: 12px;
}
.searchReportBtn .inputSearch {
  float:left;
  width: 89%;
  border-color:#FF6464;
}
.searchReportBtn .inputSearchBtn {
  width: 11%;
  background-color:#FF6464;
}
.csvDl {
  float: right;
  width: 110px;
}
.searchReportCsv {
  font-size: 12px;
}
.searchReportCsv .icon {
  font-size: 15px;
  margin-right: 2px;
  margin-left: 4px;
}
.searchReportCsv .btnOrange{  
  background-color: #fff;
  color: #FF7901;
}
.searchReportCsv .btnOrange:hover{
  color: #1394B8;
}
.btnSquareOrange {
  background-color: #fd7923;
  color: #fff;
  padding: 29px 0 29px;
  font-size: 12px;
  line-height: 1.3;
  border: 1px solid #fd7923;
}
.btnSquareOrange .icon {
  font-size: 30px;
  margin-bottom: 13px;
  line-height: 1;
}
.btnSquareOrange:hover {
  background-color: #00A439;
  border-color: #00A439;
}
.ttlFilledOrange {
  background-color: #ff7901;
  color: #fff;
  font-size: 16px;
  padding: 10px;
  clear: both;
}
.ttlFilledOrange .icon {
  font-size: 26px;
  margin-right: 10px;
}
.ttlFilledOrange .btn .icon {
  font-size: 16px;
  margin-right: 10px;
}
.ttlFilledOrange h1{
  float: left;
  margin-top: 5px;
  margin-left: 8px;
}
.ttlFilledOrange .searchReportCsv{
  float: right;
}
.ttlFilledPink {
  background-color: #FF6464;
  color: #fff;
  font-size: 16px;
  padding: 10px;
  clear: both;
  margin-bottom: 20px;
}
.ttlFilledPink .icon {
  font-size: 26px;
  margin-right: 10px;
  left:9px;
  position: relative;
}
@media only screen and (max-width: 950px) {
  .tableReport {
    float: none;
    width: auto;
  }
  .tableReport.type02 {
    width: auto;
    margin-right: 0;
  }
  .searchReport {
    float: none;
    width: auto;
    margin: 20px 0;
  }
  .searchReportBtn .inputSearch {
    width: 80%;
  }
  .searchReportBtn .inputSearchBtn {
    width: 20%;
  }
  .searchReportCsv,
  .ttlFilledOrange h1,
  .ttlFilledOrange .searchReportCsv{
    float: none;
    width: auto;
    text-align: center;
    margin:10px auto 6px;
  }
}

/* datatable */
.dataTable,
.dataTable th:first-child,
.dataTable th,
.dataTable td {
  border: 1px solid #dadada !important;
  border-top: none !important;
  vertical-align: middle;
  font-weight: normal;
  line-height: 1.3;
  font-size: 12px;
}
.dataTable tbody tr:nth-child(odd) {
  background-color: #fafafa;
}
.dataTable th,
.dataTable td {
  padding: 6px 12px;
}
.dataTable {
  width: 100%;
  text-align: center;
}
.profileImgLarge {
  width: 124px;
  height: 124px;
  max-width: 124px;
}
.profileImgLarge:hover {
  border-color: #d6d6d6 ;
}
.profileImgLarge img {
  width: 116px;
  height: 116px;
  max-width: 116px;
}
@media only screen and (max-width: 950px) {
  .ttlCenter {
    font-size: 20px;
    margin:0 ;
  }
  .ttlCenter .icon {
    font-size: 27px;
  }
  .ttlBorderOrange {
    font-size: 20px;
    margin: 10px 0 20px;
    padding-bottom: 10px;
  }
}

/* sheet */
.sheetProfile {
  float: left;
  position: relative;
  top: -3px;
  margin-right: 20px;
}
.sheetTable {
  width: 378px;
  float: left;
  margin-right: 20px;
}
.sheetTableMin {
  width: 174px;
  float: left;
}
.sheetTableMin .tableOrange th {
  line-height: 1.3;
  width: 50px;
  text-align: center;
}
.sheetTableMin .tableOrange td {
  text-align: center;
  height: 40px;
}
.sheetTableMin .tableOrange:first-child {
  margin-bottom: 5px;
}
.congratulation {
  width: 40%;
  background: #f3f001;
  color: #666;
  text-align: center;
  margin: 0 auto 35px;
  padding: 8px 20px 5px;
  box-sizing: border-box;
  border-radius: 5px;
  font-size: 15px;
  font-weight: bold;
}
.congratulation > p {
  line-height: 1.3;
}
.congratulation .detail {
  font-size: 12px;
  font-weight: normal;
  padding:15px 0 10px;
  margin:6px 0 0;
  border-top: 1px solid #fff;
}
.congratulation .icon-recommend {
  font-size: 35px;
  margin: 6px 0;
}
.btnGhostOrange {
  position: relative;
  padding-top: 5px;
  padding-bottom: 4px;
}
.btnGreen.type02 {
  position: relative;
  padding: 8px 10px 5px;
}
.btnGreen.type02 .icon {
  position: absolute;
  top: 10px;
  right: 8px;
  font-size: 10px;
}
.btnPrev {
  float: left;
  font-size: 11px;
}
.btnPrev > .icon {
  float: left;
}
.btnPrev .profileImg {
  float: left;
}
.btnPrev > p {
  float: left;
}
.btnNext {
  float: right;
  font-size: 11px;
}
.btnNext > .icon {
  float: right;
}
.btnNext .profileImg {
  float: right;
}
.btnNext > p {
  float: right;
}
.btnPagerWrap .profileImg {
  width: 32px;
  height: 32px;
  margin: -10px 10px 0;
}
.btnPagerWrap .profileImg img {
  width: 24px;
  height: 24px;
}
.btnPagerWrap .btnPrev,
.btnPagerWrap .btnNext {
  display: block;
  margin-top: 10px;
}
.btnPagerWrap a:hover,
.btnPagerWrap a:hover .profileImg {
  color: #00a439;
  border-color: #00a439;
}
.btnPagerWrap {
  background-color: #f8f8f8;
  padding: 20px;
  margin: 20px 0;
}
.btnPagerWrap .btnGreen {
  padding-left: 30px;
  padding-right: 30px;
  position: relative;
}
.btnPagerWrap .btnGreen .icon {
  position: absolute;
  left: 8px;
  font-size: 10px;
}
.graphListWrap {
  text-align: center;
}
.graphListWrap > li{
  display: inline-block;
  width: 17%;
  margin:4% 6% 3%;
}
.graphListWrap .graphCaption{
  margin:8% 0;
  font-weight: bold;
}
@media only screen and (max-width: 950px) {
  .graphListWrap {
    text-align: center;
  }
  .graphListWrap > li {
    display: inline-block;
    width: auto;
    margin:4% 6% 3%;
  }
  .btnPagerWrap {
    padding: 10px 0;
  }
  .sheetProfile {
    float: none;
    position: relative;
    top: -3px;
    margin-right: 0;
  }
  .sheetProfile .profileImg {
    margin: auto;
  }
  .sheetTable {
    width: auto;
    float: none;
    margin-right: 0;
    margin-bottom: 15px;
  }
  .sheetTable table {
    table-layout: fixed;
  }
  .sheetTable th {
    width: 30%;
  }
  .congratulation {
    width: auto;
    font-size: 13px;
  }
}


/* -------------------- modal form */

.modalWrap {
  display: none;
}
.modalArea {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: table;
  table-layout: fixed;
}
.modalCover {
  position: absolute;
  width: 100%;
  height: 400%;
  background-color: #999;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  top: 0;
  bottom: 0;
}
.modalBody {
  display: table-cell;
  position: relative;
  width: 100%;
  vertical-align: middle;
  opacity: 0;
  transition: 0.5s ease all;
}
.show .modalBody , .show .modalCover {
  opacity: 1;
}
.modalContent {
  background-color: #fff;
  width: 80%;
  height: 90%;
  margin: auto;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 50px 25px;
  position: relative;
  z-index: 101;
  overflow:auto; 
  text-align: center;
}
@media only screen and (max-width: 950px) {
  .modalArea {
    position: static;
    display: block;
  }
  .modalCover {
    position: static;
    display: none !important;
  }
  .modalBody {
    display: block;
    opacity: 1;
  }
  .modalContent {
    width: auto;
    margin: -10px auto 0;
    padding: 20px;
  }
}

.rankBtn .icon{
  margin-left: 5px;
  font-size: 200%;
}
.rankBtn:hover,
.rankBtn:hover .icon{
  color: #00A439;
}
.rankBtn .icon:before{
  top: -5px;
  position: relative;
  color: #00A439;
  transition:all ease 0.3s;
  left: 0px;
}
.rankBtn:hover .icon:before{
  left: 3px;
}

.selectSearchBtn{
  width: 37%;
  display: inline-block;
  padding: 5px 5px 2px;
  font-size: 11px;
}
.btnSelfIndex{
  margin-top: 50px;
  padding: 10px 30px 7px;
}

.itec .ttlCenter,
.itec .ttlBorderOrange,
.itec .ttlCenter,
.itec .ttlCenter,
.itec .ttlCenter,
.itec .ttlCenter,
.itec .ttlCenter,
.itec .searchReportCsv .btnOrange{
  color:#1394b8;
}
.itec .searchReportCsv .btnOrange:hover{
  color: #FF7901;
}
.itec .btnOrangeStatic,
.itec .ttlBorderOrange:after,
.itec .tableOrange th,
.itec .btnSquareOrange,
.itec .ttlFilledOrange,
.itec .btnOrange2,
.itec .inputSearchBtn,
.itec .searchReportInputHeader,
.itec .headLine dt,
.inputSearchBtn.active{
  background-color: #1394B8;
}
.itec .ttlBorderOrange,
.itec .tableOrange,
.itec .tableOrange td,
.itec .inputSearch,
.itec .btnSquareOrange,
.itec .headLine dl,
.inputSearchBtn.active,
.inputSearch:focus{
  border-color: #1394b8;
}
.itec .btnSquareOrange:hover,
.itec .inputSearchBtn.active{
  border-color: #00A439;
  background-color: #00A439;
}
.itec .inputSearchBtn:hover,
.itec .ttlFilledPink,
.itec .btnOrange2:hover {
  background-color: #00A439;  
}
.itec .inputSearch:focus {
  border-color: #00A439;
}
.strongPoint{
  margin-top: 8px;
}
.goalEditWrap{
  display: none;
}
.goalEditArea{
  width: 100%;
  max-width: 100%;
  min-height: 60px;
}
.bookListGoalWrap p{
  margin:10px auto;
}
.bookListGoalWrap input{
  width: 50px;
  margin-left: 15px;
  margin-right: 5px;
}
@media only screen and (max-width: 950px) {
  .strongPoint {
    margin-bottom: 10px;
  }
}

/* -------------------- sorting */

.dataTable .sorting {
  cursor: pointer ;
  background-image: url("../img/mypage/sort_both.png") ;
  background-repeat: no-repeat;
  background-position: center right;
}
.dataTable .sorting,
.dataTable .datatable-filter-cell,
.dataTable .sorting:first-child {
  border-bottom: 2px solid #dadada !important;
}
.dataTable .memberListHead .datatable-filter-cell{
  border-bottom: 0 !important;
}
.dataTable .courseFinish.sorting {
  position: relative;
  top:-2em;
}
@media only screen and (max-width: 950px) {
  .dataTable .courseFinish.sorting {
    position: static;
  }
}
.dataTable .sorting.sorting-desc {
  background-image: url("../img/mypage/sort_desc.png") ;
}

.dataTable .sorting.sorting-asc {
  background-image: url("../img/mypage/sort_asc.png") ;
}

.itec .dataTable .sorting.sorting-desc {
  background-image: url("../img/mypage/sort_desc_b.png") ;
}

.itec .dataTable .sorting.sorting-asc {
  background-image: url("../img/mypage/sort_asc_b.png") ;
}
.sorting:first-child:hover,
.sorting:hover {
  border-bottom: 2px solid #ff7901 !important;
  box-sizing: border-box;
}
.itec .sorting:first-child:hover,
.itec .sorting:hover {
  border-bottom-color: #1394b8 !important;
}
.reportList li .score{
  font-size: 80px;
  padding-bottom: 0;
}
.score.high {
  color: #fd6567;
}
.score.mid {
  color: #fd7922;
}

.reportList li .score .mini{
  font-size: 12px;
}

/* -------------------- modalRadar */

.modalRadar {
  margin: auto;
  width: 725px;
  padding: 10px 20px 30px;
  box-sizing: border-box;
}
.ttlAnalysis {
  text-align: center;
  color: #ff7901;
  font-size: 20px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid #ff7901;
}
.ttlAnalysis .icon {
  font-size: 28px;
  margin-right: 5px;
}
.canvasWrap {
  border: 1px solid #dadada;
  margin-bottom: 20px;
}
.ttlRadarChart {
  color: #ff7901;
  font-size: 18px;
  margin: 10px;
}
.ttlRadarChart .icon {
  font-size: 28px;
  margin-right: 4px;
}
.analysisListWrap {
  width: 585px;
  margin: auto;
}
.analysisList {
  width: 280px;
  padding-bottom: 20px;
}
.analysisList h1 {
  color: #ff7901;
  border-bottom: 1px solid #ff7901;
  margin-bottom: 10px;
  padding-bottom: 8px;
}
.analysisList h1 .icon {
  position: relative;
  top: -1px;
}
.analysisList ul {
  background-color: #fafafa;
  padding: 4px 3px;
  font-size: 0;
}
.analysisList li {
  display: inline-block;
  font-size: 10px;
  border-radius: 10px;
  background-color: #eee;
  padding: 4px 14px 3px;
  letter-spacing: 0;
  margin: 4px 2px;
}
.analysisListStrong {
  float: left;
}
.analysisListWeak {
  float: right;
}
.analysisListStrong li {
  background-color: #ffa14d;
  color: #fff;
}
.analysisListWeak li {
  background-color: #d1d1d1;
  color: #646464;
}
.tableOrangeComment {
  margin-bottom: 60px;
}
.tableOrangeComment th {
  width: 100px;
  text-align: center;
}
.tableOrangeComment td {
  font-size: 11px;
  color: #ff7901;
  background-color: #fafafa;
  line-height: 1.5;
}
.sectionEvaluate {
  margin-bottom: 20px;
}
.ttlInline {
  display: inline-block;
  font-size: 14px;
  color: #4f4f4f;
  background-color: #ededed;
  padding: 5px 10px 3px;
  border-radius: 4px;
}
.ttlInline .icon {
  font-size: 21px;
  margin-right: 6px;
  position: relative;
  top: -2px;
}
.ttlMin {
  background-color: #ff7901;
  color: #fff;
  font-size: 10px;
  border-radius: 10px;
  padding: 4px 10px 3px;
  display: inline-block;
}
.borderBoxOrange {
  border: 1px solid #ff7901;
  border-radius: 4px;
  background-color: #fafafa;
  font-size: 11px;
  line-height: 1.5;
  padding: 8px 10px;
}
.borderBoxOrangeEvaluate {
  width: 495px;
  float: right;
  box-sizing: border-box;
}
.borderBoxOrangeEvaluateText {
  float: right;
  width: 400px;
  margin-right: 10px;
}
.dataTableTtl {
  font-size: 14px;
  background-color: #ededed;
  border: 1px solid #dadada;
  padding: 7px 10px 5px;
}
.dataTableTtl .icon {
  font-size: 24px;
  margin-right: 5px;
}
.dataTableMin1 {
  margin-bottom: 50px;
}
.dataTableMin th ,
.dataTableMin td {
  font-size: 10px !important;
}
.dataTableMinHeader th {
  font-size: 12px !important;
}
.dataTableMin {
  display: block;
  overflow-x: scroll;
  box-sizing: border-box;
}
.dataTableMin thead,
.dataTableMin tbody {
  display: table;
  width: auto;
  white-space: nowrap;
  min-width: 100%;
}
@media only screen and (max-width: 950px) {
  .modalRadar {
    width: auto;
  }
  .analysisListWrap {
    width: auto;
    padding: 10px;
  }
  .canvasWrapSp {
    overflow-y: scroll;
  }
  .analysisList {
    width: auto;
  }
  .dataTable {
    display: block;
    overflow-x: scroll;
    box-sizing: border-box;
  }
  .dataTable thead,
  .dataTable tbody {
    width: auto;
    white-space: nowrap;
    min-width: 100%;
  }
  .dataTableRank {
    display: table;
  }
}


/* -------------------- modalMail */

.modalMail {
  width: 660px;
  padding: 20px 25px;
}
.modalMail .ttlBorder {
  padding-right: 0;
  padding-bottom: 10px;
  margin-bottom: 0;
}
.searchArea .inputSearch {
  border-color: #d5d5d5;
}
.searchArea .inputSearch:focus {
  border-color: #00a439;
}
.searchArea .inputSearchBtn {
  background-color: #00a439;
  border: 1px solid #00a439;
}
.searchArea .inputSearchBtn:hover {
  background-color: #fff;
  color: #00a439;
}
.searchArea .inputSearchBtn .icon {
  font-size: 15px;
  margin-right: 0;
}
.modalMail .searchArea {
  width: 187px;
}
.modalMailPager {
  font-size: 12px;
  color: #464646;
  text-align: right;
}
.modalMailPagerCount {
  display: inline-block;
  font-weight: bold;
  position: relative;
  top: 5px;
}
.modalMailPagerBtnWrap {
  display: inline-block;
}
.modalMailPagerBtnWrap li {
  display: inline-block;
}
.modalMailPagerBtn {
  color: #fff;
  background-color: #00a439;
  text-align: center;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #00a439;
  line-height: 1.5;
}
.modalMailPagerBtn:hover {
  color: #00a439;
  background-color: #fff;
}
.modalMailPagerBtn .icon {
  font-size: 11px;
  margin-right: 0;
  position: relative;
  top: 3px;
}
.modalMailPagerBtn .icon-arrow_right {
  left: 1px;
}
.modalMailTtl {
  font-size: 20px;
}
.modalMailHeaderBlock {
  float: left;
  width: 30%;
}
.modalMailHeaderBlock2 {
  width: 40%;
  float: left;
  text-align: center;
}
.modalMail .headerProfileImg {
  display: inline-block;
  float: none;
  vertical-align: middle;
  width: 52px;
}
.modalMail .headerProfileImg img {
  border-width: 1px;
}
.mailListHeaderAccount {
  display: inline-block;
  font-weight: bold;
  font-size: 13px;
  margin-left: 5px;
}
.mailList a {
  display: block;
  border-bottom: 1px solid #e5e5e5;
  padding: 17px 8px 15px;
}
.mailList a:hover {
  background-color: #ffffdc;
}
.mailListHeaderDate {
  font-weight: bold;
  font-size: 12px;
  float: right;
  position: relative;
  top: 20px;
}
.mailListBody {
  font-size: 0;
  margin-top: 10px;
}
.mailListTtl {
  color: #00a439;
  font-size: 13px;
  display: inline-block;
  margin-right: 10px;
  font-weight: bold;
  letter-spacing: 0.18em;
}
.mailListText {
  font-size: 11px;
  color: #808080;
  display: inline-block;
  letter-spacing: 0.18em;
}
.modalMailTtlDetail {
  color: #00a439;
  font-size: 18px;
  padding: 29px 0 20px;
}
.mailListHeaderDetail {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 0 9px;
}
.modalMailTextDetail {
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.18em;
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 36px;
}
.mailListHeaderInner {
  float: left;
}
@media only screen and (max-width: 950px) {
  .modalMail {
    width: auto;
    padding: 10px 15px;
  }
  .modalMailPagerBtn {
    width: 20px;
    height: 20px;
  }
  .modalMailPagerBtn .icon {
    top: 1px;
  }
  .modalMailTtl {
    font-size: 15px;
  }
  .modalMail .searchArea {
    width: auto;
    text-align: center;
  }
  .modalMailHeaderBlock {
    float: none;
    width: auto;
  }
  .modalMailHeaderBlock2 {
    width: auto;
    float: none;
    margin: 6px 0 0;
  }
  .mailListHeaderInner {
    display: table;
    width: 100%;
    margin-bottom: 10px;
  }
  .mailListHeaderInner .mailListHeaderAccount,
  .mailListHeaderInner .headerProfileImg {
    display: table-cell;
    vertical-align: middle;
  }
  .mailListHeaderInner .mailListHeaderAccount {
    padding-left: 10px;
  }
  .mailListHeaderDate {
    position: static;
    float: none;
  }
  .modalMailTtlDetail {
    font-size: 14px;
    padding: 15px 0 15px;
  }
  .modalMailTextDetail {
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.1em;
  }
}


/* -------------------- news index and detail */
.newsIndex {
  border-top: 1px solid #eee;
  display: none;
  margin-top: 10px;
  padding-top: 48px;
  height: 433px;
  background-color: #fcfcfc;
  margin-bottom: -5px;
  padding-bottom: 5px;
}
.newsIndexTtl {
  font-size: 20px;
  float: left;
}
.newsIndexTtl .icon {
  font-size: 28px;
}
.newsIndexPager {
  float: right;
}
.newsIndexHeaderDate {
  float: none;
  display: inline-block;
  position: static;
  top: 0;
  margin-right: 10px;
}
.newsIndexList a {
  display: block;
  border-bottom: 1px solid #e5e5e5;
  padding: 36px 18px 9px;
}
.newsIndexList a:hover {
  background-color: #ffffdc;
}
.newsDetailHeader {
  border-bottom: 1px solid #e5e5e5;
  padding: 20px 10px 10px;
}
.newsDetailHeader h1 {
  font-size: 16px;
  color: #00a439;
  float: left;
}
.newsDetailHeader .mailListHeaderDate {
  position: static;
}
.newsDetailBody {
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.2em;
  color: #808080;
  padding: 15px 10px;
}
@media only screen and (max-width: 950px) {
  .newsIndex {
    height: auto;
    background-color: #fcfcfc;
    margin-bottom: 10px;
    padding: 10px;
  }
  .newsIndexTtl {
    font-size: 13px;
    float: none;
  }
  .newsIndexTtl .icon {
    font-size: 18px;
    display: table-cell;
  }
  .newsIndexTtlText {
    display: table-cell;
  }
  .newsIndexPager {
    margin: 10px 0;
  }
  .newsIndexList a {
    display: block;
    border-bottom: 1px solid #e5e5e5;
    padding: 10px;
    line-height: 1.5;
  }
  .newsDetailHeader h1 {
    font-size: 13px;
    float: none;
    line-height: 1.5;
    margin-bottom: 5px;
  }
  .newsDetailBody {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.1em;
  }
  .mailListTtl {
    line-height: 1.5;
    margin-bottom: 5px;
  }
  .mailListText {
    line-height: 1.5;
  }
}

/* -------------------- modal contents */


.modalWindow {
  width: 665px;
  padding: 10px 20px 30px;
}
.modalGrayBox {
  background-color: #f6f6f6;
  padding: 30px;
  margin: 19px 0 0;
}
.modalBtnMiddle {
  font-size: 15px;
  font-weight: bold;
  padding: 13px 32px 10px 39px;
  line-height: 1;
}
.modalBtnLarge {
  font-size: 15px;
  font-weight: bold;
  padding: 18px 55px 15px;
  line-height: 1;
}
.modalWindow .ttlBorder {
  font-size: 20px;
  letter-spacing: 0.2em;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.inputSimple {
  border: 1px solid transparent;
  border-radius: 0;
  padding: 10px;
  transition: all 0.5s ease;
  margin: 0 10px;
  vertical-align: bottom;
  vertical-align: middle;
}
.modalContentHead {
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 0 12px;
  margin-bottom: 12px;
}
.modalContentHeadLeft {
  float: left;
}
.modalContentHeadRight {
  float: right;
}
.modalWindow .ttlBorderBottomModalLarge {
  margin-bottom: 30px;
}
@media only screen and (max-width: 950px) {
  .modalWindow {
    width: auto;
    padding: 10px 15px;
  }
  .modalGrayBox {
    padding: 10px;
  }
}

/* -------------------- modalResult */

.modalResultTtl {
  display: inline-block;
  font-size: 18px;
  margin-right: 5px;
}
.modalResultTtl .icon {
  font-size: 28px;
  margin-right: 5px;
  position: relative;
  top: -3px;
}
.modalResultSubttl {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
}
.modalResultRadio {
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  margin-right: 50px;
  margin-left: 10px;
  letter-spacing: 0.1em;
}
.modalResultRadio input {
  margin-right: 10px;
  position: relative;
  top: -1px;
}
.modalResultText {
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  width: 49%;
}
.modalResultTextSmall {
  font-size: 12px;
}
.modalGoal .modalResultText {
  width: auto;
  margin-right: 10px;
}
.modalResultTextYear {
  width: 120px;
}
.modalResultTextMonth,
.modalResultTextDate {
  width: 70px;
}
textarea.modalGrayBox {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 20px;
  height: 200px;
  border-radius: 0;
  display: block;
}
.modalResultBoxCaption {
  font-size: 12px;
  margin-top: 12px;
}
.modalContentMargin {
  margin-bottom: 40px;
}
.modalContetnWrap{
  min-width: 725px;
  padding: 10px 20px 30px;
  box-sizing: border-box;
}
.yourRanking{
  padding:2px 15px 2px 20px;
  background: #FF6464;
  border-radius: 10px;
  color: #FFF;
  font-size: 10px;
  margin:0 10px 0 -65px;
  box-sizing: border-box;
  width: 70px;
  display: inline-block;
}
@media only screen and (max-width: 950px) {
  .modalResultText {
    width: auto;
  }
  .modalResultSubttl {
    line-height: 1.5;
    margin-top: 5px;
  }
  .modalResultTextYear {
    width: 131px;
    margin-bottom: 10px;
  }
  .modalResultTextMonth,
  .modalResultTextDate {
    width: 30px;
  }
  textarea.modalGrayBox {
    height: 100px;
  }
  .modalResultRadio {
    margin-right: 10px;
  }
  .inputSimpleResult {
    width: 100px;
    margin: 5px 10px;
  }
  .modalContetnWrap{
    min-width: inherit;
  }
  .yourRanking{
    margin: 0 8px 0 0;
  }
}

/* -------------------- modal user search */

.inputTable li {
  margin-bottom: 30px;
}
.inputTable li:last-child {
  margin-bottom: 0;
}
.inputTableTh {
  display: inline-block;
  text-align: right;
  width: 25%;
  padding-right: 10px;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 14px;
}
.inputTableTd {
  display: inline-block;
  width: 70%;
}
.inputTableTd input {
  width: 100%;
  box-sizing: border-box;
}
.userSearchLength {
  margin-top: 5px;
}

.csvDlBtn {
  margin-bottom: 12px;
  text-align: center;
}
.csvDlBtn .btn {
  font-size: 12px;
  padding: 17px 40px 15px;
}
.csvDlBtn .btn .icon {
  margin-right: 10px;
}
.dataTableGeneral {
  border-top: 1px solid #dadada !important;
}
.dataTableGeneral tbody tr:nth-child(4n+1) {
  background-color: #fafafa;
}
.dataTableGeneral tbody tr:nth-child(4n+2) {
  background-color: #fafafa;
}
.dataTableGeneral tbody tr:nth-child(4n+3) {
  background-color: #fff;
}
.dataTableGeneral tbody tr:nth-child(4n+4) {
  background-color: #fff;
}
.downloadCsvText {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}
.downloadCsvLength {
  font-size: 17px;
  color: #ff5757;
}
.csvDlBtn .downloadCsvBtn {
  font-size: 14px;
  padding: 25px 50px;
  font-weight: bold;
}
@media only screen and (max-width: 950px) {
  .csvDlBtn .downloadCsvBtn {
    padding: 25px;
  }
  .inputTable {
    display: table;
  }
  .inputTable li {
    display: table-row;
  }
  .inputTableTh {
    display: table-cell;
    vertical-align: middle;
    font-size: 12px;
  }
  .inputTableTd {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 0;

    width: 70%;
  }
  .inputTableTd input {
    width: 100%;
    box-sizing: border-box;
  }
}

/* -------------------- edit profile */

.formTable {
  display:table;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.formTable dl{
  display:table-row;
}
.formTable dt,
.formTable dd{
  display:table-cell;
  background-color: #f6f6f6;
  padding: 10px;
  font-size: 13px;
}
.formTable ,
.formTable dt,
.formTable dd {
  border-collapse: collapse;
  border: 1px solid #ccc;
  vertical-align: middle;
}
.formTable dt {
  width: 100px;
}
.inputInline li {
  display: inline-block;
}
.formTable input,
.formTable select {
  margin: 5px 0;
}
.formTable .required:after {
  content: "必須";
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
  background-color: #ff6464;
  margin: 5px 0 0;
  color: #fff;
}
.inlineItem {
  display: inline-block;
}
.normalLink2 {
  font-size: 11px;
  text-decoration: underline;
}
.btnAutoAddress {
  margin: 5px 5px 0 0;
}
.withdrawalText {
  margin-bottom: 40px;
  font-size: 16px;
  text-align: center;
}
.withdrawalAttention {
  color: #ff6464;
  font-size: 11px;
  margin-top: 30px;
}
.headingMin {
  font-size: 15px;
  margin-bottom: 10px;
}
.dataList {
  font-size: 13px;
  border-radius: 0;
}
.dataList option {
  padding: 5px;
  margin-bottom: 1px;
}
.dataListSectionLeft {
  float: left;
  width: 30%;
}
.dataListSectionRight {
  float: right;
  width: 70%;
}
.dataListSectionRight .dataList {
  width: 100%;
  box-sizing: border-box;
}
@media only screen and (max-width: 950px) {
  .inputInline li input {
    width: 30px;
  }
  .withdrawalText {
    line-height: 1.3;
    font-size: 13px;
  }
  .withdrawalBtn .btn {
    display: block;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .headingMin {
    line-height: 1.3;
  }
}
/* -------------------- selectListWrap */
.selectListWrap{
  margin-right: 10px;
}
.selectListWrap li{
  width: 100%;
  font-size: 14px;
  margin-bottom: 10px;
  text-align: left;
}
.selectListWrap label{
  float:left;
  padding: 8px 15px;
  box-sizing: border-box;
  height: 27px;
}
.selectListWrap select{
  float:left;
  padding: 0 15px;
  box-sizing: border-box;
  height: 27px;
}
.selectListWrap select.necessarySearch{
  width: 20%;
}
.selectListWrap label{
  width: 19%;
}
.headLine{
  margin: 25px auto 10px;
}
.headLine ul {
  text-align: center;
}
.headLine li{
  display: inline-block;
}
.headLine dl{
  display: table;
  margin-right: 10px;
  border: 1px solid #FF7901;
  border-radius: 5px;
  border-collapse: separate;
  font-size: 14px;
}
.headLine dt,
.headLine dd{
  display: table-cell;
  padding: 10px 50px 8px;
  vertical-align: middle;
  text-align: left;
}
.headLine dt{
  display: table-cell;
  margin-right: 10px;
  background-color: #FF7901;
  color: #FFF;
  font-weight: normal;
}
@media only screen and (max-width: 950px) {
  .section.headLine{
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .selectListWrap li{
    margin: 10px 0 20px;
  }
  .selectListWrap label, .selectListWrap select,
  .selectListWrap select.necessarySearch,
  .searchReportBtn {
    float: none;
    width: 100%;
    margin: 5px 0;
    padding: 0;
  }
  .headLine li{
    margin-right: 0;
    float:none;
    margin: 10px 0 ;
  }
  .headLine dl{
    width: 100%;
    margin-right: 0;
    font-size: 12px;
  }
  .headLine dt, .headLine dd{
    padding: 10px 5px 8px;
  }

}

/* -------------------- sideContactForm */
.sideContactForm .icon-mail{
  font-size: 22px;
}
.sideContactForm li{
  margin-top:15px;
}
.sideContactForm button{
  width: 100%;
}
.sideContactForm input,
.sideContactForm textarea{
  border-color: #ccc;
  border-radius: 5px;
  outline: 0;
  box-sizing: border-box;
  margin:0;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
}
.sideContactForm input:focus,
.sideContactForm textarea:focus{
  border-color: #00A439;
}
.sideContactForm textarea{
  min-height:100px;
}
.sideContactForm label{
  margin-bottom: 5px;
  display: block;
}
.sideContactForm .btnGreen{
  background: #F3F001;
  color: #666;
}
.sideContactForm .btnGreen:hover{
  background: #00A439;
  color: #fff;
}


/* -------------------- dammyHeight */
.dammyHeightDownload{
  min-height:  5675px;
}
.dammyHeightComment{
  min-height:  4273px;
}



/* -------------------- personal */

/* component */
.personalBody {
  overflow-x: hidden;
}
.personalSection{
  position: relative;
  background: #f8f8f8;
}
.personalFinish{
  position: relative;
  top:-50px;
  z-index: 2;
  text-align: center;
}
.personalH1{
  width: 100%;
  padding:25px 10px;
  background: #00a439;
  display: block;
  text-align: center;
  box-sizing: border-box;
  margin-bottom: 30px;
}
@media only screen and (min-width: 950px) {
  .personalH1 {
    height: 200px;
  }
}
.personalH2 {
  text-align: center;
  margin-bottom: 37px;
}
.content770 {
  width: 770px;
  margin: auto;
}
@media only screen and (max-width: 950px) {
  .content770 {
    width: auto;
  }
  .personalFinish{
    position: static;
    padding: 10px 10px 30px;
  }
}
.personalContents {
  text-align: center;
}
@media only screen and (min-width: 951px) {
  .personalContents .content770 li {
    width: 28%;
    margin-right: 8% !important;
  }
  .personalContents .content770 li:nth-child(3n) {
    margin-right: 0 !important;
  }
}
#section01 .personalH1 img {
  margin-top: -42px;
}
#section02 .personalH1 img {
  margin-top: -107px;
}
#section03 .personalH1 img {
  margin-top: -135px;
}
#section04 .personalH1 img {
  margin-top: -63px;
}
#section05 .personalH1 img {
  margin-top: -40px;
}
#section06 .personalH1 img {
  margin: -100px 0 0;
}
@media only screen and (max-width: 950px) {
  #section01 .personalH1 img {
    margin-top: -4%;
  }
  #section02 .personalH1 img {
    margin-top: -8%;
  }
  #section03 .personalH1 img {
    margin-top: -9%;
  }
  #section04 .personalH1 img {
    margin-top: -5%;
  }
  #section05 .personalH1 img {
    margin-top: -2%;
  }
  #section06 .personalH1 img {
    margin: -8% 0 -4%;
  }
}

#section06 .personalH1 {
  background-color: #00cdda;
}
#section05 .personalH1 {
  background-color: #ff6464;
}
.personalbtnWrap{
  width: 500px;
  margin:0 auto;
  position: relative;
}
@media only screen and (max-width: 950px) {
  .personalH2 {
    padding: 0 10px;
  }
  .personalContents {
    padding: 0 10px;
  }
  .personalbtnWrap{
    width: auto;
    padding: 0 10px;
  }
}
.personalNavWrap {
  text-align: center;
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-top: 24px;
  margin-bottom: 44px;
}
.personalNavWrap li {
  display: table-cell;
  -webkit-transition:all ease 0.3s;
  transition:all ease 0.3s;
}
.personalNavWrap li:hover{
  opacity: 0.8;
}
.personalNavWrap a {
  display: block;
}
.personalNavWrap img {
  vertical-align: top;
}
@media only screen and (max-width: 950px) {
  .personalNavWrap {
    display: block;
  }
  .personalNavWrap li{
    display: inline-block;
    width: 48%;
    padding: 0 5px 15px;
    box-sizing: border-box;
  }
  .personalNavWrap li:hover{
    opacity: 0.8;
  }
  .personalNavWrap a {
    display: block;
  }
}
.personalInfo{
  background: #fff;
  padding: 10px 0 10px 10px;
  border: 5px solid #ccc;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.leftInfoContents {
  float: left;
  font-size: 15px;
  letter-spacing: 0.2em;
  box-sizing: border-box;
  border-right: 1px solid #c6c6c6;
  margin-right: 19px;
  padding-right: 17px;
  height: 60px;
  box-sizing: border-box;
  padding-top: 10px;
  margin-left: -5px;
}
.leftInfoContents .icon {
  color: #00a439;
  font-size: 40px;
}
.rightInfoContents {
  width: 683px;
  float: left;
  height: 60px;
  overflow-y: scroll;
}
.rightInfoContents ul {
  padding-top: 5px;
}
.rightInfoContents li {
  margin-bottom: 6px;
}
.rightInfoContents .dateTime {
  font-size: 10px;
  background-color: #eee;
  display: inline-block;
  border-radius: 4px;
  padding: 6px;
  margin-right: 10px;
}
.rightInfoContents a {
  font-size: 12px;
}
@media only screen and (max-width: 950px) {
  .leftInfoContents {
    float: none;
    text-align: center;
    border-right: none;
    height: auto;
    margin: 0;
    padding: 5px 0;
  }
  .rightInfoContents {
    width: auto;
    float: none;
    height: 160px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .rightInfoContents .dateTime {
    line-height: 1;
    margin-bottom: 6px;
  }
  .rightInfoContents li {
    line-height: 1.5;
    border-bottom: 1px dashed #eee;
    margin-bottom: 10px;
    padding-bottom: 5px;
  }
}
.personalBody .headerHomeBodyInner {
  padding-top: 0;
}
@media only screen and (min-width: 951px) {
  .personalBody .headerMenu {
    display: none;
  }
}
.personalBody .headerHomeBody {
  padding-top: 115px;
}
.personalBody .headerHomebtnWrap {
  width: 835px;
  margin: 21px auto 27px;
  position: relative;
}
.illust01 {
  display: block;
  position: absolute;
  top: -58px;
  left: -130px;
  z-index:3;
}
.illust02 {
  display: block;
  position: absolute;
  top: -147px;
  right: -269px;
  z-index: 1;
}
@media only screen and (max-width: 950px) {
  .personalBody .headerHomeBodyTtl {
    margin-top: 0;
  }
  .personalBody .headerHomebtnWrap {
    width: auto;
  }
  .illust01 {
    display: none;
  }
  .illust02 {
    display: none;
  }
}
.personalBody .btnBiggestBody  {
  text-align: center;
}

.personalSectionNav {
  margin-top: -79px;
  position: relative;
}
@media only screen and (max-width: 950px) {
  .personalSectionNav {
    margin: -5px auto 0;
  }
}
.section02Img {
  margin: -62px 0 -131px;
}
.section02Img02 {
  margin-left: 60px;
}
@media only screen and (max-width: 950px) {
  .section02Img {
    margin: 0;
  }
  .section02Img02 {
    margin: 0;
  }
}
#section02 .personalbtnWrap {
  padding-bottom: 36px;
  margin-top: -130px;
}
@media only screen and (max-width: 950px) {
  #section02 .personalbtnWrap {
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 30px;
  }
}
#section03 .personalbtnWrap {
  width: 657px;
  float: right;
  margin-right: 20px;
  margin-top: 25px;
  margin-bottom: 80px;
}
#section03 .btnBiggestBody img {
  position: relative;
  left: 40px;
}
#section03 .personalH2 img {
  margin-left: 50px;
}
#section03 .personalFinish {
  clear: both;
}
@media only screen and (max-width: 950px) {
  #section03 .personalH2 img {
    margin-left: 0;
  }
  #section03 .personalbtnWrap {
    width: auto;
    float: none;
    margin: 10px 0 0;
    padding: 0;
  }
  #section03 .btnBiggestBody img {
    position: static;
  }
  #section03 .personalFinish {
    clear: both;
  }
}
#section04 .personalContents {
  position: relative;
  left: 70px;
}
@media only screen and (max-width: 950px) {
  #section04 .personalContents {
    position: static;
    padding-left: 18%;
  }
}
.personalSection05 {
  background: url(../img/home/personal/section05_bg.jpg) center top no-repeat;
  background-size: cover;
  padding-bottom: 60px;
}
.personalSection05 > div > img {
  width: 100%;
  height: 100%;
}
.personalSection05 .personalbtnWrap {
  width: 700px;
  margin-top: 40px;
}
@media only screen and (max-width: 950px) {
  .personalSection05 .personalbtnWrap {
    width: auto;
    margin-top: 25px;
  }
}
#section07 {
  background-color: #00a439;
}
.ecidTriggerWrap {
  text-align: center;
  margin-bottom: 40px;
}
.ecidTriggerWrap a {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
.ecidTriggerWrap a .icon {
  font-size: 30px;
  position: relative;
  top: 0px;
  left:-8px;
}
.ecidTriggerWrap a:hover .underline {
  text-decoration: none;
}
.personalSection07 .personalH1 {
  margin-bottom: 0;
  height: auto;
}
.personalForm {
  background: url(../img/home/personal/section07_bg.png);
  width: 954px;
  height: 746px;
  box-sizing: border-box;
  padding: 120px 74px;
  position: relative;
}
.personalForm:after {
  content: "";
  display: block;
  background: url(../img/home/personal/section07_illust.png) 0 0 no-repeat;
  width: 349px;
  height: 593px;
  position: absolute;
  top: 180px;
  right: -113px;
}
.personalForm dt {
  font-size: 16px;
  float: left;
  padding-top: 9px;
  clear: both;
}
.icon-circle {
  font-size: 28px;
  color: #00a439;
  margin-right: 10px;
}
.personalForm dd {
  padding-left: 200px;
  margin-bottom: 25px;
}
.personalForm input {
  border: 2px solid #d4d4d4;
  margin-right: 20px;
  padding: 10px;
  font-size: 13px;
  width: 200px;
  box-sizing: border-box;
}
.personalForm .mailMagazineCheck input,
.personalForm input#check{
  width: auto;
}
.personalForm input:focus {
  border: 2px solid #888;
}
.personalForm dl {
  margin-bottom: 40px;
}
.personalForm ul {
  text-align: center;
}
.personalForm ul label {
  font-size: 16px;
  margin-bottom: 10px;
  display: block;
}
.personalForm ul label input {
  margin-right: 5px;
  margin-top: -1px;
}
.personalForm .precondition{  
    color: #fd6567;
    display: inline-block;
    margin-left: 1.2em;
    line-height: 1.3;
}
.personalForm .precondition:before{ 
    content: "※";
    display: inline-block;
    margin-left: -1.1em;
}
@media only screen and (min-width: 951px) {
  .personalForm .precondition{  
    width: 140px;
    position: relative;
    top:10px;
    left: 5px;
  }
}
.checkboxAlert {
  margin-top: -20px;
  margin-bottom: 10px;
  color: #fd6567;
  display: none;
}
#section07 .btnCaption {
  text-align: center;
  margin: 95px 0 55px;
}
#section07 .personalbtnWrap {
  text-align: center;
  width: 487px;
  display: block;
  position: relative;
  margin-top: 50px;
}
#section07 .btnIllust {
  display: block;
  position: absolute;
  top: -46px;
  z-index: 3;
}
#section07 .btnText {
  position: relative;
  left: 40px;
}
@media only screen and (max-width: 950px) {
  .personalForm {
    background: #fff;
    border: 2px solid #f7f501;
    width: auto;
    height: auto;
    padding: 10px 10px 20px;
  }
  .personalForm:after {
    content: none;
  }
  .personalForm dt {
    font-size: 14px;
    float: none;
  }
  .personalForm dd {
    padding-left: 0;
    margin-bottom: 10px;
  }
  .personalForm dd input {
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .personalSection07 .personalH1 {
    margin-bottom: 10px;
  }
  .personalForm dl {
    margin-bottom: 20px;
  }
  #section07 .btnCaption {
    margin: 20px 0 20px;
  }
  #section07 .personalbtnWrap {
    width: auto;
  }
  #section07 .btnIllust {
    display: none;
  }
  #section07 .btnText {
    position: static;
  }
}
.personalBody .main {
  margin-bottom: 0;
}
.personalBody .footer {
  text-align: center;
  padding: 80px 0 70px;
}
@media only screen and (max-width: 950px) {
  .personalBody .footer {
    padding: 40px 0 30px;
  }
}
@media only screen and (min-width: 641px) {
  .personalSection06 .bx-controls-direction .bx-prev:hover {
    left: -56px !important;
  }
  .personalSection06 .bx-controls-direction .bx-next:hover {
    right: -56px !important;
  }
}
.personalSection06 .bx-controls-direction a {
  color: #fff;
  display: block !important;
  width: 47px !important;
  height: 47px !important;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #00cdda;
  text-align: center;
  padding-top: 17px;
  letter-spacing: 0;
}
@media only screen and (max-width: 950px) {
  .personalSection06 .bx-controls-direction a {
    width: 30px !important;
    height: 30px !important;
    padding-top: 9px;
  }
}
.personalSection06 .bx-controls-direction .bx-next {
  padding-left: 3px;
}
.personalSection06 .bx-wrapper {
  padding-left: 10px;
}
.personalSection06 .inner {
  padding-bottom: 40px;
}
.personalbtnWrap {
  overflow: visible !important;
}
@media only screen and (max-width: 950px) {
  #personalSlider li {
    height: auto !important;
  }
  .personalSection06 .bx-wrapper {
    padding-left: 0px;
  }
}

/* mail reminder */

.pwChange,
.modalForm {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  display: none;
}
.modalFormBody {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: -180px auto 0;
}
.formReminderComplete .formReminderBody {
  margin-top: -120px;
}
.pwChange .formReminderBody {
  margin-top: -100px;
}
.pwChange,
.modalFormCover {
  background-color: rgba(0,0,0,0.4);
  opacity: 1;
}
@media only screen and (max-width: 950px) {
  .modalFormBody {
    width: 95%;
  }
  .pwChange .loginFormCover ,
  .modalFormCover {
    position: absolute !important;
    left: 0;
    height: 100%;
    width: 100%;
    display: block !important;
  }
}
.mailMagazineCheck {
  padding-top: 13px;
}
.mailMagazineCheck input {
  margin-right: 5px;
  position: relative;
  top: -2px;
}
.mailMagazineCheck label {
  cursor: pointer;
  margin-right: 20px;
}
@media only screen and (max-width: 950px) {
  .mailMagazineCheck {
    padding-top: 5px;
    text-align: center;
  }
  .personalForm .mailMagazineCheck input {
    position: static;
    width: auto !important;
  }
  .mailMagazineCheck label {
    cursor: pointer;
    margin-right: 20px;
  }
}
.personalBackTop {
  opacity: 0;
}
.personalBackTop.visible {
  opacity: 1;
}
.personalBackTop.active {
  background-color: transparent;
  border-color: transparent;
  background-image: url(../img/btn_pagetop_on_active.png);
  top: 180px;
  right: 20px;
  -webkit-animation-name: pagetop;
  animation-name: pagetop;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes pagetop {
  0% {
    right: 20px;
    top: 180px;
    -webkit-transform:rotate(0deg) translate(0,0);
    transform:rotate(0deg) translate(0,0);
  }
  33% {
    right: 20px;
    opacity: 1;
    top: 600px;
  }
  50% {
    right: -10px;
  }
  75% {
    right: 30px;
  }
  100% {
    top: 0;
    opacity: 0;
    right: -10px;
  }
}
@keyframes pagetop {
  0% {
    right: 20px;
    top: 180px;
    -webkit-transform:rotate(0deg) translate(0,0);
    transform:rotate(0deg) translate(0,0);
  }
  33% {
    right: 20px;
    opacity: 1;
    top: 600px;
  }
  50% {
    right: -10px;
  }
  75% {
    right: 30px;
  }
  100% {
    top: 0;
    opacity: 0;
    right: -10px;
  }
}

/* 404 */

.pageError {
  width: 728px;
  margin: 80px auto 30px;
  border: 5px solid #00a439;
  box-sizing: border-box;
  padding: 40px 0 32px;
  text-align: center;
  position: relative;
  font-size: 12px;
}
.pageError:after {
  content: "";
  background: url(../img/common/img_404.png) 0 0 no-repeat;
  background-size: contain;
  width: 108px;
  height: 138px;
  position: absolute;
  left: -90px;
  bottom: -10px;
}
.pageErrorType {
  color: #00a439;
  font-size: 14px;
}
.pageError .text {
  line-height: 2.4;
}
.pageErrorHeading {
  color: #00a439;
  font-size: 33px;
  letter-spacing: 0.14em;
  margin: 14px 0 12px;
}
.pageErrornav {
  text-align: center;
  margin-bottom: 34px;
}
.pageErrornav li {
  display: inline-block;
  font-size: 12px;
}
.pageErrornav a:hover {
  color: #20a8ff;
}
.pageErrornav li:after {
  content: " |";
  margin: 0 10px;
  color: #00a439;
}
.pageErrornav li.last-child:after {
  content: none;
}
@media only screen and (max-width: 950px) {
  .pageError {
    width: auto;
    max-width: 728px;
    margin: 10px auto 20px;
    border: 3px solid #00a439;
    padding: 30px 10px 25px;
  }
  .pageError .text {
    line-height: 1.8;
  }
  .pageErrorHeading {
    font-size: 20px;
    line-height: 1.5;
  }
  .pageError:after {
    background-size: 54px 69px;
    width: 54px;
    height: 69px;
    bottom: -10px;
    left: -20px;
  }
  .pageErrornav li {
    font-size: 10px;
  }
  .pageErrornav li:after {
    margin: 0 6px;
  }
}

/* tutorial */
.tutorialWrap {
  display: none;
}
#cboxLoadedContent.tutorialModal {
  margin: 0;
  background-color: #909090;
  text-align: center;
  height: 100% !important;
  border-radius: 5px;
}
.tutorial {
  max-height: 100%;
}
.tutorialImg ,
.tutorialImg li{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tutorialImg img {
  max-width: 100%;
  max-height: 100%;
}
.tutorialControls {
  position: absolute;
  left: 0;
  bottom: 50px;
  width: 100%;
}
.tutorialControls > span {
  cursor: pointer;
  font-size: 18px;
  position: absolute;
  z-index: 3;
  padding: 10px 20px 9px;
  color: #fff;
  transition: all 0.5s ease;
  border-radius: 4px;
  background-color: #00a439;
}
.tutorialControls > span:hover {
  color: #333;
  background-color: #f3f001;
}
.tutorialControls > span .icon {
  font-size: 20px;
  position: relative;
  top: -1px;
  margin: 0 7px;
}
.tutorialControls .prev {
  left: 30px;
  padding-left: 3px;
}
.tutorialControls .next {
  right: 30px;
  padding-right: 3px;
}
.tutorialImg {
  z-index: 2;
}
.tutorialImgBg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.tutorialImgBg img {
  max-width: 100%;
  max-height: 100%;
}
@media only screen and (max-width: 950px) {
  #cboxLoadedContent.tutorialModal {
    background-color: #fff;
  }
  .introTextBody {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    text-align: left;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    padding-bottom: 60px;
  }
  .introCaption {
    border-top: 1px solid #ccc;
    padding-top: 10px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: normal;
  }
  .tutorialControls > span:hover {
    color: #fff;
    background-color: #00a439;
  }
  #cboxContent #cboxLoadedContent.tutorialModal {
    max-height: 490px !important;
    position: relative;
  }
}
@media only screen and (min-width: 360px) and (max-width: 400px) {
  #cboxContent #cboxLoadedContent.tutorialModal {
    max-height: 560px !important;
    position: relative;
  }
}
@media only screen and (min-width: 401px) and (max-width: 640px) {
  #cboxContent #cboxLoadedContent.tutorialModal {
    max-height: 600px !important;
    position: relative;
  }
}
@media only screen and (min-width: 641px) and (max-width: 950px) {
  #cboxContent #cboxLoadedContent.tutorialModal {
    max-height: inherit!important;
    position: relative;
  }
}

/* home card slider */
.cardSlider2 a {
  padding: 10px 0;
}
.cardSlider2.homeSlider li {
  margin-right: 16px !important;
  height: 76px !important;
}
.cardSlider2 .cardHeading {
  margin: 0;
  font-size: 14px;
  display: table;
  width: 100%;
  height: 50px;
}
.cardHeadingInnerText {
  display: table-cell;
  vertical-align: middle;
}
.homeSliderArea .bx-wrapper {
  max-width: 820px !important;
  position: relative;
}
.homeSliderArea .bx-viewport {
  padding-top: 20px;
}
.homeSliderArea {
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  padding: 26px 0;
  text-align: center;
}
.homeSliderArea h2 {
  font-size: 19px;
  color: #00a439;
}
.homeSliderArea h2 + p {
  margin: 19px 0 13px;
  line-height: 1.5;
}

.homeSliderArea .bx-prev {
  position: absolute;
  top: 53px;
}
.homeSliderArea .bx-next {
  position: absolute;
  top: 53px;
}

@media only screen and (max-width: 640px) {
  .homeSliderArea .bx-wrapper {
    max-width: 95% !important;
  }
  .cardSlider2.homeSlider li {
    height: 76px !important;
  }
  .homeSliderArea .bx-prev {
    left: -17px !important;
  }
  .homeSliderArea .bx-next {
    right: -17px !important;
  }
}

.closeNav {
  cursor: pointer;
  transition: all 0.5s ease;
}
.closeNav .icon-close:before {
  font-size: 10px;
  position: relative;
  left:-4px;
  top:-0.5px;
  color: #999;
  transition: all 0.5s ease;
}
.closeNav:hover .icon-close:before {
  color: #f3f001;
}

@media only screen and (max-width: 768px) {
  .secondNav02 {
    clear: both;
    position: absolute;
    top: 59px;
    bottom: 0;
    left: inherit;
    right: -100%;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 10;
  }
  .secondNav02.open {
    right: 0;
  }
  .secondNav02 .secondNavBody {
    padding: 0 0 10px;
  }
  
  .secondNav03 {
    clear: both;
    position: absolute;
    top: 49px;
    bottom: 0;
    left: inherit;
    right: -100%;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 10;
  }
  .secondNav03.open {
    right: 0;
  }
  .secondNav03 .secondNavBody {
    padding: 10px 0 10px;
  }
}
/*bookItemContentLarge*/
.bookItemContentLarge {
  padding-top: 10%;
}
.bookItemContentBodyLarge {
  max-width: 500px;
}
.bookItemInnerHeading {
  font-size: 12px;
  margin-bottom: 9px;
  line-height: 1.3;
}
.bookItemInnerList > li {
  width: 48%;
  float: left;
}
.bookItemInnerList > li:nth-child(2n) {
  float: right;
}
.bookItemInnerList > li > p {
  font-size: 10px;
  margin-bottom: 13px;
  line-height: 1.3;
}
.card1 > li {
  width: 100%;
}
.bookItemCaption {
  display: block;
  font-size: 10px;
  text-align: center;
}
.bookItemInnerList01 .card1 li {
  margin: 0 0 8px;
}
.bookItemInnerList01 .card1 a {
  padding: 5px 0;
}
.bookItemInnerBtn {
  text-align: center;
  padding-top: 3px;
  font-size: 12px;
  margin-bottom: 14px;
  clear: both;
}
.bookItemInnerList02 > li {
  margin-bottom: 10px;
}
.bookItemInnerList02 a {
  font-size: 11px;
  padding: 7px 0;
}
@media only screen and (max-width: 950px) {
  .bookItemInnerList > li {
    width: auto;
    float: none;
  }
  .bookItemInnerList > li:nth-child(2n) {
    float: none;
  }
}
.changeLang,
.changeEditMode{
  float:right;
  text-align: center;
}
.changeEditMode{
  margin:16px 20px 0 0 ;  
}
.changeLang .headerSelect{
  width: auto;
  border:1px solid #ddd;
  margin:32px 20px 0 0 ;
  padding-left:15px;
}
@media only screen and (max-width: 950px) {
  .changeLang,
  .changeEditMode {
    float: none;
  }
  .changeLang{
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    margin: 3% 0 3%;    
    padding: 3% 0 3%;
  }
  .changeEditMode{
    margin:0 ;  
  }
  .changeLang .headerSelect{
    margin: 0;
  }
}

/* ---------------------------- STORE default table style */
.content680.floatR.fz12 .sub_area table {
  width: 100%;
  margin:20px auto;
  font-size: 12px;
}
.content680.floatR.fz12 .sub_area table,
.content680.floatR.fz12 .sub_area table th,
.content680.floatR.fz12 .sub_area table td {
  border: 2px solid #f1f1f1;
}
.content680.floatR.fz12 .sub_area table th,
.content680.floatR.fz12 .sub_area table td {
  padding: 10px 13px;
  vertical-align: middle;
  line-height: 1.5;
}
.content680.floatR.fz12 .sub_area table font{
  font-size: 12px;
}
.content680.floatR.fz12 .sub_area table tr td[align="center"],
.content680.floatR.fz12 .sub_area table tr[align="center"] td{
  background-color: #00a439;
  padding: 14px 13px 10px;
}
.content680.floatR.fz12 .sub_area table tr td[align="center"] font,
.content680.floatR.fz12 .sub_area table tr[align="center"] td font{
  font-size: 15px;
}

/* ---------------------------- topHeading __ h1 fixed style */
.wrapper {
  position: relative;
  padding-bottom: 30px;
}
.topHeading {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  font-size: 12px;
  background-color: #000;
  line-height: 1.5;
  padding: 6px 10px;
}
@media only screen and (max-width: 900px) {
  .wrapper {
    padding-bottom: 48px;
  }
  .topHeading {
    height: 48px;
  }
}
@media only screen and (max-width: 510px) {
  .wrapper {
    padding-bottom: 66px;
  }
  .topHeading {
    height: 66px;
  }
}

/* ---------------------------- LEARNING studyTime */
.studyTimeWrap{
  background: #f1f1f1;
  margin-top: 5px;
  margin-bottom: -4px;
}
.studyTime{
  text-align: center;
  padding:10px 0 7px;
  font-size: 11px;
}
@media only screen and (max-width: 950px) {
  .studyTimeWrap{
    margin: 0 0 5px;
    padding: 5px 0;
    border-bottom: 1px dashed #00a439;
  }
  .studyTime{
    text-align: left;
    padding-left: 15px;
  }
}

/**
 * 構造
 */
.mw_wp_form_g-standard table {
    border: none;
    border-top: #ddd solid 1px;
    border-right: #ddd solid 1px;
    border-collapse: collapse;
    font-size: 100%;
    margin: 0 0 20px;
    width: 100%;
}

.mw_wp_form_g-standard table th,
.mw_wp_form_g-standard table td {
    border: none;
    border-bottom: #ddd solid 1px;
    border-left: #ddd solid 1px;
    font-size: 100%;
    font-weight: normal;
    line-height: 1.6;
    padding: 10px;
    vertical-align: top;
}

.mw_wp_form_g-standard table th {
    background-color: #f5f5f5;
    width: 30%;
}

.mw_wp_form_g-standard table td {
    background-color: #fff;
}

@media screen and ( max-width: 970px ) {
    .mw_wp_form_g-standard table,
    .mw_wp_form_g-standard table tbody,
    .mw_wp_form_g-standard table tr,
    .mw_wp_form_g-standard table th,
    .mw_wp_form_g-standard table td {
        display: block;
        width: auto;
    }
    .mw_wp_form_g-standard table th {
        padding: 5px 10px;
    }
    .mw_wp_form_g-standard table td {
        padding: 20px 10px;
    }
}

/**
 * 画像
 */
.mw_wp_form_g-standard .mw-wp-form_image {
    margin-top: 5px;
}

.mw_wp_form_g-standard .mw-wp-form_image img {
    max-width: 100%;
}

/**
 * 必須
 */
.mw_wp_form_g-standard .require {
    color: #b70000;
}

/**
 * 注釈
 */
.mw_wp_form_g-standard .notes {
    color: #999;
    display: block;
    font-size: 12px;
    margin: 5px 0 0;
}

/**
 * エラーメッセージ
 */
.mw_wp_form_g-standard .error {
    color: #b70000;
    display: block;
    margin: 5px 0 0;
}

/**
 * アクションボタン
 */
.mw_wp_form_g-standard .action-buttons {
}

/**
 * フォーム項目基本
 */
.mw_wp_form_g-standard input,
.mw_wp_form_g-standard select,
.mw_wp_form_g-standard textarea {
    box-sizing: border-box;
    max-width: 100%;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    width: auto;
}

/**
 * ボタン
 */
.mw_wp_form_g-standard input[type="submit"] {
    border: 1px solid #ccc;
    border-color: #ccc #ccc #bbb #ccc;
    border-radius: 3px;
    background: #e6e6e6;
    box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.5 ),
                inset 0 15px 17px rgba( 255, 255, 255, 0.5 ),
                inset 0 -5px 12px rgba( 0, 0, 0, 0.05 );
    color: rgba( 0, 0, 0, .8 );
    cursor: pointer;
    -webkit-appearance: button;
    font-size: 12px;
    line-height: 1;
    padding: .6em 1em .4em;
    text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.8 );
}

.mw_wp_form_g-standard input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa #bbb;
    box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.8 ),
                inset 0 15px 17px rgba( 255, 255, 255, 0.8 ),
                inset 0 -5px 12px rgba( 0, 0, 0, 0.02 );
}

.mw_wp_form_g-standard input[type="submit"]:focus,
.mw_wp_form_g-standard input[type="submit"]:active {
    border-color: #aaa #bbb #bbb #bbb;
    box-shadow: inset 0 -1px 0 rgba( 255, 255, 255, 0.5 ),
                inset 0 2px 5px rgba( 0, 0, 0, 0.15 );
}

/**
 * 選択項目
 */
.mw_wp_form_g-standard label {
    display: inline-block;
    margin: 0 5px 0 0;
}

.mw_wp_form_g-standard label input[type="checkbox"],
.mw_wp_form_g-standard label input[type="radio"] {
    margin: 0 5px 0 0;
}

/**
 * テキスト
 */
.mw_wp_form_g-standard input[type="text"],
.mw_wp_form_g-standard input[type="password"],
.mw_wp_form_g-standard input[type="number"],
.mw_wp_form_g-standard input[type="email"],
.mw_wp_form_g-standard textarea {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
}

.mw_wp_form_g-standard input[type="text"]:focus,
.mw_wp_form_g-standard input[type="password"]:focus,
.mw_wp_form_g-standard input[type="number"]:focus,
.mw_wp_form_g-standard input[type="email"]:focus,
.mw_wp_form_g-standard textarea:focus {
}

/**
 * 複数行テキスト
 */
.mw_wp_form_g-standard textarea {
    overflow: auto;
    padding-left: 3px;
    vertical-align: top;
    width: 100%;
}

/**
 * ファイル
 */
.mw_wp_form_g-standard input[type="file"] {
    display: inline;
}

/* ======================   for mw_wp_form */
.mw_wp_form .error {
    font-size : 93%;
    color : #B70000;
    display : block;
}

.mw_wp_form .akismet_error {
    display: block;
}

.vertical-item {
    display: block;
}
.vertical-item+.vertical-item {
    margin-top: 5px;
}
.horizontal-item+.horizontal-item {
    margin-left: 10px;
}
.mwform-checkbox-field,
.mwform-radio-field {
}
.mwform-checkbox-field label,
.mwform-radio-field label {
    font-weight: normal;
    margin-bottom: 0;
}
.mwform-checkbox-field input,
.mwform-radio-field input {
    margin-right: 5px;
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-month,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
    width: 40%;
    margin: 0 5px;
}

.mw-wp-form-deprecated-message {
    background: #F5A9A9;
    border: #B40404 solid 2px;
    border-radius: 5px;
    font-size: 10px;
    line-height: 1.6;
    margin: 0 0 5px;
    padding: 5px;
}

.mwform-file-delete {
    cursor: pointer;
    visibility: hidden;
}

.mwform-tel-field input[type="text"],
.mwform-zip-field input[type="text"] {
    display: inline-block;
    width: auto;
}
/* ======================   end mw_wp_form */