//-----------------------------
// custom
//-----------------------------
.camera-icon
  &:after
    content: '\f083'
    font-family: font-awesome
    font-size: font-size * 0.6
.amp-img-wrapper
  margin: content-margin content-margin-side 0 content-margin-side

.imgCaption
  margin: font-size * 0.2 content-margin-side
  line-height: font-size * 1.1
  text-align: center
  color: color-default
.imgCaption , .imgcap , .photoby
  font-size: font-size * 0.6
.photoby
  a
    font-size: font-size * 0.6


.grayBtn
  display: block
  margin: content-margin-side auto
  text-align: center
  padding: font-size * 0.8
  font-size: font-size
  font-weight: bold
  color: color-background
  border-radius: 4px
  &:hover
    color: color-background

.applink-wrapper
  .applink-col
    width: 100%
    a
      display: block
      width: 60%
      margin: 0 auto


.babylink-box , .applink-wrapper
  background-color: darken(color-background , 1)
  border: 1px solid color-background
  box-shadow: 1px 1px 6px darken(color-background, 20) inset
  position: relative
  margin: content-margin content-margin-side
  padding: 0
  border-radius: 4px
  .amp-img-wrapper
    margin: font-size content-margin-side
  .babylink-wrapper, .applink
    margin: font-size content-margin-side
  .babylink-image, .app-image
    margin: 0 5% 0 0
    display: inline-block
    vertical-align : middle
    width: 40%
    a
      position: relative
      display: block
      &:before
        utilAni(0.2s)
        position: absolute
        display: block
        content: ""
        width: 100%
        height: 100%
        background-color: rgba(color-background , 0.0)
      &:hover
        &:before
          background-color: rgba(color-background , 0.3)
  .babylink-info, .app-title
    margin: 0
    display: inline-block
    vertical-align : middle
    width: 55%
  .babylink-description, .app-info
    margin: font-size content-margin-side
  .babylink-description
    line-height: font-size * 1.8
    font-size: font-size * 0.9
    a
      font-size: font-size * 0.9
  .babylink-manufacturer
    margin: font-size * 0.8 0
    line-height: font-size * 1.8
  .babylink-title
    font-size: font-size
    margin: font-size * 0.8 0
    line-height: font-size * 1.8
    a
      color: color-default
      display: block
      padding: font-size 0
      font-weight: bold
      &:hover
        color: color-link
        .am-t-desc
          color: color-link
  .aicon
    position: absolute
    display: none

  .bl-btn
    margin: font-size * 1.4 0 font-size 0
  .babylink-comm
    BtnDefault()

  .babylink-amazonBtn
    BtnColor(color-amazon)
  
  .babylink-rakutenBtn
    BtnColor(color-rakuten)

  .babylink-yahooBtn
    BtnColor(color-yahoo-white)
    
  .icon-rakuten
    &:before
      display: inline-block
      font-family: font-sans
      content: "R"
      font-weight: bold
      text-shadow: 0.3px 0.3px 0 color-rakuten
      color: color-rakuten
      font-size: 0.8 * font-size
      background-color: color-background
      border-radius: 50%
      line-height: 1.4 * font-size
      width: 1.4 * font-size
      height: 1.4 * font-size
  
  .icon-yahoo-shop
    &:before
      display: inline-block
      font-family: font-sans
      content: "Y"
      font-weight: bold
      text-shadow: 0.3px 0.3px 0 color-yahoo
      color: color-yahoo
      font-size: 0.8 * font-size
      line-height: 1.4 * font-size
      width: 1.4 * font-size
      height: 1.4 * font-size
      
  .yahoo-black
    color: color-yahoo-black
      
  .amazon-icon
    &:before
      content: "\f270"
      font-family: fontawesome
      color: #FFF
  
  .am-t-desc
    font-size: font-size * 0.75
    letter-spacing: 0.06em
    font-weight: normal
    color: color-default-weak


p.openMap
  text-align: center

.attention , .r-download, .r-memo
  margin: content-margin content-margin-side
  padding: 0 0 font-size * 0.5 0
  border-radius: 2px
  box-shadow: 2px 2px 10px darken(color-background, 10)
  .label-content
    margin: content-margin-side content-margin-side
    padding: 0
  h5 , h6 , h5 span , h6 span
    font-size: font-size
  h5.label-title
    &:before
      margin: 0 font-size * 0.5 0 0
      font-family: fontawesome
  h5.label-title , h5.label-title span
    color: color-background
    text-align: center
  h5.label, h6.label , h5.label-title
    padding: font-size * 0.5 content-margin-side
    margin: 0
    border: none
    border-top: none
    border-bottom: none
    border-left: none
    border-right: none
  h5.label, h6.label
    text-align: left
  ul , ol , dl
    border: none
  p.label
    margin: content-margin-side * 2 content-margin-side

.attention
  background-color: color-attention-weak
  h5.label-title
    &:first-child:before
      content: "\f071"
  h5.label-title , h5.label-title span
    background-color: color-attention
  h5.label, h6.label , h5.label span, h6.label span
    background-color: color-attention-weak
    color: color-attention
  ul
    box-shadow: none
    background-color: darken(color-attention-weak , 5)
    li
      &::after
        background-color: lighten(color-attention , 5)
  ol
    box-shadow: none
    background-color: darken(color-attention-weak , 5)
    li
      &:before
        background-color: lighten(color-attention , 5)
.r-download
  background-color: color-download-weak
  h5.label-title
    &:first-child:before
      content: "\f019"
  h5.label-title , h5.label-title span
    background-color: color-download
  h5.label, h6.label , h5.label span, h6.label span
    background-color: color-download-weak
    color: color-download
  ul
    box-shadow: none
    background-color: darken(color-download-weak , 5)
    li
      &::after
        background-color: lighten(color-download , 5)
  ol
    box-shadow: none
    background-color: darken(color-download-weak , 5)
    li
      &:before
        background-color: lighten(color-download , 5)
.r-memo
  background-color: color-memo-weak
  h5.label-title
    &:first-child:before
      content: "\f0f6"
  h5.label-title , h5.label-title span
    background-color: color-memo
  h5.label, h6.label , h5.label span, h6.label span
    background-color: color-memo-weak
    color: color-memo
  ul
    box-shadow: none
    background-color: darken(color-memo-weak , 5)
    li
      &::after
        background-color: lighten(color-memo , 5)
  ol
    box-shadow: none
    background-color: darken(color-memo-weak , 5)
    li
      &:before
        background-color: lighten(color-memo , 5)

.amSimple
  margin: content-margin content-margin-side
  padding: font-size * 1.0 font-size * 1.8
  position: relative
  background-color: color-background
  border-radius: 2px
  border: 1px solid color-default
  p
    margin: font-size 0

amp-img , img
  user-select: none
  -webkit-user-select: none
  -moz-user-select: none
  -khtml-user-select: none
  -webkit-user-drag: none
  -khtml-user-drag: none


.bcg
  width: 90%
  margin: content-margin auto
.bcg-x-and-cell
  width: 100%
  margin: 0
  position: relative
  height: 100%

.bcg-x-label
  width: 94%
  margin: 5px 0 0 6%
  text-align: center

.bcg-y-label
  // position: relative
  -webkit-writing-mode: vertical-rl
  -ms-writing-mode: tb-rl
  writing-mode: vertical-rl
  text-orientation: sideways-right
  width: 6%
  display: inline-block

.bcg-y-label-inner
  position: absolute
  top: 50%
  left: 1%
  display:inline-block
  transform:translate(-50%, -50%) rotate( 180deg)
  text-align: center
  height: 100%

.label-circle
  display: inline-block
  padding: font-size * 0.2
  border-radius: 50%
  width: font-size * 1.6
  height: font-size * 1.6
  line-height: font-size * 1.6
  font-size: font-size * 0.8

.label-week
  background-color: lighten(color-default,26)
  color: color-background
.label-strong
  background-color: lighten(color-default,1)
  color: color-background

.label-desc
  margin: font-size * 0.8
  display: inline-block

.bcg-table-wrapper
  margin: 0
  padding: 0
  width: 94%
  display: inline-block

.bcg-table
  border-collapse: collapse
  .bcg-td
    width: 50%
    text-align: center
    height: 100px
    border: 1px solid color-background
    margin: 0
    padding: 0
    font-size: font-size * 1.2
  .def
    background-color: lighten(color-default,26)
    color: color-background
  .em
    background-color: lighten(color-default,12)
    color: color-background
  .strong
    background-color: lighten(color-default,1)
    color: color-background
    

@media (min-width : 0px) and (max-width : 375px)
  .babylink-box
    .babylink-title
      margin: 0 font-size * 0.8
      a
        padding: font-size 0 font-size * 0.5 0
    .babylink-image
      width: 100%
      margin: 0 0
      display: block
      a
        .amp-img-wrapper
          margin: 0 0
          amp-img
            width: 60%
            margin: 0 auto
    .babylink-info
      width: 100%
      display: block
    .am-t-desc
      font-size: font-size * 0.5
      line-height: 1em