a, a:focus{ outline: none; }


/*==position==*/


.fuwafuwa_1 {animation: fuwafuwa_1 4s ease-in-out infinite;}

@keyframes fuwafuwa_1 {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1.0);
    }
}

#n_2 {width: 20%;left: 35%;top: 5.9%;z-index:1;}
#n_1 {width: 33%;left: 51%;top: 5.3%;z-index:2;}
#n_9 {width: 12.2%;left: 10.6%;top: 24.8%;z-index:3;}
#n_5 {width: 25.1%;top: 15.7%;left: 18.8%;z-index:4;}
#n_8 {width: 36.9%;top:18.1%;left: 35%;z-index:5;}
#n_3 {width: 23%;top: 29%;left: 35%;z-index:6;}
#n_12 {width: 9.4%;top: 32.9%;left: 74.9%;z-index:7;}
#n_10 {width: 23.1%;top: 45%;left: 13.3%;z-index:8;}
#n_6 {width: 25.8%;top: 48%;left: 22.2%;z-index:9;}
#n_7 {width: 27.2%;top: 42.9%;left: 47%;z-index:10;}
#n_4 {width: 15.8%;top: 47.5%;left: 63.8%;z-index:11;}
#n_13 {width: 9.4%;top: 73.5%;left: 72%;z-index:12;}
#n_14 {width: 15%;top: 71.5%;left: 23.7%;z-index:13;}
#n_11 {width: 20.4%;top: 60.1%;left: 52.3%;z-index:14;}
#n_15 {width: 19.7%;top: 58.8%;left: 34%;z-index:15;}

#n_1,#n_2,#n_3,#n_4,#n_5,#n_6,#n_7,#n_8,#n_9,#n_10,#n_11,#n_12,#n_13,#n_14,#n_15{
height: auto; position: absolute; overflow: hidden; transition: all 0.3s ease-in-out;
}

#n_1:hover,#n_2:hover,#n_3:hover,#n_4:hover,#n_5:hover,
#n_6:hover,#n_7:hover,#n_8:hover,#n_9:hover,#n_10:hover,
#n_11:hover,#n_12:hover,#n_13:hover,#n_14:hover,#n_15:hover{
transform: scale(1.15);z-index:999; outline: none; text-decoration:none
}
#n_1:active,#n_2:active,#n_3:active,#n_4:active,#n_5:active,
#n_6:active,#n_7:active,#n_8:active,#n_9:active,#n_10:active,
#n_11:active,#n_12:active,#n_13:active,#n_14:active,#n_15:active{
transform: scale(1.1);z-index:999; outline: none; text-decoration:none
}

#n_1 a:forcus,#n_2 a:forcus,#n_3 a:forcus,#n_4 a:forcus,#n_5 a:forcus,
#n_6 a:forcus,#n_7 a:forcus,#n_8 a:forcus,#n_9 a:forcus,#n_10 a:forcus,
#n_11 a:forcus,#n_12 a:forcus,#n_13 a:forcus,#n_14 a:forcus,#n_15 a:forcus{
outline: none; text-decoration:none}


@media screen and (max-height: 688px) {
#n_2 {width: 20%;height: auto;left: 37.9%;top: 5.9%;}
#n_1 {width: 33%;height: auto;left: 53.2%;top: 5.3%;}
#n_9 {width: 12.2%;height: auto;left: 14.6%;top: 24.8%;z-index:4}
#n_5 {width: 30%;height: auto;top: 13.7%;left: 18.8%;z-index:3}
#n_8 {width: 36.9%;height: auto;top:18.1%;left: 40%;}
#n_3 {width: 23%;height: auto;top: 29%;left: 35%;}
#n_12 {width: 9.4%;height: auto;top: 32.9%;left: 74.9%;}
#n_10 {width: 23.1%;height: auto;top: 50.6%;left: 15.3%;z-index:9}
#n_6 {width: 28%;height: auto;top: 45%;left: 25%;z-index:8}
#n_7 {width: 35%;height: auto;top: 40.9%;left: 40%;}
#n_4 {width: 16%;height: auto;top: 44%;left: 63.8%;}
#n_14 {width: 15%;top: 69.5%;left: 25%;}
#n_11 {width: 20.4%;top: 62.1%;left: 53.3%;}
#n_13 {width: 9.4%;top: 70%;left: 70%;}
#n_15 {width: 19.7%;top: 62%;left: 35.6%;}
}

@media screen and (max-width: 1800px) and (min-height:689px) {
#n_2 {width: 20%;height: auto;left: 37.9%;top: 5.9%;}
#n_1 {width: 33%;height: auto;left: 53.2%;top: 5.3%;}
#n_9 {width: 12.2%;height: auto;left: 14.6%;top: 24.8%;z-index:4}
#n_5 {width: 30%;height: auto;top: 13.7%;left: 18.8%;z-index:3}
#n_8 {width: 36.9%;height: auto;top:18.1%;left: 40%;}
#n_3 {width: 23%;height: auto;top: 29%;left: 35%;}
#n_12 {width: 9.4%;height: auto;top: 32.9%;left: 74.9%;}
#n_10 {width: 23.1%;height: auto;top: 55.6%;left: 15.3%;z-index:9}
#n_6 {width: 28%;height: auto;top: 45%;left: 25%;z-index:8}
#n_7 {width: 35%;height: auto;top: 40.9%;left: 40%;}
#n_4 {width: 16%;height: auto;top: 44%;left: 63.8%;}
#n_14 {width: 15%;top: 69.5%;left: 25%;}
#n_11 {width: 20.4%;top: 62.1%;left: 53.3%;}
#n_13 {width: 9.4%;top: 70%;left: 70%;}
#n_15 {width: 19.7%;top: 62%;left: 35.6%;}
}


@media screen and (max-width: 1024px) and (min-height:689px) {
#n_1 {width: 45%;left: 10%;top: 2%;z-index:2}
#n_2 {width: 35%;left: 46%;top: 6%;z-index:1}
#n_12 {width: 14%;left: 80%;top: 40%;z-index:8}
#n_5 {width: 43%;left: 10%;top: 13%;z-index:3;}
#n_3 {width: 35%;left: 60%;top: 25%;z-index:5}
#n_7 {width: 50%;left: 18%;top: 32%; z-index:6;}
#n_4 {width: 25%;left: 5%;top: 45%;z-index:7;}
#n_9 {width:20.6%;left: 7%;top: 20.7%;z-index:4}
#n_8 {width: 55%;left: 27%;top: 38%;z-index:9}
#n_6 {width: 40%;left: 32%;top: 53%;z-index:11;}
#n_11 {width: 35%;left: 12%;top: 57%;z-index:12}
#n_13 {width: 16%;left: 22%;top: 74%;z-index:13;}
#n_10 {width: 35%;left: 59%;top: 58%;z-index:10}
#n_14 {width: 30%;left: 28%;top: 70%;z-index:14}
#n_15 {width: 26%;left:47%;top:68%;z-index:15}
}

@media screen and (max-width: 768px) and (min-height:689px) {
#n_1 {width: 70%;left: 10%;top: 2%;z-index:1}
#n_2 {width: 45%;left: 45%;top: 8%;z-index:2}
#n_12 {width: 18%;left: 5%;top: 20.7%;z-index:4}
#n_5 {width: 53%;left: 7%;top: 13%;z-index:3;}
#n_3 {width: 47%;left: 54%;top: 25%;z-index:5}
#n_7 {width: 60%;left: 15%;top: 33%; z-index:6;}
#n_4 {width: 35%;left: 2%;top: 41%;z-index:7;}
#n_9 {width:20.6%;left: 78.5%;top: 38%;z-index:8}
#n_8 {width: 63%;left: 27%;top: 41%;z-index:9}
#n_6 {width: 52%;left: 52%;top: 54%;z-index:10}
#n_11 {width: 45%;left: 15.6%;top: 52%;z-index:11}
#n_13 {width: 25%;left: 12%;top: 65%;z-index:12;}
#n_10 {width: 38%;left: 37%;top: 57%;z-index:13;}
#n_14 {width: 42%;left: 18.6%;top: 68%;z-index:14}
#n_15 {width: 38%;left:46%;top:66%;z-index:15}
}

@media screen and (max-width: 668px) and (min-height:689px)  {
#n_1 {width: 70%;left: 6%;top: 3%;z-index:1}
#n_2 {width: 45%;left: 45%;top: 8%;z-index:2}
#n_12 {width: 18%;left: 5%;top: 20.7%;z-index:4}
#n_5 {width: 53%;left: 7%;top: 13%;z-index:3;}
#n_3 {width: 47%;left: 54%;top: 25%;z-index:5}
#n_7 {width: 60%;left: 15%;top: 33%; z-index:6;}
#n_4 {width: 35%;left: 2%;top: 41%;z-index:7;}
#n_9 {width:20.6%;left: 79%;top: 38%;z-index:8}
#n_8 {width: 63%;left: 27%;top: 41%;z-index:9}
#n_6 {width: 52%;left: 51%;top: 54%;z-index:10}
#n_11 {width: 45%;left: 15.6%;top: 52%;z-index:11}
#n_13 {width: 25%;left: 12%;top: 66%;z-index:12;}
#n_10 {width: 38%;left: 37%;top: 58%;z-index:13;}
#n_14 {width: 42%;left: 18.6%;top: 69%;z-index:14}
#n_15 {width: 38%;left:46%;top:68%;z-index:15}
}

@media (orientation: portrait) and (max-width:480px) {
#n_1 {width: 70%;left: 6%;top: 2%;z-index:1}
#n_2 {width: 45%;left: 44%;top: 8%;z-index:2}
#n_12 {width: 18%;left: 5%;top: 20.7%;z-index:3}
#n_5 {width: 53%;left: 8%;top: 15%;z-index:4}
#n_3 {width: 47%;left: 53%;top: 26%;z-index:5}
#n_7 {width: 60%;left: 15%;top: 32%; z-index:6;}
#n_4 {width: 35%;left: 2%;top: 40%;z-index:7;}
#n_9 {width:21%;left: 78%;top: 37%;z-index:8}
#n_8 {width: 63%;left: 27%;top: 40%;z-index:9}
#n_6 {width: 52%;left: 50%;top: 52%;z-index:10}
#n_11 {width: 45%;left: 15.6%;top: 50%;z-index:11}
#n_13 {width: 25%;left: 12%;top: 64%;z-index:12;}
#n_10 {width: 38%;left: 36%;top: 56%;z-index:13;}
#n_14 {width: 42%;left: 18.6%;top: 67%;z-index:14}
#n_15 {width: 38%;left:45%;top:66%;z-index:15}

.fuwafuwa_1 {animation: fuwafuwa_1 4s ease-in-out infinite;}

@keyframes fuwafuwa_1 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

#n_1:hover {transform: scale(1.3);}
#n_2:hover {transform: scale(1.3);}
#n_3:hover {transform: scale(1.3);}
#n_4:hover {transform: scale(1.3);}
#n_5:hover {transform: scale(1.3);}
#n_6:hover {transform: scale(1.3);}
#n_7:hover {transform: scale(1.3);}
#n_8:hover {transform: scale(1.3);}
#n_9:hover {transform: scale(1.3);}
#n_10:hover {transform: scale(1.3);}
#n_11:hover {transform: scale(1.3);}
#n_12:hover {transform: scale(1.3);}
#n_13:hover {transform: scale(1.3);}
#n_14:hover {transform: scale(1.3);}
#n_15:hover {transform: scale(1.3);}
}

/*==layout==*/

.box{
    color: #222;
    padding: 0 0px;
    margin:0;
    height:100vh;
    width:100%;
}

#box1,#box2,#box3,#box4{position:relative; width:100%; height:100vh;}
/*========= box1 ===============*/

#box1{
    background:#ffffff;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height: 100vh;
  margin:auto auto;
  top:50%;left:50%;transform:translate(-50%,-50%);
  position:relative;overflow:visible
}

@media screen and (max-width: 2000px) {.container{max-height:1100px}}
@media screen and (max-width: 1800px) {.container{max-height:1000px}}

@media screen and (max-width: 1500px) {.container{max-height:900px}}
@media screen and (max-width: 768px) {.container{max-height:850px;top:51%;}}
@media screen and (max-width: 480px) and (max-height: 1080px) {.container{max-height:720px;top:50%;}}
@media screen and (max-width: 375px) and (min-height: 700px) {.container{max-height:700px;max-width:98%;top:51%;margin-top:1%;}}
@media screen and (max-width: 375px) and (min-height: 550px) {.container{max-height:650px;max-width:98%;top:51%;}}
@media (orientation: landscape) and (max-height: 480px) {.container{max-height:90%;max-width:98%;top:49%;margin-top:-20px;}}


/*========= box2 ===============*/

#box2{
    background:#ffffff;
}
.poet{
  position: absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height: 100vh;
  background:#fff;
  text-align:center;
  padding:0;
  overflow: hidden;
}

#image-container {
  width: 100%;
  text-align: center;
  position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);
  margin:auto auto;
  max-width:1500px
}

#image-a {
  display: none;
  object-fit: scale-down;
  max-width: 68%;
  max-height: 2000px;
  margin:auto auto;
}

#image-b{width:67%; z-index:20; height:auto;margin:20px;}

@media screen and (max-width: 2000px) {#image-a {width:65%;}}
@media screen and (max-width: 1800px) {#image-a {width:70%;}}
@media screen and (max-width: 1500px) {#image-a {max-height:650px}}
@media screen and (max-width: 1366px) {#image-a {width:70%;}}
@media (orientation: portrait) and (max-width: 1024px) {#image-a {width:70%;}}
@media screen and (max-width: 926px) and (min-height: 479px) {#image-a {width:80%;}}
@media screen and (max-width: 926px) and (max-height: 480px) {#image-a {width:70%;}}
@media screen and (max-width: 812px) and (max-height: 375px) {#image-a {width:60%;}}
@media screen and (max-width: 768px) and (min-height: 479px) {#image-a {width:70%;}}
@media screen and (max-width: 480px) {#box2{overflow: visible}.poet{overflow: visible}}
@media (orientation: landscape) and (max-height: 480px) {#image-a {width:45%}#box2{height150%;}
}
@media (orientation: landscape) and (max-width:926px) and (max-height:480px) {#box2{margin:80px 0 0 0; overflow:visible}}



/*========= box3 ===============*/

#box3{
    background:#ffffff;
}

.explain{
  background:rgba(255,255,255,0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:100%;
  height:100%;
  margin:0 0;
  padding:0 20px;
  max-width:2000px
}

.flex_box1 {
  display: flex;
  flex-flow:row;
  width:98%;
  height: 90%;
  margin:auto auto;
  justify-content: center;
  align-items: center;
  text-align:center;
  max-width:2500px;
}

.flex-item-x {width: 50%;margin:0; display: flex; align-items: center; justify-content: center; flex-flow: column;}
.flex-item-y {width: 50%;margin:0; display: flex; align-items: center; justify-content: center; flex-flow: column;}
.flex-item-sn {width: 90%; margin:auto 7% auto auto; height:auto}
.flex-item-sn img{width:100%;transition: all 0.3s ease}
.flex-item-lan{z-index:20;letter-spacing:0.25em;}
.flex-item-lan img{border:solid 0.5px #000; width:30px; height:auto; transition: all 0.3s ease;}
.flex-item-lan img:hover {transform:scale(1.2);filter:grayscale(0%);border:solid 0.3px #222}
.flex-item-lan img:active {transform:scale(1.2); opacity:1;border:solid 0.3px #222}
.flex-item-info{width:85%;  margin:auto auto auto 7%; z-index:19}
.lan_span{letter-spacing:0.2em;}

@media screen and (max-width: 2000px){
.flex-item-lan img{width:28px;}
.flex-item-sn img{width:90%;}
}
@media screen and (max-width: 1700px){
.flex-item-lan img{width:25px;}
}
@media screen and (max-width: 1400px){
.flex-item-lan img{width:23px;}
}

@media (orientation: portrait) and (max-width: 1024px) {
.flex_box1 {display: flex; flex-flow:column; width:95%;}
.flex-item-x {width: 95%;margin:auto; align-items: flex-end;}
.flex-item-y {width: 100%;margin:auto; align-items: flex-start;}
.flex-item-sn img{width:70%; margin:0}
.flex-item-lan img{border:solid 0.8px #000; width:20px;}
.lan_span{letter-spacing:0.15em;}
}

@media (orientation: landscape) and (max-width: 768px) {
.flex_box1 {flex-flow:row;}
.flex-item-x {width: 30%;margin:auto 3% auto 1%; display: flex; align-items: center; justify-content: center; flex-flow: column;}
.flex-item-y {width: 65%;margin:auto 1% auto auto; display: flex; align-items: center; justify-content: center; flex-flow: column;}
.flex-item-sn {width: 80%; margin:auto auto}
.flex-item-sn img{width:100%;}
.flex-item-lan {padding-top:2px;}
.flex-item-lan img{border:solid 0.8px #000; width:18px; height:auto;}
}
@media (orientation: portrait) and (max-width: 480px){
.flex_box1 {width:99%}
.flex-item-lan {padding-top:2px;}
.flex-item-lan img{border:solid 0.8px #000; width:18px; height:auto}
.flex-item-x {width: 95%;margin:auto; align-items: flex-end;}
.flex-item-y {width: 100%;margin:auto; align-items: flex-start;}
.flex-item-sn img{width:90%;overflow:visible}
.flex-item-sn img:hover{transform:scale(1.1);} 
.min-pc{display:none}
.flex-item-lan img:hover {transform:scale(1.3)}
.flex-item-lan img:active {transform:scale(1.3)}
}
@media (orientation: landscape) and (max-width:926px) and (max-height:480px) {
.flex_box1 {flex-flow:row;}
.flex-item-x {width: 35%;margin:auto 1% auto 1%; display: flex; align-items: center; justify-content: center; flex-flow: column;}
.flex-item-y {width: 65%;margin:auto 0 auto auto ; display: flex; align-items: center; justify-content: center; flex-flow: column;}
.flex-item-sn {width: 95%; margin:auto;}
.flex-item-sn img{width:100%;}
.flex-item-sn img:hover{transform:scale(1.1);} 
.flex-item-lan {padding-top:2px;}
.flex-item-lan img{border:solid 0.8px #000; width:18px; height:auto;}
.flex-item-lan img:hover {transform:scale(1.3)}
.flex-item-lan img:active {transform:scale(1.3)}
}

@media (orientation: portrait) and (max-width: 375px){
#image-b{width:55%; z-index:20; height:auto;margin:20px;}
}
#box3 p{font-family: 'Zen Kaku Gothic New', sans-serif; text-align:left; color:#222; font-weight: 500; font-size: 1rem; letter-spacing:0.25em; line-height: 2em;}
.tit{font-family: 'Zen Kaku Gothic New', sans-serif; text-align:center;font-size: 2rem; letter-spacing:0.25em; line-height: 1em; padding-bottom:20px;}
.alla{font-size: 0.9rem}

/*========= box4 ===============*/

#box4{
    background:rgba(255,255,255,0.3);
}
#box4 p{font-family: 'Zen Kaku Gothic New', sans-serif; text-align:left; color:#fff;font-size: 1rem; letter-spacing:0.25em; line-height: 2em;}

.prof{
  background:rgba(255,255,255,0);
  position: absolute;
  top: 50%;
  left: 48.5%;
  transform: translate(-50%, -50%);
  width:100%;
  height:100%;
  margin:0 0;
  padding:30px 20px 0 20px;
  max-width:2000px
}

.flex_box2 {
  display: flex;
  flex-flow:column;
  width:98%;
  height: 90%;
  margin:auto auto;
  justify-content: center;
  align-items: center;
  text-align:center;
  max-width:2500px;
}

.flex-item-a {
  background: none;
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  text-align:center;
  flex-flow: column;
}

.flex-item-logo{background: none; width: 100%;}
.flex-item-logo a {text-decoration:none}
.flex-item-logo a img{width:100%;opacity:0.8; transition: all 0.3s ease;margin-left:5px}
.flex-item-logo a img:hover{opacity:1}
.flex-item-logo a img:active{opacity:1}
.flex-item-lang{letter-spacing:0.25em;background: none; width: 100%; padding-top:27px;padding-bottom:15px;padding-right:5px}
.flex-item-lang img{text-align:center; border:solid 0.5px #000; width:30px; height:auto; transition: all 0.3s ease; opacity:1;}
.flex-item-lang img:hover {transform:scale(1.2);filter:grayscale(0%);border:solid 0.3px #222}
.flex-item-lang img:active {transform:scale(1.2); opacity:1;border:solid 0.3px #222}

.flex-item-b {
  background: none;
  width: 100%;
  margin:0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align:center;
  flex-flow: row;
}
.flex-item-prof{background: none; width: 90%;}
.flex-item-contact{background: none; width: 100%;text-align:left;padding:0 0 0 5px; margin-top:-15px}


@media screen and (max-width: 2000px){
.flex-item-lang img{width:28px;}
.flex_box2{width:70%;height:90%;}
.flex-item-logo a img{width:60%;}
.flex-item-lang{padding-top:22px;padding-bottom:12px;}
}
@media screen and (max-width: 1700px){
.flex-item-lang img{width:25px;}
.flex-item-logo a img{width:40%;}
}
@media screen and (max-width: 1400px){
.flex-item-lang img{width:23px;}
.flex_box2{width:90%;}
}
@media screen and (max-width: 1024px){
.contact{color: #fff; text-decoration: none; line-height:50px; font-size: 14px;width:100%;height:auto;}
.contact a{color: #fff; text-decoration: none; padding:0 2px 0 2px; transition: all 0.3s ease;}
.contact a:hover{font-size: 18px; text-decoration: none;padding:0 0px 0 0px;line-height:46px; }
}

@media screen and (max-width: 768px) and (min-height: 481px){
.flex-item-a {width: 100%;}
.flex-item-b {width: 100%;}
.flex-item-logo a img{width:60%;margin-left:0px}
.flex-item-prof{width: 100%;}
.flex-item-lang{padding-top:13px;padding-bottom:7px;padding-right:0px}
.flex-item-lang img{border:solid 0.6px #000; width:20px;}
}

@media (orientation: landscape) and (max-width:926px) and (max-height:480px) {
.flex_box2{width:98%;}
.flex-item-a {width: 95%;align-items:flex-end;margin-top:0px}
.flex-item-b {width: 100%;margin:0 0 auto 0; align-items:flex-start;}
.flex-item-logo a img{width:18%;opacity:1;margin-left:0px}
.flex-item-logo a img:hover{transform:scale(1.2)}
.flex-item-logo img:hover{transform:scale(1.2)}
.flex-item-prof{width: 100%;}
.flex-item-lang{padding-top:0px;padding-bottom:0px;padding-right:0px;margin:-15px auto}
.flex-item-lang img{border:solid 0.6px #000; width:20px;}
.buruburu:hover {animation: none}
.flex-item-lang img:hover {transform:scale(1.3)}
.flex-item-lang img:active {transform:scale(1.3)}
#box4 p{font-size: 0.65rem; letter-spacing:0.13em; line-height:1.1em}
}

@media screen and (max-width: 480px) {
.flex_box2{width:95%;}
.flex-item-a {width: 95%;align-items:flex-end;margin-top:30px}
.flex-item-b {width: 100%;margin:0 0 auto 0; align-items:flex-start;}
.flex-item-logo a img{width:60%;opacity:1;margin-left:0px}
.flex-item-logo a img:hover{transform:scale(1.2)}
.flex-item-logo img:hover{transform:scale(1.2)}
.flex-item-prof{width: 100%;}
.flex-item-lang{padding-top:0px;padding-bottom:0px;padding-right:0px}
.flex-item-lang img{border:solid 0.6px #000; width:20px;}
.buruburu:hover {animation: none}
.flex-item-lang img:hover {transform:scale(1.3)}
.flex-item-lang img:active {transform:scale(1.3)}
}

.contact{color: #fff; text-decoration: none; line-height:50px; font-size: 20px;width:100%;height:auto;}
.contact a{color: #fff; text-decoration: none; padding:0 2px 0 2px; transition: all 0.3s ease;}
.contact a:hover{font-size: 24px; text-decoration: none;padding:0 0px 0 0px;line-height:46px; }

/*========= common ===============*/

.logo_fadein{
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9999999999999;
}


@media screen and (max-width:2000px) {
.poet_img img{width:70%;}
#box3 p{font-size: 0.9rem; letter-spacing:0.2em; line-height:2.5em;}
#box4 p{font-size: 0.9rem; letter-spacing:0.2em; line-height:2.5em;}
.tit{font-size: 1.5rem; letter-spacing:0.3em; padding-bottom:15px;}
.alla{font-size: 0.8rem}

}

@media screen and (max-width:1750px) {
.poet_img img{width:70%;}
#box3 p{font-size: 0.85rem; letter-spacing:0.2em; line-height:2.5em;}
#box4 p{font-size: 0.85rem; letter-spacing:0.2em; line-height:2.5em;}
.tit{font-size: 1.5rem; letter-spacing:0.3em;padding-bottom:15px;}
.alla{font-size: 0.8rem}
}

@media screen and (max-width:1500px) {
.poet_img img{width:70%}
#box3 p{font-size: 0.8rem; letter-spacing:0.2em; line-height:2.3em}
#box4 p{font-size: 0.8rem; letter-spacing:0.2em; line-height:2.3em}
.tit{font-size: 1.2rem; letter-spacing:0.25em}
.alla{font-size: 0.75rem}
}


@media screen and (max-width:1300px) {
.poet_img img{width:60%}
}

@media screen and (max-width:1000px) {
#box3 p{font-size: 0.7rem; letter-spacing:0.2em; line-height:2.1em}
#box4 p{font-size: 0.7rem; letter-spacing:0.2em; line-height:2.1em}
.tit{font-size: 1.2rem; letter-spacing:0.25em}
.alla{font-size: 0.7rem}
}

@media screen and (max-width:768px) {
#box3 p{font-size: 0.7rem; letter-spacing:0.2em; line-height:2em;}
#box4 p{font-size: 0.7rem; letter-spacing:0.2em; line-height:2em}
.tit{font-size: 1.2rem; letter-spacing:0.25em;}
.alla{font-size: 0.65rem}
.prof,.explain{max-height:850px;margin:auto auto;}
}

@media (orientation: landscape) and (max-height:501px){
#box3 p{font-size: 0.7rem; letter-spacing:0.15em; line-height:1.5em}
#box4 p{font-size: 0.7rem; letter-spacing:0.15em; line-height:1.5em}
.tit{font-size: 0.8rem}
#stalker,#cursor{display:none}
.alla{font-size: 0.55rem}
}

@media screen and (max-width:501px) and (min-height:502px) {
#box3 p{font-size: 0.65rem; letter-spacing:0.15em; line-height: 2em;}
#box4 p{font-size: 0.65rem; letter-spacing:0.15em; line-height: 2em}
.tit{font-size: 1rem; letter-spacing:0.1em; margin-top:20px;}
.alla{font-size: 0.6rem}
#box4{background-image: url(img/01/haikei.jpg); background-repeat: no-repeat; background-position:left} 
#cursor, #stalker {display: none;}
.prof,.explain{max-height:800px}
}


@media screen and (max-width:480px) {
#box3 p{font-size: 0.7rem; letter-spacing:0.15em; line-height: 1.9em}
#box4 p{font-size: 0.7rem; letter-spacing:0.15em; line-height: 1.9em}
.tit{font-size: 0.85rem; letter-spacing:0.1em; margin-top:20px;}
.alla{font-size: 0.65rem}
.poet{margin-top:-30px;}
}

@media screen and (max-width:375px) {
#box3 p{font-size: 0.63rem; letter-spacing:0.1em; line-height: 1.65em;}
#box4 p{font-size: 0.63rem; letter-spacing:0.1em; line-height: 1.65em;}
.alla{font-size: 0.55rem}
.tit{font-size: 0.8rem; letter-spacing:0.1em; margin-top:20px;}
.poet{top:45%;height:95%;margin:auto auto;}
.prof{margin-top:0px}
}

@media (max-width: 480px) and (max-height: 700px) {
.poet{top:46%;width:93%;margin:auto auto;}
#box3.prof{margin-top:20px}
#box4.prof{margin-top:20px;margin-bottom:0px}
}

@media (max-width: 375px) and (max-height: 550px) {
.poet{top:50%;width:93%;margin:auto auto;}
#box3.prof{margin-top:20px}
#box4.prof{margin-top:20px;margin-bottom:0px}
}

@media (orientation: landscape) and (max-height: 400px){
.poet{top:47%;height:90%;margin:auto auto;}
}

/*========= #yt_player ===============*/


.overlay, #yt_player {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}
 
.overlay{
    z-index: -1;
}
 
#yt_player{
    z-index: -2;
}

/* アニメーション*/
.updown {
    animation-name:updown1;   /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 8s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite;
    transition: all 0.3s;
}
 
@keyframes updown1 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}

.buruburu{display: inline-block}
.buruburu:hover {animation: buruburu .03s linear infinite}

@keyframes buruburu {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(3px, 3px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}



/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn,
{
    opacity: 0;
}


/* pagenation*/

.pagenation{
    padding: 20px;
    position: fixed;
    left: 98%;
    top: 50%;transform: translate(-50%, -50%);z-index:30;
    opacity:0.9;
}
.pagenation li{
    list-style-type: none;
    margin-bottom: 20px;
}
.pagenation a{
    display: block;
    height: 5px;
    width: 5px;
    border: 1px solid #000;
    border-radius: 90%;
}
.pagenation a.active{
    background: #000;
    opacity:1;
}

@media (orientation:landscape) and (max-width:768px) {
.pagenation a{display:none;
    height: 3px;
    width: 3px;
    border-radius: 90%;
    border: 0.5px solid #000;
}
.pagenation a.active{display:none;
    background: #000;
    border: 0.5px solid #000;   
}
}

@media screen and (max-width:428px) {
.pagenation{display:none;
    padding: 20px;
    position: fixed;
    left: 98%;
    top: 5px;transform: translateX(-50%);z-index:9980;
    opacity:0.7;
}
.pagenation li{display:none;
    list-style-type: none;
    margin-bottom: 13px;
}
.pagenation a{display:none;
    height: 3px;
    width: 3px;
    border-radius: 90%;
    border: 0.5px solid #000;
}
.pagenation a.active{display:none;
    background: #000;
    border: 0.5px solid #000;
    opacity:1;
}
}


/*scrolldown2*/

.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:15px;
  left:50%;
  overflow:visible;z-index:999
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:5px;
  bottom:10px;
    /*テキストの形状*/
  color: #333;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
  overflow:visible;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight:bold;opacity:0.7
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-2.5px;
    /*丸の形状*/
  width:6px;
  height:6px;
  border-radius: 50%;
  background:#333;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 2s ease-in-out infinite,
    cirlemovehide 2s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-3px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
      20%{opacity:0}
     50%{opacity:0.7;}
    75%{opacity:0.6;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0px;
  left:0;
    /*線の形状*/
  width:1px;
  height: 45px;
  background:#333;opacity:0.6;
}