@charset "UTF-8";
/* =======================================================
   common.css
   サイト全体の共通カスタマイズ・上書き用CSS
   （デフォルトのシステムCSSをここで上書きしています）
======================================================= */

/* -------------------------------------------
   1. サイト全体のベース設定（リンク色など）
------------------------------------------- */
/* リンクテキストの色（親要素を引き継ぐ） */
a, a .item_name, a img {
  color: inherit;
}

/* リンクホバー時のテキスト色（自然な薄さに）アニメーション */
a:hover, a:hover .item_name, a:hover img{
opacity: 0.8;
transition: opacity 0.3s ease;
}

/* リンクホバー時戻す時のアニメーション */
a img{
transition: opacity 0.5s ease;

}

/* ボディーボトムの背景色・線を無効化 */
.pane_body .pane_body_bottom {
  background: transparent;
  border-top: none;
}

/* 入力フォーム群の下余白 
input[type=text], input[type=password], input[type=email], input[type=url], input[type=search], input[type=tel], input[type=number], input[type=date], input[type=datetime], input[type=datetime-local], input[type=month], input[type=week], input[type=time], input[type=color], select, textarea {
  margin-bottom: 10px;
}*/


/* -------------------------------------------
   2. ヘッダー・検索・ナビゲーション周り
------------------------------------------- */
/* ヘッダーメニューバー全体の背景と文字色 */
.pane_head_menu_bar_bg {
  color: #333;
  background: transparent;
}

/* アニメーション速度調整 */
.pane_head_menu_bar {
  transition: opacity 0.2s ease;
}

/* ロゴの余白設定 */
.logo {
  
}
@media screen and (max-width: 700px) {
  .logo {
    margin: 0;
  }
}

.header-tagline {
    font-size: 11px;
    font-weight: normal;
    text-align: center;
    margin-block-end: -4px;
}



/* 検索エリアの配置調整 */
.pane_head_menu_bar .tag_item_search {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .pane_head_menu_bar .tag_item_search {
    margin-right: 50px;
  }
}

/* トップメニュー（プルダウン）第1階層の区切り線とホバー */
.top_menu_pulldown > li {
  color: #111;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
}
.top_menu_pulldown > li:first-of-type {
  border-left: 1px solid #ddd !important;
}
.top_menu_pulldown:not(.popup_show) > li > a:hover, 
.top_menu_pulldown:not(.popup_show) > li > a:active, 
.top_menu_pulldown:not(.popup_show) > li.category_menu_selected > a {
  background: rgba(0, 0, 0, 0.03);
}

/* プルダウンメニュー 2階層目以降（ポップアップ） */
.fn_cate_accordion_popup ul, 
.top_menu_pulldown ul {
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* -------------------------------------------
   3. フッター周り（独自カスタマイズ）
------------------------------------------- */
.pane_foot {
  padding: 20px 0;
  background: transparent;
}
.pane_foot_mid {
  margin-bottom: 5px;
}

.foot_menu li a, .pane_foot_bottom {
  color: #333;
}

.pane_foot_bottom{
font-size:12px;
}

.foot_menu li:not(:last-child):after {
 color:#333;
}

.foot_menu li a:hover {
  opacity: 0.8;
}

.footer-logo a:hover img {
  opacity: 0.8;
transition: opacity 0.3s ease;
}

/* フッター独自カスタマイズ（2026年〜） */
.custom-footer { width: 100%; background-color: #fff; box-sizing: border-box; }
.footer-main { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-bottom: 24px; }
.footer-inner { display: flex; align-items: stretch; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding: 60px 20px; }
.footer-left { display: flex; align-items: center; gap: 40px; flex: 1; padding-right: 48px; }
.footer-logo { flex-shrink: 0; }
.footer-logo img { width: 100%; max-width: 260px; height: auto; display: block; }
.footer-description p { font-size: 14px; line-height: 1.8; margin: 0; color: #333; margin-bottom: 5px; }
.footer-description p span {font-weight:bold;}

.footer-about__link {
    color: #ee8ea8;
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
    padding: 5px 34px 5px 0;
    position: relative;
}
.footer-about__link::after {
    content: "";
    position: absolute;
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #ee8ea8;
    border-bottom: 2px solid #ea93ab;
    right: 10px;
    top: 12px;
    transform: rotate(-45deg);
    transition: right 0.2s ease;
}
.footer-about__link:hover {
    color:#ee8ea8;
    text-decoration:none;
}
.footer-about__link:hover:after {
    right:6px;
}


.footer-right { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-left: 48px; border-left: 1px solid #ddd; flex-shrink: 0; }
.sns-caption { font-size: 14px; line-height: 1.6; margin: 0; font-weight: bold; color: #333; }
.sns-links { display: flex; align-items: center; gap: 16px; }
.sns-links img { width: 36px; height: auto; transition: opacity 0.3s ease; }
.sns-links a:hover img { opacity: 0.7; }
@media (max-width: 850px) {
  .footer-inner { flex-direction: column; align-items: center; padding: 40px 0; gap: 40px; }
  .footer-left { flex-direction: column; text-align: center; padding-right: 0; gap: 32px; }
  .footer-right { width: 100%; align-items: center; text-align: center; padding-left: 0; border-left: none; border-top: 1px solid #ddd; padding-top: 40px; }
  .sns-links { justify-content: center; }
  .footer-main { margin-bottom: 20px; }
}

/* SNSアイコンの基本設定 */
.sns-links img {
  width: 36px;
  height: auto;
  opacity: 0.8; /* 通常時は50%の薄さ（透過）にしておく */
  transition: all 0.3s ease; /* 拡大と不透明度の変化を滑らかに */
}

/* マウスホバー時の動き */
.sns-links a:hover img {
  transform: scale(1.1); /* 1.1倍に少し大きくする */
  opacity: 1;           /* 濃度100%（不透明）にしてくっきり見せる */
}


@media screen and (max-width: 550px) {
.footer_position_center ul.foot_menu {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    gap: 5px 4%;
    width: 90%;
    margin: auto;
 }
.footer_position_center ul.foot_menu li {
    width: 48%;
 }
.foot_menu li:not(:last-child):after {
    display:none;
}


}

/* -------------------------------------------
   4. パーツ・バナー等の独自レイアウト
------------------------------------------- */

/* トップへ戻るボタン */
.page_top_link {
    background:#ed8ea8;

  }

/* トップへ戻るボタンのスマホ対応調整 */
@media screen and (max-width: 700px) {
  .page_top_link {
    width: 50px;
    height: 50px;
    -webkit-transform: translate(0, 50px);
    transform: translate(0, 50px);
    bottom: 10px;
  }
  .page_top_link:before {
    width: 10px;
    height: 10px;
    margin: 3px auto 0;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
}

/* バナー用テーブル（clImgTable）のレスポンシブ最適化 */
.clImgTable { width: 100% !important; table-layout: fixed !important; max-width: 1080px !important; margin: 0 auto !important; border-collapse: collapse !important; }
.clImgTable td { padding: 5px !important; vertical-align: top !important; }
.clImgTable img { width: 100% !important; height: auto !important; max-width: 100% !important; border-radius: 3px; }
@media screen and (max-width: 700px) {
  .clImgTable, .clImgTable tbody { display: block !important; width: 100% !important; }
  .clImgTable tr { display: flex !important; flex-wrap: wrap !important; width: 100% !important; }
  .clImgTable td { display: block !important; width: 50% !important; box-sizing: border-box !important; }
}


/* -------------------------------------------
   5. 共通ボタンコンポーネント
------------------------------------------- */
/* 主要アクションボタン（会員登録など） */
.btn-wrap {
  text-align: center;
margin-top:30px;
}

/* ---- ボタンデザイン1 ---- */
.btn-primary1 {
  display: inline-block;
background: #333333;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  padding: 16px 84px;
max-width:350px;
width:100%;
  border-radius: 50px;
  border: solid 1px #ffffff;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background-color 0.3s ease;
  text-decoration: none;
  position: relative;
}

.btn-primary1:hover {
  background-color: #ffffff;
  color: #333333;
  border: solid 1px #333333;
  text-decoration: none;
}

.btn-primary1::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.3s ease;
}

.btn-primary1:hover::after {
  right: 18px;
  border-top: 2px solid #333333;
  border-right: 2px solid #333333;
}



.common_ok_btn, input.common_ok_btn, .common_opt_btn, input.common_opt_btn{
  background-color: #ffffff;
  color: #333333;
  border: solid 1px #333333;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  padding: 16px 84px;
  max-width:350px;
  /*width:100%;*/
  border-radius: 50px;
  border: solid 1px #333333;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background-color 0.3s ease;
  text-decoration: none;
  position: relative;
}


/* ---------------------------------------------------
   1. ボタン本体への上書き（位置の基準を作る）
--------------------------------------------------- */
.common_ok_btn, input.common_ok_btn, .common_opt_btn, input.common_opt_btn {
  position: relative; /* 【最重要】矢印をボタンの中に閉じ込める基準点 */
  overflow: visible;  /* 万が一矢印がはみ出しても隠さないようにする */
}

/* ---------------------------------------------------
   2. 矢印（::after）の設定（.common_ok_btn などのクラス専用）
--------------------------------------------------- */
.common_ok_btn::after, .common_opt_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #333333;
  border-right: 2px solid #333333;
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.3s ease;
  
  /* システムの既存設定に負けないように記述 */
  display: block; 
  pointer-events: none; /* 矢印の上をクリックしてもボタンが反応するようにする */
}

/* ---------------------------------------------------
   3. 【重要】inputタグだった場合の対策
   （inputには::afterが効かないため、背景画像として矢印を入れ込みます）
--------------------------------------------------- */
input.common_ok_btn, input.common_opt_btn {
  /* 【左右均等に修正】左も右も45pxにして、テキストを中央（センター）に戻します */
  padding-left: 45px !important;
  padding-right: 45px !important; 
  
  /* クッキリ版の矢印SVG */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path d='M5,3 L10,8 L5,13' stroke='%23333333' stroke-width='2' fill='none' stroke-linecap='square' stroke-linejoin='miter'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 22px) center !important; 
  background-size: 10px 10px !important; 
  
  transition: background-position 0.3s ease !important;
}

/* inputボタンのホバー時に矢印をちょっと右に動かす */
input.common_ok_btn:hover, input.common_opt_btn:hover {
  background-position: calc(100% - 16px) center !important; 
}



/* ---- ボタンデザイン2 ---- */
.btn-primary2 {
  display: inline-block;
 background: #ed8ea8;
background: #555;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  padding: 16px 84px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background-color 0.3s ease;
  text-decoration: none;
  position: relative;
}
.btn-primary2:hover {
  background-color: #f2b5c9;
  color: #ffffff;
  text-decoration: none;
}
.btn-primary2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.3s ease;
}
.btn-primary1:hover::after {
  right: 18px;
}

/* =======================================================
   汎用レイアウト・コンポーネント
   （全ページで使い回す枠組み・見出し・ボタン）
======================================================= */

/* --- 汎用コンテナ（幅の中央揃え） --- */
.l-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
  font-size: 16px;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", sans-serif;
  line-height: 1.8;
  color: #111111;
}

/* --- 汎用セクション余白 --- */
.section { padding: 40px 0; }

@media (max-width: 960px) {
  .l-container { padding: 0 32px; }
  .section { padding: 30px 0; }
}
@media (max-width: 768px) {
  .l-container { padding: 0 24px; }
  .section { padding: 20px 0; }
}
@media (max-width: 428px) {
  .l-container { padding: 0 16px; }
}

/* --- 汎用 h2 見出し --- */
.heading-h2 {
    font-size: clamp(24px, calc(21px + 0.75vw), 30px);
    color: #333;
}

/* --- 汎用 h3 見出し --- */
.heading-h3 {
  font-size: 24px;
  font-weight: 400;
  color: #111111;
  margin-bottom: 32px;
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  width: 100%;
}
.heading-h3::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #e8edee;
}
.heading-h3::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 270px; height: 2px; background: #f2b5c9; z-index: 1;
}

@media (max-width: 960px) {
  .heading-h3 { font-size: 26px; }
  .heading-h3::before { width: min(270px, 60%); }
}
@media (max-width: 768px) { .heading-h3 { font-size: 22px; } }
@media (max-width: 428px) {
  .heading-h3 { font-size: 20px; }
  .heading-h3::before { width: 180px; }
}

/* -------------------------------------------
   SSLシール
------------------------------------------- */
.ssl_seal_box{
    text-align: right;
    margin-right: 10px;
}

/* -------------------------------------------
   テキストカラー
------------------------------------------- */

.c-pink{
color:#ed8ea8;
}


/* -------------------------------------------
   TOP お知らせ一覧
------------------------------------------- */

.top-news__area {
    max-width: 680px;
    margin: 0 auto;
    color: #555;
}
.top-news__heading h2 {
    font-size: 20px;
}
.top-news__list {
    padding-inline-start: 0;
    border-bottom: 1px solid #eee;
}
.top-news__item {
    border-top: 1px solid #eee;
}

.top-news__item a {
    display: block;
    padding: 15px 5px;
    text-decoration: none;
    color: #555;
}
.top-news__item a span {
    font-size: 13px;
    color: #999;
    margin-right: 15px;
}

/* -------------------------------------------
   NEWS お知らせ一覧
------------------------------------------- */

.news {
    max-width: 800px;
}
.news__body {
    font-size: 15px;
}
.news__body a {
    color: #ee8ea8;
    text-decoration: underline;
}
.news__item {
    margin-bottom: 60px;
}

.news__header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 20px;
}
.news__date {
    width: 100px;
    color: #777777;
    font-size: 14px;
    font-weight: bold;
}
.news__title {
    font-size: 16px;
    color: #333333;
    width: calc(100% - 130px);
}
.news__body .bold {
font-weight: bold;
}
.news__body .red {
    color: #d30500;
}
.news__body .pink {
    color: #ee8ea8;
}
.news__body .blue {
    color: #1bc8d6;
}
.news__body img {
margin-bottom: 20px;
}





@media (max-width: 768px) {
.news__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.news__date {
    width: 100%;
    font-size: 12px;
}
.news__title {
    width: 100%;
    margin-block: 0;
    padding-bottom: 7px;
}
.news__body {
    font-size: 14px;
}




}