/* ビュー表示 */
/*.view-users-prompt .view-content {*/
/*  display: grid;*/
/*  grid-template-columns: 240px 240px 240px; !* 幅240pxの要素を3つ表示 → レスポンシブ対応のため自動に変更*!*/
/*  gap: 10px;*/
/*  grid-auto-rows: 300px;!* minmax(240px, auto); *!*/
/*  !* background-color: #ddd; *!*/
/*  !* border: 3px solid #666; *!*/
/*  padding: 2px;*/
/*  margin: 10px;*/
/*  overflow:visible;*/
/*}*/

/*.view-users-prompt .view-content .views-row {*/
/*  background: #6B9400;*/
/*  color: whitesmoke;*/
/*  font-size: 14px;*/
/*  height: 300px;*/
/*  word-break: break-all;*/
/*  !* white-space: nowrap; *!*/
/*  overflow:hidden;*/
/*}*/
/*.view-users-prompt .view-content .views-row:hover {*/
/*  background: #AFBF4C;*/

/*  color: yellow;*/
/*  font-size: 14px;*/
/*  height: 300px;*/

/*  word-break: break-all;*/
/*  !* white-space: nowrap; *!*/
/*  overflow:hidden;*/
/*}*/

/*.view-users-prompt .view-content .views-row .users-prompt-title {*/
/*  color: white;*/
/*  font-size: 18px;*/
/*  text-align: center;*/
/*}*/
/*.view-users-prompt .view-content .views-row .users-prompt-description {*/
/*  font-size: 14px;*/
/*  line-height: 120%;*/
/*  text-align: left;*/
/*}*/
/*.view-users-prompt .view-content .views-row .users-prompt-prompt {*/
/*  font-size: 14px;*/
/*  line-height: 120%;*/
/*  text-align: left;*/
/*}*/



/*.view-users-prompt .view-content .views-row .users-prompt-link {*/
/*  text-align: center;*/
/*}*/

/*.view-users-prompt .view-content .views-row .users-prompt-a-link {*/
/*  !*display: block;*!*/
/*  !*width: 120px;*!*/
/*  padding: 3px;*/
/*  margin: 3px;*/
/*  color: white;*/
/*  text-decoration: none;*/
/*  text-align: center;*/
/*  font-size: 14px;*/
/*  background: darkgreen;*/
/*  border-radius: 10px;*/
/*}*/
/*.view-users-prompt .view-content .views-row .users-prompt-a-link:hover {*/
/*  background: lightgreen;*/
/*  color: hotpink;*/
/*}*/
/* https://spicaweblog.com/2022/05/gridlayout/ */
/* https://webdesign-trends.net/entry/11086 */






/*https://www.memory-lovers.blog/entry/2020/01/27/180000*/
*:focus {
  outline: none;
}
a {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}
/* トップページテンプレート一覧*/

/* PCスマホ共通のCSS */
@media only screen and (min-width: 1851px) {
  .top-provider-list .view-content {
    display: grid;
    grid-template-columns: 240px 240px 240px 240px 240px 240px 240px; /* 幅240pxの要素を3つ表示 → レスポンシブ対応のため自動に変更*/
    gap: 10px;
    grid-auto-rows: 240px; /* minmax(240px, auto); */
    /* background-color: #ddd; */
    /* border: 3px solid #666; */
    padding: 2px;
    margin: 10px;
    overflow: visible;
  }
}
/* PCスマホ共通のCSS */
@media only screen and (max-width: 1850px) {
  .top-provider-list .view-content {
    display: grid;
    grid-template-columns: 240px 240px 240px 240px 240px 240px; /* 幅240pxの要素を3つ表示 → レスポンシブ対応のため自動に変更*/
    gap: 10px;
    grid-auto-rows: 240px; /* minmax(240px, auto); */
    /* background-color: #ddd; */
    /* border: 3px solid #666; */
    padding: 2px;
    margin: 10px;
    overflow: visible;
  }
}
/* PCスマホ共通のCSS */
@media only screen and (max-width: 1600px) {
  .top-provider-list .view-content {
    display: grid;
    grid-template-columns: 240px 240px 240px 240px 240px; /* 幅240pxの要素を3つ表示 → レスポンシブ対応のため自動に変更*/
    gap: 10px;
    grid-auto-rows: 240px; /* minmax(240px, auto); */
    /* background-color: #ddd; */
    /* border: 3px solid #666; */
    padding: 2px;
    margin: 10px;
    overflow: visible;
  }
}
/* PCスマホ共通のCSS */
@media only screen and (max-width: 1350px) {
  .top-provider-list .view-content {
    display: grid;
    grid-template-columns: 240px 240px 240px 240px; /* 幅240pxの要素を3つ表示 → レスポンシブ対応のため自動に変更*/
    gap: 10px;
    grid-auto-rows: 240px; /* minmax(240px, auto); */
    /* background-color: #ddd; */
    /* border: 3px solid #666; */
    padding: 2px;
    margin: 10px;
    overflow: visible;
  }
}
/* PCスマホ共通のCSS */
@media only screen and (max-width: 1100px) {
  .top-provider-list .view-content {
    display: grid;
    grid-template-columns: 240px 240px 240px; /* 幅240pxの要素を3つ表示 → レスポンシブ対応のため自動に変更*/
    gap: 10px;
    grid-auto-rows: 240px; /* minmax(240px, auto); */
    /* background-color: #ddd; */
    /* border: 3px solid #666; */
    padding: 2px;
    margin: 10px;
    overflow: visible;
  }
}
/* PCスマホ共通のCSS */
@media only screen and (max-width: 850px) {
  .top-provider-list .view-content {
    display: grid;
    grid-template-columns: 240px 240px; /* 幅240pxの要素を3つ表示 → レスポンシブ対応のため自動に変更*/
    gap: 10px;
    grid-auto-rows: 240px; /* minmax(240px, auto); */
    /* background-color: #ddd; */
    /* border: 3px solid #666; */
    padding: 2px;
    margin: 10px;
    overflow: visible;
  }
}
/* PC用のCSS 規定領域以下の場合 */
@media only screen and (max-width: 600px) {
  .top-provider-list .view-content {
    display: grid;
    grid-template-columns:240px 240px;
    gap: 10px;
    grid-auto-rows: 240px;/* minmax(240px, auto); */
    /* background-color: #ddd; */
    /* border: 3px solid #666; */
    padding: 2px;
    margin: 10px;
    overflow:visible;
  }
}
/* スマホ用のCSS 規定領域以下の場合 */
@media only screen and (max-device-width: 600px) {
  .top-provider-list .view-content {
    display: grid;
    grid-template-columns: 240px;
    gap: 10px;
    grid-auto-rows: 240px;/* minmax(240px, auto); */
    /* background-color: #ddd; */
    /* border: 3px solid #666; */
    padding: 2px;
    margin: 10px;
    overflow:visible;
  }
}

/*テンプレート選択メニュー枠スタイル設定*/
div.top-provider-chatgptmethod-menu {
  padding: 20px 5px 20px 5px;
  margin: 0 10px 0 10px;
  border-width: 5px;
  border-style: solid;
  color: #2b3035;
  background-color: whitesmoke;
  opacity: 0.7;
  border-color: darkcyan;
  text-align: center;
  border-radius: 10px;/*角の丸み*/
}
div.top-provider-chatgptmethod-menu:hover {
  opacity: 1;
}
/*テンプレート選択メニュー選択項目のスタイル設定*/
label.class-chatgptmethod:hover {
  transition:0.2s;
  font-weight: bold;
}
/*テンプレート選択メニュー選択項目のスタイル設定*/
label.class-chatgptmethod.checked {
  color : darkorange;
  background: linear-gradient(transparent 60%, yellow 70%);
  border-radius: 8px 5px 30px 8px;/*角の丸み*/
  font-weight: bold;
}

/*ボックスのスタイル設定はgridlayout-dark/light参照 */

/*ボックス共通設定*/
.top-provider-list .view-content .views-row {
  /*background-image: url("/sites/default/files/2023-10-26_013233_sinceretechnology.jpg");*/
  /*通常時は少し暗めにする*/
  opacity:0.7;
  /*background: #6B9400;*/
  /*background: #333333;*/
  /*color: whitesmoke;*/
  font-size: 16px;
  height: 240px;
  word-break: break-all;
  /* white-space: nowrap; */
  overflow:hidden;
  border-radius: 10px;
  position: relative;
  padding-bottom: 3rem;
  text-align: center;
  z-index: 0;		/* イメージセルのデフォルト（過去イメージ履歴表示の場合に使用） */
}
/*ボックス共通ホバー時設定*/
.top-provider-list .view-content .views-row:hover {
  opacity:1;
  transition:0.2s;
  filter: brightness(110%);
  transform: scale(1.05); /* 拡大 */
  z-index: 1;	/* マウスホバーでタイトル表示レイヤーの前方に移動する */
}
/* イメージに文字を乗せる */
.top-provider-list .view-content .views-row .image-caption {
  font-size:		100%;
  text-align: 		left;
  padding-top:		10px;
  color:			#eee;
}
/* マスク（文字のレイヤー） */
.top-provider-list .view-content .views-row .image-mask {
  width:			100%;
  height:			100%;
  position:		absolute;	/* 絶対位置指定 */
  top:			0;
  left:			0;
  opacity:		1;	/* マスクを70%で表示 */
  background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
  -webkit-transition:	all 0.2s ease;
  transition:		all 0.2s ease;
  z-index: 1;		/* 通常タイトル表示レイヤーを前方に移動する */
}
/* マスク（文字のレイヤー）ホバー時 */
.top-provider-list .view-content .views-row:hover .image-mask {
  opacity:		1;
  z-index: -1;	/* マウスホバーでタイトル表示レイヤーを後方に移動 */
}

/* 広告 */
/* 広告イメージ */
.top-provider-list .view-content .views-row.promotion img{
  position: relative;
  width:100%;
}
/* 広告ラベル文字 */
.top-provider-list .view-content .views-row.promotion p{
  position: absolute;
  top:0;
  left:0;
  font-size:12px;
  color: red;
  opacity:0.7;
  background: lightblue;
  padding:0;
  margin:5px 0 0 10px;
}

/* ニュース */
/* ニュースイメージ */
.top-provider-list .view-content .views-row.news img{
  position: relative;
  width:100%;
}
  /* ニュースラベル文字 */
.top-provider-list .view-content .views-row.news p{
   position: absolute;
   top:0;
   left:0;
   font-size:12px;
   color: red;
   opacity:0.8;
   background: lightgoldenrodyellow;
   padding:0;
   margin:5px 0 0 10px;
 }



.top-provider-list .view-content .views-row .users-prompt-icon {
  font-size: 14px;
  line-height: 120%;
  text-align: center;
  padding: 1px;
  margin: 3px 0px 0px 2px;
  background: hotpink;
  color: yellow;
  border-radius: 10px;
  width: 80px;
  font-style: italic;
  font-weight: bold;
}


.top-provider-list .view-content .views-row .users-prompt-title {
  /*color: white;*/
  font-size: 18px;
  text-align: center;
  margin: 0px;
  padding: 0px;
}
.top-provider-list .view-content .views-row .users-prompt-description {
  font-size: 14px;
  line-height: 120%;
  text-align: left;
  padding: 2px;
  margin: 0px;
}
.top-provider-list .view-content .views-row .users-prompt-prompt {
  font-size: 14px;
  line-height: 120%;
  text-align: left;
}
.top-provider-list .view-content .views-row .users-prompt-category {
  font-size: 11px;
  line-height: 120%;
  text-align: right;
  /*color: lightgoldenrodyellow;*/
  padding: 0px;
  margin: 0px;
  margin-left: auto;
  font-weight: bold;
}
.top-provider-list .view-content .views-row .users-prompt-version {
  font-size: 11px;
  line-height: 120%;
  text-align: right;
  padding: 2px;
  margin: 0px;
  font-style: italic;
  margin-left: auto;
}
.top-provider-list .view-content .views-row .users-prompt-author {
  font-size: 11px;
  line-height: 80%;
  text-align: right;
  padding: 2px;
  margin: 0px;
  font-style: italic;
  margin-left: auto;
}


.top-provider-list .view-content .views-row .users-prompt-link {
  text-align: center;
  padding: 5px;
  margin: 0px;
  margin-left: auto;
}

.top-provider-list .view-content .views-row .users-prompt-a-link {
  /*display: block;*/
  /*width: 120px;*/
  padding: 2px 15px 2px 15px;
  margin: 2px;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  border-radius: 10px;
  background: orange;
  color: white;
}
.top-provider-list .view-content .views-row .users-prompt-a-link:hover {
  background: lightgreen;
  color: hotpink;
}

.top-provider-list .view-content .views-row .users-prompt-like {
  color: white;
  text-align: center;
  padding: 0px;
  margin: 5px;
  font-size: 18px;
  font-weight: normal;
}

.top-provider-list .view-content .views-row .users-prompt-like.blue {
  color: blue;
  background: transparent;
}
.top-provider-list .view-content .views-row .users-prompt-like.hotpink {
  color: hotpink;
  background: transparent;
}
.top-provider-list .view-content .views-row .users-prompt-like.white {
  color: white;
  background: transparent;
}

.top-provider-list .view-content .views-row .users-prompt-like:hover {
  text-align: center;
  padding: 0px;
  margin: 5px;
  font-size: 18px;
  font-weight: bold;
}
.top-provider-list .view-content .views-row .users-prompt-like-count {
  text-align: center;
  padding: 0px;
  margin: 5px 5px 5px 0px;
  font-size: 14px;
}

.top-provider-list .view-content .views-row .users-prompt-favourite {
  color: white;
  text-align: center;
  padding: 0px;
  margin: 5px;
  font-size: 18px;
  font-weight: normal;
}

.top-provider-list .view-content .views-row .users-prompt-favourite.blue {
  color: blue;
  background: transparent;
}
.top-provider-list .view-content .views-row .users-prompt-favourite.hotpink {
  color: hotpink;
  background: transparent;
}
.top-provider-list .view-content .views-row .users-prompt-favourite.white {
  color: white;
  background: transparent;
}

.top-provider-list .view-content .views-row .users-prompt-favourite:hover {
  text-align: center;
  padding: 0px;
  margin: 5px;
  font-size: 18px;
  font-weight: bold;
}

.top-provider-list .view-content .views-row .users-prompt-favourite-count {
  text-align: center;
  padding: 0px;
  margin: 5px 5px 5px 0px;
  font-size: 14px;
}


.top-provider-list .view-content .views-row .users-prompt-totalview {
  color: white;
  text-align: center;
  padding: 0px;
  margin: 5px;
  font-size: 8px;
  font-weight: normal;
}
.top-provider-list .view-content .views-row .users-prompt-totalview-count {
  text-align: center;
  padding: 0px;
  margin: 5px 5px 5px 0px;
  font-size: 8px;
}

.top-provider-list .view-content .views-row .views-row-header {
  display: flex;
  position: absolute;
  bottom: 218px;
  width: 240px;
  height: 24px;
  background: transparent;
  padding: 2px;
}

.top-provider-list .view-content .views-row .views-row-body {
  /*display: flex;*/
  position: absolute;
  bottom: 32px;
  width: 240px;
  height: 190px;
  background: transparent;
  padding: 5px;
  word-break: break-all;
  /* white-space: nowrap; */
  overflow:hidden;
}

.top-provider-list .view-content .views-row .views-row-footer {
  display: flex;
  position: absolute;
  bottom: 5px;
  width: 240px;
  height: 32px;
  background: transparent;
  padding: 5px;
}




.top-provider-list .view-content .views-row .views-row-body .views-row-body-container {
  display: grid;
  grid-template-columns: 28px 202px; /* 幅240pxの要素を3つ表示 → レスポンシブ対応のため自動に変更*/
  gap: 1px;
  grid-template-rows: 28px 12px 200px;/* minmax(240px, auto); */
  /* background-color: #ddd; */
  /* border: 3px solid #666; */
  padding: 0px;
  margin: 0px;
  overflow:visible;
  height:32px;
}
.top-provider-list .view-content .views-row .views-row-body .views-row-body-container .views-row-body-container-icon{
  grid-column: 1;
  grid-row: 1 / span 2;

  /*background: #6B9400;*/
  /*position: absolute;*/
  background: transparent;
  color: white;
  font-size: 8px;
  width: 28px;
  height: 28px;
  word-break: break-all;
  /* white-space: nowrap; */
  overflow:hidden;
  border-radius: 7px;
  word-break: break-all;
  /*position: relative;*/
  margin: 0;
  padding: 0;
}
.top-provider-list .view-content .views-row .views-row-body .views-row-body-container .views-row-body-container-icon:hover{
  opacity:0.5;
  transition:0.3s;
}
.top-provider-list .view-content .views-row .views-row-body .views-row-body-container  .views-row-body-container-title{
  /*background: #6B9400;*/
  /*position: absolute;*/
  background:transparent;
  /*color: whitesmoke;*/
  font-size: 14px;
  width: 200px;
  height: 28px;
  word-break: break-all;
  /* white-space: nowrap; */
  overflow:hidden;
  border-radius: 10px;
  /*position: relative;*/
  margin: 0;
  padding: 0;
}
.top-provider-list .view-content .views-row .views-row-body .views-row-body-container  .views-row-body-container-category{
  /*background: #6B9400;*/
  /*position: absolute;*/
  background:transparent;
  /*color: whitesmoke;*/
  font-size: 14px;
  width: 200px;
  height: 12px;
  word-break: break-all;
  /* white-space: nowrap; */
  overflow:hidden;
  border-radius: 10px;
  /*position: relative;*/
  margin: 0;
  padding: 0;
}
.top-provider-list .view-content .views-row .views-row-body .views-row-body-container  .views-row-body-container-description{
  grid-column: 1 / 2;
  /*background: #6B9400;*/
  /*position: absolute;*/
  background:transparent;
  /*color: whitesmoke;*/
  font-size: 14px;
  width: 240px;
  height: 200px;
  word-break: break-all;
  /* white-space: nowrap; */
  overflow:hidden;
  border-radius: 10px;
  /*position: relative;*/
  padding-bottom: 3rem;
  bottom: 0px;
}

.top-provider-list .view-content .views-row .views-row-body .views-row-body-container .views-row-body-container-icon img{
  width: 24px;
  height: 24px;
}




/* トップページテンプレート一覧*/
/* pluginで定義済み背景色差し替え */
.top-provider-list .view-content .plum {
  background: plum;
}
.top-provider-list .view-content .lightpink {
  background: lightpink;
}
.top-provider-list .view-content .hotpink {
  background: hotpink;
}
.top-provider-list .view-content .darkblue {
  background: darkblue;
}
.top-provider-list .view-content .mediumblue {
  background: mediumblue;
}
.top-provider-list .view-content .navy {
  background: navy;
}
.top-provider-list .view-content .darkviolet {
  background: darkviolet;
}
.top-provider-list .view-content .lightcoral {
  background: lightcoral;
}
.top-provider-list .view-content .limegreen {
  background: limegreen;
}
.top-provider-list .view-content .forestgreen {
  background: forestgreen;
}
.top-provider-list .view-content .darkgreen {
  background: darkgreen;
}
.top-provider-list .view-content .tomato {
  background: tomato;
}
.top-provider-list .view-content .darkorange {
  background: darkorange;
}
.top-provider-list .view-content .darkgoldenrod {
  background: darkgoldenrod;
}
.top-provider-list .view-content .yellowgreen {
  background: yellowgreen;
}
.top-provider-list .view-content .lightyellow {
  background: lightyellow;
}
.top-provider-list .view-content .gold {
  background: gold;
}
.top-provider-list .view-content .goldenrod {
  background: goldenrod;
}
.top-provider-list .view-content .white {
  background: white;
}
.top-provider-list .view-content .color-7295A7 {
  background: #7295A7;
}
.top-provider-list .view-content .color-00669A {
  background: #00669A;
}
.top-provider-list .view-content .color-7bd1de {
  background: #7bd1de;
}
.top-provider-list .view-content .color-daa520 {
  background: #DAA520;
}
.top-provider-list .view-content .color-7bd1de {
  background: #7bd1de;
}
.top-provider-list .view-content .color-3cb371 {
  background: #3CB371;
}

/*JQUERY（BOOTSTRAP?)のTOOLTIPオプションが効かないため無効*/
.ui-tooltip-toppage{
  background-color: lightyellow;
  color: hotpink;
}

/*.top-provider-list .view-content .white {*/
/*  background: whitesmoke;*/
/*}*/
.top-provider-list .view-content .white.hover-white:hover {
  background: white;
}

.top-provider-list .view-content .hover-color-daa520:hover {
  background: #DAA520;
}
.top-provider-list .view-content .color-7bd1de.hover-color-7bd1de:hover {
  background: #7bd1de;
}

.top-provider-list .view-content .blog-article {
  color: plum;
  background: transparent;
}


.top-provider-list .view-content .views-row.blog-article .users-prompt-title {
  color: hotpink;
  text-decoration: none;
  font-size: 18px;
  text-align: center;
  margin: 0px;
  padding: 0px;
}
.top-provider-list .view-content .views-row.blog-article .users-prompt-description {
  color: hotpink;
  font-size: 14px;
  line-height: 120%;
  text-align: left;
  padding: 2px;
  margin: 0px;
}

.top-provider-list .view-content .views-row.blog-article .users-prompt-category {
  color: hotpink;
  font-size: 11px;
  line-height: 120%;
  text-align: right;
  padding: 0px;
  margin: 0px;
  margin-left: auto;
  font-weight: bold;
}

.top-provider-list .view-content .views-row.blog-article .users-prompt-author {
  color: hotpink;
  font-size: 11px;
  line-height: 80%;
  text-align: right;
  padding: 2px;
  margin: 0px;
  font-style: italic;
  margin-left: auto;
}
.top-provider-list .view-content .views-row.blog-article .users-prompt-link {
  text-align: center;
  padding: 5px;
  margin: 0px;
  margin-left: auto;
}

.top-provider-list .view-content .views-row.blog-article .users-prompt-a-link {
  /*display: block;*/
  /*width: 120px;*/
  padding: 2px 15px 2px 15px;
  margin: 2px;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  border-radius: 10px;
  background: cornflowerblue;
  color: white;
}

.top-provider-list .view-content .views-row.blog-article .views-row-body {
  /*display: flex;*/
  position: absolute;
  bottom: 5px;
  width: 240px;
  height: 217px;
  background: transparent;
  padding: 5px;
  word-break: break-all;
  /* white-space: nowrap; */
  overflow:hidden;
}
div.top-sticky-block-guidance{
  padding: 50px 10px 0px 10px;
}
div.top-space {
  margin-top: 3em;
}

textarea.background-yellow,input.background-yellow,select.background-yellow{
  background-color: lightyellow;
}
textarea.background-blue,input.background-blue,select.background-blue{
  background-color: lightcyan;
}
input.userprompt-submit_delete:hover{
  color: white;
  background-color: darkorange;
}
input.userprompt-submit_delete{
  color: white;
  background-color: orangered;
}
input.button-disabled{
pointer-events: none;
}

/*タブ表示の背景色（背景色黒のダークテーマ使用時に文字が黒になるため見えなくなる問題に対処）*/
div.horizontal-tabs{
  background-color: white;
}
div.details-wrapper.card-body{
  background-color: lightblue;
}