@charset "Shift_JIS";


/* ==================================================
   サイト全体の基本設定
   旧style.cssからレイアウトに必要な部分だけ移植
================================================== */


/* ==================================================
   ページ全体
================================================== */

html {
  scroll-behavior: smooth;
}

body {
  margin: auto;

  background-color: #eeeeee;
  background-repeat: repeat;
  background-attachment: fixed;

  font-size: 12px;

  font-family:
    'Lucida Grande',
    'Hiragino Kaku Gothic ProN',
    'ヒラギノ角ゴ ProN W3',
    Meiryo,
    'メイリオ',
    sans-serif;
}


/* ==================================================
   基本リンク
================================================== */

a:link {
  color: #333333;
}

a:visited {
  color: #333333;
}

a:hover {
  color: #333333;
}

a:active {
  color: #333333;
}


/* ==================================================
   ヘッダー全体
================================================== */

#inner {
  width: 970px;
  height: 106px;

  margin: 0;

  background-image: url(../../images/hedder.gif);
  background-repeat: no-repeat;
}


/* ==================================================
   ヘッダー上部テキスト
================================================== */

#hedder {
  width: 970px;
  height: 12px;

  padding-top: 5px;

  font-size: 8pt;
  font-style: normal;
}


/* ==================================================
   左上ロゴ
================================================== */

#hedder-left {
  width: 430px;
  height: 91px;

  padding-left: 20px;

  float: left;
  overflow: hidden;
}


/* ==================================================
   右上メニュー
================================================== */

#hedder-right {
  width: 480px;
  height: 40px;

  padding: 41px 0 0 0;

  clear: right;
  overflow: hidden;
}


/* ==================================================
   コンテンツ全体
================================================== */

#container {
  width: 970px;

  margin: 0;
  padding: 0;

  background-image: url(../../images/back02.gif);
}


/* ==================================================
   コンテンツ上部
================================================== */

#main_contents_top {
  width: 970px;
  height: 6px;

  margin: 0;
  padding: 0;

  background-image: url(../../images/back_top_02.gif);
}


/* ==================================================
   左メニュー
================================================== */

#main_contents01 {
  width: 210px;

  margin-left: 5px;
  padding-bottom: 20px;

  float: left;
}


/* ==================================================
   右側メインコンテンツ
================================================== */

#main_contents02 {
  width: 740px;

  margin: 0;
  padding-right: 10px;

  float: left;
}

/* ==================================================
   コンテンツ下部
================================================== */

#main_contents_bottom {
  width: 970px;
  height: 6px;

  margin: 0;
  padding: 0;

  clear: both;
}


/* ==================================================
   左メニュー内
================================================== */

#op {
  width: 200px;

  background-color: #ffffff;

  font-size: 12px;
  line-height: 150%;
}

#op ul {
  margin: 0;
  padding: 10px 0 15px 0;

  list-style-image: url(../../images/arrow.gif);
}

#op li {
  margin-bottom: 8px;
  margin-left: 25px;
}


/* ==================================================
   既存HTML内のテーブル文字サイズ
================================================== */

table {
  font-size: 12px;
}
/* ==================================================
   フッター
   サイト本体と同じ幅・位置に揃える
================================================== */

#footer{
	width:930px;
	 background-color:#ffffff;
	 border-left:1px solid #454545;
	 border-top:1px solid #454545;
	 border-right:1px solid #454545;
	 padding:10px;
	 margin-top:30px;
}

#footer-inner{
	 	
	 background-color:#eeeeee;
	 padding:15px;
	 text-align:left;
	 font-size:12px;
	 line-height:150%;
}

#cr{
	 background-color:#ffffff;
	 margin:10px 0px 0px 0px;
	 text-align:center;
	 font-size:12px;
	 color:#333333;

}

/* ==================================================
   ここから箔見本ページ
================================================== */

/* ==================================================
   パンくず
================================================== */

.haku-breadcrumb {
  width: 100%;

  padding: 13px 20px 12px;

  border-bottom: 1px solid #e5e5e5;

  color: #888888;

  font-size: 11px;
  line-height: 1.7;

  text-align: left;
}

.haku-breadcrumb a {
  color: #638d91;

  text-decoration: none;
}

.haku-breadcrumb a:hover {
  text-decoration: underline;
}
/* ==================================================
   フェア限定箔
================================================== */

.haku-fair-section {
  margin-top: 35px;
}


/* ==================================================
   フェア見出し
================================================== */

.haku-fair-head {
  box-sizing: border-box;

  width: 620px;

  margin: 0 auto 25px;
  padding: 0 0 13px;

  border-bottom: 1px solid #78aeb1;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* ==================================================
   2つ目以降のフェア
================================================== */

.haku-fair-head-next {
  margin-top: 45px;
}


/* ==================================================
   フェア名
================================================== */

.haku-fair-title {
  margin: 0;
  padding: 0;
}

.haku-fair-title span {
  display: block;

  margin: 0 0 3px;

  color: #78aeb1;

  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.15em;
}

.haku-fair-title h3 {
  width: auto;
  height: auto;

  margin: 0;
  padding: 0;

  background: none;
  border: 0;

  color: #333333;

  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
}


/* ==================================================
   フェア詳細ボタン
================================================== */

.haku-fair-btn {
  display: inline-block;

  margin: 0;
  padding: 6px 12px;

  background: #78aeb1;

  border-radius: 3px;

  color: #ffffff !important;

  font-size: 9px;
  font-weight: bold;
  line-height: 1.4;

  text-decoration: none;
}

.haku-fair-btn:hover {
  background: #5f969a;

  color: #ffffff !important;

  text-decoration: none;
}

/* ==================================================
   箔見本ページ本体
================================================== */

#haku-sample {
  box-sizing: border-box;

  width: 680px;

  margin: 0 auto;
  padding: 38px 0 55px;

  background: #ffffff;
}

/* ==================================================
   ページタイトル
================================================== */

.haku-header {
  margin-bottom: 30px;

  text-align: center;
}

.haku-header-en {
  margin: 0 0 5px;

  color: #78aeb1;

  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.18em;
}

.haku-header h1 {
  margin: 0 0 13px;
  padding: 0;

  background: none;

  border: 0;

  color: #333333;

  font-size: 27px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.08em;

  text-align: center;
}

.haku-lead {
  margin: 0;

  color: #666666;

  font-size: 12px;
  line-height: 1.9;

  text-align: center;
}

/* ==================================================
   ご利用前の注意事項
================================================== */

.haku-notice {
  box-sizing: border-box;

  width: 620px;

  margin: 0 auto 28px;
  padding: 18px 22px 16px;

  background: #f7f8f8;
  border-radius: 6px;

  color: #666666;

  text-align: left;
}


/* 見出し */

.haku-notice-title {
  margin: 0 0 12px;
  padding: 0 0 9px;

  border-bottom: 1px solid #e1e4e4;

  color: #555555;

  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;

  text-align: left;
}


/* 注意事項一覧 */

.haku-notice-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.haku-notice-list li {
  position: relative;

  margin: 0 0 7px;
  padding: 0 0 0 13px;

  color: #666666;

  font-size: 11px;
  line-height: 1.7;

  text-align: left;
}

.haku-notice-list li:last-child {
  margin-bottom: 0;
}


/* 箇条書きの小さい丸 */

.haku-notice-list li:before {
  position: absolute;

  top: 0.7em;
  left: 2px;

  width: 3px;
  height: 3px;

  background: #8fa7a8;
  border-radius: 50%;

  content: "";
}
/* ==================================================
   注意事項内 データ作成
================================================== */

.haku-notice-data {
  margin: 17px 0 0;
  padding: 13px 0 0;

  border-top: 1px solid #dddddd;

  color: #666666;

  font-size: 11px;
  line-height: 1.7;

  text-align: right;
}

.haku-notice-data a {
  margin-left: 4px;

  color: #558f94 !important;

  font-weight: bold;
  text-decoration: none;
}

.haku-notice-data a:hover {
  text-decoration: underline;
}


/* ==================================================
   NEW箔のお知らせ
================================================== */

.haku-new-area {
  box-sizing: border-box;

  width: 620px;

  margin: 0 auto 38px;
  padding: 18px 20px;

  border-top: 2px solid #78aeb1;
  border-bottom: 2px solid #78aeb1;

  text-align: left;
}


/* 上段 */

.haku-new-head {
  display: flex;
  align-items: center;

  margin: 0 0 14px;
}

.haku-new-notice-label {
  display: inline-block;

  margin-right: 12px;
  padding: 4px 8px;

  background: #78aeb1;
  border-radius: 2px;

  color: #ffffff;

  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.12em;
}

.haku-new-text {
  color: #555555;

  font-size: 11px;
  line-height: 1.6;
}

.haku-new-text strong {
  display: block;

  margin-bottom: 1px;

  color: #444444;

  font-size: 14px;
}

.haku-new-text span {
  display: block;
}

/* ==================================================
   箔サンプル通販
================================================== */

/* ==================================================
   第二弾サンプル
================================================== */

.haku-second-sample {
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 14px;

  background: #ffffff;

  border: 1px solid #b8d4d5;
  border-radius: 4px;
}

.haku-second-sample-text {
  text-align: left;
}

.haku-second-sample-text strong {
  display: block;

  margin: 0 0 3px;

  color: #558f94;

  font-size: 13px;
  font-weight: bold;
  line-height: 1.5;
}

.haku-second-sample-text span {
  display: block;

  color: #666666;

  font-size: 11px;
  line-height: 1.6;
}


/* 第二弾 通販準備中 */

.haku-second-sample-coming {
  display: inline-block;

  margin-left: 15px;
  padding: 7px 13px;

  background: #dfe9e9;
  border-radius: 3px;

  color: #687d7e;

  font-size: 11px;
  font-weight: bold;
  line-height: 1.4;

  white-space: nowrap;
}


/* ==================================================
   第一弾サンプル
================================================== */

.haku-first-sample {
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 8px;
  padding: 12px 14px;

  background: #ffffff;

  border: 1px solid #dce5e5;
  border-radius: 4px;
}

.haku-first-sample-text {
  text-align: left;
}

.haku-first-sample-text strong {
  display: block;

  margin: 0 0 3px;

  color: #555555;

  font-size: 13px;
  font-weight: bold;
  line-height: 1.5;
}

.haku-first-sample-text span {
  display: block;

  color: #777777;

  font-size: 11px;
  line-height: 1.6;
}


/* 第一弾 通販ボタン */

.haku-first-sample-btn {
  display: inline-block;

  margin-left: 15px;
  padding: 7px 13px;

  background: #78aeb1;
  border-radius: 3px;

  color: #ffffff !important;

  font-size: 11px;
  font-weight: bold;
  line-height: 1.4;

  text-decoration: none;
  white-space: nowrap;
}

.haku-first-sample-btn:hover {
  background: #5f969a;

  color: #ffffff !important;
  text-decoration: none;
}

/* ==================================================
   箔の種類一覧
================================================== */

.haku-index {
  width: 620px;

  margin: 0 auto 45px;
  padding: 18px 20px;

  background: #f7f8f8;

  border-radius: 6px;
}

.haku-index-title {
  margin: 0 0 12px;

  color: #555555;

  font-size: 12px;
  font-weight: bold;

  text-align: center;
}


/* 一覧 */

.haku-index-list {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}


/* 各リンク */

.haku-index-list a {
  box-sizing: border-box;

  width: calc(50% - 4px);

  padding: 8px 10px;

  background: #ffffff;

  border: 1px solid #dce6e6;
  border-radius: 4px;

  color: #558f94;

  font-size: 11px;

  text-align: center;
  text-decoration: none;
}

.haku-index-list a:hover {
  background: #eef5f5;

  text-decoration: none;
}


/* 移動したとき見出しが少し上に来るよう調整 */

.haku-section {
  scroll-margin-top: 20px;
}
/* ==================================================
   箔の種類ごとのエリア
================================================== */

.haku-section {
  margin: 0 0 55px;
}


/* ==================================================
   箔の種類 見出し
================================================== */

.haku-section-title {
  margin: 0 0 25px;
  padding: 0 0 10px;

  background: none;

  color: #333333;

  font-size: 19px;
  font-weight: bold;
  line-height: 1.4;

  border: 0;
  border-bottom: 1px solid #cfdedf;
}

.haku-section-title span {
  display: block;

  margin-bottom: 3px;

  color: #65a2a6;

  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.16em;
}

/* ==================================================
   箔一覧・4列
   同じ段のカードだけ高さを揃える
================================================== */

.haku-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  width: 620px;

  margin: 0 auto;
  padding: 0;

  column-gap: 16px;
  row-gap: 28px;

  align-items: stretch;
}
/* ========================================
   ホログラム箔 価格区分
======================================== */
/* ========================================
   ホログラム箔 価格区分
======================================== */

.haku-price-group {
  box-sizing:border-box;
  width:620px;
  margin:0 auto 32px;
  padding:18px 0 20px;
  border:2px solid;
  border-radius:8px;
}


/* 見出し */

.haku-price-group-head {
  box-sizing:border-box;
  margin:0 18px 18px;
  padding:0 0 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  text-align:left;
}

.haku-price-group-head h3 {
  display:inline-block;
  margin:0;
  padding:6px 14px;
  border-radius:4px;
  color:#fff;
  font-size:12px;
  font-weight:bold;
  line-height:1.4;
}


/* 中のカード */

.haku-price-group .haku-grid {
  box-sizing:border-box;
  width:auto;
  margin:0 18px;
  gap:28px 16px;
}


/* ========================================
   価格区分 1：ブルー
======================================== */

.haku-price-group:nth-of-type(1) {
  background:#f1f8fa;
  border-color:#9fc9d2;
}

.haku-price-group:nth-of-type(1) .haku-price-group-head h3 {
  background:#70aebc;
}


/* ========================================
   価格区分 2：イエロー
======================================== */

.haku-price-group:nth-of-type(2) {
  background:#fff9eb;
  border-color:#e4c77e;
}

.haku-price-group:nth-of-type(2) .haku-price-group-head h3 {
  background:#c9a34b;
}


/* ========================================
   価格区分 3：ピンク
======================================== */

.haku-price-group:nth-of-type(3) {
  background:#fdf3f5;
  border-color:#dda9b5;
}

.haku-price-group:nth-of-type(3) .haku-price-group-head h3 {
  background:#c98293;
}
/* ==================================================
   箔カード
================================================== */

.haku-card {
  box-sizing: border-box;

  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e7e7e7;
  border-radius: 7px;

  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.045);

  display: flex;
  flex-direction: column;
}


/* ==================================================
   NEWバッジ
================================================== */

.haku-card {
  position: relative;
}

.haku-new {
  position: absolute;
  z-index: 2;

  top: 8px;
  left: 8px;

  padding: 3px 5px;

  background: rgba(0, 0, 0, 0.45);

  color: #ffffff;

  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.08em;

  border-radius: 2px;
}

/* ==================================================
   箔カードの文字部分
================================================== */

.haku-card-info {
  box-sizing: border-box;

  /* height / min-height は指定しない */
  padding: 12px 10px 13px;

  background: #ffffff;

  text-align: center;

  flex: 1;

  display: flex;
  flex-direction: column;
}


/* ==================================================
   箔名
================================================== */

.haku-card-info h3 {
  width: auto;
  height: auto;

  margin: 0;
  padding: 0;

  background: none;
  border: 0;

  color: #333333;

  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;

  text-align: center;
}


/* ==================================================
   補足説明
================================================== */

.haku-card-note {
  margin: 8px 0 0;
  padding: 8px 0 0;

  border-top: 1px solid #eeeeee;

  color: #777777;

  font-size: 9px;
  line-height: 1.6;

  text-align: left;
}
/* ==================================================
   箔画像
================================================== */
.haku-image-link {
  display: block;

  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #f5f5f5;

  text-decoration: none;
}

.haku-image-link img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.3);
  transform-origin: center;

  border: 0;
}

/* ==================================================
   ページ下部リンク
================================================== */

.haku-bottom-link {
  margin-top: 55px;
  padding-top: 20px;

  border-top: 1px solid #eeeeee;

  font-size: 11px;
  line-height: 1.8;

  text-align: center;
}

.haku-bottom-link a {
  color: #558f94;

  text-decoration: none;
}

.haku-bottom-link a:hover {
  text-decoration: underline;
}


/* ==================================================
   画像拡大表示
================================================== */

#haku-modal {
  position: fixed;
  z-index: 99999;

  top: 0;
  left: 0;

  display: none;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
}

#haku-modal-bg {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: #000000;

  opacity: 0.8;
  filter: alpha(opacity=80);
}

#haku-modal-inner {
  position: absolute;
  z-index: 2;

  top: 50%;
  left: 50%;

  width: 80%;
  max-width: 800px;

  margin: 0;
  padding: 0;

  transform: translate(-50%, -50%);

  text-align: center;
}

#haku-modal-image {
  display: inline-block;
width: auto;
height: 700px;

max-width: 90vw;
max-height: 85vh;

object-fit: contain;
  margin: 0;
  padding: 0;

  background: #ffffff;

  border: 0;

  box-shadow: 0 7px 35px rgba(0, 0, 0, 0.4);

  /* ふわっと拡大 */
  animation: hakuFadeIn 0.45s ease;
}


/* ==================================================
   画像をふわっと表示
================================================== */

@keyframes hakuFadeIn {

  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}


/* ==================================================
   閉じるボタン
================================================== */

#haku-modal-close {
  position: absolute;

  top: -38px;
  right: 0;

  width: 32px;
  height: 32px;

  margin: 0;
  padding: 0;

  background: transparent;

  border: 0;

  color: #ffffff;

  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: normal;
  line-height: 32px;

  cursor: pointer;
}


/* ==================================================
   箔見本内のサイズ計算
================================================== */

#haku-sample *,
#haku-sample *:before,
#haku-sample *:after {
  box-sizing: border-box;
}