@charset "utf-8";

/*検索フォームブロック*/
@media (max-width: 960px) {
  #heading .inner h1 {
    text-align: center;
  }

  #generation_form {
    padding: 32px;
  }

  #search_form form,
  #generation_form .generation_forminner {
    padding: 24px 12px;
    background: #FFFFFF;
    border-radius: 10px;
  }

  #search_form form label {
    line-height: 1.6rem;
    text-indent: -1.8rem;
    padding-left: 1.8rem;
  }
}

@media (max-width: 960px) {
  #search_form .form_title {
    font-size: 1.25rem;
    text-align: center !important;
  }

  .search_button {
    margin-top: 1rem;
  }

  .search_button button {
    width: 100%;
  }
}

@media (min-width: 961px) {
  .form_block {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-around;
    padding: 12px 0 24px;
    background: #ffffff;
    border-radius: 10px;
  }

  /*掲示板投稿一覧*/
  #postlist .form_block {
    padding: 0;
  }

  /*カタログ検索*/
  .form_block.form_block_cataloglist {
    display: flex;
    flex-direction: column;
    padding: 12px 24px 24px;
  }

  .form_block.ul {
    column-count: 2;
  }

  #search_form .form_title {
    font-size: 1.75rem;
  }

  #postlist #search_form ul:first-child,
  #memberlist #search_form div.freeword,
  #casestudy #search_form ul:first-child {
    width: 57.5%;
  }

  #postlist #search_form ul {
    padding-bottom: 12px;
  }

  #postlist #search_form ul:last-child #casestudy #search_form ul:last-child {
    width: 57.5%;
  }

  #postlist #search_form li:first-child #casestudy #search_form li:first-child {
    margin-bottom: 27px;
  }

  .search_button button {
    width: 30%;
  }
}

/*会員検索フォームの背景色指定*/
.search_form {
  text-align: center;
  margin: 0 auto;
  padding: 24px;
  background: #D0EFEE;
}

@media (max-width: 960px) {
  .search_form {
    text-align: left;
    padding: 24px 12px;
    margin: 24px auto;
  }

  .search_form ul:first-child {
    margin-bottom: -18px;
  }
}


/*カタログ検索ページの注記*/
.form_descriptionArea {
  display: flex;
  align-items: flex-end;
}

@media (max-width: 960px) {
  .form_descriptionArea {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-left: 0;
  }

  #search_form .form_descriptionArea p.form_description {
    margin-left: 0;
  }
}

#list_count .form_descriptionArea {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

#search_form .form_descriptionArea p.form_description {
  font-size: 1rem;
  color: #006563 !important;
  margin-left: 16px;
}

@media (max-width: 960px) {
  #search_form .form_descriptionArea p.form_description {
    margin-left: 0;
  }
}

#list_count .form_descriptionArea p.form_description {
  font-size: 1rem;
  color: #006563;
}

@media (max-width: 960px) {
  #list_count .form_descriptionArea {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  #list_count .form_descriptionArea p.form_description {
    font-size: 1rem;
    color: #006563;
    text-align: center;
  }
}

/*会員検索フォームの説明文*/
#search_form .form_description {
  text-align: left;
  font-weight: bold;
  font-size: 1.125rem;
  color: #141414;
}

#search_form p {
  margin-bottom: 1em;
}

/*会員検索フォームのタイトル*/
#search_form .form_title {
  text-align: left;
  font-weight: bold;
  color: #006563;
  margin-bottom: 1rem;
}

@media (max-width: 960px) {
  #search_form .form_title {
    margin-top: 0;
  }
}

#casestudy #search_form ul {
  margin: 0;
}

/*フォームブロックのラベル*/
#search_form .form_block label {
  font-weight: bold;
  font-size: 1.25rem;
  color: #343434;
  display: inline-block;
  margin: 0.5rem 0 0.5rem 0;

}

@media (max-width: 960px) {
  #search_form .form_block label {
    text-align: left;
    font-size: 1.125rem;
  }

  #search_form .form_block label span {
    display: block;
    margin-left: 12px;
  }
}

/*フォームブロックのラベル横の矢印*/
#generation_form .triangle_button,
#search_form .triangle_button {
  line-height: 1.5rem;
  text-indent: -1em;
  padding-left: 1em;
}

#generation_form .triangle_button::before,
#search_form .triangle_button::before {
  content: '';
  text-align: center;
  border-style: solid;
  border-width: 12px 0 12px 16px;
  border-color: transparent transparent transparent #006563;
  display: inline-block;
  width: auto;
  height: auto;
  position: relative;
  top: 4px;
  margin-right: 12px;
}

@media (max-width: 960px) {

  #generation_form .triangle_button::before,
  #search_form .triangle_button::before {
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent transparent transparent #006563;
    top: 4px;
    margin-right: 6px;
  }
}

.freeword,
.period,
.like {
  text-align: left;
}

div.like {
  margin-top: 12px;
}

@media (max-width: 960px) {
  div.freeword {
    margin-top: -12px;
  }

  div.like {
    margin-top: 12px;
  }
}

/*チェックボックスの大きさ*/
input#only-like {
  /* width: 24px; */
  -moz-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  margin-left: 16px;
}

/*
@media (max-width:960px) {
.like input#only-like {
  width: 100%;
  }
}*/

/* 期間フォーム */
.period_form {
  display: flex;
}

.period_form>div, .period_form>span {
  padding: 0 10px 0 10px;
  display: flex;
  align-items: center;
  font: normal normal bold 20px/29px "Noto Sans CJK JP";
}

@media (max-width:960px) {
  .period_form>div, .period_form>span {
    padding: 0 6px 0 6px;
  }
}

#freeword,
#period-start,
#period-end {
  height: 36px;
  width: 100%;
  border: 1px solid #3E3E3E;
  border-radius: 5px;
}

#freeword.disabled {
  border: 1px solid #717171;
  background: #e5e5e5;
}

#period-start,
#period-end {
  text-align: center;
}

@media (max-width:960px) {

  #period-start,
  #period-end {
    height: 30px;
    width: 100%;
    border: 1px solid #3E3E3E;
  }
}

/*業種で絞り込む、タグ検索*/
.dropdown {
  position: relative;
}

.dropdown select {
  width: 100%;
  font-size: 1.125rem;
  padding: 0 1.9em 0 0.8em;
  background: #fff;
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 20px 12px;
  border-radius: 5px;
}

@media (min-width: 961px) {
  .form-control.select-input.placeholder-active {
    width: 320px !important;
  }
}

@media (max-width:960px) {
  .dropdown select {
    height: 36px;
    width: 100%;
    border: 1px solid #3E3E3E;
  }
}

.dropdown::after {
  content: "";
  position: absolute;
  right: 5%;
  top: 55%;
  width: 12px;
  height: 12px;
  border-top: 2px solid #34344D;
  border-left: 2px solid #34344D;
  pointer-events: none;
  transform: translateY(-50%) rotate(-135deg);
}

.taglist.dropdown::after {
  right: 5%;
  top: 75%;
}

/*一覧表示欄の件数表示とページャー箇所*/
@media (min-width: 961px) {
  #list_count {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #list_count .text {
    text-align: left;
  }
}

#list_count p, #list_count h6 {
  font-size: 1.125rem;
  font-weight: bold;
  color: #141414;
  line-height: normal;
  height: auto;
}

@media (max-width:960px) {
  #list_count p, #list_count h6 {
    text-align: center;
    font-size: 1em;
  }
}

#list_count p.new_icon_text {
  font-size: 1rem;
  font-weight: bold;
  color: #D20000;
  line-height: normal;
  height: auto;
}

/*ページャー位置調整*/
@media (max-width:960px) {
  #member_list .page_turn {
    width: 100%;
    margin-left: 12px !important;
    margin-top: 12px;
  }

  #member_list .page_turn ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
  }
}

/*------ 生成ページ ------*/
.head_description {
  text-align: center;
  font-size: 1.125rem;
  font-weight: bold;
  margin: 24px 0 0;
}

@media (max-width: 960px) {
  .head_description {
    margin: 24px 0;
  }
}

#generation_form .list_content_block_catalog {
  position: relative;
}

#generation_form .list_content_block_catalog:last-child {
  border-top: none;
  border-bottom: 1px solid #00B2A1;
}

#generation_form .list_content_block_catalog:after {
  content: "";
  width: 40px;
  height: 18px;
  border-style: solid;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 18px solid #00b2a1;
  border-bottom: 0;
  position: absolute;
  bottom: -18px;
  left: 45%;
}

.form_block_generationArea .infoArea {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 16px;
}

.theme-item {
  border-bottom: solid 1px #BABABA;
  margin-bottom: 24px;
  padding: 6px 0 24px;
}

/*生成ページ*/
#list_cataloginfoArea {
  text-align: center;
}

.generation_form {
  margin: 0 auto;
  padding: 24px 24px 16px;
  background: #D0EFEE;
}

.generation_form .generation_forminner {
  display: flex;
  flex-direction: column;
  padding: 12px 24px 0;
  background: #FFFFFF;
  border-radius: 10px;
}

.form_block_generationArea {
  display: flex;
  flex-direction: column;
  padding: 12px 24px 24px;
}

/*フォームブロックのラベル*/
#generation_form .form_block_generationArea label {
  font-weight: bold;
  font-size: 1.25rem;
  color: #343434;
  display: inline-block;
  margin: 0.5rem 0 0.5rem 0;
}

#generation_form .form_block_generationArea label span.t-sm {
  margin-left: 12px;
}

#generation_form .form_block_generationArea input#freetheme {
  height: 36px;
  width: 100%;
  border: 1px solid #3E3E3E;
  border-radius: 5px;
}

#generation_form .form_block_generationArea input#freetheme:focus {
  outline: solid 2px #454545;
  outline-offset: 2px;
}

/*フリーワード注記_MDBカスタム*/
.form-outline .form-helper {
  display: flex;
  justify-content: flex-end;
}

.form-outline .form-helper p {
  color: #343434;
  font-weight: 500;
}

@media (max-width: 960px) {

  .generation_form .list_content_block_catalog:last-child,
  .generation_form .list_content_block_catalog {
    padding-bottom: 24px;
    border-bottom: 1px solid #00B2A1 !important;
  }

  .list_content_block_catalog:after {
    width: 40px;
    height: 18px;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-top: 18px solid #00b2a1;
    position: absolute;
    bottom: -18px;
    left: 45%;
  }

  #generation_form .form_block_generationArea label {
    text-align: left;
    font-size: 1.125rem;
  }

  #generation_form .form_block_generationArea label span {
    display: block;
    margin-left: 12px;
  }

  .form_block_generationArea {
    padding: 12px 6px 24px;
  }

  #generation_form .form_block_generationArea input::placeholder {
    font-size: 0.8rem;
  }
}

/*リセットボタン*/
.themereset_button button#themeresetbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: bold;
  width: 166px;
  height: 30px;
  color: #343434;
  background: #F5F5F5;
  border: solid 1px #707070;
  margin: 16px 0 0 auto;
}

/* 生成ボタン */
#generation_form .aigeneration_button {
  margin-top: 36px;
  text-align: center;
}

#generation_form .aigeneration_button button#generationbtn,
#generation_form .aigeneration_button button#generationbtn_stop {
  border-radius: 10px;
  font-size: 1.25rem;
  font-weight: bold;
}

#generation_form .aigeneration_button button#generationbtn {
  position: relative;
  width: 246px;
  height: 54px;
  color: #ffffff;
  background: #006563;
  background: linear-gradient(360deg, rgba(0, 101, 99, 1) 0%, rgba(0, 176, 158, 1) 100%);
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}

.themereset_button button#themeresetbtn:focus,
#generation_form .aigeneration_button button#generationbtn:focus {
  outline: solid 2px #454545;
  outline-offset: 2px;
}

.themereset_button button#themeresetbtn:hover,
#generation_form .aigeneration_button button#generationbtn:hover,
#generation_form .aigeneration_button button#generationbtn_stop:hover {
  opacity: 0.6;
  transition: 0.5s;
  background-color: transparent;
}

#generation_form .aigeneration_button #generationbtn img {
  position: absolute;
  left: 22px;
  filter: invert(90%) sepia(100%) saturate(43%) hue-rotate(198deg) brightness(108%) contrast(99%);
  width: 32px;
  height: 32px;
}

#generation_form .aigeneration_button p {
  font-size: 0.875rem;
  font-weight: 500;
}

/* 生成中止ボタン */
#generation_form .aigeneration_button button#generationbtn_stop {
  width: 246px;
  height: 54px;
  border: 2px solid #006563;
  color: #006563;
  background: #F5F5F5;
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
}

#generation_form .aigeneration_button button#generationbtn_stop:focus {
  outline: solid 2px #454545;
  outline-offset: 2px;
}

#generation_form .aigeneration_button button#generationbtn_stop img {
  position: absolute;
  left: 16px;
}

/* 生成ボタン 表示切替*/
#generation_form .aigeneration_button button.disabled {
  display: none;
}

/* 生成結果エリア */
.generationresults_all {
  margin-bottom: 32px;
}

.generationresults_all .generationresults_date {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 32px;
  padding: 0 32px;
  font-weight: 400;
  line-height: 2rem;
  font-size: 1.125rem;
  letter-spacing: 0.05rem;
  line-break: anywhere;
  overflow-wrap: anywhere;
}

.generationresults_all .generationresults_date>.title {
  font-weight: bold;
  font-size: 1.25rem;
  margin-bottom: 24px;
}

.generationresults_all .generationresults_date ul {
  margin: 16px 0;
  padding: 0 16px;
}

.generationresults_all .generationresults_date li {
  list-style-type: disc;
}

.generationresults_all a:hover,
.generationresults_all button:hover {
  opacity: 0.6;
  transition: 0.5s;
  background-color: transparent;
}

.generationresults_all .generationresults‗intro {
  margin-top: 32px;
}

.generationresults_all .notes {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
}

.generationresults_all .recommendArea_all {
  padding-bottom: 8px;
}

@media (max-width: 960px) {
  .generationresults_all .recommendArea_all {
    padding-bottom: 0;
  }

  .recommendArea_all .result_list_zero,
  .generationresults_all .notes {
    padding: 0;
  }
}

.generationresults_all .generationresults‗intro,
.recommendArea_all .recommend_intro {
  text-align: center;
  font-weight: bold;
  margin-bottom: 18px;
}

.generationresults_all .generationresults‗intro h2,
.recommendArea_all .recommend_intro h2 {
  max-width: 550px;
  width: 100%;
  font-size: 1.5rem;
  color: #006563;
  border-top: 2px solid #189A94;
  border-bottom: 2px solid #189A94;
  margin: 0 auto 16px;
  padding: 8px 24px;
}

@media (max-width: 480px) {
  .generationresults_all .generationresults‗intro {
    width: 100%;
    padding: 8px 32px;
  }

  .generationresults_all .generationresults_date {
    padding: 0 32px !important;
  }

  .recommendArea_all .recommend_intro {
    width: 100%;
    padding: 8px 16px;
  }

  .generationresults_all .generationresults‗intro h2 {
    margin: 0 auto;
  }

  .generationresults_all .generationresults_date p {
    margin-bottom: 48px;
  }
}

/* 0件 */
.recommendArea_all .result_list_zero {
  width: 100%;
  max-width: 850px;
  margin: 24px auto 0;
  font-weight: bold;
  text-align: left;
}

.recommendArea_all .content_info th {
  width: 100px;
  background-color: #ffffff;
  color: #006563;
  font-weight: initial;
  line-break: anywhere;
  text-align: center;
  vertical-align: top
}

.recommendArea_all .content_info th span {
  display: block;
  border: solid 1px;
  width: 100%;
  margin-top: 4px;
}

.recommendArea_all .content_info td.bg {
  margin-bottom: 14px;
  padding-left: 12px;
}

.recommendArea_all .list_content_block .content_info {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
}

.recommendArea_all .list_content_block {
  border-top: none;
}

.generationresults_all .list_content_block {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  border-bottom: 1px solid #717171 !important;
  padding-bottom: 16px
}

@media (max-width: 960px) {
  .generationresults_all .generationresults_date {
    margin: 24px 0;
    padding: 0 16px;
  }

  .recommendArea_all .list_content_block:last-child {
    border-bottom: 1px solid #717171 !important;
    padding-bottom: 16px;
  }
}

/* 詳細 */
.recommendArea_all .list_content_block td .details {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* コピーボタン対象 */
#generationresults_invisibleArea {
  display: none;
}

/* 生成結果をコピー */
.generationresults_all .copybtnArea {
  width: 100%;
  max-width: 850px;
  margin: 0 auto 48px;
}

.generationresults_all .copybtnArea button {
  width: 225px;
  height: 42px;
  border-radius: 5px;
  background-color: #006563;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
}

.generationresults_all .copybtnArea button:focus {
  outline: solid 2px #454545;
  outline-offset: 2px;
}

@media (max-width: 960px) {
  .generationresults_all .copybtnArea button {
    margin: 0 auto;
    margin-bottom: 24px;
  }
}

/* フィードバックエリア */
.feedbackbtnAreas_all {
  text-align: center;
  margin-top: 24px;
}

.feedbackbtnAreas_all p {
  font-weight: bold;
}

.feedbackbtnAreas_all .feedbackbtn {
  display: flex;
  justify-content: center;
  margin: 16px 0 24px;
}

.feedbackbtnAreas_all .feedbackbtn button {
  width: 96px;
  height: 32px;
  background-color: #ffffff;
  color: #006563;
  font-weight: bold;
  border: solid 1px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.feedbackbtnAreas_all .feedbackbtn button:focus {
  outline: solid 2px #454545;
  outline-offset: 2px;
}


.feedbackbtnAreas_all .feedbackbtn button img {
  filter: invert(16%) sepia(16%) saturate(5364%) hue-rotate(148deg) brightness(99%) contrast(101%);
  position: absolute;
  left: 6px;
}

.feedbackbtnAreas_all .feedbackbtn button.good {
  padding-left: 12px;
  margin-right: 24px;
}

.feedbackbtnAreas_all .feedbackbtn button.bad {
  padding-left: 16px;
}

.feedbackbtnAreas_all .feedbackbtn button.feedback_sent {
  background-color: #006563;
  color: #ffffff;
}

.feedbackbtnAreas_all .feedbackbtn button.feedback_sent img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(18deg) brightness(106%) contrast(101%);
}

/* 非活性 */
.feedbackbtnAreas_all .feedbackbtn button.feedback_disabled {
  border: 1px dashed #aeaeae;
  color: #aeaeae;
  background: #ffffff;
}

.feedbackbtnAreas_all .feedbackbtn button.feedback_disabled img {
  filter: invert(80%) sepia(9%) saturate(16%) hue-rotate(341deg) brightness(87%) contrast(87%);
}

/* results masseage common */
.generationresults_all .generationresults_label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #707070;
  margin: 32px 0;
  font-size: 1.125rem;
}

.generationresults_all .generationresults_label img {
  width: 47px;
  margin-right: 16px;
  filter: brightness(0) saturate(100%) invert(46%) sepia(8%) saturate(0%) hue-rotate(155deg) brightness(92%) contrast(88%);
}

/* loading */
.generationresults_all .loadingArea {
  margin-bottom: 64px;
}

.generationresults_all .indicator ul {
  width: 100%;
  height: fit-content;
  padding: 0 32px;
}

.generationresults_all .indicator ul li {
  display: block;
  margin-top: 10px;
  height: 12px;
  background: #ededed;
  background: linear-gradient(90deg, rgba(237, 237, 237, 1) 0%, rgba(143, 143, 143, 1) 100%);
  border-radius: 10px;
  margin-bottom: 1.125rem;
}

.generationresults_all .indicator ul li:nth-child(1) {
  width: 80%;
}

.generationresults_all .indicator ul li:nth-child(2) {
  width: 60%;
}

.generationresults_all .indicator ul li:nth-child(4) {
  width: 70%;
}

.generationresults_all .indicator ul li:nth-child(5) {
  width: 85%;
}

/*以下フェードイン表示の指定*/
.fadein {
  opacity: 0;
  animation: fadein 3s ease forwards;
}

@keyframes fadein {
  100% {
    opacity: 1;
  }
}

/*以下遅延の指定*/
.txt01 {
  animation-delay: 0.3s;
}

.txt02 {
  animation-delay: 0.6s;
}

.txt03 {
  animation-delay: 0.9s;
}

.txt04 {
  animation-delay: 1.2s;
}

.txt05 {
  animation-delay: 1.5s;
}

.loadingArea.skeletonscreen {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 50;
  overflow: hidden;
}

@keyframes skeleton-animation {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.skeletonscreen::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgb(255 255 255 / 60%),
      transparent);
  animation: skeleton-animation 1.5s linear infinite;
}

.generationresults_fail {
  text-align: center;
  font-size: 1.125rem;
  font-weight: bold;
}