@charset "UTF-8";

:root {
  /* Dressカラー */
  --dress-main: 11,200,192; /* #0BC8C0 */
  --dress-sub1: 244,75,57; /* #F44B39 */
  --dress-sub2: 254,253,20; /* #FEFD14 */
  --dress-sub4: 255,255,255; /* #FFFFFF */
  --dress-sub5: 34,34,34; /* #222222 */
}

/* ----------------------------------------
追加スタイル
---------------------------------------- */
sup {
  padding-left: .25em;
  font-size: .75rem;
  vertical-align: top;
  font-weight: normal;
}
sub {
  padding-left: .25em;
  font-size: .75rem;
  vertical-align: bottom;
  font-weight: normal;
}
.marker {
  background: linear-gradient(transparent 60%, rgb(var(--dress-sub2)) 60%, rgb(var(--dress-sub2)) 96%, transparent 96%);
}

/* ----------------------------------------
デフォルトスタイル調整
---------------------------------------- */
/* 見出し */
.c-page_title,
.c-title,
.c-large_headline {
  font-feature-settings: "palt" 1;
  letter-spacing: 0.03em;
}
.a-billboard .c-lead,
.a-billboard .c-enclosure {
  font-feature-settings: "palt" 1;
  letter-spacing: 0.06em;
}

/* 文字サイズ変更時 */
.d-largest_font,
.d-larger_font {
  line-height:inherit;
}

/* アイコンフォント調整 */
[class^=bindicon-],
[class*=" bindicon-"] {
  display: inline-block;
  margin-right: 0;
  margin-left: 0;
  padding-left: .25em;
  padding-right: .25em;
  vertical-align: middle;
  font-size: 1.1em;
}

/* 左右違いブロック：スマホ1段の余白追加 */
@media only screen and (max-width: 640px) {
  .b-both_diff.c-sp-space_narrow .column.-col4 + .column.-col8,
  .b-both_diff.c-sp-space_narrow .column.-col8 + .column.-col4 {
    margin-top: 1%;
  }
  .b-both_diff.c-sp-space_normal .column.-col4 + .column.-col8,
  .b-both_diff.c-sp-space_normal .column.-col8 + .column.-col4 {
    margin-top: 2%;
  }
  .b-both_diff.c-sp-space_wide .column.-col4 + .column.-col8,
  .b-both_diff.c-sp-space_wide .column.-col8 + .column.-col4 {
    margin-top: 3%;
  }
}

.b-headlines .-col1>.column:first-of-type {
  margin-top: 0;
}

/* 空カラムを非表示 */
.g-column .column:empty {
  overflow: hidden !important;
  margin-top: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  border: none !important;
  background: none !important;
}

/* パンくず */
.c-breadcrumb li:not(:last-child)::after {
  content: "\203A";
  padding-left: 5px;
}

/* ----------------------------------------
テーブル式リスト
---------------------------------------- */
/* カスタムタグでthead使う */
.c-list_table thead th {
  text-align: center;
}
@media screen and (max-width: 641px) {
  .c-list_table thead {
    display: none;
  }
  .c-list_table tbody td::before {
    content: attr(data-thead);
    display: block;
    color: inherit;
    font-size: .85em;
  }
}

/* ----------------------------------------
ホーム ビルボード
---------------------------------------- */
/* 階層：ノイズ→三角→ライト→グラデ */
.a-billboard.cssskin-home_billboard  {
  background-image: url(../img/home/texture.png), url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20900%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22bggradient_01%22%20x1%3D%2275.14%22%20y1%3D%221030.15%22%20x2%3D%221155.14%22%20y2%3D%22406.62%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%2F%3E%20%3Cstop%20offset%3D%220.3%22%20stop-color%3D%22%23cfd6d8%22%2F%3E%20%3Cstop%20offset%3D%220.9%22%20stop-color%3D%22%230bc8c0%22%2F%3E%20%3C%2FlinearGradient%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22bgtriangle%22%3E%20%3Cpolygon%20points%3D%22720%200%200%20900%201440%20900%20720%200%22%20style%3D%22fill%3Aurl(%23bggradient_01)%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E'), url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22bg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20900%22%3E%3Cdefs%3E%20%3ClinearGradient%20id%3D%22bggradient_02%22%20x1%3D%221004.86%22%20y1%3D%22493.38%22%20x2%3D%221544.86%22%20y2%3D%22181.62%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220.1%22%2F%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%20%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22bggradient_03%22%20x1%3D%221004.86%22%20y1%3D%22493.38%22%20x2%3D%221544.86%22%20y2%3D%22181.62%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220.1%22%2F%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%20%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22bglight%22%3E%20%3Cpolygon%20points%3D%221440%200%201440%20900%20720%200%201440%200%22%20style%3D%22fill%3Aurl(%23bggradient_02)%22%2F%3E%20%3Cpolygon%20points%3D%220%200%200%20900%20720%200%200%200%22%20style%3D%22fill%3Aurl(%23bggradient_03)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'), linear-gradient(to right,#cfd6d8,#19bcb0);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto, cover, cover, auto;
  background-blend-mode: color-burn, normal, normal, normal;
  background-position: center, center bottom, center bottom, center;
}

/* ----------------------------------------
テンプレートプレビュー
---------------------------------------- */
.templatecontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.templatecolumn {
  flex: auto 0 1;
}
.-templatecol1 .templatecolumn {
  flex-basis: 100%;
}
.-templatecol2 .templatecolumn {
  flex-basis: calc( 100% / 2 );
}
.-templatecol3 .templatecolumn {
  flex-basis: calc( 100% / 3 );
}
.-templatecol4 .templatecolumn {
  flex-basis: calc( 100% / 4 );
}
@media screen and (max-width: 641px) {
  .-templatecol2 .templatecolumn,
  .-templatecol3 .templatecolumn,
  .-templatecol4 .templatecolumn {
    flex-basis: 100%;
  }
}

#templateList {
  font-size: 0;
  position: relative;
}
#templateList .column,
.templatecolumn {
  font-size: 1rem;
  padding: 2%;
  margin: 0;
  opacity: 0;
  vertical-align: text-top;
  float: none;
  display: none;
  -webkit-transition: 0.3s ease-out;
  -ms-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
#templateList .column.selected,
.templatecolumn {
  display: inline-block;
  animation-name: fade;
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-delay: 0.3s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
} 

@keyframes fade {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}
.templatepreview {
  position: relative;
  width: 100%;
}

/* サイト単位 */
.template_screen {
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
}
.template_screen + .template_screen {
  display: none;
}

/* リンク */
a.template_link {
  position: relative;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  border: none;
  text-decoration: none;
}

/* ディスプレイ単位 */
.template_img {
  margin-left: auto;
  margin-right: auto;
}

/* ディスプレイ：グループ化 */
.templatepreview-group .template_link {
  display: block;
}
.templatepreview-group .template_link .template_img {
  width: 90%;
  margin-left: 0;
}
.templatepreview-group .template_link .template_img + .template_img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
}

/* ディスプレイ：PCのみ */
.templatepreview-pc .template_link {
  width: 100%;
}

/* ディスプレイ：スマホのみ */
.templatepreview-sp .template_link {
  width: 29.25%;
}

/* ブラウザ画面 */
.screen-pc {
  --browserbar-height: 15px;

  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 70%;
  background-color: #222;
  box-shadow: 0 0 1px rgba(0,0,0,.2);
  border-radius: 3px 3px 0 0;
}
.screen-pc img {
  position: absolute;
  top: var(--browserbar-height);
  left: 0;
  width: 100%;
  height: auto;
}
.screen-pc::before {
  content: "";
  position: absolute;
  top: calc( var(--browserbar-height) / 3 );
  left: calc( var(--browserbar-height) / 3 );
  display: block;
  width: calc( var(--browserbar-height) / 3 );
  height: calc( var(--browserbar-height) / 3 );
  border-radius: 50%;
  background-color: #fff;
}

/* スマホ画面 */
.screen-sp {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 200%;
  background-color: #222;
  border-radius: 10px;
  z-index: 1;
}
.screen-sp img {
  position: absolute;
  top: 4%;
  left: 2px;
  width: calc( 100% - 4px );
  height: 92%;
  z-index: 1;
  border-radius: 4px;
  object-fit: cover;
  object-position: center top;
}

/* ボタン */
.template_btn {
  display: none;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .25em 1em;
  background-color: rgba(0,0,0,.8);
  color: #fff;
  text-align: center;
}
.template_screen:hover .template_btn {
  display: block;
}

/* ページ構成 */
.template_pagetype {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.template_pagetype li {
  padding: .25em .75em;
  background-color: rgb(var(--dress-sub4));
  border: 1px solid rgb(var(--dress-sub5));
  cursor: pointer;
  color: rgb(var(--dress-sub5));
  line-height: 1.4;
  font-size: .85em;
  transition: all .2s ease-out;
}
.template_pagetype li:hover {
  background-color: rgba(var(--dress-sub5),.15);
}
.template_pagetype li.selected {
  background-color: rgb(var(--dress-sub5));
  color: rgb(var(--dress-sub4));
}
.template_pagetype li:first-child {
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
}
.template_pagetype li:last-child {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
}

/* カラーチップ */
.templatepreview_colorchip {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 6px;
  width: 100%;
  /*height: 14px;*/
  margin-top: 0.5rem;
  text-align: center;
  vertical-align: top;
}
.templatepreview_colorchip li {
  display: inline-block;
  overflow:hidden;
  width: 12px;
  height: 12px;
  background-color: #999;
  border-radius: 50%;
  border: none;
  box-shadow: inset 0 0 1px rgba(0,0,0,.4);
  vertical-align: middle;
  cursor: pointer;
}
.templatepreview_colorchip li:hover {
  opacity: .7;
}
.templatepreview_colorchip li.selected {
  width: 14px;
  height: 14px;
}
@media screen and (max-width: 641px) {
  .templatepreview_colorchip li {
    width: 22px;
    height: 22px;
  }
  .templatepreview_colorchip li.selected {
    width: 24px;
    height: 24px;
  }
}

/* タグ - 新着 */
.templatepreview .cat-new {
  position: absolute;
  top: -1.5em;
  left: -1em;
  z-index: 5;
  display: block;
  width: 3.5em;
  height: 3.5em;
  background-color: rgb(var(--dress-sub2));
  border-radius: 1000px;
  text-align: center;
  font-size: .86em;
  color: rgb(var(--dress-sub5));
  font-weight: 500;
  line-height: 3.5;
}
.templatepreview .cat-new::before {
  content: 'NEW';
}

/* タグ - 有料 */
.templatepreview .cat-sitebox {
  position: absolute;
  z-index: 5;
  top: calc( -1.5em - 2px );
  right: 0;
  display: block;
  padding: .25em .5em;
  background-color: rgb(var(--dress-sub4));
  border: 1px solid;
  border-radius: 2px;
  font-size: .86em;
  color: rgb(var(--dress-sub1));
  line-height: 1;
}
.templatepreview .cat-sitebox::before {
  content: '有料';
}

/* ----------------------------------------
登録フォーム
---------------------------------------- */
.signupForm {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}
.signupForm .formfield {
  width: 98%;
  margin: 0 auto;
}
.signupForm .textfield {
  display: flex;
  column-gap: .5em;
  margin-top: 1em;
}
.signupForm .textfield input[type=text],
.signupForm .textfield input[type=email],
.signupForm .textfield input[type=password] {
  display: block;
  width: 100%;
  padding: .5em;
  border: none;
  background-color: #fff;
  background-clip: padding-box;
  font-size: 1em;
  line-height: 2;
  text-align: left;
  box-shadow: none;
  transition: background-color .3s linear;
}
.signupForm .textfield input[type=text][disabled],
.signupForm .textfield input[type=email][disabled],
.signupForm .textfield input[type=password][disabled] {
  background: #dddddd;
  box-shadow: none;
}
.signupForm .textfield input[type=text]:focus,
.signupForm .textfield input[type=email]:focus,
.signupForm .textfield input[type=password]:focus {
  box-shadow: 0 0 3px 1px rgba(255,255,255,.6);
  outline: none;
}
.signupForm .checkbox {
  margin-top: 1em;
}
.signupForm .checkbox input[type=checkbox] {
  accent-color: #222;
}
.signupForm .checkbox a {
  text-decoration: underline;
}
.signupForm .inputHelper {
  font-size: .86em;
}
.signupForm #signupError:not(:empty) {
  background-color: #fff;
  margin-top: .5em;
  padding: .5em;
  font-size: .86em;
  color: #c00;
  line-height: 1.6;
}
.signupForm .signupbutton {
  margin-top: .5em;
  text-align: center;
}

/* ----------------------------------------
テーブル式リスト
---------------------------------------- */

/* カスタムタグでthead使う */
/* .c-list_table thead th {
  text-align: center;
}

@media screen and (max-width: 641px) {
  .c-list_table thead {
    display: none;
  }

  .c-list_table tbody td::before {
    content: attr(data-thead);
    display: block;
    color: inherit;
    font-size: 0.85em;
  }
} */

/*　モノクロのテーブル BiNDでできないtableの設定です。文字サイズ行間・余白は、サイトDressに記載。　*/
.table_mono thead .th1st {
  background-color: #282828;
  color: #ffffff;
  font-weight: bold;
}

@media screen and (max-width: 641px) {
  .table_mono thead .th1st {
    display: none;
  }
}

.table_mono tbody th,
.table_mono tbody td {
  color: #fff;
  background-color: #6a6e76;
}

.table_mono tbody td,
.table_mono tfoot td {
  background-color: #ffffff;
  color: rgba(29, 29, 31, 0.6);
}

/*table 主に１列めが濃いグレーのセル用*/
.table_mono tbody .th1st {
  background-color: #6a6e76;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
}

@media screen and (max-width: 641px) {
  .table_mono tbody td.th1st::first-line {
    font-size: 13px;
  }

  .table_mono tbody td.th1st {
    background-color: #ffffff;
    color: rgba(29, 29, 31, 0.6);
    font-weight: normal;
  }
}

/* ２列めをちょっと薄いグレーのセルにしたい時用。予約機能ページの予約タイプで使ってます */
.table_mono tbody .th2nd {
  background-color: #e8e8ed;
  color: #1d1d1d;
  font-weight: bold;
  text-align: left;
}

@media screen and (max-width: 641px) {
  .table_mono thead {
    display: table;
    width: 100%;
  }
}

/*table プランなど最初の１セル目がないtable用*/
.table_mono_none {
  border-top: 0 none !important;
  border-left: 0 none !important;
  border-bottom: 0 none !important;
}

td.table_mono_none {
  background-color: transparent !important;
}

/*table プランのボタンの上の薄いborder*/
.table_mono tbody.tbody_plan {
  border-bottom: 2px solid #f8f8fa;
}

/*table スマホ用のCVボタンは非表示*/
@media screen and (max-width: 641px) {
  .tfoot_plan_btn {
    display: none;
  }
}

/* フォーム部分背景 */

div#bk145311 {
    background-color: #0bc8c0;
    background-image: url(https://bindup.jp/lp/ad04/_src/30497/bg_footer_cv.png);
    background-position: center center;
    background-size: cover
}

div#bk145311 {
    background-color: #0bc8c0;
    background-image: url(https://bindup.jp/lp/ad04/_src/30497/bg_footer_cv.webp);
    background-position: center center;
    background-size: cover
}
#imgsrc30495_1 {
    width: 145px;
}
a.register {
    position: relative !important;
    z-index: 1 !important;
    display: inline-block !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    padding: .5em 1em !important;
    background: #fff !important;
    border: 2px solid #eb2a46 !important;
    border-radius: 1000px !important;
    color: #fff !important;
    width: 540px !important;
    max-width: 100% !important;
    font-size: 1.7em !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: all .2s !important;
}
a.register::before {
    top: 0 !important;
    height: 50% !important;
    background-color: #eb2a46 !important;
}
a.register::before, a.register::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
    display: block !important;
    transition: all .4s !important;
}
a.register::after {
    bottom: 0 !important;
    height: 50% !important;
    background-color: #eb2a46 !important;
}
a.register::before, a.register::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
    display: block !important;
    transition: all .4s !important;
}
#bk145311>div {
    margin: 0 auto;
    max-width: 840px
}

#bk145311>div {
    padding-left: 30px;
    padding-top: 100px;
    padding-right: 30px;
    padding-bottom: 120px
}

/* 追加スタイル */
.c-list_table-top {
  border-collapse: separate;
  border-spacing: 16px; /* セル間の余白 */
  display: flex;        /* 横並びにする */
  justify-content: flex-start;
  align-items: stretch;
  margin: 20px 0;
  border: none;
}

.c-list_table-top tbody {
  display: flex;
  width: 100%;
  gap:10px;
}

.c-list_table-top tr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  min-width: 120px;
  text-align: center;
}

.c-list_table-top th, 
.c-list_table-top td {
  border: none;
  padding: 4px 0;
}

.c-list_table-top th {
  font-weight: normal;
  font-size: 14px;
  color: #333;
}

.c-list_table-top td p {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.c-list_table-top td span {
  font-size: 14px;
  font-weight: normal;
  color: #333;
}

/* 強調 */
.c-list_table-top td p {
  font-size: 26px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}
.c-list_table-top:first-child td{
  width: 2vw;
}
/* スマホ対応: 2カラム */
@media (max-width: 768px) {
  .c-list_table-top tbody {
    flex-wrap: wrap;
  }
}