@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.8em; margin:0;}
li,td,th { font-size:;ze:19px; line-height:1.8em; font-weight:normal;}
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;}

#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;
  overflow: visible !important; //両サイドが表示される
  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: #DA6C2D; top:-60px;}
  50% { background: yellow;}
  100% { background: #DA6C2D; top:0;}
}
@keyframes ReleaseMenu {
  0% { background: #DA6C2D;}
  50% { background: yellow;}
  100% { background: #DA6C2D;}
}
nav { background-color:#DA6C2D; 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;}
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:#DA6C2D; background: rgba(255,255,255,0.9); transition: all 0.2s ease; opacity:1;}
nav>ul>li>a.here { color:#DA6C2D; 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:#DA6C2D; background: rgba(255,255,255,0.9); transition: all 0.2s ease; opacity:1; background-position:right top;}
nav>ul>label.here { color:#DA6C2D; 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:#DA6C2D; background: rgba(255,255,255,0.9);}

section { background-color:white; padding:20px 0; background-size:cover;}
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; overflow:hidden;}
article>img { display:block; margin: 20px auto;}

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%;}

section h2 { position: relative; background: repeating-linear-gradient(-45deg, rgba(100,149,237,.3), rgba(100,149,237,.3) 10px, #fff 0, #fff 20px); padding: 1em; color: #65513f;}
section h4 { font-size:32px; line-height:1.4em; font-weight:normal; margin:50px 0; border-bottom: 4px double #20489D; text-align:left; text-indent:1em;}

#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;}

.crossline { width:980px; min-height:0px; position:relative; display:block; margin:50px auto;}
.crossline::after { position: absolute; background-color: #6098FF; top:0; left: 50%; content: ''; display: block; width: 4px; transition: .5s all; height: 100%;}
.crossline>div { width:100%; height:68px; position:relative; display:block; border:none; margin-bottom:20px;}
.crossline>div::after { position: absolute; background-color: #6098FF; bottom: 0; content: ''; display: block; height: 4px;left: 0; transition: 2s all; width: 100%;}
.crossline>div>h3 { font-size:28px; padding:20px 0 10px; font-weight:normal; display:block; text-align:center; width:50%; margin: 0 auto 0 0;}
.crossline>span { display:inline-block; width:460px; margin: 0 30px 0 20px; float:left;}
.crossline>span>p { font-size:18px; color:black;}
.crossline>p { display:block; width:50%; min-height:350px; position:relative; margin-left:50%;}
.crossline>p>img { position:absolute; top:0; left:0; right:0; margin: 0 auto; display:block; width:400px; height:300px;}
.crossprechange::after { height:0;}
.crossprechange>div:after { width: 0;}
.crosschange::after { height:100%;}
.crosschange>div:after { width: 100%;}

.crossright>div>h3 { margin: 0 0 0 auto;}
.crossright>div::after { left:auto; right: 0;}
.crossright>span { margin: 0; float:right;}
.crossright>p { margin-left:0;}

.horizonline { width:980px; min-height:0px; position:relative; display:block; margin:50px auto;}
.horizonline>div { width:100%; height:68px; position:relative; display:block; border:none; margin-bottom:20px;}
.horizonline>div::after { position: absolute; background-color: #6098FF; bottom: 0; content: ''; display: block; height: 4px;left: 0; transition: 2s all; width: 100%;}
.horizonline>div>h3 { font-size:28px; padding:20px 0 10px; font-weight:normal; display:block; text-align:center; width:100%; margin: 0 auto 0 0;}
.horizonline>span { display:inline-block; width:100%; margin: 0 30px 0 20px;}
.horizonline>span>p { font-size:18px; color:black;}

.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:#DA6C2D; 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 { font-size:14px;}
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;}
}
@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%;}
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;}
.crossline { width:100%;}
.crossline::after { left: 50px;}
.crossright::after { left:700px;}
.crossline>div>h3 { width:670px; text-indent:80px; text-align:left;}
.crossright>div>h3 { text-align:right; margin-right:80px;}
.crossline>span { display:block; width:640px; margin: 0 30px 0 80px; float: none;}
.crossline>p { display:block; width:670px; margin-left:80px; margin-top: 20px;}
.crossline>p>img { width:400px; height:300px;}
.crossright>span { margin: 0 80px 0 30px;}
.crossright>p { margin-right:80px;}
}

#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;
}
/**/
