@charset "utf-8";

body{
	font-family:"メイリオ",Meiryo,Arial,Verdana,sans-serif;
	font-weight: 400;
	-webkit-text-size-adjust:80%;
	overflow-x: hidden;
	color: #000;
	background: #fff;
	width: 100%;
	max-width: 1200px;
	margin: auto;
	word-break: break-all;
	word-wrap: break-word;
}

img {
  border: none;
}

.clearfix {
	width: 100%
	height: 0;
	clear: both;
}

header {
  width: 100%;
  padding-top: 15px;
}
header .logo{
  width: 33%;
  float: left;
  text-align: left;
  margin-left: 5%;
}
header .logo-right{
  width: 35%;
  float: right;
  text-align: right;
  margin-right: 5%;
}
header nav {
  width: 100%;
  margin-top: 15px;
  background-color: #00a7db;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
header .ulan {
  width: 80%;
  margin: auto;
  display: flex;
}
header .li01 {
  list-style: none;
  width: 45%;
  margin: 0;
  padding-top: 5px;
  color: white;
  text-align: center;
}
header .li02 {
  list-style: none;
  width: 10%;
  margin: 0;
  padding-top: 5px;
  color: white;
  text-align: center;
}
header a {
  display: block;
  text-decoration: none;
  color: white;
  font-weight: 700;
}

footer {
  width: 50%;
  margin: auto;
  padding-top: 15px;
  display: flex;
}
footer .logo-left {
  width: 23%;
  text-align: left;
  margin-right: 2%;
}
footer .menu-left {
  width: 35%;
  text-align: left;
  margin-left: 2%;
}
footer .menu-right {
  width: 35%:
  text-align: left;
  margin-left: 3%;
}
.copy {
  width: 100%;
  max-width: 1200px;
  text-align: center;
}

content {
  width: 100%;
  margin: 0;
  padding: 0;
}
content .top {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
content .bottom {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #00a7db;
}

/**** 画像の中央（上下左右）にテキストを配置 *********/
.CenterOnText {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/****** イメージを中央配置 100%表示 ******/
.TopImgContainer {
  display: flex;
  width: 100%;
  margin: 0:
  padding: 0;
  position: relative;
}
.TopImgContainer img {
  width: 100%;
  object-fit: cover;
}

/****** TOPテキストボックスを中央配置 100%表示 ******/
.TopTextContainer {
  display: table;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #00a7db;
}
/**** 画像の中央（上下左右）にテキストを配置 *********/
.CenterOnTextBOX {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
.CenterBOX {
  margin:15px auto;
  width: 85%;
}


/******** 垂直中央にテキストや画像を配置 ********/
.LiMiddle {
  text-align: center;
  margin: 20px 7% 0 7%;
}
.LiMiddle img {
  width: 100%;
}
/******* Topページテキスト　float ********/
.TopFloatText {
  width: 40%;
  margin: 3% 5% 0 5%;
  float: left;
  color: #fff;
}
.TopFloatText ttle {
  width: 100%;
  margin-bottom: 5px;
  font-size: 100%;
  font-weight: bold;
}

.TopFloatText ttle img {
  height: 1em;
  width: auto;
}
.TopFloatText .content {
  padding-left: 1em;
  font-size: 80%;
}
/****** TOPページ コンテンツ下部 *********/
.ContFoot {
  width: 100%;
  font-size: 150%;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
  color: #fff;
}
/********* TOPページ カテゴリー画像 ********/
.TopCatImg {
  width: 30%;
  margin: 20px 1.5% 10px 1.5%;
  float: left;
}
.TopCatImg img {
  width: 100%;
}

/****** イメージを中央配置 100%表示 ******/
.CatImgContainer {
  display: flex;
  width: 100%;
  margin: 0:
  padding: 0;
  position: relative;
}
.CatImgContainer img {
  width: 100%;
  object-fit: cover;
}



/******** パンくずリスト **************/
nav .breadcrumb {
  margin: 0;
  padding: 1em;
  list-style: none;
  overflow: hidden;
}

nav .breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
}

nav .breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #828282;
}

nav .breadcrumb li:last-child:after {
  content: '';
}

nav .breadcrumb li a {
  text-decoration: none;
  color: #a8a8a8;
}

nav .breadcrumb li a:hover {
  text-decoration: underline;
}

/************* Pageタイトル ****************/
.pagetitle {
  width: 100%;
  text-align: center;
  font-size: 150%;
  font-weight: bold;
  margin: 20px auto;
  text-decoration:underline;
}

/****** カテゴリページ全体を中央配置 100%表示 ******/
.cat {
  width: 100%;
  margin: 0 auto;
  padding-top: 5%;
  padding-bottom: 5%;
  background-color: #00a7db;
}
.CatLeftImg {
  width: 50%;
  float: left;
  display: table-cell;
  vertical-align: middle;
}
.CatLeftImg .imgbox {
  width: 65%;
  margin: 5% 20% 0 10%;
}
.CatLeftImg .imgbox img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}

.CatRightBox {
  width: 45%;
  padding-left: 5%;
  float: right;
  display: table;
}
.CatRightBox .CatRightText {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  text-decoration: none;
  font-size: 150%;
  font-weight: bold;
}
.CatRightBox .CatRightText a {
  color: #fff;
}

.PerLeftImg {
  width: 35%;
  float: left;
  display: table-cell;
  vertical-align: middle;
}
.PerLeftImg .imgbox {
  width: 75%;
  margin: 5% 15% 0 10%;
}
.PerLeftImg .imgbox img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.ImgBottom {
  margin: 0;
  padding: 0;
  font-size: 70%;
  color: #fff;
}
.PerRightBox {
  width: 60%;
  padding-left: 5%;
  float: right;
  display: table;
}
.PerRightBox .PerRightText {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  color: #fff;
  font-size: 100%;
}

.PerTable {
  width: 100%;
  margin-top: 5%;
}
.PerTable table {
  width:100%;
  display: table;
  border-collapse: collapse;
}
.PerTable th {
  width: 16%;
  display: table-cell;
  vertical-align: middle;
  text-align:center;
  border:solid 1px;
  background-color: #95d701;
  color:#fff;
}
.PerTable td {
  width: 34%;
  display: table-cell;
  vertical-align: middle;
  text-align:left;
  border:solid 1px;
  background-color: #fff;
}
//.PerTable td a {
//  text-decoration: none;
//  color: #000;
//}

.telinq {
  width: 100%;
  text-align: center;
  background-color: #00a7db;
}
.telfax {
  width: 70%;
  text-align: center;
  background-color: #00a7db;
  font-size: 220%;
  color: #fff;
  font-weight: bold;
  margin: 0 auto;
}
.telfax img {
  width: 100%;
}


/********** スマホ等以外への対応 **********/
@media screen and (min-width: 480px){
.CatTextContainer {
  display: table;
  width: 70%;
  margin: 0 auto;
  display: flex;
  background-color: #00a7db;
}
.inqu {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  background-color: #00a7db;
  font-size: 150%;
  color: #fff;
  font-weight: 400;
}

}

/********** スマホ等への対応 **********/
@media screen and (max-width: 479px){
.TopFloatText {
  width: 90%;
  margin: 10px 5% 0 5%;
  color: #fff;
}
.TopFloatText ttle {
  width: 100%;
  margin-bottom: 5px;
  font-size: 100%;
}
.TopFloatText ttle img {
  height: 1em;
  width: auto;
}
.TopFloatText .content {
  padding-left: 1em;
  font-size: 80%;
}
.TopCatImg {
  width: 45%;
  margin: 10px 2.5% 10px 2.5%;
  float: left;
}
.TopCatImg img {
  width: 100%;
}
.CatTextContainer {
  display: table;
  width: 100%;
  display: flex;
  background-color: #00a7db;
}
footer {
  width: 95%;
  margin: auto;
  padding-top: 15px;
  display: flex;
}
header .ulan {
  width: 100%;
  margin: auto;
  display: flex;
}
header .li01 {
  list-style: none;
  width: 45%;
  margin: 0;
  padding-top: 5px;
  color: white;
  text-align: center;
}
header .li02 {
  list-style: none;
  width: 10%;
  margin: 0;
  padding-top: 5px;
  color: white;
  text-align: center;
}
.telinq {
  width: 100%;
  text-align: center;
  background-color: #00a7db;
}
.telfax {
  width: 90%;
  text-align: center;
  background-color: #00a7db;
  font-size: 170%;
  color: #fff;
  font-weight: bold;
  margin: 0 auto;
}
.telfax img {
  width: 100%;
}
.CenterBOX {
  margin:15px auto;
  width: 95%;
}
.inqu {
  width: 100%;
  text-align: center;
  background-color: #00a7db;
  font-size: 120%;
  color: #fff;
  font-weight: 400;
  padding-bottom: 15px;
}

}