@charset "UTF-8";

/*---------------------------------------------
animation
---------------------------------------------*/
section.mainAnimation {
position: relative;
height: 560px;
overflow: hidden;
}
.animation {
display: none;
position: absolute;
margin: auto;
width: 100%;
min-width: 1280px;
height: 100%;
min-height: 100%;
top: 50% !important;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
opacity:0;
}

.animation .inner{
position: relative;
height: 100%;
min-height: 100%;
}
.animation .inner *{
/*text-shadow: 0px 0px 6px #666;*/
}
.animation .inner img{
/*height: 100%;*/
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
z-index: 1;
}
.animation .inner:before {
content: "";
display: block;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.4);
position: absolute;
top: 0;
z-index: 2;
}

.mainTitle {
display: block;
font-weight: 100;
color: #fff;
position:absolute;
top:50%;
left:50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
text-align: center;
display: none;
z-index: 2;
}
.mainTitle h1{
font-size: 3.6rem;
font-weight: 100;
}
.mainTitle h1 span{
font-size: 2.4rem;
}


.mainTitle  .icon_logo01:before {
font-size: 6rem;
color: #fff;
}
.tgt {
font-family: 'Noto Serif Japanese', serif;
opacity: 0;
position:absolute;
top:50%;
left:50%;
display:inline;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
/*
writing-mode:vertical-rl;
-webkit-writing-mode: vertical-rl;
text-orientation:upright;
*/
z-index: 2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: bold;
}

.tgtNone{
font-family: 'Noto Serif Japanese', serif;
position:absolute;
top:50%;
left:50%;
display:inline;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
font-size: 3.6rem;
color: #fff;
font-weight: 100;
z-index: 2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: bold;
}
.tgt span{
opacity: 0;
font-size: 2.8rem;
color: #fff;
font-weight: 100;
}

/*
#item01 .tgt span:nth-last-child(-n+2){
font-size: 3.4rem;
}
*/

#replayBtn {
display:none;
}    
#item01,
#item02,
#item03,
#item04,
#item05,
#item06{
}

@media screen and (max-width : 768px){
section.mainAnimation {
height: 320px;
margin: 0 auto;
}
section.mainAnimation img{
width: auto;
max-width: inherit;
}
.animation,
.animation .inner{
height: 100%;
}
.animation{
min-width: 900px;
}
.tgtNone{
font-size: 2.8rem;
}

.googleOn .tgtNone,
.googleOn .tgt{
width: 33%;
}

.tgt span{
font-size: 2.0rem;
}
.mainTitle {
width: 40%;
padding: 20px;
box-sizing: border-box;
}
.mainTitle h1{
font-size: 2.4rem;
font-weight: 100;
}
.mainTitle h1 span{
font-size: 1.6rem;
}
.mainTitle  .icon_logo01:before {
font-size: 4rem;
}
.mainTitle h1+p{
font-size: 1.2rem;
font-weight: bold;
}

}

@media screen and (max-width : 320px){

}

/*---------------------------------------------
content
---------------------------------------------*/

.btnLink_def01 {
margin-top: 20px;
text-align: center;
}

/*----------------------------------------------
map
----------------------------------------------*/
#map {
width: 100%;
height: 400px;
}