/*--------------------------------------------------------------
Theme Name: taniplate HP
	Author: S.Tanio
	Author URI:
--------------------------------------------------------------*/
@charset "UTF-8";
/*--------------------------------------------------------------
必須項目
--------------------------------------------------------------*/
/* フォント */
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

/* カスタムプロパティなど定義 */
@import url("./root.css");

/*--------------------------------------------------------------
オプションの読み込み
--------------------------------------------------------------*/
@import url("./hamburger-side.css");/* ハンバーガーメニュー */
/*@import url("./contact-form-7.css");*//* Contact Form 7カスタマイズ */
@import url("./contact-form-7.css");/* MW WP Form カスタマイズ */
/*--------------------------------------------------------------
メモ
<a>タグは個別に設定しない限り、全体設定にて"block"要素にしている。
フォントサイズはremで指定する。1rem=16rem
レスポンシブによる値の切り替えはroot.cssに記述する。
文字色は不透明で、背景色だけ透過(透明)させたい時もこれ

background-color: transparent;
または
background-color:rgba(0,0,0,0);
--------------------------------------------------------------*/

/*--------------------------------------------------------------
各デフォルト設定
--------------------------------------------------------------*/
/* htmlタグ(後で設定されたもので上書きされる)
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	font-size: 62.5%;
	/*scroll-behavior: smooth;*/
}
/* bodyタグ(後で設定されたもので上書きされる)
--------------------------------------------------------------*/
body {
	color: #000000;		/* 文字色 */
	font-family: "Noto Sans JP",'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
						/* フォントの種類 */
	background:#FFFFFF;	/* 背景色 */
	font-size:1.6rem;	/* 16px*/
	line-height: 1.7;		/* 行間 */
	font-weight: 400;	/* フォントの太さ */
	margin:0;
	padding:0;
}
html, body {
	height: 100%;
	margin: 0;
}
/* hタグの設定(後で設定されたもので上書きされる)
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 1rem;
	letter-spacing: 0.1em; /* 水平方向字間スペース */
	font-weight: normal;
}

/* 文字サイズ、行間、水平方向字間スペース
rem:ルート要素のフォントサイズを基準とした相対的な値
--------------------------------------------------------------*/
h1 { font-size: 3.2rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 2.9rem;line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 2.8rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

@media (min-width: 550px) {
	h1 { font-size: 3.0rem; }
	/*h2 { font-size: 2.8rem; }*/
	h3 { font-size: 2.5rem; }
	h4 { font-size: 2.0rem; }
	h5 { font-size: 1.8rem; }
	h6 { font-size: 1.5rem; }
}
h1 {
	font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
	line-height: 1.3;
}
.h2 {
	font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
	line-height: 1.3;
}
@media screen and (max-width: 640px) {  /* 640px以下*/
	h2 { font-size: 2.0rem; }
	h3 { font-size: 2.0rem; }
}
/* @media スタイルシートを適用する条件 */
@media (min-width: 1200px) {            /* 1200px以上*/
    h1 {
        font-size: 3.6rem;              /* 36px */
    }
    .h2 {
        font-size: 2.4rem;              /* 24px */
    }
}
@media screen and (max-width: 640px) {  /* 640px以下*/
	body{
		line-height: 2;
	}
	h1{
		font-size: 2.4rem;              /* 24px*/
	}
	.h2 {
		font-size: 2rem;                /* 20px*/
	}
}

/* 基本画像設定 */
img {
	max-width:100%;                     /* 最大幅 */
	height: auto;                       /* 高さ自動 */
	z-index: 2;
}
/* 線
--------------------------------------------------------------*/
hr {
	border-width: 0;
	border-top: 1px solid #E1E1E1; 
}
@media screen and (max-width: 960px){
	hr {
		margin-top: 0.5rem;
		margin-bottom: 0.8rem;
		border-width: 0;
		border-top: 1px solid #E1E1E1; 
	}
}
.dotted-line {
	border-bottom: 2px dotted #000000;
}
.dotted-line-w {
	border-bottom: 2px dotted #FFFFFF;
}
/*.line-black line-xx のクラスは削除しておく */

/* このクラスを設定するとアンダーライン表示 */
.under-line {
	border-bottom: 2px solid /*#0cb4af;*/ #191970;
}
/* このクラスを設定するとアンダーライン表示 */
.under-line-white {
	border-bottom: 2px solid white;
}

/* aタグ(基本設定)
--------------------------------------------------------------*/
a {
	/*color: #0080FF;*/
	text-decoration-line: none;
}
/*
a:hover {
	color: #0FA0CE;
}
*/
a,
a:visited,
a:hover,
a:active {
	color: inherit;
}

/*--------------------------------------------------------------
レスポンシブ設定
--------------------------------------------------------------*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
/*.pc { display: block !important; }*/      	/* PC表示 */
/*.pc-tablet { display: none !important; }*/	/* PC-タブレット表示 */
.tablet-sp { display: none !important; }
.sp { display: none !important; }				/* スマホ表示 */

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media screen and (max-width: 960px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}
@media screen and (max-width: 768px) {
	.pc-tablet { display: none !important; }
    .tablet-sp { display: block !important; }
}

@media screen and (max-width: 960px){
	.sp-hidden {
		display: none;
	}
}
@media screen and (min-width: 960px){
	.pc-hidden {
		display: none;
	}
}
@media screen and (min-width: 768px){
	.sp-only {
		display: none;
	}
}
@media screen and (max-width: 1080px){
	.access-hidden {
		display: none;
	}
}

/*--------------------------------------------------------------
ボタン
--------------------------------------------------------------*/
.round-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px; /* テキストとアイコンの間隔 */
	padding: 12px 24px;
	border: 1px solid #ccc;
	border-radius: 9999px; /* カプセル型 */
	background: #fff;
	color: #003366;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
	width: 280px; /* 任意：幅を固定したい場合 */
	margin: 20px auto; /* 中央寄せ */
}
.round-button:hover {
	background: #f5f5f5;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.btn-text {
	flex: 1; /* テキストを中央に */
	text-align: center;
}
.btn-icon i {
	color: #0066b3; /* アイコン色 */
	font-size: 14px;
}

.round-button.orange-color {
	background: #fb8c00;
	color: #fff;
	font-weight: bold;
}
.btn-icon.orange-color i {
	color: #fff; /* アイコン色 */
	font-size: 14px;
}
/*--------------------------------------------------------------
ヘッダー用
構成
	header
		id="header-wrapper"
			id="header-main"
				"header-logo"
	みたいな感じになっている
--------------------------------------------------------------*/
header {
	/* 追従ヘッダーメニュー用 追従させない場合は全部無効にする */
	/* 基本変更しない ここから */
	position: fixed;
	width: 100%;
	top: 0;
	left:0;
	height: auto;
	z-index: 9999;
	/* 基本変更しない ここまで */
	/* 常時上に表示しない場合は全部無効にする ここまで */
	background-color: white;
}
/* ヘッダーサイズ設定 */
#header-wrapper {
	position: relative;
	max-width: var(--width-header-area);
	height: var(--height-header-area);
	margin: 0 auto;
	padding: 0px 0px 0px 0px;/* 上右下左 */
}
@media screen and (max-width: 768px ) {
	#header-wrapper {
		display: flex;
		align-items: center;   /* 縦方向中央揃え */
		justify-content: space-between; /* 左右に分ける */
		gap: 10px; /* 大きい画像と小さい画像群の間に余白 */
		padding: 0;
	}
}


#header-main {
	max-width: 1200px;
	height:100%;
	display: flex;
	margin: 0 auto;
	align-items: center;  /* ←縦中央配置 */
	justify-content: center; /* ←必要なら横中央も */
}

/* ヘッダーの一番上のテキストエリア */
.header-text {
	position: absolute;
	display: none;
	background-color: transparent;
}
/*--------------------------------------------------------------
ヘッダー用ロゴ画像
--------------------------------------------------------------*/
/* ヘッダーロゴエリア */
.header-logo {
	display: block;
	height: 100%;
	padding: 10px;
	z-index: 1;
}
/* ヘッダーロゴ・リンク */
.header-logo a {
	display: block;
	max-width: initial;
	height: 100%;
}
/* ヘッダーロゴ画像 */
.header-logo img {
	max-width: initial;
	height: 100%;
	object-fit: cover;
}

/* スマホ表示 */
@media screen and (max-width: 768px ) {
	.header-logo {
		height: auto;
		margin-top: auto;
		z-index: 1;
	}
	.header-logo img {
		width: 150px;
		height: auto;
		padding-top: 10px;
	}
}

.header-logo-sp {
	display: none;
	height: auto;/*90px;*/
	padding: 10px;
	/*margin-top: 30px;*/
	z-index: 1;
}
/* ヘッダーロゴ画像サイズ */
.header-logo-sp img {
	max-width: initial;
	height: 100%;
	object-fit: cover;
}

/* スマホ表示 */
@media screen and (max-width: 768px ) {
	.header-logo-sp {
		display: block;
		height: 100%;
		margin-top: auto;
		z-index: 1;
	}
	.header-logo-sp img{
		width: auto;
		height: 100%;
		padding-top: 0px;
	}
}


/* ヘッダーロゴエリア */
/* ハンバーガーメニュー用 */
.header-logo-ham {
	display: block;
	height: auto;/*90px;*/
	padding: 10px;
	/*margin-top: 30px;*/
	z-index: 1;
}
/* ヘッダーロゴ画像サイズ */
.header-logo-ham img{
	max-width: initial;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* スマホ表示 */
@media screen and (max-width: 768px ) {
	.header-logo-ham {
		height: auto;
		margin-top: auto;
		z-index: 1;
	}
	.header-logo-ham img{
		width: 100%;
		height: auto;
		padding-top: 10px;
	}
}

/*--------------------------------------------------------------
ヘッダー用お問い合わせボタン設定
--------------------------------------------------------------*/
.header-right-icon {
	padding: 0px 10px 0px 0px;
}
.header-right-icon img {
	display: flex;
	width: 24px;
	max-width: initial;
	height: 24px;
}
.header-contact-btn {
	display: flex;
	width: 160px;
	height: 38px;
	font-size: 16px;
	line-height: 34px;
	/* 右寄せ */
	/*margin-left: auto;	margin-right: 0;*/
	padding-top: 0px;
	padding-left: 0px;
	margin-right: 10px;
	/*vertical-align: middle;*/
	color: white;
	background-color: black;/*var(--contact-button-color);*//*#4169e1;*//*#EA9720;*/
	border-radius: 50px;
	z-index: 99;
}
.header-contact-btn:hover {
	opacity: 0.6;
}
.header-contact-btn::before{
	position: absolute;
	/*content: url(../img/icon-mail.png);*//* メール用アイコン */
	content: url(../img/mail-mini.png);/* iPhoneアイコン(白) */
	margin-left: 16px;
	margin-top: 3px;
	pointer-events: none;
	height: 24px;
}
.header-contact-btn-sp {
	display: none;
}
/* レスポンシブ設定 */
@media only screen and (max-width: 1100px) {
	.header-contact-btn {
		width: 24px;
		display: none;
	}
	.header-contact-btn-sp {
		display: block;
	}
}
@media only screen and (max-width: 768px) {
	.header-contact-btn {
		font-size: 20px;
		line-height: 30px;
		padding-left: 0px;
	}
	.header-contact-btn::before{
		position: absolute;
		content: url(../img/mail-mini.png);
		margin-left: -66px;
		margin-top: 32px;
	}
}
.header-contact-btn a {
	display: block;
	width: 100%;
	height: 100%;
	padding-top: 0px;
	padding-left: 42px;
	color: inherit;
}
.header-contact-btn a:visited {
	color: inherit;
}
.header-contact-btn a:hover {
	color: inherit;
}
/*--------------------------------------------------------------
スマホ用ヘッダーボタンコンテナ
--------------------------------------------------------------*/
.top-btn-container {
	display: flex;
	gap: 6px;
}
@media only screen and (max-width: 768px) {
	.top-btn-container {
		padding-right: 60px;
	}
}
/*--------------------------------------------------------------
スマホ用問い合わせボタン(ヘッダー用)
--------------------------------------------------------------*/
.top-contact-btn {

	width: 42px;/*72px;*/
	height: 35px;/*50px;*/
	z-index: 1000;
	align-items: center;/* 配置 */
	cursor: pointer;/* カーソル */
	background-color: var(--contact-button-color);/*#4169e1;*/
	border-radius: 5px;/* ボーダー設定ラウンド指定 */

}
.top-contact-btn img {
	margin-top: 3px;
}
/*--------------------------------------------------------------
スマホ用電話ボタン(ヘッダー用)
--------------------------------------------------------------*/
.top-tel-btn {
	width: 42px;/*72px;*/
	height: 35px;/*50px;*/
	z-index: 1000;
	align-items: center;/* 配置 */
	cursor: pointer;/* カーソル */
	background-color: var(--contact-button-color);/*#4169e1;*/
	border-radius: 5px;/* ボーダー設定ラウンド指定 */

}
.top-tel-btn img {
	margin-top: 3px;
}
/*--------------------------------------------------------------
スマホ用SNSボタン(ヘッダー用)
--------------------------------------------------------------*/
#top-sns-btn {
	width: 42px;/*72px;*/
	height: 35px;/*50px;*/
	z-index: 1000;
	align-items: center;/* 配置 */
	cursor: pointer;/* カーソル */
	color: var(--sns-button-font-color);
	background-color: var(--sns-button-color);
	border-radius: 5px;/* ボーダー設定ラウンド指定 */

}
#top-sns-btn img {
	margin-top: 3px;
}
/* ヘッダートップSNSメニュー中身 */
#top-sns-menu {
	position: absolute;
	top: 70px;
	right: 0;
	/*transform: translate(280px);*/
	transform: translateX(100%); /* ← auto幅でもOK */
	transition: all .5s;
	/*width: 280px;*/
	width: auto;
	height: auto;
	padding: 0 20px 20px 20px;
	text-align: center;
	border: 2px solid #4169e1;
	background-color: white;
}
#top-sns-menu.open {
	/*transform: translate(0);*/
	transform: translateX(0);
}
.header-top-sns-menu {
	float: right;
    /*position: absolute;*/
	overflow: hidden;
    /*width: 680px;*/
    height: 35px;
    padding: 0 20px;
	white-space: nowrap; /* 改行禁止 */
	text-align: center;
	/*border-bottom: 1px solid #CCCCCC;*/
	background-color: transparent;
}
/* <ul>箇条書きリスト */
.header-top-sns-menu ul {
    display: flex;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100%;
	text-align: center;
    justify-content: center;
    align-items: center;
}
/* <ul>の内容を<li>で記載 */
.header-top-sns-menu ul li {
	display: table-cell;/* 親の<ul>がtableなので、table-cellとして表示 */
	/*min-width: 100px;*//* メニュー1項目の最低サイズ */
	height: 100%;
    padding: 0px 10px;
	/*border-right: 1px solid #CCCCCC;*/
}
/* <ul><li>の中の<a>に適用 */
.header-top-sns-menu ul li a {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	text-decoration: none;
	color: #000000;
}
.header-top-sns-menu ul li a img{
	display: flex;
	height: 30px;
	align-items: center;
}
/*--------------------------------------------------------------
グローバルメニュー(主にヘッダー用)
--------------------------------------------------------------*/
/* 注意 */
/* WPのメニュー設定で名前をheadにすること←しなくていいように修正した */
/* またfunction.phpでglobal-menuをメニューに定義しておくこと */
/* レスポンシブ設定 */
/* ヘッダーメニュー */
@media screen and (max-width: 960px ) {
	.global-menu {
		display: none;/*指定幅以下では使用しない */
	}
}
.global-menu {
	width: 100%;/*830px;*/
	max-width: 830px;
	height: 100%;
	padding: 0 10px;
	font-size: 14px;
	/*border-bottom: 1px solid #CCCCCC;*/
	white-space: nowrap; /* 改行禁止 */
	overflow: hidden;
}
.global-menu ul/*#menu-head*/ {/* <ul>箇条書きリスト */
	display: table;
	width: auto;/*80%;*//* メニューの幅 */
	height: 70px;
	/*margin-left: auto;*//* 右寄せ */
	margin: 0 auto;/* 中央寄せ */
	padding: 0;
}
.global-menu ul/*#menu-head*/ li {
	display: table-cell;/* 親の<ul>がtableなので、table-cellとして表示 */
	height: 100%;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}
.global-menu ul/*#menu-head*/ li a {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	padding: 0 20px;
	text-decoration: none;
	color: #000000;
	justify-content: center; /*左右中央揃え*/
	align-items: center;/*縦中央揃え*/
}
.global-menu ul/*#menu-head*/ li a:hover {
	color: #fff;
	background-color: #000;
}
/* 下線のアニメーションを ::after で作る */
/* 使用しない場合は「-global-menu」にしておく。使用する場合は「.global-menu」に戻す */
.-global-menu ul/*#menu-head*/ li a span{
	position: relative;
	display: inline-block;
}
.-global-menu ul/*#menu-head*/ li a span::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}
/* ホバー時にアニメーション実行 */
.-global-menu ul/*#menu-head*/ li a:hover span::after {
	transform: scaleX(1);
}


.-global-menu ul li.current {
	font-weight: bold;
}
.-global-menu ul li.current a {
	/*border-bottom: 5px solid #FFCCCC;*/
	color: #000000;
}
/* メニュー項目の左右に線を引く */
.-global-menu ul/*#menu-head*/ li:first-child{
	/*line-height: 40px;*/
	border-left:0px solid #D5D5D5;
}
.-global-menu ul/*#menu-head*/ li{
	/*line-height: 40px;*/
	border-right: 0px solid #D5D5D5;
}


/* サブメニュー(第2階層メニュー) */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0s ease;
	z-index: 998; /* メニューより下、でも他の要素より上 */
}
#-header-main .sub-menu {
	position: relative;
	/*width: 100%!important;*/
	width: 960px!important;
	padding: 10px 25px 50px 25px!important;/*0!important;*/
	/*margin-left: 0px!important;*/
	margin: 0 auto!important;
	border: 1px solid black!important;
}
/* 矢印 */
#-header-main .sub-menu:before {
  content: "";
  position: absolute;
  top: -29px;
  left: 50%;
  margin-left: -310px;
  border: 15px solid transparent;
  border-bottom: 15px solid black;
  z-index: 0;
  pointer-events: none;
}
#-header-main .sub-menu li {
	/*width: 100%!important;*/
	/*max-width: 100%!important;*/
	height: 30px!important;
	font-size: 18px!important;
	line-height: 30px!important;
	text-align: left!important;
	color: black;
	/*background-color: black;*/
	border: 0px solid black!important;
}
#-header-main .sub-menu li a {
	width: auto!important;
	padding-top: 10px!important;
	padding-left: 10px!important;
	padding-bottom: 15px!important;
	color: black!important;
	height: 40px;/*100%;*/
}
#-header-main .sub-menu li a:hover {
	color: black!important;
	background-color: white;
	transition: 0.6s;/* 表示変更にかかる時間 */
}

/*--------------------------------------------------------------
!ヘッダー右のSNS等のボタンエリア
--------------------------------------------------------------*/
.header-sns-menu {
	/*width: 100%;*/
	max-width: 300px;
	display: flex;
	align-items: center;  /* ←縦中央配置 */
	justify-content: end; /* ←必要なら横中央も */
}
@media screen and (max-width: 960px ) {/* スマホ表示 */
	.header-sns-menu {
		justify-content: center; /* ←必要なら横中央も */
		padding-left: 20px;
	}
}
/*--------------------------------------------------------------
!ニー設定
--------------------------------------------------------------*/
#knee {
	width: 100%;
	height: auto;
	/*background: linear-gradient(to right, #6fd0c2, #179b87);*/ /* 背景グラデーション */
	/*background: linear-gradient(to right, #185790, #144777);*/ /* 背景グラデーション */
	background: linear-gradient(to bottom, #185790, #144777); /* 背景グラデーション */
	padding: 40px 20px;
	/*background-image : url(../img/bg-knee.jpg);*/
	/*background-position: top right;*/

	/* 背景画像を半透明にする場合は下記2つを有効に */
	/*background-color:rgba(55,55,55,0.8);*//* 最後の数字が透明度 1で見えなくなる */
	/*background-blend-mode:color;*/
}
.contact-title p {
	margin: 0;
	font-size: 24px;
  	text-align: center;
	color: #fff;
}
.contact-container {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 30px;
	flex-wrap: wrap; /* レスポンシブ用 */
	text-align: center;
	color: #fff;
}
.contact-box {
	background: #fff;
	color: #333;
	padding: 20px;
	border-radius: 6px;
	flex: 1 1 300px;
	max-width: 600px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.contact-heading {
	font-weight: bold;
	margin-bottom: 10px;
}
.contact-phone a {
	font-size: 30px;
	font-weight: bold;
	color: #00bcd4;
	text-decoration: none;
}
.contact-time {
	font-size: 14px;
	margin-top: 8px;
}
.contact-btn {
	display: inline-block;
	margin-top: 15px;
	padding: 10px 20px;
	background: #ea7a5a;/*#ffa726;*/
	color: #fff!important;
	border-radius: 4px;
	text-decoration: none;
	font-weight: bold;
	transition: background 0.3s;/* BGカラー変更時間 */
}
.contact-btn:hover {
	background: #fb8c00;
}
@media screen and (max-width: 768px ) {/* スマホ表示 */
	.contact-title p {
		font-size: 1.6rem;
	}
}
/*--------------------------------------------------------------
!フッター設定
--------------------------------------------------------------*/
footer {
	width: 100%;
	background: linear-gradient(to right, #111, #333); /* 背景グラデーション */
}
.site-footer {
	/*background: linear-gradient(to right, #111, #333);*/ /* 背景グラデーション */
	color: #fff;
	padding: 40px 20px;
	font-size: 14px;
}
.footer-inner {
	max-width: var(--width-footer-area);
	margin: 0 auto;
	display: flex;            /* 横並びにする */
	justify-content: space-between;
	/*gap: 40px;*/
	/*flex-wrap: wrap;*/
}

/* 幅割合設定 */
.footer-col {
	flex: 1;                  /* 均等幅 */
}
.footer-left {
	flex: 0 0 15%;
}
.footer-center {
	flex: 0 0 40%;
	padding: 0 40px;
}
.footer-right {
	flex: 0 0 45%;
}
.footer-left img {
	/*max-width: 180px;*/
	height: 200px;
	margin-bottom: 10px;
}
.fotter-nav-title {
	border-bottom: 1px solid #c7c7c7;
	color: #fff;
	display: block;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 3px;
	padding: 10px 0;
	margin-bottom: 1rem;
	text-transform: uppercase;/* 大文字表示 */
}
.footer-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-menu li {
	margin-bottom: 8px;
}
.footer-menu a {
	color: #fff;
	text-decoration: none;
}
.footer-menu a:hover {
	text-decoration: underline;
}
.footerFixed {
	min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
	position: relative;/* ←相対位置 */
	padding-bottom: var(--footer-main-height);/*350px;*/ /* ←フッターの高さを指定 */
	box-sizing: border-box;
	/* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */
}
@media screen and (max-width: 960px ) {/* スマホ表示 */
	footer {
		text-align: center;
	}
	.footerFixed {
		padding-bottom: 20px; /* ←フッターの高さを指定 */
	}
}

@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
.footer-center {
display: none;
}
  .footer-left,
  .footer-right {
    flex: 1 1 100%;
    max-width: 500px;
    margin-bottom: 20px;
  }
}



/* フッターSNSメニュー */
.footer-sns {
	overflow: hidden;
	white-space: nowrap; /* 改行禁止 */
	text-align: center;
	padding-bottom: 20px;
	/*background-color: #FFFFFF;*/
}
/* <ul>箇条書きリスト */
.footer-sns ul {
	/*display: table;*//* tableで表示 */
    display: flex;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	text-align: center;
    justify-content: center;
    align-items: center;
}
/* <ul>の内容を<li>で記載 */
.footer-sns ul li {
	display: table-cell;/* 親の<ul>がtableなので、table-cellとして表示 */
    padding: 5px 10px;
}
/* <ul><li>の中の<a>に適用 */
.footer-sns ul li a {
	display: flex;
	width: 100%;
	align-items: center;
	text-decoration: none;
}
.footer-sns ul li img{
	display: flex;
	align-items: center;
}

/*--------------------------------------------------------------
コピーライト部分
--------------------------------------------------------------*/
.copyright{
	overflow: hidden;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	padding: var(--default-padding);
	padding-bottom: 0px;
	color: var(--copyright-font-color);
	background-color: var(--copyright-color);
}

/*--------------------------------------------------------------
追従-TOPへ戻るボタン
--------------------------------------------------------------*/
#pagetop {
	position: fixed;
	bottom: 15px; /* 下からの位置 */
	right: 15px; /* 右からの位置 */
	z-index: 100; /* Zパラメータ */
}
#pagetop a {
	display: block;
	width: 75px;
	height: 75px;
	padding: 10px 5px;
	padding-top: 70px;
	text-align: center;/* 中央寄せ */
	/*border: solid 2px #000000;*/
	color: #000000;
	z-index: 100;
	/*background: #FFFFFF;*/
	background-image : url(../img/pagetop.png);
	background-repeat: no-repeat;
	background-position: center;
}
/* ホバー設定 */
#pagetop a:hover {
	/*background: #BC8F8F;/* 背景色 */
	z-index: 100;
}
#pagetop.close {
	display: none;
}
@media screen and (max-width: 960px) { 
	#pagetop a {
		width: 75px;/* 幅 */
		height: 75px;
		padding: 10px 5px;
		padding-top: 30px;
		background-image : url(../img/pagetop.png);
	}
}
@media (max-width: 768px) {
		#pagetop a {
		width: 50px;/* 幅 */
		height: 50px;
		padding: 10px 5px;
		padding-top: 30px;
		background-size: contain;
	}
}
.site-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* 画面の高さいっぱい */
}
/*--------------------------------------------------------------
!main(メインタグ)
--------------------------------------------------------------*/
/* 常時上にヘッダー表示する場合のマージン */
main {
	margin-top: var(--height-header-area);
	flex: 1;
}
/*--------------------------------------------------------------
フロントページ各セクション用
汎用性に欠けるので注意
display: flex; 親要素がflexだと子は横に並ぶ
--------------------------------------------------------------*/
/*--------------------------------------------------------------
!ボタン
--------------------------------------------------------------*/
.front-btn {
	display: table-cell;
    position: relative;
	width: var(--front-btn-width);/*328px;*/
	height: 60px;
	font-size: 1.5rem;/* 18px */
	text-align: center;
	vertical-align: middle;
	color: #FFFFFF;
	background-color: #1B97BB;
	border-radius: 0px;
	margin: auto;
	z-index: 10;
}
.front-btn::after {
	position: absolute;
	content: url(../img/link.png);
	left: 90%;
}




/* 1カラムで使用するボタン(基本ボタン) */
.wrap-1column-btn {
	display: inline-block;
	overflow: hidden;
	width: var(--width-1column-btn);
	height: 60px;
	font-size: 1.5rem;/* 18px */
	line-height: 58px;/* heightと同じにする→微調整する */
	text-align: center;
	color: var(--button-text-color);
	background-color: var(--button-color);
	border: solid 1px var(--button-text-color);
	border-radius: 50px;
	letter-spacing: 0;
}
.wrap-1column-btn:hover {
	color: var(--button-color);
	background-color: var(--button-text-color);
}
.wrap-1column-btn a {
	display: block;
}
/* ホームへ戻るボタンの上下のスペース用 */
.return-home-top-space {
	height: 60px;
}
.return-home-bottom-space {
	height: 60px;
}
.btn-around2 {
	width: auto;
	height: auto;
	padding: 50px 0px 50px 0px;/* 上右下左 */
}
.btn-center {
	transform:translate(-50%,0);
}

/* ページ最下部のボタンとkneeエリアまでのマージン */
.page-under-btn {
	margin-bottom: 90px;
}


/*--------------------------------------------------------------
テキスト用
--------------------------------------------------------------*/
/* 16px=1rem */
/* 62.5%なので 1rem=10px */
.orange-text{
	color: orange;
}

/* -------------------------------------------------------------
パンくずリスト
------------------------------------------------------------- */
.pankuzu-list {
	display: block;
	max-width: var(--pankuzu-list-width);
	height: 40px;
	overflow: hidden;
	font-size: 15px;/*0.9375rem;*/
	line-height: 29px;
	font-weight: 700;
	margin: 0 auto;
	color: black;
	/*background-color: var(--button-color);*/
}
/* レスポンシブ設定 */
@media screen and (max-width: 768px) {
	.pankuzu-list {
		height: auto;
	}
}
/* テキスト設定用 */
.text-pankuzu {
	font-size: 15px;/*0.9375rem;*/
	line-height: 29px;
	font-weight: 700;
}

/* -------------------------------------------------------------
各ページの上部メインタイトル
------------------------------------------------------------- */
.main-title {
	position: relative;
	display: flex;
	width: 100%;
	/*max-width: var(--width-max-wrap);*/
	height: 300px;
	overflow: hidden;
	padding-top: 118px;
	/*font-family: "Noto Serif JP", sans-serif;*//* フォント指定 */
	font-family: "Noto Sans JP",'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
						/* フォントの種類 */
	text-align: center;
	justify-content: center;/*start; 開始位置 */
	color: white;/*#EA7620;*//*#005BAC;*/
	/*background-color: var(--page-title-color);*/
	background-image : url(../img/page_title.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100%;
	/* 背景画像を半透明にする場合は下記2つを有効に */
	background-color:rgba(0,0,0,0.5);/* 最後の数字が透明度 1で見えなくなる */
	background-blend-mode:color;
}
/* 背景画像を半透明にする場合は有効に */
/*
.main-title::after {
	content: '';
	background-color: rgba(29,124,240,0.9);//不透明度と色設定
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
*/
.main-title h1,
.main-title span{
	/*position: relative;*/
	z-index: 1;
	text-align: center;
	margin-bottom: 0;
}
.main-title h1 {
	height: 40px;
	font-size: 32px;
}
.main-title span{
	position: absolute;
	top: 58%;
}
/* アイコン用 */
.main-title img {
	height: 36px;
	margin-left: -36px;
	padding-right: 10px;
}
/* レスポンシブ設定 */
@media screen and (max-width: 768px) {
	.main-title {
		height: 100px;
		padding-top: 25px;
	}
	.main-title h1 {
		font-size: 20px;
	}
	.main-title span {
		font-size: 14px;
	}
	.main-title img {
		height: 28px;
		margin-left: -36px;
		padding-right: 10px;
	}
}
.main-title p {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 3em;
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
	white-space: nowrap;
	letter-spacing: 12px;
}

/* -------------------------------------------------------------
!フロントページ
------------------------------------------------------------- */
/* -------------------------------------------------------------
!イントロセクション
------------------------------------------------------------- */
.intro-section {
	/*background-color: #6fd0c2;*/ /* 背景色 */
	/*background: linear-gradient(to right, #6fd0c2, #179b87);*/ /* 背景グラデーション */
	background: linear-gradient(to bottom, #185790, #144777); /* 背景グラデーション */
	color: white;
	padding: 60px 20px;
}

.intro-container {
	display: flex;
	max-width: var(--width-main-wrap);
	margin: 0 auto;
	gap: 40px;
	align-items: flex-start;
}

.intro-text {
	flex: 1;
}

.intro-text h2 {
	font-size: 32px;
	margin-bottom: 20px;
	line-height: 1.4;
}

.intro-text p {
	font-size: 16px;
	line-height: 1.8;
}

.intro-images {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr; /* 2列固定 */
	gap: 20px;
}

.intro-images img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	object-fit: cover;
	aspect-ratio: 4 /3;
}

/* =========================
   レスポンシブ対応
========================= */
@media (max-width: 960px) {
	.intro-container {
		flex-direction: column;  /* 縦並びにする */
	}

	.intro-images {
		grid-template-columns: 1fr 1fr; /* スマホでも2×2のまま */
	}
}

/* -------------------------------------------------------------
!フューチャーセクション
------------------------------------------------------------- */
.features-section {
	background-color: #fff; /* 背景色 */
	/*background: linear-gradient(to right, #6fd0c2, #179b87);*/ /* 背景グラデーション */
	padding: 60px 20px;
}

.features-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	max-width: var(--width-main-wrap);
	margin: 0 auto;
	/*padding: 40px 20px;*/
	text-align: center;
}

.feature-item {
	display: grid;
	grid-template-rows: auto 1fr auto; /* h3, p, 画像の高さを揃える */
	gap: 10px;
	background: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.feature-item {
	display: flex;
	flex-direction: column;
	align-items: stretch; /* 子要素を同じ幅で揃える */
	text-align: center;
	padding: 20px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.feature-item span {
	flex: 0 0 60px; /* 高さを固定（例: 60px） */
	display: flex;
	font-size: 1.6rem;
	margin-bottom: 15px;
	color: #333;
	align-items: center; /* 縦中央揃え */
	justify-content: center;
}

.feature-item img {
	width: 100%;
	height: auto;
	margin-bottom: 15px;
	border-radius: 8px;
	box-shadow: 0 6px 15px rgba(0,0,0,0.15);
	object-fit: cover;
	aspect-ratio: 4 /3;
}

.feature-item p {
	flex: 1; /* 残りスペースを使って高さ揃え */
	font-size: 1.6rem;
	line-height: 1.6;
	color: #444;
	text-align: left;
}

/* =========================
   レスポンシブ対応
========================= */
@media (max-width: 768px) {
	.features-container {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------
!ビデオセクション
------------------------------------------------------------- */
.video-section {
	background-color: #000; /* 背景色 */
	/*background: linear-gradient(to right, #6fd0c2, #179b87);*/ /* 背景グラデーション */
	padding: 60px 20px;
}
.video-container {
	max-width: var(--width-main-wrap);
	margin: 0 auto;
	/*padding: 40px 20px;*/
	text-align: center;
	background: #000;
}
.video-section h2 {
	font-size: 1.8rem;
	margin-bottom: 20px;
}
.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9比率 */
	height: 0;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* -------------------------------------------------------------
!説明(explanation)セクション
------------------------------------------------------------- */
.explanation-section {
	/*background: linear-gradient(to bottom, #7ad6e2, #4eb36a);*//* 背景色 */
	background: linear-gradient(to bottom, #185790, #144777); /* 背景グラデーション */
	/*background: linear-gradient(to right, #6fd0c2, #179b87);*/ /* 背景グラデーション */
	padding: 60px 20px;
}
.explanation-container {
	display: flex;
	max-width: var(--width-main-wrap);
	margin: 0 auto;
	color: #fff;
	align-items: center;
	justify-content: center;
	gap: 50px;
}

.section-image {
	flex: 0 0 35%;
	max-width: 35%;
	text-align: center;
}

.section-image img {
	max-width: 100%;
	height: auto;
}

.section-text {
	flex: 0 0 65%;
	max-width: 65%;
}

.section-text h2 {
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 15px;
	line-height: 1.4;
}

.section-text p {
	font-size: 17px;
	line-height: 1.8;
}

/* =========================
   レスポンシブ対応
========================= */
@media (max-width: 768px) {
	.explanation-container {
		flex-direction: column;
		text-align: left;
	}
	.section-image,
	.section-text {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* -------------------------------------------------------------
!カードセクション
------------------------------------------------------------- */
.card-section {
	background: #f2f2f2;
	padding: 60px 20px;
}
.card-title {
	font-size: 26px;
	font-weight: bold;
	text-align: center;
}
.card-container {
	display: grid;
	max-width: var(--width-main-wrap);
	margin: 40px auto 0;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.card {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
}
.card img {
	display: none;
	width: 100%;
	height: 200px;
	object-fit: cover;
}
.card h3 {
	font-size: 18px;
	font-weight: bold;
	margin: 20px 20px 10px;
	min-height: 50px; /* ここで高さを揃える */
	display: flex;
	align-items: center; /* テキストを上下中央に */
}
.card p {
	font-size: 15px;
	line-height: 1.8;
	margin: 0 20px 20px;
	color: #333;
}

/* =========================
   レスポンシブ対応
========================= */
/* タブレット (2列) */
@media (max-width: 900px) {
	.card-container {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* スマホ (1列) */
@media (max-width: 600px) {
	.card-container {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------
!プロダクトセクション
------------------------------------------------------------- */
.product-section {
	background: linear-gradient(to right, #111, #333);
	color: #fff;
	padding: 40px 20px;
}

.product-container {
	max-width: var(--width-main-wrap);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

.product-text {
	/*flex: 1 1 500px;*/
	flex: 0 0 45%;
	max-width: 45%;
	text-align: center;
}

.product-logo {
	height: 40px;
	margin-bottom: 30px;
}

.product-text p {
	font-size: 24px;
	line-height: 1.8;
	margin-bottom: 30px;
}

.product-btn {
	display: inline-block;
	padding: 12px 25px;
	/*background: linear-gradient(to right, #7fffd4, #4caf50);*/
	background: #185790;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	border-radius: 4px;
	transition: opacity 0.3s;
}

.product-btn:hover {
	/*opacity: 1.0;*/
	background: #3373ae;
}

.product-image {
	/*flex: 1 1 500px;*/
	flex: 0 0 55%;
	max-width: 55%;
	text-align: center;
}

.product-image img {
	max-width: 100%;
	height: auto;
}
/* =========================
   レスポンシブ対応
========================= */
@media (max-width: 768px) {
	.product-container {
		flex-direction: column;
		text-align: center;
	}
	.product-text,
	.product-image  {
		max-width: 100%;
	}
}

/* -------------------------------------------------------------
セクション基本設定
------------------------------------------------------------- */
/* フロントTOPセクション用設定 */
.front-top-section {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding: 48px 0px 80px 0px;/* 上右下左 */
}
@media screen and (max-width: 768px) {
	.front-top-section {
		padding: 10px 0px 20px 0px;/* 上右下左 */
	}
}
/* フロントセクション用基本クラス各設定 */
.front-basic-section {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding: 56px 0px 80px 0px;/* 上右下左 */
}
@media screen and (max-width: 768px) {
	.front-basic-section {
		padding: 28px 0px 40px 0px;/* 上右下左 */
	}
}
.front-basic-section ._title {
	margin-bottom: 30px;
}
.front-basic-section ._text {
	margin-bottom: 0px;
}
.front-basic-section ._button {
	margin-top: 0px;
}
/* 各ページ用基本クラス各設定 */

/* アーカイブ用基本クラス各設定 */
.archive-basic-section {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding: 24px 0px 80px 0px;/* 上右下左 */
}
.archive-basic-section ._title {
	margin-bottom: 30px;
}
.archive-basic-section ._text {
	margin-bottom: 0px;
}
.archive-basic-section ._button {
	margin-top: 90px;
	height: 60px;
}
.single-top-image {
	width: 50%;
	max-width: 960px;
	height: auto;
	margin: 0 auto;
}
/* -------------------------------------------------------------
トップ画像(スライダーエリア)
------------------------------------------------------------- */
.top-img {
	position: relative;
}

/* 隙間対策 */
.top-img img {
	vertical-align:top;
}
/* スマホで縦長に */
@media screen and (max-width: 768px) {
	.top-img img {
		height: 400px!important;
		object-fit: cover;
		/*aspect-ratio: 16 / 9;*/
	}
}
/* -------------------------------------------------------------
以下、各セクション・項目の設定
------------------------------------------------------------- */
/* -------------------------------------------------------------
!LEDビジョンの特徴・ピッチの特性
------------------------------------------------------------- */
.led-section {
	max-width: var(--width-main-wrap);
	margin: 0 auto;
	padding: 40px 20px;
	text-align: center;
}
.led-section h1 {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 10px;
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
}
.led-section h2 {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 20px;
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
}
@media (max-width: 768px) {
	.led-section h2 {
		font-size: 20px;
	}
}
/* 見出しの下に線 */
.led-section h1::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #000;
	margin-top: 10px;
}
.led-section h2::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #000;
	margin-top: 10px;
}

.led-section .description {
	max-width: 1000px;
	font-size: 16px;
	line-height: 1.8;
	margin: 20px auto 40px;
	text-align: left;
}

.led-section .description h3 {
	width: 100%;
	/*background: #000;*/
	/*color: #fff;*/
	padding: 5px 0px;
	margin-top: 20px;
}
.led-section h3::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #ddd;
	margin-top: 2px;
}

.image-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2列 */
	gap: 30px;
	padding: 20px 0;
}

.image-container img {
	width: 100%;
	height: auto;
	border-radius: 0px;
	display: block;
}
/* 1枚だけのとき */
.image-container.one-image {
	display: flex;
	justify-content: center;
}

.image-container.one-image img {
	/*max-width: 800px;*/ /* 適度な大きさに調整 */
	/*max-width: 1000px;*/
	max-width: var(--width-main-wrap);
	height: auto;
}

/* 1枚だけのとき(小) */
.image-container.one-image-small {
	display: flex;
	justify-content: center;
}

.image-container.one-image-small img {
	max-width: 800px; /* 適度な大きさに調整 */
	height: auto;
}

/* =========================
   description-card-area
========================= */
.description-card-area {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      max-width: var(--width-main-wrap);
      margin: 0 auto;
}

.description-card {
      flex: 1 1 calc(50% - 20px); /* PCでは2列 */
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      transition: transform 0.2s, box-shadow 0.2s;
	text-align: left;
}

.description-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.description-card h3 {
	font-size: 20px;
	margin-bottom: 12px;
}

.description-card p {
	font-size: 15px;
	color: #333;
}
/* =========================
   レスポンシブ対応
========================= */
/* スマホでは1列 */
@media (max-width: 768px) {
	.description-card {
		flex: 1 1 100%;
	}
}

/* =========================
   視認距離テーブル
========================= */
.led-distance-table {
	width: 100%;
	border-collapse: collapse;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.led-distance-table thead {
	background-color: #3c434a;
	color: #fff;
}

.led-distance-table thead th {
	padding: 14px;
	text-align: center;
	font-size: 16px;
}

.led-distance-table tbody td {
	padding: 14px;
	text-align: center;
	border-bottom: 1px solid #e5e5e5;
	font-size: 15px;
}

/* レスポンシブ: スマホで見やすく */
@media (max-width: 8px) {
	.led-distance-table,
	.led-distance-table thead,
	.led-distance-table tbody,
	.led-distance-table th,
	.led-distance-table td,
	.led-distance-table tr {
		display: block;
		width: 100%;
	}

	.led-distance-table thead {
	display: none; /* ヘッダー非表示 */
	}

	.led-distance-table tbody tr {
		margin-bottom: 16px;
		border: 1px solid #ddd;
		border-radius: 6px;
		padding: 10px;
	}

	.led-distance-table tbody td {
		text-align: left;
		padding: 8px;
		border: none;
		position: relative;
	}

	.led-distance-table tbody td::before {
		content: attr(data-label);
		font-weight: bold;
		display: block;
		margin-bottom: 4px;
		color: #555;
	}
}
/* =========================
   レスポンシブ対応
========================= */
/* スマホ時は縦並び */
@media (max-width: 768px) {
	.image-container {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------
!設置までの流れ
------------------------------------------------------------- */
.step-flow {
	position: relative;
	margin: 40px auto;
	max-width: var(--width-main-wrap);/* 900px */
	text-align: left;
}

.step {
	display: flex;
	align-items: flex-start;
	margin-bottom: 60px;
	position: relative;
}

.step-icon {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	background: #0066b3;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(45deg);
	margin-right: 20px;
	position: relative;
}

/*
.step-icon::before {
  content: "";
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 60px;
  background: #ccc;
}
*/

.step:last-child .step-icon::before {
	display: none;
}

.step-icon span {
	transform: rotate(-45deg);
	display: block;
}

.step-content {
	flex: 1;
	background: #f9f9f9;
	padding: 15px 20px;
	border-radius: 5px;
	box-shadow: 0 0 6px rgba(0,0,0,0.1);
}
.step-content span {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 19px;
	padding: 8px 0 8px 12px;
	border-left: #3077B7 8px solid;
}
.step-content p {
	margin: 6px 0;
	font-size: 16px;
}
.step-content hr {
	padding: 10px 0;
}
.note {
	font-size: 18px;
	color: #ff6600;
	font-weight: bold;
	padding-bottom: 10px;
}

/* =========================
   よくある質問
========================= */
.faq-item {
	border: 1px solid black;
	padding: 20px;
	margin-bottom: 20px;
}
.faq-item hr {
	padding: 10px 0;
}

.question,
.answer {
	display: flex;
	align-items: flex-start;
	padding-bottom: 10px;
	text-align: left;
}
.question span,
.answer span {
	padding-top: 5px;
}
.question::before,
.answer::before {
	display: inline-block;
	width: 1.5em; /* 幅は同一にすることで揃える */
	/*text-align: right;*/
	margin-right: 0.5em;
	line-height: 1.3;
	flex-shrink: 0;
}

/* Q の見た目 */
.question::before {
	content: "Q";
	font-size: 28px;
	color: #0073aa;
	font-weight: bold;
}

/* A の見た目 */
.answer::before {
	content: "A";
	font-size: 28px;
	color: #28a745;
	font-weight: bold;
}


/* 📱 スマホ対応 */
@media (max-width: 768px) {
	.step {
		flex-direction: column;   /* 縦並び */
		align-items: center;
		text-align: center;       /* 中央寄せで見やすく */
			margin-bottom: 20px;
	}

	.step-icon {
			width: 40px;
	height: 40px;
		margin: 0 auto 15px 0;      /* 上中央に配置 */
	}

	.step-icon::before {
		top: 100%;                /* アイコン下から線を出す */
		left: 50%;
		transform: translateX(-50%);
	}

	.step-content {
		width: 100%;              /* 幅いっぱい */
		text-align: left;         /* テキストは左寄せに戻す */
	}
}




/* -------------------------------------------------------------
!製品ラインナップ：アーカイブ(カスタム投稿)
------------------------------------------------------------- */
/* 他ページに埋め込む場合の背景用 */
.front-products {
background: #f9f9f9;
}

.products-archive {
  max-width: var(--width-main-wrap);
  margin: 0 auto;
  padding: 0px 0px 0px 0px;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 5px;
}

.products-item {
  display: block;
  background: #fff;
  border: 1px solid #ddd;
  padding: 16px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  color: inherit;
  text-decoration: none;
}
.products-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.products-model {
	  margin-bottom: 5px;
  font-size: 20px;
  font-weight: bold;
  color: #222;
    text-align: left;
}
.products-type {
	margin-bottom: 5px;
  font-size: 14px;
  line-height: 18px;
  color: #222;
    text-align: left;
}
.products-overview {
  font-size: 13px;
  color: #222;
    text-align: left;
}
.products-thumb img {
  max-width: 100%;
  height: auto;
  margin: 5px auto;
  display: block;
}

.products-price {
  font-size: 14px;
  font-weight: bold;
  color: #444;
  text-align: left;
}
/* スマホ用（幅768px以下くらいで適用） */
@media (max-width: 768px) {
  .products-item {
    display: flex;
    align-items: center; /* ← ここで縦方向中央揃え */
    text-align: left;
  }

  .products-thumb {
    flex: 0 0 100px; /* サムネイル幅（調整可） */
    margin-right: 10px;
  }

  .products-thumb img {
    max-width: 100%;
    height: auto;
  }

  .products-model,
  .products-type,
  .products-price {
    text-align: left; /* PCと揃える */
  }
}

/* =========================
   STB機能紹介
========================= */
.stb-card-area {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	max-width: var(--width-main-wrap);
	margin: 0 auto;
}
.stb-card {
  flex: 1 1 calc(33.333% - 20px); /* PCでは3列 */
  background: #eee;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: left;
  display: flex;             /* 横並び */
  /*align-items: flex-start;*/   /* 上揃え */
  align-items: center;       /* 上下中央揃え */
  gap: 15px;                 /* アイコンと本文の間隔 */
}

.stb-card-icon {
  flex-shrink: 0;            /* アイコンの大きさを固定 */
  width: 50px;
  height: 50px;

}

.stb-card-icon img {
  width: 100%;
  height: auto;
  display: block;
}
.stb-card-body {
  flex: 1;
}
.stb-card p {
	font-size: 20px;
	/*margin-bottom: 12px;*/
}
.stb-card span {
	font-size: 15px;
	color: #333;
}
.description.stb-description {
	text-align: center;
}
/* =========================
   レスポンシブ対応
========================= */
/* スマホ対応: 2列 */
@media (max-width: 768px) {
.stb-card-area {

	gap: 5px;
}
  .stb-card {
	
    flex: 1 1 calc(50% - 20px); /* 2列 */
	flex-direction: column;   /* ← アイコンと本文を縦並びに */
  }
.stb-card p {
	font-size: 16px;

}
.stb-card span {
	font-size: 13px;
}
.description.stb-description {
	text-align: left;
}
}

/* さらに狭い端末 (例: 480px以下) は1列 */
@media (max-width: 480px) {
  .stb-card {
    /*flex: 1 1 100%;*/
	flex: 1 1 calc(50% - 20px); /* 2列 */
  }
}

/* -------------------------------------------------------------
!製品ラインナップ：シングル(カスタム投稿)
------------------------------------------------------------- */
.product-model {
	text-align: center;
}
.product-model h2 {
	font-size: 28px;
	font-weight: bold;
	margin: 10px;
	position: relative;
	display: inline-block;
	padding-bottom: 20px;
}
.product-model h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 0px;
  background: #000;
  margin-top: 10px;
}
.product-type {
	text-align: center;
}
/* =========================
   製品仕様テーブル
========================= */
/* 枠線設定 */
.product-spec-table,
.product-spec-table th,
.product-spec-table td {
    border: 1px solid #dfe0e1;
    border-collapse: collapse;
}

.product-spec-table {
	width: 100%;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.product-spec-table thead {
	background-color: #3c434a;
	color: #fff;
}

.product-spec-table th {
	background: #f2f2f2;
	width: 300px;
	padding: 14px;
	text-align: left;
	font-size: 16px;
}

.product-spec-table td {
	padding: 14px;
	text-align: left;
	font-size: 16px;
}
.product-image-container {
	display: flex;
	justify-content: center;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	padding: 20px 0;
}
.product-image-container img {
  width: 50%;
  max-width: 800px;
  height: auto;
  border-radius: 0px;
  display: block;
}
/* =========================
   レスポンシブ対応
========================= */
/* スマホ時は縦並び */
@media (max-width: 768px) {
	.product-image-container {
		grid-template-columns: 1fr;
	}
}
/* レスポンシブ: スマホで見やすく */
@media (max-width: 768px) {
	.product-spec-table,
	.product-spec-table tbody,
	.product-spec-table th,
	.product-spec-table td,
	.product-spec-table tr {
		display: block;
		width: 100%;
	}
}

/* -------------------------------------------------------------
!実績(records)：アーカイブ(カスタム投稿)
------------------------------------------------------------- */
/* 他ページに埋め込む場合の背景用 */
.front-records {
	background: #f9f9f9;
}

.records-archive {
	max-width: var(--width-main-wrap);
	margin: 0 auto;
	padding: 0px 0px 40px 0px;
	font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}

.records-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 10px;
}

.records-item {
	display: block;
	background: #fff;
	border: 1px solid #ddd;
	padding: 0;
	text-align: center;
	transition: transform 0.2s, box-shadow 0.2s;
	color: inherit;
	text-decoration: none;
}
.records-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.records-text {
	padding: 16px;
}
.records-title {
	margin-bottom: 5px;
	font-size: 20px;
	font-weight: bold;
	color: #222;
	text-align: left;
}
.records-category {
	margin-bottom: 5px;
	font-size: 14px;
	line-height: 18px;
	text-align: left;
}
.records-type {
	margin-bottom: 5px;
	font-size: 14px;
	line-height: 18px;
	color: #222;
	text-align: left;
}
.records-chip-category {
	background-color: #777;
	border: 1px solid #777;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: .05em;
	line-height: 1;
	padding: 6px 8px;
	text-align: center;
}
.records-chip-type {
	background-color: #082a81;
	border: 1px solid #082a81;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: .05em;
	line-height: 1;
	padding: 6px 8px;
	text-align: center;
}

.records-overview {
	font-size: 13px;
	color: #222;
	text-align: left;
}
.records-thumb img {
	width: 100%;
	height: auto;
	margin: 0px auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.records-price {
	font-size: 14px;
	font-weight: bold;
	color: #444;
	text-align: left;
}
/* スマホ用（幅768px以下くらいで適用） */
@media (max-width: 768px) {
	.records-item {
		/*display: flex;*/
		/*align-items: center;*/ /* ← ここで縦方向中央揃え */
		text-align: left;
	}

	.records-thumb {
		flex: 0 0 100px; /* サムネイル幅（調整可） */
	}

	.records-thumb img {
		max-width: 100%;
		height: auto;
	}

	.records-title,
	.records-type,
	.records-price {
		text-align: left; /* PCと揃える */
	}
}

/* -------------------------------------------------------------
!実績(records)：シングル(カスタム投稿)
------------------------------------------------------------- */
.record-title {
	text-align: left;
	margin-top: 10px;
}
.record-title h2 {
	margin-bottom: 0px;
	padding-bottom: 0px;
}
.record-title hr {
 height: 2px;
 background-color: #000;

 border: none;
	margin: 16px 0;
}
/* 見出しの下に線 */
.record-title h2::after {
	content: "";
	display: block;
	width: 100%;
	height: 0px;
	background: #000;
	margin-top: 0px;
}
.record-image-container {
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
}

.record-image-container img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* -------------------------------------------------------------
!コラム(column)：アーカイブ(カスタム投稿)
------------------------------------------------------------- */
/* 他ページに埋め込む場合の背景用 */
.front-columns {
	background: #f9f9f9;
}
.columns-greeting span {
	font-size: 28px;
}
.columns-greeting .description {
	width: 100%;
	max-width: 1000px;
	margin: 20px auto 0px;
}
.columns-archive {
	max-width: var(--width-main-wrap);
	margin: 0 auto;
	padding: 0px 0px 40px 0px;
	font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}

.columns-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 10px;
}

.columns-item {
	display: block;
	background: #fff;
	border: 1px solid #ddd;
	padding: 0;
	text-align: center;
	transition: transform 0.2s, box-shadow 0.2s;
	color: inherit;
	text-decoration: none;
}
.columns-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.columns-text {
	padding: 16px;
}

.columns-title {
	height: 90px;
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: bold;
	color: #222;
	text-align: left;
}
.columns-date {
	margin-bottom: 5px;
	font-size: 14px;
	line-height: 18px;
	color: #222;
	text-align: right;
}
.columns-category {
	margin-bottom: 5px;
	font-size: 14px;
	line-height: 18px;
	text-align: left;
}

.columns-chip-category {
	background-color: #777;
	border: 1px solid #777;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: .05em;
	line-height: 1;
	padding: 6px 8px;
	text-align: center;
}
.columns-chip-type {
	background-color: #082a81;
	border: 1px solid #082a81;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: .05em;
	line-height: 1;
	padding: 6px 8px;
	text-align: center;
}

.columns-overview {
	font-size: 13px;
	color: #222;
	text-align: left;
}
.columns-thumb img {
	width: 100%;
	height: auto;
	margin: 0px auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}


/* スマホ用（幅768px以下くらいで適用） */
@media (max-width: 768px) {
	.columns-item {
		/*display: flex;*/
		/*align-items: center;*/ /* ← ここで縦方向中央揃え */
		text-align: left;
	}

	.columns-thumb {
		flex: 0 0 100px; /* サムネイル幅（調整可） */
	}

	.columns-thumb img {
		max-width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.columns-title,
	.columns-type,
	.columns-price {
		text-align: left; /* PCと揃える */
	}
}

/* -------------------------------------------------------------
!コラム(column)：シングル(カスタム投稿)
------------------------------------------------------------- */
.column-title {
	text-align: left;
	margin-top: 10px;
}
.column-title h1 {
	margin-bottom: 0px;
	padding-bottom: 0px;
}
.column-title h2 {
	margin-bottom: 0px;
	padding-bottom: 0px;
}
.column-title hr {
 height: 2px;
 background-color: #000;

 border: none;
	margin: 16px 0;
}
/* 見出しの下に線 */
.column-title h1::after {
	content: "";
	display: block;
	width: 100%;
	height: 0px;
	background: #000;
	margin-top: 0px;
}
.column-title h2::after {
	content: "";
	display: block;
	width: 100%;
	height: 0px;
	background: #000;
	margin-top: 0px;
}
.column-date {
	padding-bottom: 10px;
	font-size: 15px;
	line-height: 18px;
	color: #000;
	text-align: right;
}
.column-greeting .description {
	width: 100%;
	max-width: 1000px;
	margin: 20px auto 40px;
	text-align: left;
}
.column-text .description {
	width: 100%;
	max-width: 1000px;
	margin: 20px auto 40px;
	text-align: left;
}
.column-heading {
	width: 100%;
	max-width: 1000px;
	margin: 20px auto 0px;
	text-align: left;
	font-size: 24px;
	color: #ff4500;
}
.column-sentence {
	width: 100%;
	max-width: 1000px;
	margin: 20px auto 40px;
	text-align: left;
	margin-top: 5px;
}
.column-image-container {
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
}

.column-image-container img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
/*--------------------------------------------------------------
!ABOUT(企業情報)-シングルページ
--------------------------------------------------------------*/
.company-profile {
	max-width: 900px;
	margin: 0px auto 40px;
	padding: 40px 20px;
	font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
	font-size: 15px;
	color: #333;
}

.company-profile table {
	width: 100%;
	border-collapse: collapse;
}

.company-profile th,
.company-profile td {
	padding: 15px 20px;
	border: 1px solid #ddd;
	text-align: left;
	vertical-align: top;
}

.company-profile th {
	background: #f2f2f2;
	font-weight: bold;
	width: 200px;
	white-space: nowrap;
}

.company-profile td ul {
	margin: 0;
	padding-left: 20px;
}

.company-profile td ul li {
	margin-bottom: 5px;
	list-style: disc;
}
/* スマホ用レスポンシブ（768px以下） */
@media screen and (max-width: 768px) {
  .company-profile table,
  .company-profile tbody,
  .company-profile tr,
  .company-profile th,
  .company-profile td {
    display: block;
    width: 100%;
  }

  .company-profile tr {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 0px;
    overflow: hidden;
  }

  .company-profile th {
    width: 100%;
    box-sizing: border-box;
  }

  .company-profile td {
    border-top: none;
    padding-top: 10px;
  }
}
/* アクセスマップ用 */
.access-map-section {
	max-width: var(--width-main-wrap);
	margin: 0 auto;
	margin: 40px auto 80px;
	text-align: center;
}
.access-map-section span {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 20px;
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
}
.access-map-section h2 {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 20px;
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
}

/* 見出しの下に線 */
.access-map-section span::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #000;
	margin-top: 10px;
}
.access-map-section h2::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #000;
	margin-top: 10px;
}

.access-map-section .description {
	max-width: 1000px;
	font-size: 16px;
	line-height: 20px;
	margin: 10px auto 15px;
	text-align: center;
}

.access-map-section .description h3 {
	width: 100%;
	/*background: #000;*/
	/*color: #fff;*/
	padding: 5px 0px;
	margin-top: 20px;
}
.access-map-section h3::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #ddd;
	margin-top: 2px;
}
.office-name {
	font-size: 20px!important;
}
/* スマホ用レスポンシブ（768px以下） */
@media screen and (max-width: 768px) {
	.access-map-section {
	padding: 0px 20px 0px;
}
}
/*--------------------------------------------------------------
!CONTACT(お問い合わせ)-シングルページ
--------------------------------------------------------------*/
#single-contact {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 0px;
	background-color: white;
	/*
	background-image : url(../img/bg-front-about.jpg);
	*/
	background-position: top right;

	/* 背景画像を半透明にする場合は下記2つを有効に */
	/*
	background-color:rgba(255,255,255,0.2);
	background-blend-mode:color;
	*/

}

.single-contact {
	display: block;
	max-width: var(--width-single-wrap);
	height: auto;
	text-align: center;
	margin: 0 auto;
	padding: 36px 0px 7px 0px;/* 上右下左 */
	/*background-color: white;*/
	/*
	background: linear-gradient(
		to right,
		rgba(255,255,255,1) calc(100% / 2),
		rgba(255,255,255,0) calc(100% / 2)
	);
	*/
/**//*background-image : url(../img/bg-section1.png);*/
/**/background-position: center;
	overflow: hidden;
	
	/* フォント設定 */
	font-size: 1.5rem;/*18px;*/
	line-height: 24px;
	letter-spacing: 0.1rem;
}
@media screen and (max-width: 768px) {
	.single-contact {
		padding: 10px 0px 0px 0px;/* 上右下左 */
	}
}

/* コンタクトフォーム説明文 */
.contact-form-text {
	font-size: 1.7rem;
	text-align: left;
}
.contact-form-main {
	padding-bottom: 72px;
}

/*--------------------------------------------------------------
汎用：1カラムレイアウト
--------------------------------------------------------------*/
/* 基本幅用 */
.wrap-1column {
	position: relative;
	overflow: hidden;
	max-width: var(--width-max-wrap);
	height: auto;
	margin: 0 auto;
    padding: var(--default-padding);
}
/* 幅800px用 */
.wrap-1column-800 {
	overflow: hidden;
	max-width: var(--width-800-wrap);
	height: auto;
	margin: 0 auto;
    padding: var(--default-padding);
}


/*--------------------------------------------------------------
1カラムレイアウト サイトマップ用
--------------------------------------------------------------*/
.wrap-1column-sitemap {
	overflow: hidden;
	max-width: var(--width-600-wrap);
	height: auto;
	margin: 0 auto;
    padding: var(--default-padding);

}
@media screen and (min-width: 768px) {
	.wrap-1column-sitemap ul {
		padding-left: 200px;
	}
}
@media screen and (max-width: 768px) {
	.wrap-1column-sitemap ul {
		width: 100%;
		padding-left: 50px;
	}
}
/* サイトマップ用 */
.sitemap {
	width: 80%;
	margin: 0 auto;
	text-align: left;
	font-size: 1.8rem;
	line-height: 3rem;
}
@media screen and (min-width: 768px) {
.sitemap {
	display: flex;
	width: 80%;
	margin: 0 auto;
	text-align: left;
	font-size: 1.8rem;
	line-height: 3rem;
	flex-wrap: wrap;
	list-style-type: none;
}
.sitemap li {
	background-color: #008080;
	color: white;
	margin: 5px;
	width: calc(50% - 10px);
	padding: 0 10px;
}
.sitemap li a {
	display: block;
	width: 100%;
}
}

/*--------------------------------------------------------------
グリッドレイアウト
投稿タイプの一覧表示で、よく使用している 

--使い方--
<div class="grid-area">
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
</div>
パラメータは適宜調整すること
--------------------------------------------------------------*/
/*--------------------------------------------------------------
投稿記事(single.php関係)
--------------------------------------------------------------*/
.news a {
    display: inline-block;
}
.single_next {
    text-align: left;                   /* 文章を左寄せする(※) */
    float: left;                        /* 左端に寄せて、後続を右側へ回り込ませる */
}
.single_previous {
    text-align: right;                  /* 文章を右寄せする */
    margin-right: 2%;
}
.cat_title {
    list-style: none;
    color: #FFFFFF;
    background: #BC8F8F;
    padding: 0 4px;
    /*border-radius: 10px;*/ 
}

.news_title {
    font-size:1.4em;
}
@media only screen and (max-width: 960px) {
    .news_title {
        font-size:1.2em;
    }
}
/*--------------------------------------------------------------
プライバシーポリシー
--------------------------------------------------------------*/
.privacy-section {
	margin-top: 45px;
}

/*--------------------------------------------------------------
ページネーション用
--------------------------------------------------------------*/
/* page-numbersはカテゴリで使うページャー用 */
/*
.page-numbers {
	list-style: none;
}
*/
/*
.page-numbers li {
}
*/
.pager {
	margin-top: 24px;
	text-align: center;
}
.pager li {
	display: inline-block;
	color: black;
	padding: 4px 4px;
}
.pager a {
	color: #ffffff;
}
.pagination {
	clear: both;
	padding: 20px 0;
	position: relative;
	font-size: 14px;
	line-height: 14px;
	text-align: center;
	justify-content: center;
}
.pagination-box {
	display: inline-block;
}
.pagination span,
.pagination a {
	display: block;
	float: left;
	margin: 2px 2px 2px 0;
	padding: 10px 15px 10px 15px;
	text-decoration: none;
	width: auto;
	color: black;
	background: #ffffff;
	border: solid 1px  black;
}
.pagination a:hover{
	color: white;
	background: black;
}
.pagination .current{
	padding: 10px 15px 10px 15px;
	color: white;
	background: black;
}
@media only screen and (max-width: 413px) {
	.pagination {
		font-size: 12px;
		line-height: 12px;
	}
	.pagination span, .pagination a {
		padding: 8px 10px 8px 10px;
	}
	.pagination .current{
		padding: 8px 10px 8px 10px;
	}
}

#hideMe {
	-moz-animation: cssAnimation 0s ease-in 5s forwards;
	/* Firefox */
	-webkit-animation: cssAnimation 0s ease-in 5s forwards;
	/* Safari and Chrome */
	-o-animation: cssAnimation 0s ease-in 5s forwards;
	/* Opera */
	animation: cssAnimation 0s ease-in 5s forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@keyframes cssAnimation {
	to {
		width:0;
		height:0;
		overflow:hidden;
	}
}
@-webkit-keyframes cssAnimation {
	to {
		width:0;
		height:0;
		visibility:hidden;
	}
}

/*==================================================
アニメーション表示用
===================================*/
/*--------------------------------------------------------------
ふわっ
--------------------------------------------------------------*/
/* fadeUp */
.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger{
    opacity: 0;
}