@charset "UTF-8";

#bxwrap { width:100%; max-height:700px; height:100%; margin: 0 auto; padding:0; position: relative;overflow:hidden;}
.bxslider{ margin:0px; padding:0;}
.bx-wrapper { position: relative;}
.bx-wrapper img { object-fit: cover; margin: 0 auto;}
.bx-viewport { max-height: 500px;}
.bx-wrapper .bx-viewport {-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;border:none;background-color:#F2EC96;}
.bxslider{margin-left: 50%;}
.bxslider>li{margin-left:-490px;margin-right:490px}
#bxwrap>img { position:absolute; left:0; right:0; top:180px; bottom:0;  margin: auto;}

.fadeintxt {
    opacity: 0;
    animation: fadeintxt 6s ease forwards;
}
@keyframes fadeintxt {
    100% {  opacity: 1;}
}
.txt01 {animation-delay: 3s;}
.txt02 {animation-delay: 6s;}
.txt03 {animation-delay: 9s;}
.txt04 {animation-delay: 12s;}

.eraseout {
    display: flex; justify-content: space-evenly; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; flex-direction: column;
    opacity: 1;
    animation: eraseout 4s ease forwards;
    animation-delay: 20s;
}
@keyframes eraseout { 100% {  opacity: 0;}}

#catchinwrap {
    position:absolute;
    left:0; top:0; right:0; bottom:0; margin:auto; text-align:center;
}
.catchin {
    opacity: 0;
    animation: catchin 6s ease forwards;
    animation-delay: 22s;
}
@keyframes catchin {
    100% {  opacity: 1;}
}
.catchinlogo { opacity: 0; animation: catchinlogo 3s ease forwards; animation-delay: 24s;}
@keyframes catchinlogo { 100% { opacity: 1; transform: scale(1.5);}}
#catchinwrap p { font-size:72px;}
#catchinwrap b { font-size:72px; font-weight:normal; color:red;}

#lead { width:980px; margin:60px auto 30px; text-align:left;background:url("./indexline.png") repeat-x bottom;padding-bottom:90px;}
#lead>p { font-size:22px;}

#whatsnew { width:100%; overflow:hidden; text-align:right;}
#whatsnew>div { width:100%; height:260px; overflow:hidden;}
#whatsnew>div>iframe { width:100%; height:260px; margin:0; padding:0; overflow-y:hidden;}
#whatsnew>a { width:180px; height:40px; margin:10px 0 0 auto; background-image:url(index/ichiran.jpg); display:block; background-color:gray;}

.image img { width:300px; height:225px; margin-right:50px;}

#maru>div { padding-left:65px; width:100%;}
#maru>div>p { display:inline-block; width:250px; height:250px; border-radius:50%; background-color:#20489D; margin-right:50px; overflow:hidden; position:relative;}
#maru>div>p>img { width:250px; height:500px; position:absolute; top:0; left:0; transition: all 0.4s ease; -webkit-transition: all 0.4s ease;}
#maru>div>p:hover img { top:-250px;}

@media (max-width: 1020px) and (min-width: 768px) {
#bxwrap { width:100%;}
#bxwrap>img { top:0px; width:70%;}
#lead { width:90%;}
#ttlcatch>div { width:100%}
}
@media (max-width: 767px) {
#bxwrap { width:100%;}
#bxwrap>img { top:0px; width:70%;}
#lead { width:90%;}
#maru>div { padding-left:100px;}
#maru>div>p { margin-right:50px; margin-bottom:50px;}
#ttlcatch>div { width:100%}
}