@import url('reset.css');



html{
	background: #fff;
	background-repeat:no-repeat;
	}
	

body{
	background-color: #fff;
	/*background-image: url(../img/casegarden_back1.gif),url(../img/casegarden_back2.gif),url(../img/casegarden_back3.gif);
	background-repeat: no-repeat,no-repeat,repeat-x;
	background-position:top left,right,bottom;*/
	color: #333333;
	font-size:12px;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

a { color: #006799; text-decoration: none;}
a:visited { color: #333;}
a:hover { color: #009be3;}
a:active { color: #009be3;}

/*   web font   */


@font-face{ 
	font-family:'NotoSansCJKjp-Light';
	src: url('../font/NotoSansCJKjp-Light.eot'); /* IE9以上用 */
	src: url('../font/NotoSansCJKjp-Light.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('../font/NotoSansCJKjp-Light.woff') format('woff'), /* モダンブラウザ用 */
		url('../font/NotoSansCJKjp-Light.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定 */
	font-style: normal;
}
@font-face{ 
	font-family:'NotoSansCJKjp-Regular';
	src: url('../font/NotoSansCJKjp-Regular.eot'); /* IE9以上用 */
	src: url('../font/NotoSansCJKjp-Regular.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('../font/NotoSansCJKjp-Regular.woff') format('woff'), /* モダンブラウザ用 */
		url('../font/NNotoSansCJKjp-Regular.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定 */
	font-style: normal;
}
@font-face{ 
	font-family:'NotoSansCJKjp-Medium';
	src: url('../font/NotoSansCJKjp-Medium.eot'); /* IE9以上用 */
	src: url('../font/NotoSansCJKjp-Medium.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('../font/NotoSansCJKjp-Medium.woff') format('woff'), /* モダンブラウザ用 */
		url('../font/NNotoSansCJKjp-Regular.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定 */
	font-style: normal;
}
@font-face{ 
	font-family:'NotoSansCJKjp-Bold';
	src: url('../font/NotoSansCJKjp-Bold.eot'); /* IE9以上用 */
	src: url('../font/NotoSansCJKjp-Bold.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('../font/NotoSansCJKjp-Bold.woff') format('woff'), /* モダンブラウザ用 */
		url('../font/NNotoSansCJKjp-Bold.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定 */
	font-style: normal;
}
@font-face{ 
	font-family:'NotoSansCJKjp-Black';
	src: url('../font/NotoSansCJKjp-Black.eot'); /* IE9以上用 */
	src: url('../font/NotoSansCJKjp-Black.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('../font/NotoSansCJKjp-Black.woff') format('woff'), /* モダンブラウザ用 */
		url('../font/NotoSansCJKjp-Black.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定 */
	font-style: normal;
}

.container { width:100%;}






/* headder style */
@media screen and (min-width: 320px) and (max-width: 600px) {
#headder { background: #fff; opacity: 0.9; width:100%; padding: 3% 0 2% 0; overflow:hidden;}
#headder div.inner-box { margin: 0 2% 0 2%}
#headder h1 {color: #333;font-weight:bold;float:left;margin: 0 0 0 2%;font-size:1.45em;text-align:left;width:30%;vertical-align:top;font-family:'Noto Sans JP';line-height:130%}
#headder h1 span { font-size:0.6em; margin: 0 0 0 10px; font-weight:normal; line-height:60%; font-family:'Noto Sans JP';}
#headder ul { width:65%; float:right; margin: 0 2% 0 0; text-align:right; }
#headder ul li { display:inline; color:#333; font-size:0.9em; margin: 0 0 0 10px; font-family:'Noto Sans JP'; white-space: nowrap;}
}

@media print, screen and (min-width: 601px) and (max-width: 899px){
#headder {background: #fff;opacity: 0.9;width:100%; padding: 2% 0 20px 0;overflow:hidden;}
#headder div.inner-box { margin: 0 2% 0 2%}
#headder h1 {color: #333;font-weight:bold;float:left;margin: 0 0 0 0%;font-size:2em;text-align:left;width:60%;font-family:'Noto Sans JP';}
#headder h1 span { font-size:0.6em; margin: 0 0 0 10px; font-weight:normal; line-height:60%; font-family:'Noto Sans JP';}
#headder ul { width:36%; float:right; margin: 0 0 0 0; text-align:right; }
#headder ul li { display:inline; color:#333; font-size:1.1em; margin: 0 0 0 10px; font-family:'Noto Sans JP'; white-space: nowrap;}
}

@media screen and (min-width: 900px){
#headder {background: #fff;opacity: 0.9;width:100%;padding: 2% 0 2% 0;overflow:hidden}
#headder div.inner-box { margin: 0 10% 0 10%}
#headder h1 {color: #333;font-weight: bold;float:left;margin: 0 0 0 2%;font-size:2em;text-align:left;width:50%;font-family:'Noto Sans JP'}
#headder h1 span { font-size:0.65em; margin: 0 0 0 10px; font-weight:normal; line-height:60%; font-family:'Noto Sans JP';}
#headder ul { width:45%; float:right; margin: 0 2% 0 0; text-align:right; }
#headder ul li { display:inline; color:#333; font-size:1.2em; margin: 0 0 0 10px; font-family:'Noto Sans JP'}
}

.fixed { position:fixed;}






/*   index-image01   */
@media screen and (min-width: 320px) and (max-width: 600px) {
.index-image01 { clear:both; width: 100%;background:url(../img/image01.jpg) no-repeat 0 0;background-size: 100%;}
.index-image01 div.inner-box { padding: 9% 2% 9% 50%; }
.index-image01 p { text-align:left; font-size:1.1em;  color:#222; line-height:120%; margin:0; text-shadow: 1px 1px 1px #d7d3b9; font-family:Noto Sans JP；}
.index-image01 p.large { font-size:1.6em; margin:3% 0 3% 0; font-family:Noto Sans JP; /*border-bottom:1px solid #333;*/ padding:0 0 2% 0; line-height:110%; text-shadow: 1px 1px 1px #d7d3b9}
.index-image01 ul { margin:2.5% 0 0 0; overflow:hidden}
.index-image01 ul li { font-size:1em; font-family:Noto Sans JP; line-height:110%}
.index-image01 ul li a { padding:3% 2% 3% 2%; background-color:#009be3; color:#fff; display:block; text-align:center}
.index-image01 ul li a:hover { background-color:#09ace7}
.index-image01 ul li a:active {background-color:#09ace}
}

@media print, screen and (min-width: 601px) and (max-width: 899px){
.index-image01{clear:both; width: 100%;background:url(../img/image01.jpg) no-repeat 0 0;background-size: 100%;}
.index-image01 div.inner-box { padding: 9% 2% 9% 45%; }
.index-image01 p { text-align:left; font-size:1.5em;  color:#222; line-height:135%; margin:0; text-shadow: 1px 1px 1px #d7d3b9; font-family:Noto Sans JP;}
.index-image01 p.large { font-size:3em; margin:2% 0 2% 0; font-family:Noto Sans JP; /*border-bottom:1px solid #333;*/ padding:0 0 2% 0; line-height:110%}
.index-image01 ul { margin:2% 0 0 0; overflow:hidden}
.index-image01 ul li { font-size:1.7em; font-family:Noto Sans JP}
.index-image01 ul li a { padding:2% 10% 2% 10%; background-color:#009be3; color:#fff; display:block; text-align:center}
.index-image01 ul li a:hover { background-color:#09ace7}
.index-image01 ul li a:active {background-color:#09ace}
}

@media screen and (min-width: 900px){
.index-image01{	clear:both; width: 100%; background:url(../img/image01.jpg) no-repeat 0 0; background-size: 100%;}
.index-image01 div.inner-box { padding: 10% 2% 10% 45%; }
.index-image01 p { text-align:left; font-size:2em;  color:#222; line-height:130%; margin:0; text-shadow: 1px 1px 1px #d7d3b9; font--family:Noto Sans JP;}
.index-image01 p.large { font-size:4.1em; margin:2% 0 2% 0; font--family:Noto Sans JP; /*border-bottom:1px solid #333;*/ padding:0 0 2% 0; line-height:115%}
.index-image01 ul { margin:2% 0 0 0; overflow:hidden}
.index-image01 ul li { font-size:2em; font--family:Noto Sans JP}
.index-image01 ul li a { padding:1.8% 11% 1.8% 11%; background-color:#009be3; color:#fff;  display:inline-block}
.index-image01 ul li a:hover { background-color:#09ace7; }
.index-image01 ul li a:active {background-color:#09ace}
}
.index-image01 span.red01 { color:#006799}
.index-image01 span.blue01 { color:#009be3}





/*  catch-box  */
@media screen and (min-width: 320px) and (max-width: 600px) {
.catch-box01 { width:100%; margin: 0 0 5% 0; overflow:hidden }
.catch-box01 div.catch-box03 { background-color:#006495; padding:3.5% 4% 3.5% 4%; margin: 0 0 4% 0}
.catch-box01 div.catch-box03 p { font-size:1.2em; color:#fff; line-height:135%; font-weight:normal; }
.catch-box01 div.inner-box { margin: 0 2% 0 2%}
.catch-box01 div.inner-box p { font-size:1.4em; margin: 0 0 2.5% 0; text-align:center; font--family:Noto Sans JP; line-height:135%;}
.catch-box02 { width:96%; margin: 0 2% 3% 2%; overflow:hidden; vertical-align:top}
.catch-box02 h3 { font-size:1.3em;  font--family:Noto Sans JP; margin: 0 0 1% 0}
.catch-box02 p { font-size:1.1em; line-height:165%; /*font--family:Noto Sans JP*/}
.catch-box02 ul { }
.catch-box02 ul li {
  position: relative;
  display: block;
  margin: 0;
  padding: 3px 0 3px 15px;
  background: #fff;
  text-decoration: none;
  font-size:1em; 
  line-height:135%;
  /*font--family:Noto Sans JP;*/
}
.catch-box02 ul li:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #ccc;
}
.catch-box02 ul li:after{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  left: -5px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #fff;
}
}

@media print, screen and (min-width: 601px) and (max-width: 899px){
.catch-box01 { width:100%; margin: 0 0 3% 0; overflow:hidden }
.catch-box01 div.catch-box03 { background-color:#006495; padding:2.8% 3% 2.8% 3%; margin: 0 0 4% 0}
.catch-box01 div.catch-box03 p { font-size:1.7em; color:#fff; line-height:135%; font-weight:normal; }
.catch-box01 div.inner-box { margin: 0 2% 0 2%}
.catch-box01 div.inner-box p { font-size:1.8em; margin: 0 6% 3% 6%; text-align:center; font--family:Noto Sans JP; line-height:135%;}
.catch-box02 { width:31%; float:left; margin: 0 1% 0 1%}
.catch-box02 h3 { font-size:1.3em;  font--family:Noto Sans JP; margin: 0 0 10px 0; line-height:120%}
.catch-box02 p { font-size:1.1em; line-height:165%; /*font--family:Noto Sans JP*/}
.catch-box02 ul { }
.catch-box02 ul li {
  position: relative;
  display: block;
  margin: 0;
  padding: 5px 0 5px 15px;
  background: #fff;
  text-decoration: none;
  font-size:1em; 
  line-height:135%;
  /*font--family:Noto Sans JP;*/
}
.catch-box02 ul li:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #ccc;
}
.catch-box02 ul li:after{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  left: -5px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #fff;
}
}

@media screen and (min-width: 900px){
.catch-box01 { width:100%; margin: 0 0 3% 0; overflow:hidden }
.catch-box01 div.catch-box03 { background-color:#006495; padding:3% 10% 3% 10%; margin: 0 0 3% 0}
.catch-box01 div.catch-box03 p { font-size:2.2em; color:#fff; line-height:140%; font-weight:normal; }
.catch-box01 div.inner-box { margin: 0 10% 0 10%; clear:both; }
.catch-box01 div.inner-box p { font-size:2.5em; margin: 0 0 3% 0; text-align:left; font--family:Noto Sans JP; line-height:135%;}
.catch-box02 { width:31%; float:left; margin: 0 1% 0 1%}
.catch-box02 h3 { font-size:1.5em;  font--family:Noto Sans JP; margin: 0 0 2% 0}
.catch-box02 p { font-size:1.1em; line-height:165%; /*font--family:Noto Sans JP*/}
.catch-box02 ul { }
.catch-box02 ul li {
  position: relative;
  display: block;
  margin: 0;
  padding: 5px 0 5px 20px;
  background: #fff;
  text-decoration: none;
  font-size:1.1em; 
  line-height:140%;
  /*font--family:Noto Sans JP;*/
}
.catch-box02 ul li:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #ccc;
}
.catch-box02 ul li:after{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  left: -5px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #fff;
}
}

.catch-box02 span.blue { color:#006799}





/*  info-box  */
@media screen and (min-width: 320px) and (max-width: 600px) {
.info-box01 { clear:both; width:100%; background-color:#f5f1e6; padding:5% 0 5% 0; overflow:hidden}
.info-box02 { width:96%; margin: 0 2% 5% 2%; overflow:hidden; vertical-align:top}
.info-box02 h3 { font-size:1.4em; font--family:Noto Sans JP; color:#009be3; margin: 0 0 1% 0}
.info-box02 h3 span { font-size:0.7em; color:#006495; margin: 0 0 0 2%; font--family:Noto Sans JP;}
.info-box02 dl dt { float:left; font-size:0.9em; width:7em; line-height:150%; margin: 0 0 1em 0; /*font--family:Noto Sans JP;*/}
.info-box02 dl dd { font-size:0.9em; margin: 0 0 1em 8em; line-height:150%; /*font--family:Noto Sans JP;*/}
.info-box02 dl.area dt { float:left; width:4em; font-size:1em; margin: 0 0 0.1% 0 ; /*font--family:Noto Sans JP;*/ color:#006799}
.info-box02 dl.area dd { margin: 0 0 0.1% 5em; font-size:1em; /*font--family:Noto Sans JP*/}
.info-box03 { width:96%; margin: 0 2% 0 2%; overflow:hidden; vertical-align:top;}
.info-box03 h3 { font-size:1.4em; font--family:Noto Sans JP; color:#009be3; margin: 0 0 1% 0}
.info-box03 h3 span { font-size:0.7em; color:#006495; margin: 0 0 0 2%; font--family:Noto Sans JP;}
.info-box03 p { font-size:1.1em; font--family:Noto Sans JP; line-height:145%;}
.info-box03 p span.large { font-size:1.2em; color:#009be3; margin: 0 2.5% 0 1%}
.info-box03 ul { margin: 1.5% 0 0 0}
.info-box03 ul li { font--family:Noto Sans JP; color:#fff; font-size:1.3em}
.info-box03 ul li a { padding:1.5% 5% 1.5% 5%; background-color:#009be3; color:#fff; display:block; text-align:center; border-radius:5px;}
.info-box03 ul li a:hover { background-color:#09ace7}
.info-box03 ul li a:active {background-color:#09ace}
.info-box04 { margin: 2% 3% 0% 3%; overflow:hidden; vertical-align:top; clear:both; overflow:hidden; padding:2% 2.5% 2% 2.5%; border-radius:5px; background-color:#ebe7db}
.info-box04 h3 { font-size:1.5em; font--family:Noto Sans JP; color:#009be3; margin: 0 0 2% 0; text-shadow: 1px 1px 1px #f5f1e6;}
.info-box04 h3 span { font-size:0.6em; color:#006495; margin: 0 0 0 2%; font--family:Noto Sans JP;}
.info-box04 p { font-size:1.1em; font--family:Noto Sans JP; line-height:145%; text-shadow: 1px 1px 1px #f5f1e6;}
.info-box04 dl {}
.info-box04 dl dt { float:left; width:4em; font-size:1em; margin: 0 0 0.3% 0 ; /*font--family:Noto Sans JP;*/ color:#006799; line-height:120%}
.info-box04 dl dd { margin: 0 0 0.3% 5em; font-size:1em; /*font--family:Noto Sans JP;*/ line-height:120%}
}

@media print, screen and (min-width: 601px) and (max-width: 899px){
.info-box01 { clear:both; width:100%; background-color:#f5f1e6; padding:3% 0 3% 0; overflow:hidden}
.info-box01 div.inner-box { margin: 0 5% 0 5%}
.info-box02 { width:47%; margin: 0 3% 0 0; float:left; overflow:hidden; vertical-align:top}
.info-box02 h3 { font-size:1.5em; font--family:Noto Sans JP; color:#009be3; margin: 0 0 2% 0}
.info-box02 h3 span { font-size:0.6em; color:#006495; margin: 0 0 0 2%; font--family:Noto Sans JP;}
.info-box02 dl dt { font-size:0.9em; line-height:140%; margin: 0 0 0 0; /*font--family:Noto Sans JP*/}
.info-box02 dl dd { font-size:0.9em; margin: 0 0 2% 0; line-height:140%; /* font--family:Noto Sans JP*/}
.info-box02 dl.area dt { float:left; width:4em; font-size:1em; margin: 0 0 0.1% 0 ; /*font--family:Noto Sans JP;*/ color:#006799}
.info-box02 dl.area dd { margin: 0 0 0.1% 5em; font-size:1em; /*font--family:Noto Sans JP*/}
.info-box03 { width:47%; margin: 0 0 0 3%; overflow:hidden; vertical-align:top}
.info-box03 h3 { font-size:1.5em; font--family:Noto Sans JP; color:#009be3; margin: 0 0 2% 0}
.info-box03 h3 span { font-size:0.6em; color:#006495; margin: 0 0 0 2%; font--family:Noto Sans JP;}
.info-box03 p { font-size:1em; font--family:Noto Sans JP; line-height:135%;}
.info-box03 p span.large { font-size:1.3em; color:#009be3; margin: 0 2.5% 0 1%}
.info-box03 ul { margin: 2% 0 0 0}
.info-box03 ul li { font--family:Noto Sans JP; color:#fff; font-size:1.2em}
.info-box03 ul li a { padding:1.5% 5% 1.5% 5%; background-color:#009be3; color:#fff; display:block; text-align:center}
.info-box03 ul li a:hover { background-color:#09ace7}
.info-box03 ul li a:active {background-color:#09ace}
.info-box04 { margin: 3% 1% 0 1%; overflow:hidden; vertical-align:top; clear:both; overflow:hidden; padding:2% 2.5% 2% 2.5%; border-radius:5px; background-color:#ebe7db}
.info-box04 h3 { font-size:1.5em; font--family:Noto Sans JP; color:#009be3; margin: 0 0 2% 0; text-shadow: 1px 1px 1px #f5f1e6;}
.info-box04 h3 span { font-size:0.6em; color:#006495; margin: 0 0 0 2%; font--family:Noto Sans JP;}
.info-box04 p { font-size:1.3em; font--family:Noto Sans JP; line-height:145%; text-shadow: 1px 1px 1px #f5f1e6;}
.info-box04 dl {}
.info-box04 dl dt { float:left; width:4em; font-size:1em; margin: 0 0 0.5% 0 ; /*font--family:Noto Sans JP;*/ color:#006799; line-height:125%}
.info-box04 dl dd { margin: 0 0 0.5% 5em; font-size:1em; /*font--family:Noto Sans JP;*/ line-height:125%}
}

@media screen and (min-width: 900px){
.info-box01 { clear:both; width:100%; background-color:#f5f1e6; padding:3% 0 3% 0; overflow:hidden}
.info-box01 div.inner-box { margin: 0 10% 0 10%}
.info-box02 { width:48%; margin: 0 3% 0 0%; float:left; overflow:hidden; vertical-align:top}
.info-box02 h3 { font-size:1.8em; font--family:Noto Sans JP; color:#009be3; margin: 0 0 2% 0}
.info-box02 h3 span { font-size:0.7em; color:#006495; margin: 0 0 0 2%; font--family:Noto Sans JP;}
.info-box02 dl dt { float:left; font-size:1em; width:7em; line-height:150%; margin: 0 0 1% 0; /*font--family:Noto Sans JP*/}
.info-box02 dl dd { font-size:1em; margin: 0 0 1% 8em; line-height:150%; /*font--family:Noto Sans JP*/}
.info-box02 dl.area dt { float:left; width:4em; font-size:1em; margin: 0 0 0.1% 0 ; /*font--family:Noto Sans JP;*/ color:#006799}
.info-box02 dl.area dd { margin: 0 0 0.1% 5em; font-size:1em; /*font--family:Noto Sans JP*/}
.info-box03 { width:48%; margin: 0 0 0 3%; overflow:hidden; vertical-align:top; background:url(../img/image04.jpg) right top no-repeat; background-size: 40%;}
.info-box03 h3 { font-size:1.8em; font--family:Noto Sans JP; color:#009be3; margin: 0 0 2% 0; text-shadow: 1px 1px 1px #f5f1e6;}
.info-box03 h3 span { font-size:0.7em; color:#006495; margin: 0 0 0 2%; font--family:Noto Sans JP;}
.info-box03 p { font-size:1.3em; font--family:Noto Sans JP; line-height:145%; text-shadow: 1px 1px 1px #f5f1e6;}
.info-box03 p span.large { font-size:1.5em; color:#009be3; margin: 0 2.5% 0 1%}
.info-box03 ul { margin: 2% 0 0 0}
.info-box03 ul li { font--family:Noto Sans JP; color:#fff; font-size:1.3em}
.info-box03 ul li a { padding:1.5% 10% 1.8% 10%; background-color:#009be3; color:#fff; display:inline-block; }
.info-box03 ul li a:hover { background-color:#09ace7}
.info-box03 ul li a:active {background-color:#09ace}
.info-box04 { margin: 3% 1% 0 1%; overflow:hidden; vertical-align:top; clear:both; overflow:hidden; padding:2% 2.5% 2% 2.5%; border-radius:5px; background-color:#ebe7db}
.info-box04 h3 { font-size:1.8em; font--family:Noto Sans JP; color:#009be3; margin: 0 0 2% 0; text-shadow: 1px 1px 1px #f5f1e6;}
.info-box04 h3 span { font-size:0.7em; color:#006495; margin: 0 0 0 2%; font--family:Noto Sans JP;}
.info-box04 p { font-size:1.3em; font--family:Noto Sans JP; line-height:145%; text-shadow: 1px 1px 1px #f5f1e6;}
.info-box04 dl {}
.info-box04 dl dt { float:left; width:4em; font-size:1.2em; margin: 0 0 0.1% 0 ; /*font--family:Noto Sans JP;*/ color:#006799}
.info-box04 dl dd { margin: 0 0 0.1% 5em; font-size:1.2em; /*font--family:Noto Sans JP*/}
}

span.red01 { color:#ca5ba4 }




/*  faq-box  */
@media screen and (min-width: 320px) and (max-width: 600px) {
.faq-box01 { width:100%;  clear:both;}
.faq-box01 div.inner-box { margin: 5% 2% 5% 2%; overflow:hidden;}
.faq-box01 h3 { font-size:1.4em; font--family:Noto Sans JP; text-align:center; margin:0 0 2.5% 0; color:#006799; line-height:140%;}
.faq-box01 ul { margin: 1% auto 0 auto; text-align:center; clear:both; overflow:hidden}
.faq-box01 ul li { font-size:1.3em; line-height:150%; font--family:Noto Sans JP; color:#fff; margin: 0 1% 0 1%}
.faq-box01 ul li a { padding: 2% 5% 2% 5%; background-color:#009be3; color:#fff; display:block; text-align:center; border-radius:5px;}
.faq-box01 ul li a:hover { background-color:#09ace7}
.faq-box01 ul li a:active {background-color:#09ace}
.faq-box02 { display:inline-block; width:44%; margin: 0% 1% 2% 1%; padding:3%; background-color:#e6e6e6; border-radius:10px; overflow:hidden; box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;}
.faq-box02 h4 { font--family:Noto Sans JP; font-size:1.1em; margin: 0 0 1.2% 0; line-height:135%; color:#006799}
.faq-box02 p { /*font--family:Noto Sans JP;*/ font-size:1em; line-height:130%;}	
.faq-box03 { margin:0 auto; width:96%; }	
}

@media print, screen and (min-width: 601px) and (max-width: 899px){
.faq-box01 { width:100%;  clear:both;}
.faq-box01 div.inner-box { margin: 3.5% 4% 3.5% 4%; overflow:hidden;}
.faq-box01 h3 { font-size:2.1em; font--family:Noto Sans JP; text-align:center; margin:0 0 2.5% 0; color:#006799; line-height:120%}
.faq-box01 ul { margin: 2% auto 0 auto; text-align:center; clear:both; overflow:hidden}
.faq-box01 ul li { font-size:1.4em; line-height:135%; font--family:Noto Sans JP; color:#fff}
.faq-box01 ul li a { padding: 1.3% 15% 1.3% 15%; background-color:#009be3; color:#fff; display:inline-block}
.faq-box01 ul li a:hover { background-color:#09ace7}
.faq-box01 ul li a:active {background-color:#09ace}
.faq-box02 {  width:45%; float:left; margin: 0% 1% 2% 1%; padding:1%; background-color:#e6e6e6; border-radius:10px; overflow:hidden; box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;}
.faq-box02 h4 { font--family:Noto Sans JP; font-size:1.2em; margin: 0 0 3% 0; line-height:135%; color:#006799}
.faq-box02 p { /*font--family:Noto Sans JP;*/ font-size:1.1em; line-height:135%; padding:0; margin:0}	
.faq-box03 { margin:0 auto; width:100%; }
}
@media screen and (min-width: 900px){
.faq-box01 { width:100%;  clear:both;}
.faq-box01 div.inner-box { margin: 3.5% 10% 3.5% 10%; overflow:hidden;}
.faq-box01 h3 { font-size:2.8em; font--family:Noto Sans JP; text-align:center; margin:0 0 2.5% 0; color:#006799}
.faq-box01 ul { margin: 0 auto 0 auto; text-align:center; clear:both; overflow:hidden}
.faq-box01 ul li { font-size:1.6em; line-height:135%; font--family:Noto Sans JP; color:#fff}
.faq-box01 ul li a { padding: 1.3% 10% 1.3% 10%; background-color:#009be3; color:#fff; display:inline-block}
.faq-box01 ul li a:hover { background-color:#09ace7}
.faq-box01 ul li a:active {background-color:#09ace}

.faq-box02 { float:left; width:48%; margin: 0% 1% 2% 1%; padding:2%; background-color:#e6e6e6; border-radius:10px;overflow:hidden; box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;}
.faq-box02 h4 { font--family:Noto Sans JP; font-size:1.3em; margin: 0 0 1.2% 0; line-height:145%; color:#006799}
.faq-box02 p { /*font--family:Noto Sans JP;*/ font-size:1.1em; line-height:150%;}
.faq-box03 { margin:0 auto; width:100%; }
}
/* 	MediaQueries */
@media print, screen and (max-width: 900px) {
	.faq-box03 { width: 100%;}
	.faq-box03 .faq-box02 {width: 30%;}
}
@media print, screen and (max-width: 899px) {
	.faq-box03 .faq-box02 {width: 47%;}
}
@media print, screen and (max-width: 600px) {
	.faq-box03 .faq-box02 {width: 97%;}
}

/* 	ClearFix */
.faq-box03:before,
.faq-box03:after {
	content: " ";
	display: table;
}
.faq-box03:after {clear: both;}
.faq-box03 {*zoom: 1;}




/*  profile-box  */
@media screen and (min-width: 320px) and (max-width: 600px) {
.profile-box01 { width:100%; clear:both; background-color:#faf8f0; padding: 6% 0 6% 0; }
.profile-box01 div.inner-box { margin: 0 2% 0 2%; overflow:hidden; background:url(../img/image03.jpg) no-repeat right top; background-size: 60%;}
.profile-box01 h3 { font-size:1.6em; font--family:Noto Sans JP; margin: 0 40% 2.5% 0; line-height:120%; text-shadow: 1px 1px 1px #faf8f0;}
.profile-box01 p { font-size:1em; line-height:130%; /*font--family:Noto Sans JP;*/ margin: 0 45% 0 0; text-shadow: 1px 1px 1px #faf8f0;}
.profile-box01 img.noda { float:right; margin: 0 0 0 3%; width:20%}
.profile-box01 dl { margin: 2% 45% 0 0}
.profile-box01 dl dt { font-size:1em; /*font--family:Noto Sans JP;*/ line-height:135%; color:#1e3860; margin: 0 0 0.2% 0; text-shadow: 1px 1px 1px #faf8f0;}
.profile-box01 dl dd { font-size:0.9em; margin: 0 0 0.8% 0; /*font--family:Noto Sans JP;*/ line-height:135%; text-shadow: 1px 1px 1px #faf8f0;}
.profile-box01 ul { margin: 2% 0 0 0}
.profile-box01 ul li { color:#fff; font--family:Noto Sans JP; font-size:1.3em;}
.profile-box01 ul li a { background-color:#009be3; padding: 2% 5% 2% 5%; color:#fff; display:block; text-align:center; border-radius:5px;}
.profile-box01 ul li a:hover { background-color:#09ace7}
.profile-box01 ul li a:active {background-color:#09ace}	
}

@media print, screen and (min-width: 601px) and (max-width: 899px){
.profile-box01 { width:100%; clear:both; background-color:#faf8f0; padding: 3% 0 3% 0; }
.profile-box01 div.inner-box { margin: 0 10% 0 10%; overflow:hidden; background:url(../img/image03.jpg) no-repeat right top; background-size: 50%;}
.profile-box01 h3 { font-size:1.8em; font--family:Noto Sans JP; margin: 0 40% 2% 0; text-shadow: 1px 1px 1px #faf8f0; line-height:130%}
.profile-box01 p { font-size:1.1em; line-height:150%; /*font--family:Noto Sans JP;*/ margin: 0 40% 0 0}
.profile-box01 img.noda { float:right; margin: 0 0 0 3%; width:20%}
.profile-box01 dl { margin: 2% 40% 0 0}
.profile-box01 dl dt { font-size:1em; float:left; width:4em; /*font--family:Noto Sans JP;*/ line-height:135%; color:#1e3860; margin: 0 0 0.5% 0; text-shadow: 1px 1px 1px #faf8f0;}
.profile-box01 dl dd { font-size:1em; margin: 0 0 0.8% 5em; /*font--family:Noto Sans JP;*/ line-height:135%; text-shadow: 1px 1px 1px #faf8f0;}
.profile-box01 ul { margin: 2% 0 0 0}
.profile-box01 ul li { color:#fff; font--family:Noto Sans JP; font-size:1.2em;}
.profile-box01 ul a { background-color:#009be3; padding: 1% 15% 1% 15%; color:#fff; display:inline-block}
.profile-box01 ul li a:hover { background-color:#09ace7}
.profile-box01 ul li a:active {background-color:#09ace}
}
@media screen and (min-width: 900px){
.profile-box01 { width:100%; clear:both; background-color:#faf8f0; padding: 3% 0 3% 0; }
.profile-box01 div.inner-box { margin: 0 10% 0 10%; overflow:hidden; background:url(../img/image03.jpg) no-repeat right top; background-size: 30%;}
.profile-box01 h3 { font-size:2.2em; font--family:Noto Sans JP; margin: 0 0 2% 0}
.profile-box01 p { font-size:1.1em; line-height:165%; /*font--family:Noto Sans JP;*/ margin: 0 40% 0 0}
.profile-box01 img.noda { float:right; margin: 0 0 0 3%; width:20%}
.profile-box01 dl { margin: 2% 40% 0 0}
.profile-box01 dl dt { font-size:1em; float:left; width:4em; /*font--family:Noto Sans JP;*/ line-height:135%; color:#1e3860; margin: 0 0 0.5% 0}
.profile-box01 dl dd { font-size:1em; margin: 0 0 0.8% 5em; /*font--family:Noto Sans JP;*/ line-height:135%;}
.profile-box01 ul { margin: 2% 0 0 0}
.profile-box01 ul li { color:#fff; font--family:Noto Sans JP; font-size:1.4em;}
.profile-box01 ul a { background-color:#009be3; padding: 1.1% 12% 1.1% 12%; color:#fff; display:inline-block}
.profile-box01 ul li a:hover { background-color:#09ace7}
.profile-box01 ul li a:active {background-color:#09ace}
}



/*  content-box  */

@media screen and (min-width: 320px) and (max-width: 600px) {
.content-box01 {width: 100%;padding:12% 0 12% 0;background-color:#006799;}
.content-box01 div.inner {	text-align:center;padding: 0 2% 0 2%;}
.content-box01 div.inner h2 { font-size:4em; border-bottom:1px solid #fff; line-height:120%; padding:0; margin:0 0 5px 0; color:#fff; font--family:Noto Sans JP; display:inline-block}
.content-box01 p { font-size: 1.5em; line-height:140%; color:#fff;  font--family:Noto Sans JP; }
.content-box01 img { width:100%}

.content-box02 { width:100%; margin: 7% 0 5% 0; overflow:hidden }
.content-box02 div.inner-box { margin: 0 5% 0 5%}
.content-box02 h3 { font-size:1.3em;  font--family:Noto Sans JP; margin: 0 0 2% 0}
.content-box02 h3.next01 { margin: 6% 0 2% 0}
.content-box02 h3.next02 { margin: 6% 0 2% 0; clear:both;}
.content-box02 h3.center { text-align:center; font-size:2em; margin: 0 0 5% 0; color:#006799; font--family:Noto Sans JP; line-height:140%}
.content-box02 h3.center-next { text-align:center; font-size:2.2em; margin: 5% 0 3% 0; color:#006799; font--family:Noto Sans JP; line-height:120%}
.content-box02 h4 { font-size:1.3em;  font--family:Noto Sans JP; margin: 0 0 2% 0; color:#006799; text-align:center; line-height:120%}
.content-box02 h4.next { margin: 8% 0 2.5% 0}
.content-box02 p { font-size:1em; line-height:160%; /*font--family:Noto Sans JP*/}
.content-box02 p.hobby { padding:1.5%; border-radius:10px; background-color:#e6e6e6; font-size:1em; margin: 2% 40% 0 0}
.content-box02 p.next { margin:3% 0 0 0;}
.content-box02 p.center { text-align:center; margin: 0 5% 0 5%}
.content-box02 dl {}
.content-box02 dl dt { font-size:1.2em; /*font--family:Noto Sans JP;*/ margin: 0 0 0.5% 0}
.content-box02 dl dd {font-size:1em; /*font--family:Noto Sans JP;*/ margin: 0 0 2% 0}
.content-box02 dl a { color:#006799}
.content-box02 dl a:hover { color:#09ace7}
.content-box02 img.profile01 { float:right; width:38%; height: auto; margin: 0 0 3% 3%}
.content-box02 img.profile02 { float:right; width:42%; height: auto; margin: 0 0 3% 3%}
.content-box02 img.service01 { float:right; width:30%; height: auto; margin: 0 0 3% 5%}
.content-box02 img.service02 { height: auto; text-align:center; width:90%; margin: 0 5% 3% 5%; }
.content-box02 img.service03 { height: auto; text-align:center; width:90%; margin: 5% 5% 3% 5%; }

.content-box02 dl.profile { margin: 0 0 0 0}
.content-box02 dl.profile dt { font-size:1em; /*font--family:Noto Sans JP;*/ margin: 0 0 0.5% 0; color:#006799; float:left; width:5em; line-height:150%;}
.content-box02 dl.profile dd { font-size:1em; /*font--family:Noto Sans JP;*/ margin: 0 0 0.5% 6em; line-height:150%;}
.content-box02 ul.holiday { margin:0 auto 2% auto; overflow:hidden; width:100%; }
.content-box02 ul.holiday li { float:left; margin: 0 1% 1% 1%; width:100%; }
.content-box02 ul.holiday li img { width:100%; }
.content-box02 img.holiday01 { width:90%; height: auto; margin: 0 5% 3% 5%}
.content-box02 ul.omoi { margin:2% auto 1% auto;  text-align:center}
.content-box02 ul.omoi li { font-size:1.1em;  font--family:Noto Sans JP; margin: 0.5% 0 0.5% 0}

.content-box03 { width:100%; margin: 3% 0 0 0; overflow:hidden; background-color:#f3f3f3; padding:6% 0 6% 0 }
.content-box03 div.inner-box { margin: 0 5% 0 5%}
.content-box03 span.blue { color:#006799}
.content-box03 h3 { font-size:2.2em;  font--family:Noto Sans JP; margin: 0 0 2% 0; color:#006799; line-height:120%; text-align:center}
.content-box03 p { font-size:1em; line-height:165%; /*font--family:Noto Sans JP*/}
.content-box03 h4 { font-size:1.4em; font--family:Noto Sans JP; margin: 4% 0 1.5% 0; color:#006799; text-align:center}
.content-box03 ul.service li {
  position: relative;
  display: block;
  margin: 0;
  padding: 3px 0 3px 15px;
  background: #f3f3f3;
  text-decoration: none;
  font-size:1.1em; 
  line-height:135%;
  /*font--family:Noto Sans JP;*/
}
.content-box03 ul.service li:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #ccc;
}
.content-box03 ul.service li:after{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  left: -5px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #f3f3f3;
}
.content-box03 img.service01 { width:100%; height: auto; margin: 3% 0 3% 0}
}

@media print, screen and (min-width: 601px) and (max-width: 899px){
.content-box01 {width: 100%; padding:9% 0 9% 0; background-color:#006799;}
.content-box01 div.inner {	text-align:center;padding: 0 2% 0 2%;}
.content-box01 div.inner h2 { font-size:5em; border-bottom:1px solid #fff; line-height:120%; padding:0 0 1% 0; margin:0 0 2% 0; color:#fff; font--family:Noto Sans JP; display:inline-block}
.content-box01 p { font-size: 2em; line-height:140%; color:#fff;  font--family:Noto Sans JP; }
.content-box01 img { width:100%}

.content-box02 { width:100%; margin: 5% 0 5% 0; overflow:hidden }
.content-box02 div.inner-box { margin: 0 5% 0 5%}
.content-box02 h3 { font-size:1.5em;  font--family:Noto Sans JP; margin: 0 0 2% 0}
.content-box02 h3.next01 { margin: 5% 0 2% 0}
.content-box02 h3.next02 { margin: 5% 0 2% 0; clear:both}
.content-box02 h3.center { text-align:center; font-size:2.3em; margin: 0 0 4% 0; color:#006799; font--family:Noto Sans JP;}
.content-box02 h3.center-next { text-align:center; font-size:2.3em; margin: 5% 0 3% 0; color:#006799; font--family:Noto Sans JP; line-height:120%}
.content-box02 h4 { font-size:1.6em;  font--family:Noto Sans JP; margin: 0 0 1.5% 0; color:#006799; text-align:center}
.content-box02 h4.next { margin: 5% 0 1.5% 0}
.content-box02 p { font-size:1.2em; line-height:165%; /*font--family:Noto Sans JP*/}
.content-box02 p.hobby { padding:1.5%; border-radius:10px; background-color:#e6e6e6; font-size:1em; margin: 2% 40% 0 0}
.content-box02 p.next { margin:2% 0 0 0;}
.content-box02 p.center { text-align:center; margin: 0 5% 0 5%}
.content-box02 dl {}
.content-box02 dl dt { font-size:1.2em; /*font--family:Noto Sans JP;*/ margin: 0 0 0.5% 0}
.content-box02 dl dd {font-size:1em; /*font--family:Noto Sans JP;*/ margin: 0 0 2% 0}
.content-box02 dl a { color:#006799}
.content-box02 dl a:hover { color:#09ace7}
.content-box02 img.profile01 { float:right; width:42%; height: auto; margin: 0 0 3% 3%}
.content-box02 img.profile02 { float:right; width:42%; height: auto; margin: 0 0 3% 3%}
.content-box02 img.service01 { float:right; width:30%; height: auto; margin: 0 0 3% 5%}
.content-box02 img.service02 { height: auto; text-align:center; width:50%; margin: 0 25% 2% 25%; }
.content-box02 img.service03 { height: auto; text-align:center; width:50%; margin: 5% 25% 2% 25%; }

.content-box02 dl.profile { margin: 0 0 0 0}
.content-box02 dl.profile dt { font-size:1.2em; /*font--family:Noto Sans JP;*/ margin: 0 0 0.5% 0; color:#006799; float:left; width:5em; line-height:135%;}
.content-box02 dl.profile dd { font-size:1.2em; /*font--family:Noto Sans JP;*/ margin: 0 0 0.5% 6em; line-height:135%;}
.content-box02 ul.holiday { margin:0 auto 2% auto; overflow:hidden; width:100%; }
.content-box02 ul.holiday li { float:left; margin: 0 1.5% 0 1.5%; width:30%; }
.content-box02 ul.holiday li img { width:100%; }
.content-box02 img.holiday01 { float:right; width:30%; height: auto; margin: 0 2.5% 3% 3%}
.content-box02 ul.omoi { margin:2% auto 1.5% auto;  text-align:center}
.content-box02 ul.omoi li { font-size:1.2em;  font--family:Noto Sans JP; margin: 0.2% 0 0.2% 0}

.content-box03 { width:100%; margin: 3% 0 0 0; overflow:hidden; background-color:#f3f3f3; padding:5% 0 5% 0 }
.content-box03 div.inner-box { margin: 0 5% 0 5%}
.content-box03 span.blue { color:#006799}
.content-box03 h3 { font-size:2.5em;  font--family:Noto Sans JP; margin: 0 0 2% 0; color:#006799}
.content-box03 p { font-size:1.2em; line-height:165%;/* font--family:Noto Sans JP*/}
.content-box03 h4 { font-size:1.6em;  font--family:Noto Sans JP; margin: 3% 0 1% 0; color:#006799;}
.content-box03 ul.service li {
  position: relative;
  display: block;
  margin: 0;
  padding: 3px 0 3px 15px;
  background: #f3f3f3;
  text-decoration: none;
  font-size:1.2em; 
  line-height:140%;
  /*font--family:Noto Sans JP;*/
}
.content-box03 ul.service li:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #ccc;
}
.content-box03 ul.service li:after{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  left: -5px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #f3f3f3;
}
.content-box03 img.service01 { float:right; width:45%; height: auto; margin: 0 0 3% 5%}
}

@media screen and (min-width: 900px){
.content-box01 {width: 100%;padding:8% 0 8% 0;background-color:#006799;}
.content-box01 div.inner {	text-align:center;padding: 0 2% 0 2%;}
.content-box01 div.inner h2 { font-size:5.5em; border-bottom:1px solid #fff; line-height:120%; padding:0; margin:0 0 10px 0; color:#fff; font--family:Noto Sans JP; display:inline-block}
.content-box01 p { font-size: 2em; line-height:140%; color:#fff;  font--family:Noto Sans JP; }
.content-box01 a {text-decoration:underline}
.content-box01 a:hover {text-decoration:none}
.content-box01 img { width:100%}
.content-box02 { width:100%; margin: 3% 0 3% 0; overflow:hidden }
.content-box02 a {text-decoration:underline}
.content-box02 a:hover {text-decoration:none}
.content-box02 div.inner-box { margin: 0 10% 0 10%}
.content-box02 h3 { font-size:1.5em;  font--family:Noto Sans JP; margin: 0 0 2% 0}
.content-box02 h3.next01 { margin: 5% 0 2% 0;}
.content-box02 h3.next02 { margin: 5% 0 2% 0; clear:both;}
.content-box02 h3.center { text-align:center; font-size:2.5em; margin: 0 0 3% 0; color:#006799; font--family:Noto Sans JP}
.content-box02 h3.center-next { text-align:center; font-size:2.5em; margin: 5% 0 3% 0; color:#006799; font--family:Noto Sans JP}
.content-box02 h4 { font-size:1.6em;  font--family:Noto Sans JP; margin: 0 0 1.5% 0; color:#006799; text-align:center}
.content-box02 h4.next { margin: 5% 0 1.5% 0}
.content-box02 h4.next02 { margin: 5% 0 2% 0; clear:both; color:#111; text-align:left; font-size:1.5em; }
	
.content-box02 p { font-size:1.2em; line-height:180%; /*font--family:Noto Sans JP*/}
.content-box02 p.hobby { padding:1.5%; border-radius:10px; background-color:#e6e6e6; font-size:1em; margin: 2% 40% 0 0}
.content-box02 p.next { margin:2% 0 0 0;}
.content-box02 p.center { text-align:center; margin: 0 10% 0 10%}
.content-box02 dl {}
.content-box02 dl dt { font-size:1.2em; /*font--family:Noto Sans JP;*/ margin: 0 0 0.5% 0}
.content-box02 dl dd {font-size:1em; /*font--family:Noto Sans JP;*/ margin: 0 0 2% 0}
.content-box02 dl a { color:#006799}
.content-box02 dl a:hover { color:#09ace7}
.content-box02 img.profile01 { float:right; width:38%; height: auto; margin: 0 0 3% 3%}
.content-box02 img.profile02 { float:right; width:38%; height: auto; margin: 0 0 3% 3%}
.content-box02 img.service01 { float:right; width:30%; height: auto; margin: 0 0 3% 5%}
.content-box02 img.service02 { height: auto; text-align:center; width:60%; margin: 0 20% 2% 20%; }
.content-box02 img.service03 { height: auto; text-align:center; width:60%; margin: 5% 20% 2% 20%; }

.content-box02 dl.profile { margin: 0 0 0 0}
.content-box02 dl.profile dt { font-size:1.2em; /*font--family:Noto Sans JP;*/ margin: 0 0 0.5% 0; color:#006799; float:left; width:5em; line-height:135%;}
.content-box02 dl.profile dd { font-size:1.2em; /*font--family:Noto Sans JP;*/ margin: 0 0 0.5% 6em; line-height:135%;}
.content-box02 ul.holiday { margin:0 auto 2% auto; overflow:hidden; width:100%; }
.content-box02 ul.holiday li { float:left; margin: 0 1.5% 0 1.5%; width:30%; }
.content-box02 ul.holiday li img { width:100%; }
.content-box02 img.holiday01 { float:right; width:20%; height: auto; margin: 0 2.5% 3% 3%}
.content-box02 ul.omoi { margin:1% auto 1% auto;  text-align:center}
.content-box02 ul.omoi li { font-size:1.2em;  font--family:Noto Sans JP; margin: 0.2% 0 0.2% 0}
.content-box03 { width:100%; margin: 3% 0 0 0; overflow:hidden; background-color:#f3f3f3; padding:3% 0 3% 0 }
.content-box03 div.inner-box { margin: 0 10% 0 10%}
.content-box03 span.blue { color:#006799}
.content-box03 h3 { font-size:2.5em;  font--family:Noto Sans JP; margin: 0 0 2% 0; color:#006799}
.content-box03 p { font-size:1.2em; line-height:165%; /*font--family:Noto Sans JP*/}
.content-box03 h4 { font-size:1.6em;  font--family:Noto Sans JP; margin: 3% 0 1% 0; color:#006799;}
.content-box03 ul.service { clear:none}
.content-box03 ul.service li {
  position: relative;
  display: block;
  margin: 0;
  padding: 3px 0 3px 15px;
  text-decoration: none;
  font-size:1.2em; 
  line-height:140%;
  /*font--family:Noto Sans JP;*/
}
.content-box03 ul.service li:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #ccc;
}
.content-box03 ul.service li:after{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  left: -5px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #f3f3f3;
}
.content-box03 img.service01 { float:right; width:45%; height: auto; margin: 0 0 3% 5%}
}

.content-box02 ul.sitemap { font-size:1.1em}
.content-box02 ul.sitemap li { margin: 5px 0; position:relative; padding: 0 0 0 15px}
.content-box02 ul.sitemap li:before{
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-top: solid 3px #ccc;
    border-right: solid 3px #ccc;
    transform:rotate(45deg);
    position: absolute;
    top:5px;
    left:0px;
    z-index: 2;
}


.content-box02 span.blue { color:#006799}
.content-box02 span.pink { color:#ca5ba4}

@media screen and (min-width: 320px) and (max-width: 600px) {
.pankuzu-box { width:100%; margin: 10px 0 10px 0; overflow:hidden }
.pankuzu-box div.inner-box { margin: 0 5% 0 5%}
}
@media print, screen and (min-width: 601px) and (max-width: 899px){
.pankuzu-box { width:100%; margin: 10px 0 10px 0; overflow:hidden }
.pankuzu-box div.inner-box { margin: 0 5% 0 5%}
}
@media screen and (min-width: 900px){
.pankuzu-box { width:100%; margin: 10px 0 10px 0; overflow:hidden }
.pankuzu-box div.inner-box { margin: 0 10% 0 10%}
}
.pankuzu-box a {text-decoration:underline}
.pankuzu-box a:hover {text-decoration:none}
.pankuzu-box ul li {
	position: relative;
	display: inline-block;
	padding: 0 16px 0 0;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size:1.1em
	}
.pankuzu-box ul li:last-of-type:before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -13px;
  width: 5px;    /* くの字を山なりに見た時、左側の長さ */
  height: 5px;   /* くの字を山なりに見た時、右側の長さ */
  border-top: 1px solid #000;     /* くの字を山なりに見た時、左側の太さと色 */
  border-right: 1px solid #000;   /* くの字を山なりに見た時、右側の太さと色 */
  transform: rotate(45deg);    /* くの字の向き */
}




/* contact-box */

@media screen and (min-width: 320px) and (max-width: 600px) {
.contact-box01 {width: 100%;padding:12% 0 12% 0;background-color:#006799;}
.contact-box01 div.inner { text-align:center;padding: 0 2% 0 2%;}
.contact-box01 div.inner h2 { font-size:4em; border-bottom:1px solid #fff; line-height:120%; padding:0; margin:0 0 5px 0; color:#fff; font--family:Noto Sans JP;display:inline-block}
.contact-box01 p { font-size: 1.5em; line-height:140%; color:#fff;  font--family:Noto Sans JP; }
.contact-box01 img { width:100%}
}
@media print, screen and (min-width: 601px) and (max-width: 899px){
.contact-box01 {width: 100%; padding:9% 0 9% 0; background-color:#006799;}
.contact-box01 div.inner {text-align:center;padding: 0 2% 0 2%;}
.contact-box01 div.inner h2 { font-size:5.5em; border-bottom:1px solid #fff; line-height:120%; padding:0 0 1% 0; margin:0 0 2% 0; color:#fff; font--family:Noto Sans JP;display:inline-block}
.contact-box01 p { font-size: 2em; line-height:140%; color:#fff;  font--family:Noto Sans JP; }
.contact-box01 img { width:100%}
}

@media screen and (min-width: 900px){
.contact-box01 {width: 100%;padding:8% 0 8% 0;background-color:#006799;}
.contact-box01 div.inner {	text-align:center;padding: 0 2% 0 2%;}
.contact-box01 div.inner h2 { font-size:5.5em; border-bottom:1px solid #fff; line-height:120%; padding:0; margin:0 0 10px 0; color:#fff; font--family:Noto Sans JP; display:inline-block}
.contact-box01 p { font-size: 2em; line-height:140%; color:#fff;  font--family:Noto Sans JP; }
.contact-box01 img { width:100%}	
}






@media screen and (min-width: 320px) and (max-width: 600px) {
.contact-box02 { width:90%; margin:6% auto 0 auto;  }
.contact-box02 h3 { text-align:center; font-size:1.5em; margin: 0 0 30px 0; font--family:Noto Sans JP}
.contact-box02  p { line-height:150%; font-size:1em; /*font--family:Noto Sans JP;*/ text-align:center}
.contact-box02 ul { margin:2% auto 0 auto; text-align:center}
.contact-box02 ul li { color:#fff; font-size:1.3em; font--family:Noto Sans JP; }
.contact-box02 ul li a { padding:1.5% 10% 1.5% 10%; text-align:center; display:inline-block; background-color:#009be3; color:#fff}
.contact-box02 ul li a:hover { background-color:#09ace7}
.contact-box02 ul li a:active{ background-color:#09ace7}
.contact-box02 p.button { width:auto; margin:0 auto;}
.contact-box02 p.button a { display:block; width:100%; padding:20px 0; background-color:#009be3; color:#fff; text-align:center; font-size:1.5em; }
.contact-box02 p.button a:hover { background-color:#00aeff;}
.contact-box03 { background-color:#e6e6e6; padding:20px; border-radius:10px; margin:2% auto 5% auto; width:90%} 
	.contact-box03 h3  {font-size:1.3em}
.contact-box03 h4 { text-align: left; font-size:1.1em; font-weight:bold; margin: 15px 0 10px 0}
.contact-box03 p { text-align:left; font-size:1em; line-height:165%}
}

@media print, screen and (min-width: 601px) and (max-width: 899px){
.contact-box02 { width:80%; margin:5% auto 0 auto;  }
.contact-box02 h3 { text-align:center; font-size:1.6em; margin: 0 0 30px 0; font--family:Noto Sans JP}
.contact-box02  p { line-height:165%; font-size:1.2em;/* font--family:Noto Sans JP;*/ text-align:center}
.contact-box02 ul { margin:2% auto 10% auto; text-align:center}
.contact-box02 ul li { color:#fff; font-size:1.3em; font--family:Noto Sans JP; }
.contact-box02 ul li a { padding:1.5% 10% 1.5% 10%; text-align:center; display:inline-block; background-color:#009be3; color:#fff}
.contact-box02 ul li a:hover { background-color:#09ace7}
.contact-box02 ul li a:active{ background-color:#09ace7}
.contact-box02 p.button { width:80%;margin:0 auto;}
.contact-box02 p.button a { display:block; width:100%; padding:20px; background-color:#009be3; color:#fff; text-align:center; font-size:1.5em; }
.contact-box02 p.button a:hover { background-color:#00aeff;}
.contact-box03 { background-color:#e6e6e6; padding:20px; border-radius:10px; margin:2% auto 5% auto; width:100%} 
.contact-box03 h4 { text-align: left; font-size:1.1em; font-weight:bold; margin: 15px 0 10px 0}
	.contact-box03 p { text-align:left; font-size:1.1em; line-height:180%}
}

@media screen and (min-width: 900px){
.contact-box02 { width:75%; margin:5% auto 0 auto;  }
.contact-box02 h3 { text-align:center; font-size:1.6em; margin: 0 0 30px 0; font--family:Noto Sans JP}
.contact-box02 p { line-height:180%; font-size:1.3em; /*font--family:Noto Sans JP;*/ text-align:center}
.contact-box02 ul { margin:2% auto 0 auto; text-align:center}
.contact-box02 ul li { color:#fff; font-size:1.3em; font--family:Noto Sans JP; }
.contact-box02 ul li a { padding:1.5% 10% 1.5% 10%; text-align:center; display:inline-block; background-color:#009be3; color:#fff}
.contact-box02 ul li a:hover { background-color:#09ace7}
.contact-box02 ul li a:active{ background-color:#09ace7}
	
.contact-box02 p.button { width:50%; margin: 0 auto 0 auto; text-align: center;}
.contact-box02 p.button a { display:block; width:100%; padding:20px 20px; background-color:#009be3; color:#fff; text-align:center; font-size:1.5em; }
.contact-box02 p.button a:hover { background-color:#00aeff;}
	
.contact-box03 { background-color:#e6e6e6; padding:2%; border-radius:10px; margin:2% auto 5% auto; width:100%} 
.contact-box03 h4 { text-align: left; font-size:1.1em; font-weight:bold; margin: 15px 0 10px 0}
.contact-box03 p { text-align:left; font-size:1.1em; line-height:180%}

}


@media screen and (min-width: 320px) and (max-width: 600px) {
div.contact_box01 { margin:5% auto 5% auto; width:90%}
div.contact_box01 ol li { font-size:1.2em;  font-weight:bold;color:#006799; line-height:120%; margin: 0 0 15px 0}
div.contact_box01 ol li span { background-color:#009be3; color:#fff; padding: 2px 5px 2px 5px}
div.contact_box01 ol li input{ margin: 10px 0 10px 0; padding:8px; width:90%; border:1px solid #ccc}
div.contact_box01 ol li textarea{ margin: 10px 0 10px 0; padding:8px; width:90%; border:1px solid #ccc}
div.contact_box01 div.button {text-align:center} 
div.contact_box01 div.button button { background-color:#009be3; color:#fff; padding: 1.5% 5% 1.5% 5%;  border:none; margin:0 auto 0 auto; text-align:center; display:block; font-size:1.5em;  font--family:Noto Sans JP; letter-spacing:0.5em; width:90%}
div.contact_box01 dl { margin: 0 auto 3% auto; width:90%}
div.contact_box01 dl dt { font-weight:bold; font-size:1.1em; margin: 0 0 5px 0; line-height:140%; font--family:Noto Sans JP}
div.contact_box01 dl dd { font-size:1.1em; margin: 0 0 15px 0; line-height:140%; font--family:Noto Sans JP}
div.contact_box01 p { text-align:center; font-size:1.1em}
div.contact_box01 p.error { color:#C00; margin: 5px 0 5px 0; text-align:center}
div.contact_box01 p.return { margin: 1em 0 0 0}
div.contact_box01 div.button_w { text-align:center} 
div.contact_box01 div.button_w button { background-color:#009be3; color:#fff; padding: 1.5% 2% 1.5% 2%; font-size:1.1em; border:none; margin:3% 1% 0 1%; text-align:center; width:44%; display:inline; font--family:Noto Sans JP; }

.contact-box04 { width:100%; clear:both; background-color:#f2f0e4; padding: 6% 0 6% 0}
.contact-box04 div.inner-box { padding: 0 2% 0 2%}
.contact-box04 p { /*font--family:Noto Sans JP;*/ font-size:1.1em; text-align:center; }
.contact-box04 ul { margin:3% auto 0 auto; text-align:center}
.contact-box04 ul li { font--family:Noto Sans JP; font-size:1.2em; color:#fff}
.contact-box04 ul li a { padding:2% 5% 2% 5%; color:#fff; background-color:#009be3; display:block; text-align:center; border-radius:5px;}
.contact-box04 ul li a:hover { background-color:#09ace7}
.contact-box04 ul li a:active{ background-color:#09ace7}
}

@media print, screen and (min-width: 601px) and (max-width: 899px){
div.contact_box01 { margin:50px auto 50px auto; width:80%}
div.contact_box01 ol li { font-size:1.2em;  font-weight:bold;color:#006799; line-height:120%; margin: 0 0 15px 0}
div.contact_box01 ol li span { background-color:#009be3; color:#fff; padding: 2px 5px 2px 5px}
div.contact_box01 ol li input{ margin: 10px 0 10px 0; padding:8px; width:60%; border:1px solid #ccc}
div.contact_box01 ol li textarea{ margin: 10px 0 10px 0; padding:8px; width:100%; border:1px solid #ccc}
div.contact_box01 div.button {text-align:center} 
div.contact_box01 div.button button { background-color:#009be3; color:#fff; padding: 1.5% 15% 1.5% 15%;  border:none; margin:0 auto; text-align:center; display:inline-block; font-size:1.7em;  font--family:Noto Sans JP; letter-spacing:0.5em}
div.contact_box01 dl { margin: 0 auto 3% auto; width:80%}
div.contact_box01 dl dt { font-weight:bold; font-size:1.1em; margin: 0 20px 10px 0; width:9em; line-height:160%; float:left; font--family:Noto Sans JP}
div.contact_box01 dl dd { font-size:1.1em; margin: 0 0 10px 11em; line-height:160%; font--family:Noto Sans JP}
div.contact_box01 p { text-align:center; font-size:1.1em}
div.contact_box01 p.error { color:#C00; margin: 5px 0 5px 0; text-align:center}
div.contact_box01 p.return { margin: 1em 0 0 0}
div.contact_box01 div.button_w { text-align:center} 
div.contact_box01 div.button_w button { background-color:#009be3; color:#fff; padding: 1.5% 8% 1.5% 8%; font-size:1.3em; border:none; margin:3% 5px 0 5px; text-align:center; width:40%; display:inline; font--family:Noto Sans JP; }

.contact-box04 { width:100%; clear:both; background-color:#f2f0e4; padding: 4% 0 4% 0}
.contact-box04 div.inner-box { padding: 0 10% 0 10%}
.contact-box04 p { /*font--family:Noto Sans JP;*/ font-size:1.2em; text-align:center; line-height:140%}
.contact-box04 ul { margin:3% auto 0 auto; text-align:center}
.contact-box04 ul li { font--family:Noto Sans JP; font-size:1.4em; color:#fff}
.contact-box04 ul li a { padding:1.5% 10% 1.5% 10%; color:#fff; background-color:#009be3; display:inline-block; text-align:center}
.contact-box04 ul li a:hover { background-color:#09ace7}
.contact-box04 ul li a:active{ background-color:#09ace7}
}

@media screen and (min-width: 900px){
div.contact_box01 { margin:50px auto 50px auto; width:80%}
div.contact_box01 ol li { font-size:1.2em;  font-weight:bold; color:#006799; line-height:120%; margin: 0 0 15px 0}
div.contact_box01 ol li label { margin:10px}
div.contact_box01 ol li span { background-color:#009be3; color:#fff; padding: 2px 5px 2px 5px}
div.contact_box01 ol li input{ margin: 10px 10px 10px 10px; padding:8px; width:40%; border:1px solid #ccc}
div.contact_box01 ol li textarea{ margin: 10px 10px 10px 10px; padding:8px; width:100%; border:1px solid #ccc}
div.contact_box01 div.button {text-align:center} 
div.contact_box01 div.button button { background-color:#009be3; color:#fff; padding: 1.5% 15% 1.5% 15%;  border:none; margin:0 auto; text-align:center; display:inline-block; font-size:2em;  font--family:Noto Sans JP; letter-spacing:0.5em}
div.contact_box01 dl { margin: 0 auto 3% auto; width:80%}
div.contact_box01 dl dt { font-weight:bold; font-size:1.1em; margin: 0 20px 10px 0; width:10em; line-height:160%; float:left; font--family:Noto Sans JP}
div.contact_box01 dl dd { font-size:1.1em; margin: 0 0 10px 11.5em; line-height:160%; font--family:Noto Sans JP}
div.contact_box01 p { text-align:center; font-size:1.1em}
div.contact_box01 p.error { color:#C00; margin: 5px 0 5px 0; text-align:center}
div.contact_box01 p.return { margin: 1em 0 0 0}
div.contact_box01 div.button_w { text-align:center} 
div.contact_box01 div.button_w button { background-color:#009be3; color:#fff; padding: 1.5% 10% 1.5% 10%; font-size:1.5em; border:none; margin:3% 5px 0 5px; text-align:center; width:40%; display:inline; font--family:Noto Sans JP; }

.contact-box04 { width:100%; clear:both; background-color:#f2f0e4; padding: 4% 0 4% 0}
.contact-box04 div.inner-box { padding: 0 15% 0 15%}
.contact-box04 p { /*font--family:Noto Sans JP;*/ font-size:1.3em; text-align:center; }
.contact-box04 ul { margin:3% auto 0 auto; text-align:center}
.contact-box04 ul li { font--family:Noto Sans JP; font-size:1.5em; color:#fff}
.contact-box04 ul li a { padding:1.5% 10% 1.5% 10%; color:#fff; background-color:#009be3; display:inline-block; text-align:center}
.contact-box04 ul li a:hover { background-color:#09ace7}
.contact-box04 ul li a:active{ background-color:#09ace7}
}










/* page-top*/
@media screen and (min-width: 320px) and (max-width: 600px) {
#page-top { position: fixed; bottom: 1%; right: 3%; font-size: 1em; line-height:110%;}
#page-top a { background: #727272; text-decoration: none; color: #fff; padding: 20% 12% 20% 12%; text-align: center;  display: block; border-radius: 5px; width:4em; opacity: 0.6; font--family:Noto Sans JP; }
#page-top a:hover { text-decoration: none; background: #999;}
}
@media print, screen and (min-width: 601px) and (max-width: 899px){
#page-top { position: fixed; bottom: 2%; right: 3%; font-size: 1em;}
#page-top a { background: #727272; text-decoration: none; color: #fff; padding: 30% 8% 30% 8%; text-align: center;  display: block; border-radius: 5px; width:6em; opacity: 0.6; font--family:Noto Sans JP; }
#page-top a:hover { text-decoration: none; background: #999;}
}
@media screen and (min-width: 900px){
#page-top { position: fixed; bottom: 5%; right: 5%; font-size: 1em;}
#page-top a { background: #727272; text-decoration: none; color: #fff; padding: 40% 15% 40% 15%; text-align: center;  display: block; border-radius: 5px; width:6em; opacity: 0.6; font--family:Noto Sans JP; }
#page-top a:hover { text-decoration: none; background: #999;}
}


/* footer-box*/
@media screen and (min-width: 320px) and (max-width: 600px) {
#footer-box01 { clear:both; width:100%; background-color:#006799; padding: 6% 0 6% 0; }
#footer-box01 div.inner-box { padding: 0 2% 0 2%;}
#footer-box01 ul { margin:0 auto; overflow:hidden; text-align:center}
#footer-box01 ul li { 
	font-size:1em; 
	color:#fff; 
	font--family:Noto Sans JP; 
	display:inline-block; 
	margin: 0px 0 0px 5px; 
	}
#footer-box01 ul li a { color:#fff; text-decoration:underline}
#footer-box01 ul li a:hover { text-decoration:none; color:#ebd58e  }
#footer-box01 ul li a:active {text-decoration:none; color:#ebd58e }
#footer-box01 ul li { border-right:1px solid #fff; padding: 0 10px 0 0; line-height:0.9em}
#footer-box01 ul li:last-child { border:none; padding: 0; line-height:1em}
#footer-box01 p.address { text-align:center; font-size:1em; /*font--family:Noto Sans JP;*/ color:#fff; margin:4% 0 0 0; clear:both; line-height:120%;}
#footer-box01 p.address span { font-size:1.2em; font--family:Noto Sans JP}
#footer-box01 ul.address { margin:1.5% auto 1% auto; }
#footer-box01 ul.address li { border:0; margin: 0 0.5% 0 0.5%}
#footer-box01 p.copyright { text-align:center; font-size:1em; /*font--family:Noto Sans JP;*/ color:#fff; margin:4% 0 0 0}
}
@media print, screen and (min-width: 601px) and (max-width: 899px){
#footer-box01 { clear:both; width:100%; background-color:#006799; padding: 4% 0 4% 0; }
#footer-box01 div.inner-box { padding: 0 10% 0 10%;}
#footer-box01 ul { margin:0 auto; overflow:hidden; text-align:center}
#footer-box01 ul li { 
	font-size:1.1em; 
	color:#fff; 
	font--family:Noto Sans JP; 
	display:inline-block; 
	margin: 0 0px 0 5px
	}
#footer-box01 ul li a { color:#fff; text-decoration:underline}
#footer-box01 ul li a:hover { text-decoration:none; color:#ebd58e  }
#footer-box01 ul li a:active {text-decoration:none; color:#ebd58e }
#footer-box01 ul li { 
	border-right:1px solid #fff; 
	padding: 0 10px 0 0; 
	line-height:1em
	}
#footer-box01 ul li:last-child { border:none; padding: 0; line-height:1em}
#footer-box01 ul.address { margin:1.5% auto 1% auto; }
#footer-box01 ul.address li { border:0; font--family:Noto Sans JP; line-height:135%;}
#footer-box01 p.address { text-align:center; font-size:1.1em; /*font--family:Noto Sans JP;*/ color:#fff; margin:2% 0 0 0; clear:both;}
#footer-box01 p.address span { font-size:1.3em; font--family:Noto Sans JP}
#footer-box01 p.copyright { text-align:center; font-size:1em; /*font--family:Noto Sans JP;*/ color:#fff; margin:3% 0 0 0}
}
@media screen and (min-width: 900px){
#footer-box01 { clear:both; width:100%; background-color:#006799; padding: 2% 0 3% 0; }
#footer-box01 div.inner-box { padding: 0 10% 0 10%;}
#footer-box01 ul { margin:0 auto; overflow:hidden; text-align:center}
#footer-box01 ul li { 
	font-size:1.1em; 
	color:#fff; 
	font--family:Noto Sans JP; 
	display:inline-block; 
	margin: 0 10px 0 0px
	}
#footer-box01 ul li a { color:#fff; text-decoration:underline}
#footer-box01 ul li a:hover { text-decoration:none; color:#ebd58e  }
#footer-box01 ul li a:active {text-decoration:none; color:#ebd58e }
#footer-box01 ul li { border-right:1px solid #fff; padding: 0 15px 0 0; line-height:1em}
#footer-box01 ul li:last-child { border:none; padding: 0; line-height:1em}

#footer-box01 p.address { text-align:center; font-size:1.1em; /*font--family:Noto Sans JP;*/ color:#fff; margin:2% 0 0 0; clear:both;}
#footer-box01 p.address span { font-size:1.3em; font--family:Noto Sans JP}
#footer-box01 ul.address { margin:0 auto 1% auto; }
#footer-box01 ul.address li { border:0; font--family:Noto Sans JP; line-height:135%; margin: 0 0.3% 0 0.3%}
#footer-box01 p.copyright { text-align:center; font-size:1em; /*font--family:Noto Sans JP;*/ color:#fff; margin:3% 0 0 0}
}

.red { color:#ff0000}