/* ====================================
cbox
   ==================================== */
.cbox{
	width: 90%;
	margin: 0 auto 1rem;
	line-height: 150%;
	font-size:0.9rem;
	letter-spacing: 1px;
}

/* ====================================
各種ボタン
   ==================================== */
#guide_button a,#contact_button a,#beginner_button a,#faq_button a,#estimaite_button a{
    /* ★追加: border や padding を width/height に含める */
    box-sizing: border-box; 
	background: #476FB5;
	width: 86%;
	font-size:0.9rem;
	display: block;
	border-radius: 1.5rem;
	color: #fff;
	margin: 1.5rem auto 1.5rem;
	text-align: center;
    
    /* 補足: 通常時の border を transparent で定義しておくとホバー時の "ガタつき" がなくなります */
    border: 3px solid transparent; 
    /* 現在 padding がないため、border を追加するとテキストがborderに近くなりすぎる可能性があります。
       padding も追加しておくとデザインが安定します。*/
    padding: 0.2rem 0; /* 例として上下に 0.5rem の padding を追加 */
}
	
#guide_button a:hover,#contact_button a:hover,#beginner_button a:hover,#faq_button a:hover,#estimaite_button a:hover{
	border: #476FB5 3px solid; /* border-box のおかげで幅は広がらない */
	color:#476FB5;
	background: #fff;
}

.item_button2 {
	width: 100%;
	text-align: center;
	margin-top: 8px;
	font-size:12px;
	
}

.item_button2 a{
	background: #F57706;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
		padding: 4px 0 4px 0;
	letter-spacing: 1px;

}

.item_button2 a:hover{
	background: #ACB9C1;
	text-decoration: none;
}

.item_button {
width:100%;
text-align: center;
margin-top: 8px;
font-size:12px;
		letter-spacing: 1px;

}

.item_button a{
	background: #4B97CF;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
		padding: 4px 0 4px 0;
}

.item_button a:hover{
	background: #ACB9C1;
	text-decoration: none;
}

.item_button3 {
width:70%;
text-align: center;
margin:1rem auto 2rem;
font-size:1rem;
letter-spacing: 1px;

}

.item_button3 a{
	background: #4B97CF;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding:0.4rem 0;
	border-radius: 1.5rem;
}

.item_button3 a:hover{
	background: #ACB9C1;
	text-decoration: none;
}


.detail_button{		
	width:90%;
	margin:0 auto 2rem;
}

.detail_button a{
	background: #4B97CF;
	border-radius:20px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding:4px;
	font-size: 0.8rem;
	text-align: center;
}

.detail_button a:hover{
	background: #ACB9C1;
}



.detail_button2 {
	width: 300px;
	text-align: center;
	margin: 20px auto 10px;

}


.detail_button2 a{
	background: #4B97CF;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 10px;

}

.detail_button2 a:hover{
	background: #ACB9C1;
}


.estimate_button {
	width: 300px;
	text-align: center;
	margin: 10px auto 10px;

}


.estimate_button a{
	background: #F57706;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 10px;

}

.estimate_button a:hover{
	background: #ACB9C1;
}

.twocolumn_cate_btn_area{
	width: 94%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto 2rem;
	justify-content:space-between;
}

.twocolumn_detail_btn {
	width: 46%;
	text-align: center;
	margin-right: 1.5rem;
}

.twocolumn_detail_btn a{
	background: #4B97CF;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 10px;
	font-size: 0.8rem;
}

.twocolumn_detail_btn a:hover{
	background: #ACB9C1;
}

.twocolumn_estimate_btn {
	width:46%;
	text-align: center;
}

.twocolumn_estimate_btn a{
	background: #F57706;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 10px;
	font-size: 0.8rem;

}

.twocolumn_estimate_btn a:hover{
	background: #ACB9C1;
}


/* ====================================
レイアウト
   ==================================== */

.c_box00{
	width:88%;
	margin:0 auto 20px;
	text-align:left;
	padding:20px;
	border:1px solid #CCC;
}

.e_box{
	width:900px;
	margin:0 auto 20px;
	text-align:left;
}

.e_box00{
	width:800px;
	margin:0 auto 20px;
	text-align:left;
	padding:20px;
	border:1px solid #CCC;
}

#contact_detail{
	width: 494px;
	margin: 0 auto;
}

#contact_tel{
	width: 274px;
	margin: 0 auto 10px;
}

/* ====================================
テーブル共通
   ==================================== */
table.list1{
	width:96%;
	border-collapse:collapse;
	border:solid 1px #CCC;
	text-align:left;
	margin:1rem auto;
	font-size:0.8rem;
}

table.list1 th,
table.list1 td{
	border:solid 1px #ccc;
	padding:0.5rem;
}

table.list1 th{
	background:#F0F0F0;
	text-align:left;
	white-space:nowrap;
	color:#333;
}
table.list1 td{
	line-height:140%;
	color:#333333;
}

table.list3{
	margin:10px auto;
	width:100%;
	border-collapse:collapse;
	border:solid 1px #CCC;
	text-align:left;
	margin:0 auto 10px;
	font-size:0.9rem;
}

table.list3 th.gray{
	width: 30%;
	background:#eee;
	border:solid 1px #ccc;
	padding:12px;
	font-weight:normal;
}

table.list3 th.blue{
	width: 30%;
	background:#E8F8FB;
	border:solid 1px #ccc;
	padding:12px;
	font-weight:normal;
}

table.list3 th.pink{
	width: 30%;
	background:#FFE9E9;;
	border:solid 1px #ccc;
	padding:12px;
	font-weight:normal;
}

table.list3 th.green{
	width: 30%;
	background:#ECF8DE;
	border:solid 1px #ccc;
	padding:12px;
	font-weight:normal;
}

table.list3 td{
	border:solid 1px #ccc;
	padding:12px;
	font-weight:normal;
}

table.list3 th{
	background:#F0F0F0;
	text-align:left;
	white-space:nowrap;
	color:#333;
}
table.list3 td{
	line-height:130%;
	color:#333333;
}

table.list4{
	width:100%;
  	min-width: 350px; /* ← テーブルが潰れすぎない最小幅 */
	margin:0 auto;
	border-collapse:collapse;
	border:solid 1px #CCC;
	text-align:center;
	font-size:0.7rem;
  table-layout: fixed; /* ← th width指定を有効にする */
  word-break: break-all; /* ← セル内で折り返す */
}

table.list4 th,
table.list4 td{
	border:solid 1px #ccc;
	padding:6px;
	font-weight:normal;
	text-align:center;
}

table.list4 th{
	background:#F0F0F0;
	white-space:nowrap;
	color:#333;
}

table.list4 td{
	line-height:130%;
	color:#333333;
	text-align:center;
}

table.list5{
	margin:10px auto;
	width:600px;
	border-collapse:collapse;
	border:solid 1px #CCC;
	text-align:left;
	margin:0 auto;
	font-size:14px;
	text-align:center;
}

table.list5 th,
table.list5 td{
	border:solid 1px #ccc;
	padding:12px;
	font-weight:normal;
}

table.list5 th{
	background:#F0F0F0;
	text-align:center;
	white-space:nowrap;
	color:#333;
}
table.list5 td{
	line-height:130%;
	color:#333333;
}


table.list6{
	width:580px;
	border-collapse:collapse;
	border:solid 1px #CCC;
	margin:20px auto 20px;
	text-align:left;
}

table.list6 th,
table.list6 td{
	border:solid 1px #ccc;
	padding:6px;
	text-indent: 10px;
}

table.list6 th{
	background: #eee;
	text-align:left;
	white-space:nowrap;
	color:#333;
	font-weight: normal;
}
table.list6 td{
	line-height:150%;
	color:#444444;
}

/* ====================================
商品詳細
   ==================================== */

.g_box0 {
  width: 94%;
  display: block;
  margin: 1rem auto;
  overflow-x: auto; /* ← テーブルが広い時は横スクロール */
}

.g_box3{
	display:block;
	width:94%;
    margin:1rem auto;
}

.g_left{
	width:90％;
}

.g_right{
	text-align: center;
	width:90％;
}

.c_box{
	width:88%;
	margin:0 auto 1rem;
}

.c_box .l a{
	background: #F57706;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 10px;
	width:90%;
	margin:0 auto 10px;
	font-size:1rem;
	text-align: center;
}

.c_box .l a:hover{
	background: #ccc;
	color: #fff;	
}

.c_box .r a{
	background: #669900;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 10px;
	width:90%;
	font-size:1rem;
	text-align: center;
	margin:0 auto 10px;
}

.c_box .r a:hover{
	background: #ccc;
	color: #fff;	
}


#eco_img{
	margin-bottom:6px;
}

h3.detail-sub{
	color: #666;
	width: 88%;
	border-bottom: #ccc solid 1px;
	margin: 0 auto;	
}

h2.detail-sub2{
	font-size: 1rem;
	color: #333;
	width: 100%;
	margin: 0 auto 0.5rem;	
}

/* --- ここから追加 --- */
/* アニメーション用のクラス（JSで付け外しします） */
/* メイン画像が入っているtd要素に対して */

@keyframes imageFade {
    0% {
        opacity: 0.6; /* 0.5から0.6へ。開始時の透明度を上げることで、より白浮きを抑えます */
    }
    100% {
        opacity: 1;
    }
}

.effect-active {
    /* 0.2s に短縮。一瞬で切り替わりつつ、カクつきだけを取り除きます */
    animation: imageFade 0.2s ease-out forwards;
    
    backface-visibility: hidden;
    will-change: opacity;
}

/* --- ここまで追加 --- */

.detail-top-text{
	text-align: left; 
	margin-bottom: 1rem;
	font-size: 0.9rem;
	line-height: 170%;
	letter-spacing:0.5px;
}

.hinban{
	font-family: "ゴシックMB101 B"; 
	font-weight:bold;
	font-size:1rem;	
}

/* ====================================
会社概要
   ==================================== */

.tab{
	width: 94%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    max-width: 500px;
	margin: 0 auto;
}

.tab > label {
    flex: 1 1;
    order: -1;
    opacity: .5;
    min-width: 70px;
    padding: .6em 0;
    border-radius: 5px 5px 0 0;
    border: 1px solid #2589D0;
    color: #2589D0;
    font-size: .8em;
    text-align: center;
    cursor: pointer;
}

.tab > label:hover {
	background: #2589D0;
	color: #fff;
}

.tab input {
    display: none;
}

.tab > div {
    display: none;
    width: 100%;
	
    padding: 0.5 0.5em;
    background-color: #fff;
}

.tab label:has(:checked) {
    opacity: 1;
	background: #2589D0;
	color: #fff;
}

.tab label:has(:checked) + div {
    display: block;
}

.president{
	width:100%;
	margin: 0 auto 1rem;	
}

.president-img {
	width: 204px;
	margin: 1rem auto 1rem;
	font-size: 0.9rem;
	text-align: center;
}

.president-text{
	line-height: 160%;
	font-size: 0.9rem;
	letter-spacing: 1px;
}





/* ====================================
   Googleマップのレスポンシブ対応
   ==================================== */

/* SPサイズ (デフォルト: 768px以下) */
.map-container {
    padding: 0; /* 左右に余白が必要な場合 */
}
.map-container iframe {
    width: 100%;    /* 横幅を画面幅いっぱいに */
    height: 250px;  /* SPでの適切な高さ */
    border: 0;      /* 地図の枠線を削除 */
	margin: 1rem auto;
}

dl.map-text{
	width:100%;
	font-size: 0.9rem;
	margin: 0 auto 0rem;
	line-height: 160%;
	}

/* ====================================
はじめての方へ
   ==================================== */

.first_box{
	margin: 2rem auto 2rem ;
	width: 96%;
	text-align: left;
	letter-spacing: 0.1em;
	line-height: 160%;
}

#first_contents{
	width: 94%;
	margin: 0 auto;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}

.first_cont{
	width: 94%;
	background: #999999;
	font-size:0.9rem;
	color: #fff;
	text-align: center;
	margin: 2rem auto 2rem;
	padding: 4px 0 2px 0;
}

.f_cont{
	max-width:150px;
	text-align: left;
	margin:0px 10px 1rem 10px;	
	line-height: 160%;
	font-size: 0.8rem;
}

.first{
	width: 90%;
	font-size:1.2rem;
	color: #003B83;
	font-weight: bold;
	margin:1rem auto 1rem;
	text-align: left;
}

.f_cont dd{
	width: 100%;
	margin-top: 10px;
	line-height: 1.6em;
}

.f_staff {
    max-width: 100%;
}


#f_area a{
	margin: 1rem auto 1rem;
	width:80%;
	display: block;
	background-color:#3694D2;
	text-decoration: none;
	border-radius:1.5rem;
	text-align: center;
	color: #FFFFFF;
	padding: 0.6rem 0 0.4rem 0;
	font-size:18px;
}

#f_area a:hover{
	background-color:#aaaaaa;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

.f_text_box{
	margin-bottom: 30px;
	font-size:1rem;
	line-height: 140%;
}

.info_box{
	width: 96%;
	border: 1px solid #ccc;
	text-align: left;
	margin: 10px auto;
	padding: 1rem;

}

.border{
	margin: 30px auto;
	width:96%;
	border-bottom: 1px solid #aaa;
}

#f_tel{
	width: 640px;
	margin: 0  auto ;
}

/* ====================================
商品一覧
   ==================================== */
.item-area {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  width: 96%;
  margin: 1rem auto;
  padding-bottom: 12px;
}

.item-content {
  min-width: 170px;
  flex-shrink: 0;
  box-sizing: border-box;
  text-align: left;
  margin-bottom: 2rem;
}

.item-area::after {
  display: none;
}

.cont-wrap {
  width: 100%;
  box-sizing: border-box;
  clear: both;
}
	
.item-text{
	text-indent: 6px; 
	text-align: left;
	font-size:0.65rem;
	margin: 6px auto 0.5rem;
	line-height: 90%;
}

.item_button4 {
width:96%;
text-align: center;
margin: 0 auto;
font-size:12px;
letter-spacing: 1px;
}

.item_button4 a{
	background: #4b97cf;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 4px 0 4px 0;
}

.item_button4 a:hover{
	background: #ACB9C1;
}

h1.detail-title{
	width: 90%;
	font-size: 1.2rem;
	margin: 0 auto;
	border-bottom: #ccc 1px solid;
}

.detail-title2{
		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;
	}


h3.size{
	width:96%;
	margin: 0 auto 30px; 
	font-size: 15px;
	padding: 4px;
	color:#1CABEF;
	text-align: left;
	border-bottom: dotted 1px #666666;
	font-weight: bold;
}

.title-icon{
	border:2px #002F71 solid; 
	border-radius:6rem; 
	text-align:center; 
	width:20%; 
	padding: 0.2rem 0.6rem 0 0.6rem; 
	color:#002F71; 
	margin:0 0 1rem 2.5rem;
	font-size:0.9rem; 
 }

/* ====================================
商品一覧　タイトルバー
==================================== */
.goods_title01 a,
.goods_title02 a,
.goods_title03 a,
.goods_title04 a,
.goods_title05 a,
.goods_title06 a {
    /* サイズ・配置 */
    font-size:1rem;
    width: 96%;
    text-align: left;
    /* 上下マージン (左右 auto で中央寄せ) */
    margin: 1rem auto 1rem; 
    /* ブロック要素化とテキストスタイル */
    display: block;
    padding: 4px;
    color: #FFFFFF;
    text-indent: 1rem; /* インデント */
    text-decoration: none;
    font-family: "メイリオ";
    /* 装飾 */
    border-radius: 4px;
	font-weight: normal;
    
   /* ★追加: ブラウザのデフォルトマージンをゼロにリセット */
    margin-top: 0;
 }

/* 
個別スタイル：色（背景色）のみを定義
==================================== */
.goods_title01 a {
    background: #D37D4E; /* オレンジ系 */
}

.goods_title02 a {
    background: #2EABD4; /* 青系 */
}

.goods_title03 a {
    background: #E68584; /* 赤系 */
}

.goods_title04 a {
    background: #C388CB; /* 紫系 */
}

.goods_title05 a {
    background: #ABC942; /* 緑系 */
}

.goods_title06 a {
    background: #EFC649; /* 黄色系 */
}

/* ====================================
よくあるご質問
==================================== */

#chumon{
	margin:6px 0 10px 0;
}

#fax{
	margin-top:6px;
	margin-bottom:10px;
}

/* アコーディオンの全体を制御する部分 */
.accbox {
    margin: 0 auto 10px;
    width: 94%;
    max-width: 96%;
    color: #333333;
    text-align: left;
    padding-bottom: 8px;
	font-size:0.9rem;
}

/* 質問文（Q）部分のデザインと動作設定 */
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding: 11px 40px 11px 12px; /* ★右側と左側のパディングを調整 */
    background: #DDEAF2;
    color: #333333;
    cursor: pointer;
    position: relative; /* ★疑似要素の配置基準 */
    transition: all 0.5s;
}

.accbox label:hover {
    background: #C0D7E7;
}

/* チェックボックスを非表示にする設定 */
.accbox input {
    display: none;
}

/* 回答（A）部分のデザインと非表示設定 */
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    line-height: 180%;
}

/* ★回答（A）の表示とアイコンの切り替え */
.cssacc:checked + label {
    background: #C0D7E7;
}

.cssacc:checked + label + .accshow {
    height: auto;
    padding: 10px;
    background: #FCE4E4;
    opacity: 1;
}

/* ★質問（Q）部分の右端に「＋」アイコンを追加 */
.accbox 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;
}

/* ★回答表示時にアイコンを「−」に切り替え */
.accbox input:checked + label::after {
	 font-size: 1.2em;
    content: '－';
}

/* ====================================
製作実績
   ==================================== */

.res_box{
	width:90%;
	margin: 2rem auto 2rem;
}

.res_l img{
	max-width: 160px;
	margin: 0 auto 1rem;
}

.res_r{
	width:90%;
	margin: 0 auto;
}

.res_r .res_title{
	font-size:0.9rem;
	border-bottom:dotted 1px #888;
	text-align:center;
	margin: 0 auto 1rem;
}

.res_r .r_hard,.res_r .r_cover,.res_r .r_nocover,
.res_r .r_diecut,.res_r .r_block,.res_r .r_other{
	width: 100%;
	font-size:0.8rem;
	text-align: center;
	color: #FFF;
	padding: 4px;
	margin: 0 auto 1.2rem;
}

.res_r .r_hard{
	background: #D37D4E;
}

.res_r .r_cover{
	background: #1CAAED;
}

.res_r .r_nocover{
	background: #ED8785;
}

.res_r .r_diecut{
	background:#AB6BC0;
}

.res_r .r_block{
	background:#80B821;
}

.res_r .r_other{
	background: #E8B94A;
}

.res_r .res_q{
	text-align: left;
	color: #0074BF;
	margin-bottom: 0.5rem;
	font-weight: bold;
	font-size: 0.9rem;
}

.res_r .res_a{
	text-align: left;
	letter-spacing: 1px;
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
}

.res_r .more a{
	margin: 0  auto;
	font-size:0.8rem;
	width: 80%;
	padding: 0.2rem;
	background: #ccc;
	color: #333333;
	display: block;
	border-radius: 0.8rem;
	text-align: center;
}

.res_r .more a:hover{
	text-decoration: none;
	color: #FFFFFF;
	background: #999999;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
		border-radius:0.8rem;

}

.res_cate{
	text-align: left;
	margin-bottom: 6px;
	
}

.res_detail_button {
	width: 100%;
	text-align: center;
	margin:1rem auto;
	font-size: 0.9rem;
}

.res_detail_button a{
	background: #4B97CF;
	border-radius: 1rem;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding:0.3rem;
}

.res_detail_button a:hover{
	background: #ACB9C1;
}

/* ====================================
製作実績詳細ページ
   ==================================== */

.res_de_title{
	margin:1.2rem auto 1.2rem;
	width:94%;
	text-align: left;
	font-size:1.1rem;
    border-bottom:dotted 1px #777777;
}

#res_de{
	width: 96%;
	margin:1.2rem auto;
	display: flex;
	flex-wrap: wrap;
}

.res_de_l{
	width:100%;
    margin:0 auto 0;
}

table.list7{
	margin:0 auto;
	border-collapse:collapse;
	border:solid 1px #CCC;
	text-align:center;
	font-size:12px;
}

table.list7 th,
table.list7 td{
	border:solid 1px #ccc;
	font-weight:normal;
	text-align:center;
	padding: 2px;

}

table.list7 th{
	background:#F0F0F0;
	white-space:nowrap;
	color:#333;
}

table.list7 td{
	color:#333333;
	text-align:center;
}

.res_de_r{
	width:90%;
	text-align: left;
	margin: 1rem auto 1rem;
}

.res_de_r dt.hard,.res_de_r dt.cover,.res_de_r dt.nocover,
.res_de_r dt.diecut,.res_de_r dt.block,.res_de_r dt.other{
	width: 100%;
	font-size:0.8rem;
	text-align: center;
	color: #FFF;
	padding: 0.4rem;
	margin: 0 auto 1.2rem;
}

.res_de_r dt.hard{
	background: #D37D4E;
}

.res_de_r dt.cover{
	background: #1CAAED;
}

.res_de_r dt.nocover{
	background: #ED8785;
}

.res_de_r dt.diecut{
	background:#AB6BC0;
}

.res_de_r dt.block{
	background:#80B821;
}

.res_de_r dt.other{
	background: #E8B94A;
}

.res_de_r dd{
	font-size: 0.9rem;
}

.res_de_r .p_name{
	text-align: left;
	font-size:16px;
	color: #2659A6;
	font-weight: bold;
	margin-bottom: 10px;
	margin-top: 6px;
}

.res_de_r .spec_title{
	text-align: left;
	border-bottom:dotted 1px #888;
	margin-bottom: 10px;
	font-size:1rem;
}

.spec_text{
	line-height: 200%;
	color: #333333;
	font-weight: bold;
}

.res_faq{
	width: 90%;
	margin:0 auto 1rem;
	text-align: left;
}

.res_faq .q{
	text-align: left;
	font-size:1rem;
	color: #2659A6;
	font-weight: bold;
	margin-top: 6px;
	letter-spacing: 1px;

}

.res_faq .a{
	text-align: left;
	font-size:0.9rem;
	margin-bottom:1rem;
	margin-top: 6px;
	letter-spacing: 1px;
}

#remark{
	width: 90%;
	border: 1px solid #cccccc;
	padding: 20px;
	text-align: left;
	margin: 20px auto 20px;
}

/* ====================================
サイトマップ
   ==================================== */
#sitemap{
	width: 90%;
	margin: 1rem auto ;
	display: block;
}

#sitemap li{

	list-style: url("../image/common/list_button02.gif");
	list-style-position: inside;
}

.sitemap_l{
	width: 90%;
	margin: 0 auto;
	text-align: left;
	line-height: 200%;
	font-size: 0.9rem;
	padding-left:0px;
}

.sitemap_l a{
	color: #666;
	text-decoration: none;
}

.sitemap_l a:hover{
	color: #222;
	font-weight: bold;
}

.sitemap_c{
	width: 90%;
	margin: 0 auto;
	text-align: left;
	line-height: 200%;
	font-size: 0.9rem;
	padding-left:0px;
}

.sitemap_c a{
	color: #666;
	text-decoration: none;
}

.sitemap_c a:hover{
	color: #222;
	font-weight: bold;
}

.sitemap_r{
	width: 90%;
	margin: 0 auto;
	text-align: left;
	line-height: 200%;
	font-size: 0.9rem;
	padding-left:0px;
}

.sitemap_r a{
	color: #666;
	text-decoration: none;
}

.sitemap_r a:hover{
	color: #222;
	font-weight: bold;
}

#home{
	width: 86%;
	background: #999;
	text-align: center;
	font-size:0.9rem;
	font-weight: bold;
	color: #1A5F92;
	margin: 20px auto 20px;
	padding: 6px;
	border-radius: 1rem;
}

#home a{
	color: #fff;
	text-decoration: none;
}

#home a:hover{
	color: #fff;
}

.sitemap_title{
	width: 100%;
	border: 1px solid #002F71;
	color: #002F71;
	font-weight: bold;
	text-align: center;
	margin:2rem auto 1rem;
}

/* ====================================
ご利用ガイド
   ==================================== */

#flow{
	margin:1rem auto 1rem;
	width:94%;
}

.gu_text {
	width:90%;
	margin: 1rem auto 2rem;
	text-align: left;
	font-size:0.9rem;
	line-height: 180%;
}

.gu_text2 {
	width:86%;
	margin: 1rem auto 1rem;
	font-size:0.9rem;
	text-align: left;
}

#gu_hacchusho{
	width: 600px;
	margin: 0 auto 30px;
}

#gu_hacchusho #l{
	width: 201px;
	float: left;
}#gu_hacchusho #r{
	width: 268px;
	float: left;
	margin-left: 10px;
}

.notes{
	width: 650px;
	margin: 0 auto 20px;
}

#start-production,#gu_bank {
	margin: 0 auto 30px;
}

.gu_text3{
	width:86%;
	height: 106px;
	margin: 20px auto 0;
	background: url(../image/guide/cardboard.jpg)no-repeat;
	text-align: left;
}

.guide_title-g,.guide_title-n,.guide_title-p{
	border-radius:0.7rem;
	padding:0.2rem;
	font-size:1rem;
	text-indent:1rem;
	text-align: left;
	width: 94%;
	font-family: "見出ゴMB1";
	margin: 1rem auto 1rem ;
}

.guide_title-g{
	border: 3px solid #1C932D;
	color: #1C932D;	
}

.guide_title-n{
	border: 3px solid #013B84;
	color: #013B84;
}

.guide_title-p{
	border: 3px solid #D36C6C;
	color: #D36C6C;
}


.data-point{
	width: 96%;
	background: #999999;
	border-radius: 2rem;
	margin: 1rem auto 2rem;
	padding: 0.4rem;
	text-align: center;
	display: block;
	text-decoration: none;
}

.data-point a{
	color: #FFF;
	display: block;
	text-decoration: none;
}

/* ====================================
データ作成時の注意事項
   ==================================== */

#data-title{
	border: 3px solid #666;
	border-radius:30px;
	width: 96%;
	margin: 0 auto 2rem;
	padding: 0.3rem;
	font-size: 1.1rem;
	letter-spacing: 2px;
	color: #555;
}

.data-subtitle{
	width: 96%;
	margin: 1rem auto 1rem;
	font-size: 0.9rem;
	letter-spacing: 1px;
	background: #777;
	color: #fff;
	padding: 0.4rem;
	text-align: left;
	text-indent: 16px;
}

.data-text{
	width: 90%;
	margin: 0 auto 1rem;
	text-align: left;
	font-size: 0.9rem;
}

.data-img img {
max-width: 90%; 
height: auto;
margin: 0 auto 1rem;
}

.green-text{
	 width:90%;
	color: #39993d;
	font-size: 1rem;
	font-weight: bold;
	margin: 0 auto 0.5rem;
	text-align:left;
}

.green-text2{
	 width:90%;
	color: #39993d;
	font-size: 1rem;
	font-weight: bold;
	margin: 0 auto 1rem;
	text-align:left;
}


/* ====================================
カテゴリー(ハードカバーふせん)
==================================== */
#cate_img{
	max-width: 740px;
	margin:0 auto 1rem;

}

.cate-point,#noshi,#noshi-cont{
	max-width: 640px;
	margin: 0 auto 1rem;
	font-size: 0.9rem;
}

#cate_catchcopy{
	font-family: "新ゴ R";
	font-size:1.1rem;
	text-align: left;
	width:94%;
	margin: 0 auto 1.5rem;
	line-height: 160%;
	color: #333333;
}

.cate_catchcopy{
	font-size:1rem;
	font-family: "新ゴ R";
	text-align: left;
	width:90%;
	margin: 0 auto 1.5rem;
	color: #333;
}

.cate_catchcopy2{
	font-size:1.2rem;
	font-family: "新ゴ R";
	text-align: left;
	width: 100%;
	margin: 0 auto 1rem ;
	line-height: 140%;

}

.cate_tokucho2{
	width: 96%;
	margin: 0 auto 1rem;
	font-size:1rem;
	font-family: "新ゴ R";
	text-align: center;
	background:#888;
	color: #fff;
	padding:4px 0 6px 0;
	border-radius:6px;
}

.cate_text{
	text-align: left;
	width:90%;
	margin: 0px auto 1.5rem;
	line-height: 140%;
	border: 1px #ccc solid;
	padding:1rem;
	letter-spacing: 0.1rem;
	font-size: 0.9rem;
}


.dtl_box{
	width:94%;
	margin:0 auto 1rem;
	text-align: left;
	line-height: 140%;
	background: #f5f5f5;
	padding: 1rem;
}
.dtl_title{
    font-size:1.2rem;
	font-family: "新ゴ R";
	text-align: left;
	width: 350px;
	margin: 0 auto 1rem;
	line-height: 140%;
	font-weight: bold;
	}

.dtl_l{
	width: 96%;
	margin:0 auto;
	margin:1rem auto 10px;
	font-size:0.9rem;
}

.dtl_r{
	width: 96%;
	margin:0 auto;
}

.dtl_text{
	text-align: left;
}



/* ====================================
カテゴリー(カバー付きふせん)
==================================== */

.utilization_subbanner{
	width: 602px;
	margin: 10px auto 20px;
}

/* ====================================
商品カテゴリタブ設定(カバー付きふせん)
   ==================================== */
.tab-area{
width: 100%;
margin: 0 auto;
}

.tab_content{
	width:98%;
	display: flex;
	flex-wrap: wrap;
	line-height: 100%;
	opacity: 0;
	margin:0 auto;
}

.tab-item{
	width:170px; 
	text-align: left;
    margin:0 auto;
}

.tab-text{
	text-indent: 6px; 
	text-align: left;
	font-size:11px;
	margin-top: 4px;
}


.tab2_button {
	width: 100%;
	text-align: center;
	margin-top: 4px;
	font-size:12px;

}

.tab2_button a{
	background: #F57706;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 6px 0 6px 0;

}

.tab_button {
width:100%;
text-align: center;
margin-top: 4px;
		font-size:12px;
}

.tab_button a{
	background: #4B97CF;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 6px 0 6px 0;
	letter-spacing: 1px;
}

.cate_button_area{
	width:94%;
	display: flex;
	flex-wrap:wrap;
	margin: 0 auto;
	padding-right: 10px;
}

.cate_button{
    width:220px;
	margin:0.5rem auto;
}
	#cover_size{
		max-width: 900px;
		margin: 0 auto;
	}

/*===========
.scroll-box
===========*/

/* スクロール外枠 */
.scroll-box {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
	margin-bottom:2rem;
}

/* スクロールバーの見た目（シンプル化） */
.scroll-box::-webkit-scrollbar { height: 6px; }
.scroll-box::-webkit-scrollbar-track { background: #eee; }
.scroll-box::-webkit-scrollbar-thumb { background: #aaa; border-radius: 3px; }

/* フレックスコンテナ */
.f_area {
  display: flex;
  gap: 15px; /* アイテム間の余白 */
  width: max-content; /* 中身の幅に合わせる */
}

/* 各アイテム（170px固定） */
.f_one {
  width: 170px;
  flex: 0 0 170px; /* 伸び縮みを防ぐ */	
}

.f_one dl, .f_one dt, .f_one dd {
  margin: 0;
  padding: 0;
}

.f_one img {
  width: 100%;
  height: auto;
  border: 1px solid #ddd;
  box-sizing: border-box;
	margin-bottom: 0.3rem;
}

/* テキスト指定 */
.tab-text {
  font-size:0.65rem;
  line-height: 1.6;
}

/* ボタン共通 */
.tab_button, .tab2_button {
  margin: 8px 0 0.8rem 0;
}

.tab_button a, .tab2_button a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  padding: 4px 0;
  border-radius: 4px;
	margin-bottom:8px;
}

/* ボタン色 */
.tab_button a { background-color: #5499c7; } /* 詳細（青） */
.tab2_button a { background-color: #e67e22; } /* 見積（オレンジ） */

.tab_button a:hover, .tab2_button a:hover { opacity: 0.8; }

h2.cfm-series{
	width: 96%;
	text-align: center;
	background:#395891;
	color: #fff;
	border-radius: 4px;
	font-size: 0.9rem;
	font-weight: normal;
	padding: 2px;
	margin:0 auto 1rem;
}

/* ====================================
カテゴリー(カバー無しふせん)
==================================== */
.title_katsuyou{
	width: 90%;
	text-align: left;
	font-size:1.3rem;
	border-bottom: 1px solid #003C84;
	margin: 0 auto 10px;
	color: #003C84;
	font-weight: 600;
}

.s_title_katsuyou{
	width: 90%;
	text-align: left;
	font-size:1rem;
	margin: 0 auto 10px;
	color: #333;
	line-height: 180%;
}

.katsuyou_cont{
	text-align: center;
	margin-bottom: 20px;
}

#util_img{
	margin-bottom: 20px;
}

.util_cate li{
	width: 300px;
	float: left;
	margin:0 10px 20px 0;
}

.util_cate{
	clear: both;	
}

.use{
	margin: 0 auto 20px;
	width:100%;
	font-size:1.2rem;
	text-align: left;
	border-bottom: solid 1px #999;
}

.use_sub{
	font-size:0.9rem;
	line-height:200%;
}


.return{
	margin:0 0 0 auto;
	text-align:right;
	font-size:12px;	
}

.return a{
	width: 130px;
	background: #ccc;
	padding: 4px 20px 4px 20px;
	color: #FFF;
	text-decoration: none;
	border-radius:20px;
}

.return a:hover{
	width: 130px;
	background: #8C8C8C;
	padding: 4px 20px 4px 20px;
	color: #FFF;
	text-decoration: none;
	border-radius:20px;
}

.text_box02{
	margin: 10px 0 0 0;
	width: 94%;
	border: 1px solid #999;
	padding: 10px;
}

.text_box02 a{
	color: #3061C3;
}

.text_box02 a:hover{
	text-decoration: underline;
}



.number{
	width: 90%;
	font-size:1rem;
	border: 1px solid #999;
	padding: 10px;
	margin: 10px auto 20px;
	text-align: center;
}

.u_banner{
	margin: 10px auto 20px;
}

.idea{
	margin: 2rem auto 3rem;
	width: 90%;
	font-size:16px;
}

.idea{
	margin: 1rem auto 1rem;
	width: 90%;
	font-size:0.8rem;
}

.idea a{
	color:#ffffff;
	display: block;
	background: #78B170;
	padding: 10px;
   border-radius:2rem;
	text-align: center;
	font-size:0.8rem;	
}

.idea a:hover{
	background:#bbbbbb;
	text-decoration: none;

}

.utilization_subbanner{
	width: 602px;
	margin: 10px auto 20px;
}


h4.cate_catchcopy3{
	width: 90%;
	font-size:1rem;
	text-align: left;
	font-weight: bold;
	border-bottom: 1px solid #999;
	color: #333;
}

h2.cate_catchcopy4{
	color: #444;
font-size:1rem;
	width: 90%;
	margin: 0 auto;
	}

/* ====================================
カテゴリー(型抜きふせん)
==================================== */

.diecut_button {
	width:100%;
	text-align: center;
	margin: 20px auto 10px;

}


.diecut_button a{
	background: #AF75B0;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 10px;

}

.diecut_button a:hover{
	background: #ACB9C1;
}


.cate_tokucho2{
	width: 96%;
	margin: 0 auto 2rem;
	font-size:1rem;
	font-family: "新ゴ R";
	text-align: center;
	background:#888;
	color: #fff;
	padding:4px 0 6px 0;
	border-radius:6px;
}

.cate_text2{
	text-align: left;
	width: 88%;
	margin: 0px auto;
	line-height: 150%;
	padding: 1rem;
	letter-spacing: 0.1rem;
}

.diecut_button2 a{
	background:#AF75B0;
	width:84%;
	text-align: center;
	color: #fff;
	font-family: "新ゴ R";
	padding:1rem;
	font-size: 1rem;
	border-radius: 8px;
	text-decoration: none;
	display: block;
	margin:0 auto 1rem;
}

.diecut_button2 a:hover{
	background-color:#aaaaaa;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	border-radius:8px;
	
}

.diecut-title{
	border: 1px #999 solid;
	padding: 4px;
	width:90%;
	margin: 0 auto 1rem;
	text-align: center;
}

/* ====================================
カテゴリー(ふせんのカンヅメ)
==================================== */


.teian,.teian-point{
	width: 30%;
	border-radius: 20px;
	background: #aaa;
	color: #fff;
	margin:0 0 1rem 1rem;
	padding: 2px 0;
	font-size: 1rem;
	text-align: center;
}

.cate_catchcopy{
	font-size:1rem;
	text-align: left;
	width:92%;
	margin: 0 auto 1.5rem;
}

.text_box03{
	letter-spacing: 1px;
	margin: 1rem auto 20px;
	width: 88%;
	text-align: left;
	font-size: 0.9rem;
	line-height: 170%;
}

/* ====================================
ふせん工房5つの強み
==================================== */

#contents_top{
		width:100%;
		margin: 0 auto;
	}

#strengths-info{
	background: url("../image/top/top-img-sp02.jpg") no-repeat;
	margin-bottom: 3rem;
	height: 450px;
}

#strengths-info dt{
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
	margin:0rem auto 0.8rem;
	padding-top: 3rem;
	color: #444;
}

#strengths-info dd{
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	margin:0rem auto 1rem;
    color: #38AACE;
	letter-spacing: 2px;
}

#strengths-info .top_text{
	width:80%;
	font-size:0.9rem;
	color: #333;
	line-height: 180%;
	margin: 0 auto 3rem;
}

#strengths-area{
	width: 90%;
	margin:0 auto 2rem;
}

#strengths-area .st-title{
	width: 96%;
	font-size: 1rem;
	font-weight: bold;
	text-align: left;
	margin:1rem auto 1rem;
	color: #333;	
}

.s-coulum-two .right dt{
font-size: 1rem;
font-weight: bold;
text-align: left;
color:  #38AACE;
margin: 1rem auto 1rem;
}

.s-coulum-two .right dd{
font-size: 0.9rem;
	text-align: left;
	color:  #333;
	margin-bottom: 1rem;
	line-height: 200%;
}


.s-coulum-two .left2 dt{
font-size: 1rem;
font-weight: bold;
text-align: left;
color:  #38AACE;
margin: 1rem auto 1rem;
}

.s-coulum-two .left2 dd{
font-size: 1rem;
text-align: left;
color:  #333;
margin-bottom: 1rem;
line-height: 200%;
}

.strengths_catch{
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	margin:1rem auto 1rem;
	color: #666;	
}

.cta-area{
	margin: 0 auto 1rem;
}

.cta-left a{
	width:300px;
	font-size: 1rem;
	padding:1rem;
	display: block;
	background: #E47A20;
	color: #fff;
	text-align: center;
	border-radius: 8px;
	margin: 0 auto 1rem;
}

.cta-left a:hover{
	background: #F1AC7C;
	color: #fff;
	text-decoration: none;
}

.cta-right a{
	width:300px;
	font-size: 1rem;
	padding:1rem;
	display: block;
	background: #818181;
	color: #fff;	
	text-align: center;
	border-radius: 8px;
	margin: 0 auto 1rem;
}

.cta-right a:hover{
	background: #aaa;
	color: #fff;
	text-decoration: none;
}

.cta-tel span{
	font-size:1.2rem;
	font-weight: bold;
	color:#255FB8;
	
}

/* ====================================
ふせんの仕組み・ふせんの剥がし方について
==================================== */

.shi-bnr-title{
	width: 94%;
	font-family: "G2サンセリフ-B";
	font-size:1.1rem;
	color: #EB6100;
	margin:0 auto 0.5rem;
}

.shi-bnr-area {
    display: flex;           /* 横並びの基本 */
    flex-wrap: nowrap;      /* モバイルでは折り返さない */
    overflow-x: auto;       /* 横スクロールを有効に */
    scroll-snap-type: x mandatory; /* スナップ機能 */
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 20px;
    background-color: #fff;
    box-sizing: border-box;
    scrollbar-width: none;  /* Firefoxでバーを隠す */
}

/* Chrome系でスクロールバーを非表示 */
.shi-bnr-area::-webkit-scrollbar {
    display: none;
}

.shi-bnr {
    flex: 0 0 80%;          /* モバイル：1枚の幅を80%にして次を見せる */
    scroll-snap-align: center;
    flex-shrink: 0;         /* 潰れないように固定 */
    background-color: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    box-sizing: border-box;
}

.shi-img-box img {
    max-width: 100%;
    height: auto;
    margin-bottom: 12px;
}

.shi-item_button a {
    display: block;
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

/* 画像のレスポンシブ設定 */
.shi-img-box img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}

/* ボタンのデザイン */
.shi-item_button a {
    display: block;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    padding: 10px 40px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

.shi-item_button {
width:90%;
text-align: center;
font-size:1rem;
letter-spacing: 1px;
margin:1rem auto;

}

.shi-item_button a{
	background: #EB6100;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 0.6rem 0 0.6rem 0;
}

.shi-item_button a:hover{
	background: #ACB9C1;
	text-decoration: none;
}

.shikumi{
	width: 90%;
	margin: 0 auto 1rem;
	text-align: left;
	font-size: 1.1rem;
    font-family: "ゴシックMB101 M-KS";
}

.shikumi_cont dt{
		width: 90%;
	margin: 0 auto;
	font-size: 1.1rem;
	text-align: left;
	color: #225FB1;	
	font-weight: bold;
}

.shikumi_cont dd{
		width: 90%;
	margin: 0 auto 1rem;
	font-size: 1rem;
	text-align: left;
}

.shikumi_img{
	margin: 0 auto 1.5rem;
}

.event{
	width:900px;
	margin:0 auto;
	padding-bottom:20px;
	height: auto;
}
/* お知らせ文
------------------------------------------------ */
.notice-text dl{
	width:90%;
	margin: 0 auto 20px;
	text-align: left;
	padding:20px;
	border-radius: 10px;
	line-height: 170%;
	background: #fff;
	border: #013B83 solid 4px;
	color: #013B83;
}

.notice-title{
	font-size: 1.3rem;
	font-weight: bold;
	margin-bottom: 1rem;
}

/* サブページ注意点
------------------------------------------------ */

.sub_important dl{
	width:80%;
	margin: 0 auto 20px;
	text-align: left;
	padding:30px;
	border-radius: 10px;
	line-height: 180%;
	background: #fff;
	border: #013B83 solid 4px;
	color: #013B83;
}

.info-title{
	font-size: 1.3rem;
	font-weight: bold;
	margin-bottom: 1rem;
}

/* ====================================
   ふせんのカンヅメLP
   ==================================== */

.canzume-cont{
	width: 900px;
	background: url("../image/category/canzume-top.jpg")no-repeat;
    margin:30px auto;
	height: 1660px;
	
}
.top-text{
	width: 90%;
	margin:0 auto;
	font-size:1.3rem;
	color: #fff;
	text-align: left;
	padding-top: 290px;
}

.point{
	margin: 0 auto 1rem;
	width: 90%;
	background:#D5E7EC;
	border-radius:20px; 
	line-height:220%;
}

.point-text{
	padding: 2rem;
}

.point-text dt{
	font-family: "G2サンセリフ-B";
	font-size: 1.5rem;
	color: #666;
	text-align: left;
	margin-bottom:0.5rem;

}

.point-text dd{
	font-size: 1.2rem;
	color: #666;
	text-align: left;
	font-weight: normal;
	margin-bottom: 1rem;

}

.canzume-detail_btn a{
	width: 90%;
	background: #A2A2A2;
	padding: 6px;
	margin: 0 auto;
	color: #fff;
	font-size: 1.3rem;
	border-radius: 2rem;
	text-decoration: none;
		margin: 1rem auto 1rem;
	display: block;
}

.canzume-detail_btn a:hover{
	    width: 90%;
		background:#C7C7C7;
	
}

.canzume-order_btn a{
	width: 90%;
	background: #EC8D8D;
	padding: 6px;
	margin: 0 auto;
	color: #fff;
	font-size: 1.3rem;
	border-radius: 2rem;
	text-decoration: none;
		margin: 1rem auto 2rem;
	display: block;
}

.canzume-order_btn a:hover{
	    width: 90%;
		background:#F2B0B0;
	
}

.canzume-ds_btn a{
	width: 90%;
	background:#A2A2A2;
	padding: 6px;
	margin: 0 auto;
	color: #FFFF7B;
	font-size: 1.3rem;
	border-radius: 2rem;
	text-decoration: none;
		margin: 1rem auto 2rem;
	display: block;
}

.canzume-ds_btn a:hover{
	    width: 90%;
		background:#BBBBBB;	
}


.canzume_title{
	margin-bottom: 2rem;
}

.cont-text{
	width: 90%;
	margin: 1rem auto 2rem;
	text-align: left;
	font-size: 1.3rem;
	line-height: 180%;
	
}

/* カテゴリタブ設定（フォーム）
------------------------------------------------ */
.tabf-area{
width:100%;
margin: 0 auto;
}

.tabf_content{
	width:98%;
	display: flex;
	flex-wrap: wrap;
	line-height: 100%;
	height: 0;
  overflow: hidden;
  opacity: 0;
	margin:0 auto;
}

.tabf-text{
	text-indent: 6px; 
	text-align: left;
	font-size:11px;
	margin-top: 4px;
}

.tabf-item{
	width:170px; 
	text-align: left;
	margin:0 12px 1rem 0;
}


.tabf2_button {
	width: 100%;
	text-align: center;
	margin-top: 4px;
	font-size:12px;
	
}

.tabf2_button a{
	border:solid 1px #F57706;
	border-radius: 4px;
	color: #F57706;
	text-decoration: none;
	display: block;
		padding: 4px 0 4px 0;
		letter-spacing: 1px;

}

.tabf2_button a:hover{
	background: #F57706;
	color: #fff;
}


/* カテゴリタブ設定2
------------------------------------------------ */

.tabf02 {
	width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 1rem;
}
.tabf02:after {
  content: '';
  width: 100%;
  height: 3px;
  background:#1f71b5;
  display: block;
  order: -1;
}
.tabf_label {
  height: auto;
  line-height: 40px;
  color:#000;
  background:#eeeeee;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tabf_label:not(:last-of-type) {
  margin-right: 4px;
}

/* アクティブタブ */
.tabf_active:checked+.tabf_label {
  color:#fff;
  background:#1D69A8;
}
.tabf_active:checked+.tabf_label+.tabf_content {
  height:auto;
  overflow: auto;
  padding:1rem 0 0 0.5rem ;
  opacity: 1;
  transition: .5s opacity;
}

/* ラジオボタン非表示 */
.tabf_active {
  display: none;
}




/* ====================================
   PCサイト向けスタイル (769px以上)
   ==================================== */
@media screen and (min-width: 769px) {
    .map-container {
        /* 中央寄せにする場合 */
        width: 600px; 
        margin: 0 auto; 
        padding: 0;
    }
    .map-container iframe {
        width: 600px;  /* PCでのカスタム幅 */
        height: 400px; /* PCでのカスタム高さ */
    }
	
dl.map-text{
	font-size: 1rem;
	width: 78%;
	margin: 0 auto 0;
	line-height: 160%;
	}
	
/* ====================================
商品詳細
   ==================================== */
.c_box{
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
	
.c_box .l a{
	width:320px;
}
	
.c_box .r a{
	width:320px;
}
	
.g_box3{
	width:88%;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;	
}
	
.g_left{
	width:320px;	
}

.g_right{
	width:320px;	
}

table.list4{
	font-size: 0.8rem;
}
	
/* ====================================
各種ボタン
   ==================================== */
	
#guide_button a,#contact_button a,#beginner_button a,#faq_button a{
 	font-size:1.2rem;
    padding: 0.3rem 0;
}

.detail_button{		
	width:66%;
	margin:0 auto 1.5rem;
}
	
.detail_button a{
	padding:6px;
	font-size:1rem;
	border-radius:20px;
}
	
.detail_button2 {
	width: 80%;
	text-align: center;
	margin: 20px auto 10px;

}


.detail_button2 a{
	background: #4B97CF;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 10px;

}

.detail_button2 a:hover{
	background: #ACB9C1;
}


.estimate_button {
	width: 80%;
	text-align: center;
	margin: 10px auto 10px;

}


.estimate_button a{
	background: #F57706;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 10px;

}

.estimate_button a:hover{
	background: #ACB9C1;
}
	

.twocolumn_detail_btn a{
	font-size:1rem;
}

.twocolumn_estimate_btn a{
	font-size:1rem;
}

/* ====================================
  会社概要
   ==================================== */
.president{
	margin: 0 auto 2rem;
	width:100%;
	display: flex;
	flex-wrap:wrap;
}

.president-img{
	width:26%;
	margin:1rem 16px 0 6px;
}

.president-text{
	width: 66%;
	text-align: left;
	line-height: 180%;
	margin-left: 10px;
}
	
table.list1{
	width:96%;
	border-collapse:collapse;
	border:solid 1px #CCC;
	text-align:left;
	margin:2rem auto;
	font-size:0.9rem;
	line-height: 160%;
}

table.list1 th,
table.list1 td{
	border:solid 1px #ccc;
	padding:1rem;
	font-weight: normal;
}
table.list1 th{
	background:#F0F0F0;
	text-align:left;
	white-space:nowrap;
	color:#333;
	width: 28%;
}
table.list1 td{
	line-height:160%;
	color:#333333;
}
	
	
/* ====================================
はじめての方へ
   ==================================== */
	
#first_contents{
	width: 90%;
	margin: 0 auto;
}

.first{
	font-size:1.5rem;
}
	
.f_text_box{
	line-height: 180%;
}

#f_staff{
	background: url("../image/sub/staff2.png")no-repeat;
	margin: 2rem auto;
	width: 710px;
	height:200px;
	position:relative;
	line-height: 140%;
	border: 1px solid #cccccc;
}

.staff_text{
	width: 510px;
	position: absolute;
	text-align: left;
	top: 60px;
	left: 80px;
	font-size: 14px;
	}

/* ====================================
商品一覧
   ==================================== */
	
#goods_contents{
	max-width: 1000px;
    width: 100%;
	margin:0 auto;
	overflow: hidden;
	padding-bottom:20px;
	display: block;
	height: auto;
}
	
.title_goods{
	width:90%;
	background:#F0F0F0;
	padding:12px 30px 12px 30px;
	border:#E3E3E3 solid 1px;
	text-align:left;
	margin-bottom:20px;
	font-size:1.1rem;
	font-weight:normal;
}
	
.g_box0{
	display: flex;
	flex-wrap:wrap;
	width:88%;
	justify-content: space-between;
}



/* ====================================
商品一覧　タイトルバー
==================================== */
.goods_title01 a,
.goods_title02 a,
.goods_title03 a,
.goods_title04 a,
.goods_title05 a,
.goods_title06 a {
    /* サイズ・配置 */
    font-size: 16px;
    width: 96%;
    text-align: left;
    /* 上下マージン (左右 auto で中央寄せ) */
    margin: 1rem auto; 
    /* ブロック要素化とテキストスタイル */
    display: block;
    padding: 4px;
    color: #FFFFFF;
    text-indent: 20px; /* インデント */
    text-decoration: none;
    font-family: "メイリオ";
    /* 装飾 */
    border-radius: 4px;
    
    /* 注意: background: は下の個別定義で指定するため、ここでは外します */
}

#cover_size{
	
	margin-bottom: 20px;

}

.hard_l{
	width: 250px;
	margin-bottom: 30px;
	float: left;
	padding-left: 16px;
}

.hard_r{
	width: 350px;
	float: right;
	margin-right: 20px;
	}

.hard_img{
	margin: 0px 20px 30px 0px;
	}

.hard_text{
	text-align: left;
	line-height:200%;
	letter-spacing: 1px;
}

#hard_title{
font-size: 18px;
font-weight: bold;
	margin-bottom: 10px;
	padding-top: 20px;
}

#foot_banner_area{
	width: 880px;
	margin: 30px auto 20px;
	clear: both;
}

#foot_banner_area li a{
	width: 210px;
	float: left;
	margin:0 10px 14px 0;
	
}

.g_bannerarea{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 94%;
	margin: 0 auto 2rem;
}

.g_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 0.5rem;
}

.g_banner01 a:hover {
	background: url("../image/menu/menu_bnr01_h.jpg") no-repeat;
}

.g_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 0.5rem;
}

.g_banner02 a:hover {
	background: url("../image/menu/menu_bnr02_h.jpg") no-repeat;
}

.g_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 0.5rem;
}

.g_banner03 a:hover {
	background: url("../image/menu/menu_bnr03_h.jpg") no-repeat;
}

.g_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 0.5rem;
}

.g_banner04 a:hover {
	background: url("../image/menu/menu_bnr04_h.jpg") no-repeat;
}

.g_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 0.5rem;
}

.g_banner05 a:hover {
	background: url("../image/menu/menu_bnr05_h.jpg") no-repeat;
}

.g_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 0.5rem;
}

.g_banner06 a:hover {
	background: url("../image/menu/menu_bnr06_h.jpg") no-repeat;
}

.g_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 0.5rem;
}

.g_banner07 a:hover {
	background: url("../image/menu/facebook_h.jpg") no-repeat;
}

/* ====================================
商品カテゴリエリア
   ==================================== */
.goods_tab_area{
	width: 88%;
	display: flex;
	flex-wrap: wrap;
	margin: 1rem auto 2rem;
}

		
	#list-hard,#list-cover,#list-diecut,#list-block{
		margin-right: 14px;
	}

#cate_catchcopy{
	font-size:1.3rem;
}


/* ====================================
商品カテゴリタブ設定(カバー付きふせん)
   ==================================== */
.tab-area{
width: 100%;
margin: 0 auto;
}

.tab_content{
	width:98%;
	display: flex;
	flex-wrap: wrap;
	line-height: 100%;
	height: 0;
  overflow: hidden;
  opacity: 0;
	margin:0 auto;
}

.tab-item{
	width:170px; 
	text-align: left;
    margin:0 12px 1rem 0;

}

.tab-text{
	text-indent: 6px; 
	text-align: left;
	font-size:11px;
	margin-top: 4px;
}


.tab2_button {
	width: 100%;
	text-align: center;
	margin-top: 4px;
	font-size:12px;

}

.tab2_button a{
	background: #F57706;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
		padding: 6px 0 6px 0;

}

.tab2_button a:hover{
	background: #ACB9C1;
}

.tab_button {
	width:100%;
	text-align: center;
margin-top: 4px;
		font-size:12px;

}

.tab_button a{
	background: #4B97CF;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
		padding: 6px 0 6px 0;
		letter-spacing: 1px;
}

.tab_button a:hover{
	background: #ACB9C1;
}

.hover-opacity {
  transition-property: opacity;
  transition-duration: 0.5s;
}
.hover-opacity:hover {
  opacity: 0.6; 
}

.cate_button_area{
	width:94%;
	display: flex;
	flex-wrap:wrap;
	margin: 0 auto;
	padding-right: 10px;
}

.cate_button{
    width:220px;
	margin:0.5rem auto;
}

	#cover_size{
		max-width: 900px;
		margin: 0 auto;
	}


/* カテゴリタブ設定2(カバー付きふせん)
------------------------------------------------ */

.tab02 {
	width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 1rem;
}
.tab02:after {
  content: '';
  width: 100%;
  height: 3px;
  background:#1f71b5;
  display: block;
  order: -1;
}
.tab_label {
  height: auto;
  line-height: 40px;
  color:#000;
  background:#eeeeee;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab_label:not(:last-of-type) {
  margin-right: 4px;
}

/* アクティブタブ */
.tab_active:checked+.tab_label {
  color:#fff;
  background:#1D69A8;
}
.tab_active:checked+.tab_label+.tab_content {
  height:auto;
  overflow: auto;
  padding:1rem 0 0 0.5rem;
  opacity: 1;
  transition: .5s opacity;

}
/* ラジオボタン非表示 */
.tab_active {
  display: none;
}

/* ====================================
商品一覧
   ==================================== */
.item-area{
width: 98%;
justify-content: flex-start;
margin: 2rem auto;
display: flex;
flex-wrap: wrap;
gap: 4px;
}

.item-content{
	width:170px; 
	margin-right:10px;
}

.item-text{
	text-indent: 6px; 
	text-align: left;
	font-size:11px;
	margin: 6px auto 0.5rem;
	line-height: 90%;
}
	
/* ====================================
製作実績
   ==================================== */
	
.res_r .r_hard,.res_r .r_cover,.res_r .r_nocover,
.res_r .r_diecut,.res_r .r_block,.res_r .r_other{
	text-align:center;
	width: 33%;
	margin:0 0 1.2rem 0;
}
	
.res_box{
	width:96%;
	margin: 30px auto 40px;
	display: flex;
	flex-wrap: wrap;
}

.res_l{
	width:24%;
	margin-right: 1rem;
}

.res_r{
	width:70%;
}

.res_r .res_title{
	text-align: left;
	font-size:1.1rem;
}
	
.res_r .res_q{
	font-size:1rem;
}
	
.res_r .res_a{
	font-size:1rem;
}
	
.res_r .more a{
	margin: 0 0 0 auto;
	font-size:0.8rem;
	width: 20%;
}
	
.res_de_r dt.hard,.res_de_r dt.cover,.res_de_r dt.nocover,
	.res_de_r dt.diecut,.res_de_r dt.block,.res_de_r dt.other{
	text-align:center;
	width: 96%;
	margin:0 0 1.2rem 0;
}
	
/* ====================================
製作実績詳細ページ
==================================== */
	
.res_de_title{
	margin: 1rem auto 1rem;
	width:96%;
	text-align: left;
	font-size:1.2rem;
    border-bottom:dotted 1px #888;
}

#res_de{
	width: 100%;
	margin-top:20px;
	display: flex;
	flex-wrap: wrap;
	line-height: 90%;
}

.res_de_l{
	max-width:320px;
    margin:0 1rem 0 2rem;
}
	
.res_de_r{
	width:44%;
	text-align: left;
}
	
.res_detail_button a{
	padding:0.5rem;
	width: 96%;
	margin:1rem auto 0;
}
	
/* ====================================
サイトマップ
==================================== */
#sitemap{
	width: 90%;
	margin: 10px auto ;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	
.sitemap_l,.sitemap_c,.sitemap_r{
	width: 30%;
	line-height: 300%;
}

/* ====================================
ご利用ガイド
==================================== */
	
.guide_title-g,.guide_title-n,.guide_title-p{
	font-size: 1.3rem;
}
	
.gu_text,.gu_text2 {
	font-size:1rem;
}

/* ====================================
データ作成時の注意事項
==================================== */
	.data-text{
		font-size: 1rem;
	}
	.green-text{
		font-size: 1.2rem;
	}
	
	.green-box{
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto;
	}
	
	.green-text2{
		font-size: 1.2rem;
		width: 35%;
	}
	
	

/* ====================================
カテゴリー(ハードカバーふせん)
==================================== */
	

.dtl_box{
	width:94%;
	margin:0 auto 1.5rem;
	display: flex;
	flex-wrap: wrap;
	padding: 1rem;
	justify-content: space-between;
	line-height: 160%;
}
	
.dtl_l{
	width: 46%;
	margin:1rem auto 10px;
	font-size: 1rem;
}

.dtl_r{
	width: 40%;
	margin:2rem auto 10px;
}
	
.cate_text{
	font-size:1rem;
	line-height: 180%;
}
		
/* ====================================
カテゴリー(カバー付きふせん)
==================================== */

.idea a{
	margin: 2rem auto 3rem;
	width: 80%;
	font-size:1.2rem;
}

.idea a:hover{
	background:#bbbbbb;
	text-decoration: none;
}
	
	
/* ====================================
カテゴリー(型抜きふせん)
==================================== */

.diecut_button {
	width:100%;
	text-align: center;
	margin: 20px auto 10px;

}


.diecut_button a{
	background: #AF75B0;
	border-radius: 4px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 10px;

}

.diecut_button a:hover{
	background: #ACB9C1;
}
	
h2.cate_catchcopy4{
font-size:1.4rem;
	}

.diecut_button_area{
	width:70%;
	margin: 0 auto 2rem;
	text-align: center;
}
	
.diecut_button2 a{
	width:80%;
}
	
/* ====================================
ふせん工房5つの強み
==================================== */
#contents_top{
		max-width: 1000px;
		margin: 0 auto;
	}

#strengths-info{
	background: url("../image/top/back-cont4.jpg") no-repeat;
	height: 455px;
	margin:0 auto 3rem;
}
	
#strengths-info dt{
	font-size: 1.8rem;
	padding-top: 5rem;
}
	

	
#strengths-info dd{
	font-size: 1.6rem;
}
	
#strengths-info .top_text{
	font-size: 1.2rem;
	line-height: 180%;
	text-align: center;
}

#strengths-area{
	width: 100%;
	margin-bottom: 4rem;
}
	
#strengths-area .st-title{
	font-size: 1.6rem;
	margin:2rem auto 1.5rem;
}

#strengths-area .s-coulum-two{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.s-coulum-two .left{
	width: 45%;
}

.s-coulum-two .right{
	width: 52%;
}

.s-coulum-two .right dt{
font-size: 1.2rem;
	font-family: "TBUDゴシック E";
	text-align: left;
	color:  #38AACE;
	margin-bottom: 1rem;
}

.s-coulum-two .right dd{
font-size: 1.1rem;
	text-align: left;
	color:  #333;
	margin-bottom: 1rem;
	line-height: 200%;
}

.s-coulum-two .left2{
	width: 52%;
}

.s-coulum-two .right2{
	width: 45%;
}

.s-coulum-two .left2 dt{
font-size: 1.2rem;
	font-family: "TBUDゴシック E";
	text-align: left;
	color:  #38AACE;
	margin-bottom: 1rem;
}

.s-coulum-two .left2 dd{
font-size: 1.1rem;
	text-align: left;
	color:  #333;
	margin-bottom: 1rem;
	line-height: 200%;
}

.strengths_catch{
	font-size: 1.2rem;
	text-align: center;
	margin:1rem auto 1rem;
	color: #666;	
}

.cta-area{
	width: 62%;
	margin: 0 auto 1rem;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}

.cta-left a{
	width:300px;
	font-size: 1rem;
	display: block;
	padding:1rem;
	background: #E47A20;
	color: #fff;
	text-align: center;
	border-radius: 8px;
	margin: 0 auto 1rem;
}

.cta-left a:hover{
	background: #F1AC7C;
	color: #fff;
	text-decoration: none;
}

.cta-right a{
	width:300px;
	font-size: 1rem;
	display: block;
	padding:1rem;
	background: #818181;
	color: #fff;	
	text-align: center;
	border-radius: 8px;
	margin: 0 auto 1rem;
}

.cta-right a:hover{
	background: #aaa;
	color: #fff;
	text-decoration: none;
}
	
.cta-tel span{
	font-size:1.6rem;
	
}
	
/* ====================================
ふせんの仕組み・ふせんの剥がし方について
==================================== */
.shi-bnr-title{
	font-size:1.8rem;
}


.shi-bnr-area {
		display: flex;
        /* flexは維持 */
        justify-content: center; /* アイテムを中央に配置 */
        overflow-x: visible;     /* スクロールを解除 */
        scroll-snap-type: none;  /* スナップを解除 */
        gap: 20px;               /* PC用に余白を少し広げる */
    }

    .shi-bnr {
        flex: 0 0 222px;        /* ご指定の222px幅に固定 */
        scroll-snap-align: none; /* スナップ位置指定を解除 */
        transition: transform 0.3s ease;
    }

    /* PCならではのホバーアクションを追加 
    .shi-bnr:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }*/
  

	
}