/* ====================================
PC/SP切り替え (モバイルファースト)
==================================== */
/* デフォルト（SPサイズ：768px以下）の設定 */
/* PC専用要素は、すべてのサイズで初期状態で非表示にする */
.pc-only {
display: none;
}
/* SP（768px以下）でのみ適用したい具体的なスタイル */
@media screen and (max-width: 768px) {
/* header-top-inner の背景色をSPでのみ黄色にする */
.header-top-inner {
margin-top: 1rem;
background: #FECD00;
}
}
/* 769px以上のとき (PCサイズ) */
/* min-width (最小幅) を指定し、モバイルのスタイルを上書きします */
@media screen and (min-width: 769px) {
/* PC専用要素を表示 */
.pc-only {
/* 要素に応じて block, inline-block, flex など、適切な display を指定してください。*/
display: block;
}
/* SP専用要素を非表示 */
.sp-only {
display: none;
}
/* PCで適用したいスタイルを記述します */
/* header-top-inner の背景色をPCでは解除・変更する */
.header-top-inner {
background: none; /* または #fff など、PC用の背景色 */
}
}
/* ====================================
パンくずリスト
==================================== */
.breadcrumb {
padding: 0;
margin: 0 0 15px 15px; /* タイトルとの間に少し余白を設ける */
list-style: none;
font-size: 11px;
text-align: left;
}
.breadcrumb li {
display: inline; /* 横並びにする */
color: #555;
}
.breadcrumb li:not(:last-child)::after {
content: '>'; /* 区切り文字 */
margin: 0 0.5em; /* 区切り文字の左右に余白 */
}
.breadcrumb li a {
color: #EB6100;
text-decoration: none;
}
.breadcrumb li a:hover {
text-decoration: underline;
}
/* ====================================
ページトップボタン・CTAボタンの配置
==================================== */
.fixed_btn, .pt_btn {
display: block;
border: none;
position: fixed;
right: 10px;
padding: 0;
z-index: 9999;
}
/* SP用のボタンサイズを指定
（PCとSPでサイズが違う場合、SPのサイズをこちらに書きます）
*/
.fixed_btn {
bottom: 10px;
width: 44px; /* SP用の幅 */
height: 44px; /* SP用の高さ */
}
.pt_btn {
bottom: 70px;
width: 44px; /* SP用の幅 */
height: 44px; /* SP用の高さ */
}
/* imgタグが タグのサイズに収まるように設定
(画像がはみ出す場合に備えて)
*/
.fixed_btn img, .pt_btn img {
width: 100%;
height: auto;
vertical-align: top; /* 隙間防止 */
}
/* ====================================
ハンバーガーメニュー (モバイル優先)
==================================== */
/* ハンバーガーアイコンのコンテナ */
.hamburger {
width: 44px;
height: 44px;
background-color: #7E7E7E;
border-radius: 8px;
position: fixed;
top: 26px;
right: 20px;
z-index: 20;
cursor: pointer;
border: none; /* button要素なのでborderを消しておく */
}
/* ハンバーガーの線 */
.hamburger span {
background-color: #fff;
width: 26px;
height: 2px;
display: inline-block;
position: absolute;
left: 9px;
border-radius: 1px;
transition: all .4s;
}
.hamburger span:nth-of-type(1) {
top: 12px;
}
.hamburger span:nth-of-type(2) {
top: 21px;
}
.hamburger span:nth-of-type(3) {
top: 30px;
}
/* ハンバーガーアイコンが active の時の変形 (×印へ) */
.hamburger.active span:nth-of-type(1) {
top: 21px; /* 以前の22pxから21pxに修正。中央の線と同じ位置へ */
transform: rotate(-45deg);
}
.hamburger.active span:nth-of-type(2) {
opacity: 0;
}
.hamburger.active span:nth-of-type(3) {
top: 21px; /* 以前の22pxから21pxに修正。中央の線と同じ位置へ */
transform: rotate(45deg);
}
/*2026.01追記分 */
/* ナビゲーション全体の基本形 */
.navi ul.menu {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid #ddd;
}
.navi ul.menu li {
border-bottom: 1px solid #ddd;
background: #fff;
position: relative;
}
/* 通常のリンク：右側に「＞」を表示 */
.navi ul.menu li a {
display: block;
padding: 15px 20px;
text-decoration: none;
color: #333;
position: relative;
}
/* 通常リンクの右矢印（＞） */
.navi ul.menu li:not(.has-child) a::after {
content: "";
position: absolute;
right: 20px;
top: 50%;
width: 8px;
height: 8px;
border-top: 2px solid #333;
border-right: 2px solid #333;
transform: translateY(-50%) rotate(45deg);
}
/* サブメニューがある行のレイアウト */
.menu-item-row {
display: flex;
align-items: stretch; /* 高さを揃える */
}
.main-link {
flex-grow: 1;
}
/* 区切り線のある開閉ボタン */
.submenu-toggle {
width: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5; /* 画像のような薄いグレー */
border-left: 1px solid #ddd;
cursor: pointer;
}
/* 下向き矢印（∨）のデザイン */
.arrow-icon {
width: 10px;
height: 10px;
border-bottom: 2px solid #333;
border-right: 2px solid #333;
transform: translateY(-25%) rotate(45deg);
transition: transform 0.3s;
}
/* アクティブ時（開いた時）の矢印の回転：上向きにする */
.submenu-toggle.is-active .arrow-icon {
transform: translateY(25%) rotate(-135deg);
}
/* サブメニュー：画像では一段深く、背景を少し変える */
.sub-menu {
display: none;
list-style: none;
background-color: #fcfcfc;
padding: 0;
}
.sub-menu.is-active {
display: block;
}
.sub-menu li a {
padding-left: 40px !important; /* インデントを深く */
font-size: 0.95em;
}
/* ====================================
ナビゲーションメニュー本体
==================================== */
/* ナビゲーションメニュー本体の初期状態（非表示） */
.navi {
width: 100%;
/* 修正: 画面全体の高さから、トップバー（100px）を引いた高さを設定 */
height: calc(100vh - 100px);
background-color: #fff;
position: fixed;
top: 116px; /* トップバーの下からメニューを開始 */
z-index: 10;
opacity: 0;
visibility: hidden;
transition: opacity .4s, visibility .4s;
/* 修正: メニュー内容が高さ（calc()）を超えた場合、縦スクロールを有効にする */
overflow-y: auto;
text-indent: 0.5rem;
}
.navi.active {
opacity: 1;
visibility: visible;
}
/* ====================================
メニューリストの共通スタイル
==================================== */
/* aタグの共通設定 */
a {
color: #333;
text-decoration: none;
list-style: none;
}
/* リストアイテムの共通設定：borderとmarginのみ残し、paddingはaタグへ移動 */
.navi .menu li {
width: 100%;
list-style-type: none;
margin-bottom: 0; /* paddingをaタグに移すため、liのマージンは一旦ゼロに */
border-bottom: 1px #ccc solid;
padding: 0; /* liのパディングは削除 */
}
/* ulタグのデフォルトスタイルをリセット */
.navi ul.menu {
padding: 0;
margin: 0;
}
/* ====================================
メニュー項目のアイコン表示 (矢印/プラス)
==================================== */
/* リンク要素にFlexboxを適用し、テキストとアイコンを左右に配置 */
.navi ul.menu li a{
display: flex;
justify-content: space-between; /* テキストを左、アイコンを右に配置 */
align-items: center;
/* 以前liに指定されていたパディングをaタグに移動 */
padding: 10px 20px;
position: relative;
}
/* 矢印（>）をデフォルトで表示 */
.navi ul.menu li a::after {
content: '>';
font-size: 1rem;
color: #333;
font-weight: bold;
margin-left: 10px;
}
/* ------------------------------------
【特定の項目をプラス（+）にする例】
------------------------------------ */
/* * 画像から判断して、サブメニューを持ちそうな項目に '+' を適用します。
* HTMLのリストの順番が変わると適用先も変わるため、可能であれば
* HTMLの li 要素に class="has-submenu" を付与し、CSSで .has-submenu a::after を指定することを推奨します。
*/
/* 例: 4番目の「ご利用ガイド」が + の場合 */
.navi ul.menu li:nth-child(4) a::after {
content: '+';
font-size: 1rem;
}
/* ====================================
サブメニュー設定
==================================== */
/* 初期状態：非表示（height: 0 と opacity: 0 でアニメーションを可能にする） */
.sub-menu {
height: 0;
overflow: hidden;
opacity: 0;
/* 遷移アニメーションを追加 */
transition: height 0.3s ease-out, opacity 0.3s ease-out;
padding: 0;
margin: 0;
background-color: #fff; /* サブメニューの背景色を変えて見やすくする */
}
.sub-menu li{
width: 90%;
border-top: #ccc 1px dotted;
}
/* サブメニューが開いた状態 */
.sub-menu.is-active {
height:auto;
opacity: 1;
}
/* サブメニューの項目スタイル */
.sub-menu li a {
/* 親メニューより少しインデントさせる */
padding-left: 40px !important;
font-size: 1rem;
color: #333;
}
/* サブメニューの項目には矢印アイコンを表示しない */
.sub-menu li a::after {
content: none !important;
}
/* ------------------------------------
【特定の項目をプラス（+）にする例】
------------------------------------ */
/* ご利用ガイドの タグに is-active が付いた時の '+' の変形 */
.has-submenu a.is-active::after {
content: '—'; /* '+' の代わりに '—' を表示するか、 */
transform: rotate(0deg); /* または '+' の回転を元に戻す */
/* transition: transform 0.3s; を使えば回転アニメーションも可能です */
}
/* 既に CSS で li:nth-child(4) に '+' が設定されているため、
JSで active クラスを付けて content を変更する処理が最も簡単です。 */
/* 開いた状態の '+' を '-' に見せるためのCSS（JSと連携） */
.navi ul.menu li:nth-child(4) a.is-active::after {
content: '—'; /* または 'v' のような下向きの記号 */
}
/* ====================================
ヘッダー
==================================== */
header {
background:#fff;
}
header #logo{
padding: 1rem 0 0.8rem 1rem;
}
.heading-group{
background: #fff;
padding-top: 1rem;
}
#logo {
width:50%; /* ロゴエリア */
margin: 0;
}
/* ====================================
メインコンテンツ
==================================== */
#head{
width: 100%;
margin: 0 auto 1rem;
background-color: #fff;
}
.head-text{
text-align: center;
font-family: "新ゴ B";
color: #E47A20;
font-size: 1.1rem;
padding: 0.6rem 0 0.2rem 0;
line-height: 140%;
}
.head-area{
font-size: 0.9rem;
text-align: center;
padding-bottom: 0.6rem;
}
.heading-group{
line-height: 1.4;
margin: 0;
padding: 0;
}
#tel{
margin: 0 auto;
/* 固定幅 300px ではなく、最大幅 300px に変更 */
max-width: 300px;
width: 90%; /* 画面幅が300px未満でも、90%で収まるようにする */
padding-bottom: 5px;
}
#tel img {
display: block;
width: 100%;
height: auto;
}
.opening-hours{
margin: 0;
font-size:0.8rem;
text-align: center;
padding-bottom: 15px;
border-bottom: #FECD00 solid 6px;
}
/* レイアウト
------------------------------------------------ */
#contents{
margin-bottom:2rem;
}
/* ====================================
ｈタグ
==================================== */
h1.title{
width: 98%;
text-align: left;
text-indent:2rem;
background: #eee;
padding:0.6rem 0 0.6rem 0;
color: #444;
font-size: 1rem;
border: 1px solid #ddd;
font-weight: normal;
margin:0 auto 1rem;
}
h2.title2{
font-size: 1rem;
}
h2.title{
border-top: 1px dashed #888;
border-bottom: 1px dashed #aaa;
padding: 8px 0 10px 0;
width: 90%;
margin: 1rem auto 1rem;
font-weight: bold;
font-size: 1rem;
color: #444;
text-align: center;
}
h2.access-title{
border: 1px solid #ccc;
padding: 0.2rem 0 0.2rem 0;
width: 90%;
font-size: 1rem;
color: #444;
text-align: center;
margin: 0 auto 1rem;
font-weight: normal;
}
h3.map-title{
width: 100%;
font-size: 1rem;
color: #fff;
text-align: center;
padding: 0.2rem 1rem 0.2rem 1rem;
margin: 1rem auto 1rem;
font-weight: normal;
background: #aaa;
}
h4{
font-size: 1rem;
color: #888;
text-align: center;
padding: 0.3rem 1rem 0.2rem 1rem;
margin: 1rem auto 0.5rem;
font-weight: normal;
width: 90%;
}
h2.faq-title{
width: 90%;
font-weight:bold;
font-size:1rem;
color: #003B83;
margin: 1rem auto 1rem;
}
/* ====================================
カテゴリー
==================================== */
.category{
width: 96%;
display: flex;
flex-wrap: wrap;
margin: 1rem auto 1rem;
justify-content: space-between;
}
.category li {
width: 49%;
margin-bottom: 10px;
}
/* ====================================
CTA
==================================== */
.cta-area{
width: 90%;
margin: 2rem auto;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
}
.form-list a{
width: 100%;
background-color: #E47A20;
padding: 1rem 2rem 1rem 2rem;
display: block;
color: #fff;
border-radius: 0.5rem;
text-align: center;
font-size:0.9rem;
margin: 0 auto ;
}
.contact a{
width: 100%;
background-color: #888;
padding: 1rem 2rem 1rem 2rem;
display: block;
color: #fff;
border-radius:0.5rem;
text-align: center;
font-size:0.9rem;
margin: 0 auto ;
}
.cta-tel{
text-align: center;
margin:0 auto;
}
.cta-free{
color: #24499E;
font-size: 1.2rem;
text-align: center;
margin:0 auto;
}
.cta-hours{
text-align: center;
}
/* ====================================
各種ボタン
==================================== */
.c-button a{
width: 80%;
background:#fff;
color: #24499E;
border: 3px solid #24499E;
padding: 0.4rem 0 0.4rem 0;
display: block;
text-align: center;
margin: 1rem auto 2rem;
border-radius: 1.5rem;
}
.c-button a:hover{
background:#24499E;
color: #fff;
}
.c-button a:active {
opacity: 1; /* 透明度を1（完全に不透明）に戻す */
transform: none; /* 変形（拡大縮小など）を「なし」にする */
}
/* ====================================
SNS
==================================== */
/* SNSエリア全体：横並びと中央寄せを確実に適用 */
#sns_area {
display: flex !important; /* 強制的に横並びにする */
justify-content: center; /* 横方向の中央寄せ */
align-items: center; /* 縦方向の中央寄せ */
flex-wrap: nowrap; /* 折り返しさせない */
margin: 20px auto; /* 上下の余白 */
gap: 15px; /* アイコン同士の間隔（これだけで余白が作れます） */
width: 100%; /* 親要素いっぱいに広げる */
}
/* 各アイコン画像：サイズを固定して表示を安定させる */
#sns_area .sns-item img {
width: 45px; /* スマホで見やすいサイズに調整 */
height: auto;
display: block;
}
/* ホバー時の挙動 */
.hvr-shrink:hover {
transform: scale(0.9);
}
/* ====================================
フッター
==================================== */
footer {
background-color: #FFCC00; /* イエロー */
color: #000; /* 文字色 */
padding: 20px 0;
font-size: 0.9rem;
text-align: center;
}
.footer-inner {
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: column; /* PCでも縦並びで中央寄せ */
align-items: center;
gap: 10px; /* ロゴと情報の間の隙間 */
}
.footer-logo img {
width: 200px; /* 適宜調整 */
height: auto;
}
.footer-info p {
margin: 2px 0;
}
/* ====================================
オリジナルノベルティグッズ製作のメリット
==================================== */
.more-info{
width: 100%;
margin: 3rem auto 2rem;
}
.more-title{
font-family: "TBUDゴシック E";
background:#002F71;
padding: 10px 0 10px 0;
width:100%;
margin:0 auto;
color: #fff;
font-size: 0.9rem;
text-indent: 12px;
padding: 0.5rem;
}
.more-text{
text-align: left;
width: 96%;
padding: 1rem;
margin:0.5rem auto 0.5rem;
font-size: 14px;
letter-spacing: 1px;
}
/* アコーディオンの全体を制御する部分 */
.morebox {
width: 100%;
text-align: left;
color: #333333;
text-indent: 16px;
letter-spacing: 1px;
margin: 0 auto 10px;
}
/* 質問文部分のデザインと動作設定 */
.morebox label {
display: block;
padding: 1rem 40px 1rem 10px;
color: #333333;
background: #E9E9E9;
cursor: pointer;
transition: all 0.5s;
font-size: 14px;
letter-spacing: 1px;
position: relative;
}
.morebox label:hover {
background: #888;
color: #fff;
}
/* チェックボックスを非表示にする設定 */
.morebox input {
display: none;
}
/* 回答部分のデザインと非表示設定 */
.morebox .moreshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
line-height: 160%;
font-size: 14px;
letter-spacing: 1px;
}
/* ★修正: 回答（moreshow）を表示するセレクタ */
.cssacc:checked + label + .moreshow {
height: auto;
padding: 1rem 10px;
opacity: 1;
background: #fff;
}
/* 質問部分の右端に「＋」アイコンを追加 */
.morebox label::after {
content: '+';
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 1.2em;
font-weight: bold;
transition: transform 0.3s ease-in-out;
}
/* 回答表示時にアイコンを「−」に切り替え */
.morebox input:checked + label::after {
content: '－';
font-size: 1.2em;
}
/* ====================================
content-box
==================================== */
.content-box{
width: 96%;
margin: 0 auto 1rem;
}
.content-box2{
max-width: 98%;
margin: 0 auto;
}
/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
.footer-logo img {
width: 150px;
}
footer {
padding: 15px 0;
font-size: 0.8rem;
}
}
/* ====================================
PCサイト向けスタイル (769px以上)
==================================== */
@media (min-width: 769px) {
/* コンテンツの最大幅を設定 */
header{
width: 100%;
}
.lead-wrap{
width: 100%;
margin: 0 auto;
background: #FAF4DE;
}
.content-box{
max-width:1000px;
margin: 0 auto;
}
.content-box2{
max-width:90%;
margin: 0 auto;
}
/* ヘッダー上部を横並びにする（ロゴ、説明文、電話番号） */
.header-top-inner {
display: flex; /* Flexboxを有効にして子要素を横並びに */
align-items: center; /* 縦方向の真ん中に揃える */
justify-content: space-between; /* 要素間に均等なスペースを空ける */
padding:0;
width: 98%;
}
/* 各要素の幅を調整 */
#logo {
width: 250px; /* ロゴエリア */
margin: 0;
}
#head {
width: 45%; /* 説明文エリア */
/* PCでは、モバイルのCSSが影響しないように調整 */
text-align: left;
margin-top: 1rem;
}
.heading-group {
width: 35%; /* 電話番号エリア */
text-align: right;
}
.opening-hours {
font-size: 0.7rem;
border-bottom: none;
}
/* モバイルのボタンは非表示 */
.hamburger, .fixed_btn, .pt_btn {
display: none;
}
.lead-text{
width: 100%;
background: #FAF4DE;
font-size:0.8rem;
font-weight: normal;
padding: 0.5rem;
margin: 0 auto;
line-height: 160%;
color: #333;
text-align:center;
letter-spacing: 2px;
}
/* ヘッダーナビ */
.header-nav{
width:32%;
display: flex;
flex-wrap: wrap;
font-size: 0.8rem;
margin: 0.5rem 0 0 auto;
}
#navi__1 a{
text-decoration: none;
width: 86px;
display: block;
color: #666666;
}
#navi__1 a:hover{
color: #222222;
font-weight: bold;
text-decoration: none;
}
#navi__2 a{
text-decoration: none;
width: 140px;
display: block;
color: #666666;
}
#navi__2 a:hover{
color: #222222;
font-weight: bold;
text-decoration: none;
}
#navi__3 a{
text-decoration: none;
width: 86px;
display: block;
color: #666666;
}
#navi__3 a:hover{
color: #222222;
font-weight: bold;
text-decoration: none;
}
/* トップメイン
------------------------------------------------ */
.topmain-wrap{
width:100%;
background:#FECD00;
margin-bottom: 1rem;
padding-bottom: 1px;
}
.topmain{
max-width: 1000px;
width: 100%;
margin: 0px auto;
padding-left: 10px;
}
.more-title{
width:100%;
font-size: 1.2rem;
}
/* レイアウト
------------------------------------------------ */
#contents{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 1rem;
}
#contents .left {
width: 22%;
margin-right: 2%; /* 20pxを2%に変更 */
}
#contents .right {
width: 76%; /* 22% + 2% + 76% = 100% */
overflow: hidden; /* ← 追加 */
min-width: 0; /* ← 追加 */
}
/* ページトップ
------------------------------------------------ */
.fixed_btn, .pt_btn {
display: block; /* HTMLをにした場合。!importantは最終手段 */
/* display: initial !important; なども試す価値があります */
}
.fixed_btn {
width: 150px; /* 例: PC用の幅 */
height:150px; /* 例: PC用の高さ */
}
.pt_btn {
width: 150px; /* 例: PC用の幅 */
height: 71px; /* 例: PC用の高さ */
bottom: 180px; /* PC用に位置を調整 */
}
/* menu
------------------------------------------------ */
.menu-cate1 a{
width: 220px;
height: 100px;
background: url("/image/menu/hard-c-btn.png")no-repeat;
margin: 10px auto 16px;
display: block;
}
.menu-cate1 a:hover{
width: 220px;
height: 100px;
background: url("/image/menu/hard-c-btn_h.png")no-repeat;
}
.menu-cate2 a{
width: 220px;
height: 100px;
background: url("/image/menu/cover-c-btn.png")no-repeat;
margin: 10px auto 16px;
display: block;
}
.menu-cate2 a:hover{
width: 220px;
height: 100px;
background: url("/image/menu/cover-c-btn_h.png")no-repeat;
}
.menu-cate3 a{
width: 220px;
height: 100px;
background: url("/image/menu/nocover-c-btn.png")no-repeat;
margin: 10px auto 16px;
display: block;
}
.menu-cate3 a:hover{
width: 220px;
height: 100px;
background: url("/image/menu/nocover-c-btn_h.png")no-repeat;
}
.menu-cate4 a{
width: 220px;
height: 100px;
background: url("/image/menu/diecut-c-btn.png")no-repeat;
margin: 10px auto 16px;
display: block;
}
.menu-cate4 a:hover{
width: 220px;
height: 100px;
background: url("/image/menu/diecut-c-btn_h.png")no-repeat;
}
.menu-cate5 a{
width: 220px;
height: 100px;
background: url("/image/menu/block-c-btn.png")no-repeat;
margin: 10px auto 16px;
display: block;
}
.menu-cate5 a:hover{
width: 220px;
height: 100px;
background: url("/image/menu/block-c-btn_h.png")no-repeat;
}
.menu-cate6 a{
width: 220px;
height: 100px;
background: url("/image/menu/other-c-btn.png")no-repeat;
margin: 10px auto 16px;
display: block;
}
.menu-cate6 a:hover{
width: 220px;
height: 100px;
background: url("/image/menu/other-c-btn_h.png")no-repeat;
}
.f_banner01 a{
background: url("../image/menu/menu_bnr01.jpg") no-repeat;
width:220px;
height: 60px;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:1rem auto 1rem;
}
.f_banner01 a:hover {
background: url("../image/menu/menu_bnr01_h.jpg") no-repeat;
}
.f_banner02 a{
background: url("../image/menu/menu_bnr02.jpg") no-repeat;
width:220px;
height: 60px;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:1rem auto 1rem;
}
.f_banner02 a:hover {
background: url("../image/menu/menu_bnr02_h.jpg") no-repeat;
}
.f_banner03 a{
background: url("../image/menu/menu_bnr03.jpg") no-repeat;
width:220px;
height: 60px;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:1rem auto 1rem;
}
.f_banner03 a:hover {
background: url("../image/menu/menu_bnr03_h.jpg") no-repeat;
}
.f_banner04 a{
background: url("../image/menu/menu_bnr04.jpg") no-repeat;
width:220px;
height: 60px;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:1rem auto 1rem;
}
.f_banner04 a:hover {
background: url("../image/menu/menu_bnr04_h.jpg") no-repeat;
}
.f_banner05 a{
background: url("../image/menu/menu_bnr05.jpg") no-repeat;
width:220px;
height: 60px;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:1rem auto 1rem;
}
.f_banner05 a:hover {
background: url("../image/menu/menu_bnr05_h.jpg") no-repeat;
}
.f_banner06 a{
background: url("../image/menu/menu_bnr06.jpg") no-repeat;
width:220px;
height: 60px;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:1rem auto 1rem;
}
.f_banner06 a:hover {
background: url("../image/menu/menu_bnr06_h.jpg") no-repeat;
}
.f_banner07 a{
background: url("../image/menu/facebook.jpg") no-repeat;
width:220px;
height: 60px;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:1rem auto 1rem;
}
.f_banner07 a:hover {
background: url("../image/menu/facebook_h.jpg") no-repeat;
}
#online_bnr a{
background: url("../image/menu/online.jpg") no-repeat;
width:220px;
height: 142px;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:1rem auto 1rem;
}
#online_bnr a:hover {
background: url("../image/menu/online_h.jpg") no-repeat;
}
#data-bnr a{
background: url("../image/menu/data-bnr.png") no-repeat;
width:220px;
height: 115px;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:1rem auto;
}
#data-bnr a:hover {
background: url("../image/menu/data-bnr_h.png") no-repeat;
}
#area-bnr a{
background: url("../image/menu/area-bnr.png") no-repeat;
width:220px;
height:390px;
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:1rem auto;
}
#area-bnr a:hover {
background: url("../image/menu/area-bnr_h.png") no-repeat;
}
#info{
text-align: left;
font-size:16px;
color:#E41A1D;
font-weight: 400;
width:500px;
margin: 0px auto 20px;
border: solid 1px #E41A1D;
padding:10px 30px 10px 40px;
line-height: 150%;
}
.cate-title{
width: 100%;
border: 1px solid #ccc;
font-size:0.8rem;
text-align: center;
padding: 0.6rem 0 0.6rem 0;
margin: 0 auto 1rem;
}
/* カテゴリー
------------------------------------------------ */
.category{
width: 94%;
display: flex;
flex-wrap: wrap;
margin: 1rem auto 1rem;
}
.category li {
width: auto;
}
.category li a {
/* 既存のコードに追記 */
transition: opacity 0.3s ease;
}
.category li.hard a{
width: 220px;
background:url("../image/menu/hard-c-btn.png")no-repeat;
display: block;
height: 100px;
}
.category li.hard a:hover{
background:url("../image/menu/hard-c-btn_h.png")no-repeat;
}
.category li.cover a{
width: 220px;
background:url("../image/menu/cover-c-btn.png")no-repeat;
display: block;
height: 100px;
}
.category li.cover a:hover{
background:url("../image/menu/cover-c-btn_h.png")no-repeat;
}
.category li.nocover a{
width: 220px;
background:url("../image/menu/nocover-c-btn.png")no-repeat;
display: block;
height: 100px;
}
.category li.nocover a:hover{
background:url("../image/menu/nocover-c-btn_h.png")no-repeat;
}
.category li.diecut a{
width: 220px;
background:url("../image/menu/diecut-c-btn.png")no-repeat;
display: block;
height: 100px;
}
.category li.diecut a:hover{
background:url("../image/menu/diecut-c-btn_h.png")no-repeat;
}
.category li.block a{
width: 220px;
background:url("../image/menu/block-c-btn.png")no-repeat;
display: block;
height: 100px;
}
.category li.block a:hover{
background:url("../image/menu/block-c-btn_h.png")no-repeat;
}
.category li.other a{
width: 220px;
background:url("../image/menu/other-c-btn.png")no-repeat;
display: block;
height: 100px;
}
.category li.other a:hover{
background:url("../image/menu/other-c-btn_h.png")no-repeat;
}
/* ====================================
タブエリア
==================================== */
.tab-2 {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
width:100%;
font-size: 1.1rem;
margin: 0 auto 2rem;
}
.tab-2 > label {
flex: 1 1;
order: -1;
opacity: .5;
padding: .6em 1em;
border-radius: 5px 5px 0 0;
background-color: #2589d0;
color: #fff;
font-size: 0.9rem;
text-align: center;
cursor: pointer;
line-height: 160%;
}
.tab-2 > label:hover {
opacity: .5;
}
.tab-2 input {
display: none;
}
.tab-2 > div {
display:none;
width: 100%;
padding-top: 1.5em;
background-color:#E7F3FB;
text-align: left;
}
.tab-2 label:has(:checked) {
opacity: 1;
}
.tab-2 label:has(:checked) + div {
display: block;
}
.tab-title{
font-family: "TBUDゴシック E";
margin-bottom: 1.1rem;
text-align: left;
font-size: 1.2rem;
font-weight: bold;
text-indent:0.5rem;
color: #333;
}
.tab-title2{
font-family: "TBUDゴシック E";
margin-bottom: 1.1rem;
text-align: left;
font-size: 1.2rem;
font-weight: bold;
text-indent:2rem;
color: #E47A20;
}
.tab-cont{
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
.tab-cont .tab-left{
width: 26%;
margin-left: 20px;
}
.tab-cont .tab-right{
width: 64%;
margin: 0 auto;
}
.tab-button a{
width: 100%;
margin:1rem auto;
display: block;
background:#2589d0;
padding:0.4rem;
border-radius: 20px;
text-align: center;
color: #fff;
text-decoration: none;
font-size:0.9rem;
}
.tab-button a:hover{
display: block;
background:#7DB8E3;
text-decoration: none;
}
.tab-right dt{
font-family: "UD新ゴ コンデンス90 M";
font-size: 1.2rem;
margin-bottom:1rem;
color: #333;
}
.tab-right dd{
font-size:0.9rem;
color: #333;
letter-spacing:1px;
line-height: 140%;
}
/* タブエリア2
------------------------------------------------ */
.tab-3 {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
width:100%;
font-size: 1.1rem;
margin: 0 auto;
}
.tab-3 > label {
flex: 1 1;
order: -1;
opacity: .5;
padding: .6em 1em;
border-radius: 5px 5px 0 0;
background-color: #013B83;
color: #fff;
font-size: 1em;
text-align: center;
cursor: pointer;
}
.tab-3 > label:hover {
opacity: .5;
}
.tab-3 input {
display: none;
}
.tab-3 > div {
display:none;
width: 100%;
padding-top: 1.5em;
background-color: #fff;
text-align: left;
background:#E7F3FB;
}
.tab-3 label:has(:checked) {
opacity: 1;
}
.tab-3 label:has(:checked) + div {
display: block;
}
.tab-title{
font-family: "TBUDゴシック E";
margin-bottom: 1.1rem;
text-align: left;
font-size: 1.4rem;
font-weight: bold;
text-indent:1.2rem;
color: #333;
}
.tab-cont2{
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
/* ====================================
CTA
==================================== */
.cta-area{
width: 82%;
margin: 2rem auto;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
}
.form-list a{
width: 300px;
border-radius: 0.5rem;
font-size: 1rem;
}
.contact a{
width: 300px;
font-size:1rem;
margin-bottom: 1rem;
border-radius: 0.5rem;
}
.cta-tel{
text-align: center;
margin:0 auto;
}
.cta-free{
font-weight: bold;
font-size: 1.4rem;
text-indent: 0.5rem;
}
/* ====================================
フッター
==================================== */
#footer_wrap{
width:100%;
margin: 0 auto;
background:#FECD00 repeat-x;
}
#foot_logo{
width: 180px;
padding:10px 10px 6px 0;
margin-left: auto;
}
#memo_logo{
width:187px;
margin-left: auto;
padding: 0 0 1rem 0;
}
#footer{
width:1000px;
margin:20px auto;
padding:30px 0 30px 0;
font-size:13px;
}
#footnavi_1,#footnavi_2{
display:flex;
flex-wrap: wrap;
margin: 0 auto;
width: 80%;
}
#footnavi_3{
margin-top:2rem;
width: 96%;
}
#footnavi_1 li{
margin:1rem 0 14px 0;
line-height:100%;
padding:2px 26px;
font-size: 1rem;
border-right:1px solid #333;
}
#footnavi_1 li{
margin:1rem 0 14px 0;
line-height:100%;
padding:2px 26px;
border-right:1px solid #333;
}
#footnavi_2 li{
margin:1rem 0 14px 0;
line-height:100%;
padding:2px 26px;
border-right:1px solid #333;
}
#footnavi_1 li a{
color:#333;
text-decoration: none;
font-size:14px;
}
#footnavi_1 li a:hover{
color:#000;
text-decoration: none;
font-weight: bold;
}
#footnavi_2 li a{
color:#333;
text-decoration: none;
font-size:14px;
}
#footnavi_2 li a:hover{
color:#000;
text-decoration: none;
font-weight: bold;
}
footer #foot_tel{
text-decoration:none;
text-align:right;
color:#333;
font-size: 0.9rem;
}
footer #address{
text-decoration:none;
text-align:right;
color:#333;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
#copy{
text-align:right;
padding-bottom:10px;
margin: 1rem auto;
font-size: 0.9rem;
}
/* ====================================
hタグ
==================================== */
h2.sub-title{
border-bottom: 1px solid #aaa;
padding: 8px 0 10px 0;
width: 96%;
margin: 1rem auto 1rem;
font-size: 1rem;
color: #444;
text-align:left;
font-weight: normal;
text-indent: 1rem;
}
h3.map-title{
width: 90%;
font-size: 1rem;
color: #fff;
text-align:left;
padding: 0.6rem 0 0.6rem 0;
margin: 1rem auto 1rem;
font-weight: normal;
background: #aaa;
text-indent: 1rem;
}
h2.access-title{
padding: 0.4rem 0 0.4rem 0;
width: 50%;
font-weight:normal;
margin-left:5rem;
}
h2.faq-title{
width: 92%;
font-size:1.2rem;
margin: 1rem auto 1rem;
}
/* ====================================
パンくずリスト
==================================== */
.breadcrumb {
padding: 0;
margin: 0 0 15px 0; /* タイトルとの間に少し余白を設ける */
list-style: none;
font-size: 11px;
text-align: left;
}
.breadcrumb li {
display: inline; /* 横並びにする */
color: #555;
}
.breadcrumb li:not(:last-child)::after {
content: '>'; /* 区切り文字 */
margin: 0 0.5em; /* 区切り文字の左右に余白 */
}
.breadcrumb li a {
color: #EB6100;
text-decoration: none;
}
.breadcrumb li a:hover {
text-decoration: underline;
}
}