@charset "UTF-8";

body,html { text-align: center; margin:0; padding:0;}

body{font-family: Verdana, Roboto, "Droid Sans","メイリオ", Meiryo,  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",  sans-serif; min-width:1200px;width: 100%;
 -webkit-text-size-adjust: 100%; animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal;}
@keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1}}
@-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1}}

*{}
a { text-decoration: none; color: black;}
a:hover { opacity: 0.2; -webkit-transition:opacity 0.2s linear;}
p,span,dd,dt,b {font-size:19px; line-height:1.5;margin:0;text-align:justify;box-sizing:border-box;}
li,td,th { font-size:;ze:19px; line-height:1.5em; font-weight:normal;box-sizing:border-box;}
table { width:100%; border-collapse:collapse;}
sup { font-size: 70%; vertical-align: top; position: relative; top:-0.4em;}
b { color:red;}
img { max-width:800px;box-sizing:border-box;}

#goto-top { position: fixed; bottom: -80px; right: 10px; z-index: 999; width: 80px; height: 80px; opacity: 0.6; -webkit-transition: all 0.4s ease; cursor: pointer; background: url(yajirusi.png) no-repeat; overflow:hidden;}
#goto-top:hover { opacity: 0.9;}

#bxwrap{
   overflow:hidden; /* 画面幅からでないように */
   width:100%;　　　/* 幅100％の場合 */
   height:400px;　　/* 画像の高さと同じ */
}
#bxwrap .bx-viewport{
  overflow:visible!important; /* 両サイドに前後の画像を表示させる */
  background: transparent !important;
  border: 0;
  height: 500px !important;
  margin: 0 auto;             /* 画面中央にする */
}
.bx-wrapper .bx-prev {
  left: -50px !important;
}
.bx-wrapper .bx-next {
  right: -50px !important;
}

header { display:block; width:980px; height:100px; background-color:white; margin: 0 auto; position: relative;}
#headlogo { position:absolute; height:100px; top:0; left:0; -webkit-transition: all 0.8s ease;transition:all 0.8s ease; z-index:10;}
#inquiry { position:absolute; top:28px; right:0; display:block; z-index:10; -webkit-transition: all 0.8s ease;transition:all 0.8s ease;}
#inquiry>a { display:inline-block; color:white; font-size:20px; line-height:48px; padding:0 1.4em; margin-top:20px; border-radius:8px;border:1px solid gray;}

#FloatMenu { position:relative; top: 0; right: 0; left: 0; margin: 0 auto; zoom:1; min-width:980px; z-index: 10; opacity:0.9;
 filter: alpha(opacity=900);        /* ie lt 8 */
 -ms-filter: "alpha(opacity=90)";  /* ie 8 */
 -moz-opacity:0.9;                 /* FF lt 1.5, Netscape */
 -khtml-opacity: 0.9;              /* Safari 1.x */
}
@keyframes FixMenu {
  0% { background: #FF6347; top:-60px;}
  50% { background: yellowgreen;}
  100% { background: #FF6347; top:0;}
}
@keyframes ReleaseMenu {
  0% { background: #FF6347;}
  50% { background: yellowgreen;}
  100% { background: #FF6347;}
}
nav { background-color:#FF6347; display:block; height:60px;}
nav>ul { display:table; text-align:center; table-layout:auto; width:980px; margin:0 auto; padding:0;}
nav>ul>li { display:table-cell; color:white; padding:0; margin:0;width:20%;}
nav>ul a { color:white; display:block; transition: all 0.6s ease; line-height:20px; font-size:20px; padding:20px 0; z-index:9;}
nav>ul a:hover { color:#FF6347; background: rgba(255,255,255,0.9); transition: all 0.2s ease; opacity:1;}
nav>ul>li>a.here { color:#FF6347; background: rgba(255,255,255,0.9);}

nav>ul>label { color:white; display:block; transition: all 0.6s ease; line-height:20px; font-size:20px; padding:20px 0 10px;cursor :pointer; background-image:url(menuarrow.png); background-position:right top; background-repeat:no-repeat;}
nav>ul>label:hover { color:#FF6347; background: rgba(255,255,255,0.9); transition: all 0.2s ease; opacity:1; background-position:right top;}
nav>ul>label.here { color:#FF6347; background: rgba(255,255,255,0.9);}
nav>ul>label::after { content: attr(data-text); display: block; color: #aaa; font-size: 14px; line-height:1em; padding:4px 0 8px;}
nav>ul>input { display: none;}
nav>ul>ul { list-style-type:none; margin:0; padding:0; width:400px; text-align:left;}
nav>ul>ul>li { max-height: 0; overflow-y: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
#menu_bar01:checked ~ #links01 li { max-height: 46px; opacity: 1;}
nav>ul>ul>li>a { color:black; background-color:white; background: rgba(255,255,255,0.4); padding:10px 0; text-indent:1em;}
nav>ul>ul>li>a:hover { color:#FF6347; background: rgba(255,255,255,0.9);}

section { background-color:white; padding:20px 0; background-size:cover;}
section.bg1{background-color:#FEF5CC;padding:0;}
section.bg1>article{margin:0 auto;}
article { width:980px; margin: 20px auto 10px; padding-top:0px; font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;text-align:left;overflow:hidden;position:relative;}
article>img { display:block; margin: 20px auto;}
article.FlexColumns{display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:30px;}
article.FlexRows{display:flex;flex-direction:column;align-items:center;justify-content:center;}

section h1 { font-size:32px; line-height:36px; padding: 4px 0 20px; font-weight:normal; margin-bottom:20px; text-align:left; display:block; position:relative; background-image:url(h1back.png); background-repeat:no-repeat; background-position:top left; text-indent:140px;}
section h1::after { position: absolute; background-color: #6098FF; bottom: 10px; content: ''; display: block; height: 4px;left: 0; transition: 2s all; width: 100%;}
.h1line0::after { width:0;}
.h1line1::after { width:100%;}
h2 {font-size:32px;line-height:40px;font-weight:normal;margin:0;display:flex;justify-content:center;align-items:center;width:100%;height:220px;position:relative;padding:0;
text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;}
h2::after{content:attr(data-text);position:absolute;text-align:center;margin-top:68px;font-size:22px;
background-image: linear-gradient(135deg,rgba(255,255,255,0) 40%, #fff21e 50%, #e4352b 100%);
background-repeat: no-repeat;
background-size: 100% 6px;
background-position: left bottom 12px;}
section h4{font-size:24px;line-height:1.4em;font-weight:normal;width:100%;padding-bottom:20px;text-align:center;background:url(./images/h4back.png) bottom center no-repeat;}

#gaiyou section.bg1{background-color:#F0F8FF;}
#gaiyou .FlexColumns{align-items:center;}
#gaiyou h2 {font-size:32px;line-height:40px;font-weight:normal;margin:0;display:flex;justify-content:center;align-items:center;width:100%;height:220px;position:relative;padding:0;background:url(./images/h2back2.png) left center no-repeat;}
#gaiyou h2::after{color:blue;background-image:none;}

#kouza section.bg1{background-color:#FAF5E8;}
#kouza h2 {font-size:32px;line-height:40px;font-weight:normal;margin:0;display:flex;justify-content:center;align-items:center;width:100%;height:220px;position:relative;padding:0;background:url(./images/h2back1.png) left center no-repeat;}
#kouza h2::after{color:#ea5414;background-image:none;}
#kouza .FlexColumns{flex-wrap:wrap;gap:15px 10px;margin-bottom:52px;}
#kouza .FlexColumns>div{width:46%;border:1px solid #f39700;padding:15px;}
#kouza .FlexColumns>div>p{padding:.5em 0 .5em .5em;line-height:1.2;}
#kouza .FlexColumns>div>h5{font-size:20px;line-height:1em;margin:0;padding:0;}
#kouza .FlexColumns>div>h5::before{content:"●";color:#EF9594;}
#kouza .FlexColumns>div>div{display:flex;flex-direction:row;align-items:start;justify-content:center;}
#kouza .FlexColumns>div>div>img{width:240px;}
#kouza .FlexColumns>div>div>p{font-size: 18px;line-height: 1.2;padding-left:.5em;text-align:justify;}
#kouza .FlexColumns:nth-of-type(2)>div{border:1px solid green;}
#kouza .FlexColumns:nth-of-type(3)>div{border:1px solid #82D1E7;}

#shisetsu section.bg1{background-color:#EAFFEA;}
#shisetsu h2 {font-size:32px;line-height:40px;font-weight:normal;margin:0;display:flex;justify-content:center;align-items:center;width:100%;height:220px;position:relative;padding:0;background:url(./images/h2back3.png) left center no-repeat;
text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;}
#shisetsu h2::after{content:attr(data-text);position:absolute;background-image:none;color: green;}
#shisetsu h4{background:url(./images/h4back2.png) bottom center no-repeat;}
#shisetsu h5{margin:0;line-height:1.5;font-size:22px;text-align:center;border-bottom:1px dashed #666666;}
#shisetsu strong{font-size:20px;font-weight:bold;background-color:#EAFFEA;color:black;display:block;padding: .5em 1em;margin: 1em 0 .5em;}
#shisetsu .FlexColumns{flex-wrap:wrap;gap:40px 10px;margin-bottom:52px;justify-content: space-around;}
#shisetsu .FlexColumns>div{width:420px;background-color:#F7FFEF;display:flex;flex-direction:column;justify-content:space-between;}
#shisetsu .FlexColumns>div>div{}
#shisetsu .FlexColumns>div img{width:100%;}
#shisetsu .FlexColumns>div p{width:100%;padding:.5em;}
#shisetsu article ul{margin:0;}
#shisetsu article li{font-size:20px;}
#shisetsu img {margin:0;}

#shisetsu table {margin: 30px 0px 0px 4px;width: 790px;border: solid 1px #aaaaaa;}
#shisetsu td,#shisetsu th { border: solid 1px #aaaaaa; text-align: center;}

#shisetsu .taiiku th{text-align:center;}
#shisetsu .taiiku tr:first-child{display:none;}
#shisetsu .taiiku tr:nth-of-type(2) td:nth-child(n+3){border:none;}
#shisetsu .taiiku tr:nth-of-type(2) td:nth-child(3){text-align:right;}
#shisetsu .taiiku tr:nth-of-type(2) td:nth-child(4){text-align:right;}
#shisetsu .taiiku tr:nth-of-type(3) td{border:none;text-align:right;}
#shisetsu .taiiku tr:nth-of-type(4) td{border:none;}
#shisetsu .taiiku tr:nth-of-type(4) td:not(:last-child){text-align:right;}
#shisetsu .taiiku tr:nth-of-type(5) td{border:none;}
#shisetsu .training th{text-align:center;}
#shisetsu .training span {
display: inline-block;
width: 22px;
height: 22px;
margin: 2px;
padding-top: 0;
text-align: center;
border-radius: 50%;
background-color: gainsboro;
box-sizing: border-box;
vertical-align: middle;
font-size: 15px;
}
#shisetsu .training td:nth-last-child(-n+2){border:none;}

#shisetsu .fusoku {width:100%;margin-bottom:30px;}
#shisetsu .fusoku p{width:100%;text-indent:-1em;margin-left:2em;}
#shisetsu .fusoku p::before{content:"○";}
#shisetsu .fusoku p>a{text-decoration:underline;font-weight:bold;}

#shisetsu .heya img {}
#shisetsu .heya .setsumei { margin-left: 240px; width: 550px; height: 180px; background-color: #ffffcc;}
#shisetsu .heya .setsumei div { margin: 10px;}
#shisetsu .heya .setsumei .namae { font-size: 14pt; font-weight: bold;}
#shisetsu .heya .setsumei hr { border-style: dashed; border-color: #666666;}
#shisetsu .heya .setsumei .naiyou { font-size: 12pt;}

#shisetsu table {
 margin: 30px 0px 0px 4px;
 width: 98%;
 border: solid 1px #aaaaaa;
}
#shisetsu table td {
 border: solid 1px #aaaaaa;
 text-align: center;
}
#shisetsu td>b {color:#009900;font-weight:bold;}
#ButtonA{display:block;background-color:#00A651;text-align:center;padding:.5em 1em;color:white;font-size:22px;}

#download section.bg1{background-color:#FEF0FE;}
#download h2 {font-size:32px;line-height:40px;font-weight:normal;margin:0;display:flex;justify-content:center;align-items:center;width:100%;height:220px;position:relative;padding:0;background:url(./images/h2back4.png) left center no-repeat;}
#download h2::after{color:blue;background-image:none;}


#pageimg { height:300px; background-image:url(pageimg.png); background-position:bottom; -webkit-transition: all 0.8s ease;transition:all 0.8s ease;}
#pageimg>div { height:100%; width:980px; margin:0 auto; position:relative; padding:20px; text-align:left;}
#pageimg p,span { color:white; font-size:32px; font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;}
#pageimg>div>p { position:absolute; top:10px; left:50px;}
#pageimg>div>span { font-size:96px; display:block; position:absolute; bottom:10px; right:60px;}

.image { padding:60px 0; display:block;}
.image>a { display:inline-block; margin:0 0 60px 20px; position:relative; overflow:hidden; background-color:white; border-radius:20px;}
.image>a>img { display:block; margin:0 auto; opacity:1;transition:all 0.8s ease;}
.image>a:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.mask { width:100%; height:auto; position:absolute;top:175px;left:0;background:rgba(0,0,0,0.4); color:white; -webkit-transition: all 0.8s ease;transition:all 0.8s ease; font-size:22px;line-height:50px; text-align:center;}
.mask>p { font-size:22px;line-height:50px;}
@keyframes scrollAnime{
    0% { transform: translateX(0%)}
  100% { transform: translateX(-200%)}
}
.image>a:hover { opacity: 1;}
.image>a:hover img { opacity:0.6;}
.image>a:hover .mask>p { animation: scrollAnime 5s linear infinite; padding-left: 100%; white-space : nowrap;}

.tableset { width:980px; margin:0 auto;}
.tableset dl { box-sizing: border-box; border-bottom: 1px solid #ccc; width:98%; margin:0 auto;}
.tableset dt,dd { box-sizing: border-box; padding: 10px 10px 0 10px; border-top: 1px solid #ccc; line-height:1.4em; font-size:22px; text-align:left;}
.tableset p { line-height: 1em: padding: 0; margin:0 0 0.4em;}
.tableset sup { color: red;}
.tableset dt { width: 30%; float: left; text-align:center; vertical-align:middle;}
.tableset dd { background: #fff; margin-left: 30%; padding-bottom: 10px;}
.tableset input,textarea { width:100%; font-size:22px; padding:0 .2em;}
.inputbutton  { font-size:24px; line-height:42px;}

.subscript { margin:20px auto; font-size:32px; line-height:48px; display:block; width:10em; background-color: greenyellow; text-align:center; border-radius:20px; border: 4px solid green;}

.eraseimg { animation: eraseimg 10s ease 0s infinite normal; -webkit-animation: eraseimg 10s ease 0s infinite normal;}
@keyframes eraseimg {
0% {opacity: 1}
50% {opacity: 1}
60% {opacity: 0}
90% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes eraseimg {
0% {opacity: 1}
50% {opacity: 1}
60% {opacity: 0}
90% {opacity: 0}
100% {opacity: 1}
}

footer { background-color:#FF6347; margin-top:80px; font-size:16px;}
footer>div { width: 980px; height:160px; display: flex; align-items:flex-end; margin: 0 auto; text-align:left; position: relative;}
footer>div>div { margin:auto 0 20px; position: relative; width:50%;}
footer>div>div>p { font-size:14px; line-height:1.6em; color:white;}
footer>div>div>img { position:absolute; right:0; bottom:10px; width:80px;}
footer>div>span { display:block; position:absolute; bottom:20px; right:0; text-align:right;}
footer>div>span>p { font-size:14px; line-height:1.6em; color:white;}
footer>div>span>a>img { display:inline-block; margin-right:60px; width:60px;}

@media (max-width: 1020px) and (min-width: 768px) {
body,html{ width:980px; overflow-x:hidden; min-width:980px;}
header { width:100%;}
#headlogo { width:10px;}
#FloatMenu { min-width:980px; width:100%;}
nav { width:100%; margin:0 auto;}
nav>ul { width:100%;}
article { width:100%;}
#pageimg { width:100%;}
.image>a { margin:0 0 20px 20px;}
.tableset { width:100%;}
footer>div { width:90%; margin:auto;}
footer>div>span { bottom:40px; right:20px;}
footer>div>div>img { display:none;}
}
@media (max-width: 767px) {
body,html{ width:750px; overflow-x:hidden; min-width:750px;}
header { width:100%;}
#headlogo { width:311px; height:65px;}
#FloatMenu { min-width:750px; width:100%;}
#FloatMenu>ul>li>a { font-size: 16px;}
nav { width:100%; margin:0 auto;}
nav>ul { width:100%;}
article { width:100%;}
#pageimg>div { width:100%;}
.image>a { margin:0 0 20px 50px;}
.tableset { width:100%;}
footer>div { width:90%; margin:auto;}
footer>div>div { width:280px;}
footer>div>span { bottom:40px; right:20px;}
footer>div>div>img { display:none;}
}

#loader-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #FFFFCC; z-index: 11;}
#loader { display: none; position: fixed; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; text-align: center; color: black; z-index: 12;}

/* for modern brouser */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.clearfix {
 display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/**/