@CHARSET "UTF-8";


/*====================================================*/
/* 田中さんコード移設 */
/**/
/**/
/*====================================================*/

html {
  scroll-behavior: smooth;
}

body {
	font-size: 14px;
	color: #333333;
	font-family: 'M PLUS 2', sans-serif;
    font-weight: 300;
	background-color: #FFFFFF;
}


.copyright {
    clear: both;
    padding: 15px 0;
    text-align: center;
    background: #c8000a;
    color: #FFFFFF;
	font-weight: 200;
}


/*====================================================*/
/* 共通  (PC or スマホ用) */
/**/
/**/
/*====================================================*/

/*画像を最大に設定するが、画像のサイズ以上に大きくしない*/
.img-fluid {
  max-width: 100%;
  height: auto;
}


/*ページ全体のセンタリング*/
.page-border{	
	width:auto;
	margin:0 auto;
	padding:0;
}

main{
	margin-top:10px;
}	
	
/*******************************************/
/*  */
/* 共通 (PC用) */
/*  */
/*******************************************/
@media (min-width: 768px) {

	.page-border{	
		width:1400px;
	}
}	

	
/*====================================================*/
/* ヘッダ部分（スマホ） */
/**/
/**/
/*====================================================*/
	
/*横並びにする*/	
header{
	display:flex;
	align-items: center;
	padding:0;
	margin:0;
	height:70px;
}

/*左側ロゴ部分*/
header .left{
	width:60vw;				/*画面サイズ横幅６０％*/
	padding:0px 0 0 20px;
}	
	
/*右メニュー部分*/
header .right{
	margin-left:auto;
	padding-right:20px;
}


/*******************************************/
/*  */
/* ヘッダ部分 (PC用) */
/*  */
/*******************************************/
@media (min-width: 768px) {

	header{
    display: flex;
    align-items: center;
    padding: 20px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 10px;
	}

	header .left{
		width:500px;
	}

	header .right{
		width:calc(100% - 500px);
	}
	
	/*ロゴ画像を小さくするためH1の中でスペースを作る*/
	header h1{
		margin:0;
		padding:0 160px 0 50px;	
	}
}