@charset "utf-8";

/*
 * 共通
 * top
 * 中ページ共通
 * kimyo
 * about
 * introduce
 * kito
 * kushiki
 * access
 * contact
 * blog一覧
 * blog詳細
 */

/* ///////////////////////////////////////////////////////////////////
共通
/////////////////////////////////////////////////////////////////// */
html,body {
  -webkit-text-size-adjust: 100%;
}
body {
  font-size: 14px;
  line-height: 1.8;
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}

a {
  color: #333;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a .fadeimg {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
a:hover .fadeimg {
  opacity: .6;
}

img {
  vertical-align: top;
}

/* ///////////////////////////////////////////////////////////////////
top
/////////////////////////////////////////////////////////////////// */
header {
  width: 100%;
  margin: 0 0 40px;
}
.header {
  width: 990px;
  margin: 0 auto;
  padding: 20px 0;
  overflow: hidden;
}
.header h1 {
  width: 260px;
  height: 40px;
  float: left;
}

.header-sns {
  float: right;
}
.header-sns ul li {
  display: inline-block;
  vertical-align: bottom;
  margin: 0 0 0 10px;
}


.main-img {
  height: 630px;
  background: url(../img/main.jpg) no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}
.main-img p {
  width: 990px;
  margin: 0 auto;
  padding: 20px 0 0;
  text-align: right;
}

.main-nav {
  height: 48px;
  border-top: 1px solid #000;
  border-bottom: 3px solid #000;
}
.main-nav ul {
  width: 990px;
  margin: 0 auto;
  /*overflow: hidden;*/
}
.main-nav ul li {
  float: left;
  position: relative;
}
.main-nav ul li a:hover:after,
.main-nav ul li .active:after {
  content: "";
  width: 141px;
  height: 3px;
  background: #db616d;
  position: absolute;
  top: 48px;
  right: 0;
}

.wrap {
  width: 990px;
  margin: 0 auto;
  /* overflow: hidden; */
}
.wrap:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.main-txt {
  text-align: center;
  margin: 60px 0 90px;
}

.feature ul {
  width: 1100px;
  overflow: hidden;
}
.feature ul li {
  width: 445px;
  display: inline-block;
  vertical-align: top;
  margin: 0 100px 60px 0;
}
.feature ul li img {
  margin: 0 0 10px;
}

.blog {
  margin: 0 0 100px;
}

.blog h2 {
  text-align: center;
  margin: 0 0 60px;
}
.blog ul {
  width: 1100px;
  overflow: hidden;
}
.blog ul li {
  width: 264px;
  display: inline-block;
  vertical-align: top;
  margin: 0 99px 40px 0;
}
.blog ul li a img {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.blog ul li a:hover img {
  opacity: .6;
}
.blog ul li a dl dt {
  font-size: 16px;
  color: #8e5f33;
  margin: 10px 0;
}
.blog ul li a dl dd {
  margin-top: 10px;
}

/*instagram*/
.instagram {
  margin-bottom: 100px;
}
.instagram h2 {
  text-align: center;
  margin: 0 0 60px;
}
.instagram ul {
  letter-spacing: -.4em;
}
.instagram ul li {
  width: 225px;
  height: 225px;
  overflow: hidden;
  display: inline-block;
  margin: 0 30px 30px 0;
}
.instagram ul li:nth-child(4n) {
  margin: 0 0 30px;
}
.instagram ul li a {
  display: block;
  height: 100%;
  background-size: contain;
  transition: all .3s ease;
}
.instagram ul li a img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.instagram ul li a:hover {
  opacity: .6;
}



footer {
  background: #e6e6e6;
  margin: 100px 0 0;
}

.footer {
  width: 990px;
  text-align: center;
  position: relative;
  padding: 50px 0 30px;
  margin: 0 auto;
}

.footer p {
  margin: 0 0 50px;
  position: relative;
}

.footer small {
  display: block;
}
.page-top {
  position: absolute;
  top: -30px;
  right: 0;
}

/* ///////////////////////////////////////////////////////////////////
中ページ共通
/////////////////////////////////////////////////////////////////// */
.sub {
  width: 230px;
  float: left;
}
.sub .side-bnr {
  width: 230px;
  height: 230px;
  margin: 0 0 40px;
}
.sub .side-nav {
  border-top: 1px dotted #ccc;
}
.sub .side-nav a {
  display: block;
  border-bottom: 1px dotted #ccc;
  padding: 10px 20px;
}

.sub .side-nav a span {
  font-size: 16px;
}

.sub .side-nav a:hover {
  background: #fbfbfb;
}

.widget-area a {
  color: #8e5f33;
}
.widget-area > li {
  border-top: 1px dotted #ccc;
  padding: 10px 20px;
}
.widget-area li h2 {
  font-size: 16px;
  padding: 0 0 5px;
}

.main {
  width: 720px;
  float: right;
}
.main-kimyo {
  width: 990px;
}
.main-kimyo h2,
.main h2 {
  margin: 0 0 40px;
}
.main h3 {
  font-size: 20px;
  padding: 0 0 20px;
  border-bottom: 1px dotted #ccc;
  margin: 0 0 40px;
}

.main h3 span {
  font-size: 12px;
  color: #ccc;
  margin: 0 0 0 20px;
}

.p-large {
  font-size: 17px;
  line-height: 2;
  margin: 40px 0;
  padding: 0 20px;
}
.p-center-light {
  font-size: 18px;
  line-height: 2.4;
  color: #c63;
  text-align: center;
  margin: 40px 0;
}

.p-large span,
.p02 span {
  font-weight: bold;
}
.p01 {
  font-size: 16px;
  margin: 40px 0;
  padding: 0 20px;
}
.p02 {
  font-size: 16px;
  padding: 0 20px 0 0;
}
.img-side {
  display: table;
  margin: 60px 0;
}
.img-side img {
  display: table-cell;
  animation-duration: 2s;
}
.img-side p {
  display: table-cell;
  vertical-align: middle;
  animation-duration: 2s;
}
.link-center {
  text-align: center;
  margin: 40px 0;
}
.link-center a {
  width: 240px;
  display: inline-block;
  font-size: 16px;
  color: #fff;
  background: #333;
  padding: 15px 0;
  text-decoration: none;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.link-center a:hover {
  opacity: .6;
}

/* ///////////////////////////////////////////////////////////////////
kimyo
/////////////////////////////////////////////////////////////////// */
.kimyo-p {
  font-size: 26px;
  line-height: 2;
  text-align: center;
  margin: 70px 0 40px;
}

/* ///////////////////////////////////////////////////////////////////
about
/////////////////////////////////////////////////////////////////// */
.about-img {
  width: 100%;
  overflow: hidden;
  margin: 40px 0;
}
.about-img img:first-child {
  float: left;
}
.about-img img:last-child {
  float: right;
}
.about-dl {
  overflow: hidden;
}
.about-dl dt {
  width: 25%;
  float: left;
  text-indent: 20px;
  padding: 10px 0;
}
.about-dl dd {
  width: 75%;
  float: left;
  padding: 10px 0;
}
.about-dl dt:nth-of-type(even),
.about-dl dd:nth-of-type(even) {
  background: #fbfbfb;
}

/* ///////////////////////////////////////////////////////////////////
introduce
/////////////////////////////////////////////////////////////////// */
.introduce-p {
  font-size: 12px;
  padding: 0 20px 0 0;
}

/* ///////////////////////////////////////////////////////////////////
kito
/////////////////////////////////////////////////////////////////// */
.kito-ul {
  display: table-cell;
  vertical-align: top;
  padding: 0 0 0 20px;
}
.kito-ul li span {
  color: #c63;
}

/* ///////////////////////////////////////////////////////////////////
kushiki
/////////////////////////////////////////////////////////////////// */
.kushiki-img {
  text-align: center;
  margin: 40px 0;
}
.kushiki-ul01 {
  width: 100%;
  overflow: hidden;
  background: #fbfbfb;
  padding: 10px 0;
}
.kushiki-ul01 li {
  box-sizing: border-box;
  width: 33.333%;
  float: left;
  padding: 10px;
}
.kushiki-ul02 {
  margin: 10px;
}

/* ///////////////////////////////////////////////////////////////////
access
/////////////////////////////////////////////////////////////////// */
.access-map {
  display: table;
}
.access-map iframe {
  display: table-cell;
}
.access-dl {
  display: table-cell;
  vertical-align: middle;
  padding: 0 0 0 20px;
}
.access-dl dt {
  font-size: 17px;
  color: #c63;
  margin: 20px 0 0;
}

/* ///////////////////////////////////////////////////////////////////
contact
/////////////////////////////////////////////////////////////////// */
.contact-p span {
  color: #c63;
}
.contact-table {
  width: 600px;
  margin: 40px auto;
}
.contact-table th,
.contact-table td {
  border: 1px solid #ccc;
  padding: 10px;
}
.contact-table th span {
  background: #c63;
  color: #fff;
  font-size: 11px;
  display: inline-block;
  height: 14px;
  line-height: 14px;
  padding: 0 5px;
  margin: 0 0 0 10px;
  position: relative;
  top: -1px;
}
.input-text {
  width: 99%;
}
.contact-table td textarea {
  width: 99%;
  border: 1px solid #ccc;
}
.contact-td-submit {
  text-align: center;
  padding: 20px !important;
  border: none !important;
}
.input-submit {
  width: 200px;
  height: 40px;
  line-height: 40px;
  background: #000;
  border: none;
  color: #fff;
  cursor: pointer;
}
.input-submit:hover {
  opacity: .6;
}

.contact-bnr {
  width: 613px;
  margin: 0 auto;
  text-align: center;
}

/* ///////////////////////////////////////////////////////////////////
blog一覧
/////////////////////////////////////////////////////////////////// */
.blog-ul li {
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px dotted #ccc;
}

.blog-ul li a {
  display: table;
}

.blog-ul li a img {
  display: table-cell;
}

.blog-ul li a dl {
  display: table-cell;
  vertical-align: middle;
  padding: 0 0 0 20px;
}

.blog-ul li a dl dt {
  font-size: 16px;
  color: #8e5f33;
  margin: 10px 0;
}

.blog-ul li a dl dt span {
  font-size: 12px;
  color: #ccc;
}

/* ///////////////////////////////////////////////////////////////////
blog詳細
/////////////////////////////////////////////////////////////////// */
.post {
  width: 560px;
  margin: 0 auto;
}
.post p,
.post pre {
  margin: 10px 0;
}
.post img {
  max-width: 100%;
  height: auto;
}

.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6,
.post strong {
  font-weight: bold !important;
  padding: 0 !important;
  margin: 10px 0 !important;
}
.post h1 { font-size: 32px !important; }
.post h2 { font-size: 24px !important; }
.post h3 {
  font-size: 18.72px !important;
  border: none !important;
}
.post h4 { font-size: 16px !important; }
.post h5 { font-size: 13.28px !important; }
.post h6 { font-size: 10.72px !important; }
.post em {
  font-style: italic !important;
}
.post ul,
.post ol {
  margin: 20px 0 20px 30px !important;
}
.post ul li {
  list-style: disc !important;
}
.post ol li {
  list-style: decimal !important;
}