@charset "UTF-8";
@media screen and (max-width: 767px) {
  .sp_hide {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .pc_hide {
    display: none;
  }
}
/*====================
	contents
====================*/
div.contents_inner {
  margin: 50px auto 60px;
  width: 850px;
}
@media screen and (max-width: 767px) {
  div.contents_inner {
    margin: 30px auto;
    width: 100%;
  }
}

#main img {
  box-shadow: 2px 3px 3px #aaa;
}

div.logo img {
  box-shadow: 0 0 0 #fff;
}

div.content, div.content_b {
  margin: 45px 0 0;
}
div.content:after, div.content_b:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
}
div.content div.textbox, div.content_b div.textbox {
  float: left;
  width: 420px;
}
div.content div.textbox h3, div.content_b div.textbox h3,
div.content div.textbox h4,
div.content_b div.textbox h4 {
  color: #4d4b47;
  font-size: 24px;
  letter-spacing: -1px;
  margin-bottom: 30px;
}
div.content div.textbox span, div.content_b div.textbox span {
  color: #4d4b47;
  font-size: 16px;
  letter-spacing: normal;
}
div.content div.textbox p, div.content_b div.textbox p {
  font-size: 14px;
  line-height: 1.7;
}
div.content div.content_img, div.content_b div.content_img {
  float: right;
  width: 400px;
}
@media screen and (max-width: 767px) {
  div.content, div.content_b {
    margin: 25px 0 0;
  }
  div.content div.textbox, div.content_b div.textbox {
    float: none;
    width: 100%;
  }
  div.content div.textbox p, div.content_b div.textbox p {
    line-height: 1.5;
    padding: 0 5px;
  }
  div.content div.textbox h3, div.content_b div.textbox h3,
  div.content div.textbox h4,
  div.content_b div.textbox h4 {
    font-size: 22px;
    margin: 15px 0;
    padding: 0 5px;
  }
  div.content div.textbox span, div.content_b div.textbox span {
    font-size: 16px;
  }
  div.content div.content_img, div.content_b div.content_img {
    float: none;
    width: 100%;
  }
  div.content div.content_img img, div.content_b div.content_img img {
    width: 100%;
  }
}

div.content_b div.textbox h3 {
  border-bottom: 1px solid #ccc;
  padding-bottom: 25px;
  margin-bottom: 25px;
}
div.content_b div.textbox p {
  line-height: 2.2;
}

ul.about {
  margin: 35px 0 0;
}
ul.about:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
}
ul.about li {
  float: left;
  margin-left: 47px;
  width: 252px;
}
ul.about li:first-child {
  margin: 0;
}
ul.about div.content_s h4 {
  font-size: 20px;
  margin: 12px 0 15px;
  text-align: center;
}
ul.about div.content_s h4 span {
  color: #557733;
}
ul.about div.content_s p {
  font-size: 14px;
  line-height: 1.5;
  padding: 0 5px;
}
@media screen and (max-width: 767px) {
  ul.about li {
    float: none;
    margin: 20px 0;
    width: 100%;
  }
  ul.about div.content_s img {
    width: 100%;
  }
}

/*====================
	3 G
====================*/
h3.trig_title {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
  font-size: 30px;
  margin: 65px auto 30px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  h3.trig_title {
    font-size: 22px;
    margin: 40px auto 30px;
  }
}

p.trig_trailer {
  font-size: 16px;
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.8;
  text-align: center;
}
@media screen and (max-width: 767px) {
  p.trig_trailer {
    line-height: 1.5;
    padding: 0 5px;
    text-align: left;
  }
}

div.trig {
  background: url(../media/images/philosophy/3g_img.png) no-repeat;
  margin: 0 0 45px;
  height: 715px;
  position: relative;
  width: 850px;
}
@media screen and (max-width: 767px) {
  div.trig {
    background: transparent;
    margin: 20px 0 65px;
    min-height: 150px;
    height: auto;
    width: 100%;
  }
}

div.btn.quality, div.btn.price, div.btn.design {
  border: 1px solid #4d4b47;
  color: #4d4b47;
  font-size: 14px;
  box-sizing: border-box;
  height: 42px;
  line-height: 42px;
  margin: auto;
  position: absolute;
  top: 230px;
  left: 45px;
  text-align: center;
  width: 182px;
}
div.btn.quality a, div.btn.price a, div.btn.design a {
  display: block;
}
div.btn.quality a:after, div.btn.price a:after, div.btn.design a:after {
  font-family: FontAwesome;
  content: "";
  padding-left: 15px;
  padding-right: 0;
}
div.btn.quality a, div.btn.price a, div.btn.design a {
  color: #000;
  text-decoration: none;
}
div.btn.quality a:hover, div.btn.price a:hover, div.btn.design a:hover {
  color: #9B481E;
  cursor: pointer;
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  div.btn.quality, div.btn.price, div.btn.design {
    height: 50px;
    line-height: 50px;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 250px;
  }
}

div.btn.price {
  right: -500px;
}
@media screen and (max-width: 767px) {
  div.btn.price {
    top: 20px;
    right: auto;
  }
}

div.btn.design {
  bottom: -420px;
  right: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  div.btn.design {
    top: 40px;
    bottom: 0;
  }
}

/*====================
	Quality
====================*/
h3.qu_title, h3.pri_title,
h3.des_title {
  color: #557733;
  font-size: 30px;
  letter-spacing: 4px;
  margin: 0 auto 25px;
  text-align: center;
}
h3.qu_title:before, h3.pri_title:before,
h3.des_title:before {
  content: "{";
}
h3.qu_title:after, h3.pri_title:after,
h3.des_title:after {
  content: "}";
}
h3.qu_title:before, h3.pri_title:before,
h3.des_title:before, h3.qu_title:after, h3.pri_title:after,
h3.des_title:after {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
  font-size: 50px;
  margin: 0 7px;
  vertical-align: -10px;
}
@media screen and (max-width: 767px) {
  h3.qu_title, h3.pri_title,
  h3.des_title {
    font-size: 22px;
    padding: 0 5px;
  }
  h3.qu_title:before, h3.pri_title:before,
  h3.des_title:before, h3.qu_title:after, h3.pri_title:after,
  h3.des_title:after {
    font-size: 30px;
    vertical-align: -2px;
  }
}

p.qu_trailer {
  font-size: 24px;
  text-align: center;
}
p.qu_trailer span {
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  p.qu_trailer {
    font-size: 20px;
    line-height: 1.4;
    padding: 0 5px;
  }
}

div.content div.textbox p.photo, div.content_b div.textbox p.photo {
  font-size: 12px;
  margin: 1.2em 0 0;
}

div.effect {
  margin: 15px 0 45px;
  width: 850px;
}
div.effect:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
}
div.effect div.e_img {
  float: left;
  margin: 35px 30px 0 0;
  width: 260px;
}
div.effect div.e_textbox {
  float: right;
  width: 560px;
}
div.effect div.e_textbox p {
  color: #886644;
  font-size: 18px;
  margin-left: -10px;
  position: relative;
  width: 570px;
}
div.effect div.e_textbox p span {
  color: #000;
  font-size: 12px;
  margin: auto;
  position: absolute;
  right: 0;
  bottom: 3px;
}
div.effect div.e_textbox p.add {
  color: #000;
  font-size: 12px;
  margin-left: 0;
}
@media screen and (max-width: 767px) {
  div.effect {
    width: 100%;
  }
  div.effect div.e_img {
    float: none;
    margin: 20px 0;
    width: 100%;
  }
  div.effect div.e_img img {
    width: 100%;
  }
  div.effect div.e_textbox {
    float: none;
    text-align: center;
    width: 100%;
  }
  div.effect div.e_textbox p {
    width: 100%;
  }
  div.effect div.e_textbox p span {
    display: block;
    position: relative;
    bottom: auto;
  }
}

table.effect {
  border-top: 1px solid #decebe;
  border-left: 1px solid #decebe;
  box-sizing: border-box;
  height: 200px;
  margin: 10px 0;
  text-align: center;
  width: 560px;
}
table.effect td {
  border-right: 1px solid #decebe;
  border-bottom: 1px solid #decebe;
  text-align: center;
}
table.effect thead tr {
  background: #f3efda;
  height: 48px;
}
table.effect tbody tr {
  background: #fff;
  height: 49px;
}
@media screen and (max-width: 767px) {
  table.effect {
    height: auto;
    width: 100%;
  }
}

/*====================
	price , design
====================*/
h3.des_title {
  margin-top: 50px;
}

ul.design {
  margin-left: -50px;
  width: 900px;
}
ul.design:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
}
ul.design li {
  float: left;
  margin: 0 0 35px 50px;
  width: 400px;
}
ul.design div.design_inner p.name {
  color: #4d4b47;
  font-size: 24px;
  font-weight: bold;
  margin: 20px 0;
  text-align: center;
}
ul.design div.design_inner p.name span {
  font-size: 12px;
  font-weight: normal;
  margin-left: 15px;
}
ul.design div.design_inner p {
  font-size: 14px;
  padding: 0 5px;
}
@media screen and (max-width: 767px) {
  ul.design {
    margin-left: 0;
    width: 100%;
  }
  ul.design li {
    float: none;
    margin: 0 0 20px;
    width: 100%;
  }
  ul.design li img {
    width: 100%;
  }
  ul.design div.design_inner p.name {
    font-size: 20px;
    margin: 10px 0;
  }
  ul.design div.design_inner p.name span {
    display: block;
    margin: 0;
  }
}

div.d_material {
  border: 1px solid #a6a196;
  width: 850px;
}
@media screen and (max-width: 767px) {
  div.d_material {
    border: 0;
    width: 100%;
  }
}

h4.mat_title {
  color: #4d4b47;
  font-size: 30px;
  margin: 25px 0 15px;
  text-align: center;
}

p.mat_title_trailer {
  color: #4d4b47;
  font-size: 14px;
  margin: 0 0 25px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  p.mat_title_trailer {
    padding: 0 5px;
  }
}

ul.d_material {
  margin: 0 auto;
  padding-bottom: 25px;
  width: 795px;
}
ul.d_material:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
}
ul.d_material li {
  font-size: 12px;
  float: left;
  margin-left: 21px;
  width: 183px;
  text-align: center;
}
ul.d_material li p.m_name {
  font-size: 16px;
  font-weight: bold;
}
ul.d_material li:first-child {
  margin: 0;
}
@media screen and (max-width: 767px) {
  ul.d_material {
    width: 100%;
  }
  ul.d_material li {
    float: none;
    margin-left: 0;
    width: 100%;
  }
}

/*# sourceMappingURL=philosophy.css.map */