@charset "UTF-8";
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● style_creat_culture.css                            */
/*    ふくい文化創造センター 専用CSS                      */
/*    ・ページ固有の処理を記述                            */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    各種import                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    カラー設定                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* カラー定義
   初期値は default のみだが、
   任意の文字列をキーとして使って色を定義すれば、
   サイト内で複数のカラー定義を持てる
 ------------------------------------ */
/* 引数でキーを指定して
   上記のマップで定義したカラーを返すfunction

   $contents-type: "second-color";
   のように $contents-type のキー値を変えておけば
   getBaseColor($contents-type);
   を使用した際に、別カラーをセットできる仕組み

   $base-color-map: (
     default:       rgb(81,72,63)
     second-color:  rgb(81,72,63)
   );

 ------------------------------------ */
/* カラー定義
 ------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    プロパティ                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    継承用（試作）                                */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 仮）疑似要素

       ::before, ::after で要素付加するときに書きがちな処理
 ------------------------------------ */
/* 画像の伸縮表示
     img要素に対して適用する。imgの幅と高さも定義すること
     上記「アスペクト比を保った表示ボックス」と併用推奨
 ------------------------------------ */
._img_contain {
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

._img_cover {
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

/* 仮）ノイズを付加
 ------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    mixin 定義                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* サイトロゴ

   想定しているHTML構造 ※見出しレベル h1～h6 は任意
   <h1 class="SiteLogo">
     <a href="">
       <img src="<?php $this->BcBaser->themeUrl(); ?>img/common/logo/site_logo.svg" alt="" />
     </a>
   </h1>

   適用例 ）
    .SiteLogo{
        @include site-logo();
    } 
 ------------------------------------------------------------------------ */
/* 基本ページ幅

   適用例 ）
    .hogehoge{
        @include page-width-default();
    } 
 ------------------------------------------------------------------------ */
/* アスペクト比を保った表示ボックス
   ※ 旧ブラウザを無視するなら  aspect-ratio: ●/●; で済むが
      非対応ブラウザにも適用したい場合の処理
      ・横幅は基本100％で扱う。100%幅以外にしたい場合はこの要素よりも親要素で適用させる

   想定しているHTML構造
     <p class="Image">
       <img src="XXXX">
     </p>
   などで、.Image に適用させ、img に object-fit でフィット方法を併記して使う


   適用例 ）
    .Image{
        @include aspect-ratio(); //デフォルトのアスペクト比を使う場合
    }     
    .Image{
        @include aspect-ratio(6 / 19); //個別にアスペクト比を指定して使う場合
    } 
 ------------------------------------------------------------------------ */
/* flex 関連のプロパティをまとめて定義

   適用例 ）
    .hogehoge{
        @include flex();
    }  
    .hogehoge{
        @include flex(center, flex-end);
    }  
 ------------------------------------------------------------------------ */
/* clearfix

   適用例 ）
    .hogehoge{
        @include clearfix();
    }  
 ------------------------------------------------------------------------ */
/* dotline

   適用例 ）
    .hogehoge{
        @include dotline();
    }  
 ------------------------------------------------------------------------ */
/* レスポンシブ 対応用 ブレイクポイントによる条件分岐 
   適用例 ）
   @include media-query(under-bp-m) {
      $breakpoint-m よりも小さいウィンドウ幅の処理をここに書く
   }     
 ------------------------------------------------------------------------ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    World                                         */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* --------------------------------------------------- */
/* 各種コンテンツ                                      */
/* --------------------------------------------------- */
/* 汎用ブロック
--------------------------------------------------- */
.DefaultBlock .Heading {
  margin-bottom: 0.5em;
}
.DefaultBlock .ThumbnailList {
  margin-bottom: 2.5rem;
}
.DefaultBlock .ThumbnailList > li .Image img {
  border-radius: 3rem;
}
.DefaultBlock ol.DecoratedList > li {
  margin-left: 2em;
}
.DefaultBlock ol.DecoratedList > li::before {
  white-space: nowrap;
  font-family: monospace !important;
  position: absolute;
  right: 100%;
  font-weight: 600;
}
.DefaultBlock .SknTplDecoratedTable table tr:not(:last-child) {
  border-bottom: 1px dashed #ccc;
}
.DefaultBlock .SknTplDecoratedTable table tr th,
.DefaultBlock .SknTplDecoratedTable table tr td {
  padding: 1rem 2rem;
}
@media screen and (max-width: 767px) {
  .DefaultBlock .SknTplDecoratedTable table tr th,
  .DefaultBlock .SknTplDecoratedTable table tr td {
    padding: 1rem 2rem;
  }
}
.DefaultBlock .SknTplDecoratedTable table tr th {
  background: rgba(0, 0, 0, 0.02);
}
.DefaultBlock .SknTplDecoratedTable table + table tr {
  border-top: none;
}

/* インデックス冒頭部
--------------------------------------------------- */
.AboutBlock {
  margin-top: 0;
  margin-bottom: 5rem;
}
.AboutBlock.CreatCultureIndexBlock > .Heading {
  margin-bottom: 0.5em;
}
.AboutBlock.CreatCultureIndexBlock .SoshikiImage {
  border: 2px solid;
  border-radius: 1rem;
  text-align: center;
}
@media screen and (min-width: 768px), print {
  .AboutBlock.CreatCultureIndexBlock .SoshikiImage {
    padding: 2rem;
  }
  .AboutBlock.CreatCultureIndexBlock .SoshikiImage img {
    max-width: 800px;
  }
}
.AboutBlock.CreatCultureIndexBlock ol.DecoratedList li {
  display: block;
  font-weight: 600;
}
.AboutBlock.CreatCultureIndexBlock ol.DecoratedList li .Sub {
  font-size: smaller;
  display: block;
  font-weight: 500;
}
.AboutBlock.CreatCultureIndexBlock .SknTplDecoratedTable th {
  background-color: #f8f8f2;
  width: 25%;
}
.AboutBlock.CreatCultureIndexBlock .SknTplDecoratedTable th a.DefaultButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  padding: 1.5rem 1rem;
}
.AboutBlock.CreatCultureIndexBlock .SknTplDecoratedTable th a.DefaultButton .Label {
  white-space: nowrap;
}

/* インデックス部分（事業紹介インデックスのCSSベース）
--------------------------------------------------- */
.BusinessIntroductionIndexBlock.CreatCultureIndexBlock {
  margin-top: 7.5rem;
}
.BusinessIntroductionIndexBlock.CreatCultureIndexBlock .BlockContents .ParagraphGroup {
  gap: 2rem;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border-radius: 1rem;
}
@media screen and (min-width: 768px), print {
  .BusinessIntroductionIndexBlock.CreatCultureIndexBlock .BlockContents .ParagraphGroup .ContentsLinkParagraph {
    width: calc((100% - 6rem) / 4);
  }
}
@media screen and (max-width: 767px) {
  .BusinessIntroductionIndexBlock.CreatCultureIndexBlock .BlockContents .ParagraphGroup .ContentsLinkParagraph {
    width: calc((100% - 2rem) / 2);
  }
}
.BusinessIntroductionIndexBlock.CreatCultureIndexBlock .BlockContents .ParagraphGroup .ContentsLinkParagraph .ParagraphHeader {
  height: 3em;
  padding: 0 0.5rem;
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .BusinessIntroductionIndexBlock.CreatCultureIndexBlock .BlockContents .ParagraphGroup .ContentsLinkParagraph .ParagraphHeader {
    font-size: 1.3rem;
  }
}
.BusinessIntroductionIndexBlock.CreatCultureIndexBlock .BlockContents .ParagraphGroup .ContentsLinkParagraph .ParagraphHeader .Heading {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin: 0;
}
.BusinessIntroductionIndexBlock.CreatCultureIndexBlock .BlockContents .ParagraphGroup .ContentsLinkParagraph .ParagraphFooter {
  padding: 0 2rem 1.5rem;
}
@media screen and (max-width: 767px) {
  .BusinessIntroductionIndexBlock.CreatCultureIndexBlock .BlockContents .ParagraphGroup .ContentsLinkParagraph .ParagraphFooter {
    padding: 0 1rem 1rem;
  }
}
.BusinessIntroductionIndexBlock.CreatCultureIndexBlock .BlockContents .ParagraphGroup .ContentsLinkParagraph .ParagraphFooter .DefaultButton {
  font-size: 1.4rem;
  padding: 1rem;
}
@media screen and (max-width: 767px) {
  .BusinessIntroductionIndexBlock.CreatCultureIndexBlock .BlockContents .ParagraphGroup .ContentsLinkParagraph .ParagraphFooter .DefaultButton {
    font-size: 1.2rem;
  }
}

/* 文化創造センター記事詳細
--------------------------------------------------- */
.CreatCultureBlock.Detail .BlockHeader .Heading .Sub {
  display: inline-block !important;
}
@media screen and (max-width: 767px) {
  .CreatCultureBlock.Detail .BlockContents .CategoryList li a {
    font-size: 1.3rem;
  }
}
@media screen and (min-width: 768px), print {
  .CreatCultureBlock.Detail .BlockContents .SknTplDecoratedTable {
    font-size: 1.6rem;
  }
  .CreatCultureBlock.Detail .BlockContents .SknTplDecoratedTable th {
    width: 20rem;
  }
  .CreatCultureBlock.Detail .BlockContents .SknTplDecoratedTable td {
    width: auto;
  }
}
@media screen and (max-width: 767px) {
  .CreatCultureBlock.Detail .BlockContents .SknTplDecoratedTable td {
    padding: 1rem 2rem;
  }
}
.CreatCultureBlock.Detail .SknTplImageParagraph .ColumnGroup {
  gap: 1rem;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   もっと見るリンク                               */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/* MoreLink
--------------------------------------------------- */
/* 開閉ボックス
--------------------------------------------------- */
.read_more_box {
  position: relative;
}
.read_more_box input {
  display: none;
}
.read_more_box .read_more_container {
  padding: 1em 0;
}
.read_more_box:not(.Invalid) {
  /*続きをよむボタン*/
  /*閉じるボタン*/
}
.read_more_box:not(.Invalid) label {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  text-align: center;
  /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) calc(100% - 7.5em), white calc(100% - 1em));
}
.DecoratedBg.Type2 .read_more_box:not(.Invalid) label {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 242, 0)), to(#f8f8f2));
  background: linear-gradient(to bottom, rgba(248, 248, 242, 0) calc(100% - 7.5em), #f8f8f2 calc(100% - 1em));
}
.read_more_box:not(.Invalid) input:checked + label {
  background: inherit !important;
}
.read_more_box:not(.Invalid) input:checked + label {
  /* display: none ; 閉じるボタンを消す場合コメントアウトを外す */
}
.read_more_box:not(.Invalid) .read_more_container {
  overflow: hidden;
  min-height: 15em;
  max-height: 15em; /* 開く前に見えている部分の高さ */
}
.read_more_box:not(.Invalid) label::after {
  content: "";
  position: absolute;
  cursor: pointer;
}
.read_more_box:not(.Invalid) label::after {
  content: "▼ 詳細を開く";
  z-index: 2;
  right: 0;
  top: 0%;
  -webkit-transform: translate(0%, -100%);
          transform: translate(0%, -100%);
  color: #252525;
  background: #fff;
  border-radius: 3em;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 9em;
  height: 3em;
  border: 2px solid;
  font-size: 1.2rem;
  font-weight: 800;
  pointer-events: auto;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.read_more_box:not(.Invalid) label:hover::after {
  color: #fff;
  background: #252525;
  border-color: #252525;
}
.read_more_box:not(.Invalid) input:checked + label:after {
  content: "▲ 詳細を閉じる";
}
.read_more_box:not(.Invalid) input ~ .read_more_container {
  -webkit-animation: read_more_close 0.5s ease-out forwards;
          animation: read_more_close 0.5s ease-out forwards;
}
.read_more_box:not(.Invalid) input:checked ~ .read_more_container {
  -webkit-animation: read_more_open 0.5s ease forwards;
          animation: read_more_open 0.5s ease forwards;
}
@-webkit-keyframes read_more_open {
  0% {
    max-height: 15em;
  }
  90% {
    max-height: 150em;
  }
  100% {
    max-height: initial;
  }
}
@keyframes read_more_open {
  0% {
    max-height: 15em;
  }
  90% {
    max-height: 150em;
  }
  100% {
    max-height: initial;
  }
}
@-webkit-keyframes read_more_close {
  0% {
    max-height: 150em;
  }
  100% {
    max-height: 15em;
  }
}
@keyframes read_more_close {
  0% {
    max-height: 150em;
  }
  100% {
    max-height: 15em;
  }
}