@charset "utf-8";

/*------------------------------*/
/* 全体設定 */
/*------------------------------*/
body {
	font-size:14px;
	line-height: 1.8;
}

/*------------------------------*/
/* ヘッダー */
/*------------------------------*/
.header_fixed {
	position: fixed;
	width:100%;
	top:-100%;
	left:0px;
	background-color: #595757;
	z-index: 2;
	transition: 0.3s;
}

/* メインロゴ */
.main_logo {
	height: 100%;
	width: auto;
	max-height: 30px;
}

/* メインメニューボタン */
.main_menu_button {
	display: block;
	width:100%;
	text-align: center;
	color: #ffffff;
}

/* ヘッダー枠 */
.header_flame {
	width:100%;
	position: relative;
}

/*------------------------------*/
/* 画面左上の表題 */
.view_title {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 40px;
  height: 210px;
  padding: 50px 0px 50px 0px;
  background-color: #5bb431;
  color: white;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
	font-size:18px;
}

/*------------------------------*/
/* メインコンテンツ */
/*------------------------------*/

/* 各ページのメインヘッダー枠 */
.main_header_frame {
	height:600px;
}
/* タブレット */
@media only screen and (max-width:1024px) {
	.main_header_frame {
		height:450px;
	}
}
/* スマホ */
@media only screen and (max-width:599px) {
	.main_header_frame {
		height:300px;
	}
}

/* ミニアイコン */
.mini_icon_1 {
	background-color:#cccccc;
	padding: 0px 10px;
	border-radius:10px;
	font-size:12px;
	color:#ffffff;
	margin-left: 5px;
	white-space:nowrap;
}

/*------------------------------*/
/* フッター */
/*------------------------------*/

/* フッター上部枠 */
.footer_top_image_frame {
	height: 200px;
	background-image: url('/image/footer_top_image.svg');
	background-repeat: repeat-x;             /* 横方向のみループ */
	background-position: center bottom;       /* X軸中央、Y軸下 */
	background-size: auto 100%;               /* 高さを枠に合わせる、横幅は自動 */
}

.footer_box {
	background-color:#5bb431;
	color:#ffffff;
	padding:50px 20px;
}
/* フッターロゴ */
.footer_logo {
	width:100%;
	max-width: 400px;
}

/* 電話アイコン */
.tel_icon {
	height:30px;
	width:auto;
}

/* スマホ */
@media only screen and (max-width:599px) {
	.sp_padding_side_10 {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/*------------------------------*/
/* モバイルメニューボックス内のロゴ */
.footer_logo_mobile_nav {
	width:100%;
	max-width: 200px;
}

/* モバイル用メニューボタン */
.mobile_menu_button {
	border:1px solid #ffffff;
	display:block;
	margin-bottom:10px;
	padding:10px;
	color:#ffffff;
	transition: 0.3s;
}
.mobile_menu_button:hover {
	background-color: #4d7e2b;
}

/*------------------------------*/
/* メールでのお問い合わせボタン */
.icon_button_frame {
	width: 100%;
	max-width: 270px;
	height: 55px;
	background-color: #ffffff;
	border-radius: 5px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.5s;
}
.icon_button_frame:hover {
	transform: translateY(-5px);
}

.icon_button_inner {
	width: 150%; /* 子要素幅 */
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #f0f0f0;
	transform-origin: left center;
	transition: transform 0.2s linear;
	z-index: 0;

	transform: translateX(-175%) skewX(40deg); /* スタート位置：親の左端から -175% */
}
.icon_button_frame:hover .icon_button_inner {
	transform: translateX(-25%) skewX(40deg); /* 終了位置：親の左端から -25% */
}

.icon_button_svg {
	position: relative;
	z-index: 1;
	pointer-events: none;
	height: auto;
	width: calc(100% - 40px);
}

/*------------------------------*/
/* ツリーT字型の背景 */
.menu_item_with_children  {
  background-image: url('/image/tree_branch_connector.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ツリーL字型の背景 */
.menu_item_last_child {
  background-image: url('/image/tree_leaf_end.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/*------------------------------*/
/* 共通 */
/*------------------------------*/
/* 線 */
.border_right_ffffff {
	border-right: 1px solid #ffffff;
}
.border_top_000000 {
	border: none;
	border-top: 1px solid #000000;
}
.border_all_ffffff {
	border: 1px solid #ffffff;
}
.border_top_ffffff {
	border: none;
	border-top: 1px solid #ffffff;
}
.border_top_ffffff_d {
	border: none;
	border-top: 1px dotted #ffffff;
}

/* フォントカラー */
.color_5bb431 {
	color:#5bb431;
}

/* 背景色 */
.background_color_5bb431 {
	background-color:#5bb431;
}

/*------------------------------*/
/* アニメーション文字[ホバー] (layout.js) */
/*------------------------------*/
/* ホバー前の共通スタイル */
.hover_trigger_01 span {
	display: inline-block;
	transition: 0.3s;
}
.hover_trigger_01_after {
	color: #5bb431;
	text-decoration: underline;
}

.hover_trigger_02 span {
	display: inline-block;
	transition: 0.3s;
}
.hover_trigger_02_after {
	color: #285a10;
	text-decoration: underline;
}

/*------------------------------*/
/* トップへ戻るボタン */
/*------------------------------*/
.js_scroll_top_button {
	width:50px;
	height:50px;
	position: fixed;
	z-index: 102;
	bottom: 120px;
	right:10px;
	background-color: #5bb431;
	color: #666666;
	border:1px solid #ffffff;
	border-radius:2px;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	-webkit-user-select: none; /* Chrome or Safari */
	-webkit-touch-callout: none; /* Android and iOS*/
	-moz-user-select: none; /* FireFox */
	-ms-user-select: none; /* IE */
	-o-user-select: none; /* Opera */
	user-select: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* スマホハイライトカラー */
	display: none;
	transition:0.3s;
}
.js_scroll_top_button:hover {
	background-color: #4d7e2b;
}

/* 上矢印 */
.up_arrow {
	position: absolute;
	top:50%;
	left:50%;
	width:40%;
	height:40%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}

/*------------------------------*/
/* ハンバーガーボタン */
/*------------------------------*/
.js_menu_switch {
	width:50px; /* 外幅 */
	height:50px; /* 外高 */
	right:10px;
	bottom: 60px;
	position: fixed;
	z-index: 102;
	background-color:#5bb431;
	color: #666666;
	border:1px solid #ffffff;
	border-radius:2px;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	-webkit-user-select: none; /* Chrome or Safari */
	-webkit-touch-callout: none; /* Android and iOS*/
	-moz-user-select: none; /* FireFox */
	-ms-user-select: none; /* IE */
	-o-user-select: none; /* Opera */
	user-select: none;
	padding:15px 12px; /* [外高 - (三本線の高さ / 2)] [左右スペース] */
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* スマホハイライトカラー */
	transition:0.3s;
}
.js_menu_switch:hover {
	background-color:#4d7e2b;
}

/*-----*/
/* 外枠の半分の高さ + 棒の太さ = 偶数で安定 */
.js_menu_trigger {
	position: relative;
	box-sizing: border-box;
	height: 20px; /* 三本線の高さ */
}
.js_menu_trigger div {
	transition:0.5s;
	position:absolute;
	width:100%;
	height:2px; /* 棒の太さ */
}
.js_menu_trigger div:nth-of-type(1) {
	background-color:#ffffff;
	top:0px;
}
.js_menu_trigger div:nth-of-type(2) {
	background-color:#ffffff;
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
}
.js_menu_trigger div:nth-of-type(3) {
	background-color:#ffffff;
	bottom:0px;
}

/*------------------------------*/
/* モバイルメニュー枠 */
/*------------------------------*/
.js_mobile_nav {
	/* right:-100%; /* 右 */
	background-color: #5bb431;
	border-right:1px solid #cccccc;
	position:fixed;
	box-sizing:border-box;
	top:0px;
	width:100%;
	max-width:300px;
	z-index:101;
	overflow:auto;
	height:100%;
	left:-100%; /* 左 */
	padding:10px 20px 200px 20px;
	transition:0.3s;
}

/*------------------------------*/
/* ページャー用ボタン */
.center_wrapper {
	text-align: center;
}
.pager_button_off, .pager_button_on {
	min-width: 30px;
	display: inline-block;
	text-align: center;
	padding: 4px 4px;
	margin: 6px 2px;
	text-decoration: none;
	color: #4d7e2b;
	background-color: #efefef;
	user-select: none;
	transition: 0.2s;
}
.pager_button_on {
	background-color: #5bb431;
	color: #ffffff;
}
/* ホバー効果 */
.pager_button_off:hover {
	background-color: #4d7e2b;
	color: #ffffff;
}

/*------------------------------*/
/* アニメーション文字[ホバー] (layout.js) */
/*------------------------------*/
/* ホバー前後のスタイル */
.pop_text_css_01 {
	transition: 0.5s;
}
.pop_text_css_01_after {
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
}

/*------------------------------*/
/* アニメーション文字[プレビュー] (layout.js) */
/*------------------------------*/
/* 変化前のスタイル */
.animation_css_01 {
	position: relative;
	opacity: 0;

	--property_animation_css_01: opacity; /* アニメーションに使用するプロパティ */
	--duration_animation_css_01: 80ms; /* 要素単体の実行時間 (AT) */
	--delay_animation_css_01: -50ms; /* 次の要素開始までの時差 (DT) AT-DT=SP*/

	transition-property: var(--property_animation_css_01);
	transition-timing-function: steps(20,end);
	transition-duration: var(--duration_animation_css_01);
	transition-delay: calc((var(--duration_animation_css_01) + var(--delay_animation_css_01)) * var(--index,0) + var(--delay_animation_css_01));
}
/* 変化後のスタイル [.挙動前のクラス名_after] [.変化前のスタイル] */
.animation_css_01_after .animation_css_01 {
	opacity: 1;
	will-change: var(--property_animation_css_01); /* 処理軽減 */
}

/*------------------------------*/
/* 変化前のスタイル */
.animation_css_02 {
	position: relative;
	opacity: 0;
	top:20px;

	--property_animation_css_02: top, opacity; /* アニメーションに使用するプロパティ */
	--duration_animation_css_02: 70ms; /* 要素単体の実行時間 (AT) */
	--delay_animation_css_02: -40ms; /* 次の要素開始までの時差 (DT) AT-DT=SP*/

	transition-property: var(--property_animation_css_02);
	transition-timing-function: steps(20,end);
	transition-duration: var(--duration_animation_css_02);
	transition-delay: calc((var(--duration_animation_css_02) + var(--delay_animation_css_02)) * var(--index,0) + var(--delay_animation_css_02));
}
/* 変化後のスタイル [.挙動前のクラス名_after] [.変化前のスタイル] */
.animation_css_02_after .animation_css_02 {
	opacity: 1;
	top:0px;
	will-change: var(--property_animation_css_02); /* 処理軽減 */
}

/*------------------------------*/
/* 変化前のスタイル */
.animation_css_03 {
	position: relative;
	opacity: 0;
	left:20px;

	--property_animation_css_03: left, opacity; /* アニメーションに使用するプロパティ */
	--duration_animation_css_03: 100ms; /* 要素単体の実行時間 (AT) */
	--delay_animation_css_03: -30ms; /* 次の要素開始までの時差 (DT) AT-DT=SP*/

	transition-property: var(--property_animation_css_03);
	transition-timing-function: steps(20,end);
	transition-duration: var(--duration_animation_css_03);
	transition-delay: calc((var(--duration_animation_css_03) + var(--delay_animation_css_03)) * var(--index,0) + var(--delay_animation_css_03));
}
/* 変化後のスタイル [.挙動前のクラス名_after] [.変化前のスタイル] */
.animation_css_03_after .animation_css_03 {
	opacity: 1;
	left:0px;
	will-change: var(--property_animation_css_03); /* 処理軽減 */
}

/*------------------------------*/
/* 変化前のスタイル */
.animation_css_04 {
	position: relative;
	opacity: 0;

	--property_animation_css_04: opacity; /* アニメーションに使用するプロパティ */
	--duration_animation_css_04: 400ms; /* 要素単体の実行時間 (AT) */
	--delay_animation_css_04: -390ms; /* 次の要素開始までの時差 (DT) AT-DT=SP*/

	transition-property: var(--property_animation_css_04);
	transition-timing-function: steps(20,end);
	transition-duration: var(--duration_animation_css_04);
	transition-delay: calc((var(--duration_animation_css_04) + var(--delay_animation_css_04)) * var(--index,0) + var(--delay_animation_css_04));
}
/* 変化後のスタイル [.挙動前のクラス名_after] [.変化前のスタイル] */
.animation_css_04_after .animation_css_04 {
	opacity: 1;
	will-change: var(--property_animation_css_04); /* 処理軽減 */
}