@charset "UTF-8";

/* 共通 */
body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    word-break: break-all;
    font-family: var(--typo-main-font);
    color: var(--typo-main-c);
    background-color: var(--global-main-bg);
}
#main {
    flex: 1;
}
a {
    cursor: pointer;
    color: var(--brand-link-c);
    text-decoration:none;
    transition: var(--global-transition-ts); 
}
a:hover {
    color: var(--brand-link-hover-c);  
}
a:hover img {
    opacity: var(--global-hover-op);
}
img {
    transition: var(--global-transition-ts)
}

/* ダイアログサイズ768px未満 */
@media (max-width: 767.98px) {
    .modal-dialog[style*="width"] {
        width: 95% !important; 
        max-width: 95% !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* フォント */
.fs-09 {
    font-size: 0.9rem;
}
.fs-08 {
    font-size: 0.8rem;
}
.fs-07 {
    font-size: 0.7rem;
}
.fs-06 {
    font-size: 0.6rem;
}
.color_sub {
    color: var(--typo-sub-c);
}
.color_alert {
    color: var(--brand-alert-c);
}

/* バックグラウンドカラー */
.alert-bg {
    background-color: var(--brand-alert-c);
}
.notice-bg {
    background-color: var(--global-notice-c);
}
.lead-bg {
    background-color: var(--global-lead-c);
}

/* ボタン */
/* -----------------------------------------------------------
  Class: .btn_main
  Usage: 
  - [header] PC - 検索フォーム - input
----------------------------------------------------------- */
.btn_main {
    font-weight: var(--btn-main-fw);
    border: var(--global-main-border);
    border-radius: var(--global-main-br);
}
/* -----------------------------------------------------------
  Class: .btn_secondary
  Usage: 
  - [header] モバイル - ハンバーガー - 新規ユーザー登録
  - [ログイン] 新規ユーザー登録
  - [お問い合わせ] 送信内容を確認
  - [お問い合わせ] お問い合わせ内容の確認 - 修正する
  - [お問い合わせ] 送信完了 - 閉じる
  - [オトナ箱とは] ご利用ガイドをみる
  - [ご利用ガイド] 登録方法を確認する
  - [ご利用ガイド] - [新規ユーザー登録をしよう] ご利用ガイドに戻る
  - [ご利用ガイド] - [アカウント情報の変更] ご利用ガイドに戻る  
  - [ご利用ガイド] - [商品を購入しよう] ご利用ガイドに戻る
  - [ご利用ガイド] - [商品をダウンロードしよう] ご利用ガイドに戻る  
  - [ご利用ガイド] - [作品を投稿してみよう] ご利用ガイドに戻る   
  - [ご利用ガイド] - [アフィリエイトをしてみよう] ご利用ガイドに戻る     
  - [ご利用ガイド] - [アフィリエイトリンクの作成] ご利用ガイドに戻る
  - [ご利用ガイド] - [ポイントチャージをしよう] ご利用ガイドに戻る            
  - [お気に入り商品一覧] (削除したものを)元に戻す(border-1で1px)
  - [お気に入り投稿者一覧] (削除したものを)元に戻す(border-1で1px)
  - [支払待ち注文一覧] 振込先情報, Overseas Transfer
  - [商品投稿申込フォーム] 送信内容の確認
  - [商品投稿申込フォーム] - [送信内容の確認] 修正する  
  - [アフィリエイト申込フォーム] 送信内容の確認
  - [アフィリエイト申込フォーム] - [送信内容の確認] 修正する
  - [投稿者詳細ページ] お気に入り投稿者追加済（押して削除）  
  - [商品詳細] お気に入り商品に追加済
  - [商品詳細] お気に入り投稿者
  - [カートの中身] -[支払い方法の選択] 戻る
  - [カートの中身] -[注文完了] 支払い待ち注文一覧/支払い済み注文一覧 
  - [ポイントチャージ] -[注文完了] 支払い待ち注文一覧
  - [特集/統合リニューアル記念祭] ポイントチャージの方法/投稿者アカウントの登録方法/アフィリエイターの登録方法
  ----------------------------------------------------------- */
.btn_secondary {
    font-weight: var(--btn-main-fw);
    border: var(--global-main-border);
    border-radius: var(--global-main-br);
    background-color: var(--global-main-bg);
    padding: 0.65rem;    
}
.btn_secondary:hover {
    border: var(--global-main-border);    
    background-color: var(--global-hover-bg);
    color: var(--brand-primary-c);
}
/* -----------------------------------------------------------
  Class: .btn_accent
  Usage: 
  - [header] モバイル - ハンバーガー - ログイン
  - [header] PC - マイメニュー 
  - [colum_left] ログイン/新規登録
  - [ログイン] ログイン
  - [ログイン] パスワードの再設定メール送信 - 送信する
  - [ログイン] パスワードの再設定 - 設定する
  - [お問い合わせ] お問い合わせ内容の確認 - 送信する
  - [オトナ箱とは] 新規ユーザー登録してみる（中段と下部2つ）
  - [ご利用ガイド] 新規ユーザー登録をする
  - [ご利用ガイド] - [新規ユーザー登録をしよう] 新規ユーザー登録をする
  - [ご利用ガイド] - [新規ユーザー登録をしよう] ポイントチャージをする
  - [ご利用ガイド] - [アカウント情報の変更] 新規ユーザー登録をしよう 
  - [ご利用ガイド] - [作品のアップロード方法] このサイトについて(/aboutus)    
  - [ご利用ガイド] - [アフィリエイトリンクの作成] このサイトについて(/aboutus)      
  - [新規ユーザー登録] 同意して登録する
  - [アカウント設定] 更新する
  - [お気に入り商品一覧] (選択したものを)カートに入れる
  - [支払い待ち注文一覧] 振込報告, 送信する
  - [支払い済み注文一覧・ダウンロード] ダウンロード
  - [商品投稿申込フォーム] - [送信内容の確認] 送信する
  - [アフィリエイト申込フォーム] - [送信内容の確認] 送信する
  - [アフィリエイト申込フォーム] - [送信完了] ログインする 
  - [商品詳細] カートに入れる
  - [レビューの投稿/編集] 投稿する 
  - [レビューの投稿/編集完了] 商品ページを確認
  - [レビューの違反報告] 違反報告する
  - [カートの中身] レジへ進む
  - [カートの中身] -[支払い方法の選択] 次に進む
  - [カートの中身] -[注文内容の確認] 注文を確定
  - [ポイントチャージ] レジへ進む      
  - [特集/統合リニューアル記念祭] 新規ユーザー登録              
----------------------------------------------------------- */
.btn_accent {
    font-weight: var(--btn-main-fw);
    background-color: var(--brand-primary-c);
    border: var(--global-main-border);
    border-radius: var(--global-main-br);
    color: #fff;
    padding: 0.65rem;
}
.btn_accent:hover {
    border: var(--global-main-border);   
    color: var(--brand-primary-c);
    background-color: var(--brand-accent-c);
}
/* -----------------------------------------------------------
  Class: .btn_sub
  Usage: 
  - [header] PC - 検索フォーム - button
----------------------------------------------------------- */
.btn_sub {
    font-weight: var(--btn-sub-fw);
    background-color: var(--brand-primary-c);
    border: var(--global-main-border);
    border-radius: var(--global-main-br);
}
/* -----------------------------------------------------------
  Class: .btn_link
  Usage: 
  - [colum_left] 注目ジャンル
  - [ジャンル一覧] ジャンル  
  - [投稿者詳細ページ] お気に入り投稿者に追加
  - [商品詳細] お気に入り商品に追加（border-2）
  - [商品詳細] お気に入り投稿者に追加
  - [商品詳細] レビューを書く/編集する（border-2）
  - [レビュー一覧] 編集する
  - [カートの中身] お気に入り商品に追加
  - [カートの中身] - お買い忘れはありませんか？ - カートに追加
  - [カートの中身] - [注文内容の確認]（支払い方法/商品内容を）変更する
  - [ポイントチャージ] 金額の指定  
----------------------------------------------------------- */
.btn_link {
    border: var(--global-link-border);    
    border-radius: var(--global-main-br);
    background-color: var(--global-main-bg);
}
.btn_link:hover {
    border: var(--global-link-border);    
    background-color: var(--global-hover-bg); 
}
/* -----------------------------------------------------------
  Class: .btn_tag
  Usage: 
  - [Top] モバイル - 人気のジャンル    
----------------------------------------------------------- */
.btn_tag {
    border: var(--global-alt-bw) double var(--brand-link-c);    
    border-radius: var(--global-accent-br);
    background-color: var(--global-main-bg);
}
.btn_tag:hover {
    border: var(--global-alt-bw) double var(--brand-link-c);       
    background-color: var(--global-hover-bg); 
}
/* -----------------------------------------------------------
  Class: .btn_ghost
  Usage: 
  - [header] モバイル - ハンバーガー - 履歴
  - [colum_left] 所持ポイント - 履歴を見る
  - [商品詳細] ユーザーレビュー - このレビューは参考になりましたか？ - はい/いいえ
----------------------------------------------------------- */
.btn_ghost {
    border: var(--global-alt-border);    
    border-radius: var(--global-main-br);
}
.btn_ghost:hover {
    border: var(--global-alt-border);
    background-color: var(--global-hover-bg);    
}
/* -----------------------------------------------------------
  Class: .btn_thin
  Usage: 
  - [お気に入り商品一覧] (選択したものを)削除
  - [お気に入り投稿者一覧] 削除
  - [商品詳細] カートから削除
  - [商品詳細] ユーザーレビュー - 削除
  - [レビュー一覧] 削除する
  - [カートの中身] カートから削除  
----------------------------------------------------------- */
.btn_thin {
    border: var(--global-thin-border);    
    border-radius: var(--global-main-br);
    background-color: var(--global-main-bg);
}
.btn_thin:hover {
    border: var(--global-thin-border);
    background-color: var(--global-hover-bg);    
}
/* -----------------------------------------------------------
  Class: .btn_notice
  Usage: 
  - [header] モバイル - ハンバーガー - チャージする
  - [colum_left] 所持ポイント - チャージする 
  - [アカウント設定] 管理パネルを開く
  - [商品投稿申込フォーム] - [送信完了] 管理パネルを開く
  - [商品詳細] - リンク作成
  - [カートの中身] - [支払い方法の選択] チャージする
----------------------------------------------------------- */
.btn_notice {
    border: var(--global-alt-border);    
    border-radius: var(--global-main-br);
    background-color: var(--global-notice-c);        
}
.btn_notice:hover {
    border: var(--global-alt-border);    
    background-color: var(--global-notice-hover-c);        
}
/* -----------------------------------------------------------
  ボタン風のリンクが中央にあり、ブレイクポイントでサイズ変更
  Class: .btn_center
  Usage: 
  - [オトナ箱とは] 新規ユーザー登録してみる
  - [オトナ箱とは] ご利用ガイドをみる  
  - [ご利用ガイド] 新規ユーザー登録をする
  - [ご利用ガイド] 登録方法の確認をする
  - [ご利用ガイド] - [新規ユーザー登録をしよう] 新規ユーザー登録をする
  - [ご利用ガイド] - [作品を投稿してみよう] 投稿申込フォームへ 
  - [ご利用ガイド] - [アフィリエイトをしてみよう] アフィリエイト申込フォームへ
  - [ご利用ガイド] - [ポイントチャージをしよう] ポイントを購入してみる
  - [特集/統合リニューアル記念祭] 新規ユーザー登録           
----------------------------------------------------------- */
.btn_center {
    width: 50%;
    margin: 0 auto;
    padding: 0.65rem;    
}
@media screen and (max-width: 575.98px) {
    .btn_center {
        width: 100%;
    }
}
/* -----------------------------------------------------------
  Class: .btn_user / 購入者関連
  Usage: 
  - [ご利用ガイド]
  - [ご利用ガイド] - [商品を購入しよう] ポイントチャージをしよう / 商品をダウンロードしよう  
  - [ご利用ガイド] - [商品をダウンロードしよう] 商品を購入しよう / ポイントチャージしよう /レビューを投稿しよう
  - [ご利用ガイド] - [ポイントチャージをしよう] ポイントを購入してみる / 商品を購入しよう
  - [特集/統合リニューアル記念祭] ポイントチャージする  
  ----------------------------------------------------------- */
.btn_user {
    font-weight: var(--btn-main-fw);    
    border: var(--global-user-border);    
    border-radius: var(--global-main-br);
    background-color: var(--global-main-bg); 
}
.btn_user:hover {
    border: var(--global-user-border);
    background-color: var(--global-hover-bg);
    color: var(--brand-primary-c);    
}
/* -----------------------------------------------------------
  Class: .btn_seller / 投稿者関連
  Usage: 
  - [ご利用ガイド] 
  - [ご利用ガイド] - [作品を投稿してみよう] 投稿申込フォームへ / 商品のアップロード方法
  - [ご利用ガイド] - [作品のアップロード方法] 投稿者アカウントの登録方法
  - [ご利用ガイド] - [アフィリエイトリンクの作成] 投稿者になってみよう
  - [特集/統合リニューアル記念祭] 投稿者申込フォーム     
----------------------------------------------------------- */
.btn_seller {
    font-weight: var(--btn-main-fw);    
    border: var(--global-seller-border);    
    border-radius: var(--global-main-br);
    background-color: var(--global-main-bg); 
}
.btn_seller:hover {
    border: var(--global-seller-border);
    background-color: var(--global-hover-bg);
    color: var(--brand-primary-c);    
}
/* -----------------------------------------------------------
  Class: .btn_affiliator / アフィリエイター関連
  Usage: 
  - [ご利用ガイド]
  - [ご利用ガイド] - [アフィリエイトしてみよう] アフィリエイト申込フォームへ / アフィリエイトリンクの作成
  - [ご利用ガイド] - [作品のアップロード方法] アフィリエイトをしてみよう
  - [ご利用ガイド] - [アフィリエイトリンクの作成] アフィリエイター登録方法
  - [特集/統合リニューアル記念祭] アフィリエイター申込フォーム  
----------------------------------------------------------- */
.btn_affiliator {
    font-weight: var(--btn-main-fw);    
    border: var(--global-affiliator-border);    
    border-radius: var(--global-main-br);
    background-color: var(--global-main-bg); 
}
.btn_affiliator:hover {
    border: var(--global-affiliator-border);
    background-color: var(--global-hover-bg);
    color: var(--brand-primary-c);    
}

/* 装飾 */
.main_br {
    border-radius: var(--global-main-br);    
}
.line_notice {
    text-decoration: underline; 
    text-decoration-thickness: 0.5em; 
    text-decoration-color: var(--global-notice-c); 
    text-underline-offset: -0.2em; 
    text-decoration-skip-ink: none;
}
.line_lead {
    text-decoration: underline; 
    text-decoration-thickness: 0.5em; 
    text-decoration-color: var(--global-lead-c); 
    text-underline-offset: -0.2em; 
    text-decoration-skip-ink: none;
}
.card,
.card-img-top,
.form-control,
.form-select {
    border-radius: var(--global-main-br);
}
hr {
    border-top: var(--global-thin-border);
    border-bottom: none;
    border-left: none;
    border-right: none;
    opacity: 1;
}
hr.hr-2 {
    border-top: var(--global-bs-main-border);
    border-bottom: none;
    border-left: none;
    border-right: none;    
    opacity: 1;
}
.mt-m1 {
    margin-top: -.5rem;
}
.alert-warning {
    color: var(--typo-alert-c);
    background: var(--global-main-bg);
    border-color: var(--brand-alert-c);
    border-radius: var(--global-main-br);
}
.ls-1 {
    letter-spacing: .1rem;
}
h3 {
    color: var(--brand-primary-c);
    font-weight: bold;
    padding: 0.35rem 0;
    font-size: var(--typo-lead-fs);
    border-bottom: var(--global-alt-border);
}
h3.h3-2 {
    color: #333;   
    text-shadow: 1px 1px 0px #fff, 2px 2px 0px #ffafd0;	     
}
@media screen and (max-width: 575.98px) {
    .btn {
        padding: .65rem;
    }
}

/*共通ヘッダー*/
.header-top {
    background-color: var(--brand-accent-c);
    padding: 7px 0;
}
.catchphrase {
    font-size: 0.8rem; 
    font-weight: normal;
    color: var(--typo-main-c);
    margin: 0;
}
.btn_header-search {
    color: #fff;
}
.header-middle .navbar-toggler {
    border-radius: var(--global-main-br);
    border: var(--global-main-border);
    color: var(--brand-primary-c);
}
.offcanvas-body {
    padding-top: 0;
}
.offcanvas,
#mobile_menu-accordion {
    background-color: var(--global-bs-main-bg);
}
.header-middle .accordion-item,
.accordion-item:first-of-type>.accordion-header .accordion-button,
.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
    border-radius: var(--global-main-br);
}
.header-menu .navbar {
    padding-top: 0;
}
.header-menu .nav-link {
    font-size: 0.9rem;     
    color: var(--brand-primary-c);
    font-weight: var(--btn-main-fw);
    border-top: var(--global-main-border);
    border-bottom: var(--global-main-border);
    border-left: var(--global-main-border);    
    background-color: var(--global-main-bg);
    border-radius: var(--global-main-br);
}
.header-menu .nav-item:last-child {
   border-right: var(--global-main-border);
}
.header-menu .nav-link:hover {
    background-color: var(--global-hover-bg); 
}
.header-menu .dropdown-menu {
    font-size: 0.9rem;
    margin-top: 0.5rem;
    border: var(--global-main-border);
    border-radius: var(--global-main-br);
    padding: 0;
}
.header-menu .dropdown-menu li {
    border-bottom: var(--global-accent-border);
}
.header-menu .dropdown-menu li:last-child {
    border-bottom: none;
}
.header-menu .dropdown-item {
    padding:var(--btn-main-pad);
    font-weight: bold;
}
.header-menu .dropdown-item:first-of-type {
    border-top: 0px;
}
.header-menu .dropdown-menu a.dropdown-item:hover {
    background-color: var(--global-hover-bg);     
}
.mobile_menu-point {
    border: var(--global-main-border);
    padding: 0.75rem;
    background-color: var(--global-main-bg);
}
#mobile_menu-accordion .accordion-button {
    padding: 0.75rem;
    color: var(--global-main-bg);
    background-color: var(--brand-primary-c);
}
#mobile_menu-accordion .accordion-button::after {
    filter: invert(1) brightness(2);
}
#mobile_menu-accordion .accordion-body {
    padding: 1rem;
    background-color: var(--global-main-bg);
    border-left: var(--global-sub-border); 
    border-right: var(--global-sub-border); 
    border-bottom: var(--global-sub-border);         
}
.accordion-menu {
    padding: 0.35rem;
    background: var(--global-accent-bg);    
    margin-bottom: 0.75rem;
}
.accordion-menu a { 
    background-color: var(--global-main-bg);
    padding: 0.75rem;
    font-size: 1rem;
    color: var(--brand-primary-c);
    box-shadow: 0px 1px 2px var(--global--main-md-under-bg);
}
.accordion-menu-cap {
    font-size: 0.7rem;
    padding-left: 0.75rem;
}
.accordion {
    --bs-accordion-btn-focus-box-shadow: none;    
}
.accordion-menu a:last-child {
    margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .nav-link {
      font-size: var(--typo-secondary-fs);
	  }
    .dropdown-menu {
        font-size: var(--typo-secondary-fs);
    }
    .dropdown-item {
        font-weight: 100;
    }
    .offcanvas-body .form-control {
        font-size: var(--typo-secondary-fs);
    }
}
@media screen and (max-width: 767.98px) {
    .offcanvas-body li {
        font-size: var(--typo-sub-fs);
    }
}

/* 共通フッター */
footer {
    width: 100%;
	text-align: right;		
	background-color: var(--global-bs-main-bg);
	padding: 20px 10px 30px;
    margin-top: 2rem;
}
#footer_menu {
	font-size: var(--typo-secondary-fs);
	font-weight: bold;
	display: inline-block;
}
#footer_menu a {
	color: var(--typo-main-c);
}
#footer_menu a:hover {
	color: var(--brand-link-c);
}
#copyright {
	margin-top: 10px;
    font-size: var(--typo-ghost-fs);
    color: var(--typo-sub-c);
}
#fly_to_top {
    position: fixed;
    bottom: 80px;
    left: 5px;
    z-index: 99999;
    display: none;
    cursor: pointer;
}
@media screen and (max-width: 767.98px) {
	footer {
        text-align: center; 
        padding-bottom: 70px;
	}
}

/* モバイル下部ナビ */
#bottom_navbar {
    background: var(--global-main-bg); 
    padding: 2px 0;
    box-shadow: 0 -3px 10px rgb(0 0 0 / 7%);
    line-height: 1;
}
#bottom_navbar .bi {
    font-size: 1.2em;
}
#bottom_navbar .navbar-nav .nav-link.active {
    color: var(--brand-active-c);
}

/* PC左サイドバー */
#colum_left {
    font-size: var(--typo-ghost-fs);	
}
#colum_left h4 {
    font-size: var(--typo-ghost-fs);
    background: var(--global-main-bg);
    padding: 5px 0;
    margin-bottom: 4px;
    border-bottom: var(--global-thin-border);    
}
#colum_left dt {
    color: var(--typo-sub-c);
    font-weight: 100;
    font-size: 0.7rem;
}
#colum_left .list-group-item,
#colum_left .card-header,
#colum_left .card-body {
    padding: 7px;
}
#colum_left .card,
#colum_left .list-group-item {
    color: var(--typo-main-c);
}
.colum_left_mymenu-list a {
    font-size: 0.7rem;
    color: var(--typo-main-c);
    border-bottom: var(--global-bs-main-border);
    padding: .25rem;
}
.colum_left_mymenu-list .bi {
    font-size: var(--typo-bi-fs);
    padding-right: .5rem;
}
.colum_left_mymenu-list a:hover {
    background-color: var(--global-hover-bg);
}
#colum_left_pickup h5 {
    word-break: break-all;
    font-size: 0.65rem;
	font-weight: normal;
    color: var(--typo-main-c);
    margin-top: .2rem;    
    margin-bottom: .2rem;
}
#colum_left_pickup .nailthumb-container a:hover h5 {
    color: var(--brand-link-c);
}
#colum_left_system h6 {
	font-size: var(--typo-secondary-fs);
	border-bottom: var(--global-bs-main-border);
}
#colum_left_link a {
    text-align: center;
    display: block;
    padding: .35rem .5rem;
}
#colum_left_link a img {
    width: 90%;
    height: auto;
}
#colum_left_link p {
    margin-bottom: 0;
}
@media screen and (min-width: 1200px) {
    .colum_left_mymenu-list .bi{
        padding-left: .5rem;
        padding-right: 1rem;
    }
    #colum_left_link a {
        padding: 1rem;
    }
}

/* メインコンテンツ */
#colum_right h4 {
    font-size: var(--typo-lead-fs);
    background: var(--global-main-bg);
    font-weight: bold;
    padding: 5px 0;
    margin-bottom: 0.75rem;
    border-bottom: var(--global-thin-border);
}
#colum_right h4.h4-2 {
    border-bottom: var(--global-secondary-border);
    margin-bottom: 1rem;
    padding: 0 0 3px;
}
#colum_right h4.h4-2 span {
    color: var(--brand-primary-c);
    background-color: var(--global-secondary-c);
    padding: 4px 10px;  
}
@media screen and (max-width: 575.98px) {
    #colum_right h4 {
        font-size: var(--typo-lead-fs);
    }
}

/* ランキング */
.rank {
    font-size: var(--typo-secondary-fs);	
	text-align: center;
	padding-top: 2px;
	margin-bottom: 3px;
}
.rank .no1 {
	font-weight: bold;	
	background-color: var(--global-notice-c);
    border-radius: 3px;	
	padding: 1px 7px;
}
.rank .no2 {
	font-weight: bold;	
	background: #daf2ff;
    border-radius: 3px;	
	padding: 1px 7px;
}
.rank .no3 {
	font-weight: bold;	
	background: #ffebdf;
    border-radius: 3px;	
	padding: 1px 7px;
}
.rank .no4 {
	font-weight: bold;	    
	background: #f1f1f1;
    border-radius: 3px;	
	padding: 1px 7px;
}
.rank .no11 {	    
	background: var(--global-main-bg);
	padding: 1px 7px;
}
@media screen and (max-width: 575.98px) {
    .rank {
        font-size: var(--typo-main-fs);	
        padding-top: 0px;
        margin-bottom: 0px;
    }
}

/* 年齢認証 */
#age_authentication {
	padding: 10px;
	border: var(--global-alert-border);
    border-radius: var(--global-main-br);
}
#age_authentication h3 {
    font-size: 1.4em;
    border-bottom: var(--global-alert-border);
}
#age_authentication .btn {
    border-radius: var(--global-main-br);    
}
#age_authentication button#age_agree {
	border: 1px solid var(--brand-alert-c);
	background-color: #ffeff6;
	font-weight: bold;
}
#age_authentication button#age_agree:hover {
	color: #fff;
	background-color: var(--brand-alert-c);  
}
@media screen and (max-width: 575.98px) {
    #age_authentication .btn {
        display: block;
        width: 100%;
        margin: 1rem auto;
    }
}

/* フォーム */
.form-label {
    margin-bottom: 0;
}
.form_dashed {
    border: var(--global-thin-border);
}
.form-control.is-invalid {
    border-color: var(--brand-alert-c);
}
.invalid-feedback {
    color: var(--brand-alert-c);
}
.form-text {
    margin-top: 0;
    margin-bottom: .25rem;
}
.form-check-input:checked {
    background-color: var(--brand-link-c);
    border-color: var(--brand-link-c);
}
.to-next {
    width: 50%;
    display: block;
    margin: 0 auto;
}
.form-check-input.is-invalid~.form-check-label, 
.was-validated .form-check-input:invalid~.form-check-label {
    color: var(--typo-alert-c);
}
@media screen and (max-width: 575.98px) {
    .to-next {
        width: 100%;
    }    
}

/* パンくずリスト */
.breadcrumb {
font-size: var(--typo-ghost-fs);
margin-bottom: 0.5rem;
}
.breadcrumb-item a {
    color: var(--typo-sub-c);
}
.breadcrumb-item a:hover {
    color:var(--brand-link-c);
}

/* ページネーション */
.pagination .page-link {
    color: var(--typo-main-c);
}
.pagination .active>.page-link {
    background-color: var(--brand-link-c);
    border: 1px solid var(--brand-link-c);
    color: var(--global-main-bg);
}
@media screen and (max-width: 576px) {
    .pagination-sm {
        --bs-pagination-font-size: 1rem;
        --bs-pagination-padding-x: 0.75rem;    
    }
}

/* 商品サムネ一覧表示 */
.nailthumb-container a {
    background-size: cover;
    display: block;
}
.nailthumb {
    border: var(--global-bs-main-border);
    text-align: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    background-color: var(--global-bs-main-bg);
    height: 130px;
    width: auto;
}
.nailthumb img {
    max-width: 100%;
    object-fit: contain;
}
.nailthumb-container a:hover .nailthumb {
    border: var(--global-link-border);  
}
.nailthumb-container a:hover h5 {
    color: var(--brand-link-c);
}
.nailthumb-container h5 {
    font-size: var(--typo-secondary-fs);
    color: var(--brand-primary-c);
    margin-top: .2rem;    
    margin-bottom: .2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;    
    overflow: hidden; 
    /* 改行のルール */
    word-break: break-all;    
    /* 高さの制御 */
    line-height: 1.3;        
    height: 2.6em; 
}
.nailthumb-container .row .col-2,
.nailthumb-container .row .col-10 {
    padding: 0;
}
.nailthumb-container .seller_name {
    font-size: var(--typo-ghost-fs);
    color: var(--global-sub-c);
    margin-bottom: .2rem;
    text-align: center;
}
.nailthumb-container .price {
    font-size: var(--typo-secondary-fs);
    font-weight: bold;    
    color: var(--brand-primary-c);
    margin-bottom: .5rem;
    text-align: center;  
}
.nailthumb-container .price_sale {  
    font-size: var(--typo-secondary-fs);
    font-weight: bold;
    color: var(--brand-alert-c); 
    margin-bottom: .5rem;
    text-align: center;
}
.nailthumb-container .price_sale span {
    background-color: var(--brand-alert-c);
    color: #fff;
    padding:0 3px;
    border-radius: 3px;
    margin-right: 3px;
    vertical-align: middle;
    font-size: 0.7rem;
}
.more_preview {
    text-align: right;
}
@media screen and (max-width: 767.98px) {
    h3 {
        font-size: var(--typo-lead-md-under-fs);
    }
    .nailthumb {
        height: 260px;
        background: var(--global-thick-bg);
        border: none;
    }
    .nailthumb-container {
        margin-bottom: 15px;
    }
    .nailthumb-container h5 {
        font-size: var(--typo-sub-fs);
        margin-top: .4rem;    
        margin-bottom: .4rem;
    }
    .nailthumb-container .seller_name {
        font-size: var(--typo-secondary-fs);
        text-align: right;     
    }
    .nailthumb-container .price,
    .nailthumb-container .price_sale {
        font-size: var(--typo-sub-fs);
        text-align: right;
    }
    .more_preview {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    .more_preview a {
        display: block;
		width: 60%;
        margin: 0 auto;
        padding: .65rem;
        font-weight: var(--btn-main-fw);
        background-color: var(--brand-primary-c);
        border: var(--global-main-border);
        border-radius: var(--global-main-br);
        color: #fff;            
    }
}
@media screen and (max-width: 575.98px) {
    .nailthumb-container {
        padding: 0;
        background: var(--global-main-bg);       
        margin-bottom: 1.5rem; 
    }       
    .nailthumb-container a:hover .nailthumb {
        border: none;
    }
    .nailthumb-container h5 {
        font-weight: bold;
    }    
    .nailthumb-container h5,
    .nailthumb-container .seller_name,
    .nailthumb-container .price,
    .nailthumb-container .price_sale {
        padding: 0 1.25rem;
    }
    .nailthumb-container h5,    
    .nailthumb-container .price,
    .nailthumb-container .price_sale {
        font-size: 1em;
    }
    .more_preview a {
		width: 80%;
    }
}