﻿@charset "UTF-8";
/* CSS Document */
/* ==================================================
新データベース専用
糸魚川コレクション
================================================ */
/*作成上のコメント*/
.memo {
  font-size: 12px;
  color: red;
}
.tyuui {
  font-size: 12px;
  margin-bottom: 5px;
}
/*基本色
----------------------*/
/*border: solid 1px #CADC38;*/ /*基本色*/
/*#C1CF57; 濃い目*/

/*--------------------------------------------------------
共通
ページタイトル（新flex）2025/11/28
iconとタイトル並列　.com_db_page_title_flex
------------------------------------------------------- */
/*左（アイコンとタイトル）右（戻るボタン）*/
.com_db_page_title_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0px 0 0px 0;
  padding: 0px 0px;
  box-sizing: border-box;
  border: solid 0px;
}
/*左（アイコンとタイトル）
-------------------------------------*/
.com_db_page_title_flex02 {
  display: flex;
  align-items: center;
  text-align: left;
}
/*ページicon*/
.com_db_page_title_flex02 .icon img {
  width: 30px;
  vertical-align: bottom;
}
@media (max-width: 400px) {
  .com_db_page_title_flex02 .icon img {
    width: 24px;
  }
}
/*ページタイトル*/
.com_db_page_title_flex02 .title {
  font-size: 20px;
  line-height: 30px;
  margin-left: 5px;
  /*color: #0B67C4;*/ /*文森色と同系色*/
  color: #9CAE10;
}
@media (max-width: 400px) {
  .com_db_page_title_flex02 .title {
    font-size: 18px;
    line-height: 18px;
  }
}
/*右（戻るボタン）  通常
---------------------------------------------------------- */
/*位置を固定*/
.com_db_back_btn_area {
  /*text-align: right;*/
  border: solid 0px;
}
.com_db_back_btn_area a {
  text-decoration: none;
  color: #424446;
}
/*ボタン仕様*/
.com_db_back_btn_area .back_btn {
  text-align: center;
  padding: 6px 16px;
  /*cursor: pointer;*/
  font-size: 10px;
  color: #000000;
  border-radius: 4px;
  /*background-color: #ffffff;*/
  border: solid 1px#CADC38; /*基本色*/
  transition: 0.5s; /*hover処理の時間*/
}
.com_db_back_btn_area .back_btn:hover {
  background-color: #EAF49C;
}
/*ボタンの左矢印*/
.com_db_back_btn_area .back_arrow {
  display: block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-top: solid 1px;
  border-right: solid 1px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
/*矢印と文字（戻る）並列*/
.com_db_back_btn_area .back_arrow, .com_back_btn_area .back_txt {
  display: inline-block;
}
/*右（戻るボタン） が2個並ぶ 長さ同じ
糸魚川コレクションのみ
---------------------------------------------------------- */
/*位置を固定*/
.com_db_back_btn_area2 {
	/*width: 300px;*/
  /*text-align: right;*/
	display: flex;
	flex-direction:column;
	grid-gap: 6px;
  border: solid 0px;
}
.com_db_back_btn_area2 a {
	/*width: 100%;*/
  text-decoration: none;
  color: #424446;
}
/*ボタン仕様*/
.com_db_back_btn_area2 .back_btn2 {
	width: 180px;
  text-align: left;
  padding: 6px 16px;
  /*cursor: pointer;*/
  font-size: 10px;
  color: #000000;
  border-radius: 4px;
  /*background-color: #ffffff;*/
  border: solid 1px#CADC38; /*基本色*/
  transition: 0.5s; /*hover処理の時間*/
}
.com_db_back_btn_area2 .back_btn2:hover {
  background-color: #EAF49C;
}
/*ボタンの左矢印*/
.com_db_back_btn_area2 .back_arrow {
  display: block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-top: solid 1px;
  border-right: solid 1px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
/*矢印と文字（戻る）並列*/
.com_db_back_btn_area2 .back_arrow, .com_back_btn_area2 .back_txt {
  display: inline-block;
}@media (max-width: 749px) {
  /*戻るボタンを消す-----------------------------------*/
  .com_db_back_btn_area {
    display: none;
  }
	  .com_db_back_btn_area2 {
    display: none;
  }
}
/*--------------------------------------------------------
コンテンツ全体枠
2025/11/28
------------------------------------------------------- */
/*共通*/
#com_date_base_contents {
  padding-top: 20px;
  border: solid 0px;
}
/*-------------------------------------
indexで使用
----------------------------------------*/
.com_db_contents_waku {
  width: 100%;
  /*max-width: 1200px;*/
  margin-bottom: 30px;
  padding: 20px 60px 20px 60px;
  box-sizing: border-box;
  /*border: solid 1px #79C5CB;*/
  border: solid 1px #CADC38; /*基本色*/
}
@media (max-width: 749px) {
  /*1展覧会の枠*/
  .com_db_contents_waku {
    padding: 0px 0px;
    box-sizing: border-box;
    border: solid 0px #79C5CB;
  }
}
/*以下は各ページ共通
----------------------------------------------*/
/*コンテンツ名小*/
.contents_title_s {
  font-size: 14px;
  line-height: 18px;
  /*font-weight: bold;*/
  margin-bottom: 4px;
  margin-top: 4px;
}
/*コンテンツ名大*/
.contents_title {
  font-size: 24px;
  line-height: 30px;
  text-align: left;
  border: solid 0px;
}
/*svg　糸魚川コレクション*/
.contents_title_svg {
  width: 100%;
  max-width: 220px;
}
/*緑の●*/
.contents_title span {
  display: inline-block;
}
@media (max-width: 749px) {
  /*コンテンツ名小*/
  .contents_title_s {
    font-size: 14px;
    line-height: 16px;
    /*font-weight: bold;*/
    margin-bottom: 3px;
  }
  /*コンテンツ名大*/
  .contents_title {
    font-size: 18px;
    line-height: 20px;
  }
}
/*共通ここまで
------------------------------------------*/
/************************************************************
indexで使用
画像と説明
***********************************************************/
.com_db_contents_waku .setsume_flex {
  display: flex;
  width: 100%;
  margin-top: 30px;
  /*max-width: 600px;*/
  /*font-size: 14px*/
}
@media (max-width: 749px) {
  .com_db_contents_waku .setsume_flex {
    flex-direction: column;
    margin-top: 10px;
  }
}
.com_db_contents_waku .setsume_flex img {
  width: 100%;
  max-width: 200px;
}
/*通常テキスト*/
.com_db_contents_waku .setsume_flex .txt {
  flex: 1;
  text-align: justify;
  padding: 0 0 0 20px;
  box-sizing: border-box;
}
/*カラム設定
-----------------------------*/
.com_db_contents_waku .setsume_flex .content_column {
  flex: 1;
  padding: 0 0 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: justify;
  column-count: 2; /*カラム数*/
  column-gap: 20px; /*カラムの間隔*/ /**区切り線がない場合有効*/
  /*column-rule-style: solid;*/ /*区切り線*/
  /*column-rule-width: 1px;*/ /*区切り線*/
  /*column-rule-color: chocolate;*/ /*区切り線*/
}
/*カラム改行位置指定
---------------------------------*/
.com_db_contents_waku .setsume_flex .content_column .desk_top {
  break-before: column;
}
.com_db_contents_waku .setsume_flex .content_column .sp {
  display: none;
}
@media (max-width: 749px) {
  .com_db_contents_waku .setsume_flex .content_column {
    padding: 10px 0 0 0px;
  }
}
/*幅400以下は1カラム*/
@media (max-width: 400px) {
  .com_db_contents_waku .setsume_flex .content_column {
    column-count: 1; /*カラム数*/
  }
  .com_db_contents_waku .setsume_flex .content_column .desk_top {
    display: none;
  }
  /*改行する*/
  .com_db_contents_waku .setsume_flex .content_column .sp {
    display: block;
  }
}
/************************************************************
indexで使用
検索
        <section class="com_db_contents_search">
          <article class="item_flex">
            <div class="searc_title">作品検索</div>
            <div><a class="" href="search1.cfm">
              <div class="btn">分類表から検索</div>
              </a> </div>
            <div><a class="" href="search2.cfm">
              <div class="btn">条件設定で検索</div>
              </a> </div>
          </article>
        </section>
***********************************************************/
.com_db_contents_search {
  width: 100%;
  margin: 30px auto 0 auto;
  border: solid 0px;
}
.com_db_contents_search .item_flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 20px; /*間隔*/
  /*justify-content: center;*/
  /*align-items: center;*/ /*天地中央にする*/
  margin-top: 0px;
  margin-bottom: 10px;
  border: solid 0px;
}
@media (max-width: 600px) {
  .com_db_contents_search .item_flex {
    column-gap: 0px; /*間隔*/
    flex-direction: column;
    align-items: flex-start;
  }
}
/* 検索タイトル */
.com_db_contents_search .item_flex .searc_title {
  width: 200px;
  font-size: 14px;
  padding: 7px 10px;
  box-sizing: border-box;
  color: #000000;
  /*background-color: #5AB4BD; */
  background-color: #EAF49C; /*基本色*/
  border-left: solid 20px #C1CF57;
}
/*ボタン関係
----------------------------------*/
.com_db_contents_search .item_flex a {
  text-decoration: none;
}
.com_db_contents_search .item_flex .btn {
  width: 110px;
  font-size: 12px;
  text-align: center;
  border-radius: 4px;
  padding: 8px 10px;
  /*border: solid 1px #9ECF59;*/
  border: solid 1px #B6CC0D;
  color: #000000;
}
@media (max-width: 600px) {
  .com_db_contents_search .item_flex .btn {
    margin-top: 6px;
  }
}
.com_db_contents_search .item_flex .btn:hover {
  background-color: #EAF49C;
}
/* ==================================================
サムネール一覧
（result1.cfmで使用）（result2.cfmで使用）
   ================================================ */
section.s_image_list_flex {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px; /*間隔*/
}
/*1件の枠*/
section.s_image_list_flex .waku {
  width: 100%;
  max-width: 140px;
  text-align: center;
  margin-bottom: 20px;
}

section.s_image_list_flex img {
  width: 100%;
  max-width: 140px;
}
section.s_image_list_flex  img:hover{
	cursor: pointer;
	border: solid 2px #CADC38;
}
/*作品名*/
section.s_image_list_flex .name {
  margin-top: 5px;
  font-size: 12px;
  line-height: 14px;
	text-align: justify;
}
/*資料名*//*サムネールでは不要*/
section.s_image_list_flex .txt02 {
  font-size: 10px;
}
@media (max-width: 500px) {
  /*1件の枠*/
  section.s_image_list_flex .waku {
    width: 100%;
    max-width: 80px;
  }
}



/* ==================================================
内容　サブタイトル以下

   ================================================ */

/*全体
------------------------------------*/
.date_base_contents {
  max-width: 1000px;
  margin-top: 50px;
  margin-bottom: 50px;
  border: solid 0px;
}
/* 情報タイトル
------------------------------------ */
.info_title {
  width: 100%;
  padding: 3px 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  color: #000000;
  background-color: #EAF49C; /*基本色*/
  border-left: solid 20px #C1CF57;
}
/*検索ドロワーがある場合
ためmargin-top調整
---------------------------------------*/
.date_base_contents2 { /*詳しく検索結果画面に使用（検索条件表示するため）*/
  max-width: 1000px;
  margin-bottom: 50px;
  border: solid 0px;
}
.date_base_contents3 { /*詳細*/
  width: 100%;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  padding: 0 2%;
  box-sizing: border-box;
  margin-bottom: 50px;
  border: solid 0px;
}
/* ==================================================
フッター位置固定用
   ================================================ */
#wrapper_flex {
  min-height: 100vh;
  position: relative; /*←相対位置*/
  padding-bottom: 300px; /*←footerの高さ*/
  box-sizing: border-box; /*←全て含めてmin-height:100vhに*/
}
@media (max-width: 749px) {
  #wrapper_flex {
    padding-bottom: 100px;
  }
}
#footer {
  position: absolute; /*←絶対位置*/
  bottom: 0; /*下に固定*/
}