@charset "UTF-8";
@import url("reset.css");
@import url("m_menu.css");
@import url("../slider/flexslider.css");
/*共通設定-------------------------------------------------------------------------------------------------------------------------------------*/
/*基本設定*/
html {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif,"游明朝体", "Yu Mincho", YuMincho;
  line-height: 1.5;
  position: relative; }

main {
  display: block; }

a img {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease; }

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7; }

/*ヘッダー*/
header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 11; }
  header #header_inner {
    margin: 1em auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between; }
    header #header_inner h1 {
      width: 200px; }
    header #header_inner figure {
      width: 366px; }

/*メイン*/
.back_b {
  background-color: #000;
  width: 100%;
  padding: 2em 0; }

#info {
  margin: 0 auto;
  color: #fff; }
  #info #info_inner {
    width: 80%;
    margin: 1em auto 0; }
    #info #info_inner .rsslist a {
      color: #fff;
      text-decoration: none; }
      #info #info_inner .rsslist a:hover, #info #info_inner .rsslist a:active {
        text-decoration: underline;
        color: #fff; }
    #info #info_inner .rsslist span {
      margin: 0 16px 0 0; }
    #info #info_inner .rsslist:nth-child(n+2) {
      margin: 0.5em 0 0; }
  #info p a {
    display: block;
    color: #000;
    text-decoration: none;
    background-color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 0.5em 15px;
    width: 120px;
    margin: 2em auto 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease; }
    #info p a:hover, #info p a:active {
      background-color: rgba(255, 255, 255, 0.7);
      color: #000;
      text-decoration: none; }

#comcept {
  margin: 3em auto 0; }
  #comcept h2 {
    font-size: 200%;
    text-align: center; }
    #comcept h2 span {
      font-size: 50%;
      font-weight: normal !important;
      display: block; }
  #comcept p {
    width: 96%;
    margin: 2em auto 0;
    text-align: center; }
    #comcept p a {
      display: block;
      color: #fff;
      text-decoration: none;
      background-color: #000;
      font-weight: bold;
      text-align: center;
      padding: 0.5em 15px;
      width: 120px;
      margin: 2em auto 0;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all  0.3s ease; }
      #comcept p a:hover, #comcept p a:active {
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        text-decoration: none; }

#comcept_inner {
  margin: 4em auto 0; }
  #comcept_inner li {
    width: 80%;
    margin: 0 auto;
    position: relative;
    height: 500px; }
    #comcept_inner li:nth-child(1) {
      background-image: url(../img/top/reform.png);
      background-position: right;
      background-repeat: no-repeat;
      background-size: 60% auto; }
    #comcept_inner li:nth-child(2) {
      background-image: url(../img/top/life.png);
      background-position: left;
      background-repeat: no-repeat;
      background-size: 60% auto;
      margin: 4em auto 0; }
    #comcept_inner li:nth-child(3) {
      background-image: url(../img/top/jewelry.png);
      background-position: right;
      background-repeat: no-repeat;
      background-size: 60% auto;
      margin: 4em auto 0; }
    #comcept_inner li:nth-child(2) dl {
      margin: 0 0 0 54%; }
    #comcept_inner li dl {
      position: absolute;
      top: 50%;
      left: 0%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      width: 46%;
      background-color: #fff;
      padding: 2em 2%;
      border: 1px solid #000;
      box-sizing: border-box; }
      #comcept_inner li dl dt {
        font-size: 200%;
        text-align: center;
        font-weight: bold;
        margin: 0 0 1em; }
        #comcept_inner li dl dt span {
          font-size: 50%;
          font-weight: normal !important;
          display: block; }
      #comcept_inner li dl dd a {
        display: block;
        color: #000;
        text-decoration: none;
        font-weight: bold;
        text-align: center;
        margin: 2em auto 0;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all  0.3s ease; }
        #comcept_inner li dl dd a:hover, #comcept_inner li dl dd a:active {
          color: #666;
          text-decoration: none; }
      #comcept_inner li dl dd ul {
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; }
        #comcept_inner li dl dd ul li {
          width: 48%;
          height: initial; }
          #comcept_inner li dl dd ul li a {
            margin: 0;
            display: block;
            color: #000;
            text-decoration: none;
            text-align: center;
            border-bottom: dotted 1px #000;
            font-weight: normal !important; }
            #comcept_inner li dl dd ul li a:hover, #comcept_inner li dl dd ul li a:active {
              color: #666;
              text-decoration: none; }
          #comcept_inner li dl dd ul li:nth-child(n+3) {
            margin: 1em 0 0; }
          #comcept_inner li dl dd ul li:nth-child(1) {
            background-image: none;
            background-position: initial;
            background-repeat: initial;
            background-size: initial;
            margin: 0 !important; }
          #comcept_inner li dl dd ul li:nth-child(2) {
            background-image: none;
            background-position: initial;
            background-repeat: initial;
            background-size: initial;
            margin: 0 !important; }
          #comcept_inner li dl dd ul li:nth-child(3) {
            background-image: none;
            background-position: initial;
            background-repeat: initial;
            background-size: initial;
            margin: 1em 0 0; }

#question {
  margin: 6em auto 0; }
  #question h2 {
    font-size: 200%;
    text-align: center; }
    #question h2 span {
      font-size: 50%;
      font-weight: normal !important;
      display: block; }
  #question p {
    width: 96%;
    margin: 2em auto 0;
    text-align: center; }
    #question p a {
      display: block;
      color: #fff;
      text-decoration: none;
      background-color: #000;
      font-weight: bold;
      text-align: center;
      width: 540px;
      margin: 2em auto 0;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all  0.3s ease; }
      #question p a:hover, #question p a:active {
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        text-decoration: none; }

#voice {
  margin: 6em auto 0; }
  #voice h2 {
    font-size: 200%;
    text-align: center; }
    #voice h2 span {
      font-size: 50%;
      font-weight: normal !important;
      display: block; }
  #voice #rss {
    width: 80%;
    margin: 2em auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #voice #rss a {
      color: #000;
      text-decoration: none; }
      #voice #rss a:hover, #voice #rss a:active {
        text-decoration: underline;
        color: #000; }
    #voice #rss .rsslist {
      width: 31.333%; }
      #voice #rss .rsslist li img {
        height: 15em;
        object-fit: cover; }
      #voice #rss .rsslist a {
        color: #000;
        text-decoration: none; }
        #voice #rss .rsslist a:hover, #voice #rss .rsslist a:active {
          text-decoration: underline;
          color: #000; }
      #voice #rss .rsslist span {
        display: block;
        margin: 1em 0 0; }
  #voice p {
    width: 96%;
    margin: 0 auto 0;
    text-align: center; }
    #voice p a {
      display: block;
      color: #fff;
      text-decoration: none;
      background-color: #000;
      font-weight: bold;
      text-align: center;
      padding: 0.5em 15px;
      width: 120px;
      margin: 2em auto 0;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all  0.3s ease; }
      #voice p a:hover, #voice p a:active {
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        text-decoration: none; }

#media {
  margin: 6em auto 0; }
  #media h2 {
    font-size: 200%;
    text-align: center; }
    #media h2 span {
      font-size: 50%;
      font-weight: normal !important;
      display: block; }
  #media ul {
    width: 580px;
    margin: 4em auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #media ul li {
      width: 29.333%; }
      #media ul li a {
        color: #000;
        display: block;
        text-align: center;
        text-decoration: none;
        border-bottom: 1px dotted #000; }
        #media ul li a:hover, #media ul li a:active {
          text-decoration: none;
          color: #666; }
      #media ul li span {
        display: block;
        margin: 1em 0 0; }
  #media p {
    width: 96%;
    margin: 0 auto 0;
    text-align: center; }
    #media p a {
      display: block;
      color: #fff;
      text-decoration: none;
      background-color: #000;
      font-weight: bold;
      text-align: center;
      width: 540px;
      margin: 2em auto 0;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all  0.3s ease; }
      #media p a:hover, #media p a:active {
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        text-decoration: none; }

#contact {
  margin: 6em auto 0; }
  #contact h2 {
    font-size: 200%;
    text-align: center; }
    #contact h2 span {
      font-size: 50%;
      font-weight: normal !important;
      display: block; }
  #contact p {
    margin: 2em 0 0;
    text-align: center; }
  #contact ul {
    width: 100%;
    margin: 4em auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #contact ul li {
      padding: 4em 4%;
      width: 46%;
      border: 1px solid #000;
      box-sizing: border-box; }
      #contact ul li dl dt {
        text-align: center;
        border-bottom: 1px dotted #000; }
      #contact ul li dl dd a {
        display: block;
        width: 80%;
        margin: 2em auto 0; }
      #contact ul li:nth-child(2) dl dd a {
        display: block;
        padding: 1em 2%;
        margin: 2em auto 0;
        background-color: #000;
        color: #fff;
        text-decoration: none;
        text-align: center;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all  0.3s ease; }
        #contact ul li:nth-child(2) dl dd a:hover, #contact ul li:nth-child(2) dl dd a:active {
          background-color: #333;
          color: #fff;
          text-decoration: none; }

/*フッター*/
footer {
  width: 100%;
  background-color: #000;
  margin: 2em 0 0; }
  footer #footer_inner {
    margin: 0 auto;
    padding: 3em 0 0; }
    footer #footer_inner #f_menu {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      footer #footer_inner #f_menu dl {
        width: 16%; }
        footer #footer_inner #f_menu dl dt {
          color: #fff;
          font-weight: bold;
          border-bottom: 1px dotted #fff;
          padding: 0 0 0.25em;
          margin: 0 0 0.5em;
          font-size: 110%; }
        footer #footer_inner #f_menu dl dd a {
          color: #fff;
          text-decoration: none; }
          footer #footer_inner #f_menu dl dd a:hover, footer #footer_inner #f_menu dl dd a:active {
            color: #fff;
            text-decoration: underline; }
        footer #footer_inner #f_menu dl dd ul li:nth-child(n+2) {
          margin: 0.5em 0 0; }
    footer #footer_inner #shop {
      margin: 4em auto 0; }
      footer #footer_inner #shop dt {
        width: 180px;
        margin: 0 auto; }
      footer #footer_inner #shop dd {
        color: #fff;
        text-align: center;
        margin: 1em 0 0; }
  footer address {
    width: 96%;
    margin: 3em 0 0;
    text-align: center;
    font-size: 87.5%;
    font-style: normal;
    padding: 1em 2% 1em;
    color: #fff; }

/*TOPへ戻るボタン設定*/
#page-top {
  margin: 1em 2% 0 0;
  width: 98%; }
  #page-top a {
    display: block;
    width: 80px;
    margin: 0 0 0 auto;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease; }
  #page-top a:hover, #page-top a:active {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7; }

/*共通設定ここまで-------------------------------------------------------------------------------------------------------------------------------------*/
/* pc */
@media screen and (min-width: 1000px) {
  /*ヘッダー*/
  #header_inner {
    width: 980px; }

  .sp_t {
    display: none; }

  /*メイン*/
  #message, #info, #comcept, #comcept_inner, #question, #voice, #media, #contact {
    width: 980px; }

  .m_sp {
    display: none; }

  #comcept_inner li figure {
    display: none; }

  /*フッター*/
  #footer_inner {
    width: 980px; } }
/* tablet以下共通 ------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 999px) {
  /*ヘッダー*/
  #header_inner {
    width: 96%; }

  /*メイン*/
  #message, #info, #comcept, #comcept_inner, #question, #voice, #media, #contact {
    width: 96%; }

  /*フッター*/
  #footer_inner {
    width: 96%; } }
/* tablet以下共通ここまで ------------------------------------------------------------------------------------------*/
/* tablet1  */
@media only screen and (min-width: 768px) and (max-width: 999px) {
  /*基本設定*/
  html {
    font-size: 85%; }

  /*ヘッダー*/
  header #header_inner {
    height: 100px;
    margin: 0 auto;
    align-items: center; }
    header #header_inner h1 {
      width: 150px;
      margin: 0 auto; }
    header #header_inner figure {
      display: none; }

  /*メイン*/
  #comcept_inner {
    margin: 4em auto 0; }
    #comcept_inner li {
      height: 400px; }
      #comcept_inner li:nth-child(1) {
        margin: 2em auto 0; }
      #comcept_inner li:nth-child(2) {
        margin: 2em auto 0; }
      #comcept_inner li:nth-child(3) {
        margin: 2em auto 0; }
      #comcept_inner li figure {
        display: none; }

  #voice #rss .rsslist li img {
    height: 13em;
    object-fit: cover; }
  #voice p {
    width: 96%;
    margin: 0 auto 0;
    text-align: center; }
    #voice p a {
      display: block;
      color: #fff;
      text-decoration: none;
      background-color: #000;
      font-weight: bold;
      text-align: center;
      padding: 0.5em 15px;
      width: 120px;
      margin: 2em auto 0;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all  0.3s ease; }
      #voice p a:hover, #voice p a:active {
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        text-decoration: none; }

  /*フッター*/
  footer {
    border-top: 3px solid #fff; } }
/* tablet2  */
@media only screen and (max-width: 767px) {
  /*基本設定*/
  html {
    font-size: 85%; }

  /*ヘッダー*/
  header #header_inner {
    height: 100px;
    margin: 0 auto;
    align-items: center; }
    header #header_inner h1 {
      width: 150px;
      margin: 0 auto; }
    header #header_inner figure {
      display: none; }

  /*メイン*/
  #info {
    margin: 0 auto;
    color: #fff; }
    #info ul {
      margin: 1em auto 0; }
      #info ul li span {
        display: block;
        margin: 0; }

  #comcept {
    margin: 3em auto 0; }
    #comcept h2 {
      font-size: 180%; }
    #comcept p {
      width: 80%;
      margin: 2em auto 0;
      text-align: center; }

  #comcept_inner {
    width: 100%;
    margin: 4em 0 0; }
    #comcept_inner li {
      width: 100%;
      margin: 0;
      position: static;
      height: initial; }
      #comcept_inner li:nth-child(2) dl {
        margin: 4em auto 0; }
      #comcept_inner li:nth-child(1) {
        background-image: none; }
      #comcept_inner li:nth-child(2) {
        background-image: none;
        margin: 4em auto 0; }
      #comcept_inner li:nth-child(3) {
        background-image: none;
        margin: 4em auto 0; }
      #comcept_inner li dl {
        position: static;
        top: 0%;
        left: 0%;
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        width: 80%;
        margin: 0 10%;
        border: none; }
        #comcept_inner li dl dt {
          font-size: 180%; }

  #question {
    margin: 6em auto 0; }
    #question h2 {
      font-size: 180%; }
    #question p a {
      width: 86%;
      margin: 2em auto 0; }

  #voice {
    margin: 6em auto 0; }
    #voice h2 {
      font-size: 180%;
      text-align: center; }
    #voice #rss {
      flex-direction: column; }
      #voice #rss a {
        color: #000;
        text-decoration: none; }
        #voice #rss a:hover, #voice #rss a:active {
          text-decoration: underline;
          color: #000; }
      #voice #rss .rsslist {
        width: 80%;
        margin: 0 auto; }
        #voice #rss .rsslist:nth-child(n+2) {
          margin: 2em auto 0; }

  #media h2 {
    font-size: 180%; }
  #media ul {
    width: 80%;
    margin: 4em auto 0;
    flex-direction: column; }
    #media ul li {
      width: 100%; }
      #media ul li:nth-child(n+2) {
        margin: 2em 0 0; }
  #media p {
    width: 80%;
    margin: 0 auto 0;
    text-align: center; }
    #media p a {
      width: 100%;
      margin: 2em auto 0; }

  #contact h2 {
    font-size: 180%; }
  #contact p {
    width: 80%;
    margin: 2em auto 0;
    text-align: center; }
  #contact ul {
    flex-direction: column; }
    #contact ul li {
      padding: 4em 4%;
      width: 80%;
      margin: 0 auto; }
      #contact ul li:nth-child(n+2) {
        margin: 2em auto 0; }

  /*フッター*/
  footer {
    width: 100%;
    background-color: #000;
    margin: 3em 0 0; }
    footer #footer_inner {
      margin: 0 auto;
      padding: 3em 0 0; }
      footer #footer_inner #f_menu {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; }
        footer #footer_inner #f_menu dl:nth-child(n+3) {
          margin: 3em 0 0; }
        footer #footer_inner #f_menu dl {
          width: 46%; } }
/* smartPhone1 */
@media only screen and (max-width: 499px) {
  /*基本設定*/
  html {
    font-size: 80%; }

  /*ヘッダー*/
  header {
    width: 100%; }
    header .pc_t {
      display: none; }
    header #header_wrap {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 100; }
      header #header_wrap #header_wrap2 #header_inner h1 {
        width: calc(100% - 150px); }
        header #header_wrap #header_wrap2 #header_inner h1 img {
          width: 120px; }
      header #header_wrap #header_wrap2 #header_inner ul {
        width: 150px;
        align-items: right; }
    header .flexslider {
      margin: 92px 0 0 0; }

  /*メイン*/
  /*フッター*/ }