@charset "utf-8";

/* @group Reset */

*{ margin: 0;padding: 0}

a { text-decoration : none}
ul, ol { list-style : none}
img { vertical-align : middle}

/* @end */

/* @group Fluid-img */

img { max-width : 100%}

/* @end */

/* @group HTML */

html {
font-family : 'Arial' . 'Meiryo'. 'ＭＳ Ｐ明朝', 'メイリオ' , 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'Osaka';
font-size : 75%; /*レスポンシブタイプセッティングの指定*/
line-height : 1.5}

/* @end */

/* @group Heading */

/* @group Contents */

#contents {
width : 98%;
margin : 0 auto;
text-align : center;
background-color: #EFF6FF;
}

#contents-page {
width : 94%;
margin : 0 auto;
padding-top : 0.2em;
padding-bottom : 1.5em;
text-align : center;
}

.contents-head {
width : 100%;
}

.contents-head1 {
  display: flex; /*横並び*/
  background-color: #EFF6FF;
}

.contents-head1 .image {
  width: 25%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.contents-head1 .right {
  margin: 0 0 0 20px;
  padding: 0;
}

.contents-head1 .head1 {
  margin: 0.5em 0 0 0; /* 上　右　下　左 */
  padding: 0;
  font-weight: bold;
  font-size: 1.4em;
}

.contents-head1 a {
  color: #000000;
}

hr {
height: 2px;
/*margin: 0.25em 0 0.25em 0; /* 上　右　下　左 */
background-color: #0000FF;
width: 100%;
border: none;
}

.page-hr {
height: 1px;
border: none;
border-top: 1px dashed #FF00FF;
background-color: #FFFFFF;
width: 100%;
}

/* トップページの画面スライド */
.slider {
    width: 98%;
    margin: 5px auto;
}

.slider img {
    width: 100%;
}

/* トップページの画面スライド end */

/* @end */

/* TOP Menu */

#menu {
margin-top: 1em;
margin-bottom: 1em;
}

/*clearfix*/
#menu:after {
  content: "";
  clear: both;
  display: block;
}

#menu ul {
  width : 98%;
  margin : 0 auto;
}

#menu ul li {
  float: left;
  width: 50%;
  text-align: center;
  line-height: 1.4em;
  border-bottom: 1px solid #000000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-left:1px solid #000000;
  background: linear-gradient(#99FFFF,#FFFFFF);
}

/*2つ目の要素だけ*/
#menu ul li:nth-child(2) {
  border-right: 1px solid #000000;
}

/*最後の要素だけ*/
#menu ul li:last-child {
  border-right: 1px solid #000000;
  line-height: 2.8em;
}

/*2つ目までに上のボーダー*/
#menu ul li:nth-child(-n+2) {
  border-top: 1px solid #000000;
}

#menu ul li a {
  display: block;
  color : #000000;
  text-decoration: none;
}

#menu ul li a.current {
  font-weight: bold;
  text-decoration : underline;
  background: linear-gradient(#FFFFFF,#CCFFCC);
}

#menu ul li a:hover {
  color : #000000;
  background: linear-gradient(#FFFFFF,#CCFFCC);
}

/* TOP Menu end */

/* Products Menu */

#products-menu {
margin-top: 1em;
margin-bottom: 1em;
}

/*clearfix*/
#products-menu:after {
  content: "";
  clear: both;
  display: block;
}

#products-menu ul {
  width : 98%;
  margin : 0 auto;
/*  display: table;*/
/*  table-layout: fixed;*/
}

#products-menu ul li {
/*  float: left;*/
  width: 98%;
  margin-bottom: 0.2em;
/*  line-height: 2.8em;*/
/*  height: 3.4em;*/
/*  display: flex;*/
  align-items: center;
  justify-content: center;
  border: 1px solid #000000;
/*  border-bottom: 1px solid #000000;*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
/*  border-left:1px solid #000000;*/
  background: linear-gradient(#CCFF99,#FFFFFF);
}

/*2つ目の要素だけ*/
#products-menu ul li:nth-child(3) {
  line-height: 3.05em;
/*  border-right: 1px solid #000000;*/
}

/*3つ目の要素だけ*/
/*#products-menu ul li:nth-child(4) {*/
/*  line-height: 3.05em;*/
/*}*/

/*最後の要素だけ*/
#products-menu ul li:last-child {
  border-right: 1px solid #000000;
}

/*2つ目までに上のボーダー*/
#products-menu ul li:nth-child(-n+2) {
  border-top: 1px solid #000000;
}

#products-menu ul li a {
  display: block;
  color : #000000;
  text-decoration: none;
}

#products-menu ul li a.current {
  font-weight: bold;
  text-decoration : underline;
  background: linear-gradient(#FFFFFF,#FFCCFF);
}

#products-menu ul li a:hover {
  color : #000000;
  background: linear-gradient(#FFFFFF,#FFCCFF);
}

/* Products Menu end */

/* Contents */

.top-text {
width: 90%;
margin : 0 auto;
text-align : left;
line-height: 1.8em;
letter-spacing: 0.2em;
margin: 0.25em auto 0.5em auto; /* 上　右　下　左 */
}

.top-text1 {
width: 40%;
margin : 0 auto;
font-size: 1.2em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.2em;
margin: 0.25em auto 0.5em auto; /* 上　右　下　左 */
border-bottom: 2px solid #0000FF;
padding-left: 8px;
display: inline-block;
}

.products {
width: 90%;
margin : 0 auto;
text-align : center;
}

.p-box1 {
display: none;
background-color: #EFF6FF;
}

.p-box2 {
width: 50%;
margin : 0 auto;
text-align : center;
background-color: #EFF6FF;
}

.p-box2-text {
  width: 90%;
  margin : 0 auto;
  padding: 0.5em 0.5em 0.5em 0.5em; /* 上　右　下　左 */
  border:1px solid #000000;
  background-color: #FFFFFF;
}

.p-box3 {
  display: none;
  background-color: #EFF6FF;
}

.c-text {
  width: 88%;
  margin : 0 auto;
/*  background-color: #EF0000; */
}

.c-indent {
  width: 44%;
  text-align: left;
/*  font-size: 0.8em;*/
  font-weight: bold;
  border: 1px solid #000000;
}

.c-indent-e {
  width: 70%;
  text-align: left;
/*  font-size: 0.8em;*/
  font-weight: bold;
  border: 1px solid #000000;
}

.c-indent1 {
  width: 100%;
  text-align: left;
  font-size: 1.2em;
  line-height: 1.8em;
  letter-spacing: 0.2em;
  margin: 0.25em auto 0.5em auto; /* 上　右　下　左 */
}

.c-indent2 {
  width: 100%;
  text-align: left;
  font-size: 1.0em;
  font-weight: bold;
  line-height: 1.8em;
  display: inline-block;
  color: #0099FF;
  letter-spacing: 0.2em;
  margin: 0.25em auto 0.5em auto; /* 上　右　下　左 */
}

.c-indent2 span {
  font-size: 0.8em;
  color: #000000;
}

.c-indent3 {
  width: 100%;
  text-align: left;
  font-size: 1.0em;
  font-weight: bold;
  line-height: 1.8em;
  display: inline-block;
  letter-spacing: 0.2em;
  margin: 0.25em auto 0.5em auto; /* 上　右　下　左 */
}

.c-indent4 {
  width: 66%;
  text-align: left;
/*  font-size: 0.8em;*/
  font-weight: bold;
  border: 1px solid #000000;
}

.c-indent5 {
  width: 100%;
  text-align: left;
  font-size: 1.0em;
  font-weight: bold;
  line-height: 1.8em;
  display: inline-block;
  text-decoration:underline;
  text-decoration-color: #FF0000;
  letter-spacing: 0.2em;
  margin: 0.25em auto 0.5em auto; /* 上　右　下　左 */
}

.c-indent6 {
  width: 100%;
  text-align: left;
  font-size: 0.8em;
  line-height: 1.8em;
  letter-spacing: 0.2em;
  margin: 0.25em auto 0.5em auto; /* 上　右　下　左 */
}

.br-span {
  display: block; /* SPAN の改行 */
}

.br-text {
  display: none; /* スマホのみ改行なし */
}

.br-text1 {
  display: block; /* スマホ・タブレット改行 */
}

.top-box {
  width: 90%;
  padding: 0.5em 1em;
  margin: 0 auto;
  font-weight: bold;
/*  color: #6091d3;/*文字色*/
  background: #FFFFFF;
  border: solid 1px #6091D3;/*線*/
  border-radius: 10px;/*角の丸み*/
}

.top-box ul {
  width: 100%;
}

.top-box li {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.7em;
  border-bottom: 1px solid #C0C0C0;
}

.top-div1 {
  width: 34%;
  text-align : left;
  margin-right: 0.5em;
  background-color: #CCFFFF;
}

.top-div2 {
  width: 60%;
  text-align : left;
  margin-right: 0.5em;
  background-color: #CCFFFF;
}

.top-div3 {
  width: 96%;
  text-align : left;
}

.box {
width: 100%;
margin : 0 auto;
text-align : center;
display: flex;
display: -ms-flexbox; /* IE10 */
flex-wrap: wrap;
-ms-flex-wrap: wrap; /* IE10 */
box-sizing: border-box;
padding: 0.2em 0 0 0; /* 上　右　下　左 */
}

.box1,.box2,.box3,.box4 {
width: 100%;
}

.box2 img {
  width: 50%;
  display: block;
  margin: 0 auto;
  padding: 0.8em;
}

.box3 iframe {
  width: 100%;
}

.box4 {
  text-align : left;
}

.tbl-1 {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.tbl-1 th,td {
    border: 1px solid #000000;
    padding: 0.1em;
    vertical-align: middle;
    box-sizing: border-box;
}

.tbl-1 tr:nth-of-type(1) th {
  border-top: none !important;
  border-left: none !important;
}

.tbl-2 {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.tbl-2 td {
    border: 1px solid #000000;
    padding: 0.1em;
    vertical-align: middle;
    box-sizing: border-box;
}

.tbl-2-1 {
  width: 38%;
}

.tbl-2-2 {
  width: 62%;
  text-align : left;
}

.tbl-2-3 {
  width: 26%;
  text-align : center;
}

.tbl-2-4 {
  width:70%;
  text-align : left;
}

.tbl-3 {
  border-collapse: collapse;
  table-layout: fixed;
/*  width: 100%;*/
}

.tbl-3 td {
  border: none;
  vertical-align: top;
}

.box-img {
  width: 100%;
  display: flex;
  justify-content: center;
  column-gap: 0.5em;
  text-align: center;
}

.box-img1 {
  padding: 0.25em; /* 上　右　下　左 */
  margin: 0.25em; /* 上　右　下　左 */
}

.box-img1 img {
  width: auto;
  height: 100%;
}

/* form1 */
dl.form1 dl,dt,dd {
margin: 0;
padding: 0;
}

dl.form1 {
background: #F2FFF4;
border: 1px solid #7777bb;
width: 94%;
margin:0 auto;
}

dl.form1 dt,dd {
line-height: 1em;
padding: 6px;
}
 
dl.form1 dd {
background: #F7F7FD;
}

/*form input */
.finput{
  display: inline-block;
  width: 100%;
  padding: 0.5em 0.5em 0.5em 0.5em; /* 上　右　下　左 */
  line-height: 1em;
  border: 1px solid #7777bb;
  box-sizing: border-box;
  margin: 0.2em 0;
}
/*form input end */

/*form textarea */
.t-area{
  display: inline-block;
  width: 100%;
  padding: 10px;
  border: 1px solid #7777bb;
  box-sizing: border-box;
  margin: 0.5em 0;
  line-height: 1.5em;
  height: 6em;
}
/*form textarea end */

/*form display */
#form-dis1,#form-dis2,#form-dis3,#form-dis4 {
  display: none;
}
/*form display end */

.red {
color: #FF0000;
}

/* Contents end */

/* @group Footer */

footer {
width : 98%;
margin : 0 auto;
color : #000000;
text-align : center;
}

.foot1 {
width : 96%;
margin : 0 auto;
color : #000000;
font-size: 0.4em;
text-align : left;
}

.foot1 a {
  color : #000000;
  text-decoration: none;
}

.foot1 a.current {
/*  font-weight: bold;*/
  text-decoration : underline;
  color: #0000FF;
}

.foot2 {
width : 96%;
margin : 0 auto;
color : #000000;
font-size: 0.8em;
text-align : left;
}

.foot2 a {
  color : #000000;
  text-decoration: none;
}

.foot2 a.current {
/*  font-weight: bold;*/
  text-decoration : underline;
  color: #0000FF;
}

.copy {
line-height: 2em;
background-color: #EFF6FF;
font-size: 0.8em;
}

/* @end */

/* hamberger start */

.hamburger {
margin: 20px auto 0;
width: 100%;
max-width: 900px;
display: flex;
justify-content: space-between;
}

.hamburger .btn-gNav {
position: fixed;
top: 20px;
right: 20px;
width: 30px;
height: 24px;
z-index: 12;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: all 400ms;
transition: all 400ms;
}

.hamburger .btn-gNav span {
position: absolute;
width: 100%;
height: 4px;
background: #000000;
border-radius: 10px;
-webkit-transition: all 400ms;
transition: all 400ms;
}

.hamburger .btn-gNav span:nth-child(1) {
top: 0;
}

.hamburger .btn-gNav span:nth-child(2) {
top: 10px;
}

.hamburger .btn-gNav span:nth-child(3) {
top: 20px;
}

.hamburger .btn-gNav.open span:nth-child(1) {
background: #ffffff;
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.hamburger .btn-gNav.open span:nth-child(2),
.hamburger .btn-gNav.open span:nth-child(3) {
top: 6px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

.gNav .gNav-menu {
display: flex;
justify-content: space-between;
}

.gNav .gNav-menu li {
margin: 0 auto;
padding: 0 5px;
}

.gNav .gNav-menu a:link {
color: #000000;
text-decoration: none;
}

.btn-gNav {
display: block;
}

.gNav {
position: fixed;
top: 0;
right: -100%;
width: 50%;
height: 30%; /*2024/10/05 30% --> 35% */
background-color: #FFFFCC;
font-size: 1em;
font-weight: 600;
box-sizing: border-box;
z-index: 1;
padding-top: 30px;
transition: .3s;
}

.gNav.open {
right: 0;
}

.gNav .gNav-menu {
padding: 0;
width: 100%;
height: 100%;
display: block;
flex-direction: column;
text-align: center;
}

.gNav .gNav-menu li {
width: 86%;
padding: 5px;
border-bottom: #000000 1px solid;
}

/* 2024/10/05 追加 */
.gNav .gNav-menu li:first-child {
display: none;
}

/* hamberger end */

/* @end */

/* ----------------------------------------------*/
/* ------------------- 768px --------------------*/
/* ----------------------------------------------*/
@media screen and (min-width : 768px){

html{ font-size : 87.5%} /*レスポンシブタイプセッティングの指定*/

#contents {
overflow : hidden;
width : 98%;
}

#contents-page {
width : 90%;
margin : 0 auto;
padding-top : 0.2em;
text-align : center;
}

.contents-head {
width : 90%;
}

.contents-head1 {
width : 90%;
}

.contents-head1 .image {
  width: 25%;
  height: auto;
  margin: 0;
  padding: 0 0 0.5em 0.5em;
  overflow: hidden;
  position: relative;
}

.contents-head1 .right {
  text-align : left;
  margin: 0 0 0 20px;
  padding: 0;
}

.contents-head1 .head1 {
  margin: 0.6em 0 0 0; /* 上　右　下　左 */
  padding: 0;
  font-weight: bold;
  font-size: 2em;
}

/* TOP Menu */

#menu {
  margin-top: 2em;
  margin-bottom: 2em;
}

#menu ul {
  width : 90%;
  margin : 0 auto;
}

#menu ul li {
  width: 23%;
  margin-right: 1em;
  border: 1px solid #000000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*最後の要素だけ*/
#menu ul li:last-child {
  margin-right: 0;
}

/* TOP Menu end */

/* Products Menu */

#products-menu {
  margin-top: 2em;
  margin-bottom: 2em;
}

#products-menu ul {
  width : 90%;
  margin : 0 auto;
}

#products-menu ul li {
  float: left;
  width: 48%;
  margin-bottom: 0.4em;
  margin-right: 0.5em;
  border: 1px solid #000000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*最後の要素だけ*/
#products-menu ul li:last-child {
  margin-right: 0;
}

/* Products Menu end */

/* Contents */

.top-text {
width: 80%;
margin-bottom: 1em;
}

.top-text1 {
width: 28%;
}

.products {
width: 90%;
display: flex;
justify-content: space-around;
margin : 0 auto;
text-align : center;
}

.p-box1 {
width: 33%;
display: flex;
justify-content: center;
align-items: center;
text-align : center;
background-color: #EFF6FF;
}

.p-box2 {
width: 33%;
margin : 0 auto;
text-align : center;
background-color: #EFF6FF;
}

.p-box2-text {
  width: 70%;
}

.p-box3 {
width: 33%;
display: flex;
justify-content: center;
align-items: center;
text-align : center;
text-align : center;
background-color: #EFF6FF;
}

.c-text {
  width: 88%;
}

.c-indent {
  width: 28%;
  font-size: 1.2em;
}

.c-indent-e {
  width: 40%;
  font-size: 1.2em;
}

.c-indent1 {
  width: 96%;
  font-size: 1.0em;
}

.c-indent2 {
  width: 96%;
  font-size: 1.1em;
}

.c-indent2 span {
  font-size: 0.8em;
}

.c-indent3 {
  width: 96%;
  font-size: 1.2em;
}

.c-indent4 {
  width: 38%;
  font-size: 1.2em;
}

.br-span {
  display: none; /* SPAN の改行 */
}

.br-text {
  display: block; /* テキストの改行 */
}

.top-box {
  width: 80%;
}

.top-box li {
  display: flex;
  flex-wrap: nowrap;
  border-bottom: 1px solid #C0C0C0;
}

.top-div1 {
  width: 20%;
  background-color: #FFFFFF;
}

.top-div2 {
  width: 26%;
  background-color: #FFFFFF;
}

.top-div3 {
  width: 52%;
}

.box {
  width: 96%;
}

.box1 {
  width: 70%;
}

.box2 {
  width: 28%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box2 img {
  width: 85%;
  height: auto;
}

.box3 {
  width: 80%;
}

.box4 {
  width: 70%;
}

.box-img {
  column-gap: 2em;
}

.tbl-2-1 {
  width: 30%;
}

.tbl-2-2 {
  width: 70%;
}

.tbl-2-3 {
  width: 16%;
}

.tbl-2-4 {
  width:70%;
}

/* form1 */
dl.form1 {
border-top: none;
width: 90%;
margin:0 auto;
}
dl.form1 dt {
border-top: 1px solid #7777bb;
clear: left;
float: left;
line-height: 2em;
width: 27%;
}

dl.form1 dd {
border-left: 1px solid #7777bb;
border-top: 1px solid #7777bb;
text-align: left;
line-height: 2em;
margin-left: 28%;
}
/* form1 end */

/*form input */
.finput{
  width: 60%;
}
/*form input end */

/*form textarea */
.t-area{
  width: 60%;
  line-height: 1.5em;
  height: 6em;
}
/*form textarea */

.foot1 {
  width : 98%;
  font-size: 1.0em;
}

.foot2 {
  width : 100%;
  font-size: 1.0em;
}

/* Contents end */

/* hamberger start */

.btn-gNav {
display: none;
}

.hamburger {
margin: -5px auto 0;
display: flex;
justify-content: flex-end;
}

.gNav {
width: 38%; /* 2024/10/05 20% --> 38% */
position: static;
top: 0;
right: 0;
padding-top: 1em;
height: auto;
background-color: transparent;
box-sizing: content-box;
z-index: 0;
font-size: 0.6em;
list-style : none
display: inline-block;
}

.gNav .gNav-menu {
display: flex;
width: 100%;
flex-direction: row;
justify-content: flex-end;
list-style : none
}

.gNav .gNav-menu li {
margin: 0 auto;
padding: 0 5px;
list-style-type: none;
border-bottom: 0px;
}

/* 2024/10/05 追加 */
.gNav .gNav-menu li:first-child {
display: inline;
}

/* hamberger end */

} /* 768px end */

/* ----------------------------------------------*/
/* -------------------1024px --------------------*/
/* ----------------------------------------------*/
@media screen and (min-width : 1024px) {

html{ font-size : 100%} /*レスポンシブタイプセッティングの指定*/

/* @group Contents */

#contents {
overflow : hidden;
width : 98%;
}

#contents-page {
width : 70%;
margin :0 auto;
padding-top : 0.4em;
text-align : center;
}

.contents-head1 .image {
  width: 24%;
  height: auto;
  margin: 0;
  padding: 0 0 0.5em 0.5em;
  overflow: hidden;
  position: relative;
}

.contents-head1 .head1 {
  margin: 0.6em 0 0 0; /* 上　右　下　左 */
  padding: 0;
  font-weight: bold;
  font-size: 2.2em;
}

.c-text {
  width: 68%;
}

.c-indent {
  width: 26%;
  font-size: 1.4em;
}

.c-indent-e {
  width: 40%;
  font-size: 1.4em;
}

.top-div1 {
  width: 16%;
}

.top-div2 {
  width: 20%;
}

.top-div3 {
  width: 62%;
}

.box2 img {
  width: 70%;
  height: auto;
}

.br-text1 {
  display: none; /* スマホ・タブレット改行 */
}

.foot1 {
  width : 80%;
  font-size: 0.8em;
}

.foot2 {
  width : 90%;
  font-size: 0.8em;
}

/* @end */

/* TOP Menu */

#menu ul {
  width : 76%;
}

/* TOP Menu end */

/* Products Menu */

#products-menu ul {
  width : 76%;
}

/* Products Menu end */

} /* 1024px end */