/*******************************************************/
/*                                                     */
/* 全体スキンの編集(共通）　　　　　　　　　　                */
/*                                                     */
/*******************************************************/


/* ボディ */
body
{
	margin: 0 ;			/* スペース */
	padding: 0 ;			/* 余白 */
	line-height: 1.5em;
	font-family: "メイリオ", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
/*	background:  url(../images/bkskin.jpg);				/* 背景色(確認用) */
	background: #000;
}

/*******************************************************/
/*                                                     */
/* ヘッダ部分の定義                                    */
/*                                                     */
/*******************************************************/

.header
{
	width: 100%;
	height: auto;
/*	border-bottom: 5px solid #23c3a4 ;			/* 枠線 */
	text-align: center ;				/* テキスト、画像の真ん中寄せ */
	padding: 5px 0;				/* 上下の余白 (上・左右・下)*/
/*	margin-bottom: 3px ;				/* 他のブロックとのスペース */
/*	background:  #23c3a4;				/* 背景色(確認用) */
}
.header-wrapper
{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto ;			/* １：ヘッダ画像　２：メニュー */
/*	background:  #f00;				/* 背景色(確認用) */
}

/*******************************************************/
/*                                                     */
/* コンテンツの定義                                    */
/*                                                     */
/*******************************************************/

/* パソコンフォーマットとスマホフォーマットサイズごと定義*/

/*******************************************************/
/*                                                     */
/* フッダ部分の定義                                    */
/*                                                     */
/*******************************************************/
	/* フッター */
footer
{
	padding: 0;
/*	border-top: 3px solid #000 ;			/* 枠線 */
	margin-bottom: 3px ;
	background: #000;
}

/*******************************************************/
/*                                                     */
/* パソコンフォーマット                                */
/*                                                     */
/*******************************************************/
@media screen and (min-width: 768px)
{
/*******************************/
/*      ヘッダ部分の定義       /
/*******************************/
	/******* ヘッダ画像の定義 *******/
	.header-pc
	{
		grid-column: 1;
		grid-row: 1;
		margin-left: auto;
		margin-right: auto;
	}
	.header-sm
	{
		display: none;
	}
	.logo
	{
		width: 100% ;		/* 横幅 */
		height: auto ;		/* 高さ */
	}

	/******* メニューの定義  ********/
	.header-menu
	{
		grid-column: 1;
		grid-row: 2;
	/*	background: linear-gradient(155deg, #9E9E9E 0%, #D0D0D0 30%, #E8E8E8 50%, #D0D0D0 70%, #9E9E9E 100%); */
	}
	#main-menu
	{
		text-align: center; 
		padding-left: 0;
	}
	#main-menu li
	{
		display: inline-block; /*横並びにします*/
		font-size: 16px;
		font-weight: bold;
		width: 165px;
		height: 40px;
		padding: 15px 0 0 0;
/*
		border-top: 6px solid #d8dcdc;
		border-right: 6px solid #666;
*/
		border-left: 4px solid #868888;
		border-radius: 0;
		border-bottom: 4px solid #333;
/*
		background-image: -webkit-linear-gradient(135deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
		background-image: linear-gradient(-45deg, #ccc 0%, #d8dcec 30%, #d8dcdc 34%, white 53%, #ccc 100%);
		background: linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
*/
		background: linear-gradient(155deg, #9E9E9E 0%, #D0D0D0 30%, #E8E8E8 50%, #D0D0D0 70%, #9E9E9E 100%);
	}
	#main-menu a 
	{
/*
		background-image: -webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #ffee08 47%, #e1ce08 50%, #e1ce08 53%, #e1ce08 63%, #b8751e 100%);
		background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #ffee08 47%, #e1ce08 50%, #e1ce08 53%, #e1ce08 63%, #b8751e 100%);
  		-webkit-background-clip: text;
  		-webkit-text-fill-color: transparent;
*/
/*
		background: linear-gradient(45deg, #FEE9A0 0%, #DAAF08 25%, #B67B03 50%, #DAAF08 85%, #FEE9A0 100%); 
		-webkit-background-clip: text;
*/
		font-weight: bold;
		text-align: center; 
	  	color: #000;
/*
		-webkit-text-stroke: 1px #fdfd75;
		text-stroke: 1px #fdfd75;
*/
		text-decoration: None;
	}
	#main-menu a:hover 
	{
		text-align: center; 
		text-decoration: underline;
	  	color: #f00;
		font-weight: bold;
	}
	/*  タブレット、スマホメニュー非表示  */
	.global_nav
	{
		display: none;
	}
	.toggle
	{
		display: none;
	}
/*******************************/
/*      コンテンツ部分の定義    /
/*******************************/
	.wrapper
	{
		margin : 0 auto;
		width: 1200px;
		padding: 0;
		background: #fff;
/*
		background: linear-gradient(50deg, #aaaaaa 0%, #ffffff 40%, #ffffff 60%, #ffffff 80%, #bbbbbb 90%);
*/
		border: 10px outset #B7B5AF;
	}
/*******************************/
/*      フッダの定義            /
/*******************************/
	.footer-wrapper
	{
		margin: 0 auto;
		width: 1200px;
		font-size: 14px;
		padding:10px;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
	}
	.footer1
	{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		grid-template-columns: 900px 1fr;
		grid-template-rows: auto;
	}
	.footer1-1
	{
		grid-column: 1;
		grid-row: 1;
		text-align: left;
	}
	#footer-menu
	{
		padding-left: 0;
	}
	#footer-menu li
	{
		display: inline-block; 
		font-weight: bold;
		padding: 0 3px;
		font-size: 14px;
	}
	#footer-menu li+ li
	{
		border-left: 1px solid #fff;
	}
	#footer-menu a 
	{
		font-weight: bold;
		text-align: center; 
	  	color: #fff;
		text-decoration: underline;
	}
	#footer-menu a:hover 
	{
		text-align: center; 
		text-decoration: underline;
	  	color: #f00;
		font-weight: bold;
	}
	.footer1-2
	{
		grid-column: 2;
		grid-row: 1;
		text-align: right;
		padding-right: 20px;
	}
	#footer-sns
	{
		padding-left: 0;
	}
	#footer-sns li
	{
		display: inline-block; 
		font-weight: bold;
		padding: 5px 0;
	}
	.footer2
	{
		grid-column: 1;
		grid-row: 2;
		padding-right: 10px;
		padding-bottom: 10px;
		text-align: center;
	}
	.footer2 p
	{
		color: #ffffff;
	}
}
.pagetop {
	color: #070707;
	background: linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
	background-repeat: no-repeat;
	text-decoration: none;
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	font-size: 30px;
	font-weight: bold;
	width: 3.3rem;
	height: 3.3rem;
	line-height: 3.3rem;
	border-radius: 3.3rem;
	text-align: center;
	cursor: pointer;
}

.pagetop:hover {
	color: #f10 !important;
	font-size: 30px;
	font-weight: bold;
	background: linear-gradient(90deg, #757575  0%, #9E9E9E 10%, #E8E8E8 45%, #9E9E9E 85%, #757575 100%);
	text-decoration: none;
}

/*******************************************************/
/*                                                     */
/*スマホフォーマット                                   */
/*                                                     */
/*******************************************************/
@media screen and ( max-width:768px )
{
	.header-pc
	{
		display: none;
	}
	.header-sm
	{
		grid-column: 1;
		grid-row: 1;
	}
	.logo
	{
		width: 100% ;		/* 横幅 */
		height: auto ;		/* 高さ */
	}
	.header-menu
	{
		display: none;
	}

	.toggle 
	{
	    position: fixed; /* bodyに対しての絶対位置指定 */
	    right: 10px;
	    top: 5px;
	    display: block;
	    width: 45px;
	    height: 50px;
	    cursor: pointer;
	    z-index: 3;
	    background: linear-gradient(90deg, #9E9E9E 0%, #D0D0D0 30%, #E0E0E0 50%, #D0D0D0 70%, #9E9E9E 100%);
	}
	.toggle span 
	{
		display: block;
		position: absolute; /* .toggleに対して */
	 	width: 70%;
		border-bottom: solid 3px #fff;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
		padding-top: 5px;
		right: 7px;
	}
	.toggle span:nth-child(1) 
	{
		top: 3px;
	}
	.toggle span:nth-child(2) 
	{
		top: 13px;
	}
	.toggle span:nth-child(3) 
	{
		top: 23px;
	}
	.toggle span:nth-child(4) 
	{
	 	border: none;
		top: 28px;
		left: 5px;
		font-size: 10px;
		font-weight: bold;
		color: #fff;
	}

	/* 最初のspanをマイナス45度に */
	.toggle.active span:nth-child(1) 
	{
		top: 15px;
		left: 4px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	/* 2番目と3番目のspanを45度に */
	.toggle.active span:nth-child(2),
	.toggle.active span:nth-child(3) 
	{
		top: 15px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	/* .global_nav */
	.global_nav 
	{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		transform: translateY(-100%);
		z-index: 2;
		padding-top: 5px;
		text-align: center;
		background: linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%);;
		transition: all 0.8s;  
		-webkit-text-stroke: 1px #b39855;
		text-stroke: 1px #b39855;

	}
	.global_nav .nav_li 
	{
		width: 100%;
		padding: 10px;
		list-style-type: none;
	}
	.global_nav .nav_li a
	{
		display: block;
		-webkit-text-stroke: 1px #b39855;
		text-stroke: 1px #b39855;
	}
	/* .global_navに.activeが追加 */
	.global_nav.active 
	{
		transform: translateY(0%);
	}
/**** コンテンツ ****/
	.wrapper
	{
		margin: 0 auto;
/*
		background: linear-gradient(50deg, #aaaaaa 0%, #ffffff 40%, #ffffff 60%, #ffffff 80%, #bbbbbb 90%);
*/
		background: #fff;
		border: 10px outset #B7B5AF;
	}
	.contents
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
	/*
	/******* footer 編集 *******/*
	.footer-wrapper
	{
		margin: 0 auto;
		font-size: 14px;
		padding:10px;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
	}
	.footer1
	{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
	.footer1-1
	{
		display: none;
	}
	#footer-menu
	{
		display: none;
	}
	#footer-menu li
	{
		display: inline-block; 
		font-weight: bold;
		padding: 0 3px;
		font-size: 14px;
	}
	#footer-menu li+ li
	{
		border-left: 1px solid #fff;
	}
	#footer-menu a 
	{
		font-weight: bold;
		text-align: center; 
	  	color: #fff;
		text-decoration: underline;
	}
	#footer-menu a:hover 
	{
		text-align: center; 
		text-decoration: underline;
	  	color: #f00;
		font-weight: bold;
	}
	.footer1-2
	{
		grid-column: 1;
		grid-row: 2;
		text-align: right;
		padding-right: 20px;
	}
	#footer-sns
	{
		padding-left: 0;
	}
	#footer-sns li
	{
		display: inline-block; 
		font-weight: bold;
		padding: 5px 0;
	}
	.footer2
	{
		grid-column: 1;
		grid-row: 2;
		padding-right: 10px;
		padding-bottom: 10px;
		text-align: center;
	}
	.footer2 p
	{
		color: #ffffff;
	}
}