@charset "utf-8";
/* 2015.01.05 R.Yoshikawa */
/**-----------------------------------------------
LESS
-----------------------------------------------**/
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mplusrounded1c/v15/VdGBAYIAV6gnpUpoWwNkYvrugw9RuM1y55sK.ttf) format('truetype');
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mplusrounded1c/v15/VdGBAYIAV6gnpUpoWwNkYvrugw9RuM064ZsK.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zAkA.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xK3dSBYKcSV-LCoeQqfX1RYOo3aPw.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rAkA.ttf) format('truetype');
}
.font_Awesome {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
}
.a_text a {
  color: #000000;
  text-decoration: none;
}
.a_text a:hover {
  opacity: 0.6;
}
.btn_common {
  display: inline-block;
  position: relative;
  padding: 12px 60px 12px 50px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  background-color: #0abab5;
  border-radius: 50px;
  cursor: pointer;
  transition: 0.3s;
}
@media screen and (max-width: 480px) {
  .btn_common {
    padding: 12px 40px 12px 30px;
  }
}
.btn_common:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.btn_common:hover {
  opacity: 0.6;
}
.text_webkit {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.img_frame {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 1;
}
.img_frame:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0.8;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border: 7px solid #C6E5E1;
}
.img_frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.text_left {
  text-align: left !important;
}
.text_right {
  text-align: right !important;
}
/**-----------------------------------------------
基本
-----------------------------------------------**/
* {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
@media screen and (max-width: 480px) {
  html {
    font-size: 14px;
  }
}
body {
  color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  font-style: normal;
  font-weight: 300;
  margin: 0;
  padding: 0;
  min-width: 1100px;
  height: 100vh;
}
@media screen and (max-width: 1024px) {
  body {
    min-width: initial;
  }
}
img {
  max-width: 100%;
  height: auto;
}
/**-----------------------------------------------
リンク色
-----------------------------------------------**/
.icon_user {
  display: flex;
  align-items: center;
}
.icon_user:before {
  display: block;
  content: "";
  width: 25px;
  height: 27px;
  margin-right: 5px;
  background: url(../images/common/icon_user.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .icon_user:before {
    width: 18px;
    height: 20px;
  }
}
.icon_user span {
  flex: 1;
}
.icon_count {
  display: flex;
  align-items: center;
}
.icon_count:before {
  display: block;
  content: "";
  width: 27px;
  height: 25px;
  margin-right: 5px;
  background: url(../images/common/icon_count.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .icon_count:before {
    width: 18px;
    height: 17px;
  }
}
.icon_count span {
  flex: 1;
}
/**-----------------------------------------------
汎用
-----------------------------------------------**/
/* フォントサイズ */
.parts_fs_xxl {
  font-size: 2rem;
}
.parts_fs_xl {
  font-size: 1.75rem;
}
.parts_fs_lg {
  font-size: 1.25rem;
}
.parts_fs_md {
  font-size: 1.125rem;
}
.parts_fs_xs {
  font-size: 0.812rem;
}
.parts_fc_sub {
  color: #003399;
}
.parts_fc_red {
  color: red;
}
.parts_ff {
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
.parts_fontb {
  font-weight: bold;
}
/* 見出し */
.page_title {
  text-align: center;
  color: #003399;
  font-size: 2.25rem;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
  .page_title {
    font-size: 2rem;
    margin-bottom: 30px;
  }
}
/* 枠線 */
.parts_border {
  padding: 10px;
  background-color: #FFF;
  border: 1px solid #000000;
}
/* 補足 */
.parts_info {
  font-size: 0.812rem;
  color: #B3B3B3;
}
/* 横並び */
.parts_flex {
  display: flex;
  flex-wrap: wrap;
}
.parts_flex_2 {
  display: flex;
  flex-wrap: wrap;
}
.parts_flex_2 > * {
  width: calc(50% - 10px);
  margin-right: 20px;
}
.parts_flex_2 > *:nth-child(2n) {
  margin-right: 0;
}
.parts_flex_2 > *:nth-child(n+3) {
  margin-top: 20px;
}
.parts_flex_3 {
  display: flex;
  flex-wrap: wrap;
}
.parts_flex_3 > * {
  width: calc((100% / 3) - 6px);
  margin-right: 9px;
}
.parts_flex_3 > *:nth-child(3n) {
  margin-right: 0;
}
.parts_flex_3 > *:nth-child(n+4) {
  margin-top: 20px;
}
/* コピー */
.parts_copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.parts_copy input {
  width: calc(100% - 90px);
}
.parts_copy div {
  width: 80px;
}
.parts_copy div a {
  width: 100%;
}
/* ボタン */
.btn a {
  color: #000000;
  text-decoration: none;
}
.btn a:hover {
  opacity: 0.6;
}
.btn a {
  display: inline-block;
  position: relative;
  padding: 12px 60px 12px 50px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  background-color: #0abab5;
  border-radius: 50px;
  cursor: pointer;
  transition: 0.3s;
}
@media screen and (max-width: 480px) {
  .btn a {
    padding: 12px 40px 12px 30px;
  }
}
.btn a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.btn a:hover {
  opacity: 0.6;
}
/* ボタン(フォーム) */
.btn_button {
  display: flex;
  justify-content: center;
}
.btn_button button {
  display: inline-block;
  position: relative;
  padding: 12px 60px 12px 50px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  background-color: #0abab5;
  border-radius: 50px;
  transition: 0.3s;
  border: none;
  cursor: pointer;
  line-height: 1.2;
  margin-right: 20px;
  font-size: 1.125rem;
  background-color: #003399;
  border: 1px solid #003399;
}
@media screen and (max-width: 480px) {
  .btn_button button {
    padding: 12px 40px 12px 30px;
  }
}
.btn_button button:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.btn_button button:hover {
  opacity: 0.6;
}
@media screen and (max-width: 1024px) {
  .btn_button button {
    -webkit-appearance: none;
  }
}
.btn_button button:last-child {
  margin-right: 0;
}
.btn_button button.prev {
  color: #003399;
  background-color: #FFF;
  padding: 12px 50px 12px 60px;
}
@media screen and (max-width: 480px) {
  .btn_button button.prev {
    padding: 12px 30px 12px 40px;
  }
}
.btn_button button.prev:before {
  right: auto;
  left: 20px;
  border-color: #003399;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.btn_button.delete button {
  border-color: #777;
  background-color: #777;
}
.btn_button.delete button:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  content: "\f00d";
  border: none;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
@media screen and (max-width: 480px) {
  .btn_button_2 button {
    font-size: 1.125rem;
    min-width: calc(50% - 10px);
  }
}
/* ボタン(小) */
.btn_xs > *,
.btn_xs a {
  display: inline-block;
  position: relative;
  padding: 12px 60px 12px 50px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  background-color: #0abab5;
  border-radius: 50px;
  cursor: pointer;
  transition: 0.3s;
  padding: 8px 40px 8px 30px;
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid #0abab5;
}
@media screen and (max-width: 480px) {
  .btn_xs > *,
  .btn_xs a {
    padding: 12px 40px 12px 30px;
  }
}
.btn_xs > *:before,
.btn_xs a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.btn_xs > *:hover,
.btn_xs a:hover {
  opacity: 0.6;
}
@media screen and (max-width: 480px) {
  .btn_xs > *,
  .btn_xs a {
    padding: 8px 40px 8px 30px;
  }
}
.btn_xs > *:before,
.btn_xs a:before {
  width: 7px;
  height: 7px;
  border-width: 1px;
}
.btn_xs.btn_white > *,
.btn_xs.btn_white a {
  color: #0abab5;
  background-color: #FFF;
}
.btn_xs.btn_white > *:before,
.btn_xs.btn_white a:before {
  border-color: #0abab5;
}
.btn_xs.delete button {
  border-color: #777;
  background-color: #777;
}
.btn_xs.delete button:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  content: "\f00d";
  border: none;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
/* テーブル */
.table_style {
  border-collapse: collapse;
  /* width:100%はみ出し防止 */
  -webkit-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  /* テーブルのはみ出し防止 */
  word-break: break-all;
}
.table_style th {
  padding: 10px;
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
  border: 1px solid #B2B2B2;
  background-color: #BFE8E5;
}
.table_style td {
  padding: 10px;
  vertical-align: middle;
  border: 1px solid #B2B2B2;
  background-color: #FFF;
}
@media screen and (max-width: 480px) {
  .table_style.table_vertical {
    display: block;
  }
  .table_style.table_vertical tbody,
  .table_style.table_vertical tr,
  .table_style.table_vertical th,
  .table_style.table_vertical td {
    display: block;
  }
  .table_style.table_vertical tr:first-child th {
    border-top: 1px solid #B2B2B2;
  }
  .table_style.table_vertical th {
    padding: 10px;
    border-top: none;
    border-bottom: none;
  }
  .table_style.table_vertical td {
    padding: 10px;
  }
}
@media screen and (max-width: 480px) {
  /* 横にスライドさせる */
  .table_scroll .table_style {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}
/* コンテンツスクロール */
.parts_content_scroll {
  overflow-y: scroll;
  padding: 10px;
  height: 150px;
  border: 1px solid #B3B3B3;
  background-color: #FFF;
}
/* 戻る */
.parts_prev {
  margin-bottom: 20px;
}
.parts_prev a {
  color: #000000;
  text-decoration: none;
}
.parts_prev a:hover {
  opacity: 0.6;
}
.parts_prev a {
  display: flex;
  color: #4D4D4D;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  padding: 5px;
  border: 1px solid #4D4D4D;
  border-radius: 5px;
}
.parts_prev a:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  content: "\f0e2";
  margin-right: 5px;
}
/* ページ送り */
.pagination {
  text-align: center;
  margin-bottom: 100px;
}
@media screen and (max-width: 480px) {
  .pagination {
    margin: 20px 0 80px;
  }
}
.pagination > div {
  display: inline-block;
}
.pagination ul {
  display: flex;
  justify-content: center;
  border: 1px solid #0abab5;
  background-color: #FFF;
  border-radius: 100px;
}
.pagination ul li {
  border-right: 1px solid #0abab5;
}
.pagination ul li:last-child {
  border-right: 0;
}
.pagination ul li.prev {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100px;
  padding-left: 10px;
}
.pagination ul li.prev:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  content: "\f053";
  color: #0abab5;
  font-weight: bold;
}
.pagination ul li.next {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100px;
  padding-right: 10px;
}
.pagination ul li.next:after {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  content: "\f054";
  color: #0abab5;
  font-weight: bold;
}
.pagination ul li a,
.pagination ul li span {
  display: block;
  color: #595757;
  padding: 5px 10px;
  text-decoration: none;
}
.pagination ul li span {
  color: #FFF;
  background-color: #0abab5;
}
/* ol */
.ol_list {
  margin: 10px 0 10px 30px;
}
.ol_list li {
  list-style-type: decimal;
  line-height: 1.6;
  margin-bottom: 10px;
}
.ol_list li ol,
.ol_list li ul {
  margin-left: 20px;
}
.ol_list li ol li,
.ol_list li ul li {
  margin-bottom: 0;
  font-size: 0.9rem;
}
/* ul */
.ul_list {
  margin: 10px 0 10px 30px;
}
.ul_list li {
  list-style-type: disc;
  line-height: 1.6;
  margin-bottom: 10px;
}
/* dl */
.dl_list {
  margin-bottom: 20px;
}
.dl_list dt {
  color: #0abab5;
  font-size: 1.1rem;
}
.dl_list dd {
  margin: 0 1em;
}
@media screen and (max-width: 480px) {
  .dl_list dd {
    margin: 0 5%;
  }
}
/* インデント */
.parts_indent {
  text-indent: -1em;
  padding-left: 1em;
}
.indent_list li {
  text-indent: -2.5em;
  padding-left: 2.5em;
  margin-bottom: 5px;
}
/* メニュー */
.parts_menu {
  max-width: 1100px;
  margin: 0 auto;
}
.parts_menu li {
  border-bottom: 1px solid #B3B3B3;
}
.parts_menu li a {
  color: #000000;
  text-decoration: none;
}
.parts_menu li a:hover {
  opacity: 0.6;
}
.parts_menu li a {
  display: block;
  padding: 15px 5%;
}
/* アコーディオン */
.parts_toggle .parts_toggle_btn {
  position: relative;
  padding-right: 30px;
  cursor: pointer;
}
.parts_toggle .parts_toggle_btn:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  margin: auto;
  content: "\f107";
  font-size: 1.2rem;
}
.parts_toggle .parts_toggle_btn.active:before {
  content: "\f106";
}
.parts_toggle .parts_toggle_content {
  display: none;
}
/* モーダル */
.img_modal {
  cursor: pointer;
  transition: 0.3s;
}
.img_modal:hover {
  opacity: 0.6;
}
#grayDisplay {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  cursor: pointer;
  max-width: 100% !important;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}
#grayDisplay figure {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
  height: 90%;
  object-fit: contain;
  z-index: 2;
}
#grayDisplay figure:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  content: "\f00d";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  font-weight: bold;
  color: #FFF;
  background-color: #777;
  border-radius: 100px;
}
#grayDisplay .alert_modal_content {
  position: relative;
  padding: 50px;
  max-width: 90%;
  max-height: 90%;
  z-index: 2;
  cursor: auto;
  text-align: center;
  background-color: #FFF;
  border-radius: 10px;
}
@media screen and (max-width: 480px) {
  #grayDisplay .alert_modal_content {
    padding: 10% 5%;
  }
}
#grayDisplay .alert_modal_content .parts_flex {
  justify-content: center;
  align-items: center;
}
/**-----------------------------------------------
フォーム
-----------------------------------------------**/
input,
select {
  width: 100%;
  padding: 6px;
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  border: 1px solid #666;
  border-radius: 2px;
}
input:read-only,
textarea:read-only,
select:disabled {
  background-color: #ccc;
}
::placeholder {
  color: #999;
}
textarea {
  width: 100%;
  padding: 10px;
  min-height: 120px;
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}
input[type="file"] {
  display: inline-block;
  font-size: 0.875rem;
  border: none;
  background-color: transparent;
}
/*
label input[type="radio"],
label input[type="checkbox"] {
	margin-right:10px;
}
*/
/* チェックボックス */
.parts_checkbox {
  margin-right: 20px;
}
.parts_checkbox input {
  display: none;
}
.parts_checkbox input:checked + span:after {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 7px;
  width: 4px;
  height: 8px;
  transform: rotate(40deg);
  border-bottom: 2px solid #0abab5;
  border-right: 2px solid #0abab5;
}
.parts_checkbox span {
  padding-left: 25px;
  position: relative;
}
.parts_checkbox span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 2px solid #0abab5;
  background-color: #FFF;
  border-radius: 4px;
}
.checkbox_list {
  display: flex;
  flex-wrap: wrap;
}
.checkbox_list label {
  margin-bottom: 5px;
}
/* ラジオボタン */
.parts_radio {
  margin-right: 20px;
}
.parts_radio input {
  display: none;
}
.parts_radio input:checked + span:after {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 9px;
  height: 9px;
  background: #0abab5;
  border-radius: 50%;
}
.parts_radio span {
  padding-left: 25px;
  position: relative;
}
.parts_radio span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 2px solid #0abab5;
  background-color: #FFF;
  border-radius: 50%;
}
/* ファイル添付 */
.parts_file label {
  display: block;
  position: relative;
  border: 3px dashed #B3B3B3;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  margin: 0 20px 10px;
  border-radius: 10px;
}
.parts_file label:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  display: block;
  content: "\f0c6";
  color: #B3B3B3;
  font-size: 2.5rem;
  margin-bottom: 20px;
}
.parts_file input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.parts_file span {
  display: block;
  text-align: center;
}
.thumbnail_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.thumbnail_list div {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.thumbnail_list div figure {
  display: flex;
  align-items: center;
  max-width: 80px;
  height: 80px;
}
@media screen and (max-width: 480px) {
  .thumbnail_list div figure {
    max-width: 50px;
    max-height: 50px;
  }
}
.thumbnail_list div figure img {
  max-height: 100%;
}
.thumbnail_list div span {
  margin-left: 5px;
  font-size: 0.812rem;
}
/**-----------------------------------------------
ヘッダー
-----------------------------------------------**/
#header {
  line-height: 1.2;
  background-color: #FFF;
}
@media screen and (max-width: 1024px) {
  #header {
    position: fixed;
    z-index: 999;
    width: 100%;
    border-bottom: 5px solid #0abab5;
  }
}
#header .header_menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
@media screen and (max-width: 1024px) {
  #header .header_menu {
    height: 80px;
    padding: 0;
    /* --- */
    /* --- */
  }
  #header .header_menu .sp_menu_btn {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    text-align: center;
    letter-spacing: 1px;
    cursor: pointer;
    border: none;
    color: #0abab5;
    background-color: #FFF;
  }
  #header .header_menu .sp_menu_btn span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 45px;
    height: 4px;
    transition: all 0.2s;
    transform-origin: 0% 0%;
    transform: translateY(-50%);
    background-color: #0abab5;
    border-radius: 50px;
  }
  #header .header_menu .sp_menu_btn span:nth-child(1) {
    top: 27px;
  }
  #header .header_menu .sp_menu_btn span:nth-child(2) {
    top: 40px;
  }
  #header .header_menu .sp_menu_btn span:nth-child(3) {
    top: 54px;
  }
  #header .header_menu .sp_menu_btn.active span {
    width: 36.77px;
    left: 10px;
  }
  #header .header_menu .sp_menu_btn.active span:nth-child(1) {
    transform: rotate(0.78539816rad) translateY(-50%);
  }
  #header .header_menu .sp_menu_btn.active span:nth-child(2) {
    opacity: 0;
  }
  #header .header_menu .sp_menu_btn.active span:nth-child(3) {
    top: calc(100% - 27px);
    transform: rotate(-0.78539816rad) translateY(-50%);
  }
  #header .header_menu .sp_menu_btn.active small {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  #header .header_menu {
    height: 60px;
    /* --- */
    /* --- */
  }
  #header .header_menu .sp_menu_btn {
    width: 60px;
    height: 60px;
  }
  #header .header_menu .sp_menu_btn span {
    width: 35px;
  }
  #header .header_menu .sp_menu_btn span:nth-child(1) {
    top: 19px;
  }
  #header .header_menu .sp_menu_btn span:nth-child(2) {
    top: 30px;
  }
  #header .header_menu .sp_menu_btn span:nth-child(3) {
    top: 42px;
  }
  #header .header_menu .sp_menu_btn small {
    bottom: 10px;
    font-size: 10px;
  }
  #header .header_menu .sp_menu_btn.active span:nth-child(3) {
    top: calc(100% - 15px);
  }
}
@media screen and (max-width: 1024px) {
  #header .header_menu .logo {
    width: 30vw;
    margin: 0 auto;
  }
}
#header .header_menu .header_link {
  display: flex;
}
@media screen and (max-width: 1024px) {
  #header .header_menu .header_link_list {
    display: none;
  }
}
#header .header_nav {
  background-color: #0abab5;
}
@media screen and (max-width: 1024px) {
  #header .header_nav {
    display: block;
    position: fixed;
    top: 80px;
    left: 0;
    z-index: 1000;
    width: 312px;
    height: 100vh;
    transition: all 0.2s;
    transform: translate(-312px);
  }
  #header .header_nav.open {
    transform: translate(0);
    box-shadow: 5px 0px 10px -5px rgba(0, 0, 0, 0.4);
  }
  #header .header_nav .link {
    padding: 20px 0 10px;
    background-color: #FFF;
  }
  #header .header_nav .link .btn_xs {
    margin-bottom: 10px;
  }
  #header .header_nav .link .btn_xs a {
    display: block;
    padding: 15px 0;
    background-color: #003399;
    border-color: #003399;
  }
  #header .header_nav .link .btn_xs.btn_white a {
    color: #003399;
    background-color: #FFF;
  }
  #header .header_nav .link .btn_xs.btn_white a:before {
    border-color: #003399;
  }
  #header .header_nav .link ul {
    padding: 0;
    margin-bottom: 20px;
  }
  #header .header_nav .link ul li {
    border-bottom: 1px solid #003399;
  }
  #header .header_nav .link ul a {
    display: flex;
    align-items: center;
    padding: 10px;
    color: #003399;
    text-align: left;
  }
  #header .header_nav .link ul a:before {
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    font-weight: 600;
    font-size: 0.8rem;
    margin-right: 10px;
  }
  #header .header_nav .link ul span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    width: 18px;
    height: 18px;
    margin-left: 5px;
    text-align: center;
    font-size: 0.687rem;
    background-color: #C1272D;
    border-radius: 100%;
  }
}
@media screen and (max-width: 480px) {
  #header .header_nav {
    top: 60px;
  }
}
#header .header_nav ul {
  display: flex;
  justify-content: space-evenly;
  padding: 18px 0;
}
@media screen and (max-width: 1024px) {
  #header .header_nav ul {
    flex-direction: column;
  }
}
#header .header_nav ul li {
  flex: 1;
  border-left: 1px solid #FFF;
}
@media screen and (max-width: 1024px) {
  #header .header_nav ul li {
    border-left: 0;
    border-bottom: 1px solid #FFF;
  }
}
#header .header_nav ul li:last-child {
  border-right: 1px solid #FFF;
}
@media screen and (max-width: 1024px) {
  #header .header_nav ul li:last-child {
    border-right: 0;
  }
}
#header .header_nav ul a {
  display: block;
  color: #FFF;
  font-size: 1.125rem;
  text-align: center;
  text-decoration: none;
  padding: 10px;
}
@media screen and (max-width: 1024px) {
  #header .header_nav ul a {
    padding: 20px 0;
  }
}
#header .header_link_cart a {
  display: block;
  position: relative;
  margin: 0 8px 0 10px;
}
#header .header_link_cart a span {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
  top: -3px;
  right: -8px;
  color: #FFF;
  width: 21px;
  height: 21px;
  text-align: center;
  font-size: 0.687rem;
  background-color: #C1272D;
  border-radius: 100%;
}
.header_link_list {
  display: flex;
  align-items: center;
}
.header_link_list li {
  margin-right: 10px;
}
.header_link_list li:last-child {
  margin-right: 0;
}
/**-----------------------------------------------
フッター
-----------------------------------------------**/
#footer {
  padding: 40px 0;
}
#footer .footer_menu {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
@media screen and (max-width: 480px) {
  #footer .footer_menu .footer_menu_logo {
    width: 40%;
    height: auto;
  }
}
#footer .footer_menu .footer_nav_list {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 600px;
}
@media screen and (max-width: 480px) {
  #footer .footer_menu .footer_nav_list {
    display: block;
    width: auto;
  }
}
#footer .footer_menu .footer_nav_list li {
  margin: 0 0 10px 30px;
}
@media screen and (max-width: 480px) {
  #footer .footer_menu .footer_nav_list li {
    margin: 0;
    text-align: right;
  }
}
#footer .footer_menu .footer_nav_list a {
  color: #000;
  text-decoration: none;
}
@media screen and (max-width: 480px) {
  #footer .footer_menu .footer_nav_list a {
    display: block;
    padding: 5px;
  }
}
#footer small {
  text-align: center;
}
.cta_premium {
  padding: 60px 0;
  text-align: center;
  background-color: #FFD22E;
}
@media screen and (max-width: 480px) {
  .cta_premium {
    padding: 40px 0;
  }
}
.cta_premium .section {
  position: relative;
}
.cta_premium .title {
  display: block;
  color: #333;
  font-size: 2.25rem;
  text-shadow: 5px 4px 0px #dbb12a;
  margin-bottom: 50px;
}
@media screen and (max-width: 1200px) {
  .cta_premium .title {
    padding-right: 100px;
  }
}
@media screen and (max-width: 1024px) {
  .cta_premium .title {
    font-size: 1.8rem;
    padding: 0;
  }
}
@media screen and (max-width: 480px) {
  .cta_premium .title {
    line-height: 1.4;
    margin-bottom: 30px;
  }
}
.cta_premium .title:after {
  content: "";
  display: block;
  position: absolute;
  right: -50px;
  bottom: -45px;
  width: 308px;
  height: 312px;
  background: url(../images/cta_bg_01.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1200px) {
  .cta_premium .title:after {
    right: 0;
  }
}
@media screen and (max-width: 1024px) {
  .cta_premium .title:after {
    width: 200px;
    height: 203px;
    bottom: -85px;
  }
}
@media screen and (max-width: 480px) {
  .cta_premium .title:after {
    position: static;
    width: 130px;
    height: 132px;
    margin: 20px auto 0;
  }
}
.cta_premium .btn {
  font-size: 1.312rem;
}
/**-----------------------------------------------
メインエリア
-----------------------------------------------**/
#content {
  line-height: 1.2;
  margin-top: 60px;
  padding-bottom: 100px;
  border-bottom: 2px solid #0abab5;
}
@media screen and (max-width: 1024px) {
  #content {
    padding: 120px 0 100px;
    margin: 0;
  }
}
@media screen and (max-width: 480px) {
  #content {
    padding: 100px 0 80px;
    margin: 0;
  }
}
#content.content_cling {
  margin: 0;
  padding: 0;
  border: none;
}
@media screen and (max-width: 1024px) {
  #content.content_cling {
    padding-top: 85px;
  }
}
@media screen and (max-width: 480px) {
  #content.content_cling {
    padding-top: 65px;
  }
}
#content p {
  line-height: 1.4;
}
.section {
  display: block;
  max-width: 810px;
  font-size: 15px;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .section {
    width: auto;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}
@media screen and (max-width: 480px) {
  .section {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}
.section_margin {
  margin-bottom: 80px;
}
/**-----------------------------------------------
トップ
-----------------------------------------------**/
/* ログイン前TOP */
.index_mv {
  position: relative;
}
.index_mv .slick-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 999;
  font-size: 0;
  background-color: transparent;
  border: none;
}
.index_mv .slick-arrow:before {
  content: "";
  display: block;
  cursor: pointer;
  width: 35px;
  height: 35px;
  margin: auto;
  border-top: 4px solid #0abab5;
  border-right: 4px solid #0abab5;
}
@media screen and (max-width: 1330px) {
  .index_mv .slick-arrow {
    display: none !important;
  }
}
.index_mv .slick-prev {
  left: 5%;
}
.index_mv .slick-prev:before {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.index_mv .slick-next {
  right: 5%;
}
.index_mv .slick-next:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.index_mv .index_mv_01 {
  background: url(../images/index/mv_img_01.png) no-repeat center 0 / contain;
}
.index_mv .index_mv_01 .block {
  right: 50px;
}
@media screen and (max-width: 1024px) {
  .index_mv .index_mv_01 {
    background-image: url(../images/index/mv_img_01_pad.png);
  }
}
.index_mv .index_mv_02 {
  background: url(../images/index/mv_img_02.png) no-repeat center 0 / contain;
}
@media screen and (max-width: 1024px) {
  .index_mv .index_mv_02 {
    background-image: url(../images/index/mv_img_02_pad.png);
  }
}
.index_mv .index_mv_03 {
  background: url(../images/index/mv_img_03.png) no-repeat center 0 / contain;
}
@media screen and (max-width: 1024px) {
  .index_mv .index_mv_03 {
    background-image: url(../images/index/mv_img_03_pad.png);
  }
}
@media screen and (max-width: 1024px) {
  .index_mv .slick-slide {
    background-size: auto 80%;
    background-position: 40px center;
  }
}
@media screen and (max-width: 480px) {
  .index_mv .slick-slide {
    background-position: center;
  }
}
.index_mv .section {
  position: relative;
  min-height: 563px;
}
@media screen and (max-width: 1024px) {
  .index_mv .section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 330px;
  }
}
@media screen and (max-width: 480px) {
  .index_mv .section {
    background-color: rgba(255, 255, 255, 0.7);
  }
}
.index_mv .block {
  position: absolute;
  top: 200px;
  right: 0;
}
@media screen and (max-width: 1024px) {
  .index_mv .block {
    position: static;
    text-align: right;
  }
}
@media screen and (max-width: 480px) {
  .index_mv .block {
    text-align: center;
  }
}
.index_mv .block h1 {
  color: #003399;
  font-size: 2.25rem;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
@media screen and (max-width: 1024px) {
  .index_mv .block h1 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 480px) {
  .index_mv .block h1 {
    font-size: 1.57rem;
  }
}
@media screen and (max-width: 480px) {
  .index_mv .block p {
    font-size: 0.9rem;
  }
}
.index_mv .block .header_link_list {
  margin-top: 50px;
}
@media screen and (max-width: 1024px) {
  .index_mv .block .header_link_list {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 480px) {
  .index_mv .block .header_link_list {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
  }
}
@media screen and (max-width: 480px) {
  .index_mv .block .header_link_list li {
    margin-bottom: 10px;
  }
  .index_mv .block .header_link_list li:last-child {
    margin-bottom: 0;
  }
}
/* ログイン後TOP */
.index_search {
  padding: 70px 0;
  background-color: #FEF7CF;
}
@media screen and (max-width: 480px) {
  .index_search {
    padding: 50px 0;
  }
}
.index_news {
  padding: 28px 0;
  background-color: #AFDDDA;
}
@media screen and (max-width: 480px) {
  .index_news {
    padding: 20px 0;
  }
}
.index_news .section {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .index_news .section {
    flex-wrap: wrap;
  }
}
.index_news .section strong {
  font-size: 1.312rem;
}
.index_news .section time {
  display: block;
  color: #FFF;
  padding: 3px 8px;
  margin: 0 10px 0 30px;
  background-color: #0abab5;
}
.index_news .section p {
  flex: 1;
}
@media screen and (max-width: 480px) {
  .index_news .section p {
    flex: auto;
    margin-top: 10px;
    font-size: 0.9rem;
  }
}
.index_block {
  padding: 30px 0 150px;
  background-image: url(../images/index/index_bg_01.png), url(../images/index/index_bg_02.png), url(../images/index/index_bg_03.png);
  background-position: left top, right top, right bottom;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-color: #EBF9FD;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .index_block {
    padding-bottom: 80px;
  }
}
.index_block .index_banner {
  text-align: center;
}
.index_block.index_block_login {
  padding-bottom: 80px;
  background-image: url(../images/index/index_login_bg_01.png), url(../images/index/index_login_bg_02.png), url(../images/index/index_bg_03.png);
  background-position: left top, right top, right bottom;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.index_title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 117px;
  color: #003399;
  text-align: center;
  font-size: 2.25rem;
  letter-spacing: 3px;
  padding-left: 50px;
  margin-bottom: 30px;
  background: url(../images/index/index_title_bg.png) no-repeat center 0;
}
@media screen and (max-width: 480px) {
  .index_title {
    height: auto;
    padding: 0;
    font-size: 1.8rem;
    letter-spacing: 2px;
    background: none;
  }
}
@media screen and (max-width: 1024px) {
  .design_list_index li:nth-child(4),
  .index_unlogin li:nth-child(4) {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .design_list_index li:nth-child(4) {
    display: flex;
  }
  .index_unlogin li:nth-child(3),
  .index_unlogin li:nth-child(4) {
    display: none;
  }
}
.index_unlogin {
  position: relative;
}
.index_unlogin:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: -40px;
  left: -70px;
  width: 100%;
  height: 100%;
  padding: 40px 70px;
  background-color: rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 1024px) {
  .index_unlogin:before {
    padding: 20px;
    top: -20px;
    left: -20px;
  }
}
@media screen and (max-width: 480px) {
  .index_unlogin:before {
    padding: 10px;
    top: -10px;
    left: -10px;
  }
}
.index_unlogin .block {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  color: #FFF;
}
.index_unlogin .block p {
  color: #FFF;
  font-size: 1.875rem;
  text-align: center;
  margin-bottom: 30px;
}
@media screen and (max-width: 1024px) {
  .index_unlogin .block p {
    font-size: 1.5rem;
  }
}
.index_unlogin .design_list li {
  margin-bottom: 0;
}
/**-----------------------------------------------
新規会員登録
-----------------------------------------------**/
.dl_form {
  max-width: 700px;
  margin: 0 auto 60px;
}
@media screen and (max-width: 480px) {
  .dl_form {
    margin-bottom: 40px;
  }
}
.dl_form dl {
  display: flex;
  margin-bottom: 20px;
}
@media screen and (max-width: 480px) {
  .dl_form dl {
    display: block;
  }
}
.dl_form dd {
  flex: 1;
}
.dl_form dd.parts_flex {
  align-items: center;
}
.dl_form dt {
  display: flex;
  align-items: flex-start;
  width: 30%;
  padding: 8px 0;
  margin-right: 20px;
}
@media screen and (max-width: 480px) {
  .dl_form dt {
    display: block;
    width: auto;
    padding-top: 0;
  }
}
.dl_form dt span {
  flex: 1;
  font-weight: bold;
}
.dl_form .parts_flex_2 {
  align-items: center;
}
.required {
  display: inline-block;
  color: #FFF;
  padding: 2px 8px;
  margin-left: 10px;
  font-size: 0.75rem;
  background-color: #0abab5;
}
.supplement {
  font-size: 0.75rem;
  margin-top: 2px;
}
.agree_check {
  text-align: center;
  margin-bottom: 40px;
}
.agree_check .parts_checkbox {
  display: block;
  margin-bottom: 10px;
}
/**-----------------------------------------------
ログイン
-----------------------------------------------**/
.login_block {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 480px) {
  .login_block {
    display: block;
  }
}
.login_block .block {
  width: 45%;
  padding: 50px;
  border: 1px solid #CCC;
}
@media screen and (max-width: 1024px) {
  .login_block .block {
    width: 48%;
    padding: 20px 15px;
  }
}
@media screen and (max-width: 480px) {
  .login_block .block {
    width: auto;
    padding: 6%;
  }
  .login_block .block:first-child {
    margin-bottom: 30px;
  }
}
.login_block dl {
  margin-bottom: 20px;
}
.login_block dt {
  padding: 8px 0;
  font-weight: bold;
}
/**-----------------------------------------------
マイページ
-----------------------------------------------**/
.mypage_block {
  display: flex;
}
@media screen and (max-width: 480px) {
  .mypage_block {
    display: block;
  }
}
.mypage_block .mypage_nav {
  width: 250px;
  margin-right: 50px;
}
@media screen and (max-width: 1024px) {
  .mypage_block .mypage_nav {
    display: none;
  }
}
.mypage_block .mypage_nav li {
  position: relative;
  margin-bottom: 10px;
}
.mypage_block .mypage_nav li a {
  color: #000000;
  text-decoration: none;
}
.mypage_block .mypage_nav li a:hover {
  opacity: 0.6;
}
.mypage_block .mypage_nav li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  color: #FFF;
  text-align: center;
  background-color: #0abab5;
}
@media screen and (max-width: 480px) {
  .mypage_block .mypage_nav li a {
    padding: 15px;
  }
}
.mypage_block .mypage_nav li span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  width: 21px;
  height: 21px;
  margin-left: 5px;
  text-align: center;
  font-size: 0.687rem;
  background-color: #C1272D;
  border-radius: 100%;
}
.mypage_block .mypage_content {
  width: calc(100% - 300px);
}
@media screen and (max-width: 1024px) {
  .mypage_block .mypage_content {
    width: 100%;
  }
}
.mypage_block .mypage_content .mypage_title {
  color: #FFF;
  padding: 10px;
  font-size: 1.25rem;
  margin-bottom: 20px;
  background-color: #0abab5;
}
.mypage_block.creator_mypage .creator_mypage a,
.mypage_block.creator_mypage_design .creator_mypage_design a,
.mypage_block.creator_mypage_design_post .creator_mypage_design_post a,
.mypage_block.creator_mypage_sales .creator_mypage_sales a,
.mypage_block.creator_mypage_setting .creator_mypage_setting a,
.mypage_block.premium_mypage .premium_mypage a,
.mypage_block.premium_mypage_order .premium_mypage_order a,
.mypage_block.premium_mypage_document .premium_mypage_document a,
.mypage_block.premium_mypage_setting .premium_mypage_setting a {
  background-color: #FFF;
  color: #0abab5;
  border: 1px solid #0abab5;
}
.mypage_news {
  margin-bottom: 40px;
}
.mypage_news li {
  display: flex;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #CCC;
}
.mypage_news li time {
  margin-right: 20px;
}
.mypage_news li a {
  flex: 1;
}
/**-----------------------------------------------
マイデザイン一覧
-----------------------------------------------**/
.mypage_design {
  margin-bottom: 40px;
  border-bottom: 1px solid #CCC;
}
.mypage_design li {
  display: flex;
  border: 1px solid #CCC;
  border-bottom: none;
}
@media screen and (max-width: 480px) {
  .mypage_design li {
    flex-wrap: wrap;
  }
}
.mypage_design li.head {
  text-align: center;
  background-color: #F9F9F9;
}
@media screen and (max-width: 480px) {
  .mypage_design li.head {
    display: none;
  }
}
.mypage_design .img,
.mypage_design .content {
  padding: 10px;
  border-right: 1px solid #CCC;
}
@media screen and (max-width: 480px) {
  .mypage_design .img,
  .mypage_design .content {
    border: none;
  }
}
.mypage_design .img,
.mypage_design .btn_button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mypage_design .img {
  width: 140px;
}
@media screen and (max-width: 480px) {
  .mypage_design .img {
    width: 100px;
  }
}
.mypage_design .content {
  width: calc(100% - 270px);
}
@media screen and (max-width: 480px) {
  .mypage_design .content {
    width: calc(100% - 100px);
    border-right: 0;
  }
}
.mypage_design .content .d_id {
  font-size: 0.687rem;
  margin-bottom: 5px;
}
.mypage_design .content .shape {
  font-size: 0.875rem;
}
.mypage_design .content .genre {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  margin-bottom: 5px;
}
.mypage_design .content .genre span:after {
  content: "/";
  margin: 0 5px;
}
.mypage_design .content .genre span:last-child:after {
  display: none;
}
.mypage_design .content .title {
  display: block;
  margin-bottom: 10px;
}
.mypage_design .content .var {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.875rem;
}
.mypage_design .content .var .status {
  word-break: keep-all;
  display: inline-block;
  font-size: 0.687rem;
  color: #FFF;
  padding: 5px 20px;
  margin-right: 5px;
  text-align: center;
  border-radius: 100px;
}
.mypage_design .content .time {
  display: block;
  text-align: right;
  font-size: 0.687rem;
}
.mypage_design .btn_button {
  width: 130px;
  font-size: 0.875rem;
  word-break: keep-all;
}
@media screen and (max-width: 480px) {
  .mypage_design .btn_button {
    justify-content: flex-end;
    width: 100%;
    padding: 0 10px 10px;
  }
}
.mypage_design .btn_button button {
  padding: 12px 40px 12px 30px;
}
@media screen and (max-width: 480px) {
  .mypage_design .btn_button button {
    padding: 6px 40px 6px 30px;
  }
}
.status_wait {
  /* 承認待ち */
  background-color: #666;
}
.status_denial {
  /* 非承認 */
  background-color: #b72727;
}
.status_fin {
  /* 承認済み */
  background-color: #0abab5;
}
/**-----------------------------------------------
マイデザイン新規投稿
-----------------------------------------------**/
.mypage_design_edit {
  padding: 30px;
  border: 1px solid #CCC;
}
@media screen and (max-width: 480px) {
  .mypage_design_edit {
    padding: 20px;
  }
}
.mypage_design_edit .dl_form {
  max-width: initial;
  padding: 0;
}
.mypage_design_edit .dl_form .parts_checkbox {
  margin-bottom: 5px;
}
.mypage_design_edit .var_block {
  padding: 15px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  background-color: #EEE;
}
.mypage_design_edit .var_block .number {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.mypage_design_edit .var_block .number .status {
  word-break: keep-all;
  display: inline-block;
  font-size: 0.687rem;
  color: #FFF;
  padding: 3px 20px;
  margin-left: 10px;
  text-align: center;
  border-radius: 100px;
}
.mypage_design_edit .var_block .number strong {
  display: block;
}
.mypage_design_edit .var_block .denial_comment {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #FFF;
  border: 1px solid #CCC;
}
.mypage_design_edit .var_block dt {
  width: 36%;
}
@media screen and (max-width: 480px) {
  .mypage_design_edit .var_block dt {
    width: auto;
  }
}
.mypage_design_edit .var_block dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.mypage_design_edit .var_block .delete {
  justify-content: flex-end;
}
.mypage_design_edit .var_block .delete button {
  font-size: 0.812rem;
  padding: 6px 30px 6px 20px;
}
.mypage_design_edit .var_block .delete button:before {
  right: 10px;
}
.mypage_design_edit .var_block.var_block_denial {
  background-color: #e5d0d0;
}
/**-----------------------------------------------
売上管理
-----------------------------------------------**/
.mypage_sales {
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid #CCC;
}
.mypage_sales .current {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #CCC;
}
.mypage_sales .current .amount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.mypage_sales .current .amount span,
.mypage_sales .current .amount strong {
  margin-right: 10px;
}
.mypage_sales .scheduled {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 480px) {
  .mypage_sales .scheduled {
    display: block;
  }
}
.mypage_sales .scheduled .petition {
  text-align: center;
}
@media screen and (max-width: 480px) {
  .mypage_sales .scheduled .petition {
    margin-top: 20px;
  }
}
.mypage_sales .scheduled .petition button {
  border: none;
  color: #FFF;
  cursor: pointer;
  padding: 10px 15px;
  background-color: #0abab5;
  border-radius: 5px;
  transition: 0.3s;
}
.mypage_sales .scheduled .petition button:hover {
  opacity: 0.6;
}
.mypage_sales .scheduled .petition p {
  margin-top: 5px;
  font-size: 0.812rem;
}
.mypage_sales_list input[type="radio"] {
  display: none;
}
.mypage_sales_list .tab_panel {
  display: none;
}
.mypage_sales_list .mypage_sales_list_tab {
  display: flex;
  position: relative;
  top: 1px;
}
.mypage_sales_list .mypage_sales_list_tab label {
  display: inline-block;
  padding: 12px 20px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #CCC;
  background-color: #EEE;
  border-radius: 5px 5px 0 0;
  color: #003399;
}
.mypage_sales_list .mypage_sales_list_content {
  padding: 20px;
  border: 1px solid #CCC;
}
.mypage_sales_list .mypage_sales_list_content .title {
  font-size: 1.125rem;
  margin-bottom: 10px;
}
.mypage_sales_list .mypage_sales_list_content .month {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  margin-bottom: 10px;
}
.mypage_sales_list .mypage_sales_list_content .month li {
  margin-bottom: 10px;
}
.mypage_sales_list .mypage_sales_list_content .month li:after {
  content: "｜";
  padding: 0 10px;
}
.mypage_sales_list .mypage_sales_list_content .month:before {
  content: "｜";
  padding-right: 10px;
}
.mypage_sales_list .mypage_sales_list_content .history {
  margin-bottom: 20px;
}
.mypage_sales_list .mypage_sales_list_content .history li {
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 10px;
  border: 1px solid #CCC;
}
@media screen and (max-width: 480px) {
  .mypage_sales_list .mypage_sales_list_content .history li {
    flex-wrap: wrap;
    padding: 10px;
  }
}
.mypage_sales_list .mypage_sales_list_content .history li time,
.mypage_sales_list .mypage_sales_list_content .history li strong {
  margin-right: 20px;
}
.mypage_sales_list .mypage_sales_list_content .history li p {
  flex: 1;
  text-align: right;
}
@media screen and (max-width: 480px) {
  .mypage_sales_list .mypage_sales_list_content .history li p {
    flex: auto;
    width: 100%;
    margin-top: 5px;
  }
}
.mypage_sales_list .mypage_sales_list_content .table_style {
  width: 100%;
}
.mypage_sales_list .mypage_sales_list_content .table_style td:not(:first-child) {
  word-break: keep-all;
}
.mypage_sales_list .mypage_sales_list_content .table_style .var {
  display: block;
  font-size: 0.875rem;
}
.mypage_sales_list .mypage_sales_list_content .table_style .var:before {
  content: "-";
  margin-right: 5px;
}
.mypage_sales_list #tab1:checked ~ .mypage_sales_list_tab .tab1_label {
  color: #000;
  background-color: #FFF;
  border-bottom: none;
}
.mypage_sales_list #tab1:checked ~ .mypage_sales_list_content #panel1 {
  display: block;
}
.mypage_sales_list #tab2:checked ~ .mypage_sales_list_tab .tab2_label {
  color: #000;
  background-color: #FFF;
  border-bottom: none;
}
.mypage_sales_list #tab2:checked ~ .mypage_sales_list_content #panel2 {
  display: block;
}
/**-----------------------------------------------
注文一覧
-----------------------------------------------**/
.mypage_order {
  margin-bottom: 40px;
  border-bottom: 1px solid #CCC;
}
.mypage_order li {
  display: flex;
  border: 1px solid #CCC;
  border-bottom: none;
}
@media screen and (max-width: 480px) {
  .mypage_order li {
    flex-wrap: wrap;
  }
}
.mypage_order li.head {
  text-align: center;
  background-color: #F9F9F9;
}
@media screen and (max-width: 480px) {
  .mypage_order li.head {
    display: none;
  }
}
.mypage_order .number,
.mypage_order .date,
.mypage_order .state,
.mypage_order .detail {
  border-right: 1px solid #CCC;
}
@media screen and (max-width: 480px) {
  .mypage_order .number,
  .mypage_order .date,
  .mypage_order .state,
  .mypage_order .detail {
    border: none;
  }
}
.mypage_order .number,
.mypage_order .date,
.mypage_order .state,
.mypage_order .detail,
.mypage_order .comment {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-around;
  padding: 10px;
  font-size: 0.937rem;
}
@media screen and (max-width: 480px) {
  .mypage_order .number,
  .mypage_order .date,
  .mypage_order .state,
  .mypage_order .detail,
  .mypage_order .comment {
    padding: 10px 5px;
    font-size: 0.875rem;
  }
}
.mypage_order .number p,
.mypage_order .date p,
.mypage_order .state p,
.mypage_order .detail p,
.mypage_order .comment p,
.mypage_order .number a,
.mypage_order .date a,
.mypage_order .state a,
.mypage_order .detail a,
.mypage_order .comment a {
  margin-bottom: 5px;
}
.mypage_order .number p:last-child,
.mypage_order .date p:last-child,
.mypage_order .state p:last-child,
.mypage_order .detail p:last-child,
.mypage_order .comment p:last-child,
.mypage_order .number a:last-child,
.mypage_order .date a:last-child,
.mypage_order .state a:last-child,
.mypage_order .detail a:last-child,
.mypage_order .comment a:last-child {
  margin-bottom: 0;
}
.mypage_order .number {
  width: 150px;
}
@media screen and (max-width: 480px) {
  .mypage_order .number {
    width: calc(100% - 260px);
    word-break: break-all;
  }
}
.mypage_order .date {
  width: calc(100% - 590px);
}
@media screen and (max-width: 480px) {
  .mypage_order .date {
    width: 70px;
  }
}
.mypage_order .state {
  width: 160px;
}
@media screen and (max-width: 480px) {
  .mypage_order .state {
    width: 100px;
  }
}
.mypage_order .state p {
  width: 100%;
}
.mypage_order .detail a,
.mypage_order .comment a {
  display: flex;
  align-items: center;
  position: relative;
  padding: 8px 30px 8px 20px;
}
.mypage_order .detail span,
.mypage_order .comment span {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -5px;
  color: #FFF;
  width: 21px;
  height: 21px;
  margin-left: 5px;
  text-align: center;
  font-weight: normal;
  font-size: 0.625rem;
  background-color: #C1272D;
  border-radius: 100%;
}
.mypage_order .detail {
  width: 110px;
}
@media screen and (max-width: 480px) {
  .mypage_order .detail {
    width: 90px;
  }
}
.mypage_order .comment {
  width: 170px;
}
@media screen and (max-width: 480px) {
  .mypage_order .comment {
    align-items: flex-end;
    width: 100%;
    padding-right: 10px;
  }
}
/* ステータス */
.state_color {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  width: 140px;
  padding: 5px;
  font-size: 0.812rem;
  border-radius: 100px;
}
@media screen and (max-width: 480px) {
  .state_color {
    font-size: 0.687rem;
  }
}
.state_ordered {
  background-color: #43a5cf;
}
/* 注文済み */
.state_production {
  background-color: #f18a39;
}
/* 制作中 */
.state_proofreading {
  background-color: #55c17e;
}
/* 校正中 */
.state_delivered {
  background-color: #666;
}
/* 納品済 */
.state_estimate_create {
  background-color: #bd5d5d;
}
/* 待機中 */
.state_stand {
  background-color: #836f89;
}
/* 見積作成中 */
.state_estimate_presentation {
  background-color: #7fbd5d;
}
/* 見積提示中 */
.state_op_production {
  background-color: #a36830;
}
/* オプション制作中 */
/**-----------------------------------------------
注文詳細
-----------------------------------------------**/
.mypage_flow {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  margin: 0 30px 30px;
  padding-top: 15px;
}
@media screen and (max-width: 480px) {
  .mypage_flow {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 25vw;
    margin: 0 0 30px;
    padding: 10px 0 0 13px;
  }
}
.mypage_flow:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -2;
  top: 18px;
  width: 100%;
  height: 5px;
  margin: 0 auto;
  background-color: #CCC;
  border-radius: 100px;
}
@media screen and (max-width: 480px) {
  .mypage_flow:before {
    display: none;
  }
}
.mypage_flow li {
  text-align: center;
}
@media screen and (max-width: 480px) {
  .mypage_flow li {
    position: relative;
    text-align: left;
    margin-bottom: 10px;
  }
  .mypage_flow li:before {
    content: "";
    display: block;
    position: absolute;
    z-index: -2;
    top: -10px;
    left: 7px;
    width: 5px;
    height: calc(100% + 20px);
    background-color: #CCC;
    border-radius: 100px;
  }
}
@media screen and (max-width: 480px) {
  .mypage_flow li.active span {
    padding-left: 5px;
  }
}
.mypage_flow li.active span:after {
  content: "";
  display: block;
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  background-color: #0abab5;
  border-radius: 100px;
}
@media screen and (max-width: 480px) {
  .mypage_flow li.active span:after {
    top: -6px;
    left: -3px;
    right: auto;
    width: 26px;
    height: 26px;
  }
}
.mypage_flow li.active span:before {
  top: 0;
  border: none;
  background-color: #FFF;
}
@media screen and (max-width: 480px) {
  .mypage_flow li.active span:before {
    margin-right: 15px;
  }
}
.mypage_flow li span {
  display: block;
  position: relative;
  padding-top: 30px;
  font-size: 0.812rem;
}
@media screen and (max-width: 480px) {
  .mypage_flow li span {
    display: flex;
    align-items: center;
    padding: 0;
  }
}
.mypage_flow li span:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 0;
  right: 0;
  width: 10px;
  height: 10px;
  margin: 0 auto;
  border: 5px solid #FFF;
  background-color: #666;
  border-radius: 100px;
}
@media screen and (max-width: 480px) {
  .mypage_flow li span:before {
    position: static;
    top: 0;
    left: 20px;
    right: auto;
    margin-right: 10px;
  }
}
.mypage_order_detail_announcement {
  padding: 20px;
  margin-bottom: 30px;
  text-align: center;
  background-color: #EEE;
}
.mypage_order_detail_list {
  margin-bottom: 40px;
}
.mypage_order_detail_list dl {
  display: flex;
  margin-bottom: 20px;
}
@media screen and (max-width: 480px) {
  .mypage_order_detail_list dl {
    display: block;
  }
}
.mypage_order_detail_list dt {
  width: 120px;
  margin-right: 20px;
  font-weight: bold;
}
@media screen and (max-width: 480px) {
  .mypage_order_detail_list dt {
    margin: 0 0 5px;
  }
}
.mypage_order_detail_list dd {
  flex: 1;
}
.mypage_order_detail_list .state_color {
  margin-right: 20px;
}
.mypage_order_detail_list .parts_flex {
  align-items: center;
}
@media screen and (max-width: 480px) {
  .mypage_order_detail_list .parts_flex .parts_flex {
    margin-top: 10px;
  }
}
.mypage_order_detail_list .flex_original {
  align-items: flex-start;
}
.mypage_order_detail_list .img {
  width: 150px;
  margin-right: 20px;
}
.mypage_order_detail_list .content span {
  display: block;
  margin-bottom: 10px;
}
.mypage_order_detail_list .content strong {
  display: block;
}
.mypage_order_detail_list .content .var {
  font-size: 0.875rem;
}
.mypage_order_detail_list .content .var:before {
  content: "-";
  margin-right: 5px;
}
/**-----------------------------------------------
コメントツール
-----------------------------------------------**/
.mypage_order_comment_detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
@media screen and (max-width: 480px) {
  .mypage_order_comment_detail {
    flex-wrap: wrap;
  }
  .mypage_order_comment_detail .btn_xs {
    text-align: right;
  }
}
.mypage_order_comment_detail .detail {
  display: flex;
}
.mypage_order_comment_detail .detail dl {
  display: flex;
  margin-right: 50px;
}
@media screen and (max-width: 480px) {
  .mypage_order_comment_detail .detail dl {
    display: block;
    margin-right: 20px;
  }
  .mypage_order_comment_detail .detail dl:last-child {
    margin-right: 0;
  }
}
.mypage_order_comment_detail .detail dt {
  font-weight: bold;
  margin-right: 20px;
}
@media screen and (max-width: 480px) {
  .mypage_order_comment_detail .detail dt {
    margin: 0 0 5px;
  }
}
.mypage_order_comment_list {
  height: 600px;
  padding: 20px;
  margin-bottom: 30px;
  overflow-y: scroll;
  border: 1px solid #CCC;
}
@media screen and (max-width: 480px) {
  .mypage_order_comment_list {
    height: 60vh;
    padding: 10px;
    margin-bottom: 20px;
  }
}
.mypage_order_comment_list .content {
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid #CCC;
}
@media screen and (max-width: 480px) {
  .mypage_order_comment_list .content {
    padding: 10px;
    margin-bottom: 20px;
  }
}
.mypage_order_comment_list .content:last-child {
  margin-bottom: 0;
}
.mypage_order_comment_list .content.post_official {
  background-color: #f0f9f9;
}
.mypage_order_comment_list .content .info {
  display: flex;
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-size: 0.875rem;
  border-bottom: 1px solid #CCC;
}
.mypage_order_comment_list .content .info time {
  margin-right: 40px;
}
.mypage_order_comment_list .content .link {
  margin-top: 20px;
  padding-left: 1.5em;
}
.mypage_order_comment_list .content .link li {
  font-size: 0.875rem;
  margin-bottom: 5px;
  list-style: disc outside;
}
.mypage_order_comment_list .content .link li:last-child {
  margin-bottom: 0;
}
.mypage_order_comment_list .content .btn_button {
  margin-top: 30px;
}
.mypage_order_comment_area .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media screen and (max-width: 480px) {
  .mypage_order_comment_area .head {
    flex-wrap: wrap;
  }
  .mypage_order_comment_area .head strong {
    margin-bottom: 5px;
  }
  .mypage_order_comment_area .head .btn_xs {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
  .mypage_order_comment_area .head .btn_xs button {
    padding: 8px 30px 8px 20px;
    font-size: 0.687rem;
  }
  .mypage_order_comment_area .head .btn_xs button:first-child {
    margin-right: 10px;
  }
}
/**-----------------------------------------------
帳票発行
-----------------------------------------------**/
.mypage_document {
  margin-bottom: 50px;
}
.mypage_document li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #CCC;
}
.mypage_document li .content {
  flex: 1;
}
@media screen and (max-width: 480px) {
  .mypage_document li .content {
    flex: auto;
    width: 100%;
    margin-bottom: 10px;
  }
}
.mypage_document li .content .date {
  display: flex;
  font-size: 0.875rem;
  margin-bottom: 5px;
}
.mypage_document li .content .date span {
  margin-right: 5px;
}
.mypage_document li .content .date time {
  font-size: 0.875rem;
}
.mypage_document li .content strong {
  display: block;
  font-size: 1.125rem;
}
.mypage_document li .btn_xs {
  margin-left: 10px;
}
/**-----------------------------------------------
デザイン検索
-----------------------------------------------**/
.search_mv {
  position: relative;
  padding: 70px 0;
  background-image: url(../images/search/search_mv_bg_01.png), url(../images/search/search_mv_bg_02.png);
  background-position: top left, bottom right;
  background-repeat: no-repeat, no-repeat;
  background-color: #CCE8E8;
}
@media screen and (max-width: 480px) {
  .search_mv {
    padding: 50px 0;
  }
}
.search_mv .search_box + .btn_button button {
  background-color: #E9629B;
  border-color: #E9629B;
}
.search_area {
  background-image: url(../images/search/search_bg_01.png), url(../images/search/search_bg_02.png);
  background-position: top right, top left;
  background-repeat: repeat-y, repeat-y;
  padding: 120px 0 1px;
}
@media screen and (max-width: 480px) {
  .search_area {
    padding-top: 60px;
  }
}
.search_area .sort_btn {
  display: flex;
  margin-bottom: 20px;
}
.search_area .sort_btn li {
  width: 150px;
  margin-right: 15px;
}
@media screen and (max-width: 480px) {
  .search_area .sort_btn li {
    width: calc((100% - 20px) / 3);
    margin-right: 10px;
  }
  .search_area .sort_btn li:last-child {
    margin-right: 0;
  }
}
.search_area .sort_btn li button {
  color: #0abab5;
  font-size: 1.125rem;
  width: 100%;
  cursor: pointer;
  text-align: center;
  border: 1px solid #0abab5;
  background-color: #FFF;
  border-radius: 100px;
}
.search_area .sort_btn li button.active {
  color: #FFF;
  background-color: #0abab5;
}
.search_area .results_count {
  text-align: right;
  margin-bottom: 10px;
}
.search_area .design_list li {
  background-color: #F4F4F4;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.search_area .design_list li .img {
  background-color: #FFF;
}
/* 検索エリア */
.search_box {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  width: 950px;
  margin: 0 auto 40px;
}
@media screen and (max-width: 1024px) {
  .search_box {
    display: block;
    width: 80%;
  }
}
@media screen and (max-width: 480px) {
  .search_box {
    width: 90%;
  }
}
.search_box:before {
  display: block;
  content: "";
  position: absolute;
  z-index: -1;
  left: -160px;
  top: 40px;
  width: 211px;
  height: 301px;
  background: url(../images/index/search_bg_01.png) no-repeat 0 0;
}
@media screen and (max-width: 480px) {
  .search_box:before {
    display: none;
  }
}
.search_box:after {
  display: block;
  content: "";
  position: absolute;
  z-index: -1;
  right: -180px;
  bottom: -150px;
  width: 226px;
  height: 227px;
  background: url(../images/index/search_bg_02.png) no-repeat 0 0;
}
@media screen and (max-width: 480px) {
  .search_box:after {
    display: none;
  }
}
.search_box + .btn_button button {
  background-color: #0abab5;
  border-color: #0abab5;
}
.search_box .left {
  width: 400px;
}
@media screen and (max-width: 1024px) {
  .search_box .left {
    width: auto;
    margin-bottom: 30px;
  }
}
.search_box .left .keyword {
  display: flex;
  margin-bottom: 30px;
}
.search_box .left .keyword input {
  padding: 8px 10px;
  border: 1px solid #0abab5;
  border-radius: 10px 0 0 10px;
}
.search_box .left .keyword button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  border: none;
  background-color: #0abab5;
  border-radius: 0 10px 10px 0;
}
.search_box .left .keyword button:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  content: "\f002";
  font-weight: bold;
  color: #FFF;
}
.search_box .left .target {
  padding: 15px;
  background-color: #FFF;
  border: 1px solid #0abab5;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.search_box .right {
  width: 530px;
  padding: 15px;
  background-color: #FFF;
  border: 1px solid #0abab5;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
@media screen and (max-width: 1024px) {
  .search_box .right {
    width: auto;
  }
}
.search_box .title {
  display: block;
  color: #003399;
  font-size: 1.312rem;
  margin-bottom: 20px;
}
.search_box dl {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.search_box dl.age dd {
  display: flex;
  align-items: center;
}
.search_box dl.age dd span {
  margin: 0 10px;
}
.search_box dl.shape {
  align-items: flex-start;
}
.search_box dl.shape dt {
  padding: 8px 0;
}
.search_box dl.genre {
  display: block;
  margin-bottom: 0;
}
.search_box dt {
  font-weight: bold;
  margin-right: 20px;
}
.search_box dd {
  flex: 1;
}
.search_box .checkbox_list {
  margin-top: 10px;
}
.design_list {
  display: flex;
  flex-wrap: wrap;
}
.design_list li {
  display: flex;
  flex-direction: column;
  width: 250px;
  margin: 0 32px 80px 0;
  background-color: #FFF;
  border-radius: 10px;
}
.design_list li:nth-child(4n) {
  margin-right: 0;
}
@media screen and (max-width: 1024px) {
  .design_list li:nth-child(4n) {
    margin-right: 2%;
  }
}
@media screen and (max-width: 480px) {
  .design_list li:nth-child(4n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 1024px) {
  .design_list li {
    width: 32%;
    margin: 0 2% 5% 0;
  }
  .design_list li:nth-child(3n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 480px) {
  .design_list li {
    width: 48%;
    margin-right: 4%;
  }
  .design_list li:nth-child(3n) {
    margin-right: 4%;
  }
  .design_list li:nth-child(2n) {
    margin-right: 0;
  }
}
.design_list li a {
  color: #000000;
  text-decoration: none;
}
.design_list li a:hover {
  opacity: 0.6;
}
.design_list li .img {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.design_list li .img:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0.8;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border: 7px solid #C6E5E1;
}
.design_list li .img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.design_list li .shape {
  padding: 0 10px;
  margin-bottom: 5px;
  font-size: 0.687rem;
}
.design_list li .genre {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.687rem;
  padding: 0 10px;
  margin-bottom: 10px;
}
.design_list li .genre span:after {
  content: "/";
  margin: 0 5px;
}
.design_list li .genre span:last-child:after {
  display: none;
}
.design_list li .design {
  flex-grow: 1;
  padding: 0 10px;
  margin-bottom: 10px;
}
.design_list li .design .title {
  display: block;
  margin-bottom: 5px;
  word-break: break-all;
}
.design_list li .design .var {
  display: block;
  font-size: 0.75rem;
  word-break: break-all;
}
.design_list li .user {
  display: flex;
  justify-content: space-between;
  padding: 0 10px 10px;
  font-size: 0.75rem;
}
@media screen and (max-width: 1024px) {
  .design_list li .user {
    flex-direction: column;
  }
}
.design_list li .user .name {
  display: flex;
  align-items: center;
}
.design_list li .user .name:before {
  display: block;
  content: "";
  width: 25px;
  height: 27px;
  margin-right: 5px;
  background: url(../images/common/icon_user.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .design_list li .user .name:before {
    width: 18px;
    height: 20px;
  }
}
.design_list li .user .name span {
  flex: 1;
}
@media screen and (max-width: 1024px) {
  .design_list li .user .name {
    margin-bottom: 5px;
  }
}
.design_list li .user .name span {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 1024px) {
  .design_list li .user .name span {
    max-width: calc(100% - 20px);
  }
}
.design_list li .user .count {
  display: flex;
  align-items: center;
}
.design_list li .user .count:before {
  display: block;
  content: "";
  width: 27px;
  height: 25px;
  margin-right: 5px;
  background: url(../images/common/icon_count.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .design_list li .user .count:before {
    width: 18px;
    height: 17px;
  }
}
.design_list li .user .count span {
  flex: 1;
}
.design_list li .user .count span {
  max-width: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 1024px) {
  .design_list li .user .count span {
    max-width: calc(100% - 20px);
  }
}
/**-----------------------------------------------
ご利用ガイド
-----------------------------------------------**/
.guide_mv {
  position: relative;
  padding: 100px 0 150px;
  text-align: center;
}
@media screen and (max-width: 480px) {
  .guide_mv {
    padding: 50px 0 80px;
  }
  .guide_mv img {
    max-width: 60%;
  }
}
.guide_mv:before {
  display: block;
  content: "";
  position: absolute;
  top: 16%;
  left: 8%;
  width: 310px;
  height: 355px;
  background: url(../images/guide/guide_mv_bg_01.png) no-repeat 0 0;
}
@media screen and (max-width: 1024px) {
  .guide_mv:before {
    top: auto;
    bottom: 15px;
    left: 2%;
    width: 30vw;
    height: 34vw;
    background-size: contain;
  }
}
@media screen and (max-width: 480px) {
  .guide_mv:before {
    bottom: -20px;
  }
}
.guide_mv:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 4%;
  width: 505px;
  height: 634px;
  background: url(../images/guide/guide_mv_bg_02.png) no-repeat 0 0;
}
@media screen and (max-width: 1024px) {
  .guide_mv:after {
    top: auto;
    bottom: -40px;
    right: 2%;
    width: 35vw;
    height: 44vw;
    background-size: contain;
  }
}
.guide_mv .section {
  position: relative;
  z-index: 1;
}
.guide_mv .section .text {
  font-size: 1.312rem;
  margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
  .guide_mv .section .text {
    font-size: 1rem;
  }
}
.guide_copy {
  padding: 50px 0;
  background-color: #EBF9FD;
  background-image: url(../images/guide/guide_copy_bg_01.png), url(../images/guide/guide_copy_bg_02.png);
  background-position: top left, top right;
  background-repeat: no-repeat, no-repeat;
}
@media screen and (max-width: 1024px) {
  .guide_copy {
    background-size: contain;
  }
}
@media screen and (max-width: 480px) {
  .guide_copy {
    background-image: none;
  }
}
.guide_copy .section {
  font-size: 1.125rem;
  text-align: center;
  line-height: 1.8 !important;
}
@media screen and (max-width: 480px) {
  .guide_copy .section {
    font-size: 1em;
  }
}
.guide_concept {
  padding: 50px 0;
  text-align: center;
  background-color: #C8E8ED;
}
.guide_concept .section {
  max-width: 1200px;
}
.guide_concept .text {
  display: inline-block;
  text-align: left;
  margin-bottom: 30px;
  line-height: 1.8 !important;
}
.guide_concept .align_r {
  margin: 10px 0 30px;
}
@media screen and (max-width: 480px) {
  .guide_concept .align_r {
    font-size: 0.75rem;
  }
}
.guide_account {
  padding: 50px 0;
  overflow: hidden;
  background-color: #EBF9FD;
}
@media screen and (max-width: 1024px) {
  .guide_account {
    padding-bottom: 80px;
  }
}
.guide_account .section {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 480px) {
  .guide_account .section {
    display: block;
  }
}
.guide_account .section > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 362px;
  height: 362px;
  padding: 80px 40px 0;
  text-shadow: 1px 0px 0px #ffffff, 0px 1px 0px #ffffff, -1px 0px 0px #ffffff, 0px -1px 0px #ffffff;
  background-color: #FFF;
  border-radius: 100%;
}
@media screen and (max-width: 1024px) {
  .guide_account .section > * {
    width: 40vw;
    height: 40vw;
    padding: 7vw 4vw 0;
  }
}
@media screen and (max-width: 480px) {
  .guide_account .section > * {
    width: 70vw;
    height: 70vw;
    padding-top: 10vw;
  }
}
.guide_account .section .title {
  color: #003399;
  font-size: 1.562rem;
  margin-bottom: 30px;
}
.guide_account .section li {
  list-style: disc outside;
  margin-left: 2em;
  margin-bottom: 5px;
}
.guide_account .section p {
  text-indent: -1em;
  padding-left: 2em;
  font-size: 0.875rem;
}
.guide_account .section .premium {
  margin-right: 100px;
}
@media screen and (max-width: 1024px) {
  .guide_account .section .premium {
    margin-right: 40px;
  }
}
.guide_account .section .premium:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -150px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 311px;
  height: 330px;
  background: url(../images/guide/guide_account_img_01.png) no-repeat 0 0;
}
@media screen and (max-width: 1024px) {
  .guide_account .section .premium:before {
    top: auto;
    bottom: -30px;
    left: -30px;
    width: 19vw;
    height: 20vw;
    background-size: contain;
  }
}
@media screen and (max-width: 480px) {
  .guide_account .section .premium:before {
    left: -10px;
    width: 30vw;
    height: 32vw;
  }
}
@media screen and (max-width: 480px) {
  .guide_account .section .creator {
    margin: 0 0 0 auto;
  }
}
.guide_account .section .creator:before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -170px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 259px;
  height: 319px;
  background: url(../images/guide/guide_account_img_02.png) no-repeat 0 0;
}
@media screen and (max-width: 1024px) {
  .guide_account .section .creator:before {
    top: auto;
    bottom: -30px;
    right: -30px;
    width: 19vw;
    height: 20vw;
    background-size: contain;
  }
}
@media screen and (max-width: 480px) {
  .guide_account .section .creator:before {
    bottom: -10px;
    right: -10px;
    width: 30vw;
    height: 37vw;
  }
}
.guide_feature {
  padding: 50px 0;
  text-align: center;
}
@media screen and (max-width: 480px) {
  .guide_feature {
    padding-bottom: 0;
  }
}
.guide_feature .lp_page_title {
  display: inline-block;
  position: relative;
  margin-bottom: 100px;
}
@media screen and (max-width: 1024px) {
  .guide_feature .lp_page_title {
    margin-bottom: 50px;
  }
}
.guide_feature .lp_page_title:before {
  content: "";
  position: absolute;
  left: -200px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 173px;
  height: 193px;
  background: url(../images/guide/guide_feature_title_img.png) no-repeat 0 0;
}
@media screen and (max-width: 1024px) {
  .guide_feature .lp_page_title:before {
    display: none;
  }
}
.guide_feature .guide_feature_block {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .guide_feature .guide_feature_block {
    flex-direction: column-reverse;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
}
.guide_feature .guide_feature_block:nth-child(2n+1) {
  flex-direction: row-reverse;
}
@media screen and (max-width: 480px) {
  .guide_feature .guide_feature_block:nth-child(2n+1) {
    flex-direction: column-reverse;
  }
}
.guide_feature .guide_feature_block:nth-child(2n+1) div {
  padding-left: 50px;
}
@media screen and (max-width: 1024px) {
  .guide_feature .guide_feature_block:nth-child(2n+1) div {
    padding: 0 4vw;
  }
}
.guide_feature .guide_feature_block div {
  width: 750px;
  padding-left: 200px;
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .guide_feature .guide_feature_block div {
    width: 50%;
    padding: 0 4vw;
  }
}
@media screen and (max-width: 480px) {
  .guide_feature .guide_feature_block div {
    width: 100%;
  }
}
.guide_feature .guide_feature_block div .title {
  color: #003399;
  font-size: 1.312rem;
  margin-bottom: 40px;
}
@media screen and (max-width: 1024px) {
  .guide_feature .guide_feature_block div .title {
    margin-bottom: 20px;
  }
}
.guide_feature .guide_feature_block div p {
  font-weight: bold;
  line-height: 2 !important;
}
@media screen and (max-width: 1024px) {
  .guide_feature .guide_feature_block div p {
    font-size: 0.875rem;
    line-height: 1.4 !important;
  }
}
@media screen and (max-width: 1024px) {
  .guide_feature .guide_feature_block figure {
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  .guide_feature .guide_feature_block figure {
    width: 100%;
    margin-bottom: 40px;
  }
}
.lp_page_title {
  color: #003399;
  font-size: 2.25rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
  .lp_page_title {
    font-size: 1.8rem;
  }
}
/* 豊富な種類のデザイン */
.type_block {
  text-align: center;
  padding: 50px 0;
}
.type_block .lp_page_title {
  display: inline-block;
  position: relative;
}
.type_block .lp_page_title:before {
  display: block;
  content: "";
  position: absolute;
  top: -50px;
  bottom: 0;
  right: -170px;
  margin: auto;
  width: 146px;
  height: 158px;
  background: url(../images/guide/type_block_title_img.png) no-repeat 0 0;
}
@media screen and (max-width: 480px) {
  .type_block .lp_page_title:before {
    display: none;
  }
}
.type_block .text {
  text-align: center;
  margin-bottom: 40px;
}
.type_block .type_list {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 480px) {
  .type_block .type_list {
    flex-wrap: wrap;
  }
}
.type_block .type_list dl {
  display: flex;
  flex-direction: column;
  width: 340px;
  margin-right: 40px;
}
.type_block .type_list dl:last-child {
  margin-right: 0;
}
@media screen and (max-width: 480px) {
  .type_block .type_list dl {
    width: calc((100% - 5%) / 2);
    margin: 0 5% 5% 0;
  }
  .type_block .type_list dl:nth-child(2n) {
    margin-right: 0;
  }
}
.type_block .type_list dt {
  color: #FFF;
  padding: 10px;
  text-align: center;
  font-size: 1.312rem;
  font-weight: bold;
  background-color: #0abab5;
  border-radius: 10px 10px 0 0;
}
@media screen and (max-width: 480px) {
  .type_block .type_list dt {
    font-size: 1.125rem;
  }
}
.type_block .type_list dd {
  flex: 1 0 auto;
  text-align: left;
  padding: 15px 10px;
  border: 1px solid #CCC;
  border-top: none;
}
.type_block .type_list dd li {
  list-style: disc outside;
  margin-left: 2em;
  margin-bottom: 5px;
}
.type_block.premium_type_block {
  padding: 80px 0;
}
.type_block.premium_type_block .lp_page_title {
  margin-bottom: 60px;
}
.type_block.premium_type_block .lp_page_title:before {
  top: -20px;
  width: 691px;
  height: 110px;
  background: url(../images/premium/type_block_title_bg.png) no-repeat center center;
}
/* アイデザをもっと詳しく知る */
.type_more {
  padding: 90px 0;
  text-align: center;
  background-color: #FF65A7;
  /* 色変え */
}
@media screen and (max-width: 480px) {
  .type_more {
    padding: 60px 0;
  }
}
.type_more .section {
  position: relative;
}
.type_more .section:before {
  position: absolute;
  content: "";
  left: -90px;
  top: 0;
  width: 140px;
  height: 118px;
  background: url(../images/guide/type_more_01.png) no-repeat 0 0;
}
@media screen and (max-width: 1222px) {
  .type_more .section:before {
    left: 2%;
  }
}
@media screen and (max-width: 1024px) {
  .type_more .section:before {
    top: -60px;
    width: 16vw;
    background-size: contain;
  }
}
.type_more .section:after {
  position: absolute;
  content: "";
  right: -60px;
  bottom: -120px;
  width: 90px;
  height: 231px;
  background: url(../images/guide/type_more_02.png) no-repeat 0 0;
}
@media screen and (max-width: 1222px) {
  .type_more .section:after {
    right: 2%;
  }
}
@media screen and (max-width: 1024px) {
  .type_more .section:after {
    bottom: -160px;
    width: 10vw;
    background-size: contain;
  }
}
.type_more .title {
  display: block;
  color: #FFF;
  font-size: 2.25rem;
  margin-bottom: 70px;
  text-shadow: 6px 6px 0 #D13F85;
}
@media screen and (max-width: 480px) {
  .type_more .title {
    font-size: 1.8rem;
    margin-bottom: 40px;
  }
}
.type_more .link {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 480px) {
  .type_more .link div {
    width: calc((100% - 20px) / 2);
  }
}
.type_more .link div:first-child {
  margin-right: 90px;
}
@media screen and (max-width: 1024px) {
  .type_more .link div:first-child {
    margin-right: 50px;
  }
}
@media screen and (max-width: 480px) {
  .type_more .link div:first-child {
    margin-right: 20px;
  }
}
.type_more .link a {
  display: block;
  color: #003399;
  width: 400px;
  padding: 35px 0;
  font-size: 1.312rem;
  font-weight: bold;
  text-decoration: none;
  background-color: #FFF;
  border-radius: 25px;
}
@media screen and (max-width: 1024px) {
  .type_more .link a {
    width: 320px;
  }
}
@media screen and (max-width: 480px) {
  .type_more .link a {
    width: 100%;
    padding: 20px 0;
    font-size: 1.1rem;
  }
}
.type_more.type_more_2 {
  background-color: #367DD1;
}
.type_more.type_more_2 .section {
  position: relative;
}
.type_more.type_more_2 .section:before,
.type_more.type_more_2 .section:after {
  display: none;
}
.type_more.type_more_2 .title {
  text-shadow: 6px 6px 0 #246BB2;
}
/* 今すぐ始める */
.cta_both {
  padding: 60px 0;
  text-align: center;
  background-color: #FFD22E;
}
@media screen and (max-width: 480px) {
  .cta_both {
    padding: 40px 0;
  }
  .cta_both .btn {
    width: calc((100% - 20px) / 2);
  }
  .cta_both .btn a {
    width: 100%;
  }
}
.cta_both .section {
  position: relative;
}
.cta_both .title {
  display: block;
  color: #333;
  font-size: 2.25rem;
  text-shadow: 5px 4px 0px #dbb12a;
  margin-bottom: 50px;
}
@media screen and (max-width: 1200px) {
  .cta_both .title {
    padding-right: 100px;
  }
}
@media screen and (max-width: 1024px) {
  .cta_both .title {
    font-size: 1.8rem;
    padding: 0;
  }
}
@media screen and (max-width: 480px) {
  .cta_both .title {
    line-height: 1.4;
    margin-bottom: 30px;
  }
}
.cta_both .title:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  right: -30px;
  bottom: -45px;
  width: 298px;
  height: 297px;
  background: url(../images/guide/cta_both_bg.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1200px) {
  .cta_both .title:after {
    right: 0;
  }
}
@media screen and (max-width: 1024px) {
  .cta_both .title:after {
    z-index: 0;
    width: 200px;
    height: 203px;
    bottom: -85px;
  }
}
@media screen and (max-width: 480px) {
  .cta_both .title:after {
    position: static;
    width: 130px;
    height: 132px;
    margin: 20px auto 0;
  }
}
.cta_both .btn_area {
  display: flex;
  justify-content: center;
}
.cta_both .btn_area .btn:first-child {
  margin-right: 70px;
}
@media screen and (max-width: 480px) {
  .cta_both .btn_area .btn:first-child {
    margin-right: 20px;
  }
}
.cta_both.cta_both_creator {
  background-color: #FF65A7;
}
.cta_both.cta_both_creator .title {
  color: #FFF;
  text-shadow: 5px 4px 0px #D13F85;
}
.cta_both.cta_both_creator .title:after {
  z-index: 0;
  width: 344px;
  height: 347px;
  background-image: url(../images/creator/cta_bg_05.png);
}
@media screen and (max-width: 1024px) {
  .cta_both.cta_both_creator .title:after {
    bottom: 50px;
    width: 30vw;
    height: 31vw;
    background-size: contain;
  }
}
@media screen and (max-width: 480px) {
  .cta_both.cta_both_premium .btn {
    width: 80%;
    margin: 0 auto;
  }
}
.cta_both.cta_both_premium .title:after {
  width: 291px;
  height: 269px;
  right: -90px;
  background-image: url(../images/premium/cta_both_bg.png);
}
@media screen and (max-width: 1024px) {
  .cta_both.cta_both_premium .title:after {
    width: 25vw;
    height: 23vw;
    right: 2vw;
  }
}
.cta_both.cta_both_premium_2 {
  background-color: #EC6FA4;
}
@media screen and (max-width: 480px) {
  .cta_both.cta_both_premium_2 .btn {
    width: 80%;
    margin: 0 auto;
  }
}
.cta_both.cta_both_premium_2 .title {
  color: #FFF;
  text-shadow: none;
}
.cta_both.cta_both_premium_2 .title:after {
  display: none;
}
/**-----------------------------------------------
クリエイター会員の方
-----------------------------------------------**/
.creator_mv {
  text-align: center;
  background-image: url(../images/creator/creator_mv_bg_01.png), url(../images/creator/creator_mv_bg_02.png);
  background-position: 98% center,5% center;
  background-repeat: no-repeat, no-repeat;
}
@media screen and (max-width: 1360px) {
  .creator_mv {
    background-size: 30% auto , 25% auto;
    background-position: 98% 90%,2% 10%;
  }
}
.creator_mv .section {
  padding: 90px 0;
}
@media screen and (max-width: 1024px) {
  .creator_mv .section {
    background-color: rgba(255, 255, 255, 0.5);
  }
}
@media screen and (max-width: 480px) {
  .creator_mv .section {
    padding: 50px 0;
  }
}
.creator_mv .title {
  color: #003399;
  font-size: 2.25rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.6;
}
@media screen and (max-width: 480px) {
  .creator_mv .title {
    font-size: 1.8rem;
  }
}
.creator_mv p {
  font-size: 1.312rem;
}
@media screen and (max-width: 480px) {
  .creator_mv p {
    font-size: 1rem;
  }
}
.creator_copy {
  padding: 50px 0;
  background-color: #EBF9FD;
  background-image: url(../images/creator/creator_copy_bg_01.png), url(../images/creator/creator_copy_bg_02.png), url(../images/creator/creator_copy_bg_03.png);
  background-position: left top,right top,right bottom;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
@media screen and (max-width: 1024px) {
  .creator_copy {
    background-image: url(../images/creator/creator_copy_bg_01.png), url(../images/creator/creator_copy_bg_03.png);
    background-position: left top,right bottom;
  }
}
.creator_copy .block {
  display: flex;
  margin-bottom: 60px;
}
@media screen and (max-width: 480px) {
  .creator_copy .block {
    display: block;
  }
}
.creator_copy .block figure {
  margin-right: 50px;
}
@media screen and (max-width: 480px) {
  .creator_copy .block figure {
    margin: 0 0 10px;
    text-align: center;
  }
}
.creator_copy .block .text {
  flex: 1;
}
.creator_copy .block .text .title {
  display: block;
  color: #003399;
  font-size: 1.312rem;
  margin: 10px 0 20px;
}
.creator_copy .block .text p {
  font-weight: bold;
  line-height: 2 !important;
}
.creator_flow {
  overflow: hidden;
  padding: 50px 0;
  background-color: #EBF9FD;
}
.flow_area {
  position: relative;
  z-index: 1;
}
.flow_area .block {
  display: flex;
  position: relative;
  padding: 10px;
  margin: 0 60px 45px 90px;
  background-color: #FFF;
  border: 5px solid #B3B3B3;
}
@media screen and (max-width: 1024px) {
  .flow_area .block {
    margin-left: 0;
    margin-right: 0;
  }
}
@media screen and (max-width: 480px) {
  .flow_area .block {
    display: block;
  }
}
.flow_area .block:after {
  display: block;
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: 5px solid #B3B3B3;
}
.flow_area .block .number {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -40px;
  left: -40px;
  width: 80px;
  height: 80px;
  color: #FFF;
  font-size: 3rem;
  font-weight: bold;
  background-color: #0abab5;
  border-radius: 100%;
}
@media screen and (max-width: 480px) {
  .flow_area .block .number {
    left: -5%;
  }
}
.flow_area .block figure {
  margin-right: 30px;
}
@media screen and (max-width: 480px) {
  .flow_area .block figure {
    margin-right: 0;
    text-align: center;
  }
}
.flow_area .block .text {
  padding-top: 20px;
}
@media screen and (max-width: 1024px) {
  .flow_area .block .text {
    padding: 10px 0;
  }
}
.flow_area .block .title {
  font-size: 1.875rem;
  margin-bottom: 20px;
}
.flow_area .block .btn_xs {
  margin-top: 20px;
}
.flow_area .block .btn_xs a {
  border-radius: 5px;
}
.flow_area .arrow {
  position: relative;
  margin-bottom: 55px;
}
.flow_area .arrow:before {
  display: block;
  content: "";
  width: 40px;
  height: 30px;
  margin: 0 auto;
  background-color: #CCC;
}
.flow_area .arrow:after {
  display: block;
  content: "";
  margin: 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 70px 75px 0 75px;
  border-color: #CCC transparent transparent transparent;
}
.data_provision {
  padding: 60px 0;
  text-align: center;
  background-color: #367DD1;
}
@media screen and (max-width: 480px) {
  .data_provision {
    padding: 40px 0;
  }
}
.data_provision .section {
  position: relative;
}
.data_provision .section:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: -150px;
  bottom: -40px;
  width: 298px;
  height: 297px;
  background: url(../images/creator/data_provision_bg.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1400px) {
  .data_provision .section:after {
    left: -20px;
  }
}
@media screen and (max-width: 1024px) {
  .data_provision .section:after {
    width: 25vw;
    height: 29vw;
    bottom: -6vw;
  }
}
@media screen and (max-width: 480px) {
  .data_provision .section:after {
    position: static;
    width: 130px;
    height: 132px;
    margin: 20px auto 0;
  }
}
.data_provision .title {
  display: block;
  color: #FFF;
  font-size: 2.25rem;
  text-shadow: 5px 4px 0px #246BB2;
  margin-bottom: 50px;
}
@media screen and (max-width: 1024px) {
  .data_provision .title {
    font-size: 1.8rem;
    padding: 0;
  }
}
@media screen and (max-width: 480px) {
  .data_provision .title {
    line-height: 1.4;
    margin-bottom: 30px;
  }
}
/**-----------------------------------------------
プレミアム会員の方
-----------------------------------------------**/
.premium_mv {
  text-align: center;
  background: url(../images/premium/premium_mv_title_bg.png) no-repeat center 20px;
}
.premium_mv .section {
  padding: 30px 0;
}
@media screen and (max-width: 1024px) {
  .premium_mv .section {
    background: none;
  }
}
.premium_mv .title {
  color: #003399;
  font-size: 3rem;
  font-weight: bold;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.6;
}
@media screen and (max-width: 1024px) {
  .premium_mv .title {
    font-size: 2.4rem;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 480px) {
  .premium_mv .title {
    font-size: 1.8rem;
  }
}
.premium_mv .text {
  display: flex;
  justify-content: space-between;
  color: #003399;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
@media screen and (max-width: 1024px) {
  .premium_mv .text {
    display: block;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 480px) {
  .premium_mv .text {
    font-size: 1.1rem;
  }
}
.premium_copy {
  padding: 20px 0;
  background-color: #EDF8FB;
  background-image: url(../images/premium/premium_copy_bg_01.png), url(../images/premium/premium_copy_bg_02.png);
  background-repeat: no-repeat, no-repeat;
  background-position: right 0,left 0 ;
}
@media screen and (max-width: 480px) {
  .premium_copy {
    padding: 20px 0 40px;
  }
}
.premium_copy .section {
  display: flex;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 480px) {
  .premium_copy .section {
    display: block;
  }
  .premium_copy .section figure {
    text-align: center;
    max-width: 89%;
    margin: 0 auto 10px;
  }
}
.premium_copy .section:before {
  display: block;
  content: "";
  position: absolute;
  right: -10px;
  bottom: -20px;
  width: 200px;
  height: 192px;
  background: url(../images/premium//premium_copy_img_02.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .premium_copy .section:before {
    right: 1vw;
    bottom: -5vw;
    width: 20vw;
    height: 20vw;
  }
}
@media screen and (max-width: 480px) {
  .premium_copy .section:before {
    bottom: -15vw;
  }
}
.premium_copy .section p {
  color: #003399;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
@media screen and (max-width: 1024px) {
  .premium_copy .section p {
    font-size: 1.2rem;
  }
}
.premium_worries {
  padding: 50px 0;
  background: url(../images/data_guide/data_guide_flow_bg.png) repeat 0 0;
}
.premium_worries ul {
  display: flex;
  flex-wrap: wrap;
}
.premium_worries ul li {
  width: 320px;
  margin: 0 70px 60px 0;
}
@media screen and (max-width: 1024px) {
  .premium_worries ul li {
    width: calc(50% - 10px);
    margin-right: 20px;
  }
  .premium_worries ul li:nth-child(2n) {
    margin-right: 0;
  }
}
@media screen and (min-width: 1025px) {
  .premium_worries ul li:nth-child(3n) {
    margin-right: 0;
  }
}
.premium_worries ul li:nth-child(1) figure:before {
  border-color: #E7732C transparent transparent transparent;
}
.premium_worries ul li:nth-child(2) figure:before {
  border-color: #DABC3E transparent transparent transparent;
}
.premium_worries ul li:nth-child(3) figure:before {
  border-color: #8CC63F transparent transparent transparent;
}
.premium_worries ul li:nth-child(4) figure:before {
  border-color: #9C72C1 transparent transparent transparent;
}
.premium_worries ul li:nth-child(5) figure:before {
  border-color: #29ABE2 transparent transparent transparent;
}
.premium_worries ul li:nth-child(6) figure:before {
  border-color: #FF7BAC transparent transparent transparent;
}
.premium_worries ul li figure {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 200px;
  text-align: center;
  margin-bottom: 30px;
  background-color: #FFF;
}
@media screen and (max-width: 480px) {
  .premium_worries ul li figure {
    padding: 0 10px;
  }
}
.premium_worries ul li figure:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 62px 62px 0 0;
  border-color: #007bff transparent transparent transparent;
}
.premium_worries ul li strong {
  display: block;
  text-align: center;
  font-size: 1.125rem;
  margin-bottom: 20px;
}
.premium_flow {
  padding: 120px 0;
  background: url(../images/premium/premium_flow_bg.png) no-repeat 70% 55%;
}
@media screen and (max-width: 480px) {
  .premium_flow {
    padding: 50px 0;
  }
}
.premium_flow .lp_page_title {
  position: relative;
  margin-bottom: 100px;
}
.premium_flow .lp_page_title:before {
  display: block;
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  margin: auto;
  width: 411px;
  height: 128px;
  background: url(../images/premium/premium_flow_title_bg.png) no-repeat 0 0;
}
@media screen and (max-width: 480px) {
  .premium_flow .lp_page_title:before {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .premium_flow .lp_page_title {
    margin-bottom: 40px;
  }
}
.premium_flow .block.block_01:before {
  display: block;
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -100px;
  left: -120px;
  width: 172px;
  height: 191px;
  background: url(../images/premium/premium_flow_content_img_01.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .premium_flow .block.block_01:before {
    bottom: -160px;
    left: -20px;
  }
}
@media screen and (max-width: 480px) {
  .premium_flow .block.block_01:before {
    width: 30vw;
    height: 33vw;
  }
}
.premium_flow .block.block_05:before {
  display: block;
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -160px;
  right: -50px;
  width: 203px;
  height: 232px;
  background: url(../images/premium/premium_flow_content_img_02.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .premium_flow .block.block_05:before {
    bottom: -200px;
    right: -30px;
  }
}
@media screen and (max-width: 480px) {
  .premium_flow .block.block_05:before {
    right: -5vw;
    bottom: -24vw;
    width: 30vw;
    height: 35vw;
  }
}
.premium_flow .point {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 100px;
  padding: 10px 10px 10px 200px;
  border: 5px solid #B3B3B3;
}
@media screen and (max-width: 1024px) {
  .premium_flow .point {
    margin-top: 150px;
    padding: 20px;
  }
}
@media screen and (max-width: 480px) {
  .premium_flow .point {
    display: block;
    margin-top: 25vw;
  }
}
.premium_flow .point:before {
  display: block;
  content: "";
  position: absolute;
  top: -40px;
  left: -120px;
  width: 318px;
  height: 120px;
  background: url(../images/premium/premium_flow_content_img_03.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .premium_flow .point:before {
    top: -100px;
    left: -40px;
  }
}
@media screen and (max-width: 480px) {
  .premium_flow .point:before {
    top: -10vw;
    left: 0;
    width: 60vw;
    height: 23vw;
  }
}
.premium_flow .point figure {
  margin-right: 40px;
}
@media screen and (max-width: 1024px) {
  .premium_flow .point figure {
    margin-right: 20px;
  }
}
@media screen and (max-width: 480px) {
  .premium_flow .point figure {
    max-width: 30%;
    margin: 0 0 20px auto;
  }
}
.premium_flow .point strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.875rem;
}
@media screen and (max-width: 1024px) {
  .premium_flow .point strong {
    font-size: 1.7rem;
  }
}
@media screen and (max-width: 480px) {
  .premium_flow .point strong {
    font-size: 1.5rem;
  }
}
.premium_flow .point p {
  font-size: 1.125rem;
}
.premium_progression {
  position: relative;
  padding: 60px 0;
  background-color: #F2F2F2;
}
@media screen and (max-width: 480px) {
  .premium_progression {
    padding: 50px 0;
  }
}
.premium_progression:before {
  display: block;
  content: "";
  position: absolute;
  top: 50px;
  right: 50px;
  width: 174px;
  height: 94px;
  background: url(../images/premium/premium_progression_bg_01.png) no-repeat 0 0;
}
@media screen and (max-width: 1024px) {
  .premium_progression:before {
    display: none;
  }
}
.premium_progression:after {
  display: block;
  content: "";
  position: absolute;
  bottom: -60px;
  left: 30px;
  width: 271px;
  height: 291px;
  background: url(../images/premium/premium_progression_bg_02.png) no-repeat 0 0;
}
@media screen and (max-width: 1024px) {
  .premium_progression:after {
    display: none;
  }
}
.premium_progression .align_c {
  margin-bottom: 30px;
}
.premium_progression .flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 480px) {
  .premium_progression .flow {
    display: block;
  }
}
.premium_progression .flow .sign {
  width: 100px;
  text-align: center;
}
@media screen and (max-width: 480px) {
  .premium_progression .flow .sign {
    width: 50px;
    margin: 0 auto 10px;
  }
}
.premium_plan {
  position: relative;
  z-index: -2;
  padding: 50px 0;
  background: #0abab5 url(../images/premium/premium_plan_bg.png) no-repeat center 90%;
}
@media screen and (max-width: 480px) {
  .premium_plan {
    padding-bottom: 10px;
  }
}
.premium_plan .title {
  color: #FFF;
  text-align: center;
  font-size: 2.25rem;
  margin-bottom: 50px;
}
@media screen and (max-width: 480px) {
  .premium_plan .title {
    margin-bottom: 30px;
  }
}
.premium_plan .block {
  position: relative;
  padding: 40px;
  margin-bottom: 50px;
  text-align: center;
  background-color: #FFF;
}
@media screen and (max-width: 480px) {
  .premium_plan .block {
    padding: 20px;
  }
}
.premium_plan .block:after {
  display: block;
  content: "";
  position: absolute;
  z-index: -1;
  right: -20px;
  bottom: -20px;
  width: 100%;
  height: 100%;
  background-color: #9BEAE6;
}
@media screen and (max-width: 480px) {
  .premium_plan .block:after {
    right: -10px;
    bottom: -10px;
  }
}
.premium_plan .block.block_01:before {
  display: block;
  content: "";
  position: absolute;
  right: -40px;
  top: -60px;
  width: 236px;
  height: 203px;
  background: url(../images/premium/premium_plan_img_01.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .premium_plan .block.block_01:before {
    top: -13vw;
    width: 24vw;
    height: 20vw;
  }
}
@media screen and (max-width: 480px) {
  .premium_plan .block.block_01:before {
    right: -5vw;
  }
}
.premium_plan .block.block_01 .price {
  position: relative;
  color: #0abab5;
}
.premium_plan .block.block_01 .price:after {
  display: block;
  content: "";
  width: 100%;
  height: 16px;
  margin: 20px 0;
  background: url(../images/premium/premium_plan_img_08.png) no-repeat center center;
}
.premium_plan .block.block_01 .price strong {
  font-size: 7.65rem;
}
@media screen and (max-width: 1024px) {
  .premium_plan .block.block_01 .price strong {
    font-size: 6rem;
  }
}
@media screen and (max-width: 480px) {
  .premium_plan .block.block_01 .price strong {
    font-size: 3.8rem;
  }
}
.premium_plan .block.block_01 .price span {
  font-size: 2.875rem;
  font-weight: bold;
}
@media screen and (max-width: 480px) {
  .premium_plan .block.block_01 .price span {
    font-size: 1.5rem;
  }
}
.premium_plan .block.block_01 .campaign {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1024px) {
  .premium_plan .block.block_01 .campaign {
    flex-wrap: wrap;
  }
}
.premium_plan .block.block_01 .campaign span {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 2rem;
}
@media screen and (max-width: 480px) {
  .premium_plan .block.block_01 .campaign span {
    display: block;
    margin-bottom: 10px;
  }
}
.premium_plan .block.block_01 .campaign img {
  margin-bottom: 20px;
}
.premium_plan .block.block_01 .campaign .text_01 {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .premium_plan .block.block_01 .campaign .text_01 {
    display: block;
  }
}
.premium_plan .block.block_01 .campaign .text_02 {
  display: flex;
  align-items: center;
}
.premium_plan .block.block_01 .campaign .text_02 .big {
  font-size: 2.875rem;
  letter-spacing: -0.5em;
}
.premium_plan .block.block_02 .block_title {
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.premium_plan .block.block_02 > p {
  margin-bottom: 20px;
}
.premium_plan .block.block_02 ul {
  display: flex;
  justify-content: center;
}
.premium_plan .block.block_02 ul li {
  margin-right: 20px;
}
.premium_plan .block.block_02 ul li:last-child {
  margin-right: 0;
}
/**-----------------------------------------------
デザイン詳細
-----------------------------------------------**/
.design_detail_select {
  display: flex;
  margin-bottom: 60px;
}
@media screen and (max-width: 480px) {
  .design_detail_select {
    display: block;
  }
}
.design_detail_select .img {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 1;
  width: 400px;
  height: 400px;
  margin-right: 40px;
}
.design_detail_select .img:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0.8;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border: 7px solid #C6E5E1;
}
.design_detail_select .img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
@media screen and (max-width: 1024px) {
  .design_detail_select .img {
    width: 300px;
    height: 300px;
  }
}
@media screen and (max-width: 480px) {
  .design_detail_select .img {
    width: 100%;
    height: 100%;
    margin: 0 auto 20px;
  }
}
.design_detail_select .content {
  text-align: left;
}
.design_detail_select .content > * {
  display: block;
}
.design_detail_select .content .id {
  display: flex;
  font-size: 0.812rem;
  margin-bottom: 10px;
}
.design_detail_select .content .id span:first-child {
  margin-right: 20px;
}
.design_detail_select .content .title {
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.design_detail_select .content .var {
  font-size: 1.125rem;
  margin-bottom: 10px;
}
.design_detail_select .content .cat {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  margin-bottom: 20px;
}
.design_detail_select .content .cat .shape {
  margin-right: 10px;
}
.design_detail_select .content .cat .genre {
  display: flex;
  flex-wrap: wrap;
}
.design_detail_select .content .cat .genre span:after {
  content: "/";
  margin: 0 5px;
}
.design_detail_select .content .cat .genre span:last-child:after {
  display: none;
}
.design_detail_select .content .user {
  display: flex;
  font-size: 0.75rem;
  margin-bottom: 10px;
}
.design_detail_select .content .user .name {
  display: flex;
  align-items: center;
  margin-right: 50px;
}
.design_detail_select .content .user .name:before {
  display: block;
  content: "";
  width: 25px;
  height: 27px;
  margin-right: 5px;
  background: url(../images/common/icon_user.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .design_detail_select .content .user .name:before {
    width: 18px;
    height: 20px;
  }
}
.design_detail_select .content .user .name span {
  flex: 1;
}
.design_detail_select .content .user .count {
  display: flex;
  align-items: center;
}
.design_detail_select .content .user .count:before {
  display: block;
  content: "";
  width: 27px;
  height: 25px;
  margin-right: 5px;
  background: url(../images/common/icon_count.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .design_detail_select .content .user .count:before {
    width: 18px;
    height: 17px;
  }
}
.design_detail_select .content .user .count span {
  flex: 1;
}
.design_detail_select .content .keyword {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.design_detail_select .content .keyword span {
  color: #FFF;
  padding: 2px 15px;
  margin: 0 5px 5px 0;
  font-size: 0.937rem;
  border-radius: 100px;
  background-color: #0abab5;
}
.design_detail_select .content .text {
  margin-bottom: 30px;
}
.design_detail_select .content .btn_xs {
  text-align: right;
}
.design_detail_var {
  padding: 50px 0;
  background-image: url(../images/detail/design_detail_var_bg_01.png), url(../images/detail/design_detail_var_bg_02.png), url(../images/detail/design_detail_var_bg_03.png), url(../images/detail/design_detail_var_bg_04.png);
  background-position: top left, top right, top left, top right;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y;
  background-color: #C8E3E3;
}
@media screen and (max-width: 480px) {
  .design_detail_var {
    padding: 30px 0;
    background-image: none;
  }
}
.design_detail_var > .title {
  position: relative;
  color: #003399;
  text-align: center;
  font-size: 2.25rem;
  font-weight: bold;
  margin-bottom: 50px;
}
@media screen and (max-width: 480px) {
  .design_detail_var > .title {
    margin-bottom: 20px;
    font-size: 2rem;
  }
}
.design_detail_var > .title:before {
  content: "";
  display: block;
  position: absolute;
  left: -650px;
  right: 0;
  margin: 0 auto;
  width: 35px;
  height: 53px;
  background: url(../images/detail/design_detail_var_title_bg.png) no-repeat 0 0;
}
.design_detail_var ul {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 480px) {
  .design_detail_var ul {
    display: block;
  }
}
.design_detail_var ul li {
  display: flex;
  width: calc((100% / 2) - 30px);
  margin: 0 30px 30px 0;
}
@media screen and (max-width: 1024px) {
  .design_detail_var ul li {
    width: calc((100% / 2) - 20px);
    margin-right: 20px;
  }
}
@media screen and (max-width: 480px) {
  .design_detail_var ul li {
    width: 100%;
    margin-right: 0;
  }
}
.design_detail_var ul li:last-child {
  margin-right: 0;
}
.design_detail_var ul li .img {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 1;
  width: 250px;
  height: 250px;
  margin-right: 10px;
  background-color: #FFF;
}
.design_detail_var ul li .img:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0.8;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border: 7px solid #C6E5E1;
}
.design_detail_var ul li .img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
@media screen and (max-width: 1024px) {
  .design_detail_var ul li .img {
    width: 140px;
    height: 140px;
  }
}
.design_detail_var ul li .img:before {
  border-color: #C3E1DC;
}
.design_detail_var ul li .content > * {
  display: block;
}
.design_detail_var ul li .content .id {
  font-size: 0.687rem;
  margin-bottom: 5px;
}
.design_detail_var ul li .content .var {
  margin-bottom: 2px;
}
.design_detail_var ul li .content .count {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.design_detail_var ul li .content .count:before {
  display: block;
  content: "";
  width: 27px;
  height: 25px;
  margin-right: 5px;
  background: url(../images/common/icon_count.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .design_detail_var ul li .content .count:before {
    width: 18px;
    height: 17px;
  }
}
.design_detail_var ul li .content .count span {
  flex: 1;
}
.design_detail_var ul li .content .count:before {
  width: 18px;
  height: 17px;
  font-size: 0.75rem;
}
.design_detail_var ul li .content .keyword {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media screen and (max-width: 480px) {
  .design_detail_var ul li .content .keyword {
    margin-bottom: 10px;
  }
}
.design_detail_var ul li .content .keyword span {
  color: #FFF;
  padding: 2px 15px;
  margin: 0 5px 5px 0;
  font-size: 0.687rem;
  border-radius: 100px;
  background-color: #0abab5;
}
.design_detail_other {
  padding: 50px 0 0;
  background-image: url(../images/detail/design_detail_other_bg_01.png), url(../images/detail/design_detail_other_bg_02.png);
  background-position: 2% 70%, 97% 12%;
  background-repeat: no-repeat, no-repeat;
  background-color: #FAF3CC;
}
@media screen and (max-width: 480px) {
  .design_detail_other {
    padding: 30px 0;
    background-image: none;
  }
}
.design_detail_other > .title {
  color: #003399;
  text-align: center;
  font-size: 2.25rem;
  font-weight: bold;
  margin-bottom: 50px;
}
@media screen and (max-width: 480px) {
  .design_detail_other > .title {
    margin-bottom: 20px;
    font-size: 2rem;
  }
}
/**-----------------------------------------------
ショッピングカート
-----------------------------------------------**/
.cart_page {
  background-image: url(../images/cart/cart_bg_01.png), url(../images/cart/cart_bg_02.png);
  background-position: top left, top right;
  background-repeat: no-repeat, no-repeat;
}
.cart_page#content {
  margin-top: 0;
  padding-top: 60px;
}
@media screen and (max-width: 1024px) {
  .cart_page#content {
    padding-top: 120px;
    background-position: left 80px,right 80px;
    background-size: 20%;
  }
}
@media screen and (max-width: 480px) {
  .cart_page#content {
    padding-top: 100px;
    background-position: left 60px,right 60px;
    background-size: 30%;
  }
}
.cart_page .page_title {
  position: relative;
}
.cart_page .page_title:before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  height: 125px;
  background: url(../images/cart/cart_title_bg.png) no-repeat center center;
}
.cart_page .text {
  padding: 30px;
  margin: 30px 0 50px;
  text-align: center;
  background-color: #B0DBE8;
}
.cart_page .cart_list li {
  display: flex;
  align-items: center;
  position: relative;
  padding: 20px;
  margin-bottom: 50px;
  border: 4px solid #C3E1DC;
  background-color: #FFF;
}
@media screen and (max-width: 480px) {
  .cart_page .cart_list li {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 15px;
  }
}
.cart_page .cart_list li:last-child {
  margin-bottom: 0;
}
.cart_page .cart_list li .delete {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  color: #FFF;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  background-color: #0abab5;
  border-radius: 100px;
}
@media screen and (max-width: 480px) {
  .cart_page .cart_list li .delete {
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
  }
}
.cart_page .cart_list li .delete:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  content: "\f00d";
  font-weight: bold;
}
.cart_page .cart_list li .img {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 1;
  width: 150px;
  height: 150px;
  margin-right: 30px;
}
.cart_page .cart_list li .img:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0.8;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border: 7px solid #C6E5E1;
}
.cart_page .cart_list li .img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
@media screen and (max-width: 480px) {
  .cart_page .cart_list li .img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }
}
.cart_page .cart_list li .img:before {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-width: 4px;
}
.cart_page .cart_list li .content {
  flex: 1;
  margin-right: 40px;
}
@media screen and (max-width: 480px) {
  .cart_page .cart_list li .content {
    width: calc(100% - 110px);
    margin-right: 0;
  }
}
.cart_page .cart_list li .content .title {
  margin-bottom: 10px;
}
.cart_page .cart_list li .content .var {
  display: block;
  font-size: 0.75rem;
  margin-bottom: 5px;
}
.cart_page .cart_list li .content .cat {
  display: flex;
  align-items: center;
  font-size: 0.687rem;
  margin-bottom: 20px;
}
@media screen and (max-width: 480px) {
  .cart_page .cart_list li .content .cat {
    display: block;
    margin-bottom: 10px;
  }
}
.cart_page .cart_list li .content .cat .shape {
  margin-right: 10px;
}
.cart_page .cart_list li .content .cat .genre {
  display: flex;
  flex-wrap: wrap;
}
.cart_page .cart_list li .content .cat .genre span:after {
  content: "/";
  margin: 0 5px;
}
.cart_page .cart_list li .content .cat .genre span:last-child:after {
  display: none;
}
.cart_page .cart_list li .content .user {
  display: flex;
  font-size: 0.75rem;
}
.cart_page .cart_list li .content .user .name {
  display: flex;
  align-items: center;
  margin-right: 50px;
}
.cart_page .cart_list li .content .user .name:before {
  display: block;
  content: "";
  width: 25px;
  height: 27px;
  margin-right: 5px;
  background: url(../images/common/icon_user.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .cart_page .cart_list li .content .user .name:before {
    width: 18px;
    height: 20px;
  }
}
.cart_page .cart_list li .content .user .name span {
  flex: 1;
}
@media screen and (max-width: 480px) {
  .cart_page .cart_list li .content .user .name {
    margin-right: 30px;
  }
}
.cart_page .cart_list li .content .user .name:before {
  width: 23px;
  height: 26px;
  margin-right: 10px;
}
@media screen and (max-width: 480px) {
  .cart_page .cart_list li .content .user .name:before {
    width: 17px;
    height: 18px;
  }
}
.cart_page .cart_list li .content .user .count {
  display: flex;
  align-items: center;
}
.cart_page .cart_list li .content .user .count:before {
  display: block;
  content: "";
  width: 27px;
  height: 25px;
  margin-right: 5px;
  background: url(../images/common/icon_count.png) no-repeat 0 0 / contain;
}
@media screen and (max-width: 1024px) {
  .cart_page .cart_list li .content .user .count:before {
    width: 18px;
    height: 17px;
  }
}
.cart_page .cart_list li .content .user .count span {
  flex: 1;
}
.cart_page .cart_list li .content .user .count:before {
  width: 26px;
  height: 24px;
  margin-right: 10px;
}
@media screen and (max-width: 480px) {
  .cart_page .cart_list li .content .user .count:before {
    width: 18px;
    height: 17px;
  }
}
.cart_page .cart_list li .btn_button button {
  background-color: #0abab5;
  border-color: #0abab5;
}
@media screen and (max-width: 480px) {
  .cart_page .cart_list li .btn_button {
    flex: 1;
    margin-top: 20px;
  }
}
/**-----------------------------------------------
デザイン指示書作成
-----------------------------------------------**/
.order_comment_header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding: 0 10px;
  background-color: #333;
}
.order_comment_viewer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
  height: 100vh;
  padding-top: 60px;
  background-color: #DDD;
}
@media screen and (max-width: 1024px) {
  .order_comment_viewer {
    width: 100%;
    height: calc(100vh - 30%);
  }
}
.order_comment_viewer img {
  max-height: 100%;
  width: auto;
}
.order_comment_comment {
  position: fixed;
  top: 60px;
  right: 0;
  width: 25%;
  height: calc(100% - 60px);
  padding: 20px;
  overflow-y: scroll;
  box-shadow: 5px 0px 5px 2px rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 1024px) {
  .order_comment_comment {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
  }
}
.order_comment_comment .block {
  position: relative;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #CCC;
}
.order_comment_comment .block .delete {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  color: #FFF;
  font-weight: bold;
  cursor: pointer;
  border: none;
  background-color: #777;
  border-radius: 100px;
}
.order_comment_comment .block .delete:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  content: "\f00d";
}
.order_comment_comment .block.active {
  background-color: #F6F6F6;
}
.order_comment_comment .block .number {
  display: inline-block;
  padding: 5px;
  font-size: 1.125rem;
  margin-bottom: 5px;
  color: #FFF;
  background-color: #0abab5;
}
/**-----------------------------------------------
仕様入力
-----------------------------------------------**/
.order_specification dl {
  margin-bottom: 30px;
}
.order_specification dl:last-child {
  margin-bottom: 0;
}
.order_specification dt {
  margin-bottom: 10px;
}
.order_specification small {
  display: block;
  font-size: 0.75rem;
}
.order_specification .parts_flex {
  align-items: center;
}
@media screen and (max-width: 480px) {
  .order_specification .parts_flex {
    display: block;
  }
}
.order_specification .parts_flex small {
  margin-left: 10px;
}
@media screen and (max-width: 480px) {
  .order_specification .parts_flex small {
    margin-left: 0;
  }
}
.order_specification_op {
  padding: 30px;
  margin: 50px 0;
  background-color: #EEE;
}
.order_specification_op .parts_toggle_content {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #CCC;
}
@media screen and (max-width: 480px) {
  .order_specification_op .btn_xs {
    display: flex;
    margin-top: 5px;
  }
  .order_specification_op .btn_xs button {
    padding: 8px 30px 8px 20px;
  }
}
/**-----------------------------------------------
注文完了
-----------------------------------------------**/
.order_fin {
  max-width: 600px;
  margin: 0 auto 50px;
}
/**-----------------------------------------------
よくある質問
-----------------------------------------------**/
.faq_list dl {
  margin-bottom: 50px;
}
.faq_list dl:last-child {
  margin-bottom: 0;
}
.faq_list dt {
  display: flex;
  margin-bottom: 10px;
}
.faq_list dt:before {
  display: flex;
  align-items: center;
  justify-content: center;
  content: "Q";
  color: #FFF;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  font-weight: bold;
  font-size: 1.25rem;
  background-color: #0abab5;
  border-radius: 100px;
}
.faq_list dt p {
  flex: 1;
  font-size: 1.25rem;
  font-weight: bold;
}
.faq_list dd {
  display: flex;
  margin-bottom: 20px;
}
.faq_list dd:before {
  display: flex;
  align-items: center;
  justify-content: center;
  content: "A";
  color: #FFF;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  font-weight: bold;
  font-size: 1.25rem;
  background-color: #003399;
  border-radius: 100px;
}
.faq_list dd p {
  flex: 1;
}
/**-----------------------------------------------
デザインデータについて
-----------------------------------------------**/
.data_guide_page .page_title {
  position: relative;
}
.data_guide_page .page_title:before {
  display: block;
  content: "";
  position: absolute;
  top: -30px;
  right: 0;
  left: -550px;
  margin: auto;
  width: 47px;
  height: 37px;
  background: url(../images/data_guide/data_guide_title_bg_01.png) no-repeat 0 0;
}
.data_guide_page .page_title:after {
  display: block;
  content: "";
  position: absolute;
  bottom: -30px;
  right: -550px;
  left: 0;
  margin: auto;
  width: 42px;
  height: 39px;
  background: url(../images/data_guide/data_guide_title_bg_02.png) no-repeat 0 0;
}
@media screen and (max-width: 480px) {
  .data_guide_page .page_title:after {
    display: none;
  }
}
.data_guide_title {
  color: #003399;
  text-align: center;
  font-size: 2.25rem;
  margin-bottom: 50px;
}
@media screen and (max-width: 480px) {
  .data_guide_title {
    font-size: 2rem;
    margin-bottom: 30px;
  }
}
.data_guide_flow {
  overflow: hidden;
  padding: 60px 0 10px;
  background: url(../images/data_guide/data_guide_flow_bg.png) repeat 0 0;
}
@media screen and (max-width: 480px) {
  .data_guide_flow {
    padding: 30px 0 10px;
  }
}
.data_guide_flow .step {
  position: relative;
  padding: 40px;
  margin-bottom: 80px;
  background-color: #FFF;
}
@media screen and (max-width: 480px) {
  .data_guide_flow .step {
    padding: 5%;
    margin-bottom: 40px;
  }
}
.data_guide_flow .step.step_01:before {
  display: block;
  content: "";
  position: absolute;
  right: -110px;
  bottom: 20px;
  width: 266px;
  height: 244px;
  background: url(../images/data_guide/data_guide_flow_img_01.png) no-repeat 0 0;
}
@media screen and (max-width: 1024px) {
  .data_guide_flow .step.step_01:before {
    right: -4vw;
    bottom: -70px;
    width: 16vw;
    height: 15vw;
    background-size: contain;
  }
}
@media screen and (max-width: 480px) {
  .data_guide_flow .step.step_01:before {
    bottom: -20px;
  }
}
.data_guide_flow .step.step_01 .point_flex {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.data_guide_flow .step.step_01 .point_flex li {
  text-align: center;
  margin-right: 30px;
}
@media screen and (max-width: 1024px) {
  .data_guide_flow .step.step_01 .point_flex li {
    margin-right: 20px;
  }
}
@media screen and (max-width: 480px) {
  .data_guide_flow .step.step_01 .point_flex li {
    margin-right: 10px;
  }
  .data_guide_flow .step.step_01 .point_flex li p {
    font-size: 0.875rem;
  }
}
.data_guide_flow .step.step_01 .point_flex li:last-child {
  margin-right: 0;
}
.data_guide_flow .step.step_01 .point_flex li figure {
  margin-bottom: 10px;
}
.data_guide_flow .step.step_03:before {
  display: block;
  content: "";
  position: absolute;
  left: -30px;
  bottom: 80px;
  width: 284px;
  height: 323px;
  background: url(../images/data_guide/data_guide_flow_img_02.png) no-repeat 0 0;
}
@media screen and (max-width: 1024px) {
  .data_guide_flow .step.step_03:before {
    left: -2vw;
    bottom: 10vw;
    width: 33vw;
    height: 37vw;
    background-size: contain;
  }
}
@media screen and (max-width: 480px) {
  .data_guide_flow .step.step_03:before {
    left: -4vw;
    bottom: -35px;
    width: 20vw;
    height: 23vw;
  }
}
.data_guide_flow .step.step_03 .point_flex li {
  display: flex;
  margin-bottom: 30px;
}
@media screen and (max-width: 1024px) {
  .data_guide_flow .step.step_03 .point_flex li {
    display: block;
  }
}
.data_guide_flow .step.step_03 .point_flex li figure {
  margin-right: 10px;
}
@media screen and (max-width: 1024px) {
  .data_guide_flow .step.step_03 .point_flex li figure {
    margin: 0 0 10px;
  }
}
.data_guide_flow .step.step_03 .point_flex li .parts_indent {
  flex: 1;
}
.data_guide_flow .step.step_05:before {
  display: block;
  content: "";
  position: absolute;
  right: -60px;
  bottom: 20px;
  width: 224px;
  height: 260px;
  background: url(../images/data_guide/data_guide_flow_img_03.png) no-repeat 0 0;
}
@media screen and (max-width: 1024px) {
  .data_guide_flow .step.step_05:before {
    right: -2vw;
    top: -70px;
    width: 20vw;
    height: 24vw;
    background-size: contain;
  }
}
@media screen and (max-width: 480px) {
  .data_guide_flow .step.step_05:before {
    top: -20px;
  }
}
.data_guide_flow .step > .title {
  display: flex;
  align-items: center;
  font-size: 1.875rem;
  margin-bottom: 20px;
}
@media screen and (max-width: 480px) {
  .data_guide_flow .step > .title {
    font-size: 1.562rem;
  }
}
.data_guide_flow .step > .title span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-right: 10px;
  color: #FFF;
  background-color: #0abab5;
  border-radius: 100%;
}
@media screen and (max-width: 480px) {
  .data_guide_flow .step > .title span {
    width: 40px;
    height: 40px;
  }
}
.data_guide_flow .step > .title p {
  flex: 1;
}
.data_guide_flow .step .step_flex {
  display: flex;
  align-items: flex-start;
}
@media screen and (max-width: 480px) {
  .data_guide_flow .step .step_flex {
    display: block;
  }
}
.data_guide_flow .step .step_flex .img {
  margin-right: 30px;
}
@media screen and (max-width: 1024px) {
  .data_guide_flow .step .step_flex .img {
    width: 30%;
  }
}
@media screen and (max-width: 480px) {
  .data_guide_flow .step .step_flex .img {
    width: auto;
    text-align: center;
    margin: 0 auto;
  }
}
.data_guide_flow .step .step_flex .content {
  flex: 1;
  padding-top: 20px;
}
.data_guide_flow .step .text {
  margin-left: 80px;
}
@media screen and (max-width: 1024px) {
  .data_guide_flow .step .text {
    margin-left: 0;
  }
}
.data_guide_flow .step a {
  color: #0abab5;
}
.data_guide_flow .step .point {
  padding: 20px;
  margin-top: 50px;
  background-color: #F1F1F1;
}
@media screen and (max-width: 480px) {
  .data_guide_flow .step .point {
    padding: 5%;
    margin-top: 30px;
  }
}
.data_guide_flow .step .point > .title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  padding-bottom: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid #989898;
}
@media screen and (max-width: 480px) {
  .data_guide_flow .step .point > .title {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
}
.data_guide_flow .step .point > .title:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 10px;
  background-color: #333;
}
.data_guide_guidelines {
  position: relative;
  padding: 100px 0;
  background: url(../images/data_guide/data_guide_guidelines_bg_03.png), url(../images/data_guide/data_guide_guidelines_bg_04.png);
  background-position: bottom left ,bottom right;
  background-repeat: no-repeat;
  background-color: #F9F3B3;
}
@media screen and (max-width: 480px) {
  .data_guide_guidelines {
    padding: 30px 0;
  }
}
.data_guide_guidelines:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 263px;
  height: 1525px;
  background: url(../images/data_guide/data_guide_guidelines_bg_01.png);
}
@media screen and (max-width: 1024px) {
  .data_guide_guidelines:before {
    z-index: 1;
  }
}
.data_guide_guidelines:after {
  display: block;
  content: "";
  position: absolute;
  top: 100px;
  left: 0;
  z-index: 1;
  width: 219px;
  height: 1698px;
  background: url(../images/data_guide/data_guide_guidelines_bg_02.png);
}
.data_guide_guidelines .section {
  position: relative;
  z-index: 2;
  padding: 40px;
  background-color: #FFF;
}
@media screen and (max-width: 1024px) {
  .data_guide_guidelines .section {
    margin: 0 40px;
  }
}
@media screen and (max-width: 480px) {
  .data_guide_guidelines .section {
    margin: 0 5%;
    padding: 5%;
  }
}
.data_guide_guidelines .section .part {
  margin-bottom: 70px;
}
@media screen and (max-width: 480px) {
  .data_guide_guidelines .section .part {
    margin-bottom: 50px;
  }
}
.data_guide_guidelines .section .part.part_icon_01 {
  position: relative;
}
.data_guide_guidelines .section .part.part_icon_01:before {
  display: block;
  content: "";
  position: absolute;
  top: -40px;
  right: 80px;
  width: 198px;
  height: 162px;
  background: url(../images/data_guide/data_guide_guidelines_img_01.png) no-repeat 0 0;
}
@media screen and (max-width: 1024px) {
  .data_guide_guidelines .section .part.part_icon_01:before {
    right: -2vw;
    top: -70px;
    width: 20vw;
    height: 24vw;
    background-size: contain;
  }
}
.data_guide_guidelines .section .part .part_icon_02 {
  position: relative;
}
.data_guide_guidelines .section .part .part_icon_02:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  width: 130px;
  height: 119px;
  background: url(../images/data_guide/data_guide_guidelines_img_02.png) no-repeat 0 0;
}
@media screen and (max-width: 1024px) {
  .data_guide_guidelines .section .part .part_icon_02:before {
    right: -10vw;
    top: auto;
    bottom: -13vw;
    width: 18vw;
    height: 17vw;
    background-size: contain;
  }
}
.data_guide_guidelines .section .part > .title {
  width: 500px;
  margin-bottom: 30px;
  padding-bottom: 10px;
  font-size: 1.875rem;
  background: linear-gradient(transparent 60%, #f9f2cb 60%);
}
@media screen and (max-width: 480px) {
  .data_guide_guidelines .section .part > .title {
    width: auto;
    font-size: 1.562rem;
    text-indent: -1em;
    padding-left: 1em;
    margin-bottom: 10px;
  }
}
.data_guide_guidelines .section .part p {
  line-height: 2 !important;
}
.data_guide_guidelines .section .part .parts_flex {
  justify-content: center;
}
.data_guide_guidelines .section .part .parts_flex li {
  text-align: center;
  margin-right: 30px;
}
@media screen and (max-width: 480px) {
  .data_guide_guidelines .section .part .parts_flex li {
    margin: 0 0 20px;
  }
}
.data_guide_guidelines .section .part .parts_flex li:last-child {
  margin: 0;
}
.data_guide_guidelines .section .part .flex_01 {
  display: flex;
  justify-content: center;
}
.data_guide_guidelines .section .part .flex_01 li {
  margin-right: 30px;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .data_guide_guidelines .section .part .flex_01 li {
    width: calc((100% - 30px) / 2);
    margin-bottom: 10px;
  }
  .data_guide_guidelines .section .part .flex_01 li:nth-child(2n) {
    margin-right: 0;
  }
}
.data_guide_guidelines .section .part .flex_01 li:last-child {
  margin-right: 0;
}
@media screen and (max-width: 1024px) {
  .data_guide_guidelines .section .part .flex_02 {
    display: block;
  }
}
.data_guide_guidelines .section .part .flex_02 .img {
  margin-right: 30px;
}
@media screen and (max-width: 1024px) {
  .data_guide_guidelines .section .part .flex_02 .img {
    text-align: center;
    margin-bottom: 10px;
  }
}
.data_guide_guidelines .section .part .flex_02 .text {
  flex: 1;
}
.data_guide_guidelines .section .part .point {
  padding: 30px;
  background-color: #F1F1F1;
}
@media screen and (max-width: 480px) {
  .data_guide_guidelines .section .part .point {
    padding: 5%;
  }
}
.data_guide_guidelines .section .part .point > .title {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 30px;
}
@media screen and (max-width: 480px) {
  .data_guide_guidelines .section .part .point > .title {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
}
.data_guide_guidelines .section .part .point > .title:after {
  content: "";
  display: block;
  width: 150px;
  height: 1px;
  margin: 15px auto 0;
  background-color: #333;
}
.data_guide_guidelines .section .part .table_style {
  width: 100%;
}
.data_guide_guidelines .section .part .table_style th {
  padding: 20px;
  text-align: center;
}
.data_guide_guidelines .section .part .table_style td {
  padding: 20px;
  text-align: center;
}
.data_guide_template {
  padding-top: 80px;
}
@media screen and (max-width: 1024px) {
  .data_guide_template {
    overflow: hidden;
  }
}
@media screen and (max-width: 480px) {
  .data_guide_template {
    padding-top: 30px;
  }
}
.data_guide_template .data_guide_title {
  position: relative;
}
.data_guide_template .data_guide_title:before {
  display: block;
  content: "";
  position: absolute;
  top: -40px;
  left: -720px;
  right: 0;
  margin: 0 auto;
  width: 35px;
  height: 40px;
  background: url(../images/data_guide/data_guide_template_title_01.png) no-repeat 0 0;
}
.data_guide_template .data_guide_title:after {
  display: block;
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  right: -720px;
  margin: 0 auto;
  width: 80px;
  height: 26px;
  background: url(../images/data_guide/data_guide_template_title_02.png) no-repeat 0 0;
}
.data_guide_template .text {
  text-align: center;
  margin-bottom: 60px;
}
@media screen and (max-width: 480px) {
  .data_guide_template .text {
    margin-bottom: 30px;
  }
}
.data_guide_template .text p {
  display: inline-block;
  text-align: left;
}
.data_guide_template .template_list {
  display: flex;
}
@media screen and (max-width: 480px) {
  .data_guide_template .template_list {
    display: block;
  }
}
.data_guide_template .template_list dl {
  margin-right: 30px;
}
@media screen and (max-width: 480px) {
  .data_guide_template .template_list dl {
    width: 100%;
    margin: 0 0 30px;
  }
}
.data_guide_template .template_list dl dt {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #989898;
}
.data_guide_template .template_list dl dt:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 10px;
  background-color: #333;
}
.data_guide_template .template_list dl dd {
  padding: 10px;
}
/**-----------------------------------------------
運営会社
-----------------------------------------------**/
.company_list {
  max-width: 1000px;
  margin: 0 auto;
  border-top: 2px solid #0abab5;
}
.company_list dl {
  display: flex;
  padding: 20px 30px;
  border-bottom: 1px solid #CCC;
}
@media screen and (max-width: 480px) {
  .company_list dl {
    padding: 10px;
  }
}
.company_list dt {
  width: 300px;
  font-weight: bold;
}
@media screen and (max-width: 480px) {
  .company_list dt {
    width: 130px;
  }
}
.company_list dd {
  flex: 1;
}
/**-----------------------------------------------
法人・団体の方へ
-----------------------------------------------**/
/**-----------------------------------------------
お問い合わせ
-----------------------------------------------
.form_area {
	dl {
		margin-bottom:20px;
	}
	dt {
		.parts_fs_lg;
		font-weight:bold;
		margin-bottom:10px;
		.required {
			display:inline-block;
			color:#FFF;
			margin-left:20px;
			padding:0 10px;
			font-size:0.8rem;
			background-color:@maincolor;
		}
		&.parts_flex {
			align-items: center;
			justify-content: space-between;
		}
	}
	.btn_button {
		justify-content: flex-end;
	}
}
**/