/**
 * publicサイト全体CSS
 */

html {
  position: relative;
  min-height: 100%;
}

body {
  *font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
  font-family: sans-serif, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic";
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  /* *background-color: #fff; */
  /* *background-color: #f0f2e4; */
  background-color: #f1f7e8;
  
  overflow-x: hidden;
}

#wrapper{
  overflow: hidden;
}


footer {
  color: #ffffff;
  background-color: #0b804e;

  position: absolute;
  margin-top: 20px;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 270px;
}
/* スクリーンサイズが768px以下(スマホで横)の場合 */
@media screen and (max-width: 768px){
  footer {
    height: 130px;
  }
}

/* 横並び用 */
.flex{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
/* 横並び(.flex)の中央寄せ */
.flex-center{
  justify-content: center;
  text-align: center;

  -webkit-align-items: stretch;
  align-items: stretch;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.static {
  position: static;
}


/* 詳細用コントロール */
.show-control {
  display: block;
  width: 100%;
  padding: 8px 12px;
  word-wrap: break-word;
}


/* メインイメージ */
div.main-image {
  *min-height: 200px;
  /* swiper 左右前後表示用に調整(中央寄せ)*/
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}
div.main-image img {
  max-width: 100%;
}
/* メインイメージ下の区切りバー */
div.mainimage_bottom_bar {
  background-color: #e7dcbe;
}
div.mainimage_bottom_bar > hr {
  margin: 0;
  border: 0;
  border-top: 15px solid #e7dcbe;
}
/* スクリーンサイズが768px以下(スマホ横)の場合 */
@media screen and (max-width: 768px){
  div.mainimage_bottom_bar > hr {
    border-top: 7px solid #e7dcbe;
  }
}

/* ページコンテンツ */
div.page_content_wrapper {
  padding: 20px; 
  margin-bottom: calc(270px + 100px);
}
div.page_content_wrapper > div.page_content {

  width: 1000px;
  margin: 0 auto;
}
/* スクリーンサイズが768px以下(スマホ横)の場合 */
@media screen and (max-width: 768px){
  div.page_content_wrapper {
    padding: 0px 20px 10px 20px;
    margin-bottom: 130px;
  }
  div.page_content_wrapper > div.page_content {
    width: initial;
  }
}

/**
 * 共通マージン
 */
.margin_top_10 {
  margin-top: 10px;
}
.margin_top_15 {
  margin-top: 15px;
}
.margin_top_20 {
  margin-top: 20px;
}
.margin_top_30 {
  margin-top: 30px;
}
.margin_top_50 {
  margin-top: 50px;
}
.margin_top_70 {
  margin-top: 70px;
}
.margin_top_90 {
  margin-top: 90px;
}

.margin_bottom_50 {
  margin-bottom: 50px;
}
.margin_bottom_100 {
  margin-bottom: 100px;
}

/**
 * エフェクト関連(ホバー時に一瞬点滅エフェクト)
 */
.flash:hover{
  opacity: 1;
  -webkit-animation: flash 1s;
  animation: flash 1s;
}
@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}


/* マーカー風下線 */
.yellow_line {
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 65%, #ffffbc 0%) repeat scroll 0 0;
  /*background: linear-gradient(transparent 70%, #ff99ab 70%);*/
}
.yellow_line_bold {
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 50%, #ffffbc 0%) repeat scroll 0 0;
}



/**
 * レスポンシブ関連共通
 */
/* スクリーンサイズが460px以下の場合 */
@media screen and (max-width: 460px){
  /* スマホで非表示にする */
  .sp_none {display:none}
}

/* PCで表示用(スマホサイズでは非表示) */
.pc { display: block !important; }
/* スマホで表示用(PCサイズでは非表示) */
.sp { display: none !important; } 
@media only screen and (max-width: 460px) {
  .pc { display: none !important; }
  .sp { display: block !important; }
}

/* 「NEW」ラベル */
.new_label:after {
  /*text-align:right;*/
  /*border: 1px solid #0ff;*/
  border-radius: 0.25em;
  color: #fff;
  display: inline;
  font-size: 75%;
  /*font-weight: 700;*/
  line-height: 1;
  padding: 0.1em 0.5em;
  margin-left: 0.7em;
  /*margin-right: 0.7em;*/
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
  background-color: #d9534f;
  content: 'NEW';
}