@charset "utf-8";

#header{
  display: block;
  position: relative;
  width: 100%;
}
#gnav .flex{ justify-content: flex-end; }
#gnav > ul > li a { color: #333; }
#gnav > ul > li:last-child a{ color: #fff; }


main{ margin-top: 90px; margin-bottom: 70px }
main.flex{ align-items: flex-start; }
main .main-box{ width: 74%; }
main .sidebar{ width: 20%; padding: .7em; background: #e6f5f9; }
main .sidebar li{ border-bottom: solid 1px #dcdcdc; }
main .sidebar li:last-child{ border-bottom:none; }
main .sidebar li a{ display: block; padding: .7em; color: #333; letter-spacing: 1px; }

.page-ttl{
  position: relative;
  margin-bottom: 10px;
  padding: 2.25em 0;
  background: linear-gradient(45deg, #c6ceff,#ddecfc,#effff7);
  background-size: 100% 100%;
  line-height: 1;
}
.page-ttl::after{
  position: absolute;
  content: "";
  bottom: -10px;
  left: 0;
  width: 100%;
  border:solid 3px #d4d7e2;
}
.page-ttl .jp{ display: block; font-size: 1.15em; }
.page-ttl .en{
  font-size: .5em;
  font-style: italic;
  color: #949cb6;
}

/*ボタンリスト*/
.btn-list{
  margin-bottom: 5em;
}
.btn-list .btn{ margin-top: 0; }
.btn-list .btn a{
  padding:0.5em 3em 0.5em 2.5em;
}


/*カテゴリーのリスト*/
.category-btn-list{
  width: 90%;
  margin: 0 auto 6em;
}
.category-btn-list li{
  width: 32%;
  margin-right: 2%;
  margin-top:0;
}
.category-btn-list li a{
  display: block;
  padding: 0.5em 1em;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}


/*シンプルな箱リスト*/
.blog-list li{ border: solid 1px #ccc; }
.blog-list li+li{ margin-top: 1em; }
.blog-list li a{
  position: relative;
  display: block;
  padding: 1em;
  color: #333;
  transition: 0.3s ease-in-out;
}
.blog-list li a::after {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform: rotate(45deg) translateY(-50%);
  top: 50%;
  right: 25px;
  border-radius: 1px;
}
.blog-list li a:hover{
  background:#eee;
}
.blog-list li .category{
  width: 6em;
  display: inline-block;
  margin: 0 1.5em 0 1em;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  background: #949cb6;
  color: #fff;
  line-height: 1;
}

/*次へ、前へのボタン*/
.page-nav{ margin-top: 4em; }
.page-nav li.nav-left,.page-nav li.nav-right{ width: 30%; }
.page-nav li.nav-top{ width: 20%; }
.page-nav li a{
  position: relative;
  display: block;
  padding: 1em;
  color: #fff;
  background-color: #949cb6;
  font-size: .9em;
  letter-spacing: 1px;
  line-height: 1;
  text-align: center;
}
.page-nav li.nav-left a{ padding-left:2.5em; }
.page-nav li.nav-left a::after{
  content: '';
  width: 7px;
  height: 7px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  left: 10px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}
.page-nav li.nav-right a{ padding-right:2.5em; }
.page-nav li.nav-right a::after{
  content: '';
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 15px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}
.page-nav li.nav-top a{
  background: #fff;
  color: #949cb6;
  font-weight: 700;
  border: solid 2px #949cb6;
}

/*制作事例一覧*/
.works-list li{ position: relative; }
.works-list li img{ border: solid 1px #ddd; }
.works-list li .category-name{
  display: inline-block;
  margin-top: 1.9em;
  padding: 6.5px 15px;
  font-family: 'Noto Sans JP';
  font-size: .75em;
  background-color: #949cb6;
  color: #fff;
  border-radius: 50px;
  line-height: 1;
  letter-spacing: 1px;
}
.works-list li .works-ttl{
  margin-top: .4em;
  font-size: 1.1em;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  letter-spacing: 1px;
}

.wp-pagenavi{ margin-top: 5em; text-align: center; }
.wp-pagenavi a:hover, .wp-pagenavi span.current {
  border-color: #949cb6!important;
  background: #949cb6;
  color: #fff;
}
.wp-pagenavi a, .wp-pagenavi span {
  padding: 5px 10px!important;
  margin: 5px!important;
  color: #333;
}


/*制作事例　詳細ページ*/
.works-img{ width: 70%; margin:3em auto 0; }
.dl-table{ margin-top: 3.5em; }
.dl-table .row{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.dl-table .row dt,.dl-table .row dd {
  padding: 1em 1.25em;
  letter-spacing: .1em;
}

.dl-table .row dt {
  position: relative;
  width: 15%;
  color: #949cb6;
  border-bottom: 1px solid #dcdcdc;
  font-weight: 700;
}
.dl-table .row dt:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 3px;
  height: 70%;
  background: #949cb6;
}

.dl-table .row dd {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-bottom: 1px solid #dcdcdc;
}

.works-sub{ margin: 5em auto 6em; }
.works-sub li .center{
  margin-bottom: .75em;
  font-size: 1.25em;
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  line-height: 1;
}
.works-sub li figure{
  max-height: 700px;
  overflow: scroll;
  border: solid 2px #333;
  box-shadow: 4px 5px 0px #949cb6;
}
.works-sub li figure img{ width: 100%; }
.works-sub-pc{ width: 58%; }
.works-sub-sp{ width: 35%; }


/*ブログ詳細*/
#blog-con .main-box p{ margin:1.75em 0; line-height: 1.6; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  .works-list li{ width: 31%; margin-right: 3.5% }
  .works-list li:nth-child(3n){ margin-right: 0; }
  .works-list li:nth-child(n+4){ margin-top: 5%; }

  .category-btn-list li:nth-child(3n){ margin-right:0; }
  .category-btn-list li:nth-child(n+4){ margin-top:2%; }
}

/* 821以上(PC) */
@media screen and (min-width: 821px) {

}

/* ================================================================
  タブレット
=================================================================== */


@media screen and (max-width: 820px) {
  .page-ttl{ padding: 3em 0 2em; }

  main .main-box{ width: 100%; }
  main .sidebar{ width: 100%; margin-top: 3em; }

  .dl-table .row dt{ width: 20%; }


  .works-sub{ width: 90%; }

}


/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  main { margin-top: 65px; margin-bottom: 50px }

  .page-ttl { padding: 2.5em 0 1.5em; }
  .page-ttl .jp{ font-size: 1em; }

  .btn-list { margin-bottom: 4em; }
  .btn-list .btn{ width: 100%; }
  .btn-list .btn + .btn{ margin-left: 0; margin-top:1em; }
  .btn-list .btn a{ width: 90%; }

  .works-list{ width: 95%; margin:auto; }
  .works-list li{ width: 100%; margin-right:0; }
  .works-list li+li{ margin-top: 3em; }
  /*.works-list li:nth-child(2n){ margin-right: 0; }
  .works-list li:nth-child(n+3){ margin-top: 8%; }*/
  .works-list li .category-name{ font-size:11px; }
  .works-img{ width: 100%;}

  .works-sub { width: 95%; margin: 3em auto 4em; }
  .works-sub li figure{ max-height: 500px; }
  .works-sub-pc { width: 100%; }
  .works-sub-sp { width: 100%; margin-top: 2em; }

  .dl-table { margin-top: 2.5em; } 
  .dl-table .row { display:block; }
  .dl-table .row dt {
    width:100%;
    padding: .7em;
    font-size: 1.1em;
  }
  .dl-table .row dd {
    width:100%;
    margin-left: 0;
    border-bottom: none;
  }

  .blog-list li a{ padding: 1.25em; }
  .blog-list li .category {
    width: 8em;
    padding: 6px;
    font-size: 12px;
  }
  .blog-list li .title{ display: block; }

  .category-btn-list { width: 100%; margin: 0 auto 4em; }
  .category-btn-list li { width: 48%; margin-right: 4%; }
  .category-btn-list li:nth-child(2n){ margin-right: 0; }
  .category-btn-list li:nth-child(n+3){ margin-top:4%; }
  .category-btn-list li.btn a{ font-size: .85em; }
  .category-btn-list li.btn a::after { width: 5px; height: 5px; right: 12px; }

  .page-nav li.nav-left{ order:1; width: 100%; }
  .page-nav li.nav-right{ order:2; width: 100%; margin-top: .5em; }
  .page-nav li.nav-top {
    order: 3;
    width: 60%;
    margin: 1em auto 0;
  }
  .page-nav li.nav-left a,.page-nav li.nav-right a{ padding:1em 2em!important; }
  
}