/*----------------------------
* No.0 初期設定
*		font設定
*		margin/padding 初期化
*		google-icons 設定
*----------------------------*/

@font-face {
	font-family: "notosans-font";
	src: url("../fonts/Notosan_jp_light.ttf");
}

*{
	margin:0; padding:0;
}

/*
* Z-index 設定内容
*	header 80
*	menu_button 90
*	navi_menu  85  
*/
/*----------------------------
* No.1 body article footer 設定
*      h1,p等の文字設定
*----------------------------*/
body{
	background-color		: white;
}
article{
	margin-left: 1.5%;
	margin-right: 1.5%;
	background-image		: url(../img/back_img3.jpg);
	background-position-x	: 0px;
	background-position-y	: 0px;
	background-size			: 100%;
	background-repeat		: repeat-y;
	background-attachment	: scroll;

/*	border:1px solid black;*/
}
footer{
	text-align: right;
}
/* 幅が 1080以上　（タブレット横向き　PC対応） */
@media screen and (min-width:1080px) {
	article{
		margin-left: auto;
		margin-right: auto;
		width			: 1040px;
	}
}
	

/*--- h1,h2,h3,pタグ設定 ---*/

p{
	font-family	: notosans-font;
	font-size	: 16px;
	line-height	:1.8em;
	color		: #343333;
}

h1	{	/*　h1はheaderに表示されるロゴにのみ使用 */	
	font-family		: notosans-font; 
	font-weight		: normal;
	color			: white;
	text-align		: center;
	line-height 	: 80px;
}

h2{		/* h2タグは各ページの表題にのみ使用 */
	font-family		: notosans-font;
	font-weight		: normal;
	line-height		: 3;
	text-align		: center;
	letter-spacing	:0.01em;
	color			:#fc6899;
}
h3{	/* h3タグはTOPページのLinkボタンにのみ使用 */
	font-family		: notosans-font;
	font-weight		: normal;
	color			: white;
}

/*　幅が399以下　（スマホ対応） */
@media screen and (max-width: 399.9px) {
	p	{font-size: 0.94rem;}
	h1	{font-size	: calc(1.3125rem + ((1vw - 2.8px) * 7.563));}
	h2	{font-size: calc(1.25rem + ((1vw - 2.8px) * 3.3613));}
	h3	{font-size: calc(1.125rem + ((1vw - 2.8px) * 2.521));}
	
}	
/* 幅が400以上768以下　（スマホ横向き　タブレット対応） */
@media screen and (min-width:400px) and (max-width:768.9px) {
	body{font-size: 1.0rem;}
	h1	{font-size: 32.2px;}
	h2	{font-size: 26.5px;}
	h3	{font-size: 21.5px;}
}	
/* 幅が 768以上　（タブレット横向き　PC対応） */
@media screen and (min-width:769px) {
	p	{font-size: 1.07em;}
	h1	{font-size: 37px;}
	h2	{font-size: 30px;}
	h3	{font-size: 24px;}
}	


/*----------------------------
* No.2 header -logo-
*----------------------------*/
header {  /* headerのサイズとカラー指定*/
	top			: 0px;
	left		: 0px;		
	width		: 100%;
	height		: 80px;
	background	: #12aa31cc;
	box-shadow	: 0 7px 7px #666666; 

	position	: sticky; /*header固定*/
	z-index		: 80; /* z-indexは　headerの数値［80］を基準とする */
}
#header_logo{
	width		: 85%;
	height		: 100%;
}
@media screen and (min-width:1080px) {
	header{
		width			: 1080px;
		margin-left		: auto;
		margin-right	: auto;
	}
}	

/*----------------------------
*　No.3 menu_button
*----------------------------*/
#menu_btn {
	position    : absolute;
	top         : 17.5px;
	right       : 3%;
	width       : 42px;
	height      : 42px;
	border		: 2px solid white; 
	border-radius: 5px;
	cursor      : pointer;
	z-index     : 90;
	transition  : 0.5s;
}
#line1 {top	: 8.5px;	}
#line2 {top	: 20px;		}
#line3 {top	: 31.5px;	}
.inner_line {
	position	: absolute;
	left		: 4px;
	width		: 34px;
	height		: 2px;
	border-radius: 4px;
	background-color: white;
	transition	: 0.5s;
}
.line_1,.line_2,.line_3{
	background	: #12aa31cc;
}
.line_1 {
	transform	: translateY(11.5px) rotate(-45deg);
	top			: 0px;
}
.line_2 {
	opacity		: 0;
}
.line_3 {
	transform	: translateY(-11.5px) rotate(45deg);
	top			: 0px;
}

/*----------------------------
* No.4 navi_menu
*----------------------------*/
#navi_menu{ /* ナビメニュー準備と表示前状態設定　*/
	position		: fixed;
	top				: 0px;
	right			: 0px;
	width			: 80vw;  /*  ※※※　vw ブラウザ表示（幅）を基準としてNAV幅を指定している　*/
	height			: 390px; /*350px 文字の高さ＋marginで高さを算出し指定している　*/

	border-top		: none;
	border-right	: none;
	border-left		: 5px solid #12aa31cc;
	border-bottom	: 5px solid #12aa31cc;
	border-radius	: 0 0 0 20px;
	z-index			: 85;
	background		: rgb(255,255,255,0.95);
	transform		: translateX(110vw); /*ブラウザ幅100％（つまり右端）を起点に表示している。右端を起点として表示しているので実際には見えない。*/
	transition		: all .5s linear;

	padding-top		: 20px;
	padding-left	: 20px;
	padding-right	: 20px;
}
#navi_menu.active{ /* ナビメニュー出現 　クリックでtoggle("active"）を付け外ししている*/
	transform	: translateX(0); /*ブラウザ幅0％（つまり左端）を表示起点に変更することでメニューを出現させている。*/
}

#navi_menu span{
	font-family	: notosans-font;
	margin		: 0px 0px;
	line-height	: 45px;
	letter-spacing: 0.1em;
	color		: #157a29;
}
#navi_menu i{/*google-iconの表示設定*/
	margin		: 0px 0px;
	font-size	: 16px;
	line-height	: 45px;
	vertical-align: -0.25em; 

	color		: #157a29;
}
#navi_menu a{
	font-family	: notosans-font;
	margin		: 0px 0px;
	line-height	: 45px;
	letter-spacing: 0.1em;
    text-decoration: none;
	color		: #157a29;
}
#navi_menu a.a2{
	padding-left: 1em;
}
#navi_menu hr{	border-top: 1px solid #12aa31cc;}



/*　幅が399以下　（スマホ対応） */
@media screen and (max-width: 399.9px) {
	#navi_menu span	{font-size: calc(1rem + ((1vw - 2.8px) * 2.521));}
	#navi_menu a	{font-size: calc(1rem + ((1vw - 2.8px) * 2.521));}
	#navi_menu a.a2	{font-size: calc(0.9375rem + ((1vw - 2.8px) * 1.6807));}
}		
/* 幅が400以上768以下　（スマホ横向き　タブレット対応） */
@media screen and (min-width:400px) and (max-width:768.9px) {
	#navi_menu span	{font-size: 19px;}
	#navi_menu a	{font-size: 19px;}
	#navi_menu a.a2	{font-size: 17px;}
}	
/* 幅が 768以上　（タブレット横向き　PC対応） */
@media screen and (min-width:769px) {
	#navi_menu span	{font-size: 19px;}
	#navi_menu a	{font-size: 19px;}
	#navi_menu a.a2	{font-size: 17px;}
}	

/*　NAVI_Menu の　menu表示のために340px以下のNavi_menuのWidthを変更 */
@media screen and (max-width: 339.9px) {
	#navi_menu 		{width	: 80vw;}
}