@charset "utf-8";



/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');

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


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	--base-color: #fff;			/*テンプレートの土台となる色（主に背景カラー）*/
	--base-inverse-color: #0e211f;		/*上のbase-colorの対となる色（主にテキストカラー）*/

	--primary-color: #25a710;		/*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: #fff;		/*上のprimary-colorの対となる色*/

	--content-space: 2rem;			/*余白の一括管理用。2rem＝2文字分。*/
	
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	:root {

		--content-space: 4rem;		/*余白の一括管理用。4rem＝4文字分。*/

	}

	}/*追加指定ここまで*/


/*animation11のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*jump1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes jump1 {
  0%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  90% {
    transform: translateX(-50%) translateY(-10px);
  }
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 15px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family: "Zen Maru Gothic", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;	/*フォント種類*/
	font-optical-sizing: auto;
	font-style: normal;
	-webkit-text-size-adjust: none;
	background: var(--base-color) url("../images/kazari4.png") no-repeat right 50px / 40%;	/*背景色はcss冒頭のbase-colorを読み込み。背景画像の読み込み。右側、上から50pxの場所に幅40%で配置。*/
	color: var(--base-inverse-color);	/*文字色。css冒頭のbase-inverse-colorを読み込みます。*/
	line-height: 2;		/*行間*/
	overflow-x: hidden;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}

/*section*/
section {
	padding: var(--content-space) 0;	/*section内の余白。上下にcss冒頭のcontent-spaceを読み込み、左右は0（ゼロ）*/
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	position: relative;
	animation: opa1 0.2s 0.4s both;  /*0.4秒待機後、0.2秒かけてフェードイン*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 0 var(--content-space);	/*コンテナー内の余白。上下は0（ゼロ）、左右はcss冒頭のcontent-spaceを読み込む。*/
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	padding: var(--content-space) 0;	/*ヘッダー内の余白。上下にcss冒頭のcontent-spaceを読み込み、左右は0（ゼロ）*/
}

	/*画面幅400px以下の追加指定*/
	@media screen and (max-width:400px) {

	/*ヘッダーブロック*/
	header {
		padding-top: calc(var(--content-space) + 70px);	/*右上ボタンとロゴが重ならないようヘッダー上部の余白に70px上乗せ*/
	}
	
	}/*追加指定ここまで*/


/*ロゴ*/
#logo {margin: 0;padding: 0;}
#logo img {
	display: inline-block;
	width: 250px;	/*ロゴの幅*/
}


/*mainimg（4枚構成の横スライドショー）
---------------------------------------------------------------------------*/
/*h2見出し*/
#mainimg-box h2 {
	font-size: 5vw;	/*文字サイズ*/
	line-height: 1.6;	/*行間を少し狭く*/
	font-weight: 200;	/*文字の太さ。細く。*/
	position: relative;	/*カギカッコを絶対配置する為に必要な指定*/
	display: inline-block;
	padding: 1rem 3rem;	/*上下、左右への見出し内の余白。カギカッコとテキストの間のバランスを調整します。*/
}

/*h2内の色がついた部分（span）*/
#mainimg-box h2 span {
	color: var(--primary-color);	/*css冒頭のprimary-colorを読み込みます。*/
}

/*h2見出しのカギカッコ装飾（共通設定）*/
#mainimg-box h2::before,
#mainimg-box h2::after {
	content: "";
	position: absolute;
	width: 20px;	/*カギカッコの幅。お好みで。*/
	height: 50px;	/*カギカッコの高さ。お好みで。*/
	border: 1px solid var(--base-inverse-color);	/*枠線の幅、線種、varは色の事でcss冒頭で指定しているvase-inverse-colorを読み込みます*/

}
/*h2見出しの最初（左上）のカギカッコの設定*/
#mainimg-box h2::before {
	top: 0px;
	left: 0px;
	border-right: none;		/*右の線は消す*/
	border-bottom: none;	/*下の線は消す*/
}

/*h2見出しの最後（右下）のカギカッコの設定*/
#mainimg-box h2::after {
	bottom: 0px;
	right: 0px;
	border-left: none;	/*左の線は消す*/
	border-top: none;	/*上の線は消す*/
}

/*スライドショー全体を囲むブロック*/
#mainimg {
	overflow-x: hidden;
	position: relative;
	background: linear-gradient(transparent 20%, var(--primary-color) 20%);/*背景グラデーション。上から20%までは透明で、それ以外はcss冒頭のprimary-colorを読み込みます。最後にも20%とする事で境界がくっきりします。これがないとなめらかグラデーションに。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
}

/*画像たちを囲むブロック*/
#mainimg .img {
	display: flex;
}

/*画像*/
#mainimg .img img {
	padding: 0 1vw;	/*上下の余白はなし、左右への余白は画面の1%*/
}

/*スライド下の英語表記のテキスト*/
#mainimg .img + p.c {
	padding: 2rem;		/*テキスト内の余白。2文字分。*/
	font-size: 1.4rem;	/*文字サイズ140%*/
}

/*スライド下の英語テキストに使うフォント。css冒頭のGoogle Fonts（Caveat）用のスタイル*/
.caveat {
	font-family: "Caveat", cursive;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
}

/*右から左へ、左から右へ、のアニメーション*/
#mainimg .rtl, #mainimg .ltr {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

#mainimg .rtl {animation-name: slide-rtl;}
#mainimg .ltr {animation-name: slide-ltr;}

@keyframes slide-rtl {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}


/*コンテンツ
---------------------------------------------------------------------------*/
/*コンテンツブロック*/
#contents {
	flex: 1;
}

/*コンテンツ内で使用するul,ol要素（リストタグ）*/
#contents ul,#contents ol {
	margin-left: 2rem;
	margin-right: 2rem;
}


/*main
---------------------------------------------------------------------------*/
/*h2見出し*/
main h2 {
	font-weight: 500;	/*太さ。200〜900まで指定可能。大きいほど太くなります。*/
	font-size: 1.8rem;	/*文字サイズ180%。*/
}

/*「商品ラインナップ」ブロック
---------------------------------------------------------------------------*/
.list-grid .list * {margin: 0;padding: 0;}

/*h4見出し*/
.list-grid h4 {
	font-weight: 100;	/*細字にする*/
	line-height: 1.2;	/*行間を狭く*/
	text-align: center;	/*中央に配置*/
}

/*ブロック全体を囲むブロック*/
.list-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);	/*2列にする指定。3列にしたければrepeat(3, 1fr)とする。*/
	gap: 1rem;	/*ブロックの間に1文字分のスペースを空ける*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ブロック全体を囲むブロック*/
	.list-grid {
		grid-template-columns: repeat(5, 1fr);	/*4列にする指定。2列にしたければrepeat(2, 1fr)とする。*/
		gap: 2rem;	/*ブロックの間に2文字分のスペースを空ける*/
	}

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-grid .list {
    display: grid;
	position: relative;
    grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	overflow: hidden;
}

/*ボックス内のp要素*/
.list-grid .list p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}


/*スライドアップの装飾画像
---------------------------------------------------------------------------*/
/*画像ボックス*/
.bg-slideup {
    background-image: url("../images/6.jpg");	/*背景画像の読み込み*/
    background-repeat: no-repeat;
    background-size: cover;
	width: 100%;
	height: 50vh;	/*高さ。画面の高さの50%になる設定ですがお好みで。*/
	border-radius: 0px 15vw 0px 15vw;	/*角を丸くする指定。左上、右上、右下、左下への順番。*/
}

/*フッター
---------------------------------------------------------------------------*/
#footer2-parts * {margin: 0;padding: 0;}
#footer2-parts ul {list-style: none;}

/*ブロック全体*/
#footer2-parts {
	background: url("../images/bg_common_stripe.gif") repeat;
	background-repeat: repeat;
	background-position: bottom;
	color: #555;
	padding: var(--content-space);
	margin: 0 calc(-1 * var(--content-space));
}

/*ロゴやSNSアイコンが入ったブロック*/
#footer2-parts div.footer2-1-parts {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*このブロック内のボックス同士の間に空ける余白。１文字分。*/
}

/*メニューブロック*/
#footer2-parts div.footer2-2-parts {
    flex: 1;
}

	/*画面700px以上の追加指定*/
	@media screen and (min-width:700px) {

	#footer2-parts {
		display: flex;
		gap: 2rem;		/*ロゴのブロックとメニューのブロックとの間の余白。2文字分。*/
	}

	/*ロゴやSNSアイコンが入ったブロック*/
	#footer2-parts div.footer2-1-parts {
		text-align: left;
		width: 40%;	/*幅。40%。*/
	}

	/*メニューブロック*/
	#footer2-parts div.footer2-2-parts {
		/*margin-bottom: 0;	下の余白をなくす*/
	}

	}/*追加指定ここまで*/




/*Google Map用
---------------------------------------------------------------------------*/
.iframe-box1-parts {
	width: 100%;
	height: 0;
	padding-top: 56.25% !important;	/*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
	position: relative;
	overflow: hidden;
}
.iframe-box1-parts iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}



/*ホームページはこちら
---------------------------------------------------------------------------*/
.btn-handwriting {
  display: inline-block;
  text-decoration: none;
  color: #726B62;
  font-weight: 700;
  letter-spacing: 2px;
  width: 220px;
  text-align: center;
  padding: 14px 16px;
  position: relative;
  opacity: 1 !important;
  transition: all 0.2s;
  border: 1px solid #726B62;
  background: #ffffff;
}
.btn-handwriting:hover {
  border-left: none;
  border-right: none;
  letter-spacing: 5px;
}
.btn-handwriting:hover:before, .btn-handwriting:hover:after {
  width: 100%;
  height: 1px;
  left: 0;
  top: 2px;
  transition: width 0.4s;
}
.btn-handwriting:hover:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 2px;
}
.btn-handwriting:before, .btn-handwriting:after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #726B62;
  position: absolute;
  top: 0;
}
.btn-handwriting:before {
  right: 3px;
}
.btn-handwriting:after {
  left: 3px;
}





/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr * {margin: 0;padding: 0;}
.pr {
	margin: 0 calc(-1 * var(--content-space));
}
.pr a {
 text-decoration: none;display: block;
 background: #555;
 color: #ccc;
 text-align: right;
 padding: 0.5rem 1rem;
 font-size: 0.8rem;
	padding: 0.2rem 1rem;
	line-height: 1.5;
}
.pr a::before {
 font-family: "Font Awesome 6 Free";
 content: "\e2ca";
 font-weight: bold;
 margin-right: 0.5em;
 }




/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 1s 0.4s both;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 50px;		/*下からの配置場所指定*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: var(--primary-color);	/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*svgアニメーション（大きな背景ラインアニメーション）
このcssの他、htmlの一番下の「SVGアニメーション」というブロックで指定があります。
---------------------------------------------------------------------------*/
#kazari1 {
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
	stroke: #fff;		/*これは線の色ではありません。線色はsvg画像を直接編集して下さい。*/
	stroke-width: 30;	/*svgをなぞった際の線幅をここで設定*/
	width: 100%;
}


/*bg1背景色（「お客様の声」ブロックで使用）
---------------------------------------------------------------------------*/
.bg1 {
	background: var(--primary-color);		/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
}


/*sectionの両サイドの余白を相殺するスタイル
---------------------------------------------------------------------------*/
.margin-lr0 {
	margin: 0 calc(-1 * var(--content-space));
}


/*マニュアルページ用
---------------------------------------------------------------------------*/
#manual {background-image: none;}
.manual {
	padding: 5vw;
}
.manual h2,.manual h3 {
	margin-top: 3rem;
}
pre {white-space: pre-wrap;word-wrap: break-word;overflow-wrap: break-word;}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; color: #888; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/