@charset "utf-8";


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");


/* PC用のCSSはメディアクエリの外に記述する */

/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 14px;	/*基準となるフォントサイズ。*/
}
body {
	font-family: 'Avenir',"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",
    "Hiragino Sans",Meiryo,sans-serif;
	background: #fff;
	color: #333;	
	word-break: break-all;
}
p{
	margin:0px;
}

.sp{display:none;}

#footermenu{clear:both;}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #333;
	transition: 0.3s;
	/*text-decoration:none;*/
}

.linkmark a{
	text-decoration:underline;
}

a:hover {
	color: #d70101;
}

.kasen{
	text-decoration:underline;
}

div.jtrunc a{
	text-decoration:underline;
	color:#284d89;
}

/*フォント設定
---------------------------------------------------------------------------*/
/*フォントサイズ*/
.fsize11{font-size:11px;}
.fsize14{font-size:14px;}
.fsize18{font-size:18px;}
.fsize21{font-size:21px;}
.fsize25{font-size:25px;}

.fwei{font-weight:bold;}

/*フォントカラー*/
.fgr{color:#1c8a0b;/*緑*/}
.fbl{color:#284d89;/*青*/}
.fye{color:#d59b0a;/*黄*/}
.fpi{color:#dbbec1;/*ピンク*/}
.flb{color:#8ab7ce;/*水色*/}
.fred{color:#b32034;/*赤*/}
.fwh{color:#ffffff;/*白*/}


/*テキスト位置*/
.txtr{text-align:right;}
.txtl{text-align:left;}
.txtc{text-align:center;}

/*フロート*/
.flr{float:right;}
.fll{float:left;}


/*背景色
---------------------------------------------------------------------------*/
.bg_gr01{background-color:#eee;}
.bg_gr02{background-color:#bbb;}

/*空き
---------------------------------------------------------------------------*/
.pad20{	padding:20px 0;}
.pad50{	padding:50px 0;}
.ptop10{padding-top:10px;}
.ptop20{padding-top:20px;}
.ptop50{padding-top:50px;}
.padall10{padding:10px;}
.mtop0{margin-top:0px;}
.mtop10{margin-top:10px;}
.mtop100{margin-top:100px;}
.padall20{padding:20px;}


/*枠線
---------------------------------------------------------------------------*/
.bdlb{border:1px solid #b6d0d8;}
.bd_t_s_wh{border-top:1px solid #fff;}
.bd_t_d_wh{border-top:1px dotted #fff;}

/*リスト設定
---------------------------------------------------------------------------*/
ul{list-style: none;margin: 0;padding: 0; 
		/*高さを揃える*/
		display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;}
li{padding: 5px 20px;}


/*並び設定
---------------------------------------------------------------------------*/
.block3,.block2,.block1-2,.block2-1,.block4,.block1-4,.block4-1{clear:both;padding-bottom:20px;overflow : hidden}
.block3 li{/*3並び*/
	width:32%;
	float:left;
	margin-right:2%;
	padding:0px;
}
.block3 li:nth-child(3n){
	margin-right:0px;
}


.block2 li{/*2並び*/
	width:47%;
	float:left;
	margin-right:6%;
	padding:0px;
}
.block2 li:nth-child(2n){
	margin-right:0px;
}

.block1-2 li{/*1:2並び*/
	width:32%;
	float:left;
	margin-right:4%;
	padding:0px;
}
.block1-2 li:nth-child(2n){
	width:64%;
	margin-right:0px;
}

.block2-1 li{/*2:1並び*/
	width:64%;
	float:left;
	margin-right:4%;
	padding:0px;
}
.block2-1 li:nth-child(2n){
	width:32%;
	margin-right:0px;
}

.block4 li{/*4並び*/
	width:23.5%;
	float:left;
	margin-right:2%;
	padding:0px;
}
.block4 li:nth-child(4n){
	margin-right:0px;
}

.block1-4 li{/*1:4並び*/
	width:20%;
	float:left;
	margin-right:2%;
	padding:0px;
}
.block1-4 li:nth-child(2n){
	width:78%;
	margin-right:0px;
}

.block4-1 li{/*4:1並び*/
	width:78%;
	float:left;
	margin-right:2%;
	padding:0px;
}
.block4-1 li:nth-child(2n){
	width:20%;
	margin-right:0px;
}


/*header
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	padding-top:20px;
}
.header-area{
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35);
	padding-bottom:10px;
}
/*ロゴ画像*/
h1{margin:0;text-align:center;}

h1 img{	width: 250px;	position: relative; right:-100px;top:10px;	/*ロゴ画像の幅*/}

p.contact{float:right; padding-right:40px;position: relative;top:10px;}

#bn{
	width:100%;
	height:120px;
	background:#000;
	clear:both;
	margin-top:10px;
	color:#fff;
	text-align:center;
	padding-top:80px;
}
.head-text{margin-left:10%}



/*nav
---------------------------------------------------------------------------*/
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
    /*ハンバーガーボタンの装飾 !important をつける*/
}


.drawer-hamburger {
    padding-top: 35px!important;
    padding-left: 40px!important;
		
		
}
.drawer--left.drawer-open .drawer-hamburger {
   padding-left: 20px!important;
}
.drawer-brand{
	font-family: "Gill Sans", sans-serif!important;
	/* padding-left:25px!important;*/
}
nav.drawer-nav ul{
height: 100%;
 overflow: auto;
 -webkit-overflow-scrolling: touch;

}
nav{margin-bottom:100px;}
hr{height: 0;
  margin: auto;
  padding: 0;
  border: 0;
	 border-top: 1px solid #333;
	 }

/*nav(ページ内）
---------------------------------------------------------------------------*/
.nav-area{
	color:#fff;
	text-align: center;
	display: flex;
	justify-content: center;
	max-width: 1080px;				/*最大幅。*/
	margin: 20px auto 0 auto;
	box-sizing: border-box;
	
}
/*ナビゲーションを横並びに*/
.nav-area ul{
	list-style: none;
	width:33%;
	margin-right:0.5%;
}
.nav-area ul:nth-child(3){
	margin-right:0;
}
/*2階層目以降は横並びにしない*/
.nav-area ul ul{
	display: block;
}
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
.nav-area ul li{
	position: relative;
	width:100%;
	border:	1px solid #ccc;
	padding:0;

}
.nav-area ul li a{
	display: block;
	text-decoration: none;
	color: #fff;
	padding:15px;
	transition:all .3s;
}
.nav-area ul li li a{
	padding:8px;
}

.nav-area ul li a:hover{
	color:#fff;	
	background:#931717;
}
.nav-area ul li a.no-link{
  background-color:transparent;
}
/*2階層目を持つliの矢印の設定*/
.nav-area ul li.has-child::before{
	content:'';
	position: absolute;
	left:15px;
	top:15px;
	width:6px;
	height:6px;
	border-top: 2px solid #999;
  border-right:2px solid #999;
    transform: rotate(135deg);
}
/*下の階層を持っているulの指定*/
.nav-area li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	left:0;
	top:52px;
	z-index: 4;
	width:80%;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}
.nav-area li.has-child ul li{
		background:#333;
}
/*hoverしたら表示*/
.nav-area li.has-child:hover > ul,
.nav-area li.has-child ul li:hover > ul,
.nav-area li.has-child:active > ul,
.nav-area li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
.nav-area li.has-child ul li a{
	color: #fff;
	
}

.nav-area li.has-child ul li:last-child > a{
 border-bottom:none;
 }

.nav-area li.has-child ul li a:hover,
.nav-area li.has-child ul li a:active{
	background:#931717;
}
.nav-area__sku{
		background:rgba(255,255,255,0.2);
}
@media screen and (max-width:768px){
#nav-block{
		padding:0;margin:0;
		}
	.nav-area{
		max-width: 100%;
		display:block;
		padding: 0;
			box-sizing: border-box;
	}
	.nav-area ul{
		display: block;
	width:100%;
	margin-right:0;
	margin-bottom:50px;
	}

	.nav-area li.has-child ul,
	.nav-area li.has-child ul ul{
  	position: relative;
		left:0;
		top:0;
		width:100%;
		visibility:visible;/*JSで制御するため一旦表示*/
		opacity:1;/*JSで制御するため一旦表示*/
		display: none;/*JSのslidetoggleで表示させるため非表示に*/
		transition:none;/*JSで制御するためCSSのアニメーションを切る*/
		margin-bottom:0;
	}
	.nav-area ul li{
	padding:0;
	border-left:none;
	border-right:none;
}
	.nav-area ul li a{
		padding:10px;
	}
.nav-area li.has-child ul li a{
	border-bottom:none;
}

	
	/*矢印の位置と向き*/
	.nav-area ul li.has-child::before{
		left:20px;	
	}
	.nav-area ul ul li.has-child::before{
			transform: rotate(135deg);
		left:20px;
	}
	.nav-area ul li.has-child.active::before{
			transform: rotate(-45deg);
	}
}


/*container（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
		background-color:#fff;
}



/*main（メインブロック）
---------------------------------------------------------------------------*/
main {
	max-width: 1080px;				/*最大幅。*/
	margin: 0 auto;
	height: 100%;
}

main img{width:100%;}
main p{clear:both;font-size:15px;line-height:1.8em;letter-spacing:0.03em;}

h2{/*ページタイトル*/
	font-size:32px;
	font-weight:900;
	margin:100px 0px 50px 0px;
	text-align:center;
	border-bottom:3px #9f1d2f solid;
	padding-bottom:25px;
}
h3{/*大見出し*/
	font-size:38px;
	font-weight:400;
	margin:50px px;
	color:#9f1d2f;
	padding:40px 0 20px 0;
	clear:both;
	border-top:5px #9f1d2f solid;
	border-bottom:2px #9f1d2f dotted;
}


h4{/*中見出し*/
	font-size:20px;
	border-bottom: solid 2px #999999; /*[1]線の太さと地の色を指定*/
	position: relative;
	clear:both;
	padding-top:50px;

}
h4:after{
position: absolute;
content: " ";
display: block;
border-bottom: solid 2px #9f1d2f; /*[2]アクセントの色を指定（太さは上記[1]に揃える）*/
bottom: -2px; /*[3]太さの分だけ線の位置を調整*/
width: 20%; /*[4]アクセントカラーの幅を指定*/

}

h5{
		background-color:#b32034;color:white;padding:10px 5px;font-size:1.5rem;
}



main #mokuji{/*目次*/
	/*background:url("../images/contents_bg.gif");*/
	background-color:#333;
	padding:20px 30px;
	font-weight:bold;
	margin:30px auto;
}
main #mokuji:before{
	content:"CONTENTS";
	color:#9f1d2f;
	font-size:20px;
	font-weight:bold;
	font-family: "Gill Sans", sans-serif;
	display:block;
	margin:10px auto;
}
main #mokuji a{
	color:#fff;
	text-decoration:underline;
}
main #mokuji a:hover{color: #9f1d2f;}
main #mokuji li{width:100%;}

.bg_st{background:url(../images/bg_st.gif); padding:3px 0 0 10px;margin:20px auto;/*見出し背景ストライプ*/}

/*section（セクションブロック）
---------------------------------------------------------------------------*/
section p.maintxt{padding-top:50px; font-size:18px;}
section p.txt{padding-top:15px;}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

.cont_bn{width:55%;float:left;}
.cont_bn img{margin:0px;padding:0px;vertical-align: bottom;}



/*テーブルの設定
---------------------------------------------------------------------------*/
main table{
	width:100%;
	border-collapse:collapse;
	min-width:100%;
}
main table td,main table thead th{
	text-align:center;
	padding-right:5px;
}
main table td,main table th{
	padding-top:5px;
	padding-bottom:5px;
}
main table th{
	padding-left:5px;
}
main table tbody tr:nth-child(odd){
	background-color:#f6f6f6;
}
main table tbody tr:nth-child(even){
	background-color:#fff
}

/*width100%解除*/
.wfree table{width:auto;min-width:auto;white-space: nowrap;}
.wfree th{text-align:left;}
.wfree td{ border-left: solid 1px #e6e6e6;}

/*footer
---------------------------------------------------------------------------*/
footer{background-color:#000;padding:25px;color:#fff;margin-top:50px;}

footer p.copyright{font-size:11px;text-align:center;}

/*PCの場合にはメニューを表示させない*/
.for-sp{      display:none;    }


/*上に戻るボタン設定
---------------------------------------------------------------------------*/


/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;
	position: fixed;
	right: 20px;	bottom: 20px;
	color: #fff;
	font-size: 1.5rem;
	background: rgba(0,0,0,0.2);
	width: 40px;
	line-height: 40px;
}

/*マウスオン時*/
.pagetop a:hover {
	background: rgba(0,0,0,0.8);
}

/*折りたたみテキスト
---------------------------------------------------------------------------*/
.grad-wrap {
  position: relative;
}
.grad-wrap + .grad-wrap {
  margin-top: 40px;
}
.grad-btn {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 148px;
  margin: auto;
  padding: .3em 0;
  border-radius: 2px;
  background: #050505;
  color: #F4F5F7;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.grad-btn::after {
  content: "続きを読む"
}
.grad-btn:hover {
  background: #F4F5F7;
  color: #050505;
}
.grad-btn .fa {
  margin-right: .5em;
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 100px;
}
.grad-item p + p {
  margin-top: 1em;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 50px; /*グラデーションで隠す範囲*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
}
.grad-trigger {
  display: none;
}
.grad-trigger:checked ~ .grad-btn {
  bottom: -2.5em;
}
.grad-trigger:checked ~ .grad-btn::after {
  content: "閉じる"
}
.grad-trigger:checked ~ .grad-btn .fa {
  transform: rotate(180deg);
}
.grad-trigger:checked ~ .grad-item {
  height: auto;
}
.grad-trigger:checked ~ .grad-item::before {
  display: none;
}
/*折りたたみテキスト　ここまで
---------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------
1080px以下に適用されるCSS（PCコンテンツ幅以下用）
---------------------------------------------------------------------------*/
@media screen and (max-width: 1080px) {

h2{/*ページタイトル*/
	padding-right:15px;
	padding-left:15px;}
section{margin:auto 15px;}



}


/*---------------------------------------------------------------------------
959px以下に適用されるCSS（タブレット用）
---------------------------------------------------------------------------*/
@media screen and (max-width: 959px) {

/*header
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	padding-top:0px;
}

h1{}

h1 img{	width: 250px;	position:static;padding-top:20px;}

p.contact{float:none;text-align:right; padding-top:10px;padding-right:10px;width:100%; box-sizing:border-box}
p.contact img{width:160px;}

}


/*---------------------------------------------------------------------------
480px以下に適用されるCSS（スマホ用）
---------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {


/*問い合わせバナー表示非表示
---------------------------------------------------------------------------*/
.pc{display:none;}
.sp{display:inline;}
.sp img{vertical-align:top;}/*画像余白調整*/
.cont_bn{width:100%;padding:20px 0;}

/*header
---------------------------------------------------------------------------*/
#headfix{
 position: -webkit-sticky;
  position: sticky;
top: 0;
background-color:#fff;
z-index:2;
}
h1 img{padding-top:5px;}
.head-text{margin-left:0%;padding-top:10px;}
p.contact{display:none;}

/*nav
---------------------------------------------------------------------------*/
.drawer-hamburger {
    padding-top: 15px!important;
    padding-left: 15px!important;
}
.drawer--left.drawer-open .drawer-hamburger {
    padding-left: 5px!important;
}



/*フォント設定
---------------------------------------------------------------------------*/
/*フォントサイズ*/
.fsize11{font-size:9px;}
.fsize18{font-size:16px;}
.fsize21{font-size:18px;}
.fsize25{font-size:20px;}



/*テーブルに横スクロールバーを表示
---------------------------------------------------------------------------*/
.table-scroll {
        overflow-x: scroll;
    }
		
/*並び設定の解除
---------------------------------------------------------------------------*/
.block2 ul{
margin:0px;
}
.block3 li,.block2 li,.block1-2 li,.block1-2 li:nth-child(2n),.block2-1 li,.block2-1 li:nth-child(2n),.block1-4 li,.block1-4 li:nth-child(2n){/*3並び・2並び・1:2並び・1:4並び*/
	width:100%;
	margin:0px;
	padding-bottom:10px;
}

.block2 li p{margin:0px;}

.block4 li{
	width:48%;
	margin-right:4%;
	padding-bottom:10px;
}
.block4 li:nth-child(2n){
	margin:0px;
}

.block4-1_kakaku li{width:100%;margin:0px;}
.block4-1_kakaku li:nth-child(2n){width:100%; text-align:right;padding-bottom:10px;}
/*テーブル幅100%の解除
---------------------------------------------------------------------------*/
main table{
	width:auto;
	white-space: nowrap;

}


/*main（メインブロック）
---------------------------------------------------------------------------*/
section{margin:auto 10px;}


h2{/*ページタイトル*/
	font-size:23px;
	font-weight:600;
	margin:50px 0px;
	padding:0 10px;
}
h3{
	font-size:20px;
	font-weight:900;
	margin:50px 0px;
}
h4{/*中見出し*/
	padding-top:20px;

}



/*section（セクションブロック）
---------------------------------------------------------------------------*/
section p.maintxt{padding-top:20px; font-size:16px;}
section p.txt{padding-top:10px;}



/*footer
---------------------------------------------------------------------------*/
footer{padding:10px 0 60px 0;}


/*上に戻るボタン設定
---------------------------------------------------------------------------*/
/*ボタンの設定*/
.pagetop a {
	position: fixed;
	right: 10px;	bottom: 60px;
}


/*下の固定メニュー
---------------------------------------------------------------------------*/
/*メニューをページ下部に固定*/
.for-sp{display:inline;}
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;

   z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: calc(100%/3);
   padding:0;
   margin:0;
   font-size: 14px;
   font-weight:bold;
   /*border-right: 1px solid #fff;*/
	 background: #b32034;
}

/*左側メニューを緑色に*/
#sp-fixed-menu li:first-child{
   background: #1c8a0b;
}

/*左側メニューをオレンジ色に*/
#sp-fixed-menu li:last-child{
   background: #284d89;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding-top:12px;
   padding-bottom:10px;
}


}