@charset "utf-8";


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


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');


/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/

@import url("inview.css");



/*fadeInのキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*fadeOutのキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;visibility: hidden;}
}

/*========= 光りながら出現させるためのCSS ===============*/

.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out forwards; }

@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}




/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

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

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

	html, body {
		font-size: 15px;
	}

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

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

	html, body {
		font-size: 16px;
	}

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


body {
	margin: 0;padding:0;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo,"sans-serif";	
	font-optical-sizing: auto;
	font-weight: 400;
	-webkit-text-size-adjust: none;
	background: #fff;	
	color: #323232;	/*文字色。冒頭で指定しているbase-inverse-colorを読み込みます。*/
	line-height: 2;		/*行間*/
}

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


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

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

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

/*section*/
section {
	overflow-x: hidden;
	padding: var(--space-large);	
}


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

/*マウスオン時*/
a:hover {
	text-decoration: none;	/*下線を消す*/
	opacity: 0.9;			/*色を90%だけ出す*/
}


.pc { display:block; }
.tb { display:block; } 
.sp { display:none; }

@media screen and (max-width: 900px){   
  .pc { display:block; }
  .tb { display:block; } 
  .sp { display:none; }
}

@media screen and (max-width: 480px){   
  .pc { display:none; }
  .tb { display:none; } 
  .sp { display:block; }
}

/*loading（ローディング）
---------------------------------------------------------------------------*/
@keyframes progress {
	0% {transform: scaleX(0);}
	100% {transform: scaleX(1);}
}

/*ロゴ画像*/
#loading img {
	width: 100px;	/*画像の幅*/
	margin-bottom: 20px;	/*ローディングバーとの間のスペース調整*/
}

/*ローディングブロック*/
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #437F00;	/*背景色*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeOut 1s ease 2s forwards;
}

/*プログレスバーの土台*/
.progress-container {
    width: 300px;		/*幅。お好みで。*/
    height: 4px;		/*高さ。お好みで。*/
    border-radius: 2px;	/*角をほんの少し丸くする*/
    background: #437F00;	/*バーのベースカラー*/
    overflow: hidden;
}

/*プログレスバー*/
.progress-bar {
    width: 100%;
    height: 100%;
    background: #fff;	/*進行中のバーの色*/
    animation: progress 2s linear;  /*#loadingのanimation時間に合わせて2秒に設定*/
    transform-origin: left;
}


/*container（サイト全体を囲むボックス）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	width: 100%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;	/*ヘッダーの高さ*/
	background-color: #fff;
}
	/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

	header {
		height: 90px;	/*ヘッダーの高さ*/
	}

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

/*ロゴ画像*/
#logo img {
	display: block;
	width: 240px;	/*ロゴの幅*/
}
#logo {
	margin: 0;padding: 0;
	padding-left: 2vw;	/*ロゴの左側に空ける余白*/
}

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

	/*ロゴ画像*/
	#logo img {
		width: 260px;	/*ロゴの幅*/
	}

}
@media screen and (max-width:480px) {
	#logo img {
		width: 220px;	/*ロゴの幅*/
	}
}

/*ヘッダー内メニュー
---------------------------------------------------------------------------*/
/*940px未満では非表示*/
header nav ul {display: none;}

	/*画面幅900px以上の追加指定*/
@media screen and (min-width:940px) {
		
	/*メニューブロック全体の設定*/
	header > nav > ul {
		margin: 15px 80px 0 0;
		display: flex;
	}

	/*メニュー１個あたりの設定*/
	header nav li a {
		display: block;text-decoration: none;
		font-size: 1rem;		/*文字サイズ90%*/
		padding: 0.5rem 1rem;	/*メニュー内の余白。上下、左右へ。*/
	}
	header nav li a:hover{
		color:#438000;
	}
}


/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
header nav ul ul,
.small-screen #menubar ul ul {
	animation: fadeIn 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------
/*ドロップダウンメニューブロック全体
header nav ul ul {
	position: absolute;
	
	z-index: 100;
}
*/
/*メニュー１個あたりの設定
header nav ul ul a {
	padding: 0.3em 1em;				
	margin-top: 4px;					
	background-color: #FFEAF4;
	margin-left: 1rem;
	border: 1px solid #F1C6E4;	
	border-radius: 5px;				
}
*/

/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}
#menubar a:hover{color:#3A7E0C}
/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}


/*メニューブロック内のロゴ画像の幅*/
#menubar .logo {
	width: 250px;
}


/*開閉メニュー
---------------------------------------------------------------------------*/
/*animation1のキーフレーム設定*/
@keyframes animation1 {
	0% {right: -100vw;}
	100% {right: 0px;}
}

/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 10px 10vw 50px;
	background-color: #AFCB83;
	color: #fff;	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	animation: animation1 0.2s both;		/*animation1を実行する。0.2sは0.2秒の事。*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar li {
	margin: 1rem 0;			/*メニューの外側に空けるスペース。上下、左右への順番。*/
}
.small-screen #menubar a {
	border-radius: 5px;		/*角を丸くする指定*/
	padding: 1rem 2rem;		/*メニュー内の余白。上下、左右へ。*/
	background-color: #76A83E;
	color: #fff;
}
.small-screen #menubar a:hover{
	color: #306A08
}
/*子メニュー*/
.small-screen #menubar ul ul a {
	background: #ff6699;		/*背景色。冒頭のbase-colorを読み込みます。*/
	color: #fff;	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	border: 1px solid #ff3366;	/*枠線の幅、線種、varは色の指定で冒頭のbase-inverse-colorを読み込みます。*/
	margin-left: 2rem;	/*左に空けるスペース*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: fadeIn 0s 0.2s both;
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: 10px;				/*右からの配置場所指定*/
	top: 15px;				/*上からの配置場所指定*/
	padding: 20px 15px;		/*上下、左右への余白*/
	width: 55px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 60px;			/*高さ*/
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transform-origin: right top;
	background-color:#437F00;

}



/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 2px solid #fff;	/*線の幅、線種、varは色のことで冒頭のbase-colorを読み込みます。*/
}

/*×印が出ている状態の3本バーの背景色*/
#menubar_hdr.ham {
	background-color: #437F00;

}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(7px, 7px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(6px, -7px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}


/*メイン画像
---------------------------------------------------------------------------*/
/*ブロック全体*/
#mainimg {
	width: 100%;
	margin-top: 80px;
}



/*main
---------------------------------------------------------------------------*/
.main {
	width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	background-color: #fff;
}
.main1 {
	width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	background-image:url("../images/pickup_bg_l.png"),url("../images/pickup_bg_r.png");
	background-repeat: no-repeat,no-repeat;
	background-position: left,right;
	background-size: 15%,15%;
}
.main2 {
	width: 100%;
	margin: 0 auto;
	background-color: #E0F2FF;
}
.main2 {
	width: 100%;
	margin: 0 auto;
	background-color: #E0F2FF;
}

@media screen and (max-width:900px){
.main1 {
	width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	background-image:url("../images/pickup_bg_l.png"),url("../images/pickup_bg_r.png");
	background-repeat: no-repeat,no-repeat;
	background-position: left top 20px,right bottom 20px;
	background-size: 15%,15%;
}
}

@media screen and (max-width:480px){
.main1 {
	width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	background-image:url("../images/pickup_bg_l.png"),url("../images/pickup_bg_r.png");
	background-repeat: no-repeat,no-repeat;
	background-position: left top,right bottom;
	background-size: 30%,30%;
}
}


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

footer {
	width: 100%;
	background-color:#95C6DF;
	padding: 60px 0 0 0;
}

.footer_menu{
	width: 100%;
	color: #fff;	/*文字色。*/
	padding: 0 0 40px 0;
	margin: -20px 0 0;
}
.footer_menu_inner{
	position: relative;
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	max-width: 1000px;
}
.menu_info{
	width:280px; 
	text-align: center;
	margin: 0 50px 0 0;
	font-size: 0.9rem;
	line-height: 1.5rem;
}
.menu_list {
	padding: 0;
	display: flex;
	margin: 0 0 20px 0;
}
.menu_list ul{
	list-style: none;
	padding: 5px 20px;
}
.menu_list ul a{
	font-weight: 400;
	color: #fff;
	text-decoration: none;
}
.menu_list a:hover{
	color: #0d6094;
}
.fooot_contact{
	width: 120px;
	margin: 10px auto;
}
.foot_tel a{
	letter-spacing: 0.2rem;
	text-decoration: none;
}
.foot_tel a:hover{
	color: #0d6094;
}
.fooot_contact img:hover{
	-webkit-transform: translateY(-2px);
	        transform: translateY(-2px);
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.2));
}
.footer_small {
	text-align: right;
	margin-right: 40px;
}

.footer_contact {
	margin: 15px auto;
	display: flex;
}

	

.icons i {
	font-size: 30px;	/*アイコンサイズ*/
}

@media screen and (max-width:900px){
.footer_menu_inner{
	position: relative;
	width: 40%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	max-width: 280px;
}
.menu_info{
	width:270px; 
	text-align: center;
	margin: 0 auto 0;
	font-size: 1rem;
	line-height: 1.5rem;
}
.menu_list{
	display: none
	}
.footer_small {
	text-align: center;
	margin: 20px auto;
}
}

@media screen and (max-width:480px){
.footer_menu_inner{
	position: relative;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 480px;
}
.menu_info{
	width:80%; 
	text-align: center;
	margin: 0 auto 0;
	font-size: 1rem;
	line-height: 1.5rem;
}
	.menu_info img{
		width: 70%;
	}
.fooot_contact img{
		width:100%;
	}
.menu_list{
	display: none
	}
.footer_small {
	font-size: 0.8rem;
	text-align: center;
	margin: 20px auto -20px;
}
}
/*==================================================
機能編 8-1-4 ページの指定の範囲内で出現（下から上)
===================================*/

/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:1rem;
	line-height: 1.2rem;
	transition:all 0.3s;
	background-color:#447E00;
	border-radius: 3px;
}

#page-top a:hover{
	background-color: #70A127;

}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:100px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateX(100px);
}

#page-top span{
    display: inline-block;
  width: 13px;
  height: 13px;
  border-top:1px solid #fff;
  border-left: 1px solid #fff;
  transform: rotate(45deg);
    margin: 8px 0 0 0;
}



/*　左の動き　*/

#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}