@charset "utf-8";

/* 画像ロゴがあるときだけ、直後のテキスト版ロゴを隠す */
#logo + #logo { display: none; }

/* GoogleMap等のiframeの枠線を消す */
iframe { border: 0; }

/*お知らせブロック*/
.new dt {
    padding-right: 1rem;
}

/*contact_form.html*/
.contact-alert{
    background:#f0fff2;border:1px solid #bde5c8;color:#1c6b2a;
    padding:.8rem 1rem;border-radius:6px;margin:0 0 1rem;
}
input[type=text], input[type=email], input[type=tel],textarea {
    width:100%;
    max-width:100%;
}
input, select, textarea, button[type=submit] {font-size: 1rem;}

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

/*lp3専用*/
/*body.page #menubar_hdr,*/
body.page #header-box {
    display: none !important;
}

p.margin1 {
    margin: 2rem;
}
p.margin2 {
    margin: 2rem 10rem;
}

/*ta1テーブル*/
.ta1 {
	table-layout: fixed;
	border-top: 1px solid #ccc;
	width: 100%;
	margin-bottom: 2rem;
}
.ta1 tr {
	border-bottom: 1px solid #ccc;
}
.ta1 th, .ta1 td {
	padding: 1rem;
	word-break: break-all;
}
.ta1 th {
	width: 30%;
	text-align: left;
	background: #eee;
}

/* reCAPTCHA v3 バッジを左下に移動 */
.grecaptcha-badge {
	width: 70px !important;
	overflow: hidden !important;
	transition: all 0.3s ease !important;
	left: 5px !important;
	bottom: 25px !important;
}
.grecaptcha-badge:hover {
	width: 256px !important;
}

/*slideup3会社概要画像*/
.slideup3 {
    height: 20vw;	/*画像高さを指定*/
}

/*テーブル（ta2）会社概要で使用
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2 caption {
	font-weight: bold;		/*太字に*/
	padding: 0.5rem 1rem;	/*ボックス内の余白*/
	background: var(--secondary-color);	/*背景色 冒頭のsecondary-colorを読み込みます。*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta2 {
	table-layout: fixed;
	width: 100%;				/*幅*/
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	margin-bottom: 2rem;		/*テーブルの下に空けるスペース。２文字分。*/
}
/*tr（１行分）タグ設定*/
.ta2 tr {
	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta2 td, .ta2 th {
	word-break: break-all;
	color: var(--secondary-color);	/*文字色。冒頭のsecondary-colorを読み込みます。*/
	text-align: left;	/*左よせにする*/
	padding: 0.5rem;	/*余白*/
}

/*th（左側）のみの設定*/
.ta2 th {
	width: 25%;			/*幅*/
	text-align: center;	/*テキストをセンタリング*/
}


/*ヘッダー下部のSCROLLアニメーション
---------------------------------------------------------------------------*/
/*アニメーション設定*/
@keyframes scroll-line-parts {
  0% {transform: scaleY(1);}
  50% {transform: scaleY(0);}
  100% {transform: scaleY(0);}
}

/*ラインアニメーションを囲むブロック*/
.scroll-container-parts {
	position: absolute;
	width: 100px;
	left: calc(50% - 50px);
	top: calc(var(--vh) - 90px);	/*90px部分が画面の下からの配置場所。アニメーションブロック本体も入れての配置なので0にしてしまうとスライドの下（枠外）になってしまうので注意。*/
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.7rem;	/*SCROLLのテキストのサイズ。70%*/
	color: #fff;		/*文字色*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くする*/
}

/*ラインアニメーションの土台部分*/
.scroll-line-parts {
	margin: 0 auto;
	position: relative;
	width: 1px;		/*ラインアニメーションの幅。お好みで。*/
	height: 42px;	/*ラインアニメーションの高さ。お好みで。*/
	background: rgba(255,255,255,0.5);	/*ラインアニメーションの土台部分の色。255,255,255は白のことで0.5は色が50%出た状態。*/
}

/*ラインアニメーション本体*/
.scroll-line-parts span {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #fff;	/*ラインアニメーションの色*/
	animation: scroll-line-parts 2s infinite;	/*2sがアニメーションにかける時間。2秒。*/
	transform-origin: bottom;
}

.logo-main * {margin: 0;padding: 0;}

/*ブロック全体*/
.logo-main {
	position: absolute;
	top: 50vh;	/*上から80%の場所に配置*/
	left: 50vw;
	transform: translate(-50%, -50%);
	z-index: 10;
	width: 350px;	/*ロゴの幅*/
	/*width: 80vw;	/*幅は80%*/
	/*margin-left: 10vw;	/*左に10%空ける*/
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	/*background: #fff;	/*背景色。*/
	/*border-radius: 5px;	/*角を丸くする*/
}

/*c2（２カラムレイアウト用）
---------------------------------------------------------------------------*/

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

	.c2 {
		display: flex;
		gap: 2rem;
	}

	/*左側のタイトルブロックの幅*/
	.c2 .title {
		width: 25%;
	}

	/*右側のテキストブロック*/
	.c2 .text {
		flex: 1;
	}

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

/*btn1（ボタン）
---------------------------------------------------------------------------*/
.btn1 a {
	text-shadow: none;display: block;text-decoration: none;
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	font-size: 1.4rem;		/*文字サイズ。140%に。*/
	padding: 0.5rem 2rem;	/*ボタン内の余白。上下、左右へ。*/
	border-radius: 100px;	/*角を丸くする*/
	text-align: center;		/*テキストをセンタリング*/
}

/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn1 a {
	background: var(--primary-inverse-color);		/*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);	/*文字色。冒頭のprimary-colorを読み込みます。*/
}

/*マウスオン時*/
.btn1 a:hover {
	opacity: 1;
	transform: scale(1.05);	/*105%に拡大*/
	background: var(--primary-inverse-color);	/*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);				/*文字色。冒頭のprimary-colorを読み込みます。*/
}
.button {
  display       : inline-block;
  border-radius : 8%;          /* 角丸       */
  font-size     : 1.5rem;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 8px 35px;   /* 余白       */
  background    : var(--primary-color);     /* 背景色     */
  color         : var(--primary-inverse-color);     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .8s;         /* なめらか変化 */
  box-shadow    : 3px 3px 7px var(--secondary-color);  /* 影の設定 */
  border        : 2px solid var(--primary-color);    /* 枠の指定 */
}
.button:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : var(--primary-color);     /* 背景色     */
  background    : var(--primary-inverse-color);     /* 文字色     */
}
.marker {background: linear-gradient(transparent 50%, yellow);}