@charset "UTF-8";
/***********************************
* body *
***********************************/
body{
	font-family: "Noto Sans Japanese", "Meiryo UI", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000000;
	/* background: linear-gradient(-45deg, #fcf7f8 40%, #a9cde9 70%, #6eb1e5 100%); */
	background-color: #fff;
}
/* 明朝体フォント*/
.serif{
	font-family: 'Noto Serif JP', serif;
}

/* 色 --------------------*/
.c-purple-01{
	color:#a4004d;
}

/* 各種要素 --------------------*/
li{
	list-style:none;
}
ul{
	margin: 0;
	padding: 0;
}
img {
    max-width: 100%;
    height: auto;
	  width:auto;
}
dl dt,
dl dd{
	font-weight: normal;
}

/* a --------------------*/
a.a-ov:hover img{
	opacity: 0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	transition:.3s;
}
a {
	color:#009fe8;
	text-decoration: underline;
	transition:.3s;
}
a:hover{
	opacity: 0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
}
/*clearfix--------------------*/
.clearfix:after {
	content: " ";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
}
.clearfix {
	display: inline-block;
	min-height: 1%;
}
/* ¥ */
* html .clearfix { height: 1%;}
.clearfix { display: block;}
/* IE6 */
* html .clearfix { zoom: 1;}
 /* IE7 */
*:first-child+html .clearfix { zoom: 1;}
/* 表示・非表示-------------------- */
.disp-xs,/*小型スマートフォンのみ表示～575px以下*/
.disp-sm,/*通常スマートフォンのみ表示576px～767px*/
.disp-xssm,/*小型・通常スマートフォンで表示767ox以下*/
.disp-xssmmd,/*タブレットとスマートフォンで表示991px以下*/
.disp-md,/*タブレットのみ表示　768～991px*/
.disp-mdpc,/*タブレットとパソコンで表示　768以上*/
.disp-pc,/*パソコンで表示　992px以上*/
.disp-lg,/*中型ディスプレイのみ　992～1199px*/
.disp-xl/*大型ディスプレイのみ　1200px以上*/ {
	display: none !important;
}
	@media only screen and ( max-width : 991px ){
		.disp-xssmmd{
			display: block !important;
		}
	}
	@media only screen and ( max-width : 767px ){
		.disp-sm{
			display: block !important;
		}
		.disp-xssm{
			display: block !important;
		}
	}
	@media only screen and ( max-width : 575px ){
		.disp-xs{
			display: block !important;
		}
		.disp-sm{
			display: none !important;
		}
	}
	@media print, screen and (min-width: 768px) {
		.disp-md{
			display: block !important;
		}
		.disp-mdpc{
			display: block !important;
		}
	}
	@media (min-width: 992px) {
		.disp-md{
			display: none !important;
		}
		.disp-pc{
			display: block !important;
		}
		.disp-lg{
			display: block !important;
		}
	}
	@media (min-width: 1200px) {
		.disp-lg{
			display:none !important;
		}
		.disp-xl{
			display: block !important;
		}
	}
/* 寄せ-------------------- */
.center,
.center-sm,/*小型・通常スマートフォンのみ中央寄せ*/
.center-mdpc/*タブレット以上中央寄せ*/
{
	text-align: center !important;
}

/* 小見出し*/
	@media only screen and ( max-width : 767px ){
		.center-mdpc{
			text-align: left;
		}
	}
	@media print, screen and (min-width: 768px) {
		.center-sm{
			text-align: left;
		}
	}
	@media (min-width: 992px) {
	}
	@media (min-width: 1200px) {
	}
/* ※印付きの注意書き用-------------------- */
.note{
	padding-left:1em;
	text-indent:-1em;
}
/* ブロック要素-------------------- */
/* 可変幅中央寄せ */
.block-center {
	display: table;
	margin-left: auto;
	margin-right: auto;
}
/* 可変幅左寄せ */
.block-left {
	display: table;
	margin-right: auto;
}
/* 可変幅右寄せ */
.block-right {
	display: table;
	margin-left: auto;
}
/* font-------------------- */
.font-077 { font-size: 77% !important; }
.font-085 { font-size: 85% !important; }
.font-093 { font-size: 93% !important; }
.font-108 { font-size: 108% !important; }
.font-116 { font-size: 116% !important; }
.font-123 { font-size: 123.1% !important; }
.font-131 { font-size: 131% !important; }
.font-138 { font-size: 138.5% !important; }
.font-146 { font-size: 146.5% !important; }
.font-153 { font-size: 153.9% !important; }
.font-161 { font-size: 161.6% !important; }
.font-167 { font-size: 167% !important; }
.font-174 { font-size: 174% !important; }
.font-182 { font-size: 182% !important; }
.font-189 { font-size: 189% !important; }
.font-0197 { font-size: 197% !important; }

.font-b { font-weight: 800 !important; }
.font-mb { font-weight: 700 !important; }
.font-lb { font-weight: 500 !important; }
.font-n { font-weight: normal !important; }


/***********************************
* header *
***********************************/
/* ロゴ周り --------------------*/
#header h1{
	color:#565656;
	text-align: center;
	font-weight: normal;
}
#header .logo{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
	@media only screen and ( max-width : 767px ){
		#header h1{
			font-size: 0.56rem;
			padding: 0.5rem 0;
		}
		#header .logo{
			width: 200px;
			margin-bottom: 1rem;
		}
	}
	@media print, screen and (min-width: 768px) {
		#header h1{
			font-size: 0.75rem;
			padding: 1rem 0;
		}
		#header .logo{
			width: 250px;
			margin-bottom: 1.2rem;
		}
	}
	@media (min-width: 992px) {
		#header h1{
			font-size: 0.88rem;
			padding: 1rem 0;
		}
		#header .logo{
			width: 100%;
			margin-bottom: 1.8rem;
		}
	}
	@media (min-width: 1200px) {
	}
/* Toggle --------------------*/
	@media only screen and ( max-width : 767px ){
		.Toggle {
			display: block;
		    position: fixed;    /* bodyに対しての絶対位置指定 */
		    width: 42px;
		    height: 41px;
		    cursor: pointer;
		    z-index: 20;
			top:10px;
			right:10px;
			background-color: #fff;
			border-radius: 2px;
		}
		.Toggle span {
			display: block;
		    position: absolute;
			left:5px;
		    width: /*50px*/32px;
		    border-bottom: solid 2px #009fe8;
		    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
		    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
		    transition: .35s ease-in-out;			/*変化の速度を指定*/
		}
		/*各ボーダー少しずつずらす*/
	 .Toggle span:nth-child(1) {
		 top:/*5px*/7px;
	 }
		.Toggle span:nth-child(2) {
			top: /*18px*/15px;
	 }
		.Toggle span:nth-child(3) {
			top: /*32px*/23px;
	 }
	 .Toggle span:nth-child(4){
		 top:25px;
		 border-bottom:none;
		 font-size: 10px;
		 text-align: center;
		 color:#009fe8;
		 font-family: 'Noto Serif JP', serif;
	 }
	 /* 1番目のspanをマイナス45度に */
	 .Toggle.active span:nth-child(1) {
		 top: /*18px*/16px;
			-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: /*18px*/16px;
			-webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    transform: rotate(45deg);
		}
	}
	@media print, screen and (min-width: 768px) {
		.Toggle{
			display: none;
		}
	}


/* g-nav --------------------*/
.g-nav-list li{
	font-family: 'Noto Serif JP', serif;
}
/* 小見出し*/
	@media only screen and ( max-width : 767px ){
		.g-nav {
			position: fixed;
			/* メニューの位置マイナス指定で画面外に */
			top:0;
			right: -100%;
			width: 100%;
			height: 100vh;
			background-color: rgba(255, 255, 255, .9);
			/*color: #efefef;*/
			transition: .3s;
			z-index: 10;
			padding-top: 46px;
		}
		.g-nav.open {
			/*position: absolute;*/
			right: 0;
		}

		.g-nav-list{
			/* メニューを縦に */
			display: flex;
			flex-direction: column;
		}
		.g-nav-list li{
			/* メニューテキスト位置をリスト内中心に */
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			font-size: 0.88rem;
		}
		.g-nav-list li a{
			padding: 0.9rem 0;
			color:#666;
			text-decoration:none;
			display: block;
			width: 80%;
			text-align: center;
		}
	}
	@media print, screen and (min-width: 768px) {
		.g-nav{
			padding-top:0.5rem;
		}
		.g-nav-list{
			display: flex;
		}
		.g-nav-list li{
			font-size: 0.81rem;
			text-align: center;
			flex-grow: 1;
		}
		.g-nav-list li + li {
			background-image: url(../img/com_gnavi-list-border.png);
			background-repeat: no-repeat;
			background-position: left;
		}
		.g-nav-list li a{
			color:#333;
			text-decoration: none;
			display: inline-block;
			padding: 0.5rem 0;
		}
		.g-nav-list li a:hover,
		.g-nav-list li a.a-on{
			color:#009fe8;
		}
	}
	@media (min-width: 992px) {
		.g-nav{
			padding-top: 1rem;
			padding-bottom: 1rem;
		}
		.g-nav-list li{
			font-size: 1rem;
			padding: 0.5rem;
		}
		.g-nav-list li a{

		}
	}
/***********************************
* main *
***********************************/
/* section .st-01 共通項目　--------------------*/
/* コンテンツのマージン*/
	@media only screen and ( max-width : 767px ){
		.st-01,
		#information-block{
			margin-bottom: 2rem;
		}
	}
	@media print, screen and (min-width: 768px) {
		.st-01,
		#information-block{
			margin-bottom: 2rem;
		}
	}
	@media (min-width: 992px) {
		.st-01,
		#information-block{
			margin-bottom: 4rem;
		}
	}
/* h2*/
.st-01 h2{
	font-family: 'Noto Serif JP', serif;
	text-align: center;
}
	@media only screen and ( max-width : 767px ){
		.st-01 h2{
			font-size: 0.94rem;
			margin-bottom: 1.5rem;
		}
	}
	@media print, screen and (min-width: 768px) {
		.st-01 h2{
			font-size: 1rem;
			margin-bottom: 1.8rem;
		}
	}
	@media (min-width: 992px) {
		.st-01 h2{
			font-size: 1.44rem;
			margin-bottom: 2rem;
		}
	}
/* p li dt */
	@media only screen and ( max-width : 767px ){
		.st-01 p,
		.st-01 li,
		.st-01 dl dt,
		.st-01 dl dd,
		#information-block dl dt,
		#information-block dl dd,
		#concept-block h4{
			font-size: 0.81rem;
		}
	}
	@media print, screen and (min-width: 768px) {
		.st-01 p,
		.st-01 li,
		.st-01 dl dt,
		.st-01 dl dd,
		#information-block dl dt,
		#information-block dl dd,
		#concept-block h4{
			font-size: 0.88rem;
		}
	}
	@media (min-width: 992px) {
		.st-01 p,
		.st-01 li,
		.st-01 dl dt,
		.st-01 dl dd,
		#information-block dl dt,
		#information-block dl dd,
		#concept-block h4{
			font-size: 1rem;
		}
		.st-01 p{
			margin-bottom: 1.6rem;
		}
	}
/***********************************
* footer *
***********************************/
#footer{
	background-color: #fff;
	color:#565656;
}
	@media only screen and ( max-width : 767px ){
		#footer{
			padding-bottom: 1.5rem;
		}
	}
	@media print, screen and (min-width: 768px) {
		#footer{
			padding-bottom: 2.5rem;
		}
	}
	@media (min-width: 992px) {
		#footer{
			padding-bottom: 3rem;
		}
	}
/* h2 --------------------*/
#footer h2{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
	@media only screen and ( max-width : 767px ){
		#footer h2{
			width: 200px;
			padding-top: 1.5rem;
			margin-bottom:0.88rem;
		}
	}
	@media print, screen and (min-width: 768px) {
		#footer h2{
			width: 250px;
			padding-top: 2.5rem;
			margin-bottom:0.88rem;
		}
	}
	@media (min-width: 992px) {
		#footer h2{
			width: 100%;
			padding-top: 3rem;
			margin-bottom:1rem;
		}
	}
/* lead --------------------*/
#footer p.lead{
	text-align: center;
}
	@media only screen and ( max-width : 767px ){
		#footer p.lead{
			font-size: 0.5rem;
			margin-bottom: 1rem;
		}
	}
	@media print, screen and (min-width: 768px) {
		#footer p.lead{
			font-size: 0.81rem;
			margin-bottom: 2rem;
		}
	}
	@media (min-width: 992px) {
		#footer p.lead{
			font-size: 0.88rem;
			margin-bottom: 3.5rem;
		}
	}

/* copy --------------------*/
#footer p.copy{
	text-align: center;
	margin-bottom: 0;
}
	@media only screen and ( max-width : 767px ){
		#footer p.copy{
			font-size: 0.81rem;
			padding-top: 1.5rem;
		}

	}
	@media print, screen and (min-width: 768px) {
		#footer p.copy{
			font-size: 0.88rem;
			padding-top: 2.5rem;
		}
	}
	@media (min-width: 992px) {
		#footer p.copy{
			font-size: 1rem;
			padding-top: 3.5rem;
		}
	}

/***********************************
* pagetop *
***********************************/
#pagetop {
	display:none;
	position: fixed;
	opacity: 0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	transition: .3s;
}
#pagetop:hover{
	opacity: 1;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
}

	@media only screen and ( max-width : 767px ){
		#pagetop {
			bottom: 15px;
			right: 15px;
			width: 80px;
			height: 80px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#pagetop {
			bottom: 15px;
			right: 15px;
			width: 100px;
			height: 100px;
		}
	}
	@media (min-width: 992px) {
		#pagetop {
			bottom: 50px;
			right: 50px;
			width: 140px;
			height: 140px;
		}
	}