@charset "utf-8";

/** ***************************************************************************
 * タイトル
 * ************************************************************************* */

/** ***************************************************************************
 * 1
 */

.title-style-1 {
  margin-bottom: 20px;
  line-height: 1.4;
  letter-spacing: 2px;
  font-size: 1.75em;
  font-weight: 700;
}

.title-style-1::before {
  content: attr(data-en);
  margin-bottom: 5px;
  color: #f5ab1b;
  line-height: 1.2;
  font-size: 0.5em;
  display: block;
}

.title-style-1 + * {
  margin-top: 0;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .title-style-1 {
    margin-bottom: 40px;
    font-size: 2.5em;
  }

}

/** ***************************************************************************
 * 2
 */

.title-style-2 {
  margin-bottom: 15px;
  padding: 0.25em 0 0.25em 0.5em;
  line-height: 1.4;
  letter-spacing: 2px;
  font-size: 1.25em;
  font-weight: 700;
  border-left: 4px solid #f7b222;
}

.title-style-2 + * {
  margin-top: 0;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .title-style-2 {
    margin-bottom: 30px;
    font-size: 1.875em;
  }

}

/** ***************************************************************************
 * 3
 */

.title-style-3 {
  margin-bottom: 15px;
  padding: 0.5em 0.75em 0.5em 45px;
  line-height: 1.4;
  font-size: 1.125em;
  font-weight: 700;
  border-radius: 8px;
  background-color: #f4f4f4;
  position: relative;
}

.title-style-3::before {
  content: '';
  width: 20px;
  border: 2px solid #f7b222;
  position: absolute;
  top: calc(50% - 2px);
  left: 10px;
}

.title-style-3 + * {
  margin-top: 0;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .title-style-3 {
    margin-bottom: 20px;
    padding: 0.5em 0.5em 0.5em 55px;
    letter-spacing: 2px;
    font-size: 1.25em;
  }

  .title-style-3::before {
    width: 30px;
  }

}

/** ***************************************************************************
 * 4
 */

.title-style-4 {
  margin-bottom: 15px;
  padding-bottom: 5px;
  line-height: 1.4;
  font-size: 1.125em;
  font-weight: 700;
  border-bottom: 3px solid #f7b222;
}

.title-style-4 + * {
  margin-top: 0;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .title-style-4 {
    margin-bottom: 30px;
    letter-spacing: 2px;
    font-size: 1.5em;
  }

}

/** ***************************************************************************
 * 5
 */

.title-style-5 {
  margin-bottom: 15px;
  padding-left: 45px;
  line-height: 1.4;
  font-size: 1.125em;
  font-weight: 700;
  position: relative;
}

.title-style-5::before {
  content: '';
  width: 20px;
  border: 2px solid #f7b222;
  position: absolute;
  top: calc(50% - 2px);
  left: 10px;
}

.title-style-5 + * {
  margin-top: 0;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .title-style-5 {
    padding-left: 55px;
    letter-spacing: 2px;
    font-size: 1.25em;
  }

  .title-style-5::before {
    width: 30px;
  }

}

/** ***************************************************************************
 * テキスト
 * ************************************************************************* */

.strong-style-1 {
  font-size: 1.125em;
  font-weight: 700;
}

.strong-style-2 {
  color: #f00;
  font-size: 1.125em;
  font-weight: 700;
}

.strong-style-3 {
  font-weight: 700;
}

.strong-style-4 {
  color: #f5ab1b;
  font-weight: 700;
}

.underline-style-1 {
  padding-left: 0.125em;
  padding-right: 0.125em;
  font-style: normal;
  background: linear-gradient(transparent 65%, #fdd000 65%, #fdd000 100%);
}

.marker-style-1 {
  padding-left: 0.125em;
  padding-right: 0.125em;
  font-style: normal;
  background: rgba(253, 208, 0, 0.6);
}

.tel-style-1 img {
  margin-right: 0.25em;
  vertical-align: baseline;
}

.tel-style-1 .number {
  color: inherit;
  line-height: 1;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 1.833em;
  font-weight: 700;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .strong-style-1 {
    font-size: 1.25em;
  }

}

/** ***************************************************************************
 * アイコン
 * ************************************************************************* */

a[target="_blank"].text-link:not(.button-style)::after {
  content: '';
  width: 1em;
  height: 1em;
  margin-left: 0.25em;
  background: url("../_image/_common/icon-blank.png") no-repeat;
  background-size: 100% 100%;
  vertical-align: middle;
  display: inline-block;
}

/** ***************************************************************************
 * ボタン
 * ************************************************************************* */

.button-style {
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 0;
  font: inherit;
  text-decoration: none !important;
  vertical-align: middle;
  display: inline-block;
  background-color: transparent;
  box-sizing: border-box;
  -webkit-appearance: none;
          appearance: none;
  position: relative;
  z-index: 1;
}

.button-style::-webkit-search-decoration {
  display: none;
}

.button-style::focus {
  outline-offset: -2px;
}

/** ***************************************************************************
 * 1
 */

.button-style-1 {
  min-height: 3.8em;
  padding: 0.5em 3em;
  color: #fff !important;
  line-height: 1.4;
  font-weight: 500;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  position: relative;
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.15));
  transition: background-color 0.3s ease-in-out 0.0s;
  background-color: #333;
}

.button-style-1:hover {
  background-color: #4a4a4a;
}

.button-style-1::after {
  content: '\e902';
  color: inherit;
  line-height: 1;
  font-family: icomoon;
  font-size: 1em;
  position: absolute;
  top: calc(50% - 0.375em);
  right: 1em;
  transition: transform 0.15s ease-in-out 0.0s;
}

.button-style-1:hover::after {
  transform: translate(5px, 0);
}

/* a タグで href が無い場合 */
a.button-style-1:not([href]) {
  cursor: default;
  background-color: #ccc !important;
}

a.button-style-1:not([href])::after {
  transform: none;
}

/** ***************************************************************************
 * 戻る
 */

.button-style-back-1 {
  min-height: 3.8em;
  padding: 0.5em 3em;
  color: #fff !important;
  line-height: 1.4;
  font-weight: 500;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.15));
  transition: background-color 0.3s ease-in-out 0.0s;
  background-color: #333;
  position: relative;
}

.button-style-back-1:hover {
  background-color: #4a4a4a;
}

.button-style-back-1::after {
  content: '\e902';
  color: inherit;
  line-height: 1;
  font-family: icomoon;
  font-size: 1em;
  transform-origin:  center center;
  position: absolute;
  top: calc(50% - 0.5em);
  left: 1em;
  transition: transform 0.15s ease-in-out 0.0s;
  transform: rotate(180deg);
}

.button-style-back-1:hover::after {
  transform: rotate(180deg) translate(5px, 0);
}

/** ***************************************************************************
 * お問い合わせ
 */

.button-mail-1 {
  min-height: 3.8em;
  padding: 0.5em 1em;
  color: #fff !important;
  line-height: 1.4;
  font-size: 1.143em;
  font-weight: 500;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease-in-out 0.0s;
  background-color: #333;
  backface-visibility: hidden;
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.15));
}

.button-mail-1:hover {
  background-color: #4a4a4a;
}

.button-mail-1 i.icon {
  margin-right: 10px;
  font-size: 0;
  transform-origin: center center;
  transition: transform 0.15s ease-in-out 0.0s;
}

.button-mail-1:hover i.icon {
  transform: rotate(-15deg);
}

.button-mail-1 i.icon img {
  opacity: 1;
}

/** ***************************************************************************
 * レイアウト
 * ************************************************************************* */

/** ***************************************************************************
 * フレーム 1
 */

.layout-frame-1 {
  padding: 30px 20px;
  border-radius: 14px;
  background-color: #fff;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .layout-frame-1 {
    padding: 4.6875%;
    border-radius: 20px;
  }

}

/** ***************************************************************************
 * 2カラム
 */

.layout-column-2 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.layout-column-2 > * {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.layout-column-2 .order-2 {
  order: 2;
}

.layout-column-2 > * ~ * {
  margin-top: 30px;
}

.layout-column-2 .column ~ .column {
  margin-top: 20px;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .layout-column-2 {
    max-width: none;
    margin-left: -1.45%;
    margin-right: -1.45%;
    margin-bottom: -2.9%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
  }

  .layout-column-2 > * {
    width: calc(100% / 2 - 2.9%);
    margin-left: 1.45%;
    margin-right: 1.45%;
    margin-bottom: 2.9%;
  }

  .layout-column-2 > * ~ * {
    margin-top: 0;
  }

  .layout-column-2 .column ~ .column {
    margin-top: 30px;
  }

}

/** ***************************************************************************
 * 3カラム
 */

.layout-column-3 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.layout-column-3 .order-2 {
  order: 2;
}

.layout-column-3 .order-3 {
  order: 3;
}

.layout-column-3 > * ~ * {
  margin-top: 20px;
}

.layout-column-3 .column ~ .column {
  margin-top: 20px;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .layout-column-3 {
    max-width: none;
    margin-left: -1.45%;
    margin-right: -1.45%;
    margin-bottom: -2.9%;
    overflow: hidden;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
  }

  .layout-column-3 > * {
    width: calc(100% / 3 - 2.9%);
    margin-left: 1.45%;
    margin-right: 1.45%;
    margin-bottom: 2.9%;
  }

  .layout-column-3 > * ~ * {
    margin-top: 0;
  }

  .layout-column-3 .column ~ .column {
    margin-top: 30px;
  }

}

/** ***************************************************************************
 * sp 2カラム / pc 3カラム
 */

.layout-column-sp2-pc3 {
  max-width: none;
  margin-left: -2%;
  margin-right: -2%;
  margin-bottom: -6%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

.layout-column-sp2-pc3 > * {
  width: calc(100% / 2);
  margin-bottom: 6%;
  padding-left: 2%;
  padding-right: 2%;
}

.layout-column-sp2-pc3 .order-2 {
  order: 2;
}

.layout-column-sp2-pc3 .order-3 {
  order: 3;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .layout-column-sp2-pc3 {
    margin-bottom: -4%;
  }

  .layout-column-sp2-pc3 > * {
    width: calc(100% / 3);
    margin-bottom: 4%;
  }

}

/** ***************************************************************************
 * sp 2カラム / pc 4カラム
 */

.layout-column-sp2-pc4 {
  max-width: none;
  margin-left: -1.725%;
  margin-right: -1.725%;
  margin-bottom: -3.449%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.layout-column-sp2-pc4 > * {
  width: calc(100% / 2);
  margin-bottom: 3.333%;
  padding-left: 1.667%;
  padding-right: 1.667%;
}

.layout-column-sp2-pc4 .order-2 {
  order: 2;
}

.layout-column-sp2-pc4 .order-3 {
  order: 3;
}

.layout-column-sp2-pc4 .order-4 {
  order: 4;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .layout-column-sp2-pc4 > * {
    width: calc(100% / 4);
  }

}

/** ***************************************************************************
 * リスト
 * ************************************************************************* */

/** ***************************************************************************
 * ul
 */

.ul-style-1,
.ul-style-1 > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ul-style-1 > li {
  padding-left: 1.875em;
  position: relative;
}

.ul-style-1 > li:not(:first-child) {
  margin-top: 0.5em;
}

.ul-style-1 > li::before {
  content: '';
  border-radius: 100%;
  border: 3px solid;
  position: absolute;
  top: 0.625em;
  left: 0.75em;
}

.ul-style-1 + *,
* + .ul-style-1 {
  margin-top: 1.25em;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .ul-style-1 + *,
  * + .ul-style-1 {
    margin-top: 1.5em;
  }

}

/** ***************************************************************************
 * ol
 */

.ol-style-1,
.ol-style-1 > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ol-style-1 {
  counter-reset: number;
}

.ol-style-1 > li {
  padding-left: 1.375em;
  counter-increment: number;
  position: relative;
}

.ol-style-1 > li:not(:first-child) {
  margin-top: 0.5em;
}

.ol-style-1 > li::before {
  content: counter(number) '.';
  line-height: 1;
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-size: 1.125em;
  font-weight: inherit;
  position: absolute;
  top: 0.25em;
  left: 0;
}

.ol-style-1 + *,
* + .ol-style-1 {
  margin-top: 1.25em;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  .ol-style-1 + *,
  * + .ol-style-1 {
    margin-top: 1.5em;
  }

}

/** ***************************************************************************
 * サービス紹介 一覧
 */

ul.service-list,
ul.service-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.service-list {
  max-width: none;
  margin: -10px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

ul.service-list li {
  width: 50%;
  max-width: 260px;
  padding: 10px;
}

ul.service-list li a {
  height: 100%;
  padding: 20px 15px 15px;
  color: inherit;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  ul.service-list {
    font-size: 0.9375em;
  }

}

/** ---------------------------------------------------------------------------
 * タイトル
 */

ul.service-list li .title {
  min-height: 2.8em;
}

/** ---------------------------------------------------------------------------
 * アイコン
 */

ul.service-list li div.icon {
  margin-bottom: 10px;
  filter: brightness(0%);
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:901px) {

  ul.service-list li div.icon {
    margin-top: 16.67%;
    margin-bottom: 20px;
  }

}

/** ---------------------------------------------------------------------------
 * 背景
 */

ul.service-list li a::after {
  content: '';
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: url("../_image/_common/image-frame-2.png") center center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.025));
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transition:
    filter 0.3s ease-in-out 0.0s,
    opacity 0.3s ease-in-out 0.0s;
  opacity: 0.7;
}

ul.service-list li a:hover::after {
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.15));
  opacity: 0.9;
}

/** ---------------------------------------------------------------------------
 * ホームページ制作
 */

ul.service-list li.home-page {
  width: 100%;
  max-width: 520px;
}

ul.service-list li.home-page div.icon {
  margin-top: 0;
}

ul.service-list li.home-page a::after {
  background-image: url("../_image/_common/image-frame-1.png");
}

/** ***************************************************************************
 * テーブル
 * ************************************************************************* */

.table-style-1 {
  border-collapse: collapse;
}

.table-style-1 > tbody > tr > th {
  padding-left: 1em;
  padding-right: 1em;
  border: 1px solid #cecece;
  background-color: #f4f4f4;
  text-align: center;
}

.table-style-1 > tbody > tr > td {
  padding-left: 1em;
  padding-right: 1em;
  border: 1px solid #cecece;
}

.table-style-1 + *,
* + .table-style-1 {
  margin-top: 1.5em;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (max-width:900px) {

  .table-style-1 > tbody {
    display: block;
  }

  .table-style-1 > tbody > tr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .table-style-1 > tbody > tr ~ tr {
    margin-top: 15px;
  }

  .table-style-1 > tbody > tr > th {
    width: 100%;
    padding: 10px 1em;
    text-align: left;
  }

  .table-style-1 > tbody > tr > td {
    width: 100%;
    margin-top: -1px;
    padding: 10px 1em;
  }

  .table-style-1 + *,
  * + .table-style-1 {
    margin-top: 1.25em;
  }

}

/** ***************************************************************************
 * ページャー
 * ************************************************************************* */

/** ***************************************************************************
 * 一覧ページ
 */

ul.pager-archive,
ul.pager-archive li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.pager-archive {
  font-size: 0.875em;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul.pager-archive li {
  margin: 3px;
  text-align: center;
}

ul.pager-archive li a {
  min-width: 2.25em;
  padding: 0.125em 0.5em 0.25em;
  color: inherit;
  text-decoration: none;
  display: block;
  transition:
    color 0.3s ease-in-out 0.0s,
    border 0.3s ease-in-out 0.0s,
    background-color 0.3s ease-in-out 0.0s;
}

ul.pager-archive li.num a {
  border: 1px solid #cecece;
  background-color: #f4f4f4;
}

ul.pager-archive li.num a:hover {
  background-color: #fff;
}

ul.pager-archive li.num.current a {
  color: #fff;
  border: 1px solid #ec9600;
  background-color: #ec9600;
}

ul.pager-archive li.prev,
ul.pager-archive li.next {
  flex-shrink: 0;
}

ul.pager-archive li.prev a,
ul.pager-archive li.next a {
  visibility: hidden;
}

ul.pager-archive li.prev a[href],
ul.pager-archive li.next a[href] {
  color: #ec9600;
  visibility: visible;
}

/** ***************************************************************************
 * 詳細ページ
 */

ul.pager-single,
ul.pager-single li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.pager-single {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.875em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

ul.pager-single li a {
  color: #fff;
  text-decoration: none;
}

ul.pager-single li.prev a,
ul.pager-single li.next a {
  width: 3.5em;
  height: 3.5em;
  border-radius: 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease-in-out 0.0s;
  background-color: rgba(0, 0, 0, 0.125);
}

ul.pager-single li.prev a[href],
ul.pager-single li.next a[href] {
  background-color: #333;
}

ul.pager-single li.prev a[href]:hover,
ul.pager-single li.next a[href]:hover {
  background-color: #4a4a4a;
}

ul.pager-single li.prev a::before,
ul.pager-single li.next a::before {
  content: '\e902';
  line-height: 1;
  font-size: 1.25em;
  font-family: icomoon;
}

ul.pager-single li.prev a::before {
  margin-top: -0.125em;
  margin-left: -0.125em;
  transform-origin: center center;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

ul.pager-single li.next a::before {
  margin-top: 0.125em;
  margin-left: 0.125em;
}

/** ***************************************************************************
 * 表示／非表示
 * ************************************************************************* */

p + [sp] + [pc] {
  margin-top: 1.5em;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (max-width:900px) {

  [pc] {
    display: none !important;
  }

}

@media print, screen and (min-width:901px) {

  [sp] {
    display: none !important;
  }

}